/* ============================================================
   TYRANT — styles
   ============================================================ */
:root{
  --bg:#0b0e16; --bg2:#121729; --panel:#151b2e; --line:#232c4a;
  --gold:#ffcf4d; --gold2:#ffb300; --ink:#dfe6ff; --dim:#7d89b0;
  --red:#ff3b5c; --purple:#8b5cff; --violet:#b44cff; --green:#4dff9e;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(1200px 700px at 50% 30%, var(--bg2), var(--bg) 70%);
  color:var(--ink);
  font-family:"Avenir Next","Futura","Segoe UI",system-ui,sans-serif;
  overflow:hidden; user-select:none; -webkit-user-select:none;
}
#stage{display:flex;align-items:center;justify-content:center;gap:14px;height:100vh;padding:10px}
#arena{position:relative;flex:0 1 auto}
canvas#game{
  display:block;width:100%;height:auto;max-height:calc(100vh - 24px);
  aspect-ratio:16/9;background:#0a0d18;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 0 60px rgba(20,30,80,.55), inset 0 0 120px rgba(0,0,0,.5);
  cursor:none;
}
/* ---- HUD over canvas ---- */
#hudTop{position:absolute;top:8px;left:0;right:0;text-align:center;pointer-events:none}
#timer{
  font-size:clamp(28px,4.5vw,54px);font-weight:800;letter-spacing:.06em;
  color:var(--gold);text-shadow:0 0 18px rgba(255,207,77,.35), 0 2px 0 #000;
  font-variant-numeric:tabular-nums;
}
#timer.hot{color:var(--red);text-shadow:0 0 22px rgba(255,59,92,.5)}
#roundLabel{
  font-size:clamp(10px,1.2vw,14px);letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);margin-top:-4px;text-shadow:0 1px 0 #000;
}
#roundLabel b{color:var(--ink)}
/* ---- Tyrant side panel ---- */
#panel{
  width:104px;flex:0 0 104px;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px 8px;background:linear-gradient(180deg,var(--panel),#0e1322);
  border:1px solid var(--line);border-radius:12px;transition:opacity .3s;
}
#panel.off{opacity:.28;pointer-events:none}
#panel h3{font-size:10px;letter-spacing:.3em;color:var(--violet);font-weight:700}
#energyWrap{width:22px;height:150px;border:1px solid var(--line);border-radius:11px;
  background:#0a0e1a;position:relative;overflow:hidden}
#energyFill{position:absolute;bottom:0;left:0;right:0;height:100%;
  background:linear-gradient(180deg,var(--violet),var(--purple));
  box-shadow:0 0 14px rgba(180,76,255,.6);transition:height .12s linear}
