:root {
  --beta-ribbon-height: 0px;
}

/* Newspaper reader: real pages with a compact phone-safe article length. */
#screen-dialog.dialog-style-newspaper .newspaper-row {
  width: min(680px, 100%);
  max-width: 680px;
  min-height: 100%;
}
#screen-dialog.dialog-style-newspaper .newspaper-row > div:not(.avatar) {
  min-width: 0;
  width: 100%;
}
#screen-dialog.dialog-style-newspaper .newspaper-bubble {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #877345 !important;
  border-radius: 4px !important;
  color: #17130d !important;
  background: #d8c79d !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .48) !important;
}
#screen-dialog.dialog-style-newspaper .newspaper-bubble::before,
#screen-dialog.dialog-style-newspaper .newspaper-bubble::after {
  display: none !important;
  content: none !important;
}
.newspaper-reader {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  perspective: 1200px;
  background: #cbb98e;
}
.newspaper-pages {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.newspaper-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16px 18px 12px;
  overflow: hidden;
  transform-origin: left center;
  backface-visibility: hidden;
  color: #17130d;
  background:
    linear-gradient(90deg, rgba(81, 55, 15, .08), transparent 8%, transparent 92%, rgba(81, 55, 15, .07)),
    repeating-linear-gradient(0deg, rgba(62, 43, 15, .028) 0 1px, transparent 1px 6px),
    #f1ead6;
}
.newspaper-sheet[hidden] { display: none !important; }
.newspaper-masthead {
  flex: 0 0 auto;
  padding: 6px 2px 9px;
  border-top: 4px double #17130d;
  border-bottom: 4px double #17130d;
  text-align: center;
}
.newspaper-masthead h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #17130d;
  font: 900 clamp(1.15rem, 4.8vw, 1.75rem)/1.05 Georgia, serif;
  letter-spacing: 0;
}
.newspaper-masthead span {
  display: block;
  margin-top: 5px;
  font: 800 .68rem/1.1 Georgia, serif;
}
.newspaper-byline {
  flex: 0 0 auto;
  padding: 8px 0 6px;
  border-bottom: 1px solid rgba(38, 29, 15, .28);
  color: #594a31;
  font: 700 .74rem/1.2 system-ui, sans-serif;
  text-transform: uppercase;
}
.newspaper-article-headline {
  flex: 0 0 auto;
  margin: 9px 0 0;
  color: #17130d;
  font: 900 1.08rem/1.18 Georgia, serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.newspaper-copy {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 0 8px;
  overflow: auto;
  color: #17130d;
  font: 1.14rem/1.46 Georgia, serif;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: #8b7444 transparent;
}
.newspaper-sheet > footer {
  flex: 0 0 auto;
  padding-top: 7px;
  border-top: 1px solid rgba(38, 29, 15, .28);
  color: #6c5a39;
  font: .68rem/1.1 system-ui, sans-serif;
  text-align: right;
}
.newspaper-controls {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  flex: 0 0 54px;
  min-height: 54px;
  border-top: 1px solid #8a7549;
  color: #211a10;
  background: #d8c89f;
}
.newspaper-page-status {
  overflow: hidden;
  font: 800 .78rem/1 system-ui, sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.newspaper-page-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #17130d;
  background: transparent;
  font: 700 2rem/1 Georgia, serif;
  cursor: pointer;
}
.newspaper-page-button:active:not(:disabled) { background: rgba(65, 47, 17, .13); }
.newspaper-page-button:focus-visible { outline: 3px solid #8d6c27; outline-offset: -3px; }
.newspaper-page-button:disabled { opacity: .24; cursor: default; }
.newspaper-sheet.is-turning-forward { animation: newspaper-turn-forward .22s ease-in forwards; }
.newspaper-sheet.is-turning-back { animation: newspaper-turn-back .22s ease-in forwards; transform-origin: right center; }
.newspaper-sheet.is-entering-forward { animation: newspaper-enter-forward .26s ease-out both; transform-origin: right center; }
.newspaper-sheet.is-entering-back { animation: newspaper-enter-back .26s ease-out both; }
@keyframes newspaper-turn-forward {
  from { transform: rotateY(0); filter: brightness(1); }
  to { transform: rotateY(-82deg); filter: brightness(.72); }
}
@keyframes newspaper-turn-back {
  from { transform: rotateY(0); filter: brightness(1); }
  to { transform: rotateY(82deg); filter: brightness(.72); }
}
@keyframes newspaper-enter-forward {
  from { transform: rotateY(72deg); filter: brightness(.78); }
  to { transform: rotateY(0); filter: brightness(1); }
}
@keyframes newspaper-enter-back {
  from { transform: rotateY(-72deg); filter: brightness(.78); }
  to { transform: rotateY(0); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .newspaper-sheet { animation-duration: .01ms !important; }
}
@media (max-width: 600px) {
  #screen-dialog.dialog-style-newspaper #chat-list > .newspaper-row > div:not(.avatar) {
    padding-top: 58px !important;
  }
  #screen-dialog.dialog-style-newspaper .newspaper-bubble {
    border-right: 0 !important;
    border-left: 0 !important;
  }
  .newspaper-sheet { padding: 13px 15px 10px; }
  .newspaper-copy { font-size: 1.08rem; line-height: 1.42; }
}
@media (max-width: 360px), (max-height: 650px) {
  .newspaper-sheet { padding: 10px 12px 8px; }
  .newspaper-masthead { padding: 4px 2px 6px; }
  .newspaper-masthead h2 { font-size: 1.05rem; }
  .newspaper-masthead span { margin-top: 3px; font-size: .59rem; }
  .newspaper-byline { padding: 5px 0 4px; font-size: .66rem; }
  .newspaper-article-headline { margin-top: 6px; font-size: .98rem; }
  .newspaper-copy { padding: 7px 0 6px; font-size: 1rem; line-height: 1.38; }
  .newspaper-controls { flex-basis: 48px; min-height: 48px; }
}

.alpha-completion-medal {
  border: 1px solid rgba(232, 189, 85, .72) !important;
  background: linear-gradient(155deg, rgba(8, 25, 49, .98), rgba(20, 46, 77, .96)) !important;
  color: #f7f8fb;
  text-align: left;
}

.alpha-completion-medal .info-title {
  color: #f0c763;
  font-size: 1.08rem;
}

.alpha-completion-medal p {
  margin: 10px 0 14px;
  line-height: 1.5;
}

.alpha-completion-medal-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.alpha-completion-medal-actions .btn {
  min-height: 48px;
}

.alpha-completion-medal-status {
  min-height: 1.5em;
  color: #dce8f8;
  font-size: .9rem;
}

.alpha-completion-medal-repeat {
  margin-top: 4px;
  text-align: center;
}

@media (max-width: 430px) {
  .alpha-completion-medal-actions {
    grid-template-columns: 1fr;
  }
}

.screen {
  inset: var(--beta-ribbon-height) 0 0;
}

.beta-ribbon {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100001;
  min-height: var(--beta-ribbon-height);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  color: #fff;
  background: #8f251f;
  border-bottom: 1px solid #ffb24a;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .45);
  font-size: .72rem;
}

.beta-ribbon .update-banner {
  position: static;
  inset: auto;
  min-width: 0;
  max-width: 150px;
  transform: none;
  padding: 5px 8px;
  color: #24150f;
  background: #ff9a73;
  border-color: #ffd2c1;
  box-shadow: none;
  font-size: .68rem;
  white-space: nowrap;
}

.beta-ribbon strong {
  color: #fff2bf;
  font-size: .78rem;
}

.beta-ribbon span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-ribbon button {
  min-width: 74px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 6px;
  padding: 5px 8px;
  color: #fff;
  background: rgba(10, 13, 20, .35);
  font: inherit;
  font-weight: 700;
}

.beta-ribbon button:active {
  transform: translateY(1px);
}

@media (max-width: 420px) {
  .beta-ribbon {
    grid-template-columns: 1fr auto auto;
    gap: 7px;
  }

  .beta-ribbon span {
    display: none;
  }
}

/* Alpha-Test: lange Dialoge bleiben auf kleinen Displays vollständig lesbar. */
#screen-dialog.active {
  min-height: 0;
  overflow: hidden;
}

