/* Palette: midnight purple, magenta, sunset tones */
:root {
    --midnight: #120a1f;
    --magenta: #ff70a6;
    --sunset-orange: #ff9b55;
    --sunset-pink: #d461a6;
    --deep-plum: #a50062;
    --cyan: #5ff0ff;
    --paper: #f4e9dc;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--midnight);
    color: var(--paper);
    font-family: 'Special Elite', 'Courier New', Courier, monospace;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#view, #view canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* CRT scanlines and vignette over everything. Doesn't block clicks. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background:
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
}

/* Neon aura during the sugar rush */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    opacity: 0;
    box-shadow: inset 0 0 80px rgba(255, 112, 166, 0.55), inset 0 0 160px rgba(95, 240, 255, 0.35);
}
body.rush::after { opacity: 1; animation: rush-aura 0.9s ease-in-out infinite; }
body.rush #view canvas { animation: rush-pulse 0.9s ease-in-out infinite; }
@keyframes rush-aura {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(40deg) brightness(1.35); }
}
@keyframes rush-pulse {
    0%, 100% { filter: saturate(1.3) hue-rotate(0deg) brightness(1.05); }
    50% { filter: saturate(2) hue-rotate(35deg) brightness(1.25); }
}

/* She's close: the screen shudders */
body.danger #view canvas { animation: shudder 0.18s steps(2) infinite; }
@keyframes shudder {
    0% { transform: translate(0, 0); }
    50% { transform: translate(2px, -1px); }
    100% { transform: translate(-2px, 1px); }
}

.hidden { display: none !important; }

/* HUD */
#hud {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    left: calc(16px + env(safe-area-inset-left));
    max-width: min(560px, 80vw);
    padding: 8px 12px;
    font-size: 17px;
    background: rgba(18, 10, 31, 0.75);
    border: 2px dashed var(--magenta);
    box-shadow: 0 0 14px rgba(255, 112, 166, 0.5);
    text-shadow: -1px 0 rgba(255, 0, 80, 0.6), 1px 0 rgba(0, 255, 255, 0.4);
    pointer-events: none;
    z-index: 10;
}
#status[data-tone="good"] { color: #b8ffb0; }
#status[data-tone="bad"] { color: var(--sunset-orange); }
#status[data-tone="rush"] { color: var(--cyan); animation: rush-text 0.5s steps(2, jump-none) infinite; }
@keyframes rush-text {
    0% { color: var(--cyan); text-shadow: 0 0 8px var(--magenta); }
    50% { color: var(--magenta); text-shadow: 0 0 8px var(--cyan); }
}

#crosshair {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: rgba(244, 233, 220, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

/* Screens: dashed neon frame with notched corners */
.screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 90vw);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 24px 28px;
    text-align: center;
    background: rgba(18, 10, 31, 0.92);
    border: 2px dashed var(--magenta);
    box-shadow: 0 0 18px rgba(255, 112, 166, 0.6), inset 0 0 22px rgba(255, 112, 166, 0.2);
    clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 95%, 0 5%);
    z-index: 20;
}
.screen .logo { width: min(320px, 70%); height: auto; display: block; margin: 0 auto 8px; }
.screen h1 {
    color: var(--sunset-orange);
    font-size: 30px;
    font-weight: normal;
    margin: 6px 0 14px;
    letter-spacing: 1px;
    text-shadow: -2px 0 rgba(255, 0, 80, 0.7), 2px 0 rgba(0, 255, 255, 0.5), 0 0 14px rgba(255, 112, 166, 0.6);
}
.screen p { font-size: 17px; line-height: 1.5; margin: 10px 0; }
.screen button {
    font-family: inherit;
    font-size: 20px;
    padding: 10px 30px;
    margin: 8px 6px 0;
    background: var(--deep-plum);
    color: var(--paper);
    border: 2px dashed var(--magenta);
    box-shadow: 0 0 12px rgba(255, 112, 166, 0.5);
    cursor: pointer;
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.screen button.small { font-size: 15px; padding: 6px 18px; background: transparent; }
.screen button:hover { background: var(--sunset-pink); color: var(--midnight); }
.small-print { font-size: 13px !important; color: var(--sunset-pink); }

#credits { text-align: left; }
#credits h1 { text-align: center; }
#credits h2 { font-size: 16px; color: var(--magenta); margin: 16px 0 4px; font-weight: normal; }
#credits li, #credits .note { font-size: 13px; line-height: 1.45; word-break: break-word; }
#credits ul { margin: 0; padding-left: 18px; }
#credits-close { display: block; margin: 16px auto 0 !important; }

/* Dialogue box */
#dialogue {
    position: fixed;
    left: 50%;
    bottom: calc(32px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(720px, 92vw);
    box-sizing: border-box;
    padding: 18px 24px;
    background: rgba(18, 10, 31, 0.93);
    border: 2px dashed var(--magenta);
    box-shadow: 0 0 20px rgba(255, 112, 166, 0.55);
    clip-path: polygon(1% 0, 99% 0, 100% 8%, 100% 92%, 98% 100%, 2% 100%, 0 92%, 0 8%);
    z-index: 30;
    cursor: pointer;
}
#dialogue-name { color: var(--magenta); font-size: 18px; margin-bottom: 8px; text-shadow: 0 0 8px rgba(255, 112, 166, 0.6); }
#dialogue-text { font-size: 17px; line-height: 1.5; min-height: 3em; }
.dialogue-hint { margin-top: 10px; font-size: 12px; color: var(--sunset-pink); text-align: right; }

/* Video overlay: centre of the screen, square */
#video-layer {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 2, 10, 0.55);
}
#video {
    width: min(82vmin, 640px);
    height: min(82vmin, 640px);
    object-fit: contain;
    background: #000;
    box-shadow: 0 0 30px rgba(255, 112, 166, 0.6);
    pointer-events: none;
}
#video-close {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    right: calc(14px + env(safe-area-inset-right));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 26px;
    font-family: inherit;
    color: var(--paper);
    background: var(--deep-plum);
    border: 2px dashed var(--magenta);
    box-shadow: 0 0 14px rgba(255, 112, 166, 0.7);
    cursor: pointer;
    animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.08); } }

