/* SUNGRAZER — style.css */
:root{
  --ink:#dfe8ff;
  --cyan:#7ef3ff;
  --mint:#86ff9e;
  --rose:#ff6b8a;
  --gold:#ffd257;
  --bg:#04060f;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--mono);-webkit-tap-highlight-color:transparent}
#stage{position:fixed;inset:0}
#game{position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair}

/* ---------- overlays ---------- */
#ui{position:absolute;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:flex-start;text-align:center;gap:14px;padding:24px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 90% at 50% 40%,rgba(6,10,26,.55),rgba(3,4,12,.88));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  pointer-events:auto;z-index:5}
.screen.on{display:flex}
/* centred when it fits, scrollable from the top when it doesn't (short landscape phones) */
.screen>:first-child{margin-top:auto}
.screen>:last-child{margin-bottom:auto}

/* input-specific copy: body.touch is set for coarse-pointer devices */
.touch-only{display:none !important}
body.touch .touch-only{display:flex !important}
body.touch .keys-only{display:none !important}
body:not(.fs) .fs-only{display:none !important}
h1{font-size:clamp(34px,10vw,100px);font-weight:800;letter-spacing:.14em;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(126,243,255,.9),0 0 34px rgba(126,243,255,.55),0 2px 0 rgba(0,0,0,.6)}
h2{font-size:clamp(26px,5vw,44px);letter-spacing:.12em;color:var(--ink);
  text-shadow:0 0 12px rgba(180,220,255,.5)}
h2.red{color:var(--rose);text-shadow:0 0 14px rgba(255,107,138,.6)}
.tag{letter-spacing:.3em;color:#9fb4d8;font-size:15px;text-transform:uppercase}

/* menu controls table */
.controls{display:flex;flex-direction:column;gap:6px;min-width:min(440px,88vw);margin:6px 0 4px}
.crow{display:flex;justify-content:space-between;gap:18px;font-size:13px;
  padding:7px 14px;border:1px solid rgba(150,190,255,.14);border-radius:8px;
  background:rgba(20,30,60,.28)}
.crow span{color:#8ea7cf;letter-spacing:.18em;font-size:11px;align-self:center}
.crow b{font-weight:700;color:var(--ink);letter-spacing:.06em}

.btn{pointer-events:auto;font-family:var(--mono);font-size:15px;letter-spacing:.18em;
  color:var(--bg);background:var(--cyan);border:0;border-radius:10px;padding:14px 30px;
  cursor:pointer;font-weight:800;
  box-shadow:0 0 18px rgba(126,243,255,.45),inset 0 -2px 0 rgba(0,0,0,.25)}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.big{font-size:17px;padding:16px 34px}
.hint{color:#8ea7cf;font-size:12px;letter-spacing:.14em}
.btn.ghost{color:var(--ink);background:rgba(20,34,64,.55);font-size:13px;padding:11px 22px;
  border:1px solid rgba(126,243,255,.35);box-shadow:none}
.btn.ghost:hover{border-color:var(--cyan);filter:none}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btncol{display:flex;flex-direction:column;gap:10px;min-width:min(280px,80vw)}
.best{color:var(--gold);letter-spacing:.2em;font-size:13px;min-height:16px}
.ver{color:#4f6690;font-size:11px;letter-spacing:.2em}

/* settings */
.opts{display:flex;flex-direction:column;gap:8px;min-width:min(460px,90vw)}
.orow{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 14px;border:1px solid rgba(150,190,255,.14);border-radius:8px;
  background:rgba(20,30,60,.28)}
.orow>span{color:#8ea7cf;letter-spacing:.18em;font-size:11px}
.seg{display:flex;border:1px solid rgba(126,243,255,.3);border-radius:7px;overflow:hidden}
.seg button{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:#9fb4d8;background:transparent;border:0;padding:8px 12px;cursor:pointer;min-width:52px}
.seg button+button{border-left:1px solid rgba(126,243,255,.2)}
.seg button.on{color:var(--bg);background:var(--cyan)}
.vol{display:flex;align-items:center;gap:10px}
.vol b{font-size:12px;min-width:4ch;text-align:right}
.vol input{width:150px;accent-color:var(--cyan)}

/* records */
.recs{display:grid;grid-template-columns:auto auto auto auto auto;gap:6px 18px;font-size:13px;
  padding:14px 20px;border:1px solid rgba(150,190,255,.18);border-radius:12px;
  background:rgba(16,24,50,.5);min-width:min(420px,90vw);text-align:right}
.recs .h{color:#8ea7cf;font-size:10px;letter-spacing:.18em}
.recs .r{color:#5f78a6}
.recs .s{color:var(--gold);font-weight:700}
.recs .me{color:var(--cyan)}
.recs .empty{grid-column:1/-1;text-align:center;color:#8ea7cf;letter-spacing:.12em}
.sub{color:#8ea7cf;font-size:12px;letter-spacing:.22em}

/* level-up cards */
.cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:1080px}
.card{width:min(270px,27vw);min-height:210px;display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:20px 16px;text-align:center;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,rgba(30,44,86,.75),rgba(14,20,44,.85));
  border:1px solid rgba(126,243,255,.35);border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
  animation:pop .18s ease}
.card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--cyan);
  box-shadow:0 0 26px rgba(126,243,255,.35),0 14px 34px rgba(0,0,0,.5)}
.card.trade{border-color:rgba(255,171,64,.55)}
.card.trade:hover{border-color:var(--gold);box-shadow:0 0 26px rgba(255,210,87,.35)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.card .g{font-size:44px;line-height:1;color:var(--cyan);
  text-shadow:0 0 16px rgba(126,243,255,.7)}
.card.trade .g{color:var(--gold);text-shadow:0 0 16px rgba(255,210,87,.7)}
.card .n{font-size:16px;font-weight:800;letter-spacing:.1em}
.card .p{font-size:11px;color:#8ea7cf;letter-spacing:.28em}
.card .d{font-size:13px;line-height:1.45;color:#c6d5f4}
.card .k{margin-top:auto;font-size:11px;color:#5f78a6;letter-spacing:.24em}

/* game-over stats */
.stats{display:grid;grid-template-columns:auto auto;gap:6px 26px;font-size:14px;
  padding:16px 24px;border:1px solid rgba(150,190,255,.18);border-radius:12px;
  background:rgba(16,24,50,.5);min-width:min(360px,86vw)}
.stats .k{color:#8ea7cf;text-align:left;letter-spacing:.16em;font-size:12px;align-self:center}
.stats .v{color:var(--ink);text-align:right;font-weight:700}
.stats .v.gold{color:var(--gold)}

/* touch controls */
#joy{position:absolute;width:120px;height:120px;border-radius:50%;
  border:1px solid rgba(126,243,255,.35);background:rgba(20,40,70,.25);
  display:none;pointer-events:none;z-index:3}
#joyKnob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;
  background:rgba(126,243,255,.4);box-shadow:0 0 14px rgba(126,243,255,.5)}
#tbtns{position:absolute;right:16px;bottom:16px;display:none;gap:14px;z-index:4}
#tbtns.on{display:flex}
.tbtn{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:.12em;color:var(--ink);user-select:none;touch-action:none;
  border:1px solid rgba(150,190,255,.4);background:rgba(20,34,64,.45);
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.tbtn.held{background:rgba(126,243,255,.35);box-shadow:0 0 18px rgba(126,243,255,.5)}

/* in-run pause / fullscreen buttons (top centre, clear of HP and score) */
#hudBtns{position:absolute;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);
  display:none;gap:8px;z-index:4}
#hudBtns.on{display:flex}
.hbtn{width:40px;height:36px;border-radius:9px;font-size:14px;line-height:1;color:var(--ink);
  font-family:var(--mono);cursor:pointer;opacity:.75;
  border:1px solid rgba(150,190,255,.35);background:rgba(20,34,64,.45)}
.hbtn:hover{opacity:1}

/* headless test log (hidden; used by --dump-dom) */
#selog{position:absolute;left:-9999px;top:0;white-space:pre-wrap}

/* short landscape phones: drop the controls card so the start button stays in view */
@media (max-height:520px){
  .screen{gap:10px;padding:14px}
  .controls,body.touch .controls.touch-only{display:none !important}
  h1{font-size:clamp(30px,9vh,64px)}
  .hbtn{width:36px;height:32px}
}
@media (max-width:420px){ .hbtn{width:36px} }