.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-stars { position: absolute; top: 0; left: 0; width: 100%; height: 60%; }
.bg-castle { position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; }

.layout { max-width: 1080px; margin: 0 auto; display: flex; gap: 16px; padding: 24px 16px 90px; align-items: flex-start; position: relative; z-index: 1; }
.sidebar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.parchment {
  position: relative; flex: 1; min-width: 0; padding: 22px 24px; min-height: 560px; border-width: 4px;
  background:
    radial-gradient(ellipse at 30% 16%, rgba(176,138,82,0.10), transparent 55%),
    radial-gradient(ellipse at 76% 84%, rgba(150,110,60,0.13), transparent 50%),
    radial-gradient(ellipse at 50% 48%, transparent 52%, rgba(110,76,34,0.20)),
    var(--parch);
  box-shadow: inset 0 0 0 2px var(--parch-inset), inset 0 0 60px rgba(120,82,38,0.22), 0 6px 18px rgba(20,15,40,0.35);
}
.parchment::before {
  content: ""; position: absolute; inset: 7px; border-radius: 5px; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, #6b4a22 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 100% 0, #6b4a22 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 0 100%, #6b4a22 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 100% 100%, #6b4a22 0 3.5px, transparent 4.5px);
  background-repeat: no-repeat;
}

.brand { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 2px; }
.brand-wiz { width: 34px; height: 38px; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: #ffe9a8; text-shadow: 0 2px 3px rgba(0,0,0,0.5); }

.play-now { width: 100%; font-family: var(--font-display); font-weight: 900; font-size: 17px; color: #fff; background: linear-gradient(var(--green-2), var(--green)); border: 2px solid var(--green-edge); border-radius: 8px; box-shadow: 0 3px 0 var(--green-edge); cursor: pointer; padding: 11px; }
.play-now:active { transform: translateY(2px); box-shadow: none; }

.reserve-box { padding: 10px; }
.reserve-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-2); font-weight: 700; margin-bottom: 5px; }
.reserve-amt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.reserve-amt b { font-size: 15px; }

