/* Wordspark's games (game/stage.js and the games on it). The game is the whole screen: the theme's world behind, round
   glass buttons over it that read on any world (like Classboard's bar), and the game's parts as real things with depth:
   cards that stand, places pressed into the table, tiles you can pick up (a light top edge, a darker side under them, a
   soft shadow that grows when they are lifted). Each theme sets the colours below ([data-gtheme], [data-gvar]).
   Only transform and opacity move; shadows and filters stay still. */
body.gs-open { overflow: hidden; }
.gs {
  --g-card: #1F4E47; --g-card-2: #143E38; --g-card-edge: #0B2723; --g-card-ink: #FFFCF4;
  --g-tile: #FFFFFF; --g-tile-2: #FFF4E2; --g-tile-edge: #E4C79E; --g-tile-ink: #143E38;
  --g-well: rgba(20,62,56,.13); --g-accent: #FF7B3A; --g-ok: #1FA89B; --g-ok-ink: #0E4E46; --g-bad: #EF6A55;
  --g-font: var(--font); --g-weight: 900; --g-veil-c: 0; --g-veil-e: 0;
  --g-glass: rgba(12,16,28,.52); --g-glass-hi: rgba(12,16,28,.7); --g-glass-ink: #FFFFFF; --g-glass-line: rgba(255,255,255,.24); --g-scrim: rgba(8,12,22,.34);
  --spring: cubic-bezier(.34,1.56,.64,1);
  position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #15202A; color: #FFFFFF; font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}
.gs:fullscreen { width: 100vw; height: 100vh; }

/* ---------- the world behind ---------- */
.gs-back, .gs-bd { position: absolute; inset: 0; }
.gs-bd { opacity: 0; transition: opacity .7s ease; }
.gs-bd.is-in { opacity: 1; }
.gs-bd > .scene { position: absolute; inset: 0; }
.gs-scene .cl-words { display: none; }   /* the breathing words of the sea */
.gs-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #DCF0F9 0%, #FFF8EC 88%); }
.gs-sky i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,123,58,.26), transparent); animation: drift 40s ease-in-out infinite alternate; }
.gs-sky i:nth-child(1) { left: -24vmax; top: -30vmax; }
.gs-sky i:nth-child(2) { right: -28vmax; top: 6vh; background: radial-gradient(closest-side, rgba(79,143,208,.24), transparent); animation-duration: 48s; animation-delay: -12s; }
.gs-sky i:nth-child(3) { left: 16vw; bottom: -42vmax; background: radial-gradient(closest-side, rgba(169,107,255,.18), transparent); animation-duration: 56s; animation-delay: -30s; }
.gs-veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 100% at 50% 52%, rgba(8,12,24,var(--g-veil-c)), rgba(8,12,24,var(--g-veil-e))); }