#screen-dialog .chat-header,
#screen-dialog .chat-footer {
  flex: 0 0 auto;
}

#screen-dialog #chat-list,
#screen-dialog[class*="dialog-style-"] #chat-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 174, 220, .7) rgba(8, 14, 24, .3);
  overflow-anchor: none !important;
}

#screen-dialog .bubble .bubble-text,
#screen-dialog[class*="dialog-style-"] .bubble .bubble-text {
  font-size: 1.2rem !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: pre-wrap !important;
  -webkit-line-clamp: unset !important;
  overflow-anchor: none !important;
}

#screen-dialog .dialog-speaker {
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
}

#screen-dialog .bubble::before,
#screen-dialog .bubble::after {
  pointer-events: none !important;
}

@media (max-width: 600px), (max-height: 760px) {
  #screen-dialog #chat-list,
  #screen-dialog[class*="dialog-style-"] #chat-list {
    padding-bottom: 18px !important;
  }
}

/*
 * Requisiten-Dialoge besitzen feste Rahmen und Bedienelemente. Der Rahmen darf
 * deshalb nie selbst scrollen: Nur der Text darin bekommt die Scrollflaeche.
 */
#screen-dialog:is(
  .dialog-style-adventure,
  .dialog-style-box,
  .dialog-style-radio,
  .dialog-style-mission,
  .dialog-style-diary,
  .dialog-style-dossier,
  .dialog-style-newspaper,
  .dialog-style-bottle,
  .dialog-style-treasure-map,
  .dialog-style-polaroid,
  .dialog-style-phone,
  .dialog-style-video,
  .dialog-style-detective,
  .dialog-style-safe,
  .dialog-style-scanner,
  .dialog-style-gps,
  .dialog-style-compass,
  .dialog-style-mystery,
  .dialog-style-terminal,
  .dialog-style-emergency,
  .dialog-style-inventory,
  .dialog-style-riddle,
  .dialog-style-audio,
  .dialog-style-ar
) .bubble {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: min(62svh, calc(100svh - var(--beta-ribbon-height) - 166px), 520px) !important;
  min-height: min(46svh, 350px) !important;
  max-height: calc(100svh - var(--beta-ribbon-height) - 166px) !important;
  overflow: hidden !important;
}

