:root {
  color-scheme: light;
  --navy: #111b49; --white: #fffdf7; --yellow: #ffd447; --pink: #ff557b;
  --sky: #5ed3ff; --green: #65dc86; --ink: #14204e;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%; margin: 0; overflow-x: hidden; color: var(--white);
  font-family: "Outfit", system-ui, sans-serif;
  background: radial-gradient(circle at 12% 12%, rgba(80,205,255,.24), transparent 28rem), radial-gradient(circle at 86% 18%, rgba(255,84,125,.16), transparent 26rem), linear-gradient(145deg, #0c153d 0%, #16245c 56%, #122a5e 100%);
}
body::before {
  position: fixed; inset: 0; z-index: -2; content: ""; pointer-events: none; opacity: .2;
  background-image: radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1.5px);
  background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
a { color: inherit; }
.access-page { width: min(100%,72rem); min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; margin: 0 auto; padding: clamp(1rem,3vw,2.25rem); }
.access-brand { display: inline-flex; align-items: center; gap: .7rem; width: fit-content; height: fit-content; text-decoration: none; font-size: .86rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.access-brand img { width: 3rem; height: 3rem; object-fit: contain; filter: none; }
.access-card { position: relative; align-self: center; justify-self: center; width: min(100%,31rem); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 2rem; padding: clamp(1.5rem,5vw,2.6rem); color: var(--ink); background: radial-gradient(circle at 94% 8%,rgba(255,212,71,.34),transparent 10rem),linear-gradient(145deg,#fff1f6,#fffdf7 72%); box-shadow: 0 2rem 6rem rgba(3,8,35,.5),inset 0 1px 0 #fff; animation: dialog-in 350ms cubic-bezier(.2,.85,.25,1) both; }
.access-card::after { position: absolute; right: -3rem; bottom: -6rem; width: 15rem; aspect-ratio: 1; content: ""; border-radius: 50%; background: #ff9ebe; opacity: .18; pointer-events: none; }
.access-spark { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 1.15rem; color: var(--navy); background: var(--yellow); box-shadow: 0 8px 0 rgba(20,32,78,.1); font-size: 1.6rem; transform: rotate(-4deg); }
.access-eyebrow { margin: 0 0 .25rem; color: #8b57e8; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.access-card h1 { margin: 0; color: var(--ink); font-size: clamp(2.65rem,8vw,4rem); line-height: .95; text-shadow: none; }
.access-intro { max-width: 24rem; margin: .75rem 0 1.25rem; color: rgba(20,32,78,.68); font-size: .95rem; font-weight: 400; line-height: 1.45; }
.access-card label { position: relative; z-index: 1; margin: .6rem 0 .38rem; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.access-card input { position: relative; z-index: 1; width: 100%; border: 2px solid rgba(20,32,78,.15); border-radius: 1rem; padding: .88rem 1rem; color: var(--ink); background: rgba(255,255,255,.88); font: 400 1rem/1.2 "Outfit",sans-serif; }
.access-card input:focus { outline: 4px solid rgba(154,103,248,.18); border-color: #9a67f8; }
.access-error { position: relative; z-index: 1; margin: .65rem 0 0; border-radius: .75rem; padding: .55rem .7rem; color: #a51f47; background: rgba(255,85,123,.12); font-size: .78rem; font-weight: 900; }
.access-card button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 1.1rem; border: 0; border-radius: 999px; padding: .72rem .75rem .72rem 1.15rem; color: #fff; background: var(--ink); font: 900 .95rem/1 "Outfit",sans-serif; cursor: pointer; box-shadow: 0 8px 0 rgba(20,32,78,.13); }
.access-card button span { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--yellow); transition: transform 180ms ease; }
.access-card button:hover span,.access-card button:focus-visible span { transform: translateX(3px); }
.access-card small { position: relative; z-index: 1; margin-top: 1rem; color: rgba(20,32,78,.46); font-size: .68rem; font-weight: 400; text-align: center; }
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; display: block; border: 2px solid rgba(255,255,255,.12); border-radius: 50%; }
.orb::after { position: absolute; inset: 14%; content: ""; border: inherit; border-radius: inherit; }
.orb-one { top: 7%; right: -6rem; width: 25rem; aspect-ratio: 1; background: rgba(94,211,255,.04); }
.orb-two { left: -9rem; bottom: 4%; width: 22rem; aspect-ratio: 1; background: rgba(255,212,71,.04); }
.orb-three { top: 43%; left: 48%; width: 7rem; aspect-ratio: 1; border-color: rgba(255,255,255,.06); }
.spark { position: absolute; color: var(--yellow); font-size: clamp(1.1rem,2vw,1.8rem); animation: twinkle 3s ease-in-out infinite; }
.spark-one { top: 16%; left: 5%; }
.spark-two { top: 31%; right: 8%; color: var(--sky); animation-delay: -1s; }
.spark-three { bottom: 24%; left: 46%; color: var(--pink); animation-delay: -2s; }
.hub { width: min(100%,94rem); min-height: 100dvh; display: flex; flex-direction: column; margin: 0 auto; padding: clamp(1.1rem,3vw,2.25rem) clamp(1rem,4vw,3.5rem) 1.4rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-size: .86rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.brand-mark { width: 3rem; height: 3rem; display: block; flex: 0 0 auto; filter: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.game-count { display: flex; align-items: center; gap: .55rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: .52rem .85rem; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); font-size: .82rem; font-weight: 800; backdrop-filter: blur(12px); }
.game-count,.player-button { min-height: 2.75rem; }
.game-count span { width: .56rem; height: .56rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(101,220,134,.12), 0 0 14px var(--green); }
.player-button { display: inline-flex; align-items: center; gap: .48rem; max-width: 12rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .36rem .72rem .36rem .4rem; color: #fff; background: rgba(255,255,255,.08); font: 900 .78rem/1 "Outfit",sans-serif; cursor: pointer; backdrop-filter: blur(12px); transition: transform 180ms ease,background 180ms ease,border-color 180ms ease; }
.player-button[hidden] { display: none; }
.player-button:hover,.player-button:focus-visible { outline: none; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.14); transform: translateY(-2px); }
.player-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-avatar { width: 1.75rem; height: 1.75rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--navy); background: var(--yellow); font-size: 1rem; }
.hero { max-width: 58rem; margin: clamp(1.35rem,4vh,2.75rem) auto clamp(1.2rem,2.6vh,1.9rem); text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; color: var(--yellow); font-size: clamp(.8rem,1.2vw,.96rem); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1,h2 { font-family: "Outfit","Outfit", system-ui,sans-serif; }
h1 { margin: 0; font-size: clamp(3rem,6vw,5.6rem); line-height: .86; letter-spacing: -.045em; }
h1 span { display: inline-block; color: var(--yellow); text-shadow: 0 7px 0 rgba(0,0,0,.14); }
.intro { max-width: 48rem; margin: .8rem auto 0; color: rgba(255,255,255,.75); font-size: clamp(1rem,1.7vw,1.25rem); font-weight: 400; line-height: 1.5; }
.jump-link { display: none; }
.ranking-button { display: inline-flex; align-items: center; justify-content: center; gap: .48rem; align-self: stretch; flex: 1 1 auto; min-width: 8.8rem; border: 0; border-left: 1px solid rgba(255,255,255,.14); border-radius: 0 1.2rem 1.2rem 0; padding: .7rem 1rem; color: #fff; background: rgba(255,255,255,.06); font: 900 .78rem/1 "Outfit",sans-serif; cursor: pointer; transition: color 180ms ease,background 180ms ease; }
.ranking-button:hover,.ranking-button:focus-visible { outline: none; color: var(--yellow); background: rgba(255,212,71,.1); }
.ranking-arrow { width: 1.45rem; height: 1.45rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--navy); background: var(--yellow); transition: transform 180ms ease; }
.ranking-button:hover .ranking-arrow,.ranking-button:focus-visible .ranking-arrow { transform: translateX(3px); }
.game-filters { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; margin: 0 0 1.15rem; }
.filter-button { min-height: 2.75rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .58rem .9rem; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font: 800 .78rem/1 "Outfit",sans-serif; cursor: pointer; backdrop-filter: blur(12px); transition: color 180ms ease,background 180ms ease,border-color 180ms ease,transform 180ms ease; }
.filter-button:hover,.filter-button:focus-visible { outline: none; color: #fff; border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.filter-button.is-active { color: var(--navy); border-color: var(--yellow); background: var(--yellow); box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.filter-result { min-width: 4.2rem; margin-left: .25rem; color: rgba(255,255,255,.54); font-size: .74rem; font-weight: 900; }
.game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1rem,2.4vw,2rem); width: 100%; scroll-margin-top: 1rem; }
.game-grid[data-visible-count="1"] { grid-template-columns: minmax(0,26rem); justify-content: center; }
.game-grid[data-visible-count="2"] { grid-template-columns: repeat(2,minmax(0,26rem)); justify-content: center; }
.game-card[hidden] { display: none; }
.game-card {
  --accent: var(--sky); --accent-two: var(--green); --card-bg: #e8f8ff;
  position: relative; min-height: 33rem; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 8.5rem 1fr; overflow: hidden;
  border: 1px solid rgba(255,255,255,.65); border-radius: clamp(1.5rem,3vw,2.4rem); padding: clamp(1.25rem,2.6vw,2rem); color: var(--ink);
  background: radial-gradient(circle at 92% 20%, rgba(255,255,255,.86), transparent 11rem), linear-gradient(145deg,var(--card-bg),#fffdf8 72%);
  box-shadow: 0 1.4rem 3.5rem rgba(2,8,34,.32), inset 0 1px 0 #fff; text-decoration: none; isolation: isolate;
  transition: transform 250ms cubic-bezier(.2,.85,.25,1), box-shadow 250ms ease;
}
.game-card::before { position: absolute; right: -14%; bottom: -30%; z-index: 0; width: 23rem; aspect-ratio: 1; content: ""; border-radius: 50%; background: var(--accent); opacity: .14; transition: transform 350ms ease; }
.game-card::after { position: absolute; inset: 0; z-index: 4; content: ""; pointer-events: none; background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%); transform: translateX(-115%); transition: transform 600ms ease; }
.game-card--taal { --accent: #9a67f8; --accent-two: var(--pink); --card-bg: #f0eaff; }
.game-card--hersenen { --accent: #ff7cab; --accent-two: #7957d5; --card-bg: #ffeaf2; }
.game-card--coming-soon { border-style: dashed; cursor: default; }
.game-card:hover,.game-card:focus-visible { z-index: 2; outline: none; transform: translateY(-.55rem) rotate(-.35deg); box-shadow: 0 2rem 5rem rgba(2,8,34,.45),0 0 0 4px var(--accent); }
.game-card--taal:hover,.game-card--taal:focus-visible { transform: translateY(-.55rem) rotate(.35deg); }
.game-card:hover::before,.game-card:focus-visible::before { transform: scale(1.12); }
.game-card:hover::after,.game-card:focus-visible::after { transform: translateX(115%); }
.card-number { position: absolute; right: 1.4rem; bottom: -1.6rem; z-index: 0; color: var(--accent); font-family: "Outfit",sans-serif; font-size: clamp(8rem,16vw,14rem); font-weight: 800; line-height: 1; opacity: .1; }
.card-topline { position: relative; z-index: 1; grid-column: 1/-1; display: flex; align-items: center; gap: .55rem; }
.status { display: inline-flex; align-items: center; border-radius: 999px; padding: .45rem .78rem; color: var(--ink); background: var(--accent); font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 0 rgba(20,32,78,.1); }
.new-theme-label { margin-left: auto; border-radius: 999px; padding: .38rem .62rem; color: #fff; background: var(--ink); font-size: .65rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.mini-arrow { width: 2.8rem; height: 2.8rem; display: grid; flex: 0 0 auto; place-items: center; margin-left: auto; border: 2px solid rgba(20,32,78,.12); border-radius: 50%; font-size: 1.2rem; font-weight: 900; transition: color 180ms ease,background 180ms ease,transform 180ms ease; }
.new-theme-label + .mini-arrow { margin-left: 0; }
.game-card:hover .mini-arrow,.game-card:focus-visible .mini-arrow { color: #fff; background: var(--ink); transform: rotate(45deg); }
.card-content { position: relative; z-index: 1; grid-column: 1; grid-row: 3; align-self: end; min-width: 0; padding-top: .8rem; }
.kicker { margin: 0 0 .3rem; color: var(--accent-two); font-size: .86rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.game-card h2 { max-width: 100%; margin: 0; font-size: clamp(2.15rem,3.2vw,3.4rem); line-height: .92; letter-spacing: -.035em; overflow-wrap: anywhere; }
.description { max-width: 34rem; margin: .8rem 0 0; color: rgba(20,32,78,.7); font-size: clamp(.92rem,1.25vw,1.04rem); font-weight: 400; line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.tags span { border: 1px solid rgba(20,32,78,.1); border-radius: 999px; padding: .38rem .62rem; background: rgba(255,255,255,.56); font-size: .7rem; font-weight: 900; }
.personal-progress { display: grid; grid-template-columns: 2.35rem minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 0 .7rem; width: fit-content; max-width: 100%; margin-top: .9rem; border: 1px solid rgba(37,135,74,.18); border-radius: 1.15rem; padding: .55rem .9rem .55rem .55rem; background: linear-gradient(135deg,rgba(236,255,242,.94),rgba(255,255,255,.8)); box-shadow: 0 7px 18px rgba(20,32,78,.08); }
.personal-progress[hidden] { display: none; }
.personal-progress::before { content: "↻"; grid-column: 1; grid-row: 1/3; width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #35b765; font: 800 1.15rem/1 "Outfit",sans-serif; box-shadow: 0 5px 12px rgba(37,135,74,.2); }
.personal-progress .progress-label { grid-column: 2; grid-row: 1; color: #25874a; font-size: .64rem; font-weight: 800; letter-spacing: .065em; line-height: 1.1; text-transform: uppercase; }
.personal-progress strong { grid-column: 2; grid-row: 2; color: rgba(20,32,78,.78); font-size: .77rem; font-weight: 600; line-height: 1.25; }
.availability-note { width: fit-content; margin: .85rem 0 0; border-radius: 999px; padding: .42rem .68rem; color: rgba(20,32,78,.62); background: rgba(20,32,78,.07); font-size: .73rem; font-weight: 900; }
.availability-note span { margin-right: .28rem; color: var(--accent-two); }
.play-button { width: fit-content; display: inline-flex; align-items: center; gap: .75rem; margin-top: .9rem; border-radius: 999px; padding: .75rem .85rem .75rem 1.15rem; color: #fff; background: var(--ink); font-size: .92rem; font-weight: 900; box-shadow: 0 9px 0 rgba(20,32,78,.13); }
.game-card--coming-soon .play-button { color: rgba(20,32,78,.66); border: 2px dashed rgba(20,32,78,.2); background: rgba(255,255,255,.46); box-shadow: none; }
.play-button b { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--accent); transition: transform 180ms ease; }
.game-card:hover .play-button b,.game-card:focus-visible .play-button b { transform: translateX(.22rem); }
.card-visual { position: relative; z-index: 1; grid-column: 1; grid-row: 2; align-self: center; justify-self: center; width: min(100%,9rem); filter: drop-shadow(0 1.1rem .8rem rgba(20,32,78,.16)); transition: transform 300ms cubic-bezier(.2,.85,.25,1); }
.game-card:hover .card-visual,.game-card:focus-visible .card-visual { transform: translateY(-.45rem) rotate(2deg) scale(1.05); }
.card-visual svg { display: block; width: 100%; overflow: visible; }
.icon-back,.icon-book { fill: #fffdf7; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }
.icon-line,.icon-spine,.icon-letter { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
.icon-route { fill: none; stroke: var(--accent-two); stroke-dasharray: 7 9; stroke-linecap: round; stroke-width: 6; }
.icon-dot,.icon-pin,.icon-pop { fill: var(--accent); stroke: var(--ink); stroke-width: 6; }
.icon-hole { fill: #fffdf7; stroke: var(--ink); stroke-width: 5; }
.icon-pop-line { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.icon-brain { fill: #ffa3c2; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }
.icon-brain.right { fill: #ffbed3; }
.icon-thought,.icon-spark-line { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.icon-spark { fill: var(--yellow); stroke: var(--ink); stroke-width: 5; }
.letter-one { stroke: var(--accent-two); }
.letter-two { stroke: var(--accent); }
.game-card--hersenen:hover .icon-brain,.game-card--hersenen:focus-within .icon-brain { transform-box: fill-box; transform-origin: center; animation: brain-think 900ms ease-in-out infinite alternate; }
.game-card--hersenen:hover .icon-brain.right,.game-card--hersenen:focus-within .icon-brain.right { animation-delay: -300ms; }
.game-card--hersenen:hover .icon-spark,.game-card--hersenen:focus-within .icon-spark { transform-box: fill-box; transform-origin: center; animation: idea-pop 650ms ease-in-out infinite alternate; }
.game-card--taal:hover .icon-book,.game-card--taal:focus-visible .icon-book { transform-box: fill-box; transform-origin: center bottom; animation: book-bounce 700ms ease-in-out infinite alternate; }
.game-card--taal:hover .icon-pop,.game-card--taal:focus-visible .icon-pop { transform-box: fill-box; transform-origin: center; animation: idea-pop 650ms ease-in-out infinite alternate; }
.game-card--topo:hover .icon-route,.game-card--topo:focus-visible .icon-route { animation: route-run 850ms linear infinite; }
.game-card--topo:hover .icon-pin,.game-card--topo:focus-visible .icon-pin { transform-box: fill-box; transform-origin: center bottom; animation: pin-hop 620ms ease-in-out infinite alternate; }
.footer { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-top: auto; padding: 2rem 0 .25rem; color: rgba(255,255,255,.5); font-size: .76rem; font-weight: 400; }
.footer-dot { width: .25rem; height: .25rem; border-radius: 50%; background: var(--yellow); }
.hub-level-shell { width: min(100%,43rem); display: flex; align-items: stretch; margin: 1.25rem auto .25rem; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 1.25rem; color: #fff; background: rgba(15,23,67,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1rem 2.5rem rgba(5,10,40,.2); backdrop-filter: blur(12px); }
.hub-level-card { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .9rem; padding: .85rem 1rem; }
.hub-level-card[hidden] { display: none; }
.hub-level-card:not([hidden]) + .ranking-button { flex: 0 0 auto; }
.hub-level-badge { width: 3.7rem; height: 3.7rem; display: grid; place-items: center; border: 4px solid rgba(255,255,255,.88); border-radius: 50%; color: #172e53; background: #ffd447; box-shadow: 0 6px 0 rgba(4,10,38,.22); font: 900 1.35rem/1 "Outfit",sans-serif; }
.hub-level-content { min-width: 0; text-align: left; }
.hub-level-heading { display: flex; align-items: end; justify-content: space-between; gap: .75rem; }
.hub-level-heading > div { display: grid; }
.hub-level-heading small { color: rgba(255,255,255,.58); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hub-level-heading strong { font: 900 1.1rem/1.15 "Outfit","Outfit", system-ui,sans-serif; }
.hub-level-heading b { white-space: nowrap; color: #ffd447; font-size: .82rem; }
.hub-level-bar { height: .58rem; overflow: hidden; margin: .48rem 0 .3rem; border-radius: 999px; background: rgba(255,255,255,.14); }
.hub-level-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9a67f8,#5bc7ff,#ffd447); transition: width 700ms ease; }
.hub-level-card p { margin: 0; color: rgba(255,255,255,.65); font-size: .7rem; font-weight: 400; }
.hub-level-card p strong { color: #fff; }
.xp-ranking-dialog { width: min(calc(100% - 2rem),40rem); max-height: min(52rem,calc(100dvh - 2rem)); overflow: hidden; border: 0; border-radius: 2rem; padding: 0; color: var(--ink); background: transparent; box-shadow: 0 2rem 6rem rgba(3,8,35,.55); }
.xp-ranking-dialog::backdrop { background: rgba(7,13,47,.76); backdrop-filter: blur(8px); }
.xp-ranking-dialog[open] { animation: dialog-in 300ms cubic-bezier(.2,.85,.25,1) both; }
.xp-ranking-card { position: relative; max-height: min(52rem,calc(100dvh - 2rem)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 2rem; padding: clamp(1.35rem,4vw,2.25rem); background: radial-gradient(circle at 93% 6%,rgba(255,212,71,.35),transparent 10rem),linear-gradient(145deg,#fff1f6,#fffdf7 68%); box-shadow: inset 0 1px 0 #fff; }
.xp-ranking-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; color: var(--ink); background: rgba(20,32,78,.08); cursor: pointer; }
.xp-ranking-close svg { width: 1.05rem; height: 1.05rem; display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 3.2; }
.xp-ranking-close:hover,.xp-ranking-close:focus-visible { outline: 3px solid rgba(154,103,248,.25); background: rgba(20,32,78,.14); }
.xp-ranking-eyebrow { margin: 0; color: #8b57e8; font-size: .72rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.xp-ranking-card h2 { margin: .1rem 0 0; font-size: clamp(2.5rem,8vw,3.7rem); line-height: .95; }
.xp-ranking-intro { max-width: 31rem; margin: .35rem 0 .8rem; color: rgba(20,32,78,.62); font-size: .84rem; font-weight: 400; line-height: 1.45; }
.xp-ranking-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1.25fr; align-items: center; gap: .45rem; margin-bottom: .65rem; border-radius: 1rem; padding: .6rem .7rem; background: rgba(154,103,248,.08); }
.xp-ranking-steps > span { min-width: 0; display: flex; align-items: center; gap: .4rem; }
.xp-ranking-steps b { font-size: .92rem; }
.xp-ranking-steps small { color: rgba(20,32,78,.72); font-size: .68rem; font-weight: 700; line-height: 1.1; }
.xp-ranking-steps > i { color: #9a67f8; font-style: normal; font-weight: 900; }
.xp-level-guide { flex: 0 0 auto; margin-bottom: .75rem; border: 1px solid rgba(118,80,189,.18); border-radius: 1rem; background: rgba(255,255,255,.58); }
.xp-level-guide summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; cursor: pointer; list-style: none; }
.xp-level-guide summary::-webkit-details-marker { display: none; }
.xp-level-guide summary > span { display: grid; text-align: left; }
.xp-level-guide summary strong { font-size: .78rem; }
.xp-level-guide summary small { color: rgba(20,32,78,.56); font-size: .65rem; font-weight: 400; }
.xp-level-guide summary > b { width: 1.65rem; height: 1.65rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #7650bd; transition: transform 180ms ease; }
.xp-level-guide[open] summary > b { transform: rotate(45deg); }
.xp-level-grid { max-height: 12rem; overflow: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; border-top: 1px solid rgba(118,80,189,.12); padding: .65rem; }
.xp-level-grid article { display: grid; grid-template-columns: 1.8rem minmax(0,1fr); align-items: center; gap: .45rem; border-radius: .7rem; padding: .45rem; background: rgba(154,103,248,.07); }
.xp-level-grid article > span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#8b57e8,#59339f); font-size: .7rem; font-weight: 900; }
.xp-level-grid article > div { min-width: 0; display: grid; text-align: left; }
.xp-level-grid article strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.xp-level-grid article small { color: rgba(20,32,78,.55); font-size: .6rem; font-weight: 400; }
.xp-ranking-list { min-height: 8rem; overflow: auto; display: grid; gap: .55rem; margin: 0; padding: .15rem .25rem .25rem 0; list-style: none; scrollbar-color: rgba(20,32,78,.25) transparent; }
.xp-ranking-row { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) auto; grid-template-rows: auto .3rem; align-items: center; gap: .28rem .75rem; border: 1px solid rgba(20,32,78,.08); border-radius: 1rem; padding: .68rem .8rem; background: rgba(255,255,255,.78); box-shadow: 0 .35rem 1rem rgba(20,32,78,.06); }
.xp-ranking-row.is-top-1 { border-color: rgba(224,173,8,.42); background: linear-gradient(135deg,#fff9d9,#fffdf7 58%,#f8efff); }
.xp-ranking-row.is-top-2 { border-color: rgba(149,160,181,.32); background: linear-gradient(135deg,#f5f7fb,#fff); }
.xp-ranking-row.is-top-3 { border-color: rgba(179,92,39,.3); background: linear-gradient(135deg,#fff1e5,#fff); }
.xp-ranking-row.is-current-player { border-color: #9a67f8; box-shadow: inset 0 0 0 2px rgba(154,103,248,.22),0 .45rem 1rem rgba(20,32,78,.08); }
.xp-ranking-rank { display: grid; place-items: center; color: rgba(20,32,78,.72); font-size: 1.15rem; font-weight: 900; }
.xp-ranking-person { min-width: 0; display: grid; text-align: left; }
.xp-ranking-name { min-width: 0; display: flex; align-items: center; gap: .4rem; }
.xp-ranking-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 1rem/1.15 "Outfit",sans-serif; }
.xp-ranking-person small { color: #7650bd; font-size: .68rem; font-weight: 900; }
.xp-ranking-name em { border-radius: 999px; padding: .18rem .38rem; color: #fff; background: #7650bd; font-size: .55rem; font-style: normal; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.xp-ranking-xp { white-space: nowrap; color: #172e53; font-size: .95rem; }
.xp-ranking-xp small { color: #8b57e8; font-size: .65rem; }
.xp-ranking-progress { grid-column: 2 / -1; grid-row: 2; height: .3rem; overflow: hidden; border-radius: 999px; background: rgba(62,45,102,.1); }
.xp-ranking-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7650bd,#2b9bd3,#ffd447); }
.xp-ranking-person .xp-ranking-next { margin-top: .08rem; color: rgba(20,32,78,.52); font-size: .6rem; font-weight: 400; }
.xp-ranking-status { padding: 2rem 1rem; color: rgba(20,32,78,.58); font-weight: 400; text-align: center; }
.name-dialog { width: min(calc(100% - 2rem),29rem); max-height: calc(100dvh - 2rem); overflow: visible; border: 0; border-radius: 2rem; padding: 0; color: var(--ink); background: transparent; box-shadow: 0 2rem 6rem rgba(3,8,35,.55); }
.name-dialog::backdrop { background: rgba(7,13,47,.74); backdrop-filter: blur(8px); }
.name-dialog[open] { animation: dialog-in 300ms cubic-bezier(.2,.85,.25,1) both; }
.name-card { position: relative; display: flex; flex-direction: column; align-items: stretch; overflow: visible; border: 1px solid rgba(255,255,255,.8); border-radius: 2rem; padding: clamp(1.5rem,5vw,2.5rem); background: radial-gradient(circle at 94% 8%,rgba(255,212,71,.32),transparent 9rem),linear-gradient(145deg,#fff1f6,#fffdf7 72%); box-shadow: inset 0 1px 0 #fff; }
.name-card::after { position: absolute; right: 0; bottom: 0; width: 9rem; aspect-ratio: 1; content: ""; border-radius: 100% 0 2rem 0; background: #ff9ebe; opacity: .18; pointer-events: none; }
.name-dialog-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; color: var(--ink); background: rgba(20,32,78,.08); font: 800 1.5rem/1 "Outfit",sans-serif; cursor: pointer; }
.name-dialog-close[hidden] { display: none; }
.name-dialog-close:hover,.name-dialog-close:focus-visible { outline: 3px solid rgba(154,103,248,.25); background: rgba(20,32,78,.14); }
.name-spark { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 1.15rem; color: var(--navy); background: var(--yellow); box-shadow: 0 8px 0 rgba(20,32,78,.1); font-size: 1.6rem; transform: rotate(-4deg); }
.name-eyebrow { margin: 0 0 .25rem; color: #8b57e8; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.name-card h2 { margin: 0; font-size: clamp(2.5rem,8vw,3.8rem); line-height: .95; }
.name-card > p:not(.name-eyebrow):not(.name-error) { max-width: 22rem; margin: .7rem 0 1.25rem; color: rgba(20,32,78,.68); font-size: .95rem; font-weight: 400; line-height: 1.45; }
.name-card label { margin-bottom: .38rem; font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.name-card input { position: relative; z-index: 1; width: 100%; border: 2px solid rgba(20,32,78,.15); border-radius: 1rem; padding: .9rem 1rem; color: var(--ink); background: rgba(255,255,255,.86); font: 400 1.05rem/1.2 "Outfit",sans-serif; box-shadow: inset 0 2px 4px rgba(20,32,78,.05); }
.name-card input:focus { outline: 4px solid rgba(154,103,248,.18); border-color: #9a67f8; }
.hub-name-combobox { position: relative; z-index: 3; }
.hub-name-suggestions { position: absolute; z-index: 4; top: calc(100% + .35rem); left: 0; right: 0; max-height: min(17rem,38vh); overflow: auto; border: 2px solid rgba(20,32,78,.12); border-radius: 1rem; padding: .35rem; background: #fff; box-shadow: 0 1rem 2.5rem rgba(20,32,78,.2); }
.hub-name-suggestions button { display: block; width: 100%; border: 0; border-radius: .7rem; padding: .72rem .85rem; color: var(--ink); background: transparent; font: 900 1rem/1.15 "Outfit",sans-serif; text-align: left; cursor: pointer; }
.hub-name-suggestions button:hover,.hub-name-suggestions button:focus-visible { outline: none; background: #fff3bd; }
.name-error { min-height: 1.2rem; margin: .35rem 0 0; color: rgba(20,32,78,.62); font-size: .76rem; font-weight: 400; }
.name-save { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-radius: 999px; padding: .72rem .75rem .72rem 1.15rem; color: #fff; background: var(--ink); font: 900 .95rem/1 "Outfit",sans-serif; cursor: pointer; box-shadow: 0 8px 0 rgba(20,32,78,.13); }
.name-save b { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--yellow); transition: transform 180ms ease; }
.name-save:hover b,.name-save:focus-visible b { transform: translateX(3px); }
.name-card small { position: relative; z-index: 1; margin-top: 1rem; color: rgba(20,32,78,.46); font-size: .68rem; font-weight: 400; text-align: center; }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.78) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(12deg); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(1rem) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes brain-think { to { transform: scale(1.035) translateY(-1px); } }
@keyframes idea-pop { to { transform: scale(1.22) rotate(8deg); } }
@keyframes book-bounce { to { transform: translateY(-3px) scaleX(1.025); } }
@keyframes route-run { to { stroke-dashoffset: -32; } }
@keyframes pin-hop { to { transform: translateY(-5px) rotate(2deg); } }
@media (max-width: 900px) {
  .topbar-actions { flex-direction: column-reverse; align-items: flex-end; }
  .hero { margin-top: 2rem; }
  .game-grid { grid-template-columns: 1fr; }
  .game-grid[data-visible-count] { grid-template-columns: 1fr; }
  .game-card { min-height: 32rem; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .hero { margin-top: .9rem; margin-bottom: 1rem; }
  h1 { font-size: clamp(3.2rem,5vw,4.8rem); }
  .intro { margin-top: .55rem; }
  .game-card { min-height: 31rem; padding-top: 1.35rem; padding-bottom: 1.35rem; }
}
@media (min-width: 901px) {
  .xp-ranking-dialog { width: min(calc(100% - 4rem),58rem); max-height: min(54rem,calc(100dvh - 4rem)); }
  .xp-ranking-card { max-height: min(54rem,calc(100dvh - 4rem)); padding: 2.4rem 2.7rem; }
  .xp-ranking-card h2 { font-size: 4.4rem; }
  .xp-ranking-intro { margin-bottom: .85rem; font-size: 1rem; }
  .xp-ranking-list { gap: .7rem; padding-right: .5rem; }
  .xp-ranking-row { min-height: 4.6rem; grid-template-columns: 3.2rem minmax(0,1fr) auto; gap: 1rem; border-radius: 1.15rem; padding: .8rem 1.15rem; }
  .xp-ranking-rank { font-size: 1.35rem; }
  .xp-ranking-person strong { font-size: 1.2rem; }
  .xp-ranking-person small { margin-top: .1rem; font-size: .76rem; }
  .xp-ranking-xp { font-size: 1.12rem; }
  .xp-ranking-xp small { font-size: .72rem; }
}
@media (max-width: 560px) {
  .access-page { padding: .85rem; }
  .access-brand span { display: none; }
  .access-card { margin-top: .75rem; border-radius: 1.65rem; }
  .hub { padding-inline: .85rem; }
  .brand span:last-child { display: none; }
  .game-count { font-size: .7rem; }
  .topbar-actions.has-player .game-count { display: none; }
  .player-button { max-width: 10rem; font-size: .72rem; }
  .hero { margin: 1.6rem auto 1.25rem; }
  h1 { font-size: clamp(3rem,16vw,4.8rem); }
  .jump-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.2rem; color: var(--yellow); font-size: .85rem; font-weight: 900; text-decoration: none; }
  .hub-level-shell { flex-direction: column; }
  .ranking-button { min-height: 2.75rem; border-top: 1px solid rgba(255,255,255,.14); border-left: 0; border-radius: 0; padding: .65rem .8rem; }
  .xp-ranking-dialog,.xp-ranking-card { border-radius: 1.5rem; }
  .xp-ranking-card { padding: 1.25rem 1rem; }
  .xp-ranking-steps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; }
  .xp-ranking-steps > i { display: none; }
  .xp-ranking-steps > span { justify-content: center; }
  .xp-ranking-steps small { font-size: .6rem; }
  .xp-level-grid { grid-template-columns: 1fr; }
  .xp-ranking-row { grid-template-columns: 2rem minmax(0,1fr) auto; gap: .5rem; padding: .65rem .6rem; }
  .game-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; padding: 0 .1rem .35rem; }
  .filter-button { width: 100%; min-height: 2.75rem; padding-inline: .65rem; }
  .filter-result { display: none; }
  .game-card { min-height: 33rem; grid-template-columns: 1fr; grid-template-rows: auto 9rem 1fr; padding: 1.15rem; border-radius: 1.7rem; }
  .card-visual { grid-column: 1; grid-row: 2; width: 9.5rem; margin: 0 auto -.5rem; }
  .card-content { grid-column: 1; grid-row: 3; padding-top: 0; }
  .game-card h2 { font-size: 2.65rem; }
  .description { font-size: .9rem; }
  .footer { flex-direction: column; gap: .2rem; text-align: center; }
  .footer-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Bewaard voor eventueel later gebruik; het donkere thema staat nu uit. */
@media (prefers-color-scheme: dark) and (width < 0px) {
  :root { color-scheme: dark; }
  body {
    background: radial-gradient(circle at 12% 12%,rgba(65,171,255,.16),transparent 28rem),radial-gradient(circle at 86% 18%,rgba(255,84,125,.12),transparent 26rem),linear-gradient(145deg,#070a19 0%,#0e1533 56%,#101b3d 100%);
  }
  body::before { opacity: .12; }
  .game-card {
    color: #f4f2ff;
    border-color: rgba(194,202,255,.18);
    background: radial-gradient(circle at 92% 20%,rgba(255,255,255,.08),transparent 11rem),linear-gradient(145deg,color-mix(in srgb,var(--card-bg) 22%,#202741),#202742 72%);
    box-shadow: 0 1.4rem 3.5rem rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
  }
  .game-card::after { background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 48%,transparent 66%); }
  .game-card h2 { color: #fff; }
  .game-card .description { color: rgba(235,238,255,.72); }
  .game-card .tags span { border-color: rgba(215,220,255,.13); background: rgba(255,255,255,.07); }
  .game-card .mini-arrow { border-color: rgba(226,230,255,.18); }
  .game-card .new-theme-label { color: #151936; background: #f1efff; }
  .game-card:hover .mini-arrow,.game-card:focus-visible .mini-arrow { color: #151936; background: #f1efff; }
  .personal-progress { border-color: rgba(101,220,134,.22); background: linear-gradient(135deg,rgba(33,82,56,.72),rgba(255,255,255,.05)); box-shadow: 0 7px 18px rgba(0,0,0,.22); }
  .personal-progress .progress-label { color: #77e89a; }
  .personal-progress strong { color: rgba(239,244,255,.8); }
  .access-card,.name-card {
    color: #f2f0ff;
    border-color: rgba(206,211,255,.2);
    background: radial-gradient(circle at 94% 8%,rgba(255,212,71,.15),transparent 10rem),linear-gradient(145deg,#33263e,#202641 72%);
    box-shadow: 0 2rem 6rem rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08);
  }
  .access-card::after,.name-card::after { opacity: .1; }
  .access-eyebrow,.name-eyebrow { color: #bb9bff; }
  .access-card h1,.name-card h2 { color: #fff; }
  .access-intro,.name-card > p:not(.name-eyebrow):not(.name-error) { color: rgba(230,233,255,.7); }
  .access-card input,.name-card input { color: #f7f6ff; border-color: rgba(194,202,255,.2); background: rgba(6,9,25,.62); box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
  .access-card input::placeholder,.name-card input::placeholder { color: rgba(223,226,248,.42); }
  .access-card button,.name-save { color: #11152b; background: #f1efff; box-shadow: 0 8px 0 rgba(0,0,0,.24); }
  .access-card small,.name-card small { color: rgba(224,228,255,.48); }
  .name-dialog-close { color: #f2f0ff; background: rgba(255,255,255,.08); }
  .name-dialog-close:hover,.name-dialog-close:focus-visible { background: rgba(255,255,255,.14); }
}

.player-presence { max-width: 40rem; margin: 1.2rem auto .8rem; padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.2rem; background: rgba(255,255,255,.06); text-align: left; }
.presence-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .85rem; }
#presenceCount { color: #9de8bb; font-size: .75rem; white-space: nowrap; }
#presencePlayers { display: grid; grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); gap: .5rem 1.2rem; max-height: 13rem; overflow-y: auto; list-style: none; padding: 0; margin: .75rem 0 0; }
.presence-player { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .78rem; }
.presence-player strong { overflow-wrap: anywhere; }
.presence-player > span:last-child { margin-left: auto; color: rgba(255,255,255,.65); font-size: .72rem; white-space: nowrap; }
.presence-dot { width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.3); }
.is-online .presence-dot { background: #81e6a9; box-shadow: 0 0 0 3px rgba(129,230,169,.12); }
.is-online > span:last-child { color: #9de8bb; }
.presence-message { color: rgba(255,255,255,.65); font-size: .78rem; }

/* Een compact, zelfstandig overzicht van de spelers van vandaag. */
.player-presence { max-width: 43rem; margin: 1.2rem auto .8rem; padding: .9rem 1rem; border-color: rgba(255,255,255,.12); background: rgba(15,23,67,.3); }
.presence-heading { font-size: .8rem; }
#presenceCount { padding: .25rem .55rem; border-radius: 999px; background: rgba(129,230,169,.1); font-size: .7rem; }
#presenceCount:empty { display: none; }
#presencePlayers { display: flex; flex-wrap: wrap; gap: .5rem; max-height: 12rem; margin-top: .7rem; }
.presence-player { display: grid; grid-template-columns: .45rem minmax(0,1fr); column-gap: .5rem; row-gap: .15rem; flex: 1 1 8.5rem; max-width: 12rem; padding: .6rem .75rem; border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; background: rgba(255,255,255,.035); }
.presence-player strong { font-size: .8rem; line-height: 1.25; }
.presence-dot { align-self: center; }
.presence-player > span:last-child { grid-column: 2; margin-left: 0; font-size: .68rem; }
.presence-player.is-online { border-color: rgba(129,230,169,.22); background: rgba(129,230,169,.06); }
@media (max-width: 480px) {
  .player-presence { padding: .85rem; }
  .presence-player { max-width: none; flex-basis: 7rem; }
}

/* One collectible game album per player in the Gameplein ranking. */
.xp-ranking-row { grid-template-rows: auto auto .3rem; }
.xp-ranking-row > .xp-ranking-rank { grid-column: 1; grid-row: 1; }
.xp-ranking-row > .xp-ranking-person { grid-column: 2; grid-row: 1; }
.xp-ranking-row > .xp-ranking-xp { grid-column: 3; grid-row: 1; }
.xp-ranking-row > .xp-ranking-progress { grid-row: 3; }
.ranking-album { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 12px; margin: 5px 0; border: 1px solid #ded2ef; border-radius: 12px; color: #56347d; background: linear-gradient(120deg,#eee5fc,#fffaf1); text-decoration: none; transition: border-color 150ms ease; }
.ranking-album:hover { border-color: #9974c1; }
.ranking-album:focus-visible { outline: 3px solid #9974c1; outline-offset: 3px; }
.ranking-album-cover { flex: 0 0 44px; display: grid; align-content: center; justify-items: center; gap: 2px; height: 56px; border: 1px solid #a17ac3; border-left: 5px solid #593879; border-radius: 3px 7px 7px 3px; color: #ffe29a; background: linear-gradient(145deg,#9461bd,#573379); box-shadow: 3px 3px 0 #d7c3a1; transform: rotate(-5deg); }
.ranking-album-cover > span { font-size: 1rem; }
.ranking-album-cover b { font-size: .48rem; line-height: 1.15; text-align: center; letter-spacing: .06em; }
.ranking-album-info { display: grid; gap: 4px; min-width: 0; }
.ranking-album-info strong { font-size: .82rem; }
.ranking-album-info small { font-size: .7rem; color: #80659c; }
.ranking-album-arrow { margin-left: auto; font-size: 1.2rem; }
.ranking-album.is-complete { border-color: #dfbc58; background: linear-gradient(120deg,#fff0bf,#fffaf1); }
@media (max-width: 560px) { .ranking-album { grid-column: 1 / -1; } .xp-ranking-row > .xp-ranking-progress { grid-column: 1 / -1; } }

/* Keep collection content inside its own ranking row while the list scrolls. */
.xp-ranking-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .7rem;
  min-height: 8rem;
  overflow-y: auto;
}
.xp-ranking-list > li {
  flex: 0 0 auto;
}
.xp-ranking-list > .xp-ranking-row {
  height: auto;
  grid-template-rows: max-content max-content .3rem;
  align-content: start;
  row-gap: .65rem;
}
.xp-ranking-row > .ranking-album {
  position: relative;
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;
  min-height: 76px;
  margin: 0;
  color: #56347d;
  background: linear-gradient(120deg,#eee5fc,#fffaf1);
}
.ranking-album-info strong { color: #56347d; }
.ranking-album-info small { color: #735488; }
@media (max-width: 560px) {
  .xp-ranking-row > .ranking-album { grid-column: 1 / -1; }
}

/* The album shelf grows as more games offer collectible albums. */
.xp-ranking-row > .ranking-albums { grid-column: 2 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; min-width: 0; }
.ranking-albums > .ranking-album { position: relative; display: flex; width: 100%; min-height: 76px; margin: 0; font: inherit; text-align: left; cursor: pointer; }
.ranking-album-cover { padding: 3px; }
.hub-album-dialog { width: min(900px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 2px solid #dfc379; border-radius: 24px; padding: clamp(16px, 4vw, 30px); color: #26314f; background: linear-gradient(135deg,#fff6de,#fbf7ff); box-shadow: 0 24px 80px #080d3755; }
.hub-album-dialog::backdrop { background: #080d37b8; backdrop-filter: blur(7px); }
.hub-album-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hub-album-heading p { margin: 0 0 6px; color: #8960b6; font-size: .65rem; font-weight: 900; letter-spacing: .1em; }
.hub-album-heading h2 { margin: 0; color: #35254f; font: 900 clamp(1.4rem,4vw,2rem)/1.15 "Outfit", sans-serif; }
.hub-album-heading button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: #7650bd; font-size: 1.6rem; cursor: pointer; }
#hubAlbumStatus { color: #735488; font-weight: 800; }
.hub-album-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.hub-album-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border: 2px solid #dcb74a; border-radius: 14px; color: #5b4080; background: #fffaf0; box-shadow: 0 3px 0 #d3b768; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.hub-album-card img, .hub-card-back { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; }
.hub-album-card.is-locked { opacity: 1; cursor: default; color: #89749e; border: 2px dashed #c8b7dd; box-shadow: none; background: #ede6f5; }
.hub-card-back { display: grid; place-items: center; color: #baa5ce; background: repeating-linear-gradient(135deg,#e4d9ef,#e4d9ef 8px,#ece3f4 8px,#ece3f4 16px); font-size: 2rem; }
.hub-album-card.is-earned:hover { border-color: #9d782a; }
.hub-card-dialog { width: min(650px,calc(100% - 24px)); }
#hubCardImage { display: block; width: 100%; max-height: 70dvh; object-fit: contain; margin-top: 16px; border-radius: 12px; }
@media (max-width: 560px) { .xp-ranking-row > .ranking-albums { grid-column: 1 / -1; } .hub-album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } }

/* Intro left, live players and ranking right on tablet and desktop. */
.hero-copy, .hero-panels { min-width: 0; }
@media (min-width: 768px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px,4vw,60px); max-width: none; text-align: left; margin-top: clamp(24px,4vh,48px); margin-bottom: 32px; }
  .hero .eyebrow { font-size: clamp(.65rem,1vw,.85rem); letter-spacing: .1em; }
  .hero h1 { font-size: clamp(2.5rem,5.2vw,4.8rem); line-height: 1.05; }
  .hero .intro { margin: 18px 0 0; font-size: clamp(.9rem,1.3vw,1.1rem); max-width: 35rem; }
  .hero-panels { display: grid; align-content: center; gap: 14px; }
  .hero-panels .player-presence { width: 100%; max-width: none; margin: 0; }
  .hero-panels #presencePlayers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 180px; }
  .hero-panels .presence-player { max-width: none; min-width: 0; }
  .hero-panels .hub-level-shell { width: 100%; max-width: none; margin: 0; flex-direction: column; }
  .hero-panels .hub-level-card { width: 100%; min-width: 0; padding: 14px; gap: 12px; }
  .hero-panels .hub-level-badge { width: 46px; height: 46px; flex-basis: 46px; font-size: 1.5rem; }
  .hero-panels .hub-level-heading { flex-wrap: wrap; gap: 5px; }
  .hero-panels .hub-level-heading strong { font-size: .95rem; }
  .hero-panels .ranking-button { width: 100%; min-height: 44px; padding: 10px 14px; border-left: 0; border-top: 1px solid #ffffff20; border-radius: 0; justify-content: space-between; }
  .hero > .jump-link { grid-column: 1 / -1; }
}

/* Slightly lighter surfaces for online activity and the ranking panel. */
.hero-panels .player-presence { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.2); }
.hero-panels .presence-player { background: rgba(255,255,255,.065); border-color: rgba(255,255,255,.14); }
.hero-panels .presence-player.is-online { background: rgba(129,230,169,.105); border-color: rgba(129,230,169,.3); }
.hero-panels .hub-level-shell { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); }
.hero-panels .ranking-button { background: rgba(255,255,255,.055); }

/* Frosted surfaces: a more opaque tint with a blurred backdrop. */
.hero-panels .player-presence,
.hero-panels .hub-level-shell { background: rgba(67,71,114,.82); -webkit-backdrop-filter: blur(20px) saturate(115%); backdrop-filter: blur(20px) saturate(115%); }
.hero-panels .presence-player { background: rgba(255,255,255,.075); }
.hero-panels .presence-player.is-online { background: rgba(129,230,169,.12); }

/* Match the activity panels to the blue, lilac, mint and yellow game palette. */
.hero-panels .player-presence {
  background: radial-gradient(ellipse at 100% 0,rgba(105,219,192,.15),transparent 65%),linear-gradient(125deg,rgba(42,75,122,.94),rgba(67,61,113,.94));
  border-color: rgba(128,195,225,.35);
  box-shadow: inset 0 1px 0 #ffffff17,0 12px 28px #070e291c;
}
.hero-panels .presence-player { background: rgba(182,198,255,.07); border-color: rgba(188,199,242,.17); }
.hero-panels .presence-player.is-online { background: linear-gradient(110deg,rgba(91,201,171,.19),rgba(120,190,221,.1)); border-color: rgba(133,233,191,.35); }
.hero-panels #presenceCount { color: #a6f3cc; background: rgba(93,211,168,.15); }
.hero-panels .hub-level-shell {
  background: radial-gradient(ellipse at 100% 0,rgba(248,196,102,.14),transparent 65%),linear-gradient(125deg,rgba(94,65,137,.95),rgba(52,64,117,.95));
  border-color: rgba(183,151,232,.4);
  box-shadow: inset 0 1px 0 #ffffff1c,0 12px 28px #070e291c;
}
.hero-panels .hub-level-heading small { color: #d5c3ed; }
.hero-panels .ranking-button { color: #ffe18a; background: linear-gradient(100deg,rgba(163,109,219,.13),rgba(255,213,95,.09)); border-top-color: rgba(210,181,237,.2); }
.hero-panels .ranking-button:hover { background: linear-gradient(100deg,rgba(163,109,219,.22),rgba(255,213,95,.15)); }

/* Light, pastel surfaces in the same family as the game cards. */
.hero-panels .player-presence {
  color: #26314f; border-color: #ffffffcc;
  background: radial-gradient(ellipse at 100% 0,#e0f7f188,transparent 65%),linear-gradient(135deg,#f1efffF5,#fffdf8F5);
  box-shadow: inset 0 1px 0 #fff,0 12px 30px #080f2b20;
}
.hero-panels .presence-player { color:#26314f; background:rgba(255,255,255,.7); border-color:#6a4c931c; }
.hero-panels .presence-player > span:last-child, .hero-panels .presence-message { color:#788097; }
.hero-panels .presence-player.is-online { background:linear-gradient(110deg,#e0f7e9,#eefaf3); border-color:#8fcaa7; }
.hero-panels .presence-player.is-online > span:last-child { color:#398156; }
.hero-panels .presence-dot { background:#a8aec0; }
.hero-panels .is-online .presence-dot { background:#3cba79; box-shadow:0 0 0 3px #3cba7919; }
.hero-panels #presenceCount { color:#32784e; background:#dcefe3; }
.hero-panels .hub-level-shell {
  color:#26314f; border-color:#ffffffcc;
  background:radial-gradient(ellipse at 100% 0,#fff0c188,transparent 65%),linear-gradient(135deg,#f0eaffF5,#fffdf8F5);
  box-shadow:inset 0 1px 0 #fff,0 12px 30px #080f2b20;
}
.hero-panels .hub-level-heading small { color:#907ba8; }
.hero-panels .hub-level-heading b { color:#8160b4; }
.hero-panels .hub-level-bar { background:#e0daec; }
.hero-panels .hub-level-card p { color:#818399; }
.hero-panels .hub-level-card p strong { color:#53486a; }
.hero-panels .ranking-button { color:#62458b; background:rgba(218,204,239,.27); border-top-color:#6a4c931a; }
.hero-panels .ranking-button:hover { background:rgba(218,204,239,.5); }

/* A quiet canvas keeps the homepage focused on its games. */
body.game-home { background: linear-gradient(160deg, #141c3a 0%, #1c2949 100%); }
body.game-home::before { content: none; }
body.game-home > .sky { display: none; }

/* Personal welcome: a single calm card, with no moving decoration. */
.personal-start { max-width: 35rem; margin-top: 1.25rem; padding: clamp(1rem,2vw,1.4rem); border: 1px solid #ffffff24; border-radius: 1.25rem; background: #ffffff09; }
.personal-start[hidden] { display: none; }
.personal-start-eyebrow { margin: 0 0 .35rem; color: #d0d8ee; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.personal-start h2 { margin: 0 0 .45rem; color: #fffdf7; font: 800 clamp(1.4rem,2.4vw,1.85rem)/1.2 "Outfit",sans-serif; overflow-wrap: anywhere; }
.personal-start p:not(.personal-start-eyebrow) { margin: .4rem 0; font-size: .92rem; line-height: 1.5; color: #edf0f8; }
.personal-start .personal-start-hint { color: #bec9e1 !important; font-size: .82rem !important; }
.personal-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1rem; }
.personal-start-play, .personal-start-actions button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; max-width: 100%; padding: .7rem 1rem; border-radius: .8rem; font: 800 .82rem/1.4 "Outfit",sans-serif; text-decoration: none; text-align: center; overflow-wrap: anywhere; }
.personal-start-play { color: #17213f; background: #ffda65; gap: .65rem; }
.personal-start-actions button { border: 1px solid #ffffff40; color: #fffdf7; background: transparent; cursor: pointer; }
.personal-start-actions button[hidden] { display: none; }
.personal-start-play:hover { background: #ffe48e; }
.personal-start-actions button:hover { background: #ffffff10; }
.personal-start-actions :focus-visible { outline: 3px solid #9cdcff; outline-offset: 3px; }
@media (max-width: 480px) { .personal-start-actions > * { width: 100%; } }

/* The three welcome panels share one quiet surface. */
.game-home :is(.personal-start, .hero-panels .player-presence, .hero-panels .hub-level-shell) {
  color: #fffdf7; background: #ffffff09; border: 1px solid #ffffff24;
  border-radius: 1.25rem; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.game-home .hero-panels .player-presence { padding: clamp(1rem,2vw,1.4rem); }
.game-home .hero-panels .presence-heading { color: #fffdf7; }
.game-home .hero-panels .presence-message,
.game-home .hero-panels .presence-player > span:last-child { color: #bec9e1; }
.game-home .hero-panels .presence-player { color: #edf0f8; background: #ffffff08; border-color: #ffffff24; }
.game-home .hero-panels .presence-player.is-online { color: #edf0f8; background: #75d5a012; border-color: #90e9b840; }
.game-home .hero-panels .presence-player.is-online > span:last-child { color: #b5edcb; }
.game-home .hero-panels #presenceCount { color: #b5edcb; background: #75d5a018; }
.game-home .hero-panels .hub-level-card { padding: clamp(1rem,2vw,1.4rem); }
.game-home .hero-panels .hub-level-heading strong { color: #fffdf7; }
.game-home .hero-panels .hub-level-heading small,
.game-home .hero-panels .hub-level-card p { color: #bec9e1; }
.game-home .hero-panels .hub-level-heading b,
.game-home .hero-panels .hub-level-card p strong { color: #edf0f8; }
.game-home .hero-panels .hub-level-bar { background: #ffffff18; }
.game-home .hero-panels .ranking-button { color: #fffdf7; background: transparent; border-color: #ffffff24; min-height: 48px; }
.game-home .hero-panels .ranking-button:hover { background: #ffffff0d; }
.game-home .hero-panels .ranking-button:focus-visible { outline: 3px solid #9cdcff; outline-offset: -4px; }
/* Pill buttons requested for the homepage filters and personal start actions only. */
.game-home :where(.filter-button,.personal-start-play,#personalStartAlbum){--home-button-face:#34435f;--home-button-edge:#10182e;--home-button-text:#fffdf7}
.game-home :is(.filter-button,.personal-start-play,#personalStartAlbum){
  border:0;border-radius:999px;background:var(--home-button-face);color:var(--home-button-text);
  box-shadow:0 5px 0 var(--home-button-edge);font-weight:800;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.game-home :is(.personal-start-play,.filter-button.is-active){--home-button-face:#ffdc48;--home-button-edge:#c69517;--home-button-text:#192342}
.game-home .personal-start-actions{gap:14px 12px;padding-bottom:5px}
.game-home :is(.personal-start-play,#personalStartAlbum){padding:14px 22px;min-height:48px}
.game-home .filter-button{padding:12px 18px}
.game-home :is(.filter-button,.personal-start-play,#personalStartAlbum):hover{background:var(--home-button-face);transform:translateY(-2px)}
.game-home :is(.filter-button,.personal-start-play,#personalStartAlbum):active{transform:translateY(3px);box-shadow:0 2px 0 var(--home-button-edge)}
.game-home :is(.filter-button,.personal-start-play,#personalStartAlbum):focus-visible{outline:3px solid #9cdcff;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.game-home :is(.filter-button,.personal-start-play,#personalStartAlbum){transition:none;transform:none}}
/* The two requested controls inside the homepage name dialog. */
.game-home #nameDialog :is(.name-save,.name-dialog-close){
  border:0;border-radius:999px;background:#ffdc48;color:#192342;
  box-shadow:0 5px 0 #c69517;font-weight:800;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.game-home #nameDialog .name-save{min-height:48px;padding:14px 22px;gap:16px;line-height:1.3}
.game-home #nameDialog .name-dialog-close{display:grid;place-items:center;padding:0}
.game-home #nameDialog .name-dialog-close[hidden]{display:none}
.game-home #nameDialog :is(.name-save,.name-dialog-close):hover{background:#ffe875;transform:translateY(-2px)}
.game-home #nameDialog :is(.name-save,.name-dialog-close):active{transform:translateY(3px);box-shadow:0 2px 0 #c69517}
.game-home #nameDialog :is(.name-save,.name-dialog-close):focus-visible{outline:3px solid #9a67f8;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.game-home #nameDialog :is(.name-save,.name-dialog-close){transition:none;transform:none}}
/* Play/resume actions on the homepage game cards. */
.game-home a.play-button{background:#ffdc48;color:#192342;border:0;border-radius:999px;box-shadow:0 5px 0 #c69517;padding:14px 22px;min-height:48px;gap:22px;font-weight:800;transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.game-home a.play-button b{width:auto;height:auto;background:transparent;color:inherit;border-radius:0;font-size:1.15em;transform:none}
.game-home a.play-button:hover{background:#ffe875;transform:translateY(-2px)}
.game-home a.play-button:active{transform:translateY(3px);box-shadow:0 2px 0 #c69517}
.game-home a.play-button:focus-visible{outline:3px solid #9a67f8;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.game-home a.play-button{transition:none;transform:none}}