html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body {
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

#friend-picker-app {
    font-family: "Courier New", Courier, monospace;
    color: #ff00ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

#friend-picker-app h1 {
    margin: 12px 0 8px;
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    text-shadow: 0 0 8px #ff00ff;
    letter-spacing: 2px;
}

#ui-layer {
    background: #111;
    color: #0f0;
    padding: 10px 14px;
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    border: 2px solid #ff00ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
}

#score {
    color: #fff;
    text-shadow: 0 0 5px #0f0;
    display: inline-block;
    min-width: 2ch;
    transition: transform 0.18s ease-out;
}

#score.bump {
    transform: scale(1.5);
    color: #0f0;
}

#reset-btn,
#mute-btn,
#end-btn,
#back-btn {
    background: #111;
    color: #0f0;
    border: 2px solid #ff00ff;
    font-family: "Courier New", Courier, monospace;
    padding: 8px 14px;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 36px;
    letter-spacing: 1px;
}

#reset-btn:hover,
#mute-btn:hover,
#end-btn:hover,
#back-btn:hover {
    background: #ff00ff;
    color: #fff;
}

#end-btn {
    color: #ff0;
    border-color: #ff0;
}

#end-btn:hover {
    background: #ff0;
    color: #000;
}

#back-btn {
    color: #00ffff;
    border-color: #00ffff;
    margin-right: auto;
}

#back-btn:hover {
    background: #00ffff;
    color: #000;
}

#game-container {
    width: 100%;
    max-width: 1200px;
    height: 70vh;
    margin: 12px auto;
    overflow: hidden;
    position: relative;
    background: #00ffff url('https://madderverse.org/friend-picker/assets/img/stars.jpg');
    background-size: cover;
    border: 6px ridge #ff00ff;
    z-index: 1;
    box-shadow: 0 0 20px #ff00ff;
    touch-action: none;
}

.game-element {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

/* ---------- Reticle (targeting cursor) ---------- */
#reticle {
    width: 36px;
    height: 36px;
    z-index: 900;
    pointer-events: none;
    transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
}

#reticle .reticle-ring {
    position: absolute;
    inset: 0;
    border: 2px solid #ff00ff;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff00ff, inset 0 0 6px rgba(255, 0, 255, 0.4);
    animation: reticle-pulse 1.2s ease-in-out infinite;
}

#reticle .reticle-cross {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(#ff00ff, #ff00ff) center/2px 60% no-repeat,
        linear-gradient(#ff00ff, #ff00ff) center/60% 2px no-repeat;
    filter: drop-shadow(0 0 3px #ff00ff);
}

#reticle.locked .reticle-ring {
    border-color: #00ffcc;
    box-shadow: 0 0 12px #00ffcc, inset 0 0 8px rgba(0, 255, 204, 0.6);
    animation: reticle-locked 0.6s ease-in-out infinite alternate;
}

#reticle.locked .reticle-cross {
    background:
        linear-gradient(#00ffcc, #00ffcc) center/2px 60% no-repeat,
        linear-gradient(#00ffcc, #00ffcc) center/60% 2px no-repeat;
    filter: drop-shadow(0 0 4px #00ffcc);
}

#reticle.hidden { opacity: 0; }

@keyframes reticle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes reticle-locked {
    from { transform: scale(1.15); }
    to { transform: scale(1.35); }
}

/* ---------- Hand (sprite-driven, on-demand) ---------- */
#hand {
    z-index: 1100;
    pointer-events: none;
    background-image: url('https://madderverse.org/friend-picker/assets/img/hands.png');
    background-repeat: no-repeat;
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform, opacity;
    opacity: 0;
}

#hand[hidden] { display: none; }

#hand.visible {
    opacity: 1;
    transition: opacity 0.08s ease-out, transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1);
}

#hand.pinching {
    filter: brightness(1.3) drop-shadow(0 0 10px #ff00ff);
}

.head {
    z-index: 100;
    transform: translate3d(0, 0, 0);
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
    background-repeat: no-repeat;
}

.head.flying {
    transition: transform 0.7s cubic-bezier(0.5, -0.5, 0.7, 0.5), opacity 0.7s ease-out;
    opacity: 0;
    z-index: 200;
}

.head.yanking {
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1.4);
    z-index: 250;
}

