/* Number Munchers — styles for the FactQuest tab.
 *
 * Generated from games/tempgamefolder/Number Munchers/style.css, scoped for embedding:
 *   - every selector lives under #nm-root; the sheet used generic names (.cell, .body,
 *     .eye, .head) that collide with FactQuest's own styles
 *   - `body` / `:root` rules collapsed onto #nm-root, which is now the positioning
 *     context the overlay and scanline need
 *   - all 44 @keyframes prefixed nm-, so a same-named animation elsewhere on the page
 *     can never win
 *   - 100vw/100vh -> panel-relative; position:fixed -> absolute
 *   - the Press Start 2P @import moved to a <link> in fact-quest.html's <head>
 *     (@import is only valid at the top of a sheet, not in an embedded <style>)
 */

#nm-root{
    --troggle-move: 500ms;
}

#nm-root, #nm-root *{
    box-sizing: border-box;
}

/* Was `body` standalone. Inside the FactQuest panel it has to establish the
   positioning context for #nm-overlay / the scanline ::before, and own its font
   so the surrounding page can't restyle the arcade look. */
#nm-root{
    position: relative;
    overflow: hidden;
    background: #030712;
    color: white;
    font-family: 'Press Start 2P', monospace;
    border-radius: var(--radius, 12px);
    border: 1px solid var(--border, #1f2937);
    isolation: isolate;
}

/* CRT scanline overlay */
#nm-root::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(255,255,255,.03) 50%,
        rgba(0,0,0,.08) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 999;
}

/* ─── HUD ───────────────────────────────────────────── */

#nm-root #nm-hud{
    height: 110px;
    background: #111827;
    border-bottom: 5px solid #2563eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

#nm-root #nm-title{
    color: #facc15;
    font-size: 24px;
    text-shadow: 4px 4px #78350f;
}

#nm-root #nm-stats{
    display: flex;
    gap: 28px;
    font-size: 10px;
}

#nm-root .round-badge{
    color: #a78bfa;
}

/* ─── GAME AREA ─────────────────────────────────────── */

/* The board is only the middle of the play field: coward troggles walk a lap
   one cell OUTSIDE it, fleeing ones slide off the edge, and the 67-mode dancers
   line up underneath. That rim needs room inside #nm-root, which clips
   (overflow:hidden) — at the old 560px the dancers were sliced in half. */
#nm-root #nm-gameArea{
    width: 100%;
    height: 660px;
    /* Heavier bottom padding lifts the centred board, opening the band the
       dancers stand in — otherwise they land on top of the message bar. */
    padding: 12px 24px 124px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#nm-root #nm-rule{
    margin-bottom: 18px;
    font-size: 13px;
    color: #93c5fd;
    min-height: 20px;
    text-align: center;
    letter-spacing: 1px;
}

/* ─── BOARD WRAPPER + TROGGLE LAYER ─────────────────── */

#nm-root #nm-boardWrapper{
    position: relative;
    width: fit-content;
    height: fit-content;
}

/* Absolutely overlays the board grid exactly.
   Troggles live here as position:absolute children
   so CSS left/top transitions slide them between cells. */
#nm-root #nm-troggleLayer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* Troggle transition — duration is set per-level via --troggle-move */
#nm-root #nm-troggleLayer .troggle{
    position: absolute;
    transition:
        left var(--troggle-move) ease-in-out,
        top  var(--troggle-move) ease-in-out;
}

/* ─── BOARD MODES ────────────────────────────────────── */

#nm-root #nm-board{
    display: grid;
    gap: 8px;
}

#nm-root #nm-board.normalMode{
    grid-template-columns: repeat(6, 72px);
    grid-template-rows: repeat(5, 72px);
}

#nm-root #nm-board.equationMode{
    grid-template-columns: repeat(5, 110px);
    grid-template-rows: repeat(5, 72px);
}

/* ─── CELLS ─────────────────────────────────────────── */

#nm-root .cell{
    background: #172554;
    border: 4px solid #60a5fa;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 0 10px rgba(59,130,246,.35);
    text-shadow: 2px 2px black;
    overflow: hidden;
}

#nm-root #nm-board.equationMode .cell{
    font-size: 12px;
}

#nm-root .cell.correct{
    background: #14532d;
    border-color: #4ade80;
}

#nm-root .cell.wrong{
    background: #7f1d1d;
    border-color: #f87171;
}

/* Temporary safe zone — troggles avoid it, player can still eat the cell */
#nm-root .cell.safe{
    background: #1c1700;
    border-color: #fbbf24;
    animation: nm-safeGlow 1s ease-in-out infinite alternate;
}

