:root {
  --bg: #07080f;
  --panel: #10121d;
  --panel-2: #171a29;
  --line: #262a40;
  --text: #eef0ff;
  --muted: #8f95b8;
  --accent: #107c10;
  --accent-2: #9bf00b;
  --pink: #6cc24a;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  background-image:
    radial-gradient(60rem 30rem at 15% -10%, rgba(16, 124, 16, 0.22), transparent 60%),
    radial-gradient(50rem 28rem at 90% 0%, rgba(155, 240, 11, 0.14), transparent 60%);
  background-repeat: no-repeat;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

/* nav */
.nav {
  display: flex; align-items: center; gap: 28px;
  padding: 18px max(20px, 4vw);
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 8, 15, 0.7); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(38, 42, 64, 0.6);
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.logo-img { display: block; width: 32px; height: 32px; }
.logo-text b { font-weight: 800; background: linear-gradient(90deg, #107c10, #52b043); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { color: var(--accent-2); margin-right: 4px; }
.main-nav { display: flex; gap: 6px; margin-inline: auto; }
.main-nav a { color: var(--muted); font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 8px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.main-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.main-nav a[aria-current="page"] { color: var(--text); }
.cta-green {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: #107c10; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700;
  padding: 9px 20px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(16, 124, 16, 0.25); transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.cta-green:hover { background: #0e6b0e; box-shadow: 0 0 0 4px rgba(16, 124, 16, 0.32); }
.cta-green:active { transform: translateY(1px); }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 11px; width: 16px; height: 2px; background: var(--text); content: ""; border-radius: 2px; }
.menu-btn span { top: 18px; } .menu-btn span::before { top: -5px; left: 0; } .menu-btn span::after { top: 5px; left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.simple-page { max-width: 640px; margin: 0 auto; padding: 120px max(20px, 4vw) 100px; text-align: center; }
.simple-page h1 { font-size: clamp(32px, 6vw, 48px); }
.simple-page .sub { margin-bottom: 28px; }
.badge {
  font-size: 12px; padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--accent-2);
}

/* hero */
.hero { position: relative; z-index: 2; isolation: isolate; padding: 84px max(20px, 4vw) 0; text-align: center; }
.hero-inner { max-width: 820px; margin: 0 auto; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.hero-bg video {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
@media (max-width: 900px) {
  .hero-bg video { height: 100%; aspect-ratio: auto; }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(7, 8, 15, 0.7), rgba(7, 8, 15, 0.15) 75%),
    linear-gradient(to bottom, rgba(7, 8, 15, 0.55) 0%, rgba(7, 8, 15, 0) 30%, rgba(7, 8, 15, 0) 60%, var(--bg) 100%);
}
.hero h1 { text-shadow: 0 4px 40px rgba(7, 8, 15, 0.8); margin-bottom: 36px; }
  margin-top: 34px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
  background: rgba(16, 18, 29, 0.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 99px; padding: 7px 16px;
}
@keyframes pulse { 50% { opacity: 0.35; } }
.eyebrow { color: var(--accent-2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin: 0 0 14px; }
h1 { font-size: clamp(36px, 7vw, 68px); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 18px; }
.grad { background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 34px; }

.create {
  text-align: left;
  background: rgba(16, 18, 29, 0.78);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(16, 124, 16, 0.35);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 30px 80px -30px rgba(16, 124, 16, 0.35);
}
textarea {
  width: 100%; resize: vertical; min-height: 84px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font: inherit; font-size: 16px;
}
textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea::placeholder { color: #5d6388; }

.chip-group { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.chip-label { width: 70px; color: var(--muted); font-size: 13px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 6px 14px; font: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--accent); }
/* option tiles (genre, art style): uniform grid, left-aligned, restrained selected state */
.chip-group.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.chip-group.stack .chip-label { width: auto; }
.chips.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.chip.has-ex {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
  text-align: left; padding: 10px 12px; border-radius: 10px; background: transparent; border-color: var(--line);
  transition: border-color 0.15s, background 0.15s;
}
.chip.has-ex:hover { border-color: #3d446b; background: rgba(255, 255, 255, 0.03); }
.chip.has-ex .chip-name { font-size: 14px; font-weight: 600; color: var(--text); }
.chip-ex { font-size: 12px; line-height: 1.3; color: #7c84a8; font-weight: 400; }
.chip.has-ex[aria-pressed="true"] { background: rgba(16, 124, 16, 0.13); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip.has-ex[aria-pressed="true"] .chip-ex { color: #bfe3bb; }
@media (max-width: 760px) { .chips.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip[aria-pressed="true"] { background: rgba(16, 124, 16, 0.2); border-color: var(--accent); color: #fff; }

.advanced { margin-top: 14px; color: var(--muted); }
.advanced summary { cursor: pointer; font-size: 13px; user-select: none; }
.advanced summary:hover { color: var(--text); }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.adv-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 10px; font: inherit;
}

.create-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.hint { color: #5d6388; font-size: 12.5px; }
.error { color: #ff7a90; margin: 12px 0 0; font-size: 14px; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 12px; padding: 10px 18px; border: 1px solid transparent;
  transition: transform 0.1s, opacity 0.15s, border-color 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #2e9e2e); color: #fff; }
.btn.primary:hover { opacity: 0.92; }
.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.big { font-size: 18px; padding: 16px 32px; border-radius: 16px; }
.btn.small { padding: 4px 10px; font-size: 12px; }

.suggest { margin-top: 22px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }
#suggestions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.suggest button {
  background: none; border: 1px dashed var(--line); color: var(--muted);
  border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.suggest button:hover { color: var(--text); border-color: var(--muted); }

/* sections */
.section { max-width: 1040px; margin: 0 auto; padding: 56px max(20px, 4vw) 10px; }
.section h2 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 6px; }
.section-sub { color: var(--muted); margin: 0 0 24px; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* a short last row is centred, not left with an empty slot */
.cards > * { flex: 0 1 calc((100% - 32px) / 3); min-width: min(290px, 100%); }
@media (max-width: 1000px) { .cards > * { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 640px) { .cards > * { flex-basis: 100%; } }
.card {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; overflow: hidden; transition: transform 0.15s, border-color 0.15s;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card-art { aspect-ratio: 16 / 9; background: #0a0b14; overflow: hidden; }
.card-art canvas { display: block; width: 100%; height: 100%; transition: transform 0.35s ease; }
.card:hover .card-art canvas { transform: scale(1.04); }
.card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.card-body b { display: block; margin-bottom: 4px; }
.card-body span { color: var(--muted); font-size: 13.5px; }
.card-tags { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.card-tags i { font-style: normal; font-size: 11.5px; color: var(--accent-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }

.steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.steps li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.steps span { color: var(--muted); }
.footer { text-align: center; color: #5d6388; font-size: 13px; padding: 60px 20px 40px; }

@media (max-width: 900px) {
  .nav { gap: 12px; flex-wrap: wrap; }
  .logo { margin-right: auto; }
  .nav .badge { display: none; }
  .menu-btn { display: block; order: 3; }
  .cta-green { order: 2; padding: 8px 16px; font-size: 14px; }
  .main-nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; margin: 0; padding-top: 8px; gap: 2px; }
  .nav.open .main-nav { display: flex; }
  .main-nav a { padding: 11px 12px; font-size: 16px; }
}
@media (max-width: 760px) {
  .chip-label { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg video { display: none; }
  .hero-bg { background: var(--bg) url("media/hero-poster.jpg") center / cover; }
    html { scroll-behavior: auto; }
}

.advanced .chip-group { margin-top: 12px; }

/* Desktop hero layout: headline on top, the games' prompt intros in the middle of the video,
   and the create box starting below them so the background games stay visible.
   Sizes track the viewport width because the 16:9 video does. */
@media (min-width: 901px) {
  .hero { padding-top: 3.2vw; }
  .hero h1 { font-size: clamp(40px, 5vw, 76px); margin-bottom: 0; }
  .hero .create { margin-top: calc(20.5vw - 1.5in); } /* was 23vw before the headline got a third line; raised a little, not a full line, so it stays clear of the prompt cards in the video */
}

/* ── light surfaces: header + prompt box (#fcfcfb) ── */
.nav { background: #fcfcfb; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #e6e5df; color-scheme: light; }
.nav .logo { color: #14151f; }
.nav .logo-mark { color: #0b6a0b; }
.main-nav a { color: #5d6175; }
.main-nav a:hover { color: #14151f; background: rgba(20, 21, 31, 0.05); }
.main-nav a[aria-current="page"] { color: #14151f; }
.nav .badge { border-color: #dcdbd4; color: #0e7a0e; }
.menu-btn { border-color: #dcdbd4; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { background: #14151f; }
.nav .btn.ghost { color: #14151f; border-color: #dcdbd4; }
.user-chip, .user-chip .uname { color: #14151f; }

.create { background: rgba(252, 252, 251, 0.84); border: 1px solid rgba(228, 227, 221, 0.9); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); color-scheme: light;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.create textarea { background: rgba(243, 242, 238, 0.75); color: #14151f; border-color: #e4e3dd; }
.create textarea::placeholder { color: #9a9aa8; }
.create textarea:focus, .create select:focus { outline-color: var(--accent); }
.create select { background: rgba(243, 242, 238, 0.75); color: #14151f; border-color: #e4e3dd; }
.create .chip-label, .create .advanced, .create .advanced summary, .create .adv-grid label { color: #5d6175; }
.create .advanced summary:hover { color: #14151f; }
.create .hint { color: #9a9aa8; }
.create .error { color: #d6334f; }
.create .chip.has-ex { border-color: #e4e3dd; background: transparent; }
.create .chip.has-ex:hover { border-color: #c9c8c0; background: #f3f2ee; }
.create .chip.has-ex .chip-name { color: #14151f; }
.create .chip-ex { color: #80849a; }
.create .chip.has-ex[aria-pressed="true"] { background: rgba(16, 124, 16, 0.09); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.create .chip.has-ex[aria-pressed="true"] .chip-ex { color: #0b6a0b; }

.login-link { color: #14151f; font-size: 14.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background 0.15s; }
.login-link:hover { background: rgba(20, 21, 31, 0.07); }
@media (max-width: 900px) { .login-link { order: 2; padding: 8px 10px; } }
@media (max-width: 440px) { .login-link { display: none; } }

/* ── lower half of the home page: same off-white as the prompt box ── */
.light-zone {
  background: #fcfcfb; color: #14151f; color-scheme: light; padding-top: 8px;
  --panel: #fcfcfb; --panel-2: #f3f2ee; --line: #e4e3dd; --text: #14151f; --muted: #5d6175;
}
.light-zone .section h2 { color: #14151f; }
.light-zone .card { background: #fcfcfb; box-shadow: 0 1px 2px rgba(20, 21, 31, 0.05), 0 8px 24px -16px rgba(20, 21, 31, 0.25); }
.light-zone .card:hover { box-shadow: 0 2px 4px rgba(20, 21, 31, 0.06), 0 16px 32px -16px rgba(16, 124, 16, 0.4); }
.light-zone .card-tags i { color: #0e7a0e; border-color: #e4e3dd; background: #f3f2ee; }
.light-zone .steps li { background: #f3f2ee; }
.light-zone .footer { color: #8b8fa1; border-top: 1px solid #e4e3dd; margin-top: 56px; padding: 28px 20px 36px; }

/* The prompt box straddles the edge between the video and the off-white section below it. */
:root { --overlap: 96px; }
.hero .create { position: relative; z-index: 3; margin-bottom: calc(var(--overlap) * -1); }
.light-zone { position: relative; z-index: 1; padding-top: calc(var(--overlap) + 20px); }
.light-zone .suggest { margin: 0 auto; padding: 0 20px 8px; color: #8b8fa1; }
.light-zone .suggest button { background: #fcfcfb; border: 1px solid #e4e3dd; color: #5d6175; }
.light-zone .suggest button:hover { color: #14151f; border-color: #c9c8c0; background: #f3f2ee; }
.hero-bg { bottom: var(--overlap); }

/* compact prompt box: genre sits right under the idea field */
.create .chip-group { margin-top: 8px; }
.create .create-foot { justify-content: flex-end; margin-top: 12px; }

/* anchor jumps (Sample Games): leave room for the sticky header so the heading stays in view */
#examples { scroll-margin-top: 60px; }

/* dropdown pickers in the home prompt box */
.pickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.picker { min-width: 0; }
.picker-label { display: block; font-size: 12.5px; color: #5d6175; margin: 0 0 6px 2px; }
.dd { position: relative; }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font: inherit; font-size: 14.5px; color: #14151f; background: rgba(252, 252, 251, 0.9); border: 1px solid #dcdbd4; border-radius: 12px; padding: 11px 14px; cursor: pointer; }
.dd-btn:hover { border-color: #c2c1b8; }
.dd-btn[aria-expanded="true"], .dd-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dd-value { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dd-value.placeholder { font-weight: 400; color: #8b8fa1; }
.dd-caret { flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; border-right: 2px solid #5d6175; border-bottom: 2px solid #5d6175; transform: rotate(45deg); transition: transform 0.15s; }
.dd-btn[aria-expanded="true"] .dd-caret { transform: rotate(-135deg); margin-top: 2px; }
.dd-list { position: absolute; z-index: 30; left: 0; min-width: 100%; width: max-content; max-width: min(380px, 90vw); top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 272px; overflow-y: auto; overscroll-behavior: contain; background: #fcfcfb; border: 1px solid #e4e3dd; border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(20, 21, 31, 0.4); }
.dd-opt { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.dd-name { font-weight: 600; font-size: 14px; color: #14151f; }
.dd-ex { font-size: 12px; color: #80849a; }
.dd-opt.active { background: #f3f2ee; }
.dd-opt[aria-selected="true"] { background: rgba(16, 124, 16, 0.1); }
.dd-opt[aria-selected="true"] .dd-name::after { content: " ✓"; color: #0b6a0b; }
@media (max-width: 760px) { .pickers { grid-template-columns: 1fr; } .dd-list { width: 100%; } }

/* "Try:" suggestions live inside the prompt box, to the left of Generate game */
.create .create-foot { justify-content: space-between; align-items: center; gap: 16px; }
.create .suggest { margin: 0; justify-content: flex-start; flex: 1; min-width: 0; font-size: 13px; color: #8b8fa1; gap: 8px; flex-wrap: nowrap; }
.create .suggest > span { flex: none; }
.create #suggestions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.create .suggest button { background: rgba(252, 252, 251, 0.9); border: 1px solid #dcdbd4; color: #5d6175; padding: 5px 11px; font-size: 12.5px; }
.create .suggest button:hover { color: #14151f; border-color: #c2c1b8; background: #f3f2ee; }
.create #generateBtn { flex: none; }
.light-zone { padding-top: calc(var(--overlap) + 8px); }
@media (max-width: 760px) { .create .create-foot { flex-direction: column-reverse; align-items: stretch; } .create #generateBtn { width: 100%; } .create .suggest { flex-wrap: wrap; } }

/* sample cards: "User prompt:" label + video thumbnails */
.card-prompt { display: block; color: var(--muted); font-size: 13.5px; }
.card-prompt strong { color: #14151f; font-weight: 400; }
.card-art video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card:hover .card-art video { transform: scale(1.04); }

/* Desktop: slide the video up so the bottom of the games (the rifle, the hero) clears the prompt box.
   The prompt intros inside the video were drawn 200 units lower to cancel this shift, so they stay put. */
@media (min-width: 901px) {
  .hero-bg video {
    top: -15.625vw;   /* 200 video units */
    height: max(56.25vw, calc(100% + 15.625vw)); /* always reach the bottom edge, even on narrower windows */
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    opacity: 0.85;
  }
  .hero-bg::after {
    background:
      radial-gradient(60% 40% at 50% 22%, rgba(7, 8, 15, 0.6), rgba(7, 8, 15, 0) 75%),
      linear-gradient(to bottom, rgba(7, 8, 15, 0.45) 0%, rgba(7, 8, 15, 0) 25%, rgba(7, 8, 15, 0) 82%, var(--bg) 100%);
  }
}

/* the hero headline sits on a dark video: use bright greens (the dark brand green was hard to read) plus a soft dark glow */
.hero .grad { background: linear-gradient(90deg, #8cf53c, #c8ff4a 70%, #e4ff7a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.7)); }

/* the home page prompt box keeps its size: no drag handle in the corner */
.hero .create textarea { resize: none; }

/* a signed-in header is wider (name, Sign out, credits): on medium screens tighten it so the page never scrolls sideways */
@media (max-width: 1180px) and (min-width: 901px) {
  .nav { gap: 10px; padding-inline: 16px; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 7px 6px; font-size: 13.5px; }
  .nav .user-chip .uname { display: none; }
}

/* header items keep their size: a wrapping logo or a squeezed chip is what made the nav jump when the signed-in chip arrived */
@media (min-width: 901px) {
  .nav .logo, .nav .auth-area, .nav .login-link, .nav .cta-green { flex: none; white-space: nowrap; }
  .nav .user-chip { flex: none; white-space: nowrap; }
}

/* signed-in chip in the header: a quiet initial badge, the name, and a plain Sign out */
.nav .user-chip { gap: 10px; }
.nav .user-chip .avatar { width: 32px; height: 32px; background: #e9f3e9; color: #0e5a0e; border: 1px solid #cfe3cf; font-size: 13px; font-weight: 600; letter-spacing: 0; box-sizing: border-box; }
.nav .user-chip .avatar img { border-radius: 50%; }
.nav .user-chip .uname { font-size: 13.5px; font-weight: 500; color: #14151f; }
.nav .user-chip .btn.ghost { padding: 6px 10px; border-color: transparent; border-radius: 8px; background: transparent; color: #5d6175; font-size: 13px; font-weight: 500; }
.nav .user-chip .btn.ghost:hover { background: #efeee8; color: #14151f; border-color: transparent; }
.nav .user-chip .btn.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the avatar and name in the header chip open Settings */
.user-chip .chip-link { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; border-radius: 99px; }
.user-chip .chip-link:hover .uname, .user-chip .chip-link:focus-visible .uname { text-decoration: underline; }
.user-chip .chip-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.footer a { text-decoration: underline; }

/* The Station 720 logo (same mark and wordmark as the header) centred at the top of the sign-in card and dialog. */
.auth-logo { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 25px; color: #14151f; }
.auth-logo .logo-img { width: 48px; height: 48px; }

/* the fine print under the Google button (sign-in page and dialog) */
.auth-terms { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: #8b8fa1; }
.auth-terms a { color: #5d6175; text-decoration: underline; text-underline-offset: 2px; }
.auth-terms a:hover { color: #14151f; }
.google-slot { margin-top: 2px; }
.login-note:empty, .modal-note:empty { display: none; } /* no message: no gap above the fine print */
.auth-terms { margin-top: 14px; }

/* sign-in: placeholder while Google's button loads, retry when it is blocked, what you get, the saved idea */
.google-slot { min-height: 50px; }
.google-slot[hidden] { display: none; }
.google-skel { width: 100%; height: 50px; border-radius: 999px; background: linear-gradient(90deg, #efeee8 25%, #f7f6f2 50%, #efeee8 75%); background-size: 200% 100%; animation: google-skel 1.3s ease-in-out infinite; }
@keyframes google-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .google-skel { animation: none; } }
.auth-retry { width: 100%; padding: 14px 16px; border: 1px solid #f0cfc6; background: #fdf3f0; border-radius: 16px; text-align: center; }
.auth-retry p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: #8a3a22; }
.auth-perk { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 5px 12px; border-radius: 99px; background: #e8f3e8; color: #0b5a0b; font-size: 13px; font-weight: 600; }
.auth-perk::before { content: "✓"; font-weight: 800; }
.auth-perk:empty { display: none; }
.auth-idea { text-align: left; background: #f3f2ee; border: 1px solid #e4e3dd; border-radius: 14px; padding: 12px 14px; margin: 0 0 18px; }
.auth-idea .idea-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5d6175; }
.auth-idea .idea-text { margin: 6px 0 0; font-size: 14px; color: #14151f; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.auth-idea .idea-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.auth-idea .idea-tags:empty { display: none; }
.auth-idea .idea-tags span { font-size: 12px; color: #5d6175; border: 1px solid #e4e3dd; border-radius: 99px; padding: 2px 10px; background: #fcfcfb; }