:root {
  --bg: var(--bg-muted);
  --tile-size: 88px;
  --gap: 10px;
  --grid-padding: 10px;
  --tile-shadow: 0 10px 18px rgb(0 0 0 / 8%);
  --tile-border-width: 6px;
  --tile-border-color: rgb(255 255 255 / 35%);
  --tile-radius: 50%;
}

/* Page-specific wallpaper override: let theme.css apply this page's wallpaper via --wallpaper-url */
.game-area {
  --wallpaper-url: url('./assets/toan-canh-nui-cam.opt.webp');
  --wallpaper-opacity: var(--board-bg-opacity, 0.08);
  --wallpaper-filter: saturate(0.75) brightness(0.96);
}

/* Background opacity helper classes (0..100) to avoid inline styles */
.bg-opacity-0 {
  --board-bg-opacity: 0;
}

.bg-opacity-1 {
  --board-bg-opacity: 0.01;
}

.bg-opacity-2 {
  --board-bg-opacity: 0.02;
}

.bg-opacity-3 {
  --board-bg-opacity: 0.03;
}

.bg-opacity-4 {
  --board-bg-opacity: 0.04;
}

.bg-opacity-5 {
  --board-bg-opacity: 0.05;
}

.bg-opacity-6 {
  --board-bg-opacity: 0.06;
}

.bg-opacity-7 {
  --board-bg-opacity: 0.07;
}

.bg-opacity-8 {
  --board-bg-opacity: 0.08;
}

.bg-opacity-9 {
  --board-bg-opacity: 0.09;
}

.bg-opacity-10 {
  --board-bg-opacity: 0.1;
}

.bg-opacity-11 {
  --board-bg-opacity: 0.11;
}

.bg-opacity-12 {
  --board-bg-opacity: 0.12;
}

.bg-opacity-13 {
  --board-bg-opacity: 0.13;
}

.bg-opacity-14 {
  --board-bg-opacity: 0.14;
}

.bg-opacity-15 {
  --board-bg-opacity: 0.15;
}

.bg-opacity-16 {
  --board-bg-opacity: 0.16;
}

.bg-opacity-17 {
  --board-bg-opacity: 0.17;
}

.bg-opacity-18 {
  --board-bg-opacity: 0.18;
}

.bg-opacity-19 {
  --board-bg-opacity: 0.19;
}

.bg-opacity-20 {
  --board-bg-opacity: 0.2;
}

.bg-opacity-21 {
  --board-bg-opacity: 0.21;
}

.bg-opacity-22 {
  --board-bg-opacity: 0.22;
}

.bg-opacity-23 {
  --board-bg-opacity: 0.23;
}

.bg-opacity-24 {
  --board-bg-opacity: 0.24;
}

.bg-opacity-25 {
  --board-bg-opacity: 0.25;
}

.bg-opacity-26 {
  --board-bg-opacity: 0.26;
}

.bg-opacity-27 {
  --board-bg-opacity: 0.27;
}

.bg-opacity-28 {
  --board-bg-opacity: 0.28;
}

.bg-opacity-29 {
  --board-bg-opacity: 0.29;
}

.bg-opacity-30 {
  --board-bg-opacity: 0.3;
}

.bg-opacity-31 {
  --board-bg-opacity: 0.31;
}

.bg-opacity-32 {
  --board-bg-opacity: 0.32;
}

.bg-opacity-33 {
  --board-bg-opacity: 0.33;
}

.bg-opacity-34 {
  --board-bg-opacity: 0.34;
}

.bg-opacity-35 {
  --board-bg-opacity: 0.35;
}

.bg-opacity-36 {
  --board-bg-opacity: 0.36;
}

.bg-opacity-37 {
  --board-bg-opacity: 0.37;
}

.bg-opacity-38 {
  --board-bg-opacity: 0.38;
}

.bg-opacity-39 {
  --board-bg-opacity: 0.39;
}

.bg-opacity-40 {
  --board-bg-opacity: 0.4;
}

.bg-opacity-41 {
  --board-bg-opacity: 0.41;
}

.bg-opacity-42 {
  --board-bg-opacity: 0.42;
}

.bg-opacity-43 {
  --board-bg-opacity: 0.43;
}

