/* Library and social panels retain the arcade's purple palette. */
html body #discover-view .pn-neon-shell{
  --library-surface:rgba(15,10,29,.94);--library-line:#80609966;--library-accent:#d6a6f4;--library-muted:#b5a9c7;
  grid-template-columns:208px minmax(0,1fr) 272px!important;
  grid-template-areas:"nav center social" "ad center social"!important;
  gap:24px!important;padding:0 32px;margin:32px auto 0;max-width:1600px;
}
html body #discover-view .pn-neon-right{display:flex!important;grid-area:social;position:static!important;max-height:none;overflow:visible;gap:20px}
html body #discover-view .pn-side-card{grid-area:auto;align-self:auto;min-height:0!important;padding:24px!important;background:var(--library-surface)!important;border:1px solid var(--library-line)!important;border-radius:14px!important;box-shadow:0 8px 24px #0003!important}
html body #discover-view .pn-neon-library{padding:24px!important;background:var(--library-surface)!important;border:1px solid var(--library-line)!important;border-radius:14px!important;box-shadow:0 8px 24px #0003!important}
html body #discover-view .pn-library-top{display:flex!important;align-items:center;gap:20px;margin:0 0 24px!important}
html body #discover-view .pn-library-top .eyebrow{color:var(--library-accent)!important;font-size:10px!important;letter-spacing:2px}
html body #discover-view .pn-library-top h1{font-size:28px!important;margin:6px 0 0!important;color:#f5effa!important}
html body #discover-view .pn-library-top h1 .count{font-size:14px;color:var(--library-muted);margin-left:8px}
html body #discover-view .pn-library-top p{color:var(--library-muted)!important;font-size:12px}
html body #discover-view .pn-neon-library #filters{gap:8px!important;padding:0 0 20px!important;margin:0!important;flex-wrap:wrap}
html body #discover-view .pn-neon-library #filters .chip{min-height:36px;padding:8px 12px!important;background:#191124!important;border:1px solid #79628b55!important;color:#c5b9d3!important;box-shadow:none!important;font-size:12px!important}
html body #discover-view .pn-neon-library #filters .chip.active{background:#382149!important;color:#f5e6ff!important;border-color:#bf8ae5!important}
html body #discover-view .pn-neon-library #game-grid.game-grid{gap:16px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
html body #discover-view .pn-neon-library #game-grid .game-card{border-color:#8d65a488!important;border-radius:10px!important;box-shadow:none!important}
html body #discover-view .pn-neon-library #game-grid .game-card:hover{border-color:#daa6ff!important;box-shadow:0 6px 18px #0005!important}
html body #discover-view .pn-side-nav{background:var(--library-surface)!important;border:1px solid var(--library-line)!important;padding:10px!important;box-shadow:none!important}
html body #discover-view .pn-side-nav button{height:44px!important;min-height:44px!important;margin:2px 0!important;font-size:14px!important;border-radius:8px!important}
html body #discover-view .pn-side-nav button.is-active{background:#362145!important;border:1px solid #bb85dc!important;color:#f6eaff!important;box-shadow:none!important}
html body #discover-view .pn-side-nav button svg{width:20px;height:20px;filter:none!important;color:inherit!important}
html body #discover-view .pn-side-card-head{gap:12px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid #80609933}
html body #discover-view .pn-side-card-head h2{font-size:12px!important;letter-spacing:.8px;line-height:1.4!important;flex:1}
html body #discover-view .pn-side-card-icon,html body #discover-view .pn-side-card-head h2 span,html body #discover-view .pn-side-link{color:var(--library-accent)!important;filter:none!important}
html body #discover-view .pn-side-link{font-size:11px;white-space:nowrap;min-height:32px;padding:4px 0}
html body #discover-view .pn-fr-list{gap:0}
html body #discover-view .pn-fr-item{grid-template-columns:36px minmax(0,1fr) 32px;gap:10px;padding:12px 0;border-bottom:1px solid #80609922}
html body #discover-view .pn-fr-item:last-child{border:0}
html body #discover-view .pn-fr-av{width:36px;height:36px;background:#8c669f;padding:1px}
html body #discover-view .pn-fr-meta b{font-size:13px}
html body #discover-view .pn-fr-meta small{font-size:11px;color:var(--library-muted)}
html body #discover-view .pn-fr-item.is-online .pn-fr-meta small{color:#9ad5b1}
html body #discover-view .pn-fr-add{width:32px;height:32px;background:#24172e;border:1px solid #8b689f;color:#e7cef7;box-shadow:none}
html body #discover-view .pn-side-empty{font-size:13px;line-height:1.6;color:var(--library-muted);margin:0}
html body #discover-view .pn-side-empty button{background:#352143;border:1px solid #ac7acb;color:#f4e6fc;box-shadow:none;margin-top:16px}
html body #discover-view .pn-q-item{padding:12px 0;border:0;border-bottom:1px solid #80609933;border-radius:0;background:none}
html body #discover-view .pn-q-item b{font-size:12px}
html body #discover-view .pn-soon-divider{margin-top:12px;padding:20px 0;border-color:#80609955!important}
html body #discover-view :is(button,a):focus-visible{outline:2px solid #e2b5ff!important;outline-offset:3px}
@media(min-width:1500px){html body #discover-view .pn-neon-library #game-grid.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1250px){html body #discover-view .pn-neon-shell{grid-template-columns:minmax(0,1fr) 272px!important;grid-template-areas:"center social"!important;padding:0 24px}html body #discover-view .pn-neon-left{display:none!important}}
@media(max-width:1000px){html body #discover-view .pn-neon-shell{grid-template-columns:1fr!important;grid-template-areas:"center" "social"!important}html body #discover-view .pn-neon-right{display:grid!important;grid-template-columns:1fr 1fr}}
@media(max-width:700px){html body #discover-view .pn-neon-shell{padding:0 16px;gap:16px!important}html body #discover-view .pn-neon-library{padding:16px!important}html body #discover-view .pn-neon-library #game-grid.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}html body #discover-view .pn-library-top p{display:none}html body #discover-view .pn-neon-right{grid-template-columns:1fr}}
@media(max-width:430px){html body #discover-view .pn-neon-library #game-grid.game-grid{grid-template-columns:1fr!important}}

/* Search belongs beside the library title, with the game filters below it. */
html body #discover-view .pn-library-search{flex:0 1 320px;width:320px;max-width:100%;margin:0 0 0 auto;height:42px;padding:0 48px 0 40px!important;background:#171020;border:1px solid var(--library-line);border-radius:9px;box-shadow:none;color:var(--library-accent)}
html body #discover-view .pn-library-search input{text-align:left;font:400 13px var(--font)!important}
html body #discover-view .pn-library-search>svg{left:13px;width:17px;height:17px}
html body #discover-view .pn-library-search kbd{right:12px;font-size:11px;padding:2px 6px}
html body #discover-view .pn-library-search:focus-within{border-color:var(--library-accent);box-shadow:0 0 0 3px #cf8dff20}
@media(max-width:700px){html body #discover-view .pn-library-top{gap:16px;flex-wrap:wrap}html body #discover-view .pn-library-search{flex-basis:100%;width:100%;margin:0}}

/* Keep the middle navigation together after moving search into the library. */
html body #pn-hud .pn-hud-center{width:max-content!important;max-width:100%!important}
html body #pn-hud .pn-hud-nav{justify-content:center!important;flex:0 1 auto!important}

/* A solid, quiet disabled state keeps the Featured label readable. */
html body #discover-view .pn-space-feature .pn-hero-btn-primary:disabled{color:#d4c3e3!important;background:#241631!important;border-color:#806099!important;box-shadow:none!important;opacity:1;cursor:default}
html body #discover-view .pn-space-feature .pn-hero-btn-primary:disabled:hover{transform:none;filter:none}

/* Selected overhaul header; mobile sizing stays explicit below. */
html body #pn-hud {
  padding: 20px 4.2vw 14px !important;
  min-height: 92px !important;
  background: linear-gradient(180deg, rgba(7, 3, 16, 0.68) 0%, rgba(7, 3, 16, 0.25) 68%, transparent 100%) !important;
}
html body #pn-hud .pn-hud-brand {
  transition: transform 0.25s ease-out, filter 0.25s ease !important;
}
html body #pn-hud .pn-hud-brand:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 16px rgba(206, 145, 255, 0.35));
}
html body #pn-hud .pn-hud-name {
  font: 800 clamp(24px, 1.8vw, 30px)/1.02 var(--space-font) !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(180deg, #ffffff 30%, #ead6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body #pn-hud .pn-hud-arcade {
  font: 600 10px/1 var(--space-font) !important;
  letter-spacing: 0.52em !important;
  color: #c997f2 !important;
  margin-top: 7px !important;
}

/* Center Navigation Capsule Dock */
html body #pn-hud .pn-hud-center {
  width: max-content !important;
  max-width: 100% !important;
  height: 50px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(22, 11, 40, 0.78), rgba(12, 5, 24, 0.88)) !important;
  border: 1px solid rgba(212, 164, 255, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 36px rgba(3, 0, 10, 0.55) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
html body #pn-hud .pn-hud-nav {
  justify-content: center !important;
  flex: 0 1 auto !important;
  gap: 4px !important;
}
html body #pn-hud .pn-hud-nav button {
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font: 600 13px/1 var(--space-font) !important;
  letter-spacing: 0.01em !important;
  color: #cbb2e6 !important;
  transition: background 0.24s ease-out, color 0.2s ease, border-color 0.24s ease, box-shadow 0.24s ease, transform 0.2s ease-out !important;
}
html body #pn-hud .pn-hud-nav button:hover {
  background: rgba(186, 118, 248, 0.14) !important;
  color: #ffffff !important;
}
html body #pn-hud .pn-hud-nav button.active {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.44), rgba(107, 33, 168, 0.54)) !important;
  border-color: rgba(233, 198, 255, 0.72) !important;
  box-shadow: 0 4px 18px rgba(158, 72, 245, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Right HUD Controls (PC App CTA, Icons, Player Capsule) */
html body #pn-hud .pn-hud-right {
  gap: 14px !important;
}
html body #pn-hud .pn-download-cta {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(46, 22, 78, 0.72), rgba(24, 11, 44, 0.84)) !important;
  border: 1px solid rgba(212, 164, 255, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px rgba(3, 0, 10, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  font: 600 12px/1 var(--space-font) !important;
  color: #efe2ff !important;
}
html body #pn-hud .pn-download-cta.is-pending {
  opacity: 0.78 !important;
}
html body #pn-hud .pn-hud-icons {
  gap: 8px !important;
}
html body #pn-hud .pn-hud-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, rgba(24, 12, 44, 0.72), rgba(13, 6, 26, 0.84)) !important;
  border: 1px solid rgba(206, 158, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 20px rgba(3, 0, 10, 0.4) !important;
  color: #dec2f9 !important;
  backdrop-filter: blur(14px) !important;
  transition: transform 0.22s ease-out, border-color 0.22s ease, background 0.22s ease, color 0.2s ease !important;
}
html body #pn-hud .pn-hud-icon svg {
  width: 20px !important;
  height: 20px !important;
}
html body #pn-hud .pn-hud-icon:hover {
  transform: translateY(-1px);
  background: rgba(168, 85, 247, 0.24) !important;
  border-color: rgba(230, 192, 255, 0.58) !important;
  color: #ffffff !important;
}
html body #pn-hud .pn-hud-card {
  height: 48px !important;
  padding: 4px 16px 4px 5px !important;
  gap: 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212, 164, 255, 0.30) !important;
  background: linear-gradient(180deg, rgba(24, 12, 44, 0.78), rgba(13, 6, 26, 0.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(3, 0, 10, 0.48) !important;
  backdrop-filter: blur(18px) !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease !important;
}
html body #pn-hud .pn-hud-card:hover {
  border-color: rgba(232, 194, 255, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px rgba(3, 0, 10, 0.6), 0 0 18px rgba(176, 98, 255, 0.2) !important;
}
html body #pn-hud .pn-hud-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  padding: 2px !important;
  border: 1px solid #dfb2ff !important;
  background: linear-gradient(145deg, #d8b4fe, #7e22ce) !important;
  box-shadow: 0 0 12px rgba(176, 98, 255, 0.32) !important;
}
html body #pn-hud .pn-hud-user {
  font: 600 14.5px/1 var(--space-font) !important;
  color: #f8f2ff !important;
}

