/* Shared menu and dialog styles for the newer games. Each game sets its own
   colours by overriding the variables in :root. */
:root{--ink:#2B2140;--soft:#7A6E92;--card:#FFFDF8;--line:#E6DCF2;--ac:#FF8A1F;--ac2:#C85F00;--ad:#7C5CFF;--ad2:#5638D6;--title:#FFE45C;--title2:#C85F00;--bg:#2A1B4D}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:700 16px ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}
canvas#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;padding:0}
#ui{position:fixed;inset:0;pointer-events:none}
#ui>*{pointer-events:auto}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:30px;background:var(--bg)}
#loading span{font-size:15px;opacity:.8}
#loading i{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--title),var(--ac));animation:spin 1.1s infinite ease-in-out}
@keyframes spin{50%{transform:rotate(180deg) scale(.8);border-radius:50%}}
.menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:18px 16px 28px;overflow-y:auto}
.menu h1{margin:10px 0 2px;font-size:clamp(40px,11vw,66px);line-height:.95;text-align:center;color:var(--title);text-shadow:0 4px 0 var(--title2),0 10px 24px rgba(0,0,0,.35);letter-spacing:1px}
.sub{color:rgba(255,255,255,.9);margin:10px 0 14px;text-align:center;max-width:420px}
.stat{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.stat span{background:rgba(255,255,255,.16);color:#fff;border-radius:14px;padding:6px 12px;backdrop-filter:blur(4px)}
.modes{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px}
.mode{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:22px;padding:14px 16px;box-shadow:0 5px 0 var(--line),0 12px 24px rgba(0,0,0,.2);text-align:left;transition:transform .12s}
.mode:active{transform:translateY(3px)}
.mode .ic{width:56px;height:56px;flex:none;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;background:linear-gradient(135deg,#FFE7A8,#FFB44D)}
.mode div{flex:1;display:flex;flex-direction:column;gap:2px}
.mode b{font-size:19px}.mode small{color:var(--soft);font-size:13px;line-height:1.25}
.mode .go{flex:none;background:var(--ac);color:#fff;border-radius:14px;padding:8px 11px;font-size:14px;box-shadow:0 3px 0 var(--ac2)}
.top{width:100%;max-width:520px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.top h2{flex:1;margin:0;font-size:24px;text-align:center;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.back{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.92);box-shadow:0 3px 0 rgba(0,0,0,.25);font-size:26px;font-weight:900;color:var(--ink)}
.back.fl{position:absolute;left:10px;top:10px;z-index:3}
.lvls{width:100%;max-width:520px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.lv{aspect-ratio:1;border-radius:18px;background:linear-gradient(180deg,#fff,#F1E9FF);box-shadow:0 4px 0 var(--line),0 8px 14px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:var(--ink)}
.lv small{font-size:11px;color:#E8A400;letter-spacing:1px;line-height:1}
.lv.lock{background:rgba(255,255,255,.25);box-shadow:none;color:rgba(255,255,255,.7)}
.lv.cur{background:linear-gradient(180deg,#FFF4B0,#FFB341);box-shadow:0 4px 0 var(--ac2),0 0 0 4px rgba(255,255,255,.55);animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.next10{grid-column:1/-1;background:rgba(255,255,255,.92);border-radius:18px;padding:14px;text-align:center;color:var(--soft);box-shadow:0 4px 0 rgba(0,0,0,.15)}
.btn{min-height:50px;padding:0 24px;border-radius:18px;background:linear-gradient(180deg,#FFB451,var(--ac));color:#fff;font-weight:900;font-size:17px;box-shadow:0 5px 0 var(--ac2),0 10px 18px rgba(0,0,0,.18);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ac2)}
.btn.alt{background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--line);text-shadow:none}
.btn.ad{background:linear-gradient(180deg,#9C82FF,var(--ad));box-shadow:0 5px 0 var(--ad2)}
.btn.sm{min-height:42px;padding:0 14px;font-size:15px}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ov{position:absolute;inset:0;background:rgba(15,8,35,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.card{background:linear-gradient(180deg,#FFFDF8,#F6EEFF);border:3px solid #fff;border-radius:28px;padding:22px 20px;max-width:360px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:12px;animation:up .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes up{from{transform:translateY(30px) scale(.9);opacity:0}}
.card h3{margin:0;font-size:28px}
.card p{margin:0;color:var(--soft)}
.stars{font-size:46px;letter-spacing:8px;color:#FFC21A;text-shadow:0 3px 0 #D88A00}
.stars i{display:inline-block;font-style:normal;animation:starpop .55s both}
.stars i.off{color:#E6DCF2;text-shadow:none}
@keyframes starpop{0%{transform:scale(0) rotate(-45deg);opacity:0}70%{transform:scale(1.35) rotate(8deg);opacity:1}100%{transform:scale(1)}}
.hudbar{position:absolute;left:66px;right:10px;top:10px;display:flex;gap:8px;align-items:center;justify-content:flex-end;z-index:2;pointer-events:none}
.hudbar>*{pointer-events:auto}