/* ============ ANGIO SIMULATOR — GAME UI ============ */
:root{
  --bg:#050a14; --bg2:#0a1424; --card:#0d1a2e; --card2:#122238; --line:#1c3452;
  --txt:#dcebfa; --dim:#7e97b8;
  --acc:#22d3ee; --acc-dk:#0891b2; --acc2:#34f5c5;
  --warn:#ffb454; --bad:#ff4d6a; --good:#2dd881;
  --fD:'Orbitron','Rajdhani',sans-serif;
  --fU:'Rajdhani','Segoe UI',sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{background:var(--bg); color:var(--txt); font-family:var(--fU); font-size:16px; overscroll-behavior:none;}
#app{position:fixed; inset:0; overflow:hidden; touch-action:manipulation;}
.hidden{display:none !important;}
button{font-family:var(--fU); color:inherit; user-select:none; -webkit-user-select:none;}
input{font-family:var(--fU);}
kbd{display:inline-block; font-family:var(--fU); font-size:10px; font-weight:700; color:var(--acc);
  border:1px solid rgba(34,211,238,.45); border-bottom-width:2px; border-radius:4px;
  padding:0 5px; margin-left:6px; line-height:15px; vertical-align:1px; background:rgba(34,211,238,.08);}
@media (hover:none) and (pointer:coarse){ kbd{display:none;} }

.screen{position:absolute; inset:0; display:none; flex-direction:column;}
.screen.active{display:flex;}

/* scanline + vignette FX for menu-type screens */
.scan{position:absolute;}
.scan::after{content:''; position:absolute; inset:0; pointer-events:none; z-index:40;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;}

/* ---------- GAME TITLE ---------- */
.game-title{font-family:var(--fD); font-weight:900; letter-spacing:4px; margin:0;
  font-size:34px; color:#fff; text-align:center; line-height:1.05;
  text-shadow:0 0 18px rgba(34,211,238,.75), 0 0 60px rgba(34,211,238,.35);}
.game-title span{display:block; color:var(--acc); font-weight:600; font-size:.52em; letter-spacing:10px;
  animation:flick 4s infinite;}
.game-title.sm{font-size:24px;}
@keyframes flick{ 0%,93%,96%,100%{opacity:1;} 94%,97%{opacity:.45;} }

/* ---------- BUTTONS ---------- */
.gbtn{display:block; width:100%; position:relative; cursor:pointer;
  background:linear-gradient(180deg,#12384f,#0b2438); color:var(--acc);
  border:1px solid rgba(34,211,238,.5); border-radius:6px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  font-family:var(--fD); font-weight:700; font-size:14px; letter-spacing:2px; text-transform:uppercase;
  padding:14px 12px; transition:filter .1s, transform .05s;}
.gbtn:hover{filter:brightness(1.25);}
.gbtn:active{transform:translateY(2px);}
.gbtn:disabled{opacity:.3; cursor:default;}
.gbtn.xl{font-size:16px; padding:17px;}
.gbtn.prime{background:linear-gradient(180deg,#19bcd8,#0a7f9c); color:#02141c; border-color:#6ee9ff;
  box-shadow:0 0 22px rgba(34,211,238,.35);}
.gbtn.go{background:linear-gradient(180deg,#22d896,#0d9464); color:#02180e; border-color:#7cf7c9;
  box-shadow:0 0 22px rgba(52,245,197,.3);}
.gbtn.danger{background:linear-gradient(180deg,#d84a5e,#8f1f30); color:#fff; border-color:#ff8b9c;}
.gbtn.warn-b{background:linear-gradient(180deg,#e8a13c,#a05f10); color:#1d1000; border-color:#ffd08a;}
.gbtn.ghost{background:rgba(10,20,36,.6); color:var(--dim); border-color:var(--line); box-shadow:none;}
.sm-btn{width:auto; display:inline-block; font-size:11px; padding:9px 16px;}

/* ---------- ONBOARDING ---------- */
#scr-onboard{background:linear-gradient(180deg,rgba(4,8,16,.86),rgba(4,8,16,.94)),url('../assets/bg-menu.jpg') center/cover; overflow-y:auto;}
.ob-wrap{max-width:480px; width:100%; margin:auto; padding:max(30px,env(safe-area-inset-top)) 20px 40px; text-align:center;}
.ob-step{font-family:var(--fD); font-size:11px; letter-spacing:3px; color:var(--acc2); margin:18px 0 26px;}
.ob-label{display:block; text-align:left; font-family:var(--fD); font-size:10px; letter-spacing:2px;
  color:var(--dim); margin:20px 0 8px;}
.ob-namerow{display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); padding:4px 14px;}
.ob-dr{font-family:var(--fD); font-weight:800; color:var(--acc); font-size:18px; letter-spacing:2px;}
#ob-name{flex:1; background:none; border:none; outline:none; color:#fff; font-family:var(--fD);
  font-size:19px; font-weight:700; letter-spacing:3px; padding:12px 0; text-transform:uppercase; min-width:0;}
#ob-name::placeholder{color:#2e4666;}
#ob-avatars{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px;}
.av-card{position:relative; cursor:pointer; background:var(--card); border:1px solid var(--line);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  padding:0 0 10px; transition:transform .1s;}
.av-card img{width:100%; aspect-ratio:1; object-fit:cover; display:block;
  filter:saturate(.55) brightness(.75); transition:filter .15s;}
.av-card .av-n{font-family:var(--fD); font-size:11.5px; font-weight:700; letter-spacing:.5px; margin:10px 6px 4px; line-height:1.3;}
.av-card .av-t{font-size:11px; color:var(--dim); letter-spacing:1px; text-transform:uppercase;}
.av-card.sel{border-color:var(--acc); box-shadow:0 0 20px rgba(34,211,238,.4), inset 0 0 0 1px var(--acc);}
.av-card.sel img{filter:none;}
.av-card:active{transform:scale(.97);}

/* ---------- MAIN MENU ---------- */
#scr-menu{background:#03060c; overflow-y:auto;}
.menu-bgfx{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(3,6,12,.55) 0%,rgba(3,6,12,.88) 55%,#03060c 100%),url('../assets/bg-menu.jpg') center top/cover;}
.menu-head{position:relative; z-index:1; text-align:center; padding:max(30px,env(safe-area-inset-top)) 16px 6px;}
.tag{font-family:var(--fD); color:var(--dim); margin:12px 0 0; font-size:10px; letter-spacing:3px;}
#profile-bar{position:relative; z-index:1; display:flex; align-items:center; gap:12px;
  max-width:520px; margin:16px auto 4px; width:calc(100% - 32px);
  background:rgba(10,20,36,.75); border:1px solid var(--line); backdrop-filter:blur(4px);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); padding:8px 12px;}
#profile-bar img{width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--acc-dk);}
#profile-bar .pn{font-family:var(--fD); font-weight:700; font-size:14px; letter-spacing:1px;}
#profile-bar .pr{font-size:12px; color:var(--acc2); letter-spacing:1.5px; text-transform:uppercase; font-weight:600;}
#profile-bar .pedit{margin-left:auto; background:none; border:1px solid var(--line); border-radius:5px;
  color:var(--dim); font-size:10px; letter-spacing:1px; padding:6px 10px; cursor:pointer;}
#case-list{position:relative; z-index:1; display:grid; gap:12px; padding:14px 16px;
  max-width:520px; margin:0 auto; width:100%;}
.case-card{display:flex; align-items:stretch; gap:0; text-align:left; cursor:pointer; overflow:hidden;
  background:linear-gradient(90deg,rgba(13,26,46,.92),rgba(13,26,46,.78)); border:1px solid var(--line);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding:0; transition:transform .08s, border-color .1s;}
.case-card:hover{border-color:var(--acc);}
.case-card:active{transform:scale(.98);}
.case-card .cimg{width:86px; flex:0 0 86px; position:relative;}
.case-card .cimg img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.8);}
.case-card .cimg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(13,26,46,.95));}
.case-card .cbody{flex:1; padding:11px 12px; min-width:0;}
.case-card .cnum{font-family:var(--fD); font-size:9px; letter-spacing:2px; color:var(--acc2);}
.case-card .nm{font-family:var(--fD); font-size:14px; font-weight:700; letter-spacing:.5px; margin:3px 0 4px; color:#fff;}
.case-card .ds{font-size:12.5px; color:var(--dim); margin:0; line-height:1.35;}
.case-card .cmeta{display:flex; align-items:center; gap:10px; margin-top:7px; font-size:11px;}
.case-card .diff{color:var(--warn); letter-spacing:2px;}
.case-card .best{font-family:var(--fD); font-size:10px; letter-spacing:1px; color:var(--acc2);}
.case-card .best.none{color:#3a5578;}
.menu-foot{position:relative; z-index:1; text-align:center; padding:10px 16px max(22px,env(safe-area-inset-bottom));}
.disclaimer{font-size:11px; color:#48607f; margin-top:14px;}

/* ---------- BRIEFING / DEBRIEF ---------- */
#scr-brief,#scr-debrief{background:linear-gradient(180deg,rgba(4,8,16,.93),rgba(4,8,16,.97)),url('../assets/bg-menu.jpg') center/cover; overflow-y:auto;}
.brief-wrap{max-width:560px; margin:0 auto; width:100%; padding:max(18px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));}
.pcard{position:relative; background:rgba(13,26,46,.92); border:1px solid var(--line);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding:16px; margin-bottom:14px;}
.pcard::before{content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--acc),transparent 70%);}
.pcard h2{margin:0 0 4px; font-family:var(--fD); font-size:17px; letter-spacing:1px;}
.pcard h3{margin:16px 0 7px; font-family:var(--fD); font-size:10px; color:var(--acc); text-transform:uppercase; letter-spacing:2.5px;}
.pcard h3:first-child{margin-top:0;}
.pcard p{margin:6px 0; font-size:14.5px; line-height:1.55; color:#c2d4e9;}
.case-tag{font-family:var(--fD); font-size:9px; letter-spacing:2px; color:var(--acc2); display:block; margin-bottom:6px;}
.pt-row{display:flex; gap:14px; align-items:flex-start;}
.pt-row img{width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid var(--line); flex:0 0 96px;}
.vitals{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.vital{background:#050d18; border:1px solid var(--line); border-radius:6px; padding:6px 10px;
  font-size:12px; font-family:var(--fD); letter-spacing:.5px; color:var(--dim);}
.vital b{color:var(--good); font-size:13px; margin-left:4px;}
.qq{font-size:15.5px; font-weight:600; margin:0 0 12px; line-height:1.45;}
.qopt{display:block; width:100%; text-align:left; background:#0a1626; border:1px solid var(--line);
  border-left:3px solid var(--line); border-radius:6px; padding:12px 14px; font-size:14.5px; font-weight:600;
  margin-bottom:8px; cursor:pointer; transition:border-color .1s;}
.qopt:hover{border-color:var(--acc);}
.qopt.ok{border-color:var(--good); border-left-color:var(--good); background:rgba(45,216,129,.1);}
.qopt.no{border-color:var(--bad); border-left-color:var(--bad); background:rgba(255,77,106,.08);}
.qwhy{font-size:13.5px; color:var(--dim); background:#0a1626; border-left:3px solid var(--acc);
  padding:9px 12px; border-radius:4px; margin:10px 0; line-height:1.5;}

/* ---------- GAME HUD ---------- */
#scr-game{background:#000;}
#cv{position:absolute; inset:0; width:100%; height:100%; touch-action:none;}
#hud{position:absolute; top:max(8px,env(safe-area-inset-top)); left:8px; right:8px;
  display:flex; gap:6px; flex-wrap:wrap; align-items:center; z-index:5; pointer-events:none;}
.chip{background:rgba(5,10,20,.88); border:1px solid var(--line); border-radius:5px;
  padding:5px 9px; font-size:12px; font-weight:700; font-family:var(--fD); letter-spacing:.5px; color:var(--txt);}
#hud-fl.live{border-color:var(--warn); color:var(--warn); animation:pulseA 1s infinite;}
@keyframes pulseA{50%{box-shadow:0 0 10px rgba(255,180,84,.55);}}
.btnchip{pointer-events:auto; cursor:pointer;}
#hud-quit{margin-left:auto;}
.dmgchip{display:flex; align-items:center; gap:6px; padding:5px 8px;}
.dmglbl{font-size:9px; color:var(--dim); letter-spacing:1px;}
.dmgtrack{width:52px; height:8px; background:#0a1626; border-radius:4px; overflow:hidden;}
#hud-dmg{height:100%; width:0%; border-radius:4px; background:linear-gradient(90deg,var(--good),var(--warn),var(--bad)); transition:width .2s;}
#stage-title{position:absolute; top:calc(max(8px,env(safe-area-inset-top)) + 42px); left:50%;
  transform:translateX(-50%); background:rgba(5,10,20,.82); border:1px solid var(--line);
  border-left:3px solid var(--acc); border-radius:4px; padding:4px 14px;
  font-family:var(--fD); font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--acc);
  font-weight:700; z-index:4; pointer-events:none; white-space:nowrap;}