.bg-opacity-44 {
  --board-bg-opacity: 0.44;
}

.bg-opacity-45 {
  --board-bg-opacity: 0.45;
}

.bg-opacity-46 {
  --board-bg-opacity: 0.46;
}

.bg-opacity-47 {
  --board-bg-opacity: 0.47;
}

.bg-opacity-48 {
  --board-bg-opacity: 0.48;
}

.bg-opacity-49 {
  --board-bg-opacity: 0.49;
}

.bg-opacity-50 {
  --board-bg-opacity: 0.5;
}

.bg-opacity-51 {
  --board-bg-opacity: 0.51;
}

.bg-opacity-52 {
  --board-bg-opacity: 0.52;
}

.bg-opacity-53 {
  --board-bg-opacity: 0.53;
}

.bg-opacity-54 {
  --board-bg-opacity: 0.54;
}

.bg-opacity-55 {
  --board-bg-opacity: 0.55;
}

.bg-opacity-56 {
  --board-bg-opacity: 0.56;
}

.bg-opacity-57 {
  --board-bg-opacity: 0.57;
}

.bg-opacity-58 {
  --board-bg-opacity: 0.58;
}

.bg-opacity-59 {
  --board-bg-opacity: 0.59;
}

.bg-opacity-60 {
  --board-bg-opacity: 0.6;
}

.bg-opacity-61 {
  --board-bg-opacity: 0.61;
}

.bg-opacity-62 {
  --board-bg-opacity: 0.62;
}

.bg-opacity-63 {
  --board-bg-opacity: 0.63;
}

.bg-opacity-64 {
  --board-bg-opacity: 0.64;
}

.bg-opacity-65 {
  --board-bg-opacity: 0.65;
}

.bg-opacity-66 {
  --board-bg-opacity: 0.66;
}

.bg-opacity-67 {
  --board-bg-opacity: 0.67;
}

.bg-opacity-68 {
  --board-bg-opacity: 0.68;
}

.bg-opacity-69 {
  --board-bg-opacity: 0.69;
}

.bg-opacity-70 {
  --board-bg-opacity: 0.7;
}

.bg-opacity-71 {
  --board-bg-opacity: 0.71;
}

.bg-opacity-72 {
  --board-bg-opacity: 0.72;
}

.bg-opacity-73 {
  --board-bg-opacity: 0.73;
}

.bg-opacity-74 {
  --board-bg-opacity: 0.74;
}

.bg-opacity-75 {
  --board-bg-opacity: 0.75;
}

.bg-opacity-76 {
  --board-bg-opacity: 0.76;
}

.bg-opacity-77 {
  --board-bg-opacity: 0.77;
}

.bg-opacity-78 {
  --board-bg-opacity: 0.78;
}

.bg-opacity-79 {
  --board-bg-opacity: 0.79;
}

.bg-opacity-80 {
  --board-bg-opacity: 0.8;
}

.bg-opacity-81 {
  --board-bg-opacity: 0.81;
}

.bg-opacity-82 {
  --board-bg-opacity: 0.82;
}

.bg-opacity-83 {
  --board-bg-opacity: 0.83;
}

.bg-opacity-84 {
  --board-bg-opacity: 0.84;
}

.bg-opacity-85 {
  --board-bg-opacity: 0.85;
}

.bg-opacity-86 {
  --board-bg-opacity: 0.86;
}

.bg-opacity-87 {
  --board-bg-opacity: 0.87;
}

.bg-opacity-88 {
  --board-bg-opacity: 0.88;
}

.bg-opacity-89 {
  --board-bg-opacity: 0.89;
}

.bg-opacity-90 {
  --board-bg-opacity: 0.9;
}

.bg-opacity-91 {
  --board-bg-opacity: 0.91;
}

.bg-opacity-92 {
  --board-bg-opacity: 0.92;
}

.bg-opacity-93 {
  --board-bg-opacity: 0.93;
}

.bg-opacity-94 {
  --board-bg-opacity: 0.94;
}

.bg-opacity-95 {
  --board-bg-opacity: 0.95;
}

.bg-opacity-96 {
  --board-bg-opacity: 0.96;
}

.bg-opacity-97 {
  --board-bg-opacity: 0.97;
}

