@font-face {
  font-family: "Galmuri11";
  src: url("https://cdn.jsdelivr.net/npm/galmuri@2.40.3/dist/Galmuri11.woff2") format("woff2");
  font-display: swap;
}
:root {
  --navy: #141b2b;
  --navy2: #1b2233;
  --midnight: #1c2538;
  --gold: #d6a546;
  --gold-light: #f1d68c;
  --gold-deep: #9a7228;
  --cream: #f8f0e3;
  --paper: #fff9f0;
  --coral: #e8806b;
  --cocoa: #4a2c20;
  --blush: #f4ded5;
  --muted: rgba(248, 240, 227, 0.68);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.3, 1.4, .5, 1);
  --sky-top: #bfe1f4;
  --sky-bottom: #fff9f0;
  --ground-top: #f3ebdd;
  --ground-bottom: #e8dcc6;
  --shadow: rgba(74, 44, 32, 0.28);
  --mote: rgba(255, 246, 222, 0.9);
  --glow: rgba(241, 214, 140, 0.16);
  /* The plushie editions: one gold and one night per world, remapped by the themes. */
  --tier-gold-1: #e2b252;
  --tier-gold-2: #f6d98a;
  --tier-gold-3: #fff1c2;
  --tier-night-1: #1b2050;
  --tier-night-2: #2d2a6e;
  --tier-star: #fff8e6;
  --tier-thread: repeating-linear-gradient(115deg, rgba(255, 255, 255, .26) 0 .6px, transparent .6px 1.6px, rgba(122, 74, 18, .14) 1.6px 2.2px, transparent 2.2px 3.2px);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--cream);
  background: var(--navy);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
html[data-time="morning"] {
  --sky-top: #ffd5b3;
  --sky-bottom: #fff3e3;
  --ground-top: #f8e4ce;
  --ground-bottom: #f0d3b8;
  --shadow: rgba(122, 64, 30, 0.26);
  --glow: rgba(255, 196, 150, 0.18);
}
html[data-time="day"] {
  --sky-top: #bfe1f4;
  --sky-bottom: #fff9f0;
  --ground-top: #f3ebdd;
  --ground-bottom: #e8dcc6;
  --glow: rgba(241, 214, 140, 0.16);
}
html[data-time="evening"] {
  --sky-top: #f09a86;
  --sky-bottom: #c8b6e6;
  --ground-top: #b9a5d8;
  --ground-bottom: #a08dc8;
  --shadow: rgba(60, 34, 80, 0.32);
  --mote: rgba(255, 228, 204, 0.85);
  --glow: rgba(232, 128, 107, 0.2);
}
html[data-time="night"] {
  --sky-top: #1c2150;
  --sky-bottom: #36316e;
  --ground-top: #2b2860;
  --ground-bottom: #221f4c;
  --shadow: rgba(6, 6, 24, 0.5);
  --mote: rgba(241, 214, 140, 0.95);
  --glow: rgba(120, 110, 220, 0.18);
}
* { box-sizing: border-box; }
html {
  min-height: 100%;
  background: var(--navy);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background: url("/grain.svg");
  opacity: 0.035;
}
body.has-sheet { overflow: hidden; }
main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) max(16px, 6vw) max(12px, env(safe-area-inset-bottom));
}
main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% 36%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, #161e30 55%, var(--navy) 100%);
  transition: background .9s ease;
}
.topbar, .plate, .window { order: -2; }
.pet-stats { order: -1; }
p { line-height: 1.6; margin: 0; }
h1, h2 { margin: 0; }

/* Top bar: wordmark, then 꾸미기, 설정 and the enamel days pin */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
  min-height: 52px;
}
.wordmark {
  justify-self: start;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .32em;
  color: var(--gold);
}
.level-pin {
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 40px;
  min-height: 40px;
  margin: 0;
  border: 0;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #27324d, var(--navy2) 70%);
  color: var(--gold-light);
  font-size: .875rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 3px rgba(8, 11, 19, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4);
}
.level-pin svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: var(--coral);
  filter: drop-shadow(0 1px 0 #b4503d);
}
.level-pin::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 13px;
  width: 9px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(-12deg);
}
.level-pin:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}
.topbar-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar :is(.theme-btn, .gear-btn) {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--navy2);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px rgba(8, 11, 19, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4);
}
.topbar .theme-btn .swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(#d6a546 0 25%, #29adff 0 50%, #ff8fab 0 75%, #e9e7ef 0);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.25);
}
.topbar .gear-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
html:not(.has-app) :is(.theme-btn, .gear-btn) { display: none; }
@media (max-width: 380px) {
  .topbar-end { gap: 6px; }
  .topbar :is(.theme-btn, .gear-btn) { width: 36px; height: 36px; min-height: 36px; }
  .topbar .theme-btn .swatch,
  .topbar .gear-btn svg { width: 20px; height: 20px; }
  .topbar .level-pin { height: 36px; min-height: 36px; padding: 0 12px 0 10px; }
}

/* Nameplate */
.plate {
  text-align: center;
}
.time-line {
  min-height: 1.4em;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
.nameplate {
  width: 100%;
  font-size: clamp(2rem, 9.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--cream);
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}
.nameplate.is-long { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
.nameplate.is-longer { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
.nameplate.is-placeholder { color: rgba(248, 240, 227, 0.42); }
.nameplate.is-placeholder::after,
.nameplate.is-typing::after {
  content: "";
  display: inline-block;
  width: .07em;
  height: .86em;
  margin-left: .1em;
  vertical-align: -0.06em;
  border-radius: 2px;
  background: var(--gold-light);
  animation: caret 1.05s steps(2, jump-none) infinite;
}
@keyframes caret {
  from { opacity: 1; }
  to { opacity: 0; }
}
.count {
  margin-top: 2px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gold-light);
}

/* The window: a lit room inside the device */
.window {
  position: relative;
  flex: none;
  height: clamp(230px, 40dvh, 360px);
  margin: 12px 0 8px;
  border-radius: var(--win-r, 32px);
  container-type: size;
  box-shadow:
    0 0 0 3px var(--gold-light),
    0 0 0 8px var(--navy2),
    0 0 0 9px rgba(241, 214, 140, 0.12),
    0 22px 40px -10px rgba(0, 0, 0, 0.6),
    0 0 90px -12px var(--glow);
  transition: box-shadow .9s ease;
}
.is-home .window,
.is-stranger .window {
  flex: 1 1 0;
  height: auto;
  min-height: 190px;
  max-height: 520px;
}
.window::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 3;
  width: 18px;
  height: 24px;
  margin-left: -9px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 38%, var(--navy) 0 2.8px, transparent 3.3px) no-repeat,
    linear-gradient(var(--navy), var(--navy)) 50% 72% / 2.6px 7px no-repeat,
    linear-gradient(180deg, var(--gold-light), var(--gold) 65%, var(--gold-deep));
  box-shadow: 0 0 0 1.5px var(--navy2), 0 2px 4px rgba(0, 0, 0, 0.45);
}
.window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 26%);
  box-shadow: inset 0 10px 22px rgba(20, 27, 43, 0.28), inset 0 -8px 18px rgba(20, 27, 43, 0.14);
  transition: opacity .9s ease;
}
.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 74%);
  transition: filter .9s ease;
}
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(70% 60% at 50% 55%, #1a2238, #0e1322);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.sky::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  background: linear-gradient(180deg, var(--ground-top), var(--ground-bottom));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.35), 0 -14px 28px -10px rgba(255, 255, 255, 0.35);
}
.stars {
  position: absolute;
  z-index: 1;
  inset: 0 0 30% 0;
  opacity: 0;
  transition: opacity .9s ease;
}
html[data-time="night"] .stars { opacity: 1; }
.stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff4d6;
  box-shadow: 0 0 6px rgba(255, 240, 200, 0.85);
  animation: twinkle 4.2s ease-in-out infinite;
}
.stars i:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.stars i:nth-child(1) { left: 11%; top: 14%; animation-delay: -.6s; }
.stars i:nth-child(2) { left: 24%; top: 38%; animation-delay: -2.1s; animation-duration: 5.2s; }
.stars i:nth-child(3) { left: 19%; top: 62%; animation-delay: -3.4s; }
.stars i:nth-child(4) { left: 38%; top: 10%; animation-delay: -1.2s; animation-duration: 3.6s; }
.stars i:nth-child(5) { left: 64%; top: 18%; animation-delay: -2.8s; }
.stars i:nth-child(6) { left: 84%; top: 11%; animation-delay: -.2s; animation-duration: 5.6s; }
.stars i:nth-child(7) { left: 88%; top: 44%; animation-delay: -1.7s; }
.stars i:nth-child(8) { left: 74%; top: 66%; animation-delay: -3.9s; animation-duration: 4.8s; }
.stars i:nth-child(9) { left: 52%; top: 4%; animation-delay: -2.4s; }
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1); }
}
.motes {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.motes i {
  position: absolute;
  bottom: 18%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mote);
  box-shadow: 0 0 8px var(--mote);
  opacity: 0;
  animation: mote 13s linear infinite;
}
.motes i:nth-child(1) { left: 14%; animation-delay: -1s; }
.motes i:nth-child(2) { left: 31%; width: 3px; height: 3px; animation-delay: -8s; animation-duration: 16s; }
.motes i:nth-child(3) { left: 47%; animation-delay: -4.5s; animation-duration: 11s; }
.motes i:nth-child(4) { left: 63%; width: 4px; height: 4px; animation-delay: -11s; }
.motes i:nth-child(5) { left: 78%; animation-delay: -6.5s; animation-duration: 15s; }
.motes i:nth-child(6) { left: 89%; width: 3px; height: 3px; animation-delay: -2.5s; animation-duration: 12s; }
@keyframes mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: .85; }
  50% { transform: translate3d(12px, -130px, 0); }
  85% { opacity: .6; }
  100% { opacity: 0; transform: translate3d(-8px, -280px, 0); }
}
.floor {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 9.5%;
  width: min(44cqw, 48cqh);
  height: min(7cqw, 7.6cqh);
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--shadow), transparent);
  animation: floor-breathe 3s ease-in-out infinite;
}
.window:has(.pet.is-night) .floor,
.window:has(.pet.is-lonely) .floor { animation-duration: 5.5s; }
@keyframes floor-breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.05); opacity: 1; }
}
.window.is-away::after {
  background: linear-gradient(180deg, rgba(40, 56, 104, 0.34), rgba(20, 27, 43, 0.42));
}
.window.is-away .sky { filter: saturate(.5) brightness(.78); }
.window.is-away .motes { display: none; }
.is-stranger main::before {
  background: linear-gradient(180deg, var(--navy) 0%, #151c2d 55%, var(--navy) 100%);
}
.is-stranger .window {
  box-shadow:
    0 0 0 3px rgba(241, 214, 140, 0.55),
    0 0 0 8px var(--navy2),
    0 0 0 9px rgba(241, 214, 140, 0.08),
    0 22px 40px -10px rgba(0, 0, 0, 0.6);
}

/* Pet */
.pet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  z-index: 2;
  width: min(68cqw, 72cqh);
  height: min(68cqw, 72cqh);
  margin: 0 auto;
}
.pet-hit {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-height: 0;
  font-weight: inherit;
  text-align: center;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.pet-hit:focus:not(:focus-visible) {
  outline: none;
}
.pet-hit:focus-visible {
  outline: 3px solid var(--cocoa);
  outline-offset: -3px;
  border-radius: 24px;
}
.pet-motion {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
}
.pet-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.pet-frame.is-show { opacity: 1; }
.pet[data-pet="alive"]:not(.is-press) .pet-motion { animation: bob 3s ease-in-out infinite; }
.pet[data-pet="alive"].is-night:not(.is-press) .pet-motion { animation: bob-slow 5.5s ease-in-out infinite; }
.pet[data-pet="alive"].enter:not(.is-press) .pet-motion {
  animation: enter .55s ease-out, bob 3s ease-in-out .55s infinite;
}
.pet[data-pet="alive"].is-night.enter:not(.is-press) .pet-motion {
  animation: enter .55s ease-out, bob-slow 5.5s ease-in-out .55s infinite;
}
.pet[data-pet="alive"].is-press .pet-motion { animation: squash .7s ease; }
.pet[data-pet="alive"].is-press.is-hop .pet-motion { animation: poke-hop .7s ease; }
.pet-away .pet-motion {
  animation: none;
  filter: saturate(0.7) brightness(0.9);
}
.pet-away.is-press .pet-motion { animation: squash .7s ease; }
@keyframes bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(3px) scale(0.985); }
}
@keyframes bob-slow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(2px) scale(0.99); }
}
@keyframes enter {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes squash {
  0% { transform: scale(1, 1); }
  28% { transform: scale(1.07, 0.9); }
  55% { transform: scale(0.95, 1.05); }
  100% { transform: scale(1, 1); }
}
@keyframes poke-hop {
  0% { transform: translateY(0) scale(1, 1); }
  22% { transform: translateY(0) scale(1.07, 0.9); }
  50% { transform: translateY(-9%) scale(0.95, 1.06); }
  76% { transform: translateY(0) scale(1.04, 0.96); }
  100% { transform: translateY(0) scale(1, 1); }
}
.touch-heart {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  width: 24px;
  height: 22px;
  margin: -11px 0 0 -12px;
  color: var(--coral);
  pointer-events: none;
  animation: heart-rise .95s var(--ease-out) var(--d, 0s) both;
}
.touch-heart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  stroke: var(--paper);
  stroke-width: 2.2;
  paint-order: stroke;
  filter: drop-shadow(0 2px 3px rgba(74, 44, 32, 0.3));
}
@keyframes heart-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  20% { opacity: 1; transform: translate(calc(var(--dx) * .3), -16px) scale(1.08); }
  100% { opacity: 0; transform: translate(var(--dx), -84px) scale(.78) rotate(var(--r)); }
}

/* Screen on: the window lights up, the pet pops in */
@media (prefers-reduced-motion: no-preference) {
  body:not([data-wake]) .sky { animation: screen-on .48s var(--ease-out) both; }
  body:not([data-wake]) .window::after { animation: glass-on .48s ease-out both; }
  body:not([data-wake]) .window .pet { animation: pet-pop .44s var(--ease-pop) .12s both; }
}
@keyframes screen-on {
  from { filter: brightness(.1) saturate(.4); }
  65% { filter: brightness(1.06) saturate(1.04); }
  to { filter: none; }
}
@keyframes glass-on {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pet-pop {
  from { opacity: 0; transform: translateY(8%) scale(.84); }
  to { opacity: 1; transform: none; }
}

/* Status: hearts and the key */
.pet-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}
.hearts {
  display: flex;
  gap: 3px;
}
.heart {
  width: 26px;
  height: 24px;
}
.heart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.heart .heart-bg {
  fill: none;
  stroke: rgba(248, 240, 227, 0.6);
  stroke-width: 1.5;
}
.heart .heart-fill {
  fill: var(--coral);
  filter: drop-shadow(0 1.5px 0 #b4503d);
}
.heart .heart-shine {
  fill: rgba(255, 255, 255, 0.62);
}
.heart.is-full .heart-bg { stroke: transparent; }
.heart.is-empty .heart-fill,
.heart.is-empty .heart-shine {
  opacity: 0;
}
.heart.is-half .heart-fill {
  opacity: 1;
  clip-path: inset(0 50% 0 0);
}
.heart.is-full .heart-fill {
  opacity: 1;
}
.level-line {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 190px;
}
.level-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 4px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--navy2), var(--navy2)) padding-box,
    linear-gradient(145deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)) border-box;
  color: var(--gold-light);
  font-size: .8125rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 0 #6e5019, 0 4px 10px rgba(0, 0, 0, 0.45);
}
.xp-bar {
  position: relative;
  display: block;
  flex: 1;
  height: 10px;
  margin-left: -4px;
  border-radius: 0 999px 999px 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.xp-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 7px;
  width: 13px;
  height: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 4px, transparent 4px 8px, rgba(255, 255, 255, 0.12) 8px);
  border-radius: 0 0 2px 2px;
}
.xp-fill {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 10px -3px var(--gold);
}
.level-line.is-growing .xp-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: key-shimmer 1.1s var(--ease-out) .55s 1 forwards;
}
@keyframes key-shimmer {
  to { transform: translateX(100%); }
}
/* The key is a button to the stat card; under it, what the next level brings. */
.level-line { flex-wrap: wrap; }
.level-line .level-open {
  all: unset;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  min-width: 0;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.level-line .level-open:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; border-radius: 999px; }
.level-line .level-open:active .level-badge { transform: scale(.94); }
.level-next {
  flex: 1 1 100%;
  margin-top: -3px;
  padding-left: 40px;
  overflow: hidden;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gold-light);
}

/* Dialog: the one retro touch */
.dialog {
  position: relative;
  margin-top: 10px;
  padding: 15px 42px 15px 18px;
  min-height: calc(2 * 1.6em + 34px);
  border: 2px solid var(--navy);
  border-radius: 18px;
  background: var(--cream);
  color: var(--cocoa);
  font-family: "Galmuri11", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px rgba(8, 11, 19, 0.4), 0 14px 26px -8px rgba(0, 0, 0, 0.6);
}
.dialog-name {
  position: absolute;
  top: -13px;
  left: 14px;
  max-width: 62%;
  padding: 2px 11px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold-light);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 0 0 2px var(--cream);
}
.dialog p + p,
.dialog p + .pet-moments,
.dialog .pet-moments + p,
.dialog .pet-moments p + p { margin-top: .4em; }
.dialog.is-seq p { margin-top: 0; }
.dialog.is-seq .intro:not(.is-current),
.dialog.is-seq .pet-moments > p:not(.is-current),
.dialog.is-seq .gift:not(.is-current) { display: none; }
.dialog .is-levelup,
.dialog .is-reunion,
.dialog .milestone { color: #8a4b12; }
.dialog .is-soft { color: #7b6357; }
.dialog .is-lonely-line { color: #5b4a78; }
.gift-label,
.reader-label {
  display: inline-block;
  margin: 0 2px 2px 0;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--cocoa);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1.6;
  vertical-align: 1px;
}
.gift.is-special .gift-label,
.gift-reader.is-special .reader-label { background: var(--coral); color: var(--navy); }
.gift.is-rare .gift-label,
.gift-reader.is-rare .reader-label { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--navy); }
.gift.is-glow { animation: gift-glow 1.1s ease; }
@keyframes gift-glow {
  0% { opacity: .6; }
  40% { opacity: 1; text-shadow: 0 0 12px rgba(214, 165, 70, 0.55); }
  100% { opacity: 1; text-shadow: none; }
}
.milestone.is-glow { animation: mile-glow .85s ease; }
@keyframes mile-glow {
  0% { opacity: .65; text-shadow: none; }
  45% { opacity: 1; text-shadow: 0 0 12px rgba(214, 165, 70, 0.6); }
  100% { opacity: 1; text-shadow: none; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dialog-cursor {
  display: inline-block;
  width: .5em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  border-radius: 1px;
  background: var(--cocoa);
  animation: dialog-blink 1s steps(2, jump-none) infinite;
}
.dialog-cursor.is-done {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 12px;
  height: 9px;
  margin: 0;
  border-radius: 0;
  background: var(--cocoa);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: dialog-nudge .7s ease-in-out infinite alternate;
}
.dialog.is-end .dialog-cursor.is-done { display: none; }
@keyframes dialog-blink {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes dialog-nudge {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}
/* The first line's typing bubble, held until the page's first touch */
.dialog-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(74, 44, 32, 0.08);
  vertical-align: -2px;
}
.dialog-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cocoa);
  opacity: .3;
  animation: dialog-dots 1.2s ease-in-out infinite;
}
.dialog-dots i:nth-child(2) { animation-delay: .18s; }
.dialog-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dialog-dots {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: .85; transform: translateY(-2px); }
}

