/* Page tokens — the game's palette and type ramp, self-contained. */
:root {
  --mg-navy: #0F1B3A; --mg-navy-deep: #0A1228; --mg-navy-soft: #1A2A57;
  --mg-cream: #FAF6E9; --mg-cream-soft: #F2EBD3; --mg-cream-edge: #E8DFC2;
  --mg-ink: #1A1E2E; --mg-ink-soft: #4A526B; --mg-ink-mute: #8A8FA3;
  --mg-cta-from: #FFC73B; --mg-cta-to: #F08A1E; --mg-cta-ink: #2A1A05;
  --mg-correct: #2FA85F; --mg-wrong: #D8443A; --mg-info: #2E8AC9;
  --mg-festival-gold: #D4A13B; --mg-festival-gold-deep: #B27D1E;
  --mg-festival-marigold: #E87722; --mg-festival-marigold-deep: #E85C1E;
  --mg-festival-tassel: #E84A4A;
  --mg-font-ui: 'Fredoka', 'Inter', system-ui, sans-serif;
  --mg-font-display: 'Fraunces', 'Fredoka', 'Inter', system-ui, sans-serif;
  --mg-r-sm: 8px; --mg-r-md: 14px; --mg-r-lg: 22px; --mg-r-xl: 32px; --mg-r-pill: 999px;
  --mg-sh-card: 0 4px 0 var(--mg-cream-edge), 0 18px 40px -18px rgba(10, 18, 40, 0.55);
  --mg-sh-button: 0 4px 0 var(--mg-cta-ink), 0 10px 20px -8px rgba(240, 138, 30, 0.6);
  --mg-sh-overlay: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  --mg-inset-gloss: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   Number Words / Big Number Words — page skin + game styles.

   Ported design: two sibling games sharing one page (digit -> word tiles,
   word -> digit boxes, and a tricky-twin pick). The approved design is a
   full-bleed single-column page (hero, two-door chooser, play card, ladder
   card) with no left sidebar, so the shell's two-column practice grid is
   collapsed to one column below and the sidebar block is left empty by the
   template. Everything else here is the design's own inline-style palette,
   carried over: tokens, keyframes, the gel/tile button family, and the
   hover/active states inline style attributes cannot hold.
   ========================================================================== */

/* ══ 1. SELF-HOSTED WEBFONTS ═══════════════════════════════════════════════
   No Google Fonts / CDN — every face ships from static/fonts/. */
@font-face {
    font-family: 'Fredoka';
    src: url('../fonts/Fredoka-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bungee';
    src: url('../fonts/Bungee.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Titan One';
    src: url('../fonts/TitanOne.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik Bubbles';
    src: url('../fonts/RubikBubbles.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bagel Fat One';
    src: url('../fonts/BagelFatOne.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Chango';
    src: url('../fonts/Chango.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ══ 2. DESIGN TOKENS (scoped to this page only) ═══════════════════════════ */
#nwRoot {
    --mg-navy:        #0F1B3A;
    --mg-cream:       #FAF6E9;
    --mg-cream-soft:  #F2EBD3;
    --mg-cream-edge:  #E8DFC2;
    --mg-ink:         #1A1E2E;
    --mg-ink-soft:    #4A526B;
    --mg-ink-mute:    #8A8FA3;
    --mg-cta-from:    #FFC73B;
    --mg-cta-to:      #F08A1E;
    --mg-cta-ink:     #2A1A05;
    --mg-font-display:"Fraunces", "Fredoka", "Inter", system-ui, sans-serif;
    --mg-font-ui:     "Fredoka", "Inter", system-ui, sans-serif;
}

/* ══ 3. PAGE SKIN — collapse the practice-shell's two-column grid ══════════
   This design has no sidebar; the game's own HUD (stars, streak, level,
   garland) lives inside the box, so the 300px sidebar track is dropped and
   the box takes the full row. */
@media (min-width: 1024px) {
    html body .container:has(#nwRoot) { grid-template-columns: 1fr !important; }
    html body .container:has(#nwRoot) #sidebarCol { display: none !important; }
    html body .container:has(#nwRoot) #problemArea { grid-column: 1 !important; }
}
html body .container:has(#nwRoot) { padding: 0 !important; max-width: none !important; margin-top: 0 !important; }
html body #problemArea:has(#nwRoot) {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
html body #problemArea:has(#nwRoot)::before { content: none !important; }
html body #problemArea:has(#nwRoot) .game-area { min-height: 0 !important; overflow: visible !important; padding: 0 !important; }

#nwRoot {
    position: relative;
    min-height: calc(100vh - 76px);
    background: var(--mg-navy);
    font-family: var(--mg-font-ui);
    color: var(--mg-ink);
    overflow-x: hidden;
    border-radius: 0;
}
#nwRoot .nw-dotgrid {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
    background-size: 22px 22px;
}
#nwRoot a { color: var(--mg-cta-to); text-decoration: none; }
#nwRoot a:hover { color: var(--mg-cta-from); }

/* ══ 4. KEYFRAMES (verbatim from the design) ════════════════════════════════ */
@keyframes nw-pop { 0%{ transform: scale(0.7);} 60%{ transform: scale(1.12);} 100%{ transform: scale(1);} }
@keyframes nw-shake { 0%,100%{ transform: translateX(0);} 20%{ transform: translateX(-7px);} 40%{ transform: translateX(7px);} 60%{ transform: translateX(-5px);} 80%{ transform: translateX(5px);} }
@keyframes nw-star-fly { 0%{ transform: translateY(0) scale(0.4); opacity:0;} 25%{ opacity:1;} 60%{ transform: translateY(-46px) scale(1.25); opacity:1;} 100%{ transform: translateY(-90px) scale(0.9); opacity:0;} }
@keyframes nw-wave-bar { 0%,100%{ transform: scaleY(0.35);} 50%{ transform: scaleY(1);} }
@keyframes nw-num-pop { 0%{ transform: scale(0.5) rotate(-6deg); opacity:0;} 60%{ transform: scale(1.12) rotate(2deg);} 100%{ transform: scale(1) rotate(0); opacity:1;} }
.nwg-fontnum { display:flex; gap:2px; align-items:flex-end; justify-content:center; line-height:0.9; animation:nw-num-pop 0.5s cubic-bezier(.2,1.4,.6,1) both; }
.nwg-fontnum span { display:inline-block; }
@keyframes nw-glow { 0%,100%{ box-shadow: 0 6px 0 #1E6499, 0 0 0 0 rgba(46,138,201,0.0);} 50%{ box-shadow: 0 6px 0 #1E6499, 0 0 0 10px rgba(46,138,201,0.35);} }
@keyframes nw-bounce-in { 0%{ transform: scale(0.3) translateY(-34px); opacity:0;} 55%{ transform: scale(1.09) translateY(3px); opacity:1;} 78%{ transform: scale(0.97) translateY(0);} 100%{ transform: scale(1) translateY(0); opacity:1;} }
@keyframes nw-dot-pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.25);} }
@keyframes nw-confetti { 0%{ transform: translateY(-10px) rotate(0); opacity:1;} 100%{ transform: translateY(240px) rotate(320deg); opacity:0;} }
@keyframes nw-fade-up { 0%{ transform: translateY(14px); opacity:0;} 100%{ transform: translateY(0); opacity:1;} }
@keyframes nw-float { 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-10px) rotate(2deg);} }
@keyframes nw-twinkle { 0%,100%{ opacity:0.15; transform: scale(0.9);} 50%{ opacity:0.7; transform: scale(1.15);} }
@keyframes nw-shimmer { from{ background-position:0% 50%;} to{ background-position:250% 50%;} }
@keyframes nw-sway { 0%,100%{ transform: rotate(-2.5deg);} 50%{ transform: rotate(2.5deg);} }
@keyframes nw-drift { 0%,100%{ transform: translateX(-10px);} 50%{ transform: translateX(12px);} }
@keyframes nw-rays { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes nw-flapy { 0%,100%{ transform: scaleY(1);} 50%{ transform: scaleY(0.55) translateY(-1px);} }
@keyframes nw-pulse { 0%,100%{ opacity:0.7; transform: scale(1);} 50%{ opacity:1; transform: scale(1.06);} }
@keyframes nw-spin { from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
@keyframes nw-flutter { from{ transform: scaleX(1);} to{ transform: scaleX(0.45);} }

.nwg-num-wrap { display:flex; gap:6px; align-items:center; justify-content:center; }
.nwg-num { position:relative; display:inline-block; font-family:var(--mg-font-ui); font-weight:700; font-size:170px; line-height:1; }

@media (prefers-reduced-motion: reduce) { #nwRoot *{ animation-duration: 0.001ms !important; } }

/* ══ 5. Berry mascot (verbatim from Berry.dc.html) ══════════════════════════ */
@keyframes berry-bob { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-6px) rotate(0); } }
@keyframes berry-blink { 0%,90%,100%{ transform: scaleY(1); } 95%{ transform: scaleY(0.08); } }
@keyframes berry-hop { 0%{ transform: translateY(0) scale(1);} 25%{ transform: translateY(-18px) scale(1.05);} 55%{ transform: translateY(0) scale(0.98);} 70%{ transform: translateY(-6px);} 100%{ transform: translateY(0) scale(1);} }
@keyframes berry-party { 0%,100%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-14px) rotate(4deg);} }
@keyframes berry-tilt { 0%,100%{ transform: rotate(-7deg);} 50%{ transform: rotate(-3deg);} }
@keyframes berry-wave { 0%,100%{ transform: rotate(-14deg);} 25%{ transform: rotate(30deg);} 50%{ transform: rotate(-8deg);} 75%{ transform: rotate(34deg);} }
.berry-svg { display:block; width:100%; height:100%; overflow:visible; animation: berry-bob 3.6s ease-in-out infinite; transform-origin: 70px 100px; }
.berry-svg .mascot-eyes { animation: berry-blink 4.6s ease-in-out infinite; transform-origin: 70px 84px; }
.berry-svg.expr-cheer { animation: berry-hop 0.7s cubic-bezier(.2,1.4,.6,1) 1; }
.berry-svg.expr-celebrate { animation: berry-party 0.6s ease-in-out infinite; }
.berry-svg.expr-curious { animation: berry-tilt 1.1s ease-in-out infinite; }
.berry-svg.expr-watch .mascot-eyes { transform: translateY(4px); }
.berry-svg.expr-watch .berry-arm-right { transform-origin: 116px 96px; animation: berry-wave 1.2s ease-in-out infinite; }
.berry-svg.expr-point .berry-arm-right { transform-origin: 116px 96px; transform: rotate(-14deg); }
.berry-svg.expr-wave .berry-arm-right { transform-origin: 116px 96px; animation: berry-wave 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .berry-svg, .berry-svg .mascot-eyes, .berry-svg.expr-cheer, .berry-svg.expr-celebrate,
  .berry-svg.expr-curious, .berry-svg.expr-wave .berry-arm-right,
  .berry-svg.expr-watch .berry-arm-right { animation: none !important; }
}

/* ══ 6. Hover / active states the inline design attributes can't hold ══════ */
#nwRoot .nw-topbtn:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }
#nwRoot .nw-home-card:hover { transform:translateY(-4px); }
#nwRoot .nw-lift:hover { transform:translateY(-2px); }
#nwRoot .nw-ladder-row:hover { transform:translateY(-2px); box-shadow:0 6px 14px -6px rgba(10,18,40,0.25); }
#nwRoot .nw-speak-btn:hover { background:rgba(255,255,255,0.85); transform:translateY(-2px); }
#nwRoot .nw-showme:hover { color:var(--mg-ink-soft); }
#nwRoot .nw-cta:hover { transform:translateY(-2px); }
#nwRoot .nw-cta:active { transform:translateY(2px); box-shadow:0 1px 0 var(--mg-cta-ink), inset 0 2px 0 rgba(255,255,255,0.35); }
#nwRoot .nw-stepper:hover { transform:translateY(-2px); }
#nwRoot .nw-stepper:active { transform:translateY(2px); box-shadow:0 1px 0 var(--nw-edge, rgba(0,0,0,.3)); }
#nwRoot .nw-twin-card { transform: rotate(var(--nw-rot, 0deg)); }
#nwRoot .nw-twin-card:hover { transform: translateY(-3px) rotate(var(--nw-rot, 0deg)); }
#nwRoot .nw-twin-card:active { transform: translateY(2px) rotate(var(--nw-rot, 0deg)); }
#nwRoot button:focus-visible, #nwRoot a:focus-visible { outline: 3px solid var(--mg-cta-from); outline-offset: 3px; }

/* Mobile: doors and ladder rows stack, hero wraps (the design's own flex-wrap
   already handles most of this — these are the few fixed widths it left). */
@media (max-width: 720px) {
  #nwRoot .nw-hero-art { display: none; }
}

/* ══ 7. Gel / tile button family (gel-buttons.css, verbatim) ═══════════════ */
.gel {
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--mg-font-ui,"Fredoka",system-ui,sans-serif); font-weight:700; line-height:1; white-space:nowrap;
  border:none; cursor:pointer; color:var(--c-ink,#fff);
  background:linear-gradient(180deg, var(--c-top) 0%, var(--c-mid) 52%, var(--c-bot) 100%);
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.34,1.4,.6,1), box-shadow .12s ease, filter .16s ease;
}
.gel > * { position:relative; z-index:1; }
.gel.ink-light { text-shadow:0 1px 0 rgba(0,0,0,0.28); }
.gel.ink-dark  { text-shadow:0 1px 0 rgba(255,255,255,0.45); }
.gel:disabled { cursor:not-allowed; filter:grayscale(0.55) opacity(0.5); }

.gel::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:5%; left:7%; right:7%; height:44%;
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.7) 26%, rgba(255,255,255,0.22) 72%, rgba(255,255,255,0) 100%);
  border-radius:inherit;
}
.gel::after {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:16%; right:16%; bottom:7%; height:18%;
  background:linear-gradient(0deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%);
  border-radius:inherit; opacity:0.85;
}
.gel svg { width:1.15em; height:1.15em; display:block; }
.gel:focus-visible { outline:3px solid var(--mg-cta-from,#FFC73B); outline-offset:3px; }

[data-style="jelly"] .gel:not(.sz-icon){ border-radius:28px; }
[data-style="jelly"] .gel{
  filter:saturate(1.12);
  box-shadow:
    0 6px 0 var(--c-rim),
    0 16px 30px -8px var(--c-glow),
    inset 0 4px 0 rgba(255,255,255,0.6),
    inset 0 -7px 12px rgba(0,0,0,0.16);
}
[data-style="jelly"] .gel::before{
  top:6%; left:10%; right:10%; height:44%;
  border-radius:50% 50% 46% 46% / 80% 80% 100% 100%;
  background:linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.12) 75%, rgba(255,255,255,0) 100%);
}
[data-style="jelly"] .gel:hover:not(:disabled),
[data-style="jelly"] .gel.is-hover{
  filter:saturate(1.18) brightness(1.04); transform:translateY(-3px) scale(1.025);
  box-shadow:
    0 9px 0 var(--c-rim),
    0 22px 38px -8px var(--c-glow),
    inset 0 4px 0 rgba(255,255,255,0.65),
    inset 0 -7px 12px rgba(0,0,0,0.16);
}
[data-style="jelly"] .gel:active:not(:disabled),
[data-style="jelly"] .gel.is-press{
  transform:translateY(5px) scale(0.97);
  box-shadow:
    0 1px 0 var(--c-rim),
    0 5px 12px -4px var(--c-glow),
    inset 0 3px 0 rgba(255,255,255,0.5),
    inset 0 -4px 9px rgba(0,0,0,0.18);
}
.gel.selected{ transform:translateY(4px); }

@keyframes gel-pop { 0%{ transform:scale(1);} 45%{ transform:scale(1.09);} 100%{ transform:scale(1);} }
@keyframes gel-shake { 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-7px);} 40%{ transform:translateX(6px);} 60%{ transform:translateX(-4px);} 80%{ transform:translateX(3px);} }
.gel.pop   { animation:gel-pop 0.5s cubic-bezier(.34,1.56,.64,1); }
.gel.shake { animation:gel-shake 0.42s ease; }

