/* DRAUMEN · Mobile 2026 — eigene Fassung fuer norwegen-lesen.de
   (Kopie des geteilten Spielkiste-Stylesheets vom 04.08.2026, ab hier unabhaengig)
   Projektweite Touch-, Safe-Area- und Layout-Schicht fuer alle statischen Spiele. */

:root {
  --sk-touch: 48px;
  --sk-safe-top: env(safe-area-inset-top, 0px);
  --sk-safe-right: env(safe-area-inset-right, 0px);
  --sk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sk-safe-left: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: max(1rem, var(--sk-safe-top));
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

picture {
  max-width: 100%;
}

button,
[role="button"],
input,
select,
textarea,
a.cta,
a.ghost,
.btn,
.bar-btn,
.tool-btn,
.key,
.num-btn,
.casecard,
.mode-btn,
.skin {
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  min-block-size: 44px;
}

button,
[role="button"],
a.cta,
a.ghost,
.sk-start,
.btn,
.bar-btn,
.tool-btn,
.key,
.num-btn,
.casecard,
.mode-btn,
.skin,
.list a {
  min-block-size: var(--sk-touch);
}

.site-header .brand,
.main-nav a,
.footer-nav a,
.breadcrumb a,
.back,
.title-kiste,
.sk-passt,
.panel .eyebrow a,
.leise a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

/* Der Fokusring steht am Ende dieses Blatts, nicht hier. Begruendung dort. */

@media (forced-colors: active) {
  img,
  svg,
  canvas,
  video {
    forced-color-adjust: none;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }

  :where(button, a, [role="button"])[aria-pressed="true"],
  :where(button, a, [role="button"])[aria-current="true"],
  :where(button, a, [role="button"])[aria-selected="true"] {
    forced-color-adjust: none;
    color: HighlightText !important;
    -webkit-text-fill-color: HighlightText !important;
    background: Highlight !important;
    border-color: Highlight !important;
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }

  :where(button, a, [role="button"])[aria-pressed="true"] *,
  :where(button, a, [role="button"])[aria-current="true"] *,
  :where(button, a, [role="button"])[aria-selected="true"] * {
    color: HighlightText !important;
    -webkit-text-fill-color: HighlightText !important;
  }

  :where(button, input, select, textarea):disabled,
  [aria-disabled="true"] {
    color: GrayText !important;
    border-color: GrayText !important;
  }
}

@supports (height: 100dvh) {
  .app,
  #game.on,
  #title,
  #endveil,
  #wrap,
  #ui {
    min-height: 100dvh;
  }
}

@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-touch-callout: none;
  }

  input,
  textarea,
  [contenteditable="true"] {
    -webkit-touch-callout: default;
  }

  .ghost:hover,
  .cta:hover,
  .btn:hover,
  .tool-btn:hover,
  .casecard:hover,
  .skin:hover {
    transform: none;
  }
}

