/* Responsive presentation; game element IDs and mechanics are preserved. */
.dungeon-right { display: contents; }
.dungeon-wordmark { display: none; }
.loot-bag, .raid-hud { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.board-heading { flex: 0 0 44px; width: 100%; min-width: 0; }
.board-title-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
#screen-game .board-heading #game-hint { margin: 3px 0 0; padding: 0 4px; font-size: 11px; line-height: 14px; }
#screen-game #turn-status { position: static; margin: 0; font-size: 10px; padding: 3px 7px; }
#cavern-alert { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#screen-game .cell.revealed { border: 0; border-radius: 1px; background: #201e1b; box-shadow: none; overflow: hidden; }
#screen-game .cell.revealed.clue { background: linear-gradient(135deg, #392526 0%, #302426 48%, #8a7254 49%, #8a7254 51%, #202e33 52%, #1b272d 100%); }
#screen-game .clue-bomb, #screen-game .clue-treasure { max-width: 70%; max-height: 40%; gap: 1px; line-height: 1; }
#screen-game .clue-bomb { top: 9%; left: 9%; color: #ff9890; }
#screen-game .clue-treasure { bottom: 9%; right: 9%; color: #8edfff; }
#screen-game .clue-icon { font-size: .72em; }

.defense-content { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; width: 100%; }
.opponent-findings { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
#cavern-alert { font-size: 11px; line-height: 1.4; text-align: center; color: #baa98a; }
#screen-game #mcol-territory.under-attack { border-color: #fa7657; animation: cavern-alarm 1s ease-in-out infinite alternate; }
.under-attack #cavern-alert { color: #ff9c80; font-weight: bold; }
@keyframes cavern-alarm { to { box-shadow: inset 0 0 18px #a82e2355, 0 0 10px #f65b3655; } }
@media (prefers-reduced-motion: reduce) { #screen-game #mcol-territory.under-attack { animation: none; box-shadow: inset 0 0 12px #a82e2355; } }

@media (min-width: 900px) {
  #screen-game {
    --rail-width: clamp(175px, 14vw, 235px);
    --dock-height: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width) minmax(0, min(calc(100dvh - 230px), calc(100vw - 2 * var(--rail-width) - 88px))) var(--rail-width) minmax(0, 1fr);
    grid-template-rows: 76px minmax(0, 1fr) var(--dock-height);
    gap: 6px 12px;
    width: min(1800px, 100%);
    height: 100%;
    height: 100dvh;
    margin-inline: auto;
    padding: env(safe-area-inset-top, 0px) 20px env(safe-area-inset-bottom, 0px);
    overflow: hidden;
  }
  #screen-game > .top-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    width: 100%; max-width: none;
    margin: 0;
    padding: 16px 64px;
    border: 0;
    background: url('header.webp') center 46% / 100% 480% no-repeat;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    box-shadow: none;
    isolation: isolate;
    overflow: hidden;
  }
  #screen-game .dungeon-wordmark {
    display: block; position: absolute;
    width: clamp(240px, 36vw, 540px); height: auto;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    pointer-events: none; z-index: -1;
  }
  #screen-game .tb-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  #screen-game #turn-status { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; }
  #screen-game #game-title {
    position: static; grid-column: 1; grid-row: 1; align-self: center;
    transform: none; margin: 0; padding: 6px 10px;
    width: max-content; max-width: 190px; font-size: 12px; text-align: center;
    border: 1px solid #94702d; border-radius: 20px; background: #211b13;
  }
  #screen-game .iconbtn { width: 38px; height: 38px; }
  #screen-game > .meters { display: contents; }
  #screen-game .meters > .mcol {
    grid-column: 2; grid-row: 2;
    align-self: start; max-height: 100%; overflow: auto;
  }
  #screen-game .dungeon-right {
    display: flex; flex-direction: column; gap: 14px;
    grid-column: 4; grid-row: 2;
    min-width: 0; min-height: 0; overflow: auto;
    padding-bottom: 4px;
  }
  /* Do not stretch the complete illustrated shelf behind independent rows.
     Only its outer rim is used; the content owns the panel's height. */
  #screen-game .mcol:not(.territory) {
    flex: 0 0 auto;
    border: 18px solid transparent;
    border-image: url('panel.webp') 13% 27% 14% 27% stretch;
    background: rgba(13, 12, 12, .94);
    background-clip: padding-box;
    padding: 12px 8px;
    gap: 14px;
    min-width: 0;
    isolation: isolate;
  }
  #screen-game .mcol-head {
    font: bold 14px Georgia, serif;
    letter-spacing: .08em; white-space: normal; text-align: center;
    line-height: 1.4;
  }
  #screen-game .mcol-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
  #screen-game .hud-chip {
    max-width: 100%; min-width: 0;
    flex: 1 1 auto; flex-wrap: wrap; white-space: normal;
    padding: 7px 6px; font-size: 14px; overflow-wrap: anywhere;
  }
  #screen-game .chip-lab { font-size: 12px; }
  #screen-game .mcol .ts-row {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 8px; min-width: 0; width: 100%;
  }
  #screen-game .mcol .ts-item {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    width: 100%; min-width: 0; gap: 6px;
    padding: 8px 6px; font-size: 14px;
    overflow-wrap: anywhere;
  }
  #screen-game .ts-item .seg { flex-wrap: wrap; max-width: 100%; }
  #screen-game #mcol-territory {
    grid-column: 4; grid-row: 2;
    flex: 0 0 auto; padding: 10px 8px;
    background: rgba(12, 12, 14, .84);
    border: 1px solid #80602b; border-radius: 8px;
    gap: 8px; min-width: 0;
  }
  #screen-game .meters.solo #mcol-territory { display: none; }
  #screen-game #mine-frame { max-width: 100%; }
  #screen-game #mine-board {
    --mini-tile: clamp(6px, calc((var(--rail-width) - 46px) / 14), 16px);
  }
  #screen-game > #game-hint {
    grid-column: 3; grid-row: 2;
    max-width: none; margin: 0; width: 100%;
    padding: 4px 6px; font-size: 14px; line-height: 1.4;
    color: #e3cfaa;
  }
  #screen-game > #boards-area {
    grid-column: 3; grid-row: 2;
    margin: 0; width: 100%; height: 100%; max-width: none;
    min-width: 0; min-height: 0;
    padding: 0 0 6px;
    display: block;
    container-type: size;
  }
  #screen-game .board-panel {
    width: 100%; height: 100%; min-width: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
  }
  #screen-game .board-label { flex: 0 0 auto; line-height: 20px; font-size: 14px; }
  #screen-game .board-panel .board-frame {
    /* Subtract the real label and gap, then fit both available dimensions. */
    width: min(100cqw, calc(100cqh - 52px));
    height: auto; aspect-ratio: 1; flex: 0 0 auto;
    max-width: 100%; max-height: none;
    border-width: clamp(14px, 3cqw, 30px);
    border-image: url('frame-board.webp') 9.58% 8.66% 9.75% 8.74% stretch;
    padding: 0; background: #111; box-shadow: none;
  }
  #screen-game .board-panel .board { min-width: 0; min-height: 0; }
  #screen-game > .tools {
    grid-column: 1 / -1; grid-row: 3;
    position: relative; align-self: stretch; justify-self: center;
    margin: 0; width: min(740px, 100%); max-width: none; height: 100%;
    display: grid; grid-template-columns: 1fr 1fr .72fr;
    gap: 10px; padding: 0;
    background: rgba(15, 13, 11, .96); background-clip: padding-box;
    border: solid transparent; border-width: 19px 42px 15px;
    border-image: url('bar-rail.webp') 38.64% 9.35% 31.82% 9.17% stretch;
    box-shadow: none;
  }
  #screen-game .tools > button,
  #screen-game .tools > button.active {
    width: 100%; height: 100%; min-width: 0; min-height: 44px;
    max-width: none; margin: 0; padding: 6px;
    border: 0; border-radius: 0;
    background: url('slot.webp') center / 100% 100% no-repeat;
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 2px;
    font-size: 14px; box-shadow: none;
  }
  #screen-game .tools > button.active {
    color: #ffe28c;
    filter: brightness(1.25) drop-shadow(0 0 5px #bd891c);
  }
  #screen-game .tools .t-icon { font-size: 22px; line-height: 1; }
  #screen-game button:focus-visible { outline: 2px solid #ffe28c; outline-offset: -3px; }
}