[data-style="gel"] .gel:not(.sz-icon){ border-radius:999px; }
[data-style="gel"] .gel{
  box-shadow:
    0 2px 3px rgba(0,0,0,0.18),
    0 12px 24px -8px var(--c-glow),
    inset 0 2px 2px rgba(255,255,255,0.6),
    inset 0 -6px 10px -5px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(0,0,0,0.12);
}
[data-style="gel"] .gel::before{ height:50%; top:4%;
  background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.74) 28%, rgba(255,255,255,0.2) 74%, rgba(255,255,255,0) 100%); }
[data-style="gel"] .gel:hover:not(:disabled){
  filter:brightness(1.07) saturate(1.05); transform:translateY(-2px);
  box-shadow:0 4px 6px rgba(0,0,0,0.20), 0 18px 32px -8px var(--c-glow), inset 0 2px 2px rgba(255,255,255,0.6), inset 0 -8px 14px -4px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(0,0,0,0.10);
}
[data-style="gel"] .gel:active:not(:disabled){
  transform:translateY(1px); filter:brightness(0.95);
  box-shadow:0 1px 2px rgba(0,0,0,0.22), 0 6px 12px -8px var(--c-glow), inset 0 2px 3px rgba(0,0,0,0.28), inset 0 8px 14px -6px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(0,0,0,0.12);
}