/* Dock: gift box and records at the edges, the three care verbs between */
.dock {
  /* Narrow phones scale the caps so all five fit; 412px gets 64 and 46. */
  --verb: min(64px, 15.6vw);
  --side: min(46px, 11.6vw);
  display: flex;
  align-items: start;
  justify-content: center;
  gap: clamp(8px, 3.4vw, 16px);
  padding-top: 4px;
}
.dock-btn {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dock-cap {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fffdf8 0%, var(--cream) 46%, #e2d3ba 100%);
  color: var(--cocoa);
  box-shadow:
    0 5px 0 #a8916f,
    0 9px 16px rgba(0, 0, 0, 0.5),
    inset 0 -3px 6px rgba(74, 44, 32, 0.14),
    inset 0 2px 1px rgba(255, 255, 255, 0.9);
  transition: transform .08s ease, box-shadow .08s ease;
}
.dock-cap svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-btn:active .dock-cap,
.dock-btn.is-pressed .dock-cap {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #a8916f,
    0 3px 8px rgba(0, 0, 0, 0.45),
    inset 0 -2px 5px rgba(74, 44, 32, 0.18),
    inset 0 2px 1px rgba(255, 255, 255, 0.8);
}
.dock-btn.has-new .dock-cap::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2.5px var(--navy);
}
.dock-label {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
}
.dock-btn:focus-visible { outline: none; }
.dock-btn:focus-visible .dock-cap {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}
.dock-btn.is-side .dock-cap {
  width: var(--side);
  height: var(--side);
  margin-top: calc((var(--verb) - var(--side)) / 2);
}
.dock-btn.is-side .dock-cap svg { width: 22px; height: 22px; }
.dock-btn.is-verb .dock-cap {
  width: var(--verb);
  height: var(--verb);
}
.dock-btn.is-verb .dock-cap svg { width: 30px; height: 30px; }
.dock-btn.is-verb .dock-label { color: var(--cream); }
footer {
  order: 1;
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  color: rgba(248, 240, 227, 0.52);
}
.is-home footer { margin-top: -2px; }

/* Forms and buttons */
form { text-align: left; }
form input + label { margin-top: 14px; }
label {
  display: block;
  margin-bottom: 8px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--cream);
}
input, button, .button { font: inherit; min-height: 48px; width: 100%; border-radius: 14px; }
button, .button { font-weight: 800; }
input {
  border: 0;
  padding: 13px 16px;
  font-size: 1rem;
  color: var(--cream);
  background: rgba(8, 11, 19, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(241, 214, 140, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.45);
}
input::placeholder { color: rgba(248, 240, 227, 0.42); }
input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gold-light), 0 0 0 4px rgba(241, 214, 140, 0.18);
}
:where(button, .button) {
  display: block;
  border: 0;
  padding: 14px 16px;
  margin-top: 12px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%);
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 0 var(--gold-deep), 0 8px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
}
:where(button:not(.pet-hit, .dock-btn, .mascot-tog, .tile, .sheet-close, .st-share, .copy, .demo-close):active, .button:active) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--gold-deep), 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.primary {
  min-height: 56px;
  font-size: 1.0625rem;
  border-radius: 16px;
}
.button { color: var(--navy); }
.secondary,
.ghost {
  background: transparent;
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1.5px rgba(241, 214, 140, 0.55);
}
.secondary:active,
.ghost:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1.5px var(--gold-light);
}
small { display: block; font-size: .8rem; font-weight: 500; margin-top: 4px; }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
main > p,
.content-note {
  text-align: center;
  color: var(--cream);
}
main > .intro { font-size: 1.05rem; font-weight: 700; }
main > p + .button { margin-top: 4px; }
.notice {
  font-weight: 700;
  color: var(--coral);
}
#claim-form { margin-top: 4px; }
#claim-help {
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--muted);
}
.name-form { margin-top: 6px; }
.dev-preview { margin: 8px 0; }
a { color: var(--gold-light); }
[hidden] { display: none !important; }

/* First meet: the recovery code as a key card */
.recovery {
  position: relative;
  z-index: 60;
  margin-top: 8px;
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: linear-gradient(160deg, #222d48 0%, var(--midnight) 70%);
  text-align: left;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.recovery::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px dashed rgba(214, 165, 70, 0.75);
  border-radius: 15px;
  pointer-events: none;
}
.recovery h2 {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--gold-light);
}
.recovery p {
  margin-top: 4px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
}
.code-row { margin: 12px 0 10px; }
.code-row .recovery-acts { margin-top: 10px; }
.code {
  display: block;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.7rem, 9vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--cream);
  user-select: all;
}
.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--gold-light);
  font-size: .875rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px rgba(241, 214, 140, 0.6);
}
.copy svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.copy.is-done,
.copy.is-go {
  background: var(--gold);
  color: var(--navy);
  box-shadow: none;
}

/* 설정: the same key card hands out a new code */
.sheet .recovery { margin-top: 16px; }
.sheet .recovery p { text-wrap: balance; }
.recovery-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.recovery-acts .copy {
  flex: 1 1 0;
  min-width: max-content;
  justify-content: center;
}
.recovery-acts svg { stroke-linecap: round; }
.recovery-acts .copy:disabled { opacity: .55; cursor: default; }
.recovery .recovery-fail { margin-top: 8px; color: var(--coral); font-weight: 700; }
.recovery-ask { margin-top: 10px; }
.recovery .recovery-ask > p { color: var(--cream); font-weight: 700; }
.recovery-new .code { margin-top: 12px; }
.recovery-new .recovery-acts { margin-top: 10px; }

/* Naming focus: the stage tightens so the name lands in view */
.is-meet .window { transition: height .35s var(--ease-out), box-shadow .9s ease; }
.is-naming .window { height: clamp(150px, 24dvh, 220px); }
.is-naming .dialog { display: none; }
.is-naming .recovery p { display: none; }
.is-naming .recovery .code-row { margin: 8px 0 0; }

