/* The Arcade page. Only what site.css does not already give us. */

.arcade-play { margin-top: 24px; }
.arcade-play .btn { padding: 16px 40px; font-size: 16px; }

/* The advert in the grid is the sixth cell. Same height as a game tile,
   but dashed and labelled so nobody mistakes it for a game. */
.arcade-tiles > .ad-box:has(ins[data-ad-status="filled"]) {
  min-height: 300px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.arcade-tiles > .ad-box .ad-slot { flex: 1; }

/* Tile text is the game's own instruction, so set it like the game does. */
.arcade-tiles .tile p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .04em;
  opacity: .8;
}
.arcade-tiles .tile { position: relative; }
.arcade-tiles .tile-art {
  display: block;
  width: min(100%, 200px);
  margin: 4px 0 18px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  animation: tile-bob 3.4s ease-in-out infinite;
}
.arcade-tiles .tile:hover .tile-art { animation-duration: 1.2s; }
@keyframes tile-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.arcade-tiles a.tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.arcade-note {
  padding: 22px var(--pad) 0;
  margin: 0;
  color: var(--mut-dim);
  font-size: 15px;
}

.how p { color: var(--mut); margin: 0; max-width: 34ch; }
.arcade-cta { margin: 40px 0 0; }

/* Link card to One Button. */
.arcade-next {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: clamp(240px, 32vw, 340px);
  padding: clamp(20px, 3vw, 28px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
}
.arcade-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arcade-next .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(7, 7, 12, .92));
}
.arcade-next .k, .arcade-next b { position: relative; }
.arcade-next b { font-size: clamp(44px, 7vw, 72px); }
.arcade-next:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .arcade-tiles .tile-art { animation: none; }
}

@media (max-width: 600px) {
  .arcade-tiles .tile-art { width: 160px; }
  .arcade-play .btn { display: block; }
  .arcade-tiles .tile p { font-size: 24px; }
  .arcade-tiles > .ad-box:has(ins[data-ad-status="filled"]) { min-height: 0; }
}