@font-face { font-family: 'LilitaOne'; src: url('fonts/lilita.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #234a8a, #0b1430); user-select: none; -webkit-user-select: none; }
body { font-family: 'Fredoka', 'Segoe UI', sans-serif; color: #2b2346; }
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: 50% 50%; overflow: hidden; border-radius: 6px; box-shadow: 0 10px 60px rgba(0,0,0,.6); background: #000; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.screen { position: absolute; inset: 0; display: none; }
.screen.show { display: block; animation: fadein .35s ease; }
.screen.passthru { pointer-events: none; }
.screen.passthru > * { pointer-events: auto; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.hidden { display: none !important; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(10,20,60,.45) 100%); pointer-events: none; }
.dim { position: absolute; inset: 0; background: rgba(15,20,55,.55); }

/* Logo */
.logo { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font-family: 'LilitaOne', Impact, sans-serif; line-height: .9; transform: rotate(-3deg); animation: logoin .8s cubic-bezier(.2,1.6,.4,1); }
.logo span { display: block; }
.logo .l1 { font-size: 64px; color: #ffe23f; -webkit-text-stroke: 3px #7a3a00; text-shadow: 0 5px 0 #7a3a00, 0 8px 20px rgba(0,0,0,.35); letter-spacing: 4px; }
.logo .l2 { font-size: 112px; background: linear-gradient(#fff 0%, #ffd23f 30%, #ff8c1a 70%, #e8432a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #7a1e00) drop-shadow(0 0 2px #7a1e00) drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.logo .flagline { width: 520px; height: 20px; margin: 6px auto 0; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); background: repeating-conic-gradient(#1d1d26 0 25%, #fff 0 50%) 0 0/14px 14px; }
.logo.big { top: 150px; }
.logo.big .l1 { font-size: 80px; } .logo.big .l2 { font-size: 150px; }
@keyframes logoin { from { transform: scale(.3) rotate(-12deg); opacity: 0 } to { transform: scale(1) rotate(-3deg); opacity: 1 } }
.loading { position: absolute; left: 0; right: 0; top: 540px; text-align: center; color: #fff; font: 700 28px 'Fredoka', sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.credit { position: absolute; bottom: 18px; width: 100%; text-align: center; color: #fff; font-weight: 600; font-size: 18px; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
#b-start { position: absolute; left: 50%; top: 520px; transform: translateX(-50%); }
#b-start:hover { transform: translateX(-50%) scale(1.06); }

/* Buttons */
.btn { font-family: 'LilitaOne', Impact, sans-serif; font-size: 34px; letter-spacing: 1px; color: #fff; min-width: 300px; padding: 12px 34px 16px; border-radius: 40px; cursor: pointer; position: relative;
  border: 4px solid #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 10px 20px rgba(0,0,0,.25), inset 0 -6px 0 rgba(0,0,0,.18); transition: transform .12s, filter .12s; overflow: hidden; }
.btn::before { content: ''; position: absolute; left: 8%; right: 8%; top: 4px; height: 42%; border-radius: 30px; background: linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.08)); pointer-events: none; }
.btn:hover { transform: scale(1.06); filter: brightness(1.08); }
.btn:active { transform: scale(.97) translateY(3px); }
.btn.green { background: linear-gradient(#a8ec5a, #4dbb22 60%, #2e8c12); }
.btn.orange { background: linear-gradient(#ffd25a, #ff9a1a 60%, #e0660a); }
.btn.blue { background: linear-gradient(#7ad0ff, #2a8de8 60%, #1a5fb8); }
.btn.red { background: linear-gradient(#ff8a7a, #e8432a 60%, #b8221a); }
.btn.gray { background: linear-gradient(#d8dce4, #9aa2b0 60%, #6f7684); cursor: default; }
.btn.small { font-size: 26px; min-width: 170px; padding: 8px 24px 12px; }
.btn.huge { font-size: 56px; min-width: 360px; padding: 16px 50px 22px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 40px rgba(255,255,160,.9), inset 0 -6px 0 rgba(0,0,0,.18); } }
.menu-col { position: absolute; left: 50%; top: 272px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 12px; align-items: center; }
#s-menu .menu-col .btn { font-size: 30px; padding: 8px 30px 12px; min-width: 280px; }
.menu-col .btn { animation: popin .45s cubic-bezier(.2,1.6,.4,1) backwards; }
.menu-col .btn:nth-child(2) { animation-delay: .05s } .menu-col .btn:nth-child(3) { animation-delay: .1s } .menu-col .btn:nth-child(4) { animation-delay: .15s } .menu-col .btn:nth-child(5) { animation-delay: .2s }
@keyframes popin { from { transform: scale(.4); opacity: 0 } }
.menu-col.inpanel { position: static; transform: none; margin: 18px 0 8px; }
.roundbtn { position: absolute; right: 18px; top: 16px; width: 58px; height: 58px; border-radius: 50%; border: 4px solid #fff; cursor: pointer; font: 26px 'LilitaOne', Impact, sans-serif; color: #fff;
  background: linear-gradient(#7ad0ff, #2a8de8 60%, #1a5fb8); box-shadow: 0 4px 0 rgba(0,0,0,.25), inset 0 -4px 0 rgba(0,0,0,.18); text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.roundbtn:hover { transform: scale(1.08); }

/* Coin & star boxes */
.coinbox, .starsbox { position: absolute; top: 18px; right: 20px; display: flex; align-items: center; gap: 10px; padding: 6px 22px 6px 8px; border-radius: 30px; background: linear-gradient(#ffffff, #dfeeff); border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3);
  font: 30px 'LilitaOne', Impact, sans-serif; color: #b86a00; }
.starsbox { right: auto; left: 20px; color: #c98a00; }
.coin-ico, .star-ico { width: 40px; height: 40px; display: inline-block; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc21a 50%, #d98a00); border: 3px solid #a86200; }
.star-ico { border: 0; border-radius: 0; background: linear-gradient(#fff6a0, #ffc21a 60%, #e89a00); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* Panels */
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 620px; padding: 60px 40px 30px; border-radius: 34px; background: linear-gradient(#ffffff, #e4f3ff 40%, #c7e4ff); border: 6px solid #fff;
  box-shadow: 0 0 0 4px #2a8de8, 0 20px 50px rgba(0,0,0,.5); animation: panelin .4s cubic-bezier(.2,1.5,.4,1); }
.panel.wide { width: 1100px; } .panel.narrow { width: 460px; }
@keyframes panelin { from { transform: translate(-50%, -50%) scale(.6); opacity: 0 } }
.ribbon { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); white-space: nowrap; padding: 10px 60px 14px; font: 44px 'LilitaOne', Impact, sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.3);
  background: linear-gradient(#ff9a5a, #e8432a 60%, #b8221a); border: 5px solid #fff; border-radius: 22px; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.panel-foot { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.panel-foot.center { justify-content: center; }
.hint { font-weight: 600; font-size: 20px; color: #3a5a8a; }

/* Level grid */
.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lvl { position: relative; border-radius: 20px; padding: 8px; background: #fff; box-shadow: 0 5px 0 #8fb8e0, 0 8px 16px rgba(0,0,0,.2); cursor: pointer; transition: transform .12s; animation: popin .4s cubic-bezier(.2,1.6,.4,1) backwards; }
.lvl:hover { transform: translateY(-4px) scale(1.03); }
.lvl canvas { display: block; width: 100%; height: 170px; border-radius: 14px; }
.lvl .ln { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px 2px; font: 26px 'LilitaOne', Impact, sans-serif; color: #2b2346; }
.lvl .num { position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(#ffd25a, #ff9a1a); color: #fff; font: 28px/42px 'LilitaOne', Impact, sans-serif; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.3); transform: translate(-12px,-12px); box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.stars3 { display: flex; gap: 2px; }
.stars3 i { width: 28px; height: 28px; display: inline-block; background: #c9d6e6; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars3 i.on { background: linear-gradient(#fff6a0, #ffc21a 60%, #e89a00); }
.lvl.locked { cursor: default; }
.lvl.locked:hover { transform: none; }
.lvl.locked canvas { filter: grayscale(1) brightness(.6); }
.lock { position: absolute; left: 50%; top: 92px; transform: translate(-50%, -50%); width: 64px; height: 56px; border-radius: 10px; background: linear-gradient(#ffd25a, #e09a1a); border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.lock::before { content: ''; position: absolute; left: 10px; top: -34px; width: 30px; height: 34px; border: 7px solid #fff; border-bottom: 0; border-radius: 22px 22px 0 0; }
.best { font: 600 15px 'Fredoka', sans-serif; color: #5a6a8a; padding: 0 6px 2px; }

/* Garage */
.garage { display: grid; grid-template-columns: 60px 560px 60px 1fr; align-items: center; gap: 16px; }
.arrow { width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff; cursor: pointer; color: #fff; font-size: 24px; background: linear-gradient(#ffd25a, #ff9a1a 60%, #e0660a); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.arrow:hover { transform: scale(1.1); }
.g-show { text-align: center; }
.g-name { font: 40px 'LilitaOne', Impact, sans-serif; color: #e8432a; text-shadow: 0 2px 0 #fff; }
.g-stats { display: flex; flex-direction: column; gap: 14px; }
.g-stats .btn { min-width: 0; margin-top: 10px; }
.stat label { font-weight: 700; font-size: 20px; color: #3a4a7a; }
.bar { height: 22px; border-radius: 12px; background: #fff; border: 3px solid #9cc4ea; overflow: hidden; margin-top: 4px; }
.bar b { display: block; height: 100%; border-radius: 10px; background: linear-gradient(#a8ec5a, #4dbb22); transition: width .3s; }

/* How to / options */
.howto { font-size: 22px; font-weight: 600; }
.howto .row { margin: 8px 0; display: flex; align-items: center; gap: 8px; }
.key { display: inline-block; min-width: 42px; height: 40px; padding: 0 8px; border-radius: 8px; background: linear-gradient(#fff, #dde6f2); border: 2px solid #8a9ab8; box-shadow: 0 3px 0 #8a9ab8; text-align: center; font: 22px/38px 'LilitaOne', Impact, sans-serif; color: #2b2346; }
.key.wide { min-width: 120px; }
.howto p { margin: 12px 0 0; font-weight: 500; }
.gold { color: #d98a00; } .cyan { color: #1a8de8; }
.opts .opt { display: flex; justify-content: space-between; align-items: center; padding: 14px 6px; border-bottom: 2px dashed #b8d4f0; font-size: 26px; font-weight: 700; }
.toggle { width: 110px; height: 48px; border-radius: 26px; border: 4px solid #fff; cursor: pointer; position: relative; background: linear-gradient(#ff8a7a, #e8432a); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.toggle::after { content: 'OFF'; position: absolute; right: 12px; top: 6px; font: 22px 'LilitaOne', Impact, sans-serif; color: #fff; }
.toggle::before { content: ''; position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on { background: linear-gradient(#a8ec5a, #4dbb22); }
.toggle.on::after { content: 'ON'; right: auto; left: 14px; }
.toggle.on::before { left: 66px; }

/* Results */
.r-stars { display: flex; justify-content: center; gap: 12px; margin: 0 0 14px; }
.bigstar { width: 110px; height: 110px; display: inline-block; background: #c9d6e6; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bigstar:nth-child(2) { transform: translateY(-18px) scale(1.15); }
.bigstar.on { background: linear-gradient(#fffbd0, #ffd21a 50%, #f08a00); animation: starpop .5s cubic-bezier(.2,2,.4,1); }
.bigstar:nth-child(2).on { animation-name: starpop2; }
@keyframes starpop { from { transform: scale(2.4); opacity: 0 } }
@keyframes starpop2 { from { transform: translateY(-18px) scale(2.6); opacity: 0 } }
.r-rows div { display: flex; justify-content: space-between; padding: 8px 10px; font-size: 24px; font-weight: 600; border-bottom: 2px dashed #b8d4f0; }
.r-rows b { font-family: 'LilitaOne', Impact, sans-serif; font-weight: normal; color: #e8432a; }
.r-unlock { text-align: center; font: 26px 'LilitaOne', Impact, sans-serif; color: #2e8c12; min-height: 34px; margin-top: 10px; }
#s-results .btn.small { min-width: 150px; }

/* Difficulty selector */
.diff { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 30px; background: #fff; box-shadow: inset 0 2px 6px rgba(40,80,140,.25); }
.diff span { font: 20px 'LilitaOne', Impact, sans-serif; color: #3a5a8a; padding: 0 8px 0 10px; }
.diff button { font: 22px 'LilitaOne', Impact, sans-serif; color: #7a8aa8; background: #e8eef7; border: 3px solid transparent; border-radius: 22px; padding: 4px 18px 6px; cursor: pointer; transition: transform .1s; }
.diff button:hover { transform: scale(1.06); }
.diff button.on { color: #fff; border-color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.diff .d-easy.on { background: linear-gradient(#a8ec5a, #4dbb22); }
.diff .d-medium.on { background: linear-gradient(#ffd25a, #ff9a1a); }
.diff .d-hard.on { background: linear-gradient(#ff8a7a, #e8432a); }
#s-levels .hint { font-size: 17px; line-height: 1.25; }