/* DRNO Battle Royale: dark tactical slate with a single amber accent. One committed dark look (game UI). */
:root{
  --bg:#0b1620; --panel:#132331; --panel2:#1b3042; --line:#2f4a60; --ink:#eef4f8; --muted:#97aabb; --amber:#ffb12d; --amber-dark:#c47d07;
  --red:#ff4d5e; --green:#43d98c; --blue:#41c3ff;
  --display:"Teko","Arial Narrow",Impact,system-ui,sans-serif; --body:"Rajdhani","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:600;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block}
button,input,select{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
a{color:var(--amber)}
kbd{font-family:var(--body);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:0 6px}

#loading{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 40%,#173149,var(--bg))}
#loading b{font-family:var(--display);font-size:2.6rem;letter-spacing:.08em;color:var(--amber);line-height:1}
#loading small{color:var(--muted);font-size:1rem}

.screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;overflow-y:auto;background:linear-gradient(90deg,rgba(8,16,24,.92),rgba(8,16,24,.55));
  padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-block:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-bottom,0px))}
.panel{background:linear-gradient(160deg,rgba(27,48,66,.96),rgba(14,27,38,.96));border:1px solid var(--line);border-radius:18px;padding:22px;width:min(440px,100%);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.screen>.panel{text-align:center}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,3.6rem);line-height:.82;margin:6px 0 0;letter-spacing:.02em}
h1 b{display:block;color:var(--amber);font-size:.78em;letter-spacing:.06em}
h2{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1;margin:0 0 12px;letter-spacing:.05em}
.eyebrow{font-weight:700;letter-spacing:.2em;color:var(--amber);font-size:.8rem}
.tag{margin:6px 0 14px;color:var(--muted);font-size:1.1rem}
.fine{color:var(--muted);font-size:.9rem;line-height:1.35;margin:10px 0 0}
.fine a{color:var(--muted)}
.btn{display:block;width:100%;margin:8px 0;padding:11px 14px 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-family:var(--display);font-size:1.45rem;letter-spacing:.06em;line-height:1;cursor:pointer;text-align:center}
.btn small{font-family:var(--body);font-size:.9rem;letter-spacing:0;color:var(--muted);margin-left:6px}
.btn.primary{background:linear-gradient(180deg,#ffc24f,#f19a14);color:#1a1206;border:0;box-shadow:0 4px 0 var(--amber-dark)}
.btn.primary small{color:#5a3d06}
.btn.small{font-size:1.15rem;margin:0}
.btn:active{transform:translateY(2px)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.link{background:none;border:0;color:var(--muted);cursor:pointer;font-weight:700;padding:6px}
input[type=text],input:not([type]),#room,#name,select{width:100%;margin:6px 0;padding:10px 12px;background:#08131c;border:1px solid var(--line);border-radius:10px;font-weight:700;font-size:1.1rem;letter-spacing:.04em}
#room{text-transform:uppercase;text-align:center;letter-spacing:.3em}
.fld{display:block;text-align:left;font-size:.8rem;letter-spacing:.14em;color:var(--muted);margin:8px 0}
.fld input[type=range]{width:100%;accent-color:var(--amber)}
.check{display:flex;gap:8px;align-items:center;color:var(--muted);margin:8px 0}
#msg{min-height:1.3em;color:var(--amber);margin:6px 0 0}
.menu-links{display:flex;justify-content:center;gap:10px}

/* menu layout */
.menu-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,360px);gap:16px;align-items:stretch;width:min(820px,100%)}
.menu-main{text-align:center}
.logo{display:block;margin:0 auto}
.menu-side{display:flex;flex-direction:column;gap:8px}
.menu-side h2{font-size:1.5rem;margin:0}
.preview{flex:1;min-height:220px;border-radius:12px;background:radial-gradient(circle at 50% 70%,#25425c,#0e1b26);overflow:hidden}
.preview canvas{width:100%;height:100%;display:block}
.outfits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.outfits button{aspect-ratio:1;border-radius:10px;border:2px solid transparent;cursor:pointer;padding:0;position:relative}
.outfits button[aria-pressed="true"]{border-color:var(--amber);box-shadow:0 0 0 2px #0b1620 inset}
.legal{text-align:center}
@media (max-width:760px),(max-height:520px){.menu-grid{grid-template-columns:1fr 1fr;gap:10px}.panel{padding:14px}h1{font-size:2.3rem}.preview{min-height:120px}.tag{display:none}.btn{font-size:1.25rem;padding:9px 10px 7px}}
@media (max-width:560px) and (orientation:portrait){.menu-grid{grid-template-columns:1fr}.preview{min-height:160px}}

.lobby ul{list-style:none;margin:10px 0;padding:0;text-align:left;max-height:40vh;overflow:auto}
.lobby li{display:flex;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line);font-size:1.1rem}
.lobby li small{color:var(--amber)}
.how{max-width:560px;width:100%;text-align:left}
.how ol{padding-left:20px;line-height:1.45;font-size:1.05rem}
.how .keys{color:var(--muted);font-size:.95rem;line-height:1.4}

/* HUD */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.top-left{position:absolute;top:max(10px,env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));display:flex;gap:6px}
.stat{background:rgba(8,18,26,.72);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:3px 10px;display:flex;flex-direction:column;align-items:center;min-width:58px}
.stat span{font-size:.65rem;letter-spacing:.16em;color:var(--muted)}
.stat b{font-family:var(--display);font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums}
.stat.zone b{color:var(--blue)}
.stat.zone.warn b{color:var(--red)}
.hud-btns{position:absolute;top:max(10px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:6px}
.hud-btn{pointer-events:auto;min-width:40px;min-height:34px;background:rgba(8,18,26,.72);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:4px 12px;cursor:pointer;font-weight:800}
#mapWrap{position:absolute;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:min(26vh,190px);pointer-events:auto;cursor:pointer}
#mapWrap.big{width:min(86vh,520px);right:50%;transform:translateX(50%);top:8vh}
#minimap{width:100%;height:auto;aspect-ratio:1;display:block;border-radius:10px;border:2px solid rgba(255,255,255,.2);background:#0d2533}
#where{font-size:.8rem;text-align:center;text-shadow:0 1px 3px #000;margin-top:2px;letter-spacing:.06em}
#feed{position:absolute;top:calc(max(10px,env(safe-area-inset-top,0px)) + min(26vh,190px) + 30px);right:max(10px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:60vw}
#feed div{background:rgba(8,18,26,.7);border-radius:6px;padding:2px 8px;font-size:.9rem;white-space:nowrap;animation:feedIn .25s}
#feed b{color:var(--amber)}#feed .me{color:var(--green)}
@keyframes feedIn{from{transform:translateX(20px);opacity:0}}
#cross{position:absolute;left:50%;top:50%;width:0;height:0}
#cross i{position:absolute;background:#fff;box-shadow:0 0 2px #000;transition:transform .08s}
#cross i:nth-child(1),#cross i:nth-child(2){width:2px;height:9px;left:-1px}
#cross i:nth-child(3),#cross i:nth-child(4){height:2px;width:9px;top:-1px}
#hitmark{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;background:
  linear-gradient(45deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46% 54%,transparent 54%);
  -webkit-mask:radial-gradient(circle,transparent 6px,#000 7px);mask:radial-gradient(circle,transparent 6px,#000 7px)}
#hitmark.on{animation:hm .25s}
#hitmark.head{filter:drop-shadow(0 0 2px var(--red)) sepia(1) saturate(9) hue-rotate(-30deg)}
@keyframes hm{from{opacity:1;transform:scale(1.3)}to{opacity:0}}
#dmgDir{position:absolute;inset:0;pointer-events:none}
#dmgDir i{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border-top:6px solid rgba(255,60,60,.85);animation:dd 1s forwards}
@keyframes dd{to{opacity:0}}
#scope{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 32vmin,#000 32.4vmin)}
#scope::before,#scope::after{content:"";position:absolute;background:#000}
#scope::before{left:0;right:0;top:50%;height:1px}#scope::after{top:0;bottom:0;left:50%;width:1px}
#center{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-family:var(--display);font-size:2.4rem;letter-spacing:.06em;text-shadow:0 2px 8px #000;text-align:center;white-space:nowrap}
#center.kill{color:var(--amber)}
#prompt{position:absolute;left:50%;top:62%;transform:translateX(-50%);background:rgba(8,18,26,.85);border:1px solid var(--amber);border-radius:10px;padding:6px 14px;white-space:nowrap}
#progress{position:absolute;left:50%;top:58%;transform:translateX(-50%);text-align:center;font-size:.9rem;letter-spacing:.1em}
#progress i{display:block;width:180px;height:6px;background:rgba(255,255,255,.2);border-radius:4px;overflow:hidden;margin-top:4px}
#progress em{display:block;height:100%;width:0;background:var(--amber)}
.vitals{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(360px,46vw);text-align:center}
.gear{display:flex;justify-content:center;gap:10px;font-size:.8rem;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.gear span.on{color:var(--blue)}
.hp{display:flex;align-items:center;gap:8px}
.hp i{flex:1;height:10px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);border-radius:6px;overflow:hidden}
.hp em{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3ad07f,#7cf0a8);transition:width .2s}
.hp em.low{background:linear-gradient(90deg,#ff4d5e,#ff8a7a)}
.hp b{font-family:var(--display);font-size:1.6rem;line-height:1;min-width:2.2em;font-variant-numeric:tabular-nums}
#slots{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;pointer-events:auto}
#slots button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:170px;background:rgba(8,18,26,.75);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:5px 10px;cursor:pointer;text-align:left}
#slots button.cur{border-color:var(--amber);background:rgba(60,40,8,.75)}
#slots button.empty{opacity:.45}
#slots .wn{font-family:var(--display);font-size:1.15rem;letter-spacing:.04em;line-height:1}
#slots .am{font-family:var(--display);font-size:1.4rem;line-height:1;font-variant-numeric:tabular-nums}
#slots .am small{font-size:.8em;color:var(--muted)}
#dropUi{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);text-align:center;pointer-events:auto;width:min(320px,80vw)}
#dropUi p{text-shadow:0 1px 4px #000;margin:4px 0}
#jumpBtn{font-size:2rem;padding:14px}

/* touch controls */
#touch{position:absolute;inset:0;pointer-events:none}
#stick{position:absolute;left:max(28px,env(safe-area-inset-left,0px));bottom:max(28px,env(safe-area-inset-bottom,0px));width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.25);pointer-events:auto;touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,255,255,.45)}
#knob.sprint{background:rgba(255,177,45,.8)}
#lookPad{position:absolute;right:0;top:0;bottom:0;width:58%;pointer-events:auto;touch-action:none}
.tb{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(8,18,26,.5);font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;width:58px;height:58px;display:grid;place-items:center;padding:0}
.tb.on{background:rgba(255,177,45,.55);border-color:var(--amber)}
.tb.fire{right:calc(max(20px,env(safe-area-inset-right,0px)) + 200px);bottom:max(40px,env(safe-area-inset-bottom,0px));width:84px;height:84px;background:rgba(200,50,40,.55);font-size:1.4rem}
.tb.fire2{left:calc(max(28px,env(safe-area-inset-left,0px)) + 150px);bottom:calc(max(28px,env(safe-area-inset-bottom,0px)) + 110px);background:rgba(200,50,40,.45)}
.tb.aim{right:calc(max(20px,env(safe-area-inset-right,0px)) + 290px);bottom:max(56px,env(safe-area-inset-bottom,0px))}
.tb.jump{right:calc(max(20px,env(safe-area-inset-right,0px)) + 210px);bottom:calc(max(40px,env(safe-area-inset-bottom,0px)) + 96px)}
.tb.crouch{right:calc(max(20px,env(safe-area-inset-right,0px)) + 280px);bottom:calc(max(40px,env(safe-area-inset-bottom,0px)) + 80px);font-size:.85rem}
.tb.reload{right:calc(max(20px,env(safe-area-inset-right,0px)) + 210px);bottom:calc(max(40px,env(safe-area-inset-bottom,0px)) + 164px);font-size:1.5rem}
.tb.heal{right:calc(max(20px,env(safe-area-inset-right,0px)) + 280px);bottom:calc(max(40px,env(safe-area-inset-bottom,0px)) + 150px);font-size:1.5rem;color:var(--green)}
.tb.pick{left:50%;bottom:30%;transform:translateX(-50%);border-radius:12px;width:auto;height:auto;padding:8px 16px;background:rgba(255,177,45,.75);color:#1a1206}
.touch #slots{bottom:auto;top:calc(max(10px,env(safe-area-inset-top,0px)) + min(26vh,190px) + 30px);right:auto;left:max(10px,env(safe-area-inset-left,0px));top:62px}
.touch #slots button{min-width:130px;padding:3px 8px}
.touch .vitals{bottom:max(6px,env(safe-area-inset-bottom,0px));width:min(300px,38vw)}
.touch #feed{display:none}
#rotate{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,16,24,.9);font-size:1.4rem;text-align:center;padding:30px;pointer-events:auto}

.end{text-align:center}
.place{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:4px 0 10px}
.place b{font-family:var(--display);font-size:4.4rem;line-height:.9;color:var(--amber)}
.place span{color:var(--muted);font-size:1.2rem}
.endstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.endstats div{background:var(--panel2);border-radius:10px;padding:8px}
.endstats b{display:block;font-family:var(--display);font-size:2rem;line-height:1}
.endstats span{font-size:.75rem;letter-spacing:.14em;color:var(--muted)}
@media (prefers-reduced-motion:reduce){#feed div,#hitmark.on{animation:none}}

#clickHint{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;background:rgba(8,18,26,.85);border:1px solid var(--amber);border-radius:14px;padding:14px 26px;font-family:var(--display);font-size:1.7rem;letter-spacing:.06em;display:flex;flex-direction:column;align-items:center;gap:2px}
#clickHint small{font-family:var(--body);font-size:.9rem;color:var(--muted);letter-spacing:0}