/* Touch controls: phones and tablets only, during play */
#touch-controls {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 15;
    touch-action: none;
}
body.touch.playing #touch-controls { display: block; }
#look-zone { position: fixed; inset: 0; touch-action: none; }
#stick-base {
    position: fixed;
    left: calc(24px + env(safe-area-inset-left));
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px dashed var(--magenta);
    background: rgba(18, 10, 31, 0.55);
    box-shadow: 0 0 14px rgba(255, 112, 166, 0.5);
    opacity: 0.45;
    pointer-events: none;
}
#stick-base.active { bottom: auto; opacity: 1; }
#stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(255, 112, 166, 0.55);
    box-shadow: 0 0 12px var(--magenta);
    pointer-events: none;
}
#act-btn {
    position: fixed;
    right: calc(24px + env(safe-area-inset-right));
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px dashed var(--cyan);
    background: rgba(18, 10, 31, 0.7);
    color: var(--cyan);
    font-size: 26px;
    box-shadow: 0 0 14px rgba(95, 240, 255, 0.45);
    touch-action: none;
}
body:not(.talking) #act-btn { display: none; }

.touch-only, .touch-only-inline { display: none; }
body.touch .touch-only { display: block; }
body.touch .touch-only-inline { display: inline; }
body.touch .desktop-only { display: none; }
body.touch.playing { touch-action: none; }
body.touch #crosshair { display: none; }

body.touch #dialogue {
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: min(720px, calc(100vw - 140px));
    left: calc(50% - 46px);
    padding: 12px 16px;
    max-height: 55%;
    overflow-y: auto;
}
body.touch #dialogue-text { font-size: 15px; line-height: 1.4; }
body.touch #hud { font-size: 14px; max-width: 70vw; }

@media (max-height: 500px) {
    .screen { padding: 12px 18px; }
    .screen .logo { width: min(200px, 50%); }
    .screen h1 { font-size: 22px; margin: 4px 0 8px; }
    .screen p { font-size: 14px; margin: 6px 0; }
    #hud { font-size: 13px; padding: 5px 9px; }
}
@media (max-width: 600px) {
    .screen h1 { font-size: 22px; }
    .screen p { font-size: 15px; }
}

/* Someone yelling at Community Strap. Doesn't pause the game. */
#toast {
    position: fixed;
    bottom: calc(28px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, 88vw);
    box-sizing: border-box;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    background: rgba(18, 10, 31, 0.88);
    border: 2px dashed var(--cyan);
    box-shadow: 0 0 16px rgba(95, 240, 255, 0.45);
    pointer-events: none;
    z-index: 12;
}
#toast-name { display: block; font-size: 13px; color: var(--cyan); margin-bottom: 4px; }
body.touch #toast { font-size: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(620px, calc(100vw - 190px)); }

/* Top right: who Community Strap has sucked up, and how many are left. */
#pop {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(16px + env(safe-area-inset-right));
    max-width: min(320px, 42vw);
    padding: 8px 12px;
    font-size: 15px;
    text-align: right;
    background: rgba(18, 10, 31, 0.75);
    border: 2px dashed var(--magenta);
    box-shadow: 0 0 14px rgba(255, 112, 166, 0.5);
    text-shadow: -1px 0 rgba(255, 0, 80, 0.6), 1px 0 rgba(0, 255, 255, 0.4);
    pointer-events: none;
    z-index: 10;
}
#pop-msg { color: var(--sunset-orange); margin-bottom: 6px; line-height: 1.35; }
#pop-count { color: var(--cyan); letter-spacing: 0.5px; }
#pop.bump { animation: pop-bump 0.45s ease-out; }
@keyframes pop-bump {
    0% { transform: translateX(0); box-shadow: 0 0 30px rgba(169, 0, 255, 0.9); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}
body.touch #pop { font-size: 12px; max-width: 38vw; padding: 5px 8px; }
@media (max-height: 500px) { #pop { font-size: 12px; padding: 5px 9px; } }

/* Her Own Primary's "want a hint?" choice */
#dialogue-choices { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
#dialogue-choices.hidden { display: none !important; }
#dialogue-choices button {
    font-family: inherit;
    font-size: 16px;
    padding: 8px 16px;
    color: var(--paper);
    background: var(--deep-plum);
    border: 2px dashed var(--magenta);
    box-shadow: 0 0 10px rgba(255, 112, 166, 0.45);
    cursor: pointer;
}
#dialogue-choices button:hover { background: var(--sunset-pink); color: var(--midnight); }
#dialogue-choices span { font-size: 12px; opacity: 0.75; }