@media (max-width: 899px) {
  #screen-game { overflow-y: auto; overflow-x: hidden; height: 100%; height: 100dvh; }
  #screen-game > .top-bar { order: 0; flex-shrink: 0; }
  #screen-game > .meters { display: contents; }
  #screen-game #mcol-territory {
    order: 1; flex: 0 0 auto; margin: 8px auto 0; padding: 8px;
    width: calc(100% - 16px); max-width: 620px; gap: 4px;
    border: 1px solid #80602b; border-radius: 8px; background: #17130fe8;
  }
  #screen-game .defense-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  #screen-game #mine-frame { justify-self: center; max-width: 100%; }
  #screen-game #mine-board { --mini-tile: clamp(6px, calc((min(100vw, 640px) - 70px) / 28), 10px); }
  #screen-game .opponent-findings .mcol-head { font-size: 10px; white-space: normal; }
  #screen-game .opponent-findings .ts-row { width: 100%; align-items: stretch; gap: 3px; }
  #screen-game .opponent-findings .ts-item { justify-content: space-between; flex-wrap: wrap; gap: 3px; font-size: 10px; }
  #screen-game > #game-hint { order: 2; flex-shrink: 0; margin: 4px auto; }
  #screen-game > #boards-area { order: 3; flex: 0 0 auto; overflow: visible; min-height: auto; padding: 4px; }
  #screen-game #raid-panel {
    order: 4; flex: 0 0 auto; width: calc(100% - 16px); max-width: 620px;
    margin: 8px auto; padding: 10px; gap: 7px;
    border: 1px solid #80602b; border-radius: 8px; background: #17130ff5;
  }
  #screen-game #raid-panel .mcol-head { font-size: 11px; }
  #screen-game #raid-panel .ts-row { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  #screen-game #raid-panel .ts-item { font-size: 11px; padding: 4px; }
  #screen-game #raid-panel .hud-chip { font-size: 12px; padding: 5px; }
  #screen-game .ts-item .seg { flex-wrap: wrap; }
  #screen-game > .tools { order: 5; position: sticky; bottom: 0; z-index: 5; flex-shrink: 0; margin-top: auto; width: 100%; padding-bottom: max(6px, env(safe-area-inset-bottom)); background-color: #211a14; }
}

