/* the top bar shared by the small pages (login, join, courses, atlas) */
.topnav { padding:0 !important; margin:0; text-align:left; position:sticky; top:0; z-index:40; background:rgba(5,8,5,.9); border-bottom:1px solid #1c3322; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.topnav .in { max-width:1100px; margin:0 auto; padding:0 16px; height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topnav a { font-family:"Press Start 2P", ui-monospace, monospace; text-decoration:none; font-size:10px; color:#7fa889; text-shadow:none; }
.topnav a:hover, .topnav a[aria-current] { color:#39ff6a; }
.topnav .brand { display:flex; align-items:center; gap:10px; color:#39ff6a; font-size:12px; text-shadow:0 0 6px rgba(57,255,106,.7); }
.topnav .brand img { width:24px; height:24px; }
.topnav .links { display:flex; gap:16px; align-items:center; }
.topnav .go { color:#050805 !important; background:#39ff6a; padding:9px 12px; }
@media (max-width:620px) { .topnav .brand span { display:none; } .topnav .links { gap:12px; } .topnav a { font-size:9px; } }
@media (max-width:360px) { .topnav .hide-xs { display:none; } }

/* language button in the top bar */
.pm-langbtn { font:9px "Press Start 2P", monospace; color:#9fe8ff; background:none; border:1px solid #1c3322; padding:7px 8px; cursor:pointer; }
.pm-langbtn:hover, .pm-langbtn:focus-visible { border-color:#9fe8ff; }

/* intro + language menu (public/site.js) */
html.pm-lock, html.pm-lock body { overflow:hidden; }
#pm-intro { position:fixed; inset:0; z-index:1000; background:#000; display:grid; place-items:center; overflow:hidden;
  font-family:"Press Start 2P", ui-monospace, monospace; color:#39ff6a; }
#pm-intro::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.85) 100%); }
.pm-noise { pointer-events:none; position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:.55; transition:opacity .4s; }
.pm-ready .pm-noise { opacity:0; }
.pm-crt { position:relative; z-index:1; width:min(560px, calc(100vw - 32px)); text-align:center; transform-origin:center;
  background:#050805; padding:clamp(20px, 5vw, 40px) clamp(14px, 4vw, 32px); border:2px solid #1c3322; box-shadow:0 0 60px rgba(57,255,106,.15); }
.pm-on .pm-crt { animation:pm-poweron .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes pm-poweron { 0% { transform:scale(0, .004); filter:brightness(6); } 45% { transform:scale(1, .004); filter:brightness(6); } 100% { transform:scale(1, 1); filter:brightness(1); } }
.pm-off .pm-crt { animation:pm-poweroff .5s ease-in both; }
.pm-off { animation:pm-fade .5s ease-in both; }
@keyframes pm-poweroff { 0% { transform:scale(1, 1); } 55% { transform:scale(1, .004); filter:brightness(5); } 100% { transform:scale(0, .004); filter:brightness(8); } }
@keyframes pm-fade { 80% { opacity:1; } 100% { opacity:0; } }
.pm-gem { width:clamp(96px, 26vw, 150px); height:auto; aspect-ratio:1; image-rendering:pixelated; display:block; margin:0 auto 14px;
  filter:drop-shadow(0 0 16px rgba(57,255,106,.6)); }
.pm-boom .pm-gem { animation:pm-boom .5s ease-out; }
@keyframes pm-boom { 0% { filter:drop-shadow(0 0 0 #fff) brightness(3); } 100% { filter:drop-shadow(0 0 16px rgba(57,255,106,.6)) brightness(1); } }
.pm-boom .pm-crt { animation:pm-ring .6s ease-out; }
@keyframes pm-ring { 0% { box-shadow:0 0 0 0 rgba(159,232,255,.9), 0 0 60px rgba(57,255,106,.15); } 100% { box-shadow:0 0 0 60vmax rgba(159,232,255,0), 0 0 60px rgba(57,255,106,.15); } }
.pm-logo { font-size:clamp(18px, 6vw, 34px); letter-spacing:.08em; min-height:1.3em; text-shadow:0 0 8px rgba(57,255,106,.8); }
.pm-glitch { animation:pm-glitch 1.2s steps(2) 1; }
@keyframes pm-glitch { 0%, 100% { text-shadow:0 0 8px rgba(57,255,106,.8); transform:none; }
  20% { text-shadow:-3px 0 #ff2a6d, 3px 0 #9fe8ff; transform:translateX(2px) skewX(-8deg); }
  40% { text-shadow:3px 0 #ff2a6d, -3px 0 #9fe8ff; transform:translateX(-3px); }
  60% { text-shadow:-2px 0 #ff2a6d, 2px 0 #9fe8ff; transform:skewX(6deg); } }
.pm-menu { margin-top:22px; }
.pm-title { font-size:clamp(10px, 2.8vw, 14px); color:#9fe8ff; min-height:1.6em; text-shadow:0 0 8px rgba(159,232,255,.6); }
.pm-list { list-style:none; padding:0; margin:18px auto 0; max-width:340px; display:grid; gap:6px; }
.pm-list li { opacity:0; animation:pm-in .35s ease-out forwards; }
@keyframes pm-in { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:none; } }
.pm-list button { width:100%; display:flex; align-items:center; gap:10px; padding:12px 12px; font:inherit; font-size:clamp(10px, 2.8vw, 12px);
  color:#7fa889; background:none; border:2px solid transparent; cursor:pointer; text-align:left; }
.pm-list button.on, .pm-list button:focus-visible { color:#050805; background:#39ff6a; border-color:#39ff6a; outline:none; box-shadow:0 0 18px rgba(57,255,106,.5); }
.pm-cur { visibility:hidden; animation:pm-blink .6s steps(1) infinite; }
.pm-list button.on .pm-cur { visibility:visible; }
.pm-code { opacity:.7; }
.pm-pick { animation:pm-flash .12s steps(1) 5; }
@keyframes pm-flash { 50% { background:#c8ffd8; border-color:#c8ffd8; } }
@keyframes pm-blink { 50% { opacity:0; } }
.pm-shake .pm-crt { animation:pm-shake .4s; }
@keyframes pm-shake { 20% { transform:translate(-6px, 2px); } 40% { transform:translate(5px, -3px); } 60% { transform:translate(-4px, 1px); } 80% { transform:translate(3px, 2px); } }
.pm-keys { margin-top:16px; font-size:8px; color:#1f8a3a; }
.pm-skip { position:absolute; z-index:2; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); font:10px "Press Start 2P", monospace; color:#7fa889;
  background:none; border:1px solid #1c3322; padding:10px 12px; cursor:pointer; }
.pm-ready .pm-skip { display:none; }
@media (prefers-reduced-motion: reduce) { #pm-intro *, #pm-intro { animation:none !important; } .pm-list li { opacity:1; } }

/* crazier intro: BIOS text, glyph rain, sparks, falling letters, flash, shockwave, RGB split */
.pm-fx, .pm-pt { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.pm-fx { opacity:0; transition:opacity .5s; }
.pm-rain .pm-fx { opacity:.55; }
.pm-ready .pm-fx { opacity:.22; }
.pm-pt { z-index:3; }
.pm-bios { position:absolute; left:16px; top:16px; margin:0; z-index:2; font:clamp(9px, 2.4vw, 12px)/1.5 "IBM Plex Mono", ui-monospace, monospace;
  color:#39ff6a; text-shadow:0 0 6px rgba(57,255,106,.7); white-space:pre; pointer-events:none; transition:opacity .4s; }
.pm-boom .pm-bios, .pm-ready .pm-bios { opacity:0; }
.pm-ch { display:inline-block; animation:pm-drop .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pm-drop { 0% { transform:translateY(-70vh) rotate(var(--r)); opacity:0; } 60% { opacity:1; } 100% { transform:none; } }
.pm-white { position:absolute; inset:0; z-index:4; background:#fff; opacity:0; pointer-events:none; }
.pm-boom .pm-white { animation:pm-white .4s ease-out; }
@keyframes pm-white { 0% { opacity:.9; } 100% { opacity:0; } }
.pm-ring { position:absolute; left:50%; top:50%; z-index:2; width:40px; height:40px; margin:-20px 0 0 -20px; border:4px solid #9fe8ff; opacity:0; pointer-events:none; }
.pm-boom .pm-ring { animation:pm-wave .8s ease-out; }
.pm-boom .pm-ring2 { animation:pm-wave 1s .12s ease-out; border-color:#39ff6a; }
@keyframes pm-wave { 0% { opacity:1; transform:rotate(45deg) scale(.2); } 100% { opacity:0; transform:rotate(45deg) scale(40); } }
.pm-boom { animation:pm-rgb .5s steps(1); }
@keyframes pm-rgb {
  0% { filter:drop-shadow(-8px 0 #ff2a6d) drop-shadow(8px 0 #9fe8ff); transform:translate(6px, -4px); }
  25% { filter:drop-shadow(10px 0 #ff2a6d) drop-shadow(-10px 0 #9fe8ff) hue-rotate(90deg); transform:translate(-8px, 3px) skewX(4deg); }
  50% { filter:drop-shadow(-4px 0 #ff2a6d) drop-shadow(4px 0 #9fe8ff) invert(1); transform:translate(3px, 2px); }
  75% { filter:drop-shadow(3px 0 #ff2a6d) drop-shadow(-3px 0 #9fe8ff); transform:translate(-2px, -1px); }
  100% { filter:none; transform:none; } }
.pm-boom .pm-crt { animation:pm-ring .6s ease-out, pm-punch .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes pm-punch { 0% { transform:scale(1.25) skewX(-6deg); } 40% { transform:scale(.94) skewX(3deg); } 100% { transform:none; } }
.pm-shake.pm-boom .pm-crt { animation:pm-shake .4s, pm-ring .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .pm-fx, .pm-pt, .pm-bios, .pm-ring, .pm-white { display:none; } }