/* Bottom sheets: 선물함, 우리 기록 */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 9, 16, 0);
  transition: background-color .28s ease;
}
.sheet.is-open { background: rgba(6, 9, 16, 0.6); }
.sheet-card {
  width: 100%;
  max-width: 440px;
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px max(22px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #222b42 0%, var(--navy2) 140px);
  box-shadow: 0 -1px 0 rgba(241, 214, 140, 0.4), 0 -20px 44px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform .3s var(--ease-out);
}
.sheet.is-open .sheet-card { transform: translateY(0); }
.sheet-card::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: rgba(241, 214, 140, 0.45);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}
.sheet-head h2 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--cream);
}
.sheet-close,
.st-share {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0 -10px 0 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.sheet-close svg,
.st-share svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.gift-tally {
  margin: -6px 0 12px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.gift-reader {
  position: relative;
  min-height: calc(2 * 1.6em + 28px);
  padding: 13px 40px 13px 16px;
  border: 2px solid var(--navy);
  border-radius: 16px;
  background: var(--cream);
  color: var(--cocoa);
  font-family: "Galmuri11", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: 0 0 0 3px var(--cream);
}
.gift-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 4px;
  padding: 0;
  list-style: none;
}
.tile {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  color: var(--cocoa);
}
.tile svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.tile {
  cursor: pointer;
  transition: transform .08s ease;
}
button.tile:active { transform: translateY(2px); }
.tile.is-common {
  background: radial-gradient(circle at 35% 28%, #fffdf8, var(--cream) 50%, #e4d6bf);
  box-shadow: 0 3px 0 #a8916f, 0 0 14px rgba(248, 240, 227, 0.12);
}
.tile.is-special {
  background: radial-gradient(circle at 35% 28%, #f7b7a6, var(--coral) 60%, #c9604c);
  color: var(--navy);
  box-shadow: 0 3px 0 #9c4636, 0 0 16px rgba(232, 128, 107, 0.3);
}
.tile.is-special svg { fill: rgba(20, 27, 43, 0.12); }
.tile.is-rare {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 35% 28%, #fff1c4, var(--gold-light) 35%, var(--gold) 80%);
  color: var(--navy);
  box-shadow: 0 3px 0 var(--gold-deep), 0 0 18px rgba(241, 214, 140, 0.45);
}
.tile.is-rare svg { fill: rgba(20, 27, 43, 0.14); }
.tile.is-locked {
  background: rgba(8, 11, 19, 0.5);
  color: rgba(248, 240, 227, 0.26);
  box-shadow: inset 0 0 0 1.5px rgba(241, 214, 140, 0.14);
}
.tile.is-locked svg {
  width: 40%;
  height: 40%;
  fill: currentColor;
  stroke: none;
}
.tile.is-new { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.tile.is-picked { outline: 2px solid var(--cream); outline-offset: 2px; }
.record-hero {
  margin: 4px 0 14px;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--cream);
}
.record-list {
  margin: 0 0 4px;
}
.record-list div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
}
.record-list dt {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 10px;
  font-size: .9375rem;
  color: var(--muted);
}
.record-list dt::after {
  content: "";
  flex: 1;
  border-bottom: 2px dotted rgba(241, 214, 140, 0.28);
  transform: translateY(-4px);
}
.record-list dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

/* 능력치: the pet card from the level line. One capsule per stat: base, then training, then the edition's gold at the tip. */
[data-sheet="stats"] .sheet-card { position: relative; isolation: isolate; }
.st-share { margin: 0 0 0 auto; }
.st-sky {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  height: 140px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 30%, transparent);
  mask: linear-gradient(#000 30%, transparent);
}
.st-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
}
.st-who { display: grid; gap: 2px; min-width: 0; }
.st-name {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--cream);
  overflow-wrap: anywhere;
}
.st-kind { margin: 0; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--muted); }
.st-edition {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
  color: rgba(248, 240, 227, .78);
  box-shadow: inset 0 0 0 1px rgba(248, 240, 227, .22);
}
.st-edition > span { position: relative; z-index: 1; }
.st-list { margin: 0; padding: 0; list-style: none; }
.st-row {
  --st-hi: color-mix(in srgb, var(--st-light) 72%, #fff);
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-areas: "icon label total" "bar bar bar" "foot foot foot";
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 11px 0;
}
.st-row + .st-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.st-list > :nth-child(2) { --i: 1; }
.st-list > :nth-child(3) { --i: 2; }
.st-list > :nth-child(4) { --i: 3; }
.st-row[data-stat="str"] { --st: #f0634a; --st-light: #ffa06e; }
.st-row[data-stat="int"] { --st: #6d7cf0; --st-light: #9fb4ff; }
.st-row[data-stat="agi"] { --st: #22b58b; --st-light: #7ee7c2; }
.st-row[data-stat="cha"] { --st: #ef5f99; --st-light: #ff9cc5; }
.st-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--st-light);
  background: color-mix(in srgb, var(--st) 16%, transparent);
}
.st-icon svg { width: 16px; height: 16px; fill: currentColor; }
.st-label { grid-area: label; font-size: .9375rem; font-weight: 700; color: var(--cream); }
.st-total {
  grid-area: total;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cream);
}
/* A pending snack boost: counted in the total, not in the bar. Gold stays the edition's. */
.st-boost {
  grid-area: label;
  justify-self: end;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--st-light);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-light) 55%, transparent);
}
.st-bar {
  grid-area: bar;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.st-fill {
  position: relative;
  display: block;
  width: calc(var(--grow, 1) * var(--fill, 0) * 100%);
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--stops, var(--st), var(--st-light)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 10px -3px var(--st);
  transform-origin: left center;
}
.st-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, var(--st-shine, rgba(255, 255, 255, .55)) 50%, transparent 65%);
  transform: translateX(-120%);
}
.st-job { grid-area: foot; justify-self: start; margin: 0; font-size: .75rem; font-weight: 600; line-height: 1.35; color: var(--muted); }
.st-mix {
  grid-area: foot;
  justify-self: end;
  display: flex;
  gap: 5px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.st-mix b { font-weight: 700; color: var(--muted); }
.st-mix i { font-style: normal; }
.st-mix .is-tier { color: var(--tier-gold-2); }
.st-mix .is-grow { color: var(--st-light); }
.st-snack { margin-top: 16px; }
.stat-peek { margin-top: 0; }
/* Each open: the name rises, the pill pops, the rows follow, and each tip settles and shines once its bar is full. */
@media (prefers-reduced-motion: no-preference) {
  .is-opening .st-who { animation: st-rise 240ms var(--ease-out) 120ms both; }
  .is-opening .st-edition { animation: st-pop 280ms var(--ease-pop) 200ms both; }
  .is-opening .st-row { animation: st-row 240ms var(--ease-out) calc(220ms + 70ms * var(--i, 0)) both; }
  .is-opening .st-fill { animation: st-settle 180ms ease-out calc(1020ms + 70ms * var(--i, 0)) both; }
  .is-opening .st-fill::before { animation: st-shine 620ms var(--ease-out) calc(1060ms + 70ms * var(--i, 0)) both; }
}
@media (prefers-reduced-motion: reduce) {
  .is-opening .st-row { animation: st-fade 200ms ease-out both; }
}
@keyframes st-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes st-pop { from { opacity: 0; transform: scale(.92); } }
@keyframes st-row { from { opacity: 0; transform: translateY(6px); } }
@keyframes st-fade { from { opacity: 0; } }
@keyframes st-settle { 50% { transform: scaleX(1.015); } }
@keyframes st-shine { to { transform: translateX(120%); } }
/* 금실 레어: woven gold thread. 별밤 레전더리: night and stars, gold numbers. */
html[data-edition] .st-fill { --st-shine: rgba(255, 241, 194, .7); }
html[data-edition] .st-sky { display: block; }
html[data-edition="rare"] .st-sky {
  background:
    repeating-linear-gradient(115deg, rgba(255, 241, 194, .03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(226, 178, 82, .1), transparent);
}
html[data-edition="rare"] .st-edition {
  color: #4a2c20;
  background: linear-gradient(135deg, #fceab2, #e2b252 60%, #d9982b);
  box-shadow: 0 2px 8px rgba(226, 178, 82, .35);
}
html[data-edition="rare"] .st-edition::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tier-thread);
  opacity: .6;
}
/* On a bar the thread would read as stripes, so the gold is smooth satin with one soft sheen. */
html[data-edition="rare"] .st-fill::after {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--seam, 100%);
  background: linear-gradient(105deg, transparent 22%, rgba(255, 252, 240, .42) 46%, rgba(255, 252, 240, .12) 58%, transparent 70%);
}
html[data-edition="legendary"] .st-sky {
  background:
    radial-gradient(circle at 6% 12px, var(--tier-star) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 33% 30px, rgba(255, 248, 230, .6) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 44% 64px, rgba(255, 248, 230, .5) 0 .5px, transparent 1px),
    radial-gradient(circle at 58% 22px, var(--tier-star) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 64% 100px, rgba(255, 248, 230, .55) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 77% 44px, rgba(255, 248, 230, .7) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 95% 8px, rgba(255, 248, 230, .6) 0 .5px, transparent 1px),
    linear-gradient(180deg, rgba(45, 42, 110, .35), transparent);
}
html[data-edition="legendary"] .st-edition {
  background: radial-gradient(120% 140% at 20% 0%, var(--tier-night-2), var(--tier-night-1) 60%);
  box-shadow: inset 0 0 0 1px #e2c27a, 0 0 16px rgba(226, 194, 122, .25);
}
html[data-edition="legendary"] .st-edition > span,
html[data-edition="legendary"] .st-total {
  background: linear-gradient(90deg, var(--tier-gold-2), var(--tier-gold-3), var(--tier-gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-edition="legendary"] .st-edition::after,
html[data-edition="legendary"] .st-fill::after {
  content: "";
  position: absolute;
  inset: 0;
}
html[data-edition="legendary"] .st-edition::after {
  background:
    radial-gradient(circle at 8% 30%, var(--tier-star) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 93% 70%, var(--tier-star) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 88% 22%, var(--tier-star) 0 .5px, transparent 1px);
}
/* Three glints on the deep gold, off the white tip where they would vanish, placed and timed per row so no two bars match. */
html[data-edition="legendary"] .st-list > :nth-child(1) { --ax: 30%; --ay: 45%; --bx: 56%; --by: 66%; --cx: 76%; --cy: 34%; }
html[data-edition="legendary"] .st-list > :nth-child(2) { --ax: 60%; --ay: 38%; --bx: 26%; --by: 62%; --cx: 78%; --cy: 64%; }
html[data-edition="legendary"] .st-list > :nth-child(3) { --ax: 42%; --ay: 60%; --bx: 70%; --by: 30%; --cx: 18%; --cy: 38%; }
html[data-edition="legendary"] .st-list > :nth-child(4) { --ax: 68%; --ay: 52%; --bx: 38%; --by: 34%; --cx: 50%; --cy: 70%; }
html[data-edition="legendary"] .st-fill::after {
  left: var(--seam, 100%);
  background:
    radial-gradient(circle at var(--ax) var(--ay), var(--tier-star) 0 .6px, rgba(255, 250, 240, .4) 1px, transparent 2px),
    linear-gradient(90deg, transparent calc(var(--ax) - 4px), rgba(255, 250, 240, .8) var(--ax), transparent calc(var(--ax) + 4px)) 0 var(--ay) / 100% .8px no-repeat,
    linear-gradient(180deg, transparent 15%, rgba(255, 250, 240, .7) 45%, transparent 75%) var(--ax) 0 / .8px 100% no-repeat,
    radial-gradient(circle at var(--bx) var(--by), var(--tier-star) 0 .5px, transparent 1.4px),
    radial-gradient(circle at var(--cx) var(--cy), var(--tier-star) 0 .5px, rgba(255, 250, 240, .4) .9px, transparent 1.8px),
    linear-gradient(90deg, transparent calc(var(--cx) - 3px), rgba(255, 250, 240, .7) var(--cx), transparent calc(var(--cx) + 3px)) 0 var(--cy) / 100% .8px no-repeat;
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-edition="legendary"] .is-opening .st-fill::after { animation: st-specks 400ms ease-out calc(1080ms + 70ms * var(--i, 0)) both, st-twinkle 2.6s ease-in-out calc(1480ms + 650ms * var(--i, 0)) infinite; }
}
@keyframes st-specks { from { opacity: 0; } to { opacity: .55; } }
@keyframes st-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* The edition's finish sits under the sky, which covers its middle: only its band shows around the glass, and its pseudos may reach past it. */
.finish { display: none; }
html[data-look] .finish {
  position: absolute;
  inset: calc(-1 * (var(--edge-w) + var(--band-w)));
  z-index: 0;
  display: block;
  border-radius: calc(var(--win-r, 32px) + var(--edge-w) + var(--band-w));
  pointer-events: none;
  box-shadow: 0 0 0 var(--edge-w) var(--edge), var(--halo, 0 0 0 transparent);
}
/* The inner hairline sits on the glass, above the band, with the glass's own insets kept. */
html[data-look] .window::after {
  box-shadow: inset 0 10px 22px rgba(20, 27, 43, .28), inset 0 -8px 18px rgba(20, 27, 43, .14), 0 0 0 var(--edge-w) var(--edge);
}
html[data-look] .finish::before,
html[data-look] .finish::after { content: ""; position: absolute; pointer-events: none; }
html[data-look] .finish::before { inset: -8px; background: var(--deco); }
html[data-look="rare"] .finish::after {
  top: calc(var(--d) - 10px);
  right: calc(var(--d) - 10px);
  width: 20px;
  height: 20px;
  background: var(--glint);
  opacity: 0;
}
/* 금실 레어: a twisted gold thread between two deep gold hairlines, a gold stud on each corner, one glint. */
html[data-look="rare"],
.look-card[data-look="rare"] { --edge: #7a5a1c; --edge-w: 1.5px; }
html[data-look="rare"] .finish {
  --band-w: 10px;
  --d: 16.3px;
  --halo: 0 0 48px -8px rgba(226, 178, 82, .45);
  --stud: radial-gradient(circle, #fff6d8 0 1.2px, #e2b252 1.3px 3.4px, #6e5119 3.5px 4.6px, transparent 5px);
  --deco:
    var(--stud) calc(var(--d) + 3px) calc(var(--d) + 3px) / 10px 10px no-repeat,
    var(--stud) calc(100% - var(--d) - 3px) calc(var(--d) + 3px) / 10px 10px no-repeat,
    var(--stud) calc(var(--d) + 3px) calc(100% - var(--d) - 3px) / 10px 10px no-repeat,
    var(--stud) calc(100% - var(--d) - 3px) calc(100% - var(--d) - 3px) / 10px 10px no-repeat;
  --glint:
    radial-gradient(circle, #fff8e6 0 1.6px, rgba(255, 248, 230, .5) 2.6px, transparent 3.6px),
    linear-gradient(90deg, transparent, #fff8e6 40% 60%, transparent) 50% 50% / 20px 1.2px no-repeat,
    linear-gradient(180deg, transparent, #fff8e6 40% 60%, transparent) 50% 50% / 1.2px 20px no-repeat;
}
html[data-look="rare"] .finish,
.look-card[data-look="rare"] .look-frame {
  background:
    repeating-linear-gradient(45deg, rgba(255, 246, 216, .55) 0 1.5px, transparent 1.5px 3.5px, rgba(110, 80, 20, .45) 3.5px 4.5px, transparent 4.5px 7px),
    conic-gradient(from 210deg, #e2b252, #fff1c2 10%, #c99436 28%, #f6d98a 46%, #b8862e 64%, #fff1c2 80%, #e2b252);
}
/* 별밤 레전더리: a violet night lighter than the page, stars on its center line, a four-point star on each corner. */
html[data-look="legendary"],
.look-card[data-look="legendary"] { --edge: #e2c27a; --edge-w: 1.5px; }
html[data-look="legendary"] .finish {
  --band-w: 12px;
  --band: 6px;
  --d: 17.6px;
  --halo: 0 0 48px -8px rgba(120, 110, 220, .55);
  --spark-tl:
    radial-gradient(circle, var(--tier-star) 0 1.6px, rgba(255, 248, 230, .5) 2.6px, transparent 3.6px) var(--d) var(--d) / 16px 16px no-repeat,
    linear-gradient(90deg, transparent, var(--tier-star) 40% 60%, transparent) var(--d) calc(var(--d) + 7.4px) / 16px 1.2px no-repeat,
    linear-gradient(180deg, transparent, var(--tier-star) 40% 60%, transparent) calc(var(--d) + 7.4px) var(--d) / 1.2px 16px no-repeat;
  --spark-tr:
    radial-gradient(circle, var(--tier-star) 0 1.6px, rgba(255, 248, 230, .5) 2.6px, transparent 3.6px) calc(100% - var(--d)) var(--d) / 16px 16px no-repeat,
    linear-gradient(90deg, transparent, var(--tier-star) 40% 60%, transparent) calc(100% - var(--d)) calc(var(--d) + 7.4px) / 16px 1.2px no-repeat,
    linear-gradient(180deg, transparent, var(--tier-star) 40% 60%, transparent) calc(100% - var(--d) - 7.4px) var(--d) / 1.2px 16px no-repeat;
  --spark-bl:
    radial-gradient(circle, var(--tier-star) 0 1.6px, rgba(255, 248, 230, .5) 2.6px, transparent 3.6px) var(--d) calc(100% - var(--d)) / 16px 16px no-repeat,
    linear-gradient(90deg, transparent, var(--tier-star) 40% 60%, transparent) var(--d) calc(100% - var(--d) - 7.4px) / 16px 1.2px no-repeat,
    linear-gradient(180deg, transparent, var(--tier-star) 40% 60%, transparent) calc(var(--d) + 7.4px) calc(100% - var(--d)) / 1.2px 16px no-repeat;
  --spark-br:
    radial-gradient(circle, var(--tier-star) 0 1.6px, rgba(255, 248, 230, .5) 2.6px, transparent 3.6px) calc(100% - var(--d)) calc(100% - var(--d)) / 16px 16px no-repeat,
    linear-gradient(90deg, transparent, var(--tier-star) 40% 60%, transparent) calc(100% - var(--d)) calc(100% - var(--d) - 7.4px) / 16px 1.2px no-repeat,
    linear-gradient(180deg, transparent, var(--tier-star) 40% 60%, transparent) calc(100% - var(--d) - 7.4px) calc(100% - var(--d)) / 1.2px 16px no-repeat;
  --deco: var(--spark-tl), var(--spark-tr), var(--spark-bl), var(--spark-br);
}
/* --band is half the band. */
html[data-look="legendary"] .finish,
.look-card[data-look="legendary"] .look-frame {
  background:
    radial-gradient(circle at 14% var(--band), var(--tier-star) 0 1.4px, rgba(255, 248, 230, .45) 2.4px, transparent 3.6px),
    radial-gradient(circle at 31% var(--band), var(--tier-star) 0 1px, transparent 2.2px),
    radial-gradient(circle at 52% var(--band), #f6d98a 0 1.4px, rgba(246, 217, 138, .4) 2.4px, transparent 3.6px),
    radial-gradient(circle at 70% var(--band), var(--tier-star) 0 1px, transparent 2.2px),
    radial-gradient(circle at 88% var(--band), var(--tier-star) 0 1.4px, rgba(255, 248, 230, .45) 2.4px, transparent 3.6px),
    radial-gradient(circle at 10% calc(100% - var(--band)), var(--tier-star) 0 1px, transparent 2.2px),
    radial-gradient(circle at 27% calc(100% - var(--band)), var(--tier-star) 0 1.4px, rgba(255, 248, 230, .45) 2.4px, transparent 3.6px),
    radial-gradient(circle at 46% calc(100% - var(--band)), #f6d98a 0 1px, transparent 2.2px),
    radial-gradient(circle at 64% calc(100% - var(--band)), var(--tier-star) 0 1.4px, rgba(255, 248, 230, .45) 2.4px, transparent 3.6px),
    radial-gradient(circle at 83% calc(100% - var(--band)), var(--tier-star) 0 1px, transparent 2.2px),
    radial-gradient(circle at var(--band) 40%, var(--tier-star) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at var(--band) 72%, var(--tier-star) 0 1px, transparent 2.2px),
    radial-gradient(circle at calc(100% - var(--band)) 28%, var(--tier-star) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - var(--band)) 60%, var(--tier-star) 0 1px, transparent 2.2px),
    linear-gradient(180deg, #4a3cb0 0%, #2d2a7e 45%, #1f1d62 100%);
}
/* The page glows in the frame's light, after the time of day's. */
html[data-look="rare"] { --glow: rgba(226, 178, 82, .26); }
html[data-look="legendary"] { --glow: rgba(120, 110, 220, .30); }
/* The name in the frame's material: a text shadow would sit on the clipped gold, so it is a drop shadow, and the box hugs the letters so the gradient lands on them. */
html[data-look] .nameplate,
.look-card:not([data-look="classic"]) .look-name {
  width: fit-content;
  margin-inline: auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .28));
  background-position: 62% 0;
}
html[data-look="rare"] .nameplate,
.look-card[data-look="rare"] .look-name { background-image: var(--tier-thread), linear-gradient(100deg, #b8862e 0%, #f6d98a 30%, #fff6d8 48%, #e2b252 68%, #a8782a 100%); }
html[data-look="legendary"] .nameplate,
.look-card[data-look="legendary"] .look-name {
  background-image:
    linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .9) 50%, transparent 56%),
    radial-gradient(circle at 22% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 61% 64%, #fff 0 .8px, transparent 1.8px),
    radial-gradient(circle at 84% 26%, #fff 0 1px, transparent 2px),
    linear-gradient(180deg, var(--tier-star) 0%, var(--tier-gold-2) 50%, #c9b8ff 100%);
  background-size: 300% 100%, auto, auto, auto, auto;
}
/* The one loop a frame adds to the home: the 금실 stud's glint, the sheen across the 별밤 name. */
@keyframes glint {
  0%, 84% { opacity: 0; transform: scale(.4) rotate(0deg); }
  90% { opacity: 1; transform: scale(1) rotate(20deg); }
  100% { opacity: 0; transform: scale(.5) rotate(40deg); }
}
/* The sheen layer is 300% wide: 100% -> 0% walks its highlight left to right, then it rests. */
@keyframes name-sheen { 0% { background-position: 100% 0; } 18%, 100% { background-position: 0% 0; } }
@keyframes look-shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: no-preference) {
  html[data-look="rare"] .finish::after { animation: glint 6s ease-in-out infinite; }
  html[data-look="legendary"] .nameplate { animation: name-sheen 6s linear infinite; }
  .look-card.is-shake { animation: look-shake .35s ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="rare"] .finish::after { opacity: .6; }
}
/* Other sheets pause the home's one loop; the 꾸미기 sheet keeps it, the frame is what the picker is for. */
body.has-sheet:not(:has([data-sheet="theme"].is-open)) .nameplate,
body.has-sheet:not(:has([data-sheet="theme"].is-open)) .finish::after { animation-play-state: paused; }
/* The naming reveal: the finish comes on with a flash, the name warms into its gold. */
@media (prefers-reduced-motion: no-preference) {
  html.is-edition-lit .finish { animation: finish-on 1.6s ease-out both; }
  html.is-edition-lit .nameplate { animation: finish-name 1.2s ease-out both; }
}
@keyframes finish-on {
  0% { opacity: 0; filter: brightness(2.2); }
  35% { opacity: 1; filter: brightness(1.8); }
  100% { opacity: 1; filter: none; }
}
@keyframes finish-name { from { opacity: .35; } }
/* Tap sparkles: thread streaks for 금실, white-gold stars and one shooting star for 별밤. */
html[data-look="rare"] .sparkle {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  clip-path: none;
  background: linear-gradient(180deg, transparent, var(--tier-gold-3) 30%, var(--tier-gold-1) 70%, transparent);
  animation-name: sparkle-thread;
}
@keyframes sparkle-thread {
  0% { opacity: 0; transform: rotate(-24deg) scaleY(.2); }
  30% { opacity: 1; transform: rotate(8deg) scaleY(1); }
  100% { opacity: 0; transform: rotate(34deg) scaleY(.5) translate(var(--sx, 0), var(--sy, -24px)); }
}
html[data-look="legendary"] .sparkle { background: var(--tier-star); filter: drop-shadow(0 0 3px rgba(246, 217, 138, .9)); }
.sparkle.is-shoot {
  width: 30px;
  height: 2px;
  border-radius: 2px;
  clip-path: none;
  background: linear-gradient(90deg, transparent, var(--tier-star));
  animation: sparkle-shoot .8s ease-out both;
}
@keyframes sparkle-shoot {
  0% { opacity: 0; transform: rotate(-32deg) translateX(-24px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-32deg) translateX(46px); }
}

/* 카드로 자랑하기 (it wears the close button's look, above) and the 포키 카드 sheet it opens */
.sheet-head .st-share:active { transform: scale(.92); box-shadow: none; }
.sheet-head .st-share svg { stroke-linejoin: round; }
.share-stage {
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.share-canvas {
  display: block;
  width: auto;
  height: min(56dvh, 440px);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: rgba(8, 11, 19, .45);
  box-shadow: 0 0 0 1px rgba(241, 214, 140, .28), 0 12px 28px rgba(0, 0, 0, .45);
  transition: opacity .2s ease;
}
.sheet.is-drawing .share-canvas { opacity: .4; }
.share-hint {
  margin-top: 10px;
  text-align: center;
  font-size: .875rem;
  font-weight: 700;
  color: var(--gold-light);
}
.share-actions {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}
.share-actions button { flex: 1; margin-top: 0; }
.share-actions button:disabled { opacity: .55; cursor: default; }

/* A stat that grew, coins that landed: a short line floating up. */
@media (prefers-reduced-motion: reduce) {
  .st-bar i { transition: none; }
}
.stat-pop {
  position: fixed;
  z-index: 160;
  margin: 0;
  padding: 4px 13px;
  transform: translate(-50%, 0);
  pointer-events: none;
  white-space: nowrap;
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--navy);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-deep), 0 8px 18px rgba(0, 0, 0, 0.35);
}
.mini-hearts {
  display: inline-flex;
  gap: 2px;
  vertical-align: -2px;
}
.mini-heart {
  display: block;
  width: 16px;
  height: 16px;
  color: rgba(248, 240, 227, 0.45);
}
.mini-heart svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.mini-heart.is-full,
.mini-heart.is-half { color: var(--coral); }
.mini-heart.is-full svg { fill: currentColor; }
.mini-heart.is-half svg { fill: currentColor; clip-path: inset(0 50% 0 0); }

/* 꾸미기: the picker never dims the world it changes */
.sheet[data-sheet="theme"].is-open { background: transparent; }
.sheet[data-sheet="theme"] .sheet-card { box-shadow: 0 -1px 0 rgba(241, 214, 140, 0.4), 0 -12px 30px rgba(0, 0, 0, 0.35); }
.theme-lede {
  margin: -6px 0 14px;
  font-size: .875rem;
  color: var(--muted);
}
.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.theme-grid .theme-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  color: #fff;
  text-align: left;
  box-shadow: 0 0 0 2px rgba(241, 214, 140, 0.22);
  transition: transform .12s ease;
}
.theme-grid .theme-card:active { transform: scale(.97); }
.theme-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 36 / 25;
  background: center 25% / cover no-repeat;
}
/* Each kind's previews come from /kinds.css */
[data-pick="classic"] .theme-thumb { background-image: var(--thumb-classic); }
[data-pick="8bit"] .theme-thumb { background-image: var(--thumb-8bit); }
[data-pick="milk"] .theme-thumb { background-image: var(--thumb-milk); }
[data-pick="najeon"] .theme-thumb { background-image: var(--thumb-najeon); }
.theme-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 12px 9px;
  font-size: .9375rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
.theme-grid .theme-card[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold-light), 0 8px 18px rgba(0, 0, 0, 0.35); }
.theme-grid .theme-card[aria-pressed="true"]::before,
.theme-grid .theme-card[aria-pressed="true"]::after {
  content: "";
  position: absolute;
}
.theme-grid .theme-card[aria-pressed="true"]::before {
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.theme-grid .theme-card[aria-pressed="true"]::after {
  top: 13px;
  right: 17.5px;
  width: 4px;
  height: 10px;
  border: solid var(--navy);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
/* 창틀과 이름: the home's frame and name in miniature from the same rules, tight enough that two locked notes end above the fold at 655px. */
.theme-sub {
  margin: 10px 0 2px;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--gold-light);
}
.theme-sub + .theme-lede { margin-bottom: 10px; }
.look-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-grid .look-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: var(--navy2);
  text-align: center;
}
.look-mini { display: grid; justify-items: center; gap: 4px; }
.look-name {
  max-width: 84px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .28);
}
/* The classic mini is the base ring; a tier's band is the frame's background, its sky the ::after. */
.look-frame {
  position: relative;
  width: 86px;
  height: 50px;
  border-radius: 12px;
  box-shadow: 0 0 0 1.5px var(--gold-light), 0 0 0 4px var(--navy2);
}
.look-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 74%);
}
.look-card[data-look="rare"] .look-frame { --band: 2.5px; box-shadow: 0 0 0 1px var(--edge); }
.look-card[data-look="rare"] .look-frame::after { inset: 5px; border-radius: 7px; box-shadow: 0 0 0 1px var(--edge); }
.look-card[data-look="legendary"] .look-frame { --band: 3px; box-shadow: 0 0 0 1px var(--edge); }
.look-card[data-look="legendary"] .look-frame::after { inset: 6px; border-radius: 6px; box-shadow: 0 0 0 1px var(--edge); }
.look-title { font-size: 12px; font-weight: 800; color: var(--cream); }
.look-note { font-size: 11px; line-height: 1.3; color: var(--muted); }
/* Locked tiles keep their full preview. */
.look-card.is-locked::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, var(--navy) 0 2.4px, transparent 2.9px) no-repeat,
    linear-gradient(var(--navy), var(--navy)) 50% 70% / 2.2px 6px no-repeat,
    linear-gradient(180deg, var(--gold-light), var(--gold) 65%, var(--gold-deep));
  box-shadow: 0 0 0 1.5px var(--navy2), 0 2px 4px rgba(0, 0, 0, .45);
}
/* The picked tile wears the world cards' check on its corner, clear of its name and frame; a lower frame is only shown. */
.theme-grid .look-card { overflow: visible; }
.theme-grid .look-card .look-mini { justify-self: stretch; }
.theme-grid .look-card .look-name { max-width: calc(100% - 32px); }
.theme-grid .look-card[aria-pressed="true"]::before { top: -7px; right: -7px; }
.theme-grid .look-card[aria-pressed="true"]::after { top: -2px; right: 2.5px; }
.theme-grid .look-card[aria-disabled="true"]:not(.is-locked) { pointer-events: none; }

/* World switch: the new world grows out of the pet, the pet converts last */
html[data-vt] .pet { view-transition-name: pet; }
html[data-vt] .sheet[data-sheet="theme"] .sheet-card { view-transition-name: theme-sheet; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt-circle .75s cubic-bezier(.3, .7, .2, 1) both; }
html[data-vt="px"]::view-transition-new(root) { animation: vt-circle .8s steps(8, end) both; }
@keyframes vt-circle {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 40%)); }
  to { clip-path: circle(140vmax at var(--vt-x, 50%) var(--vt-y, 40%)); }
}
::view-transition-group(pet) { animation-duration: .01s; }
::view-transition-old(pet) { animation: vt-pet-out .12s ease-in .5s both; }
::view-transition-new(pet) { animation: vt-pet-in .5s linear .6s both; }
@keyframes vt-pet-out { to { opacity: 0; transform: scale(.82, 1.08); } }
@keyframes vt-pet-in {
  0% { opacity: 0; transform: scale(.78, 1.1); }
  1% { opacity: 1; transform: scale(.78, 1.1); }
  35% { transform: scale(1.1, .9); }
  65% { transform: scale(.96, 1.04); }
  100% { opacity: 1; transform: none; }
}
::view-transition-old(theme-sheet) { animation: none; opacity: 1; mix-blend-mode: normal; }
::view-transition-new(theme-sheet) { animation: vt-fade-in .35s ease both; mix-blend-mode: normal; }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
body .window .pet.is-pop { animation: vt-pet-in .5s linear both; }
.theme-say {
  position: absolute;
  left: 50%;
  bottom: min(calc(10% + min(68cqw, 72cqh) + 12px), calc(100% - 48px));
  z-index: 4;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 7px 14px;
  border-radius: 16px;
  background: var(--cream);
  color: var(--cocoa);
  font-family: "Galmuri11", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--navy), 0 4px 0 2px rgba(0, 0, 0, 0.22), 0 10px 22px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  transition: opacity .4s ease;
}
.theme-say::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 14px;
  height: 8px;
  margin-left: -7px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.theme-say.is-gone { opacity: 0; }
.theme-say .dialog-cursor.is-done { display: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-fade-out .3s ease both; }
  ::view-transition-new(root) { animation: vt-fade-in .3s ease both; }
  body .window .pet.is-pop { animation: none; }
}

/* Celebration layers */
canvas.celebrate-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}
.celebrate-flash {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: var(--paper);
  opacity: var(--flash-opacity, 0.62);
  animation: celebrate-flash-fade .16s ease-out forwards;
}
@keyframes celebrate-flash-fade {
  from { opacity: var(--flash-opacity, 0.62); }
  to { opacity: 0; }
}
body.is-shake main {
  animation: screen-shake .28s ease-out;
}
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}
body.is-evo-dim::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: rgba(6, 9, 16, 0.66);
}
body.is-evo-dim .window {
  z-index: 25;
}
body.is-evo-dim .sky::before { opacity: .82; }
.pet.is-evolving {
  /* above dim (20); below confetti (40) and flash (50) */
  z-index: 25;
  isolation: isolate;
  overflow: visible;
}
.pet.is-evolving .pet-hit {
  position: relative;
  z-index: 2;
}
.evo-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.evo-rays {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 140%;
  height: 140%;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  animation: evo-spin 2.8s linear;
}
.evo-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 36%;
  margin-left: -7px;
  transform-origin: 50% 0;
  transform: rotate(var(--ray-rot, 0deg));
  background: linear-gradient(
    to bottom,
    rgba(241, 214, 140, 0.7) 0%,
    rgba(241, 214, 140, 0.38) 28%,
    rgba(241, 214, 140, 0.12) 58%,
    transparent 100%
  );
  border-radius: 999px;
  opacity: 0.95;
  filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}
