/* ===== Word Galaxy / จักรวาลคำศัพท์ — cosmic experience layer ===== */
:root{
  --void:#04060f; --deep:#0a0e26; --indigo:#141a44;
  --glass:rgba(120,140,255,.06); --glass-2:rgba(140,160,255,.10);
  --stroke:rgba(150,170,255,.16); --stroke-soft:rgba(150,170,255,.08);
  --cyan:#46f0d0; --violet:#8b6cff; --magenta:#ff5ea8; --gold:#ffcf5c; --rose:#ff8a5c;
  --text:#eef2ff; --dim:#94a0d0;
  --r-lg:26px; --r-md:15px;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter","Noto Sans Thai",system-ui,sans-serif;
  --font-thai:"Noto Sans Thai","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:var(--font-body); color:var(--text); background:var(--void);
  min-height:100dvh; overflow-x:hidden; line-height:1.55; -webkit-font-smoothing:antialiased;
}
:lang(th),.q-hint,.eyebrow,.mode-desc,.hud-label,.res-lbl,.toggle-text,.toggle-badge,.field-label,.field label{font-family:var(--font-thai)}

/* ---------- deep space ---------- */
.cosmos{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(140% 100% at 50% -20%, #1a2052 0%, #0a0e26 45%, #04060f 100%)}
#starfield{position:absolute;inset:0;width:100%;height:100%}
.nebula{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen;
  will-change:transform}
.nebula--1{width:60vw;height:60vw;left:-10vw;top:-15vh;
  background:radial-gradient(circle,rgba(139,108,255,.55),transparent 65%);animation:drift1 26s ease-in-out infinite}
.nebula--2{width:55vw;height:55vw;right:-12vw;top:20vh;
  background:radial-gradient(circle,rgba(70,240,208,.4),transparent 65%);animation:drift2 32s ease-in-out infinite}
.nebula--3{width:50vw;height:50vw;left:20vw;bottom:-20vh;
  background:radial-gradient(circle,rgba(255,94,168,.38),transparent 65%);animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-7vw,9vh) scale(.95)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-7vh) scale(1.2)}}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(2,3,10,.85) 100%)}

/* ---------- screens ---------- */
.screen{position:relative;z-index:1;display:none;min-height:100dvh;align-items:center;justify-content:center;padding:24px 18px}
.screen.is-active{display:flex}
.reveal{opacity:0;transform:translateY(26px);animation:rise .7s cubic-bezier(.2,.8,.25,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}

.glass{background:var(--glass);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--stroke);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07)}

/* ---------- intro ---------- */
.intro{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:22px}
.planet-stage{height:150px;display:grid;place-items:center;perspective:600px}
.planet{position:relative;width:120px;height:120px}
.planet-body{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #b9a3ff 0%, #6d4fe0 38%, #3a1f8c 72%, #1a0d4d 100%);
  box-shadow:inset -14px -10px 34px rgba(0,0,0,.6), 0 0 50px rgba(139,108,255,.55);
  animation:bob 6s ease-in-out infinite}
.planet-ring{position:absolute;top:50%;left:50%;width:200px;height:62px;
  transform:translate(-50%,-50%) rotateX(74deg);border-radius:50%;
  border:3px solid rgba(70,240,208,.55);box-shadow:0 0 24px rgba(70,240,208,.4);
  animation:ringspin 14s linear infinite}
.planet-moon{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#9fb6ff);box-shadow:0 0 14px #cfe0ff;
  transform-origin:-46px 0;animation:moonspin 7s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ringspin{to{transform:translate(-50%,-50%) rotateX(74deg) rotate(360deg)}}
@keyframes moonspin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.intro-head{text-align:center}
.eyebrow{display:inline-block;font-family:var(--font-thai);font-size:.76rem;letter-spacing:.5px;color:var(--cyan);
  padding:5px 13px;border:1px solid rgba(70,240,208,.35);border-radius:999px;background:rgba(70,240,208,.06)}
.title{font-family:var(--font-thai);font-weight:700;font-size:clamp(2.4rem,9vw,3.4rem);line-height:1.02;margin-top:14px;
  letter-spacing:1px}
.title-en{font-family:var(--font-display);font-weight:700;font-size:.5em;letter-spacing:.32em;
  background:linear-gradient(100deg,var(--cyan),var(--violet) 50%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(139,108,255,.5))}

.panel{width:100%;padding:30px 26px;display:flex;flex-direction:column;gap:20px}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:10px}
.field>label,.field-label{font-size:.82rem;color:var(--dim);font-weight:500}
input[type=text]{width:100%;padding:14px 16px;border-radius:var(--r-md);background:rgba(4,6,15,.55);
  border:1px solid var(--stroke);color:var(--text);font-family:var(--font-body);font-size:1rem;transition:.2s}
