/* Stacked plaques, a local try (Shaun, 2026-11-12, from a reference shot: "the shape of the plaque changed to this weird
   bigger on top thinner on bottom, bigger photo, better text, and generally professional look" ... the circle "should be
   behind plaque and cards"). A big round portrait centred on the seat, behind the cards and the plaque; the plaque a
   tapered tab, wide at the top, narrow at the bottom, with the name over the stack. Cards stay where they always were.
   Desktop table only. Live for everyone since 2026-11-12 (Shaun: "go"); ?plaque=classic switches back for this browser,
   ?plaque=stacked turns it on again (index.php sets html.plaque-stacked). */

/* Layering: the seat (.player-area / .seat-slot, z-indexed already) is the one stacking context, so inside it the portrait
   (-3) goes under the cards (-2), both go under the tab (-1), and the name, stack and icons sit on top. The plaque row and
   the box stop making their own. */
html.plaque-stacked body.desktop-game-active #table-screen .plaque-row{z-index:auto;will-change:auto}
/* desktop-lounge.css's standing layer (the plaque shade shifting, 2026-11-11) moves up to the whole seat, which is a
   stacking context already, so it no longer splits the portrait from the cards */
html.plaque-stacked body.desktop-game-active #table-screen :is(.player-area,.seat-slot){will-change:opacity}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box{
 isolation:auto;width:200px;min-width:0;padding:0;margin-inline:auto;gap:0;
 flex-direction:column;align-items:stretch;justify-content:center;
 visibility:hidden;
}
/* The old rectangle's fill, edge and shadow are forced by desktop-lounge.css; hiding the box hides only its own paint, and
   everything that makes up the seat is shown again */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box > :is(.p-avatar-wrap,.p-info-text,.p-timer-bar-wrap,.hud-trigger-btn,.notes-trigger-btn,.emote-trigger-btn,.p-badges,.hand-tab){visibility:visible}
html.plaque-stacked body.desktop-game-active #table-screen :is(.player-area,.seat-slot) .card-row{z-index:-2}