@media (min-width:900px) and (max-height:650px) {
  #screen-game { --dock-height: 82px; grid-template-rows: 64px minmax(0,1fr) var(--dock-height); gap: 5px 12px; }
  #screen-game .mcol:not(.territory) { gap: 7px; padding-block: 6px; }
  #screen-game > .tools { border-width: 12px 32px 10px; }
}

@media (max-width: 899px) {
  #screen-game {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(210px, 1fr) auto auto;
    gap: 4px; padding-top: env(safe-area-inset-top, 0px);
  }
  #screen-game > .top-bar {
    grid-row: 1; display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; align-items: center;
    padding: 8px 12px; min-height: 50px; width: 100%; margin: 0; gap: 6px;
  }
  #screen-game .top-bar .tb-actions { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; gap: 4px; }
  #screen-game .top-bar .iconbtn { width: 30px; height: 30px; }
  #screen-game .top-bar .dungeon-wordmark { display: block; grid-column: 2; grid-row: 1; width: 100%; height: auto; max-height: 38px; object-fit: contain; }
  #screen-game .top-bar #game-title { grid-column: 1; grid-row: 1; margin: 0; font-size: 9px; line-height: 1.3; padding: 4px 5px; border: 1px solid #94702d; border-radius: 12px; background: #211b13; text-align: center; overflow-wrap: anywhere; }
  #screen-game #mcol-territory { grid-row: 2; margin: 0 auto 8px; padding: 5px 7px; gap: 3px; }
  #screen-game .defense-content { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 7px; }
  #screen-game #mine-board { --mini-tile: clamp(6px, calc((min(100vw, 640px) - 70px) / 32), 9px); }
  #screen-game .opponent-findings { gap: 3px; }
  #screen-game .opponent-findings .ts-row { gap: 2px; }
  #screen-game .opponent-findings .ts-item { padding: 1px 4px; font-size: 9px; }
  #screen-game > #boards-area { grid-row: 3; min-height: 0; height: 100%; padding: 0 6px; container-type: size; }
  #screen-game .board-panel { height: 100%; width: 100%; justify-content: center; gap: 4px; }
  #screen-game .board-heading { flex-basis: 40px; }
  #screen-game .board-heading #game-hint { font-size: 10px; line-height: 12px; }
  #screen-game .board-panel > .board-frame {
    width: min(100cqw, calc(100cqh - 44px)); height: auto; aspect-ratio: 1;
    flex: 0 0 auto; padding: 3px; border-width: 2px; box-sizing: border-box;
  }
  #screen-game .board-panel .board {
    width: 100%; height: 100%; container-type: size;
    grid-template-columns: repeat(var(--cols, 10), 1fr) !important;
    grid-template-rows: repeat(var(--rows, 10), 1fr) !important;
  }
  #screen-game .board-panel .cell { width: auto; height: auto; min-width: 0; min-height: 0; font-size: calc(100cqmin / var(--cols, 10) * .3); }
  #screen-game .board-panel .clue-bomb, #screen-game .board-panel .clue-treasure { font-size: calc(100cqmin / var(--cols, 10) * .27); }
  #screen-game .board-panel .flag-mark { font-size: calc(100cqmin / var(--cols, 10) * .65); }
  #screen-game .board-panel .entrance-mark { font-size: calc(100cqmin / var(--cols, 10) * .5); }
  #screen-game #raid-panel { grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 6px 8px; margin: 0 auto; }
  #screen-game .raid-hud { border-left: 1px solid #635031; padding-left: 8px; gap: 4px; }
  #screen-game #raid-panel .mcol-head { font-size: 9px; white-space: normal; }
  #screen-game #raid-panel .ts-row { flex-direction: column; align-items: stretch; gap: 2px; }
  #screen-game #raid-panel .ts-item { justify-content: space-between; flex-wrap: wrap; font-size: 9px; padding: 2px 4px; }
  #screen-game #raid-panel .hud-chip { font-size: 10px; padding: 3px 4px; max-width: 100%; min-width: 0; flex-wrap: wrap; }
  #screen-game #raid-panel .chip-lab { font-size: 8px; }
  #screen-game .raid-hud .mcol-chips { gap: 3px; }
  #screen-game > .tools { grid-row: 5; position: relative; margin: 0; min-height: 56px; padding-top: 4px; }
  #screen-game > .tools button { min-height: 44px; padding-top: 3px; padding-bottom: 3px; }
}