@font-face{font-family:NunitoSans;src:url('../../assets/fonts/nunito-sans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:BreeSerif;src:url('../../assets/fonts/bree-serif.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Cinzel;src:url('../../assets/fonts/cinzel.ttf') format('truetype');font-weight:400 900;font-display:swap}

/* Palette is the game's default "Stone" theme (src/ui/theme.css): smoked charcoal, aged brass, warm ink. */
:root{
  color-scheme:dark;
  --night:#191917;--stone:#292723;--stone-2:#34312b;--stone-3:#454035;--ink:#14120e;
  --line:#756a55;--brass:#a58b5a;--brass-hi:#d2b67d;--gold:#e2b955;--gold-hi:#fbe7ab;
  --text:#eee5d2;--muted:#c2b8a4;--title:#e9d6a6;--ruby:#c8392f;--ruby-deep:#7d1620;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--text);font:400 16px/1.65 NunitoSans,Georgia,serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:5px}

/* ───── Alpha 1.0 tag: a ruby ribbon with a brass edge ───── */
.alpha-tag{position:absolute;right:0;bottom:7%;z-index:2;transform:rotate(-5deg);padding:5px 12px 4px;font:700 12px/1 Cinzel,serif;letter-spacing:.22em;text-transform:uppercase;color:#fff2cf;white-space:nowrap;
  background:linear-gradient(#d24a3d,#8e1d25);border:2px solid #1d0c07;border-radius:2px;box-shadow:0 0 0 2px var(--gold),0 5px 0 2px #1d0c07,0 10px 14px #0008;text-shadow:0 1px 0 #4a0d12}
.alpha-tag-sm{position:static;transform:none;margin-left:2px;padding:4px 8px 3px;font-size:9px;letter-spacing:.18em;box-shadow:0 0 0 1px var(--gold),0 2px 0 1px #1d0c07}

/* ───── jewelled plate buttons (Flash-fantasy): iron outline, brass rim, ruby face, glossy top ───── */
.play-now,.header-signin{
  --c:20px;--rim-a:#fbe7ab;--rim-b:#a97a2d;--face-a:#e8574a;--face-b:#7d1620;--ol:#1d0c07;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;max-width:100%;
  clip-path:none;
  filter:drop-shadow(2px 0 0 var(--ol)) drop-shadow(-2px 0 0 var(--ol)) drop-shadow(0 -2px 0 var(--ol)) drop-shadow(0 7px 0 var(--ol)) drop-shadow(0 16px 18px #0009);
  transition:transform .12s,filter .12s}
.play-now:before,.header-signin:before,.play-now:after,.header-signin:after{content:"";position:absolute;z-index:-1;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% 50%,calc(100% - var(--c)) 100%,var(--c) 100%,0 50%)}
.play-now:before,.header-signin:before{inset:0;background:linear-gradient(var(--rim-a),var(--rim-b))}
.play-now:after,.header-signin:after{inset:5px;background:
  linear-gradient(#ffffff59,#ffffff00 52%),
  linear-gradient(105deg,#fff0 38%,#ffffff55 50%,#fff0 62%) -120% 0/60% 100% no-repeat,
  linear-gradient(var(--face-a),var(--face-b));animation:plate-sheen 5.5s 2s ease-in-out infinite}
@keyframes plate-sheen{0%{background-position:0 0,-120% 0,0 0}28%,100%{background-position:0 0,260% 0,0 0}}
.play-now{min-width:min(390px,100%);min-height:88px;padding:22px 74px 20px;color:#fff6dc;font:400 38px/1 BreeSerif,Georgia,serif;text-transform:uppercase;letter-spacing:.09em;
  text-shadow:0 3px 0 #5a0f16,0 0 14px #ff9a4a66;-webkit-text-stroke:1px #4a0d12;paint-order:stroke fill}
.play-now>span{position:relative;top:-1px}
.gem{position:absolute;top:50%;width:15px;height:15px;margin-top:-7.5px;transform:rotate(45deg);background:radial-gradient(circle at 32% 28%,#fff9d6,#f4c850 45%,#a4721c);border:2px solid var(--ol);box-shadow:0 0 8px #ffd26a99}
.gem:first-child{left:30px}.gem:last-child{right:30px}
.play-now:hover,.header-signin:hover{transform:translateY(-2px);filter:brightness(1.1) drop-shadow(2px 0 0 var(--ol)) drop-shadow(-2px 0 0 var(--ol)) drop-shadow(0 -2px 0 var(--ol)) drop-shadow(0 9px 0 var(--ol)) drop-shadow(0 20px 22px #000a) drop-shadow(0 0 16px #ffb04a66)}
.play-now:active,.header-signin:active{transform:translateY(5px);filter:drop-shadow(2px 0 0 var(--ol)) drop-shadow(-2px 0 0 var(--ol)) drop-shadow(0 -2px 0 var(--ol)) drop-shadow(0 2px 0 var(--ol)) drop-shadow(0 6px 8px #0009)}
/* the quieter sign-in plate: iron face, same brass rim */
.header-signin{--c:11px;--rim-a:#d8bf7f;--rim-b:#8d7340;--face-a:#58533f;--face-b:#24221c;--ol:#0f0d09;min-height:38px;padding:9px 26px 8px;color:#f1e6c6;font:800 13px/1 NunitoSans,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 0 #000;
  filter:drop-shadow(1.5px 0 0 var(--ol)) drop-shadow(-1.5px 0 0 var(--ol)) drop-shadow(0 -1.5px 0 var(--ol)) drop-shadow(0 4px 0 var(--ol)) drop-shadow(0 8px 10px #0008)}
.header-signin:after{inset:3px}
.header-signin:hover{filter:brightness(1.15) drop-shadow(1.5px 0 0 var(--ol)) drop-shadow(-1.5px 0 0 var(--ol)) drop-shadow(0 -1.5px 0 var(--ol)) drop-shadow(0 5px 0 var(--ol)) drop-shadow(0 10px 12px #000a)}
.header-signin:active{filter:drop-shadow(1.5px 0 0 var(--ol)) drop-shadow(-1.5px 0 0 var(--ol)) drop-shadow(0 -1.5px 0 var(--ol)) drop-shadow(0 1px 0 var(--ol))}

/* ───── header ───── */
.site-header{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px clamp(18px,3.4vw,46px);transition:background .35s,box-shadow .35s,padding .35s}
.site-header.is-solid{background:#1d1b17ee;box-shadow:inset 0 -2px #a58b5a66,0 12px 30px #0006;padding-block:8px;backdrop-filter:blur(6px)}
.site-brand{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
.site-brand img{width:132px;height:auto;filter:drop-shadow(0 3px 0 #0007)}
.site-header.is-solid .site-brand{opacity:1;transform:none}
.site-header nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);font:700 13px/1 NunitoSans,sans-serif;letter-spacing:.04em;text-shadow:0 1px 3px #000a}
.site-header nav a:not(.header-signin){opacity:.9;position:relative;padding:6px 0}
.site-header nav a:not(.header-signin):after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-header nav a:not(.header-signin):hover:after{transform:scaleX(1)}

/* ───── hero: Misty Fields at sunrise ───── */
.hero{position:relative;min-height:max(640px,100svh);height:100svh;overflow:hidden;display:grid;place-items:center;isolation:isolate;background:linear-gradient(#5b87cf,#e8a0a8 45%,#7a9a58)}
.stage{position:absolute;left:50%;top:50%;width:max(112vw,calc(max(100svh,640px) * 2.75));aspect-ratio:3360/1440;transform:translate(-50%,-53%);animation:drift 80s ease-in-out infinite alternate;will-change:transform}
.stage-art{width:100%;height:100%;object-fit:cover}
.js .stage-art{opacity:0;transition:opacity 1.4s ease-out}.js .stage-art.on{opacity:1}
@keyframes drift{from{transform:translate(-52%,-53%)}to{transform:translate(-48%,-53%)}}
.sun-halo{position:absolute;left:13%;top:27%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#fff0b88c,#ffc48a40 42%,transparent);mix-blend-mode:screen;animation:sun 9s ease-in-out infinite alternate}
@keyframes sun{to{opacity:.6;transform:translate(-50%,-50%) scale(1.14)}}
/* two bands of mist slide across the valley at different speeds; the pattern tiles, so the loop never jumps */
.mist{position:absolute;left:0;width:200%;pointer-events:none;background-repeat:repeat-x;background-size:50% 100%;filter:blur(8px)}
.mist-a{top:31%;height:30%;opacity:.62;background-image:radial-gradient(ellipse 22% 46% at 14% 52%,#f7f1f6,transparent 70%),radial-gradient(ellipse 20% 38% at 40% 60%,#eef3f9,transparent 70%),radial-gradient(ellipse 24% 44% at 70% 48%,#fff4ea,transparent 70%),radial-gradient(ellipse 16% 36% at 92% 58%,#f0f1f8,transparent 70%);animation:mist 110s linear infinite}
.mist-b{top:44%;height:26%;opacity:.5;background-image:radial-gradient(ellipse 26% 42% at 22% 50%,#ffffff,transparent 70%),radial-gradient(ellipse 18% 34% at 58% 56%,#f6f2f8,transparent 70%),radial-gradient(ellipse 22% 40% at 84% 46%,#fff6ee,transparent 70%);animation:mist 70s linear infinite reverse}
@keyframes mist{to{transform:translateX(-50%)}}
.air{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(#10141899 0,transparent 18%,transparent 56%,#14161399 82%,var(--night) 100%)}

.hero-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:space-between;height:100%;width:100%;max-width:760px;padding:64px 20px 36px}
.hero-cta{display:flex;flex-direction:column;align-items:center}
.hero-logo{position:relative;margin:0;width:min(430px,74vw,calc((100svh - 330px) * 1.5));min-width:220px;filter:drop-shadow(0 10px 0 #0005) drop-shadow(0 14px 30px #0008);animation:rise 1s cubic-bezier(.2,.8,.2,1) both,bob 6s ease-in-out 1s infinite}
.hero-logo img{width:100%;height:auto}
.hero-logo .alpha-tag{right:6%;bottom:9%;font-size:clamp(10px,1.1vw,13px)}
@keyframes rise{from{opacity:0;transform:translateY(-28px) scale(.94)}}
@keyframes bob{50%{transform:translateY(-5px)}}
.hero-plaque{max-width:540px;margin-bottom:6px;animation:rise .9s .35s cubic-bezier(.2,.8,.2,1) both}
.hero-plaque p{margin:0;font-size:15px;line-height:1.55;font-weight:600;color:var(--text)}
.hero .play-now{margin-top:22px;animation:rise .9s .6s cubic-bezier(.2,.8,.2,1) both}
.alpha-note{margin:22px 0 0;max-width:100%;font:700 12px/1.6 NunitoSans,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff3d6;text-shadow:0 1px 0 #000,0 0 8px #000b;animation:rise .9s .8s both}
.scroll-cue{position:absolute;z-index:3;bottom:22px;right:clamp(18px,3vw,46px);width:26px;height:42px;border:2px solid #eee5d2aa;border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ───── Stone panel: the game's own dialog look (charcoal glass, brass hairline, engraved corners) ───── */
.plaque{position:relative;background:linear-gradient(#35322cf5,#252320f5);color:var(--text);border:1px solid #a58b5a99;border-radius:7px;padding:26px 30px 28px;text-align:left;
  box-shadow:inset 0 0 0 3px #191814aa,inset 0 0 0 4px #ad936340,inset 0 1px 0 4px #dfc78d14,0 14px 34px #000b}
.plaque:before,.plaque:after{content:"";position:absolute;width:30px;height:30px;pointer-events:none;opacity:.85}
.plaque:before{left:5px;top:5px;background:url('../../assets/ui/stone-corners.svg') left top/26px 26px no-repeat}
.plaque:after{right:5px;bottom:5px;background:url('../../assets/ui/stone-corners-bottom.svg') right bottom/26px 26px no-repeat}
.hero-plaque{text-align:center;padding:16px 34px 18px;background:linear-gradient(#35322ce6,#252320e6);backdrop-filter:blur(5px)}
.plaque-kicker{margin:0 0 9px;font:700 11px/1 Cinzel,serif;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-hi)}
.plaque h2{font:400 clamp(26px,2.9vw,38px)/1.12 BreeSerif,Georgia,serif;margin:0 0 14px;color:var(--title);letter-spacing:-.005em;text-shadow:0 2px 0 #0008}
.plaque p{margin:0 0 12px;font-size:15.5px;line-height:1.62;color:var(--muted)}
.plaque p:last-child{margin-bottom:0}
.chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.chips li{font:700 11px/1 NunitoSans,sans-serif;letter-spacing:.05em;padding:7px 11px 6px;background:#1d1c18;border:1px solid #8b7752;border-radius:3px;color:var(--brass-hi);box-shadow:inset 0 1px #ffffff12}

/* ───── chapters: each is a game room behind a stone panel ───── */
.chapter,.finale{position:relative;isolation:isolate;overflow:hidden;background:var(--night)}
.chapter{padding:clamp(70px,11vw,150px) clamp(18px,4vw,60px)}
.room-bg{position:absolute;left:0;right:0;top:-12%;bottom:-12%;z-index:-2;will-change:transform}
.room-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.chapter:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(var(--night) 0,#19191700 22%,#19191700 78%,var(--night) 100%),
  radial-gradient(ellipse at 50% 50%,transparent 40%,#19191799 100%)}
.chapter:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#14111f40}
.chapter-inner{position:relative;max-width:1240px;margin:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.chapter-right .chapter-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}

/* game window: the same stone frame around real recorded footage */
.window{margin:0;background:var(--stone);border:1px solid #a58b5a99;border-radius:7px;padding:0 9px 9px;position:relative;
  box-shadow:inset 0 0 0 3px #191814aa,inset 0 0 0 4px #ad936340,0 24px 50px #000b}
.window-bar{display:flex;align-items:center;gap:10px;padding:11px 6px 9px;font:700 11px/1 Cinzel,serif;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi)}
.window-bar i{width:9px;height:9px;transform:rotate(45deg);background:radial-gradient(circle at 35% 30%,#fff2c0,#c79a3c);box-shadow:0 0 0 2px var(--ink)}
.window-bar b{margin-left:auto;font-weight:700;color:#9b9078;letter-spacing:.18em}
.footage{aspect-ratio:3/2;background:#0d0d0b;border:2px solid var(--ink);overflow:hidden;position:relative}
.footage video{width:100%;height:100%;object-fit:cover;display:block}
.window figcaption{padding:8px 4px 1px;text-align:right;font:700 10px/1 NunitoSans,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8c826d}

/* ───── The Green March ───── */
.march{position:relative;padding:clamp(60px,9vw,120px) 0 clamp(70px,9vw,130px);background:linear-gradient(var(--night),#22201c 30%,#22201c 70%,var(--night));overflow:hidden}
.march-head{max-width:640px;margin:0 auto 46px;text-align:center;padding:0 22px}
.march-head h2{font:400 clamp(38px,5.2vw,68px)/1.02 BreeSerif,Georgia,serif;margin:6px 0 16px;color:var(--title);letter-spacing:-.015em;text-shadow:0 4px 0 var(--ink),0 10px 26px #0008}
.march-head p:last-child{color:var(--muted);font-size:16px;margin:0}
.rooms{list-style:none;margin:0;padding:10px clamp(18px,6vw,90px) 34px;display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#756a55 var(--night)}
.rooms li{flex:0 0 clamp(250px,26vw,380px);scroll-snap-align:center;position:relative;background:linear-gradient(#35322c,#252320);border:1px solid #a58b5a99;border-radius:7px;padding:9px 9px 0;box-shadow:inset 0 0 0 3px #191814aa,inset 0 0 0 4px #ad936340,0 14px 28px #000a;transform:rotate(var(--tilt));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.rooms li:hover{transform:rotate(0) translateY(-8px)}
.rooms img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:2px solid var(--ink)}
.rooms span{display:block;padding:11px 4px 13px;text-align:center;font:400 18px/1.1 BreeSerif,Georgia,serif;color:var(--title);text-shadow:0 2px 0 #0008}

/* ───── finale ───── */
.finale{padding:clamp(100px,15vw,210px) 20px clamp(90px,12vw,170px);text-align:center}
.finale:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--night) 0,#19191733 35%,#19191766 70%,var(--night) 100%),radial-gradient(ellipse at 50% 55%,#12101c99,transparent 70%)}
.finale-inner h2{font:400 clamp(40px,6vw,84px)/1 BreeSerif,Georgia,serif;margin:0 0 38px;color:var(--text);text-shadow:0 5px 0 var(--ink),0 14px 36px #000c}
.finale .alpha-note{animation:none}

footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px clamp(18px,4vw,60px) 24px;background:var(--night);border-top:1px solid #a58b5a66;color:#8f8672;font-size:12px}
.footage-toggle{border:0;background:none;color:#b3a67f;font-size:12px;padding:4px 8px;text-decoration:underline;text-underline-offset:3px}

/* ───── reveal on scroll ───── */
.js .reveal{opacity:0;translate:0 36px;transition:opacity .8s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.d1{transition-delay:.18s}
.js .reveal.in{opacity:1;translate:0 0}

@media(max-width:860px){
  .chapter-inner,.chapter-right .chapter-inner{grid-template-columns:1fr}
  .chapter-right .plaque{order:2}
  .hero-content{padding-top:70px}
  .hero-plaque p{font-size:14px}
}
@media(max-width:560px){
  .site-header nav a:not(.header-signin){display:none}
  .site-brand img{width:108px}
  .play-now{min-width:min(330px,100%);min-height:80px;padding:20px 62px 18px;font-size:32px}
  .gem:first-child{left:24px}.gem:last-child{right:24px}
  .plaque{padding:22px 22px 24px}
  footer{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage,.sun-halo,.mist,.hero-logo,.hero-plaque,.hero .play-now,.alpha-note,.play-now:after,.header-signin:after,.scroll-cue span{animation:none!important}
  .js .reveal{opacity:1;translate:none;transition:none}
}