:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #4a3427;
  background: #f7efe3;
  font-synthesis: none;
  --ink: #4a3427;
  --muted: #8d715d;
  --line: #e9d2b5;
  --xhs-overlay-clearance-top: 76px;
}

@supports (padding-top: max(0px, 1px)) {
  :root {
    --xhs-overlay-clearance-top: max(76px, calc(env(safe-area-inset-top, 0px) + 48px));
  }
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; }
body {
  width: 100%; min-width: 320px; min-height: 100dvh; margin: 0; overflow-x: hidden;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.96), transparent 28rem), radial-gradient(circle at 85% 64%, rgba(239,190,128,.22), transparent 25rem), linear-gradient(180deg, #fbf5eb 0%, #f4e7d5 100%);
}
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.game-shell { width: 100%; max-width: 800px; margin: 0 auto; padding: 10px 12px 18px; }
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.brand-logo { display: block; width: clamp(210px, 43vw, 350px); max-width: calc(100% - 300px); height: auto; }
.header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.header-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,250,241,.88); color: var(--ink); box-shadow: 0 8px 22px rgba(109,72,43,.08); font-size: 18px; cursor: pointer; }
.open-counter, .score-counter { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 42px; padding: 7px 11px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.score-counter {
  --score-gain-accent: #9a714d;
  --score-gain-soft: #fff3df;
  --score-pulse-scale: 1.04;
  --score-pulse-lift: -1px;
  position: relative; isolation: isolate; border: 1px solid #ead0ad; background: rgba(255,247,234,.9); color: #8a6b52;
  box-shadow: 0 7px 18px rgba(109,72,43,.07); font-size: 11px;
}
.score-counter[data-feedback-rarity="rare"] { --score-gain-accent: #477d79; --score-gain-soft: #eaf4f1; --score-pulse-scale: 1.055; --score-pulse-lift: -2px; }
.score-counter[data-feedback-rarity="special"] { --score-gain-accent: #795c92; --score-gain-soft: #f2ebf6; --score-pulse-scale: 1.07; --score-pulse-lift: -3px; }
.score-counter[data-feedback-rarity="collection"] { --score-gain-accent: #a4661d; --score-gain-soft: #fff0c6; --score-pulse-scale: 1.085; --score-pulse-lift: -4px; }
.score-gain {
  position: absolute; z-index: 2; left: 50%; top: -9px; min-width: 34px; padding: 3px 7px;
  border: 1px solid currentColor; border-radius: 999px; background: var(--score-gain-soft); color: var(--score-gain-accent);
  box-shadow: 0 5px 14px rgba(83,52,31,.16); font-size: 11px; font-weight: 950; line-height: 1.15;
  opacity: 0; transform: translate(-50%,4px) scale(.9); pointer-events: none; white-space: nowrap;
}
.score-gain.is-visible, .score-gain.is-showing, .score-gain.is-gaining { animation: score-gain-float .78s cubic-bezier(.2,.78,.25,1) both; }
.open-counter { position: relative; overflow: visible; min-height: 46px; padding-inline: 9px; border: 2px solid #d89b60; background: linear-gradient(180deg,#fffdf7,#f6dfc3); color: #714329; box-shadow: 0 8px 0 rgba(195,130,78,.17),0 10px 24px rgba(109,72,43,.13); font-size: 12px; font-weight: 900; }
.catbox-entry-icon { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(202,137,79,.2); }
.catbox-entry-copy { display: grid; justify-items: start; gap: 1px; line-height: 1.05; }
.catbox-entry-copy strong { color: #63391f; font-size: 12px; letter-spacing: .02em; }
.catbox-entry-copy small { color: #93694d; font-size: 9.5px; font-weight: 750; }
.catbox-entry-copy b { color: #63391f; font-size: 10px; }
.catbox-entry-arrow { flex: 0 0 auto; margin-left: 1px; color: #ad6b35; font-size: 22px; font-weight: 950; line-height: 1; animation: catbox-entry-invite 1.4s ease-in-out .7s 1 both; }
.catbox-gain { position: absolute; z-index: 4; top: -10px; right: 9px; min-width: 30px; padding: 3px 7px; border: 1px solid #c96d3a; border-radius: 999px; background: #fff4df; color: #a74f24; box-shadow: 0 6px 15px rgba(128,70,35,.22); font-size: 11px; font-weight: 950; line-height: 1.1; pointer-events: none; }
.catbox-gain.is-visible { animation: catbox-gain-pop .9s cubic-bezier(.2,.82,.25,1) both; }
.open-counter.has-new-cat { animation: catbox-entry-bump .44s ease-out; }
.open-counter img, .score-counter img { width: 25px; height: 25px; object-fit: contain; }
.catbox-entry-icon img { width: 23px; height: 23px; }
.score-counter img { width: 22px; height: 22px; }
.open-counter strong, .score-counter strong { color: var(--ink); }
.open-counter:hover, .score-counter:hover, .header-icon-button:hover { filter: brightness(1.02); transform: translateY(-1px); }
.open-counter:active, .score-counter:active, .header-icon-button:active { transform: translateY(1px); }
.open-counter:focus-visible, .score-counter:focus-visible, .header-icon-button:focus-visible { outline: 3px solid rgba(207,116,65,.26); outline-offset: 2px; }
.score-counter.is-updating { animation: score-counter-bump .42s ease-out; }

.opening-card {
  --rarity-accent: #8f7965; --rarity-soft: #f3ede4; --rarity-border: #dfd0bd; --rarity-glow: transparent;
  position: relative; overflow: hidden; padding: 24px clamp(16px, 5vw, 44px) 30px;
  border: 1px solid rgba(224,198,165,.9); border-radius: 30px; background: rgba(255,252,247,.9);
  box-shadow: 0 26px 70px rgba(99,67,40,.12); text-align: center;
}
.opening-card[data-rarity="rare"] { --rarity-accent: #5f8f8b; --rarity-soft: #eaf4f1; --rarity-border: #a9cbc5; --rarity-glow: rgba(114,179,169,.18); }
.opening-card[data-rarity="special"] { --rarity-accent: #9072aa; --rarity-soft: #f2ebf6; --rarity-border: #c9b3d7; --rarity-glow: rgba(164,124,190,.22); }
.opening-card[data-rarity="collection"] { --rarity-accent: #b7792b; --rarity-soft: #fff2cf; --rarity-border: #e0ae55; --rarity-glow: rgba(232,178,73,.28); }
.opening-card.rarity-arrival[data-rarity="special"] { animation: special-panel-arrival .66s ease-out; }
.opening-card.rarity-arrival[data-rarity="collection"] { animation: collection-panel-arrival .85s ease-out; }
.opening-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .38; background-image: linear-gradient(rgba(190,152,110,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(190,152,110,.1) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, black, transparent 74%); }
.intro-copy { position: relative; z-index: 8; }
.eyebrow { margin: 0 0 7px; color: #bd7846; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; color: var(--ink); font-size: clamp(26px, 5vw, 39px); line-height: 1.2; letter-spacing: -.04em; }
.intro-copy > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14px; }

.box-stage { position: relative; width: min(500px, 100%); height: 370px; margin: 0 auto; isolation: isolate; }
.trait-reveal-layer {
  position: absolute; z-index: 9; top: 7px; left: 50%; max-width: calc(100% - 28px); margin: 0; padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--rarity-border) 78%, white); border-radius: 999px;
  background: color-mix(in srgb, var(--rarity-soft) 88%, white); color: var(--rarity-accent);
  box-shadow: 0 7px 18px var(--rarity-glow); font-size: 13px; font-weight: 950; letter-spacing: .03em;
  transform: translateX(-50%); overflow: hidden; white-space: normal; line-height: 1.35; text-align: center; pointer-events: none;
}
.trait-reveal-layer[data-notice-type="title_unlocked"] { border-color: #dfb461; background: #fff1c9; color: #93601f; box-shadow: 0 8px 22px rgba(183,121,43,.2); }
.trait-reveal-layer[data-notice-type="secret_unlocked"] { border-color: #cab7da; background: #f5edf8; color: #72588a; }
.trait-reveal-layer[data-notice-type="coat_unlocked"] { border-color: #dfbc91; background: #fff4e5; color: #9a5f39; }
.trait-reveal-layer[data-notice-type="discovery_unlocked"], .trait-reveal-layer[data-notice-type="trait"] { min-width: 184px; padding: 9px 18px; border-width: 2px; background: linear-gradient(135deg,#f5effd,#edf6ff); color: #6a5790; box-shadow: 0 10px 26px rgba(114,89,145,.2); font-size: 14px; }
.trait-reveal-layer[data-notice-type="coat_unlocked"] { min-width: 184px; padding: 9px 18px; border-width: 2px; box-shadow: 0 10px 25px rgba(154,95,57,.18); font-size: 14px; }
.trait-reveal-layer[data-notice-type="collection_reveal"] { min-width: 210px; padding: 11px 20px; border: 2px solid #d6a047; background: linear-gradient(135deg,#fff9e8,#ffe9ad); color: #946020; box-shadow: 0 12px 30px rgba(183,121,43,.28), inset 0 0 0 2px rgba(255,255,255,.7); font-size: 15px; letter-spacing: .08em; }
.trait-reveal-layer.is-revealing { animation: trait-discovery var(--notice-duration,1.05s) cubic-bezier(.2,.82,.25,1) both; }
.secret-unlock-card { position: absolute; z-index: 10; top: 5px; left: 50%; width: min(300px, calc(100% - 28px)); padding: 13px 18px 14px; border: 2px solid #bca2d1; border-radius: 18px; background: linear-gradient(145deg,rgba(255,253,255,.98),rgba(239,228,248,.98)); color: #604a76; box-shadow: 0 15px 34px rgba(96,74,118,.25), inset 0 0 0 3px rgba(255,255,255,.6); text-align: center; transform: translateX(-50%); pointer-events: none; }
.secret-unlock-card::before { content: "✦"; display: block; margin-bottom: 2px; color: #9a75b7; font-size: 20px; }
.secret-unlock-kicker { display: block; color: #8f6ca8; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.secret-unlock-card strong { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; }
.secret-unlock-card.is-revealing { animation: secret-unlock-card var(--notice-duration,1.35s) cubic-bezier(.18,.82,.2,1) both; }
.reveal-positioner {
  --reveal-scene-offset-y: 8px;
  position: absolute; inset: 0; transform: translateY(var(--reveal-scene-offset-y));
}
.reveal-positioner[data-scene-profile="high-tail"] { --reveal-scene-offset-y: 28px; }
.box-stage[data-size="giant"] .reveal-positioner[data-scene-profile="high-tail"] { --reveal-scene-offset-y: 34px; }
.reveal-animator { position: absolute; inset: 0; }
.stage-glow { position: absolute; z-index: 1; left: 50%; top: 38px; width: min(330px, 76vw); aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translateX(-50%) scale(.75); background: radial-gradient(circle, var(--rarity-glow) 0 34%, transparent 72%); pointer-events: none; }
.box-image { position: absolute; left: 50%; bottom: 4px; width: min(350px, 88vw); height: auto; transform: translateX(-50%); transform-origin: 50% 78%; user-select: none; pointer-events: none; }
.box-back { z-index: 3; }
.revealed-cat { position: absolute; z-index: 4; left: 50%; bottom: 106px; width: min(305px, 73vw); height: auto; opacity: 0; transform: translate(-50%, 24px) scale(.88); transform-origin: 50% 82%; filter: drop-shadow(0 12px 10px rgba(90,58,34,.15)); pointer-events: none; }
.pearl-sweep { position: absolute; z-index: 5; left: 50%; bottom: 106px; width: min(305px, 73vw); aspect-ratio: 1; opacity: 0; transform: translateX(-50%); pointer-events: none; mask-position: center; mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; background: linear-gradient(118deg, transparent 18%, rgba(240,201,216,.18) 34%, rgba(255,255,255,.92) 48%, rgba(201,226,241,.32) 60%, transparent 76%); background-size: 260% 100%; }
.box-stage[data-reveal-profile="low"] .revealed-cat { bottom: 124px; }
.box-stage[data-reveal-profile="low"] .pearl-sweep { bottom: 124px; }
.box-stage[data-reveal-profile="fixed"] .revealed-cat { bottom: 118px; }
.box-stage[data-reveal-profile="fixed"] .pearl-sweep { bottom: 118px; }
.box-stage[data-reveal-profile="collection"] .revealed-cat { bottom: 96px; width: min(265px, 68vw); }
.rarity-stage-deco { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.sparkle { position: absolute; width: 48px; opacity: 0; pointer-events: none; }
.sparkle-one { left: 8%; top: 72px; }
.sparkle-two { right: 7%; top: 96px; width: 42px; }
.sparkle-three { left: 15%; top: 192px; width: 35px; }
.sparkle-four { right: 16%; top: 210px; width: 32px; }
.sparkle-five { left: 27%; top: 46px; width: 30px; }
.sparkle-six { right: 27%; top: 48px; width: 28px; }
.box-stage[data-state="opening"] .box-back { animation: box-shake .24s ease-in-out; }
.box-stage[data-state="emerging"] .box-back { animation: box-open-settle .34s ease-out forwards; }
.box-stage[data-state="showcase"] .box-back { transform: translate(-50%,10px); }
.box-stage[data-state="emerging"] .revealed-cat { animation: cat-emerge .34s cubic-bezier(.2,.82,.25,1.14) forwards; }
.box-stage[data-state="emerging"][data-size="giant"] .reveal-animator { animation: giant-stage-bump .42s ease-out; }
.box-stage[data-state="emerging"][data-rarity="collection"] .revealed-cat { animation: cat-emerge-collection .35s cubic-bezier(.2,.82,.25,1.1) forwards; }
.box-stage[data-state="showcase"] .revealed-cat { opacity: 1; transform: translate(-50%,0) scale(1); }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="rare"] .stage-glow { animation: halo-arrive .51s ease-out forwards; }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="special"] .stage-glow { animation: halo-pulse .66s ease-out forwards; }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="collection"] .stage-glow { animation: collection-halo .85s ease-out forwards; }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="rare"] .sparkle:nth-child(-n+2),
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="special"] .sparkle:nth-child(-n+4),
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="collection"] .sparkle { animation-name: sparkle-float; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="rare"] .sparkle:nth-child(-n+2) { animation-duration: .45s; }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="special"] .sparkle:nth-child(-n+4) { animation-duration: .54s; }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-rarity="collection"] .sparkle { animation-duration: .74s; }
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-trait-effect="pearl_gradient"] .stage-glow {
  background: radial-gradient(circle, rgba(255,253,252,.62) 0 16%, rgba(244,220,228,.32) 30%, rgba(220,234,244,.28) 50%, rgba(221,240,233,.18) 62%, transparent 74%);
  animation: pearl-halo-pulse .68s ease-out forwards;
}
.box-stage:is([data-state="emerging"],[data-state="showcase"])[data-trait-effect="pearl_gradient"] .sparkle:nth-child(-n+3) { animation: pearl-sparkle .68s ease-out both; }
.box-stage[data-state="emerging"][data-trait-effect="pearl_gradient"] .pearl-sweep { animation: pearl-sweep .72s ease-out both; }
.box-stage:is([data-state="emerging"],[data-state="showcase"]) .sparkle-two { animation-delay: .05s !important; }
.box-stage:is([data-state="emerging"],[data-state="showcase"]) .sparkle-three { animation-delay: .08s !important; }
.box-stage:is([data-state="emerging"],[data-state="showcase"]) .sparkle-four { animation-delay: .11s !important; }
.box-stage:is([data-state="emerging"],[data-state="showcase"]) .sparkle-five { animation-delay: .12s !important; }
.box-stage:is([data-state="emerging"],[data-state="showcase"]) .sparkle-six { animation-delay: .13s !important; }
.reveal-callout { position: absolute; z-index: 7; top: 18px; left: 50%; margin: 0; padding: 7px 15px; border: 1px solid var(--rarity-border); border-radius: 999px; background: color-mix(in srgb, var(--rarity-soft) 88%, white); color: var(--rarity-accent); box-shadow: 0 6px 18px var(--rarity-glow); font-size: 14px; font-weight: 950; letter-spacing: .08em; transform: translateX(-50%); white-space: nowrap; animation: callout-arrival .68s ease-out both; }

.opening-status { position: relative; z-index: 8; display: grid; place-items: center; min-height: 22px; margin: 20px 0 12px; }
.opening-status p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.primary-action { position: relative; z-index: 8; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 210px; min-height: 54px; padding: 12px 28px; border: 0; border-radius: 18px; background: linear-gradient(180deg, #e79a5f, #cf7441); box-shadow: 0 9px 0 #9d5532, 0 18px 32px rgba(172,93,50,.2); color: #fffaf1; font-size: 18px; font-weight: 900; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.primary-action img { width: 31px; height: 31px; object-fit: contain; filter: brightness(0) invert(1); }
.primary-action:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.08); }
.primary-action:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 4px 0 #9d5532, 0 10px 20px rgba(172,93,50,.18); }
.primary-action:disabled { cursor: wait; opacity: .65; }

.result-card { position: relative; z-index: 8; width: min(610px, 100%); margin: 30px auto 0; padding: 22px; border: 1px solid var(--rarity-border); border-radius: 24px; background: rgba(255,255,255,.78); text-align: left; animation: card-in .12s ease-out; }
.result-card[data-rarity="rare"] { border-width: 2px; box-shadow: 0 12px 30px rgba(95,143,139,.1); }
.result-card[data-rarity="special"] { border-width: 2px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(242,235,246,.88)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.66), 0 14px 34px rgba(144,114,170,.14); }
.result-card[data-rarity="collection"] { border-width: 3px; background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,242,207,.9)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.72), 0 16px 40px rgba(183,121,43,.18); }
.result-heading { display: grid; grid-template-columns: minmax(80px, auto) 1fr 88px; align-items: center; gap: 14px; min-height: 70px; }
.rarity-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rarity-emblem { display: block; flex: 0 0 auto; width: 42px; max-height: 52px; object-fit: contain; }
.result-card[data-rarity="collection"] .rarity-emblem { width: 58px; max-height: 64px; filter: drop-shadow(0 4px 6px rgba(183,121,43,.2)); }
.rarity-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; margin: 0; padding: 5px 11px; border: 1px solid var(--rarity-border); border-radius: 999px; background: var(--rarity-soft); color: var(--rarity-accent); font-size: 12px; font-weight: 900; white-space: nowrap; }
.result-card[data-rarity="rare"] .rarity-badge { border-width: 2px; box-shadow: 0 3px 9px rgba(95,143,139,.12); }
.result-card[data-rarity="special"] .rarity-badge { border-width: 2px; padding-inline: 14px; box-shadow: 0 4px 12px rgba(144,114,170,.16); }
.result-card[data-rarity="collection"] .rarity-badge { min-height: 34px; padding-inline: 16px; border-width: 2px; font-size: 13px; box-shadow: 0 5px 14px rgba(183,121,43,.18); }
.arrival-copy { min-width: 0; text-align: center; }
.arrival-copy h2 { margin: 0; color: var(--ink); font-size: clamp(21px, 4vw, 28px); line-height: 1.2; }
.arrival-copy p { margin: 5px 0 0; color: var(--rarity-accent); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.new-badge { justify-self: end; width: 82px; height: auto; object-fit: contain; }
.result-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 20px 0; }
.result-facts div { min-width: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--rarity-border) 55%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--rarity-soft) 66%, #fff); }
.result-facts dt { color: var(--muted); font-size: 11px; font-weight: 800; }
.result-facts dd { margin: 4px 0 0; color: var(--ink); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.trait-chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.trait-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid #c9d8dc; border-radius: 999px; background: #f1f7f8; color: #45666c; font-size: 12px; font-weight: 900; line-height: 1.25; white-space: nowrap; }
.trait-chip[data-trait="size_mini"] { border-color: #9ed4dc; background: #e8f8fa; color: #377884; }
.trait-chip[data-trait="size_giant"] { border-color: #e5b47d; background: #fff0df; color: #a65d24; }
.trait-chip[data-trait="odd_eye"], .trait-chip[data-trait="rare_eye_palette"], .trait-chip[data-trait="fantasy_eye_glow"] { border-color: #c7b2de; background: #f2ecfa; color: #735494; }
.trait-chip[data-trait="special_mark_heart"] { border-color: #e8b3bd; background: #fff0f3; color: #a64c61; }
.trait-chip[data-trait="special_mark_star"] { border-color: #e6c47b; background: #fff6dc; color: #92691b; }
.trait-chip[data-trait="special_mark_clover"], .trait-chip[data-trait="glow_mint"] { border-color: #a9d0b0; background: #edf8ef; color: #4c7955; }
.trait-chip[data-trait="tailless"] { border-color: #cbb099; background: #f6ede5; color: #795842; }
.trait-chip[data-trait="glow_lavender"] { border-color: #c8b5d9; background: #f3edf8; color: #755c8c; }
.trait-chip[data-trait="glow_moonlight"] { border-color: #adbfe0; background: #edf2fb; color: #536e9f; }
.trait-chip[data-trait="glow_pearl"] { border-color: #cabfdc; background: linear-gradient(110deg,#f8e9ef,#edf5fb,#edf8f3,#f1edfa); color: #745f82; box-shadow: inset 0 0 8px rgba(255,255,255,.85); }
.trait-chip[data-trait="collection"] { border-color: #e0ae55; background: #fff2cf; color: #94601d; }
.mobile-summary { display: none; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.save-feedback { display: block; width: fit-content; max-width: 100%; min-height: 34px; margin: 2px auto 12px; padding: 6px 12px; border: 1px solid color-mix(in srgb,var(--rarity-border) 72%,transparent); border-radius: 999px; background: color-mix(in srgb,var(--rarity-soft) 70%,#fff); color: var(--rarity-accent); font-size: 12px; font-weight: 900; line-height: 1.35; cursor: pointer; }
.save-feedback:hover:not(:disabled), .save-feedback:focus-visible:not(:disabled) { border-color: var(--rarity-accent); box-shadow: 0 5px 14px var(--rarity-glow); transform: translateY(-1px); }
.save-feedback:focus-visible { outline: 3px solid color-mix(in srgb,var(--rarity-accent) 22%,transparent); outline-offset: 2px; }
.save-feedback.is-warning { cursor: default; opacity: .8; }
.secondary-action { min-height: 44px; padding: 10px 19px; border: 1px solid var(--rarity-border); border-radius: 13px; background: var(--rarity-soft); color: var(--rarity-accent); font-weight: 900; cursor: pointer; }

.detail-dialog { width: min(470px, calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border: 2px solid var(--line); border-radius: 24px; background: #fffaf3; color: var(--ink); box-shadow: 0 28px 90px rgba(63,42,28,.28); }
.settings-dialog { width: min(380px, calc(100% - 28px)); padding: 22px; border: 2px solid var(--line); border-radius: 24px; background: #fffaf3; color: var(--ink); box-shadow: 0 28px 90px rgba(63,42,28,.28); }
.settings-dialog::backdrop { background: rgba(67,48,37,.38); backdrop-filter: blur(3px); }
.setting-row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 12px; padding: 8px 13px; border-radius: 14px; background: #f8eee1; font-weight: 900; }
.setting-row input { width: 21px; height: 21px; accent-color: #d77d48; }
.setting-select-row select { min-width: 126px; min-height: 38px; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fffaf3; color: var(--ink); font: inherit; font-size: 12px; font-weight: 850; }
.settings-note { margin: 14px 2px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.settings-danger-zone { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e7c8c4; }
.settings-danger-zone h3 { margin: 0; color: #9d4f50; font-size: 14px; }
.settings-danger-zone p { margin: 5px 0 11px; color: #8d6862; font-size: 11px; line-height: 1.5; }
.danger-action { width: 100%; min-height: 44px; padding: 9px 14px; border: 1px solid #d99b9c; border-radius: 13px; background: #fff0ef; color: #a3484b; font-weight: 900; cursor: pointer; }
.danger-action:hover { background: #ffe7e5; border-color: #cd8385; }
.danger-action:active { transform: translateY(1px); }
.danger-action:focus-visible { outline: 3px solid rgba(185,75,78,.2); outline-offset: 2px; }
.danger-action:disabled { cursor: wait; opacity: .58; }
.header-toast { position: fixed; z-index: 30; top: max(14px, env(safe-area-inset-top)); left: 50%; margin: 0; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fffaf3; color: var(--ink); box-shadow: 0 12px 36px rgba(63,42,28,.18); font-size: 12px; font-weight: 900; transform: translateX(-50%); }
.detail-dialog::backdrop { background: rgba(67,48,37,.38); backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dialog-kicker { margin: 0 0 3px; color: #bd7846; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.dialog-heading h2 { margin: 0; font-size: 25px; }
.dialog-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: 25px; line-height: 1; cursor: pointer; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0; }
.detail-list div { padding: 11px 12px; border-radius: 14px; background: #f8eee1; }
.detail-list dt { color: var(--muted); font-size: 11px; font-weight: 800; }
.detail-list dd { margin: 4px 0 0; font-size: 14px; font-weight: 900; overflow-wrap: anywhere; }
.dialog-done { display: block; width: 100%; }
.game-footer { display: flex; justify-content: center; padding: 16px 8px 0; color: var(--muted); font-size: 12px; text-align: center; }
.catbox-coach { position: fixed; z-index: 34; top: max(78px, calc(env(safe-area-inset-top,0px) + 64px)); right: max(12px, calc((100vw - 800px) / 2 + 18px)); display: grid; gap: 7px; width: min(260px, calc(100vw - 24px)); padding: 13px 14px; border: 2px solid #d8995e; border-radius: 18px; background: linear-gradient(145deg,#fffdf8,#f8e4ca); color: #70452d; box-shadow: 0 16px 38px rgba(96,57,32,.24); text-align: left; }
.catbox-coach::before { content: ""; position: absolute; top: -8px; right: 54px; width: 14px; height: 14px; border-top: 2px solid #d8995e; border-left: 2px solid #d8995e; background: #fff9ed; transform: rotate(45deg); }
.catbox-coach span { font-size: 13px; font-weight: 850; line-height: 1.4; }
.catbox-coach button { justify-self: end; min-height: 34px; padding: 6px 11px; border: 0; border-radius: 999px; background: #cf7441; color: white; font-size: 12px; font-weight: 950; cursor: pointer; }
.catbox-coach.is-revealing { animation: catbox-coach-in var(--notice-duration,2.1s) cubic-bezier(.18,.82,.2,1) both; }

@keyframes box-shake { 0%,100% { transform: translateX(-50%) rotate(0); } 25% { transform: translate(-51%,-3px) rotate(-1.5deg); } 55% { transform: translate(-49%,1px) rotate(1.5deg); } 78% { transform: translate(-50%,-2px) rotate(-.7deg); } }
@keyframes box-open-settle { from { transform: translate(-50%,0); } to { transform: translate(-50%,10px); } }
@keyframes cat-emerge { 0% { opacity: 0; transform: translate(-50%,24px) scale(.88); } 70% { opacity: 1; transform: translate(-50%,-6px) scale(1.04); } 100% { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes cat-emerge-collection { 0% { opacity: 0; transform: translate(-50%,24px) scale(.88); } 68% { opacity: 1; transform: translate(-50%,-6px) scale(1.06); } 100% { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes halo-arrive { from { opacity: 0; transform: translateX(-50%) scale(.72); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes halo-pulse { 0% { opacity: 0; transform: translateX(-50%) scale(.7); } 58% { opacity: 1; transform: translateX(-50%) scale(1.07); } 100% { opacity: .9; transform: translateX(-50%) scale(1); } }
@keyframes collection-halo { 0% { opacity: 0; transform: translateX(-50%) scale(.62); } 54% { opacity: 1; transform: translateX(-50%) scale(1.12); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes sparkle-float { 0% { opacity: 0; transform: translateY(7px) scale(.62) rotate(-8deg); } 45% { opacity: 1; transform: translateY(-5px) scale(1.08) rotate(6deg); } 100% { opacity: .72; transform: translateY(0) scale(1) rotate(0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes callout-arrival { 0% { opacity: 0; transform: translate(-50%,7px) scale(.88); } 40%,78% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-4px) scale(.98); } }
@keyframes special-panel-arrival { 0%,100% { filter: none; } 48% { filter: brightness(1.035) saturate(1.04); } }
@keyframes collection-panel-arrival { 0%,100% { filter: none; } 48% { filter: brightness(1.075) sepia(.035); } }
@keyframes pearl-halo-pulse { 0% { opacity: 0; transform: translateX(-50%) scale(.76); } 55% { opacity: 1; transform: translateX(-50%) scale(1.06); } 100% { opacity: .82; transform: translateX(-50%) scale(1); } }
@keyframes pearl-sparkle { 0% { opacity: 0; transform: translateY(5px) scale(.7); } 55% { opacity: .96; transform: translateY(-4px) scale(1.08); } 100% { opacity: .66; transform: translateY(0) scale(1); } }
@keyframes pearl-sweep { 0% { opacity: 0; background-position: 115% 0; } 24% { opacity: .72; } 72% { opacity: .62; } 100% { opacity: 0; background-position: -85% 0; } }
@keyframes giant-stage-bump { 0%,100% { transform: translateY(0); } 42% { transform: translateY(-3px) scale(1.008); } 68% { transform: translateY(2px); } }
@keyframes trait-discovery { 0% { opacity: 0; transform: translate(-50%,7px) scale(.88); } 28%,78% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-3px) scale(.98); } }
@keyframes score-counter-bump { 0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(var(--score-pulse-lift)) scale(var(--score-pulse-scale)); filter: saturate(1.15); box-shadow: 0 8px 22px color-mix(in srgb, var(--score-gain-accent) 24%, transparent); } }
@keyframes score-gain-float { 0% { opacity: 0; transform: translate(-50%,5px) scale(.88); } 22%,70% { opacity: 1; transform: translate(-50%,-5px) scale(1); } 100% { opacity: 0; transform: translate(-50%,-18px) scale(.96); } }
@keyframes catbox-entry-invite { 0%,100% { transform: translateX(0); } 35% { transform: translateX(3px); } 65% { transform: translateX(1px); } }
@keyframes catbox-entry-bump { 0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-2px) scale(1.035); } }
@keyframes catbox-gain-pop { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 22%,72% { opacity: 1; transform: translateY(-3px) scale(1); } 100% { opacity: 0; transform: translateY(-14px) scale(.94); } }
@keyframes secret-unlock-card { 0% { opacity: 0; transform: translate(-50%,12px) scale(.86) rotate(-1deg); } 26%,76% { opacity: 1; transform: translate(-50%,0) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%,-5px) scale(.98); } }
@keyframes catbox-coach-in { 0% { opacity: 0; transform: translateY(-8px) scale(.94); } 15%,82% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-3px) scale(.98); } }

@media (max-width: 720px) {
  .game-shell { padding-inline: 12px; }
  .opening-card { padding: 20px 13px 25px; border-radius: 25px; }
  .box-stage { height: 320px; }
  .box-image { width: min(320px, 88vw); }
  .revealed-cat { bottom: 88px; width: min(280px, 72vw); }
  .pearl-sweep { bottom: 88px; width: min(280px, 72vw); }
  .box-stage[data-reveal-profile="low"] .revealed-cat { bottom: 102px; }
  .box-stage[data-reveal-profile="low"] .pearl-sweep { bottom: 102px; }
  .box-stage[data-reveal-profile="fixed"] .revealed-cat { bottom: 98px; }
  .box-stage[data-reveal-profile="fixed"] .pearl-sweep { bottom: 98px; }
  .box-stage[data-reveal-profile="collection"] .revealed-cat { bottom: 78px; width: min(250px, 66vw); }
  .stage-glow { top: 28px; width: min(290px, 75vw); }
  .sparkle-one { left: 4%; top: 58px; }
  .sparkle-two { right: 4%; top: 78px; }
  .sparkle-three { left: 8%; top: 170px; }
  .sparkle-four { right: 10%; top: 184px; }
  .opening-status { margin-top: 18px; }
  .result-card { padding: 18px 14px; }
  .result-heading { grid-template-columns: minmax(75px, auto) 1fr 70px; gap: 8px; }
  .rarity-heading { flex-direction: column; gap: 3px; }
  .rarity-emblem { width: 36px; max-height: 40px; }
  .result-card[data-rarity="collection"] .rarity-emblem { width: 48px; max-height: 50px; }
  .new-badge { width: 67px; }
}

@media (max-width: 720px) {
  .game-header { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .brand-logo { width: clamp(160px,48vw,190px); max-width: 100%; }
  .header-actions { width: 100%; justify-content: center; }
  .open-counter { flex: 1 1 auto; justify-content: center; max-width: 174px; }
  .score-counter { flex: 0 1 auto; }
}

@media (max-width: 520px) {
  body { padding-top: max(6px, env(safe-area-inset-top)); }
  .game-shell { padding: 4px 8px 12px; }
  .game-header { gap: 5px; margin-bottom: 4px; }
  .brand-logo { width: clamp(156px, 46vw, 180px); max-width: 100%; }
  .header-actions { gap: 5px; }
  .header-icon-button { width: 44px; height: 44px; font-size: 16px; }
  .open-counter, .score-counter { gap: 5px; padding: 5px 7px; font-size: 10.5px; }
  .open-counter { min-height: 44px; }
  .score-counter { min-height: 42px; }
  .open-counter img, .score-counter img { width: 20px; height: 20px; }
  .catbox-entry-icon { width: 28px; height: 28px; }
  .catbox-entry-icon img { width: 21px; height: 21px; }
  .catbox-entry-copy strong { font-size: 11px; }
  .catbox-entry-copy small { font-size: 8.5px; }
  .catbox-entry-arrow { font-size: 19px; }
  .opening-card { padding: 12px 10px 16px; border-radius: 22px; }
  .eyebrow { margin-bottom: 3px; font-size: 10px; }
  h1 { font-size: clamp(26px, 7.2vw, 30px); }
  .intro-copy > p:last-child { margin-top: 5px; font-size: 12px; }
  .box-stage { height: 258px; }
  .box-image { bottom: -4px; width: min(270px, 80vw); }
  .revealed-cat { bottom: 79px; width: min(238px, 68vw); }
  .pearl-sweep { bottom: 79px; width: min(238px, 68vw); }
  .box-stage[data-reveal-profile="low"] .revealed-cat { bottom: 95px; }
  .box-stage[data-reveal-profile="low"] .pearl-sweep { bottom: 95px; }
  .box-stage[data-reveal-profile="fixed"] .revealed-cat { bottom: 91px; }
  .box-stage[data-reveal-profile="fixed"] .pearl-sweep { bottom: 91px; }
  .box-stage[data-reveal-profile="collection"] .revealed-cat { bottom: 60px; width: min(220px, 61vw); }
  .stage-glow { top: 12px; width: min(248px, 70vw); }
  .trait-reveal-layer { top: 4px; max-width: calc(100% - 16px); padding: 5px 10px; font-size: 11.5px; }
  .trait-reveal-layer[data-notice-type="discovery_unlocked"], .trait-reveal-layer[data-notice-type="trait"], .trait-reveal-layer[data-notice-type="coat_unlocked"] { min-width: 170px; padding: 7px 13px; font-size: 12.5px; }
  .trait-reveal-layer[data-notice-type="collection_reveal"] { min-width: 192px; padding: 9px 14px; font-size: 13px; }
  .secret-unlock-card { top: 2px; width: min(276px,calc(100% - 16px)); padding: 10px 14px 11px; }
  .secret-unlock-card strong { font-size: 13px; }
  .sparkle { width: 38px; }
  .sparkle-two { width: 34px; }
  .sparkle-three, .sparkle-four { width: 29px; }
  .opening-status { min-height: 19px; margin: 9px 0 8px; }
  .opening-status p { font-size: 12.5px; }
  .primary-action { width: min(238px, 78%); min-height: 48px; padding-block: 9px; font-size: 16px; }
  .primary-action img { width: 26px; height: 26px; }
  .result-card { min-height: 140px; margin-top: 18px; padding: 11px 12px 12px; border-radius: 19px; }
  .result-heading { grid-template-columns: 68px minmax(0,1fr) 54px; min-height: 54px; gap: 6px; }
  .rarity-badge { min-height: 25px; padding: 4px 8px; font-size: 11px; }
  .result-card[data-rarity="collection"] .rarity-badge { min-height: 29px; padding-inline: 10px; font-size: 11px; }
  .arrival-copy h2 { font-size: 19px; }
  .arrival-copy p { margin-top: 3px; font-size: 11.5px; }
  .new-badge { width: 52px; }
  .rarity-emblem { width: 30px; max-height: 32px; }
  .result-card[data-rarity="collection"] .rarity-emblem { width: 38px; max-height: 40px; }
  .result-facts { display: none; }
  .mobile-summary { display: flex; min-height: 17px; margin: 7px 0 8px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 7px; color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
  .trait-chip-list-compact { justify-content: center; }
  .secondary-action { min-height: 38px; padding: 7px 16px; font-size: 12px; }
  .save-feedback { min-height: 32px; margin-bottom: 9px; padding: 5px 10px; font-size: 11px; }
  .catbox-coach { top: max(100px,calc(env(safe-area-inset-top,0px) + 88px)); right: 10px; width: min(246px,calc(100vw - 20px)); }
  .game-footer { padding-top: 10px; }
  .detail-dialog {
    width: 100%; max-width: none; max-height: calc(100vh - var(--xhs-overlay-clearance-top));
    max-height: calc(100dvh - var(--xhs-overlay-clearance-top)); margin: auto 0 0;
    padding: 17px 14px max(17px,env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
  }
}

@media (max-width: 370px) {
  .game-shell { padding-inline: 10px; }
  .opening-card { padding-inline: 10px; }
  .box-stage { height: 250px; }
  .box-image { width: min(260px, 78vw); }
  .revealed-cat { bottom: 77px; width: min(228px, 66vw); }
  .pearl-sweep { bottom: 77px; width: min(228px, 66vw); }
  .box-stage[data-reveal-profile="low"] .revealed-cat { bottom: 92px; }
  .box-stage[data-reveal-profile="low"] .pearl-sweep { bottom: 92px; }
  .box-stage[data-reveal-profile="fixed"] .revealed-cat { bottom: 88px; }
  .box-stage[data-reveal-profile="fixed"] .pearl-sweep { bottom: 88px; }
  .box-stage[data-reveal-profile="collection"] .revealed-cat { bottom: 58px; width: min(210px, 60vw); }
  .result-heading { grid-template-columns: 65px minmax(0,1fr) 52px; gap: 5px; }
  .rarity-emblem { width: 31px; }
  .result-card[data-rarity="collection"] .rarity-emblem { width: 41px; }
  .new-badge { width: 51px; }
  .detail-list { grid-template-columns: 1fr; }
}

@media (min-width: 371px) and (max-width: 520px) and (min-height: 760px) {
  .result-card { min-height: 0; padding: 12px; }
  .result-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin: 9px 0 8px; }
  .result-facts div { padding: 7px 9px; border-radius: 11px; }
  .result-facts dt { font-size: 9.5px; }
  .result-facts dd { margin-top: 2px; font-size: 11px; line-height: 1.25; }
  .mobile-summary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .score-counter.is-updating { animation: none; }
  .score-gain.is-visible, .score-gain.is-showing, .score-gain.is-gaining { animation: none; opacity: 1; transform: translate(-50%,-7px); }
  .catbox-entry-arrow { animation: none; }
  .catbox-gain.is-visible, .open-counter.has-new-cat, .catbox-coach.is-revealing { animation: none; opacity: 1; transform: none; }
  .secret-unlock-card.is-revealing { animation: none; opacity: 1; transform: translateX(-50%); }
}

.trait-chip[data-trait="glow_sakura"],.cat-card-trait[data-trait="glow_sakura"]{background:#fbece6;border-color:#daab9f;color:#995f56;}