html, body {
  height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; background: #0e0f13;
}
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---- join ---- */
.join { flex: 1; overflow-y: auto; touch-action: pan-y; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.join h1 { margin: 4px 0 2px; font: 900 28px/1.1 var(--f-ui); color: #ffd36b; }
.join p { margin: 0 0 14px; font: 500 15px/1.4 var(--f-ui); color: #c9bfae; }
.join label { display: block; font: 700 13px/1 var(--f-ui); color: #a89f8f; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.join input {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #16181f;
  color: #f3ead8; font: 600 17px/1.2 var(--f-ui); -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.cast { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; text-align: left;
  background: #16181f; border: 2px solid transparent; touch-action: manipulation;
}
.ch.on { border-color: #ffd36b; background: #2a2414; }
.ch .tk { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 900 17px/1 var(--f-ui); color: #111; background-size: cover; background-position: center; }
.ch b { display: block; font: 800 15px/1.15 var(--f-ui); color: #f3ead8; }
.ch small { display: block; font: 500 12px/1.25 var(--f-ui); color: #a89f8f; margin-top: 2px; }
.ch.card { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 10px; }
.ch.card .pic img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ch.card b, .ch.card small { text-align: center; }
.go {
  position: sticky; bottom: 0; margin-top: 16px; width: 100%; padding: 16px; border: 0; border-radius: 14px;
  background: #ffd36b; color: #2a1a00; font: 900 18px/1 var(--f-ui); touch-action: manipulation;
}
.go:disabled { background: #3a3428; color: #8a826f; }

/* ---- controller ---- */
.ctl { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.top {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: #16181f; border-bottom: 1px solid rgba(255,255,255,.08);
}
.top .tk { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 900 14px/1 var(--f-ui); color: #111; background-size: cover; background-position: center; }
.top .ring { flex: none; display: grid; place-items: center; border: 3px solid; border-radius: 50%; padding: 2px; }
.top .who { flex: 1; min-width: 0; }
.top .who b { display: block; font: 800 16px/1.1 var(--f-ui); color: #f3ead8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .who small { display: block; font: 600 12px/1.2 var(--f-ui); color: #a89f8f; }
.hearts { font: 400 22px/1 var(--f-ui); letter-spacing: 2px; color: #ff5d4d; white-space: nowrap; }
.hearts .off { color: #3a3a40; }
.where { flex: none; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: transparent; font: 700 13px/1 var(--f-ui); color: #f3ead8; touch-action: manipulation; }
.status { flex: none; padding: 8px 12px; text-align: center; font: 800 16px/1.25 var(--f-ui); color: #ffd36b; min-height: 36px; }
.pad { flex: 1; display: flex; min-height: 0; position: relative; }
.zone { flex: 1; position: relative; touch-action: none; }
.zone.left { border-right: 1px solid rgba(255,255,255,.06); }
.zone .hint { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); text-align: center; font: 600 13px/1.2 var(--f-ui); color: #6f6858; pointer-events: none; }
.stick-base { position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); pointer-events: none; display: none; }
.stick-knob { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #ffd36b; box-shadow: 0 4px 16px rgba(0,0,0,.5); pointer-events: none; display: none; }
.btn {
  position: absolute; left: 50%; top: 50%; width: min(42vw, 48vh, 200px); height: min(42vw, 48vh, 200px); transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #ffe08f, #f2a53a 70%); color: #2a1a00; font: 900 28px/1 var(--f-ui);
  box-shadow: 0 8px 0 #9a5f12, 0 14px 24px rgba(0,0,0,.5); transition: transform .06s;
}
.btn.down { transform: translate(-50%, -46%); box-shadow: 0 3px 0 #9a5f12, 0 6px 12px rgba(0,0,0,.5); }
.btn.bonk { background: radial-gradient(circle at 35% 30%, #b8ffd0, #2fcf6f 70%); box-shadow: 0 8px 0 #157a3d, 0 14px 24px rgba(0,0,0,.5); color: #032a12; }

.ov { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; pointer-events: none; }
.ov div { padding: 14px 18px; border-radius: 16px; font: 900 20px/1.3 var(--f-ui); max-width: 90%; }
.ov.ko div { background: rgba(40, 40, 46, .92); color: #f3ead8; }
.ov.target div { background: rgba(255, 46, 85, .92); color: #fff; animation: pulse .5s ease-in-out infinite alternate; }
.ov.info div { background: rgba(22, 24, 31, .92); color: #ffd36b; }
.ov.jump { place-items: start center; padding-top: 6%; }
.ov.jump div { background: #ffd36b; color: #2a1a00; font-size: 44px; letter-spacing: .04em; animation: pulse .18s ease-in-out infinite alternate; }
.btn.now { background: radial-gradient(circle at 35% 30%, #fff3c4, #ffd36b 70%); animation: btnpulse .18s ease-in-out infinite alternate; }
@keyframes btnpulse { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---- podium ---- */
.podium { flex: 1; display: grid; place-items: center; text-align: center; padding: 24px; }
.podium .pl { font: 900 64px/1 var(--f-ui); color: #ffd36b; }
.podium .of { font: 700 16px/1.3 var(--f-ui); color: #a89f8f; margin-top: 6px; }
.podium .pts { font: 900 28px/1.2 var(--f-ui); color: #f3ead8; margin-top: 16px; }
.podium .why { font: 700 17px/1.35 var(--f-ui); color: #c9bfae; margin-top: 18px; }

.conn { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); padding: 7px 12px; border-radius: 99px; background: #e5484d; color: #fff; font: 700 13px/1 var(--f-ui); display: none; z-index: 9; }
.conn.on { display: block; }
.err { color: #ff8a80; font: 600 14px/1.3 var(--f-ui); margin-top: 10px; min-height: 18px; }