@keyframes nm-safeGlow {
    from { box-shadow: 0 0 8px  rgba(251,191,36,.35); border-color: #fbbf24; }
    to   { box-shadow: 0 0 22px rgba(251,191,36,.75); border-color: #fef08a; }
}

/* Worker corruption flash */
#nm-root .cell.corrupted{
    background: #2d0a1e;
    animation: nm-corruptFlash .35s ease-in-out infinite alternate;
}

@keyframes nm-corruptFlash {
    from { border-color: #ec4899; box-shadow: 0 0 18px #ec4899; }
    to   { border-color: #831843; box-shadow: 0 0 4px  #831843; }
}

/* ─── MUNCHER ────────────────────────────────────────── */

#nm-root .muncher{
    position: absolute;
    width: 54px;
    height: 54px;
    z-index: 5;
}

#nm-root .body{
    position: absolute;
    width: 54px;
    height: 40px;
    background: #22c55e;
    border: 4px solid #14532d;
    border-radius: 45%;
    bottom: 0;
}

#nm-root .eye{
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    border: 3px solid #14532d;
    top: -5px;
}

#nm-root .eye::after{
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: black;
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

#nm-root .eye.left{ left: 8px; }
#nm-root .eye.right{ right: 8px; }

#nm-root .mouth{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
}

#nm-root .muncher.idle .mouth{
    width: 18px;
    height: 5px;
    border-radius: 0 0 10px 10px;
    bottom: 9px;
}

#nm-root .muncher.eating .mouth{
    width: 28px;
    height: 16px;
    border-radius: 0 0 18px 18px;
    bottom: 5px;
    animation: nm-chomp .15s infinite alternate;
}

@keyframes nm-chomp {
    from { height: 6px; }
    to   { height: 16px; }
}

/* Hop animation — plays once each time the muncher element is created after moving */
@keyframes nm-hop{
    0%   { transform: scaleY(1)   scaleX(1); }
    30%  { transform: scaleY(.72) scaleX(1.28); }
    65%  { transform: scaleY(1.1) scaleX(.94); }
    100% { transform: scaleY(1)   scaleX(1); }
}

#nm-root .muncher.hopping{
    animation: nm-hop .22s ease-out;
}

/* Rapid flicker after respawn — signals invincibility window */
@keyframes nm-invincibleFlicker{
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}

#nm-root .muncher.invincible{
    animation: nm-invincibleFlicker .22s step-end infinite;
}

/* ─── TROGGLES ───────────────────────────────────────── */

#nm-root .troggle{
    position: absolute;
    width: 52px;
    height: 52px;
    z-index: 4;
}

#nm-root .tBody{
    position: absolute;
    width: 52px;
    height: 42px;
    bottom: 0;
    border-radius: 35% 35% 20% 20%;
}

#nm-root .reggie  .tBody{ background: #ef4444; border: 4px solid #7f1d1d; }
#nm-root .bashful .tBody{ background: #8b5cf6; border: 4px solid #4c1d95; }
#nm-root .helper  .tBody{ background: #22c55e; border: 4px solid #14532d; }
#nm-root .worker  .tBody{ background: #ec4899; border: 4px solid #831843; }
#nm-root .smarty  .tBody{ background: #facc15; border: 4px solid #92400e; }

#nm-root .tEye{
    position: absolute;
    width: 9px;
    height: 9px;
    background: white;
    border-radius: 50%;
    top: 10px;
}

#nm-root .tEye.left{ left: 10px; }
#nm-root .tEye.right{ right: 10px; }

#nm-root .tMouth{
    position: absolute;
    width: 24px;
    height: 10px;
    border-bottom: 4px solid white;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
}

/* Wobble animation — plays once each time a troggle element is freshly created after moving */
@keyframes nm-troggleWobble{
    0%   { transform: rotate(0deg) scaleX(1); }
    25%  { transform: rotate(-9deg) scaleX(.94); }
    75%  { transform: rotate(9deg) scaleX(1.06); }
    100% { transform: rotate(0deg) scaleX(1); }
}

#nm-root .troggle.wobbling{
    animation: nm-troggleWobble .28s ease;
}

/* ─── MESSAGE BAR ────────────────────────────────────── */

#nm-root #nm-message{
    position: absolute;
    bottom: 16px;
    background: #111827;
    border: 4px solid #2563eb;
    padding: 10px 18px;
    min-width: 320px;
    text-align: center;
    font-size: 10px;
}