#screen-dialog:is(
  .dialog-style-adventure,
  .dialog-style-box,
  .dialog-style-radio,
  .dialog-style-mission,
  .dialog-style-diary,
  .dialog-style-dossier,
  .dialog-style-newspaper,
  .dialog-style-bottle,
  .dialog-style-treasure-map,
  .dialog-style-polaroid,
  .dialog-style-phone,
  .dialog-style-video,
  .dialog-style-detective,
  .dialog-style-safe,
  .dialog-style-scanner,
  .dialog-style-gps,
  .dialog-style-compass,
  .dialog-style-mystery,
  .dialog-style-terminal,
  .dialog-style-emergency,
  .dialog-style-inventory,
  .dialog-style-riddle,
  .dialog-style-audio,
  .dialog-style-ar
) .bubble .bubble-text {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(142, 174, 220, .82) rgba(8, 14, 24, .24) !important;
  touch-action: pan-y !important;
}

#screen-dialog:is(
  .dialog-style-adventure,
  .dialog-style-box,
  .dialog-style-radio,
  .dialog-style-mission,
  .dialog-style-diary,
  .dialog-style-dossier,
  .dialog-style-newspaper,
  .dialog-style-bottle,
  .dialog-style-treasure-map,
  .dialog-style-polaroid,
  .dialog-style-phone,
  .dialog-style-video,
  .dialog-style-detective,
  .dialog-style-safe,
  .dialog-style-scanner,
  .dialog-style-gps,
  .dialog-style-compass,
  .dialog-style-mystery,
  .dialog-style-terminal,
  .dialog-style-emergency,
  .dialog-style-inventory,
  .dialog-style-riddle,
  .dialog-style-audio,
  .dialog-style-ar
) .dialog-speaker {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 7 !important;
}

/* Runde Requisiten behalten ihre Form; der Text scrollt im inneren Lesefeld. */
#screen-dialog.dialog-style-compass .bubble,
#screen-dialog.dialog-style-safe .bubble {
  width: min(84vw, 430px) !important;
  height: min(84vw, calc(100svh - var(--beta-ribbon-height) - 166px), 430px) !important;
  min-height: min(84vw, 430px) !important;
  max-height: min(84vw, calc(100svh - var(--beta-ribbon-height) - 166px), 430px) !important;
  aspect-ratio: 1 / 1 !important;
}

