/* Scorecard detail + saved history. Uses the page's --wine/--ink/--card/--line/--cream variables. */
.sc { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:12px 0; }
.sc-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.sc-head .nm { font:800 18px Georgia, serif; } .sc-head .tot { font:900 28px system-ui; color:var(--wine); } .sc-head .tot small { font:600 13px system-ui; color:var(--muted); }
.sc-wine { font-size:13px; color:var(--muted); margin:2px 0 8px; }
.sc-sum { background:color-mix(in srgb, var(--gold) 14%, transparent); border-radius:10px; padding:9px 11px; font-size:14px; line-height:1.4; margin-bottom:6px; }
.sc-t { border-top:1px solid var(--line); padding:12px 0 6px; --c:var(--wine); }
.sc-th { display:flex; justify-content:space-between; align-items:center; font:900 12px system-ui; letter-spacing:.06em; text-transform:uppercase; }
.sc-th .pts { color:var(--c); font-size:15px; letter-spacing:0; }
.sc-dg { position:relative; height:50px; margin:8px 10px 2px; }
.sc-dg .rail { position:absolute; left:0; right:0; top:24px; height:6px; border-radius:3px; background:color-mix(in srgb, var(--c) 16%, transparent); }
.sc-dg .e { position:absolute; top:34px; font:600 9px system-ui; color:var(--muted); } .sc-dg .e.l { left:-3px; } .sc-dg .e.r { right:-6px; }
.sc-dg .gap { position:absolute; top:25px; height:4px; background:var(--c); opacity:.55; border-radius:2px; }
.sc-dg .you, .sc-dg .ans { position:absolute; top:17px; width:20px; height:20px; margin-left:-10px; }
.sc-dg .you i { display:block; width:20px; height:20px; border-radius:50%; background:var(--c); border:2.5px solid var(--card); box-shadow:0 0 0 1.5px var(--c); }
.sc-dg .ans i { display:block; width:15px; height:15px; margin:2px; transform:rotate(45deg); background:var(--card); border:2.5px solid var(--ink); }
.sc-dg .you span, .sc-dg .ans span { position:absolute; left:50%; transform:translateX(-50%); font:800 10px system-ui; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.sc-dg .you span { top:-17px; color:var(--c); } .sc-dg .ans span { top:27px; color:var(--ink); }
.sc-leg { display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-top:6px; }
.sc-leg b { font-weight:800; }
.sc-leg .good { color:#2e9e5b; } .sc-leg .cl { color:#b98900; } .sc-leg .miss { color:var(--c); }
.sc-ex { margin:6px 0 2px; } .sc-ex summary { cursor:pointer; font:700 13px system-ui; color:var(--wine); padding:4px 0; }
.sc-ex .body { font-size:14px; line-height:1.5; padding:2px 0 6px; } .sc-ex p { margin:0 0 7px; font-size:14px; line-height:1.5; }
.sc-ex .tipbox { background:color-mix(in srgb, var(--c) 9%, transparent); border-left:3px solid var(--c); border-radius:6px; padding:8px 10px; }
.sc-note { font-size:12px; color:var(--muted); line-height:1.4; margin-top:8px; }
.hrow { border-top:1px solid var(--line); } .hrow > summary { display:flex; align-items:center; gap:10px; padding:9px 0; cursor:pointer; list-style:none; font-weight:700; }
.hrow > summary::-webkit-details-marker { display:none; } .hrow > summary .big { margin-left:auto; font:900 20px system-ui; color:var(--wine); }
.hrow > summary .rk { width:22px; text-align:center; color:var(--muted); font-weight:800; }
.hrow > summary .chev { color:var(--muted); font-size:12px; }
.hist-badge { display:inline-block; font:800 10px system-ui; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:2px 8px; margin-left:6px; background:color-mix(in srgb, var(--wine) 14%, transparent); color:var(--wine); }
.hist-badge.p { background:color-mix(in srgb, #2e9e5b 16%, transparent); color:#2e9e5b; }
.score[data-name] { cursor:pointer; } .tapnote { text-align:center; font-size:12px; color:var(--muted); margin:2px 0 6px; }

/* All-time table on the History tab */
.alltime table { width:100%; border-collapse:collapse; font-size:14px; margin-top:4px; }
.alltime th { font:800 11px system-ui; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:right; padding:4px 6px; }
.alltime td { padding:7px 6px; border-top:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; }
.alltime th:nth-child(2), .alltime td:nth-child(2) { text-align:left; font-weight:700; }
.alltime td:first-child { color:var(--muted); width:22px; }
.alltime tr.me td { background:color-mix(in srgb, var(--wine) 10%, transparent); }
.alltime .mine { font-size:14px; margin:4px 0 8px; }

/* History tabs and My stats */
.htabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0 12px; }
.htabs button { padding:10px 2px; font:800 13px system-ui; border-radius:10px; background:var(--card); color:var(--ink); border:1.5px solid var(--line); width:100%; }
.htabs button.on { color:#fff; border-color:transparent; background:var(--wine); }
.st-who { display:flex; justify-content:space-between; align-items:center; font-size:18px; }
.st-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; text-align:center; }
.st-tiles div { background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:8px 2px; }
.st-tiles b { display:block; font:800 24px system-ui; color:var(--wine); } .st-tiles span { font:700 11px system-ui; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.st-row { margin:10px 0 2px; } .st-h { display:flex; justify-content:space-between; font-size:14px; font-weight:700; } .st-h b { color:var(--c); }
.st-bar { height:8px; border-radius:4px; background:var(--line); margin:5px 0; overflow:hidden; } .st-bar i { display:block; height:100%; background:var(--c); border-radius:4px; }
.st-m { font-size:12.5px; color:var(--muted); line-height:1.4; }
.st-b { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); } .st-b:first-of-type { border-top:0; }
.st-b .big { font:800 22px system-ui; color:var(--wine); }
.hs .names { display:flex; flex-wrap:wrap; gap:7px; } .hs .names .nm { width:auto; padding:9px 13px; border-radius:999px; font:700 14px system-ui; text-transform:none; letter-spacing:0; background:var(--cream); color:var(--ink); border:1.5px solid var(--line); }
.hs .names .nm.on { background:var(--wine); color:#fff; border-color:var(--wine); }