:root{color-scheme:light only;color:#f5f5f5;background:#111827;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;--bg-page: #111827;--bg-surface: #1f2937;--bg-elevated: #111827;--border-subtle: #374151;--text-primary: #f5f5f5;--text-secondary: #d1d5db;--text-muted: #9ca3af;--accent: #60a5fa;--accent-strong: #2563eb;--card-face-bg: #f9fafb;--z-connection-debug: 5;--z-controls: 10;--z-host-menu: 15;--z-hand-backdrop: 40;--z-hand: 45;--z-dragged-card: 46;--z-play-zone: 47;--z-inspection-backdrop: 48;--z-inspection-card: 49;--z-host-dialog: 55;--card-hand-transition: .2s ease}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-y:auto;overflow-x:clip;background:var(--bg-page);color:var(--text-primary)}#root{overflow:visible;min-height:100vh}.app{min-height:100vh;display:grid;place-content:center;text-align:center;padding:1.5rem}.eyebrow{margin:0 0 .5rem;color:#93c5fd;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}h1{margin:0 0 1rem;font-size:clamp(1.75rem,6vw,2.25rem)}.connection-panel,.pairing-panel{width:min(100%,28rem);margin:0 auto 1rem;padding:1.25rem;border:1px solid var(--border-subtle);border-radius:.75rem;background:var(--bg-surface);text-align:left}.connection-panel-compact{position:fixed;top:max(.35rem,env(safe-area-inset-top,0px));left:max(.35rem,env(safe-area-inset-left,0px));z-index:var(--z-connection-debug);width:min(10.5rem,34vw);margin:0;padding:.25rem .4rem;border-radius:.4rem;font-size:8px;line-height:1.25;opacity:.65;background:#111827d1;border:1px solid var(--border-subtle);box-shadow:0 1px 4px #0003;pointer-events:auto}.connection-panel-compact h2{margin:0 0 .15rem;font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}.connection-panel-compact dl{gap:.12rem}.connection-panel-compact dt{font-size:7px}.connection-panel-compact dd{font-size:8px}.connection-panel-compact .status-badge{font-size:8px;padding:.05rem .3rem}.connection-panel-compact.connection-panel-connected{border-color:#14532d;opacity:.5;pointer-events:none}.connection-panel-compact.connection-panel-connecting,.connection-panel-compact.connection-panel-disconnected{opacity:.95;border-color:#f87171;background:#7f1d1deb;pointer-events:auto}.connection-panel-compact.connection-panel-connecting .status-badge,.connection-panel-compact.connection-panel-disconnected .status-badge{font-weight:700}.connection-panel h2,.pairing-panel h2{margin:0 0 1rem;font-size:1rem}.connection-panel dl{margin:0;display:grid;gap:.75rem}.connection-panel div{display:grid;gap:.25rem}.connection-panel dt{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.connection-panel dd{margin:0;font-family:Consolas,Monaco,Courier New,monospace;font-size:.875rem;word-break:break-all}.status-badge{display:inline-block;padding:.25rem .625rem;border-radius:999px;font-family:inherit;font-size:.8125rem;font-weight:600}.status-connecting{background:#78350f;color:#fde68a}.status-connected{background:#14532d;color:#bbf7d0}.status-disconnected{background:#7f1d1d;color:#fecaca}.pairing-status{margin:0 0 1rem;font-size:1rem;font-weight:600}.pairing-status-paired{color:#86efac}.pairing-status-pairing,.pairing-status-waiting-for-connection{color:#fde68a}.pairing-status-failed{color:#fecaca}.info-message,.success-message,.error-message{margin:0;font-size:.9rem}.info-message{color:var(--text-secondary)}.success-message{color:#86efac}.error-message{color:#fecaca}.mono{font-family:Consolas,Monaco,Courier New,monospace;word-break:break-all}.room-code-label{margin:0;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.room-code{margin:.25rem 0 1rem;font-size:1.75rem;font-weight:700;letter-spacing:.18em}.player-count{margin:0 0 1rem;color:var(--text-secondary)}.primary-button,.join-form button{width:100%;margin-top:.75rem;padding:.875rem 1rem;border:none;border-radius:.5rem;background:#2563eb;color:#fff;font-size:1rem;font-weight:600}.primary-button:disabled,.join-form button:disabled{opacity:.6;cursor:not-allowed}.join-form{display:grid;gap:.5rem}.join-form label{font-size:.875rem;color:var(--text-secondary)}.join-form input{width:100%;padding:.75rem .875rem;border:1px solid var(--border-subtle);border-radius:.5rem;font-size:1rem;background:var(--bg-elevated);color:var(--text-primary);color-scheme:light only}.remove-player-button{width:auto;margin-top:.25rem}.remove-player-confirm{display:grid;gap:.5rem}.player-list{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}.player-list li{padding:.75rem 1rem;border-radius:.5rem;background:var(--bg-elevated);border:1px solid var(--border-subtle)}.warning-box{margin:0 0 1rem;padding:.875rem 1rem;border-radius:.5rem;background:#78350f;color:#fde68a;font-size:.9rem}.joined-state,.host-player-list li{display:grid;gap:.5rem}.player-row{display:flex;justify-content:space-between;gap:1rem}.seat-select-label{display:grid;gap:.25rem;font-size:.85rem;color:var(--text-secondary)}.seat-select-label select{padding:.5rem .75rem;border:1px solid var(--border-subtle);border-radius:.5rem;font-size:.95rem;background:var(--bg-elevated);color:var(--text-primary);color-scheme:light only}.status-banner{margin:0 0 1rem;color:#fde68a;font-weight:600}.app-game{place-content:start center;padding:.5rem 1rem 0;padding-bottom:calc(var(--card-hand-height, 4rem) + 1rem);text-align:left;min-height:100vh;position:relative;overflow:visible}.app-game h1{font-size:1.25rem;margin-bottom:.5rem;text-align:center}.host-menu{position:fixed;top:.75rem;right:.75rem;z-index:var(--z-host-menu)}.host-undo-confirmation{position:fixed;top:3.5rem;right:.75rem;z-index:var(--z-host-dialog);margin-top:.5rem;padding:.75rem;border:1px solid var(--border-subtle);border-radius:.5rem;background:var(--bg-surface);display:grid;gap:.5rem;min-width:12rem;max-width:calc(100vw - 1.5rem)}.host-undo-confirmation button{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:.5rem;padding:.5rem .75rem}.menu-button{padding:.4rem .75rem;border:1px solid var(--border-subtle);border-radius:.5rem;background:var(--bg-surface);color:var(--text-primary);font-size:.85rem}.menu-panel{margin-top:.5rem;padding:.75rem;border:1px solid var(--border-subtle);border-radius:.5rem;background:var(--bg-surface);display:grid;gap:.5rem;min-width:10rem;z-index:var(--z-host-dialog)}.menu-panel button{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:.5rem;padding:.5rem .75rem}.danger-button{background:#dc2626;color:#fff;border:none;border-radius:.5rem;padding:.5rem .75rem}.game-hand-panel{width:min(100vw - 1.5rem,56rem);margin:0 auto;position:relative;z-index:1}.game-status-row{display:flex;gap:.75rem;align-items:center;justify-content:center;margin-bottom:.75rem}.turn-banner{margin:0;font-weight:600}.your-turn{color:#86efac}.waiting-turn{color:var(--text-muted)}.pending-banner{margin:0;color:#fde68a;font-size:.9rem}.result-banner{margin:0 0 .75rem;text-align:center;font-weight:700;color:#86efac}.player-hand{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;padding:.5rem 0 1rem;min-height:7rem;align-items:flex-end}.hand-card{flex:0 0 auto;border:2px solid var(--border-subtle);border-radius:.5rem;background:var(--card-face-bg);padding:.25rem;min-width:3.5rem}.hand-card-playable{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb33;cursor:pointer}.hand-card-disabled{opacity:.45;cursor:not-allowed}.draw-button{display:block;margin:.75rem auto 0;max-width:14rem;position:relative;z-index:var(--z-controls)}.card-hand-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;border:none;background:transparent;cursor:default;z-index:var(--z-hand-backdrop);touch-action:none}.card-hand-root{position:fixed;left:50%;transform:translate(-50%);width:var(--card-hand-width, auto);max-width:calc(100vw - 1rem);height:var(--card-hand-visible-height, var(--card-hand-height, 4.5rem));z-index:var(--z-hand);touch-action:none;-webkit-user-select:none;user-select:none;overflow:visible}.card-hand-root--compact{bottom:0;pointer-events:auto}.card-hand-root--expanded,.card-hand-root--mode-dragging,.card-hand-root--mode-returning,.card-hand-root--mode-submitting{bottom:max(.5rem,env(safe-area-inset-bottom,0px));z-index:var(--z-hand)}.card-hand-fan{position:relative;width:100%;height:100%;overflow:visible}.card-hand-fan--compact,.card-hand-fan--expanded{overflow:visible}.card-hand-compact-hit{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none;background:transparent;cursor:pointer;z-index:5;touch-action:manipulation}.card-hand-root--compact .card-hand-card{pointer-events:none}.card-hand-card--compact{top:0;bottom:auto;transform-origin:center top}.card-hand-card:not(.card-hand-card--compact){top:auto;bottom:0}.card-hand-card{position:absolute;left:50%;margin-left:0;transform-origin:center bottom;border:2px solid var(--border-subtle);border-radius:.5rem;background:var(--card-face-bg);padding:.25rem;color-scheme:light only;transition:transform var(--card-hand-transition),box-shadow var(--card-hand-transition),border-color var(--card-hand-transition);cursor:grab;touch-action:none;-webkit-user-drag:none}.card-hand-card:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.card-hand-card--playable{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb40}.card-hand-card--idle{opacity:.88}.card-hand-card--dragging{cursor:grabbing;transition:none;z-index:var(--z-dragged-card)!important;box-shadow:0 8px 24px #0f172a40}.card-hand-card--play-ready{border-color:#15803d;box-shadow:0 0 0 2px #15803d59,0 8px 24px #15803d33}.card-hand-card--returning{transition:transform var(--card-hand-transition),box-shadow var(--card-hand-transition)}.card-hand-card-face{display:block;pointer-events:none}.card-hand-card .card-face{width:100%;height:100%;min-width:0;min-height:0;container-type:size}.card-hand-play-zone{position:fixed;top:12%;left:50%;transform:translate(-50%);z-index:var(--z-play-zone);pointer-events:none;color:#86efac;font-size:.85rem;font-weight:600;opacity:.85}.card-hand-play-zone-label:before{content:"↑ "}.card-inspection-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-inspection-backdrop);display:grid;place-items:center;touch-action:manipulation}.card-inspection-content{position:relative;z-index:var(--z-inspection-card);width:min(70vw,70vh * .72);max-width:22rem;border-radius:.75rem;background:var(--card-face-bg);border:2px solid var(--border-subtle);box-shadow:0 16px 40px #00000073;padding:1rem;animation:card-inspection-enter var(--card-hand-transition) ease;pointer-events:none}.card-inspection-layer:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a73;pointer-events:none}.card-inspection-face{min-width:100%;min-height:min(70vh,18rem);container-type:size}@keyframes card-inspection-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.card-hand-card,.card-hand-card--returning,.card-inspection-content{transition:none;animation:none}}.start-game-section{margin-top:1rem;display:grid;gap:.5rem}.explain-it-your-team{margin:0 0 .75rem;font-weight:600}.card-face{position:relative;display:block;aspect-ratio:5 / 7;min-width:3rem;min-height:4.25rem;padding:0;border:2px solid;border-radius:10%;font-weight:700;line-height:1;box-sizing:border-box;color-scheme:light only}.card-face-corner{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.05em;pointer-events:none}.card-face-corner--top-left{top:var(--card-corner-pad, 8%);left:var(--card-corner-pad, 8%)}.card-face-corner--bottom-right{bottom:var(--card-corner-pad, 8%);right:var(--card-corner-pad, 8%);transform:rotate(180deg)}.card-face-centre{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:45%;pointer-events:none}.card-face-rank{font-size:clamp(.75rem,22cqw,1.35rem);font-weight:700}.card-face-suit{font-size:clamp(.65rem,18cqw,1.1rem);line-height:1}@media(orientation:landscape){.app-game{padding:.5rem 1rem 0;padding-bottom:calc(var(--card-hand-height, 5rem) + .75rem)}}.game-option-button{display:block;width:100%;margin-bottom:.5rem;padding:.75rem;border:1px solid #374151;border-radius:.5rem;background:#1f2937;color:inherit;text-align:left}.game-option-button.selected{border-color:#60a5fa;background:#1e3a5f}.oct-config-panel,.oct-summary-panel{margin-top:.75rem;padding:.75rem;border-radius:.5rem;background:#111827}.oct-fieldset{margin:.5rem 0;border:none}.oct-toggle-row{display:flex;flex-wrap:wrap;gap:.35rem}.oct-toggle{padding:.35rem .6rem;border:1px solid #4b5563;border-radius:.35rem;background:#1f2937;color:inherit;font-size:.85rem}.oct-toggle.active{border-color:#60a5fa;background:#1e3a5f}.oct-shortcut-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}.oct-field-row{display:flex;gap:.75rem;margin:.5rem 0}.oct-radio{display:block;margin:.25rem 0}.game-action-buttons{display:flex;gap:.5rem;margin-top:.5rem}.turn-banner.free-play{color:#93c5fd}.end-turn-button{padding:.65rem 1rem;border-radius:.5rem;border:1px solid #4b5563;background:#374151;color:inherit}