@import url('./native-frame-metrics.css');
/* Bubble Clean and its tail, edited by the user in Aseprite on 27 September.
   Four source pixels per corner at 2x; no CSS triangle, radius or outline.
   The four straight strips are uniform: stretch only those strips, retaining
   fixed corners. Repeating them produces seams at fractional browser scales. */
html body :is(.native-speech-bubble,.pp-dialogue,#bubble,#creator-floating-bubble,#home-pixelpote-bubble,.city-mochi-bubble){
 --speech-body:url('/assets/interface-v2/dialogue-bubbles-v02/bubble-clean.png');
 --speech-tail:url('/assets/interface-v2/dialogue-bubbles-v02/bubble-tail.png');
 isolation:isolate;border:0!important;border-image:none!important;
 border-radius:0!important;background:none!important;box-shadow:none!important;
 color:#191722!important;overflow:visible;image-rendering:pixelated;
}
/* The same pixels in an authored dark palette for every character. This also
   overrides a light character tint that finishes decoding after a theme switch.
   Shape, corner metrics, tail and reveal behaviour remain theme-independent. */
html[data-ui-theme=dark] body :is(.native-speech-bubble,.pp-dialogue,#bubble,#creator-floating-bubble,#home-pixelpote-bubble,.city-mochi-bubble){
 --speech-body:url('/assets/interface-v2/dialogue-bubbles-v02/bubble-clean-dark.png')!important;
 --speech-tail:url('/assets/interface-v2/dialogue-bubbles-v02/bubble-tail-dark.png')!important;
 color:#e6e6e6!important;
}
html body :is(.native-speech-bubble,.pp-dialogue,#bubble,#creator-floating-bubble,#home-pixelpote-bubble,.city-mochi-bubble)::before{
 content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
 box-sizing:border-box;border:8px solid transparent;border-image:var(--speech-body) 4 fill / 8px / 0 stretch;
 border-radius:0;background:none;
 image-rendering:pixelated;image-rendering:crisp-edges;}
html body :is(.native-speech-bubble,.pp-dialogue,#bubble,#creator-floating-bubble,#home-pixelpote-bubble,.city-mochi-bubble)::after{
 content:'';display:block;position:absolute;inset:auto auto -16px var(--tail-left,50%);
 left:var(--tail-left,50%)!important;bottom:-16px!important;
 width:24px;height:20px;margin:0 0 0 -12px;padding:0;border:0!important;
 border-image:none!important;border-radius:0;box-shadow:none;transform:none!important;
 background:var(--speech-tail) center / 24px 20px no-repeat!important;
 image-rendering:pixelated;z-index:0;pointer-events:none;
}
html body :is(.city-actor,.scene-speech-anchor)>.city-mochi-bubble{padding:8px;bottom:calc(100% + 24px)}
html body .scene-speech-layer{position:fixed;inset:0;z-index:1000;pointer-events:none}
html body .scene-speech-anchor{position:absolute;transform-origin:0 0;pointer-events:none}
html body .scene-speech-layer[hidden]{display:none}

/* One typography/layout for character speech, independent of UI frame/theme.
   Scene adapters keep their anchor and available width; the corners stay 8px. */
:where(.native-speech-bubble){position:relative}
html body :is(.native-speech-bubble,.pp-dialogue,#bubble,#creator-floating-bubble,#home-pixelpote-bubble):not(.city-mochi-bubble){
 box-sizing:border-box;max-width:min(440px,calc(100vw - 24px));
 padding:10px 14px 18px!important;font:600 24px/1.2 'Fusion Pixel',Pixel,monospace!important;
 text-align:center;text-shadow:none!important;-webkit-text-stroke:0!important;
 font-synthesis:weight;white-space:pre-wrap;overflow-wrap:anywhere;
}
html body .native-speech-bubble :is(p,[data-speech-text]){font:inherit!important;line-height:inherit!important;color:inherit!important;margin:0}
html body .native-speech-bubble .sr-only{position:absolute;width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
html body .native-speech-bubble ruby{ruby-align:center}
html body .native-speech-bubble rt{font-size:.55em;line-height:1.2}
html body .native-speech-bubble .speech-text-region{display:block;max-height:calc(100dvh - 180px);overflow:auto;overscroll-behavior:contain;padding:.4em 0 4px}
html body .native-speech-bubble strong{text-decoration:underline;text-underline-offset:3px}
html body :is(.speech-advance-cue,.onboarding-dialogue-cue){position:absolute;bottom:2px;right:10px;font-size:16px;line-height:1;opacity:.65;pointer-events:none}
html body .native-speech-bubble[data-typing=true] .speech-advance-cue{visibility:hidden}
html body .native-speech-bubble[data-speech-tail=false]::after{display:none!important}
html body .native-speech-bubble[hidden],html body .native-speech-bubble [hidden]{display:none!important}