:root{
  /* Passport FC pastel: mint ground, navy type, deep-teal accent. Layout: one phone-width column: country, category tracker, clock, guess box, your finds */
  --ink:#E4F3EA;--panel:#F7FBF8;--line:#B9DCC9;--text:#1D3557;--mute:#4A6178;
  --flare:#0F766E;--sky:#1E5AA8;--good:#15803D;--bad:#BE123C;--mint:#CFEADB;
  --display:"Archivo Black","Arial Black",sans-serif;
  --body:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:14px}
.mast{background:var(--text);color:#FFFFFF;border-radius:20px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.mast::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;border:2px solid rgba(207,234,219,.18);pointer-events:none}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.caps{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(207,234,219,.22);padding-top:10px}
.capnav{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(207,234,219,.5);background:transparent;color:#FFFFFF;font-size:18px;font-weight:800;cursor:pointer;line-height:1}
.capnav:disabled{opacity:.3;cursor:default}
.capnav:focus-visible{outline:3px solid #FFC93C;outline-offset:2px}
.capmid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.caplab{font-family:var(--display);font-size:13px;letter-spacing:.06em;white-space:nowrap}
.caplab span{color:#FFC93C}
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:260px}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(207,234,219,.35);border:0;padding:0;cursor:pointer}
.dot[aria-current=true]{background:#FFC93C;transform:scale(1.25)}
.brand{display:flex;align-items:center;gap:10px}
.brand .wm{font-family:var(--display);font-size:20px;color:#FFFFFF;line-height:1}
.brand .sub{font-family:var(--display);font-size:10.5px;letter-spacing:.08em;color:#CFEADB;margin-top:5px;display:block}
.pill{background:#FFC93C;color:var(--text);border:0!important;font-family:var(--display);letter-spacing:.05em;font-size:12px;border:2px solid currentColor;border-radius:999px;padding:4px 10px;white-space:nowrap}
.hero{display:flex;flex-direction:column;gap:10px}
.heroRow{display:flex;gap:14px;align-items:center}
.flag{width:96px;height:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(29,53,87,.15);flex:0 0 auto}
.hero h1{flex:1;min-width:0;font-family:var(--display);font-weight:400;font-size:40px;line-height:.98;margin:0;text-wrap:balance}
.hero p{margin:0;color:var(--mute);font-size:14px;line-height:1.45}
.hero p b{color:var(--text)}
/* category tracker */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tier{background:var(--panel);border-radius:14px;padding:10px 8px 9px;text-align:center;border-top:5px solid currentColor}
.tier .tn{display:block;font-family:var(--display);font-size:11px;letter-spacing:.04em;line-height:1.15}
.tier .tc{display:block;font-family:var(--display);font-size:24px;line-height:1.1;margin-top:4px;color:var(--text);font-variant-numeric:tabular-nums}
.tier .tc small{font-size:14px;color:var(--mute)}
.tier .tp{display:block;font-size:11px;font-weight:700;color:var(--mute);margin-top:2px}
.tier.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.08)}}
/* scoreboard */
.board-row{display:flex;gap:10px;align-items:stretch}
.clock{flex:0 0 auto;background:var(--panel);border-radius:16px;padding:8px;display:flex;align-items:center;justify-content:center}
.clock svg{display:block}
.stat{flex:1;background:var(--panel);border-radius:16px;padding:10px 14px;display:flex;flex-direction:column;justify-content:center}
.stat .k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.stat .v{font-family:var(--display);font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;font-weight:700;color:var(--mute)}
.btn{border:1px solid var(--line);background:#FFFFFF;border-radius:12px;padding:11px 15px;font-weight:800;font-size:14px;cursor:pointer}
.btn.primary{background:var(--flare);color:#FFFFFF;border-color:transparent}
.btn.kick{width:100%;padding:16px;font-family:var(--display);font-size:20px;letter-spacing:.04em;background:#FFC93C;color:var(--text);border:0;box-shadow:0 4px 0 #D9A21F}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.guess{display:flex;gap:8px}
.combo{position:relative;flex:1;min-width:0;display:flex}
.guess input{flex:1;min-width:0;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-weight:600;font-size:16px}
.guess input:focus{outline:2px solid var(--flare);border-color:transparent}
.guess input:disabled{background:var(--panel)}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;list-style:none;margin:0;padding:6px;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(29,53,87,.18)}
.sugg li{padding:10px 12px;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer}
.sugg li[aria-selected=true],.sugg li:hover{background:var(--mint)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fb{min-height:22px;font-size:15px;font-weight:700}
.fb.good{color:var(--good)} .fb.bad{color:var(--bad)} .fb.info{color:var(--sky)}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* your finds: compact rows */
.finds{display:flex;flex-direction:column;gap:6px}
.find{display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:12px;padding:8px 12px;min-height:46px}
.find .nm{flex:1;min-width:0}
.find .nm b{display:block;font-size:15px;font-weight:800;line-height:1.2}
.find .nm span{display:block;font-size:12px;font-weight:600;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.find .st{font-family:var(--display);font-size:10px;letter-spacing:.04em;border:2px solid currentColor;border-radius:7px;padding:3px 6px;transform:rotate(-6deg);background:#FFFFFF;white-space:nowrap}
.find .pt{font-family:var(--display);font-size:17px;color:var(--flare);min-width:42px;text-align:right}
.find.fresh{animation:rowIn .45s ease-out}
.find.fresh .st{animation:stampIn .35s cubic-bezier(.2,1.6,.4,1) .15s both}
.find.mystery{background:transparent;border:1.5px dashed #8FC2A8}
.find.mystery .nm b{color:var(--mute)}
@keyframes rowIn{from{transform:translateY(-8px);opacity:0;background:var(--mint)}to{transform:none;opacity:1}}
@keyframes stampIn{0%{opacity:0;transform:rotate(-20deg) scale(2.2)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
.sec-h{margin:4px 0 0;font-family:var(--display);font-size:14px;letter-spacing:.05em;color:var(--mute)}
.empty{padding:16px;border:1.5px dashed #8FC2A8;border-radius:14px;color:var(--mute);font-size:14px;font-weight:600;text-align:center}
.end{background:var(--mint);border-radius:16px;padding:16px}
.end h2{margin:0;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.1}
.share{white-space:pre-wrap;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:14px;line-height:1.5;margin:12px 0}
.band{background:var(--panel);border-radius:14px;padding:12px}
.band h3{margin:0 0 8px;display:flex;justify-content:space-between;font-family:var(--display);font-weight:400;font-size:14px}
.band h3 span{font-family:var(--body);font-size:12px;font-weight:700;color:var(--mute)}
.band ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.band li{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--mute)}
.band li.got{color:var(--text);font-weight:800}
.how{color:var(--mute);font-size:13px;line-height:1.55}
.how b{color:var(--text)}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){.shake,.find.fresh,.find.fresh .st,.tier.bump{animation:none!important}}
/* ---- site chrome ---- */
.sitenav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sitenav nav{display:flex;gap:4px;flex-wrap:wrap}
.sitenav a{font-weight:800;font-size:14px;color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px}
.sitenav a[aria-current=page]{background:var(--mint)}
.sitenav a:hover{background:var(--panel)}
.capcount{font-family:var(--display);font-size:13px;letter-spacing:.04em;background:#FFC93C;color:var(--text);border-radius:999px;padding:6px 12px;white-space:nowrap}
.mast a.brand{text-decoration:none}
.preview{background:#FFF4D6;border:1px solid #F2D58A;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:700}
.cabinet{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cabinet span{width:28px;height:28px;border-radius:50%;background:#1E2A78;border:2px solid #FFC93C;display:inline-block}
.page h1{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;margin:6px 0 0}
.page h2{font-family:var(--display);font-weight:400;font-size:22px;margin:18px 0 6px}
.page p,.page li{font-size:16px;line-height:1.6;color:var(--mute)}
.page b{color:var(--text)}
.card{background:var(--panel);border-radius:16px;padding:14px 16px}
.arch{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.arch a{display:flex;align-items:center;gap:12px;background:var(--panel);border-radius:14px;padding:10px 14px;text-decoration:none;color:var(--text)}
.arch a:hover{background:var(--mint)}
.arch svg{width:46px;height:auto;border-radius:4px;box-shadow:0 0 0 1px rgba(29,53,87,.15)}
.arch .an{flex:1;font-family:var(--display);font-size:17px}
.arch .an small{display:block;font-family:var(--body);font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.arch .as{font-family:var(--display);font-size:15px;color:var(--flare);white-space:nowrap}
table.pts{width:100%;border-collapse:separate;border-spacing:0 6px}
table.pts td{background:var(--panel);padding:10px 12px;font-size:15px;font-weight:700}
table.pts td:first-child{border-radius:10px 0 0 10px;font-family:var(--display);font-weight:400}
table.pts td:last-child{border-radius:0 10px 10px 0;text-align:right}
footer.site{font-size:13px;color:var(--mute);line-height:1.6;border-top:1px solid var(--line);padding-top:14px}
footer.site a{color:var(--mute)}

/* ---- Capped bar + game switcher ---- */
.cbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1E2A78;color:#fff;border-radius:16px;padding:10px 14px;flex-wrap:wrap}
.cbar a.home{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-family:var(--display);font-size:17px;letter-spacing:.04em}
.cbar nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.cbar nav a{color:#DCE2F5;text-decoration:none;font-size:13px;font-weight:800;padding:6px 7px;border-radius:8px}
.cbar nav a[aria-current=page],.cbar nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.cbar .capcount{margin-left:4px}
.kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--mute)}
.switch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gtab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;background:#fff;border:3px solid #E2DED5;border-radius:16px;padding:12px;color:var(--text)}
.gtab:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.gtab .gn{font-family:var(--display);font-size:17px;line-height:1}
.gtab .gd{font-size:12px;font-weight:700;color:var(--mute)}
.gtab .gt{display:flex;justify-content:space-between;align-items:center;gap:6px}
.gtab .new{font-size:11px;font-weight:800;color:#fff;background:var(--flare);border-radius:999px;padding:3px 8px}
.gtab[data-game=pfc][aria-selected=true]{background:#CFEADB;border-color:var(--text)}
.gtab[data-game=topbins]{color:#2A1520}
.gtab[data-game=topbins] .new{background:#8A1E3C}
.gtab[data-game=topbins][aria-selected=true]{background:#F7E4E9;border-color:#2A1520}
#pfcPanel .mast .brand{display:none}
#pfcPanel .mast .top{justify-content:flex-end;margin-bottom:-6px}
/* ---- Top Bins ---- */
#tbPanel{--tb:#8A1E3C;--tbink:#2A1520;--tbsoft:#F7E4E9;color:var(--tbink);display:flex;flex-direction:column;gap:12px}
#tbPanel h1{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.05;margin:0}
#tbPanel .lede{margin:0;font-size:15px;font-weight:600;color:#6B5560;line-height:1.45}
.tbstep{margin:6px 0 0;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--tb)}
.seg{display:flex;background:#EDE6E0;border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;border-radius:9px;padding:11px;font-weight:800;font-size:14px;background:transparent;color:var(--tbink);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--tb);color:#fff}
.tbgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tbclub{display:flex;justify-content:space-between;align-items:center;gap:6px;background:#fff;border:2px solid #E2DED5;border-radius:12px;padding:11px 12px;cursor:pointer;text-align:left}
.tbclub span{font-weight:800;font-size:14px;color:var(--tbink)}
.tbclub small{font-weight:800;font-size:12px;color:var(--tb)}
.tbclub:not(.soon):hover{border-color:var(--tbink)}
.tbclub.soon{opacity:.55;cursor:default}
.tbhead{display:flex;align-items:center;gap:14px}
.tbhead h2{font-family:var(--display);font-weight:400;font-size:32px;line-height:1;margin:0}
.tbhead p{margin:4px 0 0;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--tb)}
.tbboard{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.tbboard li{display:flex;align-items:center;gap:12px;background:#fff;border-radius:11px;padding:9px 12px;min-height:42px;border:1.5px dashed #E2C9D1}
.tbboard li b{font-family:var(--display);font-weight:400;font-size:16px;width:30px;color:var(--tb)}
.tbboard li span{flex:1;font-weight:800;font-size:15px}
.tbboard li em{font-style:normal;font-size:13px;font-weight:700;color:#6B5560}
.tbboard li.got{border:1.5px solid var(--tb);background:var(--tbsoft)}
.tbboard li.miss span{color:#9A8890}
.tbboard li.fresh{animation:rowIn .45s ease-out}
.tbbtn{width:100%;padding:16px;border:0;border-radius:14px;font-family:var(--display);font-size:20px;letter-spacing:.04em;background:var(--tb);color:#fff;cursor:pointer;box-shadow:0 4px 0 #5E1428}
.linkbtn{background:none;border:0;padding:0;font-weight:800;font-size:14px;color:var(--tb);cursor:pointer;text-decoration:underline}
#tbPanel .end{background:var(--tbsoft)}
#tbPanel .btn.primary{background:var(--tb)}

/* ---- game identity panels ---- */
.gintro{display:flex;align-items:center;gap:14px}
.gintro svg{flex:0 0 auto}
.gname{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;margin:0;color:var(--text)}
.gintro.tb .gname{color:#2A1520}
.gtag{margin:5px 0 0;font-size:14px;font-weight:600;line-height:1.4;color:var(--mute)}
.gintro.tb .gtag{color:#6B5560}
details.explain{background:var(--panel);border-radius:14px;padding:12px 14px;border:1px solid var(--line)}
details.explain.tb{border-color:#E9CFD7;background:#FFFFFF}
details.explain summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none;display:flex;justify-content:space-between}
details.explain summary::after{content:"+";font-family:var(--display);font-size:18px;line-height:1}
details.explain[open] summary::after{content:"–"}
details.explain summary::-webkit-details-marker{display:none}
details.explain ul{margin:10px 0 4px;padding-left:18px}
details.explain li,details.explain p{font-size:14px;line-height:1.55;color:var(--mute);margin:4px 0}
details.explain b{color:var(--text)}
details.explain.tb b{color:#2A1520}
.pastlink{margin:0;text-align:center;font-weight:800;font-size:14px}
.pastlink a{color:var(--flare)}
.crumb{margin:0}.crumb a{font-weight:800;font-size:14px;color:var(--flare);text-decoration:none}
.gtab .gt svg{display:block}
.page .lead{font-size:18px;color:var(--text)}
.gamelist{display:flex;flex-direction:column;gap:10px}
.gamelist a{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--mute);font-size:14px;line-height:1.45}
.gamelist a:hover{background:var(--mint)}
.gamelist b{display:block;font-family:var(--display);font-weight:400;font-size:17px;color:var(--text)}

.gamelist a svg{flex:0 0 auto}

.cbar a.home svg{border-radius:50%}
/* compact cap bar */
#pfcPanel .mast{flex-direction:row;align-items:center;gap:8px;padding:6px 8px;border-radius:14px}
#pfcPanel .mast::after{display:none}
#pfcPanel .mast .top{order:2;margin:0}
#pfcPanel .mast .caps{order:1;flex:1;border-top:0;padding-top:0;gap:6px}
#pfcPanel .capnav{width:30px;height:30px;font-size:16px}
#pfcPanel .capmid{flex-direction:row;justify-content:center;gap:10px}
#pfcPanel .caplab{font-size:12px}
#pfcPanel .dots{gap:4px;flex-wrap:nowrap}
#pfcPanel .dot{width:7px;height:7px}
#pfcPanel .pill{font-size:10px;padding:4px 8px}

/* ================= v3 layout ================= */
:root{--ink:#F6F1E7;--panel:#FFFFFF}
html,body{background:#F6F1E7}
/* full-width Capped header */
.cbar{position:sticky;top:0;z-index:20;border-radius:0;padding:0;background:#1E2A78;box-shadow:0 2px 0 rgba(26,16,51,.08)}
.cbar-in{max-width:560px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.wrap{padding-top:18px;gap:16px}
/* game switcher: neutral until chosen */
.gtab{border-width:2px;border-color:#E6DFD2;padding:11px 12px}
.gtab[data-game=pfc][aria-selected=true]{background:#E4F3EA;border-color:#0F766E}
.gtab[data-game=topbins][aria-selected=true]{background:#FBEFF2;border-color:#8A1E3C}
/* each game owns its colour, only inside its panel */
.gpanel{border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:14px}
#pfcPanel{background:#E4F3EA}
#tbPanel{background:#FBEFF2}
#pfcPanel.hidden,#tbPanel.hidden{display:none!important}
/* slim intro + how to play */
details.explain.slim{background:transparent;border:0;padding:0}
details.explain.slim summary{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--mute)}
details.explain.slim summary::after{content:none}
details.explain.slim .htp{flex:0 0 auto;font-weight:800;font-size:13px;color:#0F766E;border:1.5px solid currentColor;border-radius:999px;padding:5px 11px}
details.explain.slim.tb .htp{color:#8A1E3C}
details.explain.slim.tb summary{color:#6B5560}
details.explain.slim[open] .htp{background:#0F766E;color:#FFFFFF;border-color:#0F766E}
details.explain.slim.tb[open] .htp{background:#8A1E3C;border-color:#8A1E3C}
details.explain.slim ul{background:#FFFFFF;border-radius:14px;padding:12px 14px 12px 30px;margin-top:10px}
details.explain.slim p{padding:0 4px}
/* one card style */
.tier,.stat,.clock,.find,.band,.tbclub{background:#FFFFFF;border-radius:14px;box-shadow:0 1px 0 rgba(26,16,51,.06)}
.tier{border-top-width:4px}
.pfcMain,.pfcSide{display:flex;flex-direction:column;gap:14px}
.pfcSide:empty{display:none}
/* yellow = press or win; level label goes quiet */
#pfcPanel .pill{background:#FFFFFF;color:#1D3557}
.tbbtn{background:#FFC93C;color:#2A1520;box-shadow:0 4px 0 #D9A21F}
.hero h1{font-size:34px}
.flag{width:84px}
/* desktop: one column, a little wider */
@media (min-width: 900px){
  .cbar-in{max-width:680px}
  .wrap{max-width:680px;padding:28px 24px 56px}
  .gpanel{padding:22px}
  .tbgrid{grid-template-columns:repeat(3,1fr)}
}
.cbar{display:block}
#tbBack{justify-self:start}
#tbGuess:focus{outline-color:#8A1E3C}

/* warmer house ground */
:root{--ink:#ECE4D3}
html,body{background:#ECE4D3}
.gtab{border-color:#DCD2BE}
/* strapline under the wordmark */
.cbar a.home{line-height:1}
.cbar .wm{display:flex;flex-direction:column;gap:3px}
.cbar .strap{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.06em;color:#C9D1F0;text-transform:uppercase}
.cbar nav{flex-wrap:nowrap}
.cbar .strap{white-space:nowrap}
@media (max-width: 480px){.cbar .strap-more{display:none}}
/* ===== pitch background ===== */
:root{--ink:#CDE7C6}
html,body{background-color:#CDE7C6}
body{background-image:repeating-linear-gradient(180deg,#CDE7C6 0 110px,#C2E0BA 110px 220px);background-attachment:fixed}
body::before{content:"";position:fixed;inset:14px;border:3px solid rgba(255,255,255,.75);border-radius:2px;pointer-events:none;z-index:0}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.85) 0 5px,transparent 6px),
    radial-gradient(circle at 50% 50%,transparent 0 96px,rgba(255,255,255,.75) 97px 100px,transparent 101px),
    linear-gradient(180deg,transparent calc(50% - 1.5px),rgba(255,255,255,.75) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.wrap{position:relative;z-index:1}
.cbar{z-index:30}
/* panels become clean cards on the grass, each with its game colour as a top band */
#pfcPanel{background:#F4FAF6;border-top:6px solid #0F766E}
#tbPanel{background:#FFF6F8;border-top:6px solid #8A1E3C}
.gtab{background:#FFFFFF}
.kicker{color:#24513A}
footer.site{color:#24513A;border-top-color:rgba(255,255,255,.7)}
footer.site a{color:#24513A}
.page{background:#FFFFFF;border-radius:20px;padding:18px 18px 22px}
/* ===== black header with depth ===== */
.cbar{background:linear-gradient(180deg,#24242A 0%,#121215 55%,#0A0A0C 100%);border-bottom:3px solid #FFC93C;box-shadow:0 6px 18px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.06) inset}
.cbar-in{padding:14px 16px}
.cbar a.home{font-size:20px;gap:11px;letter-spacing:.06em}
.cbar a.home svg{width:42px;height:42px;box-shadow:0 2px 6px rgba(0,0,0,.45);border-radius:50%}
.cbar .strap{color:#B9BAC4;font-size:11px}
.cbar nav a{color:#F2F2F5}
.cbar nav a:hover{background:rgba(255,255,255,.1)}
.cbar .capcount{box-shadow:0 2px 0 #C9971E}
@media (min-width: 900px){.cbar-in{padding:16px 24px}}
/* tiny players on the pitch (decor) */
.pitchmen{position:fixed;inset:0;pointer-events:none;z-index:0}
.pitchmen span{position:absolute;transform:translate(-50%,-50%)}
.pitchmen svg{display:block}
@media (max-width: 700px){.pitchmen span{transform:translate(-50%,-50%) scale(.8)}}

/* ===== painted, faded pitch ===== */
:root{--ink:#BFCFA8}
html,body{background-color:#BFCFA8}
body{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22480%22%20height%3D%22480%22%3E%3Cfilter%20id%3D%22p%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.004%200.09%22%20numOctaves%3D%224%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%20result%3D%22n%22/%3E%3CfeDiffuseLighting%20in%3D%22n%22%20surfaceScale%3D%222.6%22%20diffuseConstant%3D%221.05%22%20lighting-color%3D%22%23ffffff%22%20result%3D%22l%22%3E%3CfeDistantLight%20azimuth%3D%22235%22%20elevation%3D%2252%22/%3E%3C/feDiffuseLighting%3E%3CfeComposite%20in%3D%22l%22%20in2%3D%22SourceGraphic%22%20operator%3D%22arithmetic%22%20k1%3D%221.15%22%20k2%3D%220%22%20k3%3D%220%22%20k4%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22480%22%20height%3D%22480%22%20fill%3D%22%23BFCFA8%22%20filter%3D%22url%28%23p%29%22/%3E%3C/svg%3E");background-size:480px 480px;background-attachment:fixed}
body::before{border-color:rgba(255,255,255,.6);border-width:2.5px}
body::after{background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.7) 0 4px,transparent 5px),
    radial-gradient(circle at 50% 50%,transparent 0 96px,rgba(255,255,255,.6) 97px 99.5px,transparent 100.5px),
    linear-gradient(180deg,transparent calc(50% - 1.25px),rgba(255,255,255,.6) calc(50% - 1.25px) calc(50% + 1.25px),transparent calc(50% + 1.25px))}
.pitchmen svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
@media (min-width: 1200px){.pitchmen span{transform:translate(-50%,-50%) scale(1.5)}}
@media (max-width: 700px){.pitchmen span{transform:translate(-50%,-50%) scale(.72)}}
.pitchmen{display:none}
/* ===== back on brand: Capped silver ground ===== */
:root{--ink:#DCE1EC}
html,body{background:#DCE1EC!important;background-image:none!important}
body::before,body::after{display:none!important}
.kicker{color:#2B3366}
footer.site{color:#3A4170;border-top-color:#C5CCDD}
footer.site a{color:#3A4170}
.gtab{border-color:#C9D0E0}

/* ===== textured grey header with a halfway-line detail ===== */
.cbar{background-color:#33363E!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%20.55%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22220%22%20height%3D%22220%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.16%22/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.12))!important;border-bottom:0!important;box-shadow:0 4px 14px rgba(26,16,51,.18)!important;overflow:hidden}
.cbar::before{content:"";position:absolute;right:-70px;top:50%;width:170px;height:170px;transform:translateY(-50%);border:2px solid rgba(255,255,255,.22);border-radius:50%;pointer-events:none}
.cbar::after{content:"";position:absolute;right:15px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.22);pointer-events:none}
.cbar-in{position:relative;z-index:1}
.cbar .capcount{box-shadow:none!important}
.cbar .strap{color:#D6D9E0!important}
@media (max-width: 600px){.cbar::before{right:-128px}.cbar::after{right:-45px}}

/* ===== header details: brand wordmark, countdown, cap icon ===== */
.cbar a.home .wm{font-family:var(--display)!important;font-size:22px;letter-spacing:.07em;font-weight:400}
.cbar a.home .strap{font-family:var(--body)}
.nextcap{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#E8EAF0;white-space:nowrap}
.nextcap i{width:7px;height:7px;border-radius:50%;background:#FFC93C;box-shadow:0 0 0 3px rgba(255,201,60,.22);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,201,60,0)}}
.nc-d{margin-right:10px;padding:6px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(0,0,0,.18)}
.nc-m{display:none}
.capcount{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:15px;padding:5px 12px 5px 9px}
.capcount b{font-weight:400}
.capicon{display:block}
@media (max-width: 760px){
  .nc-d{display:none}
  .cbar .strap{display:none}
  .nc-m{display:inline-flex;margin-top:4px;font-size:11px;color:#D6D9E0}
}
@media (prefers-reduced-motion: reduce){.nextcap i{animation:none}}

/* countdown removed; strapline back on phones; silver piping under the header */
@media (max-width: 760px){.cbar .strap{display:block}}
.cbar{border-bottom:3px solid #D9DEE8!important}
.cbar{border-bottom:4px solid #D9DEE8!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.25),0 1px 0 #9AA3B8,0 4px 14px rgba(26,16,51,.18)!important}

/* full board: clubs under each name */
.band li{align-items:flex-start;padding:4px 0;border-bottom:1px solid #EEF0F4}
.band li:last-child{border-bottom:0}
.band .bn small{display:block;font-size:11.5px;font-weight:600;color:#7A8597;margin-top:1px}
.band .bg{text-align:right;white-space:nowrap}
.band .bg em{display:block;font-style:normal;font-family:var(--display);font-weight:400;color:var(--flare);font-size:13px}
.band{background:#FFFFFF!important}

/* ===== end-of-game results ===== */
.end{background:#FFFFFF!important;border-radius:18px;padding:18px;box-shadow:0 1px 0 rgba(26,16,51,.06)}
.endkick{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--flare)}
#tbPanel .endkick{color:#8A1E3C}
.endscore{font-family:var(--display);font-size:64px;line-height:1;margin:6px 0 2px;color:var(--text);display:flex;align-items:baseline;gap:8px}
#tbPanel .endscore{color:#2A1520}
.endscore small{font-size:20px;color:var(--mute)}
.endsub{margin:0 0 12px;font-weight:700;color:var(--mute)}
.endstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.endstats div{background:var(--ink,#ECE4D3);background:#F2F4F8;border-radius:12px;padding:10px}
#tbPanel .endstats div{background:#FBEFF2}
.endstats span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.endstats b{display:block;font-family:var(--display);font-weight:400;font-size:19px;margin-top:4px;line-height:1.1;word-break:break-word}
.endstats b small{display:block;font-family:var(--body);font-size:11.5px;font-weight:700;color:var(--mute);margin-top:3px}
.endtiers{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.etier{display:grid;grid-template-columns:104px 1fr 44px 56px;align-items:center;gap:10px;font-size:13px;font-weight:800}
.etn{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.etbar{height:10px;border-radius:999px;background:#EEF0F4;overflow:hidden}
.etbar i{display:block;height:100%;border-radius:999px}
.etc{text-align:right;color:var(--text)}
.etp{text-align:right;font-family:var(--display);font-weight:400;color:var(--flare)}
.capnote{margin:4px 0 0;font-weight:700}
.sharelab{margin:14px 0 6px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--mute)}
.end .share{margin-top:0;background:#F7F8FB;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
@media (max-width: 480px){.endstats{grid-template-columns:repeat(2,1fr)}.endscore{font-size:56px}.etier{grid-template-columns:86px 1fr 40px 50px;gap:8px}}

/* deepest cut always fits its tile */
.endstats div{min-width:0;overflow:hidden}
.endstats b{overflow-wrap:anywhere}
.endstats .dc{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.endstats .dc.sm{font-size:16px}
.endstats .dc.xs{font-size:13.5px}
.endstats .dcbest:empty{display:none}
.endstats .dcbest{color:var(--flare)!important}
.endstats .dc{text-transform:none;letter-spacing:0;font-size:19px;font-weight:400;color:var(--text);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.1}
.endstats .dc.sm{font-size:16px}
.endstats .dc.xs{font-size:14px}
/* ===== Top Bins: compact, club stays in view ===== */
#tbGame .tbhead{position:sticky;top:76px;z-index:6;background:#FFF6F8;border-radius:14px;padding:8px 12px;box-shadow:0 6px 14px -8px rgba(42,21,32,.35);gap:12px}
#tbGame .tbhead svg{width:56px;height:56px}
#tbGame .tbhead h2{font-size:24px}
#tbGame .tbhead p{font-size:11px;margin-top:3px}
#tbScore{font-size:24px!important}
.tbboard{gap:4px}
.tbboard li{min-height:0;padding:6px 12px;border-radius:10px;gap:10px}
.tbboard li b{font-size:14px;width:26px}
.tbboard li span{font-size:14px}
.tbboard li em{font-size:12px}
.tbboard li.hinted:not(.got){border-style:solid;border-color:#E9B949;background:#FFF8E5}
.tbboard li.hinted:not(.got) span{letter-spacing:.08em;color:#8A6A12}
@media (max-width: 600px){#tbGame .tbhead{top:70px}}