/* Bobtoes — the shared look for the player pages (arcade, sign-in, waiting,
   profile, no-access). Games, /admin and /build don't load this.

   Calm on purpose: neutral surfaces, one ember-orange accent for things you
   press, one type family (Geist), a 4px spacing grid. The colours below are
   the Graphite (dark) look. Every page also links /shared/theme.css, which the
   server answers with the look an admin picked on /admin — Graphite or Paper —
   and that file only swaps these tokens. */

:root{
  /* ground and surfaces, back to front */
  --bg:#0E0E10; --bg-2:#121215; --surface:#18181B; --surface-2:#202024; --surface-3:#2C2C31;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.2);

  /* text (AA or better on every surface above) */
  --text:#F4F4F5; --text-2:#B9B9C1; --text-3:#909099;

  /* the one accent, and the ink that sits on it */
  --gold:#FF7A2E; --gold-hi:#FF8C4A; --gold-ink:#1A0B03; --ember-text:#FF8A45; --focus:#FF9A57;
  /* status colours, only for small notes (saved, error) */
  --good-text:#5EEAD4; --bad-text:#FF8FA6;

  /* type */
  --font-ui:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* the logo face: a blocky arcade display cut, not the UI font */
  --font-display:"Bungee",var(--font-ui);
  --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:24px;
  --sh-1:none;
  --sh-3:0 16px 48px rgba(0,0,0,.5);
  --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;background:var(--bg);color:var(--text);font:400 var(--fs-base)/1.55 var(--font-ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--ember-text)}
h1,h2,h3{margin:0;line-height:1.15;font-weight:700;text-wrap:balance}
p{margin:0}
::selection{background:color-mix(in srgb,var(--gold) 35%,transparent)}

: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:600;text-decoration:none;transition:top .15s}
.skip:focus{top:var(--s4)}

/* ------------------------------------------------------------ top bar + logo */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);
  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(--s5);height:76px}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
/* the logo: the ember footprint icon plus the wordmark, which takes the text
   colour. The wordmark is real text in the display face, with an optional
   slogan tucked under it on the arcade's front page. */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none;color:var(--text);border-radius:12px}
.brand-mark{width:52px;height:52px;flex:0 0 auto;display:block;transition:transform .3s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-6deg)}
.brand-word{display:flex;flex-direction:column;justify-content:center;gap:3px}
.brand-word b{font:400 1.55rem/1 var(--font-display);letter-spacing:.005em;white-space:nowrap;
  background:linear-gradient(180deg,var(--text) 45%,var(--ember-text));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.brand-slogan{font:600 .625rem/1 var(--font-ui);letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.pver{font:500 var(--fs-xs)/1 var(--font-ui);color:var(--text-3)}
.env{flex:0 0 auto;font:600 .6875rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 8px;white-space:nowrap}
@media (max-width:640px){
  .nav-in{height:64px;gap:var(--s2)}
  .brand{gap:9px}
  .brand-mark{width:40px;height:40px}
  .brand-word b{font-size:1.15rem}
  .brand-slogan{font-size:.5rem;letter-spacing:.14em}
  .env{padding:3px 6px;font-size:.625rem}
}

/* ------------------------------------------------------------ buttons */
.button{--h:42px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--h);
  padding:0 var(--s5);border-radius:var(--r);border:1px solid transparent;font:600 var(--fs-md)/1 var(--font-ui);
  text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;
  transition:transform .12s var(--ease),background-color .15s,border-color .15s,color .15s}
.button:disabled{opacity:.55;cursor:not-allowed}
.button:active{transform:scale(.98)}
.button.primary{background:var(--gold);color:var(--gold-ink)}
.button.primary:hover{background:var(--gold-hi)}
.button.secondary{background:var(--surface-3);color:var(--text)}
.button.secondary:hover{background:color-mix(in srgb,var(--surface-3) 85%,var(--text))}
.button.ghost{background:transparent;color:var(--text-2)}
.button.ghost:hover{background:var(--surface-2);color:var(--text)}
.button.light{background:#fff;color:#1F1F1F;border-color:#DADCE0}
.button.light:hover{box-shadow:0 2px 10px rgba(0,0,0,.18)}
.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)}
.button.block{width:100%}
.button.icon{width:42px;padding:0}

/* ------------------------------------------------------------ surfaces and small parts */
.panel{background: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:600 var(--fs-md)/1 var(--font-ui);color:var(--ember-text)}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font:500 var(--fs-xs)/1 var(--font-ui);
  white-space:nowrap;background:var(--surface-2);color:var(--text-2)}
.role{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font:600 .6875rem/1 var(--font-ui);
  letter-spacing:.06em;text-transform:uppercase;background:var(--surface-3);color:var(--text-2)}
.role.admin,.role.waiting{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--ember-text)}
.avatar{--size:36px;width:var(--size);height:var(--size);border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  overflow:hidden;background:var(--surface-3);font-size:calc(var(--size) * .5);line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover}
.callout{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-2);color:var(--text);font-size:var(--fs-md);line-height:1.5}
.callout b{display:block;font-weight:600}
.callout a{color:var(--ember-text);font-weight:600}

/* ------------------------------------------------------------ forms */
.field{display:block;margin:0 0 var(--s5)}
.label{display:block;font:600 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:500 var(--fs-base)/1 var(--font-ui);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--text-3)}
.input:hover{border-color:var(--line-3)}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}

/* ------------------------------------------------------------ centred pages (waiting, no-access) */
.center-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s8);padding:var(--s10) var(--gutter)}
.card-narrow{width:100%;max-width:420px;padding:var(--s8);text-align:center}
.card-narrow h1{font:700 var(--fs-2xl)/1.15 var(--font-ui);letter-spacing:-.03em;margin-bottom:var(--s2)}
.card-narrow .lead{color:var(--text-2);font-size:var(--fs-base);margin-bottom:var(--s6)}
.page-foot{margin-top:var(--s6);font-size:var(--fs-md);color:var(--text-3)}
.page-foot a{color:var(--text-2);font-weight:600}
.page-foot a:hover{color:var(--text)}
@media (max-width:480px){ .card-narrow{padding:var(--s6) var(--s5)} }

/* ------------------------------------------------------------ motion */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:-400px 0}to{background-position:400px 0}}
.skel{background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--text) 7%,transparent) 50%,transparent 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}
}