/* Save the Otter (IELTS Arena) + the speaking pieces it shares with Locked Room (sp-*: sentence marks, mic). */
:root{--c-pond:#3ec7ff;--c-escape:#e7a64a}
.gm-pond{--c:var(--c-pond)}.gm-escape{--c:var(--c-escape)}
.gm-theme-pond{--accent:#3ec7ff;--accent2:#0a84c6}.gm-theme-escape{--accent:#f0b35a;--accent2:#b8671d}
.gm-theme-escape .gm-btn.primary,.gm-poster.gm-escape .gm-btn.primary{color:#2f1700;text-shadow:none}
.gm-theme-escape .gm-tabs button[aria-selected=true]{color:#2f1700}
/* nine posters: rows of 3, 2, 2, 2 */
.gm-poster:nth-child(8),.gm-poster:nth-child(9){grid-column:span 3}
@media (max-width:900px){.gm-poster:nth-child(8),.gm-poster:nth-child(9){grid-column:span 1}}

/* ── Shared: the sentence, word marks, the mic ─────────────────────────────────────────────────── */
.sp-sentence{margin:12px 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(21px,2.5vw,30px);line-height:1.35;letter-spacing:.2px}
.sp-word{display:inline-block;border-radius:8px;padding:0 3px;transition:background .25s,color .25s}
.sp-word.watch{text-decoration:underline dotted var(--gold) 3px;text-underline-offset:7px}
.sp-sentence.marked .sp-word{animation:sp-pop .4s backwards;animation-delay:calc(var(--i,0)*45ms)}
.sp-word.ok{color:#7dffc4;background:rgba(47,227,154,.14)}
.sp-word.bad{color:#ffb3c1;background:rgba(255,77,109,.2);text-decoration:underline wavy #ff4d6d 2px;text-underline-offset:6px}
.sp-word.miss{color:#ff8da1;background:rgba(255,77,109,.12);text-decoration:line-through 3px #ff4d6d;opacity:.85}
@keyframes sp-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}}
.sp-practise{margin-top:12px;padding:12px 14px;border-radius:16px;background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.35)}
.sp-practise strong{display:block;margin-bottom:6px;font-size:14px}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px}.sp-chip{padding:4px 12px;border-radius:999px;background:rgba(255,77,109,.22);font-weight:800;font-size:14px}.sp-chip.miss{background:rgba(255,255,255,.1);color:#ffc2cd}
.sp-listen.on{box-shadow:0 0 0 3px var(--accent)}
.sp-signin{display:grid;gap:10px;justify-items:start;margin-top:8px}
.sp-mic{position:relative;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;border:0;padding:0;flex:none;
  background:radial-gradient(circle at 38% 30%,#ff7a8a,#d0102e);box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 0 calc(10px + var(--lvl,0)*50px) rgba(255,77,109,calc(.3 + var(--lvl,0)*.6))}
.sp-mic-ring{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p,0)*360deg),rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
.sp-mic-icon{font-size:40px;transform:scale(calc(1 + var(--lvl,0)*.25));transition:transform .08s}
.sp-mic-time{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:20px;color:var(--gold)}
.sp-mic[data-state=rec]{animation:sp-rec 1.2s ease-in-out infinite}@keyframes sp-rec{50%{transform:scale(1.05)}}
.sp-mic[data-state=wait]{background:radial-gradient(circle at 38% 30%,#8f7bff,#4b36c9)}
.sp-mic[data-state=wait] .sp-mic-ring{background:conic-gradient(var(--gold) 90deg,rgba(255,255,255,.14) 0);animation:sp-spin 1s linear infinite}
@keyframes sp-spin{to{transform:rotate(360deg)}}

/* ── The pond ──────────────────────────────────────────────────────────────────────────────── */
.pd-intro-host{max-height:260px!important}
.pd-hud{gap:22px}.pd-hud .pd-quit{margin-left:auto}
.pd-hearts{display:flex!important;gap:4px;font-size:28px;line-height:1;color:rgba(255,255,255,.2)}.pd-hearts .on{color:#ff4d6d;text-shadow:0 0 14px rgba(255,77,109,.7)}
.pd-scene{position:relative;aspect-ratio:16/7;border-radius:24px;overflow:hidden;margin-bottom:14px;border:2px solid rgba(255,255,255,.18);
  background:url(/static/study-hub/games-art/arena-pond.webp) center 72%/cover no-repeat;box-shadow:0 20px 40px -24px #000}
.pd-log{position:absolute;top:5%;left:-6%;width:66%;transform-origin:8% 50%;transform:rotate(calc(var(--p,0)*7deg));transition:transform .3s}
.pd-log-art{display:block;width:100%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
/* the crack opens as the time runs out */
.pd-crack{position:absolute;left:58%;top:18%;width:6%;height:70%;opacity:var(--p,0);background:#2b1709;
  clip-path:polygon(40% 0,70% 0,55% 22%,85% 40%,50% 58%,75% 78%,45% 100%,25% 100%,45% 78%,15% 58%,45% 40%,20% 22%)}
.pd-otter{position:absolute;left:44%;top:14%;height:72%;aspect-ratio:343/512;transform:translateY(calc(var(--p,0)*9% - var(--up,0)*24%));transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.pd-otter-art{width:100%;height:100%;object-fit:contain;transform-origin:50% 4%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.35))}
.pd-scene[data-state=hang] .pd-otter-art{animation:pd-sway 2.6s ease-in-out infinite}
.pd-scene[data-state=slip] .pd-otter-art{animation:pd-sway 1.1s ease-in-out infinite}
.pd-scene.urgent .pd-log{animation:gm-shake .4s infinite}
@keyframes pd-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
/* pulled out onto the grassy bank */
.pd-scene[data-state=saved] .pd-otter{transform:translate(72%,-16%) scale(.84);transition:transform .7s cubic-bezier(.2,1.5,.4,1)}
.pd-scene[data-state=saved] .pd-otter-art{animation:pd-hop .8s ease-in-out infinite}
@keyframes pd-hop{50%{transform:translateY(-6%)}}
.pd-scene[data-state=fall] .pd-otter{transform:translateY(130%) rotate(18deg);transition:transform .6s cubic-bezier(.5,0,.9,.5)}
.pd-otter.gone{opacity:0}
.pd-splash{position:absolute;left:38%;bottom:-4%;height:66%;opacity:0;transform:scale(.4) translateY(30%);pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.3))}
.pd-splash.show{opacity:1;transform:none;transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .15s}
.pd-timer{position:absolute;left:0;right:0;bottom:0;height:10px;background:rgba(0,0,0,.35)}
.pd-timer span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4d6d,var(--gold) 45%,var(--good));transition:width .1s linear}
.pd-card{display:grid;gap:4px}
.pd-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gm-pill.live{background:#d0102e;color:#fff;animation:gm-pulse 1.2s infinite}
.pd-rec{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:12px 0 26px}
.pd-tip{margin:10px 0 0;font-size:14px;color:#e9e4ff}
.pd-note{margin:6px 0 0;font-weight:700;color:#ffd38a}
.pd-verdict{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pd-verdict strong{font-family:var(--display);font-size:clamp(30px,4vw,42px);line-height:1}
.pd-verdict.good strong{color:var(--good)}.pd-verdict.bad strong{color:#5ad1ff}
.pd-verdict span{color:var(--muted);font-weight:700}
/* ── Karaoke: ten sentences in two minutes ─────────────────────────────────────────────────────── */
@media (min-width:641px){.pd-scene.ko-scene{aspect-ratio:auto;height:clamp(220px,36vh,380px)}}
.pd-clock strong{font-variant-numeric:tabular-nums}
.pd-clock.urgent strong{color:#ff4d6d;animation:gm-pulse .8s infinite}
.pd-dots{display:flex!important;gap:6px;align-items:center;flex-wrap:wrap}
.pd-dots span{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.25);transition:background .3s,transform .3s}
.pd-dots span.lv3,.pd-dots span.lv4{border-color:rgba(255,200,61,.55)}.pd-dots span.lv5{border-color:rgba(255,77,109,.65)}
.pd-dots span.on{background:var(--good);border-color:var(--good);box-shadow:0 0 10px rgba(47,227,154,.6)}
.pd-dots span.now{transform:scale(1.3);border-color:#fff}
.pd-scene.slip .pd-otter-art{animation:pd-slip .6s ease-out}
@keyframes pd-slip{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(9%) rotate(-10deg)}60%{transform:translateY(5%) rotate(7deg)}100%{transform:none}}
.ko-card.ko-in{animation:ko-in .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes ko-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
.ko-line{position:relative;margin:22px 0 4px;font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,38px);line-height:1.45;letter-spacing:.2px}
.ko-word{position:relative;display:inline-block;color:rgba(255,255,255,.42);transition:color .18s,transform .18s,text-shadow .18s}
.ko-word::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:4px;border-radius:4px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.ko-word.on{color:var(--gold);text-shadow:0 0 18px rgba(255,200,61,.55)}
.ko-word.on::after{transform:scaleX(1)}
.ko-word.next{color:#fff;transform:translateY(-2px)}
.ko-word.bad{color:#ff4d6d;text-shadow:0 0 16px rgba(255,77,109,.6);animation:ko-bad .45s}
@keyframes ko-bad{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.ko-ball{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--gold) 60%);
  box-shadow:0 0 12px var(--gold);transition:transform .22s cubic-bezier(.3,1.6,.5,1);pointer-events:none;animation:ko-bounce .5s ease-in-out infinite alternate}
@keyframes ko-bounce{to{margin-top:-6px}}
.ko-status{margin:6px 0 0;min-height:1.5em;font-weight:700;color:var(--muted)}
.ko-status.bad{color:#ffb3c1}
.ko-next{margin:10px 0 0;font-size:15px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .pd-dots span{width:12px;height:12px}
  .ko-line{font-size:clamp(22px,6.4vw,30px)}
  .pd-scene{aspect-ratio:4/3.4}
  .pd-log{width:104%;left:-10%;top:6%}
  .pd-otter{left:50%;top:13%;height:66%;margin-left:-22%}
  .pd-splash{left:20%;height:56%}
  .pd-hud{gap:14px}.pd-hearts{font-size:24px}
  .sp-mic{width:96px;height:96px}
}
@media (prefers-reduced-motion:reduce){.pd-log,.pd-otter{transition:none}.ko-ball{animation:none}.ko-card.ko-in{animation:none}}