@font-face{font-family:Space;src:url(../assets/fonts/space-bold.ttf)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#120c10;color:#fff5ea;font-family:Space,system-ui,sans-serif}
#app{max-width:1240px;margin:0 auto;padding:12px}
.screen[hidden]{display:none}
#menu{text-align:center;padding:40px 10px;background:radial-gradient(circle at 50% 20%,#4a2236,#120c10 70%);border-radius:18px;min-height:640px}
.kicker{letter-spacing:.3em;color:#ff9fc4;font-size:13px}h1{font-size:64px;margin:6px 0;text-shadow:0 6px 0 #7a2949}h1 span{color:#ff6fa8}
.sub{opacity:.85}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:28px auto}
.lv{background:#2a1820 center/cover;border:3px solid #ff8fbd;border-radius:14px;min-height:150px;color:#fff;font:inherit;cursor:pointer;position:relative;text-align:left;padding:12px;overflow:hidden}
.lv::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(18,8,14,.9))}
.lv *{position:relative}.lv b{font-size:22px;display:block}.lv small{opacity:.8}.lv .st{position:absolute;top:10px;right:12px;color:#ffd166}
.lv.locked{filter:grayscale(1) brightness(.5);cursor:not-allowed}.foot{opacity:.5;font-size:12px}
.hud{display:flex;gap:10px;align-items:center;background:#24141c;padding:8px 10px;border-radius:12px 12px 0 0}
.hud button,.skillbar button,.row button{font:inherit;background:#3a2230;color:#fff;border:2px solid #ff8fbd;border-radius:10px;padding:6px 12px;cursor:pointer}
.lvname{flex:1;font-weight:bold}.stat{font-size:14px}.stat b{color:#ffd166;font-size:18px}
.stage{position:relative;background:#000 center/cover;overflow:hidden}.stage::before{content:"";position:absolute;inset:-20px;backdrop-filter:blur(16px) brightness(.45) saturate(.8);-webkit-backdrop-filter:blur(16px) brightness(.45)}.stage>*{position:relative}.stage>.hint{position:absolute}canvas{width:100%;max-height:calc(100dvh - 150px);object-fit:contain;display:block;margin:0 auto;background:transparent;touch-action:none}
.hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:rgba(20,10,16,.82);padding:8px 14px;border-radius:10px;font-size:15px;max-width:80%;text-align:center}
.skillbar{display:flex;gap:10px;background:#24141c;padding:10px;border-radius:0 0 12px 12px;justify-content:center}
.skillbar button{min-width:150px;min-height:56px;display:flex;align-items:center;gap:8px;justify-content:center}
.skillbar button.on{background:#ff6fa8;border-color:#fff}.skillbar button:disabled{opacity:.35}
.skillbar .n{background:#120c10;border-radius:8px;padding:2px 8px;color:#ffd166}.skillbar .ic{width:40px;height:40px;object-fit:contain}
.done{position:absolute;inset:0;top:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(18,8,14,.82);text-align:center}
.done[hidden]{display:none}#play{position:relative}.done h2{font-size:48px;margin:0}.stars{font-size:44px;color:#ffd166;margin:6px}.row{display:flex;gap:12px}
@media (max-width:700px){.skillbar button{min-width:0;flex:1;font-size:12px}.levels{grid-template-columns:1fr 1fr}h1{font-size:40px}}

@media (max-height:500px){#app{padding:0}.hud{padding:4px 6px;gap:6px}.hud button{padding:3px 8px}.lvname{font-size:13px}.stat{font-size:12px}.stat b{font-size:14px}canvas{max-height:calc(100dvh - 108px)}.skillbar{padding:4px}.skillbar button{min-height:44px;padding:2px 8px}.hint{font-size:11px;top:2px;padding:3px 8px;max-width:58%;line-height:1.25;opacity:.92}}

.levels h2.world{grid-column:1/-1;text-align:left;margin:14px 0 -4px;font-size:22px;color:#ffd166;letter-spacing:.04em;border-bottom:2px solid rgba(255,143,189,.35);padding-bottom:6px}

.title{text-align:center;padding:40px 10px 30px;background:radial-gradient(circle at 50% 20%,#4a2236,#120c10 70%);border-radius:18px;min-height:600px;position:relative;overflow:hidden}
.title .hero{height:170px;margin:10px 6px 0;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5));animation:bob 1.6s ease-in-out infinite}.title .h2{animation-delay:.3s}.title .h3{animation-delay:.6s}
@keyframes bob{50%{transform:translateY(-10px)}}
button.big{font:inherit;font-size:22px;padding:12px 30px;border-radius:14px;border:3px solid #ff8fbd;background:#ff6fa8;color:#fff;cursor:pointer}
.row.c{justify-content:center;flex-wrap:wrap;margin:18px 0}.row.c button:not(.big){font:inherit;padding:10px 16px;border-radius:12px;border:2px solid #ff8fbd;background:#2a1820;color:#fff;cursor:pointer}
.maphead{display:flex;justify-content:space-between;align-items:center;max-width:900px;margin:0 auto}.maphead button{font:inherit;padding:8px 14px;border-radius:10px;border:2px solid #ff8fbd;background:#2a1820;color:#fff;cursor:pointer}
.startotal{color:#ffd166;font-size:20px}h1.small{font-size:44px}
.soundbtn.mini{width:auto}
.tut{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(12,6,10,.72);z-index:5}.tut[hidden]{display:none}
.tutcard{background:#2a1820;border:3px solid #ff8fbd;border-radius:16px;padding:16px 22px;max-width:560px;max-height:90%;overflow:auto;text-align:left}.tutcard h3{margin:0 0 8px;color:#ffd166}
.tutrow{display:flex;gap:12px;align-items:center;margin:8px 0}.tutrow .ti{font-size:40px;min-width:56px;text-align:center}.tutrow p{margin:2px 0;opacity:.9;font-size:14px}.tutcard .big{display:block;margin:12px auto 0}
@media (max-width:700px){.levels{grid-template-columns:repeat(2,1fr)}h1{font-size:40px}.title .hero{height:110px}}
@media (max-height:500px){.title{min-height:0;padding:14px}.title .hero{height:80px}.title h1{font-size:34px;margin:2px}.tutcard{padding:8px 14px}.tutrow .ti{font-size:28px;min-width:40px}.tutrow img{width:40px;height:40px}.tutrow p{font-size:12px}}
/* Phones in portrait: the HUD wraps onto two rows instead of pushing buttons off-screen (it measured 530 px wide on a 375 px phone) */
@media (max-width:560px){.hud{flex-wrap:wrap;gap:6px 8px;padding:6px 8px}.hud .lvname{flex:1 0 100%;order:-1;font-size:14px}.hud button{padding:6px 10px;min-height:40px;min-width:40px}.stat{font-size:12px}.stat b{font-size:16px}}
/* Phones in portrait: the play area is short, so the "New in this level" card covers the whole screen and its button stays visible */
@media (max-width:560px){.tut:not([hidden]){position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(12,6,16,.8)}.tut .tutcard{max-height:calc(100dvh - 32px);overflow:auto}}
/* "Turn your phone sideways" card (game2.js turnCheck) */
.turnphone{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(14,8,14,.94)}.turnphone[hidden]{display:none}
.tpcard{max-width:320px;text-align:center;background:#2a1820;border:3px solid #ff8fbd;border-radius:18px;padding:24px 20px}
.tpcard h2{margin:8px 0;color:#fff;font-size:24px}.tpcard p{margin:0 0 18px;color:#e3d8dc;font-size:15px;line-height:1.45}
.tpicon{font-size:52px;animation:tpturn 1.6s ease-in-out infinite}
.tpcard button{font:inherit;background:transparent;color:#ffb1c1;border:2px solid #ff8fbd;border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer}
@keyframes tpturn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.tpicon{animation:none}}
/* Phones held sideways: the HUD and skill buttons float over the edges of the play area so the bakery gets the full screen
   height (it was letterboxed to about 470x267 on an 812x375 phone, making doughnuts tiny and hard to tap) */
@media (max-height:500px) and (orientation:landscape){
  #play{position:relative;height:100dvh;overflow:hidden}
  #play .stage{height:100dvh}
  #play canvas{height:100dvh!important;max-height:100dvh!important}
  #play .hud{position:absolute;top:0;left:0;right:0;z-index:6;border-radius:0;background:linear-gradient(rgba(20,10,16,.88),rgba(20,10,16,.55) 70%,rgba(20,10,16,0))}
  #play .skillbar{position:absolute;left:0;right:0;bottom:0;z-index:6;border-radius:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(rgba(20,10,16,0),rgba(20,10,16,.6) 30%,rgba(20,10,16,.9))}
  #play .skillbar button{min-height:46px;padding:4px 10px;background:rgba(58,34,48,.92);font-size:12px}
  #play .skillbar .ic{width:32px;height:32px}
  #play .hint{top:44px}
}
/* World leaderboard: rank line on the win screen, Hall of Fame on the level map */
.donerank{margin:6px 0 10px;font-size:15px;color:#ffd166}.donerank a{color:#ff8fbd}
.famebtn{font:inherit;background:#2a1820;color:#ffd166;border:2px solid #ffd16688;border-radius:10px;padding:6px 12px;cursor:pointer}
.fame{border:2px solid #ff8fbd;border-radius:16px;padding:16px;width:min(420px,calc(100% - 32px));background:#1f1626;color:#f7eef2}.fame::backdrop{background:#000a}
.famehead{display:flex;justify-content:space-between;align-items:center}.famehead b{font-size:18px}.famehead button{background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
.famepick{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:14px}.famepick select{flex:1;font:inherit;background:#2a1820;color:#fff;border:1px solid #ffffff33;border-radius:8px;padding:6px}
.famelist{list-style:none;margin:0;padding:0;max-height:55vh;overflow:auto}.famelist li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:7px 0;border-bottom:1px solid #ffffff14;font-size:14px}
.famelist span{color:#9d8f98}.famelist em{font-style:normal;color:#ffd166}.famelist .empty{display:block;color:#9d8f98}
.famefoot{margin:10px 0 0;font-size:12px;color:#cbbac2}
@media (max-width:560px){.maphead{flex-wrap:wrap;gap:8px;justify-content:center}}