[data-style="brand"] .gel:not(.sz-icon){ border-radius:18px; }
[data-style="brand"] .gel{
  box-shadow:0 7px 0 var(--c-rim), 0 16px 22px -8px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -5px 8px rgba(0,0,0,0.18);
}
[data-style="brand"] .gel::before{ height:40%; top:5px; left:9%; right:9%;
  border-radius:14px 14px 50% 50% / 13px 13px 100% 100%; }
[data-style="brand"] .gel:hover:not(:disabled){
  filter:brightness(1.05) saturate(1.04); transform:translateY(-2px);
  box-shadow:0 9px 0 var(--c-rim), 0 20px 28px -8px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -5px 8px rgba(0,0,0,0.18);
}
[data-style="brand"] .gel:active:not(:disabled){
  transform:translateY(6px);
  box-shadow:0 1px 0 var(--c-rim), 0 4px 9px rgba(0,0,0,0.32), inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 6px rgba(0,0,0,0.2);
}

[data-style="glass"] .gel:not(.sz-icon){ border-radius:999px; }
[data-style="glass"] .gel{
  color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c-top) 46%, transparent) 0%, color-mix(in srgb, var(--c-mid) 34%, transparent) 54%, color-mix(in srgb, var(--c-bot) 42%, transparent) 100%);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  text-shadow:0 1px 7px color-mix(in srgb, var(--c-bot) 75%, transparent), 0 1px 1px rgba(0,0,0,0.35);
  box-shadow:0 10px 26px -10px var(--c-glow), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1.5px color-mix(in srgb, var(--c-top) 65%, transparent), inset 0 -12px 20px -10px rgba(0,0,0,0.28);
}
[data-style="glass"] .gel::before{ height:48%; top:4%;
  background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.14) 58%, rgba(255,255,255,0) 100%); }