/* Gemeinsame Landing-Seiten */
@media (max-width: 820px) {
  .site-header {
    width: 100%;
    max-width: 100vw;
    padding-inline: max(.85rem, var(--sk-safe-left)) max(.85rem, var(--sk-safe-right));
  }

  .main-nav {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  body:not(.nav-open) .site-header .main-nav:not(.is-open) {
    display: none;
    visibility: hidden;
    pointer-events: none;
    contain: strict;
  }

  body.nav-open .site-header .main-nav.is-open {
    display: flex;
    visibility: visible;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav a {
    flex: 0 0 auto;
  }

  main,
  .shell {
    width: 100%;
  }

  .shell {
    min-height: 100svh;
    padding:
      max(.85rem, var(--sk-safe-top))
      max(.85rem, var(--sk-safe-right))
      max(1rem, var(--sk-safe-bottom))
      max(.85rem, var(--sk-safe-left));
  }

  nav {
    gap: .3rem;
    line-height: 1.35;
  }

  .hero {
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-copy,
  .brand-panel,
  .card,
  .panel,
  .sk-showcase__card,
  .sk-card,
  .sk-strip__card,
  .sk-tonspur,
  .sk-hinweis,
  .sk-schluss {
    border-radius: 8px;
    min-width: 0;
  }

  .sk-showcase__card,
  .sk-card,
  .sk-strip__card {
    overflow: hidden;
  }

  .sk-showcase__text,
  .sk-card__body,
  .sk-strip__card .sk-card__body,
  .sk-tonspur__liste li {
    min-width: 0;
  }

  .brand-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    justify-items: center;
  }

  .brand-panel picture,
  .brand-panel img,
  .brand-mark {
    width: min(100%, 280px);
    max-width: 100%;
  }

  .brand-copy {
    width: 100%;
    max-width: 100%;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cta,
  .ghost,
  .list a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .mode-tabs button,
  #langSwitch button,
  .langSwitch button,
  .langswitch button,
  .chiplink {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
}

@media (max-width: 430px) {
  h1 {
    overflow-wrap: anywhere;
  }

  .lede,
  .card p,
  .panel p,
  .more {
    font-size: 1rem;
  }
}

/* Spielkiste-Hub inklusive Sprachseiten */
@media (max-width: 720px) {
  .sk-hero {
    padding:
      max(2rem, var(--sk-safe-top))
      max(1rem, var(--sk-safe-right))
      1.8rem
      max(1rem, var(--sk-safe-left));
  }

  .sk-hero__title {
    font-size: clamp(2.25rem, 14vw, 3.8rem);
    line-height: .98;
  }

  .sk-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
  }

  .sk-showcase__card,
  .sk-grid,
  .sk-routes,
  .sk-languages {
    grid-template-columns: 1fr !important;
  }

  .sk-chip-row,
  .sk-game-grid,
  .sk-portfolio__grid {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .sk-chip-row::-webkit-scrollbar,
  .sk-game-grid::-webkit-scrollbar,
  .sk-portfolio__grid::-webkit-scrollbar {
    display: none;
  }

  .sk-games {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .sk-chip-row {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    scroll-snap-type: x proximity;
  }

  .sk-chip-label {
    flex: 0 0 100%;
  }

  .sk-choice {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .sk-game-card,
  .sk-game-card:nth-child(1),
  .sk-game-card:nth-child(2) {
    min-width: 0;
    scroll-snap-align: none;
  }

  .sk-game,
  .sk-showcase__card,
  .sk-route,
  .sk-language {
    border-radius: 8px;
  }
}

/* LUNDEFUGL */
@media (max-width: 520px) {
  #ui .chip,
  #ui .iconbtn,
  #ui .langsw {
    transform: translateZ(0);
  }

  #ui .chip {
    top: max(10px, var(--sk-safe-top));
    left: max(10px, var(--sk-safe-left));
    max-width: calc(100vw - 132px - var(--sk-safe-left) - var(--sk-safe-right));
  }

  #ui .iconbtn {
    top: max(10px, var(--sk-safe-top));
    width: 44px;
    height: 44px;
  }

  #ui #muteBtn { right: max(10px, var(--sk-safe-right)); }
  #ui #pauseBtn { right: calc(max(10px, var(--sk-safe-right)) + 50px); }
  #ui #musikBtn { right: calc(max(10px, var(--sk-safe-right)) + 100px); }

  #ui .score {
    top: calc(max(54px, 7dvh) + var(--sk-safe-top));
    font-size: clamp(3.35rem, 15vw, 4.35rem);
    line-height: .82;
  }

  #ui .codeword {
    top: calc(max(54px, 7dvh) + var(--sk-safe-top) + clamp(3.35rem, 15vw, 4.35rem) + 10px);
    font-size: 12px;
    letter-spacing: .38em;
  }

  #ui .combo {
    top: calc(max(54px, 7dvh) + var(--sk-safe-top) + clamp(3.35rem, 15vw, 4.35rem) + 34px);
    font-size: 12px;
  }

  #ui .panel {
    width: calc(100vw - 20px - var(--sk-safe-left) - var(--sk-safe-right));
    max-height: calc(100dvh - 88px - var(--sk-safe-top) - var(--sk-safe-bottom));
    padding: 22px 18px max(34px, calc(20px + var(--sk-safe-bottom)));
    overscroll-behavior: contain;
  }

  #ui #startPanel {
    display: flex;
    flex-direction: column;
    scroll-padding-bottom: calc(1rem + var(--sk-safe-bottom));
  }
  #ui #startPanel > .routeline { order: 5; }
  #ui #startPanel > .legend { order: 6; }
  #ui #startPanel > #runBrief { order: 7; }
  #ui #startPanel > #startBtn { order: 8; }
  #ui #startPanel > #weatherCards { order: 9; }
  #ui #startPanel > #modeCards { order: 10; }
  #ui #startPanel > #missionBrief { order: 11; }
  #ui #startPanel > #stampBook { order: 12; }
  #ui #startPanel > #skinsRow { order: 13; }
  #ui #startPanel > .hint { order: 14; }

  #ui #startPanel .leitformel {
    margin-top: 10px;
    padding-block: 9px;
  }

  #ui #startPanel .sub {
    margin-top: 10px;
    line-height: 1.48;
  }

  #ui #startPanel .routeline,
  #ui #startPanel .legend,
  #ui #startPanel .casebrief {
    margin-top: 9px;
  }

  #ui #startPanel .casecards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
  }

  #ui #startPanel .casecard {
    min-height: 58px;
    padding: 8px 9px;
    font-size: 9.5px;
    line-height: 1.28;
  }

  #ui #startPanel .casecard b {
    font-size: 11.5px;
    line-height: 1.12;
    margin-bottom: 3px;
  }

  #ui #startPanel .casecard.compact {
    padding: 8px 9px;
  }

  #ui #startPanel,
  #ui #overPanel {
    margin-top: calc(28px + var(--sk-safe-top));
    margin-bottom: max(12px, var(--sk-safe-bottom));
  }

  #ui .btnrow {
    display: grid;
    grid-template-columns: 1fr;
  }

  #ui .btn {
    width: 100%;
    text-align: center;
  }

  #ui #startBtn {
    position: static;
    z-index: auto;
    margin-top: 12px;
    box-shadow:
      0 4px 0 #7e2b1c,
      0 16px 30px rgba(126, 43, 28, .26);
  }

  #ui .runstatus {
    bottom: max(10px, var(--sk-safe-bottom));
    width: calc(100vw - 20px - var(--sk-safe-left) - var(--sk-safe-right));
    max-height: 54px;
    overflow: hidden;
    padding: 7px 10px 6px;
    font-size: 9px;
    line-height: 1.35;
  }

  #ui .runstatus .line {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    margin-top: 2px;
    max-height: 1.35em;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, #000 0 86%, transparent 100%);
  }

  #ui .runstatus .line span {
    flex: 0 0 auto;
  }

  #ui .langsw {
    left: max(10px, var(--sk-safe-left));
    top: max(10px, var(--sk-safe-top));
    bottom: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: calc(100vw - 178px - var(--sk-safe-left) - var(--sk-safe-right));
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
  }

  #ui .langsw button,
  #ui .langsw i {
    flex: 0 0 auto;
  }

  body.playing #ui .langsw,
  body.choosing #ui .langsw {
    display: none;
  }

  body.playing #ui .chip {
    max-width: min(44vw, 148px);
    padding: 6px 8px 5px;
    font-size: 9.5px;
  }

  body.playing #ui .chip .route {
    margin-top: 4px;
    gap: 4px;
  }

  body.playing #ui .score {
    top: calc(max(50px, 6.6dvh) + var(--sk-safe-top));
    font-size: clamp(2.8rem, 13vw, 3.7rem);
    line-height: .86;
  }

  body.playing #ui .codeword {
    top: calc(max(50px, 6.6dvh) + var(--sk-safe-top) + clamp(2.8rem, 13vw, 3.7rem) + 12px);
    font-size: 11px;
    letter-spacing: .34em;
  }

  body.playing #ui .combo {
    top: calc(max(50px, 6.6dvh) + var(--sk-safe-top) + clamp(2.8rem, 13vw, 3.7rem) + 33px);
  }

  body.playing #ui .runstatus {
    left: auto;
    right: max(10px, var(--sk-safe-right));
    transform: none;
    width: min(68vw, 286px);
    max-height: 46px;
    padding: 6px 9px 5px;
    border-radius: 7px;
    background: rgba(244, 238, 226, .84);
    backdrop-filter: blur(10px) saturate(1.04);
    opacity: .92;
  }

  body.playing #ui .runstatus #runStatusMission {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 420px) and (max-height: 640px) {

  #ui #startPanel > .eyebrow { order: 1; }
  #ui #startPanel > h1 { order: 2; }
  #ui #startPanel > .leitformel { order: 3; }
  #ui #startPanel > .sub { order: 4; }
}

