:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "Noto Sans TC", system-ui, sans-serif;
  background: #9fe1ff;
  color: #183126;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 230, 96, 0.88), transparent 12rem),
    linear-gradient(180deg, #8bdcff 0%, #f8e7a1 48%, #89d66d 100%);
  overflow-x: hidden;
  user-select: none;
}

button,
select {
  font: inherit;
}

.safari-game {
  width: min(100%, 820px);
  min-height: 100vh;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.topbar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.home-link,
.soft-btn,
.hint-btn,
.result-card button,
.result-card a {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #234033;
  box-shadow: 0 8px 18px rgba(46, 83, 64, 0.18);
  font-weight: 900;
  text-decoration: none;
}

.home-link {
  display: grid;
  place-items: center;
  font-size: 1.4rem;
}

.title-block p,
.title-block h1 {
  margin: 0;
}

.title-block p {
  font-size: 0.74rem;
  font-weight: 900;
  color: rgba(24, 49, 38, 0.68);
}

.title-block h1 {
  font-size: clamp(1.18rem, 4.4vw, 2.25rem);
  line-height: 1.02;
}

.language-picker {
  min-width: 112px;
  display: grid;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 900;
  color: rgba(24, 49, 38, 0.72);
}

.language-picker select {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.9);
  color: #183126;
  font-weight: 900;
}

.menu-panel,
.play-panel {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 14px;
}

.cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 18px 38px rgba(37, 78, 58, 0.22);
}

.menu-copy {
  display: grid;
  gap: 4px;
}

.menu-copy strong {
  font-size: 1.35rem;
}

.menu-copy span {
  color: rgba(24, 49, 38, 0.72);
  font-weight: 800;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stage-card {
  min-height: 96px;
  border: 0;
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 5px;
  text-align: left;
  background: linear-gradient(145deg, #fff9dc, #ffffff);
  color: #214233;
  box-shadow: 0 10px 22px rgba(54, 91, 69, 0.17);
  font-weight: 900;
}

.stage-card.locked {
  filter: grayscale(1);
  opacity: 0.58;
}

.stage-card b {
  font-size: 1.6rem;
}

.stage-card span {
  font-size: 0.86rem;
  color: rgba(33, 66, 51, 0.68);
}

.play-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.soft-btn,
.hint-btn {
  padding: 0 13px;
}

.hint-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff9d6, #ffd56d);
}

.hint-btn:disabled {
  opacity: 0.48;
}

.progress-card {
  display: grid;
  gap: 5px;
  font-weight: 900;
}

.progress-card div,
.loading-card div {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.progress-card i,
.loading-card i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffcf48, #58c56c);
  transition: width 0.28s ease;
}

.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1.34 / 1;
  min-height: 410px;
  overflow: hidden;
  border: 5px solid rgba(67, 88, 38, 0.55);
  border-radius: 26px;
  background:
    linear-gradient(180deg, #7bd7ff 0 35%, #fee89b 36% 51%, #74c86a 52% 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.24),
    0 18px 34px rgba(48, 82, 63, 0.2);
}

.scene[data-theme="river"] {
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.82) 0 7%, transparent 8%),
    linear-gradient(180deg, #bdeeff 0 45%, #63c4dc 46% 60%, #bce27c 61% 100%);
}

.scene[data-theme="sunset"] {
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 210, 113, 0.9) 0 9%, transparent 10%),
    linear-gradient(180deg, #ffb66d 0 43%, #f28a58 44% 57%, #9bc861 58% 100%);
}