[data-style="glass"] .gel:hover:not(:disabled){
  transform:translateY(-2px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c-top) 58%, transparent) 0%, color-mix(in srgb, var(--c-mid) 44%, transparent) 54%, color-mix(in srgb, var(--c-bot) 52%, transparent) 100%);
  box-shadow:0 16px 32px -10px var(--c-glow), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1.5px color-mix(in srgb, var(--c-top) 78%, transparent), inset 0 -12px 20px -10px rgba(0,0,0,0.28);
}
[data-style="glass"] .gel:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:0 5px 12px -8px var(--c-glow), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 0 0 1.5px color-mix(in srgb, var(--c-top) 55%, transparent), inset 0 10px 18px -10px rgba(0,0,0,0.3);
}

[data-style="wood"] .gel:not(.sz-icon){ border-radius:999px; }
[data-style="wood"] .gel{
  color:#FBEFD8; font-weight:700;
  --w-hi:color-mix(in srgb, #C2832F 89%, var(--c-mid));
  --w-mid:color-mix(in srgb, #8E5018 90%, var(--c-mid));
  --w-lo:color-mix(in srgb, #6B3A10 91%, var(--c-bot));
  --w-in-hi:color-mix(in srgb, #54300F 90%, var(--c-bot));
  --w-in-lo:color-mix(in srgb, #34200A 92%, var(--c-rim));
  --w-edge:color-mix(in srgb, #2A1805 90%, var(--c-rim));
  background:
    repeating-linear-gradient(1.5deg, rgba(0,0,0,0.13) 0 1px, rgba(255,255,255,0.05) 2px, rgba(0,0,0,0) 4px, rgba(0,0,0,0.06) 8px),
    repeating-linear-gradient(2.6deg, rgba(0,0,0,0.08) 0 5px, rgba(255,255,255,0.035) 11px, rgba(0,0,0,0) 19px),
    linear-gradient(180deg, var(--w-hi) 0%, var(--w-mid) 46%, var(--w-lo) 100%);
  text-shadow:0 1px 1px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.45);
  box-shadow:0 7px 0 var(--w-edge), 0 16px 26px -8px rgba(0,0,0,0.62), inset 0 2px 1px rgba(255,233,180,0.62), inset 0 0 0 1px rgba(255,220,160,0.18), inset 0 -8px 12px rgba(0,0,0,0.45);
}
[data-style="wood"] .gel::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:7px; height:auto; border-radius:inherit;
  background:
    repeating-linear-gradient(1.6deg, rgba(0,0,0,0.2) 0 1px, rgba(255,255,255,0.045) 2px, rgba(0,0,0,0) 4px, rgba(0,0,0,0.14) 9px),
    linear-gradient(180deg, var(--w-in-hi) 0%, var(--w-in-lo) 55%, var(--w-in-hi) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.42), inset 0 6px 12px rgba(0,0,0,0.72), inset 0 -4px 7px rgba(0,0,0,0.4), 0 1px 0 rgba(255,232,172,0.5), 0 -1px 1px rgba(0,0,0,0.32);
}
[data-style="wood"] .gel::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:2px; left:8%; right:8%; bottom:auto; height:33%;
  background:linear-gradient(180deg, rgba(255,246,214,0.66) 0%, rgba(255,240,200,0.14) 62%, rgba(255,240,200,0) 100%);
  border-radius:inherit;
}
[data-style="wood"] .gel:hover:not(:disabled){
  filter:brightness(1.06) saturate(1.04); transform:translateY(-2px);
  box-shadow:0 9px 0 var(--w-edge), 0 22px 32px -8px rgba(0,0,0,0.64), inset 0 2px 1px rgba(255,233,180,0.62), inset 0 0 0 1px rgba(255,220,160,0.2), inset 0 -8px 12px rgba(0,0,0,0.45);
}
[data-style="wood"] .gel:active:not(:disabled){
  transform:translateY(6px);
  box-shadow:0 1px 0 var(--w-edge), 0 4px 9px rgba(0,0,0,0.5), inset 0 2px 1px rgba(255,228,170,0.45), inset 0 0 0 1px rgba(255,220,160,0.16), inset 0 -5px 9px rgba(0,0,0,0.42);
}

[data-style="tile"] .gel:not(.sz-icon){ border-radius:24px; }
[data-style="tile"] .gel{
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,0.22);
  box-shadow:0 8px 0 var(--c-rim), 0 18px 26px -10px rgba(0,0,0,0.5), inset 0 3px 2px rgba(255,255,255,0.7), inset 0 -7px 11px rgba(0,0,0,0.22);
}
[data-style="tile"] .gel::before{
  top:6px; left:11%; right:11%; height:42%;
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 42%, rgba(255,255,255,0) 100%);
  border-radius:16px 16px 46% 46% / 14px 14px 100% 100%;
}
[data-style="tile"] .gel:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.06) saturate(1.05);
  box-shadow:0 10px 0 var(--c-rim), 0 24px 32px -10px rgba(0,0,0,0.52), inset 0 3px 2px rgba(255,255,255,0.7), inset 0 -7px 11px rgba(0,0,0,0.22); }