#screen-dialog.dialog-style-compass .bubble {
  width: min(90vw, calc(100svh - var(--beta-ribbon-height) - 166px), 460px) !important;
  height: min(90vw, calc(100svh - var(--beta-ribbon-height) - 166px), 460px) !important;
  min-height: min(90vw, calc(100svh - var(--beta-ribbon-height) - 166px), 460px) !important;
  max-height: min(90vw, calc(100svh - var(--beta-ribbon-height) - 166px), 460px) !important;
  padding: 80px 24px 30px !important;
}

#screen-dialog.dialog-style-safe .bubble {
  padding: 128px 30px 26px !important;
}

#screen-dialog.dialog-style-safe .dialog-speaker {
  padding: 4px 10px !important;
  color: #fff5c8 !important;
  background: rgba(5, 8, 13, .88) !important;
  border: 1px solid rgba(244, 196, 48, .58) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34) !important;
}

#screen-dialog.dialog-style-audio .bubble::after,
#screen-dialog.dialog-style-gps .bubble::before,
#screen-dialog.dialog-style-gps .bubble::after,
#screen-dialog.dialog-style-compass .bubble::before,
#screen-dialog.dialog-style-compass .bubble::after,
#screen-dialog.dialog-style-safe .bubble::before,
#screen-dialog.dialog-style-safe .bubble::after,
#screen-dialog.dialog-style-ar .bubble::before,
#screen-dialog.dialog-style-ar .bubble::after {
  pointer-events: none !important;
}

@media (max-width: 380px), (max-height: 640px) {
  #screen-dialog:is(
    .dialog-style-adventure,
    .dialog-style-box,
    .dialog-style-radio,
    .dialog-style-mission,
    .dialog-style-diary,
    .dialog-style-dossier,
    .dialog-style-newspaper,
    .dialog-style-bottle,
    .dialog-style-treasure-map,
    .dialog-style-polaroid,
    .dialog-style-phone,
    .dialog-style-video,
    .dialog-style-detective,
    .dialog-style-scanner,
    .dialog-style-gps,
    .dialog-style-mystery,
    .dialog-style-terminal,
    .dialog-style-emergency,
    .dialog-style-inventory,
    .dialog-style-riddle,
    .dialog-style-audio,
    .dialog-style-ar
  ) .bubble {
    height: min(58svh, calc(100svh - var(--beta-ribbon-height) - 154px), 430px) !important;
    min-height: min(40svh, 270px) !important;
    max-height: calc(100svh - var(--beta-ribbon-height) - 154px) !important;
  }
}

/* Der Comic nutzt ein eigenes Panel und braucht daher dieselbe innere Textrolle. */
#screen-dialog.dialog-style-comic .bubble-row {
  width: min(90vw, 720px) !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

#screen-dialog.dialog-style-comic .bubble-row > div:not(.avatar) {
  width: 100% !important;
  max-width: 100% !important;
}

#screen-dialog.dialog-style-comic .bubble {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: min(50svh, 360px) !important;
  min-height: min(38svh, 260px) !important;
  max-height: calc(100svh - var(--beta-ribbon-height) - 244px) !important;
  overflow: hidden !important;
}

#screen-dialog.dialog-style-comic .bubble .bubble-text {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  touch-action: pan-y !important;
}

#screen-dialog.dialog-style-comic .dialog-speaker {
  position: relative !important;
  z-index: 7 !important;
  flex: 0 0 auto !important;
}

/* Der alte Brief nutzt das Papier als Rahmen. Auf schmalen Handys bleibt der
 * Rahmen stehen und nur der deutlich breitere Textbereich scrollt. */
#screen-dialog.dialog-style-letter .bubble {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: min(62svh, calc(100svh - var(--beta-ribbon-height) - 166px), 520px) !important;
  min-height: min(46svh, 340px) !important;
  max-height: calc(100svh - var(--beta-ribbon-height) - 166px) !important;
  overflow: hidden !important;
}

#screen-dialog.dialog-style-letter .bubble .bubble-text {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  touch-action: pan-y !important;
}

#screen-dialog.dialog-style-letter .dialog-speaker {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 7 !important;
}

