/* JK.Games V366 · ausschließlich Handy-/Touch-Layout-Fixes.
   Desktop wird durch die Media Queries bewusst nicht verändert. */

/* --------------------------------------------------------------------------
   Top Games · auf dem Handy bis zur letzten Karte scrollen
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (pointer: coarse) {
  .device-app-open-v64 .device-app-window-v64:has(.topgames-launcher),
  .device-app-open-v63 .device-app-window-v63:has(.topgames-launcher),
  .device-app-view:has(.topgames-launcher) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .topgames-launcher {
    min-height: max-content !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .topgames-grid {
    padding-bottom: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   Kleiderschrank · vollständige Figur inklusive Beine auf dem Handy
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (pointer: coarse) {
  #detailDialog.wardrobe-dialog[open] {
    overflow: hidden !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-closet {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(300px, 46dvh) minmax(150px, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-preview {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 8px !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-preview > .avatar-card,
  #detailDialog.wardrobe-dialog .wardrobe-preview > .avatar-card.large {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-preview .avatar-svg,
  #detailDialog.wardrobe-dialog .wardrobe-preview .jk-exclusive-svg {
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    overflow: visible !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-preview .meta-strip {
    min-height: 30px !important;
    margin-top: 4px !important;
  }
  #detailDialog.wardrobe-dialog .wardrobe-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (max-width: 760px) and (pointer: coarse) and (max-height: 700px) {
  #detailDialog.wardrobe-dialog .wardrobe-closet {
    grid-template-rows: minmax(245px, 43dvh) minmax(120px, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   City.KL · komplette Kopfzeile unter Dynamic Island / Safe Area
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (pointer: coarse) {
  .city-kl-overlay {
    overflow: hidden !important;
  }
  .city-kl-topbar {
    box-sizing: border-box !important;
    top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
    left: max(7px, env(safe-area-inset-left, 0px)) !important;
    right: max(7px, env(safe-area-inset-right, 0px)) !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 6px 8px !important;
    gap: 7px !important;
    border-radius: 17px !important;
  }
  .city-kl-back,
  .city-kl-menu-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }
  .city-kl-title {
    min-width: 0 !important;
  }
  .city-kl-title b,
  .city-kl-title h1,
  .city-kl-title h2 {
    font-size: 18px !important;
    white-space: nowrap !important;
  }
  .city-kl-title small { display: none !important; }
  .city-kl-turn-badge {
    min-width: 82px !important;
    max-width: 96px !important;
    padding: 5px 8px !important;
  }
  .city-kl-players {
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
  }
  .city-kl-board-area {
    top: calc(env(safe-area-inset-top, 0px) + 108px) !important;
  }
  .city-kl-toast {
    top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
  }
}

/* --------------------------------------------------------------------------
   Match.KL · Statusleiste/Dynamic Island freihalten, Ingame-Kopf kompakt
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (pointer: coarse) {
  .match-kl-screen {
    box-sizing: border-box !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 9px) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .mkl-appbar {
    padding-top: 0 !important;
    margin-bottom: 8px !important;
    min-height: 46px !important;
    gap: 7px !important;
  }
  .mkl-brand-logo {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
  .mkl-brand small { display: none !important; }
  .mkl-brand b { font-size: 17px !important; }
  .mkl-resourcebar { gap: 4px !important; }
  .mkl-resource {
    padding: 5px 7px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
  .mkl-game-head {
    box-sizing: border-box !important;
    min-height: 52px !important;
    margin-bottom: 6px !important;
    padding: 2px !important;
    gap: 5px !important;
  }
  .mkl-game-head-left,
  .mkl-game-head-right {
    gap: 5px !important;
  }
  .mkl-game-head-left .mkl-game-exit-btn {
    display: grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .mkl-counter {
    min-width: 55px !important;
    padding: 4px 6px !important;
  }
  .mkl-counter small { font-size: 6.5px !important; }
  .mkl-counter b { font-size: 15px !important; }
  .mkl-level-title { min-width: 0 !important; }
  .mkl-level-title small { font-size: 7px !important; }
  .mkl-level-title b { font-size: 13px !important; white-space: nowrap !important; }
  .mkl-board-wrap {
    width: min(100%, 420px) !important;
    margin-inline: auto !important;
  }
}
/* --------------------------------------------------------------------------
   Fight.KL · nur Handy-Querformat: Boss klein + Pflege nur als Icons über Stick
   -------------------------------------------------------------------------- */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  .fight-kl-shell.combat-active .fkl-boss-wrap,
  .fight-kl-shell.combat-active .fkl-stage.fkl-coop-stage .fkl-boss-wrap {
    top: 7px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(390px, 44vw) !important;
    max-width: 44vw !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
  }
  .fight-kl-shell.combat-active .fkl-boss-wrap b {
    margin-bottom: 3px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .fight-kl-shell.combat-active .fkl-boss-wrap .fkl-bar,
  .fight-kl-shell.combat-active .fkl-boss-wrap .fkl-boss {
    height: 6px !important;
    min-height: 6px !important;
  }
  .fight-kl-shell.combat-active .fkl-care-actions {
    left: max(18px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: auto !important;
    gap: 7px !important;
    justify-content: flex-start !important;
  }
  .fight-kl-shell.combat-active .fkl-care-button {
    display: grid !important;
    place-items: center !important;
    grid-template-columns: 1fr !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 15px !important;
    text-align: center !important;
  }
  .fight-kl-shell.combat-active .fkl-care-button > span,
  .fight-kl-shell.combat-active .fkl-care-button > small {
    display: none !important;
  }
  .fight-kl-shell.combat-active .fkl-care-button > i {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    filter: none !important;
  }
  .fight-kl-shell.combat-active [data-fkl-care-companion] > i::before {
    content: "🐾";
    font-size: 24px;
    line-height: 1;
  }
  .fight-kl-shell.combat-active [data-fkl-care-mount] > i::before {
    content: "🐎";
    font-size: 24px;
    line-height: 1;
  }
}

/* --------------------------------------------------------------------------
   Money.KL · Hochformat-Feld komplett sichtbar, kein Board-Panning nötig
   -------------------------------------------------------------------------- */
@media (max-width: 760px) and (pointer: coarse) and (orientation: portrait) {
  .money-kl-top {
    box-sizing: border-box !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    gap: 5px !important;
  }
  .money-kl-brand small { display: none !important; }
  .money-kl-brand h1 { font-size: 20px !important; }
  .money-kl-balance { padding: 5px 9px !important; border-radius: 11px !important; }
  .money-kl-balance small { font-size: 7px !important; }
  .money-kl-balance b { font-size: 17px !important; }
  .money-kl-top-actions { gap: 4px !important; }
  .money-kl-top-actions button {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
  }
  .money-kl-board-toolbar {
    min-height: 50px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }
  .money-kl-board-toolbar > div {
    gap: 4px !important;
    flex-wrap: wrap !important;
    align-content: center !important;
  }
  .money-kl-chip {
    padding: 4px 7px !important;
    font-size: 8px !important;
  }
  .money-kl-chip.maker { display: none !important; }
  .money-kl-board-scroll {
    inset: 50px 0 0 !important;
    overflow: hidden !important;
    padding: 6px !important;
    display: grid !important;
    place-items: center !important;
    touch-action: none !important;
  }
  .money-kl-world,
  .money-kl-world[class*="size-"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    padding: 8px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
  }
  .money-kl-skyline { display: none !important; }
  .money-kl-world::after { display: none !important; }
  .money-kl-board {
    min-width: 0 !important;
    min-height: 0 !important;
    width: max-content !important;
    height: max-content !important;
    align-content: center !important;
    justify-content: center !important;
    transform: none !important;
    gap: 4px !important;
    padding: 8px !important;
  }
  .money-kl-board.size-2  { --cell-size: 76px !important; grid-template-columns: repeat(2, var(--cell-size)) !important;  grid-auto-rows: var(--cell-size) !important; }
  .money-kl-board.size-4  { --cell-size: 66px !important; grid-template-columns: repeat(4, var(--cell-size)) !important;  grid-auto-rows: var(--cell-size) !important; }
  .money-kl-board.size-6  { --cell-size: 50px !important; grid-template-columns: repeat(6, var(--cell-size)) !important;  grid-auto-rows: var(--cell-size) !important; }
  .money-kl-board.size-8  { --cell-size: 39px !important; grid-template-columns: repeat(8, var(--cell-size)) !important;  grid-auto-rows: var(--cell-size) !important; }
  .money-kl-board.size-10 { --cell-size: 31px !important; grid-template-columns: repeat(10, var(--cell-size)) !important; grid-auto-rows: var(--cell-size) !important; gap: 3px !important; padding: 7px !important; }
  .money-kl-cell {
    width: var(--cell-size) !important;
    height: var(--cell-size) !important;
    min-width: var(--cell-size) !important;
    min-height: var(--cell-size) !important;
  }
  .money-kl-board.size-10 .money-kl-cell em,
  .money-kl-board.size-10 .money-kl-cell b {
    font-size: 5.5px !important;
  }
  .money-kl-board.size-10 .money-kl-model .model-sign { display: none !important; }
}