*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03102b;color:#eaf6ff;font-family:'Trebuchet MS','Segoe UI',sans-serif;touch-action:none}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #83ecff;outline-offset:3px}canvas{position:absolute;width:100%;height:100%;inset:0;display:block}button:disabled{cursor:default;opacity:.4}button,section{user-select:none}#loading{position:absolute;inset:0;z-index:10;background:#06132e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}#loading strong{font-size:38px;font-weight:900;letter-spacing:-1px}#loading span{color:#39d9ff}#loading small{color:#7eaac5;font-size:15px}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#030c23c4,#04133390);display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 22px;backdrop-filter:blur(3px)}#overlay[hidden],#hud[hidden]{display:none}#panel{width:min(840px,100%);max-height:100%;overflow:auto;padding:32px;border:1px solid #3a77b358;border-radius:26px;background:linear-gradient(140deg,#071a39f4,#05132af5);box-shadow:0 28px 80px #0007,0 0 0 5px #04112d77;scrollbar-width:thin;scrollbar-color:#245780 #071a39}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:bold;color:#5ddcff;margin-bottom:14px}.brand{font-weight:900;font-size:clamp(38px,8vw,76px);line-height:.9;letter-spacing:-3px;margin:14px 0 18px;color:#f7fbff;text-shadow:0 5px #020c20}.brand span{color:#39d5ff}.subtitle{font-size:15px;color:#93b3cf;line-height:1.55;max-width:440px;margin:0 0 20px}.home-title{text-align:center}.home-title .subtitle{margin:0 auto 24px}.home-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}.badge{font-size:11px;padding:7px 11px;color:#a8cce8;background:#133153;border:1px solid #245376;border-radius:20px}.primary{display:block;width:min(350px,100%);border:1px solid #8ef3a8;border-radius:15px;padding:16px 30px;background:linear-gradient(#75e96a,#3abc49);box-shadow:0 5px #177531,0 10px 28px #31d44b22;color:#072b14;font-size:22px;font-weight:900;letter-spacing:.6px;margin:18px auto}.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.secondary{border:1px solid #2e5c8f;background:#14345b;border-radius:12px;padding:12px 18px;color:#dbf2ff;font-weight:bold}.secondary:hover{background:#1d4978}.navgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0 18px}.navgrid button{border:1px solid #285277;background:#0d2848;border-radius:14px;padding:17px 10px;color:#cceaff;font-size:14px}.navgrid button span{display:block;font-size:24px;color:#42cffc;margin-bottom:8px}.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#709abc;font-size:11px;margin-top:20px}.textbutton{border:0;background:transparent;color:#a0c3df;padding:8px;font-size:12px}.headrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}.headrow h2{margin:0;font-size:25px}.headrow small{color:#ffce56}.sectionnote{font-size:13px;color:#89adce;line-height:1.5;margin-bottom:18px}.campaign-card{background:linear-gradient(110deg,#0e3a60,#123459);border:1px solid #296699;border-radius:18px;padding:20px;margin-bottom:16px}.campaign-card h3{margin:0 0 9px;font-size:21px}.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.stages button{padding:16px 4px;border:1px solid #32688e;border-radius:12px;background:#061a33;color:#94ccec;font-size:17px;font-weight:bold}.stages button.active{background:#18552d;color:#c4ffb7;border-color:#57bd64}.districts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.districts div{border:1px solid #1d3d60;border-radius:12px;padding:14px;background:#0a1c34;color:#6f91ad;font-size:12px}.districts b{display:block;color:#c0d3e3;margin-bottom:7px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{border:1px solid #2b567f;border-radius:17px;padding:23px 18px;background:linear-gradient(#153c62,#0d233e);color:#e9f7ff;text-align:left;min-height:160px}.card:hover{border-color:#54d7ff;transform:translateY(-3px)}.card .icon{width:44px;height:44px;color:#38d4ff;margin-bottom:14px}.card b{display:block;font-size:18px;margin-bottom:9px}.card p{font-size:12px;line-height:1.5;color:#a0bed7;margin:0}.card small{display:block;color:#68dcff;margin-top:12px}.geargrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.gear-slot{padding:17px;border:1px solid #28496b;border-radius:14px;background:#0e2947}.gear-slot label{display:block;color:#6cd9ff;text-transform:uppercase;font-size:10px;letter-spacing:2px;margin-bottom:8px}.gear-slot select{background:#071a31;color:#edf7ff;border:1px solid #326082;border-radius:9px;padding:10px;width:100%;font:inherit}.result{text-align:center}.result h2{font-size:40px;margin:0 0 14px}.result .score{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}.score div{padding:20px 4px;border:1px solid #23486f;border-radius:12px;background:#102b47}.score b{display:block;font-size:26px;color:#ffdc63}.score small{font-size:11px;color:#9abaD2}.notice{padding:14px;border:1px solid #376b84;border-radius:12px;background:#10334c;font-size:13px;line-height:1.5;color:#b8d9ec}.topbar{position:absolute;top:max(16px,env(safe-area-inset-top));left:18px;right:18px;display:flex;gap:12px;align-items:stretch}.stagebox,.xpbox,.square,#bossbar{background:#061832ec;border:2px solid #2376b6;box-shadow:0 4px 14px #00102a55;border-radius:13px}.stagebox{padding:9px 16px;min-width:170px}.stagebox small{display:block;color:#81cce8;font-size:9px;font-weight:bold;letter-spacing:1px}.stagebox b{display:block;font-size:24px;margin-top:4px}.xpbox{padding:10px 14px;width:220px;margin-left:auto}.xpbox>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:12px}.xpbox span{color:#a8cbe4}.bar{background:#020e23;border-radius:7px;height:6px;overflow:hidden}.bar i{display:block;background:linear-gradient(90deg,#007dd4,#2af0fd);width:0;height:100%;transition:width .15s}.square{width:55px;color:#ecfaff;font-size:25px;font-weight:900;background:linear-gradient(#1b9aea,#1762ac)}#bossbar{position:absolute;left:18px;top:98px;width:190px;padding:10px 13px;border-width:1px}#bossbar span{display:block;color:#efc779;font-weight:bold;font-size:10px;margin-bottom:8px}#bossfill{background:linear-gradient(90deg,#ffab43,#ff4848)}#skillbar{position:absolute;bottom:max(19px,env(safe-area-inset-bottom));right:20px;display:flex;gap:9px;max-width:60%;flex-wrap:wrap;justify-content:flex-end}.skill{position:relative;width:57px;height:64px;border:2px solid #297bb0;border-radius:15px;background:#03162ddd;display:flex;align-items:center;justify-content:center}.skill svg{width:26px;height:26px;color:#b7eaff}.skill .timer{position:absolute;bottom:3px;font-size:9px;color:#94cbe5}.skill .tier{position:absolute;right:4px;top:2px;font-size:9px;color:#fedc65}.skill .cool{position:absolute;inset:0;background:#0619328c;clip-path:inset(var(--cd) 0 0);border-radius:12px}#movehint{position:absolute;bottom:22px;left:20px;color:#c0e8ff8a;font-size:10px;letter-spacing:1px;pointer-events:none}#joystick{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:22px;width:114px;height:114px;border:2px solid #56b1ed66;border-radius:50%;background:#153b6744;display:none;touch-action:none;box-shadow:inset 0 0 18px #05173088}#stick{position:absolute;width:46px;height:46px;left:32px;top:32px;border-radius:50%;border:2px solid #97e2fbb0;background:linear-gradient(#7acfffaa,#218ae8aa);pointer-events:none}#toast{position:absolute;top:27%;left:50%;transform:translate(-50%);text-align:center;max-width:80%;color:#fff4c3;text-shadow:0 2px 7px #001132;font-weight:bold;font-size:18px;pointer-events:none;opacity:0;transition:opacity .2s}#dev{position:absolute;bottom:0;left:0;font-size:10px;color:white;background:#0008}svg{display:block}#pause{flex-shrink:0}
@media(pointer:coarse),(max-width:650px){#joystick{display:block}#movehint{display:none}.topbar{left:12px;right:12px;gap:8px}.stagebox{min-width:110px;padding:8px 10px}.stagebox small{font-size:8px;max-width:130px}.stagebox b{font-size:19px}.xpbox{padding:9px;width:160px}.xpbox>div:first-child{font-size:10px;gap:5px}.square{width:45px}#bossbar{left:12px;top:89px;width:156px}.skill{width:47px;height:53px}#skillbar{gap:5px;right:12px}.skill svg{width:22px;height:22px}}
@media(max-width:560px){#overlay{padding:14px}#panel{padding:23px 18px;border-radius:21px}.navgrid{gap:7px}.navgrid button{font-size:12px;padding:13px 5px}.cards{grid-template-columns:1fr;gap:9px}.card{min-height:92px;padding:15px 17px;display:grid;grid-template-columns:42px 1fr;column-gap:10px}.card .icon{grid-row:1/4;width:34px;height:34px;margin:7px 0}.card b{font-size:16px;margin-bottom:4px}.card p{font-size:11px}.card small{margin-top:4px}.districts{grid-template-columns:repeat(2,1fr)}.campaign-card{padding:16px}.stages{gap:6px}.stages button{padding:13px 2px}.geargrid{gap:8px}.gear-slot{padding:12px}.footer{font-size:10px}.result h2{font-size:31px}.primary{font-size:21px}#toast{font-size:16px}.xpbox{width:132px}.stagebox{min-width:106px}}
@media(max-height:520px){#panel{padding:20px 25px}.brand{font-size:44px}.navgrid{margin:16px 0 8px}.subtitle{font-size:12px;margin-bottom:12px}.home-row{margin:10px 0}.primary{padding:12px;margin:12px auto}.navgrid button{padding:10px}.footer{margin-top:10px}.home-title .subtitle{margin-bottom:12px}#joystick{width:95px;height:95px}#stick{left:23px;top:23px}.topbar{top:10px}}
#joystick.active{display:block;background:#143c6988;border-color:#81dcffb0;box-shadow:inset 0 0 18px #05173088,0 0 18px #39caff22;z-index:2}#toast.danger{top:22%;padding:10px 14px;background:#361e16ed;border:1px solid #ffb66d;border-radius:12px;color:#ffe3aa;letter-spacing:.4px;font-size:15px;max-width:85%}.topbar{pointer-events:none;z-index:3}.topbar button{pointer-events:auto}#bossbar,#skillbar{pointer-events:none}.skill svg{color:var(--skill,#b7eaff)}.skill{border-color:var(--skill,#297bb0)}.skill .timer{color:#d3e9ff;text-shadow:0 1px 2px #000}.skill .cool{background:#02102690}
html,body{touch-action:manipulation}canvas,#hud{touch-action:none}#overlay,#panel{touch-action:pan-y}#panel button{touch-action:manipulation}

/* ---------- menu v0.14: chunky cartoon UI after the Last Block references ---------- */
:root{--navy:#0a2260;--panel:#113a94;--panel2:#0c2c78;--line:#2f78ea;--cyan:#37d6ff;--ink:#06163c;--green1:#8cf05a;--green2:#35b62f;--gold1:#ffe04d;--gold2:#f6a400;--txt:#f4f9ff;--dim:#a9c6f2}
#overlay.menu{padding:0;background:linear-gradient(#071a4ae0,#040f2ef2);backdrop-filter:blur(6px)}
#panel.menu{width:min(540px,100%);height:100%;max-height:none;padding:0;border:0;border-radius:0;background:linear-gradient(#0d2f86,#081d57);box-shadow:0 0 0 3px #04102f,0 0 60px #000a;overflow:hidden;font-family:'Arial Rounded MT Bold','Nunito','Trebuchet MS','Segoe UI',sans-serif}
.m-screen{height:100%;display:flex;flex-direction:column}
.m-body{flex:1;overflow-y:auto;padding:12px 14px 16px;scrollbar-width:thin;scrollbar-color:#2a63c7 transparent}
#panel svg{width:1em;height:1em;display:inline-block;vertical-align:-.14em}
/* top bar */
.m-top{display:flex;align-items:center;gap:10px;margin:max(10px,env(safe-area-inset-top)) 12px 0;padding:7px 10px;background:var(--panel2);border:3px solid var(--line);border-radius:18px;box-shadow:0 4px 0 #04123a}
.m-ava{width:46px;height:46px;flex:none;border-radius:50%;border:3px solid var(--cyan);background:#1b55c4;overflow:hidden;display:grid;place-items:center}
.m-ava img{width:118%;margin-top:6px}
.m-lv{flex:1;min-width:0}.m-lv b{display:block;font-size:14px;letter-spacing:.5px;color:var(--txt)}
.m-lv i{display:block;height:9px;margin-top:5px;border-radius:6px;background:#06143c;overflow:hidden}.m-lv u{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#1aa3ff,#5ff0ff)}
.m-coin{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:14px;background:#06143c;font-size:17px;color:#ffe680}
.m-c{width:24px;height:24px;object-fit:contain;vertical-align:-6px}
.m-ico{width:42px;height:42px;flex:none;border:3px solid #6fb6ff;border-radius:12px;background:linear-gradient(#2c8cf2,#1657c4);color:#fff;font-size:22px;box-shadow:0 3px 0 #0a2f7d}
/* tab bar */
.m-nav{display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;gap:7px;padding:9px 10px max(10px,env(safe-area-inset-bottom));background:#06184a;border-top:3px solid #1c4fb8}
.m-nav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 7px;border:3px solid #2a64d6;border-radius:15px;background:linear-gradient(#17429f,#0e2f7c);color:#cfe3ff;font-size:25px;box-shadow:0 4px 0 #04123a}
.m-nav span{font-size:10.5px;letter-spacing:.4px}
.m-nav button.on{border-color:#8eeaff;background:linear-gradient(#35c8ff,#1583e6);color:#fff;transform:translateY(-3px)}
.m-nav button.play{border-color:#c6ff9d;background:linear-gradient(var(--green1),var(--green2));color:#0b3a12;box-shadow:0 5px 0 #17701e;font-size:28px;margin-top:-10px}
.m-nav button:active,.m-play:active,.m-yellow:active,.m-go:active{transform:translateY(3px);box-shadow:none}
/* home */
.m-hero{position:relative;border:3px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #04123a;background:#0b2a6b}
.m-hero img{display:block;width:100%;aspect-ratio:1.25;object-fit:cover;object-position:50% 55%}
.m-hero h1{position:absolute;left:0;right:0;top:10px;margin:0;text-align:center;font-size:clamp(34px,10vw,50px);letter-spacing:-1px;color:#fff;-webkit-text-stroke:2px #06163c;paint-order:stroke fill;text-shadow:0 4px 0 #06163c}
.m-hero h1 span{color:var(--cyan)}
.m-stage{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:8px;text-align:left;color:var(--txt);border:3px solid var(--line);border-radius:18px;background:linear-gradient(#123f9f,#0c2c78);box-shadow:0 5px 0 #04123a}
.m-face{width:74px;height:74px;flex:none;border-radius:13px;border:3px solid #7cc3ff;background:radial-gradient(#3aa0ff,#184fc0);overflow:hidden;display:grid;place-items:center}
.m-face img{width:105%;height:105%;object-fit:contain}
.m-st{min-width:0}.m-st b{display:block;font-size:17px;letter-spacing:.3px}.m-st em{display:block;font-style:normal;font-size:15px;color:#66d3ff;margin:3px 0 4px}
.m-st i{display:flex;gap:3px;font-size:19px;color:#1d3f8f}.m-st s.done{color:#ffd23a}.m-st s.cur{color:#fff;filter:drop-shadow(0 0 4px #7fe3ff)}.m-st s.done.cur{color:#ffe98a}
.m-play,.m-yellow{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:14px 0 0;padding:15px 18px;border-radius:20px;font-size:32px;letter-spacing:1px;font-weight:900;border:3px solid #d2ffb0;background:linear-gradient(var(--green1),var(--green2));color:#0b3a12;box-shadow:0 7px 0 #17701e,0 12px 22px #0006;text-shadow:0 1px 0 #c9ffa8}
.m-play:hover,.m-yellow:hover:not(:disabled),.m-go:hover{filter:brightness(1.08)}
.m-yellow{border-color:#fff3a6;background:linear-gradient(var(--gold1),var(--gold2));color:#3b2500;box-shadow:0 7px 0 #a86400,0 12px 22px #0006;font-size:24px;text-shadow:0 1px 0 #fff2a8}
.m-yellow span{margin-left:4px}.m-yellow:disabled{filter:grayscale(.75);opacity:.6}
.m-ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;padding:11px;border:2px solid #3a78e6;border-radius:14px;background:#0b2a74;color:#d7e8ff;font-size:15px}
.m-hint{margin:14px 4px 0;text-align:center;font-size:12px;line-height:1.5;color:var(--dim);font-family:'Segoe UI',sans-serif}
.m-title{margin:2px 0 12px;text-align:center;font-size:30px;letter-spacing:1px;color:#fff;-webkit-text-stroke:1.5px #06163c;paint-order:stroke fill;text-shadow:0 3px 0 #06163c}
/* lists: districts, bosses */
.m-list{display:flex;flex-direction:column;gap:9px}
.m-dist,.m-boss{display:flex;align-items:center;gap:12px;padding:7px;border:3px solid #2459c9;border-radius:16px;background:#0c2b78;color:#9fb9e6}
.m-dist img{width:96px;height:60px;flex:none;object-fit:cover;border-radius:10px;border:2px solid #4d93ff;filter:saturate(.55) brightness(.75)}
.m-dist>div,.m-boss>div{flex:1;min-width:0}.m-dist b,.m-boss b{display:block;font-size:18px;color:#dbe9ff}.m-dist em,.m-boss em{font-style:normal;font-size:12px;font-family:'Segoe UI',sans-serif}
.m-dist.on{border-color:#ffd83d;background:linear-gradient(#17479f,#0e3288);box-shadow:0 0 0 2px #ffd83d44,0 5px 0 #04123a}.m-dist.on img{filter:none}.m-dist.on b{color:#fff}
.m-dist i{display:flex;gap:6px;margin-top:6px}
.m-dist i button{width:38px;height:36px;border:2px solid #4d93ff;border-radius:10px;background:#123f9f;color:#d8e8ff;font-size:18px;box-shadow:0 3px 0 #04123a}
.m-dist i button.done{background:#1b6fd6}.m-dist i button.cur{border-color:#fff3a6;background:linear-gradient(var(--gold1),var(--gold2));color:#3b2500}
.m-go{width:58px;height:58px;flex:none;border:3px solid #d2ffb0;border-radius:15px;background:linear-gradient(var(--green1),var(--green2));color:#0b3a12;font-size:30px;box-shadow:0 5px 0 #17701e}
.m-lock{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:12px;background:#0a2466;border:2px solid #2459c9;color:#6f95dd;font-size:24px}
.m-boss .m-face{width:56px;height:56px}.m-boss.done{border-color:#3fbf4a}.m-boss.done .m-lock{color:#8cf05a;border-color:#3fbf4a}.m-boss.cur{border-color:#ffd83d}.m-boss.cur .m-lock{color:#ffd83d;border-color:#ffd83d}.m-boss:not(.done):not(.cur) .m-face img{filter:brightness(0) opacity(.55)}
/* gear */
.m-gear{display:grid;grid-template-columns:92px 1fr 92px;gap:8px;align-items:center;padding:10px;border:3px solid var(--line);border-radius:20px;background:radial-gradient(circle at 50% 45%,#2f8cf5,#113a94 62%);box-shadow:0 5px 0 #04123a}
.m-col{display:flex;flex-direction:column;gap:12px}
.m-doll img{display:block;width:100%;height:250px;object-fit:cover;object-position:50% 30%;border-radius:18px;border:3px solid #7cc3ff;box-shadow:0 5px 0 #04123a}
.m-slot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:#e7f2ff}
.m-slot small{font-size:11px;letter-spacing:.6px}
.m-tile{display:grid;place-items:center;width:82px;height:74px;border-radius:15px;border:3px solid #7cc3ff;background:linear-gradient(#2a6fe0,#17429f);box-shadow:0 4px 0 #04123a;color:#d8ecff;font-size:36px;overflow:hidden}
.m-tile img{max-width:88%;max-height:84%;object-fit:contain;filter:drop-shadow(0 2px 0 #0008)}
.t-weapon{border-color:#ffc94a;background:linear-gradient(#c98318,#8a5208)}.t-armor{border-color:#63b7ff}.t-boots{border-color:#7be05a;background:linear-gradient(#2c9b3c,#17642a)}.t-gadget{border-color:#c48bff;background:linear-gradient(#7a3fd0,#48208f)}.t-train{border-color:#ff8a70;background:linear-gradient(#d8402c,#8f1d18);color:#ffe37a}
.m-slot.on .m-tile{outline:3px solid #fff;outline-offset:2px}
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0;padding:10px 6px;border:3px solid #2459c9;border-radius:16px;background:#0a2466}
.m-stats>div{display:flex;align-items:center;justify-content:center;gap:8px;font-size:30px}.m-stats>div+div{border-left:2px solid #1c47a8}
.m-stats small{display:block;font-size:11px;color:#8fb4ee;letter-spacing:.6px}.m-stats b{display:block;font-size:22px;color:#fff}
.s-d{color:#ff7a3c}.s-h{color:#ff4f6a}.s-s{color:#49c8ff}
.m-inv,.m-card{margin-top:10px;padding:10px;border:3px solid #2459c9;border-radius:16px;background:#0c2b78}
.m-inv header{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 8px}.m-inv header b{font-size:16px;letter-spacing:.6px;color:#fff}.m-inv header small{font-size:11px;color:#8fb4ee;font-family:'Segoe UI',sans-serif}
.m-inv>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-inv>div>button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border:3px solid transparent;border-radius:14px;background:#0a2466;color:#cfe3ff;font-size:12px}
.m-inv .m-tile{width:100%;max-width:92px;height:66px}
.m-inv>div>button.on{border-color:#ffd83d;background:#123f9f;color:#fff}
.m-sw{grid-template-columns:repeat(4,1fr)!important}.m-sw button{flex-direction:row!important;justify-content:center;text-transform:capitalize;font-size:13px!important;padding:11px 4px!important}
.m-sw button::before{content:'';width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:#3b7de8}.sw-solar::before{background:#ff9d3a!important}.sw-storm::before{background:#49b9ff!important}.sw-glacier::before{background:#8ff3f3!important}
/* workshop */
.m-up{display:flex;gap:12px;align-items:center}.m-up>div{flex:1}.m-up b{display:block;font-size:19px;color:#fff}.m-up small{display:block;margin:3px 0 8px;font-size:13px;color:#8fd8ff}
.m-pips{display:flex;gap:4px}.m-pips s{flex:1;height:11px;border-radius:4px;background:#06143c;border:1px solid #1c47a8}.m-pips s.on{background:linear-gradient(#a8ff6a,#3cc23a);border-color:#c9ffa8}
.m-note{margin:12px 2px 0;font-size:13px;line-height:1.5;color:var(--dim);font-family:'Segoe UI',sans-serif}.m-note.c{text-align:center}
#panel .notice{margin-top:12px;border:2px solid #3a78e6;background:#0b2a74;border-radius:14px;color:#d7e8ff;font-family:'Segoe UI',sans-serif}
/* modals: level-up, pause, result */
#panel.modal{width:min(620px,100%);padding:22px 20px 20px;border:4px solid var(--line);border-radius:26px;background:linear-gradient(#123f9f,#0a2466);box-shadow:0 8px 0 #04123a,0 24px 60px #000a;text-align:center;font-family:'Arial Rounded MT Bold','Nunito','Trebuchet MS','Segoe UI',sans-serif}
#panel.r-pause{width:min(400px,100%)}
.u-title{margin:0;font-size:clamp(26px,6.5vw,38px);color:#fff;-webkit-text-stroke:1.5px #06163c;paint-order:stroke fill;text-shadow:0 4px 0 #06163c;letter-spacing:.5px}.u-title span{color:#ffd83d}
.u-sub{margin:8px 0 16px;font-size:13px;color:var(--dim);font-family:'Segoe UI',sans-serif}
.u-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.u-card{--c1:#3aa0ff;--c2:#1657c4;position:relative;display:flex;flex-direction:column;align-items:center;padding:0 0 12px;border:4px solid var(--c1);border-radius:20px;background:#0a2466;color:#fff;overflow:hidden;box-shadow:0 6px 0 #04123a;transition:transform .12s}
.u-card:hover{transform:translateY(-5px)}.u-card:active{transform:translateY(2px)}
.u-art{display:grid;place-items:center;width:100%;aspect-ratio:1.15;background:radial-gradient(circle at 50% 40%,var(--c1),var(--c2));font-size:70px;color:#fff;filter:drop-shadow(0 3px 0 #0006)}
.u-art svg{width:1em!important;height:1em!important}
.u-card b{margin:10px 6px 4px;font-size:18px;letter-spacing:.3px}.u-card p{margin:0 10px;font-size:12px;line-height:1.4;color:#c8dcff;font-family:'Segoe UI',sans-serif;min-height:34px}
.u-card small{margin-top:9px;padding:4px 12px;border-radius:9px;background:#123f9f;border:1px solid #3a78e6;font-size:11px;color:#8fd8ff;letter-spacing:.5px}
.u-card kbd{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:8px;background:#06163cbb;color:#fff;font:700 13px/24px 'Segoe UI',sans-serif}
.c-orange{--c1:#ffa63d;--c2:#d9541a}.c-cyan{--c1:#49dcff;--c2:#1378c9}.c-gold{--c1:#ffd94a;--c2:#d98a0a}.c-silver{--c1:#cfe2f5;--c2:#6f8fb8}.c-pink{--c1:#ff8ed0;--c2:#b93a9a}.c-blue{--c1:#7fb2ff;--c2:#2c52c9}.c-green{--c1:#8cf05a;--c2:#2a9a34}
.p-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r-title{margin:0;font-size:clamp(40px,11vw,62px);letter-spacing:1px;-webkit-text-stroke:2.5px #06163c;paint-order:stroke fill;text-shadow:0 6px 0 #06163c}
.r-title.win{color:#ffd83d}.r-title.lose{color:#ff8a7a}
.r-stage{display:inline-block;margin:8px 0 16px;padding:6px 16px;border-radius:12px;border:2px solid #3a78e6;background:#0a2466;font-size:14px;letter-spacing:.6px;color:#dbe9ff}
.r-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.r-tiles>div{padding:14px 4px 12px;border:3px solid #2f78ea;border-radius:16px;background:radial-gradient(circle at 50% 30%,#1d5fd0,#0c2b78);font-size:40px;color:#ffd83d}
.r-tiles>div.k{color:#ff5a6e}.r-tiles>div.l{color:#b78cff}
.r-tiles .m-c{width:44px;height:44px;vertical-align:0}.r-tiles small{display:block;margin-top:4px;font-size:12px;color:#8fd8ff;letter-spacing:.8px}.r-tiles b{display:block;font-size:28px;color:#ffe680}
.r-btns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}.r-btns .m-play,.r-btns .m-yellow{font-size:24px;padding:14px 8px}
@media(max-width:560px){.u-cards{grid-template-columns:1fr;gap:9px}.u-card{flex-direction:row;flex-wrap:wrap;padding:0;text-align:left;align-items:stretch}.u-art{width:84px;aspect-ratio:auto;font-size:44px;grid-row:1/4}.u-card b{flex:1 1 60%;margin:10px 10px 0}.u-card p{flex:1 1 60%;margin:2px 10px 0;min-height:0}.u-card small{margin:6px 10px 10px}.u-card{display:grid;grid-template-columns:84px 1fr}.m-gear{grid-template-columns:78px 1fr 78px}.m-tile{width:72px;height:66px}.m-nav span{font-size:9px}}
@media(max-height:620px){.m-hero img{aspect-ratio:2.1}.m-play{padding:10px;font-size:26px}.m-doll img{max-height:170px}}

/* ---------- v0.15: gear cards, workshop, development, shop ---------- */
.m-top{gap:6px;padding:6px 8px}.m-ava{width:40px;height:40px}.m-lv{min-width:54px}.m-lv b{font-size:13px}
.m-cur{display:flex;align-items:center;gap:4px;padding:5px 8px 5px 5px;border-radius:12px;background:#06143c;font-size:14px;color:#ffe680}.m-cur .m-c{width:20px;height:20px;vertical-align:0}
.m-cur.g{color:#c9a2ff}.m-cur.t{color:#ffb35c}.m-cur svg{font-size:17px}
.m-ico{width:38px;height:38px;font-size:19px}
.m-nav button{position:relative}.m-nav span{font-size:9.5px}.m-nav em{position:absolute;right:5px;top:5px;width:11px;height:11px;border-radius:50%;background:#ff4b5c;border:2px solid #fff}
.m-chev{margin-left:auto;font-size:34px;color:#7cc3ff;padding:0 6px}
.m-hint a{color:#7fdcff}
.m-msg{margin:0 0 10px;padding:9px 12px;border-radius:12px;border:2px solid #ffd83d;background:#3a2f08;color:#ffe9a0;font-size:13px;text-align:center;font-family:'Segoe UI',sans-serif}
.m-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0 0 12px;padding:5px;border-radius:16px;background:#06184a;border:3px solid #1c4fb8}
.m-tabs button{padding:10px 4px;border:0;border-radius:11px;background:transparent;color:#8fb4ee;font-size:15px;letter-spacing:.4px}
.m-tabs button.on{background:linear-gradient(#35c8ff,#1583e6);color:#06163c;box-shadow:0 3px 0 #0a4aa0}
/* item card: frame colour = rarity */
.it{--rc:#9aa8bd;position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;padding:0;border:3px solid var(--rc);border-radius:14px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rc) 55%,#0c2b78),#0a2060 78%);box-shadow:0 4px 0 #04123a;overflow:hidden;color:#fff}
.it img{max-width:78%;max-height:70%;object-fit:contain;filter:drop-shadow(0 2px 0 #0009)}
.it i{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-style:normal;font-size:11px;letter-spacing:-1px;color:#ffd83d;text-shadow:0 1px 0 #000}
.it em{position:absolute;left:0;right:0;top:0;padding:1px 0;background:#2fb944;color:#06220c;font:700 9px 'Segoe UI',sans-serif}
.it s{position:absolute;right:3px;bottom:14px;font-size:13px;color:#ffe680;text-decoration:none}.it u{position:absolute;right:0;top:0;padding:1px 5px;border-radius:0 0 0 8px;background:#ff4b5c;color:#fff;font:700 9px 'Segoe UI',sans-serif;text-decoration:none}
.it.r1{--rc:#5fd45a}.it.r2{--rc:#4aa8ff}.it.r3{--rc:#b56bff}.it.r4{--rc:#ffc23a}
.it.on{outline:3px solid #fff;outline-offset:1px}.it.dim{opacity:.32}.it.ok{box-shadow:0 0 0 3px #8cf05a,0 4px 0 #04123a}
.it.empty{border-style:dashed;border-color:#3a78e6;background:#0a2466;color:#3a78e6;font-size:28px}
.rc0{color:#d5deeb}.rc1{color:#7ee678}.rc2{color:#6cbcff}.rc3{color:#c995ff}.rc4{color:#ffd15c}
.m-gear{grid-template-columns:74px 1fr 74px;align-items:stretch}.m-col{justify-content:space-between;gap:6px}
.m-slot{gap:2px}.m-slot small{font-size:10px;color:#cfe3ff}.m-slot.on .it{outline:3px solid #fff;outline-offset:1px}
.m-doll{display:flex;flex-direction:column}.m-doll img{flex:1;height:auto;min-height:230px}.m-doll small{margin-top:6px;text-align:center;font:11px 'Segoe UI',sans-serif;color:#cfe3ff}
.m-stats.four{grid-template-columns:repeat(4,1fr)}.m-stats.four>div{flex-direction:column;gap:2px;font-size:22px;text-align:center}.m-stats.four b{font-size:17px}.m-stats.four small{font-size:10px}.s-g{color:#49c8ff}.s-s{color:#8fb4ff}
.it-filt{display:flex;gap:5px;overflow-x:auto;margin:0 0 9px;padding-bottom:2px;scrollbar-width:none}.it-filt button{flex:none;padding:7px 11px;border:2px solid #2459c9;border-radius:11px;background:#0a2466;color:#a9c6f2;font-size:12px}.it-filt button.on{border-color:#8eeaff;background:#1583e6;color:#fff}
.m-inv>.it-grid,.it-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.it-pages{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:9px;color:#cfe3ff;font-size:14px}.m-pg{width:40px;height:34px;border:2px solid #3a78e6;border-radius:10px;background:#123f9f;color:#fff;font-size:20px}
.it-dh{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center}.it-dh b{display:block;font-size:17px}.it-dh small{display:block;margin-top:3px;font-size:13px;color:#ffd83d}.it-dh small span{color:#1f458f}.it-dh em{display:block;margin-top:4px;font:12px 'Segoe UI',sans-serif;font-style:normal;color:#a9c6f2}.it-dh em b{display:inline;font-size:13px;color:#8cf05a}
.it-props{list-style:none;margin:10px 0 0;padding:0;font:13px 'Segoe UI',sans-serif}.it-props li{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:8px;color:#dbe9ff}.it-props li:nth-child(odd){background:#0a2466}.it-props li.rnd span::before{content:'✦ ';color:#ffd83d}.it-props b{color:#fff;white-space:nowrap}
.it-acts{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px;margin-top:10px}.it-acts button{margin:0;padding:10px 4px;font-size:13px}.m-play.sm{font-size:16px;padding:10px 4px;box-shadow:0 4px 0 #17701e;border-radius:14px;letter-spacing:0}
.m-card .m-yellow{font-size:19px;padding:12px}
.mg-row{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:10px;align-items:center}.mg-cell{display:grid;place-items:center;aspect-ratio:1;border:3px dashed #3a78e6;border-radius:16px;background:#0a2466;color:#6f95dd;font:12px 'Segoe UI',sans-serif;text-align:center;padding:4px}.mg-cell .it{border-style:solid}.mg-cell:has(.it){border:0;padding:0;background:none}
.d-pts{display:grid;grid-template-columns:1fr auto;align-items:center;margin:0 0 12px;padding:10px 14px;border:3px solid #ffd83d;border-radius:16px;background:#0a2466;color:#dbe9ff;font-size:15px}.d-pts b{font-size:30px;color:#ffd83d}.d-pts small{grid-column:1/3;font:12px 'Segoe UI',sans-serif;color:#8fb4ee}
.d-row{display:flex;align-items:center;gap:11px;padding:8px;border:3px solid #2459c9;border-radius:16px;background:#0c2b78}.d-row>div{flex:1;min-width:0}.d-row b{display:block;font-size:16px;color:#fff}.d-row b i{font-style:normal;color:#ffd83d;margin-left:4px}
.d-row em{display:block;margin-top:3px;font:12px/1.35 'Segoe UI',sans-serif;font-style:normal;color:#a9c6f2}.d-row small{display:block;margin-top:3px;font:11px 'Segoe UI',sans-serif;color:#ffb38a}
.d-row .m-tile{width:54px;height:54px;font-size:28px;flex:none}.d-row .m-go{width:52px;height:46px;font-size:20px}.d-row .m-go:disabled{filter:grayscale(1);opacity:.45}
.d-hp,.d-vital{color:#ff6b7f}.d-dmg,.d-power{color:#ff9a4a}.d-spd{color:#6fd3ff}.d-magnet{color:#ff7ad0}.d-xp{color:#ffd83d}.d-blast{color:#ffb35c}.d-shock{color:#7fe7ff}.d-last{color:#9db8ff}
.g-days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}.g-days>div{padding:7px 2px;border:2px solid #2459c9;border-radius:12px;background:#0a2466;text-align:center;font-size:15px;color:#ffe680}
.g-days small{display:block;font:11px 'Segoe UI',sans-serif;color:#8fb4ee;margin-bottom:3px}.g-days i{display:block;font-style:normal;font-size:12px;color:#c9a2ff}.g-days em{display:block;font:10px 'Segoe UI',sans-serif;font-style:normal;color:#a9c6f2}
.g-days>div.cur{border-color:#ffd83d;background:#17479f}.g-days>div.done{opacity:.45}.g-days>div:last-child{grid-column:span 2}
.s-offer .m-yellow span{margin-left:8px}.got{border-color:#8cf05a}.got>b{display:block;margin-bottom:8px;color:#8cf05a;font-size:16px}
.r-title{font-size:clamp(28px,7.6vw,44px)}.r-line{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 12px;font:12px 'Segoe UI',sans-serif;color:#a9c6f2}.r-line b{display:block;font:700 18px 'Arial Rounded MT Bold','Trebuchet MS',sans-serif;color:#fff;margin-top:2px}
.r-tiles{margin-bottom:12px}.r-loot{grid-template-columns:repeat(4,72px);justify-content:center;margin-bottom:6px}.r-btns .m-play,.r-btns .m-yellow{font-size:20px}
@media(max-width:420px){.m-cur b{font-size:12px}.m-lv b{font-size:12px}}

/* v005 district controls */
.district-map-button{position:absolute;right:22px;bottom:22px;padding:11px 16px;border:1px solid #47789b;border-radius:10px;background:#0d2136df;color:#bcdeed;font-size:11px;letter-spacing:1px;pointer-events:auto}
.district-overview{display:block;width:100%;max-height:50vh;background:#101f2c;border:1px solid #34536e;border-radius:12px}
.district-travel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.district-travel button{font-size:11px;padding:10px}
@media(max-width:600px){.district-travel{grid-template-columns:repeat(2,1fr)}.district-map-button{right:14px;bottom:16px}.district-overview{max-height:43vh}}

.district-map-button{top:104px;bottom:auto;right:22px}#locationLoading{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;padding:12px 18px;border:1px solid #487eab;border-radius:10px;background:#071b32ed;color:#d4f0ff;font:13px system-ui;max-width:85vw;text-align:center;pointer-events:none}
@media(max-width:650px){.district-map-button{top:96px;bottom:auto;right:12px}}

#locationLoading{position:fixed;inset:auto 20px 20px;z-index:100;padding:12px;background:#112440;color:#fff;border-radius:8px;}

/* Shared v007 additions keep Nightfall menu typography/chrome. */
.m-doll canvas{width:100%;height:auto;max-height:36vh;object-fit:contain;border-radius:12px}.m-doll>img{display:none}.extra-links{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.more-grid{display:grid;gap:12px}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}.catalog-grid .m-card{display:flex;flex-direction:column;gap:8px;font-size:13px}.catalog-grid img{width:80px;height:80px;object-fit:contain;align-self:center}.catalog-grid p,.catalog-grid small{font-size:12px;line-height:1.5}.catalog-grid .locked{opacity:.5}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0}.setting-row input[type=range]{width:45%;max-width:180px}#saveText{width:100%;height:120px;margin:10px 0;color:#d8ebf9;background:#0b1c30;border:1px solid #385978}.boss-demo{width:100%;height:60vh;border:0;border-radius:12px}.chest-window{position:relative;width:min(450px,90vw);height:130px;overflow:hidden;background:#091629;border:2px solid #ca9e47;border-radius:12px;margin:28px auto}.chest-ribbon{display:flex;width:max-content;gap:10px;animation:chestRoll 1.7s cubic-bezier(.08,.6,.1,1) forwards}.chest-ribbon>div{width:100px;height:126px;display:grid;place-items:center;background:#142b45}.chest-ribbon img{width:85px;height:85px;object-fit:contain}.chest-window>i{position:absolute;top:0;left:50%;width:3px;height:100%;background:#ffdf86;box-shadow:0 0 12px #ffaa33}.chest-result{display:flex;align-items:center;flex-direction:column;gap:12px;margin:24px}.chest-result img{width:140px;height:140px;object-fit:contain}.rank-dots{position:absolute;bottom:-9px;width:100%;text-align:center;font-size:7px;letter-spacing:2px;color:#ffd17b}.skill.empty{opacity:.35;border-style:dashed;background:#061625}.rarity-1{border-color:#70d597!important}.rarity-2{border-color:#63baff!important}.rarity-3{border-color:#b990ff!important}.rarity-4{border-color:#ffd078!important}.drag-ghost{position:fixed!important;width:70px!important;height:70px!important;z-index:1000;pointer-events:none;opacity:.85;transform:rotate(-6deg)}.mg-cell{touch-action:none}#tutorialTip{position:absolute;left:50%;bottom:125px;transform:translateX(-50%);width:min(430px,84vw);padding:14px 16px;border:1px solid #d9b865;border-radius:12px;background:#082039e8;color:#f5e9b3;text-align:center;pointer-events:auto;font-size:14px;line-height:1.4}#tutorialTip button{display:block;margin:8px auto 0;color:#95bfd5;background:none;border:none;font-size:11px}.reduce-flashes #toast{filter:saturate(.5)}@keyframes chestRoll{from{transform:translateX(0)}to{transform:translateX(var(--chest-end,-1040px))}}@media(max-width:480px){.catalog-grid{grid-template-columns:1fr 1fr}.setting-row{font-size:12px}.extra-links .m-ghost{padding:10px;font-size:12px}#tutorialTip{bottom:118px;font-size:12px}.m-doll canvas{max-height:30vh}}

#heroPreview{position:relative;inset:auto;display:block;width:100%;height:auto;max-height:36vh}.merge-draggable{touch-action:none}#buffPanel{position:absolute;left:12px;top:100px;max-width:220px;background:#071d32e0;border:1px solid #41697a;border-radius:8px;padding:8px;font-size:11px;pointer-events:auto}#buffPanel p{margin:4px}#combatTime{position:absolute;top:13px;left:50%;transform:translateX(-50%);font-size:12px;color:#c9deef}.catalog-filters{display:flex;gap:8px;flex-wrap:wrap}.catalog-filters select{padding:8px;background:#122d46;color:#e2f0fa;border:1px solid #48708a;border-radius:7px}.u-card .change{color:#f6ce72;font-size:11px}.u-cards{animation:cardAppear .6s ease-out}.tutorial-start{max-width:420px;text-align:center}.tutorial-start p{line-height:1.6}@keyframes cardAppear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

#tutorialShade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 135px 110px at var(--tx) var(--ty),transparent 20%,#02081766 100%);pointer-events:none}

/* Keep combat information in separate rows on small and rotated screens. */
.wave-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wave-row #wave{min-width:0;font-size:20px;white-space:nowrap}
#combatTime{position:static;transform:none;font-size:12px;color:#b9d7ee;font-variant-numeric:tabular-nums;white-space:nowrap}
#buffPanel{top:154px;max-width:min(280px,calc(100vw - 24px));max-height:calc(100vh - 300px);overflow-y:auto;z-index:4}
#buffPanel summary{min-height:28px;display:list-item;line-height:28px;cursor:pointer}
#buffPanel[open]{padding:10px 12px;box-shadow:0 6px 24px #00102488;background:#071d32f5}
.district-map-button{min-height:44px}
#pause{min-height:48px}
#checkpointRetry[hidden]{display:none}
@media(pointer:coarse),(max-width:650px){
 .topbar{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 48px;align-items:stretch}
 .stagebox{min-width:0;padding:8px}
 .stagebox small{max-width:none;font-size:8px;line-height:12px;min-height:24px}
 .wave-row{gap:3px}
 .wave-row #wave{font-size:14px}
 #combatTime{font-size:10px}
 .xpbox{width:auto;min-width:0;margin-left:0;padding:9px 7px}
 .xpbox>div:first-child{flex-wrap:wrap;gap:4px;font-size:10px;line-height:12px}
 #pause{width:48px}
 #bossbar{top:100px;max-width:calc(100vw - 145px)}
 .district-map-button{top:100px;right:12px;padding:8px 12px;min-height:44px}
 #buffPanel{top:158px;min-width:130px;max-height:max(44px,calc(100vh - 312px));padding:6px 8px}
 #skillbar{display:grid;grid-template-columns:repeat(3,47px);gap:14px 5px;max-width:none;bottom:max(24px,env(safe-area-inset-bottom));right:12px}
}
@media(max-height:520px){
 #buffPanel{top:146px}
 #bossbar,.district-map-button{top:90px}
}

/* v012: combat feedback and a concrete next action. */
.feel-build{margin:0 0 12px;color:#ffe2a1;font-size:13px;text-align:center;line-height:1.4}
.feel-offer-hint{display:block;font-size:11px;color:#ffcf80;font-style:normal;margin-top:8px;line-height:1.35}
.feel-result{margin:16px auto 10px;padding:14px;border:1px solid #476985;border-radius:12px;background:#122d43;max-width:570px;text-align:left}
.feel-result>b{display:block;color:#e2ffef;font-size:16px}.feel-result p{font-size:13px;margin:8px 0;line-height:1.5}
.feel-result>button{width:100%;margin:4px 0 10px;min-height:42px}.feel-result small{display:block;color:#afc8d9;line-height:1.4;font-size:11px}
.xpbox.feel-xp-pop{filter:drop-shadow(0 0 5px #69eab7)}
#feelStatus{position:absolute;left:20px;bottom:48px;max-width:45%;padding:6px 9px;background:#061a32dc;border:1px solid #346386;border-radius:7px;color:#cbeedc;font-size:10px;line-height:1.45;pointer-events:none}
#wave.feel-phase{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}.stagebox:has(.feel-phase){min-width:0;max-width:235px}
@media(max-width:650px){#wave.feel-phase{font-size:12px;max-width:100%;letter-spacing:0}.stagebox:has(.feel-phase){flex:1;overflow:hidden}.stagebox:has(.feel-phase) small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}}
@media(max-width:650px){#feelStatus{left:12px;right:12px;bottom:146px;max-width:none;text-align:center;font-size:10px;padding:5px 7px}}
@media(max-width:600px){.feel-build{font-size:11px;margin-bottom:8px}.feel-offer-hint{font-size:10px}.feel-result{padding:10px;margin:10px 0}.feel-result>b{font-size:14px}#movehint{max-width:90%;white-space:normal;line-height:1.4}}
@media(max-width:560px){.u-card small{grid-column:1/-1;margin:6px 10px 4px;font-size:10px;text-align:left}.u-card .feel-offer-hint{grid-column:1/-1;margin:2px 10px 10px}}

/* v013 recipes and useful-case rewards */
.power-recipes{border:1px solid #487b9d;background:#0c253ae8;border-radius:12px;padding:0 14px;margin:8px 0 18px;color:#d8eaff;font-size:12px}.power-recipes summary{min-height:42px;padding:13px 0;cursor:pointer;color:#90deff}.power-recipe{display:grid;gap:5px;padding:10px 0;border-top:1px solid #2b526d;line-height:1.4}.power-recipe span{color:#b7cfe5}.power-recipe small{color:#eccf87}.power-recipe.ready b{color:#82e7b2}.feel-build{overflow-wrap:anywhere}
.case-shop{display:grid;gap:10px}.case-shop h3{margin:0}.case-pity{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:#d9c1ff;font-size:12px}.case-pity i{width:16px;height:7px;border-radius:3px;background:#344860}.case-pity i.on{background:#bd83ff}.case-target{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.case-target select{max-width:65%;background:#132e49;color:#e6f6ff;padding:10px;border:1px solid #5082a3;border-radius:7px}.case-actions{display:flex;gap:8px;flex-wrap:wrap}.case-actions button{flex:1;min-width:110px}.case-shop .m-note{margin:0;line-height:1.5}.case-opening{text-align:center;padding:16px 0}.case-opening .u-sub{margin:10px 0}.case-opening .chest-window{width:min(450px,100%);margin:20px auto}.case-open-skip{background:#132d46;border:1px solid #608bad;border-radius:9px;padding:12px 22px;color:#e2edfa}.case-opening .chest-ribbon{animation-duration:2.4s}.case-reward{--case-color:#7ecbff;max-width:500px;margin:0 auto;padding:22px 18px;border:1px solid var(--case-color);border-radius:18px;background:linear-gradient(145deg,#132d48,#08182d);text-align:center;animation:caseReveal .45s ease-out}.case-reward.rc3{--case-color:#c79bff}.case-reward.rc4{--case-color:#ffda72}.case-halo{position:relative;display:grid;place-items:center;height:160px;isolation:isolate}.case-halo:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,var(--case-color),transparent 67%);opacity:.22}.case-halo img{position:relative;width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 8px 10px #0009)}.case-reward h3{margin:6px 0 8px;color:var(--case-color);font-size:19px}.case-reward .case-rarity{color:var(--case-color);font-size:13px;letter-spacing:1px}.case-bonus{display:inline-block;padding:7px 12px;border:1px solid #886b31;border-radius:8px;margin:10px 0;color:#ffdc85;background:#332918}.case-compare{display:grid;gap:8px;margin:14px 0;font-size:12px;text-align:left}.case-compare>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.case-compare b{color:#90e0c4;white-space:nowrap}.case-reward .m-note{font-size:12px;line-height:1.5}.case-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px auto;max-width:500px}.case-buttons .m-play{grid-column:1/-1}.case-reward p{margin:10px 0}.case-chances{font-size:13px;line-height:1.6}.case-guarantee{color:#deb8ff}.case-opening,.case-reward{overflow-wrap:anywhere}.reduce-flashes .case-halo:before{opacity:.09}.reduce-flashes .case-reward{animation:none}@media(prefers-reduced-motion:reduce){.case-reward{animation:none}.case-opening .chest-ribbon{animation-duration:.3s}}@keyframes caseReveal{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@media(max-width:480px){.case-reward{padding:16px 12px}.case-halo{height:130px}.case-halo img{width:115px;height:115px}.case-compare{font-size:11px}.case-target{font-size:12px}.case-buttons{gap:8px}.case-reward h3{font-size:17px}}
.case-title{text-align:center;margin:24px 12px;font-size:clamp(21px,4vw,30px)}.case-opening{max-width:600px;margin:0 auto;padding:18px}.case-reward .case-compare .case-bad{color:#ffb1b6}.case-reward .case-compare .case-same{color:#c8dbeb}.case-save-warning{color:#ffd891;text-align:center;font-size:12px;padding:12px}.case-save-warning button{display:block;margin:8px auto}

/* v014: crisp cel shaded kit icons; rank, rarity and cooldown remain separate signals. */
.lb-icon{display:inline-block;width:1em;height:1em;object-fit:contain;vertical-align:-.15em;flex:none;pointer-events:none}
.m-nav .lb-icon{width:30px;height:30px}
.m-top .lb-icon{width:21px;height:21px}
.m-stage .lb-icon{width:16px;height:16px}
.m-tile .lb-icon{width:42px;height:42px;max-width:88%;max-height:84%}
.m-play>.lb-icon,.m-yellow>.lb-icon,.m-ghost>.lb-icon{width:1.3em;height:1.3em;margin-right:5px}
.u-art>.lb-icon{width:88px;height:88px;max-width:82%;max-height:82%}
.skill>.lb-icon{width:36px;height:36px;margin-top:-7px}
.skill .cool{z-index:1;pointer-events:none}.skill .tier,.skill .timer,.skill .rank-dots{z-index:2}
.power-recipe{grid-template-columns:44px minmax(0,1fr);column-gap:10px;align-items:start}
.power-recipe>.lb-icon{grid-row:1/4;width:44px;height:44px}
.power-recipe>b,.power-recipe>span,.power-recipe>small{grid-column:2;overflow-wrap:anywhere}
.recipe-part{display:inline-flex;align-items:center;gap:4px;margin-bottom:3px}
.recipe-part>.lb-icon{width:20px;height:20px}
.catalog-grid .lb-icon{width:76px;height:76px;align-self:center}
@media(max-width:650px){.skill>.lb-icon{width:31px;height:31px}}
@media(max-width:560px){.u-art>.lb-icon{width:60px;height:60px}.m-nav .lb-icon{width:28px;height:28px}.power-recipe{grid-template-columns:38px minmax(0,1fr);column-gap:8px}.power-recipe>.lb-icon{width:38px;height:38px}}

/* v015 earned goals and first-boost feedback */
.goal-home{display:block;width:100%;border:2px solid #345273;border-radius:16px;padding:12px;background:linear-gradient(145deg,#18374f,#10283f);text-align:left;color:#e7f3ff;cursor:pointer;margin-top:14px;box-shadow:0 4px 0 #091c30}.goal-home>span{display:block;color:#a5d7ed;margin:8px 2px 0;font-size:12px}.mastery-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mastery-card{display:flex;gap:12px;padding:14px;border:2px solid #345273;background:linear-gradient(145deg,#18374f,#10283f);border-radius:14px;align-items:center;min-width:0}.mastery-card>img{width:62px;height:62px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 0 #081525)}.mastery-card>div{min-width:0;flex:1}.mastery-card small{color:#8fd9eb;font-size:10px;font-weight:800;display:block;margin-bottom:4px;letter-spacing:.6px}.mastery-card b{display:block;font-size:17px;color:#edf9ff}.mastery-card b span{color:#ffe186}.mastery-card p{margin:5px 0 0;font-size:11px;color:#bfcee0;line-height:1.4}.mastery-card.compact{padding:0;border:0;background:none}.goal-meter{height:9px;background:#08192b;border:1px solid #486888;border-radius:7px;overflow:hidden;margin-top:7px}.goal-meter i{display:block;height:100%;background:linear-gradient(90deg,#339fdd,#80edd2);border-radius:5px}.goal-heading{font-size:14px;letter-spacing:1px;margin:22px 0 12px;color:#ffdf88}.goal-rewards{margin-top:12px;border-radius:12px;background:#10273d;padding:12px;font-size:12px;color:#bbd1e8}.goal-rewards p{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between}.goal-rewards b{color:#ffe186}.album-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.album-card{border:2px solid #324861;padding:12px;border-radius:14px;background:#10253c;display:flex;gap:10px;align-items:flex-start}.album-card>.lb-icon{width:54px;height:54px;flex:none;opacity:.6}.album-card.found{border-color:#56b89e;background:linear-gradient(145deg,#1b3e49,#112b3b)}.album-card.found>.lb-icon{opacity:1}.album-card small{display:block;font-size:9px;color:#a4b3c9;margin:1px 0 5px}.album-card.found small{color:#88efbd}.album-card b{font-size:14px;display:block;line-height:1.25}.album-card p{font-size:11px;color:#f8d68c;line-height:1.45;margin:5px 0}.album-card em{font-size:11px;color:#bccede;font-style:normal;line-height:1.45;display:block}.goal-result{border:2px solid #416280;border-radius:14px;background:#122c42;padding:14px;text-align:left;margin:12px 0}.goal-result h3{font-size:13px;color:#ffdc86;margin:0 0 8px}.goal-result>p{font-size:12px;color:#c1d5e7}.goal-earned{color:#8aefbc!important;line-height:1.45}.more-grid>.m-yellow .lb-icon{width:32px;height:32px}.skill-boosted{box-shadow:0 0 12px #ffe788,0 0 0 2px #ffe788!important;transform:translateY(-3px);transition:transform .15s,box-shadow .2s}
@media(max-width:620px){.mastery-list,.album-grid{grid-template-columns:1fr}.mastery-card{padding:12px}.album-card>.lb-icon{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.skill-boosted{transform:none;transition:none}}

/* v016 juice: kill combo */
#combo{position:absolute;right:20px;top:160px;display:grid;justify-items:end;gap:1px;pointer-events:none;color:#ffe9a8;text-shadow:0 2px 0 #06142e,0 0 12px #ff9a2e88;transform-origin:100% 50%}
#combo[hidden]{display:none}
#combo b{font-size:30px;line-height:1;font-weight:900;letter-spacing:.5px}
#combo small{font-size:10px;letter-spacing:2px;color:#9fd3ff}
#combo i{display:block;width:74px;height:4px;border-radius:2px;background:#06183299;overflow:hidden}
#combo u{display:block;height:100%;background:linear-gradient(90deg,#ffb02e,#fff0a8);border-radius:2px}
#combo[data-tier="2"] b{color:#ffcf5a;font-size:34px}
#combo[data-tier="3"] b{color:#ff9a3d;font-size:38px}
#combo[data-tier="4"] b{color:#ff5a4a;font-size:42px;text-shadow:0 2px 0 #06142e,0 0 18px #ff3d2ecc}
#combo.pop{animation:comboPop .16s ease-out}
@keyframes comboPop{0%{transform:scale(1.28)}100%{transform:scale(1)}}
@media (max-width:700px){#combo{right:12px;top:150px}#combo b{font-size:24px}}

/* v017 test range */
#lab{position:absolute;left:12px;top:206px;width:292px;max-height:calc(100% - 300px);display:flex;flex-direction:column;background:#04142cee;border:2px solid #2f7fd0;border-radius:12px;color:#d7e8ff;font-size:11px;pointer-events:auto;z-index:6;overflow:hidden}
#lab[hidden]{display:none}
#lab header{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:#0b2a74;cursor:pointer;letter-spacing:1px}
#lab header span{font-size:10px;color:#8fb8e8}
#lab.folded .lab-body{display:none}
#lab .lab-body{padding:6px 9px 9px;overflow-y:auto}
#lab h4{margin:8px 0 4px;font-size:11px;color:#ffd76a;letter-spacing:.5px}
#lab h4 small{color:#7fa3cf;font-weight:400;margin-left:4px}
#lab .lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#lab .lab-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center}
#lab .lab-row em{font-style:normal;color:#8fb8e8;margin-right:2px}
#lab button{position:relative;padding:6px 6px;border:1px solid #2c5f9c;border-radius:7px;background:#0a2350;color:#d7e8ff;font-size:10.5px;line-height:1.15;cursor:pointer}
#lab button:hover{background:#12357a}
#lab button.on{background:#1b5a2e;border-color:#52d27c;color:#eaffef}
#lab .sk button{padding-left:22px;text-align:left}
#lab .sk button i{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:7px;background:#06142e;font-style:normal;font-size:9.5px;line-height:14px;text-align:center;color:#ffd76a}
#labInfo{margin:8px 0 0;color:#9fd3ff;font-size:10px;line-height:1.4}
.m-lab{margin:0 0 10px;border-color:#52d27c;background:#0d3a2a;color:#d9ffe6}
@media (max-width:700px){#lab{left:6px;right:6px;width:auto;top:150px;max-height:42%}}

/* v018: combo frenzy edge glow + milestone banner */
#hud::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;box-shadow:inset 0 0 90px 18px #ff9a2e66}
#hud[data-frenzy="1"]::after{opacity:.55}
#hud[data-frenzy="2"]::after{opacity:.8;box-shadow:inset 0 0 110px 26px #ff6a2e88;animation:frenzy 1s ease-in-out infinite}
#hud[data-frenzy="3"]::after{opacity:1;box-shadow:inset 0 0 130px 34px #ff3d2eaa;animation:frenzy .55s ease-in-out infinite}
@keyframes frenzy{50%{filter:brightness(1.5)}}
#comboBanner{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;font-size:44px;font-weight:900;letter-spacing:3px;color:#ffe9a8;text-shadow:0 3px 0 #06142e,0 0 26px #ff7a2ecc;white-space:nowrap}
#comboBanner.show{animation:banner 1.5s ease-out}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1.05)}}
@media (max-width:700px){#comboBanner{font-size:26px}}

/* v018 battle HUD: XP bar across the top, big timer in the centre, coins and kills on the right */
#hud.hud18 .topbar{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto!important;grid-template-areas:"xp xp xp" "pause stage kills";gap:8px 10px;top:max(8px,env(safe-area-inset-top));left:10px;right:10px;align-items:start}
#hud.hud18 .xpbox{grid-area:xp;position:relative;width:auto!important;min-width:0;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0}
#hud.hud18 .xpbox>div:first-child{position:absolute;left:10px;right:10px;top:0;height:20px;display:flex;justify-content:space-between;align-items:center;z-index:1;font-size:11px;color:#fff;text-shadow:0 1px 0 #06142e,0 0 4px #000}
#hud.hud18 .xpbox #lv{font-size:12px;letter-spacing:.5px}
#hud.hud18 .xpbox .bar{height:20px;border-radius:10px;border:2px solid #0b2f63;background:#04122ad9;box-shadow:0 3px 0 #02091b88}
#hud.hud18 #xpbar{height:100%;background:linear-gradient(#c8ff6a,#55d42c 55%,#37a81f);border-radius:8px;transition:width .18s ease-out;box-shadow:inset 0 2px 0 #ffffff55}
#hud.hud18 #pause{grid-area:pause;width:48px;height:48px;min-height:48px;border-radius:14px;box-shadow:0 4px 0 #0b3a70}
#hud.hud18 .stagebox{grid-area:stage;justify-self:center;text-align:center;min-width:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
#hud.hud18 #stageLabel{display:block;font-size:10px;letter-spacing:1.5px;color:#bcd9ff;text-shadow:0 1px 0 #06142e,0 0 6px #000;text-transform:uppercase}
#hud.hud18 .wave-row{display:flex;flex-direction:column-reverse;align-items:center;gap:0}
#hud.hud18 #combatTime{font-size:34px;line-height:1.05;font-weight:900;color:#fff;letter-spacing:1px;text-shadow:0 3px 0 #06142e,0 0 12px #0009}
#hud.hud18 #wave{font-size:12px!important;color:#ffd76a;text-shadow:0 1px 0 #06142e,0 0 6px #000}
#killbox{grid-area:kills;justify-self:end;display:grid;gap:4px;font-weight:900;font-size:15px;color:#fff;text-shadow:0 2px 0 #06142e,0 0 6px #000;pointer-events:none}
#killbox span{display:flex;align-items:center;justify-content:flex-end;gap:6px;transform-origin:100% 50%}
#killbox i{width:16px;height:16px;border-radius:50%;display:block;flex:none}
#killbox .kb-c i{background:radial-gradient(circle at 35% 30%,#fff3a8,#ffc21f 55%,#c9820a);box-shadow:0 0 0 2px #06142e}
#killbox .kb-k i{border-radius:5px 5px 7px 7px;background:#e9f2ff;box-shadow:0 0 0 2px #06142e,inset -4px -5px 0 -2px #06142e,inset 4px -5px 0 -2px #06142e}
#killbox .pop{animation:comboPop .14s ease-out}
#hud.hud18 #bossbar{top:112px}
#hud.hud18 #combo{top:176px}
@media (max-width:700px){#hud.hud18 #combatTime{font-size:26px}#hud.hud18 .topbar{left:8px;right:8px}#killbox{font-size:13px}}

/* v018 main menu: the chapter stands in the middle as an island, one big yellow start button, a raised tab for the open screen */
.m-body:has(>.m-isle){display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:8px 14px 14px;background:radial-gradient(120% 70% at 50% 38%,#2b6de0 0%,#12348f 45%,#081a4e 100%)}
.m-body:has(>.m-isle)>*{order:5;margin:0}
.m-body:has(>.m-isle)>.m-hint{display:none}
.m-isle{order:2!important;flex:1 1 auto;min-height:230px;position:relative;display:flex;align-items:center;justify-content:center;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;cursor:pointer}
.m-isle h1{position:absolute!important;top:-2px!important;font-size:clamp(26px,7.5vw,40px)!important;opacity:.95;pointer-events:none;z-index:2}
.isle{position:relative;width:min(74vw,46vh,360px);aspect-ratio:1;margin-top:26px;animation:isleFloat 4.5s ease-in-out infinite}
.isle-map{display:block;width:100%!important;height:100%;aspect-ratio:1!important;object-fit:cover;border-radius:50%;border:6px solid #9fe0ff;box-shadow:0 0 0 5px #0b2f7c,0 16px 0 -2px #06163c,0 26px 34px #0009,inset 0 0 40px #0008}
.isle-glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,#6fd0ff66,#6fd0ff00 72%);animation:isleGlow 3s ease-in-out infinite}
.isle-chip{position:absolute;left:50%;top:-12px;transform:translateX(-50%);padding:5px 16px;border-radius:14px;background:linear-gradient(#ffe45a,#ffb000);color:#4a2a00;font-size:13px;font-weight:900;letter-spacing:1.5px;border:3px solid #06163c;box-shadow:0 4px 0 #06163c;white-space:nowrap}
.isle-boss,.isle-me{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid #06163c;box-shadow:0 5px 0 #06163c;display:grid;place-items:center}
.isle-boss{right:-7%;top:6%;background:radial-gradient(#ff7a6a,#b3202e);overflow:visible}
.isle-boss img{width:92%!important;height:92%;aspect-ratio:1!important;object-fit:contain;border-radius:50%}
.isle-boss em{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);padding:2px 9px;border-radius:9px;background:#e3263a;color:#fff;font-style:normal;font-size:10px;font-weight:900;letter-spacing:1px;border:2px solid #06163c}
.isle-me{left:-7%;bottom:4%;width:34%;background:#2a7de0;border-color:#06163c;outline:3px solid #9fe0ff;outline-offset:-7px}
.isle-me img{width:100%!important;height:100%;aspect-ratio:1!important;object-fit:cover;object-position:50% 12%}
@keyframes isleFloat{50%{transform:translateY(-8px)}}
@keyframes isleGlow{50%{opacity:.55;transform:scale(1.05)}}
.m-body:has(>.m-isle)>.m-stage{order:1;justify-content:center;gap:10px;padding:6px 10px;border:0;background:none;box-shadow:none;text-align:center}
.m-body:has(>.m-isle)>.m-stage .m-face,.m-body:has(>.m-isle)>.m-stage .m-chev{display:none}
.m-body:has(>.m-isle)>.m-stage .m-st b{font-size:clamp(19px,5.4vw,26px);letter-spacing:.5px;color:#fff;-webkit-text-stroke:1.5px #06163c;paint-order:stroke fill;text-shadow:0 3px 0 #06163c}
.m-body:has(>.m-isle)>.m-stage .m-st em{font-size:14px;color:#ffd76a;margin:2px 0 3px}
.m-body:has(>.m-isle)>.m-stage .m-st i{justify-content:center}
.m-body:has(>.m-isle)>.goal-home{order:3;padding:8px 10px;border-radius:14px;margin:0;background:#06184acc;border-color:#2a64d6}
.m-body:has(>.m-isle)>.goal-home>span{display:none}
.m-body:has(>.m-isle)>.m-play{order:4;padding:14px 10px;font-size:clamp(26px,7vw,34px);letter-spacing:2px;color:#4a2a00;border:4px solid #06163c;border-radius:20px;background:linear-gradient(#fff07a,#ffc61a 52%,#ff9d00);box-shadow:0 7px 0 #a85a00,0 12px 18px #0007,inset 0 3px 0 #ffffffaa;animation:playPulse 1.6s ease-in-out infinite}
.m-body:has(>.m-isle)>.m-play:active{transform:translateY(5px);box-shadow:0 2px 0 #a85a00}
@keyframes playPulse{50%{transform:scale(1.025);filter:brightness(1.08)}}
.m-nav{gap:4px;padding:6px 8px max(8px,env(safe-area-inset-bottom));background:linear-gradient(#0a2466,#06163c);border-top:3px solid #2a64d6;align-items:end}
.m-nav button,.m-nav button.play{border:0;border-radius:14px 14px 10px 10px;background:none;box-shadow:none;color:#9dbcf0;margin-top:0;padding:8px 2px 6px;font-size:25px;transition:transform .15s}
.m-nav button.on,.m-nav button.play.on{background:linear-gradient(#fff07a,#ffc61a);color:#4a2a00;border:3px solid #06163c;box-shadow:0 4px 0 #a85a00;transform:translateY(-12px);padding-bottom:9px}
.m-nav button.on span{font-weight:900}
@media (prefers-reduced-motion:reduce){.isle,.isle-glow,.m-body:has(>.m-isle)>.m-play{animation:none}}
.m-isle h1{display:none}
.m-isle{min-height:190px!important;padding-top:16px}
.isle{width:auto;height:calc(100% - 22px);max-height:360px;max-width:74vw;margin-top:0}
.m-body:has(>.m-isle)>.m-ghost{padding:8px;font-size:13px;margin:0}
.m-isle{flex:1 1 0!important;min-height:150px!important}
.m-body:has(>.m-isle)>:not(.m-isle){flex:none}
@media (max-height:640px){.m-isle{min-height:96px!important;padding-top:12px}.m-body:has(>.m-isle){gap:6px;padding-top:4px}.m-body:has(>.m-isle)>.m-play{padding:9px;font-size:24px}.m-body:has(>.m-isle)>.m-stage{padding:2px 8px}.m-body:has(>.m-isle)>.m-stage .m-st b{font-size:17px}.m-body:has(>.m-isle)>.goal-home{padding:6px 8px}}
.m-isle{flex:none!important;min-height:0!important;height:clamp(130px,calc(100dvh - 480px),380px)}
@media (max-height:640px){.m-isle{min-height:0!important;height:clamp(120px,calc(100dvh - 388px),300px)}.m-body:has(>.m-isle)>.m-stage .m-st i,.m-body:has(>.m-isle)>.goal-home p{display:none}}
@keyframes playPulse{50%{filter:brightness(1.12) drop-shadow(0 0 10px #ffd84a)}}

/* v019 hitbox editor */
#hbedit{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#06122e;color:#d7e8ff;font-size:12px}
#hbedit[hidden]{display:none}
#hbedit canvas{flex:1;width:100%;min-height:0;cursor:crosshair;touch-action:none}
.hb-bar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:8px 10px;background:#0b2a74;border-bottom:2px solid #2f7fd0}
.hb-bar b{color:#ffd76a;letter-spacing:1px}
.hb-bar span{display:flex;gap:5px;align-items:center}
.hb-bar em{font-style:normal;color:#8fb8e8}
.hb-bar button{padding:6px 9px;border:1px solid #2c5f9c;border-radius:7px;background:#0a2350;color:#d7e8ff;font-size:12px;cursor:pointer}
.hb-bar button:hover{background:#12357a}
.hb-bar button.ok{background:#1b5a2e;border-color:#52d27c}
.hb-bar button.bad{background:#5a1b24;border-color:#d2525f}
.hb-info{padding:6px 10px;background:#04142c;border-top:1px solid #2c5f9c;color:#9fd3ff;min-height:16px}
#hbedit canvas{position:static!important;inset:auto!important;display:block;height:auto!important;z-index:auto}

/* ================= v019 skin: one look for every menu screen =================
   bright blue stage, chunky cards with a dark outline and a "3D" bottom edge, yellow for the main action, ribbon titles */
.m-body{background:radial-gradient(130% 60% at 50% 0%,#2a66dc 0%,#12348f 50%,#081a4e 100%)}
.m-title{position:relative;width:max-content;max-width:100%;margin:4px auto 14px;padding:7px 28px;font-size:23px;letter-spacing:1.5px;color:#4a2a00;-webkit-text-stroke:0;text-shadow:0 1px 0 #fff9;background:linear-gradient(#fff07a,#ffc61a);border:3px solid #06163c;border-radius:14px;box-shadow:0 5px 0 #a85a00,0 9px 0 #06163c44}
.m-card,.d-row,.m-dist,.m-inv,.m-gear,.d-pts,.goal-home{border:3px solid #06163c!important;border-radius:18px;background:linear-gradient(#2c69e0,#143c9e)!important;box-shadow:0 5px 0 #06163c,inset 0 2px 0 #8fbcff66!important}
.m-list{display:grid;gap:12px}
.m-dist{padding:10px!important;gap:10px}
.m-dist.on{background:linear-gradient(#3f84f5,#1a4cbc)!important}
.m-dist:not(.on){filter:saturate(.45) brightness(.8)}
.m-dist img{width:104px!important;height:78px!important;border:3px solid #06163c!important;border-radius:12px!important;box-shadow:0 3px 0 #06163c}
.m-dist b{font-size:17px;color:#fff;text-shadow:0 2px 0 #06163c}
.m-dist em{color:#cfe3ff}
.m-dist i button{width:36px!important;height:36px!important;border:3px solid #06163c!important;border-radius:50%!important;background:linear-gradient(#5d9bff,#2a64d6)!important;color:#fff!important;font-size:16px!important;box-shadow:0 3px 0 #06163c!important}
.m-dist i button.done{background:linear-gradient(#a6f36a,#3fb62f)!important;color:#0b3a12!important}
.m-dist i button.cur{background:linear-gradient(#fff07a,#ffb800)!important;color:#4a2a00!important;transform:scale(1.14)}
.m-dist i button:disabled{background:#0b2466!important;color:#5f7fc0!important}
.m-go{border:3px solid #06163c!important;border-radius:16px!important;background:linear-gradient(#fff07a,#ffc61a 55%,#ff9d00)!important;color:#4a2a00!important;box-shadow:0 5px 0 #a85a00!important}
.m-go:disabled{background:linear-gradient(#5b78b8,#3b5390)!important;color:#b9c9ea!important;box-shadow:0 5px 0 #1c2f63!important}
.m-go:active:not(:disabled),.m-play:active{transform:translateY(4px);box-shadow:0 1px 0 #a85a00!important}
.m-play{color:#4a2a00!important;border:4px solid #06163c!important;border-radius:20px!important;background:linear-gradient(#fff07a,#ffc61a 52%,#ff9d00)!important;box-shadow:0 7px 0 #a85a00,inset 0 3px 0 #ffffffaa!important}
.m-ghost{border:3px solid #06163c!important;border-radius:14px!important;background:linear-gradient(#3f84f5,#1f55c8)!important;color:#fff!important;box-shadow:0 4px 0 #06163c!important;text-shadow:0 1px 0 #06163c}
.m-lab{background:linear-gradient(#58d27c,#1f8a45)!important}
.m-tabs{border:3px solid #06163c!important;border-radius:16px!important;background:#0a2466!important;box-shadow:0 4px 0 #06163c}
.m-tabs button{color:#b6d0ff!important;font-size:14px!important}
.m-tabs button.on{background:linear-gradient(#fff07a,#ffc61a)!important;color:#4a2a00!important;box-shadow:0 3px 0 #a85a00!important}
.m-tile{border:3px solid #06163c!important;background:linear-gradient(#6fb0ff,#2a64d6)!important;box-shadow:0 4px 0 #06163c!important}
.d-row b{font-size:16px;color:#fff;text-shadow:0 2px 0 #06163c}
.d-row b i{display:inline-block;min-width:22px;margin-left:6px;padding:1px 6px;border-radius:9px;background:#06163c;color:#ffd76a;font-style:normal;font-size:13px;text-align:center}
.d-row em{color:#d6e7ff}
.d-pts b{font-size:30px;color:#ffe45a;text-shadow:0 3px 0 #06163c}
.it{border:3px solid #06163c!important;box-shadow:0 4px 0 #06163c,inset 0 0 0 3px var(--rc)!important;border-radius:15px!important}
.it.empty{background:#0b2466!important;box-shadow:0 4px 0 #06163c,inset 0 0 0 2px #2a64d6!important;color:#5f8fe0}
.m-doll{position:relative;border-radius:16px;background:radial-gradient(ellipse 60% 16% at 50% 84%,#06163c88,#06163c00 70%),radial-gradient(circle at 50% 40%,#69b4ff,#2a64d6 55%,#143c9e)!important;border:3px solid #06163c;box-shadow:inset 0 0 30px #06163c66;overflow:hidden}
.m-stats>div{border:3px solid #06163c;border-radius:14px;background:linear-gradient(#2c69e0,#143c9e);box-shadow:0 4px 0 #06163c}
.m-stats b{color:#ffe45a;text-shadow:0 2px 0 #06163c}
.it-filt button{border:2px solid #06163c!important;border-radius:11px!important;background:#143c9e!important;color:#cfe3ff!important;box-shadow:0 3px 0 #06163c}
.it-filt button.on{background:linear-gradient(#fff07a,#ffc61a)!important;color:#4a2a00!important}
.g-days>div{border:3px solid #06163c!important;border-radius:13px!important;background:linear-gradient(#3f84f5,#1f55c8)!important;box-shadow:0 3px 0 #06163c}
.g-days>div.cur{background:linear-gradient(#fff07a,#ffc61a)!important;color:#4a2a00!important}
.g-days>div.cur *{color:#4a2a00!important}
.m-top{border:3px solid #06163c!important;background:linear-gradient(#2c69e0,#143c9e)!important;box-shadow:0 4px 0 #06163c!important}
.m-cur{background:#06163ccc!important;border-radius:12px}

/* skill choice: banner + cards with a coloured name strip (rarity) and a big icon */
#panel .u-title{width:max-content;max-width:100%;margin:0 auto 6px;padding:8px 26px;font-size:22px;color:#4a2a00;-webkit-text-stroke:0;text-shadow:0 1px 0 #fff9;background:linear-gradient(#fff07a,#ffc61a);border:3px solid #06163c;border-radius:14px;box-shadow:0 5px 0 #a85a00;animation:bannerIn .35s cubic-bezier(.2,1.6,.4,1)}
#panel .u-title span{color:#b3261e}
@keyframes bannerIn{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
#panel .u-cards{display:grid;gap:12px}
#panel .u-card{--rc:#c9d6e8;--rt:#1d2b45;position:relative;display:grid;grid-template-columns:84px 1fr;grid-template-areas:"name name" "art desc" "art change" "rar rar";gap:0 10px;padding:0 0 8px;overflow:hidden;text-align:left;border:3px solid #06163c;border-radius:18px;background:linear-gradient(#2c69e0,#143c9e);box-shadow:0 6px 0 #06163c,inset 0 0 0 2px #8fbcff44;color:#fff;animation:cardIn .3s ease-out backwards}
#panel .u-card:nth-child(2){animation-delay:.07s}
#panel .u-card:nth-child(3){animation-delay:.14s}
@keyframes cardIn{0%{transform:translateY(26px);opacity:0}}
#panel .u-card:active{transform:translateY(4px);box-shadow:0 2px 0 #06163c}
#panel .u-card.rarity-1{--rc:#7fe86a;--rt:#0d3a12}
#panel .u-card.rarity-2{--rc:#63b7ff;--rt:#062a5c}
#panel .u-card.rarity-3{--rc:#c58bff;--rt:#2e0a5c}
#panel .u-card.rarity-4{--rc:#ffd34d;--rt:#4a2a00}
#panel .u-card>b{grid-area:name;margin:0 0 8px;padding:7px 44px 7px 12px;font-size:17px;letter-spacing:.3px;color:var(--rt);background:linear-gradient(color-mix(in srgb,var(--rc) 70%,#fff),var(--rc));border-bottom:3px solid #06163c;text-shadow:none}
#panel .u-card .u-art{grid-area:art;align-self:center;justify-self:center;width:72px;height:72px;margin-left:10px;display:grid;place-items:center;border:3px solid #06163c;border-radius:16px;background:radial-gradient(circle at 50% 35%,#7fc0ff,#1f55c8);box-shadow:0 4px 0 #06163c,inset 0 0 0 2px var(--rc)}
#panel .u-card .u-art img,#panel .u-card .u-art svg{width:58px;height:58px}
#panel .u-card>p{grid-area:desc;margin:0;padding-right:10px;font-size:13px;line-height:1.3;color:#e3eeff}
#panel .u-card>p.change{grid-area:change;margin-top:4px;color:#ffe45a;font-weight:700}
#panel .u-card>small{grid-area:rar;margin:8px 10px 0;padding:4px 9px;border-radius:9px;background:#06163cbb;color:var(--rc);font-size:11px;letter-spacing:.8px}
#panel .u-card>kbd{position:absolute;right:8px;top:6px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#06163c;color:#fff;font-size:12px;border:0}

.m-list{grid-template-columns:minmax(0,1fr)}
.m-dist{min-width:0}
.m-dist>div{min-width:0;flex:1 1 0}
.m-dist img{width:86px!important;height:66px!important}
.m-dist i{gap:4px!important;flex-wrap:wrap}
.m-dist i button{width:32px!important;height:32px!important;font-size:14px!important}
.m-dist .m-go{width:52px;height:52px}
#panel .u-card>kbd{left:auto!important;right:8px!important;top:6px!important;bottom:auto!important}

/* ================= v023: UI concept r08 — calm blue stage, one yellow action, Golos Text + Russo One =================
   Replaces the heavy outlined look of v019. Tokens from CLAUDE_UI_BRIEF_RU.md. */
@font-face{font-family:'Golos Text';src:url(fonts/GolosText-Variable.ttf) format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Russo One';src:url(fonts/RussoOne-Regular.ttf) format('truetype');font-display:swap}
:root{--c-bg0:#123985;--c-bg1:#216bca;--c-panel:#2462bb;--c-panel2:#2465c7;--c-line:#5b9bf0;--c-txt:#fff;--c-dim:#e0eeff;--c-act:#ffe45c;--c-act2:#f2c931;--c-prog:#72edff;--c-up:#50f0a0;--c-uptxt:#b3ffd0}
#panel,#panel button,#panel input,#panel select{font-family:'Golos Text','Segoe UI',system-ui,sans-serif}
.m-screen{background:linear-gradient(180deg,var(--c-bg0),var(--c-bg1))}
.m-body{background:none!important;color:var(--c-txt)}
.m-top{margin:max(10px,env(safe-area-inset-top)) 12px 0!important;padding:6px 10px!important;border:0!important;border-radius:12px!important;background:#1d55ad!important;box-shadow:none!important}
.m-cur{background:none!important}
.m-cur b,.m-lv b{font-weight:700}
.m-ava{border:0!important;box-shadow:none!important}
/* titles: plain, left, Russo One */
.m-title{width:auto!important;margin:6px 2px 4px!important;padding:0!important;text-align:left!important;font-family:'Russo One','Golos Text',sans-serif;font-size:24px!important;letter-spacing:.2px!important;color:#fff!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-shadow:none!important;-webkit-text-stroke:0!important}
/* panels: flat, thin light line, no hard outline, no 3D edge */
.m-card,.d-row,.m-dist,.m-inv,.m-gear,.d-pts,.goal-home,.m-stats>div,.g-days>div{border:1px solid #ffffff33!important;border-radius:14px!important;background:var(--c-panel)!important;box-shadow:none!important}
.m-dist.on{background:var(--c-panel2)!important;border-color:#ffffff66!important}
.m-dist img,.m-tile,.it{border:1px solid #ffffff44!important;box-shadow:none!important}
.it{box-shadow:inset 0 0 0 2px var(--rc)!important;background:#1d55ad!important}
.it.empty{box-shadow:none!important;background:#1b4fa3!important}
.m-tile{background:#1d55ad!important}
.m-doll{border:0!important;box-shadow:none!important;background:radial-gradient(circle at 50% 45%,#4f93ea,#2462bb 62%,#2462bb00 63%)!important}
.d-row b,.m-dist b{text-shadow:none!important;font-weight:700}
.d-row b i{background:#123985!important;color:var(--c-act)!important}
.d-pts b,.m-stats b{color:var(--c-act)!important;text-shadow:none!important}
.m-dist i button{border:0!important;box-shadow:none!important;background:#1d55ad!important;color:#fff!important}
.m-dist i button.done{background:#2f9d6a!important;color:#fff!important}
.m-dist i button.cur{background:var(--c-act)!important;color:#12285c!important;transform:none!important}
.m-dist i button:disabled{background:#1a4a99!important;color:#8fb4ee!important}
/* the one main action: yellow, dark text, soft bottom edge */
.m-play,.m-go{border:0!important;border-radius:12px!important;background:linear-gradient(var(--c-act),var(--c-act2))!important;color:#12285c!important;box-shadow:0 4px 0 #b98f12!important;font-family:'Golos Text',sans-serif;font-weight:800!important;letter-spacing:.6px!important;text-shadow:none!important;animation:none!important}
.m-play{font-size:16px!important;padding:17px 10px!important;text-transform:uppercase}
.m-play svg{display:none}
.m-go:disabled{background:#3f6fbd!important;color:#b9d0f5!important;box-shadow:none!important}
.m-play:active,.m-go:active:not(:disabled){transform:translateY(3px)!important;box-shadow:0 1px 0 #b98f12!important}
/* secondary actions: quiet text links */
.m-ghost{border:0!important;background:none!important;box-shadow:none!important;color:var(--c-dim)!important;text-shadow:none!important;font-size:14px!important;padding:10px!important;font-weight:500}
.m-ghost::after{content:" ›"}
.m-lab{color:var(--c-uptxt)!important}
.m-tabs{border:0!important;box-shadow:none!important;background:#1b4fa3!important;border-radius:12px!important;padding:4px!important}
.m-tabs button{color:var(--c-dim)!important;border-radius:9px!important;font-weight:600}
.m-tabs button.on{background:var(--c-act)!important;color:#12285c!important;box-shadow:none!important}
.it-filt button{border:0!important;box-shadow:none!important;background:#1b4fa3!important;color:var(--c-dim)!important}
.it-filt button.on{background:var(--c-act)!important;color:#12285c!important}
.g-days>div.cur{background:var(--c-act)!important;border-color:var(--c-act)!important}
/* bottom navigation: dark bar, flat icons, raised yellow centre */
.m-nav{background:#0f2a66!important;border-top:0!important;gap:0!important;padding:0 6px max(6px,env(safe-area-inset-bottom))!important;align-items:end}
.m-nav button,.m-nav button.play{border:0!important;background:none!important;box-shadow:none!important;color:#fff!important;border-radius:0!important;transform:none!important;padding:9px 2px 7px!important;margin:0!important}
.m-nav span{font-family:'Golos Text',sans-serif;font-weight:800;font-size:9px!important;letter-spacing:.5px}
.m-nav button.on{background:none!important;box-shadow:inset 0 -3px 0 var(--c-prog)!important}
.m-nav button.play,.m-nav button.play.on{background:linear-gradient(var(--c-act),var(--c-act2))!important;color:#12285c!important;border-radius:10px!important;box-shadow:0 3px 0 #b98f12!important;transform:translateY(-12px)!important;padding:11px 2px 9px!important}
/* home: name of the place, the map as a picture, short rows, one button */
.m-body:has(>.m-isle){background:none!important;gap:10px;padding:10px 12px 12px}
.h-head{order:0!important;margin:2px 2px 0!important}
.h-head b{display:block;font-family:'Russo One','Golos Text',sans-serif;font-size:24px;line-height:1.15;font-weight:400}
.h-head small{display:block;margin-top:5px;font-size:13px;color:var(--c-dim)}
.m-isle{order:1!important;height:clamp(120px,calc(100dvh - 470px),420px)!important;padding:0!important;display:block!important;border-radius:6px;overflow:hidden!important}
.isle{position:relative;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;aspect-ratio:auto!important;animation:none!important}
.isle-map{width:100%!important;height:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:cover}
.isle-glow,.isle-boss,.isle-me{display:none!important}
.isle-chip{left:10px!important;right:auto;top:auto!important;bottom:10px;transform:none!important;padding:5px 26px!important;border:0!important;border-radius:9px!important;background:#123985e6!important;color:#fff!important;box-shadow:none!important;font-weight:800;font-size:11px!important;letter-spacing:1px!important}
.m-body:has(>.m-isle)>.m-stage{display:none!important}
.m-body:has(>.m-isle)>.goal-home{order:3!important;padding:10px 12px!important;text-align:left}
.m-body:has(>.m-isle)>.m-play{order:5!important;margin-top:auto!important;padding:17px 10px!important;font-size:16px!important;letter-spacing:.6px!important;border:0!important;border-radius:12px!important;color:#12285c!important}
.m-body:has(>.m-isle)>.m-ghost{order:6!important}
.m-body:has(>.m-isle)>.notice{order:4}
@media (max-height:640px){.m-isle{height:clamp(96px,calc(100dvh - 400px),300px)!important}.h-head b{font-size:20px}.m-body:has(>.m-isle)>.m-play{padding:12px!important}}
/* skill choice keeps its layout (outside this redesign); only the fonts follow */
#panel .u-title{font-family:'Russo One','Golos Text',sans-serif}

/* ================= v024: juicy palette + motion. Layout stays as in the concept; colours are brighter and alive ================= */
#fxui{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
:root{--j-a:#3b1fa8;--j-b:#6a2fe0;--j-c:#1f8bff;--j-panel:#ffffff1c;--j-line:#ffffff40;--j-act:#ffe45c;--j-act2:#ff9d1a;--j-pink:#ff5fa8;--j-cyan:#5ef2ff;--j-up:#5dffa6}
.m-screen{position:relative;background:linear-gradient(165deg,#2a1590 0%,#5a2be0 38%,#2a6dff 72%,#19c2ff 100%)!important;overflow:hidden}
.m-screen::before,.m-screen::after{content:"";position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none;z-index:0;opacity:.55;animation:blob 14s ease-in-out infinite alternate}
.m-screen::before{width:70vmin;height:70vmin;left:-22vmin;top:8%;background:#ff4fb0}
.m-screen::after{width:80vmin;height:80vmin;right:-30vmin;bottom:6%;background:#22e6ff;animation-duration:18s;animation-direction:alternate-reverse}
@keyframes blob{0%{transform:translate(0,0) scale(1)}100%{transform:translate(9vmin,-7vmin) scale(1.2)}}
.m-screen>*{position:relative;z-index:1}
.m-top{background:#1b0f66b3!important;backdrop-filter:blur(8px);border:1px solid var(--j-line)!important}
.m-card,.d-row,.m-dist,.m-inv,.m-gear,.d-pts,.goal-home,.m-stats>div,.g-days>div,.xp-card,.xp-row,.xp-table,.xp-mat,.xp-cmp{border:1px solid var(--j-line)!important;border-radius:16px!important;background:linear-gradient(160deg,#ffffff2b,#ffffff10)!important;box-shadow:0 8px 22px #1a0b5c55,inset 0 1px 0 #ffffff55!important;backdrop-filter:blur(6px)}
.m-dist.on{background:linear-gradient(160deg,#ffffff40,#ffffff18)!important;border-color:#ffffff88!important}
.it{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rc) 60%,#ffffff22),#1b0f66aa 78%)!important;box-shadow:inset 0 0 0 2px var(--rc),0 4px 12px #1a0b5c66!important;border:0!important;transition:transform .12s}
.it:hover{transform:translateY(-2px) scale(1.04)}
.it.on{outline:3px solid var(--j-act)!important;outline-offset:2px;animation:pick 1.2s ease-in-out infinite}
.it.ok{outline:2px dashed var(--j-up)!important;outline-offset:1px}
.it.r3,.it.r4{animation:rareGlow 2.4s ease-in-out infinite}
@keyframes rareGlow{50%{box-shadow:inset 0 0 0 2px var(--rc),0 0 18px var(--rc)}}
@keyframes pick{50%{outline-color:#fff}}
.it.broken{filter:grayscale(.9) brightness(.75)}
.it .brk{position:absolute;left:0;right:0;bottom:0;padding:2px 0;background:#d92f4bdd;color:#fff;font-size:9px;font-weight:800;text-decoration:none;text-align:center;letter-spacing:.5px}
.it.empty{background:#ffffff14!important;box-shadow:inset 0 0 0 2px #ffffff33!important}
.m-tile{background:linear-gradient(160deg,#ffffff33,#ffffff12)!important}
/* the main action: hot yellow-orange with a running shine */
.m-play,.m-go,.m-yellow{position:relative;overflow:hidden;border:0!important;border-radius:14px!important;background:linear-gradient(180deg,#fff27a,var(--j-act) 40%,var(--j-act2))!important;color:#3a1c00!important;box-shadow:0 5px 0 #b8600a,0 10px 24px #ff9d1a66!important;text-shadow:0 1px 0 #fff6!important;font-weight:900!important}
.m-play::after,.m-go:not(:disabled)::after,.m-yellow:not(:disabled)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,#fff0,#fffc,#fff0);transform:skewX(-20deg);animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.m-play:not(:disabled){animation:breathe 1.8s ease-in-out infinite!important}
@keyframes breathe{50%{transform:scale(1.02);box-shadow:0 5px 0 #b8600a,0 12px 34px #ffb02ecc}}
.m-play:disabled,.m-go:disabled,.m-yellow:disabled{background:#ffffff26!important;color:#ffffff99!important;box-shadow:none!important;animation:none!important}
.m-play:disabled::after{display:none}
.m-ghost{color:#eaf2ff!important}
.m-ghost:disabled{opacity:.45}
.m-tabs{background:#1b0f6699!important;border:1px solid var(--j-line)!important}
.m-tabs button.on,.it-filt button.on,.m-dist i button.cur{background:linear-gradient(180deg,#fff27a,var(--j-act2))!important;color:#3a1c00!important;box-shadow:0 0 14px #ffb02e99!important}
.it-filt button,.m-dist i button{background:#ffffff1f!important}
.m-dist i button.done{background:linear-gradient(180deg,#7dffb8,#22c777)!important;color:#063a1c!important}
.m-nav{background:linear-gradient(180deg,#2a1590,#160a55)!important;border-top:1px solid var(--j-line)!important}
.m-nav button.on{box-shadow:inset 0 -3px 0 var(--j-cyan),0 -10px 22px -12px var(--j-cyan)!important}
.m-nav button.play,.m-nav button.play.on{background:linear-gradient(180deg,#fff27a,var(--j-act2))!important;box-shadow:0 4px 0 #b8600a,0 0 22px #ffb02eaa!important;animation:navBob 2.2s ease-in-out infinite}
@keyframes navBob{50%{transform:translateY(-15px)!important;filter:brightness(1.1)}}
.m-nav em{animation:dot 1s ease-in-out infinite}
@keyframes dot{50%{transform:scale(1.35)}}
.m-title,.h-head b{text-shadow:0 2px 0 #1b0f66,0 0 22px #ffffff55!important}
.h-head{margin:4px 2px 0}.h-head b{display:block;font-family:'Russo One','Golos Text',sans-serif;font-size:24px;font-weight:400;color:#fff}.h-head small{display:block;margin-top:4px;font-size:13px;color:#e7e0ff}
.isle-map{animation:mapPan 22s ease-in-out infinite alternate}
@keyframes mapPan{0%{transform:scale(1.08) translate(-2%,-1%)}100%{transform:scale(1.2) translate(3%,2%)}}
.m-isle{box-shadow:0 10px 30px #1a0b5c88,inset 0 0 0 2px #ffffff55;border-radius:16px!important}
.m-doll{background:radial-gradient(circle at 50% 45%,#ffe45c55,#ff5fa833 45%,#ffffff00 66%)!important;animation:dollGlow 3s ease-in-out infinite}
@keyframes dollGlow{50%{filter:brightness(1.15)}}
.d-pts b,.m-stats b,.up{color:var(--j-up)!important}.d-pts b{color:var(--j-act)!important;text-shadow:0 0 14px #ffe45c99!important}
.down{color:#ff8fa3!important}.warn{color:#ffb38a}
/* screens entering */
.m-body>*{animation:rise .32s cubic-bezier(.2,.9,.3,1.2) backwards}
.m-body>*:nth-child(2){animation-delay:.04s}.m-body>*:nth-child(3){animation-delay:.08s}.m-body>*:nth-child(4){animation-delay:.12s}.m-body>*:nth-child(5){animation-delay:.16s}.m-body>*:nth-child(n+6){animation-delay:.2s}
@keyframes rise{0%{opacity:0;transform:translateY(16px) scale(.98)}}
.fx-press{animation:press .16s ease-out!important}
@keyframes press{40%{transform:scale(.95)}}
.fx-pop{animation:pop .45s cubic-bezier(.2,1.8,.4,1)!important}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}}
.fx-nudge{animation:nudge .3s ease-out!important}
@keyframes nudge{30%{transform:translateY(-6px)}60%{transform:translateY(3px)}}
.fx-shake{animation:shk .45s linear!important}
@keyframes shk{15%{transform:translate(-7px,2px) rotate(-3deg)}30%{transform:translate(6px,-2px) rotate(3deg)}45%{transform:translate(-5px,1px) rotate(-2deg)}60%{transform:translate(4px,0) rotate(1deg)}80%{transform:translate(-2px,0)}}
/* new blocks */
.xp-card{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:0;color:#fff}
.xp-card.col{display:block}.xp-card p{margin:4px 0;font-size:13.5px;line-height:1.4;color:#eef2ff}
.xp-card.sel{border-color:var(--j-act)!important;box-shadow:0 0 0 1px var(--j-act),0 0 26px #ffe45c55,inset 0 1px 0 #ffffff55!important}
.xp-card b{font-size:17px}.xp-tag{display:block;font-size:11px;font-weight:800;letter-spacing:1px;color:var(--j-act)}.xp-tag.pad{margin:4px 4px -2px}
.xp-big{--rc:#9aa8bd;width:86px;height:86px;flex:none;display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 55%,#fff2),#1b0f6600 70%)}
.xp-big.r1{--rc:#66ffb0}.xp-big.r2{--rc:#72edff}.xp-big.r3{--rc:#c8a6ff}.xp-big.r4{--rc:#ffe45c}
.xp-big img{max-width:80px;max-height:70px;filter:drop-shadow(0 6px 10px #0008);animation:float 2.6s ease-in-out infinite}
.xp-big.broken img{filter:grayscale(1) brightness(.7);animation:none;transform:rotate(-8deg)}
@keyframes float{50%{transform:translateY(-5px)}}
.xp-stars{font-family:'Russo One',sans-serif;font-size:26px!important;color:var(--j-act)!important;text-shadow:0 0 14px #ffe45c88}.xp-stars em,.xp-props em{font-style:normal;color:var(--j-up)}
.st-row i{font-style:normal;opacity:.3}
.xp-bad{color:#ff8fa3!important;font-weight:700}
.xp-props{list-style:none;margin:0;padding:0}.xp-props li{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}.xp-props b{font-size:14px}
.xp-odds div{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}.xp-odds .ok{color:var(--j-up)}.xp-odds .bad{color:#ffb38a}.xp-odds b{font-size:15px}
.xp-mats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.xp-mat{display:grid;justify-items:center;gap:3px;padding:10px 6px;text-align:center}.xp-mat img{max-width:74px;max-height:50px}.xp-mat b{font-size:13px}.xp-mat small{font-size:11px;color:#e7e0ff}.xp-mat.none{opacity:.6;border-style:dashed!important}
.xp-toast{position:absolute;left:50%;top:38%;z-index:5;transform:translate(-50%,-50%);display:grid;gap:4px;justify-items:center;min-width:230px;padding:14px 22px;border-radius:18px;text-align:center;color:#fff;background:#1b0f66ee;border:2px solid #fff;box-shadow:0 14px 40px #0009;pointer-events:none;animation:toast 1.9s ease-out forwards}
.xp-toast b{font-family:'Russo One',sans-serif;font-size:24px;font-weight:400}.xp-toast span{font-size:13px}
.xp-toast.ok{border-color:var(--j-act)}.xp-toast.ok b{color:var(--j-act)}.xp-toast.bad{border-color:#ff6b81}.xp-toast.bad b{color:#ff8fa3}.xp-toast.same b{color:#cfe0ff}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}10%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}18%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.xp-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;text-align:left;color:#fff;order:2}.xp-row img{width:42px;height:42px;object-fit:contain;animation:float 2.6s ease-in-out infinite}.xp-row b{display:block;font-size:15px}.xp-row small{color:#e7e0ff;font-size:12.5px}
.xp-pic{position:relative;height:120px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 2px #ffffff55}.xp-pic img{width:100%;height:100%;object-fit:cover;animation:mapPan 22s ease-in-out infinite alternate}.xp-pic span{position:absolute;left:10px;right:10px;bottom:8px;padding:5px;border-radius:9px;background:#1b0f66dd;text-align:center;font-size:12px;font-weight:700}
.xp-line{margin:2px 2px -4px;font-size:14px}.xp-bar{height:10px;border-radius:5px;background:#1b0f66aa;overflow:hidden}.xp-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--j-up),var(--j-cyan));box-shadow:0 0 12px var(--j-cyan);transition:width .5s}
.xp-card.bank{justify-content:space-around;text-align:center}.xp-card.bank div{display:grid;justify-items:center;gap:2px}.xp-card.bank img{width:30px;height:30px;object-fit:contain}.xp-card.bank b{font-size:22px;color:var(--j-act)}.xp-card.bank small{font-size:11px;color:#e7e0ff}
.xp-cmprow{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}.xp-cmprow>span{font-size:22px;color:var(--j-act)}
.xp-cmp{--rc:#9aa8bd;display:grid;justify-items:center;gap:3px;padding:10px 6px;text-align:center}.xp-cmp.r1{--rc:#66ffb0}.xp-cmp.r2{--rc:#72edff}.xp-cmp.r3{--rc:#c8a6ff}.xp-cmp.r4{--rc:#ffe45c}
.xp-cmp small{font-size:10px;font-weight:800;letter-spacing:1px}.xp-cmp.new small{color:var(--j-act)}.xp-cmp img{max-width:90px;max-height:64px;filter:drop-shadow(0 5px 8px #0008)}.xp-cmp b{font-size:14px}.xp-cmp i{font-style:normal;font-size:11.5px;color:var(--rc)}.xp-cmp.new{border-color:var(--rc)!important;box-shadow:0 0 22px color-mix(in srgb,var(--rc) 50%,#0000),inset 0 1px 0 #fff5!important}.xp-cmp .none{opacity:.6;padding:24px 0}
.xp-table{width:100%;border-collapse:separate;border-spacing:0;padding:6px 10px;font-size:13.5px;color:#fff}.xp-table th{font-weight:500;font-size:11px;color:#e7e0ff;text-align:left;padding:4px 2px}.xp-table td{padding:6px 2px;font-weight:700}.xp-table td:first-child{font-weight:500}
.xp-test{order:99;border:1px dashed #ffffff66!important;border-radius:12px!important;margin-top:8px!important}.xp-test::after{content:""!important}
.m-body:has(.xp-card),.m-body:has(.xp-cmprow){display:flex;flex-direction:column;gap:10px}
.m-body:has(.xp-card)>*,.m-body:has(.xp-cmprow)>*{margin:0}
@media (prefers-reduced-motion:reduce){.m-screen::before,.m-screen::after,.isle-map,.xp-pic img,.m-play,.m-nav button.play,.it,.xp-big img,.m-body>*{animation:none!important}}
/* v024b: the main button glows instead of moving (a moving button cannot be clicked reliably); the home map gives room to the patrol row */
@keyframes breathe{50%{filter:brightness(1.12) drop-shadow(0 0 12px #ffc84a)}}
@keyframes navBob{50%{filter:brightness(1.15) drop-shadow(0 0 10px #ffc84a)}}
.m-isle{height:clamp(110px,calc(100dvh - 548px),420px)!important}
.m-body:has(>.m-isle)>.xp-row{padding:8px 12px}
@media (max-height:640px){.m-isle{height:clamp(84px,calc(100dvh - 478px),300px)!important}.m-body:has(>.m-isle)>.xp-row{padding:5px 10px}.m-body:has(>.m-isle)>.xp-row img{width:30px;height:30px}.m-body:has(>.m-isle)>.xp-row small{display:none}}

/* v025: a real place behind the menu instead of blurred blobs — the night city, slowly drifting, under a colour wash */
.m-screen{background:#1a0d5e!important}
.m-screen::before{content:"";position:absolute;inset:-12%;width:auto;height:auto;left:-12%;top:-12%;right:-12%;bottom:-12%;border-radius:0;filter:none;opacity:1;background:url(assets/ui_bg.jpg) center/cover;animation:cityDrift 60s ease-in-out infinite alternate}
.m-screen::after{content:"";position:absolute;inset:0;width:auto;height:auto;right:0;bottom:0;border-radius:0;filter:none;opacity:1;background:linear-gradient(180deg,#2a1590e6 0%,#4b25c9cc 34%,#2456e6b8 68%,#12a6e6a6 100%);animation:none}
@keyframes cityDrift{0%{transform:translate(-4%,-3%) scale(1.02)}100%{transform:translate(4%,3%) scale(1.12)}}
.m-card,.d-row,.m-dist,.m-inv,.m-gear,.d-pts,.goal-home,.m-stats>div,.g-days>div,.xp-card,.xp-row,.xp-table,.xp-mat,.xp-cmp{background:linear-gradient(160deg,#2b1a8fd9,#2a3fd0cc)!important;backdrop-filter:none}
/* the hero stands on the screen itself: no box, a light pool under the feet */
.m-doll{background:radial-gradient(ellipse 46% 9% at 50% 88%,#0b0640aa,#0b064000 70%),radial-gradient(circle at 50% 50%,#ffe45c44,#ff5fa822 45%,#ffffff00 68%)!important;animation:none!important;overflow:visible!important}
.m-doll canvas,#heroPreview{border-radius:0!important;background:none!important;max-height:38vh!important;image-rendering:auto;filter:drop-shadow(0 8px 10px #0b064066)}
@media (prefers-reduced-motion:reduce){.m-screen::before{animation:none!important}}

/* v026 */
.m-body>*{animation:none}
#panel[data-enter] .m-body>*{animation:rise .32s cubic-bezier(.2,.9,.3,1.2) backwards}
.m-ava{width:44px!important;height:44px!important;overflow:hidden;border-radius:50%;background:radial-gradient(circle,#6fb0ff,#2a3fd0)!important;box-shadow:0 0 0 2px #ffffff88!important}
.m-ava img{width:100%!important;height:100%!important;object-fit:contain!important;margin:0!important;transform:scale(1.02)}
/* every icon sits in the same centred box */
.it{display:grid!important;place-items:center!important}
.it img{display:block!important;width:74%!important;height:62%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:50% 50%;margin:0 auto!important;align-self:center;transform:translateY(-3%)}
.xp-big img,.xp-mat img,.xp-cmp img{object-fit:contain;object-position:50% 50%}
.xp-mat img{width:74px;height:50px}.xp-cmp img{width:90px;height:64px}.xp-big img{width:80px;height:70px}
/* item actions: one row, the lock as a small switch in the corner */
.it-detail{position:relative}
.it-acts{display:grid!important;grid-template-columns:1.25fr 1fr 1fr!important;gap:8px!important;margin-top:12px!important}
.xp-act{margin:0!important;padding:13px 4px!important;border:1px solid #ffffff55!important;border-radius:12px!important;background:#ffffff1f!important;color:#fff!important;font-size:14px!important;font-weight:800!important;box-shadow:none!important}
.xp-act svg{display:none}
.xp-act.main{border:0!important;background:linear-gradient(180deg,#fff27a,var(--j-act) 40%,var(--j-act2))!important;color:#3a1c00!important;box-shadow:0 4px 0 #b8600a!important}
.xp-act.cmp{background:linear-gradient(180deg,#7df3ff,#2aa8ff)!important;color:#06264d!important;border:0!important;box-shadow:0 4px 0 #0e63b8!important}
.xp-lock{position:absolute;right:8px;top:8px;width:40px;height:40px;margin:0!important;padding:0!important;border:1px solid #ffffff55!important;border-radius:12px!important;background:#ffffff1f!important;font-size:19px!important;line-height:1;box-shadow:none!important}
.xp-lock.on{background:linear-gradient(180deg,#fff27a,var(--j-act2))!important;border:0!important}
.xp-lock::after{content:""!important}
/* home: the boss of the stage stands on the map */
.isle-boss{display:grid!important;right:10px!important;top:auto!important;bottom:10px;width:auto!important;height:46%;aspect-ratio:1;border:0!important;border-radius:50%!important;background:radial-gradient(circle,#ff6a5c,#a8162c)!important;box-shadow:0 0 0 3px #fff,0 0 0 6px #d92f4b,0 0 26px #ff3d5a!important;overflow:visible!important;animation:bossPulse 1.6s ease-in-out infinite}
.isle-boss img{width:100%!important;height:100%!important;object-fit:contain;border-radius:50%}
.isle-boss em{bottom:-9px!important;font-size:10px!important;background:#d92f4b!important;border:2px solid #fff!important}
@keyframes bossPulse{50%{filter:brightness(1.18);box-shadow:0 0 0 3px #fff,0 0 0 6px #d92f4b,0 0 40px #ff3d5a}}
.isle-chip{font-size:12px!important;padding:6px 14px!important}
/* the city behind the menu travels further */
@keyframes cityDrift{0%{transform:translate(-9%,-7%) scale(1.25) rotate(-1.5deg)}50%{transform:translate(6%,-2%) scale(1.4) rotate(1deg)}100%{transform:translate(9%,8%) scale(1.3) rotate(-.5deg)}}
.m-screen::before{animation-duration:46s!important;inset:-20%!important;left:-20%!important;top:-20%!important;right:-20%!important;bottom:-20%!important}
/* development and shop */
.xp-rec b{display:block;font-family:'Russo One',sans-serif;font-size:22px;font-weight:400;margin:4px 0}.xp-rec .m-play{margin-top:10px;width:100%}
.xp-gift{display:grid;justify-items:center;gap:4px;padding:10px 0 4px;text-align:center}
.xp-gift img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 10px 18px #0008)}
.xp-gift.ready img{animation:giftHop 1.4s ease-in-out infinite}
@keyframes giftHop{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.xp-gift b{font-family:'Russo One',sans-serif;font-size:22px;font-weight:400;color:var(--j-act);text-shadow:0 0 16px #ffe45c88}.xp-gift small{color:#e7e0ff;font-size:13px}

/* v027 */
.m-ava{width:46px!important;height:46px!important;border-radius:14px!important}
.m-ava img{object-fit:cover!important;object-position:50% 8%!important;transform:scale(1.5) translateY(14%)!important}
/* home: the map as a framed card, under it the target of the stage — boss, name, five steps */
.isle-boss{display:none!important}
.m-isle{border-radius:20px!important;box-shadow:0 0 0 3px #fff,0 0 0 7px #6a2fe0,0 14px 30px #1a0b5caa!important}
.isle-chip{display:none!important}
.m-body:has(>.m-isle)>.m-stage{display:flex!important;order:2!important;align-items:center;gap:12px;padding:10px 14px!important;text-align:left!important;border:1px solid var(--j-line)!important;border-radius:16px!important;background:linear-gradient(120deg,#a8162ccc,#5a1fb8cc 55%,#2a3fd0cc)!important;box-shadow:0 8px 22px #1a0b5c55,inset 0 1px 0 #ffffff55!important}
.m-body:has(>.m-isle)>.m-stage .m-face{display:grid!important;width:62px!important;height:62px!important;border-radius:50%!important;border:3px solid #fff!important;background:radial-gradient(circle,#ff6a5c,#a8162c)!important;box-shadow:0 0 18px #ff3d5a!important;animation:bossPulse 1.6s ease-in-out infinite;flex:none}
.m-body:has(>.m-isle)>.m-stage .m-face img{filter:none!important;width:100%!important;height:100%!important;object-fit:contain}
.m-body:has(>.m-isle)>.m-stage .m-st b{font-family:'Russo One',sans-serif;font-weight:400;font-size:17px!important;-webkit-text-stroke:0!important;text-shadow:0 2px 0 #1b0f66!important;color:#fff!important}
.m-body:has(>.m-isle)>.m-stage .m-st em{color:#ffd0d6!important;font-size:13px!important;margin:1px 0 5px!important}
.m-body:has(>.m-isle)>.m-stage .m-st i{justify-content:flex-start!important;gap:5px!important;color:#ffffff44!important;font-size:17px!important}
.m-body:has(>.m-isle)>.m-stage .m-st i .done{color:#5dffa6!important}.m-body:has(>.m-isle)>.m-stage .m-st i .cur{color:var(--j-act)!important;filter:drop-shadow(0 0 6px #ffe45c);animation:dot 1s ease-in-out infinite}
.m-body:has(>.m-isle)>.m-stage .m-chev{display:block!important;color:#fff!important}
.m-isle{height:clamp(96px,calc(100dvh - 640px),400px)!important}
@media (max-height:640px){.m-isle{height:clamp(70px,calc(100dvh - 560px),260px)!important}.m-body:has(>.m-isle)>.m-stage{padding:5px 10px!important}.m-body:has(>.m-isle)>.m-stage .m-face{width:40px!important;height:40px!important}.m-body:has(>.m-isle)>.m-stage .m-st em{display:none!important}}
/* outcome plate with details */
.xp-toast.big{top:44%;min-width:270px}.xp-toast em{display:block;font-style:normal;font-weight:800;font-size:15px;margin-bottom:3px}.xp-toast i{display:block;font-style:normal;color:var(--j-up);font-weight:700}
.xp-toast{animation-name:toast;animation-timing-function:ease-out;animation-fill-mode:forwards}
.rc1{color:#66ffb0}.rc2{color:#72edff}.rc3{color:#c8a6ff}.rc4{color:#ffe45c}
/* shop: the found item in the middle of the screen; showcase three in a row; cases that look like cases */
.m-card.got{position:fixed!important;left:50%;top:50%;z-index:6;width:min(86vw,360px);transform:translate(-50%,-50%);text-align:center;display:grid!important;justify-items:center;gap:8px;padding:18px!important;background:linear-gradient(160deg,#2b1a8f,#2a3fd0)!important;border:2px solid var(--j-act)!important;box-shadow:0 0 0 100vmax #0b0640bb,0 0 40px #ffe45c88!important;animation:pop .45s cubic-bezier(.2,1.8,.4,1)}
.m-card.got>b{font-family:'Russo One',sans-serif;font-weight:400;font-size:22px;color:var(--j-act)}
.m-card.got .it-dh{display:grid;justify-items:center;gap:6px}.m-card.got .it{width:120px!important;height:120px}.m-card.got .m-ghost{background:linear-gradient(180deg,#fff27a,var(--j-act2))!important;color:#3a1c00!important;border-radius:12px!important;padding:12px 26px!important;font-weight:900}
.m-list:has(>.s-offer){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.s-offer{padding:8px 6px!important;display:grid!important;justify-items:center;gap:5px;text-align:center}
.s-offer .it-dh{display:grid!important;justify-items:center;gap:4px}.s-offer .it{width:64px!important;height:64px}.s-offer .it-dh b{font-size:12px!important;line-height:1.15;display:block}.s-offer .it-dh small{font-size:10px!important}
.s-offer .it-props{font-size:10.5px!important;width:100%;margin:0;padding:0}.s-offer .it-props li{padding:1px 0!important;display:grid!important;justify-items:center}.s-offer .it-props span{opacity:.8}
.s-offer .m-yellow{font-size:13px!important;padding:9px 2px!important;margin:2px 0 0!important;border-radius:11px!important;gap:3px!important;flex-wrap:wrap}.s-offer .m-yellow span{display:none}.s-offer .m-note{font-size:10px!important;margin:0}
.case-shop{position:relative;display:grid!important;grid-template-columns:118px 1fr;gap:4px 12px!important;align-items:center;padding:14px!important;overflow:hidden}
.case-shop::before{content:"";grid-row:1/span 3;width:118px;height:118px;background:var(--case-img,url(assets/case_gear.png)) center/contain no-repeat;filter:drop-shadow(0 8px 12px #0009);animation:giftHop 1.8s ease-in-out infinite}
.case-shop:nth-of-type(2){--case-img:url(assets/case_set.png);background:linear-gradient(160deg,#5a1fb8d9,#a8327ccc)!important}
.case-shop h3{font-family:'Russo One',sans-serif;font-weight:400;font-size:19px;color:var(--j-act);margin:0}
.case-shop .case-target,.case-shop .case-actions,.case-shop>.m-ghost,.case-shop>button{grid-column:1/-1}
.case-pity i{width:22px!important;height:9px!important;background:#ffffff33!important}.case-pity i.on{background:var(--j-act)!important;box-shadow:0 0 8px #ffe45c}
.case-target select{background:#1b0f66!important;border:1px solid var(--j-line)!important;border-radius:10px!important;color:#fff!important}
.case-opening .chest-window{border:3px solid var(--j-act)!important;border-radius:16px!important;background:#1b0f66!important;box-shadow:0 0 30px #ffe45c66}
.chest-ribbon>div{background:linear-gradient(160deg,#2b1a8f,#2a3fd0)!important;border-radius:12px}
.case-reward{display:grid;justify-items:center;text-align:center}
#panel.modal.r-chest{display:flex;flex-direction:column;justify-content:center;min-height:80vh}
.case-shop~.case-shop{--case-img:url(assets/case_set.png);background:linear-gradient(160deg,#5a1fb8d9,#a8327ccc)!important}
.case-shop:nth-of-type(2){--case-img:url(assets/case_gear.png);background:linear-gradient(160deg,#2b1a8fd9,#2a3fd0cc)!important}
.case-shop~.case-shop:nth-of-type(n){--case-img:url(assets/case_set.png);background:linear-gradient(160deg,#5a1fb8d9,#a8327ccc)!important}
.s-offer{min-width:0;overflow:hidden}
.s-offer .it-dh{grid-template-columns:minmax(0,1fr)!important;width:100%}.s-offer .it-dh>div{min-width:0;width:100%}.s-offer .it-dh b,.s-offer .it-dh small{white-space:normal!important;overflow-wrap:anywhere;text-align:center}
.s-offer .it-props{display:grid;gap:2px}.s-offer .it-props li{background:none!important;text-align:center}.s-offer .it-props b{font-size:12px!important}
.s-offer .m-yellow{width:100%!important;position:static!important}

/* v028 */
.xp-show{position:fixed;inset:0;z-index:30;display:grid;align-content:center;justify-items:center;gap:8px;padding:24px;background:radial-gradient(circle at 50% 36%,#3a1fb8f2,#0b0640fa 70%);animation:xsIn .22s ease-out;text-align:center;color:#fff;overflow:hidden}
.xp-show.bad{background:radial-gradient(circle at 50% 36%,#7a1530f2,#19051cfa 70%)}.xp-show.same{background:radial-gradient(circle at 50% 36%,#2a3a6af2,#080f2afa 70%)}
@keyframes xsIn{0%{opacity:0}}
.xs-rays{position:absolute;left:50%;top:36%;width:150vmax;height:150vmax;margin:-75vmax;background:repeating-conic-gradient(from 0deg,#ffffff16 0 9deg,#ffffff00 9deg 18deg);animation:xsSpin 16s linear infinite;pointer-events:none;mask:radial-gradient(circle,#000 0,#0000 46%);-webkit-mask:radial-gradient(circle,#000 0,#0000 46%)}
.xp-show.bad .xs-rays,.xp-show.same .xs-rays{display:none}
@keyframes xsSpin{to{transform:rotate(360deg)}}
.xs-item{--rc:#c9d6e8;position:relative;width:170px;height:170px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 70%,#fff3),#0000 68%);animation:xsItem .7s cubic-bezier(.2,1.7,.4,1)}
.xs-item.r1{--rc:#66ffb0}.xs-item.r2{--rc:#72edff}.xs-item.r3{--rc:#c8a6ff}.xs-item.r4{--rc:#ffe45c}
.xs-item img{width:150px;height:130px;object-fit:contain;filter:drop-shadow(0 10px 16px #000a);animation:float 2.4s ease-in-out infinite}
.xs-item.broken img{filter:grayscale(1) brightness(.6);transform:rotate(-12deg);animation:none}
@keyframes xsItem{0%{transform:scale(.2) rotate(-25deg);opacity:0}60%{transform:scale(1.2) rotate(6deg)}}
.xs-title{position:relative;font-family:'Russo One',sans-serif;font-weight:400;font-size:30px;color:var(--j-act);text-shadow:0 3px 0 #1b0f66,0 0 26px #ffe45caa;animation:pop .5s cubic-bezier(.2,1.8,.4,1) .15s backwards}
.xp-show.bad .xs-title{color:#ff8fa3;text-shadow:0 3px 0 #3a0614}.xp-show.same .xs-title{color:#cfe0ff;text-shadow:0 3px 0 #0b1c52}
.xs-name{position:relative;font-weight:800;font-size:16px}
.xs-lines{position:relative;display:grid;gap:6px;width:min(100%,340px);margin-top:6px}
.xs-lines p{margin:0;padding:9px 12px;border-radius:12px;background:#ffffff1c;border:1px solid #ffffff33;font-size:14.5px;animation:xsLine .4s cubic-bezier(.2,1.4,.4,1) backwards}
.xs-lines span{color:#e7e0ff}.xs-lines s{opacity:.7;text-decoration:none}.xs-lines em{font-style:normal;font-weight:800;color:var(--j-up)}
@keyframes xsLine{0%{opacity:0;transform:translateX(-40px) scale(.9)}}
.xs-btns{position:relative;display:grid;gap:6px;width:min(100%,340px);margin-top:10px;animation:rise .35s ease-out backwards}
.xs-btns .m-play{width:100%;padding:15px!important;font-size:16px!important}
/* sets on the hero */
.xp-set{padding:6px 0;border-top:1px solid #ffffff22}.xp-set:first-of-type{border-top:0}
.xp-set b{font-size:15px}.xp-set b i{font-style:normal;color:var(--j-act);margin-left:6px}
.xp-set .dots{display:inline-flex;gap:4px;margin-left:8px}.xp-set .dots u{width:16px;height:7px;border-radius:4px;background:#ffffff33}.xp-set .dots u.on{background:var(--j-act);box-shadow:0 0 8px #ffe45c}
.xp-set p{margin:3px 0 0!important;font-size:12.5px!important;opacity:.5}.xp-set p.on{opacity:1;color:var(--j-up)!important;font-weight:700}
/* shop fixes */
.m-card.got{animation:gotIn .35s cubic-bezier(.2,1.5,.4,1)!important}
@keyframes gotIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.m-card.got::after{content:"Нажми в любом месте, чтобы закрыть";font-size:11px;color:#e7e0ff;opacity:.8}
.s-offer .m-yellow::after,.m-go::after,.xp-act::after,.case-actions .m-yellow::after{display:none!important}
.m-play::after,.m-yellow:not(:disabled)::after{width:18%!important;background:linear-gradient(100deg,#fff0,#ffffffaa,#fff0)!important}
.s-offer .it-dh .it{margin:0 auto}.s-offer .it-dh>div{display:grid;justify-items:center;padding-top:2px}
.case-shop::before{animation:none!important}
.case-target{font-size:14px!important;font-weight:700}
.case-target select{appearance:none;-webkit-appearance:none;padding:11px 34px 11px 14px!important;font-size:14px;font-weight:800;background:#1b0f66 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffe45c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center!important;border:1px solid var(--j-act)!important;border-radius:12px!important}
.case-shop .m-note{font-size:13.5px!important}.case-pity span{font-size:13px}
.case-open-skip{background:linear-gradient(180deg,#fff27a,var(--j-act) 40%,var(--j-act2))!important;border:0!important;border-radius:14px!important;padding:14px 30px!important;color:#3a1c00!important;font-weight:900!important;font-size:15px;box-shadow:0 5px 0 #b8600a}
.it{overflow:hidden!important}.it img{min-width:0!important;min-height:0!important}
/* home: the chapter as a floating island */
.m-isle{box-shadow:none!important;border-radius:0!important;overflow:visible!important;background:none!important}
.isle{display:grid!important;place-items:center}
.isle-map{width:auto!important;max-width:100%!important;height:100%!important;object-fit:contain!important;animation:isleFloat 4.5s ease-in-out infinite!important;filter:drop-shadow(0 18px 18px #0b064099)}
.m-isle::before{content:"";position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffe45c33,#5ef2ff22 45%,#0000 68%);animation:isleGlow 3s ease-in-out infinite}
@keyframes isleFloat{50%{transform:translateY(-10px)}}
.m-isle{--ih:clamp(130px,calc(100dvh - 610px),400px);height:var(--ih)!important;flex:none!important;z-index:0}
.isle{height:var(--ih)!important}.isle-map{height:var(--ih)!important;max-height:var(--ih)!important}
.m-body:has(>.m-isle)>.m-stage{position:relative;z-index:1}
@media (max-height:640px){.m-isle{--ih:clamp(84px,calc(100dvh - 520px),260px)}}

/* v029: the avatar is the real hero in his gear */
.m-ava img.live{object-fit:contain!important;object-position:50% 50%!important;transform:none!important;width:100%!important;height:100%!important}

/* v030 */
.m-body{overflow-x:hidden!important}
/* main buttons jump in when a screen opens, then keep glowing */
#panel[data-enter] .m-play:not(:disabled),#panel[data-enter] .m-yellow:not(:disabled){animation:btnIn .5s cubic-bezier(.2,1.7,.4,1) .18s backwards,breathe 1.8s ease-in-out .8s infinite!important}
#panel[data-enter] .m-go:not(:disabled){animation:btnIn .45s cubic-bezier(.2,1.7,.4,1) .22s backwards!important}
@keyframes btnIn{0%{opacity:0;transform:translateY(34px) scale(.6)}60%{opacity:1;transform:translateY(-6px) scale(1.07)}}
/* endless battle: a real second button */
.xp-endless{order:6!important;display:flex;align-items:center;gap:12px;width:100%;margin:0!important;padding:10px 14px;border:0;border-radius:14px;background:linear-gradient(120deg,#ff5fa8,#a23bff 55%,#4b6bff);color:#fff;text-align:left;box-shadow:0 4px 0 #4a1a9c,0 8px 20px #a23bff66;position:relative;overflow:hidden}
.xp-endless>b{font-size:34px;line-height:1;font-weight:900;text-shadow:0 2px 0 #4a1a9c;animation:dot 1.6s ease-in-out infinite}
.xp-endless span b{display:block;font-family:'Russo One',sans-serif;font-weight:400;font-size:16px;letter-spacing:.5px}.xp-endless span small{font-size:12px;opacity:.9}
.xp-endless em{margin-left:auto;font-style:normal;font-size:26px}
.xp-endless:active{transform:translateY(3px);box-shadow:0 1px 0 #4a1a9c}
#panel[data-enter] .xp-endless{animation:btnIn .5s cubic-bezier(.2,1.7,.4,1) .3s backwards}
.m-body:has(>.m-isle)>.extra-links{order:7}
.m-isle{--ih:clamp(120px,calc(100dvh - 680px),400px)}
@media (max-height:640px){.xp-endless{padding:5px 12px}.xp-endless span small{display:none}.xp-endless>b{font-size:24px}}
/* island: loose rocks drift under it, lamps flicker */
.isle{position:relative}
.isle-rock{position:absolute;z-index:0;background:linear-gradient(160deg,#5b6cc4,#27307a 60%,#151a52);clip-path:polygon(18% 0,78% 6%,100% 46%,72% 100%,24% 92%,0 44%);animation:rockBob 3.6s ease-in-out infinite;filter:drop-shadow(0 4px 4px #0b064088)}
@keyframes rockBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(8deg)}}
.isle-light{position:absolute;z-index:2;width:34px;height:34px;margin:-17px;border-radius:50%;background:radial-gradient(circle,#fff6c8 0,#ffc94a99 30%,#ffb02e00 70%);mix-blend-mode:screen;pointer-events:none;animation:lampFlick 2.6s ease-in-out infinite}
@keyframes lampFlick{0%,100%{opacity:.55;transform:scale(.9)}40%{opacity:1;transform:scale(1.25)}46%{opacity:.5}52%{opacity:1}70%{opacity:.75;transform:scale(1)}}
.isle-map{position:relative;z-index:1}
/* battle select: a chapter card with its island, a path of five stages and a start button */
.m-dist{position:relative;display:grid!important;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:6px 12px!important;padding:12px!important;overflow:hidden}
.m-dist img.isle-thumb{width:104px!important;height:96px!important;object-fit:contain!important;border:0!important;box-shadow:none!important;border-radius:0!important;filter:drop-shadow(0 8px 8px #0b064088)!important;animation:isleFloat 4.5s ease-in-out infinite}
.m-dist:not(.on) img.isle-thumb{filter:grayscale(.9) brightness(.55)!important;animation:none}
.m-dist b{font-family:'Russo One',sans-serif;font-weight:400!important;font-size:18px!important}
.m-dist em{display:none!important}
.m-dist i{position:relative;gap:0!important;justify-content:space-between;max-width:230px;margin-top:8px!important}
.m-dist i::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#ffffff33}
.m-dist i button{position:relative;width:34px!important;height:34px!important;border-radius:50%!important;border:2px solid #ffffff66!important;background:#2a1a8f!important;font-family:'Russo One',sans-serif;font-size:15px!important}
.m-dist i button.done{background:linear-gradient(180deg,#7dffb8,#22c777)!important;border-color:#fff!important;color:#063a1c!important}
.m-dist i button.cur{background:linear-gradient(180deg,#fff27a,var(--j-act2))!important;border-color:#fff!important;color:#3a1c00!important;transform:scale(1.2)!important;box-shadow:0 0 16px #ffe45c!important;animation:dot 1.2s ease-in-out infinite}
.m-dist i button:disabled{background:#1b0f66!important;border-color:#ffffff33!important;color:#ffffff66!important}
.m-dist i button svg{width:13px;height:13px}
.m-dist>div>.m-ghost{padding:6px 0 0!important;font-size:12.5px!important;text-align:left!important;justify-content:flex-start!important;width:auto!important;opacity:.85}
.m-dist .m-go{width:56px!important;height:56px!important;border-radius:16px!important}
.m-dist:not(.on){filter:none!important;opacity:.75}
/* mastery cards in the same look, icons in equal tiles */
.mastery-card{border:1px solid var(--j-line)!important;border-radius:16px!important;background:linear-gradient(160deg,#2b1a8fd9,#2a3fd0cc)!important;box-shadow:0 8px 22px #1a0b5c55,inset 0 1px 0 #ffffff55!important}
.mastery-card>img{width:64px!important;height:64px!important;padding:8px;box-sizing:border-box;object-fit:contain!important;border-radius:14px;background:radial-gradient(circle at 50% 35%,#6fb0ff66,#1b0f66aa 78%);box-shadow:inset 0 0 0 2px #ffffff44;filter:none!important}
.mastery-card small{color:var(--j-cyan)!important}.mastery-card b{font-family:'Russo One',sans-serif;font-weight:400!important;color:#fff!important}.mastery-card b span{color:var(--j-act)!important}
.goal-meter{background:#1b0f66aa!important;border:0!important;height:10px!important;border-radius:5px!important}.goal-meter i{background:linear-gradient(90deg,var(--j-up),var(--j-cyan))!important;box-shadow:0 0 10px var(--j-cyan);border-radius:5px}
.goal-home{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}

.isle-wrap{position:relative;display:inline-block;height:var(--ih);animation:isleFloat 4.5s ease-in-out infinite}
.isle-wrap .isle-map{animation:none!important;display:block}
.isle-light{width:26px;height:26px;margin:-13px}
.m-isle{--ih:clamp(130px,calc(100dvh - 650px),400px)}
.m-dist i{flex-wrap:nowrap!important;max-width:none!important}
.m-dist i button{width:30px!important;height:30px!important;flex:none;font-size:13px!important}
.m-dist{grid-template-columns:92px minmax(0,1fr) auto}
.m-dist img.isle-thumb{width:92px!important;height:86px!important}
.m-dist b{font-size:16px!important}
.m-body>.xp-endless{margin-top:12px!important}
@media (max-height:640px){.m-isle{--ih:clamp(56px,calc(100dvh - 520px),260px)}.m-body:has(>.m-isle){gap:5px!important}.m-body:has(>.m-isle)>.xp-row small{display:none}.isle-rock,.isle-light{display:none}}

/* v031 */
.xs-hint{position:relative;font-size:11.5px;color:#e7e0ff;opacity:.75;margin-top:4px}
.xp-show{cursor:pointer}
.d-row{transition:transform .15s}
.d-row.xp-up{animation:rowUp .7s cubic-bezier(.2,1.6,.4,1);box-shadow:0 0 0 2px var(--j-act),0 0 30px #ffe45caa!important}
.d-row.xp-up b i{animation:pop .6s cubic-bezier(.2,1.8,.4,1);background:var(--j-act)!important;color:#3a1c00!important}
@keyframes rowUp{0%{transform:scale(.94)}45%{transform:scale(1.05)}}
/* shop: free rewards */
.xp-ads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xp-adsh{grid-column:1/-1;margin:0;text-align:center}.xp-adsh b{display:block;font-family:'Russo One',sans-serif;font-weight:400;font-size:20px;color:var(--j-act)}.xp-adsh span{font-size:13px;color:#e7e0ff}
.xp-ad{display:grid;justify-items:center;gap:3px;padding:12px 8px;text-align:center;border-radius:16px;border:1px solid color-mix(in srgb,var(--c) 60%,#fff3);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,#2b1a8f),#2a3fd0cc);box-shadow:0 8px 22px #1a0b5c55,inset 0 1px 0 #ffffff55;animation:rise .35s cubic-bezier(.2,.9,.3,1.2) backwards}
.xp-ad:nth-of-type(5){grid-column:1/-1}
.xp-ad .pic{width:74px;height:74px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,#fff2),#0000 70%)}
.xp-ad .pic img{width:58px!important;height:58px!important;object-fit:contain;filter:drop-shadow(0 5px 8px #0008);animation:float 2.6s ease-in-out infinite}
.xp-ad b{font-size:15px}.xp-ad em{font-style:normal;font-weight:800;color:var(--c);font-size:14px}
.xp-ad button{margin-top:4px;padding:8px 18px;border:0;border-radius:11px;background:#ffffff26;color:#ffffffaa;font-weight:800;font-size:13px}
.xp-ads .m-note{grid-column:1/-1}
/* case opening */
.case-opening{display:grid;justify-items:center;gap:6px}
.xp-case{position:relative;width:170px;height:150px;display:grid;place-items:center}
.xp-case::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,#ffe45c66,#0000 65%);animation:isleGlow 1s ease-in-out infinite}
.xp-case img{position:relative;width:160px;height:140px;object-fit:contain;filter:drop-shadow(0 12px 16px #000a);animation:caseShake .5s ease-in-out infinite}
@keyframes caseShake{0%,100%{transform:rotate(-4deg) translateY(0)}25%{transform:rotate(5deg) translateY(-6px)}50%{transform:rotate(-6deg)}75%{transform:rotate(4deg) translateY(-4px)}}
.case-title{font-family:'Russo One',sans-serif!important;font-size:24px!important}
.chest-window{height:112px!important;width:min(100%,360px)!important}
.chest-ribbon>div{width:100px;height:106px!important;border:1px solid #ffffff33}
.chest-window>i{width:4px!important;background:var(--j-act)!important;box-shadow:0 0 16px #ffe45c!important}
.chest-window::before,.chest-window::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:1;pointer-events:none}
.chest-window::before{left:0;background:linear-gradient(90deg,#1b0f66,#1b0f6600)}.chest-window::after{right:0;background:linear-gradient(270deg,#1b0f66,#1b0f6600)}
/* case reward */
.case-reward{border:2px solid var(--case-color)!important;border-radius:20px!important;background:linear-gradient(160deg,#2b1a8f,#2a3fd0)!important;box-shadow:0 0 40px color-mix(in srgb,var(--case-color) 50%,#0000)!important;width:min(100%,360px)}
.case-reward.rc0{--case-color:#e0eeff}.case-reward.rc1{--case-color:#66ffb0}.case-reward.rc2{--case-color:#72edff}
.case-halo{height:150px!important}.case-halo:before{opacity:.5!important;animation:isleGlow 2s ease-in-out infinite}
.case-halo img{animation:xsItem .7s cubic-bezier(.2,1.7,.4,1),float 2.4s ease-in-out .7s infinite}
.case-reward h3{font-family:'Russo One',sans-serif;font-weight:400;font-size:22px!important}
.case-bonus{background:#1b0f66aa!important;border:1px solid var(--j-act)!important;color:var(--j-act)!important;border-radius:12px!important;font-weight:800}
.case-compare{font-size:13.5px!important}.case-compare>div{padding:6px 10px;border-radius:10px;background:#ffffff14}
.case-good{color:var(--j-up)!important}.case-bad{color:#ff8fa3!important}
.case-buttons{width:min(100%,360px);grid-template-columns:1fr 1fr!important}.case-buttons .m-play{grid-column:1/-1;order:-1}
.case-buttons .m-yellow,.case-buttons .m-ghost{font-size:14px!important;padding:12px 6px!important;margin:0!important;border-radius:12px!important}
.case-buttons .m-ghost{background:#ffffff1f!important;border:1px solid #ffffff55!important}.case-buttons .m-ghost::after{content:""!important}

#panel.modal.r-chest{display:flex!important;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;box-sizing:border-box;gap:10px;background:radial-gradient(circle at 50% 40%,#3a1fb8,#0b0640 75%)!important}

/* v032 */
/* main buttons arrive together with the rest of the screen, no separate jump */
#panel[data-enter] .m-play:not(:disabled),#panel[data-enter] .m-yellow:not(:disabled){animation:rise .32s cubic-bezier(.2,.9,.3,1.2) .2s backwards,breathe 1.8s ease-in-out .6s infinite!important}
#panel[data-enter] .m-go:not(:disabled){animation:none!important}
#panel[data-enter] .xp-endless{animation:rise .32s cubic-bezier(.2,.9,.3,1.2) .2s backwards}
.xp-endless>b{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:#ffffff26;font-size:30px;line-height:0;padding-bottom:5px;box-sizing:border-box;animation:none}
.chest-ribbon{animation-timing-function:cubic-bezier(.12,.72,.14,1)!important}
/* case card: picture and title on top, one big open button, small links under it */
.case-shop{grid-template-columns:104px minmax(0,1fr)!important;gap:2px 14px!important;padding:16px!important;border-radius:20px!important;border:2px solid #ffffff55!important}
.case-shop::before{width:104px!important;height:104px!important;grid-row:1/span 3!important;align-self:center}
.case-shop h3{font-size:20px!important;line-height:1.1}
.case-shop>.m-note{font-size:14px!important;color:#fff!important;font-weight:600}
.case-pity{gap:5px!important;font-size:12.5px!important;color:#e7e0ff!important}
.case-pity i{width:26px!important;height:8px!important;border-radius:4px!important}
.case-target{grid-column:1/-1;margin-top:12px;padding:8px 12px;border-radius:14px;background:#1b0f6699;justify-content:space-between}
.case-target select{padding:9px 32px 9px 12px!important;font-size:13.5px!important}
.case-actions{grid-column:1/-1;display:grid!important;grid-template-columns:1fr;gap:4px!important;margin-top:8px}
.case-actions .m-yellow{width:100%!important;min-width:0!important;margin:0!important;padding:15px 10px!important;font-family:'Golos Text',sans-serif!important;font-size:16px!important;font-weight:900!important;letter-spacing:.4px!important;border-radius:14px!important;text-transform:uppercase}
.case-actions .m-yellow:disabled{background:#ffffff1f!important;color:#ffffffb0!important;border:1px dashed #ffffff66!important}
.case-actions .m-ghost,.case-shop>.m-ghost{padding:7px 0!important;font-size:13px!important;opacity:.9}
.case-shop>.m-ghost{grid-column:1/-1;margin-top:-4px!important}
.case-shop>p.m-note:last-child{grid-column:1/-1;margin-top:10px!important;padding:10px;border-radius:12px;background:#1b0f6699;text-align:center;font-weight:700}

/* v033 */
#panel .u-card{animation:cardSlam .55s cubic-bezier(.2,1.5,.4,1) backwards!important}
#panel .u-card:nth-child(1){animation-delay:.18s!important}#panel .u-card:nth-child(2){animation-delay:.34s!important}#panel .u-card:nth-child(3){animation-delay:.5s!important}
@keyframes cardSlam{0%{opacity:0;transform:translateY(-70px) rotate(-6deg) scale(.7)}60%{opacity:1;transform:translateY(6px) rotate(1deg) scale(1.04)}}
#panel .u-card.rarity-2,#panel .u-card.rarity-3,#panel .u-card.rarity-4{box-shadow:0 6px 0 #06163c,0 0 0 2px var(--rc),0 0 24px color-mix(in srgb,var(--rc) 60%,#0000)!important}
#panel .u-card.rarity-4{animation:cardSlam .55s cubic-bezier(.2,1.5,.4,1) backwards,legend 1.6s ease-in-out 1s infinite!important}
@keyframes legend{50%{box-shadow:0 6px 0 #06163c,0 0 0 3px #ffe45c,0 0 40px #ffe45c}}
#panel .u-card .u-art{animation:float 2.6s ease-in-out infinite}
#panel .u-card:hover{transform:translateY(-3px)}
.xp-finale{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:6px;pointer-events:none;animation:finIn .3s ease-out}
.xp-finale.win{background:radial-gradient(circle at 50% 45%,#ffe45c55,#2a159088 60%,#0b064099)}.xp-finale.lose{background:radial-gradient(circle at 50% 45%,#ff3d5a55,#3a061488 60%,#0b0640bb)}
.xp-finale b{position:relative;font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(46px,12vw,92px);color:#ffe45c;text-shadow:0 5px 0 #1b0f66,0 0 40px #ffe45c;animation:finText .7s cubic-bezier(.2,1.8,.4,1)}
.xp-finale.lose b{color:#ff8fa3;text-shadow:0 5px 0 #3a0614,0 0 40px #ff3d5a}
.xp-finale small{position:relative;font-size:18px;font-weight:800;color:#fff;animation:rise .4s ease-out .3s backwards}
.fl-rays{position:absolute;left:50%;top:45%;width:160vmax;height:160vmax;margin:-80vmax;background:repeating-conic-gradient(#ffffff1c 0 8deg,#ffffff00 8deg 16deg);animation:xsSpin 14s linear infinite;mask:radial-gradient(circle,#000,#0000 45%);-webkit-mask:radial-gradient(circle,#000,#0000 45%)}
.xp-finale.lose .fl-rays{display:none}
@keyframes finIn{0%{opacity:0}}
@keyframes finText{0%{transform:scale(3);opacity:0}100%{transform:scale(1)}}

/* v034 */
/* screens arrive as one piece; buttons do not have their own entrance */
.m-body>*,#panel[data-enter] .m-body>*{animation:none!important}
#panel[data-enter] .m-body{animation:screenIn .3s cubic-bezier(.2,.9,.3,1.1)}
@keyframes screenIn{0%{opacity:0;transform:translateY(14px)}}
#panel[data-enter] .m-play:not(:disabled),#panel[data-enter] .m-yellow:not(:disabled),.m-play:not(:disabled){animation:breathe 1.8s ease-in-out .6s infinite!important}
#panel[data-enter] .xp-endless{animation:none!important}
/* finale text readable over the rays */
.xp-finale small{padding:6px 18px;border-radius:12px;background:#1b0f66cc;text-shadow:0 2px 0 #000;border:1px solid #ffffff55}
.xp-finale b{-webkit-text-stroke:3px #1b0f66;paint-order:stroke fill}
/* result screen fits without scrolling: compact blocks, big two-colour buttons */
#panel.r-result{padding:14px 14px 12px!important}
#panel.r-result .r-title{font-size:26px!important;margin:0 0 4px!important}
#panel.r-result .r-line{gap:6px!important;font-size:12px!important;margin:4px 0 8px!important}
#panel.r-result .r-tiles{gap:8px!important;margin-bottom:8px!important}
#panel.r-result .r-tiles>div{padding:6px 4px!important}#panel.r-result .r-tiles b{font-size:22px!important}#panel.r-result .r-tiles img,#panel.r-result .r-tiles svg{width:28px!important;height:28px!important}
#panel.r-result .r-loot{grid-template-columns:repeat(6,50px)!important;gap:6px!important}#panel.r-result .r-loot .it{width:50px!important;height:50px!important}#panel.r-result .r-loot .it u,#panel.r-result .r-loot .it em{font-size:7px!important}
#panel.r-result .m-note{margin:4px 0!important;font-size:11.5px!important}
#panel.r-result .feel-result,#panel.r-result .goal-result,#panel.r-result section{padding:8px 10px!important;margin:6px 0!important;font-size:12px!important}
#panel.r-result .mastery-card{padding:6px 8px!important}#panel.r-result .mastery-card>img{width:40px!important;height:40px!important}
#panel.r-result [class*="next"],#panel.r-result .r-advice{display:none!important}
#panel.r-result .r-btns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:10px}
#panel.r-result .r-btns .m-play{grid-column:1/-1;order:-1;font-size:20px!important;padding:15px!important}
#panel.r-result .r-btns .m-yellow{background:linear-gradient(180deg,#7dffb8,#22c777)!important;color:#063a1c!important;box-shadow:0 5px 0 #11804a!important;font-size:17px!important;padding:13px 6px!important}
#panel.r-result .p-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:10px}
#panel.r-result .p-row .m-ghost{padding:13px 6px!important;font-size:16px!important;font-weight:900!important;border-radius:14px!important;color:#fff!important;text-transform:uppercase}
#panel.r-result .p-row .m-ghost:nth-child(1){background:linear-gradient(180deg,#c58bff,#7a3ad6)!important;box-shadow:0 5px 0 #4a1a9c!important}
#panel.r-result .p-row .m-ghost:nth-child(2){background:linear-gradient(180deg,#6fb0ff,#2a64d6)!important;box-shadow:0 5px 0 #173c8c!important}
#panel.r-result .p-row .m-ghost::after{content:""!important}
/* case reward: centred in the screen */
#panel.modal.r-chest{min-height:calc(100dvh - 40px)!important;max-height:calc(100dvh - 40px)!important;justify-content:center!important}
/* gift opening */
.gift-open{width:96px;height:96px;object-fit:contain;margin-top:-58px;filter:drop-shadow(0 8px 12px #0009);animation:giftPop .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes giftPop{0%{transform:scale(.3) rotate(-20deg)}60%{transform:scale(1.25) rotate(8deg)}}
/* module buffs with the skill's icon */
.mod-ic{width:20px;height:20px;object-fit:contain;vertical-align:-5px;margin-right:6px;filter:drop-shadow(0 1px 2px #0008)}
.mod-tag{font-style:normal;font-size:10px;font-weight:800;padding:1px 6px;margin-left:4px;border-radius:7px;background:#ffe45c;color:#3a1c00;vertical-align:1px}
.mod-row{background:linear-gradient(90deg,#ffe45c22,#ffe45c00)!important;border-radius:8px}

#panel.r-result .r-btns{grid-auto-flow:row!important}
#panel.r-result .feel-result{display:none!important}
#panel.r-result .goal-result h3{margin:0 0 4px!important;font-size:12px!important}#panel.r-result .goal-result p{margin:2px 0!important}
#panel.r-result .r-tiles>div small{font-size:10px!important}
#panel:has(>.case-reward),#panel:has(>.case-opening){display:flex!important;flex-direction:column;justify-content:center;align-items:center;min-height:100%;box-sizing:border-box;gap:12px}
#panel.r-result .r-btns .m-yellow{grid-column:1/-1}

/* v035 */
.m-card.got .it-dh{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;text-align:center!important;gap:6px}
.m-card.got .it-dh>div{display:grid;justify-items:center}.m-card.got .it-props{width:100%}
.chest-ribbon>div{--rc:#c9d6e8;box-shadow:inset 0 0 0 3px var(--rc),inset 0 -24px 26px -14px var(--rc)!important}
.chest-ribbon>div.cr1{--rc:#66ffb0}.chest-ribbon>div.cr2{--rc:#72edff}.chest-ribbon>div.cr3{--rc:#c8a6ff}.chest-ribbon>div.cr4{--rc:#ffe45c}
/* upgrade cards: one clean column, art on top */
#panel .u-card{grid-template-columns:1fr!important;grid-template-areas:"name" "art" "desc" "change" "gear" "rar"!important;justify-items:center;text-align:center!important}
#panel .u-card>b{width:100%;box-sizing:border-box;padding:8px 34px 8px 10px!important;font-size:15px!important;line-height:1.15;text-align:left}
#panel .u-card .u-art{margin:0 0 8px!important;width:64px!important;height:64px!important}
#panel .u-card>p{padding:0 10px!important;font-size:13px!important;text-align:center}
#panel .u-card>p.change{font-size:12.5px!important}
.u-gear{grid-area:gear;margin:6px 10px 0!important;padding:5px 8px!important;border-radius:9px;background:#ffe45c26;color:#ffe45c!important;font-weight:800;font-size:12px!important;display:flex;align-items:center;gap:5px}
.u-gear img{width:18px;height:18px}
#panel .u-card>small{align-self:end}
.r-more{display:grid;place-items:center;width:50px;height:50px;border-radius:12px;background:#ffffff1f;font-weight:900;font-size:16px}
#panel.r-result .mastery-card{display:none!important}
#panel .u-card>.u-gear{grid-area:gear!important;justify-content:center}

/* v036: the mastery card as wide as the other home cards */
.m-body:has(>.m-isle)>.goal-home{width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box}
.goal-home .mastery-card{width:100%!important;box-sizing:border-box;margin:0!important}

/* v036: locked sections */
.m-nav button.locked{opacity:.45;filter:grayscale(.8)}
.m-nav button.locked::after{content:"";width:14px;height:14px;background:url(icons/ui_lock.png) center/contain no-repeat;position:absolute;top:4px;right:10px;font-size:11px}
.xp-lockpage{display:grid;justify-items:center;gap:10px;text-align:center;padding:40px 10px}
.lp-ic{position:relative;width:140px;height:140px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#ffffff2a,#ffffff00 70%)}
.lp-ic img{width:96px;height:96px;object-fit:contain;filter:grayscale(.6) brightness(.8)}.lp-ic i{position:absolute;right:10px;bottom:10px;font-style:normal;font-size:36px}
.xp-lockpage b{font-family:'Russo One',sans-serif;font-weight:400;font-size:28px}.xp-lockpage p{margin:0;color:#e7e0ff}
.lp-cond{padding:12px 18px;border-radius:14px;background:#1b0f66aa;border:1px solid #ffffff44;font-weight:800;font-size:15px}
.xp-lockpage .m-play{width:100%;margin-top:14px}
.xp-unlock{order:-1!important;display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:2px solid #ffe45c;border-radius:16px;background:linear-gradient(120deg,#ffb02e,#ff5fa8);color:#fff;text-align:left;box-shadow:0 0 24px #ffe45c88;animation:pop .5s cubic-bezier(.2,1.8,.4,1)}
.xp-unlock img{width:44px;height:44px;object-fit:contain}.xp-unlock small{display:block;font-size:11px;font-weight:900;letter-spacing:1px;opacity:.9}.xp-unlock b{font-family:'Russo One',sans-serif;font-weight:400;font-size:20px}.xp-unlock em{margin-left:auto;font-style:normal;font-weight:900}
/* v036b: mastery weapon — big, free, with a soft glow instead of a dark box */
.mastery-card>img{width:76px!important;height:62px!important;padding:0!important;background:radial-gradient(ellipse at 50% 55%,#ffe45c40,#ffe45c00 68%)!important;box-shadow:none!important;border-radius:0!important;filter:drop-shadow(0 4px 6px #0b064099)!important;transform:rotate(-8deg)}
.mastery-card>img{width:64px!important;height:54px!important;margin-left:4px!important;transform:rotate(-6deg) scale(.95)}
.mastery-card{overflow:visible!important;padding-left:12px!important}

/* v037: cinematics (tutor.js) */
#c{will-change:transform}
#cine{position:fixed;inset:0;z-index:40;pointer-events:none;display:none}
#cine.on{display:block}
#cine .cine-dim{position:absolute;inset:0;opacity:0;transition:opacity .2s}
#cine.dim .cine-dim{opacity:var(--dim,1)}
#cine .cine-bar{position:absolute;left:0;right:0;height:0;background:#000;transition:height .45s ease}
#cine .cine-bar.top{top:0}#cine .cine-bar.bot{bottom:0}
#cine.bars .cine-bar{height:11vh}
#cine .cine-card{position:absolute;left:50%;bottom:16vh;transform:translate(-50%,20px) scale(.92);opacity:0;transition:.28s cubic-bezier(.2,1.6,.4,1);width:min(88vw,420px);box-sizing:border-box;padding:14px 18px;border-radius:18px;background:linear-gradient(180deg,#2b1a8cee,#160c55ee);border:2px solid #ffffff55;box-shadow:0 10px 30px #000a;color:#fff;text-align:center;font-family:Nunito,system-ui,sans-serif}
#cine.has-card .cine-card{opacity:1;transform:translate(-50%,0) scale(1)}
#cine .cine-card small{display:block;font-weight:900;letter-spacing:3px;font-size:12px;color:#ff6b6b}
#cine .cine-card small:empty,#cine .cine-card p:empty{display:none}
#cine .cine-card b{display:block;font-family:'Russo One',sans-serif;font-weight:400;font-size:22px;color:#ffe45c;text-shadow:0 2px 0 #000}
#cine .cine-card p{margin:6px 0 0;font-size:15px;font-weight:700;line-height:1.3}
#cine .cine-card button{display:none;pointer-events:auto;margin:12px auto 0;padding:10px 34px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffe45c,#ffb02e);color:#3a1c00;font-weight:900;font-size:17px;box-shadow:0 4px 0 #b86e00;cursor:pointer}
#cine.ask .cine-card button{display:block;animation:breathe 1.6s ease-in-out infinite}
#cine.big .cine-card{bottom:auto;top:16vh;background:none;border:0;box-shadow:none}
#cine.big .cine-card b{font-size:clamp(30px,8vw,54px);-webkit-text-stroke:3px #3a0010;paint-order:stroke fill;color:#ff5a4f;letter-spacing:1px;animation:bossName .5s cubic-bezier(.2,1.8,.4,1)}
#cine.big .cine-card small{font-size:16px;color:#fff;text-shadow:0 2px 0 #000}
@keyframes bossName{0%{transform:scale(2.2);opacity:0}}
#c.cine-shake{animation:cineShake .6s linear}
@keyframes cineShake{10%{translate:-7px 3px}20%{translate:6px -4px}30%{translate:-5px -3px}40%{translate:5px 4px}55%{translate:-3px 2px}70%{translate:2px -2px}85%{translate:-1px 1px}100%{translate:0 0}}
.tut-up{display:grid;gap:4px;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:linear-gradient(120deg,#ffb02e,#ff5fa8);color:#fff;text-align:center;box-shadow:0 0 22px #ffe45c66;animation:pop .45s cubic-bezier(.2,1.8,.4,1)}
.tut-up b{font-family:'Russo One',sans-serif;font-weight:400;font-size:20px}.tut-up span{font-size:13px;font-weight:800}
body:has(#cine.on) #toast,body:has(#cine.on) #tutorialTip{opacity:0!important;visibility:hidden}
#cine.big.low .cine-card{top:auto;bottom:15vh}

/* v038: loading screen of a fight (loader.js). Appears only if loading takes longer than a moment. */
#locationLoading.ll{position:fixed!important;inset:0!important;left:0!important;bottom:0!important;transform:none!important;z-index:90!important;display:grid;place-items:center;padding:0!important;border:0!important;border-radius:0!important;background:radial-gradient(ellipse at 50% 40%,#2a1b8c,#0b0630 70%)!important;color:#fff;font-family:Nunito,system-ui,sans-serif;opacity:0;animation:llIn .3s ease .25s forwards}
@keyframes llIn{to{opacity:1}}
.ll-box{display:grid;justify-items:center;gap:8px;width:min(88vw,460px);text-align:center}
.ll-box small{font-weight:900;letter-spacing:4px;font-size:12px;color:#ffe45c}
.ll-box b{font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(26px,5vw,40px);line-height:1.1;text-shadow:0 3px 0 #000}
.ll-box em{font-style:normal;font-weight:800;color:#c8bfff}
.ll-bar{width:100%;height:14px;margin-top:14px;border-radius:10px;background:#ffffff1c;border:2px solid #ffffff33;overflow:hidden}
.ll-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#ffb02e,#ffe45c);box-shadow:0 0 14px #ffe45c99;transition:width .25s}
.ll-pct{font-weight:900;font-size:15px}
.ll-tip{margin:18px 0 0;padding:12px 16px;border-radius:14px;background:#ffffff12;border:1px solid #ffffff26;font-weight:700;font-size:14px;line-height:1.35;color:#e7e0ff}
.ll-tip::before{content:"СОВЕТ";display:block;margin-bottom:4px;font-size:11px;font-weight:900;letter-spacing:2px;color:#7dffb8}

/* ===== v038: PC / 16:9 menu (html.wide is set by ui-plus.js when the screen is wide and landscape) ===== */
html.wide #panel.menu{width:100%;max-width:none;box-shadow:none}

html.wide #panel.menu .m-body{width:100%;padding:18px max(24px,calc(50% - 600px)) 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:min-content;column-gap:26px;row-gap:12px;align-content:start}
html.wide #panel.menu .m-body>*{grid-column:1/-1;margin-top:0!important;margin-bottom:0!important;min-width:0}
html.wide #panel.menu .m-nav{grid-template-columns:repeat(2,minmax(0,170px)) minmax(0,220px) repeat(2,minmax(0,170px));justify-content:center}
/* home: the island on the left, everything to press on the right */
html.wide #panel[data-route=home] .m-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-content:center}
html.wide #panel[data-route=home] .m-body>*{grid-column:2}
html.wide #panel[data-route=home] .m-body>.h-head{grid-column:1;grid-row:1}
html.wide #panel[data-route=home] .m-body>.m-isle{grid-column:1;grid-row:2/span 12;min-height:min(62vh,560px)!important;padding-top:0}
html.wide #panel[data-route=home] .m-body>.m-hint:empty{display:none}
/* hero: the hero and his stats on the left, the backpack on the right (scrolls on its own) */
html.wide #panel[data-route=hero] .m-body{overflow:hidden;grid-template-rows:auto auto auto 1fr}
html.wide #panel[data-route=hero] .m-body>.m-title{grid-column:1;grid-row:1}
html.wide #panel[data-route=hero] .m-body>.m-gear{grid-column:1;grid-row:2}
html.wide #panel[data-route=hero] .m-body>.m-stats{grid-column:1;grid-row:3}
html.wide #panel[data-route=hero] .m-body>.m-card{grid-column:1;grid-row:4;align-self:start}
html.wide #panel[data-route=hero] .m-body>.xp-test{grid-column:1;grid-row:5}
html.wide #panel[data-route=hero] .m-body>.m-inv{grid-column:2;grid-row:1/span 5;max-height:calc(100dvh - 190px);overflow-y:auto}
/* workshop: the chosen item on the left, the list on the right */
html.wide #panel[data-route=workshop] .m-body{overflow:hidden}
html.wide #panel[data-route=workshop] .m-body>*{grid-column:1}
html.wide #panel[data-route=workshop] .m-body>.m-inv{grid-column:2;grid-row:1/span 9;max-height:calc(100dvh - 190px);overflow-y:auto}
/* development: points and the advice on the left, the list on the right */
html.wide #panel[data-route=dev] .m-body{overflow:hidden}
html.wide #panel[data-route=dev] .m-body>*{grid-column:1}
html.wide #panel[data-route=dev] .m-body>.m-tabs{grid-column:2;grid-row:1}
html.wide #panel[data-route=dev] .m-body>.m-list{grid-column:2;grid-row:2/span 6;max-height:calc(100dvh - 250px);overflow-y:auto}
html.wide #panel[data-route=dev] .m-body>.m-note{grid-column:2}
/* shop: title and tabs across, the rest in two columns */
html.wide #panel[data-route=shop] .m-body>*{grid-column:auto}
html.wide #panel[data-route=shop] .m-body>.m-title,html.wide #panel[data-route=shop] .m-body>.m-tabs{grid-column:1/-1}
html.wide #panel[data-route=shop] .m-body>.xp-gift{align-self:center}
/* patrol */
html.wide #panel[data-route=patrol] .m-body>*{grid-column:auto}
html.wide #panel[data-route=patrol] .m-body>.h-head,html.wide #panel[data-route=patrol] .m-body>.xp-pic,html.wide #panel[data-route=patrol] .m-body>.xp-line,html.wide #panel[data-route=patrol] .m-body>.xp-bar{grid-column:1}
html.wide #panel[data-route=patrol] .m-body>.xp-card,html.wide #panel[data-route=patrol] .m-body>button{grid-column:2}
html.wide #panel[data-route=home] .m-body>.m-isle{--ih:min(60vh,540px);height:var(--ih)!important;align-self:center}
html.wide #panel.menu .m-top{width:auto;max-width:1200px;margin-left:max(12px,calc(50% - 600px))!important;margin-right:max(12px,calc(50% - 600px))!important}
html.wide #panel.menu .m-body{grid-auto-flow:row dense}
html.wide #panel.menu .m-body{align-items:start}
html.wide #panel[data-route=hero] .m-body{grid-template-rows:auto auto auto auto 1fr}
#locationLoading.ll{top:0!important;right:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important}
/* v039: hero screen on PC — two columns with their own scroll */
html.wide #panel[data-route=hero] .m-body{overflow:hidden;grid-template-rows:minmax(0,1fr)!important;height:100%}
html.wide #panel[data-route=hero] .m-body>.hx-left,html.wide #panel[data-route=hero] .m-body>.hx-right{grid-row:1;display:flex;flex-direction:column;gap:12px;min-height:0;max-height:100%;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#2a63c7 transparent}
html.wide #panel[data-route=hero] .m-body>.hx-left{grid-column:1}
html.wide #panel[data-route=hero] .m-body>.hx-right{grid-column:2}
html.wide #panel[data-route=hero] .hx-right>.m-inv{max-height:none;overflow:visible;flex:none}
html.wide #panel[data-route=hero] .hx-left>*,html.wide #panel[data-route=hero] .hx-right>*{margin:0!important;flex:none}
/* v039: home on PC — the right column stands in the middle of the screen, next to the island */
html.wide #panel[data-route=home] .m-body{height:100%;align-content:stretch;grid-template-rows:minmax(0,1fr) repeat(8,auto) minmax(0,1fr);row-gap:12px}
html.wide #panel[data-route=home] .m-body>.h-head{grid-column:1;grid-row:1;align-self:start}
html.wide #panel[data-route=home] .m-body>.m-isle{grid-column:1;grid-row:2/10;align-self:center}
html.wide #panel[data-route=home] .m-body>.xp-unlock{grid-row:2}
html.wide #panel[data-route=home] .m-body>.m-stage{grid-row:3}
html.wide #panel[data-route=home] .m-body>.goal-home{grid-row:4}
html.wide #panel[data-route=home] .m-body>.xp-row{grid-row:5}
html.wide #panel[data-route=home] .m-body>.m-play{grid-row:6}
html.wide #panel[data-route=home] .m-body>.xp-endless{grid-row:7}
html.wide #panel[data-route=home] .m-body>.m-ghost{grid-row:8}
html.wide #panel[data-route=home] .m-body>.extra-links{grid-row:9}
html.wide #panel[data-route=home] .m-body>.m-hint{display:none}
html.wide #panel[data-route=home] .m-body>.m-isle{grid-row:1/11;z-index:0}
html.wide #panel[data-route=home] .m-body>.h-head{position:relative;z-index:1}
/* v039: upgrade cards — no pale header strip: the name sits on the card, rarity is a coloured rim and a glow on top */
#panel .u-card{border-color:color-mix(in srgb,var(--rc) 55%,#06163c)!important;box-shadow:inset 0 4px 0 var(--rc),inset 0 26px 30px -22px color-mix(in srgb,var(--rc) 70%,transparent),0 6px 0 #04102f!important}
#panel .u-card>b{background:none!important;border:0!important;color:#fff!important;text-align:center!important;padding:14px 34px 6px!important;font-family:'Russo One',sans-serif;font-weight:400;font-size:16px!important;text-shadow:0 2px 0 #06163c,0 0 10px #000a!important}
/* v039: cinematics — no button; a hint after 2.5 s, any key or tap continues */
#c{will-change:auto}
#cine .cine-hint{display:block;margin-top:10px;font-style:normal;font-weight:800;font-size:13px;color:#ffe45c;opacity:0;transition:opacity .4s}
#cine.ask .cine-hint{opacity:1;animation:hintPulse 1.2s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.45}}
/* v039: test version (?test) */
.tm-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:2px dashed #7dffb8;border-radius:14px;background:#0b3a2a99;order:20}
.tm-row span{font-weight:900;font-size:12px;letter-spacing:2px;color:#7dffb8}
.tm-row button{flex:1;padding:10px;border:0;border-radius:11px;background:linear-gradient(180deg,#7dffb8,#22c777);color:#063a1c;font-weight:900;font-size:15px;box-shadow:0 4px 0 #11804a}
html.wide #panel[data-route=home] .m-body>.tm-row{grid-column:2;grid-row:9}
/* v039: ask to go back to an unfinished fight */
#resumeAsk{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:#05031acc;backdrop-filter:blur(4px);animation:llIn .25s ease forwards}
.ra-box{display:grid;justify-items:center;gap:6px;width:min(90vw,420px);padding:22px 20px 16px;border-radius:22px;border:3px solid #ffe45c;background:linear-gradient(180deg,#2b1a8c,#160c55);box-shadow:0 0 40px #ffe45c55,0 10px 0 #0b0630;text-align:center;color:#fff;font-family:Nunito,system-ui,sans-serif;animation:pop .45s cubic-bezier(.2,1.8,.4,1)}
.ra-box>small{font-weight:900;letter-spacing:3px;font-size:12px;color:#ffe45c}
.ra-box>b{font-family:'Russo One',sans-serif;font-weight:400;font-size:28px;text-shadow:0 3px 0 #000}
.ra-box>em{font-style:normal;font-weight:800;color:#c8bfff}
.ra-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin:12px 0 6px}
.ra-stats span{display:grid;justify-items:center;gap:2px;padding:8px 4px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff26;font-size:11px;font-weight:700;color:#c8bfff}
.ra-stats i{font-style:normal;font-size:18px}.ra-stats b{font-size:16px;color:#fff;font-weight:900}
.ra-box .m-play{width:100%;margin-top:6px}
.ra-later{border:0;background:none;color:#e7e0ff;font-weight:800;font-size:15px;padding:8px 18px;cursor:pointer}
html.wide #panel[data-route=home] .m-body{grid-template-rows:minmax(0,1fr) repeat(9,auto) minmax(0,1fr)}
html.wide #panel[data-route=home] .m-body>.m-isle{grid-row:1/12}
html.wide #panel[data-route=home] .m-body>.tm-row{grid-row:10}

/* ===== v040 ===== */
/* home on PC: no scrollbar appearing a moment later (it pushed the buttons left) */
html.wide #panel[data-route=home] .m-body{overflow:hidden;scrollbar-gutter:stable both-edges}
html.wide #panel.menu .m-body{scrollbar-gutter:stable}
/* the «received» card: nothing behind it reacts (it closes on any tap) */
#panel:has(.m-card.got) button,#panel:has(.m-card.got) .m-nav,#panel:has(.m-card.got) select{pointer-events:none!important}
#panel .m-card.got,#panel .m-card.got button{pointer-events:auto!important}
/* v040: picked item card in the fight */
.loot-toast{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:16px;border:3px solid var(--rc);background:linear-gradient(180deg,#2b1a8cf0,#160c55f0);box-shadow:0 0 26px color-mix(in srgb,var(--rc) 60%,transparent),0 6px 0 #0b0630;color:#fff;font-family:Nunito,system-ui,sans-serif;pointer-events:none;animation:lootIn .45s cubic-bezier(.2,1.6,.4,1)}
.loot-toast img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 4px #0008)}
.loot-toast small{display:block;font-weight:900;font-size:11px;letter-spacing:2px;color:var(--rc)}
.loot-toast b{display:block;font-family:'Russo One',sans-serif;font-weight:400;font-size:19px}
.loot-toast em{display:block;font-style:normal;font-size:12px;font-weight:700;color:#d8d0ff}
.loot-toast.out{opacity:0;transform:translate(-50%,-14px);transition:.4s}
@keyframes lootIn{0%{opacity:0;transform:translate(-50%,-30px) scale(.8)}}
/* v040: endless button — taller, glowing ∞, a moving shine */
.xp-endless{position:relative;overflow:hidden;padding:14px 18px!important;border:3px solid #ffffff55!important;border-radius:18px!important;box-shadow:0 6px 0 #4a1a9c,0 0 24px #c86bff66!important}
.xp-endless>b{width:54px!important;height:54px!important;font-size:38px!important;background:radial-gradient(circle,#ffffff55,#ffffff14 70%)!important;box-shadow:0 0 18px #ffffff66,inset 0 0 0 2px #ffffff55;animation:endlessGlow 2.2s ease-in-out infinite!important}
.xp-endless span b{font-size:20px!important;text-shadow:0 2px 0 #4a1a9c}
.xp-endless span small{font-size:13px!important}
.xp-endless::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,#fff0,#fff6,#fff0);transform:skewX(-20deg);animation:endlessShine 3.4s ease-in-out infinite}
@keyframes endlessGlow{50%{box-shadow:0 0 30px #fff,inset 0 0 0 2px #fff9;transform:scale(1.06)}}
@keyframes endlessShine{0%,60%{left:-80px}100%{left:110%}}
/* v040: shop and patrol on PC — two columns */
html.wide #panel[data-route=shop] .m-body,html.wide #panel[data-route=patrol] .m-body{grid-auto-flow:row;align-content:start}
html.wide #panel[data-route=shop] .m-body>.m-title,html.wide #panel[data-route=shop] .m-body>.m-tabs,html.wide #panel[data-route=patrol] .m-body>.h-head{grid-column:1/-1!important}
html.wide #panel[data-route=shop] .m-body>.hx-left,html.wide #panel[data-route=patrol] .m-body>.hx-left{grid-column:1!important;display:flex;flex-direction:column;gap:12px;min-width:0}
html.wide #panel[data-route=shop] .m-body>.hx-right,html.wide #panel[data-route=patrol] .m-body>.hx-right{grid-column:2!important;display:flex;flex-direction:column;gap:12px;min-width:0}
html.wide #panel[data-route=shop] .hx-left>*,html.wide #panel[data-route=shop] .hx-right>*,html.wide #panel[data-route=patrol] .hx-left>*,html.wide #panel[data-route=patrol] .hx-right>*{margin:0!important}
html.wide #panel[data-route=shop] .hx-left{align-items:center}
html.wide #panel[data-route=shop] .hx-left>*{width:100%}
/* patrol: a real scene card, a thick progress bar, loot tiles */
#panel[data-route=patrol] .xp-pic{position:relative;border-radius:18px;overflow:hidden;border:3px solid #ffffff44;box-shadow:0 8px 0 #0b0630,0 0 30px #5ef2ff33}
html.wide #panel[data-route=patrol] .xp-pic{height:min(46vh,380px)!important}
html.wide #panel[data-route=patrol] .xp-pic img{width:100%;height:100%;object-fit:cover}
#panel[data-route=patrol] .xp-pic span{font-size:15px!important;padding:8px 14px!important}
#panel[data-route=patrol] .xp-line{font-size:15px!important;text-align:center}
#panel[data-route=patrol] .xp-bar{height:16px!important;border-radius:10px!important;border:2px solid #ffffff33;background:#0b0630aa!important;overflow:hidden}
#panel[data-route=patrol] .xp-bar i{border-radius:8px;background:linear-gradient(90deg,#3ee8a0,#a6ffcf)!important;box-shadow:0 0 14px #7dffb8aa}
#panel[data-route=patrol] .bank{padding:16px 10px!important;border:3px solid #ffe45c66!important;background:linear-gradient(180deg,#2b1a8c,#1b0f66)!important}
#panel[data-route=patrol] .bank>div{display:grid;justify-items:center;gap:2px}
#panel[data-route=patrol] .bank img{width:40px!important;height:40px!important}
#panel[data-route=patrol] .bank b{font-size:26px!important}
#panel[data-route=patrol] .m-play{font-size:20px!important;padding:16px!important}

/* v041 — tab coach marks (coach.js): pulsing ring + bubble, never catches clicks */
#coach{position:fixed;inset:0;z-index:960;pointer-events:none;opacity:0;transition:opacity .25s}
#coach.on{opacity:1}
#coach *{pointer-events:none}
#coach .co-ring{position:fixed;border-radius:16px;border:3px solid #ffe24a;box-shadow:0 0 0 4000px rgba(8,6,24,.38),0 0 18px 4px rgba(255,214,60,.75),inset 0 0 12px rgba(255,214,60,.5);animation:coRing 1.1s ease-in-out infinite}
@keyframes coRing{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
#coach .co-tip{position:fixed;padding:11px 14px;border-radius:14px;background:linear-gradient(180deg,#fff7c9,#ffd84a);color:#2a1a05;font:700 16px/1.25 'Golos Text',system-ui,sans-serif;text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.45);animation:coBob 1.4s ease-in-out infinite}
#coach .co-tip::after{content:'';position:absolute;left:calc(var(--ax) - 9px);bottom:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#ffd84a}
#coach .co-tip.below::after{bottom:auto;top:-9px;border:9px solid transparent;border-top:0;border-bottom-color:#fff7c9}
@keyframes coBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#coach .co-hand{position:fixed;font-size:30px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));animation:coTap 1.1s ease-in-out infinite}
@keyframes coTap{0%,100%{transform:translate(6px,14px)}50%{transform:translate(0,4px) scale(.92)}}

/* v041: shop showcase cards like the upgrade cards — rarity is a coloured rim and a glow on top, props as "name … value" rows */
#panel .s-offer{--rc:#c9d6e8;border:2px solid color-mix(in srgb,var(--rc) 55%,#06163c)!important;border-radius:16px!important;box-shadow:inset 0 4px 0 var(--rc),inset 0 34px 34px -26px color-mix(in srgb,var(--rc) 70%,transparent),0 5px 0 #04102f!important;align-content:start;padding:10px 7px 8px!important}
#panel .s-offer.sr1{--rc:#7fe86a}#panel .s-offer.sr2{--rc:#63b7ff}#panel .s-offer.sr3{--rc:#c58bff}#panel .s-offer.sr4{--rc:#ffd15c}
#panel .s-offer .it-dh b{font-family:'Russo One',sans-serif;font-weight:400;font-size:12.5px!important;color:#fff!important;text-shadow:0 2px 0 #06163c}
#panel .s-offer .it-dh small{color:var(--rc)!important;font-weight:700}
#panel .s-offer .it-props{gap:3px!important;margin-top:2px!important}
#panel .s-offer .it-props li{display:flex!important;justify-content:space-between;align-items:baseline;gap:4px;padding:3px 5px!important;border-radius:7px;background:#ffffff0d!important;text-align:left!important}
#panel .s-offer .it-props li span{font-size:10px;line-height:1.1;opacity:.85;min-width:0;overflow-wrap:anywhere}
#panel .s-offer .it-props li b{font-size:11.5px!important;white-space:nowrap;color:#9df07a}
#panel .s-offer .m-yellow[disabled]{filter:saturate(.25) brightness(.8)}
#panel .s-offer .it-props li{flex-wrap:wrap}#panel .s-offer .it-props li span{flex:1 1 56px}#panel .s-offer .it-props li b{margin-left:auto;white-space:normal;text-align:right}
#panel .s-offer .it-dh b{hyphens:auto}

/* v042: finale banner — a dark ribbon behind the words, stats line, slower */
.xp-finale.v42{gap:0;background:radial-gradient(circle at 50% 45%,#ffe45c40,#1a0d6acc 55%,#07032eee)}
.xp-finale.v42.lose{background:radial-gradient(circle at 50% 45%,#ff3d5a40,#30061acc 55%,#12020aee)}
.xp-finale.v42 .fl-band{position:relative;display:grid;justify-items:center;gap:8px;padding:22px 9vw 18px;width:100vw;background:linear-gradient(90deg,#0b064000,#0b0640e6 18%,#0b0640e6 82%,#0b064000);border-block:2px solid #ffe45c88;animation:finBand .45s cubic-bezier(.2,1.4,.4,1)}
.xp-finale.v42.lose .fl-band{border-color:#ff8fa388;background:linear-gradient(90deg,#2a050f00,#2a050fe6 18%,#2a050fe6 82%,#2a050f00)}
.xp-finale.v42 b{font-size:clamp(54px,14vw,110px);color:#fff4b0;background:linear-gradient(180deg,#fffbe0 10%,#ffd23a 60%,#ff9d1a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 5px 0 #1b0f66) drop-shadow(0 0 24px #ffb43a99);animation:finText .9s cubic-bezier(.2,1.6,.4,1)}
.xp-finale.v42.lose b{background:linear-gradient(180deg,#ffe0e6,#ff7d95 60%,#d8264a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 #3a0614) drop-shadow(0 0 24px #ff3d5a88)}
.xp-finale.v42 small{font-size:clamp(18px,4.6vw,26px);padding:6px 22px;background:#ffe45c;color:#1b0f66;border:0;text-shadow:none;border-radius:999px;animation:rise .45s ease-out .45s backwards}
.xp-finale.v42.lose small{background:#ff8fa3;color:#3a0614}
.xp-finale.v42 p{display:flex;gap:22px;margin:2px 0 0;font:800 clamp(16px,4vw,22px)/1 'Golos Text',sans-serif;color:#fff;text-shadow:0 2px 0 #000;animation:rise .45s ease-out .8s backwards}
@keyframes finBand{0%{transform:scaleY(0);opacity:0}}
/* v042: the found-item card is bigger and pops in with a flash */
.loot-toast{top:110px;padding:12px 22px 12px 14px;gap:14px;animation:lootIn .55s cubic-bezier(.2,1.6,.4,1)}
.loot-toast img{width:72px;height:72px;animation:lootImg 1.2s ease-out}
.loot-toast b{font-size:22px}.loot-toast small{font-size:13px}.loot-toast em{font-size:13px}
@keyframes lootIn{0%{transform:translateX(-50%) scale(.3);opacity:0}60%{transform:translateX(-50%) scale(1.08)}100%{transform:translateX(-50%) scale(1)}}
@keyframes lootImg{0%{filter:brightness(4) drop-shadow(0 0 18px #fff)}100%{filter:drop-shadow(0 3px 4px #0008)}}
/* v042: coach — a drawn white hand with a dark outline and a tap ripple (the emoji was hard to see) */
#coach .co-hand{position:fixed;width:52px;height:52px;font-size:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(255,226,74,.9));animation:coTap2 1.1s ease-in-out infinite;transform-origin:30% 15%}
@keyframes coTap2{0%,100%{transform:translate(10px,22px) rotate(-12deg)}45%{transform:translate(0,2px) rotate(-12deg) scale(.9)}55%{transform:translate(0,2px) rotate(-12deg) scale(.9)}}
#coach .co-tap{position:fixed;width:48px;height:48px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 12px #ffe24a;opacity:0;animation:coRip 1.1s ease-out infinite}
@keyframes coRip{0%,40%{transform:scale(.2);opacity:0}50%{opacity:1}100%{transform:scale(1.4);opacity:0}}
#panel button.co-off{opacity:.35;filter:grayscale(1);pointer-events:none}

/* v042: level-up cards in a row on a phone too (left → right), compact */
@media(max-width:560px){
 #panel .u-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;align-items:stretch}
 #panel .u-card{padding:0 0 7px!important;border-radius:14px!important;min-width:0;align-content:start}
 #panel .u-card>b{padding:9px 4px 5px!important;font-size:12px!important;line-height:1.12;text-align:center!important;overflow-wrap:anywhere;hyphens:auto}
 #panel .u-card .u-art{width:50px!important;height:50px!important;margin:0 0 6px!important;border-radius:12px!important}
 #panel .u-card .u-art img,#panel .u-card .u-art svg{width:40px!important;height:40px!important}
 #panel .u-card>p{padding:0 5px!important;font-size:10.5px!important;line-height:1.22;min-height:0}
 #panel .u-card>p.change{font-size:10.5px!important;margin-top:4px}
 #panel .u-card>.u-gear{font-size:9.5px!important;padding:3px 4px!important;margin:4px 4px 0!important;gap:3px!important;line-height:1.15}
 #panel .u-card>.u-gear img{width:14px!important;height:14px!important}
 #panel .u-card>small{margin:6px 4px 0!important;padding:3px 5px!important;font-size:9px!important;letter-spacing:.2px!important;text-align:center!important}
 #panel .u-card>kbd{width:18px!important;height:18px!important;font-size:10px!important;right:4px!important;top:4px!important}
 #panel .u-card .feel-offer-hint,#panel .u-card>em{font-size:9px!important;margin:3px 4px 0!important;text-align:center}
}
@media(max-width:560px){#panel:has(>.u-cards),#panel:has(.u-cards){padding-left:8px!important;padding-right:8px!important;width:calc(100vw - 12px)!important;max-width:none!important}#panel .u-card>kbd{display:none!important}#panel .u-card>b{padding-top:10px!important}}

/* v044: the top bar never pushes the sound button off a narrow phone */
.m-top{min-width:0}.m-top .m-lv{min-width:0;flex:1 1 auto}.m-top .m-cur{flex:0 1 auto;min-width:0}.m-top .m-ico{flex:0 0 auto}
@media(max-width:380px){.m-top{gap:5px!important;padding-left:6px!important;padding-right:6px!important}.m-top .m-cur{gap:3px!important}.m-top .m-cur b{font-size:13px!important}.m-top .m-lv b{font-size:12px!important}}

/* v046: salvage buttons */
#panel .xp-salv{color:#ffcf6a!important}#panel .xp-salv.sure,#panel .xp-salv-all.sure{background:#7a2a1a!important;color:#fff!important;border-color:#ff8a5a!important}
#panel .m-inv>header{flex-wrap:wrap;gap:6px}#panel .xp-salv-all{margin-left:auto;padding:5px 10px!important;font-size:12px!important;min-height:0!important;width:auto!important}

/* ===== v049: UI polish from the audit ===== */
/* PC: the menus were small with an empty lower half — scale the whole panel on wide screens */
@media(min-width:1280px){html.wide #panel{zoom:1}}
@media(min-width:1700px){html.wide #panel{zoom:1.1}}   /* v053: smaller UI on PC — more on screen, less scrolling */
/* readable small text: tab labels, «Новое» badges, level-up card details */
.m-nav span{font-size:11.5px}
.it u,#panel.r-result .r-loot .it em,.it em{font-size:9px!important}
@media(max-width:560px){#panel .u-card>p{font-size:11px!important}#panel .u-card>.u-gear{font-size:10.5px!important}#panel .u-card>small{font-size:10px!important}}
/* the mastery label sat on the card border on home */
.goal-home .mastery-card{padding:12px 14px!important}.mastery-card small{margin-top:2px;line-height:1.2}
/* showcase names: no «пи-столет» hyphenation, break at spaces only */
#panel .s-offer .it-dh b{hyphens:manual!important;overflow-wrap:normal!important;word-break:normal!important;font-size:11.5px!important}
/* resume prompt: «100 / 100» stays on one line */
.ra-stats b{white-space:nowrap}.ra-stats span{padding:8px 2px}

/* v051 */
.xp-endless{margin-top:12px!important}

/* v052 patrol */
.pt-pic{height:132px}.pt-chip{position:absolute;left:10px;top:10px;right:auto!important;bottom:auto!important;width:auto;padding:5px 10px;border-radius:999px;font:800 12px/1 'Golos Text',sans-serif;letter-spacing:.5px;color:#fff;background:#0b0640cc;border:1px solid #ffffff55}
.pt-chip.go{background:#1d6fe0cc}.pt-chip.ok{background:#1fa35acc}.pt-chip.full{background:#d8651ecc}.pt-chip.off{background:#555a77cc}
.pt-lv{position:absolute;right:10px;top:10px;left:auto!important;bottom:auto!important;width:auto;padding:5px 10px;border-radius:10px;background:#0b0640cc;border:1px solid #ffffff55;font:800 13px/1 'Russo One',sans-serif;color:var(--j-act)}
.pt-pic>span:not(.pt-chip):not(.pt-lv){display:none}
.pt-pic img{animation:none!important;opacity:1!important}
.pt-prog{gap:6px}.pt-ln{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.pt-ln b{font-family:'Russo One',sans-serif;font-size:22px;color:var(--j-act)}.pt-ln span{font-size:13px;color:var(--c-dim)}.pt-ln em{margin-left:auto;font-style:normal;font-size:12px;color:#9ad8ff}
.pt-bar{position:relative;height:14px}.pt-bar i{display:block;height:100%;background:linear-gradient(90deg,#4fd1ff,#8c6bff)}.pt-bar u{position:absolute;top:0;width:2px;height:100%;background:#ffffff88}
.pt-prog small,.pt-rate{font-size:12px;color:var(--c-dim)}.pt-how p{margin:4px 0;font-size:13px;line-height:1.35}
.pt-tbl{width:100%;border-collapse:collapse;font-size:13px}.pt-tbl th{font-weight:800;color:var(--c-dim);text-align:right;padding:2px 6px}.pt-tbl th:first-child{text-align:left}.pt-tbl td{padding:4px 6px;text-align:right;border-top:1px solid #ffffff22}.pt-tbl td:first-child{text-align:left;color:#fff}.pt-tbl td.pt-up{color:#7dffb0;font-weight:800}
.pt-cost{margin:6px 0 0;font-size:14px}.pt-cost small{color:var(--c-dim)}

/* v052 ui audit */
html.wide #panel[data-route=home] .m-body{grid-template-rows:max-content repeat(9,max-content) max-content!important;align-content:start!important;overflow:auto!important;row-gap:10px!important}
html.wide #panel[data-route=home] .m-body>.m-isle{grid-row:1/12;align-self:start!important}
html.wide #panel[data-route=home] .m-body>.xp-endless{padding:8px 14px!important}
.m-body{padding-bottom:28px!important}
@media (max-height:780px){.xp-show{align-content:start!important;overflow:auto!important;padding:14px 18px 20px!important}.xp-show .case-halo{height:110px!important}.xp-show .xs-title{font-size:24px!important}.xp-show .case-reward{padding:12px 14px!important}.xp-show .case-halo img{max-height:100px}}
.u-card>b{padding-right:40px!important;overflow-wrap:anywhere}
.u-sub,.m-note,.m-inv header small,.u-card kbd,.u-card small{font-family:'Golos Text','Segoe UI',sans-serif!important}
html.wide #panel[data-route=patrol] .xp-pic{height:160px!important}
.pt-cost.xp-bad{font-weight:700}
#panel .m-nav button.locked{opacity:.55}
#panel[data-route=patrol] .m-yellow{font-size:19px!important;padding:12px 8px!important}

#panel[data-route=chest]{overflow:auto!important}
@media (max-height:780px){#panel[data-route=chest] .case-halo{height:104px!important}#panel[data-route=chest] .case-halo img{max-height:96px}#panel[data-route=chest] .case-reward{padding:10px 12px!important}#panel[data-route=chest] .case-title{font-size:22px!important;margin:4px 0!important}#panel[data-route=chest] .m-body{padding-top:4px!important}}

/* v052: single-column screens stay centred and narrow on wide monitors */
html.wide .xp-lockpage{max-width:620px;margin:0 auto}html.wide .xp-lockpage .m-play{max-width:420px}
html.wide #panel[data-route=more] .m-body>*,html.wide #panel[data-route=goals] .m-body>*,html.wide #panel[data-route=settings] .m-body>*{max-width:760px;margin-left:auto!important;margin-right:auto!important;width:100%}

/* v052c polish */
html.wide #panel[data-route=home] .m-body>.m-stage{grid-row:1}html.wide #panel[data-route=home] .m-body>.xp-unlock{grid-row:2}html.wide #panel[data-route=home] .m-body>.goal-home{grid-row:3}html.wide #panel[data-route=home] .m-body>.xp-row{grid-row:4}html.wide #panel[data-route=home] .m-body>.m-play{grid-row:5}html.wide #panel[data-route=home] .m-body>.xp-endless{grid-row:6}html.wide #panel[data-route=home] .m-body>.m-ghost{grid-row:7}html.wide #panel[data-route=home] .m-body>.extra-links{grid-row:8}html.wide #panel[data-route=home] .m-body>.tm-row{grid-row:9}html.wide #panel[data-route=home] .m-body>.h-head{grid-row:1}
#panel[data-redraw] .m-card,#panel[data-redraw] .it,#panel[data-redraw] .xp-card,#panel[data-redraw] .xp-cmp,#panel[data-redraw] .h-head,#panel[data-redraw] .m-stats,#panel[data-redraw] .m-gear,#panel[data-redraw] .m-inv,#panel[data-redraw] .d-row,#panel[data-redraw] .m-play,#panel[data-redraw] .m-yellow,#panel[data-redraw] .xp-row,#panel[data-redraw] .m-stage,#panel[data-redraw] .goal-home,#panel[data-redraw] .xp-endless,#panel[data-redraw] .xp-ad,#panel[data-redraw] .m-isle{animation:none!important}
#panel[data-route=find]{overflow:auto!important}@media (max-height:820px){#panel[data-route=find] .xp-cmp img{width:56px!important;height:56px!important}#panel[data-route=find] .xp-table{font-size:12.5px}}
.s-offer{box-shadow:none!important;grid-template-rows:auto auto 1fr auto auto!important;align-content:start}.s-offer .m-yellow{align-self:end;margin-top:6px!important;white-space:nowrap}.s-offer .it i{display:none}.s-offer .it-dh small{color:#ffd83d}.s-offer .it-dh small span{opacity:.28}
#panel .m-card,#panel .xp-card,#panel .it-dh b,#panel .u-card>b,#panel .m-note,#panel .h-head b{overflow-wrap:break-word}

/* v053 revive */
.rv{display:grid;justify-items:center;gap:8px;max-width:420px;margin:0 auto;text-align:center}
.rv-heart{width:92px;height:92px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#ff6a7a66,#ff6a7a00 70%);animation:breathe 1.6s ease-in-out infinite}.rv-heart img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 10px #0008)}
.rv-title{font-size:clamp(34px,9vw,52px)!important;margin:0!important}
.rv-sub{margin:0;font-size:14px;color:#e7e0ff;line-height:1.35}.rv-sub b{color:#ffe45c}
.rv-stats{display:flex;gap:14px;margin:4px 0 6px;font-size:12px;color:var(--c-dim)}.rv-stats b{display:block;font-family:'Russo One',sans-serif;font-size:18px;color:#fff}
.rv-btn{display:grid!important;gap:2px;padding:10px 18px!important;line-height:1.1}.rv-btn .rv-main{font-size:26px;letter-spacing:1px}.rv-btn small{font-size:12px;font-weight:700;opacity:.9;letter-spacing:0}
#panel[data-route=revive] .m-ghost{margin-top:2px}

/* v053: account skills — the list scrolls to its last row above the nav; a locked «+1» reads as a lock, not a broken button */
html.wide #panel[data-route=dev] .m-body>.m-list{max-height:calc(100dvh - 330px);padding-bottom:16px}
#panel[data-route=dev] .m-body{padding-bottom:110px!important}
.d-row .m-go:disabled{filter:none;opacity:1;background:#ffffff14!important;border-color:#ffffff33!important;box-shadow:none!important;color:#ffffff66!important;font-size:0}
.d-row .m-go:disabled::before{content:'';display:inline-block;width:18px;height:18px;background:url(icons/ui_lock.png) center/contain no-repeat}
.d-row{align-items:center}.d-row>div{display:grid;gap:2px}.d-row small{font-size:11px;color:#ffd83d}

/* v053: rank-up glow stays inside the row; the combo note on a card is two lines */
.d-row.xp-up{box-shadow:inset 0 0 0 2px var(--j-act),0 0 18px #ffe45c66!important;animation:none!important}
.feel-offer-hint{display:grid;gap:1px;margin:6px 8px 0;padding:6px 8px;border-radius:9px;background:#06163c99;font-size:11px;line-height:1.25;color:#cfe0ff;text-align:left}.feel-offer-hint b{color:#ffe45c;font-weight:800}.feel-offer-hint i{font-style:normal;color:#9ad8ff}

/* v053: «Развитие» on PC — one scrolling page, no inner box with its own scrollbar (it looked like a separate table and clipped) */
html.wide #panel[data-route=dev] .m-body{overflow:auto!important;align-content:start}
html.wide #panel[data-route=dev] .m-body>.m-list{max-height:none!important;overflow:visible!important;grid-row:2/span 20}
html.wide #panel[data-route=dev] .m-body>.m-note{grid-row:30}

/* v053i: readable upgrade cards; the small-screen layout shares one icon column. */
.r-title{text-shadow:0 3px 0 #06163c,0 8px 18px #0006!important;-webkit-text-stroke:1.5px #06163c!important}
#panel .notice{margin:10px 0 12px!important}
#panel:has(.u-cards){width:min(1120px,calc(100vw - 28px))!important;max-height:calc(100dvh - 28px)!important;overflow-y:auto!important;zoom:1!important}
#panel[data-route=upgrade] .m-body{overflow-y:auto!important;min-width:0}
#panel .u-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch;width:100%}
#panel .u-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "art" "desc" "change" "gear" "hint" "rar"!important;grid-template-rows:30px 94px minmax(36px,auto) minmax(46px,auto) auto minmax(82px,1fr) 28px!important;gap:5px;min-width:0;padding:12px 10px!important;justify-items:center;align-content:start;position:relative}
#panel .u-card>b{grid-area:name;display:flex!important;align-items:center;justify-content:center;min-height:0;width:100%;white-space:nowrap;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.15;padding:0 22px 0 4px!important;margin:0!important;text-align:center!important;font-size:clamp(12px,1.3vw,16px)!important}
#panel .u-card .u-art{grid-area:art;width:88px!important;height:88px!important;margin:0!important;align-self:center}
#panel .u-card .u-art img,#panel .u-card .u-art svg{width:72px!important;height:72px!important}
#panel .u-card>p{grid-area:desc;display:block;min-height:0;margin:0!important;padding:0 2px;font-size:13px!important;line-height:1.3;text-align:center;overflow-wrap:break-word}
#panel .u-card>p.change{grid-area:change;min-height:0;align-self:start}
#panel .u-card>p.gear-hint{grid-area:gear}
#panel .u-card>small{grid-area:rar;align-self:end;margin:0!important;padding:4px 7px!important;font-size:11px!important}
#panel .u-card kbd{left:auto;right:7px;top:7px;font-size:11px}
.power-recipes{margin:4px 0 10px!important;font-size:12px!important}.power-recipes summary{min-height:30px!important;padding:6px 0!important}
#panel .u-card .feel-offer-hint{grid-area:hint;align-self:start;display:grid;gap:5px;width:100%;min-width:0;margin:0!important;padding:7px 5px!important;border-radius:9px;background:#06163c99;font-size:11px!important;line-height:1.25;color:#dceaff;font-style:normal}
.feel-offer-hint .fh-row{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;white-space:nowrap}
.feel-offer-hint .fh-state{flex:none;color:#ffeaa2;font-size:11px}
.feel-offer-hint .fh-combo,.feel-offer-hint .fh-part{display:inline-flex;align-items:center;gap:4px;flex:none;min-width:0}
.feel-offer-hint .fh-part{padding:2px 4px;border-radius:7px;background:#ffffff12}
.feel-offer-hint .fh-part-name{font-size:11px;white-space:nowrap}
.feel-offer-hint .fh-link{flex:none;color:#cbe1ff;font-size:12px}
.feel-offer-hint .fh-row img,.feel-offer-hint .fh-row svg{width:22px!important;height:22px!important;flex:none}
.feel-offer-hint .fh-part u{text-decoration:none;color:#ffe45c;font-weight:800;flex:none}
.feel-offer-hint i{display:block;font-style:normal;text-align:center;font-size:11px;line-height:1.3;color:#c4e4ff}
#panel .u-card .feel-offer-hint.ready{background:#342600b8!important;border:1px solid #f6cf4c;color:#fff4c4}
#panel .u-card.combo-ready{border-color:#ffd83d!important;background:radial-gradient(ellipse at 50% 8%,#ffe58066,transparent 70%),linear-gradient(180deg,#805414,#39290e)!important;box-shadow:inset 0 0 32px #ffdf6644,0 0 0 2px #ffd83d,0 0 24px #ffd83d99,0 6px 0 #342005!important;animation:comboGlow 1.6s ease-in-out infinite alternate!important;outline:none;filter:none;color:#fff8d8}
#panel .u-card.combo-ready .u-art{background:linear-gradient(145deg,#ffdc58,#a66a14)!important;box-shadow:0 0 16px #ffd84d77,inset 0 0 0 2px #fff3a0}
#panel .u-card.combo-ready>p{color:#fff3d3}
#panel .u-card.combo-ready>p.change{color:#ffe994}
@keyframes comboGlow{from{box-shadow:inset 0 0 28px #ffdf6633,0 0 0 2px #ffd83d,0 0 18px #ffd83d66,0 6px 0 #342005}to{box-shadow:inset 0 0 42px #ffdf6666,0 0 0 2px #fff0a0,0 0 30px #ffd83dbb,0 6px 0 #342005}}
html.wide #panel[data-route=hero] .hx-left,html.wide #panel[data-route=hero] .hx-right{min-width:0;scrollbar-gutter:stable}
html.wide #panel[data-route=hero] .hx-left>*{min-width:0;max-width:100%}
@media(max-width:1000px){
 #panel:has(.u-cards){padding:12px!important}
 #panel .u-cards{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
 #panel .u-card{grid-template-columns:76px minmax(0,1fr)!important;grid-template-areas:"art name" "art desc" "art change" "gear gear" "hint hint" "rar rar"!important;grid-template-rows:24px auto auto auto 32px 18px!important;column-gap:10px;row-gap:3px;padding:8px 9px!important;justify-items:stretch}
 #panel .u-card>b{font-size:14px!important;justify-content:flex-start;text-align:left!important;padding-right:16px!important}
 #panel .u-card .u-art{width:76px!important;height:76px!important;justify-self:center}
 #panel .u-card .u-art img,#panel .u-card .u-art svg{width:64px!important;height:64px!important}
 #panel .u-card>p{font-size:12px!important;line-height:1.2;text-align:left;padding:0}
 #panel .u-card>p.gear-hint{grid-area:auto;grid-column:1/-1}
 #panel .u-card>small{justify-self:center;font-size:10px!important;padding:2px 6px!important}
 #panel .u-card .feel-offer-hint{padding:3px 5px!important;align-self:center}
 .feel-offer-hint i{display:none}
 .feel-offer-hint .fh-part-name{font-size:12px}
 .feel-offer-hint .fh-row img,.feel-offer-hint .fh-row svg{width:23px!important;height:23px!important}
 .power-recipes{font-size:11px!important;margin:2px 0 6px!important}
}
@media(prefers-reduced-motion:reduce){#panel .u-card.combo-ready{animation:none!important}}

/* v053j: volume controls are reachable from the speaker and from pause. */
#panel.r-soundsettings{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto}
.audio-controls{display:grid;gap:16px!important;text-align:left}
.audio-enable{margin:0!important;padding-bottom:10px;border-bottom:1px solid #ffffff28}
.audio-level{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;min-width:0;font:600 14px/1.3 'Golos Text',sans-serif;color:#f2f5ff}
.audio-level output{color:#ffe45c;font-variant-numeric:tabular-nums;font-weight:800;min-width:40px;text-align:right}
.audio-level input[type=range]{grid-column:1/-1;appearance:none;-webkit-appearance:none;width:100%;max-width:none;height:32px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;--volume:60%}
.audio-level input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,#ffd83d var(--volume),#07183e var(--volume));box-shadow:inset 0 0 0 1px #ffffff33}
.audio-level input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border:3px solid #fff0a3;border-radius:50%;background:#ffd83d;box-shadow:0 2px 5px #0006}
.audio-level input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:#07183e}
.audio-level input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:#ffd83d}
.audio-level input[type=range]::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff0a3;border-radius:50%;background:#ffd83d}
.audio-level input[type=range]:focus-visible{outline:2px solid #9bdfff;outline-offset:3px;border-radius:8px}
.audio-enable input[type=checkbox]{width:22px;height:22px;accent-color:#ffd83d}
@media(max-height:650px){#panel.r-soundsettings .audio-controls{gap:8px!important}#panel.r-soundsettings .audio-enable{padding-bottom:4px}}

/* ===== v054: ads and what they unlock (monet.js) ===== */
.mn-tv{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:6px;background:#fff;color:#2a1b8c;font-style:normal;font-size:11px;font-weight:900;vertical-align:-3px;box-shadow:0 2px 0 #0003}
.mn-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:0;border-radius:14px;padding:10px 14px;background:linear-gradient(180deg,#5fd0ff,#2a7fd6);color:#fff;font-weight:900;font-size:14px;box-shadow:0 4px 0 #174a8c;cursor:pointer;text-align:left}
.mn-btn small{display:block;font-size:11px;font-weight:700;opacity:.9}
.mn-btn.gold{background:linear-gradient(180deg,#ffe45c,#ffb02e);color:#3a1c00;box-shadow:0 4px 0 #b86e00}
.mn-btn.violet{background:linear-gradient(180deg,#d18bff,#7a3ad6);box-shadow:0 4px 0 #4a1a9c}
.mn-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0006}
.mn-big{width:100%;padding:14px 16px;font-size:17px}
.mn-big span{display:grid}
.mn-mini{padding:8px 10px;font-size:13px}
.mn-tag{display:inline-block;padding:6px 10px;border-radius:10px;background:#ffffff18;font-size:12px;font-weight:800;color:#e7e0ff}
.mn-note{margin:6px 0 0;font-size:12px;font-weight:800;color:#7dffb8;text-align:center}
.mn-done{padding:12px;border-radius:14px;background:#7dffb822;color:#7dffb8;font-weight:900;text-align:center}
.mn-home{display:grid;gap:8px;order:5}
.mn-buffs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mn-buff{display:flex;flex-direction:column;align-items:flex-start;padding:9px 12px;border-radius:14px;font-size:14px;font-weight:900}
button.mn-buff{flex-direction:row}
div.mn-buff{background:#ffffff14;border:2px solid #5fd0ff;color:#fff}
div.mn-buff.gold{border-color:#ffe45c}
div.mn-buff b{font-size:18px;color:#7dffb8}
div.mn-buff.off{opacity:.55;border-style:dashed}
.mn-quests{border-radius:14px;background:#ffffff10;border:1px solid #ffffff26;padding:6px 10px}
.mn-quests summary{cursor:pointer;font-weight:900;padding:4px 0}
.mn-q{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #ffffff14}
.mn-q span{flex:1;display:grid;gap:2px;position:relative}
.mn-q span i{display:block;height:5px;border-radius:4px;background:linear-gradient(90deg,#3ee8a0,#a6ffcf)}
.mn-q small{font-size:11px;color:#c8bfff}
.mn-q.got{opacity:.5}.mn-q em{font-style:normal;color:#7dffb8;font-weight:900}
.mn-x2{margin:8px 0}
.mn-up{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.mn-ws{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.mn-shop{display:grid;gap:10px}
.mn-ad button.mn-btn{margin-top:6px}
.mn-wheel{display:flex;align-items:center;gap:16px;padding:14px;border-radius:18px;background:linear-gradient(180deg,#2b1a8c,#1b0f66);border:3px solid #ffe45c66}
.mn-wheel>div:last-child{display:grid;gap:6px}
.mn-wheel b{font-family:'Russo One',sans-serif;font-weight:400;font-size:18px}
.mn-wheel small{font-size:12px;color:#c8bfff}
.mn-wheel-disc{position:relative;flex:none;width:150px;height:150px;border-radius:50%;border:5px solid #ffe45c;background:conic-gradient(#ff5fa8 0 45deg,#5fd0ff 0 90deg,#ffb02e 0 135deg,#7dffb8 0 180deg,#c58bff 0 225deg,#ffe45c 0 270deg,#72edff 0 315deg,#ff7a7a 0 360deg);box-shadow:0 0 20px #ffe45c66}
.mn-wheel-disc span{position:absolute;left:50%;top:50%;width:64px;margin-left:0;transform-origin:0 0;transform:rotate(calc(var(--i)*45deg + 22.5deg - 90deg)) translate(8px,-6px);font-size:9px;font-weight:900;color:#1b0f66}
.mn-wheel::before{content:"▼";position:absolute;margin:-6px 0 0 66px;color:#fff;font-size:18px;z-index:2}
.mn-conv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-radius:16px;background:#ffffff10}
.mn-conv b{font-weight:900}.mn-conv small{flex:1;color:#c8bfff}
.mn-giftx2,.mn-px2,.mn-endless,.mn-rv{margin-top:8px}
.mn-toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:200;padding:10px 18px;border-radius:14px;background:#1b0f66f0;border:2px solid var(--c);color:#fff;font-weight:900;box-shadow:0 0 20px color-mix(in srgb,var(--c) 50%,transparent);animation:pop .4s cubic-bezier(.2,1.8,.4,1);pointer-events:none}
#mnAd{position:fixed;inset:0;z-index:100001;display:grid;place-items:center;background:#000d}
.mn-adbox{display:grid;justify-items:center;gap:10px;padding:26px 30px;border-radius:20px;background:#22223b;border:2px dashed #ffffff55;color:#fff;text-align:center;font-family:Nunito,system-ui,sans-serif}
.mn-adbox small{letter-spacing:3px;font-weight:900;color:#ffe45c}.mn-adbox b{font-size:20px}.mn-adbox i{font-style:normal;font-size:46px;font-weight:900}
.mn-adbox button{border:0;background:none;color:#c8bfff;font-weight:800;cursor:pointer}
/* v054b: ad buttons — same size as others, but alive: a moving shine, a soft pulse and the «РЕКЛАМА» tag */
.mn-ic{width:1.15em;height:1.15em;object-fit:contain;vertical-align:-.2em;margin:0 .1em}
.mn-btn.mn-ad{position:relative;overflow:hidden;background:linear-gradient(180deg,#5cf2a0,#1fbf6a);color:#05361c;box-shadow:0 4px 0 #0f7a40,0 0 16px #5cf2a066;animation:mnPulse 1.8s ease-in-out infinite}
.mn-btn.mn-ad.gold{background:linear-gradient(180deg,#ffe45c,#ffa62e);color:#3a1c00;box-shadow:0 4px 0 #b86e00,0 0 16px #ffd84a77}
.mn-btn.mn-ad.violet{background:linear-gradient(180deg,#e09bff,#8a3ef0);color:#fff;box-shadow:0 4px 0 #4a1a9c,0 0 16px #c86bff77}
.mn-btn.mn-ad::after{content:"";position:absolute;top:0;bottom:0;width:46px;left:-60px;background:linear-gradient(100deg,#fff0,#fff9,#fff0);transform:skewX(-20deg);animation:mnShine 2.6s ease-in-out infinite}
.mn-adtag{position:absolute;top:3px;right:6px;font-style:normal;font-size:8px;font-weight:900;letter-spacing:1px;padding:1px 5px;border-radius:5px;background:#0007;color:#fff}
.mn-ad .mn-tv{background:#05361c;color:#fff}
@keyframes mnPulse{50%{filter:brightness(1.12)}}
@keyframes mnShine{0%,55%{left:-60px}100%{left:110%}}
/* the burst when an ad reward switches on */
#mnBoom{position:fixed;inset:0;z-index:100002;display:grid;place-items:center;background:radial-gradient(circle,#1b0f66cc,#05031aee);animation:llIn .2s ease forwards;cursor:pointer}
#mnBoom.out{opacity:0;transition:opacity .3s}
#mnBoom .mb-rays{position:absolute;width:160vmax;height:160vmax;background:repeating-conic-gradient(color-mix(in srgb,var(--c) 35%,transparent) 0 10deg,transparent 10deg 20deg);animation:mbSpin 9s linear infinite;mask:radial-gradient(circle,#000 0,#0000 55%)}
#mnBoom .mb-box{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;color:#fff;font-family:Nunito,system-ui,sans-serif;animation:mbIn .55s cubic-bezier(.2,1.8,.4,1)}
#mnBoom .mb-icon img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 0 30px var(--c))}
#mnBoom b{font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(36px,7vw,64px);color:var(--c);-webkit-text-stroke:3px #1b0f66;paint-order:stroke fill;text-shadow:0 0 30px var(--c)}
#mnBoom small{font-size:17px;font-weight:800}
#mnBoom em{font-style:normal;font-size:12px;opacity:.7;margin-top:10px}
@keyframes mbSpin{to{transform:rotate(360deg)}}
@keyframes mbIn{0%{transform:scale(.2);opacity:0}}
/* the wheel show */
#mnWheelShow{position:fixed;inset:0;z-index:100002;display:grid;place-items:center;align-content:center;gap:14px;background:radial-gradient(circle,#2b1a8cee,#05031af5);font-family:Nunito,system-ui,sans-serif;color:#fff;animation:llIn .25s ease forwards}
.mw-title{font-family:'Russo One',sans-serif;font-size:clamp(28px,5vw,44px);color:#ffe45c;-webkit-text-stroke:2px #3a1c00;paint-order:stroke fill;text-shadow:0 0 24px #ffe45c99}
.mw-wheel{position:relative;width:min(78vmin,460px);aspect-ratio:1}
.mw-lights{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,#0000 64%,#7a3a00 64.5%,#ffb02e 66%,#7a3a00 70.5%,#0000 71%)}
.mw-lights i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff6c4;box-shadow:0 0 12px #ffe45c;transform:rotate(calc(var(--i)*22.5deg)) translateY(calc(min(78vmin,460px)/-2 - 7px));animation:mwBulb .5s steps(1) infinite;animation-delay:calc(var(--i)*-.12s)}
@keyframes mwBulb{50%{background:#ff7a2e;box-shadow:0 0 4px #ff7a2e}}
.mw-disc{position:absolute;inset:0;border-radius:50%;border:8px solid #ffe45c;background:conic-gradient(#ff5fa8 0 45deg,#5fd0ff 0 90deg,#ffb02e 0 135deg,#7dffb8 0 180deg,#c58bff 0 225deg,#ffe45c 0 270deg,#72edff 0 315deg,#ff7a7a 0 360deg);transform:rotate(0deg);transition:transform 4.1s cubic-bezier(.12,.8,.18,1);box-shadow:inset 0 0 40px #0006,0 0 40px #ffe45c66}
.mw-disc span{position:absolute;left:50%;top:50%;display:grid;justify-items:center;width:90px;margin-left:-45px;transform:rotate(calc(var(--i)*45deg + 22.5deg)) translateY(-38%);transform-origin:50% 0;translate:0 -100%}
.mw-disc span img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}
.mw-disc span b{font-size:12px;font-weight:900;color:#1b0f66;text-align:center;line-height:1.1}
.mw-hub{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px;border-radius:50%;background:radial-gradient(circle,#fff6c4,#ffb02e);border:5px solid #7a3a00;box-shadow:0 0 20px #ffe45c}
.mw-pin{position:absolute;left:50%;top:-30px;width:0;height:0;margin-left:-20px;border:20px solid transparent;border-top:44px solid #ff3b3b;filter:drop-shadow(0 3px 2px #0009)}
.mw-prize{min-height:120px;display:grid;justify-items:center;gap:10px}
.mw-win{display:flex;align-items:center;gap:12px;padding:10px 22px;border-radius:18px;background:#1b0f66;border:3px solid #ffe45c;animation:mbIn .5s cubic-bezier(.2,1.8,.4,1)}
.mw-win img{width:56px;height:56px;object-fit:contain}.mw-win b{font-family:'Russo One',sans-serif;font-weight:400;font-size:24px;color:#ffe45c}
#mnWheelShow .mn-big{width:min(80vw,320px);justify-content:center}
.mw-disc span{left:auto;top:auto;margin:0;width:96px;translate:none;transform-origin:50% 50%}
/* v054c: ad marks inline (never over the text), home tiles, quests card */
.mn-adtag{position:static!important;margin-left:auto;align-self:center;flex:none;font-size:9px!important;letter-spacing:.5px!important;padding:2px 6px!important;border-radius:6px;background:#0003!important;color:inherit!important;opacity:.85}
.mn-btn{gap:8px}
.mn-btn .mn-tv{flex:none;width:24px;height:24px;margin:0;border-radius:50%;background:#fff;color:#1b5e20;font-size:11px;display:grid;place-items:center;box-shadow:0 2px 0 #0003}
.mn-buffs{grid-template-columns:1fr 1fr!important;gap:10px!important}
.mn-tile{position:relative;display:flex!important;align-items:center;gap:10px;min-height:64px;padding:8px 12px!important;border-radius:16px!important;text-align:left;color:#fff;border:2px solid #ffffff33;background:linear-gradient(135deg,#3b2a9c,#241470)}
.mn-tile img,.mn-tile .mn-tile-ic{width:44px;height:44px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 4px #0008)}
.mn-tile span,.mn-tile .mn-tile-tx{display:grid;gap:2px;min-width:0;flex:1}
.mn-tile b{font-family:'Russo One',sans-serif;font-weight:400;font-size:15px;letter-spacing:.3px;line-height:1.1}
.mn-tile small{font-size:11px;font-weight:700;opacity:.9;line-height:1.2}
button.mn-tile.violet{background:linear-gradient(135deg,#b46bff,#6a2bd9)!important;box-shadow:0 4px 0 #3d1490,0 0 18px #b46bff66!important;color:#fff!important}
button.mn-tile.gold{background:linear-gradient(135deg,#ffd84a,#ff9d2e)!important;box-shadow:0 4px 0 #a85d00,0 0 18px #ffd84a77!important;color:#3a1c00!important}
.mn-tile.on{border-color:#7dffb8;background:linear-gradient(135deg,#1f6a4a,#14402f)}
.mn-tile.on strong{font-size:18px;color:#7dffb8;font-weight:900}
.mn-tile u{display:block;height:5px;border-radius:4px;background:#0006;overflow:hidden;text-decoration:none}
.mn-tile u i{display:block;height:100%;background:linear-gradient(90deg,#3ee8a0,#a6ffcf)}
.mn-tile.off{opacity:.5;border-style:dashed}
.mn-quests{padding:0!important;border-radius:16px!important;background:linear-gradient(135deg,#2b1a8c,#1b0f66)!important;border:2px solid #ffffff2a!important;overflow:hidden}
.mn-quests summary{display:flex;align-items:center;gap:10px;padding:8px 12px!important;list-style:none}
.mn-quests summary::-webkit-details-marker{display:none}
.mn-quests summary img{width:30px;height:30px;object-fit:contain}
.mn-quests summary b{font-family:'Russo One',sans-serif;font-weight:400;font-size:14px}
.mn-quests summary em{margin-left:auto;font-style:normal;font-weight:900;color:#ffe45c}
.mn-quests .mn-q{padding:8px 12px!important}
.mn-px2 .mn-btn{animation:breathe 1.8s ease-in-out infinite}
/* v054d: home tiles — the ad mark is a small badge in the corner, the text keeps the whole width */
button.mn-tile{padding:8px 34px 8px 10px!important}
button.mn-tile .mn-tv{position:absolute;top:6px;right:6px;width:22px;height:22px}
button.mn-tile .mn-adtag{position:absolute!important;bottom:5px;right:6px;margin:0}
.mn-tile b{font-size:14px;white-space:nowrap}
.mn-tile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-tile img,.mn-tile .mn-tile-ic{width:38px;height:38px}
button.mn-ad:not(.mn-tile) .mn-adtag{display:none}
button.mn-ad:not(.mn-tile){padding-left:10px}
/* v054e: workshop ad buttons full width under the main one; currency icons in text */
.mn-ws{display:grid!important;gap:10px;margin:10px 0!important}
.mn-ws .mn-big{width:100%;justify-content:center;text-align:center}
.mn-ws .mn-big span{justify-items:center}
.mn-free{animation:breathe 1.8s ease-in-out infinite}
.mn-wait{margin:0;text-align:center;font-size:13px;font-weight:800;color:#c8bfff}.mn-wait b{color:#ffe45c}
.mn-cur .mn-ic{width:1.25em;height:1.25em;vertical-align:-.28em;margin-left:.15em}
.mn-shop .xp-ad{display:grid;justify-items:center;gap:4px;padding:14px 10px;border-radius:18px;background:linear-gradient(180deg,#2b1a8c,#1b0f66);border:2px solid #ffffff26}
.mn-shop{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
.mn-shop>.xp-adsh,.mn-shop>.mn-wheel,.mn-shop>.mn-conv,.mn-shop>.mn-case{grid-column:1/-1}
.mn-shop .pic img{width:52px;height:52px;object-fit:contain}
.mn-shop .xp-ad em{font-style:normal;font-weight:900;color:#ffe45c}
.mn-shop{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:520px){.mn-shop .xp-ad{padding:10px 4px}.mn-shop .pic img{width:40px;height:40px}.mn-shop .mn-btn{padding:8px 6px;font-size:12px}}
/* v054f: persistent menu background from the new map; flying rewards; wheel rays; empty sets hidden */
#menuBg{position:absolute;inset:-10%;z-index:0;background:linear-gradient(#0b063055,#0b063099),url(assets/ui_bg_map01.jpg) center/cover;animation:cityDrift 70s ease-in-out infinite alternate;pointer-events:none}
#overlay.menu>#panel{position:relative;z-index:1}
#overlay:not(.menu)>#menuBg{display:none}
#overlay.menu{background:none!important;backdrop-filter:none!important}
#panel.menu,#panel.menu .m-screen{background:transparent!important}
.m-screen::before{display:none!important}
.mn-fly{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:100003;pointer-events:none;filter:drop-shadow(0 2px 3px #0008)}
.mw-rays{position:absolute;left:50%;top:45%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;background:repeating-conic-gradient(#ffe45c2a 0 9deg,transparent 9deg 18deg);animation:mbSpin 12s linear infinite;pointer-events:none;mask:radial-gradient(circle,#000,#0000 55%)}
#mnWheelShow.won .mw-wheel{animation:mwPop .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes mwPop{40%{transform:scale(1.08)}}
.tm-row.tm-mini{margin-top:10px}
#mnCount{position:fixed;inset:0;z-index:100002;display:grid;place-items:center;background:#05031a66;pointer-events:none}
#mnCount b{font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(80px,18vw,180px);color:#ffe45c;-webkit-text-stroke:5px #3a1c00;paint-order:stroke fill;text-shadow:0 0 40px #ffe45caa;animation:mbIn .45s cubic-bezier(.2,1.8,.4,1)}