@media (max-width: 600px), (max-height: 760px) {
  #screen-dialog.dialog-style-letter #chat-list {
    padding-left: 32px !important;
    padding-right: 8px !important;
  }

  #screen-dialog.dialog-style-letter #chat-list::before {
    left: 20px !important;
  }

  #screen-dialog.dialog-style-letter .bubble {
    height: min(58svh, calc(100svh - var(--beta-ribbon-height) - 154px), 430px) !important;
    min-height: min(40svh, 270px) !important;
    max-height: calc(100svh - var(--beta-ribbon-height) - 154px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Das Foto bleibt erkennbar, laesst aber genug Platz fuer Bildtitel und Text. */
  #screen-dialog.dialog-style-polaroid .bubble {
    padding: 156px 18px 28px !important;
    border-width: 9px !important;
    border-bottom-width: 40px !important;
  }

  #screen-dialog.dialog-style-polaroid .bubble::before {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    height: 128px !important;
  }

  #screen-dialog.dialog-style-polaroid .bubble::after {
    left: 18px !important;
    bottom: 12px !important;
  }

  #screen-dialog.dialog-style-terminal .bubble {
    padding: 62px 20px 26px !important;
  }

  #screen-dialog.dialog-style-terminal .bubble .bubble-text,
  #screen-dialog.dialog-style-treasure-map .bubble .bubble-text {
    width: 100% !important;
    max-width: none !important;
  }

  #screen-dialog.dialog-style-treasure-map .bubble {
    padding: 58px 22px 34px !important;
  }

  #screen-dialog.dialog-style-treasure-map .bubble .bubble-text {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Alpha-Materialpass: mehr Tiefe, echte Leseflaechen und klar getrennte Objekte. */
#screen-dialog[class*="dialog-style-"] .bubble-row .avatar {
  border: 2px solid rgba(255, 255, 255, .42) !important;
  box-shadow:
    0 9px 18px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .46) !important;
}

#screen-dialog.dialog-style-chat #chat-list {
  background:
    linear-gradient(rgba(7, 17, 31, .9), rgba(4, 12, 24, .96)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 12px) !important;
}

#screen-dialog.dialog-style-chat .bubble {
  border: 1px solid rgba(150, 190, 231, .24) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

#screen-dialog.dialog-style-chat .bubble.npc {
  background: linear-gradient(145deg, #24486f, #172f4d) !important;
}

#screen-dialog.dialog-style-chat .bubble.player {
  background: linear-gradient(145deg, #357b47, #1d5a34) !important;
}

#screen-dialog.dialog-style-chat .bubble.narrator {
  background: linear-gradient(145deg, #452854, #2d193b) !important;
  border-color: rgba(216, 158, 236, .34) !important;
}

#screen-dialog:is(
  .dialog-style-letter,
  .dialog-style-diary,
  .dialog-style-dossier,
  .dialog-style-newspaper,
  .dialog-style-treasure-map,
  .dialog-style-riddle
) .bubble {
  box-shadow:
    0 30px 58px rgba(20, 11, 4, .5),
    0 3px 7px rgba(20, 11, 4, .32),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 0 38px rgba(106, 67, 22, .11) !important;
}

#screen-dialog:is(.dialog-style-adventure, .dialog-style-box) .bubble {
  box-shadow:
    0 34px 66px rgba(16, 8, 2, .62),
    0 8px 16px rgba(16, 8, 2, .42),
    inset 0 2px 0 rgba(255, 235, 170, .5),
    inset 0 -22px 34px rgba(52, 24, 4, .18) !important;
}

#screen-dialog:is(
  .dialog-style-radio,
  .dialog-style-phone,
  .dialog-style-video,
  .dialog-style-scanner,
  .dialog-style-gps,
  .dialog-style-terminal,
  .dialog-style-emergency,
  .dialog-style-audio,
  .dialog-style-ar
) .bubble {
  box-shadow:
    0 32px 64px rgba(0, 0, 0, .62),
    0 7px 15px rgba(0, 0, 0, .44),
    inset 0 2px 0 rgba(255, 255, 255, .18),
    inset 0 -20px 34px rgba(0, 0, 0, .2) !important;
}

