/* Warm paper, leaf green and coral: a bright little arcade. */
:root{--ink:#294238;--paper:#fff9e5;--red:#e76b43;--yellow:#ffe16c}
.arcade{background:#f5f0d9;background-image:linear-gradient(120deg,#e7f0dc,#fff5d8 55%,#f6dfcf)}
.game-shell{box-shadow:0 0 0 1px #ffffff1a,0 0 70px #0004}
.desktop-note{right:5%;bottom:35px;color:#62786b;font-size:12px;gap:4px}
.desktop-note>b{font-size:24px;letter-spacing:5px}
.game-shell:has(#intro:not([hidden])) .game-top{display:none}
.intro{padding:28px 0 0;gap:0;background:none;justify-content:space-between;overflow:hidden}
.title-art{width:91%;max-width:400px;align-self:flex-start;margin-left:8px;transform:none;pointer-events:none}
.title-art h1{margin:0;font-size:0;line-height:0;letter-spacing:0;text-shadow:none;-webkit-text-stroke:0}
.title-art h1 img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 0 #11151d30)}
.intro-bottom{display:flex;flex-direction:column;gap:9px;width:100%;max-width:none;padding:14px 20px max(13px,env(safe-area-inset-bottom));margin:0;background:var(--paper);color:var(--ink);border:0;border-top:5px solid var(--red);border-radius:0;box-shadow:none;text-align:left}
.home-rule{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:center;line-height:1.25}
.home-rule>span{font-size:10px;font-weight:600;letter-spacing:.4px;color:#607568}
.home-rule>b{font-size:20px;letter-spacing:.5px}
.home-rule>strong{grid-column:2;grid-row:1 / 3;font-size:13px;color:#c4512f;white-space:nowrap}
.home-rule em{font-size:38px;font-style:italic;letter-spacing:-1px;margin-right:3px;line-height:1}
.danger-intro{order:1;margin:0;padding:7px 0 5px;background:none;border:0;border-top:1px solid #29423825;transform:none}
.danger-intro>p{margin:0 0 2px;color:var(--ink);font-size:11px;letter-spacing:0;gap:8px}
.danger-intro>p>b{display:flex;align-items:center;gap:6px}
.danger-intro i{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:var(--paper);width:15px;height:15px;font:bold 12px sans-serif;font-style:normal;transform:rotate(-7deg)}
.danger-intro>p>span{padding:0;background:none;color:#607568;font-size:9px}
.danger-intro>img{display:block;width:100%;height:auto;aspect-ratio:54/13;object-fit:contain;filter:drop-shadow(0 1px 0 #fff5)}
#danger-roster:not([src]){visibility:hidden}
.danger-names{color:var(--ink);font-size:10px;font-weight:700;letter-spacing:0;margin-top:0}
.danger-intro>small{margin-top:5px;color:#617666;font-size:9px;text-align:right}
.intro .kuma-guide{order:3;gap:8px;margin:0;justify-content:flex-start;text-align:left}
.intro .kuma-guide>img{width:27px;height:34px;filter:none}
.intro .kuma-guide p{color:var(--ink);font-size:10px;line-height:1.55;text-shadow:none}
.intro .kuma-guide b{font-size:11px;font-weight:700}
.intro .kuma-guide span:last-child{display:block;color:#617666}
.intro .collection-hint{order:5;margin:0;color:#62786a;font-size:9px;letter-spacing:.3px;text-align:left;font-weight:500}
.start-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:55px;padding:9px 18px;background:var(--red);border:0;border-bottom:4px solid #a92c19;border-radius:2px;color:var(--paper);box-shadow:none;font-size:24px;letter-spacing:2px;font-weight:900;line-height:1.2}
.start-button:hover{background:#fa6540}
.start-button:active{transform:translateY(2px);border-bottom-width:2px}
.intro #start{order:2;justify-content:space-between;padding-left:28px}
#start svg{width:42px;height:26px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter}
.start-help{order:4;display:flex;align-items:center;justify-content:space-between;margin:0;font-size:9px;color:#617666}
.start-help button{font-size:10px;color:var(--ink);text-underline-offset:3px}
.intro .finale-link{margin:0;color:#2d7663;font-size:11px;border:0;font-weight:800;white-space:nowrap;padding:6px 0}
/* The approved street sign and speaker positions stay independent. */
.game-top{background:var(--paper);box-shadow:0 3px 0 #172c3555}
.game-top.stage-enter{outline:3px solid var(--yellow)}
.charge{background:#171d27ed;border-radius:0;border-left:3px solid var(--yellow);padding:5px 8px}
.charge>div:first-child{font-weight:800}
.charge .meter{height:5px;background:#ffffff25;border-radius:0;overflow:hidden}
.charge .meter i{border-radius:0;background:repeating-linear-gradient(90deg,var(--yellow) 0 8px,#171d27 8px 10px)}
.charge>span{color:#cbd0d4}
.fever-running{border-left:3px solid var(--yellow);border-radius:0;background:#171d27ed}
.street-notices>.encounter,.street-notices>.voice-bubble,.street-notices>.guide-toast{border-radius:2px;background:var(--paper);box-shadow:3px 3px 0 #171d2740;border:2px solid var(--ink)}
.street-notices .encounter>small{font-size:10px;letter-spacing:0}
.street-notices img{border-radius:0}
.impact{font-weight:1000;text-shadow:3px 3px 0 var(--ink);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
/* The end screen is a single large image with two clear actions. */
.result{background:#fff2cd;color:var(--ink);padding:12px 12px max(12px,env(safe-area-inset-bottom))}
.result-content{gap:9px;max-width:440px}
.result-masthead{border:0;padding:0;font-size:18px;font-style:italic;font-weight:1000;letter-spacing:1.4px;color:#bc5136}
.result-masthead>span{color:#bc5136;letter-spacing:1px}
.result-masthead button{margin-left:auto;color:var(--ink)}
.result-art{box-shadow:4px 4px 0 #0008;width:100%;max-height:none;background:var(--paper)}
.result-art>img{border-radius:0}
.result-actions{gap:8px}
.share-destination>span{font-size:10px;color:#617666;letter-spacing:0;font-weight:500}
.share-destination button{border:1px solid #29423845;border-radius:3px;color:var(--ink);font-size:11px;padding:6px 12px;background:none}
.share-destination button[aria-pressed="true"]{background:#2f7663;color:#fff9e5;border-color:#2f7663}
.share-destination #target-line[aria-pressed="true"]{background:#06c755;color:#fff;border-color:#06c755}
.share-destination #save-image{color:var(--ink);font-size:10px}
.share-button{min-height:53px;background:var(--yellow);color:var(--ink);border:0;border-bottom:4px solid #ba9525;border-radius:2px;box-shadow:none;padding:9px 14px}
.share-button b{font-size:16px;font-weight:900;letter-spacing:0}
.share-button small{font-size:9px;color:#534920;opacity:1}
.share-button>strong{font-size:29px;font-weight:500}
.retry-button{min-height:37px;border:1px solid #29423845;border-radius:3px;color:var(--ink);font-size:13px;background:none}
.retry-button:hover{background:#ffffff12}
.share-status{color:#607568;font-size:10px}
.result .finale-link{color:#2c7660;font-size:11px;line-height:18px;margin:0}
.pause-panel,.howto-panel,.error-panel{background:#fff9e8fa;color:var(--ink)}
.pause-panel h2{font-size:27px;letter-spacing:1px}
.howto-panel h2{font-size:27px;margin:0 0 18px;color:var(--ink);border-left:5px solid var(--red);padding-left:12px;text-align:left}
.howto-panel p{font-size:12px;line-height:1.8;text-align:left}
.howto-panel li{border-color:#29423825}.howto-panel li span{color:#bd532e}
.howto-panel .evolution-help{border-top:1px solid #29423825;padding-top:13px}
.howto-panel .audio-credit{font-size:10px;color:#617666}
.finale-heading small{font-size:12px;letter-spacing:1px}.finale-heading h2{letter-spacing:2px;text-shadow:none}.finale-heading p{font-size:13px}
@media(max-height:740px){
 .intro{padding-top:19px}.title-art{width:80%;margin-left:12px}
 .intro-bottom{padding:10px 17px 10px;gap:7px;border-top-width:4px}
 .home-rule>b{font-size:18px}.home-rule em{font-size:33px}.home-rule>span{font-size:9px}
 .danger-intro{padding:5px 0 2px}.danger-intro>img{max-height:82px}
 .danger-intro>small{margin-top:3px;font-size:8px}.danger-names{font-size:9px}
 .intro .kuma-guide>img{width:24px;height:29px}.intro .kuma-guide p{font-size:9px}.intro .kuma-guide b{font-size:10px}
 .start-button{min-height:49px;font-size:23px}.intro .collection-hint{font-size:8px}
 .result{padding:10px}.result-content{gap:7px}.result-masthead{font-size:16px}
 .result-art{width:min(100%,calc((100dvh - 212px)*.8))}
 .share-button{min-height:47px}.result-actions{gap:6px}
}
@media(max-height:600px){
 .intro{padding-top:14px}.title-art{width:78%;margin-left:8px}
 .intro-bottom{padding:8px 13px;gap:5px}
 .home-rule>b{font-size:16px}.home-rule>span{font-size:8px}.home-rule em{font-size:30px}.home-rule>strong{font-size:11px}
 .danger-intro>p{font-size:10px}.danger-intro>img{max-height:65px}.danger-intro>small{font-size:8px}
 .start-button{min-height:43px;font-size:21px}.intro #start{padding-left:22px}
 .intro .kuma-guide>img{width:22px;height:27px}.intro .kuma-guide span:last-child{font-size:8px}
 .start-help{font-size:8px}.start-help button{font-size:9px}.intro .collection-hint{font-size:8px}
 .result{padding:8px 10px}.result-content{gap:5px}.result-masthead{font-size:14px}
 .result-art{width:min(100%,calc((100dvh - 167px)*.8))}
 .share-button{min-height:43px}.share-button small{display:none}.retry-button{min-height:32px}
 .share-destination button{padding:4px 10px;min-height:27px;font-size:10px}
}
@media(max-height:480px){.intro{overflow:auto;gap:12px}.result-masthead{display:none}.result-art{width:min(100%,calc((100dvh - 143px)*.8))}}

.collection-row{order:5;display:flex;align-items:center;justify-content:space-between;gap:10px}
.collection-row .collection-hint{margin:0!important}
/* Selected B: small right-hand speech; only Kosukuma speaks from the left. */
.street-notices{top:calc(var(--hud-inset) + 143px);left:auto;right:14px;width:fit-content;max-width:min(212px,68%)}
.street-notices[data-side="left"]{left:14px;right:auto}
.street-notices::after{left:auto;right:18px;width:8px;height:8px;background:#fffdf1;border-width:1.5px}
.street-notices[data-side="left"]::after{left:18px;right:auto}
.street-notices>.encounter,.street-notices>.voice-bubble,.street-notices>.guide-toast{min-height:46px;padding:5px 8px;border:1.5px solid #3b6f61;border-radius:12px 12px 3px 12px;background:#fffdf1;box-shadow:0 2px 0 #29423825;overflow:visible}
.street-notices[data-side="left"]>*{border-radius:12px 12px 12px 3px}
.street-notices img,.street-notices .guide-toast img{width:29px;height:34px;background:transparent}
.street-notices .reaction-copy>small{font-size:9px;line-height:11px;margin-bottom:2px}
.street-notices .reaction-copy>strong,.street-notices .guide-toast p,.street-notices .encounter>strong{font-size:14px;line-height:1.3;letter-spacing:0;overflow-wrap:normal}
.street-notices .encounter>small{font-size:9px;line-height:11px}
.charge{background:#fff9e5ed;color:#294238;border-color:#e6b94f}.charge>span{color:#617766}.charge .meter{background:#29423826}.charge .meter i{background:repeating-linear-gradient(90deg,#e6af36 0 8px,#fff9e5 8px 10px)}
.fever-running{background:#fff2cde8;color:#9c482f;border-color:#e8ad44}
.collection-panel{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;padding:16px 15px max(14px,env(safe-area-inset-bottom));background:#fff7dd;color:#294238;overflow:hidden}
.collection-panel[hidden],.book-detail[hidden],.book-grid[hidden],.book-tabs[hidden]{display:none}
.book-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:3px solid #e9ba60;padding-bottom:10px;flex-shrink:0}.book-toolbar h2{margin:0;font-size:24px;letter-spacing:0}.book-toolbar button{color:#315b4c;background:#fffdf1;border:1px solid #9eaf91;border-radius:5px;padding:9px;font-size:12px;font-weight:800}
#book-progress{font-size:12px;margin:10px 0;color:#59715c}.book-tabs{display:flex;gap:8px;flex-shrink:0}.book-tabs button{flex:1;padding:10px 3px;background:#efe9cc;border:0;border-radius:6px 6px 0 0;color:#52705f;font-size:13px;font-weight:900}.book-tabs button[aria-pressed="true"]{background:#397a62;color:#fff9e5}
#book-hint{font-size:11px;line-height:1.6;margin:9px 0 12px;flex-shrink:0}.book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;overflow:auto;min-height:0;align-content:start;padding:2px 3px 20px;overscroll-behavior:contain;scrollbar-width:thin}
.book-entry{display:flex;flex-direction:column;align-items:center;background:#fffdf0;color:#294238;border:1px solid #d6d4b5;border-bottom:3px solid #cccba8;border-radius:7px;padding:3px 3px 10px;min-width:0;cursor:pointer}.book-entry.locked{opacity:1;cursor:default;background:#ecebdc;border-color:#d3d7bf}.book-entry img{display:block;width:100%;height:auto;aspect-ratio:180/190;object-fit:contain;min-height:90px}.book-entry b{font-size:12px;line-height:1.4}.book-entry small{font-size:10px;line-height:1.5;margin-top:3px;color:#667c64}.book-entry:not(.locked):hover{border-color:#dd9a3f;background:#fff5d6}
.book-detail{min-height:0;flex:1;display:flex;flex-direction:column;text-align:center}.book-detail #book-back{align-self:flex-start;background:none;border:0;font-size:12px;color:#356f5d;padding:5px 0 10px}.book-detail small{font-size:11px;color:#ac602f}.book-detail h3{font-size:25px;margin:4px 0}.book-detail canvas{display:block;width:100%;min-height:120px;flex:1;touch-action:none;border-radius:5px;background:#fff6db}.book-detail p{font-size:12px;line-height:1.6;margin:10px 0 3px}.book-thumb-source{position:fixed;left:-1000px;top:0;width:180px;height:190px;pointer-events:none}
@media(max-height:600px){.street-notices{top:calc(var(--hud-inset) + 137px)}.collection-panel{padding:10px}.book-toolbar h2{font-size:21px}#book-hint{margin:6px 0 8px}.book-tabs button{padding:8px 3px}.book-grid{gap:10px}}
.collection-row .collection-hint{order:0;flex:1;white-space:nowrap;letter-spacing:0}
.intro .collection-row .finale-link{width:auto;min-height:36px;flex:none;border-bottom:1px solid #9ab7a2;padding:5px 0}