@font-face {
  font-family: "Oing Jua";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Jua-Korean-Game.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard OING";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Pretendard-OING.woff2") format("woff2");
}

@font-face {
  font-family: "Oing Jua";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Jua-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --sky: #8edcf1;
  --sky-deep: #5ebfdc;
  --cream: #fff8e9;
  --coral: #ff7188;
  --coral-deep: #e94e72;
  --mint: #91dfd0;
  --mint-deep: #36aa98;
  --ink: #35445f;
  --muted: #7d8293;
  --gold: #f3b94f;
  --ui-line: rgba(211, 181, 132, 0.52);
  --ui-surface: rgba(255, 253, 246, 0.92);
  --ui-surface-soft: rgba(255, 251, 240, 0.82);
  --ui-shadow-soft: 0 7px 16px rgba(69, 94, 98, 0.08);
  --ui-shadow-raised: 0 3px 0 rgba(157, 120, 71, 0.1), 0 7px 14px rgba(69, 94, 98, 0.09);
  --ui-radius-panel: 18px;
  --ui-radius-control: 15px;
  --font-sans: "Pretendard OING", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-display: "Oing Jua", "Pretendard OING", sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--font-sans);
}

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

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #c8eef4;
  color: var(--ink);
}

body {
  display: grid;
  place-items: center;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

button:focus-visible {
  outline: 3px solid rgba(53, 68, 95, 0.42);
  outline-offset: 2px;
}

img {
  image-rendering: auto;
}

[hidden] {
  display: none !important;
}

.app-shell {
  position: relative;
  width: min(100vw, 430px);
  height: 100dvh;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
  box-shadow: 0 0 38px rgba(58, 109, 139, 0.18);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.screen.is-active {
  display: flex;
  /* No fill mode. The keyframes end on opacity: 1 / transform: none, which is
     the element's own resting state, so `both` preserved nothing - but it did
     keep a finished transform+opacity animation attached to the element, and
     Chromium holds a full-viewport compositor layer for as long as one is
     there. The play screen stayed promoted for the entire session: a ~10
     megapixel texture recomposited forever, which costs GPU and battery while
     the main thread reads as idle. Without the fill the layer is released
     220ms in. There is no delay, so `backwards` had nothing to do either. */
  animation: screen-in 220ms ease;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.character-stage {
  position: relative;
  display: grid;
  place-items: end center;
  flex: 0 0 auto;
  overflow: visible;
}

.character-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.asset-icon-button {
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
  transition: transform 100ms ease;
}

.asset-icon-button:active {
  transform: translateY(2px) scale(0.97);
}

.asset-icon-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.button-icon {
  width: 27px;
  height: 27px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Home */
.screen-home {
  flex-direction: column;
  align-items: center;
  padding: calc(12px + var(--safe-top)) 18px calc(14px + var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,0.18), transparent 35%),
    linear-gradient(rgba(255,255,255,0.04), rgba(255,250,234,0.09)),
    url("../assets/backgrounds/home-bg@2x.webp") center / cover no-repeat;
}

.home-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  justify-items: center;
}

.home-decor img {
  position: absolute;
  z-index: 0;
  object-fit: contain;
  pointer-events: none;
  animation: decor-drift 3.4s ease-in-out infinite;
}

.home-decor-star {
  width: 24px;
  height: 24px;
  top: 14%;
  right: 13%;
}

.home-decor-heart {
  width: 22px;
  height: 22px;
  top: 31%;
  left: 11%;
  animation-delay: -1.1s !important;
}

.home-decor-sparkle {
  width: 18px;
  height: 18px;
  top: 42%;
  right: 14%;
  animation-delay: -2.2s !important;
}

.home-decor-flower {
  width: 30px;
  height: 32px;
  top: 51%;
  opacity: 0.78;
  animation-duration: 4.2s !important;
}

.home-decor-flower-left { left: 8%; transform: rotate(-8deg); }
.home-decor-flower-right { right: 8%; transform: rotate(8deg); animation-delay: -1.7s !important; }

@keyframes decor-drift {
  50% { transform: translateY(-3px) rotate(4deg); opacity: 0.72; }
}

.home-settings {
  position: absolute;
  z-index: 4;
  left: 18px;
  top: auto;
  bottom: calc(12px + var(--safe-bottom));
  width: 54px;
  min-height: 64px;
  grid-template-rows: 45px 16px;
  color: #756354;
  font-family: var(--font-display);
  font-size: 13px;
  filter: drop-shadow(0 3px 3px rgba(97,74,52,0.12));
}

.home-settings img { width: 45px; height: 45px; }
.home-settings span { line-height: 1; }

.home-brand {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(86px, 10.8vh, 102px);
  margin-top: 0;
}

.oing-logo {
  width: clamp(196px, 56vw, 232px);
  height: auto;
}

.home-character-stage {
  z-index: 1;
  flex: 0 0 auto;
  width: clamp(236px, 68vw, 278px);
  height: clamp(252px, 33vh, 292px);
  margin: -3px auto 0;
}

.home-character-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 2px;
  width: 118%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,244,172,0.72) 0 42%, rgba(186,237,200,0.42) 62%, transparent 73%);
  filter: blur(1px);
  transform: translateX(-50%);
}

.home-cat {
  animation: home-cat-idle 3.6s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes home-cat-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-2px) rotate(-0.5deg); }
  52% { transform: translateY(-3px) rotate(0.7deg); }
}

.home-tagline {
  position: relative;
  z-index: 2;
  margin: -5px 0 7px;
  padding: 8px 22px;
  border: 1px solid rgba(230,188,115,0.42);
  border-radius: 999px;
  background: rgba(255,250,235,0.92);
  box-shadow: 0 4px 10px rgba(108,89,61,0.08), inset 0 1px 0 white;
  color: #6d5545;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.home-tagline strong { color: var(--coral-deep); }

.home-instruction {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 22px;
  margin: 0;
  color: #705f55;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-align: center;
}

.home-instruction img { width: 15px; height: 15px; object-fit: contain; }

.home-howto {
  position: relative;
  z-index: 2;
  width: min(100%, 322px);
  display: grid;
  justify-items: center;
  gap: 3px;
  margin-bottom: 9px;
  padding: 7px 14px 8px;
  border: 1.5px solid rgba(231, 203, 153, 0.52);
  border-radius: 20px;
  background: rgba(255, 251, 239, 0.88);
  box-shadow: 0 4px 0 rgba(190,145,78,0.08), 0 9px 18px rgba(89,91,73,0.07), inset 0 1.5px 0 white;
}

.home-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #786253;
  font-family: var(--font-display);
}

.home-equation b {
  font: inherit;
  font-size: 18px;
  font-weight: 400;
}

.home-mini-tile {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background-position: center;
  background-size: 100% 100%;
  color: #6d5baa;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(105,85,71,0.13));
}

.home-mini-mint { background-image: url("../assets/ui/tiles-syrup-v4/tile-mint.webp"); color: #399366; }
.home-mini-peach { background-image: url("../assets/ui/tiles-syrup-v4/tile-peach.webp"); color: #dc8126; }

.home-equation strong {
  min-width: 42px;
  padding: 4px 9px 3px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff91a7, #ff6685);
  box-shadow: 0 3px 0 #d94e6b, inset 0 1px 0 rgba(255,255,255,0.7);
  color: white;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(177,53,82,0.24);
}

.home-equation i {
  color: #e85a78;
  font-size: 14px;
  font-style: normal;
}

.home-actions {
  position: relative;
  z-index: 2;
  width: min(100%, 352px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 24px;
  background: rgba(255, 250, 237, 0.57);
  box-shadow: 0 9px 21px rgba(77,103,104,0.07), inset 0 1.5px 0 rgba(255,255,255,0.8);
}

.start-button-sparkle {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(1.08) drop-shadow(0 1px 1px rgba(170,63,89,0.18));
}

.start-button-sparkle:last-child { width: 18px; height: 18px; }

.btn {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid rgba(121, 104, 81, 0.12);
  border-radius: 17px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.025em;
  box-shadow: 0 4px 0 rgba(72,83,106,0.12), 0 8px 16px rgba(63,83,112,0.09), inset 0 2px 0 rgba(255,255,255,0.67);
  transition: transform 100ms ease, box-shadow 100ms ease, filter 100ms ease;
}

.btn:active {
  transform: translateY(3px) scale(0.99);
  box-shadow: 0 1px 0 rgba(72,83,106,0.14), 0 4px 8px rgba(63,83,112,0.08), inset 0 2px 0 rgba(255,255,255,0.46);
}

.btn-primary {
  min-height: 56px;
  border-color: #f45c7a;
  background: linear-gradient(#ff91a5, #ff6684 58%, #f75878);
  color: white;
  font-size: 18px;
  text-shadow: 0 2px 0 rgba(187,60,88,0.25);
  box-shadow: 0 5px 0 #d94d69, 0 9px 17px rgba(224,74,104,0.2), inset 0 2px 0 rgba(255,255,255,0.62);
}

.btn-cream {
  border-color: #ead6aa;
  background: linear-gradient(#fffdf7, #fff1d4);
  color: #715949;
}

.btn-mint {
  border-color: #8bd8c6;
  background: linear-gradient(#e6fff8, #b8eddf);
  color: #38766e;
}

.btn-start {
  grid-column: 1 / -1;
}

.home-ranking-button {
  min-height: 49px;
}

.home-actions.has-online-leaderboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-leaderboard-button {
  min-width: 0;
  min-height: 49px;
  border-color: rgba(235, 164, 164, 0.62);
  background: linear-gradient(180deg, #fffdf8 0%, #fff1e5 100%);
  color: #755349;
}

.home-leaderboard-button .button-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.home-actions.has-online-leaderboard .home-ranking-button,
.home-actions.has-online-leaderboard .home-leaderboard-button {
  gap: 3px;
  padding-inline: 5px;
  font-size: 15px;
  white-space: nowrap;
}

.home-actions.has-online-leaderboard .best-record-card {
  grid-template-columns: 23px minmax(0, 1fr);
  column-gap: 4px;
  padding-inline: 6px;
}

.home-actions.has-online-leaderboard .best-record-card img {
  width: 23px;
  height: 23px;
}

.home-actions.has-online-leaderboard .best-record-card span em,
.home-actions.has-online-leaderboard .best-record-card strong::after {
  font-size: 9px;
}

.home-actions.has-online-leaderboard .best-record-card strong {
  font-size: clamp(14px, 4vw, 18px);
}

.best-record-card {
  min-width: 0;
  min-height: 49px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border: 1.5px solid rgba(102,185,167,0.45);
  border-radius: 16px;
  background: rgba(223,251,243,0.86);
  box-shadow: 0 4px 10px rgba(63,126,113,0.08), inset 0 1px 0 white;
  color: #47776f;
}

.best-record-card img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.best-record-card span {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.best-record-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--coral-deep);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

/* Play HUD */
.screen-play {
  --board-edge: min(calc(100vw - 32px), 398px, calc(100dvh - 226px));
  display: none;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  row-gap: 8px;
  padding: calc(8px + var(--safe-top)) 16px calc(6px + var(--safe-bottom));
  background:
    linear-gradient(180deg, rgba(231,248,251,0.46) 0%, rgba(255,253,246,0.84) 27%, rgba(255,252,243,0.93) 68%, rgba(255,249,234,0.8) 100%),
    url("../assets/backgrounds/play-bg@2x.webp") center / cover no-repeat;
  background-color: var(--sky);
}

.screen-play.is-active { display: grid; }

.screen-play.is-ending-to-result {
  animation: play-to-result 180ms ease-in both;
}

@keyframes play-to-result {
  from { opacity: 1; }
  to { opacity: 0; }
}

.screen-play > * {
  min-width: 0;
}

.start-countdown {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, rgba(255,255,255,0.94) 0 11%, rgba(255,250,228,0.7) 34%, rgba(173,229,248,0.42) 72%, rgba(141,214,244,0.5) 100%);
  backdrop-filter: blur(2px) saturate(1.04);
  -webkit-backdrop-filter: blur(2px) saturate(1.04);
  opacity: 0;
  pointer-events: auto;
}

.start-countdown.is-visible {
  display: grid;
  animation: start-countdown-curtain 220ms ease-out both;
}

.start-countdown.is-leaving { animation: start-countdown-leave 170ms ease-in both; }

.start-countdown::before,
.start-countdown::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255,255,255,0.56);
  filter: blur(2px);
}

.start-countdown::before { left: -68px; top: 19%; box-shadow: 58px 13px 0 rgba(255,225,238,0.54); }
.start-countdown::after { right: -72px; bottom: 21%; box-shadow: -54px -10px 0 rgba(211,250,235,0.56); }

.start-countdown-copy {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 190px;
  min-height: 190px;
}

.start-countdown-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 164px;
  height: 164px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 46% 54% 50% 48%;
  background: rgba(255,251,237,0.62);
  box-shadow: 0 12px 28px rgba(73,134,158,0.14), inset 0 3px 0 rgba(255,255,255,0.92);
  transform: rotate(-3deg);
}

.start-countdown small {
  position: absolute;
  top: 15px;
  color: #9a7b68;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.start-countdown strong {
  display: block;
  color: #ff8a64;
  font-family: var(--font-display);
  font-size: clamp(88px, 25vw, 108px);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 4px rgba(255,255,255,0.94);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 #d96855, 0 12px 20px rgba(191,93,77,0.2), inset 0 2px 0 #fff;
  transform-origin: 50% 55%;
}

.start-countdown[data-step="2"] strong { color: #62cdb9; text-shadow: 0 6px 0 #3eaa99, 0 12px 20px rgba(54,151,139,0.2); }
.start-countdown[data-step="1"] strong { color: #7daeea; text-shadow: 0 6px 0 #5688c7, 0 12px 20px rgba(74,127,190,0.2); }
.start-countdown.is-go strong {
  color: #ff6f8d;
  font-size: clamp(68px, 20vw, 84px);
  letter-spacing: -0.02em;
  text-shadow: 0 6px 0 #d95070, 0 13px 24px rgba(204,65,101,0.24);
}

.start-countdown.is-go .start-countdown-copy::before {
  width: 208px;
  height: 154px;
  border-radius: 48% 52% 46% 54%;
  background: rgba(255,247,219,0.76);
}

.start-countdown strong.is-popping { animation: start-countdown-pop 620ms cubic-bezier(.16,.78,.23,1.08) both; }
.start-countdown.is-go strong.is-popping { animation-duration: 540ms; }

.start-countdown-burst {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.start-countdown-burst i {
  --ready-x: 0px;
  --ready-y: 0px;
  position: absolute;
  width: 22px;
  height: 22px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  opacity: 0;
}

.start-countdown.is-go .start-countdown-burst i { animation: ready-spark 520ms ease-out both; }
.start-countdown-burst i:nth-child(1) { --ready-x: -110px; --ready-y: -80px; }
.start-countdown-burst i:nth-child(2) { --ready-x: 112px; --ready-y: -66px; animation-delay: 45ms; }
.start-countdown-burst i:nth-child(3) { --ready-x: -92px; --ready-y: 76px; animation-delay: 90ms; }
.start-countdown-burst i:nth-child(4) { --ready-x: 96px; --ready-y: 72px; animation-delay: 130ms; }

.start-countdown-cat {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(13%, calc(24px + var(--safe-bottom)));
  width: clamp(118px, 32vw, 142px);
  height: clamp(128px, 35vw, 154px);
  opacity: 0;
  transform: translate(-50%, 18px) scale(0.92);
  animation: ready-cat-enter 430ms 110ms cubic-bezier(.18,.8,.25,1.12) both;
}

.start-countdown-cat img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.start-countdown.is-go .start-countdown-cat { animation: ready-cat-go 540ms cubic-bezier(.18,.8,.25,1.12) both; }

@keyframes start-countdown-curtain { from { opacity: 0; } to { opacity: 1; } }
@keyframes start-countdown-leave { from { opacity: 1; } to { opacity: 0; } }
@keyframes start-countdown-pop {
  0% { opacity: 0; transform: scale(0.34) rotate(-6deg); }
  28% { opacity: 1; transform: scale(1.16) rotate(2deg); }
  58% { opacity: 1; transform: scale(0.96) rotate(-1deg); }
  80% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes ready-spark {
  0%, 14% { opacity: 0; transform: translate(-50%,-50%) scale(0.25) rotate(0); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ready-x)),calc(-50% + var(--ready-y))) scale(1) rotate(130deg); }
}

@keyframes ready-cat-enter {
  to { opacity: 0.94; transform: translate(-50%, 0) scale(1); }
}

@keyframes ready-cat-go {
  0% { opacity: 0.94; transform: translate(-50%, 0) scale(1); }
  42% { opacity: 1; transform: translate(-50%, -8px) scale(1.06) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(1.1) rotate(2deg); }
}

.screen-play::before {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  box-shadow: inset 0 0 0 0 rgba(255, 103, 134, 0);
  opacity: 0;
  pointer-events: none;
}

/* 화면 테두리의 두 경고(마지막 30초, 시간 정지)는 원래 box-shadow를
   직접 애니메이션했다. 그런데 이 요소는 화면 전체(inset: 0)라, 프레임마다
   390x780 전체를 다시 그리고 그때마다 그림자 blur를 다시 계산했다.
   실측(CPU 6배 스로틀): 이 하나가 +6.7%p였다.

   그림자는 제일 센 값으로 고정해두고 투명도만 오르내리게 바꿨다. 알파가
   0.03->0.12로 네 배 오르내리던 것을 opacity 0.25->1로 옮긴 것이라 보이는
   결과는 사실상 같은데, 투명도는 합성기가 처리해서 다시 그리는 일이 없다.
   같은 측정에서 opacity 애니메이션의 비용은 0.0%p였다. */
.screen-play.is-final-countdown::before {
  box-shadow: inset 0 0 28px 2px rgba(255, 111, 139, 0.12);
  opacity: 1;
  animation: play-edge-alarm 940ms ease-in-out infinite alternate;
}

.screen-play.is-time-frozen::before {
  box-shadow: inset 0 0 31px 4px rgba(127, 215, 239, 0.25), inset 0 0 0 3px rgba(242, 255, 255, 0.34);
  opacity: 1;
  animation: play-edge-frozen 1.6s ease-in-out infinite alternate;
}

@keyframes play-edge-alarm {
  from { opacity: .25; }
  to { opacity: 1; }
}

@keyframes play-edge-frozen {
  from { opacity: .5; }
  to { opacity: 1; }
}

.play-hud {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-rows: 34px 26px 17px;
  gap: 3px;
  min-height: 0;
  padding: 1px 1px 3px;
}

.hud-topline,
.hud-secondline {
  display: flex;
  align-items: center;
}

.hud-topline {
  display: grid;
  grid-template-columns: 44px minmax(104px, 1fr) minmax(96px, 112px);
  min-height: 34px;
  gap: 10px;
}

.hud-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pause-button {
  width: 43px;
  height: 34px;
  flex: 0 0 auto;
}

.hud-mini-button {
  position: relative;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(225, 195, 145, 0.76);
  border-radius: 50%;
  background: rgba(255, 250, 238, 0.94);
  box-shadow: 0 2px 0 rgba(157, 120, 71, 0.1), inset 0 1px 0 white;
}

.hud-mini-button::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}

.hud-mini-button:active { transform: translateY(1px) scale(.96); }

.music-button i {
  position: absolute;
  left: 7px;
  top: 8px;
  width: 7px;
  height: 10px;
  border-radius: 2px;
  background: #8794a7;
}

.music-button i::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -3px;
  width: 7px;
  height: 16px;
  background: #8794a7;
  clip-path: polygon(0 28%,100% 0,100% 100%,0 72%);
}

.music-button i::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  width: 6px;
  height: 9px;
  border-right: 2px solid #8794a7;
  border-radius: 50%;
}

.music-button.is-on {
  border-color: rgba(75, 183, 161, .72);
  background: rgba(220, 253, 244, .96);
  box-shadow: 0 2px 0 rgba(55, 142, 125, .14), 0 0 8px rgba(74, 202, 177, .18), inset 0 1px 0 white;
}

.music-button.is-on i,
.music-button.is-on i::before { background: var(--mint-deep); }
.music-button.is-on i::after { border-color: var(--mint-deep); }

.sound-button i {
  position: absolute;
  left: 17px;
  top: 18px;
  width: 7px;
  height: 10px;
  border-radius: 2px 0 0 2px;
  background: #8794a7;
}
.sound-button i::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -3px;
  width: 8px;
  height: 16px;
  background: #8794a7;
  clip-path: polygon(0 28%,100% 0,100% 100%,0 72%);
}
.sound-button i::after {
  content: "";
  position: absolute;
  left: 11px;
  top: -2px;
  width: 7px;
  height: 11px;
  border-right: 2px solid #8794a7;
  border-radius: 50%;
}
.sound-button.is-on {
  border-color: rgba(91,178,207,.62);
  background: linear-gradient(180deg,#f5fdff,#d9f2f9);
  color: #417b91;
}
.sound-button.is-on i,
.sound-button.is-on i::before { background: #4f9eb7; }
.sound-button.is-on i::after { border-color: #4f9eb7; }

.restart-button i {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 13px;
  height: 13px;
  border: 2px solid #8794a7;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-28deg);
}

.restart-button i::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid #8794a7;
  transform: rotate(-13deg);
}

.round-mini {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 32px;
  padding: 5px 12px 4px;
  border: 1px solid rgba(225, 195, 145, 0.76);
  border-radius: 18px;
  background: rgba(255, 250, 238, 0.94);
  box-shadow: 0 2px 0 rgba(157, 120, 71, 0.08), inset 0 1px 0 white;
  color: #65758c;
}

.round-mini span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
}

.round-mini strong {
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.round-mini.is-advancing {
  animation: round-hud-advance 570ms cubic-bezier(.16,.82,.24,1.15) both;
}

@keyframes round-hud-advance {
  0% { transform: scale(0.94); filter: brightness(1); }
  38% { transform: scale(1.07); filter: brightness(1.1) saturate(1.08); box-shadow: 0 0 14px rgba(105, 211, 192, 0.3), inset 0 1.5px 0 white; }
  100% { transform: scale(1); filter: none; }
}

.time-readout {
  --time-progress: 1;
  position: relative;
  overflow: hidden;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 96px;
  min-height: 34px;
  padding: 4px 7px 6px;
  border: 1.5px solid rgba(91, 168, 201, 0.68);
  border-radius: 16px;
  background: rgba(255, 255, 251, 0.97);
  box-shadow: 0 3px 0 rgba(82, 139, 166, 0.1), 0 5px 12px rgba(77, 143, 173, 0.08), inset 0 1.5px 0 white;
  color: #1f7399;
}

.time-readout::before,
.time-readout::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 4px;
  border-radius: 99px;
  pointer-events: none;
}

.time-readout::before { background: rgba(71, 132, 161, 0.13); }
.time-readout::after {
  background: linear-gradient(90deg, #74d8c2, #66bfe4 62%, #ff91aa);
  transform: scaleX(var(--time-progress));
  transform-origin: left center;
  transition: transform 100ms linear;
}

.time-readout img {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 22px;
  object-fit: contain;
}

.time-readout .time-freeze-icon { display: none; }

.time-readout.is-frozen {
  border-color: rgba(99, 200, 225, 0.88);
  background: rgba(239, 253, 255, 0.98);
  color: #368ba9;
  box-shadow: 0 3px 0 rgba(63, 145, 174, 0.14), inset 0 1.5px 0 white, 0 0 13px rgba(114, 221, 241, 0.34);
  animation: frozen-time-pulse 1.1s ease-in-out infinite alternate;
}

.time-readout.is-frozen .time-clock-icon { display: none; }
.time-readout.is-frozen .time-freeze-icon { display: block; }
.time-readout.is-frozen::after { transition: none; filter: saturate(0.72) brightness(1.08); }

@keyframes frozen-time-pulse {
  from { transform: translateY(0); filter: brightness(1); }
  to { transform: translateY(-1px); filter: brightness(1.04); }
}

.time-readout strong {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.time-readout.is-warning {
  border-color: rgba(244, 128, 148, 0.68);
  box-shadow: 0 3px 0 rgba(194, 85, 109, 0.11), inset 0 1.5px 0 white, 0 0 12px rgba(255, 115, 143, 0.1);
}

.time-readout.is-low-time {
  border-color: rgba(239, 169, 93, 0.72);
  background: rgba(255, 252, 239, 0.98);
  box-shadow: 0 3px 0 rgba(190, 127, 61, 0.1), inset 0 1.5px 0 white, 0 0 11px rgba(255, 187, 88, 0.12);
}

.time-readout.is-low-time::after {
  background: linear-gradient(90deg, #ffd05e, #ff9a72 68%, #ff7896);
}

.time-readout.is-warning strong { color: var(--coral-deep); }
.time-readout.is-warning[data-urgency="high"] { background: rgba(255, 243, 239, 0.97); }
.time-readout.is-counting { animation: time-warning 330ms cubic-bezier(.16,.82,.24,1.18) both; }
.time-readout.is-time-added {
  animation: time-added-pop 620ms cubic-bezier(.16,.82,.24,1.18) both;
  border-color: rgba(105, 205, 184, 0.72);
}

@keyframes time-warning {
  0% { transform: scale(1); }
  44% { transform: scale(1.075); filter: brightness(1.04); }
  100% { transform: scale(1); filter: none; }
}

@keyframes time-added-pop {
  0% { transform: scale(1); box-shadow: 0 3px 0 rgba(157, 120, 71, 0.1), inset 0 1.5px 0 white; }
  30% { transform: scale(1.11); box-shadow: 0 3px 0 rgba(68, 165, 147, 0.15), inset 0 1.5px 0 white, 0 0 18px rgba(105, 222, 200, 0.46); }
  66% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

.hud-secondline {
  min-height: 26px;
  justify-content: space-between;
  gap: 8px;
}

.score-readout,
.combo-readout {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 26px;
  padding: 2px 5px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.score-readout { gap: 5px; }
.combo-readout { gap: 4px; justify-content: flex-end; }
.combo-readout { position: relative; justify-content: flex-end; padding-bottom: 5px; }

.score-readout img,
.combo-readout img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.score-readout span,
.combo-readout span {
  color: #7b8292;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
}

.score-readout strong {
  max-width: 122px;
  overflow: hidden;
  color: #3e536d;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

.combo-readout strong {
  min-width: 21px;
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  text-align: right;
  line-height: 1;
}

.combo-timer {
  position: absolute;
  right: 4px;
  bottom: 2px;
  width: 54px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 246, 214, 0.82);
  box-shadow: inset 0 0 0 1px rgba(193, 150, 73, 0.18);
  opacity: 0.52;
  transition: opacity 120ms ease;
}

.combo-timer i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd05e, var(--coral));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 100ms linear;
}

.combo-readout.is-active .combo-timer { opacity: 1; }

.combo-readout.is-reward-close img {
  animation: combo-reward-star 620ms ease-in-out infinite alternate;
}

.combo-readout.is-reward-close .combo-timer {
  box-shadow: inset 0 0 0 1px rgba(218, 144, 55, 0.24), 0 0 7px rgba(255, 190, 79, 0.2);
}

.combo-readout.is-reward-close::after {
  content: "선물 +" attr(data-reward-remaining);
  position: absolute;
  z-index: 3;
  left: 4px;
  top: 3px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 241, 191, 0.94);
  border-radius: 999px;
  background: rgba(255, 250, 225, 0.94);
  box-shadow: 0 2px 5px rgba(194, 126, 52, 0.1);
  color: #d47b51;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes combo-reward-star {
  from { transform: scale(1) rotate(-3deg); filter: brightness(1); }
  to { transform: scale(1.13) rotate(5deg); filter: brightness(1.08) saturate(1.08); }
}

.combo-readout.is-punching {
  animation: combo-punch 500ms cubic-bezier(.2,.9,.25,1.3);
}

.combo-readout.is-reward-earned {
  animation: combo-reward-earned 720ms cubic-bezier(.18,.82,.24,1.16) both;
}

.combo-reward-pop,
.combo-loss-pop {
  position: absolute;
  z-index: 34;
  pointer-events: none;
  white-space: nowrap;
}

.combo-reward-pop {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 10px 4px 5px;
  border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  background: rgba(255,249,224,0.98);
  box-shadow: 0 5px 12px rgba(168,103,67,0.18), inset 0 1px 0 #fff;
  color: #ce715e;
  font-family: var(--font-display);
  font-size: 12px;
  transform: translateX(-100%);
  animation: combo-reward-pop 1050ms cubic-bezier(.18,.8,.24,1.1) both;
}

.combo-reward-pop img { width: 27px; height: 27px; object-fit: contain; }
.combo-reward-pop i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  animation: combo-reward-spark 680ms ease-out both;
}
.combo-reward-pop i:first-of-type { left: -7px; top: -5px; }
.combo-reward-pop i:last-of-type { right: -6px; bottom: -5px; animation-delay: 90ms; }

.combo-loss-pop {
  padding: 3px 7px 2px;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  background: rgba(255,246,238,0.96);
  box-shadow: 0 3px 8px rgba(139,91,76,0.12);
  color: #b8796b;
  font-family: var(--font-display);
  font-size: 11px;
  transform: translateX(-100%);
  animation: combo-loss-pop 720ms ease-out both;
}

@keyframes combo-reward-earned {
  0% { transform: scale(1); }
  34% { transform: translateY(-1px) scale(1.14); filter: brightness(1.08); }
  72% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes combo-reward-pop {
  0% { opacity: 0; transform: translate(-100%, 5px) scale(0.78); }
  20% { opacity: 1; transform: translate(-100%, 0) scale(1.05); }
  72% { opacity: 1; transform: translate(-100%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-100%, -7px) scale(0.96); }
}

@keyframes combo-reward-spark {
  0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15) rotate(45deg); }
}

@keyframes combo-loss-pop {
  0% { opacity: 0; transform: translate(-100%, -3px) scale(0.86); }
  22%, 68% { opacity: 1; transform: translate(-100%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-100%, 5px) scale(0.96); }
}

/* The combo chip's floating callout is retired along with the milestone
   banner it echoed. Its content came from data-callout, which is no longer
   set — leaving a pseudo-element that still painted its cream pill with
   nothing in it, flashing at the chip's top-right on every combo pulse. */

.combo-readout[data-level="3"] strong { color: #e38b42; }
.combo-readout[data-level="5"] strong { color: #ea6280; text-shadow: 0 0 7px rgba(255, 193, 79, 0.2); }
.combo-readout[data-level="8"] strong { color: var(--coral-deep); text-shadow: 0 0 8px rgba(255,113,136,0.25); }
/* Past sixteen the banner has stepped aside, so the chip keeps the climb
   going on its own: a hotter figure with a steady glow behind it. */
.combo-readout[data-level="16"] strong {
  color: #e0325f;
  text-shadow: 0 0 10px rgba(255,86,120,0.42), 0 0 20px rgba(255,140,120,0.24);
}

@keyframes combo-punch {
  32% { transform: translateY(-1px) scale(1.13); }
  68% { transform: scale(0.98); }
}

}

.goal-status {
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  padding: 0 3px;
}

.goal-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.goal-copy {
  color: #847961;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.goal-copy em {
  font-style: normal;
}

.goal-copy b { color: #a8795d; }

.stage-mission {
  position: relative;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 5px 2px 3px;
  border: 1px solid rgba(120, 183, 166, 0.34);
  border-radius: 999px;
  background: rgba(238, 252, 246, 0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  color: #54897c;
  line-height: 1;
  white-space: nowrap;
}

.stage-mission[hidden] { display: none; }

.stage-mission img {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  object-fit: contain;
}

.stage-mission strong {
  overflow: hidden;
  max-width: 92px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-mission[data-kind="cat"] {
  border-color: rgba(236, 159, 172, 0.34);
  background: rgba(255, 243, 246, 0.86);
  color: #b06f7f;
}

.stage-mission[data-kind="chain"] {
  border-color: rgba(226, 173, 74, 0.36);
  background: rgba(255, 249, 224, 0.88);
  color: #a87735;
}

.stage-mission.is-complete {
  border-color: rgba(255, 180, 77, 0.5);
  background: rgba(255, 248, 213, 0.96);
  color: #ce7654;
}

.stage-mission.is-rewarded {
  animation: stage-mission-reward 720ms cubic-bezier(.16,.82,.24,1.16) both;
}

@keyframes stage-mission-reward {
  0% { transform: scale(.9); filter: brightness(1); }
  32% { transform: translateY(-1px) scale(1.11); filter: brightness(1.1) saturate(1.08); box-shadow: 0 0 11px rgba(255,190,74,.28), inset 0 1px 0 white; }
  68% { transform: scale(.98); }
  100% { transform: scale(1); filter: none; }
}

.goal-status.is-complete .goal-copy {
  color: #328d7e;
  font-size: 12px;
}

.goal-status.is-complete .goal-copy b {
  color: #e85c79;
}

.goal-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(201,168,104,0.38);
  border-radius: 999px;
  background: rgba(250,235,197,0.74);
  box-shadow: inset 0 1px 2px rgba(129,99,47,0.09);
}

.goal-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd05e, #ff879b);
  transition: width 240ms cubic-bezier(.2,.8,.25,1);
}

.goal-track.is-rewarded {
  animation: goal-reward-track 500ms cubic-bezier(.16,.82,.24,1.15) both;
}

.goal-track.is-rewarded i {
  animation: goal-reward-fill 500ms cubic-bezier(.16,.82,.24,1.15) both;
}

.goal-track.is-rewarded[data-level="5"] { --goal-reward: rgba(80, 200, 176, 0.46); }
.goal-track.is-rewarded[data-level="8"] { --goal-reward: rgba(255, 103, 140, 0.52); }

@keyframes goal-reward-track {
  0% { transform: scaleY(1); box-shadow: inset 0 1px 2px rgba(129,99,47,0.09); }
  38% { transform: scaleY(1.35); box-shadow: inset 0 1px 2px rgba(129,99,47,0.06), 0 0 12px var(--goal-reward, rgba(255, 190, 77, 0.44)); }
  100% { transform: scaleY(1); box-shadow: inset 0 1px 2px rgba(129,99,47,0.09); }
}

@keyframes goal-reward-fill {
  0% { filter: brightness(1); }
  42% { filter: brightness(1.25) saturate(1.14); }
  100% { filter: none; }
}

.screen-play[data-round="2"] .round-mini strong { color: #38a894; }
.screen-play[data-round="2"] .goal-track i { background: linear-gradient(90deg, #7fd6c2, #58c5ad); }
.screen-play[data-round="3"] .round-mini strong { color: #7a64b9; }
.screen-play[data-round="3"] .goal-track i { background: linear-gradient(90deg, #c9b0ff, #ff7ba8); }
.screen-play[data-round="4"] .round-mini strong { color: #e88455; }
.screen-play[data-round="4"] .goal-track i { background: linear-gradient(90deg, #ffbf76, #ff7ba8); }
.screen-play[data-round="5"] .round-mini strong { color: #38a894; }
.screen-play[data-round="5"] .goal-track i { background: linear-gradient(90deg, #8be0cf, #58c5ad); }
.screen-play[data-round="6"] .round-mini strong { color: #7a64b9; }
.screen-play[data-round="6"] .goal-track i { background: linear-gradient(90deg, #b8a2ff, #ff8eac); }

/* Board */
.board-zone {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}

.board-frame {
  --drag-pull-x: 0px;
  --drag-pull-y: 0px;
  position: relative;
  width: calc(var(--board-edge) + 20px);
  max-width: calc(100% + 20px);
  margin-inline: -10px;
  padding: clamp(4px, 1.4vw, 7px);
  border: 2px solid rgba(218,169,95,0.66);
  border-radius: 21px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff0d2 100%);
  box-shadow:
    0 5px 0 rgba(190,131,69,0.18),
    0 12px 22px rgba(57,111,136,0.15),
    0 0 0 4px rgba(255,253,241,0.44),
    inset 0 2px 0 #fff;
  transform: none;
}

.board-frame[data-round="2"] { border-color: rgba(91, 191, 169, 0.52); }
.board-frame[data-round="3"] { border-color: rgba(153, 125, 203, 0.5); }
.board-frame[data-round="4"] { border-color: rgba(232, 132, 85, 0.5); }
.board-frame[data-round="5"] { border-color: rgba(91, 191, 169, 0.52); }
.board-frame[data-round="6"] { border-color: rgba(153, 125, 203, 0.5); }

.board-frame.is-item-reward-near {
  animation: item-reward-near 760ms cubic-bezier(.18,.78,.24,1.08) both;
}

@keyframes item-reward-near {
  0%, 100% {
    border-color: rgba(218,169,95,0.66);
    box-shadow: 0 5px 0 rgba(190,131,69,0.18), 0 12px 22px rgba(57,111,136,0.15), 0 0 0 4px rgba(255,253,241,0.44), inset 0 2px 0 #fff;
  }
  38% {
    border-color: rgba(255,174,93,0.88);
    box-shadow: 0 5px 0 rgba(205,135,66,0.17), 0 12px 22px rgba(57,111,136,0.13), 0 0 0 6px rgba(255,215,128,0.22), 0 0 18px rgba(255,174,93,0.26), inset 0 2px 0 #fff;
  }
}

.board-frame.is-counting {
  animation: board-countdown-breath 340ms ease-out both;
}

/* 피버의 분홍 후광은 play-layout-v1.css로 옮겼다. 여기 두면 나중에 로드되는
   .play-ui-v4 .board-frame 규칙에 밀린다 - 예전에는 애니메이션이라서 이기고
   있었을 뿐이고, 애니메이션을 걷어내는 순간 후광이 통째로 사라진다. */

.board-frame.is-fever .board {
  border-color: rgba(255,143,168,.62);
  box-shadow:
    inset 0 1px 4px rgba(133,96,52,.08),
    inset 0 0 18px rgba(255,177,111,.08),
    0 0 0 2px rgba(255,255,255,.64),
    0 0 14px rgba(255,113,145,.12);
  animation: fever-board-breathe 1.15s ease-in-out infinite alternate;
}

.board-frame.is-fever .tile:not(.is-empty)::after {
  animation-duration: 1.3s;
}

/* 피버 종료 직전의 후광도 같은 이유로 play-layout-v1.css에 있다. 다급함은
   .board의 filter를 같은 박자로 몰아서 낸다 - 그쪽은 공짜다. */
.board-frame.is-fever-expiring .board {
  animation-duration: 340ms;
}

.score-flight {
  position: absolute;
  z-index: 28;
  width: 1px;
  height: 1px;
  pointer-events: none;
  animation: score-flight-arc 560ms cubic-bezier(.18,.72,.2,1) both;
}

.score-flight img {
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(189, 125, 35, 0.24));
  transform: translate(-50%, -50%);
}

.score-flight[data-level="5"] img,
.score-flight[data-level="8"] img { width: 28px; height: 28px; }

.score-flight i {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px 50% 2px 50%;
  background: #fff4a4;
  box-shadow: 0 0 7px rgba(255, 196, 67, 0.62);
  opacity: 0;
  animation: score-flight-spark 430ms 45ms ease-out both;
}

.score-flight i:last-child {
  background: #ff9bb1;
  animation-delay: 105ms;
}

@keyframes score-flight-arc {
  0% { opacity: 0; transform: translate(0, 0) scale(0.52) rotate(-16deg); }
  18% { opacity: 1; }
  48% { opacity: 1; transform: translate(var(--score-flight-mid-x), var(--score-flight-mid-y)) scale(1.08) rotate(7deg); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--score-flight-x), var(--score-flight-y)) scale(0.42) rotate(0); }
}

@keyframes score-flight-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  38% { opacity: 1; transform: translate(-13px, 8px) scale(1); }
  100% { opacity: 0; transform: translate(-27px, 19px) scale(0.35) rotate(90deg); }
}

@keyframes board-countdown-breath {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.035) saturate(1.03); }
  100% { filter: none; }
}

@keyframes fever-board-breathe {
  from { filter: saturate(1); }
  to { filter: saturate(1.035) brightness(1.012); }
}

.board {
  --board-cols: 4;
  --board-rows: 4;
  --board-gap: clamp(1px, 0.38vw, 1.8px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--board-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--board-rows), minmax(0, 1fr));
  gap: var(--board-gap);
  width: 100%;
  aspect-ratio: var(--board-cols) / var(--board-rows);
  padding: 1px;
  border: 1px solid rgba(222, 196, 153, 0.6);
  border-radius: 13px;
  background-color: #fff6e9;
  background-image:
    linear-gradient(to right, rgba(220, 196, 157, 0.34) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(220, 196, 157, 0.34) 1px, transparent 1px);
  background-size:
    calc(100% / var(--board-cols)) calc(100% / var(--board-rows)),
    calc(100% / var(--board-cols)) calc(100% / var(--board-rows));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

.board[data-size="7"],
.board[data-size="8"],
.board[data-size="9"] {
  --board-gap: 1px;
}

.board[data-size="7"] .tile { border-radius: 9px; }
.board[data-size="8"] .tile { border-radius: 8px; }
.board[data-size="9"] .tile { border-radius: 7px; }

.tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  overflow: visible;
  border: 0;
  border-radius: clamp(8px, 2.45vw, 12px);
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Every cell now paints the same near-neutral tile (L*90/C*8), so the
     board floor (#fff6e9) and the tile's own pale edge sit only ~5 L* apart —
     with a 1-1.8px gap between cells, that was not enough to read as a grid at
     a glance. This ring is what actually draws the cell boundary; it is a
     fixed warm/white pair applied identically everywhere, so it defines edges
     without reintroducing a per-cell hue. */
  box-shadow:
    inset 0 0 0 1px rgba(178, 140, 88, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.65);
  filter:
    drop-shadow(0 1.5px 1px rgba(129, 93, 68, 0.18))
    drop-shadow(0 3px 3px rgba(92, 117, 145, 0.08));
  font-variant-numeric: tabular-nums;
  transition: transform 32ms cubic-bezier(.2,.85,.3,1.12), filter 36ms ease;
  will-change: transform;
}

.tile::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 7%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 19%, rgba(255,255,255,0.1) 36%, rgba(255,255,255,0.72) 49%, rgba(255,255,255,0.08) 62%, transparent 78%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-54%) skewX(-10deg);
}

.tile span {
  position: relative;
  z-index: 2;
  font-size: clamp(18px, calc(62vw / var(--board-cols)), 43px);
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 400;
  color: #e58a25;
  text-shadow: 0 1.5px 0 rgba(255,255,255,0.82), 0 2.5px 2px rgba(73,61,48,0.06);
}

/* One tile, every cell. The board is what the player stares at for two minutes
   straight, and any hue spread across all forty-two cells accumulates: pale
   enough to rest the eye looked washed out, strong enough to look deliberate
   was tiring. There is no setting of that dial that is both.

   This is the v4 mint, unmodified. It measures L* 90 / C* 8 — barely any colour
   cast at all — but the syrup's iridescent refraction survives inside it
   (variation ~2.5 ΔE across the face), so the tile reads as a material rather
   than as a flat swatch. Charm without chroma. Contrast to the #425374 ink is
   5.99:1.

   `--tile-art` stays a variable because the bonus cat layers a glow over the
   same art; composing against the variable keeps that rule from re-naming the
   file. */
.tile { --tile-art: url("../assets/ui/tiles-syrup-v5/tile-cream.webp"); }
.tile.value-1, .tile.value-2, .tile.value-3, .tile.value-4, .tile.value-5,
.tile.value-6, .tile.value-7, .tile.value-8, .tile.value-9 {
  background-image: var(--tile-art);
}

/* A-1: 숫자 색을 잉크 한 색으로 통일.
   이전에는 1~9가 전부 다른 색이었는데(초록/보라/분홍/청록/파랑/주황...),
   색이 값을 알려주지 않으므로 정보량은 0이고 시각적 소음만 컸다.
   1·3이 비슷한 초록, 2·7·9가 비슷한 보라라 규칙 학습도 되지 않았다.
   숫자는 단색으로 두고, 색은 선택·힌트·성공 같은 "의미 있는 상태"에만 남긴다.
   배경 파스텔 위에서 또렷하게 뜨도록 흰색 헤어라인만 얇게 깐다.
   전역 --ink(#35445f, 본문 글자색)보다 한 톤 밝은 전용 색을 쓴다 —
   처음 값은 너무 진하다는 피드백이 있었다. 위 배경 채도 상향을 반영해도
   대비 최저 4.98:1(AA 4.5:1 이상)을 유지한다. */
.tile[class*="value-"] span {
  color: #425374;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.tile.is-empty {
  border: 1.5px solid rgba(216, 190, 150, 0.58);
  background-color: rgba(255, 246, 233, 0.78);
  background-image: none;
  box-shadow:
    inset 0 2px 4px rgba(142, 111, 73, 0.055),
    inset 0 0 0 1px rgba(255,255,255,0.64);
  filter: none;
  opacity: 1;
}

/* The bonus cat uses one brighter strawberry-milk syrup tile. Its contrast is
   carried by the artwork itself, so the character needs no extra white wash. */
.tile.is-bonus-cat {
  --tile-art: url("../assets/ui/tiles-syrup-v5/tile-cat-pink.webp");
  z-index: 2;
  overflow: visible;
  border: 0;
  background-color: transparent;
  background-image: var(--tile-art);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 2px 2px rgba(112, 76, 56, 0.18))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.30));
}

.bonus-cat-art {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 82%;
  height: 82%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: saturate(1.07) drop-shadow(0 2px 2px rgba(55, 78, 104, 0.22));
  animation: bonus-cat-peek 1.8s ease-in-out infinite alternate;
}

.bonus-cat-mark {
  position: absolute;
  z-index: 4;
  right: 10%;
  top: 9%;
  width: clamp(8px, 16%, 14px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 3px 50% 3px 50%;
  background: #ffd96b;
  box-shadow: 0 0 0 2px rgba(255,225,131,0.24), 0 0 8px rgba(255,194,76,0.52);
  pointer-events: none;
  transform: rotate(45deg);
  animation: bonus-cat-spark 900ms ease-in-out infinite alternate;
}

@keyframes bonus-cat-peek {
  from { transform: translateX(-50%) translateY(0.5px) scale(0.992); }
  to { transform: translateX(-50%) translateY(-0.5px) scale(1.008); }
}

@keyframes bonus-cat-spark {
  from { opacity: 0.48; transform: rotate(35deg) scale(0.68); }
  to { opacity: 1; transform: rotate(55deg) scale(1.04); }
}

.tile.is-board-item {
  z-index: 3;
  overflow: visible;
  border: 1.5px solid rgba(255,255,255,0.86);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92) 0 7%, transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,224,218,0.92));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -5px 10px rgba(230,112,99,0.12),
    0 2px 0 rgba(211,133,104,0.15),
    0 0 12px rgba(255,143,118,0.22);
  filter: none;
  cursor: pointer;
  animation: board-item-idle 1.25s ease-in-out infinite alternate;
}

.tile.is-board-item.board-item-clock {
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.94) 0 7%, transparent 24%),
    linear-gradient(145deg, rgba(252,255,255,0.92), rgba(199,245,240,0.95));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.96),
    inset 0 -5px 10px rgba(60,170,160,0.12),
    0 2px 0 rgba(70,160,151,0.14),
    0 0 12px rgba(87,213,198,0.24);
}

.tile.is-board-item.board-item-freeze {
  border-color: rgba(210, 251, 255, 0.96);
  background-image:
    radial-gradient(circle at 29% 18%, rgba(255,255,255,0.98) 0 8%, transparent 24%),
    linear-gradient(145deg, rgba(248,255,255,0.98), rgba(203,239,255,0.96) 55%, rgba(214,216,255,0.94));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 -6px 12px rgba(85,156,208,0.14),
    0 2px 0 rgba(79,144,184,0.15),
    0 0 14px rgba(100,216,238,0.3);
}

.tile.is-board-item.board-item-clover {
  border-color: rgba(227,255,226,0.98);
  background-image:
    radial-gradient(circle at 29% 18%, rgba(255,255,255,0.98) 0 8%, transparent 24%),
    linear-gradient(145deg, rgba(252,255,244,0.98), rgba(203,246,214,0.96) 58%, rgba(184,235,208,0.94));
  box-shadow: inset 0 2px 0 white, inset 0 -6px 12px rgba(63,156,103,0.13), 0 2px 0 rgba(75,151,103,0.14), 0 0 15px rgba(101,218,145,0.3);
}

.tile.is-board-item.board-item-megabomb {
  border-color: rgba(255,244,205,0.94);
  background-image:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.98) 0 7%, transparent 23%),
    linear-gradient(145deg, rgba(255,250,225,0.96), rgba(255,185,166,0.95) 58%, rgba(255,221,128,0.93));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 -6px 12px rgba(218,78,68,0.16),
    0 2px 0 rgba(211,126,81,0.16),
    0 0 14px rgba(255,126,99,0.3),
    0 0 22px rgba(255,210,85,0.16);
}

.board-item-icon {
  position: relative;
  z-index: 3;
  /* The item should read like the cat art does — filling its cell. At 58%
     the bomb looked like a misrendered thumbnail next to full-bleed cats. */
  width: clamp(36px, 78%, 62px);
  height: clamp(36px, 78%, 62px);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(128,76,61,0.18));
}

.board-item-clock .board-item-icon {
  width: clamp(25px, 53%, 45px);
  height: clamp(28px, 61%, 51px);
  filter: drop-shadow(0 3px 4px rgba(45,121,142,0.2));
}

.board-item-freeze .board-item-icon {
  width: clamp(31px, 65%, 54px);
  height: clamp(31px, 65%, 54px);
  filter: drop-shadow(0 3px 5px rgba(71,131,186,0.22));
}

.board-item-clover .board-item-icon {
  width: clamp(31px, 65%, 54px);
  height: clamp(31px, 65%, 54px);
  filter: drop-shadow(0 3px 5px rgba(53,142,87,0.24));
}

.tile.is-clover-hint {
  z-index: 8;
  animation: clover-hint-pulse 750ms ease-in-out 6;
  box-shadow: inset 0 0 0 3px rgba(83,190,120,.72), 0 0 0 2px rgba(231,255,207,.96), 0 0 20px rgba(91,212,132,.62);
}

@keyframes clover-hint-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.12) saturate(1.08); transform: scale(1.025); }
}

.board-item-megabomb .board-item-icon {
  width: clamp(33px, 70%, 57px);
  height: clamp(33px, 70%, 57px);
  filter: drop-shadow(0 4px 5px rgba(173,68,56,0.25));
}

.board-item-sparkle {
  position: absolute;
  z-index: 4;
  right: 10%;
  top: 9%;
  width: 9px;
  height: 9px;
  border-radius: 2px 50% 2px 50%;
  background: #fff8a7;
  box-shadow: 0 0 6px rgba(255,211,74,0.76);
  transform: rotate(45deg);
  animation: board-item-sparkle 720ms ease-in-out infinite alternate;
}

.tile.is-board-item.is-item-pressed {
  animation-play-state: paused;
  transform: translateY(2px) scale(0.93);
  filter: brightness(1.08) saturate(1.08);
}

.tile.is-board-item.is-item-spawning {
  animation: board-item-arrive 860ms var(--item-drop-delay, 0ms) cubic-bezier(.16,.82,.24,1.18) both;
}

.tile.is-board-item.is-item-spawning::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16%;
  border-radius: 46%;
  background: radial-gradient(circle, rgba(255, 247, 185, 0.88) 0 22%, rgba(255, 210, 112, 0.42) 45%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
  animation: board-item-halo 880ms var(--item-drop-delay, 0ms) ease-out both;
}

@keyframes board-item-idle {
  from { transform: translateY(0) scale(1); filter: brightness(1); }
  to { transform: translateY(-1px) scale(1.025); filter: brightness(1.045) saturate(1.04); }
}

@keyframes board-item-sparkle {
  from { opacity: 0.35; transform: rotate(35deg) scale(0.55); }
  to { opacity: 1; transform: rotate(55deg) scale(1.05); }
}

@keyframes board-item-arrive {
  0% { opacity: 0; transform: translateY(-24px) scale(0.25) rotate(-13deg); filter: brightness(1.35); }
  35% { opacity: 1; transform: translateY(2px) scale(1.12) rotate(5deg); }
  62% { transform: translateY(-2px) scale(0.96) rotate(-2deg); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes board-item-halo {
  0% { opacity: 0; transform: scale(0.35); }
  26% { opacity: 1; transform: scale(1.12); }
  62% { opacity: 0.76; transform: scale(0.94); }
  100% { opacity: 0; transform: scale(1.24); }
}

.item-drop-fx {
  position: absolute;
  z-index: 17;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.item-tease {
  display: none;
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 13%;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 164px;
  padding: 7px 13px 7px 8px;
  border: 1.5px solid rgba(255,255,255,0.95);
  border-radius: 19px;
  background: rgba(255, 249, 225, 0.97);
  box-shadow: 0 6px 15px rgba(171,101,72,0.2), inset 0 -2px 0 rgba(228,164,80,0.13);
  pointer-events: none;
  transform: translateX(-50%);
  animation: item-tease-in 1.1s cubic-bezier(.18,.8,.24,1.1) both;
}

.item-tease img {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 37px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(173,77,55,0.2));
}

.item-tease div { display: grid; gap: 2px; text-align: left; }
.item-tease span {
  color: #d48a45;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}
.item-tease strong {
  color: #8f5f58;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.item-tease > i {
  --tease-spark-x: -62px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px 50% 2px 50%;
  background: #ffd970;
  opacity: 0;
  transform: translate(-50%,-50%) rotate(45deg);
  animation: item-tease-spark 660ms 170ms ease-out both;
}
.item-tease > i:last-child { --tease-spark-x: 62px; animation-delay: 260ms; }

@keyframes item-tease-in {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.76); }
  24% { opacity: 1; transform: translate(-50%, -2px) scale(1.045); }
  72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.96); }
}

@keyframes item-tease-spark {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(35deg) scale(0.3); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tease-spark-x),-36px) rotate(150deg) scale(0.9); }
}

.item-drop-fx::before,
.item-drop-fx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255,164,120,0.62);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.3);
  animation: item-drop-ring 720ms ease-out both;
}

.item-drop-fx > b.item-drop-paw {
  --item-paw-x: -31px;
  --item-paw-y: 27px;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  background: url("../assets/decor/paw.webp") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 176, 130, 0.5));
  animation: item-drop-paw 780ms 90ms ease-out both;
}

.item-drop-fx > b.item-drop-paw:nth-of-type(2) {
  --item-paw-x: 30px;
  --item-paw-y: 24px;
  animation-delay: 180ms;
}

.item-drop-fx::after {
  width: 68px;
  height: 68px;
  border-color: rgba(255,220,104,0.54);
  animation-delay: 90ms;
}

.item-drop-fx.item-drop-clock::before,
.item-drop-fx.item-drop-clock::after { border-color: rgba(93,213,197,0.62); }

.item-drop-fx.item-drop-freeze::before,
.item-drop-fx.item-drop-freeze::after { border-color: rgba(101,201,238,0.7); }

.item-drop-fx.item-drop-clover::before,
.item-drop-fx.item-drop-clover::after { border-color: rgba(91,198,125,0.68); }

.item-drop-fx.item-drop-megabomb::before {
  border-color: rgba(255,111,93,0.72);
}

.item-drop-fx.item-drop-megabomb::after {
  border-color: rgba(255,208,77,0.72);
}

.item-drop-fx img {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 35px;
  height: 38px;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%,-50%);
  animation: item-drop-icon 760ms cubic-bezier(.16,.82,.24,1.14) both;
}

.item-drop-fx > span {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 36px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.94);
  border-radius: 999px;
  background: rgba(255,250,226,0.97);
  color: #9a625c;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(150,85,66,0.16);
  opacity: 0;
  transform: translate(-50%, -8px) scale(0.75);
  animation: item-drop-label 820ms 80ms cubic-bezier(.18,.78,.25,1.1) both;
}

.item-drop-fx.item-drop-clock > span { color: #397f79; background: rgba(236,255,250,0.97); }
.item-drop-fx.item-drop-megabomb > span { color: #c75450; background: rgba(255,243,218,0.98); }
.item-drop-fx.item-drop-freeze > span { color: #397ea4; background: rgba(239,252,255,0.98); }
.item-drop-fx.item-drop-clover > span { color: #3b8c5b; background: rgba(246,255,237,0.98); }

.item-drop-fx.item-drop-freeze i {
  background: #e9fdff;
  box-shadow: 0 0 8px rgba(90,205,237,0.78);
}

.item-drop-fx.item-drop-clover i {
  border-radius: 50%;
  background: #dfffaf;
  box-shadow: 0 0 8px rgba(83,196,117,0.68);
}

.item-drop-fx.item-drop-freeze > b.item-drop-paw { filter: hue-rotate(135deg) drop-shadow(0 0 5px rgba(92,194,229,0.52)); }
.item-drop-fx.item-drop-clover > b.item-drop-paw { filter: hue-rotate(55deg) drop-shadow(0 0 5px rgba(80,187,112,0.48)); }

.item-drop-fx.item-drop-megabomb img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 7px rgba(170,65,50,0.3));
}

/* The bigger megabomb icon reaches further past the default label offset
   above, so it needs its own clearance to keep the label from sitting under
   the art during the landing bounce. */
.item-drop-fx.item-drop-megabomb > span {
  top: 46px;
}

.item-drop-fx i {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px 50% 2px 50%;
  background: #fff5a2;
  box-shadow: 0 0 7px rgba(255,211,71,0.72);
  opacity: 0;
  animation: item-drop-star 680ms ease-out both;
}

.item-drop-fx i:nth-of-type(1) { --item-star-x: -35px; --item-star-y: -31px; }
.item-drop-fx i:nth-of-type(2) { --item-star-x: 33px; --item-star-y: -24px; animation-delay: 70ms; }
.item-drop-fx i:nth-of-type(3) { --item-star-x: -27px; --item-star-y: 31px; animation-delay: 130ms; }
.item-drop-fx i:nth-of-type(4) { --item-star-x: 30px; --item-star-y: 28px; animation-delay: 190ms; }

@keyframes item-drop-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.25); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.65); }
}

@keyframes item-drop-icon {
  0% { opacity: 0; transform: translate(-50%,-120%) scale(0.35) rotate(-15deg); }
  34% { opacity: 1; transform: translate(-50%,-55%) scale(1.15) rotate(6deg); }
  68% { opacity: 0.86; transform: translate(-50%,-50%) scale(0.92) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%,-46%) scale(0.78); }
}

@keyframes item-drop-label {
  0% { opacity: 0; transform: translate(-50%, 1px) scale(0.7); }
  30% { opacity: 1; transform: translate(-50%, -8px) scale(1.04); }
  72% { opacity: 1; transform: translate(-50%, -12px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(0.94); }
}

@keyframes item-drop-star {
  0%, 16% { opacity: 0; transform: translate(-50%,-50%) rotate(20deg) scale(0.3); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--item-star-x)), calc(-50% + var(--item-star-y))) rotate(150deg) scale(1); }
}

@keyframes item-drop-paw {
  0%, 12% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(-18deg); }
  38% { opacity: 0.82; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--item-paw-x)), calc(-50% + var(--item-paw-y))) scale(0.92) rotate(20deg); }
}

.board.is-dragging .tile.is-selected {
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
  transform: none;
  filter: brightness(1.045) saturate(1.035);
}

/* 선택된 칸마다 따로 돌던 반짝임을 지웠다.
   드래그 한 번에 칸이 최대 54개까지 선택되는데, 그 칸마다 움직임이 하나씩
   붙었다. both로 잡혀 있어 끝난 뒤에도 남고, 손가락이 도는 내내 브라우저가
   그 칸들의 모양을 매 프레임 다시 계산하고 다시 그렸다. 실제로 재보니 드래그
   중 살아 있는 움직임이 66개였고 그중 58개가 이것이었다.
   반짝임은 선택 상자(.selection-marquee)가 syrup-marquee-flow로 이미 지나간다.
   하나면 되는 연출을 판 전체에 두고 있었다. */

.board.is-perfect .tile.is-selected {
  box-shadow:
    inset 0 0 13px rgba(255, 127, 157, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 3px 8px rgba(220, 91, 121, 0.1);
  filter: brightness(1.065) saturate(1.06);
}

}

.board.is-dragging .tile.is-selected span {
  opacity: 1;
  filter: none;
}

.tile.is-tap-anchor {
  z-index: 5;
  filter: brightness(1.07) saturate(1.08);
}

.tile.is-tap-anchor::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255,255,255,0.94);
  border-radius: 50%;
  background: #ff7188;
  box-shadow: 0 0 0 3px rgba(255,113,136,0.28), 0 4px 8px rgba(199,70,99,0.2);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: tap-anchor-pulse 720ms ease-in-out infinite alternate;
}

@keyframes tap-anchor-pulse {
  from { transform: translate(-50%, -50%) scale(0.82); }
  to { transform: translate(-50%, -50%) scale(1.05); }
}

.selection-marquee {
  --syrup-pull-x: 0px;
  --syrup-pull-y: 0px;
  position: absolute;
  z-index: 4;
  border: 1.5px solid rgba(244, 115, 145, 0.7);
  border-radius: 15px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--syrup-x, 18%) var(--syrup-y, 10%), rgba(255,255,255,0.72) 0 5%, transparent 20%),
    radial-gradient(circle at 82% 94%, rgba(255,166,185,0.21), transparent 42%),
    linear-gradient(145deg, rgba(255, 238, 241, 0.3), rgba(255, 129, 158, 0.2) 48%, rgba(255, 213, 223, 0.16));
  box-shadow:
    0 3px 8px rgba(218,77,106,0.12),
    inset 0 -8px 16px rgba(255,102,137,0.09),
    inset 0 6px 11px rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.8);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(0.985);
  transform-origin: center;
  will-change: opacity, transform;
  transition: none;
}

.selection-marquee.is-visible {
  opacity: 1;
  transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(1);
}

.selection-marquee.is-repositioning {
  transition: none !important;
}

.selection-marquee.is-visible.is-snapping {
  animation: syrup-selection-snap 118ms cubic-bezier(.18,.82,.25,1.22) both;
}

.selection-marquee.is-visible.is-perfect-snap {
  animation-name: syrup-perfect-snap;
}

@keyframes syrup-selection-snap {
  0% { transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(0.986, 1.012); border-radius: 18px; }
  48% { transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(1.012, 0.994); border-radius: 14px; }
  100% { transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(1); border-radius: 16px; }
}

@keyframes syrup-perfect-snap {
  0% { transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(0.978); filter: brightness(1); }
  52% { transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(1.025); filter: brightness(1.09) saturate(1.08); }
  100% { transform: translate(var(--syrup-pull-x), var(--syrup-pull-y)) scale(1.006); filter: brightness(1.035); }
}

.selection-marquee::before,
.selection-marquee::after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.selection-marquee::before {
  inset: 3px -24%;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 29%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.12) 58%, transparent 72%);
  transform: translateX(-34%) skewX(-10deg);
}

.selection-marquee::after {
  right: 4px;
  top: 3px;
  width: 17px;
  height: 17px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.75));
}

.selection-marquee.is-visible::before,
.selection-marquee.is-visible::after {
  animation: syrup-marquee-flow 980ms ease-in-out infinite;
}

.selection-marquee.is-visible::after { animation: selection-twinkle 760ms 110ms ease-in-out infinite alternate; }

@keyframes syrup-marquee-flow {
  0% { opacity: 0; transform: translateX(-34%) skewX(-10deg); }
  18% { opacity: 0.5; }
  62% { opacity: 0.78; }
  100% { opacity: 0; transform: translateX(34%) skewX(-10deg); }
}

@keyframes selection-twinkle {
  from { opacity: 0.18; transform: rotate(-12deg) scale(0.44); }
  to { opacity: 0.52; transform: rotate(16deg) scale(0.64); }
}

.selection-marquee.is-ten {
  border: 1.5px solid rgba(255, 118, 149, 0.84);
  background:
    radial-gradient(circle at var(--syrup-x, 18%) var(--syrup-y, 10%), rgba(255,255,255,0.78) 0 5%, transparent 20%),
    radial-gradient(circle at 82% 90%, rgba(255,215,105,0.25), transparent 43%),
    linear-gradient(145deg, rgba(255,244,230,0.38), rgba(255,121,154,0.25) 50%, rgba(255,214,131,0.19));
  box-shadow:
    0 0 13px rgba(255,118,149,0.22),
    0 5px 12px rgba(222,91,120,0.12),
    inset 0 -10px 19px rgba(255,121,154,0.1),
    inset 0 5px 10px rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,211,105,0.3);
}

.selection-marquee.is-bursting {
  animation: selection-success-pulse 225ms cubic-bezier(.2,.85,.3,1) both;
}

@keyframes selection-success-pulse {
  0% { opacity: 1; transform: scale(1); }
  38% { opacity: 1; transform: scale(0.975); }
  72% { opacity: 0.95; transform: scale(1.028); }
  100% { opacity: 0; transform: scale(1.055); }
}

.selection-marquee.is-fail {
  border-color: #a39da3;
  background: rgba(115,109,115,0.04);
}

.sum-bubble {
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 70px;
  height: 31px;
  padding: 0 11px;
  border: 1.5px solid rgba(243,122,145,0.72);
  border-radius: 14px;
  background: rgba(255,248,249,0.97);
  box-shadow: 0 4px 10px rgba(216,78,106,0.16), inset 0 1px 0 white;
  color: #aa6575;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) scale(0.92);
  will-change: left, top, transform;
  transition: left 16ms linear, top 16ms linear, opacity 38ms ease, transform 48ms cubic-bezier(.2,.9,.3,1.16), background 42ms ease;
}

.sum-bubble span { font-size: 14px; font-weight: 850; }
.sum-bubble strong { min-width: 24px; color: var(--coral-deep); font-family: var(--font-display); font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
.sum-bubble.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sum-bubble.is-ten { border-color: rgba(255,111,143,0.72); background: rgba(255,247,228,0.98); color: #bd6576; animation: sum-perfect 260ms cubic-bezier(.2,.9,.3,1.18) both; box-shadow: 0 4px 11px rgba(216,78,106,0.16), 0 0 13px rgba(255,209,91,0.22), inset 0 1px 0 white; }
.sum-bubble.is-ten strong { color: #ef5f82; }

@keyframes sum-perfect {
  0% { transform: translate(-50%, 2px) scale(0.94); }
  55% { transform: translate(-50%, -2px) scale(1.1); }
  100% { transform: translate(-50%, -1px) scale(1.055); }
}

.tile.is-success {
  z-index: 5;
  box-shadow:
    inset 0 0 0 2px rgba(255, 119, 150, 0.58),
    0 0 10px rgba(255, 197, 114, 0.3);
  filter: brightness(1.06) saturate(1.06);
  animation: tile-success 230ms var(--pop-delay, 0ms) cubic-bezier(.2,.9,.3,1) both;
}

@keyframes tile-success {
  0% { transform: scale(0.97); opacity: 1; }
  35% { transform: translateY(1px) scale(0.96, 0.94); opacity: 0.98; }
  72% { transform: translateY(-2px) scale(1.03); opacity: 0.95; }
  100% { transform: translateY(-2px) scale(0.84); opacity: 0; }
}

.tile.is-fail {
  animation: tile-fail 135ms ease both;
  box-shadow: inset 0 0 0 2px rgba(150, 126, 138, 0.42);
  filter: saturate(0.66) brightness(0.98);
}

@keyframes tile-fail {
  20% { transform: translateX(-1px) rotate(-0.15deg); }
  48% { transform: translateX(1px) rotate(0.15deg); }
  74% { transform: translateX(-0.4px); }
  100% { transform: none; }
}

.tile.is-hint {
  z-index: 5;
  box-shadow:
    inset 0 0 0 2px rgba(104, 211, 191, 0.7),
    inset 0 0 18px rgba(194, 250, 239, 0.32),
    0 0 0 4px rgba(255,255,255,0.68),
    0 0 18px rgba(86, 200, 183, 0.42);
  filter: brightness(1.15) saturate(1.1);
}

.tile.is-hint::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 7%;
  right: 7%;
  width: 27%;
  aspect-ratio: 1;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 115, 143, 0.5));
  pointer-events: none;
  animation: hint-star-pop 520ms ease-in-out 2 alternate;
}

.tile.is-tutorial::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 5%;
  right: 5%;
  width: 28%;
  aspect-ratio: 1;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  pointer-events: none;
  animation: tutorial-twinkle 720ms ease-in-out infinite alternate;
}

.tile.is-tutorial {
  z-index: 5;
  box-shadow:
    inset 0 0 0 2px rgba(255, 111, 143, 0.62),
    0 0 0 4px rgba(255,255,255,0.74),
    0 0 18px rgba(255, 110, 142, 0.34);
}

.tile.is-hint { animation: tile-hint 450ms ease-in-out 3; }
.tile.is-tutorial { animation: tutorial-tile 760ms ease-in-out infinite alternate; }

.board.is-hinting .tile:not(.is-hint),
.board.is-tutorial-active .tile:not(.is-tutorial) {
  opacity: 0.58;
  filter: brightness(0.91) saturate(0.58);
  transition: opacity 150ms ease, filter 150ms ease;
}

.board.is-hinting .tile.is-hint,
.board.is-tutorial-active .tile.is-tutorial {
  opacity: 1;
  filter: brightness(1.12) saturate(1.08);
}

.hint-region {
  position: absolute;
  z-index: 7;
  border: 2.5px solid rgba(111, 215, 196, 0.82);
  border-radius: 17px;
  background: rgba(225, 255, 248, 0.13);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.68),
    0 0 22px rgba(75, 195, 177, 0.34),
    inset 0 0 16px rgba(255,255,255,0.42);
  pointer-events: none;
  animation: hint-region-pulse 1800ms cubic-bezier(.18,.78,.24,1) both;
}

.hint-region span {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -15px;
  min-width: 76px;
  padding: 4px 8px 3px;
  border-radius: 99px;
  background: #ff7ba0;
  box-shadow: 0 3px 7px rgba(190,74,104,0.18), inset 0 1px 0 rgba(255,255,255,0.72);
  color: white;
  font-family: var(--font-display);
  font-size: 14px;
  text-align: center;
  transform: translateX(-50%);
}

.hint-region i {
  position: absolute;
  width: 18px;
  height: 18px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(91,204,184,0.64));
  animation: hint-corner-spark 520ms ease-in-out infinite alternate;
}

.hint-region i:nth-of-type(1) { left: -8px; top: -7px; }
.hint-region i:nth-of-type(2) { right: -8px; top: -7px; animation-delay: -180ms; }
.hint-region i:nth-of-type(3) { left: -8px; bottom: -7px; animation-delay: -310ms; }
.hint-region i:nth-of-type(4) { right: -8px; bottom: -7px; animation-delay: -420ms; }

@keyframes hint-region-pulse {
  0% { opacity: 0; transform: scale(0.94); }
  16% { opacity: 1; transform: scale(1.025); }
  40%, 70% { opacity: 1; transform: scale(1); }
  86% { opacity: 0.92; transform: scale(1.018); }
  100% { opacity: 0; transform: scale(1.035); }
}

@keyframes hint-corner-spark {
  from { opacity: 0.4; transform: rotate(-16deg) scale(0.55); }
  to { opacity: 1; transform: rotate(16deg) scale(1.08); }
}

@keyframes tile-hint {
  50% { transform: scale(1.025); filter: brightness(1.1) saturate(1.06); }
}

@keyframes hint-star-pop {
  from { opacity: 0.28; transform: rotate(-16deg) scale(0.55); }
  to { opacity: 1; transform: rotate(14deg) scale(1); }
}

@keyframes tutorial-tile {
  to { filter: brightness(1.1) saturate(1.06); transform: scale(1.02); }
}

@keyframes tutorial-twinkle {
  from { opacity: 0.3; transform: rotate(-12deg) scale(0.58); }
  to { opacity: 1; transform: rotate(14deg) scale(0.94); }
}

.board.is-shuffling-out .tile {
  animation: shuffle-scatter-out 430ms var(--shuffle-delay, 0ms) cubic-bezier(.28,.04,.62,.32) both;
}

.board.is-shuffling-in .tile {
  animation: shuffle-scatter-in 430ms var(--shuffle-delay, 0ms) cubic-bezier(.16,.82,.26,1.16) both;
}

@keyframes shuffle-scatter-out {
  0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); filter: brightness(1); }
  54% { opacity: 0.9; transform: translate(var(--shuffle-mid-x), var(--shuffle-mid-y)) rotate(var(--shuffle-mid-rotate)) scale(0.9); filter: brightness(1.12) saturate(1.15); }
  100% { opacity: 0; transform: translate(var(--shuffle-x), var(--shuffle-y)) rotate(var(--shuffle-rotate)) scale(0.62); filter: brightness(1.18) saturate(1.2); }
}

@keyframes shuffle-scatter-in {
  0% { opacity: 0; transform: translate(calc(0px - var(--shuffle-x)), calc(0px - var(--shuffle-y))) rotate(calc(0deg - var(--shuffle-rotate))) scale(0.62); filter: brightness(1.18) saturate(1.2); }
  54% { opacity: 1; transform: translate(0,0) rotate(0) scale(1.045); filter: brightness(1.1) saturate(1.12); }
  76% { transform: scale(0.98); }
  100% { opacity: 1; transform: none; filter: none; }
}

.shuffle-fx {
  position: absolute;
  z-index: 15;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(224,255,248,0.26), rgba(255,244,209,0.08) 34%, transparent 68%);
  pointer-events: none;
}

.shuffle-fx::before,
.shuffle-fx::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 3px solid rgba(116, 225, 207, 0.54);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.3);
  animation: shuffle-ring 760ms ease-out both;
}

.shuffle-fx::before { width: 76px; height: 76px; }
.shuffle-fx::after { width: 112px; height: 112px; animation-delay: 110ms; }

.shuffle-fx img {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: clamp(52px, 17%, 70px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 11px;
  border: 2px solid rgba(255,255,255,0.88);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,255,251,0.98), rgba(113,224,204,0.9) 70%, rgba(79,190,177,0.42));
  box-shadow: 0 0 0 8px rgba(111,224,204,0.13), 0 0 25px rgba(64,187,175,0.48);
  animation: shuffle-core 820ms cubic-bezier(.18,.82,.26,1.12) both;
}

.shuffle-fx i {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 72px;
  background: linear-gradient(#fff7a8, #ffd561 45%, #65d9c4);
  clip-path: polygon(58% 0, 100% 0, 66% 37%, 100% 37%, 22% 100%, 43% 54%, 8% 54%);
  filter: drop-shadow(0 0 6px rgba(255,219,81,0.72));
  opacity: 0;
  transform-origin: 50% 0;
  animation: shuffle-lightning 700ms ease-out both;
}

.shuffle-fx i:nth-of-type(1) { transform: translate(-50%,-50%) rotate(24deg) translateY(-74px); }
.shuffle-fx i:nth-of-type(2) { transform: translate(-50%,-50%) rotate(146deg) translateY(-72px); animation-delay: 80ms; }
.shuffle-fx i:nth-of-type(3) { transform: translate(-50%,-50%) rotate(268deg) translateY(-68px); animation-delay: 150ms; }

.shuffle-fx b {
  --shuffle-star-x: 0px;
  --shuffle-star-y: 0px;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,213,78,0.66));
  animation: shuffle-star-burst 760ms ease-out both;
}

.shuffle-fx b:nth-of-type(1) { --shuffle-star-x: -86px; --shuffle-star-y: -62px; }
.shuffle-fx b:nth-of-type(2) { --shuffle-star-x: 88px; --shuffle-star-y: -48px; animation-delay: 55ms; }
.shuffle-fx b:nth-of-type(3) { --shuffle-star-x: -74px; --shuffle-star-y: 72px; animation-delay: 105ms; }
.shuffle-fx b:nth-of-type(4) { --shuffle-star-x: 78px; --shuffle-star-y: 66px; animation-delay: 145ms; }

.shuffle-curve {
  --curve-angle: -24deg;
  --curve-radius: 72px;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: var(--curve-radius);
  height: calc(var(--curve-radius) * 0.58);
  border: 3px solid transparent;
  border-top-color: rgba(106, 222, 202, 0.72);
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.82));
  transform: translate(-50%,-50%) rotate(var(--curve-angle)) scale(0.55);
  animation: shuffle-curve-sweep 760ms ease-out both;
}

.shuffle-curve:nth-of-type(1) { --curve-angle: -18deg; --curve-radius: 92px; }
.shuffle-curve:nth-of-type(2) { --curve-angle: 54deg; --curve-radius: 104px; animation-delay: 45ms; }
.shuffle-curve:nth-of-type(3) { --curve-angle: 126deg; --curve-radius: 88px; animation-delay: 90ms; }
.shuffle-curve:nth-of-type(4) { --curve-angle: 198deg; --curve-radius: 110px; animation-delay: 120ms; }
.shuffle-curve:nth-of-type(5) { --curve-angle: 272deg; --curve-radius: 82px; animation-delay: 155ms; }

.shuffle-paw {
  --paw-x: -92px;
  --paw-y: -46px;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url("../assets/decor/paw.webp") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(85, 194, 177, 0.44));
  animation: shuffle-paw-pop 820ms ease-out both;
}

.shuffle-paw:nth-of-type(1) { --paw-x: -92px; --paw-y: -46px; }
.shuffle-paw:nth-of-type(2) { --paw-x: 94px; --paw-y: -35px; animation-delay: 90ms; }
.shuffle-paw:nth-of-type(3) { --paw-x: 18px; --paw-y: 88px; animation-delay: 170ms; }

@keyframes shuffle-curve-sweep {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--curve-angle)) scale(0.42); }
  28% { opacity: 0.9; }
  72% { opacity: 0.66; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(calc(var(--curve-angle) + 74deg)) scale(1.22); }
}

@keyframes shuffle-paw-pop {
  0%, 14% { opacity: 0; transform: translate(-50%,-50%) scale(0.28) rotate(-18deg); }
  42% { opacity: 0.88; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--paw-x)), calc(-50% + var(--paw-y))) scale(0.92) rotate(28deg); }
}

@keyframes shuffle-star-burst {
  0%, 12% { opacity: 0; transform: translate(-50%,-50%) scale(0.25) rotate(-18deg); }
  34% { opacity: 1; }
  72% { opacity: 0.96; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--shuffle-star-x)), calc(-50% + var(--shuffle-star-y))) scale(1.05) rotate(90deg); }
}

.bomb-fx {
  position: absolute;
  z-index: 18;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.bomb-fx::before,
.bomb-fx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border: 4px solid rgba(255, 128, 102, 0.7);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation: bomb-ring 520ms cubic-bezier(.15,.65,.25,1) both;
}

.bomb-fx::after {
  width: 92px;
  height: 92px;
  border-color: rgba(255, 203, 82, 0.62);
  animation-delay: 55ms;
}

.bomb-fx img {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(175, 76, 54, 0.3));
  animation: bomb-core 560ms cubic-bezier(.16,.8,.25,1.18) both;
}

.bomb-fx i {
  --blast-angle: 0deg;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 11px;
  height: 35px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(#fff9bd, #ffd255 45%, #ff7d75);
  clip-path: polygon(42% 0, 100% 0, 65% 43%, 96% 43%, 20% 100%, 41% 57%, 5% 57%);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 199, 66, 0.72));
  transform-origin: 50% 0;
  animation: bomb-shard 480ms ease-out both;
}

.bomb-fx i:nth-of-type(1) { --blast-angle: 18deg; }
.bomb-fx i:nth-of-type(2) { --blast-angle: 142deg; animation-delay: 35ms; }
.bomb-fx i:nth-of-type(3) { --blast-angle: 264deg; animation-delay: 70ms; }

.tile.is-bombed {
  animation: tile-bomb-pop 430ms var(--blast-delay, 0ms) cubic-bezier(.18,.72,.24,1.08) both !important;
}

.board-frame.bomb-kick { animation: bomb-board-kick 440ms cubic-bezier(.2,.72,.25,1) both; }

.megabomb-fx {
  position: absolute;
  z-index: 20;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.megabomb-fx::before,
.megabomb-fx::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 82px;
  height: 82px;
  border: 5px solid rgba(255,103,88,0.72);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.18);
  animation: megabomb-ring 690ms cubic-bezier(.14,.64,.23,1) both;
}

.megabomb-fx::after {
  width: 132px;
  height: 132px;
  border-color: rgba(255,215,78,0.64);
  animation-delay: 65ms;
}

.megabomb-fx img {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(171,62,47,0.34));
  animation: megabomb-core 720ms cubic-bezier(.14,.76,.22,1.16) both;
}

.megabomb-fx i {
  --mega-angle: 0deg;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 15px;
  height: 46px;
  background: linear-gradient(#fffbd0, #ffd648 40%, #ff766d 75%, #8edcf1);
  clip-path: polygon(48% 0, 100% 0, 66% 42%, 100% 42%, 17% 100%, 39% 57%, 3% 57%);
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255,195,52,0.84));
  transform-origin: 50% 0;
  animation: megabomb-shard 610ms ease-out both;
}

.megabomb-fx i:nth-of-type(1) { --mega-angle: 0deg; }
.megabomb-fx i:nth-of-type(2) { --mega-angle: 72deg; animation-delay: 25ms; }
.megabomb-fx i:nth-of-type(3) { --mega-angle: 144deg; animation-delay: 50ms; }
.megabomb-fx i:nth-of-type(4) { --mega-angle: 216deg; animation-delay: 75ms; }
.megabomb-fx i:nth-of-type(5) { --mega-angle: 288deg; animation-delay: 100ms; }

.tile.is-megabombed {
  animation: tile-megabomb-pop 570ms var(--mega-delay, 0ms) cubic-bezier(.16,.72,.22,1.08) both !important;
}

.board-frame.megabomb-kick {
  animation: megabomb-board-kick 520ms cubic-bezier(.2,.72,.25,1) both;
}

@keyframes bomb-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
}

@keyframes bomb-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-20deg); }
  28% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(8deg); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(0.9) rotate(-5deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55) rotate(18deg); filter: brightness(1.35); }
}

@keyframes bomb-shard {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--blast-angle)) translateY(-22px) scale(0.35); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--blast-angle)) translateY(-76px) scale(0.9); }
}

@keyframes tile-bomb-pop {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  28% { opacity: 1; transform: scale(0.84); filter: brightness(1.18) saturate(1.15); }
  56% { opacity: 1; transform: scale(1.08); filter: brightness(1.35) saturate(1.12); }
  100% { opacity: 0; transform: scale(0.55); filter: brightness(1.5) blur(1px); }
}

/* 폭발의 무게는 보드가 얼마나 걷어차이는가로 읽힌다. 2px에 0.25도로는
   폰에서 아예 안 보였다 - 코드에는 있고 눈에는 없는 연출이었다. 첫 프레임을
   8%로 당겨 세게 치고(9px), 그 뒤로 줄어드는 흔들림을 남긴다. transform만
   쓴다. 실제 비용은 폰에서 확인한다. */
@keyframes bomb-board-kick {
  0% { transform: translate(var(--drag-pull-x), var(--drag-pull-y)) scale(1); }
  8% { transform: translate(calc(var(--drag-pull-x) - 9px), calc(var(--drag-pull-y) + 5px)) rotate(-1deg) scale(1.014); }
  22% { transform: translate(calc(var(--drag-pull-x) + 7px), calc(var(--drag-pull-y) - 4px)) rotate(0.82deg) scale(1.008); }
  38% { transform: translate(calc(var(--drag-pull-x) - 5px), calc(var(--drag-pull-y) + 2px)) rotate(-0.5deg) scale(1.003); }
  56% { transform: translate(calc(var(--drag-pull-x) + 3px), calc(var(--drag-pull-y) - 1px)) rotate(0.26deg); }
  76% { transform: translate(calc(var(--drag-pull-x) - 1.5px), var(--drag-pull-y)) rotate(-0.1deg); }
  100% { transform: translate(var(--drag-pull-x), var(--drag-pull-y)) scale(1); }
}

@keyframes megabomb-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.16); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.42); }
}

@keyframes megabomb-core {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.28) rotate(-22deg); }
  25% { opacity: 1; transform: translate(-50%,-50%) scale(1.18) rotate(7deg); }
  54% { opacity: 1; transform: translate(-50%,-50%) scale(0.93) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.82) rotate(16deg); filter: brightness(1.4); }
}

@keyframes megabomb-shard {
  0%, 12% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--mega-angle)) translateY(-28px) scale(0.28); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--mega-angle)) translateY(-112px) scale(1); }
}

@keyframes tile-megabomb-pop {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  24% { opacity: 1; transform: scale(0.78) rotate(-1deg); filter: brightness(1.22) saturate(1.2); }
  52% { opacity: 1; transform: scale(1.12) rotate(1deg); filter: brightness(1.48) saturate(1.16); }
  100% { opacity: 0; transform: scale(0.38) rotate(4deg); filter: brightness(1.65) blur(1.2px); }
}

@keyframes megabomb-board-kick {
  0%, 100% { transform: translate(var(--drag-pull-x), var(--drag-pull-y)); }
  16% { transform: translate(calc(var(--drag-pull-x) - 3px), calc(var(--drag-pull-y) + 2px)) rotate(-0.4deg); }
  34% { transform: translate(calc(var(--drag-pull-x) + 3px), calc(var(--drag-pull-y) - 2px)) rotate(0.38deg); }
  54% { transform: translate(calc(var(--drag-pull-x) - 2px), calc(var(--drag-pull-y) + 1px)) rotate(-0.22deg); }
  74% { transform: translate(calc(var(--drag-pull-x) + 1px), calc(var(--drag-pull-y) - 1px)); }
}

.clock-flight {
  position: absolute;
  z-index: 34;
  width: 1px;
  height: 1px;
  pointer-events: none;
  animation: clock-flight 620ms cubic-bezier(.22,.72,.22,1) both;
}

.freeze-flight {
  position: absolute;
  z-index: 43;
  width: 1px;
  height: 1px;
  pointer-events: none;
  animation: freeze-flight 570ms cubic-bezier(.2,.72,.22,1) both;
}

.clover-flight {
  position: absolute;
  z-index: 43;
  width: 1px;
  height: 1px;
  pointer-events: none;
  animation: clover-flight 620ms cubic-bezier(.2,.72,.22,1) both;
}

.clover-flight img { position:absolute; left:0; top:0; width:56px; height:56px; object-fit:contain; transform:translate(-50%,-50%); filter:drop-shadow(0 4px 9px rgba(52,145,88,.28)); }
.clover-flight strong { position:absolute; left:25px; top:-13px; padding:4px 8px; border:1px solid rgba(220,255,226,.96); border-radius:999px; background:rgba(248,255,243,.97); box-shadow:0 3px 8px rgba(52,145,88,.16); color:#3c9160; font-family:var(--font-display); font-size:14px; white-space:nowrap; }
.clover-flight i { --clover-spark-x:-26px; --clover-spark-y:-23px; position:absolute; width:10px; height:10px; border-radius:50%; background:#dfffa8; box-shadow:0 0 8px rgba(103,214,127,.78); animation:clover-spark 540ms ease-out both; }
.clover-flight i:nth-of-type(2) { --clover-spark-x:29px; --clover-spark-y:-14px; animation-delay:50ms; }
.clover-flight i:nth-of-type(3) { --clover-spark-x:17px; --clover-spark-y:27px; animation-delay:90ms; }

@keyframes clover-flight {
  0% { opacity:0; transform:translate(0,0) scale(.55) rotate(-12deg); }
  20% { opacity:1; transform:translate(calc(var(--clover-x) * .12),calc(var(--clover-y) * .08 - 12px)) scale(1.1) rotate(5deg); }
  78% { opacity:1; transform:translate(calc(var(--clover-x) * .88),calc(var(--clover-y) * .9 - 7px)) scale(.94) rotate(-2deg); }
  100% { opacity:0; transform:translate(var(--clover-x),var(--clover-y)) scale(.6); }
}

@keyframes clover-spark {
  0% { opacity:0; transform:translate(0,0) scale(.2); }
  30% { opacity:1; }
  100% { opacity:0; transform:translate(var(--clover-spark-x),var(--clover-spark-y)) scale(1); }
}

.freeze-flight img {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 9px rgba(54,135,185,0.28));
}

.freeze-flight strong {
  position: absolute;
  left: 24px;
  top: -13px;
  padding: 4px 8px;
  border: 1px solid rgba(211,249,255,0.96);
  border-radius: 999px;
  background: rgba(243,253,255,0.97);
  box-shadow: 0 3px 8px rgba(48,128,169,0.16);
  color: #3988a8;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.freeze-flight i {
  --freeze-spark-x: -24px;
  --freeze-spark-y: -22px;
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px 50% 2px 50%;
  background: rgba(229,253,255,0.96);
  box-shadow: 0 0 7px rgba(113,218,240,0.8);
  animation: freeze-spark 500ms ease-out both;
  transform: rotate(45deg);
}

.freeze-flight i:nth-of-type(2) { --freeze-spark-x: 27px; --freeze-spark-y: -13px; animation-delay: 45ms; }
.freeze-flight i:nth-of-type(3) { --freeze-spark-x: 18px; --freeze-spark-y: 24px; animation-delay: 80ms; }

@keyframes freeze-flight {
  0% { opacity: 0; transform: translate(0,0) scale(0.58) rotate(-10deg); }
  18% { opacity: 1; transform: translate(calc(var(--freeze-x) * 0.12), calc(var(--freeze-y) * 0.08 - 12px)) scale(1.08) rotate(4deg); }
  78% { opacity: 1; transform: translate(calc(var(--freeze-x) * 0.88), calc(var(--freeze-y) * 0.9 - 7px)) scale(0.92) rotate(-2deg); }
  100% { opacity: 0; transform: translate(var(--freeze-x),var(--freeze-y)) scale(0.55); }
}

@keyframes freeze-spark {
  0% { opacity: 0; transform: translate(0,0) rotate(45deg) scale(0.2); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--freeze-spark-x),var(--freeze-spark-y)) rotate(120deg) scale(1); }
}

.item-collect-flight,
.item-cast-flight {
  position: absolute;
  z-index: 42;
  width: 1px;
  height: 1px;
  pointer-events: none;
  will-change: transform, opacity;
}

.item-collect-flight {
  animation: item-collect-path 510ms cubic-bezier(.2,.72,.22,1) both;
}

.item-cast-flight {
  animation: item-cast-path 310ms cubic-bezier(.2,.72,.24,1) both;
}

.item-collect-flight img,
.item-cast-flight img {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(96,72,50,0.24));
}

.item-collect-flight img { animation: item-collect-icon 510ms ease-out both; }
.item-cast-flight img { animation: item-cast-icon 310ms ease-out both; }
.item-cast-hint img { width: 42px; height: 52px; }
.item-cast-shuffle img { width: 49px; height: 43px; }

.item-collect-flight strong {
  position: absolute;
  z-index: 4;
  left: 18px;
  top: -28px;
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 25px;
  padding: 0 7px;
  border: 2px solid rgba(255,255,255,0.96);
  border-radius: 999px;
  background: #ff6f8e;
  box-shadow: 0 3px 7px rgba(196,72,104,0.24);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  animation: item-collect-label 510ms ease-out both;
}

.item-collect-flight i,
.item-cast-flight i {
  --flight-star-x: 0px;
  --flight-star-y: 0px;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  opacity: 0;
  animation: item-flight-spark 430ms ease-out both;
}

.item-collect-flight i:nth-of-type(1), .item-cast-flight i:nth-of-type(1) { --flight-star-x: -25px; --flight-star-y: -21px; }
.item-collect-flight i:nth-of-type(2), .item-cast-flight i:nth-of-type(2) { --flight-star-x: 24px; --flight-star-y: -14px; animation-delay: 55ms; }
.item-collect-flight i:nth-of-type(3) { --flight-star-x: 17px; --flight-star-y: 18px; animation-delay: 105ms; }

.tile.is-collecting {
  animation: item-source-release 510ms cubic-bezier(.18,.76,.24,1) both !important;
}

.item-button.is-stocked {
  animation: item-button-stocked 520ms cubic-bezier(.18,.82,.24,1.15) both;
}

.item-button.is-stocked b { animation: item-count-pop 480ms 45ms cubic-bezier(.18,.82,.24,1.2) both; }
.item-button.is-casting { animation: item-button-cast 310ms cubic-bezier(.22,.72,.24,1) both; }

@keyframes item-collect-path {
  0% { opacity: 0; transform: translate(0,0) scale(0.7) rotate(-8deg); }
  15% { opacity: 1; transform: translate(0,-7px) scale(1.08) rotate(5deg); }
  58% { opacity: 1; transform: translate(var(--collect-mid-x),var(--collect-mid-y)) scale(0.94) rotate(-7deg); }
  100% { opacity: 0; transform: translate(var(--collect-x),var(--collect-y)) scale(0.48) rotate(5deg); }
}

@keyframes item-cast-path {
  0% { opacity: 0; transform: translate(0,0) scale(0.55) rotate(-10deg); }
  20% { opacity: 1; transform: translate(0,-8px) scale(1.04) rotate(4deg); }
  64% { opacity: 1; transform: translate(var(--cast-mid-x),var(--cast-mid-y)) scale(0.94) rotate(-4deg); }
  100% { opacity: 0; transform: translate(var(--cast-x),var(--cast-y)) scale(0.58) rotate(8deg); }
}

@keyframes item-collect-icon {
  0% { transform: translate(-50%,-50%) scale(0.72); }
  30% { transform: translate(-50%,-50%) scale(1.14); }
  100% { transform: translate(-50%,-50%) scale(0.86); }
}

@keyframes item-cast-icon {
  0% { transform: translate(-50%,-50%) scale(0.68); }
  36% { transform: translate(-50%,-50%) scale(1.13); }
  100% { transform: translate(-50%,-50%) scale(0.92); }
}

@keyframes item-collect-label {
  0%, 16% { opacity: 0; transform: translateY(6px) scale(0.7); }
  36%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-9px) scale(0.88); }
}

@keyframes item-flight-spark {
  0%, 20% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(0); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--flight-star-x)),calc(-50% + var(--flight-star-y))) scale(0.9) rotate(100deg); }
}

@keyframes item-source-release {
  0% { opacity: 1; transform: scale(1); }
  24% { opacity: 1; transform: scale(0.88); filter: brightness(1.18); }
  48% { opacity: 0.9; transform: scale(1.05); filter: brightness(1.28); }
  100% { opacity: 0.38; transform: scale(0.72); filter: brightness(1.18); }
}

@keyframes item-button-stocked {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  38% { transform: translateY(-4px) scale(1.055); filter: brightness(1.08) saturate(1.12); }
  68% { transform: translateY(1px) scale(0.99); }
}

@keyframes item-count-pop {
  0% { transform: scale(0.62) rotate(-10deg); }
  48% { transform: scale(1.25) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes item-button-cast {
  0%, 100% { transform: translateY(0) scale(1); }
  36% { transform: translateY(3px) scale(0.96); filter: brightness(1.04); }
  72% { transform: translateY(-2px) scale(1.025); }
}

.clock-flight img {
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 49px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(44, 131, 158, 0.28));
  transform: translate(-50%, -50%);
}

.clock-flight strong {
  position: absolute;
  left: 23px;
  top: -12px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  background: rgba(240, 255, 250, 0.96);
  box-shadow: 0 3px 7px rgba(49, 138, 152, 0.14);
  color: #2f9e91;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

@keyframes clock-flight {
  0% { opacity: 0; transform: translate(0, 0) scale(0.64) rotate(-12deg); }
  18% { opacity: 1; transform: translate(calc(var(--clock-x) * 0.12), calc(var(--clock-y) * 0.08 - 14px)) scale(1.08) rotate(5deg); }
  78% { opacity: 1; transform: translate(calc(var(--clock-x) * 0.88), calc(var(--clock-y) * 0.9 - 8px)) scale(0.9) rotate(-3deg); }
  100% { opacity: 0; transform: translate(var(--clock-x), var(--clock-y)) scale(0.55) rotate(0); }
}

@keyframes shuffle-core {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-55deg) scale(0.42); }
  25% { opacity: 1; transform: translate(-50%,-50%) rotate(12deg) scale(1.08); }
  62% { opacity: 1; transform: translate(-50%,-50%) rotate(175deg) scale(0.94); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(310deg) scale(0.66); }
}

@keyframes shuffle-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.24); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
}

@keyframes shuffle-lightning {
  0%, 18% { opacity: 0; }
  28%, 48% { opacity: 1; }
  55% { opacity: 0.25; }
  66% { opacity: 0.95; }
  100% { opacity: 0; }
}

.success-glint {
  position: absolute;
  z-index: 10;
  width: 7px;
  height: 7px;
  border-radius: 2px 50% 2px 50%;
  background: var(--glint-color);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.72), 0 0 7px rgba(255,255,255,0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.35);
  animation: glint-fly 430ms var(--glint-delay) cubic-bezier(.16,.72,.28,1) both;
}

@keyframes glint-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.25); }
  20% { opacity: 1; }
  64% { opacity: 0.92; transform: translate(calc(-50% + var(--glint-mid-x)), calc(-50% + var(--glint-mid-y))) rotate(135deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--glint-x)), calc(-50% + var(--glint-y))) rotate(190deg) scale(0.35); }
}

.success-particle {
  position: absolute;
  z-index: 10;
  width: 20px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
  animation: particle-fly 480ms ease-out both;
}

.success-particle.particle-1 { --particle-x: -44px; --particle-y: -46px; }
.success-particle.particle-2 { --particle-x: 38px; --particle-y: -36px; animation-delay: 25ms; }
.success-particle.particle-3 { --particle-x: 8px; --particle-y: -58px; animation-delay: 42ms; }
.success-particle.particle-4 { --particle-x: -52px; --particle-y: -10px; width: 17px; height: 17px; animation-delay: 58ms; }
.success-particle.particle-5 { --particle-x: 52px; --particle-y: -8px; width: 15px; height: 15px; animation-delay: 72ms; }

@keyframes particle-fly {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.45) rotate(0); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(0.9) rotate(55deg); }
}

.success-number-fragment {
  position: absolute;
  z-index: 10;
  color: #ef6c88;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 1px 0 white, 0 2px 5px rgba(209, 77, 106, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.58);
  animation: success-number-fragment 440ms var(--fragment-delay, 0ms) cubic-bezier(.16,.72,.28,1) both;
}

@keyframes success-number-fragment {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.58) rotate(0); }
  24% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.02) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fragment-x)), calc(-50% + var(--fragment-y))) scale(0.72) rotate(var(--fragment-rotate)); }
}

.score-burst {
  position: absolute;
  z-index: 11;
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 2px white, 0 4px 8px rgba(224,68,101,0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -30%);
}

.score-burst strong {
  display: block;
  font-size: clamp(18px, 5.5vw, 23px);
  font-weight: 400;
  line-height: 1;
}

.score-burst span {
  display: block;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 251, 236, 0.92);
  color: #8b675f;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  text-shadow: none;
}

.score-burst.is-visible { animation: score-fly 730ms cubic-bezier(.18,.75,.3,1) both; }

.score-burst[data-level="3"] strong { color: #df8a31; transform: scale(1.04); }
.score-burst[data-level="5"] strong { color: #2fa38f; font-size: clamp(20px, 6.2vw, 26px); }
.score-burst[data-level="8"] strong {
  color: var(--coral-deep);
  font-size: clamp(22px, 6.8vw, 29px);
  text-shadow: 0 2px white, 0 0 12px rgba(255, 104, 140, 0.32);
}

/* NICE ------------------------------------------------------------------
   The four-cell step below WOW. It stays inside the score pop's own footprint
   — a small tag under the number, at the clear, with a short punch — so the
   five-cell WOW keeps the only screen-stopping card and fanfare. */
.score-burst em {
  display: block;
  margin: 3px auto 0;
  width: fit-content;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(90, 178, 160, .3);
  background: rgba(240, 255, 250, .95);
  color: #2f9c8a;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: .04em;
  text-shadow: none;
}

.score-burst[data-nice="true"] strong {
  color: #2f9c8a;
  font-size: clamp(20px, 6vw, 25px);
  text-shadow: 0 2px white, 0 0 10px rgba(89, 205, 184, .34);
}

.score-burst[data-nice="true"].is-visible em { animation: nice-tag-pop 420ms cubic-bezier(.2, .8, .3, 1.05) both; }

@keyframes nice-tag-pop {
  0% { opacity: 0; transform: scale(.72); }
  45% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .score-burst[data-nice="true"].is-visible em { animation: none; }
}

.score-burst[data-wide="true"] strong {
  color: #e57a38;
  font-size: clamp(23px, 7vw, 30px);
  text-shadow: 0 2px white, 0 0 12px rgba(255, 194, 83, 0.58), 0 0 22px rgba(255, 111, 145, 0.28);
}

.score-burst[data-wide="true"] span {
  border: 1px solid rgba(244, 174, 65, 0.28);
  background: rgba(255, 251, 224, 0.96);
  color: #a25e38;
}

.score-burst[data-item="bomb"] strong {
  color: #ef715f;
  font-size: clamp(21px, 6.4vw, 27px);
  text-shadow: 0 2px white, 0 0 12px rgba(255, 163, 83, 0.38);
}

.score-burst[data-item="megabomb"] strong {
  color: #e75559;
  font-size: clamp(24px, 7.2vw, 31px);
  text-shadow: 0 2px white, 0 0 15px rgba(255,104,81,0.48), 0 0 24px rgba(255,210,69,0.28);
}

.cat-bonus-pop {
  position: absolute;
  z-index: 16;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 116px;
  padding: 5px 10px 5px 5px;
  border: 1.5px solid rgba(255,255,255,0.96);
  border-radius: 18px;
  background: rgba(255, 250, 224, 0.97);
  box-shadow: 0 5px 13px rgba(188,111,76,0.2), inset 0 -2px 0 rgba(235,177,88,0.12);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: cat-bonus-pop 860ms cubic-bezier(.16,.82,.24,1.12) both;
}

.cat-bonus-pop img {
  width: 34px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}

.cat-bonus-pop div { display: grid; justify-items: start; line-height: 1; }
.cat-bonus-pop span {
  color: #9c745c;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.cat-bonus-pop strong {
  margin-top: 2px;
  color: #e4617d;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
}

.cat-bonus-pop i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px 50% 2px 50%;
  background: #ffd76f;
  opacity: 0;
  transform: translate(-50%,-50%) rotate(45deg);
  animation: cat-bonus-spark 650ms ease-out both;
}
.cat-bonus-pop i:nth-of-type(1) { --cat-spark-x: -52px; --cat-spark-y: -35px; }
.cat-bonus-pop i:nth-of-type(2) { --cat-spark-x: 48px; --cat-spark-y: -29px; animation-delay: 55ms; }
.cat-bonus-pop i:nth-of-type(3) { --cat-spark-x: 42px; --cat-spark-y: 23px; animation-delay: 100ms; }

@keyframes cat-bonus-pop {
  0% { opacity: 0; transform: translate(-50%, -8%) scale(0.6); }
  24% { opacity: 1; transform: translate(-50%, -56%) scale(1.1); }
  62% { opacity: 1; transform: translate(-50%, -72%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(0.94); }
}

@keyframes cat-bonus-spark {
  0%, 18% { opacity: 0; transform: translate(-50%,-50%) rotate(25deg) scale(0.35); }
  42% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cat-spark-x)), calc(-50% + var(--cat-spark-y))) rotate(150deg) scale(0.9); }
}

@keyframes score-fly {
  0% { opacity: 0; transform: translate(-50%, 5%) scale(0.76); }
  18% { opacity: 1; transform: translate(-50%, -28%) scale(1.08); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -118%) scale(0.98); }
}

.combo-celebration {
  --combo-accent: #f2b845;
  --combo-soft: rgba(255, 231, 143, 0.94);
  --combo-ring-soft: rgba(242, 184, 69, 0.14);
  --combo-shadow: rgba(218, 145, 37, 0.24);
  --combo-text: #a97027;
  --combo-number: #dc7a38;
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 42%;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 136px;
  padding: 6px 11px 7px;
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,254,241,0.98), var(--combo-soft));
  box-shadow: 0 0 0 7px var(--combo-ring-soft), 0 7px 18px var(--combo-shadow), inset 0 2px 0 white;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-35%) scale(0.7);
}

.combo-celebration[data-level="5"] {
  --combo-accent: #ff7798;
  --combo-soft: rgba(255, 233, 213, 0.96);
  --combo-ring-soft: rgba(255, 190, 79, 0.15);
  --combo-shadow: rgba(221, 92, 119, 0.23);
  --combo-text: #c96b58;
  --combo-number: #eb5f82;
}

.combo-celebration[data-level="8"] {
  --combo-accent: #ff6f91;
  --combo-soft: rgba(255, 218, 232, 0.97);
  --combo-ring-soft: rgba(255, 103, 140, 0.15);
  --combo-shadow: rgba(218, 67, 105, 0.27);
  --combo-text: #d85778;
  --combo-number: #e44e73;
}

.combo-celebration > img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px var(--combo-shadow));
}

.combo-celebration > div {
  display: grid;
  justify-items: center;
  line-height: 1;
}

.combo-celebration small {
  margin-bottom: 2px;
  color: var(--combo-text);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.combo-celebration strong {
  color: #536379;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
}

.combo-celebration b {
  color: var(--combo-number);
  font-size: 21px;
  font-weight: 400;
}

.combo-celebration.is-visible { animation: combo-celebration-pop 700ms cubic-bezier(.16,.82,.24,1.16) both; }
.combo-celebration[data-level="5"].is-visible { animation-duration: 760ms; }
.combo-celebration[data-level="8"].is-visible { animation-duration: 820ms; }
.combo-celebration.is-visible > img { animation: combo-celebration-star 480ms ease-out both; }
.combo-celebration.is-visible > img:last-child { animation-delay: 55ms; }

.combo-confetti {
  position: absolute;
  z-index: 13;
  left: 50%;
  top: 45%;
  width: var(--combo-size, 17px);
  height: var(--combo-size, 17px);
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(111, 82, 90, 0.12));
  animation: combo-confetti-fly 760ms var(--combo-delay, 0ms) cubic-bezier(.16,.72,.28,1) both;
}

@keyframes combo-confetti-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0); }
  18% { opacity: 1; }
  72% { opacity: 0.96; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--combo-x)), calc(-50% + var(--combo-y))) scale(1) rotate(var(--combo-rotate)); }
}

.board-frame.combo-celebrating::after {
  content: "";
  position: absolute;
  z-index: 13;
  inset: -5px;
  border: 3px solid rgba(245, 191, 73, 0.58);
  border-radius: 23px;
  box-shadow: 0 0 15px rgba(245, 191, 73, 0.32), inset 0 0 13px rgba(255, 229, 137, 0.15);
  opacity: 0;
  pointer-events: none;
  animation: combo-board-ring 680ms ease-out both;
}

.board-frame[data-combo-celebration="5"]::after {
  border-color: rgba(80, 200, 176, 0.6);
  box-shadow: 0 0 18px rgba(80, 200, 176, 0.34), inset 0 0 15px rgba(157, 242, 223, 0.18);
}

.board-frame[data-combo-celebration="8"]::after {
  border-color: rgba(255, 103, 140, 0.65);
  box-shadow: 0 0 21px rgba(255, 103, 140, 0.38), inset 0 0 17px rgba(137, 221, 255, 0.2);
  animation-duration: 800ms;
}

@keyframes combo-celebration-pop {
  0% { opacity: 0; transform: translate(-50%,-32%) scale(0.68) rotate(-2deg); }
  22% { opacity: 1; transform: translate(-50%,-52%) scale(1.08) rotate(1deg); }
  58% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  82% { opacity: 0.94; transform: translate(-50%,-54%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%,-68%) scale(0.94); }
}

@keyframes combo-celebration-star {
  0% { opacity: 0; transform: rotate(-28deg) scale(0.32); }
  56% { opacity: 1; transform: rotate(14deg) scale(1.2); }
  100% { opacity: 0.76; transform: rotate(0) scale(1); }
}

@keyframes combo-board-ring {
  0% { opacity: 0; transform: scale(0.97); }
  26% { opacity: 1; transform: scale(1.012); }
  100% { opacity: 0; transform: scale(1.035); }
}

.round-clear {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 47%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 14px;
  background: rgba(255,251,230,0.9);
  box-shadow: 0 4px 12px rgba(191,131,42,0.15);
  color: #db7549;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -42%) scale(0.82);
}

.round-clear img { width: 18px; height: 18px; object-fit: contain; }
.round-clear strong { font-size: clamp(13px, 4.2vw, 17px); white-space: nowrap; }
.round-clear.is-visible { animation: clear-pop 540ms cubic-bezier(.2,.9,.25,1.15) both; }

@keyframes clear-pop {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(0.78); }
  26% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(0.96); }
}

.board-frame.is-round-leaving,
.board-frame.is-round-arriving {
  pointer-events: none;
}

.board-frame.is-round-leaving .tile {
  animation: round-tile-out 210ms var(--round-delay, 0ms) cubic-bezier(.45,.04,.76,.32) both;
}

.board-frame.is-round-arriving .tile {
  animation: round-tile-in 560ms var(--round-delay, 0ms) cubic-bezier(.16,.78,.24,1.12) both;
}

@keyframes round-tile-out {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: translateY(3px) scale(0.88); filter: brightness(1.04) saturate(0.9); }
}

@keyframes round-tile-in {
  0% { opacity: 0; transform: translateY(-4px) scale(0.86); filter: brightness(1.12) saturate(0.9); }
  42% { opacity: 1; transform: translateY(0px) scale(1.02); filter: brightness(1.04); }
  76% { transform: scale(0.995); }
  100% { opacity: 1; transform: none; filter: none; }
}

.board-frame.is-round-arriving::before {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 5px;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(108deg, transparent 28%, rgba(255,255,255,0.18) 38%, rgba(184,255,237,0.5) 49%, rgba(255,226,237,0.32) 57%, transparent 69%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-42%);
  animation: round-board-sweep 560ms ease-out both;
}

@keyframes round-board-sweep {
  0% { opacity: 0; transform: translateX(-42%); }
  24% { opacity: 0.88; }
  100% { opacity: 0; transform: translateX(42%); }
}

.board-frame.is-round-ready {
  animation: round-board-ready 420ms ease-out both;
}

@keyframes round-board-ready {
  0% { box-shadow: 0 5px 0 rgba(190,131,69,0.18), 0 12px 22px rgba(57,111,136,0.15), 0 0 0 4px rgba(255,253,241,0.44), inset 0 2px 0 #fff; }
  42% { box-shadow: 0 5px 0 rgba(190,131,69,0.14), 0 12px 22px rgba(57,111,136,0.12), 0 0 0 6px rgba(127,214,194,0.22), 0 0 19px rgba(127,214,194,0.2), inset 0 2px 0 #fff; }
  100% { box-shadow: 0 5px 0 rgba(190,131,69,0.18), 0 12px 22px rgba(57,111,136,0.15), 0 0 0 4px rgba(255,253,241,0.44), inset 0 2px 0 #fff; }
}

.tutorial-guide {
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: 0;
  /* opacity: 0 still leaves a rendered box, and the compositor kept a layer
     for it all session. visibility takes the subtree out of rendering
     entirely; it flips after the fade so the fade still plays. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

.tutorial-guide.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms ease, visibility 0s linear 0s;
}

/* The guide is hidden by opacity alone so it can fade, but an opacity-0
   subtree still animates: every frame of the run, long after the tutorial was
   over, these kept ticking. Nothing here has anything to show while the guide
   is hidden, so the animations come off entirely and go back on with the
   class - the fade is untouched. */
.tutorial-guide:not(.is-visible) .tutorial-focus,
.tutorial-guide:not(.is-visible) .tutorial-focus i,
.tutorial-guide:not(.is-visible) .tutorial-sparkle-trail i {
  animation: none;
}

.tutorial-focus {
  position: absolute;
  z-index: 1;
  border: 3px solid rgba(255, 109, 143, 0.78);
  border-radius: 18px;
  background: rgba(255, 239, 244, 0.12);
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.72),
    0 0 22px rgba(255,97,136,0.36),
    inset 0 0 16px rgba(255,255,255,0.38);
  animation: tutorial-focus-breathe 900ms ease-in-out infinite alternate;
}

.tutorial-focus i {
  position: absolute;
  width: 20px;
  height: 20px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255,134,158,0.62));
  animation: tutorial-twinkle 720ms ease-in-out infinite alternate;
}

.tutorial-focus i:first-child { left: -10px; top: -10px; }
.tutorial-focus i:last-child { right: -10px; bottom: -10px; animation-delay: -360ms; }

@keyframes tutorial-focus-breathe {
  from { transform: scale(0.985); filter: brightness(1); }
  to { transform: scale(1.018); filter: brightness(1.08); }
}

.tutorial-sparkle-trail {
  position: absolute;
  z-index: 2;
  height: 1px;
  transform-origin: left center;
  /* so the sparkles can travel the trail's width from a transform: 100cqw is
     this box's inline size. Animating `left` instead put a full layout on
     every frame the trail existed. */
  container-type: inline-size;
}

.tutorial-sparkle-trail i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  animation: tutorial-sparkle-swipe 1.25s ease-in-out infinite;
}

.tutorial-sparkle-trail i:nth-child(2) {
  width: 12px;
  height: 12px;
  animation-delay: 90ms;
}

.tutorial-sparkle-trail i:nth-child(3) {
  width: 9px;
  height: 9px;
  animation-delay: 180ms;
}

@keyframes tutorial-sparkle-swipe {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(0.3); }
  28% { opacity: 1; }
  76% { opacity: 0.94; }
  100% { opacity: 0; transform: translate(calc(100cqw - 50%), -50%) rotate(72deg) scale(0.92); }
}

.tutorial-guide > span {
  position: absolute;
  z-index: 3;
  min-width: 190px;
  padding: 6px 11px;
  border-radius: 99px;
  background: rgba(255,250,236,0.95);
  box-shadow: 0 3px 9px rgba(91,78,55,0.11);
  color: #a65f6f;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
}

/* Play footer */
.play-footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  align-self: start;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  justify-self: center;
  margin-top: 4px;
  padding: 0 1px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cat-coach {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: center;
  align-self: start;
}

.play-character-stage {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 90px;
  align-self: center;
  transform: translateY(-2px);
}

.play-character-stage img {
  transform-origin: center bottom;
}

.play-character-stage img.is-switching {
  animation: character-switch 230ms cubic-bezier(.2,.85,.3,1.1);
}

@keyframes character-switch {
  0% { opacity: 0.2; transform: translateY(4px) scale(0.96); }
  100% { opacity: 1; transform: none; }
}

.cat-message {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: fit-content;
  max-width: min(100%, 248px);
  min-height: 44px;
  display: grid;
  place-items: center;
  justify-self: start;
  align-self: center;
  margin: 0 0 0 2px;
  padding: 7px 14px 6px;
  border: 1.5px solid #e9cda4;
  border-radius: 18px 18px 18px 10px;
  background: rgba(255,253,243,0.97);
  box-shadow: 0 3px 0 rgba(219,177,111,0.14), 0 7px 13px rgba(92,78,54,0.08), inset 0 1.5px 0 white;
  color: #725849;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.035em;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.cat-message strong {
  color: #e95a78;
  font: inherit;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

.cat-message::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 9px;
  width: 15px;
  height: 14px;
  border: 1.5px solid #e9cda4;
  border-top: 0;
  border-right: 0;
  border-radius: 2px 0 2px 10px;
  background: rgba(255,253,243,0.97);
  transform: skewX(-28deg) rotate(-8deg);
}

.cat-message.is-changing { animation: speech-in 160ms ease-out; }

.cat-message[data-tone="hint"],
.cat-message[data-tone="clover"] {
  border-color: #9edcca;
  background: rgba(247,255,248,0.98);
  color: #48766b;
}

.cat-message[data-tone="hint"]::before,
.cat-message[data-tone="clover"]::before {
  border-color: #9edcca;
  background: rgba(247,255,248,0.98);
}

.cat-message[data-tone="itemDrop"],
.cat-message[data-tone="bombCollected"],
.cat-message[data-tone="clockCollected"],
.cat-message[data-tone="rewardNear"] {
  border-color: #efc56e;
  background: rgba(255,251,226,0.98);
  color: #8a6644;
}

.cat-message[data-tone="itemDrop"]::before,
.cat-message[data-tone="bombCollected"]::before,
.cat-message[data-tone="clockCollected"]::before,
.cat-message[data-tone="rewardNear"]::before {
  border-color: #efc56e;
  background: rgba(255,251,226,0.98);
}

.cat-message[data-tone="lowTime"] {
  border-color: #f19aab;
  background: rgba(255,246,245,0.98);
  color: #a55768;
  animation: speech-urgent 640ms ease-in-out 2 alternate;
}

.cat-message[data-tone="lowTime"]::before {
  border-color: #f19aab;
  background: rgba(255,246,245,0.98);
}

.cat-message[data-tone^="combo"],
.cat-message[data-tone="firstSuccess"],
.cat-message[data-tone="catBonus"] {
  border-color: #efb1bf;
  background: rgba(255,248,246,0.98);
}

.cat-message[data-tone^="combo"]::before,
.cat-message[data-tone="firstSuccess"]::before,
.cat-message[data-tone="catBonus"]::before {
  border-color: #efb1bf;
  background: rgba(255,248,246,0.98);
}

@keyframes speech-urgent {
  from { transform: translateY(0); filter: brightness(1); }
  to { transform: translateY(-1px); filter: brightness(1.035); }
}
@keyframes speech-in {
  from { opacity: 0.35; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.item-actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 372px);
  max-width: 100%;
  gap: clamp(5px, 1.5vw, 7px);
  margin: 0 auto;
  padding: 8px 8px 10px;
  border: 1.5px solid rgba(229,199,145,0.58);
  border-radius: 23px;
  background: rgba(255,250,238,0.88);
  box-shadow: 0 4px 0 rgba(192,148,86,0.11), 0 9px 17px rgba(70,104,114,0.08), inset 0 1.5px 0 white;
  align-self: start;
  isolation: isolate;
}
.play-footer {
  align-self: stretch;
  height: 100%;
  grid-template-rows: auto minmax(78px,1fr);
  align-content: stretch;
}
.cat-coach { align-self: center; }

.item-button {
  position: relative;
  min-width: 0;
  height: clamp(57px, 17vw, 66px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(31px, 1fr) 18px;
  place-content: center;
  place-items: center;
  row-gap: 0;
  overflow: visible;
  border: 1.5px solid color-mix(in srgb, var(--item-accent, #e8cd94) 48%, #eadab9);
  border-radius: clamp(16px, 4.6vw, 19px);
  background: linear-gradient(180deg, var(--item-top, rgba(255,255,252,0.98)) 0%, var(--item-mid, #fff9ed) 66%, var(--item-bottom, #fff0d4) 100%);
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--item-accent, #d9be85) 34%, #d7c49f),
    0 6px 11px rgba(102,82,57,0.1),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 0 0 1px rgba(255,255,255,0.48);
  color: #6e5d48;
  font-size: clamp(13px, 3.6vw, 15px);
  filter: none;
  transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
}

.item-button::before {
  content: "";
  position: absolute;
  inset: 4px 5px auto;
  height: 22%;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0));
  pointer-events: none;
}

.hint-button {
  --item-accent: #efbd4f;
  --item-top: #fffef5;
  --item-mid: #fff8d9;
  --item-bottom: #ffe9ae;
  color: #695642;
}

.shuffle-button {
  --item-accent: #63cbb6;
  --item-top: #f8fffc;
  --item-mid: #e4fbf4;
  --item-bottom: #c5f1e5;
  color: #3d746c;
}

.bomb-button {
  --item-accent: #ef879e;
  --item-top: #fff9fb;
  --item-mid: #ffe8ed;
  --item-bottom: #ffcdd9;
  color: #9b584b;
}

.clock-button {
  --item-accent: #75bfe0;
  --item-top: #f8fdff;
  --item-mid: #e6f7ff;
  --item-bottom: #ccecff;
  color: #4d7890;
}

.item-button:active {
  transform: translateY(3px) scale(0.985);
  box-shadow: 0 1px 0 rgba(129,100,67,0.28), 0 3px 7px rgba(86,73,58,0.1), inset 0 2px 0 rgba(255,255,255,0.68);
  filter: brightness(0.99);
}

.item-button:focus-visible {
  outline-width: 2px;
  outline-offset: 1px;
}

.hint-button:focus-visible { outline-color: rgba(231, 179, 59, 0.55); }
.shuffle-button:focus-visible { outline-color: rgba(64, 172, 154, 0.55); }

.item-icon {
  width: clamp(25px, 8vw, 32px);
  height: clamp(27px, 8.4vw, 34px);
  object-fit: contain;
  align-self: end;
  position: relative;
  z-index: 1;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--item-accent, #e4c883) 38%, white);
  border-radius: 11px;
  background: color-mix(in srgb, var(--item-accent, #f2cf70) 16%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  filter: drop-shadow(0 2px 1px rgba(86,67,43,0.1));
}

.shuffle-button .item-icon { width: clamp(28px, 8.8vw, 35px); height: clamp(25px, 7.8vw, 31px); }
.bomb-button .item-icon { width: clamp(27px, 8.2vw, 33px); height: clamp(27px, 8.2vw, 33px); }
.clock-button .item-icon { width: clamp(24px, 7.4vw, 30px); height: clamp(28px, 8.3vw, 34px); }

.item-button > span {
  align-self: start;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.item-button b {
  position: absolute;
  right: -2px;
  top: -3px;
  display: grid;
  place-items: center;
  width: clamp(21px, 6.2vw, 25px);
  height: clamp(21px, 6.2vw, 25px);
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 2px 0 #d95772;
  color: white;
  font-family: var(--font-display);
  font-size: clamp(12px, 3.7vw, 15px);
  font-weight: 400;
}

.item-button.is-depleted {
  filter: grayscale(0.62) saturate(0.42) brightness(0.98);
  opacity: 0.72;
  color: #7f7c76;
  cursor: default;
}

.item-button.is-depleted .item-icon { filter: grayscale(0.9); opacity: 0.58; }
.item-button.is-depleted b { background: #9b9892; box-shadow: none; }
.item-button.is-depleted::after {
  content: "소진";
  position: absolute;
  z-index: 4;
  right: 3px;
  bottom: 3px;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 999px;
  background: rgba(105,102,96,0.88);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Result */
.screen-result {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(13px + var(--safe-top)) 18px calc(10px + var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 17%, rgba(255,255,255,0.78), transparent 33%),
    linear-gradient(rgba(255,253,247,0.7), rgba(255,249,232,0.84)),
    url("../assets/backgrounds/home-bg@2x.webp") center / cover no-repeat;
}

.result-decor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 25px;
}

.result-decor img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.7;
}

.result-decor img:nth-child(2) { width: 25px; height: 25px; }
.result-decor.is-record img { opacity: 1; animation: record-sparkle 820ms ease-in-out infinite alternate; }
.result-decor.is-record img:nth-child(2) { animation-delay: -0.35s; }
@keyframes record-sparkle { to { transform: translateY(-3px) scale(1.1) rotate(6deg); } }

.result-kicker {
  margin: 0 0 7px;
  padding: 3px 13px 2px;
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 999px;
  background: rgba(255, 241, 230, 0.74);
  box-shadow: 0 3px 9px rgba(159, 91, 97, 0.07), inset 0 1px 0 white;
  color: #b16377;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.result-card {
  position: relative;
  width: min(100%, 350px);
  padding: 14px 15px 12px;
  overflow: hidden;
  border: 1.5px solid rgba(226,198,145,0.68);
  border-radius: 27px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,0.94), transparent 38%),
    rgba(255,250,237,0.93);
  box-shadow: 0 5px 0 rgba(194,142,77,0.1), 0 13px 24px rgba(85,99,99,0.1), inset 0 2px 0 white;
  text-align: center;
}

.result-score-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #8b745d;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 850;
}

.result-score-label img { width: 18px; height: 18px; object-fit: contain; }

.final-score {
  display: block;
  margin-top: 1px;
  color: #35445f;
  font-family: var(--font-sans);
  font-size: clamp(52px, 14vw, 60px);
  font-weight: 850;
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
  text-shadow: 0 2px 0 rgba(255,255,255,0.82);
}

.new-record {
  width: fit-content;
  margin: 6px auto 7px;
  padding: 4px 11px 3px;
  border: 1px solid rgba(255,255,255,0.86);
  border-radius: 99px;
  background: linear-gradient(135deg, #fff6b8, #ffd982);
  box-shadow: 0 3px 0 rgba(221,156,57,0.12), 0 5px 10px rgba(235,163,60,0.12);
  color: #e15870;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.score-comparisons {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(231, 203, 153, 0.54);
  border-radius: 13px;
  background: rgba(255, 247, 222, 0.7);
}

.score-comparisons p {
  margin: 0;
  color: #8a7866;
  line-height: 1.3;
}

.score-compare-primary {
  font-size: 13.5px;
  font-weight: 850;
}

.score-compare-secondary {
  padding-top: 4px;
  border-top: 1px solid rgba(222, 198, 155, 0.46);
  color: #9a8978;
  font-size: 11.5px;
  font-weight: 700;
}

.score-comparisons p[data-tone="up"] { color: #32a48f; }
.score-comparisons p[data-tone="same"] { color: #b27b42; }
.score-comparisons p[data-tone="first"] { color: #df617a; }

.result-record-meter {
  --record-progress: 0;
  display: grid;
  gap: 4px;
  margin-top: 7px;
  color: #8f7865;
  font-size: 11px;
  font-weight: 850;
  text-align: left;
}

.result-record-meter > i {
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(221, 186, 129, 0.46);
  border-radius: 99px;
  background: rgba(232, 215, 181, 0.38);
  box-shadow: inset 0 1px 2px rgba(116, 91, 59, 0.08);
}

.result-record-meter b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fd6c2, #ffd06d 58%, #ff7b9b);
  transform: scaleX(0);
  transform-origin: left center;
}

.result-record-meter.is-animating b {
  transform: scaleX(var(--record-progress));
  transition: transform 760ms 180ms cubic-bezier(.18,.78,.24,1);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-top: 9px;
}

.result-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 3px;
  padding: 7px 5px 6px;
  border: 1px solid rgba(222,198,155,0.54);
  border-radius: 14px;
  background: rgba(255,255,250,0.64);
  box-shadow: inset 0 1px 0 white;
}
.result-grid img { grid-row: 1 / 3; width: 18px; height: 18px; object-fit: contain; }
.result-grid span { display: block; color: #917c69; font-size: 11px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.result-grid b { color: var(--coral-deep); font-family: var(--font-sans); font-size: 20px; font-weight: 900; line-height: 1; }
.result-grid b i { font: inherit; font-style: normal; }

.result-cat-row {
  position: relative;
  flex: 0 0 auto;
  min-height: 137px;
  width: min(100%, 350px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 7px 0 8px;
}

.result-character-stage { width: 130px; height: 137px; }
.result-message {
  position: relative;
  min-width: 172px;
  max-width: 205px;
  min-height: 58px;
  padding: 8px 12px 7px;
  border: 1.5px solid #e9cda4;
  border-radius: 18px 18px 18px 10px;
  background: rgba(255,253,243,0.97);
  box-shadow: 0 3px 0 rgba(219,177,111,0.13), 0 7px 13px rgba(90,72,47,0.08);
  color: #6d554b;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.28;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.result-message::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 13px;
  width: 18px;
  height: 18px;
  border-left: 1.5px solid #e9cda4;
  border-bottom: 1.5px solid #e9cda4;
  border-radius: 0 0 0 5px;
  background: rgba(255,253,243,0.97);
  transform: rotate(35deg) skew(8deg,8deg);
}

.result-actions {
  width: min(100%, 350px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.result-actions .btn-primary { grid-column: 1 / -1; min-height: 58px; font-size: 20px; }
.result-share-button,
.result-ranking-button { min-height: 46px; font-size: 15px; }
.result-share-button .button-icon,
.result-ranking-button .button-icon { width: 22px; height: 22px; }
.result-home-button {
  grid-column: 1 / -1;
  width: fit-content;
  min-height: 38px;
  margin: 1px auto 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(255,252,240,0.58);
  color: #6c746f;
  font-size: 17px;
  font-weight: 850;
}

.screen-result[data-result-tone="record"] .result-card {
  border-color: rgba(245,181,79,0.76);
  box-shadow: 0 5px 0 rgba(218,150,48,0.13), 0 13px 25px rgba(222,154,55,0.13), inset 0 2px 0 white;
}

.screen-result[data-result-tone="record"] .final-score { color: #e45972; }
.screen-result[data-result-tone="legend"] .final-score,
.screen-result[data-result-tone="high"] .final-score { color: #3c5478; }

.result-home-button img { width: 24px; height: 23px; object-fit: contain; }

.time-up {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 47%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 210px;
  padding: 10px 18px 9px;
  border: 2px solid rgba(255, 126, 151, 0.76);
  border-radius: 24px;
  background: rgba(255, 250, 231, 0.97);
  box-shadow: 0 0 0 7px rgba(255, 213, 224, 0.22), 0 9px 20px rgba(142, 78, 91, 0.18), inset 0 2px 0 white;
  color: var(--coral-deep);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44%) scale(0.82);
}

.time-up img { width: 24px; height: 24px; object-fit: contain; }
.time-up img:last-child { width: 27px; height: 27px; }
.time-up > div { display: grid; justify-items: center; line-height: 1; }
.time-up small { margin-bottom: 4px; color: #9c806c; font-size: 12px; font-weight: 800; }
.time-up strong { font-family: var(--font-display); font-size: 27px; font-weight: 400; letter-spacing: 0.025em; }
.time-up.is-visible { animation: time-up-pop 1050ms cubic-bezier(.18,.8,.24,1) both; }

.final-second-pop {
  position: absolute;
  z-index: 26;
  left: 50%;
  top: 0;
  color: #ff6f88;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: 2px rgba(255,255,255,0.96);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #dc5872, 0 6px 12px rgba(191,71,97,0.2);
  pointer-events: none;
  animation: final-second-pop 520ms cubic-bezier(.18,.76,.25,1.08) both;
}

.end-score-summary {
  position: absolute;
  z-index: 28;
  left: 50%;
  top: 47%;
  display: grid;
  place-items: center;
  min-width: 222px;
  padding: 12px 24px 13px;
  border: 2px solid rgba(255,255,255,0.94);
  border-radius: 25px;
  background: rgba(255,248,223,0.97);
  box-shadow: 0 0 0 7px rgba(255,218,225,0.22), 0 12px 24px rgba(116,83,77,0.2), inset 0 3px 0 #fff;
  pointer-events: none;
  animation: end-score-summary 780ms cubic-bezier(.18,.78,.24,1.08) both;
}

.end-score-summary small { color: #a47c68; font-size: 11px; font-weight: 950; letter-spacing: 0.12em; }
.end-score-summary strong { color: #3e4b65; font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.04; }
.end-score-summary span { color: #df627c; font-size: 13px; font-weight: 850; }
.end-score-summary.is-record { border-color: rgba(255, 132, 158, 0.92); background: rgba(255, 249, 226, 0.99); }
.end-score-summary.is-record small { color: #e35273; }
.end-score-summary i {
  --end-star-x: -118px;
  --end-star-y: -45px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: url("../assets/decor/star.webp") center / contain no-repeat;
  animation: end-score-star 720ms ease-out both;
}
.end-score-summary i:last-child { --end-star-x: 112px; --end-star-y: 36px; animation-delay: 70ms; }

@keyframes final-second-pop {
  0% { opacity: 0; transform: translate(-50%,-42%) scale(0.46); }
  30% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  68% { opacity: 1; transform: translate(-50%,-50%) scale(0.98); }
  100% { opacity: 0; transform: translate(-50%,-62%) scale(1.16); }
}

@keyframes end-score-summary {
  0% { opacity: 0; transform: translate(-50%,-38%) scale(0.84); }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(1.04); }
  72% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-57%) scale(0.97); }
}

@keyframes end-score-star {
  0%, 16% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(0); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--end-star-x)),calc(-50% + var(--end-star-y))) scale(0.95) rotate(145deg); }
}

.board-frame.is-game-ending .board { animation: board-finish-settle 1050ms ease both; }
.board-frame.is-game-ending .tile:not(.is-empty) { animation: tile-finish-settle 420ms ease both; animation-delay: calc((var(--row, 0) + var(--col, 0)) * 12ms); }

.screen-result.is-entering > * { animation: result-soft-enter 560ms cubic-bezier(.2,.78,.25,1) both; }
.screen-result.is-entering > :nth-child(2) { animation-delay: 30ms; }
.screen-result.is-entering > :nth-child(3) { animation-delay: 85ms; }
.screen-result.is-entering > :nth-child(4) { animation-delay: 190ms; }
.screen-result.is-entering > :nth-child(5) { animation-delay: 285ms; }
.screen-result.is-entering .result-character-stage img { animation: result-cat-celebrate 560ms 230ms cubic-bezier(.18,.82,.2,1.16) both; }
.final-score.is-counting { animation: result-score-count 680ms cubic-bezier(.2,.78,.25,1) both; }

@keyframes time-up-pop {
  0% { opacity: 0; transform: translate(-50%, -38%) scale(0.82); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  30%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.96); }
}

@keyframes board-finish-settle {
  0%, 68% { transform: scale(1); filter: saturate(1); }
  100% { transform: scale(0.985); filter: saturate(0.86) brightness(1.03); }
}

@keyframes tile-finish-settle {
  45% { transform: translateY(1px) scale(0.985); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes result-soft-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-score-count {
  0% { color: #71809b; transform: scale(0.94); }
  70% { color: #34445f; transform: scale(1.035); }
  100% { color: #34445f; transform: scale(1); }
}

@keyframes result-cat-celebrate {
  0% { opacity: 0; transform: translateY(9px) scale(0.93) rotate(-2deg); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.035) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* Overlays */
.overlay {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(63,78,99,0.29);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mini-panel {
  position: relative;
  width: min(100%, 306px);
  padding: 23px 21px 19px;
  border: 2px solid #e9d2a5;
  border-radius: 23px;
  background: #fffaf0;
  box-shadow: 0 7px 0 rgba(80,76,70,0.11), 0 16px 36px rgba(52,67,89,0.22), inset 0 2px 0 white;
  text-align: center;
  animation: panel-in 180ms cubic-bezier(.2,.85,.3,1.2);
}

@keyframes panel-in { from { opacity: 0; transform: translateY(7px) scale(0.95); } }
.mini-panel h2 { margin: 0 0 7px; color: #44516a; font-size: 20px; }
.mini-panel p { margin: 0 0 16px; color: #7d7a7b; font-size: 16px; line-height: 1.5; }
.mini-panel .btn { width: 100%; margin-top: 7px; }
.text-button { margin-top: 13px; padding: 6px 10px; background: transparent; color: #7f7880; font-size: 17px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.pause-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.pause-tool-button {
  position: relative;
  min-height: 48px;
  padding: 29px 4px 5px;
  border: 1px solid rgba(225, 195, 145, 0.76);
  border-radius: 15px;
  background: rgba(255, 250, 238, 0.94);
  box-shadow: 0 2px 0 rgba(157, 120, 71, 0.1), inset 0 1px 0 white;
  color: #75685d;
  font-family: var(--font-display);
  font-size: 14px;
  text-align: center;
}

.pause-tool-button:active { transform: translateY(1px) scale(.985); }
.pause-tool-button i { position: absolute; }
.pause-tool-button.music-button i { left: 50%; top: 12px; margin-left: -4px; transform: translateX(-50%); }
.pause-tool-button.sound-button i { left: 50%; top: 13px; margin-left: -4px; transform: translateX(-50%); }
.pause-tool-button.restart-button i { left: 50%; top: 10px; transform: translateX(-50%) rotate(-28deg); }

.pause-tool-button.restart-button.is-confirming {
  border-color: rgba(239, 111, 135, 0.68);
  background: linear-gradient(180deg, #fff7f7 0%, #ffe0e6 100%);
  color: #b64f66;
  box-shadow: 0 3px 0 rgba(194, 84, 108, 0.18), inset 0 1px 0 #fff;
}

.overlay-close {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(244,234,215,0.74);
}

.overlay-close i::before,
.overlay-close i::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #897b73;
}

.overlay-close i::before { transform: rotate(45deg); }
.overlay-close i::after { transform: rotate(-45deg); }

.setting-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 6px; border-top: 1px solid #eee1c8; font-size: 14px; font-weight: 800; }
.toggle { width: 50px; height: 28px; border-radius: 99px; background: #d5d4d0; color: white; font-size: 11px; font-weight: 950; box-shadow: inset 0 2px 3px rgba(75,75,75,0.14); }
.toggle.is-on { background: var(--mint-deep); }
.toggle:disabled { opacity: .62; cursor: default; }
.music-volume-row { display:flex; align-items:center; justify-content:space-between; padding:12px 6px 5px; border-top:1px solid #eee1c8; color:#665d59; font-size:13px; font-weight:800; }
.music-volume-row b { color:var(--mint-deep); font-size:13px; }
.music-volume { width:100%; height:28px; accent-color:var(--mint-deep); cursor:pointer; }
.mock-trophy { width: 52px; height: 48px; object-fit: contain; margin-bottom: 7px; }
.mock-best { padding: 11px; border-radius: 14px; background: #fff0cc; color: #7d674b; font-size: 13px; font-weight: 800; }
.mock-best strong { margin-left: 5px; color: var(--coral-deep); font-size: 18px; }

.ranking-panel {
  width: min(100%, 334px);
  padding: 18px 17px 15px;
  overflow: hidden;
  border-color: rgba(229, 193, 129, 0.9);
  background:
    radial-gradient(circle at 88% 8%, rgba(145, 221, 215, 0.2), transparent 27%),
    radial-gradient(circle at 8% 22%, rgba(255, 178, 197, 0.16), transparent 25%),
    #fffaf0;
}

.record-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 49px;
  padding-right: 20px;
}

.record-heading img {
  width: 49px;
  height: 45px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(178, 119, 46, 0.13));
}

.record-heading > div { display: grid; justify-items: start; gap: 1px; }
.record-heading span { color: #d08764; font-size: 11px; font-weight: 950; letter-spacing: 0.11em; }
.record-heading h2 { margin: 0; color: #44516a; font-size: 23px; line-height: 1; }
.ranking-panel .record-caption { margin: 3px 0 10px; color: #9a8b7d; font-size: 12px; line-height: 1.25; }

.record-best {
  position: relative;
  min-height: 67px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 12px 12px 9px;
  border: 1.5px solid rgba(236, 191, 102, 0.62);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255,255,249,0.98), rgba(255,238,194,0.92));
  box-shadow: 0 3px 0 rgba(205, 149, 65, 0.1), inset 0 2px 0 white;
}

.record-best::before,
.record-best::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  opacity: 0.72;
}
.record-best::before { left: 18px; top: 13px; }
.record-best::after { right: 17px; bottom: 12px; transform: rotate(30deg) scale(.75); }
.record-best span { align-self: flex-start; margin-top: 2px; color: #92765d; font-size: 11px; font-weight: 900; }
.record-best strong { color: #e95d7b; font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.record-best b { color: #92765d; font-size: 12px; }

.record-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.record-stats > div {
  min-width: 0;
  min-height: 50px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 7px 4px;
  border: 1px solid rgba(230, 210, 171, 0.72);
  border-radius: 14px;
  background: rgba(255,253,244,0.9);
  box-shadow: inset 0 1px 0 white;
}
.record-stats span { color: #97887a; font-size: 11px; font-weight: 850; white-space: nowrap; }
.record-stats strong { overflow: hidden; color: #52627c; font-family: var(--font-sans); font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }

.record-cats-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 7px 0 0;
  color: #97887a;
  font-size: 12px;
  font-weight: 850;
}
.record-cats-line img { width: 15px; height: 15px; object-fit: contain; }
.record-cats-line strong {
  color: #d96474;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Secret garden collection ------------------------------------------------
   The garden panel reuses the records panel's chrome; only the scene, the
   step meter and the tier list are new. */
.home-garden-button {
  grid-column: 1 / -1;
  min-height: 46px;
  gap: 7px;
}
.home-garden-button b {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,236,224,0.9);
  color: #cf7565;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.garden-scene {
  position: relative;
  overflow: hidden;
  height: 132px;
  margin: 4px 0 9px;
  border: 1.5px solid rgba(190,214,178,0.6);
  border-radius: 18px;
  /* Framed on the flower beds at the bottom of the artwork, not its middle:
     the middle holds the illustration's own cat, which sat beside the
     cheering cat below and read as two different cats in one garden. */
  background:
    linear-gradient(rgba(255,252,250,0.14), rgba(255,250,248,0.14)),
    url("../assets/backgrounds/board-secret-garden-v1.webp") center bottom / 150% auto no-repeat;
  box-shadow: inset 0 2px 6px rgba(120,150,110,0.12);
}

.garden-scene-cat {
  position: absolute;
  left: 8px;
  bottom: -6px;
  width: 74px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(120,110,90,0.2));
}

/* Fixed slots keep a returning player's garden recognisable: each unlocked
   friend always lands in the same spot, and the next one fills a gap. */
.garden-decor {
  position: absolute;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(140,110,80,0.22));
  animation: garden-decor-in 420ms cubic-bezier(.18,.82,.24,1.14) both;
}
.garden-decor[data-slot="0"] { right: 20%; bottom: 16%; }
.garden-decor[data-slot="1"] { right: 8%; bottom: 34%; width: 26px; height: 26px; }
.garden-decor[data-slot="2"] { right: 33%; top: 18%; }
.garden-decor[data-slot="3"] { left: 40%; top: 10%; }
.garden-decor[data-slot="4"] { right: 15%; top: 44%; width: 18px; height: 18px; }
.garden-decor[data-slot="5"] { left: 27%; top: 30%; width: 30px; height: 26px; }

@keyframes garden-decor-in {
  0% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.garden-count {
  margin: 0 0 7px;
  color: #7d8a76;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}
.garden-count strong {
  color: #d96474;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.garden-reveal-best {
  margin: -3px 0 8px;
  color: #8b9a84;
  font-size: 11.5px;
  font-weight: 850;
  text-align: center;
}
.garden-reveal-best strong {
  color: #58a273;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.garden-progress { display: grid; gap: 4px; margin-bottom: 10px; }
.garden-progress span {
  color: #97887a;
  font-size: 11.5px;
  font-weight: 850;
  text-align: center;
}
.garden-progress i {
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(214,226,205,0.75);
  box-shadow: inset 0 1px 2px rgba(109,123,95,0.16);
}
.garden-progress b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8fd9a8, #64c58b);
  transition: width 320ms cubic-bezier(.2,.72,.25,1);
}

.garden-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.garden-tier {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 7px 3px 6px;
  border: 1px solid rgba(222,210,186,0.7);
  border-radius: 13px;
  background: rgba(248,247,241,0.8);
}
.garden-tier img { width: 20px; height: 20px; object-fit: contain; opacity: 0.32; filter: grayscale(1); }
.garden-tier span { color: #a2988c; font-size: 10.5px; font-weight: 850; white-space: nowrap; }
.garden-tier b {
  color: #b0a496;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.garden-tier.is-unlocked {
  border-color: rgba(139,201,157,0.7);
  background: linear-gradient(180deg, rgba(240,255,244,0.95), rgba(216,244,225,0.85));
}
.garden-tier.is-unlocked img { opacity: 1; filter: none; }
.garden-tier.is-unlocked span { color: #4f8362; }
.garden-tier.is-unlocked b { color: #58a273; }

.record-history {
  position: relative;
  margin-top: 8px;
  padding: 9px 10px 7px;
  border: 1px solid rgba(198, 220, 211, 0.8);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(241,255,252,0.88), rgba(255,252,240,0.84));
}

.record-history-title {
  min-height: 25px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}
.record-history-title span { color: #5f716e; font-size: 11px; font-weight: 900; white-space: nowrap; }
.record-history-title b { color: #888078; font-size: 11px; font-weight: 850; line-height: 1.2; text-align: right; }
.record-history-title b[data-tone="up"] { color: #e45e7a; }
.record-history-title b[data-tone="down"] { color: #6f8fa8; }
.record-history-title b[data-tone="same"] { color: #3da994; }

.record-bars {
  height: 87px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 2.1vw, 9px);
  padding: 15px 5px 13px;
  border-bottom: 1px solid rgba(112, 160, 148, 0.2);
}

.record-bars i {
  position: relative;
  width: clamp(18px, 6vw, 24px);
  height: var(--record-height, 22%);
  min-height: 13px;
  border: 1px solid rgba(100, 190, 174, 0.36);
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(180deg, #baf2e7, #78d4c2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 2px 0 rgba(75, 155, 140, 0.12);
  animation: record-bar-rise 420ms calc(var(--bar-index, 0) * 35ms) cubic-bezier(.18,.78,.24,1.08) both;
}
.record-bars i:nth-child(1) { --bar-index: 1; }
.record-bars i:nth-child(2) { --bar-index: 2; }
.record-bars i:nth-child(3) { --bar-index: 3; }
.record-bars i:nth-child(4) { --bar-index: 4; }
.record-bars i:nth-child(5) { --bar-index: 5; }
.record-bars i:nth-child(6) { --bar-index: 6; }
.record-bars i:nth-child(7) { --bar-index: 7; }
.record-bars i.is-best { border-color: rgba(244, 148, 170, 0.52); background: linear-gradient(180deg, #ffd9e2, #ff91ab); }
.record-bars i.is-latest { box-shadow: inset 0 1px 0 white, 0 0 0 3px rgba(255, 211, 111, 0.22), 0 3px 0 rgba(93, 154, 143, 0.13); }
.record-bars i::after { content: attr(data-index); position: absolute; left: 50%; bottom: -13px; color: #9b948c; font: normal 8px/1 var(--font-sans); transform: translateX(-50%); }
.record-bars i b { position: absolute; left: 50%; top: -12px; color: #6f7e82; font: 800 8px/1 var(--font-sans); transform: translateX(-50%); }

@keyframes record-bar-rise {
  from { opacity: 0; height: 4px; }
  to { opacity: 1; height: var(--record-height, 22%); }
}

.record-empty {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 90%;
  margin: 0;
  color: #8c8177;
  font-size: 12px;
  line-height: 1.25;
  transform: translateX(-50%);
}

.ranking-play-button { min-height: 48px; margin-top: 9px !important; font-size: 17px; }
.record-online-note { display: block; margin-top: 8px; color: #a3978a; font-size: 11px; line-height: 1.2; }

.toast {
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: calc(172px + var(--safe-bottom));
  max-width: calc(100% - 30px);
  padding: 9px 15px;
  border-radius: 99px;
  background: rgba(53,68,95,0.9);
  color: white;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
}

.toast.is-visible { animation: toast-in 1800ms ease both; }
@keyframes toast-in { 0%,100% { opacity:0; transform:translate(-50%,8px); } 12%,82% { opacity:1; transform:translate(-50%,0); } }

/* Playful display type. Compact HUD labels and board numbers intentionally keep their existing type. */
.home-tagline,
.btn,
.tutorial-guide > span,
.round-clear strong,
.item-button,
.result-home-button,
.mini-panel h2,
.mini-panel p,
.text-button,
.setting-row,
.mock-best,
.record-heading h2,
.record-caption,
.ranking-play-button,
.record-online-note,
.toast {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.home-tagline,
.btn,
.item-button > span,
.tutorial-guide > span,
.cat-message,
.result-card > p,
.result-message,
.result-home-button,
.mini-panel h2,
.mini-panel p,
.text-button,
.mock-best,
.record-caption,
.record-online-note,
.toast {
  text-align: center;
}

.btn,
.btn > span,
.result-home-button,
.result-home-button > span {
  align-items: center;
  justify-content: center;
}

.btn,
.btn > span,
.result-home-button > span,
.item-button > span {
  line-height: 1;
}

.btn > span,
.result-home-button > span {
  display: inline-flex;
}

.item-button > span {
  width: auto;
  height: auto;
  display: inline-grid;
  place-items: center;
}

.cat-message,
.result-message {
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cat-message {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.result-card > p,
.score-comparisons,
.result-grid span {
  font-family: var(--font-sans);
}

/* 2026-08 play-screen art-direction pass: quieter world, stronger board, tactile controls. */
.screen-play {
  row-gap: 7px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.58), transparent 31%),
    linear-gradient(180deg, rgba(214,244,252,.62) 0%, rgba(246,252,245,.83) 42%, rgba(255,250,235,.94) 78%, rgba(255,248,228,.97) 100%),
    url("../assets/backgrounds/play-bg@2x.webp") center / cover no-repeat;
}

.play-hud {
  grid-template-rows: 35px 27px 17px;
  gap: 3px;
  margin: 0 1px;
  padding: 5px 7px 6px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,252,242,.68));
  box-shadow: 0 4px 15px rgba(67,118,137,.09), inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(7px) saturate(.94);
  -webkit-backdrop-filter: blur(7px) saturate(.94);
}

.hud-topline { grid-template-columns: 43px minmax(108px,1fr) minmax(102px,116px); gap: 8px; }
.round-mini,
.time-readout {
  min-height: 34px;
  border-color: rgba(211,190,151,.5);
  background: rgba(255,253,247,.9);
  box-shadow: 0 2px 0 rgba(130,102,66,.08), inset 0 1px 0 #fff;
}
.time-readout { border-color: rgba(102,178,203,.46); }
.score-readout span,
.combo-readout span { color: #69788a; font-size: 11px; }
.score-readout strong { color: #334a68; font-size: 20px; }
.combo-readout strong { font-size: 20px; }
.goal-status { padding: 0 1px; }
.goal-copy { color: #756b5d; font-size: 12px; }
.goal-track { height: 6px; background: rgba(238,226,198,.72); }

.board-frame,
.board-frame[data-round="2"],
.board-frame[data-round="3"],
.board-frame[data-round="4"],
.board-frame[data-round="5"],
.board-frame[data-round="6"] {
  padding: clamp(6px,1.7vw,8px);
  border: 1.5px solid rgba(203,169,112,.58);
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), transparent 32%),
    linear-gradient(180deg, #fffdf7 0%, #fff1d8 100%);
  box-shadow:
    0 4px 0 rgba(174,124,65,.14),
    0 12px 24px rgba(55,105,121,.16),
    0 0 0 3px rgba(255,255,255,.5),
    inset 0 2px 0 rgba(255,255,255,.98),
    inset 0 -5px 10px rgba(231,194,129,.09);
}

.board {
  border-color: rgba(205,177,134,.58);
  background-color: #fffaf0;
  background-image:
    linear-gradient(to right, rgba(195,165,120,.38) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(195,165,120,.38) 1px, transparent 1px),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.72), rgba(255,247,231,.4));
  box-shadow: inset 0 1px 4px rgba(133,96,52,.08);
}

.tile {
  filter: drop-shadow(0 1px 1px rgba(119,84,61,.15)) drop-shadow(0 2.5px 2px rgba(82,106,130,.07));
}
.tile span { text-shadow: 0 1px 0 rgba(255,255,255,.94), 0 2px 2px rgba(57,51,45,.055); }

.selection-marquee {
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 17px;
  background:
    radial-gradient(circle at var(--syrup-x,18%) var(--syrup-y,10%), rgba(255,255,255,.78) 0 6%, transparent 22%),
    linear-gradient(150deg, rgba(255,237,242,.4), rgba(255,142,169,.24) 52%, rgba(255,211,222,.18));
  box-shadow:
    0 0 0 2px rgba(255,129,159,.24),
    0 5px 12px rgba(204,74,106,.11),
    inset 0 -10px 18px rgba(250,102,138,.09),
    inset 0 8px 13px rgba(255,255,255,.34);
}
.selection-marquee.is-ten {
  border-color: rgba(255,255,255,.96);
  background:
    radial-gradient(circle at var(--syrup-x,18%) var(--syrup-y,10%), rgba(255,255,255,.9) 0 6%, transparent 23%),
    linear-gradient(145deg, rgba(255,244,211,.52), rgba(255,128,159,.3) 52%, rgba(255,218,128,.25));
  box-shadow: 0 0 0 2px rgba(255,119,151,.3), 0 0 16px rgba(255,184,106,.2), inset 0 8px 14px rgba(255,255,255,.36);
}
.selection-marquee::after { width: 13px; height: 13px; opacity: .72; }

.success-drop {
  position: absolute;
  z-index: 15;
  width: 10px;
  height: 14px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 55% 45% 58% 42%;
  background: linear-gradient(145deg, rgba(255,255,255,.9), #ff9db5 56%, #ff7698);
  box-shadow: 0 2px 5px rgba(205,76,108,.16), inset 0 1px 2px rgba(255,255,255,.8);
  opacity: 0;
  pointer-events: none;
  animation: success-drop-pop 450ms var(--drop-delay,0ms) cubic-bezier(.16,.72,.28,1) both;
}
@keyframes success-drop-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.28); }
  24% { opacity: .92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drop-x)),calc(-50% + var(--drop-y))) scale(.78) rotate(48deg); }
}

.tile.is-success {
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.94), 0 0 0 2px rgba(255,130,158,.3), 0 6px 12px rgba(255,156,100,.16);
  filter: brightness(1.06) saturate(1.06);
}
@keyframes tile-success {
  0% { transform: scale(1); opacity: 1; }
  28% { transform: translateY(1px) scale(.94,.9); opacity: 1; }
  62% { transform: translateY(-2px) scale(1.03,1.05); opacity: 1; }
  100% { transform: translateY(-3px) scale(.72); opacity: 0; }
}

.board.is-hinting .tile:not(.is-hint) { opacity: .68; filter: brightness(.96) saturate(.72); }
.tile.is-hint {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 3px rgba(97,207,185,.28), 0 6px 18px rgba(67,181,163,.25);
  animation: tile-hint-premium 620ms calc(var(--hint-index,0) * 90ms) cubic-bezier(.18,.78,.24,1.12) 2 both;
}
@keyframes tile-hint-premium {
  0%,100% { transform: scale(1); filter: brightness(1) saturate(1); }
  42% { transform: translateY(-2px) scale(1.035); filter: brightness(1.12) saturate(1.05); }
}
.hint-region {
  border: 0;
  background: radial-gradient(ellipse at center, rgba(137,235,215,.2), transparent 72%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.38), 0 0 18px rgba(81,193,176,.14);
}
.hint-region span {
  top: -17px;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg,#74d9c5,#4dbca7);
  box-shadow: 0 3px 8px rgba(45,139,123,.16), inset 0 1px 0 rgba(255,255,255,.55);
}

.shuffle-fx { background: radial-gradient(circle at 50% 50%, rgba(207,250,241,.38), rgba(255,247,224,.12) 38%, transparent 70%); }
.shuffle-fx i { display: none; }
.shuffle-fx img {
  width: clamp(48px,15%,62px);
  padding: 10px;
  border: 1.5px solid rgba(255,255,255,.92);
  background: radial-gradient(circle at 38% 28%, #fff, #b8eee3 62%, #70cfbc);
  box-shadow: 0 0 0 7px rgba(105,211,190,.1), 0 9px 25px rgba(43,149,132,.24), inset 0 2px 3px rgba(255,255,255,.74);
}
.shuffle-curve { border-top-width: 2px; border-top-color: rgba(88,192,174,.5); filter: none; }

.item-actions {
  gap: clamp(7px,1.8vw,9px);
  padding: 8px 9px 10px;
  border-color: rgba(204,176,126,.5);
  background: linear-gradient(180deg,rgba(255,253,246,.92),rgba(248,239,219,.92));
  box-shadow: 0 4px 0 rgba(160,121,65,.1), 0 10px 20px rgba(61,96,105,.1), inset 0 1px 0 #fff;
}
.item-button {
  height: clamp(59px,17.3vw,68px);
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(180deg,rgba(255,255,255,.98),color-mix(in srgb,var(--item-accent) 12%,#fffaf0));
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--item-accent) 42%,#d8c9aa), 0 4px 0 color-mix(in srgb,var(--item-accent) 38%,#bfad8c), 0 7px 12px rgba(86,69,50,.1), inset 0 2px 0 #fff;
}
.item-button::before { inset: 3px 5px auto; height: 15%; }
.item-icon {
  width: clamp(27px,8.4vw,34px);
  height: clamp(29px,8.8vw,36px);
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb,var(--item-accent) 25%,white);
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--item-accent) 34%,white), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(75,61,45,.09);
}
.item-button > span { color: color-mix(in srgb,var(--item-accent) 46%,#554f49); font-size: clamp(13px,3.7vw,15px); }
.item-button b { right: -3px; top: -4px; border: 1.5px solid rgba(255,255,255,.94); box-shadow: 0 2px 0 #d95772, 0 3px 7px rgba(178,62,87,.18); }

.cat-coach { height: 96px; grid-template-columns: 104px minmax(0,1fr); }
.play-character-stage { width: 101px; height: 96px; transform: translateY(-1px); }
.cat-message {
  max-width: min(100%,256px);
  min-height: 47px;
  padding: 8px 15px 7px;
  border-color: rgba(218,185,133,.76);
  background: rgba(255,254,247,.96);
  box-shadow: 0 3px 0 rgba(194,145,75,.11), 0 8px 16px rgba(84,72,54,.07), inset 0 1px 0 #fff;
  font-size: 17px;
}

.round-clear {
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.88);
  background: linear-gradient(180deg,rgba(255,255,246,.97),rgba(255,241,199,.94));
  box-shadow: 0 0 0 4px rgba(255,222,128,.13), 0 7px 17px rgba(171,115,38,.16), inset 0 1px 0 #fff;
}

@media (max-height: 800px) {
  .play-hud { padding-top: 4px; padding-bottom: 5px; }
  .cat-coach { height: 88px; grid-template-columns: 94px minmax(0,1fr); }
  .play-character-stage { width: 92px; height: 88px; }
  .cat-message { min-height: 43px; font-size: 16px; }
}

@media (max-height: 815px) {
  .screen-home { padding-top: calc(9px + var(--safe-top)); }
  .home-brand { min-height: 80px; margin-top: 0; }
  .oing-logo { width: clamp(156px, 46vw, 190px); }
  .home-character-stage { width: clamp(205px, 61vw, 236px); height: clamp(214px, 29vh, 238px); min-height: 0; max-height: none; }
  .home-tagline { margin-bottom: 5px; padding-block: 7px; }
  .home-instruction { margin-bottom: 8px; }
  .screen-play { --board-edge: min(calc(100vw - 28px), 358px, calc(100dvh - 218px)); padding-top: calc(5px + var(--safe-top)); }
  .play-hud { min-height: 0; }
  .board-zone { padding: 0; }
  .play-footer { grid-template-rows: auto auto; min-height: 0; height: auto; }
  .cat-coach { height: 82px; }
  .play-character-stage { width: 84px; height: 84px; }
  .item-button { height: clamp(54px, 16.5vw, 62px); grid-template-columns: 1fr; grid-template-rows: minmax(29px, 1fr) 17px; }
  .result-card { padding-top: 15px; }
  .result-cat-row { min-height: 128px; }
  .result-character-stage { width: 118px; height: 128px; }
  .toast { bottom: calc(158px + var(--safe-bottom)); }

  /* Tall boards keep the same readable tile width. Reclaim only the
     surrounding chrome so 9–10 row rounds remain tappable at 780px tall. */
  .screen-play.is-tall-board { row-gap: 4px; }
  .screen-play.is-tall-board .play-footer { gap: 4px; margin-top: 0; }
  .screen-play.is-tall-board .cat-coach { height: 78px; }
}

@media (max-width: 340px) {
  .screen-home { padding-inline: 12px; }
  .home-settings { left: 10px; top: auto; bottom: calc(10px + var(--safe-bottom)); width: 48px; min-height: 57px; }
  .home-settings img { width: 40px; height: 40px; }
  .home-settings span { font-size: 12px; }
  .home-brand { min-height: 76px; }
  .oing-logo { width: 150px; }
  .home-character-stage { width: 188px; height: 202px; min-height: 0; }
  .home-tagline { font-size: 13px; padding: 6px 15px; }
  .home-howto { width: 100%; padding: 6px 9px 7px; border-radius: 17px; }
  .home-instruction { gap: 4px; font-size: 11px; }
  .home-equation { gap: 5px; }
  .home-mini-tile { width: 30px; height: 30px; border-radius: 9px; font-size: 19px; }
  .home-equation strong { min-width: 38px; font-size: 19px; }
  .home-actions { gap: 7px; padding: 7px; border-radius: 21px; }
  .btn-primary { min-height: 51px; font-size: 18px; }
  .home-ranking-button, .best-record-card { min-height: 44px; }
  .best-record-card { grid-template-columns: 23px 1fr auto; padding-inline: 7px; gap: 4px; }
  .best-record-card img { width: 23px; height: 23px; }
  .best-record-card span { font-size: 11px; }
  .best-record-card strong { font-size: 13px; }
  .screen-play { --board-edge: min(calc(100vw - 24px), calc(100dvh - 218px)); padding-inline: 12px; }
  .hud-topline { grid-template-columns: 40px minmax(88px, 1fr) 104px; }
  .hud-topline { gap: 6px; }
  .pause-button { width: 40px; height: 32px; }
  .round-mini { min-height: 32px; padding-inline: 8px; }
  .round-mini span { font-size: 12px; }
  .round-mini strong { font-size: 17px; }
  .time-readout { min-width: 110px; min-height: 36px; padding-inline: 7px; }
  .time-readout img { width: 18px; height: 20px; }
  .time-readout strong { font-size: 20px; }
  .score-readout, .combo-readout { padding-inline: 6px; }
  .score-readout img, .combo-readout img { width: 16px; height: 16px; }
  .score-readout span, .combo-readout span { font-size: 11px; }
  .score-readout strong { max-width: 83px; font-size: 18px; }
  .combo-readout strong { font-size: 17px; }
  .board-frame { width: min(calc(var(--board-edge) + 20px), calc(100vw - 2px)); max-width: calc(100vw - 2px); padding: 6px; border-radius: 18px; }
  .play-footer { grid-template-columns: 1fr; gap: 5px; }
  .cat-coach { grid-template-columns: 79px minmax(0, 1fr); }
  .play-character-stage { width: 78px; height: 80px; }
  .cat-message { margin-left: 1px; padding-inline: 9px; font-size: 15px; }
  .item-actions { gap: 4px; padding: 7px 6px 9px; border-radius: 20px; }
  .item-button { height: clamp(52px, 17vw, 58px); grid-template-columns: 1fr; grid-template-rows: minmax(27px, 1fr) 16px; border-radius: 15px; font-size: 13px; }
  .item-icon { width: 24px; height: 27px; }
  .shuffle-button .item-icon { width: 27px; height: 25px; }
  .item-button b { width: 21px; height: 21px; font-size: 14px; }
  .screen-result { padding-inline: 13px; }
  .result-card { padding-inline: 14px; }
  .result-cat-row { min-height: 136px; gap: 0; }
  .result-character-stage { width: 104px; height: 120px; }
  .result-message { min-width: 148px; max-width: 176px; font-size: 14px; padding-inline: 8px; }
  .result-share-button,
  .result-ranking-button { font-size: 14px; }
}

@media (max-width: 300px) {
  .screen-play {
    --board-edge: min(calc(100vw - 16px), calc(100dvh - 208px));
    padding-inline: 8px;
  }

  .play-hud { gap: 2px; }
  .hud-topline {
    grid-template-columns: 33px minmax(72px, 1fr) 88px;
    gap: 3px;
  }

  .pause-button { width: 33px; height: 27px; }
  .round-mini { min-height: 28px; padding: 5px 4px 3px; }
  .round-mini span { font-size: 11px; }
  .round-mini strong { font-size: 16px; }
  .time-readout { min-width: 88px; min-height: 30px; padding: 4px 4px 6px; gap: 2px; }
  .time-readout img { width: 15px; height: 17px; }
  .time-readout strong { font-size: 17px; }
  .hud-secondline { gap: 4px; }
  .score-readout,
  .combo-readout { padding-inline: 4px; }
  .score-readout span,
  .combo-readout span { font-size: 11px; }
  .score-readout strong,
  .combo-readout strong { font-size: 15px; }
  .goal-copy { font-size: 11px; }
  .goal-status.is-complete .goal-copy { font-size: 11px; }
  .item-actions { width: 100%; gap: 3px; padding-inline: 5px; }
  .item-button { min-width: 0; font-size: 11px; }
  .item-icon { width: 21px; height: 23px; padding: 2px; }
  .shuffle-button .item-icon,
  .bomb-button .item-icon,
  .clock-button .item-icon { width: 23px; height: 23px; }
  .item-button b { width: 19px; height: 19px; font-size: 11px; }
  .cat-coach { width: 100%; grid-template-columns: 61px minmax(0, 1fr); }
  .cat-message { max-width: 100%; font-size: 13px; }
}

@media (max-height: 690px) {
  .home-brand { min-height: 64px; }
  .oing-logo { width: 142px; }
  .home-character-stage { width: 170px; height: 176px; min-height: 0; max-height: none; }
  .home-tagline { margin-block: 0 5px; }
  .home-howto { gap: 1px; margin-bottom: 6px; padding-block: 5px 6px; }
  .home-instruction { font-size: 11px; }
  .home-mini-tile { width: 29px; height: 29px; font-size: 18px; }
  .home-equation strong { min-width: 37px; padding-block: 3px 2px; font-size: 18px; }
  .home-actions { padding: 7px; }
  .screen-play { --board-edge: min(calc(100vw - 24px), calc(100dvh - 208px)); }
  .play-hud { min-height: 0; gap: 0; }
  .board-zone { padding: 0; }
  .play-footer { grid-template-rows: auto auto; height: auto; min-height: 0; gap: 4px; padding-block: 0 3px; }
  .cat-coach { height: 72px; grid-template-columns: 69px minmax(0, 1fr); }
  .play-character-stage { width: 68px; height: 70px; }
  .cat-message { min-height: 40px; padding-block: 4px; font-size: 14px; }
  .item-actions { padding-block: 6px 8px; }
  .item-button { height: 50px; grid-template-columns: 1fr; grid-template-rows: minmax(25px, 1fr) 15px; }
  .item-icon { width: 24px; height: 27px; }
  .screen-result { padding-top: calc(11px + var(--safe-top)); }
  .result-decor { min-height: 24px; }
  .result-kicker { margin-block: 1px 5px; }
  .result-card { padding-block: 12px; }
  .final-score { font-size: 39px; }
  .result-cat-row { min-height: 106px; margin-block: 4px 5px; }
  .result-character-stage { width: 90px; height: 104px; }
  .result-message { min-height: 46px; font-size: 13px; }
  .result-actions { gap: 6px; }
  .result-actions .btn-primary { min-height: 49px; }
  .result-share-button,
  .result-ranking-button { min-height: 39px; font-size: 13px; }
  .result-home-button { min-height: 34px; font-size: 16px; }
  .toast { bottom: calc(145px + var(--safe-bottom)); }
}

@media (max-width: 340px) and (max-height: 690px) {
  .play-footer { grid-template-rows: auto auto; min-height: 0; }
  .cat-coach { height: 67px; }
  .play-character-stage { width: 60px; height: 64px; }
  .item-button { height: 48px; grid-template-columns: 1fr; grid-template-rows: minmax(24px, 1fr) 14px; }
  .item-icon { width: 22px; height: 25px; }
}

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

.item-tease { display: none !important; }

/* 2026-08 item, combo and game-end feedback pass */
.bomb-fx b {
  --bomb-drop-angle: calc(var(--bomb-drop-index) * 72deg - 18deg);
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 13px;
  height: 17px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 62% 38% 58% 42% / 70% 44% 56% 30%;
  background: linear-gradient(145deg,#fff2a4 8%,#ffb767 45%,#ff7883 88%);
  box-shadow: 0 2px 6px rgba(219,96,67,.2), inset 2px 2px 2px rgba(255,255,255,.55);
  opacity: 0;
  animation: bomb-syrup-drop 540ms calc(var(--bomb-drop-index) * 22ms) cubic-bezier(.16,.72,.24,1) both;
}

@keyframes bomb-syrup-drop {
  0%,14% { opacity:0; transform:translate(-50%,-50%) rotate(var(--bomb-drop-angle)) translateY(-16px) scale(.35); }
  34% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--bomb-drop-angle)) translateY(-66px) scale(.88) rotate(46deg); }
}

.item-impact-fx {
  position:absolute;
  z-index:32;
  pointer-events:none;
}

.item-impact-clock {
  width:1px;
  height:1px;
}

.item-impact-clock::before,
.item-impact-clock::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:62px;
  height:38px;
  border:2px solid rgba(83,202,182,.5);
  border-radius:50%;
  opacity:0;
  animation:clock-impact-ring 480ms 270ms ease-out both;
}

.item-impact-clock::after { width:88px; height:50px; animation-delay:330ms; }
.item-impact-clock i {
  --clock-tick-angle:calc(var(--impact-index,0) * 90deg);
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:13px;
  border-radius:99px;
  background:#69cdbd;
  opacity:0;
  transform-origin:50% 28px;
  animation:clock-impact-tick 420ms 270ms ease-out both;
}
.item-impact-clock i:nth-child(1) { --impact-index:0; }
.item-impact-clock i:nth-child(2) { --impact-index:1; }
.item-impact-clock i:nth-child(3) { --impact-index:2; }
.item-impact-clock i:nth-child(4) { --impact-index:3; }

@keyframes clock-impact-ring {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.35); }
  30% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.25); }
}
@keyframes clock-impact-tick {
  0% { opacity:0; transform:translate(-50%,-50%) rotate(var(--clock-tick-angle)) translateY(-17px) scaleY(.3); }
  35% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--clock-tick-angle)) translateY(-35px) scaleY(1); }
}

.item-impact-freeze,
.item-impact-clover {
  z-index:17;
  inset:6px;
  overflow:hidden;
  border-radius:16px;
}

.item-impact-freeze {
  border:2px solid rgba(160,226,247,.58);
  background:radial-gradient(circle at 50% 48%,rgba(229,252,255,.05),rgba(181,233,248,.22));
  box-shadow:inset 0 0 24px rgba(182,239,255,.42);
  animation:freeze-board-impact 940ms 330ms ease-out both;
}

.item-impact-freeze i {
  --ice-x:14%;
  --ice-y:18%;
  position:absolute;
  left:var(--ice-x);
  top:var(--ice-y);
  width:10px;
  height:10px;
  border-radius:2px 50% 2px 50%;
  background:rgba(239,253,255,.96);
  box-shadow:0 0 8px rgba(105,207,239,.7);
  opacity:0;
  transform:rotate(45deg);
  animation:ice-glint 660ms calc(360ms + var(--ice-delay,0ms)) ease-out both;
}
.item-impact-freeze i:nth-child(2){--ice-x:36%;--ice-y:73%;--ice-delay:50ms}
.item-impact-freeze i:nth-child(3){--ice-x:58%;--ice-y:22%;--ice-delay:90ms}
.item-impact-freeze i:nth-child(4){--ice-x:79%;--ice-y:67%;--ice-delay:130ms}
.item-impact-freeze i:nth-child(5){--ice-x:90%;--ice-y:34%;--ice-delay:170ms}
.item-impact-freeze i:nth-child(6){--ice-x:20%;--ice-y:48%;--ice-delay:210ms}
.item-impact-freeze i:nth-child(7){--ice-x:65%;--ice-y:84%;--ice-delay:250ms}

@keyframes freeze-board-impact {
  0% { opacity:0; transform:scale(.985); }
  24%,72% { opacity:1; transform:scale(1); }
  100% { opacity:0; }
}
@keyframes ice-glint {
  0%,12% { opacity:0; transform:rotate(45deg) scale(.25); }
  38% { opacity:1; transform:rotate(45deg) scale(1.12); }
  100% { opacity:0; transform:rotate(135deg) scale(.55); }
}

.item-impact-clover {
  background:radial-gradient(circle at 50% 50%,rgba(203,255,190,.22),transparent 62%);
  animation:clover-board-impact 980ms 300ms ease-out both;
}
.item-impact-clover::before,
.item-impact-clover::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:42%;
  aspect-ratio:1;
  border:2px solid rgba(108,206,132,.48);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);
  animation:clover-focus-ring 720ms 310ms ease-out both;
}
.item-impact-clover::after { width:66%; animation-delay:390ms; }
.item-impact-clover i {
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  background:url("../assets/decor/sparkle.webp") center/contain no-repeat;
  opacity:0;
  animation:clover-focus-spark 680ms calc(330ms + var(--clover-delay,0ms)) ease-out both;
}
.item-impact-clover i:nth-child(1){--clover-x:-108px;--clover-y:-62px}
.item-impact-clover i:nth-child(2){--clover-x:102px;--clover-y:-46px;--clover-delay:50ms}
.item-impact-clover i:nth-child(3){--clover-x:-82px;--clover-y:76px;--clover-delay:90ms}
.item-impact-clover i:nth-child(4){--clover-x:91px;--clover-y:69px;--clover-delay:130ms}

@keyframes clover-board-impact { 0%,100%{opacity:0} 28%,72%{opacity:1} }
@keyframes clover-focus-ring {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  32%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes clover-focus-spark {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--clover-x)),calc(-50% + var(--clover-y))) rotate(100deg) scale(.9)}
}

.combo-celebration {
  top:8px;
  min-width:124px;
  padding:5px 10px 6px;
  border-radius:16px;
  transform:translate(-50%,-38%) scale(.78);
}
.combo-celebration[data-level="8"] { min-width:142px; }
.combo-celebration.is-visible { animation:combo-celebration-edge 700ms cubic-bezier(.16,.82,.24,1.12) both; }
.combo-celebration[data-level="5"].is-visible { animation-duration:760ms; }
.combo-celebration[data-level="8"].is-visible { animation-duration:820ms; }
.combo-confetti { top:10%; }

@keyframes combo-celebration-edge {
  0%{opacity:0;transform:translate(-50%,-55%) scale(.72)}
  22%{opacity:1;transform:translate(-50%,0) scale(1.05)}
  70%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-24%) scale(.96)}
}

.game-end-sweep {
  position:absolute;
  z-index:11;
  inset:6px;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,253,242,.08),rgba(255,239,211,.34));
  pointer-events:none;
  animation:game-end-veil 2.06s ease both;
}
.game-end-sweep::before {
  content:"";
  position:absolute;
  left:-35%;
  top:-10%;
  width:44%;
  height:120%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:skewX(-12deg);
  animation:game-end-shine 980ms 160ms ease-in-out both;
}
.game-end-sweep i {
  --end-dot-x:20%;
  --end-dot-y:42%;
  position:absolute;
  left:var(--end-dot-x);
  top:var(--end-dot-y);
  width:13px;
  height:13px;
  background:url("../assets/decor/sparkle.webp") center/contain no-repeat;
  animation:game-end-glint 760ms var(--end-dot-delay,140ms) ease-out both;
}
.game-end-sweep i:nth-child(2){--end-dot-x:77%;--end-dot-y:29%;--end-dot-delay:240ms}
.game-end-sweep i:nth-child(3){--end-dot-x:69%;--end-dot-y:75%;--end-dot-delay:340ms}

@keyframes game-end-veil { 0%{opacity:0} 18%,82%{opacity:1} 100%{opacity:0} }
@keyframes game-end-shine { from{transform:translateX(0) skewX(-12deg)} to{transform:translateX(330%) skewX(-12deg)} }
@keyframes game-end-glint {
  0%,10%{opacity:0;transform:scale(.3) rotate(0)}
  38%{opacity:1;transform:scale(1.1) rotate(35deg)}
  100%{opacity:0;transform:scale(.7) rotate(110deg)}
}

.time-up { top:44%; }
.end-score-summary { top:51%; }
.board-frame.is-game-ending .board { animation:board-finish-settle 1.9s ease both; }
.screen-play.is-ending-to-result { animation:play-to-result 230ms ease-in both; }

/* Stage milestones stay light enough for uninterrupted score attack, but the
   changing board now reads as a reward instead of a silent data refresh. */
.stage-entry {
  position: absolute;
  z-index: 29;
  left: 50%;
  top: 48%;
  min-width: min(74%, 238px);
  display: grid;
  place-items: center;
  padding: 10px 20px 11px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 24px;
  background: rgba(255,249,226,.96);
  box-shadow: 0 0 0 7px rgba(255,216,224,.2), 0 11px 22px rgba(99,75,68,.17), inset 0 2px 0 #fff;
  pointer-events: none;
  animation: stage-entry-pop 560ms cubic-bezier(.16,.82,.24,1.12) both;
}

.stage-entry small {
  color: #57a895;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .15em;
}

.stage-entry strong {
  color: #df6078;
  font-family: var(--font-display);
  font-size: clamp(27px,8vw,34px);
  font-weight: 400;
  line-height: 1;
}

.stage-entry span {
  margin-top: 3px;
  color: #6c7382;
  font-size: 12px;
  font-weight: 900;
}

.stage-entry i {
  position: absolute;
  left: -13px;
  top: -12px;
  width: 25px;
  height: 25px;
  background: url("../assets/decor/sparkle.webp") center/contain no-repeat;
  animation: stage-entry-spark 520ms ease-out both;
}

.stage-entry i:last-child {
  left: auto;
  right: -12px;
  top: auto;
  bottom: -10px;
  width: 22px;
  height: 22px;
  background-image: url("../assets/decor/star.webp");
  animation-delay: 65ms;
}

@keyframes stage-entry-pop {
  0% { opacity:0; transform:translate(-50%,-42%) scale(.82); }
  25% { opacity:1; transform:translate(-50%,-50%) scale(1.055); }
  72% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-58%) scale(.97); }
}

@keyframes stage-entry-spark {
  0% { opacity:0; transform:scale(.25) rotate(0); }
  40% { opacity:1; transform:scale(1.12) rotate(28deg); }
  100% { opacity:0; transform:scale(.7) rotate(105deg); }
}

.screen-play[data-stage-band="rising"] .round-mini strong { color:#4e7d99; }
.screen-play[data-stage-band="wide"] .round-mini strong { color:#7d69a4; }
.screen-play[data-stage-band="fever"] .round-mini strong { color:#d25c77; }

/* At time-up, briefly reveal a few remaining answers before the score card.
   This gives closure without turning the board into a tutorial overlay. */
.tile.is-end-answer:not(.is-empty) {
  z-index: 5;
  border-color: rgba(72,190,160,.72);
  box-shadow: 0 0 0 2px rgba(255,255,255,.84), 0 0 13px rgba(70,201,171,.38), inset 0 2px 0 rgba(255,255,255,.9);
  animation: end-answer-reveal 620ms calc(var(--answer-group,0) * 55ms) ease-in-out both;
}

@keyframes end-answer-reveal {
  0%,100% { filter:brightness(1); transform:scale(1); }
  38% { filter:brightness(1.09) saturate(1.08); transform:scale(1.025); }
}

/* A personal best is rare, so it receives the one deliberately lavish result
   effect. Regular results stay calm and positive. */
.record-confetti {
  position:absolute;
  z-index:7;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.record-confetti i {
  position:absolute;
  left:var(--confetti-x);
  top:-22px;
  width:9px;
  height:15px;
  border-radius:4px 2px 5px 2px;
  background:hsl(var(--confetti-hue),78%,70%);
  box-shadow:inset 2px 2px 1px rgba(255,255,255,.55);
  animation:record-confetti-fall 2.55s var(--confetti-delay) cubic-bezier(.2,.68,.28,1) both;
}

.record-confetti i[data-shape="star"] {
  width:18px;
  height:18px;
  border-radius:0;
  background:url("../assets/decor/star.webp") center/contain no-repeat;
  box-shadow:none;
}

@keyframes record-confetti-fall {
  0% { opacity:0; transform:translate3d(0,-14px,0) rotate(0) scale(.55); }
  12% { opacity:1; }
  100% { opacity:0; transform:translate3d(var(--confetti-drift),102vh,0) rotate(var(--confetti-spin)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-entry { animation-duration:360ms; }
  .record-confetti i { animation-duration:900ms; }
  .tile.is-end-answer:not(.is-empty) { animation:none; }
}

/* 2026-08 home/result presentation pass */
.screen-home {
  background:
    radial-gradient(ellipse at 50% 39%,rgba(255,255,255,.24),transparent 35%),
    linear-gradient(180deg,rgba(218,248,255,.05) 0%,rgba(255,251,235,.03) 53%,rgba(255,248,225,.16) 100%),
    url("../assets/backgrounds/home-bg@2x.webp") center/cover no-repeat;
}

.home-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:17%;
  width:min(88vw,340px);
  height:72%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.22),transparent 68%);
  transform:translateX(-50%);
  pointer-events:none;
}

.oing-logo {
  filter:drop-shadow(0 5px 0 rgba(217,86,112,.08)) drop-shadow(0 9px 14px rgba(80,128,143,.09));
  animation:home-logo-breathe 4.6s ease-in-out infinite;
}

@keyframes home-logo-breathe {
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.008)}
}

.home-character-stage::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:7px;
  width:62%;
  height:9%;
  border-radius:50%;
  background:rgba(62,132,148,.13);
  filter:blur(7px);
  transform:translateX(-50%);
}

.home-tagline {
  border-color:rgba(226,183,109,.5);
  background:linear-gradient(180deg,rgba(255,254,246,.96),rgba(255,247,226,.94));
  box-shadow:0 3px 0 rgba(196,142,68,.09),0 8px 15px rgba(92,75,53,.07),inset 0 1px 0 #fff;
}

.home-howto {
  border-color:rgba(225,190,132,.62);
  background:linear-gradient(180deg,rgba(255,254,247,.94),rgba(255,247,226,.9));
  box-shadow:0 3px 0 rgba(190,145,78,.09),0 9px 18px rgba(77,98,92,.08),inset 0 1px 0 #fff;
}

.home-equation strong { position:relative; overflow:hidden; }
.home-equation strong::after {
  content:"";
  position:absolute;
  left:-35%;
  top:-25%;
  width:28%;
  height:150%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-17deg);
  animation:home-ten-shine 3.8s 1.1s ease-in-out infinite;
}
@keyframes home-ten-shine { 0%,68%{transform:translateX(0) skewX(-17deg)} 88%,100%{transform:translateX(520%) skewX(-17deg)} }

.home-actions {
  border:1.5px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,rgba(255,253,245,.76),rgba(255,244,220,.68));
  box-shadow:0 4px 0 rgba(178,132,67,.08),0 14px 26px rgba(66,105,108,.1),inset 0 2px 0 rgba(255,255,255,.92);
}

.btn-start { position:relative; overflow:hidden; isolation:isolate; }
.btn-start::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:-28%;
  top:-35%;
  width:20%;
  height:170%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  transform:skewX(-17deg);
  animation:start-button-shine 4.2s 1.8s ease-in-out infinite;
}
@keyframes start-button-shine { 0%,72%{transform:translateX(0) skewX(-17deg)} 91%,100%{transform:translateX(710%) skewX(-17deg)} }

/* Home rule demo -----------------------------------------------------------
   The old 2 + 8 row taught a two-tile game. The live rule is a rectangle,
   so the smallest honest example is a 2x2 board whose three numbers total
   ten. The outline and dot rehearse the same corner-to-corner gesture used
   on the real board without adding another tutorial panel. */
.home-rule-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  color: #786253;
  font-family: var(--font-display);
}

.home-rule-demo > em {
  color: #685b55;
  font-size: 14px;
  font-style: normal;
  white-space: nowrap;
}

.home-rule-demo > b { font-size: 17px; font-weight: 400; }

.home-rule-demo > strong {
  min-width: 38px;
  padding: 4px 8px 3px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff91a7, #ff6685);
  box-shadow: 0 3px 0 #d94e6b, inset 0 1px 0 rgba(255,255,255,.7);
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(177,53,82,.24);
}

.home-rule-demo > i {
  color: #e85a78;
  font-size: 13px;
  font-style: normal;
}

.home-mini-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 23px);
  grid-template-rows: repeat(2, 23px);
  gap: 2px;
  padding: 2px;
}

.home-mini-board > span {
  display: grid;
  place-items: center;
  border: 1px solid rgba(111,137,151,.28);
  border-radius: 7px;
  background: rgba(239,250,247,.92);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(73,93,103,.1);
  color: #315b78;
  font-size: 14px;
  line-height: 1;
}

.home-mini-board > span:nth-child(2),
.home-mini-board > span:nth-child(4) { background: rgba(255,244,207,.94); }

.home-mini-selection {
  position: absolute;
  inset: -1px;
  border: 2px solid #ffbd45;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 0 9px rgba(255,190,64,.38);
  transform-origin: 4px 4px;
  animation: home-rectangle-demo 3.2s ease-in-out infinite;
}

.home-mini-drag {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ff718f;
  box-shadow: 0 2px 4px rgba(184,73,97,.25);
  animation: home-drag-dot 3.2s ease-in-out infinite;
}

@keyframes home-rectangle-demo {
  0%, 13% { opacity: .25; transform: scale(.24); }
  34%, 70% { opacity: 1; transform: scale(1); }
  82%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes home-drag-dot {
  0%, 13% { opacity: 1; transform: translate(0,0) scale(.9); }
  34%, 70% { opacity: 1; transform: translate(42px,42px) scale(1); }
  82%, 100% { opacity: 0; transform: translate(42px,42px) scale(.65); }
}

@media (prefers-reduced-motion: reduce) {
  .home-mini-selection,
  .home-mini-drag { animation: none; }
  .home-mini-drag { opacity: 0; }
}

.home-ranking-button {
  box-shadow:0 3px 0 rgba(197,155,90,.14),0 7px 12px rgba(94,73,47,.07),inset 0 2px 0 rgba(255,255,255,.94);
}
.best-record-card {
  border-color:rgba(99,192,171,.5);
  background:linear-gradient(180deg,rgba(238,255,250,.94),rgba(211,246,237,.9));
  box-shadow:0 3px 0 rgba(65,159,140,.1),0 7px 12px rgba(54,120,107,.08),inset 0 2px 0 #fff;
}
.best-record-card strong::after { content:"점"; margin-left:2px; color:#7a948d; font-family:var(--font-sans); font-size: 11px; font-weight:800; }

.screen-result {
  background:
    radial-gradient(ellipse at 50% 9%,rgba(255,255,255,.9),transparent 30%),
    linear-gradient(180deg,rgba(232,250,252,.72),rgba(255,251,235,.9) 68%,rgba(255,247,225,.92)),
    url("../assets/backgrounds/home-bg@2x.webp") center/cover no-repeat;
}

.result-card {
  isolation:isolate;
  border-color:rgba(221,186,123,.72);
  background:linear-gradient(180deg,rgba(255,255,250,.97),rgba(255,248,228,.95));
  box-shadow:0 4px 0 rgba(185,132,65,.11),0 16px 28px rgba(71,99,98,.11),inset 0 2px 0 #fff;
}
.result-card::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:12%;
  right:12%;
  top:-20px;
  height:74px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,224,143,.22),transparent 70%);
}

.result-score-label {
  padding:3px 10px 2px;
  border-radius:99px;
  background:rgba(255,247,222,.72);
}
.final-score { margin-top:4px; }

.score-comparisons {
  border-color:rgba(225,192,134,.62);
  background:linear-gradient(180deg,rgba(255,250,233,.88),rgba(255,245,216,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.score-compare-primary { font-family:var(--font-display); font-weight:400; letter-spacing:0; }

.result-record-meter > i { height:8px; }
.result-record-meter b { box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 8px rgba(255,126,153,.12); }

.result-grid > div {
  min-height:51px;
  border-color:rgba(222,195,147,.6);
  background:rgba(255,255,250,.78);
  box-shadow:0 2px 0 rgba(190,146,83,.06),inset 0 1px 0 #fff;
}
.result-grid > div:nth-child(1){background:linear-gradient(180deg,rgba(255,252,235,.92),rgba(255,244,211,.82))}
.result-grid > div:nth-child(2){background:linear-gradient(180deg,rgba(239,255,250,.92),rgba(218,247,238,.82))}
.result-grid > div:nth-child(3){background:linear-gradient(180deg,rgba(255,247,250,.92),rgba(255,227,235,.78))}

.result-cat-row::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:5px;
  bottom:9px;
  width:126px;
  height:18px;
  border-radius:50%;
  background:rgba(72,133,145,.12);
  filter:blur(6px);
}
.result-message {
  display:grid;
  place-items:center;
  border-color:rgba(222,181,116,.7);
  background:linear-gradient(180deg,rgba(255,255,249,.98),rgba(255,248,226,.96));
  box-shadow:0 3px 0 rgba(197,146,72,.1),0 9px 17px rgba(75,67,51,.08),inset 0 1px 0 #fff;
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:0;
}
.result-message::before { border-color:rgba(222,181,116,.7); background:rgba(255,250,232,.98); }

.result-actions { gap:10px; }
.result-actions .btn-primary {
  box-shadow:0 5px 0 #d94d69,0 12px 20px rgba(224,74,104,.19),inset 0 2px 0 rgba(255,255,255,.65);
}
.result-share-button,.result-ranking-button { box-shadow:0 3px 0 rgba(126,116,89,.13),0 8px 13px rgba(76,78,66,.07),inset 0 2px 0 rgba(255,255,255,.9); }
.result-home-button { border:1px solid rgba(255,255,255,.65); box-shadow:0 4px 10px rgba(69,90,81,.05); }

.screen-result[data-result-tone="record"] .result-card::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.5) 43%,transparent 58%);
  transform:translateX(-90%);
  animation:record-card-shine 1.2s 220ms ease-out both;
}
@keyframes record-card-shine { to{transform:translateX(90%)} }

/* 2026-08 pause, settings and local-record overlay pass */
.overlay {
  padding:clamp(16px,5vw,24px);
  background:rgba(55,72,92,.3);
  backdrop-filter:blur(7px) saturate(.88);
  -webkit-backdrop-filter:blur(7px) saturate(.88);
}

/* 2026-08 unobstructed gameplay feedback rail */
.play-hud { position: relative; z-index: 20; }

.play-feedback-rail {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: -24px;
  width: min(92%, 360px);
  height: 30px;
  pointer-events: none;
  transform: translateX(-50%);
}

.play-feedback-rail .round-clear,
.play-feedback-rail .combo-celebration {
  left: 50%;
  top: 0;
  margin: 0;
}

.play-feedback-rail .round-clear {
  gap: 5px;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 14px;
  background: rgba(255,250,226,.98);
  box-shadow: 0 4px 10px rgba(157,108,42,.13), inset 0 1px 0 #fff;
  transform: translate(-50%,-4px) scale(.84);
}

.play-feedback-rail .round-clear.is-visible {
  animation: clear-rail-pop 620ms cubic-bezier(.18,.84,.24,1.12) both;
}

.play-feedback-rail .combo-celebration {
  min-width: 120px;
  min-height: 28px;
  padding: 4px 9px 5px;
  border-radius: 14px;
  transform: translate(-50%,-4px) scale(.8);
}

.play-feedback-rail .combo-celebration.is-visible {
  animation: combo-rail-pop 700ms cubic-bezier(.16,.82,.24,1.12) both;
}
.play-feedback-rail .combo-celebration[data-level="5"].is-visible { animation-duration: 760ms; }
.play-feedback-rail .combo-celebration[data-level="8"].is-visible { animation-duration: 820ms; }

@keyframes clear-rail-pop {
  0% { opacity:0; transform:translate(-50%,-8px) scale(.76); }
  24% { opacity:1; transform:translate(-50%,0) scale(1.04); }
  70% { opacity:1; transform:translate(-50%,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-7px) scale(.96); }
}

@keyframes combo-rail-pop {
  0% { opacity:0; transform:translate(-50%,-8px) scale(.72); }
  22% { opacity:1; transform:translate(-50%,0) scale(1.05); }
  70% { opacity:1; transform:translate(-50%,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-7px) scale(.96); }
}

.tutorial-callout {
  position:absolute;
  left:50%;
  top:0;
  z-index:2;
  width:max-content;
  max-width:calc(100% - 24px);
  min-height: 27px;
  padding: 5px 12px;
  border-radius:99px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,251,237,.98);
  box-shadow: 0 3px 8px rgba(102,75,54,.11), inset 0 1px 0 #fff;
  color:#a65f6f;
  font-family:var(--font-display);
  font-size: clamp(13px,3.7vw,15px);
  font-weight:400;
  text-align:center;
  white-space: nowrap;
  opacity:0;
  transform:translate(-50%,-7px) scale(.94);
  transition:opacity 120ms ease,transform 160ms cubic-bezier(.18,.82,.24,1.12);
}
.tutorial-callout.is-visible { opacity:1; transform:translate(-50%,0) scale(1); }

.board-zone,
.board-frame { overflow: visible; }

@media (max-width: 365px) {
  .play-feedback-rail { bottom: -22px; height: 28px; }
  .play-feedback-rail .round-clear strong { font-size: 13px; }
  .play-feedback-rail .combo-celebration strong { font-size: 16px; }
  .tutorial-callout { font-size: 13px; }
}

.mini-panel {
  border:1.5px solid rgba(225,190,129,.82);
  border-radius:27px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.9),transparent 34%),
    linear-gradient(180deg,rgba(255,254,247,.99),rgba(255,246,224,.98));
  box-shadow:0 5px 0 rgba(152,112,62,.11),0 22px 48px rgba(39,58,76,.24),inset 0 2px 0 #fff;
  animation:panel-in-premium 230ms cubic-bezier(.18,.82,.24,1.12);
}
@keyframes panel-in-premium {
  from{opacity:0;transform:translateY(12px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.pause-panel {
  width:min(100%,318px);
  padding:63px 20px 18px;
  overflow:visible;
}
.pause-character-stage {
  position:absolute;
  left:50%;
  top:-48px;
  width:116px;
  height:101px;
  transform:translateX(-50%);
  filter:drop-shadow(0 6px 7px rgba(67,100,111,.14));
}
.pause-character-stage::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:8px;
  width:66%;
  height:12px;
  border-radius:50%;
  background:rgba(71,123,133,.13);
  filter:blur(5px);
  transform:translateX(-50%);
}
.pause-character-stage img{width:100%;height:100%;object-fit:contain}
.pause-panel h2 { margin-bottom:3px; font-family:var(--font-display); font-size:24px; font-weight:400; }
.pause-panel > p { margin-bottom:13px; font-family:var(--font-display); font-size:15px; line-height:1.25; }
.pause-panel .btn-primary { min-height:54px; font-size:19px; }

.pause-quick-actions { gap:9px; margin-top:11px; }
.pause-tool-button {
  min-height:51px;
  border-color:rgba(221,188,131,.72);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(255,255,250,.96),rgba(255,244,219,.94));
  box-shadow:0 3px 0 rgba(175,128,67,.1),0 7px 12px rgba(81,69,51,.07),inset 0 2px 0 #fff;
}
.pause-tool-button.music-button[aria-pressed="true"] {
  border-color:rgba(90,197,174,.62);
  background:linear-gradient(180deg,#f2fffb,#d2f5eb);
  color:#3e8377;
}
.pause-panel .text-button {
  margin-top:12px;
  color:#8d8176;
  font-family:var(--font-display);
  font-weight:400;
  text-decoration:none;
}

.settings-panel { width:min(100%,324px); padding:18px 20px 20px; }
.settings-heading {
  min-height:57px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-right:24px;
  margin-bottom:5px;
}
.settings-heading img { width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(119,91,57,.12)); }
.settings-heading > div { display:grid; justify-items:start; }
.settings-heading h2 { margin:0; font-family:var(--font-display); font-size:23px; font-weight:400; line-height:1; }
.settings-heading p { margin:3px 0 0; color:#99877a; font-family:var(--font-display); font-size:12px; line-height:1; }

.overlay-close {
  right:11px;
  top:11px;
  width:38px;
  height:38px;
  border:1px solid rgba(220,195,154,.5);
  background:linear-gradient(180deg,rgba(255,255,251,.94),rgba(245,233,211,.92));
  box-shadow:0 2px 0 rgba(152,117,72,.08),inset 0 1px 0 #fff;
}
.overlay-close i::before,.overlay-close i::after { left:11px; top:18px; width:16px; }

.setting-row {
  min-height:55px;
  padding:0 7px;
  border-top:1px solid rgba(226,202,161,.55);
  color:#685e58;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:400;
}
.setting-row > span { display:flex; align-items:center; gap:8px; }
.setting-row > span::before {
  content:"";
  width:25px;
  height:25px;
  flex:0 0 auto;
  border-radius:9px;
  background:radial-gradient(circle at 35% 30%,#fff,#ffe7ac 72%);
  box-shadow:0 1px 0 rgba(176,129,66,.12),inset 0 1px 0 #fff;
}
.setting-row:nth-of-type(3) > span::before { background:radial-gradient(circle at 35% 30%,#fff,#c8f2e7 72%); }
.setting-row:nth-of-type(4) > span::before { background:radial-gradient(circle at 35% 30%,#fff,#ffd6df 72%); }

.toggle {
  position:relative;
  width:57px;
  height:31px;
  padding:0 7px 0 25px;
  border:1px solid rgba(139,139,134,.14);
  background:#d6d5d0;
  box-shadow:inset 0 2px 4px rgba(73,75,74,.14);
  text-align:right;
  transition:background 140ms ease,padding 140ms ease,box-shadow 140ms ease;
}
.toggle::before {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:23px;
  height:23px;
  border-radius:50%;
  background:linear-gradient(#fff,#f5f3ed);
  box-shadow:0 2px 4px rgba(72,72,67,.2),inset 0 1px 0 #fff;
  transition:transform 140ms cubic-bezier(.18,.82,.24,1.12);
}
.toggle.is-on {
  padding:0 28px 0 6px;
  background:linear-gradient(180deg,#7cd9c5,#58c6af);
  box-shadow:inset 0 2px 3px rgba(31,124,106,.16),0 0 0 2px rgba(98,205,183,.08);
  text-align:left;
}
.toggle.is-on::before { transform:translateX(26px); }

.music-volume-row {
  padding:12px 7px 4px;
  border-top:1px solid rgba(226,202,161,.55);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:400;
}
.music-volume-row b { min-width:43px; padding:3px 7px 2px; border-radius:99px; background:rgba(216,247,239,.8); font-family:var(--font-sans); text-align:center; }
.music-volume {
  height:34px;
  margin-top:1px;
  accent-color:#5ec8b1;
}
.music-volume::-webkit-slider-runnable-track { height:8px; border:1px solid rgba(100,181,163,.28); border-radius:99px; background:linear-gradient(90deg,#9be5d4,#e7dac2); box-shadow:inset 0 1px 2px rgba(76,106,96,.09); }
.music-volume::-webkit-slider-thumb { width:22px; height:22px; margin-top:-8px; border:2px solid #fff; border-radius:50%; background:#62cdb6; box-shadow:0 2px 5px rgba(47,125,110,.24); -webkit-appearance:none; }

.ranking-panel {
  border-color:rgba(222,185,119,.84);
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 8%,rgba(145,221,215,.24),transparent 27%),
    radial-gradient(circle at 8% 22%,rgba(255,178,197,.19),transparent 25%),
    linear-gradient(180deg,#fffdf5,#fff5df);
}
.record-best { box-shadow:0 3px 0 rgba(205,149,65,.11),0 9px 17px rgba(114,87,52,.08),inset 0 2px 0 white; }
.record-stats > div:nth-child(1){background:rgba(255,249,229,.9)}
.record-stats > div:nth-child(2){background:rgba(232,252,246,.9)}
.record-stats > div:nth-child(3){background:rgba(255,237,243,.86)}
.record-history { box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 12px rgba(66,114,101,.05); }
.ranking-play-button { min-height:51px; box-shadow:0 4px 0 #d94d69,0 9px 15px rgba(224,74,104,.15),inset 0 2px 0 rgba(255,255,255,.62); }
.record-online-note { color:#978c80; }

@media (max-height:690px) {
  .pause-panel { padding-top:55px; }
  .pause-character-stage { top:-42px; width:105px; height:92px; }
  .settings-panel { padding-block:14px 16px; }
  .settings-heading { min-height:48px; }
  .settings-heading img { width:43px; height:43px; }
  .setting-row { min-height:48px; }
  .ranking-panel { padding-top:14px; }
  .record-bars { height:74px; }
}

/* 2026-08 stage progression pass ------------------------------------------------
   Keeps the established OING art direction while giving play information a
   clearer mobile hierarchy and adding lightweight special-tile feedback. */
.best-record-card span small {
  display: block;
  margin: 1px 0 0;
  color: #4f9d8e;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .015em;
}
.best-record-card span { min-width: 0; line-height: 1.05; }
.best-record-card strong { min-width: max-content; white-space: nowrap; font-size: 12px; }

.screen-play {
  row-gap: 6px;
  padding-top: calc(7px + var(--safe-top));
}

.play-hud {
  grid-template-rows: 34px 25px 19px;
  gap: 2px;
  padding: 5px 9px 6px;
  border-color: rgba(255,255,255,.68);
  border-radius: 18px;
  background: rgba(255,253,246,.72);
  box-shadow: 0 3px 12px rgba(66,114,130,.075), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hud-topline {
  grid-template-columns: 74px minmax(72px,1fr) minmax(98px,112px);
  gap: 7px;
}

.screen-play.is-untimed .hud-topline {
  grid-template-columns: 74px minmax(88px,1fr) 74px;
}

.screen-play.is-untimed .hud-topline::after {
  content: "";
  width: 74px;
  height: 1px;
}

.time-readout[hidden] { display: none !important; }

.round-mini {
  min-height: 32px;
  padding: 2px 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.round-mini span {
  color: #688096;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .055em;
}

.round-mini strong {
  color: #334f6e;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: .9;
}

.time-readout {
  min-height: 32px;
  padding-inline: 7px 9px;
  border: 1px solid rgba(91,179,205,.36);
  border-radius: 14px;
  background: rgba(239,252,255,.86);
  box-shadow: inset 0 1px 0 #fff;
}

.time-readout strong {
  color: #315b77;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.hud-secondline {
  min-height: 25px;
  padding-inline: 4px;
}

.score-readout,
.combo-readout {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.score-readout img,
.combo-readout img { width: 15px; height: 15px; }
.score-readout span,
.combo-readout span { color: #788592; font-size: 10px; } /* 이 줄은 나중 "2026-08 stage progression
  pass"에서 촘촘하게 맞춘 값 — 11px로 올리면 COMBO 라벨이 넘쳐서 왼쪽이 잘린다. 원래 값 유지. */
.score-readout strong,
.combo-readout strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.combo-readout { justify-self: end; }

.goal-status {
  min-height: 18px;
  display: grid;
  grid-template-columns: max-content minmax(72px,1fr);
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.goal-meta {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.goal-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: #617287;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.goal-copy b {
  color: #e5617c;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.goal-copy em { color: #778493; font-style: normal; }
.goal-track { height: 5px; border: 0; background: rgba(222,213,188,.55); }
.goal-status.is-complete .goal-track { box-shadow: 0 0 0 2px rgba(255,208,113,.16); }

.board-zone { align-self: center; }
.board-frame { isolation: isolate; }

.tile.is-empty:not(.is-board-item):not(.is-bonus-cat) {
  border-color: rgba(196,169,126,.12);
  background: rgba(255,251,240,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  filter: none;
  opacity: .46;
}

.tile.is-special-tile { overflow: visible; }
.special-tile-badge {
  position: absolute;
  z-index: 3;
  right: 3px;
  top: 3px;
  width: clamp(14px,4.1vw,18px);
  height: clamp(14px,4.1vw,18px);
  padding: 2px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 4px rgba(77,86,87,.13), inset 0 1px 0 #fff;
  pointer-events: none;
}
.tile.special-bomb { box-shadow: 0 0 0 1.5px rgba(241,112,132,.3), 0 3px 7px rgba(188,75,96,.12); }
.tile.is-special-triggered .special-tile-badge { animation: special-badge-pop 300ms cubic-bezier(.18,.82,.24,1.2) both; }
.tile.is-special-blast { animation: special-blast-tile 290ms var(--blast-delay,0ms) cubic-bezier(.2,.72,.25,1) both; }

.special-trigger-pop {
  position: absolute;
  z-index: 35;
  min-width: 48px;
  padding: 5px 8px 4px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 99px;
  background: #fff9e6;
  box-shadow: 0 5px 12px rgba(70,90,92,.14), inset 0 1px 0 #fff;
  color: #e35f79;
  font-family: var(--font-display);
  font-size: 15px;
  text-align: center;
  pointer-events: none;
  animation: special-trigger-float 500ms cubic-bezier(.18,.82,.24,1.1) both;
}
.special-trigger-clock { color: #318ba4; background: #edfcff; }

@keyframes special-badge-pop {
  0% { transform: scale(.8) rotate(-8deg); }
  55% { transform: scale(1.32) rotate(7deg); filter: brightness(1.14); }
  100% { transform: scale(.3); opacity: 0; }
}
@keyframes special-blast-tile {
  0% { transform: scale(1); opacity: 1; }
  48% { transform: scale(1.04); filter: brightness(1.16); }
  100% { transform: scale(.72); opacity: 0; }
}
@keyframes special-trigger-float {
  0% { opacity: 0; transform: translate(-50%,-35%) scale(.7); }
  28% { opacity: 1; transform: translate(-50%,-75%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%,-145%) scale(.94); }
}

.play-feedback-rail { bottom: -25px; height: 34px; }
.play-feedback-rail .round-clear {
  min-height: 32px;
  padding: 6px 13px;
  background: rgba(255,249,220,.985);
}
.play-feedback-rail .round-clear strong { color: #d96474; font-size: clamp(14px,4.2vw,17px); }
.play-feedback-rail .round-clear.is-visible { animation-duration: 900ms; }

.play-feedback-rail .combo-celebration { min-height: 31px; }
.play-feedback-rail .combo-celebration[data-level="5"] strong { font-size: 18px; }
.play-feedback-rail .combo-celebration[data-level="8"] strong { font-size: 20px; }

.tutorial-callout {
  top: -2px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 24px;
  padding: 4px 11px 3px;
  border-radius: 99px;
  white-space: nowrap;
}
.tutorial-callout span { color: #6d7885; font-family: var(--font-sans); font-size: 11px; font-weight: 800; }
.tutorial-callout strong { color: #e35f79; font-family: var(--font-display); font-size: 12px; font-weight: 400; }

/* Sequenced reward feedback: match confirmation → score → combo. */
.match-confirmation {
  position: absolute;
  z-index: 16;
  min-width: 74px;
  padding: 5px 11px 4px;
  border: 1.5px solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: linear-gradient(180deg,rgba(255,255,247,.98),rgba(255,231,220,.96));
  box-shadow: 0 0 0 4px rgba(255,136,163,.12),0 6px 14px rgba(191,75,105,.16),inset 0 1px 0 #fff;
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: clamp(15px,4.5vw,18px);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%,-100%);
  animation: match-confirmation-pop 500ms cubic-bezier(.16,.82,.24,1.12) both;
}

@keyframes match-confirmation-pop {
  0% { opacity:0; transform:translate(-50%,-72%) scale(.68); }
  24% { opacity:1; transform:translate(-50%,-108%) scale(1.08); }
  66% { opacity:1; transform:translate(-50%,-112%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-142%) scale(.94); }
}

.play-feedback-rail .round-clear {
  min-width: min(286px,calc(100vw - 42px));
  min-height: 44px;
  padding: 6px 12px 7px;
}
.play-feedback-rail .round-clear > div {
  display:grid;
  justify-items:center;
  gap:1px;
  line-height:1;
}
.play-feedback-rail .round-clear strong { font-size:clamp(13px,3.8vw,16px); }
.play-feedback-rail .round-clear span {
  color:#32a695;
  font-family:var(--font-display);
  font-size:clamp(10px,3vw,12px);
  white-space:nowrap;
}

.stage-time-bonus {
  position:absolute;
  z-index:30;
  min-width:72px;
  padding:4px 9px 3px;
  border:1px solid rgba(255,255,255,.94);
  border-radius:999px;
  background:linear-gradient(180deg,#f5fffc,#cef5e9);
  box-shadow:0 0 0 4px rgba(93,212,183,.14),0 5px 12px rgba(46,148,126,.18),inset 0 1px 0 #fff;
  color:#2c9e8a;
  font-family:var(--font-display);
  font-size:16px;
  text-align:center;
  pointer-events:none;
  transform:translate(-50%,0);
  animation:stage-time-bonus 800ms cubic-bezier(.16,.82,.24,1.1) both;
}
.time-readout.is-bonus-awarded { animation:time-bonus-pill 680ms cubic-bezier(.16,.82,.24,1.12) both; }

@keyframes stage-time-bonus {
  0% { opacity:0; transform:translate(-50%,-8px) scale(.72); }
  24% { opacity:1; transform:translate(-50%,1px) scale(1.08); }
  68% { opacity:1; transform:translate(-50%,3px) scale(1); }
  100% { opacity:0; transform:translate(-50%,-12px) scale(.94); }
}
@keyframes time-bonus-pill {
  0%,100% { transform:scale(1); }
  36% { transform:scale(1.08); box-shadow:0 0 0 5px rgba(95,211,184,.2),0 0 17px rgba(74,194,169,.2),inset 0 1px 0 #fff; }
}

.board.is-shuffling-out .tile { animation-duration: 340ms; }
.board.is-shuffling-in .tile { animation-duration: 360ms; }
.shuffle-fx { animation-duration: 760ms; }

.shuffle-fx strong {
  position:absolute;
  z-index:4;
  left:50%;
  top:calc(50% + 38px);
  padding:3px 9px 2px;
  border:1px solid rgba(255,255,255,.94);
  border-radius:999px;
  background:rgba(239,255,250,.96);
  box-shadow:0 4px 10px rgba(43,149,132,.16),inset 0 1px 0 #fff;
  color:#35a88f;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:400;
  transform:translateX(-50%);
  animation:shuffle-label-pop 700ms ease-out both;
}

@keyframes shuffle-label-pop {
  0%,12% { opacity:0; transform:translate(-50%,5px) scale(.72); }
  34%,68% { opacity:1; transform:translate(-50%,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-6px) scale(.92); }
}

.tile.is-bomb-target {
  z-index:3;
  animation:bomb-target-prime 180ms var(--bomb-preview-delay,0ms) cubic-bezier(.2,.8,.25,1.12) both;
}

.bomb-target-region {
  position:absolute;
  z-index:17;
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.9);
  border-radius:17px;
  background:rgba(255,125,137,.08);
  box-shadow:0 0 0 3px rgba(255,116,130,.22),inset 0 0 16px rgba(255,189,104,.14);
  color:#e85e72;
  font-family:var(--font-display);
  font-size:clamp(15px,4vw,18px);
  text-shadow:0 1px 0 #fff;
  pointer-events:none;
  animation:bomb-target-region 220ms cubic-bezier(.2,.78,.24,1.08) both;
}

@keyframes bomb-target-prime {
  0% { transform:scale(1); filter:brightness(1); }
  68% { transform:scale(.95); filter:brightness(1.12) saturate(1.08); }
  100% { transform:scale(.97); filter:brightness(1.06); }
}

@keyframes bomb-target-region {
  from { opacity:0; transform:scale(.92); }
  to { opacity:1; transform:scale(1); }
}

.clock-flight.is-urgent img {
  width:52px;
  height:56px;
  filter:drop-shadow(0 0 10px rgba(72,198,186,.42)) drop-shadow(0 5px 9px rgba(44,131,158,.26));
}

.clock-flight.is-urgent strong {
  color:#218f83;
  background:#effff9;
  box-shadow:0 0 0 4px rgba(87,215,190,.14),0 4px 9px rgba(49,138,152,.16);
}

.time-rescue-label {
  position:absolute;
  z-index:32;
  padding:4px 10px 3px;
  border:1px solid rgba(255,255,255,.96);
  border-radius:999px;
  background:linear-gradient(180deg,#f4fffb,#c9f5e7);
  box-shadow:0 0 0 4px rgba(83,210,183,.13),0 5px 12px rgba(45,150,128,.17);
  color:#299b86;
  font-family:var(--font-display);
  font-size:14px;
  white-space:nowrap;
  pointer-events:none;
  animation:time-rescue-pop 740ms cubic-bezier(.16,.8,.24,1.12) both;
}

@keyframes time-rescue-pop {
  0% { opacity:0; transform:translate(-50%,-5px) scale(.72); }
  24%,70% { opacity:1; transform:translate(-50%,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-12px) scale(.94); }
}

.combo-chip.is-expiring {
  animation:combo-expiring 320ms ease-in-out infinite alternate;
}

.combo-chip.is-expiring .combo-timer-fill {
  background:linear-gradient(90deg,#ffb46f,#ff718e);
}

@keyframes combo-expiring {
  from { transform:scale(1); }
  to { transform:scale(1.035); filter:saturate(1.1); }
}

.item-actions {
  gap: clamp(5px,1.5vw,7px);
  padding: 6px 8px 8px;
  border-radius: 18px;
  background: rgba(255,251,240,.82);
  box-shadow: 0 3px 0 rgba(160,121,65,.07), 0 7px 14px rgba(61,96,105,.07), inset 0 1px 0 #fff;
}
.item-button {
  min-height: 44px;
  height: clamp(50px,14.5vw,57px);
  border-radius: 15px;
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--item-accent) 26%,#d8c9aa), 0 3px 0 color-mix(in srgb,var(--item-accent) 24%,#bfad8c), inset 0 1px 0 #fff;
}
.item-icon { width: clamp(23px,7vw,29px); height: clamp(24px,7.3vw,30px); }
.item-button > span { font-size: clamp(11px,3.1vw,13px); }
.item-button b { width: 21px; height: 21px; font-size: 13px; }
.item-button.is-stage-locked::after { content: "잠금"; font-size: 10px; }

.play-character-stage img[data-pose="success"],
.play-character-stage img[data-pose="cheer"] { animation: cat-happy-bounce 520ms cubic-bezier(.18,.82,.24,1.15) both; }
.play-character-stage img[data-pose="fail"] { animation: cat-unsure 520ms ease both; }
.play-character-stage img[data-pose="wave"] { animation: cat-wave-tilt 620ms cubic-bezier(.18,.82,.24,1.1) both; }
.screen-play.is-final-countdown .play-character-stage img { animation: cat-nervous 520ms ease-in-out infinite alternate; }

@keyframes cat-happy-bounce {
  0% { transform: translateY(1px) scale(.98); }
  45% { transform: translateY(-7px) scale(1.025) rotate(-1.5deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes cat-unsure {
  0% { transform: rotate(0); }
  30% { transform: rotate(-2.5deg) translateX(-2px); }
  65% { transform: rotate(2deg) translateX(2px); }
  100% { transform: rotate(0); }
}
@keyframes cat-wave-tilt {
  0% { transform: translateY(1px) rotate(0); }
  48% { transform: translateY(-3px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes cat-nervous {
  from { transform: translateX(-1px) rotate(-.7deg); }
  to { transform: translateX(1px) rotate(.7deg); }
}

.result-stage-progress {
  margin: 0 0 3px;
  color: #546d88;
  font-family: var(--font-display) !important;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 340px) {
  .screen-play { padding-inline: 10px; }
  .hud-topline { grid-template-columns: 67px minmax(63px,1fr) 96px; gap: 4px; }
  .screen-play.is-untimed .hud-topline { grid-template-columns: 67px minmax(76px,1fr) 67px; }
  .screen-play.is-untimed .hud-topline::after { width: 67px; }
  .hud-controls { gap: 2px; }
  .hud-mini-button { width: 25px; height: 25px; }
  .pause-quick-actions { gap: 5px; }
  .pause-tool-button { min-height: 52px; padding-inline: 2px; font-size: 12px; }
  .round-mini strong { font-size: 18px; }
  .time-readout { min-width: 0; }
  .time-readout strong { font-size: 17px; }
  .goal-status { gap: 6px; }
  .item-actions { gap: 4px; padding-inline: 5px; }
  .item-button { height: 48px; }
  .item-button > span { font-size: 11px; }
  .cat-message { font-size: 14px; }
}

@media (max-width: 320px) {
  .screen-play { --board-edge: min(calc(100vw - 18px), calc(100dvh - 210px)); padding-inline: 9px; }
  .play-hud { padding-inline: 6px; }
  .score-readout span,
  .combo-readout span { display: none; }
  .item-button > span { font-size: 11px; }
  .special-tile-badge { right: 2px; top: 2px; width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.is-special-triggered .special-tile-badge,
  .tile.is-special-blast,
  .special-trigger-pop,
  .play-character-stage img[data-pose],
  .match-confirmation,
  .stage-time-bonus,
  .time-readout.is-bonus-awarded,
  .board-frame.is-fever,
  .board-frame.is-fever .board,
  .board-frame.is-fever-expiring,
  .combo-chip.is-expiring,
  .tile.is-bomb-target,
  .bomb-target-region,
  .shuffle-fx strong,
  .time-rescue-label { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* Play composition: keep the board dominant while treating the lower area as
   one coach-and-tools stage instead of two unrelated floating blocks. */
.screen-play {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.play-hud {
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.play-footer {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  align-content: stretch;
  grid-template-rows: auto minmax(112px, 1fr);
  gap: clamp(5px, 0.9dvh, 9px);
  min-height: 184px;
  height: 100%;
  margin-top: 1px;
  padding: 0 1px calc(4px + var(--safe-bottom));
}

.play-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 4%;
  bottom: calc(8px + var(--safe-bottom));
  height: clamp(112px, 18dvh, 154px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 32% 58%, rgba(255, 255, 255, 0.68), transparent 49%),
    radial-gradient(ellipse at 50% 72%, rgba(207, 239, 205, 0.5), rgba(255, 247, 220, 0.2) 62%, transparent 72%);
  filter: blur(0.2px);
  pointer-events: none;
}

.play-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 7px calc(22px + var(--safe-bottom)) 7px;
  height: clamp(96px, 15dvh, 128px);
  background-image:
    url("../assets/decor/flower.webp"),
    url("../assets/decor/paw.webp"),
    url("../assets/decor/sparkle.webp");
  background-repeat: no-repeat;
  background-position: 7% 88%, 94% 80%, 81% 19%;
  background-size: 30px auto, 24px auto, 17px auto;
  opacity: 0.18;
  pointer-events: none;
}

.item-actions {
  z-index: 2;
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-soft);
  box-shadow: var(--ui-shadow-raised), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.item-button {
  border-radius: var(--ui-radius-control);
}

.cat-coach {
  z-index: 1;
  align-self: start;
  width: min(100%, 354px);
  height: clamp(138px, 20dvh, 170px);
  grid-template-columns: clamp(128px, 35vw, 148px) minmax(0, 1fr);
  gap: 2px;
  margin: 0 auto;
  padding-inline: 3px 5px;
}

.play-character-stage {
  width: clamp(126px, 34vw, 146px);
  height: clamp(132px, 19dvh, 160px);
  transform: none;
}

.cat-message {
  max-width: min(100%, 238px);
  min-height: 50px;
  padding: 8px 14px 7px;
  border-color: var(--ui-line);
  border-radius: 18px 18px 18px 10px;
  background: rgba(255, 254, 247, 0.97);
  box-shadow: 0 3px 0 rgba(194, 145, 75, 0.1), var(--ui-shadow-soft), inset 0 1px 0 #fff;
  font-size: clamp(16px, 4.5vw, 18px);
}

.cat-message::before {
  border-color: var(--ui-line);
  background: rgba(255, 254, 247, 0.97);
}

@media (max-height: 815px) {
  .play-footer {
    grid-template-rows: auto minmax(94px, 1fr);
    min-height: 158px;
    height: 100%;
  }

  .cat-coach {
    height: clamp(94px, 14.5dvh, 116px);
    grid-template-columns: clamp(91px, 25vw, 108px) minmax(0, 1fr);
  }

  .play-character-stage {
    width: clamp(90px, 24.5vw, 106px);
    height: clamp(92px, 14dvh, 112px);
  }

  .cat-message { min-height: 44px; font-size: clamp(15px, 4.2vw, 17px); }
}

@media (max-height: 690px) {
  .play-footer {
    grid-template-rows: auto auto;
    min-height: 0;
    height: auto;
    gap: 4px;
  }

  .cat-coach {
    height: 68px;
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .play-character-stage { width: 67px; height: 69px; }
  .play-footer::before,
  .play-footer::after { display: none; }
}

.screen-play.is-tall-board .play-footer {
  grid-template-rows: auto auto;
  min-height: 0;
  height: auto;
}

@media (max-width: 340px) {
  .play-footer { min-height: 148px; }
  .cat-coach {
    width: 100%;
    grid-template-columns: clamp(78px, 25vw, 92px) minmax(0, 1fr);
    padding-inline: 0 3px;
  }
  .play-character-stage {
    width: clamp(77px, 24vw, 90px);
    height: clamp(80px, 13dvh, 98px);
  }
  .cat-message { padding-inline: 10px; }
  .play-footer::after { background-size: 24px auto, 20px auto, 14px auto; }
}

/* Success choreography: keep feedback readable after the board redraw and
   keep milestone banners inside the HUD instead of covering playable tiles. */
.play-feedback-rail {
  top: 34px;
  bottom: auto;
  width: min(88%, 326px);
  height: 31px;
}

.play-feedback-rail .round-clear,
.play-feedback-rail .combo-celebration {
  min-height: 27px;
  max-height: 31px;
  padding: 3px 9px 4px;
  border-radius: 13px;
}

.play-feedback-rail .combo-celebration {
  min-width: 112px;
  gap: 5px;
}

.play-feedback-rail .combo-celebration[data-level="5"] { min-width: 124px; }
.play-feedback-rail .combo-celebration[data-level="8"] { min-width: 138px; }
.play-feedback-rail .combo-celebration > img { width: 15px; height: 15px; }
.play-feedback-rail .combo-celebration small { margin-bottom: 1px; font-size: 10px; }
.play-feedback-rail .combo-celebration strong { font-size: 15px; }
.play-feedback-rail .combo-celebration b { font-size: 18px; }

.hud-secondline {
  transition: opacity 100ms ease, transform 100ms ease;
}

.screen-play.is-combo-celebrating .hud-secondline {
  opacity: 0;
  transform: scale(.985);
}

.score-burst {
  max-width: min(230px, calc(100vw - 70px));
  text-align: center;
}

.score-burst span {
  max-width: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score-burst.is-visible {
  animation: score-fly-polished 620ms cubic-bezier(.16, .76, .24, 1) both;
}

@keyframes score-fly-polished {
  0% { opacity: 0; transform: translate(-50%, 8%) scale(.76); }
  12% { opacity: 1; transform: translate(-50%, -22%) scale(1.07); }
  62% { opacity: 1; transform: translate(-50%, -72%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -126%) scale(.94); }
}

.match-confirmation {
  animation: match-confirmation-polished 410ms cubic-bezier(.16, .82, .24, 1.12) both;
}

.match-confirmation[data-level="3"] {
  color: #d9823e;
  background: linear-gradient(180deg, rgba(255,255,247,.98), rgba(255,239,196,.97));
  box-shadow: 0 0 0 4px rgba(255,196,92,.13), 0 6px 14px rgba(193,120,52,.16), inset 0 1px 0 #fff;
}

.match-confirmation[data-level="5"] {
  color: #2f9e8b;
  background: linear-gradient(180deg, rgba(250,255,252,.99), rgba(210,246,234,.97));
  box-shadow: 0 0 0 4px rgba(91,205,181,.14), 0 6px 15px rgba(51,145,128,.17), inset 0 1px 0 #fff;
}

.match-confirmation[data-level="8"] {
  color: #e54f75;
  background: linear-gradient(180deg, rgba(255,255,247,.99), rgba(255,218,230,.98));
  box-shadow: 0 0 0 5px rgba(255,116,151,.14), 0 7px 17px rgba(199,64,101,.2), inset 0 1px 0 #fff;
}

@keyframes match-confirmation-polished {
  0% { opacity: 0; transform: translate(-50%, -70%) scale(.68); }
  24% { opacity: 1; transform: translate(-50%, -108%) scale(1.08); }
  64% { opacity: 1; transform: translate(-50%, -112%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -137%) scale(.94); }
}

@media (max-width: 340px) {
  .play-feedback-rail { top: 33px; width: min(86%, 286px); }
  .play-feedback-rail .combo-celebration[data-level="8"] { min-width: 128px; }
}

/* Result composition: center the complete reward stack so the lower half no
   longer reads as unfinished space on tall phones. */
.screen-result {
  justify-content: center;
}

@media (max-height: 690px) {
  .screen-result { justify-content: flex-start; }
}

/* Stage atmosphere: progression should register around the board without
   recoloring the tiles or adding motion that competes with drag feedback. */
.screen-play {
  --stage-accent: #e7a25b;
  --stage-line: rgba(231, 162, 91, 0.2);
  --stage-glow: rgba(255, 205, 128, 0.11);
  --stage-goal-start: #ffd36e;
  --stage-goal-end: #ff8fa5;
}

.screen-play[data-stage-band="rising"] {
  --stage-accent: #55aa9b;
  --stage-line: rgba(85, 170, 155, 0.23);
  --stage-glow: rgba(104, 211, 191, 0.12);
  --stage-goal-start: #91dfce;
  --stage-goal-end: #55bba9;
}

.screen-play[data-stage-band="wide"] {
  --stage-accent: #8570b2;
  --stage-line: rgba(133, 112, 178, 0.23);
  --stage-glow: rgba(177, 149, 228, 0.12);
  --stage-goal-start: #c7b3ee;
  --stage-goal-end: #a37ed0;
}

.screen-play[data-stage-band="fever"] {
  --stage-accent: #da617d;
  --stage-line: rgba(218, 97, 125, 0.25);
  --stage-glow: rgba(255, 116, 151, 0.13);
  --stage-goal-start: #ffbd73;
  --stage-goal-end: #ed6588;
}

.screen-play[data-stage-band] .play-hud {
  border-color: var(--stage-line);
  box-shadow:
    0 3px 12px rgba(66, 114, 130, 0.075),
    0 0 0 1px var(--stage-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.screen-play[data-stage-band] .round-mini {
  position: relative;
}

.screen-play[data-stage-band] .round-mini::after {
  content: "";
  position: absolute;
  left: 34%;
  right: 34%;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--stage-accent);
  box-shadow: 0 0 7px var(--stage-glow);
  opacity: 0.72;
}

.screen-play[data-stage-band] .round-mini strong {
  color: var(--stage-accent);
}

.screen-play[data-stage-band] .goal-track i {
  background: linear-gradient(90deg, var(--stage-goal-start), var(--stage-goal-end));
}

.screen-play[data-stage-band] .board-frame {
  outline: 2px solid var(--stage-line);
  outline-offset: 2px;
  box-shadow:
    0 4px 0 rgba(174, 124, 65, 0.14),
    0 12px 24px rgba(55, 105, 121, 0.16),
    0 0 17px var(--stage-glow),
    0 0 0 3px rgba(255, 255, 255, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -5px 10px rgba(231, 194, 129, 0.09);
  transition: outline-color 260ms ease, box-shadow 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .screen-play[data-stage-band] .board-frame {
    transition: none;
  }
}

/* Board drops are one-tap rewards. Keep the icon dominant while making their
   interaction model unmistakable, even on the compact seven-column board. */
.board-item-action {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 5%;
  min-width: 25px;
  padding: 2px 5px 1px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: rgba(71, 91, 112, 0.82);
  box-shadow: 0 2px 4px rgba(57, 68, 81, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(7px, 1.9vw, 9px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
}

.tile.is-board-item .board-item-icon {
  transform: translateY(-7%);
}

.tile.is-board-item.is-item-pressed .board-item-action {
  transform: translateX(-50%) scale(0.92);
  background: rgba(43, 63, 82, 0.92);
}

.board-item-clock .board-item-action { background: rgba(54, 151, 143, 0.9); }
.board-item-freeze .board-item-action { background: rgba(77, 137, 190, 0.9); }
.board-item-clover .board-item-action { background: rgba(67, 151, 94, 0.9); }
.board-item-bomb .board-item-action { background: rgba(219, 102, 106, 0.91); }
.board-item-megabomb .board-item-action { background: rgba(223, 113, 73, 0.92); }

.tile.is-board-item.is-item-spawning .board-item-action {
  animation: board-item-action-arrive 430ms calc(var(--item-drop-delay, 0ms) + 310ms) ease-out both;
}

@keyframes board-item-action-arrive {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.72); }
  55% { opacity: 1; transform: translateX(-50%) translateY(-1px) scale(1.06); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@media (max-width: 340px) {
  .board-item-action {
    min-width: 22px;
    padding-inline: 4px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile.is-board-item.is-item-spawning .board-item-action {
    animation: none;
  }
}

/* Stage-clear reward hierarchy: use the HUD's secondary line for the brief
   celebration so no playable tile is covered. */
.screen-play.is-stage-clearing .hud-secondline {
  opacity: 0;
  transform: scale(0.985);
}

.play-feedback-rail .round-clear {
  width: max-content;
  min-width: 176px;
  max-width: 100%;
  min-height: 30px;
  max-height: 34px;
  gap: 6px;
  padding: 3px 9px 4px;
  overflow: visible;
}

.play-feedback-rail .round-clear > div {
  min-width: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}

.play-feedback-rail .round-clear strong {
  color: #d86178;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.play-feedback-rail .round-clear span {
  max-width: 230px;
  margin-top: 1px;
  overflow: hidden;
  color: #8b7159;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-feedback-rail .round-clear > img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.play-feedback-rail .round-clear.is-milestone {
  border-color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(180deg, rgba(249, 255, 252, 0.99), rgba(213, 247, 237, 0.98));
  box-shadow: 0 0 0 4px rgba(89, 199, 177, 0.1), 0 5px 12px rgba(55, 147, 129, 0.16), inset 0 1px 0 #fff;
}

.play-feedback-rail .round-clear.is-milestone strong { color: #369885; }
.play-feedback-rail .round-clear.is-milestone span { color: #527d74; }
.play-feedback-rail .round-clear.is-milestone > img { animation: stage-clear-milestone-spark 620ms ease-out both; }
.play-feedback-rail .round-clear.is-milestone > img:last-child { animation-delay: 60ms; }

@keyframes stage-clear-milestone-spark {
  0% { opacity: 0; transform: scale(0.35) rotate(-20deg); }
  42% { opacity: 1; transform: scale(1.16) rotate(9deg); }
  100% { opacity: 0.82; transform: scale(1) rotate(0); }
}

@media (max-width: 340px) {
  .play-feedback-rail .round-clear { min-width: 164px; padding-inline: 7px; }
  .play-feedback-rail .round-clear span { max-width: 194px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-feedback-rail .round-clear.is-milestone > img { animation: none; }
}

/* 2026-08 final reward-flow polish -----------------------------------------
   Make the rule unmistakably read as ten, keep the compact record card calm,
   and connect match -> score -> combo without moving the entire board. */
.home-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.home-tagline span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.home-tagline b {
  display: inline-grid;
  place-items: center;
  min-width: 29px;
  height: 25px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 9px;
  background: linear-gradient(180deg, #ff8fa9, #f26082);
  box-shadow: 0 2px 0 rgba(198, 71, 101, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(173, 64, 91, 0.16);
}

.home-tagline strong {
  letter-spacing: -0.02em;
}

.best-record-card {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 6px;
}

.best-record-card span em {
  display: block;
  overflow: hidden;
  color: #54766f;
  font-style: normal;
  text-overflow: ellipsis;
}

.best-record-card span small {
  margin-top: 2px;
  font-size: 10px;
}

.best-record-card strong {
  max-width: 72px;
  font-size: 13px;
  text-align: right;
}

.tile.is-success::before {
  z-index: 4;
  inset: 5%;
  opacity: 0;
  animation: success-tile-sheen 270ms var(--pop-delay, 0ms) ease-out both;
}

.tile.is-success span {
  animation: success-number-pop 270ms var(--pop-delay, 0ms) cubic-bezier(.18, .82, .24, 1.08) both;
}

.board-frame.is-success-resolving {
  animation: success-frame-bloom 270ms ease-out both;
}

@keyframes success-tile-sheen {
  0% { opacity: 0; transform: translateX(-62%) skewX(-10deg); }
  28% { opacity: 0.95; }
  100% { opacity: 0; transform: translateX(58%) skewX(-10deg); }
}

@keyframes success-number-pop {
  0% { transform: scale(1); opacity: 1; }
  32% { transform: translateY(1px) scale(0.91); opacity: 1; }
  68% { transform: translateY(-2px) scale(1.08); opacity: 1; }
  100% { transform: translateY(-7px) scale(0.72); opacity: 0; }
}

@keyframes success-frame-bloom {
  0% { filter: brightness(1); }
  42% { filter: brightness(1.035) saturate(1.025); }
  100% { filter: brightness(1); }
}

@keyframes stage-clear-rail-hold {
  0% { opacity: 0; transform: translate(-50%, -7px) scale(0.78); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.035); }
  34%, 84% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(0.97); }
}

.play-feedback-rail .round-clear {
  min-width: 202px;
  min-height: 32px;
  padding-inline: 10px;
}

.play-feedback-rail .round-clear.is-visible {
  animation: stage-clear-rail-hold 820ms cubic-bezier(.18, .84, .24, 1.08) both;
}

.play-feedback-rail .round-clear strong {
  font-size: clamp(14px, 4vw, 16px);
}

.play-feedback-rail .round-clear span {
  max-width: 248px;
  font-size: 10.5px;
}

.stage-entry {
  min-width: min(68%, 220px);
  padding: 9px 17px 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 254, 239, 0.97), rgba(255, 244, 218, 0.95));
  box-shadow: 0 0 0 6px rgba(255, 216, 224, 0.15), 0 9px 20px rgba(99, 75, 68, 0.15), inset 0 2px 0 #fff;
}

.stage-entry strong { font-size: clamp(25px, 7.4vw, 32px); }

@media (max-width: 340px) {
  .home-tagline { gap: 4px; }
  .home-tagline b { min-width: 26px; height: 23px; font-size: 16px; }
  .best-record-card { grid-template-columns: 23px minmax(0, 1fr) auto; column-gap: 4px; }
  .best-record-card strong { max-width: 59px; font-size: 12px; }
  .play-feedback-rail .round-clear { min-width: 184px; padding-inline: 7px; }
  .play-feedback-rail .round-clear span { max-width: 208px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.is-success::before,
  .tile.is-success span,
  .board-frame.is-success-resolving { animation: none; }
}

/* Item clarity and reward feedback: the board stays dominant, while every
   tool communicates available / locked / depleted without relying on opacity. */
.item-button[data-state="available"] {
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--item-accent) 38%, #d8c9aa),
    0 3px 0 color-mix(in srgb, var(--item-accent) 31%, #bfad8c),
    0 6px 10px rgba(86, 69, 50, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.98);
}

.item-button[data-state="available"]::before {
  height: 25%;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0));
}

.item-button[data-state="available"] .item-icon {
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--item-accent) 24%, transparent));
}

.item-button[data-state="locked"],
.item-button[data-state="depleted"] {
  opacity: 1;
  filter: none;
  cursor: default;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(190,180,162,0.3);
}

.item-button[data-state="locked"] {
  border-color: rgba(210, 200, 181, 0.56);
  background: linear-gradient(180deg, rgba(251,249,243,0.97), rgba(232,229,220,0.95));
  color: #938f87;
}

.item-button[data-state="depleted"] {
  border: 1px dashed rgba(183, 170, 148, 0.68);
  background: linear-gradient(180deg, rgba(250,247,239,0.96), rgba(241,235,223,0.94));
  color: #8b867d;
}

.item-button[data-state="locked"] .item-icon,
.item-button[data-state="depleted"] .item-icon {
  background: rgba(255,255,255,0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  filter: grayscale(0.82) saturate(0.25);
  opacity: 0.48;
}

.item-button[data-state="locked"] b,
.item-button[data-state="depleted"] b {
  display: none;
}

.item-button[data-state="locked"]::after,
.item-button[data-state="depleted"]::after {
  right: 4px;
  bottom: 4px;
  min-width: 27px;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  background: rgba(103, 101, 96, 0.82);
  box-shadow: 0 1px 2px rgba(78, 71, 62, 0.1);
  color: white;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.item-button[data-state="locked"]::after { content: attr(data-lock-copy); }
.item-button[data-state="depleted"]::after { content: "소진"; }

.item-button.is-stocked {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--item-accent) 22%, transparent),
    0 4px 0 color-mix(in srgb, var(--item-accent) 38%, #bfad8c),
    0 8px 15px color-mix(in srgb, var(--item-accent) 18%, transparent),
    inset 0 2px 0 white;
}

.item-button.is-casting::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 3px;
  border-radius: 12px;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,0.78) 48%, transparent 70%);
  transform: translateX(-115%);
  animation: item-button-sheen 310ms ease-out both;
  pointer-events: none;
}

@keyframes item-button-sheen {
  to { transform: translateX(115%); }
}

/* Hint: a soft mint spotlight with the real hint asset, not another hard line. */
.board.is-hinting .tile:not(.is-hint) {
  opacity: 0.62;
  filter: brightness(0.93) saturate(0.62);
}

.tile.is-hint {
  z-index: 6;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.98),
    0 0 0 3px rgba(83, 207, 183, 0.34),
    0 7px 20px rgba(52, 169, 150, 0.29);
}

.hint-region {
  border: 0;
  border-radius: 19px;
  background:
    radial-gradient(ellipse at center, rgba(198, 255, 242, 0.39), rgba(114, 224, 201, 0.16) 58%, transparent 76%);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.55),
    0 0 24px rgba(61, 196, 174, 0.28),
    inset 0 0 20px rgba(255,255,255,0.52);
}

.hint-region span {
  top: -19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 94px;
  min-height: 27px;
  padding: 3px 8px 3px 4px;
  border: 1px solid rgba(255,255,255,0.96);
  background: linear-gradient(180deg, #83e2cf, #48bca6);
  box-shadow: 0 0 0 3px rgba(112,224,201,0.14), 0 4px 9px rgba(43,139,122,0.2), inset 0 1px 0 rgba(255,255,255,0.64);
}

.hint-region span img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(66,120,104,0.13));
}

.hint-region span strong {
  color: white;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* Bomb: keep the energy local to the hit area so the whole grid never jitters. */
.board-frame.bomb-kick { animation: none; }

.bomb-fx::before {
  border-width: 5px;
  border-color: rgba(255, 116, 103, 0.75);
  box-shadow: 0 0 16px rgba(255, 147, 84, 0.22);
}

.bomb-fx::after {
  border-width: 3px;
  border-color: rgba(255, 212, 87, 0.68);
}

.bomb-fx strong {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  padding: 4px 8px 3px;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8e7b, #f45877);
  box-shadow: 0 4px 9px rgba(198,63,81,0.25);
  color: white;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  white-space: nowrap;
  animation: bomb-pop-label 570ms cubic-bezier(.16,.8,.24,1.16) both;
}

@keyframes bomb-pop-label {
  0%, 18% { opacity: 0; transform: translate(-50%, -50%) scale(0.45) rotate(-8deg); }
  38%, 68% { opacity: 1; transform: translate(20px, -48px) scale(1.08) rotate(4deg); }
  100% { opacity: 0; transform: translate(26px, -62px) scale(0.92) rotate(2deg); }
}

/* Clock: the gain reads instantly and lands on the timer with six clear ticks. */
.clock-flight strong {
  left: 21px;
  top: -15px;
  padding: 4px 9px 3px;
  border-width: 2px;
  background: linear-gradient(180deg, #f7fffc, #c9f6e9);
  box-shadow: 0 0 0 3px rgba(98,215,191,0.12), 0 4px 9px rgba(49,138,152,0.18);
  font-size: 15px;
}

.item-impact-clock i { --clock-tick-angle: calc(var(--impact-index, 0) * 60deg); }
.item-impact-clock i:nth-child(5) { --impact-index: 4; }
.item-impact-clock i:nth-child(6) { --impact-index: 5; }

.time-readout.is-time-added {
  background: linear-gradient(180deg, rgba(246,255,251,0.99), rgba(211,248,238,0.98));
  color: #287f75;
}

@media (prefers-reduced-motion: reduce) {
  .item-button.is-casting::after,
  .bomb-fx strong { animation: none; }
}

/* Seven-combo reward handoff: visibly travel from the combo HUD into the
   board, then land as a one-tap reward instead of appearing between frames. */
.combo-reward-pop {
  min-height: 34px;
  padding-right: 11px;
  background: linear-gradient(180deg, rgba(255,253,235,0.99), rgba(255,235,197,0.98));
  box-shadow: 0 0 0 4px rgba(255,207,104,0.12), 0 6px 14px rgba(168,103,67,0.2), inset 0 1px 0 #fff;
  color: #c86655;
  font-size: 11px;
  letter-spacing: -0.015em;
}

.combo-reward-pop img {
  width: 29px;
  height: 29px;
  filter: drop-shadow(0 2px 3px rgba(132,83,55,0.16));
}

.item-reward-flight {
  position: absolute;
  z-index: 41;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: item-reward-flight 430ms var(--reward-delay, 0ms) cubic-bezier(.18,.72,.22,1) both;
}

.item-reward-flight img {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 43px;
  height: 46px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 7px rgba(118,79,58,0.23));
  animation: item-reward-icon-flight 430ms var(--reward-delay, 0ms) ease-out both;
}

.item-reward-megabomb img { width: 49px; height: 49px; }
.item-reward-freeze img,
.item-reward-clover img { width: 47px; height: 47px; }

.item-reward-flight i {
  --reward-spark-x: -24px;
  --reward-spark-y: -19px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  opacity: 0;
  animation: item-reward-flight-spark 360ms calc(var(--reward-delay, 0ms) + 40ms) ease-out both;
}

.item-reward-flight i:nth-of-type(2) {
  --reward-spark-x: 25px;
  --reward-spark-y: -13px;
  animation-delay: calc(var(--reward-delay, 0ms) + 90ms);
}

.item-reward-flight i:nth-of-type(3) {
  --reward-spark-x: 17px;
  --reward-spark-y: 22px;
  animation-delay: calc(var(--reward-delay, 0ms) + 135ms);
}

@keyframes item-reward-flight {
  0% { opacity: 0; transform: translate(0,0) scale(.58) rotate(-8deg); }
  16% { opacity: 1; transform: translate(0,-5px) scale(1.08) rotate(4deg); }
  62% { opacity: 1; transform: translate(var(--reward-mid-x),var(--reward-mid-y)) scale(.96) rotate(-4deg); }
  100% { opacity: 0; transform: translate(var(--reward-x),var(--reward-y)) scale(.72) rotate(3deg); }
}

@keyframes item-reward-icon-flight {
  0% { transform: translate(-50%,-50%) scale(.68); }
  30% { transform: translate(-50%,-50%) scale(1.12); }
  100% { transform: translate(-50%,-50%) scale(.9); }
}

@keyframes item-reward-flight-spark {
  0%,18% { opacity:0; transform:translate(-50%,-50%) scale(.25) rotate(-15deg); }
  42% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--reward-spark-x)),calc(-50% + var(--reward-spark-y))) scale(.9) rotate(100deg); }
}

.item-drop-fx::before { animation-delay: var(--item-landing-delay, 0ms); }
.item-drop-fx::after { animation-delay: calc(var(--item-landing-delay, 0ms) + 70ms); }
.item-drop-fx img { animation-delay: var(--item-landing-delay, 0ms); }
.item-drop-fx > span { animation-delay: calc(var(--item-landing-delay, 0ms) + 80ms); }
.item-drop-fx i:nth-of-type(1) { animation-delay: var(--item-landing-delay, 0ms); }
.item-drop-fx i:nth-of-type(2) { animation-delay: calc(var(--item-landing-delay, 0ms) + 60ms); }
.item-drop-fx i:nth-of-type(3) { animation-delay: calc(var(--item-landing-delay, 0ms) + 110ms); }
.item-drop-fx i:nth-of-type(4) { animation-delay: calc(var(--item-landing-delay, 0ms) + 160ms); }
.item-drop-fx > b.item-drop-paw { animation-delay: calc(var(--item-landing-delay, 0ms) + 70ms); }
.item-drop-fx > b.item-drop-paw:nth-of-type(2) { animation-delay: calc(var(--item-landing-delay, 0ms) + 145ms); }

.tile.is-board-item.is-item-spawning {
  animation-duration: 720ms;
}

.tile.is-board-item.is-item-spawning .board-item-action {
  animation-delay: calc(var(--item-drop-delay, 0ms) + 220ms);
}

/* Number specials still read as number tiles, but their compact action badge
   stays legible when the board reaches six or seven columns. */
.tile.is-special-tile {
  box-shadow: 0 0 0 2px var(--special-ring, rgba(92,190,185,.3)), 0 5px 11px var(--special-shadow, rgba(71,155,166,.14));
}

.tile.special-bomb {
  --special-ring: rgba(241,101,128,.38);
  --special-shadow: rgba(199,69,98,.17);
}

.special-tile-label {
  position: absolute;
  z-index: 4;
  right: 3px;
  bottom: 3px;
  min-width: 25px;
  padding: 2px 4px 1px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: rgba(54,151,143,.9);
  box-shadow: 0 2px 4px rgba(48,107,105,.15), inset 0 1px 0 rgba(255,255,255,.28);
  color: white;
  font-family: var(--font-sans);
  font-size: clamp(7px,1.9vw,9px);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.tile.special-bomb .special-tile-label { background: rgba(225,90,112,.91); }

.tile.is-special-triggered .special-tile-label {
  animation: special-badge-pop 300ms cubic-bezier(.18,.82,.24,1.2) both;
}

@media (max-width: 340px) {
  .combo-reward-pop { max-width: 170px; font-size: 10px; }
  .special-tile-label { right: 2px; bottom: 2px; min-width: 21px; padding-inline: 2px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .item-reward-flight,
  .item-reward-flight img,
  .item-reward-flight i,
  .tile.is-special-triggered .special-tile-label { animation-duration: 1ms !important; }
}

/* Combo tension is persistent but peripheral: the board never scales or
   shakes, while its frame, HUD and goal rail visibly climb through 3/5/8+. */
.screen-play[data-combo-band="warm"] .combo-readout {
  background: linear-gradient(180deg, rgba(255,255,249,.98), rgba(255,246,219,.96));
}

.screen-play[data-combo-band="hot"] .combo-readout {
  border-color: rgba(255,156,109,.38);
  background: linear-gradient(180deg, rgba(255,255,249,.99), rgba(255,232,213,.97));
  box-shadow: 0 0 0 3px rgba(255,185,105,.08), inset 0 1px 0 white;
}

.screen-play[data-combo-band="hot"] .goal-track {
  box-shadow: inset 0 1px 2px rgba(129,99,47,.06), 0 0 8px rgba(255,178,95,.13);
}

.screen-play[data-combo-band="fever"] .play-hud {
  box-shadow: 0 3px 12px rgba(66,114,130,.075), 0 0 0 1px rgba(255,108,142,.2), 0 0 14px rgba(255,112,145,.09), inset 0 1px 0 rgba(255,255,255,.96);
}

.screen-play[data-combo-band="fever"] .combo-readout {
  border-color: rgba(255,108,142,.46);
  background: linear-gradient(180deg, rgba(255,255,250,.99), rgba(255,219,231,.98));
  box-shadow: 0 0 0 4px rgba(255,108,142,.08), 0 4px 10px rgba(200,70,106,.1), inset 0 1px 0 white;
}

.screen-play[data-combo-band="fever"] .combo-readout img {
  animation: combo-fever-star 720ms ease-in-out infinite alternate;
}

.screen-play[data-combo-band="fever"] .goal-track {
  box-shadow: inset 0 1px 2px rgba(129,99,47,.06), 0 0 10px rgba(255,102,140,.18);
}

@keyframes combo-fever-star {
  from { transform: rotate(-4deg) scale(.96); filter: brightness(1); }
  to { transform: rotate(6deg) scale(1.12); filter: brightness(1.08) saturate(1.08); }
}

/* Ten seconds: replace the secondary HUD row briefly instead of covering the
   board, then leave the compact timer and cat reaction to carry the tension. */
.low-time-alert {
  position: absolute;
  z-index: 35;
  left: 50%;
  top: calc(42px + var(--safe-top));
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 132px;
  min-height: 34px;
  padding: 4px 12px 4px 7px;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,250,240,.99), rgba(255,218,218,.98));
  box-shadow: 0 0 0 5px rgba(255,112,139,.1), 0 6px 14px rgba(190,69,94,.18), inset 0 1px 0 white;
  pointer-events: none;
  animation: low-time-alert 980ms cubic-bezier(.16,.82,.24,1.12) both;
}

.low-time-alert img {
  width: 27px;
  height: 29px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(180,78,83,.17));
}

.low-time-alert div { display: grid; line-height: 1; }
.low-time-alert small { color: #b77863; font-size: 9px; font-weight: 950; letter-spacing: .11em; }
.low-time-alert strong { color: #e45775; font-family: var(--font-display); font-size: 18px; font-weight: 400; }

.low-time-alert i {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: url("../assets/decor/sparkle.webp") center / contain no-repeat;
  animation: low-time-spark 600ms ease-out both;
}

.low-time-alert i:last-child { left: auto; right: -5px; top: auto; bottom: -5px; animation-delay: 80ms; }
.screen-play.is-low-time-alerting .hud-secondline { opacity: 0; transform: scale(.98); }

@keyframes low-time-alert {
  0% { opacity:0; transform:translate(-50%,7px) scale(.72); }
  18% { opacity:1; transform:translate(-50%,0) scale(1.08); }
  34%,76% { opacity:1; transform:translate(-50%,0) scale(1); }
  100% { opacity:0; transform:translate(-50%,-7px) scale(.96); }
}

@keyframes low-time-spark {
  0%,12% { opacity:0; transform:scale(.25) rotate(-15deg); }
  40% { opacity:1; }
  100% { opacity:0; transform:scale(1.1) rotate(95deg); }
}

.screen-play.is-final-countdown .time-readout {
  border-color: rgba(244,103,133,.58);
  background: linear-gradient(180deg, rgba(255,251,246,.99), rgba(255,226,228,.98));
  box-shadow: 0 0 0 3px rgba(255,107,138,.07), 0 4px 10px rgba(187,65,91,.1), inset 0 1px 0 white;
}

.screen-play.is-final-countdown .time-readout::after {
  background: linear-gradient(90deg, #ffba65, #ff738f);
}

.screen-play.is-time-rescued::before {
  opacity: 1;
  animation: time-rescued-edge 720ms ease-out both;
}

@keyframes time-rescued-edge {
  0% { box-shadow: inset 0 0 0 rgba(91,218,187,0); }
  32% { box-shadow: inset 0 0 28px 3px rgba(91,218,187,.2); }
  100% { box-shadow: inset 0 0 10px rgba(91,218,187,0); }
}

/* Stage growth reads as a reward: clear rail, edge celebration, then the new
   stage card names both the board identity and the next concrete target. */
.screen-play.is-board-growth-clear .board-frame {
  animation: board-growth-bloom 820ms cubic-bezier(.16,.82,.24,1.1) both;
}

.stage-growth-confetti {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 48%;
  width: 19px;
  height: 19px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(113,91,64,.12));
  animation: stage-growth-confetti 820ms var(--growth-delay,0ms) cubic-bezier(.16,.72,.24,1) both;
}

@keyframes board-growth-bloom {
  0%,100% { filter:brightness(1); }
  34% { filter:brightness(1.05) saturate(1.04); box-shadow:0 4px 0 rgba(174,124,65,.14),0 12px 24px rgba(55,105,121,.15),0 0 0 7px rgba(116,218,192,.13),0 0 26px rgba(100,207,180,.24),inset 0 2px 0 #fff; }
}

@keyframes stage-growth-confetti {
  0%,12% { opacity:0; transform:translate(-50%,-50%) scale(.25) rotate(0); }
  32% { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--growth-x) * 3.2),calc(-50% + var(--growth-y) * 3.1)) scale(.92) rotate(110deg); }
}


.stage-entry.is-milestone {
  background: linear-gradient(180deg, rgba(248,255,251,.98), rgba(211,247,236,.97));
  box-shadow: 0 0 0 7px rgba(105,218,190,.14), 0 10px 22px rgba(61,140,123,.17), inset 0 2px 0 white;
}

.stage-entry.is-milestone small,
.stage-entry.is-milestone strong { color: #369b87; }

@media (max-width: 340px) {
  .low-time-alert { top: calc(40px + var(--safe-top)); min-width: 122px; min-height: 32px; }
  .low-time-alert strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-play[data-combo-band="fever"] .combo-readout img,
  .low-time-alert,
  .low-time-alert i,
  .screen-play.is-time-rescued::before,
  .screen-play.is-board-growth-clear .board-frame,
  .stage-growth-confetti { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* Premium shuffle pass: the tiles remain the motion hero. Replace the former
   thin orbit lines with three filled syrup shapes and the approved decor set. */
.shuffle-fx {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,244,.78) 0 8%, rgba(194,247,233,.38) 20%, rgba(255,237,205,.13) 42%, transparent 68%);
}

.shuffle-fx::before,
.shuffle-fx::after {
  border: 0;
  opacity: 0;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.94), rgba(151,232,215,.7) 48%, rgba(86,195,176,.25) 72%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.72), 0 8px 20px rgba(54,157,139,.14);
  animation: shuffle-syrup-bloom 720ms cubic-bezier(.16,.76,.24,1.08) both;
}

.shuffle-fx::before {
  width: 88px;
  height: 74px;
  border-radius: 44% 56% 51% 49% / 58% 44% 56% 42%;
  transform: translate(-50%,-50%) scale(.42) rotate(-12deg);
}

.shuffle-fx::after {
  width: 132px;
  height: 108px;
  border-radius: 58% 42% 48% 52% / 45% 60% 40% 55%;
  background: radial-gradient(circle at 62% 32%, rgba(255,255,255,.86), rgba(255,225,182,.52) 52%, rgba(255,193,160,.18) 76%);
  animation-delay: 80ms;
  transform: translate(-50%,-50%) scale(.35) rotate(16deg);
}

.shuffle-fx img {
  z-index: 5;
  width: clamp(54px, 17%, 68px);
  padding: 10px;
  border: 2px solid rgba(255,255,255,.95);
  background: radial-gradient(circle at 35% 26%, #fff 0 14%, #c8f4e9 52%, #75d2bf 100%);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.3),
    0 9px 20px rgba(48,149,132,.23),
    inset 0 2px 3px rgba(255,255,255,.82);
}

.shuffle-syrup {
  --syrup-x: -72px;
  --syrup-y: -48px;
  --syrup-rotate: -28deg;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 43px;
  border: 2px solid rgba(255,255,255,.74);
  border-radius: 55% 45% 62% 38% / 48% 61% 39% 52%;
  background: linear-gradient(145deg, rgba(245,255,251,.96), rgba(112,218,198,.86));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.76), 0 6px 13px rgba(52,153,136,.16);
  opacity: 0;
  animation: shuffle-syrup-swoop 720ms cubic-bezier(.18,.74,.25,1.06) both;
}

.shuffle-syrup:nth-of-type(2) {
  --syrup-x: 76px;
  --syrup-y: -35px;
  --syrup-rotate: 34deg;
  width: 56px;
  height: 39px;
  background: linear-gradient(145deg, rgba(255,255,247,.97), rgba(255,210,173,.82));
  animation-delay: 55ms;
}

.shuffle-syrup:nth-of-type(3) {
  --syrup-x: 14px;
  --syrup-y: 72px;
  --syrup-rotate: 82deg;
  width: 50px;
  height: 35px;
  background: linear-gradient(145deg, rgba(255,251,255,.97), rgba(211,190,244,.72));
  animation-delay: 105ms;
}

.shuffle-fx b:nth-of-type(5) {
  --shuffle-star-x: 8px;
  --shuffle-star-y: -92px;
  width: 16px;
  height: 16px;
  animation-delay: 185ms;
}

.shuffle-paw {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(70,153,140,.22));
}

.shuffle-paw:nth-of-type(1) { --paw-x: -82px; --paw-y: 52px; }
.shuffle-paw:nth-of-type(2) { --paw-x: 84px; --paw-y: 44px; }

@keyframes shuffle-syrup-bloom {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.25) rotate(-16deg); }
  28% { opacity:.82; }
  62% { opacity:.58; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.28) rotate(24deg); }
}

@keyframes shuffle-syrup-swoop {
  0%,10% { opacity:0; transform:translate(-50%,-50%) scale(.28) rotate(0); }
  35% { opacity:.94; transform:translate(-50%,-50%) scale(.9) rotate(8deg); }
  72% { opacity:.78; }
  100% { opacity:0; transform:translate(calc(-50% + var(--syrup-x)),calc(-50% + var(--syrup-y))) scale(1.08) rotate(var(--syrup-rotate)); }
}

/* Labels stay readable on every supported board size. */
.special-tile-label,
.board-item-action {
  min-width: 25px;
  padding-inline: 3px;
  font-size: clamp(9px, 2.2vw, 10px);
  white-space: nowrap;
}

@media (max-width: 340px) {
  .special-tile-label,
  .board-item-action {
    min-width: 23px;
    padding-inline: 2px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shuffle-syrup,
  .shuffle-fx::before,
  .shuffle-fx::after { animation-duration: 1ms !important; }
}

/* Play polish pass: give the colorful board a quiet cream mat and make the
   four tools read as a compact control shelf, not another row of number tiles. */
.board-zone {
  position: relative;
  isolation: isolate;
}

.board-zone::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -7px -4px -10px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 27px;
  background: rgba(255,251,237,.72);
  box-shadow: 0 9px 22px rgba(58,103,116,.08), inset 0 1px 0 rgba(255,255,255,.88);
  pointer-events: none;
}

.board-zone .board-frame { z-index: 1; }

.item-actions {
  gap: clamp(5px,1.45vw,7px);
  padding: 6px 7px 8px;
  border-color: rgba(203,182,145,.58);
  border-radius: 18px;
  background: rgba(249,246,237,.96);
  box-shadow: 0 3px 0 rgba(140,116,78,.08), 0 7px 14px rgba(53,88,97,.07), inset 0 1px 0 #fff;
}

.item-actions::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 10px;
  bottom: 11px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(169,155,131,.28) 24% 76%, transparent);
  pointer-events: none;
}

.item-button {
  z-index: 1;
  height: clamp(51px,14.4vw,57px);
  min-height: 44px;
  border-width: 1px;
  border-radius: 14px;
  background: color-mix(in srgb,var(--item-accent) 10%,#fffdf7);
  box-shadow: 0 2px 0 color-mix(in srgb,var(--item-accent) 25%,#cbbd9f), 0 4px 8px rgba(69,61,50,.07), inset 0 1px 0 #fff;
}

.item-button::before { display: none; }
.item-icon { width: clamp(24px,7.2vw,29px); height: clamp(25px,7.5vw,30px); }
.item-button > span { font-size: clamp(11px,3.1vw,13px); }

.item-button[data-state="available"] {
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--item-accent) 30%,#d8c9aa), 0 2px 0 color-mix(in srgb,var(--item-accent) 29%,#bfad8c), 0 5px 9px rgba(86,69,50,.07), inset 0 1px 0 #fff;
}

.item-button[data-state="locked"] {
  border-color: color-mix(in srgb,var(--item-accent) 23%,#d8d0c1);
  background: color-mix(in srgb,var(--item-accent) 7%,#f5f2eb);
  color: #817d75;
}

.item-button[data-state="locked"] .item-icon {
  filter: saturate(.62) contrast(.94);
  opacity: .68;
}

.cat-coach {
  width: min(100%,350px);
  height: clamp(102px,15dvh,118px);
  grid-template-columns: clamp(94px,27vw,108px) minmax(0,1fr);
  gap: 1px;
}

.play-character-stage {
  width: clamp(92px,26vw,106px);
  height: clamp(98px,14.5dvh,112px);
}

.cat-message {
  display: block;
  align-content: center;
  min-height: 44px;
  padding: 7px 13px 6px;
  font-family: var(--font-display);
  font-size: clamp(15px,4.25vw,17px);
  font-weight: 400;
  line-height: 1.25;
}

/* Motion-first shuffle: tiles sweep around the board while soft syrup drops
   orbit and disappear. No static hero artwork or wire-like orbit lines. */
.shuffle-fx {
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,244,.62) 0 7%,rgba(184,242,228,.2) 30%,transparent 64%);
}

.shuffle-fx::before {
  width: clamp(132px,42%,172px);
  height: clamp(116px,36%,154px);
  border: 0;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background:
    radial-gradient(circle at 30% 27%,rgba(255,255,255,.96) 0 7%,transparent 21%),
    radial-gradient(circle at 68% 30%,rgba(255,228,198,.76) 0 16%,transparent 43%),
    radial-gradient(circle at 33% 72%,rgba(193,174,239,.58) 0 17%,transparent 45%),
    linear-gradient(145deg,rgba(213,255,245,.92),rgba(91,205,185,.66));
  box-shadow:inset 0 3px 4px rgba(255,255,255,.7),0 12px 24px rgba(47,153,135,.14);
  filter:blur(.35px) saturate(1.04);
  opacity: 0;
  transform:translate(-50%,-50%) scale(.34) rotate(-26deg);
  animation:shuffle-vortex-cloud 760ms cubic-bezier(.18,.78,.24,1.04) both;
}

.shuffle-fx::after {
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 50%;
  background:radial-gradient(circle,rgba(255,255,250,.9),rgba(133,225,206,.3) 45%,transparent 72%);
  box-shadow: none;
  opacity: 0;
  animation:shuffle-landing-glow 720ms ease-out 40ms both;
}

.shuffle-fx .shuffle-core-icon {
  z-index:7;
  width:clamp(42px,13%,54px);
  padding:8px;
  border: 1.5px solid rgba(255,255,255,.94);
  background: radial-gradient(circle at 36% 26%,#fff,#c5f4e9 58%,#74d2bf);
  box-shadow:0 0 0 5px rgba(255,255,255,.2),0 8px 17px rgba(43,149,132,.19),inset 0 2px 3px rgba(255,255,255,.78);
  animation:shuffle-core-flight 720ms cubic-bezier(.18,.78,.25,1.04) both;
}

.shuffle-vortex {
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:clamp(94px,30%,126px);
  height:clamp(72px,24%,98px);
  border-radius:58% 42% 48% 52% / 46% 61% 39% 54%;
  background:
    radial-gradient(circle at 31% 24%,rgba(255,255,255,.92) 0 9%,transparent 25%),
    radial-gradient(circle at 74% 30%,rgba(255,220,187,.7) 0 14%,transparent 42%),
    radial-gradient(circle at 28% 76%,rgba(211,188,244,.58) 0 15%,transparent 43%),
    linear-gradient(145deg,rgba(239,255,250,.94),rgba(110,221,200,.7));
  box-shadow:inset 0 3px 4px rgba(255,255,255,.72),0 9px 20px rgba(54,157,139,.13);
  opacity:0;
  transform:translate(-50%,-50%) scale(.28) rotate(-20deg);
  animation:shuffle-vortex-pulse 720ms cubic-bezier(.16,.8,.25,1.04) both;
}

.shuffle-fx .shuffle-drop {
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  width:clamp(22px,7.2%,30px);
  height:clamp(12px,4.2%,17px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:70% 46% 62% 52%;
  background:linear-gradient(145deg,var(--drop-light),var(--drop-color));
  box-shadow:inset 0 2px 2px rgba(255,255,255,.76),0 5px 10px rgba(64,148,137,.14);
  clip-path:none;
  filter:none;
  opacity:0;
  transform-origin:0 50%;
  animation:shuffle-drop-orbit 640ms var(--drop-delay,0ms) cubic-bezier(.18,.76,.24,1.02) both;
}

.shuffle-fx > b {
  z-index:8;
  width:clamp(13px,4.5%,19px);
  height:clamp(13px,4.5%,19px);
}
.shuffle-fx > b:nth-of-type(1) { --shuffle-star-x:-76px; --shuffle-star-y:-55px; }
.shuffle-fx > b:nth-of-type(2) { --shuffle-star-x:82px; --shuffle-star-y:-42px; animation-delay:80ms; }
.shuffle-fx > b:nth-of-type(3) { --shuffle-star-x:-66px; --shuffle-star-y:70px; animation-delay:140ms; }
.shuffle-fx > b:nth-of-type(4) { --shuffle-star-x:72px; --shuffle-star-y:62px; animation-delay:190ms; }

.shuffle-fx .shuffle-paw {
  z-index:8;
  --paw-x:84px;
  --paw-y:36px;
  width:17px;
  height:17px;
  animation-delay:120ms;
}

.board-frame.is-shuffle-settled {
  animation:shuffle-settle-frame 240ms cubic-bezier(.2,.8,.25,1.08) both;
}

@keyframes shuffle-vortex-cloud {
  0% { opacity:.24; transform:translate(-50%,-50%) scale(.34) rotate(-26deg); }
  28% { opacity:.64; }
  66% { opacity:.46; transform:translate(-50%,-50%) scale(.96) rotate(168deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.18) rotate(248deg); }
}

@keyframes shuffle-vortex-pulse {
  0% { opacity:.32; transform:translate(-50%,-50%) scale(.28) rotate(-20deg); }
  26% { opacity:.94; transform:translate(-50%,-50%) scale(.86) rotate(18deg); }
  62% { opacity:.78; transform:translate(-50%,-50%) scale(1) rotate(126deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.72) rotate(238deg); }
}

@keyframes shuffle-core-flight {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.48) rotate(-32deg); }
  26% { opacity:1; transform:translate(-50%,-54%) scale(1.04) rotate(24deg); }
  62% { opacity:.96; transform:translate(-50%,-47%) scale(.92) rotate(194deg); }
  100% { opacity:0; transform:translate(-50%,-52%) scale(.56) rotate(326deg); }
}

@keyframes shuffle-drop-orbit {
  0% { opacity:.24; transform:translate(-50%,-50%) rotate(var(--drop-angle)) translateX(6px) scale(.28); }
  8% { opacity:.5; }
  30% { opacity:.96; transform:translate(-50%,-50%) rotate(calc(var(--drop-angle) + 72deg)) translateX(var(--drop-mid)) scale(1); }
  68% { opacity:.9; transform:translate(-50%,-50%) rotate(calc(var(--drop-angle) + 172deg)) translateX(var(--drop-distance)) scale(.92); }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(calc(var(--drop-angle) + 238deg)) translateX(calc(var(--drop-distance) + 12px)) scale(.48); }
}

@keyframes shuffle-landing-glow {
  0%,48% { opacity:0; transform:translate(-50%,-50%) scale(.44); }
  70% { opacity:.78; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.5); }
}

@keyframes shuffle-settle-frame {
  0%,100% { filter:none; }
  45% { filter:brightness(1.055) saturate(1.04); box-shadow:0 4px 0 rgba(174,124,65,.14),0 12px 24px rgba(55,105,121,.14),0 0 0 5px rgba(125,221,202,.2),inset 0 2px 0 #fff; }
}

.special-tile-label {
  min-width: 28px;
  padding-inline: 3px;
  font-size: clamp(9px,2.15vw,10px);
}

@media (max-height: 815px) {
  .cat-coach { height: 84px; grid-template-columns: 82px minmax(0,1fr); }
  .play-character-stage { width: 80px; height: 84px; }
  .cat-message { font-size: clamp(14px,4vw,16px); }
}

@media (max-width: 340px) {
  .item-actions { gap: 3px; padding-inline: 5px; }
  .item-button { border-radius: 12px; }
  .special-tile-label { min-width: 27px; padding-inline: 2px; font-size: 9px; }
  .goal-meta { gap: 3px; }
  .stage-mission { gap: 1px; padding-inline: 2px 4px; }
  .stage-mission img { width: 10px; height: 10px; }
  .stage-mission strong { max-width: 72px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .shuffle-fx::before,
  .shuffle-fx::after,
  .shuffle-vortex,
  .shuffle-fx .shuffle-core-icon,
  .shuffle-fx .shuffle-drop,
  .board-frame.is-shuffle-settled { animation-duration: 1ms !important; }
}

/* HUD hierarchy and breathing room pass. Keep the same information, but make
   stage/time the anchor and prevent the board mat from visually touching the
   panels above and below it. */
.screen-play {
  row-gap: clamp(10px, 1.25dvh, 12px);
}

.play-hud {
  grid-template-rows: 34px 24px 18px;
  gap: 3px;
  padding: 7px 11px 8px;
  border: 1px solid rgba(211, 181, 132, .42);
  border-radius: 20px;
  background: rgba(255, 253, 246, .94);
  box-shadow: 0 5px 15px rgba(66, 103, 112, .085), inset 0 1px 0 #fff;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.hud-topline {
  grid-template-columns: 64px minmax(74px, 1fr) 108px;
  gap: 5px;
}

.hud-controls { gap: 3px; }
.pause-button { width: 34px; height: 29px; }
.hud-mini-button { width: 27px; height: 27px; }

.round-mini {
  min-height: 30px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 3px 4px 0;
}

.round-mini span {
  color: #738296;
  font-size: 10px;
  letter-spacing: .06em;
}

.round-mini strong {
  font-size: 22px;
  line-height: 1;
}

.time-readout {
  min-width: 108px;
  min-height: 34px;
  padding: 4px 8px 6px;
  border-radius: 15px;
  background: rgba(239, 252, 255, .94);
}

.time-readout strong { font-size: 21px; }

.hud-secondline {
  min-height: 24px;
  padding-inline: 4px;
  gap: 14px;
}

.score-readout,
.combo-readout {
  min-height: 23px;
  padding: 0;
}

.score-readout img,
.combo-readout img { width: 14px; height: 14px; }
.score-readout span,
.combo-readout span { color: #84909e; font-size: 10px; }
.score-readout strong { color: #3b526e; font-size: 17px; }
.combo-readout strong { font-size: 18px; }

/* The pulsing star already communicates that an item reward is close. The
   floating "선물 +1" capsule competed with score and combo for the same row. */
.combo-readout.is-reward-close::after { display: none; }

.goal-status {
  min-height: 18px;
  grid-template-columns: max-content minmax(84px, 1fr);
  gap: 10px;
  padding: 0 4px;
}

.goal-copy { gap: 4px; font-size: 10px; }
.goal-copy b { font-size: 14px; }
.goal-track { height: 5px; }

.board-zone::before {
  inset: -3px -4px -5px;
}

.play-footer { margin-top: 0; }

/* Stage unlock timing stays in game logic and accessibility copy; the locked
   tool itself no longer carries the cramped S3/S5 prototype badge. */
.item-button[data-state="locked"][data-lock-copy=""]::after { display: none; }

/* The local Jua subset is rebuilt from every current runtime phrase below;
   these explicit rules prevent later utility typography from splitting the
   result reaction and its primary action across font families. */
.result-message,
.result-actions .btn,
.result-actions .btn > span,
.result-home-button,
.result-home-button > span {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-height: 815px) {
  .screen-play { row-gap: 8px; }
  .play-hud { padding: 6px 9px 7px; }
  .hud-topline { grid-template-columns: 62px minmax(70px, 1fr) 104px; gap: 4px; }
  .time-readout { min-width: 104px; }
}

@media (max-width: 340px) {
  .play-hud { padding-inline: 7px; }
  .hud-topline { grid-template-columns: 59px minmax(62px, 1fr) 94px; gap: 3px; }
  .pause-button { width: 31px; height: 27px; }
  .hud-mini-button { width: 25px; height: 25px; }
  .round-mini { gap: 3px; padding-inline: 1px; }
  .round-mini span { font-size: 9px; }
  .round-mini strong { font-size: 19px; }
  .time-readout { min-width: 94px; padding-inline: 5px; }
  .time-readout strong { font-size: 18px; }
  .hud-secondline { gap: 8px; }
  .goal-status { gap: 7px; }
}

/* --------------------------------------------------------------------------
   Play UI v4 — one-piece casual-game HUD, board and tool dock.
   This layer is deliberately scoped so home/result screens and game behavior
   remain untouched while the final play composition stays easy to tune.
   -------------------------------------------------------------------------- */
.play-ui-v4 {
  --play-cream: #fffaf0;
  --play-cream-deep: #f7e9ca;
  --play-line: rgba(205, 169, 108, .55);
  --play-line-soft: rgba(218, 190, 145, .38);
  --play-ink: #334d6c;
  --play-muted: #7b8490;
  --play-coral: #f25f7f;
  --play-mint: #56c7b0;
  --play-sky: #69bdda;
  --play-yellow: #f6bd48;
  --play-panel-radius: 24px;
  --play-control-radius: 17px;
  --play-panel-shadow:
    0 5px 0 rgba(174, 127, 67, .10),
    0 12px 24px rgba(58, 102, 118, .11),
    inset 0 2px 0 rgba(255, 255, 255, .98);
  --play-control-shadow:
    0 4px 0 color-mix(in srgb, var(--item-accent, #d9be85) 42%, #bda981),
    0 7px 11px rgba(88, 70, 49, .11),
    inset 0 2px 0 rgba(255, 255, 255, .96),
    inset 0 -2px 0 rgba(121, 91, 54, .045);
  row-gap: clamp(8px, 1.1dvh, 11px);
  padding-inline: clamp(10px, 3.1vw, 14px);
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.56), transparent 27%),
    linear-gradient(180deg, rgba(201,238,250,.68) 0%, rgba(237,250,244,.84) 42%, rgba(255,249,232,.94) 76%, rgba(255,247,225,.98) 100%),
    url("../assets/backgrounds/play-bg@2x.webp") center / cover no-repeat;
}

/* HUD: stage and time are the anchors; score/combo remain fast secondary reads. */
.play-ui-v4 .play-hud {
  grid-template-rows: 59px 25px 20px;
  gap: 3px;
  margin: 0;
  padding: 8px 11px 9px;
  overflow: visible;
  border: 1.5px solid var(--play-line);
  border-radius: var(--play-panel-radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), transparent 37%),
    linear-gradient(180deg, rgba(255,254,249,.98), rgba(255,248,232,.96));
  box-shadow: var(--play-panel-shadow), 0 0 0 3px rgba(255,255,255,.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.play-ui-v4 .hud-topline {
  grid-template-columns: 72px minmax(94px, 1fr) 116px;
  min-height: 59px;
  gap: 7px;
  align-items: center;
}

.play-ui-v4 .hud-controls {
  align-self: start;
  gap: 6px;
  padding-top: 5px;
}

.play-ui-v4 .pause-button,
.play-ui-v4 .hud-mini-button {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(139,102,76,.14), 0 5px 9px rgba(75,98,103,.09), inset 0 2px 0 #fff;
  transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
}

.play-ui-v4 .pause-button {
  background: linear-gradient(180deg, #fff1f2, #ffc7cd);
  box-shadow: 0 3px 0 #d98691, 0 5px 9px rgba(180,87,103,.12), inset 0 2px 0 #fff;
}

.play-ui-v4 .pause-button img { opacity: 0; }
.play-ui-v4 .pause-button::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}
.play-ui-v4 .pause-button::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  width: 4px;
  height: 14px;
  border-radius: 3px;
  background: #9a5261;
  box-shadow: 8px 0 0 #9a5261;
}

.play-ui-v4 .hud-mini-button {
  background: linear-gradient(180deg, #effffb, #bcebdd);
  border-color: rgba(255,255,255,.94);
  box-shadow: 0 3px 0 #78baa9, 0 5px 9px rgba(65,142,125,.11), inset 0 2px 0 #fff;
}

.play-ui-v4 .pause-button:active,
.play-ui-v4 .hud-mini-button:active {
  transform: translateY(3px) scale(.97);
  box-shadow: 0 1px 0 rgba(122,92,70,.16), inset 0 1px 2px rgba(84,64,48,.09);
}

.play-ui-v4 .music-button i { left: 9px; top: 11px; }

.play-ui-v4 .round-mini {
  position: relative;
  align-self: stretch;
  min-height: 65px;
  margin: -5px 1px -1px;
  padding: 24px 8px 2px;
  gap: 0;
  overflow: visible;
  border: 1.5px solid rgba(224, 185, 112, .56);
  border-radius: 48% 48% 18px 18px / 36px 36px 18px 18px;
  background:
    radial-gradient(circle at 31% 68%, rgba(246,189,72,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 69% 68%, rgba(246,189,72,.18) 0 2px, transparent 3px),
    linear-gradient(180deg, #fffdf3 0%, #fff1c9 100%);
  box-shadow: 0 4px 0 rgba(196,139,63,.12), 0 7px 13px rgba(135,98,51,.10), inset 0 2px 0 #fff;
}

.play-ui-v4 .round-mini span {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 6px;
  min-width: 72px;
  padding: 4px 11px 3px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, #ff8da0, #ef647f);
  box-shadow: 0 3px 0 #cf4f69, 0 5px 9px rgba(202,69,96,.16), inset 0 1px 0 rgba(255,255,255,.58);
  color: #fffdf8;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(150,54,73,.24);
  transform: translateX(-50%);
}

.play-ui-v4 .round-mini strong {
  position: relative;
  z-index: 3;
  color: #ed8a35;
  min-width: 42px;
  font-family: var(--font-sans);
  font-size: 38px;
  font-weight: 900;
  line-height: .95;
  text-align: center;
  -webkit-text-stroke: .7px rgba(198, 111, 42, .18);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(255,255,255,.92), 0 3px 0 rgba(211,132,52,.12);
}

.play-ui-v4 .round-mini::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 8px;
  bottom: -3px;
  width: 25px;
  height: 11px;
  border: 1px solid rgba(226, 204, 166, .48);
  border-radius: 999px 999px 7px 7px;
  background: #fffaf0;
  box-shadow: 55px 0 0 -1px #fffaf0, inset 0 1px 0 #fff;
  pointer-events: none;
}

.play-ui-v4[data-stage-band] .round-mini::after { display: none; }
.play-ui-v4[data-stage-band] .round-mini strong { color: var(--stage-accent); }

.play-ui-v4 .time-readout {
  align-self: start;
  min-width: 116px;
  min-height: 45px;
  margin-top: 5px;
  padding: 6px 9px 9px;
  gap: 5px;
  border: 1.5px solid rgba(102, 181, 210, .55);
  border-radius: 17px;
  background: linear-gradient(180deg, #f8ffff, #e2f5fa);
  box-shadow: 0 4px 0 rgba(75,143,169,.15), 0 7px 12px rgba(70,139,165,.10), inset 0 2px 0 #fff;
}

.play-ui-v4 .time-readout img { width: 25px; height: 27px; }
.play-ui-v4 .time-readout strong { color: #31597a; font-size: 25px; }
.play-ui-v4 .time-readout::before,
.play-ui-v4 .time-readout::after { left: 10px; right: 10px; bottom: 4px; height: 4px; }

.play-ui-v4 .hud-secondline {
  min-height: 25px;
  padding: 0 5px;
  gap: 16px;
  border-top: 1px solid rgba(222, 196, 154, .24);
}

.play-ui-v4 .score-readout,
.play-ui-v4 .combo-readout { min-height: 24px; padding: 1px 0 0; }
.play-ui-v4 .score-readout img,
.play-ui-v4 .combo-readout img { width: 18px; height: 18px; }
.play-ui-v4 .score-readout span,
.play-ui-v4 .combo-readout span { color: var(--play-muted); font-size: 11px; font-weight: 800; }
.play-ui-v4 .score-readout strong { color: var(--play-ink); font-size: 19px; }
.play-ui-v4 .combo-readout strong { color: var(--play-coral); font-size: 20px; }

.play-ui-v4 .goal-status {
  min-height: 20px;
  grid-template-columns: max-content minmax(74px, 1fr);
  gap: 11px;
  padding: 0 5px;
}
.play-ui-v4 .goal-copy { color: #766f64; font-size: 11px; }
.play-ui-v4 .goal-copy b { color: var(--play-coral); font-size: 16px; }
.play-ui-v4 .goal-track {
  height: 7px;
  border-color: rgba(204, 177, 130, .40);
  background: #eee5d2;
  box-shadow: inset 0 2px 3px rgba(101,77,43,.10), 0 1px 0 #fff;
}
.play-ui-v4 .goal-track i { background: linear-gradient(90deg, #73d5c0, #69bee1 58%, #f486a1); }

/* Board: preserve the syrup tiles, upgrade only their stage and framing. */
.play-ui-v4 .board-zone::before {
  inset: -3px -2px -7px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,253,246,.86), rgba(252,241,217,.84));
  box-shadow: 0 10px 22px rgba(61,103,116,.10), inset 0 2px 0 rgba(255,255,255,.94);
}

.play-ui-v4 .board-frame,
.play-ui-v4 .board-frame[data-round] {
  border: 2px solid rgba(213, 169, 99, .62);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), transparent 35%),
    linear-gradient(180deg, #fffdf7, #f8e7c7);
  box-shadow:
    0 5px 0 rgba(176, 122, 59, .16),
    0 13px 24px rgba(50, 96, 114, .16),
    0 0 0 4px rgba(255,255,255,.53),
    inset 0 2px 0 #fff,
    inset 0 -4px 8px rgba(201,154,87,.08);
}

.play-ui-v4 .board {
  border-color: rgba(199, 164, 111, .58);
  border-radius: 15px;
  background-color: #fff8e9;
  background-image:
    linear-gradient(to right, rgba(187,153,104,.34) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(187,153,104,.34) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.78), rgba(255,246,224,.40));
  box-shadow: inset 0 2px 5px rgba(124,86,44,.09), 0 1px 0 rgba(255,255,255,.92);
}

.play-ui-v4 .tile {
  filter: drop-shadow(0 1px 1px rgba(112,76,56,.16)) drop-shadow(0 3px 3px rgba(71,96,119,.08));
}
.play-ui-v4 .tile span { color: #314c70; }

/* Item dock: one shelf, four clearly colored tactile tools. */
.play-ui-v4 .play-footer { gap: clamp(7px, 1dvh, 10px); margin-top: 0; }

.play-ui-v4 .item-actions {
  width: min(100%, 398px);
  gap: clamp(6px, 1.7vw, 8px);
  margin-top: 0;
  padding: 9px 10px 12px;
  overflow: visible;
  border: 1.5px solid var(--play-line);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), transparent 38%),
    linear-gradient(180deg, #fffdf7, #f6e7ca);
  box-shadow: var(--play-panel-shadow), 0 0 0 3px rgba(255,255,255,.40);
}

.play-ui-v4 .item-actions::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 18%;
  top: -8px;
  height: 13px;
  border: 1px solid rgba(211, 175, 116, .45);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #f8ebd1;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.88);
}
.play-ui-v4 .item-actions::after { display: none; }

.play-ui-v4 .item-button {
  height: clamp(62px, 17vw, 70px);
  grid-template-rows: minmax(35px, 1fr) 19px;
  border: 1.5px solid rgba(255,255,255,.94);
  border-radius: var(--play-control-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), transparent 32%),
    linear-gradient(180deg, var(--item-top), var(--item-mid) 62%, var(--item-bottom));
  box-shadow: var(--play-control-shadow);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
}

.play-ui-v4 .item-button::before {
  display: block;
  inset: 4px 7px auto;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,0));
}

.play-ui-v4 .item-button:active,
.play-ui-v4 .item-button.is-pressed {
  transform: translateY(4px) scale(.98);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--item-accent) 42%, #aa9877), inset 0 2px 4px rgba(91,66,43,.12);
}

.play-ui-v4 .item-icon {
  width: clamp(29px, 8.3vw, 35px);
  height: clamp(30px, 8.5vw, 36px);
  padding: 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(93,74,49,.12));
}

.play-ui-v4 .item-button > span {
  color: color-mix(in srgb, var(--item-accent) 48%, #544d45);
  font-family: var(--font-display);
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255,255,255,.92);
}

.play-ui-v4 .item-button b {
  right: -4px;
  top: -6px;
  width: 23px;
  height: 23px;
  border: 2px solid rgba(255,255,255,.96);
  background: linear-gradient(180deg, #ff7994, #ec4d70);
  box-shadow: 0 3px 0 #c8405e, 0 5px 8px rgba(178,57,86,.20), inset 0 1px 0 rgba(255,255,255,.52);
  color: #fff;
  font-size: 14px;
}

.play-ui-v4 .hint-button { --item-accent:#efb936; --item-top:#fffdf2; --item-mid:#fff2bd; --item-bottom:#ffdd83; }
.play-ui-v4 .shuffle-button { --item-accent:#50c4aa; --item-top:#f5fffb; --item-mid:#d8f7ee; --item-bottom:#aee8d9; }
.play-ui-v4 .bomb-button { --item-accent:#eb718e; --item-top:#fff7fa; --item-mid:#ffdce4; --item-bottom:#f9b9c7; }
.play-ui-v4 .clock-button { --item-accent:#62b8d8; --item-top:#f5fcff; --item-mid:#d9f1f9; --item-bottom:#addceb; }

.play-ui-v4 .item-button[data-state="locked"],
.play-ui-v4 .item-button[data-state="depleted"] {
  border-style: solid;
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), transparent 38%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--item-accent) 13%, #fffdf8),
      color-mix(in srgb, var(--item-accent) 22%, #f2ebdd));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--item-accent) 18%, #b9ad98), inset 0 1px 0 #fff;
}

.play-ui-v4 .item-button[data-state="locked"] .item-icon,
.play-ui-v4 .item-button[data-state="depleted"] .item-icon {
  filter: saturate(.68) drop-shadow(0 1px 1px rgba(93,74,49,.08));
  opacity: .62;
}

/* Coach: grounded under the dock, with a soft speech panel and quiet scenery. */
.play-ui-v4 .cat-coach {
  width: min(100%, 370px);
  height: clamp(96px, 14dvh, 116px);
  grid-template-columns: clamp(94px, 27vw, 112px) minmax(0, 1fr);
  gap: 3px;
  padding-inline: 4px 6px;
}

.play-ui-v4 .play-character-stage {
  width: clamp(92px, 26vw, 108px);
  height: clamp(96px, 13.8dvh, 114px);
}

.play-ui-v4 .cat-message {
  max-width: min(100%, 248px);
  min-height: 49px;
  padding: 9px 15px 8px;
  border: 1.5px solid rgba(216, 179, 120, .64);
  border-radius: 20px 20px 20px 11px;
  background: linear-gradient(180deg, rgba(255,255,252,.98), rgba(255,249,232,.97));
  box-shadow: 0 4px 0 rgba(177,126,62,.11), 0 9px 16px rgba(72,78,67,.08), inset 0 2px 0 #fff;
  color: #6b5447;
  font-size: clamp(15px, 4.2vw, 17px);
}
.play-ui-v4 .cat-message::before {
  border-color: rgba(216, 179, 120, .64);
  background: #fff9e9;
}

@media (max-height: 815px) {
  .play-ui-v4 { row-gap: 7px; }
  .play-ui-v4 .play-hud {
    grid-template-rows: 52px 22px 18px;
    padding: 6px 9px 7px;
  }
  .play-ui-v4 .hud-topline { grid-template-columns: 70px minmax(88px,1fr) 112px; min-height:52px; }
  .play-ui-v4 .round-mini { min-height: 58px; margin-top:-5px; padding-top:21px; }
  .play-ui-v4 .round-mini span { top:5px; font-size:11px; }
  .play-ui-v4 .round-mini strong { font-size:34px; }
  .play-ui-v4 .time-readout { min-width:112px; min-height:41px; margin-top:3px; }
  .play-ui-v4 .time-readout strong { font-size:23px; }
  .play-ui-v4 .time-readout img { width:23px; height:25px; }
  .play-ui-v4 .item-button { height: clamp(57px,16vw,64px); }
  .play-ui-v4 .cat-coach { height: 82px; grid-template-columns: 82px minmax(0,1fr); }
  .play-ui-v4 .play-character-stage { width:80px; height:84px; }
  .play-ui-v4 .cat-message { min-height:44px; padding-block:7px 6px; font-size:15px; }

  .play-ui-v4.is-tall-board .play-footer { gap: 3px; padding-bottom: 0; }
  .play-ui-v4.is-tall-board .cat-coach {
    height: 64px;
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .play-ui-v4.is-tall-board .play-character-stage { width: 62px; height: 65px; }
  .play-ui-v4.is-tall-board .cat-message {
    min-height: 38px;
    padding: 5px 10px 4px;
    font-size: 14px;
  }
  .play-ui-v4.is-tall-board .play-footer::before,
  .play-ui-v4.is-tall-board .play-footer::after { opacity: .10; }
}

@media (max-width: 340px) {
  .play-ui-v4 { padding-inline: 9px; }
  .play-ui-v4 .play-hud { padding-inline: 7px; border-radius:21px; }
  .play-ui-v4 .hud-topline { grid-template-columns: 64px minmax(78px,1fr) 100px; gap:4px; }
  .play-ui-v4 .hud-controls { gap:4px; }
  .play-ui-v4 .pause-button,
  .play-ui-v4 .hud-mini-button { width:31px; height:31px; min-width:31px; min-height:31px; }
  .play-ui-v4 .pause-button::after { left:10px; top:9px; height:13px; box-shadow:7px 0 0 #9a5261; }
  .play-ui-v4 .music-button i { left:8px; top:10px; }
  .play-ui-v4 .round-mini { margin-inline:0; }
  .play-ui-v4 .round-mini span { min-width:64px; padding-inline:8px; }
  .play-ui-v4 .time-readout { min-width:100px; padding-inline:6px; }
  .play-ui-v4 .time-readout strong { font-size:20px; }
  .play-ui-v4 .time-readout img { width:20px; height:22px; }
  .play-ui-v4 .score-readout span,
  .play-ui-v4 .combo-readout span { font-size:10px; }
  .play-ui-v4 .score-readout strong,
  .play-ui-v4 .combo-readout strong { font-size:17px; }
  .play-ui-v4 .goal-status { gap:7px; padding-inline:2px; }
  .play-ui-v4 .item-actions { gap:5px; padding-inline:7px; border-radius:21px; }
  .play-ui-v4 .item-button { border-radius:15px; }
  .play-ui-v4 .item-button b { right:-3px; width:21px; height:21px; font-size:13px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-ui-v4 .pause-button,
  .play-ui-v4 .hud-mini-button,
  .play-ui-v4 .item-button { transition: none; }
}

/* WOW! ------------------------------------------------------------------
   The original OING's signature moment: five or more cells in one sum-ten
   clear stops the screen with a big lemon-gold "WOW!" over the board. It
   deliberately borrows the original's colour and Jua face; the fanfare that
   goes with it is playWideClearSound(), itself a port of the original's
   rising three-chord arpeggio. */
.wow-moment {
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 42%;
  font-family: var(--font-display), 'Jua', sans-serif;
  font-size: clamp(38px, 13vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  color: #f7b23c;
  text-shadow:
    0 0 14px rgba(247, 178, 60, .85),
    0 0 34px rgba(214, 128, 32, .5),
    0 3px 0 rgba(255, 255, 255, .92);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.6);
}

.wow-moment.is-visible { animation: wow-pop 900ms cubic-bezier(.16, .84, .26, 1.1) both; }

@keyframes wow-pop {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(.55) rotate(-7deg); }
  22% { opacity: 1; transform: translate(-50%, -52%) scale(1.16) rotate(2deg); }
  42% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -76%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .wow-moment.is-visible { animation: wow-fade 700ms ease both; }
  @keyframes wow-fade {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* Adventure gallery (정원 오버레이) ---------------------------------------
   Scenes already travelled to read as collected cards; the ones ahead stay
   silhouettes so the list is a goal rather than a checklist. */
.chapter-collection {
  margin: 12px 0 10px;
  padding: 10px 11px 9px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 16px;
  background: rgba(255,251,240,0.62);
}

.chapter-collection-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.chapter-collection-title span {
  color: #7b6353;
  font-family: var(--font-display);
  font-size: 13.5px;
}

.chapter-collection-title b {
  color: #a2988c;
  font-size: 10.5px;
  font-weight: 850;
}

.chapter-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-card {
  display: grid;
  gap: 2px;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid rgba(214,196,166,0.5);
  border-radius: 12px;
  background: rgba(246,242,232,0.9);
}

.chapter-card strong {
  color: #a2988c;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: -0.01em;
}

.chapter-card span {
  color: #b3a798;
  font-size: 10px;
  font-weight: 800;
}

.chapter-card.is-unlocked {
  border-color: rgba(102,185,167,0.5);
  background: linear-gradient(#f2fffb, #dcf7ef);
}

.chapter-card.is-unlocked strong { color: #3d8578; }
.chapter-card.is-unlocked span { color: #67a99c; }

/* The score-gated scene is the one nobody reaches by simply playing on, so
   it gets its own warm accent instead of the mint the ladder scenes share. */
.chapter-card.is-secret {
  border-style: dashed;
  border-color: rgba(224,168,92,0.55);
}

.chapter-card.is-secret.is-unlocked {
  border-style: solid;
  border-color: rgba(224,168,92,0.7);
  background: linear-gradient(#fffaef, #ffefcf);
}

.chapter-card.is-secret.is-unlocked strong { color: #a9762a; }
.chapter-card.is-secret.is-unlocked span { color: #bd8f45; }

.chapter-collection-hint {
  margin: 8px 0 0;
  color: #a99d90;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

/* TODO: 정원 기능 재작업 시 복구 --------------------------------------------
   The garden is parked, not removed: the markup stays in place, the rescued
   cat count keeps accumulating, and renderGarden / renderChapterGallery are
   untouched, so turning it back on is deleting this block and the `hidden`
   attributes in index.html. The CSS is here as well as the attributes
   because setOverlay() clears `hidden` when an overlay opens - an id rule
   keeps the panel down even if something calls openGarden(). */
#home-garden-button,
#garden-overlay,
#ranking-cats-line {
  display: none;
}

/* ==========================================================================
   Result speech bubble: a tail that is actually attached
   The old tail was a rotate(35deg) skew(8deg,8deg) square sitting at the
   bubble's upper left. Three things made it read as a torn-off flag rather
   than a tail: the skew left its edges out of line with the body, the
   body's own left border ran straight through the join, and the flat fill
   did not match the body's gradient at that height.

   It is now the standard two-triangle tail - an outer triangle in the
   border colour with an inner triangle of body fill laid over it, offset by
   the border width. The inner triangle's base lands 3px inside the bubble,
   so it covers the body's left border and the join disappears; the outer
   one shows through as a ~1.7px outline that continues the body's border
   around the point. Sitting at top:50% it points at the cat and stays
   centred whether the message runs to one line or two.

   The play screen's own .cat-message bubble is a different element and is
   deliberately untouched.
   ========================================================================== */
.result-message {
  /* The old 10px bottom-left corner existed to meet the old tail position. */
  border-radius: 18px;
}

.result-message::before,
.result-message::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  background: none;
  border-radius: 0;
  transform: translateY(-50%);
}

/* Outline, matching the body's border colour. */
.result-message::before {
  left: -12px;
  border: 7px solid transparent;
  border-right-color: rgba(222, 181, 116, .7);
}

/* Fill, sampled from the body gradient at the tail's own height so the two
   are the same colour where they meet. */
.result-message::after {
  left: -9px;
  border: 6px solid transparent;
  border-right-color: rgba(255, 252, 238, .98);
}

/* 2026-08 home logo swap ---------------------------------------------------
   The new wordmark is a wide lockup (OING over a GAME pill) instead of the
   old square-ish OING, so it needs a lot more width to read at the same
   optical weight. These win over the height/width media blocks above purely
   by source order, which keeps the responsive rules there untouched. */
.oing-logo {
  width: clamp(268px, 84vw, 330px);
}

@media (max-width: 340px) {
  .oing-logo { width: 88vw; }
}

/* 2026-08 home layout pass -------------------------------------------------
   Two things were off. The stage box was sized independently of the cat art,
   so the painted image spilled past the box by a different amount at every
   viewport (23px below at 390x844, 14px at 360x740) and the ground shadow --
   anchored to the box -- floated up around the cat's hips instead of sitting
   under its paws. Giving the stage the art's own aspect ratio puts the box
   and the image in one coordinate space, so a single percentage lands the
   shadow correctly at every size.

   The cat art is 422x480 with the silhouette ending at y=440, so the paw line
   is a flat 8.33% up from the bottom of the box. The contact patch spans
   x 69..300, centred at 43.7% rather than 50% -- the tail swings right while
   the weight sits left, which is the other half of the misalignment. */
.home-character-stage {
  width: auto;
  /* Keep the hero at one optical size across a browser viewport and the
     taller Apps-in-Toss WebView. The old `100dvh - 520px` rule expanded the
     same cat from about 180px to 304px solely because browser chrome was
     absent, making the packaged app look like a different home screen. */
  height: clamp(178px, 25dvh, 224px);
  aspect-ratio: 422 / 480;
  margin-top: clamp(4px, 2.6vh, 26px);
}
/* The 496px is the rest of the screen measured: padding, brand row, tagline,
   howto card, action card and the settings reserve. Sizing the cat from what
   is left rather than from a share of the viewport is what keeps every size
   from 320x568 up clear of the settings button -- a plain vh share fits one
   height and overflows the other, because the chrome around the cat costs
   the same absolute pixels on a short screen as on a tall one. */

/* Grass glow and cast shadow, both centred on the paw line. */
.home-character-stage::before {
  left: 43.7%;
  bottom: -0.7%;
  width: 100%;
  height: 18%;
}

.home-character-stage::after {
  left: 43.7%;
  bottom: 4.3%;
  width: 56%;
  height: 8%;
}

/* The cat and the button stack ride down into the slack the old layout left
   sitting empty above the settings button. The reserve keeps the action card
   clear of that button, and the two auto margins split whatever is left over
   so tall screens breathe and short ones collapse to zero instead of
   overflowing. */
.screen-home {
  padding-bottom: calc(80px + var(--safe-bottom));
}

.home-howto,
.home-actions {
  margin-top: auto;
}

/* 2026-08 home best-score card ---------------------------------------------
   The card was a three-column grid -- star, label stack, score -- squeezed
   into half of a 360dp row, so the caption clipped to "최..." and the STAGE
   line ran underneath the number. The stage line is gone and what is left
   stacks in a single column: a small caption over the figure the card is
   actually about, set in the display face. */
.best-record-card {
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 7px;
  padding: 5px 9px 5px 8px;
}

.best-record-card span {
  display: grid;
  justify-items: start;
  gap: 0;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

.best-record-card span em {
  overflow: visible;
  color: #4f8b80;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .01em;
}

.best-record-card strong {
  max-width: none;
  min-width: 0;
  overflow: visible;
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-size: clamp(17px, 5.4vw, 22px);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.08;
  text-align: left;
  text-overflow: clip;
}

.best-record-card strong::after {
  margin-left: 1px;
  font-size: 10.5px;
}

/* 2026-08 start button stars ------------------------------------------------
   The two marks flanking 시작하기 were a four-point sparkle on the left and a
   five-point star on the right, at 20 and 18dp. Same art, same size on both
   sides now, so the button reads as one symmetrical piece. */
.start-button-sparkle,
.start-button-sparkle:last-child {
  width: 19px;
  height: 19px;
}

/* 2026-08 chapter album ----------------------------------------------------
   The album moved out of the parked garden into the records sheet, and the
   cards stopped being name chips. Each one is now the scene itself at 3:4,
   the same ratio the paintings ship in, so the reward is the picture rather
   than a checklist row. A locked card still paints its scene -- blurred,
   drained and darkened -- because "there is something there you have not
   reached" is a better hook than an empty slot. */
.chapter-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.chapter-card {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 0;
  display: grid;
  align-content: end;
  gap: 0;
  overflow: hidden;
  padding: 3px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(206,226,236,.55), rgba(232,224,206,.55));
  isolation: isolate;
}

/* The painting sits on its own layer so the lock treatment can blur it
   without touching the label on top. */
.chapter-card.has-art::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--chapter-thumb) center / cover no-repeat;
}

/* Legibility scrim under the name, and the lock veil in one element. */
.chapter-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(38,52,74,.42) 0%, rgba(38,52,74,.06) 42%, transparent 62%),
    linear-gradient(0deg, rgba(30,44,66,.62), transparent 52%);
}

.chapter-card:not(.is-unlocked).has-art::before {
  filter: blur(3.5px) saturate(.35) brightness(.86);
  transform: scale(1.12);
}

.chapter-card:not(.is-unlocked)::after {
  background: linear-gradient(0deg, rgba(30,44,66,.66), rgba(30,44,66,.34));
}

.chapter-card strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 9.5px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(24,36,56,.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-card span {
  color: rgba(255,255,255,.86);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(24,36,56,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-card.is-unlocked {
  border-color: rgba(102,185,167,.75);
  background: none;
}

.chapter-card.is-unlocked strong,
.chapter-card.is-unlocked span { color: #fff; }

/* The score-gated scene keeps its warm frame so it reads as a different
   kind of goal from the ones the ladder hands out. */
.chapter-card.is-secret { border-color: rgba(224,168,92,.6); border-style: dashed; }
.chapter-card.is-secret.is-unlocked { border-style: solid; border-color: rgba(240,186,102,.9); }
.chapter-card.is-secret.is-unlocked strong { color: #fff; }
.chapter-card.is-secret.is-unlocked span { color: rgba(255,240,214,.94); }

/* The sheet grew a picture grid, so it needs to be able to scroll on short
   screens instead of clipping. */
.ranking-panel {
  max-height: calc(100dvh - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 2026-08 result sheet: bigger cat, bigger line ----------------------------
   Both were sized for a busier sheet. The cat grows ~17% and the message
   with it, capped where the longest line still fits on two rows. */
.result-character-stage { width: 172px; height: 180px; }

.result-message {
  min-width: 196px;
  max-width: 248px;
  font-size: 16px;
}

.result-stage-progress { font-size: 17.5px; }

.result-chapter-earned {
  justify-self: center;
  width: fit-content;
  margin: 5px auto 0;
  padding: 5px 11px;
  border: 1px solid rgba(92, 185, 157, .28);
  border-radius: 999px;
  background: rgba(226, 250, 239, .82);
  color: #347d69;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.result-chapter-earned[hidden] { display: none; }
.result-kicker { font-size: 14px; }

/* Ranking opened from the result screen: the sheet bows out downward so
   the panel owns the screen, and slides back when the overlay closes. */
.result-card {
  transition: transform 340ms cubic-bezier(.3,.7,.3,1), opacity 280ms ease;
}

.result-card.is-tucked {
  transform: translateY(118%);
  opacity: 0;
  pointer-events: none;
}

#ranking-overlay { z-index: 60; }

/* 그림 크게 보기 창은 기록 창보다 위에 선다.
   장면 모음이 기록 창(z-index 60) 안에 들어 있어서, 카드를 눌러도 그림이 그
   뒤에서 열렸다. 화면에는 아무 일도 없는 것처럼 보이니 눌러도 안 열린다는
   말이 나온 것이다. 이 창은 장면 모음에서만 열리므로 늘 위여야 한다. */
#chapter-viewer { z-index: 70; }

@media (max-width: 340px) {
  .result-character-stage { width: 142px; height: 150px; }
  .result-message { max-width: 214px; font-size: 15px; }
}

/* Chapter viewer: one painting, full width of the panel, its own 3:4. */
.chapter-viewer-panel { width: min(100%, 330px); padding: 20px 16px 16px; }
.chapter-viewer-panel h2 { margin: 0 0 10px; color: #44516a; font-size: 19px; }
.chapter-viewer-panel img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(60, 74, 110, .22), inset 0 0 0 1px rgba(255,255,255,.4);
}

/* 2026-08 play backdrop calmed ---------------------------------------------
   The surround was the most saturated thing on screen while the board a
   player has to read was pale pastel - the value hierarchy ran backwards,
   so the eye kept drifting to the frame and re-focusing on the numbers.
   The wash over the sky comes up so the board becomes the brightest, most
   defined object. The photograph underneath is untouched: sky and meadow
   still read as sky and meadow, only softer. */
.screen-play.play-ui-v4,
.screen-play.play-ui-v4[data-stage-band] {
  background:
    linear-gradient(180deg, rgba(232,247,253,.56) 0%, rgba(247,252,247,.47) 44%, rgba(255,251,238,.41) 78%, rgba(255,249,232,.40) 100%),
    #9fd4f5 url("../assets/backgrounds/play-bg-spring-path-v2.webp") center bottom / cover no-repeat;
}

/* Privacy cover: swapped in when the tab goes background so the app
   switcher's snapshot shows the logo, not the board. */
#privacy-cover {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #dff3fb, #fff7e6);
}

#privacy-cover[hidden] { display: none; }

#privacy-cover img {
  width: min(64vw, 300px);
  height: auto;
}

/* Result sheet, elder-readable pass ----------------------------------------
   Everything a step larger, the score in the display face, and the two
   primary actions given real presence. */
.final-score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(60px, 17vw, 72px);
  letter-spacing: -0.01em;
}

.result-grid span { font-size: 13.5px; }
.result-grid b { font-size: 25px; }
.result-grid img { width: 22px; height: 22px; }
.result-kicker { font-size: 15px; }

.result-share-chip {
  min-height: 46px;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 900;
}

#retry-button {
  min-height: 60px;
  font-size: 22px;
  animation: retry-breathe 1.7s ease-in-out infinite;
}

/* 결과 화면은 사람이 오래 머무는 자리인데, 이 버튼이 그동안 내내 돌았다.
   원래 keyframes에 box-shadow가 같이 있어서 프레임마다 버튼을 다시 그렸다.
   그림자는 빼고 크기 변화만 남긴다 - 숨쉬는 느낌은 그쪽에서 나오고,
   transform은 합성기가 처리한다. */
@keyframes retry-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

#retry-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -28%;
  top: -35%;
  width: 20%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-17deg);
  animation: start-button-shine 3.6s 1s ease-in-out infinite;
  pointer-events: none;
}

#retry-button { position: relative; overflow: hidden; }

.result-home-button {
  margin-top: 12px;
  min-height: 46px;
  padding: 9px 20px;
  border: 1.5px solid rgba(190, 156, 96, .55);
  border-radius: 999px;
  background: linear-gradient(#fffdf6, #ffefcd);
  box-shadow: 0 3px 0 rgba(178,132,67,.16), 0 6px 12px rgba(94,73,47,.1);
  color: #6d5545;
  font-size: 17px;
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  #retry-button { animation: none; }
  #retry-button::after { animation: none; }
}

/* Score settle pop at the end of the count-up. */
.final-score.is-settled {
  animation: final-score-settle 360ms cubic-bezier(.2,.85,.3,1.25);
}

@keyframes final-score-settle {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* 설정 패널 맨 아래 처리방침 링크.
   스토어 심사에서 게임 안에서도 찾을 수 있어야 해서 달았고,
   설정 항목들과 섞이지 않도록 작고 조용하게 둔다. */
.settings-legal {
  margin: 12px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(226,202,161,.45);
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: center;
}
.settings-legal a { color: #8b8079; text-decoration: underline; text-underline-offset: 2px; }

/* 장면 한 장을 크게 볼 때 붙는 것들.
   조건 한 줄과 공유 버튼. 참고한 수집형 게임들처럼, 크게 본 김에
   자랑까지 이어지는 것이 수집의 마무리다. */
.chapter-viewer-note {
  margin: 10px 0 0;
  color: #7b8598;
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-align: center;
}
.chapter-viewer-share {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  font-size: 15px;
}
.chapter-viewer-share .button-icon { width: 20px; height: 20px; }

/* 오잉 카드 칸.
   장면 칸과 같은 모양을 쓰되, 아직 못 얻은 칸에는 진행도 막대를 깐다.
   회색 칸만 있으면 목표가 아니라 벽으로 읽힌다 - 얼마나 왔는지가 보여야
   다음 한 장이 손에 닿는 것처럼 느껴진다. */
.oing-card { position: relative; }
.oing-card-meter {
  position: absolute;
  right: 8px;
  bottom: 5px;
  left: 8px;
  height: 4px;
  border-radius: 99px;
  background: rgba(72, 84, 112, .22);
  overflow: hidden;
}
.oing-card-meter::after {
  content: "";
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8fdccb, #62cdb6);
}
.oing-card-collection { margin-top: 12px; }

/* 카드 칸은 장면 칸보다 넓다.
   해금 조건이 "5칸 이상 한 번에 300번 (96/300)"처럼 길어서, 장면과 같은 네 칸
   격자에 넣으면 글자가 잘려서 조건이 읽히지 않는다. 참고한 수집형
   게임들도 세 칸으로 둔다. */
.oing-card-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oing-card {
  min-height: 96px;
  align-content: end;
  padding-bottom: 14px;
}
/* 조건은 두 줄까지 보여준다. 한 줄로 자르면 진행도만 남고 목표가 사라진다. */
.oing-card span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 9.5px;
  line-height: 1.35;
  white-space: normal;
}

/* 아직 못 얻은 카드의 뒷면.
   아홉 칸이 같은 그림 한 장을 쓰므로 요청은 한 번뿐이고, 그 다음부터는
   브라우저가 받아둔 것을 다시 쓴다. 그림이 저장소에 들어오기 전에는
   has-back이 붙지 않아서 예전처럼 회색으로만 남는다. */
.oing-card.has-back {
  background-image: url("../assets/cards/thumbs/card-back-v1.webp");
  background-size: cover;
  background-position: center;
}

/* Home rule headline -----------------------------------------------------
   The separate pill repeated the rule and pushed every useful action down.
   The real rectangle instruction now owns that hierarchy in the existing
   how-to panel, while the removed row becomes breathing room above Settings. */
.screen-home .home-howto {
  margin-top: -2px;
}

/* Reserve a visible gap above the fixed Settings control on short phones. */
.screen-home {
  padding-bottom: calc(88px + var(--safe-bottom));
}

.screen-home .home-instruction {
  gap: 4px;
  min-height: 24px;
  margin: 0 0 2px;
  color: #665249;
  font-family: var(--font-display);
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.screen-home .home-instruction img {
  width: 14px;
  height: 14px;
}

.screen-home .home-instruction em {
  color: var(--coral-deep);
  font: inherit;
}

@media (max-width: 340px), (max-height: 720px) {
  .screen-home .home-instruction {
    gap: 3px;
    font-size: 13.5px;
  }

  .screen-home .home-instruction img {
    width: 13px;
    height: 13px;
  }
}

/* 홈 데모 단순화 (2026-08 검수 합의) --------------------------------------
   3숫자+빈칸 2×2 예제는 첫 3초 안에 "세 숫자? 빈칸도? 네모?"를 한꺼번에
   읽어야 했다. 인접 두 칸도 결국 1×2 직사각형이므로, 가장 단순한 예(4+6)로
   같은 드래그 규칙을 가르친다. 큰 묶음은 첫 판의 드래그 튜토리얼이 맡는다. */
.home-mini-board-pair {
  grid-template-columns: repeat(2, 26px);
  grid-template-rows: 26px;
}

.home-mini-board-pair > span { font-size: 15px; }

.home-mini-board-pair > span:nth-child(2) { background: rgba(255,244,207,.94); }

.home-mini-board-pair .home-mini-drag { animation-name: home-drag-dot-pair; }

@keyframes home-drag-dot-pair {
  0%, 13% { opacity: 1; transform: translate(0, 5px) scale(.9); }
  34%, 70% { opacity: 1; transform: translate(48px, 11px) scale(1); }
  82%, 100% { opacity: 0; transform: translate(48px, 11px) scale(.65); }
}

/* OING online ranking ---------------------------------------------------
   The native Toss board stays available as a secondary route. This sheet is
   provider-neutral, so the same OING ranks can be shown in Toss, Google Play,
   and a future iOS build without rebuilding the visual system each time. */
#online-ranking-overlay {
  position: fixed;
  z-index: 120;
  place-items: start center;
  padding: max(8px, var(--safe-top)) 10px max(8px, var(--safe-bottom));
  overflow: hidden;
}

.oing-online-ranking-panel {
  position: relative;
  isolation: isolate;
  width: min(386px, 100%);
  height: calc(100dvh - max(16px, var(--safe-top)) - max(16px, var(--safe-bottom)));
  max-height: 900px;
  padding: 18px 14px calc(16px + var(--safe-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 82% 5%, rgba(255, 218, 98, .2), transparent 26%),
    linear-gradient(180deg, #fffdf5 0%, #fff9ec 56%, #fff4df 100%);
  border: 2px solid rgba(238, 202, 138, .72);
  box-shadow: 0 18px 46px rgba(104, 82, 57, .24), inset 0 2px 0 rgba(255,255,255,.92);
}

.oing-online-ranking-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: url('../assets/ui/ranking/ranking-temple-frame-v1.webp') center -8px / 100% auto no-repeat;
  opacity: .273;
}

.oing-online-ranking-panel > .overlay-close {
  z-index: 5;
  left: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(201, 169, 118, .92);
  background: #fffaf0;
  box-shadow: 0 1px 2px rgba(105, 78, 43, .08), inset 0 1px 0 #fff;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.oing-online-ranking-panel > .overlay-close:active {
  transform: scale(.96);
  box-shadow: inset 0 1px 2px rgba(105, 78, 43, .1);
}
.oing-online-ranking-panel > .overlay-close i::before,
.oing-online-ranking-panel > .overlay-close i::after {
  left: 10px;
  top: 17px;
  width: 18px;
  height: 3px;
  background: #725f55;
}

.oing-online-rank-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding-left: 64px;
  padding-right: 0;
}

.oing-online-rank-heading > img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(220, 144, 68, .2));
}

.oing-online-rank-heading > div { min-width: 0; }

.oing-nickname-edit {
  min-height: 25px;
  margin: 0 0 8px;
  padding: 0 4px;
  color: #8b776d;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 800 11px var(--font-sans);
}

.oing-nickname-edit:active { transform: translateY(1px); }

.oing-nickname-backdrop {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: inherit;
  background: rgba(73, 58, 53, .46);
  backdrop-filter: blur(2px);
}

.oing-nickname-backdrop[hidden] { display: none; }

.oing-nickname-dialog {
  width: min(320px, 100%);
  padding: 24px 20px 19px;
  text-align: center;
  border: 2px solid rgba(238, 202, 138, .8);
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf5, #fff6e3);
  box-shadow: 0 18px 42px rgba(80, 57, 45, .28), inset 0 2px 0 #fff;
}

.oing-nickname-dialog > span { color: #df9b58; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.oing-nickname-dialog h3 { margin: 3px 0 8px; color: #654b43; font: 400 23px var(--font-display); }
.oing-nickname-dialog > p { margin: 0 0 15px; color: #8c766d; font-size: 12px; font-weight: 700; line-height: 1.5; }
.oing-nickname-dialog label { display: block; margin-bottom: 6px; color: #6e574f; font-size: 12px; font-weight: 900; text-align: left; }
.oing-nickname-dialog input {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  color: #594740;
  border: 2px solid #ecd5ad;
  border-radius: 13px;
  outline: 0;
  background: #fff;
  font: 800 16px var(--font-sans);
}
.oing-nickname-dialog input:focus { border-color: #64beb2; box-shadow: 0 0 0 3px rgba(100, 190, 178, .16); }
.oing-nickname-dialog .oing-nickname-error { min-height: 18px; margin: 5px 0 3px; color: #e65e77; font-size: 11px; }
.oing-nickname-dialog > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; }
.oing-nickname-dialog .btn { min-height: 45px; padding: 0 10px; font-size: 14px; }

.oing-online-rank-heading > div > span {
  display: block;
  color: #d49a50;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.oing-online-rank-heading h2 {
  margin: 1px 0 0;
  color: #654b43;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
}

.oing-rank-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: min(232px, 72%);
  margin: 27px auto 9px;
  padding: 3px;
  border: 1px solid rgba(230, 199, 154, .54);
  border-radius: 14px;
  background: rgba(243, 225, 196, .5);
}

.oing-rank-tabs button {
  min-height: 31px;
  border: 0;
  border-radius: 10px;
  color: #9a8274;
  background: transparent;
  font: 700 14px var(--font-sans);
}

.oing-rank-tabs button.active {
  color: #fff;
  background: linear-gradient(180deg, #ff8fa9, #f56485);
  box-shadow: 0 3px 0 #d94f70, inset 0 1px 0 rgba(255,255,255,.42);
}

.oing-rank-hero {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0 0 10px;
  padding: 5px 6px 0;
  text-align: center;
}

.oing-rank-hero > img {
  display: none;
}

.oing-rank-hero h3 {
  margin: 0 0 1px;
  color: #665049;
  font: 400 23px var(--font-display);
}

.oing-rank-hero h3[hidden] { display: none; }

.oing-rank-hero p {
  margin: 0;
  color: #a68175;
  font-size: 11px;
  font-weight: 700;
}

.oing-my-rank-summary {
  position: relative;
  margin: 18px 1px 3px;
  min-height: 82px;
  padding: 17px 14px 8px;
  border: 1.5px solid rgba(87, 180, 190, .52);
  border-radius: 16px;
  background:
    radial-gradient(circle at 9% 15%, rgba(255, 255, 255, .78), transparent 26%),
    linear-gradient(135deg, rgba(224, 251, 249, .92), rgba(236, 246, 255, .88));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 5px 12px rgba(71, 143, 148, .12);
}

.oing-my-rank-summary[hidden] { display: none; }

.oing-my-rank-ribbon {
  position: absolute;
  top: -13px;
  left: 14px;
  min-width: 72px;
  padding: 4px 14px 5px;
  color: #fff;
  font: 400 13px var(--font-display);
  text-align: center;
  border: 1px solid rgba(216, 82, 113, .45);
  border-radius: 5px 12px 12px 5px;
  background: linear-gradient(180deg, #ff9aaf, #ee6787);
  box-shadow: 0 3px 6px rgba(213, 79, 111, .18), inset 0 1px 0 rgba(255,255,255,.45);
}

.oing-my-rank-main {
  display: grid;
  grid-template-columns: 56px 104px 1px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 51px;
}

.oing-my-rank-main > img {
  width: 54px;
  height: 48px;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(3px);
}

.oing-my-rank-main > i {
  width: 1px;
  height: 45px;
  background: rgba(81, 164, 172, .28);
}

.oing-my-rank-score,
.oing-my-rank-next {
  display: grid;
  min-width: 0;
  min-height: 47px;
  gap: 1px;
  align-content: center;
}
.oing-my-rank-score { text-align: center; }

.oing-my-rank-score > span {
  color: #ef6785;
  font: 400 27px var(--font-display);
  line-height: 1;
}

.oing-my-rank-score > strong {
  min-height: 17px;
  color: #66524a;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.oing-my-rank-score > b {
  overflow: hidden;
  color: #9d887e;
  font-size: 11.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oing-my-rank-score > b.up { color: #33a68c; }
.oing-my-rank-score > b.down { color: #ef765f; }
.oing-my-rank-score > b.is-new { color: #548fca; }
.oing-my-rank-next { text-align: center; }
.oing-my-rank-next > span { min-height: 14px; color: #88746b; font-size: 11px; font-weight: 800; }
.oing-my-rank-next > strong {
  display: block;
  min-height: 34px;
  color: #3ba5b1;
  font: 400 13px var(--font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.oing-my-rank-next > strong > em {
  color: #279eac;
  font: inherit;
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}
.oing-my-rank-next > strong > span { font: inherit; }

.oing-my-rank-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.oing-nickname-edit::before {
  content: '·';
  margin-right: 8px;
  color: #c5ab9e;
}

.oing-my-rank-previous-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 25px;
  margin: 0 0 8px;
  padding: 0 4px;
  color: #8b776d;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  text-align: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.oing-my-rank-previous-link:active { transform: translateY(1px); }

.oing-rank-podium {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 150px;
  gap: 7px;
  padding: 5px 2px 0;
}

.oing-podium-card.rank-1::before,
.oing-podium-card.rank-1::after {
  position: absolute;
  z-index: 2;
  color: #f2bd45;
  content: '✦';
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 5px rgba(255, 214, 88, .52);
}

.oing-podium-card.rank-1::before {
  top: 7px;
  left: 18px;
  font-size: 13px;
}
.oing-podium-card.rank-1::after {
  top: 24px;
  right: 14px;
  font-size: 8px;
}

.oing-podium-card { z-index: 1; }

.oing-podium-card {
  position: relative;
  display: flex;
  flex: 0 1 94px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  color: #78635b;
}

.oing-podium-card.rank-1 { flex-basis: 106px; }

.oing-podium-crown {
  width: 22px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(214, 139, 48, .22));
  transform-origin: 50% 100%;
}

.oing-podium-card.rank-1 .oing-podium-crown { width: 28px; height: 22px; }
.oing-podium-card.rank-2 .oing-podium-crown { width: 22px; height: 18px; }
.oing-podium-card.rank-3 .oing-podium-crown { width: 21px; height: 17px; }

.oing-podium-avatar-frame {
  --podium-ring: rgba(239, 189, 67, .78);
  position: relative;
  width: 48px;
  height: 48px;
  margin: 2px 0 3px;
  border-radius: 50%;
  outline: 2px solid var(--podium-ring);
  background: rgba(255, 253, 245, .76);
  box-shadow: 0 3px 8px rgba(218, 158, 52, .2);
}

.oing-podium-avatar-frame::after {
  position: absolute;
  inset: -5px;
  content: '';
  pointer-events: none;
  border: 1.5px solid var(--podium-ring);
  border-radius: 50%;
  opacity: 0;
}

.oing-podium-avatar {
  width: 48px;
  height: 48px;
  display: block;
  padding: 2px;
  object-fit: contain;
  border-radius: 50%;
}

.oing-podium-card.rank-1 .oing-podium-avatar-frame,
.oing-podium-card.rank-1 .oing-podium-avatar { width: 56px; height: 56px; }
.oing-podium-card.rank-1 .oing-podium-avatar-frame {
  --podium-ring: #efbd43;
}
.oing-podium-card.rank-2 .oing-podium-avatar-frame {
  --podium-ring: #a8bdcb;
  box-shadow: 0 3px 7px rgba(102, 126, 143, .17);
}
.oing-podium-card.rank-3 .oing-podium-avatar-frame {
  --podium-ring: #cf8c62;
  box-shadow: 0 3px 7px rgba(164, 100, 63, .18);
}

.oing-podium-identity {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.oing-podium-identity > strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oing-rank-me-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  border-radius: 999px;
  background: #43aaa5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  animation: oing-me-badge-glow 1.6s ease-in-out infinite;
}

@keyframes oing-me-badge-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(67, 170, 165, 0), inset 0 1px 0 rgba(255,255,255,.35); }
  50% { box-shadow: 0 0 8px rgba(67, 170, 165, .58), inset 0 1px 0 rgba(255,255,255,.45); }
}

.oing-podium-rank-badge {
  min-width: 47px;
  margin: 2px 0 3px;
  padding: 2px 6px;
  color: #7b5b21;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #e5bd4e;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4bb, #f3ce66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.oing-podium-rank-line {
  display: flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 2px 0 3px;
}
.oing-podium-rank-line .oing-podium-rank-badge { margin: 0; }
.rank-2 .oing-podium-rank-badge { color: #607687; border-color: #afc3d1; background: linear-gradient(180deg, #f7fbff, #cfdee8); }
.rank-3 .oing-podium-rank-badge { color: #89583c; border-color: #d89a72; background: linear-gradient(180deg, #ffe8d6, #e6ad84); }
.oing-podium-rank-badge.up { color: #23896f; }
.oing-podium-rank-badge.down { color: #d56452; }
.oing-podium-rank-badge.is-new { color: #477fae; }

.oing-podium-score-line {
  display: flex;
  min-height: 19px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 2px 0 5px;
}

.oing-podium-score-line > b {
  color: #f05d7d;
  font-size: 17px;
  font-weight: 900;
}

.oing-podium-base {
  position: relative;
  display: grid;
  width: 100%;
  height: 46px;
  place-items: center;
  color: #fff;
  font: 900 22px var(--font-sans);
  border: 1px solid rgba(210, 157, 93, .42);
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, #ffd9a2, #eca65d);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 4px 8px rgba(197, 130, 64, .18);
  overflow: hidden;
}

.oing-podium-base::after {
  position: absolute;
  inset: -40% auto -40% -45%;
  width: 32%;
  content: '';
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-180%) skewX(-12deg);
}

/* The ranking motion uses only compositor-friendly transforms and opacity on
   the small podium ornaments. Keeping it scoped to the open sheet prevents
   background work while the player is in the game. */
#online-ranking-overlay:not([hidden]) .oing-podium-crown {
  animation: oing-crown-float 3.2s ease-in-out infinite alternate;
}
#online-ranking-overlay:not([hidden]) .rank-2 .oing-podium-crown { animation-delay: -.8s; }
#online-ranking-overlay:not([hidden]) .rank-3 .oing-podium-crown { animation-delay: -1.6s; }
#online-ranking-overlay:not([hidden]) .oing-podium-avatar-frame::after {
  animation: oing-medal-ring-pulse 3.6s ease-in-out infinite;
}
#online-ranking-overlay:not([hidden]) .rank-2 .oing-podium-avatar-frame::after { animation-delay: -1.2s; }
#online-ranking-overlay:not([hidden]) .rank-3 .oing-podium-avatar-frame::after { animation-delay: -2.4s; }
#online-ranking-overlay:not([hidden]) .oing-podium-base::after {
  animation: oing-podium-shine 5.4s ease-in-out infinite;
}
#online-ranking-overlay:not([hidden]) .rank-2 .oing-podium-base::after { animation-delay: -1.8s; }
#online-ranking-overlay:not([hidden]) .rank-3 .oing-podium-base::after { animation-delay: -3.6s; }
#online-ranking-overlay:not([hidden]) .oing-podium-card.rank-1::before {
  animation: oing-podium-star 2.8s ease-in-out infinite;
}
#online-ranking-overlay:not([hidden]) .oing-podium-card.rank-1::after {
  animation: oing-podium-star 3.4s 1.1s ease-in-out infinite;
}

@keyframes oing-crown-float {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-3px) rotate(1deg); }
}

@keyframes oing-medal-ring-pulse {
  0%, 36%, 100% { opacity: 0; transform: scale(.94); }
  52% { opacity: .58; transform: scale(1); }
  72% { opacity: 0; transform: scale(1.1); }
}

@keyframes oing-podium-shine {
  0%, 58% { opacity: 0; transform: translateX(-180%) skewX(-12deg); }
  64% { opacity: .86; }
  78%, 100% { opacity: 0; transform: translateX(560%) skewX(-12deg); }
}

@keyframes oing-podium-star {
  0%, 100% { opacity: .12; transform: scale(.62) rotate(0); }
  45% { opacity: .9; transform: scale(1.18) rotate(22deg); }
}

.rank-1 .oing-podium-base { height: 66px; background: linear-gradient(180deg, #ffe27d, #f0ae3f); }
.rank-2 .oing-podium-base { height: 51px; background: linear-gradient(180deg, #dcecf5, #9db9cb); }
.rank-3 .oing-podium-base { height: 42px; background: linear-gradient(180deg, #f5c59e, #cf8d62); }
.oing-podium-card.is-me .oing-podium-base { outline: 3px solid rgba(101, 198, 195, .32); }
.oing-podium-card.is-placeholder { opacity: .76; }
.oing-podium-card.is-placeholder .oing-podium-identity > strong {
  max-width: 76px;
  color: #8f7c72;
  font-size: 10px;
}
.oing-podium-card.is-placeholder .oing-podium-score-line > b { color: #a99689; }

.oing-friend-hint {
  margin: 10px 3px 1px;
  color: #4f8190;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
}

#online-ranking-overlay:not([data-mode="friends"]) .oing-friend-hint { display: none; }
#online-ranking-overlay[data-mode="friends"] .oing-friend-hint { margin-top: 7px; }

.oing-rank-status {
  min-height: 18px;
  margin: 3px 4px 7px;
  color: #a18a7b;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.oing-rank-status:empty { display: none; }

.oing-rank-list {
  display: grid;
  gap: 7px;
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.oing-rank-list:empty { display: none; }

.oing-rank-row {
  display: grid;
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
  grid-template-columns: 26px 25px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 5px 8px;
  column-gap: 2px;
  color: #725e56;
  border: 1px solid rgba(217, 190, 151, .46);
  border-radius: 13px;
  background: #fffaf1;
  box-shadow: 0 2px 6px rgba(54, 100, 111, .16), inset 0 1px 0 #fff;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.oing-rank-row.top10 {
  border-color: rgba(209, 156, 38, .74);
  background: linear-gradient(90deg, #fff0b2, #fffaf0 62%);
  box-shadow: inset 4px 0 0 #dba62c, 0 2px 5px rgba(119, 87, 54, .07);
}

.oing-rank-row.top30 {
  border-color: rgba(157, 161, 224, .45);
  background: linear-gradient(90deg, #e9e7ff, #fffaf2 62%);
  box-shadow: inset 4px 0 0 #a8a9eb, 0 2px 5px rgba(119, 87, 54, .07);
}

.oing-rank-row.is-me:not(.top10):not(.top30) {
  border-color: rgba(145, 164, 158, .62);
  background: linear-gradient(90deg, #f0f4f1, #fffaf3 65%);
}
.oing-rank-row.top30.is-me {
  border-color: rgba(143, 135, 213, .62);
  background: linear-gradient(90deg, #e6e3ff, #fffaf4 65%);
}

.oing-rank-row.can-save-friend.is-pressing,
.oing-podium-card.can-save-friend.is-pressing {
  transform: scale(.975);
  filter: brightness(.97);
}

.oing-rank-number { color: #82766e; font-size: 17px; text-align: center; }
.oing-rank-change {
  min-width: 24px;
  color: #b7a79e;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}
.oing-rank-change.up { color: #2eaa89; }
.oing-rank-change.down { color: #ed765e; }
.oing-rank-change.is-new { color: #4b93cf; font-size: 10px; }
.oing-rank-identity { min-width: 0; }
.oing-rank-name-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.oing-rank-name { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.oing-rank-hot { flex: 0 0 auto; font-size: 15px; }
.oing-rank-friend {
  flex: 0 0 auto;
  padding: 2px 4px;
  color: #398e8a;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(67, 170, 165, .38);
  border-radius: 999px;
  background: rgba(229, 250, 246, .9);
}
.oing-rank-friend.is-saved { color: #398e8a; }
.oing-rank-tail {
  display: flex;
  min-width: 101px;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.oing-podium-card.can-save-friend {
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
}

#online-ranking-overlay:not([hidden]) ~ .toast {
  position: fixed;
  z-index: 180;
  bottom: calc(26px + var(--safe-bottom));
}
.oing-rank-tail > strong { color: #ee6684; font-size: 16px; white-space: nowrap; }
.oing-rank-tail > strong::after { content: '점'; margin-left: 1px; font-size: 9px; }
.oing-rank-tier {
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
  border-radius: 7px;
}
.oing-rank-tier.tier-3,
.oing-rank-tier.tier-10 { color: #89611e; border: 1px solid #e4b948; background: #fff1b8; }
.oing-rank-tier.tier-30 { color: #6660a6; border: 1px solid #b3afe8; background: #eeecff; }

.oing-my-rank {
  position: sticky;
  bottom: -1px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 11px 13px;
  color: #65534d;
  border: 1px solid rgba(83, 187, 183, .55);
  border-radius: 14px;
  background: rgba(232, 253, 249, .96);
  box-shadow: 0 5px 12px rgba(76, 135, 127, .14);
}

.oing-my-rank[hidden] { display: none; }
.oing-my-rank span { font-size: 12px; font-weight: 700; }
.oing-my-rank b { color: #38a9a3; }
.oing-my-rank strong { color: #ef6583; }

.oing-online-rank-heading .oing-native-rank-button {
  flex: none;
  min-width: 84px;
  min-height: 38px;
  margin-left: auto;
  padding: 0 12px;
  color: #65483e;
  border: 1.5px solid #dcb97e;
  border-radius: 11px;
  background: linear-gradient(180deg, #fffdf7, #f6ead3);
  box-shadow: 0 4px 0 #d0ad72, 0 5px 10px rgba(151, 112, 61, .12), inset 0 1px 0 #fff;
  font: 900 15px var(--font-sans);
  white-space: nowrap;
}
.oing-online-rank-heading .oing-native-rank-button > span {
  display: inline;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}
.oing-online-rank-heading .oing-native-rank-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #d8bd91, inset 0 1px 0 #fff;
}
.oing-native-rank-button[data-available="false"] { opacity: .72; }

.result-ranking-achievement {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 2px auto 5px;
  padding: 5px 11px;
  color: #b66935;
  border: 1px solid rgba(235, 178, 77, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8cf, #ffe8a8);
  box-shadow: 0 2px 6px rgba(184, 121, 48, .12), inset 0 1px 0 #fff;
  font: 800 11px var(--font-sans);
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
}

.oing-rank-rise-toast {
  position: absolute;
  z-index: 12;
  top: 88px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 9px 15px;
  color: #fff;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8daa, #ed577d);
  box-shadow: 0 5px 0 #cb4267, 0 10px 22px rgba(196, 64, 101, .3);
  font: 900 14px var(--font-sans);
  text-align: center;
  transform: translateX(-50%);
  animation: oing-rank-toast-in 2.5s cubic-bezier(.2,.82,.25,1) both;
}

.oing-rank-confetti {
  position: absolute;
  z-index: 11;
  inset: 55px 16px auto;
  height: 130px;
  overflow: hidden;
  pointer-events: none;
}

.oing-rank-confetti i {
  position: absolute;
  top: 38px;
  left: var(--confetti-left);
  width: 7px;
  height: 12px;
  border-radius: 2px;
  background: #ffcf54;
  animation: oing-rank-confetti-pop 1.15s calc(var(--confetti-index) * 22ms) ease-out both;
}

.oing-rank-confetti i:nth-child(3n) { background: #62cfc1; }
.oing-rank-confetti i:nth-child(3n + 2) { background: #ff7898; }
.oing-rank-confetti i:nth-child(even) { width: 9px; height: 7px; border-radius: 50%; }

.is-rank-jump { animation: oing-rank-jump 1.05s cubic-bezier(.2,.86,.24,1.1) both; }

@keyframes oing-rank-jump {
  0% { opacity: .35; transform: translateY(34px) scale(.96); }
  58% { opacity: 1; transform: translateY(-7px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes oing-rank-toast-in {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.84); }
  13%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -9px) scale(.96); }
}

@keyframes oing-rank-confetti-pop {
  0% { opacity: 0; transform: translateY(20px) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(92px) rotate(420deg); }
}

@media (prefers-reduced-motion: reduce) {
  .oing-rank-rise-toast,
  .oing-rank-confetti i,
  .is-rank-jump { animation: none; }
  .oing-rank-me-badge { animation: none; }
  #online-ranking-overlay .oing-podium-crown,
  #online-ranking-overlay .oing-podium-avatar-frame::after,
  #online-ranking-overlay .oing-podium-base::after,
  #online-ranking-overlay .oing-podium-card.rank-1::before,
  #online-ranking-overlay .oing-podium-card.rank-1::after { animation: none; }
}

@media (max-width: 360px), (max-height: 720px) {
  .oing-online-ranking-panel { padding: 13px 10px calc(12px + var(--safe-bottom)); }
  .oing-online-rank-heading { min-height: 48px; padding-left: 58px; padding-right: 0; }
  .oing-online-rank-heading > img { width: 42px; height: 42px; }
  .oing-online-rank-heading h2 { font-size: 23px; }
  .oing-online-rank-heading .oing-native-rank-button { min-width: 80px; min-height: 35px; padding: 0 7px; font-size: 14px; }
  .oing-rank-hero { margin-bottom: 8px; }
  .oing-my-rank-summary { padding-inline: 13px; }
  .oing-my-rank-main { grid-template-columns: 58px 100px 1px minmax(0, 1fr); gap: 5px; }
  .oing-my-rank-main > img { width: 50px; height: 45px; }
  .oing-my-rank-next > strong { font-size: 13px; }
  .oing-my-rank-next > strong > em { font-size: 18px; }
  .oing-rank-podium { min-height: 132px; }
  .oing-podium-avatar-frame,
  .oing-podium-avatar { width: 43px; height: 43px; }
  .oing-podium-card.rank-1 .oing-podium-avatar-frame,
  .oing-podium-card.rank-1 .oing-podium-avatar { width: 50px; height: 50px; }
  .oing-podium-base { height: 38px; }
  .rank-1 .oing-podium-base { height: 56px; }
  .rank-2 .oing-podium-base { height: 43px; }
  .rank-3 .oing-podium-base { height: 35px; }
  .oing-rank-row { grid-template-columns: 27px 30px minmax(0, 1fr) auto; padding: 5px 7px 5px 9px; }
  .oing-rank-change { font-size: 11px; }
  .oing-rank-name { font-size: 15px; }
  .oing-rank-tail { min-width: 105px; gap: 3px; }
  .oing-rank-tier { padding-inline: 4px; font-size: 7px; }
  .oing-rank-tail > strong { font-size: 15px; }
}