@font-face{font-family:"Monster Forest Xiaolai";src:url("./assets/fonts/monster-forest-xiaolai-sc.woff2?h=6947eea928") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--game-font:"Monster Forest Xiaolai","PingFang SC","Noto Sans SC",sans-serif}
body,#appShell{font-family:var(--game-font);font-synthesis:none}
#appShell :is(button,input,select,textarea){font-family:var(--game-font);font-synthesis:none}
.game-screen{color-scheme:light}
.dex-mode button,.dex-mode input,.dex-mode select{-webkit-text-fill-color:currentColor}
.dex-mode .dex-header button:not(.dex-back),.dex-mode .dex-pagination button{color:#163039;background:#f6fafb;border-color:#657e88;opacity:1}
.dex-mode input,.dex-mode select{color:#163039;background:#f6fafb;font-size:16px;color-scheme:light}
.dex-mode input::placeholder{color:#53676f;opacity:1}
.dex-mode .dex-header button:not(.dex-back):active,.dex-mode .dex-pagination button:active{color:#102831;background:#d5e4e9}
.dex-mode button:focus-visible{outline:3px solid #d68019;outline-offset:-3px}
.dex-mode .dex-pagination button{font-size:14px;min-width:46px;white-space:nowrap}
/* The scene retains 3:2 at every viewport. Casing and controls are untouched. */
.battle-stage{container-type:size;min-height:0;overflow:hidden;background:#416447}
.battle-arena{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100cqw,150cqh);height:min(100cqh,66.6667cqw);container-type:inline-size;background:#629052 url("./assets/battle/forest-v101.png?h=99def59075") center/100% 100% no-repeat;image-rendering:pixelated;isolation:isolate}
.battle-arena .battle-sprite{height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;max-width:none;right:auto;bottom:auto;transform:translate(calc(-1 * var(--sprite-anchor-x,50%)),calc(-1 * var(--sprite-anchor-y,85%)));z-index:1}
.battle-arena .enemy-sprite{left:74%;top:51%;width:33.333333%}
/* V101: back sprites are HGSS-style (drawn 2x, bottom cut off by design). Like the original games the cut
   edge sits on the bottom edge of the scene, so no Pokémon looks sliced in the middle of the field. */
.battle-arena{overflow:hidden;top:auto;bottom:0;transform:translateX(-50%)}
/* The scene sits on the text box; on tall screens the space above fades from dark into the canopy colour. */
.battle-stage::before{content:"";position:absolute;left:0;right:0;top:0;bottom:min(100cqh,66.6667cqw);background:linear-gradient(#10231a,#27472f 55%,#4b8146)}
.battle-arena .ally-sprite{left:27%;top:100%;width:36.666667%}
.battle-arena .battle-status{width:47%;padding:4px 6px;border-width:2px;border-radius:4px;font-size:clamp(11px,3.8cqw,16px);line-height:1.2;background:#fffbea;box-shadow:2px 2px 0 #173b3440}
.battle-arena .enemy-status{left:2%;top:3%}.battle-arena .ally-status{right:2%;bottom:3%}
.battle-arena .battle-status p{margin:0 0 3px;overflow-wrap:anywhere}.battle-arena .battle-status progress{height:8px}.battle-arena .battle-status small{font-size:clamp(10px,3.2cqw,14px);margin-top:2px}
.battle-ui{flex:0 0 auto;min-height:0;max-height:48%;padding:7px 9px;border-width:3px;overflow:auto}
.battle-ui p{font-size:16px;line-height:1.4;min-height:23px;margin:0 0 5px}
.battle-choices button{min-height:44px;font-size:16px;line-height:1.2;padding:5px 7px}
.battle-choices button:disabled{color:#596453;background:#e4e5d8;opacity:1}
@media(orientation:landscape) and (max-height:560px){.battle-ui{max-height:45%}.battle-choices button{min-height:38px}.battle-ui p{font-size:14px}}

/* Time color affects scenery and sprites, never text, menus or health panels. */
.world-clock{position:absolute;left:8px;top:8px;z-index:3;background:#fffbea;color:#173b34;padding:4px 6px;border:2px solid #315747;border-radius:4px;font-size:12px;line-height:1.3;pointer-events:none}
.battle-arena::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(25,37,91,var(--night-tint,0)),rgba(25,37,91,var(--night-tint,0))),linear-gradient(rgba(206,110,42,var(--dusk-tint,0)),rgba(206,110,42,var(--dusk-tint,0)))}
.battle-arena .battle-status{z-index:2}
@media(max-width:360px){.world-clock{font-size:10px;left:4px;padding:3px}}

#appShell:not([data-screen="field"]):not([data-screen="dialog"]) .world-clock{display:none}
/* V102 battle motion: species animations, hit flash, send-out and faint write these variables (battle-anim-v102.js).
   One sprite pixel = the sprite's width / 80. Rotation and scale are around the sprite centre, as affine sprites are. */
.battle-arena .enemy-sprite{--px:calc(33.333333cqw / 80)}.battle-arena .ally-sprite{--px:calc(36.666667cqw / 80)}
.battle-arena .battle-sprite{transform:translate(calc(-1 * var(--sprite-anchor-x,50%)),calc(-1 * var(--sprite-anchor-y,85%))) translate(calc(var(--mon-x,0) * var(--px)),calc((var(--mon-y,0) + var(--mon-shift,0)) * var(--px))) rotate(var(--mon-rot,0deg)) scale(var(--mon-sx,1),var(--mon-sy,1))}
.battle-arena .battle-sprite.is-sinking{clip-path:inset(0 0 calc(100% - var(--sprite-anchor-y,85%) + var(--mon-clip,0) * var(--px)) 0)}
.battle-arena .sprite-tint{pointer-events:none;opacity:0;z-index:1;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:normal}
.battle-arena .move-shot{position:absolute;width:3.2cqw;height:3.2cqw;border-radius:50%;z-index:2;pointer-events:none;
 left:calc(27% + (74% - 27%) * var(--k,0));top:calc(70% + (38% - 70%) * var(--k,0));transform:translate(-50%,-50%) scale(calc(.6 + var(--k,0)))}
.battle-arena .move-shot-enemy{left:calc(74% + (27% - 74%) * var(--k,0));top:calc(38% + (70% - 38%) * var(--k,0))}
.battle-arena .battle-status progress{-webkit-appearance:none;appearance:none;border:0;border-radius:4px;background:#3c5046;overflow:hidden}
.battle-arena .battle-status progress::-webkit-progress-bar{background:#3c5046;border-radius:4px}
.battle-arena .battle-status progress::-webkit-progress-value{background:#48c070;border-radius:4px}
.battle-arena .battle-status progress::-moz-progress-bar{background:#48c070}
.battle-arena .battle-status progress[data-health="mid"]::-webkit-progress-value{background:#e8c030}.battle-arena .battle-status progress[data-health="mid"]::-moz-progress-bar{background:#e8c030}
.battle-arena .battle-status progress[data-health="low"]::-webkit-progress-value{background:#e85840}.battle-arena .battle-status progress[data-health="low"]::-moz-progress-bar{background:#e85840}
/* The text box keeps its height while a turn plays (no buttons), so the scene never jumps. */
.battle-choices{min-height:calc(2 * 44px + 4px);align-content:start}.battle-ui p{min-height:2.8em}
@media(orientation:landscape) and (max-height:560px){.battle-choices{min-height:calc(2 * 38px + 4px)}}
/* V170: cloud save state after the clock — green synced, amber sending, grey offline; nothing without a trainer card. */
.world-clock[data-cloud]:not([data-cloud="none"])::after{content:"●";margin-left:5px;font-size:10px;vertical-align:1px;color:#8a9490}
.world-clock[data-cloud="ok"]::after{color:#3a9a50}.world-clock[data-cloud="busy"]::after{color:#d89a30}
/* V178: 在线 N before the clock while connected to the shared world. */
.world-clock[data-online]::before{content:attr(data-online);color:#3a8a4a}