:root {
  --board-bg: #bbada0;
  --cell-bg: rgba(238, 228, 218, 0.35);
  --text-dark: #776e65;
  --text-light: #f9f6f2;
  --gap: 12px;
  --cell-size: 100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8ef;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--text-dark);
  padding: 16px;
}

.container {
  width: 100%;
  max-width: 480px;
}

.back-to-top {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #8f7a66;
  text-decoration: none;
}

.back-to-top:hover {
  text-decoration: underline;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

h1 {
  font-size: 48px;
  margin: 0;
  color: #776e65;
  font-weight: 800;
}

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

.score-box {
  position: relative;
  background: var(--board-bg);
  border-radius: 6px;
  padding: 8px 16px;
  text-align: center;
  color: var(--text-light);
  min-width: 64px;
}

.score-delta {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.score-delta.positive { color: #4caf50; }
.score-delta.negative { color: #ff5b5b; }

.score-delta.pop-up {
  animation: score-float 0.8s ease-out forwards;
}

@keyframes score-float {
  0% { opacity: 0; transform: translate(-50%, 4px) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, -8px) scale(1.05); }
  80% { opacity: 1; transform: translate(-50%, -26px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}

.score-box .label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.score-box span:last-child {
  font-size: 20px;
  font-weight: 700;
}

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

.top-bar-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.rules-btn {
  background: #f2b179;
  color: var(--text-light);
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.rules-btn:hover { background: #f5a35f; }

.hint {
  font-size: 13px;
  color: #776e65;
  margin: 0;
  line-height: 1.4;
}

#new-game {
  flex-shrink: 0;
  background: #8f7a66;
  color: var(--text-light);
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

#new-game:hover { background: #9c8a76; }

.board-wrap {
  position: relative;
  background: var(--board-bg);
  border-radius: 8px;
  padding: var(--gap);
  touch-action: none;
  user-select: none;
}

.grid-bg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.grid-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--cell-bg);
  border-radius: 6px;
}

.tile-container {
  position: absolute;
  inset: var(--gap);
}

.tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  font-size: 32px;
  color: var(--text-dark);
  background: #eee4da;
  transition: top 0.13s ease-in-out, left 0.13s ease-in-out, opacity 0.13s ease-in-out;
}

.tile.tile-vanish {
  z-index: 6;
  animation: vanish-burst 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.tile.tile-vanish::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 241, 173, 0.95) 0%, rgba(255, 193, 7, 0.65) 40%, rgba(255, 87, 34, 0) 75%);
  pointer-events: none;
  animation: vanish-ring 0.42s ease-out forwards;
}

@keyframes vanish-burst {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1) saturate(1); opacity: 1; }
  20% { transform: scale(1.4) rotate(-8deg); filter: brightness(1.9) saturate(1.8); opacity: 1; }
  55% { transform: scale(1.1) rotate(6deg); filter: brightness(1.5) saturate(1.4); opacity: 1; }
  100% { transform: scale(0.15) rotate(16deg); filter: brightness(2.2) saturate(2); opacity: 0; }
}

@keyframes vanish-ring {
  0% { opacity: 0.9; transform: scale(0.6); }
  60% { opacity: 0.5; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(2.6); }
}

@keyframes bomb-consume {
  0% { transform: scale(1); opacity: 1; filter: brightness(1) saturate(1); }
  30% { transform: scale(1.1); opacity: 1; filter: brightness(2.4) saturate(0.4); }
  100% { transform: scale(0.25); opacity: 0; filter: brightness(0.3) saturate(0); }
}

/* Joker-consumed tiles: spun and sucked into a little purple vortex. */
.tile.tile-vanish-joker {
  z-index: 6;
  animation: joker-vanish 0.5s ease-in forwards;
}

.tile.tile-vanish-joker::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 190, 255, 0.9) 0%, rgba(156, 39, 176, 0.6) 45%, rgba(103, 58, 183, 0) 75%);
  pointer-events: none;
  animation: joker-ring 0.5s ease-out forwards;
}

@keyframes joker-vanish {
  0% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1) saturate(1); }
  35% { transform: scale(1.15) rotate(140deg); opacity: 1; filter: brightness(1.3) saturate(1.4); }
  100% { transform: scale(0.05) rotate(420deg); opacity: 0; filter: brightness(0.6) saturate(1.6); }
}

