:root {
  --night: #241030;
  --night-2: #331842;
  --night-3: #46245a;
  --line: rgba(251, 245, 232, 0.14);
  --wood: #9A6634;
  --wood-dark: #5E3A1B;
  --ivory: #FBF5E8;
  --ivory-dim: rgba(251, 245, 232, 0.72);
  --ink: #2B1B2F;
  --gold: #F3BE43;
  --red: #D63B30;
  --green: #2C9A4E;
  --yellow: #F1B50A;
  --blue: #2C6FD4;
  --danger: #FF6B5E;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --font: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ivory);
  background: var(--night);
  background-image:
    radial-gradient(120% 70% at 50% 0%, #3d1c4f 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #2e1440 0%, transparent 70%);
  background-attachment: fixed;
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
img { display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 22px;
  font-weight: 700; font-size: 17px; line-height: 1;
  background: var(--gold); color: var(--ink);
  box-shadow: 0 4px 0 #b4851c;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b4851c; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.ghost { background: transparent; color: var(--ivory); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { transform: none; background: var(--night-3); }
.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 4px 0 #b13d33; }
.btn.small { padding: 8px 14px; font-size: 15px; }
.btn.block { width: 100%; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 14px; border: 0;
  background: var(--night-2); color: var(--ivory);
  display: inline-grid; place-items: center; position: relative;
  box-shadow: inset 0 0 0 1px var(--line);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.on { background: var(--green); }
.icon-btn.muted { background: var(--danger); }
.icon-btn .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 12px; line-height: 18px; font-weight: 700;
}

/* ---------- login ---------- */
.login {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 20px; text-align: center; gap: 18px;
}
.login .mark { width: 132px; height: 132px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); animation: spin-in .9s cubic-bezier(.2,.9,.2,1.2); }
@keyframes spin-in { from { transform: rotate(-200deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.wordmark { font-size: 46px; font-weight: 800; line-height: .95; letter-spacing: -.5px; margin: 0; }
.wordmark span { display: block; font-size: 22px; font-weight: 600; letter-spacing: 6px; color: var(--gold); margin-top: 6px; }
.login p { color: var(--ivory-dim); margin: 0; max-width: 300px; }
.login .gbtn { min-height: 44px; }
.dev-login { display: flex; gap: 8px; width: 100%; max-width: 320px; }
.dev-note { font-size: 13px; color: var(--ivory-dim); max-width: 320px; }

.field {
  width: 100%; padding: 12px 16px; border-radius: 14px; border: 0;
  background: var(--ivory); color: var(--ink); font-weight: 600;
}
.field::placeholder { color: #9b8c94; }

/* ---------- home ---------- */
.home { max-width: 560px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 40px; }
.home-top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.home-top .mark { width: 40px; height: 40px; }
.home-top h1 { font-size: 24px; margin: 0; flex: 1; font-weight: 800; }
.me-chip { display: flex; align-items: center; gap: 8px; background: var(--night-2); border: 0; border-radius: 999px; padding: 4px 12px 4px 4px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.me-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 12px; }
.code-field { letter-spacing: 6px; font-size: 22px; text-align: center; font-weight: 800; }
.section-title { font-size: 20px; font-weight: 700; margin: 28px 0 10px; }
.room-list { display: grid; gap: 10px; }
.room-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border: 0; border-radius: var(--r-md); background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.room-item:active { background: var(--night-3); }
.room-dot { width: 42px; height: 42px; border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; flex: none; }
.room-dot i:nth-child(1) { background: var(--green); } .room-dot i:nth-child(2) { background: var(--yellow); }
.room-dot i:nth-child(3) { background: var(--red); } .room-dot i:nth-child(4) { background: var(--blue); }
.room-item b { display: block; font-size: 18px; }
.room-item small { color: var(--ivory-dim); font-size: 14px; }
.room-item .live { margin-left: auto; font-size: 13px; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 2px 10px; font-weight: 700; white-space: nowrap; }
.empty { color: var(--ivory-dim); padding: 18px; border-radius: var(--r-md); border: 2px dashed var(--line); text-align: center; }

/* ---------- room ---------- */
.room { height: 100%; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 6px; }
.topbar .title { flex: 1; min-width: 0; }
.topbar .title b { display: block; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.code-btn { border: 0; background: none; padding: 0; color: var(--gold); font-weight: 700; letter-spacing: 2px; font-size: 14px; }
.conn { font-size: 12px; color: var(--danger); }

.stage { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 8px; min-height: 0; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; min-height: 64px; }
.dock { display: flex; justify-content: center; }
.dock .dicebox { padding: 5px; border-radius: 16px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 2px var(--c); }
.dock.from-left { justify-content: flex-start; }
.dock.from-right { justify-content: flex-end; }
.board-wrap {
  position: relative; width: min(100%, calc(100dvh - 330px)); min-width: 280px; aspect-ratio: 1; margin: 8px auto;
  padding: 10px; border-radius: 18px;
  background: linear-gradient(145deg, #b47a43, var(--wood) 40%, var(--wood-dark));
  box-shadow: 0 14px 30px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.25);
}
.board-wrap svg { width: 100%; height: 100%; display: block; border-radius: 6px; }

.tok { transition: transform .11s linear; }
.tok.slow { transition: transform .38s cubic-bezier(.5,-0.4,.5,1.4); }
.tok .hit { cursor: default; }
.tok.mine .hit { cursor: pointer; }
.tok.hop .tok-in { animation: hop .11s ease-out; }
@keyframes hop { 50% { transform: translateY(-6px); } }
.marks .missed { fill: none; stroke: #FF3B30; stroke-width: 4; animation: pulse .5s ease-in-out infinite alternate; }
.marks .kill { fill: rgba(255,255,255,.6); animation: burst .5s ease-out forwards; }
@keyframes pulse { from { stroke-opacity: 1; r: 18; } to { stroke-opacity: .3; r: 23; } }
@keyframes burst { from { r: 8; opacity: 1; } to { r: 40; opacity: 0; } }

/* player panels */
.panel {
  min-width: 0; max-width: 100%; overflow: hidden; display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 18px; border: 0; background: transparent; text-align: left;
}
.panel.right { flex-direction: row-reverse; text-align: right; justify-self: end; }
.panel .avatar { position: relative; width: 52px; height: 52px; flex: none; }
.panel .avatar img, .panel .avatar .ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: var(--night-3); }
.panel .avatar .ph { display: grid; place-items: center; font-size: 26px; color: var(--ivory-dim); border-style: dashed; }
.panel .ring { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; }
.panel .meta { min-width: 0; flex: 1; }
.panel .meta b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.panel .meta small { display: block; font-size: 12px; color: var(--ivory-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .tags { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.panel.right .tags { justify-content: flex-end; }
.panel .tag { white-space: nowrap; display: inline-block; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--c); color: #fff; margin-top: 2px; }
.panel .tag.afk { background: var(--danger); }
.panel.active .avatar img { box-shadow: 0 0 0 3px var(--night), 0 0 18px var(--c); }
.panel.empty-seat { opacity: .85; }
.panel.dim { opacity: .45; }
.panel.click { cursor: pointer; }

.dicebox { display: flex; gap: 6px; align-items: center; flex: none; }
.die {
  --s: 42px;
  width: var(--s); height: var(--s); border-radius: 12px; border: 0; padding: 7px;
  background: linear-gradient(160deg, #fff, #e9e1d4); box-shadow: 0 4px 0 #b9ab97, 0 6px 12px rgba(0,0,0,.35);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); flex: none;
}
.die i { width: 72%; height: 72%; margin: auto; border-radius: 50%; background: transparent; }
.die i.on { background: var(--ink); }
.die.small { --s: 34px; border-radius: 9px; padding: 5px; box-shadow: 0 3px 0 #b9ab97; }
.die.tiny { --s: 22px; border-radius: 6px; padding: 3px; box-shadow: 0 2px 0 #b9ab97; opacity: .8; }
.dock .dicebox { flex-direction: column; gap: 4px; }
.dice-row { display: flex; gap: 6px; }
.pool.mini { gap: 3px; max-width: 110px; justify-content: center; }
.die.sel { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-3px); }
.die.used { opacity: .35; }
.die.ready { animation: nudge 1s ease-in-out infinite; }
.die.rolling { animation: tumble .12s linear infinite; }
.die.q { place-items: center; display: grid; grid-template: 1fr / 1fr; color: var(--ink); font-size: 24px; font-weight: 800; }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg) scale(1.06); } 20% { transform: rotate(10deg) scale(1.06); } 30% { transform: rotate(0); } }
@keyframes tumble { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-6px); } 100% { transform: rotate(360deg) translateY(0); } }
.pool { display: flex; gap: 5px; flex-wrap: wrap; max-width: 120px; }
.panel.right .pool { justify-content: flex-end; }

/* log strip */
.logstrip {
  margin: 4px 8px 0; padding: 8px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25);
  font-size: 14px; color: var(--ivory-dim); text-align: left; min-height: 40px; width: calc(100% - 16px);
}
.logstrip b { color: var(--ivory); font-weight: 600; }

.lobby-card { margin: 6px 8px 0; padding: 14px; border-radius: var(--r-md); background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 12px; }
.lobby-card p { margin: 0; color: var(--ivory-dim); font-size: 15px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--night); border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: none; padding: 9px; border-radius: 999px; font-weight: 700; color: var(--ivory-dim); }
.seg button.on { background: var(--ivory); color: var(--ink); }
.seg button[disabled] { cursor: default; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.footbar { display: flex; justify-content: center; gap: 10px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }

/* emoji float */
.float-emoji { position: fixed; font-size: 44px; pointer-events: none; z-index: 50; animation: floatup 2.2s ease-out forwards; text-align: center; }
.float-emoji small { display: block; font-size: 12px; color: var(--ivory); background: rgba(0,0,0,.5); border-radius: 8px; padding: 0 6px; }
@keyframes floatup { 0% { transform: translateY(20px) scale(.5); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 100% { transform: translateY(-140px) scale(1); opacity: 0; } }

/* sheets */
.sheet-back { position: fixed; inset: 0; background: rgba(10, 3, 14, .6); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 560px; max-height: 86dvh; overflow: auto; background: var(--night-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px 18px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0,0,0,.5); animation: rise .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise { from { transform: translateY(40px); opacity: .5; } }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 10px; }
.sheet h2 { margin: 0 0 12px; font-size: 22px; }
.sheet h3 { margin: 18px 0 8px; font-size: 16px; color: var(--ivory-dim); font-weight: 600; }
.list { display: grid; gap: 8px; }
.li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--night); width: 100%; border: 0; text-align: left; }
.li img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.li .grow { flex: 1; min-width: 0; }
.li .grow small { display: block; color: var(--ivory-dim); font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #6d5a74; display: inline-block; margin-right: 6px; }
.dot.on { background: #4cd964; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.toggle span { flex: 1; }
.toggle small { display: block; color: var(--ivory-dim); font-size: 13px; }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; border-radius: 15px; background: #5d4a66; transition: .15s; }
.switch i::after { content: ''; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .15s; }
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--gold); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--night); font-size: 20px; font-weight: 700; }
.stepper b { min-width: 42px; text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.chatlog { display: flex; flex-direction: column; gap: 6px; max-height: 46dvh; overflow: auto; padding: 4px 0 10px; }
.msg { max-width: 82%; padding: 6px 12px; border-radius: 14px; background: var(--night); align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--night-3); }
.msg small { display: block; color: var(--gold); font-size: 12px; font-weight: 700; }
.chatform { display: flex; gap: 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emoji-grid button { font-size: 30px; border: 0; background: var(--night); border-radius: 14px; padding: 8px 0; }
.loglist { display: grid; gap: 4px; font-size: 14px; color: var(--ivory-dim); }
.score-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.score-table th, .score-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table th { color: var(--ivory-dim); font-weight: 600; font-size: 13px; }

.profile-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.profile-photo img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }

/* result */
.result { text-align: center; padding: 10px 0 4px; }
.result .trophy { font-size: 60px; line-height: 1; }
.result h2 { font-size: 28px; margin: 6px 0; }
.ranks { display: grid; gap: 6px; margin: 14px 0; text-align: left; }
.ranks .li b { width: 26px; text-align: center; color: var(--gold); }

#toast {
  position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translate(-50%, -150%);
  background: var(--ivory); color: var(--ink); padding: 10px 18px; border-radius: 999px; font-weight: 600;
  z-index: 60; transition: transform .25s; max-width: 92vw; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#toast.show { transform: translate(-50%, 0); }
#toast.err { background: var(--danger); color: #fff; }

.loading { min-height: 100%; display: grid; place-items: center; }
.loading img { width: 72px; animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 760px) {
  .board-wrap { width: min(100%, calc(100dvh - 300px)); }
  .panel .avatar, .panel .avatar img, .panel .avatar .ph { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}