/* The tab: drawn under the text, its top edge exactly where the classic plaque's top was (so the cards show the same
   amount above it) and as tall (61px seen), tilted back so it narrows to about 83% at the bottom. The same dark fill and gold edge
   the plaque had. ::after, since ::before is the old turn glow and the folded rule (hidden with the box here); a cosmetic
   frame (style.css .plaque-framed) doesn't show on this shape. */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box::after{
 content:'';visibility:visible;z-index:-1;inset:auto;opacity:1;background-image:none;position:absolute;left:50%;width:152px;margin-left:-76px;top:0;height:77px;box-sizing:border-box;pointer-events:none;
 border:1.5px solid transparent;border-radius:7px 7px 12px 12px;
 background:linear-gradient(180deg,#1b2327 0%,#0b1013 100%) padding-box,
  linear-gradient(160deg,#fff1c4 0%,#e2b85f 20%,#8f6427 46%,#f3d08a 64%,#a87a35 82%,#6b4b1f 100%) border-box;
 transform-origin:50% 0;transform:perspective(130px) rotateX(-20deg);
 box-shadow:0 8px 18px #000a;
}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box.active-turn::after{
 background:linear-gradient(180deg,#232b2c 0%,#0f1415 100%) padding-box,
  linear-gradient(160deg,#fff6d6 0%,#ffe1a1 30%,#d9a948 60%,#ffe9b8 100%) border-box;
 box-shadow:0 0 14px #ffd27a55,0 8px 18px #000a;
}

/* The portrait: 104px, centred on the seat, its bottom 19px behind the top of the tab (Shaun, 2026-11-12: top -85px "feel like this 85 change is good") */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-avatar-wrap{
 position:absolute;left:50%;top:-85px;width:104px;height:104px;margin:0 0 0 -52px;transform:none;z-index:-3;
}

/* Name over stack, each centred in its own half of the 61px tab, with a hairline exactly between them (Shaun,
   2026-11-12: "the name is all the way jammed at the top"). Placed from the centre: seats are 180 or 200 wide. */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-info-text{
 position:relative;align-self:stretch;flex:1;padding:0 calc(50% - 68px);row-gap:0;
 grid-template-rows:30px 31px;align-items:center;justify-items:center;text-align:center;
}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-info-text::before{
 content:'';position:absolute;left:calc(50% - 46px);right:calc(50% - 46px);top:28.5px;height:1px;background:#ffffff1f;pointer-events:none;
}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box :is(.p-name,.p-stack,.p-last-action){justify-content:center;text-align:center;padding:0;border:0;margin:0}
/* the name keeps clear of the corner icons */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-name{box-sizing:border-box;width:100%;padding:0 18px;font:700 15px/18px Inter,system-ui,sans-serif;letter-spacing:.005em;color:#f4f1ea;text-shadow:0 1px 1px #000c}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box :is(.p-stack,.p-last-action){font:800 18px/22px Inter,system-ui,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:0 1px 1px #000c}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-stack{color:#f3cf7e}
/* Even spacing (Shaun: "the bottom text isnt center", then "the text name and amount need to be vertically centered
   between the top/bottom of the plaque and the hr"): each line nudged so its letters sit centred in its half, checked by
   counting pixels on 2x screenshots (about 10px each side of the name, 9 to 10px each side of the amount) */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-name{position:relative;top:0}   /* the name's capitals centred between the tab's top edge and the hairline, measured on 2x screenshots (Shaun, 2026-11-12: "the text name and amount need to be vertically centered between the top/bottom of the plaque and the hr") */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-stack{position:relative;top:0;translate:0 -.35px}   /* the digits centred between the hairline and the tab's bottom edge, measured the same way */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-last-action{position:relative;top:-1px;translate:0 -.4px}   /* FOLD, CHECK, ALL IN: smaller letters, a touch higher to centre the same way */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-last-action{font-size:16px}

/* The turn timer: a bar under the tab's narrow bottom, centred, 120px (Shaun, 2026-11-12: the cards cover most of the
   portrait's ring; "we put the bottom bar back"). desktop-lounge.css hides the bar on desktop and forces its left/right/border
   (for the side-portrait plaque), so: shown again, placed by width plus a margin from its pinned 18px left
   (left + width beats right), its own chrome hidden (visibility) and a plain dark track drawn instead, both ends rounded.
   The fill (.p-timer-bar, driven by table.js) drains over it as before. */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-timer-bar-wrap{
 display:block;visibility:hidden;width:120px;margin-left:calc(50% - 78px);translate:0 2px;clip-path:inset(0 2px 2px 0 round 3px);box-shadow:none;
}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-timer-bar-wrap::before{
 content:'';visibility:visible;position:absolute;inset:0;background:#05080acc;
}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-timer-bar-wrap > .p-timer-bar{visibility:visible;position:relative}
/* the portrait's ring goes (the bar is the clock now); the seconds still count on the portrait */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box .p-turn-ring{display:none}

/* Cards centred over the seat (they were nudged right to clear the side portrait) */
html.plaque-stacked body.desktop-game-active #table-screen .card-row{translate:0 var(--card-align-y,0px)}

/* The tools in the tab's top corners, bare glyphs (Shaun, 2026-11-12: "kill that circle and background around the icons",
   "move those icons to the top left and right corners of the plaque"): notes on the left; the HUD, or your chat/emote button, on the right (Shaun: "mvoe the quote to the right upper corner"); 5px off
   the top edge ("move up like 5px").
   :is(...,#plaque-stacked-hud) counts as an id, so these outrank table-skin.css's two-icon :has() placement. */
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box:is(.player-info-box,#plaque-stacked-hud) :is(.notes-trigger-btn,.hud-trigger-btn,.emote-trigger-btn,#plaque-stacked-hud){top:1px;bottom:auto;right:auto;width:18px;height:18px;background:none;border:0;box-shadow:none;outline:0}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box:is(.player-info-box,#plaque-stacked-hud) :is(.notes-trigger-btn,#plaque-stacked-hud){left:calc(50% - 70px)}
html.plaque-stacked body.desktop-game-active #table-screen .player-info-box:is(.player-info-box,#plaque-stacked-hud) :is(.hud-trigger-btn,.emote-trigger-btn,#plaque-stacked-hud){left:calc(50% + 52px)}

/* Your seat and the 2-seat top seat (.player-area) lined their plaque row up on the text's baseline, which this layout
   moves: laid out as a block instead, like the other seats, they land where the classic plaques do */
html.plaque-stacked body.desktop-game-active #table-screen .player-area .plaque-row{display:flex;justify-content:center}
/* yours then sits 19px higher than the seat beside it; back down to the same line, level with the other bottom seat (Shaun, 2026-11-12: "these seats should be consistent right? lined up with the rail"); your cards follow it, as before */
html.plaque-stacked body.desktop-game-active #table-screen .player-area.self .plaque-row{margin-top:-55px}
/* At 2 to 5 players your seat sat 16px lower than at 6 (classic too), which pushed your hand label into the action buttons
   (Shaun, 2026-11-12, heads-up). Same table, same rail at every size, so the same line as 6-max. */
html.plaque-stacked body.desktop-game-active #table-screen .poker-table:not([data-count="6"]) > .player-area.self .plaque-row{margin-top:-71px}
/* and your cards keep exactly the classic distance to your plaque (the block layout left them 12px higher). A margin, not
   a translate: table.js _alignOppCardRows matches every opponent's cards to yours in layout px, which ignore translates */
html.plaque-stacked body.desktop-game-active #table-screen #me-card-row{margin-top:-125px}

/* No gold trim (Shaun, 2026-11-12: "could we try wtihout the gold trim on the plaque? just to see how it looks", then "i
   like it"): the same dark tab with a faint light edge so it still reads against the rail. The default; ?trim=gold brings
   the gold back for this browser, ?trim=none takes it off again (index.php sets html.plaque-notrim). Your turn: a soft
   warm glow instead of the brighter gold edge. */
html.plaque-stacked.plaque-notrim body.desktop-game-active #table-screen .player-info-box::after{
 background:linear-gradient(180deg,#1b2327 0%,#0b1013 100%) padding-box,
  linear-gradient(180deg,#ffffff26 0%,#ffffff0d 100%) border-box;
}
html.plaque-stacked.plaque-notrim body.desktop-game-active #table-screen .player-info-box.active-turn::after{
 background:linear-gradient(180deg,#232b2c 0%,#0f1415 100%) padding-box,
  linear-gradient(180deg,#ffe1a166 0%,#ffe1a11f 100%) border-box;
 box-shadow:0 0 16px #ffd27a40,0 8px 18px #000a;
}

/* Losing hands at showdown (style.css .sd-loser fades them to half opacity): here the portrait sits right behind the
   cards, so half see-through put the face through them (the sweep, 2026-11-12: Zanobi's and Larry's revealed hands read
   as ghosts over their portraits). Solid instead, darkened and greyed by about as much, so the winner still stands out. */
html.plaque-stacked body.desktop-game-active #table-screen .hole-cards.sd-loser{opacity:1;filter:grayscale(.45) brightness(.55)}