/* =========================================================
   recycle.games  --  the junkyard arcade
   palette:
     #1A1A1A  cabinet dark        #2D1B36  board surface (plum)
     #CCFF00  acid lime           #FF6B2B  electric orange
     #00E5FF  hot cyan            #FFD23F  token yellow
     #E8E0D4  warm chalk          #4A3657  dim violet
   typography: Bebas Neue, Nunito, "Press Start 2P"
   ========================================================= */

:root {
    --c-dark: #1A1A1A;
    --c-plum: #2D1B36;
    --c-violet: #4A3657;
    --c-lime: #CCFF00;
    --c-orange: #FF6B2B;
    --c-cyan: #00E5FF;
    --c-gold: #FFD23F;
    --c-chalk: #E8E0D4;
    --gap: 4px;
    --radius: 2px;
    --f-display: "Bebas Neue", "Impact", sans-serif;
    --f-body: "Nunito", system-ui, sans-serif;
    --f-pixel: "Press Start 2P", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--c-dark);
    color: var(--c-chalk);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* faint scanlines over the entire cabinet */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.18) 0px,
            rgba(0, 0, 0, 0.18) 1px,
            transparent 1px,
            transparent 3px
        );
    z-index: 90;
    mix-blend-mode: multiply;
    opacity: 0.55;
}

/* =========================================================
   LEVEL SECTIONS
   each level is full viewport with a 12-col bento grid
   ========================================================= */

.level {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.level-1 { background: var(--c-lime); }    /* gap colour */
.level-2 { background: var(--c-cyan); }
.level-3 { background: var(--c-orange); }

.level-marker {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--f-pixel);
    font-size: 11px;
    color: var(--c-dark);
    background: var(--c-chalk);
    padding: 6px 10px;
    border-radius: var(--radius);
    box-shadow:
        2px 2px 0 var(--c-dark);
}
.marker-tag { font-weight: 700; }
.marker-name {
    font-family: var(--f-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--c-dark);
}

/* =========================================================
   BENTO GRIDS
   gap is the section background = circuit trace
   cell backgrounds create the visual "tiles"
   ========================================================= */

.bento {
    display: grid;
    gap: var(--gap);
    padding: var(--gap);
    width: 100%;
    min-height: 100vh;
    grid-template-columns: repeat(12, 1fr);
}

/* Level 1 layout (12 cols) */
.bento-1 {
    grid-template-rows: 60px repeat(8, minmax(72px, 1fr)) 56px;
    grid-template-areas:
        ".        .        .        .        .        .        .        .        .        .        .        .       "
        "title    title    title    title    title    title    spriteA  spriteA  featureA featureA featureA featureA"
        "title    title    title    title    title    title    spriteA  spriteA  featureA featureA featureA featureA"
        "title    title    title    title    title    title    spriteB  spriteB  featureA featureA featureA featureA"
        "score    score    score    score    featureB featureB spriteB  spriteB  featureA featureA featureA featureA"
        "score    score    score    score    featureB featureB spriteC  spriteC  spriteD  spriteD  featureA featureA"
        "score    score    score    score    featureB featureB spriteC  spriteC  spriteD  spriteD  featureA featureA"
        "score    score    score    score    featureB featureB featureB featureB spriteD  spriteD  featureA featureA"
        "score    score    score    score    featureB featureB featureB featureB spriteD  spriteD  featureA featureA"
        "ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker  ";
}

/* Level 2 layout */
.bento-2 {
    grid-template-rows: 60px repeat(8, minmax(72px, 1fr)) 56px;
    grid-template-areas:
        ".        .        .        .        .        .        .        .        .        .        .        .       "
        "spriteA  spriteA  title    title    title    title    title    title    score    score    score    score   "
        "spriteA  spriteA  title    title    title    title    title    title    score    score    score    score   "
        "spriteB  spriteB  title    title    title    title    title    title    score    score    score    score   "
        "spriteB  spriteB  featureA featureA featureA featureA featureB featureB score    score    score    score   "
        "featureA featureA featureA featureA featureA featureA featureB featureB spriteC  spriteC  spriteD  spriteD "
        "featureA featureA featureA featureA featureA featureA featureB featureB spriteC  spriteC  spriteD  spriteD "
        "featureA featureA featureA featureA featureA featureA featureB featureB spriteC  spriteC  spriteD  spriteD "
        "featureA featureA featureA featureA featureA featureA featureB featureB featureB featureB spriteD  spriteD "
        "ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker  ";
}

