/* BRIMROOK Spielkiste · Mobile 2026
   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;
}

.skip-link {
  position: fixed;
  inset-block-start: max(.5rem, var(--sk-safe-top));
  inset-inline-start: max(.5rem, var(--sk-safe-left));
  z-index: 1000;
  transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

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,
.site-header * {
  min-width: 0;
}

.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;
}

.footer-nav a,
.main-nav a,
.breadcrumb a,
.sk-passt {
  min-inline-size: 44px;
  justify-content: center;
}

.nav-toggle {
  inline-size: 48px;
  min-inline-size: 48px;
  min-block-size: 48px;
  justify-content: center;
  align-items: center;
}

.lang-sw button,
.langsw button {
  min-inline-size: 44px;
  min-block-size: 44px;
}

.sk-languages a,
.sk-language a {
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-tabs button,
.mini-action,
.candidate-chip,
.key,
#langSwitch button,
.langSwitch button,
.chiplink {
  min-inline-size: 44px;
  min-block-size: 44px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, currentColor 72%, white);
  outline-offset: 3px;
}

@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,
  .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 > .eyebrow { order: 1; }
  #ui #startPanel > h1 { order: 2; }
  #ui #startPanel > .leitformel { order: 3; }
  #ui #startPanel > .sub { order: 4; }
  #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 .panel {
    max-height: calc(100dvh - 56px - var(--sk-safe-top) - var(--sk-safe-bottom));
    padding: 18px 18px max(22px, calc(16px + var(--sk-safe-bottom)));
  }

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

  #ui #startPanel > .eyebrow { order: 1; }
  #ui #startPanel > h1 { order: 2; }
  #ui #startPanel > .leitformel { order: 3; }
  #ui #startPanel > .sub { order: 4; }
  #ui #startPanel > #startBtn { order: 5; }
  #ui #startPanel > .routeline { order: 6; }
  #ui #startPanel > .legend { order: 7; }
  #ui #startPanel > #runBrief { order: 8; }

  #ui #startPanel > h1 {
    font-size: clamp(30px, 10vw, 34px);
  }

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

  #ui #startPanel .leitformel p {
    line-height: 1.35;
  }

  #ui #startPanel .sub {
    margin-top: 8px;
    line-height: 1.38;
  }

  #ui #startBtn {
    margin-top: 10px;
    min-height: 50px;
  }

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

/* DRAUMEN */
@media (max-width: 900px) {
  #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;
  }

  #game.on #left .quest-text,
  #game.on #left .weather-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -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;
  }
}

