.tycoon-page { max-width: 720px; position: relative; }

/* Pin the stat bar under the sticky nav so your balance stays visible
   while tapping LIFT, even after scrolling down past the floor/shop.
   Sticky elements hover over whatever normal-flow content ends up at
   the same viewport position once stuck (they don't push it down) --
   since this bar has nothing clickable in it, pointer-events: none
   lets clicks fall through to the canvas/buttons underneath instead
   of the bar silently swallowing them. */
/* The stats sit under the plan now, in a strip of their own. */
.tycoon-page .game-hud {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: none;
}

/* Fast repeat taps on iOS Safari otherwise register as double-taps and
   zoom the page, even with the viewport's user-scalable=no as a first
   line of defense -- this is the per-element belt-and-suspenders fix. */
.tycoon-theme-btn,
.tycoon-add-room,
.tycoon-inv-arm,
.tycoon-inv-sell,
.shop-buy-btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Add Room ----
   All that remains of the old per-room tab row. Picking which room you are
   looking at is panning and zooming now, so the only control left here is
   the one that buys the next one. */
.tycoon-room-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 10px;
  min-height: 30px;
}
.tycoon-add-room {
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px dashed var(--amber);
  background: var(--panel);
  color: var(--amber);
  cursor: pointer;
}
.tycoon-add-room:hover { color: var(--text); border-color: var(--amber); }
.tycoon-add-room.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--muted);
  border-color: var(--panel-border);
}

/* ---- Room theme selector ---- */
.tycoon-theme-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 12px;
}
.tycoon-theme-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
.tycoon-theme-btn:hover { color: var(--text); border-color: var(--amber); }
.tycoon-theme-btn.is-active {
  background: var(--amber);
  color: #1a1200;
  border-color: #000;
}
.tycoon-theme-btn.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.tycoon-theme-btn.is-locked:hover { color: var(--muted); border-color: var(--panel-border); }

/* ---- Isometric gym floor plan ----
   A theme's rooms are laid out on one isometric lattice, joined by hallways
   and turning a corner as the chain grows, so the stage is a fixed-size
   window that scrolls in both directions to pan around that plan. The canvas
   is zoomed with a CSS transform, sized via a wrapper div so the scrollable
   area's dimensions stay right at any zoom level (see applyStageSizing() in
   JS, plus the pan/pinch handlers that drive both). */
.tycoon-room-stage {
  width: 100%;
  max-width: 560px;
  /* Sized off the viewport rather than pinned at one height: a tall phone
     gets a taller window, a short one is not left with a letterbox, and
     both are capped so the shop below stays within reach of a scroll. The
     stats moved out from over the plan, so the window takes that room
     back and then some -- the plan is the thing you came to look at. */
  height: clamp(340px, 56vh, 530px);
  margin: 0 auto 14px;
  border-radius: 18px;
  border: 3px solid #000;
  box-shadow: var(--shadow-hard);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 0;
  cursor: grab;
  /* JS owns the whole touch gesture here, which is the only way a two-finger
     pinch can be read reliably -- the browser would otherwise claim part of
     it for scrolling. In exchange the drag handler chains leftover vertical
     movement to the page itself (see panBy), so a finger starting here can
     still scroll on down to the shop rather than being trapped on the plan. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* The ambient ground is drawn wider than the plan, so there is now always
     something to scroll to and a classic desktop scrollbar would sit down
     two edges of the view permanently -- a frame around the very thing that
     is meant not to have one. Panning is the drag handlers' job; scrolling
     still works, it just has no chrome. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Centre a plan small enough to fit (zoomed out, it would otherwise sit in
     the top-left with dead space below). "safe" drops back to start-aligned
     once the plan is bigger than the window, so centring never strands the
     overflow out of scroll reach. */
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  /* The ground is a canvas of its own behind this one (.tycoon-ground),
     the size of this window rather than of the plan, so it reaches the
     edges however far you zoom out. */
  background: transparent;
  /* The dark at the edges of the view. An inset shadow is measured from the
     window rather than from the plan, so it stays where you are looking
     however far the gym is panned. */
  box-shadow: inset 0 0 110px 34px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
}
/* The site the plan stands on, laid over the plan canvas and carrying the
   same transform, so it pans and zooms with the gym rather than being
   redrawn from the scroll position. */
.tycoon-ground {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 0;
  /* Its own compositing layer. The ground is painted once and then only
     panned and zoomed with the gym -- but sharing a layer with the plan
     canvas above it meant the browser rasterised the whole of it again
     every time a single person took a step, which cost more than drawing
     the gym did. On a phone that alone was the difference between ten
     frames a second and forty. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.tycoon-room-stage::-webkit-scrollbar { display: none; }
.tycoon-room-zoom-wrap {
  position: relative;
  flex: none;
}
#tycoon-floor {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Likewise its own layer, so what it repaints stays its own business. */
  will-change: transform;
  backface-visibility: hidden;
  /* Inherited, not its own: the cursor is decided by what is under the
     pointer, and the code that knows that sets it on the stage. A rule of
     its own here quietly won, so the hand never became a finger over a
     bubble or the plot sign. */
  cursor: inherit;
  user-select: none;
  -webkit-user-select: none;
}
#room-zoom-wrap { cursor: inherit; }

/* The room's takings, broken out a line at a time. This is the answer to
   "why is this room worth what it is worth", and as one running sentence it
   was unreadable. */
.tycoon-synergy {
  max-width: 380px;
  margin: 0 auto 14px;
  font-size: 12px;
}
.tycoon-bd-empty {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.tycoon-bd-head {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted, #8b8b93);
}
.tycoon-bd-row {
  display: grid;
  text-align: left;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  color: var(--muted, #8b8b93);
}
.tycoon-bd-pct { font-weight: 700; color: #7fd8a8; }
.tycoon-bd-num {
  min-width: 74px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e9e9ee;
}
.tycoon-bd-row.is-total {
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #e9e9ee;
  font-weight: 800;
}
.tycoon-bd-row.is-total .tycoon-bd-num { color: #ffd166; }

/* ---- Inventory tray ---- */
.tycoon-inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto 6px;
}
.tycoon-inv-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
}
.tycoon-inv-item:hover { border-color: var(--amber); }
.tycoon-inv-item.is-armed { background: var(--amber); color: #1a1200; border-color: #000; }
.tycoon-inv-item.is-needed { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.25); animation: tycoon-needed 1.6s ease-in-out infinite; }
@keyframes tycoon-needed { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 183, 3, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(255, 183, 3, 0.45); } }
@media (prefers-reduced-motion: reduce) { .tycoon-inv-item.is-needed { animation: none; } }
/* Every figure changes ten times a second, so nothing here may resize as
   it does: a figure that grows with its contents drags the row about. */
.tycoon-page .hud-stat { box-sizing: border-box; }
.tycoon-page .hud-value { white-space: nowrap; }
.tycoon-page .hud-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tycoon-open-hint { margin: 6px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 183, 3, 0.12); border: 1px solid rgba(255, 183, 3, 0.45); color: var(--text); font-size: 13px; line-height: 1.45; }
.tycoon-inv-arm {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  color: inherit;
  background: none;
  border: none;
  padding: 3px 2px;
  cursor: pointer;
}
.tycoon-inv-sell {
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.tycoon-inv-sell:hover { color: var(--red); border-color: var(--red); }
.tycoon-inv-item.is-armed .tycoon-inv-sell { background: rgba(0, 0, 0, 0.15); border-color: #000; color: #4a3300; }
.tycoon-inv-item.is-armed .tycoon-inv-sell:hover { color: var(--red); }
.tycoon-inv-item .inv-count { color: var(--muted); font-weight: 700; margin-left: 3px; }
.tycoon-inv-item.is-armed .inv-count { color: #4a3300; }
.tycoon-inv-empty { color: var(--muted); font-size: 13px; margin: 4px 0 6px; }
.inv-cat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.inv-icon, .btn-lock-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.inv-icon svg, .btn-lock-icon svg { display: block; }

.tycoon-designer-hint {
  color: var(--muted);
  font-size: 12px;
  max-width: 420px;
  margin: 0 auto 26px;
  line-height: 1.5;
}


/* ---- Shop ---- */
.tycoon-shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 auto 26px;
}
.shop-item {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shop-item.is-affordable { border-color: var(--amber); }
.shop-item.is-locked { opacity: 0.5; }
.shop-item.is-shut { opacity: 0.6; }
.shop-item.is-shut .shop-buy-btn { font-size: 11px; }
.shop-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-item-icon { display: inline-flex; align-items: center; }
.shop-item-name { font-weight: 800; font-size: 14px; color: var(--text); }
.shop-item-owned { font-size: 11px; color: var(--muted); margin-left: auto; }
.shop-item-cat { font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.shop-item-gps { font-size: 12px; color: var(--muted); }
.shop-buy-btn {
  margin-top: 4px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 2px solid #000;
  background: var(--blue);
  color: #001318;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.shop-buy-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.shop-buy-btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #000; }
.shop-buy-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Wiping the gym is the one thing on this page that cannot be undone, so
   it is the one thing that reads as a warning. */
.tycoon-reset-link {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--red, #ff3b3b);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.tycoon-reset-link:hover { color: #ff6b6b; }

/* ---- Phones ----
   The three stat boxes wrap onto two rows at this width, and since the bar
   is sticky those extra ~90px sit on top of the room for the whole session,
   hiding most of the floor you are trying to arrange. Split the row evenly
   and trim the type instead so it stays one line. Scoped to this page: the
   other games have no sticky room under their HUD. */
@media (max-width: 560px) {
  /* One line each, or nothing: on a phone every row above the shop is a
     row of shop you cannot see. The tab notes repeat what the page already
     shows, the Storage caption repeats the empty-room line, and the
     category name on a shop row repeats the colour of its icon. */
  .tycoon-panel-note { display: none; }
  .tycoon-tray-head .tycoon-panel-sub { display: none; }
  .shop-item-cat { display: none; }
  .shop-item { padding: 12px 14px; gap: 4px; }
  .shop-item-gps { font-size: 11.5px; }
  .tycoon-filter-box { font-size: 11px; padding: 4px 9px 4px 7px; }
  .tycoon-synergy { margin-bottom: 10px; }
  .tycoon-tray-head { margin-bottom: 6px; }
  .tycoon-next { font-size: 12px; padding: 8px 12px; }
  .tycoon-open-hint { font-size: 12.5px; padding: 8px 12px; }
  .tycoon-page .hud-label { font-size: 8.5px; letter-spacing: 0.3px; }
  /* The busy meter, Add Room and Open day were three rows on a phone. Two
     buttons share a row; the meter keeps its own. */
  .tycoon-toolbar-end { display: flex; flex-wrap: wrap; gap: 6px; }
  .tycoon-toolbar-end > * { flex: 1 1 auto; }
  .tycoon-add-room, .tycoon-promo-btn { font-size: 11px; padding: 6px 10px; }
}

/* ---- Desktop ---------------------------------------------------------
   The tycoon loop is buy-then-place, and on a phone those two halves are
   a scroll apart: you pick gear at the bottom, scroll back up, place it,
   scroll down again. There is room on a monitor to have both at once, so
   the floor plan takes the left column at something like a readable size
   and the shop becomes a sticky sidebar you can shop from while watching
   the room. */
/* A flex column rather than display: contents, so its children can be
   ordered independently of the source. They stack exactly as they did --
   the sidebar is full width here either way -- but on a phone what a player
   wants is the button that earns and then the shop that spends, with the
   boards after them, while in the source the boards come first because
   that is the right order on a desktop, where the sidebar is a real
   scrolling column and this ordering does not apply. */
.tycoon-sidebar { display: flex; flex-direction: column; }
.tycoon-sidebar > .tycoon-shop { order: 2; }
.tycoon-sidebar > .tycoon-jobs { order: 3; }
.tycoon-sidebar > .tycoon-staff { order: 4; }
.tycoon-sidebar > .tycoon-franchise { order: 5; }

@media (min-width: 1080px) {
  .tycoon-page {
    max-width: 1340px;
    padding: 34px 36px 70px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 32px;
    align-items: start;
  }

  .tycoon-page .game-head,
  .tycoon-page .game-switcher,
  .tycoon-page .game-hud,
  .tycoon-page > .game-toast { grid-column: 1 / -1; }

  /* The sidebar is sticky, so anything spanning both columns below it slid
     underneath it as the page scrolled: the leaderboard and the footnotes
     were being drawn behind the shop. They belong under the plan, in the
     left column, where nothing is ever on top of them. */
  .tycoon-page > .game-hint,
  .tycoon-page > .leaderboard,
  .tycoon-page > .game-footnote {
    grid-column: 1;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .tycoon-page > .leaderboard { margin-top: 22px; }

  .tycoon-page .game-sub { max-width: 880px; margin-bottom: 16px; font-size: 14.5px; }
  .tycoon-page .game-switcher { margin-bottom: 16px; }



  .tycoon-designer { grid-column: 1; }

  /* Auto-placement puts this beside the designer: the designer claims
     column 1 of the row, leaving the cursor on column 2 of the same row. */
  .tycoon-sidebar {
    display: block;
    grid-column: 2;
    position: sticky;
    top: 158px;
    max-height: calc(100vh - 178px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Room inside the scroll box for the buttons' 6px hard shadow, which
       an overflow: auto ancestor would otherwise shear off. */
    padding: 2px 12px 2px 2px;
  }
  .tycoon-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 0 12px;
    padding: 6px 0;
    background: var(--bg, #0a0a0d);
  }
  .tycoon-sidebar::-webkit-scrollbar { width: 8px; }
  .tycoon-sidebar::-webkit-scrollbar-thumb {
    background: var(--panel-border);
    border-radius: 999px;
  }

  .tycoon-shop {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
  }
  .shop-item { padding: 13px 15px; }

  /* Room for the plan to actually be read: the stage window grows to the
     column and to the viewport's height, and fitZoomToStage() measures the
     window, so a bigger window simply frames the plan larger. */
  .tycoon-room-stage {
    max-width: none;
    /* Only the site nav stands above the plan now that the stats sit under
       it, so the window is what fits beneath that. */
    height: clamp(440px, calc(100vh - 300px), 760px);
    margin-bottom: 16px;
  }
  .tycoon-synergy { max-width: 420px; }
  .tycoon-inventory { max-width: none; }
  .tycoon-designer-hint { max-width: 780px; margin-bottom: 0; }
}

/* ---- Placing gear ----
   The pad sits over the stage rather than inside it: the stage scrolls, and
   controls that scrolled away with the floor would be unusable the moment
   you dragged the piece anywhere. */
.tycoon-stage-wrap { position: relative; }

.tycoon-place-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  /* Over the stage, which sits above the ground layer and would otherwise
     take the taps meant for these controls. */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  pointer-events: none;   /* only the controls themselves take taps */
}
.tycoon-place-hud[hidden] { display: none; }

.tycoon-place-label {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10, 10, 13, 0.82);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  pointer-events: auto;
}

.tycoon-place-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

/* Four arrows around an empty middle -- the piece itself is what sits in
   the middle, out on the floor. */
.tycoon-pad {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px);
  pointer-events: auto;
}
.tycoon-pad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  background: rgba(10, 10, 13, 0.86);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.tycoon-pad-btn svg { width: 17px; height: 17px; fill: currentColor; }
.tycoon-pad-btn:hover { border-color: var(--amber); color: var(--amber); }
.tycoon-pad-btn:active { transform: translate(1px, 1px); }
.tycoon-pad-btn.is-up { grid-area: 1 / 2; }
.tycoon-pad-btn.is-left { grid-area: 2 / 1; }
.tycoon-pad-btn.is-right { grid-area: 2 / 3; }
.tycoon-pad-btn.is-down { grid-area: 3 / 2; }

.tycoon-place-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.tycoon-place-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(10, 10, 13, 0.86);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.tycoon-place-btn[hidden] { display: none; }
.tycoon-place-btn:hover { border-color: var(--amber); }
.tycoon-place-btn.is-confirm {
  background: var(--amber);
  border-color: #000;
  color: #1a1200;
  box-shadow: 3px 3px 0 #000;
}
.tycoon-place-btn.is-confirm:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #000; }
.tycoon-place-btn.is-cancel:hover { border-color: var(--red); color: var(--red); }

/* ---- Level and experience ----
   The level badge carries a bar of its own, so the fourth HUD stat is taller
   than the three counters beside it and has to say so rather than stretching
   them all to match. */
.tycoon-page .hud-level {
  min-width: 132px;
  gap: 2px;
}
.tycoon-page .hud-xp-bar {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.tycoon-page .hud-xp-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #5ec4c9, #7ee0b0);
  transition: width 220ms ease-out;
}
.tycoon-page .hud-xp-text {
  font-size: 9px;
  letter-spacing: 0.3px;
  color: var(--muted, #8b8b93);
  white-space: nowrap;
}
.tycoon-page .hud-level.is-capped .hud-xp-fill { width: 100% !important; }

/* A level going up is worth a beat of attention: the badge flashes once. */
@keyframes tycoon-level-pop {
  0% { transform: scale(1); color: inherit; }
  35% { transform: scale(1.22); color: #7ee0b0; }
  100% { transform: scale(1); color: inherit; }
}
.tycoon-page .hud-level.is-up .hud-value {
  display: inline-block;
  animation: tycoon-level-pop 620ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .tycoon-page .hud-xp-fill { transition: none; }
  .tycoon-page .hud-level.is-up .hud-value { animation: none; }
}

/* ---- Jobs board ----
   Sits above the shop, because a job is usually answered by buying
   something and the two want to be read together. */
.tycoon-jobs {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 12px 10px;
  margin-bottom: 14px;
}
.tycoon-jobs-title {
  margin: 0 0 9px;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.tycoon-jobs-sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--muted, #8b8b93);
}
.tycoon-jobs-list { display: flex; flex-direction: column; gap: 8px; }

.tycoon-job {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.28);
  padding: 9px 10px;
  /* The sidebar centres its contents; a list of tasks reads better ranged
     left, where every line starts in the same place. */
  text-align: left;
}
.tycoon-job.is-ready {
  border-color: rgba(126, 224, 176, 0.55);
  background: rgba(126, 224, 176, 0.07);
}
.tycoon-job-text {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 6px;
}
.tycoon-job-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.tycoon-job-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #5ec4c9, #7ee0b0);
  transition: width 200ms ease-out;
}
.tycoon-job-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.tycoon-job-meta {
  font-size: 10px;
  letter-spacing: 0.2px;
  color: var(--muted, #8b8b93);
}
.tycoon-job-reward { color: #e8c46a; }
.tycoon-job-claim {
  border: 0;
  border-radius: 8px;
  padding: 5px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  color: #06231a;
  background: linear-gradient(180deg, #8fe9be, #5ec9a0);
}
.tycoon-job-claim[disabled] {
  cursor: default;
  color: var(--muted, #8b8b93);
  background: rgba(255, 255, 255, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .tycoon-job-fill { transition: none; }
}

/* ---- Rush hours ----
   A pill above the plan saying how busy the place is right now and what
   that is worth, with a bar that fills as the gym fills up. */
.tycoon-rush {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 auto 10px;
  padding: 6px 13px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.tycoon-rush-when { font-weight: 700; }
.tycoon-rush-meter {
  display: block;
  width: 74px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.tycoon-rush-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #5ec4c9, #e8c46a);
  transition: width 900ms linear;
}
.tycoon-rush-bonus { color: #e8c46a; font-weight: 700; }
.tycoon-rush-bonus.is-none { color: var(--muted, #8b8b93); font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .tycoon-rush-fill { transition: none; }
}

/* ---- Staff ----
   Same shell as the jobs board above it; a hire is a row with what they are
   worth on the left and what they cost on the right. */
.tycoon-staff {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 12px 10px;
  margin-bottom: 14px;
}
.tycoon-staff-list { display: flex; flex-direction: column; gap: 8px; }
.tycoon-hire {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.28);
  padding: 8px 10px;
}
.tycoon-hire.is-locked { opacity: 0.5; }
.tycoon-hire-who { min-width: 0; flex: 1 1 auto; }
/* Three controls on a row leaves the line about the job one word wide on
   a phone, so on a narrow screen the buttons drop to their own line under
   it rather than squeezing the words out. */
@media (max-width: 560px) {
  .tycoon-hire { flex-wrap: wrap; }
  .tycoon-hire-who { flex: 1 1 100%; }
  .tycoon-hire-actions { margin-left: auto; }
}
.tycoon-hire-name { display: block; font-size: 12px; font-weight: 700; }
.tycoon-hire-note {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  letter-spacing: 0.2px;
  color: var(--muted, #8b8b93);
}
.tycoon-hire-btn {
  flex: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: #06231a;
  background: linear-gradient(180deg, #8fe9be, #5ec9a0);
}
.tycoon-hire-btn[disabled] {
  cursor: default;
  color: var(--muted, #8b8b93);
  background: rgba(255, 255, 255, 0.06);
}
.tycoon-hire-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--muted, #8b8b93);
}

.tycoon-hire-actions { display: flex; align-items: center; gap: 6px; flex: none; }
/* Training: one price, no wages after it. Reads as an upgrade rather than
   as another hire, so it is marked out from both other buttons. */
.tycoon-hire-train {
  border: 1px solid rgba(255, 209, 102, 0.45);
  border-radius: 8px;
  padding: 5px 9px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.10);
  white-space: nowrap;
}
.tycoon-hire-train:hover:not(:disabled) { background: rgba(255, 209, 102, 0.2); }
.tycoon-hire-train:disabled { opacity: 0.45; cursor: default; }
.tycoon-hire-train[hidden] { display: none !important; }
.tycoon-hire-let-go {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  color: var(--muted, #8b8b93);
  background: transparent;
}
.tycoon-hire-let-go:hover { color: #e8837a; border-color: rgba(232, 131, 122, 0.5); }

/* Storage sits directly under the plan now, above the numbers: it is the
   thing you reach for while placing, and it was below them. Both it and the
   breakdown are cards, so the left column reads as three stacked panels
   rather than a plan with loose text under it. */
.tycoon-tray-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tycoon-tray-head .tycoon-panel-title { margin: 0; }

/* Level, and what the next one brings. The Gym tab used to open on a name
   field, which is not the question anybody has when they get there. */
.tycoon-lvl {
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.09));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px 13px;
  margin-bottom: 14px;
}
.tycoon-lvl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.tycoon-lvl-now { font-size: 14px; font-weight: 800; }
.tycoon-lvl-xp {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted, #8b8b93);
  font-variant-numeric: tabular-nums;
}
.tycoon-lvl-bar {
  display: block;
  height: 6px;
  margin: 9px 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.tycoon-lvl-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7fd8a8, #ffd166);
}
.tycoon-lvl-next {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted, #8b8b93);
}

/* What each location is worth, on the button that goes there, and a dot on
   the one with money waiting in it. */
.theme-rate {
  margin-left: 7px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.theme-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #ffd166;
  vertical-align: middle;
}
.tycoon-theme-btn.is-shut .theme-rate { color: #e8837a; opacity: 0.9; }

.shop-item-buy { display: flex; gap: 6px; align-items: stretch; }
.shop-item-buy .shop-buy-btn { flex: 1 1 auto; }
.tycoon-inv-sell.is-all { opacity: 0.8; }

/* The one line telling you what is worth doing. It sits under the plan
   where the eye already is, rather than on the tab it is talking about. */
.tycoon-next {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto 12px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 12px;
  background: rgba(255, 209, 102, 0.05);
  font-size: 12.5px;
  line-height: 1.45;
  color: #e9e9ee;
}
.tycoon-next[hidden] { display: none; }
.tycoon-next-go {
  flex: none;
  border: 0;
  border-radius: 8px;
  padding: 5px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  color: #2a1e00;
  background: linear-gradient(180deg, #ffd98a, #f3b73f);
}
.tycoon-next-go[hidden] { display: none; }

/* A control that has nothing to do is gone, not an empty pill: both of
   these set display in their own rules, which beats the [hidden] attribute
   on its own. */
.tycoon-promo-btn[hidden],
.tycoon-rush[hidden] { display: none !important; }

/* Shop filter: nineteen rows in one column is a lot to read past when you
   came for one thing. */
.tycoon-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 12px;
}
.tycoon-filter {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  color: var(--muted, #8b8b93);
  background: transparent;
}
.tycoon-filter:hover { color: #e9e9ee; border-color: rgba(255, 255, 255, 0.28); }
.tycoon-filter.is-on {
  color: var(--cat, #ffd166);
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.05);
}

/* What a piece in Storage will be worth once it is standing up. */
.inv-rate {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #7fd8a8;
}

/* ---- The counter ----
   The larder along the top, then one card per counter standing on a floor:
   what it is making, how far along, and the two things it can start. The
   queue is drawn as three pips rather than a number, because three is small
   enough to read at a glance and a number is not. */
.tycoon-larder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tycoon-larder:empty { display: none; }
.tycoon-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  font-size: 11px;
  font-weight: 700;
}
.tycoon-stock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.tycoon-stock-n { color: var(--muted, #8b8b93); font-weight: 600; }
.tycoon-larder-empty {
  font-size: 11px;
  color: var(--muted, #8b8b93);
}

.tycoon-counter-list { display: flex; flex-direction: column; gap: 8px; }
.tycoon-maker {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.28);
  padding: 9px 10px 10px;
}
.tycoon-maker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tycoon-maker-name { font-size: 12px; font-weight: 700; }
.tycoon-maker-where { font-size: 10px; color: var(--muted, #8b8b93); }
.tycoon-maker-queue { display: flex; align-items: center; gap: 4px; margin: 7px 0 6px; }
.tycoon-pip {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.tycoon-pip span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: currentColor;
}
.tycoon-pip.is-done span { width: 100% !important; }
.tycoon-maker-state {
  font-size: 10px;
  letter-spacing: 0.2px;
  color: var(--muted, #8b8b93);
  margin-bottom: 7px;
}
.tycoon-maker-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tycoon-make-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: #e9e9ee;
  background: rgba(255, 255, 255, 0.04);
}
.tycoon-make-btn:hover:not([disabled]) { border-color: rgba(255, 255, 255, 0.3); }
.tycoon-make-btn[disabled] { cursor: default; opacity: 0.42; }
.tycoon-make-btn .tycoon-make-secs {
  margin-left: 5px;
  font-weight: 600;
  color: var(--muted, #8b8b93);
}
.tycoon-collect-btn {
  border: 0;
  border-radius: 8px;
  padding: 6px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: #06231a;
  background: linear-gradient(180deg, #8fe9be, #5ec9a0);
}
.tycoon-counter-empty {
  font-size: 11px;
  color: var(--muted, #8b8b93);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  padding: 12px;
  text-align: center;
}

/* ---- Franchising ----
   Hidden until it is worth anything, then loud, because it is the one
   control in the game that throws work away. */
.tycoon-franchise {
  border: 1px solid rgba(232, 196, 106, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(232, 196, 106, 0.09), rgba(232, 196, 106, 0.03));
  padding: 12px;
  margin-bottom: 14px;
  text-align: left;
}
.tycoon-franchise .tycoon-jobs-sub { color: #e8c46a; }
.tycoon-franchise-note {
  margin: 0 0 9px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #8b8b93);
}
.tycoon-franchise-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  color: #2a1e04;
  background: linear-gradient(180deg, #f2d489, #d8ac4a);
}
.tycoon-franchise-btn[disabled] {
  cursor: default;
  color: var(--muted, #8b8b93);
  background: rgba(255, 255, 255, 0.06);
}
.tycoon-franchise-btn.is-confirming {
  color: #2a0a08;
  background: linear-gradient(180deg, #f0a08f, #d8604a);
}

/* ---- How it works ----
   The hint under the plan had grown a paragraph per feature and was five
   hundred words of unbroken text nobody was ever going to read. Folded away
   by default, and broken into one short paragraph per idea when opened. */
.tycoon-howto {
  max-width: 780px;
  margin: 12px auto 0;
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}
.tycoon-howto > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  list-style: none;
}
.tycoon-howto > summary::-webkit-details-marker { display: none; }
.tycoon-howto > summary::after {
  content: '+';
  float: right;
  font-weight: 400;
  color: var(--muted, #8b8b93);
}
.tycoon-howto[open] > summary::after { content: '\2013'; }
.tycoon-howto-body {
  padding: 0 14px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted, #8b8b93);
}
.tycoon-howto-body p { margin: 0 0 9px; }
.tycoon-howto-body p:last-child { margin-bottom: 0; }
.tycoon-howto-body b { color: var(--text, #e8e8ea); font-weight: 700; }


/* An upgrade is a second, quieter control on a shop row: buying is the
   common action and should stay the loud one. */
.shop-upgrade-btn {
  margin-top: 7px;
  width: 100%;
  border: 1px solid rgba(126, 224, 176, 0.45);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  color: #8fe9be;
  background: rgba(126, 224, 176, 0.08);
}
.shop-upgrade-btn:hover:not(:disabled) { background: rgba(126, 224, 176, 0.16); }
.shop-upgrade-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}


/* ---- Gym name ---- */
/* Styled as a caption over the plan rather than as a form field, because
   that is what it is: the place has a name and this is where it is written. */
.tycoon-gym-name {
  display: block;
  margin: 0 auto 8px;
  width: fit-content;
  min-width: 190px;
  max-width: 100%;
  padding: 4px 14px;
  text-align: center;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
}
.tycoon-gym-name::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 700;
}
.tycoon-gym-name:hover { border-color: rgba(255, 255, 255, 0.12); }
.tycoon-gym-name:focus {
  outline: none;
  border-color: rgba(255, 210, 90, 0.55);
  background: rgba(255, 255, 255, 0.05);
}

/* ---- Trophies ---- */
/* A wall of small tiles rather than a list: the ones won read as a
   collection at a glance, and the ones still to win are the same size, so
   the wall does not reflow as they light up. */
.tycoon-trophies {
  max-width: 780px;
  margin: 8px auto 0;
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}
.tycoon-trophies > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;
  list-style: none;
}
.tycoon-trophies > summary::-webkit-details-marker { display: none; }
.tycoon-trophies > summary::after {
  content: '+';
  float: right;
  font-weight: 400;
  color: var(--muted, #8b8b93);
}
.tycoon-trophies[open] > summary::after { content: '\2013'; }
.tycoon-trophy-count {
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--muted, #8b8b93);
}
.tycoon-trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 7px;
  padding: 0 14px 13px;
}
.tycoon-trophy {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  padding: 7px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0.55;
}
.tycoon-trophy.is-won {
  opacity: 1;
  border-color: rgba(255, 205, 90, 0.4);
  background: linear-gradient(180deg, rgba(255, 205, 90, 0.14), rgba(255, 205, 90, 0.04));
}
.tycoon-trophy-name {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.2;
}
.tycoon-trophy.is-won .tycoon-trophy-name { color: #ffd97a; }
.tycoon-trophy-hint {
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.42);
}
.tycoon-trophy.is-won .tycoon-trophy-hint { color: rgba(255, 255, 255, 0.6); }
.tycoon-trophy-got {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffd97a;
}
.tycoon-trophy-got[hidden] { display: none !important; }

/* Point at a trophy and it says what it was for and what it paid, won or
   not. A won card used to replace its objective with the word "Done".
   The card floats above the page rather than inside the trophy grid: the
   shop panel scrolls, and anything drawn inside it is cut off at its edge. */
.tycoon-trophy { position: relative; cursor: help; }
.tycoon-trophy:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.tycoon-tip {
  position: fixed;
  z-index: 90;
  max-width: 250px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 205, 90, 0.45);
  border-radius: 10px;
  background: #16141c;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6);
  color: var(--text, #e9e9ee);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tycoon-tip.is-on { opacity: 1; }
.tycoon-tip[hidden] { display: none !important; }


/* ---- Open day ---- */
/* Sits under the rush pill, because it is the same idea -- how busy the gym
   is -- with the difference that this one is yours to press. */
.tycoon-promo-btn {
  display: block;
  margin: 0 auto 10px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 205, 90, 0.45);
  background: rgba(255, 205, 90, 0.1);
  color: #ffd97a;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.tycoon-promo-btn:hover:not(:disabled) {
  background: rgba(255, 205, 90, 0.2);
  border-color: rgba(255, 205, 90, 0.75);
}
.tycoon-promo-btn:active:not(:disabled) { transform: translateY(1px); }
.tycoon-promo-btn:disabled {
  cursor: default;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.4);
}
/* While one is running the button is the countdown, and it should read as
   live rather than as something waiting to be pressed. */
.tycoon-promo-btn.is-running:disabled {
  border-color: rgba(255, 205, 90, 0.6);
  background: linear-gradient(180deg, rgba(255, 205, 90, 0.26), rgba(255, 205, 90, 0.1));
  color: #ffe6a6;
}


/* Turn sits with Place and Cancel but is neither: it changes the piece
   rather than committing or abandoning it, so it stays quiet. */
.tycoon-place-btn.is-turn {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}
.tycoon-place-btn.is-turn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
}


/* ---- Rush order ---- */
/* Sits above the standing jobs in the same shape as one, with a clock on
   it. Amber, because amber is what the board uses for money, and this is
   the row that is about money. */
.tycoon-rush-order { margin-bottom: 8px; }
.tycoon-job.is-rush {
  border-color: rgba(255, 205, 90, 0.45);
  background: linear-gradient(180deg, rgba(255, 205, 90, 0.12), rgba(255, 205, 90, 0.03));
}
.tycoon-job.is-rush .tycoon-job-text { color: #ffd97a; }
.tycoon-rush-clock {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
}
.tycoon-rush-clock.is-late { color: #ff7b6b; font-weight: 800; }
.tycoon-rush-wait {
  margin: 0;
  padding: 7px 10px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Place, when the piece cannot go where it is: it stays in reach, because
   moving the piece is what fixes it, but it has to read as not-yet. */
.tycoon-place-btn.is-confirm[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.4);
}


/* ---- One toolbar over the plan --------------------------------------
   Locations, the rush badge, the room you can buy next and the open day
   used to be four separate rows stacked above the floor, which pushed the
   thing you are actually working on off the screen. */
.tycoon-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tycoon-toolbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.tycoon-toolbar .tycoon-theme-row,
.tycoon-toolbar .tycoon-room-actions,
.tycoon-toolbar .tycoon-rush,
.tycoon-toolbar .tycoon-promo-btn { margin: 0; }

/* ---- Storage tray ---- */
.tycoon-tray { margin-top: 12px; }
.tycoon-panel-title {
  margin: 0 0 6px;
  font-family: 'Anton', sans-serif;
  font-size: 17px;
  letter-spacing: 0.4px;
  color: var(--text);
}
.tycoon-panel-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  text-transform: none;
}
.tycoon-panel-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- The side column, as tabs --------------------------------------
   Four boards in one scrolling column meant the shop and the jobs could
   never be looked at together and everything was a scroll away. One board
   at a time, each with the whole height. */
.tycoon-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 2px;
}
.tycoon-tab {
  position: relative;
  flex: 1 1 0;
  padding: 9px 6px;
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  letter-spacing: 0.6px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.tycoon-tab:hover { color: var(--text); border-color: var(--amber); }
.tycoon-tab.is-active {
  color: #1a1200;
  background: var(--amber);
  border-color: #000;
}
.tycoon-tab-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}
.tycoon-tab.is-active .tycoon-tab-dot { background: #1a1200; box-shadow: none; }
.tycoon-panel[hidden] { display: none; }

/* ---- What the whole business is doing ---- */
.tycoon-overview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ov-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.ov-row:hover { border-color: var(--amber); }
.ov-row.is-active { border-color: var(--amber); background: rgba(255, 183, 3, 0.08); }
.ov-row.is-locked { opacity: 0.55; cursor: default; }
.ov-row.is-locked:hover { border-color: var(--panel-border); }
.ov-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ov-name { font-weight: 800; font-size: 13.5px; }
.ov-meta { font-size: 11.5px; color: var(--muted); }
.ov-meta.is-shut { color: var(--amber); }
.ov-rate {
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ov-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 183, 3, 0.1);
  border: 1px solid rgba(255, 183, 3, 0.35);
  font-size: 12.5px;
  color: var(--text);
}

/* ---- Phone toolbar ----
   Last in the file on purpose: the three controls each carry their own
   full-width margins from the rules above, and the phone layout has to
   beat them. The busy meter keeps a row to itself; Add Room and Open day
   share the next one. */
@media (max-width: 560px) {
  .tycoon-toolbar-end .tycoon-rush { flex: 1 1 100%; margin: 0 0 4px; width: auto; }
  .tycoon-toolbar-end .tycoon-room-actions,
  .tycoon-toolbar-end .tycoon-promo-btn {
    /* Half the row less the row's own 10px gap, or the pair is 2px too
       wide and wraps. */
    flex: 1 1 calc(50% - 10px);
    margin: 0;
    min-height: 0;
  }
  .tycoon-toolbar-end .tycoon-add-room { width: 100%; }
}

/* ---- The trophy card ----
   Fixed to the top of the window, under the nav, so it is seen wherever
   the page is scrolled to. It slides down in and back up out. */
.tycoon-pop {
  position: fixed;
  top: 84px;
  left: 50%;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px 10px 12px;
  border: 2px solid #000;
  border-radius: 14px;
  background: linear-gradient(180deg, #2a2412, #16130a);
  box-shadow: 0 0 0 1.5px rgba(255, 209, 102, 0.55), 6px 6px 0 #000;
  color: #f4f0ea;
  transform: translate(-50%, -140%);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.25s ease;
  pointer-events: none;
}
.tycoon-pop[hidden] { display: none; }
.tycoon-pop.is-in { transform: translate(-50%, 0); opacity: 1; }
.tycoon-pop-icon {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #f0a91b 70%);
  color: #3a2600;
  flex: none;
}
.tycoon-pop-text { display: flex; flex-direction: column; min-width: 0; }
.tycoon-pop-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffd166;
}
.tycoon-pop-name { font-size: 15px; font-weight: 800; line-height: 1.15; }
.tycoon-pop-cash {
  margin-left: auto;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  color: #ffd166;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .tycoon-pop { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}
@media (max-width: 560px) {
  /* Near the full width on a phone, or the kicker and the name each wrap
     and the card is three lines tall. */
  .tycoon-pop { width: calc(100vw - 24px); min-width: 0; gap: 10px; padding: 9px 12px 9px 10px; }
  .tycoon-pop-kicker { white-space: nowrap; letter-spacing: 0.8px; }
  .tycoon-pop-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tycoon-pop-icon { width: 36px; height: 36px; }
  .tycoon-pop-cash { font-size: 16px; }
}

/* ---- One line, always ----
   Last in the file so it wins. Nothing here may drop onto a second row:
   a row that wraps costs the height of another row, permanently, and
   the stat bar is sticky so it took that height off the plan for the
   whole session. Where a row is too narrow it scrolls sideways instead. */
.tycoon-page .game-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 190px));
  justify-content: center;
  gap: 10px;
}
.tycoon-page .hud-stat { width: auto; min-width: 0; }
.tycoon-theme-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}
.tycoon-theme-row::-webkit-scrollbar { display: none; }
.tycoon-theme-btn { flex: none; white-space: nowrap; }
.tycoon-tabs { flex-wrap: nowrap; }
.tycoon-tab { white-space: nowrap; min-width: 0; padding-left: 6px; padding-right: 6px; }
.game-switcher {
  /* Its own scroll container, so the row of other games never widens the
     page itself: a body that scrolls sideways by four pixels moves the
     whole layout under your thumb. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
  max-width: 100%;
}
.game-switcher::-webkit-scrollbar { display: none; }
.game-switch-tab { white-space: nowrap; }

/* Between a phone and a desktop the page is one column, and it was laid
   out like a phone: everything centred and capped at phone width, so
   three Storage chips sat one per row down the middle of a wide screen. */
@media (max-width: 1079px) {
  .tycoon-panel-note { display: none; }
  .tycoon-inventory { max-width: none; justify-content: flex-start; }
  .tycoon-synergy { margin-left: 0; }
  .tycoon-toolbar-end { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .tycoon-page .game-hud { gap: 6px; }
}
/* The toolbar too: busy meter, Add Room and Open day on one line at every
   width, scrolling sideways on a phone rather than stacking. A chip's name
   stays on one line as well. */
.tycoon-toolbar-end {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 8px;
}
.tycoon-toolbar-end::-webkit-scrollbar { display: none; }
.tycoon-toolbar-end .tycoon-rush,
.tycoon-toolbar-end .tycoon-room-actions,
.tycoon-toolbar-end .tycoon-promo-btn,
.tycoon-toolbar-end .tycoon-add-room { flex: none; width: auto; margin: 0; white-space: nowrap; }
.tycoon-toolbar-end .tycoon-rush { min-width: 0; }
.tycoon-inv-arm, .tycoon-inv-item { white-space: nowrap; }
@media (max-width: 1079px) {
  .tycoon-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .tycoon-toolbar::-webkit-scrollbar { display: none; }
  .tycoon-toolbar .tycoon-theme-row { flex: none; overflow: visible; margin: 0; }
  .tycoon-toolbar-end { flex: none; overflow: visible; }
}

/* ---- Fit, do not scroll ----
   A row that scrolls off the edge hides the Boardwalk and the whole
   toolbar with nothing to say they are there. Below desktop width the
   rows shed their small print instead -- the rate on a location button,
   the meter bar on the busy badge, the slot count, the "x2.5 for 90s" --
   so every button is on screen, on one line, at once. */
@media (max-width: 1079px) {
  .tycoon-toolbar { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  .tycoon-toolbar .tycoon-theme-row,
  .tycoon-toolbar-end { flex: 1 1 100%; overflow: visible; justify-content: center; gap: 6px; }
  .theme-rate, .theme-lv, .tycoon-rush-meter, .room-slots, .promo-detail { display: none; }
  .tycoon-theme-btn { padding: 6px 11px; font-size: 11.5px; }
  .tycoon-theme-btn.is-shut::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px; margin-left: 5px; border-radius: 50%;
    background: #e8837a; vertical-align: middle;
  }
  .theme-dot { margin-left: 5px; }
  .tycoon-rush { padding: 5px 10px; font-size: 11px; gap: 6px; }
  .tycoon-add-room, .tycoon-promo-btn { font-size: 11px; padding: 6px 10px; }
}
@media (max-width: 400px) {
  .tycoon-theme-btn { padding: 6px 8px; font-size: 11px; }
  .tycoon-toolbar-end { gap: 4px; }
}
@media (max-width: 400px) {
  /* "$502.04B" is eight characters; at 18px it clipped the box. */
  .tycoon-page .hud-value { font-size: 15px; }
}

/* ---- Boxes, and a fold ----
   Storage is a card with a heading, not a heading floating over a row of
   chips. The room breakdown folds up into one line -- which room, what it
   earns -- and opens when you want the working. Everything under the plan
   is centred in the column. */
.tycoon-tray {
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px 14px 12px;
  margin: 0 0 10px;
}
.tycoon-tray-head { justify-content: center; position: relative; margin-bottom: 10px; }
.tycoon-tray-head .tycoon-panel-title { margin: 0; text-align: center; }
.tycoon-inventory { justify-content: center; max-width: none; margin: 0; }

.tycoon-room-details {
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  margin: 0 0 10px;
}
.tycoon-room-details[hidden] { display: none; }
.tycoon-room-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--muted, #8b8b93);
  user-select: none;
}
.tycoon-room-details > summary::-webkit-details-marker { display: none; }
.tycoon-room-details > summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.tycoon-room-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.tycoon-rd-sum { color: #ffd166; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tycoon-room-details .tycoon-synergy { margin: 0 auto; padding: 0 16px 12px; max-width: 440px; }
.tycoon-room-details .tycoon-bd-head { display: none; }
.tycoon-next, .tycoon-open-hint { margin-left: auto; margin-right: auto; }
@media (max-width: 1079px) {
  .tycoon-inventory { justify-content: center; }
  .tycoon-tray-head .tycoon-panel-sub { display: none; }
}
@media (max-width: 560px) {
  /* "Per second" and "In bubbles" in full, on two short lines rather than
     clipped to "PER SECO…". */
  .tycoon-page .hud-label { white-space: normal; line-height: 1.1; letter-spacing: 0.2px; }
  .tycoon-page .hud-stat { display: flex; flex-direction: column; justify-content: flex-end; }
}

/* ---- The busy badge explains itself ----
   "Steady +14%" is the busy-hour bonus, and as a bare badge that is not
   obvious. Tapping it opens a short card underneath saying what the hour
   is, what it is worth, and how the day runs. */
.tycoon-rush { position: relative; cursor: pointer; }
.tycoon-rush:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.tycoon-rush-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--muted, #8b8b93);
}
.tycoon-rush-pop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 11px 13px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 12px;
  background: #16141c;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  color: #e9e9ee;
  text-align: left;
  white-space: normal;
  flex-direction: column;
  gap: 6px;
  cursor: default;
}
.tycoon-rush-pop b { color: #ffd166; font-weight: 800; }
.tycoon-rush.is-open .tycoon-rush-pop { display: flex; }
.tycoon-rush.is-open { border-color: rgba(255, 209, 102, 0.5); }
@media (max-width: 1079px) {
  /* On a narrow screen the badge sits at the row's left, so the card hangs
     from its left edge rather than being centred off the screen. */
  .tycoon-rush-pop { left: 0; transform: none; }
}

/* ---- Promo, explained ----
   One pill with two halves: the left half runs the promo, the ? on the
   right opens a card that says what it does. The card opens from the ?
   only -- never on hover, so the one thing the pill does on a mouse is
   the same thing it does under a finger. */
.tycoon-promo-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 205, 90, 0.45);
  background: rgba(255, 205, 90, 0.1);
  overflow: visible;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tycoon-promo-wrap[hidden] { display: none !important; }
.tycoon-toolbar-end .tycoon-promo-wrap .tycoon-promo-btn,
.tycoon-promo-wrap .tycoon-promo-btn {
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 999px 0 0 999px;
  padding: 7px 9px 7px 14px;
  transition: none;
}
.tycoon-promo-wrap .tycoon-promo-btn:hover:not(:disabled) { background: transparent; }
.tycoon-promo-wrap .tycoon-promo-btn:active:not(:disabled) { transform: none; }
.tycoon-promo-wrap .tycoon-promo-btn.is-running:disabled { background: transparent; }
.tycoon-info {
  width: auto;
  height: auto;
  align-self: stretch;
  border-radius: 0 999px 999px 0;
  border: none;
  border-left: 1px solid rgba(255, 205, 90, 0.35);
  background: transparent;
  color: #ffd97a;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 11px 0 9px;
  flex: none;
}
.tycoon-info:hover, .tycoon-info:focus-visible { color: #ffe6a6; background: rgba(255, 205, 90, 0.16); outline: none; }
/* The pill takes the colour of the button inside it. */
.tycoon-promo-wrap:has(.tycoon-promo-btn:not(:disabled):hover) {
  background: rgba(255, 205, 90, 0.2);
  border-color: rgba(255, 205, 90, 0.75);
}
.tycoon-promo-wrap:has(.tycoon-promo-btn:disabled) {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}
.tycoon-promo-wrap:has(.tycoon-promo-btn:disabled) .tycoon-info { border-left-color: rgba(255, 255, 255, 0.12); }
.tycoon-promo-wrap:has(.tycoon-promo-btn.is-running:disabled) {
  border-color: rgba(255, 205, 90, 0.6);
  background: linear-gradient(180deg, rgba(255, 205, 90, 0.26), rgba(255, 205, 90, 0.1));
}
.tycoon-promo-wrap:has(.tycoon-promo-btn.is-running:disabled) .tycoon-info { border-left-color: rgba(255, 205, 90, 0.4); }
.tycoon-promo-wrap.is-open { border-color: rgba(255, 209, 102, 0.6); }
.tycoon-info-pop { top: calc(100% + 8px); right: 0; left: auto; transform: none; }
.tycoon-promo-wrap.is-open .tycoon-info-pop { display: flex; }
@media (max-width: 560px) {
  /* On a phone the pill shares a row with Add Room: it takes that half,
     and the button inside takes all of the pill but the ? */
  .tycoon-toolbar-end .tycoon-promo-wrap { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .tycoon-toolbar-end .tycoon-promo-wrap .tycoon-promo-btn { flex: 1 1 auto; min-width: 0; padding: 6px 6px 6px 10px; }
}

/* ---- The filter ----
   A dropdown holding a tick box per category: one small control when it is
   shut, and open, any mix of categories can be hidden at once. */
.tycoon-filters {
  display: flex;
  justify-content: center;
  overflow: visible;
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 12px;
}
.tycoon-filters { gap: 8px; flex-wrap: wrap; align-items: center; }
.tycoon-filter-menu { position: relative; display: inline-block; }
/* How many a press of Buy buys. Sits beside the filter as one small
   segmented control rather than a second button on every row. */
.tycoon-buymult {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.tycoon-buymult-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--muted, #8b8b93);
  margin-right: 3px;
}
.tycoon-buymult-btn {
  min-width: 30px;
  padding: 5px 7px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted, #8b8b93);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.tycoon-buymult-btn:hover { color: var(--text, #e9e9ee); }
.tycoon-buymult-btn.is-on { background: rgba(255, 209, 102, 0.16); color: #ffd166; }
.shop-buy-x { font-variant-numeric: tabular-nums; }
.tycoon-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted, #8b8b93);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
}
.tycoon-filter-btn:hover { border-color: rgba(255, 209, 102, 0.55); color: var(--text, #e9e9ee); }
.tycoon-filter-state { color: var(--text, #e9e9ee); }
.tycoon-filters.is-on .tycoon-filter-btn { color: #ffd166; border-color: rgba(255, 209, 102, 0.6); }
.tycoon-filters.is-on .tycoon-filter-state { color: #ffd166; }
.tycoon-filter-caret { transition: transform 0.15s ease; opacity: 0.8; }
.tycoon-filter-menu.is-open .tycoon-filter-caret { transform: rotate(180deg); }
.tycoon-filter-drop {
  position: absolute;
  top: calc(100% + 7px);
  /* Hung off the left edge of the button rather than centred on it. The
     button sits near the left of the panel, and a three hundred pixel menu
     centred on it ran off the side of a phone: a third of the tick boxes
     were past the edge of the screen, which is a filter that does not
     work. */
  left: 0;
  right: auto;
  z-index: 25;
  width: max-content;
  max-width: min(300px, calc(100vw - 28px));
  padding: 9px;
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 14px;
  background: #16141c;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.tycoon-filter-drop[hidden] { display: none !important; }
.tycoon-filter-reset {
  display: block;
  width: 100%;
  margin-top: 8px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffd166;
  background: transparent;
  border: 1px solid rgba(255, 209, 102, 0.5);
  border-radius: 999px;
  padding: 4px 9px;
  cursor: pointer;
}
.tycoon-filter-reset[hidden] { display: none !important; }
.tycoon-filter-reset:hover { background: rgba(255, 209, 102, 0.14); }
.tycoon-filter-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.tycoon-filter-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--text, #e9e9ee);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tycoon-filter-box input { position: absolute; opacity: 0; width: 0; height: 0; }
.tycoon-filter-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #ffd166;
  color: #241d05;
}
.tycoon-filter-tick svg { width: 11px; height: 11px; }
.tycoon-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tycoon-filter-box.is-off { color: var(--muted, #8b8b93); opacity: 0.7; }
.tycoon-filter-box.is-off .tycoon-filter-tick { background: transparent; color: transparent; }
.tycoon-filter-box.is-off .tycoon-filter-dot { opacity: 0.4; }
.tycoon-filter-box:focus-within { border-color: #ffd166; }

/* ---- The vibe meter ----
   Vibe is a number with a ceiling, so it reads as a bar: how full it is
   says how much of it is left to buy. Under it, what else the decor in
   this room is doing. */
.tycoon-vibe {
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 9px 11px 10px;
  margin: 0 0 10px;
  text-align: left;
}
.tycoon-vibe-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.tycoon-vibe-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted, #8b8b93);
}
.tycoon-vibe-num { font-size: 12px; font-weight: 800; color: #7fd8a8; font-variant-numeric: tabular-nums; }
.tycoon-vibe-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.tycoon-vibe-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4fc38a, #7fd8a8);
}
.tycoon-vibe-note { margin: 7px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted, #8b8b93); }
.tycoon-vibe-list { margin: 7px 0 0; padding: 0 0 0 15px; font-size: 11.5px; line-height: 1.5; color: var(--muted, #8b8b93); }
.tycoon-vibe-list li { margin: 1px 0; }

/* What Sell all pays, shown when you point at it or hold it. */
.tycoon-inv-sell.is-all { position: relative; }
.tycoon-inv-sell.is-all::after {
  content: attr(data-pays);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 209, 102, 0.5);
  background: #16141c;
  color: #ffd166;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 20;
}
.tycoon-inv-sell.is-all:hover::after,
.tycoon-inv-sell.is-all:focus-visible::after { opacity: 1; }

/* The row never scrolls, at any width: a scroll container clips the cards
   that hang from the busy badge and the ? -- they opened, invisibly,
   under the floor plan. */
.tycoon-toolbar-end { overflow: visible; justify-content: safe center; }

/* ---- The clock ----
   A small chip at the head of the toolbar, always there, open or shut.
   Same pill as the busy badge next to it, since they are the same clock. */
.tycoon-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text, #e9e9ee);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tycoon-clock-icon { width: 13px; height: 13px; color: #ffd166; flex: none; }
@media (max-width: 560px) {
  /* Clock and busy badge share the first row; Add Room and Promo the next.
     Two rows of two, never one row that runs off the edge, and nothing in
     a pill wraps inside it. */
  .tycoon-toolbar-end { flex-wrap: wrap; row-gap: 4px; }
  .tycoon-toolbar-end .tycoon-clock { flex: none; margin: 0; }
  .tycoon-toolbar-end .tycoon-rush { flex: 1 1 calc(100% - 96px); flex-wrap: nowrap; margin: 0; }
  .tycoon-toolbar-end .tycoon-room-actions { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .tycoon-clock { padding: 5px 10px; }
}
@media (max-width: 1079px) {
  .tycoon-clock { padding: 5px 10px; }
}

/* ---- Storage on a phone ----
   A chip carries a name, a count, what it earns and two sell buttons, and
   at 400px that ran off the side of the card. One chip a row, its buttons
   pushed to the right, and nothing leaves the box. */
@media (max-width: 560px) {
  .tycoon-inventory { flex-direction: column; align-items: stretch; gap: 6px; }
  .tycoon-inv-item {
    width: 100%;
    justify-content: space-between;
    padding: 4px 5px 4px 10px;
    font-size: 11.5px;
    min-width: 0;
  }
  .tycoon-inv-arm {
    font-size: 11.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tycoon-inv-sell { font-size: 10.5px; padding: 4px 7px; }
}

/* ---- The controls sit on the plan ----
   They used to be a row above it, which the sticky money bar covered the
   moment you scrolled to the shop -- so the locations, the clock, the busy
   badge and Promo were all hidden exactly when you were using the page.
   On the plan they are always where the plan is. */
.tycoon-designer .tycoon-toolbar {
  /* Sticky rather than pinned to the top of the plan: as the page scrolls
     the bar slides down and parks just under the money stats, so it is
     never the thing they cover. It takes no layout height -- the negative
     margin cancels its own -- and the plan is given the same height back
     as padding, so nothing stands underneath it. */
  position: sticky;
  top: var(--tycoon-stick-top, 180px);
  z-index: 3;
  margin: 0 0 calc(-1 * var(--tycoon-bar-h, 66px));
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* The plan is dragged and pinched: the bar itself must never swallow a
     gesture, only its own buttons. */
  pointer-events: none;
}
.tycoon-designer .tycoon-toolbar > * { pointer-events: auto; }
.tycoon-designer .tycoon-toolbar .tycoon-theme-row,
.tycoon-designer .tycoon-toolbar-end {
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 6px;
  max-width: 100%;
}
/* Over a lit floor a flat chip disappears, so everything on the plan gets a
   dark backing and a real edge. */
.tycoon-designer .tycoon-toolbar .tycoon-theme-btn,
.tycoon-designer .tycoon-toolbar .tycoon-clock,
.tycoon-designer .tycoon-toolbar .tycoon-rush,
.tycoon-designer .tycoon-toolbar .tycoon-add-room,
.tycoon-designer .tycoon-toolbar .tycoon-promo-wrap {
  background-color: rgba(12, 11, 16, 0.82);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.tycoon-designer .tycoon-toolbar .tycoon-theme-btn.is-active {
  background-color: var(--amber, #ffb703);
}
.tycoon-designer .tycoon-toolbar .tycoon-promo-wrap .tycoon-promo-btn {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
/* The cards these open hang below their chip, over the plan. */
.tycoon-designer .tycoon-rush-pop { z-index: 6; }

/* The plan needs headroom so the controls are not standing on the gym. */
.tycoon-room-stage { padding-top: calc(var(--tycoon-bar-h, 66px) + 10px); }
@media (max-width: 560px) {
  .tycoon-designer .tycoon-toolbar { padding: 5px 5px 0; gap: 4px; }
}

/* On a phone the bar is standing on the gym, so it is made as small as it
   can be and still be read: four locations on one line, then the clock and
   the busy badge, then Add Room and Promo. Three short rows. */
@media (max-width: 560px) {
  .tycoon-designer .tycoon-toolbar .tycoon-theme-row { gap: 4px; flex-wrap: nowrap; }
  .tycoon-designer .tycoon-toolbar .tycoon-theme-btn {
    padding: 4px 7px;
    font-size: 10px;
    letter-spacing: 0;
    min-width: 0;
  }
  .tycoon-designer .tycoon-toolbar .tycoon-theme-btn .btn-lock-icon svg { width: 9px; height: 9px; }
  .tycoon-designer .tycoon-toolbar-end { gap: 4px; }
  .tycoon-designer .tycoon-toolbar .tycoon-clock { padding: 4px 8px; font-size: 10px; gap: 4px; }
  .tycoon-designer .tycoon-toolbar .tycoon-clock-icon { width: 11px; height: 11px; }
  .tycoon-designer .tycoon-toolbar .tycoon-rush { padding: 4px 9px; font-size: 10px; gap: 5px; }
  .tycoon-designer .tycoon-toolbar .tycoon-add-room,
  .tycoon-designer .tycoon-toolbar .tycoon-promo-btn { font-size: 10px; padding: 5px 9px; }
  .tycoon-designer .tycoon-toolbar .tycoon-info { font-size: 10px; padding: 0 9px 0 7px; }
}

/* ---- One question mark, one shape ----
   The busy badge and Promo both open a card from a "?", so the two look
   the same: a divided segment at the right-hand end of the pill, not a
   small circle floating inside one of them. */
/* The pill's own vertical padding moves onto its contents, so the "?"
   segment can run the full height of it the way Promo's does. */
.tycoon-rush { padding: 0 0 0 13px; overflow: hidden; align-items: stretch; flex-wrap: nowrap; }
.tycoon-rush-when,
.tycoon-rush-bonus { display: inline-flex; align-items: center; padding: 6px 0; }
.tycoon-rush-meter { align-self: center; }
.tycoon-rush-hint {
  align-self: stretch;
  width: auto;
  height: auto;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  padding: 0 11px 0 9px;
  margin-left: 2px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted, #8b8b93);
}
.tycoon-rush:hover .tycoon-rush-hint,
.tycoon-rush.is-open .tycoon-rush-hint { color: #ffd166; }
/* The badge is the button, so the card must not be clipped by the pill it
   hangs from. */
.tycoon-rush.is-open { overflow: visible; }

/* ---- Corners of the plan ----
   The clock bottom-left, Promo bottom-right. Both leave while a piece is
   being placed, because that is where the pad goes. */
.tycoon-corners {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.tycoon-corners > * { pointer-events: auto; }
.tycoon-corner-left { display: flex; align-items: flex-end; gap: 6px; }
.tycoon-corners .tycoon-sound {
  background-color: rgba(12, 11, 16, 0.82);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.tycoon-stage-wrap.is-editing .tycoon-corners { display: none; }
.tycoon-corners .tycoon-clock,
.tycoon-corners .tycoon-promo-wrap {
  background-color: rgba(12, 11, 16, 0.82);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.tycoon-corners .tycoon-promo-wrap .tycoon-promo-btn { background-color: transparent; backdrop-filter: none; box-shadow: none; }
/* The Promo card opens upward now, above the pill in the corner. */
.tycoon-corners .tycoon-info-pop { top: auto; bottom: calc(100% + 8px); right: 0; left: auto; transform: none; }
.tycoon-corners .tycoon-promo-wrap[hidden] { display: none !important; }
/* With the locations alone in it, the bar is one row. */
.tycoon-designer .tycoon-toolbar .tycoon-theme-row { margin: 0; }
@media (max-width: 560px) {
  .tycoon-corners { left: 6px; right: 6px; bottom: 6px; }
  .tycoon-corners .tycoon-clock { padding: 4px 8px; font-size: 10px; gap: 4px; }
  .tycoon-corners .tycoon-clock-icon { width: 11px; height: 11px; }
  .tycoon-corners .tycoon-promo-btn { font-size: 10px; padding: 5px 9px; }
  .tycoon-corners .tycoon-info { font-size: 10px; padding: 0 9px 0 7px; }
}

/* The busy meter in Room details, on the vibe meter's pattern. */
.tycoon-busy {
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 9px 11px 10px;
  margin: 0 0 10px;
  text-align: left;
}
.tycoon-busy .tycoon-vibe-num { color: #ffd166; }
.tycoon-busy .tycoon-rush-bonus.is-none { color: var(--muted, #8b8b93); }
.tycoon-vibe-bar.is-busy .tycoon-vibe-fill { background: linear-gradient(90deg, #7fd8e6, #ffd166); }

/* ---- The design shop ---- */
.tycoon-design .tycoon-panel-title { margin-top: 14px; }
.tycoon-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin: 0 0 4px;
}
.tycoon-swatches.is-list { grid-template-columns: 1fr; }
.tycoon-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 8px 8px;
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text, #e9e9ee);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  min-width: 0;
}
.tycoon-swatch:hover { border-color: rgba(255, 209, 102, 0.55); }
.tycoon-swatch.is-on { border-color: var(--amber, #ffb703); box-shadow: 0 0 0 2px rgba(255, 183, 3, 0.25); }
.tycoon-swatch.is-poor { opacity: 0.55; }
.tycoon-swatch-chip {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex: none;
}
.tycoon-swatch-chip.is-none { background: repeating-linear-gradient(45deg, #2a2732 0 5px, #16141c 5px 10px); }
.tycoon-swatch-name { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tycoon-swatch-name small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted, #8b8b93); white-space: normal; }
.tycoon-swatch-price { font-size: 10.5px; color: var(--muted, #8b8b93); white-space: nowrap; }
.tycoon-swatch.is-on .tycoon-swatch-price { color: var(--amber, #ffb703); }
.tycoon-swatch.is-wide {
  flex-direction: row;
  text-align: left;
  gap: 11px;
  padding: 9px 12px;
}
.tycoon-swatch.is-wide .tycoon-swatch-name { flex: 1 1 auto; }
.tycoon-swatch.is-wide .tycoon-swatch-price { margin-left: auto; }
@media (max-width: 560px) {
  .tycoon-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tycoon-swatch { padding: 7px 5px; font-size: 11px; }
  .tycoon-swatch-chip { width: 28px; height: 28px; }
}

/* ---- Trying a design on ----
   The swatch being previewed is marked, and a bar at the top of the panel
   carries the one button that pays for it. */
.tycoon-swatch.is-preview { border-color: #7fd8e6; box-shadow: 0 0 0 2px rgba(127, 216, 230, 0.3); }
.tycoon-swatch.is-preview .tycoon-swatch-price { color: #7fd8e6; }
/* The Buy button lives in the swatch being tried on: press the colour to
   see it, press its button to keep it. */
.tycoon-swatch-buy {
  display: inline-block;
  margin-top: 1px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 2px solid #000;
  background: var(--amber, #ffb703);
  color: #1a1200;
  box-shadow: 2px 2px 0 #000;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}
.tycoon-swatch-buy:hover { background: #ffc93a; }
.tycoon-swatch-buy:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.tycoon-swatch:focus-visible,
.tycoon-swatch-buy:focus-visible { outline: 2px solid #7fd8e6; outline-offset: 2px; }

/* ---- The corners stay inside the frame ----
   The plan window carries a bottom margin inside its wrapper, and the
   corner chips were placed against the wrapper's bottom, which put them
   half over the frame's edge. The margin moves to the wrapper. */
.tycoon-stage-wrap { margin-bottom: 14px; }
.tycoon-stage-wrap > .tycoon-room-stage { margin-bottom: 0; }
@media (min-width: 1080px) {
  .tycoon-stage-wrap { margin-bottom: 16px; }
  .tycoon-stage-wrap > .tycoon-room-stage { margin-bottom: 0; }
}

/* Below desktop width the plan window is centred at 560px wide inside a
   wrapper that spans the column, and the corner chips were placed against
   the wrapper's edges, off the plan on any screen between phone and
   desktop. They hug the window's own edges instead. */
@media (max-width: 1079px) {
  .tycoon-corners {
    left: max(10px, calc(50% - 270px));
    right: max(10px, calc(50% - 270px));
  }
}

/* ---- Two shops in one ----
   The machines that earn, then the decor that does everything else. The
   heading spans the grid whatever it is laid out as. */
.tycoon-shop-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 6px 0 -2px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--panel-border, #2a2732);
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text, #e9e9ee);
}
.tycoon-shop-head:first-child { margin-top: 0; }
.tycoon-shop-head[hidden] { display: none !important; }
.tycoon-shop-head-note {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted, #8b8b93);
}
/* A counter with nothing on the shelf is earning nothing, and says so. */
.tycoon-maker-state.is-dry { color: #e8837a; }

/* ---- The status strip ----
   Three figures and a level bar, under the plan and deliberately quiet:
   as a sticky bar over the page these took a fifth of a phone screen and
   covered the controls standing on the plan. */
.tycoon-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.tycoon-status .game-hud {
  display: flex;
  flex: 1 1 auto;
  gap: 14px;
  justify-content: flex-start;
  min-width: 0;
}
.tycoon-status .hud-stat {
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tycoon-status .hud-label {
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted, #8b8b93);
  white-space: nowrap;
}
.tycoon-status .hud-value {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.05;
  color: var(--amber, #ffb703);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The level, as a bar rather than a fourth figure. */
.tycoon-status .hud-level {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 190px;
  min-width: 150px;
  max-width: 320px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
}
.hud-level-now {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted, #8b8b93);
  white-space: nowrap;
}
.hud-level-now b { color: var(--text, #e9e9ee); font-size: 13px; }
.tycoon-page .tycoon-status .hud-xp-bar {
  flex: 1 1 auto;
  height: 6px;
  min-width: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.tycoon-page .tycoon-status .hud-xp-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4fc38a, #7fd8a8);
}
.tycoon-page .tycoon-status .hud-xp-text {
  font-size: 9.5px;
  color: var(--muted, #8b8b93);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tycoon-status .hud-level.is-up { animation: tycoon-lvl-pop 0.5s ease; }
@keyframes tycoon-lvl-pop { 0%, 100% { transform: none; } 40% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .tycoon-status .hud-level.is-up { animation: none; } }
@media (max-width: 560px) {
  .tycoon-status { gap: 8px; padding: 7px 10px; }
  .tycoon-status .game-hud { gap: 11px; }
  .tycoon-status .hud-value { font-size: 15px; }
  .tycoon-status .hud-level { flex: 1 1 100%; max-width: none; margin-left: 0; }
}

/* Storage folds away like the room details, and reads the same when shut --
   except for the crate on its summary. It is the one block under the plan
   you come back to between every purchase, and set in the same grey as
   everything else around it, the word alone took a moment to find. */
.tycoon-rd-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: #ffd166;
}
.tycoon-tray.tycoon-room-details > summary .tycoon-rd-label { color: #d8d8e0; }
.tycoon-tray.tycoon-room-details { padding: 0; }
.tycoon-tray.tycoon-room-details > .tycoon-inventory { padding: 0 12px 12px; }
.tycoon-tray.tycoon-room-details > summary { justify-content: center; }

/* Headings read as words rather than as shouting: the display face does
   the work that setting them in capitals used to. */
.tycoon-panel-title { text-transform: none; letter-spacing: 0.2px; }
.tycoon-shop-head-name { text-transform: none; }
.leaderboard-title { text-transform: none; letter-spacing: 0.2px; }

/* ---- A description belongs under its title ----
   Set beside one, a short description reads as part of the heading and
   pushes it off centre. Every one of them goes on its own line. */
.tycoon-panel-sub,
.tycoon-shop-head-note,
.leaderboard-sub {
  display: block;
  margin-top: 3px;
}
.tycoon-shop-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.tycoon-tray-head .tycoon-panel-title,
.tycoon-panel-title { line-height: 1.15; }
/* Where the heading is centred, its description is too. */
.tycoon-panel-title { text-align: inherit; }
.tycoon-shop-head-note { line-height: 1.3; }

/* ---- Toasts sit over everything ----
   The plan and the chips standing on it carry their own stacking, so a
   toast with no z-index of its own was painted behind the gym: "+$1.2K"
   for a bubble you had just tapped, invisible under the floor. It is
   fixed to the window rather than the page, so it lands where you are
   looking whatever is scrolled where. */
.tycoon-page > .game-toast {
  position: fixed;
  top: auto;
  bottom: 18%;
  left: 50%;
  z-index: 120;
  /* Its own backing: over a shop row, white letters on a dark outline are
     hard to read, and a toast should look like one wherever it lands. */
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 205, 90, 0.45);
  background: rgba(12, 11, 16, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  font-size: clamp(1.1rem, 4.5vw, 1.7rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
@media (min-width: 1080px) {
  /* Over the plan's own column, not the middle of the page. */
  .tycoon-page > .game-toast { left: calc(50% - 200px); }
}

/* ---- The tabs, on a phone ----
   Six tabs across a 360-pixel screen left each one 48 pixels for a word
   that wanted 62, so the labels ran into their neighbours and Counter was
   cut to "Counte" -- which is how the Staff tab came to look like it had
   gone. Three to a row instead, on two rows, every word whole and every
   tab still one tap away. This is below the plan, not over it, so the
   second row costs nothing you were looking at. */
@media (max-width: 620px) {
  .tycoon-tabs {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .tycoon-tab {
    flex: 1 1 calc(33.333% - 4px);
    font-size: 13px;
    letter-spacing: 0.4px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ---- The shop, on a phone ----
   A row was a card: name, then line, then a full-width Buy, then a
   full-width Upgrade. Four stacked bands meant three items filled the
   screen and the shop was all scrolling. The row is two columns instead --
   what it is on the left, what you can do about it on the right -- so a
   screen holds six or seven and you can compare them without scrolling.

   Every long button label carries a short twin in the markup and this is
   where the choice is made: a third of a phone row is no place for
   "Upgrade to Mk II for $1.00K (x2.2)". */
.btn-short { display: none; }
@media (max-width: 620px) {
  .btn-long { display: none; }
  .btn-short { display: inline; }

  .tycoon-shop { gap: 8px; }
  .shop-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(92px, 124px);
    grid-template-areas:
      "icon name act"
      "count line up";
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    padding: 9px 11px;
    border-radius: 12px;
  }
  /* The head is a box of its own only on a wide screen. Here its three
     parts take their own places in the row's grid, which gets the count
     out from beside the name and gives the name the width it needs to
     stay on one line. */
  .shop-item-head { display: contents; }
  .shop-item-icon { grid-area: icon; }
  .shop-item-name { grid-area: name; font-size: 12.5px; }
  .shop-item-owned { grid-area: count; margin-left: 0; font-size: 10.5px; }
  .shop-item-gps { grid-area: line; font-size: 11px; line-height: 1.35; }
  .shop-item-buy { grid-area: act; align-self: center; }
  .shop-upgrade-btn { grid-area: up; width: 100%; margin-top: 0; }
  .shop-buy-btn {
    margin-top: 0;
    width: 100%;
    font-size: 12px;
    padding: 8px 6px;
    border-width: 1.5px;
    box-shadow: 2px 2px 0 #000;
  }
  .shop-buy-btn:hover:not(:disabled) { box-shadow: 3px 3px 0 #000; }
  .shop-item.is-shut .shop-buy-btn { font-size: 11px; }
  .shop-upgrade-btn { font-size: 10.5px; padding: 6px 6px; }
}

/* ---- Room goals ----
   The two things a whole room can do, in the same box as the vibe and the
   busy meter. A met goal reads in green; an unmet one says what is missing. */

/* ---- Sound toggle ----
   A pill the size of the clock beside it. Off it is dim with a struck
   speaker; on it is lit with sound lines. */
.tycoon-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted, #8b8b93);
  cursor: pointer;
}
.tycoon-sound:hover { color: var(--text, #e9e9ee); border-color: rgba(255, 255, 255, 0.2); }
.tycoon-sound-icon { width: 15px; height: 15px; }
.tycoon-sound .tycoon-sound-icon.is-on { display: none; }
.tycoon-sound[aria-pressed="true"] { color: #ffd166; border-color: rgba(255, 209, 102, 0.45); }
.tycoon-sound[aria-pressed="true"] .tycoon-sound-icon.is-off { display: none; }
.tycoon-sound[aria-pressed="true"] .tycoon-sound-icon.is-on { display: block; }

/* ---- Save code ----
   A fold like the trophies and the how-to: the code to copy, the box to
   paste into, and one line saying what each is for. */
.tycoon-savebox {
  max-width: 780px;
  margin: 8px auto 0;
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}
.tycoon-savebox > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  list-style: none;
}
.tycoon-savebox > summary::-webkit-details-marker { display: none; }
.tycoon-savebox > summary::after {
  content: '+';
  float: right;
  font-weight: 400;
  color: var(--muted, #8b8b93);
}
.tycoon-savebox[open] > summary::after { content: '\2013'; }
.tycoon-savebox-body { padding: 0 14px 14px; }
.tycoon-savebox-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #8b8b93);
}
.tycoon-savebox-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 8px 10px;
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text, #e9e9ee);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 8px;
  word-break: break-all;
}
.tycoon-savebox-code.is-paste { margin-top: 14px; }
.tycoon-savebox-code:focus { outline: none; border-color: var(--amber, #ffb703); }
.tycoon-savebox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.tycoon-savebox-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--amber, #ffb703);
  background: rgba(255, 183, 3, 0.12);
  color: #ffd166;
  cursor: pointer;
}
.tycoon-savebox-btn:hover { background: rgba(255, 183, 3, 0.22); color: var(--text, #e9e9ee); }
.tycoon-savebox-btn.is-load {
  border-color: rgba(126, 224, 176, 0.5);
  background: rgba(126, 224, 176, 0.10);
  color: #8fe9be;
}
.tycoon-savebox-btn.is-load:hover { background: rgba(126, 224, 176, 0.2); }
.tycoon-savebox-when { font-size: 11.5px; color: var(--muted, #8b8b93); }
.tycoon-savebox-when.is-bad { color: #ff8a80; }

/* The room's regular, one line under the goals. */
.tycoon-regular {
  margin: 0 0 10px;
  padding: 0 2px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #8b8b93);
  text-align: left;
}
.tycoon-regular b { color: #ffd166; font-weight: 800; }

/* ---- A closed location ----
   The desk is the one thing that has to happen before anything else works,
   and a new player was told so only in the Shop panel, below the fold. This
   sits on the plan, where they are already looking. */
.tycoon-shut {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: min(300px, calc(100% - 32px));
  padding: 14px 16px 15px;
  border: 1px solid rgba(255, 183, 3, 0.5);
  border-radius: 14px;
  background: rgba(14, 12, 18, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.tycoon-shut[hidden] { display: none !important; }
.tycoon-stage-wrap.is-editing .tycoon-shut { display: none; }
.tycoon-shut-title {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #ffd166;
}
.tycoon-shut-note {
  margin: 6px 0 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text, #e9e9ee);
}
.tycoon-shut-btn {
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 2px solid #000;
  background: var(--amber, #ffb703);
  color: #1a1200;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
.tycoon-shut-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }

/* ---- The level chip, and the card it opens ---- */
.tycoon-page .hud-level {
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.tycoon-page .hud-level:hover { border-color: rgba(255, 209, 102, 0.5); }
.tycoon-page .hud-level[aria-expanded="true"] { border-color: var(--amber, #ffb703); }

.tycoon-level-pop {
  position: fixed;
  z-index: 95;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px 13px;
  border: 1px solid rgba(255, 205, 90, 0.45);
  border-radius: 12px;
  background: #16141c;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65);
  color: var(--text, #e9e9ee);
  text-align: left;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tycoon-level-pop.is-on { opacity: 1; }
.tycoon-level-pop[hidden] { display: none !important; }
.tycoon-level-pop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.tycoon-level-pop-now {
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #ffd166;
}
.tycoon-level-pop-xp {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #8b8b93);
  font-variant-numeric: tabular-nums;
}
.tycoon-level-pop-bar {
  display: block;
  height: 6px;
  margin: 7px 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.tycoon-level-pop-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7ee0b0, #ffd166);
}
.tycoon-level-pop-rep,
.tycoon-level-pop-next,
.tycoon-level-pop-note {
  margin: 0 0 7px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #8b8b93);
}
.tycoon-level-pop-rep b, .tycoon-level-pop-next b { color: #ffd166; font-weight: 800; }
.tycoon-level-pop-note { margin-bottom: 0; }
.tycoon-level-pop-head2 {
  margin: 9px 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted, #8b8b93);
}
.tycoon-level-pop-list {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted, #8b8b93);
}
.tycoon-level-pop-list li { display: flex; gap: 8px; }
.tycoon-level-pop-list b {
  flex: none;
  min-width: 20px;
  color: #ffd166;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---- Storage ----
   It used to be a wrap of identical pills: ten things you owned read as ten
   pills, in the order you happened to buy them, none of them saying what it
   was or what it was worth. Now it is a list, grouped and ordered the way
   the shop is, one row a piece: what it is on the left with a line about
   what it does, and what you can do with it on the right. */
.tycoon-inventory {
  display: block;
  max-width: none;
  margin: 0;
  text-align: left;
}
.tycoon-store-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 7px;
  border-bottom: 1px solid var(--panel-border, #2a2732);
  margin-bottom: 4px;
}
.tycoon-store-count { font-size: 11.5px; font-weight: 800; color: var(--text, #e9e9ee); }
.tycoon-store-worth {
  font-size: 11.5px;
  font-weight: 800;
  color: #7fd8a8;
  font-variant-numeric: tabular-nums;
}
.tycoon-store-sect {
  margin: 9px 0 3px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted, #8b8b93);
}
.tycoon-store-sect:first-of-type { margin-top: 4px; }

.tycoon-inv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px 4px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
}
.tycoon-inv-item + .tycoon-inv-item { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.tycoon-inv-item:hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; }
.tycoon-inv-item.is-armed {
  background: rgba(255, 183, 3, 0.14);
  border-color: rgba(255, 183, 3, 0.55);
  color: inherit;
}

.tycoon-inv-arm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 4px;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.tycoon-inv-arm .inv-cat-dot { margin: 0; }
.tycoon-inv-arm .inv-icon { flex: none; }
.inv-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
/* The name may be trimmed to fit; the count never is, or a row of six
   dumbbells reads as a row of one. */
.inv-line { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.inv-name {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--text, #e9e9ee);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-line .inv-count { flex: none; margin: 0; }
.tycoon-inv-item.is-armed .inv-name { color: #ffd166; }
.inv-note {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted, #8b8b93);
}
.inv-take {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--amber, #ffb703);
}
.tycoon-inv-item.is-armed .inv-take { color: #ffd166; }
.tycoon-inv-arm:hover .inv-take { color: var(--text, #e9e9ee); }

.tycoon-inv-acts { display: flex; align-items: center; gap: 5px; flex: none; }
.tycoon-inv-item .tycoon-inv-sell { font-size: 10.5px; padding: 4px 8px; }

/* On a phone a row is two lines: what it is, then what you can do with it.
   Three controls and a name on one line meant the name was trimmed to
   "Rowing Machin..." and the count fell off the end. The head goes too --
   the fold's own summary already carries both its numbers. */
@media (max-width: 620px) {
  .tycoon-store-head { display: none; }
  .tycoon-inv-item {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 5px 6px 7px;
  }
  .tycoon-inv-arm { flex: 1 1 100%; padding: 4px 2px; gap: 7px; }
  .inv-note { font-size: 10px; }
  .tycoon-inv-acts { margin-left: auto; }
  .tycoon-inv-item .tycoon-inv-sell { padding: 4px 9px; }
}

/* The mark on a shop row, in the metal its plate is made of on the plan:
   bronze, steel, gold. A piece that has been rebuilt three times should
   say so in the same breath in both places. */
.shop-mark {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---- Coming back ----
   A week of days across the front, what today is worth in the middle, and
   the button. Lit while there is something to collect and quiet once there
   is not, because a control with nothing to do should not be shouting. */
.tycoon-streak {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto 12px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 209, 102, 0.18);
  border-radius: 12px;
  background: rgba(255, 209, 102, 0.04);
  font-size: 12.5px;
  line-height: 1.35;
  color: #e9e9ee;
}
.tycoon-streak[hidden] { display: none; }
.tycoon-streak.is-due {
  border-color: rgba(255, 209, 102, 0.55);
  background: rgba(255, 209, 102, 0.1);
}
.tycoon-streak-days {
  display: flex;
  flex: none;
  gap: 4px;
}
.tycoon-streak-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 209, 102, 0.3);
  background: transparent;
}
.tycoon-streak-pip.is-done {
  border-color: #ffd166;
  background: #ffd166;
}
/* The day waiting to be collected: ringed rather than filled, so the row
   reads as a week with one day still to go. */
.tycoon-streak-pip.is-next {
  border-color: #ffd166;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.22);
}
.tycoon-streak-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.tycoon-streak-title { font-weight: 800; }
.tycoon-streak-note {
  color: #a9a9b6;
  font-size: 11.5px;
}
.tycoon-streak-btn {
  flex: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  color: #2a1e00;
  background: linear-gradient(180deg, #ffd98a, #f3b73f);
}
.tycoon-streak-btn:disabled {
  cursor: default;
  color: #8a8a96;
  background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 620px) {
  .tycoon-streak { gap: 9px; padding: 8px 11px; font-size: 12px; }
  .tycoon-streak-pip { width: 8px; height: 8px; }
}


/* ---- The plan window is yours to size ----
   A grab bar under the frame: pull it down for a taller window, up for a
   shorter one, double-click to put it back. Where you leave it is where it
   stays, because on a short screen the plan and the shop under it are
   fighting over the same space and which one wins is not our call. */
.tycoon-stage-size {
  display: flex;
  justify-content: center;
  margin: -6px auto 10px;
}
.tycoon-stage-grip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 74px;
  padding: 7px 0;
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted, #8b8b93);
  cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.tycoon-stage-grip > span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.7;
}
.tycoon-stage-grip:hover,
.tycoon-stage-grip:focus-visible,
.tycoon-stage-grip.is-dragging { color: #ffd166; background: rgba(255, 209, 102, 0.09); }


/* ---- Above the plan ----
   The daily and the room breakdown sit over the plan window rather than
   under it. Below a window tall enough to fill a phone they were off the
   screen, which for a thing you are meant to collect is the same as not
   being there. */
.tycoon-above {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto 10px;
  width: 100%;
  max-width: 560px;
}
.tycoon-above > * { margin-bottom: 0; }
@media (min-width: 1080px) { .tycoon-above { max-width: none; } }

/* ---- Naming the gym ----
   It was a bare input between a level card and a list of locations, with
   nothing but its own placeholder to say what it was for. It gets a
   heading like everything else in the panel, and a box that looks like
   something you are meant to type in. */
.tycoon-namer {
  border: 1px solid var(--panel-border, #2a2732);
  border-radius: 14px;
  background: rgba(255, 209, 102, 0.05);
  padding: 12px 14px;
  margin: 0 0 12px;
}
.tycoon-namer .tycoon-panel-title { margin: 0 0 8px; }
.tycoon-namer .tycoon-gym-name {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(255, 209, 102, 0.4);
  background: rgba(0, 0, 0, 0.3);
}
.tycoon-namer .tycoon-gym-name:focus {
  border-color: #ffd166;
  outline: none;
}

/* ---- Photo mode ----
   The gym with nothing in front of it. The plan window goes full screen,
   everything that is a control rather than the gym gets out of the way,
   and one caption says whose gym it is -- so a screenshot of it is worth
   sending to somebody. Panning and pinching still work: framing the shot
   is the whole point. */
.tycoon-photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background-color: rgba(12, 11, 16, 0.82);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  color: var(--muted, #8b8b93);
  cursor: pointer;
}
.tycoon-photo-btn:hover { color: var(--text, #e9e9ee); border-color: rgba(255, 255, 255, 0.2); }
.tycoon-photo-btn svg { width: 15px; height: 15px; }

/* Shows up for a few seconds after a piece is put down, and goes away
   again. Wider than the icon buttons beside it because it has a word on
   it: this one has to be recognised in a hurry. */
.tycoon-undo-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 27px;
  padding: 0 10px 0 8px;
  border: 1px solid rgba(255, 209, 102, 0.5);
  border-radius: 999px;
  background-color: rgba(12, 11, 16, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  color: #ffd166;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.tycoon-undo-btn:hover { background-color: rgba(255, 209, 102, 0.16); }
.tycoon-undo-btn svg { width: 14px; height: 14px; }
.tycoon-undo-btn[hidden] { display: none !important; }

/* Same pill as the camera beside it; lit when it is on. */
.tycoon-use-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 27px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background-color: rgba(12, 11, 16, 0.82);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  color: var(--muted, #8b8b93);
  cursor: pointer;
}
.tycoon-use-btn:hover { color: var(--text, #e9e9ee); border-color: rgba(255, 255, 255, 0.2); }
.tycoon-use-btn svg { width: 15px; height: 15px; }
.tycoon-use-btn[aria-pressed="true"] { color: #ffd166; border-color: rgba(255, 209, 102, 0.55); }

body.is-photo { overflow: hidden; }
body.is-photo .site-header,
body.is-photo .tycoon-toolbar,
body.is-photo .tycoon-corners,
body.is-photo .tycoon-stage-size,
body.is-photo .tycoon-place-hud,
body.is-photo .tycoon-shut { display: none !important; }
body.is-photo .tycoon-stage-wrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  margin: 0;
  background: var(--bg, #0b0a0f);
}
body.is-photo .tycoon-room-stage {
  /* Beats the height the grip writes straight onto the element. */
  height: 100% !important;
  max-height: none !important;
  border-radius: 0;
  border: 0;
}
.tycoon-photo-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}
/* display:flex above beats the browser's own [hidden] rule, so say it. */
.tycoon-photo-bar[hidden] { display: none !important; }
.tycoon-photo-bar > * { pointer-events: auto; }
.tycoon-photo-cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tycoon-photo-name {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tycoon-photo-sub {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffd166;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.tycoon-photo-exit {
  flex: none;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(12, 11, 16, 0.72);
  backdrop-filter: blur(6px);
  color: var(--text, #e9e9ee);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.tycoon-photo-exit:hover { border-color: rgba(255, 209, 102, 0.6); color: #ffd166; }
@media (max-width: 560px) {
  .tycoon-photo-bar { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .tycoon-photo-name { font-size: 16px; }
}

/* ---- What people came in for ----
   The room's draw, split by the kind of kit they came to use, under the
   Who-is-in bar. Three short rows rather than a sentence: the one that is
   short of machines is the one to read. */
.tycoon-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 7px 0 2px;
}
.tycoon-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--muted, #8b8b93);
}
.tycoon-kind-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tycoon-kind-name { color: var(--text, #e9e9ee); }
.tycoon-kind-num { font-variant-numeric: tabular-nums; }
.tycoon-kind.is-short .tycoon-kind-num { color: #ff9f6b; }
.tycoon-kind.is-spare .tycoon-kind-num { color: #7f8794; }

/* ---- A slot waiting to be filled ---- */
/* Three ways of doing the same work, side by side. Ranged left like the
   jobs above them, and marked out as a choice rather than a task by the
   dashed edge: nothing here is being worked towards yet. */
.tycoon-offer {
  border: 1px dashed rgba(232, 196, 106, 0.4);
  border-radius: 11px;
  background: rgba(232, 196, 106, 0.05);
  padding: 9px 10px;
  text-align: left;
}
.tycoon-offer-head {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #e8c46a;
  margin-bottom: 7px;
}
.tycoon-offer-picks { display: flex; flex-direction: column; gap: 6px; }
.tycoon-offer-pick {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
  padding: 7px 9px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tycoon-offer-pick:hover { border-color: rgba(232, 196, 106, 0.55); }
.tycoon-offer-pick:focus-visible {
  outline: 2px solid rgba(232, 196, 106, 0.8);
  outline-offset: 1px;
}
.tycoon-offer-shape {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted, #8b8b93);
}
.tycoon-offer-pick.is-quick .tycoon-offer-shape { color: #7ee0b0; }
.tycoon-offer-pick.is-heavy .tycoon-offer-shape { color: #e89a6a; }
.tycoon-offer-text { font-size: 12px; line-height: 1.35; }
.tycoon-offer-reward { font-size: 10px; color: #e8c46a; }

/* ---- What you charge ---- */
/* Five rates, each with what the whole gym would take at it. The one you
   are on is lit; the others are there to be compared against it. */
.tycoon-price { margin: 14px 0 4px; }
.tycoon-price-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.tycoon-price-btn {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
  padding: 7px 8px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tycoon-price-btn:hover { border-color: rgba(255, 255, 255, 0.24); }
.tycoon-price-btn:focus-visible {
  outline: 2px solid rgba(126, 224, 176, 0.8);
  outline-offset: 1px;
}
.tycoon-price-btn.is-on {
  border-color: rgba(126, 224, 176, 0.6);
  background: rgba(126, 224, 176, 0.09);
}
.tycoon-price-name { font-size: 12px; font-weight: 700; }
.tycoon-price-mult {
  font-size: 10px;
  letter-spacing: 0.2px;
  color: var(--muted, #8b8b93);
}
.tycoon-price-rate { font-size: 11px; font-weight: 700; color: #e8c46a; }
.tycoon-price-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #8b8b93);
}

/* The question mark on the Membership card, and what it folds open. */
.tycoon-price-help {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  vertical-align: 1px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted, #8b8b93);
  cursor: pointer;
}
.tycoon-price-help:hover { color: #e8e8ee; border-color: rgba(255, 255, 255, 0.45); }
.tycoon-price-help.is-on {
  color: #06231a;
  border-color: transparent;
  background: #7ee0b0;
}
.tycoon-price-help:focus-visible {
  outline: 2px solid rgba(126, 224, 176, 0.8);
  outline-offset: 1px;
}
.tycoon-price-info {
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  padding: 9px 11px;
  text-align: left;
}
.tycoon-price-rule {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #c9c9d2;
}
.tycoon-price-tips {
  margin: 8px 0;
  padding-left: 15px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted, #8b8b93);
}
.tycoon-price-tips li { margin-bottom: 4px; }
.tycoon-price-tips b { color: #e8e8ee; }
.tycoon-price-info > .tycoon-price-rule:last-child {
  margin-top: 8px;
  color: var(--muted, #8b8b93);
}