.head.jittering {
    animation: head-jitter 0.06s linear infinite;
    z-index: 250;
}

@keyframes head-jitter {
    0%   { transform: translate(-2px, -1px); }
    25%  { transform: translate(2px, 1px); }
    50%  { transform: translate(-1px, 2px); }
    75%  { transform: translate(1px, -2px); }
    100% { transform: translate(-2px, 1px); }
}

.head.exploding {
    animation: head-explode 0.32s ease-out forwards;
    z-index: 260;
    pointer-events: none;
}

@keyframes head-explode {
    0%   { opacity: 1; filter: brightness(1) blur(0); transform: scale(1) rotate(0deg); }
    35%  { opacity: 1; filter: brightness(2.2) blur(0); transform: scale(1.4) rotate(8deg); }
    100% { opacity: 0; filter: brightness(3) blur(6px); transform: scale(2.2) rotate(-12deg); }
}

.explode-bit {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #b6f441 0%, #5a9b1f 70%, #2d5a0f 100%);
    box-shadow: 0 0 6px #5a9b1f;
    pointer-events: none;
    z-index: 255;
    will-change: transform, opacity;
    animation: bit-fly 0.5s ease-out forwards;
}

@keyframes bit-fly {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--bx, 60px), var(--by, -40px)) scale(0.4); }
}

.booger {
    position: absolute;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 35% 35%, #b6f441 0%, #5a9b1f 60%, #2d5a0f 100%);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.4), 0 0 6px #5a9b1f;
    z-index: 1100;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}

.booger.stretched {
    width: 10px;
    height: 32px;
    border-radius: 40% 60% 40% 60%;
}

#timer-wrap, #score-wrap {
    color: #0f0;
    text-shadow: 0 0 5px #0f0;
}

#timer.warning {
    color: #ff0;
    text-shadow: 0 0 8px #ff0;
}

#timer.danger {
    color: #f33;
    text-shadow: 0 0 8px #f33;
    animation: timer-flash 0.5s infinite;
}

@keyframes timer-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ---------- Booger pop (CSS-only — no sprite, no pile) ---------- */
/* Each plucked booger appears at the fingertip and pops out. */
.booger.popping {
    animation: booger-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes booger-pop {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    40%  { opacity: 1; transform: translate(-50%, -110%) scale(1.6) rotate(12deg); }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(0.6) rotate(-15deg); }
}

/* Used when a special booger flies up to the side HUD instead of fading away. */
.booger.flying-special {
    transition: left 0.55s cubic-bezier(0.4, 0, 0.6, 1),
                top  0.55s cubic-bezier(0.4, 0, 0.6, 1),
                transform 0.55s ease-in,
                opacity 0.18s 0.5s ease-out;
}

/* ---------- Side HUD: collected special booger friends ---------- */
#friends-collected {
    position: absolute;
    top: 12px;
    right: 12px;
    width: clamp(72px, 9vw, 110px);
    z-index: 700;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #00ffff;
    border-radius: 8px;
    padding: 8px 6px;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}

.friends-collected-title {
    color: #00ffff;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 6px;
    text-shadow: 0 0 4px #00ffff;
}

#friends-collected-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    max-height: 60vh;
    overflow: hidden;
}

