:root {
  --board-size: clamp(300px, 84vw, 560px);
  --board-pad: clamp(8px, 1.8vw, 12px);
  --board-gap: clamp(7px, 1.6vw, 10px);
  --tile-size: calc((var(--board-size) - var(--board-pad) * 2 - var(--board-gap) * 3) / 4);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(124, 92, 255, 0.22), transparent 55%),
    radial-gradient(900px 500px at 110% 0%, rgba(0, 202, 255, 0.18), transparent 50%),
    radial-gradient(circle at top, #1f2332, #121521 60%);
  color: #e8edf7;
  display: grid;
  place-items: start center;
  min-height: 100vh;
  padding: 16px;
}
main {
  width: min(920px, 100%);
  min-width: 0;
  background: rgba(18, 22, 34, 0.35);
  border: 1px solid rgba(123, 140, 189, 0.2);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.35);
}
.hero-media {
  position: relative;
  width: 100%;
}
.hero-title-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 8px;
  border-radius: 14px;
}
.wallet-control {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 1px solid #4c587d;
  border-radius: 999px;
  background: rgba(15, 22, 38, 0.85);
  color: #e8efff;
  font-weight: 700;
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  z-index: 2;
}
.wallet-control:hover { background: rgba(33, 44, 72, 0.9); }
.wallet-menu {
  position: absolute;
  top: 62px;
  right: 18px;
  min-width: 220px;
  background: rgba(12, 18, 30, 0.96);
  border: 1px solid #3a4667;
  border-radius: 10px;
  padding: 6px;
  z-index: 3;
}
.wallet-menu button {
  width: 100%;
  text-align: left;
  border: 1px solid #3f4b70;
  background: #243154;
  color: #e8efff;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0;
  min-height: 36px;
}
.wallet-menu button:hover { background: #2f3d67; }
.wallet-chooser {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 15, 0.58);
  display: grid;
  place-items: center;
  z-index: 40;
}
.wallet-chooser-card {
  width: min(92vw, 360px);
  background: #121a2a;
  border: 1px solid #3a4667;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.wallet-chooser-card h3 { margin: 0 0 10px; }
.wallet-chooser-card button {
  width: 100%;
  margin: 6px 0;
  min-height: 40px;
  border: 1px solid #445378;
  border-radius: 10px;
  background: #26365e;
  color: #e8efff;
}
.wallet-chooser-card button.secondary {
  background: #1a2338;
}
.hero p { margin: 0; color: #aab4cc; }

.rules {
  display: block;
  background: #171b29;
  border: 1px solid #2f3854;
  border-radius: 10px;
  padding: 8px 12px;
}
.rules summary,
.status-fold summary,
.leaderboard-block summary {
  cursor: pointer;
  font-size: 13px;
  color: #d5def4;
  font-weight: 700;
}
.rules ul { margin: 8px 0 2px; padding-left: 18px; color: #aebbe0; font-size: 13px; }
.rules li { margin: 4px 0; }
.status-fold { background:#171b29; border:1px solid #2f3854; border-radius:10px; padding:8px 10px; }
.status-fold .chips { margin-top: 8px; }

.panel { margin: 10px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.chips { gap: 8px; }
.chip {
  height: 32px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  border: 1px solid transparent;
}
.chip-neutral { background: #2a3043; border-color: #3a425d; color: #c7d1e8; }
.chip-good { background: #173626; border-color: #236642; color: #acf2cd; }
.chip-warn { background: #3f3119; border-color: #82652a; color: #ffd791; }
.chip-bad { background: #472226; border-color: #8a3945; color: #ffb7c0; }

.panel.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 10px;
  align-items: stretch;
}
.metrics .metric {
  background: linear-gradient(180deg, rgba(43,50,76,0.8), rgba(26,31,48,0.9));
  border: 1px solid #3a4667;
  border-radius: 12px;
  padding: 8px 10px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.metric span { display:block; color:#a5b1cd; font-size:12px; }
.metric strong { font-size: 14px; }

.actions button, .move, #reset {
  border: 1px solid #4c587d;
  border-radius: 10px;
  background: #2f3b67;
  color: #e8efff;
  font-weight: 600;
  min-height: 44px;
  padding: 0 12px;
}
.actions button:disabled { opacity: .55; }

.score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background:#171b29;
  border:1px solid #2f3854;
  border-radius:10px;
  padding:10px;
}
.live-metric {
  background: #131a2a;
  border: 1px solid #2f3854;
  border-radius: 10px;
  padding: 10px 12px;
}
.live-metric strong {
  display: block;
  color: #b8c5e3;
  font-size: 12px;
  margin-bottom: 6px;
}
#score,
#gameTimer {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #f2f7ff;
}
#runStatus { color: #b9c5df; font-size: 13px; margin-top: 8px; }
.overlay-reason { margin: 6px 2px 0; color:#a5b1cd; font-size:12px; min-height: 16px; }

.board-shell { position: relative; width: fit-content; margin-inline: auto; }
.board {
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  gap: var(--board-gap);
  background: linear-gradient(180deg, #1c2132, #171b2a);
  padding: var(--board-pad);
  border-radius: 14px;
  width: fit-content;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid #3b4670;
  box-shadow:
    0 0 0 2px rgba(120, 138, 199, 0.08),
    0 10px 28px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.start-overlay {
  position: absolute;
  inset: 0;
  border: 1px solid #4c587d;
  border-radius: 12px;
  background: rgba(17, 22, 36, 0.58);
  color: #f3f7ff;
  font-size: clamp(22px, 3.8vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  backdrop-filter: blur(1px);
  padding: 14px;
}
.start-overlay .sub {
  display: block;
  margin-top: 10px;
  font-size: clamp(15px, 2.1vw, 19px);
  font-weight: 600;
  color: #d5def8;
  letter-spacing: 0;
  line-height: 1.25;
}
.start-overlay:hover { background: rgba(24, 32, 54, 0.94); }

.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #252b3e;
  color: #776e65;
  font-size: clamp(16px, calc(var(--tile-size) * 0.42), 44px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.3);
  animation: tile-pop 160ms ease-out;
}
.tile.v2{background:#eee4da}.tile.v4{background:#ede0c8}
.tile.v8{background:#f2b179;color:#f9f6f2}.tile.v16{background:#f59563;color:#f9f6f2}
.tile.v32{background:#f67c5f;color:#f9f6f2}.tile.v64{background:#f65e3b;color:#f9f6f2}
.tile.v128{background:#edcf72;color:#f9f6f2;font-size:clamp(16px, calc(var(--tile-size) * 0.34), 38px)}
.tile.v256{background:#edcc61;color:#f9f6f2;font-size:clamp(16px, calc(var(--tile-size) * 0.34), 38px)}
.tile.v512{background:#edc850;color:#f9f6f2;font-size:clamp(16px, calc(var(--tile-size) * 0.34), 38px)}
.tile.v1024{background:#edc53f;color:#f9f6f2;font-size:clamp(16px, calc(var(--tile-size) * 0.28), 30px)}
.tile.v2048{background:#edc22e;color:#f9f6f2;font-size:clamp(16px, calc(var(--tile-size) * 0.28), 30px)}
.tile.v4096{background:#cab4ff;color:#ffffff;font-size:clamp(16px, calc(var(--tile-size) * 0.28), 30px)}

@keyframes tile-pop {
  from { transform: scale(0.94); filter: brightness(1.08); }
  to { transform: scale(1); filter: brightness(1); }
}

.controls {
  --dpad-size-x: clamp(77px, 21.6vw, 91px);
  --dpad-size-y: clamp(40px, 11.3vw, 48px);
  --dpad-gap-x: clamp(10px, 2.8vw, 14px);
  --dpad-gap-y: clamp(5px, 1.7vw, 8px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(var(--board-size), 100%);
  margin-inline: auto;
  gap: 10px;
}
.dpad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, var(--dpad-size-x));
  grid-template-rows: repeat(3, var(--dpad-size-y));
  column-gap: var(--dpad-gap-x);
  row-gap: var(--dpad-gap-y);
  align-items: center;
  justify-items: center;
  padding: 8px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 40%, rgba(61, 74, 116, 0.55), rgba(28, 35, 58, 0.7));
  border: 1px solid rgba(86, 103, 156, 0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.28);
}
.move {
  width: var(--dpad-size-x);
  min-width: 56px;
  min-height: 38px;
  height: var(--dpad-size-y);
  border-radius: 12px;
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1;
  font-weight: 800;
  border: 1px solid #6678b4;
  background: linear-gradient(180deg, #45578c, #2f3d67);
  box-shadow: 0 5px 12px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.2);
}
.move:hover {
  background: linear-gradient(180deg, #4f64a3, #35477a);
}
.move:active {
  transform: translateY(1px) scale(0.97);
}
.move:focus-visible {
  outline: 2px solid #91a7ff;
  outline-offset: 2px;
}
.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; }
.dpad .down { grid-column: 2; grid-row: 3; }
.dpad .right { grid-column: 3; grid-row: 2; }
.dpad-center {
  grid-column: 2;
  grid-row: 2;
  width: clamp(22px, 5vw, 28px);
  height: clamp(22px, 5vw, 28px);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(196, 209, 255, 0.95), rgba(102, 118, 167, 0.95));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 2px 8px rgba(0,0,0,0.25);
}
.move.end-run {
  width: auto;
  min-width: 196px;
  min-height: 48px;
  height: auto;
  font-size: 14px;
  margin-left: 0;
  margin-top: 6px;
  padding: 10px 16px;
}
.move.end-run:disabled {
  opacity: .45;
  background: #252b3d;
  border-color: #3b4460;
}
@media (min-width: 900px) {
  .controls {
    --dpad-size-x: 74px;
    --dpad-size-y: 39px;
    --dpad-gap-x: 10px;
    --dpad-gap-y: 6px;
  }
}

pre { white-space: pre-wrap; font-size: 12px; background: #131825; color:#cbd6f0; padding: 8px; border: 1px solid #2f3854; width: 100%; max-width: 100%; border-radius: 8px; max-height: 240px; overflow:auto; overflow-wrap:anywhere; word-break:break-word; }
.hint { color:#a5b1cd; font-size:13px; }
.controls-hint {
  margin: 0;
  text-align: center;
  max-width: 360px;
}

#highScoreBanner {
  width: 100%;
  border: 1px solid #6f5f1c;
  background: linear-gradient(90deg, #544107, #7b5e12);
  color: #ffe9a3;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
}

#countdownBanner {
  width: 100%;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
}
#countdownBanner.warn {
  border: 1px solid #82652a;
  background: #3f3119;
  color: #ffd791;
}
#countdownBanner.danger {
  border: 1px solid #8a3945;
  background: #472226;
  color: #ffb7c0;
}

.leaderboard-wrap { align-items: flex-start; }
.leaderboard-block {
  flex: 1 1 280px;
  background: #171b29;
  border: 1px solid #2f3854;
  border-radius: 10px;
  padding: 10px;
}
.leaderboard-block h3 { margin: 0 0 8px; font-size: 14px; color: #c7d3ef; }
.leaderboard-block ol, .leaderboard-block ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  color: #aebbe0;
}
.table-head,
.table-row {
  display: grid;
  align-items: center;
  gap: 10px;
}
.lb-grid { grid-template-columns: 56px 72px minmax(0, 1fr) 130px; }
.recent-grid { grid-template-columns: 72px minmax(0, 1fr) 110px 90px; }
.table-head {
  color: #8fa3d2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 0 0 6px;
  border-bottom: 1px solid #2b3654;
  margin-bottom: 4px;
}
.table-list .table-row {
  padding: 6px 0;
  border-bottom: 1px solid rgba(46, 60, 92, 0.45);
}
.table-list .table-row:last-child { border-bottom: 0; }
.leaderboard-block li.me { color: #ffe09a; font-weight: 700; }
.table-row span:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .lb-grid { grid-template-columns: 44px 60px minmax(0, 1fr) 98px; gap: 6px; }
  .recent-grid { grid-template-columns: 58px minmax(0, 1fr) 80px 70px; gap: 6px; }
  .table-head { font-size: 10px; }
}

#submitResultCard {
  width: 100%;
  border: 1px solid #236642;
  background: #173626;
  color: #acf2cd;
  border-radius: 10px;
  padding: 10px 12px;
}
.technical { display:block; }
.technical summary { cursor: pointer; color:#c7d3ef; font-size:13px; }

@media (max-width: 900px) {
  .panel.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body { padding: 10px; }
  .wallet-control {
    top: 10px;
    right: 10px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
  .panel.metrics { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr 1fr; gap: 8px; position: sticky; top: 6px; z-index: 5; }
  .live-metric { padding: 8px 10px; }
  .live-metric strong { font-size: 11px; margin-bottom: 4px; }
  #score,
  #gameTimer { font-size: 30px; }
}