* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; font: 16px Arial,sans-serif; color: #eee; background: radial-gradient(circle at top,#253a53,#0b101b 65%); }
.panel { width: min(410px,92vw); background: #151e30; border: 1px solid #47627a; border-radius: 14px; padding: 35px; box-shadow: 0 18px 60px #0009; }
h1 { margin: 0 0 8px; color: #ffda76; } .sub { color: #a9bbce; margin-bottom: 25px; }
input,button { width: 100%; padding: 13px; border-radius: 7px; margin: 8px 0; font-size: 16px; }
input { color: white; background: #0b1322; border: 1px solid #516178; }
button { background: #e7ba56; color: #172031; border: 0; font-weight: bold; cursor: pointer; }
button:hover { background: #ffe09b; } a { color: #ffe09b; } #message { min-height: 24px; color: #ffb6b6; }

.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.slot{border:1px solid #47627a;border-radius:10px;padding:15px;background:#0d1726}.slot h3{overflow-wrap:anywhere}select{background:#0b1322;color:#fff;padding:9px;margin:8px;border:1px solid #516178}label{display:block}.game-body{display:block;background:#0b101b}.game-shell{max-width:1000px;margin:20px auto;padding:0 12px}.game-shell header{display:flex;align-items:center;gap:15px;margin-bottom:10px}.game-shell header button{width:auto;margin-left:auto}.game-shell canvas{width:100%;height:auto;display:block;border:2px solid #607d64;image-rendering:pixelated}.game-shell footer{padding:12px;color:#b8c6d4}@media(max-width:600px){.slots{grid-template-columns:1fr}.game-shell header{flex-wrap:wrap}}

.game-shell { position: relative; }
.npc-dialogue { position:absolute; left:6%; right:6%; bottom:60px; z-index:5; padding:18px 24px; background:#171c2ef0; color:#fff; border:3px solid #e8c56a; border-radius:9px; font:16px/1.5 monospace; box-shadow:0 6px 24px #0008; cursor:pointer; }
.npc-dialogue[hidden] { display:none; }
.npc-dialogue strong {color:#f4d575;}
.npc-dialogue small {display:block;text-align:right;color:#d1d1d1;}

.creature-hud{position:absolute;z-index:4;top:58px;left:14px;padding:8px 12px;background:#142b2be8;color:#fff;border:2px solid #8fd5b0;border-radius:6px;font:14px monospace}
.battle-overlay{position:absolute;inset:48px 0 26px;z-index:9;background:#122a31eb;display:flex;align-items:center;justify-content:center;color:#fff;font:16px monospace}
.battle-overlay[hidden]{display:none}.battle-panel{width:min(620px,94%);background:#f5f0db;color:#223544;border:5px solid #355568;padding:22px;border-radius:12px;box-shadow:0 12px 30px #0009}
.battle-panel h2{margin:0 0 14px}.battle-panel button{margin:6px;padding:12px;background:#315c7b;color:white;border:0;border-radius:6px;cursor:pointer;font:inherit}.battle-panel button:hover{background:#397d9d}.battle-panel button:disabled{opacity:.5}
.combatants{display:flex;justify-content:space-between;gap:20px;min-height:130px}.combatants>div{padding:12px;border-radius:8px;background:#c7e7b4;flex:1}
#battle-log{min-height:75px;padding:12px;background:#fff;border:2px solid #9baeb1;margin:12px 0;white-space:pre-line}

.collection-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px;border-bottom:1px solid #657057;flex-wrap:wrap}.collection-row button{width:auto;padding:5px 9px}.collection-row span{flex:1;min-width:180px}#collection-modal .battle-panel{max-height:85vh;overflow:auto}

/* Phase 8: original CSS creature illustrations and responsive battle UI */
.combatants{align-items:stretch;min-height:230px}.combatants>div{min-width:0;position:relative;border:3px solid #6d936b;background:linear-gradient(155deg,#f3f9d9,#c5e5c4);text-align:center}
.battle-name{font-weight:800;font-size:16px}.creature-art{--creature-color:#7dbf8c;width:82px;height:76px;margin:13px auto 12px;background:var(--creature-color);border:5px solid #344e51;border-radius:42% 48% 38% 44%;box-shadow:inset -12px -10px #0002,0 10px 0 -4px #8dba90;position:relative;image-rendering:pixelated}
.creature-art:before,.creature-art:after{content:'';position:absolute;width:9px;height:12px;background:#253d45;top:23px;border-radius:3px}.creature-art:before{left:19px}.creature-art:after{right:19px}
.creature-face{position:absolute;bottom:7px;left:0;right:0;color:#fff;font-size:21px;font-weight:bold}.hp-track{height:13px;border:2px solid #38514b;background:#b7b5a8;border-radius:12px;overflow:hidden}.hp-fill{height:100%;background:#43b75e;transition:width .35s ease}.hp-fill.medium{background:#e7b83b}.hp-fill.low{background:#d45b52}.hp-label{font-size:13px;margin-top:5px}.battle-hit{animation:hitFlash .42s ease-in-out}@keyframes hitFlash{0%,100%{filter:none;transform:translateX(0)}25%{filter:brightness(1.7);transform:translateX(-6px)}55%{transform:translateX(6px)}}
#battle-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}#battle-buttons button{width:auto;min-width:0;font-size:13px;padding:9px 6px;overflow-wrap:anywhere}
@media(max-width:550px){.combatants{gap:6px}.combatants>div{padding:7px}.battle-panel{padding:10px}.battle-name{font-size:12px}.creature-art{transform:scale(.8);margin:0 auto}.hp-label{font-size:11px}}

.status-badge{display:inline-block;padding:3px 8px;margin:5px;border-radius:5px;font:700 12px monospace;color:#fff;background:#555}.status-poison{background:#8145a5}.status-burn{background:#bb4c25}.status-paralysis{background:#9b851a}

/* Phase 10: Pokédex */
.pokedex-panel{max-height:85vh;overflow-y:auto;max-width:820px;width:min(94vw,820px)}
.pokedex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.pokedex-card{background:#182c2a;border:1px solid #527b72;border-radius:10px;padding:12px;text-align:left;color:#f1f7ef}
.pokedex-card h3{margin:0 0 8px}.pokedex-card p{font-size:13px;line-height:1.5;margin:7px 0}
.pokedex-badge{font-size:12px;background:#315e52;border-radius:12px;padding:3px 8px}

/* Phase 13: indoor scene */
.interior-scene{margin:12px auto;padding:18px;max-width:430px;min-height:170px;border:8px solid #835d45;background:repeating-linear-gradient(90deg,#d9bb8b 0 38px,#caa779 38px 40px);color:#553c30;text-align:center;font-size:27px}.interior-counter{padding:12px;background:#ad795d}.interior-person{margin:12px}.interior-floor{font-size:18px}#building-actions button{margin:8px}

.pokemon-battle-sprite{width:116px;height:116px;object-fit:contain;image-rendering:pixelated;display:block;margin:4px auto;} .pokemon-icon{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;}

/* Phase 15 Pokédex visual repair */
#pokedex-modal{position:fixed;inset:0;z-index:50;padding:16px;overflow:hidden;}
#pokedex-modal .pokedex-panel{display:flex;flex-direction:column;width:min(980px,96vw);max-width:980px;max-height:92vh;overflow:hidden;padding:18px;}
#pokedex-modal .pokedex-panel>h2,#pokedex-modal #pokedex-progress{flex:none;margin:0 0 9px;}
#pokedex-modal #pokedex-list{flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;padding:5px;margin:0;}
#pokedex-modal .pokedex-card{padding:10px;min-height:0;}
#pokedex-modal .pokedex-card h3{font-size:15px;}
#pokedex-modal .pokedex-card p{font-size:12px;margin:6px 0;}
#pokedex-modal .pokemon-icon{display:block;width:80px;height:80px;object-fit:contain;margin:0 auto 8px;image-rendering:pixelated;}
#pokedex-modal .pokedex-unknown{width:80px;height:80px;margin:0 auto 8px;display:grid;place-items:center;font:bold 42px monospace;color:#8ea9a4;background:#213b37;border-radius:10px;}
#pokedex-modal #pokedex-close{flex:none;margin:12px 0 0;width:100%;}
@media(max-width:550px){#pokedex-modal #pokedex-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}#pokedex-modal .pokedex-card{padding:7px;}#pokedex-modal .pokedex-card h3{font-size:12px;}}

/* Pokédex layout hotfix: prevent implicit grid rows from shrinking/overlapping. */
#pokedex-modal #pokedex-list {
  display:grid;
  grid-auto-rows:max-content;
  align-content:start;
  align-items:stretch;
  overflow-y:auto;
  overflow-x:hidden;
}
#pokedex-modal #pokedex-list > .pokedex-card {
  height:auto;
  min-height:160px;
  align-self:start;
  overflow-wrap:anywhere;
}
#pokedex-modal .pokedex-card .pokemon-icon,
#pokedex-modal .pokedex-card .pokedex-unknown {flex-shrink:0;}

/* Phase 18: classic dual-screen inspired battle UI */
#battle-modal{inset:0;z-index:20;background:#14222be8;padding:12px;box-sizing:border-box}
#battle-modal .ds-battle{width:min(760px,96vw);max-width:760px;padding:0;border:6px solid #303e48;border-radius:5px;overflow:hidden;background:#f8f8f8;box-shadow:0 14px 45px #000b;font-family:monospace}
.ds-field{position:relative;height:390px;overflow:hidden;background:linear-gradient(#e7edf0 0%,#f7f5e7 40%,#ebdbb3 41%,#d7b574 58%,#b98e54 71%,#e7d9b9 72%,#e5e5dd 100%)}
.ds-ground{position:absolute;width:44%;height:72px;border-radius:50%;background:#c5ae8d;border:5px solid #746b72;box-shadow:inset 0 6px 0 #e6d5ae;z-index:0}
.ds-ground-enemy{right:4%;top:132px}.ds-ground-player{left:-7%;bottom:28px;width:54%;height:85px}
#battle-modal .combatants{display:contents}
#battle-modal .combatants>div{display:block;position:absolute;min-width:0;padding:0;margin:0;border:0;border-radius:0;background:none;text-align:left;box-shadow:none;z-index:1}
#battle-modal #wild-info{inset:0;pointer-events:none}
#battle-modal #player-info{inset:0;pointer-events:none}
#battle-modal .ds-status{position:absolute;background:#f7f7f5;border:4px solid #6b6c73;border-radius:8px 8px 3px 3px;box-shadow:5px 5px 0 #45454b;padding:9px 14px;min-width:225px;box-sizing:border-box;z-index:3;color:#303039}
#battle-modal .ds-enemy .ds-status{top:25px;left:18px}
#battle-modal .ds-player .ds-status{right:20px;bottom:19px}
#battle-modal .battle-name{font-size:18px;letter-spacing:.3px;margin-bottom:9px}
#battle-modal .hp-track{height:12px;border:3px solid #4e5056;border-radius:2px;background:#565962;margin-left:45px}
#battle-modal .hp-label{text-align:right;font-size:14px;font-weight:bold;margin-top:4px}
#battle-modal .ds-enemy .hp-label{display:none}
#battle-modal .pokemon-battle-sprite{position:absolute;width:170px;height:170px;object-fit:contain;image-rendering:pixelated;margin:0;z-index:2}
#battle-modal .ds-enemy .pokemon-battle-sprite{top:47px;right:9%}
#battle-modal .ds-player .pokemon-battle-sprite{bottom:30px;left:9%;width:190px;height:190px}
#battle-modal .status-badge{margin:4px 0 0;font-size:10px}
.ds-bottom{display:grid;grid-template-columns:1fr 1.1fr;gap:6px;background:#494c57;padding:7px;min-height:116px;box-sizing:border-box}
#battle-modal #battle-log{margin:0;min-height:0;background:#f7f7f7;color:#30313a;border:4px solid #b6b9c0;border-radius:6px;white-space:pre-line;padding:14px;font-size:18px;line-height:1.4;overflow:auto;max-height:125px}
.ds-controls{display:flex;flex-direction:column;gap:4px;min-width:0}
#battle-modal .ds-action-grid,#battle-modal .ds-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;align-content:stretch;flex:1}
#battle-modal .ds-action-grid[hidden],#battle-modal .ds-choice-grid[hidden],#battle-modal #battle-back[hidden]{display:none}
#battle-modal button{margin:0;padding:7px 5px;min-width:0;border:3px solid #4c4b55;border-radius:12px;box-shadow:inset 0 3px #ffffff55;color:white;font:bold 17px monospace;text-shadow:1px 2px #3338;cursor:pointer}
#battle-modal [data-menu="fight"]{background:#e66d75}#battle-modal [data-menu="bag"]{background:#bd853c}#battle-modal [data-menu="pokemon"]{background:#6f9c56}#battle-modal [data-menu="run"]{background:#477ba0}
#battle-modal .ds-choice-grid button{font-size:12px;background:#637b99;overflow-wrap:anywhere}#battle-modal #battle-back{background:#696c77;font-size:12px;padding:4px}
#battle-modal button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){.ds-field{height:300px}#battle-modal .ds-status{min-width:0;width:48%;padding:6px}#battle-modal .battle-name{font-size:12px}#battle-modal .pokemon-battle-sprite{width:120px;height:120px}#battle-modal .ds-player .pokemon-battle-sprite{width:135px;height:135px;left:4%;bottom:30px}#battle-modal .ds-enemy .pokemon-battle-sprite{right:3%;top:55px}#battle-modal .ds-player .ds-status{right:6px;bottom:9px}#battle-modal .ds-enemy .ds-status{left:6px;top:9px}.ds-bottom{grid-template-columns:1fr;min-height:190px}#battle-modal #battle-log{font-size:14px;max-height:70px}#battle-modal button{font-size:13px}}

/* Phase 18: attack presentation. Effect overlays never block clicks. */
.ds-enemy,.ds-player{overflow:visible}
.battle-vfx{position:absolute;z-index:15;pointer-events:none;width:95px;height:95px;left:50%;top:49%;transform:translate(-50%,-50%);animation:vfxBurst .85s ease-out both;image-rendering:pixelated}
.vfx-impact{background:radial-gradient(circle,#fff 0 13%,#ffdc51 14% 24%,#ef6d43 25% 36%,transparent 38%);filter:drop-shadow(0 0 9px #ffdb5b)}
.vfx-fire{background:radial-gradient(ellipse at 48% 68%,#fff2a6 0 12%,#ffd046 18% 28%,#f54a19 38% 48%,transparent 65%);filter:drop-shadow(0 0 12px #ff6825)}
.vfx-water{background:radial-gradient(circle,transparent 0 18%,#c4faff 20% 30%,#49b7ed 32% 41%,transparent 44%),radial-gradient(circle at 24% 22%,#a9e8ff 0 9%,transparent 12%);filter:drop-shadow(0 0 9px #57c7ff)}
.vfx-leaf{background:radial-gradient(ellipse at 35% 32%,#b6f47b 0 16%,#37a64e 18% 28%,transparent 30%),radial-gradient(ellipse at 68% 70%,#dbff8d 0 14%,#2f9b48 16% 25%,transparent 28%)}
.vfx-electric{background:conic-gradient(from 0deg,transparent 0 12%,#ffe850 13% 18%,transparent 19% 35%,#fffab2 36% 43%,transparent 44% 64%,#ffdb26 65% 72%,transparent 73%);filter:drop-shadow(0 0 10px #ffe11b)}
.pokemon-lunge{animation:pokemonLunge .5s ease-in-out!important}
@keyframes pokemonLunge{0%,100%{transform:translateX(0)}45%{transform:translateX(15px) scale(1.07)}}
@keyframes vfxBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-20deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(10deg)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(24deg)}}

/* Post-battle level-up stat gains (classic Pokemon-inspired panel). */
#battle-modal #battle-log:has(.battle-level-stats){max-height:none;overflow:visible;padding:8px;background:#f8f7ef}
.battle-level-stats{border:3px solid #505660;background:#fff;color:#222;padding:9px 14px;border-radius:5px;max-width:340px;margin:auto;box-shadow:inset 0 0 0 2px #e6e7e8;font-family:monospace}
.battle-level-title{text-align:center;font-size:17px;font-weight:bold;margin-bottom:7px;padding-bottom:7px;border-bottom:2px solid #aaa}
.battle-level-row{display:grid;grid-template-columns:1fr 52px 45px;gap:8px;font-size:16px;line-height:1.45}
.battle-level-row strong{text-align:right;color:#277d49}.battle-level-row span:last-child{text-align:right;color:#58616c}
@media(max-width:600px){.battle-level-stats{padding:5px 8px}.battle-level-row{font-size:13px;line-height:1.25}.battle-level-title{font-size:14px}}

.item-icon{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;vertical-align:middle}.item-entry{display:flex;align-items:center;gap:10px;margin:6px 0;padding:5px;border-radius:6px;background:rgba(120,145,170,.12)}

/* Indoor NPC dialogue: a game dialogue box rather than a header status notification. */
.npc-dialogue{left:4%;right:4%;bottom:70px;min-height:116px;background:#f6f3e8;color:#26343b;border:5px solid #3e6476;border-radius:12px;box-shadow:inset 0 0 0 3px #d5e5e6,0 8px 25px #0008;font:19px/1.5 monospace;padding:16px 22px;}
.npc-dialogue strong{display:block;color:#254c6d;margin-bottom:5px;font-weight:bold;}
.npc-dialogue small{color:#526678;font-size:12px;margin-top:5px;}

/* In-game chat overlay: bottom-left, above the map canvas. */
.game-chat{position:absolute;left:20px;bottom:53px;z-index:7;width:min(345px,calc(100% - 40px));height:225px;box-sizing:border-box;display:flex;flex-direction:column;background:rgba(10,18,29,.87);border:2px solid #698e9b;border-radius:9px;color:#f4f8fb;font:12px/1.4 monospace;box-shadow:0 5px 15px #0007;overflow:hidden}
.game-chat-header{display:flex;justify-content:space-between;align-items:center;padding:5px 9px;background:#243b4c}.game-chat-header button{width:24px;min-width:24px;padding:0;margin:0;font-size:14px}
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:6px 9px;overflow-wrap:anywhere;user-select:text}.chat-line{margin-bottom:5px}.chat-tag{color:#a4e4b0}.chat-global .chat-tag{color:#f7d477}
.chat-form{display:flex;gap:4px;padding:5px;background:#1c2d3a}.chat-form select{width:76px;min-width:76px;margin:0;padding:5px 2px;font-size:12px}.chat-form input{flex:1;min-width:0;background:#0c1620;border:1px solid #698e9b;color:white;border-radius:3px;padding:5px;font:12px monospace}.chat-form button{width:auto;min-width:46px;margin:0;padding:5px;font-size:12px}
/* Minimized: chat history stays visible without any dark panel or border. */
.game-chat.chat-collapsed{height:160px;background:transparent;border:0;box-shadow:none;overflow:visible;pointer-events:auto;cursor:pointer}
.game-chat.chat-collapsed .game-chat-header{background:transparent;padding:0;justify-content:flex-end;pointer-events:auto}
.game-chat.chat-collapsed .game-chat-header strong{display:none}
.game-chat.chat-collapsed #chat-toggle{pointer-events:auto;background:rgba(20,35,46,.7);border:1px solid #839ca3;border-radius:5px}
.game-chat.chat-collapsed .chat-form{display:none}
.game-chat.chat-collapsed .chat-messages{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:3px 5px;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;pointer-events:auto}
.game-chat.chat-collapsed .chat-line{margin-bottom:2px;color:white}
.game-chat.chat-collapsed .chat-line:nth-last-child(n+7){display:none}
@media(max-width:600px){.game-chat{width:min(290px,calc(100% - 30px));left:15px;height:180px}}

/* Minimized chat: keep the expand control at the bottom beside the messages. */
.game-chat.chat-collapsed{height:105px;bottom:53px;}
.game-chat.chat-collapsed .game-chat-header{position:absolute;right:4px;bottom:3px;top:auto;z-index:2;}
.game-chat.chat-collapsed .chat-messages{height:100%;padding-right:35px;}

/* Small icon-only menu anchored to the bottom of the game canvas. */
.game-viewport{position:relative;width:100%;}
.game-bottom-menu{position:absolute;right:12px;left:auto;bottom:12px;transform:none;display:flex;align-items:center;gap:8px;z-index:6;background:rgba(10,18,29,.76);border:1px solid rgba(194,216,222,.45);border-radius:12px;padding:5px 8px;box-shadow:0 3px 12px #0007;}
.game-bottom-menu button{width:42px;height:40px;min-width:42px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;border:1px solid #708b95;border-radius:8px;background:rgba(35,55,70,.92);font-size:22px;line-height:1;cursor:pointer;}
.game-bottom-menu button:hover,.game-bottom-menu button:focus-visible{background:#365e70;outline:2px solid #b8dfd4;outline-offset:1px;}
@media(max-width:600px){.game-bottom-menu{bottom:7px;gap:5px;padding:4px}.game-bottom-menu button{width:36px;height:36px;min-width:36px;font-size:19px;}}

/* Separate Party and Inventory icons share the bottom-right game dock. */
.game-bottom-menu{flex-wrap:nowrap;}

/* Compact wallet HUD inside the game viewport, upper-left. */
.game-wallet{position:absolute;top:12px;left:12px;z-index:7;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:9px;background:rgba(12,24,35,.78);border:1px solid rgba(255,222,132,.7);color:#fff4c9;font:700 16px/1.3 system-ui,sans-serif;text-shadow:0 1px 2px #000;pointer-events:none;box-shadow:0 2px 8px #0005;}
.game-wallet-coin{font-size:20px;line-height:1;}
@media(max-width:600px){.game-wallet{top:7px;left:7px;padding:4px 8px;font-size:14px}.game-wallet-coin{font-size:17px}}

/* Keep evolution/NPC dialogue above the chat and bottom-right menu. */
.game-shell > #npc-dialogue:not([hidden]){z-index:12;}

/* Compact Pokédex: contained within the game viewport, with an independent scrollable list. */
.game-shell #pokedex-modal{position:absolute;inset:0;z-index:30;box-sizing:border-box;overflow:hidden;padding:10px;background:rgba(7,20,27,.82);display:flex;align-items:center;justify-content:center;}
.game-shell #pokedex-modal[hidden]{display:none;}
.game-shell #pokedex-modal .pokedex-panel{box-sizing:border-box;width:min(760px,96%);max-width:760px;height:min(510px,calc(100% - 12px));max-height:calc(100% - 12px);min-height:0;padding:12px;display:flex;flex-direction:column;overflow:hidden;}
.game-shell #pokedex-modal .pokedex-panel>h2{font-size:21px;margin:0 0 5px;}
.game-shell #pokedex-modal #pokedex-progress{font-size:12px;margin:0 0 7px;}
.game-shell #pokedex-modal #pokedex-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:3px;}
.game-shell #pokedex-modal .pokedex-card{padding:8px;}
.game-shell #pokedex-modal .pokemon-icon,.game-shell #pokedex-modal .pokedex-unknown{width:56px;height:56px;margin:0 auto 5px;}
.game-shell #pokedex-modal #pokedex-close{flex:none;margin:8px 0 0;padding:8px;}
@media(max-width:550px){.game-shell #pokedex-modal .pokedex-panel{width:98%;padding:8px}.game-shell #pokedex-modal #pokedex-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}}

/* Animated EXP gain after battle victory */
.victory-exp-box{max-width:380px;margin:4px auto;padding:10px 14px;background:#f8fbff;border:2px solid #a4b7c8;border-radius:7px;color:#243246;font-family:monospace;text-align:center}
.victory-exp-title{font-size:17px;font-weight:bold;margin-bottom:8px}
.victory-exp-track{height:17px;border:2px solid #42536b;background:#dbe5ee;border-radius:9px;overflow:hidden}
.victory-exp-fill{height:100%;width:0;background:linear-gradient(90deg,#45a7e5,#62dbd6);border-radius:7px}
.victory-exp-percent{font-weight:bold;font-size:14px;margin-top:6px}
.victory-exp-gain{font-size:13px;margin-top:3px;color:#377b47}

/* Custom image-based menu icons (edit files in client/assets/menu-icons/) */
.game-bottom-menu button img{display:block;width:32px;height:32px;object-fit:contain;pointer-events:none;image-rendering:auto;}
@media(max-width:600px){.game-bottom-menu button img{width:28px;height:28px;}}

/* Party modal: stay within the game screen; scroll the party list instead of expanding off-screen. */
.game-shell{position:relative;}
#collection-modal{position:absolute;inset:60px 12px 42px;min-height:0;overflow:hidden;align-items:center;justify-content:center;}
#collection-modal .battle-panel{box-sizing:border-box;width:min(760px,100%);max-width:100%;max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
@media(max-width:600px){#collection-modal{inset:52px 4px 30px;}#collection-modal .battle-panel{padding:12px;}}

/* Compact party rows: hover/focus a Pokémon sprite for its details. */
#collection-list .collection-row{min-height:54px;}
#collection-list .party-hover-icon{cursor:help;outline-offset:3px;}
#collection-list .party-hover-icon:focus-visible{outline:3px solid #4e9fc5;border-radius:5px;}
.party-hover-card{position:fixed;z-index:99999;box-sizing:border-box;width:min(340px,calc(100vw - 24px));max-height:min(470px,calc(100vh - 24px));overflow-y:auto;pointer-events:none;padding:12px 14px;background:#f5f1da;border:2px solid #466b73;border-radius:9px;box-shadow:0 8px 25px #0008;color:#203c43;font-family:monospace;font-size:13px;}
.party-hover-card>strong{display:block;margin-bottom:10px;font-size:14px;}
.party-hover-card .party-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;}
.party-hover-card .party-type-line,.party-hover-card .party-exp-line{margin:8px 0;}
.party-hover-card .party-moves{border-top:1px solid #a9b9b3;padding-top:7px;}
.party-hover-card .party-move{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid #d5d9ca;}

/* Compact, uniform Pokédex grid and icon-only hover details */
.game-shell #pokedex-modal #pokedex-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));grid-auto-rows:142px;align-content:start;gap:8px;}
.game-shell #pokedex-modal .pokedex-tile{box-sizing:border-box;min-width:0;height:142px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px;padding:8px 5px;overflow:hidden;}
.game-shell #pokedex-modal .pokedex-tile-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:12px;font-weight:bold;}
.game-shell #pokedex-modal .pokedex-tile-icon{appearance:none;display:grid;place-items:center;flex:1 1 auto;min-height:0;width:74px;max-width:100%;padding:0;border:0;background:transparent;cursor:help;}
.game-shell #pokedex-modal .pokedex-tile-icon:focus-visible{outline:2px solid #e5bb5d;border-radius:5px;}
.game-shell #pokedex-modal .pokedex-tile-icon .pokemon-icon,.game-shell #pokedex-modal .pokedex-tile-icon .pokedex-unknown{width:60px;height:60px;max-height:100%;object-fit:contain;margin:0;image-rendering:pixelated;}
.game-shell #pokedex-modal .pokedex-tile .pokedex-badge{white-space:nowrap;font-size:11px;}
.pokedex-hover-card{position:fixed;z-index:100000;box-sizing:border-box;width:min(330px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow-y:auto;pointer-events:none;padding:12px 14px;background:#f5f1da;border:2px solid #466b73;border-radius:9px;box-shadow:0 8px 25px #0008;color:#203c43;font-family:monospace;font-size:13px;line-height:1.5;}
.pokedex-hover-card strong{display:block;margin-bottom:8px;font-size:14px;}
.pokedex-hover-card small{display:block;margin-top:7px;color:#57706b;}
.pokedex-hover-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:7px 0;}
.pokedex-hover-moves{border-top:1px solid #a9b9b3;padding:7px 0;overflow-wrap:anywhere;}
@media(max-width:550px){.game-shell #pokedex-modal #pokedex-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:132px;}.game-shell #pokedex-modal .pokedex-tile{height:132px;}}

/* Pokédex grid spacing: override legacy 160px minimum that overlaps 142px rows. */
.game-shell #pokedex-modal #pokedex-list{grid-auto-rows:156px;row-gap:14px;column-gap:10px;padding:7px 9px 12px;}
.game-shell #pokedex-modal #pokedex-list > .pokedex-card.pokedex-tile{height:156px;min-height:0;max-height:156px;margin:0;align-self:stretch;}
@media(max-width:550px){.game-shell #pokedex-modal #pokedex-list{grid-auto-rows:144px;row-gap:12px;column-gap:8px;}.game-shell #pokedex-modal #pokedex-list > .pokedex-card.pokedex-tile{height:144px;max-height:144px;}}


/* Stable V6: compact, scrollable Pokémon Storage PC. */
#storage-modal{position:absolute;inset:60px 12px 42px;min-height:0;overflow:hidden;align-items:center;justify-content:center;}
#storage-modal .battle-panel{box-sizing:border-box;width:min(570px,100%);max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px;font-size:13px;}
#storage-modal .battle-panel h2{font-size:19px;margin:0 0 8px;}
#storage-modal .battle-panel>p{margin:0 0 8px;line-height:1.35;}
#storage-list .collection-row{gap:6px;padding:3px 4px;min-height:38px;flex-wrap:nowrap;}
#storage-list .collection-row .pokemon-icon{width:32px;height:32px;object-fit:contain;flex:0 0 32px;}
#storage-list .collection-row span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#storage-list .collection-row button{flex:0 0 auto;padding:5px 9px;margin:2px;font-size:12px;}
#storage-list h3{font-size:15px;margin:12px 0 6px;}
#storage-modal #storage-close{display:block;width:100%;margin:9px 0 0;padding:9px;font-size:13px;}
@media(max-width:600px){#storage-modal{inset:52px 4px 30px;}#storage-modal .battle-panel{padding:10px;font-size:11px;}#storage-list .collection-row button{padding:5px 6px;font-size:11px;}}

/* Pokédollars wallet icon (transparent PNG asset) */
.game-wallet-icon{width:24px;height:24px;object-fit:contain;display:block;flex:none;}
@media(max-width:600px){.game-wallet-icon{width:20px;height:20px}}

/* Stable V6 Poké Mart: consistent compact item cards and Pokédollars icon. */
#shop-modal{position:absolute;inset:60px 12px 42px;min-height:0;overflow:hidden;align-items:center;justify-content:center;}
#shop-modal .pokemart-panel{box-sizing:border-box;width:min(680px,100%);max-width:100%;max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px;font-size:14px;}
.pokemart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pokemart-heading h2{font-size:21px;margin:0;}
.pokemart-wallet{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;background:#e4e5d3;font-size:13px;font-weight:bold;white-space:nowrap;}
.pokemart-subtitle{margin:7px 0 12px;color:#5e6a69;font-size:12px;}
.pokemart-catalog{display:grid;gap:9px;}
.pokemart-item{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;background:#e7e6d5;border:1px solid #d1d1bf;border-radius:9px;}
.pokemart-item-icon{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;}
.pokemart-item-details{min-width:0;display:grid;gap:5px;}
.pokemart-item-details strong{font-size:14px;overflow-wrap:anywhere;}
.pokemart-item-price,.pokemart-money{display:inline-flex;align-items:center;gap:5px;}
.pokemart-currency-icon{display:inline-block;width:19px;height:19px;object-fit:contain;vertical-align:middle;flex:none;}
.pokemart-actions{display:flex;gap:6px;}
#shop-modal .pokemart-actions button{width:auto;min-width:65px;margin:0;padding:8px 9px;font-size:12px;white-space:nowrap;}
.pokemart-message{min-height:16px;margin:10px 0;color:#285b49;font-size:12px;}
#shop-modal .pokemart-close{width:100%;margin:0;padding:10px;font-size:13px;}
@media(max-width:620px){#shop-modal{inset:52px 4px 30px;}#shop-modal .pokemart-panel{padding:12px;} .pokemart-item{grid-template-columns:36px minmax(0,1fr);gap:8px;padding:8px;} .pokemart-item-icon{width:34px;height:34px;} .pokemart-actions{grid-column:1/-1;justify-content:flex-end;} #shop-modal .pokemart-actions button{flex:1;}}


/* Stable V7: Poké Ball capture sequence */
#battle-modal .capture-ball{position:absolute;width:32px;height:32px;z-index:6;image-rendering:pixelated;pointer-events:none;transform:translate(-50%,-50%);transform-origin:center}
#battle-modal .capture-throw{animation:captureThrow .65s ease-in forwards}
#battle-modal .capture-shake{animation:captureShake .48s ease-in-out 3}
#battle-modal .pokemon-battle-sprite.capture-hidden{visibility:hidden!important}
@keyframes captureThrow{
  0%{transform:translate(-50%,-50%) scale(.8) rotate(-35deg)}
  55%{transform:translate(calc(-50% + var(--capture-half-dx)),calc(-50% + var(--capture-half-dy) - 90px)) scale(1.4) rotate(300deg)}
  100%{transform:translate(calc(-50% + var(--capture-dx)),calc(-50% + var(--capture-dy))) scale(1) rotate(720deg)}
}
@keyframes captureShake{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(-22deg)}75%{transform:translate(-50%,-50%) rotate(22deg)}}

/* Stable V7: recall and summon Poké Ball sequence */
#battle-modal .switch-old-pokemon{position:absolute!important;z-index:3!important;object-fit:contain;image-rendering:pixelated;pointer-events:none}
#battle-modal .switch-ball{z-index:8}
#battle-modal .switch-return{animation:switchBallReturn .62s ease-in forwards}
#battle-modal .switch-recall{animation:switchRecall .55s ease-in forwards}
#battle-modal .switch-summon{animation:switchBallSummon .62s ease-out forwards}
#battle-modal .switch-release{animation:switchRelease .4s ease-out both}
@keyframes switchBallReturn{0%{transform:translate(-50%,-50%) scale(.8)}100%{transform:translate(calc(-50% + var(--switch-dx)),calc(-50% + var(--switch-dy))) scale(1.15)}}
@keyframes switchRecall{0%{opacity:1;transform:scale(1)}75%{opacity:.65;transform:scale(.45)}100%{opacity:0;transform:scale(.05)}}
@keyframes switchBallSummon{0%{transform:translate(calc(-50% + var(--switch-dx)),calc(-50% + var(--switch-dy))) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1.25)}}
@keyframes switchRelease{0%{opacity:0;transform:scale(.1)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}


/* Stable V7: full-screen disconnect/reconnect feedback */
#connection-overlay[hidden]{display:none!important}
#connection-overlay{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;background:rgba(3,8,19,.86);backdrop-filter:brightness(.4) blur(3px);-webkit-backdrop-filter:brightness(.4) blur(3px);color:#fff;pointer-events:auto}
#connection-overlay .connection-panel{text-align:center;width:min(90vw,410px);padding:30px 26px;border:2px solid #63788c;border-radius:15px;background:rgba(13,26,41,.96);box-shadow:0 20px 70px #000a;font-family:inherit}
#connection-overlay h2{font-size:24px;margin:15px 0 9px;color:#fff}
#connection-overlay p{font-size:14px;line-height:1.55;color:#d1dce8;margin:0}
.connection-pokeball{position:relative;overflow:hidden;width:65px;height:65px;margin:auto;border:5px solid #14202c;border-radius:50%;background:linear-gradient(to bottom,#ed5252 0 45%,#14202c 45% 55%,#f3f5fa 55%);animation:connectionWobble 1.1s ease-in-out infinite}
.connection-pokeball span{position:absolute;left:50%;top:50%;width:23px;height:23px;transform:translate(-50%,-50%);border:5px solid #14202c;border-radius:50%;background:#fff}
.connection-dots{display:flex;justify-content:center;gap:7px;margin-top:18px}
.connection-dots i{width:8px;height:8px;border-radius:50%;background:#f1f4fb;animation:connectionPulse 1.2s infinite}
.connection-dots i:nth-child(2){animation-delay:.2s}.connection-dots i:nth-child(3){animation-delay:.4s}
@keyframes connectionWobble{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
@keyframes connectionPulse{0%,80%,100%{opacity:.2;transform:scale(.7)}40%{opacity:1;transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.connection-pokeball,.connection-dots i{animation:none}}

.ui-settings-panel{max-width:440px!important;width:min(92vw,440px);max-height:85vh;overflow:auto}
.ui-settings-panel h2{margin-bottom:6px}
.ui-settings-panel h3{margin:16px 0 9px}
.settings-subtitle{opacity:.75;font-size:13px;margin:0 0 14px}
.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;margin:7px 0;border:1px solid #63758a;border-radius:8px;background:#1b3141}
.settings-toggle-row input{width:20px;height:20px;accent-color:#5bd7a1}
.settings-opacity-row{display:grid;grid-template-columns:minmax(125px,1fr) minmax(90px,1.1fr) 43px;gap:12px;align-items:center;margin:10px 0;font-size:13px}
.settings-opacity-row input{width:100%;accent-color:#5bd7a1}
.settings-opacity-row output{text-align:right;font-variant-numeric:tabular-nums}
#settings-save-status{font-size:12px;min-height:20px;color:#a5e7bb}
.settings-footer{display:flex;justify-content:space-between;gap:10px}
#settings-open{visibility:visible!important}

/* Stable V7 compact settings: fit within the game window rather than page height. */
#settings-modal{position:absolute!important;inset:0!important;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px!important;box-sizing:border-box;z-index:100}
#settings-modal[hidden]{display:none!important}
.game-shell{position:relative}
#settings-modal .ui-settings-panel{box-sizing:border-box!important;width:min(440px,calc(100% - 16px))!important;max-width:calc(100% - 16px)!important;max-height:min(570px,calc(100% - 16px))!important;overflow-y:auto!important;padding:14px 18px!important;margin:0 auto!important;border-radius:12px!important;font-size:13px!important;line-height:1.3!important}
#settings-modal .ui-settings-panel h2{font-size:20px!important;margin:0 0 3px!important}
#settings-modal .settings-subtitle{font-size:11px!important;margin:0 0 9px!important}
#settings-modal .settings-toggle-row{min-height:30px!important;padding:5px 10px!important;margin:4px 0!important;line-height:1.3!important;color:#fff!important}
#settings-modal .settings-toggle-row label{color:#fff!important;opacity:1!important}
#settings-modal .settings-toggle-row input{height:17px;width:17px}
#settings-modal .ui-settings-panel h3{font-size:15px!important;margin:10px 0 6px!important}
#settings-modal .settings-opacity-row{grid-template-columns:minmax(115px,1fr) minmax(85px,1fr) 39px!important;gap:8px!important;min-height:29px!important;margin:4px 0!important;font-size:12px!important}
#settings-modal .settings-opacity-row input{margin:0!important;height:16px}
#settings-modal #settings-save-status{margin:8px 0 5px!important;min-height:16px!important;font-size:11px!important}
#settings-modal .settings-footer{gap:10px!important}
#settings-modal .settings-footer button{padding:7px 11px!important;min-height:32px!important;font-size:12px!important;flex:1}
@media(max-width:540px){#settings-modal .ui-settings-panel{padding:10px!important}#settings-modal .settings-opacity-row{grid-template-columns:100px minmax(70px,1fr) 35px!important;gap:5px!important}}

/* Settings status: dark, high-contrast text against the light panel. */
#settings-modal #settings-save-status{color:#25455b!important;font-weight:700!important;opacity:1!important;text-shadow:none!important}

/* Stable V7: character navigation and logout belong inside Settings */
#settings-modal .settings-account-actions{display:flex;gap:10px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(75,105,125,.35)}
#settings-modal .settings-account-actions>a,#settings-modal .settings-account-actions>button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:32px;padding:7px 10px!important;margin:0!important;border-radius:7px;font-size:12px!important;font-weight:700;text-decoration:none;cursor:pointer}
#settings-modal .settings-account-actions>a{background:#315d76;color:#fff;border:1px solid #527e95}
#settings-modal .settings-account-actions>button{background:#a83939;color:#fff;border:1px solid #d26a6a}
#settings-modal .settings-account-actions>a:hover{background:#41758f}
#settings-modal .settings-account-actions>button:hover{background:#c64b4b}\n

/* Stable V8: mobile landscape controls (desktop remains unchanged). */
.mobile-controls,#mobile-rotate{display:none}
@media (pointer:coarse) {
  html,body{overscroll-behavior:none}
  .game-body{touch-action:pan-x pan-y}
  .game-shell{max-width:none;margin:0 auto;padding:0 5px}
  .game-shell header{margin:0 0 3px;min-height:28px;font-size:12px}
  .game-shell footer{display:none}
  .game-viewport{width:100%;overflow:hidden}
  .game-shell canvas{max-height:calc(100dvh - 38px);object-fit:contain;margin:auto}
  .mobile-controls{display:flex;position:absolute;inset:0;pointer-events:none;z-index:14;align-items:flex-end;justify-content:space-between;padding:0 max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));box-sizing:border-box}
  .mobile-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;background:rgba(15,36,61,.76);border:2px solid rgba(255,255,255,.65);color:white;box-shadow:0 3px 10px #0008;border-radius:14px;font-weight:900;line-height:1;display:grid;place-items:center}
  .mobile-controls button.pressed{background:rgba(60,125,185,.92);transform:scale(.96)}
  .mobile-dpad{width:clamp(116px,25vh,170px);height:clamp(116px,25vh,170px);position:relative;pointer-events:none}
  .mobile-dir{position:absolute;width:34%;height:34%;font-size:clamp(18px,4vh,27px)}
  .mobile-dir.up{top:0;left:33%}.mobile-dir.down{bottom:0;left:33%}.mobile-dir.left{top:33%;left:0}.mobile-dir.right{top:33%;right:0}
  #mobile-interact{width:clamp(65px,16vh,95px);height:clamp(65px,16vh,95px);font-size:26px;margin:0 8px 12px 0;border-radius:50%}
  #mobile-interact small{font-size:10px}
  .game-bottom-menu{z-index:15}
  .game-chat{max-height:42dvh}
  .battle-overlay .battle-panel{max-height:94dvh;overflow:auto}
}
@media (pointer:coarse) and (orientation:portrait){
  #mobile-rotate{display:flex;position:fixed;inset:0;background:#0a1c30;color:#fff;z-index:99999;align-items:center;justify-content:center;text-align:center;padding:25px;font-size:22px;font-weight:700}
}

/* Mobile landscape V8 hotfix: isolate touch hit targets from chat overlay. */
#mobile-fullscreen{display:none}
@media (pointer:coarse) and (orientation:landscape){
 html,body{margin:0!important;padding:0!important;width:100%;height:100%;overflow:hidden!important}
 .game-body{height:100dvh!important;min-height:0!important}
 .game-shell{position:relative!important;box-sizing:border-box!important;width:100vw!important;max-width:none!important;height:100dvh!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
 .game-shell header{position:absolute!important;top:0;left:max(8px,env(safe-area-inset-left));z-index:22;margin:0!important;padding:3px 7px!important;background:#081522a8;border-radius:5px;pointer-events:none}
 .game-viewport{position:absolute!important;inset:0!important;box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
 .game-viewport canvas{display:block!important;width:auto!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
 .game-chat{position:absolute!important;left:max(10px,env(safe-area-inset-left))!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;top:auto!important;right:auto!important;width:min(35vw,300px)!important;max-height:35dvh!important;z-index:16!important}
 .game-chat:not(.chat-collapsed){bottom:calc(10px + env(safe-area-inset-bottom) + 104px)!important}
 .game-chat.chat-collapsed{width:56px!important;height:48px!important;min-height:0!important;opacity:.85!important;pointer-events:none!important}
 .game-chat.chat-collapsed #chat-toggle{pointer-events:auto!important}
 .mobile-controls{position:fixed!important;inset:0!important;z-index:100!important;padding:0!important;display:block!important;pointer-events:none!important}
 .mobile-dpad{position:absolute!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;left:calc(12px + env(safe-area-inset-left))!important;width:clamp(120px,28dvh,176px)!important;height:clamp(120px,28dvh,176px)!important}
 .mobile-controls button{pointer-events:auto!important}
 #mobile-interact{position:absolute!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;right:calc(14px + env(safe-area-inset-right))!important;margin:0!important}
 .game-bottom-menu{position:absolute!important;right:calc(100px + env(safe-area-inset-right))!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;z-index:24!important;transform:scale(.78);transform-origin:bottom right}
 #mobile-fullscreen{display:block;position:fixed;right:calc(10px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));z-index:101;border:1px solid #ffffffaa;border-radius:8px;background:#0b203acb;color:white;padding:6px 10px;font-weight:700;font-size:12px;touch-action:manipulation}
 .battle-overlay{z-index:120!important}
 .npc-dialogue{z-index:121!important}
}

/* Desktop safety: never render mobile buttons on mouse/keyboard browsers. */
@media (hover:hover) and (pointer:fine) {
 #mobile-controls,#mobile-fullscreen,#mobile-rotate {display:none!important;visibility:hidden!important;pointer-events:none!important}
}
@media (min-width:1024px) and (pointer:fine) {
 #mobile-controls,#mobile-fullscreen,#mobile-rotate {display:none!important;visibility:hidden!important;pointer-events:none!important}
}

#mobile-controls[hidden],#mobile-fullscreen[hidden]{display:none!important}

/* Stable V8 touch hotfix: compact fullscreen, chat, and text-selection safety. */
@media (pointer:coarse) and (orientation:landscape){
  #mobile-fullscreen{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:fixed!important;inset:auto calc(8px + env(safe-area-inset-right)) auto auto!important;top:calc(8px + env(safe-area-inset-top))!important;width:auto!important;min-width:0!important;max-width:130px!important;height:32px!important;padding:4px 9px!important;font:600 11px/1 sans-serif!important;white-space:nowrap!important;overflow:hidden!important;box-sizing:border-box!important}
  #mobile-fullscreen.mobile-fullscreen-unsupported{display:none!important}
  .game-chat{z-index:28!important}
  .game-chat.chat-collapsed{left:calc(12px + env(safe-area-inset-left))!important;top:calc(36px + env(safe-area-inset-top))!important;bottom:auto!important;width:44px!important;height:38px!important;min-height:0!important;max-height:38px!important;overflow:visible!important;pointer-events:none!important}
  .game-chat.chat-collapsed .game-chat-header{display:block!important;width:44px!important;height:38px!important;padding:0!important}
  .game-chat.chat-collapsed #chat-toggle{display:block!important;width:44px!important;height:38px!important;min-width:44px!important;pointer-events:auto!important}
  .game-chat.chat-collapsed .chat-messages{display:none!important}
  .game-chat:not(.chat-collapsed){left:calc(10px + env(safe-area-inset-left))!important;top:calc(55px + env(safe-area-inset-top))!important;bottom:auto!important;width:min(300px,38vw)!important;height:min(200px,50dvh)!important;max-height:50dvh!important}
  .mobile-controls,.mobile-controls *,#chain-quest-hud,#chain-quest-hud *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
  .mobile-controls{touch-action:none!important}
  .mobile-dpad{z-index:102!important}
  .game-viewport{touch-action:none!important}
}

/* Stable V8 mobile layout v2: keep HUD and dialogue usable on short landscape screens. */
@media (pointer:coarse) and (orientation:landscape){
  .game-shell > #npc-dialogue:not([hidden]){
    position:fixed!important;
    left:50%!important;right:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;top:auto!important;
    transform:translateX(-50%)!important;
    width:min(62vw,690px)!important;max-width:calc(100vw - 180px)!important;
    min-height:0!important;max-height:38dvh!important;
    overflow-y:auto!important;box-sizing:border-box!important;
    padding:9px 14px!important;border-width:3px!important;
    font:clamp(12px,2.7dvh,17px)/1.35 monospace!important;
    z-index:130!important;
  }
  .game-shell > #npc-dialogue strong{margin-bottom:3px!important;font-size:1.05em!important}
  .game-shell > #npc-dialogue small{font-size:10px!important;margin-top:3px!important}
  .game-chat.chat-collapsed{
    position:fixed!important;left:50%!important;right:auto!important;
    top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:44px!important;height:38px!important;
    z-index:80!important;
  }
  .game-chat:not(.chat-collapsed){
    position:fixed!important;left:50%!important;right:auto!important;
    top:auto!important;bottom:calc(52px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(52vw,400px)!important;height:min(45dvh,210px)!important;
    max-height:45dvh!important;z-index:80!important;
  }
  .game-bottom-menu{
    position:fixed!important;left:50%!important;right:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%) scale(.70)!important;
    transform-origin:bottom center!important;
    z-index:26!important;
  }
  #mobile-fullscreen:not(.mobile-fullscreen-unsupported){
    display:inline-flex!important;position:fixed!important;
    top:calc(7px + env(safe-area-inset-top))!important;
    right:calc(10px + env(safe-area-inset-right))!important;
    width:auto!important;max-width:110px!important;
    height:30px!important;padding:4px 8px!important;
    font-size:11px!important;z-index:105!important;
  }
  .mobile-dpad{z-index:110!important}
  #mobile-interact{z-index:110!important}
}

/* Stable V8: separate bottom-center chat from the menu bar. */
@media (pointer:coarse) and (orientation:landscape) {
  .game-bottom-menu {
    position:fixed!important;left:50%!important;right:auto!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%) scale(.68)!important;
    transform-origin:bottom center!important;
    z-index:31!important;
  }
  .game-chat.chat-collapsed {
    position:fixed!important;left:50%!important;right:auto!important;
    top:auto!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:44px!important;height:38px!important;z-index:83!important;
  }
  .game-chat:not(.chat-collapsed) {
    position:fixed!important;left:50%!important;right:auto!important;
    top:auto!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(50vw,380px)!important;height:min(38dvh,175px)!important;
    max-height:38dvh!important;z-index:83!important;
  }
  #mobile-fullscreen:not([hidden]) {
    display:inline-flex!important;visibility:visible!important;
    position:fixed!important;inset:auto calc(10px + env(safe-area-inset-right)) auto auto!important;
    top:calc(7px + env(safe-area-inset-top))!important;
    width:90px!important;height:32px!important;max-width:90px!important;
    padding:4px 6px!important;z-index:140!important;
    font:600 11px/1 sans-serif!important;align-items:center!important;justify-content:center!important;
  }
  #mobile-fullscreen.mobile-fullscreen-unsupported:not([hidden]) {display:inline-flex!important}
  #mobile-fullscreen-status {
    position:fixed;top:calc(46px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
    width:min(260px,65vw);padding:8px 11px;border-radius:8px;
    background:rgba(10,24,41,.95);border:1px solid #8ea8bd;color:#fff;
    font:12px/1.35 Arial,sans-serif;z-index:141;pointer-events:none;
  }
}
#mobile-fullscreen-status[hidden]{display:none!important}

/* Stable V8: analog joystick and mobile chat keyboard zoom fix. */
@media (pointer:coarse) and (orientation:landscape) {
  #mobile-joystick{
    position:absolute!important;left:calc(12px + env(safe-area-inset-left))!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    width:clamp(112px,29dvh,168px)!important;height:clamp(112px,29dvh,168px)!important;
    z-index:112!important;pointer-events:auto!important;touch-action:none!important;
    user-select:none!important;-webkit-user-select:none!important;
  }
  .mobile-joystick-base{
    position:absolute;inset:0;border-radius:50%;
    background:rgba(11,28,49,.73);border:3px solid rgba(210,232,255,.68);
    box-shadow:inset 0 0 18px #0008,0 3px 14px #0009;box-sizing:border-box;
    pointer-events:none;
  }
  .mobile-joystick-knob{
    position:absolute;width:44%;height:44%;top:28%;left:28%;border-radius:50%;
    background:radial-gradient(circle at 34% 28%,#6c99bc,#244568 75%);
    border:2px solid #c5e0f1;box-sizing:border-box;
    box-shadow:0 3px 10px #0009;transform:translate(0,0);
    pointer-events:none;will-change:transform;
  }
  #chat-input,#chat-channel,.chat-form input,.chat-form select{
    font-size:16px!important;
    -webkit-text-size-adjust:100%!important;
  }
  .game-chat:not(.chat-collapsed){
    max-height:min(38dvh,175px)!important;
    overflow:hidden!important;
  }
  html,body{scroll-behavior:auto!important;-webkit-text-size-adjust:100%!important}
}

/* Stable V8: fit the entire battle, including action buttons, on mobile landscape. */
@media (pointer:coarse) and (orientation:landscape) {
  #battle-modal:not([hidden]) {
    position:fixed!important;inset:0!important;
    width:100vw!important;height:100dvh!important;
    max-height:100dvh!important;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;
    box-sizing:border-box!important;display:flex!important;
    align-items:center!important;justify-content:center!important;
    overflow:hidden!important;z-index:200!important;
  }
  #battle-modal .ds-battle {
    box-sizing:border-box!important;width:min(100%,1100px)!important;
    max-width:1100px!important;height:100%!important;max-height:100%!important;
    min-height:0!important;display:flex!important;flex-direction:column!important;
    padding:0!important;border-width:3px!important;overflow:hidden!important;
  }
  #battle-modal .ds-field {
    flex:1 1 auto!important;height:auto!important;min-height:0!important;
    overflow:hidden!important;
  }
  #battle-modal .ds-bottom {
    flex:0 0 clamp(100px,27dvh,150px)!important;
    min-height:0!important;height:clamp(100px,27dvh,150px)!important;
    box-sizing:border-box!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;
    gap:5px!important;padding:5px!important;overflow:hidden!important;
  }
  #battle-modal #battle-log {
    min-height:0!important;max-height:100%!important;height:100%!important;
    box-sizing:border-box!important;padding:7px!important;
    font-size:clamp(11px,2.6dvh,16px)!important;line-height:1.25!important;
    overflow-y:auto!important;
  }
  #battle-modal .ds-controls{min-height:0!important;overflow-y:auto!important}
  #battle-modal .ds-action-grid,#battle-modal .ds-choice-grid {
    min-height:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
  }
  #battle-modal button {
    min-height:0!important;margin:0!important;padding:3px 5px!important;
    border-width:2px!important;border-radius:7px!important;
    font-size:clamp(11px,2.8dvh,16px)!important;
    touch-action:manipulation!important;
  }
  #battle-modal .ds-status {
    min-width:0!important;width:min(34vw,220px)!important;
    padding:clamp(3px,1dvh,7px)!important;border-width:2px!important;
  }
  #battle-modal .battle-name{font-size:clamp(11px,2.7dvh,16px)!important;margin-bottom:3px!important}
  #battle-modal .hp-track{height:clamp(5px,1.6dvh,9px)!important;border-width:2px!important;margin-left:25px!important}
  #battle-modal .hp-label{font-size:clamp(10px,2.3dvh,13px)!important;margin-top:2px!important}
  #battle-modal .ds-enemy .ds-status{top:7px!important;left:8px!important}
  #battle-modal .ds-player .ds-status{bottom:7px!important;right:8px!important}
  #battle-modal .ds-enemy .pokemon-battle-sprite {
    width:clamp(75px,25dvh,150px)!important;height:clamp(75px,25dvh,150px)!important;
    top:10%!important;right:12%!important;
  }
  #battle-modal .ds-player .pokemon-battle-sprite {
    width:clamp(85px,29dvh,175px)!important;height:clamp(85px,29dvh,175px)!important;
    bottom:3%!important;left:12%!important;
  }
  /* Fullscreen control is for overworld only; never cover battle actions. */
  body:has(#battle-modal:not([hidden])) #mobile-fullscreen {display:none!important}
  body:has(#battle-modal:not([hidden])) #mobile-controls {display:none!important}
}

/* Stable V8: always hide the location/status header above the game canvas.
   display:flex on .game-shell header previously overrode the HTML hidden attribute. */
.game-shell > header, .game-shell > header[hidden] { display:none !important; }

/* Character deletion confirmation */
.character-delete-danger{background:#a83939;color:#fff;border:1px solid #d26a6a}.character-delete-danger:hover{background:#c64b4b}.character-delete-danger:disabled{opacity:.5;cursor:wait}.character-delete-panel{margin:16px 0;padding:18px;border:1px solid #a83939;border-radius:10px;background:#241a26}.character-delete-panel p{line-height:1.5}.character-delete-confirm{display:flex;align-items:center;gap:10px;margin:10px 0}.character-delete-confirm input{width:auto;margin:0}.character-delete-panel[hidden]{display:none}


/* Unified battle dialogue sizing: regular text, victory, EXP and level-up. */
#battle-modal .ds-bottom {
  height: 150px;
  min-height: 150px;
  align-items: stretch;
}
#battle-modal #battle-log,
#battle-modal #battle-log:has(.battle-level-stats) {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  padding: 10px 12px;
  background: #f7f7f7;
}
#battle-modal .battle-level-stats {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 5px 8px;
  box-shadow: none;
}
#battle-modal .battle-level-title { font-size: 14px; margin-bottom: 3px; padding-bottom: 3px; }
#battle-modal .battle-level-row { font-size: 13px; line-height: 1.15; }
#battle-modal .battle-level-hint { font-size: 12px; }
#battle-modal .victory-exp-box {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 5px 8px;
}
@media(max-width:600px) and (orientation:portrait) {
  #battle-modal .ds-bottom { height: 190px; min-height: 190px; }
}
@media (pointer:coarse) and (orientation:landscape) {
  #battle-modal .ds-bottom {
    height: clamp(100px,27dvh,150px)!important;
    min-height: 0!important;
  }
}

/* Keep the Pokémon switch selector inside the standard battle panel.
   Up to five bench Pokémon + Back fit in a fixed 2-column, 3-row grid. */
#battle-modal .ds-controls { min-height:0; overflow:hidden; }
#battle-modal .ds-choice-grid { min-height:0; overflow-y:auto; }
#battle-modal .ds-choice-grid:has(> #battle-back) {
  grid-template-rows:repeat(3,minmax(0,1fr));
  align-content:stretch;
}
#battle-modal .ds-choice-grid > #battle-back {
  background:#696c77;
  font-size:12px;
  padding:4px;
  width:100%;
  height:100%;
}

/* Defeated wild/trainer Pokémon smoothly fades away before victory. */
@keyframes defeated-pokemon-fade {
  0% { opacity:1; transform:translateY(0) scale(1); filter:brightness(1); }
  35% { opacity:1; transform:translateY(3px) scale(.98); filter:brightness(1.2); }
  100% { opacity:0; transform:translateY(18px) scale(.9); filter:brightness(.75); }
}
#battle-modal .pokemon-battle-sprite.pokemon-faint {
  animation:defeated-pokemon-fade 1s ease-in forwards !important;
  pointer-events:none;
}

/* Durable Pokémon move-learning decision */
.move-learning-panel{display:flex;flex-direction:column;gap:9px;padding:12px;max-height:100%;overflow:auto;text-align:center}
.move-learning-panel h3{font-size:16px;margin:0}.move-learning-panel p{margin:2px 0 8px;font-size:13px}
.move-learning-panel button{border:2px solid #4c566a;border-radius:8px;background:#f9fafb;color:#263244;padding:8px 12px;cursor:pointer;font-weight:700;min-height:36px}
.move-learning-panel button:hover{background:#e2efff}.move-learning-panel button:disabled{opacity:.55;cursor:wait}
.move-learning-panel small{font-size:11px;opacity:.75}

/* Player-side battle positioning: raise the Pokémon sprite while keeping
   the platform half-hidden at the battle-menu boundary.
   Edit the bottom value below to fine-tune the sprite position. */
#battle-modal .ds-ground-player {
  bottom: -47px;
}
#battle-modal .ds-player .pokemon-battle-sprite {
  bottom: 0px !important;
}
@media (max-width:600px) {
  #battle-modal .ds-player .pokemon-battle-sprite {
    bottom: 0px !important;
  }
}
@media (pointer:coarse) and (orientation:landscape) {
  #battle-modal .ds-player .pokemon-battle-sprite {
    bottom: 0px !important;
  }
}

/* Enemy Pokémon: slightly higher and farther left; preserve sprite size. */
#battle-modal .ds-enemy .pokemon-battle-sprite {
  top: 0px !important;
  right: 12% !important;
}
@media (max-width:600px) {
  #battle-modal .ds-enemy .pokemon-battle-sprite {
    top: 0px !important;
    right: 12% !important;
  }
}
@media (pointer:coarse) and (orientation:landscape) {
  #battle-modal .ds-enemy .pokemon-battle-sprite {
    top: 0px !important;
    right: 12% !important;
  }
}

/* Professor Oak's starter selection: Pokémon sprites from client/sprites/pokemon. */
#starter-modal .battle-panel{box-sizing:border-box;width:min(760px,calc(100% - 20px));max-height:calc(100dvh - 34px);overflow-y:auto;padding:24px 28px;text-align:center}
#starter-modal .battle-panel h2{font-size:clamp(20px,3vw,29px);margin:0 0 9px;color:#20394c}
#starter-modal .battle-panel>p{font-size:15px;line-height:1.4;margin:0 0 20px;color:#415467}
#starter-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
#starter-buttons .starter-choice{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:270px;margin:0;padding:14px 10px 12px;border:3px solid #b6c9d5;border-radius:16px;background:#f7fbff;color:#213748;box-shadow:0 4px 0 #a6bac6;text-align:center;cursor:pointer;transition:transform .14s,border-color .14s,background .14s;white-space:normal}
#starter-buttons .starter-choice:hover,#starter-buttons .starter-choice:focus-visible{transform:translateY(-3px);background:#fff;border-color:#467eab;outline-offset:2px}
#starter-buttons .starter-choice:active{transform:translateY(1px);box-shadow:0 1px 0 #a6bac6}
#starter-buttons .starter-grass{border-color:#74b88a;background:#f0fbf1}
#starter-buttons .starter-fire{border-color:#e4a173;background:#fff5ed}
#starter-buttons .starter-water{border-color:#80b4e1;background:#f0f7ff}
#starter-buttons .starter-choice img{display:block;width:108px;height:108px;max-width:100%;object-fit:contain;image-rendering:pixelated;flex:none}
#starter-buttons .starter-details{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;flex:1}
#starter-buttons .starter-number{font-size:11px;color:#607687;letter-spacing:.04em}
#starter-buttons .starter-details strong{font-size:18px;line-height:1.25;color:#20394c}
#starter-buttons .starter-type{font-size:12px;font-weight:700;color:#4c6576}
#starter-buttons .starter-description{font-size:11px;line-height:1.4;color:#526574}
#starter-buttons .starter-choose{display:block;width:90%;border-radius:9px;padding:8px 5px;background:#315e7e;color:#fff;font-size:13px;font-weight:700}
#starter-modal #starter-close{width:auto;min-width:155px;margin:4px auto 0;padding:10px 20px;font-size:14px}
@media(max-width:580px){
 #starter-modal .battle-panel{padding:16px 12px;max-height:calc(100dvh - 16px)}
 #starter-modal .battle-panel>p{font-size:12px;margin-bottom:12px}
 #starter-buttons{gap:7px}
 #starter-buttons .starter-choice{min-height:220px;padding:8px 4px;gap:4px;border-width:2px;border-radius:10px}
 #starter-buttons .starter-choice img{width:76px;height:76px}
 #starter-buttons .starter-details strong{font-size:13px}
 #starter-buttons .starter-type{font-size:10px}
 #starter-buttons .starter-description{display:none}
 #starter-buttons .starter-choose{font-size:11px;padding:6px 2px}
}

/* Hide the top-left Pokédollars and current mission while NPC dialogue is open.
   Visibility (rather than display) avoids HUD reflow and restores automatically. */
.game-shell:has(> #npc-dialogue:not([hidden])) #wallet-display,
.game-shell:has(> #npc-dialogue:not([hidden])) #chain-quest-hud {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Wild and NPC trainer battle: fade overworld to black, then reveal battle. */
#encounter-transition{position:fixed;inset:0;background:#05060a;z-index:2147483647!important;pointer-events:auto;opacity:1}
#encounter-transition[hidden]{display:none!important}
#encounter-transition.encounter-playing{animation:encounter-reveal 2s ease-in-out both}
@keyframes encounter-reveal{
  0%,35%{opacity:1}
  100%{opacity:0}
}

/* Level-up stats appear on the left side of the battlefield, not in the dialogue. */
#battle-modal .ds-field .battle-level-overlay{
 position:absolute;left:2%;top:36%;z-index:30;
 width:min(340px,44%);max-width:none;box-sizing:border-box;
 margin:0;padding:10px 14px;pointer-events:none;
 box-shadow:3px 4px 0 #373943,inset 0 0 0 2px #e6e7e8;
}
#battle-modal .ds-field .battle-level-overlay .battle-level-title{font-size:15px;}
#battle-modal .ds-field .battle-level-overlay .battle-level-row{font-size:14px;line-height:1.5;}
@media(max-width:600px){
 #battle-modal .ds-field .battle-level-overlay{left:1%;top:35%;width:49%;padding:6px;}
 #battle-modal .ds-field .battle-level-overlay .battle-level-title{font-size:11px;}
 #battle-modal .ds-field .battle-level-overlay .battle-level-row{grid-template-columns:1fr 28px 28px;gap:2px;font-size:10px;}
}

/* Pokémon Universe: full-screen backdrop for Party, Inventory and Badges.
   Match the existing Pokédex overlay; leave menu panels and other dialogs unchanged. */
.game-shell #collection-modal,
.game-shell #inventory-modal,
.game-shell #badges-modal {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box;
  padding: 10px;
  background: rgba(7, 20, 27, .82) !important;
  z-index: 130 !important;
  align-items: center;
  justify-content: center;
}
.game-shell #collection-modal[hidden],
.game-shell #inventory-modal[hidden],
.game-shell #badges-modal[hidden] { display: none !important; }
.game-shell #collection-modal > .battle-panel,
.game-shell #inventory-modal > .battle-panel,
.game-shell #badges-modal > .battle-panel {
  box-sizing: border-box;
  max-height: calc(100% - 8px);
  overflow-y: auto;
}

/* Level-up stat panel belongs above the battlefield, not in the dialogue strip. */
#battle-modal .ds-field .battle-level-overlay{position:absolute;inset:0;z-index:35;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;pointer-events:none;background:rgba(16,26,36,.18)}
#battle-modal .ds-field .battle-level-stats{width:min(350px,92%);max-width:100%;box-sizing:border-box;max-height:calc(100% - 8px);overflow:auto;background:#fffdf3;border:3px solid #505660;border-radius:7px;padding:9px 14px;box-shadow:0 8px 24px #0008,inset 0 0 0 2px #e6e7e8;color:#222;pointer-events:none}
#battle-modal .ds-field .battle-level-title{font-size:17px}
#battle-modal .ds-field .battle-level-row{font-size:15px;line-height:1.3}
#battle-modal .ds-field .battle-level-hint{text-align:center;font-size:12px;margin-top:8px}
@media(max-width:600px){#battle-modal .ds-field .battle-level-stats{padding:7px 10px}#battle-modal .ds-field .battle-level-row{font-size:12px}}

/* Friends: matches existing full-screen game menu treatment. */
#friends-modal{position:fixed;inset:0;z-index:120;background:rgba(9,22,31,.85)}
#friends-modal .friends-panel{width:min(590px,94vw);max-height:88vh;overflow-y:auto}
#friends-add-form{display:flex;gap:8px;flex-wrap:wrap}
#friends-add-form input{flex:1;min-width:150px;padding:10px;border:1px solid #859ca6;border-radius:6px;background:#fff;color:#223544;font:inherit}
.friends-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #a6aca1}
.friends-row span{flex:1;overflow-wrap:anywhere}
.friends-row button{padding:6px 10px}
#friends-modal h3{margin:18px 0 6px}
#friends-message{min-height:1.5em}

/* Friends list alignment fix: override global full-width button rules. */
#friends-modal .friends-panel{box-sizing:border-box;width:min(590px,calc(100% - 24px));max-width:100%;padding:20px 24px;overflow-x:hidden}
#friends-modal .friends-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0;width:100%;box-sizing:border-box;padding:10px 0}
#friends-modal .friends-row>span{display:block;flex:1 1 150px;min-width:0;width:auto;overflow-wrap:break-word;word-break:normal;white-space:normal;line-height:1.35}
#friends-modal .friends-row>button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto!important;min-width:72px;max-width:100%;margin:0;padding:7px 12px;white-space:nowrap;font-size:14px;line-height:1.25}
#friends-modal #friends-list,#friends-modal #friends-incoming,#friends-modal #friends-outgoing{width:100%;min-width:0}
#friends-modal #friends-add-form{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
#friends-modal #friends-add-form input{box-sizing:border-box;flex:1 1 200px;min-width:0;width:auto;margin:0}
#friends-modal #friends-add-form button{flex:0 0 auto;width:auto!important;min-width:112px;margin:0}
#friends-modal #friends-close{display:block;box-sizing:border-box;width:100%;margin:16px 0 0}
@media(max-width:460px){
 #friends-modal .friends-panel{padding:14px 12px}
 #friends-modal .friends-row>span{flex-basis:100%}
 #friends-modal .friends-row>button{flex:1 1 90px}
 #friends-modal #friends-add-form button{flex:1 1 100%}
}

/* Friends dialog: center panel in viewport, keep controls aligned in their rows. */
#friends-modal:not([hidden]){position:fixed!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:auto!important;padding:16px!important;box-sizing:border-box!important}
#friends-modal .friends-panel{position:relative!important;inset:auto!important;margin:auto!important;display:block!important;flex:0 1 640px!important;width:min(640px,100%)!important;max-width:100%!important;max-height:calc(100dvh - 32px)!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important;padding:22px 26px!important}
#friends-modal .friends-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important;column-gap:10px!important;row-gap:8px!important;width:100%!important;min-width:0!important;box-sizing:border-box!important}
#friends-modal .friends-row>span{grid-column:1;min-width:0!important;width:auto!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.4!important}
#friends-modal .friends-row>button{flex:none!important;grid-column:auto;width:auto!important;min-width:72px!important;max-width:none!important;margin:0!important;padding:8px 12px!important;white-space:nowrap!important}
#friends-modal #friends-add-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important}
#friends-modal #friends-add-form input{min-width:0!important;width:100%!important;box-sizing:border-box!important}
#friends-modal #friends-add-form button{width:auto!important;min-width:115px!important;margin:0!important}
#friends-modal #friends-close{width:100%!important;box-sizing:border-box!important}
@media(max-width:520px){
 #friends-modal .friends-panel{padding:16px!important}
 #friends-modal .friends-row{grid-template-columns:minmax(0,1fr) auto auto!important;gap:5px!important}
 #friends-modal .friends-row>button{min-width:0!important;padding:7px 8px!important;font-size:12px!important}
 #friends-modal #friends-add-form{grid-template-columns:minmax(0,1fr)!important}
 #friends-modal #friends-add-form button{width:100%!important}
}

/* Friends dialog: position against the GAME viewport, not the browser window.
   The shell is the 960x600 logical game area scaled to the current display. */
.game-shell > #friends-modal:not([hidden]) {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  margin:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.game-shell > #friends-modal > .friends-panel {
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin:0!important;
  flex:0 1 640px!important;
  width:min(640px,100%)!important;
  max-width:100%!important;
  max-height:calc(100% - 4px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
@media (max-height:700px) {
  .game-shell > #friends-modal:not([hidden]) { padding:8px!important; }
  .game-shell > #friends-modal > .friends-panel { padding:12px 18px!important; }
  #friends-modal h3 { margin:10px 0 4px; }
  #friends-modal .friends-row { padding:5px 0!important; }
}
/* Friends: compact colored presence dots (no Online/Offline text). */
#friends-modal .friend-trainer-name{display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere}
#friends-modal .friend-presence-dot{display:inline-block;width:12px;height:12px;min-width:12px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
#friends-modal .friend-presence-dot.is-online{background:#16b948;box-shadow:0 0 0 2px rgba(22,185,72,.12)}
#friends-modal .friend-presence-dot.is-offline{background:#e33c3c;box-shadow:0 0 0 2px rgba(227,60,60,.12)}

/* Friend rows: spaced presence indicator, six visible party sprites, hover details. */
#friends-modal .friends-row{display:flex;align-items:center;gap:12px;min-width:0}
#friends-modal .friend-trainer-name{flex:0 1 155px;display:flex;align-items:center;gap:12px;min-width:95px;overflow-wrap:anywhere}
#friends-modal .friend-presence-dot{flex:0 0 12px;margin-right:3px}
#friends-modal .friend-party{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
#friends-modal .friend-pokemon{display:inline-flex;position:relative;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:6px;background:rgba(44,85,113,.08);cursor:help}
#friends-modal .friend-pokemon img{display:block;max-width:38px;max-height:38px;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
#friends-modal .friends-row>button{flex:0 0 auto}
@media(max-width:540px){
 #friends-modal .friends-row{flex-wrap:wrap}
 #friends-modal .friend-trainer-name{flex:1 1 100px}
 #friends-modal .friend-party{order:3;flex:1 0 100%;justify-content:flex-start}
}

/* Friend Pokémon: full stats/moves tooltip reuses Party menu styling. */
#friends-modal .friend-pokemon:focus-visible{outline:2px solid #356785;outline-offset:2px}

/* Whisper channel: compact recipient input and distinct private chat color. */
#chat-recipient:not([hidden]){display:block;min-width:80px;max-width:130px;flex:1 1 95px}
#chat-recipient[hidden]{display:none!important}
.chat-line.chat-whisper{color:#e2b6ff}
.chat-line.chat-whisper .chat-tag{color:#dba1ff}


/* Character selection — Pokémon-inspired trainer cards, scoped to this page. */
body.trainer-select-page{
 min-height:100vh;display:flex;align-items:center;justify-content:center;
 padding:32px 16px;
 background:radial-gradient(ellipse at 50% 0%,#315f69 0%,#193343 43%,#0b1927 100%);
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.trainer-select-page .trainer-select-panel{
 width:min(980px,100%);max-width:980px;padding:30px 32px;
 border:2px solid #4f7b85;border-radius:20px;
 background:linear-gradient(165deg,#203e4b 0%,#142b3b 65%,#102333 100%);
 box-shadow:0 18px 50px #0009, inset 0 1px #ffffff22;
}
.trainer-select-header{text-align:center;margin-bottom:24px}
.trainer-select-kicker{display:block;font-size:11px;letter-spacing:.19em;font-weight:800;color:#8fd8c5;margin-bottom:9px}
.trainer-select-header h1{font-size:clamp(25px,4vw,35px);letter-spacing:.015em;color:#ffe5a0;margin:0 0 8px}
.trainer-select-header .sub{margin:0 0 14px;color:#c5d9dd;font-size:14px}
.trainer-slot-count{display:inline-block;padding:6px 13px;background:#0e2734;border:1px solid #4c7b81;border-radius:30px;font-size:12px;color:#b9e5df;font-weight:700}
.trainer-select-page .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.trainer-select-page .slot{
 position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
 min-height:280px;padding:19px 15px 16px;gap:9px;
 background:linear-gradient(180deg,#f8f3de 0%,#e9e7d2 100%);
 color:#21384a;border:3px solid #5a8490;border-radius:15px;
 box-shadow:0 5px 0 #0b1b2b,0 12px 18px #0004;
}
.trainer-select-page .slot:hover{border-color:#e9bd57;transform:translateY(-2px);transition:transform .15s,border-color .15s}
.trainer-select-page .trainer-slot-label{align-self:flex-start;font-size:10px;font-weight:900;letter-spacing:.12em;color:#627b86}
.trainer-select-page .character-trainer-icon{
 width:86px!important;height:86px!important;object-fit:contain;
 image-rendering:pixelated;margin:0 auto 3px!important;
 filter:drop-shadow(0 5px 1px #23384b33);
}
.trainer-select-page .trainer-empty-symbol{
 display:grid;place-items:center;width:86px;height:86px;border:3px dashed #a4b7b0;
 border-radius:50%;background:#e5eee0;color:#6e9c85;font-size:50px;font-weight:300;
 margin:0 auto 3px;
}
.trainer-select-page .slot h3{font-size:19px;margin:0;line-height:1.25;color:#21384a;overflow-wrap:anywhere}
.trainer-select-page .slot p{font-size:13px;line-height:1.5;color:#5c7180;margin:0 0 6px;overflow-wrap:anywhere}
.trainer-select-page .slot .trainer-primary-action{
 margin-top:auto;background:#2f7390;color:white;border:2px solid #24556c;
 border-radius:9px;padding:11px;font-size:14px;
}
.trainer-select-page .slot .trainer-primary-action:hover{background:#398da9}
.trainer-select-page .slot .trainer-delete-action{
 margin:0;background:transparent;color:#9d3b40;border:1px solid #cfa7a4;
 font-size:12px;padding:8px;
}
.trainer-select-page .slot .trainer-delete-action:hover{background:#f4dddd}
.trainer-select-page #create,.trainer-select-page #delete-character{
 margin-top:22px;padding:20px;background:#122938;border:1px solid #5b8290;
 border-radius:12px;
}
.trainer-select-page #create[hidden],.trainer-select-page #delete-character[hidden]{display:none!important}
.trainer-select-page #create h2{margin:0 0 15px;color:#ffe3a0}
.trainer-select-page #createForm{display:grid;gap:8px}
.trainer-select-page #createForm input,.trainer-select-page #createForm select{
 width:100%;margin:0;background:#0c1d2c;color:#fff;border:1px solid #638997;border-radius:8px;
}
.trainer-select-page #createForm button{margin:0}
.trainer-select-page #createForm #cancel{background:#304e61;color:#fff}
.trainer-select-page #message{margin:14px 0 0;text-align:center}
.trainer-select-page .trainer-logout{
 display:block;width:auto;margin:14px auto 0;padding:10px 26px;
 background:#233c4e;color:#d6e6ea;border:1px solid #587787;border-radius:8px;font-size:13px;
}
.trainer-select-page .trainer-logout:hover{background:#31546a}
@media(max-width:740px){
 .trainer-select-page .trainer-select-panel{padding:23px 15px}
 .trainer-select-page .slots{grid-template-columns:1fr;gap:14px}
 .trainer-select-page .slot{min-height:220px}
}

/* Create Trainer: actual overworld sprite preview for Ash / Leaf. */
.trainer-select-page .trainer-create-preview{
 display:flex;align-items:center;gap:20px;
 padding:15px 18px;margin:5px 0 8px;
 background:linear-gradient(115deg,#f8f3df,#e5eddf);
 border:2px solid #78a0a2;border-radius:12px;color:#243c4a;
}
.trainer-select-page .trainer-create-preview-stage{
 display:flex;align-items:center;justify-content:center;
 flex:0 0 116px;min-height:122px;border:2px solid #9fbaa6;
 border-radius:10px;
 background:repeating-linear-gradient(0deg,#cce1c6 0 12px,#c1d8bb 12px 24px);
}
.trainer-select-page #trainer-create-sprite{
 display:block;width:96px;height:96px;object-fit:contain;
 image-rendering:pixelated;image-rendering:crisp-edges;
 filter:drop-shadow(0 4px 1px #34564350);
}
.trainer-select-page .trainer-create-preview-info{
 display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.trainer-select-page .trainer-create-preview-caption{
 color:#587c7c;font-size:11px;font-weight:800;letter-spacing:.1em;
}
.trainer-select-page #trainer-create-preview-name{font-size:23px;color:#244d65}
.trainer-select-page .trainer-create-preview-help{font-size:13px;line-height:1.5;color:#536a73}
@media(max-width:480px){
 .trainer-select-page .trainer-create-preview{gap:12px;padding:12px}
 .trainer-select-page .trainer-create-preview-stage{flex-basis:100px;min-height:110px}
 .trainer-select-page #trainer-create-sprite{width:88px;height:88px}
}

/* Poké Mart modal: uniform full-screen dimming, including the top HUD.
   The original inset (60px 12px 42px) left the header outside the overlay.
   This is scoped to the Mart only and leaves its content/card styling intact. */
.game-shell > #shop-modal:not([hidden]){
 position:absolute!important;
 inset:0!important;
 box-sizing:border-box!important;
 padding:16px!important;
 background:rgba(7,20,27,.82)!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 overflow:hidden!important;
 z-index:60!important;
}
.game-shell > #shop-modal[hidden]{display:none!important}
.game-shell > #shop-modal .pokemart-panel{
 position:relative;
 flex:0 1 680px;
 width:min(680px,100%);
 max-width:100%;
 max-height:calc(100% - 8px);
 margin:auto;
}
@media(max-width:620px){
 .game-shell > #shop-modal:not([hidden]){padding:8px!important}
 .game-shell > #shop-modal .pokemart-panel{max-height:100%}
}

/* Pokémon Storage PC: same full-game backdrop treatment as Poké Mart.
   Only the overlay is changed; storage contents and controls remain intact. */
.game-shell > #storage-modal:not([hidden]){
 position:absolute!important;
 inset:0!important;
 box-sizing:border-box!important;
 padding:16px!important;
 background:rgba(7,20,27,.82)!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 overflow:hidden!important;
 z-index:60!important;
}
.game-shell > #storage-modal[hidden]{display:none!important}
.game-shell > #storage-modal .battle-panel{
 position:relative;
 flex:0 1 570px;
 width:min(570px,100%);
 max-width:100%;
 max-height:calc(100% - 8px);
 margin:auto;
}
@media(max-width:600px){
 .game-shell > #storage-modal:not([hidden]){padding:8px!important}
 .game-shell > #storage-modal .battle-panel{max-height:100%}
}

/* Required client asset loading gate (initial world, warps and indoor entrances). */
#asset-loading-overlay[hidden],#asset-loading-retry[hidden]{display:none!important}
.game-viewport{position:relative}
#asset-loading-overlay{position:absolute;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;background:rgba(3,8,19,.95);color:white;pointer-events:auto}
.asset-loading-panel{width:min(90vw,430px);box-sizing:border-box;padding:32px 28px;border:2px solid #607c95;border-radius:16px;background:#102037;text-align:center;box-shadow:0 20px 70px #000a;font-family:inherit}
.asset-loading-panel h2{color:#ffdc50;font-size:24px;letter-spacing:1px;margin:0 0 20px}
.asset-loading-panel p{color:#d4e0ef;font-size:14px;line-height:1.5}
.asset-loading-track{height:13px;border-radius:20px;background:#304257;overflow:hidden;margin:20px 0 10px}
#asset-loading-fill{width:0;height:100%;background:#f6cf43;transition:width .15s ease}
#asset-loading-retry{margin-top:14px;padding:10px 25px;border:0;border-radius:8px;background:#f6cf43;color:#102037;font-weight:bold;cursor:pointer}