/* 游戏之外所有页面的外壳：和游戏同一片海（同一套分层配色），奶油色毛玻璃卡片，Fredoka 标题 */
@font-face { font-family: Fredoka; font-weight: 300 700; font-display: swap; src: url(/fonts/fredoka-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Fredoka; font-weight: 300 700; font-display: swap; src: url(/fonts/fredoka-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --ink: #173247; --sub: #4f6b7c; --line: rgba(43,95,122,.28); --paper: rgba(252,248,236,.93); --soft: rgba(255,255,255,.55);
  --c0: #b9b2c8; --c1: #58c48d; --c2: #5ea3f0; --c3: #a983ef; --c4: #f0b03c;
  --top: #86e6e4; --deep: #5cc0b0; --head: #173247; --headShadow: rgba(255,255,255,.55); --light: 1;
  --title: Fredoka, "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: var(--deep); }
a { color: inherit; }
::selection { background: #ffd38a; }
body.z0 { --top: #9df0ea; --deep: #5cc0b0; }
body.z1 { --top: #79ddcb; --deep: #3fa38c; --light: .75; }
body.z2 { --top: #5cb8d0; --deep: #2f7c93; --light: .45; --head: #fff; --headShadow: rgba(10,40,60,.45); }
body.z3 { --top: #6079c0; --deep: #33437f; --light: .2; --head: #fff; --headShadow: rgba(10,20,50,.5); }
body.z4 { --top: #2c3a78; --deep: #141b40; --light: 0; --head: #fff; --headShadow: rgba(0,0,0,.5); }

/* ---- 背景海景（固定在后面） ---- */
.sea { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, var(--top) 0%, var(--deep) 100%); transition: background 0s; }
.sea .glow { position: absolute; left: 50%; top: -30vh; width: 120vw; height: 70vh; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(255,255,240,.55), transparent 65%); opacity: var(--light); }
.sea .surface { position: absolute; left: 0; right: 0; top: 0; height: 26px; opacity: var(--light); background: repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 40px, rgba(255,255,255,.35) 40px 80px); filter: blur(6px); animation: shimmer 9s linear infinite; }
@keyframes shimmer { to { background-position: 400px 0; } }
.sea .rays { position: absolute; inset: 0; opacity: calc(var(--light) * .9); }
.sea .rays i { position: absolute; top: -10vh; width: 9vw; height: 120vh; background: linear-gradient(180deg, rgba(255,255,235,.5), rgba(255,255,235,0) 80%); transform-origin: top center; filter: blur(6px); animation: sway 11s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(14deg); } to { transform: rotate(6deg); } }
.sea .caustic { position: absolute; inset: 0; opacity: calc(var(--light) * .35); background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.4) 0 2px, transparent 3px); background-size: 140px 120px, 190px 170px; animation: drift 30s linear infinite; }
@keyframes drift { to { background-position: 140px 60px, -190px 85px; } }
.sea .bubbles i { position: absolute; bottom: -20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.65); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(255,255,255,.08) 60%); animation: rise linear infinite; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(14px, -55vh); } 100% { transform: translate(-6px, -112vh); opacity: 0; } }
.sea .fish { position: absolute; width: 46px; height: 22px; animation: swim linear infinite; opacity: .55; }
@keyframes swim { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 80px)); } }
.sea .fish.back { animation-name: swimBack; } .sea .fish.back svg { transform: scaleX(-1); }
@keyframes swimBack { from { transform: translateX(calc(100vw + 80px)); } to { transform: translateX(-80px); } }
.sea .reef { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; }

