/* ---------- tokens ---------- */
:root{
  /* NFORB-style dark theme: deep navy, red slanted accents */
  --ink:#090D1A;--ink-2:#121933;--bg:#0E1324;--card:#182038;--card-2:#1F2843;--line-dark:#27304D;--line:#27304D;--line-2:#364066;
  --paper:#0E1324;--text:#FFFFFF;--muted:#8E96AE;--muted-dark:#8E96AE;--soft:#C3C8D8;
  --accent:#E31B30;--accent-2:#FF2E44;--ok:#2FBF71;--warn:#FF9A3C;
  --skew:14px;--display:'Montserrat',system-ui,sans-serif;
  /* grid: 12 columns from 1200px, 12 on tablets, 4 on phones */
  --gutter:24px;--margin:40px;
}
@media (max-width:1199px){:root{--margin:32px}}
@media (max-width:767px){:root{--gutter:16px;--margin:16px}}

/* ---------- base ---------- */
body{margin:0;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}
a{color:inherit}a:hover{color:inherit;opacity:.85}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
::placeholder{color:#8A908D;opacity:1}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}

/* ---------- grid ---------- */
.wrap{max-width:1620px;margin:0 auto;padding:0 var(--margin);box-sizing:border-box}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start}
.g-stretch{align-items:stretch}
.s-12{grid-column:1/-1}
.s-9{grid-column:span 9}.s-8{grid-column:span 8}.s-6{grid-column:span 6}.s-4{grid-column:span 4}.s-3{grid-column:span 3}
.s-c8{grid-column:3/span 8}.s-c6{grid-column:4/span 6}
.k-2{grid-column:span 2}.k-3{grid-column:span 3}.k-3w{grid-column:span 3}.k-6{grid-column:span 6}
/* nested grids that keep the parent's column lines */
.g-in2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.g-in3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.g-in3 .wide{grid-column:span 2}
/* fields in one row line up by their inputs even when a label wraps */
.g-in2>.lbl,.g-in3>.lbl{justify-content:flex-end}
@media (max-width:1199px){
  .s-9,.s-8,.s-4,.s-3,.s-c8{grid-column:1/-1}
  .s-c6{grid-column:3/span 8}
  .k-2,.k-3{grid-column:span 4}
  .k-3w{grid-column:span 6}
  .g-in3.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:767px){
  .g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g>*{grid-column:1/-1}
  .g>.k-2,.g>.k-3{grid-column:span 2}
  .g-in2,.g-in3{grid-template-columns:minmax(0,1fr)}
  .g-in3.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-in3 .wide{grid-column:auto}
}

