/*
  Forge Merge visual system
  -------------------------
  The UI uses a single material language: charcoal forge smoke, blue-grey
  stone, aged metal, and molten gold. Layout remains CSS-native so the board
  and its existing JavaScript-driven tile motion stay responsive.
*/

:root {
  --ink: #10131a;
  --charcoal: #171b24;
  --smoke: #252c39;
  --stone: #2e3746;
  --stone-deep: #202834;
  --slate: #455166;
  --gold: #e5a23a;
  --gold-bright: #f5c968;
  --ember: #bd5b24;
  --ember-deep: #743018;
  --text: #f0ece3;
  --text-soft: #c0c7d0;
  --text-muted: #8390a1;
  --focus: #f7ce75;
  --board-max: 36rem;
  --board-size: min(92vw, max(5rem, calc(100dvh - 20rem)), var(--board-max));
  --tile-gap: clamp(0.3rem, 1.35vmin, 0.8rem);
  --tile-radius: clamp(0.38rem, 1.2vmin, 0.72rem);
  --board-border: 0.125rem;
  --page-padding: clamp(0.5rem, 1.8vmin, 1.5rem);
  --safe-top: max(var(--page-padding), env(safe-area-inset-top));
  --safe-right: max(var(--page-padding), env(safe-area-inset-right));
  --safe-bottom: max(var(--page-padding), env(safe-area-inset-bottom));
  --safe-left: max(var(--page-padding), env(safe-area-inset-left));
}

* {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  background: var(--ink);
}

body {
  min-block-size: 100dvh;
  margin: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 72% 48% at 50% -10%, rgba(86, 105, 137, 0.21), transparent 70%),
    radial-gradient(ellipse 60% 45% at 8% 105%, rgba(109, 53, 28, 0.18), transparent 72%),
    linear-gradient(150deg, #1d2430 0%, var(--charcoal) 44%, #141820 100%);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.75rem, 1.35vmin, 1rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient detail is intentionally quiet: it establishes a forge, not a backdrop. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  opacity: 0.46;
  background:
    radial-gradient(circle at 16% 27%, rgba(241, 166, 71, 0.28) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 84% 19%, rgba(241, 166, 71, 0.18) 0 0.06rem, transparent 0.1rem),
    radial-gradient(circle at 74% 72%, rgba(241, 166, 71, 0.18) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 27% 81%, rgba(241, 166, 71, 0.13) 0 0.05rem, transparent 0.09rem);
  animation: ember-drift 16s ease-in-out infinite alternate;
}

body::after {
  background: radial-gradient(ellipse at center, transparent 34%, rgba(7, 9, 13, 0.44) 100%);
}

button {
  font: inherit;
}

button,
.game-container {
  -webkit-tap-highlight-color: transparent;
}

.game-wrapper {
  inline-size: min(100%, 70rem);
  min-block-size: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.15vmin, 0.85rem);
}

/* Header: an intentionally weighted lockup, with compact HUD equipment offset to the right. */
.game-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  margin-block-end: clamp(0.1rem, 0.9vmin, 0.55rem);
}

.brand-lockup {
  padding-block-start: clamp(0.15rem, 0.8vmin, 0.45rem);
}

.forge-kicker,
.section-kicker {
  margin: 0;
  color: var(--gold-bright);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.54rem, 1.08vmin, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.forge-kicker {
  margin-inline-start: 0.2em;
  margin-block-end: clamp(0.18rem, 0.7vmin, 0.38rem);
  color: #9da9b9;
}

.title {
  margin: 0;
  color: var(--text);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.78rem, 4.35vmin, 3.65rem);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 0.94;
  text-shadow: 0 0.12em 0 rgba(8, 10, 14, 0.85), 0 0.22em 0.5em rgba(0, 0, 0, 0.38);
  text-wrap: balance;
}

.game-hud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.35rem, 1vmin, 0.65rem);
  min-inline-size: min(100%, 13.5rem);
}

.scores-container {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.35rem, 1vmin, 0.65rem);
}