@keyframes evo-spin {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(0.94); }
  to { transform: translate(-50%, -50%) rotate(140deg) scale(1.02); }
}
.evo-silhouette {
  position: absolute;
  inset: 12%;
  z-index: 3;
  background-color: #fff;
  -webkit-mask-image: var(--pet-src);
  mask-image: var(--pet-src);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  opacity: 0;
  transition: opacity .07s linear;
}
.evo-overlay.is-silhouette .evo-silhouette {
  opacity: 1;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px #fff) drop-shadow(0 0 28px rgba(241, 214, 140, 0.95)) drop-shadow(0 0 48px rgba(214, 165, 70, 0.7));
}
.pet.is-evolving:has(.evo-overlay.is-silhouette) .pet-frame.is-show {
  opacity: 0 !important;
}
.evo-sweep {
  position: absolute;
  inset: 12%;
  z-index: 4;
  -webkit-mask-image: var(--pet-src);
  mask-image: var(--pet-src);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  background: linear-gradient(to top, transparent 0%, rgba(255, 250, 230, 0.95) 42%, rgba(255, 255, 255, 0.55) 55%, transparent 72%);
  background-size: 100% 55%;
  background-repeat: no-repeat;
  background-position: center 140%;
  opacity: 0;
  mix-blend-mode: screen;
}
.evo-overlay.is-sweeping .evo-sweep {
  opacity: 1;
  animation: evo-sweep 1.35s ease-in-out forwards;
}
@keyframes evo-sweep {
  from { background-position: center 145%; }
  to { background-position: center -45%; }
}
.pet.is-evo-bounce .pet-motion {
  animation: evo-bounce .55s ease;
  filter: saturate(1.15) brightness(1.08);
}
@keyframes evo-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
body.is-evo-dim.is-levelup-glow .dialog,
body.is-evo-dim.is-levelup-glow .pet-stats,
body.is-evo-dim.is-levelup-glow .topbar {
  position: relative;
  z-index: 26;
}
.count .odometer-digit {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  vertical-align: -0.2em;
  width: 0.7em;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.count .odometer-track {
  display: block;
  will-change: transform;
}
.count .odometer-cell {
  display: block;
  height: 1.15em;
  line-height: 1.15em;
  text-align: center;
}
.count.is-gold-pop {
  animation: gold-pop .65s ease;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(241, 214, 140, 0.6);
}
@keyframes gold-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); color: var(--gold-light); }
  100% { transform: scale(1); }
}
.pet[data-pet="alive"].is-lonely:not(.is-press) .pet-motion {
  animation: bob-lonely 5.5s ease-in-out infinite;
}
@keyframes bob-lonely {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(4px) scale(0.99, 0.97); }
}
.pet.is-reunion-jump .pet-motion {
  animation: reunion-jump .85s ease;
}
@keyframes reunion-jump {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-26px) scale(1.03, 0.97); }
  55% { transform: translateY(0) scale(0.97, 1.03); }
  75% { transform: translateY(-8px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* Still-frame celebration for prefers-reduced-motion (opacity fades only) */
body.is-still-celebrate main {
  position: relative;
  z-index: 2;
}
.still-wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(241, 214, 140, 0.24), rgba(20, 27, 43, 0.06) 55%, transparent 78%);
  opacity: 1;
  transition: opacity 0.45s ease;
}
.is-still-celebrate.is-still-fade .still-wash,
.is-still-celebrate.is-still-fade .still-sparkles,
.is-still-celebrate.is-still-fade .still-claim-card,
.is-still-celebrate.is-still-fade .still-named-card {
  opacity: 0;
}
.is-still-claim .still-wash {
  background: radial-gradient(ellipse at center, rgba(241, 214, 140, 0.42), rgba(214, 165, 70, 0.12) 52%, transparent 80%);
}
.is-still-milestone .still-wash,
.is-still-levelup .still-wash {
  background: radial-gradient(ellipse at center, rgba(241, 214, 140, 0.24), rgba(28, 37, 56, 0.08) 50%, transparent 78%);
}
.still-sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.still-sparkle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  opacity: 0.92;
}
.still-sparkle.is-claim-sparkle {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(214, 165, 70, 0.25);
}
.still-claim-card {
  margin: 4px 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 2px solid var(--gold);
  background: var(--paper);
  color: var(--cocoa);
  font-weight: 800;
  font-size: 1.22rem;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
  opacity: 1;
  transition: opacity 0.45s ease;
  position: relative;
  z-index: 2;
}
.still-named-card {
  margin: 4px 0;
  padding: 8px 12px;
  border-radius: 14px;
  outline: 2px solid rgba(241, 214, 140, 0.85);
  background: rgba(255, 249, 240, 0.95);
  color: var(--cocoa);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
  opacity: 1;
  transition: opacity 0.45s ease;
  position: relative;
  z-index: 2;
}
.count.is-still-gold,
.level-line.is-still-gold,
.level-badge.is-still-gold,
.milestone.is-still-gold {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(241, 214, 140, 0.4);
}
.dialog .milestone.is-still-gold { color: #8a4b12; text-shadow: none; }
.milestone.is-still-card,
.level-line.is-still-card {
  outline: 2px solid rgba(241, 214, 140, 0.85);
  outline-offset: 4px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .pet[data-pet="alive"]:not(.is-press) .pet-motion,
  .pet[data-pet="alive"].is-night:not(.is-press) .pet-motion,
  .pet[data-pet="alive"].is-lonely:not(.is-press) .pet-motion,
  .pet[data-pet="alive"].enter:not(.is-press) .pet-motion,
  .pet[data-pet="alive"].is-night.enter:not(.is-press) .pet-motion,
  .pet[data-pet="alive"].is-press .pet-motion,
  .pet[data-pet="alive"].is-press.is-hop .pet-motion,
  .pet-away.is-press .pet-motion,
  .pet.is-evo-bounce .pet-motion,
  .pet.is-reunion-jump .pet-motion,
  .gift.is-glow,
  .evo-rays,
  .evo-overlay.is-sweeping .evo-sweep,
  body.is-shake main,
  .celebrate-flash,
  .count.is-gold-pop {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .milestone.is-glow,
  .stars i,
  .floor,
  .nameplate.is-placeholder::after,
  .nameplate.is-typing::after,
  .level-line.is-growing .xp-fill::after {
    animation: none;
  }
  .motes,
  .touch-heart,
  body.is-evo-dim::before,
  .evo-overlay {
    display: none;
  }
  .is-meet .window,
  .sky,
  .window,
  .window::after,
  main::before {
    transition: none;
  }
}

/* First-tap wake: lights off, pet glows, one touch turns the window on */
@media (prefers-reduced-motion: no-preference) {
  .has-app body[data-wake] main > * {
    transition: opacity .55s ease, visibility .55s;
  }
  .has-app body[data-wake]:not(.is-awake) main > :not(.window),
  .has-app body[data-wake]:not(.is-revealed) main > :not(.window, .topbar, .plate, .dialog) {
    opacity: 0;
    visibility: hidden;
  }
  .has-app body[data-wake].is-awake:not(.is-revealed) main > .dialog {
    animation: dialog-rise .45s var(--ease-out) .2s both;
  }
  .has-app body[data-wake]:not(.is-awake) main::before {
    background: linear-gradient(180deg, var(--navy) 0%, #151c2d 55%, var(--navy) 100%);
  }
  .has-app body[data-wake]:not(.is-awake) .sky::before { opacity: .96; }
  .has-app body[data-wake]:not(.is-awake) .window::after { opacity: 0; }
  .has-app body[data-wake]:not(.is-awake) .window {
    box-shadow:
      0 0 0 3px rgba(241, 214, 140, 0.28),
      0 0 0 8px var(--navy2),
      0 0 0 9px rgba(241, 214, 140, 0.06),
      0 22px 40px -10px rgba(0, 0, 0, 0.6);
  }
  .has-app body[data-wake] .pet::before {
    content: "";
    position: absolute;
    inset: -26%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 214, 140, 0.62) 0%, rgba(241, 214, 140, 0.2) 42%, transparent 68%);
    opacity: 1;
    transition: opacity .9s ease;
    animation: wake-glow 2.4s ease-in-out infinite;
    pointer-events: none;
  }
  .has-app body[data-wake].is-awake .pet::before {
    opacity: 0;
  }
  .has-app body[data-wake] .pet-hit {
    position: relative;
    z-index: 1;
  }
  .has-app body[data-morning]:not(.is-awake) .pet-frame { opacity: 0; }
  .has-app body[data-morning]:not(.is-awake) .pet-frame[data-frame="blink"] { opacity: 1; }
  .has-app body[data-morning]:not(.is-awake, .is-asleep-page) .sky::before { opacity: .8; }
}
@keyframes wake-glow {
  0%, 100% { transform: scale(.9); }
  50% { transform: scale(1.06); }
}
@keyframes dialog-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.wake-call {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  z-index: 4;
  margin: 0;
  padding: 10px 18px;
  white-space: nowrap;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--cocoa);
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  transition: opacity .35s ease;
  animation: wake-call-in .5s var(--ease-out) .35s both, wake-call-bob 2.4s ease-in-out .85s infinite;
}
.wake-call::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 9px;
  margin-left: -8px;
  background: inherit;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.wake-call.is-gone { opacity: 0; }
@keyframes wake-call-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes wake-call-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -4px); }
}

/* Demo sheet (demo chips only) */
[data-demo-hold] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.demo-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 9, 16, 0);
  transition: background-color .25s ease;
}
.demo-sheet.is-open { background: rgba(6, 9, 16, 0.6); }
.demo-card {
  width: 100%;
  max-width: 440px;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #222b42 0%, var(--navy2) 140px);
  box-shadow: 0 -2px 0 var(--gold), 0 -20px 44px rgba(0, 0, 0, 0.5);
  transform: translateY(calc(100% + 24px));
  transition: transform .26s var(--ease-out);
}
.demo-sheet.is-open .demo-card { transform: translateY(0); }
.demo-card::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(241, 214, 140, 0.45);
}
/* All 12 animals in two rows, then the edition row */
.demo-card .mascot-toggle {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 0 0 8px;
  padding: 5px;
  border-radius: 20px;
}
.demo-card .mascot-tog {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 5px 0 4px;
  border-radius: 15px;
  line-height: 1;
}
.demo-card .mascot-tog img {
  width: 40px;
  height: 40px;
}
.demo-card .mascot-tog span {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.demo-tier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(8, 11, 19, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(241, 214, 140, 0.16);
}
.demo-card .demo-tier button {
  min-height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .875rem;
  box-shadow: none;
}
.demo-card .demo-tier button[aria-pressed="true"] {
  background: radial-gradient(circle at 50% 32%, #2c3858, var(--midnight, #1c2538));
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1.5px var(--gold, #d6a546), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.demo-card form { margin: 0; }
.demo-close {
  background: none;
  color: var(--muted);
  font-weight: 700;
  margin-top: 4px;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .dialog-cursor,
  .dialog-cursor.is-done { animation: none; }
  .dialog-dots i { animation: none; opacity: .6; }
  .demo-sheet,
  .demo-card,
  .sheet,
  .sheet-card { transition: none; }
}

/* Legendary reveal: a 1080x1920 stage scaled as one, name and date drawn over the video */
html.has-reveal,
html.has-reveal body { overflow: hidden; }
/* Fractional DPR can leave a device pixel row of the page under the overlay. */
html.has-reveal { background: #000; }
html.has-reveal main,
html.has-reveal body::after { visibility: hidden; }
.reveal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #000;
  touch-action: none;
  overscroll-behavior: contain;
}
.reveal[hidden] { display: none; }
.reveal-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1920px;
  transform-origin: 0 0;
  transition: opacity .45s ease;
}
.reveal.is-out .reveal-stage { opacity: 0; }
.reveal.is-pillar .reveal-stage {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.reveal.is-letter .reveal-stage {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.reveal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reveal-owner {
  position: absolute;
  top: 1440px;
  left: 0;
  width: 1080px;
  text-align: center;
  pointer-events: none;
}
.reveal-name {
  display: inline-grid;
  font: 900 228px/1.05 "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -0.02em;
  white-space: pre;
  transform-origin: 50% 80%;
  visibility: hidden;
  will-change: transform, opacity;
}
.reveal-name > span {
  grid-area: 1 / 1;
  color: transparent;
}
/* Outline sits under the gold: stroked on the gold itself, it also traced the font's overlapping strokes inside each letter.
   Filled, so its shadow is the whole letter; the gold hides the fill. */
.reveal-name > .reveal-name-edge {
  color: rgba(58, 34, 6, 0.92);
  -webkit-text-stroke: 6px rgba(58, 34, 6, 0.92);
  filter: drop-shadow(0 10px 0 #070A16) drop-shadow(0 0 34px rgba(255, 206, 110, 0.4));
}
/* The landing flash: a blurred gold copy that only fades, so the blur rasterizes once. */
.reveal-name > .reveal-name-glow {
  color: #FFCE6E;
  filter: blur(36px);
  opacity: 0;
  will-change: opacity;
}
/* Filtered siblings paint in the stacking phase; relative keeps the gold on top of them. */
.reveal-name-gold {
  position: relative;
  -webkit-background-clip: text;
  background-clip: text;
}
.reveal-date {
  position: absolute;
  top: 1762px;
  left: 0;
  width: 1080px;
  text-align: center;
  font: 600 30px "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: 0.2em;
  color: #f8f0e3;
  opacity: 0;
  pointer-events: none;
}
.reveal-actions {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
}
.reveal-skip,
.reveal-retry {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 9px 16px;
  font-size: .85rem;
  font-weight: 700;
  color: rgba(248, 240, 227, 0.86);
  background: rgba(8, 11, 19, 0.5);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(248, 240, 227, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.reveal.is-skippable .reveal-skip {
  opacity: 1;
  pointer-events: auto;
}
.reveal.is-named:not(.is-failed) .reveal-skip {
  opacity: 0;
  pointer-events: none;
}
.reveal:not(.is-failed) .reveal-retry { display: none; }
.reveal-retry {
  opacity: 1;
  pointer-events: auto;
  color: var(--navy);
  background: var(--gold-light);
  box-shadow: none;
}
.reveal.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2.5px solid rgba(248, 240, 227, 0.16);
  border-top-color: rgba(241, 214, 140, 0.8);
  border-radius: 50%;
  pointer-events: none;
  animation: reveal-spin .9s linear infinite, reveal-wait .4s ease .5s both;
}
@keyframes reveal-spin {
  to { transform: rotate(360deg); }
}
@keyframes reveal-wait {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-loading::after { animation: reveal-wait .4s ease .5s both; }
}

/* Care: the want bubble, props, lights out and the morning wake */
.dock-btn.is-want .dock-cap::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2.5px solid var(--gold-light);
  opacity: 0;
  animation: want-ring 1.8s ease-out infinite;
}
@keyframes want-ring {
  0% { opacity: .9; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.18); }
}
.is-asleep-page .dock-btn.is-verb { opacity: .45; }

.want,
.zzz { --pet: min(68cqw, 72cqh); }
/* The kind's lift and shift (/kinds.css) clear its ears; where the window cuts both short, the bubble shrinks by the smaller cut. */
.want {
  --aim-x: calc(50cqw + var(--pet) * (.3 + var(--shift, 0)));
  --aim-y: calc(90cqh - var(--pet) * (.98 + var(--lift, 0)) - 13.75cqmin);
  --x: min(var(--aim-x), 100cqw - 25cqmin - 8px);
  --y: max(var(--aim-y), 10px);
  --size: max(20cqmin, 25cqmin - max(0px, min(var(--aim-x) - var(--x), var(--y) - var(--aim-y))));
  position: absolute;
  left: calc(var(--x) + 25cqmin - var(--size));
  top: var(--y);
  z-index: 4;
  width: var(--size);
  height: var(--size);
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  touch-action: manipulation;
  transform-origin: 0% 100%;
  animation: want-in .5s cubic-bezier(.2, 1.4, .4, 1) both, want-float 3.2s ease-in-out .5s infinite;
}
.want:active .want-cloud { transform: scale(.93); }
.want.is-gone { pointer-events: none; animation: want-out .3s ease-in both; }
.want-cloud {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18), 0 8px 18px rgba(20, 27, 43, .28);
  transition: transform .12s ease;
}
.want-cloud svg { width: 64%; height: 64%; }
.want i {
  position: absolute;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.want i:nth-child(1) { left: -9%; bottom: -14%; width: 22%; height: 22%; }
.want i:nth-child(2) { left: -26%; bottom: -30%; width: 12%; height: 12%; }
@keyframes want-in {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes want-out {
  to { opacity: 0; transform: scale(.4); }
}
@keyframes want-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

/* Reactions and sleep take over the pet's idle motion */
.window .pet[data-pet="alive"].is-care .pet-motion { animation: none; }
.pet[data-pet="alive"].is-sleeping:not(.is-care) .pet-motion { animation: sleep-breathe 3.6s ease-in-out infinite; }
@keyframes sleep-breathe {
  0%, 100% { transform: translateY(3%) scale(.985, .975); }
  50% { transform: translateY(3%) scale(1.01, 1); }
}
.pet.is-sleeping .pet-frame { filter: brightness(.86) saturate(.92); }

/* Props live in the window, in front of the pet, clipped to its glass */
.prop-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.prop {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}
.prop svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Talk's dance: wind rings (far half under the pet, near half over it) and notes on a helix */
.dance-wind { position: absolute; inset: 0; pointer-events: none; }
.dance-wind.is-far { z-index: 1; }
.dance-wind svg { position: absolute; left: 0; top: 0; overflow: visible; }
.dw-arc {
  fill: none;
  stroke: var(--dw-ink, #fff);
  stroke-width: calc(5.5px - var(--i) * .8px);
  stroke-linecap: round;
  stroke-dasharray: 26 8;
  filter: drop-shadow(0 0 6px var(--dw-glow, rgba(255, 211, 106, .9)));
  animation: dw-flow .3s linear infinite;
}
.dance-wind.is-far .dw-arc { opacity: .5; animation-direction: reverse; }
@keyframes dw-flow { to { stroke-dashoffset: -34; } }
.dance-note {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--dw-note, #ffd36a);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 10px rgba(255, 255, 255, .6);
  pointer-events: none;
}

/* Talk's huff and sniff: two puffs out of the nose, wisps drawn in toward it */
.nose-air {
  position: absolute;
  z-index: 4;
  width: var(--s);
  height: calc(var(--s) * .7);
  margin: calc(var(--s) * -.35) 0 0 calc(var(--s) * -.5);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px var(--air-shade, rgba(90, 62, 38, .55)));
}
.nose-air svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nose-air.is-out { animation: air-out .8s ease-out both; }
.nose-air.is-out path { fill: var(--air, #fff); }
.nose-air.is-in { height: calc(var(--s) * .5); margin-top: calc(var(--s) * -.25); animation: air-in .36s ease-in both; }
.nose-air.is-in path { fill: none; stroke: var(--air, #fff); stroke-width: 3.6; stroke-linecap: round; }
@keyframes air-out {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  20% { opacity: 1; transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) scale(.85); }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25); }
}
@keyframes air-in {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 0) rotate(var(--r)) scale(.4); }
}
.crumb {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
}
.sparkle {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: var(--gold-light);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle-pop .7s ease-out both;
}
@keyframes sparkle-pop {
  0% { opacity: 0; transform: scale(.2) rotate(0); }
  30% { opacity: 1; transform: scale(1.1) rotate(30deg); }
  100% { opacity: 0; transform: scale(.4) rotate(90deg) translate(var(--sx, 0), var(--sy, -20px)); }
}

/* Lights out */
.window.is-asleep .sky::before { opacity: .42; }
.night-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(80% 70% at 50% 40%, rgba(14, 19, 40, .55), rgba(6, 8, 20, .82));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.window.is-dimming .night-veil { opacity: 1; }
.moon {
  position: absolute;
  z-index: 1;
  top: 9%;
  right: 12%;
  width: 17cqmin;
  height: 17cqmin;
  opacity: 0;
  pointer-events: none;
  transform: translateY(30%);
  transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.2, .8, .3, 1);
}
.window.is-asleep .moon { opacity: 1; transform: none; }
.moon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zzz {
  position: absolute;
  left: calc(50cqw + var(--pet) * .16);
  top: calc(90cqh - var(--pet) * .88);
  z-index: 4;
  font-family: "Pretendard Variable", sans-serif;
  font-weight: 900;
  color: var(--gold-light);
  -webkit-text-stroke: 1px rgba(20, 27, 43, .35);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 12px rgba(241, 214, 140, .45);
  pointer-events: none;
  animation: zzz-rise 2.6s ease-out both;
}
@keyframes zzz-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-8deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(34px, -70px) scale(1.25) rotate(10deg); }
}

/* Morning: the next plushie tap finds the pet asleep, one touch wakes it */
.wake-tap {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 5;
  margin: 0;
  padding: 9px 16px;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 800;
  color: var(--cocoa);
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .35);
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .3s ease;
  animation: wake-call-in .5s var(--ease-out) .2s both, wake-call-bob 2.4s ease-in-out .7s infinite;
}
.wake-tap.is-gone { opacity: 0; }

/* Asleep: a card shows the phone meeting the plushie, since a finger on the screen never wakes it */
.wake-hint {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 92%;
  padding: 8px 16px 8px 10px;
  color: var(--cocoa);
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .35);
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .3s ease;
  animation: wake-call-in .45s var(--ease-out) both;
}
.wake-hint.is-gone { opacity: 0; }
.wake-hint.is-nudge { animation: wake-hint-nudge .45s ease-out; }
@keyframes wake-hint-nudge {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 6px)); }
  50% { transform: translateX(calc(-50% + 5px)); }
  75% { transform: translateX(calc(-50% - 3px)); }
}
.wh-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.wh-text b { font-size: 15px; font-weight: 900; }
.wh-text small { font-size: 12px; font-weight: 700; opacity: .7; }
.wh-art { position: relative; flex: none; width: 60px; height: 48px; }
.wh-phone { position: absolute; left: 2px; top: 4px; width: 24px; height: 40px; border-radius: 6px; background: #2a3146; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(42, 49, 70, .5); }
.wh-phone::before { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: #8a92a8; }
.wh-spot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ffd36a; }
.wh-spot::after { content: ""; position: absolute; inset: -2px; border: 2px solid #ffd36a; border-radius: 50%; opacity: 0; animation: wh-wave 2s ease-out infinite; }
.wh-plush { position: absolute; left: 25px; top: 9px; width: 32px; height: 32px; object-fit: contain; animation: wh-tap-back 2s ease-in-out infinite; }
@keyframes wh-tap-back {
  0%, 100% { transform: translateX(8px) rotate(12deg); }
  32% { transform: translateX(-9px) rotate(-3deg); }
  40% { transform: translateX(-7px) rotate(-2deg) scale(1.08, .92); }
  64% { transform: translateX(8px) rotate(12deg); }
}
@keyframes wh-wave {
  0%, 30% { opacity: 0; transform: scale(.6); }
  34% { opacity: 1; }
  78%, 100% { opacity: 0; transform: scale(2.8); }
}
/* iPhone: the reader sits at the top edge, so the plushie comes down onto it */
.wake-hint[data-spot="top"] .wh-art { height: 58px; }
.wake-hint[data-spot="top"] .wh-phone { left: 18px; top: 28px; height: 30px; border-radius: 6px 6px 0 0; }
.wake-hint[data-spot="top"] .wh-phone::before { left: 7px; top: 4px; width: 10px; height: 3px; border-radius: 2px; background: #000; }
.wake-hint[data-spot="top"] .wh-spot { top: 0; }
.wake-hint[data-spot="top"] .wh-plush { left: 16px; top: 0; width: 28px; height: 28px; transform-origin: 50% 100%; animation-name: wh-tap-top; }
@keyframes wh-tap-top {
  0%, 100% { transform: translateY(-5px) rotate(-10deg); }
  32% { transform: translateY(1px) rotate(0); }
  40% { transform: translateY(2px) scale(1.08, .9); }
  64% { transform: translateY(-5px) rotate(-10deg); }
}
.wh-key {
  position: absolute;
  left: 9px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 34px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
  color: #2a3146;
  background: #fff;
  box-shadow: inset 0 0 0 2px #2a3146, 0 4px 0 #8a92a8;
  animation: wh-press 1.6s ease-in-out infinite;
}
@keyframes wh-press {
  0%, 40%, 100% { transform: none; box-shadow: inset 0 0 0 2px #2a3146, 0 4px 0 #8a92a8; }
  50%, 60% { transform: translateY(3px); box-shadow: inset 0 0 0 2px #2a3146, 0 1px 0 #8a92a8; }
}
.sun-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(75% 65% at 50% 32%, rgba(255, 251, 238, .97), rgba(255, 232, 186, .55));
  animation: sun-flash .85s ease-out both;
}
@keyframes sun-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .want,
  .dock-btn.is-want .dock-cap::after,
  .pet[data-pet="alive"].is-sleeping .pet-motion { animation: none; }
  .want.is-gone { animation: none; opacity: 0; }
  .wake-hint,
  .wake-hint.is-nudge,
  .wh-plush,
  .wh-spot::after,
  .wh-key { animation: none; }
  .wake-hint .wh-plush { transform: translateX(-7px); }
  .wake-hint[data-spot="top"] .wh-plush { transform: translateY(1px); }
  .dock-btn.is-want .dock-cap::after { opacity: .9; }
  .sky::before,
  .stars,
  .night-veil,
  .moon { transition: none; }
}

/* Tap combo: a key counts the plushie's taps; the third unlocks the window's keyhole */
:root {
  --k-fill: #f3d27a;
  --k-fill2: #c9932e;
  --k-edge: #8a5a12;
  --k-hole: #1c2233;
  --k-ring: #f7dc8c;
  --k-ghost: rgba(138, 90, 18, .55);
  --k-pill: rgba(28, 34, 51, .82);
  --k-pill-ink: #fbe7b0;
  --k-ray: 255, 226, 140;
}
.combo-key {
  --kw: clamp(140px, 45cqw, 184px);
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 12px;
  width: var(--kw);
  margin-left: calc(var(--kw) / -2);
  pointer-events: none;
  transform-origin: 50% 0;
}
.combo-key svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25)); }
.combo-key .k-stop { stop-color: var(--k-fill); }
.combo-key .k-stop2 { stop-color: var(--k-fill2); }
.combo-key .k-body { stroke: var(--k-edge); }
.combo-key .k-hole { fill: var(--k-hole); }
.combo-key .k-edge { fill: var(--k-edge); }
.combo-key .k-fill { fill: var(--k-fill); }
.combo-key .k-fill2 { fill: var(--k-fill2); }
.combo-key .tooth { stroke: var(--k-ghost); stroke-width: 2; stroke-dasharray: 3 3; transform-box: fill-box; transform-origin: 50% 0; }
.combo-key .tooth:not(.on) { fill: transparent; }
.combo-key .tooth.on { stroke: var(--k-edge); stroke-dasharray: none; }
.combo-key .tooth.is-pop { animation: tooth-pop .42s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tooth-pop {
  0% { transform: scaleY(0); }
  70% { transform: scaleY(1.35); }
  100% { transform: scaleY(1); }
}
.combo-key .ring { fill: none; stroke: var(--k-ring); stroke-width: 3.2; stroke-linecap: round; }
.combo-key .ring-bg { fill: none; stroke: rgba(0, 0, 0, .14); stroke-width: 3.2; }
.combo-key .px-timer rect { fill: var(--k-fill); }
.combo-key .px-timer rect.off { fill: rgba(29, 29, 43, .35); }
.combo-key.is-full svg { animation: key-glint .5s ease-out; }
@keyframes key-glint {
  0% { filter: drop-shadow(0 0 0 rgba(var(--k-ray), 0)); }
  40% { filter: drop-shadow(0 0 14px rgba(var(--k-ray), 1)); }
  100% { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25)); }
}
.combo-pill {
  position: absolute;
  left: 50%;
  top: 100%;
  margin: 2px 0 0;
  padding: 5px 12px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--k-pill-ink);
  background: var(--k-pill);
  border-radius: 999px;
  transform: translateX(-50%);
  animation: pill-nudge 1.1s ease-in-out infinite;
}
@keyframes pill-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
/* Short windows put the pet's head right under the key; the key shrinks with the window so the pill floats above the head. */
@container (max-height: 360px) {
  .combo-key { --kw: min(clamp(140px, 45cqw, 184px), max(60px, 60cqh - 66px)); top: 4px; }
  .combo-pill { margin-top: 0; padding: 3px 10px; font-size: 12px; line-height: 1.3; }
}