#energyNum{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.hz{
  position:relative;width:76px;height:76px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(180deg,#1b2340,#11162a);color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  overflow:hidden;transition:transform .08s, box-shadow .15s, border-color .15s;
  font-family:inherit;
}
.hz:hover{transform:translateY(-1px)}
.hz.sel{border-color:var(--gold);box-shadow:0 0 16px rgba(255,207,77,.35)}
.hz.poor{filter:grayscale(.7) brightness(.6)}
.hz svg{width:30px;height:30px}
.hz .key{position:absolute;top:4px;left:6px;font-size:10px;color:var(--dim);
  border:1px solid var(--line);border-radius:4px;padding:0 4px;background:#0a0e1a}
.hz .cost{font-size:10px;color:var(--violet);letter-spacing:.1em}
.hz .cool{position:absolute;inset:0;pointer-events:none;border-radius:12px}
#panelHint{font-size:9px;color:var(--dim);text-align:center;letter-spacing:.12em;line-height:1.5}
/* ---- Overlays ---- */
.overlay{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:rgba(7,9,17,.9);backdrop-filter:blur(3px);border-radius:10px;z-index:10;
  text-align:center;padding:24px;
}
.overlay.show{display:flex}
.mega{font-size:clamp(48px,9vw,110px);font-weight:900;letter-spacing:.12em;color:var(--gold);
  text-shadow:0 0 40px rgba(255,207,77,.4), 0 4px 0 #000;line-height:1}
.tagline{font-size:clamp(14px,1.6vw,19px);color:var(--dim);letter-spacing:.18em;text-transform:uppercase}
.btn{
  font:inherit;font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:15px;
  padding:14px 34px;border-radius:10px;border:1px solid var(--gold);color:#111;cursor:pointer;
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  box-shadow:0 0 24px rgba(255,207,77,.3);transition:transform .08s, box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,207,77,.5)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--dim)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.namesRow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.nameBox{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.nameBox label{font-size:10px;letter-spacing:.25em;color:var(--dim)}
.nameBox input{
  font:inherit;font-weight:700;font-size:16px;width:170px;padding:9px 12px;border-radius:8px;
  border:1px solid var(--line);background:#0a0e1a;color:var(--gold);outline:none;text-align:center;
  letter-spacing:.08em;
}
.nameBox input:focus{border-color:var(--gold)}
#codeIn{text-transform:uppercase;letter-spacing:.5em;width:150px}
.roleCards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:860px}
.roleCard{
  width:330px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;text-align:left;
  background:linear-gradient(180deg,#141a30,#0d1222);
}
.roleCard h4{letter-spacing:.25em;font-size:13px;margin-bottom:8px}
.roleCard.hero h4{color:var(--gold)} .roleCard.tyrant h4{color:var(--violet)}
.roleCard p{font-size:12.5px;color:var(--dim);line-height:1.55}
kbd{
  display:inline-block;min-width:20px;text-align:center;padding:2px 6px;border-radius:5px;
  border:1px solid var(--line);border-bottom-width:2px;background:#0a0e1a;color:var(--ink);
  font-size:11px;font-family:inherit;
}
.diagram{display:flex;gap:6px;align-items:center;margin:8px 0;flex-wrap:wrap}
.mouseIcon{width:22px;height:32px;border:2px solid var(--violet);border-radius:11px;position:relative;display:inline-block}
.mouseIcon::after{content:"";position:absolute;top:5px;left:50%;width:2px;height:7px;background:var(--violet);transform:translateX(-50%)}
.note{font-size:11px;color:var(--dim);letter-spacing:.14em}
.diffRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;
  font-size:10px;letter-spacing:.25em;color:var(--dim)}
.diffRow button{
  font:inherit;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 16px;border-radius:8px;border:1px solid var(--line);background:#0a0e1a;color:var(--ink);
  cursor:pointer;transition:border-color .12s, color .12s, background .12s;
}
.diffRow button:hover{border-color:var(--dim)}
.diffRow button.on{border-color:var(--gold);color:#111;background:linear-gradient(180deg,var(--gold),var(--gold2))}
.modeRow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
#roomCode{font-size:clamp(40px,7vw,84px);font-weight:900;letter-spacing:.45em;color:var(--gold);
  text-shadow:0 0 30px rgba(255,207,77,.4);padding-left:.45em}
.scoreTable{border-collapse:collapse;font-size:18px;min-width:420px}
.scoreTable td,.scoreTable th{padding:10px 22px;border-bottom:1px solid var(--line)}
.scoreTable th{font-size:11px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
.scoreTable td.t{font-variant-numeric:tabular-nums;font-weight:800;color:var(--gold)}
.winnerRow{color:var(--green)}
#swapBig{font-size:clamp(60px,12vw,140px);font-weight:900;letter-spacing:.1em;color:var(--red);
  text-shadow:0 0 50px rgba(255,59,92,.5), 0 5px 0 #000;animation:swapPulse .5s ease infinite alternate}
@keyframes swapPulse{from{transform:scale(1)}to{transform:scale(1.06)}}
#countNum{font-size:clamp(90px,16vw,190px);font-weight:900;color:var(--gold);
  text-shadow:0 0 60px rgba(255,207,77,.5)}
.small{font-size:12px;color:var(--dim);letter-spacing:.1em;line-height:1.7}
a{color:var(--gold)}

/* ============================================================
   MOBILE / TOUCH  — everything below is gated behind body.mobile
   or default-hidden elements, so desktop keyboard+mouse is untouched.
   ============================================================ */

/* on-screen elements are hidden until JS proves this is a touch device.
   position:fixed + high z-index so the hero's buttons always sit ABOVE the
   tyrant's side panel (z-index:7) — matters in cramped local-mobile where
   both roles' UIs are on screen at once; the JUMP button must win the touch. */
.touchLayer{position:fixed;inset:0;z-index:9;display:none;pointer-events:none}
.mobileHint{display:none}
#rotateGate{display:none}

/* --- rotate-to-landscape gate (independent of the overlay switcher) --- */
#rotateGate{
  position:fixed;inset:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:#070910;text-align:center;padding:26px;
}
body.show-rotate #rotateGate{display:flex}
.rotateIcon{font-size:78px;color:var(--gold);animation:rotHint 2s ease-in-out infinite;transform-origin:center}
@keyframes rotHint{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(78deg)}}

