body.playing { overflow: hidden; }
body.playing > .center, body.playing > .wrap { display: none; }
.play-board[hidden] { display: none; }
.play-board { position: fixed; inset: 0; z-index: 1100; height: 100dvh; overflow: clip; background: radial-gradient(ellipse at center,#163b39,#071826 75%); --play-w: clamp(62px,15vw,112px); --play-h: calc(var(--play-w) * 1.545); --own-w:var(--play-w); --own-h:calc(var(--own-w) * 1.545); }
.play-header { position: absolute; top: max(10px,env(safe-area-inset-top)); left: 16px; right: 16px; display:flex; justify-content:space-between; align-items:center; z-index:5; font-size:14px; }
/* The tall mobile toolbar must not block the top trick pile beneath its empty area. */
.play-header { pointer-events:none; }
.play-header button { pointer-events:auto; }
.play-close { padding:4px 12px; font-size:24px; }
.play-status { position:absolute; top:25%; left:13%; right:13%; text-align:center; font-size:13px; z-index:4; }
.play-hand { position:absolute; bottom:0; left:0; width:100%; height:calc(.62 * var(--play-h)); overflow:clip; animation: hand-enter .45s ease-out; }
.play-card { position:absolute; left:calc(50% + (var(--i) - (var(--n) - 1)/2) * min(10vw,70px)); top:var(--fan-drop); transform:translateX(-50%) rotate(var(--fan-angle)); transform-origin:50% 100%; padding:0; width:var(--play-w); height:calc(.72 * var(--play-h)); overflow:clip; border-radius:7px 7px 0 0; background:#eee; box-shadow:0 1px 3px 1px rgba(0,0,0,.45); translate:0 0; transition:filter .2s,transform .2s,translate .16s ease-out; }
.play-card img { width:100%; height:var(--play-h); display:block; border-radius:7px; pointer-events:none; }
.play-card:disabled { cursor:default; opacity:1; }
.play-card.illegal { filter:grayscale(1) brightness(.45); }
.play-card:focus-visible { outline:3px solid #ffcf3b; outline-offset:2px; transform:translate(-50%,-8px) rotate(var(--fan-angle)); }
.play-card { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.play-hand.dragging { overflow:visible; }
.play-card.dragging { overflow:visible; translate:0 -44px; }
.play-card.dragging { outline:none; }
.opponent { position:absolute; width:0; height:0; pointer-events:none; }
.opponent-fan { position:absolute; width:0; height:0; }
.opponent-2 { top:max(96px,13%); left:50%; transform:rotate(180deg) scale(.65); }
.opponent-1 { left:0; top:48%; transform:rotate(90deg) scale(.65); }
.opponent-3 { right:0; top:48%; transform:rotate(-90deg) scale(.65); }
.card-back { box-sizing:border-box; display:block; width:var(--play-w); height:var(--play-h); border:4px solid #e8dfc9; border-radius:7px; background:repeating-conic-gradient(#285d9a 0 25%,#e5eaf0 0 50%) 0/16px 24px; box-shadow:0 2px 5px #0006; }
.opponent .card-back { box-shadow:0 1px 3px 1px rgba(0,0,0,.45); position:absolute; left:calc((var(--i) - (var(--n) - 1)/2) * min(3vw,22px)); top:var(--fan-drop); transform:translate(-50%,-50%) rotate(var(--fan-angle)); transform-origin:50% 100%; }
.play-trick { --trick-w:min(calc(var(--play-w)*1.2),40vw,28dvh); --trick-h:calc(var(--trick-w)*1.545); position:absolute; top:53%; left:50%; width:calc(var(--trick-w)*2.1); height:calc(var(--trick-h)*1.6); transform:translate(-50%,-50%); padding:0; border:0; background:none; box-shadow:none; color:inherit; }
/* Suppress mobile tap overlays on the trick area and playable cards. */
.play-trick, .play-card { -webkit-tap-highlight-color:transparent; }
.play-trick:focus:not(:focus-visible), .play-card:focus:not(:focus-visible) { outline:none; }
.play-trick:disabled { cursor:default; }
.play-trick:focus-visible { outline:2px dashed #ffcf3b; outline-offset:8px; }
.trick-card { position:absolute; left:50%; top:50%; width:var(--trick-w); height:var(--trick-h); border-radius:7px; box-shadow:0 4px 12px #0007; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))); animation:play-card var(--play-animation,.3s) ease-out; pointer-events:none; }
/* Fixed back-to-front order: top, left, right, bottom. */
.from-0 { --dx:0px; --dy:calc(var(--trick-h)*.3); --origin-x:0px; --origin-y:45vh; z-index:4; }
.from-1 { --dx:calc(var(--trick-w)*-.6); --dy:0px; --origin-x:-50vw; --origin-y:0px; z-index:2; }
.from-2 { --dx:0px; --dy:calc(var(--trick-h)*-.3); --origin-x:0px; --origin-y:-45vh; z-index:1; }
.from-3 { --dx:calc(var(--trick-w)*.6); --dy:0px; --origin-x:50vw; --origin-y:0px; z-index:3; }
.collecting .trick-card { animation:collect-card var(--collect-animation,.35s) ease-in forwards; }
.trick-stack { position:absolute; min-width:24px; min-height:36px; display:flex; align-items:center; gap:5px; font-size:11px; color:#c0cdd9; }
.trick-stack .card-back { width:24px; height:36px; border-width:2px; background-size:8px 12px; }
.stack-0 { bottom:calc(var(--own-h)*.62 + 12px); right:15px; translate:0 15px; }
.stack-1 { left:12px; top:calc(48% + min(10.5vw,77px) + var(--play-w)*.45 + 12px); }
.stack-2 { top:max(96px,13%); left:max(12px,calc(50% - min(6.3vw,46.2px) - var(--play-w)*.5 - 44px)); transform:translateY(-50%); }
.stack-3 { right:12px; top:calc(48% - min(10.5vw,77px) - var(--play-w)*.45 - 52px); }
.play-result { z-index:1200; max-width:min(400px,85vw); border:1px solid #52616c; border-radius:16px; padding:24px; background:#0b1726; color:#eaf4ff; text-align:center; }
.play-result::backdrop { background:#0009; }
.play-result-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.play-result-actions button:disabled { opacity:.4; cursor:default; }
#playBtn:disabled { opacity:.4; cursor:default; }
@keyframes hand-enter { from {transform:translateY(-22vh);} to {transform:translateY(0);} }
@keyframes play-card { from {transform:translate(calc(-50% + var(--origin-x)),calc(-50% + var(--origin-y)));} }
@keyframes collect-card { to {transform:translate(var(--collect-x),var(--collect-y)) scale(.25);opacity:0;} }
@media (max-height:500px) { .play-board { --play-w:65px; } .opponent-2, .stack-2 { top:70px; } .play-status { top:19%; } }
@media (prefers-reduced-motion:reduce) { .play-card { transition-duration:.01ms; } .play-hand,.trick-card,.collecting .trick-card { animation-duration:.01ms; } }

@media (max-width:520px) { .wrap > .controls { flex-wrap:wrap; gap:5px; } .wrap > .controls button, .play-result-actions button, .hand-picker :where(header, footer) button { padding:10px 7px; font-size:11px; } }

.trick-stack { padding:4px; border:0; background:transparent; font-family:inherit; border-radius:6px; }
.trick-stack:disabled { opacity:1; cursor:default; }
.trick-stack:not(:disabled) { cursor:pointer; outline:1px solid #8aa6b9; }
.trick-stack[aria-pressed="true"] { background:#ffffff20; }
.play-result-details { white-space:pre-line; line-height:1.7; }

.play-result { box-sizing:border-box; width:min(400px,94vw); max-width:94vw; max-height:92dvh; overflow-y:auto; padding:18px; }
.play-result-hands { display:grid; gap:6px; margin:12px 0; text-align:left; }
.result-hand strong { display:block; font-size:11px; margin-bottom:2px; }
.result-hand-cards { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px; }
.result-card { display:block; position:relative; justify-self:center; width:20px; height:42px; overflow:hidden; border-radius:3px; background:white; }
.result-card img { position:absolute; display:block; width:198px; max-width:none; height:auto; left:-3px; top:-21px; }

@media (max-width:740px) and (min-height:501px) {
  .play-board { --play-w:clamp(76px,20vw,112px); --own-w:clamp(106px,30vw,156px); }
  .play-hand { --play-w:var(--own-w); --play-h:var(--own-h); }
  .play-card { left:calc(50% + (var(--i) - (var(--n) - 1)/2) * 7vw); }
}

.play-header { gap:8px; align-items:flex-start; }
.play-tools { display:flex; gap:5px; flex-shrink:0; }
.play-tools button { padding:4px 8px; font-size:20px; line-height:1.2; -webkit-tap-highlight-color:transparent; }
.play-tools button:disabled { opacity:.35; }

@media (max-width:740px) {
  .play-tools { flex-direction:column-reverse; }
}

.result-section { margin:10px 0; padding:8px 10px; border:1px solid #344959; border-radius:8px; text-align:left; }
.result-section summary { cursor:pointer; font-size:13px; padding:3px 0; }
.play-result-tricks { display:grid; gap:14px; margin:12px 0 4px; }
.result-trick > strong { display:block; font-size:11px; margin-bottom:6px; }
.result-trick-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.result-trick-play { display:grid; justify-items:center; gap:4px; font-size:11px; }
.result-trick-play.winner > span:first-child { color:#ffcf3b; font-weight:bold; }

.play-position { box-sizing:border-box; font:inherit; font-size:12px; min-width:110px; padding:6px 8px; color:inherit; background:#163044; border:1px solid #52616c; border-radius:6px; }
.play-search-status { font-size:12px; line-height:1.5; }
.play-search-notice { position:fixed; z-index:1150; top:20%; left:50%; transform:translateX(-50%); max-width:80vw; padding:12px; border-radius:8px; background:#0b1726; color:#eaf4ff; font-size:13px; text-align:center; }

.result-position { display:flex; justify-content:center; align-items:center; gap:10px; margin:12px 0; font-size:13px; }

/* Phones held sideways: use the broad edges and leave the middle for tricks. */
@media (orientation:landscape) and (max-height:500px) {
  .play-board { --play-w:clamp(65px,20dvh,88px); --own-w:clamp(110px,36dvh,160px); }
  .play-tools { flex-direction:row; }
  .opponent-2 { top:0; }
  .opponent-1, .opponent-3 { top:46%; }
  .play-status { top:12px; left:calc(50% + 95px); right:90px; margin:0; text-align:left; }
  .play-trick { top:44%; --trick-w:min(30dvh,128px); width:calc(var(--trick-w)*2.8); height:calc(var(--trick-h)*1.24); }
  .play-trick .from-0 { --dx:calc(var(--trick-w)*.25); --dy:calc(var(--trick-h)*.12); }
  .play-trick .from-1 { --dx:calc(var(--trick-w)*-.9); }
  .play-trick .from-2 { --dx:calc(var(--trick-w)*-.25); --dy:calc(var(--trick-h)*-.12); }
  .play-trick .from-3 { --dx:calc(var(--trick-w)*.9); }
  .play-hand { --play-w:var(--own-w); --play-h:var(--own-h); height:calc(.48 * var(--own-h)); bottom:-16px; }
  .play-card { left:calc(50% + (var(--i) - (var(--n) - 1)/2) * min(6vw,46px)); }
  .stack-1, .stack-3 { top:46%; transform:translateY(-50%); }
  .stack-1 { left:calc(var(--play-h)*.4 + 18px); }
  .stack-3 { right:calc(var(--play-h)*.4 + 18px); }
  .stack-2 { top:12px; left:calc(50% - 115px); transform:none; }
  .stack-0 { bottom:18px; right:max(18px,env(safe-area-inset-right),calc(50% - min(21vw,161px) - var(--own-w)*.7 - 44px)); }
}

.play-result-against { margin-bottom:0; }
.play-result-against:not([hidden]) + .play-result-game { margin-top:4px; }

/* Small text: match the held card scale while retaining the trick's footprint. */
html:not([data-font-size="medium"]):not([data-font-size="large"]) .play-trick {
  --previous-trick-w:min(calc(var(--play-w)*1.2),40vw,28dvh);
  --previous-trick-h:calc(var(--previous-trick-w)*1.545);
  --trick-w:var(--own-w);
  --trick-h:var(--own-h);
  --compact-step-x:max(12px,calc((var(--previous-trick-w)*2.2 - var(--trick-w))/2));
  --compact-step-y:max(12px,calc((var(--previous-trick-h)*1.6 - var(--trick-h))/2));
  width:calc(var(--previous-trick-w)*2.1);
  height:calc(var(--previous-trick-h)*1.6);
}
html:not([data-font-size="medium"]):not([data-font-size="large"]) .play-trick .from-0 { --dx:12px; --dy:var(--compact-step-y); z-index:calc(1 + var(--play-order,0)); }
html:not([data-font-size="medium"]):not([data-font-size="large"]) .play-trick .from-1 { --dx:calc(-1 * var(--compact-step-x)); --dy:12px; z-index:calc(1 + var(--play-order,0)); }
html:not([data-font-size="medium"]):not([data-font-size="large"]) .play-trick .from-2 { --dx:-12px; --dy:calc(-1 * var(--compact-step-y)); z-index:calc(1 + var(--play-order,0)); }
html:not([data-font-size="medium"]):not([data-font-size="large"]) .play-trick .from-3 { --dx:var(--compact-step-x); --dy:-12px; z-index:calc(1 + var(--play-order,0)); }
@media (orientation:landscape) and (max-height:500px) {
  html:not([data-font-size="medium"]):not([data-font-size="large"]) .play-trick {
    --previous-trick-w:min(30dvh,128px);
    --compact-step-x:max(12px,calc((var(--previous-trick-w)*2.8 - var(--trick-w))/2));
    --compact-step-y:max(12px,calc((var(--previous-trick-h)*1.24 - var(--trick-h))/2));
    width:calc(var(--previous-trick-w)*2.8);
    height:calc(var(--previous-trick-h)*1.24);
  }
}