/* Shared entrance. The prompt leaves the dealt hand visible and needs an explicit start. */
.table-scene { position: relative; }
.opening-prompt {
  position: absolute; z-index: 8; top: 25%; left: 50%; transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 28px)); padding: 20px 24px; text-align: center;
}
.opening-prompt h2 { font: 32px/1.1 var(--pop-title); margin: 9px 0; }
.opening-prompt p { font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
.opening-prompt .eyebrow { font-size: 10px; }
.opening-prompt .button { min-width: 190px; }
.table-game .deal-origin { position: absolute; z-index: 5; top: 35%; left: 48%; width: 44px; height: 62px; margin: 0; pointer-events: none; }
.table-game .motion-back { position: fixed; z-index: 7; width: 44px; height: 62px; margin: 0; pointer-events: none; }
.table-game .table-action { margin: 4px 0; }
.table-game .table-action:has(button[hidden]) { display: none; }
.table-game .hand-heading { flex-wrap: wrap; }
.table-game .human-identity { flex: 1 1 160px; }
.table-game .hand-actions { flex-wrap: wrap; }
.table-game [data-visual-card] { position: relative; }
.table-game[data-visual-phase="play"] [data-visual-card],
.table-game[data-visual-phase="collect"] [data-visual-card] { z-index: 4; }
.table-game .opponent.active .avatar { box-shadow: 2px 2px 0 var(--pop-ink); }
.table-game .hand-card:disabled { opacity: 1; }

/* Full-deal trick games retain a readable, wrapping hand and individual scores. */
.game-tute { --hand-card: clamp(58px, 8.8dvh, 88px); }

/* Pocha keeps the prediction next to each score and a compact six-seat playfield. */
.game-pocha { --hand-card: clamp(62px, 9dvh, 92px); }
.game-pocha .table-scene { grid-template-columns: minmax(0, 1fr); }
.game-pocha .controller { min-width: 0; max-width: 1100px; }
.game-pocha .hand { flex-wrap: wrap; gap: 10px 8px; }
.game-pocha .brisca-table { grid-template-columns: 90px minmax(0, 1fr) 190px; }
.game-pocha .brisca-plays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.game-pocha .brisca-plays:not(:has(> :nth-child(5))) { display: flex; flex-wrap: wrap; }
.game-pocha .brisca-play { min-width: 0; }
.game-pocha .brisca-score { min-width: 0; }
.game-pocha .brisca-score small { white-space: nowrap; }
.game-pocha .table-announcement { top: 38%; }
.trick-hand-heading { font-size: 13px; text-align: center; }
@media (max-width: 1000px) {
  .game-pocha .brisca-table { grid-template-columns: 64px minmax(0, 1fr); }
  .game-pocha .brisca-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px 12px; }
  .game-pocha .brisca-scores h3 { display: none; }
  .game-pocha .brisca-score { grid-template-columns: minmax(0, 1fr) auto; }
  .game-pocha .brisca-score > span { grid-column: 1 / -1; }
  .game-pocha .brisca-score + .brisca-score { border: 0; padding-left: 0; }
  .game-pocha .brisca-score small { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 400px) {
  .game-pocha .brisca-scores { gap: 5px 8px; }
  .game-pocha .brisca-plays .brisca-card { width: min(var(--table-card), 100%); }
}
@media (max-width: 700px) {
  .game-pocha .opponents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .game-pocha .opponent { min-width: 0; justify-content: center; }
}
.game-tute .table-scene { grid-template-columns: minmax(0, 1fr); }
.game-tute .controller { min-width: 0; max-width: 1100px; }
.game-tute .hand { flex-wrap: wrap; gap: 10px 8px; }
.game-tute .brisca-score { min-width: 0; }
@media (max-width: 1000px) {
  .game-tute .brisca-table { grid-template-columns: 64px minmax(0, 1fr); }
  .game-tute .brisca-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .game-tute .brisca-scores h3 { display: none; }
  .game-tute .brisca-score { grid-template-columns: minmax(0, 1fr) auto; }
  .game-tute .brisca-score > span { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .game-tute .brisca-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
  .game-tute .brisca-score + .brisca-score { border: 0; padding-left: 0; }
}

/* Sequences keep four suit rows; a large hand uses a compact, wrapping layout. */
.game-cinquillo { --hand-card: clamp(58px, 8.8dvh, 88px); }
.game-cinquillo .controller, .game-mona .controller { max-width: 1100px; }
.game-cinquillo .hand, .game-mona .hand { flex-wrap: wrap; gap: 10px 8px; }
.game-cinquillo .foundations { width: min(100%, 990px); gap: 8px; padding: 12px 0; }
.game-cinquillo .foundation { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
.game-cinquillo .suit-label { font: 18px var(--pop-title); color: var(--pop-paper); }
.game-cinquillo .card-slot { max-width: clamp(32px, 5dvh, 58px); border: 1px solid #fff4d647; background: #315b4729; color: #fff4d6ae; }
.game-cinquillo .card-slot.filled { border: 0; box-shadow: 2px 3px 0 #253e31; }
.game-cinquillo .card-slot.anchor { border-color: var(--pop-yellow); }
.game-cinquillo .slot-suit { opacity: .5; }
.game-cinquillo .card-slot.anchor .slot-rank { color: var(--pop-paper); }

/* Fishing uses the centre of the felt; only the current selection needs controls. */
.game-fishing { --hand-card: clamp(76px, 11dvh, 120px); --stock-card: clamp(60px, 10dvh, 96px); }
.game-fishing .escoba-table {
  display: grid; grid-template-columns: calc(var(--stock-card) + 32px) minmax(0, 1fr);
  align-items: center; justify-content: center; gap: 18px; width: min(100%, 1200px); max-width: none; padding: 0;
}
.game-fishing .escoba-surface { position: relative; display: grid; grid-template-rows: 1fr auto; align-self: stretch; min-width: min(340px, 100%); min-height: 260px; border: 1px solid #fff4d62b; border-radius: 18px; }
.game-fishing .table-card > .card-art { box-shadow: 2px 3px 0 #253e31; }
.game-fishing .escoba-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding-bottom: 3px; }
.game-fishing .escoba-table.drag-target .escoba-surface { border-color: #fff4d647; }
.game-fishing .escoba-table.drag-over .escoba-surface { border-color: var(--pop-yellow); background: #ffffff08; }
.game-escoba #last-move { display: none; }
.game-fishing .table-bottomline { justify-content: end; }
.game-fishing .hand-card.draggable { width: var(--hand-card); }


.table-game .mona-draw-source {
  display: block; width: 100%; padding: 0; border: 0; background: transparent;
  box-shadow: none; color: inherit; opacity: 1; border-radius: 8px;
}
.table-game .mona-draw-source:focus-visible { outline: 2px solid var(--pop-paper); outline-offset: -3px; }

/* Blind draws, revealed pairs and up to nine rivals stay separate. */
.game-mona { --hand-card: clamp(58px, 8dvh, 90px); }
.game-mona .mona-table { color: var(--pop-paper); width: min(100%, 820px); }
.game-mona .mona-meta, .game-mona .mona-out { color: var(--pop-paper); }
.game-mona .mona-layout { margin-top: 10px; gap: 16px; }
.game-mona .mona-layout h3 { font: 22px var(--pop-title); margin-bottom: 10px; }
.game-mona .mona-fan, .game-mona .mona-pair { min-height: 90px; }
.game-mona .mona-pair { font-size: 12px; }
.game-mona .pair-pile { display: inline-block; font-size: 11px; padding: 4px 8px; color: var(--pop-ink); background: var(--pop-paper); border: var(--pop-border); border-radius: 4px; }
.game-mona .mona-card { width: clamp(52px, 9dvh, 80px); }
.game-mona .mona-card .card-art { box-shadow: 2px 3px 0 #253e31; border-radius: 5px; }
.game-mona .mona-discarded { border-left: 1px solid #fff4d647; padding-left: 12px; }
.game-mona .opponents { gap: 4px 16px; }
.game-mona .opponent { flex: 0 1 180px; }
.game-mona .opponents:has(> :nth-child(6)) .mini-hand { display: none; }
@media (min-width: 1001px) {
  .game-mona .opponents:has(> :nth-child(6)) { padding-right: 80px; gap: 4px 8px; }
  .game-mona .opponents:has(> :nth-child(6)) .opponent { flex-basis: 112px; padding-inline: 4px; gap: 6px; }
  .game-mona .opponents:has(> :nth-child(6)) .avatar { width: 30px; height: 32px; }
  .game-mona .opponents:has(> :nth-child(6)) .opponent-detail strong { font-size: 19px; }
  .game-mona .opponents:has(> :nth-child(6)) .cpu-badge { display: none; }
}

@media (max-width: 700px) {
  .opening-prompt { top: 27%; padding: 16px; }
  .opening-prompt h2 { font-size: 28px; }
  .table-game .hand-actions { gap: 7px; }
  .game-cinquillo { --hand-card: clamp(44px, 11vw, 64px); }
  .game-cinquillo .foundations { padding: 8px 0; gap: 7px; }
  .game-cinquillo .foundation { grid-template-columns: 22px minmax(0, 1fr); gap: 5px; }
  .game-cinquillo .card-slots { gap: 3px; }
  .game-cinquillo .card-slot { min-height: 32px; }
  .game-cinquillo .suit-label .suit-art { width: 22px; height: 22px; }
  .game-cinquillo .hand { gap: 8px 5px; }
  .game-mona .hand { gap: 9px; }
  .game-fishing { --hand-card: clamp(66px, 22vw, 100px); --stock-card: 46px; }
  .game-fishing .escoba-table { grid-template-columns: 64px minmax(0, 1fr); gap: 4px; }
  .game-fishing .escoba-surface { min-height: 240px; }
  .game-fishing .escoba-tools { gap: 4px; }
  .game-fishing .escoba-tools .button { padding: 5px 8px; min-height: 44px; font-size: 16px; }
  .game-mona .mona-layout h3 { font-size: 18px; }
  .game-mona .mona-fan, .game-mona .mona-pair { min-height: 84px; }
  .game-mona .mona-card { width: 46px; }
  .game-mona .mona-meta { font-size: 11px; }
  .game-mona .mona-out { margin-top: 8px; }
  .game-mona .opponent, .game-mona .opponents:has(> :nth-child(3)) .opponent { flex: 0 1 calc(33.33% - 8px); }
  .game-mona .opponents { gap: 3px 8px; }
  .game-mona .opponents:has(> :nth-child(6)) .avatar { width: 20px; height: 25px; font-size: 16px; }
  .game-mona .opponents:has(> :nth-child(6)) .opponent-detail strong { font-size: 16px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .game-fishing { --hand-card: 60px; --stock-card: 40px; }
  .game-fishing .escoba-table { grid-template-columns: 56px minmax(0, 1fr); }
  .game-fishing .escoba-surface { min-height: 190px; }
}
@media (min-width: 701px) and (max-height: 500px) {
  .game-cinquillo .table-scene, .game-mona .table-scene { grid-template-columns: minmax(0, 1fr) 270px; }
  .game-cinquillo { --hand-card: 48px; }
  .game-cinquillo .card-slot { max-width: 36px; }
  .game-cinquillo .foundations { padding: 3px 0; gap: 4px; }
  .game-cinquillo .foundation { grid-template-columns: 24px minmax(0, 1fr); gap: 5px; }
  .game-cinquillo .suit-label span { display: none; }
  .game-cinquillo .hand, .game-mona .hand { gap: 7px; }
  .game-mona .mona-layout { margin-top: 5px; }
  .game-mona .mona-fan, .game-mona .mona-pair { min-height: 70px; }
  .game-mona .mona-card { width: 44px; }
  .game-mona .mona-layout h3 { font-size: 18px; margin-bottom: 4px; }
  .game-mona .mona-out { margin-top: 4px; }
  .game-mona .opponent { flex-basis: 90px; }
  .game-fishing { --hand-card: 62px; --stock-card: 46px; }
  .game-fishing .escoba-table { grid-template-columns: 64px minmax(0, 1fr); gap: 6px; }
  .game-fishing .escoba-surface { min-height: 150px; }
  .game-fishing .escoba-tools { min-height: 44px; padding-bottom: 0; }
  .game-fishing .escoba-tools .button { min-height: 40px; padding: 4px 8px; font-size: 16px; }
}

/* The footprint belongs to the table, never to the number of cards on it. */
.game-fishing .escoba-surface { container-type: size; grid-template-rows: minmax(0, 1fr) 40px; height: clamp(300px, 39dvh, 460px); min-height: 0; padding: 12px; }
.game-fishing .escoba-cards { --loose-card: clamp(90px, 28cqw, 130px); position: relative; display: block; min-height: 0; padding: 0; }
.game-fishing .escoba-cards .table-card { position: absolute; width: var(--loose-card); aspect-ratio: 110 / 156; touch-action: none; transition: none; z-index: var(--card-stack, 0); }
.game-fishing .escoba-cards .table-card:not(:disabled) { cursor: grab; }
.game-fishing .escoba-cards .table-card.selected { transform: none; }
.game-fishing .escoba-cards .table-card:focus-visible { z-index: 100; }
.game-fishing .escoba-cards .table-card.moving-card { cursor: grabbing; z-index: 101; }
.game-fishing .hand, .game-brisca .hand { min-height: calc(var(--hand-card) * 156 / 110 + 22px); }
@media (max-width: 700px) {
  .game-fishing .escoba-surface { height: clamp(240px, 37dvh, 350px); padding: 8px; }

}
@media (max-height: 650px) {
  .game-fishing .escoba-surface { height: 196px; padding: 8px; }

}
@media (min-width: 701px) and (max-height: 500px) {
  .game-fishing .escoba-surface { height: 196px; }

}

.game-fishing .escoba-tools { min-height: 40px; padding: 0; }
@media (min-width: 701px) and (max-height: 500px) {
  .game-fishing .table-bottomline { position: absolute; right: 0; top: 0; }
  .game-fishing .escoba-cards { --loose-card: 90px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .game-fishing .escoba-cards { --loose-card: 90px; }
}

/* Ronda keeps match points and the active fall chain visible beside the felt. */
.game-ronda .ronda-notes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; color: var(--pop-paper); font-size: 13px; }
.game-ronda .ronda-chain { flex-basis: 100%; text-align: center; }
.game-ronda .hand-card { width: var(--hand-card); }