/* Scores are small engraved plaques rather than generic content cards. */
.score-container,
.best-container {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  min-block-size: 2.75rem;
  padding: 0.32rem clamp(0.48rem, 1.35vmin, 0.9rem) 0.28rem;
  border: 0.0625rem solid rgba(211, 183, 128, 0.4);
  border-radius: 0.36rem 0.7rem 0.48rem 0.62rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 38%),
    linear-gradient(180deg, #3f4a5d, #283140 78%);
  color: var(--text);
  font-size: clamp(0.92rem, 2.1vmin, 1.25rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: 0 0.22rem 0.55rem rgba(4, 7, 12, 0.32), inset 0 0.0625rem rgba(255, 255, 255, 0.14), inset 0 -0.17rem 0.28rem rgba(7, 10, 16, 0.5);
}

.best-container {
  border-radius: 0.7rem 0.36rem 0.62rem 0.48rem;
}

.score-container::after,
.best-container::after {
  align-self: end;
  color: #b9c0c9;
  content: "Score";
  font-size: clamp(0.5rem, 1.08vmin, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.best-container::after {
  content: "Best";
}

.score-addition {
  position: absolute;
  inset-inline-end: 0.32rem;
  inset-block-start: -0.4rem;
  color: var(--gold-bright);
  font-size: clamp(0.75rem, 1.8vmin, 1rem);
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 0.2rem 0.45rem rgba(0, 0, 0, 0.6);
  animation: score-rise 600ms ease-out both;
}

.controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1vmin, 0.65rem);
  justify-self: end;
}

/* Buttons have a forged edge, a warm lip, and a short tactile press response. */
.restart-button,
.retry-button,
.keep-playing-button {
  min-block-size: 2.75rem;
  padding-inline: clamp(0.85rem, 2.1vmin, 1.3rem);
  border: 0.0625rem solid #f0b451;
  border-radius: 0.72rem 0.4rem 0.66rem 0.46rem;
  background:
    linear-gradient(180deg, rgba(255, 239, 183, 0.3), transparent 29%),
    linear-gradient(180deg, #c96d2c, var(--ember-deep));
  color: #fff2d2;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: clamp(0.7rem, 1.55vmin, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 0.0625rem rgba(57, 18, 7, 0.8);
  text-transform: uppercase;
  box-shadow: 0 0.18rem 0 #542114, 0 0.65rem 1.1rem rgba(120, 47, 20, 0.28), inset 0 0.0625rem rgba(255, 246, 211, 0.35);
  transition: box-shadow 120ms ease-out, filter 120ms ease-out, transform 120ms ease-out;
}

.restart-button:hover,
.retry-button:hover,
.keep-playing-button:hover {
  filter: brightness(1.12);
  box-shadow: 0 0.12rem 0 #542114, 0 0 1.35rem rgba(242, 149, 54, 0.46), inset 0 0.0625rem rgba(255, 246, 211, 0.45);
}

.restart-button:active,
.retry-button:active,
.keep-playing-button:active {
  transform: translateY(0.12rem);
  box-shadow: 0 0.06rem 0 #542114, 0 0.3rem 0.75rem rgba(120, 47, 20, 0.26), inset 0 0.0625rem rgba(255, 246, 211, 0.22);
}

.sound-toggle {
  display: grid;
  flex: 0 0 2.75rem;
  min-block-size: 2.75rem;
  place-items: center;
  padding: 0;
  border: 0.0625rem solid #708094;
  border-radius: 0.42rem 0.64rem 0.42rem 0.7rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%),
    linear-gradient(180deg, #3d485b, #262f3d);
  color: #e8e0cd;
  cursor: pointer;
  font-size: clamp(1rem, 2.3vmin, 1.3rem);
  box-shadow: 0 0.16rem 0 #18202b, inset 0 0.0625rem rgba(255, 255, 255, 0.15);
  transition: filter 120ms ease-out, transform 120ms ease-out;
}

.sound-toggle:hover {
  filter: brightness(1.16);
}

.sound-toggle:active {
  transform: translateY(0.1rem);
}

.sound-toggle[aria-pressed="true"] {
  border-color: #a86153;
  background: linear-gradient(135deg, rgba(255, 236, 212, 0.12), transparent 42%), linear-gradient(180deg, #673c42, #35232c);
  color: #ffd6c3;
}

button:focus-visible,
.game-container:focus-visible {
  outline: 0.16rem solid var(--focus);
  outline-offset: 0.2rem;
}

/* The board is the hero: a layered forge-table frame with a recessed working surface. */
.game-stage {
  display: grid;
  place-items: center;
  margin-block-start: clamp(0.15rem, 0.7vmin, 0.45rem);
}

.game-container {
  --play-area-size: calc(var(--board-size) - var(--tile-gap) - var(--tile-gap) - var(--board-border) - var(--board-border));
  --tile-size: calc((var(--play-area-size) - var(--tile-gap) - var(--tile-gap) - var(--tile-gap)) / 4);
  --tile-step: calc(var(--tile-size) + var(--tile-gap));
  inline-size: var(--board-size);
  aspect-ratio: 1 / 1;
  padding: var(--tile-gap);
  display: grid;
  position: relative;
  border: var(--board-border) solid #718096;
  border-radius: 1.05rem 1.45rem 1.16rem 1.35rem;
  background:
    linear-gradient(135deg, rgba(255, 239, 201, 0.18), transparent 17%),
    linear-gradient(145deg, #526078 0%, #303a4b 16%, #202835 54%, #18202b 100%);
  box-shadow: 0 1.35rem 2.5rem rgba(3, 6, 11, 0.56), 0 0 0 0.18rem rgba(122, 77, 40, 0.12), inset 0 0.11rem 0 rgba(245, 231, 192, 0.25), inset 0 -0.4rem 0.9rem rgba(4, 8, 13, 0.72);
  cursor: default;
  touch-action: none;
  user-select: none;
  animation: board-arrive 250ms ease-out both;
}

.game-container::before,
.game-container::after {
  content: "";
  grid-area: 1 / 1;
  pointer-events: none;
}

.game-container::before {
  z-index: 0;
  border: 0.0625rem solid rgba(232, 194, 121, 0.24);
  border-radius: calc(var(--tile-radius) + 0.38rem) calc(var(--tile-radius) + 0.56rem) calc(var(--tile-radius) + 0.4rem) calc(var(--tile-radius) + 0.5rem);
  box-shadow: inset 0 0 1.2rem rgba(3, 6, 10, 0.66);
}

.game-container::after {
  z-index: 3;
  border-block-start: 0.0625rem solid rgba(255, 231, 173, 0.15);
  border-inline-start: 0.0625rem solid rgba(255, 231, 173, 0.09);
  border-radius: inherit;
}

.grid-container,
.tile-container,
.game-message {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
}

.grid-container {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--tile-gap);
}

.grid-cell {
  aspect-ratio: 1 / 1;
  border: 0.0625rem solid rgba(174, 192, 211, 0.08);
  border-radius: var(--tile-radius) calc(var(--tile-radius) + 0.18rem) var(--tile-radius) calc(var(--tile-radius) + 0.12rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 38%),
    linear-gradient(145deg, #2c3647, #202837);
  box-shadow: inset 0 0.24rem 0.55rem rgba(4, 8, 14, 0.68), inset 0 0.0625rem rgba(172, 188, 206, 0.08);
}

.grid-cell:nth-child(4n + 1),
.grid-cell:nth-child(4n) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 38%), linear-gradient(145deg, #303a4c, #202837);
}

/* The tile layer is the one intentional absolute-position context: it preserves the existing movement code. */
.tile-container {
  z-index: 2;
  position: relative;
  pointer-events: none;
}

.tile {
  position: absolute;
  inline-size: var(--tile-size);
  block-size: var(--tile-size);
  container-type: inline-size;
  transition: transform 100ms ease-in-out;
}

.tile .tile-inner {
  inline-size: 100%;
  block-size: 100%;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  border: 0.0625rem solid rgba(244, 236, 212, 0.22);
  border-radius: calc(var(--tile-radius) + 0.08rem) var(--tile-radius) calc(var(--tile-radius) + 0.15rem) var(--tile-radius);
  color: transparent;
  font-size: 0;
  box-shadow: 0 0.32rem 0.7rem rgba(3, 6, 12, 0.33), inset 0 0.1rem rgba(255, 255, 255, 0.16), inset 0 -0.22rem 0.45rem rgba(3, 5, 9, 0.2);
  transition: box-shadow 150ms ease-out, filter 150ms ease-out;
}

.tile .tile-inner::before {
  content: "";
  position: absolute;
  inset: clamp(0.16rem, 5cqi, 0.42rem);
  z-index: 0;
  border: 0.0625rem solid rgba(255, 243, 214, 0.14);
  border-radius: calc(var(--tile-radius) - 0.08rem) calc(var(--tile-radius) - 0.16rem) calc(var(--tile-radius) - 0.03rem) calc(var(--tile-radius) - 0.16rem);
  box-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.16);
}

.tile .tile-inner::after {
  z-index: 1;
  display: block;
  color: initial;
  font-size: min(3.55rem, 54cqi);
  line-height: 1;
  filter: drop-shadow(0 0.17rem 0.22rem rgba(4, 7, 12, 0.58));
}

.tile.tile-dagger .tile-inner { background: linear-gradient(145deg, #77859b, #455268); }
.tile.tile-dagger .tile-inner::after { content: "🗡️"; }
.tile.tile-sword .tile-inner { background: linear-gradient(145deg, #96a7b2, #667783); }
.tile.tile-sword .tile-inner::after { content: "⚔️"; }
.tile.tile-axe .tile-inner { background: linear-gradient(145deg, #b9784e, #754333); }
.tile.tile-axe .tile-inner::after { content: "🪓"; }
.tile.tile-shield .tile-inner { background: linear-gradient(145deg, #3f668c, #253b5e); }
.tile.tile-shield .tile-inner::after { content: "🛡️"; }
.tile.tile-crown .tile-inner { background: linear-gradient(145deg, #4d856d, #285543); }
.tile.tile-crown .tile-inner::after { content: "👑"; }
.tile.tile-potion .tile-inner { background: linear-gradient(145deg, #76527f, #472f59); }
.tile.tile-potion .tile-inner::after { content: "🔮"; }
.tile.tile-wizard .tile-inner { background: linear-gradient(145deg, #397b8c, #24525f); }
.tile.tile-wizard .tile-inner::after { content: "🪄"; }
.tile.tile-trident .tile-inner { background: linear-gradient(145deg, #9b4a48, #5f2a35); }
.tile.tile-trident .tile-inner::after { content: "🔱"; }
.tile.tile-staff .tile-inner { background: linear-gradient(145deg, #645b91, #3e3967); }
.tile.tile-staff .tile-inner::after { content: "🧙"; }
.tile.tile-medallion .tile-inner { background: linear-gradient(145deg, #b77a32, #75471b); }
.tile.tile-medallion .tile-inner::after { content: "🏅"; }
.tile.tile-trophy .tile-inner { background: linear-gradient(145deg, #a3733b, #65421e); }
.tile.tile-trophy .tile-inner::after { content: "🏆"; }
.tile.tile-super .tile-inner { background: linear-gradient(145deg, #5c5661, #292a31); }
.tile.tile-super .tile-inner::after { content: "✨"; }

.tile.tile-position-1-1 { transform: translate(0, 0); }
.tile.tile-position-1-2 { transform: translate(0, var(--tile-step)); }
.tile.tile-position-1-3 { transform: translate(0, calc(var(--tile-step) + var(--tile-step))); }
.tile.tile-position-1-4 { transform: translate(0, calc(var(--tile-step) + var(--tile-step) + var(--tile-step))); }
.tile.tile-position-2-1 { transform: translate(var(--tile-step), 0); }
.tile.tile-position-2-2 { transform: translate(var(--tile-step), var(--tile-step)); }
.tile.tile-position-2-3 { transform: translate(var(--tile-step), calc(var(--tile-step) + var(--tile-step))); }
.tile.tile-position-2-4 { transform: translate(var(--tile-step), calc(var(--tile-step) + var(--tile-step) + var(--tile-step))); }
.tile.tile-position-3-1 { transform: translate(calc(var(--tile-step) + var(--tile-step)), 0); }
.tile.tile-position-3-2 { transform: translate(calc(var(--tile-step) + var(--tile-step)), var(--tile-step)); }
.tile.tile-position-3-3 { transform: translate(calc(var(--tile-step) + var(--tile-step)), calc(var(--tile-step) + var(--tile-step))); }
.tile.tile-position-3-4 { transform: translate(calc(var(--tile-step) + var(--tile-step)), calc(var(--tile-step) + var(--tile-step) + var(--tile-step))); }
.tile.tile-position-4-1 { transform: translate(calc(var(--tile-step) + var(--tile-step) + var(--tile-step)), 0); }
.tile.tile-position-4-2 { transform: translate(calc(var(--tile-step) + var(--tile-step) + var(--tile-step)), var(--tile-step)); }
.tile.tile-position-4-3 { transform: translate(calc(var(--tile-step) + var(--tile-step) + var(--tile-step)), calc(var(--tile-step) + var(--tile-step))); }
.tile.tile-position-4-4 { transform: translate(calc(var(--tile-step) + var(--tile-step) + var(--tile-step)), calc(var(--tile-step) + var(--tile-step) + var(--tile-step))); }

/* End states remain readable, and the replay actions stay anchored to the forge-table edge. */
.game-message {
  z-index: 5;
  display: none;
  align-items: stretch;
  justify-items: center;
  padding: var(--tile-gap);
  border-radius: calc(var(--tile-radius) + 0.42rem) calc(var(--tile-radius) + 0.54rem) calc(var(--tile-radius) + 0.36rem) calc(var(--tile-radius) + 0.5rem);
  background: radial-gradient(circle at 50% 38%, rgba(60, 69, 86, 0.68), rgba(12, 15, 21, 0.88) 74%);
  text-align: center;
}

.game-message.game-won,
.game-message.game-over {
  display: grid;
}

.message-card {
  inline-size: min(100%, 24rem);
  block-size: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(0.5rem, 1.8vmin, 1rem);
}

.game-message p {
  align-self: center;
  margin: 0;
  color: #fff0c7;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 3.4vmin, 2.05rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0.15rem 0.45rem rgba(0, 0, 0, 0.66);
  text-wrap: balance;
}

.lower {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding-block-start: clamp(0.35rem, 1.2vmin, 0.75rem);
}

.keep-playing-button {
  display: none;
}

.game-won .keep-playing-button {
  display: inline-block;
}

/* Supporting content is deliberately quiet and split into real game-information sections. */
.tutorial {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.7fr) minmax(0, 2.3fr);
  align-items: start;
  gap: clamp(0.55rem, 1.8vmin, 1.25rem);
  margin-block-start: clamp(0.4rem, 1.45vmin, 1rem);
  color: var(--text-soft);
  font-size: clamp(0.65rem, 1.28vmin, 0.84rem);
  line-height: 1.42;
}

.tutorial-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vmin, 1.1rem);
}

.tutorial p,
.game-footer p {
  margin: 0;
}

.game-intro {
  color: var(--text);
  font-weight: 600;
}

.game-explanation strong {
  color: var(--gold-bright);
  font-weight: 700;
}

.game-explanation .important {
  display: none;
}

.important {
  color: var(--gold-bright);
  font-weight: 800;
  text-transform: uppercase;
}

.game-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(10rem, 0.8fr);
  gap: clamp(0.8rem, 2.6vmin, 2rem);
  margin-block-start: clamp(0.08rem, 0.55vmin, 0.35rem);
  padding-block-start: clamp(0.45rem, 1.2vmin, 0.8rem);
  border-block-start: 0.0625rem solid rgba(186, 166, 125, 0.24);
  color: var(--text-muted);
  font-size: clamp(0.59rem, 1.14vmin, 0.76rem);
  line-height: 1.35;
}

.footer-note,
.footer-credits {
  display: grid;
  gap: 0.22rem;
}

.footer-credits {
  justify-items: end;
  text-align: end;
}

.footer-note .section-kicker,
.footer-credits .section-kicker {
  color: #9da9b9;
  font-size: clamp(0.5rem, 0.98vmin, 0.6rem);
}

.platform-banner {
  display: none;
  align-self: center;
  padding: 0.28rem 0.65rem;
  border: 0.0625rem solid rgba(212, 180, 118, 0.24);
  border-radius: 0.3rem 0.55rem 0.35rem 0.5rem;
  color: var(--text-muted);
  font-size: clamp(0.58rem, 1.08vmin, 0.7rem);
}

#pg-pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--page-padding);
  background: rgba(12, 15, 21, 0.78);
}

.pause-card {
  padding: clamp(0.9rem, 3vmin, 1.5rem) clamp(1.3rem, 4vmin, 2.1rem);
  border: 0.0625rem solid rgba(240, 204, 130, 0.52);
  border-radius: 0.8rem 1.05rem 0.8rem 0.95rem;
  background: linear-gradient(145deg, #3e485b, #222b38);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.58), inset 0 0.0625rem rgba(255, 255, 255, 0.15);
  color: var(--text);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2.5vmin, 1.4rem);
  font-weight: 700;
}

.use-icons .tile .tile-inner::after {
  content: none;
}

.use-icons .tile .tile-inner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 57%;
}

.use-icons .tile.tile-dagger .tile-inner { background-image: url("assets/icons/weapon-1.svg"); }
.use-icons .tile.tile-sword .tile-inner { background-image: url("assets/icons/weapon-2.svg"); }
.use-icons .tile.tile-axe .tile-inner { background-image: url("assets/icons/weapon-3.svg"); }
.use-icons .tile.tile-shield .tile-inner { background-image: url("assets/icons/weapon-4.svg"); }
.use-icons .tile.tile-crown .tile-inner { background-image: url("assets/icons/weapon-5.svg"); }
.use-icons .tile.tile-potion .tile-inner { background-image: url("assets/icons/weapon-6.svg"); }
.use-icons .tile.tile-wizard .tile-inner { background-image: url("assets/icons/weapon-7.svg"); }
.use-icons .tile.tile-trident .tile-inner { background-image: url("assets/icons/weapon-8.svg"); }
.use-icons .tile.tile-staff .tile-inner { background-image: url("assets/icons/weapon-9.svg"); }
.use-icons .tile.tile-medallion .tile-inner { background-image: url("assets/icons/weapon-10.svg"); }
.use-icons .tile.tile-trophy .tile-inner { background-image: url("assets/icons/weapon-11.svg"); }

@keyframes ember-drift {
  from { transform: translate3d(-0.45rem, 0.2rem, 0); }
  to { transform: translate3d(0.65rem, -0.5rem, 0); }
}

@keyframes board-arrive {
  from { opacity: 0; transform: translateY(0.55rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes score-rise {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-1.8rem); }
}

/* These two keyframes are retained for the existing tile spawn and merge feedback. */
@keyframes appear {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

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

.tile-new .tile-inner { animation: appear 220ms ease 80ms both; }
.tile-merged .tile-inner { animation: pop 200ms ease both; }

@media (max-width: 40rem) {
  :root {
    --board-size: min(92vw, max(5rem, calc(100dvh - 21.25rem)), var(--board-max));
  }

  .game-header {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.45rem, 1.4vmin, 0.75rem);
  }

  .game-hud {
    inline-size: 100%;
  }

  .controls {
    justify-self: stretch;
  }

  .restart-button {
    flex: 1 1 auto;
    inline-size: auto;
  }

  .tutorial,
  .game-footer {
    grid-template-columns: 1fr;
  }

  .tutorial {
    gap: 0.24rem;
  }

  .tutorial-copy {
    gap: 0.22rem;
  }

  .footer-credits {
    justify-items: start;
    text-align: start;
  }
}

/* Short embeds retain every control and text section, but compact their ornamental elements. */
@media (max-height: 24rem) {
  :root {
    --board-size: min(78vw, max(4rem, calc(100dvh - 16rem)), 22rem);
  }

  .game-wrapper {
    gap: 0.2rem;
  }

  .game-header {
    flex-direction: row;
    align-items: start;
    gap: 0.3rem;
    margin-block-end: 0;
  }

  .brand-lockup {
    flex: 0 0 auto;
    padding-block-start: 0.1rem;
  }

  .forge-kicker,
  .section-kicker {
    display: none;
  }

  .title {
    font-size: clamp(1.1rem, 6.8vw, 1.38rem);
    white-space: nowrap;
  }

  .game-hud {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: 0;
    gap: 0.2rem;
  }

  .scores-container,
  .controls {
    gap: 0.2rem;
  }

  .score-container,
  .best-container {
    min-block-size: 2rem;
    padding-inline: 0.2rem;
  }

  .sound-toggle,
  .restart-button,
  .retry-button,
  .keep-playing-button {
    min-block-size: 2.75rem;
  }

  .tutorial,
  .game-footer {
    margin-block-start: 0;
    padding-block-start: 0.12rem;
    gap: 0.08rem;
    font-size: 0.53rem;
    line-height: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}