:root{--panel: rgba(30, 25, 19, .76);--panel-solid: rgba(36, 30, 23, .93);--border: rgba(255, 255, 255, .09);--shadow: 0 10px 34px rgba(0, 0, 0, .5);--text: #f5efe4;--dim: #b1a695;--good: #8fc47f;--warn: #e6c069;--bad: #cb6a4c;--money: #edc47e;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#23201a;font-family:ui-rounded,SF Pro Rounded,Nunito,Avenir Next,system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}#app{position:relative;width:100vw;height:100vh}#game{display:block;width:100%;height:100%}#hud{position:absolute;inset:0;pointer-events:none;padding:18px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);backdrop-filter:blur(10px) saturate(1.2)}#stats{grid-column:1;grid-row:1;justify-self:start;display:flex;gap:22px;align-items:baseline;font-variant-numeric:tabular-nums}#stats .big{font-size:24px;font-weight:800;letter-spacing:-.01em}#stats [data-money]{color:var(--money)}#stats [data-lost]{color:var(--bad)}#stats .label{color:var(--dim);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:1px}#log{grid-column:1;grid-row:2;align-self:end;justify-self:start;font-size:14px;font-weight:600;color:var(--dim);display:flex;flex-direction:column;gap:3px;text-shadow:0 2px 10px rgba(0,0,0,.8)}#log>div{animation:log-in .2s ease-out}@keyframes log-in{0%{opacity:0;transform:translateY(6px)}}@keyframes help-fade{to{opacity:.22}}#banner{position:absolute;inset:0;display:none;place-items:start center;padding-top:88px;pointer-events:none;transition:padding-top .2s ease}#banner.slim{padding-top:14px}#banner.show{display:grid}#banner .card{background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;padding:20px 30px;transition:padding .2s ease,border-radius .2s ease;text-align:center;box-shadow:var(--shadow);backdrop-filter:blur(10px);animation:ticket-in .35s cubic-bezier(.2,1.2,.4,1)}#banner h1{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.02em}#banner.slim .card{padding:7px 18px;border-radius:999px;animation:none}#banner.slim p.banner-open{margin:0;font-size:13px;font-weight:600;color:var(--dim)}#banner.slim h1,#banner.slim .banner-keys{display:none}#banner p{margin:5px 0;color:var(--dim);font-size:14px}#banner .card:not(.with-report) .report-line{display:none}#banner .report-line{margin:3px 0}#banner h2.report-line{margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}#banner .card.with-report .report-line:last-of-type{padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:16px}#banner p.banner-open{margin:8px 0 2px;font-size:19px;font-weight:700;color:var(--text)}#menu{position:absolute;inset:0;display:none;place-items:center;background:#14100c73;backdrop-filter:blur(3px);pointer-events:none}#menu.show{display:grid}#menu .card{min-width:340px;max-height:88vh;overflow-y:auto;pointer-events:auto;background:var(--panel-solid);border:1px solid var(--border);border-radius:20px;padding:24px 26px 18px;box-shadow:var(--shadow);backdrop-filter:blur(12px);animation:ticket-in .22s cubic-bezier(.2,1.2,.4,1)}#menu h1{margin:0 0 16px;font-size:24px;font-weight:800;letter-spacing:-.02em}#menu ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}#menu li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 14px;border-radius:12px;border:1px solid transparent;font-size:15px;font-weight:600;color:var(--dim)}#menu li.selected{background:#ffffff17;border-color:var(--border);color:var(--text)}#menu li em{font-style:normal;font-size:11px;color:var(--dim);opacity:.75}#notice{position:absolute;left:24px;bottom:168px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:#f0b24a;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}.connection{align-self:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8d8f9c}.connection.online{color:#8fd694}.connection.connecting{color:#f0b24a}.connection.offline{color:#e2584b}.connection:empty{display:none}#join{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#0c0d12d1;backdrop-filter:blur(6px);z-index:40}#join.open{display:flex}.join-card{width:320px;padding:28px 30px 24px;border-radius:18px;background:#191b22;border:1px solid #2c2f3a;box-shadow:0 24px 60px #00000080;color:#e8e6e1}.join-card h1{margin:0 0 22px;font-size:34px;letter-spacing:-.02em}.join-card label{display:block;margin-bottom:14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8d8f9c}.join-card input,.join-card select{display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:10px;border:1px solid #343846;background:#11131a;color:#e8e6e1;font:inherit;font-size:15px;text-transform:none;letter-spacing:normal;box-sizing:border-box}.join-card input:focus,.join-card select:focus{outline:none;border-color:#6f8fd6}#join-room{text-transform:uppercase;letter-spacing:.14em}.join-card [data-pane]{display:none}.join-card[data-mode=create] [data-pane=create],.join-card[data-mode=join] [data-pane=join]{display:block}.join-card .join-code{display:none}.join-card.linked .join-code{display:block;margin:0;font-size:30px;font-weight:600;letter-spacing:.2em;color:#e8e6e1}.join-card.linked [data-code-entry]{display:none}.join-card .join-switch{margin-top:14px;padding:0;border:none;border-radius:0;background:none;color:#8d8f9c;font-weight:400;font-size:12px;text-decoration:underline}.join-card .join-switch:hover{filter:none;color:#e8e6e1}.join-actions{display:flex;gap:8px;margin-top:20px}.join-card button{flex:1;padding:11px 12px;border-radius:10px;border:1px solid #343846;background:#22252f;color:#e8e6e1;font:inherit;font-weight:600;cursor:pointer}.join-card button.primary{background:#3f6f52;border-color:#4e8a66}.join-card button:hover{filter:brightness(1.12)}.join-hint{margin:16px 0 0;font-size:12px;color:#6f717d;line-height:1.5}.controls{margin-top:18px;padding-top:16px;border-top:1px solid #2f323d;display:flex;flex-direction:column;gap:7px}.controls-row{display:grid;grid-template-columns:1fr 96px 96px 96px;align-items:center;gap:8px;font-size:12px}.controls button{pointer-events:auto}.key-cap,.pad-cap{display:block;padding:4px 8px;border-radius:6px;border:1px solid transparent;background:#ffffff0f;color:#e8e6e1;font:inherit;font-size:11px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pad-cap{color:#8d8f9c;font-weight:400}.key-cap{cursor:pointer;border-color:#343846}.key-cap:hover{border-color:#4e8a66;filter:brightness(1.15)}.key-cap.capturing{background:#3f6f52;border-color:#4e8a66;animation:help-fade .7s ease-in-out infinite alternate}.controls-row span{color:#8d8f9c;letter-spacing:.04em}.controls-head{margin-top:6px}.controls-head span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6f717d}.controls-head i{min-width:64px;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6f717d;text-align:center}.controls-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:#8d8f9c}.controls-footer{display:flex;align-items:flex-end;gap:12px}.controls-reset{flex:none;margin-top:12px;padding:6px 10px;border-radius:8px;border:1px solid #343846;background:#22252f;color:#8d8f9c;font:inherit;font-size:11px;font-weight:600;cursor:pointer}.controls-reset:hover{color:#e8e6e1;filter:brightness(1.12)}.banner-keys{margin:12px 0 0!important;font-size:12px;color:#7e808b}.key{display:inline-block;padding:2px 7px;border-radius:5px;background:#23262f;border:1px solid #333744;color:#cfd2da;font-weight:600;font-size:11px;white-space:nowrap}.or{color:#8d8f9c}.controls-row b{min-width:64px;padding:3px 7px;border-radius:6px;background:#23262f;border:1px solid #333744;color:#cfd2da;font-weight:600;font-size:11px;text-align:center;white-space:nowrap}