/* ORCA kit components. Needs tokens.css and fonts/fonts.css loaded first.
   Every class is prefixed "o-" so it can sit next to a resource's own CSS without clashes. */

/* ---------- base ---------- */

.o-root {
  font-family: var(--font);
  font-weight: 500;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.o-root *,
.o-root *::before,
.o-root *::after { box-sizing: border-box; }

/* :where keeps these resets weaker than .o-btn--red / .o-close, so their own colour wins */
.o-root :where(button) { font: inherit; color: inherit; border: 0; cursor: pointer; }
.o-root :where(input) { font: inherit; color: inherit; border: 0; outline: 0; }

.o-root ::-webkit-scrollbar { width: 4px; height: 4px; }
.o-root ::-webkit-scrollbar-track { background: transparent; }
.o-root ::-webkit-scrollbar-thumb { background: rgba(217, 217, 217, .2); border-radius: 2px; }
/* don't add scrollbar-width / scrollbar-color: Chromium then ignores the ::-webkit rules above */

/* ---------- stage (1920x1080, scaled with zoom from stage.js) ---------- */

.o-stage {
  position: absolute;
  width: 1920px;
  height: 1080px;
  zoom: var(--s, 1);
  display: grid;
  place-items: center;
}

/* ---------- panel: the window, with the cut top-right corner ---------- */

.o-panel {
  position: relative;
  padding: 32px 36px 36px;
  border-radius: var(--r-panel);
  background: var(--panel);
  clip-path: polygon(0 0, calc(100% - var(--cut-x)) 0, 100% var(--cut-y), 100% 100%, 0 100%);
}

/* clip-path also cuts box-shadow, so the shadow goes on a wrapper */
.o-shadow { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .5)); }

.o-panel--sm { --cut-x: 28px; --cut-y: 22px; --r-panel: 20px; padding: 24px; }
.o-panel--flat { clip-path: none; }

/* ---------- header: hex badge + title + muted subtitle ---------- */

.o-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.o-head__title {
  font-size: var(--fs-title);
  font-weight: 500;
  white-space: nowrap;
}

.o-head__title b { font-weight: 500; color: var(--acc); }   /* ALL<b>MENU</b>, MAIN <b>GARAGE</b> */

.o-head__sub {
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--text-2);
  white-space: nowrap;
}

.o-head__sub--caps { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; }

.o-head__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------- hexagon badge ---------- */

.o-hex {
  width: 56px;
  height: 64px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--acc-27);
  color: var(--acc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.o-hex svg { width: 26px; height: 26px; }
.o-hex--sm { width: 28px; height: 32px; }
.o-hex--sm svg { width: 14px; height: 14px; }
.o-hex--red { background: var(--red-27); color: var(--red); }

/* ---------- close button: teal square with an X ---------- */

.o-close {
  width: 40px;
  height: 40px;
  border-radius: var(--r-btn);
  background: var(--acc-27);
  color: var(--acc);
  font-size: 18px;
  transition: background .15s;
}

.o-close:hover { background: rgba(var(--acc-rgb), .4); }

/* ---------- buttons ---------- */

.o-btn {
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  background: var(--soft);
  font-size: var(--fs-small);
  transition: background .15s, color .15s, transform .1s;
}

.o-btn:hover { background: var(--acc-17); color: var(--acc); }
.o-btn:active { transform: scale(.97); }

.o-btn--acc { background: var(--acc-27); color: var(--acc); }
.o-btn--acc:hover { background: rgba(var(--acc-rgb), .4); }

.o-btn--red { background: var(--red-17); color: var(--red); }
.o-btn--red:hover { background: var(--red-27); color: var(--red); }

.o-btn--dark { background: var(--card); }

/* the big call to action: CONFIRM, SPAWN CAR, Create match, Claimed */
.o-btn--action {
  height: 56px;
  border-radius: var(--r-row);
  background: var(--grad-action);
  font-size: var(--fs-h2);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 12px, 100% 100%, 0 100%);
}

.o-btn--action:hover { background: var(--grad-action); color: var(--text); filter: brightness(1.2); }

/* ---------- tabs ---------- */

.o-tabs { display: flex; gap: 12px; }

.o-tab {
  height: 44px;
  min-width: 150px;
  padding: 0 24px;
  border-radius: var(--r-btn);
  background: var(--chip);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background .15s, color .15s;
}

.o-tab:hover { background: #222324; }
.o-tab.is-active { background: var(--acc-27); color: var(--acc); }
.o-tab--red.is-active { background: var(--red-27); color: var(--red); }

/* icon-only nav (the F5 menu top bar) */
.o-iconnav { display: flex; gap: 10px; }

.o-iconnav__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-btn);
  background: var(--chip);
  color: var(--text);
}

.o-iconnav__btn svg { width: 22px; height: 22px; }
.o-iconnav__btn.is-active { background: var(--acc-14); color: var(--acc); }

/* ---------- chips ---------- */

/* number presets: 10 / 20 / 30 */
.o-chips { display: grid; grid-auto-flow: column; gap: 8px; }

.o-chip {
  height: 32px;
  min-width: 56px;
  border-radius: var(--r-chip);
  background: var(--chip);
  font-size: var(--fs-tiny);
  font-weight: 600;
}

.o-chip.is-active { background: var(--acc-27); }
.o-chip--red.is-active { background: var(--red-27); }

