/* Opt-in overrides: the original small layout remains untouched. */
html:is([data-font-size="medium"],[data-font-size="large"]) { font-size:22px; }
:is([data-font-size="medium"],[data-font-size="large"]) button,
:is([data-font-size="medium"],[data-font-size="large"]) .wrap > .controls button,
:is([data-font-size="medium"],[data-font-size="large"]) .play-result-actions button { font-size:18px; }
:is([data-font-size="medium"],[data-font-size="large"]) .stats { font-size:22px; }
:is([data-font-size="medium"],[data-font-size="large"]) .games-table { font-size:18px; }
:is([data-font-size="medium"],[data-font-size="large"]) .games-table tr > :nth-child(5) { display:none; }
:is([data-font-size="medium"],[data-font-size="large"]) .games-table thead th { font-size:16px; line-height:1.4; }
:is([data-font-size="medium"],[data-font-size="large"]) .games-table-wrap { max-width:680px; max-height:min(280px,var(--game-list-height,280px)); }
:is([data-font-size="medium"],[data-font-size="large"]) .suit-symbol { width:24px; height:28px; }
:is([data-font-size="medium"],[data-font-size="large"]) .hand-area {
  width:100vw; margin-left:calc(50% - 50vw);
  overflow:hidden; border-bottom:2px solid #ffcf3b;
}
:is([data-font-size="medium"],[data-font-size="large"]) .hand-area .card { top:calc(var(--card-h) / 2 + 72px); transform-origin:50% 0; }
:is([data-font-size="medium"],[data-font-size="large"]) .wrap > .controls { flex-wrap:wrap; }
:is([data-font-size="medium"],[data-font-size="large"]) .settings-install-help,
:is([data-font-size="medium"],[data-font-size="large"]) .settings-error,
:is([data-font-size="medium"],[data-font-size="large"]) .play-header,
:is([data-font-size="medium"],[data-font-size="large"]) .play-status,
:is([data-font-size="medium"],[data-font-size="large"]) .play-position,
:is([data-font-size="medium"],[data-font-size="large"]) .play-search-status,
:is([data-font-size="medium"],[data-font-size="large"]) .play-search-notice,
:is([data-font-size="medium"],[data-font-size="large"]) .result-position,
:is([data-font-size="medium"],[data-font-size="large"]) .result-section summary,
:is([data-font-size="medium"],[data-font-size="large"]) .result-hand strong,
:is([data-font-size="medium"],[data-font-size="large"]) .result-trick > strong,
:is([data-font-size="medium"],[data-font-size="large"]) .result-trick-play { font-size:18px; }
:is([data-font-size="medium"],[data-font-size="large"]) .play-result { width:min(600px,94vw); }
:is([data-font-size="medium"],[data-font-size="large"]) .play-tools button,
:is([data-font-size="medium"],[data-font-size="large"]) .play-close,
:is([data-font-size="medium"],[data-font-size="large"]) .main-settings-button { font-size:26px; }
:is([data-font-size="medium"],[data-font-size="large"]) .play-hand {
  --play-w:var(--large-card-w); --play-h:var(--large-card-h);
  width:100%; left:0; translate:none;
  height:var(--large-area-h); bottom:0;
  border-bottom:2px solid #ffcf3b;
}
:is([data-font-size="medium"],[data-font-size="large"]) .play-card {
  left:50%; top:calc(var(--large-card-h)/2 + 72px);
  width:var(--large-card-w); height:var(--large-card-h);
  transform-origin:50% 0; border-radius:12px;
  transform:translate(-50%,-50%) translateY(var(--large-y)) rotate(var(--large-angle)) translateX(var(--large-x));
}
:is([data-font-size="medium"],[data-font-size="large"]) .play-card img { height:var(--large-card-h); border-radius:12px; }
:is([data-font-size="medium"],[data-font-size="large"]) .play-card:focus-visible {
  transform:translate(-50%,-50%) translateY(calc(var(--large-y) - 24px)) rotate(var(--large-angle)) translateX(var(--large-x));
}
:is([data-font-size="medium"],[data-font-size="large"]) .stack-0 { bottom:calc(var(--large-hand-height) + 24px); translate:0 35px; }
:is([data-font-size="medium"],[data-font-size="large"]) .trick-stack { font-size:16px; z-index:3; }
:is([data-font-size="medium"],[data-font-size="large"]) .play-status { top:max(20%,calc(var(--top-hand-top,48px) + var(--play-h)*.35 + 12px)); margin-top:0; }
/* Crop the top hand as one group, below the title rather than behind it. */
:is([data-font-size="medium"],[data-font-size="large"]) .opponent-2 {
  top:var(--top-hand-top,48px); left:0; width:100%; height:calc(var(--play-h)*.35);
  transform:none; overflow:clip;
}
:is([data-font-size="medium"],[data-font-size="large"]) .opponent-2 .opponent-fan {
  left:50%; top:0;
  transform:rotate(180deg) scale(.65);
}
:is([data-font-size="medium"],[data-font-size="large"]) .play-title { position:relative; background:#071826; border-radius:4px; padding:2px 4px; }
/* Full-size cards share one fixed viewport, with permanent bottom/right edges. */
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick {
  --trick-w:var(--large-card-w); --trick-h:var(--large-card-h);
  --crop-width:calc(100vw - 120px);
  --crop-height:var(--trick-area-height,40dvh);
  --seat-step-x:min(calc(var(--trick-w)*.22),calc(var(--crop-width)*.25));
  --seat-step-y:min(calc(var(--trick-h)*.27),calc(var(--crop-height)*.32));
  top:var(--trick-area-top,30%); left:50%; transform:translateX(-50%);
  width:var(--crop-width); height:var(--crop-height);
  overflow:clip; border-radius:0;
}
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick .trick-card {
  left:16px; top:16px; transform:translate(var(--dx),var(--dy));
}
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick .from-0 { --dx:calc(var(--seat-step-x) + 12px); --dy:calc(var(--seat-step-y)*2); }
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick .from-1 { --dx:0px; --dy:calc(var(--seat-step-y) + 12px); }
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick .from-2 { --dx:calc(var(--seat-step-x) - 12px); --dy:0px; }
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick .from-3 { --dx:calc(var(--seat-step-x)*2); --dy:calc(var(--seat-step-y) - 12px); }
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick::after {
  content:""; position:absolute; inset:0; border-bottom:2px solid #ffcf3b;
  border-right:2px solid #ffcf3b; z-index:9; pointer-events:none;
}
:is([data-font-size="medium"],[data-font-size="large"]) .result-card { width:30px; height:63px; }
:is([data-font-size="medium"],[data-font-size="large"]) .result-card img { width:297px; left:-4.5px; top:-31.5px; }
:is([data-font-size="medium"],[data-font-size="large"]) .scan-subtitle { font-size:24px; }
:is([data-font-size="medium"],[data-font-size="large"]) .scan-hint { font-size:20px; }
@media (orientation:landscape) and (max-height:500px) {
  :is([data-font-size="medium"],[data-font-size="large"]) .play-status { top:12px; font-size:16px; }
}

/* Medium shares the accessible layouts with a gentler text/card scale. */
html[data-font-size="medium"] { font-size:18px; }
[data-font-size="medium"] button,
[data-font-size="medium"] .wrap > .controls button,
[data-font-size="medium"] .play-result-actions button,
[data-font-size="medium"] .settings-install-help,
[data-font-size="medium"] .settings-error,
[data-font-size="medium"] .play-header,
[data-font-size="medium"] .play-status,
[data-font-size="medium"] .play-position,
[data-font-size="medium"] .play-search-status,
[data-font-size="medium"] .play-search-notice,
[data-font-size="medium"] .result-position,
[data-font-size="medium"] .result-section summary,
[data-font-size="medium"] .result-hand strong,
[data-font-size="medium"] .result-trick > strong,
[data-font-size="medium"] .result-trick-play { font-size:15px; }
[data-font-size="medium"] .stats { font-size:18px; }
[data-font-size="medium"] .games-table { font-size:14px; }
[data-font-size="medium"] .games-table thead th,
[data-font-size="medium"] .trick-stack { font-size:13px; }
:is([data-font-size="medium"],[data-font-size="large"]) .stack-2 {
  top:calc(var(--top-hand-top,48px) + var(--play-h)*.175);
  transform:translateY(-50%);
}
[data-font-size="medium"] .stack-0 { translate:0 55px; }
[data-font-size="medium"] .suit-symbol { width:21px; height:24px; }
[data-font-size="medium"] .play-tools button,
[data-font-size="medium"] .play-close,
[data-font-size="medium"] .main-settings-button { font-size:24px; }
[data-font-size="medium"] .result-card { width:25px; height:52.5px; }
[data-font-size="medium"] .result-card img { width:247.5px; left:-3.75px; top:-26.25px; }
[data-font-size="medium"] .scan-subtitle { font-size:20px; }
[data-font-size="medium"] .scan-hint { font-size:17px; }

/* Keep the medium trick compact; surplus height reveals cards before adding air. */
[data-font-size="medium"] .play-status {
  top:max(min(20dvh,140px),calc(var(--top-hand-top,48px) + var(--play-h)*.35 + 12px));
}
[data-font-size="medium"] .play-trick {
  /* Leave room for readable corners, then overlap cards to fit the whole group. */
  --trick-w:min(var(--large-card-w),calc((var(--crop-width) - 16px)/1.4),calc((var(--crop-height) - 16px)/2.163));
  --trick-h:calc(var(--trick-w)*1.545);
  --seat-step-x:min(calc(var(--trick-w)*.24),calc((var(--crop-width) - var(--trick-w) - 16px)/2));
  --seat-step-y:min(calc(var(--trick-h)*.24),calc((var(--crop-height) - var(--trick-h) - 16px)/2));
  --corner-offset:calc(var(--trick-w)*.06);
  --group-width:calc(var(--trick-w) + var(--seat-step-x)*2);
  --group-height:calc(var(--trick-h) + var(--seat-step-y)*2);
  overflow:visible;
}
[data-font-size="medium"] .play-trick::after { content:none; }
[data-font-size="medium"] .play-trick .trick-card {
  z-index:calc(1 + var(--play-order,0));
  left:calc((var(--crop-width) - var(--group-width))/2);
  top:calc((var(--crop-height) - var(--group-height))*.45);
}
[data-font-size="medium"] .play-trick .from-0 { --dx:calc(var(--seat-step-x) + var(--corner-offset)); }
[data-font-size="medium"] .play-trick .from-1 { --dy:calc(var(--seat-step-y) + var(--corner-offset)); }
[data-font-size="medium"] .play-trick .from-2 { --dx:calc(var(--seat-step-x) - var(--corner-offset)); }
[data-font-size="medium"] .play-trick .from-3 { --dy:calc(var(--seat-step-y) - var(--corner-offset)); }
@media (orientation:landscape) and (max-height:500px) {
  [data-font-size="medium"] .play-status { top:12px; }
}

[data-font-size="large"] .play-trick {
  --seat-step-y:min(calc(var(--trick-h)*.22),calc(var(--crop-height)*.26));
}
[data-font-size="large"] .play-trick .trick-card { top:4px; }

/* Accessible trick cards use top-left coordinates, including during entry. */
:is([data-font-size="medium"],[data-font-size="large"]) .play-trick:not(.collecting) .trick-card {
  animation-name:accessible-play-card;
}
@keyframes accessible-play-card {
  from { transform:translate(calc(var(--dx) + var(--origin-x)),calc(var(--dy) + var(--origin-y))); }
  to { transform:translate(var(--dx),var(--dy)); }
}