:root {
  --ash-bg: #0c0c0e;
  --ash-tile: #1a1a1d;
  --ash-tile-hover: #232328;
  --ash-tile-revealed: #111114;
  --ash-border: #27272a;
  --ash-text: #fafafa;
  --ash-muted: #a1a1aa;
  
  --ash-accent-violet: #8b6cff;
  --ash-accent-cyan: #4cc9f0;
  --ash-accent-amber: #fbbf24;
  --ash-accent-danger: #ef4444;

  --tile-size: 36px; /* INSTÄLLNING - Grundstorlek för rutor. Kan skalas i JS. */
  --tile-gap: 3px;   /* INSTÄLLNING - Avstånd mellan rutor. */
}

/* Ashveil Visual Polish */
.ash-field {
  display: grid;
  gap: var(--tile-gap);
  user-select: none;
  background: radial-gradient(circle at 50% 0%, rgba(139,108,255,0.08), transparent 50%),
              linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
              #050507;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.8),
              0 20px 60px rgba(0,0,0,0.5);
  max-width: 100%;
  box-sizing: border-box;
}

/* Tiles - Glass/Stone Feel */
.ash-tile {
  width: var(--tile-size);
  height: var(--tile-size);
  background: linear-gradient(135deg, #27272c, #1a1a1e);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  transition: all 0.25s var(--hover-ease);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
              inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.ash-tile:hover:not(.revealed) {
  background: linear-gradient(135deg, #2d2d34, #212126);
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(139, 108, 255, 0.3);
  box-shadow: 0 0 15px rgba(139, 108, 255, 0.15),
              0 6px 12px rgba(0, 0, 0, 0.4);
}

.ash-tile.revealed {
  background: #0c0c0e;
  cursor: default;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255,255,255,0.02);
  transform: none !important;
}

/* Elegant Sigil Marks */
.ash-tile.marked::after {
  content: "✦";
  color: #8b6cff;
  font-size: 0.9rem;
  filter: drop-shadow(0 0 5px rgba(139, 108, 255, 0.8));
  animation: sigilPulse 2s infinite ease-in-out;
}

@keyframes sigilPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.ash-tile.ember {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, #0c0c0e 100%);
}

.ash-tile.ember-revealed {
  background: var(--ash-accent-danger);
  box-shadow: 0 0 30px var(--ash-accent-danger),
              inset 0 0 10px rgba(255,255,255,0.5);
  z-index: 2;
  border-color: #fff;
}

/* Neighbor Numbers - Refined Taren Colors */
.n-1 { color: #4cc9f0; text-shadow: 0 0 8px rgba(76, 201, 240, 0.4); }
.n-2 { color: #8b6cff; text-shadow: 0 0 8px rgba(139, 108, 255, 0.4); }
.n-3 { color: #f72585; text-shadow: 0 0 8px rgba(247, 37, 133, 0.4); }
.n-4 { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
.n-5 { color: #fee440; text-shadow: 0 0 8px rgba(254, 228, 64, 0.4); }
.n-6 { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.4); }
.n-7 { color: #3b82f6; text-shadow: 0 0 8px rgba(59, 130, 246, 0.4); }
.n-8 { color: #a1a1aa; text-shadow: 0 0 8px rgba(161, 161, 170, 0.4); }

/* Status Bar */
.ash-status {
  height: 24px;
  font-size: 0.9rem;
  color: var(--ash-muted);
  margin-bottom: var(--spacing-4);
  font-style: italic;
}


/* Responsive Scaling */
@media (max-width: 768px) {
  :root {
    --tile-size: 32px;
  }
}

@media (max-width: 480px) {
  :root {
    --tile-size: 28px;
    --tile-gap: 2px;
  }
  .ash-hud {
    padding: 8px 12px;
    gap: var(--spacing-2);
  }
  .hud-value {
    font-size: 1rem;
  }
}


/* 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;
    }
}