/* DRAUMEN
   Dieselbe Bedingung wie im Dokument: ein quer gehaltenes Telefon kann breiter
   als 900 px sein (16 Plus 932, 16 Pro Max 956, Pixel 8 915) und ist trotzdem
   ein Telefon. Ohne die zweite Bedingung bekam es das Rechnerbrett in ein
   430 px hohes Fenster - 16 px Kiesel statt 38. */
@media (max-width: 900px), (orientation: landscape) and (max-height: 540px) {
  #game.on {
    height: 100dvh;
    overflow: hidden;
  }

  #topbar {
    padding:
      max(8px, var(--sk-safe-top))
      max(10px, var(--sk-safe-right))
      8px
      max(10px, var(--sk-safe-left));
  }

  #boardwrap {
    min-height: 0;
    padding-inline: max(6px, var(--sk-safe-left)) max(6px, var(--sk-safe-right));
  }

  #wordbar {
    padding-bottom: max(10px, var(--sk-safe-bottom));
  }

  #game.on #toast {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: calc(188px + var(--sk-safe-bottom));
    transform: translateX(-50%) translateY(8px);
    width: min(92vw, 24rem);
    max-width: calc(100vw - 20px - var(--sk-safe-left) - var(--sk-safe-right));
    text-align: left;
    z-index: 18;
  }

  #game.on #toast.show {
    transform: translateX(-50%) translateY(0);
  }

  #left,
  #right {
    max-height: min(72dvh, 620px);
    overscroll-behavior: contain;
  }

  #left {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: calc(100vw - 16px - var(--sk-safe-left) - var(--sk-safe-right));
    max-height: clamp(104px, 18dvh, 124px);
    scrollbar-width: none;
  }

  #left::-webkit-scrollbar {
    display: none;
  }

  #game.on #left .card {
    max-height: calc(clamp(104px, 18dvh, 124px) - 18px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Zwei Zeilen schnitten zwei der sechs Auftraege mitten im Satz ab - bei „Die
     Weiche von Olden" die Haelfte, also gerade den Teil, der die Weiche erklaert.
     Die Karte kann laengst scrollen (overflow-y oben); die Klemme nahm ihr nur
     die Gelegenheit. Vier Zeilen fassen jeden heutigen Auftrag ganz, gemessen
     bei 320, 360, 375 und 390 px - ohne dass Streifen, Brett oder Kiesel sich
     um einen Pixel aendern. */
  #game.on #left .quest-text,
  #game.on #left .weather-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #topbar button,
  #soundbtn,
  #musikbtn,
  #endbtn {
    inline-size: 44px;
    min-inline-size: 44px;
    block-size: 44px;
    flex: 0 0 44px;
  }

  #topbar {
    overflow: hidden;
  }

  #topbar .brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mobiletraum {
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  .title-card {
    width: calc(100vw - 24px);
    padding: 18px 12px;
  }

  .seed-row input {
    min-width: 0;
    width: 100%;
    font-size: 16px;
  }

  #cwletters {
    letter-spacing: .08em;
  }

  .bar-btn,
  #submit {
    flex: 1 1 calc(50% - 6px);
    padding-inline: 10px;
  }

  #endbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .endcard {
    border-radius: 12px;
    padding: 28px 18px 22px;
  }
}

