:root { --bg:#070b11; --surface:#101722; --line:rgba(220,204,170,.18); --paper:#e8dfca; --paper-strong:#fff7e8; --muted:#8e99a2; --gold:#d4ad6b; --serif:"Noto Serif SC",serif; --sans:"Noto Sans SC",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { min-width:320px; min-height:100%; margin:0; }
body { background:var(--bg); color:var(--paper); font-family:var(--sans); }
button, a { font:inherit; color:inherit; }
a { text-decoration:none; }
button:focus-visible, a:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.player-header { position:fixed; z-index:20; inset:0 0 auto; height:64px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:0 22px; border-bottom:1px solid var(--line); background:rgba(7,11,17,.9); backdrop-filter:blur(18px); }
.player-header a { min-width:44px; min-height:44px; display:flex; align-items:center; gap:10px; }.player-header a span { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--gold); }.player-header a strong { font:600 13px/1 var(--serif); letter-spacing:.1em; }
.player-page summary,.player-page label:has(input[type="checkbox"]),.player-page label:has(input[type="radio"]){min-height:44px}
.player-view-tabs { justify-self:center; display:flex; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.player-view-tabs button { min-height:34px; padding:0 15px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); font-size:8px; cursor:pointer; }
.player-view-tabs button:last-child { border-right:0; }
.player-view-tabs button.active { background:rgba(212,173,107,.12); color:var(--paper-strong); }
.player-view-tabs button:disabled { cursor:not-allowed; opacity:.38; }
.player-header-tools { justify-self:end; display:flex; align-items:center; gap:8px; }
.player-header-tools > button { min-width:44px; min-height:44px; padding:0 13px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:10px; cursor:pointer; }.player-header-tools > button span{display:none}.player-header-tools > button b{font:inherit}
.player-stage { min-height:100vh; padding-top:64px; }
.curtain { position:relative; min-height:calc(100vh - 64px); display:grid; place-items:center; overflow:hidden; }
.curtain[hidden] { display:none; }
.curtain > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:68% center; filter:saturate(.7) brightness(.55); }
.curtain::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,8,13,.9),rgba(5,8,13,.2)),linear-gradient(0deg,rgba(5,8,13,.72),transparent); content:""; }
.curtain div { position:relative; z-index:2; width:min(580px,calc(100% - 44px)); margin-right:auto; margin-left:max(22px,8vw); }
.curtain span { color:var(--gold); font-size:9px; letter-spacing:.24em; }.curtain h1 { margin:14px 0 16px; color:var(--paper-strong); font:750 clamp(34px,6vw,65px)/1.25 var(--serif); }.curtain p { max-width:500px; margin:0; color:#b1b8ba; font:400 12px/2 var(--serif); }
.curtain-map-action { width:min(390px,100%); min-height:64px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:4px 18px; align-items:center; margin-top:26px; padding:12px 14px 12px 17px; border:1px solid rgba(212,173,107,.46); background:rgba(12,17,24,.72); box-shadow:0 12px 34px rgba(0,0,0,.3); color:var(--paper-strong); text-align:left; cursor:pointer; backdrop-filter:blur(12px); transition:border-color .2s,background .2s,transform .2s; }
.curtain-map-action strong { font:600 14px/1.4 var(--serif); letter-spacing:.06em; }
.curtain-map-action small { color:var(--muted); font-size:8px; line-height:1.5; }
.curtain-map-action i { grid-column:2; grid-row:1 / 3; color:var(--gold); font:400 20px/1 var(--serif); }
.curtain-map-action:hover,.curtain-map-action:focus-visible { border-color:var(--gold); background:rgba(212,173,107,.1); transform:translateY(-2px); }
.handout-view { min-height:calc(100vh - 64px); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); align-items:start; }
.handout-view[hidden] { display:none; }
.handout-view figure { position:sticky; top:64px; min-height:calc(100vh - 64px); display:grid; place-items:center; margin:0; padding:28px; border-right:1px solid var(--line); background:radial-gradient(circle at 50% 50%,#182231,var(--bg) 62%); }
.handout-view figure img { max-width:100%; max-height:calc(100vh - 120px); object-fit:contain; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.handout-copy { width:min(720px,100%); align-self:center; padding:clamp(34px,5vw,68px); }
.handout-copy > p:first-child { margin:0; color:var(--gold); font-size:8px; letter-spacing:.2em; }
.handout-copy h1 { margin:10px 0 9px; color:var(--paper-strong); font:700 clamp(30px,4vw,48px)/1.35 var(--serif); }
.handout-source { margin:0 0 20px; color:#c3a977; font:500 9px/1.7 var(--sans); letter-spacing:.08em; }
.gold-rule { width:44px; height:1px; margin:0 0 23px; background:var(--gold); }
.handout-body { margin:0; color:#c8ced0; font:500 14px/2 var(--serif); }
.handout-facts { margin-top:30px; padding-top:25px; border-top:1px solid var(--line); }
.handout-facts[hidden], .handout-prompt[hidden] { display:none; }
.handout-facts h2 { margin:0 0 14px; color:var(--paper-strong); font:600 17px/1.5 var(--serif); }
.handout-facts ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.handout-facts li { position:relative; padding:11px 13px 11px 28px; border:1px solid rgba(220,204,170,.12); background:rgba(255,255,255,.025); color:#aeb6ba; font:400 12px/1.85 var(--serif); }
.handout-facts li::before { position:absolute; left:12px; top:17px; width:5px; height:5px; border:1px solid var(--gold); border-radius:50%; content:""; }
.handout-prompt { margin-top:24px; padding:17px 18px; border-left:2px solid var(--gold); background:rgba(212,173,107,.07); }
.handout-prompt span { color:var(--gold); font-size:8px; letter-spacing:.14em; }
.handout-prompt p { margin:7px 0 0; color:#c2c7c7; font:500 11px/1.9 var(--serif); }
.player-map-view { min-height:calc(100vh - 64px); padding:clamp(22px,3vw,42px); background:radial-gradient(circle at 40% 20%,rgba(35,57,67,.25),transparent 45%),var(--bg); }
.player-map-view[hidden] { display:none; }
.player-map-heading { max-width:1500px; display:flex; justify-content:space-between; gap:28px; align-items:end; margin:0 auto 18px; }
.player-map-heading p { margin:0 0 7px; color:var(--gold); font-size:8px; letter-spacing:.2em; }
.player-map-heading h1 { margin:0; color:var(--paper-strong); font:700 clamp(28px,4vw,48px)/1.3 var(--serif); }
.player-map-heading > div > span { display:block; max-width:760px; margin-top:9px; color:#aab3b6; font:400 10px/1.75 var(--serif); }
.player-map-counts { display:grid; grid-template-columns:auto auto; gap:4px 9px; align-items:baseline; flex:0 0 auto; padding:12px 14px; border:1px solid var(--line); background:rgba(0,0,0,.14); }
.player-map-counts strong { color:var(--gold); font:700 19px/1 var(--serif); text-align:right; }
.player-map-counts span { color:var(--muted); font-size:7px; }
.player-map-layout { max-width:1500px; display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,390px); align-items:start; margin:0 auto; border:1px solid var(--line); background:var(--surface); }
.player-atlas { position:relative; aspect-ratio:1586 / 992; overflow:hidden; border-right:1px solid var(--line); background:#05080d; }
.player-atlas > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.82) brightness(.7); }
.player-map-hotspots { position:absolute; inset:0; }
.player-map-hotspot { position:absolute; z-index:2; width:44px; height:44px; display:grid; place-items:center; padding:0; transform:translate(calc(-50% + var(--pin-x,0px)),calc(-50% + var(--pin-y,0px))); border:1px solid rgba(212,173,107,.68); border-radius:50%; background:rgba(6,10,15,.92); color:var(--gold); box-shadow:0 0 0 4px rgba(212,173,107,.07),0 7px 22px rgba(0,0,0,.55); cursor:pointer; transition:border-color .2s,background .2s,color .2s,box-shadow .2s,transform .2s; }
.player-map-hotspot .player-map-pin { width:100%; height:100%; display:grid; place-items:center; border-radius:inherit; }
.player-map-hotspot .player-map-pin svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.player-map-hotspot::after { position:absolute; top:49px; left:50%; width:max-content; max-width:190px; padding:7px 9px; transform:translateX(-50%) translateY(-3px); border:1px solid var(--line); background:rgba(7,11,17,.97); color:var(--paper); box-shadow:0 8px 26px rgba(0,0,0,.52); font:500 8px/1.5 var(--serif); text-align:center; white-space:normal; content:attr(data-tooltip); opacity:0; pointer-events:none; transition:.2s; }
.player-map-hotspot:hover,.player-map-hotspot:focus-visible,.player-map-hotspot.active { z-index:9; transform:translate(calc(-50% + var(--pin-x,0px)),calc(-50% + var(--pin-y,0px))) scale(1.1); border-color:#e9c989; background:#18130c; color:#ffe7b8; box-shadow:0 0 0 5px rgba(212,173,107,.14),0 10px 28px rgba(0,0,0,.65); }
.player-map-hotspot:hover::after,.player-map-hotspot:focus-visible::after,.player-map-hotspot.active::after { opacity:1; transform:translateX(-50%) translateY(0); }
.player-map-hotspot.current { border-color:#d76c73; color:#f0b6b9; box-shadow:0 0 0 5px rgba(215,108,115,.12),0 0 26px rgba(215,108,115,.22); }
.player-map-hotspot.visited::before { position:absolute; right:-3px; top:-3px; width:9px; height:9px; border:2px solid #070b11; border-radius:50%; background:#69a98a; content:""; }
.player-map-presence { position:absolute; right:-10px; bottom:-7px; min-width:19px; height:19px; display:grid; place-items:center; padding:0 4px; border:2px solid #070b11; border-radius:10px; background:#69aeb5; color:#061012; box-shadow:0 4px 12px rgba(0,0,0,.42); font:700 8px/1 var(--sans); }
.player-map-legend { position:absolute; z-index:3; left:14px; bottom:14px; display:flex; flex-wrap:wrap; gap:10px; padding:8px 10px; border:1px solid var(--line); background:rgba(7,11,17,.84); color:#aeb5b7; font-size:7px; pointer-events:none; }
.player-map-legend span { display:flex; align-items:center; gap:5px; }.player-map-legend i { width:8px;height:8px;border:1px solid var(--gold);border-radius:50%; }.player-map-legend i.current{border-color:#d76c73}.player-map-legend i.visited{border-color:#69a98a;background:#69a98a}.player-map-legend i.presence{border-color:#69aeb5;background:#69aeb5}
.player-map-detail { position:sticky; top:82px; max-height:calc(100vh - 100px); min-height:440px; padding:25px 23px 34px; overflow-y:auto; background:linear-gradient(180deg,#111a26,#0d141e); }
.player-map-detail > p { margin:0 0 8px; color:var(--gold); font-size:7px; letter-spacing:.18em; }
.player-map-detail > h2 { margin:0 0 12px; color:var(--paper-strong); font:650 24px/1.4 var(--serif); }
.player-map-detail > span,.player-map-detail-copy { display:block; color:#aeb7ba; font:400 10px/1.85 var(--serif); }
.player-map-tags { display:flex; flex-wrap:wrap; gap:5px; margin:14px 0; }
.player-map-tags span { padding:5px 7px; border:1px solid var(--line); color:#c8c0ae; font-size:7px; }
.player-route-note { margin:14px 0 0; padding:11px 12px; border-left:2px solid var(--gold); background:rgba(212,173,107,.07); color:#c4c9c8; font:400 9px/1.75 var(--serif); }
.player-map-presence-panel { display:grid; gap:8px; margin-top:18px; }
.player-map-presence-panel > header,.player-map-intel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:7px; letter-spacing:.12em; }
.player-map-presence-panel > header b { color:#8fcdd0; font-weight:600; }
.player-map-character { min-height:58px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border:1px solid rgba(105,174,181,.25); background:rgba(105,174,181,.055); }
.player-map-character img { width:42px; height:42px; object-fit:cover; object-position:center 24%; border:1px solid rgba(105,174,181,.32); border-radius:50%; background:#090e15; }
.player-map-character strong { display:block; color:var(--paper-strong); font:600 11px/1.4 var(--serif); }
.player-map-character small { display:block; margin-top:2px; color:#86bfc2; font-size:6px; letter-spacing:.1em; }
.player-map-character p { margin:5px 0 0; color:#aeb9bb; font:400 8px/1.55 var(--serif); }
.player-map-intel { display:grid; gap:7px; margin-top:18px; padding:12px; border:1px solid rgba(105,174,181,.22); background:rgba(105,174,181,.04); }
.player-map-intel > header b { color:#8fcdd0; font-weight:600; }
.player-map-intel ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.player-map-intel li { position:relative; padding:7px 8px 7px 22px; color:#c2d3d4; font:400 8px/1.65 var(--serif); }
.player-map-intel li::before { position:absolute; left:6px; top:9px; color:#87c5c8; content:"⌁"; }
.player-map-scenes { display:grid; gap:9px; margin-top:20px; }
.player-map-scenes > header { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:7px; letter-spacing:.12em; }
.player-map-scene { padding:13px; border:1px solid var(--line); background:rgba(0,0,0,.14); }
.player-map-scene.active { border-color:rgba(212,173,107,.55); }.player-map-scene.completed { box-shadow:inset 2px 0 0 #69a98a; }
.player-map-scene > header { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.player-map-scene h3 { margin:0; color:var(--paper-strong); font:600 13px/1.45 var(--serif); }
.player-map-scene time { color:var(--gold); font-size:7px; white-space:nowrap; }
.player-map-scene p { margin:8px 0 0; color:#aeb6b9; font:400 9px/1.75 var(--serif); }
.player-map-clues { display:grid; gap:6px; margin:11px 0 0; padding:0; list-style:none; }
.player-map-clues li { position:relative; padding:8px 9px 8px 25px; border:1px solid rgba(105,174,181,.22); background:rgba(105,174,181,.055); color:#c2d3d4; font:400 8px/1.6 var(--serif); }
.player-map-clues li::before { position:absolute; left:9px; top:11px; color:#87c5c8; content:"✓"; }
.player-map-empty { margin-top:18px; padding:14px; border:1px dashed var(--line); color:var(--muted); font:400 9px/1.7 var(--serif); }
.player-map-list-wrap { max-width:1500px; margin:12px auto 0; border:1px solid var(--line); background:var(--surface); }
.player-map-list-wrap summary { padding:13px 16px; color:var(--muted); font-size:9px; cursor:pointer; }
.player-map-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:0 12px 12px; }
.player-map-list button { min-height:46px; display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line); background:transparent; color:#b9c0c1; font-size:8px; text-align:left; cursor:pointer; }.player-map-list button small{color:var(--muted);font-size:6px}.player-map-list button:hover,.player-map-list button.active{border-color:var(--gold);color:var(--paper-strong)}
.projection-note { position:fixed; z-index:22; left:16px; bottom:14px; padding:7px 10px; border:1px solid var(--line); background:rgba(7,11,17,.8); color:var(--muted); font-size:7px; letter-spacing:.1em; }
@media(max-width:980px){.player-map-layout{grid-template-columns:1fr}.player-atlas{border-right:0;border-bottom:1px solid var(--line)}.player-map-detail{position:relative;top:auto;max-height:none;min-height:0}.player-map-list{grid-template-columns:1fr 1fr}}
@media(max-width:760px){ .player-header { grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;padding:0 10px}.player-header a strong{display:none}.player-view-tabs button{padding:0 7px;font-size:7px}.player-header-tools>button{padding:0}.player-header-tools>button span{display:inline}.player-header-tools>button b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.handout-view{grid-template-columns:1fr}.handout-view figure{position:relative;top:auto;min-height:52vh;border-right:0;border-bottom:1px solid var(--line)}.handout-view figure img{max-height:48vh}.handout-copy{padding:30px 23px 72px}.handout-facts li{padding-right:11px}.curtain div{margin-left:24px}.projection-note{display:none}.player-map-heading{align-items:start}.player-map-counts{display:none}.player-map-view{padding:18px 10px 40px}.player-map-hotspot{width:35px;height:35px}.player-map-hotspot .player-map-pin svg{width:14px;height:14px}.player-map-hotspot::after{top:40px;max-width:130px;font-size:7px}.player-map-presence{right:-8px;bottom:-7px;min-width:17px;height:17px;font-size:7px}.player-map-legend{display:none}.player-map-list{grid-template-columns:1fr}.player-map-detail{padding:20px 17px 28px} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.player-tools { padding: clamp(28px,5vw,64px); border-top: 1px solid var(--line); background: linear-gradient(180deg,#0b111a,#070b11 40%); }
.player-tools-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; max-width: 1420px; margin: 0 auto 14px; }
.player-tools-heading p { margin: 0 0 7px; color: var(--gold); font-size: 8px; letter-spacing: .2em; }
.player-tools-heading h2 { margin: 0; color: var(--paper-strong); font: 700 clamp(28px,4vw,44px)/1.35 var(--serif); }
.player-tools-heading > span { max-width: 360px; color: var(--muted); font-size: 9px; line-height: 1.7; text-align: right; }
.player-local-note { max-width: 1420px; margin: 0 auto 18px; padding: 11px 14px; border: 1px solid rgba(212,173,107,.22); background: rgba(212,173,107,.055); color: #aeb5b7; font-size: 9px; line-height: 1.7; }
.player-live-state { max-width:1420px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:12px; margin:0 auto 18px; }
.player-live-state > article { min-width:0; padding:16px 18px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(212,173,107,.065),rgba(16,23,34,.8)); }
.player-live-state > article > span { color:var(--gold); font-size:12px; letter-spacing:.14em; }
.player-live-state h3 { margin:7px 0 5px; color:var(--paper-strong); font:600 18px/1.45 var(--serif); }
.player-live-state p { margin:0; color:#b7c0c2; font:400 14px/1.75 var(--serif); }
.player-live-state ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:13px 0 0; padding:0; list-style:none; }
.player-live-state li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:10px 11px; border:1px solid rgba(220,204,170,.14); background:rgba(0,0,0,.16); }
.player-live-state li.active { border-color:var(--gold); background:rgba(212,173,107,.1); }
.player-live-state li strong { overflow:hidden; color:var(--paper-strong); font:600 14px/1.4 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.player-live-state li span { color:var(--gold); font-size:12px; white-space:nowrap; }
.player-live-state li small { grid-column:1 / -1; color:var(--muted); font-size:12px; line-height:1.5; }
.player-tools-grid { max-width: 1420px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 16px; align-items: start; margin: 0 auto; }
.player-tool-card { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.player-tool-card > header { min-height: 76px; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.player-tool-card > header span { color: var(--gold); font-size: 7px; letter-spacing: .16em; }
.player-tool-card > header h3 { margin: 5px 0 0; color: var(--paper-strong); font: 600 19px/1.35 var(--serif); }
.player-tool-card > header small { color: var(--muted); font-size: 8px; }
.player-tool-card > header button { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 8px; cursor: pointer; }
.character-editor { grid-row: 1 / span 2; }
.result-inbox-card { grid-column: 1 / -1; }
#player-character-form, #player-check-request-form { display: grid; gap: 13px; padding: 18px; }
#player-character-form label, #player-check-request-form label { display: grid; gap: 7px; min-width: 0; }
#player-character-form label > span, #player-check-request-form label > span { color: var(--gold); font-size: 7px; letter-spacing: .1em; }
.player-form-grid { display: grid; gap: 10px; }
.player-form-grid.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.player-form-grid.three-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
.resource-fields label[hidden] { display: none; }
.resource-fields label small { color: var(--muted); font-size: 7px; line-height: 1.45; }
#player-character-form input, #player-character-form select, #player-character-form textarea, #player-check-request-form input, #player-check-request-form select, #player-check-request-form textarea { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 0; outline: 0; background: #090e16; color: var(--paper-strong); font: 400 10px/1.55 var(--sans); resize: vertical; }
#player-character-form textarea, #player-check-request-form textarea { min-height: 64px; }
#player-character-form input:focus, #player-character-form select:focus, #player-character-form textarea:focus, #player-check-request-form input:focus, #player-check-request-form select:focus, #player-check-request-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,173,107,.08); }
.approach-editor, .specialty-editor { margin: 0; padding: 14px; border: 1px solid var(--line); }
.approach-editor legend, .specialty-editor legend { padding: 0 7px; color: var(--paper-strong); font: 600 13px/1 var(--serif); }
.approach-editor > p, .specialty-editor > p { margin: 0 0 11px; color: var(--muted); font-size: 8px; }
.approach-inputs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.approach-inputs label { text-align: center; }
.approach-inputs label span { min-height: 22px; }
.approach-inputs input { text-align: center; }
.player-character-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.player-character-actions button, .player-primary { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: var(--muted-strong); font-size: 9px; cursor: pointer; }
.player-character-actions .player-primary, .player-primary { border-color: var(--gold); background: var(--gold); color: #111; font-weight: 700; }
.player-primary.full-width { width: 100%; }
.player-result-list { display: grid; margin: 0; padding: 0; list-style: none; }
.player-result-empty { padding: 28px 20px; color: var(--muted); font: 400 11px/1.8 var(--serif); }
.player-result-item { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 16px; align-items: start; padding: 18px; border-top: 1px solid var(--line); }
.player-result-item:first-child { border-top: 0; }
.player-result-tier { min-height: 70px; display: grid; place-items: center; align-content: center; padding: 9px; border: 1px solid var(--line); text-align: center; }
.player-result-tier strong { color: var(--paper-strong); font: 700 22px/1 var(--serif); }
.player-result-tier span { margin-top: 7px; color: var(--gold); font-size: 8px; }
.player-result-tier.exceptional { border-color: rgba(102,190,153,.5); background: rgba(102,190,153,.08); }
.player-result-tier.success { border-color: rgba(124,164,203,.45); background: rgba(124,164,203,.07); }
.player-result-tier.costly { border-color: rgba(212,173,107,.45); background: rgba(212,173,107,.08); }
.player-result-tier.severe { border-color: rgba(190,93,82,.45); background: rgba(190,93,82,.08); }
.player-result-copy h4 { margin: 0; color: var(--paper-strong); font: 600 15px/1.5 var(--serif); }
.player-result-copy > span { display: block; margin-top: 4px; color: var(--gold); font-size: 8px; }
.player-result-copy p { margin: 8px 0 0; color: #aeb6ba; font: 400 10px/1.75 var(--serif); }
.player-result-time { color: var(--muted); font-size: 7px; white-space: nowrap; }
body.projection-mode .player-tools { display: none; }

body.builder-mode .curtain,
body.builder-mode .handout-view,
body.builder-mode .player-map-view,
body.builder-mode .clue-journal-view,
body.builder-mode .player-room-view,
body.builder-mode .player-local-note,
body.builder-mode .check-request-card,
body.builder-mode .result-inbox-card { display: none; }
body.builder-mode .player-tools { min-height: 100vh; padding-top: 108px; border-top: 0; }
body.builder-mode .player-tools-grid { grid-template-columns: minmax(0, 1fr); max-width: 1160px; }
body.builder-mode .character-editor { grid-column: 1; grid-row: auto; }

.builder-progress { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-bottom: 1px solid var(--line); background: #0b111a; }
.builder-progress button { position: relative; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 9px; min-height: 68px; align-content: center; padding: 10px 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.builder-progress button:last-child { border-right: 0; }
.builder-progress button > span { grid-row: 1 / 3; display: grid; width: 26px; height: 26px; place-items: center; align-self: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font: 600 9px var(--sans); }
.builder-progress button b { color: #c1c8ca; font: 600 10px/1.3 var(--serif); }
.builder-progress button i { margin-top: 3px; color: var(--muted); font: normal 7px/1.3 var(--sans); }
.builder-progress button.active { background: rgba(212,173,107,.08); }
.builder-progress button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--gold); content: ""; }
.builder-progress button.active > span { border-color: var(--gold); background: var(--gold); color: #111; }
.builder-progress button.active b { color: var(--paper-strong); }
.builder-progress button.complete > span { border-color: rgba(102,190,153,.5); color: #77c7a5; }
.builder-progress button.complete > span::before { content: "✓"; }
.builder-progress button.complete > span { font-size: 0; }
.builder-progress button.complete > span::before { font-size: 9px; }

.builder-assurance { display: grid; grid-template-columns: 36px 1fr auto; gap: 13px; align-items: center; margin: 18px 18px 0; padding: 13px 15px; border: 1px solid rgba(102,190,153,.28); background: rgba(102,190,153,.055); }
.builder-assurance > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(102,190,153,.42); border-radius: 50%; color: #77c7a5; }
.builder-assurance p { margin: 0; color: #aeb9b8; font-size: 11px; line-height: 1.65; }
.builder-assurance p strong { color: #dce7df; }
.builder-assurance > b { color: #77c7a5; font-size: 10px; white-space: nowrap; }
.builder-error { margin: 12px 18px 0; padding: 12px 14px; border: 1px solid rgba(207,105,91,.4); background: rgba(207,105,91,.08); color: #e0a097; font-size: 11px; line-height: 1.7; }

.builder-step { display: none; padding: clamp(24px,4vw,44px); }
.builder-step.active { display: block; }
.builder-step-heading { margin-bottom: 28px; }
.builder-step-heading > p { margin: 0 0 7px; color: var(--gold); font-size: 9px; letter-spacing: .18em; }
.builder-step-heading h4 { margin: 0; color: var(--paper-strong); font: 700 clamp(25px,3vw,36px)/1.35 var(--serif); }
.builder-step-heading > span { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.7; }

.archetype-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.archetype-grid > button { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 15px; min-height: 170px; align-content: start; padding: 23px 20px; border: 1px solid var(--line); background: #0a1018; color: var(--paper); text-align: left; cursor: pointer; transition: .18s ease; }
.archetype-grid > button:hover { border-color: rgba(212,173,107,.45); transform: translateY(-2px); }
.archetype-grid > button.selected { border-color: var(--gold); background: rgba(212,173,107,.075); box-shadow: inset 0 0 0 1px rgba(212,173,107,.13); }
.archetype-grid > button > span { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); font: 600 17px var(--serif); }
.archetype-grid > button.selected > span { border-color: var(--gold); background: var(--gold); color: #111; }
.archetype-grid strong,.archetype-grid small { display: block; }
.archetype-grid strong { color: var(--paper-strong); font: 600 16px var(--serif); }
.archetype-grid small { margin-top: 5px; color: var(--gold); font-size: 9px; }
.archetype-grid p { margin: 13px 0 0; color: #a3adb1; font-size: 11px; line-height: 1.75; }
.archetype-grid > button > i { position: absolute; top: 12px; right: 12px; padding: 4px 7px; border: 1px solid var(--line); color: var(--muted); font: normal 8px var(--sans); }
.archetype-grid > button.selected > i { border-color: var(--gold); color: var(--gold); }
.quickstart-box { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 16px; padding: 20px; border: 1px solid rgba(212,173,107,.27); background: linear-gradient(90deg,rgba(212,173,107,.08),rgba(212,173,107,.025)); }
.quickstart-box strong { color: var(--paper-strong); font: 600 15px var(--serif); }
.quickstart-box p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.quickstart-box button { min-height: 44px; padding: 0 17px; border: 1px solid var(--gold); background: var(--gold); color: #111; font-size: 10px; font-weight: 700; white-space: nowrap; }
.master-module-choice { grid-template-columns: 26px 1fr !important; gap: 12px !important; align-items: center; margin-top: 14px; padding: 15px 17px; border: 1px solid var(--line); background: rgba(255,255,255,.018); cursor: pointer; }
.master-module-choice input { width: 20px !important; min-height: 20px !important; accent-color: var(--gold); }
.master-module-choice span strong,.master-module-choice span small { display: block; }
.master-module-choice span strong { color: var(--paper-strong); font: 600 13px var(--serif); }
.master-module-choice span small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.6; }

.builder-fields label > span,.builder-long-field > span,.story-question label > span,.custom-specialty label > span,.runtime-state label > span { color: var(--gold) !important; font-size: 10px !important; letter-spacing: .04em !important; }
.builder-fields input,.builder-long-field textarea,.story-question textarea,.custom-specialty input { min-height: 48px !important; padding: 12px 13px !important; font-size: 13px !important; line-height: 1.65 !important; }
.builder-long-field { display: grid; gap: 8px; margin-top: 20px; }
.suggestion-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.suggestion-row::before { align-self: center; margin-right: 3px; color: var(--muted); font-size: 8px; content: "不知道怎么写？点一个："; }
.suggestion-row button { padding: 7px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.018); color: #afb8ba; font-size: 9px; line-height: 1.4; cursor: pointer; }
.suggestion-row button:hover { border-color: var(--gold); color: var(--gold); }
.story-question { margin-top: 14px; padding: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.story-question:first-of-type { margin-top: 0; }
.story-question label { display: grid; gap: 9px; }
.compact-story-question { margin-top: 18px; }

.approach-presets { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.approach-presets button { display: grid; min-height: 112px; place-items: center; align-content: center; padding: 12px 8px; border: 1px solid var(--line); background: #0a1018; color: var(--muted); text-align: center; cursor: pointer; }
.approach-presets button:hover,.approach-presets button.selected { border-color: var(--gold); background: rgba(212,173,107,.07); }
.approach-presets button > span { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); font: 600 13px var(--serif); }
.approach-presets button.selected > span { background: var(--gold); color: #111; }
.approach-presets strong { color: var(--paper-strong); font: 600 12px var(--serif); }
.approach-presets small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.approach-result { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 20px; padding: 13px 15px; border: 1px solid var(--line); }
.approach-result strong { color: var(--paper-strong); font-size: 12px; }
.approach-result p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.approach-result > span { color: #77c7a5; font-size: 9px; }
.approach-ranking { display: grid; gap: 7px; margin-top: 10px; }
.approach-ranking button { display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: center; min-height: 65px; padding: 10px 14px; border: 1px solid var(--line); background: #090e16; color: var(--paper); text-align: left; cursor: pointer; }
.approach-ranking button:hover { border-color: rgba(212,173,107,.42); }
.approach-ranking button.pending { opacity: .6; border-style: dashed; }
.approach-ranking button > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); font-size: 9px; }
.approach-ranking strong { font: 600 13px var(--serif); }.approach-ranking strong b { color: var(--gold); }
.approach-ranking small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.approach-ranking i { color: var(--muted); font: normal 8px var(--sans); }

.specialty-counter { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding: 13px 15px; border: 1px solid var(--line); }
.specialty-counter span { color: var(--muted); font-size: 9px; }.specialty-counter strong { color: var(--gold); font: 600 16px var(--serif); }
.specialty-counter button { margin-left: auto; padding: 6px 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 8px; }
.specialty-option-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.specialty-option-grid button { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; min-height: 75px; align-content: center; padding: 12px 14px; border: 1px solid var(--line); background: #090e16; color: var(--paper); text-align: left; cursor: pointer; }
.specialty-option-grid button strong { font: 600 12px var(--serif); }.specialty-option-grid button small { grid-column: 1; color: var(--muted); font-size: 8px; line-height: 1.5; }.specialty-option-grid button > span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--gold); font-size: 15px; }
.specialty-option-grid button:hover:not(:disabled),.specialty-option-grid button.selected { border-color: var(--gold); background: rgba(212,173,107,.07); }
.specialty-option-grid button:disabled { opacity: .34; cursor: not-allowed; }
.custom-specialty { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; margin-top: 14px; padding: 14px; border: 1px dashed var(--line); }
.custom-specialty label { display: grid; gap: 7px; }.custom-specialty button { min-height: 48px; padding: 0 13px; border: 1px solid var(--line); background: transparent; color: var(--gold); font-size: 9px; }
.selected-specialties { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; margin-top: 13px; }
.selected-specialties > button { padding: 8px 10px; border: 1px solid rgba(102,190,153,.4); background: rgba(102,190,153,.06); color: #a9d8c4; font-size: 9px; }.selected-specialties > button span { margin-left: 7px; }.selected-specialties p { color: var(--muted); font-size: 9px; }

.budget-meter { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 54px; margin: 15px 0 10px; padding: 12px 15px; border: 1px solid var(--line); background: rgba(255,255,255,.018); color: #bbc3c4; font-size: 10px; line-height: 1.6; }
.budget-meter strong { color: var(--paper-strong); font: 600 15px var(--serif); }
.budget-meter.ready { border-color: rgba(102,190,153,.34); background: rgba(102,190,153,.05); }
.budget-meter.ready strong,.budget-meter.ready b { color: #86cfaf; }
.budget-meter.warning { border-color: rgba(212,173,107,.4); background: rgba(212,173,107,.055); }
.budget-meter.invalid { border-color: rgba(207,105,91,.42); background: rgba(207,105,91,.065); }
.budget-meter.invalid strong,.budget-meter.invalid b { color: #e0a097; }
.builder-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 11px; }
.builder-inline-actions button,.resource-catalog-toolbar button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.builder-inline-actions button:hover,.resource-catalog-toolbar button:hover { border-color: var(--gold); color: var(--gold); }
.builder-inline-actions small { margin-left: auto; color: var(--muted); font-size: 8px; line-height: 1.6; }

.attribute-point-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.attribute-point-card { display: grid; min-width: 0; padding: 13px 10px; border: 1px solid var(--line); background: #090e16; text-align: center; }
.attribute-point-card > span { color: var(--gold); font: 600 12px var(--serif); }
.attribute-point-card > small { min-height: 34px; margin-top: 5px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.attribute-controls { display: grid; grid-template-columns: 30px 1fr 30px; gap: 4px; align-items: center; margin-top: 10px; }
.attribute-controls button { width: 30px; height: 34px; border: 1px solid var(--line); background: transparent; color: var(--gold); cursor: pointer; }
.attribute-controls input { min-width: 0; min-height: 34px !important; padding: 4px !important; text-align: center; }
.attribute-point-card > b { margin-top: 8px; color: var(--paper-strong); font-size: 10px; }
.attribute-point-card > i { margin-top: 4px; color: var(--muted); font: normal 7px var(--sans); }

.skill-training-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.skill-training-card { display: grid; grid-template-columns: 1fr 118px; gap: 12px; align-items: center; min-height: 82px; padding: 12px 14px; border: 1px solid var(--line); background: #090e16; }
.skill-training-card strong { color: var(--paper-strong); font: 600 12px var(--serif); }
.skill-training-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.skill-training-card select { min-height: 38px !important; padding: 7px 8px !important; }

.identity-resource-panel { display: grid; gap: 14px; }
.identity-resource-panel + .identity-resource-panel { margin-top: 20px; }
.resource-section-heading { padding: 15px 17px; border-left: 2px solid var(--gold); background: rgba(212,173,107,.055); }
.resource-section-heading span { color: var(--gold); font-size: 8px; letter-spacing: .16em; }
.resource-section-heading h5 { margin: 6px 0 0; color: var(--paper-strong); font: 600 18px var(--serif); }
.resource-section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.lineage-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.lineage-choice-grid button { min-height: 52px; padding: 9px 11px; border: 1px solid var(--line); background: #090e16; color: #b8c0c2; text-align: left; cursor: pointer; }
.lineage-choice-grid button strong,.lineage-choice-grid button small { display: block; }
.lineage-choice-grid button strong { color: var(--paper-strong); font: 600 11px var(--serif); }
.lineage-choice-grid button small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.lineage-choice-grid button.selected { border-color: var(--gold); background: rgba(212,173,107,.07); }
.resource-catalog-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.resource-catalog-toolbar label { width: min(360px,100%); }
.resource-catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 560px; overflow: auto; padding-right: 4px; }
.resource-catalog-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; min-height: 104px; padding: 13px; border: 1px solid var(--line); background: #090e16; color: var(--paper); text-align: left; cursor: pointer; }
.resource-catalog-card:hover,.resource-catalog-card.selected { border-color: var(--gold); background: rgba(212,173,107,.055); }
.resource-catalog-card strong { color: var(--paper-strong); font: 600 12px var(--serif); }
.resource-catalog-card em { color: var(--gold); font: normal 8px var(--sans); }
.resource-catalog-card p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.65; }
.resource-catalog-card span { align-self: start; color: var(--gold); font-size: 14px; }
.selected-resource-list { display: grid; gap: 6px; }
.selected-resource-list > article { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; padding: 10px 12px; border: 1px solid rgba(102,190,153,.26); background: rgba(102,190,153,.035); }
.selected-resource-list strong { color: #bfe3d4; font-size: 10px; }
.selected-resource-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.selected-resource-list button { border: 0; background: transparent; color: #e0a097; cursor: pointer; }
.resource-warning { min-height: 18px; margin: 0; color: #d6b77d; font-size: 9px; line-height: 1.6; }
.class-trait-card { padding: 14px 16px; border: 1px solid rgba(212,173,107,.32); background: rgba(212,173,107,.045); color: #b9c1c2; font-size: 9px; line-height: 1.75; }
.class-trait-card strong { display: block; margin-bottom: 4px; color: var(--paper-strong); font: 600 13px var(--serif); }
.retained-skill-list { display: grid; gap: 8px; }
.retained-skill-row { display: grid; grid-template-columns: minmax(170px,.65fr) 110px minmax(0,1.35fr); gap: 8px; align-items: start; padding: 12px; border: 1px solid var(--line); background: #090e16; }
.retained-skill-row label > span { font-size: 8px !important; }
.noble-phantasm-card { display: grid; gap: 10px; padding: 15px; border: 1px solid rgba(212,173,107,.35); background: rgba(212,173,107,.035); }
.master-contract-panel { margin-top: 25px !important; padding-top: 25px; border-top: 1px solid var(--line); }

.review-stat-table { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.review-stat-table span { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.review-stat-table b { color: var(--paper-strong); }
.builder-checklist .warning { border-color: rgba(212,173,107,.4); }
.builder-checklist .warning > span,.builder-checklist .warning small { color: #d6b77d; }

.builder-review { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.builder-review article { min-height: 230px; padding: 20px; border: 1px solid var(--line); background: #0a1018; }
.builder-review article > p { margin: 0; color: var(--gold); font-size: 7px; letter-spacing: .15em; }
.builder-review h5 { margin: 0 0 15px; color: var(--paper-strong); font: 600 16px var(--serif); }.builder-review .review-identity h5 { margin: 7px 0 5px; font-size: 24px; }.builder-review .review-identity > strong,.builder-review .review-identity > small { display: block; }.builder-review .review-identity > strong { color: var(--gold); }.builder-review .review-identity > small { margin-top: 5px; color: var(--muted); }.builder-review blockquote { margin: 20px 0 0; padding-left: 12px; border-left: 1px solid var(--gold); color: #b9c0c1; font: 400 11px/1.8 var(--serif); }
.builder-review dl { margin: 0; }.builder-review dl div { padding: 10px 0; border-top: 1px solid var(--line); }.builder-review dt { color: var(--gold); font-size: 8px; }.builder-review dd { margin: 5px 0 0; color: #b6bec0; font-size: 9px; line-height: 1.65; }
.review-chips { display: flex; flex-wrap: wrap; gap: 6px; }.review-chips span { padding: 6px 8px; border: 1px solid var(--line); color: #bdc5c6; font-size: 8px; }.review-chips span b { color: var(--gold); }.review-chips.specialties span { border-color: rgba(102,190,153,.28); color: #a9d8c4; }
.builder-checklist { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin-top: 12px; }.builder-checklist > div { display: grid; grid-template-columns: 24px 1fr; gap: 8px; min-height: 65px; align-content: center; padding: 10px; border: 1px solid var(--line); }.builder-checklist > div > span { grid-row: 1 / 3; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }.builder-checklist strong { font-size: 8px; }.builder-checklist small { color: var(--muted); font-size: 7px; }.builder-checklist .ready { border-color: rgba(102,190,153,.28); }.builder-checklist .ready > span,.builder-checklist .ready small { color: #77c7a5; }.builder-checklist .missing { border-color: rgba(207,105,91,.35); }.builder-checklist .missing > span,.builder-checklist .missing small { color: #e0a097; }
.runtime-state { margin-top: 14px; padding: 0 16px 16px; border: 1px solid var(--line); }.runtime-state summary { padding: 14px 0; color: var(--muted); font-size: 9px; cursor: pointer; }.runtime-state > p { color: var(--muted); font-size: 9px; }.runtime-state > label { display: grid; gap: 7px; margin-top: 10px; }
.final-actions { margin-top: 14px; }.final-actions button:disabled { opacity: .4; cursor: not-allowed; }
.builder-navigation { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; min-height: 78px; padding: 14px 18px; border-top: 1px solid var(--line); background: #0b111a; }.builder-navigation > button { min-height: 43px; justify-self: start; padding: 0 15px; border: 1px solid var(--line); background: transparent; color: var(--muted-strong); font-size: 9px; }.builder-navigation > button:last-child { justify-self: end; border-color: var(--gold); background: var(--gold); color: #111; }.builder-navigation > button:disabled { opacity: .35; cursor: not-allowed; }.builder-navigation p { margin: 0; text-align: center; }.builder-navigation p span,.builder-navigation p small { display: block; }.builder-navigation p span { color: var(--paper-strong); font-size: 9px; }.builder-navigation p small { margin-top: 4px; color: var(--muted); font-size: 7px; }

@media(max-width:980px){.player-tools-grid{grid-template-columns:1fr}.character-editor,.result-inbox-card{grid-column:1;grid-row:auto}.approach-inputs{grid-template-columns:repeat(5,1fr)}}
@media(max-width:980px){.builder-progress{grid-template-columns:repeat(3,1fr)}.builder-progress button{border-bottom:1px solid var(--line)}.archetype-grid{grid-template-columns:1fr}.approach-presets{grid-template-columns:repeat(3,1fr)}.attribute-point-grid{grid-template-columns:repeat(4,1fr)}.skill-training-grid{grid-template-columns:repeat(2,1fr)}.builder-review{grid-template-columns:1fr}.builder-checklist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.player-tools{padding:30px 14px 86px}body.builder-mode .player-tools{padding:82px 10px 70px}.player-tools-heading{align-items:flex-start;flex-direction:column}.player-tools-heading>span{text-align:left}.player-form-grid.two-columns,.player-form-grid.three-columns{grid-template-columns:1fr}.approach-inputs{grid-template-columns:repeat(5,minmax(48px,1fr));overflow-x:auto}.player-character-actions{display:grid;grid-template-columns:1fr}.player-result-item{grid-template-columns:82px 1fr;padding:13px 12px}.player-result-time{grid-column:2}.resource-fields{grid-template-columns:repeat(3,1fr)!important}.builder-progress{display:flex;overflow-x:auto}.builder-progress button{min-width:160px}.builder-assurance{grid-template-columns:32px 1fr;margin:12px 12px 0}.builder-assurance>b{grid-column:2}.builder-step{padding:25px 14px}.quickstart-box,.approach-result,.resource-catalog-toolbar{align-items:flex-start;flex-direction:column}.quickstart-box button,.resource-catalog-toolbar label,.resource-catalog-toolbar button{width:100%}.approach-presets,.lineage-choice-grid{grid-template-columns:repeat(2,1fr)}.attribute-point-grid{grid-template-columns:repeat(2,1fr)}.skill-training-grid,.resource-catalog{grid-template-columns:1fr}.retained-skill-row{grid-template-columns:1fr}.specialty-option-grid{grid-template-columns:1fr}.custom-specialty{grid-template-columns:1fr}.builder-inline-actions small{width:100%;margin-left:0}.builder-checklist{grid-template-columns:1fr}.builder-navigation{grid-template-columns:1fr 1fr}.builder-navigation p{grid-column:1/-1;grid-row:1}.builder-navigation>button{grid-row:2}.suggestion-row button{width:100%;text-align:left}.resource-fields{grid-template-columns:1fr!important}}

/* PLAYER CLUE JOURNAL START — local-only; deliberately separate from projection/map styles. */
.clue-journal-view { min-height:calc(100vh - 64px); padding:clamp(24px,4vw,54px); background:radial-gradient(circle at 82% 0,rgba(74,92,80,.2),transparent 42%),linear-gradient(180deg,#0b1119,#070b11); }
.clue-journal-heading { width:min(1500px,100%); display:flex; justify-content:space-between; gap:28px; align-items:end; margin:0 auto 18px; }
.clue-journal-heading p,.clue-journal-form header span,.clue-journal-records > header span { margin:0 0 7px; color:#78bfa2; font-size:8px; letter-spacing:.18em; }
.clue-journal-heading h1 { margin:0; color:var(--paper-strong); font:700 clamp(30px,4.5vw,52px)/1.25 var(--serif); }
.clue-journal-heading > div > span { display:block; max-width:760px; margin-top:9px; color:#aeb6b7; font:400 10px/1.8 var(--serif); }
.clue-journal-toolbar { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.clue-journal-toolbar button,.clue-journal-form footer button,.clue-journal-entry-actions button { min-height:38px; padding:0 13px; border:1px solid var(--line); background:#0b121b; color:#b8c1c1; font-size:8px; cursor:pointer; }
.clue-journal-toolbar button:hover,.clue-journal-toolbar button:focus-visible,.clue-journal-form footer button:hover,.clue-journal-entry-actions button:hover { border-color:var(--gold); color:var(--paper-strong); }
.clue-journal-workspace { width:min(1500px,100%); display:grid; gap:16px; margin:0 auto; }
.clue-journal-form,.clue-journal-records { border:1px solid var(--line); background:var(--surface); }
.clue-journal-form > header,.clue-journal-records > header { min-height:75px; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line); }
.clue-journal-form h2,.clue-journal-records h2 { margin:0; color:var(--paper-strong); font:600 20px/1.35 var(--serif); }
.clue-journal-form > header small { max-width:340px; color:var(--muted); font-size:8px; line-height:1.6; text-align:right; }
.clue-journal-form-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.clue-journal-form-grid label { min-width:0; display:grid; grid-template-rows:auto 1fr; gap:8px; padding:16px; border-right:1px solid var(--line); }
.clue-journal-form-grid label:last-child { border-right:0; }
.clue-journal-form-grid label > span { color:var(--gold); font-size:8px; letter-spacing:.08em; }
.clue-journal-form-grid textarea { width:100%; min-height:128px; padding:11px 12px; border:1px solid var(--line); border-radius:0; outline:0; background:#090e16; color:var(--paper-strong); font:400 10px/1.7 var(--sans); resize:vertical; }
.clue-journal-form-grid textarea:focus { border-color:#78bfa2; box-shadow:0 0 0 2px rgba(120,191,162,.09); }
.clue-journal-form > footer { min-height:64px; display:flex; justify-content:space-between; gap:18px; align-items:center; padding:11px 16px; border-top:1px solid var(--line); }
.clue-journal-form > footer p { margin:0; color:var(--muted); font-size:8px; line-height:1.6; }
.clue-journal-form > footer p.error { color:#e0a097; }
.clue-journal-form > footer > div { display:flex; gap:8px; }
.clue-journal-form footer .clue-journal-primary { border-color:#78bfa2; background:#78bfa2; color:#08110d; font-weight:700; }
.clue-journal-records > header strong { color:#78bfa2; font:600 13px/1 var(--serif); }
.clue-journal-list { display:grid; gap:10px; padding:14px; }
.clue-journal-empty { margin:0; padding:34px 20px; border:1px dashed var(--line); color:var(--muted); font:400 10px/1.8 var(--serif); text-align:center; }
.clue-journal-entry { border:1px solid var(--line); background:#0a1018; }
.clue-journal-entry > header { min-height:43px; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line); }
.clue-journal-entry > header strong { color:#9ccdb9; font:600 10px/1 var(--serif); }
.clue-journal-entry > header time { color:var(--muted); font-size:7px; }
.clue-journal-entry-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; }
.clue-journal-entry-fields > div { min-width:0; min-height:130px; padding:14px; border-right:1px solid var(--line); }
.clue-journal-entry-fields > div:last-child { border-right:0; }
.clue-journal-entry-fields dt { color:var(--gold); font-size:7px; letter-spacing:.08em; }
.clue-journal-entry-fields dd { margin:9px 0 0; color:#bdc5c5; font:400 10px/1.78 var(--serif); white-space:pre-wrap; overflow-wrap:anywhere; }
.clue-journal-entry-fields dd.clue-journal-blank { color:#626e75; font-style:italic; }
.clue-journal-entry-actions { display:flex; justify-content:flex-end; gap:8px; padding:9px 11px; border-top:1px solid var(--line); }
.clue-journal-entry-actions button[data-action="delete"] { color:#d79c92; }
body.clue-journal-open .player-tools { display:none; }
@media(max-width:1080px){.clue-journal-form-grid,.clue-journal-entry-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.clue-journal-form-grid label:nth-child(2){border-right:0}.clue-journal-form-grid label:nth-child(-n+2){border-bottom:1px solid var(--line)}.clue-journal-entry-fields>div:nth-child(2){border-right:0}.clue-journal-entry-fields>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:700px){.clue-journal-view{padding:22px 10px 70px}.clue-journal-heading{align-items:flex-start;flex-direction:column}.clue-journal-toolbar{width:100%;justify-content:stretch}.clue-journal-toolbar button{flex:1}.clue-journal-form>header,.clue-journal-records>header{align-items:flex-start}.clue-journal-form>header small{display:none}.clue-journal-form-grid,.clue-journal-entry-fields{grid-template-columns:1fr}.clue-journal-form-grid label,.clue-journal-form-grid label:nth-child(2),.clue-journal-entry-fields>div,.clue-journal-entry-fields>div:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.clue-journal-form-grid label:last-child,.clue-journal-entry-fields>div:last-child{border-bottom:0}.clue-journal-form>footer{align-items:flex-start;flex-direction:column}.clue-journal-form>footer>div{width:100%}.clue-journal-form>footer button{flex:1}.clue-journal-entry-fields>div{min-height:0}.clue-journal-entry>header{align-items:flex-start;flex-direction:column}.player-view-tabs{max-width:190px;overflow-x:auto}.player-view-tabs button{flex:0 0 auto;padding:0 8px}}
/* PLAYER CLUE JOURNAL END */

/* Online room connection and all-member chat. */
.player-header { grid-template-columns:auto 1fr auto auto; }
.room-connection-status { min-height:30px; display:inline-flex; align-items:center; padding:2px 9px; border:1px solid rgba(212,173,107,.28); color:var(--gold-soft); font-size:11px; white-space:nowrap; }
.room-connection-status.state-online { border-color:rgba(102,190,153,.45); color:#a8ddc6; }.room-connection-status.state-offline,.room-connection-status.state-failed { border-color:rgba(220,98,105,.52); color:#efaaad; }
.campaign-chat-shell { position:fixed; z-index:190; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); font-family:var(--sans); }
.campaign-chat-toggle { min-height:46px; display:flex; gap:9px; align-items:center; margin-left:auto; padding:0 14px; border:1px solid var(--line-strong); background:#111925; color:var(--paper-strong); box-shadow:0 14px 38px rgba(0,0,0,.4); cursor:pointer; }.campaign-chat-toggle b { min-width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#a94b50;color:#fff;font-size:10px }
.campaign-chat-panel { width:min(410px,calc(100vw - 24px)); height:min(620px,calc(100svh - 90px)); display:grid; grid-template-rows:auto auto 1fr auto; margin-bottom:8px; border:1px solid var(--line-strong); background:#0a1018; box-shadow:0 24px 75px rgba(0,0,0,.62); }.campaign-chat-panel[hidden]{display:none}
.campaign-chat-panel>header{min-height:66px;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:11px 13px;border-bottom:1px solid var(--line);background:#101824}.campaign-chat-panel>header small,.campaign-chat-panel>header strong{display:block}.campaign-chat-panel>header small{color:var(--gold);font-size:10px;letter-spacing:.12em}.campaign-chat-panel>header strong{margin-top:3px;color:var(--paper-strong);font:600 16px var(--serif)}.campaign-chat-panel>header>span{color:var(--muted);font-size:11px}.campaign-chat-panel>header button{width:44px;min-width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.campaign-chat-earlier{min-height:40px;border:0;border-bottom:1px solid var(--line);background:#0c131d;color:var(--muted);font-size:11px;cursor:pointer}.campaign-chat-messages{min-height:0;display:flex;flex-direction:column;gap:8px;overflow:auto;margin:0;padding:12px;list-style:none}.campaign-chat-messages li{position:relative;padding:10px 11px;border:1px solid var(--line);background:#0e1620}.campaign-chat-messages li>header{display:flex;justify-content:space-between;gap:12px}.campaign-chat-messages li strong{color:var(--gold-soft);font-size:12px}.campaign-chat-messages li time{color:var(--muted);font-size:10px}.campaign-chat-messages li p{margin:7px 0 0;color:#c8cdca;font-size:13px!important;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.campaign-chat-messages li.deleted p{color:#737e83;font-style:italic}.campaign-chat-empty{color:var(--muted);text-align:center}
.campaign-chat-panel form{padding:10px;border-top:1px solid var(--line);background:#0d141e}.campaign-chat-panel textarea{width:100%;min-height:66px;padding:9px 10px;border:1px solid var(--line);border-radius:0;outline:0;resize:none;background:#070c12;color:var(--paper-strong);font:400 13px/1.55 var(--sans)}.campaign-chat-panel textarea:focus{border-color:var(--gold)}.campaign-chat-panel form footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:7px}.campaign-chat-panel form footer small{color:var(--muted);font-size:10px}.campaign-chat-panel form footer button{min-height:40px;padding:0 15px;border:1px solid var(--gold);background:var(--gold);color:#15120c;font-size:12px;font-weight:700;cursor:pointer}.campaign-chat-panel form>p{margin:7px 0 0;color:#efaaad;font-size:11px!important}body.room-offline .campaign-chat-toggle{border-color:rgba(220,98,105,.5)}
@media(max-width:900px){.player-header .room-connection-status{position:fixed;z-index:21;top:70px;right:8px;background:rgba(7,11,17,.94)}}
@media(max-width:760px){.campaign-chat-shell{right:8px;bottom:8px}.campaign-chat-panel{height:min(570px,calc(100svh - 85px))}}
@media(max-width:760px){.player-live-state{grid-template-columns:1fr}.player-live-state ul{grid-template-columns:1fr}}

/* Online room context, guest-account handoff, and the first-entry guide. */
.player-room-context,.player-standalone-cta { position:fixed; z-index:19; left:0; right:0; top:64px; min-height:48px; display:flex; align-items:center; gap:10px; padding:6px 22px; border-bottom:1px solid var(--line); background:rgba(10,16,24,.97); box-shadow:0 10px 24px rgba(0,0,0,.2); }
.player-room-context { border-bottom-color:rgba(105,174,181,.3); }
.player-standalone-cta { border-bottom-color:rgba(212,173,107,.3); }
.player-room-context .room-context-copy { min-width:0; display:grid; gap:2px; margin-right:auto; }
.player-room-context .room-context-copy > span,.player-standalone-cta span { color:var(--gold); font-size:7px; letter-spacing:.16em; }
.player-room-context .room-context-copy > strong,.player-standalone-cta strong { overflow:hidden; color:var(--paper-strong); font:600 12px/1.2 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.player-room-context .room-context-copy > small,.player-standalone-cta small { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.player-room-context > button,.player-room-context > a,.player-standalone-cta > a { flex:0 0 auto; min-height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border:1px solid var(--line); background:transparent; color:#b5c0c1; font-size:8px; cursor:pointer; }
.player-room-context > button:hover,.player-room-context > a:hover,.player-standalone-cta > a:hover { border-color:var(--gold); color:var(--paper-strong); }
.player-room-context > button:disabled { cursor:wait; opacity:.45; }
.player-standalone-cta > div { min-width:0; display:grid; gap:2px; margin-right:auto; }
body.online-room-mode .player-stage,body.standalone-mode .player-stage { padding-top:112px; }
body.online-room-mode .curtain,body.standalone-mode .curtain { min-height:calc(100vh - 112px); }
body.online-room-mode .player-map-view,body.standalone-mode .player-map-view { min-height:calc(100vh - 112px); }
.player-account-bind { max-width:1420px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; align-items:center; margin:0 auto 18px; padding:16px 18px; border:1px solid rgba(105,174,181,.36); background:linear-gradient(100deg,rgba(105,174,181,.1),rgba(8,14,21,.92)); }
.player-account-bind > header { min-width:0; }.player-account-bind > header span { display:block; margin-bottom:5px; color:#86c7c7; font-size:7px; letter-spacing:.16em; }.player-account-bind > header h3 { margin:0; color:var(--paper-strong); font:600 17px/1.35 var(--serif); }.player-account-bind > header small { display:block; max-width:620px; margin-top:5px; color:var(--muted); font-size:8px; line-height:1.6; }
#player-account-bind-signed-in { display:flex; gap:10px; align-items:center; }.player-account-bind p { margin:0; }.player-account-bind button { min-height:38px; padding:0 12px; border:1px solid #78bdbd; background:#78bdbd; color:#071111; font-size:9px; font-weight:700; cursor:pointer; }.player-account-bind button:disabled { cursor:wait; opacity:.55; }
#player-account-bind-form { display:flex; gap:8px; align-items:end; }.player-account-bind label { display:grid; gap:5px; }.player-account-bind label span { color:var(--muted); font-size:7px; }.player-account-bind input { width:140px; min-height:38px; padding:0 9px; border:1px solid var(--line); background:#070d13; color:var(--paper-strong); outline:0; font-size:10px; }.player-account-bind input:focus { border-color:#78bdbd; }.player-account-bind-status { grid-column:1 / -1; color:var(--muted); font-size:8px; line-height:1.6; }.player-account-bind-status.success { color:#99d9c4; }.player-account-bind-status.error { color:#e8a2a4; }
.player-room-welcome { position:fixed; inset:124px 0 auto; width:min(560px,calc(100vw - 28px)); max-height:calc(100svh - 142px); margin:0 auto; padding:0; overflow:auto; border:1px solid rgba(212,173,107,.52); background:#0a111a; color:var(--paper); box-shadow:0 30px 100px rgba(0,0,0,.7); }.player-room-welcome::backdrop { background:rgba(2,5,9,.72); backdrop-filter:blur(4px); }.player-room-welcome-card > header { display:flex; justify-content:space-between; gap:14px; align-items:center; min-height:54px; padding:0 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(212,173,107,.12),transparent); }.player-room-welcome-card > header span { color:var(--gold); font-size:8px; letter-spacing:.18em; }.player-room-welcome-card > header strong { color:#d5dfdf; font-size:9px; }.player-room-welcome-card > section { padding:28px 28px 30px; }.player-room-welcome-card .welcome-kicker { margin:0 0 10px; color:#82c6c6; font-size:8px; letter-spacing:.16em; }.player-room-welcome-card h2 { margin:0; color:var(--paper-strong); font:650 27px/1.35 var(--serif); }.player-room-welcome-card section > p:not(.welcome-kicker):not(.player-welcome-status) { margin:13px 0 0; color:#aeb8b9; font:400 11px/1.8 var(--serif); }.player-room-welcome-card label { display:grid; gap:7px; margin-top:20px; }.player-room-welcome-card label span { color:var(--gold); font-size:8px; letter-spacing:.09em; }.player-room-welcome-card input { min-height:44px; padding:0 12px; border:1px solid var(--line); background:#070c12; color:var(--paper-strong); outline:0; font:500 13px var(--sans); }.player-room-welcome-card input:focus { border-color:var(--gold); }.player-welcome-primary,.player-welcome-actions > button { min-height:42px; margin-top:18px; padding:0 14px; border:1px solid var(--line-strong); background:#111b25; color:#ccd5d4; font-size:10px; cursor:pointer; }.player-welcome-primary { border-color:var(--gold); background:var(--gold); color:#15110b; font-weight:700; }.player-welcome-actions { display:flex; flex-wrap:wrap; gap:8px; }.player-welcome-actions > button { margin-top:18px; }.player-welcome-status { min-height:18px; margin:9px 0 0; color:#e7abab; font-size:9px; line-height:1.55; }
@media(max-width:900px){.player-room-context,.player-standalone-cta{padding:6px 12px}.player-room-context .room-context-copy>small{max-width:50vw}.player-room-context .room-connection-status{display:none}#player-account-bind-form{grid-template-columns:1fr 1fr}.player-account-bind input{width:100%}.player-account-bind button{grid-column:1 / -1}}
@media(max-width:660px){.player-room-context,.player-standalone-cta{min-height:58px;gap:6px;padding:7px 8px}.player-room-context .room-context-copy>small{max-width:44vw}.player-room-context>a,.player-room-context>button,.player-standalone-cta>a{min-height:32px;padding:0 7px;font-size:7px}.player-standalone-cta small{display:none}body.online-room-mode .player-stage,body.standalone-mode .player-stage{padding-top:122px}body.online-room-mode .curtain,body.standalone-mode .curtain,body.online-room-mode .player-map-view,body.standalone-mode .player-map-view{min-height:calc(100vh - 122px)}.player-account-bind{grid-template-columns:1fr;padding:15px 14px}.player-account-bind>header small{max-width:none}#player-account-bind-signed-in{align-items:flex-start;flex-direction:column}#player-account-bind-form{width:100%;grid-template-columns:1fr}.player-account-bind-status{grid-column:auto}.player-room-welcome{inset:132px 0 auto;max-height:calc(100svh - 142px)}.player-room-welcome-card>section{padding:24px 19px 22px}.player-room-welcome-card h2{font-size:24px}.player-welcome-actions{display:grid;grid-template-columns:1fr}.player-welcome-actions>button{width:100%}}

/* Inline player room: the same campaign data is presented here and in the
   keeper console; this page never creates a second chat or character store. */
.player-view-tabs button { position:relative; }
.player-view-tabs button b { min-width:15px; height:15px; display:inline-grid; place-items:center; margin-left:3px; padding:0 3px; border-radius:999px; background:#a94b50; color:#fff; font:700 7px/1 var(--sans); vertical-align:middle; }
.player-room-view {
  position:relative;
  height:calc(100vh - 64px);
  height:calc(100dvh - 64px);
  min-height:0;
  display:grid;
  grid-template-rows:64px minmax(0,1fr);
  overflow:hidden;
  padding:0;
  background:radial-gradient(circle at 86% 0,rgba(91,133,139,.16),transparent 38%),radial-gradient(circle at 13% 5%,rgba(212,173,107,.08),transparent 34%),linear-gradient(180deg,#0b111a,#070b11);
}
body.player-room-open { overflow:hidden; }
body.player-room-open .player-room-context,body.player-room-open .player-standalone-cta { display:none; }
body.online-room-mode.player-room-open .player-stage,body.standalone-mode.player-room-open .player-stage { min-height:100dvh; padding-top:64px; }
body.online-room-mode.player-room-open .player-room-view,body.standalone-mode.player-room-open .player-room-view { height:calc(100vh - 64px); height:calc(100dvh - 64px); }

.player-room-toolbar { min-width:0; display:flex; gap:16px; align-items:center; justify-content:space-between; padding:8px 14px 8px 18px; border-bottom:1px solid var(--line); background:rgba(10,16,24,.94); box-shadow:0 8px 24px rgba(0,0,0,.16); }
.player-room-toolbar-title { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:baseline; }
.player-room-toolbar-title>span { grid-column:1 / -1; overflow:hidden; color:var(--gold); font-size:7px; letter-spacing:.16em; text-overflow:ellipsis; white-space:nowrap; }
.player-room-toolbar-title h1 { min-width:0; overflow:hidden; margin:1px 0 0; color:var(--paper-strong); font:650 18px/1.3 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.player-room-toolbar-title small { min-width:0; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.player-room-toolbar-actions { min-width:0; display:flex; flex:0 1 auto; gap:8px; align-items:center; justify-content:flex-end; }
.player-room-online-summary,.player-room-toolbar-lifecycle { min-width:0; min-height:30px; display:inline-flex; gap:6px; align-items:center; padding:0 9px; border:1px solid var(--line); color:#aeb9bc; font-size:8px; white-space:nowrap; }
.player-room-online-summary b { min-width:0; overflow:hidden; max-width:160px; font-weight:600; text-overflow:ellipsis; }
.player-room-online-summary i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#73c6a2; box-shadow:0 0 0 3px rgba(115,198,162,.1); }
.player-room-toolbar-lifecycle.state-active { border-color:rgba(96,177,132,.42); color:#9bdcba; }
.player-room-toolbar-lifecycle.state-paused { border-color:rgba(213,173,99,.48); color:#f0d18d; }
.player-room-toolbar-lifecycle.state-ended,.player-room-toolbar-lifecycle.state-archived { border-color:rgba(202,103,110,.5); color:#efb0b3; }
.player-room-toolbar-host { min-width:0; min-height:30px; display:inline-flex; overflow:hidden; align-items:center; justify-content:center; padding:0 9px; border:1px solid rgba(212,173,107,.46); background:rgba(212,173,107,.06); color:#dec58e; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.player-room-toolbar-host[hidden] { display:none; }
.player-room-toolbar-host:hover,.player-room-toolbar-host:focus-visible { border-color:var(--gold); background:rgba(212,173,107,.13); color:var(--paper-strong); }
.player-room-drawer-open { min-width:44px; min-height:44px; display:inline-flex; gap:7px; align-items:center; justify-content:center; padding:0 11px; border:1px solid rgba(212,173,107,.46); background:rgba(212,173,107,.07); color:#e2cfaa; cursor:pointer; }
.player-room-drawer-open:hover,.player-room-drawer-open:focus-visible { border-color:var(--gold); background:rgba(212,173,107,.14); color:var(--paper-strong); }
.player-room-drawer-open b { overflow:hidden; max-width:9em; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }

.player-room-workspace { min-width:0; min-height:0; width:100%; max-width:none; height:100%; display:block; margin:0; padding:12px; }
.player-room-panel { min-width:0; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,rgba(17,26,37,.96),rgba(9,15,23,.96)); }
.player-room-panel>header { min-width:0; min-height:58px; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 13px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }
.player-room-panel>header>div { min-width:0; }
.player-room-panel>header span { color:var(--gold); font-size:7px; letter-spacing:.15em; }
.player-room-panel>header h2 { overflow:hidden; margin:3px 0 0; color:var(--paper-strong); font:600 16px/1.3 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.player-room-panel>header>strong { min-width:0; max-width:48%; flex:0 1 auto; overflow:hidden; color:#8fc8cb; font:600 10px/1.4 var(--sans); text-overflow:ellipsis; white-space:nowrap; }
.player-room-chat-panel { width:100%; height:100%; min-height:0; }
.player-room-chat { width:100%; height:100%; min-width:0; min-height:0; }
.player-room-chat.campaign-chat-shell { position:static; right:auto; bottom:auto; font-family:var(--sans); }
.player-room-chat .campaign-chat-toggle { display:none; }
.player-room-chat .campaign-chat-panel { width:100%; margin:0; border:0; background:transparent; box-shadow:none; }
body.player-page.player-room-open .player-room-chat .campaign-chat-panel--inline { height:100%; min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto; }
body.player-page.player-room-open .player-room-chat .campaign-chat-header { background:rgba(8,14,21,.56); }
body.player-page.player-room-open .player-room-chat .campaign-chat-messages { min-height:0; background:rgba(0,0,0,.08); overflow-y:auto; overscroll-behavior:contain; }
body.player-page.player-room-open .player-room-chat .campaign-chat-composer { background:rgba(8,14,21,.94); }

.player-room-drawer-rail { position:absolute; z-index:8; right:0; top:50%; width:30px; min-width:30px!important; height:76px; min-height:76px!important; display:grid; place-items:center; padding:0; transform:translateY(-50%); border:1px solid rgba(212,173,107,.48); border-right:0; border-radius:10px 0 0 10px; background:rgba(16,24,35,.96); color:var(--gold); box-shadow:-8px 10px 26px rgba(0,0,0,.3); cursor:pointer; transition:opacity .18s,transform .18s,visibility .18s; }
.player-room-drawer-rail:hover,.player-room-drawer-rail:focus-visible { width:34px; min-width:34px!important; background:#172230; color:var(--paper-strong); }
.player-room-drawer-rail span { font:500 22px/1 var(--serif); }
.player-room-view.drawer-open .player-room-drawer-rail { visibility:hidden; opacity:0; transform:translate(100%,-50%); pointer-events:none; }
.player-room-drawer-backdrop { position:absolute; z-index:9; inset:0; width:100%; min-width:0!important; height:100%; min-height:0!important; padding:0; border:0; background:rgba(2,6,10,.42); opacity:0; visibility:hidden; pointer-events:none; cursor:default; transition:opacity .2s,visibility 0s linear .2s; }
.player-room-sidebar { position:absolute; z-index:10; inset:0 0 0 auto; width:min(430px,calc(100% - 28px)); min-width:0; height:100%; display:grid; grid-template-rows:auto auto auto minmax(0,1fr); overflow:hidden; transform:translateX(calc(100% + 18px)); border-left:1px solid rgba(212,173,107,.44); background:linear-gradient(180deg,#101925,#09101a); color:var(--paper); box-shadow:-24px 0 70px rgba(0,0,0,.58); visibility:hidden; pointer-events:none; transition:transform .24s ease,visibility 0s linear .24s; }
.player-room-view.drawer-open .player-room-drawer-backdrop { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.player-room-view.drawer-open .player-room-sidebar { transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
.player-room-sidebar-header { min-width:0; min-height:64px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:9px 10px 9px 15px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(212,173,107,.1),transparent); }
.player-room-sidebar-header>div { min-width:0; }
.player-room-sidebar-header>div>span { display:block; overflow:hidden; color:var(--gold); font-size:7px; letter-spacing:.16em; text-overflow:ellipsis; white-space:nowrap; }
.player-room-sidebar-header h2 { overflow:hidden; margin:3px 0 0; color:var(--paper-strong); font:650 19px/1.3 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.player-room-sidebar-pin,.player-room-sidebar-close { min-width:44px!important; min-height:44px!important; padding:0; border:1px solid var(--line); background:rgba(255,255,255,.025); color:#aeb8bb; cursor:pointer; }
.player-room-sidebar-pin { display:inline-flex; gap:5px; align-items:center; justify-content:center; padding:0 8px; }
.player-room-sidebar-pin b { font-size:8px; white-space:nowrap; }
.player-room-sidebar-pin[aria-pressed="true"] { border-color:var(--gold); background:rgba(212,173,107,.13); color:#ffe5af; }
.player-room-sidebar-close { font-size:20px; }
.player-room-sidebar-pin:hover,.player-room-sidebar-close:hover { border-color:var(--gold); color:var(--paper-strong); }
.player-room-sidebar-search { min-width:0; min-height:48px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:center; margin:11px 12px 5px; padding:0 10px; border:1px solid var(--line); background:#070d14; color:#819098; }
.player-room-sidebar-search input { width:100%; min-width:0; min-height:44px!important; padding:0; border:0; outline:0; background:transparent; color:var(--paper-strong); font-size:10px; }
.player-room-sidebar-search input::placeholder { color:#718087; }
.player-room-sidebar-search:focus-within { border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,173,107,.07); }
.player-room-sidebar-search-status { min-width:0; overflow:hidden; margin:0 14px 9px; color:#76848a; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.player-room-sidebar-scroll { min-width:0; min-height:0; overflow-x:hidden; overflow-y:auto; padding:0 10px max(16px,env(safe-area-inset-bottom)); scrollbar-gutter:stable; overscroll-behavior:contain; }
.player-room-sidebar-scroll>.player-room-panel { margin:0 0 10px; }

.player-room-lifecycle-card { min-width:0; display:grid; gap:9px; padding:13px; background:rgba(8,14,21,.68); }
.player-room-lifecycle-card small { color:var(--muted); font-size:8px; line-height:1.65; overflow-wrap:anywhere; }
.player-room-lifecycle-state { display:block; }
.player-room-lifecycle-state.state-active { color:#9dd7bd; }
.player-room-lifecycle-state.state-paused { color:#efd18c; }
.player-room-lifecycle-state.state-ended,.player-room-lifecycle-state.state-archived { color:#dfa5a7; }
.player-room-write-notice { min-width:0; margin:0; padding:10px 11px; border:1px solid rgba(230,177,102,.4); border-left:3px solid #d9ad68; background:rgba(212,173,107,.08); color:#d8cfbb; font:400 10px/1.7 var(--serif); overflow-wrap:anywhere; }
.player-room-member-list,.player-room-character-list { min-width:0; display:grid; gap:0; margin:0; padding:0; list-style:none; }
.player-room-member { min-width:0; min-height:64px; display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid rgba(220,204,170,.11); }
.player-room-member:last-child { border-bottom:0; }
.player-room-member-mark { position:relative; width:36px; height:36px; display:grid; overflow:hidden; place-items:center; border:1px solid rgba(212,173,107,.5); border-radius:50%; background:#151818; color:var(--gold-soft,#e5c98b); font:600 14px/1 var(--serif); }
.player-room-member-mark img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.player-room-member.online .player-room-member-mark { border-color:rgba(105,174,181,.7); color:#9bd9db; box-shadow:0 0 0 3px rgba(105,174,181,.08); }
.player-room-member>div { min-width:0; }
.player-room-member strong,.player-room-member small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-room-member strong { color:var(--paper-strong); font:600 11px/1.35 var(--serif); }
.player-room-member small { margin-top:3px; color:var(--muted); font-size:7px; }
.player-room-member>i { overflow:hidden; max-width:5em; color:#7c8990; font-size:7px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.player-room-member.online>i { color:#83d5bb; }
.player-room-character { min-width:0; padding:11px 13px; border-bottom:1px solid rgba(220,204,170,.11); }
.player-room-character:last-child { border-bottom:0; }
.player-room-character>div { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 8px; align-items:center; }
.player-room-character strong { min-width:0; overflow:hidden; color:var(--paper-strong); font:600 13px/1.4 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.player-room-character small { grid-column:1 / -1; overflow:hidden; color:#8ca9aa; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.player-room-character p { grid-column:1 / -1; display:-webkit-box; overflow:hidden; margin:2px 0 0; color:#afbabc; font:400 9px/1.65 var(--serif); overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.player-room-character.state-approved { box-shadow:inset 3px 0 0 #64ae85; }
.player-room-character.state-changes { box-shadow:inset 3px 0 0 #c46c71; }
.player-room-character.state-pending { box-shadow:inset 3px 0 0 #d6ad62; }
.player-room-status-pill { min-width:0; min-height:22px; max-width:100%; display:inline-flex; overflow:hidden; justify-content:center; align-items:center; padding:3px 7px; border:1px solid rgba(148,159,165,.35); color:#b9c0c2; font-size:7px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.player-room-status-pill.state-approved { border-color:rgba(96,177,132,.57); color:#9bdcba; background:rgba(96,177,132,.08); }
.player-room-status-pill.state-changes { border-color:rgba(202,103,110,.58); color:#efb0b3; background:rgba(202,103,110,.08); }
.player-room-status-pill.state-pending { border-color:rgba(213,173,99,.58); color:#f0d18d; background:rgba(213,173,99,.08); }
.player-room-own-review { min-width:0; display:grid; gap:6px; padding:14px; }
.player-room-own-review strong { min-width:0; overflow:hidden; color:var(--paper-strong); font:600 16px/1.4 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.player-room-own-review small { min-width:0; color:#9dabaf; font-size:8px; line-height:1.6; overflow-wrap:anywhere; }
.player-room-own-review p { min-width:0; margin:5px 0 0; padding:10px 11px; border-left:2px solid #cf7276; background:rgba(201,96,102,.07); color:#e8c5c6; font:400 9px/1.7 var(--serif); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.player-room-empty { padding:22px 13px; color:var(--muted); font:400 10px/1.7 var(--serif); text-align:center; overflow-wrap:anywhere; }
.player-room-settings-actions { min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; }
.player-room-settings-actions button,.player-room-settings-actions a { min-width:0; min-height:44px; display:flex; overflow:hidden; align-items:center; justify-content:center; padding:0 10px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:#b7c0c1; font-size:8px; text-align:center; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.player-room-settings-actions button:hover,.player-room-settings-actions a:hover { border-color:var(--gold); color:var(--paper-strong); }

@media(max-width:700px){
  .player-room-view { grid-template-rows:58px minmax(0,1fr); }
  .player-room-toolbar { gap:8px; padding:7px 8px 7px 11px; }
  .player-room-toolbar-title>span,.player-room-toolbar-title small,.player-room-online-summary { display:none; }
  .player-room-toolbar-title { display:block; }
  .player-room-toolbar-title h1 { max-width:42vw; margin:0; font-size:16px; }
  .player-room-toolbar-actions { gap:6px; }
  .player-room-toolbar-lifecycle { max-width:6.5em; overflow:hidden; padding:0 7px; text-overflow:ellipsis; }
  .player-room-workspace { padding:0; }
  .player-room-chat-panel { border:0; }
  body.player-page.player-room-open .player-room-chat .campaign-chat-panel--inline { height:100%; min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto; }
  .player-room-sidebar { width:100%; border-left:0; }
  .player-room-drawer-backdrop { background:rgba(2,6,10,.68); }
  .player-room-drawer-rail { width:32px; min-width:32px!important; height:64px; min-height:64px!important; }
  .player-room-sidebar-scroll { padding-inline:8px; }
  .player-view-tabs { max-width:236px; }
  .player-view-tabs button { padding:0 7px; }
  .player-view-tabs button b { min-width:13px;height:13px;font-size:6px; }
}
@media(max-width:430px){
  .player-room-drawer-open { width:44px; padding:0; }
  .player-room-drawer-open b,.player-room-sidebar-pin b { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .player-room-toolbar-title h1 { max-width:38vw; }
  .player-room-settings-actions { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .player-room-sidebar,.player-room-drawer-backdrop,.player-room-drawer-rail { transition:none; }
}

/* The room is a focused workspace.  Keep the legacy character desk and the
   first-entry dialog available, but stow them while the room tab is active so
   they cannot visually compete with the shared conversation. */
body.player-room-open .player-tools { display:none; }
body.player-room-open .player-room-welcome[open] { display:none; }
.player-room-builder-link { justify-self:start; min-height:38px; margin-top:5px; padding:0 12px; border:1px solid rgba(212,173,107,.62); background:rgba(212,173,107,.08); color:var(--gold-soft); font-size:9px; font-weight:700; cursor:pointer; }
.player-room-builder-link:hover { border-color:var(--gold); background:rgba(212,173,107,.16); color:var(--paper-strong); }

/* Safety and accessibility upgrade: readable type, predictable keyboard tabs,
   and a no-explanation-required safety surface that works at the table. */
.skip-link { position:fixed; z-index:1000; left:12px; top:8px; min-height:44px; display:flex; align-items:center; padding:0 15px; transform:translateY(-150%); background:var(--gold); color:#17120b; font-size:.875rem; font-weight:700; }
.skip-link:focus { transform:none; }
.player-page { font-size:.875rem; }
.player-page :is(p,dd,li,input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size:.875rem !important; }
.player-page :is(small,time,dt,label>span,.section-kicker,.player-view-tabs button,.builder-progress button,.player-tool-card>header span,.player-tool-card>header small) { font-size:.75rem !important; }
.player-page :is(
  .player-map-heading>div>span,
  .player-map-detail>span,
  .player-map-detail-copy,
  .player-route-note,
  .player-tools-heading>span,
  .player-local-note,
  .builder-step-heading>span,
  .player-room-view-heading>div:first-child>span,
  .player-room-empty
) { font-size:.875rem !important; }
.player-page :is(
  .curtain>div>span,
  .handout-copy>p:first-child,
  .handout-prompt>span,
  .player-map-counts span,
  .player-map-legend,
  .player-map-detail>p,
  .player-map-tags span,
  .player-map-presence-panel>header,
  .player-map-intel>header,
  .player-map-scenes>header,
  .projection-note,
  .player-tools-heading>p,
  .builder-step-heading>p,
  .player-room-panel>header span,
  .player-room-lifecycle-card>span,
  .player-room-status-pill
) { font-size:.75rem !important; }
.player-page :is(button,summary,input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select) { min-height:44px; }
.player-page textarea { min-height:88px; }
.player-map-hotspot { width:44px !important; height:44px !important; }

.player-safety-dialog { width:min(720px,calc(100% - 24px)); max-height:min(90svh,820px); padding:0; overflow:auto; border:1px solid rgba(212,173,107,.58); background:#0b121b; color:var(--paper); box-shadow:0 34px 110px rgba(0,0,0,.75); }
.player-safety-dialog::backdrop { background:rgba(2,5,9,.8); backdrop-filter:blur(5px); }
.player-safety-card { display:grid; gap:18px; padding:22px; }
.player-safety-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.player-safety-card>header span { display:block; color:var(--gold); font-size:.75rem; letter-spacing:.14em; }
.player-safety-card h2 { margin:5px 0 0; color:var(--paper-strong); font:650 1.75rem/1.3 var(--serif); }
.player-safety-card>p { margin:0; color:#b7c0c2; line-height:1.75; }
.player-safety-close { width:44px; flex:0 0 44px; padding:0; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:1.4rem; cursor:pointer; }
.player-safety-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.player-safety-actions button { display:grid; gap:5px; min-height:82px; padding:12px; border:1px solid rgba(212,173,107,.38); background:rgba(212,173,107,.055); color:var(--paper-strong); text-align:left; cursor:pointer; }
.player-safety-actions button:hover,.player-safety-actions button:focus-visible { border-color:var(--gold); background:rgba(212,173,107,.13); }
.player-safety-actions strong { font:650 1rem/1.3 var(--serif); }
.player-safety-actions small { color:var(--muted); line-height:1.5; }
.player-boundaries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:16px; border:1px solid var(--line); }
.player-boundaries legend { padding:0 8px; color:var(--gold); font-size:.875rem; font-weight:700; }
.player-boundaries label { display:grid; gap:6px; }
.player-boundaries label:nth-of-type(3),.player-boundaries>button { grid-column:1 / -1; }
.player-boundaries textarea { width:100%; padding:10px 11px; border:1px solid var(--line); background:#070c12; color:var(--paper-strong); resize:vertical; }
.player-boundaries>button { border:1px solid var(--gold); background:var(--gold); color:#17120b; font-weight:700; cursor:pointer; }
#player-safety-status { min-height:24px; padding:8px 10px; border-left:3px solid var(--line-strong); background:rgba(255,255,255,.025); }
#player-safety-status.success { border-color:#76c79f; color:#a9dfc4; }
#player-safety-status.error { border-color:#db767c; color:#efb0b3; }

@media(max-width:620px){
  .player-safety-card { padding:17px; }
  .player-safety-actions,.player-boundaries { grid-template-columns:1fr; }
  .player-boundaries label:nth-of-type(3),.player-boundaries>button { grid-column:1; }
}

/* Large reading type should never make the fixed navigation or the legacy
   desk wider than a tablet viewport.  These compact controls remain 44px
   touch targets while the room content itself keeps the requested scale. */
@media(max-width:900px){
  .player-header { grid-template-columns:44px minmax(0,1fr) auto auto; gap:6px; padding-inline:8px; }
  .player-header a strong { display:none; }
  .player-view-tabs { min-width:0; width:100%; max-width:100%; justify-self:stretch; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .player-view-tabs::-webkit-scrollbar { display:none; }
  .player-view-tabs button { flex:1 1 0; min-width:0 !important; min-height:44px !important; padding-inline:6px; overflow:hidden; font-size:min(.875rem,14px) !important; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
  .player-header-tools { gap:4px; }
  .player-header-tools > button,.player-header-tools .reading-size-toggle { width:44px; min-width:44px !important; height:44px; min-height:44px !important; padding:0 !important; font-size:min(.875rem,14px) !important; }
  .player-header-tools > button span { display:inline; }
  .player-header-tools > button b { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .player-room-context,.player-standalone-cta { min-height:48px; gap:7px; padding:6px 10px; }
  .player-room-context .room-context-copy>small,.player-standalone-cta small { display:none; }
  .player-room-context .room-context-copy>strong,.player-standalone-cta strong { font-size:min(.875rem,14px) !important; }
  .player-room-context .room-context-copy>span,.player-standalone-cta span { font-size:min(.75rem,11px) !important; }
  .player-room-context>a,.player-room-context>button,.player-standalone-cta>a { min-width:44px !important; min-height:36px !important; padding-inline:8px; font-size:min(.75rem,12px) !important; }
  .player-account-bind { grid-template-columns:1fr; align-items:start; }
  #player-account-bind-form { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; }
  #player-account-bind-form label { min-width:0; }
  #player-account-bind-form button { grid-column:1 / -1; min-width:0 !important; }
  .quickstart-box { align-items:flex-start; flex-direction:column; gap:14px; }
  .quickstart-box button { width:100%; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
}