/* British Day v1.2 — scene-first, no separate character sprites. */
:root{color-scheme:dark;font-family:Georgia,"Times New Roman",serif}*{box-sizing:border-box}
html,body{margin:0;min-height:100%}body{background:#171815;color:#f4eee3}
a{color:#f1d4a5;text-underline-offset:3px}a:hover{color:#fff0d1}
.pub-page{width:100%;min-height:100svh;height:100svh;display:flex;flex-direction:column;padding:8px clamp(10px,1.2vw,24px) 10px;gap:8px}
.pub-header{flex:0 0 auto;min-height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.back-link{justify-self:start;font-size:clamp(.87rem,1.1vw,1rem);white-space:nowrap}
.project-label{font-size:clamp(.98rem,1.35vw,1.28rem);font-weight:700;text-align:center;white-space:nowrap}
.phase{justify-self:end;font:600 .7rem/1.5 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#cbb797;white-space:nowrap}
.experience{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.scene-frame{position:relative;flex:0 1 auto;height:auto;width:auto;max-width:100%;max-height:calc(100% - 47px);aspect-ratio:1672/941;border:1px solid #66503d;border-radius:10px;overflow:hidden;background:#231d19;box-shadow:0 14px 40px #0007}
.pub-art{display:block;width:100%;height:100%;object-fit:contain}
.weather-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.scene-toolbar{flex:0 0 39px;width:min(100%,calc((100svh - 115px)*1672/941));display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #443a30;border-radius:8px;padding:5px 9px 5px 13px;background:#24231f;font:.78rem/1.3 system-ui,sans-serif}
.toolbar-left{display:flex;align-items:center;gap:8px;min-width:0;color:#d9c6a9}.status-dot{display:inline-block;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#bba178}
.status-detail{color:#a99b88;white-space:nowrap}
#weather-select{appearance:auto;border:1px solid #806a50;border-radius:5px;background:#332b25;color:#fff1d9;font:inherit;padding:4px 7px;cursor:pointer}
#weather-select:focus-visible{outline:2px solid #f5ce92}
.expand-button{display:flex;align-items:center;gap:7px;min-height:29px;padding:4px 10px;border:1px solid #8a7357;border-radius:6px;background:#302922;color:#fff3df;cursor:pointer;font:600 .78rem system-ui,sans-serif;white-space:nowrap}
.expand-button:hover,.expand-button:focus-visible{background:#514032;outline-color:#ffe0a1}.expand-button span:first-child{font-size:1.2rem;line-height:1}.expand-button[hidden]{display:none}
.character-hotspot{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;z-index:2;border-radius:20%}
.character-hotspot:hover{outline:1px dashed #eed39b99;outline-offset:1px}.character-hotspot:focus-visible{outline:2px solid #ffe0a1}
.speech-bubble{position:absolute;z-index:3;max-width:32%;padding:clamp(5px,.65vw,11px) clamp(7px,1vw,14px);border:2px solid #694028;border-radius:9px;background:#fff1d4;color:#322018;box-shadow:2px 3px 0 #3b241b;font:600 clamp(9px,1.15vw,17px)/1.25 Georgia,serif;text-align:center;pointer-events:none}
.speech-bubble[hidden]{display:none}
.speech-bubble:after{content:"";position:absolute;left:35%;bottom:-10px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:10px solid #fff1d4}
.experience:fullscreen{background:#11120f;padding:8px;gap:8px}.experience:fullscreen .scene-frame{max-height:calc(100% - 47px)}.experience:fullscreen .scene-toolbar{max-width:100%}
@media(min-width:701px){.scene-frame{width:min(100%,calc((100svh - 115px)*1672/941))}}
@media(max-width:700px){.pub-page{height:auto;min-height:100svh;padding:8px 10px 12px}.pub-header{grid-template-columns:1fr auto;min-height:40px}.project-label{justify-self:end;font-size:.95rem}.phase{display:none}.experience{justify-content:flex-start;gap:8px}.scene-frame{width:100%;max-height:none;border-radius:6px}.scene-toolbar{width:100%;flex-basis:auto;min-height:40px}.status-detail{display:none}.speech-bubble{font-size:clamp(8px,1.8vw,12px);border-width:1px}.experience:fullscreen{justify-content:center}.experience:fullscreen .scene-frame{width:auto;height:auto;max-width:100%;max-height:calc(100% - 49px)}}
@media(max-height:500px) and (min-width:701px){.pub-page{gap:3px;padding-top:2px;padding-bottom:3px}.pub-header{min-height:30px}.scene-frame{width:min(100%,calc((100svh - 92px)*1672/941))}.scene-toolbar{flex-basis:35px}}
/* v1.3: dialogue appears without moving or editing any character artwork. */
.character-hotspot:hover{outline:none;background:rgba(255,217,139,.07)}
.character-hotspot:focus-visible{outline:2px solid #ffe0a1}
.speech-bubble{transition:none;max-width:29%;padding:clamp(5px,.65vw,10px) clamp(8px,.9vw,12px);z-index:5}
.speech-bubble[data-tail="top"]:after{top:-10px;bottom:auto;border-top:0;border-bottom:10px solid #fff1d4}
.speech-bubble[data-tail="bottom"]:after{top:auto;bottom:-10px;border-bottom:0;border-top:10px solid #fff1d4}
.speech-bubble .speaker{display:block;font:bold .73em/1.2 system-ui,sans-serif;color:#8f5932;margin-bottom:3px;letter-spacing:.03em}
.speech-bubble .words{display:block}
@media(max-width:700px){.speech-bubble{max-width:39%;padding:4px 5px;line-height:1.15}.speech-bubble .speaker{margin-bottom:1px}}

/* v1.4 — user-drawn character-specific bubble zones. */
.speech-bubble{box-sizing:border-box;min-width:0;max-width:none;border-width:1px;border-radius:7px;padding:clamp(2px,.30vw,5px) clamp(3px,.43vw,7px);line-height:1.13;overflow-wrap:break-word;word-break:normal;white-space:normal;}
.speech-bubble .speaker{font-size:.72em;line-height:1.08;margin:0 0 2px}
.speech-bubble:after{left:var(--pointer,50%);transform:translateX(-50%);border-left-width:5px;border-right-width:5px}
.speech-bubble[data-tail="top"]:after{top:-7px;border-bottom-width:7px}
.speech-bubble[data-tail="bottom"]:after{bottom:-7px;border-top-width:7px}
@media(max-width:700px){.speech-bubble{padding:2px 3px;line-height:1.06}.speech-bubble .speaker{margin-bottom:1px}}

/* v1.5 — readable speech and character-accurate connector */
.speech-bubble{width:auto;min-width:0;max-width:none;box-sizing:border-box;padding:8px 11px;border:2px solid #70452b;border-radius:10px;line-height:1.28;box-shadow:2px 3px 0 #3b241b;overflow-wrap:normal;word-break:normal;z-index:6}
.speech-bubble .speaker{font-size:.76em;line-height:1.2;margin-bottom:3px}
.speech-bubble:after,.speech-bubble:before{display:none!important}
.dialogue-connector{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;display:none;overflow:visible}
@media(max-width:700px){.speech-bubble{padding:5px 6px;line-height:1.2}}

/* v1.6 — fixed drawn-area anchors, solid attached pointer */
.speech-bubble{max-width:none;min-width:0;padding:6px 9px;line-height:1.18;z-index:7}
.speech-bubble:after,.speech-bubble:before{display:none!important}
.dialogue-connector{z-index:6;overflow:hidden}
.dialogue-tail{fill:#fff1d4;stroke:#70452b;stroke-width:1.7;stroke-linejoin:round}
@media(max-width:700px){.speech-bubble{padding:3px 5px;line-height:1.1}}

/* v1.7: Box positioning only. No tail, no connector, no layout drift. */
.speech-bubble:before,.speech-bubble:after{content:none!important;display:none!important}
.dialogue-connector,.dialogue-tail{display:none!important}
.speech-bubble{box-shadow:1px 2px 0 #3b241b;transform:none!important;}

/* v1.8: clickable character regions stay invisible; keyboard focus remains visible. */
.character-hotspot:hover{outline:none!important;background:transparent!important;box-shadow:none!important}
.character-hotspot:focus:not(:focus-visible){outline:none!important}