/* v223e: Shithead / President / Hearts tables in the canvas language of the Yaniv & Durak tables. Visual only - everything here is scoped to #table-root[data-game=...] */ #table-root[data-game="shithead"]{--ke1:#F59A3A;--ke2:#EE8417;--ke3:#A85A0A} #table-root[data-game="president"]{--ke1:#8A5CDB;--ke2:#6E3FC4;--ke3:#4A2590} #table-root[data-game="hearts"]{--ke1:#D6345E;--ke2:#B8173F;--ke3:#7E0C29} /* dock: the main move is the big red canvas button (as "זריקה"), the second one wears the game's colour (as Durak's "לקחת") */ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .dock .hand-actions>.btn.btn-primary.btn-primary{flex:1.5 1 0!important;position:relative;font-size:18px;font-weight:900;background:linear-gradient(180deg,#F04D4F,#E5383B)!important;color:#fff!important;border:0!important;box-shadow:0 4px 0 #B3232A,0 10px 18px -6px rgba(179,35,42,.5)!important} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .dock .hand-actions>.btn.btn-primary::after{content:"";position:absolute;inset:4px;border-radius:10px;border:1.5px dashed rgba(255,255,255,.4);pointer-events:none} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .dock .hand-actions>.btn.btn-primary:disabled{opacity:.55;box-shadow:0 3px 0 #B3232A!important} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .dock .hand-actions>.btn.btn-navy:not(.btn-primary):not(.yaniv-call):not(.slap-btn):not(.z1){flex:1 1 0!important;font-size:16px;font-weight:900;white-space:normal!important;line-height:1.1!important;overflow-wrap:normal;word-break:normal;padding:0 8px!important;background:linear-gradient(180deg,var(--ke1),var(--ke2))!important;color:#fff!important;border:0!important;box-shadow:0 4px 0 var(--ke3),0 12px 22px -8px rgba(0,0,0,.45)!important} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .dock .hand-actions>.btn svg{width:20px;height:20px;flex:none;vertical-align:-4px} /* v223t seat rail: the canvas seat (deck-f.css); a seat tag (ניצל / העביר / 😱 המלכה / a role) is a small chip UNDER the name, never on it */ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .rail .opp:has(.ochip) .oname{margin-top:0} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .rail .opp .obadge.ochip{position:static;transform:none;margin:0;max-width:100%;white-space:normal;text-align:center;line-height:1.15;font-size:11px;padding:1px 6px} /* Shithead, 6 players: the three table cards under each seat stay inside the seat */ #table-root[data-game="shithead"] .rail.six .sh-mini{gap:1px} #table-root[data-game="shithead"] .rail.six .sh-mini-slot{width:21px;height:30px} #table-root[data-game="shithead"] .rail.six .sh-mini-slot .pc.xs{width:20px;height:29px} #table-root[data-game="shithead"] .rail.six .sh-mini-slot .pc.xs .corner.tl .rank-lg{font-size:12px} /* Shithead: the card to beat as a gold chip under the pile */ #table-root[data-game="shithead"] .pile-col .deck-label.ke-need{margin-top:4px;background:linear-gradient(180deg,#F6CF68,#E9B949);color:#3D2A00;font-weight:800;box-shadow:inset 0 0 0 1px #FFFDF9,0 2px 0 #B6861B} html.pv-night #table-root[data-game="shithead"] .pile-col .deck-label.ke-need{background:linear-gradient(180deg,#E9C35E,#D4A73F)} /* Hearts: the pass direction as a canvas arrow chip; the trick winner as a gold chip */ #table-root[data-game="hearts"] .h-center .h-dir{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:0;background:linear-gradient(180deg,#F6CF68,#E9B949);color:#3D2A00;box-shadow:inset 0 0 0 2px #FFFDF9,0 4px 0 #B6861B,0 10px 18px -6px rgba(0,0,0,.45)} #table-root[data-game="hearts"] .h-center .h-dir svg,#table-root[data-game="hearts"] .ke-arw svg{width:28px;height:28px} #table-root[data-game="hearts"] .ke-arw[data-d="-1"] svg,#table-root[data-game="hearts"] .h-dir[data-d="-1"] svg{transform:scaleX(-1)} #table-root[data-game="hearts"] .ke-arw[data-d="2"] svg,#table-root[data-game="hearts"] .h-dir[data-d="2"] svg{transform:rotate(90deg)} #table-root[data-game="hearts"] .ke-arw{display:inline-flex;vertical-align:middle} #table-root[data-game="hearts"] .ke-arw svg{width:20px;height:20px} #table-root[data-game="hearts"] .h-center span:last-child:not(.h-dir){margin-top:6px;font-size:13px;font-weight:800;color:rgba(255,255,255,.9);background:rgba(0,0,0,.25);border-radius:8px;padding:3px 10px;line-height:1.35} #table-root[data-game="hearts"] .h-winlbl{background:linear-gradient(180deg,#F6CF68,#E9B949)!important;color:#3D2A00!important;font-size:13px;font-weight:900;padding:4px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #FFFDF9,0 3px 0 #B6861B,0 8px 16px -6px rgba(0,0,0,.45);white-space:nowrap} /* President: the exchange ceremony as a canvas panel */ #table-root[data-game="president"] .exch-panel{background:rgba(6,26,17,.55);border:0;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 24px -12px rgba(0,0,0,.5);color:#fff} #table-root[data-game="president"] .exch-title{color:#F2D27A;font-size:15px} #table-root[data-game="president"] .exch-line{color:rgba(255,255,255,.88);font-size:13px;line-height:1.45} #table-root[data-game="president"] .exch-line b{color:#F6CF68} #table-root[data-game="president"] .exch-line.waiting{color:rgba(255,255,255,.65)} /* evening (html.pv-night): the felt stays green; chips get a softer gold */ html.pv-night #table-root[data-game="hearts"] .h-center .h-dir,html.pv-night #table-root[data-game="hearts"] .h-winlbl{background:linear-gradient(180deg,#E9C35E,#D4A73F)!important} html.pv-night #table-root[data-game="president"] .exch-panel{background:rgba(4,18,12,.62)} /* top bar: the canvas subtitle ("N שחקנים · ...") may take a third line on narrow phones instead of being cut */ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .game-top .sub{-webkit-line-clamp:3} /* board message on a shrunk board counter-scales, like the pile labels (stays >= 10.5px on screen) */ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="durak"]) .felt .board .board-msg{font-size:max(13px,calc(10.5px / var(--bsc,1)))} /* Hearts: arrow and receiver side by side - lower, so it clears the turn banner on short phones */ #table-root[data-game="hearts"] .h-center{flex-direction:row;gap:8px;top:42%} #table-root[data-game="hearts"] .h-center span:last-child:not(.h-dir){margin-top:0;white-space:nowrap} @media (max-height:700px){ #table-root[data-game="hearts"] .h-center .h-dir{width:40px;height:40px} #table-root[data-game="hearts"] .h-center .h-dir svg{width:22px;height:22px} #table-root[data-game="hearts"] .h-center{top:34%} /* Shithead on short phones: the seat persona line gives its room to the table cards under the seats */ #table-root[data-game="shithead"] .rail .opers{display:none} #table-root[data-game="shithead"] .rail .sh-mini-slot{width:21px;height:30px} #table-root[data-game="shithead"] .rail .sh-mini-slot .pc.xs{width:20px;height:29px} #table-root[data-game="shithead"] .rail .sh-mini-slot .pc.xs .corner.tl .rank-lg{font-size:12px} } /* ---- v223e2: layout fixes ---- */ /* six seats: the rail shares its width evenly, so every seat (with its table cards) stays on the screen */ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .opps.rail.six{left:2px;right:2px;gap:2px;justify-content:space-between} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .rail.six .opp{flex:1 1 0;width:auto;min-width:0;max-width:72px} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .rail.six .oname{max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;font-size:11px;line-height:1.15;overflow-wrap:normal;word-break:normal} #table-root[data-game="shithead"] .rail.six .sh-mini-slot{width:19px;height:27px} #table-root[data-game="shithead"] .rail.six .sh-mini-slot .pc.xs{width:18px;height:26px} /* my own table cards in my seat (dock) */ #table-root[data-game="shithead"] .me-chips .ke-mytbl{margin:0;margin-inline-end:10px;gap:2px} /* v223t: clear of the dock's rounded corner (the tilted last card looked cut) */ #table-root[data-game="shithead"] .me-chips .ke-mytbl .sh-mini-slot{width:25px;height:34px} #table-root[data-game="shithead"] .me-chips .ke-mytbl .sh-mini-slot .pc.xs{width:24px;height:34px} /* my table cards in place of an empty hand */ #table-root[data-game="shithead"] .myhand>.sh-my-table{margin:auto;align-self:center} /* Shithead on short phones: smaller pile cards (v223t: every caption UNDER its pile - a card never sits on a caption) */ @media (max-height:700px){ #table-root[data-game="shithead"] .board{--pcw:46px;--pch:66px} #table-root[data-game="shithead"] .board .deck-stack{width:50px;height:70px} #table-root[data-game="shithead"] .board .pile{min-height:70px;gap:0} #table-root[data-game="shithead"] .board .discard-pile>.pc:not(.heap-card)+.pc:not(.heap-card){margin-inline-start:-30px!important} #table-root[data-game="shithead"] .board .board-center{gap:16px} /* the opening swap: my table cards a size smaller */ #table-root[data-game="shithead"] .board .sh-slot{width:44px;height:64px} #table-root[data-game="shithead"] .board .sh-slot .pc.sm{width:42px;height:60px} #table-root[data-game="shithead"] .board .sh-my-table{gap:12px} #table-root[data-game="shithead"] .board .pile-col>.deck-label{font-size:max(11.5px,calc(10.5px / var(--bsc,1)));margin-top:4px;padding:2px 8px} } /* Hearts on short phones: smaller trick cards, spread over the whole free felt under the seats (never past it) */ @media (max-height:700px){ #table-root[data-game="hearts"] .h-trick{top:calc(25px - .17 * (100% - 50px) / .6);height:calc((100% - 50px) / .6);min-height:0;width:min(300px,92%)} #table-root[data-game="hearts"] .h-trick:has(.h-center){top:0;height:100%} #table-root[data-game="hearts"] .h-trick .pc.h-card{width:36px;height:50px;margin:-25px 0 0 -18px;border-radius:6px} #table-root[data-game="hearts"] .h-center{top:50%} } /* sort chips: on a narrow phone all four stay on the screen in every language */ @media (max-width:340px){ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .myhand-wrap>.sort-bar{padding:2px 6px 6px !important;gap:4px;justify-content:center} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .sort-btn{padding:2px 7px !important;font-size:11px !important;gap:3px;flex:0 1 auto;min-width:0} } /* the middle of the felt never squeezes its parts (a squeezed board message spilled its text past the felt); fitTable scales the whole instead */ #table-root:is([data-game="shithead"],[data-game="president"]) .felt .board>*{flex-shrink:0} @media (max-height:700px){ #table-root[data-game="president"] .board{--pcw:50px;--pch:72px} #table-root[data-game="president"] .board .pile{min-height:76px} #table-root[data-game="president"] .board .discard-pile>.pc:not(.heap-card)+.pc:not(.heap-card){margin-inline-start:-30px!important} } /* the opening swap on the smallest phones: the banner already says what to do, so the felt keeps only my table cards (the tip would push them into the seats) */ @media (max-height:600px){ #table-root[data-game="shithead"] .felt .board:has(>.sh-my-table)>.board-msg{display:none} } /* the game-coloured second move is dimmed too while it is off (between my turns) */ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .dock .hand-actions>.btn.btn-navy:disabled{opacity:.55;box-shadow:0 3px 0 var(--ke3)!important} /* a big hand in two rows (3 players: 17-18 cards): the hand takes the height it needs (the felt gives it) and the back row shows its index strip, so it never runs up into the turn line */ #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .myhand.rows{height:auto!important;min-height:0!important;padding-top:10px} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .myhand.rows .hand-row+.hand-row{margin-top:calc(36px - var(--pch-sm,74px))} /* v223u: a hand in rows is drawn in the small cards (--pch-sm); with --pch (123px on tall phones) the front row hid the back row and ran up into the turn line */ /* short phones: the seat persona line gives its room to the felt (all three games); President's rule line sits under its pile */ @media (max-height:700px){ #table-root:is([data-game="president"],[data-game="hearts"]) .rail .opers{display:none} /* v223t: the rule hint sits UNDER the pile with a gap (beside it, it crowded the pile / the empty slot) */ #table-root[data-game="president"] .felt .board:has(>.pile){gap:10px} #table-root:is([data-game="shithead"],[data-game="president"],[data-game="hearts"]) .myhand.rows{--pcw:52px;--pch:75px} } /* v223t: a joker among the small table cards (seats, my seat) read as a blank card (5 tiny letters) - it shows the joker mark instead */ #table-root[data-game="shithead"] .sh-mini-slot .pc.xs.joker .joker-corner span{display:none} #table-root[data-game="shithead"] .sh-mini-slot .pc.xs.joker .joker-corner{align-items:center;justify-content:center} #table-root[data-game="shithead"] .sh-mini-slot .pc.xs.joker .joker-corner::before{content:"🃏";font-size:15px;line-height:1} /* v223u: Shithead on the shortest screens (.ke-short: under 600px of height inside the safe areas - 320x568, iPhone 13/mini; set in table.js): the felt was too short for the seats' table cards AND the piles, so the middle slid up under the seats. My hand takes a size smaller cards, six seats a smaller avatar with tighter gaps (same canvas seat: round avatar, red count tag, white name), and the card-to-beat chip sits beside the pile count - the piles then fit under the seats. */ #table-root.ke-short[data-game="shithead"] .myhand{--pcw:54px;--pch:78px;height:98px;min-height:98px;padding-top:12px} #table-root.ke-short[data-game="shithead"] .rail .opp{gap:3px} #table-root.ke-short[data-game="shithead"] .rail .oseat{width:40px;height:40px} #table-root.ke-short[data-game="shithead"] .rail .oseat .oa{width:34px!important;height:34px!important} #table-root.ke-short[data-game="shithead"] .rail .oseat .oa .av-emoji{font-size:19px} #table-root.ke-short[data-game="shithead"] .rail .ocnt{top:12px!important;left:-8px!important;width:17px;height:24px;font-size:10.5px} #table-root.ke-short[data-game="shithead"] .rail .sh-mini-slot{width:19px;height:27px} #table-root.ke-short[data-game="shithead"] .rail .sh-mini-slot .pc.xs{width:18px;height:26px} /* the pile's count and the card-to-beat chip side by side under the pile (stacked, the middle was one line too tall) */ #table-root.ke-short[data-game="shithead"] .board .pile-col:has(>.ke-need){display:grid;grid-template-columns:max-content max-content;justify-content:center;justify-items:center;align-items:center;column-gap:6px;row-gap:0} #table-root.ke-short[data-game="shithead"] .board .pile-col:has(>.ke-need)>.pile{grid-column:1/-1} #table-root.ke-short[data-game="shithead"] .board .pile-col>.deck-label{white-space:nowrap!important;max-width:none;min-width:max-content} /* v223: the count keeps its full width - WebKit 320 squeezed its column and the chip covered "Стопка (2)" (ru) */ #table-root.ke-short[data-game="shithead"] .board .pile-col>.deck-label.ke-need{white-space:normal!important;width:max-content;min-width:0;max-width:calc(124px / var(--bsc,1))} /* a long rule line wraps past ~124px on screen (on one line it ran off a 320 screen) */ /* v223u: President on the shortest screens (.ke-short): the rule line sits BESIDE the pile, not under it - under it, the pile and a three-line rule (ru) were taller than the felt between the seats and the turn line, and the pile slid onto the seat names (4p at 320) */ #table-root.ke-short[data-game="president"] .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="president"] .felt .board>.board-msg{max-width:calc(160px / var(--bsc,1))!important;margin:0}