/* PYRAMID HOCKEY menu style. Fonts: Anton (OFL) + Barlow Condensed Bold (OFL), bundled in ./fonts */
@font-face{font-family:BRHDisplay;src:url(fonts/Anton-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:BRHCond;src:url(fonts/BarlowCondensed-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
:root{
 --navy-0:#050a18;--navy-1:#0a1430;--navy-2:#13224d;--ink:#07090f;--ink-2:#0e1119;
 --cream:#f3ead2;--white:#ffffff;--muted:#9aa6bf;
 --red:#e0262f;--red-dk:#8e0e15;--green:#38e070;--green-dk:#118a3a;
 --gold-1:#fff3b0;--gold-2:#e8b43a;--gold-3:#8a5a10;
 --silver-1:#ffffff;--silver-2:#b9c3d3;--silver-3:#5d6779;
 --bronze-1:#ffd2a6;--bronze-2:#c27838;--bronze-3:#5e3214;
 --chrome:linear-gradient(180deg,#fff 0%,#e3e9f2 30%,#9aa5b8 48%,#5b6578 52%,#c9d1de 70%,#fff 100%);
 --f-display:BRHDisplay,Impact,"Arial Narrow Bold",sans-serif;--f-cond:BRHCond,"Arial Narrow",Arial,sans-serif;
 --radius:6px;
}
.brh{margin:0;color:var(--cream);font-family:var(--f-cond);font-weight:700;
 background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 9px),radial-gradient(ellipse at 50% 0,#1a2c62 0,var(--navy-1) 45%,var(--navy-0) 100%);background-attachment:fixed;min-height:100vh}
/* ---------- chrome title with red speed slashes + glow underline ---------- */
.brh-title{position:relative;display:block;text-align:center;margin:28px auto 34px;padding:0 120px;width:max-content;max-width:100%}
.brh-title h1{margin:0;font:italic 400 clamp(44px,8vw,112px)/.9 var(--f-display);letter-spacing:.02em;text-transform:uppercase;transform:skewX(-8deg);
 background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #1c2232;
 filter:drop-shadow(0 2px 0 #3a4458) drop-shadow(0 4px 0 #11151f) drop-shadow(0 10px 18px rgba(0,0,0,.7))}
.brh-title::before,.brh-title::after{content:"";position:absolute;top:50%;width:110px;height:46%;transform:translateY(-50%) skewX(-28deg);
 background:repeating-linear-gradient(180deg,var(--red) 0 7px,transparent 7px 14px);filter:drop-shadow(0 0 8px rgba(224,38,47,.8))}
.brh-title::before{left:0;-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
.brh-title::after{right:0;-webkit-mask:linear-gradient(270deg,transparent,#000);mask:linear-gradient(270deg,transparent,#000)}
.brh-title .glow{display:block;height:4px;margin:10px auto 0;width:78%;border-radius:4px;background:var(--red);box-shadow:0 0 12px 2px var(--red),0 0 34px 6px rgba(224,38,47,.5)}
.brh-sub{text-align:center;color:var(--gold-2);letter-spacing:.25em;text-transform:uppercase;font-size:15px;margin:-18px 0 26px}
/* ---------- metallic bevel cards ---------- */
.card{--m1:var(--silver-1);--m2:var(--silver-2);--m3:var(--silver-3);position:relative;border-radius:var(--radius);padding:5px;
 background:linear-gradient(160deg,var(--m1) 0%,var(--m2) 22%,var(--m3) 50%,var(--m2) 75%,var(--m1) 100%);
 box-shadow:0 0 0 1px #000,0 10px 26px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.7)}
.card{display:flex;flex-direction:column}
.card>.card-body{flex:1;background:linear-gradient(180deg,var(--ink-2),var(--ink));border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),inset 0 2px 8px rgba(0,0,0,.9);padding:0 0 6px;overflow:hidden}
.card-gold{--m1:var(--gold-1);--m2:var(--gold-2);--m3:var(--gold-3)}
.card-silver{--m1:var(--silver-1);--m2:var(--silver-2);--m3:var(--silver-3)}
.card-bronze{--m1:var(--bronze-1);--m2:var(--bronze-2);--m3:var(--bronze-3)}
.card .crown{position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:54px;height:36px;
 background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));filter:drop-shadow(0 3px 3px #000);
 clip-path:polygon(0 100%,0 25%,22% 60%,35% 10%,50% 50%,65% 10%,78% 60%,100% 25%,100% 100%)}
/* engraved title plate */
.plate{margin:0;padding:8px 12px 7px;text-align:center;font:400 18px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;
 background:linear-gradient(180deg,var(--m1),var(--m2) 45%,var(--m3));color:#2a1f0c;text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.35);
 border-bottom:2px solid #000;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.card-silver .plate{color:#1c2230}.card-bronze .plate{color:#2b1405}
/* ---------- standings table ---------- */
.stand{width:100%;border-collapse:collapse;font:700 15px/1.15 var(--f-cond);color:var(--cream);text-transform:uppercase;font-variant-numeric:tabular-nums}
.stand th{font-size:12px;letter-spacing:.12em;color:var(--muted);padding:7px 6px 5px;text-align:center;border-bottom:1px solid #2a2f3c}
.stand td{padding:4px 6px;text-align:center;border-bottom:1px solid rgba(255,255,255,.05)}
.stand th.team,.stand td.team{text-align:left;width:100%;white-space:nowrap;color:var(--white)}
.stand td.pts{color:var(--white);font-size:16px}
.stand td.rank{width:46px;text-align:left;white-space:nowrap}
.up,.down,.stay{display:inline-block;width:0;height:0;margin-right:6px;vertical-align:1px}
.up{border:6px solid transparent;border-top:0;border-bottom:9px solid var(--green);filter:drop-shadow(0 0 3px var(--green))}
.down{border:6px solid transparent;border-bottom:0;border-top:9px solid var(--red);filter:drop-shadow(0 0 3px var(--red))}
.stay{width:12px}
.rank-crown{display:inline-block;width:16px;height:11px;margin-right:4px;background:linear-gradient(var(--gold-1),var(--gold-2));clip-path:polygon(0 100%,0 20%,25% 60%,50% 0,75% 60%,100% 20%,100% 100%)}
tr.you td{background:rgba(56,224,112,.08)}
tr.you{outline:2px solid var(--green);outline-offset:-2px;box-shadow:0 0 14px rgba(56,224,112,.75);position:relative}
tr.you td.team::after{content:"YOUR TEAM";margin-left:8px;font-size:10px;letter-spacing:.12em;color:#052;background:var(--green);padding:1px 5px;border-radius:2px;vertical-align:2px}
/* ---------- pyramid layout + gold connectors ---------- */
.pyramid{display:flex;flex-direction:column;align-items:center;gap:46px;padding:20px 16px 90px;max-width:1500px;margin:auto}
.tier{position:relative;display:grid;gap:22px;width:100%;justify-items:center}
.tier-1{grid-template-columns:minmax(300px,440px);justify-content:center}
.tier-2{grid-template-columns:repeat(2,minmax(280px,400px));justify-content:center}
.tier-3{grid-template-columns:repeat(4,minmax(240px,1fr))}
.tier>.card{width:100%}
.tier+.tier::before{content:"";position:absolute;top:-46px;left:50%;width:2px;height:46px;background:linear-gradient(var(--gold-1),var(--gold-2));box-shadow:0 0 6px var(--gold-2)}
.tier+.tier::after{content:"";position:absolute;top:-24px;left:22%;right:22%;height:2px;background:linear-gradient(90deg,transparent,var(--gold-2) 12%,var(--gold-1) 50%,var(--gold-2) 88%,transparent)}
@media (max-width:1000px){.tier-3{grid-template-columns:repeat(2,minmax(240px,1fr))}}
@media (max-width:640px){.tier-2,.tier-3{grid-template-columns:1fr}.brh-title{padding:0 50px}.brh-title::before,.brh-title::after{width:44px}}
/* ---------- ribbon ---------- */
.ribbon{position:relative;display:block;width:max-content;margin:18px auto 0;padding:10px 46px;font:400 22px/1 var(--f-display);letter-spacing:.14em;color:#fff;text-transform:uppercase;
 background:linear-gradient(180deg,#ff4a52,var(--red) 50%,var(--red-dk));transform:skewX(-14deg);box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 18px rgba(224,38,47,.45);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.ribbon>span{display:inline-block;transform:skewX(14deg)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:8px;width:26px;height:100%;background:var(--red-dk);z-index:-1}
.ribbon::before{left:-18px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.ribbon::after{right:-18px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
/* ---------- buttons ---------- */
.btn{display:inline-block;cursor:pointer;border:0;text-decoration:none;font:400 22px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:14px 34px;color:#fff;transform:skewX(-10deg);border-radius:3px;
 background:linear-gradient(180deg,#ff5960,var(--red) 50%,var(--red-dk));box-shadow:0 0 0 2px #000,0 0 0 4px #c8ced8,0 6px 0 4px #3a0508,0 10px 18px rgba(0,0,0,.6)}
.btn>span{display:inline-block;transform:skewX(10deg)}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:skewX(-10deg) translateY(3px)}
.btn-chrome{color:#141a26;background:var(--chrome);box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold-2),0 6px 0 4px #3b2a08,0 10px 18px rgba(0,0,0,.6)}
.btn-lg{font-size:30px;padding:18px 54px}
/* ---------- generic panel helpers for menus ---------- */
.panel{max-width:1180px;margin:0 auto;padding:0 20px}
.h2{font:400 28px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;margin:48px 0 16px;padding-left:14px;border-left:6px solid var(--red)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.price{color:var(--gold-1);font-family:var(--f-display);letter-spacing:.06em}