/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4
 * genre: editorial · macrostructure: Workbench · theme: Garden
 * nav: N9 Edge-aligned minimal · footer: Ft1 Mast-headed
 * audience: first-time Steam visitors · use: understand the game and reach support
 * tone: rustic, cute, calm · enrichment: real game captures, no fabricated chrome
 * Existing Lora identity and M PLUS Rounded Japanese typography are preserved.
 */
@font-face{font-family:"Grove Round";src:url("MPLUSRounded-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Grove Serif";src:url("Lora.ttf") format("truetype");font-weight:400 700;font-display:swap}
:root{
 --font-display:"Grove Serif","Grove Round",serif;--font-body:"Grove Round",sans-serif;
 --color-paper:oklch(96% .023 90);--color-paper-2:oklch(92% .026 90);--color-ink:oklch(25% .035 145);
 --color-muted:oklch(43% .028 135);--color-rule:oklch(72% .025 110);--color-accent:oklch(39% .078 143);
 --color-focus:oklch(48% .105 65);--color-selection:oklch(84% .08 110);--color-dialog:oklch(18% .02 145 / .94);
 --color-transparent:transparent;--color-shadow:oklch(20% .015 145 / .12);--color-photo:oklch(91% .03 95);
 --space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;
 --page-gutter:clamp(1.25rem,4.5vw,4rem);--radius:5px;--ease-out:cubic-bezier(.16,1,.3,1);--dur-micro:120ms;--dur-short:220ms;
 --z-base:1;--z-raised:10;--z-modal:400;--z-tooltip:600;
}
*{box-sizing:border-box}html,body{overflow-x:clip}html{scroll-padding-top:var(--space-xl)}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:1rem;line-height:1.8;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--color-selection);color:var(--color-ink)}
button,a,summary{-webkit-tap-highlight-color:var(--color-transparent)}
a{color:var(--color-accent);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--color-ink);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:5px}
button{font:inherit;color:inherit}button:disabled{cursor:default;opacity:.65}
img{display:block;max-width:100%;height:auto}figure{margin:0}p{margin:0 0 var(--space-lg);max-width:66ch}
h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:700;line-height:1.3;letter-spacing:-.025em;overflow-wrap:anywhere;min-width:0;margin:0 0 var(--space-lg);white-space:pre-line}
h1{font-size:clamp(2.25rem,4.3vw,4.4rem)}h2{font-size:clamp(1.8rem,3vw,2.9rem)}h3{font-size:clamp(1.3rem,2vw,1.8rem)}
html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3{line-height:1.5;letter-spacing:.015em}
.wrap{width:min(100% - var(--page-gutter)*2,76rem);margin-inline:auto}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding-block:var(--space-lg)}
.brand{font-family:var(--font-display);font-weight:700;line-height:1.1;font-size:clamp(1.2rem,2.4vw,1.8rem);text-decoration:none;white-space:nowrap;color:var(--color-ink);letter-spacing:-.045em}
.brand span{font-weight:400;letter-spacing:-.04em}
.language-switch{display:flex;flex-shrink:0;gap:var(--space-2xs);align-items:center}
.language-switch button{background:var(--color-transparent);border:0;min-height:44px;min-width:44px;padding:var(--space-xs);font-size:.78rem;cursor:pointer;white-space:nowrap;position:relative}
.language-switch button[aria-pressed=true]::after{content:"";height:2px;position:absolute;inset-inline:var(--space-xs);bottom:4px;background:var(--color-accent)}
.language-switch button:hover{background:var(--color-paper-2)}
.skip-link{position:fixed;z-index:var(--z-tooltip);top:-6rem;left:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-paper);font-weight:700}
.skip-link:focus{top:var(--space-md)}
.home-opening{display:grid;gap:var(--space-2xl);padding-block:var(--space-xl) var(--space-2xl)}
.home-copy{align-self:center}.home-copy .text-link{display:inline-flex;margin-inline-end:var(--space-xl);margin-top:var(--space-xs)}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.85}
.home-picture{align-self:center;background:var(--color-photo)}.home-picture img{width:100%}
figcaption{font-size:.85rem;line-height:1.7;color:var(--color-muted);padding-top:var(--space-sm)}
.home-picture figcaption{padding:var(--space-sm) var(--space-md);background:var(--color-paper)}
.text-link,.button-link{font-weight:700;white-space:nowrap;min-height:44px;align-items:center;gap:var(--space-xs)}
.text-link{display:inline-flex;text-decoration:underline}
.button-link{display:inline-flex;border:1px solid var(--color-accent);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius);text-decoration:none;transition:transform var(--dur-micro) var(--ease-out)}
.button-link:hover{transform:translateY(-1px)}.button-link:active{transform:translateY(1px)}
.game-entry{padding-block:var(--space-2xl);border-top:1px solid var(--color-rule);display:grid;gap:var(--space-xl)}
.entry-line{white-space:pre-line;font-size:clamp(1.15rem,2vw,1.7rem);font-weight:700;line-height:1.7}
.release-note{align-self:center;padding-block:var(--space-lg);max-width:32rem}
.release-note p{margin-bottom:var(--space-sm)}.price{font-family:var(--font-display);font-size:1.65rem;font-weight:700}
.muted{color:var(--color-muted);font-size:.9rem}.status{font-weight:700;font-size:1.25rem}
.contact-section{padding-block:var(--space-2xl) var(--space-3xl)}
.contact-email{display:inline-block;font-size:clamp(.95rem,2.1vw,1.55rem);font-weight:700;margin-bottom:var(--space-lg);white-space:nowrap}
.site-footer{border-top:1px solid var(--color-rule);padding-block:var(--space-xl);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-lg)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg)}.footer-links .text-link{font-size:.85rem}.site-footer small{color:var(--color-muted);font-size:.75rem}
.game-intro{display:grid;gap:var(--space-xl);padding-block:var(--space-xl) var(--space-xl)}
.game-logo{width:min(100%,31rem);margin-bottom:var(--space-lg)}.game-logo svg{width:100%;display:block;height:auto}
.game-logo-en{font-family:var(--font-display);font-size:clamp(2.5rem,5.3vw,4.75rem);font-weight:700;line-height:1.1;letter-spacing:-.045em;margin-bottom:var(--space-lg)}
.game-tagline{font-weight:700;font-size:clamp(1.4rem,2.5vw,2rem);white-space:pre-line;line-height:1.6;margin-bottom:var(--space-lg)}
.release-note dl{margin:var(--space-lg) 0}.release-note dl>div{padding-block:var(--space-xs);border-bottom:1px solid var(--color-rule);display:flex;justify-content:space-between;gap:var(--space-md)}
dt{color:var(--color-muted)}dd{margin:0;font-weight:700}dd small{font-size:.73rem;font-weight:400}
.capture{width:100%;min-width:0}.image-open{display:block;width:100%;padding:0;margin:0;border:0;background:var(--color-photo);cursor:zoom-in;overflow:clip}.image-open img{width:100%}
.image-open:hover{outline:1px solid var(--color-accent);outline-offset:4px}
.wide-capture{padding-bottom:var(--space-2xl)}.puzzle-story{padding-block:var(--space-xl) var(--space-2xl)}
.scenery-pair{display:grid;gap:var(--space-xl);margin-top:var(--space-2xl)}
.comfort-note{margin-top:var(--space-xl);max-width:50rem;padding-block:var(--space-lg)}
.side-games{border-top:1px solid var(--color-rule);padding-block:var(--space-2xl)}
.mode-feature{display:grid;gap:var(--space-lg);margin-top:var(--space-2xl)}.mode-feature>div{align-self:center}
.editor-story{padding-block:var(--space-xl) var(--space-2xl)}.editor-layout{display:grid;gap:var(--space-lg)}.editor-layout>p{align-self:end}
.play-details{padding-block:var(--space-xl) var(--space-3xl);max-width:58rem}
.spec-list{margin:var(--space-xl) 0 var(--space-2xl)}.spec-list>div{display:grid;gap:var(--space-xs);padding-block:var(--space-md);border-bottom:1px solid var(--color-rule)}
details{border-top:1px solid var(--color-rule);padding-block:var(--space-md)}details:last-of-type{border-bottom:1px solid var(--color-rule)}summary{cursor:pointer;font-weight:700;white-space:nowrap;min-height:44px;line-height:44px}details p{padding-top:var(--space-sm);margin-bottom:var(--space-md)}
.privacy-page{max-width:52rem;padding-block:var(--space-xl) var(--space-3xl)}.privacy-page h1{font-size:clamp(1.9rem,3vw,3rem)}.privacy-page section{padding-top:var(--space-xl)}.privacy-page h2{font-size:clamp(1.4rem,2vw,1.8rem)}.privacy-page .contact-email{font-size:clamp(.95rem,2vw,1.3rem)}
.image-dialog{border:0;padding:var(--space-lg);background:var(--color-paper);color:var(--color-ink);max-width:min(96%,96rem);max-height:94dvh;overflow:auto;border-radius:var(--radius)}
.image-dialog::backdrop{background:var(--color-dialog)}.image-dialog[open]{animation:dialog-in var(--dur-short) var(--ease-out)}
.image-dialog>img{max-height:calc(94dvh - 8rem);width:auto;max-width:100%;object-fit:contain;margin:auto}.image-dialog>p{font-size:.9rem;margin:var(--space-sm) 0 0}
.dialog-close{display:block;margin:0 0 var(--space-sm) auto;width:44px;height:44px;line-height:1;cursor:pointer;background:var(--color-paper);border:1px solid var(--color-rule);font-size:1.75rem;border-radius:var(--radius)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:clip;clip-path:inset(50%);white-space:nowrap;border:0}
[data-language-only=en]{display:none}html[data-language=en] [data-language-only=en]{display:block}html[data-language=en] [data-language-only=ja]{display:none}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:40rem){.language-switch button{font-size:.85rem;padding-inline:var(--space-sm)}.home-opening{padding-top:var(--space-2xl)}.spec-list>div{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr)}.scenery-pair{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}.scenery-pair>.capture:last-child{margin-top:var(--space-2xl)}.site-footer{flex-direction:row;align-items:center;flex-wrap:wrap}.site-footer small{margin-inline-start:auto}}
@media(min-width:60rem){.home-opening{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:var(--space-xl);padding-bottom:var(--space-3xl)}.home-picture{margin-inline-end:calc(var(--page-gutter)*-.45)}.game-entry{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--space-3xl)}.game-intro{grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);gap:var(--space-3xl);padding-bottom:var(--space-2xl)}.mode-feature{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--space-2xl)}.mode-feature.reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}.mode-feature.reverse>.capture{order:2}.editor-layout{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--space-2xl)}.contact-section{padding-top:var(--space-3xl)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button-link,.image-dialog[open]{animation:none;transition:none}.button-link:hover,.button-link:active{transform:none}}

a:active{color:var(--color-ink)}.language-switch button:active,.dialog-close:active{background:var(--color-selection)}.image-open:active{outline:3px solid var(--color-accent);outline-offset:0}summary:active{color:var(--color-accent)}

.game-intro{grid-template-areas:"copy" "capture" "release"}.game-intro-copy{grid-area:copy}.intro-capture{grid-area:capture}.game-intro>.release-note{grid-area:release}.game-intro>.wide-capture{padding-bottom:0}@media(min-width:60rem){.game-intro{grid-template-areas:"copy release" "capture capture"}}
