/* Full-window game with a pixel-art HUD over the Phaser canvas (docs/PLANO-INTERFACE.md).
   Positions follow the PokeIdleMMO reference (sections 1-2); the components follow the look of PokeIdle.io
   (section 7): titled panels with fold buttons, dark cards, violet buttons and on/off switches, in the
   blue soft-black palette chosen by the user (theme 'azul' in tools/make_pixel_ui.py). Frames and icons are our own art (tools/make_pixel_ui.py ->
   client/ui/). Text in Tahoma (local preview requested on 09/11/2026) at 12, 16 or 24 px; no blur, gradients
   or rounded corners; animations use steps(). */
@font-face{font-family:"Pixelify Sans";src:url(/client/ui/pixelify-sans-600.woff2) format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"Silkscreen Digits";src:url(/client/ui/silkscreen-400.ttf) format("truetype");font-weight:600;unicode-range:U+0030-0039;font-display:block}
:root{--px-ink:#080a12;--px-text:#f8f8f0;--px-muted:#b8c4dc;--px-card-muted:#8c98b8;--px-card:#0e121e;--px-button:#2c4474;--px-button-dark:#1a2a4c;
  --px-green:#58b860;--px-yellow:#f8d048;--px-red:#d04030;
  --hp-high:#58d068;--hp-mid:#f8c030;--hp-low:#f05030;--exp:#48a0f8;--hud-gap:12px;--hud-left:304px;--hud-scale:1;--left-w:max(var(--hud-left),calc(var(--hud-left) / var(--hud-scale)));
  font-family:Tahoma,Verdana,"Segoe UI",sans-serif;font-weight:700;font-size:14px;line-height:20px;color:var(--px-text);background:#05090d;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}
#faint{position:fixed;inset:0;z-index:2800;display:grid;place-items:center;background:#000;color:var(--px-text);text-shadow:2px 2px 0 var(--px-ink)}
#faint:not([hidden]){animation:faint-in .8s ease-out}
@keyframes faint-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#faint:not([hidden]){animation:none}}
#faint[hidden]{display:none}.faint-content{display:grid;justify-items:center;gap:16px;text-align:center}.faint-title{font-size:21px}.faint-return{font-size:14px;color:#e88a8a}
#loading{position:fixed;inset:0;z-index:2900;display:grid;place-items:center}
#loading[hidden]{display:none}.loading-content{display:grid;justify-items:center;gap:8px;width:min(580px,calc(100vw - 48px));color:var(--px-text);font-size:14px;text-shadow:2px 2px 0 var(--px-ink)}
.loading-bar{--progress:0%;position:relative;width:100%;height:24px;padding:3px;border:2px solid #536b8b;background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px var(--px-button-dark)}
.loading-fill{position:relative;width:var(--progress);transition:width .25s linear;height:100%;background:repeating-linear-gradient(120deg,#405e96 0 10px,#5874a0 10px 20px);box-shadow:inset 0 2px 0 #7894bd}
.loading-ball{position:absolute;right:0;bottom:calc(100% + 1px);width:24px;height:24px;transform:translateX(50%);transform-origin:50% 90%;image-rendering:pixelated;animation:loading-ball-wobble 1.2s steps(2,end) infinite}
@keyframes loading-ball-wobble{0%,40%,100%{transform:translateX(50%) rotate(0)}10%{transform:translateX(50%) rotate(-16deg)}20%{transform:translateX(50%) rotate(16deg)}30%{transform:translateX(50%) rotate(-10deg)}}
@media(prefers-reduced-motion:reduce){.loading-ball{animation:none}}
.loading-label{position:relative}.loading-dots{position:absolute;left:100%;white-space:nowrap}.loading-dots::after{content:"";animation:loading-dots 1.6s steps(1,end) infinite}
@keyframes loading-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media(prefers-reduced-motion:reduce){.loading-dots::after{animation:none;content:"..."}}
#auth-overlay{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:16px;overflow-y:auto}#auth-overlay>.auth-panel{flex-shrink:0}
#auth-overlay[hidden]{display:none}.auth-panel{width:min(440px,100%);padding:16px}.auth-panel h1{margin:0;font-size:21px}.auth-panel form{display:flex;flex-direction:column;gap:12px}.auth-panel label:not([hidden]){display:flex;flex-direction:column;gap:4px}.auth-panel label#auth-legacy-label:not([hidden]),.auth-panel label#auth-show-label{flex-direction:row;align-items:center}.auth-panel input:not([type=checkbox]){width:100%;background:var(--px-card);color:var(--px-text);border:2px solid var(--px-button);font:inherit;padding:8px}.auth-panel p{margin:8px 0}#auth-error{color:var(--px-red)}
#character-overlay{position:fixed;inset:0;z-index:3001;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}#character-overlay[hidden]{display:none}.character-panel{width:min(900px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:16px}.character-panel h1{margin:0}.character-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px}.character-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:330px;padding:12px;color:var(--px-muted)}#character-preview{width:192px;height:192px;image-rendering:pixelated}.character-editor{min-width:0}#character-gender,#character-tabs,#character-directions{display:flex;flex-wrap:wrap;gap:5px}#character-gender{margin-bottom:12px}#character-tabs{margin-bottom:10px}#character-parts{min-height:200px}#character-parts h2{font-size:14px;margin:10px 0 6px}.character-options{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow:auto;padding:3px}.character-options button,.character-swatches button{font:inherit}.character-options button{padding:6px 10px}.character-swatches{display:flex;flex-wrap:wrap;gap:6px;padding:4px}.character-swatches button{width:32px;height:32px;border:3px solid #667080;background:var(--swatch);cursor:pointer}.character-swatches button[aria-pressed=true]{outline:2px solid #f8d048;outline-offset:2px}.character-panel button[aria-pressed=true]:not(.character-swatches button){border-color:#f8d048;color:#f8d048}.character-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}#character-error{color:var(--px-red)}@media(max-width:650px){#character-overlay{align-items:flex-start}.character-layout{grid-template-columns:1fr}.character-preview{min-height:150px}#character-preview{width:128px;height:128px}.character-options{max-height:130px}}
.character-preview{flex-direction:row;gap:0;padding:4px}#character-preview{width:128px;height:128px;pointer-events:none}.character-turn{flex:none;min-width:28px;min-height:32px}
.character-panel{width:min(1040px,100%)}.character-layout{grid-template-columns:320px minmax(0,1fr)}.character-preview{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;align-items:center;justify-items:center;min-height:370px;padding:12px}#character-preview{grid-column:1 / 3;grid-row:1;width:256px;height:256px}#character-turn-left{grid-column:1;grid-row:2;justify-self:start}#character-turn-right{grid-column:2;grid-row:2;justify-self:end}.character-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));max-height:260px;gap:8px;padding:4px}.character-options .character-item{min-width:0;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;line-height:14px;font-size:10px;overflow-wrap:anywhere}.character-item canvas{width:64px;height:64px;image-rendering:pixelated;pointer-events:none}.character-swatches{gap:8px}@media(max-width:760px){.character-layout{grid-template-columns:1fr}.character-preview{min-height:220px;grid-template-rows:auto auto}#character-preview{width:192px;height:192px}.character-options{max-height:180px}}
.character-previews{display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:0}.character-preview{grid-template-columns:1fr auto 1fr;grid-template-rows:auto;min-height:0;gap:4px}#character-preview{grid-column:2;grid-row:1;width:192px;height:192px;image-rendering:pixelated}#character-turn-left{grid-column:1;grid-row:1}#character-turn-right{grid-column:3;grid-row:1}.character-editor{max-height:60vh;overflow:auto;padding-right:8px}.character-category{padding:10px;margin-bottom:8px}.character-category h2{margin:0 0 6px!important}.character-pick{display:flex;align-items:center;gap:8px}.character-pick-name{flex:1;text-align:center}.character-pick small{min-width:44px;text-align:right}.character-swatches{margin-top:5px}@media(max-width:760px){.character-previews{position:static}.character-editor{max-height:none}}
.character-walk{padding:12px;display:grid;grid-template-columns:1fr auto 1fr;gap:4px;align-items:center;justify-items:center}#character-walk{grid-column:2;width:192px;height:192px;image-rendering:pixelated;pointer-events:none}#character-walk-left{grid-column:1;justify-self:start}#character-walk-right{grid-column:3;justify-self:end}
.character-item canvas{width:80px;height:80px;image-rendering:pixelated}.character-options{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));max-height:250px}.character-options .character-item{min-height:120px}.character-category h2:not(:first-child){margin-top:14px!important}.character-actions{justify-content:flex-end}.character-actions #character-logout:not([hidden]){margin-right:auto}
.character-options,.character-editor,.character-panel{overflow-anchor:none}
.character-options .character-item{height:152px;min-height:152px;overflow:hidden}
.character-choice{display:grid;grid-template-columns:minmax(100px,150px) minmax(140px,1fr) minmax(105px,145px);gap:8px;align-items:center;margin:8px 0}.character-choice-label{padding:10px;background:#344e70;border:2px solid #17263e;color:#fff}.character-choice select{width:100%;min-width:0;min-height:40px;padding:7px;color:#fff;background:#202e47;border:2px solid #536b8b;font:inherit;cursor:pointer}.character-choice select:focus-visible{outline:2px solid #f8d048;outline-offset:2px}.character-no-color{text-align:center;color:var(--px-muted)}.character-choice small{grid-column:2 / -1}.character-choice .fr-button{grid-column:2 / -1;justify-self:start}.character-category{padding:12px}.character-editor{max-height:65vh}#character-parts{min-height:0}@media(max-width:760px){.character-choice{grid-template-columns:minmax(90px,1fr) minmax(130px,2fr)}.character-choice select:last-of-type:not(:first-of-type){grid-column:2}.character-choice small,.character-choice .fr-button{grid-column:2}.character-editor{max-height:none}}
.character-choice{grid-template-columns:minmax(100px,150px) minmax(140px,1fr) 40px}.character-color-picker{position:relative;justify-self:center}.character-color-wheel{display:block;width:25px;height:25px;border:2px solid #c5cbd3;border-radius:50%;background:conic-gradient(red,#ff0,lime,cyan,blue,magenta,red);cursor:pointer;box-shadow:inset 0 0 4px white}.character-color-wheel::-webkit-details-marker{display:none}.character-color-wheel:focus-visible{outline:2px solid #f8d048;outline-offset:2px}.character-color-palette{position:absolute;z-index:4;right:0;top:34px;width:190px;display:flex;flex-wrap:wrap;gap:7px;padding:10px;background:#202e47;border:2px solid #536b8b;box-shadow:0 3px 8px #0009}.character-color-palette button{width:28px;height:28px;padding:0;background:var(--swatch);border:2px solid #8894a6;cursor:pointer}.character-color-palette button[aria-pressed=true]{outline:2px solid #f8d048;outline-offset:1px}@media(max-width:760px){.character-choice{grid-template-columns:minmax(75px,1fr) minmax(110px,2fr) 32px}.character-choice select:last-of-type:not(:first-of-type){grid-column:auto}}
.character-color-palette{position:fixed;right:auto;transform:none;width:180px;justify-content:center}.character-color-palette button:focus-visible{outline:2px solid #f8d048;outline-offset:2px}
/* Keep the preview frames and editor aligned to the same outer edges. */
.character-panel{padding:0}
.character-panel>header{display:flex;align-items:center;height:44px;padding:4px}
.character-panel>header h1{line-height:1.2}
.character-panel>p{margin:8px 12px}
#character-form{padding:0 8px 10px}
#character-form .character-name{margin-bottom:8px}
.character-name>span{padding-inline:4px}
.character-layout{gap:8px}
.character-previews{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));align-self:stretch}
.character-preview,.character-walk{min-width:0;min-height:220px;grid-template-columns:minmax(28px,1fr) 192px minmax(28px,1fr);padding:6px}
.character-editor{padding-right:0}
.character-category{padding:6px}
.character-choice{margin:0 0 8px}
.character-choice:last-child{margin-bottom:0}
.character-category:last-child{margin-bottom:0}
.character-choice{grid-template-columns:minmax(0,150px) minmax(0,1fr) 40px}
.character-choice-label{min-width:0}
.character-actions{margin-top:8px}
@media(max-width:760px){.character-previews{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.character-preview,.character-walk{grid-template-columns:minmax(28px,1fr) minmax(0,192px) minmax(28px,1fr)}#character-preview,#character-walk{width:100%;height:auto;aspect-ratio:1}.character-choice{grid-template-columns:minmax(75px,1fr) minmax(0,2fr) 32px}}
@media(max-width:480px){.character-previews{grid-template-columns:1fr}.character-preview,.character-walk{grid-template-columns:minmax(28px,1fr) minmax(0,192px) minmax(28px,1fr)}}
/* Scrollbars share the HUD's square navy frames, vertically and horizontally. */
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:var(--px-card);box-shadow:inset 0 0 0 2px var(--px-ink)}
*::-webkit-scrollbar-thumb{background:var(--px-button);border:2px solid var(--px-ink);box-shadow:inset 2px 2px 0 #5874a0,inset -2px -2px 0 var(--px-button-dark)}
*::-webkit-scrollbar-thumb:hover{background:#405e96}
@supports not selector(::-webkit-scrollbar){*{scrollbar-color:var(--px-button) var(--px-card);scrollbar-width:thin}}
#game{position:fixed;inset:0}#game canvas{display:block}
#cinema{position:fixed;left:50%;top:50%;width:100vw;height:100vh;transform:translate(-50%,-50%);pointer-events:none;opacity:0;box-shadow:0 0 0 100vmax #05090d;transition:opacity .25s,width .25s,height .25s;z-index:1}
#cinema.on{opacity:1}
/* Cave darkness (FLD-3): the GBA flash window is a black screen with a circular hole at its center. Above the field
   and the cinema mask, below the HUD; --dark-radius is in screen pixels (set by client/game.js). */
#darkness{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;background:radial-gradient(circle at 50% 50%,transparent 0 var(--dark-radius,0px),#000 calc(var(--dark-radius,0px) + 1.5px))}
#darkness.on{display:block}
/* HUD scale (user's request, 05/11/2026): CSS zoom, not transform, so layout snaps to device pixels and the frames keep no hairline gaps.
   Inside the zoom, vw/vh are zoomed too: --vw/--vh give the viewport in HUD units (use them, not vw/vh, in HUD rules). */
#hud{--vw:calc(100vw / var(--hud-scale));--vh:calc(100vh / var(--hud-scale));position:fixed;inset:0;zoom:var(--hud-scale);pointer-events:none;z-index:2;image-rendering:pixelated}
#hud>*,#leftcol>*{pointer-events:auto}#hud>#leftcol,#hud>#rightcol,#hud>#alerts,#hud>#feed{pointer-events:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:focus-visible{outline:2px dashed var(--px-yellow);outline-offset:2px}
.spacer{flex:1}.muted{color:var(--px-muted)}.fr-card .muted{color:var(--px-card-muted)}.small,small{font-size:10px;line-height:14px}
h2,h3{font-weight:inherit;font-size:14px;line-height:20px;margin:0}b,strong{font-weight:inherit}

/* 9-slice frames: 12x12 sources with 4 px corners, drawn at 2x. Light text gets a 2 px ink drop shadow. */
.panel{border:8px solid transparent;border-image:url(/client/ui/frame-panel.png) 4 fill/8px stretch;text-shadow:2px 2px 0 var(--px-ink)}
.fr-card{border:8px solid transparent;border-image:url(/client/ui/frame-card.png) 4 fill/8px stretch}
.fr-title{border:8px solid transparent;border-image:url(/client/ui/frame-title.png) 4 fill/8px stretch}
.fr-slot{border:8px solid transparent;border-image:url(/client/ui/frame-slot.png) 4 fill/8px stretch}
.fr-button{border:8px solid transparent;border-image:url(/client/ui/frame-button.png) 4 fill/8px stretch;text-shadow:2px 2px 0 var(--px-ink)}
.fr-button:hover,.fr-button.sel{border-image-source:url(/client/ui/frame-button-sel.png)}
.fr-button:active{position:relative;top:2px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.fold{width:32px;height:32px;line-height:14px}.fold.flip{transform:rotate(180deg)}
.folded>:not(.panel-head):not(.chat-tabs){display:none!important}

/* Icons: 16x16 cells in icons.png (order in tools/make_pixel_ui.py ICONS), shown at 2x or 1x. */
/* HUD icons are ROM item sprites (user's request, 31/10/2026): 24x24 icons from private-assets/items (tools/import_items.py,
   16 per row; --x/--y is the item id's place) at 2x, or 1x with .s1. The negative margin trims the icons' empty border so
   they take the space of the old 32 px (16 px) icons. */
.ico{display:inline-block;flex:0 0 auto;width:48px;height:48px;margin:-8px;background:url(/private-assets/items/items.png) no-repeat;
  background-size:768px auto;background-position:calc(-48px * var(--x)) calc(-48px * var(--y));image-rendering:pixelated;vertical-align:middle}
.ico.s1{width:24px;height:24px;margin:-4px;background-size:384px auto;background-position:calc(-24px * var(--x)) calc(-24px * var(--y))}
.ico-bag{--x:13;--y:22}      /* 365 BERRY POUCH */
.ico-pc{--x:14;--y:22}       /* 366 TEACHY TV */
.ico-market{--x:4;--y:16} /* 260 COIN CASE */
.ico-map{--x:9;--y:22}      /* 361 TOWN MAP */
.ico-card{--x:0;--y:23}      /* 368 RAINBOW PASS (trainer card button) */
.ico-journal,.ico-quest{--x:11;--y:22} /* 363 FAME CHECKER */
/* Existing project pixel icons: a four-square menu and keyboard. */
.ico.ico-more,.ico.ico-keys,.ico.ico-gear,.ico.ico-logout{width:32px;height:32px;margin:0;background-image:url(/client/ui/icons.png);background-size:auto 32px}
.ico.ico-more{background-position:-96px 0}.ico.ico-keys{background-position:-192px 0}.ico.ico-gear{background-position:-256px 0}.ico.ico-logout{background-position:-352px 0}
.ico-info{--x:2;--y:17}      /* 274 LETTER */
.ico-summary{--x:3;--y:22}   /* 355 session summary button (Mais) */
.ico-admin{--x:15;--y:16}    /* 271 SECRET KEY (administration button) */
.ico-gear{--x:5;--y:16}      /* 261 ITEMFINDER */
/* Pixel gear (16x16 SVG, generated): options menu and Auto Hunt settings. */
.ico.ico-pokedex{width:32px;height:32px;margin:0;background:url(/client/ui/icon-pokedex.svg) 0 0/32px 32px no-repeat;image-rendering:pixelated}
.ico.ico-friends{width:32px;height:32px;margin:0;background:url(/client/ui/icon-friends.svg) 0 0/32px 32px no-repeat;image-rendering:pixelated}
.ico.ico-guild{width:32px;height:32px;margin:0;background:url(/client/ui/icon-guild.svg) 0 0/32px 32px no-repeat;image-rendering:pixelated}
.ico.ico-gear{background-image:url(/client/ui/icon-gear.svg);background-size:32px 32px;background-position:0 0;image-rendering:pixelated}
.ico.ico-logout{background-image:url(/client/ui/icon-logout.svg);background-size:32px 32px;background-position:0 0;image-rendering:pixelated}
/* Online bars: the project's own 16x16 icon (client/ui/icons.png, cell 10), back after the VS SEEKER (user's request, 31/10/2026). */
.ico.s1.ico-bars{width:16px;height:16px;margin:0 4px 0 0;background:url(/client/ui/icons.png) -160px 0/auto 16px no-repeat}
/* Money and gem (the future paid currency) in the trainer card: sprites supplied by the user, 20x20 (15% smaller than the first 24x24, user's request) (client/ui/icon-*.png). */
.coin-ico,.gem-ico{display:inline-block;flex:0 0 auto;width:20px;height:20px;margin:-2px;background:center/20px 20px no-repeat;image-rendering:pixelated;vertical-align:middle}
.coin-ico{background-image:url(/client/ui/icon-coin.png)}.gem-ico{background-image:url(/client/ui/icon-gem.png)}
/* ROM Poké Ball sprite (private asset) for counts and the ball slot. */
/* Poké Ball in the trainer card, Automations: the POKé BALL item icon (item 4) of the ROM atlas, 1x or 2x
   (.big), trimmed like .ico (user's request, 31/10/2026). The field throw keeps the battle ball sprite (private-assets/balls). */
.ball-ico{display:inline-block;flex:0 0 auto;width:24px;height:24px;margin:-4px;background:url(/private-assets/items/items.png) -96px 0/384px auto no-repeat;image-rendering:pixelated;vertical-align:middle}
.ball-ico.big{width:48px;height:48px;margin:-8px;background-position:-192px 0;background-size:768px auto}

/* Left column: trainer card and area on top, diary at the bottom. */
#leftcol{position:fixed;top:var(--hud-gap);left:var(--hud-gap);bottom:var(--hud-gap);width:var(--left-w);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#side,#auto-panel,#safari-panel{width:var(--hud-left)}
#side{display:grid;gap:4px}
.hero{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:2px}
.avatar{position:relative;flex:0 0 56px;height:56px;overflow:hidden;display:grid;place-items:center}
#trainer-avatar{background-repeat:no-repeat;image-rendering:pixelated}
.hero-info{display:grid;gap:2px;min-width:0}.who{white-space:nowrap;overflow:hidden}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.stat{display:flex;align-items:center;gap:6px;min-width:0}.stat.wide{grid-column:span 2}.stat[hidden]{display:none}
.loc,.season-bar{display:flex;align-items:center;gap:8px;min-width:0}.loc strong{white-space:normal;overflow-wrap:anywhere;min-width:0}
.season{display:flex;flex:none;align-items:center;gap:6px;white-space:nowrap;font-size:10px;line-height:16px}.season[hidden]{display:none}
.season-icon{display:block;flex:none;width:16px;height:16px;background:url(/client/ui/season-icons.png) 0 0/auto 16px no-repeat;image-rendering:pixelated}
.season[data-season=summer] .season-icon{background-position:-16px 0}.season[data-season=autumn] .season-icon{background-position:-32px 0}.season[data-season=winter] .season-icon{background-position:-48px 0}
.day-period{display:flex;flex:none;align-items:center;gap:4px;margin-left:auto;white-space:nowrap;font-size:10px;line-height:16px}
.day-period-icon{display:block;flex:none;width:16px;height:16px;background:url(/client/ui/icons.png) -224px 0/auto 16px no-repeat;image-rendering:pixelated}
.day-period[data-icon=night] .day-period-icon{background-position:-240px 0}
.day-period[data-icon=cloudy] .day-period-icon{background-position:-256px 0}
.day-period[data-icon=rain] .day-period-icon{background-position:-272px 0}
.day-period time{min-width:5ch;text-align:right;font-variant-numeric:tabular-nums}
.tag{padding:0 4px}
.quest{display:flex;gap:6px;align-items:center}.quest small{display:block;color:#f0d8ff}
.chip{padding:0 4px;background:var(--px-button);box-shadow:0 0 0 2px var(--px-ink)}
#area-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#area-list li{display:grid;grid-template-columns:32px 1fr auto auto;align-items:center;gap:6px}
#area-list img{box-sizing:border-box;width:32px;height:32px;padding:5.333px;object-fit:scale-down;transform:scale(1.5);image-rendering:pixelated}#area-list .lv{color:var(--px-card-muted)}#area-list .pct{color:var(--px-yellow);min-width:40px;text-align:right}
/* The chat cancels the HUD zoom (zoom 1/scale): it keeps its pre-05/11/2026 on-screen size at any scale. */
#chat{--chat-min:var(--hud-left);zoom:calc(1 / var(--hud-scale));width:var(--chat-w,var(--chat-min));position:relative;margin-top:auto;flex:0 1 clamp(170px,30vh,290px);min-height:120px;display:flex;flex-direction:column;overflow:hidden}
#chat.folded{flex:0 0 auto;min-height:0}
/* Width handle (user's request, 05/11/2026): a square 6x48 px bar on the right edge, centred; whole pixels, no rounding. */
#chat-resize{position:absolute;right:0;top:50%;width:10px;height:56px;margin-top:-28px;cursor:ew-resize;touch-action:none;background:var(--px-ink);box-shadow:inset 2px 0 0 var(--px-button-dark);z-index:2}
#chat-resize::after{content:"";position:absolute;left:3px;top:8px;width:4px;height:40px;background:var(--px-button);box-shadow:inset 0 2px 0 #5874a0}
#chat-resize:hover::after,#chat-resize:active::after{background:#405e96}
#chat.folded #chat-resize{display:none}
/* Chat with the PokeIdleMMO channels: tabs Todos/Global/Local/Guilda (8 px, so the four fit the column), log,
   8x6 emoji grid over the log, and the send row (channel button that cycles, field, emoji button). */
.chat-tabs{flex:0 0 auto;display:flex;align-items:center;gap:2px;margin-bottom:6px}.tab{padding:2px 2px;font-size:10px;line-height:14px}.chat-tabs .tab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-tabs .fold{flex:none}
.chat-log{flex:1;min-height:0;font-size:12px;line-height:16px;overflow-y:auto;user-select:text;overflow-wrap:anywhere}.chat-log p{margin:0 0 4px}
.chat-log .time{color:var(--px-card-muted)}.chat-log .ch.global{color:#80b8ff}.chat-log .ch.local{color:var(--px-green)}
.chat-note{color:var(--px-card-muted)}
.chat-log .nick-action{cursor:pointer}.chat-log .nick-action:hover,.chat-log .nick-action:focus-visible{text-decoration:underline}
.chat-actions{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}.chat-actions .fr-button,.chat-block-row .fr-button{padding:1px 6px;font-size:10px;line-height:14px}
/* Project-drawn pixel badges; localized text remains accessible. */
.chat-tag{display:inline-block;vertical-align:middle;width:var(--chat-tag-width);height:16px;margin-right:2px;padding:0;overflow:hidden;white-space:nowrap;font-size:0;line-height:0;color:transparent;text-shadow:none;border:0;box-shadow:none;background:var(--chat-tag-image) center/100% 100% no-repeat;image-rendering:pixelated}
.chat-tag-mod{--chat-tag-width:24px;--chat-tag-image:url(/client/ui/chat-tag-mod.svg)}.chat-tag-admin{--chat-tag-width:36px;--chat-tag-image:url(/client/ui/chat-tag-admin.svg)}.chat-tag-creator{--chat-tag-width:36px;--chat-tag-image:url(/client/ui/chat-tag-owner.svg)}
.chat-form{flex:0 0 auto;display:flex;gap:4px;margin-top:4px;align-items:stretch}
.chat-form .channel{flex:0 0 auto;padding:0 2px;font-size:10px;line-height:14px;color:#80b8ff}.chat-form .channel[data-channel=local]{color:var(--px-green)}
#chat-input{flex:1;min-width:0;font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);padding:2px 6px;outline:none}
#chat-input:focus{box-shadow:inset 0 0 0 2px var(--px-yellow)}#chat-input::placeholder{color:var(--px-card-muted)}
#chat-emoji{flex:0 0 auto;width:36px;padding:0;line-height:16px}
.emoji-grid{position:absolute;left:0;right:0;bottom:40px;z-index:1;display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emoji-grid[hidden]{display:none}.emoji-grid button{height:26px;line-height:20px;font-size:14px}.emoji-grid button:hover{background:var(--px-button)}

/* Team, in the left column under the trainer card. */
#rightcol{position:fixed;top:var(--hud-gap);right:var(--hud-gap);width:300px;display:flex;flex-direction:column;gap:8px;pointer-events:none}#rightcol>*{pointer-events:auto}
.weather-preview-toggle{width:100%;min-height:28px;text-transform:uppercase}
.weather-preview-controls{display:grid;gap:6px;padding:8px 2px 2px}
.weather-preview-controls label{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:8px}
.weather-preview-controls select{min-width:0;width:100%}
body.in-duel #weather-preview{display:none!important}
#party{list-style:none;margin:0;padding:0;display:grid;gap:4px}
/* Team compacted in height only (user's correction, 05/11/2026): the row is as tall as its text; the 64 px sprite overhangs the frame by its empty margin. */
.party-row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:6px}
#party .party-row{grid-template-columns:56px minmax(0,1fr);gap:8px;padding:0 4px}
.shiny-portrait{--shiny-base:var(--px-button-dark);--portrait-width:64px;--portrait-height:var(--portrait-width);--portrait-margin:-10px 0;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--portrait-width);height:var(--portrait-height);margin:var(--portrait-margin);isolation:isolate;vertical-align:middle}
.shiny-portrait>img{position:relative;z-index:1;margin:0}
#party .shiny-portrait{--portrait-width:56px;--portrait-margin:-4px 0}
#party .shiny-portrait>.party-icon{margin:0}
.mon-detail-head .shiny-portrait{--portrait-width:96px;--portrait-margin:0}
.pc-identity .shiny-portrait,.shiny-portrait--drag{--portrait-width:48px;--portrait-margin:0}
.shiny-effect{position:relative;isolation:isolate}
.shiny-effect>img,.shiny-effect>small{position:relative;z-index:1}
.party-row.shiny-effect,.pc-row.shiny-effect,.pc-member.shiny-effect{--portrait-height:100%;--shiny-radius:0px}
.party-row.shiny-effect>*:not(.shiny-portrait-particles),.pc-row.shiny-effect>*:not(.shiny-portrait-particles),.pc-member.shiny-effect>*:not(.shiny-portrait-particles){position:relative;z-index:1}
.party-row.shiny-effect::before,.party-row.shiny-effect>.shiny-portrait-particles,.pc-member.shiny-effect::before,.pc-member.shiny-effect>.shiny-portrait-particles{inset:-8px}
.profile-mon.shiny-effect{--portrait-height:64px;--shiny-radius:0px}
.profile-mon.shiny-effect::before,.profile-mon.shiny-effect>.shiny-portrait-particles{inset:-8px}
.shiny-portrait--evolution{--portrait-width:96px;--portrait-margin:0}
.shiny-effect::before{content:"";position:absolute;inset:0;border-radius:var(--shiny-radius,8px);pointer-events:none;background:radial-gradient(ellipse at 25% 35%,#a87ee870,transparent 65%),radial-gradient(ellipse at 75% 65%,#f8d04835,transparent 65%),var(--shiny-base,transparent);background-size:160% 160%,150% 150%,auto;box-shadow:0 0 3px #f8d04850;animation:shiny-portrait-glow 3.2s ease-in-out infinite;animation-delay:var(--shiny-phase,0ms)}
.shiny-portrait-particles{position:absolute;inset:0;border-radius:var(--shiny-radius,8px);overflow:hidden;pointer-events:none;z-index:0}
.shiny-portrait-particles i{position:absolute;left:var(--particle-x,8%);bottom:-8px;width:var(--particle-size,5px);height:var(--particle-size,5px);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);background:#fff6c2;opacity:0;animation:shiny-portrait-rise var(--particle-duration,3.8s) linear infinite;animation-delay:calc(var(--shiny-phase,0ms) - var(--particle-offset,0s))}
.shiny-portrait-particles i:nth-child(1){--particle-drift:6px}
.shiny-portrait-particles i:nth-child(2){--particle-x:24%;--particle-size:4px;--particle-duration:4.6s;--particle-offset:.8s;--particle-drift:-3px}
.shiny-portrait-particles i:nth-child(3){--particle-x:40%;--particle-size:3px;--particle-duration:3.2s;--particle-offset:1.6s;--particle-drift:5px}
.shiny-portrait-particles i:nth-child(4){--particle-x:60%;--particle-size:6px;--particle-duration:4.2s;--particle-offset:2.1s;--particle-drift:-6px}
.shiny-portrait-particles i:nth-child(5){--particle-x:78%;--particle-size:4px;--particle-duration:3.6s;--particle-offset:1.1s;--particle-drift:3px}
.shiny-portrait-particles i:nth-child(6){--particle-x:90%;--particle-size:3px;--particle-duration:4.8s;--particle-offset:2.9s;--particle-drift:-5px}
@keyframes shiny-portrait-rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.85}75%{opacity:.65}100%{transform:translate(var(--particle-drift,0px),calc(0px - var(--portrait-height) - 16px));opacity:0}}
@keyframes shiny-portrait-glow{0%,100%{background-position:0% 100%,100% 0%,center;box-shadow:0 0 3px #f8d04850}50%{background-position:100% 0%,0% 100%,center;box-shadow:0 0 8px #f8d048a0}}
@media(prefers-reduced-motion:reduce){.shiny-effect::before{animation:none}.shiny-portrait-particles{display:none}}
#party .party-icon{position:relative;box-sizing:border-box;width:56px;height:56px;padding:10px;margin:-14px 0;image-rendering:pixelated}
.party-row[draggable="true"]{cursor:grab}.party-row.dragging{opacity:.5;cursor:grabbing}.party-row.drop-target{outline:2px solid var(--px-text)}
.party-row.lead{outline:2px solid var(--px-yellow);outline-offset:-2px}
#party .party-row:not(.lead) .bar.exp{display:none}
.party-row.fainted .party-icon{filter:grayscale(1);opacity:.5}.party-row.fainted .party-top b{color:var(--px-card-muted)}
/* The PC's ROM front sprite is also used by the party, fitted without cropping. */
.party-icon{width:64px;height:64px;margin:-10px 0;object-fit:contain;image-rendering:pixelated}
/* Fit team portraits in 48 px while preserving their 64 px layout slot. */
.party-row .party-icon,.pc-member .party-icon{box-sizing:border-box;padding:8px}
.party-info{display:grid;gap:2px;min-width:0}#party .party-info{gap:0}#party .party-top,#party .party-top .lv{line-height:14px}.party-top{display:flex;justify-content:space-between;gap:6px}.party-top b{overflow:hidden;white-space:nowrap}
.party-top .lv{color:var(--px-yellow);font-size:10px;line-height:20px;white-space:nowrap}
.party-hp{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px}.party-hp small{color:var(--px-card-muted)}
.party-row.lead .party-hp small{color:var(--px-text)}
.bar{display:block;height:10px;padding:2px;background:var(--px-ink)}.bar i{display:block;height:100%;transition:width .3s steps(6)}
.bar.hp i{background:var(--hp-high)}.bar.hp.mid i{background:var(--hp-mid)}.bar.hp.low i{background:var(--hp-low)}.bar.exp{height:6px;padding:1px 2px}.bar.exp i{background:var(--exp)}

/* Alerts top-centre; event feed above the menu. */
#alerts{position:fixed;top:calc(var(--hud-gap) + 76px);left:0;right:0;margin:auto;width:min(560px,calc(var(--vw) - 32px));display:flex;flex-direction:column;align-items:center;gap:6px;z-index:5}
#error,#notice{pointer-events:auto;margin:0;padding:2px 4px;text-shadow:2px 2px 0 var(--px-ink);border:8px solid transparent;border-image:url(/client/ui/frame-alert.png) 4 fill/8px stretch}
#feed{position:fixed;right:var(--hud-gap);bottom:calc(var(--hud-gap) + 92px);width:400px;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:4px}
.feed-item{max-width:100%;padding:0 4px;text-shadow:2px 2px 0 var(--px-ink);border:8px solid transparent;border-image:url(/client/ui/frame-toast.png) 4 fill/8px stretch;animation:feed-in .15s steps(3);transition:opacity .3s steps(3)}
.feed-item.good{color:var(--px-yellow)}.feed-item.bad{color:#ffb0a0}.feed-item.leaving{opacity:0}
@keyframes feed-in{from{opacity:0;transform:translateX(12px)}}

/* Automations, top-right above the team: on/off switches and the Poké Ball slot. */
.hunt-controls{position:relative;display:flex;align-items:center}
.hunt-controls > .switch-row{flex:1;min-width:0}
.hunt-settings-btn{display:grid;place-items:center;flex:0 0 32px;height:32px}
.hunt-settings-btn .ico-gear{width:24px;height:24px;background-size:24px 24px}
.hunt-settings-body{display:grid;gap:8px}.hunt-settings-section{padding:6px 8px;background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink)}
.hunt-settings-section p{color:var(--px-muted);font-size:10px}
.autoheal-threshold{display:flex;align-items:center;gap:6px;padding:2px 0 6px;font-size:10px}
.autoheal-input{box-sizing:border-box;width:64px;padding:3px 4px;background:var(--px-card);color:var(--px-text);border:2px solid var(--px-ink);font:inherit;text-align:center;appearance:textfield;-moz-appearance:textfield}.autoheal-input::-webkit-inner-spin-button,.autoheal-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.autoheal-input:focus{outline:2px solid var(--px-yellow)}
.switch-row{display:flex;align-items:center;gap:8px;width:100%;padding:4px 0;text-align:left}
.switch{position:relative;flex:0 0 40px;height:20px;background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink),inset 2px 2px 0 #24162a}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#8a7090;box-shadow:inset -2px -2px 0 #5a4060}
.switch-row.on .switch{background:var(--px-green)}.switch-row.on .switch::after{left:22px;background:var(--px-text);box-shadow:inset -2px -2px 0 #b8b8a8}
.switch-row.on>span:nth-child(2){color:var(--px-yellow)}

.slot{position:relative;display:grid;place-items:center;flex:0 1 56px;min-width:0;width:56px;height:56px}
.slot .key{position:absolute;top:-6px;left:-4px;font-size:10px;line-height:14px;color:var(--px-card-muted)}
.slot .count{position:absolute;right:-6px;bottom:-8px;padding:0 2px;font-size:10px;line-height:14px;background:var(--px-button-dark);box-shadow:0 0 0 2px var(--px-ink)}
@keyframes blink{50%{border-image-source:url(/client/ui/frame-button-sel.png)}}
.slot.out .item-ico{filter:grayscale(1);opacity:.5}.slot.out .count{background:var(--px-red)}
/* Configurable item slots 1-9, top-centre. */
/* Hotbar: centred when there is room; on narrow windows it starts after the left column and its slots shrink so it never overlaps the menu (--menu-w: width of #menubar, HUD units). */
#hud{--menu-w:421px;--hb-w:567px;--hb-left:max(calc((var(--vw) - var(--hb-w)) / 2),calc(var(--left-w) + 2 * var(--hud-gap)))}
#hotbar{position:fixed;top:var(--hud-gap);left:var(--hb-left);right:auto;margin:0;box-sizing:border-box;width:min(var(--hb-w),calc(var(--vw) - var(--hb-left) - var(--menu-w) - 2 * var(--hud-gap)));display:flex;gap:6px}
#talk-walk-msg{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);padding:3px 8px;background:rgba(0,0,0,.75);white-space:nowrap;color:var(--px-text);text-shadow:2px 2px 0 var(--px-ink);pointer-events:none}
#hotbar .slot.empty{opacity:.6}

/* Menu, bottom-right: violet buttons. */
#menubar{position:fixed;right:var(--hud-gap);bottom:var(--hud-gap);display:flex;gap:4px;z-index:6}
.action{position:relative;display:grid;justify-items:center;align-content:center;min-width:84px;height:60px;padding:0 4px}
.badge{position:absolute;top:-8px;right:-4px;padding:0 3px;font-size:10px;line-height:14px;text-shadow:none;background:var(--px-red);box-shadow:0 0 0 2px var(--px-ink)}
.more-menu{position:absolute;right:-8px;bottom:calc(100% + 12px);display:grid;grid-template-columns:repeat(4,auto);justify-content:end;gap:4px;width:max-content;max-width:calc(100vw - 24px)}
.more-menu .action{min-width:96px;white-space:nowrap}

/* Floating window (Bag, PC, Journey, Controls, About, Diagnostics). */
#window{position:fixed;right:var(--hud-gap);bottom:calc(var(--hud-gap) + 92px);width:min(480px,calc(var(--vw) - 2*var(--hud-gap)));max-height:calc(var(--vh) - 128px);display:flex;flex-direction:column;z-index:7}
#window[data-kind=pc]{--win-w:min(1180px,calc(var(--vw) - 2*var(--hud-gap)));--win-h:min(757px,calc(var(--vh) - 2*var(--hud-gap)));width:var(--win-w);height:var(--win-h);max-height:none}
/* Windows that open in the middle. Dragging moves them with `translate` (--drag-x/--drag-y, end of file), so left/top stay the only placement. */
#window:is([data-kind=pc],[data-kind=bag],[data-kind=map],[data-kind=journey],[data-kind=market],[data-kind=options],[data-kind=autohunt],[data-kind=autocapture],[data-kind=guild],[data-kind=profile],[data-kind=admin],[data-kind=pokedex]){left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
@supports (top:round(down, 1.5px, 1px)){
  #window:is([data-kind=pc],[data-kind=bag],[data-kind=map],[data-kind=journey],[data-kind=market],[data-kind=options],[data-kind=autohunt],[data-kind=autocapture],[data-kind=guild],[data-kind=pokedex]){left:round(down,calc((var(--vw) - var(--win-w))/2),1px);top:round(down,calc((var(--vh) - var(--win-h))/2),1px);transform:none}
}
#window[data-kind=pc] header{flex-shrink:0}
#window[data-kind=pc] #win-body{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1;overflow-x:hidden;padding:0 8px 8px}
#window[data-kind=pc] #win-body>*:not(.pc-list){flex-shrink:0}
#window[data-kind=pc] #win-body .pc-list{min-height:0}
#window[data-kind=pc] #win-body>.pc-team{flex-shrink:1;min-height:0;overflow:auto}
#window[data-kind=pc] #win-body p.note{margin:0}
.pc-search,.pc-filter select{font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);padding:4px 6px;min-width:0}.pc-search{flex:1;min-width:180px}.pc-tools{display:flex;align-items:end;gap:6px;flex-wrap:wrap}.pc-filter{display:grid;gap:2px}.pc-filter small{color:var(--px-muted)}.pc-filter select{max-width:150px}.pc-clear{padding:0 8px}
.pc-list{overflow:auto;flex:1;min-height:80px}.pc-columns,.pc-row{display:grid;grid-template-columns:24px minmax(120px,1.2fr) 35px minmax(100px,1fr) minmax(120px,1fr) 45px repeat(6,34px) 58px;align-items:center;gap:4px;min-width:750px}.pc-columns{padding:6px;color:var(--px-muted);font-size:10px;line-height:14px}.pc-row{padding:2px 6px;border-bottom:2px solid #242c44;min-height:54px;cursor:pointer}.pc-row:nth-child(even){background:#182234}.pc-row[hidden]{display:none}.pc-row img{box-sizing:border-box;width:48px;height:48px;padding:8px;object-fit:scale-down;flex:none;transform:scale(1.5);image-rendering:pixelated}.pc-identity{display:flex;align-items:center;min-width:0;gap:3px}.pc-identity b{overflow:hidden;text-overflow:ellipsis}.pc-gender.male{color:#80d0ff}.pc-gender.female{color:#ffa0b8}.pc-types{display:flex;gap:3px;flex-wrap:wrap}.pc-type{background:var(--type);color:#101420;padding:0 3px;font-size:10px;line-height:16px;text-shadow:none}.pc-traits{display:grid;font-size:10px;line-height:16px}.pc-traits small{color:var(--px-muted)}.pc-percent{color:var(--px-yellow)}.pc-iv{width:30px;text-align:center;border:2px solid #667080;font-size:10px;line-height:20px}.pc-iv[data-grade=high]{border-color:#58b860;color:#84e090}.pc-iv[data-grade=mid]{border-color:#f8d048;color:#f8d048}.pc-iv[data-grade=low]{border-color:#e88c40;color:#e8a868}.pc-iv[data-grade=poor]{border-color:#d04030;color:#f08070}
.pc-team{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.pc-member{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:2px;min-width:0;cursor:pointer}.pc-member .party-icon{padding:16px;object-fit:scale-down;transform:scale(1.5)}.pc-member-info{display:grid;gap:2px;min-width:0}.pc-member-name{display:flex;align-items:center;gap:3px;min-width:0}.pc-member-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc-member small{color:var(--px-card-muted);overflow-wrap:anywhere}.pc-row:focus-visible,.pc-member:focus-visible{outline:2px dashed var(--px-yellow);outline-offset:-2px}.pc-vacant{display:grid;place-items:center;border:2px dashed #323c56;color:var(--px-card-muted);min-height:80px}
.pc-iv.nature-up{box-shadow:0 -3px 0 var(--px-green)}.pc-iv.nature-down{box-shadow:0 -3px 0 var(--px-red)}
@media(max-width:850px){.pc-team{grid-template-columns:repeat(3,minmax(0,1fr));overflow:auto;max-height:220px}.pc-columns{display:none}}
#window header{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:0 4px}
#window h2{font-size:21px;line-height:28px}.pc-section-tabs[hidden]{display:none}.pc-section-tabs{min-width:0;gap:4px}.pc-section-tabs .fr-button{padding:0 6px}.win-total{white-space:nowrap;color:var(--px-muted);padding:0 4px;flex-shrink:0}#win-close{width:28px;height:28px}
@media(max-width:420px){#window[data-kind=pc] header{gap:2px}#window[data-kind=pc] h2{font-size:18px}.pc-section-tabs .fr-button{font-size:10px;padding:0 2px}.win-total{font-size:10px;padding:0 2px}}
#win-body{overflow:auto}#win-body p{margin:0 0 8px}
#win-body h3{font-size:10px;line-height:14px;color:var(--px-yellow);margin:10px 0 4px}
#win-body .items{list-style:none;margin:0;padding:0;display:grid;gap:4px}#win-body .items li{display:flex;justify-content:space-between;padding:0 4px}
#win-body .items b{color:var(--px-yellow)}.shop-money{color:var(--px-yellow)}
/* Poké Mart: modal in the middle of the screen (user's request, 31/10/2026; layout from their reference, our look). */
#shop{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:rgba(5,9,13,.6)}#shop[hidden]{display:none}
.shop-modal{width:min(900px,calc(var(--vw) - 24px));height:min(680px,calc(var(--vh) - 24px));display:flex;flex-direction:column;gap:8px}
.shop-modal header{display:flex;align-items:center;gap:8px;padding:0 4px}.shop-modal h2{font-size:21px;line-height:28px}#shop-close{width:28px;height:28px}
.shop-tabs{min-width:0;gap:4px}.shop-tabs .fr-button{padding:0 8px}
@media(max-width:520px){.shop-modal header{gap:4px}.shop-modal h2{font-size:16px}.shop-tabs .fr-button{font-size:10px;padding:0 4px}#shop-money{font-size:10px;padding:0 3px}}
.money{padding:0 6px;color:var(--px-yellow);background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink)}
/* Inset 2px: the fields' 2px ink outline lies outside their box; this lines it up with the frames above and below. */
.shop-tools{display:flex;gap:8px;align-items:center;padding:0 2px}.shop-tools[hidden]{display:none}
#shop-search,#shop-sort{font:inherit;color:var(--px-text);background:var(--px-card);border:0;box-shadow:0 0 0 2px var(--px-ink),inset 2px 2px 0 #242c44;padding:2px 6px;height:28px}
#shop-search{flex:1;min-width:0}#shop-search::placeholder{color:var(--px-card-muted)}
.shop-cats{display:flex;flex-wrap:wrap;gap:4px}.shop-cats[hidden]{display:none}.shop-cats .fr-button{padding:0 8px;color:var(--px-text)}
.shop-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:8px}
/* Empty tab: one message centered in the body instead of an empty list beside an empty detail card. */
.shop-body:has(#shop-list .empty){grid-template-columns:1fr;grid-template-rows:1fr}
.shop-body:has(#shop-list .empty) #shop-detail{display:none}
.shop-body:has(#shop-list .empty) #shop-list{align-content:center}
#shop-list .empty{grid-column:1/-1;display:block;padding:16px;text-align:center;cursor:default}
#shop-list{list-style:none;margin:0;padding:0 4px 0 0;overflow-y:auto;display:grid;align-content:start;gap:4px}
#shop-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:0 6px 0 0;cursor:pointer}
#shop-list li.sel{border-image-source:url(/client/ui/frame-button-sel.png)}#shop-list li.poor{opacity:.55}
#shop-list .name{display:grid}#shop-list small,#shop-detail small{font-size:10px;line-height:14px;color:var(--px-card-muted)}
#shop-list .owned{font-size:10px;line-height:14px;color:var(--px-card-muted)}#shop-list .price,#shop-detail .price{color:var(--px-yellow)}
#shop-detail{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden}
#shop-detail .head{display:flex;align-items:center;gap:8px}#shop-detail .head div{display:grid;justify-items:start;gap:4px}
#shop-detail p{margin:0;color:var(--px-card-muted)}#shop-detail .have{display:flex;justify-content:space-between;border-bottom:2px dashed #242c44}
#shop-detail .buy{margin-top:auto;display:grid;gap:6px}#shop-detail .qty{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px}
#shop-detail .qty b{text-align:center;background:var(--px-ink);color:var(--px-yellow)}
#shop-detail .presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
#shop-detail .fr-button{padding:0 6px;color:var(--px-text)}#shop-detail .fr-button:disabled{opacity:.5;transform:none}
#shop-detail .go{display:flex;justify-content:space-between}
/* ROM item icons (24x24, private-assets/items, tools/import_items.py) at 2x, or 1x with .s1. */
.item-ico{flex:none;display:inline-block;width:48px;height:48px;background:url(/private-assets/items/items.png) no-repeat;background-size:768px auto;background-position:calc(-48px * var(--x)) calc(-48px * var(--y));image-rendering:pixelated}
.item-ico.s1{width:24px;height:24px;background-size:384px auto;background-position:calc(-24px * var(--x)) calc(-24px * var(--y))}
@media (max-width:720px){.shop-body{grid-template-columns:1fr;grid-template-rows:1fr auto}}.empty,.note{color:var(--px-muted)}
.pc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.pc-grid li{display:grid;justify-items:center}.pc-grid img{width:64px;height:64px;image-rendering:pixelated}
.pc-grid span{font-size:10px;line-height:14px;color:var(--px-card-muted)}
.keys{list-style:none;margin:0;padding:0;display:grid;gap:6px}.keys li{display:flex;gap:10px;align-items:center}
kbd{min-width:130px;padding:0 6px;font:inherit;text-align:center;background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink)}
.journal p{margin:0 0 6px}.goal{color:var(--px-yellow)}
#win-body pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:10px;line-height:14px;margin:0}
#win-body button{margin-top:4px;padding:0 6px}#win-body button.danger{color:#ffd0c8}

/* Dialog: our GBA-style text box at the bottom centre; the only modal element of the field. */
#dialog,#fishing-msg{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(var(--hud-gap) + 84px);width:min(720px,calc(var(--vw) - 2*var(--hud-left) - 4*var(--hud-gap)));min-width:min(480px,calc(var(--vw) - 24px));padding:6px 10px;color:#283040;border:8px solid transparent;border-image:url(/client/ui/frame-dialog.png) 4 fill/8px stretch;z-index:8}
#dialog-text,#fishing-msg-text{font-size:21px;line-height:32px;white-space:pre-line;margin:0 0 8px}
#fishing-msg{pointer-events:none}
#fishing-msg-text{margin-bottom:0}
#dialog .fr-button{padding:0 8px;color:var(--px-text)}#choices{display:flex;gap:10px}#choices .fr-button:hover:not(.sel){border-image-source:url(/client/ui/frame-button.png)}#choices .fr-button.sel{color:var(--px-yellow)}#menu-choices{display:flex;flex-wrap:wrap;gap:6px 10px}#page-count{float:right;color:#687088}
#advance::after{content:" ▾";color:var(--px-red);animation:blink-text .6s steps(1) infinite}@keyframes blink-text{50%{opacity:0}}
#monpic{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(var(--hud-gap) + 250px);width:144px;padding:8px;image-rendering:pixelated;border:8px solid transparent;border-image:url(/client/ui/frame-dialog.png) 4 fill/8px stretch;z-index:8}

/* Narrower windows: compact menu, switches without labels, smaller columns. */
@media (max-width:1640px){.action{min-width:60px}.action>span:not(.badge){font-size:10px;line-height:14px}}
@media (max-width:1366px){:root{--hud-left:264px}#rightcol{width:264px}#feed{width:320px}}
[hidden]{display:none!important}
/* Turn-based trainer battle, move learning and evolution (docs/DESIGN-UI.md): boxes in the dialog's place and frame, buttons in the HUD style. */
.battle-box{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(var(--hud-gap) + 84px);width:min(720px,calc(var(--vw) - 2*var(--hud-left) - 4*var(--hud-gap)));min-width:min(480px,calc(var(--vw) - 24px));padding:6px 10px;color:#283040;border:8px solid transparent;border-image:url(/client/ui/frame-dialog.png) 4 fill/8px stretch;z-index:9}
.battle-box p{font-size:18px;line-height:28px;margin:0 0 8px;white-space:pre-line}
.battle-box .opts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px}
.battle-box .opts.list{grid-template-columns:1fr}
.battle-box .fr-button{padding:2px 8px;color:var(--px-text);display:flex;align-items:center;gap:8px;text-align:left;font-size:14px}
.battle-box .fr-button:disabled{opacity:.45;transform:none;cursor:not-allowed}
.battle-box .fr-button small{margin-left:auto;color:var(--px-muted);font-size:10px}
.battle-box .back{margin:6px 0 0 auto;width:fit-content}
.duel-title{font-weight:bold}.duel-time{font-size:12px!important;line-height:18px!important;color:var(--px-muted)}
.safari-stats{display:flex;justify-content:space-between;margin:0 0 6px;font-size:14px}.safari-stats b{color:var(--px-yellow)}#safari-retire{width:100%;padding:2px 8px;color:var(--px-text)}
/* Move buttons in their type colour (user's request, 31/10/2026): flat fill, dark edge and a light top line, pixel style. */
.battle-box .fr-button.move{border:3px solid color-mix(in srgb,var(--type) 45%,var(--px-ink));border-image:none;background:var(--type);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--type) 60%,#fff),inset 0 -2px 0 color-mix(in srgb,var(--type) 70%,var(--px-ink));padding:6px 10px}
.battle-box .fr-button.move:hover{background:color-mix(in srgb,var(--type) 80%,#fff)}
.battle-box .fr-button.move small{color:var(--px-text)}
.status-tag{display:inline-block;padding:0 4px;margin-left:4px;font-size:10px;line-height:14px;color:var(--px-text);background:var(--px-red);text-shadow:none}
.status-tag.par{background:#b8a020}.status-tag.slp{background:#707888}.status-tag.brn{background:#d06020}.status-tag.frz{background:#50a0d0}.status-tag.psn,.status-tag.tox{background:#9050b0}
/* Pokérus seal (MON-9): contagious in violet; cured keeps the seal in grey with a check. */
.status-tag.pokerus{background:#a048b8}.status-tag.pokerus.cured{background:#606878}
.party-row{position:relative}
/* Level-up badge (05/11/2026): "Lv N!" rises in steps over the party entry; the server sends the event, the client only draws it. */
.levelup-badge{position:absolute;right:6px;top:2px;color:var(--px-yellow);font-size:14px;line-height:18px;text-shadow:2px 2px 0 var(--px-ink);pointer-events:none;animation:levelup-rise 1.2s steps(8) forwards}
@keyframes levelup-rise{0%{transform:translateY(8px);opacity:0}15%{transform:translateY(0);opacity:1}80%{opacity:1}100%{transform:translateY(-10px);opacity:0}}
/* Nickname prompt: compact panel using the same frames and fields as the game windows. */
#nickname{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(var(--vw) - 24px));box-sizing:border-box;z-index:9}
#hud:has(#nickname:not([hidden])) #dialog{visibility:hidden}
#nickname header{display:flex;align-items:center}
#nickname h2{margin:0;font-size:14px;line-height:20px}
#nickname-form{padding:10px 8px 8px}
#nickname-text{margin:0 0 10px;font-size:12px;line-height:18px;white-space:pre-line}
#nickname-input{display:block;width:100%;box-sizing:border-box;margin:0 0 10px;font:inherit;font-size:12px;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);padding:6px;outline:none}
#nickname-input::placeholder{color:var(--px-card-muted)}
#nickname-input:focus{box-shadow:inset 0 0 0 2px var(--px-yellow)}
#nickname .opts{display:flex;justify-content:flex-end;gap:6px}
#nickname .fr-button{font:inherit;font-size:12px;white-space:nowrap}
#evolution{text-align:center}
#evolution .evo-stage{height:112px;display:flex;align-items:center;justify-content:center}
#evo-pic{width:96px;height:96px;image-rendering:pixelated}
#evo-pic.flash{filter:brightness(0) invert(1)}
#win-body .items li.tm{cursor:pointer}#win-body .items li.tm-targets{flex-wrap:wrap;gap:4px;justify-content:flex-start}#win-body .tm-targets small{margin-left:8px;opacity:.8}

.pc-sale{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pc-sale .fr-button{padding:0 8px}.pc-sale .fr-button:disabled{opacity:.5}.pc-price{color:var(--px-yellow);font-size:10px}.pc-check{cursor:pointer}.pc-row[draggable=true],.pc-member[draggable=true]{cursor:grab}
.pc-columns:not(.pc-edit),.pc-list:not(.pc-edit) .pc-row{grid-template-columns:minmax(120px,1.2fr) 35px minmax(100px,1fr) minmax(120px,1fr) 45px repeat(6,34px) 58px}
.pc-columns{position:sticky;top:0;z-index:1;background:#1c2232}
.pc-columns span:nth-last-child(-n+8),.pc-columns.pc-edit span:nth-child(3),.pc-columns:not(.pc-edit) span:nth-child(2),.pc-level,.pc-percent,.pc-price{text-align:center}
.pc-iv{justify-self:center}
.pc-boxes{display:flex;gap:4px;align-items:center;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.pc-boxes .fr-button,.pc-sale .fr-button{padding:0 7px;white-space:nowrap}
.pc-box-tab{display:flex;align-items:center;flex-shrink:0}.pc-box-tab .pc-box{margin-right:0}#win-body .pc-box-tab .pc-box-action{min-width:22px;height:28px;margin:4px 0 0;padding:0 3px;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);font:inherit;cursor:pointer}.pc-box-tab .pc-box-action:disabled{opacity:.4;cursor:not-allowed}
.pc-box-input{width:150px;min-width:150px;height:32px;padding:3px 6px;font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-yellow);outline:0}.pc-box-input::placeholder{color:var(--px-card-muted)}

/* Center the empty-box message inside the list viewport. */
.pc-list:has(> .pc-empty){position:relative}
#win-body .pc-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;text-align:center;pointer-events:none}

.pc-drag-preview{position:fixed;top:0;left:0;z-index:-1;display:flex;align-items:center;gap:3px;width:max-content;padding:2px 6px;background:var(--px-card);color:var(--px-text);font:inherit}.pc-drag-preview img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}

/* Bag: item grid and selected item, using the game's existing frames. */
#window[data-kind=bag]{--win-w:min(720px,calc(var(--vw) - 2*var(--hud-gap)));--win-h:min(430px,calc(var(--vh) - 2*var(--hud-gap)));width:var(--win-w);height:var(--win-h);max-height:none}
#window[data-kind=bag] #win-body{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1;overflow:hidden;padding:0 8px 8px}
.bag-top{display:flex;align-items:center;gap:10px;padding:4px 0 0}.bag-top .shop-money{white-space:nowrap}.bag-search{min-width:0;flex:1;font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);padding:4px 7px}
.bag-tabs{display:flex;gap:4px;overflow-x:auto;flex:none;padding-bottom:2px}.bag-tabs .fr-button{white-space:nowrap}.bag-layout{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-height:0}.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,60px);grid-auto-rows:60px;align-content:start;gap:4px;overflow:auto}.bag-item{position:relative;display:grid;place-items:center;min-width:0}.bag-item .item-ico{width:36px;height:36px;background-size:576px auto;background-position:calc(-36px * var(--x)) calc(-36px * var(--y))}.bag-quantity{position:absolute;right:0;bottom:0;color:var(--px-yellow);font-size:10px;line-height:14px}.bag-empty{grid-column:1/-1}.bag-detail{overflow:auto;min-width:0}.bag-detail-heading{display:flex;align-items:center;gap:8px}.bag-detail-heading div{display:grid;gap:4px;min-width:0}.bag-detail-heading small{color:var(--px-muted)}.bag-move{color:var(--px-yellow)}.bag-targets,.bag-powers{display:flex;gap:4px;flex-wrap:wrap}.bag-targets button small,.bag-powers button small{display:block}.bag-targets button:disabled,.bag-powers button:disabled{opacity:.5}.bag-powers{overflow:auto;flex:none;max-height:90px}
@media(max-width:540px){.bag-layout{grid-template-columns:1fr;grid-template-rows:minmax(80px,1fr) minmax(90px,1fr)}.bag-top{gap:4px}}

.pc-items-note{margin:0;padding:6px 8px;background:var(--px-card);border:2px solid var(--px-button-dark);color:var(--px-muted)}
.pc-items-search{flex:none;max-width:360px}.pc-items-filters{flex:none}
#window[data-kind=pc] #win-body>.pc-items-layout{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 1 0;min-height:0}
.pc-items-panel{display:flex;flex-direction:column;min-height:0;min-width:0}.pc-items-panel h3{flex:none}.pc-items-list{overflow:auto;flex:1;min-height:0}.pc-items-empty{text-align:center}.pc-item-row{display:flex;align-items:center;gap:6px;min-width:0;border-bottom:2px solid #242c44;padding:2px 0}.pc-item-row[hidden]{display:none}.pc-item-row .item-ico{flex:none}.pc-item-name{display:grid;flex:1;min-width:0}.pc-item-name small{color:var(--px-muted)}.pc-item-count{color:var(--px-muted);white-space:nowrap}.pc-item-quantity{width:55px;min-width:0;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-button-dark);font:inherit;padding:2px 4px}.pc-item-row .fr-button{white-space:nowrap}
@media(max-width:700px){#window[data-kind=pc] #win-body>.pc-items-layout{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.pc-item-row{gap:3px}}

.bag-game-note{color:var(--px-muted);font-size:10px;line-height:16px}

.bag-actions{display:flex;flex-wrap:wrap;gap:4px}.bag-actions button:disabled{opacity:.5;cursor:not-allowed}
#window[data-kind=map]{--win-w:min(1180px,calc(var(--vw) - 24px));--win-h:min(760px,calc(var(--vh) - 24px));width:var(--win-w);height:var(--win-h);max-height:none}
#window[data-kind=map] #win-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;position:relative}
.world-search{font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-button);padding:5px;margin:2px 0 6px 8px;max-width:280px}
.world-results{position:absolute;top:38px;left:0;z-index:2;display:grid;max-height:50%;overflow:auto;background:var(--px-card)}
.world-results:empty{display:none}.world-map{display:flex;flex:1;min-height:0;gap:6px}.world-view{position:relative;flex:1;min-width:0;background:#080f19;overflow:hidden}.world-view canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.world-view canvas:active{cursor:grabbing}.world-tools{position:absolute;right:6px;top:6px;display:grid}.world-tools button{width:40px;height:40px}.world-hint{position:absolute;left:8px;bottom:4px;margin:0;font-size:10px;pointer-events:none;color:var(--px-muted)}
.world-detail{width:270px;flex-shrink:0;overflow:auto;background:var(--px-card);padding:10px}.world-detail h3{font-size:19px;color:var(--px-yellow)}.world-detail h4{margin:14px 0 6px;color:var(--px-muted)}.world-here{color:var(--px-green)}.world-link{display:block;width:100%;text-align:left}.world-place,.world-method{margin:4px 0}.world-wild{display:flex;align-items:center;font-size:10px}.world-wild img{width:32px;height:32px;image-rendering:pixelated}
@media(max-width:650px){.world-map{flex-direction:column}.world-detail{width:auto;height:35%;flex-shrink:0}.world-hint{display:none}}
/* Journey chapters and milestones, using the game's existing pixel frames. */
#window[data-kind=journey]{--win-w:min(620px,calc(var(--vw) - 24px));--win-h:min(760px,calc(var(--vh) - 24px));width:var(--win-w);height:var(--win-h);max-height:none}
#window[data-kind=journey] #win-body{flex:1;min-height:0;overflow:auto;padding:4px 8px 8px}
.journey-hero{display:flex;align-items:center;gap:16px;margin-bottom:12px;padding:8px}.journey-hero div{display:grid;gap:4px}.journey-hero small{color:var(--px-muted)}.journey-hero strong{color:var(--px-yellow);font-size:18px;line-height:24px}
.journey-chapters{display:grid;gap:12px}.journey-chapter{background:var(--px-card);padding:8px;box-shadow:inset 0 0 0 2px #25334d}.journey-chapter.current{box-shadow:inset 0 0 0 2px var(--px-button)}
#win-body .journey-heading{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;line-height:20px}.journey-number{display:grid;place-items:center;width:28px;height:28px;background:var(--px-button);color:var(--px-yellow)}.journey-count{margin-left:auto;color:var(--px-muted)}
.journey-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}.journey-step{display:flex;gap:8px;align-items:flex-start;padding:8px;background:#182234}.journey-step.current{box-shadow:inset 0 0 0 2px var(--px-yellow)}.journey-dot{display:grid;place-items:center;flex:0 0 22px;height:22px;border:2px solid #596780;color:var(--px-muted)}.journey-step.done .journey-dot{border-color:var(--px-green);color:var(--px-green)}.journey-step.current .journey-dot{border-color:var(--px-yellow);color:var(--px-yellow)}.journey-step-content{flex:1;min-width:0}.journey-line{display:flex;align-items:baseline;gap:8px}.journey-line b{flex:1}.journey-state{color:var(--px-muted);white-space:nowrap}.journey-step.done .journey-state{color:var(--px-green)}.journey-step.current .journey-state{color:var(--px-yellow)}
#win-body .journey-step p{margin:4px 0 0;color:var(--px-muted);font-size:12px;line-height:18px}
/* Market preview follows the reference's tabs, filters, listing cards and details. */
#window[data-kind=market]{--win-w:min(1180px,calc(var(--vw) - 24px));--win-h:min(757px,calc(var(--vh) - 24px));width:var(--win-w);height:var(--win-h);max-height:none}
#window[data-kind=market] #win-body{overflow:hidden;flex:1;min-height:0}.market-shell{position:relative;width:100%;height:100%;overflow:hidden}.market-preview{height:100%;display:flex;flex-direction:column;gap:6px;padding:8px}.market-top{display:flex;gap:4px;align-items:center}.market-top .fr-button{font-size:10px}.market-balance{display:flex;align-items:center;gap:8px}.market-tabs{display:flex;gap:2px;overflow:hidden;flex-shrink:0}.market-tabs .fr-button{white-space:nowrap;font-size:10px}.market-filters{display:flex;align-items:end;gap:4px;overflow:hidden;flex-shrink:0}.market-field{display:grid;gap:2px;min-width:75px}.market-field small{color:var(--px-muted);white-space:nowrap}.market-field input,.market-field select{width:100%;font:inherit;font-size:10px;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-button);padding:5px}.market-search{flex:1;min-width:145px}.market-filters>.fr-button{white-space:nowrap;font-size:10px}.market-view{display:flex;gap:8px;min-height:0;flex:1}.market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:6px;overflow:hidden;flex:1}.market-card{min-width:0;height:290px;padding:0;overflow:hidden}.market-card-art{height:130px;display:grid;place-items:center;background:#1a2939}.market-placeholder-art{width:64px;height:64px;background:#314056;box-shadow:0 0 0 4px #26364b}.market-card-info{display:grid;gap:9px;padding:12px}.market-card-info small{color:var(--px-muted)}.market-placeholder-line{height:8px;width:65%;background:#405069}.market-placeholder-line.long{width:90%}.market-placeholder-line.short{width:40%}.market-detail{width:28%;text-align:center;padding:20px;color:var(--px-muted)}.market-footer{text-align:right;color:var(--px-muted);font-size:10px}
.market-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,9,18,.58)}.market-coming{padding:18px 42px;text-align:center}.market-coming strong{font-size:28px;line-height:40px;color:var(--px-yellow)}
@media(max-width:750px){.market-top .fr-button{display:none}.market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.market-detail{width:30%}.market-tabs,.market-filters{overflow:hidden}.market-coming{padding:10px 24px}}
/* Align Market's image frames to whole screen pixels, including distributed columns. */
@supports (top:round(down, 1.5px, 1px)){
  .market-grid{grid-template-columns:repeat(4,round(down,calc((100% - 18px)/4),1px))}
  .market-detail{width:round(down,28%,1px)}
  .market-coming{position:absolute;left:round(down,calc((100% - 240px)/2),1px);top:round(down,calc((100% - 88px)/2),1px);width:240px;height:88px;display:grid;place-items:center;padding:0}
  @media(max-width:750px){.market-grid{grid-template-columns:repeat(2,round(down,calc((100% - 6px)/2),1px))}.market-detail{width:round(down,30%,1px)}.market-coming{left:round(down,calc((100% - 200px)/2),1px);width:200px}}
}
.market-balance{width:132px;flex-shrink:0}.market-top>.fr-button{width:132px;flex-shrink:0}
.market-tabs .fr-button{flex:0 0 108px}.market-tabs .fr-button:nth-child(3),.market-tabs .fr-button:nth-child(5),.market-tabs .fr-button:nth-child(6){flex-basis:148px}.market-tabs .fr-button:nth-child(4){flex-basis:132px}
.market-filters .market-field:not(.market-search){flex:0 0 80px}.market-filters>.fr-button{flex:0 0 96px}.market-filters .market-search{flex:1 1 145px}
.market-top>.fr-button,.market-balance{white-space:nowrap}.market-filters>.fr-button,.market-tabs .fr-button{min-width:0}
.market-filters .market-field:nth-child(4),.market-filters .market-field:nth-child(8){flex-basis:120px}
/* Keyboard reference: the same movement/actions grouping as the inspected game. */
#window:is([data-kind=options],[data-kind=autohunt],[data-kind=autocapture]){--win-w:min(560px,calc(var(--vw) - 24px));--win-h:min(720px,calc(var(--vh) - 24px));width:var(--win-w);height:var(--win-h);max-height:none}
#window:is([data-kind=options],[data-kind=autohunt],[data-kind=autocapture]) #win-body{padding:8px;min-height:0;overflow:auto}.controls-intro{color:var(--px-muted);font-size:12px;line-height:18px}.controls-section{padding:8px 0;border-top:2px solid #2c3b55}#win-body .controls-section h3{margin:4px 0 8px;color:var(--px-yellow)}.controls-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px;gap:6px;align-items:center;margin:4px 0}.controls-key{display:block;min-width:0;text-align:center;padding:4px;background:var(--px-card);border:2px solid var(--px-button);font:inherit;color:var(--px-text)}
@media(max-width:420px){.controls-row{grid-template-columns:minmax(0,1fr) 68px 68px;font-size:10px}}
#select-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px}#select-overlay[hidden]{display:none}.select-panel{width:min(440px,100%);padding:16px;display:flex;flex-direction:column;gap:12px}.select-panel h1{margin:0;font-size:21px}.select-slots{display:flex;flex-direction:column;gap:8px}.select-slot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;min-height:112px;width:100%;cursor:pointer;color:var(--px-text);font:inherit}.select-slot[aria-selected=true]{outline:2px solid var(--px-yellow);outline-offset:-2px}.select-slot canvas{width:64px;height:64px;image-rendering:pixelated}.select-slot.empty{justify-content:center;color:var(--px-card-muted);cursor:default}.select-actions{display:flex;flex-direction:column;gap:8px}.select-actions .fr-button:disabled{opacity:.5}#select-error{margin:0;color:#ff8a8a}.character-name{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.character-name[hidden]{display:none}.character-name input{background:var(--px-card);color:var(--px-text);border:2px solid var(--px-ink,#17263e);padding:8px;font:inherit}

.sound-list{display:grid;gap:8px}.sound-row{display:grid;grid-template-columns:minmax(0,1fr) 32px 140px 44px;gap:8px;align-items:center;padding:6px 0;border-top:2px solid #2c3b55}.sound-toggle{width:32px;height:32px;padding:0;border:0;background:url(/client/ui/icons.png) -384px 0/auto 32px;image-rendering:pixelated;cursor:pointer}.sound-toggle.off{background-position:-416px 0}.sound-row.off .sound-label,.sound-row.off input[type=range],.sound-row.off output{opacity:.5}.sound-label{display:grid;gap:2px;color:var(--px-text)}.sound-label small{color:var(--px-muted);font-size:10px;line-height:14px}.screen-row{grid-template-columns:minmax(0,1fr) 140px 44px}.sound-row input[type=range]{width:100%;accent-color:var(--px-yellow)}.sound-row output{text-align:right;color:var(--px-text)}
@media(max-width:420px){.sound-row{grid-template-columns:minmax(0,1fr) 32px 96px 40px}}
.character-ring{position:relative;width:160px;height:160px;touch-action:none;cursor:crosshair}.character-ring-hues{position:absolute;inset:0;border-radius:50%;background:conic-gradient(red,#ff0,lime,cyan,blue,magenta,red);-webkit-mask:radial-gradient(circle closest-side,transparent 74%,#000 76%);mask:radial-gradient(circle closest-side,transparent 74%,#000 76%)}.character-ring-square{position:absolute;left:40px;top:40px;width:80px;height:80px;border:1px solid #a9b6c5;box-sizing:border-box}.character-ring-marker{position:absolute;width:10px;height:10px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none;box-sizing:border-box}.character-ring:focus-visible{outline:2px solid #f8d048;outline-offset:2px}
.character-color-palette .character-color-reset{width:100%;height:auto;min-height:30px;padding:4px 8px;background:#2c4670;border:2px solid #536b8b;color:#fff;font:inherit;cursor:pointer}

.lang-select{display:flex;align-items:center;gap:8px;margin-top:4px}.lang-select select{font:inherit;color:inherit;background:var(--px-card);border:1px solid currentColor;padding:2px 4px;text-shadow:2px 2px 0 var(--px-ink)}.options-tabs{margin-bottom:6px}.options-language{display:grid;gap:8px}.options-language select{width:100%;font:inherit;color:inherit;background:var(--px-card);border:1px solid currentColor;padding:2px 4px}

/* Modal dragging: independent of the window centering rules. */
#window,.shop-modal{translate:var(--drag-x,0px) var(--drag-y,0px)}
#window>header.fr-title,.shop-modal>header.fr-title{cursor:move;touch-action:none}

#hotbar .slot{cursor:pointer}#hotbar .slot[draggable="true"],.bag-item[draggable="true"]{cursor:grab}
#hotbar .slot.drop-target{outline:2px solid var(--px-text);outline-offset:-2px}
#hotbar .slot>*{pointer-events:none}

/* Team member details use the shared window and type colors. */
.party-row:focus-visible{outline:2px dashed var(--px-yellow);outline-offset:-2px}
#window[data-kind=party-detail]{left:var(--party-left,0px);top:var(--party-top,0px);right:auto;bottom:auto;width:min(420px,calc(var(--vw) - 16px));max-height:calc(var(--vh) - 16px)}
#window[data-kind=party-detail] #win-body{padding:0 4px 4px}
.mon-nature-up{color:var(--px-green)}.mon-nature-down{color:var(--px-red)}
.mon-detail-item{display:flex;align-items:center;gap:10px;text-align:left;margin-top:8px}.mon-detail-item-slot{width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--px-button);background:var(--px-card)}.mon-detail-item-info{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}.mon-detail-item small{color:var(--px-muted)}
.mon-detail-head{display:flex;align-items:center;gap:12px}.mon-detail-head .party-icon{box-sizing:border-box;width:96px;height:96px;padding:16px;margin:0}.mon-detail-info,.mon-detail-meter,.mon-detail-traits{display:grid;gap:6px}.mon-detail-info b{font-size:18px}.mon-detail-meter{margin:10px 0}.mon-detail-moves{display:grid;gap:4px;margin:14px 0}.mon-detail-move{display:flex;justify-content:space-between;gap:12px;border-left:4px solid var(--type);padding:6px 10px;background:var(--px-card-bg, #242b3c)}

.mon-detail-types{display:flex;flex-wrap:wrap;gap:4px}.mon-detail-type{background:color-mix(in srgb,var(--type) 55%,white);color:#151515;padding:2px 6px;font-weight:bold;text-shadow:none}

/* Public trainer profile: retain the layout using the shared pixel UI. */
#window[data-kind=profile]{width:min(760px,calc(var(--vw) - 2*var(--hud-gap)));max-height:calc(var(--vh) - 2*var(--hud-gap));background:#1c2232;border:4px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
#window[data-kind=profile]>header.fr-title{background:var(--px-button);border:4px solid var(--px-ink);box-shadow:inset 2px 2px 0 #4c6aa4,inset -2px -2px 0 var(--px-button-dark);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
#window[data-kind=profile] #win-body{min-height:0}
#window[data-kind=profile] h3{margin:0 0 8px;color:var(--px-yellow)}
.profile-head{padding:4px 4px 10px}.profile-banner{height:96px;box-sizing:border-box;border:8px solid transparent;border-image:url(/client/ui/frame-card.png) 4 fill/8px stretch}.profile-details{display:flex;align-items:center;gap:12px;margin:-34px 12px 0;position:relative}.profile-avatar-frame{width:76px;height:76px;box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center;background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 2px 2px 0 #070911,inset -2px -2px 0 #242c44;border-radius:50%}.profile-avatar{width:auto;height:60px;max-width:52px;object-fit:contain;object-position:center;image-rendering:pixelated}.profile-identity{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding-top:28px}.profile-identity>b{font-size:18px;overflow-wrap:anywhere}.profile-title{color:var(--px-muted)}
.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.profile-stat{min-width:0;min-height:75px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:8px solid transparent;border-image:url(/client/ui/frame-card.png) 4 fill/8px stretch}.profile-stat-icon{height:17px;color:var(--px-muted);font-size:13px}.profile-stat:nth-child(4) .profile-stat-icon{color:var(--px-yellow)}.profile-stat b{font-size:14px}.profile-stat small{font-size:10px;line-height:14px;color:var(--px-card-muted)}
.profile-section{padding:10px 4px}.profile-team{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.profile-mon{height:64px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:8px solid transparent;border-image:url(/client/ui/frame-slot.png) 4 fill/8px stretch}.profile-mon.empty{opacity:.6}.profile-mon .party-icon{width:38px;height:38px;margin:0;object-fit:contain;image-rendering:pixelated}.profile-mon small{font-size:10px;color:var(--px-card-muted);line-height:14px}
.profile-badge-row{display:flex;align-items:center;gap:7px}.profile-badge-row+.profile-badge-row{margin-top:6px}.profile-region{width:48px;display:grid;gap:2px}.profile-region small{color:var(--px-card-muted)}.profile-badges{min-width:0;display:flex;justify-content:space-around;align-items:center;gap:2px;padding:4px;background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink);flex:1}.profile-badge{width:24px;height:24px;min-width:0;object-fit:contain;image-rendering:pixelated}
.profile-head .profile-duel{margin-left:auto;align-self:flex-end;min-width:120px;border:8px solid transparent;border-image:url(/client/ui/frame-button.png) 4 fill/8px stretch;background:none;color:var(--px-text);font:inherit;text-shadow:2px 2px 0 var(--px-ink)}.profile-duel:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:650px){.profile-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.profile-details{margin-left:4px;margin-right:4px;gap:8px}.profile-avatar-frame{width:64px;height:64px}.profile-avatar{height:50px;max-width:44px}.profile-head .profile-duel{min-width:0}}

/* A profile's Pok?mon detail floats above the still-visible profile. */
#profile-mon-window{position:fixed;left:var(--party-left,0px);top:var(--party-top,0px);width:min(420px,calc(var(--vw) - 16px));max-height:calc(var(--vh) - 16px);display:flex;flex-direction:column;z-index:8;translate:var(--drag-x,0px) var(--drag-y,0px)}
#profile-mon-window header{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:0 4px}#profile-mon-window h2{font-size:21px;line-height:28px}#profile-mon-close{width:28px;height:28px}#profile-mon-body{overflow:auto;padding:0 4px 4px}

.mon-detail-tabs[hidden]{display:none}.mon-detail-tabs{flex-shrink:0}.mon-detail-values{width:100%;border-collapse:collapse;text-align:left}.mon-detail-values th,.mon-detail-values td{padding:4px 8px;border-bottom:1px solid var(--px-button)}.mon-detail-values tr>:nth-child(2){text-align:center}
#window[data-kind=party-detail] h2,#profile-mon-window h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){.mon-detail-tabs .fr-button{font-size:10px;padding:0 2px}#window[data-kind=party-detail] h2,#profile-mon-window h2{font-size:16px}}

.mon-detail-value-sections{display:grid;gap:16px;margin-top:12px}
.mon-detail-help-row{display:flex;align-items:center;gap:6px;margin-top:6px}.mon-detail-help-button{display:grid;place-items:center;box-sizing:border-box;width:16px;height:16px;padding:0;border:0;background:transparent;cursor:pointer;align-self:center}.mon-detail-help-button svg{display:block;width:16px;height:16px;fill:#fff;transform:translateY(-2px)}.mon-detail-help-button:active{transform:none}.mon-detail-help-button:focus-visible{outline:2px solid #f8d048;outline-offset:2px}
.mon-detail-value-help[popover]{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:max-content;max-width:min(280px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:8px;border:2px solid var(--px-button);background:var(--px-card);color:var(--px-text);font:inherit;pointer-events:none}
.admin-pane{display:grid;gap:6px;align-content:start}
#window[data-kind=admin]{width:min(560px,calc(var(--vw) - 2*var(--hud-gap)))}
.admin-tabs{margin-bottom:6px}
.admin-search{display:flex;gap:4px}.admin-input{font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);padding:2px 6px;min-width:0}.admin-search .admin-input{flex:1}
.admin-number{width:80px;margin-left:6px}.admin-field{display:flex;align-items:center;gap:4px}
.admin-list{list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:260px;overflow-y:auto}.admin-log{max-height:340px}
.admin-row{padding:0}.admin-row.sel>.admin-pick{box-shadow:inset 0 0 0 2px var(--px-yellow)}.admin-pick{display:flex;align-items:center;gap:6px;width:100%;text-align:left}
.admin-role{padding:0 3px;color:var(--px-ink);background:var(--px-card-muted)}.admin-role-mod{background:#58b0e8}.admin-role-admin{background:#e85858}.admin-role-creator{background:#f8d048}
.admin-on{color:var(--px-green)}.admin-off{color:var(--px-muted)}
.admin-sanction{padding:2px 6px;color:var(--px-red)}.admin-actions{display:flex;flex-wrap:wrap;gap:4px;padding:4px 6px}.admin-actions .admin-input{flex:1 1 140px}
.admin-chosen{margin:0;color:var(--px-yellow)}.admin-status{margin:4px 0 0;color:var(--px-green)}.admin-status.bad{color:var(--px-red)}.admin-details{color:var(--px-muted)}

.options-account form{display:grid;gap:12px}.options-account label{display:grid;gap:4px}.options-account input{width:100%;background:var(--px-card);color:var(--px-text);border:2px solid var(--px-button);font:inherit;padding:8px}.options-account p{margin:0}#account-error{color:var(--px-red)}
.auth-legal{margin:8px 0 0;font-size:10px;line-height:18px;color:var(--px-muted)}.auth-legal a{color:var(--px-yellow)}
.account-data{display:grid;gap:10px;margin-top:14px;padding-top:12px;border-top:2px solid var(--px-button)}.account-data h2{margin:0;font-size:14px}.account-data label{display:grid;gap:4px}.account-data label.account-check{display:flex;align-items:center;gap:8px}.account-data label.account-check input{width:auto}.account-data .danger{border-color:var(--px-red);color:var(--px-red)}#account-export-status{color:var(--px-green)}#account-delete-error{color:var(--px-red)}.account-delete-panel{display:grid;gap:10px;padding:10px;border:2px solid var(--px-red);background:var(--px-card)}.account-delete-panel[hidden]{display:none}

/* Pokédex (FLD-5): grid and filters on the left, species on the right, as in the PokeIdleMMO reference, in the project's pixel kit. */
#window[data-kind=pokedex]{--win-w:min(1100px,calc(var(--vw) - 24px));--win-h:min(757px,calc(var(--vh) - 24px));width:var(--win-w);height:var(--win-h);max-height:none}
#window[data-kind=pokedex] #win-body{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.pdx-shell{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}
.pdx-head{display:grid;gap:4px;flex:0 0 auto}.pdx-totals{font-size:14px}.pdx-bar{height:8px}.pdx-bar i{display:block;height:100%;background:var(--px-green)}
.pdx-body{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:8px;min-height:0;flex:1}
.pdx-left{display:flex;flex-direction:column;gap:6px;min-height:0}
#win-body .pdx-left button,#win-body .pdx-shell button{margin:0;padding:0}
.pdx-search,.pdx-type-select{width:100%;font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);padding:4px 6px;outline:none}
.pdx-search:focus,.pdx-type-select:focus{box-shadow:inset 0 0 0 2px var(--px-yellow)}.pdx-search::placeholder{color:var(--px-card-muted)}
.pdx-type-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:24px;background-image:linear-gradient(45deg,transparent 50%,var(--px-text) 50%),linear-gradient(135deg,var(--px-text) 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.pdx-filters{display:grid;grid-template-columns:repeat(4,1fr);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark)}
.pdx-filter,.pdx-tab{font:inherit;color:var(--px-muted);background:none;border:0;padding:2px 8px;cursor:pointer}
#win-body .pdx-filter{min-width:0;padding:8px 4px;margin:2px;color:var(--px-text);white-space:nowrap}
.pdx-filter:hover{background:var(--px-button-dark)}
.pdx-filter.on{color:var(--px-text);background:var(--px-button)}.pdx-tab.on{color:var(--px-yellow);box-shadow:inset 0 -3px 0 var(--px-yellow)}
.pdx-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;align-content:start;overflow:auto;min-height:0;flex:1;padding:2px}
.pdx-cell{position:relative;display:grid;grid-template-rows:1fr auto auto;justify-items:center;aspect-ratio:.85;min-width:0;font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);cursor:pointer}
.pdx-cell img{width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;min-height:0}.pdx-cell small{color:var(--px-card-muted);font-size:10px;line-height:12px}
.pdx-name{max-width:100%;padding:0 2px 2px;font-size:10px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdx-cell.unknown{cursor:default}.pdx-q{align-self:center;font-size:18px;color:var(--px-card-muted)}
.pdx-cell.on{box-shadow:inset 0 0 0 2px var(--px-yellow)}.pdx-cell:not(.unknown):hover{background:var(--px-button-dark)}
.pdx-ball{position:absolute;right:3px;top:3px;width:8px;height:8px;background:linear-gradient(var(--px-red) 0 50%,var(--px-text) 50%);box-shadow:0 0 0 1px var(--px-ink)}
.pdx-right{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pdx-hero{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;background:linear-gradient(90deg,var(--type),#0e121e);flex:0 0 auto}
.pdx-step{width:28px;height:44px;font:inherit;font-size:21px;color:var(--px-text);background:rgba(8,10,18,.55);border:2px solid var(--px-ink);cursor:pointer}
.pdx-sprite{width:128px;height:128px;image-rendering:pixelated;object-fit:contain}
.pdx-info{display:grid;gap:4px;justify-items:start}.pdx-info h3{margin:0;font-size:24px;line-height:32px;color:var(--px-text)}
.pdx-types{display:flex;gap:4px}.pdx-type{padding:0 6px;font-size:10px;line-height:16px;background:var(--type);box-shadow:0 0 0 2px var(--px-ink)}
.pdx-size{display:flex;gap:12px;margin:0;font-size:10px}.pdx-status{padding:0 6px;font-size:10px;background:var(--px-button-dark);box-shadow:0 0 0 2px var(--px-ink)}.pdx-status.caught{background:var(--px-green);color:var(--px-ink);text-shadow:none}
.pdx-tabs{display:flex;gap:4px;padding:4px 8px 0;flex:0 0 auto}
.pdx-content{display:grid;gap:6px;align-content:start;padding:8px;overflow:auto;min-height:0;flex:1}
.pdx-content h4{margin:6px 0 0;font-size:10px;line-height:14px;color:var(--px-yellow)}
.pdx-empty{padding:12px;color:var(--px-card-muted);text-align:center}
.pdx-stat{display:grid;grid-template-columns:90px minmax(0,1fr) 44px;align-items:center;gap:8px}.pdx-stat b{text-align:right}.pdx-stat.total{color:var(--px-yellow)}
.pdx-track{height:10px;background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink)}.pdx-track i{display:block;height:100%}
.pdx-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0;border-bottom:2px solid var(--px-button-dark)}.pdx-row b{text-align:right}
.pdx-relative{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;text-align:left;font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);cursor:pointer;padding:2px 6px!important}
.pdx-relative img{width:40px;height:40px;image-rendering:pixelated}.pdx-relative.unknown{cursor:default}
@media(max-width:750px){.pdx-body{grid-template-columns:minmax(0,1fr)}.pdx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.pdx-hero{grid-template-columns:auto minmax(0,1fr)}.pdx-step{display:none}.pdx-sprite{width:96px;height:96px}}
.summary-body{display:flex;flex-direction:column;gap:8px;padding:8px}.summary-section h3{margin:0 0 6px}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0}.summary-section p{margin:4px 0 0}
/* Every picklist follows the game's frame (user's request, 06/11/2026); `data-native` opts out. */
select:not([data-native]){appearance:none;-webkit-appearance:none;cursor:pointer;font:inherit;color:var(--px-text);background-color:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);border-radius:0;padding:4px 24px 4px 6px;min-width:0;background-image:linear-gradient(45deg,transparent 50%,var(--px-text) 50%),linear-gradient(135deg,var(--px-text) 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select:not([data-native]):focus{outline:none;box-shadow:inset 0 0 0 2px var(--px-yellow)}
select:not([data-native]) option{background:var(--px-card);color:var(--px-text)}
.capture-rule-species{margin-top:6px;padding-top:4px;border-top:2px solid var(--px-ink);color:var(--px-text)}.capture-rule-ball{max-width:100%}
/* Friends window (SOC-3): add form, then sections of rows (presence dot, name, state, actions). */
.friends-add{display:flex;gap:6px;margin-bottom:8px}.friends-add input{flex:1;min-width:0;font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);padding:2px 6px;outline:none}.friends-add input:focus{box-shadow:inset 0 0 0 2px var(--px-yellow)}.friends-add input::placeholder{color:var(--px-card-muted)}.friends-add .fr-button{white-space:nowrap}
.friends-section h3{margin:8px 0 4px;font-size:10px}
.friends-row{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:10px}.friends-presence{color:var(--px-card-muted)}
.friends-actions{margin-left:auto;display:flex;gap:4px}.friends-actions .fr-button{padding:1px 6px;font-size:10px;line-height:14px}
.friends-dot{width:8px;height:8px;background:var(--px-card-muted);flex:0 0 auto}.friends-dot.on{background:var(--px-green)}
.modal-card{display:flex;flex-direction:column;gap:4px;margin:0 0 8px;padding:6px;background:var(--px-card);box-shadow:0 0 0 2px var(--px-ink),inset 0 0 0 2px var(--px-button-dark)}.modal-card .friends-add{margin:0}.modal-card .friends-add .fr-button{padding:1px 6px;font-size:10px;line-height:14px}.guild-perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0 8px}.guild-perms .switch-row{font-size:10px;padding:2px 0;gap:6px;white-space:nowrap}.guild-perms .switch{flex-basis:32px}.guild-perms .switch-row.on .switch::after{left:14px}
.modal-footer{display:flex;justify-content:flex-end;gap:6px;flex:none;padding:6px 8px 0}.modal-content{flex:1;min-height:0;overflow:auto;padding:0 8px}/* Shared by the Guild, Friends and Mail windows: the body is as wide as the header. Cards line up with the header's inner edge (its 8px frame); text lines up with the title (frame + 4px). */.modal-content .note{font-size:10px;line-height:16px;margin:0 0 8px}.modal-content .modal-card .friends-row,.modal-content .modal-card .mail-row{margin:0}.modal-content .modal-card .friends-row+.friends-row,.modal-content .modal-card .mail-row+.mail-row{margin-top:2px}.modal-content .modal-card.mail-form{gap:6px}.modal-content .modal-card .mail-actions{margin-top:0;align-items:center}.modal-content .modal-card .mail-add select,.modal-content .modal-card .mail-add input{min-width:0}.modal-content .modal-card .mail-form>input,.modal-content .modal-card .mail-form>textarea{width:100%}.guild-head,.modal-content>.note,.modal-content>.friends-add,.modal-content .friends-section>h3,.modal-content .friends-section>.friends-row,.modal-content .friends-section>.note{padding-inline:4px}.guild-danger .note{margin:0 0 6px}#window[data-kind=guild]{--win-w:min(760px,calc(var(--vw) - 24px));--win-h:min(620px,calc(var(--vh) - 24px));width:var(--win-w);height:var(--win-h);max-height:none}#window:is([data-kind=guild],[data-kind=friends],[data-kind=mail]) #win-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:8px 0 10px}
.guild-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.guild-head h3{margin:8px 0 4px;font-size:12px}.guild-head small{color:var(--px-card-muted);font-size:10px}.guild-rank{color:var(--px-card-muted);font-size:10px;text-transform:uppercase}
/* Mail window (SOC-9): letter list, reader and composer. */
.mail-row{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:10px;cursor:pointer}.mail-row b{font-weight:normal}.mail-row.unread b{color:var(--px-yellow)}
.mail-row small{color:var(--px-card-muted)}.mail-row .mail-subject{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-form{display:flex;flex-direction:column;gap:4px;font-size:10px}.mail-form textarea{min-height:56px;flex:1 1 auto;resize:vertical}
.modal-content>.mail-form{height:100%;min-height:0;margin:0}
#window[data-kind=mail]{max-height:calc(var(--vh) - 2*var(--hud-gap) - 92px)}
.mail-form input,.mail-form textarea{font:inherit;color:var(--px-text);background:var(--px-card);border:2px solid var(--px-ink);box-shadow:inset 0 0 0 2px var(--px-button-dark);padding:2px 6px;outline:none}
.mail-form input:focus,.mail-form textarea:focus{box-shadow:inset 0 0 0 2px var(--px-yellow)}
.mail-form input::placeholder,.mail-form textarea::placeholder{color:var(--px-card-muted)}
#mail-actions{align-items:center;padding-bottom:2px}#mail-actions .win-total{color:var(--px-text)}
.mail-body{white-space:pre-wrap;margin:6px 0;font-size:10px}.mail-attach{margin:4px 0;font-size:10px}.mail-actions{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.mail-actions .fr-button,.mail-add .fr-button{padding:1px 6px;font-size:10px;line-height:14px}.mail-add{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.mail-add input{width:64px}

/* Duel screen (PVP-4): the PvE panels stay visible with their normal look but dead (nothing in them may touch the battle: no bag, team change); the trainer card, chat, alerts and the battle menu stay live. Windows opened before the duel are hidden. */
body.in-duel :is(#rightcol,#auto-panel,#safari-panel,#hotbar,#menubar,#feed),body.in-duel :is(#rightcol,#auto-panel,#safari-panel,#hotbar,#menubar,#feed) *{pointer-events:none!important}
body.in-duel :is(#window,#shop,#profile-mon-window,#more-menu){display:none!important}
/* The duel hides the automations and the hotbar; the battle menu (moves) takes the hotbar's place. */
body.in-duel :is(#auto-panel,#hotbar,#menubar){display:none!important}
body.in-duel #battle-menu{bottom:var(--hud-gap);left:max(calc((var(--vw) - 630px) / 2),calc(var(--left-w) + 2 * var(--hud-gap)));right:auto;margin:0;width:min(630px,calc(var(--vw) - var(--left-w) - 421px - 4 * var(--hud-gap)))}
/* The live-duel notice (name, turn, forfeit) is a slim bar at the top, so the battle menu keeps the bottom. */
#duel-active.battle-box{top:var(--hud-gap);bottom:auto;width:fit-content;min-width:0;display:flex;align-items:center;gap:14px;padding:2px 10px}#duel-active.battle-box[hidden]{display:none}#duel-active p{margin:0;font-size:14px;line-height:22px}#duel-active .back{margin:0}
/* Load ROMs (CNT-14): public-mode entry screen on the shared checkerboard (access-background.css); the login/character screens behind use the served forest (CNT-21). */
#rom-setup-overlay{position:fixed;inset:0;z-index:3002;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
#rom-setup-overlay[hidden]{display:none}.rom-setup-panel{width:min(560px,100%);padding:16px;display:flex;flex-direction:column;gap:10px}.rom-setup-panel h1{margin:0;font-size:21px}
.rom-setup-row{display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--px-card);border:2px solid var(--px-button-dark)}
.rom-setup-row input{width:100%;font:inherit;color:var(--px-text);cursor:pointer}
.rom-setup-row input::file-selector-button{appearance:none;background:transparent;font:inherit;color:var(--px-text);cursor:pointer;margin-right:10px;padding:3px 8px;border:8px solid transparent;border-image:url(/client/ui/frame-button.png) 4 fill/8px stretch;text-shadow:2px 2px 0 var(--px-ink)}
.rom-setup-row input:hover::file-selector-button{border-image-source:url(/client/ui/frame-button-sel.png)}
.rom-setup-row input:focus-visible{outline:2px solid var(--px-yellow);outline-offset:2px}
.rom-setup-row[hidden],#rom-setup-loading[hidden],#rom-setup-extract[hidden]{display:none}
#rom-setup-progress{margin:10px 0 0;text-align:center}
.rom-setup-panel:has(#rom-setup-loading:not([hidden])){border:0;border-image:none;background:none;box-shadow:none;padding:0;gap:0}
.rom-setup-panel:has(#rom-setup-loading:not([hidden]))>.fr-title{display:none}
body:has(#rom-setup-overlay:not([hidden]) #rom-setup-loading:not([hidden])) #loading .loading-content{visibility:hidden}

/* Shared window alignment: full-width title, 8px content inset, 6px card padding. */
.auth-panel,.select-panel,.rom-setup-panel{padding:0;gap:8px}
.auth-panel>header,.select-panel>header,.rom-setup-panel>header{padding:0 4px}
.auth-panel>form,.select-panel>:not(header),.rom-setup-panel>:not(header){margin-inline:8px}
.auth-panel>form,.select-panel>:last-child,.rom-setup-panel>:last-child{margin-bottom:10px}
.auth-panel>p{margin:8px 12px}
.rom-setup-panel:has(#rom-setup-loading:not([hidden]))>:not(header){margin-inline:0}
.rom-setup-panel:has(#rom-setup-loading:not([hidden]))>:last-child{margin-bottom:0}
.shop-modal>:not(header){margin-inline:8px}
.shop-modal>.shop-body{margin-bottom:8px}
.shop-tools{padding:0}
#shop-detail{padding:6px}
#window:not([data-kind]) #win-body,#window:not([data-kind=pc],[data-kind=bag],[data-kind=map],[data-kind=journey],[data-kind=market],[data-kind=options],[data-kind=autohunt],[data-kind=autocapture],[data-kind=guild],[data-kind=friends],[data-kind=mail],[data-kind=pokedex]) #win-body,#window[data-kind=party-detail] #win-body,#profile-mon-body{padding:0 8px 8px}
#window[data-kind=map] #win-body,#window[data-kind=pokedex] #win-body{padding:0 8px 8px}
.world-search{margin-left:0}
.rom-setup-status{color:var(--px-muted);font-size:10px;line-height:16px}.rom-setup-status[data-state=verified],.rom-setup-status[data-state=saved]{color:var(--px-green)}
.rom-setup-status[data-state=error],#rom-setup-error{color:var(--px-red)}
#rom-setup-extract{width:100%;padding:6px;color:var(--px-text)}#rom-setup-extract:disabled{opacity:.45;cursor:not-allowed}

.project-notice{position:fixed;z-index:10000;inset:auto 0 0;padding:4px 12px calc(4px + env(safe-area-inset-bottom));color:#d4dbea;font:11px/1.3 Tahoma,Verdana,"Segoe UI",sans-serif;text-align:center;text-shadow:1px 1px 2px #000;pointer-events:none}

.project-notice a{color:var(--px-yellow);pointer-events:auto}

/* Password recovery is a navigation link directly below the password field. */
.auth-forgot-link{display:flex;align-items:center;justify-content:center;min-height:24px;margin-top:-8px;color:var(--px-muted);font-size:12px;text-align:center;text-decoration:underline}.auth-forgot-link[hidden]{display:none}.auth-forgot-link:hover{color:var(--px-text)}

/* Global shiny captures use the same frame and header as the game windows. */
.shiny-announcement{position:fixed;z-index:9999;top:20px;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));box-sizing:border-box;color:var(--px-text);font:12px Tahoma,sans-serif;pointer-events:none}
.shiny-announcement header{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:0 4px}.shiny-announcement h2{flex:1;font-size:14px;line-height:20px}.shiny-announcement-close{width:28px;height:28px;flex:none;pointer-events:auto}
.shiny-announcement-body{display:flex;align-items:center;gap:12px;padding:0 8px 8px}.shiny-announcement-body p{flex:1;min-width:0;margin:0;line-height:1.5;overflow-wrap:anywhere}.shiny-announcement-body img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;flex:none}.shiny-announcement-body .shiny-announcement-trainer{width:72px;height:96px}.shiny-announcement [hidden]{display:none}

.shiny-announcement-body .shiny-announcement-trainer,.shiny-announcement-pokemon{display:block;flex:none;image-rendering:pixelated;background-repeat:no-repeat}.shiny-announcement-body .shiny-announcement-trainer{width:96px;height:96px;background-size:400% 400%;background-position:0 0;animation:announcement-trainer-idle 800ms steps(4) infinite}.shiny-announcement-pokemon{width:64px;height:64px;background-size:200% 400%;background-position:0 66.6667%;animation:announcement-pokemon-idle 333ms steps(2) infinite}.shiny-announcement-pokemon.synthetic{background-size:contain;background-position:center;animation:none}@keyframes announcement-trainer-idle{to{background-position-x:133.3333%}}@keyframes announcement-pokemon-idle{to{background-position-x:200%}}@media(prefers-reduced-motion:reduce){.shiny-announcement-trainer,.shiny-announcement-pokemon{animation:none!important}}

.shiny-announcement-player{font-weight:bold}.shiny-announcement-name{color:#f8d048;font-weight:bold;text-shadow:none}@supports (background-clip:text){.shiny-announcement-name{background:linear-gradient(90deg,#ff7777,#ffd76a,#90ec9b,#78d8ff,#c9a0ff,#ff8cc1,#ff7777);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:announcement-rainbow 3s linear infinite}}@keyframes announcement-rainbow{to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.shiny-announcement-name{animation:none}}

/* Compact announcement: the dismiss button sits in the corner. */
.shiny-announcement{width:min(320px,calc(100vw - 32px))}.shiny-announcement-body{gap:6px;padding:0 24px 0 0}.shiny-announcement-body .shiny-announcement-trainer{width:48px;height:48px}.shiny-announcement-pokemon{max-width:40px;max-height:40px}.shiny-announcement-close{position:absolute;top:0;right:0;width:22px;height:22px;z-index:1}

.shiny-announcement-body p{font-size:10px;text-shadow:none;white-space:nowrap;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}

.shiny-announcement::before{content:"";position:absolute;inset:-8px;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px);background:linear-gradient(110deg,#273c6559 0%,#67518a50 55%,#b58b3b48 100%);pointer-events:none}.shiny-announcement-body{position:relative;z-index:1}

.shiny-announcement::after{content:"";position:absolute;inset:-8px;z-index:2;pointer-events:none;background:linear-gradient(110deg,#ff7777,#ffd76a,#90ec9b,#78d8ff,#c9a0ff,#ff8cc1,#ff7777);background-size:200% 100%;animation:announcement-rainbow 3s linear infinite;clip-path:polygon(evenodd,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px,4px 0,4px 2px,calc(100% - 4px) 2px,calc(100% - 4px) 4px,calc(100% - 2px) 4px,calc(100% - 2px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 2px),4px calc(100% - 2px),4px calc(100% - 4px),2px calc(100% - 4px),2px 4px,4px 4px,4px 2px)}

@media(prefers-reduced-motion:reduce){.shiny-announcement::after{animation:none}}

/* Shared title size for the game windows, including their narrow layouts. */
#window>header #win-title,#profile-mon-window>header #profile-mon-title,.shop-modal>header h2{font-size:14px;line-height:20px}