:root{
  --cream:#f8e8c5;
  --cream-2:#efd9a8;
  --cream-3:#dfc187;
  --ink:#43300f;
  --ink-soft:#6b4f24;
  --moss:#5f7a2f;
  --moss-deep:#40551d;
  --teal:#17b3a6;
  --teal-deep:#0b6f69;
  --coral:#e8452f;
  --coral-deep:#b12a17;
  --gold:#ffca4f;
  --violet:#8b5fc9;
  --sans:'Nunito',system-ui,-apple-system,sans-serif;
  --display:'Metamorphous',Georgia,serif;
  --num:'Bebas Neue','Arial Narrow',sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:#2b8f8c}
body{
  font-family:var(--sans);
  color:var(--ink);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  overscroll-behavior:none;
}
#app{position:fixed;inset:0;overflow:hidden;background:#7fd9dc}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.hidden{display:none !important}

/* ---------------- HUD ---------------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity .25s ease}
#hud.live{opacity:1}

#topbar{
  position:absolute;
  top:calc(var(--safe-t) + 6px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(6px,2vw,14px);
  z-index:3;
  pointer-events:none;
}

.teamscore{
  width:clamp(56px,17vw,108px);
  margin-top:8px;
  padding:5px 6px 6px;
  text-align:center;
  border-radius:14px;
  border:2px solid #8a6a32;
  background:linear-gradient(180deg,#fff4d4 0%,#f3e0b2 55%,#e5cb92 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(150,115,55,.35), 0 5px 12px rgba(60,45,15,.28);
  position:relative;
  overflow:hidden;
}
.teamscore::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--teal),#7ce0cf);
}
.teamscore.tiki::before{background:linear-gradient(90deg,#ff8c6a,var(--coral))}
.teamscore.you{transform:rotate(-1.5deg)}
.teamscore.tiki{transform:rotate(1.5deg)}
.tname{
  display:block;font-weight:800;font-size:clamp(6px,1.7vw,9.5px);
  letter-spacing:.02em;line-height:1.1;color:#6b4f24;white-space:nowrap;
}
.tscore{
  display:block;font-family:var(--num);font-weight:400;
  font-size:clamp(24px,7.5vw,40px);line-height:.9;margin-top:1px;
  color:var(--teal-deep);text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.teamscore.tiki .tscore{color:var(--coral-deep)}

#timer{
  position:relative;
  width:clamp(82px,23vw,132px);
  aspect-ratio:377/382;
  flex:none;
  filter:drop-shadow(0 6px 12px rgba(60,45,15,.32));
}
#timerBack{
  position:absolute;inset:7%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #6a4522 0%, #4a2f16 55%, #2e1c0b 100%);
  border:3px solid rgba(90,62,30,.85);
  box-shadow:inset 0 5px 14px rgba(0,0,0,.55), inset 0 -2px 4px rgba(255,210,120,.18);
}
#ringArt{
  position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:conic-gradient(from -90deg, #000 var(--keep,100%), transparent 0);
  mask-image:conic-gradient(from -90deg, #000 var(--keep,100%), transparent 0);
  transform:translateZ(0);
}
#timerDisc{
  position:absolute;inset:19%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
#timerNum{
  font-family:var(--num);font-weight:400;
  font-size:clamp(30px,9.4vw,52px);
  line-height:.82;
  color:#ffeab4;
  text-shadow:0 2px 0 #33200c, 0 0 14px rgba(255,204,90,.45);
  transition:color .3s ease;
}
#timerLabel{
  margin-top:2px;
  font-weight:800;font-size:clamp(5.5px,1.6vw,8px);
  letter-spacing:.22em;color:#e5bd71;
}
#hud.low #timerNum{color:#ffc46a;text-shadow:0 2px 0 #4b2308,0 0 18px rgba(255,150,40,.75)}
#hud.low #timer{animation:timerpulse .9s ease-in-out infinite}
@keyframes timerpulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

#pauseBtn{
  position:absolute;
  top:calc(var(--safe-t) + 6px);
  right:calc(var(--safe-r) + 8px);
  width:clamp(40px,11vw,50px);
  padding:0;border:0;background:none;cursor:pointer;
  pointer-events:auto;z-index:5;
  filter:drop-shadow(0 4px 7px rgba(60,45,15,.35));
  transition:transform .1s ease;
}
#pauseBtn:active{transform:scale(.92)}
#pauseBtn img{display:block;width:100%;height:auto}

#reticle{
  position:absolute;left:50%;top:50%;
  width:clamp(58px,14vw,92px);
  aspect-ratio:351/377;
  transform:translate(-50%,-50%);
  transition:transform .09s ease, filter .09s ease;
  opacity:.94;
  will-change:transform;
}
#reticle img{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(30,20,5,.4))}
#reticle.ontarget{
  transform:translate(-50%,-50%) scale(1.16);
  filter:drop-shadow(0 0 10px rgba(255,196,70,.8)) brightness(1.08);
}
#reticle.ally{filter:hue-rotate(120deg) saturate(1.2) drop-shadow(0 0 8px rgba(90,240,190,.55))}
#reticle.auto::after{
  content:"AUTO";
  position:absolute;left:50%;top:104%;transform:translateX(-50%);
  font-weight:800;font-size:clamp(6px,1.7vw,8px);letter-spacing:.18em;
  color:#fff0c4;text-shadow:0 1px 2px rgba(30,20,5,.7),0 0 8px rgba(255,190,70,.5);
  white-space:nowrap;
}

#hitmark{
  position:absolute;left:50%;top:50%;width:34px;height:34px;
  transform:translate(-50%,-50%) rotate(45deg);
  opacity:0;pointer-events:none;
}
#hitmark::before,#hitmark::after{
  content:"";position:absolute;background:#fff2cf;border-radius:2px;
  box-shadow:0 0 8px rgba(255,120,50,.9);
}
#hitmark::before{left:50%;top:0;width:3px;height:12px;transform:translateX(-50%)}
#hitmark::after{top:50%;left:0;height:3px;width:12px;transform:translateY(-50%)}
#hitmark.show{animation:hitpop .22s ease-out}
#hitmark.kill::before,#hitmark.kill::after{background:#ff7a4d}
@keyframes hitpop{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.7)}
  70%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.35)}
}

#hurtFlash{
  position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse at center, rgba(232,69,47,0) 35%, rgba(232,69,47,.42) 100%);
}
#hurtFlash.hurt{animation:hurtpulse .5s ease-out}
@keyframes hurtpulse{0%{opacity:1}100%{opacity:0}}

#lastTen{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,170,40,0) 48%, rgba(255,164,40,.30) 100%);
  transition:opacity .6s ease;
}
#hud.low #lastTen{opacity:1;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.85}}

#killfeed{
  position:absolute;
  right:calc(var(--safe-r) + 10px);
  top:calc(var(--safe-t) + 170px);
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  max-width:64vw;z-index:4;
}
.kf{
  font-weight:800;font-size:clamp(9px,2.6vw,12px);
  padding:4px 9px;border-radius:10px;
  background:rgba(255,244,216,.92);
  border:2px solid rgba(120,92,44,.5);
  color:#4a3416;
  box-shadow:0 3px 8px rgba(50,35,10,.25);
  animation:kfin .2s ease-out, kfout .4s ease-in 2.7s forwards;
  white-space:nowrap;
}
.kf b{color:var(--teal-deep)}
.kf.enemy b{color:var(--coral-deep)}
@keyframes kfin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes kfout{to{opacity:0;transform:translateX(10px)}}

#toast{
  position:absolute;left:50%;top:57%;
  transform:translateX(-50%) translateY(-6px);
  font-family:var(--display);font-size:clamp(10px,3vw,15px);
  letter-spacing:.04em;
  padding:7px 16px;border-radius:12px;
  color:#3f2a0c;
  background:linear-gradient(180deg,rgba(255,245,214,.96),rgba(243,224,178,.96));
  border:2px solid rgba(120,92,44,.5);
  box-shadow:0 4px 12px rgba(50,35,10,.28);
  opacity:0;transition:opacity .28s ease, transform .28s ease;
  white-space:nowrap;max-width:86vw;overflow:hidden;text-overflow:ellipsis;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#health{
  position:absolute;left:50%;bottom:calc(var(--safe-b) + 22px);
  transform:translateX(-50%);
  width:clamp(112px,30vw,220px);
  display:flex;align-items:center;gap:7px;
  padding:5px 9px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,244,216,.94),rgba(233,209,158,.94));
  border:2px solid rgba(120,92,44,.55);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 10px rgba(50,35,10,.25);
  z-index:3;
}
.hlab{font-weight:800;font-size:clamp(7px,2vw,9px);letter-spacing:.12em;color:#6b4f24}
.hbar{
  flex:1;height:clamp(8px,2.4vw,11px);border-radius:6px;overflow:hidden;
  background:#6a4a24;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45);
}
#healthFill{
  height:100%;width:100%;
  background:linear-gradient(90deg,#7ee08e,#3fbf67 60%,#229c4d);
  border-radius:6px;transition:width .16s linear, background .3s;
}
#healthFill.mid{background:linear-gradient(90deg,#ffe07a,#f0a63a)}
#healthFill.low{background:linear-gradient(90deg,#ff9a6a,#e8452f)}
#healthNum{font-family:var(--num);font-size:clamp(13px,4vw,20px);line-height:1;color:#4a3416;min-width:22px;text-align:right}

#weaponchip{
  position:absolute;
  left:calc(var(--safe-l) + 12px);
  bottom:calc(var(--safe-b) + 12px);
  width:clamp(150px,42vw,235px);
  aspect-ratio:495/212;
  z-index:3;
  filter:drop-shadow(0 5px 10px rgba(50,35,10,.3));
  transition:transform .12s ease;
}
#weaponchip .chipframe{display:block;width:100%;height:100%}
#weaponchip.pulse{animation:chippulse .55s ease}
@keyframes chippulse{0%{transform:scale(1)}35%{transform:scale(1.1) rotate(-1deg)}100%{transform:scale(1)}}
#weaponIcon{
  position:absolute;left:12.2%;top:33%;width:16.8%;height:39%;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(50,30,5,.5));
}
.chipmeta{
  position:absolute;left:33%;top:32%;right:9%;height:42%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  overflow:hidden;
}
#weaponName{
  font-family:var(--display);font-size:clamp(10px,3vw,15px);line-height:1.05;
  color:#4a3314;white-space:nowrap;
}
#weaponTag{
  font-weight:800;font-size:clamp(6.5px,1.9vw,8.5px);letter-spacing:.16em;
  color:#6d7a33;margin-top:1px;
}

#touchui{position:absolute;inset:0;z-index:4;pointer-events:none}
.thumbstick{
  position:absolute;
  bottom:calc(var(--safe-b) + 14px);
  width:clamp(96px,28vw,124px);
  aspect-ratio:1;
  pointer-events:none;
  opacity:.94;
  z-index:2;
}
.thumbstick.left{left:calc(var(--safe-l) + 12px)}
.thumbstick.right{right:calc(var(--safe-r) + 12px)}
.stickring{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,rgba(255,247,222,.22),rgba(255,247,222,.07) 60%,rgba(95,122,47,.18) 100%);
  border:2px solid rgba(255,247,222,.55);
  box-shadow:inset 0 3px 10px rgba(40,28,10,.22),0 5px 14px rgba(40,28,10,.25);
}
.thumbstick.right .stickring{
  border-color:rgba(126,240,220,.55);
  box-shadow:inset 0 3px 10px rgba(20,40,30,.25),0 0 16px rgba(60,220,200,.16);
}
.stickknob{
  position:absolute;left:50%;top:50%;
  width:44%;height:44%;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 42% 34%,#fff3cf,#e7cf9b 62%,#c9a86a);
  border:2px solid rgba(110,84,38,.55);
  box-shadow:0 3px 8px rgba(40,28,10,.3),inset 0 2px 4px rgba(255,255,255,.5);
  will-change:transform;
}
.thumbstick.right .stickknob{
  background:radial-gradient(circle at 42% 34%,#dffbf4,#9fe8dc 62%,#5bbcb1);
}
.sticklabel{
  position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  font-weight:800;font-size:clamp(6px,1.8vw,8px);letter-spacing:.16em;
  color:rgba(255,247,224,.92);text-shadow:0 1px 2px rgba(40,25,8,.5);
  white-space:nowrap;
}
.stonebtn{
  position:absolute;border:0;background:none;padding:0;pointer-events:auto;
  width:clamp(78px,23vw,124px);aspect-ratio:368/366;
  cursor:pointer;
  filter:drop-shadow(0 6px 12px rgba(50,35,10,.4));
  transition:transform .08s ease, filter .12s ease;
  -webkit-user-select:none;user-select:none;
}
.stonebtn .btnart{display:block;width:100%;height:100%;position:absolute;inset:0}
.stonebtn .btncore{
  position:absolute;inset:17%;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,rgba(255,246,214,.35),rgba(255,246,214,.06) 70%,rgba(60,45,15,.15));
  border:2px solid rgba(95,122,47,.6);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.35),inset 0 -3px 6px rgba(70,90,30,.25);
}
.stonebtn .btnlabel{
  font-family:var(--display);font-size:clamp(10px,2.9vw,14px);
  color:#4a3614;line-height:1;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.stonebtn .btnsub{
  font-weight:800;font-size:clamp(5.5px,1.6vw,7.5px);letter-spacing:.18em;
  color:#6c5b2c;margin-top:2px;opacity:.85;
}
.stonebtn.fire .btncore{
  background:radial-gradient(circle at 50% 36%,#ffd8a8 0%,#ff8a58 18%,#f04b2f 55%,#b82813 100%);
  border:2px solid rgba(122,30,12,.75);
  box-shadow:inset 0 2px 8px rgba(255,230,180,.55),inset 0 -5px 10px rgba(110,20,5,.45),0 0 18px rgba(255,110,60,.45);
}
.stonebtn.fire .btnlabel{color:#fff3d8;text-shadow:0 1.5px 0 rgba(110,20,5,.65);font-size:clamp(12px,3.4vw,17px)}
.stonebtn.fire .btnsub{color:rgba(255,240,215,.85)}
.stonebtn:active{transform:scale(.94);filter:drop-shadow(0 3px 6px rgba(50,35,10,.35)) brightness(1.08)}
#fireBtn{bottom:calc(var(--safe-b) + 126px);right:calc(var(--safe-r) + 16px);width:clamp(70px,21vw,100px)}
#dodgeBtn{bottom:calc(var(--safe-b) + 136px);left:calc(var(--safe-l) + 18px);right:auto;width:clamp(58px,17vw,84px)}
#dodgeBtn .btnlabel{font-size:clamp(9px,2.4vw,12px)}
#dodgeBtn.cool{filter:grayscale(.55) brightness(.82) drop-shadow(0 4px 8px rgba(50,35,10,.3));opacity:.75}

#keyhint{
  position:absolute;left:50%;bottom:calc(var(--safe-b) + 58px);
  transform:translateX(-50%);
  font-weight:700;font-size:clamp(8px,2.2vw,11px);letter-spacing:.04em;
  color:#fff6da;
  background:rgba(64,46,16,.42);
  border:1px solid rgba(255,244,214,.3);
  padding:4px 10px;border-radius:9px;
  white-space:nowrap;opacity:0;transition:opacity .7s ease;
  z-index:3;
}
#keyhint.show{opacity:1}

#centerMsg{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.92);
  font-family:var(--display);font-size:clamp(20px,7vw,46px);
  color:#fff0bf;text-align:center;
  text-shadow:0 3px 0 #6b3f13,0 0 24px rgba(255,190,70,.65);
  opacity:0;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;white-space:nowrap;
}
#centerMsg.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------------- screens ---------------- */
.screen{position:absolute;inset:0;z-index:40}
.screen.hidden{display:none}
#start,#results{
  display:flex;flex-direction:column;
  overflow:hidden;
}
.scrim{
  position:absolute;inset:0;
  background:url("../assets/art/start_card_backdrop.webp") center 42%/cover no-repeat;
}
.scrim::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,246,215,.06) 0%,rgba(255,246,215,0) 38%,rgba(255,246,215,.55) 76%,rgba(255,246,215,.86) 100%);
}

