/*
 * MENÚ PRINCIPAL Y TIENDA (se carga el último y manda sobre los estilos antiguos).
 * Izquierda: la marca, la TIENDA, la red local y las opciones. Derecha: los modos de juego en un CARRUSEL horizontal con desplazamiento
 * táctil (una tarjeta entera y media de la siguiente, para que se vea que hay más). En vertical, todo apilado.
 */
.screen.title {
  display: grid; overflow: hidden; touch-action: none;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "left modes" "foot foot";
  gap: clamp(6px, 2vh, 16px) clamp(14px, 3.4vw, 44px);
  align-items: stretch;
}
.screen.title > * { min-width: 0; min-height: 0; }
.screen.title .arena-header { grid-area: head; padding-bottom: clamp(4px, 1.4vh, 12px); }
.screen.title .arena-footer { grid-area: foot; padding-top: clamp(4px, 1.2vh, 10px); }
.screen.title .local-label { display: none; }
.title-left { grid-area: left; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 2vh, 18px); min-height: 0; }
.title .title-hero { align-self: stretch; }
.title .hero-neon { font-size: clamp(30px, min(7.4vw, 13vh), 96px); }
.title .hero-brawl { font-size: clamp(14px, min(3.2vw, 5.6vh), 44px); }
.title .hero-copy { margin-top: clamp(4px, 1.4vh, 14px); font-size: clamp(10px, 1.9vh, 14px); line-height: 1.5; }
.title .cover-art { height: clamp(70px, 17vh, 190px); margin: clamp(4px, 1.2vh, 10px) 0; }
.title .hero-meta { margin-top: 0; padding-top: clamp(3px, 1vh, 9px); }