#nm-root #nm-message.good{ color: #4ade80; border-color: #4ade80; }
#nm-root #nm-message.bad{ color: #f87171; border-color: #f87171; }

/* ─── OVERLAY (TITLE / ROUND WIN / GAME OVER / PAUSED) ─ */

#nm-root #nm-overlay{
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, .93);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#nm-root #nm-overlay.hidden{
    display: none;
}

#nm-root .overlay-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 40px 48px;
    border: 6px solid #2563eb;
    background: #0f172a;
    box-shadow: 0 0 40px rgba(37,99,235,.5), inset 0 0 30px rgba(37,99,235,.1);
    text-align: center;
    max-width: 560px;
}

#nm-root .overlay-title{
    font-size: 26px;
    color: #facc15;
    text-shadow: 4px 4px #78350f;
    line-height: 1.6;
}

#nm-root .overlay-title.bad{
    color: #f87171;
    text-shadow: 4px 4px #7f1d1d;
}

#nm-root .overlay-sub{
    font-size: 10px;
    color: #93c5fd;
    line-height: 2;
}

#nm-root .overlay-stats{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    font-size: 10px;
}

#nm-root .stat-row{
    display: flex;
    justify-content: space-between;
    gap: 32px;
    color: #e2e8f0;
    padding: 6px 0;
    border-bottom: 2px solid #1e3a8a;
}

#nm-root .stat-row.good{ color: #4ade80; }

#nm-root .overlay-prompt{
    font-size: 10px;
    color: #facc15;
    margin-top: 8px;
}

@keyframes nm-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#nm-root .blink{
    animation: nm-blink .9s step-end infinite;
}

/* ─── INTERMISSION SCENES ─────────────────────────────── */

#nm-root .scene{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

#nm-root .scene-title{
    font-size: 22px;
    color: #facc15;
    text-shadow: 3px 3px #78350f;
}

#nm-root .scene-sub{
    font-size: 10px;
    color: #facc15;
    margin-top: 8px;
}

#nm-root .scene-stage{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 32px;
    height: 140px;
    width: 480px;
    overflow: hidden;
    position: relative;
}

/* Scaled-up sprites for scenes */
#nm-root .scene-muncher{
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

#nm-root .scene-muncher .body{
    width: 80px;
    height: 58px;
    border-radius: 45%;
}

#nm-root .scene-muncher .eye{
    width: 20px;
    height: 20px;
    top: -7px;
}

#nm-root .scene-muncher .eye::after{
    width: 7px;
    height: 7px;
    top: 4px;
    left: 4px;
}

#nm-root .scene-muncher .eye.left{ left: 12px; }
#nm-root .scene-muncher .eye.right{ right: 12px; }

#nm-root .scene-muncher.idle .mouth, #nm-root .scene-muncher.eating .mouth, #nm-root .scene-muncher.dancing .mouth, #nm-root .scene-muncher.munching-big .mouth{
    width: 34px;
    bottom: 14px;
}

#nm-root .scene-muncher.idle .mouth{ height: 8px; border-radius: 0 0 12px 12px; }
#nm-root .scene-muncher.eating .mouth, #nm-root .scene-muncher.munching-big .mouth{
    height: 24px;
    border-radius: 0 0 24px 24px;
    animation: nm-chomp .2s infinite alternate;
}

#nm-root .scene-troggle{
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

#nm-root .scene-troggle .tBody{
    width: 72px;
    height: 58px;
}

#nm-root .scene-troggle .tEye{
    width: 13px;
    height: 13px;
    top: 14px;
}

#nm-root .scene-troggle .tEye.left{ left: 14px; }
#nm-root .scene-troggle .tEye.right{ right: 14px; }

#nm-root .scene-troggle .tMouth{
    width: 34px;
    bottom: 12px;
}

/* Angry mouth (upturned) */
#nm-root .tMouth.angry{
    border-bottom: none;
    border-top: 4px solid white;
    border-radius: 0;
    transform: translateX(-50%) translateY(4px);
}

/* ── Skate scene ── */

#nm-root .skate-group{
    display: flex;
    align-items: flex-end;
    gap: 20px;
    animation: nm-skateAcross 2.8s linear infinite;
}

@keyframes nm-skateAcross {
    0%   { transform: translateX(280px); }
    100% { transform: translateX(-340px); }
}

#nm-root .skateboard{
    position: absolute;
    bottom: -12px;
    left: -6px;
    width: 92px;
    height: 10px;
    background: #f97316;
    border-radius: 5px;
}

#nm-root .skateboard::before, #nm-root .skateboard::after{
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: #6b7280;
    border-radius: 50%;
    bottom: -12px;
}

