body {
  font-family: sans-serif;
  background: #111;
  color: #fff;
  text-align: center;
}

:root {
  --tile-size: min(20vw, 80px);
  --gap-size: 10px;
}

#game {
  margin: 12px auto 0;
  width: fit-content;
}


.grid {
  position: relative;
  width: min(90vw, 345px);
  height: min(90vw, 370px);
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  padding: 0px;
  border-radius: 10px;
  z-index: 0;
}


.grid::before {
  content: '';
  position: absolute;
  inset: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  z-index: 0;
}

.grid::before > * {
  background-color: #121212;
  border-radius: 6px;
}

.tile {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: background 0.2s ease;
  width: var(--tile-size);
  height: var(--tile-size);
  background-color: #333;
  font-size: calc(var(--tile-size) / 3);
  font-weight: bold;
  color: white;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

@media (max-width: 500px) {
  :root {
    --tile-size: 60px;
    --gap-size: 6px;
  }
}
/* Score display styling */
#score {
  font-size: 24px;
  font-weight: bold;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Tracker panel for Moves and Min Tile */
#tracker-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  gap: 24px;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  margin: 12px 0;
  backdrop-filter: blur(4px);
}

[data-theme="light"] #tracker-panel {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}


/* Operation selection popup styling */
#op-prompt {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #222;
  color: white;
  padding: 20px;
  border: 2px solid white;
  z-index: 9999;
  font-size: 18px;
}

#op-prompt button {
  background: #444;
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 5px;
  cursor: pointer;
}

