/* Bobtoes — the shared look for the player pages (arcade, sign-in, waiting,
   profile, no-access). Games don't load this; they keep their own style.

   The system in one breath: a deep night-purple ground, raised surfaces with
   soft real shadows, one confident gold for anything you press, Figtree for
   reading and Fredoka for the goofy bits (the name, game titles,
   big headlines). Spacing runs on a 4px grid. */

:root{
  /* ground and surfaces, darkest to lightest */
  --bg:#0E0A21; --bg-2:#130E2C; --surface:#18123A; --surface-2:#211A4D; --surface-3:#2B2260;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);

  /* text (all AA or better on every surface above) */
  --text:#F5F2FF; --text-2:#C9C2EA; --text-3:#A59CD0; --ink:#17102E;

  /* brand colour: toe gold. The rest are accents, used sparingly. */
  --gold:#FFC93C; --gold-hi:#FFD868; --gold-edge:#C98A0B; --gold-ink:#1A1204;
  --pink:#FF5C7A; --pink-text:#FF8FA6; --mint:#2DD4BF; --mint-text:#5EEAD4;
  --sky:#60A5FA; --sky-text:#93C5FD; --lilac:#B794FF; --lilac-text:#C9B3FF; --toe:#FFD9C0;

  --focus:#FFD868;

  /* type */
  --font-ui:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Fredoka","Figtree",system-ui,sans-serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:clamp(1.9rem,1.2rem + 2.4vw,2.75rem);

  /* space (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* shape and depth */
  --r-sm:8px; --r:12px; --r-md:16px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(5,2,20,.4),0 2px 8px rgba(5,2,20,.25);
  --sh-2:0 2px 6px rgba(5,2,20,.35),0 12px 28px rgba(5,2,20,.4);
  --sh-3:0 6px 14px rgba(5,2,20,.4),0 28px 60px rgba(5,2,20,.55);
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1200px;
  --gutter:clamp(16px,4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:500 var(--fs-base)/1.55 var(--font-ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(900px 420px at 12% -8%,rgba(183,148,255,.20),transparent 70%),
    radial-gradient(700px 380px at 92% -12%,rgba(255,92,122,.09),transparent 70%),
    linear-gradient(180deg,var(--bg-2) 0,var(--bg) 640px) no-repeat,var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gold)}
h1,h2,h3{margin:0;line-height:1.15;font-weight:700;text-wrap:balance}
p{margin:0}
::selection{background:rgba(255,201,60,.35)}

:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--s4);top:-80px;z-index:100;background:var(--gold);color:var(--gold-ink);
  padding:var(--s2) var(--s4);border-radius:var(--r);font-weight:700;text-decoration:none;transition:top .15s}
.skip:focus{top:var(--s4)}

/* ------------------------------------------------------------ top bar */
.nav{position:sticky;top:0;z-index:30;background:rgba(14,10,33,.72);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s3);height:68px}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--text);min-width:0;border-radius:12px}
.brand-logo{width:44px;height:44px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
  transform:rotate(-6deg);transition:transform .35s var(--ease)}
.brand:hover .brand-logo{transform:rotate(6deg) scale(1.08)}
.brand-name{font:700 1.5rem/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap}
.pver{font:600 var(--fs-xs)/1 var(--font-ui);color:var(--text-3);background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 8px;letter-spacing:.02em}
.pver:empty{display:none}
.env{flex:0 0 auto;font:800 .6875rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);
  background:var(--gold);border-radius:999px;padding:5px 9px;white-space:nowrap}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}

/* ------------------------------------------------------------ buttons */
.button{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--h);
  padding:0 var(--s4);border-radius:var(--r);border:1px solid transparent;font:700 var(--fs-md)/1 var(--font-ui);
  text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .15s,border-color .15s,color .15s}
.button:disabled{opacity:.55;cursor:not-allowed}
.button .ico{font-size:1.05em;line-height:1}
/* the primary button is a chunky key: it sits on a darker edge and presses down */
.button.primary{background:var(--gold);color:var(--gold-ink);box-shadow:0 3px 0 var(--gold-edge),0 8px 18px rgba(255,201,60,.18)}
.button.primary:hover{background:var(--gold-hi);box-shadow:0 3px 0 var(--gold-edge),0 10px 24px rgba(255,201,60,.28)}
.button.primary:active{transform:translateY(3px);box-shadow:0 0 0 var(--gold-edge),0 4px 10px rgba(255,201,60,.2)}
.button.secondary{background:var(--surface-3);color:var(--text);border-color:var(--line-2)}
.button.secondary:hover{background:#352A72;border-color:var(--line-3)}
.button.secondary:active{transform:translateY(1px)}
.button.ghost{background:transparent;color:var(--text-2)}
.button.ghost:hover{background:var(--surface-2);color:var(--text)}
.button.ghost:active{transform:translateY(1px)}
.button.light{background:#fff;color:#1F1F1F;border-color:#DADCE0;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.button.light:hover{background:#F6F7FB;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.button.light:active{transform:translateY(1px)}
.button.sm{--h:34px;padding:0 var(--s3);font-size:var(--fs-sm);border-radius:10px}
.button.lg{--h:50px;padding:0 var(--s6);font-size:var(--fs-base);border-radius:var(--r-md)}
.button.block{width:100%}
.button.icon{width:40px;padding:0}

/* ------------------------------------------------------------ surfaces */
.panel{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 120px),var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font:800 var(--fs-xs)/1 var(--font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}

/* ------------------------------------------------------------ pills and tags */
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;
  font:700 var(--fs-xs)/1 var(--font-ui);letter-spacing:.01em;white-space:nowrap;
  background:rgba(255,255,255,.07);color:var(--text-2);border:1px solid var(--line)}
.pill.solo{background:rgba(96,165,250,.14);color:var(--sky-text);border-color:rgba(96,165,250,.28)}
.pill.multi{background:rgba(255,92,122,.14);color:var(--pink-text);border-color:rgba(255,92,122,.3)}
.pill.theme{text-transform:capitalize}
.pill.gold{background:rgba(255,201,60,.14);color:var(--gold);border-color:rgba(255,201,60,.3)}

.role{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font:800 .6875rem/1 var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase;background:rgba(45,212,191,.16);color:var(--mint-text);border:1px solid rgba(45,212,191,.35)}
.role.waiting{background:rgba(255,92,122,.16);color:var(--pink-text);border-color:rgba(255,92,122,.35)}
.role.admin{background:rgba(255,201,60,.16);color:var(--gold);border-color:rgba(255,201,60,.35)}

/* ------------------------------------------------------------ avatars */
.avatar{--size:36px;width:var(--size);height:var(--size);border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  overflow:hidden;background:linear-gradient(135deg,#FFD868,#F59E0B);font-size:calc(var(--size) * .5);line-height:1;
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line-2)}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------------ alerts */
.callout{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.32);color:var(--text);font-size:var(--fs-md);line-height:1.5}
.callout b{display:block;font-weight:800}
.callout .callout-ico{font-size:1.25rem;line-height:1.2}
.callout a{color:var(--pink-text);font-weight:700}

/* ------------------------------------------------------------ forms */
.field{display:block;margin:0 0 var(--s5)}
.label{display:block;font:700 var(--fs-md)/1.3 var(--font-ui);color:var(--text);margin:0 0 var(--s2)}
.help{font-size:var(--fs-sm);color:var(--text-3);margin-top:var(--s2);line-height:1.5}
.input{width:100%;height:46px;padding:0 var(--s4);border-radius:var(--r);background:var(--bg-2);color:var(--text);
  border:1px solid var(--line-2);font:600 var(--fs-base)/1 var(--font-ui);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--text-3);font-weight:500}
.input:hover{border-color:var(--line-3)}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,201,60,.18)}

/* ------------------------------------------------------------ centred pages (sign-in, waiting, no-access) */
.center-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s6);padding:var(--s8) var(--gutter)}
.center-page > .brand{flex:0 0 auto}
.card-narrow{width:100%;max-width:440px;padding:var(--s8) var(--s8) var(--s6);text-align:center}
.card-narrow h1{font:700 var(--fs-2xl)/1.15 var(--font-display);letter-spacing:-.01em;margin-bottom:var(--s2);text-wrap:balance}
.card-narrow .lead{color:var(--text-2);font-size:var(--fs-base);margin-bottom:var(--s6)}
.mascot{width:112px;height:112px;object-fit:contain;margin:0 auto var(--s4);filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.page-foot{margin-top:var(--s6);font-size:var(--fs-sm);color:var(--text-3)}
.page-foot a{color:var(--text-2);font-weight:700}
.page-foot a:hover{color:var(--text)}

@media (max-width:480px){
  .card-narrow{padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r-lg)}
}

/* ------------------------------------------------------------ motion */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}25%{transform:rotate(8deg)}50%{transform:rotate(-4deg)}75%{transform:rotate(5deg)}}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 100%) 0 0/800px 100% var(--surface-2);
  animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}