/* Last in the cascade: mobile is a navigation layout, not a scaled desktop. */
#mobile-refuge-menu,.region-friend{display:none}
body.touch #menu .lobby-top,body.touch #menu .lobby-bottom,body.touch #menu .drawer,body.touch #menu .lobby-pop{zoom:1!important}
body.touch #menu .lobby-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:6px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));min-height:56px;box-sizing:border-box;flex-wrap:nowrap}
body.touch #menu .lobby-brand{min-width:0;display:block;flex-basis:auto}
body.touch #menu .lobby-brand .eyebrow{display:none}
body.touch #menu .lobby-brand h1{font:14px/18px Pixel,var(--ui);white-space:normal}
body.touch #menu .lobby-brand h1 span{display:inline}
body.touch #menu .lobby-res{display:contents}
body.touch #menu .lobby-res>.res-pill:not(.res-coins):not(.res-champion),body.touch #menu #lobby-mute,body.touch #menu .lobby-offer-settings{display:none}
body.touch #menu .res-coins,body.touch #menu .res-champion{height:36px;min-width:0;padding:0 7px;gap:5px;box-sizing:border-box}
body.touch #menu #hub-champion-pill{height:44px;min-width:44px}
body.touch #menu .res-pill b{font:13px/16px Pixel,var(--ui);max-width:72px;overflow:hidden;text-overflow:ellipsis}
body.touch #menu .res-pill i,body.touch #menu .res-pill svg{width:20px;height:20px}
body.touch #menu #mobile-refuge-menu{display:flex;align-items:center;justify-content:center;gap:5px;height:44px;min-width:72px;padding:6px 8px;border:2px solid #253646;border-radius:10px;background:#fffbed;color:#243747;box-shadow:0 3px 0 #253646;font:600 13px/16px var(--ui);pointer-events:auto}
body.touch #menu .lobby-bottom{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(72px,.65fr) minmax(0,1fr);grid-template-areas:none;align-items:stretch;gap:8px;padding:7px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:linear-gradient(0deg,#18382edb,#18382e88);border-top:1px solid #fff5}
body.touch #menu .lobby-companion,body.touch #menu .lobby-actions,body.touch #menu .lobby-launch{display:contents;zoom:1!important}
body.touch #menu .lobby-companion::after,body.touch #menu .lobby-launch::after,body.touch #menu .lobby-dock,body.touch #menu .launch-opts,body.touch #menu #duo-button,body.touch #menu #start-info,body.touch #menu #open-innate,body.touch #menu #open-species,body.touch #menu #open-roster{display:none!important}
body.touch #menu #companion-card,body.touch #menu #open-bank,body.touch #menu #start{height:52px;min-height:52px;min-width:0;width:100%;margin:0;padding:4px 8px;border:2px solid #253646;border-radius:11px;box-sizing:border-box;box-shadow:inset 0 0 0 2px #fff,0 3px 0 #253646;pointer-events:auto}
body.touch #menu #companion-card{grid-column:1;background:#fffbed}
body.touch #menu .companion-preview{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:18px 15px;align-content:center;gap:1px 5px;padding:0;height:100%;min-width:0}
body.touch #menu .companion-preview .portrait{width:36px;height:36px;grid-row:1/3}
body.touch #menu .companion-preview strong{font:12px/18px Pixel,var(--ui);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.touch #menu .companion-preview::after{content:'Pokémon';grid-column:2;font:12px/15px var(--ui);color:#536371}
body.touch #menu .companion-preview .role,body.touch #menu .companion-preview .stats{display:none}
body.touch #menu #open-bank{grid-column:2;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px;background:#fffbed;color:#243747;overflow:visible}
body.touch #menu #open-bank span{display:block;font:600 13px/18px var(--ui);overflow:visible}
body.touch #menu #open-bank kbd,body.touch #menu #start kbd{display:none}
body.touch #menu #open-bank #bank-count{position:absolute;right:2px;top:-5px;min-width:18px;height:18px;line-height:16px;padding:0 3px;box-sizing:border-box;font-size:11px}
body.touch #menu #start{grid-column:3;justify-content:center;text-align:center;font:16px/19px Pixel,var(--ui);letter-spacing:0;text-transform:none;padding:5px 8px;background:linear-gradient(#f96155 0 48%,#d9342c 48%);color:white;text-shadow:0 1px #7b211a}
body.touch #menu #start:before{display:none}
body.touch #menu #start:disabled{background:#657981;color:#f0f4f4;text-shadow:none;opacity:.8}
body.touch #menu #hub-markers .hub-marker{display:none}
body.touch #menu #hub-markers .hub-marker.near:not([hidden]){display:flex;max-width:220px;min-height:44px;font-size:13px;padding:4px 8px;box-shadow:0 2px 0 #253646}
body.touch #menu #hub-markers .hub-marker kbd{display:none!important}
body.touch #menu .drawer,body.touch #menu .lobby-pop{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-height:none;z-index:20;margin:0;box-sizing:border-box}
body.touch #menu .drawer-head{position:sticky;top:0;z-index:2;background:#fffbed;padding:8px 0;margin:0;min-height:44px}
body.touch #menu .drawer-head h2,body.touch #menu .drawer-head h2 svg{color:#243747;text-shadow:none}
body.touch #menu .drawer-close{min-width:44px;min-height:44px}
body.touch #menu .open-balls{top:calc(var(--lobby-t,56px) + 6px);max-width:calc(100% - 24px);min-height:44px;padding:5px 12px;font-size:12px}
.mobile-refuge-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;margin:auto;overflow:hidden;color:#243747;background:#fffbed;border:3px solid #253646;border-radius:16px;box-shadow:0 0 0 3px #78b2df,0 0 0 5px #253646;box-sizing:border-box}
.mobile-refuge-dialog[open]{display:flex;flex-direction:column}
.mobile-refuge-dialog:not([open]){display:none}
.mobile-refuge-dialog::backdrop{background:#102531b3}
.mobile-refuge-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:8px 12px;background:#e3f0fa;border-bottom:2px solid #253646}
.mobile-refuge-dialog h2{font:18px/24px Pixel,var(--ui);margin:0}
.mobile-refuge-dialog .ui-close{flex:none;width:44px;height:44px;min-width:44px;min-height:44px}
.mobile-refuge-body{padding:12px;overflow:auto;overscroll-behavior:contain;min-height:0}
.mobile-refuge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mobile-refuge-grid button{display:flex;align-items:center;gap:9px;min-height:48px;padding:8px 10px;color:#243747;background:white;border:2px solid #506d81;border-radius:9px;text-align:left;font:600 14px/18px var(--ui);box-shadow:0 2px 0 #506d81}
.mobile-refuge-grid button svg{flex:none;width:24px;height:24px}
.mobile-refuge-grid button:active{background:#e0effa}
.mobile-refuge-stats{margin:14px 0;font:13px/20px var(--ui);color:#536371}
.mobile-companion-name{font:16px/22px Pixel,var(--ui);margin:0 0 12px}
body.touch .region-friend{display:block;width:calc(100% - 32px);margin:0 16px 14px;min-height:44px;border:2px solid #506d81;border-radius:9px;background:#e3f0fa;color:#243747;font:600 14px/20px var(--ui)}
body.touch .region-picker-head{position:sticky;top:0;z-index:3;background:#fffbed}
body.touch .innate-pop>header{position:sticky;top:0;z-index:3;background:linear-gradient(180deg,#5a94e0,#3f7fd0)}
@media(max-height:440px) and (orientation:landscape){
 body.touch .region-picker{max-height:calc(100dvh - 20px);width:min(600px,calc(100vw - 24px))}
 body.touch .region-picker-head{padding:6px 12px;min-height:44px;gap:8px}
 body.touch .region-kicker{display:none}body.touch .region-picker h2{font-size:18px;line-height:22px}
 body.touch .region-options{padding:10px 12px;gap:12px;grid-template-columns:1fr 1fr}
 body.touch .region-art{height:92px;aspect-ratio:auto}
 body.touch .region-card-foot{min-height:36px;padding:6px 9px;font-size:13px}
 body.touch .region-friend{margin-bottom:10px}
 body.touch #menu .lobby-brand h1{font-size:13px}
}
@media(max-width:380px){
 body.touch #menu .lobby-brand h1{font-size:11px;line-height:15px}
 body.touch #menu .lobby-bottom{gap:6px;grid-template-columns:minmax(0,1.15fr) 76px minmax(0,1fr)}
 body.touch #menu #open-bank{flex-direction:column;gap:0;padding:2px}
 body.touch #menu .companion-preview{grid-template-columns:28px minmax(0,1fr);gap:1px 4px}
 body.touch #menu .companion-preview .portrait{width:28px;height:32px}
 body.touch #menu .companion-preview strong{font-size:11px}
 .mobile-refuge-grid button{font-size:13px;padding:7px;gap:6px}
}
/* Service content keeps a usable scrolling area even with the browser bars open. */
body.touch #hub-panel{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));box-sizing:border-box}
body.touch #hub-content.pk{max-height:100%;border-width:2px;border-radius:12px;zoom:1!important}
body.touch #hub-content .pk-band{padding:4px 8px;min-height:52px;box-sizing:border-box;border-bottom-width:2px;gap:8px}
body.touch #hub-content .pk-place{font:17px/22px Pixel,var(--ui);min-width:0}
body.touch #hub-content .pk-x{min-width:44px;min-height:44px;flex:none}
body.touch #hub-content.storage-panel{height:100%;max-height:100%}
body.touch #hub-content.storage-panel .storage-scroll{overflow:auto;align-items:start;padding:10px;gap:12px;grid-template-columns:minmax(200px,.8fr) minmax(0,1.2fr)}
body.touch #hub-content.storage-panel .storage-poke-col,body.touch #hub-content.storage-panel .storage-summary,body.touch #hub-content.storage-panel .storage-inventory,body.touch #hub-content.storage-panel .storage-list{overflow:visible;min-height:auto}
body.touch #hub-content.storage-panel .storage-footer{padding:6px 10px;min-height:56px;box-sizing:border-box;gap:8px}
body.touch #hub-content.storage-panel .storage-status small{display:none}
body.touch #hub-content.storage-panel .storage-filter,body.touch #hub-content.storage-panel .storage-step,body.touch #hub-content.storage-panel .storage-remove{min-height:44px;min-width:44px}
@media(max-width:600px){
 body.touch #hub-content.storage-panel .storage-scroll{display:block}
 body.touch #hub-content.storage-panel .storage-filters{display:flex;flex-wrap:wrap}
 body.touch #hub-content.storage-panel .storage-filter{flex:1 1 70px}
}
@media(max-height:440px) and (orientation:landscape){
 body.touch #hub-content .pk-talk:not(:has(.pk-tabs)){display:none}
 body.touch #hub-content .pk-talk:has(.pk-tabs){padding:4px 8px}
 body.touch #hub-content .pk-talk:has(.pk-tabs) .pk-bubble,body.touch #hub-content .pk-talk:has(.pk-tabs) .pk-npc{display:none}
 body.touch #hub-content .pk-tabs button{min-height:44px;height:44px;flex-direction:row;width:auto;min-width:90px;padding:5px 10px}
 body.touch #hub-content:not(.storage-panel) .pk-head{position:sticky;top:0}
 body.touch #hub-content .storage-inventory-heading small{display:none}
 body.touch #hub-content .storage-inventory-heading{margin:0 0 8px}
}
/* v0.19.4 · Móvil: la oferta de 15 Ultra Balls arriba, bien visible (antes solo dentro del Menú). */
body.touch #menu .lobby-offer-settings{display:contents}
body.touch #menu #lobby-settings-button{display:none}
body.touch #menu #gift-shop-button{order:-1;justify-self:start;flex:none;display:flex;align-items:center;gap:6px;width:auto;max-width:100%;min-width:0;height:44px;padding:3px 10px 3px 5px;border:2px solid #7a4a12;border-radius:12px;background:linear-gradient(#ffe98a,#f6c046 55%,#e39a2a);box-shadow:0 0 12px #ffd85a80,inset 0 0 0 2px #fff6c4,0 3px 0 #5a3410;color:#3a2410;pointer-events:auto;overflow:visible}
body.touch #menu #gift-shop-button img{flex:none;width:30px;height:30px}
body.touch #menu #gift-shop-button .gift-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:13px/1 Pixel,var(--ui);text-shadow:0 1px 0 #fff3b8}
body.touch #menu #gift-shop-button .gift-price{position:static;transform:none;flex:none;padding:3px 6px;border:1px solid #7a4a12;border-radius:7px;background:#fff8dc;color:#3a2410;font:700 12px/1.1 system-ui,sans-serif}
body.touch #menu #gift-shop-button .gift-spark.a{left:-4px;top:-6px}body.touch #menu #gift-shop-button .gift-spark.b{right:-3px;top:-6px}
body.touch #menu .lobby-brand{order:-2}
body.touch #menu .lobby-top{grid-template-columns:auto minmax(0,1fr) auto auto auto}
@media (max-width:560px){body.touch #menu .lobby-brand{display:none}body.touch #menu .lobby-top{grid-template-columns:minmax(0,1fr) auto auto auto}}
@media (max-width:380px){body.touch #menu #gift-shop-button .gift-label{display:none}}
/* v0.19.4 · Textos largos del botón principal («Esperando a tu amigo…») en dos líneas dentro del botón. */
body.touch #menu #start{overflow:hidden}
body.touch #menu #start.long{white-space:normal;font-size:12px;line-height:14px;overflow-wrap:anywhere;padding:3px 6px}
/* PokéRiesgo · v0.19.4 · Repaso de alineación en móvil y PC (al final de la última hoja de estilos).
 * Solo ajustes de colocación: el estilo Pokémon (Rojo Fuego / Verde Hoja) se mantiene. */
/* Ranking: la insignia «TÚ» no se parte en dos líneas y el nombre se recorta con puntos. */
.pk-rank-you{flex:none;white-space:nowrap;line-height:1}
@media (max-width:520px){.pk-rank-cols,.pk-rank-row{grid-template-columns:46px minmax(0,1fr) 92px;gap:8px;padding-left:10px;padding-right:10px}
  .pk-rank-medals small{display:none}.pk-rank-cols span:last-child{font-size:9px;line-height:1.2;white-space:normal}.pk-rank-name{font-size:14px}}

/* Resultado: las etiquetas de las casillas (TIEMPO, NIVEL, SALVAJES, EXPLORADORES) caben en su tarjeta. */
#modal[data-panel=result] .result-grid>*{min-width:0}
#modal[data-panel=result] .result-grid>* span{max-width:100%;box-sizing:border-box;overflow:hidden}
@media (max-width:820px),(max-height:520px){#modal[data-panel=result] .result-grid>* span{letter-spacing:0!important;font-size:9px!important;padding:3px 4px 2px;gap:4px}#modal[data-panel=result] .result-grid>* span svg{width:12px;height:12px}}

/* Menú del refugio en móvil horizontal: cuatro columnas para que quepa todo sin desplazar. */
@media (max-height:520px) and (min-width:560px){
  .mobile-refuge-dialog{width:min(820px,calc(100vw - 24px))}
  .mobile-refuge-dialog>header{padding:4px 10px}
  .mobile-refuge-body{padding:8px 10px}
  .mobile-refuge-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .mobile-refuge-grid button{min-height:42px}
  .mobile-refuge-stats{margin:6px 0}}

/* Pokédex del compañero (selector) en móvil horizontal estrecho: rejilla a la izquierda y ficha a la derecha. */
@media (max-height:560px){.rp-sort{display:none}.rp-long{display:none}.rp-short{display:inline}}
@media (max-width:860px) and (max-height:560px){
  .rp-dex{grid-template-rows:auto auto auto minmax(0,1fr);gap:5px;padding:6px 8px 8px}
  .rp-head{min-height:34px}.rp-lens{width:28px;height:28px}.rp-close{width:34px;height:34px}.rp-count{padding:3px 8px;font-size:12px}
  .rp-tools{display:flex;flex-wrap:nowrap;padding:5px;gap:6px}.rp-search{flex:1 1 140px;height:32px}.rp-ftoggle,.rp-toggle{height:32px;padding:0 8px}.rp-seg button{height:28px;padding:0 7px;font-size:12px}
  .rp-body{grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:minmax(0,1fr)}
  .rp-detail{grid-template-columns:1fr;grid-template-areas:"stage" "info" "actions";align-content:start;overflow:auto;gap:6px}
  .rp-stage{width:100%;height:84px}.rp-stage .rp-sprite{width:80px;height:80px}
  .rp-actions{grid-template-columns:1fr 1fr}.rp-btn{height:34px;font-size:11px}}

/* Ranking con poca altura: la lista deja ver tu puesto fijo abajo. */
@media (max-height:560px){.pk-rank-list{min-height:110px;max-height:calc(100dvh - 220px)}}

/* Pokédex (Colección) con poca altura: cabecera compacta para ver más Pokémon. */
@media (max-height:560px){
  .dex-panel .pk-talk{display:none}
  .dex-panel .dex-progress{margin-bottom:4px}
  .dex-panel .dex-search{min-height:32px;padding:5px 10px;margin-bottom:5px}
  .dex-panel .dex-filter{min-height:30px;padding:4px 6px;font-size:12px}
  .dex-panel .dex-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:center;gap:5px 8px;padding:6px 10px}
  .dex-panel .dex-tools .dex-progress{grid-column:1/-1;margin:0}.dex-panel .dex-tools .dex-search{margin:0}
  .dex-scroll{padding:8px 10px 10px}
  .dex-footer{padding:5px 12px}.dex-panel .dex-button{min-height:32px;padding:5px 10px}}

/* Fondo de las ventanas: sin los dos círculos decorativos (parecían mandos fantasma detrás del menú). */
:root{--pk-backdrop:linear-gradient(180deg,rgba(16,26,44,.82),rgba(8,14,26,.9))}

/* Refugio en PC: un cartel de edificio que quedaría debajo de los paneles de abajo se oculta (el edificio sigue en la barra). */
.hub-marker.cp-under{visibility:hidden}

/* El aviso no tapa el botín ni la mochila en PC tampoco (en móvil ya lo hacía). */
#hud-notices.under-panel #toast{visibility:hidden}
#hud-notices.beside-panel #toast{position:relative;inset:auto;width:100%;white-space:normal}

/* ------------------------------------------------ v0.19.4 · Elige tu región (PC y móvil)
 * Banda roja con Poké Ball como el resto de ventanas, mapas en píxel con un paneo suave, placa KANTO / GEN I nítida
 * (tapa el texto borroso de la imagen), cursor ▶ que parpadea en la región elegible y Johto bloqueado con candado. */
#region-picker{width:min(820px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:16px;background:#fbf8ef;overflow:auto;box-shadow:0 0 0 3px #ed6753,0 0 0 6px #1d2630,0 18px 60px #0008}
#region-picker .region-picker-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;min-height:0;padding:12px 14px 12px 16px;background:linear-gradient(180deg,#f46a5c,#d8352c);border-bottom:4px solid #1d2630;box-shadow:inset 0 2px 0 #f8a090}
#region-picker .region-picker-head>div{flex:1;min-width:0}
#region-picker .region-ball{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#fff 0 44%,#1d2630 44% 56%,#f04030 56%);box-shadow:0 0 0 3px #1d2630,0 3px 0 3px rgba(0,0,0,.25);animation:region-ball 2.6s ease-in-out infinite}
#region-picker .region-ball::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #1d2630}
#region-picker .region-kicker{display:inline-block;margin:0 0 4px;padding:3px 7px 2px;border-radius:5px;background:rgba(0,0,0,.22);color:#ffe6c8;font:10px/1 Pixel,var(--ui);letter-spacing:.14em}
#region-picker h2{margin:0;color:#fff;font:24px/1.1 Pixel,var(--ui);text-shadow:2px 2px 0 #7a1410}
#region-picker .region-options{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:stretch;gap:16px;padding:16px}
/* v0.19.6 · El mapa original de Kanto (Mapa Pueblo de Rojo Fuego, 192×144 píxeles ampliado ×4 sin suavizar), sin texto al lado. */
#region-picker .region-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;text-align:left;border:3px solid #1d2630;border-radius:12px;background:#fff;color:#25303a;font:inherit;box-shadow:0 4px 0 #1d2630;transition:transform .15s,box-shadow .15s}
#region-picker .region-art{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#9cd5ff;border-bottom:3px solid #1d2630;isolation:isolate}
#region-picker .region-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;user-select:none}
#region-picker .region-map-kanto{image-rendering:auto}
#region-picker .region-map-johto{image-rendering:pixelated}
#region-picker .region-johto .region-art{flex:1;aspect-ratio:auto;min-height:120px;background:#9aa4ae;border-bottom-color:#5d6770}
#region-picker .region-shine{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%) -150% 0/220% 100% no-repeat;animation:region-shine 5s ease-in-out infinite;pointer-events:none}
#region-picker .region-plate{position:absolute;z-index:2;right:4%;top:5%;display:flex;align-items:center;gap:8px;padding:7px 10px 6px;border:3px solid #1d2630;border-radius:8px;background:#fffbed;box-shadow:inset 0 0 0 2px #e7bf59,0 3px 0 rgba(0,0,0,.3)}
#region-picker .region-plate b{font:22px/1 Pixel,var(--ui);letter-spacing:.06em;color:#25303a;text-shadow:1px 1px 0 #e7d9a8}
#region-picker .region-plate i{flex:none;font:11px/1 Pixel,var(--ui);font-style:normal;padding:3px 5px 2px;border-radius:5px;background:#d8352c;color:#fff;text-shadow:1px 1px 0 #7a1410}
#region-picker .region-johto .region-plate{left:50%;right:auto;top:50%;transform:translate(-50%,-50%);background:#eceae4;box-shadow:inset 0 0 0 2px #b8bcc2,0 3px 0 rgba(0,0,0,.3)}
#region-picker .region-johto .region-plate b{color:#4d5963;text-shadow:none}
#region-picker .region-johto .region-plate i{background:#78828b;text-shadow:none}
#region-picker .region-lock{position:absolute;z-index:2;right:10px;top:10px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fffbed;border:3px solid #1d2630;color:#4d5963;box-shadow:0 3px 0 rgba(0,0,0,.35)}
#region-picker .region-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff5ca;font:16px/1.15 Pixel,var(--ui)}
#region-picker .region-cta{display:grid;gap:3px;min-width:0}
#region-picker .region-cta small{font:600 12px/1.25 var(--ui);color:#6a6a5a}
#region-picker .region-go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#f46a5c,#d8352c);border:3px solid #1d2630;color:#fff;font-size:15px;box-shadow:0 3px 0 #7a1410;animation:region-go 1s steps(2) infinite}
#region-picker .region-soon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e2e0da;border:2px solid #78828b;color:#4d5963}
#region-picker .region-card:disabled{cursor:not-allowed;border-color:#5d6770;box-shadow:0 4px 0 #5d6770;background:#edeae2}
#region-picker .region-johto .region-card-foot{background:#e9e6de;color:#4d5963}
#region-picker .region-kanto::before{content:'▶';position:absolute;z-index:3;left:-2px;top:calc(40% - 12px);color:#d8352c;font-size:18px;text-shadow:2px 2px 0 #fff;opacity:0;transition:opacity .15s}
#region-picker .region-kanto:is(:hover,:focus-visible)::before{opacity:1;animation:region-cursor .5s steps(2) infinite}
#region-picker .region-card:not(:disabled):hover,#region-picker .region-card:not(:disabled):focus-visible{transform:translateY(-3px);border-color:#c83020;box-shadow:0 7px 0 #7a1410}
#region-picker .region-card:not(:disabled):active{transform:translateY(1px);box-shadow:0 2px 0 #7a1410}
#region-picker .region-friend{position:relative;display:flex;align-items:center;justify-content:center;width:calc(100% - 32px);margin:0 16px 16px;min-height:52px;padding:6px 14px;border:3px solid #1d2630;border-radius:999px;color:#243747;font:15px/1.2 Pixel,var(--ui);box-shadow:0 4px 0 #1d2630;cursor:pointer;background:linear-gradient(180deg,#f8796a 0,#e8483c 30%,#c83020 calc(50% - 3px),#1d2630 calc(50% - 3px) calc(50% + 3px),#fff calc(50% + 3px),#e4e4e4 100%);transition:transform .12s,box-shadow .12s}
#region-picker .region-friend::before{content:'';position:absolute;left:18px;right:18px;top:5px;height:7px;border-radius:999px;background:rgba(255,255,255,.35);pointer-events:none}
#region-picker .region-friend-core{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 8px;border:3px solid #1d2630;border-radius:999px;background:#fffbed;box-shadow:inset 0 -3px 0 #e2dccb,0 0 0 3px #fff}
#region-picker .region-friend:hover{transform:translateY(-2px);box-shadow:0 6px 0 #1d2630}#region-picker .region-friend:active{transform:translateY(2px);box-shadow:0 1px 0 #1d2630}
#region-picker .region-friend:focus-visible{outline:3px solid #5888d8;outline-offset:3px}
#region-picker .region-friend-ball{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#f04030 0 43%,#1d2630 43% 57%,#fff 57%);box-shadow:0 0 0 2px #1d2630;animation:region-ball 2.6s ease-in-out infinite}
#region-picker .region-friend-ball::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #1d2630}
@keyframes region-shine{0%,55%{background-position:-150% 0}85%,100%{background-position:150% 0}}
@keyframes region-go{50%{transform:translateX(3px)}}
@keyframes region-cursor{50%{transform:translateX(3px)}}
@keyframes region-ball{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-16deg)}86%{transform:rotate(12deg)}93%{transform:rotate(-5deg)}}
/* Móvil en vertical: Kanto grande arriba y Johto como fila compacta. */
@media (max-width:560px){
  #region-picker{width:calc(100vw - 16px)}
  #region-picker h2{font-size:20px}#region-picker .region-ball{width:26px;height:26px}
  #region-picker .region-options{grid-template-columns:1fr;gap:10px;padding:12px}
  #region-picker .region-plate b{font-size:18px}#region-picker .region-plate{padding:5px 8px 4px}
  #region-picker .region-johto{display:grid;grid-template-columns:120px minmax(0,1fr)}
  #region-picker .region-johto .region-art{min-height:64px;border-bottom:0;border-right:3px solid #5d6770}
  #region-picker .region-johto .region-lock,#region-picker .region-johto .region-plate{display:none}
  #region-picker .region-friend{width:calc(100% - 24px);margin:0 12px 12px}}
/* Móvil pequeño en vertical: todo cabe sin desplazar. */
@media (max-width:560px) and (max-height:760px){
  #region-picker .region-kicker{display:none}#region-picker .region-picker-head{padding:8px 10px 8px 12px}
  #region-picker .region-kanto .region-art{aspect-ratio:auto;height:min(calc((100vw - 46px)*.75),calc(100dvh - 330px))}
  #region-picker .region-johto .region-art{min-height:52px}#region-picker .region-friend{min-height:46px}}
/* Móvil en horizontal (poca altura): Kanto a la izquierda, tan alto como quepa; Johto a la derecha. */
@media (max-height:520px) and (min-width:561px){
  #region-picker{width:min(760px,calc(100vw - 16px));max-height:calc(100dvh - 12px)}
  #region-picker .region-picker-head{padding:6px 10px 6px 12px}#region-picker .region-kicker{display:none}#region-picker h2{font-size:18px}#region-picker .region-ball{width:24px;height:24px}#region-picker .region-close{width:36px;height:36px;min-height:0;font-size:20px}
  #region-picker .region-options{grid-template-columns:auto minmax(0,1fr);gap:10px;padding:8px 12px}
  #region-picker .region-kanto .region-art{height:clamp(110px,calc(100dvh - 210px),300px);width:auto}
  #region-picker .region-card-foot{padding:6px 10px;font-size:14px}#region-picker .region-cta small{font-size:11px}
  #region-picker .region-go{width:32px;height:32px}#region-picker .region-soon{width:30px;height:30px}#region-picker .region-lock{width:32px;height:32px;right:8px;top:8px}
  #region-picker .region-plate b{font-size:16px}#region-picker .region-plate{padding:4px 7px 3px}
  #region-picker .region-friend{margin:0 12px 8px;width:calc(100% - 24px);min-height:42px;font-size:13px}#region-picker .region-friend-core{padding:3px 12px 3px 6px}}
@media (prefers-reduced-motion:reduce){#region-picker .region-shine,#region-picker .region-go,#region-picker .region-ball,#region-picker .region-friend-ball{animation:none}}