/* Decorative lobby glows must not add page width behind an open game. */
html:has(:is(.candy-overlay,.block-overlay,.quoridor-overlay,.hex-overlay).open),
body:has(:is(.candy-overlay,.block-overlay,.quoridor-overlay,.hex-overlay).open) { overflow-x: clip; }

/* Hex follows the same board-first hierarchy as the Dama room. */
.hex-info-panel { display: none !important; }
.hex-room-body {
  grid-template-columns: minmax(0,1fr) clamp(310px,21vw,390px) !important;
  gap: clamp(24px,2vw,42px) !important;
  padding: clamp(20px,1.6vw,32px) clamp(24px,2vw,40px) clamp(26px,2vw,40px) !important;
}
.hex-stage {
  min-width: 0;
  width: 100%;
  display: grid;
  justify-items: center;
}
.hex-board-shell {
  /* The Hex SVG is 1.63:1; match Dama's responsive board height, not its width. */
  width: min(100%,calc(163dvh - 505px),1465px) !important;
}
.hex-turn-status { width: 100%; }

@media (min-width: 901px) and (max-width: 1120px) {
  .hex-room-body { grid-template-columns: 1fr !important; }
  .hex-panel { width: min(760px,100%); margin-inline: auto; }
}

@media (max-width: 900px) {
  .hex-room-body {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .hex-board-shell { width: 100% !important; }
}

/* Block uses Dama's board-first match layout instead of the full-room intro. */
.block-lobby > :is(.block-badge,h2,p:not(.match-exit-warning):not(.block-match-message)) { display: none; }
.block-match-badge { align-self: flex-start; }
.block-lobby #block-status { margin: 19px 0 5px; font: 700 19px/normal Manrope,Arial,sans-serif; letter-spacing: -.7px; text-align: left; }
.block-lobby > .block-match-message { display: block; min-height: 44px; margin: 0; color: #9195a6; font: 400 10px/1.6 Manrope,Arial,sans-serif; text-align: left; }

@media (min-width: 901px) {
  .block-room {
    grid-template-columns: minmax(0,1fr) clamp(310px,21vw,390px);
    grid-template-rows: auto auto minmax(0,1fr);
  }
  .block-topbar,.block-scorebar { grid-column: 1 / -1; }
  .block-room-body {
    grid-column: 1;
    grid-row: 3;
    padding: clamp(10px,1vw,18px) clamp(24px,2vw,40px) clamp(12px,1.1vw,20px);
    overflow: hidden;
  }
  .block-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: clamp(6px,.6vw,11px);
    grid-template-rows: minmax(0,1fr) auto auto;
  }
  .block-board-wrap {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
  }
  .block-lobby {
    position: static;
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    width: calc(100% - clamp(24px,2vw,40px));
    min-width: 0;
    margin-right: clamp(24px,2vw,40px);
    padding: 24px;
    align-items: stretch;
    border: 1px solid rgba(83,217,190,.15);
    border-radius: 14px;
    background: #0d1a24;
    text-align: left;
  }
  .block-tier-picker,.block-economy,.block-lobby .match-exit-warning,.block-lobby > .primary {
    width: 100%;
    max-width: none;
  }
  .block-tier-picker { margin: 0 0 clamp(16px,1.1vw,23px); }
  .block-economy {
    grid-template-columns: 1fr;
    gap: 0;
    margin: clamp(14px,1vw,18px) 0;
    padding: 8px 0;
    border-block: 1px solid var(--line);
  }
  .block-economy > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .block-economy small { color: #838799; font: 500 clamp(9px,.62vw,12px) Manrope; }
  .block-economy b { margin: 0; color: #c3afff; font-size: clamp(10px,.68vw,13px); }
}
@media (min-width: 901px) {
  .quoridor-board { width: 100%; }
  .block-overlay { padding-block: 10px; }
}