/* Vibeboard retro layer — Minecraft-inspired 90s game skin (Weiss Green retro palette).
   Readability stays #1: pixel font only on the wordmark, hero and micro-labels;
   body copy stays Inter. Self-hosted font (CSP: no external hosts). */
@font-face{
  font-family:'Press Start 2P';
  src:url('/assets/fonts/press-start-2p.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{--px:'Press Start 2P',monospace}

/* pixel wordmark + logo mark — one connected lockup */
.plogo{image-rendering:pixelated;width:36px;height:36px;flex-shrink:0;margin-right:-2px}
.brand b,a.logo{font-family:var(--px);font-size:16px !important;letter-spacing:0 !important;display:inline-flex;align-items:center;gap:4px;text-shadow:0 0 14px rgba(110,224,154,.35)}
.brand b em,a.logo em{color:#34d27b;font-style:normal}

/* hero headline goes retro */
.hero h1{font-family:var(--px);font-size:clamp(17px,3.2vw,27px) !important;line-height:1.55 !important;letter-spacing:0 !important;text-shadow:0 0 18px rgba(110,224,154,.3),3px 3px 0 #17342a}
.hero h1 em::after{display:none}
.hero h1 em{color:#34d27b;font-style:normal}

/* hero highlights — Weiss Green marker chips: hand-tilted, soft glow, trendy but readable */
mark.hl{display:inline-block;background:linear-gradient(100deg,rgba(52,210,123,.18),rgba(110,224,154,.34) 55%,rgba(52,210,123,.18));color:#dffaeb;padding:2px 10px 3px;border:1px solid rgba(52,210,123,.5);border-radius:8px;font-weight:700;font-style:normal;box-shadow:0 0 18px rgba(52,210,123,.22),inset 0 0 12px rgba(110,224,154,.08);transform:rotate(-1.2deg);transition:transform .15s,box-shadow .15s}
mark.hl+mark.hl,mark.hl:nth-of-type(even){transform:rotate(1.1deg)}
mark.hl:hover{transform:rotate(0) scale(1.04);box-shadow:0 0 26px rgba(52,210,123,.4)}

/* 🌐 globe language button + expanding dropdown */
.langwrap{position:relative;display:inline-flex}
.langbtn{display:inline-flex;align-items:center;gap:6px;background:var(--chip,#1c1f27);border:1px solid var(--line,#262a33);color:var(--mut,#9aa0ad);font-size:12px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer;transition:.13s}
.langbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.langbtn:hover,.langbtn[aria-expanded="true"]{border-color:#34d27b;color:#34d27b}
.langpanel{position:absolute;top:calc(100% + 9px);right:0;width:330px;max-height:350px;overflow-y:auto;background:#131419;border:1px solid #262a33;border-radius:14px;box-shadow:0 22px 55px rgba(0,0,0,.55);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;z-index:120;scrollbar-width:thin}
.langpanel .langopt{text-align:left;background:none;border:none;color:#e8eaf0;font-size:12.5px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:.12s}
.langpanel .langopt:hover{background:#1c1f27;color:#34d27b}
.langpanel .langopt.on{background:#0f3b27;color:#6ee09a;font-weight:700}
@media(max-width:640px){.langpanel{position:fixed;left:12px;right:12px;width:auto;top:64px}#langcur{display:none}}

/* chunky 90s game buttons on the primary actions */
.hcta.pri,.signin,.ob.pri,.mxg{border-radius:7px !important;border:2px solid #17342a !important;box-shadow:0 4px 0 #17342a !important;transition:transform .08s,box-shadow .08s,filter .14s}
.hcta.pri:active,.signin:active,.ob.pri:active,.mxg:active{transform:translateY(3px);box-shadow:0 1px 0 #17342a !important}
.hcta:not(.pri){border-radius:7px !important}

/* step numbers as pixel tiles */
.sh .n{font-family:var(--px);font-size:9px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(110,224,154,.4)}

/* micro-labels get the game-HUD feel */
.rlab,.flabel,.glabel{font-family:var(--px);font-size:8px !important;letter-spacing:.04em !important}

/* subtle CRT scanlines — barely-there texture, zero interaction cost */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);opacity:.5}

@media(max-width:640px){
  .brand b,a.logo{font-size:13px !important;gap:3px}
  .plogo{width:28px;height:28px}
}