/* ═══════════════════════════════════════════════════════════════════════
   Carcasa de la interfaz: capas, barra superior, navegación inferior,
   transiciones de pantalla, avisos, modales y piezas comunes. Con el
   lenguaje del kit (theme.css): recursos en píldoras hundidas, navegación
   de pestañas turquesa de cristal sobre un estante, ventanas de pizarra con
   la cabecera oscura y el título amarillo, y el botón redondo rojo de cerrar.
   ═══════════════════════════════════════════════════════════════════════ */

/* Zonas seguras (muesca, barra de inicio): las barras llegan a sangre hasta el borde y solo su
   contenido se aparta; las pantallas se apartan con márgenes. */
#app {
  position: fixed; inset: 0; z-index: 1;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
#app > .topbar { grid-row: 1; }
#app > .screens { grid-row: 2; margin: 0 var(--safe-r) 0 var(--safe-l); }
#app > .navbar { grid-row: 3; }
#app[data-chrome="none"] > .screens { margin-top: var(--safe-t); }
#app[data-chrome="none"] > .screens, #app[data-chrome="top"] > .screens { margin-bottom: var(--safe-b); }
#app[data-chrome="none"] > .topbar, #app[data-chrome="none"] > .navbar,
#app[data-chrome="top"] > .navbar { display: none; }
#app[data-playing] { visibility: hidden; }

.screens { position: relative; min-height: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; animation: screen-in .3s cubic-bezier(.2,.9,.3,1) both; }
.screen-leave { animation: screen-out .22s ease-in both; pointer-events: none; z-index: 0; }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes screen-out { to { opacity: 0; transform: scale(1.02); } }

#game-layer { position: fixed; inset: 0; z-index: 40; background: #000; }
#overlay-layer { position: relative; z-index: 60; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* ── Barra superior: nivel, copas y recursos flotando sobre la pizarra ── */
.topbar {
  position: relative; z-index: 5; height: calc(var(--top-h) + var(--safe-t));
  display: flex; align-items: center; gap: .9rem;
  padding: var(--safe-t) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  background: linear-gradient(180deg, rgba(6, 12, 18, .72) 0%, rgba(6, 12, 18, .38) 70%, rgba(6, 12, 18, 0) 100%);
}
.tb-player { display: flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0; background: none; border: 0; text-align: left; }
.tb-level .level-badge { width: 2.7rem; height: 2.7rem; }
.tb-xp { display: flex; flex-direction: column; gap: .12rem; width: 8.5rem; }
/* line-height holgado: con 1.1 la caja cortaba los trazos descendentes (g, j, p, q, y); Baloo 2
   necesita ~1.6 para que la caja contenga la letra entera. */
.tb-nick { font-family: var(--font-title); font-weight: 400; font-size: max(12px, .95rem); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink); padding-left: .1em; }
.tb-xpbar { height: .95rem; }
.tb-xpbar > span { font-size: max(11px, .66rem); }
.tb-spacer { flex: 1; }
.tb-gear { flex: none; }

