.match-shell{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"topbar" "board" "tray";padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden;color:#f7f8ff;background:#070b14}.match-shell__topbar{grid-area:topbar;min-height:56px;display:flex;gap:10px;align-items:center;padding:6px 10px;border-bottom:1px solid #283650;background:#0d1422}.match-shell__heading{min-width:0;margin-right:auto}.match-shell__heading h1{overflow:hidden;margin:0;font-size:clamp(1rem,4vw,1.35rem);text-overflow:ellipsis;white-space:nowrap}.match-shell__heading span,.match-shell__connection{color:#aebbd1;font-size:.75rem;text-transform:capitalize}.match-shell__connection{display:inline-flex;gap:5px;align-items:center}.match-shell__connection>span{width:8px;height:8px;border-radius:50%;background:#53d890}.match-shell__connection--reconnecting>span{background:#f2bc4b}.match-shell__connection--offline>span{background:#f07474}.match-shell__top-actions,.match-shell__actions,.match-shell__sheet-buttons{display:flex;gap:8px;align-items:center}.match-shell__top-actions>*,.match-shell__actions>*,.match-shell__sheet-buttons button,.match-shell__sheet header button{min-width:44px;min-height:44px}.match-shell__board{grid-area:board;min-width:0;min-height:0;overflow:hidden}.match-shell__panel{display:none;min-width:0;min-height:0;overflow:auto;padding:14px;background:#0d1422}.match-shell__tray{grid-area:tray;display:grid;gap:8px;padding:8px 10px max(8px,env(safe-area-inset-bottom));border-top:1px solid #283650;background:#0d1422}.match-shell__game-status{min-width:0;color:#c5d0e3}.match-shell__actions{overflow-x:auto}.match-shell__sheet-backdrop,.match-shell__modal-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;align-items:end;background:#00000094}.match-shell__sheet{max-height:min(72dvh,34rem);display:grid;grid-template-rows:auto minmax(0,1fr);padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overflow:hidden;border:1px solid #405271;border-bottom:0;border-radius:18px 18px 0 0;background:#111a2a}.match-shell__sheet header{display:flex;align-items:center;justify-content:space-between}.match-shell__sheet-content{overflow:auto}.match-shell__modal-layer{z-index:30;place-items:center;padding:16px}@media(min-width:960px){.match-shell{grid-template-columns:minmax(220px,.24fr) minmax(0,1fr) minmax(260px,.28fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"topbar topbar topbar" "players board events" "players tray events"}.match-shell__panel{display:block}.match-shell__panel--players{grid-area:players;border-right:1px solid #283650}.match-shell__panel--events{grid-area:events;border-left:1px solid #283650}.match-shell__sheet-buttons{display:none}.match-shell__tray{grid-template-columns:minmax(0,1fr) auto;align-items:center}}.replay-controls{display:grid;gap:12px;padding:12px;border-top:1px solid #405271;background:#0d1422}.replay-controls__buttons{display:flex;gap:8px;overflow-x:auto}.replay-controls button,.replay-controls select{min-height:44px;padding:8px 12px}.replay-controls label{display:grid;gap:4px}.replay-controls input[type=range]{width:100%;min-height:44px}.help-view{display:flex;flex-direction:column;gap:20px;max-width:720px;margin:0 auto;color:#f7f8ff}.help-view__header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.help-view__title{margin:0;font-size:1.6rem}.help-view__summary{margin:4px 0 0;color:#aeb9d4}.help-view__actions{flex-shrink:0}.help-view__group{display:flex;flex-direction:column;gap:8px}.help-view__group-title{margin:0;font-size:1.1rem;color:#cdd6ee;border-bottom:1px solid #283650;padding-bottom:4px}.help-view__sections{margin:0;display:flex;flex-direction:column;gap:10px}.help-view__section{margin:0}.help-view__heading{font-weight:600}.help-view__body{margin:2px 0 0;color:#aeb9d4}.hint-callout{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid #2f4a74;border-radius:10px;background:#10203a;color:#f7f8ff;box-shadow:0 6px 18px #0000004d}.hint-callout__text{min-width:0;flex:1}.hint-callout__title{margin:0;font-weight:600}.hint-callout__message{margin:2px 0 0;color:#aeb9d4;font-size:.9rem}.hint-callout__dismiss{flex-shrink:0;padding:6px 12px;border:1px solid #3a568a;border-radius:8px;background:#1c3057;color:#f7f8ff;cursor:pointer}.hint-callout__dismiss:hover{background:#244173}.loading-shell{flex:1;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--spacing-lg)}.loading-shell__spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-accent);border-radius:var(--radius-full);animation:loading-shell-spin .8s linear infinite}@keyframes loading-shell-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.loading-shell__spinner{animation-duration:2s}}.app-layout{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;width:100%;overflow-x:hidden}.app-layout__safe-area{flex:1;display:flex;flex-direction:column;padding-top:var(--safe-area-inset-top);padding-right:var(--safe-area-inset-right);padding-bottom:var(--safe-area-inset-bottom);padding-left:var(--safe-area-inset-left)}.app-layout__content{flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--max-width-mobile);margin:0 auto}@media(min-width:768px){.app-layout__content{max-width:var(--max-width-tablet)}}@media(min-width:1024px){.app-layout__content{max-width:var(--max-width-desktop)}}@media(max-height:500px)and (orientation:landscape){.app-layout__safe-area{padding-top:var(--spacing-sm);padding-bottom:var(--spacing-sm)}}.page-stack{width:min(100%,64rem);margin-inline:auto;display:grid;gap:var(--spacing-lg)}.page-heading{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-md)}.page-heading p,.muted{color:var(--color-text-secondary)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--spacing-md)}.content-card,.state-card{display:grid;gap:var(--spacing-md);padding:var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-secondary)}.state-card{width:min(100%,32rem);margin:var(--spacing-xl) auto;text-align:center}.button-row{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.primary-button,.secondary-button,.danger-button{min-height:var(--min-touch-target);display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:700}.primary-button{background:var(--color-accent-button);color:var(--color-text-primary)}.secondary-button{border:1px solid var(--color-border);background:var(--color-bg-tertiary);color:var(--color-text-primary)}.danger-button{border:1px solid var(--color-error);color:var(--color-error)}.primary-button:disabled,.secondary-button:disabled,.danger-button:disabled{cursor:not-allowed;opacity:.55}.field-stack{display:grid;gap:var(--spacing-xs)}.field-stack label,legend{font-weight:700}.field-error,.error-text{color:var(--color-error);font-size:var(--font-size-sm)}.success-text{color:var(--color-success)}.status-pill{width:fit-content;padding:.2rem .6rem;border-radius:var(--radius-full);background:var(--color-bg-tertiary);color:var(--color-text-secondary);font-size:var(--font-size-xs);font-weight:700;text-transform:capitalize}.status-pill--abandoned{border:1px solid var(--color-warning);color:var(--color-warning)}.catalog-thumbnail{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-md);background:var(--color-bg-tertiary)}.seat-list{display:grid;gap:var(--spacing-sm);list-style:none}.seat-list li{min-height:var(--min-touch-target);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm);padding:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.invite-code{overflow-wrap:anywhere;font-size:var(--font-size-xl);letter-spacing:.08em}@font-face{font-family:Aoboshi One;src:url(/assets/aoboshi-one-regular-en-CCqKFPOC.woff2) format("woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+20AC}@font-face{font-family:Atkinson Hyperlegible Next;src:url(/assets/atkinson-hyperlegible-next-upright-400-700-en-CkM3D2fI.woff2) format("woff2");font-display:swap;font-style:normal;font-weight:400 700;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+20AC}:root{--font-family-display: "Aoboshi One", Georgia, "Times New Roman", serif;--font-family-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow-x:hidden}html{font-family:var(--font-family-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{color-scheme:dark;--color-bg-primary: #1a1a1a;--color-bg-secondary: #2a2a2a;--color-bg-tertiary: #3a3a3a;--color-text-primary: #ffffff;--color-text-secondary: #a0a0a0;--color-border: #404040;--color-accent: #4a9eff;--color-accent-hover: #6ab0ff;--color-accent-button: #0b5ed7;--color-accent-button-hover: #0a53be;--color-success: #4ade80;--color-error: #f87171;--color-warning: #fbbf24;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--max-width-mobile: 100%;--max-width-tablet: 768px;--max-width-desktop: 1200px;--min-touch-target: 44px;--safe-area-inset-top: env(safe-area-inset-top);--safe-area-inset-right: env(safe-area-inset-right);--safe-area-inset-bottom: env(safe-area-inset-bottom);--safe-area-inset-left: env(safe-area-inset-left);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .5);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .6)}body{background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.5}#root{display:flex;flex-direction:column}h1{font-family:var(--font-family-display);font-size:var(--font-size-2xl);font-synthesis:none;font-weight:400;line-height:1.2}h2{font-family:var(--font-family-display);font-size:var(--font-size-xl);font-synthesis:none;font-weight:400;line-height:1.3}h3{font-family:var(--font-family-display);font-size:var(--font-size-lg);font-synthesis:none;font-weight:400;line-height:1.4}p{font-size:var(--font-size-md);line-height:1.6}.numeric{font-variant-numeric:tabular-nums}button{font-family:inherit;font-size:var(--font-size-md);cursor:pointer;border:none;background:none;color:inherit}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover);text-decoration:underline}input,textarea,select{font-family:inherit;font-size:var(--font-size-md);color:var(--color-text-primary);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);width:100%}input:focus,textarea:focus,select:focus{outline:2px solid var(--color-accent);outline-offset:2px}button:focus-visible,a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.safe-area-inset-top{padding-top:var(--safe-area-inset-top)}.safe-area-inset-bottom{padding-bottom:var(--safe-area-inset-bottom)}.safe-area-inset-left{padding-left:var(--safe-area-inset-left)}.safe-area-inset-right{padding-right:var(--safe-area-inset-right)}@media(min-width:768px){:root{--font-size-xs: 13px;--font-size-sm: 15px;--font-size-md: 17px;--font-size-lg: 20px;--font-size-xl: 28px;--font-size-2xl: 36px}}@media(min-width:1024px){:root{--font-size-xs: 14px;--font-size-sm: 16px;--font-size-md: 18px;--font-size-lg: 22px;--font-size-xl: 30px;--font-size-2xl: 40px}}