/* The player card and the referee report (web/player.html, web/referee.html): the report's tokens and
   type, one column on a phone, and a print layout that fits one A4 page -- "Save as PDF" is the
   browser's own print-to-PDF, so what prints IS the PDF. */
:root{
  --bg:#0b0c0f; --s1:#131519; --s2:#1a1d22; --s3:#22262d;
  --bd-1:#202329; --bd-2:#2a2e36; --bd-3:#394049;
  --t1:#f2f4f7; --t2:#a8b0bd; --t3:#7c8492;
  --ac:#d55181; --ac-hi:#e46b98;
  --ok:#34d399; --warn:#f5b93b; --danger:#f26d6d;
  --home:#3987e5; --away:#e8672e; --ref:#c9cdd4;
  --r-md:12px;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:"Barlow Condensed","Segoe UI Variable",var(--ui);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--t1);font:15px/1.5 var(--ui);-webkit-font-smoothing:antialiased;
     font-variant-numeric:tabular-nums}
a{color:inherit}
.hidden{display:none!important}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}

.bar{position:sticky;top:0;z-index:20;background:rgba(11,12,15,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd-1)}
.bar .wrap{display:flex;align-items:center;gap:10px;min-height:54px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.bar .back{font:600 13px var(--ui);color:var(--t2);text-decoration:none;white-space:nowrap}
.bar .back:hover{color:var(--t1)}
.bar .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--bd-2);
     background:var(--s2);color:var(--t1);font:600 13px var(--ui);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--s3)}
.btn[disabled]{opacity:.55;cursor:default}
.btn--primary{background:var(--ac);border-color:transparent;color:#160a10}
.btn:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--ac-hi);outline-offset:2px}
select.pick{height:36px;border-radius:9px;border:1px solid var(--bd-2);background:var(--s1);color:var(--t1);
            font:600 13px var(--ui);padding:0 10px;max-width:220px}

.state{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.state h2{margin:0;font:700 28px var(--disp);text-transform:uppercase}
.state p{margin:0;color:var(--t2);max-width:56ch}

/* masthead */
.head{display:grid;grid-template-columns:168px minmax(0,1fr);gap:22px;padding:26px 0 8px;align-items:end}
.head .pic{width:168px;height:210px;border-radius:14px;overflow:hidden;background:var(--s2);display:flex;align-items:center;
           justify-content:center;font:800 64px var(--disp);color:var(--t3);position:relative}
.head .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.head .pic .bandc{position:absolute;left:0;right:0;bottom:0;height:5px}
.head .kick{font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.head h1{margin:4px 0 8px;font:800 clamp(38px,6vw,64px)/.95 var(--disp);text-transform:uppercase;letter-spacing:.005em}
.head h1 .no{color:var(--t3);margin-right:.15em}
.who{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font:600 13px var(--ui);color:var(--t2)}
.who i{width:11px;height:11px;border-radius:50%;flex:none}
.tag{padding:2px 9px;border-radius:999px;background:var(--s2);border:1px solid var(--bd-2);font:600 12px var(--ui)}
.match{margin-top:12px;font:600 13px var(--ui);color:var(--t3)}
.match b{color:var(--t2)}

section{padding:26px 0 4px}
section h2{margin:0 0 12px;font:700 22px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.prov{display:inline-flex;align-items:center;font:600 11px var(--ui);color:var(--warn);border:1px solid rgba(245,185,59,.35);
      background:rgba(245,185,59,.1);padding:2px 8px;border-radius:999px;white-space:nowrap;text-transform:none;letter-spacing:0}
.src{font:600 11px var(--ui);color:var(--t3);text-transform:none;letter-spacing:0}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.tile{background:var(--s1);border:1px solid var(--bd-1);border-radius:11px;padding:11px 13px;position:relative;min-width:0}
.tile b{display:block;font:700 30px/1 var(--disp);letter-spacing:.005em}
.tile b small{font:700 15px var(--disp);color:var(--t2);margin-left:2px}
.tile span{display:block;font:600 11.5px/1.3 var(--ui);color:var(--t3);margin-top:3px}
.tile em{display:block;font:500 11px/1.3 var(--ui);color:var(--t3);font-style:normal;margin-top:2px}
.tile.low{border-color:rgba(245,185,59,.45)}
.tile.low b{color:var(--t2)}
.tile .flag{display:inline-block;margin-top:5px;font:600 10.5px var(--ui);color:var(--warn)}
.fine{font:500 12px/1.55 var(--ui);color:var(--t3);margin:10px 0 0;max-width:80ch}

/* heat maps */
.heats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.heat{background:var(--s1);border:1px solid var(--bd-1);border-radius:var(--r-md);padding:12px 14px 10px}
.heat h3{margin:0 0 8px;font:700 15px var(--disp);text-transform:uppercase;letter-spacing:.03em;color:var(--t2)}
.heat svg{width:100%;height:auto;display:block}

/* the reel */
.reelBox{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start}
.reelBox video{width:100%;border-radius:12px;background:#000;display:block;aspect-ratio:16/9}
.moments{display:flex;flex-direction:column;gap:4px;max-height:360px;overflow-y:auto}
.moments button{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;
                padding:8px 10px;border-radius:9px;border:1px solid var(--bd-1);background:var(--s1);color:inherit;font:inherit;cursor:pointer}
.moments button:hover{border-color:var(--bd-3)}
.moments button.on{border-color:var(--ac);background:rgba(213,81,129,.08)}
.moments b{font:700 15px var(--disp)}
.moments span{font:500 13px var(--ui);color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moments small{font:600 10.5px var(--ui);color:var(--t3);text-transform:uppercase;letter-spacing:.05em}
.moments .sprint small{color:var(--ok)}
/* "Not him" (server/name_fix.py): one tap beside each touch takes the name off that track */
.moments .mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:stretch}
.moments button.nothim{display:flex;align-items:center;padding:0 10px;font:600 11px var(--ui);color:var(--t3);white-space:nowrap}
.moments button.nothim:hover{color:var(--bad, #e0524f);border-color:var(--bad, #e0524f)}
.moments .mrow.off > button:first-child{opacity:.45;text-decoration:line-through}
.moments .mrow.off button.nothim{color:var(--ac)}
.reelMsg{padding:16px 18px;border-radius:var(--r-md);border:1px dashed var(--bd-3);color:var(--t2);font:500 13.5px/1.5 var(--ui);
         display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.list li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;padding:8px 12px;background:var(--s1);
         border:1px solid var(--bd-1);border-radius:9px;font:500 13.5px var(--ui);color:var(--t2)}
.list li b{font:700 15px var(--disp);color:var(--t1)}

footer{padding:34px 0 50px;color:var(--t3);font:500 12px/1.6 var(--ui)}

@media(max-width:700px){
  .wrap{padding:0 16px}
  .head{grid-template-columns:104px minmax(0,1fr);gap:14px;padding-top:18px}
  .head .pic{width:104px;height:132px;font-size:44px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile{padding:9px 10px}.tile b{font-size:24px}
  .reelBox{grid-template-columns:1fr}
  select.pick{max-width:150px}
}

/* ---- print = the PDF: light paper, one page where it fits, no controls, no video ---- */
@media print{
  @page{size:A4;margin:11mm}
  :root{--bg:#fff;--s1:#fff;--s2:#f1f2f4;--s3:#e6e8eb;--bd-1:#d5d8dd;--bd-2:#c9cdd3;--bd-3:#b8bdc5;
        --t1:#0e1116;--t2:#3b4250;--t3:#626a78}
  body{font-size:12px}
  .bar,.noPrint,video,.reelBox .moments{display:none!important}
  .reelBox{display:block}
  .wrap{max-width:none;padding:0}
  .head{padding-top:10px;grid-template-columns:120px minmax(0,1fr)}
  .head .pic{width:120px;height:150px}
  section{padding:12px 0 0;break-inside:avoid}
  .tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tile b{font-size:22px}
  .heats{grid-template-columns:1fr 1fr}
  .heat,.tile,.head .pic,.who i,.bandc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .printOnly{display:block!important}
  footer{padding:10px 0 0}
}
.printOnly{display:none}