/* A pupil's device in Asteroiden, after docs/concept/asteroiden/2-phone.webp: navy space, the asteroid at the top, the
   weapons as cards, the task on a cream card with the word in Fraunces, big answer buttons, the pupil's own numbers at the
   bottom. Only transform and opacity move. */
:root { --navy: #0B1430; --deep: #0F1D49; --btn: #24407E; --btn-2: #1C336A; --cream: #FFF6E6; --line: #E9D9BA; --sea: #1FB5A8; --mint: #5CF2E3; --ok: #2FBF5A; --bad: #D9473B; --sun: #F3B530; --orange: #FF7B3A;
  --game: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif; --me: #2EC4B6; }
html, body { height: 100%; }
body.pl { margin: 0; min-height: 100dvh; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, #142A66 0%, #0C1840 45%, #08102E 100%); color: #EEF4FF; font-family: var(--font); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
[hidden] { display: none !important; }
.pl-sky { position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #cfe 50%, transparent 51%), radial-gradient(1.6px 1.6px at 64% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 62%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 88% 70%, #ffe9b0 50%, transparent 51%), radial-gradient(1px 1px at 8% 84%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 46% 90%, #bdf 50%, transparent 51%); opacity: .8; }
.pl-planet { position: absolute; border-radius: 50%; }
.pl-p1 { left: -70px; top: 21%; width: 150px; height: 150px; background: radial-gradient(circle at 70% 35%, #3E62C8, #1B2F78 70%); box-shadow: 0 0 0 10px rgba(80,120,220,.12); }
.pl-p1::after { content: ""; position: absolute; left: -30%; top: 44%; width: 160%; height: 18%; border: 5px solid rgba(110,150,240,.5); border-radius: 50%; transform: rotate(-12deg); }
.pl-p2 { right: -60px; top: 34%; width: 110px; height: 110px; background: radial-gradient(circle at 35% 35%, #34508F, #1A2A5C 70%); opacity: .8; }
.pl-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }

/* ---------- joining ---------- */
.pl-join { position: relative; z-index: 2; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); box-sizing: border-box; overflow-y: auto; }
.is-join { overflow-y: auto; }
.pl-join-top { display: flex; justify-content: flex-end; }
.pl-join-card { align-self: center; justify-self: center; width: min(440px, 100%); display: grid; justify-items: center; gap: 10px; padding: 18px 22px 24px; border-radius: 30px; background: rgba(15,29,73,.86); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.pl-join-art { width: min(220px, 60%); height: auto; }
.pl-title { margin: 0; font-family: var(--game); font-weight: 700; font-size: clamp(32px, 9vw, 44px); line-height: 1; letter-spacing: .01em; }
.pl-form { display: grid; gap: 12px; width: 100%; margin-top: 6px; }
.pl-field { display: grid; gap: 6px; font-weight: 900; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #A9BBE6; }
.pl-input { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 3px solid #2B4685; border-radius: 18px; background: #0A1536; color: #FFFFFF; font: 700 22px var(--game); outline: none; }
.pl-input:focus { border-color: var(--mint); }
.pl-code-in { text-align: center; font-size: 40px; letter-spacing: .3em; padding-left: calc(16px + .3em); }
.pl-codechip { justify-self: center; margin: 0; padding: 6px 16px; border-radius: 999px; background: var(--cream); color: var(--navy); font: 700 20px var(--game); letter-spacing: .04em; }
.pl-err { min-height: 1.3em; margin: 0; text-align: center; font-weight: 800; font-size: 15px; color: #FFB3A6; }
.pl-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #FF9C55, #FF7B3A); color: #FFFFFF; font: 700 24px var(--game); cursor: pointer; box-shadow: 0 5px 0 #C4501A; }
.pl-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #C4501A; }
.pl-go:disabled { opacity: .6; }
.pl-go svg { width: 26px; height: 26px; }
.pl-foot { margin: 8px 0 0; text-align: center; }
.pl-home { color: #8FA3D6; font-weight: 800; font-size: 13px; text-decoration: none; }
.pl-join .dd-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #EEF4FF; }

/* ---------- the game ---------- */
.pl-game { position: relative; z-index: 2; height: 100dvh; display: flex; flex-direction: column; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; max-width: 560px; margin: 0 auto; }
.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.pl-hp { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pl-hp-lbl { font: 700 13px var(--game); letter-spacing: .12em; text-transform: uppercase; color: #E4ECFF; }
.pl-hp-row { display: flex; align-items: center; gap: 8px; }
.pl-hp-track { position: relative; flex: 1; height: 16px; border-radius: 999px; background: #10204F; border: 2px solid #2B4685; overflow: hidden; }
.pl-hp-track i { position: absolute; inset: 2px; border-radius: 999px; background: linear-gradient(180deg, #FFD36E, #F2A42A); transform-origin: left center; transition: transform .5s cubic-bezier(.3,.9,.4,1); }
.pl-hp-row b { font: 700 17px var(--game); font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.pl-bar-right { display: flex; align-items: center; gap: 8px; }
.pl-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #2B4685; border-radius: 50%; background: #0F1D49; color: #DCE6FF; cursor: pointer; }
.pl-icon-btn svg { width: 20px; height: 20px; }
.pl-icon-btn .i-on, .is-mute .pl-icon-btn .i-off { display: inline; }
.pl-icon-btn .i-off, .is-mute .pl-icon-btn .i-on { display: none; }
.pl-time { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 14px 5px 10px; border-radius: 999px; border: 3px solid var(--sea); background: #0D2347; color: var(--mint); font: 700 22px var(--game); font-variant-numeric: tabular-nums; }
.pl-time svg { width: 22px; height: 22px; }
.pl-time b { color: #FFFFFF; min-width: 2.7ch; }
.pl-time.is-hot { border-color: #FF7A59; color: #FF9E85; }
.is-lobby .pl-hp, .is-lobby .pl-time { visibility: hidden; }
.pl-rock { position: relative; flex: 1 1 22vh; min-height: 90px; display: grid; place-items: end center; }
.pl-state { position: relative; z-index: 21; margin: 0 0 4px; padding: 4px 14px; border-radius: 999px; background: rgba(8,18,46,.75); font: 600 15px var(--game); color: #CFF6FF; text-align: center; }
.pl-lobby-sat { display: none; position: absolute; inset: 0 0 34px; place-items: center; }
.is-lobby .pl-lobby-sat { display: grid; }
.pl-lobby-sat svg { height: min(100%, 130px); width: auto; animation: satBob 3s ease-in-out infinite; }
@keyframes satBob { 50% { transform: translateY(-6px) rotate(3deg); } }
.is-lobby .pl-state { font-size: 18px; color: #FFFFFF; background: none; }
.pl-weapons { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.pl-wpn { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; border: 3px solid #2B4685; border-radius: 20px; background: linear-gradient(180deg, #1C336A, #15295A); color: #FFFFFF; font: 600 15px var(--game); cursor: pointer; }
.pl-wpn-ico svg { width: 48px; height: 36px; display: block; }
.pl-wpn.is-on { border-color: var(--mint); background: linear-gradient(180deg, #17406E, #123258); box-shadow: 0 0 0 3px rgba(92,242,227,.18), 0 0 18px rgba(92,242,227,.35); }
.pl-wpn.is-on b { color: var(--mint); }
.is-intro .pl-weapons, .is-intro .pl-task { opacity: .35; pointer-events: none; }
.pl-task { flex: none; display: grid; gap: 10px; }
.pl-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 16px 16px; border-radius: 26px; background: var(--cream); border: 3px solid var(--line); color: var(--navy); text-align: center; min-height: 92px; align-content: center; }
.pl-card.is-new { animation: cardIn .32s cubic-bezier(.2,1.3,.4,1); }
@keyframes cardIn { from { opacity: .3; transform: translateY(8px) scale(.97); } }
.pl-card.is-shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.pl-ask { margin: 0; font-weight: 900; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #22325A; }
.pl-word { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: var(--fs, 48px); line-height: 1.08; overflow-wrap: anywhere; color: var(--navy); }
.pl-word:empty { display: none; }
.pl-card.is-match .pl-word { display: none; }
.pl-listen { display: grid; place-items: center; width: 72px; height: 72px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #A58BFF, #7C5CE8); color: #FFFFFF; cursor: pointer; box-shadow: 0 4px 0 #5536B8; }
.pl-listen svg { width: 38px; height: 38px; }
.pl-tag { position: absolute; top: -12px; right: 14px; margin: 0; padding: 3px 12px; border-radius: 999px; background: var(--sun); color: var(--navy); font: 700 13px var(--game); letter-spacing: .06em; text-transform: uppercase; }
.pl-answers.is-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pl-opt { position: relative; min-height: 76px; padding: 10px 12px; border: 3px solid #35559A; border-radius: 24px; background: linear-gradient(180deg, var(--btn), var(--btn-2)); color: #FFFFFF; font: 600 var(--fs, 30px)/1.1 var(--game); cursor: pointer; overflow-wrap: anywhere; box-shadow: 0 4px 0 #13265A; transition: transform .08s; }
.pl-opt:active, .pl-opt.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 #13265A; }
.pl-opt.is-right { border-color: #8BFFA8; background: linear-gradient(180deg, #37CC63, #23A54A); box-shadow: 0 0 0 4px rgba(124,255,154,.25), 0 0 26px rgba(124,255,154,.45); }
.pl-opt.is-right::after { content: ""; position: absolute; right: 10px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2323A54A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.pl-opt.is-reveal { animation: reveal .5s .15s both; }
@keyframes reveal { from { transform: scale(.94); } }
.pl-opt.is-wrong { border-color: #FF9D93; background: linear-gradient(180deg, #E5584B, #C23A2F); }
.pl-answers.is-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pl-col { display: grid; gap: 8px; }
.pl-pair { min-height: 54px; padding: 8px 10px; border: 3px solid #35559A; border-radius: 18px; background: linear-gradient(180deg, var(--btn), var(--btn-2)); color: #FFFFFF; font: 600 var(--fs, 20px)/1.1 var(--game); cursor: pointer; overflow-wrap: anywhere; box-shadow: 0 3px 0 #13265A; }
.pl-pair.is-pick { border-color: var(--mint); background: linear-gradient(180deg, #1B5A7E, #14476A); }
.pl-pair.is-done { border-color: #8BFFA8; background: linear-gradient(180deg, #37CC63, #23A54A); opacity: .55; cursor: default; }
.pl-pair.is-wrong { border-color: #FF9D93; background: linear-gradient(180deg, #E5584B, #C23A2F); animation: shake .45s; }
.pl-typeform { display: flex; gap: 8px; }
.pl-type-in { flex: 1; min-width: 0; font-size: 26px; text-align: center; }
.pl-type-in.is-right { border-color: #8BFFA8; background: #12402A; }
.pl-type-in.is-wrong { border-color: #FF9D93; background: #4A1A1A; }
.pl-fire { flex: none; padding: 0 22px; border: 0; border-radius: 18px; background: linear-gradient(180deg, #43DCCB, #17A596); color: #06201D; font: 700 22px var(--game); cursor: pointer; box-shadow: 0 4px 0 #0E6F66; }
.pl-fire:active { transform: translateY(3px); box-shadow: 0 1px 0 #0E6F66; }
.pl-cool { display: grid; gap: 6px; padding: 10px 14px; border-radius: 18px; background: rgba(8,18,46,.82); border: 2px solid rgba(255,157,147,.4); }
.pl-cool:not(.is-bar) { border-color: rgba(124,255,154,.4); }
.pl-cool p { margin: 0; font-weight: 800; font-size: 16px; text-align: center; }
.pl-cool-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pl-cool:not(.is-bar) .pl-cool-track { display: none; }
.pl-cool-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFB067, #FF6A3D); transform-origin: left center; }
.pl-me { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 26px; background: rgba(15,29,73,.9); border: 2px solid #2B4685; }
.is-lobby .pl-me { visibility: hidden; }
.pl-streak { display: flex; align-items: center; gap: 2px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.05); opacity: .55; }
.pl-streak.is-hot { opacity: 1; background: rgba(255,138,61,.16); }
.pl-streak svg { width: 34px; height: 34px; }
.pl-streak.is-hot svg { animation: flame .8s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(1.12) rotate(-4deg); } }
.pl-streak b { font: 700 24px var(--game); color: var(--sun); }
.is-solar .pl-streak { box-shadow: 0 0 0 3px rgba(243,181,48,.5); }
.pl-mid { display: grid; gap: 4px; min-width: 0; }
.pl-super { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 12px; padding: 2px; border-radius: 999px; background: #0A1536; }
.pl-super i { border-radius: 999px; background: rgba(255,255,255,.08); }
.pl-super i.on { background: linear-gradient(180deg, #FFD36E, #F2A42A); }
.pl-dmg { margin: 0; text-align: center; font: 600 15px var(--game); color: #B9C8F0; }
.pl-dmg b { font-weight: 700; font-size: 24px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.pl-rank { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.pl-rank svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-rank b { position: relative; font: 700 19px var(--game); color: var(--navy); }

/* banners, pause, the link */
.pl-banner { position: fixed; left: 50%; top: 40%; z-index: 30; display: grid; justify-items: center; gap: 6px; width: min(94vw, 520px); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.pl-banner b { font: 700 clamp(34px, 11vw, 60px)/1 var(--game); text-transform: uppercase; color: #FFF6E6; text-shadow: 0 4px 0 #0B1430, 0 0 24px rgba(92,242,227,.5); }
.pl-banner span { padding: 4px 14px; border-radius: 999px; background: rgba(8,18,46,.85); font: 600 17px var(--game); }
.pl-banner.is-count b { font-size: clamp(90px, 30vw, 160px); }
.pl-banner.is-on { animation: popBig .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popBig { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.pl-paused { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgba(4,8,24,.72); text-align: center; }
.pl-paused b { font: 700 56px var(--game); }
.pl-paused span { font-weight: 800; color: #CFDDFF; }
.pl-lost { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; z-index: 45; transform: translateX(-50%); margin: 0; padding: 7px 16px; border-radius: 999px; background: #B4401A; color: #FFFFFF; font-weight: 900; font-size: 14px; white-space: nowrap; }
.is-final .pl-time { animation: tick 1s steps(1) infinite; }
@keyframes tick { 50% { opacity: .55; } }

/* ---------- waiting, the end, out ---------- */
.pl-msg { position: relative; z-index: 2; min-height: 100dvh; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); box-sizing: border-box; overflow-y: auto; }
body:has(.pl-msg:not([hidden])) { overflow-y: auto; }
.pl-msg-in { width: min(460px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; }
.pl-me-sat svg { width: 150px; height: auto; animation: satBob 3s ease-in-out infinite; }
.pl-msg-title { margin: 0; font: 700 clamp(30px, 9vw, 44px)/1.05 var(--game); text-transform: uppercase; }
.pl-msg-title.is-win { color: #7FF0E3; }
.pl-msg-title.is-lose { color: #FF9E85; }
.pl-msg-txt { margin: 0; font-weight: 800; color: #C8D6F6; }
.pl-end { display: grid; gap: 12px; width: 100%; }
.pl-end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pl-end-stats p { display: grid; margin: 0; padding: 10px 6px; border-radius: 18px; background: rgba(15,29,73,.9); border: 2px solid #2B4685; }
.pl-end-stats b { font: 700 28px var(--game); color: #FFFFFF; }
.pl-end-stats span { font-weight: 800; font-size: 13px; color: #A9BBE6; }
.pl-end-awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pl-end-awards:empty { display: none; }
.pl-award { padding: 6px 14px; border-radius: 999px; background: var(--c); color: #FFFFFF; font: 700 17px var(--game); box-shadow: 0 3px 0 rgba(0,0,0,.25); animation: popBig2 .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popBig2 { from { opacity: 0; transform: scale(.5); } }
.pl-end-top { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 4px; border-radius: 20px; background: var(--cream); color: var(--navy); }
.pl-end-top li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 12px; font: 600 18px var(--game); text-align: left; }
.pl-end-top li.is-me { background: #FCE7B8; }
.pl-end-top i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sea); color: #FFFFFF; font-style: normal; font-size: 15px; }
.pl-end-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-end-top span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--c); }
.pl-end-top b { font-variant-numeric: tabular-nums; }

/* low screens (a phone held sideways, or the keyboard open) */
@media (max-height: 600px) {
  .pl-game { gap: 6px; }
  .pl-rock { flex-basis: 12vh; min-height: 56px; }
  .pl-wpn { padding: 4px; } .pl-wpn-ico svg { width: 36px; height: 26px; }
  .pl-card { min-height: 64px; padding: 8px 12px 10px; }
  .pl-opt { min-height: 54px; }
  .pl-me { padding: 4px 10px; } .pl-rank { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pl-lobby-sat svg, .pl-me-sat svg, .pl-streak.is-hot svg, .is-final .pl-time { animation: none; } }