.board-match-overlay{position:absolute;inset:0;z-index:12;container-type:size;display:grid;place-items:center;padding:calc(14px * var(--ui-scale, 1));pointer-events:auto;background:transparent}
.board-match-overlay[hidden]{display:none!important}
.board-match-card{position:relative;box-sizing:border-box;width:min(calc(360px * var(--ui-scale, 1)),100%);max-height:100%;overflow:auto;padding:calc(25px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1)) calc(20px * var(--ui-scale, 1));border:1px solid #55534c;border-radius:calc(12px * var(--ui-scale, 1));background:#252522;color:#eeece5;box-shadow:0 calc(14px * var(--ui-scale, 1)) calc(50px * var(--ui-scale, 1)) #0008;text-align:center;font:max(11px, calc(14px * var(--ui-scale, 1)))/1.4 Roboto,Arial,sans-serif}
.board-match-card .board-match-close{position:absolute;right:calc(8px * var(--ui-scale, 1));top:calc(6px * var(--ui-scale, 1));border:0;background:none;color:#aaa;font-size:max(11px, calc(24px * var(--ui-scale, 1)));padding:calc(2px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));cursor:pointer}
.board-match-card p{margin:calc(8px * var(--ui-scale, 1)) 0}.board-match-card .board-match-kicker{color:#b6b4aa;font-size:max(11px, calc(12px * var(--ui-scale, 1)));padding:0 calc(9px * var(--ui-scale, 1));margin:0 0 calc(12px * var(--ui-scale, 1))}
.board-match-card h2{font-size:max(11px, calc(27px * var(--ui-scale, 1)));line-height:1.15;margin:0 0 calc(10px * var(--ui-scale, 1));color:#fff;font-weight:600}
.board-match-overlay[data-kind=won] h2{color:#b7d38e}.board-match-overlay[data-kind=lost] h2{color:#e2c0b5}
.board-match-detail{color:#d5d2c8}.board-match-points,.board-match-rating,.board-match-countdown{font-size:max(11px, calc(13px * var(--ui-scale, 1)));color:#bfbcb0}
.board-match-score{display:grid;gap:calc(2px * var(--ui-scale, 1));margin:calc(15px * var(--ui-scale, 1)) 0}.board-match-score strong{font-size:max(11px, calc(36px * var(--ui-scale, 1)));line-height:1.1;font-variant-numeric:tabular-nums}.board-match-score span{font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:#aaa79e}
.board-match-actions{display:grid;grid-template-columns:1fr 1fr;gap:calc(8px * var(--ui-scale, 1));margin-top:calc(18px * var(--ui-scale, 1))}.board-match-actions button{min-height:calc(40px * var(--ui-scale, 1));padding:calc(8px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));border:1px solid #525149;border-radius:calc(5px * var(--ui-scale, 1));background:#343431;color:#eee;cursor:pointer;font:500 max(11px, calc(13px * var(--ui-scale, 1)))/1.3 Roboto,Arial,sans-serif}
.board-match-actions .primary{grid-column:1/-1;background:#68afe6;color:#102330;border-color:#68afe6;font-size:max(11px, calc(15px * var(--ui-scale, 1)))}.board-match-actions button:disabled{opacity:.55;cursor:default}.board-match-actions button:hover:not(:disabled){filter:brightness(1.12)}
@container (max-height:420px){.board-match-overlay{padding:calc(6px * var(--ui-scale, 1))}.board-match-card{width:min(calc(340px * var(--ui-scale, 1)),100%);padding:calc(15px * var(--ui-scale, 1)) calc(18px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1))}.board-match-card h2{font-size:max(11px, calc(22px * var(--ui-scale, 1)));margin-bottom:calc(6px * var(--ui-scale, 1))}.board-match-card .board-match-kicker{margin-bottom:calc(7px * var(--ui-scale, 1))}.board-match-card p{margin:calc(5px * var(--ui-scale, 1)) 0}.board-match-score{margin:calc(7px * var(--ui-scale, 1)) 0}.board-match-score strong{font-size:max(11px, calc(28px * var(--ui-scale, 1)))}.board-match-actions{margin-top:calc(10px * var(--ui-scale, 1));gap:calc(6px * var(--ui-scale, 1))}.board-match-actions button{min-height:calc(34px * var(--ui-scale, 1))}}
.board-match-overlay[data-kind=cube]{align-items:end;padding:calc(12px * var(--ui-scale, 1));pointer-events:none;background:none}
.board-match-overlay[data-kind=cube] .board-match-card{width:min(calc(360px * var(--ui-scale, 1)),100%);padding:calc(12px * var(--ui-scale, 1));pointer-events:auto}
.board-match-overlay[data-kind=cube] h2{font-size:max(11px, calc(18px * var(--ui-scale, 1)));margin:0}
.board-match-overlay[data-kind=cube] .board-match-actions{margin-top:calc(10px * var(--ui-scale, 1));gap:calc(8px * var(--ui-scale, 1))}
.board-match-overlay[data-kind=cube] .board-match-actions button{min-height:calc(48px * var(--ui-scale, 1));font-size:max(11px, calc(14px * var(--ui-scale, 1)))}
.board-match-overlay[data-kind=cube] .board-match-actions .primary{grid-column:auto}

/* Round results remain visible while the server is already playing the next game.
   The notice never moves the board, intercepts gestures or pauses match clocks. */
.board-round-notice{position:absolute;z-index:13;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:max-content;max-width:calc(100% - calc(24px * var(--ui-scale, 1)));display:grid;gap:calc(8px * var(--ui-scale, 1));padding:calc(17px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1));border:1px solid #72552e;border-bottom:calc(3px * var(--ui-scale, 1)) solid #e6a34c;border-radius:calc(5px * var(--ui-scale, 1));background:#222221f5;box-shadow:0 calc(8px * var(--ui-scale, 1)) calc(30px * var(--ui-scale, 1)) #0008;text-align:center;color:#e9e7e1;pointer-events:none;font:max(11px, calc(15px * var(--ui-scale, 1)))/1.4 Roboto,Arial,sans-serif}
.board-round-notice[hidden]{display:none!important}
.board-round-notice strong{font-size:max(11px, calc(20px * var(--ui-scale, 1)));line-height:1.25;font-weight:600;color:#f5dfbd}
.board-round-notice span{color:#dedbd3;font-variant-numeric:tabular-nums}
@media(max-height:500px),(max-width:600px){.board-round-notice{padding:calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1));gap:calc(5px * var(--ui-scale, 1));font-size:max(11px, calc(13px * var(--ui-scale, 1)))}.board-round-notice strong{font-size:max(11px, calc(17px * var(--ui-scale, 1)))}}

/* A single result card shared by the game and analyzer. */
body.comfort-ui .board-match-overlay.has-result .board-match-card{width:min(calc(424px * var(--ui-scale, 1)),100%);padding:calc(26px * var(--ui-scale, 1)) calc(22px * var(--ui-scale, 1)) calc(15px * var(--ui-scale, 1));border:1px solid #494740;border-top:calc(3px * var(--ui-scale, 1)) solid #dea34e;border-radius:calc(8px * var(--ui-scale, 1));background:#232320;box-shadow:0 calc(18px * var(--ui-scale, 1)) calc(60px * var(--ui-scale, 1)) #0009}
.board-match-overlay.has-result h2{font-size:max(11px, calc(32px * var(--ui-scale, 1)));font-weight:700;letter-spacing:-.5px;color:#f3f1e9;margin:0 0 calc(7px * var(--ui-scale, 1))}
.board-match-overlay.has-result .board-match-kicker{margin:0 calc(18px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:#a9a69d}
.board-match-overlay.has-result .board-match-detail{font-size:max(11px, calc(14px * var(--ui-scale, 1)));margin:0 0 calc(18px * var(--ui-scale, 1));color:#c6c3b9}
.board-match-summary{display:flex;justify-content:center;gap:calc(14px * var(--ui-scale, 1))}
.board-match-summary[hidden],.board-match-stats[hidden],.board-match-rating[hidden],.board-match-score[hidden]{display:none}
.board-match-overlay.has-result .board-match-score,.board-match-overlay.has-result .board-match-rating{display:grid;justify-content:center;align-content:center;gap:calc(4px * var(--ui-scale, 1));margin:0;flex:1;min-width:0;min-height:calc(74px * var(--ui-scale, 1));background:#2b2b27;border-radius:calc(5px * var(--ui-scale, 1))}
.board-match-overlay.has-result .board-match-score[hidden],.board-match-overlay.has-result .board-match-rating[hidden]{display:none}
.board-match-overlay.has-result .board-match-score strong{font-size:max(11px, calc(34px * var(--ui-scale, 1)));font-weight:700;letter-spacing:calc(3px * var(--ui-scale, 1));white-space:nowrap}
.board-match-score b[data-player="0"]{color:#dc7077}.board-match-score b[data-player="1"]{color:#4bb1d8}
.board-match-overlay.has-result .board-match-rating{grid-template-columns:auto auto;column-gap:calc(5px * var(--ui-scale, 1))}
.board-match-rating strong{font-size:max(11px, calc(30px * var(--ui-scale, 1)));line-height:1.1;color:#eee9db;font-variant-numeric:tabular-nums}
.board-match-rating small{align-self:center;font-size:max(11px, calc(14px * var(--ui-scale, 1)));font-weight:600;color:#8fba98}.board-match-rating small[data-direction=down]{color:#d58c83}
.board-match-rating span{grid-column:1/-1;color:#aaa79e;font-size:max(11px, calc(12px * var(--ui-scale, 1)))}
.board-match-overlay.has-result .board-match-points{margin:calc(8px * var(--ui-scale, 1)) 0 0;font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:#aaa79e}
.board-match-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8px * var(--ui-scale, 1));margin:calc(16px * var(--ui-scale, 1)) 0 0}
.board-match-stats>div{display:grid;grid-template-columns:calc(22px * var(--ui-scale, 1)) auto;justify-content:center;align-content:center;align-items:center;gap:calc(5px * var(--ui-scale, 1));min-height:calc(76px * var(--ui-scale, 1));padding:calc(9px * var(--ui-scale, 1)) calc(5px * var(--ui-scale, 1));background:#2d2d29;border-radius:calc(6px * var(--ui-scale, 1))}
.board-match-stats svg,.board-match-actions svg{width:calc(20px * var(--ui-scale, 1));height:calc(20px * var(--ui-scale, 1));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#d9b174}
.board-match-stats strong{font-size:max(11px, calc(23px * var(--ui-scale, 1)));font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:#f0ede4}
.board-match-stats span{grid-column:1/-1;font-size:max(11px, calc(12px * var(--ui-scale, 1)));line-height:1.25;color:#b8b5aa}
.board-match-stats [data-stat=accuracy] svg{color:#8db59b}.board-match-stats [data-stat=error] svg{color:#cf867c}
body.comfort-ui .board-match-overlay.has-result .board-match-actions{margin-top:calc(18px * var(--ui-scale, 1));gap:calc(8px * var(--ui-scale, 1))}
body.comfort-ui .board-match-overlay.has-result .board-match-actions button{min-height:calc(45px * var(--ui-scale, 1));font-size:max(11px, calc(15px * var(--ui-scale, 1)));border:1px solid #45453e;border-radius:calc(5px * var(--ui-scale, 1));background:#30302c;color:#e5e2d8;padding:calc(9px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));transition:background .12s}
body.comfort-ui .board-match-overlay.has-result .board-match-actions .primary{display:flex;align-items:center;justify-content:center;gap:calc(9px * var(--ui-scale, 1));min-height:calc(54px * var(--ui-scale, 1));font-size:max(11px, calc(19px * var(--ui-scale, 1)));font-weight:700;background:#2f2e29;border-color:#665235;border-bottom:calc(3px * var(--ui-scale, 1)) solid #e4a34a;color:#f1d6aa}
body.comfort-ui .board-match-overlay.has-result .board-match-actions .quiet{grid-column:1/-1;min-height:calc(28px * var(--ui-scale, 1));padding:calc(3px * var(--ui-scale, 1));border-color:transparent;background:transparent;font-size:max(11px, calc(12px * var(--ui-scale, 1)));color:#aaa79e}
body.comfort-ui .board-match-overlay.has-result .board-match-actions button:hover:not(:disabled){background:#3a3932;filter:none}
.board-match-actions button:focus-visible,.board-match-close:focus-visible{outline:calc(2px * var(--ui-scale, 1)) solid #e4a34a;outline-offset:calc(2px * var(--ui-scale, 1))}
@container (max-height:460px){
 body.comfort-ui .board-match-overlay.has-result .board-match-card{padding:calc(16px * var(--ui-scale, 1)) calc(17px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));width:min(calc(400px * var(--ui-scale, 1)),100%)}
 .board-match-overlay.has-result h2{font-size:max(11px, calc(26px * var(--ui-scale, 1)))}.board-match-overlay.has-result .board-match-detail{margin-bottom:calc(10px * var(--ui-scale, 1))}
 .board-match-overlay.has-result .board-match-kicker{margin-bottom:calc(7px * var(--ui-scale, 1))}
 .board-match-overlay.has-result .board-match-score,.board-match-overlay.has-result .board-match-rating{min-height:calc(58px * var(--ui-scale, 1))}
 .board-match-overlay.has-result .board-match-score strong{font-size:max(11px, calc(29px * var(--ui-scale, 1)))}.board-match-rating strong{font-size:max(11px, calc(26px * var(--ui-scale, 1)))}
 .board-match-stats{margin-top:calc(10px * var(--ui-scale, 1));gap:calc(6px * var(--ui-scale, 1))}.board-match-stats>div{min-height:calc(60px * var(--ui-scale, 1));padding:calc(6px * var(--ui-scale, 1)) calc(3px * var(--ui-scale, 1))}.board-match-stats strong{font-size:max(11px, calc(20px * var(--ui-scale, 1)))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions{margin-top:calc(12px * var(--ui-scale, 1));gap:calc(6px * var(--ui-scale, 1))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions button{min-height:calc(38px * var(--ui-scale, 1));padding:calc(6px * var(--ui-scale, 1));font-size:max(11px, calc(14px * var(--ui-scale, 1)))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions .primary{min-height:calc(44px * var(--ui-scale, 1));font-size:max(11px, calc(17px * var(--ui-scale, 1)))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions .quiet{min-height:calc(24px * var(--ui-scale, 1));font-size:max(11px, calc(12px * var(--ui-scale, 1)))}
}
@container (max-height:340px){
 body.comfort-ui .board-match-overlay.has-result .board-match-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:calc(8px * var(--ui-scale, 1));width:min(calc(470px * var(--ui-scale, 1)),100%);padding:calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(6px * var(--ui-scale, 1))}
 .board-match-overlay.has-result :is(.board-match-kicker,h2,.board-match-detail,.board-match-points,.board-match-countdown,.board-match-actions){grid-column:1/-1}
 .board-match-overlay.has-result .board-match-kicker{font-size:max(10px, calc(10px * var(--ui-scale, 1)));margin-bottom:calc(4px * var(--ui-scale, 1))}
 .board-match-overlay.has-result h2{font-size:max(11px, calc(23px * var(--ui-scale, 1)));margin-bottom:calc(4px * var(--ui-scale, 1))}
 .board-match-overlay.has-result .board-match-detail{font-size:max(11px, calc(12px * var(--ui-scale, 1)));margin:0 0 calc(8px * var(--ui-scale, 1))}
 .board-match-overlay.has-result .board-match-summary{grid-row:4;gap:calc(6px * var(--ui-scale, 1))}
 .board-match-overlay.has-result .board-match-score,.board-match-overlay.has-result .board-match-rating{min-height:calc(54px * var(--ui-scale, 1))}
 .board-match-overlay.has-result .board-match-score strong{font-size:max(11px, calc(24px * var(--ui-scale, 1)));letter-spacing:1px}.board-match-rating strong{font-size:max(11px, calc(22px * var(--ui-scale, 1)))}
 .board-match-overlay.has-result .board-match-score span,.board-match-rating span{font-size:max(10px, calc(10px * var(--ui-scale, 1)))}
 .board-match-overlay.has-result .board-match-stats{grid-row:4;margin:0;gap:calc(4px * var(--ui-scale, 1))}
 .board-match-stats>div{min-height:calc(54px * var(--ui-scale, 1));gap:calc(3px * var(--ui-scale, 1));grid-template-columns:1fr;padding:calc(4px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1))}
 .board-match-stats svg{display:none}.board-match-stats span{font-size:max(10px, calc(10px * var(--ui-scale, 1)))}.board-match-stats strong{font-size:max(11px, calc(18px * var(--ui-scale, 1)))}
 .board-match-overlay.has-result .board-match-points{margin-top:calc(4px * var(--ui-scale, 1));font-size:max(10px, calc(10px * var(--ui-scale, 1)))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions{margin-top:calc(8px * var(--ui-scale, 1));gap:calc(5px * var(--ui-scale, 1))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions .primary{min-height:calc(38px * var(--ui-scale, 1));font-size:max(11px, calc(16px * var(--ui-scale, 1)))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions button{min-height:calc(34px * var(--ui-scale, 1));font-size:max(11px, calc(13px * var(--ui-scale, 1)))}
 body.comfort-ui .board-match-overlay.has-result .board-match-actions .quiet{min-height:calc(22px * var(--ui-scale, 1));font-size:max(11px, calc(11px * var(--ui-scale, 1)))}
}