/* The public pages of silveroath.app (Ray, 2026-10-27: 補做遊戲首頁、隱私權頁、服務條款頁面): the home page and the two
   policies, outside the development access gate, in the game's own dark silver-and-gold look. No fonts from elsewhere;
   the only script is the analytics consent (analytics.mjs). */
@font-face{font-family:GameSerif;src:local("Songti TC"),local("Noto Serif TC"),local("PMingLiU");font-display:swap}
:root{--ivory:#eee6d6;--muted:#a9adab;--gold:#c8ac76;--gold-2:#e2cc9a;--line:#9d8b6440;--ink:#0b1117;--serif:GameSerif,"Songti TC","Noto Serif TC",serif;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--ivory)}
body{margin:0;min-height:100svh;font:15px/1.8 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--gold-2);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
img{max-width:100%;display:block}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(16px,4vw);height:64px;background:linear-gradient(#070c12f2,#070c12c8);border-bottom:1px solid #b6a2792b;backdrop-filter:blur(6px)}
.wordmark{display:flex;align-items:center;gap:10px;font:21px var(--serif);letter-spacing:3px;color:var(--ivory);text-decoration:none}
.wordmark span{color:var(--gold);font-size:24px}
.wordmark small{font:9px -apple-system,sans-serif;letter-spacing:2.4px;color:#9fa5a7}
.top nav{display:flex;gap:20px;font-size:13px;letter-spacing:1px}
.top nav a{color:#c9c1ae;text-decoration:none}.top nav a:hover,.top nav a[aria-current=page]{color:var(--gold-2)}

.hero{position:relative;min-height:min(86svh,760px);display:flex;align-items:center;padding:56px max(16px,6vw);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url("img/silver-hall.jpg") center/cover no-repeat;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#060b12e6,#11192330 62%,#060b1255),linear-gradient(0deg,var(--ink),transparent 30%);z-index:-1}
.hero-copy{max-width:470px}
.eyebrow{margin:0;color:#c3ad7f;font-size:11px;letter-spacing:4px}
.hero h1{margin:8px 0 6px;font-weight:400}
.hero .h1-main{display:block;font:clamp(64px,10vw,112px)/1.05 var(--serif);letter-spacing:12px;background:linear-gradient(#fffae8,#c4ae83);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 3px 15px #0008}
.hero .h1-sub{display:block;margin:2px 0 4px;font:13px/1.6 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;letter-spacing:2.4px;color:#c3ad7f}
.tagline{margin:0 0 18px;font:21px/1.6 var(--serif);letter-spacing:4px;color:#e7ddc9}
.hero p.lead{margin:0 0 26px;color:#c3c7c6;letter-spacing:1px}
.play{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-width:260px;min-height:54px;padding:10px 28px;background:linear-gradient(145deg,#716344,#b09863 52%,#756445);border:1px solid #ddc18c;color:#fff4d5;font-size:17px;font-weight:600;letter-spacing:3px;text-decoration:none;text-shadow:0 1px 2px #0009;box-shadow:inset 0 0 0 3px #171a1d44,0 4px 18px #0006}
.play:hover{filter:brightness(1.12)}
.note{margin:12px 0 0;font-size:12px;color:var(--muted);letter-spacing:1px}

section.band{padding:64px max(16px,6vw);max-width:1180px;margin:0 auto}
.band h2{margin:0 0 6px;font:28px var(--serif);letter-spacing:6px;color:var(--ivory)}
.band .sub{margin:0 0 30px;color:var(--muted);letter-spacing:1px}
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.class{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);background:linear-gradient(160deg,#172028f0,#0c141bf0);box-shadow:inset 0 0 0 4px #0b121599}
.class img{height:300px;width:100%;object-fit:contain;object-position:bottom;padding-top:14px;background:radial-gradient(ellipse at 50% 85%,#c8ac7626,transparent 65%)}
.class div{padding:14px 16px 18px;border-top:1px solid var(--line)}
.class h3{margin:0;font:22px var(--serif);letter-spacing:5px}
.class h3 small{margin-left:8px;font:12px -apple-system,sans-serif;letter-spacing:1px;color:var(--gold)}
.class b{display:block;margin:4px 0 6px;font:14px var(--serif);color:#e2d5b8;letter-spacing:2px;font-weight:400}
.class p{margin:0;font-size:13px;line-height:1.75;color:#b7bcbb}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{padding:20px 22px;border:1px solid var(--line);background:#0e161dd9}
.feature h3{margin:0 0 6px;font:18px var(--serif);letter-spacing:3px;color:var(--gold-2)}
.feature p{margin:0;font-size:13.5px;color:#b9bebd}

.band .intro{max-width:860px;margin:0 0 22px;color:#c9ccca;line-height:1.95}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.facts div{padding:12px 16px;border:1px solid var(--line);background:#0e161dd9}
.facts dt{font-size:12px;letter-spacing:2px;color:var(--gold)}
.facts dd{margin:2px 0 0;color:var(--ivory)}
.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.regions li{padding:18px 20px;border:1px solid var(--line);background:linear-gradient(160deg,#172028f0,#0c141bf0)}
.regions h3{margin:0 0 6px;font:19px var(--serif);letter-spacing:3px;color:var(--gold-2)}
.regions h3 small{display:block;margin-top:2px;font:12px -apple-system,sans-serif;letter-spacing:1px;color:var(--muted)}
.regions p{margin:0;font-size:13.5px;color:#b9bebd}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 28px;padding:0;list-style:none}
.steps li{counter-increment:step;position:relative;padding:18px 20px 18px 62px;border:1px solid var(--line);background:#0e161dd9;font-size:13.5px;color:#b9bebd}
.steps li::before{content:counter(step);position:absolute;left:18px;top:16px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold-2);font:16px var(--serif)}
.steps b{display:block;margin-bottom:4px;font:17px var(--serif);letter-spacing:2px;color:var(--ivory);font-weight:400}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-bottom:24px}
.faq div{padding:16px 20px;border:1px solid var(--line);background:#0e161dd9}
.faq h3{margin:0 0 6px;font:17px var(--serif);letter-spacing:2px;color:var(--gold-2)}
.faq p{margin:0;font-size:13.5px;color:#c3c7c6}
.consent-switch{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.consent-switch button{min-height:40px;padding:8px 18px;border:1px solid #8f8064;background:#172028;color:var(--ivory);font:600 14px -apple-system,"PingFang TC",sans-serif;letter-spacing:1px;cursor:pointer}
.consent-switch button[aria-pressed=true]{background:linear-gradient(145deg,#716344,#b09863 52%,#756445);border-color:#ddc18c;color:#fff4d5}
.consent-switch button:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

.doc{max-width:820px;margin:0 auto;padding:44px max(16px,5vw) 72px}
.doc h1{margin:0 0 4px;font:34px var(--serif);letter-spacing:6px}
.doc .meta{margin:0 0 28px;color:var(--muted);font-size:13px}
.doc h2[id],.band[id]{scroll-margin-top:76px}
.doc h2{margin:34px 0 8px;padding-top:14px;border-top:1px solid var(--line);font:20px var(--serif);letter-spacing:3px;color:var(--gold-2)}
.doc p,.doc li{color:#d3d0c7}
.doc ul{padding-left:1.3em}.doc li{margin:4px 0}
.doc strong{color:var(--ivory)}
.doc .box{margin:18px 0;padding:14px 18px;border:1px solid var(--line);background:#0e161dd9;font-size:14px}

footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:22px max(16px,4vw);border-top:1px solid #b6a27926;background:#080e14;color:#a6aaa6;font-size:12px;letter-spacing:1px}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{color:#c1ae85;text-decoration:none}footer a:hover{text-decoration:underline}

/* the English pages (site/en/): Latin needs a smaller title and less letter-spacing than 銀誓 */
html[lang=en] .hero-copy{max-width:540px}
html[lang=en] .hero .h1-main{font-size:clamp(54px,7.6vw,92px);letter-spacing:4px}
html[lang=en] .tagline{letter-spacing:1px}html[lang=en] .band h2,html[lang=en] .doc h1{letter-spacing:2px}html[lang=en] .doc h2{letter-spacing:1px}

@media (max-width:900px){.classes{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:1fr}.class img{height:240px}.regions,.steps{grid-template-columns:1fr 1fr}.faq{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.top nav{gap:12px;font-size:12px}.wordmark small{display:none}.hero{min-height:auto;padding:48px 16px}.hero h1{letter-spacing:8px}.play{width:100%}.classes{grid-template-columns:1fr 1fr;gap:10px}.class img{height:190px}.class div{padding:10px 12px 14px}.class h3{font-size:19px;letter-spacing:3px}.class p{font-size:12.5px}.doc h1{font-size:28px}.regions,.steps{grid-template-columns:1fr}.top nav a[href="#faq"]{display:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}