/* keyboard key: E, ESC, F5 */
.o-key {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(var(--acc-rgb), .18);
  color: var(--acc);
  font-size: var(--fs-tiny);
  font-weight: 600;
}

/* status: coloured dot + word ("Waiting", "Playing") */
.o-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-btn);
  background: var(--card);
  font-size: var(--fs-body);
}

.o-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, var(--green));
}

.o-status--red { --dot: var(--red); }

/* ---------- list: a well holding rows ---------- */

.o-well {
  padding: 12px;
  border-radius: var(--r-well);
  background: var(--well);
  display: grid;
  gap: 10px;
}

.o-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 12px 0 20px;
  border-radius: var(--r-row);
  background: var(--well);
  font-size: var(--fs-body);
  transition: background .15s;
}

.o-row:hover { background: rgba(42, 42, 42, .6); }
.o-row.is-active { background: var(--acc-10); }
.o-row.is-active .o-row__icon { color: var(--acc); }
.o-row.is-active .o-btn { background: var(--acc-17); }

.o-row--red.is-active { background: var(--red-10); }
.o-row--red.is-active .o-row__icon { color: var(--red); }
.o-row--red.is-active .o-btn { background: var(--red-17); }

.o-row__icon { width: 22px; height: 22px; flex: none; }
.o-row__num { width: 20px; color: var(--text-num); }
.o-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-row__value { color: var(--acc); }
.o-row__value--red { color: var(--red); }

/* table header: an outlined strip above the rows */
.o-thead {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-row);
  color: var(--text-2);
  font-size: var(--fs-small);
  text-transform: uppercase;
}

/* ---------- cards ---------- */

/* menu card: icon, cyan caps title, grey description (F5 quick menu, newbie menu) */
.o-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 18px 28px;
  border-radius: var(--r-card);
  background: var(--card);
  text-align: left;
  transition: background .15s;
}

.o-menu:hover { background: #262728; }
.o-menu.is-active { background: var(--acc-14); }
.o-menu__icon { width: 30px; height: 30px; flex: none; }
.o-menu__title { font-size: 22px; color: var(--acc); text-transform: uppercase; }
.o-menu__desc { margin-top: 4px; font-size: var(--fs-small); color: var(--text-2); }

/* item card: picture, name under it, meta in the corners (fertilizer, collection, topup) */
.o-item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 6px;
  width: 100%;              /* fills its grid cell; the grid decides the size */
  aspect-ratio: 1;
  padding: 12px;
  border-radius: var(--r-card);
  background: var(--card);
  font-size: var(--fs-body);
}

.o-item img { width: 96px; height: 80px; object-fit: contain; }
.o-item.is-active { background: var(--grad-card); }
.o-item.is-locked img { filter: grayscale(1) brightness(.6); }

.o-item__meta {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-tiny);
  color: var(--text-2);
}

/* side panel: a lighter block on the right that shows the selected thing */
.o-side {
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--card);
}

/* big value box: "Total   10,000 $" */
.o-total {
  display: flex;
  align-items: center;
  gap: 48px;
  height: 64px;
  padding: 0 28px;
  border-radius: var(--r-row);
  background: var(--box);
}

.o-total__label { font-size: var(--fs-body); font-weight: 400; color: var(--text-3); }
.o-total__value { font-size: var(--fs-num); }
.o-total__value b { font-weight: 500; color: var(--acc); }

/* ---------- form ---------- */

.o-field { display: grid; gap: 8px; }

.o-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
}

.o-label svg { width: 16px; height: 16px; color: var(--acc); }

.o-input {
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  background: var(--box);
  font-size: var(--fs-body);
  transition: box-shadow .15s;
}

.o-input::placeholder { color: var(--text-hint); }
.o-input:focus { box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .5); }

.o-input--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* ON / OFF pair from the settings page */
.o-toggle { display: flex; gap: 12px; }

.o-toggle button {
  width: 96px;
  height: 36px;
  border-radius: var(--r-chip);
  background: var(--soft);
  color: var(--text-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

.o-toggle button.is-on { background: var(--acc-27); color: var(--text); }

/* radio: a small dot */
.o-radio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-h2);
  color: var(--text);
  background: none;
}

.o-radio::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3B3B3B;
  box-shadow: 0 0 0 3px var(--chip);
}

.o-radio.is-on::before { background: var(--acc); box-shadow: 0 0 0 3px var(--acc-17); }

/* ---------- progress ---------- */

.o-bar {
  height: 6px;
  border-radius: 3px;
  background: #3B3B3B;
  overflow: hidden;
}

.o-bar > i {
  display: block;
  height: 100%;
  width: var(--p, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-2), var(--acc));
  box-shadow: 0 0 8px rgba(var(--acc-rgb), .5);
  transition: width .25s linear;
}

/* ---------- hero: glow and floor behind a featured car or item ---------- */

.o-hero {
  position: relative;
  border-radius: var(--r-well);
  background: #1B1C1D;
  overflow: hidden;
}

.o-hero::before {
  content: '';
  position: absolute;
  inset: 10% 20% 25%;
  background: var(--grad-glow);
}

.o-hero::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(67, 150, 160, .35), rgba(41, 88, 94, .12) 70%, transparent);
}

.o-hero > * { position: relative; z-index: 1; }

/* ---------- small text helpers ---------- */

.o-muted { color: var(--text-2); }
.o-dim { color: var(--text-3); }
.o-acc { color: var(--acc); }
.o-red { color: var(--red); }
.o-caps { text-transform: uppercase; }