:root{--tan: #e8d5b5;--olive: #6b5a2e;--olive-deep: #3d3420;--cream: #f3ebe0;--misty: #f7ebe3;--ink: #1c1810;--pink: #e85a7a;--violet: #2a1a3a}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Source Sans 3",sans-serif;color:var(--ink);background:#100c0a}kbd{display:inline-block;padding:.15em .45em;font-size:.85em;font-family:inherit;font-weight:600;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#ffffffd9;color:#333;box-shadow:0 1px #00000014}.navbar{position:fixed;top:12px;left:12px;z-index:40;display:flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border:none;border-radius:11px;background:var(--misty);color:var(--violet);cursor:pointer;box-shadow:0 4px 18px #00000040;transition:transform .15s ease}.navbar:hover{transform:scale(1.05)}.navbar-mark{font-size:1rem;line-height:1}.navbar-title{font-family:Playfair Display,serif;font-weight:700;font-size:1rem}.canvas-wrap{position:absolute;inset:0}.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font-weight:600;z-index:5;background:#100c0a}.mode-overlay{position:absolute;inset:0;z-index:25;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:center;padding:5rem 1.25rem 3rem;background:#100c0a47;backdrop-filter:blur(2px)}.mode-card{pointer-events:auto;display:grid;gap:.85rem;width:min(100%,340px);padding:1.35rem 1.4rem;text-align:left;border:none;border-radius:22px;background:var(--misty);color:var(--ink);cursor:pointer;box-shadow:0 12px 40px #00000059;transition:transform .15s ease}.mode-card:hover{transform:scale(1.04)}.mode-card-sub{margin:0;font-size:.85rem;font-weight:600;color:var(--pink)}.mode-card h2{margin:.15rem 0 .35rem;font-family:Playfair Display,serif;font-size:1.45rem}.mode-card-text{margin:0;font-size:.9rem;line-height:1.4;color:#4a3a30}.mode-card-visual{min-height:72px;display:flex;align-items:center;justify-content:center}.mode-swatch{display:flex;gap:.75rem;align-items:center}.swatch{width:42px;height:42px;border-radius:50%;box-shadow:0 2px 8px #00000040}.swatch.blonde{background:radial-gradient(circle at 35% 30%,#fff8e8,#e8d5b5);border:2px solid #fff}.swatch.brunette{background:radial-gradient(circle at 35% 30%,#6b4a32,#2a1c12);border:2px solid #111}.swatch.ai{display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--cream);background:linear-gradient(145deg,#5a3a70,#2a1a3a);border:2px solid #c8a0ff}.mode-hint{width:100%;text-align:center;margin:0;color:#f3ebe0b3;font-size:.85rem}.pause-overlay{z-index:40;cursor:pointer}.pause-menu{pointer-events:auto;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:stretch;justify-content:center;width:min(100%,720px);cursor:default}.pause-title{width:100%;margin:0 0 .25rem;text-align:center;font-family:Playfair Display,serif;font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:700;color:var(--cream);text-shadow:0 4px 20px rgba(0,0,0,.5)}.pause-menu .mode-card{width:min(100%,280px)}.playing-hud{position:fixed;top:0;left:0;right:0;z-index:35;box-sizing:border-box;height:calc(2.75rem + env(safe-area-inset-top,0px));max-height:calc(3rem + env(safe-area-inset-top,0px));pointer-events:none;overflow:hidden;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:.5rem;margin:0;padding:env(safe-area-inset-top,0px) max(.65rem,env(safe-area-inset-right,0px)) 0 max(.5rem,env(safe-area-inset-left,0px));background:linear-gradient(180deg,#100c0ac7,#100c0a59 70%,#100c0a00)}.playing-hud .tagline,.playing-hud>h1,.hud.playing-hud .tagline{display:none!important}.playing-hud .navbar{position:static;flex:0 0 auto;pointer-events:auto;top:auto;left:auto;margin:0;padding:.28rem .55rem;gap:.35rem;box-shadow:0 2px 10px #0000004d}.playing-hud .navbar-mark{font-size:.9rem}.playing-hud .navbar-title{font-size:.88rem}.playing-hud .hud-status,.playing-hud #status{margin:0;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:.82rem;line-height:1.2;color:var(--cream);text-shadow:0 1px 4px rgba(0,0,0,.35)}.scoreboard{display:flex;flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.35rem;margin:0}.score-chip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.3rem;padding:.18rem .4rem .18rem .3rem;border-radius:7px;background:#100c0ab8;color:var(--cream);font-size:.7rem;font-weight:600;line-height:1.2;border:1px solid rgba(243,235,224,.22);box-shadow:0 2px 8px #0000004d;backdrop-filter:blur(6px)}.score-chip.active{border-color:#e8d5b5d9;box-shadow:0 0 0 1px #e8d5b573,0 2px 8px #0000004d}.score-label{letter-spacing:.01em}.score-count{min-width:1.05rem;padding:.02rem .28rem;border-radius:4px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:.78rem;color:var(--ink);background:#f3ebe0f2}.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.dot.blonde{background:#e8d5b5;border:1.5px solid #fff}.dot.brunette{background:#3a2a1c;border:1.5px solid #111}.play-hint{margin:0 0 0 auto;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f3ebe0a6;font-size:.72rem;line-height:1.2}.play-hint.must-jump-hint{color:#ffd090;font-weight:700;text-shadow:0 0 12px rgba(255,140,40,.55)}@media (max-width: 560px){.playing-hud .play-hint:not(.must-jump-hint){display:none}.playing-hud .score-label,.playing-hud .navbar-title{display:none}}.jump-badge{padding:.18rem .5rem;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;white-space:nowrap;color:#1c1810;background:linear-gradient(180deg,#ffe08a,#ff9a30);border:1px solid rgba(120,60,0,.35);box-shadow:0 0 10px #ff8c28a6,0 2px 8px #0006;transform:translateY(-28px)}.winner-banner{position:absolute;inset:0;z-index:30;display:grid;place-content:center;gap:.75rem;text-align:center;background:#100c0a73;backdrop-filter:blur(3px);cursor:pointer;color:var(--cream)}.winner-banner h2{margin:0;font-family:Playfair Display,serif;font-size:clamp(1.8rem,4vw,2.6rem);text-shadow:0 4px 20px rgba(0,0,0,.5)}.winner-banner p{margin:0;opacity:.85}.end-actions{position:absolute;left:0;right:0;bottom:3.5rem;z-index:30;display:flex;justify-content:center;gap:.75rem;pointer-events:auto}.kbd-btn{display:flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:#f7ebe3f2;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:transform .12s ease}.kbd-btn:hover{transform:scale(1.04)}.credit{position:absolute;left:0;right:0;bottom:.75rem;z-index:10;text-align:center;font-size:.7rem;color:#f3ebe08c;pointer-events:none}.mode-credit{position:absolute;bottom:.75rem;left:0;right:0;width:100%;margin:0;z-index:1}.credit a{color:var(--cream);pointer-events:auto}.move-badge{padding:.2rem .45rem;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;color:#1c1810;background:#f3ebe0eb;border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 8px #00000059;transform:translateY(-18px)}.move-panel{position:absolute;left:50%;bottom:1.5rem;transform:translate(-50%);z-index:22;width:min(92vw,360px);padding:.85rem 1rem 1rem;border-radius:14px;background:#f7ebe3f0;box-shadow:0 12px 36px #0006;pointer-events:auto}.move-panel-title{margin:0 0 .55rem;font-family:Playfair Display,serif;font-size:1.05rem;font-weight:700;color:var(--violet)}.move-panel-list{display:flex;flex-direction:column;gap:.4rem}.move-option{display:flex;align-items:center;gap:.65rem;width:100%;padding:.55rem .7rem;border:1px solid rgba(42,26,58,.12);border-radius:10px;background:#fff;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:transform .12s ease,background .12s ease}.move-option:hover{transform:translateY(-1px);background:#fff8f0}.move-option.capture{border-color:#e85a7a73;background:#fff5f7}.move-num{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--violet);color:var(--cream);font-size:.75rem}.move-panel-hint{margin:.55rem 0 0;font-size:.75rem;color:#6a5a50}