/* ====== Minecraft 2048 ====== */

:root {
  --cell-size: min(90px, 14vh, 22vw);
  --gap: 12px;
  --board-pad: 14px;
  --board-size: calc(var(--cell-size) * 4 + var(--gap) * 5);
  --radius: 4px;

  /* Minecraft palette */
  --grass-top: #7cba4c;
  --grass-dark: #5d9239;
  --dirt: #8b5a2b;
  --dirt-dark: #6b4220;
  --dirt-darker: #4a2d14;
  --stone: #828282;
  --stone-dark: #555;
  --wood: #b08552;
  --wood-dark: #6e4a23;

  --tile-bg: #c0a070;
  --tile-border-light: #d8c090;
  --tile-border-dark: #6e4a23;

  --text-dark: #2a1d10;
  --text-light: #f4ead0;

  --sky-top: #6cb6ff;
  --sky-bottom: #b5e0ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'VT323', monospace;
  color: var(--text-light);
  overflow: hidden;            /* 沈浸式：方向鍵 / 滑動都不會捲動頁面 */
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: relative;
  height: 100vh;
  height: 100dvh;
  background: var(--sky-bottom);
}

/* sky + ground background layers */
.sky {
  position: fixed;
  inset: 0 0 40vh 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  z-index: -2;
}
.sky::before {
  /* pixel clouds */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 20%, #fff 0 18px, transparent 19px),
    radial-gradient(circle at 18% 22%, #fff 0 14px, transparent 15px),
    radial-gradient(circle at 70% 14%, #fff 0 22px, transparent 23px),
    radial-gradient(circle at 76% 16%, #fff 0 16px, transparent 17px),
    radial-gradient(circle at 45% 35%, #fff 0 12px, transparent 13px);
  opacity: 0.85;
  image-rendering: pixelated;
  filter: contrast(1.1);
}

.ground {
  position: fixed;
  inset: 60vh 0 0 0;
  z-index: -2;
  background:
    /* grass top strip */
    linear-gradient(180deg, var(--grass-top) 0 26px, var(--grass-dark) 26px 32px, var(--dirt) 32px 100%);
}
.ground::before {
  /* dirt pattern */
  content: "";
  position: absolute;
  inset: 32px 0 0 0;
  background-image:
    radial-gradient(circle at 10px 10px, var(--dirt-dark) 3px, transparent 4px),
    radial-gradient(circle at 30px 50px, var(--dirt-darker) 4px, transparent 5px),
    radial-gradient(circle at 60px 25px, var(--dirt-dark) 3px, transparent 4px),
    radial-gradient(circle at 80px 70px, var(--dirt-darker) 3px, transparent 4px);
  background-size: 100px 100px;
  image-rendering: pixelated;
  opacity: 0.55;
}

/* 背景殭屍 — 站在草地上，會隨合成受擊 */
.mob {
  position: fixed;
  left: max(14px, calc(50% - 430px));
  bottom: 22vh;
  width: 88px;
  z-index: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.35));
}

.mob-hud {
  width: 110px;
  text-align: center;
  margin-bottom: 4px;
}
.mob-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #d7ffbf;
  text-shadow: 1px 1px 0 #000;
  margin-bottom: 3px;
}
.mob-hpbar {
  position: relative;
  height: 13px;
  background: #2a1a10;
  border-top: 2px solid #120a05;
  border-left: 2px solid #120a05;
  border-right: 2px solid #5a3a20;
  border-bottom: 2px solid #5a3a20;
  overflow: hidden;
}
.mob-hpfill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(180deg, #8ddc4a 0%, #5aa630 100%);
  transition: width 0.28s ease-out;
}
.mob-hpfill.low {
  background: linear-gradient(180deg, #e85a4a 0%, #b02d22 100%);
}
.mob-hptext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.mob-kills {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: #ffd864;
  text-shadow: 1px 1px 0 #000;
  margin-top: 2px;
  min-height: 14px;
}

.mob-sprite {
  width: 100%;
}
.mob-sprite svg {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  display: block;
}

/* 頭目 — 體型放大、名稱金光 */
.mob.boss {
  width: 128px;
  left: max(14px, calc(50% - 470px));
}
.mob.boss .mob-hud { width: 150px; }
.mob.boss .mob-name {
  font-size: 11px;
  color: #ffd864;
  text-shadow: 1px 1px 0 #000, 0 0 8px #ffcf3a;
}
.mob.boss .mob-hpfill {
  background: linear-gradient(180deg, #ffcf5a 0%, #e0902a 100%);
}
.mob.boss .mob-hpfill.low {
  background: linear-gradient(180deg, #ff7a4a 0%, #c02d22 100%);
}

/* 受擊 — 紅閃 + 後仰晃動 */
.mob.hurt .mob-sprite {
  animation: mob-hurt 0.3s steps(2, end);
}
@keyframes mob-hurt {
  0%   { transform: translateX(0); filter: none; }
  25%  { transform: translateX(4px) rotate(3deg); filter: brightness(1.6) sepia(1) hue-rotate(-50deg) saturate(4); }
  60%  { transform: translateX(-2px) rotate(-1deg); filter: brightness(1.3) sepia(1) hue-rotate(-50deg) saturate(3); }
  100% { transform: translateX(0); filter: none; }
}

/* 死亡 — 倒下淡出 */
.mob.dead .mob-sprite {
  animation: mob-die 0.62s ease-in forwards;
  transform-origin: bottom center;
}
@keyframes mob-die {
  0%   { transform: rotate(0) translateY(0); opacity: 1; filter: none; }
  40%  { transform: rotate(0) translateY(0); opacity: 1; filter: brightness(1.5) sepia(1) hue-rotate(-50deg) saturate(3); }
  100% { transform: rotate(86deg) translateY(10px); opacity: 0; filter: grayscale(0.6); }
}
.mob.dead .mob-hud { opacity: 0; transition: opacity 0.2s; }

/* 新殭屍登場 */
.mob.spawn .mob-sprite {
  animation: mob-spawn 0.42s ease-out;
}
@keyframes mob-spawn {
  0%   { transform: translateY(-14px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 傷害浮字 */
.mob-popups {
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
}
.mob-dmg {
  position: absolute;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #ff5a4a;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  animation: mob-dmg-float 0.85s ease-out forwards;
}
.mob-dmg.big {
  font-size: 16px;
  color: #ffd24a;
  text-shadow: 2px 2px 0 #000, 0 0 8px #ff5a4a;
}
@keyframes mob-dmg-float {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  25%  { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(0.95); }
}

@media (max-width: 920px) {
  .mob {
    left: auto;
    right: 8px;
    bottom: 8px;
    width: 58px;
    opacity: 0.92;
  }
  .mob-hud { width: 76px; }
  .mob-name { font-size: 7px; }
  .mob-hpbar { height: 11px; }
  .mob-hptext { font-size: 11px; }
  .mob-kills { display: none; }
}

/* main layout — 滿版置中，內容塞進一個畫面不捲動 */
.game {
  width: 540px;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(4px, 1vh, 18px) 16px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* title bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.title {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
  text-shadow: 2px 2px 0 #000, 4px 4px 0 rgba(0,0,0,0.25);
}
.title .title-2 { color: #f0d878; }
.title .title-0 { color: #c0c0c0; }
.title .title-4 { color: #6cd0c8; }
.title .title-8 { color: #b07a4a; }
.subtitle {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
  margin-left: 10px;
  text-shadow: 2px 2px 0 #000;
}

.scores {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.sound-toggle {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: var(--stone);
  border-top: 3px solid #aaa;
  border-left: 3px solid #aaa;
  border-right: 3px solid var(--stone-dark);
  border-bottom: 3px solid var(--stone-dark);
  padding: 0 12px;
  min-width: 44px;
  cursor: pointer;
  transition: filter 0.08s;
}
.sound-toggle:hover  { filter: brightness(1.1); }
.sound-toggle:active {
  border-top-color: var(--stone-dark);
  border-left-color: var(--stone-dark);
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  transform: translate(1px, 1px);
}
.sound-toggle.muted {
  color: #888;
  text-decoration: line-through;
  filter: saturate(0.3);
}

/* 音量滑桿 — 像素風 */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 90px;
  height: 28px;
  margin: 0;
  cursor: pointer;
  padding: 0;
  align-self: center;
}
.volume-slider:focus { outline: none; }

/* track */
.volume-slider::-webkit-slider-runnable-track {
  height: 10px;
  background: #4a4a4a;
  border-top: 2px solid #2a2a2a;
  border-left: 2px solid #2a2a2a;
  border-right: 2px solid #8a8a8a;
  border-bottom: 2px solid #8a8a8a;
}
.volume-slider::-moz-range-track {
  height: 10px;
  background: #4a4a4a;
  border-top: 2px solid #2a2a2a;
  border-left: 2px solid #2a2a2a;
  border-right: 2px solid #8a8a8a;
  border-bottom: 2px solid #8a8a8a;
}

/* thumb — 小綠方塊 */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 22px;
  background: #7cba4c;
  border-top: 2px solid #a3d36f;
  border-left: 2px solid #a3d36f;
  border-right: 2px solid #345718;
  border-bottom: 2px solid #345718;
  margin-top: -8px;
  cursor: pointer;
  border-radius: 0;
}
.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 22px;
  background: #7cba4c;
  border-top: 2px solid #a3d36f;
  border-left: 2px solid #a3d36f;
  border-right: 2px solid #345718;
  border-bottom: 2px solid #345718;
  cursor: pointer;
  border-radius: 0;
}
.volume-slider:disabled { opacity: 0.4; cursor: not-allowed; }
.score-box {
  background: var(--stone);
  border-top: 3px solid #aaa;
  border-left: 3px solid #aaa;
  border-right: 3px solid var(--stone-dark);
  border-bottom: 3px solid var(--stone-dark);
  padding: 6px 12px;
  min-width: 72px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.score-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.9;
  margin-bottom: 2px;
}
.score-value {
  font-size: 24px;
  line-height: 1;
}

/* intro */
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  background: rgba(0,0,0,0.35);
  border-top: 2px solid rgba(255,255,255,0.2);
  border-bottom: 2px solid rgba(0,0,0,0.4);
  padding: 10px 14px;
}
.intro-text {
  margin: 0;
  font-size: 20px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.intro-text strong {
  color: #d895ff;
}

/* Minecraft button */
.mc-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  background: #6b9a3a;
  border-top: 3px solid #a3d36f;
  border-left: 3px solid #a3d36f;
  border-right: 3px solid #345718;
  border-bottom: 3px solid #345718;
  padding: 10px 14px;
  cursor: pointer;
  image-rendering: pixelated;
  transition: filter 0.05s;
}
.mc-btn:hover { filter: brightness(1.08); }
.mc-btn:active {
  border-top-color: #345718;
  border-left-color: #345718;
  border-right-color: #a3d36f;
  border-bottom-color: #a3d36f;
  transform: translate(1px, 1px);
}

/* board */
.board-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  background: var(--dirt-dark);
  border-top: 4px solid #a87038;
  border-left: 4px solid #a87038;
  border-right: 4px solid var(--dirt-darker);
  border-bottom: 4px solid var(--dirt-darker);
  padding: var(--board-pad);
  outline: none;
  touch-action: none;
}

.grid-bg {
  position: absolute;
  inset: var(--board-pad);
  display: grid;
  grid-template-columns: repeat(4, var(--cell-size));
  grid-template-rows: repeat(4, var(--cell-size));
  gap: var(--gap);
}

.cell {
  background: #6b4220;
  border-top: 2px solid #5a371a;
  border-left: 2px solid #5a371a;
  border-right: 2px solid #7d4f26;
  border-bottom: 2px solid #7d4f26;
}

.tiles {
  position: absolute;
  inset: var(--board-pad);
}

/* particle canvas + +分數 浮層 — 都覆蓋在 tile 之上 */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.popups {
  position: absolute;
  inset: var(--board-pad);
  pointer-events: none;
  z-index: 6;
}
.score-popup {
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #ffd864;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  animation: float-up 0.95s cubic-bezier(.2,.7,.3,1) forwards;
  white-space: nowrap;
  transform: translateX(-50%);
}
.score-popup.big {
  font-size: 16px;
  color: #ffe7a8;
  text-shadow: 2px 2px 0 #000, 0 0 8px #ffd864;
}
.score-popup.huge {
  font-size: 20px;
  color: #f0c8ff;
  text-shadow: 2px 2px 0 #000, 0 0 12px #d895ff;
}
@keyframes float-up {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  20%  { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -55px) scale(0.9); }
}

/* 畫面震動 — 大合併時短促，超大合併時更猛 */
@keyframes shake-sm {
  0%, 100% { transform: translate(0,0); }
  20%      { transform: translate(-2px, 1px); }
  40%      { transform: translate( 2px,-1px); }
  60%      { transform: translate(-1px,-2px); }
  80%      { transform: translate( 1px, 2px); }
}
@keyframes shake-lg {
  0%, 100% { transform: translate(0,0) rotate(0); }
  15%      { transform: translate(-4px, 2px) rotate(-0.4deg); }
  30%      { transform: translate( 4px,-3px) rotate( 0.4deg); }
  45%      { transform: translate(-3px,-3px) rotate(-0.3deg); }
  60%      { transform: translate( 3px, 4px) rotate( 0.3deg); }
  75%      { transform: translate(-2px, 2px) rotate( 0); }
}
.board.shake    { animation: shake-sm 0.25s; }
.board.shake-lg { animation: shake-lg 0.45s; }

/* 整版亮閃 — 達成階段 */
@keyframes board-flash {
  0%   { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
  30%  { box-shadow: inset 0 0 60px 10px rgba(255,255,255,0.55); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
}
.board.flash { animation: board-flash 0.45s ease-out; }
.board.flash-purple { animation: board-flash 0.7s ease-out; box-shadow: inset 0 0 60px 10px rgba(216,149,255,0.7); }

/* tile */
.tile {
  position: absolute;
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  transition: transform 120ms ease-in-out;
  will-change: transform;
  overflow: hidden;
}

.tile .tile-icon {
  width: 70%;
  height: 56%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile .tile-icon svg {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.45));
}
.tile .tile-value {
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 4px;
}
.tile .tile-name {
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-top: -2px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

/* tile tiers — each has chiseled Minecraft block look */
.tile[data-tier="1"]  { background: #b08552; border: 3px solid; border-color: #d4a872 #6e4a23 #6e4a23 #d4a872; }
.tile[data-tier="2"]  { background: #8e8e8e; border: 3px solid; border-color: #b9b9b9 #5a5a5a #5a5a5a #b9b9b9; }
.tile[data-tier="3"]  { background: #d8d8d8; border: 3px solid; border-color: #f0f0f0 #888 #888 #f0f0f0; color: #222; text-shadow: 1px 1px 0 #fff; }
.tile[data-tier="4"]  { background: #5cdbd5; border: 3px solid; border-color: #9ff0eb #2a8a86 #2a8a86 #9ff0eb; color: #0e3735; text-shadow: 1px 1px 0 #c6fffb; }
.tile[data-tier="5"]  { background: #5c3c1d; border: 3px solid; border-color: #8e5d2f #2e1c0a #2e1c0a #8e5d2f; }
.tile[data-tier="6"]  { background: #3a8c8c; border: 3px solid; border-color: #6cc0c0 #1e5454 #1e5454 #6cc0c0; }
.tile[data-tier="7"]  { background: #a64141; border: 3px solid; border-color: #d97676 #5c2222 #5c2222 #d97676; }
.tile[data-tier="8"]  { background: #b8b8b8; border: 3px solid; border-color: #e0e0e0 #707070 #707070 #e0e0e0; color: #1a1a1a; text-shadow: 1px 1px 0 #fff; }
.tile[data-tier="9"]  { background: #82ecd9; border: 3px solid; border-color: #b6ffef #3d9482 #3d9482 #b6ffef; color: #0e3735; text-shadow: 1px 1px 0 #d5fff5; }
.tile[data-tier="10"] {
  background: #4a2680;
  border: 3px solid;
  border-color: #7d4abf #28104a #28104a #7d4abf;
  color: #ffe07a;
  text-shadow: 1px 1px 0 #000, 0 0 6px #d895ff;
  animation: enchant 2s linear infinite;
}
.tile[data-tier="11"] {
  background: #2a0d3a;
  border: 3px solid;
  border-color: #6b2e96 #100420 #100420 #6b2e96;
  color: #f0c8ff;
  text-shadow: 1px 1px 0 #000, 0 0 6px #d895ff;
  animation: dragon 2.4s linear infinite;
}

@keyframes enchant {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,149,255,0); }
  50%      { box-shadow: 0 0 14px 2px rgba(216,149,255,0.65); }
}
@keyframes dragon {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(216,149,255,0.5); }
  50%      { box-shadow: 0 0 18px 4px rgba(216,149,255,0.9); }
}

/* tile animations */
.tile.appear {
  animation: pop-in 180ms ease-out;
}
.tile.merged {
  animation: pop-merge 220ms ease-out;
  z-index: 2;
}
@keyframes pop-in {
  0%   { transform: var(--pos) scale(0); }
  60%  { transform: var(--pos) scale(1.15); }
  100% { transform: var(--pos) scale(1); }
}
@keyframes pop-merge {
  0%   { transform: var(--pos) scale(1); }
  50%  { transform: var(--pos) scale(1.22); }
  100% { transform: var(--pos) scale(1); }
}

/* overlay */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: fade-in 250ms ease;
}
.overlay[hidden] { display: none; }
.overlay-inner {
  text-align: center;
  padding: 20px 24px;
  background: var(--dirt);
  border-top: 4px solid #b87a3a;
  border-left: 4px solid #b87a3a;
  border-right: 4px solid var(--dirt-darker);
  border-bottom: 4px solid var(--dirt-darker);
  min-width: 240px;
}
.overlay-inner h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  margin: 0 0 8px;
  color: #ffd864;
  text-shadow: 2px 2px 0 #000;
}
.overlay-inner p {
  font-size: 20px;
  margin: 0 0 16px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* legend / 圖鑑 — 固定在畫面右側的收集欄 */
.legend {
  position: fixed;
  top: 50%;
  right: max(14px, calc(50% - 480px));
  transform: translateY(-50%);
  width: 216px;
  max-height: 94vh;
  overflow-y: auto;
  z-index: 1;
  background: rgba(0,0,0,0.42);
  border-top: 2px solid rgba(255,255,255,0.15);
  border-bottom: 2px solid rgba(0,0,0,0.5);
  padding: 12px 14px;
  scrollbar-width: thin;
}
.legend h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  margin: 0 0 10px;
  color: #ffd864;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
}
.legend-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.legend-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid transparent;
  border-top-color: rgba(255,255,255,0.1);
  border-bottom-color: rgba(0,0,0,0.3);
  padding: 6px 4px;
  text-align: center;
  /* 未解鎖：灰暗剪影，合成到才會亮起來 */
  opacity: 0.4;
  filter: grayscale(0.85) brightness(0.7);
  transition: opacity 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.legend-item.unlocked {
  opacity: 1;
  filter: none;
}
/* 目前合成到的最高階 — 金框微光，常駐凸顯 */
.legend-item.current {
  border-color: #ffd864;
  box-shadow: 0 0 10px 1px rgba(255,216,100,0.55), inset 0 0 8px rgba(255,216,100,0.2);
}
/* 剛剛新解鎖 — 放大金光爆閃 + NEW 標籤 */
.legend-item.just-unlocked {
  animation: legend-unlock 0.95s ease-out;
  z-index: 2;
}
.legend-item.just-unlocked::after {
  content: "NEW!";
  position: absolute;
  top: -8px;
  right: -6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #fff;
  background: #e0902a;
  border: 1px solid #ffd864;
  padding: 2px 3px;
  text-shadow: 1px 1px 0 #000;
  animation: legend-new-tag 0.95s ease-out;
}
/* 又合成一次已解鎖的階 — 輕脈動回饋 */
.legend-item.pulse {
  animation: legend-pulse 0.45s ease-out;
}
@keyframes legend-unlock {
  0%   { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255,216,100,0); }
  25%  { transform: scale(1.28); box-shadow: 0 0 24px 8px rgba(255,233,168,0.95); filter: brightness(1.8); }
  60%  { transform: scale(1.05); box-shadow: 0 0 16px 4px rgba(255,216,100,0.7); }
  100% { transform: scale(1); box-shadow: 0 0 10px 1px rgba(255,216,100,0.55); }
}
@keyframes legend-new-tag {
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  35%  { transform: scale(1.35) rotate(8deg); opacity: 1; }
  60%  { transform: scale(1) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes legend-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); box-shadow: 0 0 14px 3px rgba(255,216,100,0.6); }
  100% { transform: scale(1); }
}
.legend-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legend-icon svg {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.legend-name {
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  line-height: 1.1;
  margin-top: 2px;
}
.legend-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #ffd864;
  margin-top: 2px;
}

.controls {
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-size: 18px;
  margin-top: 14px;
}

/* responsive */
/* 視窗放不下右側欄時：圖鑑回到棋盤下方，頁面恢復可捲動 */
@media (max-width: 1100px) {
  html, body { overflow: auto; height: auto; }
  .game {
    height: auto;
    min-height: 100dvh;
    justify-content: flex-start;
    padding-top: 24px;
    padding-bottom: 40px;
  }
  .legend {
    position: static;
    transform: none;
    right: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 18px 0 14px;
  }
  .legend-list {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
}
@media (max-width: 520px) {
  :root {
    --cell-size: 68px;
    --gap: 9px;
    --board-pad: 10px;
  }
  .title { font-size: 22px; }
  .subtitle { display: none; }
  .intro-text { font-size: 18px; }
  .tile .tile-value { font-size: 10px; }
  .tile .tile-name { font-size: 12px; }
}
@media (max-width: 380px) {
  :root {
    --cell-size: 58px;
    --gap: 7px;
  }
  .title { font-size: 18px; }
}