/* Pulsified Play: online 1v1. Builds on calculator.css + play.css tokens (paper, ink, coral). */
.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}

.vs-rules{list-style:none;counter-reset:r;padding:0;margin:22px 0 0;display:grid;gap:12px;max-width:230px}
.vs-rules li{counter-increment:r;font-size:12px;line-height:1.6;color:var(--muted-strong);padding-left:26px;position:relative}
.vs-rules li:before{content:counter(r);position:absolute;left:0;top:1px;width:18px;height:18px;border:1px solid #273d3b55;border-radius:50%;font:11px/17px monospace;text-align:center;color:var(--ink)}
.vs-rules b{color:var(--ink)}
.conn{margin:0 0 14px;font:11px/1.7 monospace;letter-spacing:.5px;color:var(--muted-strong);padding-left:16px;position:relative}
.conn:before{content:'';position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:50%;background:#a9a497}
.conn[data-kind=live]:before{background:#467A78}
.conn[data-kind=warn]{color:#9b4a36}.conn[data-kind=warn]:before{background:#bd583e}

/* The state card: a sheet of paper on the desk */
.vs-card{position:relative;background:var(--paper);border:1px solid #c8bba1;box-shadow:1px 6px 18px #4943332a;padding:26px 22px 22px;text-align:center;transform:rotate(-.6deg);border-radius:3px;outline:none}
.vs-card[hidden]{display:none}
.vs-card:before{content:'';position:absolute;width:78px;height:22px;background:#d2c8ab99;top:-9px;left:calc(50% - 39px);transform:rotate(4deg)}
.vs-card h2{font:29px/1.15 Georgia,serif;margin:12px 0 10px}
.vs-card .result{font:12px/1.8 monospace;margin:8px 0}
.vs-card .final-score{font-size:58px;margin:6px 0}
.vs-card .restart{margin-top:12px}
.restart.small{width:auto;padding:10px 14px;margin-top:8px;font-size:12px}
.vs-actions{display:grid;gap:0}
.form-error{font:11px/1.6 monospace;color:#9b4a36;min-height:0;margin:10px 0 0}
.form-error:empty{display:none}

.vs-field{border:0;margin:18px 0 0;padding:0;text-align:left}
.vs-field legend{font:11px monospace;letter-spacing:1px;padding:0;margin-bottom:9px;color:var(--ink)}
.grade-chips{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.grade-chip{position:relative;display:block;cursor:pointer}
.grade-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.grade-chip span:first-of-type{display:grid;place-items:center;min-height:40px;border:1px solid #273d3b45;border-radius:5px;background:#fffdf1;font:13px monospace;color:var(--ink);transition:background .12s,color .12s}
.grade-chip.pm84 span:first-of-type{border-style:dashed}
.grade-chip input:checked + span{background:var(--ink);color:#fffdf1;border-color:var(--ink);border-style:solid}
.grade-chip input:focus-visible + span{outline:3px solid #b84b32;outline-offset:2px}
.chip-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip-preset{border:1px solid #273d3b45;background:transparent;border-radius:14px;padding:6px 10px;min-height:32px;font:11px monospace;color:var(--ink)}
.chip-preset:hover{border-color:var(--coral)}
.clock-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.clock-option{position:relative;display:block;cursor:pointer}
.clock-option input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.clock-option span{display:grid;place-items:center;min-height:40px;border:1px solid #273d3b45;border-radius:5px;background:#fffdf1;font:12px monospace;color:var(--ink)}
.clock-option input:checked + span{background:#bd583e;border-color:#bd583e;color:#fffdf1}
.clock-option input:focus-visible + span{outline:3px solid #b84b32;outline-offset:2px}
.rules-line{font:11px/1.7 monospace;color:var(--muted-strong);margin:14px 0 2px}

.share{margin:14px 0 4px;text-align:left}
.share-label{display:block;font:11px monospace;letter-spacing:1px;color:var(--muted-strong);margin-bottom:6px}
.share-url{display:block;width:100%;padding:10px 8px;border:1px dashed #273d3b70;border-radius:5px;background:#fffdf1;color:var(--ink);font:12px monospace}
.vs-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
.vs-scores span{display:block;border:1px solid #273d3b30;border-radius:5px;padding:10px 6px}
.vs-scores small{display:block;font:11px monospace;letter-spacing:1px;color:var(--muted-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-scores b{display:block;font:40px Georgia,serif;color:#9b4a36;margin-top:2px}

#turn[hidden]{display:none}
#turn .stats span:last-child strong{color:#9b4a36}

.nick-form{margin:0 0 26px}
.nick-row{display:flex;gap:8px;align-items:end;margin-top:4px}
.nick-row input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid #273d3b4a;border-radius:0;padding:10px 0;color:var(--ink);font:13px monospace;letter-spacing:1px}
.nick-save{border:1px solid #273d3b60;background:transparent;border-radius:5px;padding:8px 12px;min-height:38px;font:11px monospace;color:var(--ink)}
.match-list{margin:12px 0 18px}
.match-list ul{list-style:none;padding:0;margin:0 0 16px}
.ml-group h3{font:11px monospace;letter-spacing:1px;margin:0 0 6px;color:var(--muted-strong)}
.ml-group.yours h3{color:#9b4a36}
.match-item{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #273d3b1f;padding:10px 0;color:var(--ink);min-height:44px}
.match-item:hover b,.match-item.current b{color:#9b4a36}
.mi-top{display:flex;justify-content:space-between;gap:8px;font:12px monospace}
.mi-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-top em{font-style:normal;color:var(--muted-strong);white-space:nowrap}
.ml-group.yours .mi-top em{color:#9b4a36}
.match-item small{display:block;font:11px/1.5 monospace;color:var(--muted-strong);margin-top:4px}

@media(max-width:900px){.versus-page .intro .vs-rules{display:none}}
@media(max-width:600px){.vs-card{padding:24px 16px 18px;transform:none}.grade-chips{grid-template-columns:repeat(5,minmax(0,1fr))}.clock-options{grid-template-columns:repeat(3,minmax(0,1fr))}.vs-card h2{font-size:25px}}
/* The leaderboard's numbered list style (calculator.css .board li) doesn't apply here. */
.board .match-list li{display:block;padding:0;border:0;font:inherit;counter-increment:none}
.board .match-list li:before{content:none}
.nick-form .settings-help{color:var(--muted-strong)}