:root {
  --core-bg: #0c0c0e;
  --core-empty: #121214;
  --core-border: #1f1f23;
  --tile-size: 100px;
  --tile-gap: 14px;
  --tile-radius: 4px;
}

/* Reset for Coreloom board components */
.grid-container, .grid-cell, .tile {
  box-sizing: border-box;
}

.game-board-wrapper {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(139,108,255,0.06), transparent 50%),
              #050507;
  padding: var(--tile-gap);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.8),
              0 24px 60px rgba(0,0,0,0.5);
  user-select: none;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, var(--tile-size));
  grid-template-rows: repeat(4, var(--tile-size));
  gap: var(--tile-gap);
  position: relative;
}

.grid-cell {
  width: var(--tile-size);
  height: var(--tile-size);
  background: var(--core-empty);
  border-radius: var(--tile-radius);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.02);
}

.tile {
  position: absolute;
  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: var(--tile-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 2rem;
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  box-shadow: 0 8px 16px rgba(0,0,0,0.5), 
              inset 0 1px 1px rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.08);
}

.tile-merge {
  animation: merge-pulse 0.18s ease-out;
}

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

/* Core Visuals */
/* Premium Tile Value Progression */
.tile-2 { background: linear-gradient(135deg, #1e293b, #0f172a); color: #94a3b8; }
.tile-4 { background: linear-gradient(135deg, #334155, #1e293b); color: #cbd5e1; }
.tile-8 { background: linear-gradient(135deg, #475569, #334155); color: #f1f5f9; box-shadow: 0 0 15px rgba(71, 85, 105, 0.3); }
.tile-16 { background: linear-gradient(135deg, #1e3a8a, #172554); color: #93c5fd; box-shadow: 0 0 15px rgba(30, 58, 138, 0.4); }
.tile-32 { background: linear-gradient(135deg, #1d4ed8, #1e3a8a); color: #bfdbfe; box-shadow: 0 0 20px rgba(29, 78, 216, 0.5); }
.tile-64 { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #dbeafe; box-shadow: 0 0 25px rgba(37, 99, 235, 0.6); }
.tile-128 { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #ddd6fe; box-shadow: 0 0 25px rgba(124, 58, 237, 0.5); }
.tile-256 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #ede9fe; box-shadow: 0 0 30px rgba(139, 92, 246, 0.6); }
.tile-512 { background: linear-gradient(135deg, #4cc9f0, #4338ca); color: #fff; box-shadow: 0 0 35px rgba(76, 201, 240, 0.5); }
.tile-1024 { background: linear-gradient(135deg, #a855f7, #3730a3); color: #fff; box-shadow: 0 0 40px rgba(168, 85, 247, 0.6); }
.tile-2048 { background: linear-gradient(135deg, #6366f1, #312e81); color: #ffffff; border: 1px solid rgba(255,255,255,0.4); box-shadow: 0 0 50px rgba(99, 102, 241, 0.8); }

.game-overlay {
  /* Using global.css .game-overlay */
  border-radius: var(--radius-lg);
}

.game-overlay.hidden {
  display: none;
}

.game-overlay h2 {
  font-size: 2rem;
  margin-bottom: 8px;
  color: var(--coil-violet);
}


@media (max-width: 480px) {
  :root {
    --tile-size: 64px;
    --tile-gap: 8px;
  }
}


/* INSTÄLLNING - Global Mobile Fallback Fix */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}
@media (max-width: 800px) {
    canvas, .game-canvas, #game-container, #game-stage, #app {
        max-width: 100% !important;
        height: auto;
    }
    .panel, .sidebar, .menu, #ui, #overlay {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}