/* Vial — a lab bench at night: dark glass, warm amber, one committed theme. */
:root{
  --ground:#0A1013; --panel:#101A1E; --panel2:#16242A; --raise:#1C2E35;
  --line:#22343B; --line2:#31484F;
  --ink:#ECE8E0; --ink2:#9EACB1; --ink3:#66787F;
  --amber:#F2A93B; --hot:#FFF1D8; --good:#59C78C; --warn:#E8A13B; --bad:#E8654B;
  --r:12px; --rs:7px;
  --fd:'Archivo',system-ui,sans-serif;
  --fb:'IBM Plex Sans',system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--fb); font-size:14px; line-height:1.5;
  display:grid; grid-template-rows:auto 1fr; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--fd); font-weight:600; margin:0}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
button:disabled{opacity:.4; cursor:not-allowed}
button:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.mono{font-family:var(--fm); font-variant-numeric:tabular-nums}
.dim{color:var(--ink3)}
.tiny{font-size:11.5px; color:var(--ink3); margin:0 0 10px; max-width:46ch}

/* ---- top ---- */
.top{display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px}
.brand h1{font-size:16px; letter-spacing:.02em}
.brand p{margin:0; font-size:11px; color:var(--ink3)}
.mark{width:24px; height:24px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 34% 30%, var(--hot) 0 12%, var(--amber) 18% 36%, #7A4A12 48% 64%, #16242A 76%);
  box-shadow:0 0 14px rgba(242,169,59,.4)}
.lang{margin-left:auto; background:var(--panel2); color:var(--ink2); border:1px solid var(--line2);
  border-radius:var(--rs); padding:5px 8px; font-size:12px}

/* ---- layout ---- */
main{display:grid; grid-template-columns:minmax(0,1fr) 330px; min-height:0}
.stage{position:relative; background:#060A0C; min-width:0}
#vial{width:100%; height:100%; display:block; touch-action:none}
.stage-top{position:absolute; left:14px; top:12px; display:flex; align-items:center; gap:8px}
.chip-stat{font-size:10.5px; color:var(--ink3); background:rgba(9,15,18,.7); border:1px solid var(--line);
  border-radius:999px; padding:3px 9px; backdrop-filter:blur(5px)}
.status{position:absolute; left:0; right:0; bottom:16px; text-align:center; margin:0;
  font-family:var(--fd); font-size:15px; color:var(--ink2); pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.8)}
.status.bad{color:var(--bad)}
.dead{position:absolute; inset:0; display:none; place-items:center; background:rgba(6,10,12,.72); backdrop-filter:blur(3px)}
.dead.on{display:grid}

/* ---- panel ---- */
.panel{background:var(--panel); border-left:1px solid var(--line); overflow-y:auto;
  display:flex; flex-direction:column; min-width:0}
.block{padding:16px; border-bottom:1px solid var(--line)}
.block.grow{flex:1}
.block h2{font-family:var(--fm); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); display:flex; align-items:center; gap:5px; margin-bottom:11px}
.block h2 .dim{margin-left:auto; letter-spacing:0; text-transform:none; font-size:10.5px}
.mt{margin-top:18px}

.needs{display:grid; grid-template-columns:auto 1fr; gap:7px 11px; align-items:center}
.needs label{font-size:12px; color:var(--ink2)}
.meter{height:6px; background:var(--line); border-radius:3px; overflow:hidden}
.meter i{display:block; height:100%; width:0; border-radius:3px; background:var(--good); transition:width .5s, background .5s}
.meter i.warn{background:var(--warn)}
.meter i.critical{background:var(--bad)}

