:root{font-family:system-ui,'Noto Sans TC',sans-serif;color:#e9f2ff;background:#090f20}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0%,#23385c 0,transparent 38%),#090f20}.shell{max-width:1100px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:3px;color:#77dfff}h1{font-size:32px;margin:8px 0}h1 small{font-size:14px;font-weight:400;color:#9ab0ce}h2{font-size:20px;margin:0 0 18px}h3{font-size:15px;margin:24px 0 8px;color:#7ce0f9}p{line-height:1.8;color:#aebfda}.header-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#saveState{font-size:12px;color:#80e4b5}nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}button{background:#2164d7;border:1px solid #3779ed;color:#fff;border-radius:10px;padding:11px 16px;font-size:14px;font-weight:650;cursor:pointer;transition:.15s}button:hover:not(:disabled){filter:brightness(1.2);transform:translateY(-1px)}button:disabled{opacity:.38;cursor:not-allowed}button.secondary,nav button{background:#192944;border-color:#304363}nav button.active{background:#1d62ce;border-color:#5cb6ff}.accent{background:#8646c5;border-color:#b87dff}.page{display:none}.page.active{display:block}.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.panel{background:#121d34;border:1px solid #2b3d5e;border-radius:18px;padding:24px;box-shadow:0 15px 35px #0003}.section-title{display:flex;align-items:center;justify-content:space-between}.pill{background:#263b65;border:1px solid #44649b;border-radius:100px;padding:5px 12px;font-size:12px}.arena{background:radial-gradient(ellipse at center,#263c64,#101b31 68%);border:1px solid #314d75;border-radius:15px;min-height:245px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:10px 0 20px}.pet-art{font-size:100px;filter:drop-shadow(0 15px 12px #0006);animation:bob 2.4s ease-in-out infinite}.pet-name{font-size:23px;font-weight:800;margin-top:10px}.arena #petSub{font-size:12px;color:#9bb4d6;margin-top:6px}@keyframes bob{50%{transform:translateY(-9px)}}.stat{margin:13px 0}.stat-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:#cbd9ef}.track{height:9px;border-radius:20px;background:#273752;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#208cdb,#6ce3f5);border-radius:20px}.fill.hp{background:linear-gradient(90deg,#24b676,#79e9a8)}.fill.hunger{background:linear-gradient(90deg,#ef9e3e,#f7cf65)}.fill.energy{background:linear-gradient(90deg,#9161e7,#d5a0ff)}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.info-row{display:flex;justify-content:space-between;border-bottom:1px solid #2a3954;padding:11px 0;font-size:14px}.info-row strong{color:#d7efff}.log{height:235px;overflow:auto;background:#0c1528;border:1px solid #273754;border-radius:10px;padding:12px;font-size:13px;color:#b8cbe7}.log div{padding:6px 0;border-bottom:1px solid #1c2b43}.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.zone{background:#172743;border:1px solid #354d73;border-radius:14px;padding:20px;cursor:pointer;text-align:left}.zone.selected{outline:2px solid #54c5f5}.zone .emoji{font-size:40px}.zone h3{margin:12px 0 3px;color:white}.zone p{font-size:12px;margin:0}.message{margin-top:16px;min-height:24px;color:#8be0f8}.battle-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.fighter{background:#182945;border:1px solid #344b6c;padding:22px;text-align:center;border-radius:14px}.fighter .emoji{font-size:80px;margin:18px}.fighter h3{color:#fff;margin:8px}.notice{padding:14px;background:#203a5b;border-radius:10px;color:#d5e9ff;margin:15px 0}.collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.collect{background:#192a46;border-radius:12px;padding:18px;text-align:center}.collect .emoji{font-size:45px}footer{text-align:center;color:#6e86a7;font-size:12px;margin-top:30px}@media(max-width:700px){.shell{padding:12px}header{align-items:flex-start;flex-direction:column}h1{font-size:25px}.grid,.battle-grid{grid-template-columns:1fr}.zones{grid-template-columns:1fr}.panel{padding:16px}nav button{flex:1;padding:10px 8px;font-size:12px}}

.party-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.party-member{background:#243655;border:1px solid #456084;font-size:12px;padding:9px}.party-member.chosen{background:#195d85;outline:2px solid #64d5ff}
/* V5: electronic-pet arena with a ground plane and full-body walking sprite */
.arena{min-height:300px;background:linear-gradient(#193252 0%,#274b64 64%,#1c3443 65%,#162b36 100%);overflow:hidden}
.pet-art{font-size:initial;animation:none;filter:none;width:100%;display:flex;justify-content:center;align-items:center;min-height:160px}
.sprite-canvas{width:min(100%,420px);height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.pet-name{margin-top:0}.pet-hint{font-size:12px;color:#a6d6dc;margin:5px 0 12px}
.egg-options,.storage-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.egg-options button.selected{outline:2px solid #f4d179}.storage-list button{background:#263b5a}

#v6Care{padding:12px 0;border-top:1px solid #49627a} .v6-note{font-size:12px;opacity:.8} .sprite-canvas{image-rendering:pixelated;max-width:100%;height:auto}
/* V6 full-body correction: preserve canvas, show complete character at a readable size */
.pet-art{min-height:220px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sprite-canvas{display:block;width:min(100%,540px);height:auto;max-height:none;image-rendering:pixelated}

.v7-life{border-top:1px solid #49627a;padding:14px 0}.v7-help{font-size:12px;opacity:.85}.v7-life strong{color:#8be0f8}

/* V8 overworld and animated combat */
.world-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(210px,1fr);gap:16px;margin:18px 0}.world-layout canvas{width:100%;image-rendering:pixelated;background:#173b47;border:3px solid #6aa7aa;border-radius:12px}.world-sidebar{padding:14px;background:#102c42;border:1px solid #426779;border-radius:12px}.dpad{text-align:center;margin:14px 0}.dpad button{min-width:55px;margin:3px}.combat-stage{height:275px;position:relative;overflow:hidden;border:3px solid #6aa7aa;border-radius:15px;background:linear-gradient(#263f6a 0%,#4b7394 67%,#3a765e 68%,#244b4d 100%);margin:15px 0}.combat-stage:after{content:"";position:absolute;bottom:28px;left:8%;width:84%;height:12px;background:#172f40;border-radius:100%;opacity:.65}.combat-actor{position:absolute;bottom:35px;width:150px;height:155px;image-rendering:pixelated;transition:transform .18s,filter .18s}.combat-actor canvas{width:100%;height:100%;image-rendering:pixelated}.combat-actor.hero{left:12%}.combat-actor.enemy{right:12%}.combat-actor.strike-hero{animation:heroHit .55s ease-in-out}.combat-actor.strike-enemy{animation:enemyHit .55s ease-in-out}.combat-actor.hurt{animation:hurt .45s}.combat-flash{position:absolute;top:25%;left:47%;font-size:42px;z-index:2;animation:flash .65s forwards;pointer-events:none}@keyframes heroHit{50%{transform:translateX(120px) scale(1.15)}}@keyframes enemyHit{50%{transform:translateX(-120px) scale(1.15)}}@keyframes hurt{25%,75%{filter:brightness(3);transform:translateX(8px)}}@keyframes flash{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2)}}@media(max-width:760px){.world-layout{grid-template-columns:1fr}.combat-actor{width:110px;height:130px}.combat-actor.hero{left:4%}.combat-actor.enemy{right:4%}}

/* V9 roaming creatures and battle hit feedback */
.v9-map-wrap{position:relative;min-width:0}.v9-map-wrap #worldCanvas{display:block;width:100%;height:auto}.v9-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}.v9-tip{font-size:.85rem;line-height:1.6;color:#c1e6dd}.v9-damaged{animation:v9shake .38s ease-in-out 2!important}.v9-counter{animation:v9counter .55s ease-in-out!important}.v9-number{position:absolute;z-index:9;top:27%;font-size:30px;font-weight:900;color:#fff4a0;text-shadow:2px 3px #3c223b;animation:v9float .8s forwards;pointer-events:none}.v9-number.hero{left:24%}.v9-number.enemy{right:24%}@keyframes v9shake{0%,100%{filter:none;transform:translateX(0)}25%{filter:brightness(2.5);transform:translateX(-9px)}70%{transform:translateX(8px)}}@keyframes v9counter{50%{transform:translateX(-95px) scale(1.06)}}@keyframes v9float{to{opacity:0;transform:translateY(-45px)}}
/* V10 visible skill cinematics */
.v10-fx{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
.v10-move-label{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:9;background:#12253ddd;border:2px solid #f9d77c;border-radius:12px;color:#fff4bb;padding:8px 17px;font-weight:800;box-shadow:0 4px 18px #0008;white-space:nowrap}
.v10-help{padding:12px 15px;border:1px solid #538e9d;background:#17354b;border-radius:10px;color:#d5effa}
#battleView [data-move]:disabled{opacity:.55;cursor:wait}
/* V11 canvas skill choreography */
.v11-fx{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.v11-skill-name{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:10;background:#10253bea;border:2px solid #f4d16e;color:#fff3b4;border-radius:10px;padding:8px 12px;font-weight:800;max-width:95%;text-align:center;pointer-events:none}
.v11-help{border:1px solid #528fa5;border-radius:10px;padding:12px;background:#15354b;color:#d4f3ff}

/* V12: readable HP and map player marker */
.fighter strong{display:block;margin:8px;color:#f8e7a2;font-size:1.1rem}.v11-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}.v11-skill-name{position:absolute;top:6px;left:15%;right:15%;text-align:center;font-weight:bold;color:#fff1a4;z-index:6;text-shadow:1px 2px #182b4c}

/* Scenic map fix: keep the base canvas visible and correctly aligned with monster overlay */
.v9-map-wrap{background:#74ad8c;border-radius:12px;overflow:hidden}.v9-map-wrap #worldCanvas{display:block;width:100%;height:auto;aspect-ratio:4/3;background:#73b37d}.v9-map-wrap .v9-overlay{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* V15 combat animation stage */
.combat-stage{position:relative;display:flex;justify-content:space-between;align-items:flex-end;overflow:hidden;min-height:285px;padding:20px 6%;border:3px solid #6586a0;border-radius:16px;background:linear-gradient(180deg,#172b51 0%,#315c79 60%,#426d57 61%,#23483e 100%);margin:14px 0;isolation:isolate}
.combat-stage:after{content:'';position:absolute;left:0;right:0;bottom:16%;height:3px;background:#ffffff35;z-index:-1}
.combat-actor{display:flex;align-items:center;flex-direction:column;z-index:2;transition:filter .1s;will-change:transform;min-width:125px}
.combat-actor.enemy{transform:scaleX(-1)}
.combat-sprite{width:128px;height:128px;image-rendering:pixelated;filter:drop-shadow(0 5px 3px #15283a)}
.combat-name{padding:4px 9px;background:#152b47;border-radius:10px;color:#fff;font-weight:bold;font-size:13px}
.v11-fx{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.v11-skill-name{position:absolute;top:8px;left:12%;right:12%;z-index:6;text-align:center;color:#fff6ac;font-weight:bold;text-shadow:1px 2px #1a263a}
@media(max-width:600px){.combat-stage{min-height:230px;padding:10px 2%}.combat-sprite{width:100px;height:100px}.combat-actor{min-width:100px}}

/* V17 */
#worldMiniMap{display:block;width:100%;max-width:288px;aspect-ratio:18/13;image-rendering:pixelated;background:#1b3943;border:2px solid #6e99a5;border-radius:8px;margin:12px auto 5px}.map-legend{font-size:12px;color:#bed9e2;text-align:center}.v17-diagnostics{margin:12px 0;padding:10px 12px;background:#14384b;border:1px solid #56828f;border-radius:8px;font-size:13px}.v17-diagnostics strong{color:#e9f3ff}.v17-diagnostics button{margin-top:8px}

/* V68: prevent battle DOM replacement from changing page scroll anchor. */
#battle,#battleView,#battleView *{overflow-anchor:none}