@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

:root { --ink:#08090b; --panel:#111418; --gold:#d5a844; --pale:#eee1bf; --line:#4a3820; --muted:#a59d8a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#070809; color:#eee9da; font-family:"Trebuchet MS", "Lucida Sans Unicode", sans-serif; font-size:14px; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a:focus-visible,button:focus-visible { outline:1px solid #e7c565; outline-offset:3px; }
.site-frame { width:min(1536px,100%); margin:auto; background:#080a0c; overflow:hidden; }
.topbar { height:80px; display:flex; align-items:center; padding:0 34px 0 44px; background:linear-gradient(#0b0c0e,#08090a); border-top:1px solid #554221; border-bottom:1px solid #3c2c19; position:relative; z-index:5; box-shadow:0 3px 14px #000; }
.mobile-menu-button,.mobile-nav-drawer { display:none; }
.topbar:before,.topbar:after { content:""; position:absolute; inset:4px 8px; border:1px solid #2c2417; pointer-events:none; }.topbar:after { inset:7px 12px; border-color:#171611; }
.brand { width:246px; display:flex; align-items:center; gap:9px; position:relative; z-index:1; }.brand-sun { width:70px; height:56px; display:grid; place-items:center; color:#f5d16b; font-family:Georgia,serif; font-size:48px; font-weight:700; text-shadow:0 0 8px #9d6a17; border:1px solid #9c711f; clip-path:polygon(50% 0,62% 18%,82% 9%,79% 31%,100% 38%,80% 52%,88% 77%,64% 69%,50% 100%,36% 69%,12% 77%,20% 52%,0 38%,21% 31%,18% 9%,38% 18%); }.brand-copy { display:flex; flex-direction:column; line-height:1; }.brand-copy strong { font-family:Cinzel, Georgia, serif; font-size:22px; letter-spacing:2px; color:#e6bd55; }.brand-copy em { font-family:Cinzel, Georgia, serif; font-size:9px; letter-spacing:2px; font-style:normal; color:#a58d5a; margin-top:6px; }
.main-nav { height:100%; display:flex; align-items:center; gap:38px; flex:1; position:relative; z-index:1; }.main-nav a,.account,.topbar-more { font-family:Cinzel,Georgia,serif; font-size:12px; letter-spacing:1px; color:#ddd5c0; white-space:nowrap; transition:color .18s ease; }.main-nav a:hover,.account:hover,.topbar-more:hover { color:#e4b949; }.chevron { color:#b28a35; font-size:15px; padding-left:4px; }.topbar-more { position:relative; flex:0 0 auto; }.topbar-more summary { cursor:pointer; list-style:none; }.topbar-more summary::-webkit-details-marker { display:none; }.topbar-more summary span { color:#b28a35; padding-left:4px; }.topbar-more-menu { position:absolute; top:calc(100% + 13px); right:-18px; z-index:8; display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:0 20px; min-width:560px; padding:16px 18px; border:1px solid #6b4c20; background:linear-gradient(145deg,#1b1711,#0b0d0f); box-shadow:0 12px 24px #000, inset 0 0 0 2px #0b0b0a; }.topbar-more-menu:before { content:""; position:absolute; top:-6px; right:22px; width:10px; height:10px; border-left:1px solid #6b4c20; border-top:1px solid #6b4c20; background:#17130e; transform:rotate(45deg); }.topbar-more-group { display:flex; flex-direction:column; }.topbar-more-heading { display:block; margin-bottom:8px; color:#9c7a36; font:9px Cinzel,Georgia,serif; letter-spacing:1.3px; text-transform:uppercase; }.topbar-more-menu a { display:block; padding:7px 0; color:#c5b58d; font:9px Cinzel,Georgia,serif; letter-spacing:1px; }.topbar-more-menu a:hover { color:#fff0bd; }
@media (max-width:1100px) { .topbar-more-menu { grid-template-columns:1fr 1fr; min-width:min(420px,calc(100vw - 40px)); right:-40px; } }
@media (max-width:520px) { .topbar-more-menu { grid-template-columns:1fr; min-width:min(280px,calc(100vw - 40px)); } }.top-actions { display:flex; align-items:center; gap:24px; position:relative; z-index:1; }.icon-button,.account { background:transparent; border:0; color:#ddd5c0; cursor:pointer; }.icon-button { font-size:34px; line-height:1; transform:rotate(-15deg); color:#e7c565; }.account { display:flex; align-items:center; gap:8px; }.account-icon { color:#e4b949; font-size:24px; }.play-button,.ornate-button,.small-button { display:inline-flex; align-items:center; justify-content:center; border:1px solid #a97215; color:#f4dc94; background:linear-gradient(#8d1b0f,#560d09 74%,#3b0906); box-shadow:inset 0 0 0 2px #4f1a0c, inset 0 0 0 3px #b07a22, 0 2px 8px #000; font-family:Cinzel,Georgia,serif; letter-spacing:1px; font-weight:600; }.play-button { width:178px; height:54px; font-size:14px; }.play-button:hover,.ornate-button:hover { filter:brightness(1.25); }
.hero { height:460px; position:relative; overflow:hidden; border-bottom:1px solid #4a351d; }.hero-art { position:absolute; inset:0; background-image:url('assets/hero-castle-reference.png'); background-position:center; background-size:cover; filter:saturate(.86) contrast(1.08); }.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,10,11,.85) 0%,rgba(8,10,11,.56) 32%,rgba(8,10,11,.03) 65%),linear-gradient(0deg,rgba(3,5,6,.7),transparent 34%); }.hero-content { position:relative; z-index:1; padding:102px 0 0 94px; }.hero-kicker { margin:0 0 14px; color:#ddae45; font:600 13px Cinzel,Georgia,serif; letter-spacing:2px; }.hero h1 { margin:0; color:#f3ead3; font:600 50px/1.06 "Libre Baskerville",Georgia,serif; letter-spacing:1px; text-shadow:1px 3px 4px #000; }.hero h1 span { font-size:57px; }.hero-description { margin:23px 0 26px; color:#e7dfca; font-size:16px; line-height:1.65; text-shadow:1px 2px 4px #000; }.ornate-button { min-width:287px; height:57px; font-size:14px; }.learn-link { display:block; margin:21px 0 0 57px; color:#eee5cf; font:11px Cinzel,Georgia,serif; letter-spacing:1px; }.learn-link span { font-size:19px; color:#d8aa3e; padding-left:5px; }
.content-grid { display:grid; grid-template-columns:1.03fr 1.94fr 1.03fr; gap:9px; padding:0 64px 26px; background:linear-gradient(#08090b,#0c0e10); }.panel { border:1px solid #3b3226; background:#111519; position:relative; box-shadow:0 2px 9px #000; }.news-panel { min-height:353px; padding:22px 23px 12px; }.panel-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid #322b21; }.panel-heading h2 { margin:0; color:#d6a943; font:600 13px Cinzel,Georgia,serif; letter-spacing:1px; }.panel-heading a { color:#d5b565; font:10px Cinzel,Georgia,serif; }.panel-heading a span { font-size:18px; padding-left:5px; }.news-row { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid #272721; }.news-row:last-child { border-bottom:0; }.news-row img { width:124px; height:72px; object-fit:cover; border:1px solid #60451d; }.news-row h3 { margin:0 0 9px; color:#f1e9d7; font:13px/1.25 "Trebuchet MS",sans-serif; }.news-row time { color:#9f998b; font-size:10px; letter-spacing:.5px; }.feature { min-height:353px; overflow:hidden; }.feature>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }.feature-vignette { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,7,9,.95),rgba(4,7,9,0) 72%),linear-gradient(90deg,rgba(3,6,8,.75),transparent 60%); }.feature-copy { position:absolute; inset:auto 31px 22px; }.featured-tag { display:inline-block; padding:6px 12px; background:#0d4560; color:#83c9df; font:10px Cinzel,Georgia,serif; letter-spacing:1px; border:1px solid #226080; }.feature h2 { margin:11px 0 8px; color:#f3e8cc; font:26px/1.16 "Libre Baskerville",Georgia,serif; text-shadow:1px 2px 3px #000; }.feature p { margin:0 0 14px; color:#c4bfae; font-size:12px; }.small-button { height:35px; padding:0 23px; font-size:10px; background:linear-gradient(#183e51,#0e2530); border-color:#99822e; box-shadow:inset 0 0 0 1px #21647c; }.quick-links { min-height:353px; }.quick-links a { min-height:88px; display:flex; align-items:center; gap:14px; padding:0 22px; border-bottom:1px solid #3b3326; }.quick-links a:last-child { border-bottom:0; }.quick-links a:hover strong { color:#f1c956; }.round-mark { width:43px; height:43px; display:grid; place-items:center; border:1px solid #8b681c; border-radius:50%; color:#e7bb4e; font:25px Georgia,serif; box-shadow:inset 0 0 0 3px #2c2112; flex:none; }.quick-links strong { display:block; color:#e1c36b; font:12px Cinzel,Georgia,serif; letter-spacing:1px; }.quick-links small { display:block; color:#9f998c; margin-top:6px; font-size:11px; }.quick-links b { margin-left:auto; color:#c09535; font:27px Georgia,serif; font-weight:normal; }
.realm-strip { padding:0 64px 17px; background:#08090b; }.strip-title { display:flex; align-items:center; gap:18px; justify-content:center; height:34px; color:#8e8170; font:11px Cinzel,Georgia,serif; letter-spacing:1px; border-top:1px solid #3a2c19; }.strip-title span { color:#9d711f; font-size:9px; }.realm-list { display:flex; justify-content:space-between; border-top:1px solid #18191a; padding-top:18px; }.realm-list a { display:flex; align-items:center; gap:11px; color:#a59e8f; font:11px Cinzel,Georgia,serif; letter-spacing:.4px; }.realm-list a:hover { color:#ead07b; }.realm-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font:19px Georgia,serif; }.sun,.gold { color:#d5a438; }.blue { color:#4a9bb9; }.red { color:#ab4d2c; }.green { color:#7c9a48; }.stone { color:#8a8b85; } footer { display:flex; justify-content:space-between; padding:19px 64px; border-top:1px solid #221b12; color:#696355; font:9px Cinzel,Georgia,serif; letter-spacing:1px; }
.search-drawer { position:fixed; top:80px; right:0; z-index:8; width:350px; padding:14px 22px; display:none; background:#111316; border:1px solid #836021; box-shadow:0 7px 15px #000; }.search-drawer.open { display:flex; }.search-drawer input { width:100%; padding:10px; background:#08090a; border:1px solid #60451d; color:#f4e8c3; outline:none; }.search-drawer button,.modal-close { background:none; border:0; color:#d7ae48; font-size:25px; cursor:pointer; }.modal-backdrop { display:none; place-items:center; position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.76); }.modal-backdrop.open { display:grid; }.play-modal { width:min(460px,calc(100% - 34px)); position:relative; text-align:center; padding:38px 45px 43px; background:linear-gradient(145deg,#171617,#090b0d); border:1px solid #a47628; box-shadow:inset 0 0 0 4px #21170d, inset 0 0 0 5px #68491b, 0 10px 30px #000; }.modal-close { position:absolute; top:9px; right:14px; }.modal-sigil { color:#e5ba51; font:55px Georgia,serif; }.play-modal h2 { color:#ead796; font:20px Cinzel,Georgia,serif; letter-spacing:1px; }.play-modal p { color:#b9b19e; line-height:1.6; margin:19px 0 25px; }.play-modal .ornate-button { min-width:220px; height:46px; }
@media (max-width:1100px) { .topbar { padding:0 20px; }.brand { width:220px; }.main-nav { gap:18px; }.top-actions { gap:10px; }.account { display:none; }.content-grid,.realm-strip { padding-left:24px; padding-right:24px; } }
@media (max-width:760px) { .topbar { height:68px; padding:0 14px; }.brand { width:auto; }.brand-sun { width:43px; height:40px; font-size:31px; }.brand-copy strong { font-size:15px; letter-spacing:2px; }.brand-copy em { font-size:7px; }.main-nav { display:none; }.top-actions { margin-left:auto; }.play-button { width:120px; height:42px; font-size:11px; }.hero { height:560px; }.hero-art { background-position:62% center; }.hero-content { padding:100px 23px 0; }.hero-kicker { font-size:10px; }.hero h1,.hero h1 span { font-size:35px; }.hero-description { font-size:13px; }.ornate-button { min-width:240px; }.content-grid { display:flex; flex-direction:column; padding:0 14px 20px; gap:12px; }.news-panel,.feature,.quick-links { min-height:0; }.feature { height:320px; order:-1; }.realm-strip { padding:0 14px 18px; }.realm-list { display:grid; grid-template-columns:1fr 1fr; gap:16px 8px; }.realm-list a { font-size:9px; }.realm-icon { width:28px; height:28px; font-size:15px; } footer { flex-direction:column; gap:9px; padding:18px 14px; } }

/* Authored chrome: the frame and states come from bitmap assets; CSS only composes them. */
.topbar { overflow:hidden; background:#100b08; }
.topbar:before,.topbar:after { display:none; }
.topbar-ornament { position:absolute; top:0; height:80px; pointer-events:none; background-repeat:no-repeat; background-size:auto 80px; z-index:0; }
.brand,.main-nav,.top-actions { z-index:1; }
.play-button,.ornate-button,.small-button { border:0; background-image:url('assets/chrome/button-primary-normal.webp'); background-size:100% 100%; box-shadow:0 2px 8px #000; }
.play-button:hover,.ornate-button:hover,.small-button:hover { background-image:url('assets/chrome/button-primary-hover.webp'); filter:none; }
.play-button:active,.ornate-button:active,.small-button:active { background-image:url('assets/chrome/button-primary-pressed.webp'); }
.panel { border:14px solid transparent; border-image-source:url('assets/chrome/panel-frame-9slice.webp'); border-image-slice:150 fill; border-image-width:14px; border-image-outset:0; border-image-repeat:stretch; background:url('assets/chrome/material-wood-dark.webp') repeat; }
.panel:before,.panel:after { display:none; }
.play-modal { border:18px solid transparent; border-image:url('assets/chrome/modal-frame.webp') 150 fill / 18px / 0 stretch; background:url('assets/chrome/material-wood-dark.webp') repeat; }
.panel-heading { border-bottom:0; background:url('assets/chrome/divider-ornate.webp') center bottom / 100% 20px no-repeat; }
.strip-title { border-top:0; background:url('assets/chrome/divider-ornate.webp') center / 100% 20px no-repeat; }
.topbar > .topbar-ornament { position:absolute; z-index:0; }
.topbar > .brand,.topbar > .main-nav,.topbar > .top-actions { position:relative; z-index:1; }
.topbar-ornament { height:64px; top:8px; background-size:auto 64px; }
.topbar-ornament-left { left:0; width:40px; background-image:url('assets/chrome/navbar-reference-left-cap.webp'); background-position:left center; }
.topbar-ornament-middle { left:40px; right:40px; background-image:url('assets/chrome/navbar-reference-middle.webp'); background-repeat:repeat-x; background-position:center; }
.topbar-ornament-right { right:0; width:40px; background-image:url('assets/chrome/navbar-reference-right-cap.webp'); background-position:right center; }
.content-grid { padding-top:0; }
.panel { border-image-slice:150; background:#111519; }

/* Material pass: layered grain, forged corners, and stitched/leather-like insets. */
.topbar {
  background: linear-gradient(180deg, #17130f 0%, #0b0c0e 18%, #08090a 82%, #17100a 100%), repeating-linear-gradient(96deg, rgba(193,129,44,.06) 0 1px, transparent 1px 8px);
  border-top-color: #8a6122;
  border-bottom-color: #6a4319;
  box-shadow: 0 3px 14px #000, inset 0 -7px 10px rgba(0,0,0,.7);
}
.topbar:before { border-color:#6a4a20; box-shadow:inset 0 0 0 1px #13100c; }
.topbar:after { border-color:#292016; }
.topbar > * { position:relative; z-index:1; }
.play-button,.ornate-button,.small-button {
  border-color:#d49c31;
  background-image:linear-gradient(#8d1b0f,#560d09 74%,#3b0906), repeating-linear-gradient(85deg, rgba(255,225,140,.12) 0 1px, transparent 1px 7px);
  box-shadow:inset 0 0 0 2px #4f1a0c, inset 0 0 0 3px #b07a22, inset 0 0 16px rgba(0,0,0,.45), 0 2px 8px #000;
  clip-path:polygon(0 9px,7px 9px,7px 0,calc(100% - 7px) 0,calc(100% - 7px) 9px,100% 9px,100% calc(100% - 9px),calc(100% - 7px) calc(100% - 9px),calc(100% - 7px) 100%,7px 100%,7px calc(100% - 9px),0 calc(100% - 9px));
}
.hero { border-bottom-color:#7b551e; }
.hero-art { filter:saturate(1.08) contrast(1.16) brightness(.91); }
.hero-shade { background:linear-gradient(90deg,rgba(5,6,7,.94) 0%,rgba(8,10,11,.72) 38%,rgba(8,10,11,.28) 53%,rgba(8,10,11,.05) 66%),linear-gradient(0deg,rgba(3,5,6,.82),transparent 38%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); }
.panel {
  border-color:#795622;
  background:linear-gradient(135deg,#171514,#0f1316 45%,#11100e), repeating-linear-gradient(0deg,rgba(175,121,49,.04) 0 1px,transparent 1px 5px);
  box-shadow:0 2px 9px #000, inset 0 0 0 2px #0a0b0c, inset 0 0 0 3px #332514;
}
.panel:before,.panel:after { content:""; position:absolute; width:12px; height:12px; border-color:#b48637; border-style:solid; pointer-events:none; z-index:3; }
.panel:before { top:5px; left:5px; border-width:1px 0 0 1px; }
.panel:after { right:5px; bottom:5px; border-width:0 1px 1px 0; }
.news-row img { border:2px solid #73521e; box-shadow:inset 0 0 0 1px #170f08,0 2px 5px #000; }
.feature>img { filter:saturate(1.22) contrast(1.15) brightness(.82); transform:scale(1.025); }
.feature-vignette { background:linear-gradient(0deg,rgba(3,5,7,.97),rgba(4,7,9,.12) 75%),linear-gradient(90deg,rgba(3,6,8,.74),transparent 65%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); }
.small-button { background-image:linear-gradient(#183e51,#0e2530),repeating-linear-gradient(85deg,rgba(255,255,255,.1) 0 1px,transparent 1px 6px); }

/* Keep the frame rectangular and crafted. The old clip-path created the long stray rails seen in the screenshot. */
.play-button,.ornate-button,.small-button { position:relative; clip-path:none; border-radius:0; }
.play-button:before,.ornate-button:before,.small-button:before { content:""; position:absolute; inset:4px; border:1px solid rgba(225,178,72,.45); pointer-events:none; }
.play-button:after,.ornate-button:after,.small-button:after { content:"◆"; position:absolute; top:50%; right:6px; transform:translateY(-50%) scale(.42); color:#e1ad3d; pointer-events:none; }
.hero-art { background-image:url('assets/hero-castle-reference.png'); background-position:center; }
.hero-art { background-image:url('assets/hero-party-gpt-image-2.png'); background-position:center 54%; }
.content-grid { padding-top:38px; }
@media (max-width:760px) { .content-grid { padding-top:18px; } }

/* Final asset-backed overrides. Keep these last so legacy visual experiments cannot win the cascade. */
.topbar > .topbar-ornament { position:absolute; z-index:0; }
.topbar > .brand,.topbar > .main-nav,.topbar > .top-actions { position:relative; z-index:1; }
.content-grid { padding-top:0; }
.play-button,.ornate-button,.small-button { border:0; background-image:url('assets/chrome/button-primary-normal.webp'); background-size:100% 100%; box-shadow:0 2px 8px #000; clip-path:none; }
.play-button:hover,.ornate-button:hover,.small-button:hover { background-image:url('assets/chrome/button-primary-hover.webp'); filter:none; }
.play-button:active,.ornate-button:active,.small-button:active { background-image:url('assets/chrome/button-primary-pressed.webp'); }
.panel { border:14px solid transparent; border-image-source:url('assets/chrome/panel-frame-9slice.webp'); border-image-slice:150; border-image-width:14px; border-image-outset:0; border-image-repeat:stretch; background:#111519; box-shadow:0 2px 9px #000; }
.panel:before,.panel:after { display:none; }
.panel { border-width:6px; border-image-width:6px; }
.news-panel,.feature,.quick-links { height:353px; min-height:353px; }
.news-panel { padding:18px 23px 8px; }
.quick-links a { min-height:88px; height:88px; }
@media (max-width:760px) { .topbar-ornament { display:none; } }
.site-frame { width:100%; }
.content-grid,.realm-strip,footer { width:min(1536px,100%); margin-left:auto; margin-right:auto; }
.topbar { border:8px solid transparent; border-image:url('assets/chrome/navbar-reference-frame-9slice.webp') 150 / 8px / 0 stretch; }
.topbar { border:0; border-image:none; background:#08090b; }
.topbar:before { content:""; display:block; position:absolute; inset:0; border:4px solid transparent; border-image:url('assets/chrome/navbar-reference-frame-9slice.webp') 150 / 4px / 0 stretch; pointer-events:none; z-index:0; }
.topbar:after { display:none; }
.topbar-ornament { top:0; height:80px; background-size:auto 80px; }
.topbar-ornament-left { left:0; width:40px; background-position:left center; }
.topbar-ornament-middle { left:40px; right:40px; background-position:center; }
.topbar-ornament-right { right:0; width:40px; background-position:right center; }
.topbar { overflow:visible; }
@media (min-width:761px) and (max-width:1100px) {
  .content-grid { grid-template-columns:1fr 1.6fr; padding-left:24px; padding-right:24px; }
  .news-panel,.feature { height:353px; min-height:353px; }
  .quick-links { grid-column:1 / -1; height:112px; min-height:112px; display:grid; grid-template-columns:repeat(4,1fr); }
  .quick-links a { height:112px; min-height:112px; padding:0 12px; gap:8px; border-bottom:0; border-right:1px solid #3b3326; }
  .quick-links a:last-child { border-right:0; }
  .round-mark { width:36px; height:36px; font-size:20px; }
  .quick-links strong { font-size:10px; }
  .quick-links small { font-size:9px; }
}

/* The supplied castle artwork is the continuous backdrop for the hero and content band. */
.hero-stage {
  position:relative;
  overflow:hidden;
  background-color:#08090b;
  background-image:url('assets/hero-castle-reference.png');
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero-stage > .hero,.hero-stage > .content-grid { position:relative; z-index:1; }
.hero-stage > .hero { background:transparent; }
.hero-art { background-image:none; filter:none; }
.hero { border-bottom:0; }
.hero-shade { display:none; }
.hero-stage > .content-grid { background:linear-gradient(180deg,rgba(8,9,11,.08) 0%,rgba(8,9,11,.84) 100%); }
.realm-strip { position:relative; z-index:2; background:#08090b; }
.strip-title { border-top:0; background:none; }
.realm-list { border-top:0; }
@media (max-width:760px) {
  .hero-stage { background-position:62% top; }
}

/* Reference chrome pass: preserve the reference red button proportions and the thin blue-black panel edge. */
.hero-stage {
  background-size:cover;
  background-position:center 65%;
}
.play-button,.ornate-button {
  background-image:url('assets/chrome/button-reference-normal.webp');
  background-size:100% 100%;
  box-shadow:0 3px 10px #000;
}
.play-button:hover,.ornate-button:hover { background-image:url('assets/chrome/button-reference-hover.webp'); filter:none; }
.play-button:active,.ornate-button:active { background-image:url('assets/chrome/button-reference-pressed.webp'); }
.play-button:before,.play-button:after,.ornate-button:before,.ornate-button:after { display:none; }
.panel {
  border-width:4px;
  border-image-source:url('assets/chrome/panel-frame-reference-9slice.webp');
  border-image-slice:64;
  border-image-width:4px;
  border-image-outset:0;
  background:#11161d;
  box-shadow:0 2px 9px rgba(0,0,0,.9);
}
.quick-icon { width:43px; height:43px; display:block; flex:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
@media (max-width:760px) {
  .hero-stage { background-position:62% 55%; }
  .quick-icon { width:36px; height:36px; }
}

/* Final navbar repair: one continuous frame and CSS-scaled carved controls. */
.brand { width:246px; height:80px; display:flex; align-items:center; flex:none; }
.brand-logo { width:224px; height:72px; display:block; object-fit:contain; object-position:left center; }
.topbar {
  border:0;
  background:#08090b;
  box-shadow:0 3px 14px #000;
}
.topbar:before { display:none; }
.topbar > .topbar-ornament { display:block; }
.topbar-ornament { top:0; height:80px; background-size:auto 80px; background-repeat:no-repeat; }
.topbar-ornament-left { left:0; width:40px; background-image:url('assets/chrome/navbar-reference-left-cap.webp'); background-position:left center; }
.topbar-ornament-middle { left:40px; right:40px; background-image:url('assets/chrome/navbar-reference-middle.webp'); background-position:center; background-size:100% 80px; }
.topbar-ornament-right { right:0; width:40px; background-image:url('assets/chrome/navbar-reference-right-cap.webp'); background-position:right center; }
.play-button,.ornate-button {
  position:relative;
  overflow:visible;
  isolation:isolate;
  border:1px solid #b27a20;
  background-color:#5f0e08;
  background-image:
    linear-gradient(105deg, rgba(255,220,139,.06), transparent 20%, transparent 80%, rgba(25,0,0,.16)),
    linear-gradient(180deg, #8d1b0f 0%, #620e08 70%, #3d0805 100%);
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 2px #41170d, inset 0 0 0 3px #a76d1e, inset 0 0 14px rgba(0,0,0,.48), 0 3px 10px #000;
  white-space:nowrap;
}
.play-button:before,.ornate-button:before {
  content:"";
  position:absolute;
  inset:5px;
  z-index:0;
  border:1px solid rgba(232,187,80,.5);
  pointer-events:none;
}
.play-button:after,.ornate-button:after { display:none; }
.button-flourish {
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  transform:translateY(-50%) rotate(45deg);
  border:1px solid #e0b64f;
  background:radial-gradient(circle at 35% 35%, #f4d878 0 16%, #b27b21 18% 54%, #4a2a0b 56% 100%);
  box-shadow:0 0 0 1px #3e1b0b, 0 1px 3px #000;
  pointer-events:none;
  z-index:1;
}
.button-flourish-left { left:-5px; }
.button-flourish-right { right:-5px; }
.play-button:hover,.ornate-button:hover { background-image:
    linear-gradient(105deg, rgba(255,235,164,.1), transparent 20%, transparent 80%, rgba(25,0,0,.12)),
    linear-gradient(180deg, #a52613 0%, #741009 70%, #4a0906 100%); }
.play-button:active,.ornate-button:active { box-shadow:inset 0 0 12px rgba(0,0,0,.65), inset 0 0 0 2px #3a120b, 0 2px 5px #000; }
.play-button { width:178px; min-width:178px; height:56px; }
.ornate-button { width:287px; min-width:287px; height:57px; }
@media (max-width:760px) {
  .brand { width:166px; height:68px; }
  .brand-logo { width:158px; height:58px; }
  .play-button { width:120px; min-width:120px; height:42px; }
  .ornate-button { width:min(287px,calc(100vw - 46px)); min-width:0; height:56px; }
  .mobile-menu-button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; margin-right:3px; border-color:#7e5a25; box-shadow:inset 0 0 0 1px #2b1b0c, 0 2px 5px #000; }
  .mobile-menu-button:focus-visible { outline:1px solid #e7c565; outline-offset:3px; }
  .mobile-nav-drawer { position:absolute; top:68px; right:10px; z-index:6; display:grid; min-width:190px; max-height:calc(100vh - 84px); overflow-y:auto; padding:9px 15px; border:1px solid #8a6122; background:linear-gradient(145deg,#1a1510,#08090b); box-shadow:0 12px 24px #000, inset 0 0 0 2px #181009; }
  .mobile-nav-drawer a { display:flex; align-items:center; min-height:44px; padding:6px 4px; color:#d7bd79; border-bottom:1px solid #362717; font:10px Cinzel,Georgia,serif; letter-spacing:1.2px; }
  .mobile-nav-drawer a:last-child { border-bottom:0; }
  .mobile-nav-drawer a:hover { color:#fff0bd; }
  .mobile-nav-heading { display:block; margin:10px 4px 2px; color:#9c7a36; font:9px Cinzel,Georgia,serif; letter-spacing:1.3px; text-transform:uppercase; }
  .mobile-nav-heading:first-child { margin-top:0; }
  .icon-button { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .play-button { height:44px; }
}

/* Shared realm shell: the supplied ritual-ground artwork and reference footer. */
body {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:#090b0d;
  background-image:linear-gradient(rgba(5,7,9,.08),rgba(5,7,9,.18)),url('assets/portal-body-background.webp'),linear-gradient(180deg,#111417,#090b0d);
  background-position:center -20px,center -20px,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:cover,cover,cover;
  background-attachment:fixed,fixed,fixed;
}
body > .site-frame,body > main { flex:1 0 auto; }
.portal-page-frame { background:transparent; overflow:visible; }

.site-footer {
  position:relative;
  z-index:4;
  display:block;
  flex:0 0 auto;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  color:#b9ad94;
  border:0;
  border-top:1px solid #a2732d;
  background:
    linear-gradient(90deg,rgba(10,11,12,.94),rgba(22,20,18,.97) 50%,rgba(10,11,12,.94)),
    url('assets/chrome/material-wood-dark.webp') center / 256px auto repeat;
  box-shadow:0 -9px 28px rgba(0,0,0,.72),inset 0 1px 0 #34240f;
  font:12px/1.45 "Trebuchet MS",sans-serif;
  letter-spacing:0;
}
.site-footer:before {
  content:"";
  position:absolute;
  top:-10px;
  left:0;
  right:0;
  height:20px;
  background:url('assets/chrome/divider-ornate.webp') center / min(760px,72vw) 20px no-repeat;
  pointer-events:none;
}
.site-footer:after {
  content:"◆";
  position:absolute;
  top:-11px;
  left:50%;
  color:#d5a33d;
  font-size:15px;
  line-height:20px;
  transform:translateX(-50%) scaleX(.7);
  text-shadow:0 0 9px rgba(212,160,58,.45);
}
.site-footer-inner {
  width:min(1536px,100%);
  min-height:206px;
  margin:0 auto;
  padding:34px 48px 28px;
  display:grid;
  grid-template-columns:minmax(260px,1.45fr) repeat(4,minmax(125px,1fr)) minmax(130px,.72fr);
  border:1px solid #765221;
  border-top:0;
  box-shadow:inset 0 0 0 2px #0a0908,inset 0 0 0 3px rgba(123,86,34,.34);
}
.footer-identity { min-width:0; padding:0 34px 0 12px; }
.footer-logo { display:inline-flex; width:240px; max-width:100%; }
.footer-logo img { display:block; width:100%; height:auto; }
.footer-identity p { margin:14px 0 16px; color:#958b78; font-size:11px; }
.footer-socials { display:flex; align-items:center; gap:18px; }
.footer-socials a { width:18px; height:18px; display:grid; place-items:center; color:#c99a3c; font:700 12px/1 Cinzel,Georgia,serif; }
.footer-socials img { width:18px; height:18px; display:block; }
.footer-socials a:hover { color:#f2ce70; filter:brightness(1.2); }
.footer-column { min-width:0; padding:5px 24px 0; border-left:1px solid rgba(121,84,32,.35); }
.footer-column strong { display:block; margin-bottom:13px; color:#d9a844; font:700 11px/1 Cinzel,Georgia,serif; letter-spacing:0; }
.footer-column a { display:block; margin:0 0 8px; color:#bdb19a; font-size:11px; }
.footer-column a:hover { color:#f2d47d; }
.footer-crest { display:grid; place-items:center; border-left:1px solid rgba(121,84,32,.35); }
.footer-crest-mark { position:relative; width:104px; height:104px; display:grid; place-items:center; color:#9c702b; border:1px solid currentColor; border-radius:50%; opacity:.42; box-shadow:inset 0 0 0 5px #11100e,inset 0 0 0 6px currentColor,0 0 18px rgba(161,111,39,.14); }
.footer-crest-mark:before { content:""; position:absolute; top:-18px; bottom:-18px; left:50%; width:2px; background:linear-gradient(transparent,currentColor 18%,currentColor 82%,transparent); transform:translateX(-50%); }
.footer-crest-mark:after { content:""; position:absolute; top:50%; left:16px; right:16px; height:1px; background:currentColor; box-shadow:0 -11px 0 rgba(156,112,43,.48),0 11px 0 rgba(156,112,43,.48); }
.footer-crest-mark b { position:relative; z-index:1; display:grid; place-items:center; width:54px; height:54px; color:#b88a39; border:1px solid currentColor; border-radius:50%; background:#11100e; font:700 32px/1 Georgia,serif; }

@media (max-width:1050px) {
  .site-footer-inner { grid-template-columns:minmax(220px,1.3fr) repeat(4,minmax(110px,1fr)); padding-left:28px; padding-right:28px; }
  .footer-crest { display:none; }
  .footer-column { padding-left:18px; padding-right:18px; }
}
@media (max-width:760px) {
  body { background-position:center -30px,center -30px,center; background-size:auto 760px,auto 760px,cover; background-attachment:scroll,scroll,scroll; }
  .site-footer { display:block; padding:0; }
  .site-footer-inner { min-height:0; grid-template-columns:1fr 1fr; padding:34px 22px 26px; }
  .footer-identity { grid-column:1/-1; padding:0 0 24px; }
  .footer-logo { width:210px; }
  .footer-column { padding:18px 12px 8px 0; border-left:0; border-top:1px solid rgba(121,84,32,.35); }
  .footer-column:nth-of-type(even) { padding-left:16px; border-left:1px solid rgba(121,84,32,.35); }
}