/* Map-name banner, villager speech bubble, warnings and the GAME OVER screen. */
#banner{position:fixed;left:0;right:0;top:24%;text-align:center;font-size:34px;font-weight:700;letter-spacing:.06em;color:var(--ink);text-shadow:0 3px 0 rgba(9,38,40,.8),0 0 18px rgba(0,0,0,.45);opacity:0;pointer-events:none}
#banner.show{animation:banner 3.2s ease-out}
@keyframes banner{0%{opacity:0;transform:translateY(10px)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
@media (max-width:420px){#banner{font-size:24px}}
#talk,#auntTalk{position:fixed;left:0;top:0;max-width:240px;padding:8px 12px;border-radius:12px;background:rgba(255,250,235,.95);color:#2b2118;font-size:14px;line-height:1.35;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.3);will-change:transform}
#talk::after,#auntTalk::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-top-color:rgba(255,250,235,.95);border-bottom:0}
#talk[hidden],#auntTalk[hidden]{display:none}
/* the suspicious man's name tag (actors/mage.js) */
#mageTag{position:fixed;left:0;top:0;width:max-content;padding:2px 9px;border-radius:9px;background:rgba(40,26,60,.78);color:#e8dcff;font-size:12px;font-weight:700;letter-spacing:.04em;pointer-events:none;will-change:transform}
#mageTag[hidden]{display:none}
/* the shrine's whisper (world/shrine.js): faint words floating over it, as if heard */
#whisper{position:fixed;left:0;top:0;width:max-content;max-width:80vw;color:#fffbe6;font-size:16px;font-weight:600;font-style:italic;line-height:1.5;text-align:center;white-space:pre-line;letter-spacing:.04em;text-shadow:0 0 2px rgba(60,28,0,1),0 0 4px rgba(60,28,0,.9),0 0 6px rgba(255,190,80,.9),0 0 14px rgba(255,170,60,.6),0 1px 2px rgba(0,0,0,.6);pointer-events:none;will-change:transform,opacity}
#whisper[hidden]{display:none}
#toast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));transform:translateX(-50%);max-width:calc(100vw - 32px);padding:8px 16px;border-radius:10px;background:rgba(74,13,13,.88);color:#fff7e4;font-size:14px;font-weight:700;text-align:center;opacity:0;pointer-events:none}
#toast.show{animation:toast 2.6s ease-out}
#toast.show.long{animation-duration:6s}
@keyframes toast{0%{opacity:0}10%{opacity:1}75%{opacity:1}100%{opacity:0}}
@media (max-width:520px){#toast{top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
#sleepFade{position:fixed;inset:0;background:#02060c;opacity:0;pointer-events:none;transition:opacity .8s ease}
#sleepFade.dim{opacity:.35}
/* the boat crossing (world/boat.js): fade to black, the time passed, fade back */
#travel{position:fixed;inset:0;z-index:60;background:#02060c;opacity:0;transition:opacity .8s ease;display:flex;align-items:center;justify-content:center}
#travel[hidden]{display:none}
#travel.on{opacity:1}
#travelText{margin:0;color:#f4ead2;font-size:26px;font-weight:600;letter-spacing:.08em;font-style:italic;opacity:0;transition:opacity .6s ease}
#travelText.on{opacity:1}
#over{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(20,6,8,.55);opacity:0;visibility:hidden;transition:opacity .6s .5s,visibility 0s 1.1s}
body.gameover #over{opacity:1;visibility:visible;transition:opacity .6s .5s,visibility 0s .5s}
#over b{font-size:44px;letter-spacing:.08em;color:#ff7a66;text-shadow:0 3px 0 #4a0d0d,0 0 18px rgba(0,0,0,.5)}
#over span{font-size:12px;opacity:.75;max-width:min(420px,calc(100vw - 32px));text-align:center;line-height:1.5}
#restart{min-height:48px;padding:0 28px;background:var(--gold);color:#3b2410;border:0;border-radius:12px;font:700 16px 'Kanit',system-ui,sans-serif;cursor:pointer}
#restart:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:420px){#over b{font-size:34px}}