*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111615;color:#e9e9dd;font-family:"Helvetica Neue","Arial","Noto Sans JP",sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}body{display:grid;place-items:center}main{position:relative;width:min(100vw,60dvh);height:min(100dvh,166.667vw);overflow:hidden;background:#b5bbb4}canvas{width:100%;height:100%;display:block}button{font:inherit;cursor:pointer;touch-action:manipulation;border:none}button:focus-visible{outline:3px solid #fff;outline-offset:3px}#sound{position:absolute;right:16px;top:max(12px,env(safe-area-inset-top));background:#17201ce0;color:#ddd;padding:8px 10px;font-size:11px;letter-spacing:1px;border:1px solid #68716b;border-radius:3px;z-index:4}section{position:absolute;inset:0;padding:18% 8% 7%;display:flex;flex-direction:column;background:linear-gradient(180deg,#18201ded,#18201dce 65%,#18201df5)}section[hidden]{display:none}.eyebrow{font-size:9px;letter-spacing:2px;color:#a4afa2}.calendar{display:flex;gap:7px;margin-top:28px}.calendar span{display:grid;place-items:center;border:1px solid #69746c;width:29px;height:34px;font-size:12px;color:#aeb9ae}.calendar span:nth-last-child(-n+2){background:#ff6846;color:#15211b;border-color:#ff6846;font-weight:800}h1{font-size:clamp(44px,8.5vw,70px);letter-spacing:-3px;line-height:1.14;margin:34px 0 20px;font-weight:900}h1 span{color:#ff6846}p{font-size:13px;line-height:2;color:#b6c0b3;margin:0}#start{margin-top:auto;background:#ff6846;color:#15211b;text-align:left;padding:21px 20px;font-size:15px;font-weight:bold}#start span{float:right}small{display:block;text-align:center;font-size:10px;color:#89978a;margin-top:18px;line-height:1.6}#end{justify-content:center;background:#f0eedcce;color:#313e34;padding-bottom:20%}#end h2{font-size:42px;line-height:1.5;font-weight:500;letter-spacing:2px}#end p{color:#637563;margin-bottom:40px}#end button{padding:16px;background:#384d3f;color:#f1efdd;margin-top:10px}#end #restart{background:transparent;color:#5c6c5d;border:1px solid #9da894}@media(min-width:700px){main{box-shadow:0 0 90px #0009}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#cityView{position:absolute;inset:0;pointer-events:none;visibility:hidden}#cityView canvas{width:100%;height:100%;display:block}#game{position:absolute;inset:0;z-index:1}#cover,#end{z-index:2}#renderError{position:absolute;top:45%;left:8%;width:84%;padding:20px;background:#17201c;color:#ddd;z-index:5;font-size:14px;line-height:1.8}#renderError[hidden]{display:none}

