/* Game case styling is isolated from the product UI case pages. */
body[data-ui-case="ui-01"] { --paper:#101112; --ink:#eee9df; --muted:#aaa69d; --line:#c0ae822c; --glass:#151617eb; background:#101112; color:#eee9df; }
body[data-ui-case="ui-01"] .nav-shell { background:#121415e8; border-color:#b9aa7e33; box-shadow:none; }
body[data-ui-case="ui-01"] .nav-links a,body[data-ui-case="ui-01"] .nav-cta { color:#bdbab1; }
body[data-ui-case="ui-01"] .nav-links a.active { color:#f0cf8b; background:#ffffff09; }
body[data-ui-case="ui-01"] .brand img { filter:brightness(0) invert(1); }
body[data-ui-case="ui-01"] .footer { background:#101112; }
body[data-ui-case="ui-01"] .footer-bottom { color:#b3afa6; }
.game-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.game-hero { position:relative; min-height:760px; height: min(880px,100svh); isolation:isolate; background:#090b0c; }
.game-hero-scene { position:absolute; width:100%; height:100%; object-fit:cover; object-position:65% center; z-index:-2; }
.game-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#070a0ce6, #070a0c85 42%,transparent 74%),linear-gradient(0deg,#101112,transparent 28%); z-index:-1; }
.game-hero-inner { width:min(calc(100% - 112px),1320px); margin:auto; padding:180px 0 140px; }
.game-kicker { display:block; font-size:10px; letter-spacing:.19em; color:#baa67c; line-height:1.8; font-weight:500; }
.game-kicker span { margin:0 15px; }
.game-hero h1 { margin:36px 0 28px; width:clamp(280px,32vw,460px); }
.game-hero h1 img { width:100%; }
.game-hero-line { font-family:"Songti SC","STSong",serif; font-size:clamp(24px,2.7vw,38px); letter-spacing:.13em; margin:0 0 20px; }
.game-hero-copy { color:#b5b4af; font-size:14px; line-height:2; margin:0 0 32px; }
.game-cta { display:inline-flex; align-items:center; gap:65px; padding:17px 25px; border:1px solid #bda16b; background:#aa875d12; font-size:13px; letter-spacing:.15em; color:#eed5a6; transition:background .2s; }
.game-cta:hover { background:#aa875d33; }
.game-cta:focus-visible,body[data-ui-case="ui-01"] a:focus-visible { outline:2px solid #f0cf8b; outline-offset:5px; }
.game-cta span { font-size:22px; line-height:1; }
.game-hero-bottom { position:absolute; bottom:32px; left:56px; right:56px; display:flex; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid #c0ae8240; color:#bdb7ab; font-size:10px; letter-spacing:.1em; }
body[data-ui-case="ui-01"] .case-flow-nav { width:min(calc(100% - 112px),1320px); border-radius:0; padding:0; gap:36px; background:#101112f2; backdrop-filter:blur(16px); border-bottom:1px solid var(--line); min-height:62px; }
body[data-ui-case="ui-01"] .case-flow-nav a { padding:22px 0; border-radius:0; font-size:11px; font-weight:400; color:#aaa69d; }
body[data-ui-case="ui-01"] .case-flow-nav a.active,body[data-ui-case="ui-01"] .case-flow-nav a:hover { color:#f0cf8b; background:none; box-shadow:inset 0 -1px #d1ad6a; }
body[data-ui-case="ui-01"] .game-case { width:min(calc(100% - 112px),1320px); padding:0 0 90px; }
.game-section { padding:100px 0; border-bottom:1px solid var(--line); scroll-margin-top:160px; }
.game-section-head { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:44px; }
.game-section h2 { font-family:"Songti SC","STSong",serif; font-weight:500; font-size:clamp(30px,3.3vw,48px); letter-spacing:.05em; line-height:1.4; margin:15px 0 0; }
.game-section-head > p { margin:0; max-width:490px; font-size:14px; line-height:2.1; color:#b0ada5; }
.game-screen { margin:0; }
.game-screen > img { width:100%; height:auto; border:1px solid #c0ae822c; }
.game-screen figcaption { display:flex; justify-content:space-between; gap:12px; padding:17px 0; color:#a59e91; font-size:10px; letter-spacing:.09em; }
.game-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:28px; }
.game-notes > div { border-top:1px solid var(--line); padding-top:24px; }
.game-notes span { color:#d8c094; font-size:12px; letter-spacing:.1em; }
.game-notes p { color:#aaa69d; font-size:13px; line-height:1.95; margin:12px 0 0; }
.game-pullquote { font-family:"Songti SC",serif; margin:44px 0 0; font-size:30px; color:#deca9f; }
.game-pullquote span { display:block; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size:13px; color:#aaa69d; margin-top:16px; }
.game-art-board { display:grid; grid-template-columns:1.3fr 1fr; border:1px solid var(--line); background:#151617; }
.game-brand-study { display:flex; flex-direction:column; justify-content:space-between; padding:40px; border-right:1px solid var(--line); }
.game-brand-study img { width:85%; margin:40px auto; }
.game-brand-study p,.game-state-study p,.game-art-caption { font-size:11px; color:#a7a297; line-height:1.8; }
.game-palette { padding:40px; }
.game-palette > div { display:flex; align-items:center; gap:20px; padding-top:23px; }
.game-palette i { width:44px; height:44px; background:var(--pigment); border:1px solid #ffffff20; }
.game-palette span { font-size:12px; color:#d2cabc; }
.game-palette small { display:block; color:#9f9a90; margin-top:5px; font-size:10px; letter-spacing:.06em; }
.game-state-study { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:48px; }
.game-option-sample { display:flex; align-items:center; aspect-ratio:1000 / 121; padding-left:20%; background:url('../../demo-yinxing/assets/ui/选项-默认状态.png') center / 100% 100% no-repeat; margin:24px 0 14px; font-size:clamp(10px,1.2vw,17px); }
.game-option-sample.is-highlighted { background-image:url('../../demo-yinxing/assets/ui/选项-悬停和按下.png'); }
.game-art-caption { margin-top:30px; border-top:1px solid var(--line); padding-top:18px; }
.game-finale { text-align:center; padding:110px 20px; background:radial-gradient(ellipse at center,#b99d6510,transparent 65%); }
.game-finale h2 { font-size:clamp(34px,4.5vw,60px); }
.game-finale p { font-size:14px; color:#aaa69d; line-height:1.9; margin:24px 0 32px; }
.game-finale small { display:block; margin-top:24px; font-size:11px; color:#99948a; }
body[data-ui-case="ui-01"] .next-case { border:0; padding:60px 0 0; }
body[data-ui-case="ui-01"] .next-case a { color:#ede5d6; }
@media(max-width:760px) {
  .game-hero { min-height:720px; height:94svh; max-height:850px; }
  .game-hero-scene { object-position:62% center; }
  .game-hero::after { background:linear-gradient(90deg,#070a0ccb, #070a0c44),linear-gradient(0deg,#101112,transparent 65%); }
  .game-hero-inner { width:calc(100% - 40px); padding:165px 0 100px; }
  .game-hero h1 { width:min(78%,350px); margin-top:32px; }
  .game-hero-line { font-size:25px; }
  .game-hero-copy { font-size:12px; }
  .game-hero-bottom { left:20px; right:20px; bottom:24px; font-size:9px; }
  .game-hero-bottom > span:nth-child(2) { display:none; }
  body[data-ui-case="ui-01"] .case-flow-nav,body[data-ui-case="ui-01"] .game-case { width:calc(100% - 40px); }
  body[data-ui-case="ui-01"] .case-flow-nav { gap:26px; min-height:56px; }
  body[data-ui-case="ui-01"] .case-flow-nav a { padding:18px 0; }
  .game-section { padding:60px 0; }
  .game-section-head { grid-template-columns:1fr; gap:22px; margin-bottom:28px; }
  .game-section-head > p { font-size:13px; }
  .game-screen figcaption { font-size:8px; flex-wrap:wrap; line-height:1.7; }
  .game-notes { grid-template-columns:1fr; gap:22px; margin-top:18px; }
  .game-art-board,.game-state-study { grid-template-columns:1fr; }
  .game-brand-study { border-right:0; border-bottom:1px solid var(--line); padding:26px; }
  .game-palette { padding:26px; }
  .game-state-study { gap:24px; }
  .game-option-sample { font-size:12px; }
  .game-finale { padding:65px 0; }
}
body[data-ui-case="ui-01"] .nav-cta { background:#c3aa7614; border:1px solid #c3aa7640; color:#d4bd90; }