/* Píldora de recurso (kit: .hk-pill): hueco oscuro, icono que sobresale por la izquierda, número y «+» */
.res {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 2.3rem; min-width: 7.2rem; min-height: 36px; margin-left: 1.1rem; padding: 0 1.25rem 0 1.5rem;
  background: var(--well); border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), inset 0 2px 4px rgba(0, 0, 0, .5);
}
.res::after { content: ''; position: absolute; inset: -9px -8px; }  /* área táctil ≥ 44 px */
.res-cups { min-width: 6rem; padding-right: .8rem; }
.res-ico { position: absolute; left: -1.05rem; top: 50%; width: 2.7rem; height: 2.7rem; transform: translateY(-50%); filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.res-ico .ico { width: 100%; height: 100%; }
.res-num { font-size: 1.15rem; line-height: 1; }
.res-plus {   /* botón redondo verde con la cruz (kit: .hk-round--green) */
  position: absolute; right: -.75rem; top: 50%; transform: translateY(-50%);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(ellipse 72% 58% at 50% 32%, #c2f73e 0%, #c2f73e 42%, #6fd51a 100%);
  border: 2px solid #174a00; box-shadow: inset 0 -.14rem 0 #3c9a08, inset 0 1.5px 0 rgba(255,255,255,.55), 0 1.5px 0 #174a00;
  color: #0f3a00;
}
.res-plus .ico { width: 64%; height: 64%; margin-top: -6%; }
.res-up .res-num, .res-down .res-num { animation: res-pop .45s cubic-bezier(.2,1.6,.4,1); }
.res-up .res-num { color: #d6ff9c; }
.res-down .res-num { color: #ffc2bb; }
@keyframes res-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.level-badge.lvl-sm { width: 2.2rem; height: 2.2rem; }
.level-badge.lvl-sm b { font-size: .9rem; }
.level-badge.lvl-lg { width: 3.8rem; height: 3.8rem; }
.level-badge.lvl-lg b { font-size: 1.55rem; }
.level-badge.lvl-xl { width: 8rem; height: 8rem; }
.level-badge.lvl-xl b { font-size: 3.2rem; }

/* ── Navegación inferior: pestañas turquesa de cristal apoyadas en un estante (kit: .hk-tab/.hk-shelf).
   La activa sube, crece y se ilumina. ── */
.navbar {
  --shelf: calc(.5rem + var(--safe-b));
  position: relative; z-index: 5; height: calc(var(--nav-h) + var(--safe-b));
  display: flex; align-items: flex-end; justify-content: center; gap: .3rem;
  padding: 0 calc(var(--gutter) + var(--safe-r)) var(--shelf) calc(var(--gutter) + var(--safe-l));
  background: linear-gradient(0deg, rgba(4, 14, 20, .6) 0%, rgba(4, 14, 20, .3) 55%, rgba(4, 14, 20, 0) 100%);
}
.navbar::before {   /* el estante */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--shelf);
  background: linear-gradient(180deg, #062a41 0%, #073c58 35%, #0795bd 100%);
  border-top: 2.5px solid #021a2e; box-shadow: inset 0 2.5px 0 #1283b4;
}
.nav-tab {
  position: relative; flex: 1 1 0; max-width: 11rem; min-width: 0; height: calc(var(--nav-h) - 1.2rem); margin-bottom: -2.5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; padding: .15rem .3rem 0;
  border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 1rem 1rem 0 0;
  background: linear-gradient(180deg, #243f4c 0%, #1a3440 100%);
  box-shadow: inset 0 2px 0 rgba(160, 200, 210, .3);
  transition: flex-grow .28s cubic-bezier(.3,1.3,.5,1), height .2s cubic-bezier(.3,1.5,.5,1), filter .12s;
}
.nav-tab::before {   /* píldora de cristal */
  content: ''; position: absolute; left: .45rem; right: .45rem; top: .3rem; height: 40%; border-radius: .7rem;
  background: rgba(142, 164, 170, .34); pointer-events: none;
}
.nav-tab::after {   /* punto de brillo */
  content: ''; position: absolute; right: .55rem; top: .4rem; width: .5rem; height: .32rem; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: rotate(40deg); pointer-events: none;
}
.nav-tab:hover { filter: brightness(1.1); }
.nav-ico { position: relative; width: 2.2rem; height: 2.2rem; transition: transform .3s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 0 .2rem rgba(60, 220, 255, .3)); }
.nav-ico svg { width: 100%; height: 100%; }
.nav-label {
  position: relative; font-family: var(--font-title); font-size: .8rem; line-height: 1.05; color: #fff; white-space: nowrap;
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill;
}
.nav-tab.active {
  flex-grow: 1.45; height: calc(var(--nav-h) - .15rem);
  background: linear-gradient(180deg, #0a93b6 0%, #0a7292 45%, #0e5c7d 100%);
  box-shadow: inset 0 2.5px 0 #5ce6f3, inset 2.5px 0 0 rgba(92, 230, 243, .45), inset -2.5px 0 0 rgba(92, 230, 243, .45);
}
.nav-tab.active::before { background: rgba(178, 222, 236, .6); }
.nav-tab.active::after { background: rgba(255, 255, 255, .85); }
.nav-tab.active .nav-ico { transform: scale(1.32) translateY(-.08rem); }
.nav-tab.active .nav-label { font-size: .92rem; }
.nav-tab .dot-alert { top: -10px; right: -5px; }

/* ── Aviso de reconexión ── */
.status-banner {
  position: fixed; z-index: 95; left: 0; right: 0; margin-inline: auto; width: fit-content; top: calc(var(--safe-t) + 8px);
  display: flex; align-items: center; gap: .6rem; padding: .4rem 1.1rem .45rem;
  font-family: var(--font-title); color: #fff; font-size: 1rem;
  background: linear-gradient(180deg, #ffb14a 0 50%, #ff7417 50% 100%); border: 2.5px solid var(--ink); border-radius: 999px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -3px 0 #c24a06, 0 3px 0 var(--ink), 0 10px 20px rgba(0,0,0,.35); animation: pop-in .35s cubic-bezier(.2,1.4,.4,1);
  -webkit-text-stroke: .2em #4f1700; paint-order: stroke fill;
}
/* En pleno partido la escena tiene su propio "Reconectando…": el aviso general no se superpone. */
#app[data-playing] ~ .status-banner { display: none; }
.spinner { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; flex: none; }

/* ── Avisos (toasts): pizarra con el icono en su baldosa; los de estado, de dos tonos ── */
#toast-layer {
  position: fixed; z-index: 90; left: 50%; top: calc(var(--safe-t) + var(--top-h) + 8px); transform: translateX(-50%);
  width: min(calc(100vw - 32px), 460px); display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none;
}
.toast {
  --hi: #2c2624; --lo: #1c1817; --tink: var(--ink);
  pointer-events: auto; display: flex; align-items: center; gap: .6rem; max-width: 100%;
  padding: .42rem 1.1rem .48rem .5rem; border-radius: 14px; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: 1rem; line-height: 1.2; color: #fff;
  background: linear-gradient(180deg, var(--hi) 0 50%, var(--lo) 50% 100%); border: 2.5px solid var(--ink);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 0 0 1.5px rgba(255,255,255,.12), 0 3px 0 var(--ink), 0 12px 24px rgba(0,0,0,.35);
  animation: toast-in .4s cubic-bezier(.2,1.5,.4,1) both;
  -webkit-text-stroke: .2em var(--tink); paint-order: stroke fill;
}
.toast-ico { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.28); box-shadow: inset 0 2px 3px rgba(0,0,0,.35); }
.toast-ico .ico { width: 82%; height: 82%; }
.toast-error { --hi: #ff7666; --lo: #e2352a; --tink: #4a0603; }
.toast-ok { --hi: #b6f23a; --lo: #52c404; --tink: #173f00; }
.toast-coin { --hi: #ffe24a; --lo: #ffa60a; --tink: #4d2400; }
.toast-gem { --hi: #e785ff; --lo: #ad2fe6; --tink: #2e0550; }
.toast.out { animation: toast-out .25s ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-14px) scale(.9); } }

/* ── Modales: ventana de pizarra con la cabecera oscura y el título amarillo (kit: .hk-modal) ── */
/* El margen lateral respeta la muesca (en un iPhone apaisado la X de cerrar caía bajo la cámara). */
.modal-root { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  padding: calc(var(--safe-t) + 24px) calc(var(--safe-r) + 18px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px); }
.modal-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(20, 26, 30, .7), rgba(4, 6, 8, .88)); backdrop-filter: blur(3px); animation: fade-in .22s both; }
/* Alto máximo explícito: un porcentaje en un elemento de la rejilla no limita nada (la fila crece con
   el contenido) y una ficha alta se salía por abajo sin poder desplazarse. */
.modal {
  --head-h: 3.1rem;
  position: relative; width: min(100%, 560px); display: flex; flex-direction: column;
  max-height: calc(100vh - var(--safe-t) - var(--safe-b) - 40px);
  max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 40px);
  padding: 1.4rem 1.2rem 1.2rem; animation: pop-in .42s cubic-bezier(.2,1.35,.4,1) both;
}
.modal.panel { background: var(--slate-solid); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1.5px var(--panel-ring), 0 .5rem 1.4rem rgba(0, 0, 0, .45); }
.modal.has-head { padding-top: calc(var(--head-h) + .75rem); }
.modal-sm { width: min(100%, 440px); }
.modal-md { width: min(100%, 620px); }
.modal-lg { width: min(100%, 820px); }
.modal-xl { width: min(100%, 1040px); }
.modal-head {
  position: absolute; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 0 3rem;
  background: rgba(0, 0, 0, .42); border-bottom: 1.5px solid rgba(0, 0, 0, .65); box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
  border-radius: calc(var(--r-xl) - 1.5px) calc(var(--r-xl) - 1.5px) 0 0; pointer-events: none;
}
.modal-head .ribbon { font-size: 1.6rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-x { position: absolute; top: -14px; right: -14px; z-index: 3; width: 48px; height: 48px; }
.modal-body { min-height: 0; flex: 1; padding: .3rem .2rem; }
.modal-root.closing .modal { animation: modal-out .2s ease-in both; }
.modal-root.closing .modal-backdrop { animation: fade-in .2s reverse both; }
@keyframes modal-out { to { opacity: 0; transform: scale(.85); } }
.modal-lead { margin: .2rem 0 1rem; text-align: center; font-weight: 700; color: var(--text-dim); font-size: 1.02rem; }
.modal-lead b { color: #fff; }
.modal-foot { margin: .8rem 0 0; font-size: .85rem; text-align: center; }
.modal-actions { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }

.confirm { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.confirm-text { margin: .4rem 0 0; font-size: 1.1rem; font-weight: 800; }
.confirm-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* «Hay más abajo» (dom.js → scrollHints): el borde inferior del contenedor que desplaza se funde. */
.more-below {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6rem), rgba(0,0,0,.18));
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6rem), rgba(0,0,0,.18));
}

/* ── Piezas comunes ── */
.screen-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: .6rem; padding: .6rem var(--gutter) .3rem; }
.screen-head .ribbon { justify-self: center; font-size: 2rem; }
.screen-head .head-cups { justify-self: end; font-size: 1.15rem; white-space: nowrap; }

/* Selector segmentado: hueco oscuro y la opción activa como botón turquesa de cristal */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 16px; background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 3px 6px rgba(0,0,0,.5); }
.seg-btn {
  position: relative; min-height: 40px; padding: 0 1.1rem; border: 0; border-radius: 12px; background: transparent;
  font-family: var(--font-title); font-size: 1.05rem; color: var(--text-dim);
}
.seg-btn::after { content: ''; position: absolute; inset: -5px 0; }  /* área táctil ≥ 44 px */
.seg-btn.active { color: #fff; background: linear-gradient(180deg, #1ac4e4 0%, #0e9fc4 55%, #0a82a6 100%);
  box-shadow: inset 0 2px 0 #7cf1ff, inset 0 -3px 0 #055f7e, 0 0 0 1.5px var(--ink);
  -webkit-text-stroke: .2em #05303f; paint-order: stroke fill; text-shadow: 0 .06em 0 #05303f; }
.seg-dot { position: absolute; top: -7px; right: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--font-title); font-size: max(11px, .72rem); background: linear-gradient(180deg, #ff5a55 0 50%, #e0172a 50% 100%); border: 1.5px solid var(--ink); color: #fff;
  -webkit-text-stroke: .2em #4a0406; paint-order: stroke fill; }

.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  --rc: #10abd0;
  min-height: 36px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--well); color: var(--text-dim); font-weight: 800; font-size: max(11px, .9rem);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.25); position: relative;
}
.chip::after { content: ''; position: absolute; inset: -4px 0; }
.chip.active { color: #fff; background: var(--rc); border-color: var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.25), 0 2px 0 var(--ink);
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; }

