.screen.planet-puzzle-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  gap: clamp(5px, 1vh, 11px);
  margin: 0;
  overflow: hidden;
  padding: max(44px, calc(env(safe-area-inset-top) + 36px)) max(10px, env(safe-area-inset-right)) max(24px, calc(env(safe-area-inset-bottom) + 18px)) max(10px, env(safe-area-inset-left));
  color: #493766;
  background: radial-gradient(circle at 12% 12%, rgba(255,255,255,.82), transparent 28%), radial-gradient(circle at 90% 88%, rgba(255,255,255,.62), transparent 31%), linear-gradient(140deg, #fff2b5, #ffe0ec 53%, #c9f2ed);
  text-transform: uppercase;
  animation: none;
}

.planet-close-button {
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #e84b76;
  box-shadow: 0 4px 0 #b8325a, 0 7px 15px rgba(64,35,75,.18);
  font: 800 28px/1 'Baloo 2', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.planet-close-button:hover { filter: brightness(1.08); }
.planet-close-button:active { transform: translateY(2px); }
.planet-close-button:focus-visible,
.planet-puzzle-replay:focus-visible,
.planet-city-marker:focus-visible,
.planet-country-shape:focus-visible {
  outline: 4px solid #3a3a7a;
  outline-offset: 4px;
}

.planet-puzzle-heading {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, .6vh, 7px);
  width: max(240px, calc(100vw - 2 * 250px));
  min-height: 52px;
  justify-content: center;
  max-width: 100%;
}

