:root {
  color-scheme: light;
  --sky-top: #98e0fb;
  --sky-bottom: #f7f4c9;
  --grass-1: #baf08d;
  --grass-2: #97df6f;
  --grass-3: #79c85c;
  --grass-4: #4e9d49;
  --cliff-light: #f4d9ab;
  --cliff-mid: #ddb77a;
  --forest: #275f3f;
  --forest-deep: #1b4f35;
  --path: #ffe6b3;
  --ink: #345562;
  --ink-soft: #567786;
  --paper: #fff8ea;
  --accent-red: #ef7062;
  --accent-red-deep: #d84d48;
  --accent-green: #5ebd68;
  --shadow-soft: 0 26px 70px rgba(57, 98, 101, 0.22);
  --shadow-card: 0 20px 54px rgba(46, 74, 87, 0.24);
  --radius-lg: 22px;
  --radius-pill: 999px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Nunito", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.75),
      transparent 24%
    ),
    linear-gradient(180deg, var(--sky-top), #cbf1ff 28%, #f7f6d7 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  background: none;
}

.game-shell {
  position: relative;
  min-height: 100dvh;
  padding: 0;
  overflow: clip;
}

.atmosphere {
  position: absolute;
  width: 24rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.45;
  pointer-events: none;
}

.atmosphere-a {
  top: -8rem;
  left: -6rem;
  background: rgba(255, 251, 193, 0.9);
}

.atmosphere-b {
  right: -6rem;
  bottom: -4rem;
  background: rgba(162, 239, 201, 0.7);
}

.game-hud,
.game-toolbar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  width: auto;
  pointer-events: none;
}

.game-hud {
  z-index: 999;
  top: 0;
  display: grid;
  gap: 0.85rem;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 0;
}

.hud-panel,
.toolbar-panel {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
}

.hud-panel {
  width: min(34rem, 100%);
  padding: 1rem 1.15rem;
  border-radius: 24px;
  pointer-events: auto;
}

.hud-label,
.hud-pill,
.letter-badge,
.letter-kicker,
.stamp {
  text-transform: uppercase;
}

.hud-label {
  margin: 0 0 0.25rem;
  color: var(--accent-green);
  font-size: 0.78rem;
  font-weight: 800;
}

.hud-panel h1,
.letter-content h2 {
  margin: 0;
  font-family: "Luckiest Guy", cursive;
  line-height: 0.94;
  letter-spacing: 0.02em;
}

.hud-panel h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.hud-panel p,
.toolbar-panel p,
.letter-content p {
  margin: 0;
  line-height: 1.55;
  color: var(--ink-soft);
}

.hud-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  pointer-events: auto;
}

.hud-pill,
.letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(73, 112, 126, 0.08);
}

.world-wrap {
  position: relative;
  z-index: 1;
  width: 100vw;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
}

.world {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0.05)
    ),
    linear-gradient(180deg, #a3e4ff 0 24%, #c9f0a2 24% 100%);
  box-shadow: none;
}

.world-backdrop,
.grass-patch,
.pond,
.terrace,
.path,
.waterfall,
.tree,
.hut,
.farm,
.deck,
.workbench,
.creature-art,
.avatar,
.interaction-prompt,
.pokeball-ui {
  position: absolute;
}

.world-backdrop {
  inset: 0;
  background: url("https://pokopia.pokemon.com/assets/en-us/pages/index/hero-img.jpg")
    center 38% / cover no-repeat;
}

.grass-patch {
  z-index: 1;
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(184, 240, 137, 0.96),
      rgba(118, 195, 84, 0.98)
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 80'%3E%3Cg fill='%235da84d'%3E%3Cpath d='M8 80l8-30 8 30z'/%3E%3Cpath d='M24 80l9-40 9 40z'/%3E%3Cpath d='M46 80l8-28 8 28z'/%3E%3Cpath d='M64 80l10-38 10 38z'/%3E%3Cpath d='M90 80l8-28 8 28z'/%3E%3Cpath d='M108 80l10-40 10 40z'/%3E%3Cpath d='M134 80l8-28 8 28z'/%3E%3Cpath d='M152 80l10-36 10 36z'/%3E%3C/g%3E%3C/svg%3E")
      center bottom / cover no-repeat;
  box-shadow:
    inset 0 -8px 0 rgba(84, 154, 63, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.grass-patch-a {
  left: 38%;
  top: 29%;
  width: 17%;
  height: 12%;
}

.grass-patch-b {
  left: 65%;
  top: 53%;
  width: 12%;
  height: 7%;
}

.grass-patch-c {
  left: 12%;
  top: 50%;
  width: 12%;
  height: 8%;
}

.pond {
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 28% 26%,
      rgba(255, 255, 255, 0.8),
      transparent 16%
    ),
    linear-gradient(180deg, #90dcf5, #65bfe6 55%, #58b2db);
  box-shadow:
    inset 0 0 0 3px rgba(166, 219, 174, 0.85),
    inset 0 -10px 0 rgba(72, 170, 209, 0.2);
}

.pond-main {
  left: 8%;
  bottom: 15%;
  width: 15%;
  height: 14%;
  border-radius: 18px 18px 28px 24px;
}

.pond-main::before {
  content: "";
  position: absolute;
  inset: auto 14% 10% 14%;
  height: 18%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.terrace {
  z-index: 1;
  background: linear-gradient(180deg, var(--cliff-light), var(--cliff-mid));
  border-radius: 18px;
  box-shadow: inset 0 -10px 0 rgba(185, 141, 83, 0.35);
}

.terrace::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 14%;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--grass-1), var(--grass-2));
}