.bg-opacity-98 {
  --board-bg-opacity: 0.98;
}

.bg-opacity-99 {
  --board-bg-opacity: 0.99;
}

.bg-opacity-100 {
  --board-bg-opacity: 1;
}

/* Grid column count helper classes (avoid inline style writes) */
.cols-4 {
  --cols: 4;
}

.cols-5 {
  --cols: 5;
}

.cols-6 {
  --cols: 6;
}

/* Minimal utility classes required by game JS (kept local to this page) */
.hidden {
  display: none !important;
}

.show-flex {
  display: flex !important;
}

.show-block {
  display: block !important;
}

.show-inline-flex {
  display: inline-flex !important;
}

/* Page background: keep the page background color but do not forcibly remove
  decorative wallpapers defined globally - allow global watermark to show. */
html,
body {
  background: var(--bg) !important;
}

* {
  box-sizing: border-box;
  font-family: Inter, system-ui, Arial;
}

/* Game page safeguards: prevent horizontal overflow and ensure overlays are subtle */
html,
body {
  overflow-x: hidden;
}

.board-wrap::before {
  opacity: 0.06 !important;
}

#splash {
  max-width: 100%;
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: #153;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(90deg, var(--white), #eef);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 60;
}

.game-header h1 {
  margin: 0;
  font-size: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-inline {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border-weak);
  background: var(--surface-bg);
}

/* Two-line title styling */
.game-header h1 {
  line-height: 1.05;
}

.game-header h1 .title-line1 {
  display: block;
  font-size: 16px;
  color: #2b7a4a;
  font-weight: 700;
}

.game-header h1 .title-line2 {
  display: block;
  font-size: 20px;
  color: #153;
  font-weight: 800;
}

.controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.controls button {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-weak);
  background-color: var(--surface-bg);
  cursor: pointer;
}

.score {
  font-weight: 700;
  margin-left: 8px;
}

.game-help {
  position: absolute;
  right: 20px;
  top: 60px;
  z-index: 70;
}

.game-help button {
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: visible;
  z-index: 71;
}

/* Persistent background toggle in header */

/* persistent header background toggle removed */

/* Animated multicolor border for help button */
.game-help button::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  background: conic-gradient(
    from 0deg,
    #ff4d4d,
    #ffa64d,
    #ffe14d,
    #8bff4d,
    #4dffec,
    #4da6ff,
    #b84dff,
    #ff4d4d
  );
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  transform-origin: center;
  animation: rotateBorder 3s linear infinite;

  /* use mask to show only border ring */
  mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
  mask-composite: xor;
  mask-composite: exclude;
}

.game-help button:hover::before,
.game-help button:focus::before {
  opacity: 1;
}

/* apply same animated border to inline help button in header */
.help-inline {
  position: relative;
}

.help-inline::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  background: conic-gradient(
    from 0deg,
    #ff4d4d,
    #ffa64d,
    #ffe14d,
    #8bff4d,
    #4dffec,
    #4da6ff,
    #b84dff,
    #ff4d4d
  );
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  transform-origin: center;
  animation: rotateBorder 3s linear infinite;
  mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
  mask-composite: xor;
  mask-composite: exclude;
}

.help-inline:hover::before,
.help-inline:focus::before {
  opacity: 1;
}

@keyframes rotateBorder {
  to {
    transform: rotate(360deg);
  }
}

.menu-toggle {
  display: none;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-weak);
  background: var(--surface-bg);
  cursor: pointer;
}

.modal-content label {
  display: block;
  margin: 8px 0;
}

.modal-content select,
.modal-content input {
  margin-left: 8px;
}

.controls button#undoBtn {
  background: #fffbe6;
}

.game-area {
  position: relative;
  padding: 12px;
  min-height: 520px;
}

/* Constrain background art so it doesn't overflow */
.bg-art {
  display: none !important;
}

@media (width <= 1000px) {
  .bg-art {
    width: 92%;
    height: 220px;
    background-size: 60% auto;
    background-position: center top;
  }
}

