/* Trick, stock, trump and scores: Brisca-specific table composition. */
/* Reserve the scoreboard before the seats; its height is independent of scores. */
body[data-screen="game"] .table-game.game-brisca .game:has(> .opponents:not(:empty)):not(:has(> :is(.banking-table, .continental-table, .burro-table, .reloj-table))) {
  --seat-reveal: 68px;
  padding-top: var(--trick-top-clearance, 160px);
}
body[data-screen="game"] .table-game.game-brisca .opponent[data-edge="top"] { top: 64px; }
body[data-screen="game"] .table-game.game-brisca .brisca-table {
  grid-template-columns: minmax(calc(var(--table-card) * 1.9 + 12px), 1fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 1fr);
}
body[data-screen="game"] .table-game.game-brisca .brisca-scores {
  position: absolute; top: 0; left: 50%; right: auto; width: min(calc(100% - 16px), 720px); height: 56px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 6px 10px; transform: translateX(-50%); margin: 0; z-index: 5; grid-area: auto; justify-self: stretch;
}
body[data-screen="game"] .table-game.game-brisca .brisca-scores h3 { display: none; }
body[data-screen="game"] .table-game.game-brisca .brisca-score {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; min-width: 0; padding: 0; align-content: center;
}
body[data-screen="game"] .table-game.game-brisca .brisca-score > span {
  grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-screen="game"] .table-game.game-brisca .brisca-score strong { white-space: nowrap; }
