:root {
  color: #28343c;
  background: #edf0eb;
  font-family: Nunito, "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
  --red: #e64f58;
  --ink: #28343c;
  --muted: #7d8a89;
  --line: #e4e9e4;
  --forest: #263d3d;
  --mint: #a9e2bb;
  --mono: "DM Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 50% -22%, #fff 0, #f2f4f0 55%, #e9eeea 100%); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
[hidden] { display: none !important; }
.app-shell { width: min(100%, 560px); min-height: 100dvh; margin: auto; padding: 18px 17px 100px; }
.topbar, .brand, .top-actions, .player-strip, .walk-card-head, .walk-stats, .section-heading, .backup-row { display: flex; align-items: center; justify-content: space-between; }
.topbar { margin: 0 3px 15px; }
.brand { justify-content: flex-start; gap: 10px; }
.brand strong { display: block; font-size: 14px; letter-spacing: .2em; }
.brand small, .eyebrow { display: block; font: 500 9px var(--mono); letter-spacing: .1em; color: var(--muted); }
.pokeball-mark { position: relative; display: block; width: 36px; height: 36px; flex: none; border-radius: 50%; background: linear-gradient(#ed575b 0 46%, #27333d 46% 54%, #fff 54%); border: 2px solid #26333d; box-shadow: 0 2px 0 #c5ccc8; }
.pokeball-mark:after { content: ""; position: absolute; width: 10px; height: 10px; left: 11px; top: 11px; border: 2px solid #26333d; background: #fff; border-radius: 50%; }
.top-actions { gap: 9px; }
.local-badge, .social-local-tag { border-radius: 99px; padding: 7px 9px; color: #55806b; background: #e0efe4; font: 500 8px var(--mono); letter-spacing: .1em; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--red); font-size: 20px; }
.player-strip { gap: 10px; margin-bottom: 14px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.level-block { flex: 1; min-width: 0; }
.level-block .eyebrow b { color: var(--ink); }
.level-block > strong { display: block; margin: 1px 0 5px; font-size: 15px; }
.exp-track, .progress-track { height: 5px; overflow: hidden; border-radius: 99px; background: #e8ede8; }
.exp-track { max-width: 170px; }
.exp-track span, .progress-track span { display: block; width: 0; height: 100%; border-radius: 99px; background: #8cc7a0; transition: width .2s; }
.level-block small, .stamina-block small { color: var(--muted); font-size: 9px; }
.stamina-block, .watts-block { min-width: 70px; padding-left: 12px; border-left: 1px solid var(--line); }
.watts-block { position: relative; top: -4px; }
.stamina-block span, .watts-block span { display: block; color: var(--muted); font: 500 8px var(--mono); letter-spacing: .07em; }
.stamina-block strong, .watts-block strong { display: block; margin: 2px 0; font: 500 15px var(--mono); }
.walk-card { position: relative; overflow: hidden; padding: 19px 18px 16px; border-radius: 25px; color: #f6fbf7; background: var(--forest); box-shadow: 0 9px 24px #263b3b1b; }
.walk-card:after { position: absolute; top: -140px; right: -128px; width: 240px; height: 240px; border: 1px solid #ffffff12; border-radius: 50%; box-shadow: 0 0 0 29px #ffffff08, 0 0 0 62px #ffffff05; content: ""; pointer-events: none; }
.walk-card .eyebrow { color: #a6c5b8; }
.walk-card h1 { margin: 4px 0 0; font-size: 19px; }
.status-pill { border-radius: 99px; padding: 7px 9px; color: #c4dfd2; background: #405654; font: 500 8px var(--mono); letter-spacing: .08em; }
.status-pill.active { color: #214c36; background: #d6f2df; }
.companion-stage { position: relative; display: flex; height: 134px; align-items: center; justify-content: center; margin: 5px 0 0; }
.companion-stage:before { position: absolute; bottom: 10px; width: 154px; height: 58px; border-radius: 50%; background: #162c2b; opacity: .38; content: ""; }
.companion-stage img { position: relative; z-index: 1; width: 112px; height: 112px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 0 #182f2e55); }
.companion-caption { position: absolute; z-index: 2; right: 0; bottom: 3px; left: 0; text-align: center; }
.companion-caption strong { font-size: 12px; }
.companion-caption span { margin-left: 7px; color: #aac9bb; font: 8px var(--mono); }
.step-display { display: flex; align-items: baseline; gap: 9px; margin: 8px 0 10px; }
.step-display strong { font: 500 54px var(--mono); letter-spacing: -.08em; line-height: 1; }
.step-display span { color: #a6c5b8; font-size: 13px; }
.walk-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0 0 10px; }
.walk-stats span { display: block; color: #a6c5b8; font: 500 8px var(--mono); letter-spacing: .08em; }
.walk-stats strong { display: block; margin-top: 3px; font-size: 12px; }
.walk-card .progress-track { background: #ffffff24; }
.walk-card .progress-track span { background: var(--mint); }
.hint { margin: 8px 0 12px; color: #c6d7d0; font-size: 10px; }
.walk-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.walk-setup label, .gate-panel label { display: grid; gap: 5px; color: #afc5bc; font-size: 10px; font-weight: 800; }
.walk-setup select { min-width: 0; height: 37px; padding: 0 9px; border: 1px solid #ffffff27; border-radius: 10px; color: #f5faf6; background: #344b49; font-size: 10px; }
.pedometer-mode-control { display: grid; grid-template-columns: auto minmax(130px, 1fr); align-items: center; gap: 10px; margin: 0 0 10px; color: #afc5bc; font-size: 11px; font-weight: 800; }
.pedometer-mode-control select { min-width: 0; height: 37px; padding: 0 9px; border: 1px solid #ffffff27; border-radius: 10px; color: #f5faf6; background: #344b49; font-size: 11px; }
.walk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.primary-button, .secondary-button { min-height: 41px; padding: 9px 10px; border: 0; border-radius: 12px; font-size: 10px; font-weight: 900; }
.primary-button { grid-column: 1 / -1; color: #fff; background: var(--red); box-shadow: 0 3px 0 #b93442; }
.secondary-button { border: 1px solid #ffffff22; color: #e4f5eb; background: #ffffff14; }
.mini-button { font-size: 9px; }
.end-button { grid-column: 1 / -1; min-height: 46px; margin-top: 4px; border: 1px solid #ffffff55; border-radius: 12px; color: #f4cfcc; background: #ffffff10; font-size: 12px; font-weight: 800; }
.walk-footnote { display: flex; justify-content: space-between; margin: 8px 4px 0; color: #93a09b; font: 8px var(--mono); }
.screen { display: none; animation: show .18s ease; }
.screen.active { display: block; }
@keyframes show { from { opacity: .6; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.section-heading { align-items: flex-end; margin: 23px 3px 12px; }
.section-heading h1 { margin: 3px 0 0; font-size: 21px; }
.section-heading > span { color: var(--muted); font: 9px var(--mono); }
.section-note { margin: 0 4px 13px; color: var(--muted); font-size: 11px; }
.bottom-nav { position: fixed; z-index: 4; bottom: 0; left: 50%; display: flex; width: min(100%, 560px); justify-content: space-around; padding: 9px 5px calc(9px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid var(--line); background: #fffffff2; backdrop-filter: blur(15px); }
.bottom-nav button { display: grid; min-width: 43px; justify-items: center; gap: 2px; border: 0; color: #9aa5a0; background: none; font-size: 17px; }
.bottom-nav button span { font-size: 7px; }
.bottom-nav button.selected { color: var(--red); }
.app-version { margin: 12px 0 0; color: #a1aaa5; font: 8px var(--mono); text-align: center; letter-spacing: .04em; }
.dex-grid, .box-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dex-card, .box-card { position: relative; min-width: 0; padding: 8px 6px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: center; cursor: pointer; }
.dex-card img, .box-card img { width: 70px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.dex-card .dex-number { position: absolute; top: 7px; left: 8px; color: #a3aaa6; font: 8px var(--mono); }
.dex-card .dex-name, .box-card strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dex-card.unknown img { filter: brightness(0); opacity: .15; }
.dex-card.unknown .dex-name { color: #9ba5a1; }
.dex-caught { position: absolute; top: 5px; right: 7px; color: #73ac80; font-size: 9px; }
.box-card { padding: 10px 7px; }
.box-card.selected-companion { border-color: #e9908d; box-shadow: 0 0 0 2px #e94c5412; }
.box-card.selected-team { border-color: #75a9d4; box-shadow: 0 0 0 2px #75a9d422; }
.type-chip { display: inline-block; margin: 4px 2px 0; padding: 3px 6px; border-radius: 99px; color: #5f7269; background: #edf2ed; font: 7px var(--mono); }
.rarity-tag { display: inline-block; padding: 4px 7px; border-radius: 99px; color: #4c8060; background: #eaf4ec; font: 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.rarity-tag.rare { color: #5574a4; background: #e9effa; }
.rarity-tag.epic { color: #b15e4d; background: #fae8e4; }
.team-tag { display: inline-block; margin: 3px 2px 0; padding: 4px 7px; border-radius: 99px; color: #315e85; background: #e4f0fa; font: 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.empty-state { grid-column: 1 / -1; padding: 22px; border: 1px dashed #cdd6ce; border-radius: 15px; color: var(--muted); background: #fff; font-size: 12px; text-align: center; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-team-panel { margin:12px 0; padding:14px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.profile-team-panel h2 { margin:0 0 5px; font-size:14px; }
.profile-team-panel p { margin:0; color:var(--muted); font-size:10px; }
.profile-team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; }
.profile-team-card, .profile-team-empty { position:relative; display:flex; min-width:0; min-height:118px; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; border:1px solid #75a9d4; border-radius:12px; color:var(--ink); background:#f5faff; text-align:center; }
.profile-team-card img { width:68px; height:62px; object-fit:contain; image-rendering:pixelated; }
.profile-team-card strong, .profile-team-empty strong { max-width:100%; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.profile-team-card small, .profile-team-empty small { color:var(--muted); font-size:7px; }
.profile-team-empty { border-style:dashed; border-color:#cdd6ce; color:var(--muted); background:#fbfcfb; }
.stat-tile, .curve-card, .local-social-card { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.stat-tile span { color: var(--muted); font: 8px var(--mono); letter-spacing: .08em; }
.stat-tile strong { display: block; margin-top: 4px; font: 600 18px var(--mono); }
.curve-card { margin-top: 11px; }
.curve-card h2, .local-social-card h2 { margin: 5px 0; font-size: 15px; }
.curve-card p, .local-social-card p { color: var(--muted); font-size: 11px; line-height: 1.55; }
.curve-bars { display: flex; height: 48px; align-items: end; gap: 4px; margin-top: 12px; }
.curve-bars i { flex: 1; min-width: 4px; border-radius: 4px 4px 1px 1px; background: #a4d5b1; }
.backup-row { justify-content: flex-start; gap: 15px; margin: 14px 3px; }
.backup-row button, .backup-row label { padding: 0; border: 0; color: var(--red); background: none; font-size: 10px; font-weight: 800; cursor: pointer; }
.local-social-card { padding: 28px 20px; text-align: center; }
.social-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: auto auto 12px; border-radius: 16px; color: #6c9e7d; background: #e8f4ec; font-size: 24px; }
.social-local-tag { display: inline-block; margin-top: 10px; }
.tower-card { margin: 0; }
.tower-order { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:14px 0; text-align:center; }
.tower-mon-card { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; touch-action:pan-y; user-select:none; }
.tower-mon-card img { width:68px; height:62px; object-fit:contain; image-rendering:pixelated; pointer-events:none; }
.tower-fainted { filter:grayscale(1); opacity:.72; }
.tower-ko-label,.picker-ko { position:absolute; top:6px; right:5px; z-index:1; padding:3px 5px; border-radius:6px; color:#fff; background:#b84449; font-size:8px; font-weight:900; }
.tower-fainted small { color:#b84449; font-weight:800; }
.tower-mon-card strong { max-width:100%; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.tower-mon-card small { color:var(--muted); font-size:7px; }
.tower-order-number { position:absolute; top:5px; left:6px; display:grid; width:19px; height:19px; place-items:center; border-radius:50%; color:#fff; background:#e94c54; font:10px var(--mono); }
.tower-mon-card.dragging { z-index:1; border-color:#e94c54; box-shadow:0 5px 16px #0003; transform:scale(1.04); }
.tower-card .primary-button { width:100%; }
.tower-card h3 { margin:15px 0 6px; font-size:11px; text-align:left; }
.tower-team-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:6px; max-height:240px; overflow:auto; margin:8px 0 14px; padding:2px; }
.tower-picker-card { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; gap:2px; padding:5px 3px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fff; }
.tower-picker-card img { width:48px; height:44px; object-fit:contain; image-rendering:pixelated; }
.tower-picker-card strong { max-width:100%; overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.tower-picker-card small { color:var(--muted); font-size:7px; }
.tower-picker-card.selected { border-color:#75a9d4; background:#f1f8ff; box-shadow:0 0 0 1px #75a9d422; }
.nickname-editor { margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.nickname-editor summary { color:var(--ink); font-size:11px; font-weight:800; cursor:pointer; }
.nickname-editor label { display:grid; gap:5px; margin-top:10px; color:var(--muted); font-size:10px; }
.nickname-editor input { min-width:0; padding:9px; border:1px solid var(--line); border-radius:9px; }
#towerFeedback { display:block; margin-top:8px; color:var(--muted); font-size:10px; }
.tower-trainer { display:flex; align-items:center; gap:10px; margin:8px 0; padding:8px 11px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:10px; }
.tower-trainer img { width:38px; height:40px; object-fit:contain; image-rendering:pixelated; }
.tower-switch-list { display:grid; gap:7px; }
.tower-switch-list button { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; }
.tower-switch-list img { width:46px; height:42px; object-fit:contain; image-rendering:pixelated; }
.tower-switch-list span, .tower-switch-list small { display:block; }
.tower-switch-list span { font-size:11px; font-weight:800; }
.tower-switch-list small { margin-top:4px; color:var(--muted); font:9px var(--mono); }
.tower-switch-list button.already-active { border-color:#e4a14a; background:#fff8e8; }
.gate { display: grid; min-height: 100dvh; place-items: center; padding: 24px 16px; }
.gate-card { width: min(100%, 440px); padding: 24px; border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: 0 14px 40px #243b3512; }
.gate-brand { justify-content: flex-start; margin: 0 0 25px; }
.gate-panel h1 { margin: 5px 0; font-size: 23px; }
.gate-panel p { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.gate-panel label { margin: 12px 0; color: #657570; }
.gate-panel input { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline-color: #86bd95; }
.gate-panel .primary-button { width: 100%; margin-top: 7px; }
.text-button { display: block; margin: 12px auto 0; border: 0; color: var(--muted); background: none; font-size: 10px; }
.gate-error { min-height: 16px; margin: 10px 0 0; color: #ba464a; font-size: 11px; text-align: center; }
.starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.starter-card { padding: 8px 5px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: #f6f8f5; text-align: center; }
.starter-card img { display: block; width: 76px; height: 70px; margin: auto; object-fit: contain; image-rendering: pixelated; }
.starter-card strong { display: block; font-size: 10px; }
.starter-card small { display: block; margin: 3px 0 7px; color: var(--muted); font: 8px var(--mono); }
.starter-card button { width: 100%; min-height: 33px; border: 0; border-radius: 10px; color: #fff; background: var(--red); font-size: 9px; font-weight: 900; }
.game-dialog { width: min(94vw, 470px); max-height: min(88dvh, 780px); overflow: auto; padding: 20px; border: 0; border-radius: 22px; color: var(--ink); background: #f7f9f5; box-shadow: 0 20px 70px #14211db0; }
.game-dialog::backdrop { background: #182420a8; backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.dialog-head h2 { margin: 2px 0; font-size: 18px; }
.close-dialog { width: 31px; height: 31px; border: 0; border-radius: 9px; color: #56645e; background: #e8ede8; font-size: 17px; }
.bushes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.bush { min-height: 95px; border: 1px solid #cce2d0; border-radius: 17px; color: #498157; background: linear-gradient(#e8f5e9,#d6eadb); box-shadow: inset 0 -6px #badac1; font-size: 30px; }
.bush span { display: block; margin-top: 5px; color: #6c8b72; font: 9px var(--mono); }
.bush.target { border-color: #e9a354; color: #d68b26; background: #f9edcf; animation: flash .65s infinite alternate; }
.bush.wrong { animation: shake .25s; }
.radar-timer { color: #64736d; font: 500 11px var(--mono); text-align: center; }
.battle-pokemon { display: flex; align-items: center; justify-content: space-between; gap:7px; margin: 8px 0; padding: 10px; border-radius: 15px; background: #fff; }
.battle-pokemon img { width: 80px; height: 75px; object-fit: contain; image-rendering: pixelated; }
.battle-pokemon strong { display: block; font-size: 12px; }
.battle-pokemon small { color: var(--muted); font: 9px var(--mono); }
.battle-status { flex:0 0 auto; max-width:65px; padding:4px 6px; border-radius:8px; font-size:8px; font-weight:900; text-align:center; text-transform:uppercase; }
.battle-status.status-burn { color:#a34d18; background:#fff0d8; }
.battle-status.status-poison { color:#713f9b; background:#f0e5fa; }
.battle-status.status-paralysis { color:#8d7400; background:#fff8c9; }
.battle-status.status-sleep { color:#326a98; background:#e2f1ff; }
.companion-stage { cursor:pointer; }
.hp-track { height: 7px; overflow: hidden; margin-top: 6px; border-radius: 99px; background: #eee; }
.hp-track i { display: block; height: 100%; background: #85c791; }
.battle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.battle-actions button, .shop-row button, .modal-action { min-width: 0; padding: 10px; border: 0; border-radius: 11px; color: #365f41; background: #e8f1e8; font-size: 10px; font-weight: 900; }
.battle-actions .capture-action { color: #a64f48; background: #f5e2df; }
.move-button { text-align: left; }
.move-button small { display: block; margin-top: 4px; font: 8px/1.35 var(--mono); opacity: .78; }
.move-button[data-type="fire"] { color:#9b3d24; background:#ffe1d4; }
.move-button[data-type="water"] { color:#285a9e; background:#dcecff; }
.move-button[data-type="grass"] { color:#347148; background:#e0f3df; }
.move-button[data-type="electric"] { color:#856313; background:#fff2c7; }
.move-button[data-type="ice"] { color:#317d83; background:#dcf6f4; }
.move-button[data-type="fighting"] { color:#9c4836; background:#fae0d5; }
.move-button[data-type="poison"] { color:#764783; background:#f0e0f5; }
.move-button[data-type="ground"], .move-button[data-type="rock"] { color:#80633c; background:#efe4d1; }
.move-button[data-type="flying"] { color:#526ea0; background:#e6eaff; }
.move-button[data-type="psychic"] { color:#a0446f; background:#f9e0ed; }
.move-button[data-type="bug"] { color:#657b25; background:#edf3d5; }
.move-button[data-type="ghost"] { color:#595080; background:#e8e3f5; }
.move-button[data-type="dragon"] { color:#6947a0; background:#ece2fa; }
.move-button[data-type="dark"] { color:#4b4d59; background:#e4e5e9; }
.move-button[data-type="steel"] { color:#536578; background:#e3ebf1; }
.move-button[data-type="normal"] { color:#5c6867; background:#e9eeeb; }
.move-button[data-type="status"] { color:#536b5b; background:#e4eee6; }
.battle-log { max-height: 140px; overflow: auto; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.battle-log summary { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.battle-log[open] summary { margin-bottom:5px; }
.battle-log p { margin:3px 0; font-size:9px; line-height:1.4; }
.battle-log .super-effective, .battle-log .stat-boost { color:#d33c42; font-weight:800; }
.battle-log .not-effective, .battle-log .stat-drop { color:#3479be; font-weight:800; }
.battle-log .critical { color:#d88319; font-weight:900; }
.ball-options, .shop-list { display: grid; gap: 8px; margin-top: 10px; }
.ball-options button, .shop-row { display: flex; align-items: center; justify-content: space-between; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 11px; }
.ball-options button span { color: var(--muted); font: 9px var(--mono); }
.ball-options button:disabled { opacity: .45; }
.shop-row > div strong, .shop-row > div small { display: block; }
.shop-row > div small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.shop-row button { min-width: 90px; }
.dialog-copy { color: var(--muted); font-size: 11px; line-height: 1.5; }
.stats-list { display: grid; grid-template-columns: 1fr 1fr; flex: 1; gap: 7px; }
.stats-list div { padding: 9px; border-radius: 10px; background: #fff; font-size: 10px; }
.stats-list b { float: right; font-family: var(--mono); }
.stats-list b small { color: var(--muted); font-size: 8px; }
.stats-list b small.iv-low { color:#d43f47; font-weight:900; }
.stats-list b small.iv-orange { color:#e88926; font-weight:900; }
.stats-list b small.iv-light-green { color:#6ebd74; font-weight:900; }
.stats-list b small.iv-green { color:#268247; font-weight:900; }
.stats-list b small.iv-perfect { color:#c89518; font-weight:900; }
.held-item-control { display:grid; grid-template-columns:1fr auto; gap:7px; margin:7px 0; }
.held-item-control select { min-width:0; }
.pokemon-detail { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.pokemon-detail > img { width: 96px; height: 90px; object-fit: contain; image-rendering: pixelated; }
.move-list { display: grid; gap: 6px; margin: 8px 0 12px; }
.move-chip { padding: 9px 10px; border-radius: 11px; color: #52665b; background: #e8efea; font-size: 9px; }
.move-chip strong, .move-chip small { display: block; }
.move-chip strong { margin-bottom: 4px; font-size: 10px; }
.move-chip small { color: var(--muted); font: 8px/1.45 var(--mono); }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.detail-actions button:disabled { opacity: .55; }
.game-dialog h3 { margin: 12px 0 5px; font-size: 12px; }
.summary-exp { display: grid; grid-template-columns: 1fr auto; align-items: center; margin: 14px 0; padding: 14px; border-radius: 14px; background: #e5f2e7; }
.summary-exp span { font-size: 11px; font-weight: 800; }
.summary-exp strong { color: #458056; font: 600 24px var(--mono); }
.summary-exp small { grid-column: 1 / -1; margin-top: 4px; color: #718278; font-size: 9px; }
.level-up { padding: 10px; border-radius: 10px; color: #906c31 !important; background: #fff1d4; }
.modal-action { width: 100%; margin-top: 10px; }
.toast { position: fixed; z-index: 9; bottom: 82px; left: 50%; max-width: 90vw; padding: 10px 14px; transform: translate(-50%,10px); border-radius: 12px; color: #f5faf6; background: #273b39; font-size: 11px; opacity: 0; pointer-events: none; text-align: center; transition: all .2s; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
@keyframes flash { to { filter: brightness(1.15); transform: scale(1.025); } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (min-width: 500px) { .app-shell { padding-top: 24px; } .walk-card { padding: 22px; } .companion-stage { height: 148px; } .dex-grid, .box-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 370px) { .app-shell { padding-right: 12px; padding-left: 12px; } .walk-card { padding: 15px; } .step-display strong { font-size: 47px; } .bottom-nav button { min-width: 42px; } .bottom-nav button span { font-size: 7px; } }
.admin-tools { margin: 18px 0; padding: 16px; border: 1px solid #ead8a7; border-radius: 16px; background: #fff9e9; }
.health-sync-button { grid-column: 1 / -1; width: 100%; }
.health-connect-button { grid-column: 1 / -1; width: 100%; }
.admin-tools h2 { margin: 6px 0; font-size: 16px; }
.admin-tools p { color: var(--muted); font-size: 11px; line-height: 1.45; }
.admin-tools label { display: grid; gap: 6px; margin-top: 12px; font-size: 10px; font-weight: 800; }
.admin-tools input { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: white; font: 12px var(--mono); }
.admin-stamina-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-tools small { display: block; min-height: 14px; margin-top: 10px; color: #55806b; font-size: 10px; }
.player-identity { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.player-identity > img { width: 38px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.player-identity > img[hidden] { display: none; }
.trainer-preview { display: grid; height: 110px; justify-items: center; align-content: center; gap: 4px; margin: 10px 0; border-radius: 15px; background: #eef4ef; color: var(--muted); font-size: 10px; }
.trainer-preview img { width: 64px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.item-grid { display: grid; gap: 8px; }
.item-card { display: flex; align-items: center; gap: 13px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.item-card > img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.item-card > div { display: grid; flex: 1; gap: 4px; }
.item-card strong { font-size: 11px; }
.item-card small, .item-use-note { color: var(--muted); font-size: 9px; }
.item-card .item-description { line-height:1.45; }
.held-item-card { display:flex; width:100%; align-items:center; gap:10px; margin:6px 0; padding:8px 10px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; text-align:left; }
.held-item-card img { width:42px; height:42px; object-fit:contain; image-rendering:pixelated; }
.held-item-card span,.held-item-card strong,.held-item-card small { display:block; }
.held-item-card small { margin-top:3px; color:var(--muted); font-size:9px; }
.held-item-empty { margin:6px 0; padding:10px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); font-size:10px; }
.item-info-card { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.item-info-card img { width:56px; height:56px; object-fit:contain; image-rendering:pixelated; }
.item-use { justify-self: start; margin-top: 3px; padding: 6px 10px; border: 0; border-radius: 8px; color: #365f41; background: #e8f1e8; font-size: 9px; font-weight: 900; }
.item-use:disabled { opacity: .5; }
.search-balls { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 14px 0; }
.search-ball { display: grid; min-height: 90px; justify-items: center; align-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; font-size: 23px; }
.search-ball > span { font-size: 9px; }
.search-ball img { width: 38px; height: 38px; object-fit: contain; }
.search-ball small, .empty-ball { color: var(--muted); font-size: 8px !important; text-align: center; }
.search-ball:disabled { opacity: 1; }
.item-targets { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.item-target, .item-choice-list button, .battle-item { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 10px; text-align: left; }
.item-target { display: grid; justify-items: center; }
.item-target img { width: 48px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.item-choice-list, .battle-item-list { display: grid; gap: 7px; }
.item-choice-list button { justify-content: space-between; }
.item-choice-list small, .battle-item small { color: var(--muted); font-size: 8px; }
.battle-item img { width: 42px; height: 42px; object-fit: contain; }
.battle-item span, .battle-item strong, .battle-item small { display: block; }
.battle-item:disabled { opacity: .45; }
.admin-tools summary { color: #70551f; font-size: 12px; font-weight: 900; cursor: pointer; }
.admin-tools[open] summary { margin-bottom: 10px; }
.admin-tools select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 11px var(--mono); }
.admin-tools .admin-check { display: flex; align-items: center; gap: 8px; }
.admin-tools .admin-check input { width: 18px; height: 18px; }
.admin-reset { color: #8b3335; background: #f8e0df; }
.walk-repel-card { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 0 0 10px; padding: 11px; border: 1px solid #ffffff20; border-radius: 13px; background: #ffffff0b; }
.walk-repel-card > div { grid-column: 1 / -1; display: grid; gap: 3px; }
.walk-repel-card strong { font-size: 11px; }
.walk-repel-card small { color: #b4c9be; font-size: 9px; }
.walk-repel-card select { min-width: 0; height: 36px; padding: 0 8px; border: 1px solid #ffffff27; border-radius: 9px; color: #f5faf6; background: #344b49; font-size: 10px; }
.walk-repel-card .secondary-button { min-height: 36px; padding: 0 11px; }
.candy-panel { margin: 13px 0; padding: 13px; border: 1px solid #e8dfc2; border-radius: 16px; background: #fffdf5; }
.candy-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #eee9d9; }
.candy-heading > img { width: 37px; height: 37px; object-fit: contain; }
.candy-heading strong, .candy-heading small { display: block; }
.candy-heading strong { font-size: 11px; }
.candy-heading small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.candy-grid { display: grid; gap: 6px; padding-top: 8px; }
.candy-row { display: flex; align-items: center; gap: 8px; min-height: 38px; }
.candy-pokemon { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.candy-icon { width: 23px; height: 23px; object-fit: contain; }
.candy-row span { flex: 1; font-size: 10px; }
.candy-row strong { font: 500 11px var(--mono); }
.candy-empty { padding: 5px 0 0; color: var(--muted); font-size: 10px; }
.summary-candy { display: flex; align-items: center; gap: 9px; margin: 12px 0; padding: 10px; border-radius: 12px; background: #fff8df; font-size: 11px; }
.summary-candy img { width: 32px; height: 32px; object-fit: contain; }
.summary-candy span { flex: 1; }
.summary-candy strong { font: 700 13px var(--mono); color: #85641d; }
.evolution-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(95px,1fr)); gap: 8px; }
.evolution-options button { display: grid; justify-items: center; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 10px; }
.evolution-options img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.capture-stage { display: grid; justify-items: center; gap: 13px; padding: 18px 10px 24px; }
.capture-stage > img { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; }
.capture-stage > strong { min-height: 18px; font-size: 12px; text-align: center; }
.capture-shakes { display: flex; gap: 9px; }
.capture-shakes i { width: 9px; height: 9px; border-radius: 50%; background: #dfe5df; }
.capture-shakes i.lit { background: var(--red); box-shadow: 0 0 0 3px #e64f5820; }
.shiny-radar .bush { border-color: #e56a69; color: #b22e3c; background: linear-gradient(#ffe0dc,#f4b1ac); box-shadow: inset 0 -6px #df8c88; }
.shiny-radar .bush.target { border-color: #bc1f31; color: #a41427; background: linear-gradient(#fff0d0,#ffc4aa); box-shadow: inset 0 -6px #ed8b7c, 0 0 0 3px #e65b5b55; }
.companion-stage { overflow: hidden; border-radius: 18px; background: linear-gradient(#b9e2e9 0 48%, #9bca83 49% 69%, #7da96f 70%); transition: background .35s; }
.companion-stage:after { position: absolute; z-index: 0; right: -4%; bottom: 7px; left: -4%; height: 48px; background: radial-gradient(ellipse at 12% 100%, #71975f 0 35%, transparent 36%), radial-gradient(ellipse at 72% 100%, #83ac70 0 43%, transparent 44%); content: ""; }
.companion-stage[data-landscape="noisy-forest"], .companion-stage[data-landscape="big-forest"], .companion-stage[data-landscape="treehouse"] { background: linear-gradient(#afcfbd 0 48%, #809d65 49% 70%, #526e4c 71%); }
.companion-stage[data-landscape="beautiful-beach"], .companion-stage[data-landscape="warm-beach"], .companion-stage[data-landscape="stormy-beach"], .companion-stage[data-landscape="resort"], .companion-stage[data-landscape="beyond-the-sea"] { background: linear-gradient(#a8dce6 0 48%, #e8d69b 49% 68%, #d4bc7c 69%); }
.companion-stage[data-landscape="blue-lake"], .companion-stage[data-landscape="white-lake"] { background: linear-gradient(#a8d8e8 0 47%, #83c8cf 48% 67%, #789c72 68%); }
.companion-stage[data-landscape="dim-cave"], .companion-stage[data-landscape="scary-cave"], .companion-stage[data-landscape="quiet-cave"] { background: radial-gradient(ellipse at 50% 20%, #707f79, #354a48 78%); }
.companion-stage[data-landscape="volcano-path"] { background: linear-gradient(#d88765 0 48%, #72584e 49% 68%, #493d3c 69%); }
.companion-stage[data-landscape="icy-mountain-road"] { background: linear-gradient(#d2e5e8 0 50%, #a5c6c5 51% 68%, #839c9a 69%); }
.companion-stage[data-landscape="night-skys-edge"] { background: linear-gradient(#283b5a 0 55%, #475777 56% 70%, #57634e 71%); }
.companion-stage[data-landscape="suburban-area"], .companion-stage[data-landscape="town-outskirts"], .companion-stage[data-landscape="rugged-road"] { background: linear-gradient(#c3d9dc 0 49%, #a4b59c 50% 69%, #829183 70%); }
.signal-live .bush.target { animation: signal-pulse .18s infinite alternate; }
@keyframes signal-pulse { to { filter: brightness(1.25); transform: scale(1.025); } }