.power-chip {
  --pc: #fff; display: inline-flex; align-items: center; gap: .4rem; padding: .12rem .7rem .15rem .35rem;
  border-radius: 999px; background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14);
  font-weight: 800; font-size: max(11px, .85rem); white-space: nowrap;
}
.power-chip i { width: .95rem; height: .95rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc) 55%); border: 1.5px solid var(--ink); box-shadow: 0 0 8px var(--pc); flex: none; }

.flag-canvas { width: 2.1rem; aspect-ratio: 3 / 2; border-radius: 4px; border: 2px solid var(--ink); background: #2d4a60; flex: none; box-shadow: 0 2px 0 rgba(0,0,0,.35); }

kbd {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .4em; margin: 0 .1em;
  font-family: var(--font-title); font-size: .85rem; color: var(--ink);
  background: linear-gradient(180deg, #fff 0 50%, #d5dde3 50% 100%); border: 2px solid var(--ink); border-radius: 7px; box-shadow: 0 3px 0 var(--ink);
}
.empty-msg { text-align: center; color: var(--text-dim); font-weight: 700; padding: 1.5rem; }

.rar-chip { --rc: #8fd14f; display: inline-block; padding: .05rem .6rem; border-radius: 999px; font-family: var(--font-title); font-weight: 400; font-size: .82rem; color: #fff;
  background: var(--rc); border: 1.5px solid var(--ink); -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; }

.pulse { animation: pulse 1.3s ease-in-out infinite; }
.pop { animation: pop-in .4s cubic-bezier(.2,1.5,.4,1); }
.pop-big { animation: pop-big .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop-big { 0% { transform: scale(1); } 35% { transform: scale(1.6) rotate(-8deg); } 100% { transform: scale(1); } }

/* Retrato genérico en una tarjeta turquesa como las de la tira (lista, perfil, sala…): el retrato va
   sobre el color de su rareza y el apodo en la franja de abajo. */
.pcard {
  --kit: #2d4a60;
  position: relative; display: flex; flex-direction: column; align-items: center; width: 13rem;
  border-radius: var(--r-lg); border: 2.5px solid var(--ink); overflow: hidden;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), 0 .3rem .7rem rgba(0,0,0,.35);
}
.pcard-art {
  position: relative; width: 100%; aspect-ratio: 1.05; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--kit) 55%, #fff) 0%, var(--kit) 45%, color-mix(in srgb, var(--kit) 50%, #000) 100%);
}
.pcard-art::before { content: ''; position: absolute; left: 5%; right: 5%; top: 4%; height: 44%; border-radius: .7rem; background: rgba(255, 255, 255, .18); pointer-events: none; }
.pcard-art::after { content: ''; position: absolute; left: 7%; top: 6%; width: 9%; height: 5%; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-35deg); pointer-events: none; }
.pcard-art canvas { position: relative; z-index: 1; width: 100%; height: 100%; }
/* El apodo ocupa toda la franja (cabe uno de 16 caracteres) y encoge con la tarjeta; el nivel y
   la bandera van como insignias en las esquinas del retrato. */