#lih{position:absolute; bottom:calc(226px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  background:rgba(5,10,20,.85); border:1px solid var(--line); color:var(--warn);
  padding:4px 12px; border-radius:5px; font-family:var(--fD); font-size:10px; letter-spacing:1.5px;
  z-index:5; pointer-events:none; white-space:nowrap;}
#toasts{position:absolute; bottom:calc(238px + env(safe-area-inset-bottom)); left:12px; right:12px;
  display:flex; flex-direction:column-reverse; gap:6px; align-items:center; z-index:6; pointer-events:none;}
.toast{background:rgba(5,10,20,.94); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:5px; padding:9px 10px 9px 14px; font-size:13.5px; font-weight:700; max-width:440px;
  display:flex; align-items:flex-start; gap:8px; text-align:left; pointer-events:auto;
  animation:tin .18s ease-out;}
.toast .ttxt{flex:1; line-height:1.4;}
.tclose{flex:0 0 auto; background:none; border:none; color:var(--dim); font-size:17px; line-height:1;
  padding:0 2px; cursor:pointer; margin-top:1px;}
.tclose:hover{color:var(--acc);}
.toast.bad{border-left-color:var(--bad); border-color:rgba(255,77,106,.5); color:#ffc4cd;}
.toast.good{border-left-color:var(--good); border-color:rgba(45,216,129,.5); color:#b6f3d3;}
.toast.info{color:#c8ecff;}
@keyframes tin{from{opacity:0; transform:translateY(8px);} to{opacity:1;}}

/* ---------- CONTROL PANEL ---------- */
#panel{position:absolute; bottom:0; left:0; right:0; z-index:7;
  background:linear-gradient(180deg,rgba(6,12,22,.94),rgba(4,8,16,.97));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--acc-dk); box-shadow:0 -1px 18px rgba(34,211,238,.15);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
.prow{display:flex; gap:8px; margin-bottom:8px; align-items:center;}
.prow:last-child{margin-bottom:0;}
.b{flex:1; background:linear-gradient(180deg,#132743,#0b1a30); border:1px solid var(--line); border-radius:7px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  padding:13px 8px; font-size:13px; font-weight:700; font-family:var(--fD); letter-spacing:1px;
  text-transform:uppercase; cursor:pointer; min-height:50px;}
.b:active,.b.held{background:linear-gradient(180deg,#1d3f66,#12294a); border-color:var(--acc);
  box-shadow:0 0 12px rgba(34,211,238,.3) inset;}
.b.prim{background:linear-gradient(180deg,#19bcd8,#0a7f9c); color:#02141c; border-color:#6ee9ff;}
.b.green{background:linear-gradient(180deg,#22d896,#0d9464); color:#02180e; border-color:#7cf7c9;}
.b.warn{background:linear-gradient(180deg,#e8a13c,#a05f10); color:#1d1000; border-color:#ffd08a;}
.b.sm{flex:0 0 auto; min-height:42px; padding:9px 12px; font-size:11px;}
.b:disabled{opacity:.32;}
.b.sel{border:2px solid var(--acc2); background:rgba(52,245,197,.12); color:var(--acc2);}
.plabel{font-family:var(--fD); font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:1.5px; flex:0 0 auto; width:54px;}
input[type=range]{flex:1; height:34px; accent-color:var(--acc);}
.gauge{flex:1; position:relative; height:26px; background:#060e1a; border:1px solid var(--line); border-radius:5px; overflow:hidden;}
.gauge .fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--acc); transition:width .1s;}
.gauge .zone{position:absolute; top:0; bottom:0; background:rgba(45,216,129,.22); border-left:1px solid var(--good); border-right:1px solid var(--good);}
.gauge .mark{position:absolute; top:0; bottom:0; width:2px; background:var(--bad);}
.gauge .needle{position:absolute; top:-2px; bottom:-2px; width:3px; background:#fff; border-radius:2px; box-shadow:0 0 6px #fff;}
.gauge .gtxt{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--fD); font-size:10px; font-weight:700; letter-spacing:1px; color:var(--txt); text-shadow:0 1px 3px #000;}
.pinfo{font-size:13px; color:var(--dim); text-align:center; margin-bottom:8px; line-height:1.45; font-weight:600;}
.pinfo b{color:var(--txt);}

/* ---------- DEBRIEF ---------- */
.grade{text-align:center; padding:6px 0 2px;}
.grade .rank-letter{font-family:var(--fD); font-size:88px; font-weight:900; line-height:1;
  background:linear-gradient(180deg,#8df3ff,var(--acc) 55%,#0a7f9c); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 22px rgba(34,211,238,.5));}
.grade .rank-letter.gold{background:linear-gradient(180deg,#ffe9a8,#ffb454 55%,#9a5c0a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,180,84,.55));}
.grade .gs{font-family:var(--fD); font-size:34px; font-weight:800; margin:2px 0; color:#fff;}
.grade .gs small{font-size:13px; color:var(--dim); letter-spacing:2px;}
.grade .gt{font-family:var(--fD); font-size:13px; color:var(--acc2); font-weight:700; letter-spacing:2.5px; text-transform:uppercase;}
.grade .gnote{font-size:13.5px; color:var(--dim); margin-top:8px;}
.sline{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:600; padding:7px 2px; border-bottom:1px dashed #17293f;}
.sline .pts{font-family:var(--fD); font-weight:800; flex:0 0 auto;}
.sline .pts.plus{color:var(--good);} .sline .pts.minus{color:var(--bad);}
.pearl{font-size:13.5px; color:#c2d4e9; line-height:1.55; margin:7px 0; padding-left:8px;}
.newbest{display:inline-block; font-family:var(--fD); font-size:10px; letter-spacing:2px; color:#02180e;
  background:var(--acc2); border-radius:4px; padding:3px 9px; margin-top:8px; animation:pulseA 1.2s infinite;}

/* ---------- MODAL ---------- */
#modal{position:fixed; inset:0; background:rgba(1,4,9,.82); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:20px;}
#modal-card{background:var(--card); border:1px solid var(--acc-dk);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  max-width:480px; width:100%; max-height:82vh; overflow-y:auto; padding:20px;}
#modal-card h2{margin:0 0 12px; font-family:var(--fD); font-size:15px; letter-spacing:1.5px;}
#modal-card p,#modal-card li{font-size:13.5px; line-height:1.6; color:#c2d4e9;}
#modal-card .gbtn{margin-top:10px;}

/* ---------- small screens ---------- */
@media (max-width:520px){
  .chip{padding:4px 7px; font-size:10.5px;}
  #stage-title{top:calc(max(8px,env(safe-area-inset-top)) + 74px); font-size:9px; padding:3px 10px;}
  .dmgtrack{width:40px;}
}

/* ---------- objective panel ---------- */
#objective{position:absolute; left:8px; top:calc(max(8px,env(safe-area-inset-top)) + 78px); z-index:5;
  max-width:min(48%,300px); background:rgba(5,10,20,.86); border:1px solid var(--line);
  border-left:3px solid var(--acc2); border-radius:6px; padding:7px 10px; pointer-events:none;}
#objective::before{content:'\25B8 OBJECTIVE'; display:block; font-family:var(--fD); font-size:8.5px;
  letter-spacing:2px; color:var(--acc2); margin-bottom:3px;}
#obj-txt{font-size:12px; line-height:1.45; color:#cfe4f7; font-weight:600;}
@media (max-width:520px){ #objective{top:calc(max(8px,env(safe-area-inset-top)) + 104px); max-width:60%;} }

/* ---------- tool info card ---------- */
.toolinfo{display:flex; gap:10px; align-items:flex-start; background:#0a1626; border:1px solid var(--line);
  border-left:3px solid var(--acc); border-radius:8px; padding:8px 10px; margin-bottom:8px;}
.toolinfo img{width:64px; height:64px; border-radius:6px; object-fit:cover; flex:0 0 64px; border:1px solid var(--line);}
.toolinfo .tn{font-family:var(--fD); font-size:11px; letter-spacing:1px; color:var(--acc); margin-bottom:3px; text-transform:uppercase;}
.toolinfo p{margin:0; font-size:12px; line-height:1.42; color:#c2d4e9;}

.prow.wrap{flex-wrap:wrap; justify-content:center;}
.prow.wrap .b{flex:0 1 auto; min-width:130px;}

/* ---------- developer links ---------- */
.dev-links{margin-top:16px;}
.dl-label{display:block; font-family:var(--fD); font-size:9px; letter-spacing:2.5px; color:var(--dim); margin-bottom:8px;}
.dl-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.dl-btn{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:rgba(10,20,36,.7); border:1px solid var(--line); border-radius:8px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  padding:8px 14px; color:var(--dim); font-family:var(--fD); font-size:11px; font-weight:700;
  letter-spacing:1px; transition:color .12s, border-color .12s;}
.dl-btn:hover{color:var(--acc); border-color:var(--acc);}
.dl-btn svg{flex:0 0 auto;}
.prow.center{justify-content:center;}

/* ---------- desktop type scale ---------- */
@media (min-width:900px){
  .chip{font-size:14px; padding:7px 12px;}
  .dmgtrack{width:70px; height:10px;}
  #stage-title{font-size:13px; padding:6px 18px; top:calc(max(8px,env(safe-area-inset-top)) + 48px);}
  #objective{max-width:360px; padding:10px 14px; top:calc(max(8px,env(safe-area-inset-top)) + 92px);}
  #objective::before{font-size:10px;}
  #obj-txt{font-size:14.5px; line-height:1.5;}
  .toast{font-size:16px; padding:12px 18px; max-width:560px;}
  #lih{font-size:12px;}
  .pinfo{font-size:14.5px;}
  .toolinfo p{font-size:13.5px;}
  .toolinfo img{width:76px; height:76px; flex-basis:76px;}
  .b{font-size:14px;}
  .b.sm{font-size:12.5px;}
}
.foot-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* masaüstünde toast'lar sağda bildirim sütunu olarak */
@media (min-width:900px){
  #toasts{left:auto; right:14px; bottom:auto;
    top:calc(max(8px,env(safe-area-inset-top)) + 92px);
    width:370px; flex-direction:column; align-items:stretch; gap:8px;}
  .toast{max-width:none; font-size:15.5px; padding:12px 12px 12px 16px;}
}