/* ==========================================================================
CC德州 官网 · 设计令牌 tokens.css v2.0 黑金版（2026-10-04）
用法：页面内联样式之后引入
说明：只覆盖变量并加装饰（金边、光晕、暖光），不改页面布局；删掉本文件页面仍能正常显示。
配色：近黑暖底 + 金属金点缀 + 房卡饱和色（与 App 大厅房卡一致）。
对比度：正文组合 ≥ 4.5:1，大字 / 图形 ≥ 3:1（详见《官网配色与字体规范.md》）。
========================================================================== */
:root{
/* ---- 1. 黑金底色 ---- */
--cc-noir-950:#070605; /* 页脚、最深底 */
--cc-noir-900:#0B0A08; /* 页面底（对应 --bg） */
--cc-noir-800:#14110C; /* 顶栏、区块底；深色版 logo 标准底 */
--cc-noir-700:#1A160F; /* 卡片底（对应 --card） */
--cc-noir-600:#221C12; /* 卡片悬停、表头 */
--cc-noir-500:#2C2416; /* 选中态底 */
--cc-line:#3A2E1A; /* 装饰分割线（非交互） */
--cc-line-strong:#8A6A2E;/* 输入框、可交互控件边框（≥3:1） */
/* ---- 2. 金色（金属） ---- */
--cc-gold-100:#FFF8E0;
--cc-gold-200:#FFF1C2;
--cc-gold-300:#FFE27A;
--cc-gold-400:#FFD65A; /* 品牌金：链接、强调、主按钮 */
--cc-gold-500:#F2BE3C;
--cc-gold-600:#E09A1A;
--cc-gold-700:#B87A18;
--cc-gold-800:#7A4A06; /* 浅底上的金色文字 */
--cc-gold-900:#3A2A10; /* 暖光中心 */
--cc-gold-ink:#3A1600; /* 金色按钮上的文字 */
--cc-ink:#FFF6E2; /* 正文（象牙白） */
--cc-ink-muted:#D9CBAA; /* 次要文字（暖灰金） */
--cc-ink-subtle:#B5A27A; /* 弱提示（≥14px） */
--cc-ivory:#FFF8EC; /* 浅色底 */
--cc-ink-dark:#1C150A; /* 浅底上的正文 / 浅色版 logo 字 */
/* 房卡饱和色（与大厅一致；-600 可放白字） */
--cc-green-300:#3BE07A; --cc-green-600:#0A7F35; --cc-green-900:#03401F; /* 练手房 */
--cc-red-300:#FF5A5A; --cc-red-600:#D8162E; --cc-red-900:#5A0418; /* 金币场 */
--cc-purple-300:#C27BFF;--cc-purple-600:#7A22E0;--cc-purple-900:#2A0660; /* 积分场 */
--cc-blue-300:#5AA8FF; --cc-blue-600:#1E5AE0; --cc-blue-900:#081E66; /* 好友房 */
--cc-suit-red:#FF4D6A;
--cc-focus:#FFF1C2; /* 键盘焦点环（香槟金，配 2px 偏移） */
--cc-success:#5CE6A0;
--cc-danger:#FF8A8A;
/* ---- 3. 金属渐变与光效 ---- */
--cc-grad-gold:linear-gradient(180deg,#FFF27A 0%,#FFD65A 40%,#F2BE3C 70%,#E09A1A 100%); /* 主按钮 */
--cc-grad-gold-metal:linear-gradient(135deg,#FFF6C0 0%,#F7C443 22%,#B8770F 48%,#FFE38A 72%,#C98A1E 100%); /* 金边、分隔线 */
--cc-grad-gold-text:linear-gradient(180deg,#FFF8E0 0%,#FFE27A 45%,#F2BE3C 100%); /* 金字标题 */
--cc-grad-stage:radial-gradient(110% 70% at 50% -8%,rgba(255,196,80,.22) 0%,rgba(122,74,6,.14) 35%,rgba(11,10,8,0) 70%),
radial-gradient(60% 40% at 85% 30%,rgba(255,214,90,.07),rgba(255,214,90,0) 70%),
radial-gradient(60% 40% at 10% 55%,rgba(255,170,60,.06),rgba(255,170,60,0) 70%);
--cc-rays:repeating-conic-gradient(from 180deg at 50% -10%,rgba(255,214,90,.045) 0 4deg,rgba(255,214,90,0) 4deg 11deg);
--cc-glow-gold:0 0 0 1px rgba(255,214,90,.35),0 0 18px rgba(255,190,60,.28);
--cc-grad-green:radial-gradient(90% 70% at 50% 40%,#3BE07A 0%,#0E9A4E 55%,#03401F 100%);
--cc-grad-red:radial-gradient(90% 70% at 50% 40%,#FF5A5A 0%,#C8102E 55%,#5A0418 100%);
--cc-grad-purple:radial-gradient(90% 70% at 50% 40%,#C27BFF 0%,#7A22E0 55%,#2A0660 100%);
--cc-grad-blue:radial-gradient(90% 70% at 50% 40%,#5AA8FF 0%,#1E5AE0 55%,#081E66 100%);
/* ---- 4. 字体（只用系统字体） ---- */
--cc-font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC","Hiragino Sans GB","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--cc-font-sans-tc:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC","Source Han Sans TC","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--cc-fs-display:clamp(30px,5.2vw,46px);
--cc-fs-h1:clamp(26px,4.4vw,38px);
--cc-fs-h2:clamp(21px,3.4vw,28px);
--cc-fs-h3:clamp(18px,2.4vw,21px);
--cc-fs-lead:18px; --cc-fs-body:16px; --cc-fs-small:14px; --cc-fs-caption:13px;
--cc-lh-tight:1.3; --cc-lh-head:1.4; --cc-lh-body:1.75;
/* ---- 5. 间距 / 圆角 / 阴影 ---- */
--cc-space-1:4px; --cc-space-2:8px; --cc-space-3:12px; --cc-space-4:16px; --cc-space-5:24px; --cc-space-6:32px; --cc-space-7:48px; --cc-space-8:64px;
--cc-radius-sm:8px; --cc-radius-md:14px; --cc-radius-lg:20px; --cc-radius-pill:999px;
--cc-shadow-card:0 10px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,180,.10),inset 0 0 0 1px rgba(255,214,90,.10);
--cc-shadow-btn:0 6px 16px rgba(0,0,0,.5),0 0 16px rgba(255,190,60,.25),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,60,0,.35);
--cc-ease:cubic-bezier(.4,0,.2,1);
/* ---- 6. 覆盖 SEO 页面已有变量 ---- */
--bg:var(--cc-noir-900);
--card:var(--cc-noir-700);
--ink:var(--cc-ink);
--mut:var(--cc-ink-muted);
--gold:var(--cc-gold-400);
--line:var(--cc-line);
--max:1080px;
color-scheme:dark;
}
/* ---- 7. 页面装饰增强（不改布局） ---- */
body{font-family:var(--cc-font-sans);background-color:var(--cc-noir-900);
background-image:var(--cc-grad-stage),var(--cc-rays);background-repeat:no-repeat;background-size:100% 1100px,100% 1100px}
:lang(zh-Hant),:lang(zh-TW),:lang(zh-HK){font-family:var(--cc-font-sans-tc)}
header.site{background:linear-gradient(180deg,rgba(26,22,15,.96),rgba(11,10,8,.94));border-bottom:0;
box-shadow:0 1px 0 rgba(255,214,90,.55),0 2px 0 rgba(122,74,6,.6),0 8px 24px rgba(0,0,0,.6);
-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
nav.main a[aria-current=page]{color:var(--cc-gold-300);text-shadow:0 0 12px rgba(255,214,90,.45)}
h1{background:var(--cc-grad-gold-text);-webkit-background-clip:text;background-clip:text;color:var(--cc-gold-200);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 10px rgba(255,170,40,.18))}
h2{position:relative;padding-left:22px}
h2::before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;transform:rotate(45deg);border-radius:2px;
background:var(--cc-grad-gold-metal);box-shadow:0 0 10px rgba(255,200,80,.55)}
.card,details{border-color:rgba(255,214,90,.28);box-shadow:var(--cc-shadow-card);
background-image:linear-gradient(180deg,rgba(255,226,140,.06),rgba(255,226,140,0) 40%)}
.card{position:relative;transition:box-shadow .2s var(--cc-ease),transform .2s var(--cc-ease)}
.card::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;background:var(--cc-grad-gold-metal);opacity:.9}
.card:hover{box-shadow:var(--cc-shadow-card),var(--cc-glow-gold);transform:translateY(-2px)}
.card h3{color:var(--cc-gold-200)}
.note{border-left:3px solid var(--cc-gold-400);background:linear-gradient(90deg,rgba(255,214,90,.10),rgba(26,22,15,.9) 30%)}
th{color:var(--cc-gold-200);background:linear-gradient(180deg,#2C2416,#221C12)}
footer.site{background:var(--cc-noir-950);border-top:0;box-shadow:inset 0 1px 0 rgba(255,214,90,.45),inset 0 2px 0 rgba(122,74,6,.5)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--cc-focus);outline-offset:2px;border-radius:6px}
.btn{transition:transform .15s var(--cc-ease),box-shadow .15s var(--cc-ease),filter .15s var(--cc-ease)}
.btn:not(.primary){background:linear-gradient(180deg,rgba(255,214,90,.10),rgba(255,214,90,.02));box-shadow:inset 0 1px 0 rgba(255,236,180,.18)}
.btn.primary{background:var(--cc-grad-gold);color:var(--cc-gold-ink);border-color:#FFF1C2;box-shadow:var(--cc-shadow-btn);text-shadow:0 1px 0 rgba(255,250,210,.6)}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn[aria-disabled=true]{opacity:1;color:var(--cc-ink-muted);border-color:var(--cc-line-strong);background:rgba(255,214,90,.04);box-shadow:none;text-shadow:none}
.btn.primary[aria-disabled=true]{background:var(--cc-grad-gold);color:var(--cc-gold-ink);border-color:#FFF1C2;box-shadow:var(--cc-shadow-btn);cursor:default}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* ---- 7b. 移动端顶栏：56px 单行（logo + 繁體中文）+ 40px 横向滚动导航，合计 96px ----
纯 CSS：导航仍是 HTML 里静态的 6 个 ，不用 JS、不用汉堡菜单。 */
@media (max-width:819px){
header.site .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand lang" "nav nav";align-items:center;gap:0 12px;min-height:0;flex-wrap:nowrap}
header.site .brand{grid-area:brand;display:flex;align-items:center;height:56px}
header.site .brand img{height:32px;width:auto}
header.site .lang{grid-area:lang;display:inline-flex;align-items:center;height:32px;padding:0 12px;font-size:14px;line-height:1;text-decoration:none;
color:var(--cc-gold-300);border:1px solid rgba(255,214,90,.5);border-radius:999px;background:rgba(255,214,90,.06)}
nav.main{grid-area:nav;min-width:0;height:40px;margin:0 -20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
border-top:1px solid rgba(255,214,90,.14);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
nav.main::-webkit-scrollbar{display:none}
nav.main ul{flex-wrap:nowrap;align-items:center;gap:0 2px;height:40px;width:max-content;padding:0 20px}
nav.main a{display:flex;align-items:center;height:40px;padding:0 10px;font-size:15px;white-space:nowrap}
nav.main a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--cc-gold-400)}
}
/* ---- 8. 组件类（cc- 前缀，可直接用） ---- */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:var(--cc-radius-pill);font:700 16px/1 var(--cc-font-sans);letter-spacing:.5px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .15s var(--cc-ease),filter .15s var(--cc-ease),box-shadow .15s var(--cc-ease)}
.cc-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cc-btn:active{transform:translateY(1px);filter:brightness(.95)}
.cc-btn--primary{position:relative;overflow:hidden;background:var(--cc-grad-gold);color:var(--cc-gold-ink);border-color:#FFF1C2;box-shadow:var(--cc-shadow-btn);text-shadow:0 1px 0 rgba(255,250,210,.6)}
.cc-btn--primary::after{content:"";position:absolute;left:8%;right:8%;top:2px;height:45%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none}
.cc-btn--ghost{background:linear-gradient(180deg,rgba(255,214,90,.12),rgba(255,214,90,.02));color:var(--cc-gold-300);border-color:var(--cc-gold-400);box-shadow:inset 0 1px 0 rgba(255,236,180,.25),0 0 12px rgba(255,190,60,.15)}
.cc-btn--green{background:linear-gradient(180deg,#3BE07A,#0A7F35 55%,#04501C);color:#fff;border-color:#FFE38A;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.cc-btn--blue{background:linear-gradient(180deg,#5AA8FF,#1E5AE0 55%,#0E2E9A);color:#fff;border-color:#FFE38A;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.cc-btn--soon,.cc-btn[aria-disabled=true]{background:rgba(255,214,90,.04);color:var(--cc-ink-muted);border-color:var(--cc-line-strong);box-shadow:none;cursor:not-allowed;transform:none;filter:none;text-shadow:none}
.cc-card{position:relative;padding:20px;border-radius:var(--cc-radius-md);
background:linear-gradient(180deg,#221C12,#14110C) padding-box,var(--cc-grad-gold-metal) border-box;border:1.5px solid transparent;box-shadow:var(--cc-shadow-card)}
.cc-card::after{content:"";position:absolute;inset:5px;border-radius:calc(var(--cc-radius-md) - 4px);border:1px solid rgba(255,214,90,.16);pointer-events:none}
.cc-card h3{margin:0 0 8px;color:var(--cc-gold-200);font-size:var(--cc-fs-h3)}
.cc-card p{margin:0;color:var(--cc-ink-muted)}
.cc-card--room{padding:3px;border:0;border-radius:var(--cc-radius-lg);background:var(--cc-grad-gold-metal);box-shadow:0 10px 24px rgba(0,0,0,.6),0 0 22px rgba(255,190,60,.22)}
.cc-card--room::after{display:none}
.cc-card--room>.cc-card__in{border-radius:calc(var(--cc-radius-lg) - 3px);padding:20px;color:#fff;min-height:100%}
.cc-card--green>.cc-card__in{background:var(--cc-grad-green)}
.cc-card--red>.cc-card__in{background:var(--cc-grad-red)}
.cc-card--purple>.cc-card__in{background:var(--cc-grad-purple)}
.cc-card--blue>.cc-card__in{background:var(--cc-grad-blue)}
.cc-card--room h3{color:#FFF8D6;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.cc-card--room p{color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cc-badge{display:inline-block;padding:2px 10px;border-radius:var(--cc-radius-pill);font-size:var(--cc-fs-caption);font-weight:700;color:var(--cc-gold-ink);background:var(--cc-grad-gold)}
.cc-divider{height:2px;border:0;margin:32px auto;max-width:360px;background:linear-gradient(90deg,rgba(255,214,90,0),#FFD65A 30%,#FFF1C2 50%,#FFD65A 70%,rgba(255,214,90,0))}
.cc-shot{display:block;max-width:100%;height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,190,60,.18))}
.cc-shot--portrait{max-width:320px;margin-inline:auto}