.care{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.act{padding:10px 8px; border-radius:var(--rs); background:var(--panel2); border:1px solid var(--line2);
  font-size:12.5px; color:var(--ink); transition:.14s}
.act:hover{border-color:var(--amber); background:var(--raise)}
.act.ghost{color:var(--ink3); grid-column:1/-1}

.lab{font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); margin:12px 0 6px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{padding:6px 11px; border-radius:999px; border:1px solid var(--line2); font-size:12px;
  color:var(--ink2); transition:.14s}
.chip:hover{color:var(--ink); border-color:var(--ink3)}
.chip.on{background:var(--amber); border-color:var(--amber); color:#150E03; font-weight:600}
.primary{padding:10px 16px; border-radius:var(--rs); background:var(--amber); color:#150E03;
  font-weight:600; font-size:13px; transition:.14s}
.primary:hover:not(:disabled){background:var(--hot)}
.wide{width:100%; margin-top:14px}
.trial{margin:10px 0 0; font-size:13px; color:var(--ink2); min-height:19px}
.judge{display:none; gap:7px; margin-top:9px}
.judge.on{display:flex}
.reward{flex:1; padding:9px; border-radius:var(--rs); background:var(--good); color:#04160D;
  font-weight:600; font-size:12.5px}
.reward:hover{filter:brightness(1.12)}
.ghost{padding:9px 13px; border:1px solid var(--line2); border-radius:var(--rs); color:var(--ink3); font-size:12.5px}
.ghost:hover{border-color:var(--ink3); color:var(--ink2)}
.link{margin-top:12px; font-size:11px; color:var(--ink3); text-decoration:underline; padding:0}
.link:hover{color:var(--bad)}

/* ---- info ---- */
.info{width:15px; height:15px; flex:none; border-radius:50%; border:1px solid var(--line2);
  font-family:var(--fm); font-size:9.5px; color:var(--ink3); display:inline-grid; place-items:center; padding:0}
.info:hover{border-color:var(--amber); color:var(--amber)}
.stage-top .info{width:20px; height:20px; font-size:11px; background:rgba(9,15,18,.7); backdrop-filter:blur(5px)}
#infoPop{position:fixed; z-index:70; width:min(330px,calc(100vw - 16px)); background:var(--panel2);
  border:1px solid var(--line2); border-radius:var(--r); padding:13px 15px;
  box-shadow:0 14px 34px rgba(0,0,0,.55); display:none}
#infoPop.open{display:block}
#infoPop h4{font-family:var(--fd); font-size:13.5px; margin:0 0 6px; color:var(--ink)}
#infoPop p{margin:0; font-size:12.2px; line-height:1.5; color:var(--ink2)}

/* ---- boot ---- */
#boot{position:fixed; inset:0; z-index:80; background:var(--ground); display:grid; place-items:center; transition:opacity .5s}
#boot.done{opacity:0; pointer-events:none}
.boot-inner{text-align:center; padding:30px; max-width:420px}
.boot-inner h1{font-size:40px; letter-spacing:.06em; margin-bottom:6px}
.sub{margin:0 0 26px; font-size:13px; color:var(--ink3)}
.jar{width:54px; height:78px; margin:0 auto 22px; border:2px solid var(--line2);
  border-radius:6px 6px 16px 16px; position:relative; overflow:hidden; background:rgba(30,50,56,.3)}
.jar span{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 8px var(--amber); animation:drift 3.4s ease-in-out infinite}
.jar span:nth-child(1){left:14px; top:30px}
.jar span:nth-child(2){left:32px; top:48px; animation-delay:-1.2s}
.jar span:nth-child(3){left:23px; top:18px; animation-delay:-2.3s}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(11px,-13px)}66%{transform:translate(-9px,9px)}}
.track{height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:9px}
#loadBar{height:100%; width:0; background:linear-gradient(90deg,var(--amber),var(--hot)); transition:width .3s}
#loadLabel{margin:0 0 5px; font-size:12px; color:var(--ink2)}
#loadDetail{margin:0; font-size:11px; color:var(--ink3)}
#loadDetail.err{color:var(--bad)}

/* ---- responsive (must stay last) ---- */
@media (max-width:820px){
  body{overflow:auto; height:auto; min-height:100%}
  main{grid-template-columns:minmax(0,1fr); grid-template-rows:56vh auto}
  .panel{border-left:0; border-top:1px solid var(--line); overflow:visible}
  .care{grid-template-columns:1fr 1fr 1fr}
  .act.ghost{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }