/* ZepZar interface system — shared visual language for the whole hub. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --zz-ink: #f4f6ff;
  --zz-muted: #929bb2;
  --zz-night: #080b14;
  --zz-panel: rgba(17, 22, 37, .84);
  --zz-line: rgba(173, 190, 255, .14);
  --zz-cyan: #55e4f2;
  --zz-lime: #b8f36b;
  --zz-violet: #a68bff;
  --zz-pink: #ff71b8;
  --zz-radius: 24px;
  color-scheme: dark;
}

html { background: var(--zz-night); scroll-behavior: smooth; }
body { color: var(--zz-ink); font-family: 'DM Sans', 'Lexend Deca', sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(85, 228, 242, .3); color: white; }

/* Shared page-to-page motion; navigation script applies these classes. */
body.zz-page-enter { animation: zz-page-enter .48s cubic-bezier(.2,.75,.25,1) both; }
body.zz-page-leaving { pointer-events: none; animation: zz-page-leave .34s cubic-bezier(.65,0,.85,.35) both; }
.zz-transition-overlay { position: fixed; inset: 0; z-index: 99999; overflow: hidden; pointer-events: none; background: rgba(8,7,17,.64); animation: zz-transition-veil .34s cubic-bezier(.55,.05,.8,.4) both; }
.zz-transition-overlay::before { content: ''; position: absolute; inset: -40%; background: linear-gradient(112deg,transparent 39%,rgba(150,111,255,.06) 44%,rgba(173,139,255,.62) 49%,rgba(93,224,205,.54) 51%,rgba(93,224,205,.04) 55%,transparent 61%); transform: translateX(-70%) skewX(-12deg); filter: blur(8px); animation: zz-transition-sweep .34s cubic-bezier(.22,.7,.25,1) both; }
.zz-transition-overlay::after { content: ''; position: absolute; width: 44vw; height: 44vw; top: 50%; left: 50%; border-radius: 50%; background: radial-gradient(circle,rgba(159,118,255,.22),rgba(124,88,225,.08) 38%,transparent 72%); transform: translate(-50%,-50%) scale(.25); animation: zz-transition-bloom .34s ease-out both; }
@keyframes zz-page-enter { from { opacity: .65; transform: translateY(10px) scale(.992); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes zz-page-leave { to { opacity: .28; transform: scale(.986); filter: blur(2px); } }
@keyframes zz-transition-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes zz-transition-sweep { from { transform: translateX(-70%) skewX(-12deg); } to { transform: translateX(70%) skewX(-12deg); } }
@keyframes zz-transition-bloom { 60% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; } to { transform: translate(-50%,-50%) scale(1.65); opacity: 0; } }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--zz-cyan) !important; outline-offset: 3px; }
img { max-width: 100%; }

/* Deep ink backdrop with vivid color pools. */
body:not(.light-theme) { background-color: var(--zz-night); }
body:not(.light-theme)::before { filter: saturate(1.2); }