.side-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.side-link { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); background: var(--parch-3); border: 2px solid var(--parch-edge); border-radius: 6px; padding: 9px 12px; cursor: pointer; }
.side-link:hover { background: var(--parch-2); }
.side-link.is-active { background: linear-gradient(#f0d28a, #d9b25e); border-color: #8a6a2e; color: #4a3318; }

.page[hidden] { display: none; }
.page-title { font-size: 26px; text-align: center; margin-bottom: 16px; }
.sub-title { font-size: 18px; margin: 16px 0 10px; }

.hero-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-bottom: 16px; }
.wiz { width: 56px; height: 88px; flex-shrink: 0; }
.hero-title-block { text-align: center; }
.hero-title { font-size: 30px; letter-spacing: 1px; }
.hero-sub { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; }

.banner { position: relative; border-radius: 8px; overflow: hidden; border: 2px solid var(--parch-edge); height: 130px; background: linear-gradient(120deg, #2e4f96, #6a4f9e 58%, #8a5fa0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.banner-title { font-family: var(--font-display); font-weight: 900; color: #ffe06a; font-size: 26px; text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.dots { display: flex; justify-content: center; gap: 6px; margin: 9px 0 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #b18a4f; }
.dot.is-on { background: var(--gold); }

.circ-row { display: flex; justify-content: center; gap: 26px; margin-bottom: 18px; flex-wrap: wrap; }
.circ { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; font-family: inherit; }
.circ-icon { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f3d489, #cba24c); border: 3px solid #8a6a2e; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0,0,0,0.25); }
.circ-icon svg { width: 30px; height: 30px; }
.circ-label { background: linear-gradient(var(--green-2), var(--green)); border: 2px solid var(--green-edge); border-radius: 6px; color: #fff; font-weight: 900; font-size: 11px; padding: 4px 10px; font-family: var(--font-display); }
.circ:active .circ-icon { transform: translateY(2px); box-shadow: none; }

.news-row { display: flex; gap: 12px; flex-wrap: wrap; }
.scroll-card { flex: 1; min-width: 200px; background: var(--parch-2); border: 2px solid var(--parch-edge); border-radius: 6px; overflow: hidden; }
.scroll-head { background: var(--header-tan); color: #4a3318; font-family: var(--font-display); font-weight: 700; font-size: 13px; padding: 6px 10px; text-align: center; }
.scroll-body { padding: 10px; font-size: 13px; line-height: 1.5; color: var(--ink); }

.vault-big { background: var(--parch-2); border: 2px solid var(--parch-edge); border-radius: 8px; padding: 16px; text-align: center; margin-bottom: 14px; }
.vault-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-2); font-weight: 700; }
.vault-num { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 900; font-size: 38px; color: var(--title); margin: 6px 0; }
.vault-sub { color: var(--ink-2); font-size: 13px; max-width: 460px; margin: 0 auto; }
.vault-write { color: var(--ink); font-size: 14px; line-height: 1.6; }

.inv-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.inv-stat { flex: 1; min-width: 130px; background: var(--parch-2); border: 2px solid var(--parch-edge); border-radius: 6px; padding: 9px 11px; }
.inv-stat .label { font-size: 11px; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.inv-stat b { display: block; font-size: 18px; margin-top: 3px; color: var(--title); }
.inv-list { display: flex; flex-direction: column; gap: 7px; }
.inv-item { display: flex; align-items: center; gap: 10px; background: var(--parch-2); border: 2px solid var(--parch-edge); border-radius: 6px; padding: 8px 11px; }
.inv-name { font-weight: 700; flex: 1; }
.inv-qty { color: var(--ink); font-weight: 900; }
.inv-rate { color: var(--ink-2); font-size: 13px; }
.empty { color: var(--ink-dim); }

.steps { display: flex; gap: 12px; flex-wrap: wrap; }
.step { flex: 1; min-width: 200px; background: var(--parch-2); border: 2px solid var(--parch-edge); border-radius: 6px; padding: 12px; }
.step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #5a4500; font-family: var(--font-display); font-weight: 900; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.step p { margin: 0; font-size: 14px; line-height: 1.5; }

.modal { position: fixed; inset: 0; background: rgba(20,15,30,0.62); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal[hidden] { display: none; }
.modal-card { max-width: 360px; text-align: center; padding: 18px; }
.modal-card h3 { margin-bottom: 8px; font-size: 20px; }
.modal-card p { color: var(--ink-2); margin: 0 0 16px; font-size: 14px; }

@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
}

/* ---- atmosphere + micro-life ---- */
.moon { position: absolute; top: 38px; right: 9%; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fdf6d8, #e7d99c); box-shadow: 0 0 38px 10px rgba(245,235,180,0.32); }
.cloud { position: absolute; border-radius: 50%; background: rgba(222,205,232,0.16); filter: blur(7px); }
.cloud-1 { width: 200px; height: 48px; top: 20%; left: -220px; animation: drift 72s linear infinite; }
.cloud-2 { width: 280px; height: 60px; top: 36%; left: -320px; animation: drift 96s linear infinite; animation-delay: -34s; }
.cloud-3 { width: 150px; height: 40px; top: 12%; left: -180px; animation: drift 60s linear infinite; animation-delay: -48s; }
@keyframes drift { to { transform: translateX(calc(100vw + 340px)); } }
.bg-stars circle { animation: twinkle 4s ease-in-out infinite; }
.bg-stars circle:nth-child(3n) { animation-delay: 1.3s; }
.bg-stars circle:nth-child(3n+1) { animation-delay: 2.6s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.win { fill: #ffd86a; animation: winglow 3.6s ease-in-out infinite; }
.win:nth-child(odd) { animation-delay: 1.8s; }
@keyframes winglow { 0%, 100% { opacity: 0.92; } 50% { opacity: 0.38; } }
.spark { position: absolute; width: 4px; height: 4px; background: #fff6c8; border-radius: 50%; box-shadow: 0 0 6px 2px rgba(255,240,180,0.7); opacity: 0; }
.spark-1 { left: 22%; bottom: 16%; animation: rise 7s ease-in infinite; }
.spark-2 { left: 58%; bottom: 12%; animation: rise 9s ease-in infinite; animation-delay: -4s; }
.spark-3 { left: 80%; bottom: 20%; animation: rise 8s ease-in infinite; animation-delay: -6s; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateY(-130px); } }
.wiz { animation: bob 3.4s ease-in-out infinite; }
.hero-row .wiz:last-of-type { animation-delay: -1.7s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
.hero-title { letter-spacing: 2px; }
.page-title { letter-spacing: 1px; }
.banner-title { letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) { .moon, .cloud, .bg-stars circle, .win, .spark, .wiz { animation: none !important; } }

.x-btn { display: inline-flex; align-items: center; gap: 7px; background: #15141a; color: #fff; border: 2px solid var(--gold-edge); border-radius: 8px; padding: 7px 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; text-decoration: none; box-shadow: 0 3px 0 #0c0b10; }
.x-btn:hover { background: #26242e; }
.x-btn:active { transform: translateY(2px); box-shadow: none; }
.x-btn svg { width: 16px; height: 16px; fill: currentColor; }
.sidebar .x-btn { width: 100%; justify-content: center; box-sizing: border-box; }
.site-footer { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 16px 44px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #efe2b0; font-family: var(--font-display); font-weight: 700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.55); flex-wrap: wrap; }