/* My Club follows the site's ink outlines, football display type and sticker colours. */
:root{--club-paper:#fff;--club-ink:#16171b;--club-muted:#4b5059;--club-line:#16171b;--club-soft:#edf5fa;--club-accent:#b5004e;--club-yellow:#ffe378}
[data-theme=dark]{--club-paper:#192633;--club-ink:#f5f8fc;--club-muted:#c1ccd8;--club-line:#c8d4e0;--club-soft:#111c29;--club-accent:#ff8ebc}
.club-rail,.club-home,.club-learning,.club-stamp,.club-modal,.club-play,[data-club-page],.club-next{color:var(--club-ink);font-family:"DM Sans",sans-serif;font-size:1rem;line-height:1.5}
.club-rail{background:var(--club-paper);border-bottom:2px solid var(--club-line);display:flex;align-items:center;gap:24px;padding:8px max(16px,calc((100vw - 1060px)/2));min-height:64px}
.club-identity{display:flex;align-items:center;gap:10px;color:var(--club-ink);text-decoration:none;flex-shrink:0}
.club-identity strong{display:block;font-size:.875rem}.club-identity small{display:block;font-size:.75rem;color:var(--club-muted)}
.club-crest{display:grid;place-items:center;background:var(--club-yellow);color:#17171b;border:2px solid #17171b;border-radius:8px 8px 18px 18px;font-weight:900;font-size:.875rem;width:38px;height:42px;box-shadow:2px 2px 0 #17171b;flex-shrink:0}
.club-rail-progress{margin-left:auto;display:grid;grid-template-columns:auto minmax(90px,160px);gap:0 12px;align-items:center}
.club-rail-progress strong{font-size:.875rem}.club-rail-progress small{grid-column:1/-1;font-size:.75rem;color:var(--club-muted);text-align:right}
.club-meter{display:block;height:9px;background:var(--club-soft);border:1px solid var(--club-line);border-radius:8px;overflow:hidden;min-width:70px}
.club-meter i{display:block;background:#b5004e;height:100%;transition:width .25s ease}
[data-theme=dark] .club-meter i{background:#ff8ebc}
.club-rail-play{color:var(--club-ink);font-size:.875rem;font-weight:700;display:grid;place-items:center;min-height:44px}
.club-home{max-width:1140px;margin:24px 0;padding:0;display:grid;grid-template-columns:1.15fr 1fr;border:2px solid var(--club-line);border-radius:16px;overflow:hidden;box-shadow:4px 4px 0 var(--club-line);background:var(--club-paper)}
.club-home>[data-club-challenge],.club-home-side{padding:24px}
.club-home>[data-club-challenge]{background:var(--club-yellow);color:#17171b;border-right:2px solid var(--club-line)}
.club-kicker{font-size:.75rem;font-weight:800;letter-spacing:.06em;margin:0 0 8px;line-height:1.6}
.club-kicker span{display:inline-block;background:#17171b;color:#fff;border-radius:4px;padding:0 6px;margin-left:4px}
.club-home h2,.club-body h2,.club-play h2,.club-dialog-title{font-family:"Lilita One",sans-serif;font-weight:400;font-size:clamp(1.5rem,2vw,2rem);line-height:1.15;margin:0 0 12px}
.club-home p,.club-body p,.club-play p{margin:0 0 16px}
.club-actions{display:flex;flex-wrap:wrap;gap:8px}
.club-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:2px solid var(--club-line);border-radius:9px;background:var(--club-paper);color:var(--club-ink);font:700 .875rem/1.3 "DM Sans",sans-serif;text-decoration:none;cursor:pointer;gap:8px}
.club-btn:hover{box-shadow:2px 2px 0 var(--club-line);transform:translateY(-1px)}
.club-btn:active{transform:translateY(1px);box-shadow:none}
.club-primary{background:#a90049;color:#fff;border-color:#17171b}
.club-home>[data-club-challenge] .club-primary,.club-challenge-card .club-primary{background:#a90049;color:#fff;border-color:#17171b}
.club-small{font-size:.8125rem;display:block;color:var(--club-muted);margin-top:10px;line-height:1.6}
.club-home>[data-club-challenge] .club-small,.club-challenge-card .club-small{color:#3e351d}
.club-profile{display:flex;align-items:center;gap:20px;margin:20px 0 12px}
.club-profile>div{flex:1;min-width:0}.club-profile small{font-size:.8125rem;color:var(--club-muted);display:block;margin-top:8px}
.club-crest-big{width:70px;height:84px;font:400 2rem "Lilita One",sans-serif;box-shadow:4px 4px 0 #17171b}
.club-modal .tc-modal-card{background:var(--club-paper);color:var(--club-ink);width:min(860px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:28px;overflow:auto}
.club-modal .tc-x{background:var(--club-paper);color:var(--club-ink);border:2px solid var(--club-line);min-width:44px;min-height:44px;z-index:2}
.club-dialog-title{padding-right:44px;font-size:1.5rem}
.club-tabs{display:flex;gap:4px;border-bottom:2px solid var(--club-line);padding-bottom:8px}
.club-tabs button{flex:1;min-height:44px;padding:8px;background:transparent;border:0;border-radius:6px;color:var(--club-ink);font:700 .875rem "DM Sans",sans-serif;cursor:pointer}
.club-tabs button[aria-pressed=true]{background:var(--club-ink);color:var(--club-paper)}
.club-body{padding-top:16px}.club-body h3{font:700 1.125rem "DM Sans",sans-serif;margin:0 0 8px}
.club-challenge-card{background:var(--club-yellow);color:#17171b;border:2px solid #17171b;border-radius:12px;padding:20px;margin:20px 0}
.club-challenge-card h2{font-size:1.5rem}
.club-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.club-ladder{border-block:1px solid var(--club-line);padding:12px 0;margin:20px 0}
.club-ladder summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}
.club-ladder summary::after{content:"+";margin-left:auto}
.club-ladder[open] summary::after{content:"−"}
.club-ladder ol{list-style:none;padding:0;margin:0}
.club-ladder li{display:flex;justify-content:space-between;gap:12px;padding:10px;border-top:1px solid var(--club-line);font-size:.875rem}
.club-ladder li[aria-current]{background:var(--club-soft)}
.club-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.club-frame{color:var(--club-ink);background:var(--club-paper);border:2px solid var(--club-line);border-radius:10px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;min-height:44px}
.club-frame strong{font-size:.875rem}.club-frame small{font-size:.75rem}
.club-frame[disabled]{cursor:not-allowed;background:var(--club-soft)}
.club-frame[aria-pressed=true]{outline:3px solid var(--club-accent);outline-offset:1px}
.club-frame-art{display:grid;place-items:center;width:42px;height:48px;border:2px solid #17171b;border-radius:6px;color:#17171b;background:#ffe378;font-weight:900}
.frame-away .club-frame-art,[data-club-frame=away] .club-crest{background:#bde5fa}
.frame-foil .club-frame-art,[data-club-frame=foil] .club-crest{background:linear-gradient(135deg,#c6edf8,#e3d3ff,#fce3ae);border-style:double;border-width:4px}
.frame-captain .club-frame-art,[data-club-frame=captain] .club-crest{background:#17171b;color:#ffe378;border-color:#c59710}
[data-club-frame=foil] .club-stamp-card.is-collected{box-shadow:inset 0 0 0 4px #b3a4dd,3px 3px 0 var(--club-line)}
[data-club-frame=away] .club-stamp-card.is-collected{border-top:6px solid #2785b8}
[data-club-frame=captain] .club-stamp-card.is-collected{border-top:6px solid #c59710}
.club-album{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
.club-stamp-card{padding:16px;border:2px dashed var(--club-line);border-radius:10px;background:var(--club-soft);position:relative;display:flex;flex-direction:column;min-width:0}
.club-stamp-card.is-collected{background:var(--club-paper);border-style:solid;box-shadow:3px 3px 0 var(--club-line)}
.club-stamp-num{font:400 2rem "Lilita One",sans-serif;color:var(--club-muted);margin-bottom:16px}
.club-stamp-card small{font-size:.75rem;color:var(--club-muted)}
.club-stamp-card h3{font-size:1rem;margin:8px 0}.club-stamp-card p{font-size:.75rem;color:var(--club-muted)}
.club-stamp-card a{margin-top:auto;min-height:44px;display:flex;align-items:center;font-size:.875rem;font-weight:700;color:var(--club-accent)}
.club-badges{list-style:none!important;padding:0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.club-badges li{padding:16px;border:1px dashed var(--club-line);border-radius:10px;background:var(--club-soft);display:flex;flex-direction:column;align-items:flex-start}
.club-badges li.is-earned{border:2px solid var(--club-line);background:var(--club-paper)}
.club-badge-art{border:2px solid var(--club-line);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-weight:900;margin-bottom:12px}
.is-earned .club-badge-art{background:#ffe378;color:#17171b;border-color:#17171b}
.club-badges p{font-size:.875rem}.club-badges a{color:var(--club-accent);font-size:.8125rem;min-height:44px;display:flex;align-items:center;margin-top:auto}
.club-legacy{border:2px dashed var(--club-line);background:var(--club-soft);padding:20px;border-radius:12px;margin-top:24px}
.club-legacy-badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none!important;padding:0!important}
.club-legacy-badges li{padding:6px 10px;border:1px solid var(--club-line);border-radius:6px;font-size:.8125rem}
.club-history{list-style:none!important;padding:0!important}
.club-history li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--club-line);padding:12px 0;font-size:.875rem}
.club-history small{display:block;color:var(--club-muted)}.club-history li>b{white-space:nowrap}
.club-storage{font-size:.75rem;color:var(--club-muted);border-top:1px solid var(--club-line);padding-top:16px;margin-top:24px}
.club-storage.is-warning{background:#ffe378;color:#17171b;padding:12px;border-radius:8px}
.club-learning,.club-stamp{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border:2px solid var(--club-line);border-radius:12px;background:var(--club-paper);margin:20px 0}
.club-learning p,.club-stamp p{margin:6px 0 0;font-size:.875rem;color:var(--club-muted)}
.club-stamp h2{font:400 1.5rem "Lilita One",sans-serif;margin:0}
.club-complete{display:block;font-size:.8125rem;padding:8px 16px;color:var(--club-muted)}
.club-complete.is-done{font-weight:700;color:var(--club-accent)}
.club-play,.club-next{margin:32px 0}.club-play #higher-lower{margin:24px 0}
.club-reveal-end{border-top:1px dashed var(--club-line);padding:16px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:.875rem}
.club-reveal-end a,.club-stamp>a{color:var(--club-accent);min-height:44px;display:flex;align-items:center}
.club-reveal-end{animation:club-arrive .3s ease-out both}
@keyframes club-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.club-cheer{animation:club-crest-cheer .6s ease-out both}
.club-stamp-land{animation:club-stamp-land .55s cubic-bezier(.2,.8,.3,1) both}
.club-kit-swap .club-frame-art{animation:club-kit-turn .5s ease-out both}
@keyframes club-crest-cheer{0%,100%{transform:none}30%{transform:translateY(-5px) rotate(-7deg) scale(1.08)}55%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}}
@keyframes club-stamp-land{0%{transform:scale(1.12) rotate(-3deg)}35%{transform:scale(.96) rotate(1deg)}65%{transform:scale(1.03)}100%{transform:none}}
@keyframes club-kit-turn{0%{transform:perspective(200px) rotateY(-65deg)}60%{transform:perspective(200px) rotateY(12deg)}100%{transform:none}}
.club-btn:disabled{cursor:default;background:var(--club-soft);box-shadow:none;transform:none}
:is(.club-rail,.club-modal,[data-club-page],.club-home,.club-learning,.club-stamp) :focus-visible{outline:3px solid var(--club-accent);outline-offset:4px}
#club-check,#play,#higher-lower,#call-it{scroll-margin-top:130px}
[data-club-page]{max-width:960px;margin:auto}
@media(max-width:1100px){.club-home{margin:24px 0}}
@media(max-width:650px){
 .club-rail{gap:12px;padding:6px 12px;min-height:62px}.club-rail-play{display:none}
 .club-rail-progress{grid-template-columns:1fr;gap:3px;min-width:110px;max-width:44%;text-align:right}
 .club-rail-progress .club-meter{height:6px}.club-rail-progress small{font-size:.75rem;line-height:1.2}
 .club-identity{gap:8px}.club-identity small{max-width:138px}
 .club-home{grid-template-columns:1fr;margin:20px 0}
 .club-home>[data-club-challenge]{border-right:0;border-bottom:2px solid var(--club-line)}
 .club-home>[data-club-challenge],.club-home-side{padding:20px}
 .club-modal .tc-modal-card{padding:20px 16px;max-height:calc(100dvh - 16px);width:calc(100vw - 16px)}
 .club-frames{grid-template-columns:repeat(2,1fr)}.club-album,.club-badges{grid-template-columns:repeat(2,1fr);gap:10px}
 .club-two{grid-template-columns:1fr}.club-stamp-card{padding:12px}.club-badges li{padding:12px}
 .club-profile{gap:16px}.club-crest-big{width:54px;height:68px}
 .club-learning,.club-stamp{flex-wrap:wrap;padding:16px}.club-learning>div,.club-stamp>div{flex-basis:100%}
 .club-ladder li{font-size:.8125rem}.club-ladder li b{text-align:right}
}
@media(prefers-reduced-motion:reduce){.club-meter i,.club-btn{transition:none!important}.club-btn:hover{transform:none}.club-reveal-end,.club-cheer,.club-stamp-land,.club-kit-swap .club-frame-art{animation:none!important;transform:none!important}}