/* /src/styles/tienda.css */
.page-shop {
--tienda-respiro: var(--space-sm);
position: relative;
isolation: isolate;
padding-top: var(--tienda-respiro);
}
.tienda-escena {
position: sticky;
top: 0;
height: 100vh;
margin: calc(-1 * var(--tienda-respiro)) calc(50% - 50vw) calc(var(--tienda-respiro) - 100vh);
z-index: 0;
overflow: hidden;
pointer-events: none;
background: #0a0a12;
}
.tienda-escena-foto {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 42%;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.tienda-escena::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(135% 90% at 50% 34%, rgba(8, 8, 16, .05) 0%, rgba(8, 8, 16, .48) 55%, rgba(8, 8, 16, .84) 100%),
linear-gradient(180deg, rgba(8, 8, 16, .3) 0%, rgba(8, 8, 16, .18) 28%, rgba(8, 8, 16, .32) 62%, rgba(8, 8, 16, .7) 100%);
}
.tienda-mostrador-capa {
position: sticky;
top: 0;
height: 100vh;
margin: calc(-1 * var(--tienda-respiro)) calc(50% - 50vw) calc(var(--tienda-respiro) - 100vh);
z-index: 4;
pointer-events: none;
overflow: hidden;
transition: opacity .25s linear;
}
.page-shop {
--tienda-hueco: 33%;
}
.page-shop .shop-aviso-retiro,
.page-shop .shop-preview {
max-width: calc(100% - var(--tienda-hueco));
}
.page-shop > *:not(.tienda-escena):not(.tienda-mostrador-capa) {
position: relative;
z-index: 1;
}
.page-shop .shop-header {
align-items: flex-start;
margin-bottom: var(--space-sm);
}
.page-shop .shop-title {
font-size: var(--pixel-2xl);
text-shadow: 0 0 12px rgba(0, 245, 212, .55), 0 3px 0 rgba(0, 0, 0, .6);
}
.page-shop .shop-sub {
color: #b9c6e0;
text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
}
.page-shop .shop-saldo {
position: relative;
align-items: center;
gap: 2px;
padding: 12px 22px 10px;
background: linear-gradient(180deg, #241a08 0%, #14100a 100%);
border: 3px solid var(--accent-series, #ffd60a);
box-shadow:
inset 0 0 0 2px rgba(0, 0, 0, .75),
inset 0 0 18px rgba(255, 214, 10, .18),
0 0 22px rgba(255, 214, 10, .35);
}
.page-shop .shop-saldo-num {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--pixel-xl);
text-shadow: 0 0 10px rgba(255, 214, 10, .7);
}
.page-shop .shop-saldo-num b { font-weight: 400; }
.tienda-icono-svg {
display: block;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.tienda-pila-monedas {
flex: 0 0 auto;
height: 1.5em;
width: calc(1.5em * 14 / 12);
filter: drop-shadow(0 0 6px rgba(255, 214, 10, .55));
}
.page-shop .shop-saldo-lbl {
font-family: var(--font-pixel);
font-size: var(--pixel-xs);
color: #c9a83a;
letter-spacing: 2px;
}
.tienda-hucha {
position: absolute;
z-index: 1;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5));
}
.tienda-hucha-svg {
display: block;
width: 100%;
height: 100%;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.tienda-lluvia {
position: absolute;
inset: -120px 12% auto;
height: 124px;
pointer-events: none;
}
.tienda-moneda {
position: absolute;
top: 0;
width: 13px;
height: 13px;
clip-path: polygon(31% 0, 69% 0, 100% 31%, 100% 69%, 69% 100%, 31% 100%, 0 69%, 0 31%);
background: linear-gradient(135deg, #ffe98a 0%, #ffd60a 45%, #c08b06 100%);
filter: drop-shadow(0 0 6px rgba(255, 214, 10, .85));
opacity: 0;
}
.tienda-moneda::after {
content: '';
position: absolute;
left: 25%;
top: 22%;
width: 26%;
height: 26%;
background: #fff6c8;
opacity: .8;
}
.tienda-moneda-0 { left: 12%; animation: tienda-caer 3.4s linear infinite; }
.tienda-moneda-1 { left: 32%; animation: tienda-caer 4.1s linear .7s infinite; }
.tienda-moneda-2 { left: 52%; animation: tienda-caer 3.8s linear 1.5s infinite; }
.tienda-moneda-3 { left: 71%; animation: tienda-caer 4.6s linear 2.2s infinite; }
.tienda-moneda-4 { left: 88%; animation: tienda-caer 3.2s linear 2.9s infinite; }
@keyframes tienda-caer {
0%   { transform: translateY(-14px) scaleX(1);   opacity: 0; }
12%  { opacity: 1; }
55%  { transform: translateY(58px) scaleX(.25);  opacity: 1; }
92%  { transform: translateY(112px) scaleX(1);   opacity: 1; }
100% { transform: translateY(124px) scaleX(.5);  opacity: 0; }
}
.page-shop .shop-aviso-retiro,
.page-shop .shop-preview,
.page-shop .shop-ganar,
.page-shop .shop-historial {
background: rgba(17, 22, 42, .88);
border: 1px solid rgba(0, 245, 212, .28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 10px 30px rgba(0, 0, 0, .55);
backdrop-filter: blur(2px);
}
.page-shop .shop-aviso-retiro {
border-left: 1px solid rgba(0, 245, 212, .28);
border-top: 2px solid var(--accent-games, #00f5d4);
box-shadow: inset 0 1px 0 rgba(0, 245, 212, .35), 0 10px 30px rgba(0, 0, 0, .55);
padding: 10px 16px;
margin-bottom: var(--space-sm);
color: #cfe6ea;
line-height: 1.45;
}
.tienda-mostrador {
position: relative;
margin-bottom: var(--space-sm);
}
.page-shop .shop-preview {
position: relative;
margin: 0;
padding: var(--space-md);
min-height: 108px;
align-items: center;
border: 2px solid rgba(0, 245, 212, .75);
background-image:
repeating-linear-gradient(90deg, rgba(0, 245, 212, .04) 0 1px, transparent 1px 14px),
repeating-linear-gradient(0deg,  rgba(0, 245, 212, .04) 0 1px, transparent 1px 14px),
linear-gradient(155deg, rgba(72, 26, 46, .92) 0%, rgba(24, 14, 40, .94) 60%, rgba(14, 10, 26, .96) 100%);
box-shadow:
inset 0 0 24px rgba(0, 245, 212, .12),
0 0 22px rgba(0, 245, 212, .22),
0 10px 30px rgba(0, 0, 0, .6);
}
.page-shop .shop-preview::before,
.page-shop .shop-preview::after {
content: '';
position: absolute;
top: -2px;
width: 20px;
height: 20px;
border-top: 3px solid var(--accent-series, #ffd60a);
pointer-events: none;
}
.page-shop .shop-preview::before { left: -2px;  border-left: 3px solid var(--accent-series, #ffd60a); }
.page-shop .shop-preview::after  { right: -2px; border-right: 3px solid var(--accent-series, #ffd60a); }
.page-shop .shop-preview-avatar {
box-shadow:
0 0 0 3px #0a0a12,
0 0 0 9px #c99a1e,
0 0 0 12px #7a5a0c,
0 0 28px rgba(255, 214, 10, .45);
margin: 6px 10px 6px 6px;
}
.page-shop .shop-preview-name {
font-size: var(--pixel-lg);
color: var(--accent-games, #00f5d4);
text-shadow: 0 0 12px rgba(0, 245, 212, .6), 0 3px 0 rgba(0, 0, 0, .8);
}
.page-shop .shop-preview-title {
color: var(--accent-series, #ffd60a);
font-style: normal;
font-family: var(--font-pixel);
font-size: var(--pixel-sm);
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(255, 214, 10, .5);
}
.page-shop .perfil-carnet-btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
align-self: flex-start;
}
.tienda-icono-carnet {
flex: 0 0 auto;
height: 1.25em;
width: calc(1.25em * 10 / 8);
}
.tienda-personaje {
position: absolute;
z-index: 2;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)) drop-shadow(-6px 0 14px rgba(0, 0, 0, .35));
}
.tienda-personaje-arte {
display: block;
width: 100%;
height: 100%;
max-height: 244px;
image-rendering: pixelated;
image-rendering: crisp-edges;
object-fit: contain;
}
.tienda-bocadillo {
position: absolute;
z-index: 3;
box-sizing: border-box;
pointer-events: auto;
padding: 11px 13px;
background: #0d1120;
border: 3px solid #e8ecf7;
box-shadow: 0 0 0 3px #0a0a12, 0 8px 24px rgba(0, 0, 0, .6);
}
.tienda-bocadillo p {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.3;
color: #eef2ff;
}
.tienda-bocadillo b {
color: var(--accent-series, #ffd60a);
font-weight: 400;
text-shadow: 0 0 8px rgba(255, 214, 10, .5);
}
.tienda-bocadillo::before,
.tienda-bocadillo::after {
content: '';
position: absolute;
right: -14px;
bottom: 18px;
width: 0;
height: 0;
border: 7px solid transparent;
border-left-color: #e8ecf7;
}
.tienda-bocadillo::after {
right: -8px;
border-left-color: #0d1120;
}
.page-shop .shop-progreso {
position: relative;
z-index: 2;
padding: 6px var(--tienda-hueco) 6px 10px;
background: rgba(10, 12, 24, .8);
border: 1px solid rgba(0, 245, 212, .22);
margin-bottom: var(--space-lg);
}
.page-shop .shop-progreso-barra {
height: 12px;
background: #090c18;
border: 1px solid rgba(0, 245, 212, .35);
box-shadow: inset 0 0 10px rgba(0, 0, 0, .9);
position: relative;
}
.page-shop .shop-progreso-barra::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(90deg, rgba(0, 245, 212, .5) 0 2px, transparent 2px 7px) top / 100% 2px no-repeat,
repeating-linear-gradient(90deg, rgba(0, 245, 212, .5) 0 2px, transparent 2px 7px) bottom / 100% 2px no-repeat;
pointer-events: none;
z-index: 1;
}
.page-shop .shop-progreso-barra span {
background: linear-gradient(90deg, var(--accent-games, #00f5d4) 0%, #7de3a0 55%, var(--accent-series, #ffd60a) 100%);
box-shadow: 0 0 14px rgba(0, 245, 212, .55);
}
.page-shop .shop-progreso-txt {
font-family: var(--font-pixel);
font-size: var(--pixel-xs);
color: #8fa4c4;
letter-spacing: 1px;
}
.page-shop .shop-familia-titulo {
font-size: var(--pixel-base);
text-shadow: 0 0 10px rgba(0, 245, 212, .35), 0 3px 0 rgba(0, 0, 0, .7);
}
.page-shop .shop-familia-desc {
color: #a8b6d2;
text-shadow: 0 2px 5px rgba(0, 0, 0, .9);
}
.page-shop .shop-grid {
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 10px var(--space-sm);
align-items: stretch;
}
.page-shop .shop-item {
--acento: #00f5d4;
--acento-rgb: 0, 245, 212;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
transition: transform .18s ease;
}
.page-shop .shop-item:hover { transform: translateY(-6px); }
.page-shop .shop-item-vitrina {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 12px 10px 12px;
text-align: center;
border: 2px solid rgba(var(--acento-rgb), .55);
border-bottom: 0;
border-radius: 10px 10px 0 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 35%),
linear-gradient(180deg, rgba(13, 17, 32, .96) 0%, rgba(17, 22, 43, .92) 60%,
rgba(var(--acento-rgb), .16) 100%);
box-shadow:
inset 0 0 26px rgba(var(--acento-rgb), .14),
0 0 18px rgba(var(--acento-rgb), .22);
}
.page-shop .shop-item:hover .shop-item-vitrina {
border-color: var(--acento);
box-shadow:
inset 0 0 30px rgba(var(--acento-rgb), .22),
0 0 28px rgba(var(--acento-rgb), .45);
}
.page-shop .shop-item[data-rareza="epico"] .shop-item-vitrina      { border-color: rgba(247, 37, 133, .6); }
.page-shop .shop-item[data-rareza="legendario"] .shop-item-vitrina { border-color: rgba(255, 214, 10, .7); }
.page-shop .shop-item.es-puesto .shop-item-vitrina                 { border-color: rgba(255, 214, 10, .8); }
.page-shop .shop-item-muestra {
height: 74px;
margin-bottom: 0;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .65));
}
.page-shop .shop-item-swatch { width: 56px; height: 56px; }
.page-shop .shop-item-swatch.es-marco {
display: grid;
place-items: center;
overflow: hidden;
}
.page-shop .shop-item-retrato {
display: block;
width: 100%;
height: 100%;
image-rendering: pixelated;
}
.page-shop .shop-item-nombre {
font-family: var(--font-pixel);
font-size: var(--pixel-base);
line-height: 1.5;
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, .28), 0 3px 0 rgba(0, 0, 0, .75);
}
.page-shop .shop-item-rareza {
font-family: var(--font-pixel);
font-size: var(--pixel-xs);
letter-spacing: 1.5px;
text-shadow: 0 0 8px currentColor;
}
.page-shop .shop-item-desc {
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: 1.2;
color: #9fb0cd;
min-height: 38px;
margin: 3px 0 8px;
}
.page-shop .shop-item-haz {
height: 22px;
margin-top: -2px;
clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
background: linear-gradient(180deg, var(--acento) 0%, rgba(var(--acento-rgb), .55) 100%);
background: linear-gradient(180deg,
color-mix(in srgb, var(--acento) 92%, #fff) 0%,
var(--acento) 42%,
color-mix(in srgb, var(--acento) 55%, #000) 100%);
filter:
drop-shadow(0 0 18px rgba(var(--acento-rgb), .9))
drop-shadow(0 10px 34px rgba(var(--acento-rgb), .55));
}
.page-shop .shop-item-peana {
height: 98px;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 20px;
clip-path: polygon(14% 0, 86% 0, 82% 100%, 18% 100%);
background:
linear-gradient(180deg, rgba(var(--acento-rgb), .26) 0%, transparent 60%),
linear-gradient(90deg,
#17102c 0%, #17102c 24%,
#2a1b4a 24%, #2a1b4a 76%,
#120c22 76%, #120c22 100%);
}
.page-shop .shop-item-placa {
font-family: var(--font-pixel);
font-size: var(--pixel-xs);
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 9px;
background: rgba(6, 8, 18, .8);
border: 1px solid currentColor;
text-shadow: 0 0 8px currentColor;
box-shadow: 0 0 12px -2px currentColor;
}
.page-shop .shop-btn {
width: 100%;
min-height: 38px;
font-family: var(--font-pixel);
font-size: var(--pixel-xs);
letter-spacing: .5px;
background: rgba(6, 10, 20, .75);
border: 2px solid rgba(var(--acento-rgb), .7);
color: var(--acento);
text-shadow: 0 0 8px rgba(var(--acento-rgb), .7);
box-shadow: inset 0 0 14px rgba(var(--acento-rgb), .12);
border-radius: 0;
}
.page-shop .shop-btn:hover:not(:disabled) {
background: var(--acento);
color: #06121a;
text-shadow: none;
box-shadow: 0 0 22px rgba(var(--acento-rgb), .65);
}
.page-shop .shop-btn-comprar {
border-color: rgba(255, 214, 10, .8);
color: #ffd60a;
text-shadow: 0 0 8px rgba(255, 214, 10, .6);
box-shadow: inset 0 0 14px rgba(255, 214, 10, .12);
}
.page-shop .shop-btn-comprar:hover:not(:disabled) {
background: var(--accent-series, #ffd60a);
color: #06121a;
}
.page-shop .shop-btn-eq {
border-color: #4ade80;
color: #4ade80;
background: rgba(74, 222, 128, .12);
text-shadow: 0 0 8px rgba(74, 222, 128, .6);
}
.page-shop .shop-btn.sin-saldo {
text-shadow: none;
box-shadow: none;
}
.page-shop .shop-ganar,
.page-shop .shop-historial { border-radius: 6px; }
.page-shop .shop-ganar h3,
.page-shop .shop-historial h3 {
font-size: var(--pixel-sm);
text-shadow: 0 0 10px rgba(0, 245, 212, .5);
}
.page-shop .shop-ganar-label,
.page-shop .shop-historial li { color: #b7c4de; }
.page-shop .shop-ganar-coins { text-shadow: 0 0 8px rgba(255, 214, 10, .5); }
.page-shop .shop-item.es-puesto .shop-item-haz {
animation: tienda-latido 2.8s ease-in-out infinite;
}
@keyframes tienda-latido {
0%, 100% { filter: drop-shadow(0 0 14px rgba(var(--acento-rgb), .7))
drop-shadow(0 6px 26px rgba(var(--acento-rgb), .4)); }
50%      { filter: drop-shadow(0 0 22px rgba(var(--acento-rgb), .95))
drop-shadow(0 8px 36px rgba(var(--acento-rgb), .65)); }
}
@media (prefers-reduced-motion: reduce) {
.tienda-moneda,
.page-shop .shop-item.es-puesto .shop-item-haz {
animation: none !important;
}
.tienda-moneda { display: none; }
.page-shop .shop-item:hover { transform: none; }
.tienda-mostrador-capa { transition: none; }
}
@media (max-width: 999px) {
.page-shop { display: flex; flex-direction: column; }
.page-shop > .tienda-escena        { order: 0; }
.page-shop > .shop-header          { order: 1; }
.page-shop > .shop-aviso-retiro    { order: 2; }
.page-shop > .tienda-mostrador     { order: 3; }
.page-shop > .tienda-mostrador-capa { order: 4; }
.page-shop > .shop-progreso        { order: 5; }
.page-shop > .shop-cols            { order: 6; }
.page-shop { --tienda-hueco: 0px; }
.tienda-hucha { display: none; }
.tienda-mostrador-capa {
position: static;
height: auto;
margin: 0 0 var(--space-sm);
overflow: visible;
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
justify-content: flex-start;
gap: 10px;
}
.tienda-personaje {
position: relative;
flex: 0 0 156px;
width: 156px;
height: auto;
}
.tienda-personaje-arte { height: auto; }
.tienda-bocadillo {
position: relative;
flex: 1 1 auto;
width: auto;
max-width: 320px;
min-width: 0;
margin-bottom: 18px;
}
}
@media (max-width: 1100px) {
.tienda-bocadillo { max-width: none; }
}
@media (max-width: 900px) {
.page-shop .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.page-shop .shop-item-peana { height: 76px; padding-top: 16px; }
.page-shop .shop-item-muestra { height: 78px; }
}
@media (max-width: 640px) {
.page-shop { padding-top: var(--space-lg); }
.tienda-escena::after {
background:
radial-gradient(120% 80% at 50% 40%, rgba(10, 10, 18, .2) 0%, rgba(10, 10, 18, .66) 62%, rgba(10, 10, 18, .87) 100%);
}
.page-shop .shop-saldo { width: auto; padding: 10px 16px 8px; }
.tienda-lluvia { display: none; }
.tienda-personaje { flex-basis: 156px; width: 156px; }
.page-shop .shop-title { font-size: var(--pixel-lg); }
.page-shop .shop-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.page-shop .shop-item-nombre { font-size: var(--pixel-sm); }
.page-shop .shop-item-desc { min-height: 40px; }
.page-shop .shop-item-peana { height: 62px; padding-top: 12px; }
.page-shop .shop-item-haz { height: 18px; }
}
@media (max-width: 420px) {
.page-shop .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tienda-personaje {
cursor: pointer;
pointer-events: auto;
}
.tienda-personaje-arte {
transform-origin: 50% 100%;
will-change: transform;
}
@keyframes tienda-respirar {
0%, 100% { transform: scaleY(1)     translateY(0); }
50%      { transform: scaleY(1.012) translateY(-1px); }
}
.tienda-personaje[data-animo="reposo"] .tienda-personaje-arte {
animation: tienda-respirar 5s ease-in-out infinite;
}
@keyframes tienda-atender {
0%   { transform: translateY(0)    rotate(0deg); }
100% { transform: translateY(-3px) rotate(-1deg); }
}
.tienda-personaje[data-animo="atento"] .tienda-personaje-arte {
animation: tienda-atender .22s ease-out forwards;
}
@keyframes tienda-respingo {
0%   { transform: translateY(0)    scale(1); }
35%  { transform: translateY(-7px) scale(1.03); }
70%  { transform: translateY(1px)  scale(.995); }
100% { transform: translateY(0)    scale(1); }
}
.tienda-personaje[data-animo="sorpresa"] .tienda-personaje-arte {
animation: tienda-respingo .5s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes tienda-pensar {
0%, 100% { transform: rotate(-1.2deg) translateY(-1px); }
50%      { transform: rotate(1.2deg)  translateY(0); }
}
.tienda-personaje[data-animo="pensando"] .tienda-personaje-arte {
animation: tienda-pensar 1.5s ease-in-out infinite;
}
@keyframes tienda-hablar {
0%, 100% { transform: translateY(0); }
25%      { transform: translateY(-2px); }
50%      { transform: translateY(0); }
75%      { transform: translateY(-1px); }
}
.tienda-personaje[data-animo="hablando"] .tienda-personaje-arte {
animation: tienda-hablar .38s ease-in-out 4;
}
@keyframes tienda-celebrar {
0%, 100% { transform: translateY(0)     rotate(0deg); }
20%      { transform: translateY(-10px) rotate(-3deg); }
45%      { transform: translateY(0)     rotate(2deg); }
70%      { transform: translateY(-5px)  rotate(-1deg); }
}
.tienda-personaje[data-animo="contento"] .tienda-personaje-arte {
animation: tienda-celebrar 1.1s ease-in-out 2;
}
@keyframes tienda-dormir {
0%, 100% { transform: scaleY(1)     rotate(0deg)   translateY(0); }
50%      { transform: scaleY(1.022) rotate(1.5deg) translateY(2px); }
}
.tienda-personaje[data-animo="dormido"] .tienda-personaje-arte {
animation: tienda-dormir 4.5s ease-in-out infinite;
filter: saturate(.8) brightness(.9);
}
.tienda-personaje[data-animo="dormido"]::after {
content: "z";
position: absolute;
right: 6%;
top: 4%;
font-family: var(--font-pixel);
font-size: var(--pixel-sm);
color: #cfd6ee;
text-shadow: 0 2px 0 rgba(0, 0, 0, .8);
animation: tienda-zeta 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes tienda-zeta {
0%   { opacity: 0;   transform: translate(0, 0) scale(.7); }
30%  { opacity: .95; }
100% { opacity: 0;   transform: translate(10px, -22px) scale(1.25); }
}
.tienda-bocadillo { transition: width .18s ease, padding .18s ease; }
.tienda-bocadillo[data-abierta="true"] { padding: 12px; }
.tienda-bocadillo[data-abierta="true"] .tienda-bocadillo-frase { display: none; }
.tienda-bocadillo-frase { margin: 0; }
.tienda-charla {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
}
.tienda-charla-hilo {
display: flex;
flex-direction: column;
gap: 7px;
max-height: min(46vh, 300px);
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(0, 245, 212, .45) transparent;
}
.tienda-linea p {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.3;
padding: 6px 9px;
border: 2px solid transparent;
}
.tienda-linea.es-encargado p {
color: #eef2ff;
background: rgba(0, 245, 212, .08);
border-color: rgba(0, 245, 212, .35);
}
.tienda-linea.es-socio p {
color: #12161f;
background: var(--accent-series, #ffd60a);
border-color: #b8930a;
margin-left: 22px;
}
.tienda-linea b { color: var(--accent-series, #ffd60a); font-weight: 400; }
.tienda-linea.es-socio b { color: #7a5c00; }
.tienda-charla-atajos { display: flex; flex-wrap: wrap; gap: 5px; }
.tienda-atajo {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1;
padding: 6px 9px;
color: #bfe9e2;
background: rgba(0, 245, 212, .09);
border: 2px solid rgba(0, 245, 212, .4);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.tienda-atajo:hover,
.tienda-atajo:focus-visible { background: var(--accent-games, #00f5d4); color: #06121a; }
.tienda-charla-caja { display: flex; gap: 6px; }
.tienda-charla-texto {
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-body);
font-size: var(--text-base);
padding: 7px 9px;
color: #eef2ff;
background: #070a14;
border: 2px solid rgba(0, 245, 212, .4);
}
.tienda-charla-texto::placeholder { color: #6d7fa0; }
.tienda-charla-texto:focus-visible { outline: 2px solid var(--accent-games, #00f5d4); outline-offset: 1px; }
.tienda-charla-enviar {
flex: 0 0 auto;
width: 40px;
font-size: var(--text-sm);
color: #06121a;
background: var(--accent-games, #00f5d4);
border: 2px solid #0a1f1c;
cursor: pointer;
}
.tienda-charla-enviar:hover { background: #6ffbe4; }
.tienda-charla-cerrar {
position: absolute;
top: -6px;
right: -4px;
width: 26px;
height: 26px;
font-size: var(--text-sm);
line-height: 1;
color: #cfd6ee;
background: #0d1120;
border: 2px solid #e8ecf7;
cursor: pointer;
}
.tienda-charla-cerrar:hover { color: #fff; background: #23283c; }
@media (prefers-reduced-motion: reduce) {
.tienda-personaje .tienda-personaje-arte { animation: none !important; }
.tienda-personaje[data-animo="dormido"]::after { animation: none; opacity: .8; }
.tienda-bocadillo { transition: none; }
}