/* A quiet weekday frame opens into a full-height giant city. */
#cover{padding:12% 7% 6%;background:linear-gradient(90deg,#102930f2 0%,#102930b0 48%,#10293010 100%),linear-gradient(0deg,#102930f5,transparent 52%)}
#cover .eyebrow{font-size:9px;color:#b7d4cf;letter-spacing:2px}.calendar{margin-top:24px;gap:6px}.calendar span{border-color:#6e8887;color:#a7c3bd}.calendar span:nth-last-child(-n+2){background:#ffae77;border-color:#ffae77}
#cover h1{font-size:clamp(45px,10vw,74px);line-height:1.06;margin:28px 0 22px;letter-spacing:-3px;color:#f7f3e3}#cover h1 span{color:#ffb27c}
.hook{font-size:clamp(18px,4vw,25px);font-weight:700;color:#c2d3c7;line-height:1.65}.hook strong{color:#ffb27c;font-size:1.3em}.subhook{font-size:12px;margin-top:14px;color:#bfd2ca}#start{background:#ffaf78;color:#18353a;border-radius:2px;padding:19px;font-weight:800}#cover small{color:#aac0b8;margin-top:12px}#sound{border-color:#5c7774;background:#15343acc;border-radius:30px;padding:8px 11px;font-size:10px}
#recap{z-index:3;justify-content:center;padding:9% 8%;background:linear-gradient(155deg,#163c42f5,#132b35eb);color:#fff2d4}#recap h2{font-size:clamp(27px,6.3vw,40px);line-height:1.45;margin:20px 0 12px;letter-spacing:-1px}.recap-main{display:flex;align-items:baseline;gap:14px}.recap-main b{font-size:clamp(68px,17vw,104px);line-height:1.15;color:#ffbd83;letter-spacing:-5px}.recap-main span{font-size:18px;font-weight:bold}.recap-details{display:flex;gap:32px;margin:15px 0 8px;padding-top:16px;border-top:1px solid #526969}.recap-details div{display:flex;flex-direction:column;gap:5px}.recap-details b{font-size:25px}.recap-details span{font-size:12px;color:#9dbab3}#recap .best{font-size:11px;color:#9dbab3;margin-bottom:25px}.share-row{display:flex;gap:10px}.share-row button{flex:1;border:1px solid #8fa9a0;background:transparent;color:#e8edda;padding:15px 8px;font-size:13px;border-radius:3px}#recapNext{background:#ffb27a;color:#18353a;padding:18px;margin-top:12px;font-weight:800;border-radius:3px}#recapNotice{min-height:16px;margin-top:10px;white-space:pre-line}#recap[hidden]{display:none}

/* Keep actionable overlay content away from social in-app browser bottom bars. */
#cover #start{margin-top:30px}#recap{justify-content:flex-start;padding-top:16%}#end{justify-content:flex-start;padding-top:14%}#end h2{margin:18px 0}#end p{margin-bottom:18px}

/* Editorial cover: one wide moment above two diagonal portrait crops. */
#cover{padding:0;background:#263531;color:#ecebd8;isolation:isolate}
#cover:after,#cover .calendar{display:none}
#cover h1{position:absolute;left:7%;top:5.5%;margin:0;font-size:clamp(44px,11.7vw,72px);letter-spacing:-.055em;line-height:1.1;font-weight:900;color:#ecebd8;white-space:nowrap}
#cover .routine{position:absolute;top:19%;left:0;width:100%;height:61.25%;background:#263531;overflow:hidden;z-index:-1}
#cover .comic{position:absolute;inset:0}
#cover .comic img{position:absolute;height:auto;max-width:none}
#cover .wake{clip-path:polygon(0 0,100% 0,100% 32.65%,0 38.78%)}
#cover .wake img{left:0;top:-71.43%;width:100%}
#cover .commute{clip-path:polygon(0 40.41%,52.92% 37.14%,43.33% 100%,0 100%)}
#cover .commute img{left:-4.583%;top:14.286%;width:60%}
#cover .work{clip-path:polygon(54.583% 36.94%,100% 34.286%,100% 100%,45% 100%)}
#cover .work img{left:39.583%;top:11.224%;width:62.5%}
#cover #start{position:absolute;left:7%;right:7%;top:84%;margin:0;padding:18px 20px;background:#e3e4ce;color:#263531;border:0;font-weight:700;letter-spacing:.06em;font-size:14px}
#cover #start span{font-size:24px;line-height:18px}

body{display:flex;flex-direction:column;justify-content:flex-start}
.game-bar{width:100%;height:64px;min-height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;gap:8px;background:#fff;color:#25303e;border-bottom:1px solid #dce0e4;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}
.game-bar-title{text-align:center;font-size:20px;font-weight:700;line-height:1.35}
.game-bar .game-brand{justify-self:end;display:flex;align-items:center;gap:6px;color:#25303e;text-decoration:none;font-size:18px;line-height:1.1;white-space:nowrap}
.game-bar .game-brand img{object-fit:contain;width:26px;height:26px}
main{flex:none;margin:auto;width:min(100vw,calc((100dvh - 64px)*.6));height:min(calc(100dvh - 64px),166.667vw)}
/* Direct home navigation during gameplay. */
.game-bar > .game-list-link {
 grid-column:1;grid-row:1;justify-self:start;
 display:flex;align-items:center;justify-content:center;
 min-height:44px;padding:0 14px;box-sizing:border-box;
 border:1px solid #a5331f;border-radius:9px;background:#bd3f25;color:#fff;
 box-shadow:0 3px 0 #8d2d1c;text-decoration:none;white-space:nowrap;
 font-size:16px;font-weight:800;line-height:1.2;
}
.game-bar > .game-list-link:hover { background:#a9331e;color:#fff; }
.game-bar > .game-list-link:focus-visible { outline:3px solid #183e55;outline-offset:4px; }
.game-bar > .game-list-link:active { transform:translateY(2px);box-shadow:0 1px 0 #8d2d1c; }
.game-nav-overlay {
 position:fixed;top:0;left:0;z-index:100;display:flex;align-items:center;
 height:calc(64px + env(safe-area-inset-top,0px));width:200px;box-sizing:border-box;
 padding:env(safe-area-inset-top,0px) 8px 0;background:#fff;
 font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;
}
@media(max-width:600px) {
 .game-bar { grid-template-columns:104px minmax(0,1fr) 104px; }
 .game-bar > .game-list-link { width:104px;padding:0 8px;font-size:15px; }
 .game-nav-overlay { height:calc(72px + env(safe-area-inset-top,0px));width:116px;padding-left:6px;padding-right:6px; }
}

@media(max-width:600px){.game-bar{height:72px;min-height:72px;padding:0 6px;grid-template-columns:104px minmax(0,1fr) 104px;gap:5px}.game-bar-title{font-size:14px}.game-bar .game-brand{font-size:10px;gap:3px}.game-bar .game-brand img{width:20px;height:20px}main{width:min(100vw,calc((100dvh - 72px)*.6));height:min(calc(100dvh - 72px),166.667vw)}}

.recap-share{display:flex;gap:8px;margin-top:18px}.recap-share button{flex:1;padding:14px 8px;background:#dce1ca;color:#263c32;font-weight:700;font-size:13px}#recapNotice{margin-top:8px;overflow-wrap:anywhere;max-height:70px;overflow:auto}#recapNext{margin-top:16px}