/* Cool Kids Activities -- the product bar.
 *
 * ONE bar, on every page of the app: landing, sign-in, the launcher, the game,
 * the account page and the platform console. It carries the brand, who you are
 * signed in as, the way to your account, light/dark and sign out.
 *
 * It has to sit on top of two stylesheets that disagree about almost
 * everything -- shared/base.css (the room: 100vh, overflow hidden, a bingo skin
 * repainting every colour variable) and shared/app.css (the office) -- so:
 *
 *   - every class is `ck-` prefixed and every custom property is `--ck-`, so
 *     nothing here collides with either, and neither can restyle it by
 *     accident. base.css already defines .brand and .icon-btn; app.css defines
 *     .btn and .brand-2. Sharing those names is how a bar looks subtly
 *     different on the page you did not test.
 *   - the palette is fixed brand colour, never theme-derived. The bar looking
 *     identical everywhere is the entire point; a bar that turned Mardi Gras
 *     purple on the game page would just be the old inconsistency with extra
 *     steps.
 *
 * Light/dark comes from three places because there are three ways the app
 * expresses it: [data-theme] (the consoles' own toggle), [data-mode] (stamped
 * by theme.js applyTheme on game pages), and the system preference.
 */

:root {
  --ck-surface: #ffffff;
  --ck-ink: #2b2250;
  --ck-ink-soft: #5b5570;
  --ck-line: #e2ddd4;
  --ck-accent: #3e2f70;
  --ck-accent-ink: #ffffff;
  --ck-coral: #cc3a3e;
  --ck-hover: rgba(43, 34, 80, 0.06);
  --ck-shadow: 0 0.25rem 0.75rem rgba(43, 34, 80, 0.10);
  --ck-h: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-mode="light"]) {
    --ck-surface: #221c3d; --ck-ink: #f4f1ea; --ck-ink-soft: #b3accb;
    --ck-line: #38315c; --ck-accent: #8f7fe8; --ck-accent-ink: #14102a;
    --ck-coral: #ff686b; --ck-hover: rgba(255, 255, 255, 0.08);
    --ck-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"], :root[data-mode="dark"] {
  --ck-surface: #221c3d; --ck-ink: #f4f1ea; --ck-ink-soft: #b3accb;
  --ck-line: #38315c; --ck-accent: #8f7fe8; --ck-accent-ink: #14102a;
  --ck-coral: #ff686b; --ck-hover: rgba(255, 255, 255, 0.08);
  --ck-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"], :root[data-mode="light"] {
  --ck-surface: #ffffff; --ck-ink: #2b2250; --ck-ink-soft: #5b5570;
  --ck-line: #e2ddd4; --ck-accent: #3e2f70; --ck-accent-ink: #ffffff;
  --ck-coral: #cc3a3e; --ck-hover: rgba(43, 34, 80, 0.06);
  --ck-shadow: 0 0.25rem 0.75rem rgba(43, 34, 80, 0.10);
}

/* ---------- the bar ---------- */
.ck-bar {
  flex: 0 0 auto;                 /* base.css makes body a flex column */
  width: 100%;
  background: var(--ck-surface);
  border-bottom: 0.0625rem solid var(--ck-line);
  color: var(--ck-ink);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  position: sticky; top: 0; z-index: 60;
}

/* In the room. The bar stays put through a whole game -- a director glancing up
   mid-session should always find the brand and the way out where they left them
   -- so instead of leaving, it takes up less room: shorter, smaller type, icon
   buttons without their labels. It was previously hidden during play, which
   made it exactly as useful as not being there. */
.ck-bar-slim {
  --ck-h: 1.95rem;
}
.ck-bar-slim .ck-brand svg { width: 1.35rem; height: 1.35rem; }
.ck-bar-slim .ck-brand-1 { font-size: 0.85rem; }
.ck-bar-slim .ck-brand-2 { font-size: 0.72rem; }
.ck-bar-slim .ck-btn { padding: 0.2rem 0.45rem; font-size: 0.78rem; }
.ck-bar-slim .ck-btn-icon { width: 1.35rem; height: 1.35rem; padding: 0; }
.ck-bar-slim .ck-i { width: 0.82rem; height: 0.82rem; }
.ck-bar-slim .ck-bar-in { width: min(84rem, 100% - 1.1rem); gap: 0.4rem; }

.ck-bar-in {
  display: flex; align-items: center; gap: 0.6rem;
  height: var(--ck-h);
  width: min(84rem, 100% - 1.6rem);
  margin-inline: auto;
}

