/*
  LA CASA DEL 15 · capa visual viva
  ----------------------------------
  Esta hoja viste la interfaz existente. No define navegación, estado, reglas,
  economía ni handlers; tampoco cambia display, position o hitboxes funcionales.
*/

:root {
  --casa15-ink:#090402;
  --casa15-walnut-950:#140805;
  --casa15-walnut-900:#260b08;
  --casa15-walnut-800:#461608;
  --casa15-walnut-650:#6e3320;
  --casa15-leather-900:#2f0c0b;
  --casa15-leather-700:#6a2800;
  --casa15-leather-500:#9e4800;
  --casa15-felt-950:#05100a;
  --casa15-felt-850:#08251a;
  --casa15-felt-700:#174b36;
  --casa15-brass-950:#4a2a07;
  --casa15-brass-800:#8a5c0a;
  --casa15-brass-600:#c9971c;
  --casa15-brass-400:#e6bd4e;
  --casa15-brass-200:#ffe39a;
  --casa15-ivory:#fff3d7;
  --casa15-cream:#e8e2d0;
  --casa15-muted:#b9c8bb;
  --casa15-panel:#0a291d;
  --casa15-panel-raised:#1b3728;
  --casa15-panel-deep:#081b14;
  --casa15-panel-line:rgba(215,193,131,.34);
  --casa15-paper:#f5efda;
  --casa15-paper-ink:#29392d;
  --casa15-line:rgba(239,198,94,.5);
  --casa15-line-soft:rgba(239,198,94,.23);
  --casa15-focus:#fff0ad;
  --casa15-shadow-1:0 .25rem .7rem rgba(0,0,0,.42);
  --casa15-shadow-2:0 .75rem 1.7rem rgba(0,0,0,.58);
  --casa15-shadow-3:0 1.5rem 4.5rem rgba(0,0,0,.76);
  --casa15-ease:cubic-bezier(.22,1,.36,1);
  --casa15-ease-press:cubic-bezier(.2,.8,.3,1);
  --casa15-motion-fast:120ms;
  --casa15-motion-base:200ms;
  --casa15-motion-slow:320ms;
  --casa15-motion-scene:520ms;
  --casa15-space-1:.25rem;
  --casa15-space-2:.5rem;
  --casa15-space-3:.75rem;
  --casa15-space-4:1rem;
  --casa15-space-5:1.5rem;
  --casa15-radius-sm:.35rem;
  --casa15-radius-md:.75rem;
  --casa15-radius-lg:1.25rem;
  --casa15-elevation-1:inset 0 1px rgba(255,242,194,.12),0 .2rem .5rem rgba(0,0,0,.34);
  --casa15-elevation-2:inset 0 1px rgba(255,242,194,.16),0 .45rem 1rem rgba(0,0,0,.46);
  --casa15-elevation-3:inset 0 1px rgba(255,242,194,.2),0 .8rem 1.8rem rgba(0,0,0,.58);
  --casa15-elevation-4:inset 0 1px rgba(255,242,194,.22),0 1.2rem 3rem rgba(0,0,0,.68);
  --casa15-elevation-5:inset 0 1px rgba(255,242,194,.24),0 1.7rem 4.6rem rgba(0,0,0,.78);
  --casa15-success:#75d79b;
  --casa15-success-deep:#174b36;
  /* LA BRASA (2026-09-15). El estudio de color midió la paleta real de los siete mazos y
     encontró que tienen casi diez por ciento de rojo vivo —la laca #a01008, la llama del
     Fantasía #881808, las copas de la baraja de casa #c01028— y que la casa no tenía
     ninguno. Por eso podía sentirse plana aunque estuviera ordenada: no había un color que
     dijera «esto está vivo, mirá acá». Esta escalera sale del tono 29, que es el de la
     laca, y se gasta SÓLO en lo que está pasando ahora: la escoba, el cofre con premio y
     el reloj cuando se acaba el turno. Los contrastes están medidos sobre el cuero #281509:
     el 300 da 6,6:1 y el 400 da 4,6:1, así que los dos sirven para texto; del acento para
     abajo son relleno y sombra, nunca letra. */
  --brasa-300:#f27e6e;
  --brasa-400:#df5547;
  --brasa:#be241b;
  --brasa-700:#86130d;
  --brasa-900:#5d0b07;
  --casa15-error:#ef8b79;
  --casa15-error-deep:#5c1212;
  --casa15-off:#8e846b;
  --casa15-lana:url('/tema/casa-del-15/materiales/pano-lana-v1.webp?v=1');
  --casa15-cuero:url('/tema/casa-del-15/materiales/cuero-bordo-v1.webp?v=1');
}

/* Escenario: salón real, profundidad cálida y una sola fuente de luz cenital. */
#menu {
  background:
    linear-gradient(180deg,rgba(1,5,3,.12),rgba(1,7,5,.22) 38%,rgba(2,4,3,.87) 92%),
    radial-gradient(ellipse 86% 34% at 50% 8%,rgba(255,211,105,.25),transparent 70%),
    radial-gradient(ellipse 72% 28% at 50% 88%,rgba(26,114,78,.18),transparent 74%),
    url('/tema/casa-del-15/salon-mobile.webp?v=1') center top/cover no-repeat,
    var(--casa15-felt-950) !important;
}

#menu::before {
  inset:0 !important;
  opacity:.72 !important;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 13% 18%,rgba(255,224,139,.74) 0 1px,transparent 1.8px),
    radial-gradient(circle at 82% 22%,rgba(255,224,139,.58) 0 1px,transparent 1.7px),
    radial-gradient(circle at 19% 64%,rgba(255,224,139,.32) 0 1px,transparent 1.7px),
    radial-gradient(circle at 76% 73%,rgba(255,224,139,.34) 0 1px,transparent 1.7px),
    radial-gradient(ellipse 42% 16% at 50% 9%,rgba(255,210,95,.12),transparent 72%) !important;
  animation:casa15-atmosphere 9s ease-in-out infinite alternate;
}

#menu::after {
  background:
    linear-gradient(90deg,rgba(0,0,0,.64),transparent 11% 89%,rgba(0,0,0,.64)),
    radial-gradient(ellipse 82% 62% at 50% 34%,transparent 50%,rgba(1,2,1,.56) 100%),
    linear-gradient(180deg,transparent 48%,rgba(0,0,0,.54) 100%) !important;
  box-shadow:inset 0 0 8rem rgba(0,0,0,.52),inset 0 -7rem 9rem rgba(0,0,0,.48) !important;
}

#menu.show .logo15 {
  animation:casa15-crest-arrive .78s var(--casa15-ease) both;
}

#menu.show .menupanel {
  animation:casa15-cabinet-arrive .72s .08s var(--casa15-ease) both;
}

#menu .logo15 .brandhalo {
  background:
    repeating-conic-gradient(from 0deg,rgba(239,194,79,.08) 0 .6deg,transparent .8deg 15deg),
    radial-gradient(circle,rgba(255,211,101,.28),rgba(149,34,37,.1) 42%,transparent 70%) !important;
  box-shadow:0 0 3rem rgba(231,177,55,.12);
}

#menu .logo15 .crest {
  filter:
    drop-shadow(0 2px 0 rgba(255,244,202,.28))
    drop-shadow(0 1.45rem 2.2rem rgba(0,0,0,.82))
    drop-shadow(0 0 1.5rem rgba(234,179,53,.24)) !important;
}

#menu .logo15 .promesa {
  color:var(--casa15-ivory) !important;
  text-shadow:0 2px 3px #050201,0 0 1.4rem rgba(255,214,112,.18) !important;
}


/* HUD: medallones de orfebrería, sin cambiar los blancos táctiles. */
#menu .yochip .yofoto {
  border:1px solid rgba(255,228,151,.55);
  background:
    radial-gradient(circle at 38% 26%,rgba(255,236,174,.18),transparent 27%),
    linear-gradient(145deg,var(--casa15-leather-700),var(--casa15-felt-950));
  box-shadow:
    0 0 0 .17rem var(--casa15-walnut-900),
    0 0 0 .23rem rgba(226,177,63,.7),
    0 .4rem 1rem rgba(0,0,0,.68),
    inset 0 1px rgba(255,245,205,.16) !important;
}

#menu .yochip .yoaro .pista { stroke:rgba(21,6,3,.9); }
#menu .yochip .yoaro .corre {
  stroke:var(--casa15-brass-200);
  filter:drop-shadow(0 0 .23rem rgba(255,210,92,.6));
}

#menu .yochip .yonivel,
#menu .yochip .yomas {
  border-color:rgba(255,232,164,.82) !important;
  background:
    radial-gradient(circle at 38% 28%,#fff0ad,#d7a83b 56%,#754714 78%) !important;
  color:#291006 !important;
  box-shadow:0 .2rem .55rem rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.62) !important;
}

#menu .walletchip,
#menu .hudtop .hbtn {
  border-color:rgba(247,207,105,.72) !important;
  background:
    radial-gradient(circle at 30% 17%,rgba(255,241,193,.2),transparent 26%),
    repeating-linear-gradient(104deg,transparent 0 .45rem,rgba(255,255,255,.025) .48rem,transparent .52rem .9rem),
    linear-gradient(180deg,rgba(91,34,17,.97),rgba(28,8,5,.99)) !important;
  box-shadow:
    inset 0 1px rgba(255,240,184,.3),
    inset 0 -.18rem .4rem rgba(0,0,0,.58),
    0 .35rem 1rem rgba(0,0,0,.62),
    0 0 0 2px rgba(18,5,3,.54) !important;
}

#menu .walletchip b { color:#ffe39a !important; }
#menu .hudtop .hbtn svg { stroke:#ffdf87 !important; }

#menu .walletchip .chipmas {
  background:radial-gradient(circle at 35% 24%,#fff3c4,#e2b94e 58%,#9a6312) !important;
  border-color:#fff0ad !important;
  box-shadow:0 .12rem .35rem rgba(0,0,0,.7),0 0 .65rem rgba(241,190,66,.24),inset 0 1px rgba(255,255,255,.65) !important;
}

/* El panel principal como mueble tallado de la Casa. */
#menu .menupanel {
  border:0 !important;
  border-radius:1.3rem 2.5rem 1.3rem 2.5rem !important;
  background:
    radial-gradient(circle at 1.05rem 1.05rem,#ffe39a 0 .08rem,#84500e .1rem .18rem,transparent .2rem),
    radial-gradient(circle at calc(100% - 1.05rem) 1.05rem,#ffe39a 0 .08rem,#84500e .1rem .18rem,transparent .2rem),
    radial-gradient(circle at 1.05rem calc(100% - 1.05rem),#ffe39a 0 .08rem,#84500e .1rem .18rem,transparent .2rem),
    radial-gradient(circle at calc(100% - 1.05rem) calc(100% - 1.05rem),#ffe39a 0 .08rem,#84500e .1rem .18rem,transparent .2rem),
    linear-gradient(145deg,rgba(255,246,207,.09),transparent 24%),
    radial-gradient(ellipse 90% 28% at 50% 0,rgba(246,198,78,.16),transparent 70%),
    repeating-linear-gradient(96deg,transparent 0 .82rem,rgba(255,255,255,.018) .86rem,transparent .9rem 1.6rem),
    linear-gradient(155deg,var(--casa15-walnut-650),var(--casa15-walnut-900) 26%,var(--casa15-felt-950) 54%,#150902 100%) !important;
  box-shadow:
    0 0 0 1px #130402,
    0 0 0 2px var(--casa15-brass-800),
    0 0 0 3px rgba(255,225,139,.72),
    0 0 0 7px rgba(30,8,4,.94),
    var(--casa15-shadow-3),
    inset 0 1px rgba(255,239,181,.22),
    inset 0 -.45rem 1rem rgba(0,0,0,.42) !important;
}

#menu .menupanel::before {
  inset:.55rem !important;
  border:1px solid rgba(247,207,105,.34) !important;
  border-radius:.9rem 2rem .9rem 2rem !important;
  background:
    linear-gradient(135deg,rgba(255,233,164,.13),transparent 11%) top left/3rem 3rem no-repeat,
    linear-gradient(315deg,rgba(255,233,164,.1),transparent 11%) bottom right/3rem 3rem no-repeat;
  box-shadow:inset 0 0 0 1px rgba(18,4,2,.82),inset 0 0 1rem rgba(0,0,0,.38);
}

#menu .mesaespera b {
  color:#ffe39a !important;
  text-shadow:0 1px #140805,0 0 .8rem rgba(239,189,64,.25);
}

#menu .mesaespera span {
  height:2px !important;
  background:linear-gradient(90deg,transparent,var(--casa15-brass-400),transparent) !important;
  filter:drop-shadow(0 0 .2rem rgba(239,192,72,.36));
}

/* Acciones: sello mayor, placas secundarias y estados legibles. */
#menu .menupanel > button {
  position:relative;
  isolation:isolate;
  border-radius:.35rem 1.05rem .35rem 1.05rem !important;
  transition:transform .18s var(--casa15-ease),filter .18s ease,box-shadow .18s ease !important;
}

#menu .menupanel > button.primary {
  border:1px solid #fff0ad !important;
  color:#3b1608 !important;
  text-shadow:0 1px rgba(255,252,224,.72) !important;
  background:
    radial-gradient(ellipse 70% 74% at 50% -18%,rgba(255,255,235,.85),transparent 58%),
    repeating-linear-gradient(112deg,transparent 0 .65rem,rgba(107,58,8,.055) .7rem,transparent .75rem 1.45rem),
    linear-gradient(180deg,#fff0ad,#e2b143 52%,#a16815 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.88),
    inset 0 -.32rem .55rem rgba(103,54,5,.4),
    0 0 0 .18rem #461608,
    0 0 0 .24rem rgba(227,181,67,.66),
    0 .45rem 0 #512008,
    0 1rem 2rem rgba(0,0,0,.62),
    0 0 1.6rem rgba(239,188,56,.2) !important;
}

#menu .menupanel > button.primary::before {
  position:absolute;
  inset:.3rem;
  content:'';
  pointer-events:none;
  border:1px solid rgba(91,47,6,.34);
  border-radius:.18rem .75rem .18rem .75rem;
  box-shadow:inset 0 1px rgba(255,255,255,.34);
}

#menu .menupanel > button.primary::after {
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent) !important;
  animation:casa15-button-shine 5.4s ease-in-out infinite !important;
}

#menu .menupanel > button.primary:active {
  transform:translateY(.3rem) scale(.992) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    inset 0 -.2rem .4rem rgba(103,54,5,.42),
    0 0 0 .18rem #461608,
    0 .15rem 0 #512008,
    0 .45rem .9rem rgba(0,0,0,.54) !important;
}

#menu .menupanel > button.aux {
  border:1px solid rgba(246,207,104,.58) !important;
  color:var(--casa15-ivory) !important;
  background:
    linear-gradient(145deg,rgba(255,244,198,.1),transparent 35%),
    radial-gradient(ellipse 80% 78% at 50% -30%,rgba(69,170,119,.18),transparent 68%),
    repeating-linear-gradient(94deg,transparent 0 .5rem,rgba(255,255,255,.018) .53rem,transparent .57rem 1rem),
    linear-gradient(180deg,var(--casa15-felt-700),var(--casa15-felt-850) 58%,var(--casa15-felt-950)) !important;
  box-shadow:
    inset 0 1px rgba(255,245,205,.18),
    inset 0 -.2rem .4rem rgba(0,0,0,.54),
    0 0 0 .12rem rgba(29,7,4,.82),
    0 .35rem .85rem rgba(0,0,0,.5) !important;
}

#menu .menupanel > button.aux:active {
  transform:translateY(.12rem) scale(.992) !important;
}

#menu .menupanel > button:focus-visible,
#menu .menutiles > .menutile:focus-visible,
#menu :is(.walletchip,.yochip,.hbtn):focus-visible {
  outline:2px solid var(--casa15-focus) !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 5px rgba(47,13,6,.86),0 0 1.2rem rgba(255,225,132,.38) !important;
}

/* Las seis puertas reales: se conserva su orden y su handler. */
#menu .menutiles > .menutile {
  border:1px solid rgba(241,201,96,.56) !important;
  border-radius:.45rem 1.25rem .45rem 1.25rem !important;
  background:
    linear-gradient(145deg,rgba(255,247,213,.09),transparent 35%),
    radial-gradient(circle at 50% -5%,rgba(232,187,70,.14),transparent 57%),
    repeating-linear-gradient(98deg,transparent 0 .6rem,rgba(255,255,255,.018) .64rem,transparent .68rem 1.2rem),
    linear-gradient(160deg,#174b36,#0a291d 58%,#08150e) !important;
  box-shadow:
    inset 0 1px rgba(255,240,187,.18),
    inset 0 -.25rem .55rem rgba(0,0,0,.52),
    0 0 0 .16rem rgba(29,7,4,.76),
    0 .55rem 1.2rem rgba(0,0,0,.5) !important;
  transition:transform .24s var(--casa15-ease),filter .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}

#menu .menutiles > .menutile::before {
  inset:.3rem !important;
  border:1px solid rgba(240,199,94,.22) !important;
  border-radius:.25rem .95rem .25rem .95rem !important;
  box-shadow:inset 0 0 .75rem rgba(0,0,0,.28);
}

#menu .menutiles > .menutile.tienda {
  background:
    linear-gradient(145deg,rgba(255,247,213,.12),transparent 35%),
    radial-gradient(circle at 50% -5%,rgba(255,211,111,.2),transparent 58%),
    repeating-linear-gradient(98deg,transparent 0 .6rem,rgba(255,255,255,.02) .64rem,transparent .68rem 1.2rem),
    linear-gradient(160deg,#833900,#4f1d00 58%,#220900) !important;
}

#menu .menutiles > .menutile svg {
  color:#ffe39a !important;
  stroke:currentColor !important;
  border:1px solid rgba(247,207,105,.56);
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 28%,rgba(255,240,185,.2),transparent 28%),
    radial-gradient(circle,#522512,#140805 72%);
  box-shadow:
    0 0 0 .13rem rgba(10,3,2,.78),
    0 0 0 .17rem rgba(210,155,46,.38),
    0 .35rem .75rem rgba(0,0,0,.56),
    inset 0 1px rgba(255,238,178,.2);
}

#menu .menutiles > .menutile svg :is(path,circle,rect,line,polyline,polygon,ellipse):not([stroke="none"]) {
  stroke:currentColor !important;
  filter:drop-shadow(0 1px .12rem rgba(0,0,0,.72));
}

#menu .menutiles > .menutile .tname {
  color:#fff3c4 !important;
  text-shadow:0 2px 3px rgba(0,0,0,.78);
}

#menu .menutiles > .menutile .tsub { color:#d9c9a0 !important; }

/* (2026-09-15) El cofre con premio brillaba del MISMO oro que todo lo demás, así que no se
   distinguía de nada. El oro se queda —es la marca— y por fuera se le enciende la brasa: el
   cofre queda como alumbrado desde adentro, que es exactamente lo que quiere decir. */
#menu .menutiles > .menutile.brillando {
  border-color:#ffe9a0 !important;
  box-shadow:
    inset 0 1px rgba(255,242,196,.22),
    inset 0 -.25rem .55rem rgba(0,0,0,.52),
    0 0 0 .16rem rgba(29,7,4,.76),
    0 .55rem 1.2rem rgba(0,0,0,.5),
    0 0 1.5rem rgba(255,200,71,.35),
    0 0 2.6rem -.3rem var(--brasa) !important;
}
/* (2026-09-15) El cofre NO vive adentro de .menutiles: es hermano suelto del panel (así
   quedó cuando se le dio su propia fila). La regla de arriba nunca lo alcanzaba, así que
   la brasa del cofre se escribe con el selector que de verdad existe. Se descubrió
   mirando la foto: la clase estaba puesta y no pasaba nada. */
#menu #tileCofre.brillando {
  border-color:var(--brasa-400) !important;
  box-shadow:
    inset 0 1px rgba(255,242,196,.22),
    inset 0 -.25rem .55rem rgba(0,0,0,.52),
    0 .55rem 1.2rem rgba(0,0,0,.5),
    0 0 1.4rem rgba(255,200,71,.30),
    0 0 3.2rem -.2rem var(--brasa) !important;
}
#menu #tileCofre.brillando .tsub { color:var(--brasa-300) !important; }

/* Retención: manuscritos y placas, no tarjetas SaaS. */
#menu .menupanel .misioncard {
  border:1px solid rgba(239,198,94,.46) !important;
  border-radius:.4rem 1.15rem .4rem 1.15rem !important;
  background:
    linear-gradient(145deg,rgba(255,242,194,.07),transparent 34%),
    repeating-linear-gradient(96deg,transparent 0 .55rem,rgba(255,255,255,.014) .59rem,transparent .63rem 1.2rem),
    linear-gradient(155deg,rgba(73,28,16,.92),rgba(18,8,5,.96) 45%,rgba(4,22,15,.96)) !important;
  box-shadow:inset 0 1px rgba(255,234,169,.12),inset 0 0 1rem rgba(0,0,0,.3),0 .45rem 1rem rgba(0,0,0,.4) !important;
}

