/* Familiar, readable game type, without condensed display fonts or wide tracking. */
:root,button,input,h1,h2,#island-label h2 { font-family:Arial,Helvetica,sans-serif; }
strong,b,.brand,button,.health-row { font-weight:700; }
.brand,.eyebrow,.tag,.menu-foot,.health-row,.objective>span,#connection,label,#hotbar .slot-name,.match-chip span { letter-spacing:0; }
.brand { font-size:23px; }
.brand-icon { transform:none; }
h1 { font-size:clamp(44px,6vw,80px);line-height:1.06;letter-spacing:-2px;text-transform:none;margin:18px 0;font-weight:800; }
h2,#island-label h2 { font-size:30px;line-height:1.2;letter-spacing:0; }
.intro { font-size:16px; }
.eyebrow { font-size:13px; }
#hotbar .slot-name { font-size:10px;text-transform:none; }
.health-row,.touch-controls .health-row { font-size:14px;letter-spacing:0;margin-bottom:6px;text-shadow:0 1px 2px #102030; }
.health-track,.touch-controls .health-track { position:relative;height:36px;border:3px solid #fff;border-radius:0;background:#432428;box-shadow:0 3px 0 #15202ad9;overflow:hidden;margin-bottom:12px; }
#health,.touch-controls #health { background:#36b94e; }
.health-track.low-health #health { background:#ec5148; }
#health-text { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 2px #143519,1px 0 #143519,-1px 0 #143519;font-variant-numeric:tabular-nums; }
body:not(.touch-controls) #resources { bottom:215px; }
.team-info { display:flex;flex-direction:column;gap:4px; }
.team-health { font-size:13px;color:white;font-variant-numeric:tabular-nums; }
#player-health-labels { position:fixed;inset:0;pointer-events:none;z-index:4; }
.player-health { position:absolute;width:88px;transform:translate(-50%,-100%);text-align:center;pointer-events:none; }
.player-health>strong { display:block;font-size:12px;line-height:18px;text-shadow:0 1px 2px #000,1px 0 2px #000,-1px 0 2px #000;white-space:nowrap; }
.player-health-track { position:relative;height:7px;border:2px solid #fff;border-radius:0;background:#492a2de8;box-shadow:0 2px 2px #0007;overflow:hidden; }
.player-health-track i { position:absolute;inset:0 auto 0 0;background:#39bf52;transition:width .15s; }
.player-health-track span { position:absolute;inset:0;line-height:16px;font-size:11px;font-weight:bold;color:white;text-shadow:0 1px 2px #000; }
.player-health.low-health i { background:#ec5148; }
@media(max-width:600px){
 .brand { font-size:18px; }
 h1 { font-size:54px; }
 .team-health { font-size:10px;white-space:nowrap; }
 #team-board .team-name { display:block;font-size:9px; }
 #team-board>div>span:first-child { display:none; }
 #team-board>div { padding:7px 5px; }
 .player-health { width:88px; }
 .player-health>strong { font-size:11px; }
}
@media(orientation:portrait){
 .touch-controls #joystick { bottom:calc(199px + env(safe-area-inset-bottom)); }
 .touch-controls .touch-actions { bottom:calc(189px + env(safe-area-inset-bottom)); }
 .touch-controls #resources { bottom:calc(379px + env(safe-area-inset-bottom)); }
}
@media(orientation:portrait) and (min-width:900px){
 .touch-controls #resources { bottom:calc(411px + env(safe-area-inset-bottom)); }
}
@media(orientation:landscape) and (max-height:600px){
 .menu h1 { font-size:40px;line-height:1.05; }
 .touch-controls #resources { bottom:185px; }
 .touch-controls .health-track { height:34px; }
 .touch-controls .health-row { font-size:12px; }
 .touch-controls #health-text { font-size:18px; }
}

/* Informational overlays must not swallow world taps or placement clicks. */
.bottom-hud,#resources,#target-label,#feed,.objective{pointer-events:none}
.inventory-row{pointer-events:auto}
#target-label{max-width:min(270px,80vw);white-space:normal;text-align:center;line-height:1.25;padding:5px 8px;border-radius:0;background:#142234c9;text-shadow:none}
#target-label:empty{display:none}

.team-health-track{display:block;position:relative;width:48px;height:5px;background:#492a2d;border:1px solid #bbcbd4;overflow:hidden}.team-health-track>i{display:block;height:100%;background:#39bf52}

/* Guidance only: clicks and touches still aim at their own screen position. */
#guide-crosshair{position:fixed;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);pointer-events:none;z-index:4;filter:drop-shadow(0 0 1px #000)}
#guide-crosshair::before,#guide-crosshair::after{content:"";position:absolute;background:#fff;opacity:.85}
#guide-crosshair::before{width:7px;height:1px;left:0;top:3px}
#guide-crosshair::after{width:1px;height:7px;left:3px;top:0}
body.spectating #guide-crosshair,body:has(dialog[open]) #guide-crosshair{display:none}