.terrace-back {
  left: 0;
  top: 6%;
  width: 100%;
  height: 25%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 78%,
    84% 78%,
    84% 58%,
    65% 58%,
    65% 78%,
    45% 78%,
    45% 52%,
    22% 52%,
    22% 78%,
    0 78%
  );
}

.terrace-mid {
  left: -4%;
  top: 24%;
  width: 64%;
  height: 23%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 84%,
    72% 84%,
    72% 54%,
    54% 54%,
    54% 84%,
    0 84%
  );
}

.terrace-front {
  right: -6%;
  top: 26%;
  width: 39%;
  height: 18%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 82%,
    62% 82%,
    62% 46%,
    36% 46%,
    36% 82%,
    0 82%
  );
}

.waterfall {
  left: 28%;
  top: 23%;
  width: 8%;
  height: 24%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(132, 212, 255, 0.7)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0));
  border-radius: 18px;
}

.path {
  background: linear-gradient(180deg, #ffeec7, var(--path));
  box-shadow: inset 0 0 0 1px rgba(241, 201, 124, 0.35);
}

.path-main {
  left: 40%;
  bottom: -6%;
  width: 15%;
  height: 52%;
  clip-path: polygon(38% 0, 62% 0, 84% 100%, 16% 100%);
}

.path-cross {
  left: 0;
  right: 0;
  top: 53%;
  height: 7%;
  z-index: 1;
}

.path-side {
  left: 54%;
  top: 54%;
  width: 22%;
  height: 7%;
  border-radius: 999px;
}

.tree {
  width: 12%;
  aspect-ratio: 0.9;
}

.tree .trunk {
  position: absolute;
  inset: 56% 42% 0;
  background: linear-gradient(180deg, #8b6235, #6e4522);
  border-radius: 12px;
}

.tree .crown {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 34%, #d2f48e 0 24%, transparent 25%),
    radial-gradient(circle at 30% 34%, #7fd55d 0 46%, #60b14d 47% 100%);
  box-shadow:
    inset 0 -14px 0 rgba(69, 147, 66, 0.24),
    0 10px 18px rgba(84, 143, 78, 0.2);
}

.tree-left {
  left: 9%;
  top: 12%;
}
.tree-right {
  right: 17%;
  top: 16%;
}
.tree-back {
  right: 39%;
  top: 8%;
  transform: scale(0.82);
}

.hut {
  z-index: 2;
  left: 41%;
  top: 36%;
  width: 18%;
  height: 22%;
}

.hut-roof {
  position: absolute;
  inset: 0 0 22%;
  border-radius: 22px 22px 18px 18px;
  background: linear-gradient(180deg, #ff8f82, #ea5f59 55%, #d74a44);
  box-shadow:
    inset 0 -12px 0 rgba(151, 46, 43, 0.28),
    0 12px 20px rgba(99, 79, 66, 0.12);
}

.hut-roof-cap {
  position: absolute;
  left: 34%;
  right: 34%;
  top: -8%;
  height: 18%;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #ff9f91, #e95d56);
}

.hut-sign {
  position: absolute;
  left: 39%;
  right: 39%;
  top: 14%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    #ffffff 0 40%,
    #8fd6ff 41% 100%
  );
  box-shadow: 0 0 0 0.45rem rgba(255, 255, 255, 0.25);
}

.hut-door {
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 0;
  height: 44%;
  border-radius: 16px 16px 10px 10px;
  background: linear-gradient(180deg, #d6edf9 0 40%, #9ccbe5 41% 100%);
  box-shadow: inset 0 -8px 0 rgba(91, 143, 168, 0.22);
}

.mailbox-hotspot {
  left: 88%;
  bottom: 7%;
  width: 2.9rem;
  aspect-ratio: 0.72;
  border-radius: 10px;
  background: linear-gradient(180deg, #fefdf5, #dbedff);
  box-shadow:
    inset 0 0 0 2px rgba(73, 111, 125, 0.08),
    0 10px 16px rgba(77, 109, 120, 0.15);
  cursor: pointer;
}

.mailbox-flag {
  position: absolute;
  right: -12%;
  top: 12%;
  width: 34%;
  height: 22%;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    var(--accent-red),
    var(--accent-red-deep)
  );
}

.farm {
  z-index: 2;
  left: 61%;
  top: 42%;
  width: 22%;
  height: 18%;
  border: 0.4rem solid #c79f6c;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(201, 156, 94, 0.24) 0 13%,
      transparent 13% 16%
    ),
    linear-gradient(180deg, #8ece6b, #78bf53);
}

.crop {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #ffcf7b 0 18%,
    #ef6752 19% 100%
  );
  box-shadow: 0 0 0 0.22rem rgba(88, 169, 70, 0.26);
}

.crop-a {
  left: 12%;
  top: 20%;
}
.crop-b {
  left: 28%;
  top: 30%;
}
.crop-c {
  left: 46%;
  top: 18%;
}
.crop-d {
  left: 64%;
  top: 32%;
}
.crop-e {
  left: 22%;
  top: 56%;
}
.crop-f {
  left: 56%;
  top: 58%;
}

.deck {
  z-index: 2;
  right: 8%;
  bottom: 12%;
  width: 16%;
  height: 13%;
  border-radius: 16px;
  background: repeating-linear-gradient(90deg, #c8985f 0 16%, #b6824c 16% 20%);
}

.deck-seat {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #c59769, #ab7b48);
}

.seat-a {
  left: -18%;
  top: 8%;
}
.seat-b {
  right: -18%;
  top: 8%;
}
.seat-c {
  left: -18%;
  bottom: 0;
}
.seat-d {
  right: -18%;
  bottom: 0;
}

.workbench {
  z-index: 2;
  left: 3%;
  bottom: 10%;
  width: 18%;
  height: 11%;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe77e, #ffd55e);
}

.workbench::after {
  content: "";
  position: absolute;
  inset: 100% 8% auto;
  height: 34%;
  background: linear-gradient(180deg, #dfe3e8, #bfc5cb);
}

.bench-tool,
.bench-paper {
  position: absolute;
}

.tool-a {
  left: 10%;
  top: 26%;
  width: 16%;
  height: 24%;
  border-radius: 10px;
  background: linear-gradient(180deg, #262c34, #0f1319);
}

.tool-b {
  left: 40%;
  top: 22%;
  width: 20%;
  height: 10%;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8eef6, #bcc6cf);
}

.bench-paper {
  right: 10%;
  top: 22%;
  width: 20%;
  height: 32%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.item-cluster {
  z-index: 2;
  display: flex;
  align-items: end;
  gap: 0.55rem;
}

.item-cluster-left {
  left: 13%;
  bottom: 28%;
}

.item-cluster-right {
  right: 11%;
  bottom: 31%;
}

.prop-svg {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 10px rgba(74, 92, 84, 0.16));
}

.prop-leafy-plant {
  width: 2rem;
  height: 2.7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 88'%3E%3Cpath d='M31 82V48' stroke='%2364943f' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M26 48C10 43 6 28 12 14c8 4 16 12 18 26z' fill='%2378c95f'/%3E%3Cpath d='M38 48c16-5 20-20 14-34-8 4-16 12-18 26z' fill='%2358a94e'/%3E%3Cpath d='M32 40c-8-2-14-10-14-20 9 2 15 8 18 18z' fill='%2393de72'/%3E%3C/svg%3E");
}

.prop-letter {
  width: 1.9rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Crect x='4' y='8' width='56' height='32' rx='6' fill='%23fff8ea' stroke='%23d7c5a0'/%3E%3Cpath d='M8 12l24 16 24-16' fill='none' stroke='%23d7c5a0' stroke-width='2'/%3E%3C/svg%3E");
}

.prop-chest {
  width: 2.3rem;
  height: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 56'%3E%3Crect x='6' y='8' width='60' height='40' rx='10' fill='%23fff7ef'/%3E%3Cpath d='M6 8h60v19H6z' fill='%23ef7062'/%3E%3Cpath d='M6 26h60' stroke='%2325303c' stroke-width='5'/%3E%3Ccircle cx='36' cy='28' r='8' fill='%23fff' stroke='%2325303c' stroke-width='4'/%3E%3C/svg%3E");
}

.prop-bench {
  width: 2.9rem;
  height: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 54'%3E%3Cg fill='%23c8955d'%3E%3Crect x='12' y='16' width='62' height='10' rx='4'/%3E%3Crect x='8' y='28' width='70' height='10' rx='4'/%3E%3Crect x='18' y='36' width='6' height='14' rx='2'/%3E%3Crect x='62' y='36' width='6' height='14' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

.creature-art {
  margin: 0;
  transform-origin: center bottom;
  animation: floaty 3.2s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}

.creature-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(70, 95, 87, 0.2));
  user-select: none;
  -webkit-user-drag: none;
}

.creature-art-tangrowth {
  left: 10%;
  bottom: 17%;
  width: 16%;
  animation-delay: 0.1s;
}

.creature-art-smearguru {
  left: 27%;
  bottom: 10%;
  width: 13%;
  animation-delay: 0.4s;
}

.creature-art-mosslax {
  right: 15%;
  bottom: 15%;
  width: 15%;
  animation-delay: 0.9s;
}

.creature-art-peakychu {
  left: 55%;
  bottom: 7%;
  width: 12%;
  animation-delay: 1.2s;
}

.creature-art-smearguru-alt {
  right: 3%;
  bottom: 26%;
  width: 10%;
  transform: scale(0.9);
  animation-delay: 1.5s;
}

.pokeball-ui {
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.8rem;
  padding: 0.45rem 1rem 0.45rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  z-index: 3;
}

.pokeball-ui:focus-visible,
.mailbox-hotspot:focus-visible,
.icon-close:focus-visible {
  outline: 3px solid rgba(63, 98, 118, 0.35);
  outline-offset: 5px;
}

.pokeball-ui-ball {
  position: relative;
  width: 2.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    var(--accent-red) 0 47%,
    #1e2632 47% 53%,
    #fffdf7 53% 100%
  );
}

.pokeball-ui-core {
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    #ffffff 0 36%,
    #d5dce4 37% 100%
  );
  box-shadow: 0 0 0 0.28rem #1e2632;
}

.pokeball-ui-text {
  font-weight: 800;
  color: #355163;
}

.avatar {
  width: 6.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 4;
  transition:
    left 140ms linear,
    top 140ms linear;
}

.avatar-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -4%;
  height: 16%;
  border-radius: 50%;
  background: rgba(38, 70, 74, 0.18);
}

.avatar-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(83, 64, 109, 0.18));
  user-select: none;
  -webkit-user-drag: none;
}

