*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}button,input,select,textarea{font:inherit}:root{--bg: #05050a;--surface: #0e0e18;--border: #6600aa;--accent: #ff0077;--accent-text: #ff66aa;--text: #ffffff;--muted: #d0c8e0;--focus: #00ffdd;--gold: #ffd700;--danger: #ef5350;--success: #4caf50;--castle: #00ff66;--on-accent: #000;--glass: rgba(15, 15, 19, .82);--hairline: rgba(255, 255, 255, .08);--r-sm: .25rem;--r-md: .5rem;--r-lg: .875rem;--r-pill: 999px;--s-1: .25rem;--s-2: .5rem;--s-3: .75rem;--s-4: 1rem;--s-5: 1.5rem;--s-6: 2rem;--fs-xs: .75rem;--fs-sm: .875rem;--fs-md: 1rem;--fs-lg: 1.125rem;--fs-xl: 1.5rem;--fs-2xl: 2rem;--fs-3xl: 2.75rem;--fw-strong: 700;--elev-1: 0 1px 3px rgba(0, 0, 0, .35);--elev-2: 0 4px 16px rgba(0, 0, 0, .45);--elev-3: 0 10px 48px rgba(0, 0, 0, .6);--glow: 0 0 12px rgba(255, 0, 119, .45);--z-bg: 0;--z-hud: 10;--z-fab: 20;--z-nav: 40;--z-auth: 50;--z-result: 90;--z-overlay: 100}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:16px;font-weight:450;line-height:1.5}h1,h2,h3,h4,th,strong,b{font-weight:var(--fw-strong)}button{font-weight:600}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}#bg-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-bg);pointer-events:none;background-color:var(--bg)}#bg-layer:before,#bg-layer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}#bg-layer:before{opacity:0;background-repeat:repeat}#bg-layer:after{background:radial-gradient(125% 125% at 50% 45%,transparent 48%,rgba(0,0,0,.72) 100%)}#app{height:100%;display:flex;flex-direction:column;position:relative;z-index:1}body[data-route=lobby] #bg-layer,body[data-route=review] #bg-layer{background-image:radial-gradient(90% 65% at 50% -10%,var(--lobby-glow, rgba(255, 0, 119, .2)),transparent 62%),radial-gradient(60% 45% at 12% 105%,var(--lobby-glow, rgba(255, 0, 119, .14)),transparent 70%),radial-gradient(55% 40% at 92% 88%,var(--lobby-glow, rgba(255, 0, 119, .1)),transparent 72%)}body[data-route=lobby] #bg-layer:before{opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff' fill-opacity='0.035'%3E%3Crect x='8' y='70' width='26' height='50'/%3E%3Crect x='8' y='62' width='6' height='10'/%3E%3Crect x='20' y='62' width='6' height='10'/%3E%3Crect x='52' y='84' width='22' height='36'/%3E%3Crect x='52' y='77' width='5' height='9'/%3E%3Crect x='63' y='77' width='5' height='9'/%3E%3Crect x='90' y='60' width='24' height='60'/%3E%3Crect x='90' y='52' width='6' height='10'/%3E%3Crect x='102' y='52' width='6' height='10'/%3E%3C/g%3E%3C/svg%3E");background-position:0 100%;background-repeat:repeat-x}body[data-route=review] #bg-layer{filter:saturate(.55)}body[data-route=game] #bg-layer,body[data-route=local] #bg-layer,body[data-route=solo] #bg-layer{background-color:var(--board-dark, var(--bg))}body[data-route=game] #bg-layer:before,body[data-route=local] #bg-layer:before,body[data-route=solo] #bg-layer:before{opacity:1;background-image:linear-gradient(45deg,var(--board-mix, transparent) 25%,transparent 25%,transparent 75%,var(--board-mix, transparent) 75%),linear-gradient(45deg,var(--board-mix, transparent) 25%,transparent 25%,transparent 75%,var(--board-mix, transparent) 75%);background-size:64px 64px;background-position:0 0,32px 32px;opacity:.5}body[data-route=pixie] #bg-layer{background-image:radial-gradient(70% 55% at 18% 0%,rgba(214,198,236,.16),transparent 65%),radial-gradient(65% 50% at 85% 12%,rgba(248,201,168,.13),transparent 68%),radial-gradient(75% 60% at 50% 105%,rgba(191,227,208,.12),transparent 70%)}body[data-route=pixie] #bg-layer:before{opacity:.6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Ccircle cx='24' cy='32' r='1.6'/%3E%3Ccircle cx='108' cy='18' r='1.1'/%3E%3Ccircle cx='68' cy='76' r='1.9'/%3E%3Ccircle cx='140' cy='92' r='1.3'/%3E%3Ccircle cx='36' cy='124' r='1.5'/%3E%3Ccircle cx='96' cy='140' r='1'/%3E%3Ccircle cx='148' cy='48' r='1.7'/%3E%3Ccircle cx='8' cy='84' r='1.2'/%3E%3C/g%3E%3C/svg%3E")}@media (prefers-reduced-motion: no-preference){body[data-route=lobby] #bg-layer:before{animation:bg-drift-x 90s linear infinite}body[data-route=pixie] #bg-layer:before{animation:bg-drift 120s linear infinite}}@keyframes bg-drift-x{0%{background-position:0 100%}to{background-position:120px 100%}}@keyframes bg-drift{0%{background-position:0 0}to{background-position:160px 160px}}.view{flex:1;display:flex;flex-direction:column}.hidden{display:none!important}.top-nav{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--hairline);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;z-index:var(--z-nav)}.nav-brand{display:flex;align-items:center;flex-shrink:0}.nav-brand img{display:block}.nav-games{display:flex;gap:var(--s-1)}.nav-link{padding:.4rem .85rem;border-radius:var(--r-pill);border:1px solid transparent;color:var(--muted);text-decoration:none;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;transition:color .15s,background .15s,border-color .15s}.nav-link:hover{color:var(--text);border-color:var(--hairline)}body[data-route=lobby] .nav-link[data-route-link=lobby],body[data-route=local] .nav-link[data-route-link=lobby],body[data-route=solo] .nav-link[data-route-link=lobby],body[data-route=game] .nav-link[data-route-link=lobby],body[data-route=review] .nav-link[data-route-link=lobby],body[data-route=pixie] .nav-link[data-route-link=pixie]{background:var(--lobby-accent, var(--accent));border-color:var(--lobby-accent, var(--accent));color:var(--on-accent)}body[data-route=game] .top-nav,body[data-route=local] .top-nav,body[data-route=solo] .top-nav,body[data-route=review] .top-nav{display:none}.view-pending{margin:auto;color:var(--muted);font-size:var(--fs-lg)}#view-lobby{align-items:center;justify-content:flex-start;gap:1.5rem;padding:2rem 1.5rem}.lobby-header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}.lobby-demos{display:flex;gap:1rem;justify-content:center;align-items:center;margin:.5rem 0}.lobby-demo{width:140px;height:140px;border-radius:8px;overflow:hidden}.demo-board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px;width:100%;height:100%;background:#ffffff14;border-radius:8px;padding:2px}.demo-cell{background:var(--surface);display:flex;flex-direction:column-reverse;gap:0;padding:0;border-radius:1px;border:1px solid transparent}.demo-cell.demo-castle{border-color:#00ff6645;background:#00ff660f}.demo-cell.demo-crowned{box-shadow:inset 0 0 4px #ffd70080;border-color:var(--gold)}.demo-slot{flex:1;min-height:0;border-radius:0}#view-lobby h1{font-size:3rem;letter-spacing:.15em;text-transform:uppercase;color:var(--lobby-accent, var(--accent));margin-bottom:.15rem}.lobby-tagline{font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin:0}.auth-bar{margin-left:auto;z-index:var(--z-auth)}.auth-bar:empty{display:none}.auth-profile-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#ffffff14;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .15s,background .15s;overflow:hidden}.auth-profile-btn:hover{border-color:var(--lobby-accent, var(--text));background:#ffffff24}.auth-profile-logged-in{border-color:var(--lobby-accent, var(--accent))}.auth-profile-btn .auth-avatar{width:100%;height:100%;object-fit:cover}.auth-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;box-shadow:0 4px 20px #00000080;min-width:140px}.auth-avatar-placeholder{width:100%;height:100%;background:#ffffff1f}.auth-name{font-size:.8rem;color:var(--text);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.auth-signout{font-size:.75rem;padding:.3rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--muted);cursor:pointer;width:100%}.auth-signout:hover{color:var(--text);border-color:var(--text)}.lobby-form{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:340px;background:#0e0e1880;border:1px solid var(--lobby-accent, var(--border));border-radius:12px;padding:1.25rem}.lobby-form input{padding:.75rem 1rem;border:1px solid var(--lobby-accent, var(--border));border-radius:6px;background:var(--bg);color:var(--lobby-text, var(--text));font-size:1rem;min-height:44px}.pick-color-label{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;text-align:center;margin:0}.lobby-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.btn{padding:.75rem;border:none;border-radius:var(--r-md);background:var(--lobby-accent, var(--accent));color:var(--on-accent);font-size:var(--fs-md);cursor:pointer;min-height:44px;transition:filter .15s,transform .1s,background .15s,color .15s,border-color .15s}.btn:hover{filter:brightness(1.15)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}#btn-create{font-size:1.05rem;letter-spacing:.04em}.btn-secondary{background:transparent;border:1px solid var(--lobby-accent, var(--accent));color:var(--lobby-accent, var(--accent))}.btn-secondary:hover{background:var(--lobby-accent, var(--accent));color:var(--on-accent);filter:none}.btn-ghost{background:transparent;border:1px solid var(--hairline);color:var(--muted)}.btn-ghost:hover{background:transparent;border-color:var(--lobby-accent, var(--accent));color:var(--text);filter:none}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;min-height:0;padding:0;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}.btn-icon:hover{border-color:var(--lobby-accent, var(--accent));filter:none}.lobby-divider{width:60px;height:1px;background:var(--lobby-accent, var(--border));opacity:.4}.local-setup{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:340px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem}.local-setup input{padding:.75rem 1rem;border:1px solid var(--lobby-accent, var(--border));border-radius:6px;background:var(--bg);color:var(--lobby-text, var(--text));font-size:1rem;min-height:44px}.local-setup button{padding:.75rem;border:none;border-radius:6px;background:var(--lobby-accent, var(--accent));color:var(--on-accent);font-size:1rem;cursor:pointer;min-height:44px}.local-setup button:hover{filter:brightness(1.15)}.lobby-secondary-row{display:flex;gap:.5rem}.lobby-secondary-row button{flex:1}.local-player-row{display:flex;align-items:center;gap:.75rem}.local-player-label{font-size:.9rem;font-weight:700;color:var(--muted);width:24px;flex-shrink:0}.color-picker{display:grid;grid-template-columns:repeat(6,32px);gap:.4rem;justify-content:center}.create-picker{grid-template-columns:repeat(6,42px);gap:.5rem}.create-picker .color-swatch{width:42px;height:42px;box-shadow:0 2px 8px #0000004d}.color-swatch{width:32px;height:32px;border-radius:50%;border:none;outline:2px solid transparent;outline-offset:2px;cursor:pointer;padding:0;transition:transform .1s,outline-color .1s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{outline-color:var(--gold);transform:scale(1.15)}.match-list{width:100%;max-width:500px;display:flex;flex-direction:column;gap:.5rem}.match-tabs{display:flex;gap:.35rem;margin-bottom:.5rem;justify-content:center}.match-tab{padding:.45rem 1.1rem;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem;min-height:36px;letter-spacing:.04em;transition:background .15s,color .15s,border-color .15s}.match-tab:hover:not(.active){border-color:var(--lobby-accent, var(--border));color:var(--text)}.match-tab.active{background:var(--lobby-accent, var(--accent));color:var(--on-accent);border-color:var(--lobby-accent, var(--accent))}.player-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.35rem;vertical-align:middle}.vs{color:var(--muted);font-size:.9rem;margin:0 .35rem}.in-progress-tag{font-size:.875rem;color:var(--muted);white-space:nowrap}.enter-btn{padding:.5rem .9rem;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;white-space:nowrap;min-height:40px}.enter-btn:hover{border-color:var(--text);color:var(--text)}.match-item{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;min-height:52px}.match-item-info{display:flex;flex-direction:column;gap:.1rem;flex:1}.match-host{font-weight:600;font-size:1rem}.match-count{color:var(--muted);font-size:.9rem}.match-item-actions{display:flex;align-items:center;gap:.6rem}.join-color-wrap{position:relative}.join-color-trigger{width:36px;height:36px;border-radius:6px!important;cursor:pointer;border:2px solid var(--border)!important;outline:none!important;flex-shrink:0}.join-color-trigger:hover{border-color:var(--gold)!important;transform:none}.join-color-popup{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-overlay);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.5rem;box-shadow:0 4px 20px #00000080;grid-template-columns:repeat(6,22px);gap:.3rem;justify-content:center}.join-color-popup:not(.hidden){display:grid}.match-item .join-btn{padding:.5rem .9rem;border:1px solid var(--lobby-accent, var(--accent));border-radius:5px;background:transparent;color:var(--lobby-accent, var(--accent));cursor:pointer;font-size:1rem;white-space:nowrap;min-height:40px}.match-item .join-btn:hover{background:var(--lobby-accent, var(--accent));color:var(--on-accent)}.match-item .cancel-btn{padding:.5rem .9rem;border:1px solid var(--danger);border-radius:5px;background:transparent;color:var(--danger);cursor:pointer;font-size:1rem;white-space:nowrap;min-height:40px}.match-item .cancel-btn:hover{background:var(--danger);color:var(--on-accent)}.own-tag{color:var(--muted);font-size:.9rem;font-weight:400}.match-item button:hover{background:var(--lobby-accent, var(--accent));color:var(--on-accent)}.active-match{flex-direction:column;gap:.35rem;padding:.6rem .75rem}.active-top-row{display:flex;justify-content:space-between;align-items:center}.active-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.active-player-col{display:flex;flex-direction:column;gap:.2rem}.active-col-header{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.active-col-stats{display:flex;gap:.4rem;flex-wrap:wrap}.active-stat{font-size:.875rem;color:var(--muted);white-space:nowrap}#view-game{position:relative;z-index:0}#canvas-container{flex:1;width:100%;height:100%}#canvas-container canvas{display:block;width:100%!important;height:100%!important}#canvas-container canvas{cursor:pointer}#game-fab{position:absolute;bottom:1.5rem;right:1.5rem;z-index:var(--z-fab)}#fab-trigger{width:48px;height:48px;border-radius:50%;border:1px solid var(--player-color, var(--border));background:#0f0f13e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 2px 14px #00000073;transition:background .15s,border-color .15s}#fab-trigger:hover{background:#282838f2;border-color:var(--accent)}#fab-menu{position:absolute;bottom:calc(100% + .5rem);right:0;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:.4rem;transition:opacity .15s,transform .15s;transform-origin:bottom right}#fab-menu.hidden{opacity:0;pointer-events:none;transform:scaleY(.7) translateY(8px)}.fab-row{display:flex;align-items:center;gap:.55rem}.fab-item{width:42px;height:42px;border-radius:50%;border:1px solid var(--player-color, var(--border));background:#0f0f13d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--muted);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;flex-shrink:0;transition:color .15s,border-color .15s,background .15s}.fab-item:hover{color:var(--text);border-color:var(--accent)}.fab-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#0f0f13b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.28rem .65rem;border-radius:999px;white-space:nowrap;cursor:pointer;border:1px solid rgba(255,255,255,.06)}#hud-room-bar{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;flex-direction:row;align-items:stretch;background:#0f0f1399;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--player-color, rgba(58,58,78,.5));border-top:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;z-index:var(--z-hud);white-space:nowrap;min-width:300px}.hud-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.3rem .75rem .35rem;border-left:1px solid rgba(58,58,78,.5);border-right:1px solid rgba(58,58,78,.5);gap:.1rem;flex:1;pointer-events:none}#hud-room{font-size:.7rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.hud-title{font-size:.75rem;font-weight:800;letter-spacing:.18em;transition:color .3s ease}.hud-side{display:flex;flex-direction:row;align-items:center;gap:.4rem;padding:.35rem .5rem;transition:opacity .25s ease;pointer-events:none}.hud-side-left{padding-left:0}.hud-side-right{flex-direction:row-reverse;padding-right:0}.hud-side:not(.hud-side-active){opacity:.5}.hud-color-bar{width:3px;align-self:stretch;border-radius:2px;flex-shrink:0;transition:box-shadow .25s ease}.hud-side.hud-side-active .hud-color-bar{box-shadow:0 0 8px 2px var(--side-color, var(--accent))}.hud-stats-row{display:flex;gap:.55rem;align-items:center}.hud-stat{font-size:.8rem;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:.25rem}.hud-icon{display:inline-block;width:9px;height:9px;border-radius:2px;flex-shrink:0}#compass{position:absolute;bottom:1.5rem;left:1.5rem;display:flex;align-items:center;gap:.4rem;z-index:9;pointer-events:auto}.board-dir{position:absolute;z-index:8;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:#ffffff4d;pointer-events:none;text-transform:uppercase}#compass-svg{width:60px;height:60px;cursor:default}#compass-ccw,#compass-cw{width:32px;height:32px;border:1px solid var(--player-color, var(--border));border-radius:50%;background:#0f0f13b3;color:var(--muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.compass-dir{cursor:pointer}.compass-dir text{fill:#888;transition:fill .15s}.compass-dir:hover text,.compass-dir:focus-visible text{fill:var(--accent)}.compass-dir:focus{outline:none}.compass-dir:focus-visible circle{stroke:var(--accent);stroke-width:1.5}#compass-ccw:hover,#compass-cw:hover{background:var(--accent);border-color:var(--accent)}#action-bar{position:absolute;left:50%;bottom:1.25rem;z-index:var(--z-hud);display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;max-width:min(560px,calc(100vw - 2rem));padding:.4rem .5rem;background:#1a1a249e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--player-color, rgba(58, 58, 78, .5));border-radius:12px;box-shadow:0 6px 26px #00000073;opacity:0;pointer-events:none;transform:translate(-50%) translateY(calc(100% + 2rem));transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .16s linear}#action-bar.open{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.action-bar-info{font-size:.85rem;color:var(--muted);padding:0 .5rem 0 .35rem;white-space:nowrap}#action-bar button{flex:1 1 auto;min-width:5.5rem;min-height:40px;padding:.5rem .8rem;text-align:center;background:transparent;border:none;border-radius:7px;color:var(--text);cursor:pointer;font-size:.95rem;white-space:nowrap}#action-bar button:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}#action-bar button:disabled{cursor:default;opacity:.45;color:var(--muted)}#action-bar button.pending{background:var(--accent);color:var(--on-accent);outline:2px solid var(--gold);outline-offset:-2px}@media (prefers-reduced-motion: reduce){#action-bar{transition:opacity .12s linear}}.fly-2d{position:absolute;border-radius:2px;pointer-events:none;will-change:transform,opacity;transition:transform var(--fly-dur, .26s) cubic-bezier(.2,.7,.3,1),opacity .12s linear}.help-btn,.pixie-rules-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--player-color, var(--border));background:#0f0f13bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--player-color, var(--muted));font-size:1.3rem;font-weight:700;cursor:pointer;z-index:var(--z-hud);display:flex;align-items:center;justify-content:center;line-height:1}.help-btn:hover,.pixie-rules-btn:hover{color:var(--text);border-color:var(--text)}.mute-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#0f0f13bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:1.1rem;cursor:pointer;z-index:var(--z-hud);display:flex;align-items:center;justify-content:center;line-height:1}.mute-btn:hover{border-color:var(--text)}.lobby-form .lobby-help-btn{width:100%;height:auto;border-radius:8px;padding:.55rem 1rem;font-size:.85rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.18);color:#fff;background:#ffffff14;margin-top:.25rem}.lobby-form .lobby-help-btn:hover{color:var(--lobby-accent, var(--text));border-color:var(--lobby-accent, var(--border));background:#ffffff1f}.lobby-form .lobby-help-btn.highlight{animation:help-pulse 2s ease-in-out infinite;border-color:var(--lobby-accent, var(--text));color:#fff;background:#ffffff1a}@keyframes help-pulse{0%,to{box-shadow:0 0 #ffffff4d}50%{box-shadow:0 0 12px 4px #ffffff26}}.btn-advanced-toggle{width:100%;border-radius:8px;padding:.5rem 1rem;font-size:.8rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.12);color:var(--muted);background:transparent;cursor:pointer;transition:color .15s,border-color .15s;position:relative}.btn-advanced-toggle:after{content:"▾";margin-left:.4em;display:inline-block;transition:transform .25s ease}.btn-advanced-toggle.open:after{transform:rotate(180deg)}.btn-advanced-toggle:hover{color:var(--text);border-color:#ffffff40}.advanced-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;overflow:hidden}.advanced-panel>*{overflow:hidden}.advanced-panel.open{grid-template-rows:1fr}.advanced-inner{display:flex;flex-direction:column;gap:.6rem;padding-top:.6rem}.advanced-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.advanced-row label{font-size:.78rem;color:var(--muted);letter-spacing:.04em;white-space:nowrap}.advanced-val{font-size:.78rem;color:var(--text);min-width:1.2em;text-align:center}.advanced-row input[type=range]{flex:1;max-width:120px;accent-color:var(--lobby-accent, var(--accent));height:4px;cursor:pointer}.view-toggle{display:flex;border:1px solid rgba(255,255,255,.15);border-radius:6px;overflow:hidden}.view-toggle-btn{padding:.3rem .7rem;font-size:.75rem;font-weight:700;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;min-height:0}.lobby-form .view-toggle-btn{background:transparent;color:var(--muted);min-height:0;padding:.3rem .7rem;font-size:.75rem}.lobby-form .view-toggle-btn.active,.view-toggle-btn.active{background:var(--lobby-accent, var(--accent));color:var(--on-accent)}.lobby-form .view-toggle-btn:hover:not(.active),.view-toggle-btn:hover:not(.active){color:var(--text);background:#ffffff14}#help-overlay,#pixie-help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center}.help-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009}.help-modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem 2rem;max-width:min(56rem,calc(100vw - 2rem));width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);overflow-y:auto;box-shadow:var(--elev-3)}.help-modal h2{color:var(--accent-text);font-size:1.4rem;margin-bottom:.75rem}.help-modal h3{color:var(--text);font-size:1.05rem;margin-top:1rem;margin-bottom:.35rem}.help-body p{font-size:1rem;color:var(--muted);line-height:1.6;margin-bottom:.5rem}.help-body strong{color:var(--text)}.help-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:var(--muted);font-size:1.6rem;cursor:pointer;line-height:1;padding:.3rem .5rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.help-close:hover{color:var(--text)}.result-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:var(--z-result);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--s-4)}.result-bg{position:absolute;top:0;right:0;bottom:0;left:0}.result-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s-4);width:min(30rem,100%);text-align:center}.result-crest{line-height:0}.result-headline{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--fs-2xl);letter-spacing:.01em}.result-subhead{margin:-.5rem 0 0;color:var(--muted);font-size:var(--fs-sm)}.result-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}.result-table th{padding:var(--s-1) var(--s-2);color:var(--muted);font-weight:600;text-align:center;border-bottom:1px solid var(--hairline)}.result-table td{padding:.45rem var(--s-2);text-align:center}.result-table th:first-child,.result-table td:first-child{text-align:left}.result-row-win td{font-weight:var(--fw-strong)}.result-row-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.4rem;vertical-align:middle}.result-actions{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center;width:100%}.result-actions .btn{flex:1 1 10rem}.result-win .result-bg{background:radial-gradient(70% 70% at 50% 42%,rgba(255,215,0,.22),transparent 62%),radial-gradient(120% 120% at 50% 50%,#12100a 38%,#05050a)}.result-win .result-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(58% 52% at 50% 46%,rgba(5,5,10,.94) 0%,rgba(5,5,10,.6) 48%,transparent 78%),radial-gradient(130% 130% at 50% 50%,transparent 32%,rgba(5,5,10,.88) 100%)}.result-win .result-bg:before{content:"";position:absolute;top:50%;left:50%;width:250vmax;height:250vmax;margin:-125vmax 0 0 -125vmax;background:repeating-conic-gradient(from 0deg,rgba(255,215,0,.07) 0deg 4deg,transparent 4deg 28deg)}.result-win .result-crest{color:var(--gold);filter:drop-shadow(0 0 14px rgba(255,215,0,.55))}.result-win .result-headline{color:var(--gold)}.result-loss .result-bg{background:linear-gradient(180deg,#0b0b13,#05050a),radial-gradient(110% 110% at 50% 40%,rgba(120,130,160,.1),transparent 70%)}.result-loss .result-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}.result-loss .result-crest{color:var(--muted);opacity:.55}.result-loss .result-headline{color:var(--muted)}.result-loss .result-actions .btn{background:transparent;border:1px solid var(--hairline);color:var(--text)}.result-loss .result-actions .btn:hover{border-color:var(--muted);filter:none}.result-draw .result-bg,.result-neutral .result-bg{background:radial-gradient(75% 65% at 50% 40%,var(--result-accent, var(--accent)),transparent 62%),radial-gradient(120% 120% at 50% 50%,#0b0b14 40%,#05050a)}.result-draw .result-bg,.result-neutral .result-bg{opacity:.85}.result-draw .result-crest,.result-neutral .result-crest{color:var(--result-accent, var(--accent-text))}.result-neutral .result-headline{color:var(--result-accent, var(--text))}.result-fx{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.confetti{position:absolute;top:-10vh;left:var(--x);width:var(--size);height:calc(var(--size) * 1.8);border-radius:1px;opacity:0;will-change:transform,opacity}@media (prefers-reduced-motion: no-preference){.confetti{animation:result-fall var(--dur) linear var(--delay) 3 forwards}.result-win .result-bg:before{animation:result-spin 48s linear infinite}.result-content{animation:result-rise .5s cubic-bezier(.2,.8,.25,1) both}.result-loss .result-content{animation-duration:.8s}}@keyframes result-fall{0%{transform:translateZ(0) rotate(0);opacity:0}8%{opacity:1}85%{opacity:1}to{transform:translate3d(0,120vh,0) rotate(var(--rot));opacity:0}}@keyframes result-spin{to{transform:rotate(360deg)}}@keyframes result-rise{0%{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}.history-item{cursor:pointer}.history-item:hover{border-color:var(--accent)}.history-players{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}.history-result{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;margin-left:.5rem}.leaderboard-list{display:flex;flex-direction:column;gap:.35rem}.leaderboard-row{display:flex;align-items:center;padding:.6rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;gap:.6rem;font-size:.875rem}.leaderboard-me{border-color:var(--lobby-accent, var(--accent));background:#ff007714}.lb-rank{font-weight:800;min-width:2rem;color:var(--muted)}.lb-name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-rating{font-weight:800;color:var(--accent-text);min-width:3rem;text-align:right}.lb-record{color:var(--muted);font-size:.8rem;min-width:4rem;text-align:center}.lb-winrate{color:var(--muted);font-size:.8rem;min-width:2.5rem;text-align:right}.lb-streak{font-size:.75rem}#view-review{position:relative}#review-canvas-container{flex:1;width:100%;height:100%}#review-canvas-container canvas{display:block;width:100%!important;height:100%!important}#review-back{position:absolute;top:1rem;left:1rem;background:#0f0f13bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;font-size:1.2rem;padding:.5rem .85rem;z-index:var(--z-hud);line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}#review-back:hover{color:var(--text);border-color:var(--text)}#review-controls{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;background:#0f0f13d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:10px;padding:.5rem 1rem;z-index:var(--z-hud)}#review-controls button{padding:.5rem .85rem;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;font-size:1rem;min-width:44px;min-height:40px}#review-controls button:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}#review-controls button:disabled{opacity:.4;cursor:default;color:var(--muted)}#review-move-label{font-size:1rem;color:var(--muted);white-space:nowrap;min-width:100px;text-align:center}#review-winner{position:absolute;top:1rem;left:50%;transform:translate(-50%);background:#0f0f13e6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid var(--accent);border-radius:10px;padding:.5rem 1.5rem;font-size:1.1rem;font-weight:700;color:var(--text);z-index:var(--z-hud);white-space:nowrap}@media (pointer: fine) and (min-width: 1200px){html,body{font-size:18px}}@media (max-width: 760px),(pointer: coarse){#action-bar{left:.75rem;right:.75rem;max-width:none;bottom:calc(1rem + 64px + env(safe-area-inset-bottom,0px));transform:translateY(calc(100% + 5rem))}#action-bar.open{transform:translateY(0)}}@media (pointer: coarse){#action-bar button{min-height:46px;font-size:1rem}.hud-title{font-size:1rem;letter-spacing:.2em}.hud-stat{font-size:.95rem}.hud-icon{width:11px;height:11px}#hud-room-bar{min-width:0}}#board-2d{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:3px;width:min(88vw,88vh);height:min(88vw,88vh);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg);border-radius:4px;padding:3px}.cell-2d{background:var(--surface);display:flex;flex-direction:column-reverse;gap:1px;padding:2px;border-radius:3px;cursor:pointer;border:1px solid transparent;transition:border-color .15s;position:relative}.cell-2d:hover{border-color:var(--muted)}.cell-2d.castle-2d{border-color:#00ff6645;background:#00ff660f}.cell-2d.crowned-2d{box-shadow:inset 0 0 8px #ffd70080;border-color:var(--gold)}.cell-2d.highlight-2d{border-color:var(--gold);box-shadow:0 0 6px #ffd70099}.cell-2d.glow-2d{animation:glow2d 1.5s ease-in-out infinite}@keyframes glow2d{0%,to{box-shadow:0 0 4px #ffffff26}50%{box-shadow:0 0 10px #fff6}}.slot-2d{flex:1;border-radius:2px;min-height:0;transition:background .15s}.slot-2d.preview-2d{opacity:var(--preview-opacity, .5)}.tutorial-wrapper{margin-top:1.25rem;border-top:1px solid var(--border);padding-top:1rem}.mini-board{position:relative}.mini3d{position:relative;width:100%;aspect-ratio:16 / 10;max-height:44vh;background:#12121a;border:1px solid var(--border);border-radius:6px;overflow:hidden}.mini3d canvas{display:block;width:100%!important;height:100%!important}.mini-board-bar{display:flex;justify-content:flex-end;align-items:center;gap:.35rem;margin:.35rem 0 .6rem}.mini3d-rot,.board-view-toggle{min-width:34px;height:30px;padding:0 .5rem;border-radius:6px;border:1px solid var(--border);background:#ffffff0d;color:var(--muted);font-size:.8rem;cursor:pointer;transition:color .15s,border-color .15s}.mini3d-rot:hover:not(:disabled),.board-view-toggle:hover{color:var(--text);border-color:var(--accent)}.mini3d-rot:disabled{opacity:.35;cursor:default}@media (max-width: 768px){.mini3d{max-height:38vh}}.tutorial-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:2px;width:100%;aspect-ratio:1;background:var(--bg);border-radius:4px;padding:2px}.tut-cell{background:var(--surface);display:flex;flex-direction:column-reverse;gap:1px;padding:1px;border-radius:2px;border:1px solid transparent;position:relative}.tut-cell.tut-castle{border-color:#00ff6645;background:#00ff6614}.tut-cell.tut-active{border-color:var(--gold);box-shadow:0 0 6px #ffd70080}.tut-slot{flex:1;border-radius:1px;min-height:0}.tutorial-info{margin-top:.75rem;font-size:.95rem;color:var(--muted);line-height:1.5;height:calc(4 * 1.5 * .95rem);overflow-y:auto}.tutorial-info strong{color:var(--text)}.tutorial-controls{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.75rem}.tutorial-btn{padding:.4rem .8rem;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;font-size:.9rem;min-height:36px}.tutorial-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.tutorial-btn:disabled{opacity:.4;cursor:default;color:var(--muted)}.tutorial-step-label{font-size:.85rem;color:var(--muted);min-width:60px;text-align:center}.tutorial-tabs{display:flex;gap:.4rem;margin-bottom:.75rem}.tutorial-tab{flex:1;padding:.45rem .75rem;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:.85rem;min-height:36px}.tutorial-tab:hover:not(.active){color:var(--text);border-color:var(--text)}.tutorial-tab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.push-intro{font-size:.9rem;color:var(--muted);line-height:1.5;margin-bottom:1rem}.push-example{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}.push-example:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.push-example-header{margin-bottom:.5rem}.push-example-header strong{color:var(--text);font-size:.95rem}.push-example-desc{display:block;color:var(--muted);font-size:.85rem;line-height:1.4;margin-top:.15rem}.push-example-strips{display:flex;align-items:center;gap:.5rem;justify-content:center}.push-strip{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1;min-width:0}.push-strip-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}.push-strip-cells{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--bg);border-radius:3px;padding:2px;width:100%;aspect-ratio:5 / 1.4}.push-arrow{font-size:1.2rem;color:var(--accent);font-weight:700;flex-shrink:0;margin-top:1rem}.pixie-screen{max-width:640px;margin:0 auto;padding:1.5rem 1rem 2rem;width:100%}.pixie-screen h1,.pixie-screen h2{color:var(--accent-text)}.pixie-tagline{color:var(--muted);font-size:.9rem;margin:.25rem 0 1rem}.pixie-toolbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.pixie-back,.pixie-rules-btn,.pixie-print-btn{width:2.25rem;height:2.25rem}.pixie-rules-btn{font-size:1.1rem}.pixie-print-btn{font-size:1rem;text-decoration:none;color:var(--text)}.pixie-create-form{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.pixie-create-form input{flex:1;min-width:140px;padding:.5rem .75rem;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:.4rem}.pixie-match-list{display:flex;flex-direction:column;gap:.5rem}.pixie-match-item{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:.4rem;font-size:.9rem}.pixie-empty{color:var(--muted);font-size:.9rem}.pixie-opponents{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.pixie-plus{text-align:center}.pixie-plus-name{font-size:.85rem;color:var(--muted);margin-bottom:.35rem}.pixie-plus-grid{display:grid;grid-template-columns:repeat(3,var(--pixie-slot-size, 3.25rem));grid-template-rows:repeat(3,var(--pixie-slot-size, 3.25rem));gap:3px;justify-content:center}.pixie-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-xs);background:var(--surface)}.pixie-slot-matched{border-color:var(--focus)}.pixie-slot-pixieDust{border-color:var(--accent)}.pixie-slot-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.pixie-slot-part{position:absolute;left:0;right:0;bottom:0;padding:1px 2px;font-size:.625rem;line-height:1.3;text-align:center;color:var(--text);background:#000000a8;text-transform:capitalize;letter-spacing:.02em}.pixie-slot-hidden .pixie-slot-part{position:static;background:none;color:var(--muted);padding:0}.pixie-slot-mark{position:relative;font-size:var(--fs-md);text-shadow:0 1px 3px rgba(0,0,0,.9)}.pixie-slot-armour{position:absolute;top:1px;right:2px;font-size:.7rem;text-shadow:0 1px 3px rgba(0,0,0,.9)}.pixie-plus-self .pixie-plus-grid{--pixie-slot-size: 3.75rem}.pixie-plus-self .pixie-plus-name{color:var(--accent-text);font-weight:var(--fw-strong)}.pixie-slot-head{grid-column:2;grid-row:1}.pixie-slot-wings{grid-column:1;grid-row:2}.pixie-slot-body{grid-column:2;grid-row:2}.pixie-slot-arms{grid-column:3;grid-row:2}.pixie-slot-legs{grid-column:2;grid-row:3}.pixie-piles{display:flex;align-items:flex-start;justify-content:center;gap:1.5rem;margin:1rem 0;font-size:.9rem;color:var(--muted);text-align:center}.pixie-self{margin:1rem 0;display:flex;justify-content:center}.pixie-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}.pixie-hint{color:var(--muted);font-size:.85rem;text-align:center}.pixie-chooser{margin-bottom:1rem}.pixie-chooser-label{text-align:center;color:var(--accent-text);font-size:.9rem;margin-bottom:.5rem}.pixie-choice{text-transform:capitalize}.pixie-hand{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.pixie-card{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;width:8.5rem;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:.5rem;padding:.4rem;font-size:.8rem;text-align:left;cursor:pointer}.pixie-card-static{cursor:default}.pixie-card-art{display:block;width:100%;height:5.25rem;border-radius:.3rem;object-fit:cover;object-position:center}.pixie-card-name{font-weight:800;font-size:.85rem}.pixie-card-rules{color:var(--muted);font-size:.65rem;font-weight:600;line-height:1.3}.pixie-card.selected{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}.pixie-card.selected .pixie-card-name{color:var(--focus)}.pixie-pile-label{display:block;margin-bottom:.35rem}.pixie-card-back{width:8.5rem;border:1px solid var(--border)}.pixie-pile-empty{font-style:italic}.pixie-peek-list{list-style:decimal;padding-left:1.5rem;margin-bottom:1rem}.pixie-peek-list li{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0}.pixie-peek-controls button{margin-left:.3rem}.pixie-peek-card{display:flex;align-items:center;gap:.5rem}.pixie-peek-swatch{width:2.5rem;height:1.75rem;border-radius:.2rem;display:inline-block;object-fit:cover;object-position:center}.pixie-example{background:var(--surface);border-left:3px solid var(--accent);border-radius:.3rem;padding:.5rem .75rem;margin:.5rem 0 .75rem;font-size:.9rem}.pixie-error{margin-top:1rem;padding:.5rem .75rem;background:#ff007726;border:1px solid var(--accent);border-radius:.4rem;color:var(--accent-text);font-size:.85rem}@media (max-width: 768px){.pixie-screen{padding:1rem .75rem 1.5rem}.pixie-card{width:clamp(6rem,28vw,8.5rem)}.pixie-card-art{height:clamp(3.75rem,17vw,5.25rem)}.pixie-plus-grid{--pixie-slot-size: 3rem}.pixie-plus-self .pixie-plus-grid{--pixie-slot-size: 3.4rem}.pixie-opponents{gap:.5rem}}@media (max-width: 480px){.pixie-screen{padding:.75rem .5rem 1.25rem}.pixie-opponents{flex-direction:column;align-items:center;gap:.4rem}.pixie-hand{gap:.35rem}.pixie-plus-grid{--pixie-slot-size: 2.75rem}.pixie-plus-self .pixie-plus-grid{--pixie-slot-size: 3.1rem}.pixie-create-form{flex-direction:column}.pixie-create-form input{min-width:0}}@media (max-width: 1024px){.help-modal{padding:1.25rem 1.5rem}}@media (max-width: 768px){#view-lobby{padding:1.5rem 1rem;gap:1.25rem}#view-lobby h1{font-size:2.4rem}.lobby-form{max-width:100%;padding:1rem}.match-list{max-width:100%}.create-picker{grid-template-columns:repeat(6,36px);gap:.4rem}.create-picker .color-swatch{width:36px;height:36px}#hud-room-bar{min-width:0;max-width:calc(100vw - 2rem)}.hud-stats-row{gap:.35rem}.hud-stat{font-size:.75rem}#game-fab{bottom:1rem;right:1rem}#compass{bottom:1rem;left:1rem}#review-controls{bottom:1rem;padding:.4rem .75rem;gap:.5rem}.help-modal{padding:1rem 1.25rem;border-radius:10px}.help-modal h2{font-size:1.2rem}.help-modal h3{font-size:1rem}.help-body p{font-size:.9rem}.tutorial-grid{max-width:400px;margin:0 auto}}@media (max-width: 480px){#view-lobby{padding:1.25rem 1rem;gap:1rem}#view-lobby h1{font-size:2.2rem}.lobby-logo{width:56px;height:56px}.lobby-form{padding:1rem}.create-picker{grid-template-columns:repeat(6,36px);gap:.4rem}.create-picker .color-swatch{width:36px;height:36px}.hud-side{padding:.3rem .4rem;gap:.3rem}.hud-center{padding:.25rem .6rem .3rem}#game-fab{bottom:1rem;right:1rem}#compass{bottom:1rem;left:1rem}.help-modal{max-width:calc(100vw - 1rem);width:calc(100vw - 1rem);max-height:calc(100vh - 1rem);padding:1rem 1.25rem}.result-headline{font-size:var(--fs-xl)}.result-content{gap:var(--s-3)}.result-actions{flex-direction:column}#review-controls{bottom:1rem;padding:.4rem .6rem;gap:.5rem}.push-example-strips{flex-direction:column;gap:.35rem}.push-arrow{transform:rotate(90deg);margin-top:0}}@media (max-width: 360px){#view-lobby h1{font-size:1.8rem}.lobby-secondary-row{flex-direction:column}.create-picker{grid-template-columns:repeat(6,32px);gap:.3rem}.create-picker .color-swatch{width:32px;height:32px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}