#screen-dialog:is(
  .dialog-style-radio,
  .dialog-style-scanner,
  .dialog-style-terminal
) .bubble .bubble-text {
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  color: #c8ffd0 !important;
  background:
    repeating-linear-gradient(0deg, rgba(118, 255, 145, .035) 0 1px, transparent 1px 4px),
    rgba(1, 15, 8, .76) !important;
  border: 1px solid rgba(102, 255, 135, .3) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 24px rgba(23, 255, 92, .08),
    0 1px 0 rgba(255, 255, 255, .07) !important;
  text-shadow: 0 0 8px rgba(99, 255, 137, .16) !important;
}

#screen-dialog.dialog-style-scanner .bubble .bubble-text {
  color: #dcfbff !important;
  background:
    repeating-linear-gradient(0deg, rgba(75, 222, 244, .045) 0 1px, transparent 1px 4px),
    rgba(1, 17, 24, .78) !important;
  border-color: rgba(80, 224, 245, .38) !important;
  box-shadow: inset 0 0 24px rgba(38, 218, 245, .1) !important;
  text-shadow: 0 0 8px rgba(111, 231, 255, .18) !important;
}

#screen-dialog:is(
  .dialog-style-phone,
  .dialog-style-video,
  .dialog-style-audio,
  .dialog-style-ar
) .bubble .bubble-text {
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  color: #f1f6ff !important;
  background: linear-gradient(145deg, rgba(18, 30, 48, .82), rgba(5, 11, 22, .88)) !important;
  border: 1px solid rgba(171, 205, 245, .27) !important;
  border-radius: 7px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 28px rgba(52, 126, 208, .08) !important;
}

#screen-dialog.dialog-style-gps .bubble .bubble-text {
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  color: #162715 !important;
  background:
    linear-gradient(rgba(225, 247, 178, .9), rgba(191, 225, 139, .9)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(35, 74, 32, .12) 23px 24px) !important;
  border: 1px solid rgba(36, 73, 29, .38) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 20px rgba(49, 76, 27, .12) !important;
}

#screen-dialog.dialog-style-compass .bubble {
  box-shadow:
    0 34px 68px rgba(35, 17, 3, .6),
    0 8px 15px rgba(35, 17, 3, .4),
    inset 0 3px 0 rgba(255, 232, 167, .7),
    inset 0 -24px 38px rgba(86, 42, 7, .2) !important;
}

#screen-dialog.dialog-style-compass .bubble .bubble-text {
  box-sizing: border-box !important;
  padding: 13px 16px !important;
  color: #2d1c08 !important;
  background: radial-gradient(circle at 50% 30%, rgba(255, 248, 216, .92), rgba(240, 207, 137, .82)) !important;
  border: 1px solid rgba(101, 58, 14, .3) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 24px rgba(91, 51, 10, .13),
    0 2px 7px rgba(61, 33, 7, .2) !important;
}

#screen-dialog.dialog-style-safe .bubble {
  box-shadow:
    0 36px 72px rgba(0, 0, 0, .7),
    0 8px 18px rgba(0, 0, 0, .46),
    inset 0 3px 0 rgba(255, 255, 255, .2),
    inset 0 -28px 44px rgba(0, 0, 0, .26) !important;
}

#screen-dialog.dialog-style-safe .bubble .bubble-text {
  box-sizing: border-box !important;
  padding: 13px 16px !important;
  color: #fff6cc !important;
  background: linear-gradient(145deg, rgba(14, 18, 22, .86), rgba(3, 6, 9, .9)) !important;
  border: 1px solid rgba(242, 198, 76, .34) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 28px rgba(245, 194, 54, .06) !important;
}

#screen-dialog.dialog-style-mystery .bubble .bubble-text {
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  color: #f6eeff !important;
  background: radial-gradient(circle at 50% 18%, rgba(94, 49, 129, .42), rgba(19, 8, 29, .78)) !important;
  border: 1px solid rgba(208, 160, 244, .28) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 28px rgba(163, 84, 218, .1) !important;
}

#screen-dialog.dialog-style-polaroid .bubble {
  box-shadow:
    0 32px 58px rgba(0, 0, 0, .54),
    0 5px 10px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

#screen-dialog.dialog-style-detective .bubble {
  box-shadow:
    0 24px 46px rgba(45, 22, 7, .48),
    0 4px 8px rgba(45, 22, 7, .28),
    inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

