@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#171a36;color:#283047;font-family:'DM Sans',sans-serif}body{display:grid;place-items:center}button{font:inherit;cursor:pointer;border:0}button:focus-visible,select:focus-visible{outline:4px solid #ffba43;outline-offset:4px}#game{position:relative;width:min(100vw,177.778vh);height:min(100vh,56.25vw);overflow:hidden;background:#b8e4e8;container-type:inline-size}canvas{width:100%;height:100%;display:block}#overlay{position:absolute;inset:0;pointer-events:none}#overlay>*{pointer-events:auto}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#toolbar{position:absolute;right:2.2%;top:2.8%;display:flex;gap:8px;z-index:20}#toolbar button{background:#ffffffd9;color:#38435a;border:1px solid #ffffffa0;border-radius:30px;padding:10px 17px;font-size:clamp(11px,1.05cqw,18px);box-shadow:0 3px 10px #2e476911}h1,h2,h3,p{margin:0}h1,h2,h3,.big,.primary{font-family:'Fredoka',sans-serif}h1{font-size:6.1cqw;line-height:.96;font-weight:600;letter-spacing:-.025em;color:#fff;text-shadow:0 4px 0 #5d4b9680,0 8px 25px #674c5360}h1 .vs{display:block;font-size:2cqw;line-height:1.5;color:#ffe6a9;letter-spacing:.13em}h1 .kittens{color:#ffecb2}.menu{position:absolute;inset:0;padding:5.3% 5%;background:linear-gradient(90deg,#253c618a 0%,#253c6140 43%,transparent 75%)}.eyebrow{color:#fff;font-size:1cqw;font-weight:700;letter-spacing:.22em;margin-bottom:1.4cqw}.menu-copy{width:45%}.subtitle{color:white;font-size:1.32cqw;line-height:1.6;margin:1.5cqw 0 1.9cqw;text-shadow:0 2px 10px #1d344688}.primary{background:#fff0b2;color:#493859;border-radius:1.1cqw;box-shadow:0 .35cqw 0 #d7a76e,0 .6cqw 1.6cqw #44325538;font-weight:600;padding:1.05cqw 2cqw;font-size:1.7cqw;transition:transform .15s}.primary:hover{transform:translateY(-3px);background:#fff6d2}.secondary{border:1px solid #ffffff80;background:#fff2;color:#fff;border-radius:1cqw;padding:.9cqw 1.5cqw;font-size:1.15cqw;font-weight:600}.actions{display:flex;gap:1cqw;align-items:center}.menu-bottom{position:absolute;bottom:3%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:.95cqw}.key{display:inline-grid;place-items:center;background:#fff;color:#50486a;border:1px solid #dcd7e8;border-bottom:3px solid #c5bfd6;border-radius:6px;min-width:2.15cqw;padding:.15cqw .45cqw;font-weight:700;font-size:1.1cqw}.pill{border:1px solid #ffffff70;border-radius:20px;padding:.5cqw .9cqw;backdrop-filter:blur(8px);background:#fff2}.modal-back{position:absolute;inset:0;background:#20263d77;display:grid;place-items:center;backdrop-filter:blur(8px)}.panel{background:#fffaf2;border:2px solid #fff;border-radius:2cqw;padding:2.6cqw;width:78%;box-shadow:0 2cqw 6cqw #14233f44}.panel h2{font-size:3.1cqw;color:#574779;line-height:1.1}.panel .lead{font-size:1.12cqw;color:#727387;margin:.8cqw 0 1.7cqw;line-height:1.5}.cards{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw}.card{border:1px solid #e6d8eb;background:#f8eef9;border-radius:1.3cqw;padding:1.5cqw;font-size:1.1cqw;line-height:1.65}.card.blue{background:#eaf4fc;border-color:#cfe3f1}.card h3{font-size:1.8cqw;margin-bottom:.6cqw;color:#634b86}.card.blue h3{color:#36769d}.controls{display:flex;gap:.5cqw;margin:.8cqw 0}.panel .actions{margin-top:1.7cqw;justify-content:space-between}.panel .secondary{color:#665a79;border-color:#d7cde0;background:#fff}.note{font-size:1cqw;line-height:1.5;color:#777186}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw;margin:1.5cqw 0}.level{color:#51416b;text-align:left;padding:1cqw;border-radius:1cqw;border:2px solid #e6deeb;background:#fff}.level.selected{border-color:#9474cd;background:#f1eafb}.level strong{font-family:'Fredoka',sans-serif;font-size:1.4cqw;display:block}.level small{font-size:.9cqw}.level .thumb{height:5.8cqw;border-radius:.6cqw;background-image:url('assets/worlds.png');background-size:100% 300%;margin-bottom:.7cqw}.level:nth-child(2) .thumb{background-position:center 50%}.level:nth-child(3) .thumb{background-position:center 100%}.cosmetics{display:flex;gap:.5cqw;flex-wrap:wrap}.cosmetics button{padding:.5cqw .8cqw;background:#fff;border:1px solid #d6cce4;border-radius:.6cqw;font-size:.95cqw;color:#615777}.cosmetics button.selected{border-color:#865bd0;background:#e8dcfa}.cosmetics button:disabled{opacity:.45;cursor:default}.hud-buttons{position:absolute;bottom:1.2%;right:1.5%;display:flex;gap:.4cqw}.hud-buttons button{font-size:.9cqw;border-radius:2cqw;background:#fffD;padding:.5cqw .9cqw;color:#4d536b}.training-banner{position:absolute;top:46%;left:23%;right:23%;text-align:center;font-size:1cqw;background:#fffaf4ed;color:#5f4e7b;padding:.55cqw;border-radius:.8cqw;box-shadow:0 3px 8px #28365122}.result-time{font-size:4.5cqw;color:#9d76c7;margin:.5cqw 0}.small-panel{width:47%;text-align:center}.status{font-size:1.05cqw;color:#8a609d;margin-top:.7cqw;min-height:1.6em}@media(max-width:750px){#toolbar button{padding:5px 9px}.key{border-bottom-width:2px}.panel{width:88%}}
/* The closet previews share the same sprites and cosmetic colors as the race. */
.closet-card{padding:.9cqw 1.1cqw;background:linear-gradient(135deg,#eee3f9,#fff5f5)}.closet-head{display:flex;justify-content:space-between;align-items:center}.closet-head h3{margin:0;font-size:1.45cqw}.closet-head span{font-size:1.1cqw;color:#7a5a92}.look-preview{width:100%;height:8.6cqw;display:block}.equip-row{display:flex;align-items:center;justify-content:space-between;margin-top:.65cqw;gap:.5cqw;font-size:.85cqw;color:#766780}.equip{background:#7e60b4;color:white;border-radius:.5cqw;padding:.5cqw 1.3cqw;font-weight:700;font-size:.9cqw}.equip:disabled{background:#ddd7e6;color:#82768f;cursor:default}.cosmetics{gap:.3cqw}.cosmetics button{font-size:.8cqw;padding:.4cqw .5cqw}.levels{margin:.85cqw 0}.level .thumb{height:4.6cqw}.panel .lead{margin:.5cqw 0 1cqw}.panel .actions{margin-top:1.1cqw}.hud-buttons button{font-size:1.1cqw;padding:.45cqw .9cqw;min-width:2.7cqw;opacity:.75}.hud-buttons button:hover{opacity:1}

.panel h2{font-family:'DM Sans',sans-serif;font-weight:700;font-size:2.6cqw;letter-spacing:-.04em}.panel h3,.level strong{font-family:'DM Sans',sans-serif;font-weight:700}.level.selected{box-shadow:0 5px 16px #75599016}.look-preview{border-bottom:1px solid #c3b3d333}

.levels{grid-template-columns:repeat(5,1fr)}.level:nth-child(4) .thumb{background-image:url('assets/bridge.png');background-size:cover;background-position:center}.level:nth-child(5) .thumb{background-image:url('assets/forge-bg.png');background-size:cover;background-position:center}.levels+.cards .card{min-width:0}.panel:has(.levels){width:88%;padding:1.8cqw}.panel:has(.levels) h2{font-size:2.25cqw}.panel:has(.levels) .lead{font-size:.98cqw}.panel:has(.levels) .look-preview{height:7.3cqw}.panel:has(.levels) .cosmetics button{font-size:.72cqw;padding:.34cqw .42cqw}

.menu-copy>.actions{margin-top:2.4cqw}.gem-balance{display:flex;align-items:center;gap:.3cqw}.gem-balance canvas{width:1.35cqw;height:1.8cqw}.cosmetics button.locked{color:#99939d;background:#e9e6ec;border-color:#d7d2dc;box-shadow:none}.cosmetics button.locked.selected{border-color:#aca3b6;background:#dfdbe4}.cosmetics button.locked:hover{background:#dcd6e2}