input[type=text]::placeholder{color:rgba(148,160,208,.55);font-family:var(--font-thai)}
input[type=text]:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(70,240,208,.18),0 0 30px -8px rgba(70,240,208,.6)}

.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mode-card{display:flex;flex-direction:column;gap:3px;padding:15px 8px;cursor:pointer;background:var(--glass);
  border:1px solid var(--stroke-soft);border-radius:var(--r-md);color:var(--text);text-align:center;transition:.22s}
.mode-card:hover{border-color:var(--stroke);transform:translateY(-3px)}
.mode-card.is-selected{border-color:var(--cyan);background:linear-gradient(180deg,rgba(70,240,208,.16),rgba(70,240,208,.02));
  box-shadow:0 0 0 1px rgba(70,240,208,.5),0 12px 34px -12px rgba(70,240,208,.6)}
.mode-name{font-family:var(--font-thai);font-weight:600;font-size:.95rem}
.mode-desc{font-size:.7rem;color:var(--dim)}

.answer-toggle{display:inline-flex;align-items:center;gap:12px;align-self:stretch;padding:11px 14px;border-radius:var(--r-md);
  cursor:pointer;background:rgba(4,6,15,.55);border:1px solid var(--stroke);color:var(--text);transition:.2s}
.toggle-knob{width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.16);position:relative;transition:.25s;flex:none}
.toggle-knob::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:.25s}
.answer-toggle[aria-pressed=true]{border-color:rgba(255,207,92,.5);box-shadow:0 0 24px -8px rgba(255,207,92,.7)}
.answer-toggle[aria-pressed=true] .toggle-knob{background:rgba(255,207,92,.35)}
.answer-toggle[aria-pressed=true] .toggle-knob::after{transform:translateX(16px);background:var(--gold)}
.toggle-text{font-size:.9rem}
.toggle-badge{margin-left:auto;font-size:.7rem;color:var(--gold);border:1px solid rgba(255,207,92,.4);border-radius:999px;padding:3px 9px}

/* ---------- buttons ---------- */
.btn{position:relative;font-family:var(--font-thai);font-weight:600;font-size:1rem;padding:15px 22px;border-radius:var(--r-md);
  cursor:pointer;border:1px solid transparent;transition:.2s;color:var(--text);overflow:hidden}
.btn--primary{background:linear-gradient(100deg,var(--cyan),var(--violet));color:#04122a;
  box-shadow:0 14px 34px -10px rgba(70,240,208,.65)}
.btn--primary::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--violet),var(--magenta));
  opacity:0;transition:opacity .25s}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -10px rgba(139,108,255,.8)}
.btn--primary:hover::before{opacity:1}
.btn--primary>span{position:relative;z-index:1}
.btn--ghost{background:var(--glass);border-color:var(--stroke);color:var(--text)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 24px -10px var(--cyan)}
.start-actions{display:flex;gap:12px}
.start-actions .btn{flex:1}
.sound-chip{align-self:center;display:inline-flex;gap:8px;align-items:center;cursor:pointer;background:transparent;
  border:1px solid var(--stroke-soft);border-radius:999px;padding:7px 14px;color:var(--dim);font-family:var(--font-thai);font-size:.8rem;transition:.2s}
.sound-chip:hover{color:var(--text);border-color:var(--stroke)}
.sound-chip[aria-pressed=false]{opacity:.5}

/* ---------- HUD ---------- */
#screen-game.is-active{flex-direction:column;justify-content:flex-start;gap:16px;padding-top:18px}
.hud{width:100%;max-width:640px;display:flex;align-items:center;gap:18px;padding:13px 18px}
.hud-stat{display:flex;flex-direction:column;gap:2px}
.hud-label{font-size:.66rem;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.hud-value{font-family:var(--font-display);font-weight:700;font-size:1.35rem;line-height:1}
.hud-value--score{color:var(--gold);transition:transform .15s}
.hud-value--score.pop{transform:scale(1.35)}
.hud-combo-wrap{display:flex;flex-direction:column;gap:3px;min-width:96px}
.combo-meter{height:7px;border-radius:999px;background:rgba(4,6,15,.6);overflow:hidden}
.combo-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--rose));transition:width .3s,box-shadow .3s}
.combo-mult{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--cyan);line-height:1}
.hud-progress{flex:1;min-width:110px}
.progress-track{height:7px;border-radius:999px;background:rgba(4,6,15,.6);overflow:hidden;margin-top:4px}
.progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .45s ease}
.hud-quit{margin-left:auto;width:34px;height:34px;border-radius:50%;cursor:pointer;flex:none;background:var(--glass);
  border:1px solid var(--stroke-soft);color:var(--dim);font-size:1rem;transition:.2s}
