* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #05070f;
  font-family: Nunito, system-ui, sans-serif; color: #eef2ff;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.chip {
  background: rgba(10, 14, 30, .72); border: 1px solid rgba(160, 180, 255, .18);
  border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 15px;
  color: inherit; font-family: inherit; backdrop-filter: blur(4px);
}
.tap { cursor: pointer; }
.tap:active { transform: scale(.96); }

#hud {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right)); display: flex; gap: 8px; pointer-events: none;
}
#hud .tap { pointer-events: auto; }
#speed { min-width: 110px; }
#speed b { font-size: 22px; color: #ffd166; }
#btn-lights { margin-left: auto; }

#hint {
  position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; opacity: .85; white-space: nowrap; max-width: calc(100% - 20px);
  overflow: hidden; text-overflow: ellipsis;
}
#hint b { color: #ffd166; }
#hint .tc { display: none; }
body.touch #hint .kb { display: none; }
body.touch #hint .tc { display: inline; }

#touch { display: none; }
body.touch #touch { display: block; }
#stick-zone { position: fixed; left: 0; top: 0; bottom: 0; width: 50%; }
#stick {
  position: fixed; left: 110px; bottom: 110px; width: 130px; height: 130px; margin: -65px 0 0 -65px;
  border-radius: 50%; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .25);
  pointer-events: none; opacity: .6; top: auto;
}
#stick.active { opacity: 1; bottom: auto; margin: -65px 0 0 -65px; }
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(255, 209, 102, .85);
}
.tbtn {
  position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(40px, env(safe-area-inset-bottom));
  width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3);
  background: rgba(239, 71, 111, .55); color: #fff; font: 800 15px Nunito, sans-serif;
}
.tbtn.down { background: rgba(239, 71, 111, .9); }

#rotate {
  display: none; position: fixed; inset: 0; background: #05070f; z-index: 10;
  align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 20px;
}
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

.hidden { display: none !important; }
#hud .right { margin-left: auto; display: flex; gap: 8px; }
#btn-lights { margin-left: 0; }
#role.hider { color: #7ee0a1; }
#role.seeker { color: #8fb0ff; }
#role.caught { color: #ff8fa3; }
#timer { font-variant-numeric: tabular-nums; color: #ffd166; }

#lobby {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 20px));
  text-align: center; padding: 12px 14px;
}
#lobby p { margin: 0 0 10px; }
#lobby .choices { display: flex; gap: 8px; justify-content: center; }
#lobby .choices button {
  flex: 1; padding: 10px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06); color: inherit; font: 800 15px Nunito, sans-serif;
}
#pick-hider.on { background: #2f8f57; border-color: #7ee0a1; }
#pick-seeker.on { background: #2a4fb0; border-color: #8fb0ff; }
#roster { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#roster li { background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 3px 8px; }
#roster li.me { outline: 1px solid #ffd166; }

#banner {
  position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: 800;
  text-shadow: 0 2px 12px #000; text-align: center; pointer-events: none;
}
#blind {
  position: fixed; inset: 0; background: rgba(3, 5, 12, .97); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 20px; pointer-events: none;
}
#blind b { font-size: 90px; color: #8fb0ff; }
#result { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#result .card { padding: 18px 26px; text-align: center; min-width: 260px; }
#result h2 { margin: 0 0 8px; color: #ffd166; }
@media (max-height: 450px) {
  #lobby { top: 56px; padding: 8px; font-size: 13px; }
  #speed { min-width: 0; }
  #role, #speed { font-size: 13px; }
}
#btn-siren.on { background: #b01830; }
.tbtn.siren { bottom: max(150px, calc(env(safe-area-inset-bottom) + 110px)); width: 80px; height: 80px; background: rgba(40, 80, 220, .6); font-size: 13px; }
.tbtn.siren.on { background: rgba(220, 30, 50, .85); }
#spot { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); text-align: center; min-width: 240px; pointer-events: none; }
#spot .bar { height: 8px; background: rgba(255, 255, 255, .15); border-radius: 4px; margin-top: 6px; overflow: hidden; }
#spot .bar i { display: block; height: 100%; width: 0; background: #ffd166; transition: width .1s linear; }
#spot.danger { color: #ff8fa3; }
#spot.danger .bar i { background: #ff5a7a; }