/* The plushie's tap landing on the phone */
.tap-ripple {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 3px solid rgba(var(--k-ray), .95);
  pointer-events: none;
  animation: tap-ripple .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes tap-ripple {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(7); opacity: 0; }
}
.tap-word {
  position: absolute;
  z-index: 7;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 5px var(--k-edge);
  paint-order: stroke fill;
  pointer-events: none;
  animation: tap-word .9s ease-out forwards;
}
@keyframes tap-word {
  0% { transform: scale(.3) rotate(-12deg); opacity: 0; }
  25% { transform: scale(1.15) rotate(-6deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-26px) scale(1) rotate(-6deg); opacity: 0; }
}
.px-note {
  position: absolute;
  z-index: 5;
  font-family: "Galmuri11", monospace;
  font-size: 22px;
  color: #ffec27;
  text-shadow: 2px 2px 0 #1d1d2b;
  pointer-events: none;
}

/* Unlock: rays from the window's keyhole, clipped to the screen so the page never scrolls sideways */
.unlock-rays {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -490px;
  width: 100vw;
  height: 900px;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
}
.unlock-rays i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 900px;
  height: 900px;
  margin-left: -450px;
  border-radius: 50%;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(var(--k-ray), .55) 0deg 7deg, rgba(var(--k-ray), 0) 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, rgba(0, 0, 0, .7) 40%, transparent 70%);
  mask: radial-gradient(circle, #000 0 18%, rgba(0, 0, 0, .7) 40%, transparent 70%);
}
.keyhole-flash {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: -2px;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(var(--k-ray), .8) 35%, rgba(var(--k-ray), 0) 70%);
  pointer-events: none;
}
.shower { position: absolute; z-index: 5; pointer-events: none; }
.shower svg { display: block; width: 100%; height: 100%; }
.floor-ring {
  position: absolute;
  z-index: 2;
  height: 26px;
  border-radius: 50%;
  border: 4px solid rgba(var(--k-ray), .9);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .combo-pill { animation: none; }
}

/* 오락실 and 기 모으기: the window is the stage, the HUD and result card float over it */
:root {
  --g-ink: #1b2233;
  --g-stroke: #fff;
  --g-fill-a: #ffe9a8;
  --g-fill-b: #d6a546;
  --g-track: rgba(27, 34, 51, .16);
  --g-aura: 255, 214, 120;
  --g-card: #fffaf0;
  --g-card-ink: #4a2c20;
  --g-accent: #d6a546;
  --g-accent-ink: #fff;
  --g-xp: #b8862b;
  --g-big: #fff;
  --g-big-edge: #9a7228;
  --g-label: rgba(27, 34, 51, .85);
  --g-label-ink: #fbe7b0;
}
html.g-on .pet-stats,
html.g-on .dock,
html.g-on .topbar-end { opacity: .22; filter: saturate(.5); pointer-events: none; transition: opacity .4s ease, filter .4s ease; }
html.g-on .window { touch-action: none; }