#menu .menupanel .misioncard::before {
  border-style:solid !important;
  border-color:rgba(239,198,94,.18) !important;
}

#menu .menupanel .misioncard .mhead { color:#ffe39a !important; }

/* Propuesta 5 aprobada. Recorte de presentación; la lámina original se conserva. */
.pieza-oro.estrella {
  clip-path:polygon(50% 2%,68% 32%,97% 35%,73% 58%,80% 92%,50% 75%,20% 92%,27% 58%,3% 35%,32% 32%);
}

/* Cierre: orfebrería de la Casa, resultado legible y premios del recibo real. */
#winBanner {
  background:rgba(6,9,8,.86) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
#winBanner > .box.wincierre {
  max-width:480px; padding:22px 26px 26px !important;
  border:1px solid #c7a267 !important; border-radius:16px !important;
  background:linear-gradient(180deg,transparent 30%,#160c09),#1e0d0b !important;
  box-shadow:0 0 0 3px #382016,0 0 0 4px #816441,0 18px 60px #000b,
    inset 0 0 0 6px #160c09,inset 0 0 0 7px #715235 !important;
}
#winBanner > .box.wincierre::before {
  inset:12px; height:auto; border:1px solid #bd945a38;
  border-radius:7px; background:none !important; mask-image:none;
  -webkit-mask-image:none; opacity:1; pointer-events:none;
}
#winBanner > .box.wincierre::after { display:none; }
#winBanner .winmedalla {
  width:186px; height:124px; object-fit:contain; margin:-4px auto 8px;
  filter:none; will-change:auto;
  mask-image:radial-gradient(ellipse 74% 75%,#000 63%,transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse 74% 75%,#000 63%,transparent 96%);
}
#winBanner .box.ceremonia .winmedalla { animation:winIn .5s ease-out both; }
#winBanner .box.ceremonia .win-in { animation:winIn .35s ease-out both; }
#winBanner .box.ceremonia .win-in.w1 { animation-delay:.12s; }
#winBanner .box.ceremonia .win-in.w2 { animation-delay:.22s; }
#winBanner .box.ceremonia .win-in.w3 { animation-delay:.32s; }
#winBanner .box.ceremonia .win-in.w4 { animation-delay:.42s; }
#winBanner .winsaldo {
  position:relative; width:fit-content; margin:0 0 10px auto;
  display:flex; align-items:center; gap:7px; padding:6px 11px;
  border:1px solid #a18051; border-radius:8px; background:#160c09;
  box-shadow:inset 0 1px #e6ca8733;
  font:15px 'Trocchi',Georgia,serif; color:#f3df9e; font-variant-numeric:tabular-nums;
}
#winBanner .winsaldo .pieza-oro { width:21px; height:21px; }
#winBanner #winTitle {
  margin:4px 0 19px; font:normal clamp(25px,7vw,34px)/1.18 'Trocchi',Georgia,serif !important;
  letter-spacing:.025em !important; color:#f6e7c0 !important;
  background:none !important; filter:none !important; text-shadow:0 2px 2px #0008;
  overflow-wrap:anywhere;
}
#winBanner #winTitle.perdi { color:#e0d5ba !important; margin-top:22px; }
#winBanner .cscore {
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:12px; padding:17px 12px 15px; border:1px solid #b28a4d66; border-radius:12px;
  background:linear-gradient(150deg,#182c25,#081b14);
  box-shadow:inset 0 1px #e6ca871a,0 4px 12px #0003;
}
#winBanner .cscore .cside { min-width:0; gap:7px; }
#winBanner .cscore .cavatar {
  width:62px; height:62px; border-radius:16px; border:1px solid #bd945a !important;
  box-shadow:0 0 0 2px #30211a,0 0 0 3px #816441,0 4px 9px #0006 !important;
}
#winBanner .cscore .lider .cavatar { border-color:#f0d98d !important; }
#winBanner .cscore b {
  font:normal 44px/1 'Trocchi',Georgia,serif; font-variant-numeric:tabular-nums;
  color:#e0d5ba; background:none; filter:none;
}
#winBanner .cscore .lider b { color:#f0d488; }
#winBanner .cscore .cname { font:12px/1.35 'Trocchi',Georgia,serif; letter-spacing:.055em; color:#efe6cf; opacity:1; overflow-wrap:anywhere; }
#winBanner .cscore .cvs { font:14px 'Trocchi',Georgia,serif; color:#b99e6a; }
#winBanner .cscore.muchos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; }
#winBanner .cscore.muchos .cside { max-width:100%; }
#winBanner .cscore.muchos .cname { white-space:normal; max-width:100%; }
#winBanner #winTally { margin:12px 0; min-height:26px; }
#winBanner #winExtras { margin:12px 0 18px; overflow-wrap:anywhere; }
#winBanner .box .cpts {
  display:inline-block; max-width:100%; padding:10px 15px;
  font:16px/1.5 'Trocchi',Georgia,serif !important; color:#f0d488 !important;
  background:#160c09 !important; border:1px solid #a8895a80 !important;
  border-radius:8px !important; box-shadow:inset 0 1px #e6ca8722 !important; text-shadow:none !important;
}
#winBanner #winRevancha {
  width:100%; min-height:50px; padding:13px 12px;
  font:normal 16px/1.35 'Trocchi',Georgia,serif !important; letter-spacing:.04em !important;
  color:#fff0ca !important; border:1px solid #c4a05b !important; border-radius:10px !important;
  background:linear-gradient(180deg,#713800,#441f00) !important;
  box-shadow:inset 0 1px #f3cf9d55,inset 0 -2px #1e0d0b,0 3px 7px #0005 !important;
}
#winBanner #diffLabel { margin:18px 0 9px; font:11px/1.4 'Trocchi',Georgia,serif; letter-spacing:.12em; color:#d9c9ad; }
#winBanner #diffRow { display:flex; gap:8px; justify-content:center; }
#winBanner #winFila { margin:12px 0 0; gap:10px; }
#winBanner :is(#winFila,#diffRow) button {
  flex:1; min-width:0; min-height:44px; padding:10px 7px; border:1px solid #9d794d88;
  border-radius:8px !important; color:#e6ddc9 !important; background:#201713 !important;
  font:normal 14px/1.35 'Trocchi',Georgia,serif !important; box-shadow:inset 0 1px #e8d3a618 !important;
}
#winBanner button:focus-visible { outline:3px solid #f7dda8; outline-offset:3px; }
@media (max-width:360px) {
  #winBanner > .box.wincierre { padding:20px 18px !important; }
  #winBanner .winmedalla { width:156px; height:104px; }
  #winBanner .cscore { gap:8px; padding-inline:10px; }
}

/* ===== PILOTO CLASH (dueño, 2026-09-04): HOY TE FALTA ===== */
#menu .menupanel > .mananacard {
  border: 2px solid #f3ce65 !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,245,205,.32),
    inset 0 -7px 14px rgba(0,0,0,.42),
    0 5px 0 rgba(22,9,4,.6),
    0 12px 24px rgba(0,0,0,.5) !important;
}
#menu .mananacard .mhead {
  font-family: 'Lilita One', 'Trocchi', Georgia, serif !important;
  font-size: 19px !important; letter-spacing: 1.2px !important;
  color: #ffe9a0 !important; -webkit-text-fill-color: #ffe9a0 !important;
  text-shadow: 0 2px 0 #4a2412, 0 4px 8px rgba(0,0,0,.55) !important;
  text-transform: uppercase;
}
#menu .mananacard .mfila {
  background: rgba(5,18,12,.55); border: 1px solid rgba(232,195,74,.22);
  border-radius: 11px; padding: 7px 10px !important; margin: 4px 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
#menu .mananacard .mic {
  width: 26px !important; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, #694921, #3a2608 70%);
  border: 1.5px solid rgba(232,195,74,.55);
  box-shadow: inset 0 1px 0 rgba(255,230,160,.3), 0 2px 3px rgba(0,0,0,.4);
}
#menu .mananacard .costura {
  font-family: 'Lilita One', 'Trocchi', Georgia, serif !important;
  font-size: 12px !important; letter-spacing: 2px !important;
  color: #ffd77a !important; text-shadow: 0 1.5px 0 #3a1c06;
  border-top: none !important;
  background:
    linear-gradient(90deg, transparent, rgba(232,195,74,.5) 18%, rgba(232,195,74,.5) 82%, transparent) top / 100% 1.5px no-repeat;
  padding-top: 9px !important;
}

#menu .mbar,
#menu .pasebarra,
#menu .xpbar {
  border:1px solid rgba(239,198,94,.26);
  background:rgba(2,7,5,.72) !important;
  box-shadow:inset 0 .15rem .35rem rgba(0,0,0,.65);
}

#menu :is(.mbar,.pasebarra,.xpbar) > i {
  background:linear-gradient(90deg,#823100,#dfaa35 55%,#ffe39a) !important;
  box-shadow:0 0 .6rem rgba(232,183,57,.3);
}

/* Segmentos y stepper: la misma familia material en el flujo existente. */
#menu .menupanel .seg,
#menu .menupanel .stepper,
#settingsBanner .seg {
  border-color:rgba(239,198,94,.42) !important;
  border-radius:.35rem .9rem .35rem .9rem !important;
  background:linear-gradient(180deg,rgba(28,8,5,.78),rgba(2,11,7,.85)) !important;
  box-shadow:inset 0 .2rem .5rem rgba(0,0,0,.5);
}

#menu .menupanel .seg button,
#settingsBanner .seg button {
  border-radius:.2rem .65rem .2rem .65rem !important;
  border-color:rgba(239,198,94,.2) !important;
  color:#ddcfaa !important;
  background:linear-gradient(180deg,rgba(50,26,16,.8),rgba(8,19,13,.9)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.04) !important;
}

#menu .menupanel .seg button.on,
#menu .menupanel .seg button.primary,
#settingsBanner .seg button.on,
#settingsBanner .seg button.primary {
  border-color:#ffe39a !important;
  color:#351305 !important;
  background:linear-gradient(180deg,#fff0ad,#d7a83b 62%,#8c550e) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.72),0 0 .9rem rgba(235,184,60,.22) !important;
}

/* Cámaras reales: tienda, cofre, pase, amigos, ranking, perfil y ajustes. */
body > .banner {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0,rgba(118,35,26,.2),transparent 68%),
    rgba(2,5,4,.87) !important;
  -webkit-backdrop-filter:blur(.42rem) saturate(1.05);
  backdrop-filter:blur(.42rem) saturate(1.05);
}

body > .banner > .box.ornate {
  border:0 !important;
  border-radius:.65rem 2.2rem .65rem 2.2rem !important;
  background:
    radial-gradient(circle at 1rem 1rem,#f4ce73 0 .07rem,#6d420e .09rem .16rem,transparent .18rem),
    radial-gradient(circle at calc(100% - 1rem) calc(100% - 1rem),#f4ce73 0 .07rem,#6d420e .09rem .16rem,transparent .18rem),
    linear-gradient(145deg,rgba(255,245,202,.09),transparent 28%),
    radial-gradient(ellipse 90% 28% at 50% 0,rgba(237,188,66,.15),transparent 72%),
    repeating-linear-gradient(98deg,transparent 0 .8rem,rgba(255,255,255,.016) .84rem,transparent .88rem 1.6rem),
    linear-gradient(155deg,var(--casa15-walnut-650),var(--casa15-walnut-900) 27%,var(--casa15-felt-950) 70%,#130402) !important;
  box-shadow:
    0 0 0 1px #130402,
    0 0 0 2px #a36e18,
    0 0 0 3px rgba(255,223,133,.74),
    0 0 0 7px rgba(29,7,4,.94),
    var(--casa15-shadow-3),
    inset 0 1px rgba(255,237,177,.2) !important;
}

/* Alertas operativas y anotador usan la caja histórica sin `.ornate`: también
   pertenecen a la Casa, aunque su contrato y su contenido sigan intactos. */
body > .banner > .box:not(.ornate) {
  border:0 !important;
  border-radius:.55rem 1.75rem .55rem 1.75rem !important;
  color:var(--casa15-ivory) !important;
  background:
    radial-gradient(circle at .9rem .9rem,#f4ce73 0 .065rem,#6d420e .085rem .15rem,transparent .17rem),
    radial-gradient(circle at calc(100% - .9rem) calc(100% - .9rem),#f4ce73 0 .065rem,#6d420e .085rem .15rem,transparent .17rem),
    linear-gradient(145deg,rgba(255,245,202,.09),transparent 28%),
    radial-gradient(ellipse 90% 28% at 50% 0,rgba(237,188,66,.14),transparent 72%),
    linear-gradient(155deg,var(--casa15-walnut-650),var(--casa15-walnut-900) 27%,var(--casa15-felt-950) 72%,#130402) !important;
  box-shadow:
    0 0 0 1px #130402,
    0 0 0 2px #a36e18,
    0 0 0 3px rgba(255,223,133,.68),
    0 0 0 6px rgba(29,7,4,.94),
    var(--casa15-shadow-3),
    inset 0 1px rgba(255,237,177,.18) !important;
}

body > .banner > .box:not(.ornate) > h3 {
  color:#ffe9a0 !important;
  font-family:'Lilita One','Trocchi',Georgia,serif !important;
  letter-spacing:.075em;
  text-shadow:0 2px #190603,0 0 1rem rgba(235,181,53,.2) !important;
}

body > .banner > .box.ornate::before,
body > .banner > .box.ornate::after {
  border-color:rgba(245,205,101,.28) !important;
  background:linear-gradient(90deg,transparent,rgba(246,207,104,.6),transparent) !important;
}

body > .banner > .box.ornate > .ctitle {
  color:#ffe9a0 !important;
  text-shadow:0 2px #190603,0 0 1.1rem rgba(235,181,53,.23) !important;
}

body > .banner > .box.ornate > .ctitle span { color:#e2b143 !important; }

body > .banner :is(button.primary,button.aux) {
  border-radius:.3rem .95rem .3rem .95rem !important;
}

body > .banner button.primary {
  border-color:#ffe39a !important;
  color:#351305 !important;
  text-shadow:0 1px rgba(255,255,255,.56) !important;
  background:linear-gradient(180deg,#fff0ad,#d7a83b 60%,#8c550e) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.76),inset 0 -.22rem .45rem rgba(89,43,3,.35),0 .3rem 0 #4a1907,0 .7rem 1.25rem rgba(0,0,0,.48) !important;
}

body > .banner button.aux {
  border-color:rgba(241,200,95,.48) !important;
  color:var(--casa15-ivory) !important;
  background:linear-gradient(180deg,var(--casa15-felt-700),var(--casa15-felt-850) 58%,var(--casa15-felt-950)) !important;
  box-shadow:inset 0 1px rgba(255,244,201,.12),0 .32rem .8rem rgba(0,0,0,.42) !important;
}

/* Tienda y Gira heredan el salón sin perder sus estados de catálogo o provincia. */
#themeBanner .esec,
#themeBanner .sw,
#gira .gplaca,
#gira .grival {
  border-color:rgba(241,199,94,.5) !important;
  box-shadow:inset 0 1px rgba(255,239,184,.16),inset 0 -.25rem .6rem rgba(0,0,0,.48),0 .6rem 1.35rem rgba(0,0,0,.48) !important;
}

#themeBanner .sw.on,
#gira .grival.actual {
  border-color:#ffe9a0 !important;
  box-shadow:inset 0 0 0 2px rgba(234,187,67,.22),0 0 0 1px rgba(255,227,145,.28),0 .8rem 1.7rem rgba(0,0,0,.56),0 0 1.4rem rgba(235,181,53,.2) !important;
}

#themeBanner #estilo {
  padding-bottom:1.25rem;
  scroll-padding-block:1rem 5.25rem;
}

#themeBanner #themeClose {
  position:relative;
  z-index:3;
  box-shadow:inset 0 1px rgba(255,255,255,.82),inset 0 -.25rem .5rem rgba(89,43,3,.36),0 -.85rem 1.4rem rgba(3,8,5,.68),0 .3rem 0 #4a1907,0 .75rem 1.35rem rgba(0,0,0,.5) !important;
}

#gira {
  background:
    linear-gradient(180deg,rgba(1,6,4,.26),rgba(1,7,5,.54) 52%,rgba(2,4,3,.92)),
    radial-gradient(ellipse 78% 34% at 50% 7%,rgba(255,211,105,.18),transparent 72%),
    url('/tema/casa-del-15/salon-mobile.webp?v=1') center top/cover no-repeat,
    var(--casa15-felt-950) !important;
}

/* El cofre deja de flotar como pictograma: ocupa un pequeño altar de la Casa. */
#cofreBanner #cofreEscena {
  position:relative;
  isolation:isolate;
  width:min(100%,13.5rem);
  margin:.25rem auto .5rem !important;
  padding:.45rem 1rem;
  overflow:hidden;
  border:1px solid rgba(244,204,102,.32);
  border-radius:50% 50% 1.2rem 1.2rem;
  background:
    radial-gradient(ellipse 58% 54% at 50% 52%,rgba(255,227,135,.22),transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 52%,rgba(239,193,76,.08) 0 2deg,transparent 2deg 15deg),
    linear-gradient(180deg,rgba(84,28,18,.72),rgba(2,18,12,.86));
  box-shadow:inset 0 1px rgba(255,239,184,.16),inset 0 -.7rem 1.4rem rgba(0,0,0,.42),0 .65rem 1.5rem rgba(0,0,0,.44);
}

#cofreBanner #cofreEscena::before {
  position:absolute;
  inset:10% 15%;
  z-index:-1;
  content:'';
  border:1px solid rgba(247,208,109,.22);
  border-radius:50%;
  box-shadow:0 0 1.4rem rgba(237,184,53,.14),inset 0 0 1.2rem rgba(237,184,53,.1);
}

#cofreBanner #cofreSvg {
  filter:drop-shadow(0 .8rem .75rem rgba(0,0,0,.62)) drop-shadow(0 0 .7rem rgba(243,190,60,.16));
}

/* La barra de cantos es una consola ceremonial, no un bloque ajeno al salón. */
.cantobar {
  border-color:rgba(239,196,86,.66) !important;
  background:
    linear-gradient(145deg,rgba(255,241,190,.08),transparent 32%),
    repeating-linear-gradient(96deg,transparent 0 .62rem,rgba(255,255,255,.015) .66rem,transparent .7rem 1.25rem),
    linear-gradient(155deg,var(--casa15-walnut-650),var(--casa15-walnut-900) 34%,var(--casa15-felt-950)) !important;
  box-shadow:inset 0 1px rgba(255,234,167,.15),inset 0 -.35rem .8rem rgba(0,0,0,.4),0 .7rem 1.6rem rgba(0,0,0,.54) !important;
}

.cantobar button {
  border-color:rgba(241,201,99,.44) !important;
  color:var(--casa15-ivory) !important;
  background:linear-gradient(180deg,var(--casa15-felt-700),var(--casa15-felt-850) 58%,var(--casa15-felt-950)) !important;
  box-shadow:inset 0 1px rgba(255,242,194,.12),0 .3rem .75rem rgba(0,0,0,.4) !important;
}

.cantobar button.grande {
  border-color:rgba(255,222,133,.7) !important;
  background:linear-gradient(180deg,var(--casa15-leather-500),var(--casa15-leather-700) 58%,var(--casa15-leather-900)) !important;
}

/* Mesa real: se conserva --felt y toda geometría; sólo se viste el mueble. */
.board {
  background:
    linear-gradient(90deg,rgba(34,8,5,.64),transparent 8% 92%,rgba(34,8,5,.64)),
    repeating-linear-gradient(96deg,transparent 0 .8rem,rgba(255,255,255,.012) .84rem,transparent .88rem 1.6rem),
    rgba(2,9,6,.38) !important;
  box-shadow:0 0 4rem rgba(0,0,0,.68),inset 0 0 2.4rem rgba(255,207,88,.025) !important;
}

.mesa {
  border-color:rgba(243,201,92,.78) !important;
  background:
    radial-gradient(ellipse 52% 42% at 50% 44%,rgba(91,210,144,.14),transparent 72%),
    linear-gradient(110deg,transparent 34%,rgba(255,255,255,.035) 48%,transparent 62%),
    var(--felt-tex),linear-gradient(180deg,var(--felt),var(--felt-dark)) !important;
  box-shadow:
    inset 0 0 0 .32rem rgba(55,16,7,.88),
    inset 0 0 0 .45rem rgba(244,207,102,.38),
    inset 0 1.4rem 3.2rem rgba(255,255,255,.03),
    inset 0 -2.2rem 4rem rgba(0,0,0,.28),
    0 .9rem 2.2rem rgba(0,0,0,.64),
    0 0 1.6rem rgba(230,175,45,.08) !important;
}