@keyframes joker-ring {
  0% { opacity: 0.9; transform: scale(0.5) rotate(0deg); }
  100% { opacity: 0; transform: scale(2.2) rotate(180deg); }
}

/* Bomberman-style plus-shaped fireball. */
.bomb-blast {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}

.blast-flame {
  position: absolute;
  border-radius: 8px;
  background: radial-gradient(circle, #fff9c4 0%, #ffca28 35%, #ff7043 62%, #d84315 82%, rgba(216, 67, 21, 0) 100%);
  transform: scale(0.2);
  opacity: 0;
  animation: blast-flame-anim 0.5s ease-out forwards;
}

.blast-flame.blast-center {
  background: radial-gradient(circle, #ffffff 0%, #fff59d 30%, #ffca28 55%, #ff5722 78%, rgba(255, 87, 34, 0) 100%);
  z-index: 2;
}

@keyframes blast-flame-anim {
  0% { transform: scale(0.15); opacity: 0; }
  25% { transform: scale(1.05); opacity: 1; }
  55% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}

.tile.tile-bonus {
  box-shadow: 0 0 0 2px #ffd700 inset, 0 0 10px 2px rgba(255, 215, 0, 0.55);
}

.tile.tile-bonus::after {
  content: "\2605";
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 13px;
  color: #d4a300;
}

.tile.tile-joker {
  background: #6c5b7b !important;
  color: #f9f6f2 !important;
  font-size: 34px;
}

.tile.tile-bomb {
  background: #3a3a3a !important;
  color: #f9f6f2;
  font-size: 28px;
  cursor: pointer;
  animation: bomb-pulse 1.1s ease-in-out infinite;
}

.tile.tile-bomb:hover {
  filter: brightness(1.25);
}

@keyframes bomb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 60, 40, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(220, 60, 40, 0); }
}

/* Bomb-consumed tiles: quick searing flash, swallowed by the blast overlay.
   Declared after .tile-bomb so this wins the `animation` shorthand fight
   against bomb-pulse when both classes are present on the same element. */
.tile.tile-vanish-bomb {
  z-index: 6;
  animation: bomb-consume 0.32s ease-in forwards;
}

.tile.tile-new {
  animation: pop 0.18s ease;
}

.tile.tile-merged {
  animation: pop-merge 0.16s ease-in-out;
}

@keyframes pop {
  0% { transform: scale(0); }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes pop-merge {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.merge-fx {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 30;
}

.merge-fx .spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px currentColor;
  animation-name: spark-fly;
  animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1);
  animation-fill-mode: forwards;
}

.merge-fx .spark.spark-glyph {
  width: auto;
  height: auto;
  margin: -9px 0 0 -6px;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 800;
  background: none !important;
}

@keyframes spark-fly {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  30% { transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.4)) scale(1.3); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.merge-fx .merge-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 215, 0, 0.7) 45%, rgba(255, 87, 34, 0) 75%);
  animation-name: flash-pulse;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes flash-pulse {
  0% { transform: scale(0.3); opacity: 0.9; }
  40% { transform: scale(var(--flash-scale)); opacity: 0.7; }
  100% { transform: scale(calc(var(--flash-scale) * 1.15)); opacity: 0; }
}

.board-wrap.shake {
  animation: board-shake 0.4s ease-in-out;
}

@keyframes board-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, 4px); }
  80% { transform: translate(4px, -3px); }
}

