:root { --ink:#20242b; --muted:#69717b; --line:#dfe3e6; --paper:#f5f4ef; --surface:#fff; --red:#d64545; --red-dark:#a93638; --blue:#245c78; --gold:#d5a23c; --green:#4d7b6b; --purple:#6851a7; --shadow:0 14px 32px rgba(32,36,43,.11); }
.neutral-option { display:flex; align-items:center; gap:8px; padding:11px 12px; border:1px solid #9eafae; border-radius:4px; color:#e6eeeb; background:#294048; font-size:12px; font-weight:800; }.neutral-option input { width:16px; height:16px; accent-color:var(--gold); }
.reveal-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px; }.reveal-backdrop { position:absolute; inset:0; background:rgba(12,26,31,.92); }.reveal-content { position:relative; z-index:1; width:min(100%,440px); display:grid; justify-items:center; text-align:center; color:#fff; }.reveal-content .eyebrow { color:#f4bf58; }.reveal-content h1 { margin:0 0 26px; font:42px/1.1 Georgia,"Yu Mincho",serif; }.reveal-card-wrap { perspective:1000px; }.reveal-card { width:210px; height:296px; padding:0; border:0; border-radius:5px; background:transparent; perspective:1000px; }.reveal-card-inner { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.75,.2,1); }.reveal-card.is-resetting .reveal-card-inner { transition:none; transform:rotateY(0); }.reveal-card.is-revealed .reveal-card-inner { transform:rotateY(180deg); }.reveal-card-face { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; overflow:hidden; border-radius:5px; backface-visibility:hidden; box-shadow:0 19px 38px rgba(0,0,0,.38); }.reveal-card-back { border:2px solid #dcaf55; color:#f4d381; background:#293f46; }.reveal-card-back b { display:grid; place-items:center; width:72px; height:72px; margin-bottom:16px; border:2px solid currentColor; font:700 28px Georgia,serif; }.reveal-card-back small { font-size:10px; font-weight:800; letter-spacing:0; }.reveal-card-front { transform:rotateY(180deg); border:2px solid #d8b563; color:#fff; background:#f5f4ef; }.reveal-card-front img { width:100%; height:100%; object-fit:cover; }.reveal-card-front strong { color:var(--blue); font:700 29px Georgia,"Yu Mincho",serif; }.reveal-card-front small { margin-top:7px; color:var(--muted); font-size:13px; }.reveal-hint { min-height:22px; margin:22px 0 16px; color:#d2dfdc; font-size:13px; }.reveal-next { min-width:210px; } @media (max-width:480px) { .reveal-content h1 { font-size:34px; }.reveal-card { width:190px; height:268px; } }
.event-card { width:112px; height:156px; object-fit:cover; border:1px solid var(--line); border-radius:3px; box-shadow:0 5px 14px rgba(32,36,43,.16); }
.role-name { display:block; margin:18px 0 4px; color:var(--blue); font:700 28px Georgia,"Yu Mincho",serif; }.role-panel small { color:var(--muted); font-size:12px; }.profession-caption { margin:18px 0 7px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:800; }.profession-state { display:grid; gap:1px; margin-top:4px; color:var(--green) !important; line-height:1.35; }.profession-state > span { font-weight:800; }.profession-state b { color:var(--ink); font-size:10px; }
.player { position:relative; }
.profession-ability { cursor:help; outline:none; }
.profession-ability:focus-visible { color:var(--blue); text-decoration:underline; }
.profession-tooltip { position:absolute; z-index:8; top:calc(100% - 5px); right:9px; left:9px; display:block; padding:10px 11px; border:1px solid #61777b; border-radius:3px; color:#f5f7f5 !important; background:#1b3036; box-shadow:0 10px 24px rgba(12,28,33,.28); font-size:11px; font-weight:500 !important; line-height:1.65; opacity:0; visibility:hidden; transform:translateY(-3px); transition:opacity .15s ease,transform .15s ease,visibility .15s; pointer-events:none; }
.profession-ability:hover .profession-tooltip,.profession-ability:focus .profession-tooltip { opacity:1; visibility:visible; transform:translateY(0); }
.profession-frame { display:inline-block; margin-left:5px; padding:1px 4px; border:1px solid currentColor; border-radius:2px; font-size:8px; font-style:normal; font-weight:900; line-height:1.35; vertical-align:1px; }
.profession-frame.red { color:#b7383c; background:#fff1ef; }
.profession-frame.black { color:#242a2d; background:#e9ebea; }
.revealed-role { display:block; margin-top:3px; color:var(--red) !important; font-weight:800; }
.formation-state { display:inline-block; margin:3px 5px 0 0; padding:2px 5px; border:1px solid color-mix(in srgb, var(--gold) 55%, transparent); color:#8a6417 !important; background:#fff8e5; font-weight:800; }
.player.quest-member { border-color:#caa149; border-left:4px solid var(--gold); background:#fffaf0; }
.player.quest-member .player-name:after { content:"QUEST"; margin-left:6px; color:#9a711e; font-size:8px; font-weight:900; vertical-align:2px; }
.leader-mark { display:inline-block; margin-right:4px; padding:1px 4px; border:1px solid var(--gold); color:#8c6519; font-size:9px; }
.ability-controls { display:grid; gap:6px; margin-top:12px; }.ability-controls:empty { display:none; }.ability-controls button { min-height:34px; border:1px solid var(--blue); border-radius:3px; color:var(--blue); background:#fff; font-size:11px; font-weight:800; }
.ability-preview { display:block; width:min(100%, 180px); aspect-ratio:5 / 7; margin:0 auto 4px; object-fit:contain; border:1px solid var(--gold); background:#f4f2ec; }
.ability-name { margin:10px 0 4px; color:var(--blue); font-size:13px; font-weight:800; }.ability-text { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.profession-choice { padding:20px; }.profession-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }.profession-choice-card { min-width:0; padding:0; border:2px solid transparent; border-radius:4px; overflow:hidden; background:#f1f1ed; }.profession-choice-card:hover:not(:disabled) { border-color:var(--gold); }.profession-choice-card.selected { border-color:var(--green); }.profession-choice-card img { display:block; width:100%; aspect-ratio:.7; object-fit:cover; }.profession-choice-card:disabled { cursor:default; opacity:.8; } @media (max-width:720px) { .profession-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.connection { display:none; }
.entry-screen { min-height:100vh; }.entry-content { min-height:100vh; display:grid; align-content:center; }.entry-actions { grid-template-columns:minmax(0,1fr) auto auto; }.entry-actions .primary,.entry-actions .secondary { white-space:nowrap; }.entry-connection { margin:24px 0 0; color:#aebdbc; } @media (max-width:720px) { .entry-screen .entry-content { min-height:auto; }.entry-actions { grid-template-columns:1fr; }.entry-actions .primary,.entry-actions .secondary { grid-column:auto; width:100%; }.entry-actions input { min-height:44px; }.entry-art img { object-position:center; } }
.waiting-game { min-height:calc(100vh - 64px); display:grid; grid-template-rows:auto 1fr; }.waiting-table { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,370px); gap:19px; padding-top:19px; }.waiting-stage { min-height:540px; display:grid; align-content:center; justify-items:start; padding:clamp(36px,7vw,94px); border-left:5px solid var(--red); color:#edf2f0; background:#1e3038; box-shadow:var(--shadow); }.waiting-crest { display:grid; place-items:center; width:62px; height:62px; margin-bottom:20px; border:2px solid var(--gold); color:var(--gold); font:700 20px Georgia,serif; }.waiting-stage .eyebrow { color:#f0bf57; }.waiting-stage h1 { margin:0; color:#fff; font:52px/1.05 Georgia,"Yu Mincho",serif; letter-spacing:0; }.waiting-lead { margin:22px 0 32px; color:#ccd9d6; font-size:14px; line-height:1.8; }.waiting-lead span { display:block; }.waiting-lead span + span { margin-top:5px; }.waiting-lead .waiting-lead-aside { margin-top:13px; color:#9fb2b0; }.waiting-code-panel { width:min(100%,440px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:16px 18px; border:1px solid #63747a; background:rgba(255,255,255,.06); }.waiting-code-panel span { color:#b8c6c4; font-size:11px; font-weight:800; }.waiting-code-panel strong { color:#fff; font-size:24px; letter-spacing:3px; }.waiting-code-panel .copy-code { border:1px solid #d8b563; color:#f3cb6d; }.waiting-players-panel { min-height:540px; }.waiting-players-panel .players-list { max-height:360px; overflow:auto; padding-right:3px; }.waiting-actions { margin-top:18px; }.waiting-actions button { width:100%; min-height:46px; border:1px solid var(--red); border-radius:4px; color:#fff; background:var(--red); font-weight:800; }.waiting-rules { grid-column:1 / -1; margin-top:5px; padding:34px clamp(22px,4vw,48px) 38px; border-top:4px solid var(--gold); color:#e8efed; background:#23383f; }.waiting-rules-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid #53656a; }.waiting-rules-heading .eyebrow { color:#efbb55; }.waiting-rules-heading h2 { margin:0; color:#fff; font:30px/1.1 Georgia,"Yu Mincho",serif; }.rule-facts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.rule-facts span { padding:5px 9px; border:1px solid #718387; color:#dbe5e2; font-size:11px; font-weight:700; }.rule-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }.rule-columns details { min-width:0; border-bottom:1px solid #53656a; }.rule-columns summary { min-height:58px; display:flex; align-items:center; gap:12px; color:#fff; font-size:13px; font-weight:800; cursor:pointer; list-style:none; }.rule-columns summary::-webkit-details-marker { display:none; }.rule-columns summary span { color:#efbb55; font:700 12px Georgia,serif; }.rule-columns summary:after { content:"+"; margin-left:auto; color:#efbb55; font-size:18px; font-weight:400; }.rule-columns details[open] summary:after { content:"−"; }.rule-detail { padding:0 12px 16px 34px; }.rule-detail p { margin:0 0 9px; color:#c8d5d2; font-size:12px; line-height:1.75; }.rule-detail p:last-child { margin-bottom:0; }.rule-detail b { color:#fff; } @media (max-width:720px) { .waiting-table { grid-template-columns:1fr; }.waiting-stage { min-height:440px; padding:42px 28px; }.waiting-stage h1 { font-size:39px; }.waiting-code-panel { grid-template-columns:1fr auto; }.waiting-code-panel strong { font-size:21px; }.waiting-code-panel .copy-code { grid-column:1 / -1; width:100%; }.waiting-players-panel { min-height:0; }.waiting-rules { padding:28px 20px 32px; }.waiting-rules-heading { align-items:flex-start; flex-direction:column; gap:16px; }.rule-facts { justify-content:flex-start; }.rule-columns { grid-template-columns:1fr; }.rule-detail { padding-left:30px; } }
.lobby-body { background:#fbfbfa; }.center-lobby { min-height:calc(100vh - 64px); display:grid; place-content:center; gap:26px; padding:45px 20px; }.lobby-intro { max-width:560px; text-align:center; }.lobby-emblem { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 17px; border:1px solid #e6bb51; border-radius:50%; color:#b16a12; background:#fff4cf; font:700 24px Georgia,serif; }.lobby-intro h1 { margin:0; font-size:32px; }.lobby-intro h1 small { padding:4px 8px; border-radius:999px; color:#fff; background:#f4a51c; font-size:13px; vertical-align:middle; }.lobby-intro p { margin:9px 0 0; color:var(--muted); font-size:14px; }.lobby-card,.waiting-card { width:min(100%,440px); padding:28px 32px; border:1px solid #e4e1dc; border-radius:20px; background:#fff; box-shadow:0 14px 26px rgba(35,34,29,.12); }.lobby-card label { display:grid; gap:8px; color:#766e66; font-size:13px; font-weight:700; }.lobby-card input { height:48px; padding:0 15px; border:1px solid #e2dfda; border-radius:14px; background:#fbfaf8; text-align:center; outline:0; }.join-box { margin-top:20px; padding:15px 18px 19px; border:1.5px solid #3a3630; border-radius:15px; color:#766e66; font-size:13px; }.join-box div { display:flex; gap:9px; margin-top:13px; }.join-box input { min-width:0; flex:1; }.join-box button { width:58px; border:0; border-radius:12px; color:#fff; background:#8c8885; font-weight:800; }.or { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin:22px 0; color:#9a948d; font-size:12px; }.or:before,.or:after { content:""; height:1px; background:#e4e1dc; }.new-room { display:grid; place-items:center; min-height:53px; border-radius:14px; color:#2d2720; background:#ffc225; font-weight:800; text-decoration:none; }.create-card { display:grid; gap:18px; }.muted-link { color:#746e66; font-size:13px; text-align:center; }.room-code-large { margin:8px 0 14px; font-size:37px; font-weight:900; letter-spacing:7px; }.copy-room { width:100%; min-height:43px; border:1px solid #ddd7cf; border-radius:10px; color:#5f5a53; background:#fff; font-weight:700; }.waiting-divider { height:1px; margin:23px 0 17px; background:#ebe8e2; }.waiting-heading { display:flex; justify-content:space-between; color:#58534d; font-size:14px; }.waiting-heading span { color:#9a948d; }.waiting-players { display:grid; gap:8px; margin:15px 0; }.waiting-actions { display:grid; gap:8px; }.waiting-actions button { min-height:48px; border:0; border-radius:12px; color:#2d2720; background:#ffc225; font-weight:800; }.waiting-card > .leave { display:block; width:100%; margin-top:15px; text-align:center; }
.create-link { display:grid; place-items:center; text-decoration:none; }.create-submit { width:100%; }.back-link { color:#e5eded; font-size:13px; font-weight:700; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; } button,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.46; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,5vw,72px); background:var(--surface); border-bottom:1px solid var(--line); }.brand { display:inline-flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-size:14px; font-weight:800; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:4px; color:#fff; background:var(--red); font-size:11px; }.connection { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }.connection span { width:8px;height:8px;border-radius:99px;background:var(--gold); }.connection.ready span { background:var(--green); }.connection.error span { background:var(--red); }
.entry { min-height:calc(100vh - 64px); display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); background:#1e3038; }.entry-art { position:relative; overflow:hidden; background:#bf504a; }.entry-art:after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(30,48,56,.75)); }.entry-art img { width:100%;height:100%;object-fit:cover;opacity:.9;mix-blend-mode:screen; }.entry-content { align-self:center; max-width:710px; padding:64px clamp(28px,7vw,112px); color:#fff; }.eyebrow { margin:0 0 9px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:0; }.entry h1 { margin:0; font:clamp(49px,7vw,92px)/.85 Georgia,"Yu Mincho",serif; }.lead { max-width:580px; margin:27px 0 19px; color:#dce2e0; font-size:15px; line-height:1.85; }.rules-summary { display:flex; flex-wrap:wrap; gap:8px; }.rules-summary span { padding:5px 9px; border:1px solid #718386; border-radius:3px; color:#dce2e0; font-size:12px; }.lobby-form { display:grid; gap:12px; margin-top:35px; }.lobby-form label { display:grid; gap:7px; color:#dce2e0; font-size:12px; font-weight:700; }.lobby-form input { width:100%; min-height:44px; padding:0 12px; border:1px solid #809294; border-radius:4px; color:var(--ink); background:#fff; outline:none; }.lobby-form input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(213,162,60,.25); }.form-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; }.primary,.secondary { min-height:44px; padding:0 14px; border-radius:4px; font-size:13px; font-weight:800; }.primary { border:1px solid var(--red); color:#fff; background:var(--red); }.primary:hover { background:var(--red-dark); }.secondary { border:1px solid #b9c6c5; color:#1e3038; background:#e9efed; }.form-message { min-height:18px; margin:0; color:#ffd58b; font-size:13px; }
.game { max-width:1600px; margin:0 auto; padding:24px clamp(16px,4vw,64px) 45px; }.room-bar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 18px; border:1px solid var(--line); border-left:4px solid var(--red); background:#fff; }.room-bar .eyebrow { display:inline; margin-right:10px; }.room-bar strong { font-size:20px; letter-spacing:1px; }.copy-code,.quiet-button,.leave { padding:6px 9px; border:0; color:var(--blue); background:transparent; font-size:12px; font-weight:800; }.room-meta { display:flex; align-items:center; gap:15px; color:var(--muted); font-size:13px; }.leave { color:var(--red); }.table-layout { display:grid; grid-template-columns:210px minmax(430px,1fr) 285px; gap:19px; margin-top:19px; }.panel,.phase-panel { border:1px solid var(--line); border-radius:5px; background:var(--surface); box-shadow:0 2px 8px rgba(32,36,43,.04); }.table-sidebar,.players-panel { align-self:start; }.table-sidebar { display:grid; gap:19px; }.princess-panel { overflow:hidden; padding:13px; border-top:4px solid var(--gold); }.princess-panel img { display:block; width:100%; aspect-ratio:.69; object-fit:cover; }.hp-row { display:flex; justify-content:space-between; align-items:center; padding-top:12px; font-size:12px; font-weight:800; }.hp-row b { color:var(--red); font-size:24px; }.role-panel { min-height:135px; padding:15px; border-top:4px solid var(--blue); }.role-placeholder { color:var(--muted); font-size:13px; line-height:1.65; }.role-panel img { width:100%; max-height:270px; object-fit:contain; }
.table-center { display:grid; gap:19px; }.phase-panel { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:24px; border-left:5px solid var(--purple); }.phase-panel h2,.section-heading h3 { margin:0; font-size:20px; }.phase-panel p:not(.eyebrow) { max-width:560px; margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }.host-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.host-controls button { min-height:38px; padding:0 12px; border:1px solid var(--red); border-radius:4px; color:#fff; background:var(--red); font-size:12px; font-weight:800; }.host-controls button.secondary-control { border-color:var(--blue); background:var(--blue); }.vote-panel,.quest-panel,.log-panel { padding:20px; }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.section-heading h3 { font-size:17px; }.section-heading > span { color:var(--muted); font-size:11px; text-align:right; }.vote-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:18px; }.token { min-height:82px; display:grid; place-content:center; gap:5px; border:1px solid var(--line); border-top:5px solid var(--blue); border-radius:4px; color:var(--ink); background:var(--paper); }.token b { font-size:16px; }.token span,.vote-note { color:var(--muted); font-size:11px; }.token.sword { border-top-color:var(--red); }.token.shield { border-top-color:var(--gold); }.token.heal { border-top-color:#4fa1c5; }.token.special { border-top-color:#282a31; }.token.selected { outline:3px solid rgba(214,69,69,.25); background:#fff8f7; }.vote-note { margin:14px 0 0; line-height:1.6; }.quest-content { min-height:86px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; margin-top:13px; padding:15px; background:#f1f1ed; }.quest-card { width:52px;height:68px;display:grid;place-items:center;border:2px solid var(--gold);color:var(--red);background:#fff;font:700 15px Georgia,serif; }.quest-content h4 { margin:0; font-size:15px; }.quest-content p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }.quest-summary { min-width:0; }.quest-outcomes { display:grid; gap:8px; margin-top:13px; }.quest-outcome { display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; padding:8px 0 8px 10px; border-left:3px solid var(--line); font-size:12px; line-height:1.55; }.quest-outcome.success { border-color:var(--green); }.quest-outcome.failure { border-color:var(--red); }.quest-outcome.event { border-color:var(--gold); }.quest-outcome strong { color:var(--ink); }.quest-outcome span { color:var(--muted); }.log-panel ol { display:grid; gap:9px; margin:13px 0 0; padding:0; list-style:none; }.log-panel li { padding-left:12px; border-left:2px solid var(--line); color:var(--muted); font-size:12px; line-height:1.55; }.log-panel li:first-child { border-color:var(--red); color:var(--ink); }
.players-panel { min-height:500px; padding:19px; border-top:4px solid var(--green); }.players-list { display:grid; gap:7px; margin-top:16px; }.player { display:grid; grid-template-columns:1fr auto; gap:7px; padding:10px; border:1px solid var(--line); border-radius:4px; background:#fafaf8; }.player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:800; }.player-name .crown { color:var(--gold); }.player small { color:var(--muted); font-size:11px; }.player .hp { align-self:center; color:var(--red); font-size:13px; font-weight:800; }.player.eliminated { opacity:.48; text-decoration:line-through; }.chat { margin-top:20px; padding-top:17px; border-top:1px solid var(--line); }.chat-messages { min-height:118px; max-height:190px; display:grid; align-content:start; gap:8px; overflow:auto; padding:0 2px; }.message { color:var(--muted); font-size:12px; line-height:1.5; }.message b { color:var(--ink); }.chat form { display:flex; gap:6px; margin-top:10px; }.chat input { min-width:0; flex:1; height:36px; padding:0 8px; border:1px solid var(--line); border-radius:3px; outline:none; font-size:12px; }.chat button { width:44px; border:0; border-radius:3px; color:#fff; background:var(--blue); font-size:11px; font-weight:800; }
@media (max-width:1120px) { .table-layout { grid-template-columns:180px minmax(360px,1fr); }.players-panel { grid-column:1 / -1; min-height:0; }.players-list { grid-template-columns:repeat(3,1fr); }.chat { max-width:560px; } }
@media (max-width:720px) { .topbar { height:56px; }.entry { min-height:calc(100vh - 56px); grid-template-columns:1fr; }.entry-art { min-height:185px; }.entry-art:after { background:linear-gradient(180deg,rgba(30,48,56,.05),#1e3038); }.entry-content { padding:39px 23px 46px; }.form-grid { grid-template-columns:1fr 1fr; }.form-grid .primary { grid-column:1 / -1; }.game { padding:14px 12px 30px; }.room-bar { align-items:flex-start; flex-direction:column; }.room-meta { width:100%; justify-content:space-between; }.table-layout { grid-template-columns:1fr; }.table-sidebar { grid-template-columns:1fr 1fr; }.players-panel { grid-column:auto; }.phase-panel { display:block; }.host-controls { justify-content:flex-start; margin-top:17px; }.vote-actions { grid-template-columns:repeat(2,1fr); }.players-list { grid-template-columns:1fr 1fr; }.princess-panel img { max-height:280px; object-fit:contain; }.role-panel { min-height:0; }.role-panel img { max-height:280px; } }
.reveal-modal[hidden] { display:none; }
.vote-placements { display:grid; gap:7px; margin-top:14px; }.vote-placement { display:grid; grid-template-columns:minmax(64px,.45fr) minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 10px; border-left:3px solid var(--blue); background:#f1f1ed; font-size:12px; }.vote-placement select { min-width:0; min-height:34px; border:1px solid var(--line); border-radius:3px; background:#fff; }.vote-placement .quiet-button { min-height:34px; padding:0 7px; border:1px solid var(--line); border-radius:3px; }
@media (max-width:480px) { .quest-content { grid-template-columns:1fr; }.quest-content .event-card { justify-self:center; }.quest-outcome { grid-template-columns:90px minmax(0,1fr); } }

/* Game table */
.game-body {
  --table-ink:#17292f;
  --table-deep:#102127;
  --table-gold:#d8ad58;
  --table-ivory:#f8f7f2;
  min-height:100vh;
  color:#20272b;
  background:#172b31;
}

/* Waiting-room journey call to action. */
.waiting-stage h1 { white-space:nowrap; }
.waiting-actions > button:last-child:not(.secondary-control) {
  border-color:#d6ad52;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 5px 14px rgba(91,24,28,.2);
}
.settings-readonly-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:2px 1px 3px; color:#21383e; }
.settings-readonly-heading span { font-family:Georgia,"Yu Mincho",serif; font-size:15px; font-weight:700; }
.settings-readonly-heading small { color:#596c70; font-size:9px; font-weight:800; }
.settings-summary { display:grid; gap:8px; }
.settings-summary-row { min-height:56px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:11px 13px; border:1px solid #c5cfcc; border-left:3px solid var(--gold); color:#182f36; background:#fff; }
.settings-summary-row span { color:#43585e; font-size:11px; font-weight:900; }
.settings-summary-row strong { max-width:190px; color:#182f36; font:700 15px/1.35 Georgia,"Yu Mincho",serif; text-align:right; overflow-wrap:anywhere; }
@media (max-width:720px) {
  .waiting-stage h1 { font-size:36px; }
}

/* Waiting-room setup: initial leader answer and optional expansion sets. */
.waiting-players-panel .players-list { max-height:260px; }
.travel-question { margin-top:17px; padding:14px; border:1px solid #cad3d0; border-left:3px solid var(--gold); background:#f7f8f5; }
.travel-question .eyebrow { margin-bottom:5px; }
.travel-question h3 { margin:0; color:#21383e; font-size:15px; }
.travel-question > p:not(.eyebrow) { margin:6px 0 11px; color:var(--muted); font-size:11px; line-height:1.55; }
.travel-answer-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.travel-answer-controls input,.travel-answer-controls button { min-width:0; height:38px; border:1px solid #9eafae; border-radius:3px; background:#fff; }
.travel-answer-controls input { padding:0 8px; color:#1e3038; }
.travel-answer-controls button { padding:0 11px; color:#3a5056; font-size:11px; font-weight:800; }
.travel-answer-controls button.selected { border-color:var(--gold); color:#fff; background:#9d772a; }
.travel-question > small { display:block; margin-top:7px; color:#a74446; font-size:10px; font-weight:800; }
.travel-question > small.answered { color:#38735d; }
.travel-state { display:block; margin-top:4px; font-weight:700; }
.travel-state.answered { color:#39745e; }
.travel-state.waiting { color:#aa484b; }
.expansion-options { display:grid; gap:7px; margin:0; padding:10px; border:1px solid #6f8385; border-radius:4px; }
.expansion-options legend { padding:0 6px; color:#cbd8d5; font-size:11px; font-weight:800; }
.expansion-option { padding:9px 10px; border-color:#829494; background:#243940; }
.waiting-actions button:disabled { border-color:#839193; color:#d5dddb; background:#69787b; cursor:not-allowed; }
.game-topbar {
  position:relative;
  z-index:5;
  height:64px;
  border-bottom:1px solid #42555a;
  color:#fff;
  background:#102127;
}
.game-topbar .brand { color:#fff; }
.game-topbar .brand-mark {
  width:34px;
  height:34px;
  border:1px solid #e8c570;
  color:#f6d887;
  background:#b63c3f;
  box-shadow:0 0 0 3px #102127,0 0 0 4px #596a6d;
}
.game-topbar .brand > span:last-child { display:grid; gap:1px; }
.game-topbar .brand small { color:#91a5a7; font-size:9px; font-weight:700; }
.game-body .game {
  max-width:1720px;
  padding:22px clamp(18px,3vw,48px) 50px;
}
.game-body .room-bar {
  min-height:66px;
  padding:12px 17px 12px 20px;
  border:1px solid #53656a;
  border-left:3px solid var(--table-gold);
  color:#fff;
  background:#102127;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.room-identity { display:flex; align-items:center; gap:13px; }
.game-body .room-bar .eyebrow {
  margin:0;
  color:#e4bb62;
}
.game-body .room-bar strong {
  font:700 23px Georgia,serif;
  letter-spacing:3px;
}
.game-body .room-meta { color:#bfd0d0; }
.phase-badge,.day-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid #506267;
  font-size:11px;
  font-weight:800;
}
.phase-badge { color:#f5dd9e; }
.day-badge {
  min-width:104px;
  gap:5px;
  min-height:38px;
  border-color:#c99b42;
  color:#182a30;
  background:#e1b95f;
}
.day-badge small { font-size:8px; font-weight:900; }
.day-badge b { font:700 21px Georgia,serif; }
.day-badge i { font-size:11px; font-style:normal; font-weight:900; }
.game-body .leave {
  min-height:30px;
  border:1px solid #6f4b4d;
  color:#f2a5a7;
}
.game-body .table-layout {
  grid-template-columns:232px minmax(520px,1fr) 310px;
  gap:18px;
  margin-top:18px;
}
.game-body .panel,.game-body .phase-panel {
  border-color:#cdd2d0;
  border-radius:5px;
  background:var(--table-ivory);
  box-shadow:0 9px 24px rgba(5,18,22,.18);
}
.game-body .table-sidebar {
  position:sticky;
  top:18px;
  gap:18px;
}
.panel-kicker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.panel-kicker > span {
  color:#829092;
  font-size:8px;
  font-weight:800;
}
.game-body .princess-panel {
  position:relative;
  padding:14px;
  border:1px solid #6b7779;
  border-top:3px solid var(--table-gold);
  background:#21363c;
}
.game-body .princess-panel .eyebrow { color:#f2cc74; }
.game-body .princess-identity {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  margin:10px 1px 8px;
  padding-bottom:8px;
  border-bottom:1px solid #526368;
}
.game-body .princess-identity span {
  color:#f2cc74;
  font-size:11px;
  font-weight:800;
}
.game-body .princess-identity strong {
  color:#fff;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:21px;
  line-height:1.15;
  white-space:nowrap;
}
.game-body .princess-panel img {
  margin-top:3px;
  border:1px solid #d9b75f;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
.game-body .card-art-crop { overflow:hidden; background:#e8e8e2; }
.game-body .card-art-crop img {
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  margin:0;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:top;
}
.game-body .princess-art { aspect-ratio:1; margin-top:5px; border:1px solid #d9b75f; }
.game-body .princess-art img { border:0; box-shadow:none; }
.game-body .hp-row {
  margin-top:12px;
  padding:10px 2px 0;
  border-top:1px solid #526368;
  color:#dbe4e2;
}
.game-body .hp-row b {
  display:grid;
  place-items:center;
  min-width:44px;
  height:34px;
  border:1px solid #e06a69;
  color:#fff;
  background:#b63c3f;
  font:700 22px Georgia,serif;
}
.game-body .role-panel {
  padding:16px;
  border-top:3px solid #4e879b;
  background:#f8f7f2;
}
.game-body .role-panel > .eyebrow { color:#2d6f86; }
.game-body .role-panel img {
  display:block;
  margin:8px auto 0;
  border:1px solid #d2b663;
  box-shadow:0 5px 14px rgba(25,36,38,.13);
}
.game-body .role-art,.game-body .profession-art {
  margin-top:8px;
  border:1px solid #d2b663;
  box-shadow:0 5px 14px rgba(25,36,38,.13);
}
.game-body .role-art img,.game-body .profession-art img { border:0; box-shadow:none; }
.game-body .role-art { height:auto; aspect-ratio:.7; }
.game-body .role-art img { object-fit:contain; object-position:center; }
.game-body .profession-art { aspect-ratio:1; }
.game-body .profession-cards { gap:14px; }
.game-body .profession-choice-card {
  display:grid;
  grid-template-rows:auto minmax(112px,auto);
  text-align:left;
  background:#fff;
  box-shadow:0 4px 12px rgba(25,36,38,.1);
}
.game-body .profession-choice-art { display:block; aspect-ratio:1; overflow:hidden; background:#e7e7e1; }
.game-body .profession-choice-art img {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:top;
}
.game-body .profession-choice-info { display:grid; align-content:start; gap:7px; padding:12px 13px 14px; }
.game-body .profession-choice-info b {
  color:#203b43;
  font:700 17px Georgia,"Yu Mincho",serif;
}
.game-body .profession-choice-info small {
  color:#45575b;
  font-size:12px;
  line-height:1.6;
}
.game-body .ability-controls button {
  border-color:#446f7e;
  color:#24566a;
  background:#f2f7f6;
}
.game-body .personal-action-panel {
  padding:18px 20px;
  border-top:3px solid #d1a23d;
  background:#fffdf6;
}
.game-body .personal-action-panel[hidden] { display:none; }
.game-body .personal-action-panel .ability-controls {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.game-body .personal-action-panel .ability-controls button {
  min-height:48px;
  padding:9px 12px;
  border:1px solid #315d6c;
  color:#fff;
  background:#315d6c;
  font-size:12px;
  line-height:1.45;
}
.game-body .personal-action-panel .ability-result { grid-column:1 / -1; margin:0; }
.game-body .personal-action-panel .ability-preview { width:min(100%,180px); }
.game-body .vote-ability-panel {
  display:grid;
  grid-template-columns:minmax(180px,.75fr) minmax(220px,1.25fr);
  gap:16px;
  align-items:center;
  margin-top:16px;
  padding:14px 16px;
  border-left:4px solid #bf4447;
  background:#edf1ef;
}
.game-body .vote-ability-panel[hidden] { display:none; }
.game-body .vote-ability-heading span {
  display:block;
  color:#aa3c40;
  font-size:9px;
  font-weight:900;
}
.game-body .vote-ability-heading strong {
  display:block;
  margin-top:3px;
  color:#20383f;
  font:700 17px Georgia,"Yu Mincho",serif;
}
.game-body .vote-ability-heading p {
  margin:6px 0 0;
  color:#526367;
  font-size:11px;
  line-height:1.55;
}
.game-body .vote-ability-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.game-body .vote-ability-controls button {
  min-height:44px;
  padding:8px 10px;
  border:1px solid #315d6c;
  border-radius:3px;
  color:#fff;
  background:#315d6c;
  font-size:11px;
  font-weight:900;
  line-height:1.4;
}
.game-body .vote-ability-controls button:hover:not(:disabled) { background:#244b59; }
.game-body .vote-ability-controls .ability-result { grid-column:1 / -1; margin:0; padding:10px; color:#eaf1ef; background:#20383f; font-size:11px; line-height:1.6; }
.game-body .vote-ability-controls .ability-preview { grid-row:span 2; width:90px; margin:0 auto; }
.game-body .vote-panel.declared-vote {
  border-color:#d29b36;
  box-shadow:0 0 0 3px rgba(210,155,54,.16),0 15px 34px rgba(0,0,0,.28);
}
.game-body .vote-panel.declared-vote .vote-ability-panel {
  border-left-color:#d29b36;
  background:#fff7e5;
}
.game-body .vote-panel.declared-vote .vote-ability-heading strong { color:#9b6515; }
.game-body .vote-panel.declared-vote .vote-submit { border-color:#9b6515; background:#9b6515; }
.game-body .vote-panel[data-vote-mode="barrage"] .token:not(.sword),
.game-body .vote-panel[data-vote-mode="bloodHeal"] .token:not(.heal) { opacity:.32; filter:grayscale(1); }
.game-body .table-center { gap:18px; }
.game-body .phase-panel {
  position:relative;
  min-height:118px;
  padding:24px 25px 24px 30px;
  overflow:hidden;
  border:1px solid #56666a;
  border-left:4px solid #c64649;
  color:#fff;
  background:#21363c;
}
.game-body .phase-panel .eyebrow { color:#e8be63; }
.game-body .phase-panel h2 {
  color:#fff;
  font:700 27px/1.25 Georgia,"Yu Mincho",serif;
}
.game-body .phase-panel p:not(.eyebrow) { color:#c8d4d3; }
.game-body .host-controls { position:relative; z-index:1; }
.game-body .host-controls button {
  min-height:42px;
  padding:0 15px;
  border-color:#cf4d4f;
  background:#bd4144;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.game-body .host-controls button.secondary-control {
  border-color:#69838b;
  background:#345d6c;
}
.game-body .vote-panel,.game-body .quest-panel,.game-body .log-panel { padding:22px 23px; }
.game-body .section-heading {
  padding-bottom:14px;
  border-bottom:1px solid #d9ddda;
}
.game-body .section-heading h3 {
  font:700 20px Georgia,"Yu Mincho",serif;
}
.game-body .section-heading > span {
  max-width:240px;
  color:#667477;
  line-height:1.5;
}
.game-body .quest-content {
  grid-template-columns:clamp(190px,30%,235px) minmax(0,1fr);
  gap:22px;
  min-height:220px;
  margin-top:18px;
  padding:0;
  background:transparent;
}
.game-body .event-card {
  width:145px;
  height:202px;
  border:1px solid #b89447;
  box-shadow:0 10px 22px rgba(32,42,43,.2);
}
.game-body .quest-art {
  width:100%;
  height:auto;
  aspect-ratio:1.7;
  border:1px solid #b89447;
  box-shadow:0 10px 22px rgba(32,42,43,.2);
}
.game-body .quest-art .event-card { width:100%; height:100%; border:0; box-shadow:none; }
.game-body .quest-content h4 {
  padding-bottom:8px;
  border-bottom:2px solid #263d43;
  font:700 23px Georgia,"Yu Mincho",serif;
}
.game-body .quest-content p { color:#536164; font-size:13px; }
.game-body .quest-requirements {
  display:flex;
  align-items:stretch;
  margin-top:11px;
  border-top:1px solid #cdd2cf;
  border-bottom:1px solid #cdd2cf;
  background:#eef0ec;
}
.game-body .quest-requirement {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:138px;
  min-height:88px;
  padding:12px 15px;
}
.game-body .quest-requirement + .quest-requirement { border-left:1px solid #c3cac6; }
.game-body .quest-requirement > span {
  color:#425257;
  font-size:11px;
  font-weight:900;
}
.game-body .quest-requirement > strong {
  color:#b43d41;
  font:700 38px/1 Georgia,"Yu Mincho",serif;
}
.game-body .quest-requirement > small {
  color:#738084;
  font-size:8px;
  font-weight:800;
}
.game-body .quest-requirement > strong small { margin-left:3px; font:700 13px "Yu Gothic",sans-serif; }
.game-body .quest-requirement.formation > strong { color:#2d6475; }
.game-body .quest-requirement.event-check > strong { color:#8b681f; font-size:22px; }
.game-body .quest-outcomes {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.game-body .quest-outcome {
  display:block;
  min-height:82px;
  padding:12px 13px;
  border:1px solid #d7dbd8;
  border-top:3px solid #879492;
  background:#fff;
}
.game-body .quest-outcome.success { border-top-color:#3f8068; }
.game-body .quest-outcome.failure { border-top-color:#c9484b; }
.game-body .quest-outcome.event { border-top-color:#c89a42; }
.game-body .quest-outcome strong {
  display:block;
  margin-bottom:5px;
  font-size:11px;
}
.game-body .quest-outcome span { font-size:12px; }
.game-body .vote-order { margin-top:16px; padding:12px 14px; border:1px solid #536e76; background:#172a31; }
.game-body .vote-order-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.game-body .vote-order-heading span { color:#e7bd61; font-size:9px; font-weight:900; }
.game-body .vote-order-heading small { color:#bfcfce; font-size:10px; font-weight:700; }
.game-body .vote-order ol { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 0; padding:0; list-style:none; }
.game-body .vote-order li { min-width:105px; display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; gap:1px 7px; padding:7px 9px; border:1px solid #526870; color:#dce6e4; background:#243940; }
.game-body .vote-order li i { grid-row:1 / 3; width:22px; height:22px; display:grid; place-items:center; border:1px solid #71878c; border-radius:50%; font-size:10px; font-style:normal; font-weight:900; }
.game-body .vote-order li b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.game-body .vote-order li span { color:#9fb0b0; font-size:9px; font-weight:800; }
.game-body .vote-order li.current { border-color:#e1b653; color:#fff; background:#6f5521; box-shadow:inset 3px 0 0 #f0c563; }
.game-body .vote-order li.current span { color:#ffe19a; }
.game-body .vote-order li.done { opacity:.66; }
.game-body .vote-order li.done i { border-color:#5c927e; color:#bfe0d3; }
.game-body .vote-order li.self b::after { content:" (あなた)"; color:#e8c873; font-size:9px; }
.game-body .vote-order li.private { opacity:.78; }
.game-body .vote-order li.private span { color:#839698; }
.game-body .vote-actions {
  grid-template-columns:repeat(4,minmax(92px,1fr));
  gap:10px;
  margin-top:18px;
}
.game-body .token-inventory {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin-top:16px;
  padding:13px 14px;
  border-top:1px solid #c8cfcc;
  border-bottom:1px solid #c8cfcc;
  background:#eef0ec;
}
.game-body .token-inventory-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.game-body .token-inventory-heading div { display:grid; gap:2px; }
.game-body .token-inventory-heading span {
  color:#c84548;
  font-size:9px;
  font-weight:900;
}
.game-body .token-inventory-heading strong { font-size:12px; }
.game-body .token-inventory-heading > b {
  color:#2d6171;
  font:700 18px Georgia,"Yu Mincho",serif;
}
.game-body .token-inventory-list { display:flex; flex-wrap:wrap; gap:7px; min-width:0; }
.game-body .token-inventory-empty { color:#758187; font-size:12px; }
.game-body .held-token {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:5px 9px;
  border:1px solid #b8c4c2;
  border-left:3px solid #426f7e;
  color:#274d5a;
  background:#fff;
  font-size:12px;
}
.game-body .held-token.sword { border-left-color:#c7484b; color:#9e3034; }
.game-body .held-token.shield { border-left-color:#d1a343; color:#80601e; }
.game-body .held-token.heal,.game-body .held-token.whiteMagic { border-left-color:#4d91a8; }
.game-body .held-token.special { border-left-color:#313438; color:#313438; }
.game-body .held-token.guard { border-left-color:#477c70; color:#35665c; }
.game-body .held-token.fortune { border-left-color:#8b6a9f; color:#684d79; }
.game-body .held-token.suction,.game-body .held-token.blackMagic { border-left-color:#565d65; color:#3f454c; }
.game-body .held-token strong { font-size:15px; }
.game-body .token {
  position:relative;
  min-height:96px;
  padding:10px 7px;
  border:1px solid #d6dad7;
  border-top:0;
  border-radius:4px;
  background:#fff;
  box-shadow:inset 0 3px 0 #426f7e;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.game-body .token:hover:not(:disabled) {
  transform:translateY(-2px);
  border-color:#aeb8b5;
  box-shadow:inset 0 3px 0 #426f7e,0 7px 14px rgba(23,41,47,.12);
}
.game-body .token b {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  margin:0 auto 2px;
  border:1px solid #b8c4c2;
  border-radius:50%;
  color:#274d5a;
  background:#eef3f1;
  font-size:14px;
}
.game-body .token.sword { box-shadow:inset 0 3px 0 #c7484b; }
.game-body .token.sword b { border-color:#dca8a8; color:#a52f34; background:#fbefed; }
.game-body .token.shield { box-shadow:inset 0 3px 0 #d1a343; }
.game-body .token.shield b { border-color:#ddc58d; color:#8a641a; background:#fbf4df; }
.game-body .token.heal { box-shadow:inset 0 3px 0 #4d91a8; }
.game-body .token.special { box-shadow:inset 0 3px 0 #313438; }
.game-body .token.whiteMagic { box-shadow:inset 0 3px 0 #77a8b5; }
.game-body .token.whiteMagic b { border-color:#a9c8d0; color:#376c7a; background:#eef7f8; }
.game-body .token.blackMagic { box-shadow:inset 0 3px 0 #343940; }
.game-body .token.blackMagic b { border-color:#9ca1a8; color:#343940; background:#eef0f2; }
.game-body .token.selected {
  transform:translateY(-2px);
  outline:2px solid #cb4b4d;
  outline-offset:2px;
  background:#fff9f7;
}
.game-body .vote-placement {
  min-height:48px;
  padding:7px 10px;
  border:1px solid #d8dcd9;
  border-left:3px solid #3f7183;
  background:#fff;
}
.game-body .vote-placement select {
  padding:0 9px;
  border-color:#c9cfcc;
  background:#f8f8f5;
}
.game-body .vote-submit {
  width:100%;
  margin-top:14px;
  background:#b93e41;
}
.game-body .log-panel { background:#eceeea; }
.game-body .log-panel ol {
  max-height:220px;
  overflow:auto;
  padding-right:6px;
}
.game-body .log-panel li {
  padding:7px 10px;
  border:0;
  border-bottom:1px solid #d5d9d5;
}
.game-body .log-panel li:first-child {
  border-left:3px solid #bd4245;
  color:#243033;
  background:#fff;
}
.game-body .players-panel {
  position:sticky;
  top:18px;
  min-height:610px;
  padding:19px;
  border-top:3px solid #4d826f;
}
.game-body .players-panel .section-heading h3 {
  color:#27383b;
  font-size:22px;
}
.game-body .players-list { gap:8px; }
.game-body .player {
  min-height:58px;
  padding:10px 11px;
  border:1px solid #d8dcd8;
  border-left:3px solid #718a87;
  background:#fff;
}
.game-body .player:has(.leader-mark) {
  border-left-color:#d2a13f;
  background:#fffaf0;
}
.game-body .player-name { font-size:13px; }
.game-body .leader-mark {
  border:0;
  color:#9a6d18;
  background:#f2dfad;
}
.game-body .player .hp {
  min-width:43px;
  padding:5px 6px;
  text-align:center;
  color:#aa3539;
  background:#faecea;
}
.game-body .chat {
  margin-top:18px;
  padding-top:16px;
}
.game-body .chat-messages {
  min-height:154px;
  max-height:260px;
  padding:2px 4px;
}
.game-body .message {
  padding:7px 9px;
  border-left:2px solid #bac5c2;
  background:#f1f2ee;
}
.game-body .chat input {
  height:40px;
  padding:0 10px;
  border-color:#c8cfcc;
  background:#fff;
}
.game-body .chat input:focus {
  border-color:#4b7887;
  box-shadow:0 0 0 2px rgba(75,120,135,.14);
}
.game-body .chat button {
  width:48px;
  background:#285a6b;
}
.game-body button:focus-visible,.game-body input:focus-visible,.game-body select:focus-visible {
  outline:2px solid #e4ba5e;
  outline-offset:2px;
}
@media (max-width:1240px) {
  .game-body .table-layout { grid-template-columns:205px minmax(440px,1fr); }
  .game-body .players-panel {
    position:static;
    grid-column:1 / -1;
    min-height:0;
  }
  .game-body .players-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .game-body .chat { max-width:none; }
}
@media (max-width:760px) {
  .game-body .vote-order-heading { align-items:flex-start; flex-direction:column; gap:4px; }
  .game-body .vote-order ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-body .vote-order li { min-width:0; }
  .game-topbar { height:56px; padding:0 16px; }
  .game-topbar .brand small { display:none; }
  .game-body .game { padding:12px 10px 28px; }
  .game-body .room-bar {
    position:sticky;
    z-index:4;
    top:0;
    min-height:0;
    padding:10px 12px;
  }
  .game-body .room-bar strong { font-size:19px; }
  .game-body .room-meta { gap:7px; }
  .game-body .table-layout {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
  }
  .game-body .table-center { display:contents; }
  .game-body .phase-panel { order:1; }
  .game-body .profession-choice { order:2; }
  .game-body .personal-action-panel { order:3; }
  .game-body .profession-cards { grid-template-columns:1fr; }
  .game-body .profession-choice-card {
    grid-template-columns:100px minmax(0,1fr);
    grid-template-rows:minmax(118px,auto);
  }
  .game-body .profession-choice-art { height:78px; align-self:start; }
  .game-body .profession-choice-info { padding:12px; }
  .game-body .vote-panel { order:4; }
  .game-body .quest-panel { order:5; }
  .game-body .log-panel { order:6; }
  .game-body .table-sidebar { order:7; }
  .game-body .players-panel { order:8; }
  .game-body .table-sidebar {
    position:static;
    align-self:stretch;
    width:100%;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:12px;
  }
  .game-body .princess-panel,.game-body .role-panel { min-width:0; }
  .game-body .princess-panel { padding:10px; }
  .game-body .role-panel { padding:12px; }
  .game-body .phase-panel { min-height:0; padding:20px; }
  .game-body .phase-panel h2 { font-size:23px; }
  .game-body .host-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-body .host-controls button { min-width:0; padding:0 8px; }
  .game-body .vote-panel,.game-body .quest-panel,.game-body .log-panel { padding:17px 15px; }
  .game-body .quest-content { grid-template-columns:1fr; gap:16px; min-height:0; }
  .game-body .quest-art { width:100%; height:clamp(130px,28vw,190px); aspect-ratio:auto; }
  .game-body .event-card { width:100%; height:100%; }
  .game-body .quest-content h4 { font-size:19px; }
  .game-body .quest-requirement { min-width:0; flex:1; padding:10px; }
  .game-body .quest-requirement > strong { font-size:34px; }
  .game-body .quest-outcomes { grid-template-columns:1fr; }
  .game-body .vote-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-body .token-inventory { grid-template-columns:1fr; gap:10px; }
  .game-body .players-panel {
    align-self:stretch;
    width:100%;
    grid-column:auto;
  }
  .game-body .players-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:430px) {
  .game-body .room-identity { gap:8px; }
  .game-body .room-bar .eyebrow { display:none; }
  .game-body .room-meta { width:auto; }
  .game-body .day-badge { min-width:88px; padding:0 7px; }
  .game-body .leave { padding:5px 7px; }
  .game-body .panel-kicker > span { display:none; }
  .game-body .quest-content { grid-template-columns:1fr; }
  .game-body .quest-art { width:100%; height:130px; justify-self:stretch; }
  .game-body .event-card { width:100%; height:100%; }
  .game-body .players-list { grid-template-columns:1fr; }
}

/* Readable card transcriptions */
.reveal-hint { margin:18px 0 10px; }
.reveal-summary {
  width:min(100%,430px);
  margin:0 0 16px;
  padding:14px 16px;
  border-left:4px solid #e1b351;
  color:#fff;
  background:#263e46;
  text-align:left;
}
.reveal-summary[hidden] { display:none; }
.reveal-summary strong { display:block; margin-bottom:5px; color:#f2c968; font-size:13px; }
.reveal-summary p { margin:0; font-size:15px; line-height:1.75; white-space:pre-line; }
.reveal-card-front {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:10px;
}
.reveal-art-crop {
  display:block;
  width:100%;
  aspect-ratio:1;
  flex:0 0 auto;
  overflow:hidden;
  border-bottom:1px solid #d8b563;
  background:#e8e8e2;
}
.reveal-card-front .reveal-art-crop img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.reveal-card-front .reveal-art-name {
  display:grid;
  flex:1;
  place-items:center;
  width:100%;
  color:#243e46;
  font:700 18px Georgia,"Yu Mincho",serif;
}
.reveal-card-front.role-full-card { padding:0; background:#fff; }
.reveal-card-front .reveal-role-full {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.ability-text { font-size:13px; line-height:1.7; }
.card-readable { margin-top:10px; padding:11px 12px; border-left:3px solid var(--gold); background:#fff; }
.card-readable .ability-name { margin:0 0 5px; }
.card-readable .ability-text { color:#3d494d; font-size:14px; line-height:1.75; }
.card-readable.rebel-allies { border-left-color:#c84548; background:#fff0ee; }
.card-readable.rebel-allies .ability-name { color:#a82f33; }
.card-readable.rebel-allies .ability-text { color:#7d2427; font-weight:900; }
.princess-readable { border-left-color:#d8ad58; background:#30464d; }
.princess-readable .ability-name { color:#f2c968; }
.princess-readable .ability-text { color:#edf2f0; font-size:13px; }
.game-body .quest-content p { color:#3f4d50; font-size:14px; line-height:1.75; }
.game-body .quest-outcome strong { font-size:12px; }
.game-body .quest-outcome span { color:#39474a; font-size:14px; line-height:1.7; }
@media (max-width:480px) {
  .reveal-content h1 { margin-bottom:18px; }
  .reveal-card { width:170px; height:240px; }
  .reveal-summary { padding:12px 14px; }
  .reveal-summary p { font-size:14px; }
}

/* Game completion */
.victory-modal { position:fixed; z-index:60; inset:0; display:grid; place-items:center; overflow:auto; padding:24px; }
.victory-modal[hidden] { display:none; }
.victory-backdrop { position:absolute; inset:0; background:#101f24; animation:victory-backdrop-in .45s ease both; }
.victory-dialog {
  position:relative;
  z-index:1;
  width:min(100%,760px);
  overflow:hidden;
  padding:38px clamp(22px,5vw,56px) 34px;
  border:2px solid #e5b84f;
  border-top:8px solid #e5b84f;
  border-radius:6px;
  color:#f7f4e9;
  background:#20363d;
  box-shadow:0 24px 80px rgba(0,0,0,.58);
  text-align:center;
  animation:victory-dialog-in .65s cubic-bezier(.18,.82,.24,1) both;
}
.victory-burst { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.victory-burst i { position:absolute; top:48%; left:50%; width:2px; height:78%; background:#dcb24e; opacity:.2; transform-origin:50% 0; animation:victory-ray 1.4s ease-out both; }
.victory-burst i:nth-child(2) { transform:rotate(45deg); }.victory-burst i:nth-child(3) { transform:rotate(90deg); }.victory-burst i:nth-child(4) { transform:rotate(135deg); }.victory-burst i:nth-child(5) { transform:rotate(180deg); }.victory-burst i:nth-child(6) { transform:rotate(225deg); }.victory-burst i:nth-child(7) { transform:rotate(270deg); }.victory-burst i:nth-child(8) { transform:rotate(315deg); }
.victory-kicker { position:relative; margin:0; color:#efc866; font-size:11px; font-weight:900; }
.victory-crown { position:relative; display:grid; place-items:center; width:66px; height:66px; margin:15px auto; border:2px solid #e5b84f; color:#f4cb6d; background:#b63c3f; font:700 24px Georgia,serif; box-shadow:0 0 0 7px rgba(229,184,79,.13); animation:victory-mark 1s .25s ease both; }
.victory-dialog h1 { position:relative; margin:0; color:#fff; font:700 clamp(34px,6vw,58px)/1.1 Georgia,"Yu Mincho",serif; }
.victory-winner { position:relative; display:block; margin-top:12px; color:#efc866; font-size:clamp(18px,3vw,28px); }
.victory-reason { position:relative; margin:10px 0 23px; color:#cad8d5; font-size:13px; }
.victory-players { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; text-align:left; }
.victory-player { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:11px 13px; border:1px solid #52676c; border-radius:4px; background:#172a30; }
.victory-player span { grid-row:1 / 3; align-self:center; min-width:56px; color:#93a5a4; font-size:9px; font-weight:900; }
.victory-player strong { color:#fff; font-size:13px; }.victory-player small { color:#aebfbc; font-size:10px; }
.victory-player.winner { border-color:#e5b84f; background:#3d3522; }.victory-player.winner span { color:#efc866; }
.victory-waiting { position:relative; margin:20px 0 11px; color:#cad8d5; font-size:12px; }
.victory-actions { position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:9px; }.victory-actions button { min-height:48px; }
@keyframes victory-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes victory-dialog-in { from { opacity:0; transform:translateY(24px) scale(.92); } to { opacity:1; transform:none; } }
@keyframes victory-mark { 0% { opacity:0; transform:scale(.4) rotate(-12deg); } 65% { transform:scale(1.12) rotate(3deg); } 100% { opacity:1; transform:none; } }
@keyframes victory-ray { from { opacity:0; height:0; } to { opacity:.2; height:78%; } }
@media (max-width:560px) { .victory-modal { align-items:start; padding:10px; }.victory-dialog { margin:auto 0; padding:27px 16px 20px; }.victory-players { grid-template-columns:1fr; }.victory-actions { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .victory-backdrop,.victory-dialog,.victory-crown,.victory-burst i { animation:none; } }

/* In-game target and formation selection */
body.action-choice-open { overflow:hidden; }
.action-choice-modal { position:fixed; z-index:55; inset:0; display:grid; place-items:center; padding:20px; }
.action-choice-modal[hidden] { display:none; }
.action-choice-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; background:rgba(7,20,25,.9); }
.action-choice-dialog { position:relative; z-index:1; width:min(100%,560px); max-height:calc(100vh - 40px); overflow:auto; padding:24px; border-top:4px solid var(--gold); background:#f8f7f2; box-shadow:0 24px 60px rgba(0,0,0,.48); }
.action-choice-heading { padding-bottom:16px; border-bottom:1px solid #d7dcda; }
.action-choice-heading h2 { margin:5px 0 7px; color:#17292f; font:700 27px/1.25 Georgia,"Yu Mincho",serif; }
.action-choice-heading > p:last-child { margin:0; color:#647074; font-size:12px; line-height:1.7; }
.action-choice-options { display:grid; gap:8px; margin-top:16px; }
.action-choice-option { position:relative; display:grid; grid-template-columns:1fr auto; gap:3px 12px; width:100%; min-height:58px; padding:11px 44px 11px 14px; border:1px solid #cbd3d0; border-left:4px solid #819397; border-radius:4px; color:#17292f; background:#fff; text-align:left; }
.action-choice-option span { grid-column:1; overflow-wrap:anywhere; font-size:14px; font-weight:900; }
.action-choice-option small { grid-column:1; color:#667276; font-size:11px; line-height:1.5; }
.action-choice-option b { position:absolute; top:50%; right:14px; display:grid; place-items:center; width:24px; height:24px; border:1px solid #aebbb9; color:transparent; transform:translateY(-50%); }
.action-choice-option:hover { border-color:#62828a; background:#f4f7f5; }
.action-choice-option.selected { border-color:#bd8f33; border-left-color:#d64545; background:#fffaf0; box-shadow:inset 0 0 0 1px #e2bd70; }
.action-choice-option.selected b { border-color:#bd8f33; color:#fff; background:#bd8f33; }
.action-choice-option:focus-visible { outline:3px solid rgba(36,92,120,.25); outline-offset:2px; }
.action-choice-status { min-height:20px; margin:13px 0 8px; color:#52666b; font-size:12px; font-weight:800; }
.action-choice-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:9px; }
.action-choice-actions button { min-height:46px; }
@media (max-width:480px) { .action-choice-modal { align-items:end; padding:10px; }.action-choice-dialog { width:100%; max-height:calc(100vh - 20px); padding:20px 16px 16px; }.action-choice-heading h2 { font-size:23px; }.action-choice-actions { grid-template-columns:1fr; }.action-choice-actions .primary { grid-row:1; } }

.princess-option { display:grid; gap:7px; padding:10px 12px; border:1px solid #9eafae; border-left:3px solid var(--gold); border-radius:4px; color:#e6eeeb; background:#294048; font-size:12px; font-weight:800; }
.princess-option select { width:100%; height:36px; padding:0 9px; border:1px solid #d8b563; border-radius:3px; color:#1e3038; background:#fff; font-size:12px; }
.timer-option {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:8px 10px 8px 12px;
  border:1px solid #9eafae;
  border-radius:4px;
  color:#e6eeeb;
  background:#294048;
  font-size:12px;
  font-weight:800;
}
.timer-option select {
  min-width:88px;
  height:32px;
  padding:0 8px;
  border:1px solid #d8b563;
  border-radius:3px;
  color:#1e3038;
  background:#fff;
  font-weight:800;
}
.timer-minute-input { display:flex; align-items:center; gap:6px; }
.timer-minute-input input {
  width:66px;
  height:32px;
  padding:0 8px;
  border:1px solid #d8b563;
  border-radius:3px;
  color:#1e3038;
  background:#fff;
  font-weight:900;
  text-align:right;
}
.timer-minute-input b { color:#f0cf7d; font-size:12px; }
.phase-side { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.day-timer {
  flex:0 0 126px;
  min-height:82px;
  display:grid;
  place-content:center;
  justify-items:center;
  padding:8px 12px;
  border:1px solid #71858a;
  border-top:3px solid #e2b65b;
  background:#172b31;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.day-timer[hidden] { display:none; }
.day-timer span { color:#d6c28c; font-size:9px; font-weight:800; }
.day-timer strong {
  min-width:92px;
  color:#fff;
  font:700 30px/1.15 Georgia,serif;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.day-timer small { color:#aebfbe; font-size:10px; font-weight:700; }
.day-timer.warning { border-top-color:#f1c34f; background:#403821; }
.day-timer.warning strong,.day-timer.warning small { color:#ffe08b; }
.day-timer.expired { border-color:#d9585a; border-top-color:#d9585a; background:#512b2e; }
.day-timer.expired strong,.day-timer.expired small { color:#fff; }
@media (max-width:720px) {
  .phase-side { align-items:stretch; flex-direction:column; margin-top:18px; }
  .day-timer { min-height:72px; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:13px; justify-content:center; }
  .day-timer span { align-self:end; }
  .day-timer strong { grid-row:1 / 3; grid-column:2; align-self:center; font-size:29px; }
  .day-timer small { align-self:start; }
  .game-body .phase-side .host-controls { margin-top:0; }
}

.profession-identity { display:grid; gap:2px; margin:8px 0 10px; padding:9px 10px; border-left:3px solid var(--gold); background:#f0f1ed; }
.profession-identity span { color:var(--muted); font-size:10px; font-weight:800; }
.profession-identity strong { color:var(--ink); font:700 17px/1.2 Georgia,"Yu Mincho",serif; }
.previous-night-result { margin:16px 0; padding:15px; border:1px solid #cad2cf; border-left:4px solid var(--gold); background:#f6f7f3; }
.previous-night-result[hidden] { display:none; }
.previous-night-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.previous-night-heading div { display:grid; gap:4px; }
.previous-night-heading span { color:var(--muted); font-size:9px; font-weight:900; }
.previous-night-heading strong { color:var(--ink); font-size:15px; }
.previous-night-heading > b { flex:0 0 auto; padding:4px 6px; border:1px solid #b99142; color:#765915; font-size:9px; }
.previous-night-heading > b.success { border-color:#4f8b75; color:#2f6b55; }
.previous-night-heading > b.failure { border-color:#cf5a5c; color:#a02e31; }
.previous-night-outcome { display:grid; gap:4px; margin-top:12px; padding:10px 11px; background:#fff; }
.previous-night-outcome span { color:#9d7422; font-size:9px; font-weight:900; }
.previous-night-outcome strong { color:#26383d; font-size:12px; line-height:1.55; }
.previous-vote-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:13px 0 7px; }
.previous-vote-heading span,.vote-summary-heading span { color:#a23b3e; font-size:9px; font-weight:900; }
.previous-vote-heading strong { color:#273c42; font-size:12px; }
.vote-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.vote-summary-target { min-width:0; overflow:hidden; border:1px solid #cbd3d0; border-left:4px solid #647f88; background:#fff; }
.vote-summary-target.quest { border-left-color:#b84447; }.vote-summary-target.princess { border-left-color:#d1a23d; }
.vote-target-name { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px; border-bottom:1px solid #dce1df; }
.vote-target-name > i { display:grid; place-items:center; width:32px; height:32px; border:1px solid #71888e; color:#315d6c; background:#edf2f0; font:700 13px Georgia,"Yu Mincho",serif; font-style:normal; }
.vote-summary-target.quest .vote-target-name > i { border-color:#c95a5d; color:#a52f33; background:#fff0ef; }
.vote-summary-target.princess .vote-target-name > i { border-color:#d5ae55; color:#8a661a; background:#fff7df; }
.vote-target-name > div { min-width:0; display:grid; gap:1px; }.vote-target-name > div small { color:#7c898b; font-size:8px; font-weight:900; }.vote-target-name > div strong { overflow:hidden; color:#17292f; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.vote-target-name > b { color:#b53d40; font:700 25px/1 Georgia,serif; }.vote-target-name > b small { margin-left:2px; color:#7a8587; font:800 8px "Segoe UI",sans-serif; }
.vote-token-breakdown { display:flex; flex-wrap:wrap; gap:6px; padding:9px 10px; background:#f2f4f1; }
.vote-token-count { display:grid; grid-template-columns:auto auto auto; gap:4px; align-items:baseline; min-width:72px; padding:6px 8px; border-top:3px solid #71888e; color:#263a40; background:#fff; }
.vote-token-count i { min-width:0; overflow:hidden; font-size:10px; font-style:normal; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.vote-token-count b { font-size:17px; }.vote-token-count small { color:#7a8587; font-size:8px; font-weight:800; }
.vote-token-count.sword,.vote-token-count.special { border-top-color:#c9484b; }.vote-token-count.shield { border-top-color:#d1a23d; }.vote-token-count.heal,.vote-token-count.whiteMagic { border-top-color:#4b9ab5; }.vote-token-count.guard { border-top-color:#4f806d; }.vote-token-count.blackMagic { border-top-color:#292d32; }.vote-token-count.fortune { border-top-color:#7459a9; }.vote-token-count.suction { border-top-color:#7b5369; }
.vote-summary-legacy,.vote-summary-empty { padding:10px 12px; border-left:3px solid #71888e; color:#536164; background:#edf0ed; font-size:11px; }.vote-summary-legacy p { margin:0 0 4px; }.vote-summary-legacy p:last-child { margin-bottom:0; }

/* Night resolution */
.night-result-modal { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:22px; }
.night-result-modal[hidden] { display:none; }
.night-result-backdrop { position:absolute; inset:0; background:rgba(7,20,25,.9); }
.night-result-dialog {
  position:relative;
  z-index:1;
  width:min(100%,680px);
  max-height:calc(100vh - 44px);
  overflow:auto;
  padding:30px;
  border:1px solid #718187;
  border-top:5px solid #c89a42;
  border-radius:5px;
  color:#20282c;
  background:#f8f7f2;
  box-shadow:0 24px 60px rgba(0,0,0,.48);
}
.night-result-modal.success .night-result-dialog { border-top-color:#3f8068; }
.night-result-modal.failure .night-result-dialog { border-top-color:#c9484b; }
.night-result-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid #d7dcda; }
.night-result-heading .eyebrow { margin-bottom:7px; }
.night-result-heading h1 { margin:0; font:700 34px/1.15 Georgia,"Yu Mincho",serif; }
.night-result-heading > span { flex:0 0 auto; padding:7px 9px; border:1px solid #b99142; color:#765915; font-size:10px; font-weight:900; }
.night-result-modal.success .night-result-heading > span { border-color:#4f8b75; color:#2f6b55; }
.night-result-modal.failure .night-result-heading > span { border-color:#cf5a5c; color:#a02e31; }
.night-result-quest { margin:18px 0 10px; color:#536164; font-size:13px; font-weight:800; }
.night-result-outcome { display:grid; gap:5px; margin-bottom:12px; padding:13px 15px; border:1px solid #d0d7d4; background:#fff; }
.night-result-outcome span { color:#9d7422; font-size:10px; font-weight:900; }
.night-result-outcome strong { color:#17292f; font-size:14px; line-height:1.6; }
.night-result-modal.success .night-result-outcome span { color:#2f6b55; }
.night-result-modal.failure .night-result-outcome span { color:#a02e31; }
.night-vote-summary { margin:14px 0; padding:13px; border:1px solid #cbd3d0; background:#eef1ee; }
.vote-summary-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }.vote-summary-heading strong { color:#273c42; font-size:13px; }
.night-result-lines { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.night-result-lines li { padding:11px 13px 11px 16px; border-left:3px solid #839493; color:#344246; background:#eef0ed; font-size:14px; line-height:1.65; }
.night-result-lines li:first-child { border-left-color:#c89a42; color:#17292f; background:#fff; font-weight:800; }
.night-result-modal.success .night-result-lines li:first-child { border-left-color:#3f8068; }
.night-result-modal.failure .night-result-lines li:first-child { border-left-color:#c9484b; }
.night-result-reward { margin-top:16px; padding:15px; border:1px solid #c9d4cf; border-left:4px solid #c89a42; background:#f8faf7; }
.night-result-reward[hidden] { display:none; }
.night-result-reward > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.night-result-reward > div:first-child span { color:#9d7422; font-size:10px; font-weight:900; }
.night-result-reward > div:first-child strong { color:#17292f; font-size:14px; }
.night-result-reward p { margin:8px 0 12px; color:#536164; font-size:12px; }
.night-result-reward-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.night-result-reward-options .reward-token { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:10px 12px; border:1px solid #9eaaa6; border-top:3px solid #c9484b; color:#17292f; background:#fff; }
.night-result-reward-options .reward-token-shield { border-top-color:#c89a42; }
.night-result-reward-options .reward-token-heal { border-top-color:#4b9ab5; }
.night-result-reward-options .reward-token span { font-size:14px; font-weight:900; }
.night-result-reward-options .reward-token small { color:#637176; font-size:11px; font-weight:900; }
.night-result-reward-options .reward-token:hover:not(:disabled) { border-color:#243a41; transform:translateY(-1px); }
.night-result-reward-options .reward-token:disabled { cursor:wait; opacity:.55; }
.night-result-princess { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding:13px 15px; color:#fff; background:#243a41; }
.night-result-princess span { font-size:11px; font-weight:800; }
.night-result-princess strong { min-width:48px; color:#fff; font:700 28px Georgia,serif; text-align:center; }
.night-result-close { width:100%; margin-top:16px; }
@media (max-width:480px) {
  .night-result-modal { align-items:end; padding:10px; }
  .night-result-dialog { max-height:calc(100vh - 20px); padding:22px 18px 18px; }
  .night-result-heading h1 { font-size:28px; }
  .vote-summary-grid { grid-template-columns:1fr; }
  .night-result-lines li { padding:10px 11px 10px 13px; font-size:13px; }
  .night-result-reward-options { grid-template-columns:1fr; }
}

/* Focused profession draft */
body.profession-draft-open { overflow:hidden; }
.game-body .profession-choice:not([hidden]) {
  position:fixed;
  z-index:40;
  inset:0;
  display:block;
  overflow-y:auto;
  padding:clamp(28px,6vh,72px) clamp(18px,5vw,72px);
  border:0;
  border-radius:0;
  color:#eef3f1;
  background:#132a31;
  box-shadow:none;
}
.game-body .profession-choice-shell {
  width:min(100%,1040px);
  min-height:calc(100vh - clamp(56px,12vh,144px));
  margin:0 auto;
  display:grid;
  align-content:center;
}
.game-body .profession-choice .section-heading {
  align-items:end;
  padding:0 0 20px;
  border-bottom:1px solid #53676c;
}
.game-body .profession-choice .section-heading .eyebrow { color:#efbd58; }
.game-body .profession-choice .section-heading h3 {
  color:#fff;
  font:700 38px/1.15 Georgia,"Yu Mincho",serif;
}
.game-body .profession-choice .section-heading > span {
  max-width:none;
  padding:6px 9px;
  border:1px solid #72858a;
  color:#dce6e3;
  font-size:11px;
  font-weight:800;
}
.game-body .profession-choice .profession-cards {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.game-body .profession-choice .profession-choice-card {
  border:2px solid #657579;
  background:#f8f7f2;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.game-body .profession-choice .profession-choice-card:hover:not(:disabled) {
  border-color:#e0b654;
  transform:translateY(-2px);
}
.game-body .profession-choice .profession-choice-card.selected {
  border-color:#e4ba5e;
  outline:3px solid rgba(228,186,94,.22);
  opacity:1;
}
.game-body .profession-choice-identity { display:grid; gap:2px; padding-bottom:8px; border-bottom:1px solid #d8ddda; }
.game-body .profession-choice-identity small { color:#7b8584; font-size:10px; font-weight:800; }
.game-body .profession-choice-identity strong { color:#17292f; font:700 19px/1.25 Georgia,"Yu Mincho",serif; }
.game-body .profession-choice-action {
  min-height:52px;
  margin-top:20px;
  display:grid;
  justify-items:center;
}
.game-body .profession-choice-action button {
  width:min(100%,440px);
  min-height:48px;
}
.game-body .profession-choice-action p {
  margin:0;
  color:#cad7d4;
  font-size:13px;
  text-align:center;
  line-height:1.7;
}
@media (max-width:760px) {
  .game-body .profession-choice:not([hidden]) { padding:24px 16px 30px; }
  .game-body .profession-choice-shell { min-height:calc(100vh - 54px); align-content:start; }
  .game-body .profession-choice .section-heading { align-items:flex-start; flex-direction:column; gap:13px; }
  .game-body .profession-choice .section-heading h3 { font-size:30px; }
  .game-body .profession-choice .profession-cards { grid-template-columns:1fr; gap:12px; margin-top:16px; }
  .game-body .profession-choice .profession-choice-card {
    grid-template-columns:132px minmax(0,1fr);
    grid-template-rows:auto;
  }
  .game-body .profession-choice .profession-choice-art { width:132px; height:auto; }
}

/* Distinct day and night table states */
.game-body { transition:background-color .25s ease; }
.game-body .phase-panel {
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  gap:20px;
}
.game-body .phase-stamp {
  position:relative;
  z-index:1;
  width:82px;
  height:82px;
  display:grid;
  align-content:center;
  justify-items:center;
  border:1px solid currentColor;
}
.game-body .phase-stamp span {
  font-size:7px;
  font-weight:900;
}
.game-body .phase-stamp strong {
  margin-top:4px;
  font:700 20px Georgia,serif;
}
.game-body .phase-copy { position:relative; z-index:1; min-width:0; }
.game-body .phase-side { position:relative; z-index:1; }
.game-body.phase-day { background:#1b3435; }
.game-body.phase-day .room-bar { border-left-color:#e2b85d; }
.game-body.phase-day .phase-badge {
  border-color:#e2b85d;
  color:#17292f;
  background:#e2b85d;
}
.game-body.phase-day .phase-panel {
  border-color:#c7a14f;
  border-left:6px solid #d9ad53;
  color:#213237;
  background:#f4f0e3;
}
.game-body.phase-day .phase-stamp {
  color:#25383d;
  background:#e4bb61;
  box-shadow:5px 5px 0 #d8ddd5;
}
.game-body.phase-day .phase-panel .eyebrow { color:#9a6d17; }
.game-body.phase-day .phase-panel h2 { color:#172b31; font-size:30px; }
.game-body.phase-day .phase-panel p:not(.eyebrow) { color:#4d5d5f; }
.game-body.phase-day .quest-panel {
  border-top:4px solid #d2a54a;
  box-shadow:0 12px 28px rgba(5,18,22,.24);
}
.game-body.phase-day .vote-panel {
  border-top:3px solid #879795;
  background:#eef0ec;
}
.game-body.phase-day .vote-panel .section-heading { padding-bottom:10px; }
.game-body.phase-day .vote-actions,
.game-body.phase-day .vote-placements,
.game-body.phase-day .vote-submit { display:none; }
.game-body.phase-day .token-inventory { margin-top:12px; }
.game-body.phase-night { background:#101d23; }
.game-body.phase-night .room-bar {
  border-left-color:#cb4a4d;
  background:#0b181e;
}
.game-body.phase-night .phase-badge {
  border-color:#d15a5c;
  color:#fff;
  background:#b93f42;
  box-shadow:0 0 0 3px rgba(185,63,66,.18);
}
.game-body.phase-night .day-badge {
  border-color:#5c7780;
  color:#dce8e6;
  background:#203941;
}
.game-body.phase-night .phase-panel {
  border-color:#536d75;
  border-left:6px solid #c6474a;
  background:#172831;
  box-shadow:0 12px 32px rgba(0,0,0,.34);
}
.game-body.phase-night .phase-stamp {
  color:#fff;
  background:#b83f42;
  box-shadow:5px 5px 0 #294650;
}
.game-body.phase-night .phase-panel .eyebrow { color:#73b5ca; }
.game-body.phase-night .phase-panel h2 { color:#fff; font-size:30px; }
.game-body.phase-night .phase-panel p:not(.eyebrow) { color:#cbd9d9; }
.game-body.phase-night .vote-panel {
  border:2px solid #b74346;
  border-top:5px solid #cc4b4e;
  box-shadow:0 15px 34px rgba(0,0,0,.32),0 0 0 3px rgba(204,75,78,.1);
}
.game-body.phase-night .vote-panel .section-heading .eyebrow { color:#c23f43; }
.game-body.phase-night .quest-panel { border-top:3px solid #526d75; }
@media (max-width:760px) {
  .game-body .phase-panel {
    grid-template-columns:68px minmax(0,1fr);
    gap:14px;
  }
  .game-body .phase-stamp { width:68px; height:68px; }
  .game-body .phase-stamp strong { font-size:17px; }
  .game-body .phase-side { grid-column:1 / -1; width:100%; }
  .game-body.phase-day .phase-panel h2,.game-body.phase-night .phase-panel h2 { font-size:25px; }
  .game-body .vote-ability-panel { grid-template-columns:1fr; }
  .game-body .vote-ability-controls { grid-template-columns:1fr; }
  .game-body .personal-action-panel .ability-controls { grid-template-columns:1fr; }
}

.entry h1 { font-size:64px; line-height:.98; }
.entry .headline-line { display:block; white-space:nowrap; }
.entry .headline-guard { color:#f0bf57; }
.entry .headline-doubt { color:#ef5a5d; }
.entry-story { grid-column:1 / -1; padding:88px 28px 96px; border-top:4px solid #d5a23c; color:#17282e; background:#f5f6f4; }
.entry-story-inner { width:min(100%,980px); margin:0 auto; display:grid; grid-template-columns:240px minmax(0,1fr); gap:72px; }
.entry-story header { padding-top:5px; }
.entry-story .eyebrow { color:#d94749; }
.entry-story h2 { margin:0; font:46px/1.1 Georgia,"Yu Mincho",serif; }
.entry-story-copy { max-width:650px; }
.entry-story-copy p { margin:0 0 24px; font-size:15px; line-height:2; }
.entry-story-copy .story-lede { font-size:16px; }
.entry-story-copy .story-warning { padding:15px 0 15px 20px; border-left:4px solid #d94749; color:#b92f32; font-weight:800; }
.story-choices { display:flex; flex-wrap:wrap; gap:8px 30px; margin:34px 0; }
.entry-story-copy .story-choices p { margin:0; font:25px/1.4 Georgia,"Yu Mincho",serif; }
.entry-story-copy .story-closing { margin:35px 0 0; padding-top:24px; border-top:1px solid #aeb9b7; font-weight:800; }
.keep-together { white-space:nowrap; }
@media (max-width:1100px) {
  .entry h1 { font-size:44px; }
}
@media (max-width:720px) {
  .entry h1 { font-size:42px; }
  .entry-story { padding:60px 23px 70px; }
  .entry-story-inner { grid-template-columns:1fr; gap:32px; }
  .entry-story h2 { font-size:38px; }
  .entry-story-copy p { font-size:14px; line-height:1.9; }
  .entry-story-copy .story-lede { font-size:15px; }
  .story-choices { display:grid; gap:7px; margin:29px 0; }
  .entry-story-copy .story-choices p { font-size:22px; }
}
@media (max-width:360px) {
  .entry h1 { font-size:36px; }
}

@media (min-width:901px) {
  .entry.entry-screen { position:relative; height:100vh; min-height:680px; overflow:hidden; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); }
  .entry-screen .entry-art { grid-column:1; grid-row:1; min-height:100%; }
  .entry-screen .entry-art:after {
    background:linear-gradient(105deg,rgba(255,252,248,.34) 0%,rgba(255,250,246,.25) 58%,rgba(255,250,246,.1) 100%);
  }
  .entry-screen .entry-content { position:absolute; isolation:isolate; z-index:5; top:9vh; left:5.5vw; width:min(36vw,520px); min-height:0; padding:27px 24px 22px; color:#14272d; background:transparent; box-shadow:none; }
  .entry-screen .entry-content:before { content:""; position:absolute; z-index:-1; inset:-30px -42px -34px -34px; pointer-events:none; background:radial-gradient(ellipse at 44% 46%,rgba(255,253,250,.92) 0%,rgba(255,253,250,.79) 52%,rgba(255,253,250,.34) 72%,rgba(255,253,250,0) 88%); filter:blur(5px); }
  .entry-screen .entry-content h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:56px; font-weight:600; line-height:1.02; }
  .entry-screen .entry-content h1 { color:#14272d; text-shadow:0 1px 0 #fff,0 2px 8px rgba(255,255,255,.72); }
  .entry-screen .entry-content .headline-guard { color:#9a6200; }
  .entry-screen .entry-content .headline-doubt { color:#a82f38; }
  .entry-screen .entry-content .lead,.entry-screen .entry-content label { text-shadow:0 1px 0 #fff; }
  .entry-screen .entry-content .lead { margin:22px 0 15px; color:#1f353b; font-size:15px; font-weight:800; line-height:1.75; }
  .entry-screen .entry-content .lobby-form label { color:#14272d; font-size:13px; }
  .entry-screen .entry-content .lobby-form { margin-top:25px; }
  .entry-screen .entry-content .entry-connection { margin-top:18px; color:#3f615f; }
  .entry-screen .entry-story { position:absolute; z-index:4; top:calc(9vh + 27px); right:5.5vw; left:54%; padding:0; border-top:0; color:#dce7e4; background:transparent; box-shadow:none; }
  .entry-screen .entry-story-inner { width:100%; display:block; }
  .entry-screen .entry-story header { padding:0; }
  .entry-screen .entry-story .eyebrow { color:#ef5a5d; }
  .entry-screen .entry-story h2 { color:#fff; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:48px; font-weight:600; line-height:1.08; }
  .entry-screen .entry-story-copy { max-width:640px; margin-top:48px; }
  .entry-screen .entry-story-copy p { margin-bottom:15px; color:#d4dfdc; font-size:14px; line-height:1.8; }
  .entry-screen .entry-story-copy .story-lede { font-size:15px; }
  .entry-screen .entry-story-copy .story-warning { padding:10px 0 10px 16px; border-left-color:#ef5a5d; color:#ff7779; }
  .entry-screen .story-choices { gap:8px 24px; margin:20px 0; }
  .entry-screen .entry-story-copy .story-choices p { color:#fff; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:23px; font-weight:600; }
  .entry-screen .entry-story-copy .story-closing { margin-top:20px; padding-top:15px; border-top-color:#526a70; color:#f0bf57; }
}
@media (min-width:901px) and (max-height:760px) {
  .entry.entry-screen { min-height:620px; }
  .entry-screen .entry-content { top:6vh; padding-top:22px; padding-bottom:17px; }
  .entry-screen .entry-content h1 { font-size:47px; }
  .entry-screen .entry-content .lead { margin-top:15px; }
  .entry-screen .entry-content .lobby-form { margin-top:19px; }
  .entry-screen .entry-story { top:calc(6vh + 22px); }
  .entry-screen .entry-story h2 { font-size:38px; }
  .entry-screen .entry-story-copy { margin-top:30px; }
  .entry-screen .entry-story-copy p { margin-bottom:10px; line-height:1.6; }
  .entry-screen .story-choices { margin:14px 0; }
  .entry-screen .entry-story-copy .story-closing { margin-top:14px; padding-top:11px; }
}