#nm-root .skateboard::before{ left: 8px; }
#nm-root .skateboard::after{ right: 8px; }

#nm-root .skating{
    animation: nm-skateHop .55s ease-in-out infinite alternate;
}

@keyframes nm-skateHop {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}

#nm-root .chasing{
    animation: nm-chaseWobble .4s ease-in-out infinite alternate;
}

@keyframes nm-chaseWobble {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(6deg); }
}

/* ── Burger scene ── */

#nm-root .burger{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    animation: nm-burgerBob .7s ease-in-out infinite alternate;
}

@keyframes nm-burgerBob {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

#nm-root .bun-top{
    width: 70px;
    height: 28px;
    background: #d97706;
    border-radius: 50% 50% 0 0;
    border: 3px solid #92400e;
}

#nm-root .patty{
    width: 64px;
    height: 16px;
    background: #7c3a12;
    border: 3px solid #451a03;
}

#nm-root .bun-bot{
    width: 70px;
    height: 14px;
    background: #d97706;
    border-radius: 0 0 6px 6px;
    border: 3px solid #92400e;
}

#nm-root .munching-big{
    animation: nm-munchBob .35s ease-in-out infinite alternate;
}

@keyframes nm-munchBob {
    from { transform: translateY(0) scaleX(1); }
    to   { transform: translateY(-6px) scaleX(1.06); }
}

#nm-root .angry-group{
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

#nm-root .angry-bob{
    animation: nm-angryBob .5s ease-in-out infinite alternate;
}

@keyframes nm-angryBob {
    from { transform: translateY(0) rotate(-4deg); }
    to   { transform: translateY(-6px) rotate(4deg); }
}

/* ── Dance scene ── */

#nm-root .dance-floor{
    display: flex;
    gap: 48px;
    align-items: flex-end;
    justify-content: center;
}

#nm-root .dancing{
    animation: nm-dance .6s ease-in-out infinite alternate;
    transform-origin: bottom center;
}

@keyframes nm-dance {
    0%   { transform: rotate(-14deg) scaleX(1); }
    50%  { transform: rotate(0deg)   scaleX(.92) scaleY(1.08); }
    100% { transform: rotate(14deg)  scaleX(1); }
}

#nm-root .dancing-troggle{
    animation: nm-troggleDance .6s ease-in-out infinite alternate-reverse;
    transform-origin: bottom center;
}

@keyframes nm-troggleDance {
    0%   { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}

#nm-root .disco-dots{
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

#nm-root .disco-dots span{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: nm-discoFlash 1.1s ease-in-out infinite;
}

#nm-root .disco-dots span:nth-child(1){ background: #f472b6; animation-delay: 0s; }
#nm-root .disco-dots span:nth-child(2){ background: #facc15; animation-delay: .18s; }
#nm-root .disco-dots span:nth-child(3){ background: #4ade80; animation-delay: .36s; }
#nm-root .disco-dots span:nth-child(4){ background: #60a5fa; animation-delay: .54s; }
#nm-root .disco-dots span:nth-child(5){ background: #fb923c; animation-delay: .72s; }
#nm-root .disco-dots span:nth-child(6){ background: #c084fc; animation-delay: .9s; }

@keyframes nm-discoFlash {
    0%, 100% { opacity: .2; transform: scale(.8); }
    50%       { opacity: 1;  transform: scale(1.4); }
}

/* ── Wall scene ── */

#nm-root .wall-block{
    width: 56px;
    height: 110px;
    background: #475569;
    border: 4px solid #94a3b8;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    flex-shrink: 0;
}

#nm-root .wall-line{
    width: 38px;
    height: 5px;
    background: #94a3b8;
    border-radius: 2px;
}

#nm-root .bonk-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#nm-root .bonking{
    animation: nm-bonk .5s ease-in-out infinite;
}

@keyframes nm-bonk {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(22px); }
    40%  { transform: translateX(-12px) rotate(-8deg); }
    60%  { transform: translateX(6px); }
    80%  { transform: translateX(-3px) rotate(4deg); }
    100% { transform: translateX(0); }
}

#nm-root .bonk-text{
    font-size: 12px;
    color: #facc15;
    text-shadow: 2px 2px #78350f;
    animation: nm-bonkFade .5s ease-in-out infinite;
}

