/* ============================================================
   Csúszó 2048 — skandináv szám-összeolvasztó
   krémpapír · svédkék tábla · színes csempék · mustár akcent
   (a Játéksarok közös palettájával)
   ============================================================ */

:root {
  --paper: #f3ebdb;
  --paper-2: #eadfc7;
  --card: #fbf7ec;
  --ink: #22304a;
  --ink-2: #4a5872;
  --line: #d9cbab;
  --blue: #1f4e8c;
  --blue-deep: #16365f;
  --blue-light: #2d63ab;
  --sun: #f2b23e;
  --sun-deep: #d3961d;
  --sun-ink: #3d2c05;
  --red: #bf4530;
  --red-soft: #e8d3c6;
  --green: #3e7d52;
  --tile-ivory: #fdfaf1;
  --tile-edge: #e4dbc4;

  --font-display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: Corbel, Candara, "Segoe UI", "Trebuchet MS", sans-serif;
  --font-num: Consolas, "Cascadia Mono", "Courier New", monospace;

  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(34, 48, 74, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(242, 178, 62, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(31, 78, 140, .10), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.48 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
button { font: inherit; color: inherit; }

/* ---------- fejléc ---------- */

.topbar {
  max-width: 1040px; margin: 0 auto; padding: 22px 20px 6px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }

.brand-badge {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  width: 46px; height: 46px; padding: 4px;
  background: linear-gradient(150deg, var(--blue-light), var(--blue-deep));
  border-radius: 10px;
  transform: rotate(-6deg);
  box-shadow: 3px 4px 0 rgba(34, 48, 74, .25);
}
.t2-badge .bb-t {
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; font-family: var(--font-num); font-weight: 700; font-size: 9px;
}
.t2-badge .v2 { background: var(--sun); color: var(--sun-ink); }
.t2-badge .v4 { background: var(--blue-light); color: #fff; }
.t2-badge .v8 { background: var(--red); color: #fff; }
.t2-badge .v16 { background: var(--green); color: #fff; }

.brand-text h1 {
  margin: 0; font-family: var(--font-display); font-size: 34px;
  letter-spacing: .04em; line-height: 1;
}
.brand-sub {
  display: block; font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-2); margin-top: 4px;
}
.topnav { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- gombok ---------- */

.btn {
  border: 2px solid transparent; border-radius: 12px; padding: 10px 20px;
  cursor: pointer; font-weight: 700; letter-spacing: .02em;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  background: none;
}
.btn:active { transform: translateY(2px); }
.btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }

.btn-primary {
  background: linear-gradient(180deg, #f7c159, var(--sun) 55%, var(--sun-deep));
  color: var(--sun-ink); border-color: var(--sun-deep);
  box-shadow: 0 5px 0 #a97a14, 0 10px 22px rgba(211, 150, 29, .35);
  font-size: 18px; padding: 12px 30px;
}
.btn-primary:hover:not([disabled]) { filter: brightness(1.05); }
.btn-primary:active:not([disabled]) { box-shadow: 0 2px 0 #a97a14; transform: translateY(3px); }

.btn-ghost { color: var(--ink); border-color: transparent; }
.btn-ghost:hover { background: rgba(34, 48, 74, .08); }
.btn-outline { border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--card); }

/* ---------- állapotsor ---------- */

.stage { max-width: 1040px; margin: 0 auto; padding: 0 20px 30px; }

.statusbar { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 18px; display: flex; flex-direction: column; justify-content: center;
  min-width: 92px; box-shadow: 0 2px 0 rgba(34, 48, 74, .06);
}
.stat-l { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2); }
.stat-v { font-family: var(--font-num); font-size: 24px; font-weight: 700; }
.stat-v.bump { animation: bump .3s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* ---------- játéktér (rács) ---------- */

.playfield { margin-top: 4px; }

.board-wrap {
  position: relative;
  border-radius: 22px;
  padding: 20px;
  min-height: 320px;
  background:
    radial-gradient(120% 130% at 50% -20%, var(--blue-light), var(--blue) 55%, var(--blue-deep)),
    var(--blue);
  box-shadow:
    inset 0 0 0 3px rgba(242, 178, 62, .5),
    inset 0 0 0 6px rgba(23, 54, 95, .9),
    inset 0 14px 44px rgba(9, 22, 44, .5),
    var(--shadow-soft);
  overflow: hidden;
}
.board-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
}

.board-hint {
  position: relative; text-align: center; color: rgba(251, 247, 236, .9);
  font-size: 16px; padding: 60px 10px;
}
.board-hint strong { color: var(--sun); }
.playfield.is-live .board-hint { display: none; }

.t2-board {
  position: relative; z-index: 1;
  display: none;
  grid-template-columns: repeat(var(--size, 4), 1fr);
  grid-template-rows: repeat(var(--size, 4), 1fr);
  gap: 10px;
  width: min(420px, 82vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  outline: none;
  touch-action: none;
}
.playfield.is-live .t2-board { display: grid; }

.tcell {
  border-radius: 12px;
  background: rgba(9, 22, 44, .28);
  display: flex; align-items: center; justify-content: center;
}
.tile {
  width: 100%; height: 100%;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700;
  font-size: clamp(16px, 6vw, 34px);
  color: var(--ink);
}
.tile.filled { box-shadow: 0 3px 6px rgba(9, 22, 44, .35); }
.tile.pop { animation: pop .18s ease; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* csempeszínek — a paletta árnyalataiból, egyre "melegebb"/erősebb felé */
.tile.t2 { background: #f4ecd8; color: var(--ink); }
.tile.t4 { background: #efe0bf; color: var(--ink); }
.tile.t8 { background: #f5c877; color: var(--sun-ink); }
.tile.t16 { background: #f2b23e; color: var(--sun-ink); }
.tile.t32 { background: #e8942e; color: #fff; }
.tile.t64 { background: #d9701f; color: #fff; }
.tile.t128 { background: #cf5a2a; color: #fff; font-size: clamp(14px, 5vw, 30px); }
.tile.t256 { background: #bf4530; color: #fff; font-size: clamp(14px, 5vw, 30px); }
.tile.t512 { background: #7a9bc4; color: #fff; font-size: clamp(14px, 5vw, 30px); }
.tile.t1024 { background: #3f74b0; color: #fff; font-size: clamp(12px, 4.4vw, 26px); }
.tile.t2048 { background: var(--blue); color: #fff; box-shadow: 0 0 18px rgba(242,178,62,.7); font-size: clamp(12px, 4.4vw, 26px); }
.tile.t4096, .tile.t8192 { background: var(--blue-deep); color: var(--sun); font-size: clamp(12px, 4vw, 24px); }

/* iránygombok */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 52px);
  gap: 8px;
  justify-content: center;
  margin: 18px auto 0;
}
.dbtn {
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  border-radius: 12px; font-size: 20px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(34, 48, 74, .3);
  transition: transform .08s ease, background .12s ease;
}
.dbtn:hover { background: var(--ink); color: var(--card); }
.dbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(34, 48, 74, .3); }
.dbtn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.d-up { grid-column: 2; grid-row: 1; }
.d-left { grid-column: 1; grid-row: 2; }
.d-down { grid-column: 2; grid-row: 2; }
.d-right { grid-column: 3; grid-row: 2; }

/* ---------- szünet ---------- */

/* szünetben a rács erősen elmosódik és nem használható
   (transition nélkül, azonnal — a none↔blur átmenet nem interpolál megbízhatóan) */
.playfield.is-paused .t2-board {
  filter: blur(11px) brightness(.85) contrast(.9);
  pointer-events: none;
}
/* az iránygombok is tiltva, halványítva */
.playfield.is-paused .dpad {
  opacity: .4;
  pointer-events: none;
}

/* Az overlay CSAK szünetben látszik — a láthatóságot az is-paused osztály
   vezérli (nem a hidden attribútum, amit a display:flex felülírna). */
.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 30, 55, .38);
  border-radius: 22px;
}
.playfield.is-paused .pause-overlay { display: flex; }

.pause-box {
  text-align: center;
  background: var(--card);
  border-radius: 16px;
  padding: 22px 30px;
  box-shadow: 0 18px 50px rgba(9, 22, 44, .5);
}
.pause-ico {
  display: block;
  font-size: 30px;
  letter-spacing: 4px;
  color: var(--blue);
}
.pause-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 8px 0 16px;
  letter-spacing: .06em;
}

/* üzenetsáv */
.banner {
  position: absolute; top: 12px; left: 14px; right: 14px; z-index: 6;
  text-align: center; border-radius: 10px; font-weight: 700; padding: 9px 14px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none; box-shadow: 0 6px 18px rgba(9, 22, 44, .35);
}
.banner.show { opacity: 1; transform: translateY(0); }
.banner.b-info { background: rgba(251, 247, 236, .95); color: var(--ink); }
.banner.b-warn { background: var(--sun); color: var(--sun-ink); }
.banner.b-danger { background: var(--red); color: #fff; }
.banner.b-success { background: var(--green); color: #fff; }

/* ---------- párbeszédablakok ---------- */

.dlg {
  border: 0; border-radius: 18px; padding: 0;
  background: var(--card); color: var(--ink);
  width: min(520px, calc(100vw - 36px));
  box-shadow: 0 30px 80px rgba(9, 22, 44, .45);
}
.dlg-wide { width: min(760px, calc(100vw - 36px)); }
.dlg::backdrop { background: rgba(18, 28, 48, .55); backdrop-filter: blur(3px); }

.dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 2px solid var(--paper-2);
  background: linear-gradient(180deg, #fffdf6, var(--card)); border-radius: 18px 18px 0 0;
}
.dlg-head h2 { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: .04em; }
.dlg-head-win { justify-content: center; background: linear-gradient(180deg, #f7c159, var(--sun)); }
.dlg-head-win h2 { color: var(--sun-ink); }

.dlg-x {
  border: 0; background: none; font-size: 19px; cursor: pointer;
  padding: 4px 9px; border-radius: 8px; color: var(--ink-2);
}
.dlg-x:hover { background: var(--paper-2); color: var(--ink); }

.dlg-body { padding: 20px 24px 24px; max-height: min(72vh, 640px); overflow-y: auto; }
.dlg-center { text-align: center; }

.dlg-note .dlg-body { padding-top: 28px; }
.note-icon {
  width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 26px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.note-icon.note-ask { background: var(--blue); }
.dlg-note h2 { font-family: var(--font-display); margin: 4px 0 8px; }
.dlg-note p { margin: 0 0 18px; color: var(--ink-2); }
.btnrow { display: flex; gap: 12px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* toplista */
.toptable { width: 100%; border-collapse: collapse; font-size: 15px; }
.toptable th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-2); border-bottom: 2px solid var(--paper-2); padding: 6px 8px;
}
.toptable td { padding: 7px 8px; border-bottom: 1px solid var(--paper-2); }
.toptable td.num, .toptable th.num { text-align: right; font-family: var(--font-num); }
.toptable th.num { font-family: inherit; }
.toptable tr.is-new td { background: rgba(242, 178, 62, .28); font-weight: 700; }
.toptable tr:first-child .medal { color: var(--sun-deep); }
.top-empty { text-align: center; color: var(--ink-2); padding: 26px 10px; font-style: italic; }
.top-note { margin: 14px 0 0; font-size: 12px; color: var(--ink-2); letter-spacing: .03em; }

/* győzelem / vége */
.win-lead { font-size: 18px; margin: 4px 0 14px; }
.win-stats { margin: 0 auto 14px; border-collapse: collapse; }
.win-stats th, .win-stats td { padding: 4px 14px; text-align: left; }
.win-stats th { color: var(--ink-2); font-weight: 400; }
.win-stats td { font-family: var(--font-num); font-weight: 700; }
.win-score {
  background: var(--ink); color: var(--card); border-radius: 14px; padding: 10px 18px;
  display: inline-flex; flex-direction: column; margin-bottom: 14px;
}
.win-score span { font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: rgba(251,247,236,.7); }
.win-score strong { font-family: var(--font-num); font-size: 34px; color: var(--sun); }
.win-qualify { font-weight: 700; color: var(--green); margin: 6px 0 8px; }
.win-form input {
  display: block; margin: 0 auto 12px; font: inherit; padding: 9px 14px;
  border: 2px solid var(--ink); border-radius: 10px; width: min(280px, 100%);
  text-align: center; background: #fffdf6;
}
.win-form input:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }
.win-noq { color: var(--ink-2); font-style: italic; }

/* ---------- szabályok tartalma ---------- */

.rules-body { font-size: 16px; }
.rules-body h3 {
  font-family: var(--font-display); font-size: 20px; letter-spacing: .03em;
  margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--paper-2);
  display: flex; align-items: center; gap: 9px;
}
.rules-body h3:first-child { margin-top: 0; }
.rules-body h3 .hnum {
  width: 17px; height: 17px; border-radius: 4px;
  background: var(--blue); border: 2px solid var(--blue-deep);
  transform: rotate(-8deg); flex: none;
}
.rules-body p { margin: 8px 0; }
.rules-body ul { margin: 8px 0; padding-left: 22px; }
.rules-body li { margin: 5px 0; }

.rule-ex {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--paper-2); border-radius: 12px; padding: 14px; margin: 12px 0;
}
.rule-ex-text { flex: 1; min-width: 200px; }
.rule-ex .arr { margin: 0 8px; color: var(--ink-2); font-weight: 700; }

/* mini csempesor a szabályokhoz */
.mini-row { display: inline-flex; gap: 4px; vertical-align: middle; }
.mini-tile {
  width: 30px; height: 30px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 14px;
}
.mini-tile.empty { background: rgba(34, 48, 74, .12); }
.mini-tile.v2 { background: #f4ecd8; color: var(--ink); }
.mini-tile.v4 { background: #efe0bf; color: var(--ink); }
.mini-tile.v8 { background: #f5c877; color: var(--sun-ink); }

.end-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.end-card {
  flex: 1; min-width: 190px; border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); background: #fffdf6;
}
.end-card strong { font-family: var(--font-display); font-size: 18px; }
.end-card span:last-child { font-size: 14px; color: var(--ink-2); }
.end-ico {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.end-lose .end-ico { background: var(--red); }

.foot {
  max-width: 1040px; margin: 0 auto; padding: 6px 20px 26px;
  color: var(--ink-2); font-size: 13px; letter-spacing: .05em;
}

/* ---------- reszponzív ---------- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand-text h1 { font-size: 27px; }
  .stat { padding: 6px 12px; min-width: 74px; }
  .stat-v { font-size: 19px; }
  .dpad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); }
}

/* ---------- csökkentett mozgás ---------- */

@media (prefers-reduced-motion: reduce) {
  .stat-v.bump, .banner, .tile.pop { animation: none !important; }
  .banner, .dbtn { transition-duration: .01s !important; }
}