/* --- title-screen mobile hint --- */
body.mobile .mobileHint{
  display:block;max-width:640px;font-size:12px;letter-spacing:.14em;line-height:1.7;
  color:var(--gold);border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  background:linear-gradient(180deg,#181f38,#10152a);
}
body.mobile .mobileHint b{color:var(--ink)}
/* on phones, steer to Solo/Online — Local 2P on one phone is degenerate */
body.mobile #btnLocal{display:none}

/* --- layout: let the arena take the whole viewport, panel floats --- */
body.mobile{overscroll-behavior:none;touch-action:manipulation}
body.mobile #stage{padding:0;gap:0}
body.mobile #arena{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}
body.mobile canvas#game{
  width:auto;height:auto;max-width:100vw;max-height:100vh;
  border-radius:0;border:none;touch-action:none;
}
body.mobile .overlay{overflow:auto;-webkit-overflow-scrolling:touch}
body.mobile #hudTop{top:calc(4px + env(safe-area-inset-top))}
body.mobile #timer{font-size:clamp(24px,7vw,44px)}

/* --- tyrant panel becomes a floating right-edge dock (tyrant role only) --- */
body.mobile #panel{
  position:absolute;z-index:7;top:50%;transform:translateY(-50%);
  right:calc(4px + env(safe-area-inset-right));
  width:66px;flex:0 0 auto;padding:8px 6px;gap:7px;border-radius:14px;
}
body.mobile #panel h3,body.mobile #panelHint{display:none}
body.mobile #energyWrap{width:16px;height:74px}
body.mobile #energyNum{font-size:11px}
body.mobile .hz{width:56px;height:56px}
body.mobile .hz svg{width:24px;height:24px}
body.mobile .hz .cost{font-size:8px}
body.mobile .hz .key{display:none}

/* --- hero touch controls (shown only for the hero-driving client) --- */
body.mobile.hero-touch .touchLayer{display:block}
.tCluster{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));pointer-events:auto}
.tLeftCluster{left:calc(16px + env(safe-area-inset-left));display:flex;gap:16px}
.tRightCluster{right:calc(16px + env(safe-area-inset-right))}
.tBtn{
  font:inherit;font-weight:800;color:var(--gold);
  background:radial-gradient(circle at 50% 35%, rgba(40,50,86,.92), rgba(14,19,38,.92));
  border:2px solid var(--line);border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 16px rgba(0,0,0,.5);transition:transform .06s,border-color .06s,background .06s;
}
.tDir{width:68px;height:68px;font-size:28px}     /* ≥44px touch targets */
.tJump{width:108px;height:108px;border-radius:50%;font-size:20px;letter-spacing:.12em}
.tBtn.hold{transform:scale(.94);border-color:var(--gold);
  background:radial-gradient(circle at 50% 35%, rgba(255,207,77,.28), rgba(30,24,10,.9))}

/* landscape phones are short: tighten the vertical rhythm on menus */
@media (max-height:460px){
  body.mobile .roleCards{gap:8px}
  body.mobile .roleCard{padding:10px 12px;width:290px}
  body.mobile .roleCard p{font-size:11px;line-height:1.4}
  body.mobile .mega{font-size:clamp(34px,9vw,70px)}
}