/* ---------- surfaces & type ---------- */
.card{background:var(--card);padding:32px;box-sizing:border-box}
.h-sec{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase}
.ph{background:repeating-linear-gradient(135deg,#141B33 0 14px,#182040 14px 28px);color:var(--muted);display:flex;align-items:flex-end;padding:16px;box-sizing:border-box;font-size:13px}
.ph-light{background:repeating-linear-gradient(135deg,#182038 0 14px,#1C2440 14px 28px);color:var(--muted);display:flex;align-items:flex-end;padding:16px;box-sizing:border-box;font-size:13px}
.name-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.err{background:#3A1520;color:#FF8A8A;border-left:3px solid var(--accent);padding:12px 16px;font-size:14px;font-weight:600}
.ok{background:#12301F;color:#5FE39A;border-left:3px solid var(--ok);padding:12px 16px;font-size:14px;font-weight:600}
@media (max-width:767px){.card{padding:24px}.page-title{font-size:22px !important}}

/* ---------- navigation ---------- */
.nav{color:#fff;text-decoration:none;font-family:'Manrope',sans-serif;font-weight:600;font-size:16px;padding:12px 0;border-bottom:3px solid transparent}
.nav:hover{opacity:1;border-bottom-color:var(--line-2)}
.nav-active{border-bottom-color:var(--accent)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}

/* ---------- buttons ---------- */
.btn{height:52px;padding:0 36px;display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:#fff;border:0;text-decoration:none;font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;cursor:pointer;box-sizing:border-box;clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%)}
.btn:hover{opacity:1;background:var(--accent-2);color:#fff}
.btn:disabled{background:var(--line-2);color:var(--muted);cursor:not-allowed;opacity:1}
.btn-accent{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px var(--accent);clip-path:none}
.btn-ghost:hover{background:rgba(227,27,48,.18)}

/* ---------- form controls (own look instead of the browser's) ---------- */
.lbl{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;min-width:0}
.field{height:48px;border:1px solid var(--line-2);border-radius:0;background:var(--ink);padding:0 16px;font:inherit;font-size:16px;box-sizing:border-box;min-width:0;width:100%;color:#fff;-webkit-appearance:none;appearance:none}
.field:hover{border-color:var(--muted)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.field[readonly]{background:var(--card-2);color:var(--muted)}
textarea.field{height:auto;min-height:104px;padding:12px 16px;resize:none;line-height:1.5}
input.field::-webkit-search-cancel-button,input.field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
input::-ms-clear,input::-ms-reveal{display:none}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px var(--ink) inset;-webkit-text-fill-color:#fff;transition:background-color 9999s}

input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;flex:none;border:2px solid var(--muted);background:var(--ink);display:inline-grid;place-content:center;cursor:pointer;box-sizing:border-box}
input[type=checkbox]::before{content:"";width:12px;height:10px;background:#fff;clip-path:polygon(0 52%,14% 38%,38% 62%,86% 0,100% 14%,38% 90%);transform:scale(0);transition:transform .12s}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::before{transform:scale(1)}
input[type=radio]{border-radius:50%}
input[type=radio]::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .12s}
input[type=radio]:checked::before{transform:scale(1)}
.field-wrap{position:relative;display:flex}
.field-wrap .field{padding-right:52px}
.field-btn{position:absolute;top:0;right:0;width:48px;height:48px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.field-btn:hover{color:#fff}

/* own dropdown instead of <select> */
.dd{position:relative}
.dd-btn{height:48px;min-width:240px;padding:0 48px 0 16px;border:1px solid var(--line-2);background:var(--ink);color:#fff;font-size:15px;font-weight:600;text-align:left;cursor:pointer;position:relative;width:100%}
.dd-btn::after{content:"";position:absolute;right:18px;top:19px;width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
.dd-btn[aria-expanded=true]::after{top:23px;transform:rotate(-135deg)}
.dd-list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;margin:0;padding:8px 0;list-style:none;background:var(--card);border:1px solid var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.dd-opt{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 16px;border:0;background:transparent;font-size:15px;text-align:left;cursor:pointer}
.dd-opt{color:#fff}
.dd-opt:hover,.dd-opt:focus-visible{background:var(--card-2);outline:none}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:#364066 transparent}
::-webkit-scrollbar{width:8px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#364066}
.dark-scroll{scrollbar-color:#364066 transparent}
.dark-scroll::-webkit-scrollbar-thumb{background:#364066}

/* ---------- NFORB graphics: slanted red plates, chips, crests, stadium backdrop ---------- */
.plate{display:inline-flex;align-items:center;min-height:52px;padding:0 calc(var(--skew) + 18px);background:var(--accent);color:#fff;font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.01em;clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%);margin:0;line-height:1.1;box-sizing:border-box;white-space:nowrap}
.plate-lg{min-height:64px;font-size:30px;padding:0 calc(var(--skew) + 24px)}
@media (max-width:767px){.plate{font-size:18px;min-height:44px}.plate-lg{font-size:22px;min-height:52px}}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 18px;color:#fff;text-decoration:none;font-family:var(--display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;position:relative;isolation:isolate;cursor:pointer;background:none;border:0}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-14deg);background:var(--accent)}
.chip-ghost::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}
.chip:hover{opacity:1;color:#fff}
.chip-ghost:hover::before{background:rgba(227,27,48,.18)}
.stadium{position:relative;isolation:isolate;background:
  radial-gradient(60% 50% at 18% 0%,rgba(227,27,48,.20),transparent 70%),
  radial-gradient(55% 60% at 85% 10%,rgba(70,110,210,.22),transparent 70%),
  radial-gradient(90% 60% at 50% 115%,rgba(30,120,70,.30),transparent 70%),
  linear-gradient(180deg,#0B1022 0%,#0E1324 100%)}
.stadium::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.10;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='420' viewBox='0 0 1600 420' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M260 420 L520 120 H1080 L1340 420'/%3E%3Cpath d='M800 120 V420'/%3E%3Cellipse cx='800' cy='250' rx='150' ry='55'/%3E%3Cpath d='M610 120 L560 200 H1040 L990 120'/%3E%3C/svg%3E") center bottom/1600px auto no-repeat}
.stadium-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(.85)}
.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,13,26,.45),rgba(14,19,36,.9) 70%,#0E1324)}
.panel{background:rgba(24,32,56,.92);border:1px solid var(--line);box-sizing:border-box}
.crest{width:44px;height:44px;border-radius:50%;background:#fff;flex:none;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.crest img{width:86%;height:86%;object-fit:contain}
.crest-txt{background:var(--card-2);color:var(--muted);font-family:var(--display);font-weight:800;font-size:15px}
.crest-sm{width:32px;height:32px}
.crest-sm.crest-txt{font-size:12px}
.slant-arrows{display:flex;gap:8px}
.slant-arrows button{width:40px;height:34px;border:0;background:var(--accent);color:#fff;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);display:grid;place-items:center}
.slant-arrows button:disabled{background:var(--line-2);cursor:not-allowed}
.icon-round{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;flex:none}
.logo{display:flex;align-items:center;gap:0;text-decoration:none;color:#fff;font-family:var(--display);font-weight:900;font-style:italic;font-size:30px;letter-spacing:-.01em;line-height:1}
.logo img{display:block;height:44px;width:auto}
.logo-ft img{height:38px}

.logo:hover{opacity:1;color:#fff}
@media (max-width:767px){.logo img{height:34px}}
@media (max-width:767px){
  .hdr{position:static !important}
  .hdr .wrap{gap:4px 16px !important;padding-top:12px;padding-bottom:4px}
  .hdr-act{margin-left:auto}
  .hdr-nav{order:3;width:100%;gap:0 20px !important}
  .hdr-nav .nav{font-size:15px;padding:10px 0}
}

/* ---------- NFORB page parts: page top, plate headings, chip tabs ---------- */
.plate.page-title{white-space:normal;width:fit-content;align-self:flex-start;margin:0;padding-top:10px;padding-bottom:10px;max-width:100%}
.h-sec{display:inline-flex;align-items:center;align-self:flex-start;width:fit-content;max-width:100%;min-height:44px;padding:6px calc(var(--skew) + 16px);background:var(--accent);color:#fff;font-size:20px !important;font-weight:800;line-height:1.15;letter-spacing:.01em;box-sizing:border-box;clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%)}
.h-sec .step-n{background:#fff;color:var(--accent)}
.chip-lg{height:42px;padding:0 22px;font-size:14px}
.chip[aria-pressed=false]::before,.chip[aria-selected=false]::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.chip[aria-pressed=false]:hover::before,.chip[aria-selected=false]:hover::before{box-shadow:inset 0 0 0 1.5px var(--accent)}
.chips-row{display:flex;flex-wrap:wrap;gap:12px 16px;padding-left:4px}
@media (max-width:767px){.h-sec{font-size:17px !important;min-height:40px}.chip-lg{height:38px;padding:0 16px;font-size:13px}}

/* match events */
.ev-row{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line,#27304D)}
.ev-side{display:flex;align-items:center;gap:10px;min-width:0}
.ev-l{justify-content:flex-end;text-align:right}
.ev-name{min-width:0;font-weight:600;line-height:1.3}
.ev-name small{color:#8E96AE;font-size:12px;font-weight:600}
.ev-min{justify-self:center;font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:#8E96AE}
.ev-ic{flex:none;display:inline-grid;place-items:center;font-family:'Montserrat',sans-serif;font-weight:800}
.ev-goal{min-width:40px;height:24px;padding:0 6px;font-size:13px;box-sizing:border-box}
.ev-card{width:13px;height:18px;border-radius:2px}
.ev-sep{display:flex;align-items:center;gap:12px;padding:12px 0;color:#8E96AE;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ev-sep::before,.ev-sep::after{content:"";flex:1;height:1px;background:var(--line,#27304D)}
@media (max-width:767px){.ev-row{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:8px}.ev-name{font-size:14px}.ev-goal{min-width:34px;font-size:12px}}

/* header contacts: phone + email on desktop, phone only on tablets, call button on phones */
.hdr-contacts{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;margin-right:8px}
.hdr-phone{color:#fff;text-decoration:none;font-family:var(--display);font-weight:800;font-size:17px;white-space:nowrap}
.hdr-phone:hover{color:var(--accent);opacity:1}
.hdr-mail{color:var(--muted);text-decoration:none;font-size:13px;white-space:nowrap}
.hdr-mail:hover{color:#fff;opacity:1}
.hdr-tel-ic{display:none !important}
@media (max-width:1279px){.hdr-mail{display:none}}
@media (max-width:767px){.hdr-contacts{display:none}.hdr-tel-ic{display:grid !important}}
@media (max-width:767px){.hdr-acc-label{display:none}.hdr-act{gap:10px !important}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}