/* Keep the entire table, including its header and pile controls, together on wide screens. */
.playing > main {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.playing .consequence-panel {
  width: min(100%, 880px);
  margin-inline: auto;
  justify-self: center;
  text-align: center;
}
.playing .consequence-panel ol { justify-items: center; }
.playing .consequence-panel li {
  max-width: 72ch;
  padding-inline: 10px;
  overflow-wrap: anywhere;
}

/* Keep the map's scroll viewport inside the encounter area, not its content height. */
.playing .route-stage > .dungeon-map {
  align-self: stretch;
  height: 100%;
  overflow: hidden;
  padding-block: 0;
}
.dungeon-map .stack-heading { flex: 0 0 auto; }
.route-stage .stack-heading > small,
.route-stage .stack-heading > span { display: none; }
.map-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}
.map-navigation button {
  min-height: 32px;
  padding: 3px 10px;
  font-size: 14px;
}
.stack-scroll {
  width: 100%;
  min-width: 0;
  flex: 1 1 0;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: #8baaad #102824;
  overflow-anchor: none;
}
.stack-scroll.is-panning, .stack-scroll.is-panning .stack-card { cursor: grabbing; }
.stack-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.stack-layout { margin-block: 12px; }
.stack-card.is-open { box-shadow: 0 0 0 2px #90d25755, 0 4px 12px #0008; }

/* Give the recovered space to the cards and encounter, keeping controls readable. */
.playing .hand-zone {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.playing .hand { grid-row: 1; }
.playing .play-board.choosing-board {
  grid-template-rows: minmax(160px, 1.25fr) auto minmax(140px, .85fr);
}
.playing .middle-rail { padding-block: 3px; gap: 6px; }
.playing .middle-rail .skill {
  height: 48px;
  min-height: 44px;
  padding: 1px 2px;
}
.playing .middle-rail .skill .skill-icon { width: 26px; height: 26px; }
.playing .roll-center .roll-button { min-height: 48px; padding: 4px 8px; gap: 2px; }
.playing .middle-ribbon { position: relative; }
.playing .roll-notice.roll-hint {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  z-index: 10;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  padding: 12px 16px;
  border: 1px solid #ffdb83;
  border-radius: 10px;
  background: #fff0c7;
  color: #102b28;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 6px 24px #0008;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.roll-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - 7px);
  border: 7px solid transparent;
  border-top-color: #fff0c7;
}
.roll-hint-label {
  display: block;
  margin-bottom: 3px;
  color: #6e5118;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.playing .roll-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .playing .roll-notice.roll-hint { transition: none; }
}
.playing .rail-actions { padding: 2px 8px; gap: 4px; }
.playing .rail-actions:empty { display: none; }
.playing .rail-actions button { min-height: 32px; padding: 4px 8px; font-size: 14px; }
.playing .consequence-ribbon { padding: 1px 8px; gap: 8px; }
.playing .effect-ribbon { flex: 1 1 auto; }
.playing .consequence-ribbon:has(.effect-ribbon:empty) { display: none; }
.playing .route-vote-status { font-size: 14px; }
.playing .route-vote-status small { font-size: 12px; }

@media (max-width: 600px) {
  .playing .middle-rail {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    padding: 3px 6px;
    gap: 4px;
  }
  .playing .middle-rail .skill {
    display: flex;
    justify-content: center;
    gap: 3px;
    height: 44px;
  }
  .playing .middle-rail .skill small { width: auto; }
  .playing .middle-rail .skill .skill-icon { width: 20px; height: 20px; }
  .playing .roll-center .roll-button { min-height: 44px; }
  .playing .rail-actions button,
  .playing .deck-piles,
  .map-navigation button { min-height: 44px; }
  .playing .rail-actions { max-height: 110px; overflow-y: auto; }
  .playing .route-ribbon .rail-actions { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .route-ribbon .rail-actions > * { flex-shrink: 0; }
  .route-ribbon .route-vote-status { max-width: 190px; }
  .map-navigation { font-size: 12px; }
}

/* Piles share the hand's size calculation and stay outside its scroll viewport. */
.playing .hand-zone {
  --card-width: 150px;
  --pile-width: calc(var(--card-width) * .75);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(4px, 1vw, 16px);
  align-items: end;
}
.playing .hand { grid-column: 2; min-width: 0; }
.playing .hand-zone .deck-piles {
  grid-row: 1;
  position: relative;
  display: block;
  width: calc(var(--pile-width) + var(--pile-spread));
  height: calc(var(--pile-width) * 1.4 + var(--pile-spread) + 26px);
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  color: var(--paper);
}
.playing .deck-piles:hover { background: transparent; }
.playing .deck-piles:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.playing .pile-draw { grid-column: 1; }
.playing .pile-discard { grid-column: 3; }
.pile-stack { position: absolute; inset: 0 0 26px; display: block; }
.pile-card-layer {
  position: absolute;
  bottom: var(--pile-offset);
  left: var(--pile-offset);
  width: var(--pile-width);
  height: calc(var(--pile-width) * 1.4);
  display: block;
  border-radius: 8px;
  background: #282119;
  box-shadow: -1px 2px 0 #baaa87, 0 4px 8px #0007;
}
.pile-discard .pile-card-layer { left: auto; right: var(--pile-offset); filter: saturate(.65); }
.pile-card-layer .player-card-back,
.card-transfer .player-card-back { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: fill; }
.pile-label { position: absolute; inset: auto 0 0; font-size: clamp(11px, 1.1vw, 15px); line-height: 22px; }
.pile-label b { color: #ffe4a4; }
.pile-empty { display: grid; place-items: center; height: 100%; border: 1px dashed #ffe4a450; border-radius: 8px; color: var(--muted); font-size: 12px; }
.card-in-transit { visibility: hidden; }
.card-transfer { position: fixed; z-index: 1500; pointer-events: none; transform-origin: center; }
.card-transfer > .card-face { width: 100%; height: 100%; }
.card-transfer > .player-card-back { position: absolute; inset: 0; }
.market-inventory .market-owned { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; height: 100%; }