/* ==================================================
   RESET
   ================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #cde8ff, #aee3e8);
  overflow: hidden;
  color: #2b4c7e;
}

/* ==================================================
   UNIVERSE GRID
   ================================================== */
.universe {
  width: 100%;
  height: 100%;
  display: grid;

  /* 3×3 grid – dovolj prostora */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);

  place-items: center;
}

/* ==================================================
   ISLAND WRAPPER
   ================================================== */
.island-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Grid placement */
.island-wrapper.postojna   { grid-column: 1; grid-row: 2; }
.island-wrapper.lancovo    { grid-column: 2; grid-row: 2; }
.island-wrapper.polhov     { grid-column: 3; grid-row: 2; }
.island-wrapper.ljubljana  { grid-column: 2; grid-row: 1; }

/* ==================================================
   HEART ISLAND
   ================================================== */
.heart-island {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: relative;

  background: radial-gradient(circle at 30% 30%, #eef3ff, #cfd9ff);
  box-shadow:
    0 0 40px rgba(120, 150, 255, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.4);

  animation: breathe 6s ease-in-out infinite;
  transition:
    background 1.5s ease-in-out,
    box-shadow 1.5s ease-in-out,
    animation-duration 1s ease-in-out;
}

/* ==================================================
   BREATHING
   ================================================== */
@keyframes breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ==================================================
   AIR QUALITY STATES
   ================================================== */
.heart-island.good {
  background: radial-gradient(circle at 30% 30%, #c8f3d6, #73d39a);
}

.heart-island.ok {
  background: radial-gradient(circle at 30% 30%, #fff1b8, #f2c94c);
}

.heart-island.bad {
  background: radial-gradient(circle at 30% 30%, #ffd1c8, #ff7a59);
}

.heart-island.verybad {
  background: radial-gradient(circle at 30% 30%, #ffb3b3, #ff3b3b);
}

/* ==================================================
   TEXT BELOW ISLAND
   ================================================== */
.island-label {
  margin-top: 16px;
  text-align: center;
}

.island-label h3 {
  font-size: 1.1rem;
}

.island-label .subtitle {
  font-size: 0.95rem;
}

.island-label .small {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ==================================================
   CREATURES
   ================================================== */
.creature {
  position: absolute;
  font-size: 26px;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.15));
  pointer-events: none;
}

.creature.bird {
  top: -12px;
  left: 50px;
  animation: floatBird 6s ease-in-out infinite;
}

.creature.horse {
  bottom: 12px;
  right: 36px;
  animation: bobHorse 4.5s ease-in-out infinite;
}

.creature.snake {
  bottom: 28px;
  left: 32px;
  animation: slither 5.5s ease-in-out infinite;
}

/* Creature animations */
@keyframes floatBird {
  0% { transform: translate(0,0) rotate(-5deg); }
  50% { transform: translate(12px,-10px) rotate(6deg); }
  100% { transform: translate(0,0) rotate(-5deg); }
}

@keyframes bobHorse {
  0% { transform: translate(0,0); }
  50% { transform: translate(-6px,-6px); }
  100% { transform: translate(0,0); }
}

@keyframes slither {
  0% { transform: translate(0,0); }
  50% { transform: translate(10px,2px); }
  100% { transform: translate(0,0); }
}

/* ===============================
   PLANET NAME (INSIDE ISLAND)
   =============================== */
.planet-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);

  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;

  color: rgba(43, 76, 126, 0.85);
  pointer-events: none;
}

/* bolj kontrastno pri slabem zraku */
.heart-island.bad .planet-name,
.heart-island.verybad .planet-name {
  color: rgba(120, 30, 30, 0.9);
}

/* ===============================
   PLANET NAME (INSIDE ISLAND) - OFFLINE
   =============================== */
.heart-island.offline {
  background: radial-gradient(circle at 30% 30%, #eef2f6, #cfd8e3);
  box-shadow:
    0 0 30px rgba(120, 140, 160, 0.25),
    inset 0 0 25px rgba(255,255,255,0.6);
  opacity: 0.85;
}