/* ---------- the bar: glass on any world ---------- */
.gs-bar { position: absolute; z-index: 10; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) clamp(10px, 1.6vw, 22px) 0; pointer-events: none; }
.gs-bar > * { pointer-events: auto; }
.gs-btn { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 2px solid var(--g-glass-line); border-radius: 50%; background: var(--g-glass); color: var(--g-glass-ink); cursor: pointer; text-decoration: none; transition: background .15s, transform .12s; }
.gs-btn:hover { background: var(--g-glass-hi); }
.gs-btn:active { transform: scale(.93); }
.gs-btn svg { width: 21px; height: 21px; }
.gs-btn[aria-pressed="false"] { opacity: .8; }
.gs :focus-visible { outline: 3px solid #FFD27A; outline-offset: 3px; }
.gs-name { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 34vw; padding: 3px 16px 3px 3px; border: 2px solid var(--g-glass-line); border-radius: 99px; background: var(--g-glass); color: var(--g-glass-ink); }
.gs-ico svg { display: block; width: 36px; height: 36px; border-radius: 12px; }
.gs-name-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.gs-name-t b { overflow: hidden; font-size: 15.5px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.gs-name-t small { overflow: hidden; font-size: 12.5px; font-weight: 800; opacity: .78; text-overflow: ellipsis; white-space: nowrap; }
.gs-hud { display: flex; justify-content: center; gap: 6px; margin: 0 auto; min-width: 0; }
.gs-pill { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px 0 13px; border: 2px solid var(--g-glass-line); border-radius: 99px; background: var(--g-glass); color: var(--g-glass-ink); font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-pill svg { width: 20px; height: 20px; color: var(--g-accent); }
.gs-pill-ok svg, .gs-pill-score svg { color: var(--g-pill-ok, #6FE3C5); }
.gs-pill-streak svg { color: #FF9A4D; }
.gs-pill-round svg { opacity: .8; color: inherit; }
.gs-pill-time.is-low { border-color: #FFB3A6; background: rgba(196,52,40,.78); }
.gs-tools { display: flex; gap: 6px; }
.gs-prog { position: absolute; z-index: 11; left: 0; right: 0; top: 0; height: 4px; pointer-events: none; }
.gs-prog i { display: block; height: 100%; background: var(--g-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.3,.9,.3,1); }

/* ---------- the game's place ---------- */
.gs-main { --bar: 74px; position: absolute; inset: var(--bar) clamp(10px, 2vw, 28px) clamp(10px, 2vh, 22px); display: grid; place-items: center; container-type: size; }
.gs.is-intro .gs-main, .gs.is-done .gs-main { pointer-events: none; }
.gs.is-paused .gs-main { opacity: .35; transition: opacity .2s; }

/* ---------- the start and result cards ---------- */
.gs-over { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; overflow: auto; padding: 78px 16px 18px; background: var(--g-scrim); opacity: 0; transition: opacity .3s ease; }
.gs-over.is-in { opacity: 1; }
.gs-card { position: relative; width: min(580px, 100%); padding: clamp(22px, 4vh, 36px) clamp(18px, 4vw, 38px); border-radius: 32px; background: #FFFCF4; color: #143E38; text-align: center; box-shadow: 0 6px 0 rgba(10,30,28,.16), 0 30px 70px -20px rgba(0,0,0,.6); transform: translateY(18px) scale(.97); transition: transform .5s var(--spring); }
.gs-over.is-in .gs-card { transform: none; }
.gs-intro-ico svg { display: block; width: 76px; height: 76px; margin: -2px auto 10px; border-radius: 22px; box-shadow: 0 5px 0 rgba(10,30,28,.14); }
.gs-intro-t, .gs-res-t { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; letter-spacing: -.01em; }
.gs-intro-d { max-width: 40ch; margin: 10px auto 0; color: #4E6964; font-size: 16.5px; font-weight: 750; line-height: 1.45; }
.gs-sets { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding: 16px; border-radius: 22px; background: #F3EEDD; text-align: left; }
.gs-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.gs-set-l { font-size: 14.5px; font-weight: 900; }
.gs-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 99px; background: rgba(20,62,56,.08); }
.gs-seg button { min-height: 34px; padding: 5px 12px; border: 0; border-radius: 99px; background: transparent; color: #143E38; font: inherit; font-size: 13.5px; font-weight: 850; cursor: pointer; }
.gs-seg button:hover { background: rgba(20,62,56,.08); }
.gs-seg button[aria-checked="true"] { background: #143E38; color: #FFFCF4; }
.gs-pick-theme { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 7px 14px 7px 7px; border: 0; border-radius: 22px; background: #F3EEDD; color: #143E38; font: inherit; font-size: 14.5px; cursor: pointer; text-align: left; }
.gs-pick-theme:hover { background: #ECE5CE; }
.gs-swatch { flex: none; width: 64px; height: 40px; border-radius: 15px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.gs-pick-l { font-weight: 900; }
.gs-pick-theme b { flex: 1; min-width: 0; overflow: hidden; color: #4E6964; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.gs-pick-theme svg { width: 18px; height: 18px; color: #4E6964; }
.gs-intro-go, .gs-res-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.gs-go svg { width: 22px; height: 22px; }
.gs-card .btn-ghost { border-color: rgba(20,62,56,.3); color: #143E38; }
.gs-card .btn-primary { color: #143E38; }
.gs-stars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: -4px 0 8px; }
.gs-star svg { display: block; width: 62px; height: 62px; color: rgba(20,62,56,.12); }
.gs-star:nth-child(2) svg { width: 82px; height: 82px; }
.gs-star.is-on svg { color: #F7C33F; filter: drop-shadow(0 4px 0 #D8971A); }
.gs-over.is-in .gs-star.is-on { animation: gsStar .75s var(--spring) both; animation-delay: calc(.38s + var(--i) * .26s); }
@keyframes gsStar { from { opacity: 0; transform: scale(.2) rotate(-50deg); } }
.gs-res-score { margin: 8px 0 0; font-size: 18px; font-weight: 850; }
.gs-res-time { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gs-res-time svg { width: 20px; height: 20px; color: #1FA89B; }
.gs-res-best { padding: 3px 12px; border-radius: 99px; background: #F3EEDD; color: #4E6964; font-size: 14px; }
.gs-res-best.is-new { background: #F7C33F; color: #143E38; animation: gsPop .6s var(--spring) .9s both; }
@keyframes gsPop { from { opacity: 0; transform: scale(.4); } }
.gs-res-miss { margin-top: 18px; text-align: left; }
.gs-res-miss h3 { margin: 0 0 8px; color: #4E6964; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.gs-res-miss > div { display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow: auto; }
.gs-res-miss .ws-chip { background: #F3EEDD; color: #143E38; box-shadow: none; }
.gs-res-miss .ws-chip i { color: #4E6964; }
.gs-res-next { margin-top: 20px; padding-top: 16px; border-top: 2px solid #F0E9D6; }
.gs-res-next p { margin: 0 0 10px; color: #4E6964; font-size: 14px; font-weight: 850; }
.gs-res-next > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gs-res-act { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 99px; background: #F3EEDD; color: #143E38; font-size: 14.5px; font-weight: 900; text-decoration: none; }
.gs-res-act:hover { background: #ECE5CE; }
.gs-res-act svg { display: block; width: 32px; height: 32px; }
.gs-res-all { display: inline-block; margin-top: 12px; color: #0F6E60; font-size: 14px; font-weight: 850; }

/* ---------- the theme sheet ---------- */
.gs-sheet { position: fixed; inset: 0; z-index: 95; display: grid; place-items: end center; background: rgba(8,12,22,.46); opacity: 0; transition: opacity .2s ease; }
.gs-sheet.is-in { opacity: 1; }
.gs-sheet-in { width: min(940px, 100%); max-height: min(80dvh, 680px); overflow: auto; overscroll-behavior: contain; padding: 18px clamp(14px, 3vw, 26px) max(22px, env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: #FFFCF4; color: #143E38; box-shadow: 0 -10px 50px -10px rgba(0,0,0,.4); transform: translateY(40px); transition: transform .4s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.gs-sheet.is-in .gs-sheet-in { transform: none; }
.gs-sheet-head { position: sticky; top: -18px; z-index: 1; display: flex; align-items: center; gap: 12px; margin: -18px -4px 12px; padding: 18px 4px 10px; background: #FFFCF4; }
.gs-sheet-head b { font-family: var(--serif); font-style: italic; font-size: 28px; font-weight: 700; }
.gs-sheet-now { flex: 1; min-width: 0; overflow: hidden; color: #4E6964; font-size: 14.5px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.gs-sheet-x { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #F3EEDD; color: #143E38; cursor: pointer; }
.gs-sheet-x svg { width: 20px; height: 20px; }
.gs-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.gs-th { display: flex; flex-direction: column; border: 2px solid transparent; border-radius: 22px; transition: background .15s; }
.gs-th:hover { background: #F6F1E2; }
.gs-th.is-on { border-color: #FF7B3A; background: #FFF1E6; }
.gs-th-main { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 6px 6px 8px; border: 0; border-radius: 20px; background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 900; text-align: left; cursor: pointer; }
.gs-th-main b { padding: 0 6px; }
.gs-th-sw { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 3px 0 rgba(10,30,28,.1); }
.gs-th-vars { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.gs-th-v { width: 26px; height: 26px; padding: 0; border: 3px solid #FFFCF4; border-radius: 50%; box-shadow: 0 0 0 1px rgba(20,62,56,.18); cursor: pointer; }
.gs-th-v.is-on { box-shadow: 0 0 0 2px #FF7B3A; }
@media (min-width: 700px) { .gs-sheet { place-items: center; padding: 20px; } .gs-sheet-in { border-radius: 30px; } }

/* ---------- motion: sparks, confetti ---------- */
.gs-fx { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.gs-spark { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #FFD54F; will-change: transform, opacity; }
.gs-spark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.gs-spark.is-b { color: #FFFFFF; }
.gs-spark.is-pop { width: 16px; height: 16px; margin: -8px 0 0 -8px; color: var(--g-accent); }
.gs-conf { position: absolute; inset: 0; }
.gs-conf i { position: absolute; top: -14px; width: 10px; height: 15px; border-radius: 2px; animation: gsConf 3s cubic-bezier(.2,.6,.4,1) both; }
@keyframes gsConf { 0% { transform: translate(0, 0) rotate(0) scale(var(--s)); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s)); opacity: 0; } }
.gs-say { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: inherit; cursor: pointer; }
.gs-say:hover { background: rgba(255,255,255,.28); }
.gs-say svg { width: 18px; height: 18px; }

/* ---------- Para ihop: the cards, their places, the tray of tiles ---------- */
.gm {
  --gap: clamp(8px, 1.5cqh, 14px); --tw: clamp(118px, 21cqw, 300px); --cw: clamp(136px, 26cqw, 380px);
  --rh: clamp(46px, calc((100cqh - 84px - (var(--n) - 1) * var(--gap)) / var(--n)), 100px);
  --fs: clamp(15px, calc(var(--rh) * .34), 34px); --rad: clamp(14px, calc(var(--rh) * .24), 22px);
  display: grid; grid-template-columns: auto auto; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-content: center; column-gap: clamp(22px, 4cqw, 64px); row-gap: 14px; width: 100%; height: 100%;
}
.gs[data-mode="board"] .gm { --fs: clamp(16px, calc(var(--rh) * .37), 40px); }
.gm-rows { display: flex; flex-direction: column; gap: var(--gap); }
.gm-row { display: grid; grid-template-columns: var(--cw) 20px var(--tw); align-items: center; height: var(--rh); }
.gm-card { position: relative; display: flex; align-items: center; gap: clamp(8px, 1cqw, 14px); height: 100%; min-width: 0; padding: 0 clamp(10px, 1.2cqw, 16px); border-radius: var(--rad); background: linear-gradient(180deg, var(--g-card), var(--g-card-2)); color: var(--g-card-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 0 var(--g-card-edge), 0 12px 22px -12px rgba(0,0,0,.55); font: var(--g-weight) var(--fs)/1.1 var(--g-font); letter-spacing: -.005em; }
.gm-card.is-pic { justify-content: center; }
.gm-img { flex: none; width: calc(var(--rh) - 16px); height: calc(var(--rh) - 16px); margin-left: -4px; padding: calc(var(--rh) * .07); border-radius: calc(var(--rad) - 5px); background: #FFFCF4; box-shadow: 0 2px 0 rgba(0,0,0,.2); pointer-events: none; user-select: none; }
.gm-card.is-pic .gm-img { width: calc(var(--rh) - 12px); height: calc(var(--rh) - 12px); margin: 0; }
.gm-word, .gm-tile span { --k: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: calc(var(--k) * var(--fit, 1) * 1em); overflow-wrap: normal; hyphens: manual; }
.gm-word { flex: 1; min-width: 0; }
:is(.gm-card, .gm-tile)[data-len="m"] :is(.gm-word, span) { --k: .88; }
:is(.gm-card, .gm-tile)[data-len="l"] :is(.gm-word, span) { --k: .74; -webkit-line-clamp: 3; line-height: 1.15; }
:is(.gm-word, .gm-tile span).is-tight { overflow-wrap: anywhere; }
.gm-card .gm-say { width: calc(var(--rh) * .48); height: calc(var(--rh) * .48); max-width: 40px; max-height: 40px; margin-right: -4px; }
.gm-link { justify-self: start; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 10px solid var(--g-card-2); filter: drop-shadow(0 2px 0 var(--g-card-edge)); transition: transform .3s var(--spring); }
.gm-row.is-right .gm-link { border-left-color: var(--g-ok); transform: translateX(3px) scale(1.15); filter: none; }
.gm-row.is-wrong .gm-link { border-left-color: var(--g-bad); filter: none; }

/* a place pressed into the table: it glows when a tile is over it, and while a tile is chosen */
.gm-well { position: relative; width: var(--tw); height: 100%; padding: 0; border: 0; border-radius: var(--rad); background: var(--g-well); box-shadow: inset 0 3px 7px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.18); cursor: pointer; }
.gm-well::after { content: ""; position: absolute; inset: -5px; border: 3px solid var(--g-accent); border-radius: calc(var(--rad) + 5px); opacity: 0; transform: scale(.96); transition: opacity .16s, transform .25s var(--spring); pointer-events: none; }
.gm-well.is-over::after { opacity: 1; transform: none; }
.gm.is-choosing .gm-well:not(.is-right):not(:has(.is-fixed))::after { opacity: .5; transform: none; animation: gmBreathe 1.4s ease-in-out infinite; }
.gm.is-choosing .gm-well:hover::after { opacity: 1; animation: none; }
@keyframes gmBreathe { 50% { opacity: .2; } }
.gm-mark { position: absolute; z-index: 3; right: -10px; top: -10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #FFFFFF; font-size: 17px; font-weight: 900; line-height: 1; opacity: 0; transform: scale(.3); transition: opacity .2s, transform .45s var(--spring); pointer-events: none; }
.gm-well.is-right .gm-mark { opacity: 1; transform: none; background: var(--g-ok); box-shadow: 0 3px 0 #0E6E64; }
.gm-well.is-right .gm-mark::before { content: "✓"; }
.gm-well.is-wrong .gm-mark { opacity: 1; transform: none; background: var(--g-bad); box-shadow: 0 3px 0 #A83A2B; }
.gm-well.is-wrong .gm-mark::before { content: "!"; }

/* the tray, and the tiles: picked up, they lift and lean; set down, they sit straight in their place */
.gm-tray { display: grid; grid-template-columns: repeat(2, var(--tw)); grid-auto-rows: var(--rh); gap: var(--gap); align-content: center; min-height: 0; }
.gm-slot { position: relative; min-width: 0; }
.gm-tile { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 2px clamp(8px, 1cqw, 14px) 4px; border: 0; border-radius: var(--rad); background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); color: var(--g-tile-ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.05), 0 5px 0 var(--g-tile-edge), 0 13px 18px -9px rgba(0,0,0,.45); font: var(--g-weight) var(--fs)/1.1 var(--g-font); letter-spacing: -.005em; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; rotate: var(--r, 0deg); transition: rotate .3s var(--spring), translate .2s, scale .2s; }
.gm-tile span { max-width: 100%; pointer-events: none; }
.gm-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 24px 34px -12px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; pointer-events: none; }
@media (hover: hover) { .gm-tile:not(:disabled):hover { translate: 0 -2px; } }
.gm-tile.is-drag, .gm-tile.is-sel { z-index: 50; }
.gm-tile.is-drag { translate: none; rotate: none; scale: none; cursor: grabbing; transition: none; }
.gm-tile.is-drag::after, .gm-tile.is-sel::after { opacity: 1; }
.gm-tile.is-sel { translate: 0 -6px; scale: 1.05; rotate: 0deg; outline: 3px solid var(--g-accent); outline-offset: 3px; }
.gm-well .gm-tile { rotate: 0deg; }
.gm-well .gm-tile:not(.is-drag) { box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.05), 0 3px 0 var(--g-tile-edge), 0 6px 10px -6px rgba(0,0,0,.4); }
.gm-tile.is-right { --g-tile: #EAFBF5; --g-tile-2: #CFF2E6; --g-tile-edge: #25A08F; color: var(--g-ok-ink); cursor: default; }
.gm-tile.is-wrong { --g-tile: #FFF0EC; --g-tile-2: #FFD9CF; --g-tile-edge: #E0664B; color: #7A2416; }
.gm-tile.is-fixed { --g-tile: #FFF6E5; --g-tile-2: #FFE8C2; --g-tile-edge: #E0664B; cursor: default; }
.gm-tile:disabled { opacity: 1; }
.gm-row.is-right .gm-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 0 var(--g-card-edge), 0 0 0 3px var(--g-ok), 0 12px 22px -12px rgba(0,0,0,.55); }
.gm-foot { grid-column: 1 / -1; display: flex; justify-content: center; min-height: 0; }
.gm-foot:empty { display: none; }
.gm-foot .btn { min-width: 200px; box-shadow: 0 5px 0 var(--press), 0 14px 24px -10px rgba(0,0,0,.5); }
.gm-foot .btn:disabled { opacity: 1; background: rgba(255,252,244,.7); color: rgba(20,62,56,.55); box-shadow: 0 4px 0 rgba(0,0,0,.18); }

/* a round arrives, is won, leaves */
.gm.is-deal .gm-row { animation: gmRowIn .55s cubic-bezier(.2,.9,.3,1.15) both; animation-delay: calc(var(--i) * 45ms); }
.gm.is-deal .gm-slot { animation: gmTileIn .7s var(--spring) both; animation-delay: calc(180ms + var(--i) * 55ms); }
.gm.is-wave .gm-row { animation: gmWave .62s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 70ms); }
.gm.is-leave .gm-rows { animation: gmOut .42s ease-in both; }
.gm.is-leave .gm-tray, .gm.is-leave .gm-foot { animation: gmFade .3s ease-in both; }
@keyframes gmRowIn { from { opacity: 0; transform: translateX(-30px); } }
@keyframes gmTileIn { from { opacity: 0; transform: translateY(-50px) scale(.85) rotate(-7deg); } }
@keyframes gmWave { 40% { transform: translateY(-10px) scale(1.025); } }
@keyframes gmOut { to { opacity: 0; transform: translateX(46px); } }
@keyframes gmFade { to { opacity: 0; } }

/* tall screens: the words on top, the tray under them */
.gm[data-shape="tall"] {
  --tw: calc((100cqw - var(--gap)) / 2); --cw: 1fr;
  --rh: clamp(44px, calc((100cqh * .56 - (var(--n) - 1) * var(--gap)) / var(--n)), 68px);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; row-gap: clamp(14px, 2.6cqh, 26px);
}
.gm[data-shape="tall"] .gm-row { grid-template-columns: minmax(0, 1fr) var(--tw); column-gap: var(--gap); }
.gm[data-shape="tall"] .gm-link { display: none; }
.gm[data-shape="tall"] .gm-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: clamp(10px, 2cqh, 18px); border-top: 2px solid rgba(255,255,255,.22); }

/* small screens: the bar in two lines (the buttons, then the time and score) */
@media (max-width: 640px) {
  .gs-bar { flex-wrap: wrap; row-gap: 8px; gap: 6px; }
  .gs-name { display: none; }
  .gs-tools { margin-left: auto; }
  .gs-hud { order: 3; width: 100%; }
  .gs-btn { width: 42px; height: 42px; }
  .gs-pill { height: 38px; padding: 0 13px 0 10px; font-size: 16px; }
  .gs-main { --bar: 112px; }
  .gs-over { padding-top: 60px; }
  .gs-card { border-radius: 26px; }
}
@media (pointer: coarse) { .gs-full { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .gs *, .gs *::before, .gs *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- teams along the bottom, and their podium ---------- */
.gs.has-teams .gs-main { bottom: calc(clamp(10px, 2vh, 22px) + 72px); }
.gs-teams { position: absolute; z-index: 9; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px; pointer-events: none; }
.gs-team { position: relative; display: flex; align-items: stretch; border: 2px solid var(--g-glass-line); border-radius: 22px; background: var(--g-glass); color: var(--g-glass-ink); pointer-events: auto; transition: transform .35s var(--spring); }
.gs-team.is-cur { border-color: var(--tc); transform: translateY(-5px); box-shadow: 0 0 0 3px var(--tc); }
.gs-team-main { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 11px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.gs-team-main::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--tc); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.gs-team-n { font-size: 15px; font-weight: 900; white-space: nowrap; }
.gs-team-s { min-width: 1.5em; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; }
.gs-team-minus { width: 30px; border: 0; border-left: 1px solid var(--g-glass-line); background: none; color: inherit; font: inherit; font-size: 18px; font-weight: 900; opacity: .65; cursor: pointer; }
.gs-team-minus:hover { opacity: 1; }
.gs-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; min-height: 210px; margin: -6px 0 10px; }
.gs-pod { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(118px, 24%); }
.gs-pod-crown svg { display: block; width: 36px; height: 36px; color: #F7C33F; filter: drop-shadow(0 3px 0 #D8971A); }
.gs-over.is-in .gs-pod-crown { animation: gsPop .6s var(--spring) 1.1s both; }
.gs-pod-name { font-size: 14px; font-weight: 900; white-space: nowrap; }
.gs-pod-s { font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.gs-pod-step { display: grid; place-items: start center; width: 100%; height: calc(var(--h) * 120px); padding-top: 10px; border-radius: 16px 16px 6px 6px; background: var(--tc); box-shadow: inset 0 -7px 0 rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.3); color: #FFFFFF; transform-origin: bottom; }
.gs-pod-step i { font-size: 26px; font-style: normal; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.gs-over.is-in .gs-pod-step { animation: gsRise .9s var(--spring) var(--d) both; }
@keyframes gsRise { from { transform: scaleY(0); } }

/* ---------- parts the games share: the word card, answer tiles, typing, a card that turns, a note ---------- */
.gx { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3cqh, 30px); width: 100%; height: 100%; }
.gx-q { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4cqh, 14px); width: min(760px, 100%); min-height: clamp(110px, 24cqh, 250px); padding: clamp(14px, 2.6cqh, 26px) clamp(46px, 6cqw, 70px); border-radius: clamp(22px, 3cqh, 32px); background: linear-gradient(180deg, var(--g-card), var(--g-card-2)); color: var(--g-card-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 0 var(--g-card-edge), 0 20px 34px -16px rgba(0,0,0,.6); font: var(--g-weight) clamp(26px, 5.4cqh, 58px)/1.08 var(--g-font); text-align: center; letter-spacing: -.01em; }
.gx-q-img { flex: none; width: clamp(64px, 15cqh, 150px); height: clamp(64px, 15cqh, 150px); padding: clamp(6px, 1.2cqh, 12px); border-radius: clamp(16px, 2.4cqh, 24px); background: #FFFCF4; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.gx-q-word { max-width: 100%; overflow-wrap: anywhere; }
.gx-q-lang { font: 800 clamp(12px, 1.6cqh, 15px)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.gx-q .gs-say { position: absolute; right: 12px; top: 12px; width: 42px; height: 42px; }
.gx-q.is-in { animation: gxIn .55s var(--spring) both; }
@keyframes gxIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.gx-tile { position: relative; border: 0; border-radius: clamp(16px, 2.2cqh, 22px); background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); color: var(--g-tile-ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.05), 0 5px 0 var(--g-tile-edge), 0 13px 18px -9px rgba(0,0,0,.45); font: var(--g-weight) clamp(17px, 3.2cqh, 32px)/1.1 var(--g-font); letter-spacing: -.005em; cursor: pointer; user-select: none; -webkit-user-select: none; transition: translate .15s, scale .15s, opacity .3s; }
@media (hover: hover) { .gx-tile:not(:disabled):hover { translate: 0 -2px; } }
.gx-tile:active:not(:disabled) { translate: 0 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 var(--g-tile-edge), 0 6px 10px -6px rgba(0,0,0,.4); }
.gx-tile:disabled { cursor: default; }
.gx-tile.is-right { --g-tile: #EAFBF5; --g-tile-2: #CFF2E6; --g-tile-edge: #25A08F; color: var(--g-ok-ink); }
.gx-tile.is-wrong { --g-tile: #FFF0EC; --g-tile-2: #FFD9CF; --g-tile-edge: #E0664B; color: #7A2416; }
.gx-tile.is-dim { opacity: .4; }
.gx-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.8cqh, 18px); width: min(900px, 100%); }
.gx-opt { display: flex; align-items: center; gap: 14px; min-height: clamp(62px, 11cqh, 112px); padding: 10px 18px; text-align: left; }
.gx-opt kbd { display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 10px; background: rgba(20,62,56,.08); font: 900 .62em var(--font); }
.gx-opt span { min-width: 0; overflow-wrap: anywhere; }
.gx-type { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(680px, 100%); }
.gx-type-row { display: flex; gap: 10px; }
.gx-type-in { flex: 1; min-width: 0; height: clamp(58px, 10cqh, 84px); padding: 0 22px; border: 0; border-radius: 22px; background: #FFFCF4; color: #143E38; box-shadow: inset 0 3px 7px rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.35); font: 800 clamp(22px, 4.4cqh, 38px) var(--g-font); outline: none; }
.gx-type-in:focus { box-shadow: inset 0 3px 7px rgba(0,0,0,.2), 0 0 0 4px var(--g-accent); }
.gx-type-go { flex: none; min-width: 120px; font-size: 18px; }
.gx-type[data-state="ok"] .gx-type-in { background: #EAFBF5; color: var(--g-ok-ink); }
.gx-type[data-state="close"] .gx-type-in { background: #FFF6E5; color: #6B4A12; }
.gx-type[data-state="bad"] .gx-type-in { background: #FFF0EC; color: #7A2416; }
.gx-accents { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gx-accents button { min-width: 44px; height: 44px; padding: 0 10px; border: 2px solid var(--g-glass-line); border-radius: 14px; background: var(--g-glass); color: var(--g-glass-ink); font: 800 20px var(--font); cursor: pointer; }
.gx-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; max-width: min(680px, 100%); padding: 12px 18px; border-radius: 20px; background: #FFFCF4; color: #143E38; box-shadow: 0 4px 0 rgba(10,30,28,.14), 0 14px 26px -14px rgba(0,0,0,.5); font-size: clamp(16px, 2.4cqh, 22px); font-weight: 800; text-align: center; animation: gxIn .45s var(--spring) both; }
.gx-note b { font-family: var(--g-font); font-weight: var(--g-weight); font-size: 1.2em; }
.gx-note .gx-note-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--g-bad); color: #FFFFFF; }
.gx-note.is-ok .gx-note-ico { background: var(--g-ok); }
.gx-note.is-close .gx-note-ico { background: #F2A541; }
.gx-note .gx-note-ico svg { width: 20px; height: 20px; }
.gx-glass { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid var(--g-glass-line); border-radius: 99px; background: var(--g-glass); color: var(--g-glass-ink); font-size: clamp(14px, 2cqh, 18px); font-weight: 900; }
.gx-glass i { width: 12px; height: 12px; border-radius: 50%; background: var(--tc, var(--g-accent)); }
.gx-flip { position: relative; perspective: 1600px; }
.gx-flip-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s var(--spring); }
.gx-flip.is-flipped > .gx-flip-in { transform: rotateY(180deg); }
.gx-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6cqh, 16px); padding: 20px; border-radius: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.gx-face.is-back { transform: rotateY(180deg); }

/* ---------- Hitta matchen ---------- */
.fm { justify-content: flex-start; gap: clamp(10px, 2.4cqh, 24px); padding-top: clamp(0px, 1cqh, 12px); }
.fm-turn { min-height: 0; }
.fm-q { display: grid; width: min(720px, 100%); }
.fm-q .gx-q { min-height: clamp(96px, 23cqh, 240px); }
.fm-q .gx-q.is-out { animation: fmOut .26s ease-in forwards; }
.fm-tiles { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(8px, 1.6cqh, 16px); width: min(1120px, 100%); }
.fm-tile { display: grid; place-items: center; min-height: clamp(54px, 10cqh, 104px); padding: 6px 14px 8px; text-align: center; }
.fm-tile span { --k: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font-size: calc(var(--k) * var(--fit, 1) * 1em); overflow-wrap: normal; pointer-events: none; }
.fm-tile span.is-tight { overflow-wrap: anywhere; }
.fm-tile.is-pop { animation: fmPop .3s ease-in forwards; pointer-events: none; }
.fm.is-deal .fm-tile { animation: gmTileIn .6s var(--spring) both; animation-delay: calc(110ms + var(--i) * 40ms); }
.fm.is-leave > * { animation: gmFade .35s ease-in both; }
@keyframes fmPop { 35% { transform: scale(1.14); } to { transform: scale(.2); opacity: 0; } }
@keyframes fmOut { to { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* ---------- Memory ---------- */
.mm { gap: clamp(8px, 1.6cqh, 16px); }
.mm-grid { display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); grid-auto-rows: calc(var(--cw) / 1.3); gap: var(--gap); justify-content: center; }
.mm-card { padding: 0; border: 0; border-radius: clamp(14px, calc(var(--cw) * .1), 22px); background: none; cursor: pointer; transition: translate .3s var(--spring); }
.mm-card .gx-flip-in { border-radius: inherit; }
.mm-back { background: linear-gradient(160deg, var(--g-card), var(--g-card-2)); box-shadow: inset 0 0 0 4px rgba(255,252,244,.16), 0 5px 0 var(--g-card-edge), 0 12px 18px -10px rgba(0,0,0,.5); color: var(--g-accent); }
.mm-back svg { width: 32%; height: 32%; fill: currentColor; }
@media (hover: hover) { .mm-card:not(.is-flipped):hover { translate: 0 -3px; } }
.mm-front { background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); color: var(--g-tile-ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 var(--g-tile-edge), 0 12px 18px -10px rgba(0,0,0,.45); font: var(--g-weight) clamp(15px, calc(var(--cw) * .135), 36px)/1.1 var(--g-font); text-align: center; }
.mm-front.is-ans { background: linear-gradient(180deg, #FFF7E6, #FFEACB); }
.mm-img { width: 64%; height: 64%; object-fit: contain; pointer-events: none; }
.mm-img.is-small { width: 38%; height: 38%; }
.mm-word { --k: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 100%; font-size: calc(var(--k) * var(--fit, 1) * 1em); overflow-wrap: normal; }
.mm-word.is-tight { overflow-wrap: anywhere; }
.mm-card.is-found { translate: 0 -4px; cursor: default; }
.mm-card.is-found .mm-front { box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 var(--g-tile-edge), 0 0 0 4px var(--g-ok), 0 14px 22px -10px rgba(0,0,0,.45); }
.mm.is-deal .mm-card { animation: gmTileIn .55s var(--spring) both; animation-delay: calc(70ms + var(--i) * 26ms); }
.mm.is-won .mm-card { animation: gmWave .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 30ms); }

/* ---------- Kort ---------- */
.fc { gap: clamp(16px, 3.4cqh, 32px); }
.fc-deck { position: relative; width: min(660px, 100%, 92cqh); aspect-ratio: 1.5; }
.fc-slot { position: absolute; inset: 0; }
.fc-under { position: absolute; inset: 0; border-radius: 32px; background: var(--g-card-2); box-shadow: 0 6px 0 var(--g-card-edge); opacity: .45; transform: translateY(18px) scale(.92); }
.fc-u1 { opacity: .7; transform: translateY(9px) scale(.96); }
.fc-card { position: absolute; inset: 0; border-radius: 32px; outline-offset: 6px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fc-card.is-in { animation: fcIn .55s var(--spring) both; }
.fc-face { padding: clamp(18px, 3cqh, 30px) clamp(26px, 4cqw, 40px); background: linear-gradient(180deg, var(--g-card), var(--g-card-2)); color: var(--g-card-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 0 var(--g-card-edge), 0 24px 38px -16px rgba(0,0,0,.6); font: var(--g-weight) clamp(28px, 7cqh, 66px)/1.08 var(--g-font); text-align: center; letter-spacing: -.01em; }
.fc-back { background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); color: var(--g-tile-ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 6px 0 var(--g-tile-edge), 0 24px 38px -16px rgba(0,0,0,.55); }
.fc-img { flex: none; width: clamp(70px, 19cqh, 176px); height: clamp(70px, 19cqh, 176px); padding: clamp(6px, 1.4cqh, 12px); border-radius: clamp(16px, 2.6cqh, 26px); background: #FFFCF4; box-shadow: 0 3px 0 rgba(0,0,0,.2); pointer-events: none; }
.fc-word { --k: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 100%; font-size: calc(var(--k) * var(--fit, 1) * 1em); overflow-wrap: normal; }
.fc-word.is-tight { overflow-wrap: anywhere; }
.fc-small { font: 800 clamp(13px, 2cqh, 18px)/1.2 var(--font); letter-spacing: 0; opacity: .6; }
.fc-face .gs-say { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; }
.fc-back .gs-say { background: rgba(20,62,56,.08); }
.fc-tag { position: absolute; z-index: 2; top: 18px; padding: 6px 14px; border-radius: 99px; color: #FFFFFF; font-size: 15px; font-weight: 900; pointer-events: none; }
.fc-tag-yes { right: 18px; background: var(--g-ok); opacity: var(--yes, 0); transform: rotate(8deg); }
.fc-tag-no { left: 18px; background: var(--g-bad); opacity: var(--no, 0); transform: rotate(-8deg); }
.fc-go { display: flex; gap: 12px; width: min(660px, 100%); }
.fc-btn { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: clamp(52px, 9cqh, 64px); padding: 8px 16px 10px; font-size: clamp(15px, 2.4cqh, 20px); }
.fc-btn svg { flex: none; width: 22px; height: 22px; }
.fc-no { --g-tile: #FFF1ED; --g-tile-2: #FFE1D9; --g-tile-edge: #E0664B; color: #7A2416; }
.fc-yes { --g-tile: #EAFBF5; --g-tile-2: #D3F3E8; --g-tile-edge: #25A08F; color: var(--g-ok-ink); }
.fc:not(.is-turned) :is(.fc-no, .fc-yes) { opacity: .6; }
.fc.is-turned .fc-turn { opacity: .75; }
.fc.is-done .fc-deck { animation: gmFade .35s ease-in both; }
@keyframes fcIn { from { opacity: 0; transform: translateY(28px) scale(.94); } }
@media (max-width: 560px) { .fc-deck { aspect-ratio: 1.05; } .fc-turn span { display: none; } }

/* ---------- Lär dig ---------- */
.ln { justify-content: flex-start; gap: clamp(12px, 2.6cqh, 26px); }
.ln-path { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(900px, 100%); }
.ln-beads { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 12px; border: 2px solid var(--g-glass-line); border-radius: 99px; background: var(--g-glass); }
.ln-bead { width: clamp(10px, 1.6cqh, 16px); height: clamp(10px, 1.6cqh, 16px); border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); transition: background-color .3s, box-shadow .3s; }
.gs[data-gtheme="classic"] .ln-bead { background: rgba(20,62,56,.08); box-shadow: inset 0 0 0 2px rgba(20,62,56,.25); }
.ln-bead[data-lv="0"] { background: var(--g-bad); box-shadow: none; }
.ln-bead[data-lv="1"] { background: #F7C33F; box-shadow: none; }
.ln-bead[data-lv="2"] { background: #6FD0B9; box-shadow: none; }
.ln-bead[data-lv="3"] { background: var(--g-ok); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.ln-bead.is-cur { outline: 2px solid var(--g-glass-ink); outline-offset: 2px; }
.ln-count { margin: 0; color: var(--g-glass-ink); font-size: 14px; font-weight: 900; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.gs[data-gtheme="classic"] .ln-count { text-shadow: none; }
.ln-ask { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2cqh, 20px); width: 100%; }
.ln-lang, .ln-in { margin: 0 0 -4px; padding: 4px 12px; border-radius: 99px; background: var(--g-glass); color: var(--g-glass-ink); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ln-new { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--g-accent); color: #143E38; letter-spacing: .04em; }
.ln-ask .gx-q { min-height: clamp(96px, 22cqh, 220px); }
.ln-opts .gx-opt { animation: gxIn .45s var(--spring) both; animation-delay: calc(var(--i) * 50ms); }
.gx-opt span { --k: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: calc(var(--k) * var(--fit, 1) * 1em); overflow-wrap: normal; }
.gx-opt span.is-tight { overflow-wrap: anywhere; }
.ln .gx-note .btn { margin-left: 4px; }
@media (max-width: 560px) { .gx-opts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Skriv och stava ---------- */
.wr { gap: clamp(12px, 2.6cqh, 26px); }
.wr-q { display: grid; width: min(720px, 100%); }
.wr-q .gx-q { min-height: clamp(96px, 22cqh, 220px); }
.wr-work { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.4cqh, 24px); width: 100%; }
.wr-slots { --gap: clamp(3px, 1cqw, 8px); --s: min(74px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n)), 11cqh); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.wr-slot { display: grid; place-items: center; width: var(--s); height: calc(var(--s) * 1.16); border-radius: calc(var(--s) * .24); background: var(--g-well); box-shadow: inset 0 3px 7px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.22); color: var(--g-tile-ink); font: var(--g-weight) calc(var(--s) * .62)/1 var(--g-font); }
.wr-slot.is-next { box-shadow: inset 0 3px 7px rgba(0,0,0,.28), 0 0 0 3px var(--g-accent); }
.wr-slot.is-on { background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--g-tile-edge), 0 10px 14px -8px rgba(0,0,0,.45); }
.wr-slot.is-hint { box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 var(--g-accent), 0 10px 14px -8px rgba(0,0,0,.45); }
.wr-slots.is-done .wr-slot { background: linear-gradient(180deg, #EAFBF5, #CFF2E6); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 4px 0 #25A08F, 0 10px 14px -8px rgba(0,0,0,.45); color: var(--g-ok-ink); animation: gmWave .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 45ms); }
.wr-gap { width: calc(var(--s) * .42); }
.wr-fixed { display: grid; place-items: end center; height: calc(var(--s) * 1.16); color: var(--g-glass-ink); font: var(--g-weight) calc(var(--s) * .62)/1 var(--g-font); text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.wr-tiles { --t: clamp(44px, 9cqh, 76px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.3cqh, 12px); max-width: min(780px, 100%); }
.wr-tile { display: grid; place-items: center; width: var(--t); height: var(--t); padding: 0; font-size: calc(var(--t) * .5); animation: gmTileIn .55s var(--spring) both; animation-delay: calc(80ms + var(--i) * 35ms); }
.wr-tile.is-used { opacity: 0; scale: .5; pointer-events: none; }
.wr-in { margin: 0 0 -4px; padding: 4px 12px; border-radius: 99px; background: var(--g-glass); color: var(--g-glass-ink); font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.wr-again { flex-basis: 100%; font-size: .82em; opacity: .75; }
.wr-tools { display: flex; justify-content: center; gap: 10px; margin-top: clamp(0px, 2cqh, 20px); }
.wr-tools .gx-glass { min-height: 46px; font-family: inherit; cursor: pointer; }
.wr-tools .gx-glass:hover { background: var(--g-glass-hi); }
.wr-hint svg { width: 20px; height: 20px; color: var(--g-accent); }
.wr.is-leave > * { animation: gmFade .35s ease-in both; }

/* ---------- the board games' big card (game/reveal.js): out of the box or the wheel, turned to its match ---------- */
.gr { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; }
.gr-scrim { position: absolute; inset: -60px; background: var(--g-scrim); opacity: 0; transition: opacity .3s ease; }
.gr.is-in .gr-scrim { opacity: 1; }
.gr-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2cqh, 22px); width: min(780px, 100%); }
.gr-top { margin: 0; opacity: 0; transition: opacity .3s ease .2s; }
.gr-card { width: min(100%, 58cqh * 1.7); aspect-ratio: 1.7; border-radius: clamp(24px, 3.4cqh, 36px); }
.gr-card .gx-flip-in { border-radius: inherit; }
.gr-face { padding: clamp(18px, 3cqh, 30px) clamp(48px, 7cqw, 70px); background: linear-gradient(180deg, var(--g-card), var(--g-card-2)); color: var(--g-card-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 7px 0 var(--g-card-edge), 0 30px 50px -18px rgba(0,0,0,.65); text-align: center; cursor: pointer; }
.gr-back { background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); color: var(--g-tile-ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 7px 0 var(--g-tile-edge), 0 30px 50px -18px rgba(0,0,0,.6); cursor: default; }
.gr-lang { position: absolute; left: 20px; top: 18px; font: 900 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.gr-img { flex: none; width: clamp(70px, 17cqh, 170px); height: clamp(70px, 17cqh, 170px); padding: clamp(6px, 1.3cqh, 12px); border-radius: clamp(16px, 2.6cqh, 26px); background: #FFFCF4; box-shadow: 0 3px 0 rgba(0,0,0,.2); pointer-events: none; }
.gr-word { max-width: 100%; font: var(--g-weight) clamp(26px, calc(13cqh - var(--len, 6) * .26cqh), 96px)/1.05 var(--g-font); letter-spacing: -.01em; overflow-wrap: break-word; }
.gr-img + .gr-word { font-size: clamp(24px, calc(10cqh - var(--len, 6) * .2cqh), 72px); }
.gr-small { font: 800 clamp(15px, 2.4cqh, 22px)/1.2 var(--font); opacity: .6; }
.gr-face .gr-say { position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; }
.gr-back .gr-say { background: rgba(20,62,56,.08); }
.gr-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; opacity: 0; transition: opacity .3s ease .25s; }
.gr.is-in .gr-go, .gr.is-in .gr-top { opacity: 1; }
.gr-btn { display: inline-flex; align-items: center; gap: 10px; min-height: clamp(52px, 8.6cqh, 64px); padding: 8px 26px 10px; font-size: clamp(17px, 2.7cqh, 23px); }
.gr-show { --g-tile: #FF9A5C; --g-tile-2: #FF7B3A; --g-tile-edge: #C2541E; color: #FFFFFF; }
.gr-yes { --g-tile: #3FC7B5; --g-tile-2: #1FA89B; --g-tile-edge: #127A70; color: #FFFFFF; }
.gr-yes i { width: 16px; height: 16px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2.5px #FFFFFF; }
.gr.is-out .gr-scrim { opacity: 0; }
.gr.is-out .gr-in { animation: grOut .3s ease-in forwards; }
@keyframes grOut { to { opacity: 0; transform: translateY(14px) scale(.92); } }

/* ---------- Frågesport-show ---------- */
.qz { justify-content: flex-start; gap: clamp(8px, 1.9cqh, 20px); }
.qz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(1000px, 100%); min-height: 54px; }
.qz-turn { flex: 1; display: flex; justify-content: center; }
.qz-clock { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border: 2px solid var(--g-glass-line); border-radius: 50%; background: var(--g-glass); color: var(--g-glass-ink); font-size: 25px; font-weight: 900; font-variant-numeric: tabular-nums; }
.qz-clock.is-low { border-color: #FFB3A6; background: rgba(196,52,40,.86); color: #FFFFFF; }
.qz-q { display: grid; width: min(760px, 100%); }
.qz-q .gx-q { min-height: clamp(92px, 21cqh, 230px); }
.qz-q .gx-q.is-out { animation: fmOut .26s ease-in forwards; }
.qz-bar { width: min(760px, 100%); height: 12px; margin-top: -4px; overflow: hidden; border: 2px solid var(--g-glass-line); border-radius: 99px; background: var(--g-glass); }
.qz-bar i { display: block; height: 100%; border-radius: 99px; background: var(--g-accent); transform-origin: left; }
.qz-bar.is-low i { background: var(--g-bad); }
.qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.8cqh, 18px); width: min(1000px, 100%); }
.qz-opts:not(.is-in) .qz-opt { visibility: hidden; }
.qz-opts.is-in .qz-opt { animation: qzIn .5s var(--spring) backwards; animation-delay: calc(var(--i) * 95ms); }
.qz-opts.is-out .qz-opt { animation: gmFade .25s ease-in both; }
@keyframes qzIn { from { opacity: 0; transform: translateY(26px) scale(.9); } }
.qz-opt { display: flex; align-items: center; gap: clamp(10px, 1.6cqw, 18px); min-height: clamp(60px, 14.5cqh, 140px); padding: 10px clamp(12px, 2cqw, 22px); font-size: clamp(18px, 4cqh, 42px); text-align: left; }
.qz-opt[data-c="0"] { --g-tile: #F68A70; --g-tile-2: #EC6A4F; --g-tile-edge: #B94A33; --g-tile-ink: #FFFFFF; }
.qz-opt[data-c="1"] { --g-tile: #FFD45E; --g-tile-2: #F5BB2E; --g-tile-edge: #C48A0E; --g-tile-ink: #3B2A05; }
.qz-opt[data-c="2"] { --g-tile: #4CC6B8; --g-tile-2: #2FA597; --g-tile-edge: #1D7A70; --g-tile-ink: #FFFFFF; }
.qz-opt[data-c="3"] { --g-tile: #4A75DE; --g-tile-2: #2A55C6; --g-tile-edge: #1A388C; --g-tile-ink: #FFFFFF; }
.qz-opt { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.08), 0 5px 0 var(--g-tile-edge), 0 13px 18px -9px rgba(0,0,0,.45); }
.qz-shape { display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: rgba(0,0,0,.15); }
.qz-shape svg { width: 60%; height: 60%; color: rgba(255,255,255,.96); }
.qz-opt[data-c="1"] .qz-shape svg { color: #3B2A05; }
.qz-a { --k: 1; flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: calc(var(--k) * var(--fit, 1) * 1em); overflow-wrap: normal; }
.qz-a.is-tight { overflow-wrap: anywhere; }
.qz-opt kbd { display: grid; place-items: center; flex: none; width: 1.4em; height: 1.4em; border-radius: 10px; background: rgba(0,0,0,.12); font: 900 .5em var(--font); opacity: .8; }
.qz-mark { position: absolute; right: -10px; top: -12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; color: var(--g-ok); box-shadow: 0 3px 0 rgba(0,0,0,.2); animation: gsPop .45s var(--spring) both; }
.qz-mark:empty { display: none; }
.qz-mark svg { width: 24px; height: 24px; }
.qz-bad .qz-mark { color: var(--g-bad); }
.qz-opt.qz-ok { z-index: 1; translate: 0 -6px; scale: 1.03; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 5px 0 var(--g-tile-edge), 0 0 0 5px #FFFFFF, 0 20px 28px -10px rgba(0,0,0,.5); }
.qz-opt.is-dim { opacity: .3; }
.qz-opt.qz-bad { opacity: .75; }
.qz-opt.is-gone { opacity: 0; scale: .8; pointer-events: none; }
.qz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: min(1000px, 100%); margin-top: auto; }
.qz-life { display: flex; gap: 8px; }
.qz-l { min-height: 46px; font-family: inherit; cursor: pointer; }
.qz-l:hover:not(:disabled) { background: var(--g-glass-hi); }
.qz-l svg { width: 20px; height: 20px; color: var(--g-accent); }
.qz-l.is-used { opacity: .4; cursor: default; text-decoration: line-through; }
.qz-go { min-width: 210px; margin-left: auto; }
.qz.is-leave > * { animation: gmFade .35s ease-in both; }
@media (max-width: 520px) { .qz-opts { grid-template-columns: minmax(0, 1fr); } .qz-go { min-width: 0; flex: 1; } }

/* ---------- Öppna lådan: wrapped boxes, a lid with a bow, the word peeking out of an open one ---------- */
.bx { gap: clamp(8px, 1.6cqh, 16px); }
.bx-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: calc(var(--cols) * var(--s) + (var(--cols) - 1) * var(--gap) + 1px); }
.bx-box { position: relative; width: var(--s); height: calc(var(--s) * 1.04); padding: 0; border: 0; background: none; cursor: pointer; transition: translate .25s var(--spring); }
@media (hover: hover) { .bx-box:not(.is-open):hover { translate: 0 -4px; } .bx-box:not(.is-open):hover .bx-lid { transform: translateY(-7%) rotate(-3deg); } }
.bx-body { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 0; height: 70%; border-radius: 9% / 12%; background: linear-gradient(90deg, transparent 43%, rgba(255,252,244,.94) 43% 57%, transparent 57%), linear-gradient(180deg, var(--c), var(--c2)); box-shadow: inset 0 -7px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.25), 0 12px 18px -9px rgba(0,0,0,.55); }
.bx-n { position: absolute; left: 50%; top: 52%; display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #FFFCF4; color: #143E38; box-shadow: 0 3px 0 rgba(0,0,0,.16); font: var(--g-weight) calc(var(--s) * .19)/1 var(--g-font); translate: -50% -50%; }
.bx-lid { position: absolute; z-index: 3; left: 2%; right: 2%; top: 13%; height: 21%; border-radius: 12% / 32%; background: linear-gradient(90deg, transparent 42%, rgba(255,252,244,.96) 42% 58%, transparent 58%), linear-gradient(180deg, var(--c), var(--c2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 5px 0 rgba(0,0,0,.14); transform-origin: 18% 100%; transition: transform .6s var(--spring), opacity .45s ease; }
.bx-bow { position: absolute; left: 50%; bottom: 82%; width: 58%; translate: -50% 0; }
.bx-in { position: absolute; z-index: 1; left: 12%; right: 12%; bottom: 10%; height: 56%; display: grid; place-items: start center; padding: 7% 6px 6px; border-radius: 10% / 14%; background: #FFFCF4; color: #143E38; box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); opacity: 0; transform: translateY(20%); transition: transform .55s var(--spring) .12s, opacity .25s ease .12s; }
.bx-word { --k: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font: var(--g-weight) calc(var(--s) * .12 * var(--k) * var(--fit, 1))/1.1 var(--g-font); text-align: center; overflow-wrap: normal; }
.bx-word.is-tight { overflow-wrap: anywhere; }
.bx-box.is-open { cursor: default; }
.bx-box.is-open .bx-lid { transform: translate(-34%, -150%) rotate(-32deg); opacity: 0; }
.bx-box.is-open .bx-in { opacity: 1; transform: translateY(-46%); }
.bx-box.is-open .bx-n { opacity: .55; }
.bx-box.is-right .bx-in { background: #EAFBF5; color: var(--g-ok-ink); box-shadow: 0 0 0 3px var(--g-ok), 0 4px 10px -4px rgba(0,0,0,.4); }
.bx-turn { min-height: 0; }
.bx.is-deal .bx-box { animation: gmTileIn .6s var(--spring) both; animation-delay: calc(80ms + var(--i) * 35ms); }
.bx.is-won .bx-box { animation: gmWave .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 40ms); }

/* ---------- Ordhjulet ---------- */
.wh { flex-direction: row; gap: clamp(14px, 3cqw, 44px); }
.wh-wheel { display: grid; place-items: center; flex: none; width: min(100cqh, 62cqw); height: min(100cqh, 62cqw); }
.wh-side { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.wh-spin { display: inline-flex; align-items: center; gap: 12px; min-height: 70px; padding: 10px 34px 12px; --g-tile: #FF9A5C; --g-tile-2: #FF7B3A; --g-tile-edge: #C2541E; color: #FFFFFF; font-size: clamp(20px, 3.4cqh, 30px); }
.wh-spin svg { width: 1.1em; height: 1.1em; }
.wh-spin:disabled { opacity: .55; }
.wh-left { margin: 0; text-align: center; }
@container (orientation: portrait) { .wh { flex-direction: column; } .wh-wheel { width: min(100cqw, 70cqh); height: min(100cqw, 70cqh); } }

/* ---------- Flygplanet: three lanes, the ship on a spring, the answers flying in ---------- */
.ap { justify-content: flex-start; gap: clamp(10px, 2cqh, 18px); }
.ap-q { display: grid; width: min(720px, 100%); }
.ap-q .gx-q { min-height: clamp(74px, 16cqh, 170px); padding-top: clamp(10px, 1.8cqh, 18px); padding-bottom: clamp(10px, 1.8cqh, 18px); font-size: clamp(24px, 4.6cqh, 50px); }
.ap-q .gx-q-img { width: clamp(50px, 10cqh, 104px); height: clamp(50px, 10cqh, 104px); }
.ap-ans { padding: 2px 16px 4px; border-radius: 99px; background: var(--g-ok); color: #FFFFFF; font-size: .62em; animation: gsPop .45s var(--spring) both; }
.ap-field { --sw: clamp(70px, min(15cqw, 30cqh), 170px); position: relative; flex: 1; width: 100%; min-height: 0; overflow: hidden; border: 2px solid var(--g-glass-line); border-radius: clamp(20px, 3cqh, 30px); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.gs[data-gtheme="classic"] .ap-field { border-color: rgba(20,62,56,.12); background: rgba(255,255,255,.4); }
.ap-lanes i { position: absolute; left: 3%; right: 3%; top: 33.333%; border-top: 3px dashed var(--g-glass-line); }
.ap-lanes i + i { top: 66.666%; }
.ap-deco i { position: absolute; left: 0; top: 0; will-change: transform; }
.ap[data-veh="plane"] .ap-deco i { width: calc(60px + var(--k) * 9px); height: calc(22px + var(--k) * 3px); margin: -14px 0 0 -40px; border-radius: 99px; background: rgba(255,255,255,.5); }
.ap[data-veh="plane"] .ap-deco i::before { content: ""; position: absolute; left: 22%; bottom: 40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: inherit; }
.gs[data-gtheme="classic"] .ap[data-veh="plane"] .ap-deco i { background: rgba(79,143,208,.16); }
.ap[data-veh="rocket"] .ap-deco i { width: calc(26px + var(--k) * 6px); height: 3px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,0)); }
.ap[data-veh="sub"] .ap-deco i { width: calc(8px + var(--k) * 2px); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(255,255,255,.12); }
.ap-ship { position: absolute; z-index: 2; left: 3.5%; top: 50%; width: var(--sw); height: calc(var(--sw) * .5333); margin-top: calc(var(--sw) * -.2667); filter: drop-shadow(0 8px 8px rgba(0,0,0,.28)); will-change: transform; pointer-events: none; }
.ap-ship svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ap-prop { transform-box: fill-box; transform-origin: center; animation: apProp .1s linear infinite alternate; }
.ap-flame { transform-box: fill-box; transform-origin: right center; animation: apFlame .15s ease-in-out infinite alternate; }
@keyframes apProp { to { transform: scaleY(.22); } }
@keyframes apFlame { from { transform: scaleX(.72); } to { transform: scaleX(1.12); } }
.ap-ship.is-hurt { animation: apHurt .14s steps(1) 5; }
@keyframes apHurt { 50% { opacity: .3; } }
.ap-waves { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ap-wave { position: absolute; left: 0; top: 0; width: var(--cw); height: 100%; will-change: transform; }
.ap-cloud { position: absolute; left: 0; display: grid; place-items: center; width: var(--cw); height: var(--ch); padding: 6px 20px; border-radius: 999px; background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); color: var(--g-tile-ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 var(--g-tile-edge), 0 14px 20px -10px rgba(0,0,0,.45); font: var(--g-weight) clamp(16px, 3.1cqh, 32px)/1.1 var(--g-font); text-align: center; transition: opacity .3s; }
.ap[data-veh="plane"] .ap-cloud { padding: calc(var(--ch) * .3) 13% calc(var(--ch) * .1); background: none; box-shadow: none; isolation: isolate; filter: drop-shadow(0 12px 10px rgba(0,0,0,.16)); }
.ap[data-veh="plane"] .ap-cloud::before, .ap[data-veh="plane"] .ap-cloud::after { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M28 96C12 96 3 84 5 71c2-11 12-18 23-17 0-17 15-29 32-26 8-16 31-24 49-13 12-9 33-8 44 7 19-2 35 12 34 30 10 3 15 13 12 24-3 12-13 20-26 20z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M28 96C12 96 3 84 5 71c2-11 12-18 23-17 0-17 15-29 32-26 8-16 31-24 49-13 12-9 33-8 44 7 19-2 35 12 34 30 10 3 15 13 12 24-3 12-13 20-26 20z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ap[data-veh="plane"] .ap-cloud::before { background: var(--g-tile-edge); translate: 0 5px; }
.ap[data-veh="plane"] .ap-cloud::after { background: linear-gradient(180deg, var(--g-tile), var(--g-tile-2)); }
.ap[data-veh="plane"] .ap-cloud.is-show::before { background: var(--g-ok); translate: 0 6px; }
.ap[data-veh="sub"] .ap-cloud { background: radial-gradient(circle at 26% 22%, #FFFFFF 0 8%, var(--g-tile) 30%, var(--g-tile-2)); }
.ap[data-veh="rocket"] .ap-cloud { box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 var(--g-tile-edge), 0 0 0 4px rgba(255,255,255,.18), 0 14px 20px -10px rgba(0,0,0,.45); }
.ap-cloud span { --k: 1; position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font-size: calc(var(--k) * var(--fit, 1) * 1em); overflow-wrap: normal; }
.ap-cloud span.is-tight { overflow-wrap: anywhere; }
.ap-cloud.is-right, .ap-cloud.is-show { --g-tile: #EAFBF5; --g-tile-2: #CFF2E6; --g-tile-edge: #25A08F; color: var(--g-ok-ink); }
.ap-cloud.is-right { animation: apBurst .5s ease-out forwards; }
.ap-cloud.is-show { box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 5px 0 var(--g-tile-edge), 0 0 0 4px var(--g-ok), 0 14px 20px -10px rgba(0,0,0,.45); }
.ap-cloud.is-wrong { --g-tile: #FFF0EC; --g-tile-2: #FFD9CF; --g-tile-edge: #E0664B; color: #7A2416; animation: apOut .6s ease-in .25s forwards; }
.ap-wave.is-hit .ap-cloud:not(.is-right):not(.is-wrong):not(.is-show) { opacity: .3; }
@keyframes apBurst { 30% { transform: scale(1.12); } to { transform: scale(1.3); opacity: 0; } }
@keyframes apOut { to { opacity: 0; transform: translateY(24px) scale(.9); } }
.ap-tip { position: absolute; z-index: 3; left: 50%; bottom: 12px; margin: 0; white-space: nowrap; translate: -50% 0; transition: opacity .5s ease; pointer-events: none; }
.ap-tip.is-gone { opacity: 0; }
.ap.is-crash .ap-ship { opacity: .45; }

/* ---------- the themes' colours ---------- */
.gs[data-gtheme="classic"] { --g-glass: rgba(255,252,244,.86); --g-glass-hi: #FFFFFF; --g-glass-ink: #143E38; --g-glass-line: rgba(20,62,56,.14); --g-scrim: rgba(20,62,56,.2); --g-pill-ok: #1FA89B; }
.gs[data-gtheme="morning"] { --g-card: #5D569B; --g-card-2: #4F4A8A; --g-card-edge: #2F2B5E; --g-tile-edge: #E8B48A; --g-tile-ink: #2B2140; --g-well: rgba(20,14,50,.28); --g-accent: #FFC86B; --g-veil-e: .2; }
.gs[data-gtheme="morning"][data-gvar="winter"] { --g-card: #4A5C9A; --g-card-2: #3B4D8A; --g-card-edge: #24305E; --g-tile-edge: #C6CDE8; --g-accent: #FFD9A8; }
.gs[data-gtheme="morning"][data-gvar="spring"] { --g-card: #7A73B8; --g-card-2: #6A64A8; --g-card-edge: #48428A; --g-tile-edge: #F4B8CB; --g-accent: #FFD48A; }
.gs[data-gtheme="morning"][data-gvar="summer"] { --g-card: #4A86C2; --g-card-2: #3E77B4; --g-card-edge: #285A8E; --g-tile-edge: #F2C693; --g-accent: #FFD27A; }
.gs[data-gtheme="space"] { --g-card: #34276F; --g-card-2: #2A1E5C; --g-card-edge: #140E33; --g-tile-edge: #B6A4EE; --g-tile-ink: #1C1347; --g-well: rgba(6,4,24,.45); --g-accent: #F7C33F; --g-font: "Fredoka", var(--font); --g-weight: 600; --g-veil-e: .3; }
.gs[data-gtheme="space"][data-gvar="blue"] { --g-card: #12365E; --g-card-2: #0E2C4F; --g-card-edge: #061A30; --g-tile-edge: #8FD3E0; --g-tile-ink: #071A33; --g-accent: #2FD0E4; }
.gs[data-gtheme="sea"] { --g-card: #13708F; --g-card-2: #0F5B78; --g-card-edge: #083A4F; --g-tile-edge: #9ADCD3; --g-tile-ink: #0F3B4A; --g-well: rgba(4,30,44,.32); --g-accent: #FFD27A; --g-font: "Fredoka", var(--font); --g-weight: 600; --g-veil-e: .2; }
.gs[data-gtheme="sea"][data-gvar="deep"] { --g-card: #1B3270; --g-card-2: #14275A; --g-card-edge: #070F2A; --g-tile-edge: #8EA6E8; --g-tile-ink: #0D1A40; --g-well: rgba(2,6,24,.45); --g-accent: #6FF0E0; }
.gs[data-gtheme="classroom"] { --g-card: #23808A; --g-card-2: #1F6F78; --g-card-edge: #0F474E; --g-tile-edge: #F2C48D; --g-tile-ink: #1F3A3A; --g-well: rgba(10,40,44,.25); --g-accent: #FF9E6E; --g-veil-e: .16; }
.gs[data-gtheme="classroom"][data-gvar="dusk"] { --g-card: #45357A; --g-card-2: #3A2C68; --g-card-edge: #221848; --g-tile-edge: #FFB98F; --g-tile-ink: #2A1F4A; --g-well: rgba(20,10,40,.32); }
.gs[data-gtheme="rain"] { --g-card: #34495E; --g-card-2: #2C3E50; --g-card-edge: #18242F; --g-tile-edge: #D2AE84; --g-tile-ink: #2C3E50; --g-well: rgba(8,14,22,.38); --g-accent: #F2C14E; --g-veil-e: .3; }
.gs[data-gtheme="rain"][data-gvar="snow"] { --g-card: #3A4670; --g-card-2: #2B3550; --g-card-edge: #161C30; --g-tile-edge: #B8C6E6; --g-accent: #BFD8FF; }
.gs[data-gtheme="campfire"] { --g-card: #243266; --g-card-2: #1B2550; --g-card-edge: #0B1230; --g-tile: #FFF7E8; --g-tile-2: #FFE6C2; --g-tile-edge: #D9894A; --g-tile-ink: #2A1A0E; --g-well: rgba(6,6,16,.5); --g-accent: #F59A4A; --g-font: "Lilita One", var(--font); --g-weight: 400; --g-veil-c: .12; --g-veil-e: .46; }
.gs[data-gtheme="lake"] { --g-card: #4A6B58; --g-card-2: #3E5A4A; --g-card-edge: #24372C; --g-tile-edge: #D7B2D0; --g-tile-ink: #2E3A33; --g-well: rgba(16,24,20,.36); --g-accent: #F2A974; --g-veil-c: .08; --g-veil-e: .38; }
.gs[data-gtheme="dock"] { --g-card: #466A80; --g-card-2: #3B5A6E; --g-card-edge: #223949; --g-tile-edge: #F0A06A; --g-tile-ink: #2B3A44; --g-well: rgba(20,26,34,.36); --g-accent: #F7C98A; --g-veil-c: .08; --g-veil-e: .38; }
.gs[data-gtheme="earth"] { --g-card: #0F3672; --g-card-2: #0A2A5E; --g-card-edge: #041633; --g-tile-edge: #8DC1F0; --g-tile-ink: #0A1A33; --g-well: rgba(2,6,16,.5); --g-accent: #4FA3E8; --g-font: "Fredoka", var(--font); --g-weight: 600; --g-veil-c: .1; --g-veil-e: .4; }
.gs[data-gtheme="aquarium"] { --g-card: #348A66; --g-card-2: #2F7A5A; --g-card-edge: #123A2A; --g-tile-edge: #A6DEC8; --g-tile-ink: #123A2A; --g-well: rgba(6,24,16,.4); --g-accent: #F7C33F; --g-font: "Fredoka", var(--font); --g-weight: 600; --g-veil-c: .1; --g-veil-e: .4; }