body[data-theme="aguayo"] .mesa {
  background:
    radial-gradient(ellipse 52% 42% at 50% 44%,rgba(255,241,198,.08),transparent 70%),
    radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.34),rgba(0,0,0,.62) 78%),
    repeating-linear-gradient(90deg,#6c2d00 0 30px,#2c0c24 30px 36px,#a04a26 36px 58px,#2c0c24 58px 64px,#275c34 64px 86px,#2c0c24 86px 92px,#4e3268 92px 114px,#2c0c24 114px 120px),
    linear-gradient(180deg,#6c2d00,#3a1030) !important;
}

body[data-theme="cerros"] .mesa {
  background:
    radial-gradient(ellipse 52% 42% at 50% 44%,rgba(255,241,198,.08),transparent 70%),
    radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.3),rgba(0,0,0,.6) 80%),
    repeating-linear-gradient(180deg,#8a4a30 0 42px,#6b421e 42px 84px,#9a6a2e 84px 126px,#4e5a36 126px 168px,#7a3a26 168px 210px,#5c3102 210px 252px,#8a5a3a 252px 294px),
    linear-gradient(180deg,#8a4a30,#3a210a) !important;
}

body[data-theme="fileteado"] .mesa {
  background:
    radial-gradient(circle at 0 0,rgba(232,195,74,.3),transparent 26%),
    radial-gradient(circle at 100% 0,rgba(232,195,74,.3),transparent 26%),
    radial-gradient(circle at 0 100%,rgba(232,195,74,.3),transparent 26%),
    radial-gradient(circle at 100% 100%,rgba(232,195,74,.3),transparent 26%),
    radial-gradient(ellipse 90% 55% at 50% 16%,rgba(255,255,255,.07),transparent 62%),
    radial-gradient(ellipse at 50% 35%,#12402a,#062015) !important;
}

.rivalrow,
.mano {
  border-color:rgba(239,195,84,.68) !important;
  background:
    linear-gradient(145deg,rgba(255,235,169,.06),transparent 31%),
    repeating-linear-gradient(94deg,transparent 0 .7rem,rgba(255,255,255,.016) .74rem,transparent .78rem 1.45rem),
    radial-gradient(ellipse 80% 120% at 50% -25%,rgba(255,232,163,.08),transparent 62%),
    linear-gradient(180deg,var(--cuero-a),var(--cuero-b)) !important;
  box-shadow:inset 0 1px rgba(255,231,165,.17),inset 0 -.45rem 1rem rgba(0,0,0,.34),0 .55rem 1.45rem rgba(0,0,0,.5) !important;
}

body[data-cuero="poncho"] .rivalrow,
body[data-cuero="poncho"] .mano {
  background:
    linear-gradient(145deg,rgba(255,235,169,.055),transparent 31%),
    var(--leather-tex),
    repeating-linear-gradient(90deg,transparent 0 40px,rgba(8,3,2,.85) 40px 58px,transparent 58px 96px,rgba(8,3,2,.85) 96px 114px),
    linear-gradient(180deg,var(--cuero-a),var(--cuero-b)) !important;
}

.cardbox[data-id]::before {
  border:1px solid rgba(255,249,224,.54);
}

.cardbox[data-id]::after {
  box-shadow:inset 0 0 0 1px rgba(100,61,18,.12);
}

.hudchip,
.lastplay {
  border-color:rgba(239,196,87,.62) !important;
  background:linear-gradient(155deg,rgba(111,42,23,.96),rgba(25,8,5,.98) 58%,rgba(4,22,15,.98)) !important;
  box-shadow:inset 0 1px rgba(255,236,174,.15),0 .38rem .9rem rgba(0,0,0,.48) !important;
}

/* ================================================================
   CONTROLES Y ESTADOS · un solo idioma material en toda la Casa
   ----------------------------------------------------------------
   Se visten contratos que el juego ya emite. No se renombran clases, no se
   bloquean eventos y no se toca la geometría funcional de cartas o arrastre.
*/

:is(#menu,#gira,#table,body > .banner,#drawer,#pauseOverlay)
  :is(button,[role="button"],.menutile,.grival,.sw,.vhero,.vitem,.retrato) {
  -webkit-tap-highlight-color:transparent;
}

:is(
  #menu button,
  #gira button,
  #table button,
  body > .banner button,
  #drawer button,
  #pauseOverlay button,
  #themeBanner .sw,
  #themeBanner .vhero,
  #themeBanner .vitem,
  #gira .grival,
  #perfilBanner .retrato
):focus-visible {
  outline:2px solid var(--casa15-focus) !important;
  outline-offset:3px !important;
  filter:drop-shadow(0 0 .55rem rgba(255,226,145,.55));
}

/* En Tienda la acción principal es hermana de Ver/Chinche dentro de un grupo.
   El foco vive en su etiqueta semántica, pero el filete abraza la pieza entera. */
#themeBanner .sw:has([data-a11y-main]:focus-visible) {
  outline:2px solid var(--casa15-focus) !important;
  outline-offset:3px !important;
  filter:drop-shadow(0 0 .55rem rgba(255,226,145,.55));
}

#themeBanner [data-a11y-main]:focus-visible {
  outline:none !important;
}

/* Las puertas del hogar son piezas de ebanistería, con clavos, filete y una
   luz de umbral. Los pseudo-elementos no participan del layout ni del click. */
#menu .menutiles > .menutile {
  background:
    radial-gradient(circle at .75rem .75rem,#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    radial-gradient(circle at calc(100% - .75rem) .75rem,#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    radial-gradient(circle at .75rem calc(100% - .75rem),#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    radial-gradient(circle at calc(100% - .75rem) calc(100% - .75rem),#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    linear-gradient(145deg,rgba(255,247,213,.1),transparent 35%),
    radial-gradient(ellipse 82% 70% at 50% -12%,rgba(246,204,98,.18),transparent 65%),
    repeating-linear-gradient(98deg,transparent 0 .6rem,rgba(255,255,255,.018) .64rem,transparent .68rem 1.2rem),
    linear-gradient(160deg,#174b36,#0a291d 58%,#08150e) !important;
}

#menu .menutiles > .menutile.tienda {
  background:
    radial-gradient(circle at .75rem .75rem,#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    radial-gradient(circle at calc(100% - .75rem) .75rem,#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    radial-gradient(circle at .75rem calc(100% - .75rem),#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    radial-gradient(circle at calc(100% - .75rem) calc(100% - .75rem),#ffe9a0 0 .055rem,#7d4a0d .075rem .14rem,transparent .16rem),
    linear-gradient(145deg,rgba(255,247,213,.13),transparent 35%),
    radial-gradient(ellipse 82% 70% at 50% -12%,rgba(255,214,116,.22),transparent 65%),
    repeating-linear-gradient(98deg,transparent 0 .6rem,rgba(255,255,255,.02) .64rem,transparent .68rem 1.2rem),
    linear-gradient(160deg,#833900,#4f1d00 58%,#220900) !important;
}

#menu .menutiles > .menutile::after {
  position:absolute;
  right:14%;
  bottom:-1px;
  left:14%;
  height:3px;
  content:'';
  pointer-events:none;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,#7d4a0d 18%,#ffe9a0 50%,#7d4a0d 82%,transparent);
  box-shadow:0 -.2rem .7rem rgba(238,187,59,.18);
}

#menu .menutiles > .menutile svg {
  position:relative;
  z-index:1;
  background:
    radial-gradient(circle at 36% 27%,rgba(255,247,210,.34),transparent 26%),
    repeating-conic-gradient(from 0deg,rgba(255,232,163,.2) 0 3deg,transparent 3deg 18deg),
    radial-gradient(circle,#6a2e19,#140805 72%) !important;
  box-shadow:
    0 0 0 .12rem #140805,
    0 0 0 .18rem rgba(216,164,48,.6),
    0 .42rem .9rem rgba(0,0,0,.66),
    inset 0 1px rgba(255,239,183,.25),
    0 0 1rem rgba(235,182,50,.12) !important;
}

#menu .menutiles > .menutile :is(.tname,.tsub) {
  position:relative;
  z-index:1;
}

#menu .menutiles > .menutile.brillando::after {
  animation:casa15-threshold 2.8s ease-in-out infinite;
}

/* Botones mayores: la misma respuesta física en hogar y cámaras. */
#menu .menupanel > button,
body > .banner :is(button.primary,button.aux) {
  transition:
    transform var(--casa15-motion-fast) var(--casa15-ease-press),
    filter var(--casa15-motion-base) ease,
    box-shadow var(--casa15-motion-base) ease !important;
}

body > .banner button.primary:active {
  transform:translateY(.18rem) scale(.992) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.68),
    inset 0 -.15rem .3rem rgba(89,43,3,.4),
    0 .1rem 0 #4a1907,
    0 .35rem .75rem rgba(0,0,0,.48) !important;
}

body > .banner button.aux:active {
  transform:translateY(.1rem) scale(.992) !important;
  filter:brightness(.96);
}

:is(#menu,body > .banner,#gira,#table) button:disabled,
:is(#menu,body > .banner,#gira,#table) button[aria-disabled="true"] {
  opacity:.42 !important;
  cursor:not-allowed !important;
  filter:grayscale(.35) saturate(.42) brightness(.8);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 .2rem .5rem rgba(0,0,0,.3) !important;
}

/* Contrato visual preparado para operaciones async. No aparece si el runtime
   no declara aria-busy y por eso no inventa un estado de negocio. */
:is(#menu,body > .banner,#gira,#table) button[aria-busy="true"] {
  position:relative;
  color:transparent !important;
  text-shadow:none !important;
  cursor:progress !important;
}

:is(#menu,body > .banner,#gira,#table) button[aria-busy="true"]::after {
  position:absolute;
  inset:50% auto auto 50%;
  width:1rem;
  height:1rem;
  content:'';
  border:.13rem solid rgba(255,245,208,.34);
  border-top-color:var(--casa15-brass-200);
  border-radius:50%;
  translate:-50% -50%;
  animation:casa15-spin .72s linear infinite !important;
}

:is(#menu,body > .banner,#gira,#table) button[data-state="success"] {
  border-color:var(--casa15-success) !important;
  box-shadow:0 0 0 1px var(--casa15-success-deep),0 0 1rem rgba(117,215,155,.22) !important;
}

:is(#menu,body > .banner,#gira,#table) button[data-state="error"] {
  border-color:var(--casa15-error) !important;
  box-shadow:0 0 0 1px var(--casa15-error-deep),0 0 1rem rgba(239,139,121,.2) !important;
}

/* Retención y progreso: éxito como esmalte, no como un punto verde suelto. */
#menu .mision.done {
  border-radius:var(--casa15-radius-sm);
  background:linear-gradient(90deg,rgba(117,215,155,.1),transparent 62%);
  box-shadow:inset .18rem 0 var(--casa15-success);
}

#menu .mision.done :is(.mname,.mreward) {
  color:#a9ebbf !important;
  text-shadow:0 0 .55rem rgba(117,215,155,.16);
}

#paseBanner .pescalon.hecho {
  border-color:rgba(232,195,74,.72) !important;
  background:linear-gradient(180deg,rgba(232,195,74,.18),rgba(63,37,8,.12)) !important;
  box-shadow:inset 0 1px rgba(255,242,197,.16);
}

#paseBanner .pescalon.actual {
  border-color:#ffe39a !important;
  box-shadow:inset 0 0 0 1px rgba(236,190,72,.22),0 0 1rem rgba(238,187,59,.24) !important;
}

/* Tienda: selección, bloqueo y compra mantienen su semántica existente. */
#themeBanner :is(.sw,.vhero,.vitem,.vcomprar,.mazover,.stepbtn) {
  transition:
    transform var(--casa15-motion-fast) var(--casa15-ease-press),
    filter var(--casa15-motion-base) ease,
    border-color var(--casa15-motion-base) ease,
    box-shadow var(--casa15-motion-base) ease !important;
}

#themeBanner .sw.on {
  border-color:#ffe39a !important;
  box-shadow:
    inset 0 0 0 2px rgba(239,190,69,.2),
    0 0 0 1px rgba(255,228,145,.28),
    0 .55rem 1.15rem rgba(0,0,0,.5),
    0 0 1rem rgba(240,187,57,.22) !important;
}

#themeBanner .sw.bloq {
  filter:saturate(.58) brightness(.76);
}

#themeBanner .sw.papel.bloq {
  filter:none !important;
}

#themeBanner :is(.vcomprar,.mazover) {
  border-color:rgba(246,207,104,.62) !important;
  box-shadow:inset 0 1px rgba(255,244,202,.18),0 .35rem .8rem rgba(0,0,0,.46) !important;
}

/* Gira: disponible, cumplido y oculto forman tres lecturas inequívocas. */
#gira .grival.actual {
  border-color:#ffe39a !important;
  box-shadow:
    inset 0 0 0 2px rgba(240,190,65,.2),
    inset 0 1px rgba(255,242,192,.18),
    0 0 0 1px rgba(91,43,8,.75),
    0 .8rem 1.7rem rgba(0,0,0,.58),
    0 0 1.55rem rgba(241,188,54,.3) !important;
}

#gira .grival.hecho:not(.actual) {
  border-color:rgba(117,215,155,.55) !important;
  background:
    linear-gradient(145deg,rgba(202,255,220,.06),transparent 35%),
    linear-gradient(155deg,rgba(61,31,19,.96),rgba(10,42,29,.98)) !important;
}

#gira .grival:is(.lock,.tapado) {
  opacity:.5;
  filter:saturate(.38) brightness(.72);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 .45rem 1rem rgba(0,0,0,.42) !important;
}

#gira .gflecha {
  border-color:rgba(241,199,94,.58) !important;
  color:#ffe39a !important;
  background:
    radial-gradient(circle at 34% 25%,rgba(255,240,187,.18),transparent 28%),
    linear-gradient(180deg,var(--casa15-walnut-650),var(--casa15-walnut-900)) !important;
  box-shadow:var(--casa15-elevation-2) !important;
}

/* Perfil: el retrato elegido recibe un sello de la Casa, no un check SaaS. */
#perfilBanner .retrato.elegido {
  border-color:#ffe39a !important;
  box-shadow:0 0 0 2px rgba(232,195,74,.24),0 .7rem 1.45rem rgba(0,0,0,.54),0 0 1.2rem rgba(232,195,74,.22) !important;
}

#perfilBanner .retrato.elegido::after {
  color:#351305 !important;
  background:radial-gradient(circle at 35% 27%,#fff3c4,#e6bd4e 55%,#a36e18) !important;
  border-color:#fff0ad !important;
  box-shadow:0 0 0 2px rgba(70,21,7,.75),0 .2rem .55rem rgba(0,0,0,.56) !important;
}

/* Mandos emblemáticos de la mesa: sólo material y estado; las posiciones y
   transformaciones funcionales permanecen en el documento original. */
#singBtn {
  isolation:isolate;
  border-color:#fff0ad !important;
  color:#351305 !important;
  background:
    radial-gradient(ellipse 72% 82% at 50% -20%,rgba(255,255,236,.92),transparent 58%),
    repeating-linear-gradient(112deg,transparent 0 .5rem,rgba(89,44,4,.055) .55rem,transparent .6rem 1.1rem),
    linear-gradient(180deg,#fff0ad,#dfaa35 55%,#965d10) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.92),
    inset 0 -.28rem .5rem rgba(91,45,4,.42),
    0 0 0 .13rem #461608,
    0 0 0 .19rem rgba(236,191,75,.72),
    0 .3rem 0 #4a1907,
    0 .65rem 1.2rem rgba(0,0,0,.55),
    0 0 1.1rem rgba(245,194,61,.2) !important;
  transition:transform var(--casa15-motion-fast) var(--casa15-ease-press),filter var(--casa15-motion-base) ease,box-shadow var(--casa15-motion-base) ease !important;
}

#singBtn.show {
  filter:brightness(1.04) saturate(1.04);
}

#singBtn:active {
  transform:translateY(.18rem) scale(.985) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.72),inset 0 -.18rem .35rem rgba(91,45,4,.45),0 0 0 .13rem #461608,0 .1rem 0 #4a1907,0 .3rem .65rem rgba(0,0,0,.5) !important;
}

#btnFifteen {
  border-color:#ffe39a !important;
  color:#351305 !important;
  background:
    radial-gradient(ellipse 72% 85% at 50% -22%,rgba(255,255,235,.9),transparent 60%),
    linear-gradient(180deg,#fff0ad,#d7a83b 58%,#8c550e) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.84),inset 0 -.25rem .45rem rgba(85,40,3,.42),0 0 0 .14rem #461608,0 0 0 .2rem rgba(238,192,74,.7),0 .32rem 0 #461608,0 .8rem 1.45rem rgba(0,0,0,.58) !important;
  transition:transform var(--casa15-motion-fast) var(--casa15-ease-press),filter var(--casa15-motion-base) ease !important;
}

#btnFifteen.show {
  filter:brightness(1.05) saturate(1.04);
}

#btnFifteen:active {
  transform:translateX(-50%) translateY(.2rem) scale(.99) !important;
}

.hudchip.turno {
  border-color:#ffe39a !important;
  box-shadow:inset 0 1px rgba(255,244,200,.22),0 0 0 1px rgba(106,57,11,.72),0 .42rem 1rem rgba(0,0,0,.5),0 0 1.25rem rgba(241,188,55,.27) !important;
}

.hudchip.apuro {
  /* (2026-09-15) El apuro tenía tres rojos distintos entre este archivo y el index; ahora
     los tres son LA brasa, la que sale de la laca de los mazos. */
  border-color:var(--brasa-300) !important;
  box-shadow:inset 0 1px rgba(255,226,204,.17),0 0 0 1px var(--brasa-900),0 .42rem 1rem rgba(0,0,0,.52),0 0 1.2rem #be241b4d !important;
}

:is(.rivalrow,.myrow) .hbtn {
  border-color:rgba(242,200,94,.55) !important;
  background:
    radial-gradient(circle at 32% 22%,rgba(255,241,189,.16),transparent 28%),
    linear-gradient(180deg,rgba(91,34,18,.97),rgba(25,8,5,.99)) !important;
  box-shadow:inset 0 1px rgba(255,239,181,.22),inset 0 -.15rem .35rem rgba(0,0,0,.52),0 .25rem .65rem rgba(0,0,0,.48) !important;
}

:is(.rivalrow,.myrow) .hbtn.off,
#pauseBtn.gastado {
  opacity:.4;
  filter:grayscale(.4) saturate(.45);
}

#pauseBtn.on {
  border-color:#fff0ad !important;
  box-shadow:inset 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(108,58,11,.78),0 0 1rem rgba(244,196,71,.32) !important;
}

.pilebtn {
  transition:filter var(--casa15-motion-base) ease,opacity var(--casa15-motion-base) ease !important;
}

.pilebtn .pstack {
  filter:drop-shadow(0 .25rem .35rem rgba(0,0,0,.55));
}

.pilebtn.vacio {
  opacity:.5;
  filter:saturate(.5);
}

.pilebtn.destino .pstack {
  filter:drop-shadow(0 0 .65rem rgba(255,228,143,.92)) drop-shadow(0 .25rem .35rem rgba(0,0,0,.55)) !important;
}

.cantobar button[data-canto]:disabled {
  opacity:.44 !important;
  filter:saturate(.42) brightness(.72);
}

.cantobar button[data-canto].notengo {
  opacity:.28 !important;
  filter:grayscale(.82) saturate(.28) brightness(.72) !important;
}

/* Mensajes y cámaras de pausa: la misma voz visual sin alterar sus transiciones. */
#toast,
#aiToast {
  border-color:rgba(246,205,101,.68) !important;
  color:var(--casa15-ivory) !important;
  background:
    linear-gradient(145deg,rgba(255,244,196,.08),transparent 34%),
    linear-gradient(180deg,rgba(73,27,15,.97),rgba(5,25,17,.98)) !important;
  box-shadow:inset 0 1px rgba(255,239,185,.18),inset 0 -.25rem .55rem rgba(0,0,0,.42),0 .65rem 1.5rem rgba(0,0,0,.58) !important;
}

.notaMesa.mala {
  border-color:rgba(239,139,121,.72) !important;
  color:#ffd4cb !important;
  background:linear-gradient(180deg,rgba(91,20,24,.94),rgba(39,7,10,.96)) !important;
  box-shadow:0 .5rem 1.2rem rgba(0,0,0,.5),0 0 1rem rgba(239,91,70,.15) !important;
}

