.online-board .arena{min-height:590px;justify-content:center;gap:8px}.online-board .controls,.online-board~.modebar{display:none!important}.match-started:has(.online-board) .modebar{display:none}.online-heading{position:relative;min-height:90px;width:100%;padding:12px 26px}.online-heading h2{font:600 30px/1.2 'Space Grotesk';letter-spacing:-1px;margin:0 0 8px}.online-heading p{font-size:13px;line-height:1.5;color:#d0d8be;margin:0}.online-clock{position:absolute;top:0;right:0;font-size:12px;font-variant-numeric:tabular-nums;color:#eed593}.online-lobby{display:grid;gap:12px;text-align:left;width:min(360px,100%);margin:16px auto}.online-lobby label{font-size:11px;color:#d0d8be}.online-lobby input{width:100%;min-width:0;background:#f8f2df;color:#244c3d;border:1px solid #c5cba8;border-radius:5px;padding:12px;font:16px 'DM Sans';min-height:46px}.online-lobby .primary,.online-actions .primary{background:#f0d48c;color:#244c3d;box-shadow:0 3px 0 #b79951;min-height:46px}.online-divider{font-size:9px;letter-spacing:1.5px;text-align:center;margin:5px 0}.online-join{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.online-actions{min-height:72px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:min(640px,100%);margin:auto}.online-actions .numbers{width:100%;flex-basis:100%}.online-board .number{color:#244c3d}.online-board .hands{flex:none;min-height:250px;margin:0 auto 12px;width:100%}.online-board .value{font-size:14px}.online-board .value:empty{visibility:hidden}.online-board .value small{font-size:10px;white-space:nowrap}.online-text{background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-size:12px;color:#dedbc0;min-height:44px;padding:10px}.online-problem{font-size:12px;line-height:1.5;color:#ffe0a3;min-height:18px;margin:0;overflow-wrap:anywhere}.online-room{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}.online-room b{font:600 20px 'Space Grotesk';letter-spacing:2px}.online-final-score{font-size:13px;margin:0}.online-board .handgroup .value{position:static;margin:7px auto 0}.online-board .handgroup .handlabel{margin-top:14px}.online-board .handgroup{display:flex;flex-direction:column;align-items:center}.online-board~.modebar{display:none}
@media(max-width:800px){.online-board .arena{min-height:560px;padding:16px 12px}.online-heading{padding:8px 18px}.online-heading h2{font-size:25px}.online-heading p{font-size:12px}.online-board .hands{min-height:230px;height:230px}.online-actions{min-height:70px}.online-actions .primary{padding:12px 18px}.online-board .number{height:48px}.online-entry{margin-bottom:14px}}
@media(max-height:500px) and (orientation:landscape){.online-board .arena{min-height:400px}.online-board .hands{min-height:190px;height:190px}.online-heading{min-height:64px}.online-heading h2{font-size:23px}}

/* Use the same slots from readiness to the result, independent of solo-game classes. */
body .page .layout .board.online-board{display:flex;flex-direction:column;height:max(700px,var(--playing-board-height));min-height:0}
body .page .layout .board.online-board .arena{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:96px minmax(190px,1fr) 84px 22px 44px;gap:8px;align-content:stretch;align-items:center;justify-items:center;min-height:0;padding:14px 18px}
body .page .layout .board.online-board .online-heading{grid-row:1;grid-column:1;min-height:0;height:100%;padding:10px 22px 0}
body .page .layout .board.online-board .hands{grid-row:2;grid-column:1;height:100%;min-height:0;max-height:none;max-width:640px;margin:0;flex:none;gap:14px;align-self:stretch}
body .page .layout .board.online-board .handgroup{width:45%;flex:1 1 0;height:100%;max-width:260px}
body .page .layout .board.online-board .hand{width:100%}
body .page .layout .board.online-board .hand canvas{transform:translateY(-6%) scale(1.15);transform-origin:50% 65%}
body .page .layout .board.online-board .online-actions,body .page .layout .board.online-board .arena>.actions{grid-row:3;grid-column:1;margin:0;min-height:0;width:100%;gap:8px}
body .page .layout .board.online-board .online-problem{grid-row:4;grid-column:1;min-height:0;max-width:100%;line-height:1.3}
body .page .layout .board.online-board .arena>.online-text{grid-row:5;grid-column:1}
body .page .layout .board.online-board .online-final-score{margin:8px 0 0;font-size:12px}
body .page .layout .board.online-board .match-strip{flex:none;min-height:118px}
body .page .layout .board.online-board:not(.has-score) .match-strip{visibility:hidden}
body .page .layout .board.online-lobby-board .arena{grid-template-rows:auto auto 44px;align-content:center}
body .page .layout .board.online-lobby-board .online-lobby{grid-row:2;grid-column:1;margin:12px auto}
body .page .layout .board.online-lobby-board .arena>.online-text{grid-row:3}
body .page .layout .board.online-lobby-board .online-problem{grid-row:auto}
body .page .layout .board.online-board .online-problem .online-text{color:inherit;min-height:0;padding:0 8px}
@media(max-width:800px){
 body .page .layout .board.online-board .arena{padding:10px 12px;gap:6px;grid-template-rows:88px minmax(180px,1fr) 76px 22px 44px}
 body .page .layout .board.online-lobby-board .arena{grid-template-rows:auto auto 44px}
 body .page .layout .board.online-board .online-heading h2{font-size:25px}
 body .page .layout .board.online-board .number{height:50px}
 body .page .layout .board.online-board .online-actions .primary{padding:10px 12px;font-size:12px}
}
/* A fixed footer keeps reactions and waiting states from shifting the hands. */
.online-picker{width:100%;max-width:600px}
.online-pick-prompt{font-size:14px;font-weight:600;letter-spacing:.2px;color:#f5db9b;margin:0 0 12px}
.online-picker .numbers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0}
.online-picker .number{min-width:0;width:100%;padding-inline:0}
.online-toss-call{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:8px}
.online-toss-call>span{font-size:20px;color:#e4e5c9;letter-spacing:-.3px}
.online-toss-call>strong{display:inline-block;background:#f4d58e;color:#234a3b;padding:7px 16px;border-radius:6px;font-size:30px;letter-spacing:2px;text-transform:uppercase;box-shadow:0 3px 0 #b59b5e}
.online-board .wicket-call{display:inline-block;margin:0 0 6px;padding:0 18px}
.online-board .wicket-call strong{font-size:52px}
.online-board.wicket .online-heading p{color:#ffe0c4}
body .page .layout .board.online-board.wicket .arena{grid-template-rows:104px minmax(230px,1fr) 0px 24px 70px}
.online-decision{width:100%}
body .page .layout .board.online-board.online-toss .arena{grid-template-rows:100px minmax(200px,1fr) 174px 20px 44px}
body .page .layout .board.online-board.online-toss .match-strip{display:none!important}
body .page .layout .board.online-board.online-toss .online-actions.toss-action{max-width:600px;align-self:center}
.online-toss .toss-action .online-pick-prompt{font:700 24px/1.2 'Kalam',cursive;color:#234638;margin:0 0 14px;text-transform:none;letter-spacing:0}
.online-toss .toss-action .online-decision>h3{font-size:16px;letter-spacing:0;text-transform:none}
.online-toss .toss-action .online-decision>p{font-size:13px;margin-bottom:14px}
.online-toss .toss-action .number{height:58px;background:#fffbed;border:1px solid #b8bea0;border-bottom:4px solid #a1ab86;font-size:26px}
body .page .layout .board.online-board.online-toss .hand[data-pose="0"] canvas{transform:scale(1.45);transform-origin:50% 100%}
@media(max-width:800px){body .page .layout .board.online-board.online-toss{height:max(620px,calc(100svh - 64px))}body .page .layout .board.online-board.online-toss .arena{grid-template-rows:90px minmax(170px,1fr) 180px 16px 40px;padding:12px;gap:6px}.online-toss .toss-action{padding:12px}.online-toss .toss-action .online-pick-prompt{font-size:22px}.online-toss .toss-action .number{height:48px;font-size:23px}}
@media(max-width:800px){.online-toss-call{gap:10px}.online-toss-call>span{font-size:17px}.online-toss-call>strong{font-size:26px;padding:6px 12px}.online-pick-prompt{font-size:13px}.online-picker .numbers{gap:6px}}
body .page .layout .board.online-board .arena{grid-template-rows:100px minmax(190px,1fr) 110px 24px 88px}
.online-footer{grid-row:5;grid-column:1;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0 10px;width:100%;min-width:0}
.online-reactions{position:relative;display:flex;justify-content:center;gap:6px;width:100%;min-width:0}
.online-reactions button{border:1px solid #d8dcbd55;border-radius:5px;padding:6px 9px;background:#f8f0d8;color:#244b3e;font:500 11px 'DM Sans';min-height:36px;white-space:nowrap}
.online-reactions button:disabled{opacity:.45}.online-reactions [data-online-action=mute]{background:transparent;color:#dfdec2;border-color:transparent;font-size:10px}
.online-reaction-bubble{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);max-width:95%;padding:8px 12px;border-radius:9px;background:#f5deb0;color:#244b3e;font-size:13px;box-shadow:0 4px 20px #102e2633;pointer-events:none;white-space:nowrap}
.online-reaction-bubble:empty{display:none}.online-fallback{text-align:center}.online-fallback[hidden]{display:none}.online-fallback p{font-size:13px;margin:0 0 8px}.online-fallback small{display:block;font-size:10px;color:#d2d8bc;margin-top:4px}.online-fallback .primary{font-size:13px;min-height:40px}.online-rematch-note{font-size:11px;color:#d2d8bc;margin:6px 0}
.online-footer>.online-text{font-size:11px;min-height:36px;padding:6px}.online-board .online-heading p{max-width:540px;margin-inline:auto;line-height:1.45}.online-board .online-actions>.online-text{flex-basis:100%;min-height:30px;padding:4px}.online-board .online-actions .secondary{font-size:12px;min-height:42px;padding:10px 14px}
@media(max-width:800px){body .page .layout .board.online-board .arena{grid-template-rows:104px minmax(160px,1fr) 114px 24px 88px}.online-reactions{gap:4px}.online-reactions button{font-size:10px;padding:6px}.online-board .handlabel{letter-spacing:1px!important}.online-board .online-heading h2{font-size:23px!important}body .page .layout .board.online-lobby-board .arena{grid-template-rows:auto auto 44px}}

/* Result margin and score share the heading's centre, with room for a departure notice. */
body .page .layout .board.online-board:has(.online-result-heading){height:max(760px,var(--playing-board-height))}
body .page .layout .board.online-board:has(.online-result-heading) .arena{grid-template-rows:128px minmax(160px,1fr) 114px 24px 88px}
.online-result-heading h2{margin-bottom:4px}.online-result-margin{display:block;font-size:22px;line-height:1.25;font-weight:600;color:#f6e4b4;margin-bottom:5px}
body .page .layout .board.online-board .online-final-score{margin:5px auto 0;text-align:center}
@media(max-width:800px){.online-result-margin{font-size:20px}}
/* An earned reward gets its own row instead of crowding match actions. */
body .page .layout .board.online-board:has(.online-rewards){height:auto;min-height:max(760px,var(--playing-board-height))}
body .page .layout .board.online-board:has(.online-rewards) .arena{grid-template-rows:128px 200px auto auto 24px 88px}
body .page .layout .board.online-board .online-rewards{grid-row:4;grid-column:1}
body .page .layout .board.online-board:has(.online-rewards) .online-problem{grid-row:5}
body .page .layout .board.online-board:has(.online-rewards) .online-footer{grid-row:6}