/* Responsive: stack header and make grid scale to viewport on narrow screens */
@media (width <= 720px) {
  .game-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }

  .header-left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .controls {
    order: 2;
    width: 100%;
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .controls.open {
    display: flex;
  }

  .controls button {
    flex: 1 1 auto;
    min-width: 48px;
  }

  /* On narrow screens the preview will be relocated into the play-panel;
      keep the original side panel hidden to avoid leaving an empty column. */
  .side-panel {
    display: none !important;
  }

  .board-wrap {
    padding-top: 12px;
  }

  /* make tiles scale to available viewport width so grid fits horizontally */
  .grid {
    grid-template-columns: repeat(var(--cols), calc((100vw - 32px) / var(--cols)));
    width: calc(100vw - 32px);
    padding: 8px;
  }

  .cell {
    width: calc((100vw - 32px) / var(--cols));
    height: calc((100vw - 32px) / var(--cols));
  }

  .drop-controls {
    justify-content: center;
    flex-wrap: wrap;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .board-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Layout tweaks for the "next preview" area on mobile: show items left-to-right
     and the score to the right. Position arrow under the upcoming (leftmost) slot. */
  .next-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background: var(--surface-opaque);
    border-radius: 8px;
  }

  .next-slots-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  .next-slots {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }

  .tile-slot.small {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
  }

  .tile-slot.small img {
    border-radius: 6px;
  }

  .tile-slot.small {
    border-radius: 50%;
  }

  .tile-slot.small img {
    border-radius: 50%;
  }

  /* When the textual heading is hidden, the score header becomes the visual heading */
  .next-header {
    margin-left: 0;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 12px;
  }

  .next-header .score-inline {
    font-size: 16px;
  }

  .next-arrow {
    position: absolute;
    left: auto;
    bottom: -8px;
    transform: translateX(-50%);
    order: 3;
    pointer-events: none;
    z-index: 12;
  }

  .next-arrow::before {
    transform: none;
  }

  .next-arrow.mobile::before {
    animation: arrow-bounce-horizontal 900ms ease-in-out infinite;
  }

  @keyframes arrow-bounce-horizontal {
    0% {
      transform: translateX(0) translateY(0);
    }

    50% {
      transform: translateX(6px) translateY(0);
    }

    100% {
      transform: translateX(0) translateY(0);
    }
  }

  /* Reduce vertical gap between the two title lines on narrow screens */
  .game-header h1 .title-line1 {
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 1;
  }

  .game-header h1 .title-line2 {
    font-size: 18px;
    line-height: 1;
  }
}

/* When the preview is moved into the play-panel on mobile, make it span
   the full play area width and sit above the drop-controls. */
@media (width <= 720px) {
  .play-panel > .next-preview {
    width: calc(100% - 24px);
    max-width: 100%;
    align-self: stretch;
    margin-bottom: 8px;
  }

  .play-panel > .next-preview .next-slots {
    align-items: center;
  }

  /* Ensure the preview slots are horizontal when the preview is placed
     into the play-panel on mobile. This block is placed after default
     rules to guarantee it wins the cascade. */
  .next-slots-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  .next-slots {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }
}

/* splash overlay styles */
.splash-media {
  position: relative;
  width: 80%;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
  background: var(--black);
}

#splash {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200000;
}

.splash-media {
  position: relative;
  width: 80%;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgb(0 0 0 / 35%);
  background: var(--black);
  z-index: 200001;
}

.splash-media video,
.splash-media img {
  display: block;
  width: 100%;
  height: auto;
}

.splash-media video {
  pointer-events: none;
}

.splash-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 200010;
  padding: 14px 22px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffe8a8, #ffd07a);
  font-weight: 800;
  border: 2px solid rgb(0 0 0 / 8%);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.splash-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
}

/* subtle pulse to draw attention */
.splash-play.pulse {
  animation: pulse-cta 2000ms infinite;
}

@keyframes pulse-cta {
  0% {
    box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
  }

  50% {
    box-shadow: 0 18px 36px rgb(0 0 0 / 26%);
  }

  100% {
    box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
  }
}

/* responsive tweaks: smaller on mobile */
@media (width <= 640px) {
  .splash-media {
    width: 92%;
    max-width: 420px;
  }

  .splash-play {
    padding: 10px 16px;
    font-size: 15px;
  }
}

.board-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

