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

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
  background: var(--pink-100);
  color: var(--ink);
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 5px solid var(--plum);
  outline-offset: 5px;
}

.app-shell {
  min-height: 100dvh;
}

.screen {
  position: relative;
  min-height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow-x: hidden;
  overflow-y: auto;
}

.home-screen {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.95) 0 7%, transparent 7.5%),
    radial-gradient(circle at 82% 19%, rgba(255,255,255,.72) 0 9%, transparent 9.5%),
    linear-gradient(180deg, var(--baby-blue) 0 37%, var(--pink-200) 37% 72%, var(--cream) 72% 100%);
}

.home-screen::before,
.home-screen::after {
  content: "";
  position: absolute;
  left: -10vw;
  right: -10vw;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
}

.home-screen::before { top: 34%; }
.home-screen::after { bottom: 21%; opacity: .68; }

.home-stage {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2.4vh, 24px);
}

.world-mark {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--plum);
  text-align: center;
}

.world-mark__sparkles {
  font-size: clamp(30px, 7vw, 54px);
  letter-spacing: .25em;
  margin-left: .25em;
}

.world-mark h1 {
  margin: 0;
  font-size: clamp(34px, 8vw, 66px);
  line-height: .95;
}

.world-mark p {
  margin: 0;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: 800;
}

.world-list {
  width: 100%;
  display: grid;
  justify-items: center;
}

.world-door {
  position: relative;
  width: min(430px, 82vw);
  min-height: clamp(300px, 58vh, 510px);
  border: 10px solid rgba(255,255,255,.86);
  border-radius: 180px 180px 32px 32px;
  padding: 30px 26px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  color: var(--plum);
  cursor: pointer;
  touch-action: manipulation;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42), transparent 24% 76%, rgba(185,63,122,.09)),
    linear-gradient(180deg, #ffd8ee, #ffacd4 68%, #ff8fc5);
  box-shadow: var(--shadow), inset 0 0 0 7px rgba(255,255,255,.34);
  transform-origin: 50% 100%;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.world-door::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse, rgba(255,255,255,.72), rgba(255,159,203,.1) 64%, transparent 72%);
  filter: blur(4px);
}

.world-door:active {
  transform: scale(.98);
  box-shadow: 0 8px 20px rgba(117,55,101,.2), inset 0 0 0 7px rgba(255,255,255,.34);
}

.world-door__crown {
  font-size: clamp(66px, 15vw, 100px);
  filter: drop-shadow(0 8px 8px rgba(117,55,101,.13));
}

.world-door__castle {
  position: relative;
  width: 72%;
  height: clamp(118px, 20vh, 160px);
  align-self: end;
}

.world-door__castle::before,
.world-door__castle::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 34%;
  height: 100%;
  border-radius: 24px 24px 4px 4px;
  background: #fff1f8;
  border: 5px solid #c96b9e;
}

.world-door__castle::before { left: 3%; }
.world-door__castle::after { right: 3%; }

.world-door__keep {
  position: absolute;
  z-index: 1;
  left: 31%;
  bottom: 0;
  width: 38%;
  height: 78%;
  border-radius: 30px 30px 4px 4px;
  background: var(--lavender-200);
  border: 5px solid #a66dbe;
}

.world-door__keep::after {
  content: "♥";
  position: absolute;
  inset: 20% 0 auto;
  text-align: center;
  font-size: clamp(36px, 8vw, 48px);
  color: var(--pink-500);
}

.world-door__label {
  display: grid;
  gap: 2px;
  text-align: center;
}

.world-door__label strong {
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1;
}

.world-door__label span {
  font-size: clamp(15px, 4vw, 22px);
  font-weight: 800;
}

.world-path {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 7vw, 54px);
  color: rgba(185,63,122,.58);
  font-size: clamp(20px, 4vw, 30px);
}

.world-path span {
  width: 48px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.68);
  box-shadow: 0 5px 12px rgba(117,55,101,.1);
  transform: rotate(-4deg);
}

.world-path span:nth-child(2) { transform: translateY(6px) rotate(4deg); }
.world-path span:nth-child(3) { transform: rotate(2deg); }