@keyframes nm-bonkFade {
    0%, 30% { opacity: 0; transform: scale(.6) translateY(6px); }
    50%      { opacity: 1; transform: scale(1.2) translateY(-4px); }
    100%     { opacity: 0; transform: scale(.8) translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   EASTER EGGS
   ═══════════════════════════════════════════════════════ */

/* ─── Fruit cell ───────────────────────────────────── */

#nm-root .cell.fruit{
    background: #1a0008;
    border-color: #ef4444;
    box-shadow: 0 0 14px rgba(239,68,68,.5);
    cursor: pointer;
}

/* CSS-drawn cherry using pseudo-elements */
#nm-root .cell.fruit::before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 35% 35%, #f87171, #b91c1c);
    border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
    box-shadow: 18px 2px 0 0 #b91c1c,
                18px 0px 0 2px #f87171,
                9px -10px 0 1px #166534; /* stem */
    margin: 0 auto;
}

#nm-root .cell.fruit::after{
    content: "";
    display: block;
    width: 2px;
    height: 14px;
    background: #166534;
    margin: -30px auto 0;
    transform: rotate(10deg);
}

/* ─── Pac-Man muncher ──────────────────────────────── */

#nm-root .muncher.pacman .body{
    background: #facc15;
    border: none;                 /* the wedge is cut through the outline too */
    border-radius: 50%;
    width: 54px;
    height: 54px;
    bottom: 0;
    /* Half-open wedge as the resting shape, so he still reads as Pac-Man with
       animations off (reduced motion) rather than as a plain yellow circle. */
    clip-path: polygon(50% 50%, 100% 30%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 70%);
    animation: nm-pacBody .18s ease-in-out infinite alternate;
    transition: transform .12s ease-out;
}

/* Pac-Man mouth cut. Every corner stays in the path — a polygon that skipped
   them clipped the top and bottom of the head off along with the mouth. Only
   the right-hand wedge between the two mouth lips is removed. */
@keyframes nm-pacBody{
    from { clip-path: polygon(50% 50%, 100% 46%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 54%); }
    to   { clip-path: polygon(50% 50%, 100% 18%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 82%); }
}

/* Arcade Pac-Man has no face — the wedge is the whole character. */
#nm-root .muncher.pacman .eye,
#nm-root .muncher.pacman .mouth{ display: none; }

/* ─── Frightened troggles (while Pac-Man is live) ───── */

/* Blue-and-blinking, exactly like the ghosts after a power pellet: the flash IS
   the signal that walking into one now scores instead of costing a life.
   The type colours are per-type selectors, so these need the extra class to
   match on both sides to win. */
#nm-root .troggle.frightened .tBody{
    background: #1d4ed8;
    border-color: #bfdbfe;
    animation: nm-frightBlink .4s steps(1, end) infinite;
}
#nm-root .troggle.frightened .tEye{ background: #dbeafe; }
#nm-root .troggle.frightened .tMouth{ background: #dbeafe; }

@keyframes nm-frightBlink{
    0%, 49%   { background: #1d4ed8; border-color: #bfdbfe; }
    50%, 100% { background: #e5e7eb; border-color: #1d4ed8; }
}

/* Eaten — dims and shrinks away until it respawns across the board. */
#nm-root .troggle.devoured{
    opacity: .22;
    transform: scale(.55);
    filter: grayscale(1);
    transition: opacity .25s ease-out, transform .25s ease-out;
}

/* ─── Troggle speech bubble ────────────────────────── */

#nm-root .speech-bubble{
    position: absolute;
    background: white;
    color: #111827;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    line-height: 1.6;
    padding: 5px 7px;
    border-radius: 5px;
    white-space: pre;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    border: 2px solid #374151;
    pointer-events: none;
    min-width: 70px;
    text-align: center;
    animation: nm-bubblePop .2s cubic-bezier(.34,1.56,.64,1);
}

#nm-root .speech-bubble::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: white;
}

@keyframes nm-bubblePop {
    from { transform: translateX(-50%) scale(0.4); opacity: 0; }
    to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/* ─── 67 Badge ─────────────────────────────────────── */

#nm-root #nm-badge67{
    position: absolute;
    top: 120px;
    right: 24px;
    z-index: 500;
    animation: nm-badgePop .5s cubic-bezier(.34,1.56,.64,1);
    transition: opacity .5s ease;
}

#nm-root #nm-badge67.badge-hide{
    opacity: 0;
}

#nm-root .badge-inner{
    width: 106px;
    height: 106px;
    background: conic-gradient(#ca8a04 0deg, #fbbf24 60deg, #fef08a 90deg, #fbbf24 120deg, #ca8a04 180deg, #fbbf24 240deg, #ca8a04 360deg);
    border: 5px solid #92400e;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 0 30px rgba(251,191,36,.9), 0 0 60px rgba(251,191,36,.4);
    animation: nm-badgeSpin 8s linear infinite;
}