#pauseOverlay {
  background:
    radial-gradient(ellipse 58% 44% at 50% 42%,rgba(126,32,34,.22),transparent 72%),
    rgba(2,8,5,.94) !important;
}

#pauseOverlay .pcuenta {
  border-color:rgba(255,224,141,.62) !important;
  background:radial-gradient(circle,rgba(98,40,19,.76),rgba(4,18,12,.9)) !important;
  box-shadow:inset 0 1px rgba(255,245,207,.14),0 0 1.2rem rgba(242,188,56,.18);
}

#pauseOverlay button.primary {
  border-color:#ffe39a !important;
  color:#351305 !important;
  background:linear-gradient(180deg,#fff0ad,#d7a83b 58%,#8c550e) !important;
}

#drawer {
  border-left-color:rgba(241,197,89,.72) !important;
  background:
    linear-gradient(145deg,rgba(255,240,184,.07),transparent 30%),
    repeating-linear-gradient(96deg,transparent 0 .7rem,rgba(255,255,255,.015) .74rem,transparent .78rem 1.4rem),
    linear-gradient(160deg,var(--casa15-walnut-650),var(--casa15-walnut-900) 28%,var(--casa15-felt-950)) !important;
  box-shadow:-1rem 0 2.6rem rgba(0,0,0,.68),inset 1px 0 rgba(255,229,151,.16) !important;
}

#log .good { color:#a9ebbf !important; }
#log .bad { color:#ffc8bd !important;background:rgba(112,24,28,.3) !important; }
#log :is(.canto,.win) { color:#ffdf87 !important; }

#table .cardbox.sel::after {
  box-shadow:inset 0 0 0 1px rgba(100,61,18,.12),0 0 0 2px rgba(255,229,148,.9),0 0 1rem rgba(241,188,53,.52) !important;
}

/* ================================================================
   HITO V5 · MESA CEREMONIAL, CANTOS Y MOVIMIENTO CON INTENCIÓN
   ----------------------------------------------------------------
   La Casa se siente viva por jerarquía, luz y respuesta. Se preservan todas
   las cajas que el runtime usa para reparto, captura, drag y drop.
*/

/* El paño deja de ser una placa plana: baranda, centro tejido y lámpara
   pertenecen a una misma mesa. La caja nunca se mueve ni cambia de tamaño. */
.board {
  background:
    linear-gradient(90deg,rgba(20,5,3,.78),transparent 7% 93%,rgba(20,5,3,.78)),
    radial-gradient(ellipse 72% 36% at 50% 48%,rgba(235,188,66,.055),transparent 72%),
    repeating-linear-gradient(96deg,transparent 0 .8rem,rgba(255,255,255,.012) .84rem,transparent .88rem 1.6rem),
    linear-gradient(180deg,rgba(5,18,13,.52),rgba(12,4,3,.64)) !important;
}

.mesa {
  animation:none !important;
  background:
    radial-gradient(ellipse 85% 90% at 50% 25%,#ffffff12,transparent 75%),
    linear-gradient(180deg,var(--felt),var(--felt-dark)) !important;
  box-shadow:
    inset 0 0 0 .28rem rgba(41,10,5,.96),
    inset 0 0 0 .42rem rgba(229,179,57,.42),
    inset 0 0 0 .52rem rgba(31,8,4,.82),
    inset 0 1.4rem 3.2rem rgba(255,255,255,.035),
    inset 0 -2.2rem 4rem rgba(0,0,0,.31),
    0 .95rem 2.3rem rgba(0,0,0,.66),
    0 0 1.7rem rgba(230,175,45,.08) !important;
}

.mesa::before {
  background:var(--casa15-lana) center/320px 320px repeat !important;
  mix-blend-mode:luminosity;
  opacity:.4;
  pointer-events:none;
}

.mesa::after {
  inset:.38rem !important;
  border:1px solid rgba(249,215,126,.42) !important;
  box-shadow:
    inset 0 1px rgba(255,245,204,.17),
    inset 0 0 0 .17rem rgba(29,7,4,.36),
    inset 0 0 0 .25rem rgba(221,170,48,.12),
    inset 0 0 1.15rem rgba(0,0,0,.3),
    0 1px rgba(0,0,0,.48) !important;
}

#apuestaChip,
.sumbadge {
  border-color:rgba(249,211,112,.68) !important;
  color:var(--casa15-ivory) !important;
  background:
    linear-gradient(145deg,rgba(255,241,188,.1),transparent 36%),
    linear-gradient(180deg,rgba(93,35,18,.95),rgba(12,35,24,.96)) !important;
  box-shadow:inset 0 1px rgba(255,241,193,.2),0 .4rem 1rem rgba(0,0,0,.54),0 0 .75rem rgba(235,182,50,.12) !important;
}

/* El borde indica el destino durante el gesto sin repintar la sombra de todo
   el paño. Sólo respira la opacidad de la baranda. */
.mesa.target,
.mesa.target-throw {
  animation:none !important;
}

.mesa.target { --casa15-target:rgba(255,222,127,.96); }
.mesa.target-throw { --casa15-target:rgba(168,218,255,.92); }

.mesa:is(.target,.target-throw)::after {
  border-color:var(--casa15-target) !important;
  box-shadow:
    inset 0 0 0 .18rem rgba(24,6,3,.4),
    inset 0 0 0 .28rem var(--casa15-target),
    inset 0 0 1.45rem color-mix(in srgb,var(--casa15-target) 42%,transparent),
    0 0 .8rem color-mix(in srgb,var(--casa15-target) 28%,transparent) !important;
  animation:casa15-target-breathe 1.1s ease-in-out infinite alternate;
}

#dropSlot {
  box-shadow:0 0 1.05rem var(--glow,rgba(255,255,255,.42)) !important;
  animation:casa15-drop-breathe 1.05s ease-in-out infinite alternate !important;
}

/* La consola es un atril de la Casa: cuatro declaraciones, cuatro sellos. */
.cantobar {
  isolation:isolate;
  border:0 !important;
  background:
    radial-gradient(circle at .82rem .82rem,#ffe39a 0 .055rem,#84500e .08rem .16rem,transparent .18rem),
    radial-gradient(circle at calc(100% - .82rem) .82rem,#ffe39a 0 .055rem,#84500e .08rem .16rem,transparent .18rem),
    radial-gradient(circle at .82rem calc(100% - .82rem),#ffe39a 0 .055rem,#84500e .08rem .16rem,transparent .18rem),
    radial-gradient(circle at calc(100% - .82rem) calc(100% - .82rem),#ffe39a 0 .055rem,#84500e .08rem .16rem,transparent .18rem),
    linear-gradient(145deg,rgba(255,244,199,.1),transparent 28%),
    repeating-linear-gradient(98deg,transparent 0 .72rem,rgba(255,255,255,.016) .76rem,transparent .8rem 1.5rem),
    radial-gradient(ellipse 86% 46% at 50% -5%,rgba(239,189,64,.2),transparent 68%),
    linear-gradient(160deg,#6a2e19,#260b08 32%,#062015 72%,#05100a) !important;
  box-shadow:
    0 0 0 1px #130402,
    0 0 0 2px #8a5c0a,
    0 0 0 3px rgba(255,224,134,.7),
    0 0 0 7px rgba(28,7,4,.94),
    inset 0 1px rgba(255,242,194,.22),
    inset 0 -.4rem .9rem rgba(0,0,0,.45),
    0 1.2rem 3rem rgba(0,0,0,.72) !important;
}

.cantobar::before {
  position:absolute;
  inset:.42rem;
  content:'';
  pointer-events:none;
  border:1px solid rgba(247,205,96,.28);
  border-radius:calc(var(--casa15-radius-lg) - .25rem);
  box-shadow:inset 0 0 0 1px rgba(18,4,2,.75),inset 0 0 1rem rgba(0,0,0,.3);
}

.cantobar > .lbl {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.65rem;
  color:#f3df9e !important;
  background:none !important;
  -webkit-text-fill-color:currentColor;
  text-shadow:0 2px .25rem rgba(0,0,0,.82),0 0 .7rem rgba(237,187,58,.16);
}

.cantobar > .lbl[hidden] { display:none !important; }

.cantobar > .lbl::before,
.cantobar > .lbl::after {
  height:1px;
  flex:1;
  content:'';
  background:linear-gradient(90deg,transparent,rgba(247,208,107,.75),transparent);
  box-shadow:0 1px rgba(20,5,3,.9);
}

.cantobar button[data-canto] {
  position:relative;
  z-index:1;
  border-color:rgba(241,198,88,.5) !important;
  background:
    radial-gradient(circle at .55rem .55rem,#e2b94e 0 .035rem,#5a3416 .05rem .1rem,transparent .12rem),
    radial-gradient(circle at calc(100% - .55rem) calc(100% - .55rem),#e2b94e 0 .035rem,#5a3416 .05rem .1rem,transparent .12rem),
    linear-gradient(145deg,rgba(255,239,182,.08),transparent 34%),
    linear-gradient(180deg,rgba(32,83,58,.92),rgba(7,35,24,.97)) !important;
  box-shadow:inset 0 1px rgba(255,242,194,.13),inset 0 -.22rem .5rem rgba(0,0,0,.35),0 .28rem .65rem rgba(0,0,0,.45) !important;
}

.cantobar button[data-canto] .cn {
  color:#ffe9a0 !important;
  text-shadow:0 2px .2rem rgba(0,0,0,.82),0 0 .55rem rgba(239,188,59,.12);
}

.cantobar button[data-canto] .cq {
  color:#cdbf98 !important;
}

.cantobar button[data-canto] .cp {
  border:1px solid #fff0ad !important;
  color:#351305 !important;
  background:
    radial-gradient(circle at 36% 27%,rgba(255,255,231,.95),transparent 24%),
    repeating-conic-gradient(from 0deg,rgba(99,52,5,.12) 0 3deg,transparent 3deg 18deg),
    radial-gradient(circle,#ffe39a,#d1a223 58%,#84500e 78%) !important;
  box-shadow:0 0 0 .12rem #461608,0 0 0 .18rem rgba(230,181,59,.68),inset 0 1px rgba(255,255,255,.74),0 .28rem .65rem rgba(0,0,0,.55) !important;
}

.cantobar button[data-canto].grande {
  border-color:rgba(255,205,105,.72) !important;
  background:
    radial-gradient(circle at .55rem .55rem,#f2c65a 0 .035rem,#6b3a08 .05rem .1rem,transparent .12rem),
    radial-gradient(circle at calc(100% - .55rem) calc(100% - .55rem),#f2c65a 0 .035rem,#6b3a08 .05rem .1rem,transparent .12rem),
    linear-gradient(145deg,rgba(255,239,184,.1),transparent 34%),
    linear-gradient(180deg,#833900,#541e00 58%,#220900) !important;
}

.cantobar button[data-canto].grande .cp {
  color:#351305 !important;
  background:radial-gradient(circle at 36% 27%,#fff3c4,#e89b3b 56%,#9a4615 78%) !important;
}

.cantobar #noCanto {
  position:relative;
  z-index:1;
  min-height:2.75rem;
  border-color:rgba(240,198,93,.38) !important;
  color:#ddcfaa !important;
  background:linear-gradient(180deg,rgba(72,27,16,.85),rgba(19,7,5,.93)) !important;
  box-shadow:inset 0 1px rgba(255,235,172,.1),0 .24rem .55rem rgba(0,0,0,.4);
}

/* Cinemática: se animan capas pequeñas y estados que significan algo. */
#menu .logo15 .crest {
  animation:none !important;
}

#menu .logo .humo i {
  animation:casa15-humo-hogar 4.6s ease-out infinite !important;
}

#menu .logo .humo i:nth-child(2) { animation-delay:1.5s !important; }
#menu .logo .humo i:nth-child(3) { animation-delay:3s !important; }

#singBtn::before,
#singBtn::after,
#cancelZona .cztxt {
  animation:none !important;
}

/* CANTAR PULSA CUANDO HAY CANTO (dueño, 2026-09-05, textual: «cuando se tiene canto, el
   botón de cantar debe pulsar, debe llamar la atención, debe respirar, debe titilar»).
   Antes respiraba sólo con un brillo de 2,8 s, tan lento y tan tenue que nadie lo veía.
   Ahora, en UN mismo ciclo de 1,6 s: el cuerpo crece de 1 a 1,05 (transform: no toca el
   layout de la fila, la caja sigue midiendo lo mismo), el halo dorado sube y baja
   (drop-shadow: el único resplandor que sale del botón, porque #singBtn recorta con
   overflow:hidden y un box-shadow se quedaría adentro), y las letras titilan con un
   brillo de texto que va y viene sin dejar de leerse. Nada por debajo de 0,8 s de
   período —estroboscópico, no—, y todo se apaga con la clase: se canta, cambia el turno
   o se abre el panel y el botón vuelve a su reposo. */
#singBtn.canto-disponible:not(:disabled) {
  filter:brightness(1.08) saturate(1.06) drop-shadow(0 0 .34rem rgba(255,210,85,.44));
  animation:casa15-canto-respira 1.6s ease-in-out infinite !important;
  will-change:transform,filter;
}

#singBtn.canto-disponible:not(:disabled)::before {
  animation:casa15-canto-aura 1.6s ease-in-out infinite !important;
  will-change:opacity,transform;
}

#singBtn.canto-disponible:not(:disabled)::after {
  animation:cantarBrillo 3.2s ease-in-out infinite !important;
}

@keyframes casa15-canto-respira {
  0%,100% {
    transform:scale(1);
    filter:brightness(1.04) saturate(1.02) drop-shadow(0 0 .2rem rgba(255,210,85,.35));
    text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  50% {
    transform:scale(1.05);
    filter:brightness(1.2) saturate(1.12) drop-shadow(0 0 .95rem rgba(255,215,90,.95));
    text-shadow:0 0 .5rem rgba(255,248,200,1),0 0 .15rem rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.5);
  }
}

@keyframes casa15-canto-aura {
  0%,100% { opacity:.34;transform:scale(.9); }
  50% { opacity:1;transform:scale(1); }
}
#cancelZona.on .cztxt { animation:czlate 1s ease-in-out infinite !important; }

.hudchip.apuro {
  animation:none !important;
}

.hudchip.apuro::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,155,115,.9),0 0 1.65rem rgba(224,66,48,.92);
  animation:latir .52s ease-in-out infinite !important;
}

.turnlbl.mine {
  animation:none !important;
  background-position:50% 0 !important;
}

.cofreslots.final .cnum {
  text-shadow:0 2px 3px rgba(0,0,0,.65),0 0 .75rem rgba(255,214,110,.68);
  animation:casa15-prize-breathe 1.15s ease-in-out infinite alternate !important;
}

#gira .grival.destape {
  animation:casa15-rival-arrive .72s var(--casa15-ease) backwards !important;
}

#gira .grival.destape .ginfo {
  animation:casa15-rival-info .52s .56s var(--casa15-ease) backwards !important;
}

.aitake {
  filter:drop-shadow(0 0 .55rem var(--gold)) drop-shadow(1px 3px 3px rgba(0,0,0,.45));
  animation:casa15-ai-take .86s ease-in-out infinite alternate !important;
}

/* 44 px: cajas reales, medallones visuales contenidos y cero solapamientos. */
.rivalrow .hbtn,
.rivalrow .audiomini .hbtn {
  width:2.75rem;
  height:2.75rem;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.rivalrow .hbtn::before {
  inset:.44rem;
  border-color:rgba(242,201,96,.64);
  background:
    radial-gradient(circle at 32% 24%,rgba(255,243,193,.24),transparent 27%),
    linear-gradient(180deg,#6a2e19,#220905) !important;
  box-shadow:inset 0 1px rgba(255,239,181,.25),inset 0 -.15rem .32rem rgba(0,0,0,.55),0 .22rem .55rem rgba(0,0,0,.5) !important;
}

.myrow #hablarBtn {
  width:2.75rem;
  height:2.75rem;
}

.pilebtn {
  min-width:2.75rem;
  min-height:2.75rem;
  justify-content:center;
}

/* LA RUEDA (2026-09-05): en la mesa de tres y cuatro las sillas rivales van SIN placa —tres
   placas pelearían con la del jugador local— y la luz del turno late alrededor de la cara.
   Acá se apagan los !important de la placa de arriba; la geometría vive en index.html. */
body.mesa-de-mas .rivalrow .hudchip,
body.mesa-de-mas .rivalrow .hudchip:is(.turno,.apuro) {
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

#themeBanner :is(.mazover,.vcomprar),
#settingsBanner :is(#setTuto,#settingsClose),
#settingsBanner #setNombre {
  min-height:2.75rem;
}

#themeBanner .vflecha {
  width:2.75rem;
  height:2.75rem;
}

#perfilBanner #perfilNombre {
  min-height:2.75rem;
  padding-block:.44rem !important;
  box-sizing:border-box;
}

@media (max-width:26.875rem) {
  :root {
    /* (2026-09-05) LOS MANDOS AL PISO DE 40 (L14) TAMBIÉN DE 360 A 430, como en la rueda y como ya
       valía en 320: los 4 px de cada uno (5 cajas) son 16 que van a LAS DOS pastillas, que siguen
       midiendo lo mismo (mandato: la misma medida para los dos jugadores). En 360 la pastilla pasa
       de 111 a 127 y el nombre propio deja de quedar en tres letras. */
    --pastilla-w:min(152px,calc(100vw - 233px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  .rivalrow .hbtn,
  .rivalrow .audiomini .hbtn {
    width:2.5rem;
    height:2.5rem;
  }

  .rivalrow .hbtn::before { inset:.31rem; }

  .rivalrow {
    gap:0;
    padding-left:calc(2px + env(safe-area-inset-left));
    padding-right:calc(2px + env(safe-area-inset-right));
  }

  .rivalrow .audiomini { gap:0; }

  .rivalrow .pscore,
  .rivalrow .pline { gap:1px; }

  .rivalrow .pscore :is(.pending,.live) {
    margin-left:0;
    font-size:10px;
  }

  .rivalrow .pscore b {
    padding-inline:4px;
  }

  .rivalrow .hudchip .escobas {
    padding-inline:2px;
  }
}

@media (max-width:22.4375rem) {
  :root {
    /* En 320 px, cinco cajas de 44 más la mano rival vuelven ilegible el
       marcador. Sin cambiar la estructura funcional, se conserva el contrato
       previo de 40 px para esos cuatro mandos y se devuelve ancho al nombre. */
    --pastilla-w:min(152px,calc(100vw - 240px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  .rivalrow .hbtn,
  .rivalrow .audiomini .hbtn {
    width:2.5rem;
    height:2.5rem;
  }

  .rivalrow .hbtn::before { inset:.31rem; }

  .rivalrow .avatar {
    width:2.5rem;
    height:2.5rem;
  }

  .rivalrow .hudchip,
  .myrow .hudchip {
    gap:2px;
    padding-right:4px;
  }

  .rivalrow .pname {
    font-size:10.5px;
    letter-spacing:0;
  }

  .rivalrow .pscore b {
    height:1.875rem;
    padding-inline:.19rem;
    font-size:1.05rem;
  }

  .rivalrow .pscore b .meta {
    font-size:.53rem;
    margin-left:0;
  }
}

/* Animación cinematográfica propia: anticipación, asentamiento y luz; nunca lógica. */
@keyframes casa15-spin {
  to { transform:rotate(1turn); }
}

@keyframes casa15-target-breathe {
  from { opacity:.62; }
  to { opacity:1; }
}

@keyframes casa15-drop-breathe {
  from { opacity:.58; }
  to { opacity:1; }
}

@keyframes casa15-humo-hogar {
  0% { opacity:0;transform:translate(0,0) scale(.5); }
  18% { opacity:.48; }
  100% { opacity:0;transform:translate(var(--hx,4px),-120px) scale(2.35); }
}

@keyframes casa15-prize-breathe {
  from { opacity:.82;transform:scale(.98); }
  to { opacity:1;transform:scale(1.035); }
}

@keyframes casa15-rival-arrive {
  from { opacity:.64;transform:translateY(.65rem) scale(.985); }
  to { opacity:1;transform:none; }
}

@keyframes casa15-rival-info {
  from { opacity:0;transform:translateY(.45rem); }
  to { opacity:1;transform:none; }
}

@keyframes casa15-ai-take {
  from { opacity:.82;transform:translateY(-8px) scale(.985); }
  to { opacity:1;transform:translateY(-8px) scale(1.025); }
}

@keyframes casa15-threshold {
  0%,100% { opacity:.45;transform:scaleX(.72); }
  50% { opacity:1;transform:scaleX(1); }
}

@keyframes casa15-atmosphere {
  from { opacity:.48;transform:scale(1); }
  to { opacity:.76;transform:scale(1.018); }
}

@keyframes casa15-crest-arrive {
  from { opacity:0;transform:translateY(-1rem) scale(.965); }
  to { opacity:1;transform:translateY(0) scale(1); }
}

@keyframes casa15-cabinet-arrive {
  from { opacity:0;transform:translateY(1.4rem) scale(.975); }
  to { opacity:1;transform:translateY(0) scale(1); }
}

@keyframes casa15-button-shine {
  0%,64% { opacity:0;transform:translateX(0) rotate(18deg); }
  72% { opacity:1; }
  92%,100% { opacity:0;transform:translateX(650%) rotate(18deg); }
}

@media (hover:hover) and (pointer:fine) {
  #menu .menupanel > button:hover,
  #menu .menutiles > .menutile:hover {
    transform:translateY(-.16rem);
    filter:brightness(1.07) saturate(1.04);
  }

  #menu .menutiles > .menutile:hover {
    border-color:rgba(255,225,143,.82) !important;
    box-shadow:inset 0 1px rgba(255,242,196,.22),inset 0 -.25rem .55rem rgba(0,0,0,.52),0 0 0 .16rem rgba(29,7,4,.76),0 .8rem 1.55rem rgba(0,0,0,.58),0 0 1.2rem rgba(234,184,57,.15) !important;
  }

  #menu .menupanel > button:active,
  #menu .menutiles > .menutile:active {
    transform:translateY(.1rem) scale(.992) !important;
    filter:brightness(.96) saturate(1.02);
  }

  body > .banner :is(button.primary,button.aux):not(:disabled):hover,
  #themeBanner :is(.vcomprar,.mazover,.stepbtn):not(:disabled):hover,
  #gira :is(.gflecha,.grival):not(.lock):not(.tapado):hover,
  #perfilBanner .retrato:hover,
  #singBtn:hover,
  #btnFifteen:hover {
    filter:brightness(1.08) saturate(1.04);
  }

  .pilebtn:not(.vacio):hover .pstack {
    filter:drop-shadow(0 0 .35rem rgba(255,222,125,.34)) drop-shadow(0 .25rem .35rem rgba(0,0,0,.55));
  }
}

@media (min-width:48.01rem) {
  #menu {
    background:
      linear-gradient(180deg,rgba(1,5,3,.1),rgba(1,7,5,.2) 42%,rgba(2,4,3,.82) 94%),
      radial-gradient(ellipse 70% 42% at 50% 10%,rgba(255,211,105,.2),transparent 72%),
      linear-gradient(90deg,rgba(0,0,0,.42),transparent 16% 84%,rgba(0,0,0,.42)),
      url('/tema/casa-del-15/salon-desktop.webp?v=1') center/cover no-repeat,
      var(--casa15-felt-950) !important;
  }

  #gira {
    background:
      linear-gradient(180deg,rgba(1,5,3,.15),rgba(1,7,5,.4) 46%,rgba(2,4,3,.88)),
      radial-gradient(ellipse 70% 42% at 50% 9%,rgba(255,211,105,.17),transparent 72%),
      linear-gradient(90deg,rgba(0,0,0,.45),transparent 16% 84%,rgba(0,0,0,.45)),
      url('/tema/casa-del-15/salon-desktop.webp?v=1') center/cover no-repeat,
      var(--casa15-felt-950) !important;
  }
}

