:root{--ink: #0b0820;--panel: rgba(16, 11, 44, .9);--panel2: rgba(34, 26, 80, .9);--gold: #ffd36a;--gold2: #ffae3a;--text: #fff6dc;--muted: #b9b0d8;--line: rgba(255, 220, 140, .28);--danger: #ff5a7a;--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--ink);overflow:hidden;overscroll-behavior:none;font-family:var(--font);color:var(--text);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#app{position:fixed;inset:0}canvas#game{position:absolute;inset:0;display:block;background:var(--ink)}.hidden{display:none!important}button{font-family:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}#hud{position:absolute;inset:0;pointer-events:none;padding:calc(10px + var(--sat)) calc(12px + var(--sar)) 10px calc(12px + var(--sal));display:flex;justify-content:space-between;align-items:flex-start}.hud-left,.hud-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.chip{background:#0b08209e;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:clamp(12px,2.2vmin,17px);display:flex;gap:6px;align-items:center;letter-spacing:.02em;text-shadow:0 1px 2px #000}.chip.gold{color:var(--gold)}.chip .ico{font-size:.9em;opacity:.9}.icon-btn{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#0b08209e;font-size:15px;letter-spacing:-2px}.icon-btn:active{background:#503ca0cc}.assist{position:absolute;left:calc(12px + var(--sal));top:calc(58px + var(--sat));display:flex;gap:8px;pointer-events:none;flex-wrap:wrap}.chip-btn{pointer-events:auto;background:#221a50d9;border:1px solid var(--gold);border-radius:999px;padding:8px 14px;font-size:14px;min-height:40px}.chip-btn small{opacity:.7;margin-left:4px}.toast{position:absolute;left:50%;top:calc(14% + var(--sat));transform:translate(-50%);background:var(--panel);border:1px solid var(--gold);border-radius:16px;padding:12px 22px;text-align:center;font-size:clamp(14px,2.6vmin,20px);box-shadow:0 0 40px #ffc85040;animation:pop .35s ease-out;pointer-events:none;max-width:86vw}.toast b{color:var(--gold);display:block;font-size:1.15em;letter-spacing:.08em;text-transform:uppercase}.banner{position:absolute;left:0;right:0;top:36%;text-align:center;pointer-events:none;animation:bannerIn 2.2s ease both}.banner .n{font-size:clamp(13px,2.4vmin,18px);color:var(--gold);letter-spacing:.3em;text-transform:uppercase;text-shadow:0 2px 8px #000}.banner .t{font-size:clamp(26px,6vmin,52px);font-weight:800;text-shadow:0 3px 16px #000,0 0 30px rgba(255,200,100,.4)}@keyframes bannerIn{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}75%{opacity:1}to{opacity:0;transform:translateY(-6px)}}@keyframes pop{0%{transform:translate(-50%) scale(.85);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}#touch{position:absolute;inset:0;pointer-events:none}#joy{position:absolute;left:0;top:18%;width:52%;bottom:0;pointer-events:auto;touch-action:none}#joy-base{position:absolute;left:calc(var(--sal) + 6vmin);bottom:calc(var(--sab) + 6vmin);width:24vmin;height:24vmin;max-width:170px;max-height:170px;min-width:120px;min-height:120px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.28)}#joy-base{transition:opacity .15s}#joy-base.idle{opacity:.3}#joy-knob{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;background:#ffe9a86b;border:2px solid rgba(255,233,168,.8)}#t-right{position:absolute;right:calc(var(--sar) + 3vmin);bottom:calc(var(--sab) + 4vmin);width:46vmin;height:40vmin;max-width:330px;max-height:290px;pointer-events:none}.tbtn{position:absolute;pointer-events:auto;border-radius:50%;border:2px solid rgba(255,255,255,.45);background:#ffffff24;color:#fff;font-weight:800;letter-spacing:.06em;touch-action:none;text-shadow:0 1px 3px #000}.tbtn.jump{right:0;bottom:0;width:56%;aspect-ratio:1;min-width:104px;font-size:clamp(13px,3vmin,20px);background:#ffd36a33;border-color:#ffd36acc}.tbtn.dash{left:0;top:0;width:44%;aspect-ratio:1;min-width:86px;font-size:clamp(12px,2.6vmin,17px);background:#6fe8ff2e;border-color:#6fe8ffbf}.tbtn.on{background:#fff6;transform:scale(.96)}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));overflow:auto;touch-action:pan-y}#s-title{background:radial-gradient(ellipse at 50% 100%,#0b082026,#0b08208c)}#s-pause,#s-settings,#s-confirm,#s-complete,#s-win{background:#0805189e}#s-levels,#s-wardrobe{background:#080518d1}#s-loading,#s-rotate{background:var(--ink);z-index:50}.title-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;max-height:100%}.logo{margin:0;font-size:clamp(48px,15vmin,140px);line-height:.95;font-weight:900;letter-spacing:.04em;display:flex;gap:.04em;filter:drop-shadow(0 0 28px rgba(255,190,90,.45))}.logo span{background:linear-gradient(180deg,#fff6c8,#ffd36a 45%,#ff8a3a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #5a1c50)}.logo span:last-child{background:linear-gradient(180deg,#ffe9f4,#ff9ec4 45%,#c2408a);-webkit-background-clip:text;background-clip:text}.tag{margin:0 0 6px;color:var(--muted);font-size:clamp(13px,2.8vmin,20px);letter-spacing:.08em;text-shadow:0 2px 8px #000}.credit{margin:6px 0 0;font-size:12px;color:var(--muted);opacity:.8;text-shadow:0 1px 4px #000}.menu{display:flex;flex-direction:column;gap:10px;width:min(78vw,320px)}.menu.row-menu{flex-direction:row;width:100%;justify-content:center;flex-wrap:wrap}.btn{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 20px;font-size:clamp(15px,2.8vmin,20px);font-weight:700;min-height:48px;transition:transform .08s,background .15s,box-shadow .15s;text-shadow:0 1px 2px #000}.btn:hover{background:#463696f2;box-shadow:0 0 22px #ffd36a40}.btn:active{transform:scale(.97)}.btn.primary{background:linear-gradient(180deg,#ffd36a,#ff9d2e);color:#3a1608;border-color:#fff0b8;text-shadow:0 1px 0 rgba(255,255,255,.5);box-shadow:0 6px #a4510f,0 10px 26px #ffaa3c59}.btn.primary:hover{background:linear-gradient(180deg,#ffe08a,#ffae3a)}.btn.primary:active{transform:translateY(3px);box-shadow:0 3px #a4510f}.btn.big{font-size:clamp(20px,4vmin,28px);padding:14px 28px}.btn.small{padding:8px 14px;min-height:40px;font-size:15px}.btn.danger{border-color:var(--danger);color:pink}.btn.gold{border-color:var(--gold);color:var(--gold)}.btn small{opacity:.75;font-weight:500;margin-left:4px}.sparks-pill{display:inline-block;background:#00000059;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:1px 10px;font-size:.8em;margin-left:6px}.sparks-pill:before{content:"\2726  "}.sparks-pill.big{font-size:16px;padding:6px 14px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px 24px;width:min(94vw,460px);max-height:100%;overflow:auto;box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;gap:12px;touch-action:pan-y}.panel.wide{width:min(96vw,860px)}.panel.narrow{width:min(92vw,380px);align-items:center}.panel h2{margin:0;font-size:clamp(22px,4.4vmin,34px)}.panel h3{margin:8px 0 0;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.muted{color:var(--muted);margin:0;font-size:14px}.center{text-align:center}.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;touch-action:pan-x;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:1 0 auto;background:#ffffff0f;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700;min-height:44px;white-space:nowrap}.tab.on{background:linear-gradient(180deg,#ffd36a4d,#ff963c2e);border-color:var(--gold)}.tab.lock{opacity:.45}.world-title{font-size:14px;color:var(--muted);letter-spacing:.06em}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}.grid.small{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.card{position:relative;background:#ffffff0f;border:1px solid var(--line);border-radius:14px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:4px;min-height:92px}.card:hover:not(.locked){background:#ffd36a24;border-color:var(--gold)}.card .num{font-size:12px;color:var(--gold);font-weight:800;letter-spacing:.1em}.card .nm{font-size:15px;font-weight:700;line-height:1.15}.card .meta{font-size:12px;color:var(--muted);margin-top:auto;display:flex;justify-content:space-between}.card .st{color:var(--gold);letter-spacing:1px;font-size:14px}.card.locked{opacity:.4;pointer-events:none}.card.locked:after{content:"\1f512";position:absolute;right:10px;top:8px;font-size:14px}.card.cur{border-color:var(--gold);box-shadow:0 0 18px #ffd36a4d}.card.own{border-color:#78ffaa80}.card.eq{border-color:var(--gold);background:#ffd36a2e}.swatch{height:26px;border-radius:13px;border:1px solid rgba(255,255,255,.4)}.switch{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}.row{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:16px}.row input[type=range]{flex:1;max-width:220px;accent-color:var(--gold);height:30px}.row.check{justify-content:flex-start}input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold)}.panel.complete{align-items:center;text-align:center;width:min(94vw,440px);gap:8px}.c-kicker{color:var(--gold);letter-spacing:.28em;text-transform:uppercase;font-size:13px;font-weight:800}.stars{display:flex;gap:14px;justify-content:center;margin:4px 0}.stars i{width:clamp(38px,8vmin,56px);height:clamp(38px,8vmin,56px);background:#3a3160;clip-path:polygon(50% 0,62% 35%,98% 38%,70% 60%,80% 95%,50% 75%,20% 95%,30% 60%,2% 38%,38% 35%);transition:transform .4s cubic-bezier(.2,1.6,.4,1),background .3s;transform:scale(.8)}.stars i.on{background:linear-gradient(180deg,#fff6c8,#ffb02e);transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(255,200,80,.8))}.c-rows{list-style:none;padding:0;margin:4px 0;width:100%;display:flex;flex-direction:column;gap:6px}.c-rows li{display:flex;align-items:baseline;gap:10px;background:#ffffff0f;border-radius:10px;padding:7px 12px;font-size:16px}.c-rows li span{color:var(--muted);flex:1;text-align:left}.c-rows li em{color:var(--muted);font-style:normal;font-size:13px}.c-rows li.earn b{color:var(--gold)}.c-hints{font-size:13px;color:var(--muted);min-height:16px}.unlock{color:var(--gold);font-weight:700;margin:4px 0}.loader{text-align:center;color:var(--muted)}.flame{width:30px;height:44px;margin:0 auto 14px;background:radial-gradient(ellipse at 50% 70%,#fff6c8,#ffb347 55%,#ff7a2f);border-radius:50%/70% 70% 30% 30%;animation:flick .6s ease-in-out infinite alternate;filter:drop-shadow(0 0 16px #ffae3a)}@keyframes flick{0%{transform:scale(1) rotate(-3deg)}to{transform:scale(.9,1.1) rotate(3deg)}}.phone{width:54px;height:90px;border:4px solid var(--gold);border-radius:10px;margin:0 auto 18px;animation:rot 1.8s ease-in-out infinite}@keyframes rot{0%,20%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media(max-height:460px){.panel{padding:12px 16px;gap:8px}.logo{font-size:clamp(40px,22vh,100px)}.menu{gap:7px}.btn{padding:8px 16px;min-height:42px}.btn.big{padding:10px 22px}.title-wrap{gap:6px}.credit{display:none}.grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}.card{min-height:78px;padding:8px}.toast{top:calc(10% + var(--sat))}.stars i{width:34px;height:34px}.c-rows li{padding:4px 10px;font-size:14px}}@media(prefers-reduced-motion:reduce){.banner,.toast,.flame,.phone{animation:none}}