/* Subtle panorama background for the play area.
   Uses ./assets/toan-canh-nui-cam.webp and applies a gentle tint/desaturation
   so the background is unobtrusive and comfortable for long play sessions. */
.board-wrap::before {
  /* allow the centralized theme watermark to show through the play area
     (theme.css applies the wallpaper using --wallpaper-url / --wallpaper-opacity) */
  pointer-events: none;
  display: block;
}

.game-area.bg-off::before {
  display: none !important;
}

.board-wrap > * {
  position: relative;
  z-index: 2;
}

.play-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.drop-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.drop-controls button {
  width: var(--tile-size);
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border-weak);
  background-color: var(--surface-opaque);
  cursor: pointer;
}

.drop-controls button.pressed {
  transform: translateY(1px);
  box-shadow: none;
  opacity: 0.98;
}

.grid {
  display: grid;
  gap: var(--gap);
  background: transparent;
  padding: var(--grid-padding);
  border-radius: 12px;
  position: relative;
  align-items: stretch;
}

/* make columns responsive: allow columns to shrink to fit container while
   still respecting a preferred --tile-size maximum. This prevents very
   large tiles on wide screens and keeps a usable layout when JS is
   unavailable. */
.grid {
  grid-template-columns: repeat(
    var(--cols),
    minmax(
      48px,
      calc((100% - (var(--cols) - 1) * var(--gap) - (var(--grid-padding) * 2)) / var(--cols))
    )
  );
  width: 100%;
  max-width: calc(var(--cols) * (var(--tile-size) + var(--gap)) + (var(--grid-padding) * 2));
}

.cell {
  width: 100%;
  aspect-ratio: 1/1;
  max-width: var(--tile-size);
  max-height: var(--tile-size);
  background: var(--surface-opaque);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
  position: relative;
  overflow: hidden;
}

.cell {
  cursor: pointer;
}

.side-panel {
  width: 160px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.next-preview {
  background: var(--surface-opaque);
  padding: 12px;
  border-radius: 8px;
}

.next-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tile-slot {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tile-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tile-slot,
.tile {
  aspect-ratio: 1/1;
}

.tile-slot.small {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}

.tile-slot.small img {
  border-radius: 50%;
}

.next-slots-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Show preview above drop-controls in play-panel on larger screens too */
.play-panel > .next-preview {
  width: calc(100% - 24px);
  max-width: 100%;
  align-self: stretch;
  margin-bottom: 8px;
}

.play-panel > .next-preview .next-slots {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.play-panel > .next-preview .next-slots-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Desktop: make the preview match mobile's horizontal layout and remove textual heading
  so the score sits to the left and upcoming tiles are highlighted left-to-right. */
@media (width >= 721px) {
  .next-preview h4 {
    display: none;
  }

  .next-preview {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .next-header {
    order: 0;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .next-slots-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  .next-slots {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }

  .next-slots .tile-slot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
  }

  .next-slots .tile-slot img {
    border-radius: 50%;
    transition: opacity 220ms ease, transform 220ms ease;
  }

  /* Provide a baseline left-to-right fade (upcoming should be most visible).
    JS will also set opacities dynamically; this keeps a sensible fallback. */
  .next-slots .tile-slot:nth-child(1) img {
    opacity: 1;
  }

  .next-slots .tile-slot:nth-child(2) img {
    opacity: 0.75;
  }

  .next-slots .tile-slot:nth-child(3) img {
    opacity: 0.5;
  }

  .next-arrow {
    bottom: -8px;
  }
}

.next-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.score-inline {
  font-weight: 800;
  color: #2b7a4a;
}

.next-arrow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 12;
}

.next-arrow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #2b7a4a;
  border-radius: 2px;
  display: block;
  opacity: 0.92;
}

.next-arrow.active::before {
  animation: arrow-bounce 900ms ease-in-out infinite;
}

@keyframes arrow-bounce {
  0% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(6px);
  }

  100% {
    transform: translateX(-50%) translateY(0);
  }
}

/* Partial fade for the top-most preview slot: fade upward (top 25% fades)
   - show the lower 75% fully and smoothly fade the top 25% toward transparency */
.partial-preview {
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 100%) 80%,
    rgb(0 0 0 / 100%) 100%
  );
}

