:root {
  --lacquer:   #161310;
  --lacquer-2: #1f1a15;
  --wood-hi:   #e7b765;
  --wood:      #d49b4a;
  --wood-lo:   #b97f33;
  --ink:       #5a3d1f;
  --ink-soft:  #7a5631;
  --cinnabar:  #c24a30;
  --cinnabar-hi:#df6347;
  --clam:      #f4efe4;
  --slate-hi:  #34302a;
  --slate:     #1a1714;
  --paper:     #efe7d6;
  --paper-dim: #b9ac96;
  --line:      rgba(239,231,214,.10);
  /* The button's decorative "ticket bracket" is just a flat middle with an
     ornate cap on each end. Rather than one percentage clip-path (whose caps
     would scale with button width), each cap is a fixed-width mask piece - see
     .btn-clip - so every button gets identically sized end-caps. These two
     vars hold the left/right cap silhouettes, sampled from the original shape. */
  --cap-l: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207.775%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M7.775%200L7.294%209.3L5.85%2016.1L4.766%2019L3.337%2022.4L2.025%2026.5L1.107%2031L0.511%2036.3L0.143%2042L0.001%2050.9L0.275%2060.6L0.642%2065.2L1.2%2069.5L1.979%2073.3L3.305%2077.5L4.697%2080.9L5.427%2082.7L6.466%2086L7.16%2089.6L7.464%2092.4L7.656%2095.4L7.748%2098.4L7.761%20100L7.775%20100Z'/%3E%3C/svg%3E");
  --cap-r: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207.775%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200L0.481%209.3L1.925%2016.1L3.009%2019L4.438%2022.4L5.75%2026.5L6.668%2031L7.264%2036.3L7.632%2042L7.774%2050.9L7.5%2060.6L7.133%2065.2L6.575%2069.5L5.796%2073.3L4.47%2077.5L3.078%2080.9L2.348%2082.7L1.309%2086L0.615%2089.6L0.311%2092.4L0.119%2095.4L0.027%2098.4L0.014%20100L0%20100Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
::selection { background: rgba(223, 99, 71, .28); color: var(--paper); }
::-moz-selection { background: rgba(223, 99, 71, .28); color: var(--paper); }
/* Most of the UI behaves like an app (no selecting), but the bits worth
   copying - the room code and the code input - stay selectable. */
.selectable, .room-code, .join-row input { user-select: text; -webkit-user-select: text; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% -10%, #211b15 0%, var(--lacquer) 55%, #100d0a 100%);
  background-attachment: fixed;
  color: var(--paper);
  user-select: none; -webkit-user-select: none;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(14px, 3vw, 34px);
}

.wrap { width: 100%; max-width: 980px; display: flex; flex-direction: column; align-items: center; }

.topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(14px, 2.6vw, 26px); }
.brand { display: flex; align-items: baseline; gap: 12px; cursor: pointer; user-select: none; }
.brand h1 { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(26px, 4.4vw, 40px); letter-spacing: .06em; margin: 0; color: var(--paper); }
.brand .sub { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--cinnabar-hi); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.stat-chip { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--paper-dim); background: rgba(0,0,0,.22); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; }
.stat-chip b { color: var(--paper); font-weight: 600; }
.stat-chip .w { color: var(--clam); }
.stat-chip .l { color: var(--cinnabar-hi); }

.icon-btn { appearance: none; border: 1px solid var(--line); background: rgba(0,0,0,.22); color: var(--paper); width: 40px; height: 40px; border-radius: 12px; font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: border-color .15s, background .15s, transform .08s; }
.icon-btn:hover { border-color: rgba(239,231,214,.3); }
.icon-btn:active { transform: scale(.94); }

.lobby { width: 100%; max-width: 520px; text-align: center; }
.lobby .hero { font-family: "Marcellus", serif; font-size: clamp(34px, 7vw, 58px); line-height: 1.05; margin: clamp(10px,3vw,28px) 0 6px; letter-spacing: .02em; }
.lobby .hero em { color: var(--cinnabar-hi); font-style: normal; }
.lobby .lede { color: var(--paper-dim); font-size: 15px; margin: 0 auto 30px; max-width: 30ch; }

.card { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)); border: 1px solid var(--line); border-radius: 18px; padding: 20px; text-align: left; }
.card + .card { margin-top: 14px; }
.card h3 { font-family: "Marcellus", serif; font-weight: 400; font-size: 19px; margin: 0 0 4px; letter-spacing: .03em; }
.card p { margin: 0 0 16px; color: var(--paper-dim); font-size: 13.5px; line-height: 1.5; }

