/* One Novara footer grid owns both value columns and the actions below them. */
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock {
  --novara-row-width: min(1040px, calc(100vw - 24px));
  --novara-value-width: calc((var(--novara-row-width) - 168px) / 4);
  --novara-action-width: calc((var(--novara-row-width) - 276px) / 4);
  display: grid;
  grid-template-columns: var(--novara-value-width) var(--novara-value-width) 128px 44px var(--novara-action-width) var(--novara-action-width);
  grid-template-rows: 60px 58px 44px;
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
  justify-items: stretch;
  align-content: center;
  height: 200px;
  min-height: 200px;
  padding: 8px max(12px, calc((100vw - 1040px) / 2));
}

html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock .dockMain,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock .dockUtils,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock .betBlock,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock .novaraBetStack {
  display: contents;
}

html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #balMeter,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #winMeter {
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 60px;
  min-height: 60px;
  margin: 0;
  align-self: center;
}
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #balMeter { grid-column: 1; }
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #winMeter { grid-column: 2; }

html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock .betRead {
  grid-column: 5;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 60px;
  min-height: 60px;
  margin: 0;
  align-self: center;
}

html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betMinus,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betPlus {
  grid-row: 1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  align-self: center;
  justify-self: start;
}
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betMinus { grid-column: 4; }
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betPlus { grid-column: 6; }

html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #spin {
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0;
  align-self: center;
  justify-self: center;
}

html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #maxBet,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #auto,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #speed,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #buy,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #rules,
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #mute {
  position: static;
  inset: auto;
  width: 100%;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  align-self: center;
}
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #maxBet { grid-column: 5; grid-row: 2; }
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #speed { grid-column: 1; grid-row: 3; }
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #buy { grid-column: 2; grid-row: 3; position: relative; }
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #rules { grid-column: 3 / 5; grid-row: 3; }
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #mute { grid-column: 5; grid-row: 3; }
html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #auto { grid-column: 6; grid-row: 3; }

/* Portrait retains the existing 292px footer and its five visual rows. */
@media (max-width: 820px) {
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock {
    --novara-row-width: calc(100vw - 16px);
    --novara-action-width: min(calc((var(--novara-row-width) - 58px) / 2), calc(var(--novara-row-width) - 203px));
    grid-template-columns: 44px var(--novara-action-width) minmax(var(--novara-action-width), 1fr);
    column-gap: 7px;
    grid-template-rows: 56px 7px 54px 7px 48px 7px 48px 5px 44px;
    row-gap: 0;
    height: 292px;
    min-height: 292px;
    padding: 6px 8px 8px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #balMeter,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #winMeter {
    grid-column: 1 / -1;
    grid-row: 1;
    width: calc((100% - 7px) / 2);
    height: 56px;
    min-height: 56px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #balMeter { justify-self: start; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #winMeter { justify-self: end; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock .betRead {
    grid-column: 2;
    grid-row: 3;
    height: 46px;
    min-height: 46px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betMinus { grid-column: 1; grid-row: 3; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betPlus { grid-column: 3; grid-row: 3; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #spin {
    grid-column: 3;
    grid-row: 3 / 6;
    justify-self: end;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #maxBet { grid-column: 2; grid-row: 5; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #mute { grid-column: 2; grid-row: 7; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #auto { grid-column: 3; grid-row: 7; width: var(--novara-action-width); justify-self: start; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #maxBet,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #mute,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #auto { height: 48px; min-height: 48px; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #speed,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #buy,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #rules {
    grid-column: 1 / -1;
    grid-row: 9;
    width: calc(27.5% - 2.75px);
    height: 44px;
    min-height: 44px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #speed { justify-self: start; overflow-wrap: anywhere; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #buy { width: calc(45% - 4.5px); justify-self: center; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #rules { justify-self: end; overflow-wrap: anywhere; }
}

/* The existing game scene keeps its separate landscape rail. */
@media (min-width: 600px) and (max-height: 600px) and (min-aspect-ratio: 13/10) {
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock {
    --novara-row-width: calc(clamp(300px, 39vw, 360px) - 13px);
    --novara-action-width: min(calc((var(--novara-row-width) - 58px) / 2), calc(var(--novara-row-width) - 185px));
    grid-template-columns: 44px var(--novara-action-width) minmax(var(--novara-action-width), 1fr);
    column-gap: 7px;
    grid-template-rows: 48px 5px 44px 5px 44px 5px 44px 5px 44px;
    row-gap: 0;
    height: 100%;
    min-height: 0;
    padding: 6px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #balMeter,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #winMeter {
    grid-column: 1 / -1;
    grid-row: 1;
    width: calc((100% - 5px) / 2);
    height: 48px;
    min-height: 48px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #balMeter { justify-self: start; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #winMeter { justify-self: end; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock .betRead {
    grid-column: 2;
    grid-row: 3;
    height: 44px;
    min-height: 44px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betMinus { grid-column: 1; grid-row: 3; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #betPlus { grid-column: 3; grid-row: 3; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #spin {
    grid-column: 3;
    grid-row: 3 / 6;
    justify-self: end;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #maxBet { grid-column: 2; grid-row: 5; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #mute { grid-column: 2; grid-row: 7; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #auto { grid-column: 3; grid-row: 7; width: var(--novara-action-width); justify-self: start; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #maxBet,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #mute,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #auto { height: 44px; min-height: 44px; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #speed,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #buy,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #rules {
    grid-column: 1 / -1;
    grid-row: 9;
    width: calc(27.5% - 2.75px);
    height: 44px;
    min-height: 44px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #speed { justify-self: start; overflow-wrap: anywhere; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #buy { width: calc(45% - 4.5px); justify-self: center; }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #rules { justify-self: end; overflow-wrap: anywhere; }
}

/* 224px content plus8px inset fits the known238px child viewport. */
@media (min-width: 600px) and (max-height: 269px) and (min-aspect-ratio: 13/10) {
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock {
    grid-template-rows: 40px 2px 44px 2px 44px 2px 44px 2px 44px;
    padding-block: 4px;
  }
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #balMeter,
  html[data-novara-controls="maxbet-dock"] #app footer.dock.aurum-dock #winMeter {
    height: 40px;
    min-height: 40px;
  }
}