:root{color-scheme:dark;--bg: #0f172a;--bg-2: #1e293b;--bg-3: #334155;--fg: #e2e8f0;--fg-dim: #94a3b8;--accent: #f97316;--accent-hover: #fb923c;--danger: #ef4444;--ok: #22c55e;--border: #334155;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);overscroll-behavior-y:contain}body{overflow-x:hidden}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}input,button,select,textarea{font:inherit;border-radius:8px;border:1px solid var(--border);padding:10px 14px;background:var(--bg-2);color:var(--fg);outline:none;min-height:44px;touch-action:manipulation}input:focus,select:focus,textarea:focus{border-color:var(--accent)}button{cursor:pointer;background:var(--accent);border-color:var(--accent);color:#1a1a1a;font-weight:600;transition:background-color .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}button:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:var(--bg-3);border-color:var(--bg-3);color:var(--fg)}button.secondary:hover:not(:disabled){background:#475569;border-color:#475569}button.ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}button.ghost:hover:not(:disabled){background:var(--bg-2)}button.danger{background:var(--danger);border-color:var(--danger);color:#fff}.page{min-height:100%;padding:16px;padding-bottom:calc(16px + var(--safe-bottom));padding-top:calc(16px + var(--safe-top));max-width:960px;margin:0 auto}.center-screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom))}.card{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:16px}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:12px}.row.wrap{flex-wrap:wrap}.spacer{flex:1}.muted{color:var(--fg-dim)}.error{color:var(--danger);font-size:14px}.ok{color:var(--ok)}h1{font-size:22px;margin:0}h2{font-size:18px;margin:0}h3{font-size:16px;margin:0}.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px}.tabs button{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--fg-dim);font-weight:500;padding:10px 16px;min-height:44px}.tabs button.active{color:var(--fg);border-bottom-color:var(--accent)}ul.bare{list-style:none;padding:0;margin:0}table.rooms{width:100%;border-collapse:collapse}table.rooms th,table.rooms td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--border)}table.rooms th{font-size:12px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em}.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--bg-3);color:var(--fg);font-size:12px;white-space:nowrap}.chip.host{background:var(--accent);color:#1a1a1a}.chip.you{background:#0ea5e9;color:#0a1828}pre.state-dump{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:12px;overflow:auto;max-height:60vh;font-size:12px;white-space:pre-wrap;word-break:break-all}.chat{display:flex;flex-direction:column;gap:4px;height:200px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px;-webkit-overflow-scrolling:touch}.chat .msg .who{color:var(--accent);font-weight:600;margin-right:6px}.banner{padding:10px 14px;border-radius:6px;font-size:14px}.banner.warn{background:#fbbf2426;color:#fde68a;border:1px solid rgba(251,191,36,.3)}.banner.err{background:#ef444426;color:#fecaca;border:1px solid rgba(239,68,68,.3)}.banner.info{background:#38bdf81f;color:#bae6fd;border:1px solid rgba(56,189,248,.3)}.conn-status{position:fixed;top:calc(8px + var(--safe-top));right:8px;font-size:11px;padding:4px 10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);z-index:50}.conn-status.ok:before{content:"● ";color:var(--ok)}.conn-status.bad:before{content:"● ";color:var(--danger)}.conn-status.idle:before{content:"○ ";color:var(--fg-dim)}.board-wrap{width:100%}.board-wrap canvas{width:100%;max-width:100%;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.board-hint{margin-bottom:8px;font-size:14px}.hud{display:flex;gap:12px;flex-wrap:wrap;padding:10px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px}.hud-block{display:flex;flex-direction:column;gap:2px;min-width:0}.hud-label{font-size:10px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.06em}.hud-value{display:flex;align-items:center;gap:6px;font-size:14px}.color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.4);flex-shrink:0}.player-panel{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.player-card{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.player-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.own-hand{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.res-pill{background:var(--bg-3);padding:3px 9px;border-radius:999px;font-size:13px}.dice-row{display:flex;align-items:center;gap:10px}.die{width:44px;height:44px;background:#f8fafc;border-radius:8px;border:1px solid #cbd5e1;padding:4px}.die svg{width:100%;height:100%;display:block}.build-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}.build-btn{display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px;text-align:left;min-width:120px}.build-btn.active{background:var(--accent);color:#1a1a1a;border-color:var(--accent)}.build-label{font-weight:600;margin-bottom:4px}.build-cost{display:flex;gap:6px;font-size:12px;flex-wrap:wrap}.cost-pill{background:#0000002e;border-radius:4px;padding:0 4px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom));z-index:100}.modal-card{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;width:min(560px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.modal-head{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}.modal-body{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}.modal-foot{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}.trade-grid{display:grid;gap:16px;grid-template-columns:1fr}@media (min-width: 540px){.trade-grid{grid-template-columns:1fr 1fr}}.res-btn{display:flex;flex-direction:column;align-items:flex-start;padding:8px 12px}.res-btn.active{background:var(--accent);color:#1a1a1a;border-color:var(--accent)}.res-btn small{font-size:11px;opacity:.7}.resource-picker{display:flex;flex-direction:column;gap:6px}.resource-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg);padding:6px 10px;border-radius:6px}.resource-name{font-size:13px}.resource-row button{min-height:36px;padding:4px 12px}.trade-offer-row{display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 12px;gap:8px;flex-wrap:wrap}.dev-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.dev-card-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;background:var(--bg);border:1px solid var(--border);color:var(--fg);border-radius:8px;min-height:56px}.dev-card-tile:disabled{opacity:.4}.steal-target{display:flex;align-items:center;gap:8px;width:100%;background:var(--bg-3);color:var(--fg);border:1px solid var(--border);padding:12px;border-radius:8px;text-align:left}button.danger.ghost{background:transparent;border-color:#ef444480;color:var(--danger)}details.collapsible{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;overflow:hidden}details.collapsible>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none;min-height:48px}details.collapsible>summary::-webkit-details-marker{display:none}details.collapsible>summary:after{content:"▾";margin-left:auto;transition:transform .15s ease}details.collapsible[open]>summary:after{transform:rotate(180deg)}details.collapsible>.body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}@media (max-width: 720px){.page{padding:12px;padding-bottom:calc(80px + var(--safe-bottom));padding-top:calc(12px + var(--safe-top))}table.rooms th,table.rooms td{padding:8px 4px;font-size:14px}h1{font-size:20px}.modal-overlay{padding:0}.modal-card{width:100%;height:100%;max-height:100%;border-radius:0;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.hud{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:14px;padding:8px 12px}.hud-block{flex-shrink:0}.hud-value{font-size:13px}.player-panel{grid-template-columns:1fr}.build-btn{flex:1 1 calc(50% - 4px);min-width:0}.build-bar>button{flex:1 1 calc(50% - 4px);min-width:0}.build-bar>button:last-child{flex:1 1 100%}.chat{height:160px}}@media (max-width: 420px){.page{padding:8px;padding-bottom:calc(80px + var(--safe-bottom));padding-top:calc(12px + var(--safe-top))}.card{padding:12px}.build-btn{flex:1 1 100%}}