.btn { appearance: none; border: none; cursor: pointer; font-family: "Marcellus", serif; font-weight: 400; letter-spacing: .04em; font-size: 16px; border-radius: 12px; padding: 13px 20px; transition: transform .08s, filter .15s, background .15s; width: 100%; user-select: none; -webkit-user-select: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn-primary { background: var(--cinnabar); color: #fff; box-shadow: 0 6px 18px rgba(194,74,48,.35); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(239,231,214,.07); color: var(--paper); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(239,231,214,.12); }

/* Bracket variant - fixed-width cap on each end, flat stretchy middle between.
   Because the caps are sized in px (--cap), every button gets the same end-caps
   regardless of width. Built with mask layers (left cap + right cap + a middle
   rectangle, unioned), which also swallows borders/box-shadows - so we drop the
   border and cast the primary shadow with a filter that follows the mask. */
.btn-clip {
  --cap: 12px;
  border-radius: 0; border: none; padding: 14px calc(var(--cap) + 10px);
  -webkit-mask: var(--cap-l) left center / var(--cap) 100% no-repeat, var(--cap-r) right center / var(--cap) 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 2 * var(--cap) + 2px) 100% no-repeat;
  mask: var(--cap-l) left center / var(--cap) 100% no-repeat, var(--cap-r) right center / var(--cap) 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 2 * var(--cap) + 2px) 100% no-repeat;
}
.btn-clip.btn-primary { box-shadow: none; filter: drop-shadow(0 6px 14px rgba(194,74,48,.35)); }
.btn-clip.btn-primary:hover { filter: drop-shadow(0 6px 14px rgba(194,74,48,.45)) brightness(1.08); }
.btn-clip.btn-ghost { background: rgba(239,231,214,.09); }
.btn-clip.btn-ghost:hover { background: rgba(239,231,214,.15); }

.level-row { display: flex; flex-direction: column; }
.level-row .btn { padding: 12px 0; }
.level-row .btn + .btn { margin-top: 12px; }

.join-row { display: flex; gap: 10px; }
.join-row input { flex: 1; min-width: 0; font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: 17px; background: rgba(0,0,0,.28); border: 1px solid var(--line); color: var(--paper); border-radius: 12px; padding: 0 14px; text-align: center; }
.join-row input:focus { outline: none; border-color: var(--cinnabar); }
.join-row .btn { width: auto; white-space: nowrap; }

.err { color: var(--cinnabar-hi); font-size: 13px; margin-top: 12px; min-height: 18px; }

.game { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: clamp(16px,2.5vw,28px); align-items: start; }
@media (max-width: 760px) { .game { grid-template-columns: 1fr; } .side { order: -1; } }

.boardbox { background: radial-gradient(130% 130% at 30% 20%, var(--wood-hi) 0%, var(--wood) 46%, var(--wood-lo) 100%); border-radius: 14px; padding: clamp(10px, 2.4vw, 22px); box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); width: 100%; max-width: 600px; margin: 0 auto; position: relative; }
.board { width: 100%; display: block; touch-action: manipulation; }
.hit { fill: transparent; cursor: pointer; }
.boardbox.locked .hit { cursor: default; }

.side { display: flex; flex-direction: column; gap: 14px; }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.2)); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.turn-card { display: flex; align-items: center; gap: 14px; }
.turn-stone { width: 38px; height: 38px; border-radius: 50%; flex: none; box-shadow: 0 3px 7px rgba(0,0,0,.45); }
.turn-stone.black { background: radial-gradient(circle at 34% 30%, #4a4540, #100e0c 72%); }
.turn-stone.white { background: radial-gradient(circle at 34% 30%, #ffffff, #cdc6b6 78%); }
.turn-text { line-height: 1.25; }
.turn-text .label { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); }
.turn-text .who { font-family: "Marcellus", serif; font-size: 20px; }
.turn-card.active .turn-stone { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(194,74,48,0); } 50% { box-shadow: 0 0 0 7px rgba(194,74,48,.22); } }

.score-row { display: flex; gap: 10px; }
.score-cell { flex: 1; text-align: center; padding: 12px 6px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.score-cell .nm { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); display: flex; align-items: center; justify-content: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.black { background: radial-gradient(circle at 34% 30%, #4a4540, #100e0c 72%); }
.dot.white { background: radial-gradient(circle at 34% 30%, #fff, #cdc6b6 78%); }
.score-cell .vl { font-family: "Marcellus", serif; font-size: 28px; margin-top: 2px; }

.room-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-line + .room-line { margin-top: 10px; }
.room-code { font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: .2em; font-size: 22px; color: var(--paper); }
.role-badge { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--paper-dim); }
.role-badge.you { color: var(--cinnabar-hi); border-color: rgba(194,74,48,.4); }

.hint { font-size: 12.5px; color: var(--paper-dim); line-height: 1.5; }
.copy-btn { font-size: 12px; padding: 7px 12px; border-radius: 9px; width: auto; white-space: nowrap; }

.status-msg { text-align: center; font-family: "Marcellus", serif; font-size: 17px; color: var(--cinnabar-hi); min-height: 22px; margin-top: 2px; }
.waiting-dots::after { content: ""; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:"";} 25%{content:"·";} 50%{content:"··";} 75%{content:"···";} }

.actions { display: flex; gap: 10px; }
.actions .btn { font-size: 13.5px; padding: 11px 14px; }
.btn.nudge { animation: nudge 1.3s ease-in-out infinite; }
@keyframes nudge { 0%,100% { box-shadow: 0 6px 18px rgba(194,74,48,.35); } 50% { box-shadow: 0 0 0 6px rgba(194,74,48,.25); } }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--lacquer-2); border: 1px solid var(--line); color: var(--paper); padding: 11px 18px; border-radius: 12px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hidden { display: none !important; }