:root{--color-bg:#0b0d12;--color-surface:#161922;--color-surface-raised:#1f2330;--color-border:#2c3140;--color-text:#f5f6f8;--color-text-muted:#a3a9b6;--color-primary:#e11d48;--color-primary-pressed:#be123c;--color-on-primary:#fff;--color-accent:#60a5fa;--color-success:#4ade80;--color-warning:#fbbf24;--color-danger:#f87171;--color-focus:#93c5fd;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--text-sm:14px;--text-md:16px;--text-lg:20px;--text-xl:28px;--text-hero:64px;--duration-fast:.15s;--duration-base:.22s;--ease-out:cubic-bezier(.22, 1, .36, 1);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-md);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;line-height:1.5}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.screen{gap:var(--space-5);max-width:560px;min-height:100dvh;padding:calc(var(--space-5) + var(--safe-top)) calc(var(--space-4) + var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left));flex-direction:column;margin:0 auto;display:flex}.screen--center{text-align:center;justify-content:center;align-items:center}.screen__header{align-items:center;gap:var(--space-3);min-height:44px;display:flex}.screen__title{font-size:var(--text-xl);margin:0;font-weight:700;line-height:1.2}.screen__footer{gap:var(--space-3);flex-direction:column;margin-top:auto;display:flex}.muted{color:var(--color-text-muted)}.num{font-variant-numeric:tabular-nums}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:52px;padding:0 var(--space-5);border-radius:var(--radius-md);font-size:var(--text-md);cursor:pointer;touch-action:manipulation;transition:background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast);border:0;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn--primary{background:var(--color-primary);color:var(--color-on-primary)}.btn--primary:active{background:var(--color-primary-pressed)}.btn--secondary{background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border)}.btn--ghost{color:var(--color-text-muted);background:0 0}.btn--block{width:100%}.icon-btn{background:var(--color-surface-raised);cursor:pointer;touch-action:manipulation;border:0;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}.game-card{gap:var(--space-4);background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--color-primary) 35%, transparent) 0%, transparent 60%), var(--color-surface);flex-direction:column;display:flex}.game-card__title{font-size:var(--text-xl);margin:0;font-weight:800;line-height:1.15}.game-card__desc{color:var(--color-text-muted);margin:0}.stats{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.stat{background:var(--color-surface-raised);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}.stat__label{font-size:var(--text-sm);color:var(--color-text-muted);display:block}.stat__value{font-size:var(--text-lg);font-weight:700;display:block}.badge{align-self:flex-start;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-sm);background:color-mix(in srgb, var(--color-warning) 18%, transparent);color:var(--color-warning);border-radius:999px;font-weight:600;display:inline-flex}.badge--danger{background:color-mix(in srgb, var(--color-danger) 18%, transparent);color:var(--color-danger)}.result-score{font-size:var(--text-hero);margin:0;font-weight:800;line-height:1}.tabs{gap:var(--space-1);padding:var(--space-1);background:var(--color-surface);border-radius:var(--radius-md);grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);display:grid}.tab{border-radius:var(--radius-sm);min-height:44px;color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast), color var(--duration-fast);background:0 0;border:0;font-weight:600}.tab[aria-selected=true]{background:var(--color-surface-raised);color:var(--color-text)}.board{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.board__row{align-items:center;gap:var(--space-3);min-height:52px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--color-surface);grid-template-columns:44px 1fr auto;display:grid}.board__row--me{background:color-mix(in srgb, var(--color-primary) 22%, var(--color-surface));outline:1px solid color-mix(in srgb, var(--color-primary) 60%, transparent)}.board__rank{color:var(--color-text-muted);font-weight:700}.board__name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.board__score{font-weight:700}.skeleton{border-radius:var(--radius-md);background:linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-raised) 50%, var(--color-surface) 100%);background-size:200% 100%;animation:1.2s linear infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.spinner{border:4px solid var(--color-surface-raised);border-top-color:var(--color-primary);border-radius:50%;width:40px;height:40px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.play{background:var(--color-bg);touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}.play__stage{inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);position:absolute}.play__exit{top:calc(var(--safe-top) + var(--space-3));left:calc(var(--safe-left) + var(--space-3));z-index:10;position:absolute}.dialog-backdrop{z-index:100;padding:var(--space-4) var(--space-4) calc(var(--space-4) + var(--safe-bottom));background:#0009;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.dialog{gap:var(--space-4);flex-direction:column;width:100%;max-width:480px;display:flex}.dialog__title{font-size:var(--text-lg);margin:0}.rotate-hint{display:none}@media (orientation:landscape) and (max-height:500px){.rotate-hint{bottom:calc(var(--safe-bottom) + var(--space-2));z-index:50;padding:var(--space-2) var(--space-4);background:var(--color-surface-raised);color:var(--color-text-muted);font-size:var(--text-sm);border-radius:999px;display:block;position:fixed;left:50%;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}