#nm-root .badge-num{
    font-size: 32px;
    color: #1c1400;
    text-shadow: 2px 2px #92400e;
    line-height: 1;
}

#nm-root .badge-label{
    font-size: 7px;
    color: #1c1400;
    text-shadow: 1px 1px #92400e;
    letter-spacing: 0;
}

@keyframes nm-badgePop {
    from { transform: scale(0) rotate(-180deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);    opacity: 1; }
}

@keyframes nm-badgeSpin {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════
   NEW INTERMISSION SCENES
   ═══════════════════════════════════════════════════════ */

/* ── Teacher scene ────────────────────────────────── */

#nm-root .chalkboard{
    width: 130px;
    height: 90px;
    background: #14532d;
    border: 5px solid #854d0e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,.4);
}

#nm-root .chalk-eq{
    font-size: 9px;
    color: rgba(255,255,255,.85);
    text-align: center;
    line-height: 2;
    animation: nm-chalkWrite 2s steps(7, end) infinite;
}

@keyframes nm-chalkWrite {
    0%,80%  { opacity: 1; }
    90%,100%{ opacity: 0.3; }
}

#nm-root .pointer-stick{
    position: absolute;
    width: 4px;
    height: 36px;
    background: #ca8a04;
    border-radius: 2px;
    right: -12px;
    bottom: 10px;
    transform: rotate(-20deg);
    transform-origin: bottom center;
    animation: nm-pointerWag .8s ease-in-out infinite alternate;
}

@keyframes nm-pointerWag {
    from { transform: rotate(-30deg); }
    to   { transform: rotate(10deg); }
}

#nm-root .teaching{
    animation: nm-teachBob .6s ease-in-out infinite alternate;
}

@keyframes nm-teachBob {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}

#nm-root .confused-student{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

#nm-root .head-scratch{
    animation: nm-headScratch .4s ease-in-out infinite alternate;
}

@keyframes nm-headScratch {
    from { transform: rotate(-8deg); }
    to   { transform: rotate(8deg); }
}

#nm-root .question-mark{
    font-size: 22px;
    color: #facc15;
    text-shadow: 2px 2px #78350f;
    animation: nm-questionFloat 1s ease-in-out infinite alternate;
}

@keyframes nm-questionFloat {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(-12px) scale(1.2); opacity: 0.6; }
}

/* ── TV scene ─────────────────────────────────────── */

#nm-root .audience{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#nm-root .watching{
    animation: nm-watchNod .9s ease-in-out infinite alternate;
}

@keyframes nm-watchNod {
    from { transform: translateY(0) rotate(-3deg); }
    to   { transform: translateY(-4px) rotate(3deg); }
}

#nm-root .tv-set{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

#nm-root .tv-screen{
    width: 140px;
    height: 100px;
    background: #0c0c0c;
    border: 6px solid #6b7280;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 0 20px rgba(99,102,241,.4), inset 0 0 10px rgba(99,102,241,.2);
}

#nm-root .tv-logo{
    font-size: 22px;
    color: #6366f1;
    text-shadow: 0 0 10px #6366f1, 0 0 20px #818cf8;
    animation: nm-tvFlicker 3s ease-in-out infinite;
}

#nm-root .tv-subtext{
    font-size: 5px;
    color: #4b5563;
    letter-spacing: 1px;
}

@keyframes nm-tvFlicker {
    0%,100% { opacity: 1; }
    92%      { opacity: 1; }
    93%      { opacity: 0.1; }
    94%      { opacity: 1; }
    96%      { opacity: 0.4; }
    97%      { opacity: 1; }
}

#nm-root .tv-stand{
    width: 30px;
    height: 16px;
    background: #6b7280;
    border-radius: 0 0 4px 4px;
}

/* ── Nap scene ────────────────────────────────────── */

#nm-root .nap-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#nm-root .napping-muncher{
    position: relative;
    width: 80px;
    height: 80px;
    transform: rotate(90deg);
    animation: nm-napBreathe 2s ease-in-out infinite alternate;
}

#nm-root .napping-muncher .body{
    width: 80px;
    height: 58px;
    border-radius: 45%;
}

#nm-root .napping-muncher .eye{
    width: 20px;
    height: 4px;        /* closed eyes */
    background: #14532d;
    border-radius: 2px;
    border: none;
    top: 10px;
}

#nm-root .napping-muncher .eye::after{ display: none; }

