:root{--bg:#0a0b0d;--panel:#111315;--panel2:#17191c;--line:#25282d;--text:#f5f6f7;--muted:#8d9299;--accent:#b7ff3c;--good:#71e6a7;--bad:#ff6675;--warn:#ffad4a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;overflow-y:scroll;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
header{height:64px;border-bottom:1px solid var(--line);background:rgba(10,11,13,.94);display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 760px)/2));position:sticky;top:0;z-index:10}.logo{font-weight:900;letter-spacing:1.3px;font-size:14px}.logo span{color:var(--accent)}#date{font-size:12px;color:var(--muted)}
main{max-width:980px;margin:0 auto;padding:30px 16px 70px}.top{text-align:center;margin-bottom:22px}.top h1{font-size:32px;letter-spacing:-1.5px;margin:0 0 7px}.top p{margin:0;color:var(--muted);font-size:14px}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px;gap:2px}.tab{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:12px 8px;font-weight:800;transition:.2s}.tab:hover{color:#fff}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.game{display:none}.game.active{display:block;animation:gameIn .34s cubic-bezier(.2,.9,.2,1) both}.game.leaving{display:block;animation:gameOut .22s cubic-bezier(.4,0,1,1) both;pointer-events:none}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}.cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.card h2{font-size:20px;margin:0}.instructions{margin:5px 0 0;line-height:1.45;font-size:13px;color:var(--muted)}.badge{color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap;padding-top:4px}
.ends{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:22px 0}.end{border:1px solid var(--line);border-radius:12px;text-align:center;padding:12px;background:var(--panel2)}.end small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.end b{font-size:23px;letter-spacing:2px}.arrowBig{color:#666d77}.ladder{text-align:center;margin:18px 0}.ladder-row{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px 0}.ladder-input{height:64px;width:130px;border:1px solid #343941;border-radius:12px;background:#0c0e10;color:#fff;text-align:center;font-size:23px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;outline:none;transition:border-color .16s,box-shadow .16s,transform .16s,background .16s}.ladder-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,255,60,.11)}.ladder-input.fixed{background:#1b1e21;color:var(--accent);border-color:#30352b}.step-arrow{color:#555c65;font-size:14px}.feedback-good{border-color:var(--good)!important;background:rgba(113,230,167,.07)!important}.feedback-bad{border-color:var(--bad)!important;background:rgba(255,102,117,.07)!important}.feedback-warn{border-color:var(--warn)!important;background:rgba(255,173,74,.08)!important}.shake{animation:shake .3s ease}.pop{animation:pop .22s ease}
.btn{width:100%;padding:13px;border:1px solid var(--accent);border-radius:11px;background:var(--accent);color:#0a0d07;font-weight:900;font-size:14px;transition:.18s}.btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.attempts{display:flex;justify-content:center;gap:6px;margin:15px 0 2px}.dot{width:7px;height:7px;border-radius:50%;background:#34383e}.dot.used{background:var(--accent)}.result{text-align:center;min-height:22px;margin-top:12px;font-size:13px;font-weight:800}.success{color:var(--good)}.error{color:var(--bad)}.neutral{color:var(--muted)}
.master{text-align:center;font-size:clamp(32px,8vw,48px);font-weight:950;letter-spacing:6px;margin:27px 0 22px}.stats{display:flex;justify-content:space-between;margin:0 0 7px;color:var(--muted);font-size:12px}.stats b{color:var(--accent)}.bar{height:6px;background:#25282d;border-radius:99px;overflow:hidden}.fill{height:100%;width:0;background:var(--accent);transition:width .4s ease}.found{display:flex;gap:6px;flex-wrap:wrap;min-height:34px;margin:16px 0 19px}.chip{background:#181c17;border:1px solid #334026;color:#d8ffa5;padding:6px 9px;border-radius:8px;font-weight:800;font-size:12px;animation:pop .22s ease}.row{display:flex;gap:8px}.row input{min-width:0;flex:1;padding:13px;border:1px solid #343941;border-radius:11px;background:#0c0e10;color:#fff;outline:none;text-transform:uppercase}.row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,255,60,.09)}.row button{padding:0 19px;border:1px solid var(--accent);border-radius:11px;background:var(--accent);color:#0a0d07;font-weight:900}.footer-note{text-align:center;color:#666d77;font-size:11px;margin-top:15px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:fade .2s ease}.modal{width:min(430px,100%);background:#111315;border:1px solid #30343a;border-radius:17px;padding:24px;box-shadow:0 25px 80px rgba(0,0,0,.5);animation:modalIn .25s ease}.modal h2{margin:0 0 16px;font-size:22px}.rules{display:grid;gap:11px;margin-bottom:20px}.rule{display:flex;gap:11px;align-items:flex-start;color:#c9cdd2;font-size:13px;line-height:1.45}.rule i{font-style:normal;color:var(--accent);font-weight:900;min-width:18px}.modal .btn{margin-top:2px}.hidden{display:none!important}
@keyframes celebrateIn{0%{opacity:0;transform:scale(.65) rotate(-8deg)}55%{opacity:1;transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sparkle{0%{opacity:0;transform:scale(.3) translateY(8px)}35%{opacity:1}100%{opacity:0;transform:scale(1.2) translateY(-42px)}}
@keyframes modalGlow{0%,100%{box-shadow:0 25px 80px rgba(0,0,0,.5),0 0 0 rgba(183,255,60,0)}50%{box-shadow:0 25px 80px rgba(0,0,0,.55),0 0 45px rgba(183,255,60,.16)}}
.complete-modal{text-align:center;animation:winModalIn .7s cubic-bezier(.16,1,.3,1) both,modalGlow 1.6s ease .35s 2}.complete-modal h2{font-size:28px;margin-bottom:8px}.complete-message{margin:0 0 20px;color:var(--muted);font-size:14px}.celebrate{height:58px;position:relative;margin-bottom:2px}.celebrate span{position:absolute;left:50%;top:20px;color:var(--accent);font-size:20px;animation:sparkle 1s ease-out infinite}.celebrate span:nth-child(1){margin-left:-90px;animation-delay:0s}.celebrate span:nth-child(2){margin-left:-45px;animation-delay:.12s}.celebrate span:nth-child(3){margin-left:0;animation-delay:.22s}.celebrate span:nth-child(4){margin-left:45px;animation-delay:.1s}.celebrate span:nth-child(5){margin-left:90px;animation-delay:.3s}
.solve-flash{animation:solveCard .8s cubic-bezier(.16,1,.3,1) both}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes gameIn{0%{opacity:0;transform:scale(.88);filter:blur(6px)}55%{opacity:1;transform:scale(1.015);filter:blur(0)}78%{transform:scale(.995)}100%{opacity:1;transform:scale(1);filter:none}}@keyframes gameOut{0%{opacity:1;transform:scale(1);filter:blur(0)}45%{opacity:.65;transform:scale(.96);filter:blur(2px)}100%{opacity:0;transform:scale(.9);filter:blur(6px)}}@keyframes winModalIn{0%{opacity:0;transform:translateY(18px) scale(.82)}45%{opacity:1;transform:translateY(-5px) scale(1.035)}68%{transform:translateY(1px) scale(.99)}100%{opacity:1;transform:scale(1)}}@keyframes solveCard{0%{transform:scale(1);filter:brightness(1)}12%{transform:scale(.985);filter:brightness(1)}30%{transform:scale(1.035);filter:brightness(1.3)}48%{transform:scale(.992);filter:brightness(1.08)}68%{transform:scale(1.012);filter:brightness(1.18)}100%{transform:scale(1);filter:brightness(1)}}@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes pop{0%{transform:scale(.94)}70%{transform:scale(1.03)}100%{transform:scale(1)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

.marvle-card{position:relative;overflow:hidden}.marvle-search{position:relative;display:flex;gap:8px}.marvle-search input{min-width:0;flex:1;padding:13px;border:1px solid #343941;border-radius:11px;background:#0c0e10;color:#fff;outline:none}.marvle-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(183,255,60,.09)}.marvle-search .btn{width:auto;min-width:96px}.suggestions{position:absolute;left:0;right:104px;top:54px;background:#15181b;border:1px solid #343941;border-radius:11px;overflow:hidden;z-index:20;box-shadow:0 18px 45px rgba(0,0,0,.45)}.suggestion{display:block;width:100%;padding:11px 13px;border:0;border-bottom:1px solid #25282d;background:transparent;color:#eee;text-align:left;font-size:13px}.suggestion:last-child{border-bottom:0}.suggestion:hover,.suggestion:focus{background:#1d2318;color:var(--accent);outline:none}.marvle-table-wrap{overflow-x:hidden;margin:22px 0 12px;padding:0;width:100%}.marvle-head,.marvle-row{display:grid;grid-template-columns:minmax(150px,1.5fr) repeat(5,minmax(0,1fr));width:100%;gap:9px}.marvle-head{position:sticky;top:0;z-index:2;margin-bottom:7px;padding:0 2px}.marvle-head span{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#727983;font-weight:950;padding:8px 7px;text-align:center}.marvle-guesses{display:grid;gap:8px}.marvle-row{animation:pop .22s ease}.marvle-character,.marvle-cell{min-height:58px;border:1px solid #2b3036;border-radius:10px;padding:8px 7px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:850;line-height:1.15;transition:transform .18s,background .18s,border-color .18s}.marvle-character{justify-content:flex-start;text-align:left;background:#121417;color:#e7eaed;font-size:13px}.marvle-cell{background:#20242a;color:#9ea5ae}.marvle-cell.match{background:rgba(113,230,167,.16);border-color:var(--good);color:var(--good)}.marvle-cell.near{background:rgba(255,173,74,.14);border-color:var(--warn);color:var(--warn)}.marvle-cell.unknown{background:#171a1e;border-color:#343941;color:#727983}.marvle-cell.near{font-size:10px}.marvle-cell.near::first-letter{font-size:13px;font-weight:950}.marvle-result{margin-top:10px}.move-count{font-size:11px;color:#666d77;font-weight:800}

@media(max-width:600px){.tab{font-size:12px;padding-left:4px;padding-right:4px}header{padding:0 14px}main{padding:25px 12px 55px}.top h1{font-size:28px}.card{padding:18px}.cardhead{display:block}.badge{margin-top:8px}.ends{gap:6px}.end b{font-size:20px}.ladder-input{height:62px;width:120px;font-size:21px}.ladder-row{gap:6px}.row button{padding:0 16px}}
@media(max-width:380px){.ladder-input{width:108px}.end b{font-size:18px}.card{padding:15px}}

@media (max-width: 700px){.marvle-table-wrap{overflow:hidden}.marvle-head,.marvle-row{grid-template-columns:minmax(105px,1.25fr) repeat(5,minmax(0,1fr));gap:5px}.marvle-character,.marvle-cell{min-height:52px;font-size:9px;padding:6px 4px}.marvle-character{font-size:10px}.marvle-head span{font-size:7px;letter-spacing:.35px}.marvle-search{position:relative;z-index:10}}

/* Streaks, scoring and Speedrun */
.streak-bar{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:16px auto 0}.streak-game,.super-streak,.perfect-streak{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:7px 10px;min-height:34px;transition:.2s}.streak-game b,.super-streak b,.perfect-streak b{display:block;font-size:9px;letter-spacing:.5px}.streak-game small,.super-streak small,.perfect-streak small{display:block;color:var(--muted);font-size:9px}.flame{filter:grayscale(1);opacity:.35;font-size:18px;transition:.2s}.streak-game.active{border-color:#554a24;background:#17150f}.streak-game.active .flame{filter:none;opacity:1}.super-streak{border-color:#3a452b}.super-streak>span:first-child{font-size:18px}.perfect-streak{border-color:#4d3a24}.perfect-streak>span:first-child{font-size:18px}.flame-burst{animation:flameBurst .65s cubic-bezier(.16,1,.3,1)}.timer-pill,.multiplier-pill{color:var(--muted);font-weight:900;font-variant-numeric:tabular-nums}.multiplier-pill.hot{color:var(--accent);text-shadow:0 0 15px rgba(183,255,60,.3)}.mult-pop{animation:multPop .35s ease}.secondary-btn{background:#171a1d;color:var(--text);border-color:#343941}.speedrun-tab{position:relative}.speedrun-tab::before{content:'';position:absolute;inset:auto 20% -2px;height:2px;background:var(--accent);transform:scaleX(0);transition:.2s}.speedrun-tab:hover::before{transform:scaleX(1)}.hint-box{margin-top:10px;padding:10px 12px;border:1px solid #3d4829;background:#171b12;border-radius:10px;color:#d8ffa5;text-align:center;font-size:12px;font-weight:900}.hint-pop{animation:hintPop .35s ease}.speedrun-intro,.speedrun-modal{max-width:500px}.speed-icon{font-size:36px;margin-bottom:4px}.speedrun-intro h2{margin-bottom:8px}.speedrun-intro p{color:var(--muted);line-height:1.5;font-size:13px}.speed-rules{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0}.speed-rules span{background:#171a1d;border:1px solid #2d3238;border-radius:9px;padding:8px 10px;font-size:10px;font-weight:900;color:#cfd3d8}.speed-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.speedrun-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.speedrun-top h2{margin:2px 0 0}.eyebrow,.speed-label{font-size:10px;font-weight:950;letter-spacing:1px;color:var(--muted)}.speed-clock{font-size:20px;font-weight:950;font-variant-numeric:tabular-nums;color:var(--accent)}.speed-countdown{display:grid;place-items:center;font-size:72px;font-weight:950;color:var(--accent);min-height:160px;animation:countPulse .7s ease}.speed-section{margin-top:18px}.speed-ends{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:14px 0}.speed-ends b{padding:13px;text-align:center;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}.speed-within-stats{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin:0 0 10px}.speedrun-finish{text-align:center}.speed-trophy{font-size:42px;animation:trophyPop .7s cubic-bezier(.16,1,.3,1)}.final-time{font-size:42px;font-weight:950;color:var(--accent);font-variant-numeric:tabular-nums;margin:5px 0}.speedrun-finish p{color:var(--muted);font-size:13px}.name-entry{display:flex;gap:7px;margin:15px 0}.name-entry input{min-width:0;flex:1;padding:12px;border:1px solid #343941;border-radius:10px;background:#0c0e10;color:#fff;text-transform:uppercase}.name-entry .btn{width:auto;min-width:120px}.leaderboard{border-top:1px solid var(--line);padding-top:13px;text-align:left;margin-top:13px}.leaderboard-title{font-size:10px;font-weight:950;letter-spacing:1px;color:var(--muted);margin-bottom:7px}.leader-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #202329;font-size:12px}.leader-row b{color:var(--accent)}.leader-empty{font-size:12px;color:#666d77}.marvle-search .secondary-btn{min-width:80px;background:#171a1d;color:var(--text)}
@keyframes flameBurst{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-5deg)}60%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1)}}@keyframes multPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}@keyframes hintPop{0%{opacity:0;transform:translateY(-5px) scale(.96)}100%{opacity:1;transform:none}}@keyframes countPulse{0%{transform:scale(.7);opacity:.2}45%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes trophyPop{0%{transform:scale(.5) rotate(-10deg);opacity:0}55%{transform:scale(1.15) rotate(4deg);opacity:1}100%{transform:scale(1)}}
@media(max-width:600px){.streak-bar{gap:5px}.streak-game,.super-streak,.perfect-streak{padding:6px 7px}.streak-game b,.super-streak b,.perfect-streak b{font-size:8px}.speed-actions{grid-template-columns:1fr}.speedrun-top{align-items:center}.name-entry{flex-direction:column}.name-entry .btn{width:100%}.marvle-search{flex-wrap:wrap}.marvle-search input{flex-basis:100%}.marvle-search .btn{flex:1}.speed-countdown{min-height:120px;font-size:64px}}
@media(prefers-reduced-motion:reduce){.flame-burst,.mult-pop,.hint-pop,.speed-countdown,.trophyPop,.game.active,.game.leaving{animation:none!important}.chip{animation:none}.complete-modal{animation:none}}
