:root {
  --ink: #40283e;
  --muted: #7e687b;
  --pink: #ff5f95;
  --pink-dark: #e9457d;
  --pink-soft: #fff0f5;
  --cream: #fffaf5;
  --card: rgba(255, 255, 255, 0.92);
  --line: #f0dce6;
  --purple: #7667df;
  --shadow: 0 18px 50px rgba(105, 54, 91, 0.13);
  --radius: 28px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #fff8f5;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(255, 221, 232, 0.95), transparent 28rem),
    radial-gradient(circle at 90% 40%, rgba(220, 211, 255, 0.62), transparent 34rem),
    linear-gradient(160deg, #fffaf6 0%, #fff7fb 56%, #f8f4ff 100%);
  font-family: ui-rounded, "SF Pro Rounded", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(118, 103, 223, 0.35);
  outline-offset: 3px;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.34;
  pointer-events: none;
}

.ambient-one {
  top: 16%;
  left: -210px;
  background: repeating-radial-gradient(circle, #ff92b4 0 2px, transparent 2px 19px);
}

.ambient-two {
  right: -220px;
  bottom: -110px;
  background: repeating-radial-gradient(circle, #9184eb 0 2px, transparent 2px 22px);
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  min-height: 82px;
  padding: 12px max(22px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid rgba(236, 213, 226, 0.7);
  background: rgba(255, 252, 250, 0.78);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.brand-mark,
.modal-brand span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 15px 15px 18px 18px;
  color: #fff;
  background: linear-gradient(145deg, #ff87ab, var(--pink));
  box-shadow: 0 8px 18px rgba(233, 69, 125, 0.28), inset 0 -4px 0 rgba(164, 39, 86, 0.14);
  font-size: 25px;
  font-weight: 1000;
  transform: rotate(-5deg);
}

.brand strong {
  display: block;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: 0.045em;
  line-height: 1;
}

.brand small {
  display: block;
  margin-top: 5px;
  color: var(--pink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.26em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(240, 220, 230, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.nav-link {
  padding: 10px 15px;
  border: 0;
  border-radius: 13px;
  color: #836c80;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: 180ms ease;
}

.nav-link:hover,
.nav-link.active {
  color: #c9346d;
  background: var(--pink-soft);
}

.account-zone {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.icon-button,
.account-button {
  min-height: 44px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(83, 43, 75, 0.06);
}

.icon-button {
  width: 44px;
  border-radius: 14px;
}

.account-button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px 5px 6px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 850;
}

.account-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #ff9dbb, #f95389);
  font-weight: 1000;
}

.app-shell {
  width: min(1320px, calc(100% - 44px));
  min-height: calc(100vh - 82px);
  margin: 0 auto;
  padding: 34px 0 72px;
}

.view {
  display: none;
  animation: view-in 260ms ease both;
}

.view.active {
  display: block;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-card {
  position: relative;
  display: grid;
  min-height: 476px;
  grid-template-columns: minmax(0, 0.98fr) minmax(440px, 1.02fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
}

.hero-card::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(221, 183, 203, 0.2) 1px, transparent 1px);
  background-size: 20px 20px;
  content: "";
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(42px, 5vw, 72px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d34178;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.16em;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #53c991;
  box-shadow: 0 0 0 5px rgba(83, 201, 145, 0.13);
}

.hero-copy h1 {
  margin: 18px 0 18px;
  color: #45273e;
  font-size: clamp(43px, 5vw, 67px);
  font-weight: 1000;
  letter-spacing: -0.052em;
  line-height: 1.06;
}

.hero-copy h1 span {
  color: var(--pink);
}

.hero-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 27px;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-button {
  border: 1px solid #f34c86;
  color: #fff;
  background: linear-gradient(145deg, #ff75a4, #f44f88);
  box-shadow: 0 11px 22px rgba(233, 69, 125, 0.24), inset 0 -3px 0 rgba(173, 39, 86, 0.18);
}

.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
  transform: translateY(-2px);
}

.primary-button:active,
.secondary-button:active,
.danger-button:active {
  transform: translateY(1px);
}

.primary-button:disabled {
  cursor: wait;
  filter: grayscale(0.35);
  opacity: 0.72;
}

.secondary-button {
  border: 1px solid var(--line);
  color: #6f5368;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 7px 20px rgba(74, 39, 67, 0.07);
}

.secondary-button.compact {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 12px;
  font-size: 13px;
}

.danger-button {
  border: 1px solid #ffd1dc;
  color: #d4376c;
  background: #fff2f6;
}

.full {
  width: 100%;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 31px;
  color: #8e7789;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.hero-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-stats b {
  color: var(--ink);
  font-size: 13px;
}

.hero-art {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: linear-gradient(150deg, #fff4f8, #f8edff 60%, #e8e4ff);
}

.hero-art::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent 24%);
  content: "";
}

.hero-sun {
  position: absolute;
  top: 50px;
  right: 80px;
  width: 105px;
  height: 105px;
  border: 16px solid rgba(255, 255, 255, 0.54);
  border-radius: 50%;
  background: #ffd378;
  box-shadow: 0 0 0 28px rgba(255, 218, 139, 0.14);
}

.cloud,
.map-cloud {
  position: absolute;
  width: 118px;
  height: 34px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
}

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

.cloud::before,
.map-cloud::before { left: 20px; width: 46px; height: 46px; }
.cloud::after,
.map-cloud::after { right: 18px; width: 63px; height: 63px; }
.cloud-a { top: 84px; left: 80px; transform: scale(0.72); }
.cloud-b { top: 160px; right: 16px; transform: scale(0.52); opacity: 0.65; }

.hill {
  position: absolute;
  bottom: -175px;
  border-radius: 50% 50% 0 0;
  transform: rotate(-5deg);
}

.hill-back {
  right: -100px;
  width: 630px;
  height: 410px;
  background: #cfc4f6;
}

.hill-front {
  right: -20px;
  bottom: -218px;
  width: 760px;
  height: 420px;
  background: #a99ae6;
}

.sprinkle {
  position: absolute;
  z-index: 3;
  color: #fff;
  font-weight: 1000;
}

.sprinkle-a { top: 160px; left: 32%; font-size: 27px; transform: rotate(18deg); }
.sprinkle-b { top: 64px; left: 45%; color: #ff84aa; font-size: 14px; }
.sprinkle-c { right: 12%; bottom: 28%; color: #ffd77d; font-size: 22px; }

.hero-cookie {
  --cookie-color: #f7a9b8;
  --accent-color: #ff4f87;
  position: absolute;
  z-index: 5;
  top: 126px;
  left: 50%;
  width: 184px;
  height: 224px;
  border: 7px solid #fff;
  border-radius: 47% 47% 42% 42%;
  background: var(--cookie-color);
  box-shadow: 0 22px 0 rgba(90, 65, 118, 0.12), inset -14px -15px 0 rgba(118, 57, 89, 0.08);
  transform: translateX(-43%) rotate(5deg);
  animation: hero-bounce 1.6s ease-in-out infinite;
}

@keyframes hero-bounce {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -10px; rotate: -2deg; }
}

.hero-cookie::before,
.hero-cookie::after {
  position: absolute;
  top: 85px;
  width: 19px;
  height: 23px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #4b2c45;
  content: "";
  box-shadow: inset 5px 1px 0 #fff;
}

.hero-cookie::before { left: 45px; }
.hero-cookie::after { right: 45px; }
.hero-eye { display: none; }

.hero-smile {
  position: absolute;
  top: 127px;
  left: 71px;
  width: 42px;
  height: 24px;
  border-bottom: 6px solid #8e3e60;
  border-radius: 50%;
}

.hero-accessory {
  position: absolute;
  z-index: 3;
  top: -43px;
  left: 53px;
  font-size: 70px;
  filter: drop-shadow(0 5px 0 rgba(101, 54, 88, 0.1));
  transform: rotate(-8deg);
}

.hero-arm,
.hero-leg {
  position: absolute;
  z-index: -1;
  display: block;
  width: 30px;
  border: 7px solid #fff;
  border-radius: 30px;
  background: var(--accent-color);
}

.hero-arm { top: 114px; height: 91px; }
.arm-left { left: -19px; transform: rotate(48deg); }
.arm-right { right: -25px; transform: rotate(-55deg); }
.hero-leg { bottom: -46px; height: 78px; }
.leg-left { left: 31px; transform: rotate(17deg); }
.leg-right { right: 30px; transform: rotate(-18deg); }

.hero-trail {
  position: absolute;
  z-index: 2;
  top: 270px;
  left: 78px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: rotate(-8deg);
}

.section-heading,
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.section-heading {
  margin: 49px 2px 20px;
}

.section-heading h2,
.page-heading h1 {
  margin: 6px 0 0;
  font-weight: 1000;
  letter-spacing: -0.035em;
}

.section-heading h2 { font-size: 29px; }
.page-heading h1 { font-size: clamp(34px, 4vw, 48px); }
.page-heading { align-items: center; margin: 8px 2px 28px; }
.page-heading p { margin: 9px 0 0; color: var(--muted); }

.soft-badge {
  padding: 8px 12px;
  border: 1px solid #f0dce6;
  border-radius: 999px;
  color: #96788d;
  background: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 850;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.map-card {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 35px rgba(83, 48, 77, 0.09);
  cursor: pointer;
  transition: 200ms ease;
}

.map-card:hover,
.map-card.selected {
  border-color: #ff91b2;
  box-shadow: 0 15px 35px rgba(235, 75, 132, 0.16);
  transform: translateY(-4px);
}

.map-card.selected::after {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--pink);
  box-shadow: 0 4px 12px rgba(186, 42, 95, 0.25);
  content: "✓";
  font-size: 12px;
  font-weight: 1000;
}

.map-illustration {
  position: relative;
  height: 166px;
  overflow: hidden;
}

.map-illustration::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px);
  background-size: 16px 16px;
  content: "";
}

.berry-map { background: linear-gradient(#ffd6e3, #fbb3cc); }
.cloud-map { background: linear-gradient(#cfdcff, #9eb4f0); }
.cocoa-map { background: linear-gradient(#614463, #3b2944); }
.wanglang-map { background: linear-gradient(#ffe7bb, #ffc58f); }
.siph-map { background: linear-gradient(#bfeaff, #7fc8e8); }
.rama7-map { background: linear-gradient(#d8c9ff, #8fa8df); }
.map-number { position: absolute; top: 12px; left: 16px; color: rgba(255, 255, 255, 0.72); font-weight: 1000; }
.map-icon { position: absolute; z-index: 4; top: 55px; left: 50%; font-size: 56px; filter: drop-shadow(0 8px 0 rgba(80, 43, 75, 0.12)); transform: translateX(-50%); }
.map-cloud { top: 39px; left: 35px; transform: scale(0.42); }
.map-land { position: absolute; bottom: -55px; width: 110%; height: 110px; border-radius: 50% 50% 0 0; }
.land-one { left: -40px; background: #ea89ad; transform: rotate(5deg); }
.land-two { right: -90px; bottom: -72px; background: #dc6695; transform: rotate(-8deg); }
.oven-tower { position: absolute; bottom: -5px; width: 50px; border-radius: 18px 18px 0 0; background: #806fd1; box-shadow: inset 0 10px 0 rgba(255,255,255,.18); }
.tower-a { left: 58px; height: 84px; }
.tower-b { right: 58px; height: 111px; }
.cave-crystal { position: absolute; bottom: 22px; width: 42px; height: 91px; background: linear-gradient(135deg, #f29db5, #9b5cb1); clip-path: polygon(50% 0, 100% 35%, 84% 100%, 16% 100%, 0 35%); }
.crystal-a { left: 55px; transform: rotate(-12deg); }
.crystal-b { right: 54px; height: 63px; transform: rotate(16deg); }
.cave-floor { position: absolute; right: -20%; bottom: -75px; width: 140%; height: 120px; border-radius: 50% 50% 0 0; background: #2e2038; }

.market-awning {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 48px;
  background: repeating-linear-gradient(90deg, #388b72 0 28px, #d9f2c7 28px 56px);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 94% 100%, 88% 72%, 82% 100%, 76% 72%, 70% 100%, 64% 72%, 58% 100%, 52% 72%, 46% 100%, 40% 72%, 34% 100%, 28% 72%, 22% 100%, 16% 72%, 10% 100%, 4% 72%, 0 100%);
  opacity: .85;
}

.market-stall {
  position: absolute;
  z-index: 2;
  bottom: 19px;
  display: grid;
  width: 88px;
  height: 66px;
  place-items: center;
  border: 5px solid #9c593d;
  border-radius: 7px 7px 0 0;
  background: #f6a75e;
  font-size: 25px;
  box-shadow: inset 0 11px 0 #fff0ce;
}

.market-stall.stall-a { left: 20px; transform: rotate(-2deg); }
.market-stall.stall-b { right: 18px; background: #ec7f8d; transform: rotate(2deg); }
.market-lane { position: absolute; right: -10%; bottom: -44px; width: 120%; height: 75px; border-radius: 50% 50% 0 0; background: #d38361; }

.siph-river,
.rama-river { position: absolute; right: 0; bottom: 0; left: 0; height: 38px; background: repeating-linear-gradient(170deg, rgba(255,255,255,.4) 0 5px, transparent 5px 29px), #69b9dd; }
.siph-building { position: absolute; bottom: 22px; left: 50%; width: 176px; height: 108px; border: 5px solid rgba(255,255,255,.92); border-radius: 10px 10px 0 0; background: repeating-linear-gradient(0deg, #d9edf2 0 12px, #79a9ba 12px 18px); transform: translateX(-50%); }
.siph-building::before { position: absolute; top: -26px; left: 47px; width: 72px; height: 130px; border: 4px solid #fff; border-radius: 7px 7px 0 0; background: repeating-linear-gradient(90deg, #7ab2c6 0 10px, #c8ecf2 10px 16px); content: ""; }
.siph-building i { position: absolute; z-index: 2; top: -22px; left: 57px; width: 8px; height: 126px; background: #f2c84f; box-shadow: 18px 0 #e66776, 36px 0 #6fc598, 54px 0 #6c8dd5; opacity: .82; }
.siph-building b { position: absolute; z-index: 3; top: 13px; right: 15px; color: #ef5c72; font-size: 24px; }
.siph-tree { position: absolute; z-index: 3; bottom: 25px; width: 17px; height: 51px; border-radius: 8px; background: #80634c; }
.siph-tree::before { position: absolute; top: -18px; left: -17px; width: 51px; height: 42px; border-radius: 50%; background: #4da77f; content: ""; }
.siph-tree.tree-a { left: 31px; }
.siph-tree.tree-b { right: 28px; transform: scale(.78); }

.rama-river { height: 51px; background-color: #668ac2; }
.rama-bridge { position: absolute; z-index: 2; right: -7%; bottom: 37px; left: -7%; height: 20px; border: 4px solid #e9edf4; background: #9098aa; transform: rotate(-2deg); }
.rama-bridge::before { position: absolute; top: -9px; right: 0; left: 0; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 15px, #e46b74 15px 25px, transparent 25px 39px); content: ""; }
.rama-bridge i { position: absolute; top: 19px; width: 19px; height: 56px; background: #afb5c2; }
.rama-bridge i:first-child { left: 24%; }
.rama-bridge i:last-child { right: 24%; }
.rama-lamp { position: absolute; z-index: 3; bottom: 55px; width: 4px; height: 72px; background: #f5f7ff; }
.rama-lamp::before { position: absolute; top: 0; left: 0; width: 21px; height: 4px; background: inherit; content: ""; }
.rama-lamp::after { position: absolute; top: 2px; left: 16px; width: 9px; height: 9px; border-radius: 50%; background: #ffe27b; box-shadow: 0 0 10px #fff1a6; content: ""; }
.rama-lamp.lamp-a { left: 26px; }
.rama-lamp.lamp-b { right: 42px; transform: scale(.86); }

.map-card-body {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
}

.difficulty {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.06em;
}

.difficulty.easy { color: #168257; background: #e6f8ef; }
.difficulty.medium { color: #7b5dce; background: #efecff; }
.difficulty.hard { color: #bb486c; background: #ffedf3; }
.map-card h3 { margin: 8px 0 5px; font-size: 17px; font-weight: 950; }
.map-card p { margin: 0; color: #957e90; font-size: 12px; line-height: 1.5; }
.map-play { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 13px; color: #d23f76; background: #fff0f5; font-size: 21px; font-weight: 900; cursor: pointer; }

/* Character creator */
.creator-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(470px, 1.2fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.preview-panel {
  display: flex;
  min-height: 760px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 35px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.8), transparent 38%),
    linear-gradient(145deg, #ffe4ed, #f0e8ff);
}

.preview-stage {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
}

.preview-stage canvas {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  animation: preview-float 2.1s ease-in-out infinite;
}

@keyframes preview-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.preview-glow {
  position: absolute;
  inset: 17%;
  border: 2px dashed rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.18);
  animation: slow-spin 18s linear infinite;
}

@keyframes slow-spin { to { transform: rotate(360deg); } }
.preview-shadow { width: 150px; height: 25px; margin-top: -44px; border-radius: 50%; background: rgba(77, 48, 87, 0.13); filter: blur(5px); }
.preview-name { position: relative; z-index: 3; margin-top: 19px; font-size: 24px; font-weight: 1000; }
.preview-role { margin-top: 4px; color: #d44778; font-size: 10px; font-weight: 950; letter-spacing: 0.18em; }

.wardrobe-concept {
  width: min(100%, 360px);
  margin: 28px 0 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 28px rgba(77, 48, 87, 0.09);
}

.wardrobe-concept button {
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #f8e9e7;
  cursor: zoom-in;
}

.wardrobe-concept img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 180ms ease;
}

.wardrobe-concept button:hover img { transform: scale(1.025); }
.wardrobe-concept figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px 3px; }
.wardrobe-concept figcaption b { color: #b53767; font-size: 10px; letter-spacing: 0.08em; }
.wardrobe-concept figcaption span { color: #8c7185; font-size: 10px; line-height: 1.45; }

.creator-controls {
  padding: clamp(28px, 4vw, 52px);
}

.character-choice-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}

.field-label,
.creator-controls legend,
.auth-modal label {
  display: block;
  margin-bottom: 9px;
  color: #60495d;
  font-size: 12px;
  font-weight: 950;
}

.input-wrap,
.password-field {
  position: relative;
}

.input-wrap input,
.auth-modal input {
  width: 100%;
  height: 49px;
  padding: 0 52px 0 15px;
  border: 1px solid #ead6e1;
  border-radius: 13px;
  color: var(--ink);
  background: #fffafd;
  transition: border 160ms, box-shadow 160ms;
}

.input-wrap input:focus,
.auth-modal input:focus {
  border-color: #ee82aa;
  box-shadow: 0 0 0 4px rgba(255, 111, 159, 0.11);
  outline: none;
}

.input-wrap > span {
  position: absolute;
  top: 16px;
  right: 15px;
  color: #ae96a8;
  font-size: 11px;
  font-weight: 800;
}

.creator-controls fieldset {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.color-choice {
  position: relative;
  width: 45px;
  height: 45px;
  border: 4px solid #fff;
  border-radius: 14px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px #e6d4df;
  cursor: pointer;
}

.color-choice[data-value="#F7A9B8"] { --swatch: #F7A9B8; }
.color-choice[data-value="#9FE3C2"] { --swatch: #9FE3C2; }
.color-choice[data-value="#A9C5F7"] { --swatch: #A9C5F7; }
.color-choice[data-value="#D9A06F"] { --swatch: #D9A06F; }
.color-choice[data-value="#FF4F87"] { --swatch: #FF4F87; }
.color-choice[data-value="#5DCC9A"] { --swatch: #5DCC9A; }
.color-choice[data-value="#677BE7"] { --swatch: #677BE7; }
.color-choice[data-value="#A85C3C"] { --swatch: #A85C3C; }

.color-choice.selected {
  box-shadow: 0 0 0 3px var(--pink);
}

.color-choice.selected::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  content: "✓";
  font-weight: 1000;
  text-shadow: 0 1px 4px rgba(0,0,0,.22);
}

.tile-choice {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid #ead9e2;
  border-radius: 13px;
  color: #765d70;
  background: #fffafd;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.tile-choice span { font-size: 18px; }
.tile-choice.selected { border-color: #f06c9d; color: #c3376c; background: #fff0f5; box-shadow: 0 0 0 2px rgba(240, 108, 157, 0.1); }
.creator-controls .primary-button { margin-top: 32px; }

.wardrobe-dialog {
  width: min(980px, calc(100vw - 30px));
  text-align: center;
}

.wardrobe-dialog img {
  display: block;
  width: 100%;
  margin-top: 22px;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(72, 42, 65, 0.15);
}

/* Leaderboard */
.leaderboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  overflow-x: auto;
  scrollbar-width: none;
}

.leader-tab {
  min-height: 43px;
  flex: 0 0 auto;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: #816a7c;
  background: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.leader-tab.active { border-color: #ff90b2; color: #c8336b; background: #fff0f5; }
.leaderboard-panel { min-height: 440px; padding: 24px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.podium { display: grid; max-width: 760px; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; margin: 5px auto 28px; }
.podium:empty { display: none; }
.podium-card { display: flex; min-height: 165px; flex-direction: column; align-items: center; justify-content: flex-end; padding: 18px 12px; border-radius: 21px; text-align: center; }
.podium-card.place-1 { min-height: 205px; grid-column: 2; grid-row: 1; color: #805b19; background: linear-gradient(#fff7d4, #ffe29a); }
.podium-card.place-2 { grid-column: 1; grid-row: 1; color: #5f667d; background: linear-gradient(#f5f6fb, #dce1ef); }
.podium-card.place-3 { grid-column: 3; grid-row: 1; color: #79513c; background: linear-gradient(#ffeadc, #eec0a4); }
.podium-rank { margin-bottom: 5px; font-size: 28px; }
.podium-avatar, .runner-avatar { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; font-weight: 1000; box-shadow: 0 6px 16px rgba(70,42,67,.16); }
.podium-avatar { width: 62px; height: 62px; margin-bottom: 9px; font-size: 22px; }
.podium-card b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-card small { margin-top: 3px; opacity: .72; }
.podium-card strong { margin-top: 8px; font-size: 19px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 15px; color: #a08799; font-size: 10px; font-weight: 950; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
td { padding: 13px 15px; border-top: 1px solid #f2e5ec; font-size: 13px; }
th:not(:nth-child(2)), td:not(:nth-child(2)) { text-align: center; }
.rank-number { font-size: 16px; font-weight: 1000; }
.runner { display: flex; min-width: 180px; align-items: center; gap: 10px; }
.runner-avatar { width: 38px; height: 38px; flex: 0 0 auto; }
.runner-meta b, .runner-meta small { display: block; }
.runner-meta small { margin-top: 2px; color: #a2899b; }
.score-cell { color: #d33d74; font-size: 16px; font-weight: 1000; }
.empty-state, .loading-state { display: flex; min-height: 350px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state > span { font-size: 54px; }
.empty-state h3 { margin: 13px 0 5px; font-size: 22px; }
.empty-state p { margin: 0 0 18px; color: var(--muted); }
.loading-state { gap: 12px; color: var(--muted); }
.loader { width: 30px; height: 30px; border: 4px solid #f5dce6; border-top-color: var(--pink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Game */
.game-view { width: min(1480px, calc(100vw - 26px)); margin-left: 50%; transform: translateX(-50%); }
.game-topline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 12px; }
.game-topline > :last-child { justify-self: end; }
.game-map-label { text-align: center; }
.game-map-label small, .game-map-label strong { display: block; }
.game-map-label small { color: var(--muted); font-size: 10px; }
.game-map-label strong { margin-top: 2px; font-size: 16px; }
.game-shell { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; border: 5px solid rgba(255,255,255,.94); border-radius: 28px; background: #f9c6d6; box-shadow: 0 24px 60px rgba(73,44,69,.22); touch-action: none; }
.game-shell canvas { display: block; width: 100%; height: 100%; }
.game-hud { position: absolute; z-index: 5; top: 15px; left: 15px; display: flex; gap: 8px; }
.hud-chip { min-width: 104px; padding: 9px 13px; border: 2px solid rgba(255,255,255,.92); border-radius: 15px; color: #5d3b58; background: rgba(255,255,255,.78); box-shadow: 0 7px 18px rgba(75,38,66,.12); backdrop-filter: blur(10px); }
.hud-chip small, .hud-chip b { display: block; }
.hud-chip small { color: #95798d; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.hud-chip b { margin-top: 1px; font-size: 20px; font-weight: 1000; }
.energy-chip { min-width: 175px; }
.energy-track { display: block; overflow: hidden; width: 100%; height: 10px; margin-top: 7px; border: 2px solid #fff; border-radius: 999px; background: #eadde5; }
.energy-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#55c997,#b7e65c); transition: width 120ms linear; }
.game-countdown { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; color: #fff; font-size: clamp(90px, 15vw, 170px); font-weight: 1000; text-shadow: 0 9px 0 rgba(85,42,75,.18), 0 0 35px rgba(255,255,255,.7); pointer-events: none; }
.game-countdown.hidden { display: none; }
.pause-button { position: absolute; z-index: 6; top: 15px; right: 15px; width: 44px; height: 44px; border: 2px solid #fff; border-radius: 14px; color: #6d4c67; background: rgba(255,255,255,.78); font-weight: 1000; cursor: pointer; backdrop-filter: blur(10px); }
.pause-overlay { position: absolute; z-index: 10; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; background: rgba(53,31,55,.58); backdrop-filter: blur(8px); }
.pause-overlay[hidden] { display: none; }
.pause-overlay span { font-size: 42px; font-weight: 1000; }
.touch-controls { position: absolute; z-index: 7; right: 18px; bottom: 18px; left: 18px; display: none; justify-content: space-between; pointer-events: none; }
.touch-controls button { display: flex; width: 94px; height: 60px; align-items: center; justify-content: center; gap: 5px; border: 2px solid rgba(255,255,255,.9); border-radius: 19px; color: #fff; background: rgba(68,42,66,.34); font-size: 11px; font-weight: 950; pointer-events: auto; backdrop-filter: blur(8px); }
.touch-controls span { font-size: 25px; }
.control-hint { margin: 13px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
kbd { padding: 3px 6px; border: 1px solid #e1cad7; border-bottom-width: 3px; border-radius: 6px; background: #fff; font-family: inherit; font-size: 10px; font-weight: 850; }

/* Modals */
.modal {
  width: min(440px, calc(100vw - 30px));
  padding: 34px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 28px;
  color: var(--ink);
  background: rgba(255,255,255,.96);
  box-shadow: 0 28px 100px rgba(59,31,55,.3);
}

.modal::backdrop { background: rgba(57,34,55,.42); backdrop-filter: blur(8px); }
.modal-close { position: absolute; top: 13px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 11px; color: #9c8195; background: #f9eef3; font-size: 23px; cursor: pointer; }
.modal-brand { display: flex; justify-content: center; }
.modal h2 { margin: 17px 0 5px; font-size: 27px; font-weight: 1000; text-align: center; }
.modal > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 23px 0 20px; padding: 5px; border-radius: 14px; background: #f9edf3; }
.auth-tab { height: 38px; border: 0; border-radius: 10px; color: #94798d; background: transparent; font-size: 12px; font-weight: 900; cursor: pointer; }
.auth-tab.active { color: #c8326b; background: #fff; box-shadow: 0 4px 12px rgba(80,40,72,.08); }
.auth-modal label { margin-top: 14px; }
.auth-modal input { padding-right: 15px; }
.password-field input { padding-right: 48px; }
.password-field button { position: absolute; top: 5px; right: 6px; width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.form-helper { min-height: 18px; margin: 9px 0 17px; color: #9f8798; font-size: 11px; }
.form-helper.error { color: #d83b6f; }
.account-profile { display: flex; align-items: center; gap: 15px; margin: 7px 0 25px; }
.big-avatar { display: grid; width: 66px; height: 66px; place-items: center; border: 4px solid #fff; border-radius: 20px; color: #fff; background: linear-gradient(145deg,#ff9ab9,#f55087); box-shadow: 0 10px 22px rgba(218,54,111,.2); font-size: 25px; font-weight: 1000; transform: rotate(-4deg); }
.account-profile small { color: var(--muted); }
.account-profile h2 { margin: 2px 0 0; text-align: left; }
.account-modal .danger-button { margin-top: 10px; }
.result-modal { text-align: center; }
.result-medal { margin-top: -7px; font-size: 65px; filter: drop-shadow(0 9px 0 rgba(92,57,42,.1)); }
.result-modal h2 { margin-top: 8px; }
.result-score { margin: 19px 0 13px; padding: 17px; border-radius: 19px; color: #b62b63; background: linear-gradient(135deg,#fff0f5,#fff7ea); }
.result-score small, .result-score strong { display: block; }
.result-score small { color: #a18498; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.result-score strong { margin-top: 1px; font-size: 42px; font-weight: 1000; }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.result-grid > div { padding: 11px 4px; border: 1px solid #f0e0e8; border-radius: 13px; background: #fffafd; }
.result-grid small, .result-grid b { display: block; }
.result-grid small { color: #a08799; font-size: 9px; }
.result-grid b { margin-top: 2px; font-size: 14px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.toast { position: fixed; z-index: 100; right: 20px; bottom: 20px; max-width: min(380px,calc(100vw - 40px)); padding: 13px 17px; border: 1px solid rgba(255,255,255,.9); border-radius: 14px; color: #fff; background: rgba(65,39,61,.93); box-shadow: 0 15px 35px rgba(55,32,51,.25); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateY(18px); transition: 220ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: rgba(37,141,98,.95); }
.toast.error { background: rgba(193,48,93,.96); }

@media (max-width: 980px) {
  .topbar { grid-template-columns: auto 1fr auto; padding-inline: 18px; }
  .nav { justify-self: center; }
  .nav-link { padding-inline: 10px; font-size: 0; }
  .nav-link span { font-size: 18px; }
  .account-button #accountLabel { display: none; }
  .account-button { padding-right: 6px; }
  .hero-card { grid-template-columns: 1fr 0.83fr; }
  .hero-copy { padding: 46px 36px; }
  .hero-art { min-width: 350px; }
  .hero-cookie { left: 48%; transform: translateX(-45%) scale(.88); }
  .map-grid { grid-template-columns: 1fr 1fr; }
  .map-card:last-child:nth-child(odd) { grid-column: span 2; }
  .creator-layout { grid-template-columns: 0.82fr 1.18fr; }
  .preview-panel { padding-inline: 12px; }
  .character-choice-groups { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { min-height: 68px; grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px 12px; }
  .brand-mark { width: 40px; height: 40px; font-size: 21px; }
  .brand > span:last-child { display: none; }
  .nav { justify-self: center; gap: 2px; padding: 4px; }
  .nav-link { padding: 8px 10px; }
  .account-zone { gap: 5px; }
  .icon-button { width: 40px; min-height: 40px; }
  .account-button { min-height: 40px; }
  .account-avatar { width: 28px; height: 28px; }
  .app-shell { width: min(100% - 24px, 1320px); min-height: calc(100vh - 68px); padding-top: 18px; }
  .hero-card { display: flex; min-height: auto; flex-direction: column; border-radius: 28px; }
  .hero-copy { padding: 34px 24px 27px; }
  .hero-copy h1 { margin-top: 12px; font-size: clamp(38px, 12vw, 56px); }
  .hero-copy > p { font-size: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions button { width: 100%; }
  .hero-stats { gap: 11px; margin-top: 22px; }
  .hero-art { min-width: 0; min-height: 315px; }
  .hero-cookie { top: 74px; left: 50%; transform: translateX(-50%) scale(.75); }
  .hero-sun { top: 27px; right: 36px; transform: scale(.72); }
  .hill-back { bottom: -225px; }
  .hill-front { bottom: -260px; }
  .section-heading, .page-heading { align-items: flex-start; flex-direction: column; }
  .section-heading { margin-top: 36px; }
  .section-heading h2 { font-size: 25px; }
  .map-grid { grid-template-columns: 1fr; }
  .map-card:last-child:nth-child(odd) { grid-column: auto; }
  .map-illustration { height: 150px; }
  .map-card-body { min-height: 135px; }
  .creator-layout { display: block; border-radius: 25px; }
  .preview-panel { min-height: auto; padding: 20px 16px 28px; }
  .preview-stage { max-width: 320px; }
  .preview-shadow { margin-top: -36px; }
  .creator-controls { padding: 27px 20px; }
  .tile-row { display: grid; grid-template-columns: 1fr 1fr; }
  .tile-choice { justify-content: center; }
  .page-heading h1 { font-size: 34px; }
  .leaderboard-heading { flex-direction: row; align-items: flex-end; }
  .leaderboard-heading p { display: none; }
  .leaderboard-panel { padding: 15px; }
  .podium { gap: 5px; }
  .podium-card { min-height: 135px; padding: 12px 5px; font-size: 11px; }
  .podium-card.place-1 { min-height: 170px; }
  .podium-avatar { width: 49px; height: 49px; }
  th:nth-child(3), td:nth-child(3) { display: none; }
  th, td { padding-inline: 8px; }
  .game-view { width: calc(100vw - 12px); }
  .game-topline { margin-inline: 6px; }
  .game-shell { border-width: 3px; border-radius: 18px; }
  .game-hud { top: 8px; left: 8px; gap: 4px; }
  .hud-chip { min-width: 69px; padding: 6px 8px; border-width: 1px; border-radius: 10px; }
  .hud-chip b { font-size: 14px; }
  .energy-chip { min-width: 105px; }
  .pause-button { top: 8px; right: 8px; width: 34px; height: 34px; border-width: 1px; }
  .touch-controls { display: flex; right: 10px; bottom: 10px; left: 10px; }
  .touch-controls button { width: 78px; height: 48px; border-radius: 15px; }
  .control-hint { display: none; }
  .modal { padding: 29px 23px; }
}

@media (max-width: 430px) {
  .nav-link { padding-inline: 8px; }
  .icon-button { display: none; }
  .hero-copy h1 { font-size: 39px; }
  .hero-stats { justify-content: space-between; font-size: 9px; }
  .hero-art { min-height: 285px; }
  .section-heading .soft-badge { display: none; }
  .page-heading .soft-badge { display: none; }
  .leaderboard-heading { gap: 6px; }
  .leaderboard-heading h1 { font-size: 29px; }
  .game-topline { grid-template-columns: auto 1fr auto; }
  .game-topline .secondary-button { width: 40px; overflow: hidden; padding: 0; font-size: 0; }
  .game-topline .secondary-button::first-letter { font-size: 17px; }
  .game-map-label strong { font-size: 13px; }
  .energy-chip { display: none; }
  .result-actions { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 580px) {
  body.game-active .topbar { display: none; }
  body.game-active .app-shell { width: 100vw; min-height: 100vh; padding: 0; }
  body.game-active .game-view { width: 100vw; }
  body.game-active .game-topline, body.game-active .control-hint { display: none; }
  body.game-active .game-shell { width: 100vw; height: 100vh; border: 0; border-radius: 0; aspect-ratio: auto; }
}

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