:root{--gold: #d4a843;--gold-dim: rgba(212, 168, 67, .35);--cream: #e8d5b0;--bg: #0a0804;--panel: rgba(10, 8, 4, .95)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(ellipse at 50% 30%,#1a1408 0%,var(--bg) 70%);color:var(--cream);font-family:system-ui,sans-serif;overflow:hidden}#app{height:100%}.screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}h1{color:var(--gold);font-size:clamp(1.6rem,5vw,2.6rem);letter-spacing:.08em;margin:0;text-shadow:0 2px 12px rgba(212,168,67,.4)}.sub{opacity:.75;font-size:.9rem}button{padding:10px 20px;border-radius:7px;border:2px solid #3d2a0a;background:#d4a8434d;color:#f3d89a;font-weight:700;font-size:.95rem;cursor:pointer}button:hover{background:#d4a84380}button.ghost{border:1px solid var(--gold-dim);background:#d4a84314;color:var(--cream)}button:disabled{opacity:.4;cursor:default}input[type=text],select{padding:8px 10px;border-radius:6px;border:1px solid var(--gold-dim);background:#00000080;color:var(--cream);font-size:.9rem}.card{background:var(--panel);border:1px solid var(--gold-dim);border-radius:10px;padding:18px 22px;display:flex;flex-direction:column;gap:12px;min-width:min(420px,92vw)}.row{display:flex;gap:10px;align-items:center}.row.spread{justify-content:space-between}.room-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(212,168,67,.2);border-radius:6px;background:#d4a8430d}.mut{opacity:.6;font-size:.8rem}canvas.game{image-rendering:pixelated;border-radius:8px;box-shadow:0 0 40px #000c,0 0 12px #d4a84326;background:#120d06}.matchwrap{display:flex;gap:24px;align-items:flex-start;justify-content:center;height:100%;padding:12px}.boardside{display:flex;flex-direction:column;align-items:center;gap:8px}.boardside .name{font-weight:700;color:var(--gold)}.boardside .score{font-size:.85rem;opacity:.8}.companion{margin-top:4px;border:1px solid rgba(212,168,67,.25);border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,rgba(212,168,67,.12),transparent 70%)}.companion canvas{display:block}.boardrow{display:flex;gap:10px;align-items:flex-end}.paused-tag{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 22px;border:1px solid rgba(154,219,232,.6);border-radius:10px;background:#0d0a06e6;color:#9adbe8;font-weight:700;z-index:40;pointer-events:none}.touchpad{position:fixed;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;padding:0 14px;z-index:35;pointer-events:none}.tp-pad{display:grid;grid-template-areas:". u ." "l . r" ". d .";gap:4px;pointer-events:auto}.tp-u{grid-area:u}.tp-l{grid-area:l}.tp-r{grid-area:r}.tp-d{grid-area:d}.tp-acts{display:flex;gap:8px;align-items:center;pointer-events:auto}.tp-btn{width:56px;height:56px;border-radius:14px;border:1px solid rgba(212,168,67,.5);background:#1e160ab3;color:var(--gold, #d4a843);font-weight:700;font-size:.8rem;touch-action:none;user-select:none;-webkit-user-select:none}.tp-btn:active{background:#d4a84359}.tp-act{width:auto;min-width:64px;height:48px;padding:0 12px}.topbar{position:fixed;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;z-index:10;pointer-events:none}.topbar>*{pointer-events:auto}.badge{font-size:.72rem;padding:2px 8px;border-radius:10px;border:1px solid var(--gold-dim);color:var(--gold)}.notice{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:20px 28px;text-align:center;z-index:20;box-shadow:0 8px 40px #000000e6}.notice h2{margin:0 0 8px;color:var(--gold)}