/* GGE Festival Arcade: Hall of Fame */
body{background:var(--night)}
.wrap{width:min(860px,100% - 2rem);margin-inline:auto}

.hof-hero{position:relative;overflow:hidden;padding:clamp(2.2rem,7vw,4rem) 0 clamp(2rem,5vw,3rem);text-align:center;background:
  radial-gradient(60% 70% at 15% 0%,rgba(255,61,187,.28),transparent 70%),
  radial-gradient(50% 60% at 90% 10%,rgba(45,226,255,.22),transparent 70%),
  linear-gradient(180deg,#0A0618,#1d0d45 70%,#2a1257)}
.hof-hero .wrap{position:relative;z-index:2}
.lights{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.lights i{position:absolute;top:-5%;width:36%;height:115%;transform-origin:50% 0;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);opacity:.2;animation:sweep 6s ease-in-out infinite alternate}
.lights i:nth-child(1){left:-6%;background:linear-gradient(180deg,var(--green),transparent 80%)}
.lights i:nth-child(2){left:22%;background:linear-gradient(180deg,var(--pink),transparent 80%);animation-delay:-2s;animation-duration:7s}
.lights i:nth-child(3){left:44%;background:linear-gradient(180deg,var(--gold),transparent 80%);animation-delay:-3.5s;animation-duration:5.4s}
.lights i:nth-child(4){left:68%;background:linear-gradient(180deg,var(--cyan),transparent 80%);animation-delay:-1s;animation-duration:6.4s}
@keyframes sweep{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.crowd{position:absolute;left:0;right:0;bottom:-6px;height:70px;z-index:1;opacity:.9;
  background:radial-gradient(circle at 20px 26px,#140a2c 14px,transparent 15px) 0 0/40px 70px repeat-x,
             radial-gradient(ellipse at 20px 70px,#140a2c 22px,transparent 23px) 0 0/40px 70px repeat-x,
             radial-gradient(circle at 40px 40px,#1d0f3d 13px,transparent 14px) 0 0/52px 70px repeat-x,
             radial-gradient(ellipse at 40px 80px,#1d0f3d 22px,transparent 23px) 0 0/52px 70px repeat-x;
  animation:crowd 1s ease-in-out infinite alternate}
@keyframes crowd{to{transform:translateY(-4px)}}
.eyebrow{margin:0 0 .6rem;font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.hof-hero h1{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.85;font-size:clamp(3rem,13vw,6rem)}
.hof-hero h1 span{color:var(--gold);text-shadow:0 0 30px rgba(255,197,61,.5)}

.spot{position:relative;margin:1.6rem auto 0;max-width:420px;padding:1.2rem 1rem 1.1rem;border-radius:22px;background:rgba(0,0,0,.55);border:2px solid var(--gold);box-shadow:0 0 50px rgba(255,197,61,.25);overflow:hidden}
.spot-glow{position:absolute;left:50%;top:-60%;width:160%;height:160%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,197,61,.28),transparent);animation:glow 3s ease-in-out infinite alternate;pointer-events:none}
@keyframes glow{to{opacity:.4}}
.crown{position:relative;width:64px;height:44px;animation:crown 1.6s ease-in-out infinite alternate}
@keyframes crown{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-5px) rotate(4deg)}}
.spot-label{position:relative;margin:.35rem 0 0;font:900 1rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.spot-name{position:relative;margin:.15rem 0 0;font:900 clamp(2rem,9vw,2.8rem)/1 var(--display);text-transform:uppercase;color:#fff;word-break:break-word}
.spot-pts{position:relative;margin:.35rem 0 0;color:var(--muted);font-size:.92rem}
.spot-pts b{color:#fff}

.board-wrap{padding:1.5rem 0 3rem}
.tabs{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem .1rem .5rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:44px;border-radius:999px;border:2px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#fff;font:700 .95rem var(--body);padding:.5rem 1rem;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#000}
.tabs.games button[data-game="overall"][aria-selected="true"]{background:var(--gold);border-color:var(--gold)}
.tabs.periods button{min-height:38px;font-size:.88rem}
.tabs.periods button[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan)}

.board-card{margin-top:.6rem;border-radius:22px;background:linear-gradient(180deg,#22104a,#160a33);border:2px solid rgba(57,255,20,.45);overflow:hidden}
.board-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1rem .6rem}
.board-head h3{margin:0;font:900 1.6rem/1 var(--display);text-transform:uppercase}
.board-sub{margin:.3rem 0 0;color:var(--muted);font-size:.85rem}
.status{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.8rem;white-space:nowrap}
.refresh{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer}
.refresh svg{width:18px;height:18px}
.refresh.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.rows{list-style:none;margin:0;padding:0 .6rem .4rem}
.row{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.65rem .5rem;border-radius:14px;margin-bottom:.3rem;background:rgba(255,255,255,.04);animation:rowin .3s ease both}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}}
.rank{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;font:900 1.25rem/1 var(--display);background:rgba(255,255,255,.08);color:#fff}
.r1 .rank{background:linear-gradient(135deg,#FFE27A,#FFB300);color:#000;box-shadow:0 0 16px rgba(255,197,61,.6)}
.r2 .rank{background:linear-gradient(135deg,#f2f4f8,#a9b0bd);color:#000}
.r3 .rank{background:linear-gradient(135deg,#ffb27a,#c46a2b);color:#000}
.r1{background:rgba(255,197,61,.12)}
.who{min-width:0}
.nick{display:block;font-weight:700;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.1rem .45rem;background:rgba(255,255,255,.1);color:var(--muted)}
.tag.champ{background:var(--gold);color:#000}
.tag.you{background:var(--cyan);color:#000}
.tag.tie{background:rgba(255,255,255,.16);color:#fff}
.parts{display:flex;gap:.25rem;margin-top:.3rem}
.parts span{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;width:48px}
.parts span i{display:block;height:100%}
.parts .p-gc i{background:var(--green)}.parts .p-sp i{background:var(--gold)}.parts .p-ss i{background:var(--pink)}
.pts{text-align:right;line-height:1.1}
.pts b{display:block;font:900 1.45rem var(--display);font-variant-numeric:tabular-nums}
.pts small{font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.row.mine{background:rgba(45,226,255,.16);box-shadow:inset 0 0 0 2px var(--cyan)}
.empty,.unavailable{padding:1.6rem 1rem 1.8rem;text-align:center;color:var(--muted)}
.empty b,.unavailable b{display:block;font:900 1.4rem var(--display);text-transform:uppercase;color:#fff;margin-bottom:.3rem}
.unavailable b{color:#FF8BA0}
.empty .abtn,.unavailable .abtn{margin-top:.8rem}
.board-foot{display:flex;justify-content:center;padding:.4rem 1rem 1rem}
.board-foot .abtn{min-height:42px;font-size:.92rem}

.me-card{margin-top:1rem;border-radius:18px;border:1.5px solid rgba(45,226,255,.45);background:rgba(45,226,255,.07);padding:.9rem 1rem}
.me-card:empty{display:none}
.me-card p{margin:0 0 .4rem;color:var(--muted)}
.me-card .me-line{font-size:1.05rem;color:#fff}
.me-card .me-line b{font-family:var(--display);font-size:1.4rem}
.me-card .abtn{min-height:42px;font-size:.92rem;margin-top:.3rem}
.me-share{margin:.4rem 0 0;color:var(--green);font-size:.85rem}
.me-share:empty{display:none}

.info{margin-top:1.2rem;display:grid;gap:.5rem}
.info details{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:.2rem .9rem}
.info summary{cursor:pointer;font-weight:700;padding:.6rem 0;list-style-position:inside}
.info p{color:var(--muted);font-size:.92rem;margin:.3rem 0 .7rem;line-height:1.5}
.info b{color:#fff}
.info code{font-family:var(--body);background:rgba(0,0,0,.4);padding:.1rem .35rem;border-radius:6px;color:#fff}
.pf-form{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .8rem}
.pf-form input{flex:1 1 180px;font:600 1rem var(--body);color:#fff;background:#0d0720;border:2px solid rgba(255,255,255,.25);border-radius:12px;padding:.55rem .7rem}
.pf-form .abtn{min-height:44px;font-size:.92rem}
.pf-msg{margin:0 0 .6rem;font-size:.88rem;color:var(--green)}
.pf-msg.err{color:#FF8BA0}
.pf-msg:empty{display:none}
.linkbtn{background:none;border:0;color:#FF8BA0;font:600 .88rem var(--body);text-decoration:underline;cursor:pointer;padding:0;margin-bottom:.8rem}
.back{margin:1.6rem 0 0;text-align:center}

.hof-foot{border-top:1px solid var(--line);padding:1.6rem 0 calc(2rem + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:.88rem}
.hof-foot .wrap{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between}
.hof-foot a{color:#fff;font-weight:600}

.conf{position:fixed;top:-10px;width:9px;height:14px;border-radius:2px;z-index:50;pointer-events:none;animation:conf linear forwards}
@keyframes conf{to{transform:translate(var(--dx),105vh) rotate(var(--rot))}}

@media (max-width:420px){
  .row{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.45rem;padding:.55rem .35rem}
  .rank{width:2.1rem;height:2.1rem;font-size:1.1rem}
  .pts b{font-size:1.25rem}
  .parts span{width:34px}
  .board-head{flex-direction:column;gap:.4rem}
}
@media (prefers-reduced-motion: reduce){.lights i,.crowd,.crown,.spot-glow,.row{animation:none!important}.conf{display:none}}