:root{
  --bg:#f2ede4; --card:#fff; --card-2:#faf7f1;
  --ink:#20272e; --ink-dim:#5d6b78; --ink-faint:#93a0ac;
  --line:#e2dad0; --line-2:#cfc4b6;
  --good:#2e9e5b; --warn:#e08a1e; --bad:#d64545; --big:#2d7fd3; --hot:#f2872d;
  --shadow:0 1px 2px rgba(40,30,20,.06), 0 6px 18px rgba(40,30,20,.07);
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15.5px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% 8%,#fffdf8 0%,transparent 42%),
                   radial-gradient(circle at 88% 92%,#fbf6ec 0%,transparent 46%);
}
.hide{display:none !important}
button{font:inherit; cursor:pointer}
code{font-family:ui-monospace,Consolas,monospace; background:#fff; padding:2px 6px;
  border:1px solid var(--line); border-radius:6px; font-size:13px}

.top{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto; padding:16px 18px 4px}
.top h1{margin:0; font-size:19px; letter-spacing:.055em; text-transform:uppercase; font-weight:750}
.top h1 span{color:var(--hot)}
.top .sub{color:var(--ink-faint); font-size:13px}
.top .spacer{flex:1}
.room-code{font-family:ui-monospace,Consolas,monospace; font-weight:700; letter-spacing:.12em;
  background:#fff; border:1px solid var(--line-2); border-radius:99px; padding:5px 12px; font-size:13px}
.ghost{background:#fff; border:1px solid var(--line-2); color:var(--ink-dim);
  padding:6px 13px; border-radius:99px; font-size:13px; box-shadow:var(--shadow)}
.ghost:hover{color:var(--ink); border-color:var(--ink-faint)}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card .hd{padding:11px 15px 0; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:750}
.card .bd{padding:12px 15px 14px}

/* ---------------- lobby ---------------- */
.lobby{max-width:640px; margin:0 auto; padding:18px; display:grid; gap:16px}
.lobby .intro, .lobby .join{padding:22px 24px 24px}
.lobby h2{margin:0 0 8px; font-size:22px}
.lobby p{color:var(--ink-dim); margin:0 0 14px}
.sizes{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.size{border:2px solid var(--line-2); background:var(--card-2); border-radius:13px;
  padding:12px 18px; display:flex; align-items:center; gap:10px; transition:.14s}
.size:hover{border-color:var(--ink-faint); transform:translateY(-1px)}
.size.on{border-color:var(--hot); background:#fff3e7; box-shadow:0 0 0 3px rgba(242,135,45,.14)}
.size .n{font-weight:700}
.size .dots{display:flex; gap:3px}
.size .dots i{width:11px; height:11px; border-radius:50%; display:block}
.primary{padding:14px 22px; width:100%; background:linear-gradient(180deg,#f79a46,#ef7c22);
  color:#fff; border:0; border-radius:13px; font-size:16.5px; font-weight:700;
  box-shadow:0 2px 0 #cf6714, 0 10px 22px rgba(239,124,34,.3)}
.primary:hover{filter:brightness(1.05)}
.primary:disabled{opacity:.5; cursor:not-allowed; filter:none}
.seats{display:grid; gap:8px; margin-bottom:16px}
.seat{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px;
  background:var(--card-2); border:1px solid var(--line)}
.seat .av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:750; font-size:13px}
.seat .who{font-weight:650}
.seat .tag{margin-left:auto; font-size:12px; color:var(--ink-faint)}
.seat.live .tag{color:var(--good); font-weight:650}
.share{font-size:13px; color:var(--ink-faint); margin:14px 0 0}

/* ---------------- game ---------------- */
.grid{max-width:1180px; margin:0 auto; padding:10px 18px 46px;
  display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:18px; align-items:start}
@media (min-width:941px) and (min-height:640px){
  .grid{grid-template-columns:min(440px, calc((100vh - 175px) * 0.481)) minmax(0,1fr)}
}
@media (max-width:940px){ .grid{grid-template-columns:1fr} }
.side{display:flex; flex-direction:column; gap:14px; min-width:0}

.wallwrap{position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.wallwrap svg{display:block; width:100%; height:auto}
.hold{cursor:default}
.hold.reach{cursor:pointer}
.hold.reach .ring{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35; r:34} 50%{opacity:.95; r:38}}
.hold.reach:hover .blob{filter:brightness(1.12)}
.climber{transition:transform .5s cubic-bezier(.3,.9,.3,1)}
.climber .halo{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.13} 50%{opacity:.27}}

.legend{display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:9px 14px;
  border-top:1px solid var(--line); background:var(--card-2); font-size:12px; color:var(--ink-dim)}
.legend .sw{display:flex; align-items:center; gap:5px}
.legend .sw i{width:13px; height:9px; border-radius:5px; display:block}

.roster{display:grid; gap:8px}
.pl{display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center;
  padding:9px 11px; border-radius:11px; border:1.5px solid transparent; background:var(--card-2)}
.pl.now{border-color:var(--who); background:var(--whoBg); box-shadow:0 0 0 3px var(--whoRing)}
.pl.you .nm::after{content:" (you)"; color:var(--ink-faint); font-weight:500}
.pl.gone{opacity:.5}
.pl.done{opacity:.62}
.pl .av{width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:750; font-size:14px; background:var(--who)}
.pl .nm{font-weight:650; font-size:14.5px; line-height:1.25}
.pl .meta{font-size:12px; color:var(--ink-faint)}
.pl .now-tag{font-size:11px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--who)}
.pl .kit{font-size:12px; color:var(--ink-faint); white-space:nowrap}

.armsrow{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.armsrow .lab, .commitrow .lab{font-size:12.5px; color:var(--ink-dim); min-width:74px}
.ebar{flex:1; height:15px; border-radius:99px; background:#e9e1d5; border:1px solid #d7ccbd;
  overflow:hidden; box-shadow:inset 0 1px 2px rgba(80,60,40,.09); position:relative}
.ebar i{display:block; height:100%; border-radius:99px; width:100%;
  transition:width .45s cubic-bezier(.2,.8,.2,1), background .35s ease}
.ebar i.hi{background:linear-gradient(180deg,#86d693,#3f9e5c)}
.ebar i.mid{background:linear-gradient(180deg,#f8d469,#e0a11e)}
.ebar i.lo{background:linear-gradient(180deg,#f2907f,#d64545)}
.ebar u{position:absolute; top:0; bottom:0; border-radius:99px; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.62) 0 4px, rgba(255,255,255,0) 4px 9px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); transition:left .2s ease, width .2s ease}
.eword{font-size:12px; color:var(--ink-faint); min-width:76px; text-align:right}

.safe{font-size:13.5px; padding:8px 12px; border-radius:10px; font-weight:600; margin-bottom:10px}
.safe.ok{background:#e9f7ee; color:#1f7a46; border:1px solid #bfe6cd}
.safe.no{background:#fdecec; color:#b2332f; border:1px solid #f5c6c4}
.safe.idle{background:var(--card-2); color:var(--ink-faint); border:1px solid var(--line)}

.commitrow{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.commitrow .cword{font-size:12px; color:var(--ink-faint); min-width:110px; text-align:right}
#commit{flex:1; -webkit-appearance:none; appearance:none; height:22px; background:transparent; cursor:pointer}
#commit:disabled{opacity:.4; cursor:not-allowed}
#commit::-webkit-slider-runnable-track{height:8px; border-radius:99px; background:#e9e1d5; border:1px solid #d7ccbd}
#commit::-moz-range-track{height:8px; border-radius:99px; background:#e9e1d5; border:1px solid #d7ccbd}
#commit::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px;
  margin-top:-7px; border-radius:50%; background:linear-gradient(180deg,#f79a46,#ef7c22);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(120,70,20,.4)}
#commit::-moz-range-thumb{width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,#f79a46,#ef7c22); border:2px solid #fff}

.acts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.act{background:#fff; border:1.5px solid var(--line-2); border-radius:12px;
  padding:11px 8px 9px; text-align:center; transition:.13s; color:var(--ink)}
.act:hover:not(:disabled){border-color:var(--ink-faint); transform:translateY(-1px); box-shadow:var(--shadow)}
.act:disabled{opacity:.4; cursor:not-allowed}
.act .big{display:block; font-size:19px; line-height:1.1; margin-bottom:3px}
.act .t{display:block; font-size:12.5px; font-weight:650}
.act.go{border-color:#9fd3a6; background:#f2fbf4}
.act.stop{border-color:#f0c9a0; background:#fff7ef}
.kitrow{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}
.kit-btn{background:var(--card-2); border:1.5px solid var(--line); border-radius:11px;
  padding:8px 6px; text-align:center; font-size:12.5px; color:var(--ink-dim)}
.kit-btn:hover:not(:disabled){border-color:var(--ink-faint); color:var(--ink)}
.kit-btn:disabled{opacity:.38; cursor:not-allowed}
.kit-btn b{display:block; color:var(--ink); font-size:13px}
.kit-btn.armed{background:#fff4e0; border-color:#eecb92; color:#8a6516}
.kit-btn.armed:disabled{opacity:1; cursor:default; background:#fff4e0; border-color:#e8b75f; color:#8a6516;
  box-shadow:0 0 0 3px rgba(240,180,90,.18)}
.kit-btn.armed:disabled b{color:#7a5510}

.log{max-height:250px; overflow-y:auto; display:flex; flex-direction:column; gap:8px}
.ev{font-size:13.8px; padding:8px 11px; border-radius:10px; background:var(--card-2);
  border-left:3px solid var(--line-2); color:var(--ink-dim); animation:slide .3s ease}
@keyframes slide{from{opacity:0; transform:translateY(6px)}to{opacity:1;transform:none}}
.ev .who{font-weight:750; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase}
.ev .hd2{font-weight:700; color:var(--ink)}
.ev.good{border-left-color:var(--good)} .ev.good .hd2{color:var(--good)}
.ev.big{border-left-color:var(--big); background:#eef5fd} .ev.big .hd2{color:var(--big)}
.ev.warn{border-left-color:var(--warn)} .ev.warn .hd2{color:var(--warn)}
.ev.bad{border-left-color:var(--bad); background:#fdf0ef} .ev.bad .hd2{color:var(--bad)}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:#2b3138; color:#fff; padding:11px 18px; border-radius:11px; font-size:14px;
  box-shadow:0 10px 30px rgba(30,20,10,.3); z-index:50}

dialog{border:0; border-radius:18px; padding:0; max-width:540px; width:calc(100% - 34px);
  box-shadow:0 24px 70px rgba(30,20,10,.3)}
dialog::backdrop{background:rgba(40,32,24,.45)}
.dlg{padding:24px 26px 22px; background:var(--card)}
.dlg h3{margin:0 0 6px; font-size:22px}
.dlg p, .dlg li{color:var(--ink-dim); font-size:14px}
.dlg ul{padding-left:19px}
.dlg .row{display:flex; gap:9px; margin-top:16px; flex-wrap:wrap}

.seat.empty{opacity:.55}
.seat.empty .av{background:var(--line-2); color:var(--ink-faint); box-shadow:none}
.hint{margin:10px 0 0; color:var(--ink-faint); font-size:14px}