.interaction-prompt {
  visibility: hidden;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-soft);
  font-weight: 800;
  color: #3f5d6d;
  z-index: 3;
}

.interaction-prompt.is-hidden {
  display: none;
}

.game-toolbar {
  top: 2dvh;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
}

.toolbar-panel {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  pointer-events: auto;
  max-width: min(34rem, calc(100% - 10rem));
}

.toolbar-dot {
  width: 0.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, #8bd76e, #5db45d);
}

.touch-controls {
  display: none;
  grid-template-columns: repeat(3, minmax(3.6rem, 4.4rem));
  grid-template-areas:
    ". up ."
    "left action right"
    ". down .";
  gap: 0.45rem;
  padding: 0.7rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-soft);
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.touch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  min-height: 3.6rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 -0.2rem 0 rgba(78, 109, 122, 0.08),
    0 10px 18px rgba(62, 97, 105, 0.16);
  color: #3d5d6c;
  font-weight: 900;
  font-size: 1.1rem;
  touch-action: manipulation;
  user-select: none;
}

.touch-button:active {
  transform: scale(0.96);
}

.touch-up {
  grid-area: up;
}
.touch-left {
  grid-area: left;
}
.touch-right {
  grid-area: right;
}
.touch-down {
  grid-area: down;
}

.touch-action {
  grid-area: action;
  background: linear-gradient(
    180deg,
    rgba(255, 236, 143, 0.96),
    rgba(255, 214, 97, 0.9)
  );
  color: #805430;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.modal-root.is-hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 248, 213, 0.24),
      rgba(47, 77, 84, 0.6)
    ),
    rgba(32, 53, 58, 0.28);
  backdrop-filter: blur(12px);
}