#op-prompt button:hover {
  background: #666;
}
.tile-2    { background-color: #eee4da; color: #776e65; }
.tile-4    { background-color: #ede0c8; color: #776e65; }
.tile-8    { background-color: #f2b179; color: white; }
.tile-16   { background-color: #f59563; color: white; }
.tile-32   { background-color: #f67c5f; color: white; }
.tile-64   { background-color: #f65e3b; color: white; }
.tile-128  { background-color: #edcf72; color: white; }
.tile-256  { background-color: #edcc61; color: white; }
.tile-512  { background-color: #edc850; color: white; }
.tile-1024 { background-color: #edc53f; color: white; }
.tile-2048 { background-color: #edc22e; color: white; }

#main-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

#debug-panel {
  min-width: 300px;
}
/* Info box styling with theme support */
#info-box {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: none;
  background-color: var(--info-bg, #2b2b2b);
  color: var(--info-fg, #fff);
  border: 1px solid var(--info-border, #555);
  padding: 16px;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
  font-size: 15px;
  text-align: left;
  line-height: 1.6;
}

#info-box.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

#debug-log {
  font-family: monospace;
  font-size: 13px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  color: black;
  display: none;
}

#debug-panel label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #ccc;
}

#debug-panel button {
  margin-bottom: 10px;
  padding: 4px 10px;
  font-family: monospace;
  cursor: pointer;
}
@keyframes opflash {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.tile-op {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  animation: none;
  font-size: 28px;
  font-weight: bold;
  color: white;
  border-radius: 6px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2);
}

.tile-op.add {
  background: radial-gradient(circle at 30% 30%, #fff9c4, #fbc02d);
  color: #5d4037;
  border: 2px solid #fbc02d;
  box-shadow: inset 0 0 6px #fff9c4, 0 0 6px 2px #fdd835;
}

.tile-op.sub {
  background: radial-gradient(circle at 30% 30%, #ef9a9a, #e53935);
  color: #ffffff;
  border: 2px solid #ef5350;
  box-shadow: inset 0 0 6px #ffcdd2, 0 0 8px 2px #ef5350;
}

.tile-op.mul {
  background: radial-gradient(circle at 30% 30%, #a5d6a7, #388e3c);
  color: #ffffff;
  border: 2px solid #66bb6a;
  box-shadow: inset 0 0 6px #c8e6c9, 0 0 8px 2px #66bb6a;
}

.tile-op.div {
  background: radial-gradient(circle at 30% 30%, #81d4fa, #0288d1);
  color: #ffffff;
  border: 2px solid #42a5f5;
  box-shadow: inset 0 0 6px #b3e5fc, 0 0 8px 2px #42a5f5;
}

@keyframes glowPulseAdd {
  0%, 100% { box-shadow: 0 0 10px 3px rgba(255, 193, 7, 0.35); }
  50%      { box-shadow: 0 0 14px 5px rgba(255, 193, 7, 0.5); }
}
@keyframes glowPulseSub {
  0%, 100% { box-shadow: 0 0 10px 3px rgba(244, 67, 54, 0.35); }
  50%      { box-shadow: 0 0 14px 5px rgba(244, 67, 54, 0.5); }
}
@keyframes glowPulseMul {
  0%, 100% { box-shadow: 0 0 10px 3px rgba(76, 175, 80, 0.35); }
  50%      { box-shadow: 0 0 14px 5px rgba(76, 175, 80, 0.5); }
}
@keyframes glowPulseDiv {
  0%, 100% { box-shadow: 0 0 10px 3px rgba(33, 150, 243, 0.35); }
  50%      { box-shadow: 0 0 14px 5px rgba(33, 150, 243, 0.5); }
}

[data-theme="dark"] .tile-op.add {
  animation: glowPulseAdd 1.2s ease-in-out infinite;
  box-shadow: 0 0 20px 6px rgba(255, 193, 7, 0.4);
}

[data-theme="dark"] .tile-op.sub {
  animation: glowPulseSub 1.2s ease-in-out infinite;
  box-shadow: 0 0 20px 6px rgba(244, 67, 54, 0.4);
}

[data-theme="dark"] .tile-op.mul {
  animation: glowPulseMul 1.2s ease-in-out infinite;
  box-shadow: 0 0 20px 6px rgba(76, 175, 80, 0.4);
}

[data-theme="dark"] .tile-op.div {
  animation: glowPulseDiv 1.2s ease-in-out infinite;
  box-shadow: 0 0 20px 6px rgba(33, 150, 243, 0.4);
}

[data-theme="light"] .tile-op.add {
  animation: glowPulseAdd 1.2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.3), 0 0 18px rgba(255, 193, 7, 0.2);
}

[data-theme="light"] .tile-op.sub {
  animation: glowPulseSub 1.2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(244, 67, 54, 0.3), 0 0 18px rgba(244, 67, 54, 0.2);
}

[data-theme="light"] .tile-op.mul {
  animation: glowPulseMul 1.2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.3), 0 0 18px rgba(76, 175, 80, 0.2);
}

[data-theme="light"] .tile-op.div {
  animation: glowPulseDiv 1.2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(33, 150, 243, 0.3), 0 0 18px rgba(33, 150, 243, 0.2);
}

.tile-op::after {
  content: '';
}

.tile-op.add    { background-color: #fff176; color: #5d4037; }
.tile-op.sub    { background-color: #ef9a9a; color: #b71c1c; }
.tile-op.mul    { background-color: #aed581; color: #33691e; }
.tile-op.div    { background-color: #81d4fa; color: #01579b; }

.spawned-op {
  animation: opflash 0.3s ease-in-out;
}

.op-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 3;
}

.tile-tooltip {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(12px, -50%);
  background-color: rgba(200, 200, 200, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  white-space: pre-line;
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 10;
  max-width: 220px;
  font-family: 'Courier New', monospace;
  display: none;
  pointer-events: none;
}

/* Show tooltip only for direct child to avoid conflicts */
.tile-op:hover > .tile-tooltip {
  display: block;
}

/* Highlight tiles considered for merging when an OP tile is hovered */
.tile-highlight {
  outline: 2px solid #ffeb3b;
  outline-offset: -2px;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.4);
  z-index: 2;
}


#pause-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.1);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pause-box {
  background: #222;
  padding: 30px 40px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.1);
}

.pause-box h2 {
  margin-bottom: 20px;
  font-size: 28px;
  color: #fff;
}

.pause-box button {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  background: #444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pause-box button:hover {
  background: #666;
}

[data-theme="light"] {
  background: #f7f7f7;
  color: #111;
}

[data-theme="light"] .tile {
  background-color: #ddd;
  color: #111;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

/* Operator tile border colors and styles for light and dark themes are now handled above with .tile-op.add, .tile-op.sub, etc. */

[data-theme="light"] .tile-tooltip {
  background-color: rgba(255, 255, 255, 0.9);
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #op-prompt {
  background: #fff;
  color: #000;
  border-color: #000;
}

[data-theme="light"] #debug-log {
  background-color: #fff;
  color: #000;
}

[data-theme="light"] .pause-box {
  background: #eee;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .pause-box h2 {
  color: #000;
}

[data-theme="light"] .pause-box button {
  background: #ccc;
  color: #111;
}

[data-theme="light"] .pause-box button:hover {
  background: #bbb;
}

[data-theme="dark"] {
  --bg: #111;
  --fg: #fff;
}

[data-theme="light"] {
  --bg: #f7f7f7;
  --fg: #111;
}

.menu-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: var(--bg);
  color: var(--fg);
}

.menu-screen h1,
.menu-screen h2 {
  font-size: 48px;
  margin-bottom: 24px;
}

.menu-screen button {
  padding: 12px 24px;
  font-size: 20px;
  margin: 8px;
}

.menu-screen label {
  margin: 8px;
}

.menu-screen select {
  margin-left: 8px;
}

#settings-back-btn {
  margin-top: 32px;
  font-size: 16px;
}

/* Theme-based tile variants for improved contrast */
[data-theme="dark"] .tile-2    { background-color: #606060; color: #fff; }
[data-theme="dark"] .tile-4    { background-color: #757575; color: #fff; }
[data-theme="dark"] .tile-8    { background-color: #ffb74d; color: #000; }
[data-theme="dark"] .tile-16   { background-color: #ffa726; color: #000; }
[data-theme="dark"] .tile-32   { background-color: #ff8a65; color: #000; }
[data-theme="dark"] .tile-64   { background-color: #ff7043; color: #000; }
[data-theme="dark"] .tile-128  { background-color: #fbc02d; color: #000; }
[data-theme="dark"] .tile-256  { background-color: #f9a825; color: #000; }
[data-theme="dark"] .tile-512  { background-color: #f57f17; color: #fff; }
[data-theme="dark"] .tile-1024 { background-color: #fbc02d; color: #fff; }
[data-theme="dark"] .tile-2048 { background-color: #fdd835; color: #000; }

[data-theme="light"] .tile-2    { background-color: #eee4da; color: #776e65; }
[data-theme="light"] .tile-4    { background-color: #ede0c8; color: #776e65; }
[data-theme="light"] .tile-8    { background-color: #f2b179; color: white; }
[data-theme="light"] .tile-16   { background-color: #f59563; color: white; }
[data-theme="light"] .tile-32   { background-color: #f67c5f; color: white; }
[data-theme="light"] .tile-64   { background-color: #f65e3b; color: white; }
[data-theme="light"] .tile-128  { background-color: #edcf72; color: white; }
[data-theme="light"] .tile-256  { background-color: #edcc61; color: white; }
[data-theme="light"] .tile-512  { background-color: #edc850; color: white; }
[data-theme="light"] .tile-1024 { background-color: #edc53f; color: white; }
[data-theme="light"] .tile-2048 { background-color: #edc22e; color: white; }

@keyframes fadeOutSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

.info-box-hide {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}


/* Bonus points floating animation and counter styling */
#bonus-points-counter {
  position: relative;
  overflow: visible;
  margin-top: 12px;
  padding: 12px 20px;
  background-color: #d0f0d0; /* light green background */
  color: #2e7d32; /* dark green text */
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  width: fit-content;
  text-align: center;
}

#bonus-points-counter > div {
  position: absolute;
  right: 10px;
  top: -40px;
  font-weight: bold;
  font-size: 22px;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
  pointer-events: none;
  opacity: 1;
  transition: transform 1s ease-out, opacity 1s ease-out;
  color: inherit;
}

/* Tile spawn and merge animations */
@keyframes tilePop {
  0%   { transform: scale(0.2); opacity: 0.3; }
  40%  { transform: scale(1.2); opacity: 1; }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.tile-spawn,
.tile-merge {
  transform-origin: center;
  animation: tilePop 300ms cubic-bezier(0.25, 1.5, 0.5, 1);
}


@keyframes fadeBlocker {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

.blocker-removal {
  animation: fadeBlocker 300ms ease-out forwards;
}


@keyframes bonusFlash {
  0%   { transform: scale(1);   color: #2e7d32; }
  50%  { transform: scale(1.25); color: #43a047; }
  100% { transform: scale(1);   color: #2e7d32; }
}

.bonus-flash {
  animation: bonusFlash 400ms ease-out;
}
.difficulty-btn[data-level="easy"].selected {
  background-color: #4caf50;
  border-color: #66bb6a;
}

.difficulty-btn[data-level="medium"].selected {
  background-color: #2196f3;
  border-color: #42a5f5;
}

.difficulty-btn[data-level="hard"].selected {
  background-color: #ff9800;
  border-color: #ffb74d;
}

.difficulty-btn[data-level="veryhard"].selected {
  background-color: #f44336;
  border-color: #ef5350;
}

@media (max-width: 500px) {
  .difficulty-btn {
    padding: 4px 10px;
    font-size: 14px;
  }
}

/* Added appearance property for input range */
input[type=range]#difficulty-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}

input[type=range]#difficulty-select:hover {
  opacity: 1;
}

input[type=range]#difficulty-select::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

input[type=range]#difficulty-select::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
#Theme variables for info box
[data-theme="light"] {
  --info-bg: #ffffff;
  --info-fg: #111;
  --info-border: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --info-bg: #2b2b2b;
  --info-fg: #fff;
  --info-border: #555;
}