/* ==================================================================== premium.css */
/* Geolite v0.9 - capa PREMIUM: pixel art de estudio unico, casino x geografia, pantallas que usan toda la pantalla.
   Se carga la ultima y manda sobre lo anterior. */

/* ---------- imagenes: pixel art nitido, sombra de pegatina ---------- */
img.ic { display: block; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(8, 20, 14, .55)); user-select: none; -webkit-user-drag: none; }
.ic.sm { width: 22px; height: 22px; display: inline-block; vertical-align: middle; margin-right: 6px; } .ic.cn { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; margin-right: .25em; }
.ic.blindchip { position: relative; display: block; } .ic.blindchip .bc-base { position: absolute; inset: 0; width: 100%; height: 100%; } .ic.blindchip .bc-in { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.ic.badge { position: relative; display: block; width: 100%; height: 100%; } .ic.badge .bd-base { position: absolute; inset: 0; width: 100%; height: 100%; } .ic.badge .bd-in { position: absolute; left: 12.5%; top: 12.5%; width: 75%; height: 75%;}   /* 48 px de ilustracion centrados sobre la ficha de 64 (pixel 8,8): la ficha es un circulo centrado (js/ficha.js) */
.ic.badge .bd-in.ic-ach_casino_falso { left: 9.375%; top: 9.375%; width: 81.25%; height: 81.25%; }   /* la cabeza riendo del crupier: 52 px nativos sobre la ficha de 64 (pixel 6,6) */
.ach:not(.got) .ic { filter: grayscale(1) brightness(.55); }

/* ---------- pantalla de inicio: cuatro cartas sobre el mapa ---------- */
#layer:has(#dlg.home) { pointer-events: auto; background: radial-gradient(ellipse at 50% 40%, rgba(8, 20, 26, .15), rgba(5, 12, 8, .78) 78%); }
#dlg.home { place-self: stretch; width: 100%; height: 100%; transform: none; overflow-y: auto; overflow-x: hidden; filter: none; }
#dlg.home, #dlg.verdict, #dlg.tablewrap { scrollbar-width: none; } #dlg.home::-webkit-scrollbar, #dlg.verdict::-webkit-scrollbar, #dlg.tablewrap::-webkit-scrollbar { display: none; }   /* las piezas entran por un lado y por un momento sobresalen: sin barra que aparezca y estreche 8 px toda la pantalla (portada, veredicto, mesa) */
.hh { min-height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; padding: clamp(14px, calc(2.4 * var(--vh)), 30px) clamp(16px, calc(4 * var(--vw)), 64px) clamp(14px, calc(2.4 * var(--vh)), 26px); gap: clamp(6px, calc(1.4 * var(--vh)), 16px); }
.hh-top { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.hh-logo { width: min(calc(64 * var(--vw)), 470px); max-height: calc(26 * var(--vh)); width: auto; height: auto; max-width: min(calc(64 * var(--vw)), 470px); animation: logo-in .9s var(--spring) both; }
@keyframes logo-in { from { opacity: 0; transform: translateY(-30px) rotate(-3deg); } }
.hh-top h1 { font-family: var(--serif); font-size: clamp(56px, calc(8 * var(--vw)), 110px); }
.hh-top .menu-tools { position: absolute; right: 0; top: 0; }
.hh-tag { margin: 0; text-align: center; font-family: var(--serif); font-size: clamp(20px, calc(2.4 * var(--vw)), 32px); color: var(--brass-lt); text-shadow: 0 3px 0 rgba(5, 12, 8, .7); }
.hh-cards { display: flex; justify-content: center; align-items: center; gap: clamp(10px, calc(1.8 * var(--vw)), 30px); padding: clamp(10px, calc(2 * var(--vh)), 28px) 0; perspective: 1400px; }
.mcard { --rot: 0deg; --rc: #cfc9b0; position: relative; display: flex; flex-direction: column; gap: 8px; width: clamp(180px, calc(20.5 * var(--vw)), 310px); aspect-ratio: 5 / 7.4; padding: 12px; text-align: left; color: #16241c; cursor: pointer; border: 0; border-radius: 18px;
  background: #f6efdc; box-shadow: 0 0 0 3px #16241c, inset 0 0 0 5px var(--rc), inset 0 0 0 7px #16241c, 0 18px 0 3px rgba(0, 0, 0, .45), 0 30px 60px rgba(0, 0, 0, .5);
  transform: rotate(var(--rot)); transition: transform .35s var(--spring), box-shadow .3s; animation: deal .7s var(--spring) both; }
.mcard:nth-child(1) { --rot: -4deg; animation-delay: .05s; --rc: #4fb6a0; } .mcard:nth-child(2) { --rot: -1.2deg; animation-delay: .12s; } .mcard:nth-child(3) { --rot: 1.4deg; animation-delay: .19s; --rc: #c78bf0; } .mcard:nth-child(4) { --rot: 4deg; animation-delay: .26s; --rc: #f8b449; }
.mcard.hero { --rc: #ffd06b; width: clamp(210px, calc(24 * var(--vw)), 360px); transform: rotate(var(--rot)) translateY(-8px); z-index: 2; }   /* sin scale: su arte va a escala entera (js/hub.js, mcFit) */
.hh.nodeal .mcard { animation: none; }
@keyframes deal { from { opacity: 0; transform: translateY(160px) rotate(24deg); } }
.mcard:hover { transform: rotate(0deg) translateY(-24px) scale(1.07); z-index: 5; box-shadow: 0 0 0 3px #16241c, inset 0 0 0 5px #ffd06b, inset 0 0 0 7px #16241c, 0 26px 0 3px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 208, 107, .55); }
.mcard.hero:hover { transform: rotate(0deg) translateY(-34px) scale(1.09); }
.mcard .ix { position: absolute; z-index: 3; } .mcard .ix.tl { left: 14px; top: 14px; } .mcard .ix.br { right: 14px; bottom: 14px; } .mcard .ix b { font-size: 26px; color: #16241c; text-shadow: 0 0 4px #f6efdc, 0 0 4px #f6efdc; } .mcard[data-suit="red"] .ix b { color: #c2372e; } .mcard .ix .ic { width: 22px; height: 22px; filter: none; }
.mc-win { flex: 1 1 auto; min-height: 0; margin: 4px 2px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px #16241c; position: relative; } .mc-win .pic { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; } .mc-win .pic-frame { display: none; }
.mc-name { font-family: var(--serif); font-weight: 900; font-size: clamp(24px, calc(2.4 * var(--vw)), 36px); line-height: 1; padding: 0 30px 0 2px; color: #16241c; }
.mc-desc { font-size: clamp(13px, calc(1.05 * var(--vw)), 16px); line-height: 1.2; color: #3a4a3e; min-height: 3.6em; padding-right: 26px; }
.mc-stat { align-self: flex-start; max-width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: #f6efdc; background: #16241c; padding: 5px 9px 4px; }
.mc-ribbon { position: absolute; z-index: 4; top: -6px; left: 50%; transform: translateX(-50%) rotate(-2deg); font-family: var(--mono); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--red); padding: 6px 12px 5px; box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 0 2px #16241c; white-space: nowrap;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--red), 0 0 26px var(--red); animation: neon-flicker 3.2s linear infinite; }
@keyframes neon-flicker {
  0%, 3%, 6%, 100% { box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 0 2px #16241c, 0 0 16px 2px var(--red); }
  4%, 5% { box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 0 2px #16241c, 0 0 3px 0 var(--red); }
}
/* marquesina de la carta de la Aventura: bombillas enteras en el margen crema, entre el marco y la ilustracion (el relleno se abre para que ninguna quede tapada) */
.mcard.hero { --mqi: 13.5px; --mqb: 7px; padding: 20px 20px 18px; }
.mqb { position: absolute; z-index: 1; left: var(--mqi); top: var(--mqi); width: calc(100% - 2 * var(--mqi)); height: calc(100% - 2 * var(--mqi)); overflow: visible; pointer-events: none; }
.mqb rect { x: 0; y: 0; width: 100%; height: 100%; rx: calc(18px - var(--mqi)); fill: none; stroke-linecap: round; stroke-dasharray: 0 2; stroke-width: var(--mqb); }
.mqb .mqb-sk { stroke: #16241c; stroke-width: calc(var(--mqb) + 3px); }                 /* casquillo: cada bombilla con su contorno de tinta, bien definida */
.mqb .mqb-off { stroke: #8a5a22; }                                                      /* cristal apagado: se ve la bombilla aunque no luzca (mas oscuro desde la v0.3.70: encendida se nota mas) */
/* v0.3.52 (la casa): tres tandas encendidas, una por svg, que se turnan con un solo reloj (1140 ms = tres pasos de 380): en cada paso se apaga
   una y lucen las otras dos, y el hueco corre por el marco. Solo cambia la opacidad del svg: el compositor lo hace sin repintar */
.mqw { display: contents; }
.mqb .mqb-on, .mqb .mqb-a { stroke: #ffd060; } .mqb .mqb-on { stroke-dasharray: 0 6; }   /* .mqb-a: las de la capa del destello (todas, no una de cada tres) */
/* v0.3.70: la bombilla irradia. Filamento blanco, cristal calido y cuatro bandas de luz que llegan a cinco veces su tamano: la primera casi blanca
   (sobre crema se lee como un velo de luz), las demas cada vez mas ambar. Son trazos anchos y translucidos del mismo svg, a bandas de pixel
   (es un objeto); sin filtros: nada que repintar */
.mqb .mqb-on.mqb-h1, .mqb .mqb-a.mqb-h1 { stroke: rgba(255, 244, 196, .6); stroke-width: calc(var(--mqb) * 1.6); }
.mqb .mqb-on.mqb-h2, .mqb .mqb-a.mqb-h2 { stroke: rgba(255, 216, 130, .34); stroke-width: calc(var(--mqb) * 2.5); }
.mqb .mqb-on.mqb-h3, .mqb .mqb-a.mqb-h3 { stroke: rgba(255, 188, 84, .2); stroke-width: calc(var(--mqb) * 3.8); }
.mqb .mqb-on.mqb-h4, .mqb .mqb-a.mqb-h4 { stroke: rgba(255, 162, 50, .11); stroke-width: calc(var(--mqb) * 5.6); }
.mqb.l2 .mqb-on { stroke-dashoffset: -2; } .mqb.l3 .mqb-on { stroke-dashoffset: -4; }
.mqb .mqb-c { stroke: #fffdf0; stroke-width: calc(var(--mqb) * .56); filter: none; }    /* filamento blanco en el centro */
.mqb.mq-all { opacity: 0; }                                                            /* v0.3.74: el destello de los premios; solo se ve mientras A.casa.destello la anima */
/* v0.3.74, la ola: ninguna bombilla se apaga. Todas lucen a un nivel de reposo (55 %) y, en cada pulso, una tanda da un golpe de luz que se
   enfria despacio hasta el reposo (en 1,7 pulsos); el golpe corre por el marco. Lo que se mueve es luz, no un hueco (hasta la v0.3.73 eran
   dos tandas encendidas y una apagada). El golpe sube en la decima de pulso anterior y cae justo en el pulso (0 % de la vuelta).
   --mq-p: lo que dura la vuelta (tres pulsos); lo pone js/casa.js: el reloj de la casa o el compas de la cancion */
.mqb.mq-lit { animation: mq-ch var(--mq-p, 1140ms) linear infinite; animation-delay: calc(var(--mq-s, 0ms) - var(--mq-k, 0) * var(--mq-p, 1140ms) / 3); }
.mqb.l2 { --mq-k: 1; } .mqb.l3 { --mq-k: 2; }
@keyframes mq-ch { 0% { opacity: 1; } 4.533% { opacity: 1; } 17% { opacity: .752; } 35.133% { opacity: .604; } 56.667% { opacity: .55; } 96.667% { opacity: .55; } 100% { opacity: 1; } }
/* el resplandor del marco entero: fuera, sobre lo que tiene alrededor; dentro, sobre la propia pieza. Una sombra quieta (el aire, suave) */
.mq-aura { position: absolute; z-index: 0; left: var(--mqi); top: var(--mqi); width: calc(100% - 2 * var(--mqi)); height: calc(100% - 2 * var(--mqi)); pointer-events: none;
  border-radius: calc(var(--mqr, 18px) - var(--mqi)); --ag: calc(var(--mqb) + max(0px, var(--mqi)));
  box-shadow: 0 0 calc(var(--ag) * 2.2) calc(var(--ag) * .9) rgba(255, 186, 80, .34), 0 0 calc(var(--ag) * 7) calc(var(--ag) * 2) rgba(255, 150, 46, .17),
    inset 0 0 calc(var(--mqb) * 3) calc(var(--mqb) * .4) rgba(255, 230, 160, .26); }
html:not(.sala-on) .mq-aura { display: none; }                                         /* con las Luces de la sala apagadas, sin resplandor */
html.sala-soft .mq-aura { opacity: .6; }
html.reduce-motion .mqb.mq-lit { animation: none; }                                     /* Movimiento minimo: quietas y todas encendidas (hasta la v0.3.73, dos de cada tres) */
/* v0.3.96: marquesina a la medida de la carta. js/art.js (A.bulbFit) cuenta cuantas bombillas caben para que el hueco entre ellas sea el de la carta de la Aventura, y lo deja en --dn (144 / bombillas, siempre multiplo de 3: las tres tandas se reparten parejas) */
.mq-fit.mq-fit .mqb rect { stroke-dasharray: 0 var(--dn, 2); } .mq-fit.mq-fit .mqb .mqb-on { stroke-dasharray: 0 calc(var(--dn, 2) * 3); }
.mq-fit.mq-fit .mqb.l2 .mqb-on { stroke-dashoffset: calc(var(--dn, 2) * -1); } .mq-fit.mq-fit .mqb.l3 .mqb-on { stroke-dashoffset: calc(var(--dn, 2) * -2); }
/* v0.3.19: las mismas bombillas en las ilustraciones (A.pic: escena de la ronda, carta del Reto diario) y en tu escalon del podio. Cada sitio ajusta
   margen (--mqi), tamano (--mqb), radio del marco (--mqr) y densidad: con pathLength 144, "0 2" son 72 bombillas, "0 3" 48 y "0 4" 36 (las encendidas, la mitad) */
.mqb rect { rx: calc(var(--mqr, 18px) - var(--mqi)); }
.pic { --mqi: 9px; --mqb: 6px; --mqr: 14px; } .pic .mqb { z-index: 3; } .mc-win .pic .mqb, .mc-win .pic .mq-aura { display: none; }
.pd-step { --mqi: 6px; --mqb: 4.5px; --mqr: 9px; }
.pd-step .mqb rect { stroke-dasharray: 0 4; } .pd-step .mqb .mqb-on { stroke-dasharray: 0 12; } .pd-step .mqb.l2 .mqb-on { stroke-dashoffset: -4; } .pd-step .mqb.l3 .mqb-on { stroke-dashoffset: -8; }
.hh-bottom { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.hh-ver { font-family: var(--mono); font-size: 14px; letter-spacing: .05em; color: rgba(242, 233, 214, .45); }
.chipbtn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #ffe08a; background: #16241c; padding: 10px 18px 9px; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 0 0 2px #ffe08a, 0 6px 0 rgba(0, 0, 0, .45); transition: transform .2s var(--spring), background .2s; } .chipbtn:hover { transform: translateY(-3px) scale(1.04); background: #1c3a2c; } .chipbtn em { font-style: normal; color: #fff; opacity: .8; } .chipbtn.big { font-size: 17px; padding: 12px 22px 11px; }
.chipbtn.no { animation: nope .35s; }

/* ---------- sub-pantallas: usan todo el ancho, con el mapa visible ---------- */
#dlg.menu { place-self: stretch center; width: min(1240px, calc(100 * var(--vw))); transform: none; background: linear-gradient(180deg, rgba(10, 26, 18, .96), rgba(10, 26, 18, .9)); box-shadow: 0 0 80px rgba(0, 0, 0, .6); border-left: 3px solid rgba(248, 180, 73, .35); border-right: 3px solid rgba(248, 180, 73, .35); pointer-events: auto; }
.menu-in.hub { padding: clamp(16px, calc(3 * var(--vh)), 34px) clamp(18px, calc(3.4 * var(--vw)), 54px); }
.hub .camps { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; } .hub .decks { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hub .deck { padding: 16px 14px; gap: 6px; border-radius: 14px; } .hub .deck b { font-size: 22px; } .hub .deck i { font-size: 16px; }
.hub .ach-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .hub .ach { grid-template-columns: 56px 1fr; padding: 10px 12px; } .hub .ach-i { width: 52px; height: 52px; }
@media (max-width: 900px) {
  .hh-cards { flex-wrap: wrap; } .mcard { width: clamp(150px, calc(44 * var(--vw)), 250px); } .mcard.hero { width: clamp(160px, calc(46 * var(--vw)), 260px); transform: rotate(var(--rot)); } .hh-top .menu-tools { position: static; margin-top: 8px; }
  .hh-top { flex-direction: column; align-items: center; } #dlg.menu { width: calc(100 * var(--vw)); border: 0; } .hub .decks { grid-template-columns: 1fr 1fr; }
}
.hh-logo { width: auto; max-width: min(calc(70 * var(--vw)), 520px); height: min(calc(21 * var(--vh)), 210px); object-fit: contain; }
.hh-tag { font-size: clamp(18px, calc(2.2 * var(--vh)) + 8px, 30px); }
.mcard { width: min(calc(20.5 * var(--vw)), calc(28 * var(--vh)) * .7 * 1.36, 310px); } .mcard.hero { width: min(calc(24 * var(--vw)), calc(33 * var(--vh)) * .7 * 1.36, 360px); }
.hh { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.hh-cards { padding: clamp(18px, calc(3.5 * var(--vh)), 40px) 0 clamp(8px, calc(2 * var(--vh)), 24px); }

/* ==================================================================== premium2.css */
/* Geolite v0.9 - premium (parte 2): campamento/cofre, intro de ronda, veredictos y marcador de partida. */

/* ======================= CAMPAMENTO / COFRE: cartas flotando sobre el mapa ======================= */
#layer:has(#dlg.tablewrap) { pointer-events: auto; background: radial-gradient(ellipse at 50% 42%, rgba(6, 16, 22, .28), rgba(5, 12, 8, .86) 86%); }
#dlg.tablewrap { place-self: stretch; width: 100%; height: 100%; transform: none; overflow: hidden; filter: none; }

/* ======================= INTRO DE RONDA: ficha ciega + banner a pantalla ======================= */
#intro { background: radial-gradient(ellipse at 40% 50%, rgba(5, 12, 8, .7), rgba(5, 12, 8, .94)); }
.intro-in.adv { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(20px, calc(4 * var(--vw)), 70px); width: min(1500px, calc(94 * var(--vw))); padding: 0; }
.intro-left { display: flex; align-items: center; gap: clamp(16px, calc(2.4 * var(--vw)), 40px); }
.intro-num.blind { flex: none; width: clamp(120px, calc(15 * var(--vw)), 230px); height: clamp(120px, calc(15 * var(--vw)), 230px); -webkit-text-stroke: 0; }
.intro-num.blind .ic.blindchip { width: 100%; height: 100%; animation: chip-drop .9s cubic-bezier(.3, 1.3, .5, 1) .2s both; filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .5)); }
.intro-body h2 { font-size: var(--h2fit, clamp(34px, calc(5.4 * var(--vw)), 84px)) !important; line-height: .95; } .intro-sub { font-size: clamp(14px, calc(1.3 * var(--vw)), 19px) !important; }
.intro-art { width: 100%; transform: rotate(1.5deg); } .intro-art .pic { width: 100%; aspect-ratio: 16 / 10; }
@media (max-width: 900px) { .intro-in.adv { grid-template-columns: 1fr; } .intro-left { flex-direction: column; text-align: center; } }
/* v0.3.172: el cartel de la intro siempre cabe entre el techo y el suelo del escenario (A.fitIntro, js/game.js). Los jefes con tres retos y los
   titulos largos (ruso, japones, frances) median hasta 850 px y se salian por abajo en la Deck y a 720p. Se compacta por pasos y solo lo justo:
   fit1, los aires; despues el titulo, a pasos de 2 px; fit2, la coletilla del acto (ya la dice la etiqueta de arriba); fit3, el interlineado de los retos */
.intro-in.fit1 .intro-body { gap: 6px; }
.intro-in.fit1 .boss-combo { margin: 0; } .intro-in.fit1 .boss-d { margin: 0; }
.intro-in.fit1 .adv-chal-h { margin: 6px 0 0; }
.intro-in.fit1 .adv-debuff { margin-top: 6px; padding: 7px 12px; }
.intro-in.fit2 .intro-flav { display: none; }
.intro-in.fit3 .adv-debuff b { line-height: 1.05; } .intro-in.fit3 .adv-debuff i { line-height: 1.1; } .intro-in.fit3 .adv-debuff { padding: 5px 12px; margin-top: 5px; }
/* el acto, las monedas y los retos de arriba (#topHud, v0.3.103) no pisan la intro: ya los cuenta el cartel. Vuelven cuando se va */
#intro:not(.hidden):not(.out) ~ #topHud { opacity: 0; visibility: hidden; }
#topHud { transition: opacity .25s ease, visibility 0s; }


/* ==================================================================== premium3.css */
/* Geolite v0.9 - premium (parte 3): ajustes finos de campamento, cartas y marcador. */
#dlg.tablewrap, #dlg.home { position: absolute; inset: 0; width: auto; height: auto; }

/* ==================================================================== premium4.css */
/* Geolite v0.9 - premium (parte 4): sub-pantallas a pantalla completa (Aventura, Clasico, Competitivo, Perfil). */
.scr { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: clamp(12px, calc(2.4 * var(--vh)), 28px) clamp(16px, calc(4 * var(--vw)), 64px); gap: clamp(8px, calc(1.6 * var(--vh)), 18px); color: var(--paper); max-width: min(calc(96 * var(--vw)), 2100px); margin: 0 auto; }   /* --vw (1vw / k): con 96vw, al encoger k para que quepa, la pantalla tambien estrechaba (a 1024 usaba la mitad del ancho) */
.scr-head { position: relative; display: flex; align-items: center; gap: clamp(12px, calc(2 * var(--vw)), 28px); }
.scr-head h2 { margin: 0; flex: 1; font-family: var(--serif); font-weight: 900; font-size: clamp(34px, calc(6 * var(--vh)), 72px); line-height: .95; text-shadow: 0 5px 0 rgba(5, 12, 8, .7); }
.scr-head .menu-tools { position: static; }
.scr-body { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 6px 24px; scrollbar-width: thin; scrollbar-color: var(--brass) transparent; }
.scr .hub-back { background: #16241c; box-shadow: inset 0 0 0 2px #ffe08a, 0 5px 0 rgba(0, 0, 0, .45); border: 0; border-radius: 999px; color: #ffe08a; padding: 10px 18px 9px; } .scr .hub-back:hover { background: #1c3a2c; transform: translateY(-2px); }

.roadmap { display: flex; align-items: flex-end; gap: clamp(4px, calc(.7 * var(--vw)), 10px); flex-wrap: wrap; padding: 6px 0 10px; }
.rm-node { position: relative; display: grid; justify-items: center; gap: 2px; } .rm-ic { width: clamp(38px, calc(5.4 * var(--vh)), 56px); height: clamp(38px, calc(5.4 * var(--vh)), 56px); display: grid; place-items: center; background: rgba(255, 255, 255, .07); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255, 224, 138, .3); }
.rm-node.boss .rm-ic { background: rgba(254, 95, 85, .25); box-shadow: inset 0 0 0 3px var(--red); } .rm-ic .ic { width: 78%; height: 78%; } .rm-node em { font-style: normal; font-family: var(--mono); font-size: 14px; color: rgba(242, 233, 214, .6); }
/* v0.3.67: la pastilla dorada (.startbtn) y su latido (neon-pulse) ya no se usan: "Continuar expedicion" es .hh-cont (css/portada.css) */
.sb-ic .ic { width: 56px; height: 56px; animation: chip-turn 8s linear infinite; }
.sb-t { flex: 1; min-width: 0; display: grid; } .sb-t b { font-family: var(--serif); font-weight: 900; font-size: clamp(22px, calc(3.2 * var(--vh)), 32px); line-height: 1; } .sb-t i { font-style: normal; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; opacity: .75; } .sb-ar .ic { width: 28px; height: 28px; }


/* ---------- Competitivo ---------- */
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: clamp(16px, calc(2.6 * var(--vw)), 44px); align-items: start; }
.cp-main { display: grid; gap: 14px; } .daily { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 16px; background: rgba(10, 26, 18, .82); border-radius: 18px; box-shadow: inset 0 0 0 3px rgba(255, 224, 138, .4), 0 10px 0 rgba(0, 0, 0, .35); } .daily.rk { grid-template-columns: 1fr; }
.dy-art { width: clamp(120px, calc(14 * var(--vw)), 210px); } .dy-art .pic { aspect-ratio: 4 / 5; } .dy-body { display: grid; gap: 8px; } .dy-body b { font-family: var(--serif); font-weight: 900; font-size: clamp(22px, calc(3 * var(--vh)), 32px); } .dy-body i { font-style: normal; font-size: 16px; opacity: .8; }
.rk-camps { display: flex; gap: 10px; flex-wrap: wrap; } .cp-board { padding: clamp(14px, calc(2 * var(--vw)), 24px); background: rgba(10, 26, 18, .82); border-radius: 18px; box-shadow: inset 0 0 0 3px rgba(255, 224, 138, .4), 0 10px 0 rgba(0, 0, 0, .35); }
.lb li { font-size: 18px; padding: 10px 14px 9px; border-radius: 8px; } .lb-n .ic { margin: 0; }


@media (max-width: 1000px) {
  .cp-grid { grid-template-columns: 1fr; } .daily { grid-template-columns: 1fr; }
  .scr-head { flex-wrap: wrap; } .scr-head h2 { flex-basis: 100%; order: 3; }
}


/* el aviso de tarjeta nueva no debe tapar los botones inferiores de la tienda ni del mapa */
.cx-toast { bottom: auto; top: 150px; right: 16px; }

/* ajustes: boton peligroso (restablecer) */
.row-btn.danger { color: #ffb4a8; box-shadow: inset 0 0 0 2px rgba(254, 95, 85, .55); }
.row-btn.danger.armed { background: #fe5f55; color: #16241c; animation: none; }

.startbtn.armed { background: #fe5f55; color: #16241c; }
.startbtn.armed .sb-t i { display: none; }

/* partida guardada (v0.3.23): el mismo boton de ficha que "Nueva expedicion", sin banner propio. En la portada va solo y centrado;
   en la Aventura, "Continuar" en oro y "Nueva expedicion" baja a la version de fieltro (alt), que pide doble pulsacion */
.hh-resume { display: flex; justify-content: center; flex: 1 0 100%; margin: 0 auto; }
.hh-resume .sb-ic .ic { width: 48px; height: 48px; }
.sb-t i:has(> span) { display: flex; flex-wrap: wrap; column-gap: 1.1em; } .sb-t i > span { display: inline-flex; align-items: center; gap: .35em; min-width: 0; }   /* cada trozo entero si cabe en su linea; si ni solo cabe, se parte por dentro antes que salirse */ .sb-t .sb-coin { width: 18px; height: 18px; margin: 0; }
.startbtn.alt { animation: none; color: #f6efdc; background: linear-gradient(180deg, #24493a, #16302a); box-shadow: 0 0 0 3px #16241c, 0 7px 0 3px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(248, 180, 73, .55), inset 0 -5px 0 rgba(0, 0, 0, .3); padding-block: 6px; }
.startbtn.alt .sb-ic .ic { width: 40px; height: 40px; animation: none; } .startbtn.alt .sb-t b { font-size: clamp(19px, calc(2.6 * var(--vh)), 24px); color: #ffe08a; } .startbtn.alt .sb-t i { opacity: .7; }
.startbtn.alt:hover { box-shadow: 0 0 0 3px #16241c, 0 9px 0 3px rgba(0, 0, 0, .5), inset 0 0 0 2px #f8b449, inset 0 -5px 0 rgba(0, 0, 0, .3), 0 0 22px 2px rgba(248, 180, 73, .35); }
.startbtn.alt.armed { background: #fe5f55; } .startbtn.alt.armed .sb-t b { color: #16241c; }

/* boton Menu en el Campamento */
.tb-right { justify-self: end; display: flex; align-items: center; gap: 14px; }

#veil { z-index: 60; }
html[data-skin] .startbtn.armed { background: #fe5f55; color: #16241c; }
html[data-skin] .row-btn.danger { color: #ffb4a8; box-shadow: inset 0 0 0 2px rgba(254, 95, 85, .55); }
html[data-skin] .row-btn.danger.armed { background: #fe5f55; color: #16241c; }

/* el crupier apaga las luces de su carta si te quedas mirando el Clasico (js/dealer.js, watchCards): en dos tandas; se encienden al pasar por ella */
.mcard.hero.sulk .mqb.l1, .mcard.hero.sulk2 .mqb.l2, .mcard.hero.sulk2 .mqb.l3, .mcard.hero.sulk2 .mqb.mq-all { display: none; }
/* territorio nuevo: sello "Nuevo" junto al numero de ronda de la intro (js/adventure.js, introHtml) */
.intro-new { display: inline-block; margin-left: 10px; padding: 1px 8px 0; border: 2px solid #e2483d; color: #e2483d; font-family: var(--serif); font-weight: 400; font-size: .95em; text-transform: uppercase; letter-spacing: .06em; transform: rotate(-6deg); vertical-align: 2px; }
/* v0.19: Campamento. Sello "Sin fondos" sobre la carta que no puedes pagar; el trile (cartas boca abajo mientras se barajan) */
.offer { position: relative; }
.of-stamp { position: absolute; left: 50%; top: 44%; z-index: 3; padding: 2px 10px 0; border: 3px solid #d8352a; color: #d8352a; background: rgba(246, 239, 220, .94); font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); }
.of-stamp.on { animation: of-stamp 2s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes of-stamp { 12% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } 82% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
html.reduce-motion .of-stamp.on { animation-timing-function: steps(1); }
.table.shelling { pointer-events: none; }
.offer.faced { background: repeating-linear-gradient(90deg, #7a1e2c 0 6px, #8c2534 6px 12px) !important; box-shadow: inset 0 0 0 4px #f3e6c8, 0 6px 0 rgba(0, 0, 0, .35) !important; }
.offer.faced > * { visibility: hidden; }
/* tanda 17: las Ascensiones con identidad: la linea de la seleccion (nombre en blanco, la suma de lo anterior debajo) y la ficha del Campamento */