:root{--bg:#15151d;--panel:#20202b;--ink:#f5f0e8;--muted:#aaa6b7;--gold:#e8bd72;--line:#3b3948}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#30263a 0,#191821 48%,#111117 100%);color:var(--ink);font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}button,select,input{font:inherit}button{cursor:pointer;border:0;border-radius:12px;padding:11px 14px;font-weight:750;transition:.15s}button:hover{filter:brightness(1.08)}button:disabled{opacity:.35;cursor:not-allowed}.app{max-width:1100px;margin:auto;padding:20px}.top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}.brand{display:flex;align-items:center;gap:12px}.seal{width:46px;height:46px;border:1px solid #8f7047;border-radius:15px;display:grid;place-items:center;color:var(--gold);font-size:24px;background:#302638}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:850}.brand h1{font:700 clamp(23px,3vw,34px)/1.1 Georgia,serif;margin:3px 0}.subtitle{color:var(--muted);font-size:12px}.pill{border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--muted);font-size:11px}.panel{background:linear-gradient(145deg,#24232fef,#1c1b25f5);border:1px solid #393645;border-radius:20px;padding:17px;box-shadow:0 16px 40px #0002}.panel h2{font-size:15px;margin:0 0 12px;font-weight:800}.muted{color:var(--muted)}.setup{display:grid;grid-template-columns:1fr 1fr;gap:15px}.setup-controls{display:grid;gap:12px}.field{display:grid;gap:6px;color:var(--muted);font-size:12px}.field select,.field input,.select{width:100%;background:#171620;color:var(--ink);border:1px solid #51485d;border-radius:10px;padding:11px;font:inherit;min-width:0}.field-input{background:#171620;color:var(--ink);border:1px solid #51485d;border-radius:10px;padding:10px;width:100%;min-width:0}.names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.primary{background:var(--gold);color:#211b20}.secondary{background:#393444;color:var(--ink);border:1px solid #51485d}.danger{background:#492d38;color:#f1b7b7;border:1px solid #76414d}.story{border:1px solid #5c4939;border-radius:15px;padding:15px;background:radial-gradient(ellipse at top,#403044,#211d2a 80%)}.story h2{font:700 21px/1.15 Georgia,serif;color:var(--gold);margin:5px 0 8px}.story p{margin:0;color:#d3cbd7;font-size:13px}.rulebox{margin-top:12px;background:#17151f;border-left:3px solid var(--gold);padding:10px 12px;border-radius:0 9px 9px 0;font-size:12px}.rulebox strong{display:block;color:var(--gold);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}.note{font-size:11px;color:var(--muted);margin-top:10px}.hidden{display:none!important}.gamegrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:15px;align-items:start}.sectionbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.sectionbar h2{margin:0}.roundtag{font-size:11px;color:var(--gold);border:1px solid #5c4939;border-radius:999px;padding:5px 9px}.districts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.district{padding:12px;border-radius:14px;border:1px solid #484252;background:linear-gradient(155deg,#302d3b,#22212c);min-width:0}.district.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px #e8bd7230}.district h3{font-size:13px;margin:0 0 6px}.landmarks{font-size:10px;color:var(--muted);line-height:1.5;min-height:45px}.district-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid #45404d}.influence{font-size:11px;font-weight:800;color:var(--gold)}.tokens{display:flex;gap:4px;flex-wrap:wrap}.token{width:22px;height:22px;border-radius:8px;display:inline-grid;place-items:center;color:#181721;font-size:10px;font-weight:900;border:1px solid #fff8}.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}.player{border:1px solid var(--line);background:#1b1a24;border-radius:13px;padding:10px;min-width:0}.player.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px #e8bd7230}.playerhead{display:flex;align-items:center;gap:7px;font-weight:800;font-size:12px;min-width:0}.avatar{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;color:#191821;font-weight:900;flex-shrink:0}.playername{overflow-wrap:anywhere}.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px;font-size:11px;color:var(--muted)}.stats b{color:var(--ink)}.rightcol{display:grid;gap:14px}.turn{background:linear-gradient(120deg,#3b2d3e,#282333);border:1px solid #68503f;border-radius:15px;padding:13px;margin-bottom:12px}.turntitle{font:700 20px Georgia,serif;margin:3px 0}.turnhint{font-size:11px;color:#c7c1ce}.actiongrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.actiongrid button{min-height:66px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px}.actiongrid span{font-size:10px;font-weight:500;opacity:.8}.pickers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pickers .field:nth-child(2){grid-column:1/-1}.pickers .field:nth-child(2){grid-column:1/-1}.card{border-radius:14px;padding:14px;border:1px solid #6b5142;background:linear-gradient(135deg,#3b2d35,#272432);min-height:130px}.card .symbol{font-size:22px}.card h3{font:700 17px Georgia,serif;margin:6px 0}.card p{margin:0;color:#d1c5c7;font-size:12px}.secret{margin-top:10px;padding:10px;border:1px dashed #706044;border-radius:10px;background:#1a1821}.secret p{margin:6px 0 0;font-size:12px}.log{display:grid;gap:8px;max-height:235px;overflow:auto}.log-entry{font-size:11px;color:#c7c1ce;border-left:2px solid #65516e;padding:3px 0 3px 9px}.finish{border:1px solid var(--gold);border-radius:16px;padding:15px;margin-top:15px;background:linear-gradient(135deg,#32283a,#211d28)}.finish h2{font:700 22px Georgia,serif;color:var(--gold)}.ranking{display:grid;gap:7px}.rankrow{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;background:#1a1822;border-radius:9px;font-size:12px}.foot{margin-top:16px;color:#888493;font-size:10px}
@media(max-width:800px){.app{padding:13px}.gamegrid{grid-template-columns:1fr}.setup{grid-template-columns:1fr}.pill{display:none}.panel{padding:13px}.story h2{font-size:19px}}
@media(max-width:380px){.districts{gap:6px}.district{padding:8px}.landmarks{font-size:9px}.district h3{font-size:11px}.players{grid-template-columns:1fr}.names{grid-template-columns:1fr 1fr}.actiongrid{gap:6px}.actiongrid button{padding:9px;font-size:12px}}

.online-panel{margin-top:14px}.online-intro{font-size:12px;line-height:1.5;margin:0 0 12px}.online-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;align-items:end}.online-button{min-height:43px;white-space:nowrap}.online-message{margin-top:12px;padding:10px 12px;border-radius:10px;background:#191821;color:var(--muted);font-size:12px;line-height:1.45;border:1px solid var(--line)}.online-message.error{color:#f3b8b8;border-color:#784650}.online-message.success{color:#a3d6b2;border-color:#476b54}.room-state{margin-top:14px;padding:14px;border-radius:14px;border:1px solid #5c4939;background:#1b1923}.room-code-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-code{font:800 28px/1.15 ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em;color:var(--gold);margin-top:4px}.room-caption{font-size:11px;color:var(--muted);margin-top:7px}.online-player-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}.online-player{display:flex;align-items:center;gap:8px;background:#24212d;border:1px solid var(--line);border-radius:10px;padding:9px;min-width:0;font-size:12px}.online-player .avatar{width:24px;height:24px;border-radius:8px;font-size:10px}.online-player span:last-child{overflow-wrap:anywhere}.online-player .connection{margin-left:auto;color:#8dc6a0;font-size:10px;white-space:nowrap}.online-lobby-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.online-lobby-actions button{flex:1}.online-turn-note{padding:9px 10px;border-radius:10px;border:1px solid #5c4939;color:var(--gold);font-size:11px;margin-bottom:10px}
@media(max-width:520px){.online-grid{grid-template-columns:1fr}.online-button{width:100%}.room-code-row{align-items:flex-start;flex-direction:column}.online-player-list{grid-template-columns:1fr}.online-lobby-actions{flex-direction:column}.room-code{font-size:26px}}

.online-grid #joinOnlineBtn{grid-column:1/-1}