#screen-dialog:is(.dialog-style-inventory, .dialog-style-riddle) .bubble {
  box-shadow:
    0 26px 52px rgba(24, 13, 4, .52),
    0 5px 11px rgba(24, 13, 4, .28),
    inset 0 1px 0 rgba(255, 247, 215, .54),
    inset 0 -18px 30px rgba(75, 45, 12, .1) !important;
}

#screen-dialog.dialog-style-bottle .bubble {
  box-shadow:
    0 36px 70px rgba(0, 11, 18, .6),
    0 7px 16px rgba(0, 11, 18, .38),
    inset 0 2px 0 rgba(222, 250, 255, .42),
    inset 0 -20px 34px rgba(0, 45, 58, .16) !important;
}

#screen-dialog.dialog-style-comic .bubble {
  box-shadow:
    7px 8px 0 #111,
    0 26px 48px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

@media (max-width: 430px) {
  #screen-dialog:is(
    .dialog-style-radio,
    .dialog-style-scanner,
    .dialog-style-terminal,
    .dialog-style-phone,
    .dialog-style-video,
    .dialog-style-audio,
    .dialog-style-ar,
    .dialog-style-gps,
    .dialog-style-compass,
    .dialog-style-safe,
    .dialog-style-mystery
  ) .bubble .bubble-text {
    padding: 11px 12px !important;
  }
}

/* Alpha-Handyansicht: Die Requisite ist die Szene und nutzt die gesamte
 * Flaeche zwischen Dialogtitel und Weiter-Schaltflaeche. */
@media (max-width: 600px) {
  #screen-dialog .chat-footer {
    position: relative !important;
    z-index: 100 !important;
    flex: 0 0 auto !important;
    isolation: isolate !important;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .28) !important;
  }

  #screen-dialog.dialog-style-chat #chat-list {
    padding-bottom: 72px !important;
    scroll-padding-bottom: 72px !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    perspective: none !important;
    scrollbar-gutter: auto !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list > .bubble-row {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    position: relative !important;
    perspective: none !important;
    transform: none !important;
    filter: none !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list > .bubble-row > div:not(.avatar) {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
    padding-top: 58px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100% !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list > .bubble-row .npc-label {
    position: absolute !important;
    z-index: 32 !important;
    top: 14px !important;
    left: 58px !important;
    max-width: calc(100% - 128px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list > .bubble-row .bubble-meta {
    position: absolute !important;
    z-index: 32 !important;
    top: 16px !important;
    right: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list > .bubble-row .avatar {
    position: absolute !important;
    z-index: 30 !important;
    top: 12px !important;
    left: 12px !important;
    margin: 0 !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list > .bubble-row .bubble {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) .bubble .bubble-text {
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 48px !important;
    scroll-padding-bottom: 48px !important;
  }

  #screen-dialog[class*="dialog-style-"]:not(.dialog-style-chat) #chat-list:has(> #chat-choices.inline-choices) > .bubble-row {
    height: auto !important;
    min-height: calc(100% - 76px) !important;
  }

  #screen-dialog.dialog-style-phone .bubble {
    padding: 96px 24px 108px !important;
  }

  #screen-dialog.dialog-style-video .bubble {
    padding: 76px 22px 46px !important;
  }

  #screen-dialog.dialog-style-safe .bubble {
    padding: 126px 24px 30px !important;
  }

  #screen-dialog.dialog-style-gps .bubble {
    padding: 112px 24px 90px !important;
  }

  #screen-dialog.dialog-style-compass .bubble {
    padding: 104px 26px 34px !important;
  }

  #screen-dialog.dialog-style-audio .bubble {
    padding: 76px 20px 122px !important;
  }

  #screen-dialog.dialog-style-polaroid .bubble {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #screen-dialog:is(.dialog-style-adventure, .dialog-style-box) #chat-list::before,
  #screen-dialog:is(.dialog-style-adventure, .dialog-style-box) #chat-list::after {
    display: none !important;
    content: none !important;
  }

  #screen-dialog:is(.dialog-style-adventure, .dialog-style-box) .bubble .bubble-text {
    padding-bottom: 48px !important;
    scroll-padding-bottom: 48px !important;
  }
}