/* Atmosphere stays behind the scoreboard; motion uses transforms and opacity. */
.stage { background:#0a1117; background-image:radial-gradient(ellipse at 50% 0%,#28363b,#0a1117 75%); perspective:1400px; }
.atmosphere { position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; pointer-events:none; }
.ambient-scene { background-image:url('castle-night.webp'),url('hogwarts-night.svg'); background-position:center 38%,center top; background-size:cover; opacity:.9; }
.ambient-scene:after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(90deg,rgba(5,12,18,.12),rgba(5,12,18,.58) 35%,rgba(5,12,18,.58) 65%,rgba(5,12,18,.12)),linear-gradient(180deg,rgba(6,12,18,.1),rgba(6,12,18,.3) 40%,#081017 95%); }
.candle-aura { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; background:radial-gradient(ellipse at 8% 10%,rgba(235,155,63,.18),transparent 22%),radial-gradient(ellipse at 92% 12%,rgba(235,155,63,.12),transparent 20%); animation:auraBreathe 9s ease-in-out infinite alternate; }
.mist { position:absolute; left:-25%; width:150%; height:45%; pointer-events:none; background:radial-gradient(ellipse at 20% 50%,rgba(184,205,207,.15),transparent 45%),radial-gradient(ellipse at 75% 60%,rgba(142,172,180,.12),transparent 40%); animation:mistDrift 46s ease-in-out infinite alternate; }
.mist-back { top:4%; opacity:.5; }
.mist-front { top:50%; height:60%; opacity:.65; animation-duration:64s; animation-direction:alternate-reverse; }
.magic-particles { position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; pointer-events:none; }
.magic-particle { position:absolute; top:100%; width:3px; height:3px; border-radius:50%; background:#f5d391; box-shadow:0 0 6px #dc9e46; opacity:0; animation:emberRise 23s linear infinite; }
.starfield { opacity:.2; }
.header { animation:headerReveal 900ms ease-out backwards; }
.league-brand { display:flex; align-items:center; justify-content:center; width:100%; max-width:1100px; margin:0 auto; padding:4px 0; }
.header .brand-logo { flex:0 0 auto; height:20vh; min-height:104px; max-height:190px; margin:0 28px 0 0; }
.header .brand-logo img { display:block; width:auto; height:100%; max-width:100%; max-height:100%; margin:0 auto; object-fit:contain; filter:drop-shadow(0 5px 9px rgba(0,0,0,.5)); }
.league-copy { flex:0 1 auto; min-width:0; text-align:left; }
.league-title { margin:0; color:#e8cc8f; font:700 42px/1.25 'Cinzel Decorative',Georgia,serif; letter-spacing:1px; background-image:linear-gradient(180deg,#fff1c3,#d9b66b 55%,#bc934c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 3px 16px rgba(216,180,101,.12); }
.league-copy .tagline { margin:12px 0 0; font-size:14px; letter-spacing:1px; }
.floating-candles .candle.three { left:13%; }
.floating-candles .candle.six { right:13%; }
.card-heading { justify-content:flex-end; }
.card .card-details { padding-bottom:16px; }
.brand-main { background-image:linear-gradient(110deg,#c6a35e 0%,#f8e7b7 35%,#be954e 48%,#fff2c9 62%,#c7a15a 100%); background-size:200% 100%; animation:titleGleam 14s ease-in-out infinite; text-shadow:0 2px 18px rgba(218,184,107,.12); }
.status { background:rgba(12,25,25,.9); box-shadow:inset 0 1px 0 rgba(240,211,145,.1),0 3px 16px #0005; }
.card { border-radius:7px; box-shadow:inset 1px 0 0 #f6d59420,inset -1px 0 0 #0005,0 12px 24px #0006; animation-name:cardReveal; animation-duration:850ms; animation-timing-function:cubic-bezier(.2,.65,.2,1); animation-fill-mode:backwards; -webkit-animation-name:cardReveal; -webkit-animation-duration:850ms; -webkit-animation-fill-mode:backwards; transition:box-shadow 350ms ease; }
.card.leader { box-shadow:0 0 0 1px #e2bc6c33,0 0 25px #d3aa5233,0 12px 24px #0007; }
.card-inner { z-index:2; border-color:rgba(235,203,138,.22); box-shadow:inset 0 1px 0 #ffecb51c; }
.card-glint { position:absolute; z-index:3; top:-25%; left:-70%; width:35%; height:150%; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent,rgba(255,239,202,.13),transparent); transform:rotate(20deg); animation:metalGleam 17s ease-in-out infinite; }
.card:nth-child(2) .card-glint { animation-delay:-4s; }.card:nth-child(3) .card-glint { animation-delay:-8s; }.card:nth-child(4) .card-glint { animation-delay:-12s; }
.card-heading,.crest,.card-details { z-index:1; }
.card-heading { position:relative; }
.crest { filter:drop-shadow(0 7px 8px #0007); }
.crest img { animation-duration:8s; }
.card-details { border-top:2px solid #a78950; box-shadow:inset 0 3px 10px #56341435,inset 0 -12px 24px #7b5a1814; }
.rank-chip { box-shadow:inset 0 1px 0 #ffe1a024,0 2px 5px #0004; }
.card.leader .rank-chip { background-image:linear-gradient(125deg,#a98443,#e3c684 45%,#ba9755); }
.fill { transform-origin:left center; animation:pointsPour 1100ms cubic-bezier(.15,.7,.25,1) backwards; }
.score-row { font-variant-numeric:lining-nums tabular-nums; }
.score-updated .points { animation:scoreSpark 1100ms ease-out; }
.editor,.fixtures-panel { animation:panelReveal 250ms ease-out backwards; }
.edit,.fixtures-btn,.actions button,.fixtures-heading button { transition:background-color 180ms ease,box-shadow 180ms ease; }
.edit:hover,.fixtures-btn:hover,.actions button:hover,.fixtures-heading button:hover { box-shadow:0 0 14px #d2ac5033,inset 0 1px 0 #f7d39133; }
.edit:focus,.fixtures-btn:focus,.actions button:focus,.fixtures-heading button:focus,.magic-toggle:focus { outline:2px solid #e5c474; outline-offset:3px; }
.candle { border-radius:3px 3px 2px 2px; background:linear-gradient(90deg,#746343,#baa77a 18%,#f0e2b7 50%,#b7a071 82%,#746343); box-shadow:inset 0 2px 2px #fff3,2px 2px 6px #0007,0 -4px 30px #ffc75b20; transform-origin:50% -25px; animation:candleHover 9s ease-in-out infinite alternate; }
.candle:after { content:''; position:absolute; left:3px; top:-4px; width:1px; height:6px; background:#37240f; }
.candle:before { z-index:1; width:8px; height:16px; left:-.5px; bottom:calc(100% + 2px); border-radius:65% 35% 60% 40%; transform-origin:center bottom; background:radial-gradient(ellipse at 50% 80%,#e9f0ff 0%,#fff6ce 15%,#ffd16c 40%,#e89935 65%,transparent 80%); box-shadow:0 0 9px #ffdb7a88,0 0 25px #efac4555,0 0 48px #efac4522; animation:flameDance 1700ms ease-in-out infinite alternate; }
.candle.two { animation-delay:-4s; animation-duration:11s; }.candle.three { animation-delay:-7s; animation-duration:13s; }.candle.four { animation-delay:-2s; animation-duration:10s; }.candle.five { animation-delay:-6s; animation-duration:14s; }.candle.six { animation-delay:-8s; animation-duration:12s; }
.candle.two:before { animation-delay:-.8s; }.candle.four:before { animation-delay:-1.3s; }.candle.five:before { animation-delay:-.4s; }
.match-viewport { right:48px; }
.match-glow { right:44px; }
.magic-toggle { position:absolute; z-index:5; right:9px; top:50%; margin-top:-15px; width:30px; height:30px; padding:7px; color:#e7cc92; border:1px solid #857148; border-radius:50%; background:#202c28; cursor:pointer; }
.magic-toggle:hover { background:#394335; }
.magic-toggle:after { content:''; position:absolute; top:-7px; right:-7px; bottom:-7px; left:-7px; }
.magic-toggle svg { display:block; width:14px; height:14px; fill:currentColor; }
.magic-toggle .motion-play { display:none; }.magic-toggle.is-paused .motion-pause { display:none; }.magic-toggle.is-paused .motion-play { display:block; }
.magic-toggle:disabled { opacity:.6; cursor:default; }
body.effects-paused *,body.effects-paused *:before,body.effects-paused *:after { animation-play-state:paused!important; -webkit-animation-play-state:paused!important; }
body.effects-paused .card,body.effects-paused .header,body.effects-paused .fill,body.effects-paused .editor,body.effects-paused .fixtures-panel,body.effects-paused .score-updated .points { animation:none!important; -webkit-animation:none!important; }
@keyframes headerReveal { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
@keyframes cardReveal { from{opacity:0;transform:translateY(18px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} }
@-webkit-keyframes cardReveal { from{opacity:0;-webkit-transform:translateY(18px) scale(.98);} to{opacity:1;-webkit-transform:translateY(0) scale(1);} }
@keyframes panelReveal { from{opacity:0;transform:translateY(10px) scale(.99);} to{opacity:1;transform:none;} }
@keyframes auraBreathe { from{opacity:.55;} to{opacity:.9;} }
@keyframes mistDrift { from{transform:translateX(-3%);} to{transform:translateX(7%);} }
@keyframes emberRise { 0%{opacity:0;transform:translate3d(0,0,0);} 15%{opacity:.55;} 70%{opacity:.35;} 100%{opacity:0;transform:translate3d(35px,-110vh,0);} }
@keyframes titleGleam { 0%,65%,100%{background-position:100% 50%;} 85%{background-position:0% 50%;} }
@keyframes candleHover { from{transform:translateY(-3px) rotate(-1.5deg);} to{transform:translateY(5px) rotate(1.5deg);} }
@keyframes flameDance { 0%,100%{opacity:.85;transform:scale(.92,1) rotate(-4deg);} 35%{opacity:1;transform:scale(1.05,.94) rotate(3deg);} 70%{opacity:.9;transform:scale(.86,1.1) rotate(-2deg);} }
@keyframes metalGleam { 0%,70%{opacity:0;transform:translateX(0) rotate(20deg);} 74%{opacity:.7;} 86%{opacity:.7;} 90%,100%{opacity:0;transform:translateX(600%) rotate(20deg);} }
@keyframes pointsPour { from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes scoreSpark { 0%{text-shadow:0 0 0 transparent;} 30%{text-shadow:0 0 16px #b68136aa;} 100%{text-shadow:0 1px 0 #fff6;} }
/* Heraldic frames, woven house banners and inset parchment score plaques. */
.league-brand { position:relative; }
.header .brand-logo { position:relative; }
.header .brand-logo:before { content:''; position:absolute; top:-15%; bottom:-15%; left:-35%; right:-35%; border-radius:50%; background:radial-gradient(ellipse,rgba(226,187,100,.16),transparent 65%); pointer-events:none; }
.header .brand-logo img { position:relative; }
.league-title { background-image:linear-gradient(180deg,#fff4d3 8%,#e7cc8d 45%,#b7914c 70%,#ead49c 100%); text-shadow:0 2px 1px #0003,0 4px 20px #0008; }
.league-copy .tagline { display:inline-block; padding-top:9px; margin-top:9px; border-top:1px solid rgba(204,168,94,.4); color:#e2d1ac; letter-spacing:1.6px; }
.card { border-color:#8e774b; background-size:8px 8px,100% 100%; background-repeat:repeat,no-repeat; box-shadow:inset 1px 0 0 #f9df9a22,inset -1px 0 0 #0008,0 10px 28px #0009; }
.card:before { left:28%; right:28%; height:2px; opacity:1; }
.card-inner { top:7px; left:7px; right:7px; bottom:7px; border-color:rgba(219,185,117,.27); border-radius:3px; }
.card-inner:before,.card-inner:after { content:''; position:absolute; top:1px; width:27px; height:27px; background:url('gold-corner.svg') center / contain no-repeat; opacity:.8; }
.card-inner:before { left:1px; }.card-inner:after { right:1px; top:auto; bottom:1px; transform:rotate(180deg); }
.card-heading { margin-bottom:5px; }
.rank-chip { border-radius:2px; border-color:#aa8e54; padding:5px 10px; box-shadow:inset 0 1px 0 #fff0bd22,0 3px 8px #0005; background:linear-gradient(130deg,#263128e6,#101c1be6); }
.card.leader .rank-chip { border-color:#f1d89c; background-image:linear-gradient(125deg,#a58444,#ead399 48%,#bc9755); color:#2e2516; }
.crest { padding:7px 3% 9px; }
.crest:before { content:''; position:absolute; top:0; left:4%; right:4%; bottom:0; pointer-events:none; background:url('crest-arch.svg') center / contain no-repeat; opacity:.36; }
.crest img { position:relative; z-index:1; }
.card .card-details { margin:8px -6px 11px; padding:11px 12px 14px; border:1px solid #c4a368; border-radius:4px; background-image:radial-gradient(ellipse at 50% 20%,#f4e7c8 0%,#e2cea3 65%,#c9af7e 100%); box-shadow:0 4px 12px #0004,inset 0 1px 0 #fff6,inset 0 -4px 12px #8c67232b; }
.card-details:after { content:''; position:absolute; top:4px; right:4px; bottom:4px; left:4px; pointer-events:none; border:1px solid rgba(130,93,36,.2); border-radius:1px; }
.card .quality { letter-spacing:1.5px; line-height:16px; }
.points { color:#302419; text-shadow:0 1px 0 #fff8; }
.score-label { color:#695434; letter-spacing:1.3px; }
.track { height:4px; border-radius:3px; background:#a48b5e66; box-shadow:inset 0 1px 2px #503b1944,0 1px 0 #fff6; }
.fill { position:relative; border-radius:3px; box-shadow:0 0 5px #c5a15944; }
.fill:after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg,#fff4,transparent 65%); }
.edit,.fixtures-btn { border-radius:4px; padding-left:32px; border-color:#9b8350; background:linear-gradient(160deg,#35403cdd,#111d1bf2); box-shadow:inset 0 0 0 3px #ddbd7222,inset 0 1px 0 #ffeab422,0 3px 12px #0005; }
.edit:before,.fixtures-btn:before { content:''; position:absolute; width:14px; height:14px; top:50%; left:10px; margin-top:-7px; background-position:center; background-repeat:no-repeat; background-size:contain; }
.fixtures-btn:before { background-image:url('calendar-gold.svg'); }.edit:before { background-image:url('quill-gold.svg'); }
.match-dock { border-radius:6px; border-color:#a08651; background-image:linear-gradient(130deg,#17282b,#0c181d 75%); box-shadow:inset 0 0 0 4px #d5b26b0b,0 5px 20px #0006; }
.match-meta { background-image:radial-gradient(ellipse at 30% 35%,#f2e3bf,#d2b987); box-shadow:inset -3px 0 7px #68481b22; }
.match-item { position:relative; border-right:0; }
.match-item:after { content:''; position:absolute; top:24%; bottom:24%; right:0; width:1px; background:linear-gradient(transparent,#b99a5b88,transparent); }
.match-icon { border-radius:50%; color:#f3d694; border-color:#a98b50; background:radial-gradient(ellipse at 35% 25%,#4e5035,#202b26); box-shadow:inset 0 0 0 3px #dec18c12,0 2px 6px #0004; }
.match-glow { background:linear-gradient(90deg,rgba(12,24,29,0),#0c181d); }
.magic-toggle { border-color:#a78b54; background:radial-gradient(ellipse at 40% 25%,#37453b,#182723); box-shadow:inset 0 1px 0 #f0d59a22,0 2px 5px #0004; }
.editor,.fixtures-panel { border-radius:7px; box-shadow:inset 0 0 0 5px #dfbe7420,0 16px 60px #000b; }
.fixture-day { border-radius:4px; background-image:radial-gradient(ellipse at 30% 0%,#f3e6c9,#decba3); box-shadow:inset 0 0 0 3px #7153220f; }
@media screen and (min-width:1700px) {
 .header .brand-logo{height:19vh;max-height:215px;margin-right:34px;} .league-title{font-size:58px;} .league-copy .tagline{font-size:18px;}
 .card .card-details{margin-left:-10px;margin-right:-10px;padding:14px 18px 18px;} .card-inner:before,.card-inner:after{width:34px;height:34px;}
}
@media screen and (max-width:1100px) {
 .header{padding-top:34px;} .league-title{font-size:32px;letter-spacing:.5px;} .header .brand-logo{margin-right:22px;} .league-copy .tagline{font-size:12px;}
 .card .card-details{margin-left:0;margin-right:0;padding:9px 8px 12px;} .card .quality{letter-spacing:.5px;} .card-inner:before,.card-inner:after{width:20px;height:20px;}
}
@media screen and (max-width:700px), screen and (max-width:900px) and (orientation:portrait) {
 .header .brand-logo{height:100px;min-height:0;max-height:none;margin:0 16px 0 0;} .league-title{font-size:24px;letter-spacing:.2px;} .league-copy .tagline{font-size:11px;letter-spacing:.1px;margin-top:8px;} .card .card-details{padding-bottom:12px;}
 .stage{perspective:none;} .ambient-scene{height:700px;bottom:auto;background-size:auto 700px;background-position:50% top;opacity:.7;} .mist-front{display:none;} .mist-back{height:400px;} .magic-particle:nth-child(n+7){display:none;} .card-glint{animation:none;display:none;} .brand-main{animation:none;} .crest{filter:none;}
 .card .card-details{margin:8px 0 9px;padding:8px 7px 12px;} .card .quality{letter-spacing:.1px;font-size:7px;} .crest{padding:5px 0 8px;} .crest:before{opacity:.25;left:0;right:0;} .league-copy .tagline{padding-top:6px;} .edit,.fixtures-btn{padding-left:26px;} .edit:before,.fixtures-btn:before{left:7px;width:12px;height:12px;margin-top:-6px;}
}
@media screen and (max-width:360px) {
 .header .brand-logo{height:85px;margin-right:12px;} .league-title{font-size:20px;}
}
@media (prefers-reduced-motion:reduce) {
 *,*:before,*:after{animation:none!important;-webkit-animation:none!important;transition:none!important;} .magic-particle{display:none;} .card{transform:none!important;}
}