:root{--bg-deep:#0b0b14;--bg-wood:#171009;--panel-bg:#1e1710;--panel-bg-light:#2b1f13;--panel-edge:#4a3a20;--parchment:#e9d8ac;--parchment-dim:#c9b98d;--gold:#c9a227;--gold-bright:#efd36b;--gold-dark:#7a5f16;--blood:#a03024;--forest:#3f7d4e;--text:#e4dcc8;--text-dim:#a89e85;--font-display:Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;--font-body:"Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:radial-gradient(1100px 650px at 50% 18%, #2e203c8c 0%, #0000 60%), linear-gradient(180deg, #12101c 0%, var(--bg-deep) 40%, #0d0a06 100%);color:var(--text);font-family:var(--font-body);background-attachment:fixed;font-size:15px;line-height:1.45}.app-root{height:100%;position:relative}h1,h2,h3{font-family:var(--font-display);color:var(--parchment);letter-spacing:.03em;margin:0}.panel{background:linear-gradient(180deg, var(--panel-bg-light), var(--panel-bg) 55%, #17110a);border:1px solid var(--panel-edge);border-radius:6px;padding:18px;box-shadow:0 6px 22px #0009,inset 0 1px #fff5d20f}.h3-frame{border:2px solid var(--gold);box-shadow:inset 0 0 0 1px #2c2004, inset 0 0 0 3px var(--gold-dark), inset 0 0 0 4px #2c2004, 0 0 22px #000000bf;border-radius:5px}.btn{appearance:none;cursor:pointer;font-family:var(--font-display);letter-spacing:.05em;color:var(--parchment);border:1px solid var(--gold-dark);text-shadow:0 1px 2px #000000d9;background:linear-gradient(#3c2d1a,#241a0e);border-radius:4px;padding:9px 20px;font-size:15px;transition:border-color .15s,filter .15s,box-shadow .15s;box-shadow:inset 0 1px #fff5d21a,0 2px 5px #00000080}.btn:hover:not(:disabled){border-color:var(--gold);filter:brightness(1.18)}.btn:active:not(:disabled){filter:brightness(.88)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{border-color:var(--gold);color:#fff3c9;background:linear-gradient(#8a6a16,#5c4410)}.btn-primary:hover:not(:disabled){box-shadow:inset 0 1px #fff5d22e,0 0 12px #e9c85a59}.resource-bar{border-bottom:2px solid var(--gold-dark);color:var(--parchment);font-family:var(--font-display);text-shadow:0 1px 2px #000c;-webkit-user-select:none;user-select:none;background:linear-gradient(#231708,#140d05);align-items:center;gap:16px;padding:6px 14px;font-size:14px;display:flex}.input{border:1px solid var(--panel-edge);color:var(--parchment);font-size:15px;font-family:var(--font-body);background:#120d07;border-radius:4px;outline:none;width:100%;padding:9px 12px;transition:border-color .15s,box-shadow .15s}.input::placeholder{color:#6d6250}.input:focus{border-color:var(--gold);box-shadow:0 0 7px #c9a22766}.loading-screen{height:100%;font-family:var(--font-display);color:var(--parchment-dim);letter-spacing:.08em;justify-content:center;align-items:center;font-size:20px;display:flex}.screen-placeholder{text-align:center;padding:36px 48px}.screen-placeholder p{color:var(--text-dim);margin:10px 0 0}.reconnect-banner{z-index:1001;background:linear-gradient(180deg, var(--gold-dark), #4a3a10);border:1px solid var(--gold);color:var(--gold-bright);font-family:var(--font-display);text-shadow:0 1px 2px #000c;border-top:none;border-radius:0 0 6px 6px;padding:6px 20px;font-size:13px;animation:.2s ease-out toast-in;position:fixed;top:0;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #0009}.error-toast{z-index:1000;border:1px solid var(--blood);color:#f4c9b8;max-width:min(560px,90vw);font-family:var(--font-display);text-shadow:0 1px 2px #000c;background:linear-gradient(#4a1610,#300d09);border-radius:5px;padding:10px 22px;animation:.2s ease-out toast-in;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 4px 18px #000000b3}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.home-screen{justify-content:center;align-items:center;height:100%;padding:24px;display:flex}.home-card{text-align:center;width:min(520px,100%);padding:40px 44px}.home-title{color:var(--gold-bright);text-shadow:0 2px 4px #000000e6,0 0 24px #c9a22740;font-size:30px;line-height:1.2}.home-title-web{color:var(--parchment-dim);margin-top:4px;font-size:18px;display:block}.home-tagline{color:var(--text-dim);margin:14px 0 28px;font-style:italic}.field{text-align:left;margin-bottom:22px;display:block}.field-label{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--parchment-dim);margin-bottom:6px;font-size:13px;display:block}.home-actions{flex-direction:column;gap:18px;display:flex}.home-create{padding:12px 20px;font-size:17px}.home-divider{color:var(--text-dim);align-items:center;gap:12px;font-size:13px;font-style:italic;display:flex}.home-divider:before,.home-divider:after{content:"";background:linear-gradient(90deg, transparent, var(--gold-dark), transparent);flex:1;height:1px}.home-join{gap:10px;display:flex}.home-code-input{text-align:center;width:120px;font-family:var(--font-display);letter-spacing:.35em;text-transform:uppercase;flex:none;font-size:18px}.home-join .btn{flex:1}.home-connecting{color:var(--parchment-dim);margin-top:20px;font-style:italic;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.55}50%{opacity:1}}.lobby-screen{justify-content:center;align-items:stretch;gap:20px;max-width:1100px;height:100%;margin:0 auto;padding:32px;display:flex}.lobby-main{flex-direction:column;flex:3;gap:22px;min-width:0;padding:26px 30px;display:flex}.lobby-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.lobby-title{color:var(--gold-bright);text-shadow:0 2px 4px #000000e6;font-size:24px}.room-code{cursor:pointer;font-family:var(--font-display);letter-spacing:.3em;color:var(--gold-bright);border:1px solid var(--gold-dark);text-shadow:0 0 10px #efd36b59;background:#120d07;border-radius:4px;align-items:baseline;gap:10px;padding:6px 8px 6px 16px;font-size:22px;display:inline-flex}.room-code:hover{border-color:var(--gold)}.room-code-hint{letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase;font-size:11px}.seat-list{flex-direction:column;gap:8px;display:flex}.seat-row{background:#00000047;border:1px solid #35291645;border-radius:4px;align-items:center;gap:12px;padding:10px 14px;display:flex}.seat-you{border-color:var(--gold-dark);background:#c9a22712}.seat-empty{opacity:.5;font-style:italic}.seat-empty-host{opacity:1;font-style:normal}.seat-dot{background:#4a4238;border-radius:50%;flex:none;width:9px;height:9px;box-shadow:inset 0 0 2px #000c}.seat-dot.on{background:var(--forest);box-shadow:0 0 6px #60be7899}.seat-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--font-display);color:var(--parchment);flex:1;font-size:16px;overflow:hidden}.seat-host{color:var(--gold-bright)}.seat-bot-badge{opacity:.9}.seat-summon-bot,.seat-remove-bot{padding:5px 12px;font-size:13px}.seat-summon-bot{flex:1}.seat-faction{color:var(--parchment-dim);text-align:right;min-width:90px;font-size:14px}.seat-ready{text-align:center;letter-spacing:.06em;text-transform:uppercase;min-width:84px;color:var(--text-dim);border:1px solid #4a4238;border-radius:3px;padding:3px 8px;font-size:12px}.seat-ready.ready{border-color:var(--forest);color:#9fdcae;background:#3f7d4e26}.lobby-section-title{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--parchment-dim);margin-bottom:10px;font-size:13px}.faction-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;display:grid}.faction-btn{cursor:pointer;font-family:var(--font-display);color:var(--parchment-dim);border:1px solid var(--panel-edge);background:#0000004d;border-radius:4px;padding:9px 6px;font-size:14px;transition:border-color .15s,color .15s,background .15s}.faction-btn:hover{border-color:var(--gold-dark);color:var(--parchment)}.faction-btn.picked{border-color:var(--gold);color:var(--gold-bright);background:#c9a2271f;box-shadow:0 0 8px #c9a2274d}.map-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.map-btn,.map-readonly{font-family:var(--font-display);color:var(--parchment-dim);border:1px solid var(--panel-edge);background:#0000004d;border-radius:4px;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;font-size:14px;display:flex}.map-btn{cursor:pointer;transition:border-color .15s,color .15s,background .15s}.map-btn:hover{border-color:var(--gold-dark);color:var(--parchment)}.map-btn.picked{border-color:var(--gold);color:var(--gold-bright);background:#c9a2271f;box-shadow:0 0 8px #c9a2274d}.map-readonly{color:var(--parchment)}.map-btn-seats{color:var(--gold-dark);font-size:12px}.lobby-actions{gap:12px;margin-top:auto;display:flex}.lobby-leave{margin-left:auto}.lobby-chat{flex-direction:column;flex:2;min-width:260px;max-width:380px;padding:20px;display:flex}.chat-log{background:#0000004d;border:1px solid #35291645;border-radius:4px;flex:1;min-height:120px;margin-bottom:12px;padding:10px 12px;font-size:14px;overflow-y:auto}.chat-empty{color:var(--text-dim);font-style:italic}.chat-row{overflow-wrap:break-word;margin-bottom:5px}.chat-from{color:var(--gold-bright);font-weight:600}.chat-form{gap:8px;display:flex}.chat-form .btn{flex:none;padding:9px 14px}@media (width<=820px){.lobby-screen{flex-direction:column;padding:16px;overflow-y:auto}.lobby-chat{max-width:none}.chat-log{max-height:200px}}