/* Level 3 layout */
.bento-3 {
    grid-template-rows: 60px repeat(8, minmax(72px, 1fr)) 56px 64px;
    grid-template-areas:
        ".        .        .        .        .        .        .        .        .        .        .        .       "
        "title    title    title    title    title    title    title    title    score    score    score    score   "
        "title    title    title    title    title    title    title    title    score    score    score    score   "
        "title    title    title    title    title    title    title    title    score    score    score    score   "
        "jam      jam      jam      jam      jam      spriteA  spriteA  roster   roster   roster   roster   roster  "
        "jam      jam      jam      jam      jam      spriteA  spriteA  roster   roster   roster   roster   roster  "
        "jam      jam      jam      jam      jam      spriteB  spriteB  roster   roster   roster   roster   roster  "
        "jam      jam      jam      jam      jam      spriteB  spriteB  roster   roster   roster   roster   roster  "
        "cta      cta      cta      cta      cta      cta      cta      cta      cta      cta      cta      cta     "
        "ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker   ticker  "
        "footer   footer   footer   footer   footer   footer   footer   footer   footer   footer   footer   footer  ";
}

/* =========================================================
   CELL BASE
   ========================================================= */

.cell {
    position: relative;
    background: var(--c-dark);
    border-radius: var(--radius);
    padding: 18px 20px;
    overflow: hidden;
    color: var(--c-chalk);
    transition: transform 180ms ease, background 220ms ease;
}

.cell:hover { transform: translateY(-2px); }

/* tiny circuit-board nubs in each corner */
.cell::before,
.cell::after {
    content: "";
    position: absolute;
    width: 6px; height: 6px;
    background: currentColor;
    opacity: 0.18;
    border-radius: 1px;
}
.cell::before { top: 6px; left: 6px; }
.cell::after  { bottom: 6px; right: 6px; }

/* small upper tag in pixel font */
.cell-tag {
    font-family: var(--f-pixel);
    font-size: 9px;
    color: var(--c-chalk);
    opacity: 0.55;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}

.cell-foot {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-family: var(--f-pixel);
    font-size: 8px;
    color: var(--c-chalk);
    opacity: 0.5;
}