.hold-slot {
  display: none !important;
}

.combo-preview {
  display: none !important;
}

#holdSlot {
  display: none !important;
}

.hold-slot button {
  padding: 6px 8px;
  border-radius: 6px;
}

.cell.focused {
  outline: 3px solid rgb(50 120 90 / 25%);
  box-shadow: 0 8px 20px rgb(50 120 90 / 8%);
  transform: translateY(-4px);
}

.tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
  overflow: hidden;
  border: none !important;
  box-shadow: var(--tile-shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

.tile.merge {
  animation: merge-pop 260ms ease-out;
}

.tile.to-remove {
  transform: scale(0.3) rotate(-8deg);
  opacity: 0;
  transition: transform 260ms ease-in, opacity 260ms ease-in;
}

.tile.will-merge {
  box-shadow: 0 16px 40px rgb(255 200 80 / 22%);
  transform: translateY(-8px) scale(1.02);
  transition: transform 220ms ease-out;
}

.tile.landed {
  animation: land-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes land-pop {
  0% {
    transform: translateY(-8px) scale(0.96);
  }

  60% {
    transform: translateY(2px) scale(1.06);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

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

  50% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.board-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.board-wrap.canvas-mode .cell .tile {
  display: none;
}

.physics-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* effect canvases used for celebrations/confetti */
.effect-canvas-absolute {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 120;
}

.effect-canvas-fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10080;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 42%);
  z-index: 10050;
  padding: 20px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  min-height: 100vh;
}

.modal .modal-content {
  background-color: var(--surface-opaque);
  padding: 18px;
  border-radius: 8px;
  min-width: 0;
  max-width: 520px;
  width: 100%;
  box-sizing: border-box;
  z-index: 10060;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin: auto;
  position: relative;
  transform: none;
}

.modal.show-flex,
.modal.show-block,
.modal[style*="display: flex"],
.modal[style*="display:flex"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Compact reload warning styling */
#reloadWarningModal .modal-content {
  max-width: 460px;
  padding: 12px;
  text-align: left;
}

#reloadWarningModal .modal-actions {
  justify-content: flex-end;
  gap: 8px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.game-footer {
  padding: 8px 20px;
  color: var(--muted);
}

.help-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0;
}

.help-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-bg);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 6%);
  width: 100%;
  max-width: 520px;
}

.help-level-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgb(0 0 0 / 6%);
  box-shadow: 0 6px 14px rgb(0 0 0 / 8%);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.help-level-img:focus {
  outline: 3px solid rgb(42 157 244 / 18%);
}

.help-level-img:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
}

.help-level-img.cannot-merge {
  animation: shake 360ms ease-in-out;
}

.help-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.help-title {
  font-size: 18px;
  font-weight: 800;
  color: #2b7a4a;
  margin-bottom: 6px;
}

.help-desc {
  font-size: 13px;
  color: var(--muted);
}

.help-flyer {
  position: fixed;
  left: var(--hf-left, 0);
  top: var(--hf-top, 0);
  width: var(--hf-w, 48px);
  height: var(--hf-h, 48px);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 28%);
  pointer-events: none;
  transform-origin: center;
  z-index: 10060; /* above modals (10050) so help animation is visible */
}

@media (width <= 720px) {
  /* Ensure the next-slots are horizontal on mobile regardless of earlier rules */
  .next-preview .next-slots {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    align-items: center;
  }

  .next-preview .next-slots-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  /* Position arrow absolute inside the wrapper and allow JS to set left */
  .next-preview .next-arrow {
    position: absolute;
    bottom: -8px;
    left: 0;
    transform: translateX(0);
  }
}

.how-to-title {
  font-size: 16px;
  color: #2b7a4a;
  font-weight: 800;
  margin-top: 12px;
  margin-bottom: 8px;
}

.help-scale {
  transform: scale(1.04);
}

/* Toast notifications */
#toastContainer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10090;
  pointer-events: none;
  max-width: 320px;
}

.game-toast {
  pointer-events: auto;
  background: var(--surface-bg);
  box-shadow: var(--surface-shadow);
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 700;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}

.game-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure page-specific wallpaper sits beneath content */

