*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.bottom-24 {
  bottom: 6rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-\[15\%\] {
  bottom: 15%;
}
.z-50 {
  z-index: 50;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-1 {
  height: 0.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-5 {
  height: 1.25rem;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.w-0 {
  width: 0px;
}
.w-24 {
  width: 6rem;
}
.w-5 {
  width: 1.25rem;
}
.w-64 {
  width: 16rem;
}
.w-\[80\%\] {
  width: 80%;
}
.w-full {
  width: 100%;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded {
  border-radius: 0.25rem;
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.pt-1 {
  padding-top: 0.25rem;
}
.text-center {
  text-align: center;
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#444\] {
  --tw-text-opacity: 1;
  color: rgb(68 68 68 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.opacity-0 {
  opacity: 0;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* cinzel-latin-400-normal */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/cinzel-latin-400-normal.woff2') format('woff2');
}
/* cinzel-latin-600-normal */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/cinzel-latin-600-normal.woff2') format('woff2');
}
/* noto-serif-sc-chinese-simplified-300-normal */
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('/fonts/noto-serif-sc-chinese-simplified-300-normal.woff2') format('woff2');
}
/* noto-serif-sc-chinese-simplified-500-normal */
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/noto-serif-sc-chinese-simplified-500-normal.woff2') format('woff2');
}
/* noto-serif-sc-chinese-simplified-700-normal */
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/noto-serif-sc-chinese-simplified-700-normal.woff2') format('woff2');
}
/* noto-serif-sc-latin-300-normal */
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('/fonts/noto-serif-sc-latin-300-normal.woff2') format('woff2');
}
/* noto-serif-sc-latin-500-normal */
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/noto-serif-sc-latin-500-normal.woff2') format('woff2');
}
/* noto-serif-sc-latin-700-normal */
@font-face {
  font-family: 'Noto Serif SC';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/noto-serif-sc-latin-700-normal.woff2') format('woff2');
}
    :root {
        --safe-top: env(safe-area-inset-top, 20px);
        --safe-bottom: env(safe-area-inset-bottom, 20px);
    }

    body {
        font-family: 'Cinzel', 'Noto Serif SC', serif;
        background-color: #000;
        color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        height: 100dvh; 
        width: 100vw;
        overflow: hidden;
        touch-action: none; 
        user-select: none;
        -webkit-user-select: none;
        margin: 0;
    }

    #app-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000;
    }

    /* [核心修改 1] 舞台容器：作为一切的坐标基准 */
    #stage-container {
        position: relative;
        /* 强制锁定比例为 9:16 (对应背景图尺寸) */
        aspect-ratio: 9 / 16;
        
        /* 让舞台在屏幕中自适应，但绝不超过屏幕边界 */
        width: 100%;
        height: auto;
        max-height: 100vh;
        max-width: 56.25vh; /* 100vh * (9/16) */
        
        margin: auto;
        overflow: hidden;
        background-color: #050505;
        box-shadow: 0 0 50px rgba(0,0,0,0.8);
    }

    /* [核心修改 2] 背景图：绝对填满舞台 */
    #bg-group, #fg-group {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
    }
    #bg-main {
        width: 100%; height: 100%;
        object-fit: fill; /* 强制拉伸填满9:16的舞台，保证坐标对齐 */
    }

    /* [核心修改 3] 格子容器：根据截图目测的精确百分比 */
    /* 这里的百分比是相对于背景图高度的，不再受屏幕长短影响 */
    #shelf-grid-container {
        position: absolute;
        
        /* 顶部起始位置：大约在背景图高度的 15.5% 处开始 */
        top: 14%; 
        
        /* 整体高度：控制在 68.5% 左右，给底部留出空间 */
        height: 76%;
        
        /* 宽度：根据柜子内胆宽度调整 */
        width: 79.5%; 
        
        left: 50%; 
        transform: translateX(-50%);
        display: flex; flex-direction: column; justify-content: space-between;
        padding-bottom: 0; 
        z-index: 50; 
        transition: opacity 0.3s;
    }
    
    /* 每一行的高度稍微压缩一点，确保不溢出 */
    .shelf-row { 
        position: relative; 
        width: 100%; 
        height: 15%; /* 稍微增加行高占比，填满容器 */
        display: flex; justify-content: center; gap: 0; 
    }

    /* [核心修改 4] 倒计时：钉在顶部玫瑰花的位置 */
    #countdown-box { 
        position: absolute; 
        /* 根据背景图花纹位置测算 */
        top: 4%; 
        left: 50%; 
        transform: translateX(-50%); 
        width: auto; 
        z-index: 80; 
        cursor: pointer; 
    }
    #countdown-text {
        /* 字体大小也可以用容器宽度的百分比，或者保持 rem */
        font-size: 2.2rem; 
        font-weight: bold; 
        color: #ddd; 
        text-shadow: 0 0 15px rgba(255, 0, 0, 0.6), 0 2px 5px #000; 
        font-family: 'Cinzel', serif;
    }

    /* [核心修改 5] 技能栏：钉在底部区域 */
    .skill-container { 
        position: absolute; 
        /* 距离容器底部 5% 的位置 */
        bottom: 3%; 
        left: 0;
        width: 100%; 
        display: flex; 
        justify-content: center; 
        gap: 3%; /* 增加按钮间距，适配宽屏 */
        z-index: 50; 
        pointer-events: auto; /* 确保可点击 */
    }
    
    /* 分数显示调整 */
    #score-box { 
        position: absolute; 
        top: 3%; /* 相对于背景图顶部 */
        left: 6%; 
        z-index: 80; 
        display: flex; flex-direction: column; align-items: flex-start; 
    }
    
    /* 顶部按钮调整 */
    #controls-box { 
        position: absolute; 
        top: 3.5%; 
        right: 6%; 
        z-index: 80; 
        display: flex; gap: 12px; 
    }

    /* --- 修复可能的点击穿透问题 --- */
    #game-layer {
        width: 100%; height: 100%;
    }

    /* --- 动画库 (保持原样) --- */
    @keyframes breathe { 0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); } }
    @keyframes rose-breathe { 0%, 100% { opacity: 0.8; filter: grayscale(80%) brightness(1); } 50% { opacity: 1; filter: grayscale(20%) brightness(1.35) drop-shadow(0 0 12px rgba(255,255,255,0.9)); } }
    @keyframes rose-entry { 0% { opacity: 0; filter: grayscale(100%) brightness(0.5); transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 0.8; filter: grayscale(80%) brightness(1); transform: translate(-50%, -50%) scale(1); } }
    @keyframes float-y-intro { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
    @keyframes rotate-cw-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes rotate-ccw-fast { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
    @keyframes pulse-red { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,0,0,0)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8)) brightness(1.5); } }
    @keyframes pop-forward { 0% { transform: scale(0.85) translateY(-10px); opacity: 0; } 60% { transform: scale(1.05) translateY(2px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
    @keyframes match-success { 0% { transform: scale(1); filter: brightness(1); } 20% { transform: scale(1.2); filter: brightness(3) drop-shadow(0 0 30px rgba(255,255,255,1)); } 100% { transform: scale(0); opacity: 0; } }
    @keyframes sparkle-fade { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes slot-pop-in { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
    @keyframes slot-scale-down { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
    @keyframes float-up-fade { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-50px) scale(1.5); opacity: 0; } }
    @keyframes sigil-flash-rush { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); filter: brightness(3); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); filter: brightness(2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(5.0); filter: brightness(1) blur(20px); } }
    @keyframes star-pop { 0% { transform: scale(0); opacity: 0; filter: brightness(3) contrast(1.5); } 40% { transform: scale(1.4); opacity: 1; filter: brightness(2); } 100% { transform: scale(1); opacity: 1; filter: brightness(1); } }
    @keyframes text-heartbeat { 0% { transform: scale(1); text-shadow: 0 0 15px rgba(255, 0, 0, 0.6); } 50% { transform: scale(1.15); text-shadow: 0 0 25px rgba(255, 0, 0, 1); } 100% { transform: scale(1); text-shadow: 0 0 15px rgba(255, 0, 0, 0.6); } }
    .timer-warning { color: #ff3333 !important; animation: text-heartbeat 0.8s infinite ease-in-out; }
    @keyframes shake-screen-anim { 0% { transform: translate(0, 0) rotate(0); } 10% { transform: translate(-5px, -5px) rotate(-1deg); } 20% { transform: translate(5px, 5px) rotate(1deg); } 30% { transform: translate(-5px, 5px) rotate(-1deg); } 40% { transform: translate(5px, -5px) rotate(1deg); } 50% { transform: translate(-2px, 2px) rotate(0); } 100% { transform: translate(0, 0) rotate(0); } }
    .anim-shake-screen { animation: shake-screen-anim 0.4s cubic-bezier(.36,.07,.19,.97) both; }
    @keyframes burst-flash { 0% { opacity: 0; transform: scale(0.8); } 20% { opacity: 0.8; transform: scale(1.2); background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%); } 100% { opacity: 0; transform: scale(1.5); } }
    .match-burst-overlay { position: absolute; inset: -20%; z-index: 50; pointer-events: none; animation: burst-flash 0.5s ease-out forwards; mix-blend-mode: screen; }
    @keyframes count-fade-in-out { 0% { opacity: 0; transform: scale(0.5); } 20% { opacity: 1; transform: scale(1.2); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
    @keyframes count-go-flash { 0% { opacity: 0; transform: scale(0.2); filter: brightness(1); } 30% { opacity: 1; transform: scale(1.5); filter: brightness(2) saturate(1.5) drop-shadow(0 0 20px rgba(255,0,0,0.8)); } 100% { opacity: 0; transform: scale(2); filter: brightness(3); } }
    .cnt-num-anim { animation: count-fade-in-out 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
    .cnt-go-anim { animation: count-go-flash 0.9s cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }
    @keyframes stat-float-fade { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(-5px); } 100% { opacity: 0; transform: translateY(-15px); } }
    .stat-line { font-family: 'Noto Serif SC', serif; font-size: 0.9rem; color: #ccc; animation: stat-float-fade 0.5s ease-out forwards; position: absolute; width: 100%; text-align: center; }

    /* --- 1. 资源加载页 --- */
    #loading-screen { z-index: 100; pointer-events: auto; }
    .load-item { position: absolute; }
    #load-logo-01 { width: 16%; top: 5%; right: 5%; opacity: 0.66; }
    #load-logo-02 { width: 65%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    #load-sigil { display: none; }
    .anim-breathe { animation: breathe 3s infinite ease-in-out; }

    /* --- 2. 背景与前景组 --- */
    #bg-group, #fg-group {
        position: absolute;
        width: 100%; height: 100%; top: 0; left: 0;
        object-fit: fill;
        transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none;
    }
    #bg-group { z-index: 0; }
    #fg-group { z-index: 40; } 
    #bg-main { opacity: 0.6; object-fit: fill; width: 100%; height: 100%; }

    .shelf-asset { position: absolute; width: 36%; left: 50%; top: 48.43%; transform: translate(-50%, -50%); }
    #shelf-rose { z-index: 125; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.5s; }
    .rose-visible { opacity: 1; animation: rose-entry 1.5s ease-out forwards, rose-breathe 4s 1.5s infinite ease-in-out; }
    #shelf-frame { filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8)); z-index: 121; }
    #shelf-frame-over { z-index: 122; pointer-events: none; }
    #intro-whitecrow { position: absolute; width: 19%; left: 21.85%; top: 27.18%; z-index: 0; }

    .state-intro #bg-group, .state-intro #fg-group { filter: blur(6.6px) brightness(0.6); }
    .state-game #bg-group { 
        transform: translateY(-1.5%) scale(3.65);
        filter: none; 
        transform-origin: 50% 48.4%;
    }
    .state-game #fg-group { 
        transform: translateY(-2%) scale(3.65);
        filter: none;
        z-index: 70;
        transform-origin: 50% 48.4%;
    }

    /* --- 3. 标题页前景 --- */
    #intro-layer { position: absolute; inset: 0; z-index: 50; transition: opacity 0.5s; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    #intro-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(circle, transparent 40%, #000 120%); opacity: 0; transition: opacity 2s; }
    #intro-center-group { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
    #intro-coffin-group { position: absolute; width: 81%; height: auto; top: 25%; z-index: 2; animation: float-y-intro 4s infinite ease-in-out; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
    /* [新增] 棺材上的乌鸦样式 */
    #intro-crow-fly {
        position: absolute;
        
        /* --- [在这里调整大小和位置] --- */
        /* 这里的百分比是相对于“棺材”的大小，不是相对于屏幕 */
        width: 50%;          /* 乌鸦的大小 */
        top: -6%;           /* 负数表示往上移，让它站在棺材顶端 */
        left: 35%;           /* 水平位置 */
        /* ----------------------------- */

        z-index: 10;         /* 确保它盖在棺材上面 */
        opacity: 0;          /* 初始不可见 */
        transition: opacity 0.3s ease-out; /* 松手时的消失速度 */
        pointer-events: none;
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); /* 加一点阴影更有立体感 */
    }
    .coffin-img { position: relative; width: 100%; height: auto; display: block; transition: opacity 0.5s ease-in-out, filter 0.5s; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8)); }
    #intro-coffin-1 { opacity: 1; z-index: 1; }
    #intro-coffin-2 { position: absolute; top: 0; left: 0; opacity: 0; z-index: 2; filter: brightness(1.1) contrast(1.1); } 
    #res-sigil-overlay { position: absolute; width: 150%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 20; mix-blend-mode: screen; }
    .anim-sigil-flash { animation: sigil-flash-rush 0.8s ease-out forwards; }
    #intro-circle-wrapper { position: absolute; width: 68%; top: 38%; z-index: 3; animation: float-y-intro 5s infinite ease-in-out reverse; }
    #intro-magic-circle { width: 100%; height: auto; filter: grayscale(100%) brightness(1.2) drop-shadow(0 0 10px rgba(0,0,0,0.5)); transition: filter 0.5s; animation: rotate-cw-slow 20s linear infinite; }
    .magic-active-anim { animation: rotate-ccw-fast 1.5s linear infinite !important; filter: grayscale(0%) brightness(1.5) saturate(1.2) drop-shadow(0 0 20px rgba(255, 0, 0, 0.6)) !important; }
    #intro-text { position: absolute; width: 100%; text-align: center; bottom: 15%; font-size: 14px; letter-spacing: 0.2em; transition: all 0.3s; }
    .text-idle { color: white; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
    .text-active { color: #ff3333; text-shadow: 0 0 10px #ff0000; font-weight: bold; }
    #magic-hit-area { position: absolute; width: 50%; height: 25%; top: 35%; left: 25%; z-index: 50; cursor: pointer; }

    /* --- UI 层样式 --- */
    #ui-layer { position: absolute; inset: 0; z-index: 100; pointer-events: none; display: flex; flex-direction: column; opacity: 0; transition: opacity 0.5s; }
    #ui-layer > * { pointer-events: auto; }

    #combo-container { 
        position: absolute; top: 13%; left: 50%; transform: translateX(-50%); 
        display: flex; flex-direction: column; align-items: center; 
        opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 120;
    }
    #combo-text { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: bold; font-style: italic; color: #e0e0e0; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(192, 192, 192, 0.5), 0 2px 0 #000; background: linear-gradient(to bottom, #fff 0%, #ccc 40%, #888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 3px; letter-spacing: 0.05em; }
    #combo-bar-box { width: 100px; height: 3px; background: rgba(30,30,30,0.6); border: 1px solid rgba(100,100,100,0.4); border-radius: 2px; overflow: hidden; }
    #combo-bar-fill { height: 100%; width: 100%; background: #fff; box-shadow: 0 0 8px #fff; transform-origin: left; }
    .anim-combo-bounce { animation: combo-bounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    @keyframes combo-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
    .combo-draining { width: 0% !important; transition: width 6s linear; }
    .combo-reset { width: 100% !important; transition: none; }

    /* --- 4. 游戏交互层 (Grid) --- */
    #game-layer { position: absolute; inset: 0; z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.5s 1s; }
    .state-game #game-layer { opacity: 1; pointer-events: auto; }

    /* [适配修复] 调整格子容器的定位和高度 */
    #shelf-grid-container {
        position: absolute;
        /* 修改: 稍微上移，并减小总高度，防止底部与技能栏重叠 */
        top: 14%; 
        height: 76%;
        width: 79.5%; /* 稍微加宽一点点 */
        left: 50%; transform: translateX(-50%);
        display: flex; flex-direction: column; justify-content: space-between;
        padding-bottom: 2%; z-index: 50; transition: opacity 0.3s;
    }
    .shelf-row { position: relative; width: 100%; height: 15%; display: flex; justify-content: center; gap: 0; }
    .game-slot { position: relative; flex: 0 0 33.4%; width: 33.4%; height: 100%; margin: 0; transform-origin: center center; opacity: 0; }
    .anim-pop-in { animation: slot-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
    .anim-scale-down { animation: slot-scale-down 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
    .slot-bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 1; z-index: 0; border-radius: 4px; object-fit: fill; background: radial-gradient(circle, #4a0505 0%, #1a0000 100%); box-shadow: inset 0 0 10px #000; }
    .item-zone { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 92%; height: 85%; display: flex; justify-content: space-around; align-items: flex-end; z-index: 10; }
    .g-item { position: relative; width: 32%;
    height: auto; max-height: 100%; object-fit: contain; filter: none; -webkit-filter: none; mix-blend-mode: normal !important;
    transition: transform 0.2s, top 0.3s, opacity 0.3s; touch-action: none; transform-origin: bottom center; transform: translate(0, 0); will-change: transform;
    }
     /* 修改后 */
    @media (min-width: 768px) { .g-item { filter: drop-shadow(0 5px 8px rgba(0,0,0,0.8)) brightness(1.1);
    } }
    .g-item.newly-arrived { animation: pop-forward 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
    .g-item.matched { animation: match-success 0.3s forwards !important; }

    .g-item-back { position: absolute; width: 32%; height: auto; max-height: 100%; object-fit: contain; filter: brightness(0.2) blur(1px) opacity(0.8); z-index: 1; pointer-events: none; transform: scale(0.85); }
    .pos-0 { left: 1%; } .pos-1 { left: 34%; } .pos-2 { left: 67%; }

    .g-item.dragging { position: absolute; z-index: 10000; pointer-events: none; will-change: transform; filter: drop-shadow(0 30px 40px rgba(0,0,0,1)); opacity: 1; }
    .g-item.highlight-hint { animation: pulse-red 1s infinite; }
    
    .fx-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; overflow: hidden; }
    .fx-sparkle { position: absolute; top: 50%; left: 50%; width: 120%; height: auto; transform: translate(-50%, -50%) rotate(90deg); mix-blend-mode: screen; opacity: 0; }
    .fx-active .fx-sparkle { animation: sparkle-fade 0.6s ease-out forwards; }

    /* UI Styles */
    #countdown-box { position: absolute; top: calc(5% + var(--safe-top)); left: 50%; transform: translateX(-50%); width: auto; z-index: 80; cursor: pointer; }
    #countdown-text { font-size: 2.2rem; font-weight: bold; color: #ddd; text-shadow: 0 0 15px rgba(255, 0, 0, 0.6), 0 2px 5px #000; font-family: 'Cinzel', serif; transition: color 0.1s; }
    #countdown-box:active #countdown-text { color: #ff3333; transform: scale(1.1); }
    
    .time-deduct-fx { position: absolute; top: 50%; left: 100%; font-family: 'Cinzel', serif; font-weight: bold; color: #ff0000; font-size: 1.5rem; text-shadow: 0 0 10px #ff0000; pointer-events: none; animation: float-up-fade 1s ease-out forwards; }

    #score-box { position: absolute; top: calc(2% + var(--safe-top)); left: 5%; z-index: 80; display: flex; flex-direction: column; align-items: flex-start; }
    #highscore-label { font-size: 0.7rem; color: #ffffff; font-family: 'Cinzel', serif; letter-spacing: 1px; margin-bottom: 2px; text-shadow: 0 0 5px rgba(0,0,0,0.8); }
    
    #controls-box { position: absolute; top: calc(2% + var(--safe-top)); right: 5%; z-index: 80; display: flex; gap: 12px; }
    .control-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #666; background-color: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; color: white; transition: all 0.2s; }
    .control-btn:active { background-color: #333; transform: scale(0.9); }
    .control-btn img { width: 50%; height: 50%; object-fit: contain; }

    .anim-flash { animation: flash-white 1s forwards; }
    #intro-mist { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 90; transform: scale(1); transition: opacity 0.5s; }
    .mist-active { opacity: 1 !important; transform: scale(2) !important; transition: transform 3s ease-out, opacity 1s !important; }

    /* [适配修复] 技能栏：大幅提升 Bottom 值 */
    .skill-container { 
        position: absolute; 
        /* 修改: 提高到底部 8% 的位置，确保不被刘海或系统手势条遮挡 */
        bottom: calc(3% + var(--safe-bottom));
        width: 100%; display: flex; justify-content: center; gap: 5rem; z-index: 50; 
    }
    .skill-btn-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.9; transition: all 0.2s; cursor: pointer; }
    .skill-btn-wrapper:active { transform: scale(0.95); }
    .skill-icon-box { width: 2.6rem; height: 2.6rem; border-radius: 9999px; border: 1px solid #4b5563; background-color: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; padding: 0.6rem; transition: all 0.3s; }
    .skill-disabled { filter: grayscale(100%) opacity(0.5); pointer-events: none; cursor: default; }

    #pause-layer { position: absolute; inset: 0; z-index: 200; background-color: rgba(10, 5, 5, 0.95); display: none; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(12px); }
    .pause-container { display: flex; flex-direction: column; align-items: center; width: 85%; gap: 15px; }
    .pause-deco-line { width: 100%; height: auto; object-fit: contain; opacity: 0.8; }
    .pause-title-group { text-align: center; margin: 10px 0; }
    .pause-main-text { font-family: 'Cinzel', serif; font-size: 1.6rem; color: #ddd; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 0 10px rgba(255,255,255,0.2); }
    .pause-sub-text { font-family: 'Noto Serif SC', serif; font-size: 0.9rem; color: #888; letter-spacing: 0.2em; margin-top: 5px; }
    .pause-btn-row { display: flex; gap: 40px; margin-top: 15px; }
    .pause-icon-btn { width: 85px; height: 85px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer; }
    .pause-icon-btn:active { transform: scale(0.9); filter: brightness(0.8); }
    .pause-icon-btn img { width: 100%; height: 100%; object-fit: contain; }

    #transaction-layer { position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%); width: 80%; z-index: 150; display: none; flex-direction: column; align-items: center; }
    .trans-avatar { width: 6rem; height: 6rem; border-radius: 50%; box-shadow: 0 0 20px rgba(145, 17, 17, 0.6); object-fit: cover; margin-bottom: 10px; }
    .trans-options { display: flex; gap: 20px; margin-top: 5px; }
    .trans-btn { background: rgba(0,0,0,0.8); border: 1px solid #555; color: #ccc; padding: 4px 16px; font-family: 'Cinzel', serif; font-size: 0.9rem; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
    .trans-btn-yes { border-color: #911111; color: #ff9999; }
    .trans-btn:active { transform: scale(0.9); }
    .trans-timer-bar { width: 100%; height: 2px; background: #333; margin-top: 8px; border-radius: 1px; overflow: hidden; }
    .trans-fill { height: 100%; background: #911111; width: 100%; transition: width 0.1s linear; }
    .text-strong-shadow { text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000; font-weight: 700; color: #ffffff; letter-spacing: 0.1em; }

    #result-overlay { position: absolute; inset: 0; z-index: 100; display: none; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; }
    #res-score-box { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: scale(0.8); transition: all 0.5s ease-out; }
    #res-score-val { font-family: 'Cinzel', serif; font-size: 5rem; font-weight: bold; color: #eee; text-shadow: 0 0 30px rgba(255, 0, 0, 0.8); }
    #res-stars { display: flex; gap: 10px; margin-top: 20px; }
    #res-stats-box { position: absolute; bottom: 20%; width: 100%; display: flex; flex-direction: column; align-items: center; }
    .res-star-icon { width: 40px; height: 40px; object-fit: contain; filter: grayscale(100%) brightness(0.5); transition: all 0.3s; }
    .res-star-active { filter: none !important; animation: star-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

    #start-countdown-layer { position: absolute; inset: 0; z-index: 150; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
    .cnt-content { position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; }
    #cnt-icon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
    #cnt-text { font-family: 'Cinzel', serif; font-size: 2.5rem; font-weight: bold; color: #eee; text-shadow: 0 0 20px rgba(255,0,0,0.8); opacity: 0; z-index: 10; }
    /* [新增] 失败结算界面的乌鸦样式 */
    #fail-crow {
        position: absolute;
        
        /* --- [可调整区域：大小与位置] --- */
        width: 50%;       /* 乌鸦的大小 (相对于屏幕宽度) */
        top: 18%;         /* 垂直位置：数值越小越靠上 (尝试调整这个让它站在棺材顶) */
        left: 35%;        /* 水平位置：数值越大越靠右 */
        z-index: 60;      /* 层级：必须大于棺材 (fail-coffin-02) */
        /* ----------------------------- */
        
        opacity: 0;       /* 初始状态不可见 */
        pointer-events: none;
        
        /* --- [可调整区域：渐隐动画速度] --- */
        transition: opacity 1.5s ease-out; /* 这里的 1.5s 是它消失过程需要的时间 */
        /* ----------------------------- */
    }