/* PokéRiesgo · v0.14.0 · Ventanas al estilo de Rojo Fuego / Verde Hoja (GBA).
 * Cajas blancas con marco redondeado de dos tonos, texto negro pixelado con su sombra clara y el cursor ▶ en la opción
 * señalada. Se aplica al aprendizaje (subir de nivel), al registro de botín (cofres, guaridas, mochilas) y a cualquier
 * caja con la clase .frlg. Solo estilo: no cambia controles (teclas 1-3, E, Esc y táctil siguen igual). */
:root{--fr-ink:#383840;--fr-ink-2:#606068;--fr-shade:#d0d0c8;--fr-paper:#f8f8f8;--fr-paper-2:#e8f0f8;--fr-frame:#4a5878;--fr-frame-in:#9cc0e0;--fr-dark:#202838;--fr-sel:#e4eef8}

/* ---------------------------------------------------------------- caja base */
#modal[data-panel=choices] .dialog,.search,.frlg{--text:var(--fr-ink);--muted:var(--fr-ink-2);--dim:#8a8a90;--line:#c8d0d8;--line-2:#a8b4c0;--accent:#e05838;--accent-2:#c84828;
  background:var(--fr-paper);color:var(--fr-ink);border:3px solid var(--fr-frame);border-radius:10px;
  box-shadow:inset 0 0 0 2px var(--fr-frame-in),inset 0 0 0 4px var(--fr-paper),0 0 0 2px var(--fr-dark),0 6px 0 2px rgba(0,0,0,.35);
  -webkit-backdrop-filter:none;backdrop-filter:none;font-family:Pixel,var(--ui);text-shadow:1px 1px 0 var(--fr-shade);image-rendering:pixelated}
#modal[data-panel=choices] .dialog::before,.search::before,.frlg::before{display:none}
#modal[data-panel=choices]{background:rgba(16,24,40,.55)}

/* ---------------------------------------------------------------- aprendizaje */
#modal[data-panel=choices] .dialog{width:min(900px,100%);padding:16px 18px 14px}
#modal[data-panel=choices] .dialog-head{border-bottom:0;margin:0 0 10px;padding:0;gap:10px;align-items:stretch}
#modal[data-panel=choices] .dialog-head>div{position:relative;padding:8px 12px 9px;background:linear-gradient(180deg,#f0a048,#e07828);border:2px solid #803818;border-radius:6px;box-shadow:inset 0 2px 0 #f8c878,inset 0 -2px 0 #c06020;text-shadow:1px 1px 0 #903810}
#modal[data-panel=choices] .eyebrow{font:12px/1 Pixel,var(--ui);letter-spacing:.06em;color:#fff4d8}
#modal[data-panel=choices] .dialog h2{font:22px/1.15 Pixel,var(--ui);color:#ffffff;margin:4px 0 0}
#modal[data-panel=choices] .dialog-sub{font:13px/1.35 Pixel,var(--ui);color:#fff0d0;margin:4px 0 0}
#modal[data-panel=choices] .dialog-head .close,.search header button,.frlg .close{align-self:flex-start;background:var(--fr-paper);color:var(--fr-ink);border:2px solid var(--fr-frame);border-radius:6px;box-shadow:inset 0 0 0 1px var(--fr-frame-in);font:13px Pixel,var(--ui);text-shadow:1px 1px 0 var(--fr-shade);padding:5px 9px}
#modal[data-panel=choices] .dialog-head .close kbd,.frlg kbd{background:#fff;color:var(--fr-ink-2);border-color:#b0b8c0;text-shadow:none}
.choice-progress{font:13px Pixel,var(--ui)}
#modal[data-panel=choices] .choice-progress{background:var(--fr-paper-2);border:2px solid var(--fr-frame-in);border-left-width:2px;border-radius:6px;color:var(--fr-ink);margin:0 0 10px;padding:6px 10px}
#modal[data-panel=choices] .choices{gap:6px}
/* Cada opción es una línea de menú: marco fino, insignia de tipo y el cursor ▶ al señalarla. */
#modal[data-panel=choices] .choice{background:#ffffff;border:2px solid var(--fr-frame-in);border-left-width:2px;border-radius:6px;padding:10px 12px 10px 28px;min-width:0;min-height:112px;overflow-wrap:anywhere;color:var(--fr-ink);text-shadow:1px 1px 0 var(--fr-shade);box-shadow:none}
#modal[data-panel=choices] .choice::before{content:"▶";position:absolute;left:9px;top:12px;font:14px/1 Pixel,var(--ui);color:var(--fr-ink);opacity:0;transform:translateX(-3px);transition:opacity .08s,transform .08s}
#modal[data-panel=choices] .choice:is(:hover,:focus-visible):not(:disabled){background:var(--fr-sel);border-color:var(--fr-frame);color:var(--fr-ink)}
#modal[data-panel=choices] .choice:is(:hover,:focus-visible):not(:disabled)::before{opacity:1;transform:none;animation:fr-cursor .5s steps(2) infinite}
@keyframes fr-cursor{50%{transform:translateX(2px)}}
#modal[data-panel=choices] .choice .kind{align-self:flex-start;font:11px/1 Pixel,var(--ui);letter-spacing:.04em;color:#fff;background:var(--c,#7890a8);border:1px solid rgba(0,0,0,.35);border-radius:4px;padding:3px 6px 2px;text-shadow:1px 1px 0 rgba(0,0,0,.35)}
#modal[data-panel=choices] .choice strong{font:18px/1.2 Pixel,var(--ui);color:var(--fr-ink)}
#modal[data-panel=choices] .choice small{font:13px/1.4 Pixel,var(--ui);color:var(--fr-ink-2)}
#modal[data-panel=choices] .choice-meta{font:12px Pixel,var(--ui);color:#787880}
#modal[data-panel=choices] .choice kbd{top:8px;right:8px}
#modal[data-panel=choices] .choice.mega{--c:#9050c8;background:linear-gradient(180deg,#f6eefe,#ffffff 60%);border-color:#c8a8e8}
#modal[data-panel=choices] .choice.mega:is(:hover,:focus-visible):not(:disabled){background:linear-gradient(180deg,#eadcfa,#f4eefc);border-color:#7838b0}
#modal[data-panel=choices] .choice.ult{--c:#c89018;background:linear-gradient(180deg,#fff6dc,#ffffff 60%);border-color:#e8d090}
#modal[data-panel=choices] .choice.eternal{--c:#3888a0}
#modal[data-panel=choices] .choice.active{--c:#d06830}#modal[data-panel=choices] .choice.passive{--c:#489838}#modal[data-panel=choices] .choice.talent{--c:#3870b8}
#modal[data-panel=choices] .dialog-actions{border-top:0;padding-top:4px;margin-top:10px}
#modal[data-panel=choices] .dialog-actions button,.search footer button,.frlg .dialog-actions button{background:var(--fr-paper);color:var(--fr-ink);border:2px solid var(--fr-frame);border-radius:6px;box-shadow:inset 0 0 0 1px var(--fr-frame-in),0 2px 0 var(--fr-dark);font:14px Pixel,var(--ui);text-shadow:1px 1px 0 var(--fr-shade)}
#modal[data-panel=choices] .dialog-actions button:hover:not(:disabled),.search footer button:hover:not(:disabled){background:var(--fr-sel);color:var(--fr-ink)}

/* ---------------------------------------------------------------- registro de botín (cofres, guaridas, mochilas) */
.search{padding:10px 10px 9px;gap:4px}
.search header{position:relative;border-bottom:0;margin:0 0 4px;padding:6px 8px 6px 30px;background:linear-gradient(180deg,#e85848,#c83020);border:2px solid #701810;border-radius:6px;box-shadow:inset 0 2px 0 #f89080,inset 0 -2px 0 #a02818;cursor:grab}
/* Poké Ball del título. */
.search header::before{content:"";position:absolute;left:8px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:linear-gradient(180deg,#f04030 0 46%,#202020 46% 58%,#f8f8f8 58%);box-shadow:0 0 0 1.5px #202020}
.search header::after{content:"";position:absolute;left:13px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#f8f8f8;box-shadow:0 0 0 1.5px #202020}
.search header strong{font:15px/1.15 Pixel,var(--ui);color:#fff;text-shadow:1px 1px 0 #801810}
.search header .bw-grip{filter:brightness(2.5)}
.search.explorer-search{border-color:var(--fr-frame);box-shadow:inset 0 0 0 2px #e8c870,inset 0 0 0 4px var(--fr-paper),0 0 0 2px var(--fr-dark),0 6px 0 2px rgba(0,0,0,.35)}
.search.explorer-search header{background:linear-gradient(180deg,#5880c8,#3860a8);border-color:#203868;box-shadow:inset 0 2px 0 #90b0e8,inset 0 -2px 0 #305090;border-bottom:2px solid #203868}
.search.explorer-search header strong{color:#fff;font:15px Pixel,var(--ui);text-shadow:1px 1px 0 #203868}
.search-row{position:relative;background:#ffffff;border:2px solid #d8e0e8;border-left:6px solid var(--r);border-radius:5px;color:var(--fr-ink);font:13px Pixel,var(--ui);padding:5px 8px 5px 18px;text-shadow:1px 1px 0 var(--fr-shade)}
.search-row::before{content:"▶";position:absolute;left:5px;top:50%;margin-top:-6px;font:11px/1 Pixel,var(--ui);color:var(--fr-ink);opacity:0}
button.search-row:is(:hover,:focus-visible):not(:disabled){background:var(--fr-sel);border-color:var(--fr-frame-in);border-left-color:var(--r);color:var(--fr-ink)}
button.search-row:is(:hover,:focus-visible):not(:disabled)::before{opacity:1;animation:fr-cursor .5s steps(2) infinite}
.search-row b{font-weight:400;color:var(--fr-ink)}
.search-entry.rarity-common .search-row b{color:var(--fr-ink)}
.search-row small{font:11px Pixel,var(--ui);color:var(--fr-ink-2)}
.search-row em{font:11px/1 Pixel,var(--ui);color:#fff;background:#e05838;border:1px solid #902818;border-radius:3px;padding:3px 5px 2px;text-shadow:1px 1px 0 rgba(0,0,0,.3)}
.search-entry.rarity-epic .search-row,.search-entry.rarity-legendary .search-row{background:linear-gradient(90deg,color-mix(in srgb,var(--r) 22%,#fff),#fff 75%)}
.search-row.hidden{background:#f0f0f0;color:#909098;border-left-color:#c0c0c8}
.search-q{font:15px Pixel,var(--ui);color:#a0a0a8}
.search-row.searching .search-q{color:#e05838}
.search-bar{height:4px;background:#d8e0e8;border-radius:2px}
.search-bar b{background:linear-gradient(90deg,#48c048,#70e070);border-radius:2px}
.swap-list{border-left:2px dotted #a8b4c0}
.swap-list small{font:11px Pixel,var(--ui);color:var(--fr-ink-2)}
.swap-list button{background:#fff;color:var(--fr-ink);border:2px solid #d8e0e8;border-left:4px solid var(--r);border-radius:4px;font:12px Pixel,var(--ui)}
.search footer{border-top:2px dotted #c0c8d0}
.search footer small{font:11px Pixel,var(--ui);color:var(--fr-ink-2)}
.search footer kbd{background:#fff;color:var(--fr-ink-2);border-color:#b0b8c0;text-shadow:none}
.search p{font:13px Pixel,var(--ui);color:var(--fr-ink-2)}
@media (prefers-reduced-motion:reduce){#modal[data-panel=choices] .choice::before,.search-row::before{animation:none!important}}

/* ---------------------------------------------------------------- v0.19.1 · aprender sin parar
 * La ventana de aprendizaje ya no tapa la partida ni te para: no oscurece la pantalla, deja pasar los toques y clics
 * al mundo y se coloca donde no estorba (PC: a la derecha, bajo el minimapa; móvil horizontal: arriba en el centro;
 * móvil vertical: arriba). Sigues moviéndote y disparando mientras eliges con 1-3, clic o toque. */
#modal[data-panel=choices]{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;justify-content:flex-end;align-items:flex-start;padding:272px 14px 0 0;overflow:visible}
#modal[data-panel=choices] .dialog{pointer-events:auto;margin:0;width:350px;max-width:calc(100vw - 28px);max-height:calc(100vh - 272px - 14px);overflow:auto;padding:9px 9px 8px;animation:fr-learn-in .18s ease-out}
@keyframes fr-learn-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
#modal[data-panel=choices] .dialog-head{margin:0 0 6px;gap:6px}
#modal[data-panel=choices] .dialog-head>div{padding:6px 10px 7px}
#modal[data-panel=choices] .eyebrow{font-size:10px}
#modal[data-panel=choices] .dialog h2{font-size:17px;margin-top:3px}
#modal[data-panel=choices] .dialog-sub{font-size:11px;margin-top:3px}
#modal[data-panel=choices] .dialog-head .close{min-width:34px;min-height:34px;padding:2px 8px}
#modal[data-panel=choices] .choice-progress{display:none}
#modal[data-panel=choices] .choices{grid-template-columns:1fr;gap:6px}
/* Cada opción, una línea de menú compacta: icono a la izquierda y el texto al lado. */
#modal[data-panel=choices] .choice{min-height:0;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:start;padding:8px 26px 8px 24px}
#modal[data-panel=choices] .choice>*{grid-column:2}
#modal[data-panel=choices] .choice .choice-icon{grid-column:1;grid-row:1/span 3;height:30px;align-self:start;margin-top:2px}
#modal[data-panel=choices] .choice .choice-icon :is(img,svg){width:30px;height:30px}
#modal[data-panel=choices] .choice::before{top:50%;margin-top:-7px;left:7px}
#modal[data-panel=choices] .choice .kind{font-size:9px;padding:2px 5px 1px;justify-self:start}
#modal[data-panel=choices] .choice strong{font-size:15px;line-height:1.15}
#modal[data-panel=choices] .choice small{font-size:12px;line-height:1.35}
#modal[data-panel=choices] .choice-meta{font-size:10px}
#modal[data-panel=choices] .choice kbd{top:6px;right:6px}
#modal[data-panel=choices] .choice .pr-advice{font-size:11px}
#modal[data-panel=choices] .dialog-actions{margin-top:6px;padding-top:0;justify-content:flex-end}
#modal[data-panel=choices] .dialog-actions button{min-height:32px;padding:4px 10px;font-size:12px}
/* Mientras eliges, los avisos no se ponen encima. */
body:has(#modal[data-panel=choices]:not([hidden])) #hud-notices #toast{visibility:hidden}
@media(prefers-reduced-motion:reduce){#modal[data-panel=choices] .dialog{animation:none}}

/* Móvil en horizontal: arriba en el centro, entre tu vida y el minimapa; las opciones una al lado de otra.
 * Los joysticks, las pociones y las habilidades quedan libres. */
@media(orientation:landscape){
  body.touch #modal[data-panel=choices]{justify-content:center;align-items:flex-start;padding:max(4px,env(safe-area-inset-top)) 0 0}
  body.touch #modal[data-panel=choices] .dialog{width:min(470px,calc(100vw - 400px));min-width:min(330px,calc(100vw - 16px));max-height:62vh;padding:6px 6px 5px;animation-name:fr-learn-drop}
  body.touch #modal[data-panel=choices] .dialog-head{margin:0 0 5px;align-items:center}
  body.touch #modal[data-panel=choices] .dialog-head>div{padding:4px 8px 5px}
  body.touch #modal[data-panel=choices] .eyebrow{font-size:8px}
  body.touch #modal[data-panel=choices] .dialog h2{font-size:13px;margin-top:2px}
  body.touch #modal[data-panel=choices] .dialog-head .close{min-width:38px;min-height:38px}
  body.touch #modal[data-panel=choices] .choices{grid-template-columns:repeat(var(--choice-count,3),minmax(0,1fr));gap:5px}
  body.touch #modal[data-panel=choices] .choice{display:flex;flex-direction:column;gap:2px;padding:6px 6px 6px}
  body.touch #modal[data-panel=choices] .choice::before{display:none}
  body.touch #modal[data-panel=choices] .choice .choice-icon{height:22px;align-self:flex-start}
  body.touch #modal[data-panel=choices] .choice .choice-icon :is(img,svg){width:22px;height:22px}
  body.touch #modal[data-panel=choices] .choice .kind,body.touch #modal[data-panel=choices] .choice-meta,body.touch #modal[data-panel=choices] .choice .pr-advice{display:none}
  body.touch #modal[data-panel=choices] .choice strong{font-size:12px;line-height:1.15}
  body.touch #modal[data-panel=choices] .choice small{font-size:10.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  body.touch #modal[data-panel=choices] .dialog-actions{display:none}
}
/* Móvil en vertical: arriba, bajo tu vida; las opciones una debajo de otra. Tu Pokémon y los joysticks se siguen viendo. */
@media(orientation:portrait){
  body.touch #modal[data-panel=choices]{justify-content:center;align-items:flex-start;padding:max(58px,calc(env(safe-area-inset-top) + 52px)) 8px 0}
  body.touch #modal[data-panel=choices] .dialog{width:100%;max-height:46vh;padding:6px 6px 5px;animation-name:fr-learn-drop}
  body.touch #modal[data-panel=choices] .dialog-head{margin:0 0 5px;align-items:center}
  body.touch #modal[data-panel=choices] .dialog-head>div{padding:4px 8px 5px}
  body.touch #modal[data-panel=choices] .eyebrow{font-size:8px}
  body.touch #modal[data-panel=choices] .dialog h2{font-size:14px}
  body.touch #modal[data-panel=choices] .dialog-head .close{min-width:40px;min-height:40px}
  body.touch #modal[data-panel=choices] .choices{grid-template-columns:1fr;gap:5px}
  body.touch #modal[data-panel=choices] .choice{padding:7px 8px 7px 8px;grid-template-columns:26px minmax(0,1fr)}
  body.touch #modal[data-panel=choices] .choice::before{display:none}
  body.touch #modal[data-panel=choices] .choice .choice-icon :is(img,svg){width:26px;height:26px}
  body.touch #modal[data-panel=choices] .choice .kind,body.touch #modal[data-panel=choices] .choice-meta{display:none}
  body.touch #modal[data-panel=choices] .choice strong{font-size:13px}
  body.touch #modal[data-panel=choices] .choice small{font-size:11px;line-height:1.3}
  body.touch #modal[data-panel=choices] .choice .pr-advice{font-size:10px}
  body.touch #modal[data-panel=choices] .dialog-actions{display:none}
}
@keyframes fr-learn-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* v0.19.8 · Registro de botín y bolsas como la lista de la Mochila de Rojo Fuego: banda roja con Poké Ball,
   lista en una hoja con separadores de puntos, cursor ▶ siempre visible y «Coger todo» como botón azul. */
.search header{min-height:36px;align-items:center;padding:3px 4px 3px 30px}
.search header strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search>header .ui-close{flex:0 0 30px!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;max-height:30px!important;
  border-radius:6px!important;border-color:#701810!important;color:#701810!important;background:#fff8f0!important;box-shadow:inset 0 0 0 1px #f8b0a0,0 2px 0 #701810!important}
.search>header .ui-close::before,.search>header .ui-close::after{width:14px!important;height:3px!important}
.search-contents{gap:0;padding:2px 3px;background:#fff;border:2px solid var(--fr-frame-in);border-radius:6px;box-shadow:inset 0 0 0 2px var(--fr-paper-2)}
.search-contents>.search-entry+.search-entry .search-row,.search-contents>.search-row+.search-row{border-top:2px dotted #c8d0d8}
.search-row{border:0;border-radius:0;background:transparent;box-shadow:inset 4px 0 0 var(--r);padding:5px 6px 5px 20px;min-height:40px}
.search-entry.rarity-common .search-row{box-shadow:inset 4px 0 0 #c0c8d0}
.search-entry.rarity-epic .search-row,.search-entry.rarity-legendary .search-row{background:linear-gradient(90deg,color-mix(in srgb,var(--r) 18%,#fff),#fff 70%)}
button.search-row:is(:hover,:focus-visible):not(:disabled){border-color:transparent;border-top-color:#c8d0d8;background:var(--fr-sel)}
.search-contents>.search-entry:first-child button.search-row:not(:disabled)::before{opacity:1;animation:fr-cursor .5s steps(2) infinite}
.search-contents:has(button.search-row:is(:hover,:focus-visible)) .search-entry:first-child button.search-row:not(:hover):not(:focus-visible)::before{opacity:0;animation:none}
.search footer{border-top:0;padding-top:5px}
.search footer button[data-all]{background:linear-gradient(180deg,#5880c8,#3860a8);color:#fff;border:2px solid #203868;border-radius:6px;box-shadow:inset 0 2px 0 #90b0e8,inset 0 -2px 0 #305090,0 2px 0 #202838;text-shadow:1px 1px 0 #203868}
.search footer button[data-all]:hover:not(:disabled){background:linear-gradient(180deg,#6890d8,#4870b8);color:#fff}
.search footer button[data-all]:disabled{background:#c8d0d8;border-color:#8890a0;box-shadow:none;color:#f8f8f8;text-shadow:none}
.search footer button[data-all] kbd{background:#fff;color:#3860a8;border-color:#203868}
body.touch .search footer{flex-wrap:nowrap}
body.touch .search footer button[data-all]{min-height:40px}
body.touch .search footer small{font-size:10px}
@media (prefers-reduced-motion:reduce){.search-contents>.search-entry:first-child button.search-row::before{animation:none!important}}
/* El botón de la lupa del minimapa nunca va encima de una ventana abierta. */
body:has(#search-panel:not([hidden])) #a11y-mapzoom,body:has(#bag-window:not([hidden])) #a11y-mapzoom{visibility:hidden}