/* ── Tokens: misma estructura que threevanny.com, paleta más divertida ── */
:root {
  color-scheme: light;

  --color-bg: #fff6e9;
  --color-surface: #ffe8c7;
  --color-text: #22184a;
  --color-muted: #6b5f8f;
  --color-divider: rgba(34, 24, 74, .16);
  --color-hover-wash: rgba(34, 24, 74, .07);
  --color-link: #6c3df0;
  --color-link-hover: #4f22c9;
  --color-accent: #ff4f7b;

  /* Tiles: un color por juego */
  --tile-sunset-bg: linear-gradient(140deg, #ff5f6d 0%, #ff9a44 100%); --tile-sunset-fg: #fffaf2;
  --tile-berry-bg: linear-gradient(140deg, #8b5cf6 0%, #d946ef 100%);  --tile-berry-fg: #fff7ff;
  --tile-mint-bg: linear-gradient(140deg, #19c9a0 0%, #9be15d 100%);   --tile-mint-fg: #0b3328;
  --tile-sky-bg: linear-gradient(140deg, #3d7bff 0%, #34c8ff 100%);    --tile-sky-fg: #f3f9ff;
  --tile-sun-bg: linear-gradient(140deg, #ffc93c 0%, #ff8f3c 100%);    --tile-sun-fg: #3a1d00;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --radius-md: 16px;
  --radius-lg: 28px;

  --ease-tile: cubic-bezier(.33, .9, .25, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #16122b;
    --color-surface: #241d45;
    --color-text: #fff3e3;
    --color-muted: #b8acd9;
    --color-divider: rgba(255, 243, 227, .18);
    --color-hover-wash: rgba(255, 243, 227, .08);
    --color-link: #b9a2ff;
    --color-link-hover: #d4c6ff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #16122b;
  --color-surface: #241d45;
  --color-text: #fff3e3;
  --color-muted: #b8acd9;
  --color-divider: rgba(255, 243, 227, .18);
  --color-hover-wash: rgba(255, 243, 227, .08);
  --color-link: #b9a2ff;
  --color-link-hover: #d4c6ff;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  transition: background-color .3s, color .3s;
}
a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
::selection { background: rgba(255, 79, 123, .3); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscript { text-align: center; padding: 20px; }

.icon {
  flex: none;
  width: var(--size, 22px); height: var(--size, 22px);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: 999px;
  padding: 8.8px 15.8px;
}
.btn .icon { --size: 16px; }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: var(--color-hover-wash); color: var(--color-text); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn-icon .icon { --size: 20px; }

/* ── Layout ─────────────────────────────────────────────────── */
.page {
  min-height: 100vh;
  padding: 22px clamp(16px, 4vw, 56px) 64px;
}
.site-header, .view, .site-footer { max-width: 1180px; margin-inline: auto; }

.site-header {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  margin-bottom: 26px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
  border-radius: var(--radius-md);
}
.brand:hover { color: inherit; }
.brand-logo {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px; color: #fff;
  background: linear-gradient(140deg, #ff4f7b, #ff9a44);
  transform: rotate(-6deg);
  transition: transform .3s var(--ease-tile);
}
.brand-logo .icon { --size: 26px; }
.brand:hover .brand-logo { transform: rotate(6deg) scale(1.05); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-heading); font-size: 21px; }
.brand-role { font-size: 12px; color: var(--color-muted); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.site-footer {
  margin-top: 52px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--color-muted);
}
.site-footer a { color: inherit; }

/* ── Rejilla de tiles: todos del mismo tamaño ───────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 14px;
}
@media (max-width: 480px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--radius-lg);
  padding: clamp(14px, 3.5vw, 20px);
  text-decoration: none;
  transition: filter .25s, transform .2s;
}
.tile::after {
  content: ""; position: absolute; right: -40%; bottom: -40%;
  width: 90%; height: 90%; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  pointer-events: none;
}
a.tile { cursor: pointer; }
a.tile:hover { filter: brightness(1.07) saturate(1.05); }
a.tile:active { transform: scale(.985); }

.tile-sunset { background: var(--tile-sunset-bg); color: var(--tile-sunset-fg); }
.tile-berry  { background: var(--tile-berry-bg);  color: var(--tile-berry-fg); }
.tile-mint   { background: var(--tile-mint-bg);   color: var(--tile-mint-fg); }
.tile-sky    { background: var(--tile-sky-bg);    color: var(--tile-sky-fg); }
.tile-sun    { background: var(--tile-sun-bg);    color: var(--tile-sun-fg); }
.tile.is-soon { opacity: .82; }
.tile:hover, .tile:focus-visible { color: inherit; }

.kicker {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  opacity: .9;
}
.kicker .icon { --size: 18px; }

.tile-foot { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.t-name { font-family: var(--font-heading); font-size: clamp(20px, 5vw, 28px); line-height: 1.05; }

/* Caras rotativas (live tiles) */
.faces-window { position: relative; display: block; height: 2.6em; overflow: hidden; font-size: 13px; line-height: 1.3; }
.faces {
  position: absolute; inset: 0; display: block;
  transition: transform 1.5s var(--ease-tile);
  will-change: transform;
}
.face { height: 100%; display: flex; align-items: center; opacity: .92; text-wrap: pretty; }

/* Arte de cada tile */
.art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.art-flags { padding-bottom: 18%; }
.art-flags img {
  grid-area: 1 / 1;
  width: 38%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(60, 10, 0, .3);
  transition: transform .5s var(--ease-tile);
}
.art-flags img:nth-child(1) { transform: translate(-48%, 6%) rotate(-12deg); }
.art-flags img:nth-child(2) { transform: translate(0, -8%) rotate(2deg); z-index: 1; }
.art-flags img:nth-child(3) { transform: translate(48%, 6%) rotate(12deg); }
a.tile:hover .art-flags img:nth-child(1) { transform: translate(-56%, 2%) rotate(-16deg); }
a.tile:hover .art-flags img:nth-child(2) { transform: translate(0, -14%) rotate(-2deg) scale(1.06); }
a.tile:hover .art-flags img:nth-child(3) { transform: translate(56%, 2%) rotate(16deg); }

.art-soon {
  font-family: var(--font-heading); font-size: clamp(56px, 16vw, 96px); line-height: 1;
  padding-bottom: 14%;
  opacity: .35;
  animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-8px) rotate(6deg); } }

.play-badge {
  position: absolute; top: clamp(12px, 3vw, 16px); right: clamp(12px, 3vw, 16px); z-index: 1;
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: #ff4f7b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease-tile);
}
.play-badge .icon { --size: 18px; translate: 1px 0; }
a.tile:hover .play-badge { transform: scale(1.12); }

/* Entrada tipo Windows Phone: los tiles giran al aparecer */
.tiles.enter .tile {
  animation: tile-in .55s var(--ease-tile) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transform-origin: left center;
}
@keyframes tile-in {
  from { opacity: 0; transform: perspective(900px) rotateY(-70deg) translateX(-20px); }
  to   { opacity: 1; transform: none; }
}
.tiles.enter .tile.is-soon { animation-name: tile-in-soon; }
@keyframes tile-in-soon {
  from { opacity: 0; transform: perspective(900px) rotateY(-70deg) translateX(-20px); }
  to   { opacity: .82; transform: none; }
}

/* ── 404 ────────────────────────────────────────────────────── */
.not-found { text-align: center; padding: 8vh 0; }
.not-found h1 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(40px, 9vw, 72px); margin: 0 0 8px; }
.not-found p { color: var(--color-muted); margin: 0 0 22px; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: #e83a66; color: #fff; }

/* ── Movimiento reducido ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .faces { transition: none; }
  .tiles.enter .tile, .art-soon { animation: none; }
  .tile, .art-flags img, body, .brand-logo { transition: none; }
}