/* All-in (梭哈), showdown reveal and chip / pot effects. The 梭哈！ sign and the chips are drawn
   in the 3D scene (scene.js / tablefx.js); here: the winner's hand-name plaque on the felt
   (scene.js handPlaques, in the callout layer) and the banner's winner ribbon and all-in versus
   board (main.js renderBanner). */

/* The winning hand's name, just below the board (run it twice: one per board). */
.sdplaque { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 8px; max-width: calc(100vw - 24px); padding: 3px 16px 5px;
  background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink), var(--cel);
  font: 900 26px/1.15 var(--display); white-space: nowrap; will-change: transform; animation: sdpop .38s cubic-bezier(.3, 1.7, .5, 1) both; }
.sdplaque small { flex: none; font-size: 15px; opacity: .75; }
.sdplaque b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sdplaque.big { background: var(--pink); color: var(--paper); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.sdplaque.big small { -webkit-text-stroke: 3px var(--ink); opacity: 1; }
@keyframes sdpop { from { scale: .3; opacity: 0; } }

/* One line: trophy, then "Name +amount" for at most two winners, "+n" for the rest. */
#banner .win.sd { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; padding: 4px 14px; max-width: calc(100vw - 76px); white-space: nowrap; }
#banner .win.sd > .ic.lg { width: 26px; height: 26px; vertical-align: 0; }
#banner .win.sd .sdw { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
#banner .win.sd .sdw b { min-width: 0; max-width: 8em; overflow: hidden; text-overflow: ellipsis; font-weight: 900; }
#banner .win.sd .sdw i { font-style: normal; color: var(--yellow); }
#banner .win.sd .sdw + .sdw::before { content: '·'; margin-right: 3px; }
#banner .win.sd .sdmore { font-size: .8em; }

/* All-in and locked: the versus board. One sticker bar per tabled hand (mini cards, name, live
   win %), filled in proportion to that chance; the leader's bar is gold, mine has a pink rim. */
#banner .sdeq { display: flex; flex-direction: column; gap: 5px; width: min(330px, calc(100vw - 24px)); }
#banner .sdeq .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 10px 3px 4px;
  border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); color: var(--ink); font: 900 15px/1.2 var(--display);
  background: linear-gradient(90deg, var(--grey) calc(var(--p) * 100%), var(--paper) 0); }
#banner .sdeq .row.lead { background: linear-gradient(90deg, var(--yellow) calc(var(--p) * 100%), var(--paper) 0); }
#banner .sdeq .row.me { border-color: var(--pink); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 1.5px var(--pink); }
#banner .sdeq .mc { display: flex; gap: 3px; }
#banner .sdeq .mc i { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 3px; font: 900 14px/1 var(--display); font-style: normal; letter-spacing: -.5px;
  background: #fff; border: 2px solid var(--ink); border-radius: 6px; }
#banner .sdeq b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#banner .sdeq .pct { font-size: 20px; letter-spacing: -.5px; white-space: nowrap; }

@media (max-width: 440px) {
  .sdplaque { font-size: 21px; padding: 2px 12px 4px; border-radius: 12px; }
  .sdplaque small { font-size: 13px; }
  #banner .win.sd { font-size: 14px; padding: 3px 10px; gap: 6px; -webkit-text-stroke-width: 2.5px; }
  #banner .win.sd > .ic.lg { width: 21px; height: 21px; }
  #banner .win.sd .sdw b { max-width: 5.5em; }
  #banner .sdeq .row { font-size: 14px; gap: 6px; }
  #banner .sdeq .pct { font-size: 18px; }
}
/* landscape phones: the banner rides in the top bar (style.css), so the bars stand side by side and
   short: the mini cards and the live %, no name (the plates carry it, my bar keeps its pink rim);
   the winner ribbon shrinks into the room left, the names first */
@media (max-height: 500px) {
  #banner .sdeq { flex-flow: row wrap; justify-content: center; gap: 4px 6px; width: auto; max-width: 100%; }
  #banner .sdeq .row { grid-template-columns: auto auto; gap: 6px; padding: 1px 9px 1px 3px; border-radius: 10px; }
  #banner .sdeq b { display: none; }
  #banner .sdeq .mc i { height: 24px; min-width: 25px; font-size: 13px; }
  #banner .sdeq .pct { font-size: 17px; }
  #banner .win.sd { max-width: calc(100% - 52px); padding: 3px 12px; }
}
/* portrait phones: the versus board hangs over the near felt in first person, level with the folded
   sticker button (style.css "phones", bottom right): the bars keep left of it, so no % hides behind it */
@media (max-width: 480px) and (min-height: 501px) {
  #banner:has(> .sdeq) { left: calc(50% - 33px - var(--safe-r) / 2); }
  #banner .sdeq { width: min(330px, calc(100vw - 86px - var(--safe-l) - var(--safe-r))); }
}
/* short portrait phones (SE, a foldable's outer screen, split view): the bars side by side as in
   landscape (mini cards and %, no name), so three of them do not bury the pot and the board */
@media (max-width: 480px) and (max-height: 700px) and (min-height: 501px) {
  #banner .sdeq { flex-flow: row wrap; justify-content: center; gap: 4px 6px; }
  #banner .sdeq .row { grid-template-columns: auto auto; gap: 6px; padding: 1px 9px 1px 3px; border-radius: 10px; }
  #banner .sdeq b { display: none; }
  #banner .sdeq .mc i { height: 26px; min-width: 26px; font-size: 13px; }
  #banner .sdeq .pct { font-size: 17px; }
}
/* phones: the run-it-twice vote (the centre card) is one short card (title, the seconds in its corner, the two
   buttons; the rule line stays on wide screens) so the board and the tabled hands stay in view */
@media (max-width: 480px), (max-height: 500px) {
  #center .ritcard { position: relative; padding: 10px 12px 12px; }
  #center .ritcard h3 { margin: 0 34px; font-size: 18px; }
  #center .ritcard > p.hint { display: none; }
  #center .ritcard #ritCount { position: absolute; top: 8px; right: 10px; margin: 0; min-width: 28px; padding: 2px 6px; border-radius: 9px;
    background: var(--ink); color: var(--paper); font: 900 13px/1.2 var(--display); }
  #center .ritcard #ritCount:empty { display: none; }
  #center .ritcard .grid2 { margin-top: 8px !important; }
  #center .ritcard .btn { min-height: 44px; }
}
/* upright phones: it hangs under the top bar (over the far side's plates) instead of in the middle,
   so the versus bars over the near felt and the board stay readable while I decide */
@media (max-width: 480px) and (min-height: 501px) {
  #center:has(> .ritcard) { top: calc(var(--hud-top, 60px) + 8px); transform: translateX(-50%); }
}