/* Home hub + game-style header. Deep purple/navy sky, chunky glossy cards, heavy white italic type. */
:root {
  --game: "Rubik", var(--display);
  --sky1: #1A1150; --sky2: #0B0B2A;
  --card1: #2C2278; --card2: #19134A;
}

/* ---------- header (every page) ---------- */
.top nav a { font: italic 800 15px/1 var(--game); text-transform: uppercase; letter-spacing: .4px; color: #C9CCF2; padding: 10px 14px; }
.top nav a:hover { color: #fff; }
.top nav a.on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 -3px 0 var(--action); }
.top { gap: 10px 18px; }
.top nav { flex: 1 1 auto; min-width: 0; }
.mechip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 999px; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); min-width: 0; max-width: 100%;
  transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.mechip:hover { background: rgba(255, 255, 255, .12); }
.mechip:active { transform: scale(.97); }
.meav { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; background: #3A2E8F;
  display: grid; place-items: center; }
.meav > img, .meav > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meinit { font: italic 900 16px/1 var(--game); }
.meav > img:not([hidden]) ~ .meinit, .meav > svg ~ .meinit { display: none; }
.metext { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.metext b { font: italic 800 15px/1.1 var(--game); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.metext b.on { color: var(--action); }
.mestat { font-size: 12px; color: #C9CCF2; white-space: nowrap; }
.mestat:empty { display: none; }
.melvl { display: grid; place-items: center; width: 34px; height: 34px; flex: none; font: italic 900 15px/1 var(--game); color: #2A1A00;
  background: radial-gradient(circle at 35% 30%, #FFE9A8, #FFC53D 55%, #D18E00); box-shadow: 0 0 16px rgba(255, 197, 61, .55);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .top nav { order: 3; flex-basis: 100%; }
  .mechip { margin-left: auto; }
  .metext b { max-width: 110px; }
  .mestat { display: none; }
}

/* ---------- page ---------- */
/* The sky sits on <html> so the fixed starfield layer (z-index -1) shows through a transparent body. */
html { background: radial-gradient(900px 600px at 50% 280px, #2A1C7A 0%, transparent 70%) no-repeat, linear-gradient(180deg, var(--sky1) 0, var(--sky2) 900px) no-repeat, var(--sky2); }
body { background: transparent; }   /* the sky on <html> and the fixed .hubsky show through on every screen */
body.hubpage main { max-width: 1440px; }
body.hubpage .top { max-width: 1440px; }

.hubsky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stars { position: absolute; inset: 0;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cfd3ff, transparent),
    radial-gradient(1.5px 1.5px at 210px 160px, #fff, transparent), radial-gradient(1px 1px at 60px 220px, #b9c0ff, transparent),
    radial-gradient(1px 1px at 260px 260px, #fff, transparent), radial-gradient(2px 2px at 170px 20px, rgba(255, 255, 255, .8), transparent);
  background-size: 300px 300px; opacity: .55; animation: twinkle 6s ease-in-out infinite alternate; }
.stars.s2 { background-size: 470px 470px; background-position: 140px 90px; opacity: .35; animation-duration: 9s; animation-delay: -3s; }
@keyframes twinkle { to { opacity: .2; } }
.links { position: absolute; inset: 0; width: 100%; height: 100%; }
.links .web path { fill: none; stroke: rgba(150, 160, 255, .22); stroke-width: 1.5; stroke-dasharray: 6 10; animation: flow 18s linear infinite; }
.links .nodes circle { fill: #9AA4FF; opacity: .55; filter: drop-shadow(0 0 6px #7B7BFF); }
@keyframes flow { to { stroke-dashoffset: -320; } }
.drift { position: absolute; display: block; opacity: .5; transform: rotate(var(--r));
  animation: drift var(--d, 16s) ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes drift { to { transform: translate(14px, -26px) rotate(calc(var(--r) + 8deg)); } }
.drift.page { width: 34px; height: 44px; border-radius: 3px; background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(42, 52, 110, .35) 7px 8.5px) 6px 9px / 22px 28px no-repeat, #E9E7F7;
  box-shadow: 0 6px 18px rgba(10, 6, 40, .6); }
.drift.book { width: 30px; height: 40px; border-radius: 3px 5px 5px 3px; background: linear-gradient(90deg, #FF8A65 0 6px, #FF6B4A 6px); box-shadow: 0 6px 18px rgba(10, 6, 40, .6), inset -3px 0 0 rgba(255, 255, 255, .25); }
.drift.book:nth-of-type(odd) { background: linear-gradient(90deg, #2EE6A6 0 6px, #1FB887 6px); }
.drift.frag { font: italic 700 13px/1 var(--game); color: #AEB4FF; opacity: .45; }
.drift.frag::before { content: "[[ link ]]"; }
@media (max-width: 720px) { .drift:nth-of-type(n + 5) { display: none; } }

/* ---------- layout ---------- */
.hub { position: relative; display: grid; gap: 18px; align-items: start; padding-top: 6px;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr) minmax(260px, 310px);
  grid-template-areas: "left stage right" "left feed right"; }
.hstage { grid-area: stage; } .hleft { grid-area: left; } .hright { grid-area: right; } .hfeed { grid-area: feed; }
.hcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hfeed { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.hfeed #hevent:empty { display: none; }
@media (max-width: 1099px) {
  .hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage stage" "left right" "feed feed"; }
}
@media (max-width: 720px) {
  .hub { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "left" "right" "feed"; gap: 14px; }
  .hleft .today { order: -1; }
}

/* ---------- the walker on its pedestal ---------- */
.hstage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 0 8px; min-height: 420px; justify-content: center; }
.walker { position: relative; z-index: 2; width: 210px; height: 210px; display: grid; place-items: center; animation: bob 4s ease-in-out infinite;
  filter: drop-shadow(0 18px 24px rgba(8, 4, 40, .65)); }
.walker > svg, .walker > img { width: 210px; height: 210px; }
.walker > img.av { width: 190px; height: 190px; border-radius: 50%; }
@keyframes bob { 50% { transform: translateY(-8px); } }
/* the floating library: an island of shelves with link threads (svg from avatar.js platformSvg) */
.pedestal { position: relative; z-index: 1; width: min(360px, 92%); aspect-ratio: 360 / 252; margin-top: -58px; animation: drift 7s ease-in-out infinite; }
.pedestal > svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 26px 30px rgba(8, 4, 40, .55)); }
.pedestal .pthread { animation: thread 3.2s ease-in-out infinite; }
.pedestal .pthread:nth-child(odd) { animation-delay: -1.6s; }
.pedestal .ppage { animation: page 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pedestal .ppage.p2 { animation-delay: -3s; }
.hero-svg .hero-glow { animation: glow 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hero-svg .hero-scarf { animation: scarf 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 80% 10%; }
@keyframes drift { 50% { transform: translateY(5px); } }
@keyframes thread { 50% { opacity: .45; } }
@keyframes page { 50% { transform: translateY(-9px) rotate(8deg); } }
@keyframes glow { 50% { opacity: .55; transform: scale(.88); } }
@keyframes scarf { 50% { transform: rotate(-5deg); } }
.pill { position: relative; z-index: 3; margin-top: -10px; padding: 10px 22px; border-radius: 999px; text-decoration: none; color: #fff;
  font: italic 900 15px/1 var(--game); text-transform: uppercase; letter-spacing: .5px;
  background: linear-gradient(180deg, #6D5CFF, #4A3AE0); border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 8px 20px -6px rgba(109, 92, 255, .9); transition: transform 180ms var(--ease), filter 180ms var(--ease); }
.pill:hover { transform: translateY(-2px); filter: brightness(1.1); }
.pill:active { transform: scale(.97); }
.hstage .lvlslot { margin-top: 18px; padding: 10px 16px; border-radius: 18px; background: rgba(20, 14, 70, .7); border: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 720px) {
  .hstage { min-height: 0; padding-top: 4px; }
  .walker, .walker > svg { width: 160px; height: 160px; }
  .walker > img.av { width: 150px; height: 150px; }
}

/* ---------- cards ---------- */
.hcard { --c: #7B7BFF; position: relative; display: block; width: 100%; padding: 18px 20px; border-radius: 22px; overflow: hidden;
  color: #fff; text-decoration: none; text-align: left; font: inherit;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 36%, transparent), transparent 62%), linear-gradient(165deg, var(--card1), var(--card2));
  border: 2px solid color-mix(in srgb, var(--c) 42%, rgba(255, 255, 255, .08));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -4px 0 rgba(0, 0, 0, .22), 0 16px 32px -16px color-mix(in srgb, var(--c) 55%, #000);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
a.hcard:hover, button.hcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 75%, #fff);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -4px 0 rgba(0, 0, 0, .22), 0 0 26px -4px color-mix(in srgb, var(--c) 65%, transparent); }
a.hcard:active, button.hcard:active { transform: scale(.98); }
.hcard:focus-visible, .pill:focus-visible, .mechip:focus-visible, .diffs a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hcard h2, .hcard .htitle, .hub .today h1 { font: italic 900 26px/1.05 var(--game); letter-spacing: -.2px; margin: 0 0 6px; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.hcard .htitle, button.hcard .hsub { display: block; }
.hsub { color: #D3D5F5; margin: 0; font-size: 14px; line-height: 1.4; max-width: 34ch; }
.hlabel { display: inline-block; font: italic 800 13px/1 var(--game); text-transform: uppercase; letter-spacing: .6px; color: #C9CCF2; margin: 0 0 12px; }
.hcard:has(.go) { padding-right: 84px; }
.hcard .go { position: absolute; right: 14px; bottom: 10px; font-size: 44px; transform: rotate(-10deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.hcard .cta { display: inline-block; margin-top: 14px; padding: 10px 26px; border-radius: 999px; font: italic 900 18px/1 var(--game); text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 6px 0 color-mix(in srgb, var(--c) 55%, #000); }

/* streak */
.hstreak .hlabel b { font-size: 16px; color: #fff; }
.flame { position: absolute; top: 8px; right: 14px; font-size: 38px; line-height: 1; filter: grayscale(1); opacity: .35; }
.flame.lit { filter: drop-shadow(0 0 14px rgba(255, 120, 40, .8)); opacity: 1; animation: flicker 1.6s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scale(1.06, .95) rotate(-3deg); } }
.week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 10px; padding: 0; }
.week li { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: #AEB4E6; }
.week b { display: grid; place-items: center; width: 100%; max-width: 34px; aspect-ratio: 1; border-radius: 10px; font: italic 800 14px/1 var(--game); color: #fff;
  background: rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums; }
.week .done b { background: linear-gradient(180deg, #FFB547, #FF6B2C); box-shadow: 0 0 12px rgba(255, 120, 40, .5); }
.week .now b { box-shadow: inset 0 0 0 2px var(--action); }
.week .future b { opacity: .35; }

/* daily (keeps the classes the solo game and tests use) */
.hub .today { margin: 0; padding: 20px; border-radius: 22px; }
.hub .today .walk { font: italic 800 22px/1.15 var(--game); }
.hub .today .meta { margin: 12px 0 16px; }
.hub .today .btn { font: italic 900 18px/1 var(--game); text-transform: uppercase; padding: 14px 28px; }
.hub .today .countdown b { font: italic 900 22px/1 var(--game); }
.hub .today .hsub { margin-top: 10px; }

/* unlimited difficulties */
.diffs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.diffs a { padding: 8px 12px; border-radius: 12px; font: italic 800 13px/1 var(--game); text-transform: uppercase; color: #E4E6FF; text-decoration: none;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.diffs a:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }

/* competitive */
.rankrow { display: flex; align-items: center; gap: 10px; }
.rankrow b { font: italic 900 20px/1 var(--game); color: #fff; text-transform: uppercase; }

/* feed */
.hevent .tag { display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: 8px; font: italic 900 11px/1 var(--game); text-transform: uppercase;
  letter-spacing: .6px; color: #2A1A00; background: var(--c); }
.hnews ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hnews a { display: flex; gap: 12px; align-items: flex-start; padding: 8px; margin: 0 -8px; border-radius: 12px; color: #fff; text-decoration: none;
  transition: background-color 180ms var(--ease); }
.hnews a:hover { background: rgba(255, 255, 255, .07); }
.hnews a > span:first-child { font-size: 22px; line-height: 1.2; }
.hnews b { display: block; font: italic 800 15px/1.2 var(--game); }
.hnews small { display: block; color: #C9CCF2; font-size: 13px; line-height: 1.35; }

/* ---------- friends drawer ---------- */
.fpanel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(380px, 100%); padding: 20px; overflow-y: auto;
  background: linear-gradient(180deg, #24196A, #140F40); border-left: 2px solid rgba(255, 255, 255, .1); box-shadow: -20px 0 50px rgba(5, 3, 25, .6);
  animation: slidein 260ms var(--ease); }
@keyframes slidein { from { transform: translateX(100%); } }
.fhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fhead h2 { font: italic 900 26px/1 var(--game); margin: 0; }
.fpanel input[type="search"] { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .14); background: rgba(10, 6, 40, .5);
  color: #fff; font: inherit; margin-bottom: 10px; }
.fpanel input[type="search"]:focus { outline: none; border-color: #8C7CFF; }
.fpanel h3.hlabel { margin-top: 18px; }
.flist { display: grid; gap: 8px; }
.frow { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.frow > .av { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.frow > .av:not([hidden]) + .fav-fallback, .frow > svg + .fav-fallback { display: none; }
.fav-fallback { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #3A2E8F; font: italic 900 14px/1 var(--game); }
.frow > a, .frow > span:not(.fav-fallback) { flex: 1; min-width: 0; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .btn { flex: none; }
.fpanel .iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font-size: 16px; }

/* Weekly recap card (flag weekly_recap) */
.hrecap .tag { display: inline-block; margin-bottom: 8px; padding: 5px 10px; border-radius: 8px; font: italic 900 11px/1 var(--game); text-transform: uppercase;
  letter-spacing: .6px; background: var(--c); color: #0B1020; }
.hrecap .rx { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; cursor: pointer; }
.hrecap .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }