/* Base */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;font-size:14px}
img{max-width:100%}
/* Layout: consola horizontal tipo portátil de 32 bits; la pantalla es un mundo de colores fijos, la página sigue el tema. */
:root{
  --page:#d9e3d6; --page-ink:#1f3324; --page-soft:#4e6653;
  --shell:#004612; --shell-hi:#0f5a24; --shell-lo:#003a0f; --lime:#92c100; --orange:#fe7a02; --plum:#703873; --lav:#c8bffa; --sand:#f5e3cf; --olive:#82690a;
  --f-display:"Silkscreen", "Press Start 2P", ui-monospace, "Courier New", monospace;
  /* pixelada pero bien legible: DotGothic16 (letras y números claros, con tildes y eñes) para todo menos el logo */
  --f-ui:"DotGothic16", "Pixelify Sans", ui-monospace, monospace;
  --f-label:"DotGothic16", "Pixelify Sans", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --page:#0d1a11; --page-ink:#dfe9dc; --page-soft:#9fb3a2; color-scheme:dark } }
:root[data-theme="dark"]{ --page:#0d1a11; --page-ink:#dfe9dc; --page-soft:#9fb3a2; color-scheme:dark }
[hidden]{display:none!important}
html,body{background:var(--page);color:var(--page-ink)}
body{font-family:var(--f-ui);padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:18px 28px}
.wrap{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

/* ===== Carcasa ===== */
.gba{position:relative;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;align-items:center}
.shell{position:relative;z-index:2;width:min(100%, calc((100svh - 120px) * 4 / 3 + 56px));min-width:min(100%, 340px);
  background:linear-gradient(172deg,var(--shell-hi) 0%,var(--shell) 45%,var(--shell-lo) 100%);border-radius:30px 30px 26px 26px;padding:16px 22px 12px;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.12), inset 0 -8px 0 rgba(0,0,0,.25), 0 14px 30px rgba(0,40,10,.28)}
.bezel{background:#151d18;border-radius:12px 12px 22px 22px;padding:9px 12px 12px;box-shadow:inset 0 2px 8px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:7px}
.bezel-top{display:flex;align-items:center;gap:8px;font-family:var(--f-label);font-weight:700;font-size:10px;letter-spacing:.14em;color:#7f9b86}
.bezel-top .grow{flex:1;height:2px;background:linear-gradient(90deg,var(--plum),var(--orange),var(--lime));opacity:.7}
.led{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.shellBar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 4px 0}
.brand{font-family:var(--f-display);color:var(--lime);font-size:11px;letter-spacing:.1em}
.brand span{color:var(--sand)}
.brand em{font-style:normal;color:var(--lav);font-size:8px;margin-left:6px}
.toggle{display:flex;align-items:center;gap:8px;font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.1em;color:#1c2b20;background:var(--lime);border:none;border-radius:20px;padding:8px 14px;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.toggle i{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #1c2b20;transition:transform .2s}
.toggle[aria-expanded="true"] i{transform:rotate(180deg)}
.toggle:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.bar-r{display:flex;gap:8px;align-items:center}
.toggle.snd{background:var(--sand);gap:6px;padding:8px 12px}
.toggle.snd .ico{display:inline-block;width:12px;height:10px;background:linear-gradient(#1c2b20,#1c2b20) 0 3px/4px 4px no-repeat;position:relative}
.toggle.snd .ico::before{content:"";position:absolute;left:3px;top:0;border-right:6px solid #1c2b20;border-top:5px solid transparent;border-bottom:5px solid transparent}
.toggle.snd[aria-pressed="false"]{background:#6b7a70;color:#e9efe9}
.toggle.snd[aria-pressed="false"] .ico{opacity:.7}
.toggle.snd[aria-pressed="false"] .ico::after{content:"";position:absolute;left:-2px;top:4px;width:17px;height:2px;background:#e9efe9;transform:rotate(-40deg)}
.toggle.snd[aria-pressed="false"] b{text-decoration:line-through}
.screen{position:relative;width:100%;aspect-ratio:4/3;container-type:inline-size;overflow:hidden;background:#0d1410;border-radius:2px;touch-action:manipulation}
#cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.drawer{position:relative;z-index:1;width:min(92%, 720px);display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;margin-top:-14px}
.drawer.open{grid-template-rows:1fr}
.gba.padOpen .shell{width:min(100%, calc((100svh - 330px) * 4 / 3 + 56px))}
.shell{transition:width .3s ease}
.drawerIn{overflow:hidden;min-height:0}
.pad{background:linear-gradient(180deg,var(--shell-lo),var(--shell) 30%,var(--shell-lo));border-radius:0 0 70px 70px / 0 0 50px 50px;padding:30px 26px 26px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.25), 0 12px 24px rgba(0,40,10,.22)}
.mid{display:flex;flex-direction:column;align-items:center;gap:16px}
.shoulders{display:flex;gap:12px}
.sh{width:64px;height:28px;border:none;background:linear-gradient(#2c7444,#0d4520);color:#cfe6cf;font-family:var(--f-label);font-weight:700;font-size:11px;cursor:pointer;border-radius:14px 14px 8px 8px;box-shadow:inset 0 3px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.3);touch-action:none}
/* Cruceta */
.dpad{position:relative;width:132px;height:132px;touch-action:none;cursor:pointer;perspective:320px;flex:none}
.dpad::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.28),rgba(0,0,0,.12) 65%,transparent 72%)}
.cross{position:absolute;inset:0;transition:transform .05s;transform-style:preserve-3d}
.cross::before,.cross::after{content:"";position:absolute;background:#1b2420;border-radius:7px;box-shadow:inset 0 -5px 0 #0a0f0c, inset 0 2px 0 #3a4741}
.cross::before{left:33%;top:0;width:34%;height:100%}.cross::after{top:33%;left:0;height:34%;width:100%}
.cross i{position:absolute;width:0;height:0;border:7px solid transparent;z-index:1}
.cross .u{left:50%;top:9%;margin-left:-7px;border-bottom-color:#5c6d63;border-top:0}
.cross .d{left:50%;bottom:9%;margin-left:-7px;border-top-color:#5c6d63;border-bottom:0}
.cross .l{top:50%;left:9%;margin-top:-7px;border-right-color:#5c6d63;border-left:0}
.cross .r{top:50%;right:9%;margin-top:-7px;border-left-color:#5c6d63;border-right:0}
.cross b{position:absolute;left:41%;top:41%;width:18%;height:18%;border-radius:50%;background:#141b17;z-index:1}
.dpad[data-dir="up"] .cross{transform:rotateX(16deg)}.dpad[data-dir="down"] .cross{transform:rotateX(-16deg)}
.dpad[data-dir="left"] .cross{transform:rotateY(-16deg)}.dpad[data-dir="right"] .cross{transform:rotateY(16deg)}
.dpad[data-dir="up"] .u{border-bottom-color:var(--lime)}.dpad[data-dir="down"] .d{border-top-color:var(--lime)}
.dpad[data-dir="left"] .l{border-right-color:var(--lime)}.dpad[data-dir="right"] .r{border-left-color:var(--lime)}
.sys{display:flex;gap:12px}
.pill{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:var(--f-label);font-weight:700;font-size:9px;letter-spacing:.1em;color:#b9d2bd;touch-action:none;padding:4px}
.pill::before{content:"";width:40px;height:11px;border-radius:8px;background:#1b2420;box-shadow:inset 0 -3px 0 #0a0f0c;transform:rotate(-20deg)}
.ab{display:flex;gap:16px;align-items:center;transform:rotate(-20deg);padding-right:6px}
.ab button{position:relative;width:64px;height:64px;border-radius:50%;border:none;font-family:var(--f-display);font-size:14px;color:#fff;cursor:pointer;touch-action:none;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.28), 0 4px 0 rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.ab .b{background:var(--plum);margin-top:36px}.ab .a{background:var(--orange)}
.gba button.on{filter:brightness(1.2)}
.ab button.on{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.2)}
.sh.on{transform:translateY(2px)}
.pill.on::before{background:#2c3a33}
.gba button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.help{font-size:15px;line-height:1.55;color:var(--page-soft);max-width:72ch;margin:0 auto;text-wrap:pretty}
.help b{color:var(--page-ink);font-weight:600}
.ctrlInfo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;width:100%}
.ctrlInfo.open{grid-template-rows:1fr}
.ctrlIn{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:14px}
.keys{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:14px;color:var(--page-soft)}
.keys kbd{font-family:var(--f-label);font-weight:700;font-size:11px;background:var(--page-ink);color:var(--page);padding:3px 6px;border-radius:4px;margin-right:4px}
@media (max-width:560px){
  .shell{padding:10px 10px 10px;border-radius:22px}
  .bezel{padding:7px 7px 9px}
  .drawer{width:100%;margin-top:-10px}
  .pad{padding:24px 14px 22px 10px;gap:4px;border-radius:0 0 46px 46px / 0 0 34px 34px}
  .mid{min-width:0;gap:12px}
  .dpad{width:108px;height:108px}
  .ab{gap:10px;padding-right:4px}
  .ab button{width:52px;height:52px;font-size:12px}.ab .b{margin-top:28px}
  .sh{width:42px}.shoulders{gap:8px}
  .sys{gap:4px}.pill::before{width:30px}
  .brand em{display:none}
  .toggle.snd b{display:none}.toggle.snd{padding:8px 10px}
}
@media (max-width:380px){
  .dpad{width:96px;height:96px}
  .ab button{width:46px;height:46px}.ab .b{margin-top:24px}
  .sh{width:36px}
}
/* ===== Celular en vertical: la pantalla de borde a borde arriba y los controles grandes abajo, al alcance del pulgar ===== */
@media (max-width:560px) and (orientation:portrait){
  body{padding:0}
  .wrap{gap:0;max-width:none}
  .gba{height:100svh;min-height:560px}
  /* la pantalla: entre 4:3 y un poco más alta (hasta 1,25 de alto por 1 de ancho), según lo que dejan los controles */
  .shell,.gba.padOpen .shell{flex:none;width:100%;min-width:0;border-radius:0 0 22px 22px;padding:max(6px, env(safe-area-inset-top, 0px)) 6px 8px}
  .bezel{padding:4px;border-radius:4px 4px 12px 12px}
  .screen{aspect-ratio:auto;height:clamp(calc((100vw - 20px) * .8), calc(100svh - 385px), calc((100vw - 20px) * 1.25))}
  .bezel-top{display:none}
  .shellBar{padding:8px 8px 0}
  /* los controles llenan lo que queda y se centran: ni pegados a la pantalla ni contra el borde de abajo */
  .drawer,.drawer.open{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;margin-top:-14px}
  .drawerIn{flex:1;display:flex;flex-direction:column;overflow:visible}
  .pad{flex:1;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-template-areas:"mid mid" "dpad ab";gap:clamp(12px, 3svh, 26px) 6px;align-content:center;
    border-radius:0 0 54px 54px / 0 0 40px 40px;padding:20px 20px calc(clamp(40px, 8svh, 84px) + env(safe-area-inset-bottom, 0px)) 20px}
  .pad .mid{grid-area:mid;flex-direction:row;justify-content:space-between;width:100%;align-self:start}
  .pad .dpad{grid-area:dpad;align-self:end;justify-self:start}
  .pad .ab{grid-area:ab;align-self:center;justify-self:end;margin-bottom:6px}
  .dpad{width:156px;height:156px}
  .cross i{border-width:9px}.cross .u,.cross .d{margin-left:-9px}.cross .l,.cross .r{margin-top:-9px}
  .shoulders{gap:10px}.sh{width:58px;height:34px;font-size:13px}
  .sys{gap:8px}.pill{font-size:10px}.pill::before{width:38px;height:13px}
  .ab{gap:12px}
  .ab button{width:78px;height:78px;font-size:17px}.ab .b{margin-top:44px}
}
@media (max-width:380px) and (orientation:portrait){
  .dpad{width:132px;height:132px}
  .ab button{width:66px;height:66px;font-size:15px}.ab .b{margin-top:36px}
  .sh{width:44px}
}
/* ======= Interfaz dentro de la pantalla (colores fijos del juego) =======
   Mismo lenguaje que la ficha de personajes: papel crema, tinta índigo, tipografía pixel y sombras duras. */
.screen{--ink:#2b2540;--paper:#fbf8ef;--paper2:#f1ead9;--rule:#ddd2bb;--g-plum:#7d4c7b;--g-lime:#9bc23c;--g-orange:#ea8a35;--g-lav:#cbc2ef}
.screen *{box-sizing:border-box}
.ui{position:absolute;font-synthesis:none;font-family:var(--f-ui);color:var(--ink);font-size:3.7cqw;line-height:1.3;letter-spacing:.01em}
.box{background:var(--paper);border:.6cqw solid var(--ink);border-radius:.8cqw;box-shadow:inset 0 0 0 .35cqw var(--paper), inset 0 0 0 .6cqw var(--rule), .7cqw .7cqw 0 rgba(43,36,72,.32)}
.dlg{left:1.5%;right:1.5%;bottom:1.5cqw;height:21.75cqw;display:flex;gap:2.4cqw;align-items:stretch;padding:2cqw 3cqw 3.2cqw;cursor:pointer;z-index:20}
.dlg img{height:100%;max-height:22cqw;align-self:center;aspect-ratio:1;image-rendering:auto;border:.45cqw solid var(--ink);border-radius:.5cqw;flex:none;background:#efe5d1;box-shadow:inset 0 -1.2cqw 0 #e4d7bb}
.dlgBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5cqw;overflow:hidden}
.dlgName{font-family:var(--f-label);font-weight:700;font-size:3cqw;color:var(--g-plum);letter-spacing:.08em;text-transform:uppercase}
.dlgText{font-size:3.75cqw;line-height:1.3;font-weight:500;letter-spacing:.015em;overflow-wrap:normal;word-break:normal;hyphens:none}
.dlgText .ghost{visibility:hidden}
.dlg.battle{background:#2e2a48;border-color:var(--paper2);box-shadow:inset 0 0 0 .35cqw #2e2a48, inset 0 0 0 .6cqw #5a5480, .7cqw .7cqw 0 rgba(20,16,36,.4)}
.dlg.battle .dlgText{color:var(--paper);text-shadow:0 .3cqw 0 rgba(0,0,0,.35)}
.more{position:absolute;right:2.6cqw;bottom:1cqw;color:var(--g-orange);font-size:2.6cqw;animation:bob .7s steps(2) infinite}
@keyframes bob{50%{transform:translateY(.6cqw)}}
.choice{right:2%;bottom:24.75cqw;min-width:36%;max-width:62%;padding:1.6cqw 2.4cqw;z-index:40;display:flex;flex-direction:column;gap:.4cqw;max-height:66%;overflow:hidden}
.choice div,.plist li{position:relative;padding:.5cqw 0 .5cqw 3.6cqw;cursor:pointer;font-weight:600;white-space:nowrap}
.choice div.sel::before,.plist li.sel::before,.grid div.sel::before{content:"";position:absolute;left:.4cqw;top:50%;margin-top:-1.1cqw;border-left:1.8cqw solid var(--g-orange);border-top:1.1cqw solid transparent;border-bottom:1.1cqw solid transparent}
.choice div.off{color:#a39c90}
.choice div{white-space:normal}
.choice.dense{font-size:3.15cqw;gap:0;max-width:72%}
.choice.dense div{padding-top:.3cqw;padding-bottom:.3cqw}
.choice.tall{top:2%;bottom:auto;max-height:96%;gap:0}
.grid{z-index:30;padding:1.6cqw 2cqw;display:grid;gap:1.2cqw 1.6cqw;align-content:center;background:#2e2a48;border:.6cqw solid var(--paper2);border-radius:.8cqw;box-shadow:inset 0 0 0 .35cqw #2e2a48, inset 0 0 0 .6cqw #5a5480, .7cqw .7cqw 0 rgba(20,16,36,.4)}
.grid.act{right:1.5%;bottom:1.5cqw;width:48%;height:21.75cqw;grid-template-columns:1fr 1fr}
.grid.fight{left:1.5%;right:1.5%;bottom:1.5cqw;height:21.75cqw;grid-template-columns:1fr 1fr .62fr}
.grid > div:not(.info){position:relative;background:var(--c,#5a5480);color:#fff;border-radius:.6cqw;border:.45cqw solid #1a1628;box-shadow:inset 0 -.8cqw 0 rgba(0,0,0,.22), inset 0 .45cqw 0 rgba(255,255,255,.25);
  padding:.7cqw 1.1cqw .7cqw 3.2cqw;display:flex;justify-content:space-between;align-items:center;gap:1cqw;cursor:pointer;font-weight:700;text-shadow:0 .3cqw 0 rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;min-width:0}
.grid > div.sel{outline:.6cqw solid var(--paper);outline-offset:.2cqw}
.grid > div.sel::before{border-left-color:#fff}
.grid > div.off{filter:saturate(.3) brightness(.85)}
.grid.fight > div:nth-child(1){grid-area:1/1}.grid.fight > div:nth-child(2){grid-area:1/2}.grid.fight > div:nth-child(3){grid-area:2/1}.grid.fight > div:nth-child(4){grid-area:2/2}
.grid .nm{overflow:hidden;text-overflow:ellipsis;font-size:3.05cqw;letter-spacing:0}
.grid.fight > div:not(.info){white-space:normal}
.grid.fight .nm{text-overflow:clip;line-height:1.05;min-width:0}
.grid.fight .pp{white-space:nowrap;flex:none}
.grid.act > div{font-family:var(--f-label);font-size:3.5cqw;text-transform:uppercase;justify-content:center;letter-spacing:.04em}
.grid .pp{font-family:var(--f-label);font-size:2.4cqw;opacity:.95}
.grid.fight .info{grid-column:3;grid-row:1 / span 2;color:var(--paper2);display:flex;flex-direction:column;justify-content:center;gap:1cqw;font-family:var(--f-label);font-size:2.7cqw;letter-spacing:.02em;padding-left:1cqw;border-left:.4cqw dashed #5a5480}
.chip{display:inline-block;font-family:var(--f-label);font-weight:700;font-size:2.5cqw;color:#fff;padding:.4cqw 1cqw;border-radius:.4cqw;letter-spacing:.06em;vertical-align:middle;border:.3cqw solid rgba(26,22,40,.55);text-transform:uppercase}
.hpbox{padding:1cqw 2.6cqw 1.1cqw;z-index:10;display:flex;flex-direction:column;gap:.45cqw;background:var(--paper);border:.6cqw solid var(--ink);border-radius:.8cqw 3.2cqw .8cqw 3.2cqw;box-shadow:inset 0 -1.4cqw 0 var(--paper2), .8cqw .8cqw 0 rgba(43,36,72,.32)}
.screen.tallScr .dlg.battle,.screen.tallScr .grid.fight,.screen.tallScr .grid.act{top:calc(75cqw + 2cqw);bottom:2cqw;height:auto}
.screen.tallScr .grid .nm{font-size:3.9cqw}.screen.tallScr .grid.act > div{font-size:3.9cqw}.screen.tallScr .grid{align-content:stretch;gap:2cqw}.screen.tallScr .grid.act{width:54%}.screen.tallScr .dlg.battle .dlgText{font-size:4.2cqw}.screen:has(.grid.act:not([hidden])) .dlg.battle .dlgText{padding-right:52%}.screen.tallScr:has(.grid.act:not([hidden])) .dlg.battle .dlgText{padding-right:56%}.screen.tallScr .grid .pp{font-size:3cqw}.screen.tallScr .grid.fight .info{font-size:3.3cqw}
.hpbox.enemy{left:3%;top:3cqw;width:auto;min-width:46%;max-width:54%}
.hpbox.player{right:3%;top:34.125cqw;width:48%}
.hprow{display:flex;justify-content:space-between;align-items:baseline;gap:1cqw;font-weight:700;font-size:3.4cqw;line-height:1.1}
.hprow span:first-child{overflow:hidden;white-space:nowrap;min-width:0}
.rolrow{font-family:var(--f-label);font-weight:700;font-size:2.6cqw;color:#7d4c7b;letter-spacing:.05em;line-height:1;text-transform:uppercase;margin-bottom:-.3cqw}
.hprow .lv{font-family:var(--f-label);font-weight:700;font-size:3cqw;color:#5a5480;white-space:nowrap}
.bar{display:flex;align-items:center;gap:1cqw}
.bar b{font-family:var(--f-label);font-weight:700;font-size:2.4cqw;color:#fff;background:var(--g-orange);padding:.3cqw .7cqw;border-radius:.4cqw;border:.25cqw solid rgba(26,22,40,.4)}
.track{flex:1;height:2cqw;background:var(--ink);border-radius:.6cqw;padding:.4cqw;display:flex}
.fill{height:100%;border-radius:.3cqw;background:linear-gradient(#b4e07a 0 40%,#6fae3a 40%);transition:width .5s steps(16);width:100%}
.fill.mid{background:linear-gradient(#ffe27a 0 40%,#e9b33a 40%)}.fill.low{background:linear-gradient(#ff9a82 0 40%,#d35b45 40%)}
.hpnum{font-family:var(--f-label);font-weight:700;font-size:2.8cqw;line-height:1;text-align:right;color:var(--ink)}
.xp{height:1.1cqw;background:var(--ink);border-radius:.6cqw;overflow:hidden;padding:.25cqw}
.xp i{display:block;height:100%;background:linear-gradient(#b9e4ff 0 50%,#5a9fd8 50%);width:0;transition:width .6s;border-radius:.3cqw}
.zone{left:2.5%;top:2.25cqw;padding:1cqw 3cqw;font-family:var(--f-label);font-weight:700;font-size:3.2cqw;letter-spacing:.08em;z-index:5;color:var(--ink);border-radius:0 .8cqw .8cqw 0;text-transform:uppercase}
.panel{inset:3%;padding:2.4cqw 3cqw;z-index:35;display:flex;flex-direction:column;gap:1.4cqw}
.panelHead{font-family:var(--f-label);font-weight:700;font-size:3.5cqw;text-transform:uppercase;color:var(--ink);letter-spacing:.08em;display:flex;justify-content:space-between;gap:2cqw;padding-bottom:1cqw;border-bottom:.35cqw solid var(--ink)}
.panelBody{flex:1;min-height:0;display:grid;grid-template-columns:1.12fr 1fr;gap:2.6cqw}
.panelBody.solo{grid-template-columns:1fr}
.plist{list-style:none;margin:0;padding:0;overflow:hidden;min-width:0;font-size:3.5cqw}
.plist li{display:flex;justify-content:space-between;gap:1cqw;white-space:normal;line-height:1.15}
.plist li span:first-child{min-width:0}
.plist li .r{white-space:nowrap}
.plist li .r{font-family:var(--f-label);font-weight:700;font-size:2.9cqw;color:#5a5480;align-self:center}
.plist li.dim{color:#a39c90}
.pdetail{background:var(--paper2);border:.3cqw solid var(--rule);border-radius:.6cqw;padding:2cqw 2.4cqw;font-size:3.3cqw;line-height:1.35;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:1cqw}
.statusT{width:100%;border-collapse:collapse;font-size:2.7cqw;text-align:center}
.statusT th,.statusT td{border:.3cqw solid var(--ink);padding:.35cqw .4cqw}
.statusT th{font-family:var(--f-label);font-size:2.8cqw}
.statusT th.rw{text-align:left;font-family:var(--f-ui);font-size:2.6cqw}
.statusT .me{background:#efe6fb}
.statusT .v1,.statusT .v2{background:#f6c9c0}.statusT .v3{background:#f6e7b0}.statusT .v4,.statusT .v5{background:#cfe9b8}
.pdetail h4{margin:0;font-size:3.6cqw}
.pdetail .k{color:#6a6378}
.stat{display:grid;grid-template-columns:auto 1fr;gap:.5cqw 3cqw;font-size:3.3cqw}
.stat b{font-family:var(--f-label);font-weight:700;font-size:3cqw;align-self:center}
.stat.four{grid-template-columns:auto 1fr auto 1fr;gap:.6cqw 2.4cqw;font-size:2.9cqw}
.kbar{display:grid;grid-template-columns:34% 1fr 4.2em;align-items:center;gap:1.4cqw;font-size:2.7cqw}
.kbar i{display:block;height:1.8cqw;border-radius:.4cqw;background:linear-gradient(90deg,var(--c) var(--w),rgba(40,30,60,.12) var(--w))}
.kbar b{font-family:var(--f-label);font-weight:700;font-size:2.8cqw;text-align:right}
.panelHint{font-size:2.9cqw;color:#5d566c}
.fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s;z-index:60}
.fade.white{background:#fff}
.title{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6cqw;background:linear-gradient(rgba(43,36,72,.42),rgba(26,20,44,.86));color:var(--paper);text-align:center;font-family:var(--f-ui)}
/* sin ligaduras: en la letra pixel "fi" se dibujaba como otra letra ("final" se leía mal) */
*{font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0}
.tLogo{font-family:var(--f-display);font-weight:700;font-size:10cqw;line-height:1.05;color:var(--g-lime);text-shadow:.7cqw .7cqw 0 #1a1628, -.35cqw -.35cqw 0 var(--g-orange);letter-spacing:.04em}
.tSub{font-size:3.4cqw;color:var(--g-lav);font-weight:700;text-shadow:0 .3cqw 0 #1a1628}
.tMenu{display:flex;flex-direction:column;gap:.8cqw;font-size:3.8cqw;font-weight:700;min-width:40%}
.tMenu div{padding:.6cqw 2cqw;cursor:pointer;border-radius:.6cqw;background:rgba(26,20,44,.55);border:.35cqw solid rgba(251,248,239,.18)}
.tMenu div.sel{background:var(--g-orange);color:var(--ink);border-color:var(--ink)}
.title.picking .tLogo,.title.picking .tLogo+.tSub{display:none}
.tMenu.slots{font-size:3cqw;min-width:70%}
.tMenu.slots div.off{opacity:.55}
.tMenu.pick2{flex-direction:row;justify-content:center;gap:3cqw;min-width:0}
.tMenu.pick2 div{display:flex;flex-direction:column;align-items:center;gap:.8cqw;width:25cqw;padding:1.4cqw 1.6cqw 1cqw}
.tMenu.pick2 img{width:19cqw;height:19cqw;image-rendering:auto;display:block}
.tMenu.pick2 img.f,.tMenu.pick2 div.sel img.n{display:none}
.tMenu.pick2 div.sel img.f{display:block}
.tName{display:flex;flex-direction:column;gap:1.4cqw;align-items:center;font-size:3.6cqw;font-weight:600}
.tName input{font-family:var(--f-ui);font-size:4.2cqw;font-weight:700;width:52cqw;padding:1cqw 2cqw;border:.6cqw solid var(--ink);border-radius:.6cqw;background:var(--paper);color:var(--ink);text-align:center;box-shadow:.6cqw .6cqw 0 rgba(0,0,0,.35)}
.tName button{font-family:var(--f-label);font-weight:700;font-size:3.4cqw;text-transform:uppercase;padding:1.4cqw 3cqw;border:.45cqw solid var(--ink);border-radius:.6cqw;background:var(--g-orange);color:var(--ink);cursor:pointer;box-shadow:.6cqw .6cqw 0 rgba(0,0,0,.35)}
.tFoot{font-size:3cqw;color:#ddd5f0;position:absolute;bottom:3cqw;text-shadow:0 .3cqw 0 #1a1628}
.clock{right:2.5%;top:2.25cqw;padding:.8cqw 2cqw;font-family:var(--f-label);font-weight:700;font-size:3.1cqw;letter-spacing:.06em;z-index:5;color:var(--ink);text-transform:uppercase;display:flex;align-items:center;gap:1.2cqw;pointer-events:none}
.ci{display:inline-block;width:2.6cqw;height:2.6cqw;border-radius:50%;flex:none}
.ci.sun{background:#f2c94c;box-shadow:0 0 0 .35cqw #fbe7a1}
.ci.dusk{background:linear-gradient(#f29a6a 55%,#8a5a7a 55%);border-radius:50% 50% .3cqw .3cqw}
.ci.moon{background:#e8e4d0;box-shadow:inset -.8cqw -.3cqw 0 #3b2752}
.ci.rain{border-radius:1.4cqw 1.4cqw .4cqw .4cqw;background:#8e9aac;height:1.8cqw;box-shadow:.4cqw 1.1cqw 0 -.6cqw #3d7fa8,1.3cqw 1.1cqw 0 -.6cqw #3d7fa8}
.ui b,.dlgName,.panelHead,.chip,.hprow,.clock,.zone,.rolrow,.pdetail h4,.tMenu div,.choice div.sel,.plist li.sel{text-shadow:.14cqw 0 0 currentColor}
.ui b{color:#5a3a6a}
.grid > div{text-shadow:.14cqw 0 0 currentColor, 0 .3cqw 0 rgba(0,0,0,.35) !important}
.toast{left:50%;top:3cqw;transform:translateX(-50%);padding:1cqw 2.6cqw;font-weight:700;z-index:45;white-space:nowrap}
@media (prefers-reduced-motion: reduce){ .more{animation:none} .fill,.xp i,.fade,.cross{transition:none} }