@import url('/assets/css/fonts.css');
/* Broughty Bowling Club brand – navy fields, thin gold rules, Poppins. No gradients, no shadows.
   Contrast (WCAG AA): white on navy 11.2:1 · gold on dark navy 5.3:1 · dark navy on gold 5.3:1 · navy on white 11.2:1.
   Gold is never used for small text on white/linen (2.7:1) – only for rules, borders and on dark navy. */
:root{--navy:#143D63;--gold:#B39A5B;--dark:#0F2A47;--white:#FFFFFF;--linen:#F4F1EA;
  --text:#143D63;--muted:#55657A;--line:#DDD7C8;--danger:#8E2A2A;--radius:6px;
  --font:'Poppins',Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-weight:400;line-height:1.5;background:var(--linen);color:var(--text);min-height:100vh}
a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
.hidden{display:none!important}
.label,.timer-label{font-weight:500;text-transform:uppercase;letter-spacing:.14em}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- Header: dark navy field, lockup with clear space, gold hairline ---- */
.app-header{background:var(--dark);color:var(--white);padding:1.5rem 1rem 1.25rem;text-align:center;border-bottom:2px solid var(--gold)}
.brand-lockup{display:block;width:300px;max-width:80vw;height:auto;margin:0 auto .75rem;padding:0}
.title{margin:0 0 .5rem;font-size:clamp(1rem,3vw,1.5rem);font-weight:700;letter-spacing:.01em}
.timer{font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,5vw,2.2rem);font-weight:700;color:var(--gold);letter-spacing:.06em}

/* ---- Scoring board: navy fields ---- */
.board{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;padding:1.5rem 1rem;max-width:1100px;margin:0 auto}
.half{background:var(--navy);color:var(--white);border-radius:var(--radius);padding:1.75rem 1.25rem;text-align:center;border-top:5px solid var(--gold)}
.pname{margin:0;font-size:clamp(1.2rem,4vw,2rem);font-weight:700;word-break:break-word}
.score{font-size:clamp(4rem,16vw,8rem);font-weight:700;color:var(--white);line-height:1.1;margin:.5rem 0 1.25rem;font-variant-numeric:tabular-nums;
  border-top:1px solid rgba(179,154,91,.6);border-bottom:1px solid rgba(179,154,91,.6);padding:.5rem 0}
.btns{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.75rem 1.4rem;border:1px solid var(--navy);border-radius:var(--radius);
  font:inherit;font-weight:600;font-size:1rem;letter-spacing:.04em;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s;
  background:var(--navy);color:var(--white);touch-action:manipulation}
.btn:hover{background:var(--dark)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.add{font-size:1.6rem;font-weight:700;min-height:72px;background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.55)}
.btn.add:hover{background:var(--dark);border-color:var(--gold)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:inset 0 -3px 0 var(--gold)}
.btn.primary:hover{background:var(--dark)}
.btn.secondary{background:var(--white);color:var(--navy);border:1px solid var(--navy)}
.btn.secondary:hover{background:var(--linen)}
.btn.danger{background:var(--dark);color:var(--white);border:1px solid var(--gold)}
.btn.danger:hover{background:#0a1f35}
.btn.link{background:transparent;color:var(--navy);border:1px solid var(--gold)}
.btn.link:hover{background:var(--white)}
.app-header .btn.link{color:var(--white);border-color:var(--gold)}
.app-header .btn.link:hover{background:var(--navy)}
.app-header .btn.secondary{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6)}
.app-header .btn.secondary:hover{background:var(--navy)}
.app-header .btn.primary{background:var(--navy);border-color:var(--gold)}
.btn.small{min-height:44px;font-size:.9rem;padding:.5rem 1rem}

