:root{font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif;color:#f6ecd4;background:#14271f;line-height:1.5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#344b34,#14271f 65%);min-height:100vh}main{max-width:1440px;margin:auto;padding:22px;display:flex;flex-direction:column}button,input,select{font:inherit}button{min-height:44px;padding:9px 15px;border-radius:8px;border:1px solid #b8a57f;background:#f6ecd5;color:#392a1c;cursor:pointer;font-weight:700;box-shadow:0 2px 0 #8e7655}button:disabled{opacity:.48;cursor:default;box-shadow:none}button:hover:not(:disabled){background:#fff8e9}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #f4c767;outline-offset:3px}.primary{background:#c9943f;color:#20190d;border-color:#e7bf70}.primary:hover:not(:disabled){background:#e4b559}.brand{color:#f8e8bc;text-decoration:none;display:flex;align-items:center;gap:10px;font-size:32px;font-weight:900}.brand span{font-size:18px;letter-spacing:-.5px}header,.section-head,.game-bar,.table-heading,.rack-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.badge{border:1px solid #b69a65;border-radius:20px;padding:4px 10px;font-size:12px;color:#e8d3a7;white-space:nowrap}.intro{padding:36px 0 10px}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#dfbf7c;margin:0 0 5px}h1{font-size:clamp(30px,5vw,50px);line-height:1.2;letter-spacing:-1px;margin:0 0 16px}h2{font-size:21px;margin:0 0 12px}p{margin:0 0 14px}#notice,.warning{padding:10px 14px;background:#f4dfaf;color:#553714;border-left:4px solid #bd8130;border-radius:5px;overflow-wrap:anywhere}#notice{margin:12px 0;min-height:44px}.warning:empty{display:none}.panel{background:#263d30;border:1px solid #526953;border-radius:14px;padding:22px;margin:12px 0;box-shadow:0 8px 28px #08140e55}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:grid;gap:5px;margin:0 0 14px;font-size:14px;font-weight:700}input,select{width:100%;min-height:46px;padding:9px 11px;border:1px solid #9eac93;border-radius:7px;color:#233729;background:#fffdf5}.check{display:flex;align-items:center;font-weight:500;margin-top:16px;gap:10px}.check input{width:20px;min-height:20px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;list-style:none}.players li{border:1px solid #65785b;padding:10px;border-radius:8px;overflow-wrap:anywhere}.players strong,.players small{display:block}.players small,.muted,footer{color:#c3d1b8;font-size:13px}.players .current{border:2px solid #e4bf72;background:#3a5137}.players button{font-size:12px;min-height:40px;padding:5px 9px;margin-top:8px}details{background:#1d3227;border:1px solid #526953;border-radius:9px;padding:12px}details p{font-size:13px;margin-top:12px}summary{cursor:pointer;font-weight:700}.game-bar{background:#1a3024;border:1px solid #617153;border-radius:10px;padding:10px 16px;margin:5px 0 12px}.game-bar strong{font-size:17px}#clock{font-size:24px;white-space:nowrap;color:#f3cc80}.table-frame{padding:clamp(10px,2vw,24px);border:2px solid #a37445;border-radius:30px;background:repeating-linear-gradient(105deg,#5d361e 0,#764824 8px,#68401f 20px,#81502a 30px);box-shadow:inset 0 3px 5px #d7a26a88,inset 0 -5px 7px #241306aa,0 18px 35px #0008}.table-felt{border:8px solid #3a2416;border-radius:18px;padding:clamp(12px,2vw,24px);background:radial-gradient(ellipse at center,#24734c,#105436 75%);box-shadow:inset 0 5px 18px #062a1a99;color:#f5eedb}.table-heading h2{margin:0}.table-heading{padding:0 0 6px}.table-heading .eyebrow{color:#c7dcbc}.table-help,.gesture-help{font-size:12px;color:#c7dfc4;margin:6px 0 0}.words{margin:10px 0;min-height:35px}#draft-words{position:relative;min-height:clamp(300px,42vw,570px);margin:8px 0;border:1px solid #ffffff25;border-radius:8px;background:radial-gradient(#ffffff09 1px,transparent 1px);background-size:18px 18px;overflow:hidden}.word-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid #ffffff25;background:#173e2dbb;border-radius:8px;padding:9px;margin:6px 0}.word-row strong{min-width:70px;margin-right:7px}.tile{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#fff9e9,#e8d8ae);color:#252019;border:1px solid #b8a579;border-radius:5px;font-size:25px;font-weight:850;width:46px;height:52px;min-height:0;padding:0;box-shadow:0 4px 0 #a58f66,0 6px 7px #0005;line-height:1}.tile.public{background:linear-gradient(145deg,#f0f1dc,#c7d8bb);border-color:#9bad8d}.tile.missing{border:2px solid #cf5044;background:#ffe0db}.tile.board-tile{position:absolute;width:42px;height:48px;transform:translate(-50%,-50%) rotate(var(--rotation,0deg));touch-action:none;user-select:none;cursor:grab}.tile.board-tile:active{cursor:grabbing}.game-controls{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:14px;margin:18px 0}.rack-area,.control-panel{border:1px solid #665439;border-radius:12px;padding:16px;background:#31271b;box-shadow:inset 0 2px 8px #0006}.rack-heading{font-size:17px}.rack-heading span,.selected-heading{font-size:12px;color:#d6c49e}.rack{display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;padding:12px 10px 16px;background:linear-gradient(#241910,#49301c 55%,#714a27 56%,#4b2b17);border-radius:7px;min-height:82px;margin:8px 0 12px;box-shadow:inset 0 3px 7px #0009}.rack:empty::after{content:'타일 없음';color:#d1ba8e;font-size:13px}.selected-heading{font-weight:700}.selected-heading span{font-weight:400}.selected-rack{min-height:76px}.rotation-controls{margin-bottom:4px}.rotation-controls button{font-size:13px}.gesture-help{color:#cbb995}.control-panel{background:#23382a;border-color:#526953}#word-form{display:flex;align-items:end;gap:8px}#word-form label{flex:1;margin:0}#word-form button{flex:none}.control-panel .muted{margin-bottom:0}.judgment{position:relative;z-index:2;border:2px solid #e4b65c;border-radius:12px;padding:18px;margin:12px 0;background:#392818;box-shadow:0 8px 22px #0008}.judgment h2{font-size:26px}.official-panel{margin:12px 0}.score-row{padding:8px;border-bottom:1px solid #ffffff33}footer{padding:18px 0 30px}a{color:#f3d28d}[hidden]{display:none!important}main:has(#game:not([hidden])) .intro{display:none}main:has(#game:not([hidden])) #game{order:3}main:has(#game:not([hidden])) #lobby{order:4}main:has(#game:not([hidden])) footer{order:5}main:has(#game:not([hidden])) #lobby #rules,main:has(#game:not([hidden])) #lobby #rules+p{display:none}@media(max-width:700px){main{padding:10px}header{align-items:center}.brand{font-size:27px}.brand span{font-size:15px}.intro{padding-top:24px}.panel{padding:15px}.two{grid-template-columns:1fr;gap:0}.players{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{flex-wrap:wrap}.game-bar{gap:8px;flex-wrap:wrap}.game-bar strong{font-size:14px}#clock{font-size:18px}.table-frame{border-radius:19px;padding:9px}.table-felt{border-width:5px;border-radius:11px;padding:10px}#draft-words{min-height:340px}.game-controls{grid-template-columns:1fr;gap:8px;margin:10px 0}.rack-area,.control-panel{padding:11px}.rack{gap:6px}.tile{width:42px;height:48px;font-size:23px}.tile.board-tile{width:40px;height:46px}.actions button{flex:1 1 auto}.badge{font-size:10px}.word-row strong{min-width:100%}.official-panel{margin:8px 0}}
.board-legend{display:flex;gap:16px;flex-wrap:wrap;color:#dbecd8;font-size:12px}.board-legend span{display:inline-flex;align-items:center;gap:5px}.legend-tile{display:inline-block;width:13px;height:16px;background:#e5e8d3;border:1px solid #a4b99a;border-radius:2px}.legend-tile.draft{background:#f7eed099;border-color:#eee3c5}.tile.draft-tile{background:rgba(255,247,216,.68);color:#18140e}.bags{display:flex;justify-content:flex-end;gap:12px;margin-top:-76px;position:relative;z-index:1;pointer-events:none}.bag{pointer-events:auto;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:69px;height:75px;min-height:0;padding:13px 5px 7px;border:2px solid #56351d;border-radius:38% 38% 42% 42%;background:radial-gradient(ellipse at 35% 25%,#d6a55b,#96602e 70%);color:#2c1a0f;box-shadow:inset 2px 2px 4px #f1cf8a99,0 5px 8px #0007;touch-action:none}.bag:before{content:'';position:absolute;top:3px;width:38px;height:8px;background:#694125;border:1px solid #e4b76b;border-radius:50%}.bag:hover:not(:disabled){background:radial-gradient(ellipse at 35% 25%,#ebc37d,#aa7038 70%)}.bag span{font-size:15px}.bag small{font-size:12px}.bag:disabled{opacity:.6}.table-help{position:relative;max-width:calc(100% - 165px);min-height:55px}@media(max-width:700px){.bags{margin-top:8px;justify-content:flex-end}.bag{width:60px;height:66px}.table-help{max-width:none;min-height:0}}
.board-scroll{overflow-x:auto;overscroll-behavior-x:contain}#draft-words{min-width:1000px}.tile.board-tile{width:50px;height:54px}@media(max-width:700px){.tile.board-tile{width:50px;height:54px}}
#draft-words:empty:after{content:'☝ 타일 선택  →  판을 눌러 놓기';position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);color:#e2f2d899;border:1px dashed #dcebd655;border-radius:12px;padding:16px 22px;white-space:nowrap;pointer-events:none;font-weight:700}.bag span{font-size:20px;line-height:1;font-weight:900}.bag small{font-size:10px;white-space:nowrap}.rack{border-bottom:5px solid #a9753a}
main:has(#game:not([hidden])) #lobby>p{display:none}
#draft-words{min-height:620px}.board-word-label{position:absolute;transform:translate(-50%,0);pointer-events:none;color:#fff8d9;background:#103c2dcc;border-radius:4px;padding:1px 5px;font-size:12px;font-weight:800;text-shadow:0 1px 2px #000}@media(max-width:700px){#draft-words{min-height:620px}}
.intro-art{float:right;width:min(45%,440px);height:auto}.intro:after{content:"";display:block;clear:both}@media(max-width:600px){.intro-art{float:none;display:block;width:min(100%,325px);margin:0 auto 8px}}
@keyframes rack-arrival{from{opacity:0;transform:translateY(-42px) rotate(-9deg) scale(.78)}65%{transform:translateY(3px) rotate(2deg)}to{opacity:1;transform:none}}#rack .tile-arrived{animation:rack-arrival .48s ease-out}@media(prefers-reduced-motion:reduce){#rack .tile-arrived{animation:none;outline:2px solid #dda641}}
#rack .tile,#selected .tile{touch-action:none;user-select:none}.board-word-label{pointer-events:none}
.tile.selected{outline:3px solid #ffd765;outline-offset:2px}.placed-tile{opacity:.85}.joker-group{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.joker-group strong{flex-basis:100%}.joker-group button{min-width:44px;padding:6px}.joker-group+button{margin-top:6px}#joker-palette{max-width:min(94vw,500px);max-height:85vh;border:2px solid #d6ad68;border-radius:14px;background:#23382a;color:#fff1d2;box-shadow:0 12px 40px #0009}#joker-palette::backdrop{background:#0009}@keyframes tile-arrival{0%{filter:brightness(1.8);transform:translateY(-10px)}100%{filter:none;transform:none}}.tile-arrived{animation:tile-arrival .45s ease-out}@media(prefers-reduced-motion:reduce){.tile-arrived{animation:none}}
.tile.board-tile.origin-mark{background:#8ccdf25c;color:#d2f1ffeb;border:2px dashed #b4e5ffd6;box-shadow:none;pointer-events:none}.rack .tile.recent-tile,.tile.board-tile.recent-tile{background-color:#ffda83;outline:3px solid #cc882e}.tile.recent-tile::after{content:"새";position:absolute;right:1px;top:0;font-size:10px;color:#703e0e}.rack .tile.recent-tile{position:relative}
.board-word-label.word-grip{pointer-events:auto;touch-action:none;cursor:grab;z-index:2}.word-grip::before{content:"⠿ ";color:#9cd4e5}.joker-reading{font-size:14px;position:absolute;bottom:0;right:2px;color:#614313}
.tile.board-tile.draft-tile.recent-tile{background-color:rgba(255,218,131,.68)}
.control-panel details{margin:14px 0;padding:10px 0;border-top:1px solid #678169}.control-panel summary{cursor:pointer;font-weight:700}.control-panel fieldset{border:0;padding:0;margin:8px 0}.control-panel #source-words{display:flex;flex-wrap:wrap;gap:8px}.control-panel #source-words label{display:flex;align-items:center;gap:5px;padding:6px;background:#334b3a;border-radius:6px}.control-panel #source-words input{width:1.1em;height:1.1em;min-height:0;margin:0}.word-chip{display:inline-block;margin:3px;padding:2px 8px;background:#e6e1c8;color:#213e2b;border-radius:6px}#submission-status{margin:8px 0}#submission-preview strong{margin-right:6px}#rearrange-error{color:#ffd99c}

/* Pending submissions are a public overlay; only their controls intercept input. */
.tile.board-tile.pending-tile{pointer-events:none;z-index:4;opacity:.9;background:linear-gradient(145deg,#fff9e9,#e8d8ae);box-shadow:0 2px 2px #0005}
.tile.board-tile.pending-changed{opacity:1;background:linear-gradient(145deg,#ffe595,#e5a548);outline:3px solid #ffd36e;animation:pending-glow 1.7s ease-in-out infinite alternate}
@keyframes pending-glow{from{outline-color:#ffd36e;filter:brightness(1)}to{outline-color:#fff5bd;filter:brightness(1.22)}}
.pending-label,.pending-controls{position:absolute;z-index:5;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:4px;max-width:220px;text-align:center;color:#fff9df;background:#3b2615eF;border:1px solid #f5cb79;border-radius:8px;padding:4px 6px;font-size:12px;font-weight:700}
.pending-label{pointer-events:none;width:220px;overflow-wrap:anywhere;line-height:15px}
.pending-controls{max-width:none;white-space:nowrap;pointer-events:auto}
.pending-controls button{min-height:44px;min-width:44px;padding:5px 9px;font-size:13px}
@media(prefers-reduced-motion:reduce){.tile.board-tile.pending-changed{animation:none;outline-color:#ffd36e}}

.pending-target{position:absolute;pointer-events:none}

/* Game controls stay close to the table while the room controls remain available. */
#notice{position:fixed;z-index:10000;top:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(90vw,560px);margin:0;box-shadow:0 8px 30px #0008}
#room-options{background:transparent;border:0;padding:0}
#room-options>summary{margin-bottom:12px}
.table-heading{align-items:center;flex-wrap:wrap;gap:6px 12px}
.table-heading h2{font-size:clamp(16px,2vw,21px)}
.turn-info{display:flex;align-items:center;gap:10px;font-size:14px}
#clock{font-size:18px}
.table-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.table-actions #submission-status{flex:1;min-width:120px;margin:0;color:#e3efd8}
.table-players{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:3px;margin-top:12px;align-items:end}
.table-seat{grid-row:1;min-width:0;min-height:52px;padding:5px;border:1px solid #9aa986;border-radius:7px;background:#173d2e;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.table-seat strong,.table-seat small{display:block;overflow:hidden;text-overflow:ellipsis}
.table-seat strong{font-size:12px;white-space:nowrap}
.table-seat small{font-size:10px;color:#d4e2ca;white-space:nowrap}
.table-seat.self{border-color:#f1c76d;background:#3e512e}
.table-seat.current{box-shadow:0 0 0 2px #f4ce7e}
.table-seat.draw-arrived{background:#a47733}
.draw-flight{position:fixed;z-index:9999;display:grid;place-items:center;width:40px;height:46px;border:1px solid #a48e66;border-radius:5px;background:#f9edc9;color:#362414;font-weight:800;box-shadow:0 3px 8px #0008;pointer-events:none}
.extra-controls{margin:0 0 12px}
.extra-controls details{margin:10px 0}
.extra-controls fieldset{border:0;padding:0}
.extra-controls #source-words{display:flex;flex-wrap:wrap;gap:8px}
.extra-controls #source-words label{display:flex;align-items:center;gap:5px}
.extra-controls #source-words input{width:1.1em;height:1.1em;min-height:0}
#rack .tile,#selected .tile{touch-action:pinch-zoom}
.pending-controls:has(progress){flex-direction:column;gap:2px}
.pending-controls progress{display:block;width:100%;height:8px}
@media(max-width:700px){
  main:has(#game:not([hidden])){padding:5px}
  main:has(#game:not([hidden])) header,main:has(#game:not([hidden])) footer{display:none}
  .table-frame{padding:5px;border-radius:13px}
  .table-felt{padding:7px;border-width:4px}
  .board-legend,.table-help,.gesture-help,.selected-heading span{display:none}
  .table-heading{gap:3px 6px}
  .turn-info{gap:6px;font-size:12px}
  #clock{font-size:14px}
  .table-players{gap:2px}
  .table-seat{padding:4px 1px;min-height:42px}
  .table-seat strong{font-size:10px}
  .table-seat small{font-size:9px}
  .game-controls{margin:7px 0;gap:6px}
  .rack-area,.control-panel{padding:8px}
  .rack{margin:5px 0;padding:8px 5px 12px;min-height:65px}
  .rotation-controls button{font-size:12px;padding:7px}
  .bags{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){.draw-flight{visibility:hidden}.table-seat.draw-arrived{outline:2px solid #f4ce7e}}
.seat-side{display:flex;min-width:0;gap:3px}
.seat-side.right{flex-direction:row-reverse;justify-content:flex-start}
.seat-side .table-seat{flex:0 1 86px}
.seat-center .table-seat{width:86px}
@media(max-width:700px){.seat-center .table-seat{width:62px}}
@media(max-width:700px){
  .board-scroll{height:clamp(220px,38vh,350px);overflow:auto;overscroll-behavior:contain}
}
.review-actions{display:flex;gap:4px;align-items:center}
.review-actions button[aria-pressed="true"]{background:#e4b559;box-shadow:inset 0 0 0 2px #fff0b8}
.review-feedback{font-size:11px}
@media(max-width:700px){.rack-heading strong{white-space:nowrap}.rack-heading #bag{display:none}}
.board-scroll{touch-action:pan-x pan-y}
.tile.board-tile,.board-word-label.word-grip{touch-action:none}

/* Keep the board and the hand available together on desktop. */
.table-players{display:flex;justify-content:space-evenly;align-items:stretch;gap:6px}
.table-seat{flex:0 1 145px;min-width:0;min-height:64px}
.table-seat strong{font-size:18px}
.table-seat small{font-size:15px}
.table-seat.current{background:#a96d24;color:#fff8df;border-color:#ffe2a1;box-shadow:0 0 0 3px #ffdc87,0 0 18px #f8c75b99}
.staged-rack{min-height:65px}
.staged-tiles{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.staged-grip{touch-action:none;cursor:grab}
.word-submit{position:absolute;z-index:3}
.game-sidebar .game-controls{display:block;margin:0 0 10px}
.game-sidebar .control-panel{margin:10px 0}
@media(min-width:901px) and (min-height:601px){
  body:has(#game:not([hidden])){overflow:hidden}
  main:has(#game:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);grid-template-rows:minmax(0,1fr) auto;gap:8px;max-width:none;height:100dvh;padding:8px;overflow:hidden}
  main:has(#game:not([hidden]))>header,main:has(#game:not([hidden]))>footer{display:none}
  main:has(#game:not([hidden])) #game{display:contents}
  main:has(#game:not([hidden])) .table-frame{grid-column:1;grid-row:1 / 3;min-height:0;padding:10px}
  main:has(#game:not([hidden])) .table-felt{height:100%;min-height:0;display:flex;flex-direction:column;padding:12px}
  main:has(#game:not([hidden])) .board-scroll{flex:1 1 auto;min-height:0;width:100%;overflow:auto}
  main:has(#game:not([hidden])) .board-legend,main:has(#game:not([hidden])) .table-help{display:none}
  main:has(#game:not([hidden])) .bags{flex:none}
  main:has(#game:not([hidden])) .game-sidebar{grid-column:2;grid-row:1;min-height:0;overflow:auto}
  main:has(#game:not([hidden])) #lobby{grid-column:2;grid-row:2;min-height:0;max-height:35vh;overflow:auto;margin:0;padding:10px}
  main:has(#game:not([hidden])) #room-options>summary{margin:0}
  main:has(#game:not([hidden])) .table-actions{flex:none}
}
@media(max-width:700px){
  .table-players{gap:3px}
  .table-seat{flex:1 1 0;min-height:50px}
  .table-seat strong{font-size:14px}
  .table-seat small{font-size:12px}
}
.word-submit{transform:translateX(-50%)}
.rack-heading strong{white-space:nowrap}
.is-spectator .game-controls,.is-spectator .game-sidebar>.control-panel,.is-spectator .extra-controls,
.is-spectator #submit,.is-spectator #undo,.is-spectator #reset,.is-spectator #retry,
.is-spectator #submission-status,.is-spectator .board-legend,.is-spectator .table-help{display:none}
.is-spectator .bags{pointer-events:none}
.spectator-banner{padding:10px 12px;border:1px solid #e4bf72;border-radius:8px;background:#3a5137;font-weight:700}
#join-seat-game{width:100%;margin-bottom:10px}
#draft-words{min-width:max(100%,1000px)}
.is-spectator #draft-words:empty:after{content:'아직 확정된 낱말이 없습니다'}
@media(max-width:700px){
  .table-players:has(.table-seat:nth-child(4)){
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .table-players .table-seat{grid-row:auto}
}

.table-frame{position:relative}
.table-frame.my-turn{
  border-color:#ffe29a;
  background:repeating-linear-gradient(105deg,#91601d 0,#ecb84f 7px,#f1ca72 13px,#c28b2d 22px,#e5b152 30px);
  box-shadow:inset 0 2px 5px #fff0b8,0 0 0 2px #bd8b37,0 6px 28px #5b3a1477
}
#match-clock{white-space:nowrap;color:#dcebd6;font-variant-numeric:tabular-nums}
#unlock-popup{position:absolute;z-index:8;top:36%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:88%;padding:20px 30px;background:#183d2df5;color:#ffe398;border:2px solid #dfba66;border-radius:12px;box-shadow:0 8px 26px #13251ad9;text-align:center;word-break:keep-all;font-size:clamp(20px,2.8vw,40px);font-weight:800;pointer-events:none}
#scoreboard{width:min(680px,94vw);max-height:88dvh;padding:clamp(16px,4vw,36px);color:#fff4dc;background:#203b2d;border:2px solid #d7b268;border-radius:16px;box-shadow:0 16px 55px #07130bcc}
#scoreboard::backdrop{background:#07160fc4}
#score-title{font-size:clamp(24px,4vw,42px);line-height:1.2;margin:8px 0;overflow-wrap:anywhere;color:#ffe39c}
.score-table-wrap{overflow-x:auto}
#score-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#score-table th,#score-table td{padding:9px 5px;text-align:right;border-bottom:1px solid #6d816f}
#score-table th{font-size:13px;color:#ccdac6}
#score-table :is(th,td):first-child{text-align:left;overflow-wrap:anywhere}
#score-table .winner{background:#405437;color:#fff0bb;font-weight:700}
#scoreboard form{margin-top:20px;text-align:right}
#match-time-label small{font-weight:400}
#notice{top:50%;left:50%;transform:translate(-50%,-50%);max-width:min(88vw,680px);padding:20px 28px;border:1px solid #ead39d;border-radius:14px;background:#f4dfafeb;color:#3f2a12;font-size:clamp(18px,2.4vw,29px);font-weight:750;text-align:center;pointer-events:none}
@media(min-width:901px) and (min-height:601px){main:has(#game:not([hidden])) #notice{left:calc((100vw - 380px) / 2)}}
@media(prefers-reduced-motion:no-preference){
  .table-frame.my-turn.turn-wood{border-color:#a37445;background:repeating-linear-gradient(105deg,#5d361e 0,#764824 8px,#68401f 20px,#81502a 30px);box-shadow:inset 0 3px 5px #d7a26a88,inset 0 -5px 7px #241306aa,0 18px 35px #0008}
}
#unlock-popup{position:fixed;top:50%;left:50%;max-width:min(88vw,680px);background:#183d2de8}
@media(min-width:901px) and (min-height:601px){main:has(#game:not([hidden])) #unlock-popup{left:calc((100vw - 380px) / 2)}}
.table-players{display:grid;grid-template-columns:repeat(var(--seat-columns,1),minmax(0,1fr));gap:6px}
.table-players .table-seat{grid-row:1;grid-column:var(--seat-col);justify-self:center;width:min(100%,145px)}
#turn-popup{position:fixed;z-index:10001;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:min(88vw,680px);padding:20px 30px;border:2px solid #dfba66;border-radius:12px;background:#183d2de8;color:#ffe398;box-shadow:0 8px 26px #13251ad9;text-align:center;word-break:keep-all;pointer-events:none}
#turn-popup strong{display:block;font-size:clamp(24px,3.4vw,42px)}
#turn-popup small{display:block;margin-top:4px;font-size:clamp(15px,1.7vw,21px)}
#turn-popup small[hidden]{display:none}
@media(min-width:901px) and (min-height:601px){main:has(#game:not([hidden])) #turn-popup{left:calc((100vw - 380px) / 2)}}
@media(max-width:700px){
  .table-players:has(.table-seat:nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .table-players:has(.table-seat:nth-child(4)) .table-seat{grid-column:var(--mobile-col);grid-row:var(--mobile-row)}
}
#kick-dialog{width:min(92vw,420px);max-height:85dvh;border:2px solid #d6ad68;border-radius:14px;padding:20px;background:#23382a;color:#fff1d2;box-shadow:0 12px 40px #0009}
#kick-dialog::backdrop{background:#0009}
#kick-dialog h2{margin-bottom:10px}
#kick-dialog p{overflow-wrap:anywhere}
#kick-dialog .actions{justify-content:flex-end}
@media(max-width:700px){#kick-dialog .actions button{flex:1}}
.rule-options{border:1px solid #667c62;border-radius:9px;margin:16px 0;padding:10px 14px}
.rule-options legend{font-weight:700;padding:0 6px}
.rule-option{display:flex;align-items:flex-start;gap:10px;margin:10px 0;font-weight:400}
.rule-option input{width:20px;height:20px;min-height:20px;margin:3px 0 0;flex:none}
.rule-option strong,.rule-option small{display:block}
.rule-option small{font-size:13px;color:#c3d1b8;line-height:1.45;margin-top:2px}
#trial-popup{position:fixed;z-index:10002;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:min(88vw,680px);padding:20px 30px;border:2px solid #dfba66;border-radius:12px;background:#183d2df2;color:#ffe398;box-shadow:0 8px 26px #13251ad9;text-align:center;word-break:keep-all;pointer-events:none}
#trial-popup strong{display:block;font-size:clamp(24px,3.4vw,42px)}
#trial-popup small{display:block;margin-top:7px;font-size:clamp(15px,1.7vw,21px)}
@media(min-width:901px) and (min-height:601px){main:has(#game:not([hidden])) #trial-popup{left:calc((100vw - 380px) / 2)}}

.play-surface,.board-toolbar{display:contents}
#mobile-players,#mobile-hand,#mobile-tools{display:none}

@media(max-width:700px){
  .play-surface{
    display:grid;
    grid-template-rows:minmax(150px,1fr) auto;
    gap:5px;
    height:calc(100dvh - 64px - env(safe-area-inset-bottom));
  }
  .play-surface .table-frame{min-width:0;min-height:0}
  .play-surface .table-felt{height:100%;min-height:0;display:flex;flex-direction:column}
  .play-surface .board-scroll{flex:1;min-height:96px;height:auto;overflow:auto}
  .play-surface .table-heading{display:none}
  #mobile-players{display:block;position:relative;z-index:5;padding:0;border:0;background:transparent}
  #mobile-players summary{
    display:flex;align-items:center;justify-content:space-between;gap:6px;
    min-height:44px;padding:0 6px;list-style:none;
  }
  #mobile-players summary::-webkit-details-marker{display:none}
  #mobile-turn,#mobile-match-info{display:flex;align-items:center;gap:10px;min-width:0}
  #mobile-turn #turn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .players-label{flex:none;color:#f2dda6;font-size:13px}
  .players-label::after{content:' ▾'}
  #mobile-players[open] .players-label::after{content:' ▴'}
  #mobile-roster{
    position:absolute;inset:100% 0 auto;padding:8px;max-height:35dvh;overflow:auto;
    border:1px solid #879775;border-radius:8px;background:#193d2c;box-shadow:0 4px 12px #10261988;
  }
  #mobile-match-info{font-size:13px}
  .play-surface #conflicts{
    flex:none;max-height:3.6em;overflow:auto;margin:0 0 4px;padding:4px 8px;font-size:13px;
  }
  #mobile-players .table-players{margin:5px 0}
  .board-toolbar{
    flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
    gap:4px 8px;padding-top:4px;
  }
  .board-toolbar .bags{grid-area:1 / 3;gap:4px;margin:0}
  .board-toolbar .bag{width:46px;height:46px;padding:7px 2px 2px}
  .board-toolbar .bag::before{width:24px;height:4px;top:1px}
  .board-toolbar .bag span,.board-toolbar .bag small{line-height:1.1}
  .board-toolbar .table-actions{display:contents}
  .board-toolbar .table-actions>button{grid-column:1 / 3;justify-self:start}
  .board-toolbar .table-actions #submit{grid-area:1 / 1}
  .board-toolbar .table-actions #undo{grid-area:1 / 2}
  .board-toolbar .table-actions button{padding:7px 10px;font-size:14px}
  .board-toolbar #submission-status{grid-column:1 / -1;min-width:0;max-height:3em;overflow:auto;font-size:12px}
  #mobile-hand,#mobile-tools{display:block;min-width:0}
  #mobile-hand{max-height:42dvh;overflow:auto}
  #mobile-hand .game-controls{margin:0}
  #mobile-hand .rack-area{padding:5px 8px}
  #mobile-hand .rack-heading{min-height:32px}
  #mobile-hand #clear-selection{min-height:32px;padding:3px 10px;font-size:13px}
  #mobile-hand #clear-selection:disabled,#mobile-hand .selected-heading:has(+.rack:empty),
  #mobile-hand .staged-rack:empty,#mobile-hand .selected-rack:empty{display:none}
  #mobile-hand .rack{min-height:0;padding:4px 3px 8px;margin:2px 0;gap:5px}
  #mobile-hand .staged-tiles{gap:5px}
  #mobile-hand .selected-heading span{display:inline}
  #mobile-hand .selected-heading{margin-top:4px}
  .is-spectator .play-surface{grid-template-rows:1fr}
  .is-spectator #mobile-hand{display:none}
  .game-sidebar .extra-controls{margin:5px 0}
  #mobile-tools .rotation-controls{margin:8px 0}
}

#watch-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;padding:4px 0}
#watch-public{min-height:36px;padding:4px 8px;white-space:nowrap}
button.table-seat{color:#f6ecd4;cursor:pointer}
button.table-seat[aria-pressed="true"]{outline:3px solid #f3cc80;outline-offset:-3px}
button.table-seat:hover:not(:disabled){background:#456749}