/* DaoGo's own world: the plum night of its menu, champagne gold frames, one sakura pink for what is alive, and the
   sunlit wood of the game's room as the only warm surface. Layout: the room first, then bands that alternate night and wood. */
:root{
 color-scheme:dark;
 --night:#151117;--deep:#100d12;--raised:#1b161d;--text:#ece6e2;--mist:#cdbdc2;--gold:#d9b47c;--sakura:#e8a9b8;--lantern:#f6dcc0;--wood:#d9a566;--wood-line:#4a3120;
 --display:'Noto Serif JP','Times New Roman',serif;--body:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
 --gutter-l:max(20px,env(safe-area-inset-left,0px));--gutter-r:max(20px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--night);color:var(--text);font:400 17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;color:var(--lantern);margin:0}
h2{font-size:clamp(30px,4.4vw,46px);line-height:1.2}
h3{font-size:26px;line-height:1.3}
p{margin:0}
:focus-visible{outline:2px solid var(--sakura);outline-offset:3px}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;gap:20px;padding:12px var(--gutter-r) 12px var(--gutter-l);background:#151117ee;border-bottom:1px solid #d9b47c55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--night)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 15px var(--body);letter-spacing:.2em;color:var(--mist)}
.mark img{width:30px;height:30px}
.bar nav{display:flex;gap:22px;margin-left:auto}
.bar nav a{text-decoration:none;color:var(--mist);font-size:15px}
.bar nav a:hover{color:var(--lantern)}
.lang{display:flex;border:1px solid #d9b47c88;border-radius:7px;overflow:hidden}
.lang button{font:600 13px var(--body);padding:5px 10px;border:0;background:none;color:var(--mist);cursor:pointer}
.lang button[aria-pressed=true]{background:#d9b47c33;color:var(--lantern)}

.hero{position:relative;background:var(--deep)}
.hero-art{width:100%;height:auto;max-height:82vh;object-fit:cover;object-position:50% 40%}
/* The logo's black ink sits on the sunlit linen of the room; the words sit on the night band under it. */
.logo{position:absolute;left:3.5%;top:clamp(12px,3vw,44px);width:clamp(84px,14vw,230px)}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px clamp(28px,6vw,80px);align-items:center;max-width:1160px;margin:auto;padding-block:clamp(28px,4vw,48px);padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.tag{grid-column:1;font:400 clamp(24px,3vw,34px)/1.3 var(--display);color:var(--lantern)}
.lead{grid-column:1;color:var(--text);max-width:52ch}
.actions{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 20px}
.steam{padding:11px 20px;border:1px solid var(--gold);border-radius:8px;background:#100d12d9;color:var(--lantern);font-weight:600}
.quiet{color:var(--sakura);text-underline-offset:4px}

.try{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(28px,6vw,80px);align-items:center;max-width:1160px;margin:auto;padding-block:clamp(56px,8vw,104px);padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.try-copy{display:grid;gap:14px;justify-items:start;min-width:0}
.kicker{color:var(--sakura);font-size:14px;letter-spacing:.08em}
#lesson-text{min-height:7.5em;max-width:46ch}
.steps{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.steps li{width:30px;height:4px;border-radius:2px;background:#cdbdc240}
.steps li.on{background:var(--sakura)}
.again{font:500 15px var(--body);padding:8px 14px;background:none;color:var(--lantern);border:1px solid var(--gold);border-radius:7px;cursor:pointer}
.wood{padding:14px;background:linear-gradient(100deg,#e2b277,#d39c5c 45%,#dcaa6c);border-radius:6px;box-shadow:0 18px 40px #0009}
#board{display:block;width:100%;height:auto;touch-action:manipulation}
#board .grid{stroke:var(--wood-line);stroke-width:1.2}
#board .hoshi{fill:var(--wood-line)}
#board .hit{fill:transparent;cursor:pointer}
#board .target{fill:none;stroke:#8f2f52;stroke-width:3;animation:pulse 1.5s ease-in-out infinite}
#board .black{fill:#17131a}
#board .white{fill:#f2eee8;stroke:#0005}
#board .area{fill:#17131a;opacity:.55}
@keyframes pulse{50%{opacity:.25}}

.game{background:var(--deep);padding-block:clamp(56px,8vw,104px);padding-left:var(--gutter-l);padding-right:var(--gutter-r);display:grid;gap:clamp(36px,5vw,64px)}
.game>*{width:100%;max-width:1160px;margin-inline:auto}
.row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.row>div,.room>div{display:grid;gap:10px;min-width:0}
.row img,.room img{border:1px solid #d9b47c88;border-radius:8px}
.row.flip img{order:2}
.facts{list-style:none;margin:0 auto;padding:22px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:1px solid #d9b47c55}
.facts li{display:grid;gap:2px}
.facts b{font:600 24px var(--display);color:var(--lantern);font-variant-numeric:tabular-nums}
.facts span{color:var(--mist);font-size:15px}

.room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1160px;margin:auto;padding-block:clamp(56px,8vw,104px);padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.room img{order:2}

.faq{background:var(--deep);padding-block:clamp(56px,8vw,96px);padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.faq>*{max-width:760px;margin-inline:auto}
.faq h2{margin-bottom:20px}
details{border-top:1px solid #d9b47c44;padding-block:14px}
summary{cursor:pointer;font-weight:600;color:var(--lantern)}
details p{margin-top:8px;color:var(--mist)}

.press{max-width:1160px;margin:auto;padding-block:clamp(56px,8vw,96px);padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.press-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);margin-top:22px}
dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;margin:0}
dt{color:var(--mist)}dd{margin:0}
.press-files{display:grid;gap:8px;align-content:start;min-width:0}
.press-files a{color:var(--sakura);text-underline-offset:4px}

footer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:22px var(--gutter-r) 26px var(--gutter-l);border-top:1px solid #d9b47c55;color:var(--mist);font-size:14px}
footer img{width:24px;height:24px}
.small{flex-basis:100%;color:#a99aa0}

@media(max-width:860px){
 .bar nav{display:none}.lang{margin-left:auto}
 .hero-copy{grid-template-columns:minmax(0,1fr)}
 .actions{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:8px}
 .try,.row,.room,.press-grid{grid-template-columns:minmax(0,1fr)}
 .row.flip img,.room img{order:0}
 .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 #lesson-text{min-height:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#board .target{animation:none}}