/* ---- Cards & layout ---- */
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--line);padding:1.25rem 1.5rem}
.ends{max-width:380px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:.95rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;border-top:2px solid var(--gold)}
.ends strong{font-size:2.2rem;color:var(--navy);font-weight:700;letter-spacing:0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;padding:1.25rem 1rem}
.status{text-align:center;color:var(--muted);min-height:1.5em;margin:0 1rem 2rem;font-size:.9rem}
.wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1rem 3rem}
.section{color:var(--navy);font-weight:700;margin:2rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--gold);display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.25rem}
.match{border-top:3px solid var(--navy)}
.match .date{color:var(--muted);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.6rem}
.match .line{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.match .line strong{font-weight:700;font-variant-numeric:tabular-nums}
.match .line.win{font-weight:700}
.match .line.win strong::after{content:'';display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);margin-left:.45rem;vertical-align:middle}
.meta{display:block;color:var(--muted);font-size:.85rem;margin:.5rem 0}
.files{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem}
.file{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;word-break:break-all}
.empty{color:var(--muted)}
@media (max-width:640px){.board{grid-template-columns:1fr 1fr;gap:.6rem;padding:.75rem .5rem}.half{padding:1rem .6rem}.btns{gap:.5rem}.btn.add{min-height:64px}}

/* ---- Modals & toasts ---- */
.modal{position:fixed;inset:0;background:rgba(15,42,71,.78);display:none;align-items:center;justify-content:center;padding:1rem;z-index:10}
.modal.open{display:flex}
.modal-box{background:var(--white);border-radius:var(--radius);padding:2rem;width:100%;max-width:440px;display:flex;flex-direction:column;gap:1.1rem;border-top:5px solid var(--gold);max-height:92vh;overflow:auto}
.modal-box.wide{max-width:660px}
.modal-box h2{margin:0;color:var(--navy);font-weight:700;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.modal-box label{display:flex;flex-direction:column;gap:.4rem;font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--navy)}
.modal-box input,.modal-box select,.toolbar select,.toolbar input,label.inline select{font:inherit;font-size:1.05rem;font-weight:400;text-transform:none;letter-spacing:0;padding:.75rem .9rem;border:1px solid #B9B2A1;border-radius:var(--radius);background:var(--white);color:var(--text)}
.modal-box input:focus,.modal-box select:focus,.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold)}
.modal-box p{margin:0;color:var(--muted)}
.row{display:flex;gap:.75rem;flex-wrap:wrap}
pre{font-family:var(--font);background:var(--linen);border-left:2px solid var(--gold);border-radius:0;padding:1rem;max-height:60vh;overflow:auto;white-space:pre-wrap;font-size:.9rem;color:var(--text)}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--dark);color:var(--white);padding:.8rem 1.4rem;border-radius:var(--radius);border-top:2px solid var(--gold);z-index:20;font-weight:500}
.toast.error{background:var(--danger);border-top-color:var(--white)}

