/* 旧页面用的「皮肤」：只带字体、颜色变量、页头装饰（天幕 / 红焰 / 祥云 / 金边城堡）和几个 w- 开头的通用件。
   不碰页面自己的布局和类名，所以可以直接叠在旧页面上。新页面用 site.css。 */
@font-face { font-family: "WoR Serif"; font-weight: 600 900; font-style: normal; font-display: swap; src: url(fonts/wor-serif-black.woff2) format("woff2"); }
:root {
  --w-night: #0a1028; --w-navy: #121b40;
  --w-gold: #d4a64a; --w-gold-hi: #f6d27a; --w-ink: #f1e6c8; --w-ink-2: #c2b593; --w-ink-3: #8d8670;
  --w-gold-text: linear-gradient(180deg, #fffbee 0%, #fde7a6 28%, #f1c766 54%, #d49f40 76%, #f8dc8e 100%);
  --w-gold-bright: linear-gradient(180deg, #fffdf4 0%, #fff0c2 32%, #fad57e 62%, #eab44f 100%);
  --w-panel-1: #3d2f21; --w-panel-2: #1d150e; --w-line: rgba(236, 196, 116, .72); --w-line-soft: rgba(212, 166, 74, .22); --w-hi: rgba(255, 222, 170, .2);
  --w-serif: "WoR Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "Microsoft YaHei", serif;
}
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky-rays { 
  position: absolute; left: 72%; top: -10%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 228, 160, .16) 0deg 1.6deg, rgba(255, 228, 160, 0) 1.6deg 7deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 16%, transparent 38%);
  mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 16%, transparent 38%);
  animation: rays 30s ease-in-out infinite alternate;
}
@keyframes rays { from { transform: rotate(-4deg); opacity: .6; } to { transform: rotate(4deg); opacity: 1; } }
.sky-sun { 
  position: absolute; left: 72%; top: -10%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 214, .75) 0%, rgba(255, 214, 130, .3) 30%, rgba(255, 200, 110, 0) 100%);
  animation: sun 7s ease-in-out infinite alternate;
}
.sky-fire { 
  position: absolute; left: -15%; bottom: -30%; width: 70%; height: 90%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 120, 40, .55), rgba(190, 30, 20, .3) 45%, rgba(120, 10, 10, 0) 100%);
  filter: blur(10px); animation: fire 5s ease-in-out infinite alternate;
}
@keyframes sun { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }
@keyframes fire { from { transform: scale(1) translateY(0); opacity: .75; } to { transform: scale(1.08) translateY(-3%); opacity: 1; } }
.fog { 
  position: absolute; left: 0; bottom: 0; width: calc(100% + 1600px); height: 220px;
  background: radial-gradient(40% 60% at 25% 100%, rgba(120, 140, 200, .16), transparent 70%) 0 0 / 1600px 100% repeat-x,
              radial-gradient(35% 50% at 75% 100%, rgba(255, 150, 90, .1), transparent 70%) 0 0 / 1600px 100% repeat-x;
  animation: drift 90s linear infinite;
}
@keyframes drift { to { transform: translateX(-1600px); } }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }
.castles { position: absolute; left: 0; right: 0; bottom: -1px; height: 260px; background: url(art/castle-gold.svg) 50% 100% / 1600px 260px repeat-x; filter: drop-shadow(0 -8px 22px rgba(255, 150, 60, .16)); }
.castles::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(0deg, var(--w-night), transparent); }
.orn { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.orn-flame { left: -60px; bottom: -14px; width: min(620px, 46vw); filter: drop-shadow(0 0 24px rgba(255, 90, 30, .35)); animation: flame-sway 5s ease-in-out infinite alternate; transform-origin: 30% 100%; }
.orn-cloud { right: -70px; bottom: -18px; width: min(640px, 46vw); filter: drop-shadow(0 -6px 20px rgba(0, 0, 0, .5)); animation: cloud-drift 9s ease-in-out infinite alternate; }
.sky .orn-flame { width: min(440px, 36vw); bottom: -6px; opacity: .9; }
.sky .orn-cloud { width: min(460px, 36vw); bottom: -10px; opacity: .95; }
@keyframes flame-sway { from { transform: skewX(-2deg) scaleY(.97); } to { transform: skewX(2deg) scaleY(1.03); } }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(-18px); } }
.divider { display: block; width: min(320px, 80%); height: 30px; margin: 14px 0; background: url(art/divider.svg) center / 100% 100% no-repeat; }
/* 页头色带：放 <div class="sky" data-edge="clouds" data-orn> 进去，site-nav.js 会自动填 */
.w-band { position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(60% 70% at 0% 100%, rgba(200, 50, 20, .55), transparent 70%), radial-gradient(50% 60% at 100% 0%, rgba(255, 220, 150, .28), transparent 70%), linear-gradient(180deg, #070b1e 0%, #111c48 55%, #1b1840 100%); }
.w-band > :not(.sky) { position: relative; z-index: 2; }
/* 金字标题 */
.w-title { font-family: var(--w-serif); font-weight: 900; background: var(--w-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #3a2200) drop-shadow(0 0 16px rgba(255, 190, 90, .35)) drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
/* 暗铜面板 */
.w-panel { background: url(art/tip.svg) 0 50% / 12px 12px no-repeat, url(art/tip.svg) 100% 50% / 12px 12px no-repeat, url(art/swirl-gold.svg) 0 0 / 120px, linear-gradient(180deg, var(--w-panel-1), var(--w-panel-2)) !important;
  border: 1px solid var(--w-line) !important; border-radius: 3px !important;
  box-shadow: inset 0 1px 0 var(--w-hi), inset 0 0 0 4px rgba(0, 0, 0, .28), inset 0 0 0 5px var(--w-line-soft), 0 0 0 1px rgba(0, 0, 0, .55), 0 18px 34px -16px rgba(0, 0, 0, .95) !important; }
/* 游戏「前往」金按钮 */
.w-btn-gold { border: 10px solid transparent !important; border-image: url(art/btn-frame.svg) 10 / 10px / 0 stretch !important; border-radius: 0 !important;
  background: linear-gradient(180deg, #fbe7a8 0%, #e6bb62 46%, #cf9a3d 54%, #e0b04f 100%) padding-box !important; color: #2a1600 !important; text-shadow: 0 1px 0 rgba(255, 244, 210, .7) !important;
  box-shadow: none !important; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
.w-btn-gold:hover { filter: brightness(1.1) drop-shadow(0 0 14px rgba(255, 196, 96, .55)); }
.w-btn-dark { background: rgba(6, 9, 20, .6) !important; border: 1px solid rgba(236, 196, 116, .6) !important; border-radius: 3px !important; color: var(--w-ink) !important; }
.w-btn-dark:hover { border-color: var(--w-gold-hi) !important; color: var(--w-gold-hi) !important; }
@media (max-width: 760px) { .castles { height: 163px; background-size: 1000px 163px; } }
@media (prefers-reduced-motion: reduce) { .sky *, .orn { animation: none !important; } }