.pair-page{--pair-panel:#fff;--pair-ink:#1c3d3d;--pair-accent:#4a7d66;--pair-line:#00000010;background:#f3f7f4;color:var(--pair-ink)}.pair-page.dark{--pair-panel:#1d2122;--pair-ink:#fff;--pair-line:#ffffff13;background:#141819}
.pair-page .header-inner,.pair-layout{width:100%;max-width:1800px;margin:auto}.pair-page .header-inner{padding:0 24px}.pair-layout{display:grid;grid-template-columns:302px minmax(0,1fr);gap:17px;padding:20px;flex:1;min-width:0;overflow:visible}.pair-sidebar{display:flex;flex-direction:column;gap:13px;min-width:0;grid-column:auto;order:0}.pair-panel{padding:15px;border-radius:18px;border:1px solid var(--pair-line);background:var(--pair-panel)}.pair-panel h2{font-size:17px;margin:0 0 13px;color:var(--pair-ink)}.pair-options{display:flex;gap:7px}.pair-options button{width:50%;height:40px;border:0;border-radius:9px;background:#0000000b;font-size:13px;font-weight:600;color:var(--pair-ink)}.dark .pair-options button{background:#ffffff0e}.pair-options .selected,.dark .pair-options .selected{background:var(--pair-accent);color:white}
.pair-panel output{display:block;text-align:right;font-size:13px;font-weight:600;margin-bottom:12px}.pair-panel input[type=range]{width:100%;height:20px;accent-color:var(--pair-accent);margin:0;cursor:pointer}.pair-panel input:disabled{opacity:.5;cursor:default}.time-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:7px}.pair-actions{display:grid;gap:11px;padding-top:25px;padding-bottom:18px}.pair-primary,.pair-secondary{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:11px;height:46px;font-size:16px;font-weight:600;padding:0 16px;color:var(--pair-ink);background:#0000000d}.pair-primary{background:var(--pair-accent);color:#fff}.dark .pair-secondary{background:#ffffff13}.pair-primary svg,.pair-secondary svg{width:18px;height:18px;fill:currentColor}.pair-page button:disabled{opacity:.42;cursor:default}.pair-page button{touch-action:manipulation}
.pair-scores{display:flex}.pair-scores>div{width:50%;display:flex;flex-direction:column;align-items:center;gap:9px}.pair-scores>div+div{border-left:1px solid var(--pair-line)}.pair-scores span{display:flex;gap:6px;align-items:center;font-size:12px}.pair-scores b{font-weight:500}.pair-scores i{width:14px;height:14px;border-radius:50%;display:inline-block}.red-dot{background:#f13d40}.black-dot{background:#050606;border:1px solid #ffffff22}.pair-scores strong{font-size:28px}.pair-stats hr{border:0;border-top:1px solid var(--pair-line);margin:15px 0}.pair-stats h3{font-size:13px;margin:0 0 12px}.pair-stats>strong{font-size:20px;font-variant-numeric:tabular-nums}.pair-stats progress{width:100%;height:12px;display:block;border:0;border-radius:10px;overflow:hidden;background:#9993;color:var(--pair-accent)}.pair-stats progress::-webkit-progress-bar{background:#9993;border-radius:10px}.pair-stats progress::-webkit-progress-value{background:var(--pair-accent);border-radius:10px}.pair-stats progress::-moz-progress-bar{background:var(--pair-accent);border-radius:10px}#time-left{display:block;text-align:center;font-size:17px;margin-top:11px}
.pair-surface{position:relative;display:grid;place-items:center;background:var(--pair-panel);border:1px solid var(--pair-line);border-radius:20px;min-width:0;min-height:0;padding:22px}.pair-boards{display:flex;align-items:center;justify-content:center;gap:27px;width:100%;min-width:0}.pair-board-group{width:var(--board-side,42%);min-width:0;flex:none}.pair-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-radius:13px;overflow:hidden}.pair-tile{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:9px;background:#fcfaf2;border:1px solid #e4e1da;border-radius:9px;min-width:0;width:100%;box-shadow:0 1px 2px #0000000b}.pair-tile img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.pair-page .pair-tile:disabled{opacity:1}.pair-tile.match{border:3.5px solid #39b765}.pair-tile.expired{border:3.5px solid #ed9b26}.pair-tile.wrong{border:3.5px solid #ed4747}.pair-tile.shaking{animation:pair-shake var(--shake-duration,.3s) linear}.player-label{text-align:center;font-size:14px;font-weight:600;margin:9px 0 0}.pair-boards.stacked{flex-direction:column;gap:13px}
@keyframes pair-shake{0%,100%{transform:translateX(0)}12.5%,37.5%,62.5%,87.5%{transform:translateX(4px)}25%,50%,75%{transform:translateX(-4px)}}
#pair-result{position:absolute;inset:0;display:grid;place-items:center;background:#12231e44;border-radius:20px;padding:20px}.pair-result-card{max-width:100%;padding:32px;background:var(--pair-panel);border:1px solid var(--pair-line);border-radius:20px;box-shadow:0 12px 40px #0003;text-align:center}.pair-result-card h2{font-size:30px;margin:0 0 15px}.pair-result-card p{font-size:27px;margin:0 0 22px;font-variant-numeric:tabular-nums}.pair-result-card>div,.dialog-actions{display:flex;gap:12px;justify-content:center}.pair-page dialog{background:var(--pair-panel);color:var(--pair-ink);max-height:85dvh;overflow:auto}.pair-page dialog p{color:var(--muted)}.pair-page dialog::backdrop{background:#10201baa}.dialog-actions{margin-top:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1000px){.pair-page{display:grid;grid-template-rows:66px minmax(0,1fr);height:100dvh;min-height:740px}.pair-page header{height:66px}.pair-layout{height:100%;min-height:0}.pair-surface{height:100%}}
@media(min-width:1000px) and (max-height:800px){.pair-page{min-height:650px}.pair-layout{padding:14px 20px}.pair-sidebar{gap:10px}.pair-panel{padding:12px 15px}.pair-panel h2{margin-bottom:10px}.pair-options button{height:36px}.pair-actions{padding-top:15px;gap:8px}.pair-actions button{height:40px}.pair-stats hr{margin:10px 0}.pair-stats h3{margin-bottom:8px}}
@media(max-width:999px){.pair-layout{display:flex;flex-direction:column;padding:14px;gap:14px}.pair-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pair-actions{padding:15px}.pair-surface{min-height:420px}.pair-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.pair-stats h2,.pair-scores{grid-column:1/-1}.pair-stats h2{margin:0}.pair-stats hr{display:none}.pair-stats h3{margin:0;align-self:center}.pair-stats>strong{font-size:17px;text-align:right}.pair-stats progress{grid-column:1/-1}.pair-stats #time-left{margin:0;grid-column:1/-1}.pair-stats h3:last-of-type{grid-column:1/-1}.pair-scores strong{font-size:22px}.pair-scores>div{gap:4px}}
@media(max-width:520px){.pair-layout{padding:10px;gap:10px}.pair-panel{padding:12px;border-radius:15px}.pair-panel h2{font-size:16px}.pair-options button{font-size:11px}.pair-actions button{font-size:14px;height:42px}.pair-scores span{font-size:11px}.pair-surface{padding:14px;min-height:0}.pair-tile{padding:6px}.pair-result-card{padding:24px 16px}.pair-result-card h2{font-size:25px}.pair-result-card button{font-size:14px;padding:0 12px}.pair-page .header-inner{padding:0 18px}}
@media(prefers-reduced-motion:reduce){.pair-tile.shaking{animation:none}}

#pair-phone-score{display:none}.pair-mobile-mode{margin:16px 0}.pair-mobile-mode h3{font-size:15px;margin:0 0 8px}
.pair-mobile-bar,#pair-mobile-thinking{display:none}
#pair-settings-dialog{max-width:420px;width:calc(100% - 28px);padding:20px}.mobile-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.mobile-settings-heading h2{margin:0;font-size:22px}.mobile-settings-heading button{border:0;background:none;color:inherit;font-size:28px;padding:4px 8px}.mobile-settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--pair-line);font-size:15px}.mobile-settings-row button,.mobile-settings-links button,.mobile-settings-links a{border:1px solid var(--pair-line);background:var(--pair-panel);color:inherit;border-radius:10px;padding:10px 16px;font-weight:600}.mobile-settings-row button.selected,#pair-mobile-sound[aria-pressed=true]{background:var(--pair-accent);color:white}.mobile-theme-options{display:flex;gap:6px}.mobile-settings-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.mobile-settings-links a{text-align:center;text-decoration:none;font-size:13px}
@media(max-width:600px){
 .pair-page{height:var(--pair-viewport-height,100dvh);min-height:0;min-width:0;-webkit-text-size-adjust:100%;--pair-panel:#f4f6f1;--pair-line:#d7dfd9;background:#edf1ec}
 .pair-page.dark{--pair-panel:#1d2224;--pair-line:#303637;--muted:#989e9d;background:#141819}
 .pair-page>header{display:none}
 .pair-page .pair-mobile-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;flex:none;min-height:64px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border-bottom:1px solid var(--pair-line);background:var(--pair-panel)}
 .dark .pair-mobile-bar{background:#191e20}
 .pair-mobile-bar h1{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:0;margin:0}
 .pair-back{display:inline-flex;align-items:center;gap:5px;width:max-content;min-height:44px;color:inherit;text-decoration:none;font-size:17px}.pair-back svg{width:17px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
 #pair-settings{justify-self:end;display:grid;place-items:center;width:44px;height:44px;border:0;padding:8px;background:none;color:inherit}#pair-settings svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

 .pair-page .pair-layout{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;margin:0;gap:9px;padding:9px max(9px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));overflow:visible}
 .pair-sidebar{display:contents}.pair-sidebar>.pair-panel:nth-child(1),.pair-sidebar>.pair-actions{display:none}
 .pair-sidebar>.pair-panel:nth-child(2){order:1;flex:none;display:grid;grid-template-columns:1fr auto;gap:7px;padding:7px 10px;border-radius:20px}.pair-sidebar>.pair-panel:nth-child(2) h2{font-size:15px;line-height:20px;margin:0;font-weight:700}.pair-page #time-setting{font-size:15px;line-height:20px;margin:0}
 .pair-page #round-time{grid-column:1/-1;width:100%;height:26px;min-width:0;padding:0;border:0;margin:0;background:transparent;appearance:none;-webkit-appearance:none;--time-fill:48.28%}
 #round-time::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:linear-gradient(to right,var(--pair-accent) var(--time-fill),#8883 var(--time-fill))}#round-time::-moz-range-track{height:6px;border-radius:9px;background:linear-gradient(to right,var(--pair-accent) var(--time-fill),#8883 var(--time-fill))}
 #round-time::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:39px;height:25px;margin-top:-9.5px;border:0;border-radius:18px;background:#fff;box-shadow:0 1px 3px #0002}#round-time::-moz-range-thumb{width:39px;height:25px;border:0;border-radius:18px;background:#fff;box-shadow:0 1px 3px #0002}
 .time-labels{display:none}.pair-page #pair-new{grid-column:1/-1;width:100%;height:40px;min-height:40px;border-radius:14px;font-size:17px;background:var(--pair-accent);color:#fff}
 .pair-page .pair-surface{order:2;flex:1;min-height:0;height:auto;position:relative;background:transparent;border:0;padding:0;border-radius:0}
 .pair-page .pair-boards,.pair-page .pair-boards.stacked{height:100%;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:8px}
 .pair-page .pair-board-group{width:var(--board-side,250px);max-width:100%;padding:6px;border:1px solid var(--pair-line);border-radius:20px;background:var(--pair-panel)}
 .pair-page .pair-board{width:100%;aspect-ratio:1;border-radius:13px;gap:2px}.pair-page .pair-tile{padding:7px;border-radius:11px;background:#fcfaf2;border:1px solid #e4e1da}.pair-page .pair-tile.match{border:3.5px solid #39b765}.pair-page .pair-tile.expired{border:3.5px solid #ed9b26}.pair-page .pair-tile.wrong{border:3.5px solid #ed4747}
 .pair-page .player-label{font-size:12px;line-height:16px;height:16px;margin:4px 0 0}
 .pair-page .pair-stats{order:3;flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:0;width:100%;height:48px;padding:8px 10px;border-radius:18px}
 .pair-stats h2,.pair-stats h3,.pair-stats hr,.pair-stats .pair-scores,.pair-stats #time-left{display:none}
 .pair-page #pair-phone-score{display:flex;align-items:center;justify-content:center;height:30px;min-width:0;font-size:20px;font-weight:700;line-height:1.2;white-space:nowrap}
 .pair-page #round-number{display:flex;align-items:center;justify-content:center;height:30px;border-left:1px solid var(--pair-line);border-right:1px solid var(--pair-line);font-size:20px;line-height:1.2;white-space:nowrap}
 .pair-page #time-progress{grid-column:auto;width:calc(100% - 26px);margin:auto;height:8px}
 .pair-page #pair-result{border-radius:20px}.pair-page .pair-result-card{padding:22px 16px;max-width:100%}.pair-page .pair-result-card h2{font-size:24px}.pair-page .pair-result-card button{font-size:14px;min-height:42px;padding:0 12px}
 .pair-page #pair-loading{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:var(--pair-panel);border-radius:20px;margin:0;padding:20px}
}
@media(max-width:600px) and (max-height:760px){
 .pair-page .pair-mobile-bar{min-height:52px;padding-top:4px;padding-bottom:4px}.pair-page .pair-layout{gap:7px;padding-top:7px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.pair-sidebar>.pair-panel:nth-child(2){padding:6px 9px;gap:5px}.pair-page #pair-new{height:36px;min-height:36px}.pair-page .pair-stats{height:44px;padding:6px 8px}.pair-page .pair-board-group{padding:5px;border-radius:17px}.pair-page .pair-tile{padding:5px;border-radius:9px}
}