.letter-modal {
  position: relative;
  z-index: 1;
  width: min(100%, 42rem);
  padding: 0.8rem;
  border-radius: 30px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.88),
      rgba(245, 255, 239, 0.72)
    ),
    linear-gradient(180deg, #93dfd4, #73b9ca);
  box-shadow: var(--shadow-card);
  transform-origin: center bottom;
}

.letter-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.45rem 0.85rem;
}

.icon-close {
  position: relative;
  width: 2.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(72, 104, 117, 0.08);
  cursor: pointer;
}

.icon-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 0.14rem;
  border-radius: 999px;
  background: #48627c;
}

.icon-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.icon-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.letter-paper {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0)),
    var(--paper);
  box-shadow:
    inset 0 0 0 1px rgba(91, 110, 124, 0.08),
    inset 0 0 0 0.7rem rgba(255, 235, 194, 0.28);
}

.letter-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0 48%, transparent 48%),
    linear-gradient(-135deg, rgba(255, 255, 255, 0.12) 0 48%, transparent 48%);
  opacity: 0.5;
  pointer-events: none;
}

.letter-seal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3.4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #ffe8de 0 20%,
    #f37a6a 21% 100%
  );
}

.letter-seal span {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
}

.letter-content {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 4.1rem 1.2rem 1.35rem;
}

