/* account.css — the Mebobox Account area (sign in/up + dashboard, My Mebobox, Creator Hub).
Neon "arcade glow" theme matching the Mebobox boot look: deep indigo field, electric-blue
accents, monospace gamecodes. Shared by /account/login.html and /account/ (index.html).
Fonts are self-hosted (no external CDN, matching the rest of the site):
Comfortaa — the "mebobox" wordmark
Nunito — display headings
Doto — gamecodes / arcade readouts (LED dot-matrix; used site-wide) */
/* block, not swap, for the brand face alone: Comfortaa sets the wordmark and almost nothing else, so
what "swap" buys — text you can read while the font arrives — is worth nothing here, and what it
costs is the logo appearing in the wrong typeface and then changing under you. Blocking hides those
few words for a moment instead. The pages that lead with the wordmark preload the file, so the
moment is a few milliseconds; if it never arrives at all the browser falls back on its own. */
@font-face { font-family:'Comfortaa'; src:url('/assets/fonts/Comfortaa/comfortaa-700.woff2') format('woff2'); font-weight:700; font-display:block; }
@font-face { font-family:'Nunito'; src:url('/assets/fonts/Nunito/nunito-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/fonts/Nunito/nunito-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/fonts/Nunito/nunito-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('/assets/fonts/Nunito/nunito-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Doto'; src:url('/assets/fonts/Doto/doto-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Doto'; src:url('/assets/fonts/Doto/doto-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Doto'; src:url('/assets/fonts/Doto/doto-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Doto'; src:url('/assets/fonts/Doto/doto-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
:root {
--bg:#05030f; --fg:#e8ecf6; --muted:#8a93ad; --muted-2:#9fb2d6;
--blue:#2b8cff; --blue-deep:#0768ff; --green:#46e08a; --red:#ff5d6c;
--panel-1:#0c1230; --panel-2:#080a1c;
--line:rgba(43,140,255,0.2); --line-soft:rgba(43,140,255,0.12); --line-strong:rgba(43,140,255,0.4);
--f-brand:'Comfortaa',system-ui,sans-serif; --f-display:'Nunito',system-ui,sans-serif;
--f-mono:'Doto',ui-monospace,monospace; --f-ui:system-ui,-apple-system,'Segoe UI',sans-serif;
--grad-blue:linear-gradient(135deg,#2b8cff,#0768ff);
--grad-panel:linear-gradient(180deg,var(--panel-1),var(--panel-2));
--shadow-btn:0 6px 16px rgba(7,104,255,0.30),inset 0 1px 0 rgba(255,255,255,0.22);
color-scheme:dark;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
min-height:100vh; color:var(--fg);
font-family:var(--f-ui); -webkit-font-smoothing:antialiased;
background:
radial-gradient(900px 560px at 50% -12%, rgba(7,104,255,0.20), transparent 70%),
radial-gradient(120% 100% at 50% -10%, #16103a 0%, #0a0820 46%, #05030f 100%);
background-attachment:fixed;
}
/* Two background fields behind all content (z-index:0):
::before — faint CRT scanlines.
::after — a subtle twinkling + very slowly rotating starfield (ported from the Mebobox console
menu, css/screen.css). Oversized (inset:-25%) and centre-pivoted so the slow spin
never sweeps a bare edge into view. */
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
background:repeating-linear-gradient(rgba(255,255,255,0.025) 0 1px, transparent 1px 4px); }
body::after { content:""; position:fixed; inset:-25%; z-index:0; transform-origin:center;
pointer-events:none; background-repeat:no-repeat; will-change:opacity, transform; opacity:.66;
background-image:
radial-gradient(2.4px 2.4px at 8% 22%, rgba(255,255,255,1), transparent 70%),
radial-gradient(1.9px 1.9px at 23% 70%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(3.1px 3.1px at 37% 15%, rgba(255,255,255,1), transparent 70%),
radial-gradient(1.9px 1.9px at 52% 84%, rgba(43,140,255,.72), transparent 70%),
radial-gradient(3.6px 3.6px at 66% 32%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(2.4px 2.4px at 79% 66%, rgba(255,255,255,1), transparent 70%),
radial-gradient(3.1px 3.1px at 90% 20%, rgba(255,255,255,1), transparent 70%),
radial-gradient(1.9px 1.9px at 15% 48%, rgba(43,140,255,.6), transparent 70%),
radial-gradient(2.4px 2.4px at 44% 55%, rgba(255,255,255,1), transparent 70%),
radial-gradient(3.1px 3.1px at 72% 90%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(2.4px 2.4px at 95% 78%, rgba(255,255,255,1), transparent 70%),
radial-gradient(1.9px 1.9px at 30% 92%, rgba(255,255,255,1), transparent 70%),
radial-gradient(2.4px 2.4px at 4% 8%, rgba(255,255,255,1), transparent 70%),
radial-gradient(3.1px 3.1px at 58% 12%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(1.9px 1.9px at 84% 52%, rgba(255,255,255,1), transparent 70%),
radial-gradient(3.6px 3.6px at 50% 45%, rgba(255,255,255,1), transparent 70%),
radial-gradient(2.4px 2.4px at 88% 38%, rgba(255,255,255,1), transparent 70%),
radial-gradient(3.1px 3.1px at 34% 64%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(2.2px 2.2px at 18% 34%, rgba(255,255,255,1), transparent 70%),
radial-gradient(2.75px 2.75px at 62% 70%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(1.9px 1.9px at 76% 6%, rgba(43,140,255,.66), transparent 70%),
radial-gradient(2.4px 2.4px at 6% 88%, rgba(255,255,255,1), transparent 70%),
radial-gradient(2.4px 2.4px at 40% 40%, rgba(255,255,255,1), transparent 70%),
radial-gradient(1.9px 1.9px at 12% 12%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(2.4px 2.4px at 28% 50%, rgba(255,255,255,1), transparent 70%),
radial-gradient(1.9px 1.9px at 50% 78%, rgba(159,216,255,.97), transparent 70%),
radial-gradient(3.1px 3.1px at 70% 48%, rgba(255,255,255,1), transparent 70%);
animation:mb-glitter 9s ease-in-out infinite, mb-spin 150s linear infinite; animation-fill-mode:backwards; }
@media (prefers-reduced-motion: reduce) { body::after { animation:none; opacity:.36; } }
::selection { background:rgba(43,140,255,0.35); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(43,140,255,0.22); border-radius:8px; }
input::placeholder, textarea::placeholder { color:#5a627a; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:var(--f-mono); letter-spacing:1px; color:var(--blue); }
@keyframes wbblink { 0%,55%{opacity:1} 56%,100%{opacity:.16} }
@keyframes wbpop { 0%{transform:scale(.96);opacity:.4} 100%{transform:scale(1);opacity:1} }
@keyframes wbsnap { 0%{transform:scale(1.32)} 55%{transform:scale(.95)} 100%{transform:scale(1)} }
@keyframes wbskel { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes wbcaret { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes wbpulsedot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
@keyframes wbfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
/* starfield (ported from the Mebobox console menu): twinkle + a very slow full rotation */
@keyframes mb-glitter { 0%,100%{opacity:.33} 25%{opacity:.66} 50%{opacity:.94} 75%{opacity:.66} }
@keyframes mb-spin { to { transform:rotate(360deg); } }
/* ============================ shared bits ============================ */
.muted { color:var(--muted); }
.muted.left, .left { text-align:left; }
.hint { font-size:12px; color:var(--muted); line-height:1.45; margin:6px 0 0; }
.hint.hint-top { margin:0 0 9px; }
.optional, .reco { color:#5a627a; font-weight:500; font-size:.85em; }
.sep { color:var(--muted); margin:0 8px; }
.pill {
display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.3px;
color:var(--green); padding:3px 9px; border-radius:999px;
background:rgba(70,224,138,0.12); border:1px solid rgba(70,224,138,0.4);
}
/* buttons */
button { font-family:var(--f-ui); }
/* The `hidden` attribute only carries `display:none` from the UA stylesheet, so ANY display rule
below out-specifies it and a hidden button stays on screen. Restate it with enough specificity to
win — otherwise `el.hidden = true` silently does nothing to a styled button. */
.primary[hidden], .btn[hidden], .ghostbtn[hidden], .iconbtn[hidden],
.linkbtn[hidden], button[hidden] { display:none; }
.primary, button[type="submit"], .btn {
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 20px; border-radius:12px; border:1px solid rgba(43,140,255,0.6);
background:var(--grad-blue); color:#fff; font-weight:600; font-size:14px; cursor:pointer;
box-shadow:var(--shadow-btn); transition:filter .15s, transform .05s;
}
.primary:hover, button[type="submit"]:hover, .btn:hover { filter:brightness(1.07); text-decoration:none; }
.primary:active, button[type="submit"]:active { transform:translateY(1px); }
.primary:disabled, button[type="submit"]:disabled {
background:rgba(138,147,173,0.12); border-color:transparent; color:#5a627a;
box-shadow:none; cursor:not-allowed; filter:none;
}
.ghostbtn, .btn.ghost {
display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:9px 15px; border-radius:11px; background:transparent;
border:1px solid rgba(43,140,255,0.3); color:var(--muted-2);
font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.ghostbtn:hover, .btn.ghost:hover { border-color:rgba(43,140,255,0.6); color:var(--blue); text-decoration:none; }
/* The middle rung of the hierarchy: a real, obviously-clickable action that is still subordinate to
the one primary on the page. A plain .ghostbtn beside a gradient primary reads as disabled, and a
second gradient primary would leave the page with no headline action at all. */
.ghostbtn.is-secondary {
background:rgba(43,140,255,0.1); border-color:rgba(43,140,255,0.55); color:#bcd8ff;
}
.ghostbtn.is-secondary:hover {
background:rgba(43,140,255,0.18); border-color:rgba(43,140,255,0.85); color:#eaf3ff;
}
.ghostbtn.danger { border-color:rgba(255,93,108,0.3); color:var(--red); }
.ghostbtn.danger:hover { background:rgba(255,93,108,0.1); border-color:rgba(255,93,108,0.5); color:var(--red); }
.icon-btn svg { width:16px; height:16px; }
.btn-danger {
padding:11px 18px; border-radius:11px; background:transparent;
border:1px solid rgba(255,93,108,0.5); color:var(--red); font-weight:600; font-size:14px; cursor:pointer;
}
.btn-danger:hover { background:rgba(255,93,108,0.12); }
/* result panels (.panel .ok/.err, .hidden) used by the JS */
.panel { margin-top:14px; padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.45; text-align:left; }
.panel.hidden { display:none; }
.panel.ok { background:rgba(70,224,138,0.08); border:1px solid rgba(70,224,138,0.35); color:#bdeccf; }
.panel.err { background:rgba(255,93,108,0.08); border:1px solid rgba(255,93,108,0.35); color:#f0b9c0; }
/* Neither "well done" nor "you got it wrong" — for telling somebody a fact about where they are.
Signing in without an account yet is the case this exists for, and red would blame a child for
something they have not done. */
.panel.info { background:rgba(43,140,255,0.09); border:1px solid rgba(43,140,255,0.38); color:#bcd8ff; }
.panel h3 { margin:0 0 6px; font-family:var(--f-display); font-weight:700; color:var(--fg); }
.panel .devlink { display:inline-block; margin-top:8px; font-weight:600; }
/* fields */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
/* An author `display` always beats the UA's [hidden] rule, so any class that sets one must restate
it — without this, JS that hides a field by setting .hidden has no effect. That silently exposed
the admin-only game-code field and the Godot input field to everyone in the update modal. */
.field[hidden] { display:none; }
.field > label { font-size:12.5px; color:var(--muted); font-weight:500; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
input, textarea, select {
width:100%; padding:12px 14px; border-radius:11px; background:rgba(5,3,15,0.7);
border:1px solid rgba(43,140,255,0.3); outline:none; color:var(--fg);
font-size:14px; font-family:var(--f-ui); transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { border-color:rgba(43,140,255,0.7); box-shadow:0 0 0 3px rgba(43,140,255,0.15); }
textarea { resize:vertical; }
select { appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
/* consent checkboxes */
.consent { display:flex; flex-direction:column; gap:11px; margin:16px 0; }
.check { display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:13px; color:#c2cadd; line-height:1.45; }
.check input { appearance:none; flex:none; margin:1px 0 0; width:20px; height:20px; border-radius:6px;
border:1px solid rgba(138,147,173,0.4); background:transparent; cursor:pointer; position:relative; }
.check input:checked { background:var(--blue-deep); border-color:var(--blue); }
.check input:checked::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
/* ============================ auth (login.html) ============================ */
.auth-wrap { position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:22px; padding:48px 18px; }
.auth-brand { display:flex; align-items:center; gap:9px; }
.auth-brand img { height:40px; width:auto; filter:drop-shadow(0 2px 10px rgba(7,104,255,0.5)); }
.auth-brand .word { font-family:var(--f-brand); font-weight:700; font-size:30px; letter-spacing:-1px; color:var(--blue); }
.auth-brand .sub { font-family:var(--f-display); font-weight:600; font-size:24px; color:var(--fg); }
.auth-card {
width:440px; max-width:100%; border-radius:24px; border:1px solid rgba(43,140,255,0.28);
background:var(--grad-panel); padding:34px 30px; text-align:center;
box-shadow:0 22px 70px rgba(0,0,0,0.5),0 0 50px rgba(7,104,255,0.12); animation:wbpop .2s ease-out;
}
.auth-coin { font-family:var(--f-mono); font-size:13px; letter-spacing:2px; color:var(--blue);
margin-top:20px; animation:wbblink 1.6s steps(1) infinite; }
.auth-card h1, .auth-card h2 { font-family:var(--f-display); font-weight:700; font-size:26px; margin:0 0 8px; }
/* Accessible page that carries the heading outline without a second visible title (tabbed/multi-
state SPA views use section headings, so there's exactly one per page). */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.auth-card .lede { font-size:14px; color:var(--muted); line-height:1.5; margin:0 0 24px; }
.auth-card form { display:flex; flex-direction:column; gap:12px; text-align:left; }
.auth-card form > button[type="submit"] { width:100%; padding:14px; margin-top:2px; }
.auth-card .field { margin-bottom:0; }
/* extra profile fields revealed in "create account" mode */
.auth-extra { display:none; flex-direction:column; gap:12px; }
.auth-card.mode-create .auth-extra { display:flex; animation:wbpop .2s ease-out; }
.auth-switch { margin-top:18px; font-size:13.5px; color:var(--muted); }
.auth-switch button { background:none; border:none; color:var(--blue); font-weight:600; font-size:13.5px; cursor:pointer; padding:0; font-family:var(--f-ui); }
.auth-switch button:hover { text-decoration:underline; }
/* The way out of a wrong turn — "New to mebobox? Create an account", and the same offer again on the
sent screen. It used to be .auth-switch: a 13.5px text link, which is fine for a footnote and
useless as an escape hatch, and somebody walked into the same dead end three times without seeing
it. A real, obviously-clickable secondary action instead. It needs its own container class
because .auth-switch's button reset above zeroes the padding and border a .ghostbtn depends on.
Deliberately no `display` rule: [hidden] must keep working on #sent-alt. */
.auth-alt { margin-top:18px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.auth-alt .ghostbtn { margin-top:10px; }
.auth-sent-icon { width:64px; height:64px; border-radius:50%; margin:6px auto 18px; background:rgba(43,140,255,0.12);
border:1px solid rgba(43,140,255,0.4); display:flex; align-items:center; justify-content:center; box-shadow:0 0 28px rgba(7,104,255,0.4); }
.auth-sent-icon svg { width:28px; height:28px; stroke:var(--blue); }
/* ============================ app bar (dashboard) ============================ */
body.app { display:flex; flex-direction:column; min-height:100vh; }
.appbar { position:sticky; top:0; z-index:40; backdrop-filter:blur(14px);
background:linear-gradient(180deg, rgba(8,8,24,0.88), rgba(8,8,24,0.5)); border-bottom:1px solid rgba(43,140,255,0.16); }
.appbar[hidden] { display:none; }
/* Full-bleed: the brand and account controls sit at the edges of the viewport, so the chrome lines
up with Creator Studio's full-width workspace instead of stopping short of it. */
.appbar-inner { display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:13px 22px; }
.appbar-brand { display:flex; align-items:center; gap:8px; }
/* nudge up ~2px so the robot's body (not its antennae-topped bounding box) centres on the wordmark */
.appbar-brand img { height:30px; width:auto; position:relative; top:-2px; filter:drop-shadow(0 2px 7px rgba(7,104,255,0.45)); }
.appbar-brand .word { font-family:var(--f-brand); font-weight:700; font-size:22px; letter-spacing:-.5px; color:var(--blue); }
.appbar-brand .name { font-family:var(--f-display); font-weight:600; font-size:19px; color:var(--fg); }
.appbar-brand:hover { text-decoration:none; }
.appbar-user { display:flex; align-items:center; gap:10px; position:relative; }
/* Nothing in the bar breaks across two lines: on a narrow phone "Sign in" was wrapping to "Sign" +
"in" inside its own pill, which reads as a mistake rather than as a tight fit. */
.appbar-user .primary, .appbar-user .btn, .appbar-user a { white-space:nowrap; }
/* And since nothing wraps, the bar has to be made to fit instead. Two steps down: first the padding,
the gaps and the subtitle go, then — on the narrowest phones — the wordmark itself, leaving the
robot. It is still a link home, and every page says "mebobox" in its own right below the bar. */
@media (max-width:430px) {
.appbar-inner { padding:11px 14px; gap:9px; }
.appbar-user { gap:7px; }
.appbar-brand .word { font-size:19px; }
.appbar-brand .name { display:none; }
}
@media (max-width:372px) {
.appbar-brand .word { display:none; }
}
/* notifications */
.notif { position:relative; }
.notif-bell { position:relative; width:42px; height:42px; border-radius:12px; background:rgba(43,140,255,0.08);
border:1px solid rgba(43,140,255,0.2); color:var(--fg); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.notif-bell:hover { border-color:rgba(43,140,255,0.6); }
.notif-dot { position:absolute; top:8px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--red);
box-shadow:0 0 8px var(--red); border:1.5px solid #0a0a1e; }
.notif-dot[hidden] { display:none; }
.notif-panel, .usermenu-panel {
position:absolute; top:52px; right:0; z-index:50; background:linear-gradient(180deg,#0e1330,#0a0c20);
border:1px solid rgba(43,140,255,0.3); border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 40px rgba(7,104,255,0.18); overflow:hidden; animation:wbpop .16s ease-out; }
.notif-panel[hidden], .usermenu-panel[hidden] { display:none; }
.notif-panel { width:340px; max-width:calc(100vw - 24px); }
.notif-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(43,140,255,0.14);
font-family:var(--f-display); font-weight:600; font-size:15px; }
.notif-readall { background:none; border:none; color:var(--muted); font-size:11px; font-weight:600; cursor:pointer; }
.notif-readall[hidden] { display:none; }
.notif-readall:hover { color:var(--blue); }
.notif-list { max-height:340px; overflow-y:auto; }
.notif-empty { padding:22px 16px; text-align:center; color:var(--muted); font-size:13px; }
.notif-item { display:flex; gap:11px; width:100%; text-align:left; padding:13px 16px; cursor:pointer; background:none; border:none;
border-bottom:1px solid rgba(43,140,255,0.07); color:var(--fg); }
.notif-item:hover { background:rgba(43,140,255,0.06); }
.notif-dot-sm { flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--red); box-shadow:0 0 7px var(--red); }
.notif-dot-sm[hidden] { display:none; }
.notif-body { display:flex; flex-direction:column; min-width:0; }
.notif-title { font-size:13.5px; font-weight:600; color:var(--fg); }
.notif-item:not(.unread) .notif-title { color:var(--muted); font-weight:500; }
.notif-text { font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:2px; }
.notif-time { font-size:11px; color:var(--muted); margin-top:3px; }
/* ---- help link (top bar) ---- */
.appbar-help {
font-size:14px; font-weight:600; color:var(--muted-2); padding:6px 4px;
}
.appbar-help:hover { color:var(--blue); }
/* Every button-shaped control in the app bar is the same height, set once here rather than left to
whatever each one's padding happens to add up to. Sign in used to inherit .primary's 12px padding
and stood ~10px taller than everything beside it — on the home page alone that was patched with a
local override, so the same button was a different size from one page to the next. */
.appbar-user .primary, .appbar-challenge {
height:36px; padding-top:0; padding-bottom:0; line-height:1;
}
.appbar-user .primary { padding-left:18px; padding-right:18px; }
/* The competition pill — the one element in the app bar that is meant to interrupt.
Everything else up here is blue-on-dark and recedes; this is solid gold with dark text, so it
reads as an invitation rather than as another section. Gold is already the site's own accent
(studio.css uses #f7d774), and it's the colour of first place on the challenge page itself, so
the two agree. It is a LINK, not a button, so it keeps the shape of one — a pill, not a slab. */
.appbar-challenge {
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
font-size:13.5px; font-weight:700; letter-spacing:.1px; padding:7px 15px; border-radius:999px;
color:#2a1e05; background:linear-gradient(135deg,#ffe08a,#f7c948);
border:1px solid rgba(255,224,138,0.85);
box-shadow:0 4px 14px rgba(247,201,72,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
transition:filter .15s ease, transform .05s ease;
}
.appbar-challenge:hover { filter:brightness(1.06); color:#2a1e05; text-decoration:none; }
.appbar-challenge:active { transform:translateY(1px); }
/* The soft launch is over: the pill is in the app bar on every page, public and signed-in alike.
(The rule that hid it lived here; deleting it was always the intended switch.) The other half is
CHALLENGE_PUBLIC in src/routes/challenge.js, which takes the page out of `noindex` and puts it in
the sitemap — set that in the deploy to finish announcing it. */
/* Two labels, one shown at a time — see site-nav.js. The full invitation needs room the bar doesn't
always have, and shoving the account controls off the edge would be a worse trade than shortening.
On a phone it shrinks again, to the trophy alone: a competition aimed at children, shared on a
parent's phone, is exactly the wrong thing to drop from the small screen. The link keeps its
aria-label at every width, so what it is never depends on how much of it fits. */
.appbar-challenge .short { display:none; }
@media (max-width:1180px) {
.appbar-challenge .full { display:none; }
.appbar-challenge .short { display:inline; }
}
@media (max-width:640px) {
.appbar-challenge .full, .appbar-challenge .short { display:none; }
.appbar-challenge { padding:7px 11px; font-size:15px; }
}
/* ---- level switcher (top bar) ---- */
.levelswitch { position:relative; }
.levelswitch[hidden] { display:none; }
/* Height matches the notification bell (42px) so the top-bar controls line up. A two-line pill —
"Level" over the level's name — makes plain what the button changes. */
.levelswitch-btn {
display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; border-radius:12px;
cursor:pointer; background:rgba(43,140,255,0.08); border:1px solid rgba(43,140,255,0.2); color:var(--fg);
}
.levelswitch-btn:hover { border-color:rgba(43,140,255,0.6); }
.levelswitch-icon { display:flex; color:var(--blue); }
.levelswitch-icon .level-icon { width:20px; height:20px; }
.levelswitch-textwrap { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.levelswitch-kicker {
font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);
}
.levelswitch-label { font-size:13.5px; font-weight:600; }
.levelswitch-panel {
position:absolute; top:48px; right:0; z-index:50; width:300px; max-width:calc(100vw - 24px);
padding:12px; background:linear-gradient(180deg,#0e1330,#0a0c20);
border:1px solid rgba(43,140,255,0.3); border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 40px rgba(7,104,255,0.18); animation:wbpop .16s ease-out;
}
.levelswitch-panel[hidden] { display:none; }
.levelswitch-head { margin:2px 4px 10px; font-family:var(--f-display); font-weight:600; font-size:14px; }
.levelswitch-options { display:flex; flex-direction:column; gap:4px; }
.levelswitch-option {
display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; cursor:pointer;
padding:10px 11px; border-radius:12px; background:none; border:1px solid transparent; color:var(--fg);
}
.levelswitch-option:hover { background:rgba(43,140,255,0.07); }
.levelswitch-option.is-current { background:rgba(43,140,255,0.1); border-color:rgba(43,140,255,0.32); }
.levelswitch-option-icon { flex:none; display:flex; color:var(--blue); margin-top:1px; }
.levelswitch-option-icon .level-icon { width:20px; height:20px; }
.levelswitch-option-text { display:flex; flex-direction:column; min-width:0; }
.levelswitch-option-name { font-size:13.5px; font-weight:600; }
.levelswitch-now {
font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--green);
border:1px solid rgba(70,224,138,0.4); border-radius:5px; padding:0 4px; margin-left:5px; vertical-align:middle;
}
.levelswitch-option-tag { font-size:12px; color:var(--muted); line-height:1.4; margin-top:2px; }
.levelswitch-foot { margin:10px 4px 2px; font-size:11.5px; color:var(--muted); line-height:1.45; }
/* ---- level picker (registration) ---- */
.level-pick-field label { margin-bottom:8px; }
.level-pick { display:flex; flex-direction:column; gap:8px; }
.level-card {
display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; row-gap:2px;
align-items:center; text-align:left; cursor:pointer; padding:12px 14px; border-radius:14px;
background:rgba(5,3,15,0.4); border:1px solid var(--line-soft); color:var(--fg);
transition:border-color .12s ease, background .12s ease;
}
.level-card:hover { border-color:var(--line); background:rgba(43,140,255,0.06); }
.level-card.is-selected { border-color:rgba(43,140,255,0.55); background:rgba(43,140,255,0.1); }
.level-card-icon { grid-row:1 / span 2; display:flex; color:var(--blue); }
.level-card-icon .level-icon { width:26px; height:26px; }
.level-card-name { font-size:14.5px; font-weight:700; }
.level-card-tag { font-size:12.5px; color:var(--muted); line-height:1.4; }
.level-card.is-selected .level-card-tag { color:var(--muted-2); }
.level-pick-note { margin:8px 2px 0; font-size:12px; color:var(--muted); line-height:1.45; }
/* user menu */
.usermenu { position:relative; }
.usermenu-trigger { display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:999px;
background:rgba(43,140,255,0.08); border:1px solid rgba(43,140,255,0.2); cursor:pointer; color:var(--fg); }
.usermenu-trigger:hover { border-color:rgba(43,140,255,0.6); }
.menu-username { font-size:14px; color:var(--fg); font-weight:600; }
.chevron { color:var(--muted); font-size:12px; }
.usermenu-panel { width:240px; padding:7px; }
.usermenu-header { padding:10px 12px 9px; }
.who-name { display:block; font-weight:700; font-size:14px; }
.who-sub { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.role-badge { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--blue);
background:rgba(43,140,255,0.12); border:1px solid rgba(43,140,255,0.3); padding:1px 7px; border-radius:999px; }
.menu-sep { height:1px; background:rgba(43,140,255,0.14); margin:6px 4px; }
.menu-nav { display:flex; flex-direction:column; }
.menu-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-radius:10px;
background:transparent; border:none; color:var(--fg); font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; }
.menu-item:hover { background:rgba(43,140,255,0.1); text-decoration:none; }
#logout { color:var(--red); }
/* avatars */
.avatar { border-radius:50%; background:var(--grad-blue); display:flex; align-items:center; justify-content:center;
font-weight:700; color:#fff; background-size:cover; background-position:center; box-shadow:0 0 14px rgba(43,140,255,0.5); }
.avatar.avatar-sm { width:32px; height:32px; font-size:13px; }
.avatar.avatar-lg { width:84px; height:84px; font-size:28px; }
.avatar.has-photo { box-shadow:0 0 0 2px rgba(43,140,255,0.5); }
/* ============================ workspace + tabs ============================ */
/* The workspace itself is full width so the CHROME (the section tabs) spans the viewport like the
app bar and the Studio do. Page CONTENT is still capped to a readable column — the cap moved down
onto each panel (below), rather than living here. */
.workspace { position:relative; z-index:1; flex:1; width:100%; padding:26px 22px 0; }
.workspace[hidden] { display:none; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; padding:6px; border-radius:14px;
background:rgba(12,18,48,0.5); border:1px solid rgba(43,140,255,0.16); margin-bottom:26px; }
.tab { padding:9px 16px; border-radius:10px; background:transparent; border:none; color:var(--muted);
font-size:13.5px; font-weight:600; cursor:pointer; }
.tab:hover { color:var(--fg); }
.tab.is-active { background:rgba(7,104,255,0.18); color:var(--blue); }
/* "Report a bug" is in the tab row but is not a tab — it opens a form over the page rather than
going anywhere. The spacer pushes it to the far right and the red says "different sort of thing",
which together is enough that nobody reads it as a sixth place to visit. It never takes the
is-active state, because there is nothing to be active on. */
.tabs-spacer { flex:1 1 auto; min-width:12px; }
.tab.is-report { color:#ff8f8f; }
.tab.is-report:hover { color:#ffd4d4; background:rgba(255,77,79,0.16); }
/* Green for the idea beside the red for the fault — the site's own "this is fine" accent, so the
two read as different KINDS of thing before either is read as words. */
.tab.is-suggest { color:#7ee08a; }
.tab.is-suggest:hover { color:#c6f5cf; background:rgba(70,224,138,0.16); }
@media (max-width:640px) {
/* Wrapped onto its own line, a flex spacer would shove it off on its own; let it sit in the run. */
.tabs-spacer { display:none; }
}
/* Content stays in a readable column even though the tabs above it run edge to edge. Creator Studio
opts out (see studio.css) — it's a workspace, not a page of prose. */
.tab-panel { animation:wbpop .2s ease-out; max-width:1180px; margin:0 auto; }
.tab-panel[hidden] { display:none; }
.page-head { margin-bottom:24px; }
.page-head-row { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; }
.head-actions { display:flex; gap:10px; flex-wrap:wrap; }
.page-title { font-family:var(--f-display); font-weight:700; font-size:30px; margin:0 0 4px; }
.page-sub { font-size:14px; color:var(--muted); margin:0; max-width:520px; }
.section-title { font-family:var(--f-display); font-weight:600; font-size:21px; margin:26px 0 16px; }
/* home dashboard */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.stat-card { border-radius:20px; border:1px solid rgba(43,140,255,0.22); background:var(--grad-panel);
padding:24px; box-shadow:0 12px 40px rgba(0,0,0,0.35); display:flex; flex-direction:column; }
.stat-num { font-family:var(--f-mono); font-size:48px; color:var(--blue); text-shadow:0 0 20px rgba(43,140,255,0.7); line-height:1; order:2; margin:10px 0 0; }
.stat-label { font-size:13px; color:var(--muted); font-weight:600; order:1; }
.stat-sub { font-size:12px; color:var(--muted); margin-top:8px; order:3; }
.quick-grid { margin-top:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.quick-card { text-align:left; border-radius:18px; border:1px solid rgba(43,140,255,0.22); background:rgba(7,104,255,0.06);
padding:20px; cursor:pointer; font-family:var(--f-ui); }
.quick-card:hover { border-color:rgba(43,140,255,0.55); }
.quick-card .qtitle { font-family:var(--f-display); font-weight:600; font-size:17px; color:var(--fg); }
.quick-card .qsub { font-size:13px; color:var(--muted); margin-top:5px; }
.home-more { margin-top:18px; }
/* panels / cards */
.card-panel { border-radius:18px; border:1px solid rgba(43,140,255,0.22); background:var(--grad-panel);
padding:22px; margin-bottom:18px; }
.card-panel[hidden] { display:none; }
.panel-title { font-family:var(--f-display); font-weight:600; font-size:16px; margin:0 0 14px; }
.register-panel { max-width:none; }
/* serial input (mebobox- prefix) */
.serial-input { display:flex; align-items:center; border-radius:11px; background:rgba(5,3,15,0.7);
border:1px solid rgba(43,140,255,0.35); overflow:hidden; }
.serial-input:focus-within { border-color:rgba(43,140,255,0.7); box-shadow:0 0 0 3px rgba(43,140,255,0.15); }
.serial-prefix { padding:12px 4px 12px 14px; color:var(--muted); font-family:var(--f-ui); font-size:14px; }
.serial-input input { border:none; background:transparent; color:var(--fg); font-family:var(--f-ui); padding-left:0; }
.serial-input input:focus { box-shadow:none; }
/* device list (My Mebobox) */
.device { border-radius:18px; border:1px solid rgba(43,140,255,0.22); background:var(--grad-panel); overflow:hidden; margin-bottom:16px; }
.device-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid rgba(43,140,255,0.12); }
.device-name { font-family:var(--f-mono); font-size:14px; letter-spacing:.5px; color:var(--fg); }
.device-head-actions { display:flex; align-items:center; gap:14px; flex:none; }
.device-lastseen { font-size:12.5px; color:var(--muted); white-space:nowrap; }
.game-list { list-style:none; margin:0; padding:14px 20px; display:flex; flex-direction:column; gap:10px; }
.game-list li { display:flex; align-items:center; gap:12px; }
.game-name { flex:1; min-width:0; font-size:14px; color:var(--fg); }
.game-meta { flex:none; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.empty { padding:18px 0; }
.device .empty { padding:18px 20px; }
/* account grid (My Account) */
.account-grid { display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:start; margin-bottom:18px; }
.avatar-col { display:flex; flex-direction:column; align-items:center; gap:14px; border-radius:18px;
border:1px solid rgba(43,140,255,0.2); background:var(--grad-panel); padding:22px; }
.form-col { margin-bottom:0; }
.avatar-edit { display:flex; flex-direction:column; align-items:center; gap:9px; width:100%; }
.avatar-edit .ghostbtn { width:100%; }
.avatar-edit .hint { text-align:center; }
.danger-zone { border-color:rgba(255,93,108,0.3); background:rgba(255,93,108,0.05); }
.danger-zone .panel-title { color:var(--red); }
.danger-zone p { font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 14px; }
.admin-nav { display:flex; flex-wrap:wrap; gap:10px; }
.admin-nav button { padding:9px 14px; border-radius:10px; background:rgba(43,140,255,0.06);
border:1px solid rgba(43,140,255,0.2); color:var(--muted); font-size:13px; font-weight:600; }
.admin-note { font-size:12.5px; color:var(--muted); margin:6px 0 16px; }
/* --- Asset gallery manager (admin) --- */
.ag-upload { border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:18px;
background:rgba(43,140,255,0.03); }
.ag-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.ag-field { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--muted-2); }
.ag-field select, .ag-field input[type="text"] {
padding:8px 11px; border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--fg);
font-family:var(--f-ui); font-size:13.5px; font-weight:400;
}
.ag-field input[type="file"] { font-size:12px; color:var(--muted); }
.ag-actions { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.ag-hint { font-size:11.5px; color:var(--muted); }
#ag-msg { margin-top:12px; }
/* Admin · People — one row per account, on a line, because what an admin does here is scan for the
one they mean rather than browse. Collapses to a stack on a narrow screen. */
.ap-list { display:grid; gap:8px; }
.ap-row { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(160px,1.4fr) 1fr 1fr auto auto;
gap:12px; align-items:center; padding:11px 13px; border:1px solid var(--line); border-radius:12px;
background:var(--bg); }
.ap-who { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ap-name { font-weight:700; font-size:13.5px; color:var(--fg); }
.ap-sub { font-size:12px; color:var(--muted); }
.ap-badge { font-family:var(--f-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase;
padding:2px 7px; border-radius:999px; border:1px solid var(--line-strong); color:#9fc2ff; }
.ap-badge.is-you { border-color:rgba(70,224,138,0.45); color:var(--green); }
.ap-meta { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.ap-dim { text-align:center; color:var(--muted); opacity:.5; }
.ap-del { padding:7px 14px; font-size:12.5px; }
#ap-msg { margin-bottom:12px; }
/* Admin · mebo — the spend, and what children asked that was turned down. */
.am-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-bottom:20px; }
.am-tile {
display:flex; flex-direction:column; gap:3px; padding:13px 15px; border-radius:13px;
border:1px solid rgba(43,140,255,0.2); background:rgba(7,104,255,0.06);
}
.am-tile-v { font-family:var(--f-display); font-size:17px; font-weight:700; color:var(--fg); }
.am-tile-l { font-size:12px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; }
.am-tile-n { font-size:11.5px; color:var(--muted); line-height:1.45; }
.am-h { font-family:var(--f-display); font-size:15px; margin:0 0 2px; color:var(--fg); }
.am-flag {
margin-top:10px; padding:12px 14px; border-radius:13px;
border:1px solid rgba(255,93,108,0.3); background:rgba(255,93,108,0.06);
}
.am-flag-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.am-asks { margin:8px 0 0; padding-left:18px; }
.am-asks li { font-size:12.5px; color:var(--muted-2); line-height:1.7; overflow-wrap:anywhere; }
.am-asks code {
font-family:var(--f-mono); font-size:10.5px; color:var(--red);
padding:1px 5px; border-radius:5px; background:rgba(255,93,108,0.12); margin-right:6px;
}
#am-msg { margin-bottom:12px; }
@media (max-width:900px) {
.ap-row { grid-template-columns:1fr auto; }
.ap-who { grid-column:1 / -1; }
}
.ag-filter { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.ag-chip { padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:transparent;
color:var(--muted); cursor:pointer; font-family:var(--f-ui); font-size:12.5px; font-weight:600; }
.ag-chip:hover { color:var(--fg); }
.ag-chip.is-active { background:var(--blue); border-color:var(--blue); color:#fff; }
.ag-cat { margin-bottom:18px; }
.ag-cat-title { font-family:var(--f-display); font-size:14px; color:var(--fg); margin:0 0 10px;
padding-bottom:6px; border-bottom:1px solid var(--line-soft); }
.ag-cat-items { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.ag-item { border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--bg); }
.ag-item-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ag-item-name { font-weight:700; font-size:13.5px; color:var(--fg); }
.ag-item-meta { font-size:11px; color:var(--muted); margin-left:auto; }
.ag-item-del { border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; padding:2px; }
.ag-item-del:hover { color:var(--red); }
.ag-looks { display:flex; flex-wrap:wrap; gap:8px; }
.ag-look { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ag-look-thumb { width:48px; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center;
background-color:#c8c8c8;
background-image:linear-gradient(45deg,#a9a9a9 25%,transparent 25%,transparent 75%,#a9a9a9 75%),
linear-gradient(45deg,#a9a9a9 25%,transparent 25%,transparent 75%,#a9a9a9 75%);
background-size:12px 12px; background-position:0 0,6px 6px; }
.ag-look-thumb img { max-width:100%; max-height:100%; image-rendering:pixelated; }
.ag-look-name { font-size:10.5px; color:var(--muted); }
.ag-look-del { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
border:none; background:var(--red); color:#fff; font-size:10px; line-height:1; cursor:pointer; }
/* ============================ Creator Hub: your games ============================ */
/* The Creator Hub's game grid. `.game-grid` shares it so the Studio's "Continue working on" cards
are the SAME cards a child already knows from the Hub, not a second design that means the same. */
#creator-list, .game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.game-card { border-radius:20px; border:1px solid rgba(43,140,255,0.2); background:var(--grad-panel);
overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.35); transition:transform .25s, border-color .25s, box-shadow .25s;
display:flex; flex-direction:column; }
.game-card.clickable { cursor:pointer; }
.game-card.clickable:hover { transform:translateY(-5px); border-color:rgba(43,140,255,0.6); box-shadow:0 18px 50px rgba(7,104,255,0.3); }
.card-cover { position:relative; flex:none; aspect-ratio:1/1; background:radial-gradient(130% 120% at 50% -10%, rgba(43,140,255,0.28), rgba(7,104,255,0.08) 55%, #070512);
background-size:cover; background-position:center; overflow:hidden; }
/* solo/multi corner badge (top-right of the cover), matching the Mebobox console (choose-game) */
.card-badge { position:absolute; top:10px; right:10px; z-index:3; display:inline-flex; align-items:center; gap:5px;
padding:4px 9px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.04em; }
.card-badge svg { width:12px; height:12px; }
.card-badge.is-multi { background:rgba(70,224,138,0.16); border:1px solid rgba(70,224,138,0.5); color:var(--green); }
.card-badge.is-solo { background:rgba(43,140,255,0.14); border:1px solid rgba(43,140,255,0.45); color:#5fa0f5; }
.card-cover::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px); pointer-events:none; }
/* "no cover" placeholder — the ASCII shrug, matching the Mebobox console (choose-game) */
.card-cover-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; opacity:.55; }
.card-cover-empty .shrug { font-family:var(--f-ui); font-size:24px; color:#9fd8ff; white-space:nowrap; }
.card-cover-empty .ph-txt { font-family:var(--f-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-2); }
.card-cover-actions { position:absolute; bottom:10px; right:10px; z-index:2; display:flex; gap:6px; }
.cover-btn { padding:5px 10px; border-radius:8px; background:rgba(5,3,15,0.72); border:1px solid rgba(43,140,255,0.3);
color:var(--muted-2); font-size:11px; font-weight:600; cursor:pointer; }
.cover-btn:hover { color:var(--blue); border-color:rgba(43,140,255,0.6); }
.cover-btn.danger { color:var(--red); border-color:rgba(255,93,108,0.3); }
.game-card-body { padding:16px 18px; flex:1; display:flex; flex-direction:column; }
.game-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.game-card-head > div { display:flex; align-items:center; gap:8px; min-width:0; }
.game-card-name { font-family:var(--f-display); font-weight:600; font-size:17px; }
.game-card-desc { font-size:12.5px; color:var(--muted); margin:6px 0 0; line-height:1.45;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.game-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.share-note { font-size:12.5px; margin:8px 0 0; }
.share-note code { color:#dce8ff; font-weight:600; }
.game-card-code-wrap { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.game-card-code { font-family:var(--f-mono); font-weight:600; font-size:15px; letter-spacing:3px; color:#dce8ff; text-shadow:0 0 10px rgba(43,140,255,0.55); }
.code-copy { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0;
border-radius:7px; background:transparent; border:1px solid rgba(43,140,255,0.3); color:var(--muted-2); cursor:pointer; flex:none; }
.code-copy:hover { color:var(--blue); border-color:rgba(43,140,255,0.6); }
.code-copy.copied { color:var(--green); border-color:rgba(70,224,138,0.5); }
.code-copy svg { width:14px; height:14px; }
.card-actions { display:flex; gap:8px; }
.card-actions .ghostbtn { padding:8px 12px; }
.state-badge { flex:none; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.state-badge.state-public { color:var(--green); background:rgba(70,224,138,0.12); border:1px solid rgba(70,224,138,0.45); }
.state-badge.state-friends { color:var(--blue); background:rgba(43,140,255,0.12); border:1px solid rgba(43,140,255,0.45); }
.state-badge.state-checking { color:var(--muted); background:rgba(138,147,173,0.12); border:1px solid rgba(138,147,173,0.4); }
.state-badge.state-failed { color:var(--red); background:rgba(255,93,108,0.12); border:1px solid rgba(255,93,108,0.45); }
.report.mini { margin:13px 0 0; padding:11px 13px 11px 28px; list-style:disc; border-radius:12px;
background:rgba(255,93,108,0.08); border:1px solid rgba(255,93,108,0.28); color:#e6b9bf; font-size:12.5px; line-height:1.45; }
.report.mini li { margin:3px 0; }
.update-note { font-size:12.5px; margin:10px 0 0; }
.update-note.bad { color:var(--red); font-weight:600; }
/* ============================ modals ============================ */
.modal-overlay { position:fixed; inset:0; z-index:70; background:rgba(3,2,10,0.72); backdrop-filter:blur(4px);
display:flex; align-items:flex-start; justify-content:center; padding:34px 18px; overflow-y:auto; }
.modal-overlay[hidden] { display:none; }
.modal { width:600px; max-width:100%; border-radius:24px; border:1px solid rgba(43,140,255,0.32);
background:linear-gradient(180deg,#0e1330,#0a0c20); box-shadow:0 30px 90px rgba(0,0,0,0.65),0 0 60px rgba(7,104,255,0.15);
overflow:hidden; animation:wbpop .18s ease-out; }
.modal.rules { width:560px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px 16px; }
.modal-title { font-family:var(--f-display); font-weight:700; font-size:19px; margin:0; }
.modal-x { width:34px; height:34px; border-radius:9px; background:transparent; border:1px solid rgba(138,147,173,0.25);
color:var(--muted); cursor:pointer; font-size:18px; line-height:1; }
.modal-x:hover { color:var(--fg); border-color:rgba(43,140,255,0.5); }
.modal-body { padding:0 22px 22px; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:16px 22px 22px; }
.modal-body[hidden], .modal-foot[hidden] { display:none; }
/* One short form rather than a multi-step upload, so 600px is a lot of empty either side. */
.modal.is-narrow { width:480px; }
/* ============================ the two challenge forms ============================ */
/* Reporting a bug, and entering a game. Same shape: a short form, a thank-you that replaces it in
place, and nothing stored on our side. See public/account/js/report.js. */
.req { color:#ff8f8f; font-weight:700; }
/* Handles are stored lowercase, so the field shows lowercase while it is being typed —
the rule is visible instead of being applied silently after submit. */
input.is-lowercase { text-transform:lowercase; }
.hint-inline { font-weight:400; font-size:12px; color:var(--muted); }
.report-lede { margin:0 0 16px; }
.report-code { text-transform:uppercase; letter-spacing:0.16em; font-family:ui-monospace,Menlo,Consolas,monospace; }
.report-shot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.report-shot .hint { margin:0; }
.report-done { text-align:center; padding-top:8px; }
.report-done-icon { font-size:40px; line-height:1; margin-bottom:10px; }
.report-done h3 { font-family:var(--f-display); font-size:18px; margin:0 0 8px; }
.report-done p { color:var(--muted-2); font-size:14px; line-height:1.6; margin:0 0 18px; }
/* The game being entered, shown back to them — the one guard against entering the wrong one. */
.enter-game { padding:12px 14px; border-radius:12px; margin-bottom:18px;
border:1px solid rgba(255,199,74,0.28); background:rgba(255,199,74,0.07); }
.enter-game-name { margin:0; font-family:var(--f-display); font-weight:700; font-size:16px; color:var(--fg); }
.enter-game-code { margin:3px 0 0; font-family:ui-monospace,Menlo,Consolas,monospace;
letter-spacing:0.18em; font-size:13px; color:#ffc74a; }
.enter-game-desc { margin:8px 0 0; font-size:13px; color:var(--muted-2); line-height:1.55; }
.enter-game-desc[hidden] { display:none; }
/* The sentence this dialog exists to say. A child who thinks entering freezes their game stops
improving it, so it gets a box of its own rather than a line of small print. */
.enter-keepgoing { display:flex; gap:10px; margin:0 0 18px; padding:12px 14px; border-radius:12px;
border:1px solid rgba(43,140,255,0.22); background:rgba(7,104,255,0.07);
font-size:13px; line-height:1.6; color:var(--muted-2); }
.enter-keepgoing strong { color:var(--fg); }
.primary.is-gold { background:linear-gradient(180deg,#ffd977,#f0a92b); color:#2a1d00; border-color:#f0a92b; }
.primary.is-gold:hover { background:linear-gradient(180deg,#ffe49a,#ffbb42); }
/* steps */
.steps { display:flex; gap:8px; list-style:none; margin:0; padding:0 22px 18px; }
.steps .step { flex:1; display:flex; flex-direction:column; gap:7px; }
.steps .step::before { content:""; height:4px; border-radius:3px; background:rgba(43,140,255,0.15); }
.steps .step.is-active::before, .steps .step.is-done::before { background:linear-gradient(90deg,#0768ff,#2b8cff); }
.step-dot { display:none; }
.step-label { font-size:11px; font-weight:600; color:var(--muted); }
.steps .step.is-active .step-label, .steps .step.is-done .step-label { color:var(--blue); }
.wizard-step { display:flex; flex-direction:column; }
.wizard-step[hidden] { display:none; }
/* segmented toggles (players / source) */
.seg { display:flex; gap:10px; }
.seg-btn { flex:1; padding:13px; border-radius:12px; background:transparent; border:1px solid rgba(43,140,255,0.25);
color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; }
.seg-btn:hover { border-color:rgba(43,140,255,0.5); color:var(--fg); }
.seg-btn.is-active { background:rgba(7,104,255,0.18); border-color:rgba(43,140,255,0.7); color:#fff; }
.seg-btn .reco { color:inherit; opacity:.7; }
/* code picker */
.code-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.code-option { padding:14px 6px; border-radius:12px; background:rgba(5,3,15,0.6); border:1px solid rgba(43,140,255,0.25);
cursor:pointer; font-family:var(--f-mono); font-weight:600; font-size:18px; letter-spacing:3px; color:#dce8ff;
text-shadow:0 0 12px rgba(43,140,255,0.55); display:flex; align-items:center; justify-content:center; gap:6px; }
.code-option:hover { border-color:rgba(43,140,255,0.55); color:#fff; }
.code-option.is-active { background:rgba(7,104,255,0.2); border-color:rgba(43,140,255,0.8); color:#fff; }
.code-option.code-custom { flex-direction:column; gap:4px; padding:8px; }
.code-option.code-custom input { padding:6px 4px; text-align:center; text-transform:uppercase; letter-spacing:4px;
font-family:var(--f-mono); font-weight:600; font-size:16px; color:#dce8ff; background:transparent; border:none; }
.code-option.code-custom input:focus { box-shadow:none; }
.code-custom-status { font-size:10.5px; font-weight:600; color:var(--muted); }
.code-custom-status.good { color:var(--green); }
/* Make-public toggle + admin change-code row in the game edit modal. */
.toggle-row { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--fg); cursor:pointer; font-weight:500; }
.toggle-row input { width:auto; margin:0; flex:none; accent-color:var(--blue); }
#g-admincode-wrap { display:flex; align-items:center; gap:12px; }
#g-admincode { width:130px; text-transform:uppercase; letter-spacing:3px; font-family:var(--f-mono); }
/* game-type (engine) picker — step 1 of the upload wizard */
.engine-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.engine-option { display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:12px; cursor:pointer;
background:rgba(5,3,15,0.6); border:1px solid rgba(43,140,255,0.25); text-align:left; }
.engine-option:hover { border-color:rgba(43,140,255,0.55); }
.engine-option.is-active { background:rgba(7,104,255,0.2); border-color:rgba(43,140,255,0.8); }
.engine-option:focus-visible { outline:2px solid rgba(43,140,255,0.8); outline-offset:2px; }
.engine-name { font-weight:700; font-size:15px; color:#fff; }
.engine-blurb { font-size:12.5px; line-height:1.45; color:var(--muted); }
.engine-learn { font-size:12px; font-weight:600; color:var(--link, #6fb0ff); text-decoration:none; margin-top:auto; }
.engine-learn:hover { text-decoration:underline; }
@media (max-width:520px) { .engine-options { grid-template-columns:1fr; } }
/* controls mapping (non-SDK engines) — folded in the Information step */
.controls-field > summary { cursor:pointer; font-weight:600; font-size:13px; color:var(--fg); list-style:none;
padding:6px 0; user-select:none; }
.controls-field > summary::-webkit-details-marker { display:none; }
.controls-field > summary::before { content:'▸'; display:inline-block; margin-right:8px; color:var(--muted); transition:transform .15s; }
.controls-field[open] > summary::before { transform:rotate(90deg); }
.ctrl-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 14px; margin-top:8px; }
.ctrl-row { display:grid; grid-template-columns:72px 1fr; align-items:center; gap:10px; min-width:0; }
.ctrl-label { font-size:13px; color:var(--muted); font-weight:600; }
.ctrl-key { min-width:0; width:100%; padding:7px 10px; border-radius:9px; background:rgba(5,3,15,0.6);
border:1px solid rgba(43,140,255,0.25); color:#dce8ff; font-family:var(--f-mono); font-size:13px; cursor:pointer; text-align:center; box-sizing:border-box; }
.ctrl-key:hover { border-color:rgba(43,140,255,0.55); }
.ctrl-key.capturing { border-color:var(--green); color:#fff; box-shadow:0 0 0 2px rgba(60,220,130,0.25); }
.ctrl-key.is-unset { color:var(--muted); font-style:italic; }
@media (max-width:520px) { .ctrl-grid { grid-template-columns:1fr; } }
/* confirm dialog (styled replacement for window.confirm) */
.modal.confirm { max-width:430px; }
.confirm-body { font-size:14px; line-height:1.55; color:var(--fg); margin:0; }
.confirm-code { font-family:var(--f-mono); font-size:12px; letter-spacing:1px; padding:1px 6px; border-radius:6px;
background:rgba(43,140,255,0.14); color:#dce8ff; }
/* a destructive primary button (e.g. Delete) — red instead of blue */
.primary.danger { background:linear-gradient(180deg,#ff6472,#e23b4c); border-color:rgba(255,93,108,0.6);
box-shadow:0 6px 18px rgba(226,59,76,0.35); }
/* Creator-card action icons: run (green) · edit (pencil) · delete (red) */
.card-actions { display:flex; gap:6px; align-items:center; }
.card-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
border-radius:9px; background:transparent; border:1px solid rgba(43,140,255,0.25); color:var(--fg); cursor:pointer; transition:border-color .12s, background .12s; }
.card-icon svg { width:17px; height:17px; }
.card-icon:hover:not(:disabled) { border-color:rgba(43,140,255,0.55); }
.card-icon:disabled { opacity:.3; cursor:default; }
.card-icon.play { color:var(--green); border-color:rgba(70,224,138,0.35); }
.card-icon.play:hover:not(:disabled) { border-color:rgba(70,224,138,0.7); background:rgba(70,224,138,0.1); }
.card-icon.del { color:var(--red); border-color:rgba(255,93,108,0.3); }
.card-icon.del:hover:not(:disabled) { border-color:rgba(255,93,108,0.6); background:rgba(255,93,108,0.1); }
/* in-browser tester */
.play-modal { max-width:min(96vw,1000px); width:1000px; }
.play-frame-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.play-frame { width:100%; height:100%; border:0; display:block; background:#000; }
.play-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; pointer-events:none; }
.play-loading[hidden] { display:none; }
.play-legend { font-size:12px; color:var(--muted); text-align:center; margin:12px 0 0; }
.play-legend b { color:var(--fg); font-weight:600; }
.play-msg { color:var(--red); margin-left:6px; }
.code-custom-status.bad { color:var(--red); }
/* cover picker (step 1) */
.cover-pick { display:flex; align-items:center; gap:14px; }
.cover-preview { flex:none; width:64px; height:64px; border-radius:12px; background:radial-gradient(120% 120% at 50% 0%, rgba(43,140,255,0.3), #070512);
border:1px solid rgba(43,140,255,0.3); background-size:cover; background-position:center; }
.cover-preview.has-img { border-color:rgba(43,140,255,0.6); }
.cover-pick-actions { flex:1; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.cover-btn-row { display:flex; align-items:center; gap:10px; }
/* git source */
.git-row { display:flex; gap:10px; }
.git-row input { flex:1; }
.git-row .ghostbtn { flex:none; }
.visibility-note { font-size:13px; color:#c2cadd; background:rgba(7,104,255,0.06); border:1px solid rgba(43,140,255,0.16);
border-radius:11px; padding:12px 14px; margin:16px 0 8px; }
.rules-prompt { font-size:13px; color:var(--muted); margin:8px 0 0; }
/* play / submitted state */
.play-state { text-align:center; padding:14px 8px 24px; }
.play-icon { width:64px; height:64px; border-radius:50%; margin:6px auto 18px; display:flex; align-items:center; justify-content:center; font-size:30px; }
.play-icon.ok { background:rgba(70,224,138,0.12); border:1px solid rgba(70,224,138,0.45); color:var(--green); box-shadow:0 0 28px rgba(70,224,138,0.3); }
.play-title { font-family:var(--f-display); font-weight:700; font-size:23px; margin:0 0 8px; }
.play-msg { font-size:14px; color:var(--muted); line-height:1.55; max-width:380px; margin:0 auto 22px; }
.play-code-wrap { display:flex; flex-direction:column; gap:8px; align-items:center; }
.play-code-wrap[hidden] { display:none; }
.play-code-label { font-size:12.5px; color:var(--muted); }
.play-code-row { display:flex; align-items:center; gap:12px; }
.big-code { display:inline-flex; padding:14px 22px; border-radius:14px; background:rgba(5,3,15,0.7);
border:1px solid rgba(43,140,255,0.4); box-shadow:inset 0 0 22px rgba(7,104,255,0.2);
font-family:var(--f-mono); font-weight:600; font-size:34px; letter-spacing:9px; color:#eaf2ff;
text-shadow:0 0 16px rgba(43,140,255,0.85); animation:wbsnap .6s cubic-bezier(.2,.8,.2,1) both; }
/* house rules modal */
.rules-body { max-height:64vh; overflow-y:auto; }
.rules-intro, .rules-outro { font-size:13.5px; color:var(--muted); line-height:1.55; }
/* The two halves of the popover — what a game may be about, and what it has to be inside. Each gets
a heading so nobody reads a content rule as a packaging one. */
.rules-sub { margin:18px 0 8px; font-size:13.5px; color:var(--fg); }
.rules-glance { margin:0; padding-left:20px; }
.rules-glance li { font-size:13px; color:var(--muted); line-height:1.5; margin:5px 0; }
.rules-glance li strong { color:var(--fg); font-weight:600; }
.rule-group { margin:18px 0; }
.rule-group h3 { display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:600; font-size:15px; margin:0 0 8px; }
.rule-icon { flex:none; width:18px; height:18px; color:var(--blue); }
.rule-group ul { margin:0; padding-left:20px; }
.rule-group li { font-size:13px; color:var(--muted); line-height:1.5; margin:4px 0; }
/* ============================ footer ============================ */
.legal-footer { position:relative; z-index:1; margin-top:48px; padding:24px 22px; border-top:1px solid rgba(43,140,255,0.12);
display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--muted); }
.legal-footer a { color:var(--muted); }
.legal-footer a:hover { color:var(--blue); }
/* ============================ responsive ============================ */
@media (max-width:640px) {
.row { grid-template-columns:1fr; }
.account-grid { grid-template-columns:1fr; }
.appbar-brand .name { display:none; }
/* The competition pill stays on a phone — it just shrinks to its trophy (see .appbar-challenge). */
.page-title { font-size:26px; }
}
/* In Update mode the modal hides new-game-only chrome (wizard steps, code picker, consent, notes);
the OPTIONAL "new build" source is revealed by JS when the toggle is ticked. */
#upload-modal.mode-update .steps,
#upload-modal.mode-update #g-code-field,
#upload-modal.mode-update .consent,
#upload-modal.mode-update .visibility-note,
#upload-modal.mode-update .rules-prompt { display:none; }
.update-only { display:none; }
#upload-modal.mode-update .update-only { display:flex; }
#upload-modal.mode-update .update-only[hidden] { display:none; }
#upload-modal.mode-update #g-buildmode-field,
#upload-modal.mode-update #g-studio-edit { flex-direction:column; }
/* Replacing the build is the most common reason to open this screen, so in update mode the source
step is ordered ABOVE the details. Done with flex order rather than moving DOM, so the create-mode
wizard keeps its natural 1-2-3-4 sequence. */
#upload-modal.mode-update .modal-body { display:flex; flex-direction:column; }
#upload-modal.mode-update .wizard-step[data-step="3"] { order:1; }
#upload-modal.mode-update .wizard-step[data-step="2"] { order:2; }
/* A Creator Studio game can't be updated by uploading files — this replaces the source picker. */
.studio-edit-card { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
padding:16px; border-radius:14px; border:1px solid rgba(43,140,255,0.28);
background:linear-gradient(180deg,rgba(43,140,255,0.12),rgba(43,140,255,0.04)); }
.studio-edit-card > div { flex:1; min-width:220px; }
.studio-edit-title { margin:0 0 4px; font-family:var(--f-display); font-size:15px; font-weight:700; }
.studio-edit-card .hint { margin:0; }
#upload-modal.mode-update #g-build-source { margin-top:6px; }
.ctrl-warn { color:var(--red); font-weight:600; }
/* Failed-game error popover — click-to-open, overlays the card so it never pushes other cards down */
.report-btn { font:inherit; font-size:12px; font-weight:600; color:#ffb4b4; background:rgba(255,80,80,0.12);
border:1px solid rgba(255,80,80,0.4); border-radius:9px; padding:5px 10px; cursor:pointer; margin:13px 0 0; }
.report-btn:hover { background:rgba(255,80,80,0.2); }
/* the full-findings modal */
.report-modal-intro { font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 14px; }
.report-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
max-height:52vh; overflow-y:auto; }
.report-item { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px;
font-size:13.5px; line-height:1.5; }
.report-item.is-error { background:rgba(255,93,108,0.09); border:1px solid rgba(255,93,108,0.32); color:#f0c8ce; }
.report-item.is-warn { background:rgba(234,179,8,0.08); border:1px solid rgba(234,179,8,0.28); color:#f0dca0; }
.report-item::before { flex:none; font-size:14px; line-height:1.4; }
.report-item.is-error::before { content:'✕'; color:#ff8a97; }
.report-item.is-warn::before { content:'⚠'; color:#f7d774; }
.report-item-msg { flex:1; min-width:0; }
.report-item-code { flex:none; align-self:center; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.3px;
color:var(--muted); background:rgba(255,255,255,0.04); border:1px solid rgba(138,147,173,0.2);
border-radius:6px; padding:2px 6px; }
/* The controls editor key picker is a