.hud-quit:hover{color:var(--magenta);border-color:var(--magenta)}

/* ---------- play area ---------- */
.play-area{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:18px}

/* hero orbit */
.orbit-wrap{position:relative;width:236px;height:236px;flex:none}
.orbit-svg{width:100%;height:100%;transform:rotate(-90deg)}
.orbit-base{fill:none;stroke:rgba(150,170,255,.10);stroke-width:2}
.orbit-base--2{stroke-width:10;stroke:rgba(150,170,255,.04)}
.orbit-ring{fill:none;stroke:url(#orbitGrad);stroke-width:6;stroke-linecap:round;stroke-dasharray:628;stroke-dashoffset:439;
  transition:stroke-dashoffset .7s cubic-bezier(.3,.8,.3,1);filter:drop-shadow(0 0 7px rgba(139,108,255,.6))}
.orbit-ring.pulse{animation:ringpulse .6s ease-out}
@keyframes ringpulse{0%{filter:drop-shadow(0 0 7px rgba(139,108,255,.6))}40%{filter:drop-shadow(0 0 24px var(--cyan))}100%{filter:drop-shadow(0 0 7px rgba(139,108,255,.6))}}
.orbit-trail{fill:var(--cyan);stroke:none;opacity:.3;filter:blur(7px);
  transition:cx .7s cubic-bezier(.3,.8,.3,1),cy .7s cubic-bezier(.3,.8,.3,1),fill .5s}
.orbit-star{fill:#fff;filter:drop-shadow(0 0 10px var(--cyan));
  transition:cx .7s cubic-bezier(.3,.8,.3,1),cy .7s cubic-bezier(.3,.8,.3,1),fill .5s}
.orbit-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center;pointer-events:none}
.orbit-ability{font-family:var(--font-display);font-weight:700;font-size:2.9rem;line-height:1;color:var(--text);transition:transform .2s}
.orbit-ability.bump{transform:scale(1.2)}
.orbit-ablabel{font-size:.6rem;color:var(--dim);letter-spacing:.6px;text-transform:uppercase}
.orbit-tier{font-size:.8rem;font-weight:600;color:var(--violet);margin-top:4px;font-family:var(--font-thai)}
.timer-ring{position:absolute;right:-4px;bottom:2px;width:58px;height:58px}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-base{fill:rgba(4,6,15,.75);stroke:rgba(150,170,255,.12);stroke-width:6}
.timer-arc{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:339;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s}
.timer-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--gold)}
.timer-ring.is-low .timer-arc{stroke:var(--magenta)}
.timer-ring.is-low .timer-num{color:var(--magenta);animation:tick .5s ease infinite}
@keyframes tick{50%{transform:scale(1.18)}}

