:root { --gold:#b6edcf; --gold-dim:#5caa87; --panel:rgba(13,20,20,.88); --panel-line:rgba(200,230,218,.18); --text:#eef3f1; --dim:#b4c4bf; --xp:#81b9d4; }
body { font-size:15px; background:#111917; }
* { letter-spacing:0 !important; }
button, input, select { font-family:inherit; }
button { background:#1f302b; font-size:14px; border-radius:5px; }
button.primary { background:#315e49; border-color:#74b798; font-size:17px; }
button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #b6edcf; outline-offset:3px; }
h1,h2,h3,.serif { font-family:inherit; }
#astra-brand { left:22px; top:20px; display:flex; flex-direction:column; gap:3px; pointer-events:auto; text-shadow:0 2px 8px #000b; }
#astra-brand a { color:#f1f6f2; font-size:13px; font-weight:650; text-decoration:none; }
#astra-brand strong { margin-left:8px; color:#b6edcf; font-size:20px; font-weight:750; }
#astra-brand > span { font-size:10px; color:#ccd8d1; }
#topleft { left:22px; top:88px; padding:11px 14px; min-width:0; width:235px; border-radius:6px; background:rgba(13,20,20,.8); }
#topleft > div:first-child { display:flex; align-items:center; gap:7px; }
#pname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; font-size:13px; }
#rename-btn { font-size:10px; padding:1px 5px; margin:0; }
#lvlwrap { float:none; margin-left:auto; font-size:11px; white-space:nowrap; }
#goldrow { font-size:12px; margin-top:5px; }
.bar-outer { height:6px; border-radius:2px; margin-top:5px; }
.bar-outer i { border-radius:2px; }
#hp-text { display:none; }
#topright { top:18px; right:20px; max-width:calc(100% - 300px); gap:5px; }
.chip,button.chip { font-size:12px; padding:6px 10px; border-radius:5px; background:rgba(13,20,20,.82); }
.chipgroup .chip:first-child { border-radius:5px 0 0 5px; }
.chipgroup .chip.dd { border-radius:0 5px 5px 0; }
#astra-render { right:20px; top:64px; width:284px; border:1px solid var(--panel-line); border-radius:6px; background:rgba(13,20,20,.97); font-size:12px; z-index:27; }
#astra-render summary { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; cursor:pointer; list-style:none; }
#astra-render summary::before { content:'+'; color:var(--gold); margin-right:9px; }
#astra-render[open] summary::before { content:'\2212'; }
#astra-fps { margin-left:auto; color:var(--gold); font-variant-numeric:tabular-nums; }
.astra-body { padding:0 12px 12px; max-height:calc(100dvh - 180px); overflow:auto; }
.astra-capture { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; padding-bottom:12px; }
.astra-capture button { font-size:11px; padding:6px 3px; min-width:0; min-height:30px; }
.astra-capture button:disabled { opacity:.45; cursor:default; }
.astra-capture output { grid-column:1 / -1; min-height:16px; color:var(--dim); font-size:11px; overflow-wrap:anywhere; }
body.astra-benchmark > :not(#gl):not(#astra-render):not(#astra-brand):not(#version) { visibility:hidden; pointer-events:none; }
body.astra-benchmark #gl { pointer-events:none; }
.astra-modes { display:grid; grid-template-columns:1fr 1fr; border:0; border-bottom:1px solid var(--panel-line); padding:0 0 12px; gap:8px; }
.astra-modes legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.astra-modes label { display:flex; align-items:center; gap:6px; padding:6px; background:#1a2923; border-radius:4px; }
.astra-row { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:37px; }
.astra-row select { background:#1b2c25; color:var(--text); border:1px solid var(--panel-line); border-radius:4px; padding:4px; max-width:122px; }
.astra-row input[type=range] { width:112px; }
.astra-body input { accent-color:#a5d9bb; }
.astra-metrics { border-top:1px solid var(--panel-line); padding-top:10px; margin-top:8px; display:grid; grid-template-columns:1fr auto; gap:5px 8px; font-size:11px; }
.astra-metrics dt { color:var(--dim); }
.astra-metrics dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
#quests { top:124px; right:20px; width:245px; font-size:12px; }
#astra-render[open] ~ #quests { display:none; }
#quests h3 { font-size:10px; color:#d7e5dd; margin-bottom:7px; }
.quest { padding:9px 11px; border-radius:4px; }
#hotbar { bottom:24px; gap:5px; }
.slot { width:66px; min-width:0; height:64px; padding:6px 2px; border-radius:5px; font-size:10px; background:rgba(13,20,20,.86); }
.slot b { font-size:22px; line-height:26px; }
.slot .key { font-size:10px; }
#chat { left:22px; bottom:112px; width:280px; font-size:12px; }
#chat-input { font-size:12px; padding:8px 10px; }
#prompt { bottom:109px; font-size:14px; padding:8px 16px; border-radius:5px; }
#controls-hint { display:none; }
#version { font-size:10px; color:#d8e4df; text-shadow:0 1px 3px #000; opacity:.8; }
.panel { font-size:14px; border-radius:6px; }
.panel h2 { font-size:22px; }
.srow { font-size:14px; }
.srow div span { font-size:12px; }
.nameplate { font-size:12px; }
#loading, #nogpu { background:#111917; }
#loading h1 { font-size:28px; text-shadow:none; color:#f1f6f2; }
#loading h1 span { color:var(--gold); }
#load-msg { max-width:min(680px,calc(100vw - 40px)); overflow-wrap:anywhere; }
#welcome { background:rgba(8,15,12,.5); backdrop-filter:blur(4px); }
#welcome .card,#nogpu .card { border-radius:6px; width:min(420px,calc(100% - 28px)); }
#welcome h1 { font-size:26px !important; text-shadow:none; }
#welcome .sub { font-size:15px; }
#welcome input { font-size:17px; }
@media(max-width:760px) {
  #astra-brand { top:12px; left:12px; }
  #astra-brand a { font-size:10px; } #astra-brand strong { font-size:16px; margin-left:4px; }
  #astra-brand > span { font-size:9px; }
  #topleft { top:72px; left:12px; width:186px; padding:8px 10px; }
  #topright { top:12px; right:10px; max-width:150px; }
  #zonechip,#online,#ping { display:none !important; }
  .chip,button.chip { padding:5px 8px; }
  #astra-render { top:62px; right:10px; width:130px; }
  #astra-render[open] { width:min(268px,calc(100vw - 24px)); z-index:35; }
  #astra-render[open] ~ #topleft { visibility:hidden; }
  #astra-render summary { font-size:10px; padding:8px; }
  #quests { top:190px; right:10px; width:158px; font-size:10px; }
  #quests h3 { font-size:9px; }
  #hotbar { width:calc(100% - 20px); bottom:12px; gap:3px; }
  .slot { flex:1; width:0; height:53px; font-size:8px; overflow:hidden; }
  .slot b { font-size:19px; line-height:23px; } .slot .key { font-size:8px; }
  #chat { display:none; }
  #prompt { bottom:82px; font-size:12px; max-width:calc(100% - 24px); text-align:center; }
  body.touchmode #prompt { bottom:90px; }
  #dpad { width:120px; height:120px; left:14px; bottom:99px; }
  #tatk { bottom:110px; right:14px; } #tfire { bottom:177px; right:65px; } #tjump { bottom:246px; right:14px; }
}
@media(max-height:520px) {
  #quests { display:none; } #topleft { top:67px; } #astra-render { top:60px; }
  .astra-body { max-height:calc(100dvh - 115px); }
}