.letter-kicker {
  font-size: 0.76rem;
  font-weight: 900;
  color: var(--accent-green);
}

.letter-content h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: #3e5572;
}

.letter-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(99, 126, 120, 0.24);
}

.signature {
  display: grid;
  gap: 0.14rem;
  color: #4a6570;
}

.signature span,
.stamp {
  font-size: 0.82rem;
}

.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  color: #8a554a;
  background: rgba(243, 122, 106, 0.12);
  border: 1px solid rgba(243, 122, 106, 0.28);
  font-weight: 900;
}

.is-locked {
  overflow: hidden;
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@media (max-width: 860px) {
  .world {
    min-height: 100dvh;
  }

  .hud-panel {
    padding: 0.9rem 1rem;
  }

  .avatar {
    width: 10.5%;
  }

  .pond-main {
    left: 5%;
    width: 19%;
    height: 16%;
  }

  .grass-patch-a {
    width: 21%;
  }

  .grass-patch-b,
  .grass-patch-c {
    width: 15%;
  }

  .creature-art-tangrowth {
    width: 24%;
    left: 4%;
    bottom: 20%;
  }

  .creature-art-smearguru {
    width: 17%;
    left: 20%;
    bottom: 12%;
  }

  .creature-art-mosslax {
    width: 18%;
    right: 8%;
    bottom: 18%;
  }

  .creature-art-peakychu {
    width: 14%;
    left: 50%;
    bottom: 8%;
  }

  .creature-art-smearguru-alt {
    width: 13%;
    right: 1%;
    bottom: 34%;
  }

  .game-hud {
    padding-inline: 0.75rem;
  }

  .letter-footer {
    align-items: start;
    flex-direction: column;
  }

  .touch-controls {
    display: grid;
    position: fixed;
    left: max(0.7rem, env(safe-area-inset-left));
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    z-index: 30;
  }

  .toolbar-panel {
    max-width: min(24rem, calc(100% - 1.5rem));
    margin-bottom: 0.2rem;
  }

  .world:has(.is-near-mailbox) .pokeball-ui {
    right: 0;
    bottom: 5vh;
    left: 0;
    width: fit-content;
    margin: auto;
  }
}

@media (max-width: 560px) {
  .toolbar-panel {
    max-width: calc(100% - 8.4rem);
    padding: 0.75rem 0.9rem;
  }

  .item-cluster-left {
    left: 10%;
    bottom: 30%;
  }

  .item-cluster-right {
    right: 9%;
    bottom: 33%;
  }

  .touch-controls {
    grid-template-columns: repeat(3, minmax(3.25rem, 3.8rem));
    gap: 0.38rem;
    padding: 0.58rem;
  }

  .interaction-prompt {
    width: calc(100% - 1.6rem);
    text-align: center;
    bottom: 6.6rem;
  }

  .creature-art-tangrowth {
    width: 28%;
    left: 2%;
    bottom: 21%;
  }

  .creature-art-smearguru {
    width: 20%;
    left: 16%;
    bottom: 12%;
  }

  .creature-art-mosslax {
    width: 22%;
    right: 4%;
    bottom: 18%;
  }

  .creature-art-peakychu {
    width: 17%;
    left: 48%;
    bottom: 8%;
  }

  .creature-art-smearguru-alt {
    width: 14%;
    right: 1%;
    bottom: 37%;
  }

  .pokeball-ui {
    bottom: 0.85rem;
    right: 0.85rem;
    min-height: 3.45rem;
    padding-right: 0.85rem;
  }

  .pokeball-ui-text {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}