.pcard-plate { width: 100%; display: flex; align-items: center; justify-content: center; padding: .38rem .4rem .42rem; background: #2d4a60; border-top: 2px solid var(--ink); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.16); container-type: inline-size; }
.pcard-nick { min-width: 0; max-width: 100%; font-family: var(--font-title); font-size: 1rem; font-size: clamp(11px, 10.5cqi, 1.1rem); line-height: 1.15; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink); }
.pcard-lvl { position: absolute; z-index: 3; top: .25rem; left: .25rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.pcard .flag-canvas { width: 1.9rem; }
.pcard .pcard-art .pcard-flag { position: absolute; z-index: 3; top: .45rem; right: .45rem; width: 1.9rem; height: auto; }

@media (max-height: 500px) and (orientation: landscape) {
  .topbar { gap: .7rem; }
  .tb-level .level-badge { width: 2.3rem; height: 2.3rem; }
  .tb-xp { width: 7rem; }
  .tb-nick { font-size: .88rem; line-height: 1.35; }
  .tb-xpbar { height: .8rem; }
  .tb-xpbar > span { display: none; }   /* a este tamaño no se lee: la cifra está en el perfil */
  .res { height: 2rem; min-width: 6.2rem; }
  .res-ico { width: 2.35rem; height: 2.35rem; }
  .res-num { font-size: 1.05rem; }
  .res-plus { width: 1.55rem; height: 1.55rem; }
  .tb-gear { width: 40px; height: 40px; }
  .nav-tab { height: calc(var(--nav-h) - .9rem); }
  .nav-tab:not(.active) .nav-label { display: none; }
  .nav-ico { width: 1.95rem; height: 1.95rem; }
  .nav-tab.active .nav-ico { transform: scale(1.1); }
  .nav-tab.active .nav-label { font-size: .82rem; }
  .modal { --head-h: 2.35rem; padding: 1.1rem 1rem 1rem; }
  .modal.has-head { padding-top: calc(var(--head-h) + .45rem); }
  .modal-head .ribbon { font-size: 1.3rem; }
  .screen-head { padding: .3rem var(--gutter) .1rem; }
  .screen-head .ribbon { font-size: 1.45rem; }
}
@media (orientation: portrait) {
  .topbar { gap: .5rem; }
  .tb-xp { width: 5.6rem; }
  .tb-nick { font-size: max(12px, .85rem); }
  .tb-xpbar > span { display: none; }
  .res { min-width: 0; padding: 0 1.1rem 0 1.8rem; margin-left: 1rem; }
  .res-cups { display: none; }
  .res-num { font-size: 1rem; }
  .nav-label { font-size: .7rem; }
  .nav-tab { max-width: none; padding: .1rem .1rem 0; }
  .nav-tab:not(.active) .nav-label { display: none; }
  .navbar { gap: .2rem; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .tb-xp { display: none; }
}

/* Retrato en ficha completa mirando a la izquierda (artwork.js: frame 'full' con facing −1). */
canvas.is-mirror { transform: scaleX(-1); }

/* ── Foco: resplandor del foco del fondo, cono de luz y el PEDESTAL redondo en el que se apoya el
   personaje (piedra clara con la cara de arriba iluminada por el foco y el canto de pizarra). El
   contenedor mide con unidades de contenedor (cqw/cqh) para que todo guarde proporción con el
   personaje, que se pinta encima en un <canvas>. ── */
.spot { position: relative; isolation: isolate; container-type: size; }
.spot-rays {   /* rayos muy suaves que giran detrás (solo se ven cerca del personaje) */
  position: absolute; left: 50%; top: 48%; width: min(118cqw, 150cqh); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -3;
  background: repeating-conic-gradient(from 0deg, rgba(255,236,150,.12) 0 7deg, rgba(255,236,150,0) 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 56%); mask-image: radial-gradient(circle, #000 10%, transparent 56%);
  animation: spin-c 70s linear infinite; pointer-events: none;
}
.spot-beam {   /* cono de luz desde arriba hasta el pedestal */
  position: absolute; left: 50%; top: -14%; bottom: 8%; width: min(92cqw, 100cqh); transform: translateX(-50%); z-index: -2;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255,247,200,0) 0%, rgba(255,236,150,.16) 40%, rgba(255,226,120,.3) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
  pointer-events: none;
}
.spot-glow {
  position: absolute; left: 50%; top: 56%; width: min(90cqw, 96cqh); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -2; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,236,150,.45), rgba(255,206,90,.16) 55%, rgba(255,190,60,0) 100%);
  pointer-events: none;
}
.spot-floor {   /* pedestal: canto de pizarra con filo turquesa */
  position: absolute; left: 50%; bottom: 3cqh; width: min(62cqw, 70cqh); aspect-ratio: 3.4; transform: translateX(-50%); z-index: -1; border-radius: 50%;
  background: linear-gradient(180deg, #1f5a6c 0%, #164555 55%, #0e2e3a 100%);
  border: 2.5px solid var(--ink); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), inset 0 -.5rem .6rem rgba(40,210,240,.18), 0 0 40px 10px rgba(255,214,90,.28), 0 12px 22px rgba(0,0,0,.45);
}
.spot-floor::before {   /* cara de arriba: piedra clara iluminada por el foco (más luz en el centro) */
  content: ''; position: absolute; left: -2.5px; right: -2.5px; top: -2.5px; height: 74%; border-radius: 50%; border: 2.5px solid var(--ink);
  background: radial-gradient(ellipse 70% 82% at 50% 38%, #fffbe8 0%, #fbe9b4 34%, #eccb82 62%, #c79c5c 86%, #9a744a 100%);
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.25);
}
.spot-floor::after {   /* aro turquesa en la cara de arriba (como el filo del estante) */
  content: ''; position: absolute; left: 9%; right: 9%; top: 9%; height: 52%; border-radius: 50%;
  border: 2px solid rgba(40, 210, 240, .55); border-bottom-color: rgba(40, 210, 240, .15);
}
.spot-spark { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.spot-spark i {
  position: absolute; width: .9rem; aspect-ratio: 1; background: #fff6c8;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 6px rgba(255,220,120,.9)); animation: spot-twinkle 2.6s ease-in-out infinite; opacity: 0;
}
.spot-spark i:nth-child(1) { left: 22%; top: 20%; animation-delay: .2s; }
.spot-spark i:nth-child(2) { right: 20%; top: 34%; width: .7rem; animation-delay: 1.1s; }
.spot-spark i:nth-child(3) { left: 17%; top: 60%; width: .6rem; animation-delay: 1.8s; }
.spot-spark i:nth-child(4) { right: 25%; top: 12%; width: .55rem; animation-delay: .7s; }
@keyframes spot-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; } }