@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Noto+Sans+JP:wght@500;600;700;800;900&family=Noto+Serif+JP:wght@600;700;900&display=swap');
:root{color-scheme:light;--paper:#f5e9d0;--ink:#302c29;--green:#a84d32;--muted:#8b735e;--line:#d9c5a5;--orange:#ca683c;font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
#game{position:relative;width:100%;height:100svh;overflow:hidden}#field{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:0}
.hud{position:absolute;inset:max(22px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) auto max(32px,env(safe-area-inset-left));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;gap:20px}.record .eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.18em}.record b{font:800 74px/.98 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.025em}.unit{font-size:21px;margin-left:7px;font-weight:700}.record small{display:block;margin-top:8px;font-size:10px;letter-spacing:.12em;color:var(--muted)}.zone{display:grid;grid-template-columns:auto auto;gap:5px 10px;margin-top:6px;align-items:center;min-width:168px;font-size:10px;font-weight:800;letter-spacing:.12em}.zone>span:first-child{font:700 23px 'Barlow Condensed',sans-serif;color:var(--green)}.zone i{grid-column:1/-1;width:100%;height:3px;background:var(--line);display:block}.zone em{height:3px;background:var(--green);display:block;width:0}.tools{display:flex;align-items:center;gap:12px;pointer-events:auto}.speed{font:700 28px 'Barlow Condensed',sans-serif;margin-right:15px}.speed>span{color:var(--green);font-size:29px}.speed small{font:600 17px sans-serif}.icon{position:relative;display:grid;place-items:center;background:transparent;width:38px;height:38px;font-size:23px;font-weight:600}.icon i{position:absolute;right:2px;bottom:1px;font:12px sans-serif}.intro{position:absolute;top:24%;left:9%;pointer-events:none}.intro p{font-size:11px;letter-spacing:.3em;font-weight:800;margin:0 0 14px}.intro h1{font:800 clamp(65px,9.5vw,146px)/.85 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.045em;margin:0}.intro h1>span{color:var(--green)}.intro h1 i{display:inline-block;color:var(--orange);font-size:.75em;font-style:normal;padding-left:8px}.intro-bottom{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:600;margin-top:20px}.intro-bottom span:first-child{letter-spacing:.13em}.ink{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;color:var(--green);pointer-events:none}.ink>span{font:32px Georgia}.ink>i{display:block;width:140px;height:5px;background:var(--line)}.ink em{display:block;height:100%;width:100%;background:var(--green);transition:width .08s}.ink.low em{background:var(--orange)}#notice{position:absolute;top:22%;left:0;width:100%;text-align:center;font-size:15px;font-weight:800;letter-spacing:.12em;pointer-events:none;color:var(--green);opacity:0;transition:opacity .18s}
.veil{position:absolute;inset:0;z-index:10;background:#192e3073;display:grid;place-items:center;padding:24px;backdrop-filter:blur(5px);overflow:auto}.pause-panel{background:var(--paper);padding:40px;width:min(360px,100%);text-align:center}.pause-panel p{letter-spacing:.25em;font-size:13px;font-weight:800;margin:0 0 25px}.pause-panel button{width:100%}.quiet{padding:17px;background:none;font-size:12px}.primary{background:var(--green);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:18px 24px;font-weight:800;font-size:15px;min-height:57px}.primary>span{font-size:22px}.result-panel{width:min(880px,100%);background:var(--paper);padding:28px 36px;box-shadow:none}.result-panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:11px;letter-spacing:.17em;font-weight:800}.result-grid{display:grid;grid-template-columns:.9fr 1fr;gap:40px;padding:30px 0}.result-score>p:first-child{font-size:11px;letter-spacing:.13em;color:var(--green);font-weight:800;margin:0 0 8px}.result-score h2{font:800 102px/.98 'Barlow Condensed',Impact,sans-serif;margin:0;letter-spacing:-.025em}.result-score h2 small{font:700 24px 'Noto Sans JP',sans-serif;margin-left:8px}.result-best{font-size:12px;color:var(--muted)}.result-best b{color:var(--ink);margin-left:12px}dl{display:flex;gap:25px;border-top:1px solid var(--line);padding-top:17px;margin-bottom:0}dl dt{font-size:10px;color:var(--muted)}dl dd{font:700 27px 'Barlow Condensed',sans-serif;margin:6px 0 0}.share-preview{align-self:center}.share-preview img{display:block;width:100%;border:1px solid var(--line);aspect-ratio:1.6;object-fit:contain}.image-actions{display:flex;gap:10px;margin-top:8px}.image-actions button{background:transparent;font-size:11px;padding:10px 0;flex:1;border-bottom:1px solid var(--ink)}.result-actions{display:flex;gap:12px}.result-actions>*{flex:1}.x-button{background:var(--ink);color:white;display:grid;place-items:center;font-size:14px;font-weight:700;min-height:57px}.share-note{font-size:10px;text-align:right;color:var(--muted);margin:12px 0 24px}.result-panel footer{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted)}.result-panel footer>a:first-child{font-weight:900;color:var(--ink)}.view-result{position:absolute;bottom:28px;right:28px;background:var(--ink);color:#fff;padding:16px 24px;font-size:13px}
@media(max-width:650px){.hud{inset:max(22px,env(safe-area-inset-top)) 18px auto;gap:10px}.record b{font-size:60px}.record .eyebrow{font-size:9px}.record small{font-size:9px}.unit{font-size:17px}.zone{position:absolute;top:125px;left:0;min-width:128px;font-size:9px}.tools{gap:6px}.speed{font-size:27px;margin-right:5px}.icon{width:33px;height:38px}.intro{top:29%;left:7%;right:7%}.intro h1{font-size:23vw}.intro p{font-size:9px;margin-bottom:13px}.intro-bottom{justify-content:space-between;gap:10px;font-size:10px;margin-top:16px}.ink{bottom:max(25px,env(safe-area-inset-bottom))}.veil{padding:16px}.result-panel{padding:18px 20px;max-width:440px;margin:auto}.result-panel>header{font-size:10px;padding-bottom:4px}.result-grid{grid-template-columns:1fr;gap:18px;padding:20px 0 16px}.result-score h2{font-size:82px}.result-best{margin:10px 0}.result-score{position:relative}dl{position:absolute;right:0;bottom:3px;display:block;border:0;margin:0;padding:0}dl>div{display:flex;align-items:center;justify-content:space-between;gap:16px}dl dd{font-size:20px;margin:4px 0}dl dt{font-size:9px}.share-preview img{max-height:190px}.image-actions button{padding:8px 0;font-size:10px}.result-actions{gap:8px}.primary,.x-button{font-size:12px;min-height:50px;padding:14px}.primary{gap:10px}.share-note{text-align:left;font-size:9px;margin:10px 0 16px}.result-panel footer{font-size:9px;padding-top:14px}.view-result{bottom:22px;right:18px}.result-panel footer>a:last-child{font-size:9px}}
@media(max-height:650px) and (min-width:651px){.intro{top:23%}.intro h1{font-size:100px}.result-panel{padding:14px 28px}.result-grid{padding:16px 0;gap:30px}.result-score h2{font-size:80px}.share-preview{max-width:300px}.share-note{margin-bottom:14px}.result-panel footer{padding-top:10px}.record b{font-size:60px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.veil{backdrop-filter:none}}
.intro{top:23%;left:7%}.intro h1{font:900 clamp(48px,7vw,100px)/1.25 'Noto Serif JP',serif;letter-spacing:-.06em;white-space:nowrap}.intro h1>span{color:#a84d32}.intro p{letter-spacing:.4em;font-family:'Noto Serif JP',serif;font-size:17px}.intro-bottom{font-family:'Noto Serif JP',serif;font-size:12px;gap:35px}.intro-bottom>span:last-child{font-size:10px;color:var(--muted)}.zone{min-width:210px}.zone small{grid-column:1/-1;letter-spacing:.12em;font-size:9px;color:var(--muted);padding-top:6px}.zone i,.zone em{height:5px}.ink{color:#b57930}.ink em{background:#dba84c}.flavor{position:absolute;top:27%;left:4%;width:92%;text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s;color:#45342d}.flavor.visible{opacity:1;transform:none}.flavor p{font:700 clamp(20px,2.4vw,34px)/1.6 'Noto Serif JP',serif;letter-spacing:.1em;margin:0;text-shadow:0 1px 12px #ffefd7}.flavor span{display:block;margin-top:14px;font-size:9px;letter-spacing:.24em;color:#876b51}.veil{background:#35291f65}.result-panel footer{flex-wrap:wrap}.result-score h2{white-space:nowrap}.result-panel[data-won=true] .result-score h2{font-size:90px}#notice{top:auto;bottom:18%;color:#a84d32;font-size:13px}
@media(max-width:650px){.zone{top:115px;min-width:160px}.intro{top:29%;left:6%;right:6%}.intro h1{font-size:10.1vw;letter-spacing:-.09em}.intro p{font-size:13px;margin-bottom:18px}.intro-bottom{display:block;margin-top:18px;font-size:11px}.intro-bottom>span:last-child{display:block;margin-top:10px;font-size:9px}.flavor{top:30%;left:6%;width:88%}.flavor p{font-size:22px;letter-spacing:.04em}.flavor span{margin-top:10px}.record b{font-size:55px}.result-panel[data-won=true] .result-score h2{font-size:72px}.result-score dl dt{font-size:9px}.result-score dl dd{font-size:18px}.result-panel footer{font-size:8px;gap:8px}.result-panel footer>a:last-child{font-size:8px}#notice{bottom:20%}}
@media(max-height:550px) and (min-width:651px){.intro{top:29%}.intro h1{font-size:46px}.intro p{font-size:12px;margin:0 0 5px}.intro-bottom{margin-top:8px;font-size:9px}.flavor{top:30%}.flavor p{font-size:22px}.flavor span{margin-top:4px}.zone{min-width:175px}.result-panel{max-height:95svh;overflow:auto}}

.day-clock{position:absolute;right:max(32px,env(safe-area-inset-right));top:88px;width:130px;pointer-events:none;color:#51483f}.day-clock svg{display:block;width:110px;height:57px;margin-left:auto;overflow:visible}.day-clock path{fill:none;stroke:#6d6153;stroke-width:1;stroke-dasharray:2 4;opacity:.65}.day-clock .horizon{stroke-dasharray:none;opacity:.35}.day-clock circle{fill:#fbe2a6;stroke:#886334;stroke-width:1.7}.day-clock div{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:5px}.day-clock span{font-size:10px;white-space:nowrap}.day-clock b{font-weight:800}.day-clock small{font-size:9px;white-space:nowrap;opacity:.8}.day-clock time{font-variant-numeric:tabular-nums}.flavor p{max-width:850px;margin:auto;text-wrap:balance}.record small,.zone small{color:#635a4e}.intro-bottom>span:last-child{color:#635a4e}
@media(max-width:650px){.day-clock{top:104px;right:18px;width:150px}.day-clock svg{width:85px;height:44px}.day-clock div{gap:10px}.day-clock span{font-size:9px}.day-clock small{font-size:8px}.flavor p{font-size:21px}.record b{font-size:57px}.zone{min-width:155px}}
@media(max-height:550px) and (min-width:651px){.day-clock{top:65px}.day-clock svg{height:36px;width:76px}.day-clock div{margin-top:0}}

#notice{width:max-content;max-width:88%;left:50%;transform:translateX(-50%);bottom:15%;background:#fff7e9;color:var(--notice-color,#a84d32);border-left:5px solid var(--notice-color,#a84d32);padding:12px 22px;font-size:19px;font-weight:900;letter-spacing:.05em;box-shadow:0 3px 0 #302c2912}.active-effects{position:absolute;right:32px;top:180px;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;pointer-events:none}.active-effects span{background:#fff7e9;padding:6px 10px;font-size:11px;border-bottom:3px solid currentColor;font-weight:800}#slowEffect,.speed[data-effect=slow]{color:#287c9c}#shieldEffect{color:#96621a}#boostEffect,.speed[data-effect=boost]{color:#a84d32}.ink.refilled{color:#247c6d;background:#fff7e9;padding:5px 12px}.ink.refilled em{background:#247c6d}.ink.refilled i{height:9px}
@media(max-width:650px){.active-effects{right:18px;top:192px;max-width:90%;gap:5px}.active-effects span{font-size:10px;padding:5px 8px}#notice{bottom:15%;font-size:16px;padding:10px 16px}}
@media(max-height:550px) and (min-width:651px){.active-effects{top:125px}#notice{bottom:12%;font-size:15px;padding:8px 14px}}

.ink.empty{color:#a84d32;background:#fff7e9;padding:5px 12px}.ink.empty i{outline:2px solid #a84d32;outline-offset:3px}
.load-checkpoint{position:absolute;left:7%;top:48%;background:#247c6d;color:#fff;padding:13px 22px;font-size:13px;font-weight:800}.checkpoint-ready{position:absolute;left:50%;top:30%;transform:translateX(-50%);text-align:center;min-width:220px}.checkpoint-ready p{font:700 23px 'Noto Serif JP',serif}.checkpoint-ready .primary{width:100%;background:#247c6d}.checkpoint-ready .quiet{background:#fff7e985;padding:10px 18px;margin-top:8px}.result-actions:has(#continueCheckpoint:not([hidden])){display:grid;grid-template-columns:1fr 1fr}.result-actions #continueCheckpoint{grid-column:1/-1;background:#247c6d}.result-actions #retry.quiet{min-height:50px;border:1px solid var(--line)}
@media(max-width:650px){.load-checkpoint{left:6%;top:46%}.checkpoint-ready{top:30%}.checkpoint-ready p{font-size:21px}.result-actions #continueCheckpoint{min-height:48px}.result-panel:has(#continueCheckpoint:not([hidden])) .result-grid{gap:12px;padding:14px 0}.result-panel:has(#continueCheckpoint:not([hidden])) .share-preview img{max-height:160px}}