/* Hub landing page */
.menu-container {
  width: min(760px, 100%) !important;
  padding: clamp(28px, 5vw, 52px) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(170, 190, 255, .2) !important;
  background: linear-gradient(145deg, rgba(23, 31, 52, .96), rgba(10, 14, 25, .95)) !important;
  box-shadow: 0 35px 100px rgba(0,0,0,.55), 0 0 0 8px rgba(255,255,255,.018), 0 0 80px rgba(83, 115, 255, .12) !important;
  text-align: left !important;
}
.menu-container::before { content: 'Z'; position: absolute; right: 34px; top: 18px; font: 700 clamp(90px, 16vw, 170px)/1 'Space Grotesk', sans-serif; color: rgba(255,255,255,.025); pointer-events: none; }
.brand-badge { position: relative; color: #071217 !important; background: var(--zz-cyan) !important; border: 0 !important; border-radius: 999px !important; padding: 8px 14px !important; letter-spacing: .14em !important; }
.brand-badge::before { display: none !important; }
.title { position: relative; max-width: 550px; margin: 8px 0 26px !important; font: 700 clamp(34px, 6vw, 58px)/1.04 'Space Grotesk', sans-serif !important; letter-spacing: -.055em !important; background: linear-gradient(110deg,#fff 10%,#b9c9ff 55%,var(--zz-cyan)) !important; -webkit-background-clip: text !important; }
.nav-links { position: relative; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px !important; }
.nav-group { margin: 0 !important; padding: 14px; border: 1px solid rgba(173,190,255,.1); border-radius: 22px; background: rgba(255,255,255,.025); }
.group-title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px !important; color: #aeb9d0 !important; letter-spacing: .16em !important; }
.group-title::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--zz-violet); box-shadow: 0 0 14px currentColor; }
.nav-group:nth-child(2) .group-title::before { background: var(--zz-cyan); }
.nav-group:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.nav-group:nth-child(3) .group-title { grid-column: 1 / -1; }
.link-btn { min-height: 74px; position: relative; align-items: flex-start !important; text-align: left; padding: 15px 16px 15px 20px !important; border: 1px solid rgba(173,190,255,.12) !important; border-radius: 16px !important; background: linear-gradient(125deg,rgba(36,45,70,.86),rgba(20,26,43,.76)) !important; font-size: 14px !important; }
.link-btn::after { content: '↗'; position: absolute; top: 13px; right: 15px; color: var(--zz-cyan); font-size: 16px; opacity: .7; }
.link-btn::before { width: 3px !important; opacity: .9 !important; border-radius: 3px; }
.link-btn:hover { transform: translateY(-3px) !important; border-color: rgba(85,228,242,.55) !important; background: linear-gradient(125deg,rgba(46,61,95,.95),rgba(22,30,49,.92)) !important; box-shadow: 0 14px 28px rgba(0,0,0,.25),0 0 24px rgba(85,228,242,.08) !important; }
.btn-subtext { color: #8d9bb5 !important; }
.footer-note { margin-top: 24px !important; color: #8794ad !important; text-align: center; letter-spacing: .03em; }
.controls-bar { top: 20px !important; right: 22px !important; }
.toggle-btn { background: rgba(16,22,37,.86) !important; border-color: var(--zz-line) !important; border-radius: 12px !important; color: #dbe2f3 !important; padding: 10px 14px !important; }

/* Ranking, history, victor profile and admin surfaces */
.page-wrapper, .container { width: min(1040px,100%) !important; }
.header-section { position: relative; padding: clamp(24px,4vw,38px) !important; margin: 18px 0 20px !important; border: 1px solid var(--zz-line); border-radius: 30px; background: linear-gradient(120deg,rgba(23,31,52,.97),rgba(15,19,33,.85)) !important; box-shadow: 0 28px 70px rgba(0,0,0,.3); overflow: hidden; }
.header-section::after { content: '01 / COMMUNITY INDEX'; position: absolute; right: 28px; top: 26px; color: rgba(176,193,236,.48); font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.header-section .title, .victors-title h2 { font-family: 'Space Grotesk',sans-serif; text-shadow: 0 12px 32px rgba(75,189,255,.2); }
.header-section .title { font-size: clamp(42px,7vw,70px) !important; }
.names { letter-spacing: .14em !important; }
.stats { gap: 12px !important; }
.stat { border: 1px solid var(--zz-line) !important; border-radius: 16px !important; background: rgba(255,255,255,.045) !important; box-shadow: none !important; }
.stat b { color: var(--zz-cyan) !important; font: 700 22px 'Space Grotesk',sans-serif; }
.nav-tabs { padding: 6px !important; border: 1px solid var(--zz-line); border-radius: 17px; background: rgba(14,19,32,.82) !important; }
.tab-btn { flex: 1; border: 0 !important; border-radius: 12px !important; background: transparent !important; }
.tab-btn.active { background: linear-gradient(110deg,#4cdded,#79edcb) !important; color: #07151a !important; box-shadow: 0 8px 24px rgba(85,228,242,.18) !important; }
.level-card { display: grid !important; grid-template-columns: minmax(250px, .95fr) 1.05fr; gap: 26px !important; padding: 18px !important; border: 1px solid var(--zz-line) !important; border-radius: 25px !important; background: linear-gradient(135deg,rgba(22,29,48,.96),rgba(13,18,31,.94)) !important; box-shadow: 0 20px 48px rgba(0,0,0,.3) !important; }
.level-card:hover { border-color: rgba(85,228,242,.42) !important; transform: translateY(-4px) !important; }
.level-image-wrapper { width: 100% !important; border-radius: 18px !important; box-shadow: none !important; }
.desc { padding: 8px 10px 8px 0; }
.level-name { font: 700 clamp(22px,3vw,31px)/1.12 'Space Grotesk',sans-serif !important; }
.creator { font-size: 15px !important; }
.level-id { color: #a9b3ca !important; background: rgba(4,7,14,.55) !important; }
.diff-tag { border-radius: 999px !important; padding: 7px 12px !important; color: #0b1219 !important; background: var(--zz-lime) !important; border: 0 !important; }
.btn, .btn-proof, .back-btn, .btn-submit { border-radius: 12px !important; font-weight: 700 !important; }
.btn-primary, .btn-submit { background: linear-gradient(110deg,#4cdded,#7ab8ff) !important; color: #07121c !important; box-shadow: 0 8px 22px rgba(85,228,242,.16) !important; }
.btn-secondary { background: rgba(166,139,255,.13) !important; border-color: rgba(166,139,255,.35) !important; }
.btn-ghost { background: rgba(255,255,255,.04) !important; }
.history-table { border-radius: 18px; overflow: hidden; background: rgba(15,20,34,.82); }
.history-table th { color: var(--zz-cyan) !important; text-transform: uppercase; letter-spacing: .1em; }
.history-table th, .history-table td { border-bottom-color: var(--zz-line) !important; }
.level-hero { border: 1px solid var(--zz-line) !important; border-radius: 26px !important; background: linear-gradient(135deg,rgba(22,29,48,.96),rgba(13,18,31,.92)) !important; box-shadow: 0 24px 60px rgba(0,0,0,.32) !important; }
.hero-thumb-wrapper { width: min(32%,280px) !important; border-radius: 18px !important; }
.victors-title { margin: 28px 0 14px !important; font: 700 24px 'Space Grotesk',sans-serif !important; }
.victor-count-badge { background: rgba(184,243,107,.12) !important; color: var(--zz-lime) !important; border-color: rgba(184,243,107,.32) !important; }
.victor-card { border: 1px solid var(--zz-line) !important; border-radius: 17px !important; background: rgba(19,25,41,.9) !important; }
.victor-card .title::before { color: var(--zz-cyan); }
.status-msg, .loading-text { border-color: rgba(166,139,255,.3) !important; border-radius: 18px !important; background: rgba(20,25,42,.8) !important; }
.modal-card, .modal-box { border: 1px solid rgba(173,190,255,.2) !important; border-radius: 24px !important; background: linear-gradient(145deg,#1a2340,#101626) !important; box-shadow: 0 30px 90px rgba(0,0,0,.65) !important; }
.admin-container { width: min(980px,100%) !important; padding: clamp(22px,4vw,42px) !important; border: 1px solid var(--zz-line) !important; border-radius: 30px !important; background: linear-gradient(145deg,rgba(23,31,52,.97),rgba(10,14,25,.96)) !important; box-shadow: 0 30px 90px rgba(0,0,0,.45) !important; }
.admin-container h1 { font: 700 clamp(34px,6vw,54px) 'Space Grotesk',sans-serif !important; }
.admin-container h2 { font-family: 'Space Grotesk',sans-serif; }
.form-section, .manage-item { border-color: var(--zz-line) !important; border-radius: 18px !important; background: rgba(255,255,255,.035) !important; }
input, select, textarea { border-radius: 11px !important; }

/* Kiwi game */
.container { width: min(1040px,100%) !important; }
.container > .card { padding: clamp(20px,4vw,38px) !important; border: 1px solid rgba(189,221,255,.2) !important; border-radius: 30px !important; background: linear-gradient(145deg,rgba(18,32,49,.97),rgba(10,21,34,.97)) !important; box-shadow: 0 30px 90px rgba(0,0,0,.45),0 0 80px rgba(34,197,94,.08) !important; }
.header { padding-bottom: 20px; border-bottom: 1px solid rgba(189,221,255,.13); }
.header h1 { font: 700 clamp(30px,5vw,48px) 'Space Grotesk',sans-serif !important; }
.small-button, .Link1 { border-color: rgba(189,221,255,.2) !important; border-radius: 12px !important; background: rgba(255,255,255,.07) !important; }
.stats .stat { border: 1px solid rgba(189,221,255,.14) !important; border-radius: 18px !important; background: linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035)) !important; }
.stats .stat p { color: #aef078; font: 700 28px 'Space Grotesk',sans-serif !important; }
.game-area { min-height: 360px !important; border: 2px solid rgba(137,255,199,.45) !important; border-radius: 24px !important; background-color: #0d443d !important; background-image: linear-gradient(rgba(134,239,172,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(134,239,172,.1) 1px,transparent 1px),radial-gradient(ellipse at 50% 100%,#167b61,#0b332f 72%) !important; box-shadow: inset 0 0 80px rgba(0,0,0,.25),0 18px 35px rgba(0,0,0,.2); }
.game-area::before { content: 'KIWI ORCHARD  /  LIVE ROUND'; top: 17px; left: 19px; color: rgba(214,255,228,.7); }
.controls button { min-width: 190px; padding: 16px 30px !important; border-radius: 14px !important; background: linear-gradient(110deg,#b8f36b,#52e4a5) !important; color: #102719 !important; box-shadow: 0 10px 28px rgba(72,220,143,.2); }
.message { color: #bdc9d8; font-weight: 600; }

/* Reputation and information pages */
body:has(#leaderboardCard), body:has(.victor-card) { background: radial-gradient(ellipse at 14% 0%,rgba(95,73,205,.21),transparent 38%),radial-gradient(ellipse at 90% 28%,rgba(35,194,210,.12),transparent 35%),#080b14 !important; }
body:has(#leaderboardCard) main { max-width: 1120px !important; padding-top: 22px; }
body:has(#leaderboardCard) .card { padding: clamp(20px,3vw,32px) !important; border: 1px solid var(--zz-line) !important; border-radius: 24px !important; background: linear-gradient(145deg,rgba(22,29,48,.94),rgba(13,18,31,.92)) !important; box-shadow: 0 20px 55px rgba(0,0,0,.25) !important; }
body:has(#leaderboardCard) h1, body:has(#leaderboardCard) h2 { font-family: 'Space Grotesk',sans-serif; }
body:has(#leaderboardCard) table { border-collapse: separate; border-spacing: 0; }
body:has(#leaderboardCard) th { color: #8997b2; text-transform: uppercase; letter-spacing: .12em; }
body:has(#leaderboardCard) th, body:has(#leaderboardCard) td { padding: 15px 12px; border-bottom-color: var(--zz-line); }
body:has(#leaderboardCard) tbody tr:hover { background: rgba(85,228,242,.08) !important; }
body:has(#leaderboardCard) button { border-radius: 12px; background: rgba(85,228,242,.1); }
body:has(.victor-card) { background-size: cover !important; }
body:has(.victors-title) .victor-card { width: auto !important; padding: 18px 24px !important; border-radius: 17px !important; }
body:has(.victor-card):not(:has(.victors-title)) > .victor-card { width: min(680px,100%) !important; padding: clamp(24px,5vw,44px) !important; border-radius: 30px !important; border: 1px solid rgba(195,208,255,.28) !important; background: linear-gradient(145deg,rgba(24,31,49,.96),rgba(11,15,25,.95)) !important; box-shadow: 0 35px 100px rgba(0,0,0,.7) !important; }
body:has(.victor-card) .title { font: 700 clamp(32px,6vw,50px) 'Space Grotesk',sans-serif !important; }
body:has(.victor-card) .victors-list { border: 1px solid var(--zz-line); background: rgba(255,255,255,.045) !important; padding: 30px !important; }
body:has(.victor-card) .victorstext { color: #e0e7f4 !important; font-style: normal !important; font-size: 18px; }
body:has(.victor-card) .total-count { color: #9ca9bf !important; }
body:has(.victor-card) .total-count::before { content: 'ROSTER SIZE  /  '; color: var(--zz-cyan); font-size: 10px; letter-spacing: .12em; }

/* Canvas workspace */
body:has(#auroraCanvas) { background: radial-gradient(ellipse at 50% 0%,rgba(63,111,188,.24),transparent 45%),#080b14 !important; }
body:has(#auroraCanvas) header { position: relative; width: min(1200px,100%); margin: 24px auto 20px; padding: 25px 30px; border: 1px solid var(--zz-line); border-radius: 25px; background: linear-gradient(125deg,rgba(21,29,49,.92),rgba(12,17,30,.83)); }
body:has(#auroraCanvas) header h1 { font: 700 clamp(34px,6vw,56px) 'Space Grotesk',sans-serif !important; }
.canvas-container { border: 1px solid rgba(173,190,255,.2) !important; border-radius: 24px !important; background: rgba(15,20,34,.9) !important; box-shadow: 0 26px 70px rgba(0,0,0,.42) !important; }
.toolbar { padding: 14px !important; gap: 11px !important; border-bottom: 1px solid var(--zz-line); }
.canvas-window { border: 1px solid rgba(85,228,242,.35) !important; border-radius: 17px !important; box-shadow: 0 10px 45px rgba(0,0,0,.38); }
.chat-widget { border: 1px solid rgba(173,190,255,.2) !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.chat-header { background: #18213a !important; }
.online-pill { border: 1px solid rgba(184,243,107,.28); border-radius: 999px; padding: 8px 12px; background: rgba(184,243,107,.08); }

/* Keep the shared canvas aligned with the hub and usable at narrow widths. */
body:has(#auroraCanvas) { width: 100%; max-width: 100%; overflow-x: hidden; overflow-y: auto; }
body:has(#auroraCanvas) header { box-sizing: border-box; }
body:has(#auroraCanvas) .btn-back-index { border: 1px solid var(--zz-line); border-radius: 12px !important; background: rgba(16,22,37,.9) !important; color: var(--zz-ink) !important; }
body:has(#auroraCanvas) .modal-overlay { background: rgba(5,9,18,.56) !important; backdrop-filter: blur(5px); }
body:has(#auroraCanvas) .modal-box { width: min(420px, calc(100vw - 36px)) !important; padding: clamp(24px,5vw,36px) !important; text-align: left; }
body:has(#auroraCanvas) .modal-box h3 { font: 700 24px/1.2 'Space Grotesk',sans-serif; }
body:has(#auroraCanvas) .modal-box p { max-width: 32ch; font-size: 14px !important; line-height: 1.55; }
body:has(#auroraCanvas) #nickInput { margin: 20px 0 12px; min-height: 48px; }
body:has(#auroraCanvas) #btnSaveNick { min-height: 46px; border: 0; border-radius: 12px; background: linear-gradient(110deg,#4cdded,#7ab8ff); color: #07121c; font-weight: 800; }
body:has(#auroraCanvas) .chat-widget { width: min(320px,calc(100vw - 32px)); right: 12px; bottom: 12px; }

/* Make the small standalone pages feel like part of ZepZar. */
body:has(.about-card) { min-height: 100vh; box-sizing: border-box; margin: 0; padding: 24px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 0%,rgba(95,73,205,.24),transparent 44%),#080b14 !important; }

/* Compact standalone victors and about page */
body:has(.about-card) { background: radial-gradient(ellipse at 50% 0%,rgba(95,73,205,.24),transparent 44%),#080b14 !important; }
.about-card { width: min(760px,100%) !important; padding: clamp(28px,6vw,58px) !important; text-align: left !important; border: 1px solid var(--zz-line) !important; border-radius: 32px !important; background: linear-gradient(145deg,rgba(23,31,52,.97),rgba(10,14,25,.96)) !important; box-shadow: 0 35px 100px rgba(0,0,0,.52),0 0 70px rgba(95,73,205,.12) !important; }
.about-kicker { margin: 0 0 18px !important; color: var(--zz-cyan); font-size: 11px !important; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.about-title { margin: 0 0 18px !important; font: 700 clamp(36px,7vw,64px)/1.03 'Space Grotesk',sans-serif !important; letter-spacing: -.05em; }
.about-copy { max-width: 580px; margin: 0 0 30px !important; color: #c1cbe0; font-size: clamp(18px,3vw,25px) !important; line-height: 1.55; }
.back-btn { padding: 13px 20px !important; background: linear-gradient(110deg,#4cdded,#7ab8ff) !important; color: #08131a !important; }

@media (max-width: 720px) {
  .menu-container { padding: 24px 18px !important; border-radius: 25px !important; }
  .nav-links { grid-template-columns: 1fr !important; }
  .nav-group:nth-child(3) { grid-column: auto; }
  .header-section { border-radius: 24px; }
  .header-section::after { display: none; }
  .level-card { grid-template-columns: 1fr !important; gap: 15px !important; }
  .level-image-wrapper { width: 100% !important; }
  .desc { padding: 4px 3px 7px; }
  .hero-thumb-wrapper { width: 100% !important; }
  .level-hero { flex-direction: column; align-items: stretch !important; }
  .victor-card { align-items: flex-start !important; flex-direction: column; gap: 12px; }
  body { padding-left: 14px !important; padding-right: 14px !important; }
  body:has(#auroraCanvas) header { margin-top: 56px; padding: 20px; }
  body:has(#auroraCanvas) .header-sub { flex-wrap: wrap; }
  body:has(#auroraCanvas) .canvas-container { min-width: 0; }
  body:has(.about-card) { padding: 16px; }
}
@media (max-width: 450px) {
  .nav-group:nth-child(3) { grid-template-columns: 1fr; }
  .stats { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nav-tabs { gap: 4px !important; }
  .tab-btn { padding: 11px 8px !important; font-size: 12px !important; }
}

/* ZepZar refresh: a calmer arcade-club look with clearer navigation and less visual noise. */
:root {
  --zz-ink: #f4f5f7;
  --zz-muted: #a8afbc;
  --zz-night: #08090d;
  --zz-panel: #191c21;
  --zz-line: rgba(255,255,255,.1);
  --zz-cyan: #93e6d2;
  --zz-lime: #c6ee75;
  --zz-violet: #b4a5ff;
  --zz-pink: #ff9b82;
  --zz-radius: 20px;
}
html { background: #08090d; }
body:not(.light-theme) { background-color: #08090d; }
body:not(.light-theme)::before { opacity: .45; filter: saturate(.82); }

/* Home hub */
body:has(.menu-container) {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 78px 28px 36px !important;
  background: radial-gradient(ellipse at 14% 12%,rgba(147,230,210,.1),transparent 32%), radial-gradient(ellipse at 82% 28%,rgba(143,92,255,.17),transparent 34%), radial-gradient(ellipse at 72% 92%,rgba(108,76,214,.16),transparent 36%), radial-gradient(ellipse at 5% 78%,rgba(91,66,174,.1),transparent 30%), #07080c !important;
}
.controls-bar { position: fixed; top: 18px !important; right: 22px !important; z-index: 5; }
.toggle-btn { font-size: 12px !important; font-weight: 700; }
.menu-container {
  width: min(1080px,100%) !important;
  padding: clamp(30px,5vw,62px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: linear-gradient(150deg,rgba(29,33,39,.97),rgba(21,24,29,.97)) !important;
  box-shadow: 0 38px 100px rgba(0,0,0,.38) !important;
}
.menu-container::before { right: 30px; top: 18px; color: rgba(255,255,255,.025); }
.brand-badge {
  color: #15201d !important; background: var(--zz-cyan) !important;
  border-radius: 7px !important; padding: 7px 11px !important;
  font-size: 10px !important; letter-spacing: .16em !important;
}
.title {
  max-width: 680px; margin: 17px 0 12px !important;
  font-size: clamp(40px,7vw,76px) !important; line-height: .99 !important;
  letter-spacing: -.065em !important;
  color: #f8f8f5 !important; -webkit-text-fill-color: #f8f8f5 !important;
  background: none !important; -webkit-background-clip: border-box !important;
}
.menu-container > .title::after {
  content: 'A little corner of the internet for friends, games, and shared projects.';
  display: block; max-width: 480px; margin-top: 18px;
  color: #a8afbc; -webkit-text-fill-color: #a8afbc;
  font: 400 clamp(15px,2vw,18px)/1.55 'DM Sans',sans-serif;
  letter-spacing: 0;
}
.nav-links { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; margin-top: 34px; }
.nav-group {
  display: grid; align-content: start; gap: 10px;
  padding: 18px !important; border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important; background: rgba(255,255,255,.025) !important;
}
.group-title { color: #aeb5c0 !important; font-size: 10px !important; letter-spacing: .18em !important; }
.group-title::before { background: var(--zz-cyan) !important; box-shadow: 0 0 12px rgba(147,230,210,.55) !important; }
.nav-group:nth-child(2) .group-title::before { background: var(--zz-violet) !important; }
.nav-group:nth-child(3) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.nav-group:nth-child(3) .group-title { grid-column: 1/-1; }
.link-btn {
  min-height: 86px; padding: 16px 36px 15px 16px !important;
  border-radius: 13px !important; border-color: rgba(255,255,255,.085) !important;
  background: #20242a !important; font-size: 14px !important;
}
.link-btn::before { width: 3px !important; background: var(--zz-cyan) !important; }
.nav-group:nth-child(2) .link-btn::before { background: var(--zz-violet) !important; }
.nav-group:nth-child(3) .link-btn::before { background: var(--zz-lime) !important; }
.link-btn::after { color: #96a19f; }
.btn-subtext { margin-top: 6px !important; color: #9aa2ae !important; font-size: 12px !important; line-height: 1.4; }
.link-btn:hover { transform: translateY(-2px) !important; border-color: rgba(147,230,210,.42) !important; background: #272d32 !important; box-shadow: 0 12px 24px rgba(0,0,0,.2) !important; }
.footer-note { margin: 24px 2px 0 !important; color: #737c89 !important; text-align: left !important; font-size: 12px !important; }

/* Shared surfaces: improve contrast while keeping each page's existing layout and behavior. */
.header-section, .admin-container, .level-hero, .level-card, .modal-card, .modal-box, .about-card, .container > .card {
  box-shadow: 0 24px 64px rgba(0,0,0,.28) !important;
}
.header-section { background: linear-gradient(130deg,#20252b,#191c21) !important; }
.level-card, .level-hero, .admin-container, .about-card, .modal-card, .modal-box {
  background: linear-gradient(145deg,#20252b,#181b20) !important;
}
.stat { background: rgba(255,255,255,.035) !important; }
.btn-primary, .btn-submit, .back-btn { background: linear-gradient(110deg,#93e6d2,#c6ee75) !important; color: #17201b !important; }
.tab-btn.active { background: linear-gradient(110deg,#93e6d2,#c6ee75) !important; }

@media (max-width: 720px) {
  body:has(.menu-container) { padding: 70px 14px 18px !important; }
  .menu-container { padding: 28px 18px !important; }
  .nav-links { grid-template-columns: 1fr !important; margin-top: 26px; }
  .nav-group:nth-child(3) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-note { text-align: center !important; }
}
@media (max-width: 450px) {
  .nav-group:nth-child(3) { grid-template-columns: 1fr !important; }
  .link-btn { min-height: 74px; }
}
/* Ambient color and responsive hover feedback for the hub. */
body:has(.menu-container)::before,
body:has(.menu-container)::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  width: min(72vw, 880px); height: min(72vw, 880px); border-radius: 50%;
  filter: blur(90px); opacity: .2; transform: translate3d(0,0,0);
}
body:has(.menu-container)::before {
  top: -42%; left: -24%;
  background: radial-gradient(circle,rgba(104,220,195,.55),rgba(79,140,132,.18) 34%,transparent 68%);
  animation: zz-glow-drift 18s ease-in-out infinite alternate;
}
body:has(.menu-container)::after {
  top: 25%; right: -30%; width: min(82vw, 980px); height: min(82vw, 980px); opacity: .32;
  background: radial-gradient(circle,rgba(161,119,255,.72),rgba(126,86,237,.32) 29%,rgba(82,60,160,.12) 52%,transparent 72%);
  animation: zz-glow-drift 24s ease-in-out -7s infinite alternate-reverse;
}
.menu-container { isolation: isolate; box-shadow: 0 38px 100px rgba(0,0,0,.38), 0 0 90px rgba(112,75,211,.09) !important; }
.menu-container {
  border-color: rgba(188,177,255,.15) !important;
  background: linear-gradient(145deg,rgba(19,20,27,.985),rgba(12,13,18,.985)) !important;
}
.menu-container::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  opacity: .17;
  background-image: radial-gradient(rgba(255,255,255,.38) .55px,transparent .75px);
  background-size: 5px 5px;
  mask-image: linear-gradient(125deg,rgba(0,0,0,.42),transparent 45%,rgba(0,0,0,.2));
}
.nav-group { transition: border-color .25s ease, background-color .25s ease, transform .25s ease; }
.nav-group:hover { border-color: rgba(255,255,255,.14) !important; background: rgba(255,255,255,.038) !important; }
.nav-group { position: relative; }
.nav-group::after {
  content: ''; position: absolute; top: 18px; right: 18px; width: 34px; height: 2px;
  border-radius: 2px; opacity: .75;
  background: linear-gradient(90deg,transparent,var(--zz-cyan));
}
.nav-group:nth-child(2)::after { background: linear-gradient(90deg,transparent,var(--zz-violet)); }
.nav-group:nth-child(3)::after { background: linear-gradient(90deg,transparent,var(--zz-lime)); }
.group-title { position: relative; }
.group-title::after {
  content: '01'; margin-left: auto; color: rgba(174,181,192,.48);
  font: 600 10px 'Space Grotesk',sans-serif; letter-spacing: .08em;
}
.nav-group:nth-child(2) .group-title::after { content: '02'; }
.nav-group:nth-child(3) .group-title::after { content: '＋'; color: rgba(174,181,192,.65); font-size: 13px; }
.link-btn {
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.75,.25,1), border-color .22s ease,
    background .22s ease, box-shadow .22s ease !important;
}
.link-btn::before {
  z-index: 1; transform: scaleY(.38); transform-origin: center;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.link-btn::after { transition: transform .22s ease, color .22s ease, opacity .22s ease; }
.link-btn:hover, .link-btn:focus-visible {
  transform: translateY(-4px) scale(1.012) !important;
  border-color: rgba(147,230,210,.5) !important;
  background: linear-gradient(120deg,rgba(147,230,210,.1),rgba(161,119,255,.1) 68%,rgba(255,255,255,.045)),#252a30 !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(147,230,210,.08), 0 0 24px rgba(143,92,255,.09), inset 0 1px rgba(255,255,255,.06) !important;
}
.link-btn:hover::before, .link-btn:focus-visible::before {
  transform: scaleY(.82); box-shadow: 0 0 16px rgba(147,230,210,.5); opacity: 1 !important;
}
.link-btn:hover::after, .link-btn:focus-visible::after { transform: translate(3px,-3px); color: var(--zz-cyan); opacity: 1; }
.link-btn:active { transform: translateY(-1px) scale(.995) !important; }
.brand-badge { box-shadow: 0 0 28px rgba(147,230,210,.12); }
.footer-note { position: relative; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.065); }
.toggle-btn { transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease !important; }
.toggle-btn:hover { transform: translateY(-2px); border-color: rgba(147,230,210,.45) !important; color: var(--zz-cyan) !important; }
@keyframes zz-glow-drift {
  from { transform: translate3d(-2%,0,0) scale(.94); }
  to { transform: translate3d(5%,4%,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.menu-container)::before, body:has(.menu-container)::after { animation: none !important; }
  .nav-group, .link-btn, .link-btn::before, .link-btn::after, .toggle-btn { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 2026 hub refresh — explicit content replaces decorative pseudo-copy and gives
   the landing page a clearer reading order. */
.hub-heading { display: flex; align-items: center; gap: 12px; }
.hub-eyebrow { margin: 0; color: #818996; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.hub-intro { position: relative; max-width: 560px; margin: 0; color: #aeb5c0; font-size: clamp(15px,2vw,18px); line-height: 1.55; }
.menu-container > .title::after { display: none !important; }
.menu-container .title { margin-bottom: 14px !important; }
.menu-container .nav-links { margin-top: 32px; }
.footer-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer-note a { color: #b9e9dc; font-weight: 700; text-decoration: none; }
.footer-note a:hover { color: #fff; }

/* A richer, more playful hub layer: bold color, clear icons, and lively detail. */
body:has(.menu-container) {
  background-image:
    radial-gradient(ellipse at 10% 14%,rgba(117,255,218,.2),transparent 31%),
    radial-gradient(ellipse at 87% 22%,rgba(165,105,255,.3),transparent 32%),
    radial-gradient(ellipse at 78% 100%,rgba(255,125,157,.17),transparent 35%),
    linear-gradient(145deg,#08090d,#10101a 56%,#090a10) !important;
}
body:has(.menu-container)::before,
body:has(.menu-container)::after { filter: blur(64px); opacity: .48; }
body:has(.menu-container)::before { width: min(76vw,940px); height: min(76vw,940px); }
body:has(.menu-container)::after { width: min(86vw,1040px); height: min(86vw,1040px); opacity: .5; }
.menu-container {
  border-color: rgba(196,178,255,.28) !important;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(131,91,255,.16),transparent 37%),
    radial-gradient(ellipse at 0% 100%,rgba(67,203,174,.1),transparent 34%),
    linear-gradient(145deg,rgba(22,23,33,.985),rgba(11,12,18,.99)) !important;
  box-shadow: 0 40px 110px rgba(0,0,0,.58),0 0 70px rgba(139,91,255,.19), inset 0 1px rgba(255,255,255,.08) !important;
}
.menu-container::before { color: rgba(180,157,255,.065) !important; }
.hub-heading { flex-wrap: wrap; gap: 12px; }
.hub-count {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 8px 11px;
  border: 1px solid rgba(198,238,117,.28); border-radius: 999px;
  background: rgba(198,238,117,.1); color: #d9f69a; font-size: 11px; font-weight: 800;
  letter-spacing: .025em; box-shadow: 0 0 22px rgba(198,238,117,.1);
}
.hub-count span { color: #f4ffbf; font-size: 14px; }
.hub-orbit {
  position: absolute; top: 72px; right: clamp(32px,7vw,78px); display: grid; width: 126px; height: 126px;
  place-items: center; border: 1px solid rgba(196,178,255,.2); border-radius: 50%;
  background: radial-gradient(circle,rgba(157,117,255,.24),rgba(157,117,255,.04) 63%,transparent 65%);
  color: #eadfff; font-size: 34px; text-shadow: 0 0 24px #a68bff;
  box-shadow: inset 0 0 28px rgba(171,139,255,.13),0 0 38px rgba(148,105,255,.12);
}
.hub-orbit::before, .hub-orbit::after { content: ''; position: absolute; border: 1px solid rgba(183,158,255,.28); border-radius: 50%; transform: rotate(-28deg); }
.hub-orbit::before { width: 168px; height: 62px; }
.hub-orbit::after { width: 62px; height: 168px; }
.hub-orbit i, .hub-orbit b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #c6ee75; box-shadow: 0 0 14px #c6ee75; }
.hub-orbit i { top: 8px; left: 28px; }
.hub-orbit b { right: 5px; bottom: 35px; background: #55e4f2; box-shadow: 0 0 14px #55e4f2; }
.menu-container .title { max-width: 690px; padding-right: 130px; text-shadow: 0 5px 38px rgba(185,155,255,.2); }
.hub-intro { max-width: 600px; color: #c1c3d0; }
.nav-group {
  border-color: rgba(255,255,255,.12) !important;
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.nav-group:hover { transform: translateY(-2px); border-color: rgba(188,170,255,.3) !important; background: rgba(255,255,255,.06) !important; }
.nav-group::after { top: 20px; width: 60px; height: 3px; opacity: 1; }
.group-title { color: #c7c1d5 !important; }
.group-title::before { width: 9px; height: 9px; background: #b49aff !important; box-shadow: 0 0 16px rgba(180,154,255,.9) !important; }
.nav-group:nth-child(2) .group-title::before { background: #55e4f2 !important; box-shadow: 0 0 16px rgba(85,228,242,.85) !important; }
.nav-group:nth-child(3) .group-title::before { background: #c6ee75 !important; box-shadow: 0 0 16px rgba(198,238,117,.85) !important; }
.group-title::after { color: #b9addd; }
.link-btn {
  display: grid !important; grid-template-columns: 46px minmax(0,1fr); align-items: center !important; gap: 12px;
  min-height: 82px; padding: 13px 38px 13px 13px !important;
  border-color: rgba(255,255,255,.1) !important;
  background: linear-gradient(135deg,rgba(43,45,59,.96),rgba(27,28,39,.96)) !important;
}
.nav-icon {
  display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid currentColor;
  border-radius: 14px; background: currentColor; box-shadow: 0 7px 20px rgba(0,0,0,.18);
}
.nav-icon svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-violet { color: #a68bff; background: rgba(166,139,255,.2); }
.icon-lime { color: #c6ee75; background: rgba(198,238,117,.17); }
.icon-cyan { color: #55e4f2; background: rgba(85,228,242,.17); }
.icon-pink { color: #ff71b8; background: rgba(255,113,184,.17); }
.icon-orange { color: #ffad73; background: rgba(255,173,115,.17); }
.link-copy { display: grid; gap: 5px; min-width: 0; }
.link-title { color: #f5f3fa; font-size: 14px; font-weight: 800; line-height: 1.3; }
.btn-subtext { margin: 0 !important; color: #a8a8b8 !important; font-size: 11px !important; line-height: 1.35; }
.link-btn::before { width: 3px !important; transform: scaleY(.45); }
.link-btn:hover, .link-btn:focus-visible {
  transform: translateY(-4px) scale(1.018) !important;
  border-color: rgba(162,226,214,.65) !important;
  background: linear-gradient(120deg,rgba(119,95,201,.26),rgba(52,147,143,.21)),#282a35 !important;
  box-shadow: 0 17px 34px rgba(0,0,0,.38),0 0 30px rgba(137,109,255,.17),inset 0 1px rgba(255,255,255,.1) !important;
}
.link-btn:hover .nav-icon, .link-btn:focus-visible .nav-icon { transform: rotate(-7deg) scale(1.08); box-shadow: 0 0 25px currentColor; }
.nav-icon { transition: transform .22s ease,box-shadow .22s ease; }
.link-btn::after { color: #dbd0ff; font-size: 18px; opacity: .9; }
.footer-note { color: #a0a0b2 !important; border-color: rgba(196,178,255,.16) !important; }
.footer-note a { color: #c6b6ff !important; }
.brand-badge { box-shadow: 0 0 28px rgba(147,230,210,.24),0 0 55px rgba(166,139,255,.16); }
@media (max-width: 720px) {
  .hub-count { margin-left: 0; }
  .hub-orbit { top: 104px; right: 26px; width: 82px; height: 82px; font-size: 24px; opacity: .86; }
  .hub-orbit::before { width: 110px; height: 44px; }
  .hub-orbit::after { width: 44px; height: 110px; }
  .menu-container .title { padding-right: 65px; }
}
@media (max-width: 540px) {
  .hub-heading, .footer-note { align-items: flex-start; flex-direction: column; }
  .footer-note { gap: 8px; }
  .hub-orbit { top: 132px; right: 22px; width: 58px; height: 58px; font-size: 18px; }
  .hub-orbit::before { width: 82px; height: 34px; }
  .hub-orbit::after { width: 34px; height: 82px; }
  .menu-container .title { padding-right: 34px; }
  .link-btn { grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
  .nav-icon { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.menu-container)::before, body:has(.menu-container)::after { animation: none !important; }
  .nav-group, .link-btn, .nav-icon { transition: none !important; }
}

/* Page-wide refresh: brighter ambient backdrops and more obvious hierarchy. */
body:has(.page-wrapper):not(:has(#auroraCanvas)),
body:has(.admin-container),
body:has(#leaderboardCard),
body:has(.about-card),
body:has(.container > .card) {
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(ellipse at 8% 10%,rgba(105,229,196,.19),transparent 27%),
    radial-gradient(ellipse at 94% 18%,rgba(154,112,255,.28),transparent 30%),
    radial-gradient(ellipse at 80% 96%,rgba(255,119,171,.13),transparent 34%),
    linear-gradient(145deg,#08090d,#10111a 55%,#090a10) !important;
}
body:has(.page-wrapper):not(:has(#auroraCanvas))::before,
body:has(.admin-container)::before,
body:has(#leaderboardCard)::before,
body:has(.about-card)::before,
body:has(.container > .card)::before {
  content: ''; position: fixed; z-index: -1; top: -24vw; right: -14vw; width: min(75vw,880px);
  height: min(75vw,880px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,rgba(159,112,255,.23),rgba(108,82,187,.1) 36%,transparent 70%);
  filter: blur(26px);
}

/* Ranking index */
body:has(.page-wrapper):not(:has(#auroraCanvas)) .header-section {
  border-color: rgba(184,156,255,.34) !important;
  background:
    radial-gradient(ellipse at 94% 0%,rgba(164,125,255,.25),transparent 37%),
    radial-gradient(ellipse at 0% 100%,rgba(72,214,183,.17),transparent 39%),
    linear-gradient(125deg,#222432,#171922) !important;
  box-shadow: 0 28px 76px rgba(0,0,0,.4),0 0 54px rgba(144,105,255,.12),inset 0 1px rgba(255,255,255,.08) !important;
}
body:has(.page-wrapper):not(:has(#auroraCanvas)) .header-section .title::before {
  content: '✦'; display: inline-grid; width: 40px; height: 40px; margin-right: 13px;
  place-items: center; vertical-align: .15em; border: 1px solid rgba(198,238,117,.4);
  border-radius: 13px; background: rgba(198,238,117,.13); color: #d9f69a;
  font: 700 21px 'DM Sans',sans-serif; text-shadow: 0 0 18px rgba(198,238,117,.45);
}
.stat { position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; top: -25px; right: -17px; width: 72px; height: 72px; border-radius: 50%; background: rgba(166,139,255,.13); filter: blur(2px); }
.level-card { overflow: hidden; position: relative; }
.level-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--zz-cyan),var(--zz-violet),var(--zz-pink)); opacity: .82; }
.level-image-wrapper { overflow: hidden; }
.level-image { transition: transform .35s cubic-bezier(.2,.75,.25,1),filter .35s ease; }
.level-card:hover .level-image { transform: scale(1.035); filter: saturate(1.12); }
.nav-tabs { box-shadow: 0 10px 32px rgba(0,0,0,.18); }
.tab-btn { transition: background .2s ease,color .2s ease,transform .2s ease !important; }
.tab-btn:hover:not(.active) { background: rgba(255,255,255,.08) !important; transform: translateY(-1px); }

/* Victor pages */
body:has(.victor-card) .victors-title h2::before,
body:has(.victor-card):not(:has(.victors-title)) .title::before {
  content: '🏆'; display: inline-grid; width: 42px; height: 42px; margin-right: 12px;
  place-items: center; vertical-align: .12em; border: 1px solid rgba(255,206,112,.28);
  border-radius: 14px; background: rgba(255,190,76,.12); font: 21px 'DM Sans',sans-serif;
}
.victor-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; border-radius: inherit; background: linear-gradient(90deg,#ffbf69,#ff71b8,#a68bff); }
.victor-card { position: relative; overflow: hidden; }
.victor-card .victors-list { border-color: rgba(255,255,255,.12) !important; background: linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025)) !important; }
.victor-card .trophy-icon { display: inline-grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,206,112,.25); border-radius: 12px; background: rgba(255,190,76,.12); }

/* Kiwi arcade */
body:has(.container > .card) { background-color: #090d13 !important; }
.container > .card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(120,104,255,.2),transparent 34%),
    radial-gradient(ellipse at 0% 100%,rgba(65,219,151,.14),transparent 38%),
    linear-gradient(145deg,#182635,#111a25) !important;
}
.container > .card::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg,#c6ee75,#55e4f2,#a68bff); }
.volume-label::before { content: '✦'; display: inline-grid; width: 23px; height: 23px; margin-right: 7px; place-items: center; border-radius: 8px; background: rgba(198,238,117,.15); color: #d9f69a; }
.game-area { position: relative; overflow: hidden; background-image: linear-gradient(rgba(134,239,172,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(134,239,172,.13) 1px,transparent 1px),radial-gradient(ellipse at 50% 100%,#24a979,#105247 64%,#0b3335) !important; background-size: 36px 36px,36px 36px,auto !important; box-shadow: inset 0 0 100px rgba(0,0,0,.3),0 0 38px rgba(49,221,155,.11) !important; }
.game-area::after { content: '✦'; position: absolute; right: 24px; bottom: 10px; color: rgba(224,255,191,.27); font: 700 90px/1 'Space Grotesk',sans-serif; pointer-events: none; }
.stats .stat { position: relative; overflow: hidden; }
.stats .stat:nth-child(2) p { color: #7ee8fa !important; }
.stats .stat:nth-child(3) p { color: #c3a8ff !important; }
.stats .stat:nth-child(4) p { color: #ffbd78 !important; }

/* Reputation tables */
body:has(#leaderboardCard) .badge::before { content: '✦'; display: inline-grid; width: 26px; height: 26px; margin-right: 7px; place-items: center; border: 1px solid rgba(85,228,242,.32); border-radius: 9px; background: rgba(85,228,242,.12); color: var(--zz-cyan); }
body:has(#leaderboardCard) main > .card:first-child { border-color: rgba(166,139,255,.28) !important; background: radial-gradient(ellipse at 100% 0%,rgba(166,139,255,.22),transparent 38%),linear-gradient(130deg,#222432,#171922) !important; }
body:has(#leaderboardCard) #leaderboardCard h2::before { content: '🏅'; margin-right: 9px; }
body:has(#leaderboardCard) #historyCard h2::before { content: '↻'; display: inline-grid; width: 30px; height: 30px; margin-right: 8px; place-items: center; border-radius: 9px; background: rgba(85,228,242,.12); color: var(--zz-cyan); font-size: 22px; }
body:has(#leaderboardCard) tbody tr { transition: background .18s ease; }
body:has(#leaderboardCard) tbody tr:nth-child(1) td:first-child { color: #ffe28a; }
body:has(#leaderboardCard) tbody tr:nth-child(2) td:first-child { color: #d8e5ff; }
body:has(#leaderboardCard) tbody tr:nth-child(3) td:first-child { color: #e8af83; }

/* Shared canvas workbench */
body:has(#auroraCanvas) { background-image: radial-gradient(ellipse at 9% 10%,rgba(80,231,189,.17),transparent 27%),radial-gradient(ellipse at 91% 15%,rgba(153,107,255,.29),transparent 31%),linear-gradient(145deg,#08090d,#10121d 55%,#090a10) !important; }
body:has(#auroraCanvas) header { border-color: rgba(171,147,255,.35) !important; background: radial-gradient(ellipse at 100% 0%,rgba(153,107,255,.25),transparent 39%),linear-gradient(125deg,#222432,#151923) !important; box-shadow: 0 24px 58px rgba(0,0,0,.34),0 0 44px rgba(153,107,255,.13),inset 0 1px rgba(255,255,255,.07); }
body:has(#auroraCanvas) header h1::before { content: '✎'; display: inline-grid; width: 46px; height: 46px; margin-right: 12px; place-items: center; vertical-align: .12em; border: 1px solid rgba(85,228,242,.3); border-radius: 14px; background: rgba(85,228,242,.14); color: #a4f3f2; font-size: 27px; }
.canvas-container { border-color: rgba(166,139,255,.32) !important; background: linear-gradient(150deg,#171b29,#10131d) !important; }
.toolbar { background: linear-gradient(100deg,rgba(166,139,255,.08),rgba(85,228,242,.045)); }
.toolbar .btn { border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg,#2b3040,#1c202c); color: #eef1fa; box-shadow: 0 5px 15px rgba(0,0,0,.18); transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.toolbar .btn:hover { transform: translateY(-2px); border-color: rgba(85,228,242,.48); background: #32384a; }
.toolbar .btn.active { border-color: rgba(85,228,242,.62); background: linear-gradient(120deg,rgba(85,228,242,.24),rgba(166,139,255,.22)); box-shadow: 0 0 22px rgba(85,228,242,.12); }
.canvas-window { background-color: #0d1118 !important; background-image: radial-gradient(rgba(173,190,255,.18) 1px,transparent 1px) !important; background-size: 22px 22px !important; }
.chat-header { background: linear-gradient(110deg,#33305a,#1b3445) !important; }

/* Gago admin desk */
.admin-container { position: relative; overflow: hidden; }
.admin-container::before { content: '⚙'; position: absolute; top: 8px; right: 32px; color: rgba(166,139,255,.13); font: 700 clamp(100px,18vw,180px)/1 'DM Sans',sans-serif; transform: rotate(-12deg); pointer-events: none; }
.admin-container > * { position: relative; }
.admin-container h1::before { content: '⚡'; display: inline-grid; width: 44px; height: 44px; margin-right: 12px; place-items: center; vertical-align: .12em; border: 1px solid rgba(255,190,76,.34); border-radius: 14px; background: rgba(255,190,76,.13); font: 24px 'DM Sans',sans-serif; }
.admin-container .tabs, .admin-container .tab-buttons { border-color: var(--zz-line); }
.admin-container .tab-btn { transition: transform .18s ease,background .18s ease; }
.admin-container .tab-btn:hover { transform: translateY(-2px); }
.admin-container .form-section, .admin-container .manage-item { box-shadow: inset 0 1px rgba(255,255,255,.045),0 12px 26px rgba(0,0,0,.13); }
.admin-container input, .admin-container select, .admin-container textarea { border-color: rgba(173,190,255,.2) !important; background-color: rgba(8,11,20,.72) !important; color: #f4f5f7 !important; }
.admin-container input:focus, .admin-container select:focus, .admin-container textarea:focus { border-color: var(--zz-violet) !important; box-shadow: 0 0 0 4px rgba(166,139,255,.12); }
.btn-submit { min-height: 48px; background: linear-gradient(105deg,#93e6d2,#c6ee75) !important; box-shadow: 0 10px 28px rgba(147,230,210,.18) !important; }

/* About card */
.about-card { position: relative; overflow: hidden; background: radial-gradient(ellipse at 100% 0%,rgba(166,139,255,.25),transparent 42%),radial-gradient(ellipse at 0% 100%,rgba(85,228,242,.1),transparent 38%),linear-gradient(145deg,#20232d,#11131a) !important; }
.about-card::after { content: '✦'; position: absolute; top: 10px; right: 32px; color: rgba(198,238,117,.18); font: 700 clamp(110px,20vw,210px)/1 'Space Grotesk',sans-serif; pointer-events: none; }
.about-card > * { position: relative; }
.about-kicker::before { content: '✦'; margin-right: 8px; font-size: 15px; }
.about-title { text-shadow: 0 8px 36px rgba(166,139,255,.28); }
.back-btn { box-shadow: 0 12px 28px rgba(85,228,242,.16) !important; }

@media (max-width: 720px) {
  body:has(.page-wrapper):not(:has(#auroraCanvas)) .header-section .title::before,
  .admin-container h1::before, body:has(#auroraCanvas) header h1::before { width: 36px; height: 36px; font-size: 19px; }
  body:has(#auroraCanvas) header { padding: 21px 18px !important; }
  .level-card::after { height: 2px; }
}

/* Low Detail Mode is shared between every page that loads this stylesheet. */
.zz-ldm-active,
.zz-ldm-active::before,
.zz-ldm-active::after {
  background: #101318 !important;
  background-image: none !important;
}
body.zz-ldm-active:has(.menu-container),
body.zz-ldm-active:has(.page-wrapper):not(:has(#auroraCanvas)),
body.zz-ldm-active:has(#leaderboardCard),
body.zz-ldm-active:has(.about-card),
body.zz-ldm-active:has(.container > .card),
body.zz-ldm-active:has(#auroraCanvas),
body.zz-ldm-active:has(.admin-container) {
  background: #101318 !important;
  background-image: none !important;
}
.zz-ldm-active *,
.zz-ldm-active *::before,
.zz-ldm-active *::after {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
}
body.zz-ldm-active,
body.zz-ldm-active.zz-page-enter,
body.zz-ldm-active.zz-page-leaving {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}
body.zz-ldm-active::before,
body.zz-ldm-active::after,
body.zz-ldm-active *::before,
body.zz-ldm-active *::after {
  display: none !important;
  animation: none !important;
}
body.zz-ldm-active .zz-transition-overlay { display: none !important; }
body.zz-ldm-active .page-wrapper { opacity: 1 !important; transform: none !important; filter: none !important; will-change: auto !important; }
.zz-ldm-active .menu-container,
.zz-ldm-active .header-section,
.zz-ldm-active .admin-container,
.zz-ldm-active .level-card,
.zz-ldm-active .level-hero,
.zz-ldm-active .victor-card,
.zz-ldm-active .modal-card,
.zz-ldm-active .modal-box,
.zz-ldm-active .modal-panel,
.zz-ldm-active .about-card,
.zz-ldm-active .container > .card,
.zz-ldm-active .card,
.zz-ldm-active .form-section,
.zz-ldm-active .manage-item,
.zz-ldm-active .nav-group,
.zz-ldm-active .nav-tabs,
.zz-ldm-active .history-table,
.zz-ldm-active .victors-list,
.zz-ldm-active .stats .stat,
.zz-ldm-active .stat,
.zz-ldm-active .canvas-container,
.zz-ldm-active .chat-widget,
.zz-ldm-active .chat-header,
.zz-ldm-active .toolbar,
.zz-ldm-active .online-pill {
  background: #1b2028 !important;
  border-color: #343c47 !important;
}
body.zz-ldm-active:has(.page-wrapper):not(:has(#auroraCanvas)) .header-section,
body.zz-ldm-active:has(#leaderboardCard) .card,
body.zz-ldm-active:has(.victor-card):not(:has(.victors-title)) > .victor-card {
  background: #1b2028 !important;
  border-color: #343c47 !important;
}
.zz-ldm-active .link-btn,
.zz-ldm-active button,
.zz-ldm-active .btn,
.zz-ldm-active .tab-btn,
.zz-ldm-active .btn-proof,
.zz-ldm-active .back-btn,
.zz-ldm-active .small-button,
.zz-ldm-active .Link1 {
  background: #29313a !important;
  border-color: #46515e !important;
  color: #f2f4f7 !important;
}
.zz-ldm-active .btn-primary,
.zz-ldm-active .btn-submit,
.zz-ldm-active .tab-btn.active,
.zz-ldm-active .controls button,
.zz-ldm-active #btnSaveNick {
  background: #446052 !important;
  border-color: #65836d !important;
  color: #f5fff5 !important;
}
.zz-ldm-active .diff-tag { background: #56643d !important; color: #f5ffd9 !important; }
.zz-ldm-active .nav-icon { background: #303943 !important; color: #d8e2ea !important; }
.zz-ldm-active .nav-icon svg { stroke: #e3e9ef !important; }
.zz-ldm-active .game-area,
.zz-ldm-active .canvas-window { background: #141a20 !important; }
.zz-ldm-active .game-area::before,
.zz-ldm-active .game-area::after,
.zz-ldm-active .hub-orbit,
.zz-ldm-active .hub-orbit::before,
.zz-ldm-active .hub-orbit::after,
.zz-ldm-active .admin-container::before,
.zz-ldm-active .about-card::after { display: none !important; }
#ldmToggle { min-height: 42px; border: 1px solid rgba(255,255,255,.3) !important; background: linear-gradient(115deg,#41b7f4,#7868e8) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(65,150,237,.35); }
body.zz-ldm-active #ldmToggle { background: #446052 !important; color: #f5fff5 !important; box-shadow: none !important; }

/* State readout for the Gago List and Info page; the home screen owns the toggle. */
.zz-ldm-status { position: fixed; z-index: 999; left: max(16px,env(safe-area-inset-left)); bottom: max(16px,env(safe-area-inset-bottom)); padding: 9px 13px; border: 1px solid #526052; border-radius: 999px; background: #232a25; color: #d8edc5; font: inherit; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .04em; cursor: pointer; }
.zz-ldm-status:hover, .zz-ldm-status:focus-visible { outline: 2px solid #a8ff78; outline-offset: 3px; }
body:has(#ldmToggle) .zz-ldm-status { display: none; }
.footer-note nav { display: flex; gap: 14px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Keep compact stats inside the viewport on narrow screens. */
body:has(.header-section) .stats { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; min-width: 0; gap: 10px !important; }
body:has(.header-section) .stats > .stat { box-sizing: border-box; width: auto; min-width: 0; padding: 14px 12px !important; overflow-wrap: anywhere; }
body:has(.header-section) .stat b { font-size: clamp(15px,4vw,22px) !important; overflow-wrap: anywhere; }
body.zz-ldm-active:has(.header-section) .header-section { background: #20252b !important; border-color: #3a424b !important; }
body.zz-ldm-active:has(.header-section) .stats > .stat { background: #292f35 !important; border-color: #414a53 !important; }
body.zz-ldm-active:has(.header-section) .nav-tabs { background: #171b20 !important; border-color: #343c45 !important; }
body.zz-ldm-active:has(.header-section) .view-section > .level-card { background: #20252b !important; border-color: #3a424b !important; }
body.zz-ldm-active:has(.about-card) .about-card { background: #20252b !important; border-color: #3a424b !important; }
body.zz-ldm-active:has(.about-card) .back-btn { background: #35443b !important; border-color: #526052 !important; color: #f2f7ef !important; }
@media (max-width: 600px) {
  body:has(.header-section) .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body:has(.header-section) .stats > .stat { padding: 12px 10px !important; font-size: 12px; }
}

/* UX refinements: clear labels, touch-sized controls, and layouts that retain content. */
.menu-container > .title::after { content: none !important; display: none !important; }
.hub-intro { max-width: 58ch; margin-top: 14px; color: #bdc3cd !important; font-size: clamp(16px,2vw,19px) !important; }
.hub-count { padding: 8px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(255,255,255,.035); color: #c5c9d2 !important; }
.nav-links { align-items: stretch; }
.nav-group { min-width: 0; }
.link-btn { min-height: 88px; }
.link-title { padding-right: 16px; line-height: 1.35; }
.btn-subtext { max-width: 34ch; }

/* Kiwi game: make the round goal and game state easy to scan. */
.game-instructions { max-width: 66ch; margin: -4px 0 14px; color: #c7d1d8; font-size: 14px; line-height: 1.55; }
.game-area { min-height: 300px !important; height: min(58svh, 470px) !important; }
.kiwi { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: rgba(8,27,27,.48); touch-action: manipulation; }
.kiwi:focus-visible { outline: 3px solid #e3ff9a !important; outline-offset: 4px; }
.controls button, .small-button, .Link1, .leaderboard-tab, .auth-form button, .signout { min-height: 44px; }
.message { line-height: 1.5; }
.modal-panel { overscroll-behavior: contain; }

/* Canvas: group related tools, make color and chat controls keyboard friendly. */
body:has(#auroraCanvas) .toolbar { justify-content: flex-start; align-items: stretch; }
body:has(#auroraCanvas) .tool-group { gap: 7px; padding: 8px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(255,255,255,.025); }
body:has(#auroraCanvas) .toolbar .divider { display: none; }
body:has(#auroraCanvas) .toolbar .btn { min-height: 40px; }
body:has(#auroraCanvas) .color-swatch { appearance: none; flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; margin: 2px; padding: 0; }
body:has(#auroraCanvas) .color-swatch.active { outline: 2px solid #fff; outline-offset: 2px; }
body:has(#auroraCanvas) .custom-color-container { width: 36px; height: 36px; }
body:has(#auroraCanvas) .custom-color-preview { width: 32px; height: 32px; }
body:has(#auroraCanvas) .custom-color-container:focus-within .custom-color-preview { outline: 3px solid var(--zz-cyan); outline-offset: 3px; }
body:has(#auroraCanvas) .size-slider-wrapper { min-height: 40px; }
body:has(#auroraCanvas) .size-slider { width: clamp(76px,10vw,120px); }
body:has(#auroraCanvas) .canvas-window { height: min(60svh,720px); min-height: 300px; }
body:has(#auroraCanvas) .chat-header { width: 100%; min-height: 48px; border: 0; color: #fff; text-align: left; font: inherit; cursor: pointer; }
body:has(#auroraCanvas) .chat-header:focus-visible { outline-offset: -4px; }
body:has(#auroraCanvas) .chat-body { max-height: min(34svh,260px); }
body:has(#auroraCanvas) .chat-footer .btn { min-width: 64px; min-height: 40px; }

/* Keep the full history available on small screens through the existing scroll region. */
body:has(#leaderboardCard) .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
body:has(#leaderboardCard) #historyCard table { min-width: 680px; }
body:has(#leaderboardCard) #historyCard th:nth-child(3),
body:has(#leaderboardCard) #historyCard td:nth-child(3) { display: table-cell !important; }
body:has(#leaderboardCard) #historyCard td:nth-child(4) { min-width: 180px; }

@media (max-width: 720px) {
  .nav-group:nth-child(3) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-instructions { font-size: 13px; }
  body:has(#auroraCanvas) .toolbar { gap: 8px !important; }
  body:has(#auroraCanvas) .tool-group { flex: 1 1 auto; }
  body:has(#auroraCanvas) .canvas-window { height: 54svh; min-height: 280px; }
  body:has(#auroraCanvas) .chat-widget { max-height: 52svh; }
}
@media (max-width: 480px) {
  .nav-group:nth-child(3) { grid-template-columns: 1fr; }
  .hub-intro { font-size: 15px !important; }
  .game-area { min-height: 280px !important; height: 48svh !important; }
  .game-instructions { margin-bottom: 12px; }
  body:has(#auroraCanvas) .tool-group { flex-basis: 100%; }
  body:has(#auroraCanvas) .toolbar .btn { flex: 1 1 auto; }
  body:has(#auroraCanvas) .color-palette { justify-content: flex-start; }
  body:has(#auroraCanvas) .canvas-window { height: 48svh; min-height: 250px; }
  body:has(#auroraCanvas) .chat-widget { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
  body:has(#auroraCanvas) .chat-body { max-height: 28svh; }
  body:has(#auroraCanvas) .modal-box { max-height: calc(100svh - 32px); overflow-y: auto; }
}