/* level-1 cell colour variants */
.level-1 .cell { background: var(--c-dark); }
.level-1 .cell-feature-a { background: var(--c-plum); }
.level-1 .cell-sprite-a { background: var(--c-plum); }
.level-1 .cell-sprite-c { background: var(--c-plum); }
.level-1 .cell-feature-b { background: #221225; }
.level-1 .cell-sprite-d { background: #221225; }
.level-1 .cell-score { background: #20131d; outline: 1px solid var(--c-orange); outline-offset: -3px; }
.level-1 .cell-title { background: #1f0f24; }

/* level-2 cell colour variants */
.level-2 .cell { background: var(--c-dark); }
.level-2 .cell-title-2 { background: var(--c-violet); color: var(--c-chalk); }
.level-2 .cell-feature-c { background: #1c1424; }
.level-2 .cell-feature-d { background: var(--c-violet); }
.level-2 .cell-sprite-e { background: #1c1424; }
.level-2 .cell-sprite-h { background: #1c1424; }
.level-2 .cell-score-2 { background: #14161c; outline: 1px solid var(--c-cyan); outline-offset: -3px; }

/* level-3 cell colour variants */
.level-3 .cell { background: var(--c-dark); }
.level-3 .cell-title-3 { background: #110b15; }
.level-3 .cell-feature-e { background: var(--c-plum); }
.level-3 .cell-feature-f { background: #1c1424; }
.level-3 .cell-score-3 { background: #20131d; outline: 1px solid var(--c-lime); outline-offset: -3px; }
.level-3 .cell-cta { background: var(--c-dark); outline: 2px solid var(--c-lime); outline-offset: -4px; grid-area: cta; }

/* =========================================================
   TITLE BLOCKS
   ========================================================= */

.cell-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 32px;
}
.title-block {
    font-family: var(--f-display);
    line-height: 0.9;
    letter-spacing: 0.04em;
    margin: 8px 0 18px;
}
.title-row {
    display: block;
    font-size: clamp(56px, 9vw, 142px);
    font-weight: 400;
}
.title-row-a { color: var(--c-lime); }
.title-row-b {
    color: var(--c-orange);
    margin-left: 0.06em;
    text-shadow: 6px 6px 0 var(--c-plum);
}
.title-row-c { color: var(--c-cyan); }
.title-row-d {
    color: var(--c-gold);
    text-shadow: 6px 6px 0 #110b15;
}
.title-row-e { color: var(--c-orange); }
.title-row-f {
    color: var(--c-lime);
    text-shadow: 6px 6px 0 var(--c-plum);
}

.title-tag {
    color: var(--c-chalk);
    max-width: 56ch;
    font-size: 17px;
    margin-top: 6px;
}

.blink-cursor {
    margin-top: 14px;
    font-family: var(--f-pixel);
    font-size: 12px;
    color: var(--c-gold);
    letter-spacing: 0.08em;
    animation: blink 1s steps(2) infinite;
}
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}

/* =========================================================
   FEATURE CELLS
   ========================================================= */

.feature-head {
    font-family: var(--f-display);
    font-size: clamp(22px, 2.4vw, 36px);
    letter-spacing: 0.06em;
    color: var(--c-lime);
    margin: 4px 0 10px;
    line-height: 1;
}
.feature-head-2 { color: var(--c-cyan); }
.feature-head-3 { color: var(--c-gold); }

.feature-body {
    font-size: 15px;
    color: var(--c-chalk);
    line-height: 1.6;
}
.feature-body b { color: var(--c-gold); font-weight: 700; }
.level-2 .feature-body b { color: var(--c-cyan); }
.level-3 .feature-body b { color: var(--c-orange); }

.feature-meta {
    list-style: none;
    margin-top: 14px;
    border-top: 1px dashed rgba(232, 224, 212, 0.18);
    padding-top: 10px;
    display: grid;
    gap: 4px;
}
.feature-meta li {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    font-family: var(--f-pixel);
    font-size: 9px;
    color: var(--c-chalk);
}
.meta-key { opacity: 0.55; }
.meta-val { color: var(--c-chalk); }
.meta-val.pulse-lime {
    color: var(--c-lime);
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* patch chips */
.patch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.patch {
    display: inline-block;
    font-family: var(--f-pixel);
    font-size: 9px;
    padding: 6px 10px;
    border-radius: 2px;
    color: var(--c-dark);
    letter-spacing: 0.05em;
}
.patch-a { background: var(--c-lime); }
.patch-b { background: var(--c-orange); color: var(--c-dark); }
.patch-c { background: var(--c-gold); }
.patch-d { background: var(--c-cyan); }

/* reforge ordered list */
.reforge-list {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-top: 6px;
}
.reforge-list li {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: start;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(204, 255, 0, 0.04);
    border-left: 2px solid var(--c-cyan);
    border-radius: 2px;
}
.reforge-num {
    font-family: var(--f-pixel);
    font-size: 12px;
    color: var(--c-gold);
    line-height: 1;
}
.reforge-text { font-size: 14px; line-height: 1.45; }

/* hp gauges */
.hp-stack {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}
.hp-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 12px;
}
.hp-name {
    font-family: var(--f-pixel);
    font-size: 9px;
    color: var(--c-chalk);
}
.hp-bar {
    position: relative;
    height: 14px;
    background: rgba(232, 224, 212, 0.08);
    border-radius: 1px;
    overflow: hidden;
    border: 1px solid rgba(232, 224, 212, 0.18);
}
.hp-bar i {
    display: block;
    height: 100%;
    width: var(--w, 50%);
    background:
        repeating-linear-gradient(
            90deg,
            var(--c-cyan) 0,
            var(--c-cyan) 6px,
            var(--c-gold) 6px,
            var(--c-gold) 12px
        );
    animation: hp-flicker 2.4s ease-in-out infinite;
}
@keyframes hp-flicker {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

/* =========================================================
   SCORE CELLS
   ========================================================= */

.cell-score {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 24px;
}
.score-label {
    font-family: var(--f-pixel);
    font-size: 10px;
    color: var(--c-chalk);
    opacity: 0.7;
    letter-spacing: 0.06em;
}
.score-value {
    font-family: var(--f-pixel);
    font-size: clamp(28px, 5vw, 64px);
    color: var(--c-gold);
    letter-spacing: 0.04em;
    margin: 8px 0 6px;
    line-height: 1;
    text-shadow: 0 0 0 var(--c-gold);
    transition: text-shadow 200ms ease;
}
.score-value.is-final {
    text-shadow: 0 0 8px var(--c-gold), 0 0 18px rgba(255, 210, 63, 0.4);
}
.score-value-2 { color: var(--c-cyan); }
.score-value-2.is-final { text-shadow: 0 0 8px var(--c-cyan), 0 0 18px rgba(0, 229, 255, 0.4); }
.score-value-3 { color: var(--c-lime); }
.score-value-3.is-final { text-shadow: 0 0 8px var(--c-lime), 0 0 18px rgba(204, 255, 0, 0.4); }

.score-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.score-pill {
    font-family: var(--f-pixel);
    font-size: 9px;
    padding: 5px 8px;
    background: var(--c-lime);
    color: var(--c-dark);
    border-radius: 2px;
    letter-spacing: 0.05em;
}
.score-pill-coin { background: var(--c-orange); color: var(--c-dark); }
.score-pill-cyan { background: var(--c-cyan); color: var(--c-dark); }
.score-pill-gold { background: var(--c-gold); color: var(--c-dark); }

/* =========================================================
   SPRITE CELLS  (stage that holds CSS-pixel art icons)
   ========================================================= */

.cell-sprite {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.pixel-stage {
    width: 100%;
    height: 100%;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* base pixel sprite -- a single 1x1 dot (we use box-shadow grids for pixels)
   --p:  pixel size (px)
   --c:  primary colour
   --c2: accent colour
*/
.pixel {
    width: var(--p, 6px);
    height: var(--p, 6px);
    background: transparent;
    position: relative;
    animation: float 2s ease-in-out infinite;
    will-change: transform;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* RECYCLE ARROW -- 9x9 pixel grid built from box-shadows on a 6px square
   the head element is at (0,0), so each shadow uses x*p, y*p offsets
   layout (R = lime, blank = transparent):
   . R R R R R . . .
   R R . . . R R . .
   R R . . . . R R .
   . . . . . . . R R
   . . . . . . . . R
   R R . . . . . . .
   . R R . . . . . .
   . . R R . . . R R
   . . . R R R R R .
*/
.pixel-recycle {
    --p: 6px;
    --c: #CCFF00;
    width: var(--p);
    height: var(--p);
    background: var(--c);
    box-shadow:
        /* row 0 */
                    6px 0      0 var(--c),  12px 0      0 var(--c),  18px 0      0 var(--c),  24px 0      0 var(--c),
        /* row 1 */
                    0px 6px    0 var(--c),   6px 6px    0 var(--c),  30px 6px    0 var(--c),  36px 6px    0 var(--c),
        /* row 2 */
                    0px 12px   0 var(--c),   6px 12px   0 var(--c),  36px 12px   0 var(--c),  42px 12px   0 var(--c),
        /* row 3 */
                   42px 18px   0 var(--c),  48px 18px   0 var(--c),
        /* row 4 */
                   48px 24px   0 var(--c),
        /* row 5 */
                    0px 30px   0 var(--c),   6px 30px   0 var(--c),
        /* row 6 */
                    6px 36px   0 var(--c),  12px 36px   0 var(--c),
        /* row 7 */
                   12px 42px   0 var(--c),  18px 42px   0 var(--c),  42px 42px   0 var(--c),  48px 42px   0 var(--c),
        /* row 8 */
                   18px 48px   0 var(--c),  24px 48px   0 var(--c),  30px 48px   0 var(--c),  36px 48px   0 var(--c),  42px 48px   0 var(--c);
}
.pixel-recycle-alt { --c: #FF6B2B; }

/* JOYSTICK -- 9x9
   . . O O O . . . .
   . O O O O O . . .
   . . O O O . . . .
   . . . S . . . . .
   . . . S . . . . .
   . . . S . . . . .
   B B B B B B B B B
   B B B B B B B B B
   . B . . . . . B .
*/
.pixel-joystick {
    --p: 6px;
    --c: #FF6B2B;        /* ball */
    --c2: #1A1A1A;       /* shaft */
    --c3: #4A3657;       /* base */
    --c4: #CCFF00;       /* button */
    width: var(--p);
    height: var(--p);
    background: transparent;
    box-shadow:
        /* ball top row */
                   12px 0      0 var(--c),  18px 0      0 var(--c),  24px 0      0 var(--c),
                    6px 6px    0 var(--c),  12px 6px    0 var(--c),  18px 6px    0 var(--c),  24px 6px    0 var(--c),  30px 6px    0 var(--c),
                   12px 12px   0 var(--c),  18px 12px   0 var(--c),  24px 12px   0 var(--c),
        /* shaft */
                   18px 18px   0 var(--c2),
                   18px 24px   0 var(--c2),
                   18px 30px   0 var(--c2),
        /* base */
                    0px 36px   0 var(--c3),   6px 36px   0 var(--c3),  12px 36px   0 var(--c3),  18px 36px   0 var(--c3),  24px 36px   0 var(--c3),  30px 36px   0 var(--c3),  36px 36px   0 var(--c3),  42px 36px   0 var(--c3),  48px 36px   0 var(--c3),
                    0px 42px   0 var(--c3),   6px 42px   0 var(--c3),  12px 42px   0 var(--c3),  18px 42px   0 var(--c3),  24px 42px   0 var(--c3),  30px 42px   0 var(--c3),  36px 42px   0 var(--c3),  42px 42px   0 var(--c3),  48px 42px   0 var(--c3),
        /* feet/buttons */
                    6px 48px   0 var(--c4),  42px 48px   0 var(--c4);
}

/* HEART -- 9x9 (half-depleted: left half lime, right half violet)
   . R R . R R . . .
   R R R R R R R . .
   R R R R R R R . .
   R R R R R R R . .
   . R R R R R . . .
   . . R R R . . . .
   . . . R . . . . .
   . . . . . . . . .
*/
.pixel-heart {
    --p: 6px;
    --c: #CCFF00;        /* live half */
    --c2: #4A3657;       /* depleted half */
    width: var(--p);
    height: var(--p);
    background: transparent;
    box-shadow:
        /* row 0 */
                    6px 0      0 var(--c),  12px 0      0 var(--c),                         24px 0      0 var(--c2), 30px 0      0 var(--c2),
        /* row 1 */
                    0px 6px    0 var(--c),   6px 6px    0 var(--c),  12px 6px    0 var(--c),  18px 6px    0 var(--c),  24px 6px    0 var(--c2), 30px 6px    0 var(--c2), 36px 6px    0 var(--c2),
        /* row 2 */
                    0px 12px   0 var(--c),   6px 12px   0 var(--c),  12px 12px   0 var(--c),  18px 12px   0 var(--c),  24px 12px   0 var(--c2), 30px 12px   0 var(--c2), 36px 12px   0 var(--c2),
        /* row 3 */
                    0px 18px   0 var(--c),   6px 18px   0 var(--c),  12px 18px   0 var(--c),  18px 18px   0 var(--c),  24px 18px   0 var(--c2), 30px 18px   0 var(--c2), 36px 18px   0 var(--c2),
        /* row 4 */
                    6px 24px   0 var(--c),  12px 24px   0 var(--c),  18px 24px   0 var(--c),  24px 24px   0 var(--c2), 30px 24px   0 var(--c2),
        /* row 5 */
                   12px 30px   0 var(--c),  18px 30px   0 var(--c),  24px 30px   0 var(--c2),
        /* row 6 */
                   18px 36px   0 var(--c);
}

/* COIN -- 9x9
   . . Y Y Y . . . .
   . Y Y Y Y Y . . .
   Y Y . W . Y Y . .
   Y Y . W . Y Y . .
   Y Y . W . Y Y . .
   . Y Y Y Y Y . . .
   . . Y Y Y . . . .
*/
.pixel-coin {
    --p: 6px;
    --c: #FFD23F;
    --c2: #FF6B2B;
    width: var(--p);
    height: var(--p);
    background: transparent;
    box-shadow:
        /* row 0 */
                   12px 0      0 var(--c),  18px 0      0 var(--c),  24px 0      0 var(--c),
        /* row 1 */
                    6px 6px    0 var(--c),  12px 6px    0 var(--c),  18px 6px    0 var(--c),  24px 6px    0 var(--c),  30px 6px    0 var(--c),
        /* row 2 */
                    0px 12px   0 var(--c),   6px 12px   0 var(--c),  18px 12px   0 var(--c2), 30px 12px   0 var(--c),  36px 12px   0 var(--c),
        /* row 3 */
                    0px 18px   0 var(--c),   6px 18px   0 var(--c),  18px 18px   0 var(--c2), 30px 18px   0 var(--c),  36px 18px   0 var(--c),
        /* row 4 */
                    0px 24px   0 var(--c),   6px 24px   0 var(--c),  18px 24px   0 var(--c2), 30px 24px   0 var(--c),  36px 24px   0 var(--c),
        /* row 5 */
                    6px 30px   0 var(--c),  12px 30px   0 var(--c),  18px 30px   0 var(--c),  24px 30px   0 var(--c),  30px 30px   0 var(--c),
        /* row 6 */
                   12px 36px   0 var(--c),  18px 36px   0 var(--c),  24px 36px   0 var(--c);
}
.pixel-coin-alt { --c: #CCFF00; --c2: #FF6B2B; }

/* MUSHROOM -- 9x9
   cap red, stalk chalk, spots yellow */
.pixel-mushroom {
    --p: 6px;
    --c: #FF6B2B;
    --c2: #E8E0D4;
    --c3: #FFD23F;
    width: var(--p);
    height: var(--p);
    background: transparent;
    box-shadow:
        /* row 0 cap top */
                   12px 0      0 var(--c),  18px 0      0 var(--c),  24px 0      0 var(--c),
        /* row 1 */
                    6px 6px    0 var(--c),  12px 6px    0 var(--c3), 18px 6px    0 var(--c),  24px 6px    0 var(--c),  30px 6px    0 var(--c),
        /* row 2 */
                    0px 12px   0 var(--c),   6px 12px   0 var(--c),  12px 12px   0 var(--c3), 18px 12px   0 var(--c3), 24px 12px   0 var(--c),  30px 12px   0 var(--c),  36px 12px   0 var(--c3),
        /* row 3 */
                    0px 18px   0 var(--c),   6px 18px   0 var(--c),  12px 18px   0 var(--c),  18px 18px   0 var(--c),  24px 18px   0 var(--c),  30px 18px   0 var(--c),  36px 18px   0 var(--c),
        /* row 4 cap base */
                    0px 24px   0 var(--c2),  6px 24px   0 var(--c2), 12px 24px   0 var(--c2), 18px 24px   0 var(--c2), 24px 24px   0 var(--c2), 30px 24px   0 var(--c2), 36px 24px   0 var(--c2),
        /* row 5 stem */
                   12px 30px   0 var(--c2), 18px 30px   0 var(--c2), 24px 30px   0 var(--c2),
        /* row 6 */
                   12px 36px   0 var(--c2), 18px 36px   0 var(--c2), 24px 36px   0 var(--c2),
        /* row 7 base */
                    6px 42px   0 var(--c2), 12px 42px   0 var(--c2), 18px 42px   0 var(--c2), 24px 42px   0 var(--c2), 30px 42px   0 var(--c2);
}

/* KEY -- 9x9 */
.pixel-key {
    --p: 6px;
    --c: #FFD23F;
    width: var(--p);
    height: var(--p);
    background: transparent;
    box-shadow:
        /* head */
                   12px 0      0 var(--c),  18px 0      0 var(--c),  24px 0      0 var(--c),
                    6px 6px    0 var(--c),  30px 6px    0 var(--c),
                    6px 12px   0 var(--c),  18px 12px   0 var(--c),  30px 12px   0 var(--c),
                   12px 18px   0 var(--c),  18px 18px   0 var(--c),  24px 18px   0 var(--c),
        /* shaft */
                   18px 24px   0 var(--c),
                   18px 30px   0 var(--c),  24px 30px   0 var(--c),
                   18px 36px   0 var(--c),
                   18px 42px   0 var(--c),  24px 42px   0 var(--c),
                   18px 48px   0 var(--c);
}

/* TREASURE CHEST -- 9x9 */
.pixel-chest {
    --p: 6px;
    --c: #FFD23F;        /* gold */
    --c2: #4A3657;       /* wood/dark */
    --c3: #FF6B2B;       /* lock */
    width: var(--p);
    height: var(--p);
    background: transparent;
    box-shadow:
        /* lid top */
                    6px 0      0 var(--c2),  12px 0      0 var(--c2), 18px 0      0 var(--c2), 24px 0      0 var(--c2), 30px 0      0 var(--c2), 36px 0      0 var(--c2), 42px 0      0 var(--c2),
        /* lid front (gold band) */
                    0px 6px    0 var(--c2),   6px 6px    0 var(--c),  12px 6px    0 var(--c),  18px 6px    0 var(--c),  24px 6px    0 var(--c3), 30px 6px    0 var(--c),  36px 6px    0 var(--c),  42px 6px    0 var(--c),  48px 6px    0 var(--c2),
        /* lid */
                    0px 12px   0 var(--c2),   6px 12px   0 var(--c2), 12px 12px   0 var(--c2), 18px 12px   0 var(--c2), 24px 12px   0 var(--c3), 30px 12px   0 var(--c2), 36px 12px   0 var(--c2), 42px 12px   0 var(--c2), 48px 12px   0 var(--c2),
        /* body top edge */
                    0px 18px   0 var(--c2),   6px 18px   0 var(--c),  12px 18px   0 var(--c),  18px 18px   0 var(--c),  24px 18px   0 var(--c3), 30px 18px   0 var(--c),  36px 18px   0 var(--c),  42px 18px   0 var(--c),  48px 18px   0 var(--c2),
        /* body */
                    0px 24px   0 var(--c2),   6px 24px   0 var(--c2), 12px 24px   0 var(--c),  18px 24px   0 var(--c2), 24px 24px   0 var(--c2), 30px 24px   0 var(--c2), 36px 24px   0 var(--c),  42px 24px   0 var(--c2), 48px 24px   0 var(--c2),
                    0px 30px   0 var(--c2),   6px 30px   0 var(--c2), 12px 30px   0 var(--c2), 18px 30px   0 var(--c2), 24px 30px   0 var(--c2), 30px 30px   0 var(--c2), 36px 30px   0 var(--c2), 42px 30px   0 var(--c2), 48px 30px   0 var(--c2),
        /* bottom rim */
                    0px 36px   0 var(--c),    6px 36px   0 var(--c2), 12px 36px   0 var(--c),  18px 36px   0 var(--c2), 24px 36px   0 var(--c),  30px 36px   0 var(--c2), 36px 36px   0 var(--c),  42px 36px   0 var(--c2), 48px 36px   0 var(--c);
}

/* BROKEN SWORD BEING REFORGED -- 9x9 */
.pixel-sword {
    --p: 6px;
    --c: #00E5FF;        /* blade */
    --c2: #E8E0D4;       /* hilt grip */
    --c3: #FFD23F;       /* pommel */
    --c4: #FF6B2B;       /* sparks */
    width: var(--p);
    height: var(--p);
    background: transparent;
    box-shadow:
        /* spark top */
                   24px 0      0 var(--c4),
        /* blade */
                   18px 6px    0 var(--c),  24px 6px    0 var(--c),
                   18px 12px   0 var(--c),  24px 12px   0 var(--c),
                   18px 18px   0 var(--c),  24px 18px   0 var(--c),
        /* break/glitch */
                   18px 24px   0 var(--c4),                          30px 24px   0 var(--c4),
        /* blade lower */
                   18px 30px   0 var(--c),  24px 30px   0 var(--c),
        /* crossguard */
                    6px 36px   0 var(--c2), 12px 36px   0 var(--c2), 18px 36px   0 var(--c2), 24px 36px   0 var(--c2), 30px 36px   0 var(--c2), 36px 36px   0 var(--c2),
        /* grip */
                   18px 42px   0 var(--c3), 24px 42px   0 var(--c3),
                   18px 48px   0 var(--c3), 24px 48px   0 var(--c3),
        /* pommel sparks */
                   12px 48px   0 var(--c4), 30px 48px   0 var(--c4);
}

/* =========================================================
   TICKER
   ========================================================= */

.cell-ticker {
    padding: 0;
    overflow: hidden;
    background: var(--c-dark);
    display: flex;
    align-items: center;
}
.level-1 .cell-ticker { background: var(--c-lime); color: var(--c-dark); }
.level-2 .cell-ticker { background: var(--c-cyan); color: var(--c-dark); }
.level-3 .cell-ticker { background: var(--c-orange); color: var(--c-dark); }

.cell-ticker::before, .cell-ticker::after { display: none; }

.ticker-rail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.ticker-track {
    display: inline-flex;
    gap: 32px;
    align-items: center;
    white-space: nowrap;
    padding: 0 20px;
    animation: ticker 36s linear infinite;
    will-change: transform;
}
.ticker-track-rev { animation: ticker-rev 36s linear infinite; }
@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ticker-rev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.ticker-item {
    font-family: var(--f-pixel);
    font-size: 11px;
    color: var(--c-dark);
    letter-spacing: 0.04em;
}
.ticker-dot { color: var(--c-dark); font-size: 10px; }

/* =========================================================
   ROSTER (level 3)
   ========================================================= */

.roster-list {
    margin-top: 6px;
    display: grid;
    gap: 6px;
}
.roster-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(255, 107, 43, 0.06);
    border-left: 2px solid var(--c-orange);
    border-radius: 2px;
}
.roster-num {
    font-family: var(--f-pixel);
    font-size: 10px;
    color: var(--c-orange);
}
.roster-name {
    font-family: var(--f-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--c-chalk);
    line-height: 1;
}
.roster-tag {
    font-family: var(--f-pixel);
    font-size: 8px;
    color: var(--c-cyan);
    letter-spacing: 0.05em;
}

/* =========================================================
   JAM META + CTA
   ========================================================= */

.jam-meta {
    margin-top: 14px;
    display: grid;
    gap: 6px;
    border-top: 1px dashed rgba(232, 224, 212, 0.18);
    padding-top: 10px;
}
.jam-meta-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    font-family: var(--f-pixel);
    font-size: 9px;
    color: var(--c-chalk);
}
.jam-meta-row span { opacity: 0.55; }
.jam-meta-row b { color: var(--c-gold); font-weight: 400; }

.cell-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 26px;
}
.cta-block {
    display: flex;
    flex-direction: column;
}
.cta-line {
    font-family: var(--f-display);
    font-size: clamp(28px, 4vw, 56px);
    letter-spacing: 0.06em;
    color: var(--c-lime);
    line-height: 1;
}
.cta-sub {
    font-family: var(--f-pixel);
    font-size: 10px;
    color: var(--c-chalk);
    opacity: 0.7;
    margin-top: 6px;
    letter-spacing: 0.05em;
}
.cta-keys {
    display: flex;
    gap: 8px;
}
.key-cap {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--c-chalk);
    color: var(--c-dark);
    font-family: var(--f-pixel);
    font-size: 12px;
    box-shadow: 0 3px 0 var(--c-violet);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.key-cap:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-violet); }
.key-cap-a { background: var(--c-orange); color: var(--c-dark); box-shadow: 0 3px 0 #7a3414; }
.key-cap-b { background: var(--c-cyan); color: var(--c-dark); box-shadow: 0 3px 0 #035764; }
.key-cap-c { background: var(--c-gold); color: var(--c-dark); box-shadow: 0 3px 0 #6d5a17; }
.key-cap-d { background: var(--c-lime); color: var(--c-dark); box-shadow: 0 3px 0 #5e7600; }

/* =========================================================
   FOOTER (lives in level-3 ticker row's row)
   ========================================================= */

.footer-bar {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--c-dark);
    border-radius: var(--radius);
    font-family: var(--f-pixel);
    font-size: 9px;
    color: var(--c-chalk);
    letter-spacing: 0.05em;
    border-top: 1px solid rgba(204, 255, 0, 0.25);
}
.foot-cell { opacity: 0.7; }
.foot-cell-mid { color: var(--c-lime); opacity: 1; }

/* =========================================================
   GLITCH FRAGMENTS (decorative giant pixel-art at low opacity)
   ========================================================= */

.glitch-frag {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    width: 18px; height: 18px;
    background: transparent;
}
.frag-1 { top: 12%; right: -40px; animation: drift 18s ease-in-out infinite; }
.frag-2 { bottom: 18%; left: -30px; animation: drift 22s ease-in-out infinite reverse; }
.frag-3 { top: 8%; left: -40px; animation: drift 20s ease-in-out infinite; }
.frag-4 { bottom: 22%; right: -50px; animation: drift 24s ease-in-out infinite reverse; }
.frag-5 { top: 14%; left: -40px; animation: drift 22s ease-in-out infinite; }
.frag-6 { bottom: 14%; right: -40px; animation: drift 26s ease-in-out infinite reverse; }

@keyframes drift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(20px, -16px); }
}

/* huge box-shadow grid -- a single repeated pattern, tiled */
.frag-1, .frag-3, .frag-5 {
    --c: #CCFF00;
    box-shadow:
         18px  0    0 var(--c),  54px  0    0 var(--c),  90px  0    0 var(--c),  126px 0    0 var(--c),
          0   18px  0 var(--c),  36px 18px  0 var(--c),  72px 18px  0 var(--c),  108px 18px 0 var(--c),  144px 18px 0 var(--c),
         18px 36px  0 var(--c),  54px 36px  0 var(--c),  90px 36px  0 var(--c),  126px 36px 0 var(--c),
          0   54px  0 var(--c),  36px 54px  0 var(--c),  72px 54px  0 var(--c),  108px 54px 0 var(--c),  144px 54px 0 var(--c),
         18px 72px  0 var(--c),  54px 72px  0 var(--c),  90px 72px  0 var(--c),  126px 72px 0 var(--c),
          0   90px  0 var(--c),  36px 90px  0 var(--c),  72px 90px  0 var(--c),  108px 90px 0 var(--c),  144px 90px 0 var(--c),
         18px 108px 0 var(--c),  54px 108px 0 var(--c),  90px 108px 0 var(--c),  126px 108px 0 var(--c);
}
.frag-2, .frag-4, .frag-6 {
    --c: #00E5FF;
    box-shadow:
          0   0    0 var(--c),  36px  0    0 var(--c),  72px  0    0 var(--c),  108px 0    0 var(--c),
         18px 18px 0 var(--c),  54px 18px 0 var(--c),  90px 18px 0 var(--c),  126px 18px 0 var(--c),
          0   36px 0 var(--c),  36px 36px 0 var(--c),  72px 36px 0 var(--c),  108px 36px 0 var(--c),
         18px 54px 0 var(--c),  54px 54px 0 var(--c),  90px 54px 0 var(--c),  126px 54px 0 var(--c),
          0   72px 0 var(--c),  36px 72px 0 var(--c),  72px 72px 0 var(--c),  108px 72px 0 var(--c),
         18px 90px 0 var(--c),  54px 90px 0 var(--c),  90px 90px 0 var(--c),  126px 90px 0 var(--c);
}

/* =========================================================
   SCREEN-WIPE TRANSITION (driven from JS)
   bars are spawned by script.js when an Intersection Observer
   reports a new level section has entered the viewport.
   ========================================================= */

.wipe-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
    overflow: hidden;
}
.wipe-bar {
    position: absolute;
    left: -110%;
    width: 110%;
    height: 12.5%;
    transition: left 320ms cubic-bezier(0.7, 0, 0.3, 1);
}
.wipe-bar.in  { left: 0; }
.wipe-bar.out { left: 110%; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .bento-1, .bento-2, .bento-3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "title    title  "
            "title    title  "
            "score    score  "
            "spriteA  spriteB"
            "featureA featureA"
            "featureB featureB"
            "spriteC  spriteD"
            "ticker   ticker ";
    }
    .bento-3 {
        grid-template-areas:
            "title    title  "
            "title    title  "
            "score    score  "
            "jam      jam    "
            "spriteA  spriteB"
            "roster   roster "
            "cta      cta    "
            "ticker   ticker "
            "footer   footer ";
    }
    .level-marker { font-size: 9px; }
    .marker-name { font-size: 14px; }
    .title-row { font-size: clamp(48px, 14vw, 96px); }
    .cta-keys { display: none; }
    .cell-cta { padding: 14px 16px; }
}

@media (max-width: 520px) {
    .cell { padding: 14px 14px; }
    .title-tag { font-size: 14px; }
    .feature-body { font-size: 13.5px; }
}