.scene[data-theme="pond"] {
  background:
    radial-gradient(circle at 26% 69%, rgba(88, 184, 205, 0.8) 0 15%, transparent 16%),
    linear-gradient(180deg, #c7f4ff 0 48%, #bee381 49% 100%);
}

.scene[data-theme="jungle"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(63, 143, 82, 0.38) 0 17%, transparent 18%),
    radial-gradient(circle at 86% 15%, rgba(44, 125, 69, 0.42) 0 19%, transparent 20%),
    linear-gradient(180deg, #a6e9d7 0 42%, #5aa863 43% 100%);
}

.scene[data-theme="lookout"] {
  background:
    radial-gradient(circle at 50% 58%, rgba(196, 155, 97, 0.55) 0 18%, transparent 19%),
    linear-gradient(180deg, #9ee8ff 0 40%, #dec38a 41% 57%, #95c65f 58% 100%);
}

.sun,
.cloud,
.hill,
.tree,
.grass,
.pond,
.float-layer {
  position: absolute;
  pointer-events: none;
}

.targets-layer {
  position: absolute;
  pointer-events: none;
}

.sun {
  right: 8%;
  top: 8%;
  width: 76px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe06a;
  box-shadow: 0 0 0 14px rgba(255, 224, 106, 0.22), 0 0 32px rgba(255, 194, 67, 0.45);
}

.cloud {
  width: 130px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  bottom: 12px;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  left: 20px;
  width: 54px;
  height: 54px;
}

.cloud::after {
  right: 20px;
  width: 62px;
  height: 62px;
}

.cloud-a {
  left: 8%;
  top: 10%;
}

.cloud-b {
  right: 20%;
  top: 24%;
  transform: scale(0.72);
  opacity: 0.75;
}

.hill {
  bottom: 26%;
  width: 60%;
  height: 38%;
  border-radius: 50% 50% 0 0;
  background: rgba(89, 174, 88, 0.58);
}

.hill-a {
  left: -12%;
}

.hill-b {
  right: -18%;
  background: rgba(58, 139, 77, 0.48);
}

.pond {
  left: 8%;
  bottom: 8%;
  width: 28%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, #c7f7ff, #57b6dd 70%);
  box-shadow: inset 0 -10px rgba(11, 95, 127, 0.14);
}

.tree {
  width: 80px;
  height: 190px;
  bottom: 15%;
}

.tree::before {
  content: "";
  position: absolute;
  left: 31px;
  bottom: 0;
  width: 28px;
  height: 116px;
  border-radius: 16px;
  background: #9b642e;
}

.tree i,
.tree i::before,
.tree i::after {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #35a852;
  content: "";
}

.tree i {
  left: -8px;
  top: 0;
  width: 100px;
  height: 94px;
}

.tree i::before {
  left: 46px;
  top: 36px;
  width: 82px;
  height: 78px;
  background: #4abd68;
}

.tree i::after {
  left: -24px;
  top: 46px;
  width: 72px;
  height: 70px;
  background: #58c872;
}

.tree-a {
  left: 5%;
}

.tree-b {
  right: 6%;
  bottom: 20%;
  transform: scale(1.08);
}

.grass {
  width: 42%;
  height: 20%;
  bottom: -3%;
  background: repeating-linear-gradient(105deg, transparent 0 12px, rgba(28, 109, 48, 0.28) 13px 20px);
}

.grass-a {
  left: 0;
}

.grass-b {
  right: 0;
  transform: scaleX(-1);
}

.targets-layer,
.float-layer {
  inset: 0;
}

.target {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  color: #1e3228;
  font-size: calc(var(--size) * 0.66);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 3px rgba(31, 68, 41, 0.18));
  overflow: hidden;
  pointer-events: auto;
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.target::before {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.target::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: inset 0 -8px rgba(30, 73, 33, 0.08);
}

.target.cover-grass::before {
  left: -12%;
  right: -12%;
  bottom: -10%;
  height: 44%;
  border-radius: 50% 50% 0 0;
  background:
    repeating-linear-gradient(105deg, rgba(31, 121, 48, 0.72) 0 8px, rgba(94, 190, 83, 0.82) 9px 16px),
    #45b65f;
}

.target.cover-leaf-left::before,
.target.cover-leaf-right::before,
.target.cover-leaf-top::before {
  width: 58%;
  height: 58%;
  border-radius: 50% 12% 50% 12%;
  background: linear-gradient(135deg, #4abf5e, #237c3c);
  box-shadow: 0 0 0 7px rgba(57, 158, 77, 0.28);
}

.target.cover-leaf-left::before {
  left: -10%;
  top: 20%;
  transform: rotate(-28deg);
}

.target.cover-leaf-right::before {
  right: -10%;
  top: 18%;
  transform: rotate(38deg);
}

.target.cover-leaf-top::before {
  left: 18%;
  top: -14%;
  transform: rotate(14deg);
}

.target.cover-water::before {
  left: -12%;
  right: -12%;
  bottom: -8%;
  height: 48%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 30% 35%, rgba(255, 255, 255, 0.5), transparent 24%),
    linear-gradient(180deg, rgba(116, 215, 238, 0.82), rgba(45, 147, 195, 0.9));
}

.target.cover-dust::before {
  left: -10%;
  right: -10%;
  bottom: -12%;
  height: 36%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(226, 190, 115, 0.62), rgba(145, 103, 55, 0.78));
}

.target:active {
  transform: translate(-50%, -50%) scale(0.92);
}

.target.found {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.55) rotate(12deg);
}

.target.hint {
  box-shadow: 0 0 0 5px #fff, 0 0 0 12px rgba(255, 207, 72, 0.86), 0 0 24px rgba(255, 207, 72, 0.88);
  animation: hint-pulse 0.72s ease-in-out infinite alternate;
}

.float-text {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #234033;
  font-weight: 1000;
  pointer-events: none;
  animation: float-up 0.9s ease-out forwards;
}

.target-panel {
  border-radius: 22px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(54, 91, 69, 0.16);
}

.target-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
}

.target-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.target-chip {
  min-height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  gap: 2px;
  background: linear-gradient(180deg, #fff9db, #e7f7d6);
  box-shadow: inset 0 -4px rgba(48, 105, 54, 0.1);
  font-weight: 900;
  text-align: center;
}

.target-chip b {
  font-size: 1.3rem;
}

.target-chip span {
  font-size: 0.72rem;
}

.target-chip.done {
  opacity: 0.46;
  text-decoration: line-through;
}

.result-panel,
.loading-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: 18px;
  display: grid;
  place-items: center;
  background: rgba(35, 64, 51, 0.44);
  backdrop-filter: blur(8px);
}

.result-card,
.loading-card {
  width: min(100%, 430px);
  border-radius: 26px;
  padding: 22px;
  display: grid;
  gap: 12px;
  text-align: center;
  background: #fff9df;
  color: #234033;
  box-shadow: 0 22px 48px rgba(25, 52, 40, 0.28);
}

.result-card strong {
  font-size: 1.5rem;
}

.stars {
  font-size: 2rem;
  color: #ffb91f;
  letter-spacing: 0;
}

.skill-report {
  border-radius: 18px;
  padding: 12px;
  background: rgba(89, 183, 99, 0.15);
  text-align: left;
}

.skill-report p {
  margin: 6px 0 0;
  line-height: 1.45;
  font-weight: 800;
}

.result-card button,
.result-card a {
  display: grid;
  place-items: center;
}

.loading-card i {
  width: 0%;
}

.hidden {
  display: none !important;
}

@keyframes float-up {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -140%);
  }
}

@keyframes hint-pulse {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (max-width: 560px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .language-picker {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .play-head {
    grid-template-columns: 1fr 1fr;
  }

  .progress-card {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .scene {
    min-height: 360px;
  }

  .target-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}