:root{--bg:#681ef2;--white:#fff;--uiScale:1;--shellScale:1}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body,#app{margin:0;width:100%;height:100%;height:100dvh;min-height:100%;max-height:100dvh;overflow:hidden;background:#681ef2;overscroll-behavior:none;overscroll-behavior-y:none;touch-action:none}
html{position:fixed;inset:0}
body,#app{position:fixed;inset:0}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--white);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background-image:url('assets/ui/game_bg.webp');background-size:cover;background-position:center}
button,img,canvas,audio,video{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}audio,video{display:none!important;visibility:hidden!important}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;padding:0;touch-action:manipulation}
.screen{position:absolute;inset:0;display:flex}.hidden{display:none!important}
.screen-loading{align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:32px;background:#681ef2}.brand-baby{font-size:64px}.screen-loading h1{margin:8px 0 4px;font-size:42px;line-height:1;font-weight:1000;letter-spacing:.2px}.screen-loading p{margin:6px 0 20px;font-weight:800;opacity:.92}.progress{width:min(360px,76vw);height:16px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}#loadFill{width:0;height:100%;border-radius:999px;background:#ffd739;transition:width .2s ease}#loadText{margin-top:8px;font-weight:900}

.screen-game{position:absolute;inset:0;display:block;padding:0;background:rgba(88,22,208,.18);overflow:hidden}
.gameShell{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform:translate(-50%,-50%) scale(var(--shellScale));transform-origin:center center;border-radius:30px;background:rgba(115,61,246,.10);border:1px solid rgba(255,255,255,.16);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;padding:10px;box-shadow:none;touch-action:none}
.hud{display:grid;grid-template-rows:auto;gap:calc(8px * var(--uiScale));min-width:0}.actionBar{display:flex;gap:calc(12px * var(--uiScale));align-items:stretch;min-height:calc(120px * var(--uiScale));min-width:0}
.packsWrap{flex:1 1 auto;min-width:0;min-height:calc(120px * var(--uiScale));background:url('assets/ui/tray_bg.webp') center/100% 100% no-repeat;padding:calc(10px * var(--uiScale)) calc(14px * var(--uiScale)) calc(12px * var(--uiScale));display:flex;align-items:center}
.packTray{width:100%;height:calc(92px * var(--uiScale));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(14px * var(--uiScale))}.packSlot{position:relative;display:flex;align-items:center;justify-content:center;height:calc(92px * var(--uiScale));min-width:0;overflow:visible;transition:transform .16s ease,opacity .2s ease}.packSlot img{max-height:calc(118px * var(--uiScale));max-width:100%;object-fit:contain}.packSlot:disabled{opacity:.15;cursor:default}.packSlot.selected{transform:translateY(calc(-2px * var(--uiScale))) scale(1.04);filter:drop-shadow(0 0 .8rem rgba(255,236,126,.45))}.packSlot.refill{animation:refill .36s ease both}@keyframes refill{0%{transform:translateY(-10px) scale(.82);opacity:.45}70%{transform:translateY(0) scale(1.04);opacity:1}100%{transform:none;opacity:1}}

.actionButtons{display:flex;gap:calc(10px * var(--uiScale));align-items:flex-start;flex:0 0 auto}.pillButton,.uiCard{background-repeat:no-repeat;background-position:center;background-size:100% 100%;border:0}.pillButton{height:calc(88px * var(--uiScale));display:flex;align-items:center;justify-content:center;gap:calc(10px * var(--uiScale));padding:0 calc(18px * var(--uiScale));white-space:nowrap;font-weight:950;color:#fff}.accentButton{min-width:calc(260px * var(--uiScale));background-image:url('assets/ui/auto_pill.webp')}.lilacButton{min-width:calc(210px * var(--uiScale));background-image:url('assets/ui/collection_pill.webp')}.btnLabel{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--uiScale));padding:0 calc(10px * var(--uiScale));font-size:calc(23px * var(--uiScale));line-height:1.05;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.uiIcon{display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain;flex:0 0 auto}.coinIcon{width:calc(44px * var(--uiScale));height:calc(44px * var(--uiScale));background-image:url('assets/ui/coin_icon.webp')}.coinIcon.small{width:calc(28px * var(--uiScale));height:calc(28px * var(--uiScale))}.coinIcon.tiny{width:calc(20px * var(--uiScale));height:calc(20px * var(--uiScale));vertical-align:middle}.bookIcon{width:calc(42px * var(--uiScale));height:calc(42px * var(--uiScale));background-image:url('assets/ui/book_icon.webp')}.packIcon{width:calc(52px * var(--uiScale));height:calc(52px * var(--uiScale));background-image:url('assets/ui/question_pack_icon.webp');margin-bottom:calc(2px * var(--uiScale))}.inlineCoin{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}
.coinCounter{display:flex;align-items:center;gap:calc(10px * var(--uiScale));white-space:nowrap}.hudCoin{align-self:flex-start;height:calc(88px * var(--uiScale));padding:0 calc(4px * var(--uiScale)) 0 calc(2px * var(--uiScale));min-width:auto;font-size:calc(40px * var(--uiScale));font-weight:1000;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.hudCoin .coinIcon{width:calc(54px * var(--uiScale));height:calc(54px * var(--uiScale));filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}.coinValue{display:inline-block;line-height:1}.modalCoin{color:#5d28c3;font-size:28px;font-weight:1000;gap:10px}.modalCoin .coinIcon{width:32px;height:32px}
.uiCard{padding:calc(10px * var(--uiScale)) calc(14px * var(--uiScale)) calc(8px * var(--uiScale));text-align:center;width:calc(176px * var(--uiScale));min-width:calc(176px * var(--uiScale));height:calc(118px * var(--uiScale));display:flex;flex-direction:column;align-items:center;justify-content:center}.shopLaunch{background-image:url('assets/ui/shop_panel.webp');padding-top:calc(6px * var(--uiScale))}.shopTitle{font-size:calc(16px * var(--uiScale));font-weight:1000;line-height:1.05;max-width:calc(140px * var(--uiScale))}.shopText{margin-top:calc(5px * var(--uiScale));font-size:calc(12px * var(--uiScale));font-weight:850;line-height:1.15;opacity:.98;max-width:calc(140px * var(--uiScale));display:flex;align-items:center;justify-content:center;gap:calc(4px * var(--uiScale));flex-wrap:wrap}
.fieldWrap{position:relative;margin-top:calc(8px * var(--uiScale));border-radius:calc(28px * var(--uiScale));overflow:hidden;background:rgba(108,36,247,.10);border:1px solid rgba(255,255,255,.16);min-height:0;height:100%}#gameCanvas{width:100%;height:100%;display:block;touch-action:none}
.sellZoneField{position:absolute;left:calc(18px * var(--uiScale));bottom:calc(52px * var(--uiScale));z-index:1;width:calc(248px * var(--uiScale));min-width:calc(248px * var(--uiScale));height:calc(154px * var(--uiScale));pointer-events:none;opacity:0}.sellZoneField.active{opacity:0}
.hint{position:absolute;left:calc(12px * var(--uiScale));right:calc(12px * var(--uiScale));bottom:calc(10px * var(--uiScale));min-height:calc(38px * var(--uiScale));padding:calc(8px * var(--uiScale)) calc(12px * var(--uiScale));border-radius:calc(16px * var(--uiScale));background:rgba(111,55,239,.62);font-size:calc(12px * var(--uiScale));font-weight:850;line-height:1.18;text-align:center;pointer-events:none;transition:opacity .35s ease;z-index:3}.hint.fade{opacity:0}.toast{position:absolute;left:50%;bottom:calc(68px * var(--uiScale) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;padding:10px 14px;border-radius:999px;background:rgba(38,12,92,.84);font-weight:900;max-width:calc(88vw * var(--shellScale));text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.tutorialLayer{position:absolute;inset:0;pointer-events:none;z-index:8}.tutorialHand{position:absolute;width:calc(88px * var(--uiScale));height:auto;transform-origin:36px 12px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}.coinFly{position:fixed;left:0;top:0;width:38px;height:38px;background:url('assets/ui/coin_icon.webp') center/contain no-repeat;pointer-events:none;z-index:60;will-change:transform,opacity}

.modal{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(26,7,83,.62);backdrop-filter:blur(6px)}.modalCard{position:relative;width:min(1200px,100%);height:min(820px,100%);border-radius:28px;background:#f7f0ff;color:#25124d;padding:14px;display:grid;grid-template-rows:auto 1fr;overflow:hidden}.shopCard{grid-template-rows:auto auto 1fr}.modalHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.modalHeader h2{margin:0;font-size:26px;line-height:1;font-weight:1000;color:#4f19bb}.modalHeader p{margin:4px 0 0;font-size:13px;font-weight:850;color:#6940a8}.roundButton{width:44px;height:44px;border-radius:50%;background:#ff6a97;color:#fff;font-size:30px;line-height:40px;font-weight:900;border:1px solid rgba(0,0,0,.04)}
.collectionGrid{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;padding:2px 2px 20px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.card{min-height:138px;border-radius:18px;background:#fff;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#2c145d;border:1px solid rgba(116,44,237,.14)}.card.locked{filter:saturate(.7);opacity:.82}.cardImg{height:78px;width:86px;display:flex;align-items:center;justify-content:center}.cardImg img{max-height:78px;max-width:86px;object-fit:contain}.lockIcon{font-size:36px;color:#8b6dbf}.cardName{font-size:12px;font-weight:950;text-align:center;line-height:1.05}.dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-height:14px}.dot{width:7px;height:7px;border-radius:50%;background:#d7c9f2}.dot.on{background:#7c2cff}
.detailPanel{position:absolute;inset:0;background:#f7f0ff;z-index:2;padding:14px;display:grid;grid-template-rows:auto minmax(0,1fr)}.detailHeader{height:48px;display:flex;align-items:center;gap:12px;color:#4f19bb}.detailHeader strong{font-size:20px;font-weight:1000}.smallButton{border-radius:999px;background:#67d8ff;color:#05325f;border:1px solid rgba(0,0,0,.04);padding:8px 12px;font-weight:950}.stageGrid{overflow:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;padding-bottom:18px;touch-action:pan-y;align-content:start;align-items:start;grid-auto-rows:1fr}.stageCard{border-radius:20px;background:#fff;height:100%;min-height:0;padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border:1px solid rgba(116,44,237,.12)}.stageCard img{max-width:110px;max-height:104px;object-fit:contain}.stageCard.locked img{filter:grayscale(1) brightness(.25) opacity(.25)}.stageLabel{font-weight:950;font-size:13px;color:#5a26b8;margin-top:auto}.stageQuestion{font-size:46px;color:#9a7ecf;margin-top:20px}
.shopInfoBar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.shopReplaceText{font-size:14px;font-weight:900;color:#5d28c3}.shopGrid{overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:2px 2px 20px;touch-action:pan-y;align-content:start;align-items:start;grid-auto-rows:260px}.shopItem{background:#fff;border-radius:20px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;min-height:0;color:#2c145d;border:1px solid rgba(116,44,237,.14)}.shopItem img{max-width:118px;max-height:125px;object-fit:contain}.shopItemTitle{font-size:12px;font-weight:950;text-align:center;line-height:1.1;margin-top:auto}.shopPrice{margin-top:8px;padding:6px 10px;border-radius:999px;background:#ffd95b;color:#613500;font-weight:1000;font-size:13px;display:flex;align-items:center;justify-content:center;gap:4px}.shopItem:disabled{opacity:.55;cursor:not-allowed}
.introCard{width:min(920px,100%);height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 26px 24px;text-align:center;background:linear-gradient(180deg,#fff8ff,#f4edff)}.introTitle{font-size:42px;line-height:1.02;font-weight:1000;color:#5a1fd1;margin-bottom:18px}.introSteps{width:min(720px,100%);display:grid;gap:12px;margin-bottom:18px}.introStep{display:flex;align-items:center;gap:14px;justify-content:flex-start;border-radius:20px;background:#fff;padding:14px 18px;font-size:24px;font-weight:950;color:#4d1fb3;border:1px solid rgba(116,44,237,.12)}.introStep span{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#6dd9ff;color:#11306a;font-size:24px;font-weight:1000;flex:0 0 42px}.introNow{font-size:28px;line-height:1.15;font-weight:1000;color:#ff5b8c;margin:6px 0 18px}.introStartBtn{min-width:260px;height:72px;border-radius:999px;background:#6dd9ff;color:#083566;font-size:28px;font-weight:1000;border:0}
#app{position:fixed;inset:0}.modal{position:absolute;inset:0}.toast{pointer-events:none}.gameShell *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.settingsCorner{position:absolute;top:136px;right:16px;z-index:12;width:54px;height:54px;border-radius:50%;background:#ff7aa5;color:#fff;font-size:28px;font-weight:1000;display:flex;align-items:center;justify-content:center;border:4px solid #ffe0ef;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.settingsCard{width:min(760px,100%);height:auto;display:grid;grid-template-rows:auto 1fr;padding:18px 18px 22px}
.settingsGrid{display:grid;gap:18px;padding-top:8px}
.settingsRow{background:#fff;border:1px solid rgba(116,44,237,.14);border-radius:22px;padding:16px 18px;display:grid;gap:12px}
.settingsLabel{font-size:24px;font-weight:1000;color:#4f19bb}
.settingsControls{display:grid;grid-template-columns:56px 1fr 56px 80px;align-items:center;gap:12px}
.stepButton{height:48px;border-radius:16px;background:#67d8ff;color:#05325f;font-size:28px;font-weight:1000;border:1px solid rgba(0,0,0,.04)}
.volumeSlider{width:100%;accent-color:#7c2cff}
.settingsValue{font-size:22px;font-weight:1000;color:#5d28c3;text-align:right}

.rotateNotice{display:none;position:absolute;inset:0;z-index:100;align-items:center;justify-content:center;text-align:center;padding:24px;background:#681ef2;color:#fff}
.rotateCard{width:min(330px,88vw);border-radius:28px;padding:26px 22px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);box-shadow:0 14px 38px rgba(38,12,92,.24)}
.rotateIcon{font-size:56px;line-height:1;margin-bottom:10px;font-weight:1000}.rotateCard strong{display:block;font-size:28px;line-height:1.05;font-weight:1000}.rotateCard p{margin:10px 0 0;font-size:16px;line-height:1.25;font-weight:850;opacity:.94}
@media (orientation:portrait) and (max-width:800px){.rotateNotice{display:flex}.screen-game,.screen-loading{visibility:hidden}}

@supports (height:100svh){html,body,#app{height:100svh;max-height:100svh}}