/* The game table: one layout for 1 на 1 and 2 на 2, drawn three ways. */

.game{--pad:16px;position:relative;z-index:0;gap:10px;min-height:0;overflow:hidden;background:var(--bg-deep);
  padding-block:8px 16px;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}

/* ---------- top bar ---------- */
.gbar{display:flex;align-items:center;gap:2px;min-height:44px}
.gx{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-ctl);background:none;color:var(--text)}
.gx svg{width:24px;height:24px}
.gx.armed{width:auto;padding:0 12px;background:var(--foe);color:var(--on-foe);font-size:13px;font-weight:700;white-space:nowrap}
.gx.armed svg{display:none}
.gx .cnt{position:absolute;top:1px;right:-1px;min-width:18px;height:18px;box-sizing:border-box;padding:0 4px;border-radius:9px;background:var(--foe);color:var(--on-foe);font-size:11px;font-weight:700;display:grid;place-items:center}
.gtitle{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25}
.gtitle b{font-family:var(--f-display);font-weight:var(--w-head);font-size:16px;font-feature-settings:"lnum" 1}
.gtitle small{max-width:100%;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- score: penalty points, or won deals in Классика ---------- */
.board{display:flex;flex-direction:column;gap:6px}
.bcap{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-height:620px){.bcap{display:none}}
.score{display:flex;align-items:center;gap:10px;min-height:18px;font-size:13px}
.score .sl{flex:none;width:6.6em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score .pips{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:center;padding:0 3px}
.pips i{display:block;flex:none;box-sizing:border-box;width:9px;height:9px;border:1.5px solid var(--line-strong)}
.score.mine .pips i.on{background:var(--mine);border-color:var(--mine)}
.score.foe .pips i.on{background:var(--foe);border-color:var(--foe)}
.score .sc{flex:none;min-width:4.4em;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.score .chip{flex:none;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border:1px solid currentColor;border-radius:var(--r-ctl);color:var(--hi)}
.mult{align-self:center;font-size:12px;font-weight:700;padding:2px 10px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-ctl)}
[data-theme="adras"] .pips i{transform:rotate(45deg)}
[data-theme="ganch"] .pips i{width:8px;height:8px;border-width:1px;border-radius:50%}
[data-theme="topchan"] .pips i{width:7px;height:16px;border-color:var(--line);border-radius:2px}
[data-theme="topchan"] .pips i.on{border-color:var(--line-strong)}

/* ---------- arena ---------- */
.arena{flex:1 1 0;min-height:0;position:relative;z-index:0;box-sizing:border-box;display:grid;gap:10px}
.arena.one{--cwt:min(18.5vw,8.4vh,76px);grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.arena.four{grid-template-columns:56px minmax(0,1fr) 56px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:". top ." "left center right"}

.seat{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.seat .ava{width:46px;height:46px;font-size:20px;flex:none}
.sinfo{min-width:0}
.snm{font-family:var(--f-display);font-weight:var(--w-head);font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scnt{font-size:12px;line-height:1.3;color:var(--muted)}
.scnt .ok{color:var(--good);font-weight:700}
.scnt .off{color:var(--bad);font-weight:700}
.scnt svg{display:inline-block;width:.9em;height:.9em;vertical-align:-.08em;fill:currentColor}
.dl{display:inline-block;margin-left:6px;font-family:var(--f-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 5px;border:1px solid var(--hi);border-radius:var(--r-ctl);color:var(--hi);vertical-align:2px}
.sbacks{display:flex;flex:none;margin-left:auto;padding-left:8px}
.sbacks .card{--cw:28px}
.sbacks .card + .card{margin-left:-10px}
.seat.t0 .ava{background:var(--mine);color:var(--on-mine)}
.seat.t1 .ava{background:var(--foe);color:var(--on-foe)}
.seat.turn .snm{color:var(--hi)}
.tbar{height:4px;background:var(--line);overflow:hidden}
.tbar i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left center;animation:tdrain linear both}
@keyframes tdrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.seat .tbar{position:absolute;left:0;right:0;bottom:-7px}

.arena.four .seat{flex-direction:column;gap:4px;text-align:center}
.arena.four .seat .ava{width:42px;height:42px;font-size:18px}
.arena.four .seat .snm{font-size:13px;max-width:100%}
.arena.four .seat.top{grid-area:top;justify-self:center;max-width:132px}
.arena.four .seat.top .snm{font-size:15px}
.arena.four .seat.left{grid-area:left;align-self:center}
.arena.four .seat.right{grid-area:right;align-self:center}
.arena.four .seat.left .sbacks,.arena.four .seat.right .sbacks{display:none}
.arena.four .seat.top .sbacks{position:absolute;left:calc(50% + 30px);top:6px;margin:0;padding:0}
.arena.four .seat.top .sbacks .card{--cw:24px}
.arena.four .seat .dl{margin-left:0;display:block;width:max-content;margin-inline:auto}

.center{min-width:0;min-height:0;display:grid;gap:12px;align-items:center}
.arena.one .center{grid-template-columns:auto minmax(0,1fr)}
.arena.four .center{grid-area:center}

/* deck: the pile, the open trump under it and the closed card under the trump */
.deckz{display:flex;flex-direction:column;gap:8px;min-width:0}
.arena.one .deckz{--cwd:calc(var(--cwt)*.88);max-width:calc(var(--cwd)*2.1)}
.arena.four .deckz{--cwd:calc(var(--cwt)*.7);position:absolute;left:0;top:0;z-index:1}
.deck{position:relative;width:calc(var(--cwd)*1.9);height:calc(var(--cwd)*1.5);margin-top:calc(var(--cwd)*.2)}
.deck .card{--cw:var(--cwd)}
.deck > span{position:absolute;display:block}
.d-pile{left:0;top:0;z-index:3}
.d-up{left:calc(var(--cwd)*.5);top:0;z-index:2}
.d-hid{left:calc(var(--cwd)*.66);top:calc(var(--cwd)*.22);z-index:1}
.d-up .card,.d-hid .card{transform:rotate(90deg);box-shadow:none}
.d-up .card .pip{display:none}
.deck.bare .d-up{left:0;z-index:2}
.deck.bare .d-up .card{transform:none;box-shadow:var(--sh-card)}
.deck.bare .d-up .card .pip{display:block}
.deck.bare .d-hid{left:calc(var(--cwd)*.36);top:calc(var(--cwd)*.12)}
.dcount{left:calc(var(--cwd)*.66);top:calc(var(--cwd)*-.2);z-index:4;min-width:26px;height:24px;box-sizing:border-box;padding:0 5px;display:grid!important;place-items:center;
  background:var(--accent);color:var(--on-accent);font-family:var(--f-display);font-weight:700;font-size:13px;font-feature-settings:"lnum" 1}
.trumpb{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.3;color:var(--muted);transition:opacity .16s}
.game.saying .arena.one .trumpb,.game.saying .plays .hint{opacity:0}   /* a word across the table (fx.css) lies where these lines are, and says more */
.trumpb b{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:var(--text)}
.trumpb b svg{width:14px;height:14px;flex:none;fill:currentColor}
.trumpb b.red svg{fill:var(--foe)}
.trumpb small{font-size:12px}
.arena.four .trumpb small{display:none}
.arena.four .trumpb b{font-size:13px}

/* the trick: every play lies on the side of the player who made it */
.plays{--cwp:var(--cwt);--step:calc(var(--cwp) + 6px);position:relative;min-width:0;min-height:0;align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);justify-items:center;gap:12px 6px}
.arena.one .plays{grid-template-areas:"top" "me"}
.arena.four .plays{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"left top right" "left me right"}
.arena.one .plays.n3{--cwp:calc(var(--cwt)*.86)}
.arena.one .plays.n4{--cwp:calc(var(--cwt)*.86);--step:calc(var(--cwp)*.72)}
.arena.one .plays.n5{--cwp:calc(var(--cwt)*.84);--step:calc(var(--cwp)*.58)}
.arena.four .plays.n2{--cwp:calc(var(--cwt)*.9);--step:calc(var(--cwp)*.5)}
.arena.four .plays.n3{--cwp:calc(var(--cwt)*.8);--step:calc(var(--cwp)*.43)}
.arena.four .plays.n4{--cwp:calc(var(--cwt)*.74);--step:calc(var(--cwp)*.43)}
.arena.four .plays.n5{--cwp:calc(var(--cwt)*.68);--step:calc(var(--cwp)*.43)}
.play{position:relative;display:flex}
.play.pos-top{grid-area:top;align-self:end}
.play.pos-me{grid-area:me;align-self:start}
.play.pos-left{grid-area:left;justify-self:end;align-self:center}
.play.pos-right{grid-area:right;justify-self:start;align-self:center}
.pc{display:flex}
.pc .card,.pc .slot{--cw:var(--cwp)}
.pc > * + *{margin-left:calc(var(--step) - var(--cwp))}
.arena.four .play.pos-left .pc,.arena.four .play.pos-right .pc{flex-direction:column}
.arena.four .play.pos-left .pc > * + *,.arena.four .play.pos-right .pc > * + *{margin-left:0;margin-top:calc(var(--cwp)*-.94)}
.play.pos-top .pc{transform:rotate(2deg)}
.play.pos-left .pc{transform:rotate(-4deg)}
.play.pos-right .pc{transform:rotate(4deg)}
.play.best .card{box-shadow:var(--sh-best)}
.play.probe{visibility:hidden}
/* while cards are held over the table: the place they will take is shown, and what letting go will do is said */
.arena.dropping .play.probe{visibility:visible}
.arena.over .play.pos-me .slot{border-color:var(--hi);border-style:solid}
/* what letting go will do: a line that rides above the held card, level whatever the card's lean, never off the screen */
.dropmsg{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:6;transform:translateX(calc(-50% + var(--sx,0px))) rotate(calc(var(--off,0)*var(--fan)*-1));padding:6px 12px;font-family:var(--f-body);font-size:13px;font-weight:700;line-height:1.25;letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none;
  background:var(--surface);color:var(--muted);border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl)}
.dropmsg.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.dropmsg.on.no{background:var(--surface);color:var(--bad);border-color:var(--bad)}

.ptag{position:absolute;right:-12px;top:-11px;z-index:2;height:20px;padding:0 7px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.plays .hint{grid-column:1/-1;grid-row:1/3;align-self:center;max-width:26ch;margin:0;text-align:center;font-size:14px;line-height:1.4;color:var(--muted);transition:opacity .16s}
.wchip{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);white-space:nowrap;padding:5px 12px;font-size:13px;font-weight:700;background:var(--surface);color:var(--text);border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl)}
.wchip.t0{border-color:var(--mine)}
/* who takes the trick is said when the last card has landed, not while it is still in the air */
.wchip{animation:said .2s .3s both}
@keyframes said{from{opacity:0}to{opacity:1}}

/* before the first deal: «Готов» and the choice of suit or colour */
.pre{grid-column:1/-1;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pre h3{margin:0;font-family:var(--f-display);font-weight:var(--w-head);font-size:22px;text-transform:var(--caps);letter-spacing:var(--track);color:var(--hi)}
.pre .hint{margin:0;max-width:30ch;font-size:14px;line-height:1.45;color:var(--muted)}
.hand .hint{align-self:center;margin:0;font-size:14px;color:var(--muted)}
/* the suit the player has picked, while the others pick: suit marks the size of the letters, in the colour of the text */
.hand .hint b{color:var(--text)}
.hand .hint svg{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.14em;fill:currentColor}
/* the choices stand in one row on any screen: the buttons give way instead of wrapping */
.pickrow{flex:1 1 auto;min-width:0;display:flex;gap:10px;justify-content:center;align-self:center}
.pickbtn{flex:0 1 70px;min-width:0;height:98px;box-sizing:border-box;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:var(--card-bw) solid var(--card-edge);border-radius:9px;background:var(--card);color:var(--card-ink);box-shadow:var(--sh-card)}
.pickbtn.wide{flex-basis:132px}
.pickbtn.red{color:var(--card-red)}
.pickbtn span{display:flex;gap:4px}
.pickbtn svg{width:34px;height:34px;fill:currentColor}
.pickbtn small{font-family:var(--f-body);font-size:12px;font-weight:700;color:var(--card-ink)}
.pickbtn:disabled{opacity:.3;box-shadow:none;cursor:default}

/* ---------- whose move, what to do, how long is left ---------- */
/* .turnbox, not .turn: a seat whose move it is carries .turn, and these rules are not for it.
   Its height is that of its fullest state — my move, two lines of words, the clock running — at all times, in every
   look: otherwise the table above it grows and shrinks by twenty pixels with every move, and all the cards on it shift. */
.turnbox{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text num" "bar bar";align-items:end;column-gap:12px;row-gap:8px;min-height:73px}
.tl{grid-area:text;min-width:0;display:flex;flex-direction:column;gap:2px}
.tk{display:none;font-family:var(--f-display);font-weight:var(--w-head);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--hi)}
.turnbox.mine .tk{display:block}
.status{font-size:15px;font-weight:600;line-height:1.35;min-height:1.35em;text-wrap:balance}
.status em{font-style:normal;color:var(--hi)}
.mypts{font-size:12px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.mypts b{color:var(--hi)}
.mytimer{display:contents}
.tn{grid-area:num;font-family:var(--f-display);font-weight:var(--w-head);font-size:20px;line-height:24px;color:var(--hi);font-variant-numeric:tabular-nums;font-feature-settings:"lnum" 1;white-space:nowrap}
.mytimer.low .tn{color:var(--bad)}
.mytimer .tbar{grid-area:bar;height:6px}

/* ---------- my hand ---------- */
.hand{display:flex;justify-content:center;align-items:flex-end;box-sizing:border-box;min-height:calc(var(--cw)*1.42 + 38px);padding:28px 0 10px}
.hand .card{transform-origin:50% 100%;touch-action:none;-webkit-touch-callout:none;
  transform:translate(var(--dx,0px),var(--dy,0px)) translateY(calc(var(--off,0)*var(--off,0)*var(--arc) + var(--lift,0px))) rotate(calc(var(--off,0)*var(--fan)));transition:transform .18s cubic-bezier(.2,.8,.2,1)}
/* a card held by the finger follows it at once (--dx, --dy); let go, it slides back by the same transition as a card put down */
.hand .card.drag{transition:none;z-index:5;--lift:-22px;box-shadow:var(--sh-sel)}
.hand .card + .card{margin-left:min(5px,calc((100% - var(--n,4)*var(--cw))/(var(--n,4) - 1)))}
.hand .card.sel{--lift:-22px;box-shadow:var(--sh-sel)}
/* a lesson: the cards the coach means stand out of the fan, the rest wait */
.hand .card.cue:not(.sel){--lift:-10px;box-shadow:0 0 0 3px var(--hi),var(--sh-card)}
.hand .card.idle{opacity:.45;cursor:default}
@media (hover:hover){.hand button.card:not(.sel):hover{--lift:-6px}}

/* ---------- actions ---------- */
.gacts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:10px}
.gacts.single{grid-template-columns:minmax(0,1fr)}
#gMain{order:2}
#gDump,#gDeclare{order:1}

/* ================= Адрас ================= */
[data-theme="adras"] .game{--pad:24px}
[data-theme="adras"] .game::before,[data-theme="adras"] .game::after{content:"";position:absolute;top:0;bottom:0;width:14px;z-index:-1;pointer-events:none}
[data-theme="adras"] .game::before{left:0;background:linear-gradient(#C4283F,#C4283F) 0 0/6px 100% no-repeat,linear-gradient(135deg,#C4283F 50%,transparent 50%) 6px 0/8px 8px repeat-y,linear-gradient(45deg,#C4283F 50%,transparent 50%) 6px 0/8px 8px repeat-y}
[data-theme="adras"] .game::after{right:0;background:linear-gradient(#1FA39A,#1FA39A) 100% 0/6px 100% no-repeat,linear-gradient(225deg,#1FA39A 50%,transparent 50%) 0 0/8px 8px repeat-y,linear-gradient(315deg,#1FA39A 50%,transparent 50%) 0 0/8px 8px repeat-y}
[data-theme="adras"] .ava{border-radius:0;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
[data-theme="adras"] .gtitle b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;background:var(--accent);transform:rotate(45deg) translateY(-1px)}
[data-theme="adras"] .game.solo .gtitle b::before{display:none}   /* the coin mark: a table on the device has no stake */
[data-theme="adras"] .ptag{font-family:var(--f-display);font-size:10px}

/* ================= Ганч ================= */
[data-theme="ganch"] .game{--pad:26px;padding-block:18px 28px}
[data-theme="ganch"] .game::before,[data-theme="ganch"] .game::after{content:"";position:absolute;z-index:-1;pointer-events:none}
[data-theme="ganch"] .game::before{inset:8px;border:1px solid #C9A55C;border-radius:26px;background:#0F1B2D}
[data-theme="ganch"] .game::after{inset:13px;border:1px solid #2B3F5C;border-radius:21px}
[data-theme="ganch"] .arena::before{content:"";position:absolute;left:50%;top:56%;width:min(64vw,250px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231E3350' stroke-width='.2' stroke-linejoin='round'%3E%3Cpath d='M4.2 4.2H19.8V19.8H4.2Z M12 1 23 12 12 23 1 12Z'/%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="ganch"] .gtitle b{font-size:19px}
[data-theme="ganch"] .seat .ava{box-sizing:border-box}
[data-theme="ganch"] .seat.t1 .ava{background:var(--surface);color:var(--text);border:1px solid var(--text)}
[data-theme="ganch"] .snm{font-size:19px}
[data-theme="ganch"] .arena.four .seat .snm{font-size:16px}
[data-theme="ganch"] .arena.one .seat.top{flex-direction:column;gap:2px;justify-self:center;text-align:center;max-width:60%}
[data-theme="ganch"] .arena.one .seat.top .sbacks{position:absolute;left:calc(50% + 40px);top:4px;margin:0;padding:0}
[data-theme="ganch"] .seat.turn .ava{box-shadow:0 0 0 3px #0F1B2D,0 0 0 4px #C9A55C}
[data-theme="ganch"] .dcount{min-width:26px;height:26px;border-radius:13px;font-family:var(--f-body);font-size:13px}
[data-theme="ganch"] .ptag{border-radius:3px;font-size:11px}
[data-theme="ganch"] .tbar{height:2px}
[data-theme="ganch"] .turnbox{grid-template-columns:minmax(12px,1fr) auto auto minmax(12px,1fr);grid-template-areas:"l kick num r" "text text text text" "bar bar bar bar";justify-items:center;align-items:center;column-gap:10px;row-gap:5px;text-align:center;min-height:75px}
[data-theme="ganch"] .tl{display:contents}
[data-theme="ganch"] .tk{grid-area:kick;font-size:18px;line-height:22px;letter-spacing:.12em}
[data-theme="ganch"] .status{grid-area:text}
[data-theme="ganch"] .tn{font-size:18px;line-height:22px}
[data-theme="ganch"] .turnbox::before,[data-theme="ganch"] .turnbox::after{content:"";height:1px;width:100%;background:#2B3F5C}
[data-theme="ganch"] .turnbox::before{grid-area:l}
[data-theme="ganch"] .turnbox::after{grid-area:r}
[data-theme="ganch"] .turnbox:not(.mine)::before{grid-column:1/-1}
[data-theme="ganch"] .turnbox:not(.mine)::after{display:none}
[data-theme="ganch"] .turnbox:not(.mine) .tn{display:none}
[data-theme="ganch"] .mytimer .tbar{height:2px;width:100%}
[data-theme="ganch"] .mytimer .tbar i{transform-origin:center}

/* ================= Топчан ================= */
[data-theme="topchan"] .game{background:var(--bg)}
[data-theme="topchan"] .arena{margin-inline:calc(var(--pad)*-1);padding:26px 28px 24px;border-block:2px solid #27211C;
  background:repeating-linear-gradient(90deg,#AE3F1A 0 14px,#F5ECDC 14px 17px,#E3A72F 17px 25px,#F5ECDC 25px 28px,#1C6B63 28px 42px,#27211C 42px 44px,#F5ECDC 44px 47px)}
[data-theme="topchan"] .arena::before{content:"";position:absolute;inset:12px 14px;z-index:-1;background:#FBF4E6;border:2px solid #27211C;border-radius:16px;pointer-events:none}
[data-theme="topchan"] .arena.four .deckz{left:28px;top:26px}
[data-theme="topchan"] .ava{box-sizing:border-box;border:2px solid #27211C}
[data-theme="topchan"] .seat.turn .ava{box-shadow:0 0 0 3px #E3A72F,0 0 0 5px #27211C}
[data-theme="topchan"] .dcount{min-width:28px;height:28px;border:2px solid #27211C;border-radius:14px;background:#E3A72F;color:#27211C}
[data-theme="topchan"] .ptag{height:22px;background:#27211C;color:#F5ECDC;border-radius:4px;transform:rotate(-4deg)}
[data-theme="topchan"] .tbar{background:#D9CDB6}
[data-theme="topchan"] .tbar i{background:#27211C}
[data-theme="topchan"] .trumpb b.red svg{fill:#B5341F}
[data-theme="topchan"] .turnbox{overflow:hidden;box-sizing:border-box;min-height:76px;padding:7px 10px 0 14px;align-items:center;row-gap:0;background:var(--surface);border:2px solid #27211C;border-radius:12px}
[data-theme="topchan"] .turnbox.mine{background:#E3A72F}
[data-theme="topchan"] .tk{font-size:17px;line-height:21px;letter-spacing:0;text-transform:none;color:#27211C}
[data-theme="topchan"] .status{font-size:13px}
[data-theme="topchan"] .turnbox.mine .status em{color:#27211C;text-decoration:underline;text-underline-offset:2px}
[data-theme="topchan"] .tn{min-width:40px;height:40px;box-sizing:border-box;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;gap:3px;border:2px solid #27211C;border-radius:20px;background:#FFFBF2;color:#27211C;font-size:16px}
[data-theme="topchan"] .mytimer.low .tn{background:#AE3F1A;color:#F5ECDC}
[data-theme="topchan"] .mytimer .tbar{position:absolute;left:0;right:0;bottom:0;height:5px;margin:0;background:transparent}   /* on the bottom edge of the box: the clock adds no height */
[data-theme="topchan"] .tl{padding-bottom:7px}

/* ================= short screens ================= */
@media (max-height:700px){
  .game{gap:8px;padding-block:4px 10px}
  .bcap{display:none}
  .arena{gap:6px}
  .arena.four .seat .ava{width:36px;height:36px;font-size:16px}
  .arena.four .seat.top .scnt{display:none}
  .arena.four .seat.top .sbacks{top:2px}
  .trumpb small{display:none}
  .hand{min-height:calc(var(--cw)*1.42 + 30px);padding:22px 0 8px}
  .hand .card.sel{--lift:-18px}
  .turnbox{min-height:71px;row-gap:6px}
  .primary,.secondary,.gold{min-height:48px}
  [data-theme="ganch"] .game{padding-block:14px 20px}
  [data-theme="topchan"] .arena{padding:18px 22px 16px}
  [data-theme="topchan"] .arena::before{inset:8px 10px}
  [data-theme="topchan"] .arena.four .deckz{left:22px;top:18px}
}
/* narrow phones: four players leave little room in the middle, and a lesson has much to say */
@media (max-width:340px){
  .arena.four .pre .hint{display:none}
  .pickrow{gap:8px}
  .gtitle small{font-size:11px}   /* the line under the title keeps all its words: «ждём соперника · место за вами» */
  .status{font-size:14px}         /* two lines stay two lines beside the clock */
  [data-theme="adras"] .status{font-size:13px}
  [data-theme="topchan"] .status{font-size:12px}
}
@media (max-height:700px),(max-width:370px){
  .game.lesson .status{font-size:14px;line-height:1.35}
  .game.lesson .arena.one{--cwt:min(18.5vw,7.8vh,76px)}
}
/* the smallest phones: in a lesson the coach's words need the room more than the labels do */
@media (max-height:600px){
  :root{--cwt:min(16vw,6.4vh,66px)}   /* four players: two rows of cards must fit under the top seat */
  .arena.one{--cwt:min(18.5vw,7.8vh,76px)}
  .plays{row-gap:6px}
  [data-theme="ganch"] .game{padding-block:10px 14px}
  /* four players: the deck keeps the top-left corner to itself, the side seats move down from under it */
  .arena.four .trumpb span{display:none}
  .arena.four .deckz{flex-direction:row;align-items:center;gap:6px}
  .arena.four .trumpb b{font-size:0;gap:0}
  .arena.four .trumpb b svg{width:18px;height:18px}
  .arena.four .seat.left,.arena.four .seat.right{align-self:end}
  .game.lesson .pre .hint{max-width:none;font-size:13px}
  .game.lesson .tk{display:none}
  .game.lesson .status{font-size:13px;line-height:1.32}
  .game.lesson .seat .ava{width:36px;height:36px;font-size:16px}
  .game.lesson .trumpb span{display:none}
  [data-theme="ganch"] .game.lesson .turnbox::before{grid-column:1/-1}
  [data-theme="ganch"] .game.lesson .turnbox::after{display:none}
}