/* Dieses Gitter hatte fuenf Spalten fuer die fuenf Dinge, die bis 360 px
   sichtbar sind. Zwischen 361 und 380 px kommt der Seed-Chip dazu - und ein
   sechstes Kind ohne Spalte faellt in eine zweite Zeile. Der Kopf war auf
   375 px (iPhone SE, 12/13 mini, 6/7/8) 119 statt 65 px hoch, und dem Brett
   fehlten 54 px. Statt die Spalten nachzuzaehlen, gibt die Zeile jetzt nach:
   die Knoepfe bleiben 44 px, Text weicht. Das haelt bei jeder Breite. */
@media (max-width: 380px) {
  #game.on #topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }

  #game.on #topbar > * {
    flex: 0 0 auto;
  }

  #game.on #topbar .brand,
  #game.on #topbar #seedchip,
  #game.on #topbar #turnchip {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #game.on #topbar button {
    flex: 0 0 auto;
  }

  #game.on #topbar .brand {
    font-size: 13px;
    line-height: 1.05;
  }

  #game.on #topbar .brand em {
    display: none;
  }

  #game.on #mobiletraum {
    min-width: 0;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
  }

  #game.on #mobiletraum .tw-slot {
    width: 12px;
    min-width: 12px;
    height: 22px;
    font-size: 10px;
  }

  #game.on #turnchip {
    display: none;
  }

  /* Bis 380 px fuellte die Auftragskarte den Streifen ganz aus. Von der zweiten
     Karte - Werkzeuge, dann die Legende, die jedes Gelaende erklaert - blieben
     9 px sichtbar. Das ist kein Hinweis, das ist ein Zufall. 40 px weniger
     Kartenbreite lassen 49 px stehen: eine erkennbare Kartenkante. Gemessen
     kostet es nichts - kein Auftrag wird abgeschnitten, der Streifen bleibt
     104 bzw. 124 px hoch, die Kiesel bleiben bei 26 bzw. 47 px. */
  #game.on #left .card {
    flex-basis: calc(100vw - 74px - var(--sk-safe-left) - var(--sk-safe-right));
  }
}

