:root {
  color-scheme: light;
  --ink: #111;
  --muted: #666;
  --line: #aaa;
  --page: #fff;
  --surface: #f7f7f7;
  --raised: #fff;
  --red-a: #ef9393;
  --red-b: #c83f43;
  --orange-a: #f4a06b;
  --orange-b: #dd681e;
  --gold-a: #f1d268;
  --gold-b: #d8a91d;
  --green-a: #a1d5a9;
  --green-b: #5b9e69;
  --blue-a: #78b8ed;
  --blue-b: #287ac4;
  --slate-a: #b8c4d1;
  --slate-b: #77879a;
  --purple-a: #d4a2ea;
  --purple-b: #8d43ad;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
html, body, .app { overflow-anchor: none; }
body { margin: 0; overflow-x: hidden; background: #292929; color: var(--ink); font: 16px/1.3 Arial, Helvetica, sans-serif; }
button { color: inherit; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #276fe6; outline-offset: 2px; }
[hidden] { display: none !important; }

.app { position: relative; width: min(100%, 590px); min-height: 100vh; margin: 0 auto; overflow: hidden; background: var(--page); box-shadow: 0 0 40px rgba(0,0,0,.35); }
.screen { min-height: 100vh; padding: 0 26px 26px; background: var(--page); }
.screen-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; height: 104px; background: var(--page); }
.screen-title { max-width: calc(100% - 190px); margin: 0; overflow: hidden; font-size: clamp(19px, 4.3vw, 30px); font-weight: 400; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.header-tools { position: absolute; top: 32px; right: 0; display: flex; align-items: center; gap: 8px; }
.theme-toggle { position: relative; width: 62px; height: 40px; padding: 0; border: 1px solid #c4c8cb; border-radius: 20px; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.18); cursor: pointer; }
.theme-toggle i { position: absolute; top: 3px; left: 3px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #17191b; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transform: translateX(24px); transition: transform 170ms ease, background-color 170ms ease, color 170ms ease; }
.theme-toggle svg { position: absolute; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 100ms ease; }
.theme-toggle .theme-sun { opacity: 0; }
.theme-toggle .theme-moon { fill: currentColor; stroke: none; opacity: 1; }
.theme-toggle[aria-checked="true"] { border-color: #303438; background: #303438; }
.theme-toggle[aria-checked="true"] i { transform: none; background: #fff; color: #17191b; }
.theme-toggle[aria-checked="true"] .theme-sun { opacity: 1; }
.theme-toggle[aria-checked="true"] .theme-moon { opacity: 0; }
.account-button { position: relative; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid #8d949a; border-radius: 50%; background: linear-gradient(#fff, #e2e5e7); color: #56616a; box-shadow: 0 2px 3px rgba(0,0,0,.18); cursor: pointer; }
.account-button.signed-in { border-color: #58646d; background: #506776; color: #fff; font-size: 17px; font-weight: 700; }
.account-glyph { position: relative; display: grid; width: 25px; height: 25px; overflow: hidden; place-items: center; border-radius: 50%; }
.account-glyph img { width: 100%; height: 100%; object-fit: cover; }
.account-head { position: absolute; top: 2px; left: 8px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.account-shoulders { position: absolute; right: 3px; bottom: 2px; left: 3px; height: 10px; border-radius: 10px 10px 5px 5px; background: currentColor; }

.auth-backdrop { position: fixed; z-index: 300; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: max(68px, 9dvh) 14px 20px; overflow-y: auto; background: rgba(15,18,21,.38); }
.auth-card { position: relative; width: min(350px, 100%); padding: 15px 16px 14px; border: 1px solid #92999d; border-radius: 7px; background: #e4e9ea; box-shadow: 0 4px 10px rgba(0,0,0,.3); color: #111; }
.auth-close { position: absolute; top: 5px; right: 6px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: #555; cursor: pointer; font-size: 25px; line-height: 28px; }
.auth-close:hover { color: #111; }
.auth-kicker { margin: 0 36px 1px 0; color: #555; font-size: 12px; font-weight: 700; }
.auth-card h2 { margin: 0 36px 11px 0; font-size: 22px; font-weight: 700; }
.auth-card form { display: grid; gap: 4px; }
.auth-card label { margin-top: 4px; font-size: 14px; font-weight: 700; }
.auth-card input { width: 100%; height: 39px; padding: 5px 8px; border: 1px solid #83898d; border-radius: 3px; background: #fff; color: #111; box-shadow: inset 0 1px 2px rgba(0,0,0,.18); font-size: 16px; }
.auth-card input:focus { border-color: #1676bd; outline: 2px solid rgba(22,118,189,.23); }
.password-help { color: #555; font-size: 11px; }
.auth-error { margin: 5px 0 0; color: #a52328; font-size: 12px; }
.auth-primary { min-width: 104px; min-height: 38px; margin: 9px auto 0; padding: 4px 16px; border: 1px solid #8b9297; border-radius: 5px; background: linear-gradient(#fff, #d5d9dc); color: #222; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2); cursor: pointer; font-size: 16px; font-weight: 700; }
.auth-primary:hover { background: linear-gradient(#fff, #e3e6e8); }
.auth-primary:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.16); }
.auth-primary:disabled { opacity: .55; cursor: default; }
.auth-mode-link { display: block; margin: 9px auto 0; padding: 4px; border: 0; background: transparent; color: #245e86; cursor: pointer; font-size: 13px; text-decoration: underline; }
.account-card { text-align: left; }
.account-profile { display: flex; align-items: center; flex-direction: column; gap: 6px; text-align: center; }
.account-avatar-button { position: relative; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.account-avatar { display: grid; width: 66px; height: 66px; overflow: hidden; place-items: center; border: 1px solid #626b71; border-radius: 50%; background: #65727a; color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.2); font-size: 29px; font-weight: 700; }
.account-avatar img, .avatar-editor-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit-badge { position: absolute; right: -3px; bottom: -1px; display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #737b80; border-radius: 50%; background: #e2e5e7; color: #303438; }
.avatar-edit-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-name { display: block; max-width: 100%; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.profile-link { padding: 2px 0; border: 0; background: transparent; color: #245e86; cursor: pointer; font-size: 13px; text-decoration: underline; }
.account-card .auth-kicker, .account-card h2 { margin-right: 36px; }
.account-card h2 { overflow-wrap: anywhere; }
.logout-button { display: block; margin: 14px auto 0; border-color: #a48c8d; background: linear-gradient(#fff, #d5d9dc); color: #7c3033; }
.avatar-editor { text-align: center; }
.avatar-editor h2 { text-align: left; }
.avatar-editor-preview { display: grid; width: 112px; height: 112px; margin: 5px auto 13px; overflow: hidden; place-items: center; border: 1px solid #52636f; border-radius: 50%; background: #506776; color: #fff; font-size: 46px; font-weight: 700; }
.avatar-file-input { display: none; }
.avatar-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.profile-button { min-height: 35px; padding: 4px 11px; border: 1px solid #8b9297; border-radius: 4px; background: linear-gradient(#fff, #d5d9dc); color: #222; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.16); cursor: pointer; font-size: 13px; font-weight: 700; }
.profile-button.primary { border-color: #6689a2; background: linear-gradient(#f8fcff, #c9dce9); color: #174c70; }
.profile-button.remove { color: #852f32; }
.profile-button:disabled { opacity: .55; cursor: default; }
.profile-link { margin: 0 5px; }

.gloss-button { min-height: 48px; padding: 5px 14px 7px; border: 2px solid rgba(65,40,30,.55); border-radius: 8px; color: white; box-shadow: inset 0 2px rgba(255,255,255,.45), inset 0 -2px rgba(0,0,0,.15), 0 2px 2px rgba(0,0,0,.22); cursor: pointer; font-size: 20px; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.gloss-button:hover { filter: brightness(1.07); }
.gloss-button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.gloss-button.is-current { filter: brightness(1.08) saturate(1.12); box-shadow: inset 0 0 0 3px rgba(255,255,255,.68), inset 0 -2px rgba(0,0,0,.14), 0 0 0 2px #454545, 0 2px 3px rgba(0,0,0,.24); }
.red { background: linear-gradient(var(--red-a), var(--red-b)); }
.orange { background: linear-gradient(var(--orange-a), var(--orange-b)); }
.gold { background: linear-gradient(var(--gold-a), var(--gold-b)); }
.green { background: linear-gradient(var(--green-a), var(--green-b)); }
.blue { background: linear-gradient(var(--blue-a), var(--blue-b)); }
.slate { background: linear-gradient(var(--slate-a), var(--slate-b)); }
.purple { background: linear-gradient(var(--purple-a), var(--purple-b)); }

.sprite { image-rendering: pixelated; object-fit: contain; }
.landing { display: flex; min-height: calc(100vh - 130px); flex-direction: column; }
.trainer-wrap { display: grid; place-items: center; min-height: 225px; }
.trainer { width: 184px; height: 220px; }
.opponent-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 0; width: min(315px, 100%); margin: 4px auto 26px; }
.opponent-team button { position: relative; display: grid; min-width: 0; min-height: 138px; place-items: center; padding: 0; border: 0; background: transparent; cursor: default; }
.opponent-team img { width: 164px; height: 140px; max-width: 100%; transform: scale(1.2); }
.home-actions { display: grid; gap: 7px; margin-top: auto; }

.arena { position: relative; height: clamp(370px, 56vh, 560px); margin: 0 -26px; overflow: hidden; background: white url("arena.png") center / 100% 100% no-repeat; }
.arena .trainer { position: absolute; top: 2%; right: 7%; width: 138px; height: 178px; }
.lead-prompt, .battle-panel { padding-top: 14px; }
.lead-prompt { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.prompt { margin: 0 0 4px; color: #5e5e5e; font-size: 19px; }
.section-label { margin: 0 0 6px; color: #284f9e; font-size: 22px; font-style: italic; font-weight: 700; }
.section-label.attack { color: #9b3819; }
.lead-grid, .switch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lead-choice, .switch-choice { position: relative; display: flex; min-width: 0; height: 49px; align-items: center; padding: 3px 7px; overflow: visible; border: 1px solid #aaa; border-radius: 7px; background: linear-gradient(#fff, #e9e9e9); box-shadow: 0 2px 3px rgba(0,0,0,.2); cursor: pointer; }
.lead-choice:hover, .switch-choice:hover { background: linear-gradient(#fff, #dfe8ef); border-color: #777; }
.lead-choice { height: 88px; flex-direction: column; justify-content: center; padding: 3px; }
.lead-choice.selected { border-color: #287ac4; background: #e9f4fc; box-shadow: inset 0 0 0 2px #5c9dd2, 0 2px 3px rgba(0,0,0,.18); }
.lead-choice img { flex: 0 0 64px; width: 68px; max-width: 100%; height: 64px; transform: scale(1.3); }
.switch-choice img { flex: 0 0 43px; width: 43px; height: 41px; }
.lead-choice span, .switch-choice span { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.lead-choice span { flex: 0 0 16px; max-width: 100%; font-size: 12px; line-height: 16px; text-align: center; }
.lead-details-slot { margin-top: 7px; }
.lead-details-card { padding: 5px 7px 6px; border: 1px solid #a9afb3; border-radius: 6px; background: #f4f5f5; box-shadow: 0 1px 3px rgba(0,0,0,.16); animation: lead-details-in 150ms ease-out; }
.lead-details-card > header { display: flex; min-width: 0; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid #c7cbcd; }
.lead-details-card > header > strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.lead-detail-types { display: inline-flex; flex: 0 0 auto; gap: 3px; }
.lead-detail-types i { font-style: normal; }
.lead-fact-line { display: flex; min-width: 0; gap: 6px 14px; margin: 3px 0; overflow: hidden; font-size: 10px; white-space: nowrap; }
.lead-fact-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lead-fact-line b { font-weight: 700; }
.lead-stat-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 3px 0; border-top: 1px solid #d5d8d9; border-bottom: 1px solid #d5d8d9; }
.lead-stat { min-width: 0; border-right: 1px solid #d5d8d9; font-size: 9px; text-align: center; white-space: nowrap; }
.lead-stat:last-child { border-right: 0; }
.lead-stat small { color: var(--muted); font-size: inherit; font-weight: 700; }
.lead-stat strong { font-size: inherit; }
.lead-stat.raised strong { color: #397743; }
.lead-stat.lowered strong { color: #9b4044; }
.lead-move-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; padding-top: 4px; }
.lead-move-grid > span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 4px; }
.lead-move-grid strong { overflow: hidden; font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.lead-move-grid i { flex: 0 0 auto; font-size: 7px; font-style: normal; }
@keyframes lead-details-in { from { opacity: .35; transform: translateY(2px); } }
.lead-screen, .battle-screen { display: flex; flex-direction: column; }
.lead-screen .screen-header, .battle-screen .screen-header, .lead-screen .arena, .battle-screen .arena { flex: 0 0 auto; }
.lead-actions { display: grid; flex: 0 0 auto; gap: 7px; margin: 0 29px 12px; padding-top: 14px; }
.lead-actions .gloss-button:disabled { opacity: .48; cursor: default; filter: grayscale(.3); }

.battle-arena {
  isolation: isolate;
  height: clamp(300px, 42vh, 430px);
  border-top: 1px solid #999183;
  border-bottom: 1px solid #6f6961;
  background: linear-gradient(to bottom, #cbc5b8 0 42%, #aca598 43% 45%, #8e877d 46% 100%);
}
.battle-platform {
  position: absolute;
  z-index: 0;
  height: 19%;
  border: 2px solid rgba(71,66,59,.24);
  border-radius: 50%;
  background: radial-gradient(ellipse, #b7af9d 0 48%, #918879 72%, rgba(67,62,55,.38) 74%, transparent 76%);
  box-shadow: inset 0 -7px 11px rgba(67,62,55,.2), 0 7px 12px rgba(48,45,41,.12);
  transform: skewX(-5deg);
}
.battle-platform.enemy { top: 37%; right: 2%; width: 49%; }
.battle-platform.player { bottom: -9.5%; left: -4%; width: 57%; }
.battler-slot {
  --sprite-scale: 1;
  --sprite-x: 0px;
  --sprite-y: 0px;
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: end center;
  pointer-events: none;
}
.battler-slot.enemy { inset: 0; display: block; width: auto; height: auto; }
.battler-slot.player { bottom: 7%; left: 1%; width: 48%; height: 43%; }
.active-sprite {
  width: 100%;
  height: 100%;
  object-position: center bottom;
  filter: drop-shadow(0 5px 2px rgba(42,39,35,.24));
  transform: translate(var(--sprite-x), var(--sprite-y)) scale(var(--sprite-scale));
  transform-origin: center bottom;
}
.battler-slot.enemy .active-sprite {
  position: absolute;
  top: var(--foe-sprite-top, 0);
  left: var(--foe-sprite-left, 0);
  width: var(--foe-sprite-size, 0);
  height: var(--foe-sprite-size, 0);
  opacity: 0;
  object-fit: fill;
  transform: none;
}
.battler-slot.enemy.is-aligned .active-sprite { opacity: 1; }
.battler-slot.player[data-pokemon="venusaur"], .battler-slot.player[data-pokemon="lapras"] { --sprite-scale: 1.04; }
.battler-slot.player[data-pokemon="exeggutor"] { --sprite-scale: .9; }
.battler-slot.player[data-pokemon="vaporeon"], .battler-slot.player[data-pokemon="flareon"] { --sprite-scale: 1; }
.battle-hud {
  position: absolute;
  z-index: 4;
  width: min(47%, 235px);
  padding: 8px 10px 7px;
  border: 2px solid #4c463b;
  border-radius: 8px 3px 8px 3px;
  background: linear-gradient(#fffef6, #e9e3ce);
  box-shadow: 3px 4px 0 rgba(67,53,35,.24), inset 0 0 0 2px rgba(255,255,255,.65);
  color: #24231f;
}
.battle-hud.enemy { top: 8%; left: 3%; }
.battle-hud.player { right: 3%; bottom: 8%; }
.battle-hud-title { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 6px; }
.battle-hud-title strong { min-width: 0; overflow: hidden; font-size: 15px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.battle-hud-title span { flex: 0 0 auto; font-size: 11px; font-weight: 700; }
.battle-hud .hp-bar { height: 10px; margin-top: 5px; padding: 1px; border: 1px solid #49443b; border-radius: 6px; background: #6c685f; }
.battle-hud .hp-bar i { display: block; height: 100%; border-radius: 4px; background: #22bb61; transition: width .25s, background-color .25s; }
.battle-hud .hp-bar.warning i { background: #e7b62c; }
.battle-hud .hp-bar.critical i { background: #d54c43; }
.battle-hud-detail { display: flex; min-height: 15px; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 2px; font-size: 10px; }
.battle-hud-detail > span { margin-right: auto; color: #6d6555; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.battle-hud-detail small { font-size: 10px; }
.battle-hud-detail b { padding: 1px 4px; border-radius: 3px; background: #75668b; color: #fff; font-size: 8px; }
.move-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.move-grid + .section-label { margin-top: 14px; }
.move-button { position: relative; min-height: 63px; padding: 8px 8px 18px; border: 1px solid #aaa; border-radius: 7px; background: linear-gradient(#fff, #e9e9e9); box-shadow: 0 2px 4px rgba(0,0,0,.2); cursor: pointer; }
.move-button:hover { filter: brightness(.97); border-color: #777; }
.move-button:disabled { opacity: .55; cursor: default; filter: grayscale(.2); }
.move-button strong { display: block; font-size: 19px; font-weight: 400; }
.move-button span, .move-button small { position: absolute; bottom: 3px; font-size: 12px; }
.move-button span { left: 7px; }
.move-button small { right: 7px; }
.type-fire { border-color: #dfa28f; background: linear-gradient(#fff, #f8ddd4); }
.type-normal { border-color: #c2bba4; background: linear-gradient(#fff, #eeeade); }
.type-grass { border-color: #91bc83; background: linear-gradient(#fff, #dff1db); }
.type-electric { border-color: #d1bd66; background: linear-gradient(#fff, #fff0b8); }
.type-water, .type-ice { border-color: #88aee0; background: linear-gradient(#fff, #dceaff); }
.type-psychic, .type-poison, .type-ghost { border-color: #bd8fb7; background: linear-gradient(#fff, #ecdff0); }
.type-ground, .type-rock, .type-fighting { border-color: #bc977e; background: linear-gradient(#fff, #ead8cb); }
.type-flying, .type-dragon { border-color: #a69acb; background: linear-gradient(#fff, #e4e0f2); }
.type-bug { border-color: #adb969; background: linear-gradient(#fff, #ebefcf); }
.switch-grid { margin-top: 3px; }
.switch-choice { height: 48px; padding-bottom: 8px; }
.switch-choice.selected { opacity: .55; }
.switch-choice:disabled { cursor: default; }
.switch-choice.fainted { opacity: .4; filter: grayscale(1); }
.switch-choice small { position: absolute; right: 5px; bottom: 1px; color: #555; font-size: 9px; }
.switch-choice::after { content: ""; position: absolute; right: 4px; bottom: 3px; left: 4px; height: 3px; background: #28bd65; }
.switch-choice.fainted::after { background: #777; }
.battle-panel { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; }
.battle-command-area { flex: 0 0 auto; }
.give-up { position: relative; z-index: 6; width: calc(100% - 58px); margin: auto 29px 12px; }
.battle-message { max-height: 72px; margin: 8px 0 0; min-height: 20px; overflow-y: auto; color: #444; font-size: 13px; line-height: 1.35; }
.battle-error { margin: 8px 0; color: #a32626; font-size: 13px; text-align: center; }
.battle-unavailable { display: grid; min-height: calc(100vh - 130px); place-content: center; gap: 12px; text-align: center; }
.battle-unavailable h2, .battle-unavailable p { margin: 0; }
.battle-log-card { height: clamp(150px, 18dvh, 190px); margin-bottom: 10px; overflow: hidden; border: 1px solid #aeb5bc; border-radius: 7px; background: #f7f8fa; }
.battle-log-card.expanded { position: absolute; z-index: 5; top: 14px; right: 0; bottom: 74px; left: 0; height: auto; margin: 0; background: #f7f8fa; box-shadow: 0 8px 24px rgba(24, 36, 48, .2); }
.battle-log-card > header { display: flex; height: 33px; align-items: center; justify-content: space-between; padding: 0 7px 0 10px; border-bottom: 1px solid #c8cdd2; background: #e9edf1; }
.battle-log-card h2 { margin: 0; color: #34495e; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.battle-log-card header > div { display: flex; align-items: center; gap: 4px; }
.battle-log-card header button { min-height: 25px; padding: 2px 7px; border: 1px solid #9ca7b1; border-radius: 4px; background: #fff; color: #354b60; cursor: pointer; font-size: 11px; }
.battle-log-card header [data-battle-log-new] { border-color: #5b8db7; background: #e6f2fb; color: #185f98; font-weight: 700; }
.battle-log-body { height: calc(100% - 33px); padding: 4px 8px 7px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: pan-y; }
.battle-log-stack { display: flex; min-height: 100%; flex-direction: column; }
.battle-log-stack::before { flex: 1 0 auto; content: ""; }
.battle-log-row { display: grid; flex: 0 0 auto; grid-template-rows: 1fr; }
.battle-log-row > div { min-height: 0; overflow: hidden; }
.battle-log-row.is-new { animation: battle-log-reveal 220ms cubic-bezier(.2, .75, .25, 1) both; animation-delay: var(--log-delay); }
@keyframes battle-log-reveal {
  from { grid-template-rows: 0fr; opacity: 0; transform: translateY(7px); }
  to { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
}
.battle-log-turn { position: sticky; top: 0; z-index: 1; margin: 10px -8px 4px; padding: 4px 8px 3px; border-top: 1px solid #d3d7db; border-bottom: 1px solid #d3d7db; background: #eef1f4; color: #596874; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.battle-log-row:first-child .battle-log-turn { margin-top: -4px; border-top: 0; }
.battle-log-entry { margin: 0; padding: 2px 5px; border-left: 3px solid transparent; color: #30363b; font-size: 12px; line-height: 1.3; }
.battle-log-entry.player { border-left-color: #4e8ec4; background: #f2f7fb; }
.battle-log-entry.opponent { border-left-color: #c76565; background: #fcf4f4; }
.battle-log-entry.system { color: #59636c; font-style: italic; }
.battle-log-entry.category-faint, .battle-log-entry.category-result { font-weight: 700; }
.battle-log-empty { margin: 20px 0; color: var(--muted); font-size: 12px; text-align: center; }
.battle-panel > .prompt { margin-top: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-height: 760px) {
  .battle-log-card { height: 125px; }
  .battle-log-card.expanded { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-log-row.is-new { animation: none; }
}

.pc-stage { display: flex; width: 100%; min-width: 0; min-height: calc(100vh - 104px); flex-direction: column; }
.pc-help { margin: 0 0 10px; color: var(--muted); font-size: 12px; text-align: center; }
.pc-section { width: 100%; min-width: 0; overflow: hidden; border: 1px solid #b8b8b8; border-radius: 8px; background: #f5f5f3; }
.pc-section-head { display: flex; height: 34px; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid #c9c9c9; background: #e8e8e5; }
.pc-section-head h2 { margin: 0; font-size: 17px; font-weight: 700; text-transform: lowercase; }
.pc-section-head span { color: var(--muted); font-size: 12px; }
.party-strip { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.party-slot { display: flex; min-width: 0; height: 78px; flex-direction: column; align-items: center; justify-content: center; padding: 2px; overflow: hidden; border: 1px solid #aaa; border-radius: 6px; background: #fff; cursor: pointer; }
.party-slot:hover { border-color: #777; background: #f7fbff; }
.party-slot img { width: 58px; max-width: 100%; height: 55px; }
.party-slot span { max-width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.party-slot.empty { border-style: dashed; background: transparent; color: #888; }
.box-section { margin-top: 12px; }
.pc-box { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding: 10px; }
.pc-mon { position: relative; display: flex; min-width: 0; height: 86px; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2px; overflow: hidden; border: 1px solid transparent; border-radius: 6px; background: #fff; cursor: grab; touch-action: none; }
.pc-mon:hover { border-color: #999; }
.pc-mon.on-team { background: #eef5fb; border-color: #9ab7cf; }
.pc-mon img { width: 68px; max-width: 120%; height: 65px; }
.pc-mon-name { width: 100%; overflow: hidden; font-size: 10px; line-height: 15px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.team-mark { position: absolute; top: 3px; right: 3px; padding: 1px 4px; border-radius: 8px; background: #2d72ae; color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pc-mon.dragging { opacity: .35; cursor: grabbing; }
.pc-mon.drag-over { border-radius: 8px; background: rgba(255,255,255,.35); }
.page-back { width: calc(100% - 58px); margin: 24px 29px 0; }
.pc-stage .page-back { margin-top: auto; margin-bottom: 12px; }

.sheet-backdrop { position: fixed; z-index: 200; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.38); }
.pokemon-sheet { position: relative; display: flex; width: min(520px, 100%); height: min(570px, calc(100vh - 36px)); height: min(570px, calc(100dvh - 36px)); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); flex-direction: column; padding: 18px; overflow-y: auto; border: 1px solid #777; border-radius: 12px; background: #fff; box-shadow: 0 14px 45px rgba(0,0,0,.3); }
.sheet-close { position: absolute; z-index: 1; top: 9px; right: 10px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 30px; line-height: 34px; }
.sheet-close:hover { background: #eee; }
.pokemon-summary { display: flex; min-height: 125px; align-items: center; gap: 15px; padding-right: 38px; }
.pokemon-summary > img { flex: 0 0 125px; width: 125px; height: 115px; }
.sheet-kicker { margin: 0 0 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pokemon-summary h2 { margin: 0 0 6px; font-size: 28px; font-weight: 400; }
.sheet-types { display: flex; gap: 4px; }
.sheet-types .type-chip { font-size: 10px; font-style: normal; }
.pokemon-facts { border-top: 1px solid #ccc; }
.pokemon-facts p { display: grid; grid-template-columns: 90px 1fr; gap: 12px; margin: 0; padding: 7px 2px; border-bottom: 1px solid #ddd; font-size: 13px; }
.pokemon-facts p span { color: var(--muted); }
.pokemon-facts p strong { font-weight: 400; text-align: right; }
.sheet-mode-content { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.sheet-section h3 { margin: 14px 0 6px; color: #3d5e87; font-size: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 76px)); justify-content: center; gap: 4px; }
.stat-card { display: grid; gap: 2px; padding: 6px 2px; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; text-align: center; }
.stat-card.raised { border-color: #9dc8a4; background: #e7f4e9; }
.stat-card.lowered { border-color: #d8a5ad; background: #f8e8eb; }
.stat-grid small { color: var(--muted); font-size: 9px; }
.stat-card.raised small { color: #397443; }
.stat-card.lowered small { color: #9b4d59; }
.stat-grid strong { font-size: 14px; font-weight: 400; }
.pc-detail-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0 8px; border-bottom: 1px solid #bbb; }
.pc-detail-tabs button { min-height: 34px; padding: 4px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; }
.pc-detail-tabs button.selected { border-bottom-color: #327db6; color: #185f98; }
.training-details { font-size: 13px; }
.training-stat-head, .training-stat-row { display: grid; grid-template-columns: minmax(52px, 1fr) repeat(3, minmax(48px, .8fr)); align-items: center; min-height: 32px; border-bottom: 1px solid #ddd; text-align: right; }
.training-stat-head { min-height: 25px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.training-stat-head span:first-child, .training-stat-row strong { text-align: left; }
.training-stat-row strong { font-weight: 400; }
.training-stat-row span { font-variant-numeric: tabular-nums; }
.training-stat-row small { color: var(--muted); font-size: 9px; }
.ev-total { display: flex; justify-content: space-between; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.ev-total strong { color: var(--ink); font-weight: 400; }
.sheet-moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.sheet-moves span { padding: 8px; border: 1px solid #bbb; border-radius: 5px; background: #f7f7f7; font-size: 13px; }
.sheet-actions { display: grid; gap: 7px; margin-top: auto; padding-top: 7px; }
.sheet-actions .gloss-button { width: 100%; min-height: 42px; font-size: 17px; }
.sheet-actions .gloss-button:disabled { opacity: .5; cursor: default; filter: grayscale(.35); }
.sheet-feedback { position: absolute; z-index: 2; top: 13px; right: 56px; max-width: calc(100% - 120px); margin: 0; padding: 4px 8px; overflow: hidden; border: 1px solid #aac5ae; border-radius: 10px; background: #edf6ee; color: #397443; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.plain-button { min-height: 42px; border: 1px solid #999; border-radius: 7px; background: #fff; cursor: pointer; }
.plain-button:hover { background: #f1f1f1; }
.sheet-secondary-action { flex: 0 0 42px; width: 100%; margin-top: 7px; }
.swap-chooser { display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: 16px; padding-top: 13px; border-top: 1px solid #bbb; }
.swap-chooser h3 { margin: 0; color: #284f9e; font-size: 17px; }
.swap-chooser > p { margin: 3px 0 10px; color: var(--muted); font-size: 12px; }
.swap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.swap-grid button { display: flex; min-width: 0; height: 58px; align-items: center; padding: 3px 6px; overflow: hidden; border: 1px solid #aaa; border-radius: 6px; background: #f7f7f7; cursor: pointer; }
.swap-grid button:hover { border-color: #777; background: #fff2f3; }
.swap-grid img { flex: 0 0 48px; width: 48px; height: 48px; }
.swap-grid span { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pc-item-chooser { display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: 10px; }
.pc-item-chooser > h3 { margin: 0; color: #284f9e; font-size: 17px; }
.pc-item-chooser > p { margin: 3px 0 8px; color: var(--muted); font-size: 12px; }
.pc-item-segments { flex: 0 0 auto; }
.pc-item-list { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.pc-item-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; min-height: 54px; align-items: center; gap: 6px; border-bottom: 1px solid #d4d8dd; font-size: 13px; }
.pc-item-row .item-icon { width: 40px; height: 40px; }
.pc-item-row .item-quantity { min-width: 35px; padding-right: 5px; padding-left: 5px; }
.pc-item-row .item-action { min-width: 48px; min-height: 31px; padding-right: 6px; padding-left: 6px; }
.pc-item-empty { display: grid; height: 100%; place-content: center; gap: 3px; color: var(--muted); text-align: center; }
.pc-item-empty strong { color: var(--ink); font-size: 17px; font-weight: 400; }
.pc-item-empty span { font-size: 12px; }
.nature-options { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; overflow-y: auto; }
.nature-options button { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 8px; border: 1px solid #bbb; border-radius: 5px; background: #f7f7f7; cursor: pointer; }
.nature-options button:hover { border-color: #777; background: #f1f6fa; }
.nature-options button.selected { border-color: #287ac4; background: #e9f4fc; box-shadow: inset 0 0 0 1px #5c9dd2; }
.nature-options strong { overflow: hidden; font-size: 12px; font-weight: 400; text-overflow: ellipsis; }
.nature-options small { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.nature-options small span { color: #397443; }
.nature-options small i { color: #9b4d59; font-style: normal; }
.pc-item-confirm { width: 100%; margin-top: 7px; flex: 0 0 42px; min-height: 42px; font-size: 17px; }
.pc-item-confirm:disabled { opacity: .5; cursor: default; }
.training-config form { display: grid; gap: 9px; }
.training-config label { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
.training-config input, .training-config select { width: 100%; min-height: 38px; padding: 5px 8px; border: 1px solid #aeb5bb; border-radius: 4px; background: var(--panel); color: var(--ink); font: inherit; }
.move-replace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.move-replace-field { margin: 0; padding: 0; border: 0; }
.move-replace-field legend { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.move-replace-grid label { position: relative; display: block; cursor: pointer; }
.move-replace-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.move-replace-grid span { display: grid; min-height: 46px; place-items: center; padding: 6px; border: 1px solid #aaa; border-radius: 5px; background: #f7f7f7; color: var(--ink); font-size: 13px; text-align: center; }
.move-replace-grid label:hover span { border-color: #777; background: #fff2f3; }
.move-replace-grid input:checked + span { border-color: #287ac4; background: #e9f4fc; box-shadow: inset 0 0 0 1px #5c9dd2; }
.pc-item-row.incompatible { opacity: .62; }
.pc-item-row .item-action:disabled { cursor: default; opacity: .65; }

.encounter-stage { display: flex; min-height: calc(100vh - 130px); flex-direction: column; }
.encounter-count { min-height: 26px; margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.encounter-list { display: grid; min-height: 0; flex: 1; align-content: start; gap: 10px; margin: 0 -3px; padding: 5px 3px 9px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.encounter-card { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; min-height: 122px; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid #b3b9b5; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; }
button.encounter-card { cursor: pointer; }
button.encounter-card:hover { border-color: #789481; background: #f7faf7; }
button.encounter-card:active { background: #eef5ef; transform: translateY(1px); }
.encounter-card.mystery { grid-template-columns: 94px minmax(0, 1fr); border-color: #a8b9ac; background: #f4f8f4; }
.encounter-mark, .encounter-sprite { position: relative; display: grid; width: 88px; height: 88px; place-items: center; border: 1px solid #bfd0c2; border-radius: 7px; background: #e8f2e9; }
.encounter-mark i { position: absolute; bottom: 20px; width: 4px; height: 27px; border-radius: 5px 5px 1px 1px; background: #6d9b73; transform-origin: bottom; }
.encounter-mark i:first-child { left: 25%; height: 25px; transform: rotate(-34deg); }
.encounter-mark i:nth-child(2) { left: 37%; height: 32px; transform: rotate(-17deg); }
.encounter-mark i:nth-child(3) { left: calc(50% - 2px); height: 38px; }
.encounter-mark i:nth-child(4) { right: 37%; height: 30px; transform: rotate(17deg); }
.encounter-mark i:last-child { right: 25%; height: 24px; transform: rotate(34deg); }
.encounter-copy { display: grid; min-width: 0; gap: 4px; }
.encounter-copy strong { font-size: 17px; font-weight: 400; }
.encounter-copy small { color: var(--muted); font-size: 12px; }
.encounter-sprite { overflow: hidden; border-color: #d0d4d1; background: #f7f7f7; }
.encounter-sprite img { width: 84px; height: 84px; transform: scale(1.16); }
.encounter-types { display: flex; flex-wrap: wrap; gap: 3px; }
.encounter-status { padding: 4px 7px; border: 1px solid #aac5ae; border-radius: 10px; background: #edf6ee; color: #397443; font-size: 10px; white-space: nowrap; }
.encounter-card.revealed { animation: encounter-reveal 240ms ease-out; }
.encounter-empty { display: flex; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.encounter-empty h2 { margin: 0 0 2px; font-size: 20px; font-weight: 400; }
.encounter-empty p { margin: 0; color: var(--muted); font-size: 13px; }
@keyframes encounter-reveal { from { opacity: .4; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .encounter-card.revealed { animation: none; } }
.encounter-stage .page-back { flex: 0 0 auto; margin-top: 8px; margin-bottom: 12px; }

.mart-stage, .bag-stage, .simple-stage { display: flex; min-height: calc(100vh - 104px); flex-direction: column; }
.mart-summary, .bag-summary { display: flex; min-height: 26px; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.balance { margin: 0; color: var(--ink); text-align: right; }
.purchase-message { margin: 0; overflow: hidden; color: #397443; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.shop-segments { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 3px 0 7px; padding: 3px; border: 1px solid #b9b9b9; border-radius: 8px; background: #e8e8e5; }
.shop-segments::before { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 12px) / 3); border: 1px solid #6da4ce; border-radius: 5px; background: #e9f4fc; box-shadow: 0 1px 2px rgba(0,0,0,.12); content: ""; transition: transform 180ms cubic-bezier(.25,.8,.25,1); }
.shop-segments[data-active-index="1"]::before { transform: translateX(calc(100% + 3px)); }
.shop-segments[data-active-index="2"]::before { transform: translateX(calc(200% + 6px)); }
.shop-segments button { position: relative; z-index: 1; min-width: 0; min-height: 36px; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #555; cursor: pointer; font-size: 13px; font-weight: 700; }
.shop-segments button:hover:not(.selected) { background: rgba(255,255,255,.55); }
.shop-segments button.selected { color: #185f98; }
@media (prefers-reduced-motion: reduce) { .shop-segments::before { transition: none; } }
.shop-list, .bag-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.shop-list { flex: 1; }
.bag-contents { display: flex; min-height: 0; flex: 1; }
.bag-list { width: 100%; flex: 1; }
.shop-list h2, .bag-list h2, .simple-stage h2 { margin: 6px 0 3px; border-bottom: 1px solid #c2cad4; color: #2d5d9c; font-size: 21px; font-style: italic; }
.shop-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) 30px auto; min-height: 58px; align-items: center; gap: 8px; border-bottom: 1px solid #d4d8dd; }
.item-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #aeb4ba; border-radius: 5px; color: #38536d; font-size: 10px; font-weight: 700; letter-spacing: -.02em; }
.item-icon.training { background: #edf4fa; }
.item-icon.held { border-color: #c5ad72; background: #faf3df; color: #776023; }
.item-icon.tm { border-color: #aaa1c9; background: #f0edf8; color: #554a7b; }
.item-copy { display: grid; }
.item-copy strong { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.item-copy small { color: #656565; }
.item-about-button { width: 29px; height: 29px; padding: 0; border: 1px solid #9aa3aa; border-radius: 50%; background: #f4f6f7; color: #526474; cursor: pointer; font-size: 14px; font-weight: 700; }
.item-about-button:hover { border-color: #60717e; background: #fff; }
.price-button { min-width: 111px; min-height: 38px; border: 2px solid #1d5f99; border-radius: 6px; background: linear-gradient(#6eb7ed, #287bc5); color: white; box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.22); cursor: pointer; text-shadow: 0 1px rgba(0,0,0,.3); }
.price-button:disabled { opacity: .48; cursor: default; }
.mart-sheet { position: relative; width: min(390px, 100%); padding: 15px 16px 14px; border: 1px solid #777; border-radius: 10px; background: var(--raised); box-shadow: 0 14px 45px rgba(0,0,0,.32); }
.mart-sheet-summary { display: flex; align-items: center; gap: 10px; padding-right: 35px; }
.mart-sheet-summary h2 { margin: 0; font-size: 21px; }
.mart-item-description { margin: 12px 0; padding: 8px 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.mart-item-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mart-item-facts span { min-width: 0; padding: 5px 6px; border: 1px solid #ccd1d4; border-radius: 4px; background: var(--surface); }
.mart-item-facts small, .mart-item-facts strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mart-item-facts small { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.mart-item-facts strong { font-size: 11px; }
.mart-sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.mart-sheet-actions > :only-child { grid-column: 1 / -1; }
.mart-sheet-actions .gloss-button { min-height: 39px; font-size: 17px; }
.mart-sheet-actions .plain-button { min-height: 39px; }
.purchase-ledger { margin: 12px 0 9px; border-top: 1px solid #bcc2c6; border-bottom: 1px solid #bcc2c6; }
.purchase-ledger p { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 31px; margin: 0; padding: 4px 3px; border-bottom: 1px solid #dde0e2; }
.purchase-ledger p:last-child { border-bottom: 0; }
.purchase-ledger p > span:first-child { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.purchase-ledger .purchase-value { font-size: 15px; font-weight: 400; }
.purchase-ledger p:nth-child(3) .purchase-value { color: #245f90; }
.purchase-ledger p:last-child .purchase-value { font-size: 17px; }
.purchase-slider-label { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.purchase-slider-label small { font-size: inherit; }
.purchase-slider { width: 100%; height: 34px; margin: 0 0 8px; padding: 0; appearance: none; background: transparent; cursor: pointer; }
.purchase-slider::-webkit-slider-runnable-track { height: 7px; border: 1px solid #7797af; border-radius: 4px; background: linear-gradient(#dcecf7, #b9d4e7); box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.purchase-slider::-webkit-slider-thumb { width: 25px; height: 25px; margin-top: -10px; border: 2px solid #1d5f99; border-radius: 50%; background: linear-gradient(#76bced, #287bc5); box-shadow: inset 0 1px rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.3); appearance: none; }
.purchase-slider::-moz-range-track { height: 7px; border: 1px solid #7797af; border-radius: 4px; background: linear-gradient(#dcecf7, #b9d4e7); }
.purchase-slider::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid #1d5f99; border-radius: 50%; background: #3d91cf; }
.purchase-slider:disabled { opacity: .45; cursor: default; }
.purchase-confirm { width: 100%; min-height: 42px; font-size: 18px; }
.mart-sheet-cancel { width: 100%; min-height: 36px; margin-top: 6px; }
.bag-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; min-height: 62px; align-items: center; gap: 8px; border-bottom: 1px solid #d4d8dd; }
.item-quantity { min-width: 42px; padding: 4px 7px; border: 1px solid #aaa; border-radius: 12px; background: #f4f4f4; font-size: 13px; text-align: center; }
.item-action { min-width: 58px; min-height: 34px; padding: 3px 9px; border: 1px solid #287ac4; border-radius: 6px; background: #fff; color: #1e659f; cursor: pointer; font-weight: 700; text-transform: lowercase; }
.item-action:hover { background: #eaf4fc; }
.item-action:active { background: #dcecf8; transform: translateY(1px); }
.bag-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bag-empty h2 { margin: 0 0 2px; font-size: 20px; font-weight: 400; }
.bag-empty p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.bag-empty .gloss-button { width: min(260px, 100%); }
.mart-stage .page-back, .bag-stage .page-back, .simple-stage .page-back { flex: 0 0 auto; margin-top: 8px; margin-bottom: 12px; }
.simple-stage { text-align: center; }
.simple-stage p { color: var(--muted); }
.simple-stage h2 { margin-top: 28vh; }

.info-tooltip { position: fixed; z-index: 100; width: min(300px, calc(100vw - 20px)); padding: 0; overflow: hidden; border: 1px solid #888; border-radius: 6px; background: rgba(244,244,244,.97); box-shadow: 0 3px 8px rgba(0,0,0,.28); color: #111; font: 13px/1.3 Arial, sans-serif; pointer-events: none; }
.info-tooltip .tip-head { padding: 4px 7px; border-bottom: 1px solid #aaa; font-size: 17px; font-weight: 700; }
.info-tooltip .tip-row { padding: 3px 7px; border-bottom: 1px solid #bbb; }
.info-tooltip .tip-row:last-child { border-bottom: 0; }
.info-tooltip .tip-types { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: middle; }
.type-chip { padding: 1px 4px; border-radius: 2px; background: #666; color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.type-chip.fire { background: #d45d37; }.type-chip.water { background: #447bc3; }.type-chip.grass { background: #55a447; }.type-chip.electric { background: #c7a323; }.type-chip.ghost { background: #68558b; }.type-chip.poison { background: #9953a2; }.type-chip.normal { background: #8b8b7a; }.type-chip.flying { background: #738fc8; }.type-chip.rock { background: #9f8739; }.type-chip.ground { background: #a47243; }.type-chip.psychic { background: #cf5079; }.type-chip.ice { background: #4fa8b1; }.type-chip.bug { background: #84921f; }.type-chip.fighting { background: #a63d32; }.type-chip.dark { background: #51433f; }.type-chip.dragon { background: #6250b8; }.type-chip.steel { background: #737d88; }.type-chip.fairy { background: #c866a1; }
.hold-active { filter: brightness(.92); }

html[data-theme="dark"] {
  --ink: #edf1f4;
  --muted: #aab3bb;
  --line: #59636c;
  --page: #121212;
  --surface: #202124;
  --raised: #252629;
  --red-a: #bd6669;
  --red-b: #8d3035;
  --orange-a: #bf7448;
  --orange-b: #914718;
  --gold-a: #b69a43;
  --gold-b: #846817;
  --green-a: #6f9f77;
  --green-b: #477b51;
  --blue-a: #4d8fc1;
  --blue-b: #255f91;
  --slate-a: #758493;
  --slate-b: #52606e;
  --purple-a: #9664ad;
  --purple-b: #6d3586;
}
html[data-theme="dark"] body { background: #121212; }
html[data-theme="dark"] .gloss-button { border-color: rgba(15,18,21,.78); box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -2px rgba(0,0,0,.22), 0 2px 2px rgba(0,0,0,.42); }
html[data-theme="dark"] .account-button { border-color: #68747d; background: linear-gradient(#3a4249, #252b31); color: #d4dce2; }
html[data-theme="dark"] .lead-choice,
html[data-theme="dark"] .switch-choice,
html[data-theme="dark"] .party-slot,
html[data-theme="dark"] .pc-mon,
html[data-theme="dark"] .encounter-card,
html[data-theme="dark"] .plain-button,
html[data-theme="dark"] .sheet-moves span,
html[data-theme="dark"] .move-replace-grid span,
html[data-theme="dark"] .nature-options button { border-color: #59636c; background: linear-gradient(#30363d, #242a30); color: var(--ink); }
html[data-theme="dark"] .move-replace-grid input:checked + span { border-color: #6aa8d8; background: #253c4d; box-shadow: inset 0 0 0 1px #4f8fbe; }
html[data-theme="dark"] .pc-detail-tabs { border-color: #4f5961; }
html[data-theme="dark"] .pc-detail-tabs button.selected { border-bottom-color: #70a9d3; color: #b9dcf5; }
html[data-theme="dark"] .training-stat-head,
html[data-theme="dark"] .training-stat-row { border-color: #434b52; }
html[data-theme="dark"] .lead-choice:hover,
html[data-theme="dark"] .switch-choice:hover,
html[data-theme="dark"] .party-slot:hover,
html[data-theme="dark"] .pc-mon:hover { background: #343b42; }
html[data-theme="dark"] .lead-details-card { border-color: #59636c; background: #24282c; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
html[data-theme="dark"] .lead-details-card > header,
html[data-theme="dark"] .lead-stat-line,
html[data-theme="dark"] .lead-stat { border-color: #4f5961; }
html[data-theme="dark"] .lead-stat.raised strong { color: #91d19b; }
html[data-theme="dark"] .lead-stat.lowered strong { color: #f09b9f; }
html[data-theme="dark"] .pc-section,
html[data-theme="dark"] .pokemon-sheet,
html[data-theme="dark"] .battle-log-card,
html[data-theme="dark"] .battle-log-card.expanded { border-color: #59636c; background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .pc-section-head,
html[data-theme="dark"] .battle-log-card > header,
html[data-theme="dark"] .shop-segments { border-color: #59636c; background: #30363d; }
html[data-theme="dark"] .shop-segments::before { border-color: #557e9d; background: #263f52; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
html[data-theme="dark"] .shop-segments button { color: #c7cdd2; }
html[data-theme="dark"] .shop-segments button:hover:not(.selected) { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .shop-segments button.selected { color: #d9efff; }
html[data-theme="dark"] .price-button { border-color: #315f82; background: linear-gradient(#4d8fc1, #255f91); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.42); color: #f2f7fb; }
html[data-theme="dark"] .battle-log-card h2,
html[data-theme="dark"] .section-label { color: #91b9ed; }
html[data-theme="dark"] .section-label.attack { color: #ef9475; }
html[data-theme="dark"] .move-button {
  --move-accent: #7f8991;
  --move-tint: rgba(127,137,145,.12);
  border-color: var(--move-accent);
  background:
    linear-gradient(var(--move-tint), var(--move-tint)),
    linear-gradient(#30353a, #24282c);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.38);
  color: #f0f3f5;
}
html[data-theme="dark"] .move-button strong { color: #f0f3f5; }
html[data-theme="dark"] .move-button span,
html[data-theme="dark"] .move-button small { color: #c8d0d6; }
html[data-theme="dark"] .move-button:hover { border-color: var(--move-accent); filter: brightness(1.08); }
html[data-theme="dark"] .move-button:disabled { opacity: .58; filter: grayscale(.15); }
html[data-theme="dark"] .move-button.type-fire { --move-accent: #c97960; --move-tint: rgba(201,121,96,.16); }
html[data-theme="dark"] .move-button.type-normal { --move-accent: #9e998b; --move-tint: rgba(158,153,139,.13); }
html[data-theme="dark"] .move-button.type-grass { --move-accent: #71a565; --move-tint: rgba(113,165,101,.15); }
html[data-theme="dark"] .move-button.type-electric { --move-accent: #b9a04d; --move-tint: rgba(185,160,77,.16); }
html[data-theme="dark"] .move-button.type-water { --move-accent: #6794cd; --move-tint: rgba(103,148,205,.16); }
html[data-theme="dark"] .move-button.type-ice { --move-accent: #68abb5; --move-tint: rgba(104,171,181,.16); }
html[data-theme="dark"] .move-button.type-psychic { --move-accent: #bd6d87; --move-tint: rgba(189,109,135,.16); }
html[data-theme="dark"] .move-button.type-poison { --move-accent: #9c69a2; --move-tint: rgba(156,105,162,.16); }
html[data-theme="dark"] .move-button.type-ghost { --move-accent: #796ca0; --move-tint: rgba(121,108,160,.17); }
html[data-theme="dark"] .move-button.type-ground { --move-accent: #ac805b; --move-tint: rgba(172,128,91,.16); }
html[data-theme="dark"] .move-button.type-rock { --move-accent: #a18c55; --move-tint: rgba(161,140,85,.16); }
html[data-theme="dark"] .move-button.type-fighting { --move-accent: #ae6257; --move-tint: rgba(174,98,87,.16); }
html[data-theme="dark"] .move-button.type-flying { --move-accent: #7e94c6; --move-tint: rgba(126,148,198,.16); }
html[data-theme="dark"] .move-button.type-dragon { --move-accent: #7c70ba; --move-tint: rgba(124,112,186,.17); }
html[data-theme="dark"] .move-button.type-bug { --move-accent: #8b994e; --move-tint: rgba(139,153,78,.16); }
html[data-theme="dark"] .move-button.type-dark { --move-accent: #7b6963; --move-tint: rgba(123,105,99,.17); }
html[data-theme="dark"] .move-button.type-steel { --move-accent: #818e99; --move-tint: rgba(129,142,153,.16); }
html[data-theme="dark"] .move-button.type-fairy { --move-accent: #bc729f; --move-tint: rgba(188,114,159,.16); }
html[data-theme="dark"] .battle-log-turn { border-color: #4e5962; background: #343b42; color: #c1c9cf; }
html[data-theme="dark"] .battle-log-entry { color: #e3e8ec; }
html[data-theme="dark"] .battle-log-entry.player { background: #253542; }
html[data-theme="dark"] .battle-log-entry.opponent { background: #3b292c; }
html[data-theme="dark"] .battle-log-card header button,
html[data-theme="dark"] .item-action,
html[data-theme="dark"] .item-about-button { border-color: #6c7a85; background: #292f35; color: #b9daf4; }
html[data-theme="dark"] .pokemon-facts,
html[data-theme="dark"] .pokemon-facts p,
html[data-theme="dark"] .shop-item,
html[data-theme="dark"] .bag-item { border-color: #4c565e; }
html[data-theme="dark"] .stat-card { border-color: #59636c; background: #2c3238; }
html[data-theme="dark"] .sheet-backdrop { background: rgba(0,0,0,.62); }
html[data-theme="dark"] .mart-sheet { border-color: #59636c; background: #24282c; }
html[data-theme="dark"] .mart-item-facts span,
html[data-theme="dark"] .purchase-ledger,
html[data-theme="dark"] .purchase-ledger p { border-color: #4f5961; }
html[data-theme="dark"] .purchase-ledger p:nth-child(3) .purchase-value { color: #91bfea; }
html[data-theme="dark"] .purchase-slider::-webkit-slider-runnable-track { border-color: #536f83; background: linear-gradient(#31495b, #253b4b); }
html[data-theme="dark"] .purchase-slider::-moz-range-track { border-color: #536f83; background: #2b4355; }
html[data-theme="dark"] .prompt,
html[data-theme="dark"] .switch-choice small,
html[data-theme="dark"] .item-copy small { color: #b2bbc2; }
html[data-theme="dark"] .info-tooltip { border-color: #69747d; background: rgba(38,44,50,.98); color: var(--ink); }
html[data-theme="dark"] .auth-card { border-color: #60676c; background: #24272a; color: var(--ink); }
html[data-theme="dark"] .auth-close,
html[data-theme="dark"] .auth-kicker,
html[data-theme="dark"] .password-help { color: #b5bdc3; }
html[data-theme="dark"] .auth-close:hover { color: #fff; }
html[data-theme="dark"] .auth-card input { border-color: #697177; background: #151515; color: var(--ink); box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
html[data-theme="dark"] .auth-primary { border-color: #676e73; background: linear-gradient(#454a4e, #303438); color: #f1f3f4; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5); }
html[data-theme="dark"] .auth-primary:hover { background: linear-gradient(#51575c, #393e42); }
html[data-theme="dark"] .logout-button { border-color: #7f5557; color: #ffc5c7; }
html[data-theme="dark"] .avatar-edit-badge { border-color: #737b80; background: #d8dcdf; color: #202326; }
html[data-theme="dark"] .profile-button { border-color: #676e73; background: linear-gradient(#454a4e, #303438); color: #f1f3f4; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5); }
html[data-theme="dark"] .profile-button.primary { border-color: #6689a2; background: linear-gradient(#42596a, #2f4657); color: #d8efff; }
html[data-theme="dark"] .profile-button.remove { color: #ffc5c7; }
html[data-theme="dark"] .auth-mode-link,
html[data-theme="dark"] .profile-link { color: #8fc5ee; }
html[data-theme="dark"] .auth-error { color: #ff9297; }

@media (max-width: 520px) {
  html, body { height: 100%; overflow: hidden; }
  body { background: var(--page); }
  .app { width: 100%; height: 100vh; height: 100dvh; min-height: 0; box-shadow: none; }
  .screen { height: 100vh; height: 100dvh; min-height: 0; padding: 0 14px 8px; overflow: hidden; }
  .screen-header { height: 62px; }
  .screen-title { position: absolute; right: 112px; left: 0; max-width: none; font-size: 16px; }
  .header-tools { top: 10px; right: -2px; gap: 6px; }
  .theme-toggle { width: 60px; height: 38px; border-radius: 19px; }
  .theme-toggle i { width: 30px; height: 30px; }
  .theme-toggle[aria-checked="true"] i { transform: none; }
  .account-button { width: 38px; height: 38px; }
  .landing, .encounter-stage, .pc-stage, .mart-stage, .bag-stage, .simple-stage { min-height: 0; height: calc(100% - 62px); }
  .home-actions { gap: 4px; }
  .home-actions .gloss-button { min-height: 37px; padding: 2px 10px 4px; border-radius: 6px; font-size: 17px; }
  .arena { margin-right: -14px; margin-left: -14px; }
  .trainer-wrap { min-height: 154px; }
  .trainer { width: 124px; height: 154px; }
  .opponent-team { gap: 4px 0; margin: 0 auto 9px; }
  .opponent-team button { min-height: 104px; }
  .opponent-team img { width: 126px; height: 104px; max-width: none; }
  .pc-help { font-size: 11px; line-height: 1.2; }
  .pc-section-head { height: 29px; padding: 0 8px; }
  .pc-section-head h2 { font-size: 15px; }
  .party-strip { gap: 3px; padding: 5px; }
  .party-slot { height: 67px; }
  .party-slot img { width: 51px; height: 48px; }
  .party-slot span { font-size: 9px; }
  .box-section { margin-top: 7px; }
  .pc-box { gap: 3px; padding: 5px; }
  .pc-mon { height: 76px; }
  .pc-mon img { width: 60px; height: 57px; }
  .team-mark { top: 2px; right: 2px; padding: 1px 3px; font-size: 7px; }
  .pokemon-sheet { align-self: flex-end; width: 100%; height: min(570px, calc(100dvh - 22px)); max-height: calc(100dvh - 22px); padding: 15px 14px 12px; border-radius: 13px 13px 0 0; }
  .sheet-backdrop { align-items: flex-end; padding: 0; }
  .pokemon-summary { min-height: 108px; gap: 10px; }
  .pokemon-summary > img { flex-basis: 105px; width: 105px; height: 100px; }
  .pokemon-summary h2 { font-size: 24px; }
  .pokemon-facts p { padding: 5px 2px; }
  .sheet-section h3 { margin-top: 10px; }
  .sheet-moves span { padding: 6px; }
  .sheet-actions { margin-top: 12px; }

  .encounter-count { min-height: 22px; font-size: 12px; }
  .encounter-list { gap: 7px; }
  .encounter-card { grid-template-columns: 76px minmax(0, 1fr) auto; min-height: 100px; gap: 10px; padding: 7px 9px; }
  .encounter-mark, .encounter-sprite { width: 72px; height: 72px; }
  .encounter-sprite img { width: 70px; height: 70px; }
  .encounter-copy strong { font-size: 15px; }
  .encounter-copy small { font-size: 11px; }
  .page-back { min-height: 39px; padding: 2px 10px 4px; font-size: 18px; }
  .pc-stage .page-back, .encounter-stage .page-back, .mart-stage .page-back, .bag-stage .page-back, .simple-stage .page-back { margin-bottom: 0; }
  .mart-summary, .bag-summary { min-height: 22px; font-size: 12px; }
  .balance { font-size: 12px; }
  .purchase-message { font-size: 11px; }
  .shop-segments { margin-top: 2px; margin-bottom: 5px; }
  .shop-segments button { min-height: 33px; padding-right: 3px; padding-left: 3px; font-size: 12px; }
  .shop-list h2, .bag-list h2 { margin-top: 3px; font-size: 18px; }
  .shop-item { grid-template-columns: 42px minmax(0, 1fr) 28px auto; min-height: 52px; gap: 6px; font-size: 14px; }
  .bag-item { grid-template-columns: 42px minmax(0, 1fr) auto auto; min-height: 52px; gap: 6px; font-size: 14px; }
  .item-icon { width: 39px; height: 39px; }
  .price-button { min-width: 105px; min-height: 34px; }
  .item-about-button { width: 27px; height: 27px; }
  .mart-sheet { align-self: flex-end; width: 100%; padding: 14px; border-radius: 13px 13px 0 0; }
  .item-quantity { min-width: 39px; }
  .item-action { min-width: 52px; min-height: 32px; padding-right: 7px; padding-left: 7px; }
  .lead-choice, .switch-choice { padding: 2px; }
  .lead-choice span, .switch-choice span { font-size: 12px; }
  .lead-choice { height: 86px; }
  .lead-choice img { width: 62px; height: 58px; flex-basis: 58px; }
  .switch-choice img { width: 36px; height: 36px; flex-basis: 36px; }
  .move-button strong { font-size: 16px; }
}

@media (max-width: 350px) {
  .opponent-team img { transform: scale(1.1); }
}

@media (max-width: 520px) and (max-height: 860px) {
  .arena { height: 295px; }
  .battle-arena { height: 252px; }
  .lead-prompt, .battle-panel { padding-top: 7px; }
  .prompt { font-size: 15px; }
  .section-label { margin-bottom: 3px; font-size: 18px; }
  .lead-choice { height: 84px; }
  .switch-choice { height: 42px; }
  .lead-actions { gap: 5px; margin-top: auto; padding-top: 9px; }
  .lead-actions .gloss-button { min-height: 39px; }
  .move-grid { gap: 4px; }
  .move-button { min-height: 52px; padding-top: 4px; }
  .switch-choice { height: 39px; }
  .battle-message { min-height: 16px; margin-top: 4px; }
  .give-up { min-height: 38px; margin-top: auto; }
  .lead-actions, .give-up { margin-bottom: 0; }
}

@media (max-width: 520px) and (max-height: 700px) {
  .lead-arena { height: 240px; }
  .lead-choice { height: 78px; }
  .lead-choice img { height: 51px; flex-basis: 51px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}