/* v223f: War / Rummy / Solitaire in the canvas table language (as Yaniv / Durak). Everything is scoped by game. */

/* ---- labels on the felt: canvas chips, wrapping only between words ---- */
#table-root:is([data-game="war"],[data-game="rummy"],[data-game="solitaire"]) .deck-label{font-size:max(12px,calc(11px / var(--bsc,1)));overflow-wrap:normal;word-break:normal;font-weight:700;color:#F6EEE2;
  background:rgba(6,26,17,.42);border-radius:10px;padding:4px 12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#table-root:is([data-game="war"],[data-game="rummy"]) .board-msg{overflow-wrap:normal;word-break:normal}
#table-root[data-game="rummy"] .felt .board .board-msg{font-size:max(13px,calc(11px / var(--bsc,1)))}   /* readable on the shrunk board */

/* ---- the big dock buttons (shared look: solid fill, 3D lip, dashed inner line) ---- */
#table-root[data-game="war"] .dock .hand-actions>.btn.kd-f-go.kd-f-go.kd-f-go,
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-meld.kd-f-meld.kd-f-meld,
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-dis.kd-f-dis.kd-f-dis,
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn-primary.btn-primary.btn-primary,
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn-navy.btn-navy.btn-navy{position:relative;color:#fff!important;border:0!important;font-weight:900}
#table-root[data-game="war"] .dock .hand-actions>.btn.kd-f-go.kd-f-go.kd-f-go::after,
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-meld.kd-f-meld.kd-f-meld::after,
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-dis.kd-f-dis.kd-f-dis::after,
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn-primary.btn-primary.btn-primary::after,
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn-navy.btn-navy.btn-navy::after{content:"";position:absolute;inset:4px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.4);pointer-events:none}
#table-root:is([data-game="war"],[data-game="rummy"],[data-game="solitaire"]) .dock .hand-actions>.btn:disabled,
#table-root:is([data-game="war"],[data-game="rummy"],[data-game="solitaire"]) .dock .hand-actions>.btn.off{opacity:.55}

