@charset "UTF-8";
:root{--ink:#17372f;--muted:#596b60;--night:#102d2a;--cream:#f7f3e8;--gold:#ddbc7d;--line:#d6d5c6;--serif:"Yu Mincho","Hiragino Mincho ProN",serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;line-height:1.9}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:5px}img{max-width:100%;height:auto}figure,p,h1,h2,h3{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:500}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b87c23;outline-offset:5px}[hidden]{display:none!important}.sr-only,.skip-link:not(:focus){position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden}.skip-link:focus{position:fixed;top:4px;left:8px;z-index:3000;background:white;padding:8px}.section{max-width:1160px;margin:auto;padding:100px 40px}.eyebrow{font-size:14px;letter-spacing:.19em;line-height:1.6;font-weight:700;color:#8a7045;margin-bottom:18px}.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:44px}.section-heading>p{color:var(--muted);font-size:14px;line-height:2.1}h2{font-size:clamp(29px,3.1vw,42px);line-height:1.6;letter-spacing:.05em}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:56px;padding:13px 24px;font-size:14px;text-decoration:none;border:1px solid #ddbc7d;border-radius:3px;transition:background .2s,transform .2s}.button-gold{background:#e5c78b;color:#193a30}.button-gold:hover{background:#f6dda9;transform:translateY(-2px)}.site-header{height:78px;padding:8px max(24px,calc((100vw - 1160px)/2 + 40px));background:#102d2af5;display:flex;align-items:center;gap:40px;position:sticky;top:0;z-index:40;color:#f5ead2;border-bottom:1px solid #ddbc7d24}.brand{margin-right:auto;line-height:0}.brand img{width:165px;height:62px;object-fit:contain}.site-header nav{display:flex;gap:24px;font-size:14px;white-space:nowrap}.site-header nav a{text-decoration:none}.header-play{border:1px solid #ddbc7d77;text-decoration:none;font-size:14px;padding:8px 14px;white-space:nowrap}.header-play span{margin-left:15px}.hero{background:var(--night);color:#f8efdd;position:relative;overflow:hidden;isolation:isolate}.hero-light{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 75% 25%,#dca65625,transparent 55%),radial-gradient(ellipse at 10% 70%,#305c4d,transparent 70%)}.hero-inner{max-width:1160px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;padding:55px 40px 45px}.hero .eyebrow{color:#d9c397;font-size:14px}.release-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;border:1px solid #d9bc804d;padding:5px 11px;color:#e7d8b8;letter-spacing:.06em}.release-badge i{width:5px;height:5px;border-radius:50%;background:#d9bc80}.hero h1{font-size:clamp(43px,5vw,66px);line-height:1.45;letter-spacing:.04em;margin:25px 0}.hero h1 span{white-space:nowrap}.hero-lead{font-size:14px;line-height:2.15;color:#e2e3d5;margin-bottom:28px}.play-note{font-size:14px;color:#c2cbbb;margin-top:13px;line-height:1.8}.hero-art{position:relative;height:630px;border-radius:220px 220px 5px 5px;border:1px solid #d9bd7d88;padding:8px}.hero-art>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;object-position:center 40%}.hero-art figcaption{position:absolute;bottom:22px;left:23px;right:23px;padding:12px 15px;background:#102d2ad9;backdrop-filter:blur(8px);font-size:14px;letter-spacing:.04em}.hero-art figcaption span{display:block;color:#e2c68e;font-size:14px;letter-spacing:.2em}.art-stamp{position:absolute;top:30%;right:-30px;writing-mode:vertical-rl;font-family:var(--serif);font-size:15px;line-height:2.2;letter-spacing:.1em;background:#142f28eb;padding:18px 10px;box-shadow:0 0 0 1px #ddbc7d66}.hero-foot{border-top:1px solid #d7bd852b;max-width:1080px;margin:auto;padding:20px 0 23px;display:flex;justify-content:space-between;font-size:14px;letter-spacing:.1em;color:#d7d9c9}.hero-foot a{text-decoration:none}.hero-foot a span{margin-left:20px}.mobile-only{display:none}.promise-strip{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:34px;font-size:14px;letter-spacing:.03em;background:#eeeadd}.promise-strip b{color:#b4945c;font-weight:400}.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.story-image{position:relative;overflow:hidden;height:335px;border-radius:4px}.story-image img{display:block;height:100%;width:100%;object-fit:cover;transition:transform .6s}.story-image:hover img{transform:scale(1.025)}.story-grid figure:nth-child(1) img{object-position:center 45%}.story-grid figure:nth-child(2) img{object-position:center 31%}.story-grid figure:nth-child(3) img{object-position:center 23%}.story-image>span{position:absolute;left:12px;top:12px;display:grid;place-items:center;width:32px;height:32px;background:#183a30d9;color:#f7e5bc;border:1px solid #e2c98a88;font:italic 15px Georgia,serif}.story-grid figcaption{padding-top:20px}.story-grid h3{font-size:21px;margin-bottom:10px}.story-grid p{font-size:14px;color:var(--muted);line-height:2}.story-end{text-align:center;padding-top:50px}.story-end>span{color:#a58a54}.story-end p{font-family:var(--serif);font-size:25px;letter-spacing:.05em;margin:12px 0}.story-end small{font-size:14px;color:var(--muted)}.voice-section{background:#e9e6da;border-block:1px solid var(--line)}.voice-inner{padding-block:75px}.voice-intro{display:flex;align-items:end;gap:45px;flex-wrap:wrap;margin-bottom:30px}.voice-intro .eyebrow{width:100%;margin-bottom:-25px}.voice-intro p:last-child{font-size:14px;color:var(--muted);line-height:2}.voice-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.voice-card{position:relative;display:flex;align-items:end;background:#f7f3e8;border:1px solid #c9c9b4;min-height:210px;padding:22px 16px;overflow:hidden}.voice-card>img{position:absolute;right:-23px;top:4px;height:230px;width:170px;object-fit:contain;opacity:.25;pointer-events:none}.voice-card>div{position:relative;z-index:1;width:100%}.voice-card>div>span{font-size:14px;color:#7f643a;letter-spacing:.1em}.voice-card p{font-family:var(--serif);font-size:17px;line-height:1.9;min-height:70px;margin:8px 0 15px}.voice-play{background:#214536;color:white;border:1px solid #214536;border-radius:30px;padding:8px 18px;font-size:14px;min-height:42px}.voice-play[aria-pressed=true]{background:#8a6434;border-color:#8a6434}.voice-play>span{font-size:14px;margin-right:5px}.battle-showcase{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center}.battle-preview{background:#18392e;border:1px solid #a9925b;padding:14px;border-radius:5px;color:#f3e7c9;box-shadow:0 18px 45px #183a3012}.preview-label{display:flex;justify-content:space-between;align-items:center;font-size:14px;letter-spacing:.1em;padding:4px 0 16px;gap:12px}.preview-label span:last-child{font-size:14px;letter-spacing:0}.battle-preview>img{width:100%;display:block;border-radius:3px;height:auto}.battle-demo-buttons{display:flex;gap:6px;flex-wrap:wrap;margin-top:17px}.battle-demo-buttons button{flex:1;white-space:nowrap;background:#f0dfb5;color:#203d31;border:0;border-radius:3px;font-size:14px;min-height:44px;padding:7px 10px}.battle-demo-buttons button:hover{background:#fff0ce}.battle-demo-buttons button:disabled{opacity:.6}.battle-demo-buttons span{font-size:14px}.battle-preview>p{font-size:14px;line-height:1.8;margin-top:11px;color:#d3d9c7}.battle-notes article{position:relative;padding-left:42px}.battle-notes article+article{margin-top:28px}.note-number{position:absolute;left:0;top:3px;font:italic 20px Georgia,serif;color:#a48850}.battle-notes h3{font-size:22px;margin-bottom:9px}.battle-notes p{font-size:14px;color:var(--muted);line-height:2}.map-peek{border-block:1px solid var(--line);margin-top:40px}.map-peek summary{padding:16px 0;cursor:pointer;font-size:14px;display:flex;justify-content:space-between}.map-peek>div{display:flex;align-items:center;gap:35px;padding-bottom:25px}.map-peek img{width:220px;border-radius:4px}.map-peek p{font-size:14px;color:var(--muted)}.village-section{position:relative;background:#dfe5d3;isolation:isolate;overflow:hidden}.village-section:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#e8ecddf5,#e8ecddd9),url('assets/village.jpg') center/cover}.village-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.village-copy>p:not(.eyebrow){font-size:14px;line-height:2.15;margin-top:23px;color:#52664f}.village-copy .village-invite{font-family:var(--serif);font-size:19px!important;color:var(--ink)!important}.small-label{display:inline-block;margin-top:20px;font-size:14px;border-block:1px solid #91a17a;padding-block:9px}.village-chat{background:#f8f5e9e8;border:1px solid #b8c0a5;border-radius:6px;padding:24px;box-shadow:0 18px 50px #31462d14;transform:rotate(-1deg)}.chat-heading{display:flex;align-items:center;gap:14px;border-bottom:1px solid #c8d0b6;margin-bottom:20px;padding-bottom:12px}.chat-heading img{height:64px;width:64px;object-fit:contain}.chat-heading span{font-family:var(--serif);font-size:21px}.chat-heading small{display:block;font-size:14px;color:#6d795e}.chat-line{font-size:14px;margin-top:14px}.chat-line b{font-size:14px;color:#6e7857;font-weight:500}.chat-line p{padding:10px 14px;margin-top:4px;background:#e8ebdc;border-radius:0 10px 10px}.polka-line,.canaria-line{margin-left:35px}.polka-line b{color:#a36e48}.polka-line p{background:#f3e1ce}.canaria-line b{color:#8d7844}.canaria-line p{background:#f1eacb}.characters{background:#f5f1e6}.characters .wrap{max-width:1160px;margin:auto;padding:95px 40px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.section-tag{color:#8a7045;font-size:14px;letter-spacing:.17em;margin-bottom:12px}.section-head p{font-size:14px;color:var(--muted)}.character-tabs{display:flex;gap:8px;margin-bottom:16px}.character-tabs button{min-height:44px;padding:8px 27px;font-size:14px;border:1px solid #9ca98f;background:transparent;color:var(--ink)}.character-tabs button[aria-selected=true]{background:#244636;color:white;border-color:#244636}.character-panel{display:grid;grid-template-columns:1fr 1fr;background:#e8e6d9;border:1px solid #cdd0ba;min-height:460px}.portrait{display:flex;align-items:end;justify-content:center;background:radial-gradient(ellipse,#e2d4af,transparent 70%);overflow:hidden}.portrait img{height:450px;width:100%;object-fit:contain;padding-top:25px}.character-info{align-self:center;padding:35px 45px}.character-info .en{font-size:14px;letter-spacing:.25em;color:#8a7045}.character-info h3{font-size:36px;margin:10px 0}.character-info .role{font-size:14px;padding:4px 10px;border:1px solid #a9b29b;display:inline-block}.character-info p{font-size:14px;color:var(--muted);line-height:2}.character-info .quote{font-family:var(--serif);font-size:24px;line-height:1.8;color:var(--ink);border-left:2px solid #b29961;padding-left:20px;margin:24px 0}.more-companions{margin-top:55px;border-top:1px solid #c9cbb7;padding-top:40px}.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.gallery-heading h3{font-size:27px}.gallery-heading p{font-size:14px;color:var(--muted)}.companion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.companion-card{background:#eeecdf;border:1px solid #d0d1bf}.companion-card[open]{border-color:#b39b61}.companion-card summary{list-style:none;cursor:pointer;padding:13px}.companion-card summary::-webkit-details-marker{display:none}.companion-art{display:block;height:220px;background:radial-gradient(ellipse,#e4dcbd,transparent 70%)}.companion-art img{height:100%;width:100%;object-fit:contain;transition:transform .2s}.companion-card summary:hover img{transform:translateY(-4px)}.companion-heading{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:12px 0 5px}.companion-heading strong{font-family:var(--serif);font-weight:500;font-size:20px}.companion-heading>span,.profile-hint{font-size:14px;color:#707b64}.companion-bio{border-top:1px solid #c9cbb7;padding:13px;font-size:14px;color:var(--muted)}.companion-bio p+p{margin-top:10px}.companion-bio .motif{font-weight:700;color:#6c6948}.gallery-note{font-size:14px;color:#6d7866;margin-top:25px;line-height:2}.journey-banner{background:#193b30;color:#f4e8c8;text-align:center;position:relative;overflow:hidden}.journey-banner:before,.journey-banner:after{content:"✦";position:absolute;color:#dfc07b22;font-size:200px;top:20%;left:4%;line-height:1}.journey-banner:after{left:auto;right:3%;top:40%;font-size:130px}.journey-banner .section{position:relative;z-index:1}.journey-banner .eyebrow{color:#d4b778}.journey-banner h2{font-size:37px;line-height:1.8}.journey-banner h2 span{font:italic 70px/1 Georgia,serif;padding-inline:8px;color:#edcf88}.journey-banner p:not(.eyebrow){font-size:14px;color:#d7dfcd;margin-top:24px}.journey-banner .planned-note{font-size:14px!important;color:#bfcdb4!important}.development{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.development h2{font-size:30px}.development>div>p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:20px}.update-card{border:1px solid #c6c7b4;padding:26px}.update-date{font-size:14px;letter-spacing:.1em;color:#8a7045}.update-card h3{font-size:21px;margin-top:13px}.update-card ul{padding-left:18px;font-size:14px;line-height:2.3}.update-card p{font-size:14px!important;line-height:2}.closing{text-align:center;background:#112d2a;color:#f5e9cd;position:relative;isolation:isolate;overflow:hidden;padding:80px 24px 90px}.closing-fireworks{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 23%;z-index:-2;opacity:.25}.closing:after{content:"";position:absolute;inset:0;background:linear-gradient(#112d2a00,#112d2a);z-index:-1}.closing-logo{width:270px;margin-bottom:22px}.closing .eyebrow{color:#d6bd82;font-size:14px}.closing h2{font-size:42px}.closing p:not(.eyebrow){font-size:14px;margin:20px 0 25px}.closing small{display:block;margin-top:16px;color:#c4cfba;font-size:14px}footer{background:#0d2523;color:#bcc9b5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 6%;font-size:14px}footer a{text-decoration:none}footer>a:first-child{font-family:Georgia,serif;letter-spacing:.13em}.mobile-cta{display:none}.bw-heading button{min-width:70px!important;min-height:34px}.bw-overlay{overscroll-behavior:contain}
@media(max-width:1000px){.site-header{padding-inline:25px;gap:20px}.site-header nav{gap:16px}.hero-inner{gap:35px}.hero-art{height:580px}.art-stamp{right:-14px}.hero-foot{margin-inline:40px}.section-heading{gap:30px}.battle-showcase,.village-grid{gap:35px}.voice-card p{font-size:15px}.battle-notes h3{font-size:20px}.companion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.development{gap:30px}.development h2{font-size:27px}}
@media(max-width:680px){html{scroll-padding-top:77px}.section,.characters .wrap{padding:65px 22px}.site-header{height:67px;padding:5px 18px;gap:18px}.brand img{width:140px;height:57px}.site-header nav{gap:15px;font-size:14px}.site-header nav a:nth-child(2){display:none}.header-play{display:none}.hero-inner{grid-template-columns:1fr;gap:26px;padding:35px 24px 30px}.hero-copy{position:relative;z-index:2}.hero .eyebrow{font-size:14px;letter-spacing:.12em;margin-bottom:13px}.release-badge{font-size:14px;padding:3px 9px}.hero h1{font-size:43px;line-height:1.4;margin:19px 0 16px;letter-spacing:.02em}.hero h1 br{display:none}.hero h1{max-width:330px}.hero h1 span{display:block}.hero-lead{font-size:14px;line-height:2.05;margin-bottom:19px}.hero-lead .mobile-only{display:none}.button{font-size:14px;min-height:51px;padding:11px 20px;gap:30px}.play-note{font-size:14px;margin-top:10px}.hero-art{height:410px;border-radius:160px 160px 4px 4px;margin-left:24px;padding:6px}.hero-art>img{object-position:center 40%}.hero-art figcaption{bottom:17px;left:17px;right:17px;font-size:14px;padding:9px 13px}.art-stamp{writing-mode:vertical-rl;top:22%;left:-24px;right:auto;font-size:14px;padding:14px 8px}.hero-foot{margin-inline:24px;font-size:14px;padding-block:17px}.hero-foot>a{font-size:14px}.promise-strip{padding:19px 22px;gap:9px;justify-content:center;flex-wrap:wrap;font-size:14px;line-height:1.7}.promise-strip b{font-size:14px}.promise-strip>span:last-child{display:none}.promise-strip>b:last-of-type{display:none}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:22px;font-size:14px}h2{font-size:29px}.eyebrow{font-size:14px;margin-bottom:13px}.story-grid{display:flex;gap:17px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 15px;scrollbar-color:#9caa88 transparent;scrollbar-width:thin}.story-grid figure{min-width:86%;scroll-snap-align:start}.story-image{height:350px}.story-grid h3{font-size:21px}.story-grid p{font-size:14px}.story-grid figcaption{padding-top:15px}.story-end{padding-top:30px}.story-end p{font-size:21px;letter-spacing:0}.story-end small{font-size:14px}.voice-inner{padding-block:55px}.voice-intro{display:block;margin-bottom:24px}.voice-intro .eyebrow{margin-bottom:14px}.voice-intro p:last-child{margin-top:19px;font-size:14px}.voice-cards{grid-template-columns:1fr;gap:12px}.voice-card{min-height:160px;padding:20px 24px}.voice-card>img{height:220px;right:-5px;top:-15px;width:180px;opacity:.4}.voice-card>div{width:80%}.voice-card p{font-size:17px;min-height:0;margin-bottom:13px}.voice-card p br{display:none}.voice-play{font-size:14px;padding:7px 16px;min-height:40px}.battle-showcase{grid-template-columns:1fr;gap:35px}.battle-preview{padding:11px}.preview-label{font-size:14px;padding-bottom:12px}.preview-label span:last-child{font-size:14px}.battle-demo-buttons{gap:5px;margin-top:13px}.battle-demo-buttons button{font-size:14px;padding-inline:7px}.battle-notes h3{font-size:22px}.battle-notes p{font-size:14px}.map-peek{margin-top:30px}.map-peek>div{display:block}.map-peek img{display:block;width:250px;max-width:100%;margin:0 auto 20px}.map-peek p{font-size:14px}.village-grid{grid-template-columns:1fr;gap:32px}.village-copy>p:not(.eyebrow){font-size:14px}.village-copy .village-invite{font-size:19px!important}.village-chat{padding:20px 16px;transform:rotate(0)}.chat-heading{gap:10px}.chat-heading img{width:53px;height:53px}.chat-heading span{font-size:19px}.chat-heading small{font-size:14px}.chat-line{font-size:14px}.polka-line,.canaria-line{margin-left:22px}.section-head{display:block;margin-bottom:25px}.section-head p{font-size:14px;margin-top:18px}.character-tabs button{flex:1;padding:7px 9px;font-size:14px}.character-panel{grid-template-columns:1fr}.portrait img{height:350px;padding-top:20px}.character-info{padding:25px}.character-info h3{font-size:30px}.character-info .quote{font-size:22px;margin-block:20px}.character-info p{font-size:14px}.character-info .role{font-size:14px}.more-companions{margin-top:40px;padding-top:30px}.gallery-heading{display:block}.gallery-heading h3{font-size:25px}.gallery-heading p{font-size:14px;margin-top:15px}.companion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.companion-card summary{padding:10px}.companion-art{height:180px}.companion-heading{display:block}.companion-heading strong{font-size:19px}.companion-heading>span{display:block;margin-top:3px}.profile-hint{font-size:14px}.companion-bio{font-size:14px;padding:10px}.gallery-note{font-size:14px;margin-top:20px}.journey-banner h2{font-size:26px}.journey-banner h2 span{font-size:57px;padding-inline:5px}.journey-banner p:not(.eyebrow){font-size:14px}.journey-banner .planned-note{font-size:14px!important}.journey-banner:before{font-size:130px;left:-50px}.journey-banner:after{right:-20px;font-size:100px}.development{grid-template-columns:1fr;gap:27px}.development h2{font-size:27px}.update-card{padding:22px}.update-card h3{font-size:20px}.closing{padding:65px 22px}.closing h2{font-size:34px}.closing p:not(.eyebrow){font-size:14px}.closing-logo{width:240px}footer{padding:24px 22px 99px;flex-wrap:wrap;font-size:14px}footer p{order:3;width:100%}.mobile-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;bottom:0;left:0;right:0;background:#102d2af5;border-top:1px solid #d5b87966;color:#e6e7d7;padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:50;backdrop-filter:blur(10px)}.mobile-cta>span{font-size:14px}.mobile-cta>a{padding:10px 13px;border-radius:2px;background:#e5c78b;text-decoration:none;font-size:14px;color:#17382e;white-space:nowrap;min-height:42px}.mobile-cta>a span{margin-left:10px}}
@media(max-width:350px){.site-header{padding-inline:16px}.brand img{width:128px}.site-header nav{gap:12px}.section,.characters .wrap{padding-inline:18px}.hero-inner{padding-inline:20px}.hero h1{font-size:38px}.hero-art{height:365px}.hero-art figcaption{font-size:14px}.story-grid figure{min-width:92%}.story-image{height:325px}.voice-card{padding-inline:17px}.voice-card p{font-size:16px}.battle-demo-buttons button{font-size:14px;padding-inline:5px}.chat-line{font-size:14px}.chat-heading span{font-size:17px}.companion-art{height:155px}.journey-banner h2{font-size:23px}.journey-banner h2 span{font-size:52px}.mobile-cta>span{font-size:14px}.mobile-cta>a{font-size:14px;padding-inline:10px}.character-info{padding:22px}.hero-lead{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:680px){.hero h1{font-size:clamp(27px,8.5vw,34px);max-width:none}.hero-art{margin-left:22px}}

/* Put the game's world, logo and adventurers in the first view. */
.hero{background:#172f26}
.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:url('assets/forest.webp') center 44%/cover}
.hero-light{background:linear-gradient(90deg,#0d261ed9 0%,#10291f88 50%,#10271c22 100%),linear-gradient(0deg,#102b22ee,transparent 45%)}
.hero-inner{position:relative;min-height:725px;grid-template-columns:1fr 1.1fr;gap:0;padding-top:35px;padding-bottom:75px}
.hero-copy{position:relative;z-index:3}
.hero-game-logo{display:block;width:510px;max-width:115%;height:auto;margin:0 0 8px -25px;filter:drop-shadow(0 3px 2px #fbf3cc99) drop-shadow(0 4px 14px #0a1e15cc)}
.hero .eyebrow{font-size:14px;letter-spacing:.16em;color:#ead8ad;margin-bottom:16px}
.hero h1{font-size:32px;line-height:1.7;letter-spacing:.05em;margin:0 0 17px;text-shadow:0 2px 7px #10291f}
.hero-lead{font-size:14px;margin-bottom:22px;color:#fff1d4;text-shadow:0 1px 5px #10291f}
.hero .play-note{font-size:14px;color:#e0e2cc;margin-top:12px}
.hero-party{border:0;border-radius:0;padding:0;margin:0;position:absolute;right:-45px;bottom:0;width:65%;height:610px;pointer-events:none}
.hero-party>img{position:absolute;bottom:0;border-radius:0;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 14px #0a241c66);width:auto;height:auto}
.hero-party>.hero-march{left:0;width:49%;height:88%;z-index:1}
.hero-party>.hero-canaria{right:0;width:48%;height:88%;z-index:1}
.hero-party>.hero-polka{left:17%;width:65%;height:100%;z-index:2}
.hero-foot{position:relative;z-index:3;margin-top:0}
@media(max-width:1000px) and (min-width:681px){.hero-game-logo{width:440px}.hero h1{font-size:27px}.hero-party{width:65%;height:535px;right:-25px}.hero-inner{min-height:660px}.hero-copy{padding-bottom:40px}.hero-lead{font-size:14px}}
@media(max-width:680px){
 .hero:before{background-position:center 43%}
 .hero-light{background:linear-gradient(180deg,#10291e38 0%,#10291e65 31%,#10291e05 62%,#10291ed9 100%),linear-gradient(90deg,#10291e66,#10291e22)}
 .hero-inner{display:block;min-height:755px;padding:12px 22px 355px}
 .hero-copy{padding:0;z-index:3}
 .hero-game-logo{width:calc(100% + 24px);max-width:none;margin:0 -12px 1px}
 .hero .eyebrow{font-size:14px;letter-spacing:.11em;margin:0 0 10px;text-shadow:0 1px 5px #10291f}
 .hero h1{font-size:25px;line-height:1.6;margin:0 0 12px;letter-spacing:.035em}
 .hero h1 br{display:inline}
 .hero-lead{font-size:14px;line-height:1.9;margin-bottom:16px}
 .hero .button{min-height:45px;padding:10px 18px;font-size:14px}
 .hero .play-note{font-size:14px;line-height:1.8;margin-top:10px;max-width:320px}
 .hero-party{right:-12px;bottom:0;width:calc(100% + 24px);height:365px;margin:0}
 .hero-party>.hero-march{left:0;width:48%;height:89%}
 .hero-party>.hero-canaria{right:0;width:48%;height:89%}
 .hero-party>.hero-polka{left:18%;width:64%;height:100%}
 .hero-foot{padding-block:14px;font-size:14px}
 body[data-hero-visible=true] .mobile-cta{visibility:hidden;pointer-events:none}
}
@media(max-width:350px){.hero-inner{padding-inline:19px;min-height:700px;padding-bottom:330px}.hero h1{font-size:22px}.hero-lead{font-size:14px}.hero .eyebrow{font-size:14px}.hero .play-note{font-size:14px}.hero-party{height:335px}}

/* Readability takes priority over fitting more copy into one screen. */
body{font-size:16px;line-height:1.9}
.hero-lead,.section-heading>p,.story-grid p,.voice-intro p:last-child,.battle-notes p,.map-peek p,.village-copy>p:not(.eyebrow),.chat-line,.character-info p:not(.quote),.companion-bio,.companion-bio p,.section-head p,.gallery-heading p,.journey-banner p:not(.eyebrow),.development>div>p:not(.eyebrow),.update-card ul,.closing p:not(.eyebrow){font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.gallery-note{font-size:15px;line-height:1.9}
.button,.hero .button,.voice-play,.character-tabs button,.battle-demo-buttons button,.mobile-cta>a,.header-play{font-size:15px;min-height:48px}
.eyebrow,.hero .eyebrow{letter-spacing:.08em}
.hero-foot{gap:18px;flex-wrap:wrap;letter-spacing:0}
.preview-label{gap:10px;flex-wrap:wrap;letter-spacing:.03em}
.preview-label span{font-size:14px}
.battle-demo-buttons button{white-space:normal;line-height:1.65}
.companion-heading{flex-wrap:wrap}.profile-hint{display:block;line-height:1.8}
footer{flex-wrap:wrap;line-height:1.9}
.update-date,.section-tag{line-height:1.8}
.bw-overlay .bw-heading,.bw-overlay .bw-heading button,.bw-overlay .bw-stat small,.bw-overlay .bw-name,.bw-overlay .bw-distance,.bw-overlay .bw-penguin{font-size:14px}
.bw-overlay .bw-heading{height:44px}.bw-overlay .bw-heading button{min-height:44px}
.bw-overlay .bw-message{font-size:16px;line-height:1.8;min-height:60px}
@media(max-width:1000px) and (min-width:681px){.site-header{gap:16px;padding-inline:20px}.site-header nav{gap:14px}.header-play{padding:8px 10px}.header-play span{margin-left:6px}.hero-inner{padding-bottom:75px;min-height:770px}.hero-copy{max-width:54%;grid-column:1/-1;padding-bottom:0}.hero-game-logo{max-width:115%}.hero-party{height:500px;width:60%}}
@media(max-width:680px){
 .site-header{gap:14px}.site-header nav{font-size:14px;gap:14px}
 .section,.characters .wrap{padding-inline:22px}
 .hero-inner{padding:12px 22px 0;min-height:0}
 .hero-copy{max-width:none;padding-bottom:0}
 .hero .eyebrow{display:none}
 .hero h1{margin-top:10px}
 .hero-lead{font-size:16px;line-height:1.9}
 .hero .play-note{font-size:14px;max-width:none;line-height:1.8;margin-top:13px}
 .hero-party{position:relative;width:calc(100% + 44px);height:365px;right:auto;bottom:auto;margin:18px -22px 0}
 .hero-foot{display:block;font-size:14px;line-height:1.9}.hero-foot a{display:inline-block;font-size:14px;margin-top:10px;min-height:44px}
 .promise-strip{font-size:14px;gap:9px 15px}.promise-strip b{font-size:14px}
 .story-grid h3{font-size:22px}.story-grid p{font-size:16px}
 .story-end small{font-size:14px;line-height:1.9}
 .voice-intro p:last-child{font-size:16px}
 .voice-card{padding:22px 20px}.voice-card>div{width:100%}.voice-card p{font-size:18px}
 .battle-demo-buttons{gap:8px}.battle-demo-buttons button{flex:1 1 45%;font-size:15px;padding:10px}
 .battle-demo-buttons button:last-child{flex-basis:100%}
 .battle-preview>p{font-size:14px;line-height:1.9}
 .village-copy>p:not(.eyebrow){font-size:16px}
 .chat-heading{align-items:flex-start}.chat-heading small{font-size:14px;line-height:1.8}
 .chat-line{font-size:16px}.chat-line b{font-size:14px}.chat-line p{padding:12px}
 .polka-line,.canaria-line{margin-left:14px}
 .character-info p:not(.quote),.companion-bio,.companion-bio p{font-size:16px}
 .companion-heading strong{font-size:20px}.companion-heading>span,.profile-hint{font-size:14px}
 .character-info .role{font-size:14px;line-height:1.9}
 .gallery-heading p{font-size:16px}.gallery-note{font-size:15px}
 .journey-banner .planned-note{font-size:14px!important;line-height:1.9}
 .development>div>p:not(.eyebrow){font-size:16px}.update-card p{font-size:14px!important;line-height:1.9}
 .update-card ul{font-size:16px;line-height:1.9}
 .closing p:not(.eyebrow){font-size:16px}.closing small{font-size:14px}
 footer{font-size:14px;padding-bottom:110px;gap:16px}
 .mobile-cta{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.mobile-cta>span{display:none}.mobile-cta>a{display:flex;justify-content:center;align-items:center;gap:25px;width:100%;font-size:15px;min-height:48px}
}
@media(max-width:350px){.section,.characters .wrap{padding-inline:18px}.hero-inner{padding-inline:19px}.hero-party{width:calc(100% + 38px);margin-inline:-19px;height:335px}.hero h1{font-size:22px}.site-header{gap:10px}.site-header nav{gap:12px}.hero-lead{font-size:16px}}

.site-header{background:#f7f3e9f5;color:#17372f;border-bottom-color:#d6d5c6}
.header-play{border-color:#a18c5c}

.title-music-listen{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:16px}
.voice-test-note{display:inline-block;margin-top:8px;font-size:14px;line-height:1.9}
.title-music-button{display:inline-flex;align-items:center;gap:9px;min-height:48px;border:1px solid #e4ce98;border-radius:3px;padding:9px 16px;background:#17372fe6;color:#fff1ce;font-size:15px;line-height:1.8}
.title-music-button[aria-pressed=true]{background:#ead3a0;color:#17372f}
.title-music-listen>span{font-size:14px;color:#f5e6bf;text-shadow:0 1px 4px #10291f}
.music-floating{position:fixed;right:18px;bottom:24px;z-index:60;min-height:48px;padding:10px 16px;border:1px solid #bba16c;border-radius:24px;background:#f7f3e9f5;color:#17372f;box-shadow:0 3px 15px #17372f25;font-size:15px;line-height:1.8}
@media(max-width:680px){.music-floating{right:14px;bottom:calc(88px + env(safe-area-inset-bottom))}.title-music-listen{display:block}.title-music-listen>span{display:block;margin-top:8px;line-height:1.8}}

/* October battle update: readable previews of the new character skills. */
.battle-update{max-width:1120px;margin:0 auto;padding:30px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #b4a477;background:#ede7d5;color:#193b30}.battle-update p{font:24px/1.6 var(--serif);margin:6px 0}.battle-update p strong{font-weight:600}.battle-update>div>span:last-child{font-size:16px}.battle-update>a{font-size:16px;text-decoration:none;white-space:nowrap;border-bottom:1px solid #917a48;padding:10px 0}.battle-update .small-label{font-size:14px}.skill-moments{margin-top:54px;border-top:1px solid #b4a477;padding-top:38px}.skill-moments-heading h3{font:32px/1.6 var(--serif);margin:10px 0 14px}.skill-moments-heading>p:last-child{font-size:16px;line-height:1.9}.skill-moment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}.skill-moment{background:#ede9d8;border:1px solid #c4bc9b;overflow:hidden}.skill-moment>img{display:block;width:100%;height:auto;aspect-ratio:18/13;object-fit:cover}.skill-moment>div{padding:22px}.skill-moment .small-label{font-size:14px;line-height:1.8}.skill-moment h4{font:24px/1.6 var(--serif);margin:10px 0 14px}.skill-moment p{font-size:16px;line-height:1.9}.skill-moment button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:22px;border:1px solid #7f885e;border-radius:3px;background:#214739;color:#fff1cd;font:inherit;font-size:16px;cursor:pointer}.skill-moment button:disabled{opacity:.6;cursor:wait}.skill-demo-note{font-size:14px;line-height:1.9;color:var(--muted);margin-top:20px}
@media(max-width:680px){.battle-update{padding:24px 22px;display:block}.battle-update p{font-size:23px}.battle-update p strong{display:block}.battle-update>a{display:inline-block;margin-top:12px}.skill-moment-grid{grid-template-columns:1fr;gap:22px}.skill-moments-heading h3{font-size:27px}.skill-moment>div{padding:20px}.skill-moment h4{font-size:24px}.skill-moments{margin-top:36px}.battle-demo-buttons{grid-template-columns:1fr}.skill-demo-note{font-size:14px}}

.battle-demo-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:680px){.battle-demo-buttons{grid-template-columns:1fr}}

/* Full-voice and browser adventure update, 2026-10-23. */
.browser-adventure h2{font:clamp(30px,5vw,48px)/1.5 var(--serif);margin:12px 0 22px}.browser-lead{font-size:16px;line-height:1.9}.browser-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}.browser-feature-grid>a{display:block;padding:26px;background:#ede7d5;border:1px solid #b4a477;color:#193b30;text-decoration:none;transition:background .2s}.browser-feature-grid>a:hover{background:#e2d9bd}.browser-feature-grid>a:focus-visible{outline:3px solid #825b21;outline-offset:4px}.browser-feature-grid h3{font:24px/1.6 var(--serif);margin:16px 0}.browser-feature-grid p{font-size:16px;line-height:1.9}.browser-feature-grid .small-label,.browser-link{font-size:14px;line-height:1.8}.browser-link{display:block;margin-top:22px;text-decoration:underline;text-underline-offset:5px}@media(max-width:680px){.browser-feature-grid{grid-template-columns:1fr}.browser-feature-grid>a{padding:24px}.browser-adventure h2{font-size:32px}}

/* A brighter invitation to play, plus a lightweight SD chase vignette. */
.hero h1{font-size:clamp(34px,4vw,50px);line-height:1.5;text-wrap:balance}
.hero-lead{font-size:16px;line-height:1.9}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:6px}
.hero-actions .button{min-height:58px;font-size:16px;font-weight:700;box-shadow:0 7px 24px #071b16aa}
.hero-actions .button span,.chase-action a span{display:inline-block;transition:transform .2s}
.hero-actions .button:hover span,.chase-action a:hover span{transform:translate(4px,-2px)}
.hero-more{display:inline-flex;align-items:center;min-height:48px;color:#fff3d7;font-size:15px;text-underline-offset:5px}
.hero-party>.hero-polka{animation:hero-float 3.7s ease-in-out infinite}
.hero-party>.hero-march{animation:hero-float 3.4s ease-in-out -.9s infinite}
.hero-party>.hero-canaria{animation:hero-float 3.8s ease-in-out -1.8s infinite}
@keyframes hero-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.chase-intro{position:relative;overflow:hidden;padding:76px 24px 68px;background:radial-gradient(ellipse at 84% 8%,#f4d899 0,transparent 31%),linear-gradient(140deg,#dbe9c5,#b8d5b4 52%,#e9ddb3);color:#183d32}
.chase-intro:before,.chase-intro:after{position:absolute;pointer-events:none;color:#fff9d9;content:"✦";text-shadow:0 0 22px #fff5a8}
.chase-intro:before{top:17%;left:7%;font-size:25px;animation:twinkle 2.8s ease-in-out infinite}
.chase-intro:after{right:8%;bottom:15%;font-size:35px;animation:twinkle 3.4s ease-in-out -1.2s infinite}
@keyframes twinkle{0%,100%{opacity:.4;scale:.78}50%{opacity:1;scale:1.1}}
.chase-intro-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);align-items:center;gap:18px 42px;max-width:1120px;margin:auto}
.chase-copy .eyebrow{color:#756034;margin-bottom:10px}
.chase-copy h2{font-size:clamp(34px,4vw,48px);line-height:1.45;margin-bottom:14px}
.chase-copy>p:not(.eyebrow){font-size:17px;line-height:1.9}
.chase-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chase-tags span{padding:5px 12px;border:1px solid #789477;border-radius:999px;background:#f7f3e8a8;font-size:13px;font-weight:700}
.chase-stage{position:relative;grid-column:2;grid-row:1 / span 2;isolation:isolate;height:310px;overflow:hidden;border:3px solid #fff7da;border-radius:28px 28px 18px 18px;background:linear-gradient(#9ec5c2 0%,#d8e3bf 66%,#a7c58c 66%,#83a977 100%);box-shadow:0 14px 30px #294a3030}
.chase-stage:before{content:"";position:absolute;inset:5% 0 28%;z-index:-1;background:radial-gradient(ellipse at 8% 95%,#4b7959 0 17%,transparent 18%),radial-gradient(ellipse at 32% 100%,#638b5d 0 19%,transparent 20%),radial-gradient(ellipse at 73% 100%,#557f56 0 21%,transparent 22%),radial-gradient(ellipse at 96% 100%,#719160 0 19%,transparent 20%)}
.chase-stage:after{content:"";position:absolute;right:9%;top:14%;width:48px;height:48px;border-radius:50%;background:#ffe7a3;box-shadow:0 0 40px 12px #fff0bd88}
.chase-ground{position:absolute;right:-10%;bottom:0;left:-10%;height:32%;border-radius:50% 50% 0 0/35% 35% 0 0;background:repeating-linear-gradient(104deg,transparent 0 38px,#d6d08c 39px 43px,transparent 44px 80px),linear-gradient(#9fbd80,#71956d);animation:ground-scroll 1.8s linear infinite}
@keyframes ground-scroll{to{background-position:-90px 0,0 0}}
.chase-party{position:absolute;z-index:2;left:4%;bottom:14%;display:flex;align-items:flex-end;width:48%;height:65%;animation:party-chase 7.2s cubic-bezier(.33,.03,.67,.97) infinite}
.chase-party img{position:relative;width:54%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 5px #213d2c55)}
.chase-party .chase-march{width:48%;margin-left:-7%}
.chase-polka{animation:run-hop .24s ease-in-out infinite alternate}
.chase-march{animation:run-hop .24s ease-in-out -.12s infinite alternate}
.chase-monster{position:absolute;z-index:2;left:69%;bottom:13%;width:22%;height:48%;object-fit:contain;filter:drop-shadow(0 6px 5px #213d2c66);animation:monster-flee 7.2s cubic-bezier(.35,.02,.75,.98) infinite,run-hop .2s ease-in-out infinite alternate}
@keyframes run-hop{to{translate:0 -8px;rotate:4deg}}
@keyframes party-chase{0%,4%{translate:0 0;opacity:1}60%{translate:36% 0;opacity:1}84%{translate:52% 0;opacity:1}94%,100%{translate:58% 0;opacity:0}}
@keyframes monster-flee{0%,4%{translate:0 0;opacity:1}72%{translate:20% 0;opacity:1}92%,100%{translate:27% 0;opacity:0}}
.chase-speech{position:absolute;z-index:3;padding:5px 11px;border:2px solid #183d32;border-radius:14px;background:#fff9e8;color:#183d32;font-size:13px;font-weight:800;box-shadow:0 3px 0 #183d32;animation:speech-bob .6s ease-in-out infinite alternate}
.chase-call{left:13%;bottom:72%}.chase-yelp{right:13%;bottom:66%;background:#fff0c5}
@keyframes speech-bob{to{translate:0 -4px;rotate:-3deg}}
.chase-spark{position:absolute;z-index:3;color:#fff5bd;text-shadow:0 1px 5px #8d6b2c;animation:twinkle 1.1s ease-in-out infinite}
.spark-one{left:58%;top:45%;font-size:26px}.spark-two{right:5%;bottom:43%;font-size:18px;animation-delay:-.5s}
.chase-action{display:flex;grid-column:1;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:4px}
.chase-action>span{font-size:14px;font-weight:700}
.chase-action>a{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:10px 17px;border-radius:999px;background:#214d3c;color:#fff5d8;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 5px 12px #28493430}
body[data-motion-ready=true] [data-reveal]{opacity:0;translate:0 22px;scale:.99;transition:opacity .65s ease,translate .65s ease,scale .65s ease;transition-delay:var(--reveal-delay,0ms)}
body[data-motion-ready=true] [data-reveal].is-visible{opacity:1;translate:0 0;scale:1}
@media(max-width:680px){
 .hero h1{font-size:clamp(29px,8vw,36px);line-height:1.52}
 .hero-lead{font-size:15px}
 .hero-actions{gap:5px 14px}
 .hero-actions .button{width:100%;justify-content:center;gap:16px;min-height:54px}
 .hero-more{font-size:14px;min-height:42px}
 .chase-intro{padding:52px 20px 55px}
 .chase-intro-inner{grid-template-columns:1fr;gap:22px}
 .chase-copy h2{font-size:34px;margin-bottom:8px}
 .chase-copy>p:not(.eyebrow){font-size:15px}
 .chase-tags{margin-top:12px}
 .chase-stage{grid-column:1;grid-row:auto;height:225px;border-radius:23px 23px 15px 15px}
 .chase-party{width:53%;height:70%;bottom:13%}
 .chase-monster{width:22%;height:48%;bottom:13%}
 .chase-action{grid-column:1;justify-content:center;text-align:center}
 .chase-action>span{width:100%}
}
@media(max-width:350px){.hero-actions .button{font-size:14px;padding-inline:14px}.chase-stage{height:200px}.chase-speech{font-size:12px;padding:4px 8px}}
@media(prefers-reduced-motion:reduce){.hero-party>.hero-polka,.hero-party>.hero-march,.hero-party>.hero-canaria,.chase-intro:before,.chase-intro:after,.chase-ground,.chase-party,.chase-polka,.chase-march,.chase-monster,.chase-speech,.chase-spark{animation:none!important}body[data-motion-ready=true] [data-reveal]{opacity:1;translate:none;scale:1}}