@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#f1efdb;--muted:#b9c5af;--gold:#e7c883;--green:#172c23;--serif:'Noto Serif JP','Hiragino Mincho ProN',serif;--sans:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif}
*{box-sizing:border-box}body{margin:0;background:#13271f;color:var(--ink);font-family:var(--sans);font-size:16px;background-image:radial-gradient(ellipse at 50% 30%,#31453566,transparent 65%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button{color:inherit}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.shell{width:min(1280px,calc(100% - 96px));margin:auto;padding:28px 0 18px}.topbar{height:72px;display:flex;align-items:flex-start;justify-content:space-between}.brand{display:flex;gap:13px;color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:19px;letter-spacing:.13em;align-items:center}.brand-mark{font-size:44px;line-height:1;color:var(--gold);transform:rotate(-25deg)}.brand small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.25em;color:#b7bc9e;margin-top:7px}.top-actions{display:flex;gap:10px}.icon-button{width:42px;height:42px;background:transparent;border:1px solid #dbe2be36;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:21px;transition:.2s}.icon-button:hover{background:#c5d6b315;border-color:#dbe2be88}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.game-frame{height:min(690px,calc(100svh - 208px));min-height:460px;position:relative;border-radius:22px;overflow:hidden;background:#3e4e2c;isolation:isolate;border:1px solid #c6cc9b36;box-shadow:0 24px 70px #071b174d}.forest-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#263920cc,#34412c00),url('./assets/forest-friend.jpeg') center 28%/cover;filter:blur(12px);transform:scale(1.05);opacity:.68;z-index:-3}.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,#102b24e8 0%,#183629c7 35%,#17312522 70%),linear-gradient(0deg,#0e29187a,transparent 30%);z-index:-2}.game-frame.assets-ready .forest-backdrop{background:url('./assets/forest-background.png') center center/cover no-repeat;filter:none;transform:none;opacity:1}.start-screen{position:absolute;inset:0;display:grid;grid-template-columns:1.04fr 1fr;align-items:center}.intro{padding:0 0 28px 8%;z-index:2;position:relative}.eyebrow{font-size:13px;letter-spacing:.2em;color:#d6d7b2;display:flex;align-items:center;gap:12px;margin:0 0 25px}.eyebrow>span{height:1px;background:#d6d7b2;width:28px}h1{font-family:var(--serif);font-size:clamp(34px,4.25vw,61px);font-weight:500;line-height:1.52;letter-spacing:.085em;margin:0 0 21px;position:relative;white-space:nowrap}h1>span{display:inline-block;color:#e0c789;font-size:.55em;margin-left:12px;vertical-align:middle;transform:rotate(-25deg)}.intro p{font-size:15px;line-height:2.2;color:#d0d9c3;letter-spacing:.045em;margin:0 0 31px}.primary-button{background:#ead39c;color:#273c2c;border:1px solid #f9e6b9;box-shadow:0 5px 25px #0e201c22;border-radius:9px;padding:17px 23px;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:35px;font-size:16px;font-weight:600;letter-spacing:.05em;transition:background .2s,transform .2s}.primary-button:hover{background:#f8e2aa;transform:translateY(-2px)}.primary-button:active{transform:translateY(1px)}.primary-button>span+span{font-size:22px;font-weight:400}.start-notes{display:flex;gap:17px;font-size:12px;color:#c4cbaa;margin-top:16px;letter-spacing:.06em}.start-notes span+span{border-left:1px solid #c4cbaa4d;padding-left:17px}.portrait-wrap{height:88%;align-self:end;position:relative;display:flex;justify-content:center;align-items:center;margin-right:5%}.portrait-wrap img{width:100%;height:90%;object-fit:contain;border-radius:50% 50% 25% 25%;mask-image:linear-gradient(0deg,transparent,black 8%,black 95%,transparent)}.assets-ready .portrait-wrap{height:98%;margin:0 3% 0 -10%;align-self:end}.assets-ready .portrait-wrap img{height:94%;width:100%;object-fit:contain;mask-image:none;border-radius:0;filter:drop-shadow(0 18px 12px #21311755);animation:float 5s ease-in-out infinite}.friend-caption{position:absolute;bottom:5%;font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:#eeedd4;text-shadow:0 1px 6px #172c23}.scene-caption{position:absolute;bottom:25px;left:4.2%;color:#d6dfc3aa;font-size:12px;letter-spacing:.15em}.scene-caption span{display:inline-block;margin-right:14px;color:#e7ca8c;border-bottom:1px solid #e7ca8c;padding-bottom:5px}canvas{width:100%;height:100%;display:block;touch-action:none}body:not(.playing) canvas{pointer-events:none}.hud{position:absolute;left:30px;top:26px;right:26px;display:flex;align-items:center;gap:25px;pointer-events:none}.hud-score{background:#193327d9;border:1px solid #e1ddb04d;border-radius:12px;padding:10px 20px;min-width:147px;backdrop-filter:blur(10px)}.hud-score>span{display:block;font-size:12px;color:#d2d9bd;letter-spacing:.12em}.hud-score strong{font-family:var(--serif);font-size:35px;font-weight:500;line-height:1.3}.hud-score small{font-size:15px;color:var(--gold)}.time-group{margin-left:auto;width:150px;filter:drop-shadow(0 2px 4px #142c22)}.time-label{display:block;font-size:13px;text-align:center;margin-bottom:8px;letter-spacing:.04em}.time-label strong{font-family:var(--serif);font-size:28px;margin:0 4px}.time-track{height:5px;background:#1a352880;border-radius:4px;overflow:hidden}.time-track i{height:100%;display:block;width:100%;background:#f0d08b;transition:width .2s linear;border-radius:4px}.glass{background:#183328ba;backdrop-filter:blur(8px);pointer-events:auto}.playing .scene-shade{background:linear-gradient(0deg,#0e291855,transparent 28%),linear-gradient(180deg,#142d2666,transparent 23%)}.play-hint{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);font-size:14px;white-space:nowrap;background:#173426c9;padding:10px 20px;border:1px solid #c8d6ac3a;border-radius:24px;pointer-events:none;transition:opacity 1s}.combo{position:absolute;top:38px;left:50%;transform:translateX(-50%);color:#fff0ae;font-size:18px;text-shadow:0 2px 8px #173426;pointer-events:none;font-weight:600}.understory{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 5px 0;font-size:13px;color:#bbc9b3}.controls{display:flex;align-items:center;gap:8px}.key{border:1px solid #a1b99855;border-radius:4px;min-width:26px;height:25px;text-align:center;display:grid;place-items:center}.controls>span:nth-child(3){margin-left:4px}.controls i{height:12px;width:1px;background:#a1b9984d;margin:0 9px}.collectibles{display:flex;gap:21px;align-items:center}.collectibles>span{display:flex;gap:7px;align-items:center;font-size:20px}.collectibles b,.collectibles em{font-size:13px;font-style:normal;font-weight:400;color:#c1cead}.quiet-note{text-align:center;color:#95a98e;font-family:var(--serif);letter-spacing:.14em;font-size:12px;margin:25px 0 0}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0c251bb0;backdrop-filter:blur(9px);z-index:5;padding:22px}.dialog{background:#f1efdc;color:#273e2d;border:1px solid #fbf3da;border-radius:19px;box-shadow:0 15px 80px #001b1855;text-align:center;padding:30px 38px 26px;width:min(470px,100%);max-height:100%;overflow:auto}.dialog-symbol{font-size:43px;line-height:1.2;color:#71894d;margin-bottom:12px}.dialog .eyebrow{color:#7c845f;justify-content:center;margin:0 0 9px;font-size:12px}.dialog h2{font-family:var(--serif);font-weight:600;font-size:27px;letter-spacing:.03em;margin:0 0 16px;line-height:1.6}.dialog p{font-size:14px;line-height:1.9}.dialog .primary-button{width:100%;justify-content:center;background:#36523c;border-color:#36523c;color:#f7efd6;margin-top:23px}.dialog .primary-button:hover{background:#446348}.text-button{border:none;background:none;color:#667256;font-size:13px;padding:15px 10px 0;text-decoration:underline;text-underline-offset:5px}.rule-list{text-align:left;display:grid;gap:14px;margin:20px 0}.rule{display:grid;grid-template-columns:32px 1fr;gap:10px;font-size:14px;line-height:1.7}.rule>span{font-size:25px}.rule b{font-weight:600}.rule small{display:block;color:#6c785d;font-size:13px}.result-score{font-family:var(--serif);font-size:62px;line-height:1.2;margin:12px 0;color:#36523c}.result-score small{font-family:var(--sans);font-size:16px;margin-left:8px}.result-stats{display:flex;justify-content:center;gap:28px;font-size:13px;color:#6a755c;margin:18px 0}.result-stars{color:#b08a36;letter-spacing:12px;font-size:25px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@media(min-width:1600px){.shell{padding-top:40px}.game-frame{height:720px}}@media(max-width:800px){.shell{width:calc(100% - 36px);padding-top:20px}.topbar{height:69px}.game-frame{height:min(660px,calc(100svh - 183px));min-height:450px}.intro{padding-left:8%;padding-bottom:30px}.intro p{font-size:14px}.understory{padding-top:17px;font-size:12px;gap:10px}.controls i,.pointer-label{display:none}.collectibles{gap:12px}.quiet-note{margin-top:18px}.start-screen{grid-template-columns:1.2fr 1fr}h1{font-size:38px;letter-spacing:.04em}.portrait-wrap{margin-right:0}.assets-ready .portrait-wrap{margin-left:-30%}.primary-button{padding:14px 17px;gap:20px;font-size:14px;min-height:52px}.start-notes{font-size:11px;gap:10px}.start-notes span+span{padding-left:10px}.hud{left:18px;right:18px;top:18px;gap:14px}.hud-score{min-width:125px;padding:8px 15px}.combo{top:120px;font-size:16px}}
@media(max-width:680px){.shell{width:calc(100% - 24px);padding-top:16px}.brand{font-size:16px;gap:8px}.brand small{font-size:9px}.brand-mark{font-size:37px}.topbar{height:62px}.icon-button{width:38px;height:38px}.top-actions{gap:8px}.game-frame{border-radius:17px;height:calc(100svh - 171px);min-height:540px;max-height:770px}.start-screen{display:block}.intro{padding:34px 23px 0;text-align:center}.eyebrow{justify-content:center;font-size:11px;letter-spacing:.13em;margin-bottom:14px}.eyebrow>span{width:20px}h1{font-size:38px;line-height:1.4;margin-bottom:15px;letter-spacing:.04em}h1>span{display:none}.intro p{font-size:12px;line-height:1.9;margin-bottom:0}.intro .primary-button{position:absolute;top:calc(100svh - 303px);left:9%;width:82%;z-index:3;justify-content:center;gap:25px;min-height:54px}.start-notes{position:absolute;top:calc(100svh - 234px);left:0;width:100%;justify-content:center;z-index:3;font-size:10px;margin-top:0}.portrait-wrap,.assets-ready .portrait-wrap{position:absolute;height:51%;width:100%;bottom:97px;left:0;margin:0;pointer-events:none}.portrait-wrap img,.assets-ready .portrait-wrap img{height:100%;width:100%;max-width:350px}.friend-caption{display:none}.scene-shade{background:linear-gradient(180deg,#102b24b0,#18362955 35%,#17312500 60%,#102b24ba)}.scene-caption{display:none}.understory{padding:14px 3px 0;flex-wrap:wrap;justify-content:center;column-gap:20px;row-gap:10px}.controls{font-size:11px;gap:4px}.controls>span:nth-child(3){margin-left:4px}.key{width:22px;min-width:22px;height:22px}.collectibles{gap:11px}.collectibles>span{font-size:16px;gap:3px}.collectibles b,.collectibles em{font-size:11px}.quiet-note{display:none}.time-group{width:115px}.hud-score{min-width:105px;padding:8px 12px}.hud-score>span{font-size:10px}.hud-score strong{font-size:28px}.hud{gap:10px;left:12px;right:12px}.time-label{font-size:11px}.time-label strong{font-size:25px}.play-hint{font-size:11px;padding:9px 13px;bottom:15px}.dialog{padding:23px 20px}.dialog h2{font-size:23px}.dialog-symbol{font-size:32px;margin-bottom:8px}.dialog p{font-size:13px}.rule-list{gap:10px;margin:15px 0}.rule{font-size:13px}.rule small{font-size:12px}.result-score{font-size:54px}.result-stars{font-size:21px}}
@media(max-width:680px) and (max-height:730px){.game-frame{min-height:500px}.intro{padding-top:24px}h1{font-size:32px}.intro .primary-button{top:390px}.start-notes{top:456px}.portrait-wrap,.assets-ready .portrait-wrap{height:46%;bottom:108px}.intro p{font-size:11px}.intro .eyebrow{margin-bottom:9px}.understory{padding-bottom:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* Keep the compact layout readable across phones and narrow windows. */
.intro p{font-size:16px}.understory{font-size:14px}.start-notes,.collectibles b,.collectibles em{font-size:13px}
@media(max-width:680px){.intro p{font-size:14px}.intro .eyebrow{font-size:12px}.intro .primary-button{font-size:16px}.start-notes{font-size:12px}.controls,.collectibles b,.collectibles em{font-size:12px}.hud-score>span,.time-label{font-size:12px}.play-hint{font-size:12px}.portrait-wrap,.assets-ready .portrait-wrap{height:48%;bottom:102px}.intro .primary-button{top:clamp(407px,calc(100svh - 303px),638px)}.start-notes{top:clamp(474px,calc(100svh - 234px),707px)}}
@media(max-width:680px) and (max-height:730px){.intro p{font-size:13px}.intro .primary-button{top:390px}.start-notes{top:456px}.portrait-wrap,.assets-ready .portrait-wrap{height:43%;bottom:104px}}

@media(max-width:680px){.portrait-wrap,.assets-ready .portrait-wrap{height:37%;bottom:148px}.scene-shade{background:linear-gradient(180deg,#102b24cc,#18362999 35%,#17312500 65%,#102b24b0)}}
@media(max-width:680px) and (max-height:730px){.portrait-wrap,.assets-ready .portrait-wrap{height:35%;bottom:120px}}