/* ---------- 2v2 (duo.js) ---------- */
/* Host a game: 1v1 or Crossroads (hostPick) */
.hostpick{display:grid;gap:10px;margin:6px 0 4px;text-align:left}
.hostpick .hp{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid var(--line2);background:var(--surf2);color:var(--text);cursor:pointer;font:inherit;text-align:left;transition:border-color .18s,transform .15s,box-shadow .2s}
.hostpick .hp:hover,.hostpick .hp:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 6px 18px -8px var(--accent-glow);transform:translateY(-1px)}
.hostpick .hp b{font:800 19px var(--display);display:flex;align-items:center;gap:4px}
.hostpick .hp span{font-size:13px;color:var(--muted);line-height:1.4}
.dbeta{font:700 10px/1 var(--body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--line2);border-radius:5px;padding:3px 6px;vertical-align:4px;margin-left:6px}

/* the room: the 1v1 waiting room's layout and rule cards (.setup in menu.css), with four seats */
.dteams{display:grid;gap:10px}
.dteam h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;font:600 12px var(--body);color:var(--muted);letter-spacing:.02em}
.dfill{border:0;background:none;padding:0;font:600 12.5px var(--body);color:var(--accent-ink);cursor:pointer}
.dfill:hover{text-decoration:underline}
.dteam .room-pl{gap:6px}
.dteam .room-pl li{min-height:48px;padding:6px 10px;gap:8px}
.dnm{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.dnm b{flex:none}
.dinv{font-size:11.5px;color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* an empty seat's Open / CPU Easy / CPU Normal, where its name would be */
.dsel{appearance:none;-webkit-appearance:none;max-width:100%;align-self:flex-start;font:700 15px var(--display);color:var(--text);cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23a99bd6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center/12px;
  border:1px solid transparent;border-radius:8px;padding:3px 22px 3px 6px;margin-left:-6px;transition:border-color .2s,background-color .2s}
.dsel:hover,.dsel:focus-visible{border-color:var(--line2);background-color:var(--surf2)}
.dsel option{background:var(--bg1);color:var(--text)}
.dctl{display:flex;gap:6px;align-items:center;flex:none}
.dctl .btn{min-height:32px;padding:4px 10px;font-size:12.5px;border-radius:10px}
.dcdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:0;background:linear-gradient(160deg,var(--dc1),var(--dc2))}
#duoColRow[hidden]{display:none}
.duo-room .srb .seg{margin-top:2px}
.dsub{font-size:12px;opacity:.8}
.dmyhand.chaos .card:not(.forced){opacity:.45;filter:saturate(.5)}
#scr-duoroom .rc[aria-readonly]{cursor:default}
@media (min-width:920px) and (min-height:560px){
  #scr-duoroom{justify-content:center}
  #scr-duoroom .topbar{max-width:1100px}
  .duo-room #duoNote{grid-area:note;margin:14px 0 0}
  .duo-room .s-left{gap:16px}
}
/* seat colours, from where you sit (duoCol): your colour and red in 2v2; each seat its own in Free-for-all */
.dc-blue{--dc1:var(--blue1);--dc2:var(--blue2);--dink:var(--blue-ink)}
.dc-red{--dc1:var(--red1);--dc2:var(--red2);--dink:var(--red-ink)}
.dc-gold{--dc1:var(--gold1);--dc2:var(--gold2);--dink:var(--gold-ink)}
.dc-green{--dc1:var(--green1);--dc2:var(--green2);--dink:var(--green-ink)}
.dc-purple{--dc1:var(--purple1);--dc2:var(--purple2);--dink:var(--purple-ink)}
.dc-teal{--dc1:var(--teal1);--dc2:var(--teal2);--dink:var(--teal-ink)}
.dc-grey{--dc1:var(--grey1);--dc2:var(--grey2);--dink:var(--grey-ink)}
/* Free-for-all: picking your colour in the room */
.dsw{display:flex;gap:10px;flex-wrap:wrap}
.dsw button{width:42px;height:42px;border-radius:12px;border:2px solid transparent;background:linear-gradient(160deg,var(--dc1),var(--dc2));color:#fff;font:800 18px var(--display);cursor:pointer;transition:transform .15s,box-shadow .2s}
.dsw button:hover:not(:disabled){transform:translateY(-2px)}
.dsw button.on{border-color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--dc1) 55%,transparent),0 0 16px var(--dc1)}
.dsw button:disabled{opacity:.4;cursor:not-allowed;background:linear-gradient(135deg,transparent 46%,rgba(255,255,255,.75) 47% 53%,transparent 54%),linear-gradient(160deg,var(--dc1),var(--dc2))}
.room-pl li .av{background:linear-gradient(160deg,var(--dc1),var(--dc2))}
.room-pl li.empty .av{background:var(--well);color:var(--muted)}
.room-pl .av{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:800 15px var(--display);color:#fff;flex:none}
.room-pl .av.art{font:400 19px/1 var(--body)}
.dtag{font:700 10px/1 var(--body);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:5px;padding:4px 6px;flex:none}
.dtag.ok{color:var(--ley-success);border-color:color-mix(in srgb,var(--ley-success) 45%,transparent)}
#duoTimer button:disabled{cursor:default}

/* the match: sizes set by duoFit (--dc square, --ds side cards, --dt partner's cards, --dh your hand) */
#scr-duo.dscroll{overflow-y:auto} /* only when even the smallest board doesn't fit (duoFitPhone) */
#scr-duo{--dc:64px;--ds:30px;--dt:36px;--dh:56px;overflow:hidden;overscroll-behavior:none;
  padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.ios-app #scr-duo{padding-top:calc(env(safe-area-inset-top) + 28px)}
.dturn{flex:1;min-width:0;text-align:center;font:700 15px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:44px}
.dnet{max-width:640px;width:100%;margin:4px 0;padding:7px 12px;border-radius:10px;background:color-mix(in srgb,var(--warn) 14%,var(--surf));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);font-size:13px;text-align:center}
.duo-arena{flex:1;min-height:0;width:100%;max-width:820px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:4px}
.duo-top{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.duo-mid{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.duo-side{width:calc(var(--ds) + 8px);display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
#duoBoard{display:grid;grid-template-columns:repeat(4,var(--dc));gap:4px;padding:6px;border-radius:16px}
#duoBoard .cell{width:var(--dc);height:calc(var(--dc)*1.2);border-radius:9px}
#duoBoard .cell .card{font-size:calc(var(--dc)/5)}
#duoBoard .cell .eicon{font-size:calc(var(--dc)*.32)}
/* a sealed Ley line: a ring in the owner's colour, and a glow when it just sealed */
#duoBoard .cell.sealed .card{box-shadow:inset 0 0 0 .1em rgba(255,255,255,.85),0 0 .5em var(--accent-glow)}
#duoBoard .cell.seal-new .card{animation:dseal .9s ease-out}
@keyframes dseal{0%{filter:brightness(1.9)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){#duoBoard .cell.seal-new .card{animation:none}}

/* players around the board */
.dname{display:flex;align-items:center;gap:7px;min-width:0}
.dname .av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font:800 13px var(--display);color:#fff;flex:none;transition:box-shadow .25s}
.dname .av.art{font:400 17px/1 var(--body)}
.dname .av{background:linear-gradient(160deg,var(--dc1),var(--dc2))}
.dname.dactive .av{box-shadow:0 0 0 2px var(--bg1),0 0 0 4px var(--hot)}
.dname.daway{opacity:.6}
.dwho{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.dwho b{font:600 13px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.dwho small{font-size:11px;color:var(--muted);white-space:nowrap}
.dname.dactive .dwho b{color:var(--hot)}
.dname.dn-side{flex-direction:column;gap:3px;text-align:center}
.dname.dn-side .dwho b{max-width:calc(var(--ds) + 40px);font-size:clamp(11px,calc(var(--ds) * .28),13px)}
.dname.dn-side .dwho small{display:none}
.dhand{display:flex;justify-content:center}
.dhand.dh-top .card{font-size:calc(var(--dt)/5)}
.dhand.dh-top .card+.card{margin-left:3px}
.dhand.dh-top{min-height:calc(var(--dt) * 1.2)} /* room for the hand before the cards are dealt */
.dhand.dh-side{flex-direction:column}
.dhand.dh-side .card{font-size:calc(var(--ds)/5)}
.dhand.dh-side .card+.card{margin-top:calc(var(--ds) * -0.75)}
.duo-score{display:flex;gap:44px;justify-content:center;font:900 26px/1 var(--display);font-variant-numeric:tabular-nums}
/* each score: its name over a big number, in both modes */
.duo-score span{display:flex;flex-direction:column;align-items:center;gap:2px}
.duo-score small{font:600 11px var(--body);color:var(--muted)}
.duo-score span{color:var(--dink)}
/* the numbers: big and glowing in the player's colour, like 1v1's scores */
.duo-score b{font:900 clamp(30px,calc(var(--dc) * .58),66px)/1 var(--display);text-shadow:0 0 .45em currentColor}
.duo-score.ffa b{font-size:clamp(28px,calc(var(--dc) * .48),56px)}
.duo-score b.pop{animation:scPop .45s var(--spring)}
.duo-score.ffa{gap:14px 22px;flex-wrap:wrap}
.duo-score.ffa small{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the Free-for-all result: places 1st to 4th */
.dplaces{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px;text-align:left}
.dplaces li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--surf);border:1px solid var(--line);border-left:4px solid var(--dc1)}
.dplaces li.dme{border-color:var(--line2);border-left-color:var(--dc1);background:var(--surf2)}
.dplaces b{font:800 16px var(--display);color:var(--dink)}
.dplaces span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dplaces em{font:900 22px var(--display);font-style:normal;color:var(--dink)}
.duo-bot{display:flex;flex-direction:column;align-items:center;gap:6px}
.dmyhand{display:flex;gap:5px;justify-content:center;min-height:calc(var(--dh)*1.2 + 4px)}
.dmyhand .card{font-size:calc(var(--dh)/5);transition:transform .28s var(--spring),box-shadow .2s}
.dmyhand .card.play{cursor:grab;touch-action:none}
.dmyhand .card.dragging{opacity:.25}
.dmyhand .card.sel{transform:translateY(-14%);box-shadow:inset 0 0 0 .05em rgba(255,255,255,.35),0 0 0 .1em var(--hot),0 .5em 1.2em -.3em var(--hot-glow)}
@media (hover:hover){.dmyhand .card.play:not(.sel):hover{transform:translateY(-6%)}}
.dmyhand:not(:has(.play)) .card{opacity:.85}

/* wide screens: big side players (phones keep the small columns above) */
#scr-duo:not(.narrow) .duo-side{width:calc(var(--ds) + 44px);gap:10px}
#scr-duo:not(.narrow) .dname.dn-side{gap:6px}
#scr-duo:not(.narrow) .dname.dn-side .av{width:calc(var(--ds) * .62);height:calc(var(--ds) * .62);border-radius:calc(var(--ds) * .2);font-size:calc(var(--ds) * .3)}
#scr-duo:not(.narrow) .dname.dn-side .av.art{font-size:calc(var(--ds) * .38)}
#scr-duo:not(.narrow) .dname.dn-side .dwho b{max-width:calc(var(--ds) + 44px);font-size:clamp(12px,calc(var(--ds) * .22),15px)}
#scr-duo:not(.narrow) .dname.dn-side .dwho small{display:block;font-size:clamp(10px,calc(var(--ds) * .17),12px)}
#scr-duo:not(.narrow) .dhand.dh-side .card+.card{margin-top:calc(var(--ds) * -0.68)}
/* the top player's avatar and name match the side players' */
#scr-duo:not(.narrow) .dname.dn-top .av{width:calc(var(--ds) * .62);height:calc(var(--ds) * .62);border-radius:calc(var(--ds) * .2);font-size:calc(var(--ds) * .3)}
#scr-duo:not(.narrow) .dname.dn-top .av.art{font-size:calc(var(--ds) * .38)}
#scr-duo:not(.narrow) .dname.dn-top .dwho b{font-size:clamp(12px,calc(var(--ds) * .22),15px);max-width:180px}
/* your corner shows on PC and phones; other wide screens use the room for bigger cards */
#scr-duo:not(.narrow) #duoMe{display:none}

/* ---------- phones (.narrow, sizes set by duoFit): the PC square, fitted to the width. The board with a hand on each
   side, a column each side as wide as a corner, and a corner per player in the same spots as PC's. The top hand and
   yours overlap a little so their cards stay big; yours sits between the bottom corners ---------- */
#scr-duo.narrow .duo-arena{display:grid;grid-template-columns:var(--dk) var(--dbw) var(--dk);grid-template-rows:var(--dra) auto var(--drc);
  justify-content:center;align-content:center;gap:12px 6px}
#scr-duo.narrow .duo-top,#scr-duo.narrow .duo-mid,#scr-duo.narrow .duo-side,#scr-duo.narrow .duo-bot,#scr-duo.narrow #duoMe{display:contents}
#scr-duo.narrow #duoScore{display:none}
#scr-duo.narrow .dh-top{grid-area:1/2;align-self:center;justify-self:center;min-height:0}
#scr-duo.narrow .dhand.dh-top .card+.card{margin-left:var(--dtf)}
#scr-duo.narrow #duoLeft .dhand{grid-area:2/1;justify-self:center;align-self:center}
#scr-duo.narrow #duoRight .dhand{grid-area:2/3;justify-self:center;align-self:center}
#scr-duo.narrow .dhand.dh-side .card+.card{margin-top:var(--dso)}
#scr-duo.narrow #duoBoard{grid-area:2/2;padding:5px;gap:3px}
#scr-duo.narrow #duoHand{grid-area:3/2;align-self:start;justify-self:center;gap:0;min-height:0}
#scr-duo.narrow #duoHand .card+.card{margin-left:var(--dfan)}
/* a soft shadow where an overlapping card covers the one before it */
#scr-duo.narrow .dhand.dh-top .card,#scr-duo.narrow #duoHand .card{box-shadow:-6px 0 10px -6px rgba(0,0,0,.6)}
#scr-duo.narrow .dhand.dh-side .card{box-shadow:0 -6px 10px -6px rgba(0,0,0,.6)}
#scr-duo.narrow #duoHand .card.sel{box-shadow:inset 0 0 0 .05em rgba(255,255,255,.35),0 0 0 .1em var(--hot),0 .5em 1.2em -.3em var(--hot-glow)}
/* a corner, built like PC's: clock bar, name, and the small avatar beside the big score. The name has the corner's
   whole width (two lines if it needs them), so it isn't cut short. Yours reads down; the top player's is mirrored
   (score by their cards); the side players' are laid out on their side and turned to face them */
#scr-duo.narrow .dname{display:grid;width:var(--dk);height:var(--dra);box-sizing:border-box;align-content:space-between;align-items:center;gap:3px 5px;
  text-align:left;min-width:0;justify-items:start;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tm tm" "who who" "av sc"}
#scr-duo.narrow .dname.dk-tl{grid-area:1/1;justify-items:end;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sc av" "who who" "tm tm"}
#scr-duo.narrow .dname.dk-br{grid-area:3/3;height:var(--drc)}
#scr-duo.narrow .dname.dk-tr{grid-area:1/3;width:var(--dra);height:var(--dk);justify-self:center;align-self:center;transform:rotate(-90deg)}
#scr-duo.narrow .dname.dk-bl{grid-area:3/1;width:var(--drc);height:var(--dk);justify-self:center;align-self:center;transform:rotate(90deg)}
#scr-duo.narrow .dname .av{grid-area:av;width:20px;height:20px;border-radius:6px;font-size:10px}
#scr-duo.narrow .dname .av.art{font-size:13px}
#scr-duo.narrow .dname.dactive .av{box-shadow:0 0 0 2px var(--bg1),0 0 0 3px var(--hot)}
#scr-duo.narrow .dname .dwho{grid-area:who;min-width:0;max-width:100%}
#scr-duo.narrow .dname.dk-tl .dwho{text-align:right}
#scr-duo.narrow .dname .dwho b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;font-size:10.5px;line-height:1.1;
  white-space:normal;overflow-wrap:anywhere}
#scr-duo.narrow .dname .dwho small{display:none}
#scr-duo.narrow .dname .ptm{grid-area:tm;display:flex;justify-self:stretch;align-items:center;justify-content:space-between;gap:4px;min-width:0;
  padding:2px 6px;border-radius:6px;color:#fff;font:700 11.5px/1.2 var(--body);font-variant-numeric:tabular-nums}
#scr-duo.narrow .dname .ptm svg{width:12px;height:12px}
#scr-duo.narrow .dsc{grid-area:sc;display:block;color:var(--dink);font:900 28px/.9 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 0 14px currentColor}
#scr-duo.narrow .dsc.pop{animation:scPop .45s var(--spring)}

/* ---------- PC (body.pc, set in game.js layout): like 4-player chess. A square: the board in the middle, a hand on each
   side as long as the board, and in each corner (where a hand row meets a hand column) the player whose right-hand side
   it is: the top player's top-left, the right player's top-right, the left player's bottom-left, yours bottom-right.
   A corner holds the big score, the name and avatar, and the clock. The score row under the board isn't needed ---------- */
body.pc #scr-duo:not(.narrow) .duo-arena{max-width:none;display:grid;grid-template-columns:var(--dt-row) auto var(--dt-row);
  grid-template-rows:var(--dt-row) auto var(--dt-row);justify-content:center;align-content:center;gap:10px}
body.pc #scr-duo:not(.narrow) .duo-top,body.pc #scr-duo:not(.narrow) .duo-mid,body.pc #scr-duo:not(.narrow) .duo-side,body.pc #scr-duo:not(.narrow) .duo-bot,body.pc #scr-duo:not(.narrow) #duoMe{display:contents}
body.pc #scr-duo:not(.narrow) #duoScore{display:none}
body.pc #scr-duo:not(.narrow) .dh-top{grid-area:1/2;align-self:center}
body.pc #scr-duo:not(.narrow) #duoLeft .dhand{grid-area:2/1;justify-self:center;align-self:center}
body.pc #scr-duo:not(.narrow) #duoBoard{grid-area:2/2}
body.pc #scr-duo:not(.narrow) #duoRight .dhand{grid-area:2/3;justify-self:center;align-self:center}
body.pc #scr-duo:not(.narrow) #duoHand{grid-area:3/2;align-self:center;min-height:0}
body.pc #scr-duo:not(.narrow) .dhand.dh-top .card+.card{margin-left:3px}
body.pc #scr-duo:not(.narrow) #duoHand{gap:3px}
body.pc #scr-duo:not(.narrow) .dhand.dh-side .card+.card{margin-top:var(--dso)}
/* a corner: exactly its square, three rows (clock, name and avatar, score) with the score at the end of the player's
   own cards. Yours reads the usual way; the side players' corners turn to face them (left a quarter turn clockwise,
   right a quarter turn back), so the same layout lands with its score by their column. The top player's stays upright
   (upside down would be hard to read), mirrored so its score sits by their row */
body.pc #scr-duo:not(.narrow) .dname{display:grid;width:var(--dt-row);height:var(--dt-row);box-sizing:border-box;align-content:space-between;gap:4px 8px;
  text-align:left;flex-direction:initial;min-width:0;justify-items:start;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tm tm" "av who" "sc sc"}
body.pc #scr-duo:not(.narrow) .dname.dk-tl{grid-area:1/1;justify-items:end;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sc sc" "who av" "tm tm"}
/* turned, the side corners' clocks land on their inner edge: the left player's between your cards and their name,
   the right player's between the top hand and theirs, so each clock also marks where a player's corner starts */
body.pc #scr-duo:not(.narrow) .dname.dk-tr{grid-area:1/3;transform:rotate(-90deg)}
body.pc #scr-duo:not(.narrow) .dname.dk-bl{grid-area:3/1;transform:rotate(90deg)}
body.pc #scr-duo:not(.narrow) .dname.dk-br{grid-area:3/3}
body.pc #scr-duo:not(.narrow) .dname .av{grid-area:av;width:28px;height:28px;border-radius:8px;font-size:14px}
body.pc #scr-duo:not(.narrow) .dname .av.art{font-size:17px}
body.pc #scr-duo:not(.narrow) .dname .dwho{grid-area:who}
body.pc #scr-duo:not(.narrow) .dname.dk-tl .dwho{text-align:right}
body.pc #scr-duo:not(.narrow) .dname .dwho{min-width:0;max-width:100%}
body.pc #scr-duo:not(.narrow) .dname .dwho b{max-width:100%;font-size:13.5px}
body.pc #scr-duo:not(.narrow) .dname .dwho small{display:none}
/* the clock spans the corner, like chess.com's */
body.pc #scr-duo:not(.narrow) .dname .ptm{grid-area:tm;justify-self:stretch;min-width:0;padding:5px 10px;font-size:17px;border-radius:8px}
body.pc #scr-duo:not(.narrow) .dname .ptm svg{width:17px;height:17px}
.dsc{display:none}
body.pc #scr-duo:not(.narrow) .dsc{grid-area:sc;display:block;color:var(--dink);font:900 calc(var(--dt-row) * .42)/.9 var(--display);
  font-variant-numeric:tabular-nums;text-shadow:0 0 20px currentColor}
body.pc #scr-duo:not(.narrow) .dsc.pop{animation:scPop .45s var(--spring)}
#scr-duo .ptm{background:linear-gradient(160deg,var(--dc1),var(--dc2))}
/* ---------- phones held sideways (.lshort, sizes set by duoFitSide): one row, in the order the turns go round: the left
   player, the top player, the board, the right player, then you. Each player is a column (avatar and score, name, then
   their cards stacked downwards), so the board gets the whole height. Your stack opens round a picked card, like 1v1's ---------- */
#scr-duo.lshort .duo-arena{max-width:none;display:grid;grid-template-columns:repeat(5,auto);grid-template-rows:minmax(0,1fr);justify-content:center;align-items:center;gap:0 10px}
#scr-duo.lshort .duo-mid{display:contents}
#scr-duo.lshort #duoScore{display:none}
#scr-duo.lshort #duoLeft{order:1}
#scr-duo.lshort .duo-top{order:2;flex-direction:column;flex-wrap:nowrap;gap:10px;width:calc(var(--ds) + 44px)}
#scr-duo.lshort #duoBoard{order:3}
#scr-duo.lshort #duoRight{order:4}
#scr-duo.lshort .duo-bot{order:5}
#scr-duo.lshort:not(.narrow) #duoMe{display:block}
#scr-duo.lshort:not(.narrow) .dname.dn-side,#scr-duo.lshort:not(.narrow) .dname.dn-top,#scr-duo.lshort:not(.narrow) .dname.dn-me{display:grid;grid-template-columns:auto auto;grid-template-areas:"av sc" "who who";justify-content:center;
  align-items:center;gap:2px 6px;text-align:center}
#scr-duo.lshort:not(.narrow) .dname.dn-side .av,#scr-duo.lshort:not(.narrow) .dname.dn-top .av,#scr-duo.lshort:not(.narrow) .dname.dn-me .av{grid-area:av;width:22px;height:22px;border-radius:7px;font-size:11px}
#scr-duo.lshort:not(.narrow) .dname.dn-side .av.art,#scr-duo.lshort:not(.narrow) .dname.dn-top .av.art,#scr-duo.lshort:not(.narrow) .dname.dn-me .av.art{font-size:14px}
#scr-duo.lshort:not(.narrow) .dname.dn-side .dwho,#scr-duo.lshort:not(.narrow) .dname.dn-top .dwho,#scr-duo.lshort:not(.narrow) .dname.dn-me .dwho{grid-area:who;max-width:calc(var(--ds) + 44px)}
#scr-duo.lshort:not(.narrow) .dname.dn-side .dwho b,#scr-duo.lshort:not(.narrow) .dname.dn-top .dwho b,#scr-duo.lshort:not(.narrow) .dname.dn-me .dwho b{max-width:100%;font-size:11.5px}
#scr-duo.lshort:not(.narrow) .dname.dn-side .dwho small,#scr-duo.lshort:not(.narrow) .dname.dn-top .dwho small,#scr-duo.lshort:not(.narrow) .dname.dn-me .dwho small{display:none}
#scr-duo.lshort .dsc{grid-area:sc;display:block;color:var(--dink);font:900 24px/1 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 0 12px currentColor}
#scr-duo.lshort .dsc.pop{animation:scPop .45s var(--spring)}
#scr-duo.lshort .dhand.dh-top{flex-direction:column;min-height:0}
#scr-duo.lshort .dhand.dh-top .card{font-size:calc(var(--ds)/5)}
#scr-duo.lshort:not(.narrow) .dhand.dh-top .card+.card{margin-left:0;margin-top:calc(var(--ds) * -0.68)}
#scr-duo.lshort .dmyhand{flex-direction:column;gap:0;min-height:0;min-width:calc(var(--dh) + 20px);padding:calc(var(--dh) * .16) 0}
#scr-duo.lshort .dmyhand .card+.card{margin-top:calc(var(--dh) * -0.62)}
#scr-duo.lshort .dmyhand .card{transform:translate(var(--dx,0),var(--dy,0))}
#scr-duo.lshort .dmyhand .card.sel{--dx:-22%;--dy:calc(var(--dh) * -.16)}
#scr-duo.lshort .dmyhand .card.sel ~ .card{--dy:calc(var(--dh) * .16)}
#scr-duo.lshort .dmyhand .card:has(~ .card.sel){--dy:calc(var(--dh) * -.16)}

#scr-duo .ptm.crit{background:var(--crit)}