:root{color-scheme:dark;--bg:#0d121b;--panel:#151e2b;--line:#2b3a4d;--text:#f0f5fc;--muted:#a8b7cc;--a:#37c6ec;--w:#ffc348;--c:#ee70ae;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.55}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}a{color:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:10px 16px;background:#202e40;color:var(--text);font-weight:600;transition:border-color .15s,background .15s}button:hover:not(:disabled){border-color:#8ba5c6;background:#2b3d53}button:disabled{opacity:.43;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--a);outline-offset:3px}.primary{background:var(--a);color:#082431;border-color:var(--a)}.primary:hover:not(:disabled){background:#78def8;border-color:#78def8}.quiet{background:transparent}.danger{color:#ffb8c2}.topbar{max-width:1360px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:21px;font-weight:750;letter-spacing:.04em}.brand-mark{color:var(--a);font-size:42px;line-height:1}.brand small{display:block;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.15em}.back{color:var(--muted);font-size:14px;text-decoration:none}main{max-width:1360px;padding:30px 32px;margin:auto}footer{padding:24px;color:var(--muted);text-align:center;font-size:13px}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.25;margin-bottom:14px}h2{font-size:22px;margin-bottom:16px}h3{font-size:17px;margin-bottom:12px}.muted{color:var(--muted)}.eyebrow{font-size:13px;letter-spacing:.13em;color:var(--a);margin-bottom:14px}.entry{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;padding:24px 0;align-items:center;max-width:1040px;margin:auto}.entry-art{max-width:440px;margin:auto;width:100%}.entry-intro{max-width:490px;margin-bottom:24px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}.entry-forms{display:grid;gap:18px}.entry label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}.entry input,input,textarea{width:100%;padding:11px 12px;border:1px solid #3b4b60;background:#0e1723;color:var(--text);border-radius:8px}input::placeholder,textarea::placeholder{color:#8999ae}.entry input{margin-bottom:14px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.flex-1{flex:1}.divider{border-top:1px solid var(--line);margin:22px 0}.howto{padding-left:22px;color:var(--muted);font-size:14px}.howto li{margin:8px 0}.roombar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}.roombar h1{font-size:24px;margin:0}.roomcode{letter-spacing:.15em;color:var(--a)}.status{color:var(--muted);font-size:14px}.status.error{color:#ffb8c2}.badge{font-size:13px;border:1px solid var(--line);border-radius:50px;padding:4px 10px;background:#1c2939}.badge.turn{border-color:var(--a);color:var(--a)}.roomgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.sidebar{display:grid;gap:18px}.sidebar .panel{padding:20px}.members{list-style:none;margin:0;padding:0}.members li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}.members li:last-child{border:0}.avatar{width:32px;height:32px;border-radius:50%;background:#25374c;display:grid;place-items:center;color:#d1dfef;flex-shrink:0}.members .name{flex:1;overflow-wrap:anywhere}.members .count{color:var(--muted);white-space:nowrap}.small-button{font-size:13px;padding:4px 8px}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}.legend span{display:flex;align-items:center;gap:6px}.swatch{width:10px;height:10px;border-radius:50%;background:currentColor}.attr{color:var(--a)}.word{color:var(--w)}.context{color:var(--c)}.board-panel{padding:22px;background:#111b29}.board{position:relative;aspect-ratio:900 / 700;margin:8px -6px 0}.board svg{position:absolute;width:100%;height:100%;inset:0}.region{position:absolute;transform:translate(-50%,-50%);width:104px;min-height:54px;padding:7px 5px;border:1px solid #455772;background:#122033ee;border-radius:11px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;line-height:1.25;font-weight:500}.region.selected{outline:2px solid white;border-color:white;background:#2e435d}.region.pending{box-shadow:0 0 0 3px var(--w)}.region .total{font-size:12px;color:#b8c8dd}.region.empty .total{color:#91a2bb}.region:hover:not(:disabled){background:#2c415c}.selection{padding:15px 16px;background:#1b2a3e;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.selection p{margin:0}.hand-panel{margin-top:22px}.hand-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.hand{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px}.card{min-height:118px;text-align:left;padding:18px 15px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;background:#eaf1fa;color:#14283e;border:2px solid transparent;border-radius:12px;overflow-wrap:anywhere}.card strong{font-family:Georgia,serif;font-size:23px;line-height:1.25;font-weight:600}.card span{font-size:14px;color:#4d647b;font-weight:400}.card:hover:not(:disabled){background:#fff;color:#14283e;border-color:var(--a)}.card.selected{background:#fff;color:#14283e;border-color:var(--a);box-shadow:0 0 0 2px var(--a)}.card:disabled{opacity:.65}.rules-grid{display:grid;gap:16px}.rule{border-left:3px solid currentColor;padding:0 0 0 14px}.rule h3{margin-bottom:8px}.rule label{display:block;font-size:13px;color:var(--muted);margin:8px 0 4px}.rule textarea{resize:vertical;min-height:54px;font-size:15px;line-height:1.5}.rule p{color:var(--text);margin-bottom:4px;overflow-wrap:anywhere}.rule .translation{font-size:14px;color:var(--muted)}.lobby-note{color:var(--muted);font-size:14px;margin:16px 0 0}.player-wait{min-height:360px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px}.player-wait p{max-width:480px}.pending-card{background:#eaf1fa;border-radius:10px;padding:18px;color:#14283e;margin-bottom:14px}.pending-card strong{font-family:Georgia,serif;font-size:26px;display:block;line-height:1.3;overflow-wrap:anywhere}.pending-card p{font-size:14px;margin:4px 0 0}.judge{border-color:var(--w)}.mask-choice{display:flex;gap:10px;margin:14px 0}.mask-choice label{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 4px;text-align:center;font-size:14px;cursor:pointer}.mask-choice input{width:auto;margin:0 4px 0 0;accent-color:var(--a)}.judge button{width:100%;margin-top:8px}.board-cards{display:flex;flex-wrap:wrap;gap:8px;max-height:280px;overflow:auto}.board-card{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#1c2c40;font-size:14px}.board-card b{display:block}.board-card small{font-size:12px;color:var(--muted)}.board-cards .muted{font-size:14px;margin:0}.history{list-style:none;padding:0;margin:0;max-height:210px;overflow:auto}.history li{font-size:14px;padding:9px 0;color:var(--muted);border-bottom:1px solid var(--line)}.history li:first-child{color:var(--text)}details summary{cursor:pointer;font-size:14px;margin-bottom:10px}.feedback{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:#eaf1fa;color:#14283e;box-shadow:0 8px 30px #0007;border-radius:12px;padding:14px 22px;z-index:10;font-size:15px}.winner{border-color:var(--a);background:#17323c;margin-bottom:22px}.winner h2{margin-bottom:8px}.winner p{margin-bottom:0}.loading{padding:70px;text-align:center;color:var(--muted)}.rules-help{font-size:14px;color:var(--muted)}.rules-help p{margin-bottom:10px}.connection-note{font-size:14px;color:#ffb8c2;background:#3c202b;padding:14px;border-radius:8px;margin-bottom:18px}.hidden{display:none!important}body.busy button{cursor:wait}body.busy button:not(.region){pointer-events:none}
@media(min-width:1200px){.entry h1{font-size:38px}.entry-art{max-width:480px}}@media(max-width:950px){.roomgrid{grid-template-columns:minmax(0,1fr) 290px;gap:16px}.region{width:78px;font-size:13px;min-height:50px}.board-panel{padding:16px}.panel{padding:20px}.legend{gap:10px;font-size:13px}}@media(max-width:760px){.topbar{padding:18px 20px}.brand{font-size:19px}.back{font-size:13px}main{padding:22px 16px}.entry{grid-template-columns:1fr;gap:20px;padding:0}.entry-art{display:none}.entry h1{font-size:28px}.entry-intro{margin-bottom:18px}.entry-forms{grid-template-columns:1fr 1fr}.roomgrid{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr 1fr}.sidebar .judge,.sidebar .rules-panel{grid-column:1 / -1}.region{width:80px;font-size:14px}.board-panel{padding:16px}.roombar h1{font-size:21px}.hand{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.card{min-height:100px}.card strong{font-size:21px}.panel{border-radius:12px}.hand-panel{padding:18px}}@media(max-width:460px){.entry-forms{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr}.region{width:59px;font-size:12px;min-height:46px;border-radius:8px;padding:5px 2px}.region .total{font-size:12px}.board-panel .legend{font-size:14px;gap:12px}.board{margin:15px -10px}.selection{padding:12px;font-size:14px}.selection button{width:100%}.roombar{gap:12px}.roombar .row{gap:7px}.roombar button{padding:7px 11px;font-size:14px}.hand{grid-template-columns:repeat(2,minmax(0,1fr))}.brand small{font-size:12px}.topbar{padding:16px}.rules-help{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep the eight regions readable even on a narrow screen. */
.board-scroll{overflow-x:auto;overscroll-behavior-x:contain;margin-bottom:16px}
.board-scroll .board{min-width:720px;margin:0;isolation:isolate}
.board-hint{font-size:13px;margin:12px 0 0}
.region.region-panel{width:15.5%;height:17%;min-height:0;padding:0;display:flex;align-items:stretch;gap:0;overflow:hidden;background:#122033f5;font-size:13px}
.region-title{border:0;border-bottom:1px solid #455772;border-radius:0;padding:5px 2px;flex-shrink:0;font-size:12px;background:#22344a;line-height:1.3}
.region-title small{font-weight:400;color:var(--muted);margin-left:5px;white-space:nowrap}
.region-words{overflow:auto;min-height:0;flex:1;padding:3px 7px;overscroll-behavior:contain;scrollbar-width:thin}
.region-word{padding:4px 0;border-bottom:1px solid #34465b;text-align:left;overflow-wrap:anywhere;line-height:1.3}
.region-word:last-child{border-bottom:0}.region-word b{display:block;font-size:13px;font-weight:600}.region-word small{display:block;color:#b8c8dd;font-size:11px;margin-top:2px}
.region-placeholder{font-size:12px;color:var(--muted);display:block;text-align:center;padding-top:8px}
.region-word.awaiting{color:var(--w)}.region-word.awaiting small{color:var(--w)}
.pack-panel{margin-top:18px}.pack-label{display:block;font-size:14px;margin-bottom:8px}.pack-panel input{font-size:13px}.pack-panel .small-button{margin-top:12px}

.hand-item{position:relative;min-width:0;display:flex;flex-direction:column;gap:6px}.hand-item .card{width:100%;flex:1;padding:9px;gap:5px;justify-content:flex-start}.card .card-face{width:100%;height:auto;aspect-ratio:320 / 488;object-fit:contain;border-radius:7px;background:#fff}.card strong{font-size:19px}.card-zoom{width:100%;padding:6px;font-size:13px}
.face-preview{display:block;padding:0;border:0;border-radius:5px;background:transparent;overflow:hidden;line-height:0}.face-preview:hover:not(:disabled){background:transparent;outline:2px solid var(--a)}.face-preview .card-face{display:block;width:100%;height:auto;border-radius:5px}
.region-word{display:flow-root}.board-face{float:left;width:27px;margin:1px 6px 2px 0}.detail-face{width:70px;float:left;margin-right:9px}.pending-face{width:160px;margin:0 auto 14px}.rule-face{width:90px;margin-bottom:10px}
#face-dialog{background:#151e2b;color:var(--text);border:1px solid #526782;border-radius:14px;padding:16px;width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}#face-dialog::backdrop{background:#060b14cc}.face-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.face-dialog-heading h2{margin:0;font-size:20px;overflow-wrap:anywhere}.face-dialog-heading button{padding:6px 12px;font-size:14px}#face-large{display:block;max-width:100%;max-height:calc(100dvh - 180px);width:auto;height:auto;margin:0 auto;border-radius:8px}#face-dialog>p{font-size:12px;margin:10px 0 0;text-align:center}

.syllable-word{display:inline-flex;flex-wrap:wrap;max-width:100%;column-gap:.09em;row-gap:2px;vertical-align:baseline}.card strong .syllable-word,.card strong .syllable-part{font-size:inherit;color:inherit;font-weight:inherit}.syllable-part{display:inline-block;border-bottom:2px solid currentColor;padding-bottom:2px;line-height:1.2}.syllable-note{display:block;font-size:11px;font-weight:400;color:var(--muted);line-height:1.5;margin-top:5px}.syllable-help{font-size:12px;margin:0 0 18px}.region-word .syllable-part{border-bottom-width:1px}.face-dialog-heading .syllable-note{font-size:12px}