/* question card */
.question{width:100%;padding:24px;text-align:center;display:flex;flex-direction:column;gap:12px;transition:transform .12s ease-out}
.question.enter{animation:cardin .5s cubic-bezier(.2,.8,.25,1)}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.q-meta{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.q-badge{font-family:var(--font-display);font-weight:700;font-size:.64rem;letter-spacing:1.5px;padding:4px 11px;border-radius:999px;border:1px solid currentColor}
.q-badge.lv-easy{color:var(--cyan)} .q-badge.lv-medium{color:var(--violet)} .q-badge.lv-hard{color:var(--magenta)}
.q-type,.q-pos{font-size:.72rem;color:var(--dim);padding:4px 10px;border-radius:999px;background:rgba(150,170,255,.07)}
.q-prompt{font-family:var(--font-display);font-size:clamp(1.25rem,4.5vw,1.6rem);font-weight:600;line-height:1.5;word-break:break-word}
.q-prompt .blank{color:var(--gold);letter-spacing:1px;text-shadow:0 0 16px rgba(255,207,92,.6)}
.q-prompt--vocab{font-family:var(--font-thai);color:var(--cyan)}
.q-hint{color:var(--dim);font-size:1rem}

/* choices */
.choices{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{position:relative;padding:17px;border-radius:var(--r-md);cursor:pointer;font-family:var(--font-display);font-size:1.1rem;
  font-weight:600;color:var(--text);background:var(--glass-2);border:1px solid var(--stroke);overflow:hidden;
  transition:transform .15s,border-color .2s,background .2s,box-shadow .2s;opacity:0;animation:choicein .4s ease forwards}
.choice:nth-child(1){animation-delay:.04s}.choice:nth-child(2){animation-delay:.10s}
.choice:nth-child(3){animation-delay:.16s}.choice:nth-child(4){animation-delay:.22s}
@keyframes choicein{to{opacity:1;transform:none}}
.choice{transform:translateY(10px)}
.choice:hover:not(:disabled){transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 12px 30px -14px var(--cyan)}
.choice:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(70,240,208,.32)}
.choice:disabled{cursor:default}
.choice.is-correct{border-color:var(--cyan);background:linear-gradient(180deg,rgba(70,240,208,.24),rgba(70,240,208,.04));
  box-shadow:0 0 0 1px var(--cyan),0 0 32px -4px var(--cyan);animation:correctpop .5s}
@keyframes correctpop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.choice.is-wrong{border-color:var(--magenta);background:linear-gradient(180deg,rgba(255,94,168,.2),rgba(255,94,168,.03))}
.choice.is-dim{opacity:.32}

.typing{width:100%;display:flex;gap:10px}.typing input{flex:1}.typing .btn{flex:none}
.feedback{min-height:26px;font-family:var(--font-thai);font-weight:600;font-size:1rem;text-align:center}
.feedback.ok{color:var(--cyan)} .feedback.bad{color:var(--magenta)}
.feedback .ans{color:var(--gold)}

/* ---------- results ---------- */
.console--results{text-align:center;align-items:center;max-width:480px}
.results-score{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.results-score-num{font-family:var(--font-display);font-weight:700;font-size:3.8rem;line-height:1;color:var(--gold);text-shadow:0 0 36px rgba(255,207,92,.5)}
.results-score-label{font-family:var(--font-thai);color:var(--dim);font-size:.85rem}
.results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%}
.res-cell{background:var(--glass);border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:15px;display:flex;flex-direction:column;gap:3px}
.res-num{font-family:var(--font-display);font-weight:700;font-size:1.55rem;color:var(--text)}
.res-lbl{font-size:.72rem;color:var(--dim)}
.res-tier-msg{font-family:var(--font-thai);color:var(--violet);font-weight:600;font-size:1.05rem}
.res-save{width:100%;min-height:22px;font-family:var(--font-thai);font-size:.84rem;color:var(--dim)}
.res-save .saved{color:var(--cyan)}
.results-actions{display:flex;gap:12px;width:100%}.results-actions .btn{flex:1}

/* ---------- leaderboard ---------- */
.console--board{align-items:stretch;text-align:center;max-width:520px}
.board-list{display:flex;flex-direction:column;gap:8px;max-height:54vh;overflow-y:auto;padding-right:4px}
.board-loading{color:var(--dim);font-family:var(--font-thai);padding:20px}
.board-row{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--stroke-soft);opacity:0;animation:rowin .4s ease forwards}
@keyframes rowin{to{opacity:1}}
.board-row.me{border-color:var(--cyan);background:linear-gradient(90deg,rgba(70,240,208,.14),transparent)}
.board-rank{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--dim);text-align:center}
.board-row:nth-child(1) .board-rank{color:var(--gold)}
.board-row:nth-child(2) .board-rank{color:#cfd8ff}
.board-row:nth-child(3) .board-rank{color:var(--rose)}
.board-info{text-align:left;overflow:hidden}
.board-name{font-weight:600;font-family:var(--font-thai);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-meta{font-size:.72rem;color:var(--dim)}
.board-score{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--gold)}

/* ---------- fx ---------- */
.particle{position:fixed;z-index:6;border-radius:50%;pointer-events:none}
.combo-pop{position:fixed;z-index:7;font-family:var(--font-display);font-weight:700;pointer-events:none;
  color:var(--gold);text-shadow:0 0 20px rgba(255,207,92,.8)}
.screen-flash{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0}
.screen-flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:0}25%{opacity:.5}100%{opacity:0}}
.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ---------- responsive ---------- */
@media(max-width:560px){
  .panel{padding:24px 18px}
  .mode-grid{grid-template-columns:1fr}
  .hud{gap:12px;flex-wrap:wrap}
  .orbit-wrap{width:200px;height:200px}
  .orbit-ability{font-size:2.4rem}
  .title-en{letter-spacing:.2em}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .nebula{animation:none}.planet-body,.planet-ring,.planet-moon{animation:none}
  .reveal{opacity:1;transform:none}
}