/* Keep z-index at 0 so theme-level pseudo-element and html background
  layering remain visible; don't push the wallpaper beneath the html/body
  backgrounds which can hide it. Also ensure it does not capture pointer events. */
body.general-bg::before {
  z-index: 0 !important;
  pointer-events: none;
}

/* When preview is placed in the side-panel keep it compact and aligned */
.side-panel > .next-preview {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 8px;
}

.side-panel .next-slots {
  flex-direction: row;
  justify-content: flex-end;
}

.side-panel .next-header {
  justify-content: flex-start;
  margin-bottom: 6px;
}

/* tile colors by level */
.lvl-1 {
  background: #7fc97f;
}

.lvl-2 {
  background: #beaed4;
}

.lvl-3 {
  background: #fdc086;
}

.lvl-4 {
  background: #ff9;
  color: var(--text);
}

.lvl-5 {
  background: #386cb0;
}

.lvl-6 {
  background: #f0027f;
}

.lvl-7 {
  background: #f0a830;
}

/* Final-level tile: keep circular appearance consistent with other tiles */
.tile.lvl-7 {
  border: none;
  border-radius: var(--tile-radius);
  overflow: hidden;
}

.tile.lvl-7 img {
  border-radius: var(--tile-radius);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (width <= 640px) {
  :root {
    --tile-size: 64px;
  }
}

/* Mobile: force grid cells to remain perfect squares and tiles circular */
@media (width <= 720px) {
  .grid {
    width: calc(100vw - 32px) !important;
    grid-template-columns: repeat(var(--cols), 1fr) !important;
    grid-auto-rows: 1fr;
  }

  .cell {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0;
    overflow: hidden;
  }

  .tile,
  .tile-slot,
  .tile-slot.small {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .tile img,
  .tile-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block;
  }
}

/* combo/chain UI */
.combo-preview {
  background: var(--surface-opaque);
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
  text-align: left;
}

.combo-slot {
  font-size: 20px;
  font-weight: 800;
  color: #2b7a4a;
}

.combo {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%) scale(0.8);
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, #fff4cc, #ffdba8);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  font-weight: 800;
  color: #2b5a2a;
  display: none;
  z-index: 60;
}

.combo.show {
  display: block;
  animation: combo-pop 700ms ease-out;
}

@keyframes combo-pop {
  0% {
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
  }

  50% {
    transform: translateX(-50%) scale(1.06);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

/* small score pop when merging */
.score-pop {
  position: absolute;
  font-weight: 800;
  color: var(--text);
  pointer-events: none;
  z-index: 60;
  animation: score-pop 900ms ease-out;
}

@keyframes score-pop {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  60% {
    transform: translateY(-26px) scale(1.12);
    opacity: 1;
  }

  100% {
    transform: translateY(-46px) scale(1);
    opacity: 0;
  }
}

/* center score-pop on cell using pos-xc/pos-yc and translate centering */
.score-pop {
  transform: translate(-50%, -50%);
}

.pos-xc-0 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 0 +
      var(--tile-size) * 0.5
  );
}

.pos-xc-1 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 1 +
      var(--tile-size) * 0.5
  );
}

.pos-xc-2 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 2 +
      var(--tile-size) * 0.5
  );
}

.pos-xc-3 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 3 +
      var(--tile-size) * 0.5
  );
}

.pos-xc-4 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 4 +
      var(--tile-size) * 0.5
  );
}

.pos-xc-5 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 5 +
      var(--tile-size) * 0.5
  );
}

.pos-yc-0 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 0 +
      var(--tile-size) * 0.5
  );
}

.pos-yc-1 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 1 +
      var(--tile-size) * 0.5
  );
}

.pos-yc-2 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 2 +
      var(--tile-size) * 0.5
  );
}

.pos-yc-3 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 3 +
      var(--tile-size) * 0.5
  );
}

.pos-yc-4 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 4 +
      var(--tile-size) * 0.5
  );
}

.pos-yc-5 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 5 +
      var(--tile-size) * 0.5
  );
}

/* New rule to be appended */
.pos-y-6 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 6 +
      var(--tile-size) * 0.5
  );
}