@media (max-width:48rem) {
  #menu::before {
    mix-blend-mode:normal;
  }
}

/* iPhone de poca altura: la firma sigue mandando, pero deja ver antes la mesa
   lista y la siguiente acción. No se elimina contenido; sólo cambia la escala. */
@media (orientation:portrait) and (max-width:30rem) and (max-height:42rem) {
  #menu .logo15 {
    margin-top:2.3rem;
  }

  #menu .logo15 .crest {
    width:min(76vw,15.4rem);
    margin-bottom:-.7rem;
  }

  #menu .logo15 .promesa {
    max-width:17rem;
    font-size:.76rem;
    line-height:1.28;
  }


}

/* Targets táctiles: el mismo control y el mismo handler, con área digna de dedo. */
#menu .walletchip,
#menu .hudtop .hbtn,
#menu .menupanel .seg button,
#settingsBanner .seg button {
  min-height:2.75rem;
}

@media (orientation:landscape) and (max-height:35rem) and (max-width:64rem) {
  #acostado {
    background:
      linear-gradient(180deg,rgba(1,5,3,.38),rgba(1,5,3,.82)),
      radial-gradient(ellipse 62% 70% at 50% 45%,rgba(181,44,43,.18),transparent 68%),
      url('/tema/casa-del-15/salon-desktop.webp?v=1') center/cover no-repeat,
      var(--casa15-ink) !important;
    box-shadow:inset 0 0 8rem rgba(0,0,0,.82),inset 0 0 0 1px rgba(239,198,94,.24);
  }

  #acostado .gira90 {
    position:relative;
    border-color:#ffe39a !important;
    border-radius:.45rem 1rem .45rem 1rem !important;
    background:
      radial-gradient(circle at 50% 34%,rgba(255,225,137,.16),transparent 34%),
      linear-gradient(155deg,var(--casa15-leather-700),var(--casa15-walnut-900) 58%,var(--casa15-felt-950));
    box-shadow:0 0 0 .15rem var(--casa15-walnut-900),0 0 0 .22rem rgba(223,174,61,.66),0 .85rem 1.8rem rgba(0,0,0,.68),inset 0 1px rgba(255,244,198,.18) !important;
  }

  #acostado .gira90::before {
    position:absolute;
    inset:50% auto auto 50%;
    content:'15';
    translate:-50% -50%;
    color:#ffe39a;
    font:700 1.05rem/1 'Lilita One','Trocchi',Georgia,serif;
    text-shadow:0 2px #2b0805,0 0 .65rem rgba(242,190,60,.28);
  }

  #acostado b {
    text-shadow:0 2px .3rem rgba(0,0,0,.78);
  }

  #acostado span {
    color:#ddcfaa !important;
    text-shadow:0 2px .25rem rgba(0,0,0,.82);
  }
}

@media (max-width:23rem) {
  #menu .menupanel {
    border-radius:1rem 1.85rem 1rem 1.85rem !important;
    box-shadow:0 0 0 1px #130402,0 0 0 2px var(--casa15-brass-800),0 0 0 5px rgba(30,8,4,.94),0 1.2rem 3rem rgba(0,0,0,.72),inset 0 1px rgba(255,239,181,.2) !important;
  }
}


/* ================================================================
   HOME · LOS SALONES DE LA CASA
   ----------------------------------------------------------------
   La función es idéntica, pero la silueta deja de ser dashboard: un portal
   principal, dos cámaras secundarias y tres medallones de galería.
*/
#menu .menupanel {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:.75rem !important;
  width:min(94vw,44rem) !important;
  max-width:100% !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}

#menu .menupanel::before { content:none !important; }

#menu .menupanel > button,
#menu .menupanel > :is(.mesaespera,.menutiles,.misioncard,.menurow) {
  grid-column:1 / -1;
  width:100%;
  min-width:0;
}

#menu .mesaespera { order:-6; }
#menu #menuResume { order:-5 !important; }
#menu #menuPlay { order:-4; }
#menu .menutiles { order:-3; }
#menu #menuAmigo { order:-2; }
#menu #menuRapida { order:-1; }
#menu .menupanel .misioncard { order:0; }
#menu .menupanel .menurow { order:1; }

#menu .menutiles {
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  grid-template-rows:minmax(7.25rem,auto) minmax(6.25rem,auto) minmax(5.75rem,auto);
  gap:.55rem !important;
}

#menu #tileGira { grid-column:1 / 7;grid-row:1; }
#menu #tileTienda { grid-column:1 / 4;grid-row:2; }
#menu #tileCofre { grid-column:4 / 7;grid-row:2; }
#menu #tileAmigos { grid-column:1 / 3;grid-row:3; }
#menu #tileRanking { grid-column:3 / 5;grid-row:3; }
#menu #tilePerfil { grid-column:5 / 7;grid-row:3; }

#menu .menutiles > .menutile {
  min-width:0 !important;
  min-height:0 !important;
  height:100%;
}

#menu #tileGira {
  display:grid;
  grid-template-columns:4.25rem minmax(0,1fr);
  grid-template-rows:1fr 1fr;
  align-items:center;
  padding:.85rem 1.15rem !important;
  overflow:hidden;
  border-radius:1.9rem 1.9rem .55rem .55rem !important;
  text-align:left;
  background:
    linear-gradient(90deg,rgba(38,7,8,.94),rgba(11,12,8,.58) 52%,rgba(2,21,14,.7)),
    linear-gradient(180deg,rgba(255,243,194,.08),transparent 46%,rgba(0,0,0,.42)),
    url('/tema/casa-del-15/gira/tucuman-desktop-v1.webp?v=1') 56% 50%/cover no-repeat !important;
}

#menu #tileGira::before {
  position:absolute;
  inset:.42rem;
  content:'';
  pointer-events:none;
  border:1px solid rgba(250,213,116,.42);
  border-radius:1.55rem 1.55rem .38rem .38rem;
  box-shadow:inset 0 0 1rem rgba(0,0,0,.36);
}

#menu #tileGira svg {
  grid-column:1;
  grid-row:1 / 3;
  width:3.65rem !important;
  height:3.65rem !important;
  margin:0 !important;
}

#menu #tileGira .tname {
  grid-column:2;
  grid-row:1;
  align-self:end;
  font-size:1.15rem !important;
  letter-spacing:.08em !important;
  text-shadow:0 2px .3rem rgba(0,0,0,.9),0 0 .75rem rgba(255,215,112,.22);
}

#menu #tileGira .tsub {
  grid-column:2;
  grid-row:2;
  align-self:start;
  margin-top:.25rem;
  color:#ead49c !important;
  font-size:.72rem !important;
  text-shadow:0 2px .25rem rgba(0,0,0,.94);
}

#menu :is(#tileTienda,#tileCofre) {
  display:grid;
  grid-template-columns:3rem minmax(0,1fr);
  grid-template-rows:1fr 1fr;
  align-items:center;
  padding:.7rem .75rem !important;
  border-radius:.55rem 1.4rem .55rem 1.4rem !important;
  text-align:left;
}

#menu :is(#tileTienda,#tileCofre) svg {
  grid-column:1;
  grid-row:1 / 3;
  width:2.55rem !important;
  height:2.55rem !important;
  margin:0 !important;
}

#menu :is(#tileTienda,#tileCofre) .tname {
  align-self:end;
  font-size:.82rem !important;
}

#menu :is(#tileTienda,#tileCofre) .tsub {
  align-self:start;
  margin-top:.15rem;
  font-size:.6rem !important;
}

#menu #tileCofre {
  background:
    radial-gradient(circle at 18% 25%,rgba(255,226,139,.18),transparent 28%),
    linear-gradient(145deg,#6a3f22,#291006 57%,#0a291d) !important;
}

#menu :is(#tileAmigos,#tileRanking,#tilePerfil) {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:.5rem .3rem !important;
}

#menu :is(#tileAmigos,#tileRanking,#tilePerfil) svg {
  width:2.05rem !important;
  height:2.05rem !important;
  margin:0 0 .3rem !important;
  padding:.42rem !important;
}

#menu :is(#tileAmigos,#tileRanking,#tilePerfil) .tname {
  font-size:.67rem !important;
  letter-spacing:.035em !important;
}

#menu :is(#tileAmigos,#tileRanking,#tilePerfil) .tsub {
  max-width:100%;
  margin-top:.15rem;
  font-size:.54rem !important;
  line-height:1.15;
  text-wrap:balance;
}

@media (max-width:30rem) {
  #menu { gap:.65rem !important; }

  #menu .logo15 {
    width:100%;
    margin-top:2rem !important;
    /* El cuadro del emblema (abajo) es más ancho que la pantalla: sus 5 % de margen transparente
       por lado quedan afuera y se RECORTAN acá, sin crear un contenedor con scroll (clip, no hidden):
       el Hogar no se puede correr de costado ni con el dedo ni por programa. */
    overflow-x:clip;
  }

  /* (Dueño, 2026-09-05, dos veces) «agrandá el ícono con el 15 dorado así en el iPhone la palabra
     CHORISO ocupa más lugar»; y después: «todavía hay media pulgada de cada lado de la palabra, veo
     dos veladores; dejá 1/8 o 1/4 de pulgada máximo, sin perder el ratio: debe agrandarse todo».
     Medido en el PNG del lockup: las letras de CHORISO ocupan el 81,4 % del cuadro y lo opaco llega
     al 89,5 % (5 % de margen transparente por lado). Para que las letras queden a ~20 px del borde
     (un octavo de pulgada largo) el cuadro tiene que ser MÁS ANCHO que la pantalla: 110vw, con
     sus puntas todavía adentro (89,5 % × 110 = 98,5 %). Antes: 19rem clavados (304 px) y 58-78 px
     de aire; luego 86vw (44-53). Ahora 390 px → 429 (letras a 20 px), 430 px → 473 (a 22). */
  #menu .logo15 .crest {
    width:clamp(17rem,110vw,30rem) !important;
    max-width:none;
    /* Más ancho que su columna, «margin: auto» ya no centra (los auto se vuelven 0 y el cuadro
       queda pegado a la izquierda, con la carta de la espada cortada a la derecha). Se centra
       a mano: el margen negativo que sobra, repartido en los dos lados. */
    margin:0 calc((100% - clamp(17rem,110vw,30rem)) / 2) -.55rem !important;
  }

  #menu .logo15 .brandhalo { width:min(100vw,28rem) !important; }

  #menu .logo15 .promesa {
    max-width:19.5rem;
    font-size:.82rem !important;
  }

  #menu .menupanel { width:100% !important; }
}

@media (min-width:60rem) {
  #menu.show {
    grid-template-columns:minmax(20rem,30rem) minmax(32.5rem,40rem) !important;
    column-gap:clamp(2rem,4vw,4rem) !important;
  }

  #menu .logo15 { max-width:30rem; }
  #menu .logo15 .crest { width:min(41vw,34rem) !important; }

  #menu .menupanel {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:40rem !important;
  }

  #menu .menupanel > :is(.mesaespera,.menutiles,.misioncard,.menurow),
  #menu :is(#menuResume,#menuPlay) {
    grid-column:1 / -1;
  }

  #menu #menuAmigo { grid-column:1;order:-3; }
  #menu #menuRapida { grid-column:2;order:-3; }

  #menu .menutiles {
    order:-2;
    grid-column:1 / -1;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    grid-template-rows:minmax(8.25rem,auto) minmax(7rem,auto);
    gap:.65rem !important;
  }

  #menu #tileGira { grid-column:1 / 8;grid-row:1; }
  #menu #tileTienda { grid-column:8 / 13;grid-row:1; }
  #menu #tileAmigos { grid-column:1 / 4;grid-row:2; }
  #menu #tileCofre { grid-column:4 / 7;grid-row:2; }
  #menu #tileRanking { grid-column:7 / 10;grid-row:2; }
  #menu #tilePerfil { grid-column:10 / 13;grid-row:2; }

  #menu #tileCofre {
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }

  #menu #tileCofre svg {
    width:2.35rem !important;
    height:2.35rem !important;
    margin:0 0 .35rem !important;
  }
}

/* ================================================================
   GIRA · TUCUMÁN COMO TERRITORIO, NO COMO PICTOGRAMA
   ----------------------------------------------------------------
   El progreso y las cartas siguen siendo los mismos. Sólo Tucumán recibe esta
   escena; los emblemas de las demás provincias permanecen disponibles.
*/
#gira[data-prov="tucuman"] {
  background:
    linear-gradient(180deg,rgba(1,6,4,.3) 0,rgba(1,7,5,.18) 29%,rgba(1,6,4,.62) 69%,rgba(1,4,3,.97) 100%),
    radial-gradient(ellipse 82% 34% at 50% 12%,rgba(255,210,105,.14),transparent 72%),
    url('/tema/casa-del-15/gira/tucuman-mobile-v1.webp?v=1') center 18%/cover no-repeat,
    #020805 !important;
}

#gira[data-prov="tucuman"] #giraMotivo { display:none !important; }

#gira[data-prov="tucuman"] .gplaca {
  overflow:hidden;
  border:1px solid rgba(255,224,139,.76) !important;
  border-radius:1.1rem 2.7rem 1.1rem 2.7rem;
  background:
    radial-gradient(circle at 50% -12%,rgba(255,221,132,.2),transparent 58%),
    linear-gradient(145deg,rgba(255,247,211,.11),transparent 34%),
    linear-gradient(160deg,rgba(90,27,17,.93),rgba(29,8,7,.95) 42%,rgba(4,28,19,.96)) !important;
  box-shadow:
    inset 0 1px rgba(255,244,203,.27),
    inset 0 -.6rem 1.3rem rgba(0,0,0,.44),
    0 0 0 .18rem rgba(25,6,3,.78),
    0 1.25rem 3rem rgba(0,0,0,.66) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
}

#gira[data-prov="tucuman"] .gplaca::before {
  inset:.42rem;
  border:1px solid rgba(247,205,99,.44);
  border-radius:.8rem 2.35rem .8rem 2.35rem;
  box-shadow:inset 0 0 0 1px rgba(22,4,2,.76),inset 0 0 1rem rgba(0,0,0,.28);
}

#gira[data-prov="tucuman"] .gplaca::after {
  position:absolute;
  inset:.7rem;
  z-index:0;
  content:'';
  pointer-events:none;
  background:
    radial-gradient(circle at 0 0,#ffe39a 0 .07rem,#8c550e .09rem .18rem,transparent .2rem),
    radial-gradient(circle at 100% 0,#ffe39a 0 .07rem,#8c550e .09rem .18rem,transparent .2rem),
    radial-gradient(circle at 0 100%,#ffe39a 0 .07rem,#8c550e .09rem .18rem,transparent .2rem),
    radial-gradient(circle at 100% 100%,#ffe39a 0 .07rem,#8c550e .09rem .18rem,transparent .2rem);
}

#gira[data-prov="tucuman"] h1 {
  color:#f4ce73;
  font-size:.78rem;
  letter-spacing:.48em;
  background:none;
  -webkit-text-fill-color:currentColor;
  text-shadow:0 2px .25rem #130402,0 0 1rem rgba(246,199,83,.28);
}

#gira[data-prov="tucuman"] .gprov {
  padding:.5rem 2rem;
  border:1px solid #f4ce73;
  color:#fff3c4;
  letter-spacing:.14em;
  clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);
  background:linear-gradient(180deg,#833900,#541e00 58%,#280d00) !important;
  box-shadow:
    inset 0 1px rgba(255,234,175,.31),
    inset 0 -.25rem .5rem rgba(0,0,0,.42),
    0 0 0 .14rem #2b0805,
    0 .55rem 1.2rem rgba(0,0,0,.56);
  text-shadow:0 2px .2rem rgba(0,0,0,.82),0 0 .75rem rgba(255,211,103,.16);
}

#gira[data-prov="tucuman"] .gsub {
  color:#e6ca87;
  background:none;
  -webkit-text-fill-color:#e6ca87;
  filter:none;
  text-shadow:0 2px .2rem rgba(0,0,0,.84);
}

#gira[data-prov="tucuman"] .gtotal {
  border-color:#fff0ad;
  background:radial-gradient(circle at 35% 25%,#fff3c4,#d6a333 58%,#79500f) !important;
  box-shadow:0 0 0 .14rem #461608,0 .55rem 1rem rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.72);
}

#gira[data-prov="tucuman"] .grival {
  border:1px solid rgba(242,196,88,.52) !important;
  border-radius:.65rem 1.5rem .65rem 1.5rem;
  opacity:1;
  background:
    radial-gradient(circle at .7rem .7rem,#e2b94e 0 .04rem,#573008 .055rem .12rem,transparent .14rem),
    radial-gradient(circle at calc(100% - .7rem) calc(100% - .7rem),#e2b94e 0 .04rem,#573008 .055rem .12rem,transparent .14rem),
    linear-gradient(145deg,rgba(255,241,191,.09),transparent 34%),
    linear-gradient(158deg,rgba(78,24,17,.96),rgba(22,8,7,.97) 43%,rgba(4,31,21,.97)) !important;
  box-shadow:
    inset 0 1px rgba(255,239,187,.16),
    inset 0 -.35rem .8rem rgba(0,0,0,.35),
    0 0 0 .12rem rgba(24,5,3,.72),
    0 .8rem 1.65rem rgba(0,0,0,.56) !important;
  filter:none;
}

#gira[data-prov="tucuman"] .grival::before {
  inset:.32rem;
  border:1px solid rgba(241,198,91,.25);
  border-radius:.45rem 1.25rem .45rem 1.25rem;
  box-shadow:inset 0 0 .8rem rgba(0,0,0,.24);
}