@media (max-width: 380px) {
  #game.on #topbar {
    display: grid;
    grid-template-columns: minmax(4.7rem, auto) minmax(0, 1fr) 44px 44px 44px;
    align-items: center;
    gap: 6px;
  }

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

  #game.on #topbar .brand em {
    display: block;
    font-size: 12px;
  }

  #game.on #mobiletraum {
    min-width: 0;
    justify-content: center;
  }

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

  #game.on #left .card {
    flex-basis: calc(100vw - 34px - var(--sk-safe-left) - var(--sk-safe-right));
  }
}

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

  body:has(#board):has(#numbers) .table {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body:has(#board):has(#numbers) .topbar {
    grid-template-columns: 1fr !important;
    align-items: start;
  }

  body:has(#board):has(#numbers) .brand {
    grid-template-columns: 1fr !important;
  }

  body:has(#board):has(#numbers) .meta {
    justify-content: start;
  }

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

  body:has(#board):has(#numbers) .side {
    display: grid;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  body:has(#board):has(#numbers) .app {
    padding:
      max(10px, var(--sk-safe-top))
      max(4px, var(--sk-safe-right))
      calc(158px + var(--sk-safe-bottom))
      max(4px, var(--sk-safe-left));
    gap: 8px;
  }

  body:has(#board):has(#numbers) .topbar {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 8px;
  }

  body:has(#board):has(#numbers) .eyebrow {
    font-size: 9px;
    letter-spacing: .12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:has(#board):has(#numbers) h1 {
    font-size: clamp(2.35rem, 14.5vw, 3.35rem);
    line-height: .88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:has(#board):has(#numbers) .tagline {
    max-width: none;
    font-size: .86rem;
    line-height: 1.32;
  }

  body:has(#board):has(#numbers) .meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body:has(#board):has(#numbers) .meta::-webkit-scrollbar {
    display: none;
  }

  body:has(#board):has(#numbers) .pill {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 7px 9px;
    font-size: 10px;
  }

  body:has(#board):has(#numbers) .board-shell {
    padding: 6px;
    border-radius: 8px;
  }

  body:has(#board):has(#numbers) .board-wrap {
    width: min(100%, calc(100vw - 12px - var(--sk-safe-left) - var(--sk-safe-right)));
    max-width: none;
  }

  body:has(#board):has(#numbers) .status-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px;
  }

  body:has(#board):has(#numbers) .stat {
    padding: 7px 6px;
  }

  body:has(#board):has(#numbers) .stat strong {
    font-size: 15px;
  }

  body:has(#board):has(#numbers) .candidate-chip {
    min-height: 44px;
  }

  body:has(#board):has(#numbers) .numbers {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(8px, var(--sk-safe-bottom));
    transform: translateX(-50%);
    inline-size: min(24rem, calc(100vw - 16px - var(--sk-safe-left) - var(--sk-safe-right)));
    z-index: 40;
    max-width: none;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: hidden;
    padding: 6px !important;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 12px;
    background: rgba(244,237,223,.95);
    box-shadow: 0 18px 48px rgba(9,11,12,.28), 0 1px 0 rgba(255,255,255,.72) inset;
    backdrop-filter: blur(16px);
  }

  body:has(#board):has(#numbers) .numbers .num-btn {
    container-type: inline-size;
    min-width: 0;
    min-height: 44px;
    overflow: hidden;
    border-radius: 8px;
    padding: 3px 1px;
  }

  body:has(#board):has(#numbers) .numbers .num-main {
    font-size: clamp(1.25rem, 6vw, 1.65rem);
    line-height: .9;
  }

  body:has(#board):has(#numbers) .numbers .num-meta,
  body:has(#board):has(#numbers) .numbers .num-task,
  body:has(#board):has(#numbers) .numbers .num-pressure {
    display: none;
  }

  body:has(#board):has(#numbers) .side .panel:nth-child(2) {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body:has(#board):has(#numbers) .side .panel:nth-child(2) .panel-title {
    display: none;
  }
}

@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: 380px) {
  body:has(#board):has(#numbers) h1 {
    font-size: clamp(2rem, 11.8vw, 2.4rem);
  }

  body:has(#board):has(#numbers) .board-shell {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  body:has(#board):has(#numbers) .board-wrap {
    width: min(100%, calc(100vw - 32px - var(--sk-safe-left) - var(--sk-safe-right)));
    min-width: 0;
  }

  body:has(#board):has(#numbers) .status-row {
    display: none;
  }

  body:has(#board):has(#numbers) .side {
    margin-top: calc(104px + var(--sk-safe-bottom));
    padding-bottom: calc(112px + var(--sk-safe-bottom));
  }

  body:has(#board):has(#numbers) .numbers {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 5px !important;
  }

  body:has(#board):has(#numbers) .numbers .num-btn {
    min-width: 0;
    min-height: 42px;
    padding-inline: 0;
  }

  body:has(#board):has(#numbers) .status-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Kreuzfjordraetsel */
.mobile-drawer-toggle,
.drawer-close {
  display: none;
}

@media (max-width: 760px) {
  body:has(.crossgrid) {
    overflow: hidden;
    background: #071012;
  }

  .app {
    min-height: 100dvh;
    max-height: 100dvh;
    padding:
      max(7px, var(--sk-safe-top))
      max(8px, var(--sk-safe-right))
      calc(248px + var(--sk-safe-bottom))
      max(8px, var(--sk-safe-left));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1px;
    overflow: hidden;
  }

  .topbar {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 0;
    isolation: isolate;
  }

  .topbar::before {
    content: "";
    position: absolute;
    inset: -7px -8px -5px;
    z-index: -1;
    border-bottom: 1px solid rgba(155,207,209,.12);
    background:
      radial-gradient(ellipse at 18% 0, rgba(155,207,209,.18), transparent 56%),
      linear-gradient(180deg, rgba(4,12,14,.58), rgba(4,12,14,0));
    pointer-events: none;
  }

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

  .brand .eyebrow {
    margin: 0;
    font-size: 10px;
    letter-spacing: .1em;
    color: rgba(247,240,223,.58);
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar .brand h1 {
    margin: 0;
    font-size: clamp(1rem, 5vw, 1.35rem);
    line-height: 1.02;
    letter-spacing: 0;
    color: #fff7e8;
    text-shadow: 0 2px 14px rgba(216,173,100,.18), 0 1px 0 rgba(0,0,0,.44);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand .lede {
    display: none;
  }

  .top-actions {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
    gap: 5px;
  }

  .top-actions .chip,
  .top-actions .ghost {
    min-block-size: 44px;
    padding: 6px 10px;
    border-radius: 8px;
    border-color: rgba(155,207,209,.18);
    background:
      linear-gradient(180deg, rgba(247,240,223,.075), rgba(247,240,223,.035)),
      rgba(7,16,18,.52);
    box-shadow:
      0 1px 0 rgba(255,255,255,.09) inset,
      0 10px 24px rgba(0,0,0,.2);
    font-size: 11px;
    line-height: 1;
  }

  #dailyBtn {
    min-width: 64px;
    font-variant-numeric: tabular-nums;
  }

  #dailyBtn.is-streak {
    border-color: rgba(216,173,100,.36);
    background:
      linear-gradient(180deg, rgba(216,173,100,.18), rgba(177,101,57,.08)),
      rgba(7,16,18,.58);
    color: #fff3d2;
    box-shadow:
      0 1px 0 rgba(255,255,255,.12) inset,
      0 0 0 1px rgba(216,173,100,.08),
      0 10px 26px rgba(0,0,0,.22);
  }

  #dailyBtn.is-daily {
    border-color: rgba(155,207,209,.34);
    background:
      linear-gradient(180deg, rgba(155,207,209,.18), rgba(31,83,96,.08)),
      rgba(7,16,18,.58);
    color: #e9fdff;
    box-shadow:
      0 1px 0 rgba(255,255,255,.12) inset,
      0 0 0 1px rgba(155,207,209,.1),
      0 10px 26px rgba(0,0,0,.22);
  }

  #dailyBtn.is-complete {
    border-color: rgba(137,197,151,.34);
    background:
      linear-gradient(180deg, rgba(137,197,151,.17), rgba(31,83,96,.11)),
      rgba(7,16,18,.58);
    color: #eaffdd;
  }

  #saveChip {
    display: none;
  }

  #resetBtn {
    display: none;
  }

  .mobile-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: 6px 10px;
  }

  .shell {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    gap: 7px;
    overflow: hidden;
  }

  .route-card {
    position: fixed;
    inset:
      max(8px, var(--sk-safe-top))
      max(8px, var(--sk-safe-right))
      max(8px, var(--sk-safe-bottom))
      max(8px, var(--sk-safe-left));
    z-index: 40;
    display: block;
    height: calc(100dvh - max(8px, var(--sk-safe-top)) - max(8px, var(--sk-safe-bottom)));
    max-height: calc(100dvh - max(8px, var(--sk-safe-top)) - max(8px, var(--sk-safe-bottom)));
    transform: none;
    top: 110dvh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: top .22s ease, opacity .18s ease, visibility .18s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 12% 0, rgba(216,173,100,.16), transparent 16rem),
      linear-gradient(180deg, rgba(18,32,33,.98), rgba(7,16,18,.98));
  }

  body.route-drawer-open .route-card,
  .route-card.show {
    top: max(8px, var(--sk-safe-top)) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .route-card .panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(13, 23, 24, .96);
    backdrop-filter: blur(12px);
  }

  .route-list {
    grid-template-columns: 1fr !important;
    overflow: visible;
  }

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

  .board-panel {
    order: 1 !important;
    min-height: 0;
    padding: 7px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .board-tools {
    order: 1;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px;
    margin-bottom: 7px;
  }

  .weather {
    padding: 7px 8px;
    border-radius: 8px;
  }

  .weather b {
    font-size: 10px;
    letter-spacing: .1em;
  }

  .weather span {
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .tool-row {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    gap: 5px;
    justify-content: end;
  }

  .tool-row #nextBtn {
    display: none;
  }

  .tool-row .ghost {
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    white-space: nowrap;
    position: relative;
  }

  .tool-row .ghost::before {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink, #f7f0df);
    font-size: 16px;
    line-height: 1;
  }

  #compassBtn::before { content: "⌖"; }
  #undoBtn::before { content: "↶"; }
  #hintBtn::before { content: "?"; }
  #checkBtn::before { content: "✓"; }

  .grid-wrap {
    order: 3;
    width: 100%;
    max-width: calc(100vw - 16px - var(--sk-safe-left) - var(--sk-safe-right));
    max-height: none;
    align-self: start;
    padding: 5px;
    aspect-ratio: 13 / 10;
  }

  .word-ladder {
    order: 2;
    width: 100%;
    max-width: calc(100vw - 16px - var(--sk-safe-left) - var(--sk-safe-right));
    margin-top: 0;
    margin-bottom: 5px;
    gap: 4px;
    padding-inline-end: 8px;
    scroll-padding-inline: 8px;
  }

  .word-step {
    min-width: 44px;
    padding: 5px 6px;
    gap: 4px;
    border-radius: 7px;
  }

  .word-step b {
    font-size: 10px;
  }

  .word-step i {
    height: 3px;
  }

  .crossgrid {
    touch-action: manipulation;
    gap: 2px;
  }

  .cell {
    border-radius: 4px;
  }

  .cell .letter {
    font-size: clamp(.78rem, 4.25vw, 1.18rem);
  }

  .cell .num {
    left: 3px;
    top: 2px;
    font-size: .52rem;
  }

  .cell.active.dir-across::after,
  .cell.active.dir-down::after {
    right: -4px;
    top: -4px;
    z-index: 3;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(247,240,223,.38);
    font-size: 11px;
    box-shadow: 0 3px 8px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.24) inset;
  }

  .cell.active {
    z-index: 2;
    outline-width: 2px;
    outline-offset: -2px;
    box-shadow:
      0 0 0 2px rgba(216,173,100,.48),
      0 0 0 6px rgba(216,173,100,.12),
      0 10px 18px rgba(0,0,0,.22);
  }

  .cell.active button::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(216,173,100,.34);
    border-radius: 7px;
    pointer-events: none;
    animation: fjordCellPing .9s ease-out;
  }

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

  .cell.switchable::before {
    right: 2px;
    bottom: 2px;
    width: 4px;
    height: 4px;
  }

  .flow-card {
    display: none;
    order: 4;
    margin-top: 7px;
    margin-bottom: 7px;
    padding: 7px 9px;
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px;
    align-items: center;
    border-radius: 8px;
  }

  .flow-card span {
    font-size: 8px;
    letter-spacing: .1em;
  }

  .flow-card strong {
    margin-top: 1px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flow-quest {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 5px;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1;
  }

  .flow-quest p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flow-quest b {
    font-size: 7.5px;
  }

  .flow-quest meter {
    width: 42px;
    height: 5px;
  }

  .flow-next {
    margin-top: 5px;
    padding: 5px 6px;
    gap: 5px;
  }

  body:has(.crossgrid) .flow-next.show {
    display: none;
  }

  .flow-next p {
    font-size: 10.5px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flow-next b {
    font-size: 7.5px;
  }

  .flow-next button {
    min-block-size: 26px;
    max-width: 54px;
    padding: 3px 6px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .flow-card output {
    font-size: 11px;
  }

  .flow-main {
    min-width: 0;
  }

  .flow-side {
    display: grid;
    grid-template-columns: auto auto;
    justify-items: end;
    align-items: center;
    gap: 5px;
  }

  .flow-track {
    order: 3;
    grid-column: 1 / -1;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .flow-track i {
    width: auto;
    height: 4px;
  }

  .flow-jump {
    min-block-size: 28px;
    max-width: 82px;
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5px;
  }

  .reward-burst {
    top: max(138px, calc(var(--sk-safe-top) + 110px));
    z-index: 52;
    width: min(calc(100vw - 28px - var(--sk-safe-left) - var(--sk-safe-right)), 360px);
    padding: 8px 10px;
  }

  .stage-seal {
    align-items: center;
    padding: max(12px, var(--sk-safe-top)) max(10px, var(--sk-safe-right)) max(12px, var(--sk-safe-bottom)) max(10px, var(--sk-safe-left));
  }

  .stage-seal-panel {
    width: 100%;
    max-height: calc(100dvh - 48px - var(--sk-safe-top) - var(--sk-safe-bottom));
    overflow-y: auto;
    padding: 14px;
    gap: 10px;
    transform: translateY(-4dvh);
  }

  .stage-seal-meta b {
    width: 34px;
    height: 38px;
    font-size: 23px;
  }

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

  body:has(.crossgrid) .finish-panel {
    width: min(100%, 30rem);
    max-height: calc(100dvh - 48px - var(--sk-safe-top) - var(--sk-safe-bottom));
    overflow-y: auto;
    padding: 16px;
    gap: 12px;
  }

  body:has(.crossgrid) .finish-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body:has(.crossgrid) .finish-stats div {
    min-width: 0;
    padding: 8px 7px;
  }

  body:has(.crossgrid) .finish-stats span {
    font-size: 8px;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  body:has(.crossgrid) .finish-stats strong {
    margin-top: 4px;
    font-size: clamp(15px, 4.7vw, 19px);
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .reward-burst strong {
    font-size: clamp(20px, 6.3vw, 28px);
  }

  .reward-burst p {
    margin-top: 4px;
    font-size: 12px;
  }

  .icon-btn,
  .primary,
  .ghost {
    min-block-size: 44px;
  }

  .clue-panel {
    position: fixed;
    left: max(8px, var(--sk-safe-left));
    right: max(8px, var(--sk-safe-right));
    bottom: calc(224px + var(--sk-safe-bottom));
    z-index: 18;
    order: 2 !important;
    min-height: 0;
    max-height: 150px;
    display: block;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
  }

  body:has(.crossgrid):has(.correction-trail.show) .clue-panel {
    bottom: calc(264px + var(--sk-safe-bottom));
    max-height: 184px;
  }

  .clue-panel > .panel-head {
    display: none;
  }

  .clue-body {
    min-height: 0;
    padding: 0;
    display: block;
    overflow: visible;
  }

  .active-clue {
    position: relative;
    z-index: 4;
    pointer-events: auto;
    max-width: min(100%, 44rem);
    margin-inline: auto;
    padding: 7px 9px 8px;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(241,231,209,.97), rgba(223,208,179,.97));
    color: var(--paper-ink, #17201f);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
  }

  .active-clue h2 {
    font-size: .92rem;
    font-family: var(--mono, monospace);
    letter-spacing: .04em;
    color: rgba(23,32,31,.72);
    display: inline-flex;
    align-items: center;
    min-height: 20px;
  }

  .mode-cycle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 36px;
    max-width: 92px;
    padding: 4px 8px;
    border: 1px solid rgba(23,32,31,.2);
    border-radius: 7px;
    background: #17201f;
    color: #f1e7d1;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .clue-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 36px;
    padding: 4px 8px;
    border: 1px solid rgba(23,32,31,.18);
    border-radius: 7px;
    background: rgba(23,32,31,.07);
    color: rgba(23,32,31,.74);
    font-size: 11px;
    font-weight: 800;
  }

  .mode-tabs {
    display: none;
  }

  .clue-text {
    grid-column: 1 / -1;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 31px;
    padding-block: 3px;
    font-size: clamp(.94rem, 4vw, 1.08rem);
    line-height: 1.18;
    color: var(--paper-ink, #17201f);
    border-radius: 6px;
    -webkit-tap-highlight-color: rgba(177,101,57,.12);
  }

  .clue-text:active {
    background: rgba(23,32,31,.045);
  }

  .pilot-chip {
    grid-column: 1 / -1;
    margin: 0;
    padding: 4px 7px;
    border-color: rgba(23,32,31,.13);
    background: rgba(23,32,31,.05);
    color: rgba(23,32,31,.66);
    font-size: 10.5px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pilot-chip strong {
    color: rgba(23,32,31,.76);
    font-size: 8.5px;
    letter-spacing: .1em;
    margin-right: 4px;
  }

  .resume-trail {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px;
    padding: 5px;
    border-color: rgba(31,83,96,.2);
    background: rgba(31,83,96,.07);
  }

  .resume-trail span {
    color: rgba(23,32,31,.72);
    font-size: 10.5px;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .resume-trail b {
    color: rgba(23,32,31,.78);
    font-size: 8.5px;
  }

  .resume-trail button {
    min-inline-size: 0;
    min-block-size: 32px;
    padding: 3px 7px;
    border-color: rgba(23,32,31,.14);
    background: rgba(23,32,31,.07);
    color: var(--paper-ink, #17201f);
    font-size: 10px;
  }

  .resume-trail button:last-child {
    width: 32px;
    min-width: 32px;
  }

  .start-trail {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px;
    padding: 5px;
    border-color: rgba(177,101,57,.22);
    background: rgba(177,101,57,.08);
  }

  .start-trail span {
    color: rgba(23,32,31,.72);
    font-size: 10.5px;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .start-trail b {
    color: rgba(23,32,31,.78);
    font-size: 8.5px;
  }

  .start-trail button {
    min-inline-size: 0;
    min-block-size: 32px;
    padding: 3px 7px;
    border-color: rgba(23,32,31,.14);
    background: rgba(23,32,31,.07);
    color: var(--paper-ink, #17201f);
    font-size: 10px;
  }

  .start-trail button:last-child {
    width: 32px;
    min-width: 32px;
  }

  .answer-pattern {
    grid-column: 1 / -1;
    min-height: 32px;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
  }

  .answer-pattern::-webkit-scrollbar {
    display: none;
  }

  .answer-pattern b,
  .answer-pattern button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-color: rgba(23,32,31,.18);
    background: rgba(23,32,31,.06);
    color: var(--paper-ink, #17201f);
    font-size: 13px;
  }

  .answer-pattern b.empty,
  .answer-pattern button.empty {
    color: rgba(23,32,31,.36);
  }

  .answer-pattern b.correct,
  .answer-pattern button.correct {
    border-color: rgba(65,106,78,.38);
    background: rgba(137,197,151,.22);
  }

  .answer-pattern b.wrong,
  .answer-pattern button.wrong {
    border-color: rgba(148,57,42,.45);
    background: rgba(232,121,102,.2);
    color: #6f241b;
  }

  .answer-pattern b.current,
  .answer-pattern button.current {
    outline-color: rgba(177,101,57,.88);
    box-shadow: 0 0 0 2px rgba(177,101,57,.16);
  }

  .entry-progress {
    grid-column: 1 / -1;
    min-height: 14px;
    min-inline-size: 0;
    border: 0;
    padding: 0;
    margin-top: -2px;
    background: transparent;
    color: rgba(23,32,31,.56);
    font-family: var(--mono, monospace);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: rgba(177,101,57,.12);
  }

  .entry-progress:active {
    color: rgba(177,101,57,.86);
    transform: translateY(1px);
  }

  .entry-progress.finish-ready {
    color: rgba(65,106,78,.92);
    text-shadow: 0 1px 0 rgba(255,255,255,.28);
  }

  .sheet-entry-progress {
    margin-top: -5px;
    color: rgba(23,32,31,.58);
    font-size: 10px;
  }

  .sheet-entry-progress.finish-ready {
    color: rgba(65,106,78,.92);
  }

  .clue-sheet .mini-action.finish-ready {
    border-color: rgba(65,106,78,.34);
    background:
      linear-gradient(180deg, rgba(137,197,151,.18), rgba(216,173,100,.08)),
      rgba(23,32,31,.06);
    color: rgba(23,32,31,.86);
  }

  .fjord-pulse {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 42px auto;
    gap: 5px;
    padding: 5px 6px;
    border-color: rgba(23,32,31,.13);
    background:
      linear-gradient(135deg, rgba(31,83,96,.08), rgba(177,101,57,.07)),
      rgba(23,32,31,.035);
  }

  .fjord-pulse span {
    color: rgba(23,32,31,.55);
    font-size: 7.5px;
    letter-spacing: .09em;
  }

  .fjord-pulse strong {
    margin-top: 0;
    color: rgba(23,32,31,.82);
    font-family: var(--mono, monospace);
    font-size: 10.5px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fjord-pulse p {
    margin-top: 1px;
    color: rgba(23,32,31,.62);
    font-size: 9.5px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fjord-pulse meter {
    width: 42px;
    height: 5px;
  }

  .fjord-pulse meter::-webkit-meter-bar {
    background: rgba(23,32,31,.1);
  }

  .fjord-pulse button {
    min-inline-size: 0;
    min-block-size: 28px;
    max-width: 64px;
    padding: 3px 7px;
    border-color: rgba(23,32,31,.14);
    background: rgba(23,32,31,.07);
    color: var(--paper-ink, #17201f);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fjord-pulse.finish-ready {
    border-color: rgba(65,106,78,.24);
    background:
      linear-gradient(135deg, rgba(137,197,151,.13), rgba(216,173,100,.08)),
      rgba(23,32,31,.035);
  }

  .fjord-pulse.finish-ready button {
    border-color: rgba(65,106,78,.28);
    background: rgba(137,197,151,.12);
    color: rgba(23,32,31,.86);
  }

  body:has(.crossgrid):has(.start-trail.show) .fjord-pulse {
    display: none;
  }

  body:has(.crossgrid):has(.correction-trail.show) .fjord-pulse {
    display: none;
  }

  .correction-trail {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    padding: 5px 6px;
    border-color: rgba(148,57,42,.24);
    background: rgba(148,57,42,.08);
  }

  .correction-trail span {
    color: #6f241b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.12;
  }

  .correction-trail button {
    min-inline-size: 0;
    min-block-size: 40px;
    padding: 4px 8px;
    border-color: rgba(23,32,31,.14);
    background: rgba(23,32,31,.07);
    color: var(--paper-ink, #17201f);
    font-size: 10.5px;
    white-space: nowrap;
  }

  .mobile-quick-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .mobile-quick-actions button {
    min-inline-size: 0;
    min-block-size: 34px;
    border: 1px solid rgba(23,32,31,.16);
    border-radius: 7px;
    background: rgba(23,32,31,.07);
    color: var(--paper-ink, #17201f);
    font-size: 0;
    font-weight: 900;
    box-shadow: 0 1px 0 rgba(255,255,255,.42) inset;
  }

  .mobile-quick-actions button span {
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
  }

  .mobile-quick-actions button:disabled {
    opacity: .38;
  }

  .coach-card,
  .entry-list,
  .log {
    display: none;
  }

  .keyboard {
    position: fixed;
    left: max(4px, var(--sk-safe-left));
    right: max(4px, var(--sk-safe-right));
    bottom: max(4px, var(--sk-safe-bottom));
    z-index: 15;
    border: 1px solid rgba(247,240,223,.14);
    border-radius: 10px;
    padding: 3px;
    background: rgba(7,16,18,.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 -12px 38px rgba(0,0,0,.35);
    pointer-events: auto;
  }

  body:has(.crossgrid) .toast {
    top: calc(108px + var(--sk-safe-top));
    bottom: auto;
    width: min(82vw, 20rem);
    padding: 9px 11px;
    font-size: 13px;
    line-height: 1.25;
    transform: translateX(-50%) translateY(-8px);
  }

  body:has(.crossgrid) .toast.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  body:has(.crossgrid):has(.reward-burst.show) .toast.show {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-8px) !important;
  }

  .keys {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px;
  }

  .key,
  .key.wide {
    min-inline-size: 0;
    min-block-size: 44px;
    grid-column: span 1;
    border-radius: 7px;
    padding: 0;
    font-size: 13px;
  }

  .key[data-key="⌫"],
  .key[data-key="↵"] {
    font-size: 15px;
  }

  .key.target-key,
  .sheet-key.target-key {
    border-color: rgba(216,173,100,.58);
    background:
      radial-gradient(circle at 50% 12%, rgba(255,247,232,.2), transparent 58%),
      linear-gradient(180deg, rgba(216,173,100,.18), rgba(7,16,18,.68));
    color: #fff7e8;
    box-shadow:
      0 1px 0 rgba(255,255,255,.18) inset,
      0 0 0 1px rgba(216,173,100,.16),
      0 8px 18px rgba(0,0,0,.2);
  }

  .key.finish-key,
  .sheet-key.finish-key {
    border-color: rgba(137,197,151,.64);
    background:
      radial-gradient(circle at 50% 10%, rgba(234,255,221,.24), transparent 58%),
      linear-gradient(180deg, rgba(137,197,151,.22), rgba(216,173,100,.12)),
      rgba(7,16,18,.66);
    color: #f4ffe7;
    box-shadow:
      0 1px 0 rgba(255,255,255,.22) inset,
      0 0 0 1px rgba(137,197,151,.18),
      0 0 18px rgba(137,197,151,.16),
      0 8px 18px rgba(0,0,0,.22);
  }

  .key.key-flash,
  .sheet-key.key-flash {
    border-color: rgba(216,173,100,.74);
    background:
      radial-gradient(circle at 50% 12%, rgba(255,247,232,.34), transparent 56%),
      linear-gradient(180deg, rgba(216,173,100,.24), rgba(7,16,18,.78));
    color: #fff7e8;
    transform: translateY(-1px) scale(1.018);
    box-shadow:
      0 1px 0 rgba(255,255,255,.24) inset,
      0 0 0 2px rgba(216,173,100,.16),
      0 10px 22px rgba(0,0,0,.24);
  }

  .route-card {
    position: fixed;
    inset:
      max(8px, var(--sk-safe-top))
      max(8px, var(--sk-safe-right))
      max(8px, var(--sk-safe-bottom))
      max(8px, var(--sk-safe-left));
    z-index: 40;
    display: block;
    height: calc(100dvh - max(8px, var(--sk-safe-top)) - max(8px, var(--sk-safe-bottom)));
    max-height: calc(100dvh - max(8px, var(--sk-safe-top)) - max(8px, var(--sk-safe-bottom)));
    transform: none;
    top: 110dvh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: top .22s ease, opacity .18s ease, visibility .18s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 12% 0, rgba(216,173,100,.16), transparent 16rem),
      linear-gradient(180deg, rgba(18,32,33,.98), rgba(7,16,18,.98));
  }

  body.route-drawer-open .route-card,
  .route-card.show {
    top: max(8px, var(--sk-safe-top)) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.route-drawer-open::before {
    content: none;
  }

  .route-card .panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 44px;
    padding: 8px 10px;
    background: rgba(16,29,30,.96);
    backdrop-filter: blur(12px);
  }

  .route-list {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 8px;
    overflow: visible;
    padding: 10px;
  }

  .route {
    min-width: 0;
  }

  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 10px;
  }

  .stat {
    padding: 8px 6px;
  }

  .stat span {
    font-size: 8.5px;
  }

  .stat strong {
    font-size: 16px;
  }

  .meta-word,
  .insight-card {
    margin-inline: 10px;
  }

  .route-atlas {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(128px, 42%);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .route-atlas::-webkit-scrollbar {
    display: none;
  }

  .atlas-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 7px;
  }

  .atlas-step strong {
    font-size: 11px;
  }

  .atlas-step i {
    font-size: 9px;
  }

  .atlas-step code {
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  .clue-sheet {
    place-items: start center;
    padding:
      max(8px, var(--sk-safe-top))
      max(10px, var(--sk-safe-right))
      max(10px, var(--sk-safe-bottom))
      max(10px, var(--sk-safe-left));
  }

  .clue-sheet-panel {
    width: min(100%, 30rem);
    height: calc(100dvh - max(8px, var(--sk-safe-top)) - max(10px, var(--sk-safe-bottom)));
    max-height: calc(100dvh - max(8px, var(--sk-safe-top)) - max(10px, var(--sk-safe-bottom)));
    overflow-y: auto;
    padding: 12px;
    gap: 9px;
    background:
      radial-gradient(circle at 16% 0, rgba(216,173,100,.16), transparent 16rem),
      linear-gradient(180deg, #f6eedb, #dacbae);
  }

  .sheet-entry-rail {
    margin-top: auto;
    gap: 6px;
  }

  .sheet-entry-rail button {
    min-width: 48px;
    min-height: 40px;
    padding: 6px 8px;
  }

  .sheet-clue {
    font-size: clamp(20px, 6vw, 28px);
  }

  .sheet-keys {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 3px;
    padding-top: 8px;
  }

  .sheet-key {
    min-height: 42px;
    font-size: 11px;
  }

  .board-panel {
    overflow: visible;
  }

  body:has(.crossgrid) .active-clue {
    max-height: 146px;
    overflow: hidden;
  }

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

  body:has(.crossgrid):has(.correction-trail.show) .active-clue {
    max-height: 196px;
    overflow: visible;
  }

  body:has(.crossgrid) .clue-text {
    -webkit-line-clamp: 1;
  }

  body:has(.crossgrid):has(.start-trail.show) .clue-text {
    display: none;
  }

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

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

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

  body:has(.crossgrid) .pilot-chip {
    display: none;
  }

  body:has(.crossgrid):has(.start-trail.show) .mobile-quick-actions {
    display: none;
  }

  .grid-wrap {
    width: 100%;
    max-width: min(100%, 306px);
    min-width: 0;
    aspect-ratio: 13 / 10;
    padding: 4px;
  }

  .cell button {
    min-inline-size: 0;
    min-block-size: 0;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .cell .letter {
    font-size: clamp(.72rem, 4vw, 1rem);
  }

  .cell .num {
    font-size: .55rem;
  }

  .keys {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  body:has(.crossgrid) .keys {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  .key.wide {
    grid-column: span 1;
  }
}

@media (max-width: 360px) {
  body:has(.crossgrid) .app {
    padding-bottom: calc(208px + var(--sk-safe-bottom));
  }

  .top-actions {
    grid-template-columns: auto;
  }

  #timerChip {
    display: none;
  }

  .grid-wrap {
    width: 100%;
    max-width: min(100%, 284px);
  }

  body:has(.crossgrid) .clue-panel {
    bottom: calc(184px + var(--sk-safe-bottom));
    max-height: 108px;
  }

  body:has(.crossgrid):has(.correction-trail.show) .clue-panel {
    bottom: calc(224px + var(--sk-safe-bottom));
    max-height: 150px;
  }

  body:has(.crossgrid):has(.start-trail.show) .clue-panel {
    bottom: calc(202px + var(--sk-safe-bottom));
    max-height: 132px;
  }

  body:has(.crossgrid) .active-clue {
    padding: 6px 8px 7px;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  body:has(.crossgrid) .mode-tabs {
    display: none;
  }

  body:has(.crossgrid) .mode-cycle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 28px;
    max-width: 84px;
    padding: 4px 7px;
    border: 1px solid rgba(23,32,31,.2);
    border-radius: 7px;
    background: #17201f;
    color: #f1e7d1;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:has(.crossgrid) .clue-open {
    min-block-size: 28px;
    max-width: 64px;
    padding: 4px 7px;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:has(.crossgrid) .clue-text {
    grid-column: 1 / -1;
    -webkit-line-clamp: 1;
    font-size: .92rem;
  }

  body:has(.crossgrid):has(.start-trail.show) .clue-text {
    display: none;
  }

  body:has(.crossgrid):has(.start-trail.show) .answer-pattern {
    display: none;
  }

  body:has(.crossgrid):has(.start-trail.show) .entry-progress {
    display: none;
  }

  body:has(.crossgrid) .flow-quest {
    display: none;
  }

  body:has(.crossgrid) .fjord-pulse {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body:has(.crossgrid) .fjord-pulse meter {
    display: none;
  }


  body:has(.crossgrid) .answer-pattern {
    grid-column: 1 / -1;
  }

  body:has(.crossgrid) .pilot-chip {
    display: none;
  }

  body:has(.crossgrid) .mobile-quick-actions {
    display: none;
    grid-column: 1 / -1;
  }

  body:has(.crossgrid) .key {
    min-block-size: 36px;
    font-size: 12px;
  }

  body:has(.crossgrid) .reward-burst {
    top: max(118px, calc(var(--sk-safe-top) + 92px));
  }
}

@media (max-width: 420px) and (max-height: 640px) {
  body:has(.crossgrid) .app {
    padding-bottom: calc(304px + var(--sk-safe-bottom));
  }

  body:has(.crossgrid) .board-panel {
    padding: 6px;
  }

  body:has(.crossgrid) .board-tools {
    margin-bottom: 5px;
  }

  body:has(.crossgrid) .grid-wrap {
    padding: 4px;
  }

  body:has(.crossgrid) .active-clue {
    position: fixed;
    left: max(8px, var(--sk-safe-left));
    right: max(8px, var(--sk-safe-right));
    top: calc(40px + var(--sk-safe-top));
    bottom: auto;
    z-index: 14;
    padding: 8px 9px 9px;
    max-height: 126px;
    overflow: hidden;
  }

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

  body:has(.crossgrid) .active-clue h2 {
    display: none;
  }

  body:has(.crossgrid) .mode-tabs {
    gap: 4px;
  }

  body:has(.crossgrid) .mode-tabs button {
    min-block-size: 38px;
    font-size: 10px;
  }

  body:has(.crossgrid) .clue-text {
    margin-top: 5px;
    font-size: .95rem;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body:has(.crossgrid):has(.start-trail.show) .clue-text,
  body:has(.crossgrid):has(.start-trail.show) .answer-pattern {
    display: none;
  }

  body:has(.crossgrid) .fjord-pulse {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 4px 5px;
  }

  body:has(.crossgrid) .fjord-pulse p,
  body:has(.crossgrid) .fjord-pulse span,
  body:has(.crossgrid) .fjord-pulse meter {
    display: none;
  }

  body:has(.crossgrid) .fjord-pulse strong {
    font-size: 10px;
  }

  body:has(.crossgrid) .fjord-pulse button {
    min-block-size: 24px;
  }

  body:has(.crossgrid) .pilot-chip {
    display: none;
  }

  body:has(.crossgrid) .correction-trail.show {
    display: none;
  }

  body:has(.crossgrid) .mobile-quick-actions {
    display: none;
  }

  body:has(.crossgrid) .keyboard {
    padding: 7px;
  }

  body:has(.crossgrid) .key {
    min-block-size: 44px;
    font-size: 12px;
  }
}

/* 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, 16vw, 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;
  }
}

@media (max-width: 340px), (max-height: 700px) {
  body:has(.masthead) .board {
    width: min(calc(100vw - 1.5rem - var(--sk-safe-left) - var(--sk-safe-right)), 17rem) !important;
    max-width: 74dvh;
  }
}

/* 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;
  }
}

@media (max-width: 520px) {
  body:has(#stage-wrap):has(.stage-controls) .stage-controls {
    top: 24px !important;
    right: max(12px, var(--sk-safe-right)) !important;
    left: max(12px, var(--sk-safe-left)) !important;
    bottom: auto !important;
    z-index: 26;
    display: grid;
    grid-template-columns: 44px 44px minmax(88px, 1fr) 44px 44px;
    gap: 6px;
    max-width: none !important;
  }

  body:has(#stage-wrap):has(.stage-controls) .stage-controls .ctl {
    width: auto;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 .45rem;
    border-radius: 7px;
    white-space: nowrap;
  }

  body:has(#stage-wrap):has(.stage-controls) #zentrieren,
  body:has(#stage-wrap):has(.stage-controls) #ton,
  body:has(#stage-wrap):has(.stage-controls) #musik {
    font-size: 0;
  }

  body:has(#stage-wrap):has(.stage-controls) #zentrieren::before,
  body:has(#stage-wrap):has(.stage-controls) #ton::before,
  body:has(#stage-wrap):has(.stage-controls) #musik::before {
    font-size: 12px;
    line-height: 1;
  }

  body:has(#stage-wrap):has(.stage-controls) #zentrieren::before {
    content: "Zentrieren";
  }

  body:has(#stage-wrap):has(.stage-controls) #ton::before {
    content: "Ton";
  }

  body:has(#stage-wrap):has(.stage-controls) #musik::before {
    content: "\266A";
    font-size: 18px;
  }

  body:has(#stage-wrap):has(.stage-controls) .hinweis-btn {
    top: 76px !important;
    right: max(12px, var(--sk-safe-right)) !important;
    bottom: auto !important;
    min-width: 126px;
    height: 42px;
    padding: 0 14px;
    border-radius: 7px;
    z-index: 27;
  }

  body:has(#stage-wrap):has(.stage-controls) #toast {
    top: 128px !important;
    bottom: auto !important;
    max-width: calc(100vw - 24px);
  }
}

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

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

  #toolbar #findBtn {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #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;
  }
}

@media (max-width: 430px) and (max-height: 640px) {
  body:has(#foot) header {
    padding:
      max(7px, var(--sk-safe-top))
      max(12px, var(--sk-safe-right))
      6px
      max(12px, var(--sk-safe-left));
  }

  body:has(#foot) .eyebrow {
    display: none;
  }

  body:has(#foot) .row1 {
    margin-top: 0;
  }

  body:has(#foot) .row1 h1 {
    font-size: 17px;
  }

  body:has(#foot) #route {
    margin-top: 6px;
  }

  body:has(#foot) #status {
    padding:
      6px
      max(12px, var(--sk-safe-right))
      3px
      max(12px, var(--sk-safe-left));
    gap: 8px;
  }

  body:has(#foot) #status .k {
    font-size: 8px;
  }

  body:has(#foot) #status .v {
    font-size: 25px;
  }

  body:has(#foot) #modePressure {
    padding:
      0
      max(12px, var(--sk-safe-right))
      4px
      max(12px, var(--sk-safe-left));
    font-size: 7.5px;
    gap: 6px;
  }

  body:has(#foot) #scorebarWrap {
    padding:
      4px
      max(12px, var(--sk-safe-right))
      0
      max(12px, var(--sk-safe-left));
  }

  body:has(#foot) #todayRail {
    padding:
      6px
      max(10px, var(--sk-safe-right))
      0
      max(10px, var(--sk-safe-left));
  }

  body:has(#foot) #todayCard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px 8px;
    padding: 6px 8px;
    max-height: 82px;
  }

  body:has(#foot) #todayCard .tcBlock.rule,
  body:has(#foot) #todayCard .tcBlock.pressure {
    display: none !important;
  }

  body:has(#foot) #todayCard .tcBlock b {
    font-size: 7.5px;
  }

  body:has(#foot) #todayCard .tcBlock span {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.2;
  }

  body:has(#foot) #todayCard .miniMeter {
    margin-top: 3px;
  }

  body:has(#foot) #clueRail {
    padding:
      5px
      max(10px, var(--sk-safe-right))
      0
      max(10px, var(--sk-safe-left));
  }

  body:has(#foot) #clueRail .clue {
    min-height: 42px;
    padding: 6px 8px;
  }

  body:has(#foot) #clueRail .clue .cd {
    margin-top: 2px;
  }

  body:has(#foot) #clueRail .clue .cp,
  body:has(#foot) #clueRail .clue .cs,
  body:has(#foot) #clueRail .clue .cm {
    display: none;
  }

  body:has(#foot) #margs {
    display: none;
  }

  body:has(#foot) #table {
    flex: 1 1 190px;
    min-height: 190px;
  }

  body:has(#foot) #toolbar {
    top: 6px;
  }

  body:has(#foot) #blickLens {
    top: 54px;
    width: 136px;
    height: 136px;
    opacity: .62;
  }

  body:has(#foot) #blickLens .lensDial {
    inset: 15px;
  }

  body:has(#foot) #blickLens .lensHalo {
    inset: 6px;
  }

  body:has(#foot) #lensMarks i {
    transform: rotate(var(--a)) translateY(-48px) rotate(calc(var(--a) * -1));
  }

  body:has(#foot) #lensEye {
    width: 52px;
    height: 30px;
    margin: -15px 0 0 -26px;
  }

  body:has(#foot) #blickLens .lensRead {
    width: 124px;
    bottom: 3px;
  }

  body:has(#foot) #preview {
    min-height: 42px;
    padding: 2px 12px 4px;
  }

  body:has(#foot) #preview .hint {
    font-size: 8px;
    max-width: calc(100vw - 24px);
  }

  body:has(#foot) #hand {
    height: 112px;
    padding-bottom: 16px;
  }

  body:has(#foot) .card {
    width: 60px;
    height: 92px;
    margin-inline: -7px;
    padding: 6px 7px;
  }

  body:has(#foot) .card .v {
    font-size: 19px;
  }

  body:has(#foot) .card .v2 {
    right: 7px;
    bottom: 21px;
  }

  body:has(#foot) .card .suitname {
    font-size: 7px;
  }

  body:has(#foot) #foot {
    padding:
      7px
      max(10px, var(--sk-safe-right))
      max(10px, var(--sk-safe-bottom))
      max(10px, var(--sk-safe-left));
  }

  body:has(#foot) #foot .btn {
    min-height: 54px;
    padding-block: 10px;
  }
}

@supports selector(body:has(#foot)) {
  body:has(#resumeBtn[style*="block"]) #startPanel #resumeBtn {
    order: -1;
    background: linear-gradient(180deg, #F4F0E4, #E2DCC9);
    color: #171914;
    border-color: var(--paper, #ede8dc);
    font-weight: 700;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
  }

  body:has(#resumeBtn[style*="block"]) #startPanel #startBtn {
    background: transparent;
    color: var(--paper2, rgba(237, 232, 220, .76));
    border-color: var(--line, rgba(237, 232, 220, .16));
    box-shadow: none;
    font-weight: 600;
  }

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

    body:has(#foot) #startPanel .actions {
      position: sticky;
      bottom: max(0px, var(--sk-safe-bottom));
      z-index: 3;
      margin-top: 12px;
      padding-top: 10px;
      background: linear-gradient(180deg, rgba(17, 19, 16, .72), rgba(17, 19, 16, .99) 38%);
      border-top: 1px solid rgba(237, 232, 220, .12);
    }

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

/* 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;
  }
}

@media (max-width: 520px) {
  body:has(.mapbox) .main {
    grid-template-rows: minmax(21rem, 56dvh) minmax(29rem, auto) !important;
  }

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

  body:has(.mapbox) .map {
    transform: translate(-50%, -50%) scale(.72) !important;
  }
}

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