/* floating tile during drop animation */
.tile.floating {
  position: absolute;
  box-shadow: 0 18px 40px rgb(0 0 0 / 25%);
  border-radius: 50%;
  z-index: 40;
  pointer-events: none;
  transform: translateY(0);
}

/* Position helpers (computed from --tile-size, --gap and overlay offsets) */
.pos-x-0 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 0
  );
}

.pos-x-1 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 1
  );
}

.pos-x-2 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 2
  );
}

.pos-x-3 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 3
  );
}

.pos-x-4 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 4
  );
}

.pos-x-5 {
  left: calc(
    var(--grid-offset-left, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 5
  );
}

.pos-y-0 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 0
  );
}

.pos-y-1 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 1
  );
}

.pos-y-2 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 2
  );
}

.pos-y-3 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 3
  );
}

.pos-y-4 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 4
  );
}

.pos-y-5 {
  top: calc(
    var(--grid-offset-top, 0px) + var(--grid-padding) + (var(--tile-size) + var(--gap)) * 5
  );
}

/* shake feedback for full column */
.drop-controls .shake {
  animation: shake 320ms ease-in-out;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  50% {
    transform: translateX(6px);
  }

  75% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0);
  }
}

/* --- Fixes: ensure header/control interactivity and visible grid tiles --- */

/* Put header above any effect canvases and ensure it accepts pointer events */
.game-header {
  position: relative !important;
  z-index: 100150 !important;
  pointer-events: auto !important;
}

.controls,
.controls button {
  pointer-events: auto !important;
  position: relative;
  z-index: 100151 !important;
}

/* Ensure board pseudo-element doesn't cover interactive content */
.board-wrap::before {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Make cells visually obvious if canvas rendering fails */
.grid {
  min-height: calc(var(--tile-size, 88px) * var(--cols, 5));
}

.cell {
  background: var(--surface-opaque) !important;
  border: 1px solid rgb(0 0 0 / 6%) !important;
}

/* Disable rotating multicolor border around help button (reduces visual noise)
   and remove any accidental pointer overlay from the pseudo-element. */
.help-inline::before,
.game-help button::before {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile interaction and tile sizing fixes */

/* Ensure the hamburger/menu toggle is always tappable on narrow screens */
.menu-toggle {
  position: relative !important;
  z-index: 200500 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.game-header .menu-toggle,
.game-header > .controls button,
.game-header .header-left > button {
  -webkit-tap-highlight-color: rgb(0 0 0 / 6%);
  tap-highlight-color: rgb(0 0 0 / 6%);
}

/* Force grid cells to be exact squares using the computed --tile-size so
   images inside remain perfectly circular (object-fit:cover + border-radius:50%). */
.grid {
  grid-auto-rows: var(--tile-size);
}

.cell {
  width: var(--tile-size) !important;
  height: var(--tile-size) !important;
  max-width: var(--tile-size) !important;
  max-height: var(--tile-size) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Make the tile element fill its cell completely (touch the cell edges)
   and remove the visual border so item artwork sits flush with the cell. */
.tile {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

.tile img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
}

@media (width <= 720px) {
  /* On small screens, make the hamburger larger and easier to tap */
  .menu-toggle {
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }
}

/* 2026 large-screen refinement pass */
.game-header {
  background: color-mix(in srgb, var(--surface-opaque, #fff) 88%, transparent) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.controls button,
.help-inline,
.menu-toggle,
.drop-controls button {
  min-height: 42px;
  font-weight: 800;
}

.side-panel > .next-preview,
.play-panel > .next-preview {
  box-shadow: 0 12px 30px rgb(0 0 0 / 8%);
}

.modal .modal-content {
  box-shadow: 0 22px 60px rgb(0 0 0 / 22%);
}

.help-gallery {
  max-height: min(52vh, 460px);
  overflow: auto;
  padding-right: 4px;
}

@media (width <= 720px) {
  .game-area {
    padding: 8px;
    min-height: calc(100vh - 120px);
  }

  .controls button {
    min-width: 140px;
  }

  .modal .modal-content {
    max-height: calc(100vh - 28px);
  }

  .game-footer {
    display: none;
  }
}

/* Thay thuộc tính style="" nội tuyến (CSP không có 'unsafe-inline') */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-nhan-manh {
  color: red;
}