:root{
  --ink:#070713;
  --panel:#101026;
  --glass:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.12);
  --txt:#f7f8ff;
  --accent:#7cf8ff;
  --accent2:#ff8ef2;
  --good:#4dff9a;
  --bad:#ff5d68;

  /* svg bg tokens (question/menu palette) */
  --space-top:#000000;
  --space-bottom:#020204;
  --nebula-core:#4e7885;
  --nebula-mid:#141a37;

  /* battle variant */
  --space-top-battle:#04050a;
  --space-bottom-battle:#0a0d18;
  --nebula-core-battle:#000000;
  --nebula-mid-battle:#1b2146;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* ---------- SVG BG ---------- */
#bg-svg-wrap{ position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,var(--space-top),var(--space-bottom)); }
#bg-svg{ width:100%; height:100%; display:block; }
.star{ fill:url(#gStar); opacity:.7; }
.twinkle{ fill:url(#gStar); opacity:.65; transform-origin:center; animation:twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle{
  0%,100%{ opacity:.45; transform:scale(0.9); }
  50%{ opacity:1; transform:scale(1.15); }
}
.meteor{
  stroke:url(#gMeteor); stroke-width:3.5; stroke-linecap:round;
  filter: drop-shadow(0 0 6px rgba(255,145,77,.65));
  opacity:.9;
}
.spark { fill: url(#gSpark); opacity:.95; filter: drop-shadow(0 0 6px rgba(255,190,120,.8)); }
@media (prefers-reduced-motion: reduce){ .twinkle{ animation:none } }

/* ---------- App layout ---------- */
#si_app{min-height:100vh;max-width:1100px;margin:0 auto;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:22px 18px}
#si_app .canvas-wrap{ width:100%; display:flex; justify-content:center; align-items:center; background:none; padding:0; }

/* Canvas: prevent page scroll/selection while playing */
#si_app #game{
  display:block; width:100%; height:auto; background:transparent;
  touch-action:none; -webkit-user-select:none; user-select:none;
}

/* HUD */
header#hud{width:100%;max-width:960px;margin:8px auto 10px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.hidden{display:none !important}
.hud-left,.hud-right{display:flex;gap:12px;align-items:center}
.hud-center{flex:1;display:flex;justify-content:center}
#progress{width:260px;height:10px;background:var(--glass);border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
#progress>.fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s ease}

/* Screens */
#si_app .screen{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:24px}
#si_app .screen.shown{display:grid}
#si_app .nobox .flow{max-width:860px;padding:0 8px;margin:0 auto}
#si_app .logo{font-size:56px;margin:0 0 8px}
#si_app .logo span{color:var(--accent2)}
#si_app .tag{opacity:.92;margin:0 0 12px}

/* Cards / grids */
#si_app .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:900px;margin:0 auto}
#si_app .planets .skill-card,#si_app .planets .diff-card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
#si_app .planets .skill-card::before,#si_app .planets .diff-card::before{
  content:""; position:absolute; top:-30px; right:-30px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #7cf8ff 30%, transparent 60%); opacity:.18; transform:scale(1); transition:transform .3s ease;
}
#si_app .planets .skill-card:hover::before,#si_app .planets .diff-card:hover::before{ transform:scale(1.2) translate(-4px,4px) }
#si_app .planets .skill-card:hover,#si_app .planets .diff-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.35) }
#si_app .skill-title{font-weight:900;margin-bottom:6px}
#si_app .skill-samples{opacity:.9;font-size:.95rem}

/* Customize */
#si_app .customize-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;max-width:900px;margin:0 auto}
#si_app #ship-preview{width:100%;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
#si_app .swatch-group{margin:10px 0}
#si_app .swatch-group label{display:block;text-align:left;margin:4px 0 6px;opacity:.95}
#si_app .chips{display:flex;flex-wrap:wrap;gap:8px}
#si_app .chip{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.8);cursor:pointer}
#si_app .preset-row{margin-top:10px;display:flex;gap:8px}

/* Buttons */
#si_app .btn, #hud .btn{appearance:none;border:none;background:var(--glass);border:1px solid var(--line);color:var(--txt);padding:12px 18px;border-radius:14px;cursor:pointer;font-weight:900;letter-spacing:.2px;transition:transform .12s ease, background .12s ease, box-shadow .12s ease}
#si_app .btn:hover, #hud .btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.35)}
#si_app .btn.primary, #hud .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0b12}
#si_app .btn.ghost{background:transparent}
#si_app .cta-row{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* Modal / Sort popup */
#si_app .modal{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,20,.55)}
#si_app .modal-card{background:#0f1022;border:1px solid var(--line);border-radius:18px;min-width:320px;max-width:560px;padding:22px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
#si_app .sort-card{background:linear-gradient(180deg,#101133,#0f1022)}
#si_app .sort-card .word{font-size:42px;line-height:1.1;font-weight:900;margin-bottom:14px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
#si_app .sort-card .chips-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#si_app .sort-card .hint{opacity:.95;margin-top:20px;color:#b1b1b1;text-align:center}
#si_app .opt{padding:14px 18px;background:linear-gradient(180deg,#1a1b55,#1a1850);font-size:1.2rem;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;cursor:pointer;font-weight:900;letter-spacing:.2px}
#si_app .opt:hover{outline:2px solid var(--accent)}
#si_app .opt.correct{background:rgba(77,255,154,.22);border-color:var(--good)}
#si_app .opt.wrong{background:rgba(255,93,104,.22);border-color:var(--bad)}

#si_app #screen-win h2{font-size:42px;margin-bottom:8px}
#si_app #screen-gameover h2{font-size:34px;margin-bottom:4px}
#si_app .howlist{max-width:720px;margin:0 auto;text-align:left;line-height:1.6}

#sort-word{
  text-align:center;
  font-size:4rem !important;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1200px){
  #si_app{ padding:20px 16px; }
  header#hud{ max-width: 900px; }
  #progress{ width: 240px; }
  #si_app .logo{ font-size: 52px; }
  #si_app .grid{ gap:14px; }
  #si_app .customize-wrap{ grid-template-columns: 1.1fr 1fr; }
  #sort-word{ font-size: 3.2rem !important; }
}

@media (max-width: 992px){
  header#hud{ max-width: 820px; gap:10px; }
  .hud-left, .hud-right{ gap:10px; }
  #progress{ width:220px; height:10px; }
  #si_app .logo{ font-size: 46px; }
  #si_app .screen{ padding:20px; }
  #si_app .grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 820px; }
  #si_app .customize-wrap{ grid-template-columns: 1fr 1fr; gap:16px; }
  #si_app .btn, #hud .btn{ padding:12px 16px; border-radius:12px; }
  #si_app .modal-card{ min-width: 300px; max-width: 520px; }
  #si_app .sort-card .word{ font-size: 38px; }
  #si_app .opt{ font-size:1.1rem; padding:12px 16px; }
}

@media (max-width: 840px){
  header#hud{ max-width: 720px; flex-wrap: wrap; justify-content:center; row-gap: 8px; }
  .hud-left, .hud-right{ order:2; }
  .hud-center{ order:1; width:100%; justify-content:center; }
  #progress{ width: 70%; max-width: 520px; }

  #si_app .logo{ font-size: 40px; }
  #si_app .tag{ font-size: 0.98rem; }
  #si_app .nobox .flow{ max-width: 760px; }
  #si_app .customize-wrap{ grid-template-columns: 1fr; max-width: 720px; }
  #si_app #ship-preview{ max-width: 520px; margin: 0 auto; }
  .chips{ justify-content: center; }

  #si_app .modal-card{ width: calc(100% - 48px); max-width: 560px; }
  #sort-word{ font-size: 2.8rem !important; }
}

@media (max-width: 768px){
  #si_app .grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; max-width: 680px; }
  #si_app .planets .skill-card:hover,
  #si_app .planets .diff-card:hover{ transform:none; box-shadow:none; }

  #si_app .logo{ font-size: 34px; }
  #si_app #screen-win h2{ font-size: 34px; }
  #si_app #screen-gameover h2{ font-size: 28px; }
  .hud-right{ flex-wrap: wrap; justify-content:center; }
  #si_app .opt{ padding:12px 16px; font-size:1.05rem; }
  #sort-word{ font-size: 2.4rem !important; }
}

@media (max-width: 640px){
  header#hud{ max-width: 100%; margin: 6px auto 10px; }
  #progress{ width: 82%; max-width: none; }
  #si_app .screen{ padding:16px; }
  #si_app .nobox .flow{ max-width: 560px; }
  #si_app .logo{ font-size: 28px; }
  #si_app .tag{ font-size: 0.95rem; }
  #si_app .grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: 560px; }
  #si_app #ship-preview{ max-width: 440px; }
  #si_app .chip{ width:26px; height:26px; }
  #si_app .modal-card{ padding:18px; }
  #si_app .sort-card .word{ font-size: 32px; }
  #si_app .opt{ font-size: 1rem; padding: 10px 14px; }
  #si_app .sort-card .hint{ font-size: 0.95rem; }
}

@media (max-width: 520px){
  header#hud{ padding: 0 8px; text-align:center; }
  .hud-left strong{ display:block; }
  #progress{ height: 8px; }
  #si_app .cta-row{ flex-direction: column; align-items: stretch; }
  #si_app .btn, #hud .btn{ width: 100%; }
  #si_app .logo{ font-size: 24px; }
  #si_app #screen-win h2{ font-size: 28px; }
  #sort-word{ font-size: 2.1rem !important; }
  #si_app .opt{ font-size: 0.98rem; padding: 10px 12px; }
  #si_app .grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (max-width: 420px){
  #si_app .modal-card{ width: calc(100% - 32px); min-width: 0; }
  #si_app .grid{ grid-template-columns: 1fr; max-width: 360px; }
  #si_app #ship-preview{ max-width: 320px; }
  #sort-word{ font-size: 1.8rem !important; }
}