:root {
            --bg-cream: #F9F7F2;
            --soft-green: #E4EBE0;
            --dark-accent: #2D2926;
            --sage: #A3B18A;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: var(--bg-cream);
            color: var(--dark-accent);
        }

        .font-rounded {
            font-family: 'Fredoka', 'LXGW WenKai TC', 'Noto Sans SC Extra', sans-serif;
        }

        .font-chinese-playful {
            font-family: 'LXGW WenKai TC', 'Noto Sans TC', 'Noto Sans SC Extra', cursive;
        }

        /* 繁中正文字体：Quicksand 不含中文，交给 Noto Sans TC 接手 */
        body {
            font-family: 'Quicksand', 'Noto Sans TC', 'Noto Sans SC Extra', sans-serif;
        }

        /* 简中：霞鹜文楷 TC 是繁体字集，简体字会掉字，中文改走 Noto Sans SC */
        html[lang="zh-Hans"] body { font-family: 'Quicksand', 'Noto Sans SC', sans-serif; }
        html[lang="zh-Hans"] .font-rounded { font-family: 'Fredoka', 'Noto Sans SC', sans-serif; }
        html[lang="zh-Hans"] .font-chinese-playful { font-family: 'Noto Sans SC', sans-serif; }

        /* 锚点跳转不被固定导航吃掉 */
        section, footer { scroll-margin-top: 0; }

        /* 状态徽章：三种开发状态 */
        .dc-badge { backdrop-filter: blur(4px); }
        .dc-badge-live { background:#fff; }
        .dc-badge-soon { background:#fff; }
        .dc-badge-hold { background:rgba(255,255,255,.75); color:rgba(45,41,38,.55); }

        /* 发售状态牌:放在标题下方,不再压住美术图 */
        .dc-badge-inline {
            display: inline-flex;
            align-items: center;
            margin-top: .6rem;
            backdrop-filter: none;
            background: rgba(45,41,38,.06);
            color: rgba(45,41,38,.72);
            border: 1px solid rgba(45,41,38,.10);
        }
        /* 一颗小圆点，跟旁边的类型标签区分开：这是状态，不是分类 */
        .dc-badge-inline::before {
            content: "";
            width: .375rem; height: .375rem;
            margin-right: .5rem;
            border-radius: 999px;
            background: #A3B18A;
        }
        .dc-sub-hero .dc-badge-inline { margin-bottom: 1rem; }

        .dc-meta { font-variant-numeric: tabular-nums; }

        
        .cloud-container {
            background: white;
            border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
            position: relative;
            padding: 4rem;
        }

        .cloud-mask {
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF0066' d='M44.7,-76.4C58.2,-69.2,70.1,-58.5,77.4,-45.4C84.7,-32.3,87.4,-16.1,84.9,-0.8C82.5,14.5,74.9,28.9,65.7,42.5C56.5,56.1,45.8,68.9,32.3,75.4C18.8,81.9,2.5,82.1,-13.7,78.5C-29.8,74.9,-45.8,67.6,-58.7,56.4C-71.6,45.2,-81.4,30.2,-85.1,14.1C-88.7,-2,-86.3,-19.1,-78.6,-33.6C-70.9,-48.1,-58,-59.9,-43.8,-66.8C-29.6,-73.7,-14.8,-75.7,0.3,-76.2C15.4,-76.7,30.8,-75.7,44.7,-76.4Z' transform='translate(100 100)' /%3E%3C/svg%3E");
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
        }

        .nav-link {
            transition: all 0.3s ease;
            padding: 0.5rem 1.25rem;
            border-radius: 9999px;
        }

        .nav-link:hover {
            background-color: var(--dark-accent);
            color: white;
        }

        .game-card {
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .game-card:hover {
            transform: translateY(-10px) rotate(1deg);
        }

        
        /* 内嵌 SVG 图标：行为对齐原本的图标字体——大小跟着 font-size，颜色跟着 currentColor，
   所以 Tailwind 的 text-2xl / text-sage 之类照旧有效 */
        .ph-icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;
            fill: currentColor;
            flex-shrink: 0;
        }

        .lang-active {
            background-color: var(--dark-accent);
            color: white;
        }

        
        .fade-in {
            animation: fadeIn 1.5s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .section-tab.active {
            border-bottom: 3px solid var(--dark-accent);
            font-weight: 700;
        }
    

*, ::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;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.-bottom-10 {
  bottom: -2.5rem;
}
.-left-10 {
  left: -2.5rem;
}
.-right-10 {
  right: -2.5rem;
}
.-top-10 {
  top: -2.5rem;
}
.left-0 {
  left: 0px;
}
.left-6 {
  left: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-6 {
  top: 1.5rem;
}
.-z-10 {
  z-index: -10;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-24 {
  margin-bottom: 6rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-32 {
  margin-top: 8rem;
}
.mt-4 {
  margin-top: 1rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-12 {
  height: 3rem;
}
.h-24 {
  height: 6rem;
}
.h-32 {
  height: 8rem;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.w-12 {
  width: 3rem;
}
.w-24 {
  width: 6rem;
}
.w-32 {
  width: 8rem;
}
.w-\[2px\] {
  width: 2px;
}
.w-full {
  width: 100%;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}
.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));
}
.animate-\[marquee_20s_linear_infinite\] {
  animation: marquee 20s linear infinite;
}
@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-12 {
  gap: 3rem;
}
.gap-16 {
  gap: 4rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[3rem\] {
  border-radius: 3rem;
}
.rounded-\[4rem\] {
  border-radius: 4rem;
}
.rounded-\[5rem\] {
  border-radius: 5rem;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
}
.border-8 {
  border-width: 8px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-\[\#2D2926\]\/10 {
  border-color: rgb(45 41 38 / 0.1);
}
.border-\[\#2D2926\]\/20 {
  border-color: rgb(45 41 38 / 0.2);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-\[\#A3B18A\]\/20 {
  background-color: rgb(163 177 138 / 0.2);
}
.bg-\[\#D4A373\]\/20 {
  background-color: rgb(212 163 115 / 0.2);
}
.bg-\[\#E8ECE3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 236 227 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F2EBE0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 235 224 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F9F7F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 247 242 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.from-\[\#F9F7F2\]\/60 {
  --tw-gradient-from: rgb(249 247 242 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 247 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#F9F7F2\]\/40 {
  --tw-gradient-to: rgb(249 247 242 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(249 247 242 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#F9F7F2\] {
  --tw-gradient-to: #F9F7F2 var(--tw-gradient-to-position);
}
.p-1 {
  padding: 0.25rem;
}
.p-12 {
  padding: 3rem;
}
.p-16 {
  padding: 4rem;
}
.p-8 {
  padding: 2rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-24 {
  padding-top: 6rem;
}
.text-center {
  text-align: center;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[8rem\] {
  font-size: 8rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#2D2926\] {
  --tw-text-opacity: 1;
  color: rgb(45 41 38 / var(--tw-text-opacity, 1));
}
.text-\[\#2D2926\]\/40 {
  color: rgb(45 41 38 / 0.4);
}
.text-\[\#2D2926\]\/60 {
  color: rgb(45 41 38 / 0.6);
}
.text-\[\#2D2926\]\/70 {
  color: rgb(45 41 38 / 0.7);
}
.text-\[\#A3B18A\] {
  --tw-text-opacity: 1;
  color: rgb(163 177 138 / var(--tw-text-opacity, 1));
}
.text-black\/50 {
  color: rgb(0 0 0 / 0.5);
}
.text-black\/60 {
  color: rgb(0 0 0 / 0.6);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.blur-2xl {
  --tw-blur: blur(40px);
  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);
}
.blur-xl {
  --tw-blur: blur(24px);
  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);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.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-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  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;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}
.hover\:bg-\[\#2D2926\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(45 41 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:text-\[\#A3B18A\]:hover {
  --tw-text-opacity: 1;
  color: rgb(163 177 138 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:opacity-60:hover {
  opacity: 0.6;
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-black\/30:focus {
  border-color: rgb(0 0 0 / 0.3);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
@media (min-width: 768px) {

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:flex {
    display: flex;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:p-20 {
    padding: 5rem;
  }

  .md\:p-24 {
    padding: 6rem;
  }

  .md\:pt-24 {
    padding-top: 6rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-\[12rem\] {
    font-size: 12rem;
  }
}

    /* Variant 的 Tailwind 是预编译的，只含原稿用过的类。
       下面补上本次新增排版用到的工具类（含原稿就已失效的 sage 色）。 */
    .min-h-screen { min-height: 100vh; }
    .pt-32 { padding-top: 8rem; }
    .pb-16 { padding-bottom: 4rem; }
    .mt-8  { margin-top: 2rem; }
    .mt-10 { margin-top: 2.5rem; }
    .h-16  { height: 4rem; }
    .flex-wrap { flex-wrap: wrap; }
    .self-start { align-self: flex-start; }
    .opacity-50 { opacity: .5; }
    .opacity-70 { opacity: .7; }
    .tracking-\[0\.4em\] { letter-spacing: .4em; }
    .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
    .border-black\/15 { border-color: rgba(0,0,0,.15); }
    .border-black\/20 { border-color: rgba(0,0,0,.20); }
    .bg-\[\#2D2926\]\/10 { background-color: rgba(45,41,38,.10); }
    .text-black\/30 { color: rgba(0,0,0,.30); }
    /* sage 在原稿里就没编译出来，这里补上 */
    .text-sage { color: var(--sage); }
    .text-sage\/40 { color: rgba(163,177,138,.40); }
    .bg-sage\/10 { background-color: rgba(163,177,138,.10); }
    .bg-sage\/20 { background-color: rgba(163,177,138,.20); }
    .gap-x-8 { column-gap: 2rem; }
    .gap-y-3 { row-gap: .75rem; }
    .top-5 { top: 1.25rem; }
    .left-5 { left: 1.25rem; }
    .mb-3 { margin-bottom: .75rem; }
    .mt-3 { margin-top: .75rem; }

    /* 语言切换：EN 是拉丁字、繁中/简中是汉字，宽度天然不等，
       用 min-width 拉齐，不然三颗胶囊长短不一很难看 */
    /* 首屏的代表作：细、淡，不跟大字抢 */
    .dc-hero-works {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .85rem;
      margin-top: 1.5rem;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .06em;
      color: rgba(45, 41, 38, .45);
    }
    .dc-hero-works a { color: inherit; text-decoration: none; transition: color .25s ease; }
    .dc-hero-works a:hover { color: var(--dark-accent); }
    .dc-hero-works .dc-hero-dot { opacity: .45; }

    /* ===== 切语言：文字先往上淡出，换完从下面淡回来 ===== */
    [data-en], .dc-game-media img {
      transition: opacity .22s ease, transform .22s ease;
    }

    /* 第一段：往上退，淡掉 */
    html.dc-lang-out [data-en] { opacity: 0; transform: translateY(-5px); }
    html.dc-lang-out .dc-game-media img { opacity: 0; }

    /* 第二段：换完内容后瞬间挪到下方（不带过渡），下一帧放开就自己升回来 */
    html.dc-lang-in [data-en] { opacity: 0; transform: translateY(5px); transition: none; }
    html.dc-lang-in .dc-game-media img { opacity: 0; transition: none; }

    @media (prefers-reduced-motion: reduce) {
      [data-en], .dc-game-media img { transition: none; }
      html.dc-lang-out [data-en], html.dc-lang-in [data-en] { opacity: 1; transform: none; }
      html.dc-lang-out .dc-game-media img, html.dc-lang-in .dc-game-media img { opacity: 1; }
    }

    /* ===== 關於我們：不用框，靠字级和一条细线分层 ===== */
    .dc-about-head {
      max-width: 46rem;
      margin: 0 auto 3.5rem;
      text-align: center;
    }

    /* 标题和正文之间的细短线，代替原来的白卡当视觉锚点 */
    .dc-about-rule {
      display: block;
      width: 44px;
      height: 2px;
      margin: 1.75rem auto;
      background: var(--sage);
      border-radius: 2px;
    }

    .dc-about-lead {
      font-size: clamp(1.15rem, 1.5vw, 1.5rem);
      line-height: 1.75;
      font-weight: 500;
      color: var(--dark-accent);
      margin-bottom: 1.1rem;
    }


    .dc-lang { display: flex; gap: .125rem; }
    .dc-lang-btn {
      min-width: 3.5rem;
      padding: .375rem .5rem;
      border: 0;
      background: none;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .02em;
      color: var(--dark-accent);
      cursor: pointer;
      white-space: nowrap;
      transition: background-color .25s ease, color .25s ease;
      -webkit-appearance: none;
      appearance: none;
    }
    .dc-lang-btn:hover { background: rgba(45,41,38,.08); }
    .dc-lang-btn.lang-active { background: var(--dark-accent); color: #fff; }

    /* 中等宽度下导航栏挤，语言切换跟着收窄 */
    @media (max-width: 1100px) {
      .dc-lang-btn { min-width: 2.75rem; font-size: 10px; padding: .375rem .375rem; }
    }
    .mb-10 { margin-bottom: 2.5rem; }
    .h-10 { height: 2.5rem; }
    .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .inline-flex { display: inline-flex; }
    .p-10 { padding: 2.5rem; }
    .text-black\/40 { color: rgba(0,0,0,.40); }
    @media (min-width: 768px) { .md\:p-14 { padding: 3.5rem; } }
  

    /* ===== 全屏 scroll：每段占满一屏，滚动到位自动吸附 ===== */
    html {
      /* 默认关掉原生吸附，改由 JS 接管——原生吸附的动画曲线浏览器不给控制，
         Chrome 上直接瞬移，所以会「急」。?snap=css 可切回原生对比。 */
      scroll-snap-type: none;
      /* 不开全局 scroll-behavior: smooth —— 它会把每一次滚轮/触控板滚动
         都变成动画插值，手感发黏、跟不上手指。锚点跳转改用 JS 单独平滑。 */
    }

    section, footer { scroll-snap-align: start; }

    /* 作品区已压进一屏，和其他段一样参与吸附 */

    /* 窗口太矮时内容撑破一屏，mandatory 会让人够不到中段内容 → 退回不吸附 */
    @media (max-height: 620px) {
      html { scroll-snap-type: none; }
      [data-page="home"] #home, [data-page="home"] #games,
      [data-page="home"] #about, [data-page="home"] #news,
      [data-page="home"] #contact { min-height: 0; }
    }

    /* ?snap=css 切回浏览器原生吸附 */
    html[data-snap="css"] { scroll-snap-type: y mandatory; }

    /* 每段至少一屏高 */
    [data-page="home"] #home, [data-page="home"] #games,
    [data-page="home"] #about, [data-page="home"] #news,
    [data-page="home"] #contact { min-height: 100vh; }

    /* 内容不足一屏时垂直居中，不要黏在顶上 */
    [data-page="home"] #games, [data-page="home"] #about,
    [data-page="home"] #news, [data-page="home"] #contact {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }


    /* 首屏压进一屏：巨标题跟着屏高缩放，别顶出去 */
    #home { padding-top: 5rem; padding-bottom: 2.5rem; }
    #home h1 { font-size: clamp(3.25rem, 15.5vh, 12rem); }

    /* 手机上关掉吸附：小屏内容本来就超过一屏，吸附只会碍事 */
    @media (max-width: 767px) {
      html { scroll-snap-type: none; }
      [data-page="home"] #home, [data-page="home"] #games,
      [data-page="home"] #about, [data-page="home"] #news,
      [data-page="home"] #contact { min-height: 0; }
      #home h1 { font-size: 4rem; }
      #games, #about, #news, #contact { display: block; }

      /* 手机不吸附，「向下探索」这条提示没作用，只留下一大片空白 */
      .dc-scroll-hint { display: none; }

      /* 首屏占掉大半屏：巨标题需要留白才立得住，底下露出一点分页栏当「还有」的暗示。
         用 svh 而不是 vh —— vh 算的是地址栏收起后的高度，会比看得见的那块大。 */
      #home { padding-bottom: 2.5rem; }
      /* 选择器要跟上面那条 min-height:0 同权重，不然压不过去 */
      [data-page="home"] #home { min-height: 74vh; min-height: 74svh; }
      #games, #about, #news, #contact { padding-top: 4rem; padding-bottom: 4rem; }
    }

    /* 768–920px（平板直立）横排导航挤成好几行——这一段也走汉堡菜单 */
    @media (min-width: 768px) and (max-width: 920px) {
      #dc-topbar .hidden.md\:flex { display: none; }
      #dc-burger.md\:hidden { display: flex; width: 2.25rem; height: 2.25rem; }
    }
  

    /* ===== 作品区：两条横幅堆叠。标题常驻，简介和入口 hover 才浮现 ===== */
    .dc-rail {
      --media-h: clamp(170px, 30vh, 460px);
      --media-w: calc(var(--media-h) * 16 / 9);
      --info-w: clamp(240px, 24vw, 420px);
      --info-gap: 2.5rem;

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(1.5rem, 3.2vh, 2.75rem);
    }

    .dc-game {
      display: flex;
      align-items: center;
      gap: var(--info-gap);
      width: calc(var(--media-w) + var(--info-gap) + var(--info-w));
    }

    .dc-game-media {
      display: block;
      flex: none;
      width: var(--media-w);
      height: var(--media-h);
      position: relative;
      border-radius: 1.5rem;
      overflow: hidden;
      border: 8px solid #fff;
      box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
      transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
    }

    .dc-game-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* 抬起被指的那张就够了 —— 不去灰另一张：
       两条并排时灰掉一半画面太重，而且灰掉会被读成「这游戏停更了」 */
    .dc-game:hover .dc-game-media,
    .dc-game:focus-within .dc-game-media {
      transform: translateY(-8px);
      box-shadow: 0 34px 44px -12px rgb(0 0 0 / .22), 0 12px 16px -8px rgb(0 0 0 / .12);
    }

    /* 右侧常驻区：类型 + 游戏名一直都在 */
    .dc-game-info {
      width: var(--info-w);
      flex: none;
    }

    /* 简介和入口：hover 才浮现。占位不变，所以版面不会跳 */
    .dc-game-detail {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .38s ease, transform .45s cubic-bezier(.22,.61,.36,1);
    }

    .dc-game:hover .dc-game-detail,
    .dc-game:focus-within .dc-game-detail {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    #games { padding-top: 4rem; padding-bottom: 4rem; }
    #games { max-width: min(92vw, 1700px); }

    @media (min-width: 1600px) {
      .max-w-7xl { max-width: min(90vw, 1560px); }
      .max-w-4xl { max-width: min(86vw, 1180px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .dc-game-media, .dc-game-detail { transition: none; }
    }

    /* 窄屏：图占满宽度，文字落到图下面，简介常驻（没有 hover 可用） */
    @media (max-width: 900px) {
      .dc-rail { --media-w: 100%; --info-w: 100%; gap: 2.5rem; }
      .dc-game { flex-direction: column; align-items: stretch; width: 100%; max-width: 520px; gap: 1.25rem; }
      .dc-game-media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
      .dc-game-detail { opacity: 1; transform: none; pointer-events: auto; }
    }
  

    /* ===== 右侧锚点点阵：默认只有点，hover 才出字 ===== */
    .dc-dots {
      position: fixed;
      top: 50%;
      right: 2rem;
      transform: translateY(-50%);
      z-index: 60;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1.25rem;
    }

    /* html 上加 data-rail-side="left" 就整排搬到左边 */
    html[data-rail-side="left"] .dc-dots {
      right: auto;
      left: 2rem;
      align-items: flex-start;
    }

    .dc-dot {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
    }

    html[data-rail-side="left"] .dc-dot { flex-direction: row-reverse; }

    .dc-dot-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .05em;
      white-space: nowrap;
      color: var(--dark-accent);
      opacity: 0;
      transform: translateX(6px);
      transition: opacity .3s ease, transform .3s ease;
      pointer-events: none;
    }

    html[data-rail-side="left"] .dc-dot-label { transform: translateX(-6px); }

    .dc-dot:hover .dc-dot-label,
    .dc-dot:focus-visible .dc-dot-label { opacity: .8; transform: translateX(0); }

    /* 点：当前段落拉长成一小截竖条 */
    .dc-dot-mark {
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: rgba(45, 41, 38, .25);
      transition: height .4s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
    }

    .dc-dot:hover .dc-dot-mark { background: rgba(45, 41, 38, .5); }

    .dc-dot[aria-current="true"] .dc-dot-mark {
      height: 30px;
      background: var(--dark-accent);
    }

    /* 页尾底色偏暖，点阵要跟着换色才看得见 */
    .dc-dots[data-on-dark="true"] .dc-dot-mark { background: rgba(45,41,38,.3); }

    /* 窄屏收起来：手机上没有 hover，也没有空间 */
    @media (max-width: 900px) { .dc-dots { display: none; } }

    @media (prefers-reduced-motion: reduce) {
      .dc-dot-mark, .dc-dot-label { transition: none; }
    }
  

    /* ===== 顶部「作品」下拉小目录 ===== */
    .dc-nav-item { position: relative; }

    .dc-nav-item > .nav-link {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }

    /* 小三角，只有这一项有，用来说明它下面还有东西 */
    .dc-nav-item > .nav-link::after {
      content: '';
      width: 0; height: 0;
      border-left: 3.5px solid transparent;
      border-right: 3.5px solid transparent;
      border-top: 4px solid currentColor;
      opacity: .55;
      transition: transform .28s ease, opacity .28s ease;
    }
    .dc-nav-item:hover > .nav-link::after { transform: rotate(180deg); opacity: 1; }

    .dc-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      /* 上面这段透明 padding 是鼠标从导航栏走到面板的缓冲，没有它一移就断 */
      padding-top: 1.1rem;
      transform: translateX(-50%) translateY(6px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1);
    }

    /* 只认「键盘聚焦」，不认鼠标点击留下的焦点 ——
       用 :focus-within 的话，点一下导航项菜单就永远挂在那儿了 */
    .dc-nav-item:hover .dc-menu,
    .dc-nav-item:has(:focus-visible) .dc-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    /* 点过之后先收起来，鼠标离开再恢复，否则点完面板还赖着 */
    .dc-nav-item.is-dismissed .dc-menu {
      opacity: 0; visibility: hidden; pointer-events: none;
    }

    .dc-menu-panel {
      /* 用 flex 不用 grid：1fr 在这种「宽度由内容决定」的浮层里会被压扁，
         中文条目会被挤到换行或溢出 */
      display: flex;
      align-items: stretch;
      gap: 1.5rem;
      padding: 1.5rem;
      background: #fff;
      border: 1px solid rgba(0,0,0,.05);
      border-radius: 2rem;
      box-shadow: 0 24px 40px -12px rgba(45,41,38,.16);
      white-space: nowrap;
    }

    .dc-menu-head {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .16em;
      color: rgba(45,41,38,.35);
      padding: 0 .75rem;
      margin-bottom: .6rem;
    }

    .dc-menu-item {
      display: block;
      width: 100%;
      text-align: left;
      border: 0;
      background: none;
      cursor: pointer;
      padding: .55rem .75rem;
      border-radius: 1rem;
      color: var(--dark-accent);
      transition: background-color .22s ease;
      font-family: inherit;
      text-decoration: none;
    }
    .dc-menu-item:hover { background: rgba(163,177,138,.16); }

    .dc-menu-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; }
    .dc-menu-sub   { display: block; font-size: 11px; line-height: 1.5; color: rgba(45,41,38,.45); margin-top: .1rem; }

    .dc-menu-sep { width: 1px; background: rgba(0,0,0,.06); }

    /* 点开的（触屏走这条：没有 hover 就点一下展开，再点才跟链接走） */
    .dc-nav-item.is-open .dc-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .dc-nav-item.is-open > .nav-link::after { transform: rotate(180deg); opacity: 1; }
    /* is-dismissed 只用来收起鼠标点完赖着的面板，不该压过明确点开的状态 */
    .dc-nav-item.is-open.is-dismissed .dc-menu {
      opacity: 1; visibility: visible; pointer-events: auto;
    }

    /* 单列菜单不需要分隔线那套 */
    .dc-menu-panel.is-single { display: block; }

  

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
    

/* ============================================================
   子页（游戏介绍、招聘、素材包……）：不吸附，正常长文滚动
   ============================================================ */

.dc-page { padding-top: 7.5rem; }

/* ---- 子页 Hero：左文右图 ---- */
.dc-sub-hero {
  max-width: min(92vw, 1560px);
  margin: 0 auto;
  padding: 2rem 2rem 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.dc-sub-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: .5rem 0 1.25rem;
}

.dc-sub-lead {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.9;
  color: rgba(45, 41, 38, .65);
  margin-bottom: 2rem;
}

.dc-sub-art {
  /* 跟主胶囊同比例，图就不用裁 */
  aspect-ratio: 1232 / 706;
  border-radius: 1.75rem;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: 0 24px 34px -12px rgb(0 0 0 / .16);
  position: relative;
}
.dc-sub-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 事实栏 ---- */
.dc-facts {
  max-width: min(92vw, 1560px);
  margin: 0 auto;
  padding: 0 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(45, 41, 38, .08);
}
.dc-fact-k {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(45, 41, 38, .35);
  margin-bottom: .45rem;
}
.dc-fact-v { display: block; font-size: .95rem; line-height: 1.6; font-weight: 500; }

/* ---- 标签 ---- */
.dc-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.dc-tag {
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(163, 177, 138, .18);
  color: #5f6b52;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---- 通用区块 ---- */
.dc-section {
  max-width: min(92vw, 1560px);
  margin: 0 auto;
  padding: 4.5rem 2rem;
}
.dc-section-head { margin-bottom: 2.75rem; }
.dc-section-head .dc-eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--sage); display: block; margin-bottom: .6rem;
}
.dc-section-head h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.25; }

/* ---- 卖点网格 ---- */
.dc-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.dc-feature {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 2rem;
  padding: 2rem 2rem 2.25rem;
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.dc-feature:hover { box-shadow: 0 22px 32px -18px rgba(45,41,38,.28); transform: translateY(-4px); }
.dc-feature .ph-icon { font-size: 1.75rem; color: var(--sage); display: block; margin-bottom: 1rem; }
.dc-feature h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.dc-feature p { font-size: .9rem; line-height: 1.85; color: rgba(45, 41, 38, .6); }

/* ---- FAQ ---- */
.dc-faq { max-width: 46rem; }
.dc-faq-item { border-top: 1px solid rgba(45, 41, 38, .1); padding: 1.5rem 0; }
.dc-faq-item:last-child { border-bottom: 1px solid rgba(45, 41, 38, .1); }
.dc-faq-item h3 { font-size: 1.0625rem; margin-bottom: .6rem; }
.dc-faq-item p { font-size: .9rem; line-height: 1.85; color: rgba(45, 41, 38, .6); }

/* ---- 页尾前的收束 CTA ---- */
.dc-cta {
  max-width: min(92vw, 1560px);
  margin: 0 auto 5rem;
  padding: clamp(2.5rem, 4vw, 4rem) 2rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 3rem;
  text-align: center;
}
.dc-cta h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 1.5rem; }
.dc-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }

@media (max-width: 900px) {
  .dc-sub-hero { grid-template-columns: 1fr; padding-bottom: 3rem; }
  .dc-page { padding-top: 6rem; }
}

/* ---- 长文正文（隐私权、客服支援） ---- */
.dc-prose { max-width: 46rem; }
.dc-prose h2 {
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  margin: 2.75rem 0 .85rem;
  line-height: 1.4;
}
.dc-prose > h2:first-child { margin-top: 0; }
.dc-prose h3 { font-size: 1rem; margin: 1.75rem 0 .6rem; }
.dc-prose p {
  font-size: .95rem; line-height: 1.95;
  color: rgba(45, 41, 38, .65); margin-bottom: 1rem;
}
.dc-prose a { color: var(--dark-accent); text-decoration: underline; text-underline-offset: 3px; }
.dc-prose a:hover { color: var(--sage); }
.dc-prose ul { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.dc-prose li {
  position: relative; padding-left: 1.3rem;
  font-size: .95rem; line-height: 1.9;
  color: rgba(45, 41, 38, .65); margin-bottom: .5rem;
}
.dc-prose li::before {
  content: ''; position: absolute; left: 0; top: .82em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sage);
}
.dc-note {
  font-size: .8rem; color: rgba(45, 41, 38, .4);
  padding: .75rem 0 0; border-top: 1px solid rgba(45, 41, 38, .08); margin-top: 2rem;
}

/* ---- 编号步骤 ---- */
.dc-steps { counter-reset: dcstep; max-width: 46rem; }
.dc-step { counter-increment: dcstep; position: relative; padding-left: 3.25rem; margin-bottom: 1.5rem; }
.dc-step::before {
  content: counter(dcstep);
  position: absolute; left: 0; top: -.15rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(163, 177, 138, .2); color: #5f6b52;
  font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
.dc-step p { font-size: .95rem; line-height: 1.9; color: rgba(45, 41, 38, .65); }
.dc-step strong { color: var(--dark-accent); font-weight: 700; }

/* ---- 职位卡 ---- */
.dc-job {
  background: #fff; border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 2.25rem; padding: clamp(1.75rem, 2.5vw, 2.5rem);
  margin-bottom: 1.25rem;
}
.dc-job h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); margin-bottom: .5rem; }
.dc-job-sub { font-size: .95rem; color: rgba(45, 41, 38, .55); margin-bottom: 1.1rem; }
.dc-job-desc { font-size: .95rem; line-height: 1.9; color: rgba(45, 41, 38, .65); margin-bottom: 1.5rem; }

/* 底部一行：主操作在左，展开开关跟在右边，两者并排才像一组操作 */
.dc-job-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.dc-job-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  color: var(--dark-accent);
  transition: opacity .25s ease;
}
.dc-job-toggle:hover { opacity: .6; }

.dc-job-toggle::after {
  content: '';
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s ease;
}
.dc-job-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

.dc-job-detail {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(45, 41, 38, .08);
}

.dc-job h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--sage);
  margin: 1.5rem 0 .6rem;
}
.dc-job-detail > h4:first-child { margin-top: 0; }
.dc-job-detail ul { margin: 0 0 .5rem; padding: 0; list-style: none; }
.dc-job-detail li {
  position: relative; padding-left: 1.3rem;
  font-size: .9rem; line-height: 1.85;
  color: rgba(45, 41, 38, .62); margin-bottom: .4rem;
}
.dc-job-detail li::before {
  content: ''; position: absolute; left: .25rem; top: .8em;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(45, 41, 38, .25);
}

/* ---- 「我们怎么工作」网格 ---- */
.dc-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem 2.5rem; }
.dc-how-item { padding-top: 1.25rem; border-top: 2px solid rgba(163, 177, 138, .35); }
.dc-how-item h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.dc-how-item p { font-size: .9rem; line-height: 1.85; color: rgba(45, 41, 38, .6); }

/* ---- 日志列表 ---- */
.dc-log { max-width: 52rem; }
.dc-log-item {
  display: block; padding: 1.75rem 0;
  border-top: 1px solid rgba(45, 41, 38, .1);
  transition: opacity .25s ease;
}
.dc-log-item:last-child { border-bottom: 1px solid rgba(45, 41, 38, .1); }
.dc-log-item:hover { opacity: .6; }
.dc-log-date { font-size: 11px; font-weight: 700; color: var(--sage); letter-spacing: .06em; display: block; margin-bottom: .5rem; }
.dc-log-item h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.dc-log-item p { font-size: .9rem; line-height: 1.85; color: rgba(45, 41, 38, .6); }
.dc-empty {
  border: 1px dashed rgba(45, 41, 38, .18); border-radius: 2rem;
  padding: 2.5rem 2rem; text-align: center;
  font-size: .9rem; line-height: 1.9; color: rgba(45, 41, 38, .45);
  max-width: 52rem; margin-top: 1.5rem;
}

/* ============================================================
   玩法区：左右交替，每条一张 16:9 截图 + 一段说明
   ============================================================ */

.dc-alt { display: flex; flex-direction: column; gap: clamp(3rem, 5vw, 5.5rem); }

.dc-alt-item {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

/* 偶数条把图挪到右边，读起来才有来回的节奏 */
.dc-alt-item:nth-child(even) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.dc-alt-item:nth-child(even) .dc-shot { order: 2; }
.dc-alt-item:nth-child(even) .dc-alt-text { order: 1; }

/* 截图位：固定 16:9，图还没来时是一块虚线占位 */
.dc-shot {
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
  border: 8px solid #fff;
  box-shadow: 0 20px 30px -14px rgb(0 0 0 / .16);
  position: relative;
}
.dc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dc-shot.is-empty {
  border: 1px dashed rgba(45, 41, 38, .18);
  background: rgba(163, 177, 138, .09);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.dc-shot.is-empty .ph-icon { font-size: 1.75rem; color: rgba(45, 41, 38, .22); }
.dc-shot.is-empty span {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: rgba(45, 41, 38, .3);
}

.dc-alt-text .dc-alt-no {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: var(--sage); display: block; margin-bottom: .75rem;
}
.dc-alt-text h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); margin-bottom: .85rem; line-height: 1.3; }
.dc-alt-text p { font-size: .95rem; line-height: 1.95; color: rgba(45, 41, 38, .62); }

@media (max-width: 860px) {
  .dc-alt-item,
  .dc-alt-item:nth-child(even) { grid-template-columns: 1fr; gap: 1.5rem; }
  .dc-alt-item:nth-child(even) .dc-shot { order: 0; }
  .dc-alt-item:nth-child(even) .dc-alt-text { order: 0; }
}

/* ---- 作品卡：hover 时右侧化开一层游戏素材 ---- */
.dc-title-card { position: relative; overflow: hidden; }

/* 文字压在素材上面 */
.dc-title-card > *:not(.dc-title-art) { position: relative; z-index: 1; }

.dc-title-art {
  position: absolute;
  inset: 0 0 0 26%;           /* 只占右侧，左边留给文字 */
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  /* 从右往左化开：右缘最实，到左侧完全消失 */
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 42%, transparent 92%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 42%, transparent 92%);
}

.dc-title-art img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

.dc-title-card:hover .dc-title-art,
.dc-title-card:focus-within .dc-title-art {
  opacity: .18;               /* 压得够低，文字才不会糊 */
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .dc-title-art { transition: none; }
}

/* ---- 首屏：hover 游戏名时，对应那侧浮现素材 ---- */
.dc-hero-wash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.dc-hero-wash-img {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(240px, 30%, 560px);
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);

  /* 统一到页面色调：大幅去饱和后往橄榄绿偏，别把米白底染花 */
  filter: saturate(.3) sepia(.28) hue-rotate(12deg);
}

/* 左边的名字对左边的图，从外缘往中间化开；右边镜像 */
.dc-hero-wash-img[data-side="left"] {
  left: 0;
  object-position: 68% center;      /* 取靠内侧的画面，角色朝中间 */
  transform: translateX(-18px);
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.5) 40%, transparent 86%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.5) 40%, transparent 86%);
}

.dc-hero-wash-img[data-side="right"] {
  right: 0;
  object-position: 32% center;
  transform: translateX(18px);
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 40%, transparent 86%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.5) 40%, transparent 86%);
}

.dc-hero-wash-img.is-on { opacity: .5; transform: translateX(0); }

@media (max-width: 900px) { .dc-hero-wash { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dc-hero-wash-img { transition: opacity .2s ease; transform: none; }
  .dc-hero-wash-img.is-on { transform: none; }
}

/* ============================================================
   翻页动画期间：关掉每帧都要重算的昂贵效果
   ============================================================ */

/* 固定导航的 backdrop-filter 是滚动掉帧的头号来源：
   页面每移动一帧，它都要把身后那块背景重新模糊一次。
   翻页时换成不透明底色，肉眼几乎看不出差别。 */
.is-snapping #dc-topbar {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  background-color: rgba(255, 255, 255, .82) !important;
}

/* 动画期间不必再跑这些过渡 */
.is-snapping .dc-hero-wash-img,
.is-snapping .dc-game-media,
.is-snapping .dc-title-art,
.is-snapping .dc-feature { transition: none !important; }

/* 首屏那两张素材带滤镜和蒙版，都是很贵的合成属性。
   没在显示时用 visibility 彻底摘掉，别让它们一直占着图层。 */
.dc-hero-wash-img {
  visibility: hidden;
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), visibility 0s linear .7s;
}
.dc-hero-wash-img.is-on {
  visibility: visible;
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), visibility 0s;
}

/* ============================================================
   分众 Tab 切换动效
   ============================================================ */

/* 内容淡入 + 从下方浮起 */
@keyframes dc-tab-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-content.is-entering {
  animation: dc-tab-in .4s cubic-bezier(.22,.61,.36,1) both;
}

/* 下划线用伪元素做，才能有过渡；原来的 border 是硬切 */
.section-tab { position: relative; border-bottom: 0 !important; }
.section-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--dark-accent);
  transform: scaleX(0);
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.section-tab.active::after { transform: scaleX(1); }

/* 手机上三个标签挤在 375px 里，px-6 + gap-12 会让「玩家」竖着排成两行。
   收窄间距、字号降一档、禁止换行就够了，不用改结构 */
@media (max-width: 640px) {
  .dc-aud-tabs { gap: .5rem; }
  .section-tab {
    padding-left: .625rem; padding-right: .625rem;
    font-size: 12px; letter-spacing: .06em; white-space: nowrap;
  }
}

/* 标签文字本身也跟着深浅变化 */
.section-tab { opacity: .5; transition: opacity .3s ease; }
.section-tab:hover { opacity: .8; }
.section-tab.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tab-content.is-entering { animation: none; }
  .section-tab::after { transition: none; }
}

/* ---- 还没有截图时：图位收起，六条退回卡片网格 ----
   有截图了就把 .dc-alt 上的 no-shots 去掉、往 .dc-shot 里塞 <img>，
   立刻变回左右交替的大图排版，HTML 结构不用动。 */
.dc-alt.no-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.dc-alt.no-shots .dc-shot { display: none; }

.dc-alt.no-shots .dc-alt-item,
.dc-alt.no-shots .dc-alt-item:nth-child(even) {
  display: block;
  grid-template-columns: none;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 2rem;
  padding: 2rem 2rem 2.25rem;
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.dc-alt.no-shots .dc-alt-item:hover {
  box-shadow: 0 22px 32px -18px rgba(45, 41, 38, .28);
  transform: translateY(-4px);
}
.dc-alt.no-shots .dc-alt-text h3 { font-size: 1.25rem; }
.dc-alt.no-shots .dc-alt-text p { font-size: .9rem; line-height: 1.85; }


/* ===== 手機導航:漢堡 + 全屏抽屉 =====
   為什麼不用底部橫條:導航有五個頂層項、底下掛著十幾條(兩個遊戲、客服、素材包、
   隱私、三個 B 站頻道),橫條放不下這些二級項;而且首頁是按滿屏分段配吸附滾動構圖的,
   常駐橫條會一直吃掉一條高度。 */

.dc-burger {
  width: 2.75rem; height: 2.75rem;
  display: none;                       /* 桌面不出現,下面的 media query 打開 */
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  border: 0; background: none; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.dc-burger > span {
  display: block;
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--dark-accent);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.dc-burger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dc-burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
.dc-burger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.dc-drawer {
  position: fixed;
  inset: 0;
  z-index: 45;                         /* topbar 是 z-50,漢堡鈕要留在抽屉上面 */
  background: var(--bg-cream, #F9F7F2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: opacity .24s ease;
}
.dc-drawer.is-open { opacity: 1; }
.dc-drawer-panel {
  padding: 7.5rem 1.75rem 3rem;        /* 上面讓開固定的 topbar */
  display: flex; flex-direction: column; gap: .5rem;
}

/* 抽屉裡的導航項:攤平成一列,下拉面板常駐展開,不再是浮層 */
.dc-drawer .nav-link {
  display: block;
  padding: .875rem 0;
  font-size: 1.375rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--dark-accent);
}
.dc-drawer .dc-nav-item > .nav-link::after { display: none; }   /* 攤平了就不需要小三角 */

.dc-drawer .dc-menu,
.dc-drawer .dc-nav-item.is-dismissed .dc-menu,
.dc-drawer .dc-nav-item.is-open .dc-menu {
  position: static;
  padding-top: 0;
  transform: none;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: none;
}
.dc-drawer .dc-menu-panel {
  display: block;
  white-space: normal;
  padding: .5rem 0 1rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.dc-drawer .dc-menu-sep { display: none; }
.dc-drawer .dc-menu-head { padding-left: 0; margin-top: .75rem; }
.dc-drawer .dc-menu-item { padding-left: 0; padding-right: 0; }
.dc-drawer .dc-menu-title { font-size: 1rem; }
.dc-drawer .dc-menu-item + .dc-menu-item { border-top: 1px solid rgba(0,0,0,.05); }

/* 抽屉開著時鎖住背景滾動,不然手指一滑底下的頁面在跑 */
html.dc-drawer-open, html.dc-drawer-open body { overflow: hidden; }

@media (max-width: 767px) {
  .dc-burger { display: flex; width: 2.25rem; height: 2.25rem; }

  /* 多了漢堡鈕之後,375px 上留給 logo 只剩 105px,「Drowsy Cat」會斷成兩行、
     把頂欄撐到 120px 高。收窄內距、logo 降一档、禁止斷行 */
  #dc-topbar { padding: 1rem 1.25rem; }
  #dc-topbar > div:first-child > a { font-size: 1.375rem; white-space: nowrap; }
  #dc-topbar > div:last-child { gap: .5rem; }
  .dc-lang-btn { font-size: 12px; }

  .dc-drawer-panel { padding-top: 5.5rem; }   /* 跟著變矮的頂欄 */
}
@media (min-width: 921px) {
  .dc-drawer { display: none; }
}


/* ===== 顶栏品牌区:猫 + 字标 =====
   字标原来是纯文字,手机上「Drowsy Cat」会断成两行、把固定顶栏顶高一截。
   加 nowrap 是为了这个;字号在窄屏收一档,给猫和语言钮腾地方。
   猫用 currentColor,所以深色底上只要 color 变浅就整只反过来,不需要另出反黑版。 */
.dc-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  line-height: 1;
}
.dc-brand .ph-icon {
  width: auto;
  height: 1.05em;          /* 跟着字标字号走,不用另调 */
  flex-shrink: 0;
}
@media (max-width: 420px) {
  .dc-brand { font-size: 1.35rem; gap: .4rem; }
}