*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#1b140c;color:#2a1d10;font-family:"Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#view{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:none}
kbd{font:inherit}
:root{--paper:#ece0c4;--paper2:#e2d3b1;--ink:#2a1d10;--amber:#ffb02e;--u:min(1vw,1.78vh)}
.paper{background:var(--paper)}

#hud{position:fixed;inset:0;pointer-events:none;font-size:calc(var(--u)*1.6)}
#hud button{pointer-events:auto}

#team{position:absolute;left:max(1vw,env(safe-area-inset-left));top:1.2vh;display:flex;flex-direction:column;gap:.6vh}
.mate{display:flex;align-items:stretch;background:rgba(236,224,196,.94);border:1px solid #7d6440;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.35);width:calc(var(--u)*15);height:calc(var(--u)*5.2);overflow:hidden}
.mate img{height:100%;aspect-ratio:1;object-fit:cover;border-right:1px solid #7d6440}
.mate .t{padding:0 .5em;display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-width:0;flex:1}
.mate .n{font-weight:700;font-size:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mate .s{font-size:.95em;display:flex;gap:.7em;align-items:center}
.mate .s img{height:1em;border:0}
.mate.downed{opacity:.55}
.mate.me .n{color:#7a3d00}
.mate .hpb{height:3px;background:#b9a57d;margin-top:2px}.mate .hpb i{display:block;height:100%;background:#4f8a2c}

#xp{position:absolute;left:50%;top:1.2vh;transform:translateX(-50%);width:min(50vw,calc(var(--u)*50));display:flex;align-items:center;gap:.8em;background:rgba(236,224,196,.94);border:1px solid #7d6440;border-radius:3px;padding:.35em .8em;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#xp .lv{font-weight:700;font-size:1.2em;white-space:nowrap}#xp .lv b{font-size:1.5em}
#xp .bar{flex:1;height:.9em;background:#c9b892;border:1px solid #6d5636;position:relative}
#xpFill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#7fa6e0,#3f6fb7);width:0}
#xpTicks{position:absolute;inset:0;display:flex;justify-content:space-between}
#xpTicks i{width:1px;background:rgba(60,40,20,.45)}
#xp .num{font-weight:700;white-space:nowrap}

#feed{position:absolute;right:max(1vw,env(safe-area-inset-right));top:1.2vh;background:rgba(236,224,196,.94);border:1px solid #7d6440;border-radius:3px;padding:.35em .7em;min-width:calc(var(--u)*20);box-shadow:0 2px 6px rgba(0,0,0,.35);font-family:"Courier New",monospace;font-weight:700;font-size:.95em;line-height:1.45}
#feed:empty{display:none}
#feed div{white-space:nowrap;transition:opacity .4s}
#feed .dino{color:#8a4b00}

#wave{position:absolute;left:50%;top:calc(1.2vh + var(--u)*4.6);transform:translateX(-50%);text-align:center;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);font-weight:700;letter-spacing:.06em}
#wave b{display:block;font-size:1.25em}
#wave span{font-size:.95em;opacity:.9}

#cross{position:absolute;left:50%;top:50%;width:0;height:0}
#cross i{position:absolute;background:#fff;box-shadow:0 0 2px #000;opacity:.9}
#cross i:nth-child(1){left:-1px;top:-14px;width:2px;height:8px}
#cross i:nth-child(2){left:-1px;top:6px;width:2px;height:8px}
#cross i:nth-child(3){left:-14px;top:-1px;width:8px;height:2px}
#cross i:nth-child(4){left:6px;top:-1px;width:8px;height:2px}
#cross::after{content:"";position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--amber)}
#hitmark{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;opacity:0;background:
linear-gradient(45deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%);
-webkit-mask:radial-gradient(circle,transparent 6px,#000 7px);mask:radial-gradient(circle,transparent 6px,#000 7px)}
#hitmark.head{background:linear-gradient(45deg,transparent 44%,#ff4a2a 44%,#ff4a2a 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#ff4a2a 44%,#ff4a2a 56%,transparent 56%)}
#banner{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);color:#fff;font-weight:800;font-size:2.6em;letter-spacing:.08em;text-shadow:0 3px 8px rgba(0,0,0,.8),0 0 18px rgba(255,176,46,.6);text-align:center;opacity:0;transition:opacity .3s;white-space:nowrap}
#banner small{display:block;font-size:.45em;letter-spacing:.12em}
#hurt{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(170,0,0,.75) 100%);opacity:0}
#shieldFx{position:absolute;inset:0;box-shadow:inset 0 0 8vmin rgba(90,200,255,.7);opacity:0;transition:opacity .2s}
#down{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;color:#fff;text-shadow:0 2px 6px #000;background:rgba(60,10,0,.45);padding:1em 2em;border-radius:4px}
#down b{display:block;font-size:2em;letter-spacing:.1em}

#pp{position:absolute;left:max(1.2vw,env(safe-area-inset-left));bottom:2vh;display:flex;align-items:center;gap:.5em;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9)}
#pp img{height:calc(var(--u)*7);filter:drop-shadow(0 0 8px rgba(255,170,30,.8))}
#pp b{display:block;font-size:3.4em;line-height:.9;font-weight:800}
#pp span{font-weight:700;letter-spacing:.06em;font-size:.95em}
#pp.pulse img{animation:pulse .5s}
@keyframes pulse{50%{transform:scale(1.25)}}
#hp{position:absolute;left:max(1.2vw,env(safe-area-inset-left));bottom:calc(2vh + var(--u)*8.4);width:calc(var(--u)*17);height:calc(var(--u)*1.7);background:rgba(30,20,10,.6);border:1px solid rgba(255,255,255,.5);border-radius:2px;overflow:hidden}
#hpFill{height:100%;background:linear-gradient(#8fd35a,#4f8a2c);width:100%;transition:width .15s}
#hp span{position:absolute;inset:0;color:#fff;font-weight:700;font-size:.85em;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 2px #000}
#hp.low #hpFill{background:linear-gradient(#ff7a5a,#b3261e)}

#perks{position:absolute;left:calc(max(1.2vw,env(safe-area-inset-left)) + var(--u)*21);bottom:1.6vh;display:flex;gap:calc(var(--u)*1.2)}
.card{position:relative;width:calc(var(--u)*11);height:calc(var(--u)*14);background:var(--paper);border:2px solid #7d6440;border-radius:3px;padding:calc(var(--u)*.5);display:flex;flex-direction:column;align-items:center;box-shadow:0 3px 8px rgba(0,0,0,.45);transition:transform .12s,box-shadow .12s,border-color .12s;filter:saturate(.7) brightness(.82)}
.card>img{width:100%;aspect-ratio:1.1;object-fit:cover;border:1px solid #a58e66}
.card .nm{font-weight:800;font-size:.9em;margin-top:.25em;white-space:nowrap}
.card .cost{display:flex;align-items:center;gap:.25em;font-weight:800;font-size:1.05em}
.card .cost img{height:1.05em}
.card kbd{position:absolute;top:2px;left:3px;font-size:.8em;font-weight:800;background:rgba(42,29,16,.75);color:#fff;border-radius:2px;padding:0 .3em}
.card.ready{filter:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,176,46,.65),0 0 18px rgba(255,170,30,.85)}
.card.ready:active{transform:scale(.95)}
.card.flash{animation:flash .6s}
@keyframes flash{30%{transform:translateY(-10%) scale(1.06)}}

#equip{position:absolute;right:calc(max(1.2vw,env(safe-area-inset-right)) + var(--u)*21 + var(--u)*1.5);bottom:2vh;display:flex;gap:calc(var(--u)*.9)}
.eq{position:relative;width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);background:rgba(30,22,14,.55);border:2px solid rgba(255,255,255,.75);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.eq img{width:72%;height:72%;object-fit:contain}
.eq .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(0,0,0,.6)}
.eq em{position:absolute;right:2px;top:0;color:#fff;font-style:normal;font-weight:800;font-size:.9em;text-shadow:0 1px 2px #000}
.eq kbd{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);color:#2a1d10;background:#f2ead6;font-size:.7em;font-weight:800;padding:0 .35em;border-radius:2px 2px 0 0}
.eq.off img{opacity:.35}

#weapon{position:absolute;right:max(1.2vw,env(safe-area-inset-right));bottom:2vh;width:calc(var(--u)*21);background:rgba(236,224,196,.95);border:1px solid #7d6440;border-radius:3px;padding:.4em .8em .3em;box-shadow:0 3px 8px rgba(0,0,0,.45);text-align:left;color:var(--ink)}
#weapon .wn{font-weight:800;font-size:1.25em;letter-spacing:.03em}
#weapon .ws{font-size:.85em;font-weight:700;opacity:.85}
#weapon .ammo{display:flex;align-items:baseline;gap:.25em;justify-content:center}
#weapon .ammo b{font-size:3em;font-weight:800;line-height:1}
#weapon .ammo span{font-size:2.2em;opacity:.6}
#weapon .ammo em{font-style:normal;font-weight:800;font-size:1.8em}
#weapon.empty .ammo b{color:#b3261e}
#weapon .rl{height:3px;background:transparent;margin-top:2px}
#weapon .rl i{display:block;height:100%;width:0;background:#b07a1e}

#touch{position:absolute;inset:0;display:none}
.touch #touch{display:block}
#stickBase{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:rgba(0,0,0,.18);display:none}
#stickKnob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.55)}
#fireBtn{position:absolute;right:max(3vw,env(safe-area-inset-right));bottom:calc(2vh + var(--u)*16);width:clamp(68px,calc(var(--u)*11),110px);height:clamp(68px,calc(var(--u)*11),110px);border-radius:50%;background:radial-gradient(circle,rgba(255,90,40,.55),rgba(140,30,10,.55));border:3px solid rgba(255,255,255,.8);pointer-events:auto}
#fireBtn::after{content:"";position:absolute;inset:30%;border:3px solid #fff;border-radius:50%}
#fireBtn.on{background:radial-gradient(circle,rgba(255,150,60,.85),rgba(200,50,10,.8))}
#reloadBtn{position:absolute;right:calc(max(3vw,env(safe-area-inset-right)) + clamp(68px,calc(var(--u)*11),110px) + 10px);bottom:calc(2vh + var(--u)*17);width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.7);color:#fff;font-weight:800;font-size:18px;pointer-events:auto}

#helpBtn,#soundBtn{position:absolute;top:calc(1.2vh + var(--u)*4.6);width:34px;height:34px;border-radius:50%;background:rgba(236,224,196,.9);border:1px solid #7d6440;font-weight:800;font-size:16px;color:var(--ink)}
#helpBtn{right:max(1vw,env(safe-area-inset-right));top:auto;bottom:calc(2vh + var(--u)*16 + 10px)}
#soundBtn{right:calc(max(1vw,env(safe-area-inset-right)) + 0px);top:auto;bottom:calc(2vh + var(--u)*16 + 52px)}
.touch #helpBtn{right:auto;left:max(1vw,env(safe-area-inset-left));bottom:auto;top:calc(50% - 40px)}
.touch #soundBtn{right:auto;left:max(1vw,env(safe-area-inset-left));bottom:auto;top:calc(50% + 4px)}
#soundBtn::before{content:"\266A"}#soundBtn.off::before{content:"\2715"}
#aimHint{position:absolute;left:50%;top:58%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.55);padding:.4em 1em;border-radius:3px;font-weight:700}

.panel-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(40,25,10,.35),rgba(20,12,5,.8));padding:2vh 2vw;overflow:auto}
.menu-box{background:rgba(236,224,196,.97);border:2px solid #7d6440;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.6);padding:clamp(14px,2.4vmin,28px) clamp(16px,3vmin,34px);width:min(560px,94vw);max-height:96vh;overflow:auto;text-align:center;font-size:clamp(13px,1.9vmin,16px)}
.menu-box h1{font-size:clamp(34px,7vmin,64px);font-weight:900;letter-spacing:.06em;line-height:1;color:#3a2410;text-shadow:0 2px 0 #c99a4a}
.menu-box h2{font-size:clamp(22px,4.4vmin,36px);font-weight:900;letter-spacing:.06em}
.tag{font-weight:700;letter-spacing:.12em;font-size:.85em;margin:.4em 0 1em;opacity:.8}
.buttons{display:flex;flex-direction:column;gap:.6em;margin:.8em 0}
.big{display:block;width:100%;padding:.75em 1em;font-weight:900;font-size:1.15em;letter-spacing:.08em;background:linear-gradient(#ffc04d,#e08d13);border:2px solid #7a4a08;border-radius:3px;color:#2a1600;box-shadow:0 3px 0 #7a4a08}
.big:active{transform:translateY(2px);box-shadow:0 1px 0 #7a4a08}
.big.alt{background:linear-gradient(#efe3c8,#d6c39b);border-color:#7d6440;box-shadow:0 3px 0 #7d6440}
.big:disabled{opacity:.5}
.squad{display:flex;gap:.5em;align-items:stretch}
.squad .big{flex:1}
.seats{display:flex;align-items:center;gap:.3em;background:#dccaa3;border:2px solid #7d6440;border-radius:3px;padding:0 .4em;font-weight:900}
.seats button{width:1.8em;height:1.8em;font-size:1.1em;font-weight:900;background:#efe3c8;border:1px solid #7d6440;border-radius:2px}
.seats span{min-width:1.2em;font-size:1.3em}
.seats small{font-size:.7em;font-weight:700}
#loading{height:22px;background:#c9b892;border:1px solid #6d5636;position:relative;margin:.6em 0}
#loadFill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#ffc04d,#e08d13);transition:width .2s}
#loadText{position:relative;font-weight:700;font-size:.85em;line-height:20px}
.how{text-align:left;font-size:.92em;line-height:1.45;margin-top:.6em}
.how b{color:#6a3800}
.how .cols{display:grid;grid-template-columns:auto 1fr;gap:.15em .9em}
#board{margin-top:.8em;text-align:left;font-size:.9em}
#board h3,#profile h3{font-size:.95em;letter-spacing:.08em;margin-bottom:.2em}
#board ol{padding-left:1.6em}
#board a{color:#6a3800;font-weight:700}
#profile{margin-top:.6em;font-size:.85em;opacity:.85}
#waitingNote{background:#fff3cf;border:1px solid #c99a4a;padding:.4em;border-radius:3px;font-weight:700;margin-bottom:.4em}
#lobbyList{display:flex;flex-direction:column;gap:.35em;margin:.8em 0}
#lobbyList .slot{background:#dfcfa9;border:1px solid #a58e66;padding:.45em .7em;border-radius:3px;font-weight:700;text-align:left}
#lobbyList .slot.empty{opacity:.55;font-style:italic}
#lobbyMsg{font-weight:700;min-height:1.2em}
#lobbyLink{width:100%;font:inherit;font-size:.8em;padding:.4em;border:1px solid #a58e66;background:#f6eedb;color:#2a1d10}
#resTable{width:100%;border-collapse:collapse;margin:.8em 0;font-weight:700}
#resTable td,#resTable th{padding:.3em .4em;border-bottom:1px solid #c3ae84;text-align:center}
#resTable th{font-size:.8em;letter-spacing:.06em}
#resTable td:nth-child(2){text-align:left}
#resNext{font-weight:700;margin-bottom:.6em}
#err{position:fixed;left:50%;top:40%;transform:translateX(-50%);background:#ece0c4;border:2px solid #7d6440;padding:1em 1.5em;max-width:90vw;font-weight:700;z-index:9}

/* narrow and upright screens */
@media (orientation:portrait){
  :root{--u:min(1.9vw,1vh)}
  #hud{font-size:calc(var(--u)*1.7)}
  #team{top:calc(1vh + var(--u)*7.4)}
  .mate{width:calc(var(--u)*17);height:calc(var(--u)*5)}
  #xp{width:96vw;top:.8vh}
  #feed{top:calc(1vh + var(--u)*7.4);min-width:0;max-width:52vw;font-size:.8em}
  #feed div{overflow:hidden;text-overflow:ellipsis}
  #wave{top:calc(1vh + var(--u)*7.4 + 0px);display:none}
  #wave.show{display:block;top:auto;bottom:calc(var(--u)*44)}
  #perks{left:50%;transform:translateX(-50%);bottom:calc(2vh + var(--u)*15)}
  .card{width:calc(var(--u)*11.5);height:calc(var(--u)*14.4)}
  #equip{left:auto;transform:none;right:2vw;bottom:calc(2vh + var(--u)*31)}
  #pp b{font-size:2.6em}
  #weapon{width:calc(var(--u)*20);font-size:.85em}
  #fireBtn{bottom:calc(2vh + var(--u)*31)}
  #reloadBtn{bottom:calc(2vh + var(--u)*31 + clamp(68px,calc(var(--u)*11),110px) + 12px);right:max(4vw,env(safe-area-inset-right))}
  #equip{bottom:calc(2vh + var(--u)*31);right:calc(4vw + clamp(68px,calc(var(--u)*11),110px) + 10px);flex-direction:column}
  #hp{bottom:calc(2vh + var(--u)*9)}
}