.collected-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ff00ff;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    background: radial-gradient(circle at 35% 35%, var(--bf-color, #b6f441) 0%, var(--bf-color, #5a9b1f) 60%, #2d5a0f 100%);
    animation: collected-arrive 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

@keyframes collected-arrive {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Booger type variants — placeholder gradients, replace with image assets later */
.booger.type-classic, .pile-booger.type-classic {
    background: radial-gradient(circle at 35% 35%, #b6f441 0%, #5a9b1f 60%, #2d5a0f 100%);
}
.booger.type-dark, .pile-booger.type-dark {
    background: radial-gradient(circle at 35% 35%, #6a8a2a 0%, #3a5a0f 60%, #1a2a05 100%);
}
.booger.type-bright, .pile-booger.type-bright {
    background: radial-gradient(circle at 35% 35%, #d4ff66 0%, #8ac41f 60%, #4a7a0f 100%);
}
.booger.type-goopy, .pile-booger.type-goopy {
    background: radial-gradient(circle at 35% 35%, #a4d96b 0%, #5e9931 50%, #2a5215 100%);
}
.booger.type-crusty, .pile-booger.type-crusty {
    background: radial-gradient(circle at 35% 35%, #c9d96b 0%, #7e9b3f 60%, #3a4a15 100%);
}

/* Reveal overlay shown when the 30s timer expires */
#reveal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in 0.4s ease-out;
}

#reveal-overlay[hidden] {
    display: none;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reveal-card {
    background:
        repeating-linear-gradient(45deg, rgba(255, 0, 255, 0.04) 0 8px, transparent 8px 16px),
        #0d0d18;
    border: 5px ridge #ff00ff;
    box-shadow:
        0 0 30px #ff00ff,
        0 0 60px rgba(0, 255, 255, 0.3),
        inset 0 0 0 2px #00ffff,
        inset 0 0 24px rgba(255, 0, 255, 0.18);
    padding: 0 0 22px;
    text-align: center;
    color: #0f0;
    font-family: "Courier New", Courier, monospace;
    max-width: 92%;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modal-zoom-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-zoom-in {
    0%   { opacity: 0; transform: scale(0.4) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.reveal-card h2 {
    margin: 0 0 14px;
    padding: 14px 24px;
    color: #fff;
    background: linear-gradient(180deg, #ff66ff 0%, #ff00ff 50%, #aa00aa 100%);
    border-bottom: 4px ridge #00ffff;
    text-shadow:
        2px 2px 0 #000,
        0 0 10px #ff00ff;
    letter-spacing: 4px;
    font-size: clamp(1.4rem, 4vw, 2rem);
    text-transform: uppercase;
}

#reveal-stats {
    margin: 0 24px 8px;
    color: #00ffcc;
    text-shadow: 0 0 4px #00ffcc;
    letter-spacing: 1px;
}

#reveal-friends-grid {
    margin-left: 16px;
    margin-right: 16px;
    flex: 1;
}

.reveal-actions {
    padding: 0 24px;
    margin-top: 4px;
}

/* ---------- Reveal: early-2000s booger-friend lore cards ---------- */
#reveal-friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
    max-height: 60vh;
    overflow-y: auto;
    margin: 12px 0 18px;
    padding: 12px 6px;
}

/* Each card is a tiny "Web 1.0 trading card window" — bevel chrome, drop shadow,
   gradient title bar, dotted background, big drop-shadow stamp. */
.reveal-friend-card {
    background: linear-gradient(180deg, #2a2a3a 0%, #1a1a26 100%);
    border: 3px outset #00ffff;
    box-shadow:
        4px 4px 0 #ff00ff,
        8px 8px 18px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px #000;
    padding: 0;
    overflow: hidden;
    text-align: center;
    animation: card-bounce-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes card-bounce-in {
    0%   { opacity: 0; transform: translateY(80px) scale(0.4) rotate(-6deg); }
    55%  { opacity: 1; transform: translateY(-10px) scale(1.06) rotate(2deg); }
    80%  { transform: translateY(2px) scale(0.98) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* Title bar — Win98-meets-Lisa-Frank gradient. */
.card-titlebar {
    background: linear-gradient(180deg, #ff66ff 0%, #ff00ff 35%, #aa00aa 100%);
    color: #fff;
    text-shadow: 1px 1px 0 #000, 0 0 6px #ff00ff;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: 0.78rem;
    letter-spacing: 2px;
    padding: 5px 8px;
    border-bottom: 2px solid #00ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
}

.card-titlebar::before,
.card-titlebar::after {
    content: '';
    position: absolute;
    top: 4px;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 1px solid #000;
}
.card-titlebar::before { left: 6px; }
.card-titlebar::after  { right: 6px; }

.card-titlebar-icon {
    color: #ffff66;
    text-shadow: 0 0 4px #ffff00;
    animation: titlebar-twinkle 1.2s infinite ease-in-out;
}
.card-titlebar-icon:last-child { animation-delay: 0.6s; }

@keyframes titlebar-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.4) rotate(20deg); opacity: 0.7; }
}

/* Card body has a subtle hatched / dotted background — peak GeoCities. */
.card-body {
    padding: 14px 12px 14px;
    background:
        repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.04) 0 4px, transparent 4px 8px),
        radial-gradient(circle at 20% 10%, rgba(255, 0, 255, 0.10), transparent 60%),
        radial-gradient(circle at 90% 95%, rgba(0, 255, 255, 0.10), transparent 60%),
        #14141f;
    font-family: "Courier New", Courier, monospace;
}

.card-image {
    width: 110px;
    height: 110px;
    margin: 0 auto 10px;
    border: 4px ridge #00ffff;
    background-image: radial-gradient(circle at 35% 35%, var(--bf-color, #b6f441) 0%, var(--bf-color, #5a9b1f) 65%, #2d5a0f 100%);
    background-color: #1a1a26;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow:
        0 0 0 2px #000,
        0 0 16px var(--bf-color, #5a9b1f),
        inset 0 0 12px rgba(0, 0, 0, 0.4);
}

.card-name {
    color: #ff00ff;
    font-weight: bold;
    font-size: 1.05rem;
    letter-spacing: 1.5px;
    margin: 6px 0 8px;
    text-shadow:
        0 0 4px #ff00ff,
        2px 2px 0 #000;
}

/* Definition list for the card meta facts. */
.card-meta {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    justify-content: center;
    margin: 0 auto 10px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px inset #00ffcc;
    width: fit-content;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.card-meta dt {
    color: #00ffcc;
    text-align: right;
    text-shadow: 0 0 3px #00ffcc;
}

.card-meta dd {
    color: #fff;
    margin: 0;
    text-align: left;
}

.card-lore {
    color: #b6f441;
    font-size: 0.8rem;
    line-height: 1.45;
    padding: 8px 6px 4px;
    border-top: 1px dashed #555;
    text-shadow: 0 0 3px rgba(182, 244, 65, 0.4);
    font-style: italic;
}

.reveal-empty {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 32px 16px;
    font-family: "Courier New", Courier, monospace;
    letter-spacing: 1px;
    grid-column: 1 / -1;
}

#reveal-stats {
    margin: 8px 0 16px;
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1px;
}

.reveal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

#play-again,
#reveal-back {
    background: #ff00ff;
    color: #fff;
    border: 4px outset #00ffff;
    font-family: "Courier New", Courier, monospace;
    padding: 14px 28px;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px #000;
}

#play-again:hover,
#reveal-back:hover {
    background: #00ffff;
    color: #ff00ff;
    border-style: inset;
}

#reveal-back {
    background: #111;
    color: #00ffff;
    border-color: #00ffff;
}

#reveal-back:hover {
    background: #00ffff;
    color: #000;
}

/* ---------- In-game / fullscreen layout ---------- */
body.in-game {
    overflow: hidden;
    background: #000;
}

body.in-game #friend-picker-app {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    gap: 0;
}

body.in-game #friend-picker-app h1 {
    display: none;
}

body.in-game #ui-layer {
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

body.in-game #game-container {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border-width: 0;
    box-shadow: none;
}

/* Landing-state cursor: visible normally; in-game state hides it for the reticle. */
#game-container { cursor: default; }
body.in-game #game-container { cursor: none; }

/* Reveal modal sits above the playfield — restore the system cursor so
   buttons (PLAY AGAIN / END GAME) are visible and clickable. */
#reveal-overlay,
#reveal-overlay * { cursor: default; }
#reveal-overlay button { cursor: pointer; }

/* ---------- Boot transition (page-swoosh, Goosebumps intro vibe) ---------- */
/* Three "pages" whip across the screen, one per swish in start.mp3. Each panel
   slides in fast from off-screen, slams to center with a tilt, then slides
   off the other side. The third page peels away to reveal the game. */
.boot-glitch {
    --boot-duration: 1.2s;
    position: absolute;
    inset: 0;
    z-index: 5000;
    pointer-events: none;
    overflow: hidden;
    perspective: 1000px;
}

.boot-panel {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    transform-origin: center;
    will-change: transform, opacity;
    box-shadow:
        0 0 80px rgba(0, 0, 0, 0.7),
        inset 0 0 80px rgba(0, 0, 0, 0.35);
    opacity: 0;
}

/* Panel 1 — magenta page, swooshes in from the right. */
.boot-panel-1 {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 24px),
        linear-gradient(135deg, #ff66ff 0%, #ff00ff 50%, #88008c 100%);
    animation: panel-swoosh-1 var(--boot-duration) cubic-bezier(0.55, 0.06, 0.32, 1) forwards;
}

/* Panel 2 — cyan page, swooshes in from the left. */
.boot-panel-2 {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 14px),
        linear-gradient(135deg, #66ffff 0%, #00ffff 50%, #008c8c 100%);
    animation: panel-swoosh-2 var(--boot-duration) cubic-bezier(0.55, 0.06, 0.32, 1) forwards;
}

/* Panel 3 — final dark page, drops in then peels open to reveal the game. */
.boot-panel-3 {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.18), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #1a1230 0%, #06060c 100%);
    animation: panel-swoosh-3 var(--boot-duration) cubic-bezier(0.5, 0, 0.4, 1) forwards;
}

/* Each panel takes ~one third of the duration, with motion-blur via skew. */
@keyframes panel-swoosh-1 {
    0%   { transform: translateX(140%) rotate(-14deg) skewX(-26deg); opacity: 0; }
    4%   { opacity: 1; }
    18%  { transform: translateX(0) rotate(0deg) skewX(0deg); opacity: 1; }
    30%  { transform: translateX(-140%) rotate(14deg) skewX(22deg); opacity: 1; }
    34%  { opacity: 0; }
    100% { opacity: 0; transform: translateX(-200%); }
}

@keyframes panel-swoosh-2 {
    0%, 30%  { transform: translateX(-140%) rotate(14deg) skewX(26deg); opacity: 0; }
    38%      { opacity: 1; }
    50%      { transform: translateX(0) rotate(0deg) skewX(0deg); opacity: 1; }
    63%      { transform: translateX(140%) rotate(-14deg) skewX(-22deg); opacity: 1; }
    66%      { opacity: 0; }
    100%     { opacity: 0; transform: translateX(200%); }
}

@keyframes panel-swoosh-3 {
    0%, 64%  { transform: translateY(-140%) rotate(-6deg) scale(1.05); opacity: 0; }
    72%      { opacity: 1; }
    82%      { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    92%      { transform: scale(1.35) rotate(4deg); opacity: 0.55; filter: blur(2px) brightness(1.4); }
    100%     { transform: scale(2.4) rotate(8deg); opacity: 0; filter: blur(6px) brightness(1.8); }
}

@media (prefers-reduced-motion: reduce) {
    .boot-glitch { animation: boot-fade-soft 0.3s linear forwards; }
    .boot-panel { display: none; }
    @keyframes boot-fade-soft {
        from { opacity: 1; background: #000; }
        to   { opacity: 0; }
    }
}

#start-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 22px 42px;
    font-size: clamp(18px, 4vw, 28px);
    font-family: "Courier New", Courier, monospace;
    background: #ff00ff;
    color: #fff;
    border: 6px outset #00ffff;
    cursor: pointer;
    z-index: 2000;
    font-weight: bold;
    text-shadow: 2px 2px #000;
    animation: pulse 1.4s infinite ease-in-out;
}

#start-btn:hover {
    background: #00ffff;
    color: #ff00ff;
    border-style: inset;
}

#start-btn:active {
    transform: translate(-50%, -48%);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 10px #ff00ff; }
    50% { box-shadow: 0 0 28px #ff00ff, 0 0 40px #00ffff; }
}

#game-container::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 500;
}

.taunt-bubble {
    position: absolute;
    background: #fff;
    color: #000;
    padding: 4px 8px;
    border: 2px solid #000;
    border-radius: 8px;
    font-family: "Comic Sans MS", "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;
    z-index: 150;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    animation: taunt 1.2s ease-out forwards;
}

@keyframes taunt {
    0% { opacity: 0; transform: translate(-50%, -80%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
    80% { opacity: 1; transform: translate(-50%, -120%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -140%) scale(0.9); }
}

@media (max-width: 600px) {
    #game-container {
        height: 65vh;
        border-width: 4px;
    }
    #ui-layer {
        padding: 8px;
        gap: 6px;
    }
}


/* iOS: kill double-tap-to-zoom (Safari ignores user-scalable=no). Keeps taps/scroll/pinch; canvas touch-action:none wins on specificity. */
* { touch-action: manipulation; }