*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1b0f2e;color:#3b1a08;font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
img{-webkit-user-drag:none;user-select:none}
#app{position:fixed;inset:0;max-width:540px;margin:0 auto;overflow:hidden;background:#7cc8ff;box-shadow:0 0 60px #000}
#app.shake{animation:shake .32s}
#app.bigshake{animation:shake .5s 2}
@keyframes shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
/* ---------- top bars ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;background:linear-gradient(180deg,#e8323f,#a50f1c 70%,#7d0a14);border-bottom:3px solid #ffcf4a;box-shadow:0 3px 0 #7a4a00,0 6px 16px #0006;z-index:5;position:relative}
.title{display:flex;align-items:center;gap:6px;font-weight:900;font-size:19px;color:#fff3b0;-webkit-text-stroke:1px #6b1500;text-shadow:0 2px 0 #6b1500;white-space:nowrap}
.title img{height:44px;margin:-8px 0 -6px;filter:drop-shadow(0 2px 2px #0008)}
.title small{display:block;font-size:10px;letter-spacing:2px;-webkit-text-stroke:0;color:#ffd77a;text-shadow:none}
.tb-btns{display:flex;gap:5px}
.chip{border:2px solid #ffe08a;background:linear-gradient(180deg,#ffcf4a,#f29a0f);color:#6b1500;border-radius:12px;padding:6px 9px;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #9a4a00,0 4px 8px #0005;white-space:nowrap}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 #9a4a00}
.chip:disabled{filter:grayscale(1);opacity:.55}
.starbar{text-align:center;font-size:13px;font-weight:800;padding:6px;color:#fff;background:#0007;text-shadow:0 1px 2px #000;z-index:2}
/* ---------- map ---------- */
#mapScreen{background:url(img/bg.webp) center/cover no-repeat,#7cc8ff}
#mapScroll{flex:1;overflow-y:auto;padding:12px 12px 40px}
.temple{position:relative;margin:0 0 16px;border-radius:20px;padding:12px;background:linear-gradient(180deg,#fff8e1,#ffe3a3);border:3px solid #ffbf2f;box-shadow:0 5px 0 #b06d00,0 10px 24px #0006;overflow:hidden}
.temple.locked{filter:grayscale(.85) brightness(.75)}
.temple.secret{background:linear-gradient(180deg,#fff3c0,#ffc94a);border-color:#fff}
.thead{display:flex;align-items:center;gap:10px}
.tport{width:74px;height:74px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ffe9a6,#ff8a3a 60%,#c4141c);border:3px solid #fff;box-shadow:0 3px 0 #b06d00;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.tport img{height:96%;margin-bottom:-4px;filter:drop-shadow(0 2px 2px #0006)}
.temple.locked.secret .tport img{filter:brightness(0) opacity(.6)}
.tname{font-weight:900;font-size:17px;color:#a50f1c}
.tmeta{font-size:12px;color:#7a4a1a;font-weight:700}
.tease{font-size:12px;font-style:italic;color:#7a4a1a;margin-top:8px}
.lvls{display:flex;gap:8px;margin-top:10px}
.lv{flex:1;position:relative;border-radius:14px;padding:7px 2px 5px;text-align:center;cursor:pointer;background:linear-gradient(180deg,#5fd0ff,#1e7be0);color:#fff;font-weight:900;border:3px solid #fff;box-shadow:0 4px 0 #0f4a9a;text-shadow:0 2px 0 #0a3a7a}
.lv .n{font-size:20px}
.lv .s{font-size:11px;letter-spacing:1px;color:#ffe14d;min-height:14px;text-shadow:0 1px 0 #7a4a00}
.lv.done{background:linear-gradient(180deg,#7ee36a,#2fa82a);box-shadow:0 4px 0 #1a6a14;text-shadow:0 2px 0 #1a5a10}
.lv.locked{background:#b9a98a;color:#7a6a50;border-color:#e8dcc0;box-shadow:0 4px 0 #8a7a5a;text-shadow:none}
.lv.next{animation:pulse 1s infinite}
.lv.relic::after{content:"🏺";position:absolute;top:-10px;right:-6px;font-size:16px}
@keyframes pulse{50%{transform:scale(1.07);box-shadow:0 4px 0 #0f4a9a,0 0 18px #fff}}
.tbtn{margin-top:8px;font-size:12px;font-weight:800;color:#a50f1c;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0}
/* ---------- game ---------- */
.topbar.game{gap:5px}
.gtitle{flex:1;min-width:0;text-align:center}
#gName{font-weight:900;font-size:14px;color:#fff3b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 #6b1500}
#gSub{font-size:11px;color:#ffe0a0;font-weight:700}
#gameScreen{--sky1:#6ec6ff;--sky2:#d8f1ff;--floorF:none;--wallF:none;--trim:#ffbf2f}
#gameScreen.t1{--sky1:#7fe0b0;--sky2:#e8fff0;--floorF:hue-rotate(55deg) saturate(1.3);--wallF:hue-rotate(-85deg) saturate(1.2)}
#gameScreen.t2{--sky1:#5aa0ff;--sky2:#d6e8ff;--floorF:hue-rotate(170deg) saturate(1.1);--wallF:none}
#gameScreen.t3{--sky1:#8a6ae0;--sky2:#e6dcff;--floorF:hue-rotate(225deg) saturate(1.2) brightness(.95);--wallF:hue-rotate(40deg) saturate(1.3) brightness(.9)}
#gameScreen.t4{--sky1:#ffb84a;--sky2:#fff2c8;--floorF:sepia(.6) saturate(2) hue-rotate(-10deg);--wallF:hue-rotate(185deg) saturate(1.1)}
#towerScroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;background:linear-gradient(180deg,var(--sky1),var(--sky2));}
#towerScroll::before{content:"";position:sticky;top:0;display:block;height:0}
#tower{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 8px 6px}
#floors{display:flex;flex-direction:column-reverse}
.floor{position:relative;margin:0 4px}
.floor .wall{position:relative;height:46px;background:url(img/wall.webp) 0 0/96px;filter:var(--wallF);border-left:3px solid #4a5a78;border-right:3px solid #4a5a78}
.floor .wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#0004)}
.floor .flabel{position:absolute;left:6px;top:6px;font-size:10px;font-weight:900;color:#fff;background:#0007;border-radius:6px;padding:2px 6px;z-index:3;letter-spacing:1px}
.floor .torch{position:absolute;top:10px;width:8px;height:20px;background:linear-gradient(#7a4a1a,#3a2008);border-radius:2px;z-index:2}
.floor .torch::before{content:"";position:absolute;left:-5px;top:-14px;width:18px;height:18px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff6a0,#ffb02a 45%,#ff4a1a 70%,#ff4a1a00 72%);animation:flick .25s infinite alternate}
@keyframes flick{to{transform:scale(1.12,.92) translateY(1px)}}
.floor .banner{position:absolute;top:0;width:22px;height:36px;background:linear-gradient(180deg,#e8323f,#a50f1c);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);z-index:2;border-top:3px solid var(--trim)}
.floor .banner::after{content:"龍";position:absolute;left:0;right:0;top:6px;text-align:center;font-size:11px;color:#ffd84a;font-weight:900}
.floor .hall{position:relative;display:flex;align-items:stretch;height:var(--hh,148px);overflow:hidden;border-left:3px solid #4a5a78;border-right:3px solid #4a5a78;background:#e8d8b8}
.floor .tiles{position:absolute;left:-30%;right:-30%;top:-60px;bottom:0;background:url(img/floor.webp) 0 0/64px;transform:perspective(240px) rotateX(36deg);transform-origin:50% 100%;filter:var(--floorF)}
.floor .hall::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,#0006,#0000);z-index:1;pointer-events:none}
.floor .ledge{height:16px;background:linear-gradient(180deg,#fff1cf 0,#e7c98e 30%,#b98a4a 31%,#8a5a2a 100%);border-radius:0 0 4px 4px;box-shadow:0 6px 10px #0004;filter:var(--floorF);position:relative;z-index:2}
.floor .divider{width:10px;flex:none;position:relative;z-index:2;background:linear-gradient(90deg,#8695b3,#c6d1e6 40%,#7180a0);box-shadow:2px 0 4px #0003}
.floor .divider::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:12px;background:#dfe7f5;border-radius:3px}
.floor .divider .door{position:absolute;bottom:0;left:-1px;right:-1px;height:44px;background:#5a3a1a;border-radius:6px 6px 0 0;opacity:.35}
.stairs{position:absolute;bottom:-2px;width:46px;height:40px;z-index:3;pointer-events:none;background:repeating-linear-gradient(180deg,#f0dcae 0 4px,#b58a52 4px 8px);clip-path:polygon(0 100%,100% 100%,100% 0,70% 0,70% 20%,55% 20%,55% 40%,40% 40%,40% 60%,25% 60%,25% 80%,0 80%);filter:var(--floorF) drop-shadow(0 2px 2px #0005)}
.stairs.r{right:2px}.stairs.l{left:2px;transform:scaleX(-1)}
.floor.locked .hall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1a1030cc,#2a1a40aa);z-index:4}
.floor.locked .unit img{filter:brightness(.55) saturate(.5)}
.lockmsg{position:absolute;left:0;right:0;top:46px;bottom:16px;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:900;color:#fff;z-index:6;text-align:center;padding:4px;text-shadow:0 2px 2px #000}
.lockmsg b{font-size:30px}
.floor.top .wall{height:58px}
.floor.top::before{content:"";position:absolute;left:-14px;right:-14px;top:-34px;height:38px;background:linear-gradient(180deg,#e8323f,#9a0f1a);clip-path:polygon(0 100%,8% 35%,50% 0,92% 35%,100% 100%);z-index:3;filter:drop-shadow(0 3px 0 var(--trim))}
.floor.top::after{content:"";position:absolute;left:50%;top:-50px;width:22px;height:22px;margin-left:-11px;background:radial-gradient(circle,#fff6a0,#ffbf2f 60%,#c47a00);border-radius:50%;z-index:4;box-shadow:0 0 14px #ffdf6a}
.floor.entrance .wall{height:40px}
.floor.entrance .hall{--hh:118px}
.gate{position:absolute;left:50%;bottom:0;width:70px;height:84px;margin-left:-35px;background:linear-gradient(90deg,#6a3a14,#8a5226 50%,#6a3a14);border-radius:36px 36px 0 0;border:4px solid #c9a66a;border-bottom:none;z-index:1;box-shadow:inset 0 0 0 3px #4a2408}
.gate::after{content:"";position:absolute;inset:8px;border-radius:28px 28px 0 0;background:repeating-linear-gradient(90deg,#0000 0 10px,#3a1a0660 10px 12px)}
.entrance .sign{position:absolute;left:0;right:0;top:8px;text-align:center;font-size:11px;font-weight:900;color:#fff3b0;text-shadow:0 1px 2px #000;z-index:2}
.cagedeco{position:absolute;right:8px;top:2px;height:84px;z-index:5;filter:drop-shadow(0 4px 4px #0006);transform-origin:50% 0;animation:swing 2.4s ease-in-out infinite;pointer-events:none}
@keyframes swing{50%{transform:rotate(4deg)}}
.cagedeco.free{animation:freeup .9s forwards}
@keyframes freeup{to{transform:translateY(-60px) scale(1.3);opacity:0}}
/* rooms */
.room{flex:1;min-width:0;position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;cursor:pointer}
.room.boss{flex:2.2}
.unit{position:relative;display:flex;flex-direction:column;align-items:center;transition:transform .15s}
.room:active .unit{transform:scale(.94)}
.unit img{height:var(--sp,82px);max-width:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 3px 2px #0006);transform-origin:50% 100%;animation:idle 1.6s ease-in-out infinite}
.room:nth-child(odd) .unit img{animation-delay:-.7s}
@keyframes idle{50%{transform:scale(1.03,.97)}}
.room.boss .unit img{height:var(--bp,128px);animation-duration:2.2s}
.ring{position:absolute;bottom:-6px;left:50%;width:76%;height:16px;margin-left:-38%;border-radius:50%;background:radial-gradient(#0005,#0000 70%);z-index:1}
.room.win .ring{background:radial-gradient(#5dff6a99,#2ad83a44 55%,#0000 72%);box-shadow:0 0 0 2px #6dff7a inset}
.room.lose .ring{background:radial-gradient(#ff3a3a88,#ff2a2a33 55%,#0000 72%);box-shadow:0 0 0 2px #ff5a4a inset;animation:dang 1s infinite}
@keyframes dang{50%{opacity:.5}}
.badge{position:relative;z-index:3;margin-bottom:-2px;min-width:34px;padding:1px 8px 2px;border-radius:10px;font-weight:900;font-size:17px;line-height:1.1;color:#fff;text-align:center;white-space:nowrap;-webkit-text-stroke:.6px #3a0000;text-shadow:0 2px 0 #5a0000;background:linear-gradient(180deg,#ff6a5a,#d0141e);border:2px solid #fff;box-shadow:0 3px 0 #7a0010,0 4px 8px #0005}
.room.win .badge{background:linear-gradient(180deg,#ff8a4a,#e0301e)}
.room.lose .badge{background:linear-gradient(180deg,#b0101a,#5a0008);animation:dang 1s infinite}
.room.boss .badge{font-size:22px;padding:2px 12px 3px}
.badge.item{background:linear-gradient(180deg,#7ee36a,#2fa82a);box-shadow:0 3px 0 #1a6a14,0 4px 8px #0005;text-shadow:0 2px 0 #1a5a10;-webkit-text-stroke:.6px #0a3a00}
.badge.mul{background:linear-gradient(180deg,#ffe14d,#f29a0f);color:#6b1500;text-shadow:0 1px 0 #fff8;-webkit-text-stroke:0;box-shadow:0 3px 0 #9a4a00}
.badge.trap{background:linear-gradient(180deg,#c06aff,#6a1aa8);box-shadow:0 3px 0 #3a0a6a,0 4px 8px #0005;text-shadow:0 2px 0 #2a0050;-webkit-text-stroke:.6px #2a0050}
.badge.myst{background:linear-gradient(180deg,#9a7aff,#4a2ab0);box-shadow:0 3px 0 #2a1070}
.tag{position:absolute;top:6px;right:4px;z-index:4;font-size:11px;font-weight:900;color:#fff;background:#0009;border-radius:8px;padding:1px 5px}
.tag.g{background:#2fa82a}.tag.s{background:#1e5fd6}.tag.k{background:#c98a00}
.chain{position:absolute;inset:auto 0 18px;z-index:4;display:flex;align-items:center;justify-content:center;font-size:30px;filter:drop-shadow(0 2px 2px #000)}
.chain::before{content:"";position:absolute;left:8%;right:8%;height:8px;top:50%;margin-top:-4px;background:repeating-linear-gradient(90deg,#8a8a9a 0 8px,#3a3a4a 8px 10px);border-radius:4px;transform:rotate(-14deg)}
.room.relic .unit img{filter:drop-shadow(0 0 10px #b07aff)}
.room.relic.hidden .unit img{filter:brightness(0) drop-shadow(0 0 8px #b07aff);opacity:.85}
.room.done{pointer-events:none}
.room.done .unit{opacity:0}
.room.done::after{content:"";position:absolute;bottom:14px;left:50%;width:30px;height:10px;margin-left:-15px;border-radius:50%;background:radial-gradient(#ffd84a88,#0000 70%)}
.bname{position:absolute;bottom:2px;left:0;right:0;text-align:center;z-index:4;font-size:10px;font-weight:900;color:#fff;text-shadow:0 1px 2px #000}
/* hero */
#hero{position:absolute;left:0;top:0;width:110px;margin-left:-55px;z-index:8;pointer-events:none;display:flex;flex-direction:column;align-items:center;will-change:transform}
#hero img{height:var(--hp,88px);filter:drop-shadow(0 3px 2px #0007);transform-origin:50% 100%;animation:idle 1.4s ease-in-out infinite;position:relative;z-index:2}
#hero.flip img{transform:scaleX(-1)}
#hero.flip img{animation:idlef 1.4s ease-in-out infinite}
@keyframes idlef{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) scale(1.03,.97)}}
#hero.atk img{animation:none}
#hero.hurt img{filter:drop-shadow(0 0 6px #f00) brightness(1.4) sepia(1) hue-rotate(-40deg) saturate(4)}
#hero.dead img{animation:none;transform:rotate(-80deg) translate(10px,20px);opacity:.75;transition:all .4s}
#hero .shadow{position:absolute;bottom:-5px;width:64px;height:14px;border-radius:50%;background:radial-gradient(#0006,#0000 70%);z-index:1}
.hbadge{position:relative;z-index:3;margin-bottom:-2px;min-width:38px;padding:1px 9px 2px;border-radius:10px;font-weight:900;font-size:19px;line-height:1.1;color:#fff;text-align:center;white-space:nowrap;-webkit-text-stroke:.6px #001a5a;text-shadow:0 2px 0 #0a2a7a;background:linear-gradient(180deg,#5fc0ff,#1e5fd6);border:2px solid #fff;box-shadow:0 3px 0 #0a2a7a,0 4px 10px #0006}
.hbadge.bump,#power.bump{animation:bump .4s}
@keyframes bump{35%{transform:scale(1.45)}70%{transform:scale(.92)}}
/* hud */
#hud{display:flex;align-items:center;gap:10px;padding:6px 14px calc(env(safe-area-inset-bottom) + 8px);background:linear-gradient(180deg,#e8323f,#a50f1c 60%,#7d0a14);border-top:3px solid #ffcf4a;box-shadow:0 -4px 14px #0005;z-index:5}
.hport{width:54px;height:54px;border-radius:50%;overflow:hidden;border:3px solid #ffe08a;background:radial-gradient(#5fc0ff,#1e5fd6);flex:none;box-shadow:0 3px 0 #7a4a00}
.hport img{width:150%;margin:-2px 0 0 -18%}
.hmain{flex:1;text-align:center}
.hmain .lbl{font-size:10px;font-weight:900;letter-spacing:2px;color:#ffe0a0}
#power{font-size:40px;font-weight:900;line-height:1;color:#fff;-webkit-text-stroke:1.5px #0a2a7a;text-shadow:0 3px 0 #0a2a7a,0 0 14px #5fc0ff;display:inline-block}
.hside{text-align:right;font-size:13px;font-weight:900;color:#fff3b0;line-height:1.5}
/* fx */
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.pop{position:absolute;z-index:16;pointer-events:none;font-weight:900;font-size:30px;color:#fff;-webkit-text-stroke:2px #0a2a7a;text-shadow:0 3px 0 #0a2a7a;animation:popup 1.05s ease-out forwards;transform:translate(-50%,-50%);white-space:nowrap}
.pop.gold{color:#ffe14d;-webkit-text-stroke:2px #7a3a00;text-shadow:0 3px 0 #7a3a00}
.pop.neg{color:#ff6a6a;-webkit-text-stroke:2px #5a0000;text-shadow:0 3px 0 #5a0000}
@keyframes popup{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}18%{opacity:1;transform:translate(-50%,-70%) scale(1.35)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.flynum{position:absolute;z-index:16;pointer-events:none;font-weight:900;font-size:20px;color:#fff;padding:1px 8px;border-radius:10px;background:linear-gradient(180deg,#ff6a5a,#d0141e);border:2px solid #fff;transform:translate(-50%,-50%)}
#banner{position:absolute;left:0;right:0;top:34%;z-index:18;pointer-events:none;text-align:center;font-weight:900;font-size:42px;line-height:1.05;color:#ffe14d;-webkit-text-stroke:2.5px #6b1500;text-shadow:0 5px 0 #6b1500,0 10px 24px #000a;opacity:0;padding:0 10px}
#banner small{display:block;font-size:18px;color:#fff;-webkit-text-stroke:1.2px #6b1500;text-shadow:0 3px 0 #6b1500}
#banner.red{color:#ff4a3a;-webkit-text-stroke:2.5px #3a0000;text-shadow:0 5px 0 #3a0000,0 10px 24px #000a}
#banner.blue{color:#7fd8ff;-webkit-text-stroke:2.5px #0a2a7a;text-shadow:0 5px 0 #0a2a7a,0 10px 24px #000a}
#banner.show{animation:ban 1.5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes ban{0%{opacity:0;transform:scale(.2) rotate(-10deg)}15%{opacity:1;transform:scale(1.2) rotate(2deg)}25%{transform:scale(1) rotate(-2deg)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.flash{position:absolute;inset:0;z-index:17;pointer-events:none;background:#fff;animation:flash .25s forwards}
@keyframes flash{from{opacity:.55}to{opacity:0}}
/* ---------- sheets ---------- */
.modal{position:absolute;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;z-index:20;animation:fade .2s}
.modal.center{align-items:center}
.modal.hidden{display:none}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:100%;max-height:90%;overflow-y:auto;background:linear-gradient(180deg,#fffaf0,#ffe6ad);color:#4a1a08;border-top:4px solid #ffbf2f;border-radius:22px 22px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom) + 16px);box-shadow:0 -10px 40px #000;animation:up .25s ease-out}
.modal.center .sheet{border-radius:24px;border:4px solid #ffbf2f;width:92%;animation:pop .35s cubic-bezier(.2,1.5,.5,1);box-shadow:0 6px 0 #b06d00,0 20px 50px #000}
@keyframes up{from{transform:translateY(100%)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.sheet h2{margin:-4px auto 6px;font-size:24px;text-align:center;color:#fff;-webkit-text-stroke:1px #6b1500;text-shadow:0 3px 0 #6b1500;background:linear-gradient(180deg,#e8323f,#a50f1c);border-radius:14px;padding:6px 10px;border:3px solid #ffcf4a;box-shadow:0 4px 0 #6b1500}
.sheet h2.green{background:linear-gradient(180deg,#7ee36a,#2fa82a);-webkit-text-stroke:1px #0a3a00;text-shadow:0 3px 0 #1a5a10;box-shadow:0 4px 0 #1a5a10}
.sheet .sub{text-align:center;color:#8a4a1a;font-size:13px;font-weight:700;margin-bottom:8px}
.sheet p{line-height:1.5;font-size:14px}
.sheet b.blue{color:#1e5fd6}
.ti{height:30px;vertical-align:middle;margin:-6px 2px}
.lore{background:#fff8;border:2px dashed #e0a030;border-radius:14px;padding:10px 12px;font-style:italic;font-size:14px;line-height:1.5;color:#5a2a08;margin:10px 0}
.row{display:flex;gap:10px;margin-top:14px}
.btn{flex:1;border:3px solid #fff;border-radius:16px;padding:13px 6px;font-size:17px;font-weight:900;cursor:pointer;color:#fff;-webkit-text-stroke:.5px #1a5a10;text-shadow:0 2px 0 #1a5a10;background:linear-gradient(180deg,#8ef07a,#2fa82a);box-shadow:0 5px 0 #1a6a14,0 8px 14px #0005}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #1a6a14}
.btn.dark{background:linear-gradient(180deg,#ffcf4a,#f29a0f);color:#6b1500;-webkit-text-stroke:0;text-shadow:0 1px 0 #fff8;box-shadow:0 5px 0 #9a4a00,0 8px 14px #0005}
.btn.red{background:linear-gradient(180deg,#ff6a5a,#c4141c);text-shadow:0 2px 0 #6b0000;-webkit-text-stroke:.5px #6b0000;box-shadow:0 5px 0 #7a0010,0 8px 14px #0005}
.bigstars{text-align:center;font-size:52px;margin:2px 0;letter-spacing:4px}
.bigstars .s{display:inline-block;opacity:.25;filter:grayscale(1);transform:scale(.6);transition:all .35s cubic-bezier(.2,1.8,.5,1)}
.bigstars .s:nth-child(2){transform:scale(.7) translateY(-10px)}
.bigstars .s.on{opacity:1;filter:drop-shadow(0 3px 0 #b06d00);transform:scale(1)}
.bigstars .s.on:nth-child(2){transform:scale(1.2) translateY(-10px)}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:8px 0}
.stat{background:#fff;border:2px solid #ffcf6a;border-radius:12px;padding:6px 4px;text-align:center;font-size:11px;font-weight:700;color:#8a4a1a}
.stat b{display:block;font-size:18px;color:#1e5fd6}
.winart{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:center;gap:4px;background:radial-gradient(circle at 50% 70%,#fff6c0,#ffd84a00 65%)}
.winart::before{content:"";position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;background:repeating-conic-gradient(#ffe48a55 0 12deg,#0000 12deg 24deg);border-radius:50%;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.winart img{position:relative;filter:drop-shadow(0 4px 3px #0006)}
.winart .wh{height:140px;animation:hop .6s ease-in-out infinite alternate}
.winart .wp{height:110px;animation:hop .6s .3s ease-in-out infinite alternate}
.winart .wc{height:70px;margin-left:-20px}
@keyframes hop{to{transform:translateY(-8px)}}
.loseart{position:relative;height:140px;display:flex;align-items:flex-end;justify-content:center;gap:10px}
.loseart .lh{height:96px;transform:rotate(-75deg) translate(-10px,10px);filter:grayscale(.6) drop-shadow(0 3px 2px #0006)}
.loseart .le{height:130px;filter:drop-shadow(0 4px 3px #0006);animation:hop .5s ease-in-out infinite alternate}
.legend{display:grid;grid-template-columns:48px 1fr;gap:6px 10px;align-items:center;font-size:13px}
.legend img{height:42px;justify-self:center}
.relicgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.relic{background:#fff;border:3px solid #ffcf6a;border-radius:16px;padding:10px 6px;text-align:center}
.relic .ic{font-size:38px}
.relic .rn{font-size:13px;font-weight:900;color:#a50f1c;margin-top:4px}
.relic .rl{font-size:11px;color:#8a4a1a;font-style:italic;margin-top:4px}
.relic.off{background:#eee3cc;border-color:#d0c0a0}
.relic.off .ic{filter:brightness(0);opacity:.35}
.relic.off .rn{color:#9a8a6a}
.storyitem{border-left:4px solid #e8323f;padding:4px 10px;margin:10px 0;background:#fff8;border-radius:0 10px 10px 0}
.storyitem h4{margin:0;color:#a50f1c;font-size:14px}
.storyitem p{margin:4px 0 0;font-size:13px}
.storyitem.locked{border-color:#c0b090;opacity:.6}
.toast{position:absolute;left:50%;top:15%;transform:translateX(-50%);background:linear-gradient(180deg,#fffaf0,#ffe08a);color:#6b1500;font-weight:900;padding:10px 18px;border-radius:16px;border:3px solid #ffbf2f;z-index:30;box-shadow:0 4px 0 #b06d00,0 8px 20px #0007;text-align:center;max-width:88%;font-size:14px}
.toast.hidden{display:none}
.small{font-size:12px;color:#8a6a4a;text-align:center;margin-top:10px}
.introart{display:flex;justify-content:center;align-items:flex-end;gap:0;height:150px;margin:4px 0 6px}
.introart img{filter:drop-shadow(0 4px 3px #0006)}
#app.hitstop *{animation-play-state:paused!important}
/* v3 peta */
#worldWrap{flex:1;position:relative;overflow:hidden;touch-action:none;background:#2a0a2a}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#mapCtl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:8px;z-index:4}
#mapCtl .chip{width:44px;height:44px;font-size:20px}