/* Local, licensed comic fonts. Interface controls keep the reader's UI typeface. */
@font-face {
  font-family: "Heroika";
  src: url("fonts/heroika.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Takezo";
  src: url("fonts/takezo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --comic-text-font: "Heroika", "Segoe UI", Arial, sans-serif;
  --comic-name-font: "Arial Black", "Segoe UI", Arial, sans-serif;
}
/* Regional system fallbacks until reviewed translations have their own webfonts.
   Typography specimens use separate, explicitly limited sample font families. */
:lang(zh), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG) {
  --comic-text-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --comic-name-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
:lang(zh-Hant), :lang(zh-TW) {
  --comic-text-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --comic-name-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
:lang(zh-HK), :lang(zh-Hant-HK) {
  --comic-text-font: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --comic-name-font: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
}
:lang(ja) {
  --comic-text-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --comic-name-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
:lang(ko) {
  --comic-text-font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --comic-name-font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.bubble-text, .panel-transcript li, .record-message {
  font-family: var(--comic-text-font);
  font-weight: 400;
  font-synthesis: none;
}
.bubble-text {font-size: 18px; line-height: 1.15; gap: 2px; justify-content: safe center;}
/* Intrinsic child heights let the fitter measure overflow accurately. Unsafe
   centering/shrinking could move the speaker above the balloon's top border. */
.bubble-speaker, .bubble-words {flex-shrink: 0;}
.bubble-speaker, .panel-transcript .speaker {
  font-family: var(--comic-name-font);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1.1;
}
.bubble-speaker {font-size: .82em; color: #111827;}
.panel-transcript li {font-size: 21px; line-height: 1.55; margin-block: 12px;}
.panel-transcript .speaker {font-size: 25px; color: #b9e9fa; margin-inline-end: 7px;}
.panel-transcript .speaker.speaker-label {font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0;}
.record-message {font-size: 23px; line-height: 1.45;}
.screen-readable .record-message {font-size: 22px;}
.lettering-sfx {font-size: 36px; font-style: normal;}
.lettering-label {font-size: 18px;}
.story-accessibility{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media screen{.bubble-layer{display:block!important}}
:is(.bubble-text, .panel-transcript li, .record-message):is(:lang(zh), :lang(ja), :lang(ko)) {line-height: 1.65;}
:is(.bubble-speaker, .panel-transcript .speaker):is(:lang(zh), :lang(ja), :lang(ko)) {font-family:var(--comic-name-font);font-weight: 700; letter-spacing: 0;}
@media (max-width: 680px) {
  .panel-transcript li {font-size: 21px; line-height: 1.55;}
  .panel-transcript .speaker {font-size: 24px;}
  .screen-readable .record-message {font-size: 21px;}
}
@media print {
  .panel-transcript li, .screen-readable .record-message {font-size: 14px;}
  .panel-transcript .speaker {font-size: 16px; color: #111;}
}