/* Number listening games: glossy candy tiles in the site's island colours. */
:root {
  --ng-sea: #0B6E7C; --ng-coral: #FF6B4A; --ng-sun: #F4B942; --ng-leaf: #3C9A5F;
  --ng-grape: #7A4FD1; --ng-hibiscus: #E8457C; --ng-sky: #2F8FD8; --ng-ink: #14213D;
}

.ng-wrap { max-width: 720px; margin: 0 auto; }
.ng-stage { position: relative; background: rgba(255,255,255,0.86); border-radius: 28px; padding: 22px 16px 26px;
  box-shadow: 0 18px 40px rgba(20,33,61,0.16), inset 0 1px 0 rgba(255,255,255,0.9); overflow: hidden; }
.ng-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 0%, rgba(244,185,66,0.22), transparent 45%),
              radial-gradient(circle at 100% 100%, rgba(11,110,124,0.18), transparent 50%); }
.ng-stage > * { position: relative; }

/* HUD */
.ng-hud { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; }
.ng-pill { min-width: 84px; padding: 8px 14px; border-radius: 999px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%), var(--pill, var(--ng-sea));
  box-shadow: 0 4px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6); }
.ng-pill b { display: block; font: 800 20px/1.1 'Fraunces', serif; }
.ng-pill span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.ng-progress { display: flex; gap: 6px; justify-content: center; margin: 0 0 16px; }
.ng-progress i { width: 12px; height: 12px; border-radius: 50%; background: #e6dccb; transition: transform .2s; }
.ng-progress i.now { background: var(--ng-sun); transform: scale(1.35); box-shadow: 0 0 0 3px rgba(244,185,66,.3); }
.ng-progress i.ok { background: var(--ng-leaf); }
.ng-progress i.no { background: var(--ng-coral); }
.ng-timer { height: 8px; border-radius: 99px; background: #eee3cf; overflow: hidden; margin: -6px auto 16px; max-width: 360px; }
.ng-timer i { display: block; height: 100%; width: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--ng-leaf), var(--ng-sun), var(--ng-coral)); transform-origin: left; }