@media(max-width:1150px){
 html body #pn-hud .pn-hud-center{width:100%!important;min-width:0;box-sizing:border-box}
 html body #pn-hud .pn-hud-nav{width:100%;min-width:0}
}
@media(max-width:700px){
 html body #pn-hud{padding:18px 14px 10px!important;gap:14px!important;grid-template-columns:minmax(0,1fr) auto!important}
 html body #pn-hud .pn-hud-name{font-size:22px!important}
 html body #pn-hud .pn-hud-arcade{font-size:8px!important;letter-spacing:4px!important}
 html body #pn-hud .pn-hud-right{gap:8px!important}
 html body #pn-hud .pn-download-cta{width:38px!important;min-width:38px!important;padding:0!important;height:40px!important;min-height:40px!important}
 html body #pn-hud .pn-hud-card{height:44px!important;padding:3px 9px 3px 4px!important;gap:6px!important}
 html body #pn-hud .pn-hud-avatar{width:32px!important;height:32px!important;flex-basis:32px!important}
 html body #pn-hud .pn-hud-user{font-size:12px!important;max-width:60px!important}
 html body #pn-hud .pn-hud-nav{border:0!important;background:none!important;gap:2px!important}
 html body #pn-hud .pn-hud-nav button{min-width:0;flex:1 1 0!important;padding:0 5px!important;gap:5px!important;font-size:11px!important;height:40px!important}
 html body #discover-view .pn-neon-library,html body #discover-view .pn-neon-right{min-width:0}
 html body #discover-view .pn-side-card{padding:20px!important}
}
@media(max-width:360px){
 html body #pn-hud .pn-hud-nav button{font-size:10px!important;gap:3px!important}
 html body #pn-hud .pn-hud-name{font-size:20px!important}
 html body #pn-hud .pn-nav-icon{width:14px!important;height:14px!important;flex-basis:14px!important}
 html body #pn-hud .pn-hud-user{max-width:44px!important}
}

