:root{--bg: #140e0c;--cream: #f3e6d0;--cream-dim: #d9c7a8;--gold: #d4a054;--gold-hi: #f0d08a;--wood: #5c3a22;--wood-dark: #2a1a12;--ink: #1c120c;--danger: #c44536;--safe-top: env(safe-area-inset-top, 0px);--safe-bot: env(safe-area-inset-bottom, 0px);--btn: 56px;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--cream);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none}#c{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;display:flex;flex-direction:column}.overlay .hit{pointer-events:auto}#menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;background:radial-gradient(ellipse at 50% 0%,#3a2418,#140e0c 62%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:auto;padding:calc(28px + var(--safe-top)) 20px calc(28px + var(--safe-bot));color:var(--cream)}#menu.hidden{display:none}.brand{text-align:center;margin:8px 0 22px}.brand h1{font-family:Palatino,Palatino Linotype,Georgia,serif;font-weight:700;letter-spacing:.28em;font-size:clamp(2.2rem,10vw,3.4rem);margin:0;color:var(--gold-hi);text-shadow:0 2px 0 #3a2416,0 8px 28px rgba(0,0,0,.45)}.brand p{margin:8px 0 0;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--cream-dim)}.panel{width:min(420px,100%);background:#1e120cd1;border:1px solid rgba(212,160,84,.28);border-radius:18px;padding:18px 16px 20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.section{margin-bottom:16px}.section h2{margin:0 0 8px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}.row{display:flex;gap:8px;flex-wrap:wrap}.choice{flex:1 1 30%;min-height:var(--btn);min-width:96px;padding:0 14px;border-radius:14px;border:1px solid rgba(243,230,208,.18);background:#2a1a12;color:var(--cream);font-size:1rem;font-weight:600;cursor:pointer}.choice[aria-pressed=true],.choice.on{background:linear-gradient(180deg,#c9a15b,#9a6c2c);color:var(--ink);border-color:var(--gold-hi)}.slots{display:flex;flex-direction:column;gap:8px}.slot{display:flex;align-items:center;gap:8px;min-height:52px;background:#24160f;border-radius:12px;padding:6px 8px;border:1px solid rgba(243,230,208,.1)}.swatch{width:16px;height:16px;border-radius:50%;flex:0 0 16px;box-shadow:0 0 0 2px #ffffff26}.slot .name{flex:1;font-weight:600;font-size:.95rem}.slot select,.slot button,.tiny{min-height:40px;border-radius:10px;border:1px solid rgba(243,230,208,.18);background:#3a2418;color:var(--cream);font-size:.9rem;padding:0 10px}#start-btn{width:100%;min-height:58px;margin-top:8px;border:0;border-radius:16px;background:linear-gradient(180deg,#e0b56a,#b07a2e);color:var(--ink);font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 18px #b07a2e59}#start-btn:active{transform:translateY(1px)}.spectate{display:block;width:100%;margin-top:12px;background:none;border:0;color:var(--cream-dim);font-size:.92rem;text-decoration:underline;cursor:pointer;min-height:44px}#hud{display:none;flex-direction:column;justify-content:space-between;height:100%;padding:calc(10px + var(--safe-top)) 12px calc(10px + var(--safe-bot))}#hud.show{display:flex}.topbar{display:flex;align-items:center;gap:10px;pointer-events:auto}.turn-pill{flex:1;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border-radius:14px;background:#140c08c7;border:1px solid rgba(212,160,84,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:600}.turn-pill .dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 8px currentColor}.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid rgba(212,160,84,.3);background:#140c08c7;color:var(--cream);font-size:1.1rem;cursor:pointer;pointer-events:auto}.msg{text-align:center;min-height:24px;font-size:.92rem;color:var(--gold-hi);text-shadow:0 1px 4px #000;pointer-events:none;padding:6px 14px;margin:0 auto;width:fit-content;max-width:90%;background:#140c089e;border-radius:12px}.msg:empty{background:transparent;padding:0}.msg.warn{color:#ffb4a8}.dock{pointer-events:auto;background:#140c08e0;border:1px solid rgba(212,160,84,.28);border-radius:20px 20px 16px 16px;padding:12px 12px 10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hand{display:flex;justify-content:center;gap:10px;margin-bottom:10px}.tile-btn{width:88px;height:88px;padding:0;border-radius:12px;border:2px solid rgba(243,230,208,.25);background:#efe3cc;cursor:pointer;position:relative}.tile-btn.selected{border-color:var(--gold-hi);box-shadow:0 0 0 3px #f0d08a73;transform:translateY(-4px)}.tile-btn canvas{width:100%;height:100%;display:block;border-radius:10px}.tile-btn:disabled{opacity:.4}.actions{display:flex;gap:8px}.actions button{flex:1;min-height:var(--btn);border-radius:14px;border:0;font-size:1rem;font-weight:700;cursor:pointer}#rotate-btn{background:#3a2418;color:var(--cream);border:1px solid rgba(243,230,208,.2);flex:0 0 36%}#place-btn{background:linear-gradient(180deg,#e0b56a,#b07a2e);color:var(--ink)}#place-btn:disabled{opacity:.4;cursor:default}#win{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:6;background:#0a0604b8;align-items:center;justify-content:center;padding:24px}#win.show{display:flex}.win-card{width:min(400px,100%);background:linear-gradient(180deg,#3a2418,#1c120c);border:1px solid var(--gold);border-radius:20px;padding:28px 22px 22px;text-align:center}.win-card h2{font-family:Palatino,Palatino Linotype,Georgia,serif;font-size:2rem;margin:0 0 8px;color:var(--gold-hi)}.win-card p{margin:0 0 22px;color:var(--cream-dim)}.win-card button{width:100%;min-height:56px;border:0;border-radius:14px;background:linear-gradient(180deg,#e0b56a,#b07a2e);color:var(--ink);font-weight:700;font-size:1.05rem;cursor:pointer}.hidden{display:none!important}