body[data-screen="game"] .table-game.game-brisca .brisca-score small { grid-column: 2; text-align: right; }
body[data-screen="game"] .table-game.game-brisca .brisca-score + .brisca-score { border: 0; border-left: 1px solid #28282040; padding-left: 10px; }
/* Routine event text remains available to assistive technology, including with motion off. */
body[data-screen="game"] .table-game.game-brisca .table-announcement[data-kind="event"] {
  width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
@media (max-width: 700px), (max-height: 500px) {
  body[data-screen="game"] .table-game.game-brisca .game:has(> .opponents:not(:empty)):not(:has(> :is(.banking-table, .continental-table, .burro-table, .reloj-table))) {
    --seat-reveal: 48px; --seat-depth: 48px; padding-top: var(--trick-top-clearance, 136px);
  }
  body[data-screen="game"] .table-game.game-brisca .opponents .mini-hand { --back-width: 28px; }
  body[data-screen="game"] .table-game.game-brisca .opponent:is([data-edge="left"], [data-edge="right"]) { top: calc(var(--seat-position) - 36px); }
  body[data-screen="game"] .table-game.game-brisca .opponent:is([data-edge="left"], [data-edge="right"]) :is(.avatar, .opponent-detail) { top: calc(50% + 27px); bottom: auto; }
  body[data-screen="game"] .table-game.game-brisca .brisca-score > span { grid-column: 1 / -1; }
  body[data-screen="game"] .table-game.game-brisca .brisca-score strong { grid-column: 1; font-size: 18px; }
  body[data-screen="game"] .table-game.game-brisca .brisca-score small { align-self: end; font-size: 10px; }
}
.brisca-table { display: grid; grid-template-columns: minmax(calc(var(--table-card) * 1.9 + 12px), 1fr) minmax(0, 3fr) minmax(155px, 1.2fr); align-items: center; gap: 16px clamp(20px, 3vw, 56px); width: 100%; margin: auto; }
.brisca-scores { padding: 12px; transform: rotate(1deg); }
.brisca-scores h3 { font: 23px var(--pop-title); margin: 0 0 8px; padding-bottom: 7px; border-bottom: 2px solid var(--pop-ink); }
.brisca-score { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0; font-size: 12px; }
.brisca-score + .brisca-score { border-top: 1px solid #28282040; }
.brisca-score > span { grid-column: 1 / -1; }
.brisca-score strong { font: 23px var(--pop-title); }
.brisca-score small { align-self: center; font-size: 11px; }
.brisca-stock { display: flex; flex-direction: column; gap: 10px; align-items: center; font-size: 12px; }
.brisca-trump-suit { display: flex; gap: 4px; align-items: center; }
.brisca-trump-suit .suit-art { width: 25px; height: 25px; }
.brisca-trump-suit strong { font-weight: 400; }
.brisca-card { width: var(--table-card); aspect-ratio: 110 / 156; flex-shrink: 0; border-radius: 5px; }
.brisca-card .card-art { display: block; width: 100%; height: auto; border-radius: inherit; box-shadow: 3px 4px 0 #253e31; }
.brisca-trick { text-align: center; min-width: 0; }
.brisca-trick h3 { font: 21px/1.15 var(--pop-title); margin: 0 0 16px; }
.brisca-plays { display: flex; justify-content: center; gap: clamp(9px, 2vw, 25px); }
.brisca-play { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; }
.brisca-play:nth-child(even) .brisca-card { transform: rotate(3deg); }
.brisca-play:nth-child(odd) .brisca-card { transform: rotate(-3deg); }
.brisca-placeholder { border: 2px dashed #fff4d680; display: grid; place-items: center; color: #fff4d6b3; font-size: 26px; }
.trick-winner > span { color: var(--pop-yellow); text-decoration: underline; text-underline-offset: 3px; }
.trick-winner .brisca-card { outline: 3px solid var(--pop-yellow); outline-offset: 3px; }
.brisca-trick-note { font-size: 12px; line-height: 1.4; margin: 15px auto 0; max-width: 40ch; min-height: 2.8em; }
.showing-winner h3 { color: var(--pop-yellow); }
.showing-winner .brisca-trick-note { color: var(--pop-yellow); font-weight: 700; }
.brisca-play .brisca-card { position: relative; }
.table-game[data-visual-phase="play"] .brisca-play .brisca-card { z-index: 3; }
.table-game[data-visual-phase="collect"] .brisca-play .brisca-card { z-index: 3; }
@media (max-width: 1000px) {
.brisca-table { grid-template-columns: calc(var(--table-card) * 1.9 + 12px) minmax(0, 1fr); }
.brisca-scores { grid-row: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 5px 12px; transform: none; justify-self: center; }
.brisca-scores h3 { margin: 0; padding: 0; border: 0; font-size: 20px; }
.brisca-score { grid-template-columns: auto auto; align-items: center; padding: 0; }
.brisca-score > span { grid-column: auto; }
.brisca-score strong { font-size: 21px; }
.brisca-score small { grid-column: 1 / -1; }
.brisca-score + .brisca-score { border: 0; border-left: 1px solid #28282040; padding-left: 14px; }
}
@media (max-width: 700px) {
.brisca-table { gap: 15px 12px; }
.brisca-scores { gap: 10px; padding: 6px 8px; width: 100%; justify-content: space-between; }
.brisca-scores h3 { display: none; }
.brisca-score { flex: 1; font-size: 11px; gap: 0 3px; }
.brisca-score > span { grid-column: 1 / -1; }
.brisca-score small { grid-column: auto; text-align: right; font-size: 10px; }
.brisca-score + .brisca-score { padding-left: 8px; }
.brisca-stock { font-size: 10px; gap: 9px; align-self: center; }
.brisca-trump-suit { flex-direction: column; gap: 2px; text-align: center; }
.brisca-trump-suit .suit-art { width: 23px; height: 23px; }
.brisca-trick h3 { font-size: 19px; margin-bottom: 10px; }
.brisca-plays { gap: 8px; flex-wrap: wrap; }
.brisca-play { gap: 5px; font-size: 10px; }
.brisca-plays:has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.brisca-plays:has(> :nth-child(4)) .brisca-card { width: min(var(--table-card), 100%); }
.brisca-trick-note { font-size: 11px; margin-top: 10px; }
}
@media (max-width: 700px) and (max-height: 650px) {
.brisca-table { gap: 6px 12px; }
.brisca-scores { padding: 3px 7px; }
.brisca-score strong { font-size: 18px; }
.brisca-stock { gap: 5px; }
.brisca-trump-suit { flex-direction: row; }
.brisca-trump-suit .suit-art { display: none; }
.brisca-trick h3 { font-size: 17px; margin-bottom: 5px; }
.brisca-trick-note { font-size: 10px; margin-top: 7px; }
}
@media (min-width: 701px) and (max-height: 500px) {
.brisca-table { grid-template-columns: calc(var(--table-card) * 1.9 + 12px) minmax(0, 1fr); gap: 7px clamp(12px, 2vw, 24px); }
.brisca-scores { gap: 8px; padding: 3px 8px; width: 100%; justify-content: center; }
.brisca-scores h3 { display: none; }
.brisca-score { grid-template-columns: auto auto auto; font-size: 10px; gap: 4px; }
.brisca-score strong { font-size: 18px; }
.brisca-score small { grid-column: auto; font-size: 9px; }
.brisca-stock { font-size: 10px; gap: 4px; }
.brisca-trump-suit .suit-art { display: none; }
.brisca-trick h3 { font-size: 17px; margin-bottom: 5px; }
.brisca-play { font-size: 10px; gap: 3px; }
.brisca-trick-note { font-size: 10px; margin-top: 6px; min-height: 0; }
}