/* NINEFJORD */
@media (max-width: 920px) {
  body.ninefjord .topbar,
  body.ninefjord .table,
  body.ninefjord .sheet {
    width: 100%;
  }

  body.ninefjord .table {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body.ninefjord .topbar {
    grid-template-columns: 1fr !important;
    align-items: start;
  }

  body.ninefjord .brand {
    grid-template-columns: 1fr !important;
  }

  body.ninefjord .meta {
    justify-content: start;
  }

  body.ninefjord .board-wrap {
    width: min(100%, calc(100vw - 28px - var(--sk-safe-left) - var(--sk-safe-right)));
    max-width: min(94vw, 680px);
  }

  body.ninefjord .side {
    display: grid;
    gap: 12px;
  }
}

@supports selector(body:has(.numbers)) {
  @media (max-width: 520px) {
    body:has(#board):has(.numbers) .app {
      padding-bottom: calc(158px + var(--sk-safe-bottom));
    }
  }
}

@media (max-width: 760px) {

  .brand {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  .board-panel,
  .panel,
  .route-card {
    border-radius: 8px;
  }

  @keyframes fjordCellPing {
    from { opacity: .8; transform: scale(.9); }
    to { opacity: 0; transform: scale(1.18); }
  }
}

@media (max-width: 430px) {

  @media (min-width: 390px) and (min-height: 800px) {
    body.kreuzfjord:has(.start-trail.show) .clue-panel {
      bottom: calc(266px + var(--sk-safe-bottom));
    }

    body.kreuzfjord:has(.start-trail.show) .active-clue {
      max-height: 184px;
    }

    body.kreuzfjord:has(.start-trail.show) .clue-text {
      display: -webkit-box;
      -webkit-line-clamp: 1;
    }
  }
}

/* MOSSGLASS */
@media (max-width: 759px) {
  body:has(.masthead) #app {
    padding:
      max(.65rem, var(--sk-safe-top))
      max(.65rem, var(--sk-safe-right))
      max(.8rem, var(--sk-safe-bottom))
      max(.65rem, var(--sk-safe-left));
  }

  body:has(.masthead) .board {
    width: min(calc(100vw - 1.35rem - var(--sk-safe-left) - var(--sk-safe-right)), 31rem) !important;
    max-width: min(31rem, 76dvh);
  }

  body:has(.masthead) .cell {
    min-height: 0;
  }

  body:has(.masthead) .decision,
  body:has(.masthead) .small,
  body:has(.masthead) .primary {
    min-height: 46px;
  }

  body:has(.masthead) .uferwrap {
    width: 100%;
    margin-inline: 0 !important;
    padding-inline: max(.65rem, var(--sk-safe-left)) max(.65rem, var(--sk-safe-right)) !important;
    overflow: hidden;
  }

  body:has(.masthead) .ufer {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  body:has(.masthead) .sheetwrap {
    align-items: center;
    padding: max(.55rem, var(--sk-safe-top)) max(.55rem, var(--sk-safe-right)) max(.55rem, var(--sk-safe-bottom)) max(.55rem, var(--sk-safe-left));
    background: rgba(23,22,18,.26);
    backdrop-filter: blur(3px);
  }

  body:has(.masthead) .sheet {
    width: min(100%, 30rem);
    max-height: calc(100dvh - 1.1rem - var(--sk-safe-top) - var(--sk-safe-bottom));
    border: 1px solid rgba(23,22,18,.24);
    border-radius: 10px;
    padding: .72rem .72rem .82rem;
    box-shadow: 0 22px 70px rgba(23,22,18,.24);
  }

  body:has(.masthead) .intro-hero {
    min-height: clamp(14rem, 43dvh, 20rem);
    margin: -.72rem -.72rem .72rem;
    padding: .86rem;
    border-radius: 10px 10px 0 0;
  }

  body:has(.masthead) .intro-hero::before {
    inset: 1rem 11% 4.4rem;
  }

  body:has(.masthead) .intro-hero h2 {
    font-size: clamp(2.45rem, 13.4vw, 4.2rem);
  }

  body:has(.masthead) .intro-hero .claim {
    font-size: clamp(1rem, 5.1vw, 1.34rem);
    line-height: 1.22;
  }

  body:has(.masthead) .intro-start {
    margin: 0;
    padding: .76rem .88rem;
    border-left: 3px solid var(--licht);
    font-family: var(--serif);
    font-size: clamp(1rem, 4.8vw, 1.25rem);
    line-height: 1.35;
    background: rgba(248,243,234,.58);
  }

  body:has(.masthead) .sheetactions {
    position: sticky;
    bottom: -.82rem;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    gap: .55rem;
    margin: .72rem -.72rem -.82rem;
    padding: .65rem .72rem calc(.72rem + var(--sk-safe-bottom));
    background: linear-gradient(180deg, rgba(248,243,234,.72), rgba(248,243,234,.98) 35%);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(23,22,18,.14);
  }

  body:has(.masthead) .sheetactions button {
    width: 100%;
    min-height: 48px;
    padding-inline: .5rem;
  }
}

/* Spurenleser */
@media (max-width: 880px) {
  #app,
  .app {
    min-height: 100dvh;
  }

  #stage,
  #world {
    touch-action: none;
  }

  .panel-scroll {
    padding-bottom: max(20px, var(--sk-safe-bottom));
    overscroll-behavior: contain;
  }

  .akten-grid button,
  .tool,
  .zoom-btn {
    min-height: 46px;
  }
}

/* BLICK */
@media (max-width: 430px) {
  #toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  #toolbar .cornerBtn {
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #toolbar #findBtn {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  #clearStamp .st {
    max-width: calc(100vw - 24px);
    text-align: center;
  }

  #clearStamp:not(.show) {
    visibility: hidden;
  }

  #clearStamp.show {
    visibility: visible;
  }

  #topbar,
  #clueRail,
  #hand,
  #task {
    padding-left: max(10px, var(--sk-safe-left));
    padding-right: max(10px, var(--sk-safe-right));
  }

  #hand {
    padding-bottom: max(16px, var(--sk-safe-bottom));
  }

  .panel {
    padding:
      max(18px, var(--sk-safe-top))
      max(16px, var(--sk-safe-right))
      max(18px, var(--sk-safe-bottom))
      max(16px, var(--sk-safe-left));
  }

  .panel .actions button,
  .panel .actions a,
  .startFlow button {
    min-height: 48px;
  }
}