/* ---- Game options ---- */
.game-info{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.6rem}
.pill{background:transparent;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:.2rem .9rem;font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:.75rem 1rem 1rem;margin:0;display:flex;flex-direction:column;gap:.6rem;min-width:0}
legend{font-weight:600;color:var(--navy);padding:0 .4rem;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.players{display:flex;flex-direction:column;gap:.6rem}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg label{flex-direction:row!important;align-items:center;gap:.45rem!important;background:var(--linen);border-radius:var(--radius);padding:.55rem .8rem;cursor:pointer;text-transform:none!important;letter-spacing:0!important;font-size:.95rem!important}
.seg input{width:1.1rem;height:1.1rem;accent-color:var(--navy)}
#limitValue:disabled{background:var(--linen);color:var(--muted)}
@media (max-width:640px){.teams{grid-template-columns:1fr}}

/* ---- Tables ---- */
.section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
label.inline{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--navy);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.toolbar{display:flex;gap:.75rem;flex-wrap:wrap;margin:1rem 0}
.toolbar input[type=search]{flex:1;min-width:200px}
.table-wrap{overflow-x:auto;padding:0}
table.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.data th,table.data td{padding:.75rem 1rem;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th{background:var(--navy);color:var(--white);font-weight:500;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;position:sticky;top:0;border-bottom:2px solid var(--gold)}
table.data td.name,table.data th[data-key=name],#lbTable th:nth-child(2){text-align:left}
table.data td.name{font-weight:600}
table.data tbody tr:hover{background:var(--linen)}
table.sortable th{cursor:pointer;user-select:none}
table.sortable th.sorted{background:var(--dark);color:var(--gold)}
table.sortable th::after{content:attr(data-dir);margin-left:.3rem;font-size:.75em}
#lbTable tr.top1 td:first-child,#lbTable tr.top2 td:first-child,#lbTable tr.top3 td:first-child{font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
#lbTable tr.top1 td.name{font-weight:700}
.match .players{display:block;color:var(--muted);font-size:.8rem;font-weight:400}
.match .row{margin-top:.75rem}
.print-only{display:none}

/* ---- Scorecard ---- */
.scorecard{max-width:860px;margin:0 auto;padding:2rem 2.25rem}
.sc-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:2px solid var(--gold);margin-bottom:1.25rem}
.sc-logo{width:260px;height:auto;display:block}
.sc-club{margin:0;color:var(--navy);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem}
.sc-title{margin:.25rem 0 1.25rem;color:var(--navy);font-weight:700;font-size:1.6rem;word-break:break-word}
.sc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1.25rem}
.sc-meta .k{display:block;color:var(--muted);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em}
.sc-meta strong{font-weight:600}
.sc-teams{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.sc-team{border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--radius);padding:1rem;text-align:center}
.sc-team.win{border-top-color:var(--gold)}
.sc-team h3{margin:0;color:var(--navy);font-weight:700;word-break:break-word}
.sc-score{font-size:3rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.sc-result{font-weight:600;font-size:1.05rem;color:var(--navy);padding:.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scorecard-table td.total{font-weight:700;color:var(--navy)}
table.data.scorecard-table th{white-space:normal}
.scorecard-table td.time{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- Print ---- */
@media print{
  @page{margin:12mm}
  body{background:#fff;color:var(--navy);font-size:10.5pt}
  .no-print,.actions,.toast,.modal,button,.btn,.toolbar{display:none!important}
  .print-only{display:block}
  .print-lockup{width:60mm;height:auto;margin:0 0 6mm}
  .print-title{font-size:15pt;font-weight:700;color:var(--navy);margin:0 0 8pt;padding-bottom:4pt;border-bottom:1.5pt solid var(--gold)}
  .app-header{display:none}
  .card{border:1px solid #c9c3b4;break-inside:avoid}
  .wrap{padding:0;max-width:none}
  table.data th{background:#fff!important;color:var(--navy);border-bottom:1.5pt solid var(--gold);-webkit-print-color-adjust:exact;print-color-adjust:exact;position:static}
  table.data th,table.data td{padding:4pt 6pt;border:1px solid #c9c3b4}
  table.sortable th.sorted{background:#fff!important;color:var(--navy)}
  table.sortable th::after{content:''}
  #lbTable tr td:first-child{box-shadow:none!important}
  .scorecard{border:none;padding:0;max-width:none}
  .sc-logo{width:60mm}
  .sc-head,.sc-team,.print-title{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr{break-inside:avoid}
  body[data-print=leaderboard] main>*:not(.leaderboard):not(.print-lockup){display:none!important}
  body.scores-page:not([data-print=leaderboard]) .leaderboard .row{display:none}
}

/* ---- Brand review fixes ---- */
.modal-box input::placeholder{color:#5B6B7D;opacity:1}  /* 5.5:1 on white */
.modal-box .hint{font-size:.78rem;font-weight:400;text-transform:none;letter-spacing:0;color:#55657A;line-height:1.4}
@media print{
  @page{size:A4;margin:15mm}
  html,body{margin:0;padding:0}
  .scorecard-page main.wrap{padding:0;margin:0;max-width:100%}
  .scorecard{width:100%;max-width:100%}
  .scorecard .table-wrap{overflow:visible}
  table.data.scorecard-table{width:100%;table-layout:fixed}
  table.data.scorecard-table th,table.data.scorecard-table td{white-space:normal;word-break:break-word;font-size:9.5pt}
  table.data.scorecard-table th:nth-child(1){width:9%}table.data.scorecard-table th:nth-child(2){width:15%}
}

/* ---- Logins & admin (v3) ---- */
.userbar{display:flex;justify-content:flex-end;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem;max-width:1100px;margin:-.75rem auto .5rem;color:rgba(255,255,255,.85)}
.userbar a{color:var(--white);font-weight:500;text-decoration-color:var(--gold)}
.userbar strong{color:var(--gold);font-weight:600}
.userbar .role{border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:.05rem .6rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;margin-left:.3rem}
.auth-wrap{max-width:440px;margin:2.5rem auto;padding:0 1rem}
.auth-card{border-top:5px solid var(--gold);display:flex;flex-direction:column;gap:1.1rem;padding:2rem}
.auth-card h2{margin:0;color:var(--navy);font-weight:700;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.auth-card p{margin:0;color:var(--muted)}
.form label,.auth-card label{display:flex;flex-direction:column;gap:.4rem;font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--navy)}
.form input,.form select,.form textarea,.auth-card input,table.data input,table.data select{font:inherit;font-size:1rem;font-weight:400;text-transform:none;letter-spacing:0;padding:.65rem .8rem;border:1px solid #B9B2A1;border-radius:var(--radius);background:var(--white);color:var(--text)}
.form input:focus,.form select:focus,.form textarea:focus,.auth-card input:focus,table.data input:focus,table.data select:focus{outline:none;border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold)}
.msg{padding:.7rem 1rem;border-radius:var(--radius);font-weight:500;font-size:.92rem}
.msg.error{background:#F6E5E5;color:var(--danger);border-left:3px solid var(--danger)}
.msg.info{background:var(--linen);color:var(--navy);border-left:3px solid var(--gold)}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem}
.form{display:flex;flex-direction:column;gap:.85rem}
.form .row{align-items:flex-end}
.form .row>label{flex:1;min-width:140px}
.btn.small{min-height:40px;padding:.4rem .9rem;font-size:.9rem}
table.data td.left,table.data th.left{text-align:left}
table.data td .row{justify-content:flex-end;flex-wrap:nowrap}
table.data input.shots{width:4.5rem;padding:.35rem .5rem}
textarea{min-height:12rem;resize:vertical}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding:1rem 1rem 0}
.tabs .btn[aria-selected=true]{background:var(--navy);color:var(--white);box-shadow:inset 0 -3px 0 var(--gold)}
@media print{.userbar{display:none}}
#gamesTable td.name{white-space:normal;word-break:break-all;min-width:14rem}
#gamesTable td.name .meta{margin:.2rem 0 0;font-weight:400}
/* ---- Live stream matches ---- */
.overlay-banner{background:var(--gold);color:var(--dark);text-align:center;padding:.7rem 1rem;font-weight:500;letter-spacing:.02em;border-bottom:2px solid var(--dark)}
.overlay-banner strong{text-transform:uppercase;letter-spacing:.14em;margin-right:.3rem}
.modal-box label.overlay-toggle{flex-direction:row;align-items:flex-start;gap:.7rem;text-transform:none;letter-spacing:0;font-size:.92rem;font-weight:400;background:var(--linen);border-left:3px solid var(--gold);padding:.75rem .9rem;border-radius:var(--radius)}
.modal-box label.overlay-toggle input{width:1.2rem;height:1.2rem;margin-top:.15rem;accent-color:var(--navy);flex:none}
#overlayTable td.name{white-space:normal;word-break:break-all;min-width:14rem}
#overlayTable td.name .meta{margin:.2rem 0 0;font-weight:400}
@media print{.overlay-banner{display:none}}
/* ---- Overlay control ---- */
.oc-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.5rem;align-items:start}
@media (max-width:900px){.oc-grid{grid-template-columns:1fr}}
.oc-preview{position:relative;padding:0;aspect-ratio:16/9;overflow:hidden;border:2px solid var(--dark);
  background-color:#1b2633;background-image:linear-gradient(45deg,#2a3746 25%,transparent 25%),linear-gradient(-45deg,#2a3746 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a3746 75%),linear-gradient(-45deg,transparent 75%,#2a3746 75%);
  background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0}
.oc-preview iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;background:transparent;pointer-events:none}
.oc-onair{display:flex;flex-direction:column;gap:.2rem;margin-top:1rem;border-left:4px solid var(--gold)}
.oc-onair .k{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:500}
.oc-modes{display:flex;flex-direction:column;gap:.6rem;padding:1rem}
.oc-option{font:inherit;text-align:left;display:flex;flex-direction:column;gap:.1rem;padding:.8rem 1rem;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--navy);cursor:pointer}
.oc-option span{color:var(--muted);font-size:.85rem}
.oc-option:hover{background:var(--linen)}
.oc-option.active{border-color:var(--navy);border-left-color:var(--gold);background:var(--linen)}
.oc-list{display:flex;flex-direction:column;gap:.9rem}
.oc-match{display:flex;flex-direction:column;gap:.5rem;border-left:4px solid var(--navy)}
.oc-match.active{border-left-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.oc-match.stale{opacity:.7;border-left-color:#B9B2A1}
.oc-match .meta{margin:0}
.oc-match-head{display:flex;gap:.4rem;flex-wrap:wrap}
.oc-match .pill{color:var(--navy);border-color:var(--line)}
.oc-match .pill.stream{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.oc-match .pill.warn{background:#F6E5E5;color:var(--danger);border-color:var(--danger)}
.oc-match .pill.onair{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.oc-score{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}
.oc-score strong{font-size:1.6rem;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.oc-team{font-weight:600;color:var(--navy);word-break:break-word}
.oc-team.r{text-align:right}
/* ---- Overlay control: live stream match scoring ---- */
.oc-scoring{margin-top:1rem;display:flex;flex-direction:column;gap:.9rem;border-top:4px solid var(--gold)}
.oc-sc-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.oc-sc-head .pill{color:var(--navy);border-color:var(--line)}
.oc-sc-head .pill.stream{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.oc-timer{margin-left:auto;font-weight:700;font-size:1.4rem;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.oc-sides{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.oc-side{background:var(--navy);color:var(--white);border-radius:var(--radius);border-top:4px solid var(--gold);padding:.9rem;text-align:center}
.oc-side h3{margin:0;font-size:1.05rem;font-weight:700;word-break:break-word}
.oc-big{font-size:3.2rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;margin:.2rem 0 .6rem}
.oc-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.oc-btns .btn{min-height:48px;padding:.4rem;font-size:1.2rem;font-weight:700;background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.55)}
.oc-btns .btn:hover{background:var(--dark);border-color:var(--gold)}
.oc-sc-foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.oc-ends{font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--navy)}
.oc-ends strong{font-size:1.8rem;letter-spacing:0;margin-left:.4rem;vertical-align:middle}
.oc-hint{margin:0}
#scoring button:disabled{opacity:.45;cursor:not-allowed}
/* ---- v5: competitions, head-to-head, exports, overlay screens ---- */
.oc-screens{display:flex;flex-direction:column;gap:.6rem;padding:1rem}
.oc-option-wrap{display:flex;flex-direction:column;gap:.4rem}
.oc-params{padding-left:1rem;gap:.5rem}
.oc-params input,.oc-params select{font:inherit;font-size:.95rem;padding:.5rem .7rem;border:1px solid #B9B2A1;border-radius:var(--radius);background:var(--white);color:var(--text);flex:1;min-width:0}
.comp-card{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;border-top:3px solid var(--navy);color:var(--text)}
.comp-card:hover{border-top-color:var(--gold);background:var(--white)}
.comp-card .date{color:var(--muted);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em}
.comp-name{font-size:1.25rem;color:var(--navy)}
.comp-card .lead{color:var(--navy);font-weight:600}
.sub{color:var(--navy);margin:1.5rem 0 .75rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.12em}
.champion{background:var(--gold);color:var(--dark);font-weight:700;padding:.8rem 1.2rem;border-radius:var(--radius);text-transform:uppercase;letter-spacing:.08em;margin:1rem 0}
#standings td.pts{font-weight:700;color:var(--navy);background:var(--linen)}
#standings tr.top1 td:first-child{box-shadow:inset 3px 0 0 var(--gold);font-weight:700}
#standings td.name .meta{margin:.1rem 0 0;font-weight:400;white-space:normal}
#fixtures{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
.fx-round h4{margin:0 0 .5rem;color:var(--navy);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;border-bottom:2px solid var(--gold);padding-bottom:.3rem}
.fx{padding:.55rem 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem}
.fx:last-child{border-bottom:0}
.fx-main{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center}
.fx-team{font-weight:500;word-break:break-word}
.fx-team.r{text-align:right}
.fx-team.win{font-weight:700;color:var(--navy)}
.fx-score{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;min-width:4.5rem;text-align:center;background:var(--linen);border-radius:var(--radius);padding:.1rem .4rem}
.fx.bye .fx-score{color:var(--muted);font-weight:500}
.fx .meta{margin:0;font-size:.78rem}
.fx-link{font-size:.8rem}
.res-edit{align-items:center;gap:.4rem}
.res-edit input.shots{width:4.5rem;font:inherit;padding:.35rem .5rem;border:1px solid #B9B2A1;border-radius:var(--radius)}
.bracket{display:flex;gap:1.25rem;overflow-x:auto;padding:.5rem 0 1rem}
.br-round{display:flex;flex-direction:column;justify-content:space-around;gap:1rem;min-width:220px;flex:1}
.br-round h4{margin:0;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;text-align:center}
.br-match{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:var(--radius)}
.br-match.played{border-left-color:var(--gold)}
.br-line{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem .7rem;font-size:.95rem;color:var(--muted)}
.br-line+.br-line{border-top:1px solid var(--line)}
.br-line.win{color:var(--navy);font-weight:700}
.h2h-page .toolbar-form .row{align-items:flex-end}
.vs{font-weight:700;color:var(--navy);font-size:1.4rem;padding-bottom:.6rem}
.h2h-head{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;text-align:center;margin-top:1.5rem;border-top:5px solid var(--gold)}
.h2h-side,.h2h-mid{display:flex;flex-direction:column;align-items:center}
.h2h-name{font-weight:700;font-size:1.3rem;color:var(--navy);word-break:break-word}
.h2h-wins{font-size:3.5rem;font-weight:700;color:var(--navy);line-height:1.1}
.h2h-played{font-size:2.2rem;font-weight:700;color:var(--navy)}
.h2h-head .k,.h2h-stat .k{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.h2h-draws{color:var(--muted);font-size:.85rem}
.h2h-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0}
.h2h-stat{display:flex;flex-direction:column;gap:.2rem}
.h2h-stat strong{font-size:1.6rem;color:var(--navy)}
.h2h-actions{margin:.5rem 0 0}
.export-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.5rem 0 0}
.export-bar strong{color:var(--navy);margin-right:.4rem}
.export-list{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.res-edit{flex-wrap:nowrap}
.fx-edit{align-self:flex-start;min-height:30px;padding:.15rem .7rem;font-size:.8rem}
.oc-tick{width:20px;height:20px;accent-color:#143D63;cursor:pointer}.oc-tick:disabled{cursor:not-allowed;opacity:.7}
/* v7: external matches */
.ext-section{margin-top:.5rem}
.ext-tag{font-size:.75rem;font-weight:500;color:var(--muted);letter-spacing:.06em;margin-left:.5rem;vertical-align:middle}
.ext-note{margin:.25rem 0 1rem}
.ext-record{margin:0 0 1rem;border-top:3px solid var(--gold)}
.ext-rec-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--muted);margin-bottom:.6rem}
.ext-rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.75rem}
.ext-rec-item{display:flex;flex-direction:column;gap:.15rem}
.ext-rec-item .k{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.ext-rec-item strong{font-size:1.6rem;color:var(--navy);font-variant-numeric:tabular-nums}
.ext-form{margin:0 0 1rem;border-top:3px solid var(--gold)}
.ext-form h3{margin:0 0 .75rem;color:var(--navy)}
.ext-form label.grow{flex:1 1 220px}
.form-error{color:var(--danger);font-weight:600;margin:.5rem 0}
.ext-match{border-left:4px solid var(--line)}
.ext-match.ext-w{border-left-color:var(--gold)}
.ext-match.ext-l{border-left-color:#8E9AAB}
.ext-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ext-top .date{flex:1;margin:0}
.ext-label{font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);border:1px solid var(--gold);border-radius:999px;padding:.1rem .55rem}
.wdl{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;font-weight:700;font-size:.85rem}
.wdl-w{background:var(--gold);color:var(--navy)}
.wdl-d{background:var(--white);color:var(--navy);border:2px solid var(--navy)}
.wdl-l{background:var(--navy);color:var(--white)}
.ext-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;margin:.75rem 0 .4rem;font-size:1.1rem}
.ext-us{font-weight:700}
.ext-them{text-align:right;font-weight:500}
.ext-num{font-size:1.6rem;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.ext-notes{margin:.4rem 0 0;font-size:.9rem;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.ext-match .row{margin-top:.6rem}
.ext-form textarea{min-height:4.5rem;height:4.5rem}
/* v7 brand review */
.ext-tools{margin:0 0 1rem}
.ext-top{align-items:flex-start}
.ext-when{flex:1;min-width:0}
.ext-when .date{margin:0}
.ext-sub{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.1rem}
.ext-score{display:block;margin:.75rem 0 .4rem}
.ext-line{display:flex;align-items:baseline;gap:.6rem;white-space:nowrap}
.ext-line .ext-us{font-weight:700;font-size:1.1rem}
.ext-line .ext-num{font-size:1.6rem}
.ext-score .ext-them{text-align:left;font-size:1.1rem;font-weight:500;margin-top:.15rem;overflow-wrap:break-word}
/* active page in the header nav: gold fill, navy text */
.app-header .actions .btn.current,.app-header .actions .btn.current:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
/* disabled buttons: clearly faded, no gold edge */
.btn:disabled,.btn[aria-disabled=true],.btn:disabled:hover,.app-header .btn:disabled,.app-header .btn.primary:disabled,.app-header .btn:disabled:hover{opacity:.4;cursor:not-allowed;border-color:transparent;box-shadow:none;transform:none}
@media (max-width:640px){
  .app-header .actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:1rem .75rem}
  .app-header .actions>.btn{width:100%;margin:0;justify-content:center;text-align:center}
  .app-header .actions>.btn.span2{grid-column:1/-1}
}
/* v7: Export image dialog */
.social-box{max-width:760px}
.social-sizes{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.social-size{flex-direction:column;align-items:flex-start;text-align:left;gap:.1rem;min-height:64px;padding:.5rem .7rem;background:var(--white);color:var(--navy);border:1px solid var(--line)}
.social-size strong{font-size:.9rem}
.social-size span{font-size:.68rem;font-weight:400;color:var(--muted);line-height:1.3}
.social-size.active{border-color:var(--navy);box-shadow:inset 0 -3px 0 var(--gold);background:var(--linen)}
.social-opts{align-items:center;gap:1rem}
.social-opts .check{flex-direction:row;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0;font-size:.95rem}
.social-opts label.inline{flex-direction:row;align-items:center;gap:.5rem}
.social-preview{flex:none;background:var(--linen);border:1px solid var(--line);border-radius:var(--radius);padding:.75rem;display:flex;justify-content:center;align-items:center;min-height:240px}
.social-preview canvas{max-width:100%;max-height:52vh;width:auto;height:auto;display:block}
.social-pager{justify-content:center;align-items:center}
.social-fn{font-size:.78rem;word-break:break-all}
@media (max-width:640px){.social-sizes{grid-template-columns:1fr 1fr}.social-box{padding:1.25rem}}
/* v7: short nav labels on phones */
.lbl-short{display:none}
@media (max-width:640px){.app-header .actions .lbl-full{display:none}.app-header .actions .lbl-short{display:inline}}
.card-image-bar{margin-top:-.5rem}