/* ---- 顶部导航 ---- */
.snav { position: sticky; top: 12px; z-index: 20; display: flex; width: max-content; max-width: calc(100vw - 20px); margin: 12px 22px 0 auto; gap: 2px; align-items: center; padding: 5px 7px; border-radius: 99px; background: rgba(250,244,226,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1.5px solid var(--line); box-shadow: 0 8px 24px rgba(10,40,60,.14); font-size: 14px; }
.snav a { text-decoration: none; padding: 6px 12px; border-radius: 99px; white-space: nowrap; }
.snav a:hover { background: var(--soft); }
.snav a.on { background: var(--ink); color: #fff; }
.snav .brand { font-family: var(--title); font-weight: 700; font-size: 17px; letter-spacing: .01em; display: flex; align-items: center; gap: 6px; }
.snav .brand svg { width: 20px; height: 20px; }
.snav .lang { color: var(--sub); }

/* ---- 版面 ---- */
.wrap { width: min(1040px, calc(100vw - 32px)); margin: 0 auto; }
.pagehead { text-align: center; padding: 46px 0 26px; }
.kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; background: rgba(250,244,226,.7); color: var(--ink); border: 1.5px solid var(--line); }
h1, h2, h3, .title { font-family: var(--title); font-weight: 700; letter-spacing: .005em; }
.pagehead h1 { margin: 14px 0 8px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; color: var(--head); text-shadow: 0 3px 0 var(--headShadow); }
.pagehead p { margin: 0 auto; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--head); opacity: .88; }
.panel { background: var(--paper); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 2px solid var(--line); border-radius: 26px; box-shadow: 0 16px 40px rgba(10,40,60,.16); padding: 26px 28px; }
.panel + .panel { margin-top: 18px; }
.grid2 > .panel, .grid3 > .panel { margin-top: 0; }
.panel h2 { margin: 0 0 6px; font-size: 24px; }
.panel h3 { margin: 18px 0 6px; font-size: 18px; }
.panel p, .panel li { font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.panel .lead { color: var(--sub); margin-top: 0; }
.muted { color: var(--sub); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---- 按钮 ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-family: var(--title); font-weight: 700; font-size: 17px; letter-spacing: .01em; text-decoration: none; border: 0; cursor: pointer; padding: 12px 24px; border-radius: 99px; color: #3a1d06; background: linear-gradient(180deg, #ffe2a6, #f3a868); box-shadow: 0 4px 0 #c8763a, 0 10px 22px rgba(200,118,58,.28); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #c8763a, 0 14px 26px rgba(200,118,58,.32); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #c8763a; }
.btn.big { font-size: 22px; padding: 16px 40px; }
.btn.ghost { color: var(--ink); background: rgba(255,255,255,.6); box-shadow: 0 3px 0 rgba(43,95,122,.25); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: #fff; }

/* ---- 档位 ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; color: #fff; background: var(--c); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.t0 { --c: var(--c0); } .t1 { --c: var(--c1); } .t2 { --c: var(--c2); } .t3 { --c: var(--c3); } .t4 { --c: var(--c4); }

/* ---- 页脚 ---- */
.foot { margin-top: 70px; padding: 34px 0 40px; color: rgba(255,255,255,.88); font-size: 14px; }
.foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.foot .brand { font-family: var(--title); font-size: 26px; font-weight: 700; color: #fff; }
.foot p { margin: 6px 0 0; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 320px; }
.foot h4 { margin: 4px 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.foot a { display: block; text-decoration: none; padding: 3px 0; color: rgba(255,255,255,.9); } .foot a:hover { color: #ffd38a; }
.foot .copy { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; color: rgba(255,255,255,.55); font-size: 12px; }
.footband { position: relative; background: linear-gradient(180deg, rgba(12,30,54,0), rgba(12,30,54,.9) 46px); }

/* ---- 问答折叠 ---- */
details.qa { border-bottom: 1.5px dashed var(--line); padding: 4px 0; }
details.qa summary { cursor: pointer; list-style: none; padding: 12px 30px 12px 0; position: relative; font-family: var(--title); font-weight: 600; font-size: 17px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: '+'; position: absolute; right: 4px; top: 8px; font-size: 22px; color: var(--sub); transition: transform .2s; }
details.qa[open] summary::after { transform: rotate(45deg); }
details.qa p { margin: 0 0 14px; }

@media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } .foot .wrap { grid-template-columns: 1fr 1fr; } .foot .wrap > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .snav { font-size: 13px; top: 8px; margin: 8px auto 0; } .snav a { padding: 5px 8px; } .snav .hide-sm { display: none; } .panel { padding: 20px 18px; border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
[hidden] { display: none !important; }
/* 大屏整体放大：内容按 1440 宽设计，2K/4K 屏上同比例放大，不显得小 */
@media (min-width: 1900px) { body { zoom: 1.2; } }
@media (min-width: 2300px) { body { zoom: 1.4; } }
@media (min-width: 3000px) { body { zoom: 1.8; } }