[data-style="tile"] .gel:active:not(:disabled){ transform:translateY(7px);
  box-shadow:0 1px 0 var(--c-rim), 0 5px 10px rgba(0,0,0,0.4), inset 0 3px 2px rgba(255,255,255,0.55), inset 0 -4px 8px rgba(0,0,0,0.22); }

/* ==========================================================================
   SHORT WINDOW — keep the two "Let's Play" buttons above the fold
   Founder, 2026-08-21: a control must not sit below the fold unless the page is
   genuinely long. This chooser IS longer than one screen, but its two CTAs sat
   only ~35px past the bottom of a 650px viewport (a 1366x768 laptop) — near
   enough that the page read as broken rather than as scrollable. Trimming the
   hero's own breathing space lifts both buttons back onto the first screen. A
   tall window is untouched.
   ========================================================================== */
@media (min-width: 900px) and (max-height: 800px) {
    /* `main` is a grandchild of #nwHome (it sits inside .nw-dotgrid), and the
       card's FIRST child is its 8px colour stripe — target both precisely, or
       the trim lands on the stripe and makes the card taller instead. */
    #nwHome main { padding-top: 12px !important; padding-bottom: 28px !important; }
    #nwHome main > div:first-child { margin-bottom: 22px !important; }
    #nwHome .nw-hero-art { width: 180px !important; height: 166px !important; }
    #nwHome .nw-home-card > div:last-child { padding: 20px 30px 22px !important; gap: 11px !important; }
}