/*
 * ==========================================================
 * VIBE SYSTEMS UI 2.0
 * Games + Farm + Money Printers
 * ==========================================================
 */

/* VIBE_SYSTEMS_UI_V20 */

.vsys{
  display:flex;
  flex-direction:column;
  gap:18px;
}


.vsys-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;

  gap:16px;
}


.vsys-kicker{
  color:var(--vb-accent);

  font-size:11px;
  font-weight:850;

  letter-spacing:.11em;
  text-transform:uppercase;
}


.vsys-title{
  margin-top:5px;

  color:var(--vb-text);

  font-size:
    clamp(
      27px,
      2.4vw,
      36px
    );

  font-weight:950;
  line-height:1.08;

  letter-spacing:-.045em;
}


.vsys-description{
  max-width:760px;

  margin-top:8px;

  color:var(--vb-muted);

  font-size:14px;
  line-height:1.55;
}


.vsys-balance{
  min-width:180px;

  padding:14px 16px;

  border:
    1px solid
    var(--vb-border);

  border-radius:14px;

  background:
    var(--vb-surface-1);
}


.vsys-balance-label{
  color:var(--vb-muted);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.06em;
}


.vsys-balance-value{
  margin-top:5px;

  color:var(--vb-text);

  font-size:21px;
  font-weight:950;

  font-variant-numeric:
    tabular-nums;
}


/* ==========================================================
 * Shared
 * ========================================================== */

.vsys-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:12px;
}


.vsys-grid-2{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:12px;
}


.vsys-card-title{
  color:var(--vb-text);

  font-size:17px;
  font-weight:900;
}


.vsys-card-sub{
  margin-top:5px;

  color:var(--vb-muted);

  font-size:12px;
  line-height:1.5;
}


.vsys-value{
  margin-top:14px;

  color:var(--vb-text);

  font-size:23px;
  font-weight:950;

  font-variant-numeric:
    tabular-nums;
}


.vsys-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  margin-top:10px;
}


.vsys-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  margin-top:14px;
}


.vsys-form{
  display:grid;

  gap:8px;

  margin-top:14px;
}


.vsys-form-2{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:8px;
}


.vsys-empty{
  padding:30px 14px;

  color:var(--vb-muted);

  font-size:13px;
  text-align:center;
}


/* ==========================================================
 * Games
 * ========================================================== */

.vgame-card{
  min-height:285px;
}


.vgame-icon{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--vb-border);

  border-radius:12px;

  background:
    rgba(255,255,255,.025);

  font-size:20px;
}


.vgame-result{
  min-height:38px;

  margin-top:12px;

  padding:9px 10px;

  border:
    1px solid
    var(--vb-border);

  border-radius:10px;

  color:var(--vb-muted);

  background:
    rgba(255,255,255,.012);

  font-size:12px;
}


.vmine-board{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:6px;

  margin-top:14px;
}


.vmine-cell{
  aspect-ratio:1;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--vb-border);

  border-radius:9px;

  background:
    rgba(255,255,255,.025);

  color:var(--vb-text);

  cursor:pointer;

  transition:
    background
    var(--vb-motion-fast)
    var(--vb-ease),
    border-color
    var(--vb-motion-fast)
    var(--vb-ease);
}


.vmine-cell:hover{
  background:
    var(--vb-surface-hover);
}


.vmine-cell.is-open{
  color:var(--vb-success);

  background:
    var(--vb-success-soft);
}


/* ==========================================================
 * Farm
 * ========================================================== */

.vfarm-resources{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:10px;
}


.vfarm-resource-label{
  color:var(--vb-muted);

  font-size:11px;
}


.vfarm-resource-value{
  margin-top:4px;

  color:var(--vb-text);

  font-size:19px;
  font-weight:950;
}


.vfarm-plots{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:10px;
}


.vfarm-plot{
  min-height:165px;
}


.vfarm-status{
  margin-top:5px;

  color:var(--vb-muted);

  font-size:12px;
}


.vfarm-buildings{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:10px;
}


/* ==========================================================
 * Printers
 * ========================================================== */

.vprinter-models,
.vprinter-list{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:10px;
}


.vprinter-status{
  display:inline-flex;

  min-height:24px;

  align-items:center;

  padding:
    3px
    8px;

  border:
    1px solid
    var(--vb-border);

  border-radius:999px;

  color:var(--vb-muted);

  font-size:11px;
  font-weight:800;
}


.vprinter-status[data-status="running"]{
  color:var(--vb-success);

  background:
    var(--vb-success-soft);
}


.vprinter-status[data-status="destroyed"]{
  color:var(--vb-danger);

  background:
    var(--vb-danger-soft);
}


.vprinter-meter{
  height:8px;

  overflow:hidden;

  margin-top:10px;

  border-radius:999px;

  background:
    rgba(255,255,255,.055);
}


.vprinter-meter > div{
  height:100%;

  border-radius:inherit;

  background:
    var(--vb-accent);
}


@media(max-width:1100px){

  .vsys-grid,
  .vprinter-models,
  .vprinter-list,
  .vfarm-buildings{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .vfarm-plots{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


@media(max-width:680px){

  .vsys-grid,
  .vsys-grid-2,
  .vprinter-models,
  .vprinter-list,
  .vfarm-buildings,
  .vfarm-plots,
  .vfarm-resources,
  .vsys-form-2{
    grid-template-columns:1fr;
  }

}

/* VIBE_DARK_NATIVE_SELECT_V1 */
.vb-select {
  color-scheme: dark;
  background-color: #0d1017;
  color: #f4f6fb;
}

.vb-select option,
.vb-select optgroup {
  background-color: #0d1017;
  color: #f4f6fb;
}