*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#0e1b2a;
font-family:"Baloo 2","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
user-select:none;touch-action:none}
#app{position:fixed;inset:0}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
#hud{position:absolute;inset:0;pointer-events:none;padding:calc(10px + env(safe-area-inset-top)) 12px 12px}
.hud-left{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;display:flex;flex-direction:column;gap:6px}
.hud-right{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;display:flex;gap:6px;pointer-events:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;flex:none;display:block}
.ico-s{width:15px;height:15px;vertical-align:-2px;display:inline-block}
.chip{display:flex;align-items:center;gap:8px;background:#22384c;color:#fff;
border:3px solid #eaf2f8;border-radius:13px;padding:6px 14px 6px 10px;
font-weight:900;font-size:21px;letter-spacing:.2px;
box-shadow:0 4px 0 rgba(0,0,0,.34);font-variant-numeric:tabular-nums}
.chip.money{background:#3a2d12;border-color:#ffd764;color:#ffd764}
.chip.small{font-size:15px;padding:4px 12px 4px 8px;color:#dbe9f5;font-weight:800;border-width:2px}
.chip.small .ico{width:17px;height:17px}
.iconbtn{pointer-events:auto;width:44px;height:44px;border-radius:13px;border:3px solid #eaf2f8;
background:#22384c;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 0 rgba(0,0,0,.34);transition:transform .1s,background .15s}
.iconbtn:hover{background:#2e4a63}
.iconbtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.34)}
.iconbtn.off{opacity:.5}
.tut{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));
transform:translateX(-50%);width:min(430px,calc(100vw - 24px));
background:#22384c;border:3px solid #eaf2f8;border-radius:14px;
box-shadow:0 6px 0 rgba(0,0,0,.34);overflow:hidden;pointer-events:none;
animation:tutIn .32s cubic-bezier(.2,1.3,.4,1)}
@keyframes tutIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}}
.tut-bar{height:4px;background:rgba(255,255,255,.14)}
.tut-bar i{display:block;height:100%;background:#ffd764;transition:width .4s ease}
.tut-body{display:flex;align-items:center;gap:11px;padding:10px 11px}
.tut-ico{width:26px;height:26px;flex:none;padding:6px;box-sizing:content-box;
background:#eaf2f8;border-radius:9px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.tut-txt{flex:1;min-width:0;text-align:left}
.tut-txt b{display:block;color:#fff;font-size:16px;font-weight:900;line-height:1.15}
.tut-txt i{font-style:normal;display:block;color:#bcd6ea;font-size:12px;font-weight:700;
line-height:1.3;margin-top:2px}
.tut-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.tut-num{color:#8fb4d0;font-size:11px;font-weight:900;letter-spacing:.6px;
font-variant-numeric:tabular-nums}
.tut-skip{pointer-events:auto;cursor:pointer;font-family:inherit;font-size:11.5px;
font-weight:800;color:#cfe3f2;background:rgba(255,255,255,.1);
border:2px solid rgba(255,255,255,.22);border-radius:8px;padding:4px 9px}
.tut-skip:hover{background:rgba(255,255,255,.2);color:#fff}
.tut-keys{display:flex;align-items:center;justify-content:center;gap:12px;
padding:0 11px 10px;flex-wrap:wrap}
.tut-arrow{position:absolute;left:0;top:0;width:52px;height:52px;pointer-events:none;
filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));animation:arrowNudge 1.1s ease-in-out infinite}
@keyframes arrowNudge{0%,100%{opacity:.75}50%{opacity:1}}
kbd{display:inline-flex;align-items:center;justify-content:center;
min-width:23px;height:23px;padding:0 5px;margin:1px;
font-family:inherit;font-size:11.5px;font-weight:900;color:#2a3b4a;
background:linear-gradient(180deg,#fdfefe,#d8e4ee);border:2px solid #9fb3c4;
border-radius:5px;box-shadow:0 2px 0 #7e94a6}
kbd.ar{font-size:9px;padding-top:1px}
.kbd-set{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.kbd-row{display:flex}
.kbd-or{color:#8fb4d0;font-size:11px;font-weight:800}
.kbd-touch{display:none;color:#bcd6ea;font-size:12px;font-weight:800}
@media (hover:none) and (pointer:coarse){
.kbd-set,.kbd-or{display:none}
.kbd-touch{display:inline}
}
.origin-note{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:60;
background:#3a2d12;color:#ffd764;font-family:inherit;font-size:12px;font-weight:800;
text-decoration:none;padding:6px 14px;border:2px solid #ffd764;border-bottom:0;
border-radius:8px 8px 0 0;box-shadow:0 -2px 10px rgba(0,0,0,.4)}
.origin-note:hover{background:#4a3a18;color:#fff3c4}
.adwait{position:absolute;inset:0;z-index:40;display:flex;align-items:center;
justify-content:center;background:rgba(6,16,26,.82);pointer-events:auto}
.adwait-box{display:flex;flex-direction:column;align-items:center;gap:9px;
padding:22px 26px;background:#22384c;border:3px solid #eaf2f8;border-radius:14px;
box-shadow:0 8px 0 rgba(0,0,0,.35);text-align:center;max-width:min(330px,88vw)}
.adwait-box b{color:#fff;font-size:17px;font-weight:900}
.adwait-box small{color:#bcd6ea;font-size:12px;font-weight:700}
.adwait-box .tut-skip{margin-top:4px}
#toast{position:absolute;left:50%;top:24%;transform:translate(-50%,-14px);
background:#c98d52;color:#fff8e6;font-weight:900;font-size:19px;
padding:11px 22px;border-radius:8px;border:4px solid #8a5c2e;
text-shadow:0 2px 0 rgba(90,50,10,.6);box-shadow:0 6px 0 rgba(0,0,0,.3);
opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:radial-gradient(120% 90% at 50% 30%,rgba(24,58,88,.72),rgba(6,14,24,.92));
backdrop-filter:blur(3px);z-index:10;padding:20px}
.overlay:not(.start){align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
.overlay:not(.start) > .panel{margin:auto}
#season,#confirm,#options,#hats{z-index:12}
.panel{position:relative;width:min(420px,92vw);
background:#1d3450;border:4px solid #0f2137;border-radius:8px;
padding:26px 24px 20px;text-align:center;
box-shadow:0 16px 42px rgba(0,0,0,.55),inset 0 3px 0 rgba(255,255,255,.12)}
#menu .panel,#hats .panel,#rewards .panel,#welcome .panel,#season .panel{
background:repeating-linear-gradient(180deg,#c98d52 0 26px,#c2864c 26px 27px,#c98d52 27px 53px);
border:6px solid #8a5c2e;border-radius:12px;color:#5d3d18;
box-shadow:0 16px 42px rgba(0,0,0,.5),inset 0 3px 0 rgba(255,255,255,.2),inset 0 -6px 0 rgba(0,0,0,.16)}
#menu .panel h2,#hats .panel h2,#rewards .panel h2,#welcome .panel h2,#season .panel h2{color:#fff8e6;text-shadow:0 3px 0 #7a4a1c}
#rewards .tag{color:#6b4620}
#menu .stats>div{background:rgba(93,61,24,.2)}
#menu .stats span{color:#5d3d18}
#menu .stats small{color:#7a5526}
#options .panel{background:linear-gradient(180deg,#5b6f83,#43566a);border-color:#2e3d4a;
border-radius:10px}
#options .panel h2{color:#f2f7fb}
#confirm .panel{background:#f3ead6;border:4px solid #c9b48a;border-radius:6px;
color:#4a3a22;box-shadow:0 16px 42px rgba(0,0,0,.5),inset 0 0 0 2px #fffdf6}
#confirm .panel h2{color:#3c2f1c}
#confirm .tag{color:#6b5a3c}
.logo{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:6px}
.logo-cat{font-size:54px;line-height:1;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.panel h1{font-size:36px;line-height:1.02;color:#fff;font-weight:900;letter-spacing:.5px;
text-shadow:0 4px 0 rgba(0,0,0,.28)}
.panel h1 em{font-style:normal;color:#ffd764;display:inline-block}
.panel h2{font-size:28px;color:#fff;margin-bottom:14px}
.tag{color:#bcd6ea;font-size:15px;line-height:1.45;margin:12px 4px 20px;font-weight:600}
button.big{width:100%;padding:15px;border:none;border-radius:18px;cursor:pointer;
background:linear-gradient(180deg,#57d36a,#31a84a);color:#fff;font-size:22px;font-weight:900;
letter-spacing:.6px;font-family:inherit;box-shadow:0 6px 0 #21793a;transition:transform .08s,box-shadow .08s}
button.big:active{transform:translateY(5px);box-shadow:0 1px 0 #21793a}
button.big.danger{background:linear-gradient(180deg,#e8695c,#c0392b);box-shadow:0 6px 0 #8d2318;
margin-bottom:10px}
button.big.danger:active{box-shadow:0 1px 0 #8d2318}
.hints{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:16px;
color:#8fb0c9;font-size:13px;font-weight:600}
.hints b{color:#dbe9f5}
.iconbtn.reward{background:linear-gradient(180deg,#ffd764,#f0a92e);color:#5a3a00;
border-color:rgba(255,255,255,.55);animation:rwPulse 2s ease-in-out infinite}
@keyframes rwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
button.big.ad{background:linear-gradient(180deg,#ffd764,#eda522);color:#5a3a00;
box-shadow:0 6px 0 #bf7f13;font-size:18px;margin-bottom:10px}
button.big.ad:active{box-shadow:0 1px 0 #bf7f13}
.account{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px;
color:#cfe3f2;font-size:14px;font-weight:800}
.account img{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.banner{margin-top:14px;min-height:0;display:flex;justify-content:center}
.banner:empty{display:none}
.overlay.start{background:linear-gradient(180deg,rgba(6,20,34,.30),rgba(6,20,34,.72));
flex-direction:column;gap:clamp(14px,3vh,30px);padding:24px 16px}
.sign{position:relative;width:min(560px,94vw);filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.sign-rope{position:absolute;left:12%;right:12%;top:-14px;height:18px;
border-top:5px dotted #b98a4e;border-radius:60% 60% 0 0/100% 100% 0 0}
.sign-nails{position:absolute;left:0;right:0;top:6px;display:flex;justify-content:space-between;
padding:0 26px;pointer-events:none}
.sign-nails i{width:11px;height:11px;border-radius:50%;background:#6b5535;
box-shadow:inset 0 -2px 0 rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.25)}
.sign-board{position:relative;background:
repeating-linear-gradient(180deg,#c98d52 0 26px,#c2864c 26px 27px,#c98d52 27px 53px);
border:6px solid #8a5c2e;border-radius:14px;padding:26px 22px 22px;text-align:center;
box-shadow:inset 0 3px 0 rgba(255,255,255,.22),inset 0 -6px 0 rgba(0,0,0,.18)}
.sign-est{display:block;color:#6b4620;font-size:12px;font-weight:800;letter-spacing:3px;
text-transform:uppercase;margin-bottom:4px}
.sign-board h1{display:flex;flex-direction:column;line-height:.92;color:#fff8e6;
text-shadow:0 3px 0 #7a4a1c,0 6px 0 rgba(0,0,0,.25)}
.sign-board h1 .l1{font-size:clamp(26px,6vw,38px);letter-spacing:6px;font-weight:800}
.sign-board h1 .l2{font-size:clamp(38px,9.5vw,62px);letter-spacing:1px;font-weight:900;color:#ffd764}
.sign-rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 8px}
.sign-rule i{height:3px;width:min(110px,22vw);background:#8a5c2e;border-radius:2px;opacity:.8}
.sign-rule .ico{width:22px;height:22px}
.sign-sub{color:#6b4620;font-size:13.5px;font-weight:800;letter-spacing:.6px}
.start-actions{width:min(360px,92vw);display:flex;flex-direction:column;align-items:stretch;gap:10px}
.start-row{display:flex;gap:10px}
.chiplink{flex:1;padding:11px 10px;border-radius:14px;cursor:pointer;font-family:inherit;
font-size:14px;font-weight:800;color:#dbe9f5;background:rgba(12,26,40,.6);
border:2px solid rgba(255,255,255,.18);transition:transform .08s,background .15s}
.chiplink.wide{width:100%;margin-top:10px}
.chiplink:hover{background:rgba(22,44,66,.75)}
.chiplink:active{transform:translateY(2px)}
.start-keys{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
color:#bcd6ea;font-size:12.5px;font-weight:700;text-align:center;opacity:.95}
.opt{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;text-align:left}
.opt.row{flex-direction:row;align-items:center;justify-content:space-between}
.opt label{color:#cfe3f2;font-size:14px;font-weight:800}
.opt input[type=range]{width:100%;accent-color:#5ec94f;height:22px}
.opt input[type=checkbox]{width:24px;height:24px;accent-color:#5ec94f}
.opt select{padding:9px 12px;border-radius:12px;border:2px solid rgba(255,255,255,.2);
background:rgba(12,26,40,.8);color:#eaf4fb;font-family:inherit;font-size:14px;font-weight:800}
.goal{display:flex;flex-direction:column;gap:3px;width:min(210px,44vw);
background:#22384c;border:3px solid #eaf2f8;border-radius:13px;padding:6px 10px 8px;
box-shadow:0 4px 0 rgba(0,0,0,.34);color:#fff;transform-origin:left center}
.goal-lbl{font-size:10.5px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#8fb4d0}
.goal b{font-size:15px;font-weight:900;line-height:1.1;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.goal-bar{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.goal-bar i{display:block;height:100%;width:0;background:#ffd764;transition:width .3s ease}
.goal-num{font-size:11.5px;font-weight:800;color:#dbe9f5;font-variant-numeric:tabular-nums}
.goal.ready{background:#1f5a2e;border-color:#8fe3a3;animation:goalPulse 1.4s ease-in-out infinite}
.goal.ready .goal-lbl{color:#bff5cb}
.goal.ready .goal-bar i{background:#8fe3a3}
@keyframes goalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.wb-row{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;
margin-bottom:10px;border-radius:10px;background:#fff3d4;border:3px solid #8a5c2e}
.wb-ico{width:34px;height:34px;flex:none;display:block}
.wb-txt{flex:1;min-width:0}
.wb-txt b{display:block;font-size:24px;font-weight:900;color:#4a3113;line-height:1.05;
font-variant-numeric:tabular-nums}
.wb-txt small{display:block;font-size:12px;font-weight:800;color:#7a5526}
.wb-next{margin-top:12px;font-size:13px;font-weight:800;color:#5d3d18}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:10px}
.day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 7px;
border-radius:8px;background:rgba(93,61,24,.18);border:2px solid rgba(93,61,24,.3);color:#7a5526}
.day small{font-size:9.5px;font-weight:900;letter-spacing:.3px;white-space:nowrap}
.day .ico-s{width:16px;height:16px}
.day.done{background:#5ec94f;border-color:#3f9e37;color:#123d0e}
.day.today{background:#ffd764;border-color:#fff8e6;color:#5a3a00;
animation:goalPulse 1.4s ease-in-out infinite}
.days.small{margin-bottom:6px}
.days.small .day{padding:4px 0 5px}
.days.small .day small{font-size:8.5px}
.days.small .day .ico-s{width:13px;height:13px}
.daily{margin-bottom:14px;padding:10px 10px 8px;border-radius:10px;background:rgba(93,61,24,.2)}
.daily-head{font-size:13px;font-weight:900;color:#fff8e6;text-shadow:0 2px 0 #7a4a1c;margin-bottom:7px}
.daily-txt{display:block;font-size:11.5px;font-weight:800;color:#5d3d18}
@media (prefers-reduced-motion:reduce){
.goal.ready,.day.today,.offer,.doubler,.event,.shopbtn .badge,.goal.mile,.hype.show{animation:none}
}
.chip.star{color:#ffe28a;border-color:#ffd764}
.chip.star .bonus{margin-left:6px;padding:1px 6px;border-radius:6px;background:#ffd764;
color:#3a2d12;font-size:12px;font-weight:900}
.task{display:flex;align-items:center;gap:6px;width:min(210px,44vw);
background:#22384c;border:2px solid rgba(234,242,248,.7);border-radius:11px;padding:5px 9px;
box-shadow:0 3px 0 rgba(0,0,0,.3);color:#dbe9f5;font-size:12px;font-weight:800}
.task span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task b{color:#ffd764;font-variant-numeric:tabular-nums}
.task.done{border-color:#8fe3a3}
.task.done b{color:#8fe3a3}
.event{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);
display:flex;align-items:center;gap:10px;padding:7px 12px 7px 14px;border-radius:14px;
background:linear-gradient(180deg,#ff8a5b,#e0533b);border:3px solid #fff3c4;color:#fff;
box-shadow:0 5px 0 rgba(0,0,0,.3);white-space:nowrap;animation:eventIn .35s cubic-bezier(.2,1.4,.4,1)}
.event b{font-size:16px;font-weight:900;letter-spacing:.3px}
.event span{font-size:12px;font-weight:800;opacity:.9}
.event i{font-style:normal;font-size:15px;font-weight:900;min-width:30px;text-align:center;
padding:2px 6px;border-radius:8px;background:rgba(0,0,0,.22);font-variant-numeric:tabular-nums}
@keyframes eventIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}}
.tasks{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;text-align:left}
.trow{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:4px 8px;
padding:6px 8px;border-radius:8px;background:#fff3d4;border:2px solid rgba(138,92,46,.45)}
.trow .ttxt{font-size:12.5px;font-weight:900;color:#4a3113}
.trow b{font-size:11.5px;font-weight:900;color:#7a5526;font-variant-numeric:tabular-nums}
.trow .tbar{grid-column:1 / -1;height:5px;border-radius:3px;background:rgba(93,61,24,.18);overflow:hidden}
.trow .tbar i{display:block;height:100%;background:#e9a62a}
.trow.done{background:#dff5d8;border-color:#5ec94f}
.trow.done b{color:#2f7a28}
.trow.done .tbar i{background:#5ec94f}
.season-line{display:block;margin:0 0 8px;font-size:12px;font-weight:800;color:#5d3d18}
button.big.season{background:linear-gradient(180deg,#ffd764,#e9a62a);color:#4a2f00;
box-shadow:0 6px 0 #b27812;font-size:18px;margin-bottom:10px}
button.big.season:active{box-shadow:0 1px 0 #b27812}
.se-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 16px;text-align:left}
.se-cols div{padding:8px 10px;border-radius:8px;background:rgba(93,61,24,.2)}
.se-cols b{display:block;font-size:12px;font-weight:900;color:#fff8e6;text-shadow:0 2px 0 #7a4a1c}
.se-cols span{display:block;font-size:12px;font-weight:800;color:#4a3113;margin-top:2px}
@media (max-width:620px){
.event{padding:5px 9px;gap:7px;top:auto;bottom:calc(92px + env(safe-area-inset-bottom))}
@keyframes eventIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}}
.event span{display:none}
.task{font-size:11px}
}
@media (max-height:500px){
.task{display:none}
}
.arcade{position:absolute;inset:0;z-index:20;touch-action:none;cursor:pointer}
.ar-top{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
display:flex;align-items:center;gap:8px;width:min(420px,calc(100vw - 120px));pointer-events:none}
.ar-lvl{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:#ff5fa2;color:#fff;font-weight:900;font-size:15px;border:3px solid #fff;
box-shadow:0 3px 0 rgba(0,0,0,.25)}
.ar-lvl.next{background:#2b3345}
.ar-bar{flex:1;height:12px;border-radius:7px;background:rgba(255,255,255,.35);overflow:hidden;border:2px solid #fff}
.ar-bar i{display:block;height:100%;width:0;background:#ff5fa2;transition:width .12s}
.ar-close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;font-size:18px;font-weight:900;
font-family:inherit}
.ar-score{position:absolute;top:calc(62px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
font-size:46px;font-weight:900;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25);pointer-events:none;
font-variant-numeric:tabular-nums}
.ar-fire{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);
width:min(240px,60vw);height:12px;border-radius:7px;background:rgba(0,0,0,.25);
border:2px solid rgba(255,255,255,.85);overflow:hidden;pointer-events:none}
.ar-fire i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd23f,#ff6a1a)}
.ar-fire.hot{box-shadow:0 0 16px #ff8a2a;border-color:#ffd23f}
.ar-msg{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(330px,86vw);
display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center;padding:20px 20px 16px;
border-radius:14px;background:#22384c;border:3px solid #eaf2f8;box-shadow:0 8px 0 rgba(0,0,0,.3);cursor:default}
.ar-msg b{font-size:26px;color:#fff;font-weight:900;line-height:1.1}
.ar-msg em{font-style:normal;font-size:28px;font-weight:900;color:#ffd764}
.ar-msg span{font-size:14px;color:#bcd6ea;font-weight:700;line-height:1.4}
.ar-msg .chiplink{margin-top:0}
.ar-next{display:block;padding:7px 9px;border-radius:9px;background:rgba(255,215,100,.14);
border:2px solid rgba(255,215,100,.45);color:#ffe28a;font-size:12.5px;font-weight:800;line-height:1.35}
@media (max-aspect-ratio:1/1){ .ar-msg{top:66%} }
.fade{position:absolute;inset:0;z-index:30;background:#0e3a4a;opacity:0;
pointer-events:none;transition:opacity .3s ease}
.fade.on{opacity:1}
.chip.vault{color:#8fe3a3;border-color:rgba(143,227,163,.42)}
.offers{position:absolute;top:calc(64px + env(safe-area-inset-top));right:12px;
display:flex;flex-direction:column;gap:9px;pointer-events:none;
width:min(260px,62vw);align-items:stretch}
.offer{pointer-events:auto;display:flex;align-items:center;gap:10px;cursor:pointer;
font-family:inherit;text-align:left;padding:11px 12px;border-radius:18px;
border:3px solid rgba(255,255,255,.6);box-shadow:0 6px 0 rgba(0,0,0,.3);
transition:transform .09s,box-shadow .09s,filter .2s;
animation:offerPulse 2.4s ease-in-out infinite}
.offer.gold{background:linear-gradient(180deg,#ffd764,#efa622);color:#4a2f00}
.offer.blue{background:linear-gradient(180deg,#8ad4ff,#3d9ad8);color:#06304d}
.offer:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.offer.cool{filter:grayscale(.65) brightness(.9);animation:none;cursor:default}
@keyframes offerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.offer-ico{width:28px;height:28px;flex:none;display:block}
.offer-txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.offer-txt b{font-size:16px;font-weight:900;line-height:1.1}
.offer-txt i{font-style:normal;font-size:11.5px;font-weight:800;opacity:.72}
.offer-tag{flex:none;align-self:flex-start;font-size:9.5px;font-weight:900;letter-spacing:1px;
padding:3px 6px;border-radius:6px;background:rgba(0,0,0,.28);color:#fff}
.offer.more{background:linear-gradient(180deg,#a88bd8,#7a5bb5);color:#2a1a44}
.rewardlist{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;
max-height:52vh;overflow-y:auto;padding:2px}
.rw{display:flex;align-items:center;gap:11px;text-align:left;padding:10px 11px;
border-radius:10px;background:rgba(93,61,24,.16);border:3px solid rgba(93,61,24,.3)}
.rw.ready{background:#fff3d4;border-color:#8a5c2e}
.rw .ico{width:28px;height:28px}
.rw-txt{flex:1;min-width:0}
.rw-txt b{display:block;font-size:15.5px;font-weight:900;color:#4a3113;line-height:1.15}
.rw-txt i{font-style:normal;font-size:11.5px;font-weight:800;color:#7a5526}
.rw-btn{flex:none;padding:9px 13px;border-radius:10px;border:3px solid #fff3c4;cursor:pointer;
font-family:inherit;font-size:13px;font-weight:900;color:#5a3a00;
background:linear-gradient(180deg,#ffd764,#f0a92e);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.rw-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.rw-btn:disabled{background:#c8bda6;border-color:#b3a68c;color:#6b6152;
box-shadow:0 4px 0 rgba(0,0,0,.15);cursor:default}
.chip.boost{color:#ffe28a;border-color:rgba(255,226,138,.45)}
.iconbtn.boostbtn{background:linear-gradient(180deg,#8ad4ff,#3d9ad8);color:#0d3550;
border-color:rgba(255,255,255,.5)}
.doubler{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
transform:translateX(-50%);pointer-events:auto;cursor:pointer;font-family:inherit;
display:flex;align-items:center;gap:12px;text-align:left;
padding:13px 18px 13px 16px;border-radius:22px;border:4px solid #fff3c4;
background:linear-gradient(180deg,#ffd764,#f0a92e);color:#5a3a00;
box-shadow:0 7px 0 rgba(0,0,0,.3);
animation:dblPulse 1.1s ease-in-out infinite;white-space:nowrap}
.dbl-ico{width:32px;height:32px;flex:none;display:block}
.dbl-txt{display:flex;flex-direction:column;gap:1px}
.dbl-txt b{font-size:20px;font-weight:900;line-height:1.1}
.dbl-txt i{font-style:normal;font-size:12px;font-weight:800;opacity:.75}
.dbl-time{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;
min-width:38px;text-align:center;padding:5px 0;border-radius:12px;
background:rgba(0,0,0,.22);color:#fff8e0}
.doubler:active{transform:translateX(-50%) translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
@keyframes dblPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
.wallet{display:inline-flex;align-items:center;gap:8px;background:#3a2d12;
color:#ffd764;font-weight:900;font-size:20px;padding:7px 18px;border-radius:10px;
border:3px solid #ffd764;margin-bottom:14px}
.wallet .ico{width:19px;height:19px}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:#9fc2da;
font-size:15px;font-weight:700;padding:16px 0}
.spin{width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.18);
border-top-color:#ffd764;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
button.link{margin-top:14px;background:none;border:none;color:#6f90a9;font-size:12.5px;cursor:pointer;
font-family:inherit;font-weight:700;text-decoration:underline;padding:6px}
button.link:hover{color:#b9d2e4}
.stats{display:flex;gap:12px;margin-bottom:18px}
.stats>div{flex:1;background:rgba(0,0,0,.22);border-radius:16px;padding:12px 6px}
.stats span{display:block;font-size:26px;font-weight:900;color:#ffd764}
.stats small{display:block;font-size:11px;color:#9ab8ce;font-weight:700;margin-top:2px}
@media (max-width:620px){
.chip{font-size:18px;padding:5px 12px 5px 9px}
.chip .ico{font-size:16px}
.chip.small{font-size:13px;padding:4px 11px 4px 8px}
.iconbtn{width:42px;height:42px;font-size:16px;border-radius:12px}
.tut{width:calc(100vw - 16px);bottom:calc(10px + env(safe-area-inset-bottom));border-width:2px}
.tut-body{padding:8px 9px;gap:9px}
.tut-ico{width:25px;height:25px}
.tut-txt b{font-size:14px}
.tut-txt i{font-size:11px}
.tut-arrow{width:42px;height:42px}
#toast{font-size:16px;padding:9px 16px;max-width:calc(100% - 32px);white-space:normal;top:30%}
.panel h1{font-size:30px}
.logo-cat{font-size:44px}
.chip .lbl{display:none}
.offers{width:min(186px,52vw);top:calc(62px + env(safe-area-inset-top));right:8px;gap:7px}
.offer{padding:8px 9px;border-radius:14px;gap:7px}
.offer-ico{width:22px;height:22px}
.offer-txt b{font-size:13px}
.offer-txt i{font-size:10px}
.offer-tag{font-size:8.5px;padding:2px 4px}
.doubler{padding:10px 14px;gap:9px}
.dbl-txt b{font-size:17px}
.sign-board{padding:20px 14px 16px}
.start-keys{font-size:11.5px}
}
.panel.shop{width:min(660px,94vw);padding:18px 18px 18px}
.shop-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.shop-head h2{margin:0;flex:1;text-align:left;font-size:26px}
.shop-head .wallet{margin:0;padding:5px 14px;font-size:18px}
.shop-x{flex:none;font-family:inherit;font-size:17px;font-weight:900}
.shop-body{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:14px;align-items:start}
.shop-window{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 12px 14px;
border-radius:12px;border:3px solid #8a5c2e;
background:radial-gradient(circle at 50% 36%,#fffdf6 0,#fff3d4 52%,#f1dcae 100%);
box-shadow:inset 0 -6px 0 rgba(138,92,46,.12)}
.shop-stage{width:100%;max-width:190px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.shop-stage img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(90,55,20,.28))}
.shop-window b{font-size:19px;font-weight:900;color:#4a3113;text-align:center;line-height:1.1}
.hat-note{font-size:12px;font-weight:800;color:#7a5526;text-align:center;line-height:1.35;min-height:16px}
.shop-window .big{font-size:16px;padding:12px 10px;margin-top:6px;display:flex;align-items:center;
justify-content:center;gap:6px;line-height:1.15}
.shop-window .big .ico-s{width:18px;height:18px}
button.big.buy{background:linear-gradient(180deg,#ffd764,#e9a62a);color:#4a2f00;box-shadow:0 6px 0 #b27812}
button.big.buy:active{box-shadow:0 1px 0 #b27812}
button.big.off{background:#d6cbb4;color:#6b6152;box-shadow:0 6px 0 #aa9d83;cursor:default}
button.big.gift{background:linear-gradient(180deg,#b9a0e6,#8f71cc);box-shadow:0 6px 0 #6a4fa6;font-size:14px;cursor:default}
button.big.done{background:#dff5d8;color:#2f7a28;box-shadow:0 6px 0 #9fd49a;cursor:default}
button.big:disabled:active{transform:none}
.hatgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;
max-height:min(62vh,440px);overflow-y:auto;padding:3px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px 8px;
border-radius:11px;background:#fff3d4;border:3px solid rgba(138,92,46,.35);cursor:pointer;
font-family:inherit;transition:transform .08s,border-color .15s,box-shadow .15s}
.tile:hover{border-color:rgba(138,92,46,.7)}
.tile img{width:60px;height:60px;object-fit:contain}
.tile .tn{font-size:11.5px;font-weight:900;color:#4a3113;line-height:1.1;text-align:center;min-height:26px;
display:flex;align-items:center}
.tile .tp{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:900;padding:2px 8px;
border-radius:7px;background:#ffd764;color:#4a2f00;font-variant-numeric:tabular-nums}
.tile .tp .ico-s{width:12px;height:12px;vertical-align:0}
.tile.poor .tp{background:#e6dcc8;color:#8a7e69}
.tile.poor img{opacity:.75}
.tile.owned .tp{background:#dff5d8;color:#2f7a28}
.tile.worn{border-color:#5ec94f;background:#f1fbe9}
.tile.worn .tp{background:#5ec94f;color:#fff}
.tile.locked{background:#f3edff;border-color:rgba(122,91,181,.45)}
.tile.locked .tp{background:#a88bd8;color:#fff}
.tile.locked img{filter:grayscale(.55) opacity(.8)}
.tile.sel{border-color:#4a3113;box-shadow:0 0 0 3px #ffd764;transform:translateY(-2px)}
.tile:focus-visible,.shopbtn:focus-visible{outline:3px solid #38cde6;outline-offset:2px}
.shopbtn{pointer-events:auto;position:relative;height:44px;display:flex;align-items:center;gap:6px;
padding:0 14px 0 9px;border-radius:13px;border:3px solid #fff3c4;
background:linear-gradient(180deg,#ffd764,#efa622);color:#4a2f00;font-family:inherit;font-size:15px;
font-weight:900;letter-spacing:.3px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.34);transition:transform .1s}
.shopbtn:hover{filter:brightness(1.05)}
.shopbtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.34)}
.shopbtn .ico{width:24px;height:24px}
.shopbtn .badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
background:#ff4d6d;border:2px solid #fff;color:#fff;font-style:normal;font-size:11px;font-weight:900;
display:flex;align-items:center;justify-content:center;animation:badgePop 1.6s ease-in-out infinite}
.shopbtn .badge.wide{font-size:9.5px;letter-spacing:.4px}
@keyframes badgePop{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media (max-width:620px){
.shop-body{grid-template-columns:1fr}
.shop-stage{max-width:130px}
.hatgrid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));max-height:none}
.tile img{width:50px;height:50px}
.shopbtn{height:42px;padding:0 10px;border-radius:12px}
.shopbtn .shop-lbl{display:none}
.shopbtn .ico{width:21px;height:21px}
}
.hype{position:absolute;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 26px 12px;min-width:240px;
border-radius:16px;background:linear-gradient(180deg,#2b4a66,#1d3450);border:3px solid #fff3c4;
box-shadow:0 8px 0 rgba(0,0,0,.28),0 0 40px rgba(255,215,100,.35);pointer-events:none;text-align:center;
opacity:0;z-index:5}
.hype small{font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#ffd764}
.hype b{font-size:28px;font-weight:900;line-height:1.05;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.hype span{font-size:13px;font-weight:800;color:#cfe3f2}
.hype.t3{background:linear-gradient(180deg,#ffd764,#f0a92e);border-color:#fff}
.hype.t3 small{color:#7a4a00}
.hype.t3 b{color:#4a2f00;font-size:34px;text-shadow:0 3px 0 rgba(255,255,255,.4)}
.hype.t3 span{color:#5a3a00}
.hype.show{animation-name:hypeIn;animation-timing-function:ease;animation-fill-mode:forwards}
@keyframes hypeIn{
0%{opacity:0;transform:translateX(-50%) scale(.6)}
10%{opacity:1;transform:translateX(-50%) scale(1.08)}
16%{transform:translateX(-50%) scale(1)}
84%{opacity:1;transform:translateX(-50%) scale(1)}
100%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.96)}}
.tut-loop{display:flex;justify-content:center;gap:4px;padding:8px 10px 0;flex-wrap:wrap}
.tut-loop span{font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
padding:3px 8px;border-radius:7px;color:#8fb4d0;background:rgba(255,255,255,.07)}
.tut-loop span+span::before{content:'\203A';margin:0 6px 0 -2px;color:#5f7f98}
.tut-loop span.on{background:#ffd764;color:#3a2d12}
.tut-loop span.done{color:#8fe3a3}
.goal-bar{position:relative;height:9px}
.goal-bar em{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.35)}
.goal-bar em.m1{left:25%}
.goal-bar em.m2{left:50%}
.goal-bar em.m3{left:75%}
.goal.mile{animation:milePop .7s ease}
@keyframes milePop{0%{transform:scale(1)}35%{transform:scale(1.09);box-shadow:0 4px 0 rgba(0,0,0,.34),0 0 18px #ffd764}
100%{transform:scale(1)}}
.wb-today{display:flex;flex-direction:column;gap:3px;text-align:left;margin:2px 0 12px;padding:9px 12px;
border-radius:10px;background:rgba(93,61,24,.2)}
.wb-today b{font-size:13px;font-weight:900;color:#fff8e6;text-shadow:0 2px 0 #7a4a1c;margin-bottom:2px}
.wb-today span{font-size:12.5px;font-weight:800;color:#4a3113}
.wb-today small{font-size:11.5px;font-weight:800;color:#5d3d18;margin-top:3px}
.stick{position:absolute;left:0;top:0;width:124px;height:124px;border-radius:50%;z-index:4;
border:3px solid rgba(255,255,255,.55);background:rgba(20,40,60,.18);pointer-events:none;
display:flex;align-items:center;justify-content:center}
.stick i{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.85);
box-shadow:0 3px 0 rgba(0,0,0,.2)}
@media (max-width:620px){
.hype{min-width:0;width:calc(100vw - 40px);top:calc(40% - 60px);padding:9px 14px 11px}
.hype b{font-size:23px}
.hype.t3 b{font-size:27px}
}
.vignette{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 55%,rgba(8,30,60,.28) 100%)}
.act-wrap{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform}
.act-btn{pointer-events:auto;position:relative;display:flex;align-items:center;gap:8px;
transform:translate(-50%,-50%);padding:8px 20px 9px 10px;border-radius:18px;border:3px solid #fff;
cursor:pointer;font-family:inherit;color:#fff;text-align:left;
box-shadow:0 5px 0 rgba(0,0,0,.28),0 10px 22px rgba(0,0,0,.22)}
.act-btn.pop{animation:actPop .34s cubic-bezier(.3,1.7,.5,1) backwards}
.act-btn .ico{width:32px;height:32px;flex:none}
.act-btn b{display:block;font-size:23px;font-weight:900;line-height:1;letter-spacing:.4px;
text-shadow:0 2px 0 rgba(0,0,0,.18)}
.act-btn small{display:block;margin-top:3px;font-size:11.5px;font-weight:800;opacity:.95;white-space:nowrap}
.act-btn.arcade{background:linear-gradient(180deg,#ff7ab8,#e43c86)}
.act-btn.ferry{background:linear-gradient(180deg,#3fd4c6,#1c9a90)}
.act-btn.locked{background:linear-gradient(180deg,#a4afbc,#6f7b89)}
.act-btn:hover{filter:brightness(1.06)}
.act-btn:active{transform:translate(-50%,-50%) translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.act-btn:focus-visible{outline:3px solid #ffd23f;outline-offset:3px}
.act-key{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:7px;
background:#fff;color:#3a4652;font-style:normal;font-size:12px;font-weight:900;
display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(0,0,0,.25)}
@media (hover:none){.act-key{display:none}}
@keyframes actPop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}
to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.act-btn.pop{animation:none}}
.grid-head{grid-column:1/-1;margin:8px 2px 0;padding-top:8px;border-top:2px dashed rgba(138,92,46,.35);
font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#fff3d4;
text-shadow:0 2px 0 #7a4a1c}
.shop-tabs{display:flex;gap:8px;margin:-4px 0 12px}
.shop-tab{font-family:inherit;font-size:15px;font-weight:900;letter-spacing:.3px;cursor:pointer;
padding:7px 18px;border-radius:12px;border:3px solid rgba(255,243,212,.35);
background:rgba(255,255,255,.12);color:#fff8e6;text-shadow:0 2px 0 rgba(90,50,15,.5)}
.shop-tab:hover{background:rgba(255,255,255,.2)}
.shop-tab.on{background:#fff3d4;color:#4a3113;border-color:#8a5c2e;text-shadow:none;
box-shadow:0 3px 0 rgba(0,0,0,.25)}
.shop-tab:focus-visible{outline:3px solid #38cde6;outline-offset:2px}
.shop-head h2{white-space:nowrap}
@media (max-width:620px){.shop-head h2{font-size:21px}}
.mapbtn{position:relative;overflow:hidden;border-color:#eafcff;color:#062b3d;
background:linear-gradient(180deg,#5fe0d0,#1fa9c8);box-shadow:0 4px 0 #0d7793,0 0 16px rgba(95,224,208,.5);
animation:mapBeat 2.4s ease-in-out infinite}
.mapbtn:hover{filter:brightness(1.06)}
.mapbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #0d7793}
.mapbtn .ico{filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.mapbtn::after{content:"";position:absolute;top:-60%;left:-40%;width:28%;height:220%;
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
transform:rotate(18deg);animation:mapShine 3.4s ease-in-out infinite}
@keyframes mapBeat{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.07)}96%{transform:scale(.98)}}
@keyframes mapShine{0%,62%{left:-40%}88%,100%{left:120%}}
@media (prefers-reduced-motion:reduce){.mapbtn{animation:none}.mapbtn::after{display:none}}
.mapbtn .badge,.iconbtn .badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
background:#ff4b3e;color:#fff;font-size:12px;font-weight:900;font-style:normal;display:flex;align-items:center;justify-content:center;
border:2px solid #fff;animation:badgePop 1.2s ease-in-out infinite}
.boatchip{pointer-events:auto;cursor:pointer;font-family:inherit;border:none;text-align:left}
.boatchip.ready{background:linear-gradient(180deg,#ffd764,#efa622);color:#4a2f00;animation:badgePop 1.1s ease-in-out infinite}
.boatchip.ready b{color:#4a2f00}
.boatchip.idle{background:#2f6f9b}
.catch{position:absolute;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translateX(-50%);pointer-events:auto;cursor:pointer;
display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:16px;border:4px solid #fff;
background:linear-gradient(180deg,#fffaf0,#f6e7c8);box-shadow:0 8px 0 rgba(0,0,0,.25),0 14px 30px rgba(0,0,0,.25);
font-family:inherit;color:#4a3113;z-index:4}
.catch.pop{animation:catchPop .45s cubic-bezier(.3,1.7,.5,1) backwards}
@keyframes catchPop{from{transform:translateX(-50%) scale(.4);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.catch img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(80,50,20,.3))}
.cc-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cc-txt b{font-size:20px;font-weight:900;line-height:1}
.cc-row{display:flex;gap:6px;align-items:center}
.cc-row em{font-style:normal;font-size:11px;font-weight:900;color:#fff;padding:1px 8px;border-radius:8px;background:#9aa6b2}
.cc-row small{font-size:12px;font-weight:800;color:#7a5526}
.catch strong{font-size:18px;font-weight:900;color:#2f9e33}
.cc-book{font-size:11px;font-weight:800;color:#8a6a3a}
.cc-new{position:absolute;top:-12px;left:-10px;background:#ff4b3e;color:#fff;font-style:normal;font-weight:900;font-size:13px;
padding:2px 8px;border-radius:8px;border:2px solid #fff;transform:rotate(-8deg)}
.act-btn.fish{background:linear-gradient(180deg,#4fb8ff,#2270c9)}
.act-btn.fish.wait{background:linear-gradient(180deg,#7fb0d8,#4f7ea8)}
.act-btn.bite{background:linear-gradient(180deg,#ff6b5a,#e0322a);animation:bitePulse .3s ease-in-out infinite alternate}
@keyframes bitePulse{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.12)}}
.world{position:absolute;inset:0;z-index:13;display:flex;flex-direction:column;background:#0f3a5c}
.wm-top{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
background:repeating-linear-gradient(180deg,#c98d52 0 22px,#c2864c 22px 23px);border-bottom:5px solid #8a5c2e}
.wm-tabs{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.wm-tab{font-family:inherit;font-size:15px;font-weight:900;cursor:pointer;padding:7px 14px;border-radius:12px;
border:3px solid rgba(255,243,212,.4);background:rgba(255,255,255,.12);color:#fff8e6;text-shadow:0 2px 0 rgba(90,50,15,.5)}
.wm-tab.on{background:#fff3d4;color:#4a3113;border-color:#8a5c2e;text-shadow:none}
.wm-wallet{margin:0;padding:5px 12px;font-size:17px}
.wm-x{flex:none;font-family:inherit;font-size:17px;font-weight:900}
.wm-map{position:relative;flex:1;min-height:0}
.wm-scroll{position:absolute;inset:0;overflow:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;cursor:grab}
.wm-board{position:relative;margin:0 auto 190px}
.wm-board canvas{position:absolute;inset:0;width:100%;height:100%}
.wm-isle,.wm-trip{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
padding:0;border:0;background:transparent;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:40%}
.wm-isle{width:210px;height:190px}
.wm-trip{width:124px;height:118px}
.wm-lbl{display:flex;flex-direction:column;align-items:center;padding:4px 14px 5px;border-radius:14px;border:3px solid #fff;
background:linear-gradient(180deg,#fffdf4,#fff0cf);color:#4a3113;box-shadow:0 4px 0 rgba(0,0,0,.25),0 6px 14px rgba(0,30,60,.25);
white-space:nowrap;transition:transform .12s,box-shadow .12s}
.wm-lbl b{font-size:15px;font-weight:900;line-height:1.1}
.wm-lbl small{font-size:11px;font-weight:800;color:#7a5526}
.wm-isle:hover .wm-lbl,.wm-trip:hover .wm-lbl{transform:translateY(-3px) scale(1.04)}
.wm-isle:active .wm-lbl,.wm-trip:active .wm-lbl{transform:translateY(1px) scale(.98)}
.wm-isle:focus-visible,.wm-trip:focus-visible{outline:3px solid #ffd23f;outline-offset:-6px}
.wm-isle.locked .wm-lbl{background:linear-gradient(180deg,#f4f1ea,#dcd6ca);color:#5a5650}
.wm-isle.locked .wm-lbl small{color:#c0391e}
.wm-isle.sel .wm-lbl,.wm-trip.sel .wm-lbl{border-color:#ffd23f;box-shadow:0 0 0 4px #ffd23f,0 4px 0 rgba(0,0,0,.25),0 0 22px rgba(255,210,60,.8)}
.wm-trip .wm-lbl{background:linear-gradient(180deg,#2f6fa8,#1f4f82);color:#fff;border-color:#bfe6ff;padding:3px 11px 4px}
.wm-trip .wm-lbl b{font-size:13px}
.wm-trip .wm-lbl small{color:#bfe6ff}
.wm-trip.locked .wm-lbl{background:linear-gradient(180deg,#65727f,#4a5866);border-color:#9aa8b6}
.wm-trip.out .wm-lbl{background:linear-gradient(180deg,#ff6a5e,#d8413a);border-color:#fff}
.wm-trip.out .wm-lbl small{color:#fff}
.wm-pin{position:absolute;transform:translate(-50%,0);background:#ec4f5f;color:#fff;font-weight:900;font-size:13px;
padding:2px 10px;border-radius:10px;border:3px solid #fff;animation:badgePop 1.4s ease-in-out infinite;pointer-events:none}
.wm-sheet{position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);
width:min(560px,94vw);display:flex;flex-direction:column;gap:4px;padding:12px 16px 14px;border-radius:14px;
background:#fff8e6;border:4px solid #8a5c2e;box-shadow:0 10px 30px rgba(0,0,0,.4);color:#4a3113;text-align:center}
.wm-sheet > b{font-size:19px;font-weight:900}
.wm-sheet > span{font-size:13px;font-weight:700;color:#6b4620;line-height:1.35}
.wm-actions{display:flex;gap:8px;margin-top:6px}
.wm-actions:empty{display:none}
.wm-actions .big{padding:11px 10px;font-size:15px}
button.big.soft{background:#e6dcc8;color:#4a3113;box-shadow:0 6px 0 #b8a88a}
.wm-page{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 30px;touch-action:pan-y;-webkit-overflow-scrolling:touch;
background:radial-gradient(120% 80% at 50% 0,#1d5a86,#0f3a5c)}
.wm-fishhead{color:#fff8e6;font-weight:900;font-size:18px;text-align:center;margin-bottom:10px}
.wm-sec{max-width:760px;margin:0 auto 14px;background:rgba(255,248,230,.96);border:4px solid #8a5c2e;border-radius:14px;padding:10px 12px 12px}
.wm-sec h3{font-size:17px;font-weight:900;color:#4a3113}
.wm-sec > small{display:block;font-size:12px;font-weight:800;color:#7a5526;margin-bottom:8px}
.wm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.wm-fish{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;border-radius:10px;
background:#fff;border:3px solid var(--rar,#9aa6b2)}
.wm-fish img{width:70px;height:70px;object-fit:contain}
.wm-fish b{font-size:13px;font-weight:900;color:#4a3113;text-align:center;line-height:1.1}
.wm-fish small{font-size:10.5px;font-weight:800;color:#7a5526;text-align:center;line-height:1.2}
.wm-fish.unknown{background:#e9e4da}
.wm-fish.unknown img{filter:brightness(0) opacity(.28)}
.wm-hq{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;align-content:start}
.wm-up{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;border-radius:14px;background:#fff8e6;border:4px solid #8a5c2e;color:#4a3113}
.wm-up b{font-size:18px;font-weight:900}
.wm-up i{font-style:normal;font-size:12px;font-weight:900;color:#fff;background:#2f6f9b;border-radius:8px;padding:1px 8px;align-self:flex-start}
.wm-up small{font-size:12.5px;font-weight:700;color:#6b4620;line-height:1.3}
.wm-up small.next{color:#2f7a28}
.wm-up .big{margin-top:6px;padding:11px 8px;font-size:15px}
@media (max-width:620px){.wm-tab{padding:6px 10px;font-size:13px}.wm-wallet{font-size:14px;padding:4px 8px}}
.lvl{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:6px;align-self:flex-start;
padding:3px 10px 3px 3px;border-radius:20px;border:2px solid #b8e3ff;background:#1d3a5a;font-family:inherit;
box-shadow:0 3px 0 rgba(0,0,0,.3)}
.lvl b{min-width:26px;height:26px;padding:0 5px;border-radius:13px;background:linear-gradient(180deg,#7fd8ff,#2f8fd8);color:#fff;
font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.lvl-bar{display:block;width:74px;height:9px;border-radius:5px;background:rgba(255,255,255,.16);overflow:hidden}
.lvl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7fd8ff,#bff0ff);border-radius:5px;transition:width .4s ease}
.lvl-bar.big{width:100%;height:14px;border-radius:7px;background:rgba(93,61,24,.25)}
.dock{position:absolute;right:14px;bottom:calc(120px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;pointer-events:none;z-index:3}
.dk{pointer-events:auto;cursor:pointer;position:relative;width:80px;height:80px;border-radius:22px;border:4px solid #fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-family:inherit;
box-shadow:0 5px 0 rgba(0,0,0,.3);transition:transform .1s}
.dk:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.dk .ico{width:48px;height:48px}
.dk small{font-size:13px;font-weight:900;line-height:1;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);font-variant-numeric:tabular-nums;
white-space:nowrap;margin-top:1px}
.dk.chest{background:linear-gradient(180deg,#ffcf5a,#f08a1c)}
.dk.wheel{background:linear-gradient(180deg,#b88cff,#7a4fe0)}
.dk.ach{background:linear-gradient(180deg,#5fc8ff,#2a7fd0)}
.dk.ready{animation:dkReady 1.3s ease-in-out infinite}
.dk.ready::after{content:"";position:absolute;inset:-7px;border-radius:27px;border:3px solid #ffe066;opacity:.8;animation:dkRing 1.3s ease-out infinite;pointer-events:none}
@keyframes dkReady{0%,100%{transform:scale(1) rotate(0)}10%{transform:scale(1.1) rotate(-6deg)}20%{transform:scale(1.1) rotate(6deg)}30%{transform:scale(1) rotate(0)}}
@keyframes dkRing{from{transform:scale(.9);opacity:.9}to{transform:scale(1.25);opacity:0}}
.dk .badge{position:absolute;top:-11px;right:-11px;min-width:28px;height:28px;padding:0 7px;border-radius:14px;background:#ff3b3b;
color:#fff;font-style:normal;font-size:15px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
@media (prefers-reduced-motion:reduce){.dk.ready,.dk.ready::after{animation:none}}
#chests,#wheel,#ach,#boatOv{z-index:12}
#chests .panel,#wheel .panel,#ach .panel,#boatOv .panel{
background:repeating-linear-gradient(180deg,#c98d52 0 26px,#c2864c 26px 27px,#c98d52 27px 53px);
border:6px solid #8a5c2e;border-radius:12px;color:#5d3d18;
box-shadow:0 16px 42px rgba(0,0,0,.5),inset 0 3px 0 rgba(255,255,255,.2),inset 0 -6px 0 rgba(0,0,0,.16)}
.panel.rp{padding:16px 16px 18px;width:min(440px,94vw)}
.panel.rp.wide{width:min(560px,94vw)}
.rp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rp-head h2{flex:1;margin:0;text-align:left;font-size:25px;color:#fff8e6;text-shadow:0 3px 0 #7a4a1c;white-space:nowrap}
.rp-x{flex:none;font-family:inherit;font-size:17px;font-weight:900}
.rp-sub{font-size:12.5px;font-weight:800;color:#fff3d4;text-shadow:0 1px 0 rgba(90,50,15,.6);margin:0 0 10px;line-height:1.35;text-align:left}
.ch-list,.bp-list,.ach-list{display:flex;flex-direction:column;gap:8px}
.ch-row,.bp-trip,.ach-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:#fff8e6;border:3px solid #8a5c2e;text-align:left}
.ch-row .big,.bp-trip .big,.ach-row .big{width:auto;min-width:92px;padding:11px 12px;font-size:15px;flex:none}
.ch-txt,.bp-txt,.ach-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ch-txt b,.bp-txt b,.ach-txt b{font-size:16px;font-weight:900;color:#4a3113;line-height:1.1}
.ch-txt small,.bp-txt small,.ach-txt small{font-size:12px;font-weight:800;color:#7a5526;line-height:1.25}
.bp-txt em{font-style:normal;font-size:11.5px;font-weight:900;color:#2f7a28}
.ch-row.has{border-color:#2f9e33;box-shadow:0 0 0 3px rgba(143,227,138,.6)}
.ch-reveal{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 4px}
.ch-title{font-size:22px;font-weight:900;color:#fff8e6;text-shadow:0 3px 0 #7a4a1c}
.ch-rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:10px}
.wh-result{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:10px}
.wh-result > b{width:100%;font-size:22px;font-weight:900;color:#fff8e6;text-shadow:0 3px 0 #7a4a1c}
.wh-result .big{width:100%}
.ach-lvl{display:flex;flex-direction:column;gap:5px;padding:10px 12px;margin-bottom:10px;border-radius:12px;background:#fff8e6;border:3px solid #8a5c2e;text-align:left}
.ach-lvl b{font-size:18px;font-weight:900;color:#2a6fb5}
.ach-lvl small{font-size:11.5px;font-weight:800;color:#7a5526;line-height:1.3}
.ach-lvl .lvl-bar i{background:linear-gradient(90deg,#2f8fd8,#7fd8ff)}
.ach-bar{display:block;height:8px;border-radius:4px;background:rgba(93,61,24,.2);overflow:hidden;margin-top:3px}
.ach-bar i{display:block;height:100%;background:#43c23b;border-radius:4px}
.ach-txt em{font-style:normal;font-size:11px;font-weight:900;color:#5d3d18;font-variant-numeric:tabular-nums}
.ach-side{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.ach-row.claim{border-color:#2f9e33;box-shadow:0 0 0 3px rgba(143,227,138,.7)}
.ach-row.done{opacity:.7}
.bp-status{display:flex;flex-direction:column;gap:4px;padding:10px 12px;margin-bottom:10px;border-radius:12px;background:#fff8e6;border:3px solid #8a5c2e;text-align:left}
.bp-status b{font-size:18px;font-weight:900;color:#4a3113}
.bp-status small{font-size:12.5px;font-weight:800;color:#7a5526;font-variant-numeric:tabular-nums}
.bp-status.ready{border-color:#2f9e33;background:#f1fbe9}
.bp-status .big{margin-top:6px}
.bp-bar{display:block;height:10px;border-radius:5px;background:rgba(93,61,24,.2);overflow:hidden}
.bp-bar i{display:block;height:100%;background:linear-gradient(90deg,#4fb8ff,#2270c9);border-radius:5px;transition:width .5s linear}
.bp-ico{flex:none;width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #8a5c2e}
.bp-trip.locked{opacity:.75}
.bp-trip.out{border-color:#2270c9}
.boatchip.idle{animation:badgePop 1.4s ease-in-out infinite}
@media (max-width:620px){
.chip.small:not(.star){display:none}
.catch{top:auto;bottom:calc(20px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 24px)}
.dock{bottom:calc(148px + env(safe-area-inset-bottom));right:10px}
.dk{width:70px;height:70px;border-radius:20px}
.dk .ico{width:42px;height:42px}
.dk .dk-img{width:60px;height:60px}
.dock{gap:12px}
.panel.rp{padding:12px 10px 14px}
.rp-head h2{font-size:21px}
.ch-row .big,.bp-trip .big,.ach-row .big{min-width:74px;padding:10px 8px;font-size:14px}
}
@media (max-height:500px){
.chip.small:not(.star){display:none}
.task.boatchip{display:flex}
.dock{flex-direction:row;bottom:calc(10px + env(safe-area-inset-bottom));right:12px}
.dk{width:64px;height:64px;border-radius:18px}
.dk .ico{width:38px;height:38px}
.dk .dk-img{width:56px;height:56px}
.dk small{font-size:11.5px}
.dock{gap:14px}
.tut{left:calc(12px + env(safe-area-inset-left));transform:none;width:min(430px,calc(100vw - 270px));animation-name:tutInL}
}
@keyframes tutInL{from{opacity:0;transform:translateY(14px)}}
.reel{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;padding:12px;
background:radial-gradient(circle at 50% 50%,rgba(6,20,40,.15),rgba(6,20,40,.55));touch-action:none}
.reel-card{display:grid;grid-template-columns:1fr;gap:8px;justify-items:center;width:min(320px,94vw);padding:12px 14px 12px;border-radius:20px;
background:repeating-linear-gradient(180deg,#c98d52 0 22px,#c2864c 22px 23px);border:5px solid #8a5c2e;
box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 3px 0 rgba(255,255,255,.25)}
.reel-top{display:flex;align-items:center;gap:8px}
.reel-head{color:#fff8e6;font-size:21px;font-weight:900;text-shadow:0 2px 0 #7a4a1c;white-space:nowrap}
.reel-rar{font-style:normal;font-size:11px;font-weight:900;color:#fff;padding:2px 9px;border-radius:9px;background:#9aa6b2;
border:2px solid rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.5px}
.reel-intro{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.reel-intro span{display:flex;align-items:center;gap:5px;padding:4px 9px 4px 4px;border-radius:12px;background:#fff8e6;
border:2px solid #8a5c2e;font-size:12px;font-weight:800;color:#5d3d18;white-space:nowrap}
.reel-intro span b{font-weight:900;color:#2a1a08}
.ri{flex:none;width:20px;height:20px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;color:#fff}
.ri.up{background:#2f9e33}.ri.dn{background:#2270c9}.ri.ok{background:#ff9f1c}
.reel-body{display:flex;gap:8px;align-items:stretch;justify-content:center}
.reel-body canvas{position:relative;display:block;width:170px;height:min(290px,38vh);border-radius:14px;border:4px solid #5d3d18;
background:#2a7fbf;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2),0 4px 0 rgba(0,0,0,.25)}
.reel-prog{position:relative;width:22px;border-radius:11px;background:#4a2f12;display:flex;align-items:flex-end;overflow:hidden;
border:3px solid #5d3d18;box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.reel-prog i{display:block;width:100%;height:35%;border-radius:8px;background:linear-gradient(180deg,#ffe066,#ff9f1c);transition:background .2s}
.reel-prog.good i{background:linear-gradient(180deg,#b4f5a0,#2f9e33)}
.reel-goal{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:12px;color:#ffe066;text-shadow:0 1px 0 #000}
.reel-status{font-size:14px;font-weight:900;color:#fff8e6;text-shadow:0 2px 0 rgba(90,50,15,.7);min-height:18px;text-align:center;
padding:3px 12px;border-radius:12px;background:rgba(74,47,18,.45)}
.reel-status.in{color:#c8ffd2;background:rgba(31,111,34,.6)}
.reel-status.up,.reel-status.down{color:#fff0a8}
.reel-status.lost{color:#ffc4b8}.reel-status.won{color:#fff;background:#2f9e33}
.reel-hold{width:100%;padding:14px 10px;border-radius:16px;border:4px solid #fff;font-family:inherit;font-size:24px;font-weight:900;letter-spacing:3px;
color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);background:linear-gradient(180deg,#6fe89a,#2f9e33);box-shadow:0 6px 0 #1f6f22;
cursor:pointer;touch-action:none;animation:holdPulse 1s ease-in-out infinite}
.reel-hold.down{transform:translateY(4px);box-shadow:0 2px 0 #1f6f22;animation:none;background:linear-gradient(180deg,#9df0a8,#43c23b)}
@keyframes holdPulse{50%{transform:scale(1.04)}}
.reel-quit{background:none;border:none;color:#fff3d4;font-family:inherit;font-size:12px;font-weight:800;text-decoration:underline;cursor:pointer;padding:2px}
.reel.won .reel-card{animation:reelWin .35s ease-out}
.reel.lost .reel-card{animation:reelLose .45s ease-out}
@keyframes reelWin{50%{transform:scale(1.06)}}
@keyframes reelLose{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.reel-hold{animation:none}}
@media (max-height:500px){
.reel-card{width:auto;grid-template-columns:auto auto;grid-template-areas:"top body" "intro body" "status body" "hold body" "quit body";
align-items:center;column-gap:14px;padding:8px 12px}
.reel-top{grid-area:top}.reel-intro{grid-area:intro;flex-direction:column;align-items:stretch;max-width:210px}
.reel-body{grid-area:body}.reel-status{grid-area:status}.reel-hold{grid-area:hold;padding:10px;font-size:20px}
.reel-quit{grid-area:quit}
.reel-body canvas{height:calc(100vh - 60px);max-height:300px;width:150px}
}
.dk-img{width:70px;height:70px;margin:-12px 0 -6px;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(80,30,0,.45));pointer-events:none}
.dk.chest.ready .dk-img{animation:dkChestWob 1.6s ease-in-out infinite}
@keyframes dkChestWob{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-9deg) scale(1.06)}84%{transform:rotate(8deg) scale(1.06)}92%{transform:rotate(-4deg)}}
.ch-row{position:relative;min-height:74px;padding:6px 10px 6px 6px;overflow:hidden}
.ch-row.wood{background:linear-gradient(90deg,#ffe9c4,#fff8e6 55%)}
.ch-row.silver{background:linear-gradient(90deg,#dbe9f7,#f6fbff 55%);border-color:#5a7896}
.ch-row.gold{background:linear-gradient(90deg,#ffe07a,#fff6d8 55%);border-color:#b07a10}
.ch-row.epic{background:linear-gradient(90deg,#e2c6ff,#f8f0ff 55%);border-color:#7a3fd0}
.ch-img{flex:none;width:76px;height:76px;margin:-6px -2px -8px -4px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(60,30,5,.35))}
.ch-row:not(.has) .ch-img{filter:grayscale(.55) brightness(.92) drop-shadow(0 4px 3px rgba(60,30,5,.25))}
.ch-row.has .ch-img{animation:dkChestWob 2s ease-in-out infinite}
.ch-row.epic .ch-txt b{color:#5a24a8}
.ch-row.silver .ch-txt b{color:#2c4a6a}
#chReveal{position:relative;overflow:hidden;margin:-4px -4px 0;padding:10px 6px 8px;border-radius:14px;
background:radial-gradient(90% 70% at 50% 38%,#4a2f88 0%,#241845 60%,#150d2a 100%);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
#chReveal .ch-title{color:#fff;text-shadow:0 3px 0 #0c0620;font-size:24px;letter-spacing:.5px}
.ch-box{position:relative;width:210px;height:190px;display:flex;align-items:center;justify-content:center;margin:-4px auto 0}
.ch-box img{position:relative;z-index:2;width:196px;height:196px;object-fit:contain;filter:drop-shadow(0 12px 8px rgba(0,0,0,.5))}
.ch-rays{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;z-index:0;opacity:0;
background:repeating-conic-gradient(rgba(255,236,150,.55) 0 9deg,rgba(255,236,150,0) 9deg 22deg);
-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);
transition:opacity .4s;pointer-events:none}
.ch-flash{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;z-index:1;opacity:0;
background:radial-gradient(circle,#fff 0%,rgba(255,240,180,.9) 30%,rgba(255,200,80,0) 70%);pointer-events:none}
.ch-box.silver .ch-rays{background:repeating-conic-gradient(rgba(200,230,255,.55) 0 9deg,rgba(200,230,255,0) 9deg 22deg)}
.ch-box.epic .ch-rays{background:repeating-conic-gradient(rgba(230,170,255,.6) 0 9deg,rgba(230,170,255,0) 9deg 22deg)}
.ch-box.drop img{animation:chDrop .5s cubic-bezier(.3,.1,.5,1) both}
.ch-box.shake img{animation:chShake .22s ease-in-out infinite}
.ch-box.open img{animation:chPop .5s cubic-bezier(.3,1.8,.5,1)}
.ch-box.open .ch-rays{opacity:1;animation:chRays 7s linear infinite}
.ch-box.open .ch-flash{animation:chFlash .6s ease-out}
@keyframes chDrop{0%{transform:translateY(-240px) scale(.7);opacity:0}60%{transform:translateY(0) scale(1.05,.92);opacity:1}80%{transform:translateY(-14px) scale(.98,1.03)}100%{transform:none}}
@keyframes chShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) scale(1.04)}75%{transform:rotate(8deg) scale(1.04)}}
@keyframes chPop{0%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes chRays{to{transform:rotate(360deg)}}
@keyframes chFlash{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(40)}}
.ch-rewards{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:10px;padding:0 4px}
#chReveal #chOk{position:relative;z-index:2;width:auto;min-width:160px}
.rw{display:flex;flex-direction:column;align-items:center;gap:1px;width:84px;padding:6px 4px 7px;border-radius:12px;
background:linear-gradient(180deg,#ffffff,#ffeecb);border:3px solid #8a5c2e;box-shadow:0 4px 0 rgba(0,0,0,.25);
animation:rwIn .38s cubic-bezier(.3,1.7,.5,1) backwards}
.rw img{width:48px;height:48px;object-fit:contain;margin:-2px 0 0;filter:drop-shadow(0 2px 2px rgba(60,30,5,.3))}
.rw .ico{width:40px;height:40px;margin:2px 0 4px;color:#e0a02a}
.rw .ico.bolt{color:#8a5cff}
.rw .ico.wheel{color:#7a4fe0}
.rw .ico.skin{color:#ff5fa2}
.rw b{font-size:17px;font-weight:900;color:#2f7a28;line-height:1;font-variant-numeric:tabular-nums}
.rw small{font-size:10.5px;font-weight:800;color:#7a5526;text-align:center;line-height:1.15}
@keyframes rwIn{from{transform:scale(.2) translateY(30px);opacity:0}}
.wh-wrap{position:relative;width:min(330px,78vw);aspect-ratio:1/1;margin:0 auto 10px}
.wh-wrap::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(255,230,120,.55),rgba(255,230,120,0) 70%);filter:blur(12px)}
.wh-wrap canvas{position:relative;width:100%;height:100%;display:block;filter:drop-shadow(0 10px 8px rgba(60,30,5,.4))}
.wh-result .rw{width:92px}
.ty-card{position:relative;margin:0 0 10px;padding:10px 12px 10px;border-radius:14px;text-align:left;overflow:hidden;
background:linear-gradient(160deg,#5a2db8 0%,#3b1d86 55%,#2a1466 100%);border:3px solid #ffd23f;
box-shadow:0 5px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.18);color:#fff}
.ty-card::before{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;
background:radial-gradient(circle,rgba(255,215,90,.35),rgba(255,215,90,0) 70%);pointer-events:none}
.ty-card.done{background:linear-gradient(160deg,#ffcf3a,#f09a12);color:#4a2a00}
.ty-head{position:relative;display:flex;align-items:center;gap:10px}
.ty-head img{flex:none;width:58px;height:58px;object-fit:contain;margin:-6px -4px -6px -6px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.ty-title{flex:1;min-width:0;display:flex;flex-direction:column}
.ty-title small{font-size:10.5px;font-weight:900;letter-spacing:1.2px;color:#ffd96b}
.ty-title b{font-size:19px;font-weight:900;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.ty-head em{flex:none;font-style:normal;font-size:30px;font-weight:900;color:#ffd23f;text-shadow:0 3px 0 rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.ty-main{position:relative;display:block;height:12px;margin:8px 0 8px;border-radius:6px;background:rgba(0,0,0,.3);overflow:hidden}
.ty-main i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ffb319,#ffe680);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.ty-parts{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
.ty-part{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 6px;min-width:0}
.ty-part span{font-size:12px;font-weight:800;line-height:1.2;color:#f3eaff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ty-part small{font-size:11px;font-weight:900;color:#ffd96b;font-variant-numeric:tabular-nums}
.ty-part.ok span::before{content:"\2713  ";color:#8fe38a}
.ty-bar{grid-column:1 / -1;display:block;height:6px;margin-top:2px;border-radius:3px;background:rgba(0,0,0,.3);overflow:hidden}
.ty-bar i{display:block;height:100%;border-radius:3px;background:#8fe38a}
.ty-reward{position:relative;display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:7px;border-top:2px dashed rgba(255,255,255,.22)}
.ty-reward img{width:40px;height:40px;object-fit:contain;margin:-6px -2px}
.ty-reward small{flex:1;margin-left:6px;font-size:11.5px;font-weight:800;line-height:1.25;color:#f3eaff}
.ty-card.done .ty-title small,.ty-card.done .ty-part span,.ty-card.done .ty-reward small{color:#4a2a00}
.ach-cat{display:flex;align-items:baseline;justify-content:space-between;margin:6px 2px -2px;color:#fff8e6;text-shadow:0 2px 0 #7a4a1c}
.ach-cat b{font-size:18px;font-weight:900}
.ach-cat small{font-size:13px;font-weight:900;color:#ffe27a;font-variant-numeric:tabular-nums}
.ach-cat:first-child{margin-top:0}
.ach-stars{display:inline-block;margin-left:4px;font-size:13px;line-height:1;letter-spacing:.5px;color:#f0a92e;text-shadow:0 1px 0 rgba(120,70,0,.35);vertical-align:1px;white-space:nowrap}
.ach-side{gap:0}
.ach-chest{width:54px;height:54px;object-fit:contain;margin:-8px 0 -12px;position:relative;z-index:1;filter:drop-shadow(0 3px 2px rgba(60,30,5,.35))}
.ach-row{padding-top:7px;padding-bottom:7px}
.ach-row.claim .ach-chest{animation:dkChestWob 1.6s ease-in-out infinite}
.ach-row.done{opacity:.72;background:#f3ecd9}
.bp-chest{flex:none;width:44px;height:44px;object-fit:contain;margin:-6px -4px;filter:drop-shadow(0 2px 2px rgba(60,30,5,.3))}
@media (max-width:620px){
.ch-img{width:64px;height:64px}
.ty-parts{grid-template-columns:1fr}
.ty-title b{font-size:17px}
.ty-head em{font-size:26px}
.rw{width:76px}
.ch-box{width:180px;height:168px}
.ch-box img{width:172px;height:172px}
}
@media (max-height:500px){
.ch-box{height:140px}
.ch-box img{width:150px;height:150px}
.wh-wrap{width:min(240px,58vh)}
}
@media (prefers-reduced-motion:reduce){
.dk.chest.ready .dk-img,.ch-row.has .ch-img,.ach-row.claim .ach-chest,.ch-box.open .ch-rays{animation:none}
}
.wb-chest{flex:none;width:52px;height:52px;object-fit:contain;margin:-8px -4px;filter:drop-shadow(0 3px 2px rgba(60,30,5,.35))}
.overlay.start{overflow:hidden}
.overlay.start::before{content:"";position:absolute;left:50%;top:34%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;
background:repeating-conic-gradient(rgba(255,226,140,.13) 0 7deg,rgba(255,226,140,0) 7deg 18deg);
-webkit-mask:radial-gradient(circle,#000 6%,transparent 55%);mask:radial-gradient(circle,#000 6%,transparent 55%);
animation:chRays 50s linear infinite;pointer-events:none}
.overlay.start .sign{transform-origin:50% -14px;animation:signIn .8s cubic-bezier(.2,1.5,.4,1) both,signSwing 4.5s ease-in-out .8s infinite}
.overlay.start .start-actions{position:relative}
@keyframes signIn{from{translate:0 -70vh;rotate:-6deg}}
@keyframes signSwing{0%,100%{rotate:-1.3deg}50%{rotate:1.3deg}}
.sign-board h1 .l2{background:linear-gradient(100deg,#ffd764 0 40%,#fff6c8 50%,#ffd764 60% 100%);background-size:250% 100%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:signShine 3.2s ease-in-out 1s infinite}
@keyframes signShine{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
@property --hole{syntax:'<percentage>';inherits:false;initial-value:0%}
.overlay.start.leaving{pointer-events:none;backdrop-filter:none;-webkit-backdrop-filter:none;
-webkit-mask:radial-gradient(circle at 50% 56%,transparent var(--hole),#000 calc(var(--hole) + 7%));
mask:radial-gradient(circle at 50% 56%,transparent var(--hole),#000 calc(var(--hole) + 7%));
animation:startHole .85s cubic-bezier(.55,0,.8,.3) forwards}
.overlay.start.leaving .sign{animation:signOut .55s cubic-bezier(.5,-.45,.8,.4) forwards}
.overlay.start.leaving .start-actions{transition:opacity .2s;opacity:0}
@keyframes startHole{to{--hole:160%}}
@keyframes signOut{from{rotate:0deg}to{translate:0 -120vh;rotate:-10deg}}
.intro-logo{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
padding-top:max(12vh,70px);pointer-events:none;text-align:center}
.il-rays{position:absolute;left:50%;top:calc(max(12vh,70px) + 60px);width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;
background:repeating-conic-gradient(rgba(255,240,170,.35) 0 6deg,rgba(255,240,170,0) 6deg 16deg);
-webkit-mask:radial-gradient(circle,#000 4%,transparent 40%);mask:radial-gradient(circle,#000 4%,transparent 40%);
animation:chRays 14s linear infinite,ilRaysIn .6s ease-out .2s both}
@keyframes ilRaysIn{from{opacity:0;scale:.3}}
.il-word{position:relative;display:flex;justify-content:center;font-weight:900;line-height:.95;white-space:nowrap}
.il-1{font-size:clamp(30px,7.5vw,62px);letter-spacing:.12em;color:#fff8e6}
.il-2{font-size:clamp(44px,12vw,110px);letter-spacing:.02em;color:#ffd764;margin-top:-.04em}
.il-word span{display:inline-block;min-width:.28em;
text-shadow:3px 0 #6e3f14,-3px 0 #6e3f14,0 3px #6e3f14,0 -3px #6e3f14,2px 2px #6e3f14,-2px 2px #6e3f14,2px -2px #6e3f14,-2px -2px #6e3f14,
0 8px 0 #4a2a0c,0 14px 24px rgba(0,0,0,.45);
animation:ilDrop .6s cubic-bezier(.2,1.7,.4,1) both;animation-delay:calc(var(--i) * 45ms + .25s)}
@keyframes ilDrop{from{translate:0 -110px;scale:.3;rotate:-14deg;opacity:0}}
.intro-logo.out{animation:ilOut .45s ease-in forwards}
@keyframes ilOut{to{scale:1.35;opacity:0}}
#hud.intro .hud-left,#hud.intro .hud-right,#hud.intro #dock,#hud.intro #offers{opacity:0;pointer-events:none}
#hud.hud-in .hud-left{animation:hudInL .6s cubic-bezier(.2,1.4,.4,1) both}
#hud.hud-in .hud-right{animation:hudInT .6s cubic-bezier(.2,1.4,.4,1) .08s both}
#hud.hud-in #offers{animation:hudInR .6s cubic-bezier(.2,1.4,.4,1) .18s both}
#hud.hud-in #dock{animation:hudInR .6s cubic-bezier(.2,1.4,.4,1) .3s both}
@keyframes hudInL{from{translate:-120% 0;opacity:0}}
@keyframes hudInR{from{translate:140% 0;opacity:0}}
@keyframes hudInT{from{translate:0 -140%;opacity:0}}
@media (prefers-reduced-motion:reduce){
.overlay.start::before,.overlay.start .sign,.sign-board h1 .l2,.il-rays{animation:none}
.il-word span{animation-duration:.01s}
}
.ch-row.deliv{background:linear-gradient(90deg,#ffe0e8,#fff8e6 55%);border-color:#c2405a}
.ch-box.gift img{width:170px;height:170px}
.rd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 2px 0;color:#fff8e6;text-shadow:0 2px 0 #7a4a1c}
.rd-head b{font-size:18px;font-weight:900}
.rd-head .rd-all{width:auto;padding:8px 12px;font-size:14px}
.rd-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;background:#f3ead4;border:3px solid #b08a5a;text-align:left;opacity:.85}
.rd-row.ready{background:#fff8e6;border-color:#2f9e33;box-shadow:0 0 0 3px rgba(143,227,138,.55);opacity:1}
.rd-row.big:not(.ready){border-color:#d9a21a;background:#fff3cf;opacity:1}
.rd-lvl{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;
font-size:16px;font-weight:900;color:#fff;background:linear-gradient(180deg,#7fd8ff,#2f8fd8);border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.rd-row:not(.ready) .rd-lvl{background:linear-gradient(180deg,#c9b89a,#9a8466)}
.rd-items{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.rd-it{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:900;color:#4a3113;white-space:nowrap}
.rd-it img{width:26px;height:26px;object-fit:contain;margin:-4px 0}
.rd-row .big{width:auto;min-width:84px;padding:9px 10px;font-size:14px;flex:none}
.rd-lock{flex:none;font-size:12px;font-weight:900;color:#7a5526}
.ach-prize{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:900;color:#2f7a28;white-space:nowrap}
.ach-prize img{width:28px;height:28px;object-fit:contain;margin:-4px 0}
.dk .dk-img{width:52px;height:52px;margin:-4px 0 1px}
.dk small{position:relative;z-index:1;text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 4px rgba(0,0,0,.45)}
@media (max-width:620px){.dk .dk-img{width:46px;height:46px}}
@media (max-height:500px){.dk .dk-img{width:42px;height:42px;margin:-3px 0 0}}
#fest{z-index:12}
#fest .panel{
background:repeating-linear-gradient(180deg,#c98d52 0 26px,#c2864c 26px 27px,#c98d52 27px 53px);
border:6px solid #8a5c2e;border-radius:12px;color:#5d3d18;
box-shadow:0 16px 42px rgba(0,0,0,.5),inset 0 3px 0 rgba(255,255,255,.2),inset 0 -6px 0 rgba(0,0,0,.16)}
.fe-body{display:flex;flex-direction:column;gap:8px}
.fe-top{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:3px solid #fff;
color:#fff;text-align:left;box-shadow:0 5px 0 rgba(0,0,0,.25);overflow:hidden}
.fe-top::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);pointer-events:none}
.fe-hat{flex:none;width:86px;height:86px;object-fit:contain;margin:-8px -4px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));
animation:dkChestWob 2.2s ease-in-out infinite}
.fe-txt{position:relative;display:flex;flex-direction:column;gap:1px;min-width:0}
.fe-txt small{font-size:10.5px;font-weight:900;letter-spacing:1.2px;opacity:.9}
.fe-txt b{font-size:20px;font-weight:900;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.fe-txt span{font-size:12px;font-weight:800;opacity:.95}
.fe-time{font-style:normal;font-size:13px;font-weight:900;margin-top:3px;align-self:flex-start;padding:2px 10px;border-radius:10px;
background:rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.fe-pts{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:9px 12px;border-radius:12px;background:#fff8e6;border:3px solid #8a5c2e;text-align:left}
.fe-pts b{font-size:18px;font-weight:900;color:#4a3113;font-variant-numeric:tabular-nums}
.fe-pts small{align-self:center;font-size:12px;font-weight:800;color:#7a5526}
.fe-bar{grid-column:1 / -1;display:block;height:12px;border-radius:6px;background:rgba(93,61,24,.2);overflow:hidden}
.fe-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ff9f1c,#ffd23f)}
.fe-how{display:flex;flex-wrap:wrap;gap:5px}
.fe-chip{font-size:11.5px;font-weight:800;color:#4a3113;background:#fff3d4;border:2px solid #b08a5a;border-radius:10px;padding:2px 8px}
.fe-chip b{color:#2f7a28}
.fe-ad{width:100%}
.fe-row.done{opacity:.55}
.rd-it .ico{width:24px;height:24px;color:#e0a02a;margin:-4px 0}
.rd-it .ico.bolt{color:#8a5cff}
.ch-row.deliv.ad{background:linear-gradient(90deg,#e6f4ff,#fff8e6 55%);border-color:#2f6fa8}
.dk.fest{background:linear-gradient(180deg,#ff5fa2,#6a2fd0)}
.px-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.px-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 8px 10px;border-radius:12px;
background:#fff;border:3px solid #e4d6b8;text-align:center}
.px-card img{width:78px;height:78px;object-fit:contain;margin-top:-4px}
.px-card b{font-size:14px;font-weight:900;color:#4a3113;line-height:1.1}
.px-card small{font-size:11px;font-weight:800;color:#7a5526;line-height:1.25}
.px-card em{font-style:normal;font-size:11.5px;font-weight:900;color:#2f7a28;font-variant-numeric:tabular-nums}
.px-card .ach-bar{width:100%}
.px-stars{font-size:15px;letter-spacing:1px;color:#f0a92e;text-shadow:0 1px 0 rgba(120,70,0,.3)}
.fr-hearts{font-size:16px;letter-spacing:2px;color:#ff4f7a}
.px-card.max{border-color:#ffc629;background:linear-gradient(180deg,#fffbe8,#fff)}
.px-card.unknown{background:#efe9dd}
.px-card.unknown img{filter:brightness(0) opacity(.28)}
@media (max-width:620px){
.px-grid{grid-template-columns:repeat(2,1fr)}
.fe-hat{width:70px;height:70px}
.fe-txt b{font-size:17px}
}