#gira[data-prov="tucuman"] .grival.actual {
  border-color:#ffe9a0 !important;
  background:
    linear-gradient(145deg,rgba(255,237,173,.14),transparent 34%),
    linear-gradient(155deg,#79251e,#2f0c0b 43%,#075035) !important;
  box-shadow:
    inset 0 0 0 2px rgba(242,194,70,.2),
    0 0 0 1px #351305,
    0 .95rem 2rem rgba(0,0,0,.62),
    0 0 1.55rem rgba(242,190,54,.32) !important;
}

#gira[data-prov="tucuman"] .grival.actual::after {
  right:.75rem;
  bottom:.62rem;
  padding:.27rem .55rem;
  border:1px solid rgba(255,228,151,.58);
  border-radius:999px;
  color:#ffe9a0;
  background:rgba(39,9,6,.76);
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 .25rem .6rem rgba(0,0,0,.45);
}

#gira[data-prov="tucuman"] .grival.hecho:not(.actual) {
  border-color:rgba(140,226,172,.5) !important;
  background:
    linear-gradient(145deg,rgba(192,255,215,.06),transparent 35%),
    linear-gradient(155deg,rgba(67,24,17,.96),rgba(5,51,34,.98)) !important;
}

#gira[data-prov="tucuman"] .grival:is(.lock,.tapado) {
  border-color:rgba(205,178,112,.28) !important;
  opacity:1;
  background:linear-gradient(155deg,rgba(44,24,19,.96),rgba(4,24,17,.98)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 .5rem 1rem rgba(0,0,0,.45) !important;
  filter:none;
}

#gira[data-prov="tucuman"] .grival:is(.lock,.tapado) :is(.ginfo,.gstars) { opacity:.66; }

#gira[data-prov="tucuman"] .gava {
  border-color:#ffe39a;
  box-shadow:0 0 0 .17rem #260b08,0 0 0 .28rem rgba(233,186,59,.7),0 .6rem 1.1rem rgba(0,0,0,.62);
}

#gira[data-prov="tucuman"] .gava.gnaipe {
  position:relative;
  border-color:#f7dda8;
  background:repeating-conic-gradient(from 45deg,#753100 0 12.5%,#1e3d2c 0 25%) 50%/12px 12px;
  box-shadow:0 0 0 2px #280d00,0 0 0 3px #c9971c,0 .4rem .75rem rgba(0,0,0,.58);
}

#gira[data-prov="tucuman"] .gava.gnaipe::before {
  position:absolute;
  inset:23% 15%;
  display:grid;
  place-items:center;
  content:'15';
  border:1px solid rgba(255,229,151,.7);
  border-radius:50%;
  color:#ffe39a;
  font:700 .58rem/1 Georgia,serif;
  background:#391400;
  box-shadow:0 0 0 2px rgba(25,6,3,.85);
}

@media (min-width:60rem) {
  #gira[data-prov="tucuman"] {
    background:
      linear-gradient(90deg,rgba(1,4,3,.68) 0 25%,rgba(1,4,3,.12) 48%,rgba(1,4,3,.45) 100%),
      linear-gradient(180deg,rgba(1,5,3,.14),rgba(1,5,3,.2) 48%,rgba(1,4,3,.88)),
      url('/tema/casa-del-15/gira/tucuman-desktop-v1.webp?v=1') center/cover no-repeat,
      #020805 !important;
  }
}

/* ================================================================
   HITO V8 · CADA PUERTA ABRE UNA HABITACIÓN REAL
   ----------------------------------------------------------------
   La Casa Histórica fija el nuevo piso visual: las superficies principales
   dejan de compartir una caja genérica y reciben escenario propio. El DOM,
   sus estados, el orden de foco y todos los handlers permanecen intactos.
*/

/* El hogar anticipa el mundo que existe detrás de cada puerta. */
#menu .menupanel {
  background:
    linear-gradient(180deg,rgba(255,231,161,.025),transparent 13% 84%,rgba(2,10,7,.12)) !important;
}

#menu #tileTienda {
  background:
    linear-gradient(90deg,rgba(27,7,4,.91),rgba(4,14,10,.52) 60%,rgba(1,8,5,.82)),
    linear-gradient(180deg,rgba(255,235,174,.08),transparent 46%,rgba(0,0,0,.48)),
    url('/tema/casa-del-15/camaras/tienda-mobile-v1.webp?v=1') center 67%/cover no-repeat !important;
}

#menu #tileCofre {
  background:
    linear-gradient(90deg,rgba(21,5,3,.88),rgba(4,13,9,.42) 58%,rgba(1,7,5,.78)),
    linear-gradient(180deg,rgba(255,236,181,.1),transparent 48%,rgba(0,0,0,.5)),
    url('/tema/casa-del-15/camaras/cofre-mobile-v1.webp?v=1') center 37%/cover no-repeat !important;
}

#menu #tileAmigos {
  background:
    linear-gradient(180deg,rgba(4,13,9,.24),rgba(2,8,5,.82)),
    url('/tema/casa-del-15/camaras/amigos-mobile-v1.webp?v=1') center 55%/cover no-repeat !important;
}

#menu #tileRanking {
  background:
    linear-gradient(180deg,rgba(25,7,4,.28),rgba(2,8,5,.84)),
    url('/tema/casa-del-15/camaras/perfil-ranking-mobile-v1.webp?v=1') center 66%/cover no-repeat !important;
}

#menu #tilePerfil {
  background:
    linear-gradient(180deg,rgba(25,7,4,.18),rgba(2,8,5,.82)),
    url('/tema/casa-del-15/camaras/perfil-ranking-mobile-v1.webp?v=1') center 35%/cover no-repeat !important;
}

#menu :is(#tileTienda,#tileCofre,#tileAmigos,#tileRanking,#tilePerfil) .tname,
#menu :is(#tileTienda,#tileCofre,#tileAmigos,#tileRanking,#tilePerfil) .tsub {
  position:relative;
  z-index:2;
  text-shadow:0 2px .28rem #020201,0 0 .8rem rgba(255,217,118,.24) !important;
}

/* (Dueño, 2026-09-03) Las pastillas dejan la foto velada («ultra básicas») y visten el
   MISMO esmalte verde de los botones de jugar: una sola familia de materiales en el panel. */
#menu .menupanel > .misioncard {
  border-color:rgba(246,207,104,.58) !important;
  background:
    linear-gradient(145deg,rgba(255,244,198,.1),transparent 35%),
    radial-gradient(ellipse 80% 78% at 50% -30%,rgba(69,170,119,.18),transparent 68%),
    repeating-linear-gradient(94deg,transparent 0 .5rem,rgba(255,255,255,.018) .53rem,transparent .57rem 1rem),
    linear-gradient(180deg,var(--casa15-felt-700),var(--casa15-felt-850) 58%,var(--casa15-felt-950)) !important;
  box-shadow:
    inset 0 1px rgba(255,245,205,.18),
    inset 0 -.45rem 1rem rgba(0,0,0,.34),
    0 0 0 .12rem rgba(29,7,4,.82),
    0 .65rem 1.5rem rgba(0,0,0,.48) !important;
}




/* Un aviso nacido en la partida no se queda tapando el blasón al volver al
   hogar, incluso si el gesto táctil anterior todavía conserva su clase. */
#menu.show ~ #toast {
  top:auto !important;
  bottom:max(1.15rem,env(safe-area-inset-bottom)) !important;
  max-width:min(88vw,28rem);
}

/* Gira y mesa son opacas: el blasón no consume composición mientras el Hogar
   está oculto. Al recuperar `.show`, las mismas animaciones continúan. */
#menu:not(.show)::before,
#menu:not(.show) .logo15 :is(.crest,.brandhalo),
#menu:not(.show) .logo15 .humo i,
body:has(#gira.show) #menu::before,
body:has(#gira.show) #menu .logo15 :is(.crest,.brandhalo),
body:has(#gira.show) #menu .logo15 .humo i {
  animation-play-state:paused !important;
}

/* Fondos de cámara: la imagen cuenta dónde estás; la UI sigue siendo DOM. */
#themeBanner,
#mazoLaminaBanner,
#pileBanner {
  background:
    linear-gradient(180deg,rgba(1,5,3,.3),rgba(1,6,4,.46) 38%,rgba(1,4,3,.94)),
    radial-gradient(ellipse 72% 42% at 50% 14%,rgba(243,190,66,.12),transparent 72%),
    url('/tema/casa-del-15/camaras/tienda-mobile-v1.webp?v=1') center/cover no-repeat !important;
}

#cofreBanner {
  background:
    linear-gradient(180deg,rgba(1,4,3,.18),rgba(1,5,3,.42) 48%,rgba(1,3,2,.94)),
    radial-gradient(ellipse 74% 38% at 50% 24%,rgba(255,203,72,.17),transparent 72%),
    url('/tema/casa-del-15/camaras/cofre-mobile-v1.webp?v=1') center/cover no-repeat !important;
}

#paseBanner,
#dealBanner {
  background:
    linear-gradient(180deg,rgba(2,6,4,.2),rgba(2,7,5,.5) 45%,rgba(1,4,3,.94)),
    radial-gradient(ellipse 76% 42% at 50% 13%,rgba(255,201,77,.14),transparent 70%),
    url('/tema/casa-del-15/camaras/misiones-mobile-v1.webp?v=1') center/cover no-repeat !important;
}

#perfilBanner,
#rankingBanner,
#winBanner,
#amigoPremioBanner {
  background:
    linear-gradient(180deg,rgba(1,5,3,.18),rgba(2,7,5,.46) 47%,rgba(1,3,2,.95)),
    radial-gradient(ellipse 66% 35% at 50% 20%,rgba(248,196,73,.12),transparent 72%),
    url('/tema/casa-del-15/camaras/perfil-ranking-mobile-v1.webp?v=1') center/cover no-repeat !important;
}

#amigosBanner,
#amigoBanner,
#apuestaBanner,
#rapidaBanner {
  background:
    linear-gradient(180deg,rgba(1,5,3,.2),rgba(2,7,5,.48) 46%,rgba(1,3,2,.95)),
    radial-gradient(ellipse 68% 34% at 50% 24%,rgba(248,196,73,.12),transparent 72%),
    url('/tema/casa-del-15/camaras/amigos-mobile-v1.webp?v=1') center/cover no-repeat !important;
}

#anotadorBanner,
#settingsBanner,
#cuentaBanner,
#tutoBanner,
#hablarBanner,
#claimBanner {
  background:
    linear-gradient(180deg,rgba(1,5,3,.21),rgba(2,7,5,.48) 45%,rgba(1,3,2,.95)),
    radial-gradient(ellipse 72% 38% at 50% 15%,rgba(246,190,65,.11),transparent 72%),
    url('/tema/casa-del-15/camaras/anotador-pausa-mobile-v1.webp?v=1') center/cover no-repeat !important;
}

/* La arquitectura encuadra el contenido; las cámaras de lectura son opacas. */
:is(
  #themeBanner,#mazoLaminaBanner,#pileBanner,#cofreBanner,#paseBanner,
  #dealBanner,#perfilBanner,#rankingBanner,#winBanner,#amigoPremioBanner,
  #amigosBanner,#amigoBanner,#apuestaBanner,#rapidaBanner,#anotadorBanner,
  #settingsBanner,#cuentaBanner,#tutoBanner,#hablarBanner,#claimBanner
) > .box {
  border-color:var(--casa15-panel-line) !important;
  background:
    linear-gradient(180deg,rgba(207,185,123,.065),transparent 8rem),
    var(--casa15-panel) !important;
  box-shadow:
    0 0 0 1px #05100a,
    0 0 0 3px rgba(205,169,89,.25),
    0 1.8rem 5rem rgba(0,0,0,.72),
    inset 0 1px rgba(255,243,196,.18) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Tienda: vitrinas en vez de una lista de tarjetas SaaS. */
#themeBanner #estiloBilletera {
  border-color:rgba(255,218,122,.58) !important;
  background:linear-gradient(180deg,rgba(88,33,16,.88),rgba(4,23,16,.9)) !important;
  box-shadow:inset 0 1px rgba(255,242,190,.15),0 .45rem 1rem rgba(0,0,0,.46);
}

#themeBanner .esec {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(241,199,94,.42) !important;
  border-radius:.5rem 1.35rem .5rem 1.35rem !important;
  background:
    linear-gradient(145deg,rgba(255,242,190,.07),transparent 33%),
    radial-gradient(ellipse 72% 55% at 50% -12%,rgba(231,176,47,.11),transparent 68%),
    linear-gradient(158deg,rgba(58,22,13,.87),rgba(4,31,21,.9)) !important;
  box-shadow:inset 0 1px rgba(255,237,180,.12),inset 0 -.4rem .9rem rgba(0,0,0,.34),0 .6rem 1.35rem rgba(0,0,0,.42) !important;
}

#themeBanner .esec::after {
  position:absolute;
  inset:.34rem;
  content:'';
  pointer-events:none;
  border:1px solid rgba(239,194,82,.17);
  border-radius:.34rem 1.1rem .34rem 1.1rem;
}

#themeBanner .esec > * { position:relative;z-index:1; }

#themeBanner .esec > h4 {
  color:#ffe39a !important;
  letter-spacing:.18em;
  text-shadow:0 2px .25rem #130402,0 0 .8rem rgba(240,187,55,.16);
}

/* Las fichas de paño y cuero NO reciben el fondo del relicario: su fondo ES la
   mercadería (la receta exacta de la mesa y de la franja, con sus variables en la
   ficha). Pisarlas fue el bug de "todo verde" del 02/09/2026. */
#themeBanner :is(.sw:not(.pano):not(.cuero),.vhero,.vitem,.vdisco) {
  background:
    linear-gradient(145deg,rgba(255,245,207,.08),transparent 34%),
    linear-gradient(180deg,rgba(38,17,10,.92),rgba(3,24,16,.94)) !important;
  box-shadow:inset 0 1px rgba(255,240,188,.12),0 .42rem 1rem rgba(0,0,0,.45) !important;
}

/* Cofre: la mecánica animada sigue viva sobre un auténtico relicario. */
#cofreBanner > .box {
  background:
    linear-gradient(180deg,rgba(41,13,7,.72),rgba(3,20,14,.93) 54%,rgba(3,8,5,.97)),
    url('/tema/casa-del-15/camaras/cofre-mobile-v1.webp?v=1') center 30%/cover no-repeat !important;
}

#cofreBanner #cofreEscena {
  width:min(100%,15.5rem);
  padding:.7rem 1rem .45rem;
  border:1px solid rgba(255,219,126,.48);
  border-radius:4rem 4rem .65rem .65rem;
  background:
    radial-gradient(ellipse 55% 46% at 50% 56%,rgba(255,223,125,.23),transparent 72%),
    linear-gradient(180deg,rgba(77,28,14,.78),rgba(3,26,17,.88)) !important;
  box-shadow:inset 0 1px rgba(255,240,187,.17),inset 0 -.7rem 1.4rem rgba(0,0,0,.43),0 .8rem 1.8rem rgba(0,0,0,.53) !important;
}

#cofreBanner #cofreSvg {
  width:10.5rem !important;
  height:8.75rem !important;
  filter:drop-shadow(0 .85rem .8rem rgba(0,0,0,.72)) drop-shadow(0 0 1rem rgba(250,200,69,.3)) saturate(1.12) contrast(1.04);
}

#cofreBanner #cofreTexto {
  color:#f1dfb7 !important;
  text-shadow:0 2px .25rem rgba(0,0,0,.92);
}

/* Pase: un itinerario ceremonial, no una planilla de treinta casillas. */
#paseBanner .pasetrack {
  gap:.42rem;
  padding:.55rem;
  border:1px solid rgba(246,204,98,.34);
  border-radius:.65rem 1.3rem .65rem 1.3rem;
  background:linear-gradient(180deg,rgba(3,20,14,.68),rgba(25,8,5,.75));
  box-shadow:inset 0 .35rem 1rem rgba(0,0,0,.42),0 .5rem 1.2rem rgba(0,0,0,.38);
}

#paseBanner .pescalon {
  min-height:3.75rem;
  justify-content:center;
  border-radius:.35rem .85rem .35rem .85rem;
  border-color:rgba(236,193,82,.34) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(255,226,143,.1),transparent 48%),
    linear-gradient(160deg,rgba(74,28,15,.82),rgba(3,29,19,.88)) !important;
  box-shadow:inset 0 1px rgba(255,237,180,.1),0 .28rem .65rem rgba(0,0,0,.35);
}

#paseBanner .pescalon.hito {
  border-color:rgba(255,220,127,.66) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(255,230,148,.18),transparent 52%),
    linear-gradient(160deg,rgba(103,37,18,.92),rgba(4,42,27,.92)) !important;
}

#paseBanner .paseoro {
  border-color:rgba(255,217,119,.54) !important;
  background:linear-gradient(160deg,rgba(91,35,16,.88),rgba(3,30,20,.92)) !important;
  box-shadow:inset 0 1px rgba(255,240,188,.13),0 .6rem 1.35rem rgba(0,0,0,.44) !important;
}

/* Galería de honor: retrato, estadísticas y ranking pertenecen a un museo. */
#perfilBanner .perfil-identidad {
  padding:1rem .75rem .85rem;
  border:1px solid rgba(244,201,91,.42);
  border-radius:50% 50% .75rem .75rem / 1.9rem 1.9rem .75rem .75rem;
  background:
    radial-gradient(ellipse 58% 50% at 50% 16%,rgba(255,224,135,.14),transparent 70%),
    linear-gradient(180deg,rgba(56,20,12,.7),rgba(3,27,18,.84));
  box-shadow:inset 0 1px rgba(255,241,190,.14),0 .7rem 1.5rem rgba(0,0,0,.42);
}

#perfilBanner #perfilAvatar {
  box-shadow:0 0 0 .18rem #2b0805,0 0 0 .3rem rgba(241,194,78,.76),0 .8rem 1.4rem rgba(0,0,0,.64),0 0 1rem rgba(240,188,57,.18) !important;
}

#perfilBanner :is(.pstat,.pcanto,.medalla,.retrato-ficha),
#rankingBanner .rfila {
  border-color:rgba(239,194,82,.4) !important;
  background:
    linear-gradient(145deg,rgba(255,244,199,.065),transparent 35%),
    linear-gradient(160deg,rgba(65,24,13,.84),rgba(3,28,19,.88)) !important;
  box-shadow:inset 0 1px rgba(255,239,182,.1),0 .35rem .8rem rgba(0,0,0,.34);
}

#rankingBanner .rfila:first-child {
  border-color:rgba(255,224,132,.72) !important;
  background:
    radial-gradient(ellipse 54% 130% at 12% 50%,rgba(255,218,111,.18),transparent 72%),
    linear-gradient(160deg,rgba(94,34,16,.92),rgba(3,34,22,.92)) !important;
}

#rankingBanner .rmed {
  filter:drop-shadow(0 .3rem .35rem rgba(0,0,0,.6)) drop-shadow(0 0 .5rem rgba(247,195,57,.16));
}

/* Libro de rivalidades: filas como fichas archivadas, no burbujas sociales. */
#amigosBanner #amigosBody {
  padding:.35rem;
  border:1px solid rgba(241,197,89,.27);
  border-radius:.55rem 1.15rem .55rem 1.15rem;
  background:linear-gradient(180deg,rgba(4,25,17,.66),rgba(31,9,6,.72));
  box-shadow:inset 0 .4rem 1.1rem rgba(0,0,0,.4);
}

#amigosBanner #amigosBody > * {
  border-color:rgba(239,194,82,.36) !important;
  background:
    linear-gradient(145deg,rgba(255,243,196,.06),transparent 34%),
    linear-gradient(160deg,rgba(70,25,13,.84),rgba(3,28,19,.88)) !important;
  box-shadow:inset 0 1px rgba(255,237,180,.09),0 .35rem .8rem rgba(0,0,0,.33);
}

/* Anotador y pausa: un rincón real de la Casa, silencioso y táctil. */
#anotadorBanner > .box {
  background:
    linear-gradient(180deg,rgba(44,17,10,.76),rgba(3,26,18,.92)),
    url('/tema/casa-del-15/camaras/anotador-pausa-mobile-v1.webp?v=1') center 68%/cover no-repeat !important;
}

#anotadorBanner .beanside {
  min-height:12rem;
  padding:.8rem .55rem;
  border:1px solid rgba(243,200,90,.42);
  border-radius:.45rem 1.05rem .45rem 1.05rem;
  background:linear-gradient(180deg,rgba(52,21,12,.76),rgba(3,28,19,.84));
  box-shadow:inset 0 .35rem .9rem rgba(0,0,0,.35),0 .45rem 1rem rgba(0,0,0,.37);
}

#anotadorBanner .beanside .total {
  color:#ffe39a !important;
  text-shadow:0 2px .25rem #190603,0 0 .85rem rgba(241,189,56,.25);
}