#start .titleart{
  position:absolute;z-index:2;
  left:calc(var(--safe-l) + clamp(10px,3vw,30px));
  top:calc(var(--safe-t) + clamp(8px,2.4vw,26px));
  width:min(60vw,470px);
  height:auto;
  filter:drop-shadow(0 8px 16px rgba(45,32,8,.34));
}
.titleart.small{
  position:relative;
  width:min(58vw,300px);
  filter:drop-shadow(0 6px 14px rgba(45,32,8,.35));
}
.startpanel{
  position:absolute;z-index:3;
  left:calc(var(--safe-l) + clamp(10px,3vw,30px));
  bottom:calc(var(--safe-b) + clamp(12px,3vw,30px));
  width:min(430px,calc(100vw - var(--safe-l) - var(--safe-r) - 20px));
  padding:clamp(12px,3.2vw,20px) clamp(13px,3.4vw,22px);
  border-radius:clamp(16px,4vw,24px);
  background:linear-gradient(180deg,rgba(255,248,224,.94),rgba(243,224,178,.94));
  border:3px solid rgba(130,100,48,.45);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 16px 38px rgba(52,38,12,.32);
  backdrop-filter:blur(3px);
}
.kicker{
  font-weight:800;font-size:clamp(7.5px,2.2vw,10px);
  letter-spacing:.16em;color:#6d6f2f;line-height:1.3;
}
.tagline{
  margin:6px 0 12px;
  font-weight:800;font-size:clamp(12px,3.6vw,17px);line-height:1.28;color:#453115;
}
.tablet{
  display:block;width:100%;
  font-family:var(--display);font-size:clamp(16px,4.6vw,24px);
  line-height:1;letter-spacing:.02em;text-align:center;
  color:#3f2a0e;
  padding:clamp(10px,2.8vw,15px) 16px clamp(11px,3vw,16px);
  border-radius:16px;border:3px solid #8a6a32;
  background:linear-gradient(180deg,#ffe9b0 0%,#f0d093 55%,#dfb672 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7),inset 0 -5px 0 rgba(120,90,35,.3),0 7px 0 #a07c42,0 12px 20px rgba(55,40,12,.28);
  cursor:pointer;margin:0 0 12px;
  transition:transform .08s ease,box-shadow .08s ease,filter .12s ease;
}
.tablet:hover{filter:brightness(1.04)}
.tablet:active{
  transform:translateY(5px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(120,90,35,.3),0 2px 0 #a07c42,0 4px 9px rgba(55,40,12,.25);
}
.tablet .sub{
  display:block;margin-top:4px;
  font-family:var(--sans);font-weight:800;font-size:clamp(7px,2vw,9px);
  letter-spacing:.14em;color:#7a5a24;
}
.tablet.primary{
  background:linear-gradient(180deg,#ff9a68 0%,#f0512f 52%,#cf311b 100%);
  border-color:#8f2412;
  color:#fff5dc;
  text-shadow:0 2px 0 rgba(105,22,5,.55);
  box-shadow:inset 0 3px 0 rgba(255,226,190,.55),inset 0 -6px 0 rgba(110,20,5,.38),0 8px 0 #8f2412,0 14px 26px rgba(110,28,8,.38);
}
.tablet.primary:active{
  box-shadow:inset 0 3px 0 rgba(255,226,190,.4),inset 0 -2px 0 rgba(110,20,5,.38),0 2px 0 #8f2412,0 4px 10px rgba(110,28,8,.3);
}
.tablet.primary .sub{color:rgba(255,240,215,.85)}
.tablet.small{
  width:auto;padding:8px 16px 9px;
  font-family:var(--sans);font-weight:800;font-size:clamp(9px,2.6vw,11px);
  letter-spacing:.08em;border-radius:12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(120,90,35,.3),0 4px 0 #a07c42,0 8px 12px rgba(55,40,12,.22);
}
.controls{
  margin:0;text-align:center;
  font-weight:700;font-size:clamp(8.5px,2.5vw,11.5px);line-height:1.45;color:#5d4720;
}
.best{
  margin:6px 0 0;text-align:center;
  font-weight:800;font-size:clamp(8.5px,2.5vw,11px);letter-spacing:.04em;color:#7a5a24;
}
#bestLine:empty{display:none}

.sensrow{
  margin:0 0 12px;padding:7px 10px 5px;
  border-radius:12px;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(120,92,44,.28);
  text-align:left;
}
.senshead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.senshead .senscap{
  font-weight:800;font-size:10px;letter-spacing:.14em;color:#7a6630;
}
.sensval{
  font-weight:700;font-size:12px;letter-spacing:.02em;color:#4a3310;
}
.sensrow .sensends{
  display:flex;justify-content:space-between;
  font-weight:700;font-size:9px;letter-spacing:.1em;color:#8a7444;
}
.sensrange{
  display:block;width:100%;height:22px;margin:1px 0;
  accent-color:#e8613c;cursor:pointer;
}
#bestLine:empty{display:none}

.soundtoggle{
  position:absolute;z-index:6;
  top:calc(var(--safe-t) + 10px);
  right:calc(var(--safe-r) + 10px);
  font-family:var(--sans);font-weight:800;font-size:clamp(8px,2.3vw,10px);
  letter-spacing:.1em;
  color:#4a3414;
  padding:7px 11px;border-radius:11px;
  background:linear-gradient(180deg,rgba(255,247,222,.95),rgba(238,218,172,.95));
  border:2px solid rgba(120,92,44,.55);
  box-shadow:0 3px 8px rgba(50,35,10,.25);
  cursor:pointer;
}
.soundtoggle:active{transform:translateY(2px)}
#results .soundtoggle{position:fixed}

/* pause + results panels */
#pause,#results{align-items:center;justify-content:center;padding:calc(var(--safe-t) + 10px) 10px calc(var(--safe-b) + 10px)}
#pause{background:radial-gradient(ellipse at center,rgba(255,246,214,.55),rgba(30,22,8,.55) 100%),url("../assets/art/start_card_backdrop.webp") center 42%/cover no-repeat}
.panel{
  width:min(440px,94vw);
  max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 20px);
  overflow:auto;
  padding:clamp(14px,4vw,24px);
  border-radius:clamp(16px,4vw,24px);
  background:linear-gradient(180deg,rgba(255,248,224,.97),rgba(240,219,170,.97));
  border:3px solid rgba(130,100,48,.5);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 20px 48px rgba(45,32,8,.4);
  text-align:center;
  z-index:2;
}
.panel h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,8vw,44px);
  margin:4px 0 10px;color:#4a3212;
  text-shadow:0 2px 0 rgba(255,255,255,.5);
}
#pause .kicker,#results .kicker{text-align:center}
.pscore,.final{
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,18px);
  margin:0 0 16px;
}
.pscore span,.final span{
  font-weight:800;font-size:clamp(9px,2.6vw,12px);letter-spacing:.06em;
  padding:7px 10px;border-radius:11px;
  background:rgba(255,255,255,.45);
  border:2px solid rgba(120,92,44,.3);
}
.pscore b,.final b{
  font-family:var(--num);font-weight:400;
  font-size:clamp(22px,6vw,32px);line-height:0;vertical-align:-4px;
  margin-left:4px;
}
.pscore .pyou b,.final .pyou b{color:var(--teal-deep)}
.pscore .ptiki b,.final .ptiki b{color:var(--coral-deep)}
.pcolon{font-family:var(--num);font-size:clamp(20px,5vw,26px);opacity:.6}
.ptips{
  margin:4px 0 16px;text-align:left;
  font-size:clamp(10px,2.8vw,12.5px);line-height:1.45;color:#5f4a22;
  background:rgba(255,255,255,.32);
  border-radius:12px;padding:10px 12px;
  border:1px solid rgba(120,92,44,.2);
}
.ptips p{margin:0 0 5px}
.ptips p:last-child{margin-bottom:0}
.ptips b{color:#3f2c0d}

#results{
  justify-content:flex-start;
  gap:6px;
  overflow:auto;
}
.resultpanel{width:min(440px,94vw);text-align:center;flex:none}
.resultpanel h2{
  font-family:var(--display);
  font-size:clamp(30px,9vw,50px);
  margin:2px 0 12px;
  color:#2c8f5c;
}
.resultpanel h2.lose{color:var(--coral-deep)}
.resultpanel h2.draw{color:var(--teal-deep)}
.final{margin-bottom:10px}
.resultline{
  margin:0 0 12px;font-weight:800;font-size:clamp(11px,3vw,14px);color:#56401b;
}
.boardwrap{
  margin:0 0 14px;padding:9px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(120,92,44,.25);
}
.boardtitle{
  font-weight:800;font-size:clamp(8px,2.2vw,10px);
  letter-spacing:.15em;color:#6d6f2f;margin-bottom:6px;
}
.board{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:3px;
  max-height:132px;overflow:auto;
}
.board li{
  display:flex;align-items:center;gap:6px;
  font-weight:800;font-size:clamp(10px,2.7vw,12px);color:#4d3a18;
  padding:3px 4px;border-radius:7px;
}
.board li.mine{background:rgba(23,179,166,.18)}
.board .brank{width:18px;text-align:right;font-family:var(--num);font-size:14px;color:#8a6a32}
.board .bname{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board a{color:#2c6f68;text-decoration:none}
.board .bval{font-family:var(--num);font-size:15px;color:#3f5420}
.boardempty{justify-content:center;color:#8d7444;font-style:italic}

/* small screens */
@media (max-width:430px){
  #topbar{gap:5px}
  .teamscore{width:clamp(50px,15.5vw,74px);margin-top:6px;padding:4px 4px 5px}
  .tname{font-size:clamp(6px,1.85vw,8px);letter-spacing:.03em}
  .startpanel{padding:12px 13px}
  #resultWord{font-size:clamp(26px,9vw,40px)}
  .board{max-height:108px}
  .resultpanel{padding:14px 13px}
  #keyhint{font-size:8px;max-width:92vw;white-space:normal;text-align:center;line-height:1.35}
}
@media (pointer:coarse){
  #weaponchip{
    bottom:auto;
    top:calc(var(--safe-t) + 104px);
    left:calc(var(--safe-l) + 10px);
    width:clamp(138px,40vw,190px);
  }
  #health{
    bottom:calc(var(--safe-b) + 126px);
    width:clamp(120px,34vw,190px);
  }
  #keyhint{display:none}
}
@media (pointer:fine){
  #moveHint{display:none}
  #touchui{display:none}
}
@media (min-width:900px) and (pointer:fine){
  #start .titleart{width:min(42vw,520px)}
  .startpanel{left:calc(var(--safe-l) + 46px);bottom:calc(var(--safe-b) + 40px);width:460px}
  #weaponchip{width:250px}
  #health{width:250px}
}

@media (max-height:520px) and (orientation:landscape){
  #start .titleart{width:min(40vw,330px)}
  .startpanel{
    left:auto;right:calc(var(--safe-r) + 16px);
    bottom:calc(var(--safe-b) + 12px);
    width:min(360px,48vw);padding:10px 14px;
  }
  .tagline{font-size:12px;margin:4px 0 8px}
  .startpanel .tablet{padding:9px 10px 10px;font-size:16px;margin-bottom:8px}
  .soundtoggle{top:calc(var(--safe-t) + 8px);right:calc(var(--safe-r) + 8px)}
  .panel{padding:12px 16px;max-height:calc(100dvh - 16px)}
  .panel h2{font-size:26px;margin:2px 0 6px}
  .ptips{display:none}
  #pause .panel{padding:9px 14px}
  #pause .panel h2{font-size:24px;margin:2px 0 5px}
  #pause .pscore{margin-bottom:9px}
  #pause .sensrow{margin-bottom:8px;padding:4px 8px 2px}
  #pause .senshead .senscap{font-size:8px;letter-spacing:.12em}
  #pause .sensval{font-size:10px}
  #pause .sensrange{height:15px;margin:0}
  #pause .sensends{font-size:7px;letter-spacing:.08em}
  #pause .panel .tablet{padding:7px 10px 8px;font-size:15px;margin-bottom:8px}
  #pause .panel .tablet.small{padding:5px 10px 6px;font-size:9px;margin-bottom:0}
  #results .titleart.small{width:min(30vw,190px)}
  .board{max-height:70px}
  #fireBtn{width:70px;bottom:calc(var(--safe-b) + 112px);right:calc(var(--safe-r) + 20px)}
  #dodgeBtn{width:58px;bottom:calc(var(--safe-b) + 118px);left:calc(var(--safe-l) + 20px)}
  .thumbstick{width:100px;bottom:calc(var(--safe-b) + 12px)}
  #weaponchip{width:170px}
  #health{width:190px;bottom:calc(var(--safe-b) + 16px)}
  #toast{top:66%}
  #killfeed{top:calc(var(--safe-t) + 96px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

.dmg{
  position:absolute;pointer-events:none;z-index:6;
  transform:translate(-50%,-50%);
  font-family:var(--num);font-size:clamp(14px,3.8vw,22px);line-height:1;
  color:#fff1c7;text-shadow:0 2px 0 rgba(70,35,5,.8),0 0 8px rgba(255,180,60,.6);
}
.dmg.kill{color:#ffca4f;font-size:clamp(18px,4.6vw,28px)}

#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
#confetti span{
  position:absolute;top:-24px;width:9px;height:14px;border-radius:2px;
  animation:conffall linear forwards;
}
@keyframes conffall{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(30px,110vh,0) rotate(720deg)}
}

#pause{
  background:
    linear-gradient(180deg,rgba(255,247,220,.78),rgba(255,240,205,.62)),
    url("../assets/art/start_card_backdrop.webp") center 42%/cover no-repeat;
}
#results{
  justify-content:flex-start;
  align-items:center;
  padding-top:calc(var(--safe-t) + 8px);
}
#results .titleart.small{
  align-self:flex-start;
  margin-left:calc(var(--safe-l) + clamp(10px,3vw,24px));
  margin-bottom:2px;
  flex:none;
}
#results .resultpanel{max-height:none;flex:none}
#results{overflow-y:auto}

