/* Play 2048, styled as part of allcloudnobreaks.com: the same near black
   field, the cyan to violet gradient, Inter for words and JetBrains Mono for
   numbers, and the blueprint backdrop with two slow drifting glows. The tile
   ramp climbs from dim slate through cyan into violet instead of the classic
   orange and yellow, so the game reads as the brand rather than a port. */

@font-face {
  font-family: "Inter var";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono var";
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0a0f;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-line: rgba(255, 255, 255, 0.08);
  --cell: rgba(255, 255, 255, 0.045);
  --text: #e8eaed;
  --body: #c8cdd3;
  --muted: #8b93a1;
  --cyan: #00d4ff;
  --violet: #6e44ff;
  --grad: linear-gradient(135deg, #00d4ff, #6e44ff);
  --ink-dark: #0a0a0f;
  --focus: #00d4ff;
  --t2: rgba(255, 255, 255, 0.10);  --t2-ink: #e8eaed;
  --t4: rgba(255, 255, 255, 0.17);  --t4-ink: #ffffff;
  --t8: #14465a;    --t8-ink: #ffffff;
  --t16: #0f627c;   --t16-ink: #ffffff;
  --t32: #0a84a6;   --t32-ink: #ffffff;
  --t64: #00a9cf;   --t64-ink: #0a0a0f;
  --t128: #00d4ff;  --t128-ink: #0a0a0f;
  --t256: #2fa6ff;  --t256-ink: #0a0a0f;
  --t512: #4f7dff;  --t512-ink: #ffffff;
  --t1024: #6e44ff; --t1024-ink: #ffffff;
  --gap: clamp(6px, 1.6vw, 12px);
  --radius: 8px;
  --board: min(92vw, 440px);
  --sans: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono var", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-family: var(--sans);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

html { background: var(--bg); }

body {
  position: relative;
  background: transparent;
  color: var(--body);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 24px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* The blueprint grid and the drifting glows, the same two layers the parent
   site draws. Fixed, behind everything, and never able to take a click. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 212, 255, 0.16) 1px, transparent 0),
    linear-gradient(rgba(0, 212, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 60px, 15px 15px, 15px 15px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 92%);
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(0, 212, 255, 0.10) 0%, transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(110, 68, 255, 0.10) 0%, transparent 42%);
  animation: drift 48s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.08); }
}

.skip {
  position: absolute;
  left: 8px;
  top: -80px;
  background: var(--grad);
  color: var(--ink-dark);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius);
  z-index: 10;
}
.skip:focus { top: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app { width: var(--board); max-width: 100%; }

/* Staggered entry on load. Pure CSS, so a script failure still ends with
   everything visible once the animations finish. */
.top, .controls, .board-wrap, .how { animation: rise-in 0.6s cubic-bezier(.22, .61, .36, 1) both; }
.controls { animation-delay: 0.06s; }
.board-wrap { animation-delay: 0.12s; }
.how { animation-delay: 0.18s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.section-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 6px;
}

.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; }

.scores { display: flex; gap: 8px; }

.score-box {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 6px 12px;
  min-width: 72px;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.score-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cyan);
}

.score-value {
  display: block;
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.gain {
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  font-size: 0.95rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--cyan);
  opacity: 0;
  pointer-events: none;
}
.gain.show { animation: rise 600ms ease-out forwards; }

@keyframes rise {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-28px); }
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hint { margin: 0; color: var(--muted); font-size: 0.88rem; }

.btn {
  font: inherit;
  font-weight: 600;
  background: var(--grad);
  color: var(--ink-dark);
  border: 0;
  border-radius: var(--radius);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 212, 255, 0.25); }
.btn:focus-visible, .board:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.btn-secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-line);
}
.btn-secondary:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }

.board-wrap { position: relative; }

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 212, 255, 0.04);
  overflow: hidden;
}

/* Fine scanlines over the board, the parent site's hero texture. Pitch of 4px
   so it does not fight the 60px grid behind it. */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 212, 255, 0.03) 0px,
    rgba(0, 212, 255, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
}

.cell {
  position: relative;
  background: var(--cell);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}

.tile {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 7.5vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  background: var(--t2);
  color: var(--t2-ink);
}
.tile-4 { background: var(--t4); color: var(--t4-ink); }
.tile-8 { background: var(--t8); color: var(--t8-ink); }
.tile-16 { background: var(--t16); color: var(--t16-ink); }
.tile-32 { background: var(--t32); color: var(--t32-ink); }
.tile-64 { background: var(--t64); color: var(--t64-ink); }
.tile-128 { background: var(--t128); color: var(--t128-ink); font-size: clamp(1.2rem, 6.5vw, 1.9rem); box-shadow: 0 0 18px rgba(0, 212, 255, 0.35); }
.tile-256 { background: var(--t256); color: var(--t256-ink); font-size: clamp(1.2rem, 6.5vw, 1.9rem); box-shadow: 0 0 18px rgba(47, 166, 255, 0.35); }
.tile-512 { background: var(--t512); color: var(--t512-ink); font-size: clamp(1.2rem, 6.5vw, 1.9rem); box-shadow: 0 0 18px rgba(79, 125, 255, 0.4); }
.tile-1024 { background: var(--t1024); color: var(--t1024-ink); font-size: clamp(1rem, 5.5vw, 1.5rem); box-shadow: 0 0 20px rgba(110, 68, 255, 0.45); }
.tile-2048 { background: var(--grad); color: #ffffff; font-size: clamp(1rem, 5.5vw, 1.5rem); box-shadow: 0 0 28px rgba(0, 212, 255, 0.55), 0 0 48px rgba(110, 68, 255, 0.45); }
.tile-super { background: linear-gradient(135deg, #6e44ff, #00d4ff); color: #ffffff; font-size: clamp(1rem, 5.5vw, 1.5rem); box-shadow: 0 0 28px rgba(110, 68, 255, 0.6); }

.tile.is-new { animation: pop-in 180ms ease-out; }
.tile.is-merged { animation: pulse 220ms ease-out; }

@keyframes pop-in {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 22px rgba(0, 212, 255, 0.5); }
  100% { transform: scale(1); }
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 16px;
}
.overlay[hidden] { display: none; }

.overlay-card {
  background: rgba(10, 10, 15, 0.85);
  border: 1px solid var(--panel-line);
  color: var(--text);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 212, 255, 0.08);
}
.overlay-card h2 { margin: 0 0 8px; font-size: 1.5rem; color: var(--text); }
.overlay-card p { margin: 0 0 16px; color: var(--muted); }
.overlay-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.how {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.how h2 { color: var(--text); font-size: 1.05rem; margin: 0 0 8px; font-weight: 600; }
.how p { margin: 0 0 10px; }
.how strong { color: var(--cyan); font-weight: 600; }

.foot {
  margin-top: auto;
  padding-top: 28px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  max-width: var(--board);
}
.foot a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(0, 212, 255, 0.4); }
.foot a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

.notfound { text-align: center; margin-top: 15vh; animation: rise-in 0.6s cubic-bezier(.22, .61, .36, 1) both; }
.notfound .tile { width: 120px; height: 120px; margin: 0 auto 20px; font-size: 2rem; }
.notfound h1 { font-size: 2rem; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .tile.is-new, .tile.is-merged, .gain.show { animation: none; }
  .gain.show { opacity: 0; }
  .top, .controls, .board-wrap, .how, .notfound { animation: none; }
  .btn { transition: none; }
}