@supports selector(body:has(#foot)) {

  @media (max-width: 520px) {
    body:has(#foot) #startPanel {
      padding-bottom: calc(20px + var(--sk-safe-bottom));
    }

    body:has(#foot) #startPanel .actions {
      position: static;
      margin-top: 12px;
      padding-top: 0;
      background: transparent;
      border-top: 0;
    }

    body:has(#foot) #startPanel #startBtn,
    body:has(#foot) #startPanel #resumeBtn {
      min-height: 52px;
    }

    body:has(#foot) #startPanel > .startFlow {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    body:has(#foot) #startPanel > .startFlow div {
      min-height: 0;
      padding: 8px;
    }

    body:has(#foot) #startPanel > .modepick:not(.difficulty) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    body:has(#foot) #startPanel > .difficulty {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    body:has(#foot) #startPanel > .difficulty button {
      min-height: 58px;
      padding: 8px 5px;
      font-size: 8.5px;
      line-height: 1.28;
      letter-spacing: .035em;
    }
  }

  @media (max-width: 350px) {
    body:has(#foot) #startPanel > .startFlow,
    body:has(#foot) #startPanel > .modepick:not(.difficulty),
    body:has(#foot) #startPanel > .difficulty {
      grid-template-columns: 1fr;
    }
  }
}

/* Fjordmark */
@media (max-width: 760px) {
  body:has(.mapbox) .app {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding:
      max(.65rem, var(--sk-safe-top))
      max(.65rem, var(--sk-safe-right))
      max(.8rem, var(--sk-safe-bottom))
      max(.65rem, var(--sk-safe-left));
  }

  body:has(.mapbox) .top {
    display: grid;
    gap: .55rem;
  }

  body:has(.mapbox) h1 {
    font-size: clamp(2.25rem, 12.2vw, 3.7rem);
    line-height: .9;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
  }

  body:has(.mapbox) .tagline {
    font-size: clamp(1rem, 5vw, 1.45rem);
    line-height: 1.1;
  }

  body:has(.mapbox) .chips {
    display: flex;
    gap: .48rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: .25rem;
    margin-top: .35rem !important;
    scrollbar-width: none;
  }

  body:has(.mapbox) .chips::-webkit-scrollbar {
    display: none;
  }

  body:has(.mapbox) .chip,
  body:has(.mapbox) .chiplink {
    flex: 0 0 auto;
    min-height: 42px;
    padding: .58rem .82rem;
  }

  body:has(.mapbox) .main {
    inline-size: 100%;
    grid-template-rows: minmax(22rem, 58dvh) minmax(28rem, auto) !important;
    position: relative;
    isolation: isolate;
    z-index: 2;
    gap: .75rem;
  }

  body:has(.mapbox) .main:has(.brief:not(.hidden)) {
    z-index: 3;
  }

  body:has(.mapbox) .top {
    position: relative;
    z-index: 4;
  }

  body:has(.mapbox) .left,
  body:has(.mapbox) .right {
    inline-size: 100%;
    position: relative;
    z-index: 1;
  }

  body:has(.mapbox):has(.brief.hidden) .main {
    grid-template-rows: minmax(20rem, 50dvh) minmax(28rem, auto) !important;
  }

  body:has(.mapbox) .main > .panel {
    position: relative;
  }

  body:has(.mapbox) .mapbox {
    z-index: 0;
    contain: layout paint;
    clip-path: inset(0 round 8px);
    background: linear-gradient(180deg, rgba(7,14,13,.88), rgba(4,10,10,.94));
  }

  body:has(.mapbox) .main > .panel:not(.mapbox) {
    min-height: 28rem;
  }

  body:has(.mapbox) .mapbox:has(.brief:not(.hidden)) {
    z-index: 20;
    contain: none;
    clip-path: none;
    overflow: visible;
  }

  body:has(.mapbox) .main > .panel:not(.mapbox) {
    z-index: 2;
  }

  body:has(.mapbox) .fjord,
  body:has(.mapbox) .aurora,
  body:has(.mapbox) .mapbox::before {
    pointer-events: none;
  }

  body:has(.mapbox) .tile {
    clip-path: polygon(50% 7%, 93% 50%, 50% 93%, 7% 50%);
    touch-action: manipulation;
  }

  body:has(.mapbox) .brief {
    position: fixed !important;
    left: max(.62rem, var(--sk-safe-left)) !important;
    right: max(.62rem, var(--sk-safe-right)) !important;
    top: auto !important;
    bottom: max(.62rem, var(--sk-safe-bottom));
    max-width: none;
    max-height: min(31dvh, 14.5rem);
    padding: .72rem .78rem;
    gap: .42rem;
    overflow: auto;
    background:
      linear-gradient(180deg, rgba(6,12,12,.9), rgba(6,12,12,.78));
    backdrop-filter: blur(18px) saturate(1.08);
    border-color: rgba(216,173,100,.42);
    z-index: 30;
  }

  body:has(.mapbox) .brief strong {
    font-size: clamp(.92rem, 4.2vw, 1.04rem);
    line-height: 1.18;
  }

  body:has(.mapbox) .brief p {
    font-size: clamp(.86rem, 3.9vw, .96rem);
    line-height: 1.34;
  }

  body:has(.mapbox) #briefClose {
    justify-self: stretch;
    min-inline-size: min(100%, 12rem);
    min-block-size: 44px;
    padding-block: .55rem;
  }

  body:has(.mapbox) .panel {
    border-radius: 8px;
  }

  body:has(.mapbox) .left .panel,
  body:has(.mapbox) .right .panel,
  body:has(.mapbox) .main > .panel:not(.mapbox) {
    background: linear-gradient(180deg, rgba(14,27,24,.95), rgba(8,17,15,.92));
    backdrop-filter: blur(8px) saturate(1.05);
  }

  body:has(.mapbox) .actions button,
  body:has(.mapbox) .builds button,
  body:has(.mapbox) .resources button,
  body:has(.mapbox) .chiplink {
    min-height: 46px;
  }

  body:has(.mapbox) .builds {
    align-content: start;
  }

  body:has(.mapbox) .mapbox {
    overflow: hidden;
  }
}

/* Kreuzfjord: 24px-Zielgröße erhalten, auf sehr schmalen Geräten im Brett scrollen. */
@media (max-width: 760px) {
  body.kreuzfjord .grid-wrap {
    max-width: 100% !important;
    min-height: 288px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
  }

  body.kreuzfjord .crossgrid {
    min-width: 364px !important;
    min-height: 278px !important;
    gap: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Visual-baseline fixes: keep game-specific controls isolated and fully legible. */
@media (max-width: 520px) {
  body.ninefjord .meta {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
    min-height: 92px;
  }

  body.ninefjord #ninefjordMusik {
    min-block-size: 44px;
  }

  body.ninefjord .tool-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  body.ninefjord .tool-row .btn {
    min-width: 0;
    padding-inline: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Publisher mobile playability pass · July 2026
   Immediate touch acknowledgement without moving controls, plus enough scroll
   clearance for the fixed digit and letter rails used by the dense games. */
@media (hover: none) and (pointer: coarse) {
  :where(
    button,
    [role="button"],
    #board .hex,
    #hand .card,
    #board.sudoku-board .cell,
    body.kreuzfjord .crossgrid .cell,
    body.kreuzfjord .key
  ) {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    scroll-margin-block: max(72px, var(--sk-safe-top)) calc(156px + var(--sk-safe-bottom));
  }

  :where(
    button,
    [role="button"],
    #board .hex,
    #hand .card,
    #board.sudoku-board .cell,
    body.kreuzfjord .crossgrid .cell,
    body.kreuzfjord .key
  ):active:not(:disabled):not([aria-disabled="true"]) {
    filter: brightness(1.12) saturate(1.08);
  }

  :where(
    #board .hex[aria-pressed="true"],
    #hand .card[aria-pressed="true"],
    #board.sudoku-board .cell[aria-selected="true"],
    body.kreuzfjord .crossgrid .cell[aria-selected="true"],
    body.kreuzfjord .key[aria-pressed="true"]
  ) {
    outline: 2px solid color-mix(in srgb, currentColor 78%, white);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(button, [role="button"], #board .hex, #hand .card, #board.sudoku-board .cell, body.kreuzfjord .crossgrid .cell, body.kreuzfjord .key) {
    transition-duration: .01ms !important;
  }
}

/* ── Fokus: das letzte Wort ──────────────────────────────────────────────
   Der Ring wurde bisher aus der Textfarbe des Elements gemischt
   (color-mix mit currentColor). Auf einem hellen Blatt geht das; auf
   DRAUMENs Nachtgrund ergab es Ringe zwischen 1,16:1 und 15,09:1 - je
   nachdem, welche Farbe die Beschriftung zufaellig hatte. Vier Ringe lagen
   bei 1,16:1, einer bei 2,68:1. WCAG 2.2 verlangt 3:1 fuer die Umrandung
   eines fokussierten Elements. Ein Fokusring darf nicht davon abhaengen,
   wie ein Knopf beschriftet ist.

   Zwei Toene, weil DRAUMEN zwei Gruende hat: das Spiel liegt auf Nacht,
   das Ergebnisblatt auf Papier. Aussen Gold (10,15:1 auf Nacht), darum ein
   Saum in Nachtblau (rund 15:1 auf Papier). Einer von beiden traegt immer.

   Diese Regel steht als letzte im Blatt und traegt !important - bei einem
   Fokusring ist das kein Notnagel, sondern die Zusage selbst. Drei andere
   Regeln haben den Ring vorher noch eingefaerbt, darunter eine
   Auswahlmarkierung fuer aria-pressed: der Modusknopf "Solo" kam so auf
   1,41:1. Was Zustand anzeigt, darf nicht ueberschreiben, wo man steht. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #E9BC4F !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 8px rgba(11, 23, 34, .92) !important;
}

/* Im erzwungenen Kontrast entscheidet das Betriebssystem. */
@media (forced-colors: active) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  [role="button"]:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }
}