/* =========================== WAR =========================== */
#table-root[data-game="war"] .war-vs{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1;opacity:1;
  background:radial-gradient(circle at 50% 35%,#1F7049,#0D3A26);box-shadow:inset 0 0 0 2px #F2D27A,inset 0 0 0 4px rgba(13,58,38,.9),0 3px 0 rgba(0,0,0,.28)}
/* my deck sits in the flow under the battle (absolute, it covered the labels on short phones) */
#table-root[data-game="war"] .war-deck{position:relative;left:auto;bottom:auto;transform:none;margin:4px 0 0}
#table-root[data-game="war"] .war-slot .pc-empty{border:2px dashed rgba(242,210,122,.55)!important;background:rgba(8,40,26,.35)!important;border-radius:9px}
#table-root[data-game="war"] .war-stack.tappable{border-radius:10px;box-shadow:0 0 0 3px rgba(242,210,122,.75),0 0 18px rgba(242,210,122,.45)}
/* v223f3: the canvas primary (.btn.p: solid red, white text) while I can flip; the canvas disabled button otherwise */
#table-root[data-game="war"] .dock .hand-actions>.btn.kd-f-go.kd-f-go.kd-f-go{flex:1 1 0;font-size:18px;
  background:linear-gradient(180deg,#F04D4F,#E5383B)!important;box-shadow:0 4px 0 #B3232A,0 12px 22px -8px rgba(179,35,42,.45)!important}
#table-root[data-game="war"] .dock .hand-actions>.btn.kd-f-go.kd-f-go.kd-f-go::after{border:1px dashed rgba(255,255,255,.3)}
#table-root[data-game="war"] .dock .hand-actions>.btn.kd-f-go.kd-f-go.kd-f-go:is(.off,:disabled){opacity:1;color:rgba(255,255,255,.6)!important;
  background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important}
#table-root[data-game="war"] .dock .hand-actions>.btn.kd-f-go.kd-f-go.kd-f-go:is(.off,:disabled)::after{border-color:rgba(255,255,255,.16)}

/* =========================== RUMMY =========================== */
#table-root[data-game="rummy"] .melds{gap:8px;padding:6px 4px}
#table-root[data-game="rummy"] .meld{background:rgba(6,26,17,.34);border:1.5px dashed rgba(242,210,122,.38);border-radius:12px;padding:6px;box-shadow:inset 0 2px 8px rgba(0,0,0,.2)}
#table-root[data-game="rummy"] .meld.pulse{border:2px solid #F2D27A;box-shadow:0 0 0 3px rgba(242,210,122,.25),0 0 16px rgba(242,210,122,.45)}
#table-root[data-game="rummy"] .deck-stack.tappable,#table-root[data-game="rummy"] .pile .pc.playable{border-radius:10px}
/* lay down = the game's green, discard & end = the red throw button, add to a meld = the dashed secondary */
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-meld.kd-f-meld.kd-f-meld{
  background:linear-gradient(180deg,#2AA45E,#1E8A4B)!important;box-shadow:0 4px 0 #136536,0 12px 22px -8px rgba(19,101,54,.55)!important}
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-dis.kd-f-dis.kd-f-dis{
  background:linear-gradient(180deg,#F04D4F,#E5383B)!important;box-shadow:0 4px 0 #B3232A,0 12px 22px -8px rgba(179,35,42,.5)!important}
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-lay.kd-f-lay.kd-f-lay{background:rgba(0,0,0,.18)!important;color:#fff!important;border:1.5px dashed rgba(255,255,255,.4)!important;box-shadow:none!important}
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-lay.kd-f-lay.kd-f-lay:not(:disabled){background:linear-gradient(180deg,#F6CF68,#E9B949)!important;color:#3D2A00!important;border:0!important;box-shadow:0 4px 0 #B6861B!important}
/* the dock buttons share the row and wrap only between words: the longest word sets each button's narrowest width
   (fitBtns in table.js drops the markup's "two" class, so every rule here is on the button itself) */
#table-root[data-game="rummy"] .dock .hand-actions>.btn.btn.btn{flex:1 1 0!important;min-width:min-content!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  line-height:1.1!important;font-size:14px!important;padding:0 6px!important;overflow-wrap:normal;word-break:normal;hyphens:none}
#table-root[data-game="rummy"] .dock .hand-actions>.btn.kd-f-lay.kd-f-lay{flex-grow:1.4!important}
/* v223t: on narrow phones the three moves share the row evenly, so the longest label (ru "Сбросить и закончить") keeps to 2 lines */
@media (max-width:380px){ #table-root[data-game="rummy"] .dock .hand-actions>.btn.btn.btn{font-size:13px!important;padding:0 5px!important;flex-grow:1!important} }
@media (max-width:340px){ #table-root[data-game="rummy"] .dock .hand-actions{gap:5px} #table-root[data-game="rummy"] .dock .hand-actions>.btn.btn.btn{font-size:11.5px!important;padding:0 3px!important} }
/* short screens: the melds are one row that scrolls sideways, so the middle of the table keeps one height
   (two wrapped rows pushed it into the seats above: fitTable could not shrink it enough) */
@media (max-height:780px){
  #table-root[data-game="rummy"] .felt .board{flex-direction:row;gap:18px;padding-inline:22px}   /* v223f3: 18px - the heap's tilted cards stick out ~8px */
  #table-root[data-game="rummy"] .felt .board>.board-center{flex:none;gap:10px}
  #table-root[data-game="rummy"] .felt .board>.board-msg{flex:1 1 0;min-width:min-content;max-width:none}
  #table-root[data-game="rummy"] .melds{flex:0 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:none;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #table-root[data-game="rummy"] .melds::-webkit-scrollbar{display:none}
  #table-root[data-game="rummy"] .melds>.meld{flex:none}
  /* v223f3: inset by the width of a soft edge, so a strip that fits shows whole cards and one that scrolls fades out
     at its ends instead of cutting a card at the felt's edge; the meld's cards overlap a little more (index still shows) */
  #table-root[data-game="rummy"] .melds{padding-inline:12px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
  #table-root[data-game="rummy"] .melds .meld>.pc+.pc{margin-inline-start:-30px}
  #table-root[data-game="rummy"] .melds>.meld:first-child{margin-inline-start:auto}
  #table-root[data-game="rummy"] .melds>.meld:last-child{margin-inline-end:auto}
}
/* the smallest phones (iPhone SE 1st gen): the pile chips sit on the cards' lower edge so the row fits under the seats */
@media (max-height:600px){
  /* "choose 3+ cards and press lay down" repeats the turn banner right under the felt; no room for it here */
  #table-root[data-game="rummy"] .felt .board>.board-msg{display:none} }

/* =========================== SOLITAIRE =========================== */
/* no rail: the table rim frames the whole felt, the cards sit inside it */
#table-root[data-game="solitaire"] .felt::before{top:4px;left:4px;right:4px;bottom:4px;border-radius:26px}
#table-root[data-game="solitaire"] .board .sol{inset:10px 9px 8px}
#table-root[data-game="solitaire"] .sol-top{padding-bottom:20px;margin-bottom:-2px;border-bottom:1px solid rgba(242,210,122,.16)}
#table-root[data-game="solitaire"] .sol-empty{border:2px dashed rgba(242,210,122,.45);background:rgba(8,40,26,.32);color:rgba(242,210,122,.6);border-radius:8px;box-sizing:border-box}
#table-root[data-game="solitaire"] .sol-fe.red{color:rgba(255,150,150,.7)}
#table-root[data-game="solitaire"] .sol-king{font-weight:900}
#table-root[data-game="solitaire"] .sol-recycle{border:2px solid rgba(242,210,122,.55);background:rgba(8,40,26,.32);color:#F2D27A;border-radius:8px}
#table-root[data-game="solitaire"] .sol-cnt{bottom:-19px;min-width:18px;height:17px;line-height:17px;padding:0 5px;border-radius:9px;text-align:center;
  background:#FFFDF9;color:#231F1A;font-size:11px;font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.28)}
#table-root[data-game="solitaire"] .sol .pc.sol-sel{box-shadow:0 0 0 3px #F2D27A,0 0 14px rgba(242,210,122,.7)}
/* to the foundation = the game's teal, auto-finish = the red primary, undo / end = the dashed secondary */
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn-navy.btn-navy.btn-navy{
  background:linear-gradient(180deg,#1AA39B,#12857F)!important;box-shadow:0 4px 0 #0B5F5A,0 12px 22px -8px rgba(11,95,90,.55)!important}
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn-primary.btn-primary.btn-primary{
  background:linear-gradient(180deg,#F04D4F,#E5383B)!important;box-shadow:0 4px 0 #B3232A,0 12px 22px -8px rgba(179,35,42,.5)!important}
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn-ghost.btn-ghost.btn-ghost{background:rgba(0,0,0,.18)!important;color:#fff!important;border:1.5px dashed rgba(255,255,255,.4)!important;box-shadow:none!important}
#table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn{flex:1 1 0!important;min-width:min-content!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.1!important;font-size:15px!important;padding:0 8px!important;overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:380px){ #table-root[data-game="solitaire"] .dock .hand-actions>.btn.btn{font-size:14px!important;padding:0 6px!important} }

/* =========================== evening =========================== */
html.pv-night #table-root:is([data-game="war"],[data-game="rummy"],[data-game="solitaire"]) .deck-label{background:rgba(0,0,0,.42);color:#F6EEE2;box-shadow:inset 0 0 0 1px rgba(255,236,210,.1)}
html.pv-night #table-root[data-game="war"] .war-vs{background:radial-gradient(circle at 50% 35%,#195A3B,#0A2C1D)}
html.pv-night #table-root[data-game="war"] .war-slot .pc-empty{background:rgba(0,0,0,.3)!important}
html.pv-night #table-root[data-game="rummy"] .meld{background:rgba(0,0,0,.36);border-color:rgba(242,210,122,.32)}
html.pv-night #table-root[data-game="solitaire"] .sol-empty,html.pv-night #table-root[data-game="solitaire"] .sol-recycle{background:rgba(0,0,0,.3)}
html.pv-night #table-root[data-game="solitaire"] .sol-top{border-bottom-color:rgba(242,210,122,.12)}
html.pv-night #table-root:is([data-game="war"],[data-game="rummy"],[data-game="solitaire"]) .dock .hand-actions>.btn:disabled{opacity:.5}

/* =========================== v223f3: the canvas seat (TableYaniv .pod) =========================== */
/* full-colour avatar in its ring, the card count as a small red card tag on the ring, the score bubble on top,
   then the name in white and the rating / persona in light text. No fan of backs (it covered the name).
   Every table that uses the shared seats (v223t: Shithead / President / Hearts too). */
#table-root[data-game] .rail .opp{gap:5px}
#table-root[data-game] .rail .opp .oseat{margin-bottom:0}
#table-root[data-game] .rail .oseat .oa{filter:none;opacity:1;box-shadow:0 0 0 2px #17402D!important}
#table-root[data-game] .rail .opp .ocnt{position:absolute;top:30px;left:4px;right:auto;inset-inline-start:auto;z-index:4;
  width:22px;min-width:0;height:30px;padding:0;border:0;border-radius:4px;background:#C8202F;color:#fff;font:800 12px/1 Rubik,var(--ff,sans-serif);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,253,249,.9),0 2px 0 rgba(0,0,0,.28)}
#table-root[data-game] .rail.six .opp .ocnt{top:24px;left:-2px;width:19px;height:26px;font-size:11px}
/* v223: Durak's attacker / defender chip sits on the avatar's lower edge - the card count moves up to the avatar's top corner so it no longer covers "Defender" */
#table-root[data-game="durak"] .rail .opp .ocnt{top:-4px!important}
#table-root[data-game] .rail .oname{color:#fff!important;background:none!important;border:0!important;padding:0!important}
#table-root[data-game] .rail .oname .opers,
#table-root[data-game] .rail .orate{color:rgba(255,255,255,.72)!important}
/* v223t: six seats share the width - the score bubble stays inside its seat (it hung 4px off the screen edge) */
#table-root[data-game] .rail.six .opp>.osum{right:0}
/* v223f3: every table's speech bubble - the tail points at the speaker (table.js sets --tail when the bubble is pushed in from an edge) */
.chat-bubble::after{left:var(--tail,50%)}
/* v223f3: the sort chips always fit (table.js fitSortBar adds these one by one while the row is too wide) */
#table-root .sort-bar.sb-tight{gap:4px;padding-inline:6px!important}
#table-root .sort-bar.sb-tight .sort-btn{padding:2px 7px!important;gap:3px}
#table-root .sort-bar.sb-noic .sort-btn .sb-ic{display:none!important}
#table-root .sort-bar.sb-wrap{flex-wrap:wrap;row-gap:5px}
#table-root .sort-bar.sb-measure .sort-btn,#table-root .sort-bar.sb-measure .sort-btn *{transition:none!important}   /* v223u: fitSortBar measures the final widths */
/* v223f3: a pile label on a shrunk board keeps its on-screen width (its font already counter-scales), so a long hint
   ("Prends une carte à un bout de la pile") stays two lines instead of three and the middle fits under the seats */
#table-root:is([data-game="war"],[data-game="rummy"],[data-game="yaniv"]) .deck-label{max-width:calc(44vw / var(--bsc,1))}
/* the smallest phones: Yaniv's "take an end card from the pile" hint repeats the turn banner and the glowing pile card;
   without it the middle fits between the seats and my hand (it rose over the seat names in fr / es) */
@media (max-height:600px){ #table-root[data-game="yaniv"] .deck-label.dl-hint{display:none} }
/* v223t: Rummy - the discard heap's tilted cards keep clear of the stock beside it */
#table-root[data-game="rummy"] .board .pile-col:has(>.deck-stack){margin-inline:8px}
/* v223t: Rummy melds on short screens are never a scroll-only strip (its fade cut the end cards): they wrap into rows
   under the piles, in smaller cards that still show each index, and fitTable scales the middle to fit under the seats */
/* v223u: the melds sit BESIDE the piles, in two rows (a grid filled column by column), so the middle stays two meld rows tall
   however many melds there are; the piles a size smaller. Late in the game the piles-over-melds column was too tall for the felt
   and slid up under the seats (fitTable then scales the whole middle to fit, wider instead of taller). */
@media (max-height:780px){
  #table-root[data-game="rummy"] .felt .board:has(>.melds){flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:12px;--pcw:46px;--pch:66px}
  #table-root[data-game="rummy"] .felt .board:has(>.melds)>.board-center{flex:none}
  #table-root[data-game="rummy"] .felt .board:has(>.melds) .deck-stack{width:50px;height:70px}
  #table-root[data-game="rummy"] .felt .board:has(>.melds) .pile{min-height:72px}
  #table-root[data-game="rummy"] .felt .board>.melds{flex:none;width:auto;max-width:none;display:grid;grid-template-rows:auto auto;grid-auto-flow:column;align-items:center;justify-items:center;overflow:visible;gap:6px;padding:2px 0;-webkit-mask-image:none;mask-image:none}
  #table-root[data-game="rummy"] .felt .board>.melds>.meld{padding:4px;border-radius:9px}
  #table-root[data-game="rummy"] .felt .board>.melds>.meld:first-child,#table-root[data-game="rummy"] .felt .board>.melds>.meld:last-child{margin-inline:0}
  #table-root[data-game="rummy"] .felt .board>.melds .meld>.pc{--pcw-sm:36px;--pch-sm:51px;width:36px;height:51px;border-radius:5px}
  #table-root[data-game="rummy"] .felt .board>.melds .meld>.pc+.pc{margin-inline-start:-19px}
  /* the pile labels may take two lines ("Колода" over "(6)") so the piles are as wide as their cards, not their labels:
     with five or more melds at 320 the middle kept the labels' width and dropped under the 0.6 scale floor, over the seats */
  #table-root[data-game="rummy"] .felt .board:has(>.melds)>.board-center .deck-label{white-space:normal;max-width:calc(64px / var(--bsc,1));padding-inline:6px;text-align:center;line-height:1.15}
  #table-root[data-game="rummy"] .felt .board:has(>.melds) .pile-col:has(>.deck-stack){margin-inline:4px}
}
/* v223u: narrow phones (320-380). The Yaniv button's "at 7 or less" line keeps to one line under "Yaniv" (it took two at 360 in ru,
   three lines in all); the button gets the room from the throw button's side padding instead */
@media (max-width:400px){
  #table-root .dock .yaniv-bar>.btn.kd-yv{padding-inline:3px!important;flex-grow:1.5}
  #table-root .dock .yaniv-bar>.btn.kd-yv small{white-space:nowrap}
}
/* Rummy: the three moves keep to two lines each in every language (ru "Сбросить и закончить" took three at 390, 360 and 320) */
@media (max-width:400px){
  #table-root[data-game="rummy"] .dock .hand-actions{gap:6px}
  #table-root[data-game="rummy"] .dock .hand-actions>.btn.btn.btn{font-size:12.5px!important;padding:0 3px!important;flex-grow:1!important}
}
@media (max-width:340px){
  #table-root[data-game="rummy"] .dock .hand-actions{gap:4px}
  #table-root[data-game="rummy"] .dock .hand-actions>.btn.btn.btn{font-size:11.5px!important;padding:0 2px!important}
}
/* v223u: Rummy on the shortest screens (.ke-short, see deck-e.css): the seat persona line and a size of my hand's cards give their room to the felt,
   so a late-game middle (piles + melds) fits under the seats at a readable size */
#table-root.ke-short[data-game="rummy"] .rail .opers{display:none}
#table-root.ke-short[data-game="rummy"] .myhand{--pcw:54px;--pch:78px;height:98px;min-height:98px;padding-top:12px}
/* v223: Durak on the shortest screens (.ke-short: 320x568, iPhone 13/mini). The middle (talon + trump, the battle pairs, the
   "table empty" line) was taller than the felt under the seats: it sat on the seat names or shrank to 0.45-0.6, its words to
   5.6-9.6px. Same moves as Rummy/Shithead: no persona line under the seat names and a size smaller cards in my hand; then a
   smaller talon, the pairs in one row (they scale by width, not by two rows of
   height), and the "table empty" line beside the talon - so the middle fits under the seats at a readable size */
#table-root.ke-short[data-game="durak"] .rail .opers{display:none}
#table-root.ke-short[data-game="durak"] .myhand{--pcw:54px;--pch:78px;height:98px;min-height:98px;padding-top:12px}
#table-root.ke-short[data-game="durak"] .dk-talon{width:88px;height:82px}
#table-root.ke-short[data-game="durak"] .dk-talon .pc.pc-back{width:56px;height:80px}
#table-root.ke-short[data-game="durak"] .dk-talon .dk-trump{top:10px;left:-4px;width:44px;height:62px}
#table-root.ke-short[data-game="durak"] .pile-col.dk-stack{margin-top:0}
#table-root.ke-short[data-game="durak"] .dk-table{flex-wrap:nowrap;max-width:none;min-height:0}
#table-root.ke-short[data-game="durak"] .felt .board:has(>.board-msg){flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px}
#table-root.ke-short[data-game="durak"] .felt .board>.board-msg{max-width:calc(150px / var(--bsc,1))!important;margin:0}

/* v223u: the hint button's 💡 takes its box from an emoji font, not from the Arabic face (Noto Sans Arabic's tall ascent put the
   glyph box past the round button in WebKit ar) */
#table-root .game-top #gt-hint{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Open Sans",sans-serif;line-height:1}
/* v223u: Yaniv button in Arabic. Noto Sans Arabic's text box is about 2.1em tall, so at 18px "يانيف" stood 38px tall in a 46px button
   and its box ran past the button's top (WebKit, max); 16px and a line height nearer that box keep both lines inside */
html[data-lang="ar"] #table-root .dock .yaniv-bar>.btn.kd-yv b{font-size:16px;line-height:1.3}
/* v223: Durak's "table empty - waiting for an attack" line kept its text but the board squeezed its box to 6px (the text hung below it, under the turn line) */
#table-root[data-game="durak"] .felt .board>.board-msg{flex-shrink:0}