/* Page implementation copied from the supplied UI Overhaul, scoped to these two views. */
:is(#marathons-view,#leaderboard-view) {
  --lime: #d8b4fe !important;
  --pn-cyan: #c084fc !important;
  --pn-blue: #9333ea !important;
  --pn-purple: #a855f7 !important;
  --pn-pink: #e879f9 !important;
  --cosmic-void: #070310;
  --cosmic-glass: linear-gradient(180deg, rgba(20, 11, 38, 0.84) 0%, rgba(11, 6, 23, 0.90) 100%);
  --cosmic-glass-elevated: linear-gradient(180deg, rgba(28, 15, 52, 0.88) 0%, rgba(15, 8, 30, 0.94) 100%);
  --cosmic-card-bg: linear-gradient(165deg, rgba(24, 13, 44, 0.86) 0%, rgba(12, 6, 24, 0.92) 100%);
  --cosmic-border: rgba(206, 158, 255, 0.22);
  --cosmic-border-strong: rgba(226, 184, 255, 0.52);
  --cosmic-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --cosmic-shadow: 0 20px 50px rgba(2, 0, 9, 0.68);
  --cosmic-text: #f7f2ff;
  --cosmic-muted: #bdaad2;
  --cosmic-accent: #d8b4fe;
  --cosmic-btn-grad: linear-gradient(180deg, #ecd2ff 0%, #cf8ff6 52%, #b05ce6 100%);
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

#marathons-view,
#leaderboard-view{
  max-width: 1460px !important;
  margin: 0 auto !important;
  padding: 12px clamp(18px, 3vw, 44px) 48px !important;
}
html body :is(#marathons-view,#leaderboard-view) .btn.primary,
html body :is(#marathons-view,#leaderboard-view) .btn.primary:not(:disabled){
  background: var(--cosmic-btn-grad) !important;
  color: #160726 !important;
  border: 1px solid #f3dcff !important;
  border-radius: 999px !important;
  font: 700 13.5px/1 var(--space-font) !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 20px rgba(176, 98, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  transition: transform 0.22s var(--ease-out-expo), box-shadow 0.22s ease, filter 0.2s ease !important;
}
html body :is(#marathons-view,#leaderboard-view) .btn.primary:hover:not(:disabled){
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 8px 26px rgba(186, 110, 255, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
html body :is(#marathons-view,#leaderboard-view) .btn.ghost,
html body :is(#marathons-view,#leaderboard-view) .btn.outline{
  background: rgba(24, 12, 44, 0.72) !important;
  border: 1px solid rgba(206, 158, 255, 0.30) !important;
  border-radius: 999px !important;
  color: #efe2ff !important;
  font: 600 13px/1 var(--space-font) !important;
  backdrop-filter: blur(14px) !important;
  transition: all 0.22s var(--ease-out-expo) !important;
}
html body :is(#marathons-view,#leaderboard-view) .btn.ghost:hover:not(:disabled),
html body :is(#marathons-view,#leaderboard-view) .btn.outline:hover:not(:disabled){
  background: rgba(168, 85, 247, 0.22) !important;
  border-color: rgba(228, 188, 255, 0.58) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
html body :is(#marathons-view,#leaderboard-view) .page-heading{
  margin: 18px 0 28px !important;
}
html body :is(#marathons-view,#leaderboard-view) .page-heading .eyebrow,
html body :is(#marathons-view,#leaderboard-view) .hall-of-fame-head .eyebrow{
  color: #dfb2ff !important;
  font: 700 11px/1.2 var(--space-font) !important;
  letter-spacing: 0.32em !important;
}
html body :is(#marathons-view,#leaderboard-view) .page-heading h1,
html body :is(#marathons-view,#leaderboard-view) .hall-of-fame-head h2{
  font: 400 clamp(34px, 3.8vw, 56px)/1.04 "PN Russo", var(--display), sans-serif !important;
  letter-spacing: 0.015em !important;
  text-transform: uppercase !important;
  margin: 10px 0 12px !important;
  background: linear-gradient(180deg, #ffffff 20%, #f1e2ff 64%, #c485fa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 18px rgba(157, 73, 224, 0.35)) !important;
}
html body :is(#marathons-view,#leaderboard-view) .page-heading p,
html body :is(#marathons-view,#leaderboard-view) .hall-of-fame-head p.subtle{
  font: 400 15px/1.6 var(--space-font) !important;
  color: #d6c3ea !important;
  max-width: 640px;
}
html body :is(#marathons-view,#leaderboard-view) .marathon-join-card,
html body :is(#marathons-view,#leaderboard-view) .marathon-info-card,
html body :is(#marathons-view,#leaderboard-view) .panel{
  background: var(--cosmic-glass) !important;
  border: 1px solid var(--cosmic-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--cosmic-highlight), var(--cosmic-shadow) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
}
html body :is(#marathons-view,#leaderboard-view) .marathon-card-tag,
html body :is(#marathons-view,#leaderboard-view) .marathon-card-tag.lime{
  color: #e5caff !important;
  background: rgba(168, 85, 247, 0.18) !important;
  border: 1px solid rgba(216, 174, 255, 0.36) !important;
  font: 700 10px/1 var(--space-font) !important;
  letter-spacing: 0.14em !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}
html body :is(#marathons-view,#leaderboard-view) .marathon-input-wrap input{
  background: rgba(8, 4, 18, 0.82) !important;
  border: 1px solid rgba(204, 154, 255, 0.28) !important;
  border-radius: 12px !important;
  color: #f3e8ff !important;
  font: 700 14px/1 var(--space-font) !important;
  letter-spacing: 0.12em !important;
}
html body :is(#marathons-view,#leaderboard-view) .marathon-input-wrap input:focus{
  border-color: #e2b8ff !important;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.22) !important;
}
html body :is(#marathons-view,#leaderboard-view) .empty,
html body #leaderboard-view .lb-empty{
  background: linear-gradient(180deg, rgba(18, 9, 34, 0.76), rgba(10, 5, 20, 0.84)) !important;
  border: 1px dashed rgba(206, 158, 255, 0.30) !important;
  border-radius: 18px !important;
  color: #c9b5de !important;
  backdrop-filter: blur(16px) !important;
}
html body :is(#marathons-view,#leaderboard-view) .builder-games{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game{
  background: linear-gradient(165deg, rgba(24, 13, 44, 0.82), rgba(13, 7, 26, 0.90)) !important;
  border: 1px solid rgba(204, 154, 255, 0.20) !important;
  border-radius: 14px !important;
  padding: 10px 14px 10px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  transition: transform 0.22s var(--ease-out-expo), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game:hover:not(:disabled){
  transform: translateY(-2px) !important;
  border-color: #dfafff !important;
  background: linear-gradient(165deg, rgba(38, 20, 68, 0.88), rgba(18, 9, 36, 0.94)) !important;
  box-shadow: 0 10px 24px rgba(3, 0, 10, 0.55), 0 0 18px rgba(168, 85, 247, 0.20) !important;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game-thumb{
  width: 64px;
  height: 40px;
  flex: 0 0 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(216, 174, 255, 0.25);
  background: #0b0616;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game-icon{
  width: 64px !important;
  height: 40px !important;
  flex: 0 0 64px !important;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(206, 158, 255, 0.24);
  display: grid !important;
  place-items: center;
  font-size: 18px !important;
  color: #dfb2ff !important;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game > span:not(.builder-game-thumb){
  flex: 1;
  min-width: 0;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game strong{
  font: 700 14.5px/1.2 var(--space-font) !important;
  color: #f8f2ff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game small{
  font: 500 11.5px/1.3 var(--space-font) !important;
  color: #b7a2ce !important;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game em{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(216, 174, 255, 0.35);
  display: grid;
  place-items: center;
  font: 700 18px/1 var(--space-font) !important;
  color: #e9d5ff !important;
  transition: background 0.2s ease, transform 0.2s ease;
}
html body :is(#marathons-view,#leaderboard-view) .builder-game:hover:not(:disabled) em{
  background: #cf8ff6;
  color: #160726 !important;
  transform: scale(1.08);
}
html body :is(#marathons-view,#leaderboard-view) .builder-game em.builder-lock{
  width: auto;
  height: auto;
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font: 700 9.5px/1 var(--space-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a894c0 !important;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
html body :is(#marathons-view,#leaderboard-view) .standings-table{
  background: var(--cosmic-glass) !important;
  border: 1px solid var(--cosmic-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--cosmic-highlight), var(--cosmic-shadow) !important;
  backdrop-filter: blur(22px) !important;
}
html body :is(#marathons-view,#leaderboard-view) .standings-table th{
  background: rgba(28, 14, 50, 0.78) !important;
  color: #d4bde8 !important;
  font: 700 11px/1 var(--space-font) !important;
  letter-spacing: 0.12em !important;
  border-bottom: 1px solid rgba(204, 154, 255, 0.18) !important;
}
html body :is(#marathons-view,#leaderboard-view) .standings-table td{
  border-top: 1px solid rgba(204, 154, 255, 0.12) !important;
}
html body :is(#marathons-view,#leaderboard-view) .lb-select{
  background-color: rgba(18, 9, 34, 0.86) !important;
  border: 1px solid rgba(206, 158, 255, 0.34) !important;
  border-radius: 999px !important;
  font: 600 13.5px/1 var(--space-font) !important;
  padding: 11px 44px 11px 20px !important;
  color: #f6eeff !important;
  backdrop-filter: blur(16px) !important;
}
html body :is(#marathons-view,#leaderboard-view) .podium-card{
  background: var(--cosmic-glass) !important;
  border: 1px solid var(--cosmic-border) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: var(--cosmic-shadow) !important;
}
html body :is(#marathons-view,#leaderboard-view) .pn-marathon-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 16px;
}
html body :is(#marathons-view,#leaderboard-view) .pn-m-step{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(12, 6, 24, 0.65);
  border: 1px solid rgba(206, 158, 255, 0.22);
}
html body :is(#marathons-view,#leaderboard-view) .pn-m-step b{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 11px/1 var(--space-font);
  color: #190628;
  background: linear-gradient(135deg, #f3dcff, #c084fc);
  flex-shrink: 0;
}
html body :is(#marathons-view,#leaderboard-view) .pn-m-step span{
  font: 600 12px/1.2 var(--space-font);
  color: #efe2ff;
}
html body :is(#marathons-view,#leaderboard-view) .pn-preset-bar{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(204, 154, 255, 0.14);
}
html body :is(#marathons-view,#leaderboard-view) .pn-preset-label{
  font: 600 11px/1 var(--space-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bdaad2;
  margin-right: 4px;
}
html body :is(#marathons-view,#leaderboard-view) .pn-preset-chip{
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(28, 14, 52, 0.78);
  border: 1px solid rgba(206, 158, 255, 0.26);
  color: #ead6ff;
  font: 600 11.5px/1 var(--space-font);
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo);
}
html body :is(#marathons-view,#leaderboard-view) .pn-preset-chip:hover{
  background: rgba(168, 85, 247, 0.32);
  border-color: #e5beff;
  color: #ffffff;
  transform: translateY(-1px);
}
html body :is(#marathons-view,#leaderboard-view) .pn-playlist-ghost{
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
html body :is(#marathons-view,#leaderboard-view) .pn-ghost-round{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(10, 5, 21, 0.65);
  border: 1px dashed rgba(206, 158, 255, 0.24);
  color: #b7a2ce;
  font: 500 12.5px/1.3 var(--space-font);
}
html body :is(#marathons-view,#leaderboard-view) .pn-ghost-round span{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(206, 158, 255, 0.28);
  font: 700 11px/1 var(--space-font);
  color: #dfb2ff;
  flex-shrink: 0;
}
html body :is(#marathons-view,#leaderboard-view) .pn-ghost-round i{
  font-style: normal;
}
html body :is(#marathons-view,#leaderboard-view) .playlist-row-thumb{
  width: 44px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(216, 174, 255, 0.28);
  flex-shrink: 0;
}
html body :is(#marathons-view,#leaderboard-view) #lb-podium{
  margin-bottom: 26px !important;
}
html body :is(#marathons-view,#leaderboard-view) .podium-card.is-unclaimed{
  padding: 24px 20px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
html body :is(#marathons-view,#leaderboard-view) .podium-card.first.is-unclaimed{
  background: linear-gradient(180deg, rgba(44, 20, 78, 0.88) 0%, rgba(18, 8, 36, 0.94) 100%) !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
  box-shadow: 0 20px 50px rgba(2, 0, 9, 0.75), 0 0 32px rgba(250, 204, 21, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-8px);
}
html body :is(#marathons-view,#leaderboard-view) .podium-ghost-crown{
  width: 64px;
  height: 64px;
  margin: 8px auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28), rgba(14, 7, 28, 0.9));
  border: 1px solid rgba(216, 174, 255, 0.36);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.25);
}
html body :is(#marathons-view,#leaderboard-view) .podium-card.first .podium-ghost-crown{
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 26px rgba(250, 204, 21, 0.3);
}
html body :is(#marathons-view,#leaderboard-view) .podium-claim-pill{
  display: inline-block;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font: 700 10.5px/1 var(--space-font);
  letter-spacing: 0.1em;
  color: #e5caff;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(216, 174, 255, 0.32);
}

/* Keep the imported design usable on narrow displays. */
html body #marathons-view input,html body #marathons-view select{background:rgba(9,4,19,.82)!important;border:1px solid rgba(204,154,255,.26)!important;border-radius:10px!important;color:#f7f2ff!important}
html body #marathons-view input:focus,html body #marathons-view select:focus{border-color:#dfafff!important;box-shadow:0 0 0 3px rgba(192,132,252,.20)!important;outline:none!important}
html body :is(#marathons-view,#leaderboard-view){--space-font:"DM Sans","Segoe UI",sans-serif;min-width:0}
html body :is(#marathons-view,#leaderboard-view) .builder-layout>div{min-width:0}
html body #leaderboard-view .leaderboard-container{max-width:1100px;padding:20px 0 40px;min-width:0}
html body #leaderboard-view .pn-standings-scroll{max-width:100%;overflow-x:auto;border-radius:18px}
html body #leaderboard-view .standings-table{min-width:640px}
html body #leaderboard-view .standings-table:has(.lb-empty){min-width:0;table-layout:fixed}
html body #leaderboard-view .standings-table:has(.lb-empty) thead{display:none}
html body :is(#marathons-view,#leaderboard-view) :is(button,a,input,select,.pn-standings-scroll):focus-visible{outline:2px solid #e2b5ff!important;outline-offset:3px}
html body :is(#marathons-view,#leaderboard-view) .btn{min-height:44px}
@media(max-width:768px){html body #marathons-view .builder-layout{grid-template-columns:1fr}}
@media(max-width:540px){
 html body #marathons-view .builder-games{grid-template-columns:1fr!important}
 html body #marathons-view .pn-marathon-steps{grid-template-columns:1fr}
 html body #marathons-view .playlist-row{gap:6px;padding:10px 6px}
 html body #marathons-view .playlist-row b{min-width:0;overflow-wrap:anywhere}
 html body #leaderboard-view .lb-select-wrapper{width:100%;min-width:0}
 html body #leaderboard-view .lb-select{width:100%}
 html body :is(#marathons-view,#leaderboard-view) .page-heading h1,html body #leaderboard-view .hall-of-fame-head h2{font-size:32px!important}
}
html body:has(:is(#marathons-view,#leaderboard-view):not([hidden])){isolation:isolate;background:#070310!important;background-image:none!important}
html body:has(:is(#marathons-view,#leaderboard-view):not([hidden])):before{display:none!important}
html body:has(:is(#marathons-view,#leaderboard-view):not([hidden])) .space-backdrop{display:block!important}
html body:has(:is(#marathons-view,#leaderboard-view):not([hidden])) .space-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(16,7,32,.48) 0%,rgba(8,3,18,.82) 65%,rgba(6,2,14,.92) 100%);pointer-events:none}

/* Library hover only; Featured keeps its existing orbit behavior. */
@media(any-hover:hover) and (any-pointer:fine){
 /* Steam-style tilt: the WHOLE card (frame, art, text) turns toward the mouse in 3D, so the frame always follows.
    card-tilt.js sets --pn-rx / --pn-ry (degrees). Only the shine sweep lights the art (no glare). Without the script it uses a fixed slight tilt. */
 html body #discover-view .pn-neon-library #game-grid .game-card{width:100%;margin:0;transition:width .6s cubic-bezier(.45,0,.25,1),margin .6s cubic-bezier(.45,0,.25,1),border-color .3s ease,box-shadow .6s ease,transform .3s ease-out!important;transform-origin:50% 50%}
 html body #discover-view .pn-neon-library #game-grid .game-card:hover{width:120%;margin-inline:-10%;margin-block:-5.625%;transform:perspective(900px) rotateX(var(--pn-rx,3deg)) rotateY(var(--pn-ry,-4deg))!important;overflow:hidden!important;border-radius:10px!important;z-index:5;border-color:#ead0ff!important;box-shadow:0 16px 32px #0008,0 0 20px #c084fc60!important;will-change:transform}
 html body #discover-view .pn-neon-library #game-grid .game-art{border-radius:inherit}
 html body #discover-view .pn-neon-library #game-grid .game-art::after{content:"";position:absolute;inset:-50% -70%;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);opacity:0;transform:translateX(-100%)}
 html body #discover-view .pn-neon-library #game-grid .game-card:hover .game-art::after{animation:pn-library-shine .9s cubic-bezier(.3,.1,.3,1) both}
}
@keyframes pn-library-shine{0%{transform:translateX(-25%);opacity:1}85%{opacity:1}100%{transform:translateX(25%);opacity:0}}
@media(prefers-reduced-motion:reduce){
 html body #discover-view .pn-neon-library #game-grid .game-card{transition:none!important}
 html body #discover-view .pn-neon-library #game-grid .game-card:hover{transform:none!important}
 /* The explicitly requested hover sweep stays enabled only on library cards. */
}

/* ---- Library hover (mouse only): card shows only the illustration; details panel beside it, Steam-style.
   Panel = #pn-game-detail-popover from app.js (showGameDetail / positionGameDetail): right of the card for the
   left half of the grid, left of it for the right half. Touch screens keep the old behaviour. ---- */
@media(any-hover:hover) and (any-pointer:fine){
 html body #discover-view .pn-neon-library #game-grid .game-card{cursor:pointer}
 html body #discover-view .pn-neon-library #game-grid .game-card:hover :is(.card-body,.pn-card-over,.pn-card-info,.cover-title,.pn-card-badge,.maintenance-tag,.art-tag){opacity:0!important;pointer-events:none!important;transition:opacity .2s ease!important}
 html body #discover-view .pn-neon-library #game-grid .game-card:hover .game-art:before{opacity:0!important;transition:opacity .25s ease!important}
 html body #pn-game-detail-popover.pn-game-detail-popover:not([hidden]){display:block!important;animation:pn-detail-in .6s cubic-bezier(.45,0,.25,1) both}
 html body #pn-game-detail-popover.pn-detail-left:not([hidden]){animation-name:pn-detail-in-left}
 html body #pn-game-detail-popover.pn-game-detail-popover{background:#0f1526;border:1px solid #6d4aa8;border-radius:10px;box-shadow:0 18px 44px #000b,0 0 22px #c084fc26;color:#eaf2ff;overflow:visible!important;font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
 /* small triangle on the side touching the card */
 html body #pn-game-detail-popover.pn-game-detail-popover::before{content:"";position:absolute;top:calc(var(--pn-arrow-y,60px) - 8px);left:-8px;width:14px;height:14px;background:#0f1526;border-left:1px solid #6d4aa8;border-bottom:1px solid #6d4aa8;transform:rotate(45deg);border-radius:0 0 0 3px}
 html body #pn-game-detail-popover.pn-detail-left::before{left:auto;right:-8px;transform:rotate(-135deg)}
 html body #pn-game-detail-popover .pn-game-detail-cover{display:none}
 html body #pn-game-detail-popover .pn-game-detail-body{padding:18px 18px 16px;display:flex;flex-direction:column;min-height:inherit;box-sizing:border-box}
 html body #pn-game-detail-popover .pn-game-detail-heading{flex-direction:column;gap:6px}
 html body #pn-game-detail-popover .pn-game-detail-heading>div>span{color:#7ff3ff;font:700 11px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:1.4px}
 html body #pn-game-detail-popover .pn-game-detail-heading h3{font:800 30px/1.05 'DM Sans',Arial,sans-serif;letter-spacing:-.3px;margin-top:6px;color:#fff;text-transform:none}
 html body #pn-game-detail-popover .pn-game-detail-mode{max-width:none;text-align:left;color:#d6c2ff;font:600 13px/1.3 'DM Sans',Arial,sans-serif}
 html body #pn-game-detail-popover .pn-game-detail-body>p{color:#eef3fb;font:500 15px/1.6 'DM Sans',Arial,sans-serif;margin:12px 0 16px}
 html body #pn-game-detail-popover :is(.pn-game-detail-stats,.pn-game-detail-meta,.pn-game-detail-play){font-family:'DM Sans',Arial,sans-serif}
 html body #pn-game-detail-popover .pn-game-detail-stats{grid-template-columns:repeat(5,1fr);gap:4px;opacity:.82;margin-top:auto}
 html body #pn-game-detail-popover .pn-game-detail-stats>div{background:#ffffff06;border-color:#ffffff10;padding:7px 2px;border-radius:6px}
 html body #pn-game-detail-popover .pn-game-detail-stats b{font-size:13px}
 html body #pn-game-detail-popover .pn-game-detail-stats span{font-size:8.5px;font-weight:600;letter-spacing:.3px;color:#a9b5c8}
 html body #pn-game-detail-popover .pn-game-detail-meta{margin:10px 0 12px;font-size:11px;color:#a9b5c8}
 /* the panel only follows the hovered game (it closes as soon as the mouse leaves it): not clickable, so the
    Play button becomes a hint, the card itself is the Play button */
 html body #pn-game-detail-popover.pn-game-detail-popover{pointer-events:none!important}
 html body #pn-game-detail-popover .pn-game-detail-play{display:none!important}
html body #discover-view .pn-neon-library #game-grid .game-card::after{content:"\25B6\00A0 Play";position:absolute;left:50%;bottom:14px;z-index:6;padding:9px 22px;border-radius:999px;font:800 14px/1 'DM Sans',Arial,sans-serif;letter-spacing:.02em;color:#fff;background:linear-gradient(110deg,#00aeea,#7d43ff);border:1px solid #63eaff;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 14px rgba(99,234,255,.35);pointer-events:none;opacity:0;transform:translate(-50%,8px);transition:opacity .25s ease,transform .25s ease}
html body #discover-view .pn-neon-library #game-grid .game-card:hover::after{opacity:1;transform:translate(-50%,0)}
/* PC-only games: "⬇ Download PC Arcade" on the website, "⬇ Download" / "⬇ Downloading 45%" inside the app */
html body #discover-view .pn-neon-library #game-grid .game-card[data-pn-pill]::after{content:attr(data-pn-pill);white-space:nowrap}
}
/* Unfolds from the card's side (the panel itself follows the card edge every frame, see positionGameDetail).
   Final clip leaves 12px outside the attached side so the triangle shows. */
@keyframes pn-detail-in{from{clip-path:inset(0 100% 0 -12px)}to{clip-path:inset(0 0 0 -12px)}}
@keyframes pn-detail-in-left{from{clip-path:inset(0 -12px 0 100%)}to{clip-path:inset(0 -12px 0 0)}}
@media(prefers-reduced-motion:reduce){html body #pn-game-detail-popover:not([hidden]){animation:none!important}}