@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
@font-face{font-family:Zuume;src:url('assets/Zuume-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--green:#086347;--paper:#f8f6eb;--ink:#111713;--score-size:clamp(56px,5.6vw,108px);--team-size:clamp(38px,3.5vw,72px);color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--green);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;height:100vh;height:100dvh}
main{height:100%;max-width:2200px;margin:auto;padding:24px 3.2vw 18px;display:flex;flex-direction:column}
#matches{display:grid;grid-template-rows:repeat(var(--match-count,6),minmax(0,1fr));gap:13px;flex:1;min-height:0}
.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,15%) minmax(185px,21%);align-items:center;padding:10px 24px;border:3px solid var(--ink);border-radius:10px;background:var(--paper);box-shadow:5px 5px 0 var(--ink);min-height:0}
.league{font-size:clamp(12px,1.08vw,20px);font-weight:700;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:7px;color:#41574b}
.teams{font-family:Zuume,Impact,sans-serif;font-size:var(--team-size);line-height:1.02;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-weight:700}
.versus{font-family:'DM Sans',sans-serif;font-size:.55em;font-weight:400;color:#738376}
.score{display:flex;justify-content:center;align-items:center;gap:16px;font-family:Zuume,Impact,sans-serif;font-size:var(--score-size);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.score i{font-style:normal;color:#667760;font-size:.65em}
.minute{border-left:2px solid #11171328;text-align:center;color:var(--green);font-family:Zuume,Impact,sans-serif;font-size:var(--score-size);font-weight:700;line-height:1;white-space:nowrap}
.minute small{display:block;font:700 clamp(10px,.8vw,15px) 'DM Sans',sans-serif;letter-spacing:1.5px;margin-top:7px;color:#4d624e}.minute small:empty{display:none}
.not-started{color:#6a7a69}.kickoff-time{display:block;white-space:nowrap;font-size:var(--team-size)}.minute.dated{font-size:clamp(38px,4.2vw,78px)}
.kickoff-date{display:block;font:700 clamp(19px,1.9vw,36px) 'DM Sans',Arial,sans-serif;line-height:1.15;margin-bottom:5px;color:var(--ink)}
.empty{grid-row:1/-1;display:grid;place-content:center;text-align:center;color:var(--paper)}.empty h2{font:700 64px Zuume,Impact,sans-serif;margin:0}.empty p{max-width:700px;padding:0 20px;font-size:20px;line-height:1.5}
@media(min-width:751px) and (max-height:650px){:root{--score-size:52px;--team-size:35px}main{padding-top:15px}#matches{gap:9px}.match{padding:6px 20px}.league{font-size:11px;margin-bottom:3px}.teams{font-size:var(--team-size)}.minute.dated{font-size:38px}.kickoff-date{font-size:18px;margin-bottom:2px}.minute small{font-size:9px;margin-top:3px}}
@media(max-width:750px){:root{--score-size:48px;--team-size:34px}body{height:auto;min-height:100vh;min-height:100dvh}main{min-height:100vh;min-height:100dvh;padding:18px 16px}#matches{grid-template-rows:repeat(var(--match-count,6),minmax(155px,1fr));gap:13px}.match{grid-template-columns:minmax(0,1fr) 150px;padding:14px;border-width:2px;row-gap:12px}.match>div:first-child{grid-column:1/-1}.teams{font-size:var(--team-size)}.league{font-size:11px;letter-spacing:.7px}.score{gap:12px}.minute.dated{font-size:36px}.kickoff-date{font-size:18px}.minute small{font-size:9px}.empty{min-height:350px}}

/* Portrait signage uses the same feed, with ten rows and a dedicated heading. */
body.portrait{height:100vh;height:100dvh;min-height:0;--team-size:clamp(21px,4.515vw,69.3px);--score-size:clamp(30px,6.1vw,92px)}
.portrait main{height:100vh;height:100dvh;min-height:0;max-width:none;padding:3.2vh 3.5vw 2.5vh;gap:2.1vh}
.portrait h1{margin:0;color:var(--paper);font:700 clamp(34px,7.6vw,116px)/.98 Zuume,Impact,sans-serif;text-transform:uppercase;max-width:85%;flex-shrink:0;letter-spacing:.3px}
.portrait #matches{grid-template-rows:repeat(var(--match-count,10),minmax(0,1fr));gap:1.05vh}
.portrait .match{grid-template-columns:minmax(0,1fr) 15% 25%;padding:1vh 2vw;border-width:clamp(2px,.28vw,4px);border-radius:1vw;box-shadow:.45vw .45vw 0 var(--ink);row-gap:0}
.portrait .match>div:first-child{grid-column:auto;min-width:0}
.portrait .league{font-size:clamp(9px,1.35vw,22px);letter-spacing:.09em;margin-bottom:.55vh}
.portrait .teams{font-size:var(--team-size);gap:.25vh .8vw;line-height:1.02}
.portrait .teams>span:not(.versus){max-width:100%}
.portrait .score{font-size:var(--score-size);gap:1vw}
.portrait .minute{font-size:var(--score-size);border-left-width:2px}
.portrait .minute.dated{font-size:var(--team-size)}
.portrait .kickoff-time{font-size:var(--team-size)}
.portrait .kickoff-date{font-size:clamp(13px,2.25vw,34px);margin-bottom:.5vh}
.portrait .minute small{font-size:clamp(7px,1vw,15px)}
.portrait .empty{min-height:0}

.portrait .match{padding-top:.5vh;padding-bottom:.5vh}
.portrait .teams{line-height:.95}
.portrait .teams>span:not(.versus){white-space:nowrap}
.portrait .league{margin-bottom:.35vh}

.portrait .teams{flex-wrap:nowrap;white-space:nowrap}
.portrait .teams>span{flex-shrink:0}

.portrait-header{position:relative;flex-shrink:0}
.portrait-header .football-mascot{position:absolute;right:0;top:50%;transform:translateY(calc(-50% + 1.4vw));width:16%;height:auto;display:block;pointer-events:none}

/* Landscape shares the heading and mascot, while retaining six match rows. */
body:not(.portrait) main{gap:1.5vh;padding-bottom:4vh}
body:not(.portrait) .portrait-header{height:10vh;min-height:58px;display:flex;align-items:center}
body:not(.portrait) h1{margin:0;color:var(--paper);font:700 clamp(34px,6.8vh,82px)/.98 Zuume,Impact,sans-serif;text-transform:uppercase;max-width:85%;letter-spacing:.3px}
body:not(.portrait) .portrait-header .football-mascot{top:auto;right:1.2vw;bottom:-3vh;transform:none;width:auto;height:13vh}
@media(min-width:751px){body:not(.portrait) .match{padding-top:.6vh;padding-bottom:.6vh}body:not(.portrait) .league{margin-bottom:.4vh}body:not(.portrait){--score-size:clamp(48px,9vh,108px)}}

/* Two landscape columns, read top-to-bottom, then left-to-right. */
body:not(.portrait){--team-size:clamp(19px,2.15vw,46px);--score-size:clamp(28px,3.1vw,66px)}
body:not(.portrait) #matches{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));grid-auto-flow:column;gap:2.4vh 3vw}
body:not(.portrait) .match{grid-template-columns:minmax(0,1fr) 15% 24%;padding:.6vh .9vw;min-width:0;row-gap:0}
body:not(.portrait) .match>div:first-child{grid-column:auto;min-width:0}
body:not(.portrait) .teams{font-size:var(--team-size);flex-wrap:nowrap;white-space:nowrap;gap:.5vw;line-height:1.05}
body:not(.portrait) .teams>span{flex-shrink:0}
body:not(.portrait) .league{font-size:clamp(9px,.7vw,16px);letter-spacing:.07em;line-height:1.2}
body:not(.portrait) .score{font-size:var(--score-size);gap:.4vw}
body:not(.portrait) .minute{font-size:var(--score-size)}
body:not(.portrait) .kickoff-time{font-size:var(--team-size)}
body:not(.portrait) .kickoff-date{font-size:clamp(12px,1.15vw,25px)}
body:not(.portrait) .minute small{font-size:clamp(7px,.5vw,11px);letter-spacing:.04em}
body:not(.portrait) .empty{grid-column:1/-1}