/* ---- izquierda: tienda, red local y opciones */
.side-menu { display: grid; gap: clamp(5px, 1.2vh, 9px); }
.side-menu .btn { transform: none; }
.side-menu .btn > * { transform: none; }
.side-menu .btn:hover, .side-menu .btn:focus-visible { transform: translateY(-1px); }
.shop-btn.btn {
  --c: #ffe14d; flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left;
  padding: clamp(7px, 1.6vh, 13px) clamp(10px, 1.6vw, 16px); border-radius: 12px;
  background: linear-gradient(105deg, #4a3405e6, #241040f0 70%); border-width: 2px;
  box-shadow: 0 0 18px #ffe14d44, inset 0 0 16px #ffe14d1a; animation: shop-glow 2.6s ease-in-out infinite;
}
@keyframes shop-glow { 50% { box-shadow: 0 0 26px #ffe14d77, inset 0 0 20px #ffe14d2e; } }
.shop-btn .shop-ico { display: grid; place-items: center; width: clamp(28px, 6vh, 40px); height: clamp(28px, 6vh, 40px); border-radius: 10px; background: #ffe14d; color: #2a1c02; flex: none; }
.shop-btn .shop-ico svg { width: 62%; height: 62%; }
.shop-btn .shop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-btn .shop-text b { font: 900 clamp(15px, 3.4vh, 23px)/1 var(--font); letter-spacing: .1em; color: #fff0b0; text-shadow: 0 0 12px #ffe14d88; }
.shop-btn .shop-text small { display: block; font-size: clamp(8px, 1.7vh, 11px); color: #e8d9a4; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-btn .shop-coins { margin-left: auto; font: 900 clamp(12px, 2.6vh, 17px) var(--font); color: #ffe14d; text-shadow: 0 0 10px #ffe14d88; white-space: nowrap; padding-left: 8px; }
.net-btn.btn {
  --c: #8aa4ff; flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; border-radius: 10px;
  padding: clamp(5px, 1.2vh, 10px) clamp(10px, 1.6vw, 16px); background: linear-gradient(110deg, #121b3dd9, #160c30e6);
}
.net-btn .mode-symbol { font: 400 clamp(18px, 3.8vh, 26px) system-ui; color: #9aabff; text-shadow: 0 0 12px #7b7dff88; flex: none; }
.net-btn .net-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.net-btn .net-text b { font: italic 900 clamp(12px, 2.6vh, 16px)/1 var(--font); color: #e5e6ff; letter-spacing: .06em; }
.net-btn .net-text small { display: block; font-size: clamp(8px, 1.6vh, 10px); color: #b4b5d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-btn .mode-arrow { margin-left: auto; font-size: clamp(14px, 3vh, 21px); color: #9aabff; }
.side-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, 1vh, 8px); }
.side-grid .btn { min-height: clamp(26px, 5.4vh, 38px); padding: 0 6px; font-size: clamp(8px, 1.8vh, 11px); letter-spacing: .06em; border-radius: 7px; justify-content: center; white-space: nowrap; }

/* ---- derecha: carrusel de modos */
.title .arena-menu { grid-area: modes; display: flex; flex-direction: column; justify-content: stretch; gap: clamp(3px, 0.9vh, 8px); min-height: 0; align-self: stretch; }
.title .section-label { display: flex; align-items: center; justify-content: space-between; margin: 0; flex: none; }
.mc-nav { display: inline-flex; align-items: center; gap: 8px; }
.mc-nav .mc-count { min-width: 3.4em; text-align: center; color: #d9c8f5; font-weight: 800; letter-spacing: .08em; }
.mc-arrow.icon-btn { width: clamp(24px, 5vh, 32px); height: clamp(24px, 5vh, 32px); font: 900 clamp(14px, 3vh, 20px)/1 var(--font); border-width: 1.5px; padding: 0 0 2px; }
.mode-track {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: clamp(8px, 1.6vw, 14px);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-x; scrollbar-width: none; padding: 5px 3px 9px;
}
.mode-track::-webkit-scrollbar { display: none; }
.mode-track::after { content: ""; flex: 0 0 calc(38% - 14px); }  /* hueco final: la última tarjeta también puede quedar a la izquierda */
.mode-slide.btn {
  --c: var(--mc); flex: 0 0 clamp(150px, 62%, 330px); scroll-snap-align: start; align-items: flex-start; justify-content: flex-start; gap: clamp(3px, 1vh, 8px);
  text-align: left; padding: clamp(10px, 2.6vh, 20px) clamp(10px, 1.6vw, 18px); border-radius: 16px; transform: none; font-style: normal; animation: none;
  background: linear-gradient(165deg, color-mix(in srgb, var(--mc) 24%, #140b30), #0a0620 78%);
  border: 2px solid color-mix(in srgb, var(--mc) 62%, #05030f); opacity: .78; filter: saturate(.8);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--mc) 16%, transparent);
  transition: opacity .2s, filter .2s, box-shadow .2s, border-color .2s;
}
.mode-slide.btn > * { transform: none; }
/* la ilustración de cada modo (assets/modes/<modo>.webp) va de fondo, con un degradado oscuro abajo para que se lea el texto */
.mode-slide.btn { overflow: hidden; isolation: isolate; }
.mode-slide.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img) 50% 45% / cover no-repeat; transform: scale(1.04); transition: transform .6s; }
.mode-slide.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, #08051c 5%, #08051cd9 30%, #08051c66 62%, #08051c26 100%), linear-gradient(165deg, color-mix(in srgb, var(--mc) 26%, transparent), transparent 52%); }
.mode-slide.btn.is-active::before, .mode-slide.btn:hover::before, .mode-slide.btn:focus-visible::before { transform: scale(1.12); }
.mode-slide.btn.is-active, .mode-slide.btn:hover, .mode-slide.btn:focus-visible {
  opacity: 1; filter: none; transform: none; border-color: var(--mc);
  box-shadow: 0 0 24px color-mix(in srgb, var(--mc) 45%, transparent), inset 0 0 26px color-mix(in srgb, var(--mc) 24%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--mc) 32%, #140b30), #0a0620 80%);
}
.mode-slide.btn:active { transform: scale(.985); }
.ms-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 6px; }
.ms-symbol { font: 400 clamp(26px, 8vh, 52px)/1 system-ui; color: var(--mc); text-shadow: 0 0 16px var(--mc); }
.mode-slide .tile-tag { position: static; margin-top: 2px; font-size: clamp(7px, 1.5vh, 9px); white-space: nowrap; }
.mode-slide b { font: italic 900 clamp(15px, 3.8vh, 26px)/1.05 var(--font); letter-spacing: -.01em; color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--mc) 60%, transparent); margin-top: auto; }
.mode-slide small { display: block; font-size: clamp(9px, 2vh, 13px); line-height: 1.35; color: #c9bfe6; letter-spacing: .02em; }
.mode-slide .ms-go { font: 900 clamp(10px, 2.1vh, 14px) var(--font); letter-spacing: .14em; color: var(--mc); margin-top: clamp(2px, 0.8vh, 8px); text-shadow: 0 0 10px color-mix(in srgb, var(--mc) 70%, transparent); }
.mode-slide .ms-go i { font-style: normal; display: inline-block; transition: transform .15s; }
.mode-slide.is-active .ms-go i { transform: translateX(3px); }
.mode-dots { display: flex; justify-content: center; gap: 7px; flex: none; min-height: 8px; }
.mdot { width: 7px; height: 7px; border-radius: 50%; background: #4b3d73; transition: width .2s, background .2s; }
.mdot.on { width: 20px; border-radius: 4px; background: #ffe14d; box-shadow: 0 0 8px #ffe14d99; }

/* ---- pantallas muy bajas (móvil en horizontal): sin adornos que roben altura */
@media (max-height: 560px) {
  .title .cover-art { display: none; }
  .title .hero-copy { display: none; }
  .title .eyebrow { display: none; }
  .screen.title .arena-footer p { display: none; }
}
@media (max-height: 360px) {
  .net-btn .net-text small { display: none; }
}
@media (max-height: 430px) {
  .screen.title { grid-template-rows: auto minmax(0, 1fr) auto; padding-top: 6px; padding-bottom: 6px; }
  .title .hero-meta span:nth-child(2) { display: none; }
  .title .section-label { font-size: 7px; }
  .screen.title .arena-footer { padding-top: 3px; }
  .screen.title .arena-footer .record-item b { font-size: 12px; }
  .shop-btn .shop-text small { font-size: 8px; }
}

/* ---- vertical (móvil de pie y ventanas estrechas): modos arriba, tienda y opciones debajo */
@media (max-aspect-ratio: 1/1), (max-width: 700px) and (min-height: 500px) {
  .screen.title {
    overflow-y: auto; touch-action: pan-y; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto;
    grid-template-areas: "head" "hero" "modes" "side" "foot"; gap: 14px;
  }
  .title-left { display: contents; }
  .title .title-hero { grid-area: hero; }
  .side-menu { grid-area: side; }
  .title .arena-menu { min-height: 250px; }
  .mode-track { min-height: 220px; }
  .title .hero-copy, .title .cover-art, .title .eyebrow { display: block; }
  .title .cover-art { display: none; }
  .screen.title .arena-footer p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shop-btn.btn { animation: none; } .mode-slide.btn, .mdot { transition: none; } }

/* ============================================================ TIENDA */
.show-shop .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; flex: none; gap: 4px; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.show-shop .tabs::-webkit-scrollbar { display: none; }
.show-shop .tabs .tab { flex: none; white-space: nowrap; }
.show-shop .tabs .tab.on { background: #ffe14d1c; border-radius: 6px 6px 0 0; }
.show-shop .bar h2 { color: #ffe9a0; text-shadow: 0 0 18px #ffe14d77; }
.accwrap { flex: 1; min-height: 0; display: flex; gap: clamp(8px, 1.6vw, 18px); }
.accside { flex: 0 0 clamp(96px, 20vw, 190px); display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; padding: 8px; border-radius: 14px; border: 1px solid #2a3950; background: linear-gradient(160deg, #1c1238, #0b0a1a); text-align: center; }
.accside canvas { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: contain; }
.accside b { font: italic 900 clamp(10px, 2.2vh, 14px) var(--font); letter-spacing: .1em; color: #ffe9a0; }
.accside small { font-size: clamp(8px, 1.6vh, 11px); opacity: .7; }
.accmain { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.subtabs { display: flex; gap: 6px; margin: 0 0 6px; flex: none; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.tab.sub { font-size: clamp(10px, 2.2vh, 14px); border: 1px solid #3a4b65; border-radius: 999px; padding: .3em .9em; border-bottom-width: 1px; flex: none; }
.tab.sub.on { background: #00f0ff22; border-color: #00f0ff; color: #bffaff; }
.accmain .grid { flex: 1; min-height: 0; }
.eprev.nothing { display: grid; place-items: center; font: 400 clamp(34px, 12vh, 70px) system-ui; color: #4d5b79; }
.accmain .grid.emotegrid { grid-template-columns: repeat(auto-fill, minmax(clamp(230px, 46vh, 300px), 1fr)); }
.card.emote.acc { display: grid; grid-template-columns: minmax(64px, 40%) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 10px; row-gap: 6px; padding: 8px; align-items: stretch; }
.card.emote.acc .eprev { grid-row: 1 / span 2; width: 100%; height: 100%; min-height: 84px; aspect-ratio: auto; }
.card.emote.acc .acc-info { grid-column: 2; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.card.emote.acc .acc-info b { font-size: clamp(10px, 2.3vh, 13px); text-align: left; }
.card.emote.acc .acc-info small { font-size: clamp(9px, 1.9vh, 11px); min-height: 0; line-height: 1.35; }
.card.emote.acc .btn { grid-column: 2; margin: 0; min-height: clamp(28px, 6vh, 38px); padding: 4px 8px; font-size: clamp(9px, 2vh, 12px); }