#rotate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  background:
    linear-gradient(180deg,rgba(255,247,220,.7),rgba(255,240,205,.86)),
    url("../assets/art/start_card_backdrop.webp") center 42%/cover no-repeat;
  touch-action:none;pointer-events:auto;
}
#rotate.hidden{display:none}
.rotatepanel{
  width:min(400px,92vw);
  padding:22px 20px 24px;
  text-align:center;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,248,224,.97),rgba(240,219,170,.97));
  border:3px solid rgba(130,100,48,.5);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 18px 40px rgba(45,32,8,.38);
}
.phoneicon{
  width:54px;height:94px;margin:6px auto 18px;
  border:4px solid #4a3414;border-radius:12px;
  position:relative;transform:rotate(90deg);
  background:linear-gradient(180deg,#c9f2e8,#8fd9c9 60%,#54b7a8);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 6px 12px rgba(45,32,8,.3);
  animation:phoneturn 2.2s ease-in-out infinite;
}
.phoneicon::after{
  content:"";position:absolute;left:50%;bottom:6px;width:6px;height:6px;border-radius:50%;
  transform:translateX(-50%);background:#4a3414;
}
@keyframes phoneturn{
  0%,18%{transform:rotate(0deg)}
  55%,82%{transform:rotate(90deg)}
  100%{transform:rotate(0deg)}
}
.rotatepanel h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,6vw,30px);line-height:1.15;
  margin:0 0 10px;color:#46300f;
}
.rotatepanel p{
  margin:0;font-weight:800;font-size:clamp(12px,3.4vw,15px);
  line-height:1.35;color:#5d4720;
}
.rotatepanel .rotatesub{
  margin-top:7px;font-weight:700;font-size:clamp(10px,2.8vw,12px);
  color:#7a5a24;
}
@media (max-height:520px){
  #rotate .rotatepanel{padding:14px 18px;width:min(360px,88vw)}
  .phoneicon{width:40px;height:70px;margin:2px auto 10px}
  .rotatepanel h2{font-size:20px;margin-bottom:6px}
  .rotatepanel p{font-size:12px}
  .rotatepanel .rotatesub{font-size:10px;margin-top:4px}
}

