@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#171a1c;--steel:#454b4b;--ash:#a3a092;--red:#a43b2b;--gold:#d99a49;--white:#f3eee3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.nav{height:76px;position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,88px);border-bottom:1px solid #ffffff1b;background:#111416a8;backdrop-filter:blur(12px)}.brand{font-family:Cinzel,Georgia,serif;letter-spacing:.15em;font-size:16px;font-weight:900}.nav nav{display:flex;gap:32px}.nav nav a{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#d6cdbd}.nav nav a:hover{color:var(--gold)}.nav-cta{font-size:10px;letter-spacing:.18em;border:1px solid #d99a4980;padding:13px 18px;color:var(--gold)}.hero{min-height:790px;height:100svh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;background:radial-gradient(ellipse at 50% 40%,#4e2520 0,#222022 40%,#101314 75%)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0,transparent 25%),linear-gradient(90deg,#101314b3,transparent 25%,transparent 75%,#101314b3);pointer-events:none}.hero-art{position:absolute;inset:0;overflow:hidden}.moon{position:absolute;width:min(42vw,500px);aspect-ratio:1;top:10%;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 45% 42%,#cf6541,#842a23 55%,#3b1718 73%);box-shadow:0 0 120px 30px #9b342e59,0 0 250px 80px #8e261a26;opacity:.67}.citadel{position:absolute;bottom:13%;left:0;width:100%;height:52%;background:linear-gradient(transparent 15%,#101314 95%);clip-path:polygon(0 90%,8% 77%,8% 55%,11% 55%,11% 38%,14% 38%,14% 58%,21% 58%,21% 75%,28% 75%,28% 43%,31% 43%,31% 28%,34% 28%,34% 46%,39% 46%,39% 66%,44% 66%,44% 32%,47% 32%,47% 12%,50% 0,53% 12%,53% 32%,56% 32%,56% 66%,62% 66%,62% 42%,65% 42%,65% 26%,68% 26%,68% 43%,71% 43%,71% 73%,79% 73%,79% 51%,83% 51%,83% 35%,86% 35%,86% 54%,90% 54%,90% 78%,100% 87%,100% 100%,0 100%);opacity:.75}.rune{position:absolute;top:19%;left:50%;transform:translateX(-50%);font-size:clamp(170px,28vw,400px);font-family:Georgia,serif;color:#f39b5b1a;text-shadow:0 0 45px #e34e3680;animation:pulse 5s ease-in-out infinite}.hero-content{position:relative;z-index:2;padding:100px 22px 80px;max-width:940px}.eyebrow{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.38em;text-transform:uppercase}.hero h1,h2,h3{font-family:Cinzel,Georgia,serif}.hero h1{font-size:clamp(48px,9.5vw,132px);line-height:1.1;letter-spacing:.025em;margin:25px 0 18px;text-shadow:0 7px 35px #000}.hero h1 span{color:#e6c6a2}.tagline{font-family:Cinzel,serif;font-size:clamp(16px,2.3vw,25px);letter-spacing:.25em;line-height:1.7;color:var(--gold);font-weight:600}.intro{max-width:550px;margin:25px auto 34px;line-height:1.85;color:#c6c0b7;font-size:14px}.button{display:inline-flex;gap:30px;align-items:center;background:linear-gradient(120deg,#9c3d2d,#64261e);border:1px solid #e08058;color:white;padding:17px 27px;font-size:11px;letter-spacing:.22em;font-weight:700;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:0 12px 35px #a43b2b55}.scroll-hint{position:absolute;bottom:35px;z-index:3;color:#a3a092;font-size:9px;letter-spacing:.3em}.section{padding:120px 24px;position:relative;overflow:hidden}.section-inner{max-width:1160px;margin:auto}.two-col{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}h2{font-size:clamp(38px,5vw,70px);line-height:1.15;margin:18px 0 30px}h2 em{font-style:normal;color:var(--gold)}.section p:not(.eyebrow){color:#b9b6b0;line-height:1.9;font-size:15px}.story{background:linear-gradient(140deg,#202426,#171a1c)}.sigil-panel{height:450px;border:1px solid #d99a4940;background:radial-gradient(circle,#52251f 0,#232023 35%,#111516 75%);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:inset 0 0 90px #0009}.sigil{font-size:260px;color:#cc6246;text-shadow:0 0 55px #a43b2b;animation:pulse 6s infinite}.sigil-panel span{font-family:Cinzel,serif;font-size:11px;letter-spacing:.4em;color:var(--gold)}.gameplay{background:#111516;text-align:center}.section-lead{max-width:650px;margin:0 auto 55px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}.features article{padding:34px;border:1px solid #ffffff16;background:#ffffff05}.feature-icon{color:var(--gold);font-size:38px}.features h3{font-size:18px;letter-spacing:.06em}.features p{font-size:13px!important}.board-wrap{margin:65px auto 0;max-width:420px}.board-caption{font-size:9px;letter-spacing:.16em;color:var(--ash);margin-bottom:16px}.rune-board{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:12px;background:#090d0f;border:1px solid #8c5b3e;box-shadow:0 18px 75px #000}.tile{aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(145deg,#343b3e,#171e20);border:1px solid #a3a09224;font-size:clamp(21px,4vw,32px);color:var(--gold);text-shadow:0 0 12px currentColor}.tile:nth-child(5n){color:#a9c3cd}.tile:nth-child(7n){color:#bb6b59}.tile:nth-child(11n){color:#91ad8b}.heroes{background:radial-gradient(ellipse at 50% 0,#3d2524,#171a1c 55%);text-align:center}.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}.hero-cards article{min-height:380px;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:end;border:1px solid #b3834d55;background:radial-gradient(ellipse at 50% 45%,#5c3027,#1b1c1d 60%);transition:transform .25s}.hero-cards article:hover{transform:translateY(-6px)}.hero-symbol{font-size:95px;flex:1;display:grid;place-items:center;color:#d99a49;text-shadow:0 0 30px #a43b2b}.hero-cards article p{font-size:10px!important;letter-spacing:.25em;color:var(--gold)!important}.hero-cards h3{font-size:20px;margin:8px 0}.hero-cards small{font-size:11px;color:#a3a092}.release{text-align:center;padding:150px 24px;background:radial-gradient(ellipse at 50% 85%,#572820,#151819 60%)}.release h2{font-size:clamp(44px,7vw,90px)}.platforms{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:40px 0}.platforms span{padding:18px 24px;border:1px solid #d99a4966;color:var(--gold);font-size:11px;letter-spacing:.16em}.release-note{font-size:12px!important}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:35px clamp(20px,5vw,88px);border-top:1px solid #ffffff1a;color:#a3a092;font-size:11px}footer .brand{color:#f3eee3}@keyframes pulse{50%{opacity:.6;filter:brightness(1.6)}}@media(max-width:760px){.nav{height:68px}.nav nav{display:none}.nav-cta{font-size:9px;padding:10px}.hero{min-height:690px}.hero h1{font-size:clamp(40px,11vw,75px)}.tagline{letter-spacing:.12em}.two-col{grid-template-columns:1fr;gap:35px}.sigil-panel{height:300px}.sigil{font-size:180px}.features,.hero-cards{grid-template-columns:1fr}.hero-cards article{min-height:270px}.hero-symbol{font-size:65px}.section{padding:85px 22px}.features article{padding:26px}footer{justify-content:center;text-align:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* Official Runeshatter logo */
.hero-logo{margin:8px auto 4px;max-width:min(760px,90vw);line-height:0}.hero-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 35px rgba(0,0,0,.65))}.hero-content{width:100%}.hero-art .rune{opacity:.22}@media(max-width:760px){.hero-logo{max-width:95vw;margin:14px auto 4px}.hero-content{padding-left:10px;padding-right:10px}}