#nm-root .napping-muncher .mouth{
    width: 20px;
    height: 6px;
    border-radius: 0 0 10px 10px;
    bottom: 18px;
}

@keyframes nm-napBreathe {
    from { transform: rotate(90deg) scaleX(1); }
    to   { transform: rotate(90deg) scaleX(1.06); }
}

#nm-root .zzz-cloud{
    display: flex;
    gap: 4px;
    align-items: flex-end;
}

#nm-root .zzz{
    color: #93c5fd;
    font-size: 14px;
    text-shadow: 1px 1px #1e3a8a;
    animation: nm-zzzFloat 1.8s ease-in-out infinite;
}

#nm-root .z1{ animation-delay: 0s;    font-size: 10px; }
#nm-root .z2{ animation-delay: 0.5s;  font-size: 14px; }
#nm-root .z3{ animation-delay: 1.0s;  font-size: 18px; }

@keyframes nm-zzzFloat {
    0%   { transform: translateY(0)   opacity: 1; }
    100% { transform: translateY(-30px) scale(1.3); opacity: 0; }
}

#nm-root .tiptoeing{
    animation: nm-tiptoe 0.7s ease-in-out infinite alternate;
}

@keyframes nm-tiptoe {
    from { transform: translateY(0) scaleY(1.05); }
    to   { transform: translateY(-8px) scaleY(.96); }
}

/* ── Trophy scene ─────────────────────────────────── */

#nm-root .trophy-holder{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#nm-root .arms-up{
    animation: nm-armsUp .5s ease-in-out infinite alternate;
}

@keyframes nm-armsUp {
    from { transform: translateY(0) scaleX(1); }
    to   { transform: translateY(-10px) scaleX(1.06); }
}

#nm-root .trophy{
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: nm-trophyShine 1.5s ease-in-out infinite alternate;
}

@keyframes nm-trophyShine {
    from { filter: brightness(1); }
    to   { filter: brightness(1.4) drop-shadow(0 0 8px #fbbf24); }
}

#nm-root .trophy-cup{
    width: 48px;
    height: 36px;
    background: linear-gradient(135deg, #fbbf24, #ca8a04, #fbbf24);
    border: 3px solid #92400e;
    border-radius: 50% 50% 30% 30% / 40% 40% 60% 60%;
}

#nm-root .trophy-stem{
    width: 8px;
    height: 18px;
    background: #ca8a04;
    border: 2px solid #92400e;
}

#nm-root .trophy-base{
    width: 36px;
    height: 8px;
    background: #ca8a04;
    border: 2px solid #92400e;
    border-radius: 2px;
}

#nm-root .sad-group{
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

#nm-root .sad-droop{
    animation: nm-sadDroop .8s ease-in-out infinite alternate;
    transform-origin: bottom center;
}

@keyframes nm-sadDroop {
    from { transform: rotate(-5deg) translateY(0); }
    to   { transform: rotate(5deg) translateY(4px); }
}

/* ── Mirror scene ─────────────────────────────────── */

#nm-root .mirror-frame{
    width: 90px;
    height: 120px;
    border: 6px solid #9ca3af;
    border-radius: 50% 50% 20% 20% / 30% 30% 15% 15%;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(148,163,184,.4), inset 0 0 20px rgba(148,163,184,.1);
    flex-shrink: 0;
}

#nm-root .mirror-glass{
    width: 64px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* The reflection shows a troggle — surprising the muncher */
#nm-root .mirror-reflection{
    transform: scaleX(-1);
    animation: nm-reflectWobble 1.2s ease-in-out infinite alternate;
}

#nm-root .mirror-reflection.reggie .tBody{
    width: 52px;
    height: 42px;
}

@keyframes nm-reflectWobble {
    from { transform: scaleX(-1) rotate(-5deg); }
    to   { transform: scaleX(-1) rotate(5deg); }
}

#nm-root .mirror-pose{
    animation: nm-mirrorLook 1.2s ease-in-out infinite alternate;
}

@keyframes nm-mirrorLook {
    from { transform: translateX(0); }
    to   { transform: translateX(-8px); }
}

/* ═══════════════════════════════════════════════════════
   PERIMETER WALK + DISCO MODE
   ═══════════════════════════════════════════════════════ */

/* Allow out-of-bounds troggles to render outside the board */
#nm-root #nm-boardWrapper, #nm-root #nm-troggleLayer{
    overflow: visible;
}

/* ─── Scared / coward troggle (perimeter walk) ──────── */

#nm-root .troggle.scared{
    animation: nm-troggleScared 0.45s ease-in-out infinite !important;
}