.ck-brand {
  display: flex; align-items: center; gap: 0.45rem;
  text-decoration: none; color: inherit; flex: none;
}
.ck-brand svg { width: 1.7rem; height: 1.7rem; flex: none; display: block; }
.ck-brand-words { display: flex; align-items: baseline; gap: 0.3rem; line-height: 1; }
.ck-brand-1 {
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800; font-size: 1rem; white-space: nowrap;
}
.ck-brand-2 {
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700; font-size: 0.82rem; color: var(--ck-coral); white-space: nowrap;
}
@media (max-width: 26rem) { .ck-brand-words { display: none; } }

/* Whose account this is, beside the lockup. The pipe is a border rather than a
   character so it keeps its weight at any type size and never wraps away from
   what it separates. Clipped, because a long community name must not push the
   wallet and the menu off the end of the bar. */
.ck-room {
  margin-left: 0.55rem;
  padding-left: 0.6rem;
  border-left: 0.125rem solid var(--ck-line);
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700; font-size: 0.9rem; line-height: 1.1;
  color: var(--ck-ink);
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-room[hidden] { display: none; }
.ck-bar-slim .ck-room { font-size: 0.78rem; max-width: 14rem; }
@media (max-width: 40rem) { .ck-room { max-width: 9rem; } }
@media (max-width: 26rem) { .ck-room { display: none; } }

.ck-actions { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }

.ck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  font: inherit; font-weight: 700; font-size: 0.85rem;
  padding: 0.34rem 0.75rem; border-radius: 62rem;
  background: transparent; color: var(--ck-ink);
  border: 0.0625rem solid var(--ck-line);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  /* base.css gives every bare <button> a 2.5rem min-height for in-room touch
     targets. Right for the game, wrong here: it inflated these to 34px inside a
     26px bar, so they hung over both edges. The bar sizes its own controls. */
  min-height: 0;
  box-sizing: border-box;
  line-height: 1;
}
.ck-btn:hover { background: var(--ck-hover); }
.ck-btn-primary {
  background: var(--ck-accent); color: var(--ck-accent-ink); border-color: transparent;
}
.ck-btn-primary:hover { background: var(--ck-accent); filter: brightness(1.1); }
/* Square, and explicitly shorter than the bar. Sized by padding alone they grew
   to about four fifths of the bar's height and sat against both edges with no
   air; a fixed size keeps the clearance the same whatever the icon inside is. */
.ck-btn-icon { width: 1.75rem; height: 1.75rem; padding: 0; }
.ck-i { width: 0.95rem; height: 0.95rem; flex: none; display: block; }
.ck-menu-item .ck-i { width: 1rem; height: 1rem; opacity: 0.75; }
.ck-btn:focus-visible {
  outline: 0.18rem solid #ffc93c; outline-offset: 0.12rem;
}

/* ---------- account menu ---------- */
/* flex, not the default block: the button inside is inline-flex, so the wrapper
   carried a line box with a descender under it and sat the hamburger about
   1.5px lower than the toggle beside it. */
.ck-menu-wrap { position: relative; display: flex; align-items: center; }
.ck-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem);
  min-width: 13rem; padding: 0.35rem;
  background: var(--ck-surface); color: var(--ck-ink);
  border: 0.0625rem solid var(--ck-line); border-radius: 0.7rem;
  box-shadow: var(--ck-shadow); z-index: 70;
}
.ck-menu[hidden] { display: none; }
.ck-menu-who {
  padding: 0.4rem 0.6rem 0.5rem; font-size: 0.78rem;
  color: var(--ck-ink-soft); word-break: break-all;
  border-bottom: 0.0625rem solid var(--ck-line); margin-bottom: 0.3rem;
}
.ck-menu-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  font: inherit; font-size: 0.88rem; font-weight: 700; text-align: left;
  padding: 0.5rem 0.6rem; border-radius: 0.45rem;
  background: transparent; border: 0; color: inherit;
  cursor: pointer; text-decoration: none;
}
.ck-menu-item:hover { background: var(--ck-hover); }
.ck-menu-sep { height: 0.0625rem; background: var(--ck-line); margin: 0.3rem 0; }


/* Present to a screen reader, absent to the eye. The game pages keep an <h1>
   for document structure, but the product bar above them already shows the
   brand -- printing it twice, in two different typefaces, is the doubling this
   bar was meant to end. */