/* Hero layout correction: keep logo, copy and CTA below fixed navigation. */
.hero{height:auto;min-height:max(820px,100svh);padding:110px 20px 90px;overflow:hidden}
.hero-content{padding:0 12px;max-width:820px;display:flex;flex-direction:column;align-items:center;gap:0}
.hero-content .eyebrow{margin:0 0 12px;line-height:1.5}
.hero-logo{width:min(620px,78vw);max-width:100%;margin:0 auto 8px;line-height:0}
.hero-logo img{width:100%;height:auto;max-height:360px;object-fit:contain}
.hero .tagline{margin:6px 0 0;line-height:1.6}
.hero .intro{margin:18px auto 24px}
.hero .button{position:relative;z-index:3}
.scroll-hint{bottom:24px}
.sigil-rune{display:block;width:min(230px,65%);height:270px;object-fit:contain;filter:drop-shadow(0 0 32px #a43b2b88)}
.feature-rune{width:64px;height:64px;object-fit:contain;display:block;margin-bottom:12px}
.tile{overflow:hidden}.tile img{display:block;width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 0 7px #0008)}
@media(max-width:760px){.hero{min-height:760px;padding:104px 14px 88px}.hero-logo{width:min(520px,96vw)}.hero-logo img{max-height:320px}.hero .eyebrow{font-size:9px;letter-spacing:.2em}.hero .tagline{font-size:clamp(15px,4vw,21px);letter-spacing:.12em}.hero .intro{font-size:13px;line-height:1.65}.scroll-hint{bottom:18px}}
@media(max-width:390px){.brand{font-size:12px;letter-spacing:.08em}.nav{padding:0 14px}.nav-cta{padding:9px 8px}.hero{min-height:720px}}

/* Character artwork from the actual game: never crop or distort figures. */
.character-grid{display:grid;gap:22px;margin-top:52px}
.hero-cards.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.enemy-grid.character-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.character-grid .character-card{min-width:0;min-height:0;padding:0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;overflow:hidden;border:1px solid #b3834d55;background:linear-gradient(160deg,#2d2826,#111516 75%);transition:transform .25s,border-color .25s}
.character-grid .character-card:hover{transform:translateY(-5px);border-color:#d99a49aa}
.character-art{height:clamp(250px,30vw,390px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#58322980,transparent 72%);padding:16px 12px 0}
.character-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 18px #0009)}
.character-copy{padding:18px 14px 24px;min-height:128px;text-align:center;border-top:1px solid #ffffff12;background:#111516d9}
.character-copy p{font-size:10px!important;letter-spacing:.2em;color:var(--gold)!important;margin:0 0 9px}
.character-copy h3{font-size:clamp(15px,1.6vw,21px);margin:0 0 10px;letter-spacing:.05em}
.character-copy small{color:#b7b1a8;font-size:12px;line-height:1.5}
.enemies{background:linear-gradient(180deg,#121617,#24201f 50%,#171a1c);text-align:center}
.enemy-grid .character-art{height:clamp(230px,25vw,350px)}
@media(max-width:900px){.enemy-grid.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav nav{gap:16px}}
@media(max-width:760px){.hero-cards.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-art{height:290px}.enemy-grid .character-art{height:270px}}
@media(max-width:520px){.hero-cards.character-grid,.enemy-grid.character-grid{grid-template-columns:1fr}.character-art,.enemy-grid .character-art{height:340px}.character-copy{min-height:0}.character-grid{max-width:430px;margin-left:auto;margin-right:auto}}

/* Story artwork: original Seven Seals illustration, responsive and unaltered. */
.story-artwork{position:relative;margin:0;min-height:510px;overflow:hidden;isolation:isolate;background:#111516;box-shadow:0 25px 70px #0007}
.story-artwork img{display:block;width:100%;height:100%;min-height:510px;max-height:640px;object-fit:cover;object-position:center 43%}
.story-artwork::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 64%,rgba(17,21,22,.78) 100%)}
.story-artwork figcaption{position:absolute;z-index:1;bottom:24px;left:0;right:0;text-align:center;font:600 11px Cinzel,Georgia,serif;letter-spacing:.35em;color:#e8b16b;text-shadow:0 2px 10px #000}
@media(max-width:760px){.story-artwork{min-height:0}.story-artwork img{min-height:0;height:auto;max-height:none;aspect-ratio:3/4;object-fit:cover}.story-artwork figcaption{bottom:18px;font-size:10px}}

/* Unrevealed fourth adversary: intentionally no monster art or spoilers. */
.mystery-card .mystery-art{position:relative;isolation:isolate;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#4b211d 0%,#221e22 38%,#101416 78%)}
.mystery-haze{position:absolute;inset:-25%;background:radial-gradient(ellipse at 52% 65%,#a43b2b44,transparent 45%),radial-gradient(ellipse at 20% 80%,#d99a4917,transparent 42%);filter:blur(20px);animation:mystery-breathe 5s ease-in-out infinite alternate}
.mystery-symbol{position:relative;z-index:1;font-family:Georgia,serif;font-size:clamp(110px,14vw,175px);line-height:1;color:#d99a49aa;text-shadow:0 0 20px #a43b2b88,0 0 75px #a43b2b77;transform:translateY(-8px)}
.mystery-card .character-copy h3{color:#d99a49}
@keyframes mystery-breathe{from{opacity:.4;transform:scale(.96)}to{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.mystery-haze{animation:none}}

/* Orc Warrior: slightly more imposing but NEVER clipped. */
.enemy-card--orc .character-art{padding:8px 4px 0;overflow:hidden}
.enemy-card--orc .character-art img{position:static;width:100%;max-width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:none}
/* Fourth enemy remains an ominous silhouette instead of a question mark. */
.mystery-card .mystery-art{padding:8px 0 0}
.mystery-card .mystery-art .mystery-creature{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 16px rgba(164,59,43,.28));animation:unknown-presence 5s ease-in-out infinite alternate}
@keyframes unknown-presence{from{filter:drop-shadow(0 0 8px rgba(164,59,43,.12))}to{filter:drop-shadow(0 0 22px rgba(164,59,43,.38))}}
@media(prefers-reduced-motion:reduce){.mystery-card .mystery-art .mystery-creature{animation:none}}

/* Interactive class and character appearance preview */
.hero-selector{max-width:990px;margin:44px auto 0}
.hero-class-tabs,.hero-gender-tabs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}
.hero-class-tab,.hero-gender-tab{cursor:pointer;color:#c8bdb0;background:#151819;border:1px solid #8c65424f;font-family:Georgia,serif;letter-spacing:.16em;font-size:12px;padding:15px 24px;transition:background .2s,border-color .2s,color .2s}
.hero-gender-tabs{margin-top:16px}
.hero-gender-tab{font-size:11px;padding:11px 27px}
.hero-class-tab.is-active,.hero-gender-tab.is-active{color:#f5d5a4;border-color:#d99a49;background:linear-gradient(160deg,#533027,#251d1b)}
.hero-class-tab:hover,.hero-gender-tab:hover{border-color:#d99a49}
.hero-class-tab:focus-visible,.hero-gender-tab:focus-visible{outline:2px solid #d99a49;outline-offset:3px}
.hero-preview{margin-top:25px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;min-height:500px;border:1px solid #b3834d55;background:radial-gradient(ellipse at 35% 55%,#523027a6,#171a1c 65%);overflow:hidden;text-align:left}
.hero-preview-art{height:510px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:12px 20px 0}
.hero-preview-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 28px #0009);transition:opacity .22s ease,transform .22s ease}
.hero-preview-art img.is-changing{opacity:0;transform:translateY(12px)}
.hero-preview-copy{padding:35px 42px 35px 14px}
.hero-preview-label{color:#d99a49!important;font-size:11px!important;letter-spacing:.25em}
.hero-preview-copy h3{font-size:clamp(25px,3vw,42px);margin:12px 0 16px}
.hero-preview-copy>p:not(.hero-preview-label){color:#c6c0b7;font-size:15px;line-height:1.75}
.hero-preview-caption{display:block;color:#d99a49;font-size:10px;letter-spacing:.2em;margin-top:42px}
@media(max-width:760px){.hero-preview{grid-template-columns:1fr;text-align:center}.hero-preview-art{height:420px;padding:15px 12px 0}.hero-preview-copy{padding:22px 20px 35px}.hero-preview-caption{margin-top:24px}.hero-class-tab{padding:13px 16px;font-size:11px}}
@media(max-width:390px){.hero-class-tabs{gap:6px}.hero-class-tab{padding:12px 10px;font-size:10px}.hero-preview-art{height:350px}}
@media(prefers-reduced-motion:reduce){.hero-preview-art img{transition:none}}

/* Classic three-card Heroes layout with unobtrusive gender selection. */
.hero-gender-picker{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px auto 0}
.hero-gender-heading{font-size:10px;letter-spacing:.22em;color:#d99a49}
.hero-gender-picker .hero-gender-tabs{margin:0}
.heroes .hero-cards.character-grid{margin-top:32px}
.heroes .character-art img{transition:opacity .18s ease}
@media(min-width:761px){.heroes .hero-cards.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.heroes .hero-cards.character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.heroes .character-art{height:clamp(145px,37vw,260px);padding:8px 3px 0}.heroes .character-copy{padding:12px 5px 16px;min-height:125px}.heroes .character-copy h3{font-size:clamp(12px,2.8vw,18px)}.heroes .character-copy small{font-size:10px}}
@media(max-width:390px){.heroes .hero-cards.character-grid{grid-template-columns:1fr;max-width:330px}.heroes .character-art{height:280px}.heroes .character-copy{min-height:0}}

/* Orc: fill approximately 95% of the image viewport, without clipping. */
.enemy-grid .enemy-card--orc .character-art {padding:4px 3px 0;overflow:hidden;align-items:center;justify-content:center}
.enemy-grid .enemy-card--orc .character-art img {display:block;position:static;flex:none;width:96%;max-width:96%;height:95%;max-height:95%;object-fit:contain;object-position:center bottom;transform:none!important}
/* Clearly visible, accessible gender toggle above the original 3 cards. */
.hero-gender-picker .hero-gender-tab {min-width:112px}
.hero-gender-picker .hero-gender-tab.is-active {box-shadow:inset 0 0 0 1px #d99a49,0 0 18px #a43b2b33}

/* v5: Orc artwork was constrained by width, so 95% height never applied visually.
   Widen the image canvas while keeping its aspect ratio and its feet aligned. */
.enemy-grid .enemy-card--orc .character-art {
  padding: 4px 0 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.enemy-grid .enemy-card--orc .character-art img {
  display: block;
  flex: 0 0 auto;
  position: static;
  width: 118%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  transform: none !important;
}

/* Runeshatter marketing refresh v1.2: additions over the existing design */
.hero-actions,.release-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.button--ghost{background:rgba(15,17,19,.68);border-color:#c49b64;color:#f2d3a3}
.hero-proof{margin:24px 0 0!important;font-size:10px!important;letter-spacing:.22em;color:#c7bca9!important}
.hero-proof span{color:#d99a49;margin:0 8px}
.journey{background:radial-gradient(ellipse at 50% 0,#302321,#121617 68%);text-align:center}
.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left;margin:45px auto 65px}
.journey-grid article{padding:32px 27px;border:1px solid #9d785249;background:linear-gradient(145deg,#292322,#141719);position:relative}
.journey-grid article:before{content:'✦';position:absolute;right:22px;top:19px;color:#ad8053;opacity:.6}
.journey-num{color:#d99a49;letter-spacing:.2em;font-size:11px;font-weight:700}
.journey-grid h3{font-size:17px;line-height:1.5;margin:20px 0 10px}
.journey-grid p{font-size:13px!important;margin:0}
.dialogue-showcase{max-width:840px;margin:0 auto}
.dialogue-frame{position:relative;padding:38px clamp(20px,5vw,58px);border:2px solid #9e784a;outline:1px solid #55422d;outline-offset:5px;background:radial-gradient(ellipse at 50% 0,#3d2a24,#15191b 78%);box-shadow:inset 0 0 0 5px #161819,inset 0 0 0 6px #9d794344,0 25px 75px #0009}
.dialogue-frame:before,.dialogue-frame:after{content:'❖';position:absolute;top:-17px;color:#d3a36a;background:#171a1c;padding:0 10px;font-size:24px}.dialogue-frame:before{left:25px}.dialogue-frame:after{right:25px}
.dialogue-corner{display:block;color:#c9995e;font-size:26px;margin-bottom:8px}
.speaker{font:700 12px Cinzel,Georgia,serif;letter-spacing:.16em;color:#dfb67c}
.dialogue-frame blockquote{font:italic clamp(21px,3vw,33px)/1.55 Georgia,serif;color:#f3e9d7;margin:20px 0 26px}
.dialogue-detail{font-size:9px;letter-spacing:.2em;color:#bca994}
.share-status{min-height:24px;color:#d9b77d!important;font-size:12px!important}
.rune-board{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:760px){.journey-grid{grid-template-columns:1fr}.hero-actions,.release-actions{flex-direction:column}.hero-actions .button,.release-actions .button{justify-content:center;width:min(100%,330px)}.hero-proof{font-size:9px!important;letter-spacing:.12em}.dialogue-frame{margin:0 8px}}

/* v1.5: clear, restrained artwork status notices */
.art-disclaimer{margin:28px auto -24px!important;text-align:center;color:#d5ad78!important;font:600 10px/1.7 Cinzel,Georgia,serif!important;letter-spacing:.17em;text-transform:uppercase;max-width:90%}
.art-disclaimer span{color:#8d7760;padding:0 .35em}
.global-art-notice{padding:22px 24px;text-align:center;background:#1e2223;border-top:1px solid #d99a4938;color:#d5ad78;font:600 10px/1.8 Cinzel,Georgia,serif;letter-spacing:.12em}
@media(max-width:760px){.art-disclaimer{margin:24px auto -16px!important;font-size:9px!important;letter-spacing:.1em}.global-art-notice{font-size:9px;letter-spacing:.07em}}

/* v1.6: Early development preview: promotional image is clearly identified as concept art. */
.first-look{position:relative;background:radial-gradient(ellipse at 50% 20%,#37271d 0%,#171a1c 65%);overflow:hidden}
.first-look-inner{max-width:1120px;margin:0 auto;padding-top:90px;padding-bottom:90px}
.first-look-intro{text-align:center;max-width:780px;margin:0 auto 34px}
.first-look-intro .section-lead{margin:18px auto 0;max-width:700px}
.first-look-figure{max-width:860px;margin:0 auto;border:1px solid #80603a;background:#111315;box-shadow:0 25px 80px #0009}
.first-look-figure img{display:block;width:100%;height:auto}
.first-look-figure figcaption{display:flex;align-items:flex-start;gap:18px;padding:18px 24px;background:#111416;color:#bdb5aa;font-size:12px;line-height:1.65}
.first-look-figure figcaption strong{flex:0 0 auto;color:#d99a49;font-size:11px;letter-spacing:.12em}
@media(max-width:760px){.first-look-inner{padding-top:60px;padding-bottom:60px}.first-look-figure figcaption{display:block;padding:16px}.first-look-figure figcaption strong{display:block;margin-bottom:7px}}

/* v1.7: fantasy-styled hero calls to action; rest of page unchanged */
.hero-actions .button{min-height:56px;justify-content:center;position:relative;isolation:isolate;clip-path:polygon(0 15px,15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px));background:linear-gradient(180deg,#a66b36 0%,#5e3527 8%,#34231e 55%,#201b1b 100%);border:0;padding:18px 35px;color:#f9e6c3;box-shadow:inset 0 0 0 1px #b78b50,0 5px 22px #0008;text-shadow:0 1px 3px #000;letter-spacing:.17em}
.hero-actions .button::before{content:"";position:absolute;inset:4px;pointer-events:none;clip-path:polygon(0 11px,11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px));border:1px solid rgba(225,174,96,.6)}
.hero-actions .button::after{content:"◆";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#d4a564;font-size:9px;opacity:.85}
.hero-actions .button--ghost{background:linear-gradient(180deg,#35302b,#151a1b 65%,#101314);color:#e4c89a}
.hero-actions .button:hover{background:linear-gradient(180deg,#c08b47,#6b3a27 48%,#34211e);box-shadow:0 10px 28px #0009,0 0 20px #c78a4230}
.hero-actions .button--ghost:hover{background:linear-gradient(180deg,#514236,#242324 65%,#15191a)}
@media(max-width:760px){.hero-actions .button{padding:17px 27px}}

/* v1.9: Replace the blocky geometric citadel with atmospheric fantasy ruins. */
.hero-art .citadel{left:0;right:0;bottom:0;width:100%;height:72%;clip-path:none;background: url("assets/hero-valdoria-ruins.svg") center bottom / cover no-repeat;opacity:.78;pointer-events:none;}
@media(max-width:760px){.hero-art .citadel{height:64%;background-position:center bottom;opacity:.65}}

/* v2.0: clearly visible ruined stone silhouettes; replaces invisible v1.9 treatment. */
.hero-art .citadel {
  inset:auto 0 0; width:100%; height:78%;
  clip-path:none !important;
  background-image:url("assets/hero-valdoria-ruins-v2.svg") !important;
  background-repeat:no-repeat; background-position:center bottom; background-size:cover;
  opacity:1 !important; filter:none;
}
.hero:after { background:linear-gradient(0deg,var(--bg) 0%,transparent 19%),linear-gradient(90deg,#101314a8,transparent 22%,transparent 78%,#101314a8); }
@media(max-width:760px) { .hero-art .citadel { height:70%; background-size:auto 100%; background-position:center bottom; opacity:.9 !important; } }

/* v2.1: transparent two-phone preview and independent feature highlights */
.first-look{background:radial-gradient(ellipse at 50% 23%,rgba(77,50,36,.22),transparent 64%),#171a1c}
.first-look-figure{max-width:1050px;margin:0 auto;border:0;background:transparent;box-shadow:none}
.first-look-figure img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 32px rgba(0,0,0,.46))}
.first-look-figure figcaption{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:8px 15px;padding:12px 12px 0;background:transparent;text-align:center}
.first-look-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:980px;margin:48px auto 0;text-align:center}
.first-look-features article{padding:0 12px;background:transparent;border:0}
.first-look-feature-icon{display:block;color:#d49b50;font-size:30px;line-height:1.3;margin-bottom:13px}
.first-look-features h3{color:#f0e5d5;font-family:Georgia,serif;letter-spacing:.11em;font-size:17px;margin:0 0 12px}
.first-look-features p{color:#bdb5aa;font-size:14px;line-height:1.7;margin:0}
@media(max-width:760px){.first-look-features{grid-template-columns:1fr;gap:30px;margin-top:36px}.first-look-features article{max-width:360px;margin:auto}.first-look-figure figcaption{padding:8px 10px 0}.first-look-figure img{width:110%;max-width:none;margin-left:-5%}}