:root{color:#fff6e8;font-family:Fredoka,system-ui,sans-serif;background:#140c1f}*{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:100%;overscroll-behavior:none}#frame{position:relative;width:100%;height:100%;background:#140c1f}#game{width:100%;height:100%}#game canvas{display:block}#hud,#overlay{position:absolute;inset:0}#hud{pointer-events:none}#hud>*{pointer-events:auto}#overlay{pointer-events:auto}#overlay{display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#ff6fae55,transparent 40%),radial-gradient(circle at 90% 80%,#5ad0c855,transparent 42%),#1a1028ee}#overlay[hidden],#hud[hidden],[hidden]{display:none!important}.screen{width:min(520px,calc(100% - 40px));background:#2a1b40f0;border:3px solid #ffd36a;border-radius:28px;padding:calc(28px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));box-shadow:0 18px #120816}.eyebrow{margin:0;letter-spacing:.14em;text-transform:uppercase;color:#ffd36a;font-weight:600}h1{margin:8px 0 12px;font-size:clamp(42px,8vw,64px);line-height:.9}.lede,.howto{color:#f3e7d6;font-size:16px;line-height:1.45}.howto{padding-left:18px}.seed-field{display:flex;flex-direction:column;gap:6px;margin:18px 0;font-weight:600}.seed-field input,button{font:inherit}.seed-field input{border:2px solid #ffd36a;background:#140c1f;color:#fff6e8;border-radius:12px;padding:10px 12px;font-size:18px}button{border:0;border-radius:14px;background:#4a3368;color:#fff6e8;padding:12px 16px;cursor:pointer}button.primary{background:#ff6fae;color:#2a1838}button.huge{width:100%;font-size:22px;font-weight:700;padding:14px 16px;margin-top:10px}button:disabled{opacity:.45}.actions{display:grid;gap:8px}.breakdown{display:grid;gap:10px;margin:12px 0 8px}.break-block{background:#140c1f88;border-radius:16px;padding:10px 12px}.break-block h2{margin:0 0 6px;font-size:16px;color:#ffd36a}.break-block ul{margin:0;padding-left:16px;color:#f3e7d6}.hud-top{display:flex;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 16px 0}.score-value{font-size:28px;font-weight:700}.mult{color:#ff6fae;font-weight:700}.tokens,.seed{text-align:right;font-weight:600}.seed{opacity:.7;font-size:13px}#btn-bookmark-top{margin-top:6px;font-size:14px;padding:6px 10px}.pair-row{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;min-height:64px}.pair-card{min-width:118px;border:3px solid var(--rarity);background:linear-gradient(#2a1b40,var(--sock));text-align:left;padding:8px}.pair-name{display:block;font-weight:700}.pair-rarity{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--rarity)}.pair-detail{margin:0 16px;padding:10px 12px;background:#2a1b40ee;border-radius:14px}.pair-detail span{display:block;opacity:.75;margin-bottom:4px}.hint{padding:4px 16px 0;text-align:center;font-weight:600;text-shadow:0 2px 0 #120816}#hud.folding .hint{padding-top:8px}.toast{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);background:#ffd36a;color:#2a1838;padding:12px 16px;border-radius:16px;font-weight:700;max-width:80%;text-align:center}#hud.folding .hud-top{padding-left:76px;padding-right:76px}#hud.folding .pair-row,#hud.folding .pair-detail,#hud.folding .bookmark-list,#hud.folding .sock-match{display:none}.icon-btn{position:absolute;width:56px;height:56px;border-radius:50%;background:#2a1b40f2;border:2px solid #ffd36a;color:#fff6e8;padding:0;display:grid;place-items:center;z-index:6}.icon-btn svg{width:28px;height:28px}.icon-btn:disabled{opacity:.35}.icon-btn.on{background:#ffd36a;color:#2a1838}.icon-btn.blink{animation:reset-blink .55s ease-in-out infinite}@keyframes reset-blink{0%,to{box-shadow:0 0 #ffd36a00;background:#2a1b40f2;color:#fff6e8}50%{box-shadow:0 0 0 8px #ffd36acc;background:#ffd36a;color:#2a1838}}.pair-card{position:relative}.unequip{position:absolute;top:2px;right:4px;font-size:16px;line-height:1;padding:2px 6px}.debug-log{position:absolute;left:8px;bottom:8px;width:min(320px,46%);max-height:28%;overflow:auto;background:#140c1fdd;border:1px solid #ffd36a66;border-radius:10px;padding:6px 8px;font-size:10px;line-height:1.3;pointer-events:none;z-index:20}.fold-back{top:calc(10px + env(safe-area-inset-top));left:10px}.fold-info-btn{top:calc(10px + env(safe-area-inset-top));right:10px}.fold-reset{left:10px;top:calc(72px + env(safe-area-inset-top))}.fold-bookmark{right:10px;top:calc(72px + env(safe-area-inset-top))}.fold-rotate-ccw,.fold-rotate-cw{width:48px;height:48px;z-index:8}.fold-rotate-ccw{transform:translate(-100%,-50%)}.fold-rotate-cw{transform:translateY(-50%)}.sock-match{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;align-items:center;gap:12px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:#2a1b40f7;border-top:3px solid #ffd36a;box-shadow:0 -12px 28px #12081688}.sock-match-swatch{width:46px;height:46px;flex:0 0 46px;border-radius:14px;border:3px solid #fff6e8}.sock-match-copy{flex:1;min-width:0}.sock-match-copy strong{display:block;font-size:18px}.sock-match-copy span{display:block;font-size:14px;opacity:.8}#btn-sock-clear{flex:0 0 auto;background:#4a3368;border:2px solid #ffd36a;font-weight:700}.fold-pop{position:absolute;inset:0;z-index:8;display:grid;place-items:center}.fold-pop-backdrop{position:absolute;inset:0;background:#140c1f88;border:0;border-radius:0;padding:0}.fold-info{position:relative;z-index:1;width:min(440px,calc(100% - 40px));background:#2a1b40f2;border:2px solid #ffd36a;border-radius:16px;padding:14px 16px;max-height:48%;overflow:auto}.fold-info h2{margin:0 0 4px;font-size:20px}.fold-kicker{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700}.fold-type{margin:0 0 6px;opacity:.8}.fold-desc{margin:0;font-size:14px;line-height:1.35}.bookmark-list{margin:0 16px;display:flex;flex-wrap:wrap;gap:6px}.bookmark-list span{background:#2a1b40ee;border-radius:999px;padding:4px 8px;font-size:12px}.screen.tall{max-height:min(92vh,920px);overflow:auto}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.stat{background:#140c1f88;border-radius:12px;padding:8px 10px}.stat.wide{grid-column:1 / -1}.stat span{display:block;font-size:12px;opacity:.75}.stat strong{font-size:16px}.bests{color:#ffd36a;font-weight:700}
