/* Self-hosted fonts and CSS decoration keep the scoreboard usable offline. */
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/cinzel-bold.ttf') format('truetype'); }
@font-face { font-family:'Cinzel Decorative'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/cinzel-decorative-bold.ttf') format('truetype'); }
html,body { background:#101412; }
.stage { background:#101412; background-image:radial-gradient(ellipse at 50% 0%,#485049 0%,#172323 42%,#0b1113 85%); }
.ambient-scene { position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; background:url('hogwarts-night.svg') center top no-repeat; background-size:cover; opacity:.7; }
.starfield { opacity:.3; }
.header,.cards { z-index:1; }
.header { text-shadow:0 2px 8px #000; }
.kicker { color:#c8b88c; font-family:'Cinzel',Georgia,serif; font-size:9px; letter-spacing:3px; }
.kicker .little-star { color:#e5cb8a; }
.kicker-line { background:#c6aa6b; }
.brand-logo { margin-left:10%; margin-right:10%; }
.brand-main { font-family:'Cinzel Decorative',Georgia,serif; font-size:46px; letter-spacing:4px; line-height:1.2; background-image:linear-gradient(180deg,#fff2c5 10%,#dfbf74 48%,#a27a34 95%); text-shadow:0 2px 16px rgba(236,199,118,.13); }
.rule { color:#e3c983; }
.rule:before,.rule:after { opacity:.7; background:#b89a5c; }
.hallows-mark { display:inline-block; width:20px; height:19px; vertical-align:top; }
.tagline { color:#d5c8ac; font:italic 13px/18px Georgia,serif; letter-spacing:.9px; }
.status { border-color:#846c3b; border-radius:3px; background:#1e271f; background:rgba(20,32,26,.85); color:#edd89f; letter-spacing:1.7px; box-shadow:inset 0 0 14px rgba(224,187,99,.07),0 3px 12px rgba(0,0,0,.2); }
.edit,.fixtures-btn { border-color:#8a7447; border-radius:2px; background:#22241c; background-image:linear-gradient(#333429,#171e1b); color:#e3cb90; font-family:'Cinzel',Georgia,serif; letter-spacing:1.1px; box-shadow:inset 0 0 0 3px rgba(208,176,103,.05),0 3px 14px #0006; }
.edit:hover,.edit:focus,.fixtures-btn:hover,.fixtures-btn:focus { background:#46422b; color:#fff1c2; outline-color:#c7a75c; }
.card { padding:12px 16px 0; border-color:#887147; border-radius:5px; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.card:before { left:20%; right:20%; height:3px; }
.card-inner { top:6px; bottom:6px; left:6px; right:6px; border-color:rgba(214,183,111,.18); border-radius:2px; }
.card.gryffindor { border-color:#976c47; background-image:url('velvet-weave.svg'),radial-gradient(ellipse at 50% 35%,#743b30 0%,#391c21 65%,#190f16 100%); }
.card.hufflepuff { border-color:#95804c; background-image:url('velvet-weave.svg'),radial-gradient(ellipse at 50% 35%,#6a5730 0%,#332c19 65%,#181711 100%); }
.card.ravenclaw { border-color:#647f8b; background-image:url('velvet-weave.svg'),radial-gradient(ellipse at 50% 35%,#305166 0%,#152b3b 65%,#0c1824 100%); }
.card.slytherin { border-color:#668c75; background-image:url('velvet-weave.svg'),radial-gradient(ellipse at 50% 35%,#365e49 0%,#162e26 65%,#0c1a18 100%); }
.card.leader { border-color:#ddbc70; box-shadow:0 0 0 1px #ddbc7033,0 0 28px rgba(219,181,93,.15),0 8px 24px #0006; }
.card-top { color:#d0c3a6; font-family:'Cinzel',Georgia,serif; letter-spacing:1px; font-size:9px; }
.rank-chip { padding:5px 10px; border-color:#a28a57; border-radius:2px; color:#e9d8ae; background:rgba(10,18,16,.6); font-family:'Cinzel',Georgia,serif; font-size:9px; letter-spacing:.5px; }
.card.leader .rank-chip { background:#d1b06a; border-color:#e6ce95; color:#292514; box-shadow:0 2px 10px #0004; }
.crest { filter:drop-shadow(0 5px 7px rgba(0,0,0,.3)); }
.card-details { position:relative; margin:8px -16px 0; padding:10px 16px 12px; border-top:1px solid #b09353; background:#e5d3aa; background-image:radial-gradient(ellipse at 50% 20%,#f4e6c6 0%,#e4d0a6 70%,#ccb383 100%); box-shadow:inset 0 3px 10px #6e4d2222; }
.card-details:before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; opacity:.22; background:url('parchment-grain.svg') repeat; }
.card .quality { position:relative; color:#773b2a; font:700 9px/14px 'Cinzel',Georgia,serif; letter-spacing:1.2px; }
.card.hufflepuff .quality { color:#665019; }.card.ravenclaw .quality { color:#2b4c61; }.card.slytherin .quality { color:#2f583f; }
.house-name { position:relative; color:#35291b; font:700 22px/1.25 'Cinzel',Georgia,serif; letter-spacing:.2px; margin-top:3px; }
.points { position:relative; color:#332719; text-shadow:0 1px 0 #fff6; }
.score-label { color:#6a5941; font-family:'Cinzel',Georgia,serif; font-size:8px; letter-spacing:1px; }
.track { position:relative; height:4px; border-radius:1px; background:#ad956c; background:rgba(78,57,23,.2); box-shadow:0 1px 0 #fff5; }
.fill { border-radius:1px; }
.card.gryffindor .fill { background:#823d31; background-image:linear-gradient(90deg,#70342b,#ae7050); }
.card.hufflepuff .fill { background:#96742d; background-image:linear-gradient(90deg,#7b5e1c,#b39144); }
.card.ravenclaw .fill { background:#34576c; background-image:linear-gradient(90deg,#29485c,#6b8991); }
.card.slytherin .fill { background:#38634b; background-image:linear-gradient(90deg,#285039,#698d63); }
.share { position:relative; color:#716047; font-size:10px; }
.match-dock { border-radius:3px; border-color:#907a4b; background:#18211d; background-image:linear-gradient(110deg,#20291f,#101a19); }
.match-meta { background:#ded0aa; background-image:linear-gradient(110deg,#e9dabc,#cfb78a); border-color:#a38a55; }
.match-meta-kicker { color:#685331; font-family:'Cinzel',Georgia,serif; letter-spacing:1.5px; }
.match-meta-date { color:#342d20; font-family:'Cinzel',Georgia,serif; font-size:24px; }
.match-meta-weekday { color:#665a43; }
.match-item { border-color:#4a4c39; }
.match-name { font-family:'Cinzel',Georgia,serif; font-size:14px; letter-spacing:.5px; }
.match-time { color:#c9ba96; }
.match-icon { border-color:#907e4b; border-radius:2px; background:#293326; color:#e1c37c; }
.match-glow { background:linear-gradient(90deg,rgba(17,27,25,0),#111b19); }
.editor,.fixtures-panel { border-color:#af9357; border-radius:4px; background:#222a22; background-image:radial-gradient(ellipse at 50% 0%,#384132,#17221e); }
.editor h2,.fixtures-heading h2 { font-family:'Cinzel',Georgia,serif; font-size:25px; }
.fixtures-overline,.fixture-day-date,.field label { font-family:'Cinzel',Georgia,serif; }
.fixture-day { border-radius:2px; border-color:#8c7951; background:#e7d7b4; }
.fixture-day-date { color:#554323; font-size:11px; }
.fixture-event { color:#3e3425; }.fixture-event-time { color:#6a5940; }
.editor p,.fixtures-note { color:#cfc5aa; }
.field input { background:#e8dabc; color:#3c3021; border-color:#b99d65; border-radius:2px; }
.actions button,.fixtures-heading button { border-radius:2px; color:#eedbb0; background:#363d2b; }
.actions .primary { color:#302817; background:#c8aa69; }
/* A few slow CSS flames, with no JavaScript animation work. */
.floating-candles { position:absolute; top:0; left:0; right:0; height:230px; pointer-events:none; }
.candle { position:absolute; top:72px; left:7%; width:7px; height:38px; border-radius:2px 2px 1px 1px; background:linear-gradient(90deg,#897450,#f3e4ba 45%,#a28b5f); box-shadow:0 0 26px rgba(255,195,77,.12); opacity:.8; }
.candle:before { content:''; position:absolute; left:0; bottom:100%; width:7px; height:13px; border-radius:75% 25% 70% 30%; background:#ffe8a3; box-shadow:0 0 7px #ffb940,0 0 20px #e5a443,0 0 40px #e9b65566; -webkit-animation:candleFlicker 3s ease-in-out infinite alternate; animation:candleFlicker 3s ease-in-out infinite alternate; }
.candle.two { left:16%; top:119px; width:5px; height:27px; opacity:.5; }.candle.two:before { width:5px; height:10px; animation-delay:-1s; }
.candle.three { left:24%; top:62px; width:4px; height:22px; opacity:.35; }.candle.three:before { width:4px; height:8px; animation-delay:-2s; }
.candle.four { left:auto; right:7%; top:88px; height:30px; }.candle.five { left:auto; right:16%; top:136px; opacity:.45; height:23px; }.candle.six { left:auto; right:24%; top:57px; width:4px; height:24px; opacity:.3; }
@-webkit-keyframes candleFlicker { from{opacity:.65;-webkit-transform:scale(.85);} to{opacity:1;-webkit-transform:scale(1.1);} }
@keyframes candleFlicker { from{opacity:.65;transform:scale(.85);} to{opacity:1;transform:scale(1.1);} }
@media screen and (min-width:1700px) {
 .brand-main{font-size:66px;} .kicker{font-size:11px;} .card{padding:16px 22px 0;} .card-details{margin-left:-22px;margin-right:-22px;padding:14px 22px 16px;} .house-name{font-size:30px;} .card .quality{font-size:11px;line-height:16px;} .share{font-size:12px;} .score-label{font-size:11px;} .match-name{font-size:18px;} .match-meta-date{font-size:34px;}
}
@media screen and (max-width:1100px) {
 .kicker{font-size:8px;letter-spacing:1.6px;} .brand-main{font-size:36px;letter-spacing:3px;} .card{padding:10px 10px 0;} .card-details{margin-left:-10px;margin-right:-10px;padding:8px 10px 10px;} .house-name{font-size:18px;} .card .quality{font-size:8px;letter-spacing:.4px;} .rank-chip{font-size:8px;padding:4px 6px;} .card-top{font-size:8px;} .score-label{font-size:8px;letter-spacing:.5px;} .match-name{font-size:12px;} .match-meta-date{font-size:21px;}
}
@media screen and (max-height:750px) and (min-width:701px) {
 .card{padding-top:10px;} .house-name{font-size:21px;} .card-details{padding-top:8px;padding-bottom:10px;}
}
@media screen and (max-width:700px), screen and (max-width:900px) and (orientation:portrait) {
 .ambient-scene{background-size:auto 700px;} .floating-candles{height:225px;overflow:hidden;} .candle{top:113px;left:5%;opacity:.45;} .candle.four{right:5%;top:117px;} .candle.two,.candle.three,.candle.five,.candle.six{display:none;} .kicker{font-size:8px;line-height:16px;letter-spacing:.7px;} .brand-logo{height:58px;margin:8px 0 5px;} .brand-main{font-size:7.5vw;letter-spacing:1px;} .tagline{font-size:11px;line-height:16px;letter-spacing:.2px;} .status{font-size:8px;letter-spacing:.7px;} .edit,.fixtures-btn{font-size:8px;} .card{height:360px;padding:10px 10px 0;} .card-details{margin:8px -10px 0;padding:8px 10px 10px;} .house-name{font-size:17px;letter-spacing:-.3px;} .card .quality{font-size:7px;line-height:14px;letter-spacing:.3px;} .share{font-size:9px;} .score-label{font-size:7px;} .points{font-size:40px;} .match-name{font-size:11px;} .match-meta-date{font-size:19px;} .editor h2,.fixtures-heading h2{font-size:22px;}
}
@media (prefers-reduced-motion:reduce) { .candle:before{-webkit-animation:none;animation:none;} }