.planet-puzzle-title {
  max-width: 100%;
  margin: 0;
  color: #563681;
  font-size: clamp(25px, 4.7vh, 48px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(43,34,80,.14);
}

.planet-puzzle-step {
  max-width: 100%;
  margin: 0;
  padding: 3px 13px;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  color: #60417f;
  background: rgba(255,255,255,.86);
  box-shadow: 0 3px 9px rgba(40,45,90,.1);
  font-size: clamp(13px, 2vh, 19px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.planet-puzzle-greeting,
.planet-puzzle-instruction {
  max-width: min(1040px, 96vw);
  margin: 0;
  color: #493766;
  font-size: clamp(15px, 2.35vh, 23px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.planet-puzzle-greeting[hidden] { display: none; }
.planet-puzzle-instruction { color: #2f6e63; }

.planet-puzzle-replay {
  position: fixed;
  top: 44px;
  right: max(24px, env(safe-area-inset-right));
  z-index: 5;
  min-height: 44px;
  padding: 3px 15px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #49c4b0, #218e83);
  box-shadow: 0 4px 0 #176f69, 0 6px 12px rgba(45,70,80,.12);
  font: 800 clamp(13px, 1.9vh, 17px)/1.05 'Baloo 2', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.planet-puzzle-replay:hover { filter: brightness(1.06); }
.planet-puzzle-replay:active { transform: translateY(2px); box-shadow: 0 2px 0 #176f69; }

.planet-map-card {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: min(1280px, calc(100vw - 190px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: 0;
  border: clamp(4px, .7vw, 8px) solid #fff;
  border-radius: clamp(20px, 3vw, 34px);
  background: #81d4fa;
  box-shadow: 0 9px 0 rgba(72,94,139,.13), 0 16px 28px rgba(65,51,99,.16);
}

.planet-map-svg {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.planet-sea-waves { pointer-events: none; }
.planet-sea-wave {
  fill: none;
  stroke: rgba(255,255,255,.5);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: planet-sea-ripple 8s ease-in-out infinite;
}
.planet-sea-wave-2 { animation-delay: -2.5s; animation-duration: 10s; opacity: .62; }
.planet-sea-wave-3 { animation-delay: -5s; animation-duration: 12s; opacity: .48; }

@keyframes planet-sea-ripple {
  0%, 100% { opacity: .2; transform: translateX(-13px) translateY(2px); }
  50% { opacity: .62; transform: translateX(13px) translateY(-2px); }
}

.planet-neighbor-shape {
  fill: #f2f3ef;
  stroke: #c3cacc;
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.planet-country-shape {
  fill: #5fd17a;
  stroke: #2f9a58;
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 3px rgba(30,90,80,.22));
  transition: fill .15s, filter .15s;
}

.planet-map-card.is-country-mode .planet-country-shape { cursor: pointer; }
.planet-map-card.is-country-mode .planet-country-shape:hover { fill: #a2e5c5; filter: drop-shadow(0 0 12px rgba(58,176,142,.55)); }

.planet-city-target { pointer-events: none; }

.planet-marker-halo {
  fill: rgba(255, 205, 70, .32);
  stroke: rgba(255, 180, 32, .86);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: planet-marker-pulse var(--planet-pulse-duration, 1.35s) ease-in-out infinite;
  vector-effect: non-scaling-stroke;
}

.planet-marker-dot {
  fill: #ffcf4f;
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 3px 3px rgba(70,48,33,.35));
  vector-effect: non-scaling-stroke;
}

.planet-marker-ring {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: planet-ring-spin 4s linear infinite, planet-twinkle .9s ease-in-out infinite alternate;
}

@keyframes planet-ring-spin { to { transform: rotate(360deg); } }
@keyframes planet-twinkle { from { opacity: .45; } to { opacity: 1; } }

.planet-plane {
  position: fixed;
  z-index: 30;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0, #ffe48a);
  box-shadow: 0 0 calc(6px + var(--planet-heat, 0) * 26px) rgba(255, 150, 40, calc(.25 + var(--planet-heat, 0) * .6)), 0 6px 12px rgba(45,35,60,.28);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background .2s, box-shadow .2s;
}
.planet-plane[hidden] { display: none; }
.planet-plane[data-heat="warm"] { background: radial-gradient(circle, #fff3d6, #ffc46b); }
.planet-plane[data-heat="hot"] { background: radial-gradient(circle, #ffe7d6, #ff8f5a); }
.planet-plane:focus-visible { outline: 4px solid #3a3a7a; outline-offset: 4px; }
.planet-puzzle-screen.is-dragging .planet-plane { cursor: grabbing; transform: translate(-50%, -50%) scale(1.08); }
.planet-plane.is-landed { animation: planet-plane-land .7s cubic-bezier(.2,1.6,.4,1); }
.planet-puzzle-screen.is-step-two .planet-plane { display: none; }

.planet-plane-icon {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .12s;
  pointer-events: none;
}
.planet-plane-body { fill: #fff; stroke: #3c6fd1; stroke-width: 2.5; }
.planet-plane-wing { fill: #ff6b83; stroke: #c93d5a; stroke-width: 2; stroke-linejoin: round; }
.planet-plane-tail { fill: #62a8f4; stroke: #3c6fd1; stroke-width: 2; stroke-linejoin: round; }
.planet-plane-window { fill: #62a8f4; }

.planet-plane-name {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #563681;
  box-shadow: 0 3px 6px rgba(40,30,70,.25);
  font: 800 16px/1.15 'Baloo 2', sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes planet-plane-land {
  0% { transform: translate(-50%, -50%) scale(1.4); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.planet-confetti-burst { pointer-events: none; }
.planet-confetti-piece {
  font-family: 'Baloo 2', 'Arial', sans-serif;
  font-size: 26px;
  font-weight: 800;
  filter: drop-shadow(0 2px 2px rgba(58,40,80,.2));
  animation: planet-confetti-pop .9s cubic-bezier(.16,.76,.22,1) var(--burst-delay, 0ms) both;
}

@keyframes planet-marker-pulse {
  0%, 100% { opacity: .52; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes planet-confetti-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.18) rotate(-35deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(.72) rotate(150deg); }
}

/* Status text stays for screen readers only; it is shown visually only while loading or for manual marking. */
.planet-map-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: 0;
}
.planet-map-card.is-loading .planet-map-status,
.planet-map-card.is-manual .planet-map-status {
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  clip: auto;
  max-width: 90%;
  white-space: normal;
  padding: 5px 14px;
  border-radius: 999px;
  color: #4b3d65;
  background: rgba(255,255,255,.9);
  font-size: clamp(12px, 1.8vh, 17px);
  font-weight: 800;
  text-align: center;
}
.planet-map-card.is-fallback { background: linear-gradient(145deg, #eef1ea, #e4e9e2); }

.planet-map-attribution {
  position: fixed;
  left: max(20px, calc(env(safe-area-inset-left) + 10px));
  bottom: max(10px, calc(env(safe-area-inset-bottom) + 4px));
  z-index: 25;
  max-width: calc(100vw - 40px);
  margin: 0;
  color: rgba(73, 55, 102, .58);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  pointer-events: none;
}

.planet-puzzle-screen.is-step-two .planet-map-attribution { display: none; }

.planet-puzzle-feedback {
  flex: 0 0 auto;
  min-height: 1.2em;
  max-width: 96vw;
  margin: 0;
  color: #317657;
  font-size: clamp(15px, 2.2vh, 22px);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.planet-puzzle-screen.is-complete .planet-puzzle-feedback {
  position: fixed;
  z-index: 32;
  left: 50%;
  bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
  width: min(980px, calc(100vw - 36px));
  box-sizing: border-box;
  min-height: 0;
  padding: 9px 16px;
  border: 3px solid #fff;
  border-radius: 22px;
  color: #4b356c;
  background: linear-gradient(120deg, #fff4b5, #ffe2ec 55%, #d6f6ee);
  box-shadow: 0 5px 0 rgba(89,61,128,.18), 0 8px 18px rgba(48,38,75,.18);
  font-size: clamp(15px, 2.4vw, 23px);
  line-height: 1.2;
  transform: translateX(-50%);
}

.planet-puzzle-feedback .karaoke-token {
  border-radius: .24em;
  padding: 0 .08em;
  transition: color .12s, background .12s, box-shadow .12s, transform .12s;
}
.planet-puzzle-feedback .karaoke-token.is-karaoke-active {
  display: inline-block;
  color: #40265f;
  background: #ffe269;
  box-shadow: 0 2px 0 #e6ae33, 0 0 15px rgba(255,190,43,.55);
  transform: scale(1.13);
}

.planet-puzzle-screen.is-complete .planet-map-card {
  box-shadow: 0 0 0 5px rgba(255,209,102,.68), 0 9px 0 rgba(72,94,139,.13), 0 16px 28px rgba(65,51,99,.16);
}

.planet-map-card[hidden],
.planet-puzzle-heading[hidden],
.planet-puzzle-feedback[hidden],
.planet-puzzle-actions[hidden],
.planet-step-two[hidden],
.planet-puzzle-next[hidden] { display: none !important; }

.planet-puzzle-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  width: min(1100px, 98vw);
}

.planet-puzzle-screen.is-complete .planet-puzzle-actions {
  position: fixed;
  z-index: 31;
  left: 50%;
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 80px));
  transform: translateX(-50%);
}

.planet-puzzle-next,
.planet-step-two-back {
  min-height: 46px;
  max-width: 96vw;
  padding: 6px clamp(14px, 2.4vw, 26px);
  border: 3px solid #fff;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #8d65d5, #6743aa);
  box-shadow: 0 5px 0 #4d3185, 0 8px 14px rgba(45,35,80,.16);
  font: 800 clamp(15px, 2.2vh, 22px)/1.05 'Baloo 2', sans-serif;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.planet-puzzle-next:hover,
.planet-step-two-back:hover { filter: brightness(1.07); transform: translateY(-2px); }
.planet-puzzle-next:active,
.planet-step-two-back:active { transform: translateY(2px); box-shadow: 0 2px 0 #4d3185; }
.planet-puzzle-next:focus-visible,
.planet-step-two-back:focus-visible { outline: 4px solid #3a3a7a; outline-offset: 4px; }

.planet-step-two {
  flex: 1 1 0;
  min-height: 0;
  width: min(1100px, 98vw);
  display: grid;
  place-items: center;
}

.planet-step-two-card {
  width: min(760px, 94vw);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.7vh, 18px);
  padding: clamp(20px, 5vw, 46px);
  border: 6px solid #fff;
  border-radius: 32px;
  color: #493766;
  background: rgba(255,255,255,.93);
  box-shadow: 0 12px 28px rgba(30,35,80,.17);
  text-align: center;
}

.planet-step-two-icon { font-size: clamp(62px, 14vh, 132px); line-height: 1; filter: drop-shadow(0 5px 4px rgba(50,35,75,.16)); }
.planet-step-two-card h2 { margin: 0; color: #563681; font-size: clamp(27px, 5vh, 48px); line-height: 1; }
.planet-step-two-card > p:not(.planet-puzzle-step) { margin: 0; font-size: clamp(17px, 2.7vh, 25px); font-weight: 800; line-height: 1.15; }
.planet-step-two-card .planet-puzzle-step { margin: 0; }

@media (max-width: 560px) {
  .planet-puzzle-next, .planet-step-two-back { min-height: 42px; font-size: clamp(13px, 3.7vw, 18px); }
  .planet-step-two-card { padding: 24px 16px; border-width: 4px; border-radius: 24px; }
  .planet-step-two-card h2 { font-size: clamp(24px, 7vw, 36px); }
}

@media (max-width: 560px) {
  .screen.planet-puzzle-screen { gap: 5px; padding-top: max(104px, calc(env(safe-area-inset-top) + 96px)); padding-left: 7px; padding-right: 7px; }
  .planet-puzzle-heading { width: 100%; min-height: 0; }
  .planet-puzzle-replay { right: 12px; }
  .planet-plane { width: 60px; height: 60px; }
  .planet-plane-name { font-size: 13px; }
  .planet-close-button { width: 48px; height: 48px; }
  .planet-puzzle-heading { gap: 3px; }
  .planet-puzzle-title { font-size: clamp(23px, 6vw, 34px); }
  .planet-puzzle-step { font-size: clamp(12px, 3.5vw, 16px); }
  .planet-puzzle-greeting, .planet-puzzle-instruction { font-size: clamp(13px, 3.5vw, 18px); }
  .planet-map-card { width: 100%; padding: 3px; border-radius: 19px; }
  .planet-map-status { font-size: clamp(11px, 3vw, 14px); }
  .planet-map-attribution { font-size: 10px; }
  .planet-puzzle-feedback { font-size: clamp(13px, 3.5vw, 18px); }
  .planet-puzzle-screen.is-complete .planet-puzzle-feedback { width: calc(100vw - 24px); padding: 8px 10px; font-size: clamp(14px, 4vw, 18px); }
  .planet-puzzle-screen.is-complete .planet-puzzle-actions { width: calc(100vw - 20px); bottom: max(78px, calc(env(safe-area-inset-bottom) + 76px)); }
}

@media (max-height: 600px) {
  .screen.planet-puzzle-screen { gap: 4px; padding-top: max(30px, calc(env(safe-area-inset-top) + 24px)); padding-bottom: 20px; }
  .planet-puzzle-replay { top: 30px; }
  .planet-close-button { top: 24px; }
  .planet-close-button { width: 44px; height: 44px; font-size: 24px; }
  .planet-puzzle-heading { gap: 2px; }
  .planet-puzzle-title { font-size: clamp(21px, 5.5vh, 34px); }
  .planet-puzzle-step { padding-block: 2px; font-size: clamp(11px, 2.7vh, 15px); }
  .planet-puzzle-greeting, .planet-puzzle-instruction { font-size: clamp(12px, 2.9vh, 17px); }
  .planet-puzzle-replay { min-height: 27px; padding-block: 1px; font-size: 12px; }
  .planet-map-card { padding: 3px; }
  .planet-map-status { font-size: clamp(10px, 2.5vh, 13px); }
  .planet-map-attribution { font-size: 10px; }
  .planet-puzzle-feedback { font-size: clamp(12px, 2.8vh, 16px); }
  .planet-puzzle-screen.is-complete .planet-puzzle-feedback { padding: 6px 10px; font-size: clamp(12px, 2.7vh, 16px); }
  .planet-puzzle-screen.is-complete .planet-puzzle-actions { bottom: max(68px, calc(env(safe-area-inset-bottom) + 66px)); }
}

/* ---------- Korak 1B / Korak 2: relief puzzle ---------- */
.planet-map-card { transition: background-color .9s ease, box-shadow .4s; }
.planet-map-card.is-board { background-color: #fdf1d6; }
.planet-sea-waves, .planet-neighbor-layer { transition: opacity .8s ease; }
.planet-map-card.is-board .planet-sea-waves,
.planet-map-card.is-board .planet-neighbor-layer,
.planet-map-card.is-europe .planet-sea-waves { opacity: 0; }

.planet-country-shape {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: fill .15s, filter .7s ease, transform .85s cubic-bezier(.3,1.35,.5,1);
}
.planet-country-shape.is-lifted {
  transform: translate(0, -12px);
  filter: drop-shadow(0 4px 0 #2f9a58) drop-shadow(0 18px 12px rgba(40,55,70,.38));
}

.planet-drawer {
  fill: rgba(255,255,255,.62);
  stroke: rgba(141,101,213,.55);
  stroke-width: 3;
  stroke-dasharray: 10 7;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity .5s ease;
}
.planet-drawers.is-open .planet-drawer { opacity: 1; }

.planet-frame {
  fill: rgba(255,255,255,.5);
  stroke: #ffae00;
  stroke-width: 3;
  stroke-dasharray: 7 6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  animation: planet-frame-twinkle var(--planet-pulse-duration, 1.3s) ease-in-out infinite alternate;
}
.planet-map-card.is-europe .planet-frame { stroke: #ffd400; fill: rgba(255,255,255,.7); }
@keyframes planet-frame-twinkle {
  from { stroke-opacity: .35; fill-opacity: .3; }
  to { stroke-opacity: 1; fill-opacity: .75; }
}

.planet-piece {
  cursor: grab;
  outline: none;
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.planet-piece.is-dragging { cursor: grabbing; transition: transform .05s linear; }
.planet-piece.is-placed { cursor: default; transition: transform .25s cubic-bezier(.2,1.5,.4,1); }
.planet-piece-body {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform .45s ease, filter .3s ease;
}
.planet-pieces.is-lifted .planet-piece:not(.is-placed) .planet-piece-body {
  transform: translate(0, -10px);
  filter: drop-shadow(0 3px 0 rgba(60,70,90,.35)) drop-shadow(0 14px 10px rgba(40,50,70,.32));
}
.planet-piece.is-placed .planet-piece-body { filter: drop-shadow(0 2px 2px rgba(30,60,60,.25)); }
.planet-piece[data-heat="warm"] .planet-piece-body { filter: drop-shadow(0 0 8px rgba(255,176,46,.95)) drop-shadow(0 12px 9px rgba(40,50,70,.3)) !important; }
.planet-piece[data-heat="hot"] .planet-piece-body { filter: drop-shadow(0 0 14px rgba(255,90,50,1)) drop-shadow(0 12px 9px rgba(40,50,70,.3)) !important; }

.planet-piece-shape {
  fill: #5fd17a;
  stroke: #2f9a58;
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: fill .6s ease, stroke .6s ease;
}
.planet-pieces.is-colored .planet-piece-shape { fill: var(--piece-color); stroke: rgba(80,60,110,.55); }
.planet-pieces.is-merged .planet-piece-shape { fill: #5fd17a; stroke: #2f9a58; }
.planet-piece:focus-visible .planet-piece-shape { stroke: #3a3a7a; stroke-width: 3.5; }

/* ---------- Korak 3: PLANET ZEMLJA ---------- */
.planet-map-card.is-world { background-color: #7ec8e3; }
.planet-world-layer, .planet-world-frames { opacity: 0; transition: opacity 1.1s ease; }
.planet-map-card.is-world .planet-world-layer,
.planet-map-card.is-world .planet-world-frames { opacity: 1; }
.planet-map-card.is-world .planet-neighbor-layer,
.planet-map-card.is-world .planet-pieces:not(.planet-world-layer),
.planet-map-card.is-world > svg > .planet-frame { opacity: 0; transition: opacity .9s ease; }

.planet-continent-shape {
  stroke: rgba(50,80,90,.4);
  stroke-width: .8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: visiblePainted;
  cursor: pointer;
  transition: filter .2s;
}
.planet-continent:hover .planet-continent-shape { filter: brightness(1.08) saturate(1.2); }
.planet-continent-icon {
  pointer-events: none;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.planet-world-frame .planet-frame { fill: rgba(255,255,255,.55); stroke: #fff36b; }

.planet-continent-label {
  position: fixed;
  z-index: 26;
  left: 50%;
  top: max(104px, calc(env(safe-area-inset-top) + 98px));
  margin: 0;
  padding: 4px 20px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #40265f;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 0 rgba(89,61,128,.18), 0 6px 14px rgba(48,38,75,.16);
  font-size: clamp(18px, 3.4vh, 32px);
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  transform: translateX(-50%);
  pointer-events: none;
}
.planet-continent-label[hidden] { display: none; }
.planet-continent-label .karaoke-token { border-radius: .24em; padding: 0 .1em; transition: background .12s, transform .12s; }
.planet-continent-label .karaoke-token.is-karaoke-active { display: inline-block; background: #ffe269; box-shadow: 0 2px 0 #e6ae33; transform: scale(1.12); }

.planet-map-svg { transition: opacity .9s ease; }
.planet-map-card.is-globe {
  background: radial-gradient(circle at 50% 50%, #2b3f8f 0%, #17205a 55%, #0b0f33 100%);
  background-color: #17205a;
}
.planet-map-card.is-globe::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 78% 12%, #fff, transparent),
    radial-gradient(2px 2px at 88% 72%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 50% 8%, #fff, transparent), radial-gradient(2px 2px at 6% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 94% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 64% 90%, #fff, transparent);
  opacity: .8;
  pointer-events: none;
}
.planet-map-card.is-globe .planet-map-svg { opacity: 0; pointer-events: none; }
.planet-globe-mount { position: absolute; inset: 0; z-index: 2; touch-action: none; }
.planet-globe-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.planet-globe-canvas:active { cursor: grabbing; }
.planet-globe-plane {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0, #ffe48a);
  box-shadow: 0 0 16px rgba(255,210,90,.7);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .3s;
}
.planet-globe-plane[hidden] { display: none; }
.planet-globe-plane.is-behind { opacity: .3; }
.planet-globe-plane .planet-plane-name { font-size: 14px; }
.planet-puzzle-next.is-highlight {
  background: linear-gradient(145deg, #ffb347, #ff7a59);
  box-shadow: 0 5px 0 #c4543a, 0 0 22px rgba(255,170,70,.75);
  animation: planet-next-glow 1.4s ease-in-out infinite alternate;
}
@keyframes planet-next-glow { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ---------- Simplified, rounded, child-friendly shapes + fast dragging ---------- */
/* Same-colour thick round stroke = smooth, rounded coasts; small nearby islands visually merge. */
.planet-piece-shape { stroke: #5fd17a; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.planet-pieces.is-colored .planet-piece-shape { stroke: var(--piece-color); }
.planet-pieces.is-merged .planet-piece-shape { stroke: #5fd17a; }
.planet-continent-shape { stroke: var(--continent-color); stroke-width: 3; stroke-linecap: round; }

.planet-frame-base { fill: rgba(255,255,255,.5); stroke: none; pointer-events: none; }
.planet-drawer { stroke: none; stroke-dasharray: none; fill: rgba(255,255,255,.55); }

/* Empty spots: soft tinted field in the colour of the piece that belongs there. */
.planet-target { pointer-events: none; animation: planet-target-pulse 1.3s ease-in-out infinite alternate; }
.planet-target path {
  fill: var(--piece-color);
  fill-opacity: .42;
  stroke: var(--piece-color);
  stroke-width: 5;
  stroke-opacity: .7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.planet-target[data-heat="warm"] { animation-duration: .7s; }
.planet-target[data-heat="hot"] { animation-duration: .35s; }
.planet-target[data-heat="hot"] path { fill-opacity: .7; }
@keyframes planet-target-pulse { from { opacity: .55; } to { opacity: 1; } }

.planet-continent-name {
  fill: #493766;
  stroke: rgba(255,255,255,.96);
  stroke-width: .82em;
  stroke-linejoin: round;
  paint-order: stroke;
  font-weight: 800;
  letter-spacing: .035em;
  pointer-events: none;
}

/* While dragging: no transitions, no filters → pure GPU transform at 60 FPS. */
.planet-piece.is-dragging { transition: none !important; will-change: transform; }
.planet-piece.is-dragging .planet-piece-body { filter: none !important; transform: none !important; transition: none !important; }
.planet-puzzle-screen.is-dragging .planet-sea-wave { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .planet-target { animation: none; }
  .planet-puzzle-next.is-highlight { animation: none; }
  .planet-frame { animation: none; }
  .planet-piece, .planet-country-shape, .planet-piece-body { transition: none; }
  .planet-marker-halo { animation: none; opacity: .9; }
  .planet-sea-wave { animation: none; opacity: .3; }
  .planet-marker-ring { animation: none; }
  .planet-plane.is-landed { animation: none; }
}