/* What moves over the table. A card in flight is a copy in a layer of its own (see fx.js): the real card waits
   unseen where the copy will land. */
#fx{position:absolute;inset:0;z-index:6;pointer-events:none}
.fly{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.fly > .card{position:absolute;left:0;top:0;margin:0;will-change:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* a card that turns over in the air has two sides; one that does not is a single flat picture */
.fly > .card.back{transform:rotateY(180deg)}
.fly.flat{transform-style:flat}
.fly.flat > .card{backface-visibility:visible;-webkit-backface-visibility:visible;transform:none}
.inflight{visibility:hidden!important}
.play.landing .ptag{visibility:hidden}
/* said for those who listen to the screen, not shown: the words of a moment (#gSaid) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- the big moments: a word across the table (the trump, Бура, Москва) ----------
   .shout lies exactly over the table; .sh-band is the word with a suit beside it; .sh-cards — cards above the word.
   How it comes and goes is in fx.js (FX.shout); here is how it looks in each of the three looks.
   Tones: plain (the trump), .hot (Бура), .cool (Москва). */
/* The word lies below the middle of the table, under the deck and the trump it speaks of (fx.js finds the place).
   With cards to show (.show) the deal is over: the table dims under them and they take the middle. */
.shout{position:absolute;z-index:2;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;box-sizing:border-box}
.shout.show{justify-content:center}
.sh-dim{position:absolute;inset:0;background:var(--bg-deep);opacity:0}   /* the colour of the table: what lies on it fades, the table does not change */
.sh-band{position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:14px;min-height:66px;box-sizing:border-box;padding:10px 18px}
.sh-words{min-width:0;display:flex;flex-direction:column;gap:2px}
.sh-t{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(21px,6.7vw,28px);line-height:1.08;letter-spacing:var(--track);text-transform:var(--caps);white-space:nowrap;font-feature-settings:"lnum" 1}
.sh-s{font-family:var(--f-body);font-size:13px;font-weight:600;line-height:1.3;text-wrap:balance}
.sh-mark{flex:none;width:46px;height:46px;display:grid;place-items:center}
.sh-mark svg{width:25px;height:25px;fill:currentColor}
.sh-cards{position:relative;flex:none;display:flex;justify-content:center}
.sh-cards .card{--cw:min(15vw,58px);margin:0 -5px}

/* Адрас: a band of cloth with a toothed edge, pulled across the table from side to side */
[data-theme="adras"] .shout{overflow:visible}   /* the band runs from one edge of the screen to the other, over the side borders */
[data-theme="adras"] .sh-band{margin-inline:-24px;padding-inline:34px;background:#F7B92C;color:#15174A;justify-content:flex-start}
[data-theme="adras"] .sh-t{font-size:clamp(19px,5.9vw,25px)}
[data-theme="adras"] .sh-band::before,[data-theme="adras"] .sh-band::after{content:"";position:absolute;left:0;right:0;height:10px}
[data-theme="adras"] .sh-band::before{bottom:100%;background:linear-gradient(45deg,#F7B92C 50%,transparent 50%) 0 0/10px 10px,linear-gradient(-45deg,#F7B92C 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .sh-band::after{top:100%;background:linear-gradient(135deg,#F7B92C 50%,transparent 50%) 0 0/10px 10px,linear-gradient(225deg,#F7B92C 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .sh-mark{background:#FFF4E0;color:#15174A;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:54px;height:54px}
[data-theme="adras"] .sh-mark.red{color:#C4283F}
[data-theme="adras"] .sh-mark svg{width:22px;height:22px}
[data-theme="adras"] .shout.hot .sh-band{background:#C4283F;color:#FFF4E0}
[data-theme="adras"] .shout.hot .sh-band::before{background:linear-gradient(45deg,#C4283F 50%,transparent 50%) 0 0/10px 10px,linear-gradient(-45deg,#C4283F 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .shout.hot .sh-band::after{background:linear-gradient(135deg,#C4283F 50%,transparent 50%) 0 0/10px 10px,linear-gradient(225deg,#C4283F 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .shout.cool .sh-band{background:#1FA39A;color:#0F1038}
[data-theme="adras"] .shout.cool .sh-band::before{background:linear-gradient(45deg,#1FA39A 50%,transparent 50%) 0 0/10px 10px,linear-gradient(-45deg,#1FA39A 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .shout.cool .sh-band::after{background:linear-gradient(135deg,#1FA39A 50%,transparent 50%) 0 0/10px 10px,linear-gradient(225deg,#1FA39A 50%,transparent 50%) 0 0/10px 10px}

/* Ганч: a carved cartouche — two thin lines above and below, a rosette at each end — that opens from its middle.
   The trump is said on a dark panel; Бура on a plate of gold, Москва on a plate of ivory. */
[data-theme="ganch"] .sh-dim{background:#0F1B2D}
[data-theme="ganch"] .sh-band{--plate:#16263D;--rim:#2B3F5C;margin-inline:6px;padding:14px 34px;background:var(--plate);color:#C9A55C;border-block:1px solid currentColor;box-shadow:0 -4px 0 var(--plate),0 -5px 0 var(--rim),0 4px 0 var(--plate),0 5px 0 var(--rim);text-align:center}
[data-theme="ganch"] .sh-band::before,[data-theme="ganch"] .sh-band::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 4.2H19.8V19.8H4.2Z M12 1 23 12 12 23 1 12Z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 4.2H19.8V19.8H4.2Z M12 1 23 12 12 23 1 12Z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="ganch"] .sh-band::before{left:8px}
[data-theme="ganch"] .sh-band::after{right:8px}
[data-theme="ganch"] .sh-words{align-items:center}
[data-theme="ganch"] .sh-t{font-size:clamp(20px,6.2vw,27px);letter-spacing:.05em}
[data-theme="ganch"] .sh-s{color:#B9C4D6;font-weight:400}
[data-theme="ganch"] .sh-mark{width:42px;height:42px;border:1px solid #C9A55C;border-radius:50%;color:#F0E8D9}
[data-theme="ganch"] .sh-mark.red{color:#E0796C}
[data-theme="ganch"] .shout.hot .sh-band{--plate:#C9A55C;--rim:#8A6F36;color:#0F1B2D}
[data-theme="ganch"] .shout.cool .sh-band{--plate:#F0E8D9;--rim:#B9AE99;color:#0F1B2D}
[data-theme="ganch"] .shout.hot .sh-s,[data-theme="ganch"] .shout.cool .sh-s{color:#0F1B2D}
[data-theme="ganch"] .shout.hot .sh-mark,[data-theme="ganch"] .shout.cool .sh-mark{color:#0F1B2D;border-color:#0F1B2D}
[data-theme="ganch"] .shout.hot .sh-mark.red,[data-theme="ganch"] .shout.cool .sh-mark.red{color:#8E2B1F}

/* Топчан: a price tag with a hard shadow, slapped down a little askew; its table is a panel with a border — the dimming stays inside it */
[data-theme="topchan"] .sh-dim{inset:14px 16px;border-radius:13px;background:#FBF4E6}
[data-theme="topchan"] .shout{align-items:center}
[data-theme="topchan"] .sh-band{max-width:calc(100% - 44px);padding:10px 18px 10px 12px;background:#E3A72F;color:#27211C;border:2px solid #27211C;border-radius:14px;box-shadow:5px 5px 0 #27211C}
[data-theme="topchan"] .sh-mark{width:44px;height:44px;box-sizing:border-box;background:#FFFBF2;border:2px solid #27211C;border-radius:50%;color:#27211C}
[data-theme="topchan"] .sh-mark.red{color:#B5341F}
[data-theme="topchan"] .sh-s{white-space:normal}
[data-theme="topchan"] .shout.hot .sh-band{background:#AE3F1A;color:#F5ECDC}
[data-theme="topchan"] .shout.cool .sh-band{background:#1C6B63;color:#F5ECDC}
[data-theme="topchan"] .sh-band.bare{padding-left:18px}   /* no suit beside the words */

/* a short or narrow table: the word takes less of it */
@media (max-height:700px),(max-width:340px){
  .sh-band{min-height:52px;padding-block:7px;gap:10px}
  .sh-s{font-size:12px;line-height:1.25}
  .sh-mark{width:40px;height:40px}
  [data-theme="adras"] .sh-mark{width:44px;height:44px}
  [data-theme="adras"] .sh-mark svg{width:19px;height:19px}
  [data-theme="adras"] .sh-band{padding-inline:32px}
  [data-theme="ganch"] .sh-band{padding-block:9px}
  [data-theme="ganch"] .sh-mark,[data-theme="topchan"] .sh-mark{width:38px;height:38px}
  .sh-cards .card{--cw:min(14vw,52px)}
}
@media (max-height:700px){[data-theme="topchan"] .sh-dim{inset:10px 12px}}
@media (max-width:340px){
  [data-theme="adras"] .sh-t{font-size:18px}
  [data-theme="ganch"] .sh-t{font-size:19px}
  [data-theme="topchan"] .sh-t{font-size:20px}
}