/* The /company builder: what is being made fills the page (the station while it is named and dressed, the office once
   it starts), the steps float over it on the left as one card; in the tour the office has the whole stage and each
   room's words are a bubble out of the room. Headlines and the main button as on cymetica.com/agent-tournaments.
   Every class here is bz-*: style.css already has .st, .back and .chips of its own. */
.bz { flex: 1; min-height: 0; display: flex; padding: 12px 16px 16px; animation: bzin .35s ease-out both; }
@keyframes bzin { from { opacity: 0; } }
/* --cw: the card's width and its margin. The 3D canvases are that much wider than the stage, starting at its left
   edge, so what they centre stands in the middle of the space the card leaves free. The tour has no card (bz-wide). */
.bz-stage { flex: 1; min-height: 0; --cw: 492px; background: #16232f; }
.bz-stage.bz-wide { --cw: 0px; }
.bz-stage.bz-wide .bz-card { display: none; }
.bz-stage .office3d, .bz-stage .o3layer, .bz-pv { left: 0; right: auto; top: 0; bottom: 0; width: calc(100% + var(--cw)); }
.bz-stage.is3d::after { bottom: 0; }
/* the office is built while step 1 is on screen: there, sized but not seen; the station and its arrows not in step 2 */
.bz-stage:not(.bz-office) .office3d, .bz-stage:not(.bz-office) .o3layer, .bz-stage:not(.bz-office) .office { visibility: hidden; pointer-events: none; }
.bz-stage.bz-office .bz-pv, .bz-stage.bz-office .bz-look { display: none; }
.bz-stage .office { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the card */
.bz-card { position: absolute; left: 22px; top: 22px; z-index: 8; width: 448px; max-height: calc(100% - 44px); overflow: auto;
  display: flex; flex-direction: column; padding: 24px 26px 22px; border-radius: 18px; border: 1px solid rgba(0, 150, 255, .18);
  background: rgba(8, 13, 21, .84); backdrop-filter: blur(12px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); }
.bz-st { display: flex; flex-direction: column; gap: 16px; }
.bz-st h2 { font: 400 40px/1.04 'Archivo Black', sans-serif; letter-spacing: -.01em; color: #fff; margin: 26px 0 6px; }

/* the two steps */
.bz-steps { list-style: none; display: flex; gap: 22px; font: 700 11px 'JetBrains Mono'; letter-spacing: .12em; text-transform: uppercase; color: var(--dim2); }
.bz-steps li { display: flex; align-items: center; gap: 8px; }
.bz-steps li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; letter-spacing: 0; border: 1px solid var(--line3); }
.bz-steps li.on { color: var(--text); }
.bz-steps li.on i { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(0, 207, 255, .35); }
.bz-steps li.done i { background: var(--green); border-color: var(--green); color: #03140c; }

/* name it */
.bz-st .field { font-size: 11px; font-weight: 700; letter-spacing: .12em; gap: 7px; }
.bz-st .field input { font-size: 15px; font-weight: 500; letter-spacing: 0; padding: 13px 14px; border-radius: 10px; }
.bz-st .switch b { font-size: 14px; }

/* its look: big arrows either side of the station, well clear of it (the widest station is about 800 px across at
   this size), centred on where the station is (the canvas's middle, --cw right of the stage's) and kept off the card */
.bz-look { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.bz-arrow { position: absolute; top: 48%; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; pointer-events: auto;
  border: 1px solid rgba(0, 207, 255, .55); background: #0a1622; color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 207, 255, .15), 0 10px 30px -8px rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%); transition: background .15s, box-shadow .2s, transform .12s; }
.bz-arrow.l { left: max(calc(var(--cw) + 60px), calc((100% + var(--cw)) / 2 - 580px)); }
.bz-arrow.r { left: min(calc(100% - 64px), calc((100% + var(--cw)) / 2 + 580px)); }
.bz-arrow:hover { background: #0f2433; box-shadow: 0 0 0 1px var(--cyan), 0 0 28px rgba(0, 207, 255, .45); }
.bz-arrow:active { transform: translate(-50%, -50%) scale(.95); }
.bz-arrow svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* in the card: which station of the seven, and its colour, as the card's own fields */
.bz-lkrow { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.bz-lkl { width: 78px; flex: none; font: 700 11px 'JetBrains Mono'; letter-spacing: .12em; color: var(--dim2); }
.bz-lkrow b { font: 400 18px 'Archivo Black', sans-serif; color: #fff; letter-spacing: .01em; }
.bz-lkn { margin-left: auto; font: 700 11px 'JetBrains Mono'; letter-spacing: .1em; color: var(--dim2); }
/* (room for eight colours in one row: 8 x 28 + 7 x 9 = 287 of the row's 306 px; more wrap) */
.bz-lkrow .accents { gap: 9px; flex-wrap: wrap; }
.bz-lkrow .acc { width: 28px; height: 28px; flex: none; }
/* the company's name over the station (uv.css .b3), not a link here */
.bz-ban { pointer-events: none; z-index: 2; }

/* how it starts: two cards, the number of rooms first, the start's name, its rooms as the office's icons; the chosen
   one lit in cyan with a tick */
.bz-opts { display: grid; gap: 12px; }
.bz-opt { position: relative; display: block; text-align: left; padding: 18px 18px 18px 20px; border-radius: 18px; color: var(--text);
  border: 1px solid rgba(0, 150, 255, .16); background: linear-gradient(160deg, #0f1b28, #0a121c 70%); transition: border-color .15s, box-shadow .2s, transform .12s; }
.bz-opt:hover { border-color: rgba(0, 207, 255, .45); transform: translateY(-1px); }
.bz-opt.on { border-color: var(--cyan); background: linear-gradient(160deg, #0f2535, #0a1622 70%);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 30px rgba(0, 207, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .05); }
.bz-oh { display: flex; align-items: center; gap: 14px; }
.bz-oh em { font: 400 46px/1 'Archivo Black', sans-serif; font-style: normal; color: var(--green); text-shadow: 0 0 22px rgba(0, 255, 136, .25); min-width: 34px; }
.bz-ot { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bz-ot b { font: 400 17px 'Archivo Black', sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.bz-opt.on .bz-ot b { color: var(--cyan); }
.bz-ot span { font-size: 11.5px; font-weight: 600; color: var(--dim2); }
.bz-ok { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line3); position: relative; }
.bz-opt.on .bz-ok { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 12px rgba(0, 207, 255, .6); }
.bz-opt.on .bz-ok::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #03131c; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.bz-ics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bz-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-style: normal;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 10%, #08111a); box-shadow: inset 0 0 12px color-mix(in srgb, var(--c) 12%, transparent); }
.bz-ic svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent)); }
.bz-ic.bz-add { box-shadow: 0 0 0 1.5px rgba(0, 255, 136, .55), inset 0 0 12px color-mix(in srgb, var(--c) 12%, transparent); }

/* back and next, right under what the step asks */
.bz-nav { margin-top: 26px; display: flex; align-items: center; gap: 10px; }
.bz-nav .sp { flex: 1; }
.bz-back { padding: 13px 18px; font-size: 13px; }
.bz-next, .bz-go { display: inline-flex; align-items: center; gap: 10px; padding: 17px 26px; border-radius: 16px; font: 400 15.5px 'Archivo Black', sans-serif; letter-spacing: .03em;
  text-transform: uppercase; background: var(--green); color: #03140c; box-shadow: 0 0 0 1px rgba(0, 255, 136, .7), 0 10px 34px -6px rgba(0, 255, 136, .55); transition: transform .12s, box-shadow .2s; }
.bz-next:hover, .bz-go:hover { box-shadow: 0 0 0 1px rgba(0, 255, 136, .9), 0 12px 40px -4px rgba(0, 255, 136, .7); }
.bz-next:active, .bz-go:active { transform: translateY(1px); }
.bz-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bz-next[hidden] { display: none; }

/* the tour's bubble: out of the room it is about, a pointer down to it; which room of seven, its name, its words,
   the step dots small, Back and Next. Solid: it reads over whatever glows behind it. */
.bz-bub { position: absolute; left: 0; top: 0; z-index: 8; width: 460px; margin-top: -18px; padding: 16px 18px 14px; border-radius: 18px;
  border: 1px solid rgba(0, 207, 255, .8); background: linear-gradient(170deg, #11293a, #0a1622 55%); color: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 207, 255, .2), 0 0 34px rgba(0, 207, 255, .28), 0 22px 46px -14px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07); will-change: transform; }
.bz-bub::after { content: ''; position: absolute; left: 50%; top: 100%; width: 18px; height: 18px; background: #0a1622; border-right: 1px solid rgba(0, 207, 255, .8); border-bottom: 1px solid rgba(0, 207, 255, .8);
  transform: translate(-50%, -9px) rotate(45deg); }
.bz-bh { display: flex; align-items: center; gap: 12px; }
.bz-bh .bz-ic { width: 44px; height: 44px; flex: none; }
.bz-bt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bz-bt b { font: 400 23px/1.05 'Archivo Black', sans-serif; color: #fff; }
.bz-bt em { font: 700 11px 'JetBrains Mono'; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.bz-x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; color: var(--dim2); font-size: 18px; line-height: 1; align-self: flex-start; }
.bz-x:hover { color: #fff; background: #13263a; }
.bz-bub p { margin: 10px 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--dim); }
/* the Vault's balance, numbers first; a room's pages on cymetica.com as glowing chips */
.bz-bal { display: flex; align-items: baseline; gap: 18px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(0, 255, 136, .35); background: rgba(0, 255, 136, .06); }
.bz-bal span { font: 600 12px 'JetBrains Mono'; color: var(--dim); } .bz-bal b { font: 400 22px 'Archivo Black', sans-serif; color: var(--green); text-shadow: 0 0 12px rgba(0, 255, 136, .45); margin-right: 4px; }
.bz-bal span + span b { color: var(--cyan); text-shadow: 0 0 12px rgba(0, 207, 255, .45); } .bz-bal em { margin-left: auto; font: 600 10.5px 'JetBrains Mono'; font-style: normal; color: var(--dim2); letter-spacing: .06em; }
.bz-pg { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.bz-pg a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 10px; border: 1px solid rgba(0, 207, 255, .5); background: rgba(0, 207, 255, .08);
  color: #dff6ff; font: 600 12px 'JetBrains Mono'; text-decoration: none; box-shadow: 0 0 12px rgba(0, 207, 255, .18); transition: box-shadow .2s, border-color .2s; }
.bz-pg a:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0, 207, 255, .45); }
.bz-pg svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(0, 207, 255, .8)); }
.bz-bf { display: flex; align-items: center; gap: 10px; }
.bz-bf .btn { padding: 10px 14px; font-size: 12.5px; }
.bz-bf .bz-go { padding: 11px 18px; font-size: 13.5px; border-radius: 12px; white-space: nowrap; }
.bz-dots { display: flex; gap: 5px; margin-right: auto; }
.bz-dots i { width: 14px; height: 3px; border-radius: 2px; background: var(--line3); }
.bz-dots i.done { background: rgba(0, 207, 255, .45); }
.bz-dots i.on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

/* the call-out: a ring pulsing on a room's floor, a line up to a solid label saying what a click there does */
.bz-call { position: absolute; left: 0; top: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none;
  cursor: pointer; will-change: transform; }
.bz-call .lb { display: block; padding: 10px 18px 11px; border-radius: 12px; border: 1px solid var(--cyan); background: #071521; color: #fff; text-align: center;
  font: 400 17px 'Archivo Black', sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 207, 255, .35), 0 0 26px rgba(0, 207, 255, .5); animation: bzcall 1.6s ease-in-out infinite; }
.bz-call .lb small { display: block; margin: 2px 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 207, 255, .3); font: 600 12.5px 'JetBrains Mono'; letter-spacing: 0; text-transform: none; color: var(--dim); }
.bz-call .lb small b { display: block; margin-bottom: 3px; font: 400 20px 'Archivo Black', sans-serif; color: #fff; }
/* the agents of a room, first in its bubble */
.bz-ag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 2px; }
.bz-ag > span { font: 700 10.5px 'JetBrains Mono'; letter-spacing: .14em; color: var(--cyan); margin-right: 2px; }
.bz-ag i { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; border: 1px solid var(--line3); background: rgba(10, 22, 34, .8); font: 600 12px 'JetBrains Mono'; font-style: normal; color: var(--text); }
.bz-ag img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #0c1a28; }
.bz-ag .core { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #9ff4ff 30%, rgba(0, 207, 255, .35) 60%, transparent 72%); }
.bz-call .lb em { display: block; margin-top: 3px; font: 600 12px 'JetBrains Mono'; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--cyan); }
.bz-call .lb.sm { padding: 6px 12px 7px; font-size: 12px; }
.bz-call:hover .lb { background: #0e2a3c; border-color: #6fe3ff; }
.bz-call .stem { width: 2px; height: 30px; background: linear-gradient(var(--cyan), rgba(0, 207, 255, .2)); }
.bz-call .ring { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cyan); background: #0b3446; box-shadow: 0 0 14px var(--cyan); }
.bz-call .ring::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--cyan); animation: bzring 1.6s ease-out infinite; }
@keyframes bzring { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
@keyframes bzcall { 50% { box-shadow: 0 0 0 1px rgba(0, 207, 255, .7), 0 0 44px rgba(0, 207, 255, .85); } }

/* While the office is still being built, the stage under a veil: the build holds the page for a moment, and the
   loading screens' core (boot.css) keeps turning through it (transforms run off the page's thread) so it reads as
   building, not as stuck. No number here: the bar only shimmers. */
.bz-veil { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding-left: var(--cw); overflow: hidden;
  background: radial-gradient(ellipse at 60% 50%, rgba(28, 46, 62, .94), rgba(12, 20, 30, .98) 70%); opacity: 0; pointer-events: none; transition: opacity .18s; }
.bz-veil.on { opacity: 1; pointer-events: auto; }
.bz-veil .ldr { transform: scale(.8); margin-top: -40px; }
.bz-veil .ld-what { top: 372px; }
.bz-veil .ld-bar { top: 398px; }
.bz-veil:not(.on) .ldr *, .bz-veil:not(.on) .ldr *::before, .bz-veil:not(.on) .ldr *::after { animation-play-state: paused; }

/* the station's own canvas */
.bz-pv { position: absolute; z-index: 5; }
.bz-pv > canvas { display: block; width: 100% !important; height: 100% !important; }

@media (max-width: 980px) {
  body.bd-page { height: auto; min-height: 100vh; overflow: auto; }
  .bz { padding: 12px 16px 16px; }
  .bz-stage { min-height: 120vh; --cw: 0px; overflow: visible; }
  .bz-card { position: relative; left: auto; top: auto; width: auto; max-height: none; margin: 16px; }
  .bz-stage .office3d, .bz-stage .o3layer, .bz-pv { top: auto; height: 62vh; }
  .bz-arrow.l { left: 52px; } .bz-arrow.r { left: calc(100% - 52px); }
  .bz-veil { padding-left: 0; }
}

/* the Create company popup: the stage dimmed, one card in the middle -- sign up first, or the ways in as three tiles */
.bz-gate { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4, 8, 14, .66); backdrop-filter: blur(3px); animation: bzin .2s ease-out both; }
.bz-gate[hidden] { display: none; }
.bz-gc { position: relative; width: min(640px, calc(100% - 40px)); padding: 26px 26px 24px; border-radius: 20px; border: 1px solid rgba(0, 207, 255, .8);
  background: linear-gradient(170deg, #11293a, #0a1622 55%); box-shadow: 0 0 0 1px rgba(0, 207, 255, .2), 0 0 40px rgba(0, 207, 255, .3), 0 30px 60px -18px rgba(0, 0, 0, .9); }
.bz-gc .bz-x { position: absolute; right: 14px; top: 14px; }
.bz-gc h3 { font: 400 30px/1.1 'Archivo Black', sans-serif; color: #fff; margin: 0 40px 8px 0; }
.bz-gc p { margin: 0 0 18px; color: var(--dim); font-size: 14px; }
.bz-gb { display: flex; gap: 10px; align-items: center; }
.bz-gb .bz-go { padding: 13px 22px; font-size: 14px; border-radius: 12px; }
.bz-gw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bz-gw1 { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 14px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid rgba(0, 207, 255, .35); background: rgba(0, 207, 255, .06); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; }
.bz-gw1:hover { border-color: var(--green); background: rgba(0, 255, 136, .08); box-shadow: 0 0 22px rgba(0, 255, 136, .3); }
.bz-gw1 em { font: 700 10.5px 'JetBrains Mono'; font-style: normal; letter-spacing: .14em; color: var(--cyan); }
.bz-gw1 b { font: 400 26px/1.05 'Archivo Black', sans-serif; color: var(--green); text-shadow: 0 0 14px rgba(0, 255, 136, .4); }
.bz-gw1 b i { font: 700 13px 'JetBrains Mono'; font-style: normal; color: var(--dim); text-shadow: none; }
.bz-gw1 span { font: 500 11.5px/1.4 'JetBrains Mono'; color: var(--dim2); }
.bz-gw1.off { opacity: .45; cursor: not-allowed; } .bz-gw1.off:hover { border-color: rgba(0, 207, 255, .35); background: rgba(0, 207, 255, .06); box-shadow: none; }

/* the Create company popup: what creating takes, and where the account stands */
.bz-gw2 { display: grid; gap: 10px; margin-bottom: 14px; }
.bz-gr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(0, 207, 255, .35); background: rgba(0, 207, 255, .06); }
.bz-gr > i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 14px 'JetBrains Mono'; font-style: normal; }
.bz-gr.ok > i { background: rgba(0, 255, 136, .16); color: var(--green); }
.bz-gr.no > i { background: rgba(255, 68, 68, .16); color: #ff4444; }
.bz-gr.no { border-color: rgba(255, 68, 68, .45); }
.bz-gr > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bz-gr b { font: 700 14px 'JetBrains Mono'; color: #fff; }
.bz-gr em { font: 500 12px/1.4 'JetBrains Mono'; font-style: normal; color: var(--dim2); }
.bz-gerr { color: #ff4444; font: 600 13px/1.4 'JetBrains Mono'; margin: 0 0 10px; }
.bz-gn { margin: 12px 0 0 !important; font-size: 12px !important; }
.bz-gb a.bz-go { text-decoration: none; display: inline-flex; align-items: center; }
.bz-go:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) { .bz-gr { flex-wrap: wrap; } }

/* a phone: nothing in the card is wider than the screen, so the stage (and the Create company popup over it) is not either */
@media (max-width: 980px) {
  .bz-stage { min-width: 0; max-width: 100%; overflow-x: clip; }
  .bz-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .bz-st, .bz-opts, .bz-opt, .bz-oh, .bz-ot { min-width: 0; }
  .bz-opts { grid-template-columns: minmax(0, 1fr); }
  .bz-ot b, .bz-ot span { overflow-wrap: anywhere; }
  .bz-oh em { font-size: 36px; min-width: 26px; }
  .bz-gc { box-sizing: border-box; padding: 22px 16px 18px; }
  .bz-gc h3 { font-size: 24px; }
}