body[data-game="face"]{--face-yellow:#ffd000;--face-ink:#303638;--face-paper:#fffdf5;--face-violet:#69429c}
body[data-game="face"].at-table #tableScene{visibility:hidden}
body[data-game="face"] #topbar .brand,body[data-game="face"] .room-top{color:var(--face-ink)}
body[data-game="face"].at-table .table-layout{padding:10px 130px 28px;min-height:0}
body[data-game="face"] .board-face{display:block;width:100%;max-width:1240px;margin:auto}
body[data-game="face"] .seat{display:grid;grid-template-columns:34px minmax(0,1fr);width:122px;gap:5px;color:var(--face-ink);padding:8px;align-items:center}
body[data-game="face"] .seat>.initial{width:30px;height:30px;font-size:.8rem}
body[data-game="face"] .seat>div{grid-column:2;grid-row:1/3;min-width:0}
body[data-game="face"] .seat>.points{grid-column:1;grid-row:2;padding:0;min-width:0;font-size:.8rem}
body[data-game="face"] .seat.you{background:var(--face-ink);color:var(--face-paper)}
.face-studio{display:grid;gap:14px;width:100%;color:var(--face-ink)}
.face-stagebar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 16px}
.face-stagebar>div:first-child{display:grid;gap:4px}.face-stagebar>div>span{font-size:.66rem;font-weight:800;letter-spacing:.06em}.face-stagebar strong{font-size:1.15rem}
.face-clock{display:flex;align-items:center;gap:9px;font-size:.7rem}.face-clock b{display:grid;place-items:center;min-width:66px;height:66px;border:3px solid var(--face-ink);border-radius:50%;background:var(--face-paper);font-size:1.9rem;font-variant-numeric:tabular-nums;box-shadow:0 3px 0 #30363833}.face-clock span{max-width:66px;line-height:1.25}
.face-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,350px);gap:24px;align-items:start}.face-main{display:grid;gap:12px;min-width:0}.face-side{display:grid;gap:14px;min-width:0}
.face-sculpture{width:100%;max-width:760px;margin:auto;filter:drop-shadow(0 6px 1px #9b760b40)}
.face-sculpture>svg{display:block;width:100%;max-height:57svh;overflow:visible;touch-action:none;border:0;outline:0}
.face-sculpture>svg:focus-visible{outline:3px solid var(--face-violet);outline-offset:2px;border-radius:20px}
.face-head{fill:var(--face-yellow);stroke:none}.face-cutout{cursor:grab;outline:none}.face-cutout:active{cursor:grabbing}.face-piece-art{stroke:#303638;stroke-width:1;stroke-linejoin:round;paint-order:stroke fill}
.face-selection-ring{fill:none;stroke:var(--face-violet);stroke-width:3;stroke-dasharray:7 5;opacity:0;pointer-events:none;vector-effect:non-scaling-stroke}.face-cutout.selected>.face-selection-ring,.face-cutout:focus-visible>.face-selection-ring{opacity:1}
.face-edit-tools{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;padding:10px;border-radius:14px;background:var(--face-paper);box-shadow:0 4px 0 #30363820;position:sticky;bottom:12px;z-index:3}
.face-edit-tools>button{border-radius:9px;min-height:44px;padding:8px 12px;font-size:.75rem}.face-edit-tools>.primary{margin-left:6px}.face-selected-label{font-size:.72rem;font-weight:800;margin-right:auto;padding:0 7px}
.face-flip-icon{display:inline-block;width:16px;height:16px;border:1px solid var(--face-ink);border-radius:50%;background:linear-gradient(90deg,var(--face-ink) 50%,var(--face-paper) 50%);vertical-align:-3px;margin-right:6px}
.face-private-card{display:grid;justify-items:center;gap:10px;text-align:center;padding:16px;background:var(--face-paper);border:2px solid var(--face-ink);border-radius:13px;box-shadow:3px 4px 0 #30363825;min-height:154px}
.face-private-card>small{font-size:.61rem;font-weight:900;letter-spacing:.05em}.face-private-card>strong{font-size:1.15rem;line-height:1.3;min-height:40px;display:grid;place-items:center}.face-private-card button{font-size:.73rem;min-height:44px}.face-secret-number{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:var(--face-yellow);font-size:1.8rem;font-weight:900}
.face-piece-drawer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px;border-radius:13px;background:#d4c7ae;box-shadow:inset 0 2px 4px #30363820}
.face-piece-box{position:relative;display:grid;justify-items:center;min-width:0;min-height:77px;padding:6px;border:2px solid #8f8574;border-radius:9px;background:#fffdf5;touch-action:none;cursor:grab}
.face-piece-box>svg{width:100%;height:46px;pointer-events:none;overflow:visible}.face-piece-box>small{display:flex;justify-content:space-between;width:100%;font-size:.58rem;font-weight:900;pointer-events:none}.face-piece-box>small>b{display:grid;place-items:center;background:#eee6d2;border-radius:50%;min-width:17px;height:17px}.face-piece-box.selected{border-color:var(--face-violet);box-shadow:0 0 0 2px var(--face-violet)}
.face-expression-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.face-expression-card{display:grid;grid-template-columns:25px minmax(0,1fr);gap:7px;align-items:start;min-height:118px;padding:12px 9px;text-align:left;border:2px solid var(--face-ink);border-radius:10px;background:var(--face-paper);box-shadow:3px 4px 0 #30363830;font-size:.78rem;line-height:1.35}
.face-expression-card>b{display:grid;place-items:center;width:25px;height:25px;background:var(--face-yellow);border-radius:50%;font-size:.8rem}.face-expression-card>span{align-self:center}.face-expression-card>small,.face-expression-card>em{grid-column:1/-1;font-size:.66rem;font-style:normal}.face-expression-card[aria-pressed="true"]{border-color:var(--face-violet);box-shadow:0 0 0 3px var(--face-violet);background:#f0e5fc}.face-expression-card:disabled{opacity:1;color:var(--face-ink);cursor:default}.face-expression-card.answer{border-color:#196840;background:#e2f2db;box-shadow:0 0 0 2px #196840}.face-lock-guess{min-height:48px;font-size:.82rem}
.face-guesser-status{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.face-guesser-status>span{display:flex;align-items:center;gap:7px;font-size:.72rem;padding:5px 9px;background:#fffdf599;border-radius:20px}.face-guesser-status i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--face-ink);color:var(--face-paper);font-style:normal;font-weight:900}
.face-key-help,.face-watch-note{text-align:center;font-size:.74rem;line-height:1.5}.face-key-help{max-width:720px;margin:auto}.face-watch-note{background:var(--face-paper);padding:12px;border-radius:12px}
body[data-game="face"] .collection-result{max-width:1100px}.face-result-picture .face-sculpture{max-width:620px}.face-result-picture .face-sculpture>svg{max-height:43svh}.collection-result .face-expression-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-result .face-expression-card{min-height:100px}
@media(max-width:1100px){body[data-game="face"].at-table .table-layout{padding:8px 16px 24px}.face-workbench{grid-template-columns:minmax(0,1fr) minmax(260px,35%);gap:16px}body[data-game="face"] .player-rail{position:static;display:flex;flex-direction:column;width:100%;gap:10px;order:-1}body[data-game="face"] .seats{position:static;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}body[data-game="face"] .seat{position:static!important;transform:none!important;width:145px;min-height:62px}body[data-game="face"] .rail-tools{position:static;display:flex;justify-content:center}.face-piece-drawer{grid-template-columns:repeat(3,minmax(0,1fr))}.face-expression-card{font-size:.72rem;padding:10px 7px}}
@media(max-width:740px){body[data-game="face"].at-table .table-layout{padding:5px 5px 24px}.face-workbench{grid-template-columns:1fr;gap:12px}.face-main{gap:6px}.face-sculpture>svg{max-height:44svh}.face-edit-tools{bottom:8px;padding:8px;gap:6px}.face-edit-tools>button{padding:7px 9px;font-size:.7rem}.face-selected-label{width:100%;text-align:center;margin:0}.face-edit-tools>.primary{margin:0;flex:1;min-width:140px}.face-stagebar{padding:0 6px}.face-clock b{height:50px;min-width:50px;font-size:1.5rem}.face-clock span{font-size:.65rem}.face-stagebar strong{font-size:.95rem}.face-private-card{grid-template-columns:1fr auto;min-height:92px;padding:10px;gap:5px 12px}.face-private-card>small{grid-column:1;text-align:left;font-size:.57rem}.face-private-card>strong,.face-private-card>.face-secret-number{grid-column:1;grid-row:2;font-size:.9rem;min-height:32px}.face-private-card>button{grid-column:2;grid-row:1/3;padding:8px;font-size:.66rem;max-width:116px}.face-private-card>.face-secret-number{width:32px;height:32px;justify-self:center}.face-piece-drawer{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:7px}.face-piece-box{min-height:60px;padding:5px}.face-piece-box>svg{height:31px}.face-piece-box>small{font-size:.5rem}.face-piece-box>small>b{min-width:14px;height:14px}.face-expression-card{min-height:100px;font-size:.72rem}.face-guesser-status{gap:6px}.face-guesser-status>span{font-size:.65rem}.face-key-help{font-size:.65rem;padding:0 8px}.collection-result .face-expression-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.face-studio button{transition:none}.face-studio button:hover:not(:disabled),.face-studio button:active:not(:disabled){transform:none}}
.calm .face-studio button{transition:none}.calm .face-studio button:hover:not(:disabled),.calm .face-studio button:active:not(:disabled){transform:none}

body[data-game="face"] .connection,body[data-game="face"] .seat small,body[data-game="face"] .seat .points{color:inherit}
body[data-game="face"] .connection.offline{color:#922637}
@media(max-width:1100px){body[data-game="face"] .player-rail{display:contents}body[data-game="face"] .seats{order:-1;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;padding:4px}body[data-game="face"] .seat{flex:0 0 145px}body[data-game="face"] .rail-tools{order:3;flex-wrap:wrap;margin-top:12px}}