/* The big play button */
.ng-listen { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 20px; }
.ng-play { position: relative; width: 132px; height: 132px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  font-size: 54px; line-height: 1;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.75), rgba(255,255,255,0) 38%),
              linear-gradient(160deg, #19a3b5, var(--ng-sea) 55%, #06414a);
  box-shadow: 0 10px 0 #05363d, 0 18px 30px rgba(11,110,124,0.45), inset 0 -6px 14px rgba(0,0,0,0.25);
  transition: transform .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.ng-play:active { transform: translateY(6px); box-shadow: 0 4px 0 #05363d, 0 8px 18px rgba(11,110,124,0.4), inset 0 -6px 14px rgba(0,0,0,0.25); }
.ng-play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid rgba(25,163,181,0.5);
  animation: ng-ring 1.8s ease-out infinite; }
.ng-play.playing::after { animation-duration: .8s; border-color: rgba(244,185,66,0.8); }
@keyframes ng-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.ng-controls { display: flex; gap: 10px; }
.ng-mini { border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: 15px; cursor: pointer; color: var(--ng-ink);
  background: linear-gradient(180deg, #fff, #f3eadb); box-shadow: 0 4px 0 #d8c9ad, inset 0 1px 0 #fff; }
.ng-mini:active { transform: translateY(3px); box-shadow: 0 1px 0 #d8c9ad; }
.ng-mini:disabled { opacity: .45; cursor: default; }
.ng-ask { font: 700 20px/1.3 'Fraunces', serif; text-align: center; color: var(--ng-ink); margin: 0 0 14px; }
.ng-hint { text-align: center; color: #6b6f7a; font-size: 14px; margin: -6px 0 14px; }

/* Glossy number tiles */
.ng-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); max-width: 460px; margin: 0 auto; }
.ng-grid.c4 { grid-template-columns: repeat(4, 1fr); max-width: 560px; }
.ng-tile { --c: var(--ng-sea); position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border: 0; border-radius: 22px; cursor: pointer;
  color: #fff; font: 800 clamp(30px, 9vw, 52px)/1 'Fraunces', serif; text-shadow: 0 2px 0 rgba(0,0,0,0.22);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 78%, #000) 100%);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 60%, #000), 0 12px 22px rgba(20,33,61,0.22), inset 0 2px 0 rgba(255,255,255,0.55);
  transition: transform .1s, box-shadow .1s, filter .2s; -webkit-tap-highlight-color: transparent; overflow: hidden; }
.ng-tile::before { content: ""; position: absolute; left: 8%; right: 8%; top: 5%; height: 42%; border-radius: 18px 18px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05)); pointer-events: none; }
.ng-tile:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 60%, #000), 0 5px 10px rgba(20,33,61,0.2), inset 0 2px 0 rgba(255,255,255,0.55); }
.ng-tile:disabled { cursor: default; }
.ng-tile.small { font-size: clamp(22px, 6vw, 36px); border-radius: 18px; }
.ng-tile.right { --c: var(--ng-leaf); animation: ng-pop .5s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 0 5px rgba(60,154,95,0.35), 0 7px 0 #24603b, 0 12px 26px rgba(60,154,95,0.5); }
.ng-tile.wrong { --c: #9aa0aa; animation: ng-shake .4s; }
.ng-tile.dim { filter: grayscale(.6) opacity(.45); }
@keyframes ng-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18) rotate(-3deg); } 100% { transform: scale(1); } }
@keyframes ng-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.c0 { --c: var(--ng-sea); } .c1 { --c: var(--ng-coral); } .c2 { --c: #E0A21F; } .c3 { --c: var(--ng-leaf); }
.c4 { --c: var(--ng-grape); } .c5 { --c: var(--ng-hibiscus); } .c6 { --c: var(--ng-sky); }

/* A big shown numeral (Reverse Round) */
.ng-big { display: grid; place-items: center; margin: 0 auto 18px; width: 150px; height: 150px; border-radius: 34px;
  font: 800 76px/1 'Fraunces', serif; color: #fff; --c: var(--ng-coral);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000));
  box-shadow: 0 9px 0 color-mix(in srgb, var(--c) 60%, #000), 0 16px 28px rgba(20,33,61,0.25), inset 0 3px 0 rgba(255,255,255,.5);
  text-shadow: 0 3px 0 rgba(0,0,0,.2); position: relative; overflow: hidden; animation: ng-float 3s ease-in-out infinite; }
.ng-big::before { content: ""; position: absolute; left: 10%; right: 10%; top: 6%; height: 40%; border-radius: 26px 26px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }
@keyframes ng-float { 50% { transform: translateY(-6px) rotate(1deg); } }

/* Voice clip choices (A, B, C) */
.ng-clips { display: grid; gap: 12px; max-width: 460px; margin: 0 auto; }
.ng-clip { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 20px; padding: 10px 12px; cursor: pointer;
  background: linear-gradient(180deg, #fff, #f6efe2); box-shadow: 0 5px 0 #dccbaa, 0 10px 18px rgba(20,33,61,.12), inset 0 1px 0 #fff;
  font-weight: 800; color: var(--ng-ink); font-size: 17px; text-align: left; }
.ng-clip .ng-letter { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; font: 800 24px 'Fraunces', serif;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000)); box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
.ng-clip .ng-say { flex: 1; }
.ng-clip .ng-pick { flex: none; border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #4bc07b, var(--ng-leaf)); box-shadow: 0 4px 0 #24603b; }
.ng-clip .ng-pick:disabled { background: #cfd3d9; box-shadow: 0 4px 0 #aab0b8; cursor: default; }
.ng-clip.playing { box-shadow: 0 0 0 4px rgba(244,185,66,.6), 0 5px 0 #dccbaa; }
.ng-clip.right { box-shadow: 0 0 0 5px rgba(60,154,95,.45), 0 5px 0 #24603b; background: linear-gradient(180deg, #f1fff6, #dff5e7); }
.ng-clip.wrong { animation: ng-shake .4s; background: linear-gradient(180deg, #fff3f0, #fde1da); }
.ng-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 18px; margin-left: 6px; vertical-align: middle; }
.ng-eq i { width: 4px; height: 6px; border-radius: 2px; background: var(--ng-sun); }
.playing .ng-eq i { animation: ng-eq .5s ease-in-out infinite alternate; }
.playing .ng-eq i:nth-child(2) { animation-delay: .15s; } .playing .ng-eq i:nth-child(3) { animation-delay: .3s; }
@keyframes ng-eq { to { height: 18px; } }

/* Konbyen? pictures */
.ng-count { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 520px; margin: 0 auto 18px; padding: 12px;
  border-radius: 22px; background: linear-gradient(180deg, #fffaf0, #fff1d8); box-shadow: inset 0 2px 8px rgba(160,120,40,.15); }
.ng-count img, .ng-count span { width: clamp(42px, 13vw, 64px); height: clamp(42px, 13vw, 64px); object-fit: contain;
  animation: ng-in .35s cubic-bezier(.3,1.6,.5,1) both; filter: drop-shadow(0 3px 2px rgba(0,0,0,.15)); }
.ng-count span { display: grid; place-items: center; font-size: 34px; }
@keyframes ng-in { from { transform: scale(0) rotate(-20deg); opacity: 0; } }

/* Number Simon keypad */
.ng-keypad { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); max-width: 330px; margin: 0 auto; }
.ng-keypad.wide { grid-template-columns: repeat(5, 1fr); max-width: 460px; gap: 10px; }
.ng-keypad .ng-tile { border-radius: 50%; }
.ng-keypad .ng-tile.lit { filter: brightness(1.35) saturate(1.2); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255,255,255,.9), 0 0 30px 6px var(--c); }
.ng-level { text-align: center; font: 800 28px 'Fraunces', serif; color: var(--ng-grape); margin: 0 0 6px; }
.ng-taps { display: flex; justify-content: center; gap: 6px; min-height: 18px; margin: 0 0 14px; }
.ng-taps i { width: 14px; height: 14px; border-radius: 50%; background: #e6dccb; }
.ng-taps i.on { background: var(--ng-grape); }

/* Bingo */
.ng-bingo { display: grid; gap: 8px; margin: 0 auto 14px; max-width: 420px; }
.ng-bingo .ng-tile { font-size: clamp(22px, 7vw, 40px); border-radius: 16px; }
.ng-bingo .ng-tile.free { --c: var(--ng-sun); font-size: 18px; }
.ng-bingo .ng-tile.marked::after { content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(232,69,124,.85) 45%, rgba(160,30,80,.9));
  mix-blend-mode: multiply; animation: ng-stamp .25s ease-out; }
@keyframes ng-stamp { from { transform: scale(1.6); opacity: 0; } }
.ng-caller { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 16px; }
.ng-caller .ng-play { width: 96px; height: 96px; font-size: 40px; }
.ng-ball { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font: 800 18px 'Fraunces', serif; color: var(--ng-ink);
  background: radial-gradient(circle at 35% 30%, #fff, #ffe7a6 45%, #e0a21f); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.ng-bingo-btn { display: block; margin: 0 auto; border: 0; border-radius: 999px; padding: 14px 40px; cursor: pointer; color: #fff;
  font: 800 26px 'Fraunces', serif; letter-spacing: .03em;
  background: linear-gradient(180deg, #ff8fb2, var(--ng-hibiscus) 55%, #a8204f); box-shadow: 0 7px 0 #7d1239, 0 14px 26px rgba(232,69,124,.45), inset 0 2px 0 rgba(255,255,255,.5); }
.ng-bingo-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #7d1239; }
.ng-rivals { display: flex; justify-content: center; gap: 10px; margin: 12px 0 0; font-size: 14px; color: #6b6f7a; }

/* Feedback */
.ng-say-back { text-align: center; min-height: 54px; margin: 16px 0 0; }
.ng-say-back b { display: block; font: 800 26px 'Fraunces', serif; color: var(--ng-leaf); }
.ng-say-back.miss b { color: var(--ng-coral); }
.ng-say-back span { color: #6b6f7a; font-size: 14px; }
.ng-float { position: absolute; z-index: 5; font: 800 26px 'Fraunces', serif; color: var(--ng-leaf); pointer-events: none;
  text-shadow: 0 2px 0 #fff; animation: ng-up 1s ease-out forwards; }
@keyframes ng-up { to { transform: translateY(-70px); opacity: 0; } }
.ng-confetti { position: fixed; top: -12px; width: 10px; height: 14px; border-radius: 3px; z-index: 50; pointer-events: none; animation: ng-fall 1.6s ease-in forwards; }
@keyframes ng-fall { to { transform: translateY(105vh) rotate(720deg); } }
.ng-start { text-align: center; padding: 6px 0; }
.ng-start h2 { font: 800 30px 'Fraunces', serif; margin: 6px 0; color: var(--ng-ink); }
.ng-start ol { text-align: left; max-width: 400px; margin: 12px auto 20px; color: #4a4f5c; }
.ng-go { border: 0; border-radius: 999px; padding: 16px 44px; cursor: pointer; color: #fff; font: 800 22px 'Work Sans', sans-serif;
  background: linear-gradient(180deg, #ffd27a, var(--ng-sun) 50%, #d48d12); box-shadow: 0 7px 0 #9c6407, 0 14px 26px rgba(244,185,66,.5), inset 0 2px 0 rgba(255,255,255,.6);
  text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.ng-go:active { transform: translateY(5px); box-shadow: 0 2px 0 #9c6407; }
.ng-error { text-align: center; color: var(--ng-coral); font-weight: 700; }

/* Hub */
.ng-hero { text-align: center; margin: 0 0 22px; }
.ng-hero h1 { font: 800 clamp(30px, 7vw, 46px)/1.1 'Fraunces', serif; margin: 8px 0; color: var(--ng-ink); }
.ng-hero p { color: #4a4f5c; max-width: 560px; margin: 0 auto; }
.ng-hero-nums { display: flex; justify-content: center; gap: 8px; margin: 0 0 10px; }
.ng-hero-nums .ng-tile { width: 54px; height: 54px; aspect-ratio: auto; font-size: 26px; border-radius: 16px; cursor: default; animation: ng-float 3s ease-in-out infinite; }
.ng-hero-nums .ng-tile:nth-child(2) { animation-delay: .4s; } .ng-hero-nums .ng-tile:nth-child(3) { animation-delay: .8s; }
.ng-hero-nums .ng-tile:nth-child(4) { animation-delay: 1.2s; } .ng-hero-nums .ng-tile:nth-child(5) { animation-delay: 1.6s; }
.ng-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ng-card { position: relative; display: block; border-radius: 24px; padding: 18px; color: #fff; text-decoration: none; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 65%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 75%, #000));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 60%, #000), 0 16px 28px rgba(20,33,61,.2), inset 0 2px 0 rgba(255,255,255,.5); transition: transform .15s; }
.ng-card::before { content: ""; position: absolute; left: 5%; right: 5%; top: 3%; height: 38%; border-radius: 20px 20px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); pointer-events: none; }
.ng-card:hover { transform: translateY(-3px) rotate(-.5deg); }
.ng-card .ng-emoji { font-size: 40px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.ng-card h2 { font: 800 24px 'Fraunces', serif; margin: 6px 0 4px; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.ng-card p { margin: 0 0 12px; opacity: .95; }
.ng-levels { display: flex; gap: 6px; flex-wrap: wrap; }
.ng-levels a, .ng-levels span { position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; text-decoration: none;
  background: rgba(255,255,255,.92); color: var(--ng-ink); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.ng-levels span { opacity: .55; }
.ng-soon { margin: 26px 0 0; }
.ng-soon h2 { font: 800 22px 'Fraunces', serif; color: var(--ng-ink); }
.ng-soon ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.ng-soon li { background: rgba(255,255,255,.8); border-radius: 16px; padding: 12px 14px; color: #4a4f5c; }
@media (prefers-reduced-motion: reduce) {
  .ng-play::after, .ng-big, .ng-hero-nums .ng-tile { animation: none; }
}

/* Number Simon: an animated brain behind the keypad. It breathes while you
   play, glows and fires its sparks while the sequence plays, and flashes when
   you clear a level. */
.ng-stage > * { z-index: 1; }
.ng-stage > .ng-brain { position: absolute; z-index: 0; left: 50%; top: 57%; width: min(118%, 640px); pointer-events: none;
  transform: translate(-50%, -50%); opacity: .26; animation: ng-breathe 4.5s ease-in-out infinite; transition: opacity .4s, filter .4s; }
.ng-brain .lobe { fill: url(#ng-brain-fill); stroke: #a3346f; stroke-width: 3; stroke-linejoin: round; }
.ng-brain .fold { fill: none; stroke: #a3346f; stroke-width: 3.2; stroke-linecap: round; opacity: .75; }
.ng-brain .syn { fill: #fff; opacity: 0; animation: ng-twinkle 2.4s ease-in-out infinite; }
.ng-brain .syn:nth-of-type(2n) { animation-delay: .6s; } .ng-brain .syn:nth-of-type(3n) { animation-delay: 1.2s; } .ng-brain .syn:nth-of-type(5n) { animation-delay: 1.8s; }
.ng-thinking > .ng-brain { opacity: .42; animation-duration: 1.1s; filter: drop-shadow(0 0 22px rgba(232,69,124,.55)); }
.ng-thinking .ng-brain .syn { animation-duration: .7s; }
.ng-stage > .ng-brain.win { animation: ng-brain-win .9s ease-out; opacity: .55; filter: drop-shadow(0 0 30px rgba(244,185,66,.8)); }
@keyframes ng-breathe { 50% { transform: translate(-50%, -50%) scale(1.06) rotate(-1.5deg); } }
@keyframes ng-twinkle { 0%, 100% { opacity: 0; r: 2; } 50% { opacity: 1; r: 5; } }
@keyframes ng-brain-win { 30% { transform: translate(-50%, -50%) scale(1.18); } 100% { transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ng-stage > .ng-brain, .ng-brain .syn { animation: none; } }

/* Hub banner (the featured image) */
.ng-banner { display: block; margin: 0 auto 22px; border-radius: 24px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(20,33,61,.22); transition: transform .15s; }
.ng-banner:hover { transform: translateY(-2px); }
.ng-banner img { display: block; width: 100%; height: auto; }