/* Layout a viewport singolo per i solitari a colonne. Il tavolo occupa lo
   spazio residuo dell'iframe e le pile vengono compattate da fit-table.js. */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
}

body {
  min-height: 0;
}

.sr-status {
  position: fixed !important;
  top: 0;
  left: 0;
}

.shell {
  display: flex;
  width: min(1240px, 100%);
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  padding: clamp(0.35rem, 1.2vh, 0.75rem);
}

.topbar {
  position: relative;
  top: auto;
  flex: 0 0 auto;
}

.layout {
  min-height: 0;
  flex: 1 1 auto;
  grid-template-rows: minmax(0, 1fr);
  margin-top: clamp(0.35rem, 1vh, 0.65rem);
  overflow: hidden;
}

.main-panel {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.main-panel > :is(.hud, .objective) {
  flex: 0 0 auto;
}

.table-wrap {
  display: block;
  min-height: 0 !important;
  flex: 1 1 auto;
  overflow: hidden !important;
  touch-action: none;
}

.table {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  flex-direction: column;
  overflow: hidden;
}

.table > :is(.sol-top, .spider-top, .fc-top) {
  flex: 0 0 auto;
}

.table > :is(.tableau, .spider-columns, .fc-cols) {
  min-height: 0;
  flex: 1 1 auto;
}

.table :is(.tableau, .spider-columns, .fc-cols) > .pile {
  height: 100%;
  min-height: 0 !important;
}

/* art-direction rende relativi tutti i pulsanti; le carte nelle pile devono
   invece restare assolute per sovrapporsi e non allungare il documento. */
.pile > .card {
  position: absolute !important;
}

.side {
  position: static !important;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.side > .panel:last-child {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.side > .panel:last-child .log {
  min-height: 0;
  flex: 1 1 auto;
}

@media (max-width: 799px) {
  .layout {
    overflow: hidden;
  }

  .side > .panel:first-child .actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .side > .panel:first-child .actions > button {
    min-width: 0;
    padding-inline: 0.35rem;
    font-size: clamp(0.64rem, 2.8vw, 0.78rem);
    line-height: 1.15;
    white-space: normal;
  }

  .side > #info,
  .side > .panel:last-child {
    display: none;
  }

  .main-panel > .hud {
    position: static;
  }
}

@media (max-height: 560px) {
  .brand p,
  .objective {
    display: none;
  }

  .topbar,
  .panel {
    padding-block: 0.35rem;
  }
}