.fullscreen-button {
  position: fixed;
  z-index: 10000;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: var(--tap-target);
  height: var(--tap-target);
  display: grid;
  place-items: center;
  border: 5px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: var(--plum);
  box-shadow: var(--shadow-soft);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.fullscreen-button:active {
  transform: scale(.96);
}

.fullscreen-button[hidden],
:fullscreen .fullscreen-button {
  display: none;
}

.fullscreen-lock-button {
  position: fixed;
  z-index: 10010;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: max(88px, var(--tap-target));
  height: max(88px, var(--tap-target));
  display: none;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 8px 6px 7px;
  border: 6px solid rgba(255,255,255,.96);
  border-radius: 30px;
  background: linear-gradient(145deg, #fff4a8, #9bd8ff 48%, #ff8bc4);
  color: var(--plum);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

:fullscreen .fullscreen-lock-button:not([hidden]) {
  display: grid;
}

.fullscreen-lock-button span {
  font-size: 40px;
  line-height: 1;
}

.fullscreen-lock-button strong {
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
}

.fullscreen-lock-button[data-locked="true"] {
  background: linear-gradient(145deg, #ffacd4, #ff72b8);
  color: #5c2147;
}

.fullscreen-lock-button.is-holding {
  transform: scale(.96);
  box-shadow: var(--shadow-soft), inset 0 0 0 8px rgba(255,255,255,.5);
}

body:has(.sticker-factory[data-factory-view="endless"]) .fullscreen-button,
body:has(.sticker-factory[data-factory-view="endless"]) .fullscreen-lock-button {
  right: max(142px, calc(env(safe-area-inset-right) + 142px));
}

.fullscreen-lock-recovery {
  position: fixed;
  z-index: 10020;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background: rgba(255,172,212,.94);
  color: var(--plum);
  cursor: pointer;
  touch-action: manipulation;
}

.fullscreen-lock-recovery[hidden] {
  display: none;
}

.fullscreen-lock-recovery span {
  font-size: clamp(96px, 22vw, 180px);
  line-height: 1;
}

.fullscreen-lock-recovery strong {
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1;
}

.home-button {
  position: relative;
  z-index: 4;
  width: var(--tap-target);
  height: var(--tap-target);
  flex: 0 0 auto;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.82);
  color: var(--plum);
  box-shadow: var(--shadow-soft);
  font-size: 40px;
  cursor: pointer;
  touch-action: manipulation;
}

.child-error {
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(180deg, var(--pink-200), var(--cream));
}

.child-error__card {
  width: min(560px, 90vw);
  padding: 34px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}

.child-error__icon { font-size: 72px; }

.child-error button {
  min-width: 180px;
  min-height: var(--tap-target);
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--pink-400);
  color: var(--plum);
  font-weight: 900;
  font-size: 22px;
  touch-action: manipulation;
}

@media (max-width: 420px) {
  :root { --tap-target: 72px; }
  .world-door { width: min(350px, 88vw); border-width: 8px; }
  .world-path { gap: 18px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .screen { padding-block: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-bottom)); }
  .home-stage { grid-template-columns: minmax(180px, .7fr) minmax(300px, 1.3fr); grid-template-rows: 1fr auto; align-items: center; gap: 8px 22px; }
  .world-mark { grid-column: 1; grid-row: 1; }
  .world-mark__sparkles { font-size: 26px; }
  .world-mark h1 { font-size: clamp(30px, 6vw, 48px); }
  .world-mark p { font-size: 16px; }
  .world-list { grid-column: 2; grid-row: 1 / 3; }
  .world-door { width: min(380px, 45vw); min-height: 300px; padding-block: 20px; }
  .world-door__crown { font-size: 54px; }
  .world-door__castle { height: 112px; }
  .world-door__label strong { font-size: 30px; }
  .world-door__label span { font-size: 15px; }
  .world-path { grid-column: 1; grid-row: 2; min-height: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .world-door__crown {
    animation: crown-float 2.8s ease-in-out infinite;
  }

  @keyframes crown-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
  }
}