@media (max-height:520px) and (orientation:landscape){
  #topbar{top:calc(var(--safe-t) + 4px);gap:4px}
  #timer{width:clamp(66px,26vh,96px)}
  #timerDisc{inset:18%}
  #timerNum{font-size:clamp(22px,8.4vh,40px)}
  #timerLabel{font-size:6px;letter-spacing:.16em}
  .teamscore{width:clamp(48px,15vh,72px);margin-top:4px;padding:3px 4px 4px}
  .tname{font-size:6.5px}
  .tscore{font-size:clamp(18px,6.2vh,28px)}
  #pauseBtn{width:38px;top:calc(var(--safe-t) + 4px)}
  #weaponchip{width:150px;top:calc(var(--safe-t) + 88px);left:calc(var(--safe-l) + 10px)}
  #weaponName{font-size:11px}
  #killfeed{top:calc(var(--safe-t) + 88px);font-size:9px}
  #health{width:180px;bottom:calc(var(--safe-b) + 14px)}
  #toast{top:66%}
  #start .titleart{width:min(36vw,300px)}
  .startpanel .controls{font-size:10px;line-height:1.35}
  .startpanel .tagline{font-size:12px}
  #results{flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:6px 10px;overflow:hidden}
  #results .titleart.small{display:block;width:min(26vw,200px);margin:0;align-self:center;flex:none}
  #results .resultpanel{width:min(52vw,430px);max-height:calc(100dvh - 12px);padding:12px 14px;overflow:auto}
  #results .resultpanel h2{font-size:26px;margin:0 0 6px}
  #results .resultpanel .final{margin-bottom:6px}
  #results .resultpanel .resultline{font-size:11px;margin-bottom:8px}
  #results .resultpanel .boardwrap{margin-bottom:8px;padding:6px 8px}
  #results .resultpanel .board{max-height:62px}
  #results .resultpanel .tablet{padding:8px 12px 9px;margin-bottom:8px;font-size:16px}
  #results .resultpanel .tablet.small{font-size:10px;margin-bottom:0;padding:6px 12px 7px}
}