#pauseOverlay {
  background:
    linear-gradient(180deg,rgba(1,5,3,.35),rgba(1,5,3,.68) 52%,rgba(1,3,2,.96)),
    radial-gradient(ellipse 58% 37% at 50% 39%,rgba(239,187,60,.13),transparent 72%),
    url('/tema/casa-del-15/camaras/anotador-pausa-mobile-v1.webp?v=1') center/cover no-repeat !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

#pauseOverlay::before {
  position:absolute;
  inset:9% 8%;
  content:'';
  pointer-events:none;
  border:1px solid rgba(245,205,103,.34);
  border-radius:48% 48% 1.2rem 1.2rem / 4rem 4rem 1.2rem 1.2rem;
  background:radial-gradient(ellipse 46% 46% at 50% 43%,rgba(3,21,14,.58),transparent 74%);
  box-shadow:inset 0 0 0 .22rem rgba(24,6,3,.45),inset 0 0 3rem rgba(0,0,0,.34),0 1.2rem 3rem rgba(0,0,0,.55);
}

#pauseOverlay > * { position:relative;z-index:1; }

#pauseOverlay .pausatit {
  font-family:'Lilita One','Trocchi',Georgia,serif !important;
  font-size:clamp(3rem,15vw,7rem) !important;
  letter-spacing:.14em;
  color:#ffe39a !important;
  background:none !important;
  -webkit-text-fill-color:currentColor;
  filter:none !important;
  text-shadow:0 3px .3rem #190603,0 0 1.5rem rgba(241,190,62,.24) !important;
}

#pauseOverlay .pcuenta {
  min-width:4.3rem;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 34% 25%,rgba(255,241,190,.18),transparent 28%),
    linear-gradient(160deg,rgba(98,38,18,.94),rgba(3,31,20,.96)) !important;
  box-shadow:0 0 0 .18rem rgba(32,8,4,.8),0 0 0 .25rem rgba(242,195,77,.5),0 .75rem 1.5rem rgba(0,0,0,.58),inset 0 1px rgba(255,240,184,.16) !important;
}

/* Fondo sereno de partida, sin ilustraciones ornamentales alrededor del paño. */
.board {
  background:
    linear-gradient(180deg,rgba(1,5,3,.2),rgba(1,5,3,.06) 25%,rgba(1,4,3,.36) 70%,rgba(1,3,2,.8)),
    linear-gradient(90deg,rgba(20,5,3,.48),transparent 9% 91%,rgba(20,5,3,.48)),
    #081b14 !important;
  box-shadow:inset 0 0 4rem rgba(0,0,0,.34) !important;
}

.mesa {
  border-color:rgba(189,170,119,.3) !important;
  box-shadow:
    inset 0 1.4rem 3.2rem rgba(255,255,255,.035),
    inset 0 -2.2rem 4rem rgba(0,0,0,.3),
    0 1.15rem 2.6rem rgba(0,0,0,.7),
    0 0 2rem rgba(235,181,49,.1) !important;
}

/* Sin marco ornamental, este espacio vuelve a estar disponible para las cartas. */
.mesa { --mesa-aire-x: 30px; --mesa-aire-y: 48px; }

/* Las cartas quedan por encima de la capa que señala destinos de arrastre. */
.mesa #table { position: relative; z-index: 2; }

.mesa::after {
  z-index: 1 !important;
  inset:0 !important;
  border:1px solid transparent !important;
  border-radius:inherit !important;
  background:none !important;
  box-shadow:none !important;
  filter:none;
}

.mesa:is(.target,.target-throw)::after {
  border-color:var(--casa15-target) !important;
  box-shadow:
    inset 0 0 0 .18rem rgba(24,6,3,.35),
    inset 0 0 1.35rem color-mix(in srgb,var(--casa15-target) 36%,transparent),
    0 0 .9rem color-mix(in srgb,var(--casa15-target) 32%,transparent) !important;
}

/* Los cuarenta naipes conservan rango, pinta, palo y arte deterministas. Una
   única orla transparente los vuelve familia sin tapar índices ni figuras. */
.cardbox::after {
  border-radius:.55rem !important;
  background:
    linear-gradient(calc(118deg + var(--lx) * 50deg),transparent 39%,rgba(255,255,255,.12) 49%,transparent 59%),
    url('/tema/casa-del-15/naipes/marco-frente-v1.webp?v=1') center/100% 100% no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(91,48,12,.12),inset 0 0 .35rem rgba(255,241,190,.08) !important;
}

:is(#themeBanner,#mazoLaminaBanner,#pileBanner) .naipecompuesto::after {
  position:absolute;
  inset:0;
  z-index:3;
  content:'';
  pointer-events:none;
  border-radius:.5rem;
  background:url('/tema/casa-del-15/naipes/marco-frente-v1.webp?v=1') center/100% 100% no-repeat;
  filter:drop-shadow(0 .16rem .22rem rgba(0,0,0,.28));
}

.cardbox :is(img.naipefoto,.naipepremium) {
  filter:saturate(1.035) contrast(1.018);
}

/* Las colecciones nuevas tienen su propio papel y pinta: la orla del Gran
   Salón no debe superponerse a su arte ni añadir gemas al borde español. */
.cardbox:has(.naipecoleccion)::after {
  background:none !important;
  box-shadow:none !important;
}
:is(#themeBanner,#mazoLaminaBanner,#pileBanner) .naipecompuesto:has(> .naipecoleccion)::after {
  content:none;
}
.cardbox .naipecoleccion { filter:none; }

.rivalrow,
.mano,
.hudchip {
  -webkit-backdrop-filter:blur(.4rem) saturate(1.08);
  backdrop-filter:blur(.4rem) saturate(1.08);
}

/* Acciones mayores: sello de orfebrería con una lectura inequívoca. */
body > .banner button.primary,
#pauseOverlay button.primary {
  position:relative;
  overflow:hidden;
  letter-spacing:.075em;
  background:
    radial-gradient(ellipse 72% 90% at 50% -24%,rgba(255,255,237,.86),transparent 59%),
    repeating-linear-gradient(112deg,transparent 0 .58rem,rgba(89,44,4,.05) .63rem,transparent .68rem 1.25rem),
    linear-gradient(180deg,#fff0ad,#dfaa35 57%,#84500e) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.82),
    inset 0 -.28rem .52rem rgba(80,37,3,.4),
    0 0 0 .12rem #411406,
    0 0 0 .18rem rgba(237,190,71,.62),
    0 .28rem 0 #461608,
    0 .75rem 1.4rem rgba(0,0,0,.54) !important;
}

body > .banner button.aux,
#pauseOverlay button.aux {
  letter-spacing:.055em;
  background:
    linear-gradient(145deg,rgba(255,240,184,.08),transparent 34%),
    linear-gradient(180deg,#1c5a3a,#123524 58%,#08150e) !important;
  box-shadow:inset 0 1px rgba(255,241,193,.13),inset 0 -.22rem .48rem rgba(0,0,0,.38),0 .42rem .9rem rgba(0,0,0,.44) !important;
}

/* Última mano: una pequeña pieza de marquetería, no un zócalo de sistema.
   Se apoya en la franja libre inmediatamente anterior a las cartas (la posición
   la calcula placaDeApertura con la geometría real de #table), por eso nunca
   invade ni la mano ni CANTAR. La jerarquía en dos líneas reduce mucho el ancho
   sin perder la información que cambia la decisión del jugador. */
.cartelapertura.ultima-mano {
  isolation:isolate;
  display:grid;
  place-items:center;
  gap:.13rem;
  width:clamp(13rem,58vw,15rem) !important;
  max-width:calc(100vw - 1.5rem) !important;
  min-height:0;
  box-sizing:border-box;
  padding:.48rem 1.6rem .52rem !important;
  overflow:hidden;
  border:1px solid rgba(255,222,127,.92) !important;
  border-radius:.62rem !important;
  color:var(--casa15-ivory) !important;
  background:
    radial-gradient(ellipse 72% 115% at 50% -28%,rgba(255,229,151,.24),transparent 62%),
    linear-gradient(112deg,transparent 16%,rgba(255,247,206,.055) 43%,transparent 61%),
    repeating-linear-gradient(92deg,rgba(255,255,255,.018) 0 1px,transparent 1px .34rem),
    linear-gradient(180deg,#652518 0%,#36110c 48%,#140805 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,247,211,.36),
    inset 0 -.22rem .55rem rgba(0,0,0,.46),
    0 0 0 .16rem rgba(58,16,7,.92),
    0 0 0 .22rem rgba(226,178,56,.5),
    0 .72rem 1.7rem rgba(0,0,0,.58),
    0 0 1.25rem rgba(218,155,44,.14) !important;
  text-shadow:0 2px .18rem rgba(0,0,0,.88) !important;
  animation:casa15-ultima-mano 5.4s linear forwards !important;
  will-change:opacity,transform;
}

.cartelapertura.ultima-mano::before {
  position:absolute;
  z-index:-1;
  inset:.22rem;
  content:'';
  border:1px solid rgba(246,200,90,.34);
  border-radius:.42rem;
  pointer-events:none;
  box-shadow:inset 0 0 .75rem rgba(255,210,95,.055);
}

.ultima-mano__ornamento {
  position:absolute;
  z-index:-1;
  top:50%;
  right:.72rem;
  left:.72rem;
  height:1px;
  transform:translateY(-50%);
  opacity:.8;
  background:linear-gradient(90deg,#d69d2e 0 14%,transparent 14% 86%,#d69d2e 86% 100%);
}

.ultima-mano__ornamento::before,
.ultima-mano__ornamento::after {
  position:absolute;
  top:50%;
  content:'✦';
  color:#ffe39a;
  font:400 .56rem/1 Georgia,serif;
  text-shadow:0 0 .45rem rgba(255,202,70,.72);
}

.ultima-mano__ornamento::before { left:-.12rem;transform:translate(-50%,-50%); }
.ultima-mano__ornamento::after { right:-.12rem;transform:translate(50%,-50%); }

.ultima-mano__titulo {
  position:relative;
  z-index:1;
  color:#fff3c4;
  font:700 .78rem/1.06 'Trocchi',Georgia,serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

.ultima-mano__detalle {
  position:relative;
  z-index:1;
  color:#ebc363;
  font:700 .54rem/1.08 'Trocchi',Georgia,serif;
  letter-spacing:.105em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* 5,4 s: exactamente 500 ms menos que los 5,9 s anteriores. El fade perceptible
   conserva sus dos segundos; el medio segundo sale de la permanencia inmóvil. */
@keyframes casa15-ultima-mano {
  0% {
    opacity:0;
    transform:translate(-50%,-.5rem) scale(.96);
    animation-timing-function:cubic-bezier(.16,1,.3,1);
  }
  8% { opacity:1;transform:translate(-50%,0) scale(1); }
  53% {
    opacity:1;
    transform:translate(-50%,0) scale(1);
    animation-timing-function:cubic-bezier(.37,0,.63,1);
  }
  100% { opacity:0;transform:translate(-50%,0) scale(1); }
}

@media (min-width:60rem) {
  #menu #tileTienda {
    background:
      linear-gradient(90deg,rgba(26,7,4,.88),rgba(3,16,11,.5) 60%,rgba(1,7,5,.8)),
      linear-gradient(180deg,rgba(255,236,181,.08),transparent 46%,rgba(0,0,0,.48)),
      url('/tema/casa-del-15/camaras/tienda-mobile-v1.webp?v=1') center 65%/cover no-repeat !important;
  }
}


@media (forced-colors:active) {
  #menu .menupanel,
  #menu .menutiles > .menutile,
  body > .banner > .box.ornate,
  body > .banner > .box:not(.ornate),
  #gira .grival,
  #themeBanner .sw,
  #perfilBanner .retrato,
  #drawer,
  .mesa,
  .rivalrow,
  .mano {
    border:1px solid CanvasText !important;
    background:Canvas !important;
    box-shadow:none !important;
  }

  #menu .menupanel .seg button.primary,
  #settingsBanner .seg button.primary,
  #themeBanner .sw.on,
  #gira .grival.actual,
  #perfilBanner .retrato.elegido,
  #pauseBtn.on {
    outline:3px double Highlight !important;
    outline-offset:2px !important;
  }

  #singBtn.canto-disponible:not(:disabled) {
    outline:3px double Highlight !important;
    outline-offset:3px !important;
    animation:none !important;
    filter:none !important;
  }

  #singBtn.canto-disponible:not(:disabled)::before,
  #singBtn.canto-disponible:not(:disabled)::after {
    animation:none !important;
  }

  .cartelapertura.ultima-mano {
    color:CanvasText !important;
    background:Canvas !important;
    border:2px double CanvasText !important;
    box-shadow:none !important;
  }

  .cartelapertura.ultima-mano::before { border-color:CanvasText !important;box-shadow:none !important; }
  .ultima-mano__titulo,
  .ultima-mano__detalle,
  .ultima-mano__ornamento::before,
  .ultima-mano__ornamento::after { color:CanvasText !important;text-shadow:none !important; }

}

/* La burbuja del oponente es papel iluminado, no otra pieza de cuero. Esta
   regla queda después de todas las pieles para que su contraste sea estable. */
.globo.rival {
  color:#2b1c06 !important;
  -webkit-text-fill-color:currentColor !important;
  background-color:#f0d98d !important;
  background-image:linear-gradient(180deg,#fff3d7,#f0d98d) !important;
  border:2px solid #b98f24 !important;
  box-shadow:0 .5rem 1.4rem rgba(0,0,0,.52) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

@media (forced-colors:active) {
  .globo.rival {
    color:CanvasText !important;
    -webkit-text-fill-color:currentColor !important;
    background:Canvas !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
  }
}

/* El título recibe el foco al abrir una cámara para que el lector de pantalla
   anuncie contexto sin encender un contorno sobre una pieza no interactiva. */
[data-a11y-foco-inicial]:focus { outline:none !important; }

/* ================================================================
   DIRECCIÓN EDITORIAL · ESMERALDA, PAPEL Y ORO
   El papel distingue piezas de colección; el verde profundo reúne los mandos.
   Sólo las acciones principales y los logros reciben el acento de oro pleno.
*/

body {
  color:var(--casa15-ivory);
  font-family:'Alegreya',Georgia,serif;
  font-size:15.5px;
  line-height:1.42;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

:is(.ctitle,.gprov,.mazonombre,.menutile .tname,.misioncard .mhead,.mhead,
  .vsvs,.box.ornate .psec,.box.ornate .ptit,.esec > h4,.gmpsello) {
  font-family:'Trocchi',Georgia,serif !important;
  font-weight:400 !important;
  -webkit-text-fill-color:currentColor !important;
  background:none !important;
  filter:none !important;
}

body > .banner > .box :is(p,.gmptexto,.potxt,.pofino,.vdesc,.rpie,.ghist,
  .setrow-note,.statgrid,.legal,.traidos) {
  color:#d5dfc9;
  line-height:1.5;
}

body > .banner > .box.ornate > .ctitle,
body > .banner > .box:not(.ornate) > h3 {
  margin-bottom:1.25rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--casa15-panel-line);
  color:var(--casa15-ivory) !important;
  font-family:'Trocchi',Georgia,serif !important;
  font-size:clamp(1.03rem,4.5vw,1.34rem) !important;
  font-weight:400 !important;
  line-height:1.2;
  letter-spacing:.11em !important;
  text-wrap:balance;
  -webkit-text-fill-color:currentColor !important;
  background:none !important;
  filter:none !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
}

body > .banner > .box.ornate,
body > .banner > .box:not(.ornate) {
  color:var(--casa15-ivory) !important;
  border-radius:1rem !important;
  background:
    linear-gradient(180deg,rgba(207,185,123,.065),transparent 8rem),
    var(--casa15-panel) !important;
  box-shadow:
    0 0 0 1px #05100a,
    0 0 0 3px rgba(205,169,89,.25),
    0 1.45rem 4rem rgba(0,0,0,.72),
    inset 0 1px rgba(255,239,184,.16) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

body > .banner > .box.ornate::before,
body > .banner > .box.ornate::after { border-radius:.75rem;opacity:.6; }

.banner.show > .box { animation:casa15-panel-in .28s var(--casa15-ease) both; }

@keyframes casa15-panel-in {
  from { opacity:0;transform:translateY(.65rem); }
  to { opacity:1;transform:translateY(0); }
}

button,
input,
textarea,
select { font-family:'Alegreya',Georgia,serif !important; }

:is(#menu .menupanel,body > .banner,#pauseOverlay) :is(button.primary,button.aux),
#gira button.aux {
  min-height:3rem;
  font-size:.95rem !important;
  font-weight:700 !important;
  line-height:1.1;
  letter-spacing:.07em !important;
  text-transform:uppercase;
  transition:transform var(--casa15-motion-fast) var(--casa15-ease-press),
    border-color var(--casa15-motion-base) ease,filter var(--casa15-motion-base) ease,
    box-shadow var(--casa15-motion-base) ease !important;
}

#menu .menupanel > button.primary,
body > .banner button.primary,
#pauseOverlay button.primary {
  border:1px solid #f0d98d !important;
  color:#2b1c06 !important;
  background:linear-gradient(180deg,#f3df9e 0%,#dbb865 66%,#bf913b 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,250,218,.7),
    inset 0 -1px rgba(94,57,7,.35),
    0 .2rem 0 #695021,
    0 .45rem .85rem rgba(0,0,0,.35) !important;
  text-shadow:0 1px rgba(255,247,210,.52) !important;
}

#menu .menupanel > button.aux,
body > .banner button.aux,
#pauseOverlay button.aux,
#gira button.aux {
  border:1px solid rgba(209,192,137,.4) !important;
  color:var(--casa15-ivory) !important;
  background:linear-gradient(180deg,#214d3e,#1b3728) !important;
  box-shadow:inset 0 1px rgba(255,241,190,.09),0 .22rem .5rem rgba(0,0,0,.25) !important;
}

#menu .menupanel > button.primary::after { animation:none !important;opacity:.34; }

#menu .menutiles > .menutile {
  border-color:rgba(231,204,132,.52) !important;
  border-radius:.75rem !important;
  box-shadow:inset 0 1px rgba(255,240,186,.1),0 .5rem 1.05rem rgba(0,0,0,.38) !important;
}

#menu .menutiles > .menutile::before {
  border-style:solid !important;
  border-color:rgba(235,194,91,.19) !important;
}

#menu .menutiles > .menutile .tname {
  color:#fff3c4 !important;
  font-size:clamp(.86rem,3.25vw,1.02rem) !important;
  line-height:1.08;
  letter-spacing:.045em !important;
}

#menu .menutiles > .menutile .tsub {
  color:#e6d6b2 !important;
  font-family:'Alegreya',Georgia,serif !important;
  font-size:clamp(.72rem,2.5vw,.82rem) !important;
  font-weight:700;
  line-height:1.18;
  letter-spacing:.015em !important;
}

#menu .menupanel .misioncard {
  border-color:var(--casa15-panel-line) !important;
  border-radius:.75rem !important;
  background:var(--casa15-panel) !important;
  box-shadow:inset 0 1px rgba(255,236,177,.08),0 .42rem .9rem rgba(0,0,0,.3) !important;
}

#menu .menupanel .misioncard .mhead {
  color:#f0d98d !important;
  font-size:.88rem !important;
  line-height:1.2;
  letter-spacing:.055em !important;
  text-shadow:0 1px .2rem #130402;
}

#menu .menupanel .menurow label,
#settingsBanner .menurow label,
#rapidaBanner .menurow label {
  color:#f7dda8 !important;
  font-family:'Trocchi',Georgia,serif !important;
  font-size:.82rem !important;
  font-weight:400 !important;
  line-height:1.25;
  letter-spacing:.065em !important;
  -webkit-text-fill-color:currentColor !important;
  background:none !important;
  filter:none !important;
  opacity:1 !important;
}

#settingsBanner .menurow {
  gap:.65rem !important;
  padding:.85rem .85rem .95rem !important;
  overflow:visible !important;
  border:1px solid rgba(206,195,151,.16) !important;
  border-radius:.65rem !important;
  background:var(--casa15-panel-raised) !important;
  box-shadow:inset 0 1px rgba(255,238,182,.04) !important;
}

#settingsBanner .menurow::before { content:none !important; }

#menu .menupanel .seg,
#menu .menupanel .stepper,
#settingsBanner .seg,
#rapidaBanner .seg {
  gap:.3rem !important;
  padding:.28rem !important;
  border-color:rgba(218,195,130,.22) !important;
  border-radius:.55rem !important;
  background:var(--casa15-panel-deep) !important;
  box-shadow:inset 0 1px .2rem rgba(0,0,0,.28) !important;
}

