/* Single owner of action presentation. Table viewport owns available space. */
#poker-table .action-panel { container: poker-actions / inline-size; padding: 10px 16px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
#poker-table .turn-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; margin: 0 0 4px; min-height: 44px; color: var(--color-text-secondary); }
#poker-table .turn-status { min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
#poker-table .turn-line > strong, #poker-table .turn-status > strong { font-size: 11px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
#poker-table .turn-line #command-message { margin: 3px 0 0; font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
#poker-table .turn-line .table-leave { flex: none; min-height: 44px; padding: 5px 10px; font-size: 11px; background: transparent; border-color: color-mix(in srgb,var(--color-danger) 35%,var(--color-border)); color: var(--color-danger); }
/* The card itself is the individual touch/keyboard target. Its eye occupies
   the unused upper-right corner, leaving the rank and traditional suit intact. */
#poker-table button.ultra-card[data-card-reveal] { padding:0; min-height:0; cursor:pointer; }
#poker-table button.ultra-card[data-card-reveal]:disabled { opacity:1; cursor:default; filter:none; }
#poker-table .card-reveal-eye { position:absolute; right:2px; top:3px; width:13px; height:13px; pointer-events:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#poker-table [data-card-state=private][data-reveal-allowed=false] .card-reveal-eye { visibility:hidden; }
#poker-table [data-card-state=voluntary] .card-reveal-eye { color:var(--color-primary); background:var(--color-surface); border-radius:3px; padding:1px; }
#poker-table [data-card-reveal]:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
#poker-table [data-card-reveal]:not(:disabled):hover { box-shadow:0 0 0 2px var(--color-primary); }
#poker-table [data-card-reveal][aria-busy=true] .card-reveal-eye { opacity:.45; }
#poker-table [data-card-reveal][aria-busy=true] { box-shadow:0 0 0 2px var(--color-primary); }
#poker-table [data-card-reveal]:not(:disabled):active { scale:.96; }
@media (prefers-reduced-motion: reduce) { #poker-table [data-card-reveal]:not(:disabled):active { scale:1; } }
/* A confirmed result occupies the same reserved region while no actions exist. */
#poker-table .action-region { display: grid; }
#poker-table .action-region > :is(#hand-result, #action-controls) { grid-area: 1 / 1; width: 100%; }
#poker-table .action-region > #hand-result { align-self: start; }
#poker-table .action-region:has(#hand-result:not([hidden]):not(:empty)) > #action-controls:empty { visibility: hidden; }
/* The two tracks remain reserved when checking, waiting or going all-in.
   Legal actions can change without moving their bottom edge under the pointer. */
#poker-table .action-controls { --sizing-row: 50px; --actions-row: 48px; display: grid; grid-template-rows: minmax(var(--sizing-row),auto) minmax(var(--actions-row),auto); gap: 8px; max-width: 820px; margin-inline: auto; }
#poker-table .action-primary { grid-row: 2; align-self: end; display: flex; gap: 8px; }
#poker-table .action-controls .button { min-width: 0; min-height: 48px; padding: 6px 12px; border: 1px solid var(--action-border,var(--color-border)); border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; box-shadow: inset 0 1px #ffffff18,0 2px 0 #0006; transition: filter 120ms,transform 120ms,box-shadow 120ms; }
#poker-table .action-primary > button { flex: 1 1 0; }
#poker-table .action-fold { background: color-mix(in srgb,var(--color-danger) 18%,var(--color-surface)); color: var(--color-danger); --action-border: color-mix(in srgb,var(--color-danger) 50%,var(--color-border)); }
#poker-table :is(.action-check,.action-call) { background: color-mix(in srgb,var(--color-success) 24%,var(--color-surface)); color: var(--color-text); --action-border: color-mix(in srgb,var(--color-success) 65%,var(--color-border)); }
#poker-table .action-raise { background: var(--color-primary); color: var(--color-ink); --action-border: var(--color-primary); }
#poker-table .action-all-in { background: var(--color-surface-elevated); color: var(--color-warning); --action-border: color-mix(in srgb,var(--color-warning) 40%,var(--color-border)); }
#poker-table .action-amount { font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#poker-table .action-controls button:hover:not(:disabled) { filter: brightness(1.12); }
#poker-table .action-controls button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 4px #0003; }
#poker-table .action-controls button:disabled { opacity: .45; cursor: default; box-shadow: none; }
#poker-table .action-controls :is(button,input):focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
#poker-table .bet-controls { grid-row: 1; display: grid; grid-template-columns: 124px minmax(100px,1fr) auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; }
#poker-table .bet-amount-label { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; color: var(--color-text-secondary); font-size: 9px; }
#poker-table .bet-amount-input { width: 100%; min-width: 0; height: 34px; min-height: 34px; border: 1px solid var(--color-border); border-radius: 6px; padding: 5px 8px; background: var(--color-background); color: var(--color-text); font: 600 16px/1.2 Inter,sans-serif; font-variant-numeric: tabular-nums; }
#poker-table .bet-amount-input[aria-invalid=true] { border-color: var(--color-danger); }
#poker-table .bet-range { grid-column: 2; grid-row: 2; width: 100%; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--color-primary); background: transparent; border: 0; cursor: pointer; }
#poker-table .bet-sizing { grid-column: 2; grid-row: 1; display: flex; gap: 4px; margin: 0; }
#poker-table .bet-preset { flex: 1; min-width: 0; min-height: 28px; padding: 3px 5px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface-elevated); color: var(--color-text-secondary); font: 600 10px/1.2 Inter,sans-serif; white-space: nowrap; cursor: pointer; }
#poker-table .bet-controls .action-all-in { grid-column: 3; grid-row: 1 / 3; min-height: 44px; padding: 6px 12px; font-size: 11px; }
#poker-table .action-controls:empty:after { grid-row: 1 / -1; align-self: center; content: 'As ações aparecem quando chegar sua vez.'; color: var(--color-text-secondary); font-size: 11px; padding-block: 10px; }
#poker-table #command-message:empty { display: none; }
@container poker-actions (max-width: 420px) {
  #poker-table .action-controls { --sizing-row: 85px; --actions-row: 44px; }
  #poker-table .bet-controls { grid-template-columns: 92px minmax(30px,1fr) auto; gap: 5px 8px; }
  #poker-table .bet-amount-label { grid-row: 1; }
  #poker-table .bet-range { grid-row: 1; align-self: end; height: 34px; }
  #poker-table .bet-controls .action-all-in { grid-row: 1; align-self: end; min-height: 44px; }
  #poker-table .bet-sizing { grid-row: 2; grid-column: 1 / -1; }
  #poker-table .bet-preset { min-height: 32px; }
  #poker-table .action-controls .action-primary .button { min-height: 44px; padding-inline: 4px; font-size: 12px; }
  #poker-table .action-primary { gap: 5px; }
  #poker-table .action-amount { font-size: 11px; }
}
@container poker-actions (max-width: 250px) {
  #poker-table .action-controls { --actions-row: 93px; }
  #poker-table .action-primary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  #poker-table .action-primary .action-raise { grid-column: 1 / -1; }
  #poker-table .turn-line { flex-direction: column; align-items: stretch; gap: 4px; }
  #poker-table .turn-line > strong, #poker-table .turn-status > strong { font-size: 10px; }
  #poker-table .turn-line .table-leave { width: 100%; padding: 6px; }
  #poker-table .bet-controls { grid-template-columns: minmax(0,1fr) auto; }
  #poker-table .bet-controls .action-all-in { grid-column: 2; }
  #poker-table .bet-range { display: none; }
}
@media (max-width: 720px) { #poker-table .action-panel { padding: 6px 8px; } #poker-table .turn-line { margin-bottom: 5px; } }
@media (prefers-reduced-motion: reduce) { #poker-table .action-controls button { transition: none; } }
#poker-table[data-motion=off] .action-controls button { transition: none; }