.tile[data-value="2"] { background: #eee4da; color: #776e65; }
.tile[data-value="4"] { background: #ede0c8; color: #776e65; }
.tile[data-value="8"] { background: #f2b179; color: #f9f6f2; }
.tile[data-value="16"] { background: #f59563; color: #f9f6f2; }
.tile[data-value="32"] { background: #f67c5f; color: #f9f6f2; }
.tile[data-value="64"] { background: #f65e3b; color: #f9f6f2; }
.tile[data-value="128"] { background: #edcf72; color: #f9f6f2; font-size: 28px; }
.tile[data-value="256"] { background: #edcc61; color: #f9f6f2; font-size: 28px; }
.tile[data-value="512"] { background: #edc850; color: #f9f6f2; font-size: 28px; }
.tile[data-value="1024"] { background: #edc53f; color: #f9f6f2; font-size: 22px; }
.tile[data-value="2048"] { background: #edc22e; color: #f9f6f2; font-size: 22px; box-shadow: 0 0 24px 4px rgba(243, 215, 116, 0.8); }

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(238, 228, 218, 0.73);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay.hidden { display: none; }

.overlay-message {
  text-align: center;
}

#overlay-text {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 16px;
}

#try-again {
  background: #8f7a66;
  color: var(--text-light);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

#try-again:hover { background: #9c8a76; }

.player-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.player-bar label {
  font-size: 13px;
  font-weight: 700;
  color: #776e65;
  flex-shrink: 0;
}

.player-bar input {
  flex: 1;
  max-width: 220px;
  padding: 8px 10px;
  border: 2px solid #bbada0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #776e65;
  background: #f7f2ea;
}

.player-bar input:focus {
  outline: none;
  border-color: #f2b179;
}

.ranking-panel {
  margin-top: 20px;
  background: var(--board-bg);
  border-radius: 8px;
  padding: 16px;
  color: var(--text-light);
}

.ranking-panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 700;
}

.ranking-row .rank-num {
  width: 22px;
  text-align: center;
  opacity: 0.85;
}

.ranking-row .rank-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-row .rank-score {
  font-weight: 800;
}

.ranking-row.rank-gold { background: rgba(255, 215, 0, 0.3); }
.ranking-row.rank-silver { background: rgba(224, 224, 224, 0.3); }
.ranking-row.rank-bronze { background: rgba(205, 127, 50, 0.3); }

.ranking-status {
  font-size: 13px;
  opacity: 0.85;
  margin: 8px 0 0;
}

.ranking-status.hidden { display: none; }

.rules-modal {
  position: fixed;
  inset: 0;
  background: rgba(58, 46, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  z-index: 100;
}

.rules-modal.hidden { display: none; }

.rules-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 96vh;
  overflow-y: auto;
  background: #faf8ef;
  border-radius: 16px;
  padding: 14px 14px 10px;
}

.rules-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #eee4da;
  color: #776e65;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.rules-close:hover { background: #e0d4c4; }

.rules-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #776e65;
}

.rule-section {
  margin-bottom: 8px;
}

.rule-section h3 {
  margin: 0 0 2px;
  font-size: 12.5px;
  color: #776e65;
}

.rule-section p {
  margin: 0 0 4px;
  font-size: 11px;
  color: #8b8078;
  line-height: 1.3;
}

.demo-strip {
  position: relative;
  height: 40px;
  background: var(--board-bg);
  border-radius: 6px;
  overflow: hidden;
}

.demo-strip .tile {
  width: 34px;
  height: 34px;
  top: 3px;
  font-size: 13px;
  border-radius: 4px;
}

.demo-strip.demo-strip-cross {
  height: 122px;
}

.demo-strip.demo-strip-cross .tile {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.demo-pair {
  display: flex;
  gap: 8px;
}

.demo-col {
  flex: 1;
  min-width: 0;
}

.demo-caption {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #8b8078;
  margin-bottom: 2px;
  text-align: center;
}

.name-prompt-modal {
  position: fixed;
  inset: 0;
  background: rgba(58, 46, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 120;
}

.name-prompt-modal.hidden { display: none; }

.name-prompt-panel {
  width: 100%;
  max-width: 300px;
  background: #faf8ef;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

.name-prompt-text {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #776e65;
}

.name-prompt-panel input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 2px solid #bbada0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #776e65;
  background: #f7f2ea;
  margin-bottom: 14px;
}

.name-prompt-panel input:focus {
  outline: none;
  border-color: #f2b179;
}

.name-prompt-buttons {
  display: flex;
  gap: 8px;
}

.name-prompt-buttons button {
  flex: 1;
  padding: 10px 6px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.name-prompt-skip {
  background: #eee4da;
  color: #8b8078;
}

.name-prompt-skip:hover { background: #e0d4c4; }

.name-prompt-submit {
  background: #f2b179;
  color: #fff;
}

.name-prompt-submit:hover { background: #f5a35f; }

@media (max-width: 420px) {
  h1 { font-size: 36px; }
  .tile { font-size: 24px; }
  .tile[data-value="128"], .tile[data-value="256"], .tile[data-value="512"] { font-size: 20px; }
  .tile[data-value="1024"], .tile[data-value="2048"] { font-size: 16px; }
}