@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');
:root { --ink:#203129; --forest:#203a2e; --forest-2:#315342; --paper:#fffaf0; --cream:#f3ecda; --gold:#d9ad59; --gold-light:#f1d994; --line:rgba(30,53,42,.18); --shadow:0 18px 45px rgba(19,34,27,.16); }
* { box-sizing:border-box; }
html { background:#17291f; scroll-behavior:smooth; }
body { background:#eee9dc; color:var(--ink); font-family:"DM Sans",sans-serif; margin:0; min-width:320px; }
a { color:inherit; touch-action:manipulation; }
.about-topbar { align-items:center; background:#17291f; border-bottom:1px solid rgba(255,255,255,.13); color:white; display:flex; height:52px; justify-content:space-between; padding:0 max(18px,calc((100vw - 1180px)/2)); position:sticky; top:0; z-index:20; }
.about-brand { color:#fff8df; font-family:"Fraunces",serif; font-size:19px; font-weight:700; text-decoration:none; }.about-brand span { color:var(--gold-light); margin-right:5px; }
.about-topbar nav { align-items:center; display:flex; gap:4px; }.about-topbar nav a { color:rgba(255,255,255,.75); font-size:11px; padding:8px 11px; text-decoration:none; }.about-topbar nav a:hover { color:white; }.about-topbar .play-link { background:#d6aa55; border-radius:4px; color:#1e3329; font-weight:800; }
main { overflow:hidden; }.eyebrow { color:#92702e; font-size:9px; font-weight:800; letter-spacing:.14em; margin:0 0 7px; }.about-hero { align-items:center; background-image:linear-gradient(90deg,rgba(12,25,19,.76) 0%,rgba(18,35,27,.46) 48%,rgba(15,29,22,.2) 100%),linear-gradient(0deg,rgba(12,24,18,.42),transparent 42%),url("../images/og-image.png"); background-position:center; background-repeat:no-repeat; background-size:cover; color:white; display:flex; min-height:calc(100vh - 52px); padding:72px max(24px,calc((100vw - 1180px)/2)); }.hero-copy { -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); background:linear-gradient(135deg,rgba(21,43,33,.9),rgba(23,43,34,.72)); border:1px solid rgba(239,208,126,.55); border-radius:14px; box-shadow:0 22px 55px rgba(0,0,0,.34); margin:0; max-width:710px; padding:clamp(26px,5vw,52px); text-align:left; }.hero-copy .eyebrow { color:#f0d489; }.hero-copy h1 { color:#fff7db; font-family:"Fraunces",serif; font-size:clamp(38px,5.3vw,68px); line-height:1.03; margin:0; text-shadow:0 3px 20px rgba(0,0,0,.3); }.hero-lead { color:rgba(255,255,255,.86); font-size:clamp(14px,1.7vw,18px); line-height:1.65; margin:20px 0; max-width:650px; }.hero-actions { display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-start; }.hero-actions a { background:rgba(12,26,19,.36); border:1px solid rgba(255,255,255,.4); border-radius:5px; font-size:11px; font-weight:700; padding:11px 15px; text-decoration:none; }.hero-actions a:hover { background:rgba(255,255,255,.12); }.hero-actions a:first-child { background:var(--gold); border-color:var(--gold); color:#20352b; }.hero-actions a:first-child:hover { background:#ebc979; }
.intro-section,.content-section,.career-section,.values-section { margin:auto; max-width:1180px; padding:75px 20px; }.intro-section { display:grid; gap:30px; grid-template-columns:.8fr 1.2fr; }.intro-section h2,.section-heading h2,.career-copy h2,.values-section h2,.final-cta h2 { font-family:"Fraunces",serif; font-size:clamp(28px,4vw,43px); line-height:1.1; margin:0; }.intro-section>p { color:#59675f; font-size:14px; line-height:1.75; margin:0; }.game-numbers { display:grid; gap:1px; grid-column:1/-1; grid-template-columns:repeat(4,1fr); margin:10px 0 0; overflow:hidden; }.game-numbers div { background:#e3ded1; border:1px solid rgba(30,53,42,.1); padding:20px; text-align:center; }.game-numbers dt { color:#84642a; font-family:"Fraunces",serif; font-size:31px; font-weight:700; }.game-numbers dd { color:#66736b; font-size:10px; margin:3px 0 0; text-transform:uppercase; }
.content-section { border-top:1px solid var(--line); }.section-heading { margin:0 auto 35px; max-width:730px; text-align:center; }.section-heading>p:last-child { color:#627068; font-size:13px; line-height:1.6; }.play-steps { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); list-style:none; margin:0; padding:0; }.play-steps li { background:var(--paper); border:1px solid var(--line); border-radius:10px; display:grid; gap:13px; grid-template-columns:45px 1fr; padding:18px; }.play-steps li>span { color:#c19645; font-family:"Fraunces",serif; font-size:21px; }.play-steps h3,.feature-grid h3 { font-family:"Fraunces",serif; font-size:17px; margin:0; }.play-steps p,.feature-grid p { color:#5e6b63; font-size:11.5px; line-height:1.55; margin:5px 0 0; }
.characters-section { max-width:none; padding-left:max(20px,calc((100vw - 1180px)/2)); padding-right:max(20px,calc((100vw - 1180px)/2)); }.character-grid { display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); }.character-grid article { background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 28px rgba(19,34,27,.08); overflow:hidden; }.character-grid article:nth-child(5) { grid-column:2; }.character-grid article:nth-child(6) { grid-column:3; }.character-grid img { aspect-ratio:1/1; display:block; object-fit:cover; width:100%; }.character-grid article>div { padding:17px; }.character-grid small { color:#92702e; font-size:8px; font-weight:800; letter-spacing:.1em; }.character-grid h3 { font-family:"Fraunces",serif; font-size:22px; margin:3px 0 7px; }.character-grid p { color:#5e6b63; font-size:11px; line-height:1.55; margin:0; }
.offline-section { align-items:center; background:#e4ded0; border-top:1px solid var(--line); display:grid; gap:65px; grid-template-columns:1fr 1fr; padding:75px max(20px,calc((100vw - 1180px)/2)); }.offline-copy h2 { font-family:"Fraunces",serif; font-size:clamp(28px,4vw,43px); line-height:1.1; margin:0; }.offline-copy>p:last-of-type { color:#59675f; font-size:13px; line-height:1.75; margin:17px 0; }.offline-copy ul { color:#526158; display:grid; font-size:11.5px; gap:8px; line-height:1.55; list-style:none; margin:0; padding:0; }.offline-copy li { padding-left:19px; position:relative; }.offline-copy li::before { color:#9a7432; content:"✦"; left:0; position:absolute; }.offline-preview { background:var(--paper); border:3px ridge #b89c64; border-radius:12px; box-shadow:var(--shadow); padding:27px; text-align:center; }.offline-sun { color:#71866f; display:block; font-size:29px; }.offline-preview>small { color:#8b6329; font-size:9px; font-weight:800; letter-spacing:.15em; }.offline-preview h3 { font-family:"Fraunces",serif; font-size:25px; line-height:1.15; margin:5px 0 7px; }.offline-preview>p { color:#627068; font-size:12px; margin:0 0 14px; }.offline-rewards { display:grid; gap:6px; grid-template-columns:repeat(3,1fr); }.offline-rewards article { background:linear-gradient(145deg,#294438,#1d342b); border:1px solid rgba(218,177,87,.55); border-radius:8px; color:white; display:grid; gap:3px; padding:12px 7px; }.offline-rewards article>span { color:#e9c86f; font-family:"Fraunces",serif; font-size:16px; }.offline-rewards small { color:#cfdbd2; font-size:7px; font-weight:800; letter-spacing:.07em; }.offline-rewards strong { color:#f3d98f; font-family:"Fraunces",serif; font-size:14px; }.offline-preview .offline-rate { font-size:9.5px; margin:9px 0 0; }.offline-new { background:#eee9dc; border:1px solid rgba(41,66,56,.12); border-radius:7px; display:grid; gap:5px; margin-top:12px; padding:10px 12px; text-align:left; }.offline-new strong { color:#76591f; font-family:"Fraunces",serif; font-size:12px; }.offline-new span { color:#59675f; font-size:9.5px; }
.career-section { align-items:start; background:#203a2e; color:white; display:grid; gap:55px; grid-template-columns:.7fr 1.3fr; max-width:none; padding-left:max(20px,calc((100vw - 1180px)/2)); padding-right:max(20px,calc((100vw - 1180px)/2)); }.career-copy .eyebrow { color:#e6c875; }.career-copy h2 { color:#fff1c5; }.career-copy>p:last-child { color:#c9d4cd; font-size:12px; line-height:1.65; }.career-track { display:grid; gap:5px; list-style:none; margin:0; padding:0; }.career-track li { align-items:center; background:rgba(255,255,255,.06); border-left:3px solid #d2a64f; display:grid; gap:11px; grid-template-columns:38px 1fr; padding:10px 12px; }.career-track b { align-items:center; background:#f0d17c; border-radius:50%; color:#203a2e; display:flex; font-family:"Fraunces",serif; height:33px; justify-content:center; width:33px; }.career-track strong,.career-track small { display:block; }.career-track strong { color:#fff5d3; font-family:"Fraunces",serif; font-size:13px; }.career-track small { color:#bfcac3; font-size:9.5px; margin-top:2px; }
.features-section { padding-bottom:85px; }.feature-grid { display:grid; gap:10px; grid-template-columns:repeat(3,1fr); }.feature-grid article { background:var(--paper); border:1px solid var(--line); border-radius:10px; min-height:178px; padding:18px; }.feature-grid article>span { align-items:center; background:var(--forest); border-radius:50%; color:#efd27f; display:flex; font-family:"Fraunces",serif; font-size:18px; height:38px; justify-content:center; margin-bottom:12px; width:38px; }
.values-section { align-items:start; border-top:1px solid var(--line); display:grid; gap:50px; grid-template-columns:.8fr 1.2fr; }.values-copy p { color:#59675f; font-size:13px; line-height:1.75; margin:0 0 14px; }.final-cta { align-items:center; background:linear-gradient(135deg,#294a39,#172d23); border-bottom:1px solid rgba(255,255,255,.1); color:white; display:grid; gap:20px; grid-template-columns:60px minmax(0,1fr) auto; padding:38px max(20px,calc((100vw - 1180px)/2)); }.final-cta>span { align-items:center; background:#efd17c; border-radius:50%; color:#203a2e; display:flex; font-size:27px; height:55px; justify-content:center; width:55px; }.final-cta .eyebrow { color:#e4c66f; }.final-cta h2 { color:#fff4d0; font-size:31px; }.final-cta p:last-child { color:#cbd6cf; font-size:11px; margin:6px 0 0; }.final-cta>a { background:var(--gold); border-radius:5px; color:#1d3328; font-size:11px; font-weight:800; padding:12px 16px; text-decoration:none; }
footer { align-items:center; background:#17291f; color:#b9c4bd; display:flex; font-size:9.5px; justify-content:space-between; padding:20px max(20px,calc((100vw - 1180px)/2)); }footer a { color:#efd17c; text-decoration:none; }footer p { margin:0; }
@media(max-width:820px){.intro-section,.offline-section,.career-section,.values-section{grid-template-columns:1fr}.offline-section{gap:34px}.career-section{gap:28px}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-grid article:nth-child(5),.character-grid article:nth-child(6){grid-column:auto}.feature-grid{grid-template-columns:repeat(2,1fr)}.final-cta{grid-template-columns:50px 1fr}.final-cta>a{grid-column:2;justify-self:start}}
@media(max-width:560px){.about-topbar nav a:not(.play-link){display:none}.about-hero{align-items:flex-end;background-position:50% center;min-height:calc(100svh - 265px);padding:28px 14px}.hero-copy{padding:24px 20px}.hero-copy h1{font-size:38px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions a{text-align:center}.game-numbers{grid-template-columns:repeat(2,1fr)}.play-steps,.character-grid,.feature-grid{grid-template-columns:1fr}.intro-section,.content-section,.offline-section,.career-section,.values-section{padding-bottom:52px;padding-top:52px}.character-grid article{align-items:center;display:grid;grid-template-columns:112px minmax(0,1fr)}.character-grid img{height:100%;min-height:150px}.character-grid article>div{padding:14px}.offline-preview{padding:21px 14px}.offline-rewards{grid-template-columns:1fr}.offline-rewards article{align-items:center;grid-template-columns:22px 1fr auto;padding:8px 10px;text-align:left}.offline-rewards article>span{grid-row:1/span 2}.offline-rewards strong{grid-column:3;grid-row:1/span 2}.final-cta{grid-template-columns:1fr;text-align:center}.final-cta>span{margin:auto}.final-cta>a{grid-column:1;justify-self:center}footer{align-items:center;flex-direction:column;gap:8px;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}