/* TWINS – dark background, warm fire tones (orange / gold) as accent */
:root {
  --bg: #100c0a; --bg2: #1a1410; --card: #221a14; --line: #3a2c20;
  --text: #f4ece2; --muted: #a8998a;
  --fire: #ff8a2a; --gold: #ffc857; --a: #4da3ff; --b: #ff9a3d; --bad: #ff5a4a; --good: #8fe08a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
body { user-select: none; -webkit-user-select: none; touch-action: manipulation; overscroll-behavior: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

.screen { position: fixed; inset: 0; }
#home, #lobby { overflow-y: auto; background:
  radial-gradient(120% 80% at 50% 110%, rgba(255,138,42,.22), transparent 60%),
  radial-gradient(60% 50% at 50% 0%, rgba(255,200,87,.08), transparent 70%), var(--bg); }

.btn { appearance: none; border: 1.5px solid var(--line); background: var(--card); color: var(--text); cursor: pointer;
  border-radius: 12px; padding: .7em 1.1em; font-weight: 700; font-size: 1rem; line-height: 1.15; transition: transform .08s, border-color .15s, background .15s; }
.btn:hover, .btn:focus-visible { border-color: var(--fire); outline: none; }
.btn:active { transform: scale(.97); }
.btn.big { display: flex; flex-direction: column; gap: .2em; align-items: center; width: 100%; padding: .85em 1em; font-size: 1.15rem; }
.btn.big small { font-weight: 500; font-size: .78rem; color: var(--muted); }
.btn.primary { background: linear-gradient(180deg, #ff9d3d, #e8701a); border-color: #ffb560; color: #1c0f04; }
.btn.primary small { color: #5a2e08; }
.btn.ghost { background: transparent; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }

/* ---------- home ---------- */
.home-in { min-height: 100%; max-width: 30rem; margin: 0 auto; padding: max(1.2rem, env(safe-area-inset-top)) 1rem max(1.2rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; }
.logo { margin: 0; font-size: clamp(3.4rem, 17vw, 6.2rem); font-weight: 900; letter-spacing: .08em; line-height: 1;
  background: linear-gradient(180deg, #ffe1a0 10%, var(--gold) 40%, var(--fire) 75%, #c9460c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 26px rgba(255,138,42,.45)); }
.logo span { background: linear-gradient(180deg, #fff, #ffd98a 50%, #ff8a2a); -webkit-background-clip: text; background-clip: text; }
.tag { margin: 0 0 .5rem; color: var(--gold); font-size: 1.1rem; letter-spacing: .04em; }
.menu { width: 100%; display: flex; flex-direction: column; gap: .6rem; }
.join { display: flex; gap: .5rem; }
.join input { flex: 1; min-width: 0; font: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: var(--text); background: #140f0c; border: 1.5px solid var(--line); border-radius: 12px; padding: .6em .5em; user-select: text; -webkit-user-select: text; }
.join input:focus { outline: none; border-color: var(--fire); }
.err { min-height: 1.2em; margin: 0; color: var(--bad); font-weight: 600; }
.devices { width: 100%; display: flex; flex-direction: column; gap: .25rem; font-size: .84rem; color: var(--muted); text-align: left; }
.devices div { padding: .35em .7em; border-radius: 8px; background: rgba(255,255,255,.04); }
.devices .on { color: var(--text); }
.devices .tip { background: none; padding-left: .2em; font-style: italic; }

/* ---------- lobby ---------- */
.lob-head { display: flex; align-items: center; gap: .8rem; padding: max(.7rem, env(safe-area-inset-top)) 1rem .5rem; }
.lob-head h2 { flex: 1; margin: 0; font-size: 1.3rem; color: var(--gold); }
.code { appearance: none; cursor: pointer; border: 1.5px dashed var(--fire); border-radius: 10px; background: rgba(255,138,42,.1); color: var(--gold);
  font-weight: 800; letter-spacing: .12em; padding: .35em .8em; font-size: 1.05rem; }
.lob-body { display: grid; grid-template-columns: minmax(15rem, 22rem) 1fr; gap: 1.2rem; padding: .4rem 1rem 1.5rem; max-width: 70rem; margin: 0 auto; }
.lob-left, .lob-right { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.qr { align-self: center; width: min(13rem, 42vh); aspect-ratio: 1; background: #fff; border-radius: 14px; padding: .7rem; }
.qr svg { width: 100%; height: 100%; display: block; }
#lob-join { margin: 0; text-align: center; font-size: .9rem; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.seat { appearance: none; cursor: pointer; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center;
  border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: .65rem .75rem; }
.seat .dot { grid-row: span 2; width: 1.9rem; height: 1.9rem; border-radius: 50%; }
.seat.a .dot { background: var(--a); box-shadow: 0 0 14px rgba(77,163,255,.6); }
.seat.b .dot { background: var(--b); box-shadow: 0 0 14px rgba(255,154,61,.6); }
.seat b { font-size: 1rem; } .seat i { font-style: normal; font-size: .76rem; color: var(--muted); }
.seat em { grid-column: 1 / -1; font-style: normal; font-size: .82rem; font-weight: 700; margin-top: .25rem; color: var(--muted); }
.seat.me { border-color: var(--gold); } .seat.me em { color: var(--gold); } .seat.taken em { color: var(--good); }
.toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.toggle button { appearance: none; border: 0; background: var(--card); padding: .6em; font-weight: 700; cursor: pointer; color: var(--muted); }
.toggle button.on { background: var(--fire); color: #1c0f04; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.tile { appearance: none; cursor: pointer; aspect-ratio: 1 / 1.05; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .3rem; min-width: 0; }
.tile .n { font-size: 1.5rem; font-weight: 900; color: var(--gold); line-height: 1; }
.tile .nm { font-size: .64rem; color: var(--muted); text-align: center; line-height: 1.1; overflow: hidden; max-height: 2.2em; }
.tile .st { font-size: .72rem; letter-spacing: .08em; color: var(--gold); min-height: 1em; }
.tile .st s { text-decoration: none; opacity: .25; }
.tile.locked { cursor: default; opacity: .4; } .tile.locked .n { color: var(--muted); }
.tile.sel { border-color: var(--fire); box-shadow: 0 0 0 2px rgba(255,138,42,.35), 0 8px 24px -8px rgba(255,138,42,.6); }
.tile.done { background: linear-gradient(180deg, #2a2016, #221a14); }
@media (max-width: 46rem) { .lob-body { grid-template-columns: 1fr; } .qr { width: 10rem; } }

/* ---------- game ---------- */
#game { background: #050403; }
#stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 150vh); width: min(100vw, 150dvh);
  aspect-ratio: 3 / 2; font-size: calc(min(100vw, 150vh) / 60); font-size: calc(min(100vw, 150dvh) / 60); overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1em; align-items: start; padding: .7em 3.4em .5em .9em;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); pointer-events: none; }
.hp { display: flex; align-items: center; gap: .45em; }
.hp.b { justify-content: flex-end; }
.hp b { font-size: .95em; min-width: 2em; text-align: center; }
.bar { flex: 1; max-width: 15em; height: .85em; border-radius: 1em; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: 1em; transition: width .15s; }
.hp.a .bar i { background: linear-gradient(90deg, #2f7fe0, var(--a)); }
.hp.b .bar i { background: linear-gradient(90deg, var(--b), #e8701a); margin-left: auto; }
.hp.low .bar i { animation: low .5s infinite alternate; } @keyframes low { to { filter: brightness(1.7); } }
.pad-ic { font-size: 1em; }
.mid { text-align: center; white-space: nowrap; }
#hud-level { font-weight: 800; font-size: .95em; color: var(--gold); }
#hud-sub { font-size: .82em; color: #e6dccf; display: flex; gap: 1em; justify-content: center; }
#hud-score::before { content: '★ '; color: var(--gold); }
#prog { position: absolute; left: 30%; right: 30%; top: 3.6em; height: .35em; border-radius: 1em; background: rgba(0,0,0,.5); overflow: hidden; }
#prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--fire)); transition: width .3s; }
#bossbar { position: absolute; left: 22%; right: 22%; top: 4.2em; text-align: center; font-size: .8em; font-weight: 800; color: #ffd9c9; }
#bossbar .bar { max-width: none; height: .8em; margin-top: .15em; }
#bossbar .bar i { background: linear-gradient(90deg, #b3261a, #ff5a4a); }
#timer { position: absolute; left: 50%; top: 5.6em; transform: translateX(-50%); font-weight: 900; font-size: 1.5em; padding: .05em .6em; border-radius: .5em; background: rgba(0,0,0,.5); }
#timer.danger { color: var(--bad); }
#weather { position: absolute; left: .9em; top: 3em; font-size: .8em; font-weight: 800; padding: .2em .7em; border-radius: 1em; background: rgba(0,0,0,.5); }
#hint { position: absolute; left: 50%; bottom: 2.2em; transform: translateX(-50%); max-width: 76%; text-align: center; font-size: 1em; font-weight: 700;
  padding: .5em 1em; border-radius: .8em; background: rgba(20,14,10,.85); border: 1px solid var(--fire); color: #ffe9c9; pointer-events: none; }
#banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: 2.6em; font-weight: 900; letter-spacing: .1em; color: var(--gold);
  text-shadow: 0 .08em .5em rgba(255,138,42,.8), 0 0 .1em #000; pointer-events: none; animation: pop .25s ease-out; white-space: nowrap; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
#warn { position: absolute; left: 50%; top: 7.6em; transform: translateX(-50%); font-size: .85em; font-weight: 700; padding: .3em .9em; border-radius: 1em; background: #7a2230; white-space: nowrap; }
#b-pause { position: absolute; right: .6em; top: .5em; width: 2.3em; height: 2.3em; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45);
  font-weight: 900; font-size: .95em; cursor: pointer; }

#ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,6,5,.74); z-index: 5; }
.card { width: min(34em, 86%); text-align: center; padding: 1.4em 1.5em; border-radius: 1.2em; background: linear-gradient(180deg, #2a2018, #1a1410); border: 1.5px solid var(--line);
  box-shadow: 0 1.5em 4em rgba(0,0,0,.6); display: flex; flex-direction: column; gap: .55em; align-items: center; }
.card .kick { font-size: .9em; font-weight: 800; letter-spacing: .3em; color: var(--fire); }
.card h2 { margin: 0; font-size: 2em; line-height: 1.1; color: var(--gold); }
.card p { margin: 0; font-size: 1em; color: #e6dccf; line-height: 1.35; }
.card .small { font-size: .82em; color: var(--muted); }
.card .stars { font-size: 2.4em; letter-spacing: .12em; color: var(--gold); text-shadow: 0 0 .5em rgba(255,200,87,.6); }
.card .stars s { text-decoration: none; opacity: .2; }
.card .row { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin-top: .4em; }
.card .btn { font-size: 1em; padding: .6em 1.3em; border-radius: .8em; }
.card .logo { font-size: 4.2em; }
.viewer .card .row { display: none; }

/* ---------- touch controls ---------- */
.tc { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tc > * { pointer-events: auto; touch-action: none; }
.tc-zone { position: absolute; left: 0; top: 16%; bottom: 0; width: 44%; }
.tc-base { position: absolute; width: 17vh; height: 17vh; min-width: 84px; min-height: 84px; border-radius: 50%; transform: translate(-50%, -50%);
  left: 15vh; top: calc(100% - 17vh); border: 2px solid rgba(255,255,255,.28); background: rgba(255,255,255,.07); opacity: .55; pointer-events: none; }
.tc-base.on { opacity: 1; }
.tc-knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,.4); }
.tc-btn { position: absolute; appearance: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(30,22,16,.55); color: #fff;
  font-weight: 800; font-size: max(10px, 2.4vh); letter-spacing: .04em; display: flex; align-items: center; justify-content: center; padding: 0; }
.tc-btn.down { background: rgba(255,255,255,.35); transform: scale(.94); }
.tc-btn.attack { right: max(3vw, env(safe-area-inset-right)); bottom: 7vh; width: 24vh; height: 24vh; border-color: rgba(255,255,255,.6); }
.tc-btn.special { right: calc(max(3vw, env(safe-area-inset-right)) + 25vh); bottom: 4vh; width: 19vh; height: 19vh; border-color: var(--gold); color: var(--gold); }
.tc-btn.dash { right: calc(max(3vw, env(safe-area-inset-right)) + 1vh); bottom: 34vh; width: 16vh; height: 16vh; }
.tc-btn.use { right: calc(max(3vw, env(safe-area-inset-right)) + 21vh); bottom: 28vh; width: 18vh; height: 18vh; border-color: var(--good); color: var(--good); background: rgba(20,60,20,.6); }
.tc-btn.sw { right: calc(max(3vw, env(safe-area-inset-right)) + 1vh); bottom: 54vh; width: 13vh; height: 13vh; font-size: max(9px, 1.9vh); border-style: dashed; }
.seat-1 .tc-btn.special { border-color: var(--fire); color: var(--fire); }

/* ---------- phone controller (TV mode) ---------- */
#pad { background: radial-gradient(90% 90% at 50% 120%, rgba(255,138,42,.2), transparent 60%), var(--bg); }
#pad.seat-0 { box-shadow: inset 0 0 0 4px var(--a); } #pad.seat-1 { box-shadow: inset 0 0 0 4px var(--b); }
.pad-head { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: .8rem; padding: max(.5rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-left)) .3rem; }
.pad-head .btn { padding: .35em .8em; }
.pad-who { flex: 1; display: flex; align-items: center; gap: .7rem; font-size: 1rem; }
.pad-who .bar { max-width: none; height: .8rem; }
#pad.seat-0 .pad-who b { color: var(--a); } #pad.seat-1 .pad-who b { color: var(--b); }
#pad.seat-0 #pad-hp { background: var(--a); } #pad.seat-1 #pad-hp { background: var(--b); }
#pad-panel { position: absolute; left: 50%; top: 3.2rem; transform: translateX(-50%); z-index: 6; width: min(26rem, 46vw); text-align: center;
  display: flex; flex-direction: column; gap: .45rem; align-items: center; }
#pad-panel:empty { display: none; }
#pad-panel h3 { margin: 0; font-size: 1.15rem; color: var(--gold); }
#pad-panel p { margin: 0; font-size: .85rem; color: var(--muted); }
#pad-panel .row { display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
#pad-panel .stars { font-size: 1.6rem; color: var(--gold); } #pad-panel .stars s { text-decoration: none; opacity: .2; }
#pad.idle .tc-btn, #pad.idle .tc-base { opacity: .25; }

/* ---------- misc ---------- */
#rotate { display: none; position: fixed; inset: 0; z-index: 50; background: var(--bg); align-items: center; justify-content: center; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--gold); }
#rotate span { display: block; font-size: 4rem; }
@media (orientation: portrait) { body.landscape-only #rotate { display: flex; } }
#toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; padding: .5em 1.1em; border-radius: 999px; background: #2a2018; border: 1px solid var(--fire);
  font-weight: 700; font-size: .95rem; max-width: 92vw; text-align: center; }
#net { position: fixed; right: .8rem; top: .8rem; z-index: 60; padding: .3em .9em; border-radius: 999px; background: #7a2230; font-weight: 700; font-size: .9rem; }