#menu .menupanel .seg button,
#settingsBanner .seg button,
#rapidaBanner .seg button {
  min-height:3rem;
  border-color:transparent !important;
  border-radius:.35rem !important;
  color:#d5dfc9 !important;
  font-family:'Alegreya',Georgia,serif !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  letter-spacing:.025em !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Trocchi tiene el centro óptico que ya calibra el stepper; Alegreya baja los
   signos 2 px aunque la caja flex esté matemáticamente centrada. */
#menu .menupanel .stepbtn { font-family:'Trocchi',Georgia,serif !important; }

#menu .menupanel .seg button:is(.on,.primary),
#settingsBanner .seg button:is(.on,.primary),
#rapidaBanner .seg button:is(.on,.primary) {
  border-color:#e6ca87 !important;
  color:#241408 !important;
  background:linear-gradient(180deg,#f3df9e,#d3b564) !important;
  box-shadow:inset 0 1px rgba(255,250,218,.5),0 .12rem .28rem rgba(0,0,0,.2) !important;
}

:is(.box.ornate,#settingsBanner,#perfilBanner) input:not([type="file"]):not([type="checkbox"]) {
  min-height:2.7rem;
  box-sizing:border-box;
  border:1px solid rgba(216,201,146,.43) !important;
  border-radius:.5rem !important;
  color:#fff3c4 !important;
  caret-color:#f2c65a;
  font-family:'Alegreya',Georgia,serif !important;
  font-size:1rem !important;
  font-weight:700 !important;
  background:var(--casa15-panel-deep) !important;
  box-shadow:inset 0 1px .2rem rgba(0,0,0,.24) !important;
  text-shadow:none !important;
}

:is(.box.ornate,#settingsBanner,#perfilBanner) input::placeholder { color:#aa9d7c !important;opacity:1; }

/* La recuperación y el ojo de contraseña son controles reales, con el mismo
   blanco táctil que el resto de la cuenta. */
#cuentaBanner #cuentaVista input { min-height:3rem; }
#cuentaBanner #cOjo {
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;padding:0 !important;
  top:calc(50% + 4px) !important;
  transform:translateY(-50%) !important;
  color:var(--casa15-ivory) !important;
  border-radius:.35rem;
}
#cuentaBanner #cOlvide {
  min-height:2.75rem;
  color:#e6d6b2 !important;
  text-underline-offset:.2em;
}
#cuentaBanner #cCodigo { font-size:1.35rem !important;font-variant-numeric:tabular-nums; }

#gira .gprov {
  color:#fff3c4 !important;
  font-size:clamp(1.18rem,5vw,1.55rem) !important;
  line-height:1.1;
  letter-spacing:.075em !important;
}

#gira .gsub {
  color:#f0d488 !important;
  font-family:'Alegreya',Georgia,serif !important;
  font-size:.8rem !important;
  font-weight:700 !important;
  letter-spacing:.075em !important;
}

#gira .gflecha {
  width:2.75rem !important;
  height:2.75rem !important;
  min-width:2.75rem;
  min-height:2.75rem;
}

#gira .grival {
  border-radius:.48rem 1.08rem .48rem 1.08rem !important;
  background:linear-gradient(155deg,rgba(58,23,15,.97),rgba(4,27,18,.98)) !important;
  box-shadow:inset 0 1px rgba(255,239,185,.09),0 .52rem 1.08rem rgba(0,0,0,.46) !important;
}

#gira .grival .gdesc { color:#f0d98d !important;font-family:'Alegreya',Georgia,serif !important;letter-spacing:.045em !important; }
#gira .grival .ghist { color:#e6d6b2 !important;font-family:'Alegreya',Georgia,serif !important;font-size:.84rem !important; }
#gira .grival:is(.lock,.tapado) :is(.ginfo,.gstars) { opacity:.82 !important; }

#themeBanner .esec {
  border-radius:.75rem !important;
  border-color:var(--casa15-panel-line) !important;
  background:var(--casa15-panel-raised) !important;
  box-shadow:inset 0 1px rgba(255,237,180,.05) !important;
}

#themeBanner .esec::after { content:none !important; }
#themeBanner .esec > h4 { color:#f0d488 !important;font-size:.9rem !important;letter-spacing:.09em !important; }
#themeBanner :is(.vnombre,.vnom,.tnom) { color:#fff3c4 !important; }
#themeBanner :is(.vdesc,.vrot) { color:#ddcfaa !important; }

/* La ficha pertenece a la tienda; sólo los naipes conservan su papel claro. */
#themeBanner #mazoGrid .sw.mazo {
  border:1px solid var(--ui-line,#325343) !important;
  border-radius:.65rem !important;
  background:var(--ui-raised,#1e3d2c) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 .3rem .75rem rgba(0,0,0,.2) !important;
  filter:none !important;
}

#themeBanner #mazoGrid .sw.mazo::before {
  border:1px solid rgba(231,198,120,.12) !important;
  border-radius:.4rem !important;
  background:none !important;
  box-shadow:none !important;
}

#themeBanner #mazoGrid .sw.mazo::after { background:none !important; }
#themeBanner #mazoGrid .sw.mazo.on {
  border-color:#f0d488 !important;
  box-shadow:0 0 0 2px #b48a35,0 .4rem .85rem rgba(0,0,0,.25) !important;
}

#themeBanner #mazoGrid .mazonombre {
  color:var(--ui-gold,#e7c678) !important;
  font-size:1.12rem !important;
  letter-spacing:0 !important;
  line-height:1.16 !important;
  text-shadow:none !important;
}

#themeBanner #mazoGrid :is(.mazoepoca,.mazodesc,.mazoaccion) {
  color:var(--ui-text,#f5efda) !important;
  text-shadow:none !important;
}

#themeBanner #mazoGrid .mazodesc { font-size:.8rem;line-height:1.4; }
#themeBanner #mazoGrid .mazoepoca {
  color:var(--ui-muted,#b9c8bb) !important;
  padding-inline-end:1.3rem;
  box-sizing:border-box;
  max-width:100%;
  overflow-wrap:anywhere;
}
#themeBanner #mazoGrid .mazoaccion { color:#a7d8ad !important; }
#themeBanner #mazoGrid .mazover {
  min-height:2.75rem;
  border:1px solid #658370 !important;
  border-radius:.4rem;
  color:var(--ui-text,#f5efda) !important;
  background:var(--ui-panel,#102b22) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.04) !important;
  text-shadow:none !important;
}

#themeBanner #vidriera {
  gap:.8rem;
  padding:.25rem 0 .5rem;
}
#themeBanner .vhero {
  border-color:var(--casa15-panel-line) !important;
  border-radius:.65rem;
  background:var(--casa15-panel-raised) !important;
  box-shadow:none !important;
}
#themeBanner .vhero .vart { width:3.7rem; }
#themeBanner .vhero .vnombre { font-size:1.18rem; }
#themeBanner .vhero .vpie { font-size:.86rem;line-height:1.4; }
#themeBanner .vitem { border-radius:.5rem; }
#themeBanner .esec > h4 { margin-bottom:.9rem; }
#themeBanner :is(.tnom,.vnom) { line-height:1.2; }

/* Una ficha de papel permite leer la voz del personaje; el marco permanece
   verde y deja que retratos y emblemas aporten el color de la identidad. */
#perfilBanner .perfil-identidad {
  border-color:var(--casa15-panel-line);
  border-radius:.75rem;
  background:var(--casa15-panel-deep);
  box-shadow:inset 0 1px rgba(255,240,186,.05);
}
#perfilBanner .retrato { border-radius:.45rem; }
#perfilBanner .retrato > img { width:100%;height:auto;aspect-ratio:1;object-fit:cover; }
#perfilBanner .retrato .retnombre { background:#123524;color:#f5efda; }
#perfilBanner .perfil-identidad .retrato-ficha {
  padding:.85rem 1rem;
  border-color:#d1bd87 !important;
  background:var(--casa15-paper) !important;
  box-shadow:none !important;
}
#perfilBanner .retrato-ficha :is(.rfnombre,.rfapodo,p) {
  color:var(--casa15-paper-ink) !important;
  text-shadow:none !important;
}
#perfilBanner .retrato-ficha p { font-size:.89rem !important;line-height:1.5; }
#perfilBanner .retrato-ficha .rfapodo { color:#716344 !important; }

#rankingBanner .rfila { padding:.68rem .75rem;gap:.8rem; }
#rankingBanner .rfila:first-child {
  border-color:#caae60 !important;
  background:linear-gradient(105deg,#4b4826,#1e3d2c) !important;
}
#rankingBanner .rfila.rsoy {
  border-left:3px solid #e6ca87 !important;
  background:#2e4a38 !important;
}
#rankingBanner .rnom { font-size:.98rem;color:#fff3d7; }
#rankingBanner .rdato { color:#dce3cd !important;font-size:.83rem; }
#rankingBanner .rpie { letter-spacing:.07em !important;line-height:1.5; }
#amigosBanner #amigosBody { padding:.6rem;background:var(--casa15-panel-deep);border-color:var(--casa15-panel-line);box-shadow:none; }
#amigosBanner #amigosBody > p { padding:.65rem;line-height:1.6; }

#gira .gplaca,
#gira[data-prov="tucuman"] .gplaca {
  border-radius:1rem;
  background:linear-gradient(180deg,#274539,#0a291d) !important;
  box-shadow:inset 0 1px rgba(255,243,195,.18),0 .7rem 2rem rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
#gira[data-prov="tucuman"] .gplaca::before { border-radius:.7rem; }
#gira .grival,
#gira[data-prov="tucuman"] .grival {
  border-radius:.75rem !important;
  background:var(--casa15-panel) !important;
  box-shadow:inset 0 1px rgba(255,243,195,.08),0 .45rem 1rem rgba(0,0,0,.32) !important;
}
#gira .grival.actual,
#gira[data-prov="tucuman"] .grival.actual {
  border-color:#e6ca87 !important;
  background:linear-gradient(125deg,#325343,#1b3728) !important;
  box-shadow:inset 0 0 0 2px rgba(230,205,134,.16),0 .6rem 1.4rem rgba(0,0,0,.4) !important;
}
#gira .grival::before,
#gira[data-prov="tucuman"] .grival::before { border-radius:.5rem; }
#gira .grival .gnombre { color:#fff3d7 !important;letter-spacing:.025em; }
#gira .grival .ghist { color:#e8e2d0 !important;font-size:.9rem !important;line-height:1.45; }
#gira .grival .gcuenta { color:#c3cbb3 !important;line-height:1.4; }
#gira .grival .gdesc { background:#0a291d !important;border-color:rgba(223,201,139,.35) !important; }

#perfilBanner :is(.pstat,.pcanto,.medalla,.retrato-ficha),
#rankingBanner .rfila,
#amigosBanner #amigosBody > * {
  border-color:rgba(212,191,126,.24) !important;
  border-radius:.55rem !important;
  background:var(--casa15-panel-raised) !important;
  box-shadow:inset 0 1px rgba(255,238,182,.04) !important;
}

#rankingBanner :is(.rpos,.rdato,.rpie),
#perfilBanner :is(.pstat span,.pcanto span,.legal a),
#amigosBanner :is(.traidos,.rpie) { color:#ddcfaa !important; }

#rankingBanner #rankingBody:empty,
#amigosBanner #amigosBody:empty {
  display:grid;
  min-height:8rem;
  place-items:center;
  border:1px dashed rgba(224,181,77,.38);
  border-radius:.45rem 1rem .45rem 1rem;
  background:rgba(2,17,11,.66);
}

#drawer {
  border-color:rgba(231,188,82,.58) !important;
  color:#ffeac3 !important;
  background:var(--casa15-panel-deep) !important;
  box-shadow:0 0 0 2px rgba(24,6,3,.88),0 1rem 3rem rgba(0,0,0,.72) !important;
}

:is(.hudchip,.rivalrow,.mano,.cantobar) {
  border-color:rgba(226,182,78,.48) !important;
  color:#fff0ca !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.cantobar button { font-family:'Alegreya',Georgia,serif !important;font-weight:700 !important;letter-spacing:.035em !important; }

.cantobar {
  background:linear-gradient(180deg,#1b4332,#0a291d) !important;
  box-shadow:0 0 0 1px #08150e,0 0 0 2px rgba(224,193,112,.6),inset 0 1px rgba(255,243,190,.16),0 .8rem 1.8rem rgba(0,0,0,.4) !important;
}
.cantobar::before { border-color:rgba(235,210,143,.18);box-shadow:none; }
.rivalrow {
  background:linear-gradient(180deg,#0006,#000a),
    var(--casa15-cuero) center/200px 200px repeat,
    linear-gradient(180deg,var(--cuero-a),var(--cuero-b)) !important;
  background-blend-mode:normal,luminosity,normal;
  box-shadow:inset 0 -1px rgba(226,204,139,.2),0 .25rem .6rem rgba(0,0,0,.3) !important;
}
.hudchip { box-shadow:inset 0 1px rgba(247,231,183,.12),0 .25rem .65rem rgba(0,0,0,.3) !important; }

/* Grano real, una sola descarga compartida. El color comprado sigue mandando. */
.mano,
.myrow {
  background:linear-gradient(180deg,#0004,#0009),
    var(--casa15-cuero) center/200px 200px repeat,
    linear-gradient(180deg,var(--cuero-a),var(--cuero-b)) !important;
  background-blend-mode:normal,luminosity,normal;
  box-shadow:inset 0 1px #f3d29738,inset 0 -1px #0009 !important;
}
body[data-cuero="poncho"] :is(.rivalrow,.mano,.myrow) {
  background:repeating-linear-gradient(90deg,transparent 0 40px,#090402cc 40px 58px,transparent 58px 96px,#090402cc 96px 114px),
    var(--casa15-cuero) center/200px 200px repeat,
    linear-gradient(180deg,var(--cuero-a),var(--cuero-b)) !important;
  background-blend-mode:normal,luminosity,normal;
}
.hudchip {
  background:linear-gradient(135deg,#170b03aa,#090402e6),
    var(--casa15-cuero) center/160px 160px repeat !important;
  border-color:#c4a05b99 !important;
}
.hudchip::before { border-color:#d1aa6066 !important; }
.hudchip .pname { letter-spacing:.025em; }
.pscore b {
  font-variant-numeric:lining-nums tabular-nums;
  color:#f3d795 !important;
  background:linear-gradient(180deg,#08150e,#102b22) !important;
  border-color:#d7b56e80 !important;
  box-shadow:inset 0 1px 3px #0009,0 1px #ffe39a2b !important;
  text-shadow:0 1px #000;
}
.pscore b .meta { color:#d9c9a0; }
.hudchip .avatar {
  border-color:#e0b66c !important;
  box-shadow:0 0 0 1px #46280f,0 0 0 3px #b28a4d80,inset 0 0 0 1px #fff3d780,0 3px 7px #0008 !important;
}
.rivalrow .hbtn::before,
.myrow #hablarBtn {
  border-color:#c7a267 !important;
  background:linear-gradient(145deg,#3a25200a,#15090299),
    var(--casa15-cuero) center/120px 120px repeat !important;
  box-shadow:inset 0 1px #fff3c466,inset 0 0 0 2px #19060380,0 2px 5px #0009 !important;
}
.rivalrow .hbtn::before { border-radius:9px; }
.rivalrow .hbtn svg,
.myrow #hablarBtn svg { stroke:#ffe6b3;filter:drop-shadow(0 1px 1px #0009); }
.rivalrow .hbtn:is(.off,[aria-pressed="false"])::before { opacity:.7; }
#singBtn {
  border-color:#f1d9a0 !important;
  border-radius:10px !important;
  background:linear-gradient(160deg,#fff0ba,#d3b564 45%,#b78740 48%,#e5bf78 100%) !important;
  box-shadow:inset 0 0 0 2px #f3df9e33,inset 0 0 0 3px #6d420e4d,inset 0 1px #fff3d7,0 3px 0 #563712,0 5px 10px #0006 !important;
  color:#341a0b !important;
  letter-spacing:.055em;
  /* (2026-09-09) SIN !important: con él, los keyframes de casa15-canto-respira (que titilan el text-shadow
     cuando hay canto, mandato del dueño del 05/09) no podían pisarlo y CANTAR dejó de titilar. El reposo
     sigue siendo éste; el id ya gana cualquier regla de la página. */
  text-shadow:0 1px #fff3c480;
}
.cantobar {
  background:linear-gradient(145deg,#5c290088,#1a0d04ed),
    var(--casa15-cuero) center/200px 200px repeat !important;
}

#toast {
  border:1px solid rgba(240,200,99,.62) !important;
  border-radius:.42rem .9rem .42rem .9rem !important;
  color:#fff3c4 !important;
  background:linear-gradient(155deg,#461608,#0a291d) !important;
  box-shadow:0 .65rem 1.5rem rgba(0,0,0,.56) !important;
}

:is(button,[role="button"],a[href],input,select,textarea):focus-visible {
  outline:3px solid var(--casa15-focus) !important;
  outline-offset:3px !important;
}

@media (hover:hover) and (pointer:fine) {
  :is(#menu .menupanel,body > .banner,#pauseOverlay) :is(button.primary,button.aux):not(:disabled):hover,
  #gira button.aux:not(:disabled):hover { transform:translateY(-2px);filter:brightness(1.1); }
  #menu .menutiles > .menutile.activo:hover { transform:translateY(-3px);border-color:#ebc363 !important;filter:brightness(1.08); }
  #gira .grival:not(.lock):not(.tapado):hover { transform:translateY(-2px);border-color:#ebc363 !important; }
}

@media (max-width:30rem) {
  body > .banner > .box { padding-inline:clamp(.85rem,4vw,1.15rem) !important; }
  #settingsBanner .menurow { padding:.68rem .7rem .72rem !important; }
  #menu .menutiles > .menutile .tname { font-size:.84rem !important; }
  #menu .menutiles > .menutile .tsub { font-size:.72rem !important; }
}

/* Las viñetas usan coordenadas absolutas sobre 300 px. Zoom conserva juntas
   cartas, cifras y gestos, y reduce también la caja que participa del layout. */
@media (max-width:22rem) {
  #tutoBanner .tstage { zoom:.9; }
}

@media (min-width:56rem) {
  #menu .menutiles > .menutile .tname { font-size:1rem !important; }
  #menu .menutiles > .menutile .tsub { font-size:.8rem !important; }
  body > .banner > .box { padding-inline:1.5rem !important; }
}

@media (min-width:60rem) {
  #themeBanner #vidriera { flex-direction:row;align-items:stretch; }
  #themeBanner #vidriera > * { flex:1;min-width:0; }
  #themeBanner #vidriera > .vfila { flex:0 1 auto;max-width:40%; }
  #themeBanner #vidriera .vitems { flex-wrap:wrap; }
  #themeBanner #mazoGrid.egrid { gap:1rem; }
  #themeBanner #mazoGrid .sw.mazo { min-height:11.5rem;padding-block:1.05rem 2.8rem; }
  #themeBanner #mazoGrid .mazodesc { font-size:.87rem; }
}


@media (forced-colors:active) {
  body > .banner > .box,
  #settingsBanner .menurow,
  #themeBanner .esec,
  #drawer,
  #toast { color:CanvasText !important;background:Canvas !important;border:1px solid CanvasText !important;box-shadow:none !important; }
  body > .banner > .box.ornate,
  body > .banner > .box:not(.ornate),
  #themeBanner #mazoGrid .sw.mazo,
  #themeBanner #mazoGrid .mazover,
  #perfilBanner .perfil-identidad .retrato-ficha,
  #gira[data-prov="tucuman"] .gplaca,
  #gira[data-prov="tucuman"] .grival,
  #gira[data-prov="tucuman"] .grival.actual {
    color:CanvasText !important;background:Canvas !important;
    border:1px solid CanvasText !important;box-shadow:none !important;
  }
  #themeBanner #mazoGrid :is(.mazonombre,.mazoepoca,.mazodesc,.mazoaccion),
  #perfilBanner .retrato-ficha :is(.rfnombre,.rfapodo,p) { color:CanvasText !important; }

  /* Las texturas nuevas no deben sobrevivir a la paleta accesible del sistema. */
  .mesa,
  .rivalrow,
  .mano,
  .myrow,
  .hudchip,
  .cantobar,
  .pscore b,
  body[data-cuero="poncho"] :is(.rivalrow,.mano,.myrow) {
    color:CanvasText !important;
    background:Canvas !important;
    border-color:CanvasText !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }
  .mesa::before { display:none !important; }
  .hudchip::before,
  .hudchip .avatar { border-color:CanvasText !important;box-shadow:none !important; }
  #singBtn,
  .rivalrow .hbtn::before,
  .myrow #hablarBtn {
    color:ButtonText !important;
    background:ButtonFace !important;
    border-color:ButtonText !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }
  .rivalrow .hbtn svg,
  .myrow #hablarBtn svg { stroke:ButtonText;filter:none; }
}