.ck-sr {
  position: absolute; width: 0.0625rem; height: 0.0625rem;
  padding: 0; margin: -0.0625rem; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- the wallet ----------
   The free tier's balance, in the bar, on every page including the game. It
   used to live only on the account page, which meant the one moment somebody
   needed it -- standing at the Play button with a room waiting -- was the one
   place it was invisible.

   A ticket, drawn like the light/dark toggle and the hamburger it sits beside:
   same 24 grid, same stroke, currentColor. An emoji was the first attempt and
   was wrong for the reason the menu icons are already line art -- it renders as
   a different drawing on every platform, in a colour scheme that is never
   yours, and it looked pasted on beside two icons that belong to the product.
   Being one of the family is also what lets it turn coral with the button when
   the balance is empty. */
/* [hidden] is only a display:none in the UA stylesheet, and this rule beats it
   -- so hiding the wallet did nothing and a subscriber got an empty ticket
   reading 0. Anything that sets display on an element it also hides has to say
   this out loud. */
.ck-wallet-wrap { position: relative; display: flex; align-items: center; }
.ck-wallet-wrap[hidden] { display: none; }
.ck-wallet {
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}
/* Pill-shaped, so it reads as a value rather than as another action: the
   icon buttons beside it are square and the same height. */
.ck-wallet .ck-i { opacity: 0.85; }
/* Empty is a state, not an error: coral, so it reads as "there is something to
   do here" rather than as a failure somebody has to report. */
.ck-wallet-empty { border-color: var(--ck-coral); color: var(--ck-coral); }

.ck-pop {
  position: absolute; right: 0; top: calc(100% + 0.4rem);
  width: 16.5rem; padding: 0.85rem;
  background: var(--ck-surface); color: var(--ck-ink);
  border: 0.0625rem solid var(--ck-line); border-radius: 0.7rem;
  box-shadow: var(--ck-shadow); z-index: 70;
  font-size: 0.85rem; line-height: 1.35;
}
.ck-pop[hidden] { display: none; }
.ck-pop h3 {
  margin: 0 0 0.55rem; font-size: 0.95rem;
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
}
/* Two balances, never one total. They behave differently -- one expires at the
   end of the month, one never does -- and a single number would hide exactly
   the fact somebody needs to plan around. */
.ck-pop-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem; padding: 0.4rem 0;
  border-top: 0.0625rem solid var(--ck-line);
}
.ck-pop-row:first-of-type { border-top: 0; }
.ck-pop-row b { font-size: 1rem; white-space: nowrap; }
.ck-pop-when { display: block; font-size: 0.74rem; color: var(--ck-ink-soft); }
.ck-pop .ck-btn { width: 100%; margin-top: 0.6rem; }
.ck-pop-locked {
  margin: 0.5rem 0 0; padding: 0.45rem 0.55rem; border-radius: 0.5rem;
  background: var(--ck-hover); color: var(--ck-ink-soft); font-size: 0.78rem;
}

/* ---------- the shop ----------
   Opened from the wallet, from the launcher, from the account page and from
   the moment a game is refused -- the same dialog every time. Somebody who has
   just been stopped should not have to go and find a different page to fix it.

   Its own overlay rather than the game's .modal-overlay: this has to open on
   the account page and the platform console too, and those never load
   base.css. */
.ck-shop-back {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow: auto;
  background: rgba(20, 16, 42, 0.62);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.ck-shop-back[hidden] { display: none; }
.ck-shop {
  width: min(40rem, 100%);
  background: var(--ck-surface); color: var(--ck-ink);
  border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
  padding: 1.4rem;
  max-height: calc(100vh - 2rem); overflow: auto;
}
.ck-shop-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.ck-shop-head h2 {
  margin: 0; font-size: 1.4rem; line-height: 1.15;
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
}
.ck-shop-sub { margin: 0.35rem 0 0; color: var(--ck-ink-soft); font-size: 0.92rem; line-height: 1.45; }
.ck-shop-x {
  margin-left: auto; flex: none; width: 2rem; height: 2rem; border-radius: 62rem;
  background: transparent; border: 0.0625rem solid var(--ck-line); color: inherit;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; min-height: 0;
}
.ck-shop-x:hover { background: var(--ck-hover); }

.ck-shop-have {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin: 0.9rem 0 0; padding: 0.6rem 0.75rem;
  border-radius: 0.7rem; background: var(--ck-hover);
  font-size: 0.85rem; color: var(--ck-ink-soft);
}
.ck-shop-have b { color: var(--ck-ink); }

.ck-shop-grid {
  display: grid; gap: 0.7rem; margin: 0.9rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
/* Every tile is the same size and shows the same three facts, including the
   per-credit price. Selling the middle one by making the others small and grey
   is the oldest trick in this particular book, and the price per credit is
   exactly the number that trick exists to hide. */
.ck-buy {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 1rem 0.7rem 0.85rem; border-radius: 0.85rem;
  border: 0.125rem solid var(--ck-line); background: transparent;
  color: inherit; font: inherit; cursor: pointer; min-height: 0;
  position: relative; text-align: center;
}
.ck-buy:hover { background: var(--ck-hover); }
.ck-buy:focus-visible { outline: 0.18rem solid #ffc93c; outline-offset: 0.12rem; }
.ck-buy[disabled] { opacity: 0.55; cursor: default; }
.ck-buy-n {
  font-family: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800; font-size: 1.5rem; line-height: 1;
}
.ck-buy-c { font-size: 0.8rem; color: var(--ck-ink-soft); }
.ck-buy-p { margin-top: 0.4rem; font-weight: 800; font-size: 1.05rem; }
.ck-buy-u { font-size: 0.74rem; color: var(--ck-ink-soft); }
.ck-buy-tag {
  position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%);
  padding: 0.12rem 0.5rem; border-radius: 62rem; white-space: nowrap;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
  background: var(--ck-accent); color: var(--ck-accent-ink);
}
.ck-buy-featured { border-color: var(--ck-accent); }

.ck-shop-fine {
  margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 0.0625rem solid var(--ck-line);
  font-size: 0.78rem; line-height: 1.5; color: var(--ck-ink-soft);
}
.ck-shop-fine li { margin: 0.15rem 0; }
.ck-shop-fine ul { margin: 0; padding-left: 1.1rem; }
.ck-shop-err {
  margin: 0.8rem 0 0; padding: 0.5rem 0.65rem; border-radius: 0.5rem;
  border: 0.0625rem solid var(--ck-coral); color: var(--ck-coral); font-size: 0.82rem;
}
.ck-shop-err[hidden] { display: none; }

/* ---------- the ladder ----------
   Free, credits, unlimited -- as one object, with a mark on the rung you are
   standing on. They used to be three unrelated things in three places (an
   allowance nobody explained, a shop, and an email address), so somebody on
   the bottom rung had no way to see there was a top one. */
.ck-ladder {
  display: flex; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0;
  list-style: none; counter-reset: rung;
}
.ck-rung {
  flex: 1 1 0; min-width: 0;
  padding: 0.5rem 0.6rem; border-radius: 0.6rem;
  border: 0.0625rem dashed var(--ck-line);
  font-size: 0.76rem; color: var(--ck-ink-soft);
}
.ck-rung b { display: block; font-size: 0.82rem; color: var(--ck-ink); }
.ck-rung span { display: block; }
.ck-rung i {
  display: inline-block; margin-top: 0.25rem; font-style: normal;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ck-accent);
}
/* Solid for where you are, faded for what you have passed. Nothing is greyed
   out to make the next tier look better -- the rungs below are things people
   still use, not mistakes they have made. */
.ck-rung-here { border-style: solid; border-color: var(--ck-accent); }
.ck-rung-done { opacity: 0.6; }
@media (max-width: 30rem) { .ck-ladder { flex-direction: column; } }

/* The unlimited tile is not a bundle and does not pretend to be one: it holds
   two real choices rather than one price with a hidden switch. */
.ck-buy-plan { cursor: default; gap: 0.3rem; }
.ck-buy-plan:hover { background: transparent; }
.ck-buy-plan .ck-btn { width: 100%; margin-top: 0.15rem; }
.ck-buy-note {
  margin-top: 0.4rem; font-size: 0.72rem; line-height: 1.35;
  color: var(--ck-ink-soft);
}
.ck-buy-plan .ck-buy-n { font-size: 1.8rem; line-height: 0.9; }

/* The unlimited chip. Wider than the credit one because it says a word instead
   of a number, and quietly filled so it reads as a state rather than a button
   somebody forgot to finish. */
.ck-wallet-open {
  background: var(--ck-hover);
  font-size: 0.78rem; letter-spacing: 0.01em;
}

/* ---------- toast ----------
   The bar owns this because the bar is the only thing on every page. The
   consoles have their own; the game deliberately has none, and "your credits
   arrived" is the one message worth showing there anyway. */
.ck-toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  z-index: 300; max-width: min(28rem, calc(100% - 2rem));
  padding: 0.7rem 1rem; border-radius: 0.7rem;
  background: var(--ck-accent); color: var(--ck-accent-ink);
  box-shadow: var(--ck-shadow);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.88rem; font-weight: 700; line-height: 1.4; text-align: center;
}
.ck-toast-bad { background: var(--ck-coral); color: #fff; font-weight: 600; }