@keyframes nm-troggleScared {
    0%, 100% { transform: translateX(0)   rotate(0deg); }
    25%       { transform: translateX(-4px) rotate(-7deg); }
    75%       { transform: translateX(4px)  rotate(7deg); }
}

/* Brief strain pulse when coward tries to re-enter the board */
#nm-root .troggle.try-reenter{
    animation: nm-tryReenter 0.55s ease-out !important;
}

@keyframes nm-tryReenter {
    0%   { transform: scale(1)   rotate(0deg); }
    30%  { transform: scale(1.35) rotate(-10deg); }
    65%  { transform: scale(0.88) rotate(5deg); }
    100% { transform: scale(1)   rotate(0deg); }
}

/* ─── Disco apparatus ───────────────────────────────── */

#nm-root #nm-disco{
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 30;
    animation: nm-discoDrop 1.3s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes nm-discoDrop {
    from { transform: translateX(-50%) translateY(-180px); }
    to   { transform: translateX(-50%) translateY(0); }
}

#nm-root .disco-string{
    width: 3px;
    height: 56px;
    background: linear-gradient(to bottom, #9ca3af, #4b5563);
    flex-shrink: 0;
}

#nm-root .disco-ball{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 32% 30%, #f1f5f9 0%, #94a3b8 28%, #334155 65%, #0f172a 100%);
    border: 3px solid #94a3b8;
    box-shadow:
        0 0 24px rgba(255, 255, 255, .55),
        0 0 60px rgba(255, 255, 255, .2),
        inset 0 0 14px rgba(0, 0, 0, .5);
    position: relative;
    overflow: visible;
}

/* Facet grid pattern on the mirror ball */
#nm-root .disco-ball::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg,   transparent, transparent 7px, rgba(0,0,0,.22) 7px, rgba(0,0,0,.22) 8px),
        repeating-linear-gradient(90deg,  transparent, transparent 7px, rgba(0,0,0,.22) 7px, rgba(0,0,0,.22) 8px),
        repeating-linear-gradient(45deg,  rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, transparent 1px, transparent 10px);
    animation: nm-facetShimmer 3s linear infinite;
}

@keyframes nm-facetShimmer {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 32px, 32px 0, 14px 14px; }
}

/* ─── Disco light rays ──────────────────────────────── */
/* Each ray rotates at its own speed (--speed), starting at --angle,
   using --color for the beam. They extend outward from the ball center. */

#nm-root .ray{
    position: absolute;
    width: 5px;
    height: 320px;
    top: 50%;
    left: calc(50% - 2px);        /* center the 5px beam on the ball */
    transform-origin: top center;
    background: linear-gradient(to bottom, var(--color) 0%, transparent 80%);
    opacity: 0.55;
    border-radius: 0 0 4px 4px;
    animation: nm-rayRotate var(--speed) linear infinite;
    pointer-events: none;
}

@keyframes nm-rayRotate {
    from { transform: rotate(var(--angle)); }
    to   { transform: rotate(calc(var(--angle) + 360deg)); }
}

/* ─── Disco troggle (Stayin' Alive) ─────────────────── */

#nm-root .troggle.disco-troggle{
    transform-origin: bottom center;
    animation: nm-discoSway 1.4s ease-in-out infinite alternate !important;
}

@keyframes nm-discoSway {
    0%   { transform: scale(1.4) rotate(-13deg); }
    100% { transform: scale(1.4) rotate(13deg); }
}

/* CSS sunglasses — the element is the bridge, pseudo-els are lenses */
#nm-root .sunglasses{
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    background: #312e81;
    pointer-events: none;
    z-index: 12;
    border-radius: 1px;
}

#nm-root .sunglasses::before, #nm-root .sunglasses::after{
    content: "";
    position: absolute;
    width: 13px;
    height: 10px;
    background: rgba(15, 10, 40, 0.92);
    border: 2px solid #3730a3;
    border-radius: 3px;
    top: -4px;
}

#nm-root .sunglasses::before{ left: 0; }
#nm-root .sunglasses::after{ right: 0; }

/* Pointing arm — gives the Travolta one-arm-up silhouette */
#nm-root .disco-arm{
    position: absolute;
    width: 5px;
    height: 22px;
    background: #d1d5db;
    border-radius: 3px;
    bottom: 20px;
    right: 4px;
    transform-origin: bottom center;
    animation: nm-armPoint 1.4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 6;
}

@keyframes nm-armPoint {
    from { transform: rotate(-55deg); }
    to   { transform: rotate(-105deg); }
}