.g-today { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; font-size: .8125rem; font-weight: 700; color: var(--gold-light); }
.g-today b { margin-left: 2px; color: var(--cream); }
.g-pip { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d6, var(--gold) 70%); box-shadow: 0 0 6px rgba(241, 214, 140, .6); }
.g-pip.is-used { opacity: .3; box-shadow: none; filter: grayscale(1); }
.g-list { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.g-card {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 12px; border-radius: 20px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(241, 214, 140, .28);
}
.g-card.is-ready { background: linear-gradient(135deg, rgba(241, 214, 140, .2), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 2px rgba(241, 214, 140, .7), 0 6px 18px rgba(0, 0, 0, .25); }
.g-card.is-locked { opacity: .55; }
.g-thumb { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.g-thumb-pet { position: relative; width: 52px; height: 52px; object-fit: contain; }
.g-thumb svg { width: 26px; height: 26px; fill: none; stroke: var(--muted, #a9b0c2); stroke-width: 2; stroke-linecap: round; }
.g-thumb-aura { position: absolute; inset: -10px; background: radial-gradient(circle, rgba(255, 226, 140, .95) 0 22%, rgba(255, 226, 140, .35) 42%, transparent 66%); animation: g-thumb 1.6s ease-in-out infinite; }
@keyframes g-thumb { 50% { transform: scale(1.12); opacity: .75; } }
.g-txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.g-txt b { font-size: 1rem; font-weight: 800; color: var(--cream); }
.g-txt small { font-size: .78rem; color: var(--muted, #a9b0c2); }
.g-start {
  flex: none; width: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: .95rem;
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--navy); box-shadow: 0 3px 0 var(--gold-deep);
}
.g-start:disabled { opacity: .55; cursor: default; }
.g-gifts,
.record-guide {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 0; margin: 0; padding: 12px 4px 4px; border-radius: 0;
  border-top: 1px solid rgba(241, 214, 140, .18); background: none; box-shadow: none; font-family: inherit; font-size: .875rem; font-weight: 700;
  color: var(--muted, #a9b0c2); text-align: left;
}
.g-gifts:active,
.record-guide:active { transform: none; box-shadow: none; }
.record-guide { margin-top: 10px; }
.g-gifts b { color: var(--gold-light); }
.g-gift-ic { position: relative; display: grid; }
.g-gift-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--gold-light); stroke-width: 1.8; }
.g-gifts.has-new .g-gift-ic::after { content: ""; position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--navy2); }
.g-chev { margin-left: auto; font-size: 1.2rem; }

.g2-stage { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
/* The canvas fills its window but never stretches: a size it was not drawn for shows it whole and in shape until it is redrawn. */
.g2-stage canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }

.g-hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.g-timer { position: absolute; left: 26px; right: 26px; top: 18px; height: 10px; border-radius: 999px; background: var(--g-track); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); transition: opacity .3s; }
.g-timer i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--g-fill-b), var(--g-fill-a)); transform-origin: 0 50%; }
.g-timer.is-hurry i { background: linear-gradient(90deg, #ff5d5d, #ffb36b); animation: g-hurry .5s steps(2) infinite; }
.g-hud.is-still .g-timer.is-hurry i { animation: none; }
@keyframes g-hurry { 50% { filter: brightness(1.5); } }
.g-height {
  position: absolute; left: 0; right: 0; top: 30px; margin: 0; text-align: center; line-height: 1; color: var(--g-ink);
  font-weight: 900; font-variant-numeric: tabular-nums; -webkit-text-stroke: 6px var(--g-stroke); paint-order: stroke fill;
}
.g-height small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 800; -webkit-text-stroke: 4px var(--g-stroke); opacity: .85; }
.g-height b { font-size: 32px; font-weight: 900; letter-spacing: -.02em; }
.g-height span { margin-left: 2px; font-size: 18px; }
.g-hud.is-flight .g-height b { font-size: 36px; }
.g-hud.is-done .g-height { opacity: 0; transition: opacity .3s; }
/* A status like the height, not a button: outlined type, no chip. */
.g-bonus { position: absolute; left: 22px; top: 36px; margin: 0; font-size: 13px; font-weight: 900; white-space: nowrap; color: var(--g-ink); -webkit-text-stroke: 4px var(--g-stroke); paint-order: stroke fill; }
.g-hud.is-done .g-bonus { opacity: 0; transition: opacity .3s; }
/* A short window (a phone browser's bars) pulls the meter in and shrinks its icons, so the tiers never stack. */
.g-meter { position: absolute; right: 16px; top: min(82px, 22cqh); bottom: min(54px, 10cqh); width: 12px; border-radius: 999px; background: var(--g-track); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); transition: opacity .35s, transform .35s; }
.g-meter.is-away, .g-timer.is-away { opacity: 0; transform: translateX(14px); }
.g-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: inherit; background: linear-gradient(0deg, var(--g-fill-b), var(--g-fill-a)); box-shadow: 0 0 12px rgba(var(--g-aura), .9); transition: height .22s cubic-bezier(.3, 1.5, .5, 1); }
.g-tier { position: absolute; right: 16px; width: min(28px, 11cqh); height: min(28px, 11cqh); margin-bottom: max(-14px, -5.5cqh); opacity: .4; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.g-tier svg { display: block; width: 100%; height: 100%; overflow: visible; }
.g-tier.is-reached { opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--g-aura), 1)); animation: g-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes g-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }
.g-label {
  position: absolute; left: 50%; top: 84px; display: flex; align-items: center; gap: 5px; width: max-content; translate: -50% 0; white-space: nowrap;
  padding: 4px 12px 4px 6px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--g-label); color: var(--g-label-ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.g-label svg { width: 20px; height: 20px; }
.g-pause {
  position: absolute; z-index: 9; left: 50%; top: 64%; display: grid; gap: 3px; width: max-content; max-width: 88%; translate: -50% -50%;
  padding: 10px 18px; border-radius: 18px; text-align: center; background: var(--g-label); color: var(--g-label-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.g-pause b { font-size: 16px; font-weight: 900; }
.g-pause small { font-size: 13px; font-weight: 700; opacity: .85; }

/* Tier icon colors */
svg[data-icon] .i-a { stroke-linejoin: round; }
svg[data-icon] .i-b { fill: none; stroke-width: 2.6; stroke-linecap: round; }
svg[data-icon="cloud"] .i-a { fill: #fff; stroke: #8fb8d8; stroke-width: 2; }
svg[data-icon="moon"] .i-a { fill: #ffe7a0; stroke: #c9932e; stroke-width: 2; }
svg[data-icon="star"] .i-a { fill: #ffd84a; stroke: #c98a12; stroke-width: 2; }
svg[data-icon="galaxy"] .i-a { fill: #ffd6f1; stroke: #a36bd8; stroke-width: 2; }
svg[data-icon="galaxy"] .i-b { stroke: #a36bd8; }
svg[data-icon="sky"] .i-a { fill: #ffd27a; stroke: #e0962b; stroke-width: 2; }
svg[data-icon="sky"] .i-b { stroke: #e0962b; }
svg[data-icon="beyond"] .i-a { fill: #f6b77a; stroke: #b86a2c; stroke-width: 2; }
svg[data-icon="beyond"] .i-b { stroke: #f6d8a8; }

.g-big {
  position: absolute; z-index: 8; left: 0; right: 0; top: 24%; text-align: center; pointer-events: none;
  font-size: 88px; font-weight: 900; line-height: 1; color: var(--g-big); -webkit-text-stroke: 12px var(--g-big-edge); paint-order: stroke fill;
}
.g-big.is-go { font-size: 64px; }
.g-hint {
  position: absolute; z-index: 8; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 88%;
  margin-left: calc(-1 * min(44%, 150px)); padding: 8px 14px 8px 10px; border-radius: 18px; background: var(--g-label); color: var(--g-label-ink); font-size: 14px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.g-hint svg { width: 30px; height: 42px; flex: none; }
.g-hint .h-phone { fill: #2a3146; stroke: #fff; stroke-width: 2; }
.g-hint .h-cam { fill: #8a92a8; }
.g-hint .h-spot { fill: rgba(var(--g-aura), .9); }
.g-hint .h-wave { fill: none; stroke: rgba(var(--g-aura), 1); stroke-width: 2; transform-origin: 20px 22px; animation: g-wave 1.1s ease-out infinite; }
@keyframes g-wave { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
/* A pet's first play: the guide's finger taps the pet, 톡톡, a ring under each tap, until its first real tap. */
.g-poke { position: absolute; z-index: 7; width: 52px; height: 57px; translate: -21px -3px; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)); }
.g-poke svg { display: block; width: 100%; height: 100%; overflow: visible; animation: g-poke 1.2s cubic-bezier(.45, 0, .3, 1) infinite; }
.g-poke path { fill: var(--coach-hand); stroke: var(--coach-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.g-poke::before { content: ""; position: absolute; left: 21px; top: 3px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid var(--coach-ring); opacity: 0; animation: g-poke-ring 1.2s ease-out infinite; }
@keyframes g-poke { 0%, 45%, 100% { transform: translateY(-14px); } 12%, 30% { transform: translateY(0) scale(.96); } 21% { transform: translateY(-8px); } }
@keyframes g-poke-ring { 0%, 11% { opacity: 0; transform: scale(.3); } 13% { opacity: .9; transform: scale(.4); } 30% { opacity: .8; transform: scale(.7); } 55%, 100% { opacity: 0; transform: scale(1.3); } }

.g-result {
  position: absolute; z-index: 9; left: 50%; top: 13%; width: 236px; margin-left: -118px; padding: 16px 16px 14px; border-radius: 26px; text-align: center;
  background: var(--g-card); color: var(--g-card-ink); box-shadow: 0 0 0 3px var(--g-accent), 0 18px 40px rgba(0, 0, 0, .35);
}
.g-result p { margin: 0; }
.g-badge { width: 64px; height: 64px; margin: -50px auto 4px; padding: 10px; border-radius: 50%; background: var(--g-card); box-shadow: 0 0 0 3px var(--g-accent), 0 0 24px rgba(var(--g-aura), .9); }
.g-badge svg { display: block; width: 100%; height: 100%; }
.g-place { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.g-meters { margin-top: 2px !important; font-size: 15px; font-weight: 800; opacity: .9; font-variant-numeric: tabular-nums; }
.g-meters b { font-size: 30px; font-weight: 900; }
.g-best { display: inline-block; margin-top: 6px !important; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 900; background: linear-gradient(90deg, #ff9aa2, #ffd38a, #9ad7ff); color: #2a1d10; animation: g-best .8s ease-in-out infinite alternate; }
@keyframes g-best { to { transform: scale(1.08); } }
.g-prev { margin-top: 6px !important; font-size: 12px; font-weight: 700; opacity: .7; }
.g-xp { display: flex; justify-content: center; gap: 8px; align-items: baseline; margin-top: 10px !important; font-size: 13px; font-weight: 700; }
.g-xp b { font-size: 15px; font-weight: 900; color: var(--g-xp); }
.g-level { margin-top: 4px !important; font-size: 12px; font-weight: 800; color: var(--g-xp); }
.g-actions { display: flex; gap: 8px; margin-top: 12px; }
.g-actions button { flex: 1; width: auto; min-height: 42px; padding: 0 8px; border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: none; }
.g-result .g-again { background: var(--g-accent) !important; color: var(--g-accent-ink) !important; }
.g-result .g-quit { background: transparent !important; color: var(--g-card-ink) !important; box-shadow: inset 0 0 0 2px var(--g-accent) !important; }

@media (prefers-reduced-motion: reduce) {
  .g-thumb-aura, .g-best, .g-hint .h-wave, .g-poke svg, .g-poke::before { animation: none; }
}

/* 텃밭: the farm takes the window; the dock dims but its last button reads 집으로 */
html.f-on .dock-btn:not([data-farm]),
html.f-on .topbar-end { opacity: .22; filter: saturate(.5); pointer-events: none; transition: opacity .4s ease, filter .4s ease; }
html.f-on .window { touch-action: none; }
html.f-layout main { padding-left: 20px; padding-right: 20px; }
html.f-layout .plate, html.f-layout .pet-stats { display: none; }
html.f-layout .window { max-height: none; min-height: 300px; margin: 4px 0; }
/* The basket row takes the footer's room, so a 655 px phone still fits the whole farm. */
html.f-layout main > footer { display: none; }
/* A farm visit wears the farm from its first paint, a field over the home, until app.js has the farm in; one that celebrates shows that on the home first.
   The layout must stay html.f-layout's (the empty room is the basket row's), or the page jumps and the stage is sized wrong. */
.has-app body[data-farm-visit]:not([data-celebrate]) main { padding-left: 20px; padding-right: 20px; }
.has-app body[data-farm-visit]:not([data-celebrate]) :is(.plate, .pet-stats, main > footer) { display: none; }
.has-app body[data-farm-visit]:not([data-celebrate]) .window { max-height: none; min-height: 300px; margin: 4px 0; touch-action: none; }
.has-app:not(.f-layout) body[data-farm-visit]:not([data-celebrate]) main::after { content: ""; order: -2; min-height: 52px; margin-top: -2px; }
.has-app body[data-farm-visit]:not([data-celebrate]) :is(.dock-btn:not([data-farm]), .topbar-end, .mascot-toggle) { opacity: .22; filter: saturate(.5); pointer-events: none; }
.has-app body[data-farm-visit]:not([data-celebrate]) .sky { animation: none; background: linear-gradient(180deg, #bfe1f4, #f7f3e8 35%, #f4e8cc 35% 41%, #d6eab0 41%, #bfdc93); }
.has-app[data-time="evening"] body[data-farm-visit]:not([data-celebrate]) .sky { background: linear-gradient(180deg, #f6a77d, #ffcf9e 22%, #ffe2bd 35%, #f4e8cc 35% 41%, #d6eab0 41%, #bfdc93); box-shadow: inset 0 0 0 100vmax rgba(138, 58, 30, .12); }
.has-app[data-time="night"] body[data-farm-visit]:not([data-celebrate]) .sky { background: linear-gradient(180deg, #16204a, #36457e 35%, #f4e8cc 35% 41%, #d6eab0 41%, #bfdc93); box-shadow: inset 0 0 0 100vmax rgba(30, 42, 94, .42); }
.has-app body[data-farm-visit]:not([data-celebrate]) .sky::after { display: none; }
.has-app body[data-farm-visit]:not([data-celebrate]) :is(.sky > *, .pet, .want) { visibility: hidden; }

.dock-btn.is-loading .dock-cap { animation: f-load .7s ease-in-out infinite alternate; }
@keyframes f-load { to { transform: translateY(2px) scale(.94); } }

.f-stage { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.f-stage canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.f-layer { position: absolute; inset: 0; z-index: 4; border-radius: inherit; overflow: hidden; pointer-events: none; color: #4a2c20; font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; container-type: size; }
.f-field { position: absolute; inset: 0; }

.f-cta {
  position: absolute; left: 50%; top: 12px; display: grid; justify-items: center; max-width: calc(100% - 24px); padding: 6px 14px;
  transform: translateX(-50%); white-space: nowrap; text-align: center;
  background: rgba(255, 252, 244, .92); border: 2px solid #e6d4b3; border-radius: 18px; box-shadow: 0 4px 10px rgba(20, 27, 43, .18);
}
.f-cta b { font-size: 14px; font-weight: 900; letter-spacing: -.02em; }
.f-cta small { font-size: 11.5px; font-weight: 700; color: #8a6a4a; }
.f-cta.is-ripe { grid-template-columns: auto auto; column-gap: 7px; padding: 7px 15px 7px 10px; background: linear-gradient(180deg, #fff7dd, #f7dc8f); border: 2.5px solid #9a7228; box-shadow: 0 6px 14px rgba(20, 27, 43, .3), 0 0 18px rgba(255, 226, 140, .7); animation: f-cta 1.6s ease-in-out infinite; }
.f-cta.is-ripe svg { grid-row: span 2; align-self: center; width: 30px; height: 15px; }
.f-cta.is-ripe b { font-size: 15px; }
.f-cta.is-ripe small { justify-self: start; color: #7a5a2a; }
@keyframes f-cta { 50% { box-shadow: 0 6px 14px rgba(20, 27, 43, .3), 0 0 28px rgba(255, 226, 140, 1); } }

.f-tag {
  position: absolute; padding: 2px 8px; transform: translate(-50%, 0); white-space: nowrap;
  font-size: 12px; font-weight: 900; color: #fff8e6; background: #8a6a3a; border: 2px solid #5e4524; border-radius: 7px;
}
.f-tag.is-say { padding: 3px 9px; font-size: 12.5px; color: #4a2c20; background: #fffaf0; border-color: #b8862f; box-shadow: 0 3px 8px rgba(20, 27, 43, .22); }
.f-tag.is-taste { background: linear-gradient(180deg, #f3ffe4, #dff3c6); border-color: #6fae3f; color: #2f5a1a; }
.f-tag.is-plot { font-size: 14px; background: linear-gradient(180deg, #fff7dd, #f7dc8f); border-color: #9a7228; }
.f-big {
  position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 34px; font-weight: 900; letter-spacing: -.02em;
  color: #fff; -webkit-text-stroke: 2px #4a2c20; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(74, 44, 32, .35);
}
.f-big.is-gold { color: #ffe27a; -webkit-text-stroke-color: #8a5a10; }
.f-big.is-xp { font-size: 42px; color: #ffd44d; -webkit-text-stroke: 3px #6b4410; text-shadow: 0 4px 0 rgba(74, 44, 32, .4), 0 0 18px rgba(255, 246, 214, .9); }
.f-big.is-level { top: 22%; padding: 0 12px; font-size: 26px; line-height: 1.25; color: #ffe27a; -webkit-text-stroke-color: #6b4410; }
.f-xp { position: absolute; font-size: 17px; font-weight: 900; color: #ffd44d; -webkit-text-stroke: 2px #6b4410; paint-order: stroke fill; white-space: nowrap; }
.f-tap { position: absolute; font-size: 26px; font-weight: 900; color: #fff; -webkit-text-stroke: 5px #4a2c20; paint-order: stroke fill; }
.f-bubble { position: absolute; padding: 2px 8px; transform: translate(-50%, 0); font-size: 14px; font-weight: 900; color: #4a2c20; background: #fff8e6; border: 2px solid #b8862f; border-radius: 7px; white-space: nowrap; }
.f-chips { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 20px); }
.f-chip { display: flex; align-items: center; gap: 2px; padding: 3px 8px 3px 4px; font-size: 13px; font-weight: 900; background: rgba(255, 252, 244, .92); border: 2px solid #e6d4b3; border-radius: 999px; }
.f-chip img { width: 22px; height: 22px; }

.f-order { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 90%; padding: 6px; border-radius: 14px; }
.f-check { position: absolute; right: -14px; top: -20px; font-size: 42px; line-height: 1; color: #36802f; text-shadow: 2px 2px #fff; transform: rotate(-12deg); }
.f-delivery { position: fixed; z-index: 150; font-size: 30px; pointer-events: none; }
.f-guide { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; text-align: center; color: #fff9e8; background: repeating-linear-gradient(0deg, #84502c 0 18px, #784523 19px 21px); border: 3px solid #58301a; border-radius: 10px; box-shadow: 0 4px 0 #462718, inset 0 1px #d4a270; }
.f-guide b { font-size: 22px; line-height: 1.2; font-weight: 900; }
.f-guide svg { flex: none; width: 42px; height: 24px; }
.f-hand { position: absolute; width: 60px; height: 66px; filter: drop-shadow(2px 4px 3px #4a2c2066); }
.f-hand svg { width: 100%; height: 100%; }
.f-hand span { display: none; position: absolute; top: -24px; left: 30px; font-size: 36px; font-weight: 900; color: #fff; text-shadow: 2px 2px #4a2c20; }
.f-hand.is-swipe { animation: f-swipe 2s ease-in-out infinite; }
.f-hand.is-basket { animation: f-hand-tap 1s ease-in-out infinite; }
@keyframes f-swipe { 0%, 15% { transform: translateX(-20px) rotate(-15deg); } 80%, 100% { transform: translateX(calc(var(--swipe) - 20px)) rotate(-15deg); } }
@keyframes f-hand-tap { 50% { transform: translateY(8px) scale(.9); } }

.f-card {
  position: absolute; left: 50%; top: 50%; width: 86%; max-height: calc(100% - 16px); overflow: auto; padding: 14px 12px 12px;
  transform: translate(-50%, -50%); text-align: center; pointer-events: auto;
  background: linear-gradient(180deg, #fffdf7, #fbf1de); border: 3px solid #d6a546; border-radius: 22px;
  box-shadow: 0 14px 30px rgba(20, 27, 43, .35), inset 0 2px 0 #fff;
}
.f-card h3 { margin: 0 0 2px; font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.f-card p { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; color: #8a6a4a; }
.f-seeds { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 5px; margin: 10px 0 8px; }
/* Five tiles keep one row on narrow windows (small phones, big display zoom). */
.f-seed { --tile: clamp(38px, calc((86cqw - 50px) / 5), 50px); position: relative; display: grid; place-items: center; width: var(--tile); height: calc(var(--tile) * 1.24); border-radius: 12px; background: #fff; box-shadow: 0 2px 0 #e6d4b3, inset 0 0 0 2px #f1e3c8; }
.f-seed img { width: calc(var(--tile) * .68); height: calc(var(--tile) * .68); margin-top: -10px; }
.f-seed b { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 10px; font-weight: 800; color: #9a7a55; white-space: nowrap; }
/* Never under 48px, so 황금 감자 clears its edges on small tiles. */
.f-seed.is-gold { width: max(var(--tile), 48px); background: linear-gradient(160deg, #fff6cf, #f7d97a); box-shadow: 0 2px 0 #c9932e, inset 0 0 0 2px #f1c75a, 0 0 18px rgba(246, 201, 69, .75); }
/* Five tiles fill the row exactly here, so the other four give up the gold tile's extra width. */
@container (height > 300px) {
  .f-seeds:has(.is-gold) .f-seed:not(.is-gold) { width: calc(var(--tile) - max(0px, 48px - var(--tile)) / 4); }
}
.f-seed.is-gold b { color: #8a5a10; }
.f-seed.is-gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 66%); background-size: 220% 100%; animation: f-shine 1.4s ease-in-out infinite; }
@keyframes f-shine { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.f-gold-line { font-size: 14px !important; font-weight: 800 !important; color: #b07a12 !important; opacity: 0; transition: opacity .3s ease; }
/* Padding, not margin: margins would fold into the seeds' and the button's. Two rows of seeds keep the tighter card. */
.f-card .f-gold-line { padding: 3px 0; }
.f-card:has(.f-seed:nth-child(7)) .f-gold-line { padding: 0; }
.f-gold-line.is-on { opacity: 1; }
.f-card .f-go {
  position: sticky; bottom: 0;
  margin-top: 10px; min-height: 46px; border-radius: 14px; font-family: inherit; font-size: 1rem; font-weight: 800; color: #141b2b;
  background: linear-gradient(180deg, #f1d68c 0%, #d6a546 55%);
  box-shadow: 0 4px 0 #9a7228, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* Short windows: a tighter card, so the seeds and the button show without scrolling. */
@container (max-height: 300px) {
  .f-card { padding: 9px 10px; }
  .f-card h3 { font-size: 17px; }
  .f-card p { font-size: 12px; line-height: 1.3; }
  .f-seeds { gap: 5px; margin: 6px 0 5px; }
  .f-seed { --tile: clamp(34px, calc((86cqw - 51px) / 6), 42px); }
  .f-seed img { margin-top: -8px; }
  .f-seed b { bottom: 2px; font-size: 9px; }
  .f-gold-line { font-size: 13px !important; }
  .f-card .f-go { margin-top: 6px; min-height: 40px; }
}
@container (max-height: 250px) {
  .f-card { padding: 6px 9px; }
  .f-card h3 { margin: 0; font-size: 16px; }
  .f-card p { font-size: 11px; }
  .f-seeds { gap: 4px 5px; margin: 3px 0; }
  .f-seed { --tile: clamp(32px, calc((86cqw - 49px) / 6), 38px); }
  .f-gold-line { font-size: 12px !important; }
  .f-card .f-go { margin-top: 4px; min-height: 34px; }
}
@container (max-height: 210px) {
  .f-card h3 + p { display: none; }
  .f-seed { --tile: clamp(30px, calc((86cqw - 49px) / 6), 34px); }
  .f-card .f-go { min-height: 32px; }
}

.f-prompt {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px;
  background: rgba(20, 27, 43, .46); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.f-prompt p {
  max-width: 300px; padding: 16px 20px; text-align: center; font-size: 17px; font-weight: 900; line-height: 1.45; color: #4a2c20;
  background: linear-gradient(180deg, #fff7dd, #f7dc8f); border: 3px solid #9a7228; border-radius: 22px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  animation: f-prompt 1.2s ease-in-out infinite;
}
.f-prompt:focus-visible { outline: none; }
@keyframes f-prompt { 50% { transform: scale(1.04); } }
.f-big.is-snack { top: 26%; padding: 0 14px; font-size: 23px; line-height: 1.3; color: #fff4c8; -webkit-text-stroke-color: #6b4410; }

/* The basket row under the field: the pantry's crops (tap one to feed it or send it), 모두 보내기, and the coins */
.f-basket { display: none; }
html.f-layout .f-basket {
  order: -2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  margin: -2px 0 0;
  padding: 2px 4px 2px 5px;
  color: #4a2c20;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  background: linear-gradient(180deg, #fffaf0, #f6e6c6);
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px #d6a546, 0 6px 14px rgba(0, 0, 0, .3);
}
.fb-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 2px 2px 4px;
  overflow-x: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.fb-list::-webkit-scrollbar { display: none; }
.f-basket.is-busy .fb-list { opacity: .5; pointer-events: none; transition: opacity .2s; }
.f-basket .fb-crop {
  all: unset;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 2px 0 #e0c99c, inset 0 0 0 2px #f1e3c8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fb-crop img { width: 32px; height: 32px; pointer-events: none; }
.fb-crop b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  color: #fff8e6;
  background: #8a5a2a;
}
.f-basket .fb-crop.is-chosen { background: #fff6dc; box-shadow: 0 2px 0 #9a7228, inset 0 0 0 2.5px #d6a546, 0 0 0 3px rgba(214, 165, 70, .35); }
.f-basket .fb-act {
  all: unset;
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 44px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: #4a2c20;
  background: linear-gradient(180deg, #ffe58f, #f5c542);
  box-shadow: 0 3px 0 #b9821c;
}
.f-basket .fb-act.is-feed { color: #fff; background: linear-gradient(180deg, #f39a86, #e8806b); box-shadow: 0 3px 0 #b4503d; }
/* 모두 보내기 stays in reach however many crops scroll under it. */
.f-basket .fb-act.is-all { position: sticky; right: 0; margin-left: auto; box-shadow: 0 3px 0 #b9821c, 0 0 0 7px #f9eed8, -16px 0 10px -2px #f9eed8; }
/* A chosen crop needs the room for both buttons, so the coins drop their 가게 label meanwhile. */
.f-basket.is-chosen :is(.fb-shop, .fb-lock) { display: none; }
.f-basket .fb-act:active, .f-basket .fb-crop:active { transform: translateY(2px); }
.f-basket .fb-act:focus-visible, .f-basket .fb-crop:focus-visible, .f-basket .fb-coins:focus-visible { outline: 3px solid #9a7228; outline-offset: 2px; }
.fb-empty { margin: 0; padding: 0 6px; font-size: 13px; font-weight: 700; line-height: 1.35; color: #8a6a4a; }
.f-basket .fb-coins {
  all: unset;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px 0 8px;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #6b4410;
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1.5px #e0c99c;
  -webkit-tap-highlight-color: transparent;
}
.f-basket .fb-coins.is-shop { cursor: pointer; background: #fff; box-shadow: 0 2px 0 #e0c99c, inset 0 0 0 2px #f1c75a; }
.fb-shop { margin-left: 2px; padding: 2px 6px; border-radius: 999px; font-size: 11px; color: #fff8e6; background: #8a5a2a; }
/* Before Lv 3 the shop is there but shut: a quiet chip with its lock and level. */
.fb-lock { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; padding: 2px 6px 2px 4px; border-radius: 999px; font-size: 11px; color: #8a5a2a; background: rgba(138, 90, 42, .14); }
.fb-lock[hidden] { display: none; }
.fb-lock svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.fb-lock rect { fill: currentColor; }
.f-coin-ic {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #f5c542 55%, #b9821c);
  box-shadow: inset 0 0 0 1.5px #a8741a;
}
.f-coin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #f5c542 55%, #b9821c);
  box-shadow: inset 0 0 0 2px #a8741a, 0 2px 6px rgba(0, 0, 0, .3);
}

/* 씨앗 가게: seeds for coins from Lv 3; a row that can't buy says why */
.shop-purse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px 0 14px;
  font-size: .9375rem;
  font-weight: 800;
  color: var(--cream);
}
.shop-coins { display: flex; align-items: center; gap: 6px; }
.shop-coins b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.shop-bag { padding: 4px 11px; border-radius: 999px; font-size: .8125rem; color: var(--gold-light); box-shadow: inset 0 0 0 1.5px rgba(241, 214, 140, 0.45); }
.shop-list { display: grid; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.shop-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: 16px;
  background: rgba(8, 11, 19, 0.45);
  box-shadow: inset 0 0 0 1.5px rgba(241, 214, 140, 0.2);
}
.shop-row img { width: 40px; height: 40px; }
.shop-row.is-locked img { opacity: .55; filter: grayscale(.5); }
.shop-name b { display: block; font-size: 1rem; font-weight: 800; color: var(--cream); }
.shop-name small { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.shop-row.is-locked .shop-name small { color: var(--gold-light); }
.shop-row .shop-buy {
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  font-variant-numeric: tabular-nums;
}
.shop-row .shop-buy:disabled { opacity: .4; cursor: default; filter: saturate(.4); }
.shop-drop { position: fixed; z-index: 140; width: 36px; height: 36px; pointer-events: none; transform: translate(-50%, -50%); }

@media (prefers-reduced-motion: reduce) {
  .f-cta.is-ripe, .f-prompt p, .f-seed.is-gold::after, .dock-btn.is-loading .dock-cap { animation: none; }
  .f-hand { animation: none !important; }
  .f-hand span { display: block; }
}

/* Talk: a small mic in the speech line, a slim bar over the dock */
.dialog .talk-mic {
  all: unset;
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: inherit;
  opacity: .9;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dialog .talk-mic[hidden] { display: none; }
.dialog .talk-mic svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dialog .talk-mic:active,
.dialog .talk-mic[aria-expanded="true"] { opacity: 1; }
.dialog .talk-mic:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.dialog .intro.is-thinking .talk-dots {
  display: inline-block;
  letter-spacing: .1em;
  animation: talk-think 1s ease-in-out infinite alternate;
}
@keyframes talk-think {
  from { opacity: .35; }
  to { opacity: 1; }
}
.dialog .talk-src {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 6px;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: .6875rem;
  line-height: 1.5;
  opacity: .78;
}
.dialog .talk-src span { font-weight: 800; }
.dialog .talk-src a {
  max-width: 11em;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog .talk-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}
.dialog .talk-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  border: 1.5px solid #03c75a;
  border-radius: 999px;
  background: #fff;
  color: #1f2328;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.dialog .talk-links span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog .talk-links span:last-child {
  flex: none;
  padding-left: 8px;
  border-left: 1px solid #d0d7de;
  color: #007f39;
}

.talk-bar {
  --tb-bg: rgba(20, 27, 43, 0.94);
  --tb-field: var(--paper);
  --tb-ink: var(--cocoa);
  --tb-hint: var(--cream);
  --tb-ring: rgba(241, 214, 140, 0.45);
  --tb-key: linear-gradient(180deg, var(--gold-light), var(--gold));
  --tb-key-ink: var(--navy);
  --tb-round: 999px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--tb-bg);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(110%);
  transition: transform .22s var(--ease-out);
}
.talk-bar.is-open { transform: none; }
.talk-bar.is-lifted { padding-bottom: 8px; }
.talk-bar .talk-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.talk-bar .talk-input {
  all: unset;
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--tb-round);
  background: var(--tb-field);
  color: var(--tb-ink);
  box-shadow: inset 0 0 0 1.5px var(--tb-ring);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 16px;
  line-height: 40px;
}
.talk-bar .talk-input::placeholder { color: var(--tb-ink); opacity: .5; }
.talk-bar .talk-input:focus-visible { box-shadow: inset 0 0 0 2px var(--tb-ring), 0 0 0 3px rgba(255, 255, 255, 0.12); }
.talk-bar .talk-send {
  all: unset;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--tb-round);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.talk-bar .talk-send { background: var(--tb-key); color: var(--tb-key-ink); }
.talk-bar .talk-send:disabled { opacity: .45; cursor: default; }
.talk-bar .talk-send:focus-visible { outline: 2px solid var(--tb-hint); outline-offset: 1px; }
.talk-bar .talk-send svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dialog .talk-mic.is-listening {
  opacity: 1;
  background: var(--coral);
  color: #fff;
  animation: talk-listen 1s ease-in-out infinite alternate;
}
@keyframes talk-listen {
  from { box-shadow: 0 0 0 0 rgba(232, 128, 107, 0.55); }
  to { box-shadow: 0 0 0 6px rgba(232, 128, 107, 0); }
}
.talk-bar .talk-hint {
  margin: 0 4px 6px;
  color: var(--tb-hint);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.talk-bar .talk-hint.is-tap { text-decoration: underline; cursor: pointer; }
html[data-theme="8bit"] .talk-bar {
  --tb-bg: #1d2b53;
  --tb-field: #fff1e8;
  --tb-ink: #0b0d1a;
  --tb-hint: #fff1e8;
  --tb-ring: #0b0d1a;
  --tb-key: #ffec27;
  --tb-key-ink: #0b0d1a;
  --tb-round: 0;
  font-family: "Galmuri11", monospace;
}
html[data-theme="8bit"] .talk-bar .talk-input,
html[data-theme="8bit"] .talk-bar .talk-hint { font-family: "Galmuri11", monospace; }
html[data-theme="milk"] .talk-bar {
  --tb-bg: rgba(255, 248, 243, 0.96);
  --tb-field: #fff;
  --tb-ink: #7a2e45;
  --tb-hint: #7a2e45;
  --tb-ring: #ff8fab;
  --tb-key: linear-gradient(180deg, #ff9db6, #f2577f);
  --tb-key-ink: #fff;
  box-shadow: 0 -6px 20px rgba(242, 87, 127, 0.2);
}
html[data-theme="najeon"] .talk-bar {
  --tb-bg: rgba(12, 12, 16, 0.96);
  --tb-field: #050507;
  --tb-ink: #ece9f2;
  --tb-hint: #ece9f2;
  --tb-ring: rgba(233, 231, 239, 0.55);
  --tb-key: linear-gradient(180deg, #d0393f, #b8282f 60%, #8e1c22);
  --tb-key-ink: #fff4ec;
  border-top: 1px solid rgba(233, 231, 239, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .talk-bar { transition: none; }
  .dialog .intro.is-thinking .talk-dots,
  .dialog .talk-mic.is-listening { animation: none; }
}

/* 달리기 시합: the race takes the screen on a WebGL stage; HUD, picker, words and the card are DOM over it */
.r-thumb { background: repeating-conic-gradient(rgba(241, 214, 140, .18) 0 25%, transparent 0 50%) 0 0 / 14px 14px, rgba(0, 0, 0, .18); }
.r-thumb::before { content: ""; position: absolute; left: 5px; top: 19px; width: 13px; height: 17px; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .75) 0 2px, transparent 2px 6px); }
.r-thumb .g-thumb-pet { width: 46px; height: 46px; transform: translate(5px, 2px) rotate(12deg); }
.r-game {
  --r-top: max(14px, env(safe-area-inset-top));
  position: fixed; inset: 0; z-index: 1000; max-width: 560px; margin: 0 auto; overflow: hidden; isolation: isolate;
  background: #14183e; color: var(--g-card-ink); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.r-game[hidden], .r-game [hidden] { display: none !important; }
.r-game button { font: inherit; cursor: pointer; touch-action: manipulation; }
.r-game button:disabled { opacity: .5; cursor: default; }
.r-stage, .r-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.r-8bit .r-stage canvas { image-rendering: pixelated; }
.r-top { position: absolute; z-index: 6; top: var(--r-top); left: 18px; right: 12px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.r-cup { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .24em; color: #fff; opacity: .85; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.r-close {
  width: 38px; height: 38px; min-height: 0; padding: 0 0 2px; border: 0; border-radius: 50%; pointer-events: auto;
  background: rgba(16, 18, 40, .38); color: #fff; font-size: 24px !important; line-height: 1; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
.r-hud { position: absolute; z-index: 2; top: calc(var(--r-top) + 50px); left: 20px; right: 20px; pointer-events: none; color: #fff; }
.r-strip { position: relative; height: 6px; margin: 14px 26px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.r-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--g-fill-b), var(--g-fill-a)); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.r-flag { position: absolute; right: -24px; top: -16px; width: 18px; height: 22px; background: linear-gradient(90deg, #fff 2px, transparent 2px), conic-gradient(#1b1d2a 25%, #fff 0 50%, #1b1d2a 0 75%, #fff 0) 2px 0 / 8px 8px no-repeat; background-size: auto, 16px 12px; }
.r-head { position: absolute; top: 50%; left: 0; width: 34px; height: 34px; object-fit: contain; transform: translate(-50%, -62%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); will-change: transform; }
.r-head.is-rival { width: 24px; height: 24px; transform: translate(-50%, -125%); opacity: .9; }
.r-clock { width: max-content; margin: 10px 0 0; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); contain: layout paint; }
.r-clock b { font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.r-clock small { display: inline; margin: 0 0 0 2px; font-size: 14px; font-weight: 800; }
/* A 24-character name ends in an ellipsis: the label before the race clock, the tag before the screen's edge. */
.r-lv { position: absolute; right: 0; top: 34px; max-width: calc(100% - 116px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(16, 18, 40, .4); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.r-tag {
  position: absolute; z-index: 2; max-width: 70%; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 4px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 900; color: var(--g-accent-ink); background: var(--g-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); translate: -50% -100%;
}
.r-tag.is-rival { background: var(--g-card); color: var(--g-card-ink); }
.r-tag.is-flex { background: var(--g-accent); color: var(--g-accent-ink); animation: r-flex .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes r-flex { 0% { scale: .3; } 60% { scale: 1.3; } 100% { scale: 1; } }
.r-edge {
  position: absolute; z-index: 2; left: 8px; margin: 0; padding: 4px 10px; border-radius: 999px; translate: 0 -50%; pointer-events: none;
  font-size: 12px; font-weight: 900; color: var(--g-card-ink); background: var(--g-card); box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.r-edge.is-right { left: auto; right: 8px; }
.r-big {
  position: absolute; z-index: 3; left: 0; right: 0; top: 23%; margin: 0; text-align: center; pointer-events: none; white-space: nowrap;
  font-size: 66px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--g-big); -webkit-text-stroke: 11px var(--g-big-edge); paint-order: stroke fill;
}
.r-big.is-ready { font-size: 48px; }
.r-big.is-go { font-size: 84px; color: var(--g-fill-a); }
.r-big.is-swap, .r-big.is-boost, .r-big.is-spurt { font-size: 46px; font-style: italic; }
.r-big.is-spurt { font-size: 40px; }
.r-hint {
  position: absolute; z-index: 3; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); width: max-content; max-width: 88%; margin: 0; translate: -50% 0;
  padding: 9px 16px; border-radius: 18px; font-size: 14px; font-weight: 800; background: var(--g-label); color: var(--g-label-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); pointer-events: none;
}
.r-photo { position: absolute; z-index: 4; left: 14px; right: 14px; top: 20%; margin: 0; padding: 12px 12px 0; border-radius: 4px; background: #fbf7ef; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); pointer-events: none; }
.r-shot canvas { display: block; width: 100%; height: auto; border-radius: 2px; }
.r-photo figcaption { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 4px 12px; color: #2a2230; }
.r-photo figcaption span { font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.r-photo figcaption b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.r-pick {
  position: absolute; z-index: 4; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-height: calc(100% - 120px); overflow-y: auto; touch-action: pan-y;
  padding: 16px 14px 14px; border-radius: 26px; text-align: center; background: var(--g-card); color: var(--g-card-ink); box-shadow: 0 0 0 3px var(--g-accent), 0 18px 40px rgba(0, 0, 0, .35);
}
.r-eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; opacity: .6; }
.r-pick h2 { margin: 2px 0 12px; font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: inherit; }
.r-roster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.r-roster button { display: grid; justify-items: center; gap: 1px; width: 100%; min-height: 0; margin: 0; padding: 5px 0 4px; border-radius: 12px; background: none; color: inherit; box-shadow: none; }
.r-roster img { height: 36px; }
.r-roster b { font-size: 11px; font-weight: 800; }
.r-roster small { font-size: 9px; font-weight: 700; opacity: .6; white-space: nowrap; }
.r-roster [aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--g-accent); background: rgba(var(--g-aura), .18); }
.r-roster [aria-pressed="true"] small { opacity: 1; color: var(--g-xp); }
.r-versus { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 8px; margin: 0 0 12px; }
.r-versus b { font-size: 16px; font-weight: 900; }
.r-versus span { font-size: 14px; font-weight: 900; color: var(--g-xp); }
.r-versus small { flex-basis: 100%; font-size: 12px; font-weight: 700; opacity: .65; }
.r-bonus { display: block; width: max-content; margin: -4px auto 12px; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 900; color: var(--g-accent-ink); background: var(--g-accent); }
.r-go { width: 100%; min-height: 48px; border: 0; border-radius: 999px; font-size: 17px !important; font-weight: 900; background: var(--g-accent); color: var(--g-accent-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.r-game .r-card { z-index: 5; top: calc(var(--r-top) + 64px); left: 0; right: 0; width: min(280px, calc(100% - 44px)); margin: 0 auto; }
.r-medal { display: grid; place-items: center; padding: 0; font-size: 21px; font-weight: 900; color: var(--g-card-ink); }
.r-medal.is-win { color: var(--g-xp); }
.r-time b { font-variant-numeric: tabular-nums; }
.r-flex { margin-top: 8px !important; font-size: 13px; font-weight: 800; line-height: 1.45; }
.r-card .g-actions + .g-actions { margin-top: 8px; }
.r-card .r-more button { font-size: 13px; }
.r-hint svg { width: 22px; height: 30px; margin: -4px 8px -10px 0; vertical-align: middle; }
.r-hint .h-phone { fill: #2a3146; stroke: #fff; stroke-width: 2; }
.r-hint .h-cam { fill: #8a92a8; }
.r-hint .h-spot { fill: rgba(var(--g-aura), .9); }
.r-classic .r-photo { padding: 16px 10px 0; border-radius: 3px; background: #1b1a1f; color: #f1d68c; box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, .5); }
.r-classic .r-photo::before, .r-classic .r-photo::after { content: ""; position: absolute; left: 6px; right: 6px; height: 7px; background: repeating-linear-gradient(90deg, #f6ecd8 0 7px, transparent 7px 15px); border-radius: 2px; }
.r-classic .r-photo::before { top: 4px; }
.r-classic .r-photo::after { bottom: 8px; }
.r-classic .r-photo figcaption { color: #f1d68c; padding-bottom: 22px; }
.r-classic .r-shot canvas { filter: sepia(.25) contrast(1.06); }
.r-8bit, .r-8bit button { font-family: "Galmuri11", monospace; }
.r-8bit .r-close, .r-8bit .r-lv, .r-8bit .r-tag, .r-8bit .r-edge, .r-8bit .r-hint, .r-8bit .r-pick, .r-8bit .r-go, .r-8bit .r-roster button { border-radius: 0; }
.r-8bit .r-close { background: #1d2b53; box-shadow: 0 0 0 3px #fff1e8, 4px 4px 0 3px rgba(0, 0, 0, .35); }
.r-8bit .r-strip { height: 8px; border-radius: 0; background: #1d2b53; box-shadow: 0 0 0 2px #fff1e8; }
.r-8bit .r-fill { border-radius: 0; background: #ffec27; }
.r-8bit .r-clock, .r-8bit .r-lv, .r-8bit .r-cup { text-shadow: 3px 3px 0 #1d2b53; }
.r-8bit .r-lv { background: #1d2b53; box-shadow: 0 0 0 2px #fff1e8; }
.r-8bit .r-big { -webkit-text-stroke: 0; color: #ffec27; text-shadow: 5px 5px 0 #1d2b53, -3px -3px 0 #1d2b53, 3px -3px 0 #1d2b53, -3px 3px 0 #1d2b53; font-weight: 700; }
.r-8bit .r-big.is-go { color: #ff004d; }
.r-8bit .r-pick { box-shadow: 0 0 0 4px #ffec27, 6px 6px 0 4px rgba(0, 0, 0, .45); }
.r-8bit .r-roster [aria-pressed="true"] { box-shadow: inset 0 0 0 3px #ffec27; }
.r-8bit .r-go { box-shadow: 4px 4px 0 #ab5236; }
.r-8bit .r-tag, .r-8bit .r-edge { box-shadow: 3px 3px 0 rgba(0, 0, 0, .4); }
.r-8bit .r-photo { padding: 10px 10px 0; border-radius: 0; background: #1d2b53; box-shadow: 0 0 0 4px #fff1e8, 0 0 0 8px #1d2b53, 8px 8px 0 8px rgba(0, 0, 0, .4); }
.r-8bit .r-photo figcaption { color: #ffec27; }
.r-8bit .r-shot canvas { image-rendering: pixelated; }
.r-milk .r-big { font-family: "Cafe24Ssurround", "Pretendard Variable", sans-serif; font-weight: 400; -webkit-text-stroke: 10px #ff6f9a; text-shadow: 0 6px 0 #e0577c; }
.r-milk .r-hud { color: #7a2e45; }
.r-milk .r-clock { text-shadow: 0 0 6px #fff, 0 0 2px #fff; }
.r-milk .r-cup { color: #e0577c; text-shadow: 0 0 4px #fff; }
.r-milk .r-lv { background: #fff; color: #e0577c; box-shadow: 0 0 0 2px #ffb3c7; }
.r-milk .r-strip { background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 2px #ffb3c7; }
.r-milk .r-close { background: #fff; color: #ff6f9a; box-shadow: 0 0 0 2px #ffb3c7; }
.r-milk .r-photo { padding: 12px 12px 4px; border-radius: 6px; background: linear-gradient(180deg, #ffe6ee, #ffd3df); transform-origin: 50% 0; box-shadow: 0 18px 40px rgba(122, 46, 69, .35); }
.r-milk .r-photo::before { content: ""; position: absolute; top: -10px; left: 50%; width: 80px; height: 22px; margin-left: -40px; background: rgba(255, 255, 255, .7); transform: rotate(-4deg); }
.r-milk .r-photo figcaption { padding: 14px 6px 18px; color: #e0577c; font-family: "Cafe24Ssurround", sans-serif; }
.r-najeon .r-big, .r-najeon .r-pick h2, .r-najeon .g-place { font-family: "Gowun Batang", "Noto Serif KR", serif; }
.r-najeon .r-big { -webkit-text-stroke: 7px #1b1924; color: #f4f2f8; text-shadow: 0 0 18px rgba(214, 239, 236, .65); }
.r-najeon .r-big.is-go { color: #ffd9d9; }
.r-najeon .r-pick { border-radius: 4px; box-shadow: 0 0 0 1.5px #8d9bbd, 0 0 0 5px #0c0c10, 0 0 0 6.5px #c9d8f5, 0 18px 40px rgba(0, 0, 0, .5); }
.r-najeon .r-go { border-radius: 4px; background: linear-gradient(135deg, #f4f7ff, #dff6ff 50%, #f6e8ff); color: #121118; }
.r-najeon .r-photo { padding: 14px 14px 0; border-radius: 2px; background: linear-gradient(180deg, #17151d, #0c0c10); box-shadow: inset 0 0 0 1.5px #c9d8f5, inset 0 0 0 5px #0c0c10, inset 0 0 0 6px #e6dff0, 0 18px 50px rgba(0, 0, 0, .6); }
.r-najeon .r-photo figcaption { color: #ece9f2; font-family: "Gowun Batang", serif; }
.r-still .r-big, .r-still .r-photo { transform: none !important; }
@media (max-height: 720px) {
  .r-hud { top: calc(var(--r-top) + 44px); }
  .r-big { font-size: 56px; }
  .r-pick { padding: 12px 12px 12px; }
  .r-pick h2 { margin-bottom: 8px; font-size: 21px; }
  .r-roster { gap: 4px; margin-bottom: 8px; }
  .r-roster img { height: 30px; }
  .r-game .r-card { top: calc(var(--r-top) + 52px); }
}

/* 우리 동네: the race picker's other pane, rival cards as the plushie showroom, 우리 동네 소식 and its row in 설정 */
/* The tabs share the title's row, so the sheet is no taller than without them and the pair keeps its place above it. */
.r-title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0 10px; }
.r-places { display: flex; gap: 2px; margin: 0; padding: 2px; border-radius: 999px; background: rgba(var(--g-aura), .2); }
.r-places button { flex: none; width: auto; min-height: 28px; margin: 0; padding: 0 10px; border: 0; border-radius: 999px; font-size: 14px !important; font-weight: 800; background: none; color: inherit; box-shadow: none; opacity: .7; }
.r-places [aria-selected="true"] { background: var(--g-accent); color: var(--g-accent-ink); opacity: 1; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.r-town { min-height: 132px; }
.c-wait { margin: 50px 0 0; font-size: 13px; font-weight: 700; opacity: .6; }
.c-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; }
.c-head button { width: auto; min-height: 0; margin: 0; padding: 0 4px; border-radius: 8px; font-size: 15px !important; font-weight: 900; background: none; color: inherit; box-shadow: none; }
.c-head small { display: inline; margin: 0 0 0 2px; font-size: 10px; opacity: .7; }
.c-head span { opacity: .7; }
.c-pips { display: inline-flex; gap: 4px; }
.c-pip { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d6, var(--g-accent) 70%); box-shadow: 0 0 5px rgba(var(--g-aura), .7); }
.c-pip.is-used { opacity: .28; box-shadow: none; filter: grayscale(1); }
/* One row that scrolls sideways, so the sheet keeps its height however many pets the city has. */
.c-row { display: flex; gap: 8px; margin: 0 -14px 6px; padding: 9px 14px 5px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x; }
.c-row::-webkit-scrollbar { display: none; }
/* Each card is a corner of the owner's home: its navy, the frame and the name in the edition's material, so a tier reads as it does on this pet's own page. */
.c-card {
  --c-thumb: var(--thumb-classic);
  position: relative; display: grid; justify-items: center; gap: 2px; flex: none; width: 94px; min-height: 0; margin: 0; padding: 7px 5px 6px;
  border-radius: 16px; background: var(--navy2); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(var(--g-aura), .55); text-align: center; scroll-snap-align: start;
}
.c-card:active { transform: none; box-shadow: inset 0 0 0 1.5px rgba(var(--g-aura), .55); }
.c-card[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--g-accent), 0 6px 14px rgba(0, 0, 0, .25); }
.c-card .look-frame { width: 80px; height: 58px; }
/* The window shows the pet's portrait in this world, over the sky it would stand in. */
.c-card.look-card .look-frame::after { background: var(--c-thumb) center 74% / 128% auto no-repeat, linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 74%); }
.c-card .look-name { max-width: 84px; margin-top: 4px; font-size: 13px; }
.c-meta { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.c-tag { position: absolute; top: -8px; right: -3px; z-index: 1; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-style: normal; font-weight: 900; background: var(--g-accent); color: var(--g-accent-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
html[data-theme="8bit"] .c-card { --c-thumb: var(--thumb-8bit); }
html[data-theme="milk"] .c-card { --c-thumb: var(--thumb-milk); }
html[data-theme="najeon"] .c-card { --c-thumb: var(--thumb-najeon); }
html[data-theme="8bit"] .c-card .look-frame::after { image-rendering: pixelated; }
.c-say { position: relative; margin: 12px 0 8px; padding: 12px 12px 9px; border-radius: 16px; font-size: 13px; font-weight: 700; line-height: 1.5; text-align: left; background: rgba(var(--g-aura), .16); box-shadow: inset 0 0 0 1.5px rgba(var(--g-aura), .4); }
.c-say b { position: absolute; top: -10px; left: 10px; max-width: 70%; overflow: hidden; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; text-overflow: ellipsis; background: var(--g-accent); color: var(--g-accent-ink); }
.c-city { width: 100%; min-height: 40px; margin: 0 0 8px; padding: 0 12px; border: 1.5px solid rgba(var(--g-aura), .4); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 800; background: var(--g-card); color: inherit; }
.c-edit { margin-top: 8px; }
.c-action { width: 100%; min-height: 36px; margin: 0; padding: 4px 10px; border-radius: 10px; font-size: 13px !important; font-weight: 800; background: rgba(var(--g-aura), .16); color: inherit; box-shadow: inset 0 0 0 1px rgba(var(--g-aura), .35); }
.c-leave { margin: 8px 0 4px; font-size: 11px; line-height: 1.45; opacity: .7; }
html[data-theme="8bit"] .c-city, html[data-theme="8bit"] .c-action, .r-8bit .c-head button { border-radius: 0; }
.c-fine { margin: 0 0 4px; font-size: 11px; font-weight: 600; line-height: 1.45; opacity: .66; }
/* This week's top three on one line. */
.c-best { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.c-week { flex: none; font-size: 10.5px; font-weight: 900; color: var(--g-xp); }
.c-best ol { display: flex; flex: 1; gap: 5px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.c-best li { display: flex; align-items: baseline; justify-content: center; gap: 3px; flex: 1; min-width: 0; padding: 4px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: rgba(var(--g-aura), .16); }
.c-best i { font-style: normal; font-weight: 900; color: var(--g-xp); }
.c-best li b { min-width: 0; overflow: hidden; font-weight: 900; text-overflow: ellipsis; }
.c-best span { flex: none; opacity: .7; }
.c-best .is-me { box-shadow: inset 0 0 0 1.5px var(--g-accent); }
.c-best .is-none { opacity: .7; }
/* A city race's countdown holds up the rival's card like a challenge. */
.r-foe { position: absolute; z-index: 3; right: 16px; bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.r-vs { margin: 0; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 900; color: var(--g-accent-ink); background: var(--g-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.r-foe .c-card { box-shadow: 0 0 0 3px var(--g-accent), 0 14px 30px rgba(0, 0, 0, .35); transform: rotate(4deg); }
.r-8bit .r-places, .r-8bit .r-places button, .r-8bit .r-vs { border-radius: 0; }
.r-8bit .r-vs { box-shadow: 2px 2px 0 rgba(0, 0, 0, .45); }
.r-8bit .r-foe .c-card { box-shadow: 0 0 0 4px #ffec27, 6px 6px 0 4px rgba(0, 0, 0, .45); transform: none; }
.r-milk .r-places { background: #fff0f4; }
.r-milk .r-vs { font-family: "Cafe24Ssurround", sans-serif; font-weight: 400; }
.r-milk .r-foe .c-card { transform: rotate(-4deg); }
.r-najeon .r-places { border-radius: 4px; }
.r-najeon .r-places button { border-radius: 2px; }
/* 우리 동네 소식 on the home's sheet: the cards take the sheet's gold, 복수전 its key. */
.news { color: var(--cream); }
.news .c-say { margin-top: 18px; font-size: .9375rem; }
.news-row { margin: 4px -20px 6px; padding: 12px 20px 8px; justify-content: safe center; }
.news-acts, .town-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.news-acts .copy, .town-acts .copy { flex: 1 1 0; min-width: max-content; justify-content: center; }
.record-town, .record-pc { margin-top: 14px; }
.record-town .record-list div, .record-pc .record-list div { padding-bottom: 4px; }
.record-town .town-acts, .record-pc .town-acts { margin-top: 8px; }
.town-pick { display: flex; gap: 8px; margin-top: 8px; }
.town-pick .c-city { flex: 1; min-width: 0; margin: 0; background: var(--navy2); color: var(--cream); }
.town-pick .copy { flex: none; width: auto; margin: 0; }
.town-line { margin: 8px 0; font-size: .8125rem; font-weight: 700; line-height: 1.5; color: var(--cream); }
.town-ask { margin-top: 10px; }
.town-ask > p { margin: 0; font-size: .8125rem; font-weight: 700; line-height: 1.5; color: var(--cream); }
.town-fail { margin: 8px 0 0; font-size: .8125rem; font-weight: 700; color: var(--coral); }
/* 설정's PC에서 만나기: no PC yet reads quiet, and the two steps take the sheet's small text, the address whole in its pill */
.record-pc .record-list dd.is-off { color: var(--muted); }
.pc-how { margin: 0; padding: 0; list-style-position: inside; font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.pc-how li + li { margin-top: 8px; }
.pc-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.pc-url {
  padding: 7px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 22%, transparent);
  color: var(--cream);
  font-weight: 600;
  white-space: nowrap;
  user-select: all;
}
/* 복사 takes the rest of its line, so 복사했어요 fits without the row moving. */
.pc-addr .copy { flex: 1 0 auto; justify-content: center; }

/* Guide: the coach's soft scrim with one spotlight, a ring hugging the target and a finger pointing at it */
:root {
  --coach-dim: rgba(8, 11, 19, 0.62);
  --coach-ring: #f1d68c;
  --coach-ring-2: rgba(214, 165, 70, 0.5);
  --coach-glow: rgba(241, 214, 140, 0.45);
  --coach-hand: #fffaf0;
  --coach-ink: #4a2c20;
  --coach-skip: rgba(20, 27, 43, 0.9);
  --coach-skip-ink: #f8f0e3;
  --coach-skip-line: rgba(241, 214, 140, 0.55);
}
.coach-hole,
.coach-ring,
.coach-finger,
.coach-skip {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease-in, visibility 0s linear .25s;
}
html.has-coach :is(.coach-hole, .coach-ring, .coach-finger, .coach-skip) {
  visibility: visible;
  opacity: 1;
  transition: opacity .25s ease-in;
}
.coach-hole,
.coach-ring {
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: var(--coach-r, 999px);
}
.coach-hole {
  z-index: 130;
  box-shadow: 0 0 0 200vmax var(--coach-dim);
}
.coach-ring {
  z-index: 133;
  border: 3px solid var(--coach-ring);
  box-shadow: 0 0 0 3px var(--coach-ring-2), 0 0 22px 3px var(--coach-glow), inset 0 0 14px var(--coach-glow);
}
html.has-coach .coach-ring { animation: coach-ring-in .55s cubic-bezier(.3, 1.45, .5, 1) both, coach-breathe 1.8s ease-in-out .55s infinite; }
html.has-coach .coach-ring.is-pulse { animation: coach-pulse .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes coach-ring-in {
  from { opacity: 0; transform: scale(1.25); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes coach-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes coach-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.13); }
  100% { transform: scale(1); }
}
.coach-finger {
  left: 0;
  top: 0;
  z-index: 133;
  width: 0;
  height: 0;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
}
.coach-hand {
  --tip-x: 21px;
  --tip-y: 3px;
  position: absolute;
  left: calc(-1 * var(--tip-x));
  top: calc(-1 * var(--tip-y));
  width: 52px;
  height: 57px;
  transform: rotate(-24deg);
  transform-origin: var(--tip-x) var(--tip-y);
}
.coach-finger.is-down .coach-hand { transform: rotate(204deg); }
.coach-hand svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: coach-tap 1.15s cubic-bezier(.45, 0, .3, 1) infinite;
}
.coach-hand path {
  fill: var(--coach-hand);
  stroke: var(--coach-ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes coach-tap {
  0%, 100% { transform: translateY(14px); }
  42% { transform: translateY(0); }
  56% { transform: translateY(2px) scaleY(.97); }
}
.coach-skip {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, calc(50vw - 208px));
  z-index: 134;
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--coach-skip);
  color: var(--coach-skip-ink);
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--coach-skip-line), 0 4px 12px rgba(0, 0, 0, 0.35);
}
/* The pet's line reads above the scrim; the dock's own want ring rests while the coach points. */
html.has-coach .topbar :is(.theme-btn, .gear-btn, .level-pin) { visibility: hidden; opacity: 0; pointer-events: none; }
html.has-coach body:not(.has-sheet) .dialog { z-index: 131; }
html.has-coach .dock-btn.is-want .dock-cap::after { animation: none; opacity: 0; }
/* A soft wait: only a quiet ring on the growing plot and its time left; nothing is dimmed or blocked. */
html.coach-soft :is(.coach-hole, .coach-finger) { visibility: hidden; opacity: 0; }
html.has-coach.coach-soft .coach-ring { opacity: .85; animation: coach-soft 2.4s ease-in-out infinite; }
@keyframes coach-soft {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
.coach-tag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 133;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--coach-skip);
  color: var(--coach-skip-ink);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--coach-skip-line), 0 3px 8px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -100%);
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease-in, visibility 0s linear .25s;
}
html.has-coach.coach-soft .coach-tag:not(:empty) { visibility: visible; opacity: 1; transition: opacity .25s ease-in; }
@media (prefers-reduced-motion: reduce) {
  html.has-coach .coach-ring,
  .coach-hand svg { animation: none; }
  .coach-hand svg { transform: translateY(5px); }
  html.has-coach .coach-ring.is-pulse { animation: coach-flash .4s linear; }
  html.has-coach.coach-soft .coach-ring { animation: none; }
}
@keyframes coach-flash {
  50% { opacity: .35; }
}

/* PC: the pet lives on the phone or its PC, and the side it is not on shows its empty spot. A swirl marks where it leaves and lands,
   the whirlwind draws in --whirl colors on a canvas over the page and one behind the pet, and the phone has PC로 보내기 or 데려오기. */
:root {
  --whirl-1: #ffc94d;
  --whirl-2: #ff8fb8;
  --whirl-3: #fff3d4;
}
body:not([data-screen])[data-pc-place="pc"] .window .pet,
body[data-screen][data-pc-place="home"] .window .pet,
body[data-pc-arrive] .window .pet { visibility: hidden; }
body:not([data-screen])[data-pc-place="pc"] .want,
body[data-screen][data-pc-place="home"] .want,
body[data-pc-ready] .want { display: none; }
/* A pet that can be thrown keeps the whole drag: the page never pans, pulls or zooms under it. */
body:not([data-screen])[data-pc-place="home"] .window .pet-hit { touch-action: none; }
.pc-say { width: max-content; white-space: normal; text-align: center; text-wrap: balance; }
/* The cue and the chip step aside while the finger holds the pet. */
.window :is(.pc-say, .pc-chip, .pc-later).is-held { opacity: 0; transition: opacity .2s ease; }
/* The pairing tap's ready page opens as a clean send screen: the logo, the name and the window as a big card in the middle,
   with the cue and PC로 보내기 in it and 나중에 보낼게요 under it. */
body[data-pc-clean] :is(.topbar-end, .time-line, .count, .pet-stats, .dialog, .dock, footer) { display: none; }
body[data-pc-clean] main {
  height: 100vh;
  height: 100dvh;
  justify-content: center;
}
body[data-pc-clean] .wordmark { justify-self: center; }
body[data-pc-clean] .window {
  flex: 0 1 auto;
  aspect-ratio: 10 / 13;
  margin-bottom: 60px;
}
.window .pc-later {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  z-index: 4;
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: .3em;
  box-shadow: none;
  transform: translateX(-50%);
}
.pc-say.is-ready svg {
  width: 1.15em;
  height: 1.15em;
  margin: -.2em .3em -.15em 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: pc-cue 1.2s ease-in-out infinite;
}
@keyframes pc-cue {
  0%, 100% { transform: translateY(2px); opacity: .55; }
  50% { transform: translateY(-3px); opacity: 1; }
}
.pc-swirl {
  --pull: 0;
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 1;
  width: min(62cqw, 66cqh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--whirl-3) 70%, transparent), transparent);
  opacity: calc(.62 + var(--pull) * .38);
  transform: translate(-50%, 50%) scale(calc(1 + var(--pull) * .25), calc(.3 + var(--pull) * .075));
  pointer-events: none;
}
/* Under a pet at home the swirl is a small one at its feet, clear of PC로 보내기. */
body:not([data-screen])[data-pc-ready]:not([data-pc-move="in"]) .pc-swirl,
body[data-pc-clean] .pc-swirl { width: min(24cqw, 26cqh); }
/* The scanned phone draws no animal: the pet's spot holds a keyhole in the frame keyhole's colors, since the plushie tapped next is the key. */
.pc-key {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(68cqw, 72cqh);
  height: min(68cqw, 72cqh);
  margin: 0 auto;
}
.pc-key svg {
  width: 46%;
  height: 46%;
  border-radius: 50%;
  fill: var(--navy);
  background: radial-gradient(circle at 38% 30%, var(--gold-light), var(--gold) 58%, var(--gold-deep));
  box-shadow: 0 0 0 3px var(--navy2), 0 12px 24px -8px rgba(0, 0, 0, 0.45), 0 0 48px var(--glow);
}
.pc-swirl svg { display: block; width: 100%; height: 100%; animation: pc-swirl 5s linear infinite; }
.pc-swirl .pc-arm { fill: none; stroke: var(--whirl-1); stroke-width: 3.4; stroke-linecap: round; }
.pc-swirl .pc-arm.is-thin { stroke: var(--whirl-2); stroke-width: 1.8; }
@keyframes pc-swirl {
  to { transform: rotate(-1turn); }
}
.whirl-top { position: fixed; inset: 0; z-index: 250; width: 100%; height: 100%; pointer-events: none; }
.whirl-under { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.pc-chip,
.pc-back {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  margin: 0;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.pc-chip svg,
.pc-back svg { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.window .pc-chip {
  right: 14px;
  bottom: 14px;
  min-height: 30px;
  padding: 0 11px 0 8px;
  background: rgba(255, 249, 240, 0.94);
  color: var(--cocoa);
  font-size: .75rem;
  box-shadow: 0 0 0 1.5px var(--gold), 0 4px 10px rgba(20, 27, 43, 0.22);
}
.pc-back {
  left: 50%;
  bottom: calc(10% + min(68cqw, 72cqh) * .3);
  min-height: 48px;
  padding: 0 20px 0 15px;
  font-size: 1rem;
  transform: translateX(-50%);
}
.pc-back.is-nudge { animation: pc-nudge .5s ease; }
.pc-back > span { display: inline-grid; }
.pc-back > span > span { grid-area: 1 / 1; }
body[data-pc-clean] .pc-back {
  left: auto;
  right: 14px;
  bottom: 14px;
  min-height: 30px;
  padding: 0 11px 0 8px;
  background: rgba(255, 249, 240, 0.94);
  color: var(--cocoa);
  font-size: .75rem;
  box-shadow: 0 0 0 1.5px var(--gold), 0 4px 10px rgba(20, 27, 43, 0.22);
  transform: none;
}
@keyframes pc-nudge {
  20% { transform: translateX(-50%) rotate(-6deg) scale(1.06); }
  45% { transform: translateX(-50%) rotate(5deg) scale(1.06); }
  70% { transform: translateX(-50%) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-swirl svg,
  .pc-say.is-ready svg,
  .pc-back.is-nudge { animation: none; }
}

/* PC: the QR page, its window frame around the code and the two steps; a phone sees only where to open it */
main.pc-main {
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 560px;
  text-align: center;
}
.pc-title {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
}
.pc-qr {
  width: min(320px, 72vw);
  aspect-ratio: 1;
  margin: 14px 0 10px;
  padding: 10px;
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 0 0 3px var(--gold-light),
    0 0 0 8px var(--navy2),
    0 0 0 9px rgba(241, 214, 140, 0.12),
    0 22px 40px -10px rgba(0, 0, 0, 0.6),
    0 0 90px -12px var(--glow);
}
.pc-qr svg { display: block; width: 100%; height: 100%; }
.pc-fail { font-size: .9375rem; font-weight: 700; color: var(--coral); }
.pc-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(320px, 72vw);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pc-step;
  text-align: left;
}
.pc-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cream);
  counter-increment: pc-step;
}
.pc-steps li::before {
  content: counter(pc-step);
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: var(--navy);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--gold-deep);
}
.pc-phone { display: none; font-size: .9375rem; font-weight: 600; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.pc-phone b { display: block; margin-bottom: 6px; font-size: 1.25rem; font-weight: 800; color: var(--gold-light); }
.is-phone .pc-phone { display: block; }
.is-phone :is(.pc-qr, .pc-steps) { display: none; }