/* =========================================================
   GLOBAL
   ========================================================= */

* {
  box-sizing: border-box;
}


:root {

  --page-bg: #101112;

  --header-bg: #00292e;

  --panel-bg: #00272d;

  --panel-inner: #2d4255;

  --border-main: #3e8fbb;

  --border-soft: #356b83;

  --text-main: #e3e9eb;

  --text-muted: #b5c0c4;

  --accent: #68d4ff;

  --accent-bright: #71f5dd;

  --accent-dark: #163b48;

  --green: #159447;

  --red: #d41537;

  --blue: #0868ed;

  --orange: #f39c12;

  --purple: #800080;

  --fold: #708090;

}


body {

  margin: 0;

  padding: 0;

  min-height: 100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color:
    var(--text-main);

  background:

    linear-gradient(

      180deg,

      var(--header-bg) 0,

      var(--header-bg) 110px,

      var(--page-bg) 110px,

      var(--page-bg) 100%

    );

}


button,
select,
input {

  font: inherit;

}


/* =========================================================
   HEADER
   ========================================================= */

.page-header {

  width: 100%;

  padding:
    18px
    15px
    25px;

  text-align: center;

}


.page-header h1 {

  margin: 0;

  color:
    var(--accent);

  font-size:
    clamp(
      30px,
      4vw,
      52px
    );

  letter-spacing:
    0.5px;

  text-shadow:

    0 0 14px
    rgba(
      104,
      212,
      255,
      0.12
    );

}


.subtitle {

  margin-top: 6px;

  color: #9eb2b5;

  font-size: 14px;

}


/* =========================================================
   SETTINGS
   ========================================================= */

.settings-bar {

  width:
    calc(
      100% - 40px
    );

  max-width: 1530px;

  margin:
    20px
    auto
    0;

  padding:
    15px
    20px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  flex-wrap: wrap;

  background: #161819;

  border:
    1px solid
    #4b5558;

  border-radius: 12px;

}


.setting {

  display: flex;

  align-items: center;

  gap: 10px;

}


.setting label {

  color:
    var(--accent);

  font-weight: 700;

}


.setting select {

  min-width: 135px;

  padding:
    8px
    12px;

  color: white;

  background:
    var(--panel-inner);

  border:
    2px solid
    var(--border-main);

  border-radius: 6px;

  cursor: pointer;

}


#strategy-status {

  padding:
    8px
    14px;

  background: #17272c;

  border-radius: 7px;

  font-size: 14px;

}


#strategy-status.available {

  color: #76f3ac;

}


#strategy-status.unavailable {

  color: #ff5f5f;

}


/* =========================================================
   OUTER FRAME
   ========================================================= */

.outer-frame {

  position: relative;

  width:
    calc(
      100% - 40px
    );

  max-width: 1530px;

  margin:
    14px
    auto
    30px;

  padding:
    28px
    20px
    34px;

}


.outer-frame::before {

  content: "";

  position: absolute;

  inset: 0;

  border:
    2px solid
    #39778f;

  border-radius: 38px;

  pointer-events: none;

}


/* =========================================================
   MAIN GRID
   ========================================================= */

.main-container {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:

    minmax(
      260px,
      300px
    )

    minmax(
      0,
      1fr
    )

    minmax(
      310px,
      360px
    );

  gap: 14px;

  align-items: start;

}


.panel {

  min-width: 0;

  padding: 14px;

  background:
    var(--panel-bg);

  border:
    2px solid
    var(--border-main);

  border-radius: 12px;

}


.panel-title {

  margin:
    5px
    0
    24px;

  text-align: center;

  color:
    var(--text-muted);

  font-size: 28px;

  font-weight: 700;

}


/* =========================================================
   RADIO GROUPS
   ========================================================= */

.radio-group {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-bottom: 14px;

  padding: 10px;

  background:
    var(--panel-inner);

  border-radius: 8px;

}


.radio-group strong {

  margin-bottom: 2px;

  color: white;

}


.radio-group label {

  display: flex;

  align-items: center;

  line-height: 1.2;

  cursor: pointer;

}

/* ==========================================================
   FACING ACTION COLORS
   ========================================================== */

.radio-group label:has(
  input[name="facing"][value="RFI"]
) {
  color: #39d98a; /* green */
}


.radio-group label:has(
  input[name="facing"][value="Limp"]
) {
  color: #ffffff; /* white */
}


.radio-group label:has(
  input[name="facing"][value="Raise"]
) {
  color: #4da3ff; /* blue */
}


.radio-group label:has(
  input[name="facing"][value="3Bet"]
) {
  color: #ff5c5c; /* red */
}


.radio-group label:has(
  input[name="facing"][value="Squeeze"]
) {
  color: #ffd84d; /* yellow */
}


.radio-group label:has(
  input[name="facing"][value="4Bet"]
) {
  color: #ff9f43; /* orange */
}

.radio-group label:has(
  input[name="facing"][value="RaiseCaller"]
) {
  color: #71F5DD;
}


.radio-group input[type="radio"] {

  appearance: none;

  width: 16px;

  height: 16px;

  flex:
    0
    0
    16px;

  margin:
    0
    8px
    0
    0;

  border:
    2px solid
    var(--border-main);

  border-radius: 50%;

  cursor: pointer;

}


.radio-group input[type="radio"]:checked {

  background:
    var(--accent);

  box-shadow:

    inset
    0
    0
    0
    3px
    var(--panel-inner);

}


/* =========================================================
   CARD MATRIX
   ========================================================= */

#card-selection-container {

  padding: 20px;

  text-align: center;

  overflow: hidden;

}


#card-container-wrapper {

  width: 100%;

}


#card-container {

  width: 100%;

  display: grid;

  grid-template-columns:

    repeat(
      13,
      minmax(
        0,
        1fr
      )
    );

  gap: 4px;

  padding: 4px;

  background:

    rgba(
      206,
      218,
      223,
      0.63
    );

  border:
    5px solid
    var(--border-main);

  border-radius: 18px;

}


.card {

  width: 100%;

  min-width: 0;

  aspect-ratio:
    5 / 7;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: white;

  border:
    2px solid
    var(--border-main);

  border-radius: 5px;

  font-size:

    clamp(
      13px,
      1vw,
      19px
    );

  cursor: pointer;

  box-shadow:

    0
    2px
    5px
    rgba(
      0,
      0,
      0,
      0.2
    );

  transition:

    transform
    0.15s ease,

    border
    0.15s ease,

    box-shadow
    0.15s ease;

}


.card:hover {

  transform:
    scale(
      1.04
    );

}


.card.selected {

  border:
    3px solid
    #ffe149;

  box-shadow:

    0
    0
    10px
    4px
    rgba(
      255,
      225,
      73,
      0.42
    );

}


.card.spades {

  color: #111;

}


.card.hearts {

  color: #e00021;

}


.card.diamonds {

  color: #154df3;

}


.card.clubs {

  color: #138a35;

}


/* =========================================================
   STRATEGY CONTEXT
   ========================================================= */
#strategy-context {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  padding:
    8px
    14px;

  color:
    var(--accent-bright);

  background:
    rgba(
      0,
      18,
      25,
      0.82
    );

  border:
    2px solid
    #37a9e1;

  border-radius: 10px;

  font-size: 19px;

  font-weight: 800;

  letter-spacing: 0.4px;

  white-space: nowrap;

  text-shadow:
    0
    0
    8px
    rgba(
      113,
      245,
      221,
      0.24
    );

}

.card-controls {

  margin-top: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

}

.strategy-context-stack {

  display: inline-block;

  padding:
    3px
    8px;

  color:
    #07181d;

  background:
    #71F5DD;

  border-radius:
    6px;

  font-size:
    1.05em;

  font-weight:
    900;

  text-shadow:
    none;

}
/* =========================================================
   ACTION PANEL
   ========================================================= */

#action-box-wrapper {

  min-height: 490px;

  text-align: center;

}


#scenario-position {

  margin-bottom: 10px;

  color:
    var(--accent);

  font-size: 30px;

  font-weight: 700;

}


#scenario-action {

  display: inline-block;

  min-width: 180px;

  margin-bottom: 32px;

  padding:
    9px
    12px;

  color:
    var(--accent);

  background:
    var(--panel-inner);

  border-radius: 8px;

  font-size: 16px;

  font-weight: 600;

}


#selected-cards-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding:
    10px
    0;

}


#selected-cards {

  width: 100%;

  min-height: 105px;

  display: grid;

  grid-template-columns:

    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 3px;

  margin-bottom: 12px;

  padding: 6px;

  background:
    var(--panel-inner);

  border-radius: 8px;

}


#selected-cards .card {

  cursor: default;

  font-size:

    clamp(
      18px,
      2vw,
      28px
    );

}


#selected-cards .card:hover {

  transform: none;

}


#hand-name {

  display: none;

}


#action-box {

  width: 100%;

  max-width: 270px;

  min-height: 56px;

  margin:
    18px
    0
    12px;

  padding: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #777;

  background: #fafafa;

  border:
    2px solid
    var(--border-main);

  border-radius: 12px;

  font-size: 22px;

  font-weight: 700;

  text-transform: uppercase;

}


/* =========================================================
   ACTION COLORS
   ========================================================= */

.action-raise {

  background:
    var(--green) !important;

  color:
    white !important;

}


.action-limp,
.action-overlimp {

  background:
    #168f7e !important;

  color:
    white !important;

}


.action-call {

  background:
    var(--blue) !important;

  color:
    white !important;

}


.action-check {

  background:
    #607d8b !important;

  color:
    white !important;

}


.action-3bet {

  background:
    var(--red) !important;

  color:
    white !important;

}


.action-4bet {

  background:
    var(--orange) !important;

  color:
    white !important;

}


.action-5bet {

  background:
    var(--purple) !important;

  color:
    white !important;

}


.action-fold {

  background:
    var(--fold) !important;

  color:
    white !important;

}


.action-unavailable {

  background:
    #464646 !important;

  color:
    #f0c58f !important;

}


/* =========================================================
   HAND ANALYSIS
   ========================================================= */

#hand-analysis {

  width: 100%;

  min-height: 60px;

  margin:
    6px
    0
    20px;

  padding: 12px;

  text-align: left;

  color: #c4d6db;

  background: #172c33;

  border:

    1px solid

    rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius: 10px;

  font-size: 13px;

  line-height: 1.5;

}


.analysis-heading {

  margin-bottom: 8px;

  color: white;

  font-weight: 700;

}


.analysis-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

}


.analysis-tag {

  display: inline-block;

  padding:
    4px
    7px;

  color: #d5e2e5;

  background: #29414b;

  border-radius: 5px;

  font-size: 12px;

}

.analysis-stack {
  display: inline-block;

  padding: 3px 8px;

  font-size: 1.15rem;
  font-weight: 800;

  color: #71F5DD;

  background: rgba(113, 245, 221, 0.12);

  border: 1px solid rgba(113, 245, 221, 0.35);

  border-radius: 6px;

  letter-spacing: 0.3px;
}


.strategy-note {

  margin-top: 10px;

  color: #9eafb3;

  font-size: 12px;

}


.analysis-row {

  margin-bottom: 6px;

}


.analysis-label {

  color: #9fb2b7;

}


.analysis-value {

  font-weight: 700;

}


.analysis-category {

  color: #7ee0ff;

}


.analysis-strength {

  color: #8fe3ff;

}


.analysis-reason {

  margin-top: 10px;

  padding-top: 8px;

  color: #c7d7db;

  border-top:

    1px solid

    rgba(
      255,
      255,
      255,
      0.08
    );

}


/* =========================================================
   RESET BUTTONS
   ========================================================= */

.reset-btn {

  padding:
    9px
    18px;

  color: #dbe7ea;

  background: #3b4b52;

  border:
    1px solid
    #5f747c;

  border-radius: 6px;

  cursor: pointer;

  font-weight: 600;

  transition:

    background
    0.2s ease,

    border-color
    0.2s ease,

    transform
    0.15s ease;

}


.reset-btn:hover {

  background: #465a62;

  border-color: #78909c;

  transform:
    translateY(
      -1px
    );

}


#reset-button.reset-all-btn {

  background:
    #bb3434 !important;

  color:
    white !important;

  border:
    1px solid
    #d65b5b !important;

  font-weight: 700;

}


#reset-button.reset-all-btn:hover {

  background:
    #cf4141 !important;

  border-color:
    #e67b7b !important;

}


.center-controls {

  text-align: center;

}


.hidden {

  display:
    none !important;

}


/* =========================================================
   INFO
   ========================================================= */

#strategy-info {

  grid-column:
    1 / -1;

  width: 300px;

  margin:
    70px
    0
    10px
    20px;

  padding:
    14px
    18px;

  color: #aebcc0;

  background: #172024;

  border:
    1px solid
    #394b50;

  border-radius: 10px;

  font-size: 13px;

  line-height: 1.5;

}


#strategy-info strong {

  color:
    var(--accent);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1300px
) {

  .main-container {

    grid-template-columns:

      minmax(
        250px,
        290px
      )

      minmax(
        0,
        1fr
      );

  }


  #action-box-wrapper,
  #strategy-info {

    grid-column:
      1 / -1;

  }

}


@media (
  max-width: 950px
) {

  .outer-frame {

    width:

      calc(
        100% - 18px
      );

  }


  .main-container {

    grid-template-columns:
      1fr;

  }


  #strategy-info {

    width: 100%;

    margin:
      20px
      0
      0;

  }

}


@media (
  max-width: 700px
) {

  #card-container {

    gap: 2px;

  }


  .card {

    font-size: 11px;

  }

}


@media (
  max-width: 600px
) {

  .settings-bar {

    width:

      calc(
        100% - 18px
      );

  }


  .setting {

    width: 100%;

    justify-content:
      space-between;

  }


  .panel-title {

    font-size: 23px;

  }


  #strategy-context {

    font-size: 16px;

  }

}

#hand-name {

  display: none;

}


#solver-syntax {

  min-height: 28px;

  margin-top: 6px;

  margin-bottom: 8px;

  color: #71F5DD;

  font-size: 20px;

  font-weight: 700;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  letter-spacing: 0.3px;

  cursor: copy;

  user-select: all;

  transition:
    color 0.15s ease,
    transform 0.15s ease;

}


#solver-syntax:hover {

  color: white;

}


#solver-syntax.copied {

  color: #7CFF9B;

  transform: scale(1.04);

}


/* ==========================================================
   SOLVER MIX DISPLAY
   ========================================================== */

.solver-mix-panel {

  margin-top:
    12px;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(
      66,
      205,
      255,
      0.7
    );

  border-left:
    4px solid
    #42cdff;

  border-radius:
    8px;

  background:
    linear-gradient(
      135deg,
      rgba(
        0,
        79,
        105,
        0.42
      ),
      rgba(
        8,
        31,
        40,
        0.75
      )
    );

  box-shadow:
    0 0 12px
    rgba(
      66,
      205,
      255,
      0.12
    );

}


.solver-mix-label {

  margin-bottom:
    6px;

  color:
    #61dcff;

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

}


.solver-mix-values {

  color:
    #f3fbff;

  font-size:
    1.02rem;

  font-weight:
    800;

  line-height:
    1.45;

  letter-spacing:
    0.01em;

}


@media (
  max-width:
    900px
) {

  .solver-mix-panel {

    padding:
      10px 12px;

  }


  .solver-mix-values {

    font-size:
      0.95rem;

  }

}


/* =========================================================
   PLO NINJA PRODUCT UI REFRESH
   Keeps the existing strategy-engine hooks and action states.
   ========================================================= */

:root {
  --page-bg: #080d0a;
  --header-bg: #0b1710;
  --panel-bg: #111a14;
  --panel-inner: #19251d;
  --border-main: #31503a;
  --border-soft: #263d2d;
  --text-main: #eef3ef;
  --text-muted: #aebbb1;
  --accent: #a6e36f;
  --accent-bright: #bbef89;
  --accent-dark: #233c29;
  --green: #29a65a;
  --red: #df5154;
  --blue: #397fe0;
  --orange: #d98b34;
  --purple: #8d67cc;
  --fold: #64716b;
}

body {
  min-height: 100vh;
  color: var(--text-main);
  background:
    radial-gradient(ellipse at 78% 0%, rgba(68, 130, 67, .18), transparent 34rem),
    linear-gradient(180deg, #0b1710 0, #080d0a 330px, #080d0a 100%);
}

button,
select,
input {
  font: inherit;
}

.page-header {
  width: min(100% - 40px, 1530px);
  margin: 0 auto;
  padding: 30px 10px 18px;
  text-align: left;
}

.page-header h1 {
  color: #f5f8f5;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -.04em;
  text-shadow: none;
}

.page-header h1::after {
  content: "PRE-FLOP LAB";
  display: inline-block;
  margin-left: 14px;
  padding: 7px 10px;
  vertical-align: middle;
  border: 1px solid rgba(166, 227, 111, .35);
  border-radius: 999px;
  color: var(--accent-bright);
  background: rgba(166, 227, 111, .08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.subtitle {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 15px;
}

.settings-bar {
  width: min(100% - 40px, 1530px);
  margin: 10px auto 0;
  padding: 16px 20px;
  justify-content: flex-start;
  gap: 22px 34px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 26, 20, .94);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}

.setting {
  gap: 12px;
}

.setting label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.setting select {
  min-width: 145px;
  padding: 10px 38px 10px 13px;
  color: #f4f8f4;
  background: #1b2920;
  border: 1px solid #38533f;
  border-radius: 9px;
}

#strategy-status {
  position: relative;
  margin-left: auto;
  padding: 9px 13px 9px 29px;
  color: #cfe9c2;
  background: #17251b;
  border: 1px solid #2d4933;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

#strategy-status::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #8bd96a;
  box-shadow: 0 0 10px rgba(139, 217, 106, .4);
}

#strategy-status.unavailable::before {
  background: #f06c64;
  box-shadow: none;
}

.outer-frame {
  width: min(100% - 40px, 1530px);
  margin: 18px auto 36px;
  padding: 0;
}

.outer-frame::before {
  display: none;
}

.main-container {
  grid-template-columns: minmax(250px, 285px) minmax(430px, 1fr) minmax(300px, 350px);
  gap: 16px;
  align-items: stretch;
}

.panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border-soft);
  border-radius: 17px;
  background: linear-gradient(150deg, rgba(20, 31, 23, .98), rgba(14, 21, 16, .98));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}

.panel-title {
  margin: 0 0 8px;
  color: #f2f7f2;
  text-align: left;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.panel-hint {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

#position-box {
  align-self: start;
}

.radio-group,
#position-options,
#facing-options,
#secondary-options {
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
}

#position-options,
#secondary-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#facing-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radio-group strong {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: #93a497;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.radio-group label {
  min-height: 42px;
  gap: 7px;
  padding: 9px 8px;
  color: #d8e2da;
  background: #121b15;
  border: 1px solid #2a3e30;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.radio-group label:hover {
  transform: translateY(-1px);
  border-color: #668556;
}

.radio-group label:has(input[type="radio"]:checked) {
  color: #eaf8df;
  background: #233528;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(166, 227, 111, .12);
}

.radio-group label:has(input[name="facing"][value="RFI"]) { color: #8fe0a4; }
.radio-group label:has(input[name="facing"][value="Limp"]) { color: #d8e2da; }
.radio-group label:has(input[name="facing"][value="Raise"]) { color: #8cbcff; }
.radio-group label:has(input[name="facing"][value="3Bet"]) { color: #ff9290; }
.radio-group label:has(input[name="facing"][value="Squeeze"]) { color: #f2d66e; }
.radio-group label:has(input[name="facing"][value="4Bet"]) { color: #f5ae70; }
.radio-group label:has(input[name="facing"][value="RaiseCaller"]) { color: #9ce8dc; }

.radio-group input[type="radio"] {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin: 0;
  accent-color: var(--accent);
  appearance: auto;
}

#card-selection-container {
  padding: 20px;
  overflow: visible;
  text-align: left;
}

#card-container-wrapper {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

#card-container {
  width: 100%;
  min-width: 430px;
  gap: 5px;
  padding: 10px;
  background: #0a100c;
  border: 1px solid #2e4735;
  border-radius: 14px;
}

.card {
  min-height: 70px;
  color: #101712;
  background: #f2f5f2;
  border: 1px solid #cdd7ce;
  border-radius: 7px;
  font-size: clamp(12px, 1.05vw, 17px);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .2);
}

.card:hover {
  transform: translateY(-2px) scale(1.04);
  z-index: 1;
}

.card.selected {
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(166, 227, 111, .16), 0 5px 14px rgba(0, 0, 0, .35);
}

.card.spades { color: #151a17; }
.card.hearts { color: #e65357; }
.card.diamonds { color: #398be0; }
.card.clubs { color: #24964c; }

#strategy-context {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 8px 11px;
  color: #c9e9b2;
  background: #142119;
  border: 1px solid #2e4935;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: normal;
  text-shadow: none;
}

.strategy-context-stack {
  color: #132018;
  background: var(--accent);
}

.card-controls {
  justify-content: flex-start;
  margin-top: 14px;
}

#action-box-wrapper {
  min-height: 0;
  text-align: left;
}

#scenario-position {
  margin: 18px 0 8px;
  color: #f2f7f2;
  font-size: 25px;
  font-weight: 800;
}

#scenario-action {
  min-width: 0;
  margin: 0 0 14px;
  padding: 7px 11px;
  color: #c9e9b2;
  background: #17251b;
  border: 1px solid #2c4532;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: default;
  user-select: text;
}

#selected-cards-container {
  align-items: stretch;
  padding: 4px 0 0;
}

#selected-cards {
  min-height: 92px;
  gap: 7px;
  margin-bottom: 8px;
  padding: 8px;
  background: #0d140f;
  border: 1px solid #263d2d;
  border-radius: 11px;
}

#selected-cards .card {
  min-height: 72px;
  border-radius: 8px;
  font-size: clamp(18px, 2vw, 27px);
}

#hand-name {
  display: none;
}

#solver-syntax {
  min-height: 0;
  margin: 2px 0 7px;
  color: #9caf9e;
  font-size: 12px;
}

#solver-syntax:hover,
#solver-syntax.copied {
  color: var(--accent-bright);
}

#action-box {
  max-width: none;
  min-height: 72px;
  margin: 10px 0 14px;
  color: #dce7df;
  background: #1a251d;
  border: 1px solid #36513d;
  border-radius: 13px;
  font-size: 24px;
  letter-spacing: .02em;
}

.action-raise,
.action-limp,
.action-overlimp,
.action-call,
.action-check,
.action-3bet,
.action-4bet,
.action-5bet,
.action-fold,
.action-unavailable {
  border-color: transparent !important;
}

#hand-analysis {
  min-height: 100px;
  margin: 0 0 14px;
  padding: 14px;
  color: #c6d2c9;
  background: #121b15;
  border: 1px solid #293e30;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
}

.analysis-heading {
  color: #f2f7f2;
  font-size: 14px;
}

.analysis-tags { gap: 6px; }
.analysis-tag {
  padding: 4px 8px;
  color: #d8e9cf;
  background: #1b2a1f;
  border: 1px solid #344d38;
  border-radius: 999px;
}

.analysis-stack,
.analysis-row,
.analysis-label,
.analysis-value,
.analysis-category,
.analysis-strength,
.analysis-reason,
.strategy-note {
  color: #c2cec5;
}

.solver-mix-panel,
.solver-rng-panel {
  color: #e8f1e9;
  background: linear-gradient(145deg, #18281c, #111b14);
  border-color: #3a5b40;
  box-shadow: none;
}

.solver-mix-label,
.solver-rng-heading {
  color: var(--accent-bright);
}

.solver-mix-values,
.solver-rng-result,
.solver-rng-number {
  color: #f3f7f3;
}

.solver-rng-roll {
  color: #102015;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 9px;
  font-weight: 800;
}

.solver-rng-roll:hover {
  background: #b8ef84;
}

.reset-btn {
  padding: 9px 12px;
  color: #b7c4ba;
  background: #17221a;
  border: 1px solid #334638;
  border-radius: 8px;
  font-size: 12px;
}

.reset-btn:hover {
  color: #f2f7f2;
  background: #203126;
  border-color: #5b7951;
  transform: none;
}

#reset-button.reset-all-btn,
#reset-button.reset-all-btn:hover {
  width: 100%;
  color: #d4b4b2 !important;
  background: #241817 !important;
  border: 1px solid #55302d !important;
  font-weight: 700;
}

#strategy-info {
  grid-column: 1 / -1;
  width: auto;
  margin: 0;
  padding: 13px 16px;
  color: #aebbb1;
  background: #101813;
  border: 1px solid #263d2d;
  border-radius: 11px;
  font-size: 12px;
}

#strategy-info strong {
  color: var(--accent-bright);
}

.hidden {
  display: none !important;
}

@media (max-width: 1200px) {
  .main-container {
    grid-template-columns: minmax(235px, 285px) minmax(0, 1fr);
  }

  #action-box-wrapper,
  #strategy-info {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page-header,
  .settings-bar,
  .outer-frame {
    width: calc(100% - 28px);
  }

  .page-header {
    padding: 24px 2px 14px;
  }

  .page-header h1::after {
    margin-left: 6px;
    padding: 6px 8px;
    font-size: 9px;
  }

  .settings-bar {
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .setting {
    width: 100%;
    justify-content: space-between;
  }

  .setting select {
    min-width: 145px;
  }

  #strategy-status {
    margin: 2px 0 0;
  }

  .outer-frame {
    margin-top: 14px;
  }

  .main-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  #action-box-wrapper,
  #strategy-info {
    grid-column: auto;
  }

  #action-box-wrapper {
    display: block;
  }

  #hand-analysis {
    margin-top: 0;
  }

  .panel {
    padding: 16px;
  }

  #card-container {
    min-width: 430px;
  }
}

@media (max-width: 420px) {
  .page-header h1 {
    font-size: 32px;
  }

  .page-header h1::after {
    display: table;
    margin: 8px 0 0;
  }

  #position-options,
  #secondary-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #facing-options {
    grid-template-columns: 1fr;
  }
}



/* ==========================================================
   PLO NINJA STACK DEPTH IDENTITY V1
   ========================================================== */

:root {

  --stack-accent:
    #43e487;

  --stack-accent-soft:
    rgba(
      67,
      228,
      135,
      0.16
    );

  --stack-accent-faint:
    rgba(
      67,
      228,
      135,
      0.08
    );

}


/* Header subtitle */

#stack-strategy-subtitle {

  margin-top:
    2px;

  color:
    var(
      --stack-accent
    );

  font-size:
    0.95rem;

  font-weight:
    800;

  letter-spacing:
    0.07em;

  text-align:
    center;

  transition:
    color
    180ms ease;

}


/* Large persistent banner */

#stack-depth-banner {

  width:
    min(
      520px,
      calc(
        100% - 32px
      )
    );

  margin:
    10px auto 18px;

  padding:
    10px 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  border:
    2px solid
    var(
      --stack-accent
    );

  border-radius:
    10px;

  background:
    linear-gradient(
      90deg,
      var(
        --stack-accent-soft
      ),
      rgba(
        5,
        18,
        24,
        0.88
      ),
      var(
        --stack-accent-soft
      )
    );

  box-shadow:
    0 0 18px
    var(
      --stack-accent-faint
    );

  transition:
    border-color
    180ms ease,
    background
    180ms ease,
    box-shadow
    180ms ease;

}


.stack-banner-label {

  color:
    #d9e7ec;

  font-size:
    0.9rem;

  font-weight:
    800;

  letter-spacing:
    0.15em;

}


.stack-banner-divider {

  color:
    var(
      --stack-accent
    );

  font-size:
    1.15rem;

  font-weight:
    900;

}


.stack-banner-value {

  color:
    var(
      --stack-accent
    );

  font-size:
    1.45rem;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-shadow:
    0 0 12px
    var(
      --stack-accent-soft
    );

}


/* Make dropdown itself carry the stack colour */

#stack-depth {

  border-color:
    var(
      --stack-accent
    ) !important;

  box-shadow:
    0 0 0 1px
    var(
      --stack-accent-faint
    );

  transition:
    border-color
    180ms ease,
    box-shadow
    180ms ease;

}


/* Main application shell gets subtle matching identity */

.stack-theme-shell {

  border-color:
    var(
      --stack-accent
    ) !important;

  box-shadow:
    0 0 0 1px
    var(
      --stack-accent-faint
    ),
    0 0 26px
    var(
      --stack-accent-faint
    ) !important;

  transition:
    border-color
    180ms ease,
    box-shadow
    180ms ease;

}


/* Existing stack badges should inherit identity */

body[data-stack-depth]
.stack-badge,

body[data-stack-depth]
.stack-display,

body[data-stack-depth]
#stack-display {

  border-color:
    var(
      --stack-accent
    ) !important;

  color:
    var(
      --stack-accent
    ) !important;

}


/* Mobile / tablet */

@media (
  max-width:
    900px
) {

  #stack-depth-banner {

    width:
      calc(
        100% - 24px
      );

    margin-bottom:
      14px;

    padding:
      9px 12px;

  }


  .stack-banner-label {

    font-size:
      0.78rem;

  }


  .stack-banner-value {

    font-size:
      1.2rem;

  }

}


/* Extra spacing below main header */
#stack-depth-banner {
  margin-top: 24px;
}



/* ==========================================================
   PLO NINJA SOLVER RNG V1
   ========================================================== */

.solver-rng-panel {

  margin-top:
    12px;

  padding-top:
    10px;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    10px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

}


.solver-rng-heading {

  color:
    #8faeb9;

  font-size:
    0.72rem;

  font-weight:
    900;

  letter-spacing:
    0.12em;

}


.solver-rng-result {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

}


.solver-rng-number {

  min-width:
    48px;

  color:
    #ffffff;

  font-size:
    1.18rem;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;

}


.solver-rng-arrow {

  color:
    #8299a2;

  font-weight:
    800;

}


.solver-rng-action {

  color:
    #dce8ec;

  font-size:
    0.95rem;

  font-weight:
    900;

  white-space:
    nowrap;

}


/* Action-specific RNG result colours */

.rng-action-fold {

  color:
    #9aa8b2;

}


.rng-action-call {

  color:
    #39a0ff;

}


.rng-action-check {

  color:
    #63c7ff;

}


.rng-action-raise,
.rng-action-3bet,
.rng-action-squeeze {

  color:
    #ff3158;

}


.rng-action-4bet {

  color:
    #ffad22;

}


.rng-action-5bet {

  color:
    #cf49ff;

}


.rng-action-limp,
.rng-action-overlimp {

  color:
    #49d69d;

}


.solver-rng-roll {

  padding:
    7px 11px;

  border:
    1px solid
    var(
      --stack-accent,
      #42cdff
    );

  border-radius:
    6px;

  background:
    rgba(
      7,
      24,
      31,
      0.82
    );

  color:
    var(
      --stack-accent,
      #42cdff
    );

  font-size:
    0.72rem;

  font-weight:
    900;

  letter-spacing:
    0.06em;

  cursor:
    pointer;

}


.solver-rng-roll:hover {

  background:
    var(
      --stack-accent-soft,
      rgba(
        66,
        205,
        255,
        0.15
      )
    );

}


.solver-rng-roll:active {

  transform:
    translateY(
      1px
    );

}


@media (
  max-width:
    900px
) {

  .solver-rng-panel {

    grid-template-columns:
      auto 1fr;

  }


  .solver-rng-roll {

    grid-column:
      1 / -1;

    width:
      100%;

  }

}

/* =========================================================
   PLO NINJA — PREMIUM CARD SYSTEM V1
   ========================================================= */

:root {
  --card-face-top: #fbfcf8;
  --card-face-bottom: #edf1eb;
  --card-border-premium: #c7d0c9;
  --card-border-hover: #aebbb1;

  --card-shadow:
    0 2px 3px rgba(0, 0, 0, .18),
    0 7px 16px rgba(0, 0, 0, .14);

  --card-shadow-hover:
    0 3px 5px rgba(0, 0, 0, .20),
    0 10px 22px rgba(0, 0, 0, .18);

  --card-spade: #151a17;
  --card-heart: #df454d;
  --card-diamond: #347ed4;
  --card-club: #269653;
}


/* Matrix frame */

#card-container {
  gap: 6px;

  padding: 11px;

  background:
    linear-gradient(
      180deg,
      #0d1510 0%,
      #080e0a 100%
    );

  border:
    1px solid
    #304a37;

  border-radius:
    16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 7px 22px rgba(0,0,0,.18);
}


/* Main playing card */

.card {
  position: relative;

  min-height: 70px;

  overflow: hidden;

  color:
    var(--card-spade);

  background:
    linear-gradient(
      165deg,
      var(--card-face-top) 0%,
      #f7f9f5 46%,
      var(--card-face-bottom) 100%
    );

  border:
    1px solid
    var(--card-border-premium);

  border-radius:
    8px;

  font-weight:
    800;

  line-height:
    1.02;

  letter-spacing:
    -.025em;

  text-shadow:
    0 1px 0
    rgba(255,255,255,.55);

  box-shadow:
    var(--card-shadow);

  transition:
    transform .13s ease,
    border-color .13s ease,
    box-shadow .13s ease,
    background .13s ease,
    filter .13s ease;

  -webkit-tap-highlight-color:
    transparent;
}


/* Subtle card-face highlight */

.card::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border-radius:
    inherit;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.08) 35%,
      rgba(0,0,0,.025) 100%
    );
}


/* Hover */

.card:hover {
  z-index: 2;

  transform:
    translateY(-2px);

  border-color:
    var(--card-border-hover);

  box-shadow:
    var(--card-shadow-hover);

  filter:
    brightness(1.015);
}


/* Press */

.card:active {
  transform:
    translateY(0)
    scale(.985);

  box-shadow:
    0 2px 6px
    rgba(0,0,0,.22);
}


/* Selected card

   Uses current stack-depth accent when available.
*/

.card.selected {
  z-index: 3;

  transform:
    translateY(-1px);

  border:
    2px solid
    var(
      --stack-accent,
      var(--accent)
    );

  outline:
    1px solid
    var(
      --stack-accent,
      var(--accent)
    );

  outline-offset:
    1px;

  box-shadow:
    0 0 0 2px rgba(255,255,255,.055),
    0 0 12px rgba(255,255,255,.07),
    0 7px 17px rgba(0,0,0,.32);

  background:
    linear-gradient(
      165deg,
      #ffffff 0%,
      #f6f8f4 48%,
      #e8eee8 100%
    );
}


.card.selected:hover {
  transform:
    translateY(-2px);
}


/* Keyboard accessibility */

.card:focus-visible {
  outline:
    3px solid
    var(
      --stack-accent,
      var(--accent)
    );

  outline-offset:
    2px;
}


/* Four-colour PLO deck */

.card.spades {
  color:
    var(--card-spade);
}

.card.hearts {
  color:
    var(--card-heart);
}

.card.diamonds {
  color:
    var(--card-diamond);
}

.card.clubs {
  color:
    var(--card-club);
}


/* =========================================================
   SELECTED HAND — RESULT PANEL
   ========================================================= */

#selected-cards {
  min-height:
    96px;

  gap:
    9px;

  margin-bottom:
    9px;

  padding:
    10px;

  background:
    linear-gradient(
      180deg,
      #0e1711 0%,
      #0a100c 100%
    );

  border:
    1px solid
    #294131;

  border-radius:
    13px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}


#selected-cards .card {
  min-height:
    76px;

  border-radius:
    9px;

  font-size:
    clamp(
      19px,
      2vw,
      28px
    );

  font-weight:
    850;

  cursor:
    default;

  box-shadow:
    0 3px 5px rgba(0,0,0,.20),
    0 9px 20px rgba(0,0,0,.17);
}


#selected-cards .card:hover {
  transform:
    none;

  filter:
    none;

  border-color:
    var(--card-border-premium);

  box-shadow:
    0 3px 5px rgba(0,0,0,.20),
    0 9px 20px rgba(0,0,0,.17);
}


#selected-cards .card:active {
  transform:
    none;
}


/* Slightly calmer card area on narrow screens */

@media (max-width: 720px) {

  #card-container {
    gap:
      4px;

    padding:
      8px;
  }

  .card {
    border-radius:
      7px;
  }

  #selected-cards {
    gap:
      6px;

    padding:
      8px;
  }

}

/* =========================================================
   PLO NINJA — RESULT PANEL V1
   ========================================================= */

/* ---------------------------------------------------------
   SPOT HEADER
   --------------------------------------------------------- */

#action-box-wrapper {
  position: relative;
  min-height: 0;
  text-align: left;
}


#scenario-position {
  margin:
    12px
    0
    6px;

  color:
    #f5f8f5;

  font-size:
    clamp(
      24px,
      2vw,
      30px
    );

  font-weight:
    850;

  line-height:
    1.05;

  letter-spacing:
    -.025em;
}


#scenario-action {
  display:
    inline-flex;

  align-items:
    center;

  min-width:
    0;

  margin:
    0
    0
    16px;

  padding:
    6px
    10px;

  color:
    #cfe7c5;

  background:
    linear-gradient(
      180deg,
      #18271c 0%,
      #132019 100%
    );

  border:
    1px solid
    #334f39;

  border-radius:
    999px;

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .055em;

  text-transform:
    uppercase;

  cursor:
    default;

  user-select:
    text;
}


/* ---------------------------------------------------------
   SOLVER SYNTAX
   --------------------------------------------------------- */

#solver-syntax {
  min-height:
    0;

  margin:
    3px
    2px
    8px;

  color:
    #819487;

  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    .015em;
}


#solver-syntax:hover,
#solver-syntax.copied {
  color:
    var(
      --stack-accent,
      var(--accent-bright)
    );
}


/* ---------------------------------------------------------
   PRIMARY ACTION
   --------------------------------------------------------- */

#action-box {
  position:
    relative;

  width:
    100%;

  max-width:
    none;

  min-height:
    78px;

  margin:
    11px
    0
    15px;

  padding:
    14px
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .10
    );

  border-radius:
    14px;

  color:
    #ffffff;

  font-size:
    clamp(
      21px,
      2vw,
      27px
    );

  font-weight:
    900;

  line-height:
    1.12;

  letter-spacing:
    .025em;

  text-align:
    center;

  text-transform:
    uppercase;

  text-shadow:
    0 1px 1px
    rgba(
      0,
      0,
      0,
      .28
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 22px rgba(0,0,0,.22);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}


#action-box::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.075) 0%,
      rgba(255,255,255,0) 48%,
      rgba(0,0,0,.07) 100%
    );
}


#action-box:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.025);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 11px 28px rgba(0,0,0,.26);
}


/* Refined action palette */

#action-box.action-raise {
  background:
    linear-gradient(
      135deg,
      #249d53,
      #18753d
    ) !important;
}


#action-box.action-call {
  background:
    linear-gradient(
      135deg,
      #397fdb,
      #285ca9
    ) !important;
}


#action-box.action-check {
  background:
    linear-gradient(
      135deg,
      #667a83,
      #485961
    ) !important;
}


#action-box.action-limp,
#action-box.action-overlimp {
  background:
    linear-gradient(
      135deg,
      #169986,
      #0e6e61
    ) !important;
}


#action-box.action-3bet {
  background:
    linear-gradient(
      135deg,
      #df5154,
      #a9363d
    ) !important;
}


#action-box.action-4bet {
  background:
    linear-gradient(
      135deg,
      #e2943d,
      #b46922
    ) !important;
}


#action-box.action-5bet {
  background:
    linear-gradient(
      135deg,
      #936ed2,
      #65439d
    ) !important;
}


#action-box.action-fold {
  background:
    linear-gradient(
      135deg,
      #68756f,
      #47514c
    ) !important;
}


#action-box.action-unavailable {
  color:
    #e4c79d !important;

  background:
    linear-gradient(
      135deg,
      #454943,
      #30342f
    ) !important;
}


/* ---------------------------------------------------------
   SOLVER MIX
   --------------------------------------------------------- */

.solver-mix-panel {
  margin:
    0
    0
    13px;

  padding:
    13px
    14px;

  color:
    #edf5ef;

  background:
    linear-gradient(
      145deg,
      #17271b 0%,
      #101913 100%
    );

  border:
    1px solid
    #36563d;

  border-left:
    3px solid
    var(
      --stack-accent,
      var(--accent)
    );

  border-radius:
    11px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 5px 14px rgba(0,0,0,.13);
}


.solver-mix-label {
  margin-bottom:
    6px;

  color:
    var(
      --stack-accent,
      var(--accent-bright)
    );

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


.solver-mix-values {
  color:
    #f0f6f1;

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.5;

  letter-spacing:
    .005em;
}


/* ---------------------------------------------------------
   RNG
   --------------------------------------------------------- */

.solver-rng-panel {
  margin-top:
    12px;

  padding-top:
    11px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .07
    );

  color:
    #e5eee7;

  background:
    transparent;
}


.solver-rng-heading {
  margin-bottom:
    7px;

  color:
    #8fa195;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}


.solver-rng-result {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-height:
    34px;

  margin-bottom:
    9px;

  font-weight:
    800;
}


.solver-rng-number {
  min-width:
    44px;

  color:
    #f4f8f5;

  font-size:
    15px;

  font-variant-numeric:
    tabular-nums;
}


.solver-rng-arrow {
  color:
    #72857a;
}


.solver-rng-action {
  color:
    var(
      --stack-accent,
      var(--accent-bright)
    );

  font-size:
    14px;

  font-weight:
    900;
}


.solver-rng-roll {
  width:
    100%;

  padding:
    8px
    11px;

  color:
    #d9e7dc;

  background:
    #1b2b20;

  border:
    1px solid
    #3b5942;

  border-radius:
    8px;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .075em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:
    background .14s ease,
    border-color .14s ease,
    transform .14s ease;
}


.solver-rng-roll:hover {
  color:
    #ffffff;

  background:
    #233827;

  border-color:
    var(
      --stack-accent,
      var(--accent)
    );
}


.solver-rng-roll:active {
  transform:
    translateY(1px);
}


/* ---------------------------------------------------------
   HAND ANALYSIS — SECONDARY INFORMATION
   --------------------------------------------------------- */

#hand-analysis {
  min-height:
    90px;

  margin:
    0
    0
    14px;

  padding:
    13px
    14px;

  color:
    #afbeb3;

  background:
    linear-gradient(
      180deg,
      #111a14 0%,
      #0e1711 100%
    );

  border:
    1px solid
    #26392c;

  border-radius:
    11px;

  font-size:
    12px;

  line-height:
    1.55;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}


.analysis-heading {
  margin-bottom:
    9px;

  color:
    #dce6df;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}


.analysis-tags {
  gap:
    5px;
}


.analysis-tag {
  padding:
    4px
    7px;

  color:
    #bdcbbf;

  background:
    #18231b;

  border:
    1px solid
    #2b4030;

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    700;
}


.analysis-row {
  margin-bottom:
    5px;

  color:
    #aebcb1;
}


.analysis-label {
  color:
    #809187;
}


.analysis-value {
  color:
    #cdd8d0;

  font-weight:
    800;
}


.analysis-category,
.analysis-strength {
  color:
    #b8c9bc;
}


.analysis-reason {
  margin-top:
    9px;

  padding-top:
    9px;

  color:
    #9fac9f;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .055
    );
}


.strategy-note {
  color:
    #7f9085;

  font-size:
    11px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 720px) {

  #action-box {
    min-height:
      68px;

    padding:
      12px
      14px;

    font-size:
      21px;
  }

  #scenario-position {
    font-size:
      24px;
  }

  .solver-mix-panel {
    padding:
      11px
      12px;
  }

}

/* =========================================================
   PLO NINJA — PAGE LAYOUT V1
   Desktop / tablet hierarchy pass
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL CONTENT WIDTH
   --------------------------------------------------------- */

.page-header,
.outer-frame {
  width:
    min(
      calc(100% - 40px),
      1530px
    );
}


.outer-frame {
  margin:
    18px
    auto
    40px;

  padding:
    0;
}


/* ---------------------------------------------------------
   PRIMARY THREE-COLUMN WORKSPACE
   --------------------------------------------------------- */

.main-container {
  display:
    grid;

  grid-template-columns:
    minmax(250px, 270px)
    minmax(560px, 1fr)
    minmax(315px, 345px);

  gap:
    18px;

  align-items:
    start;
}


/* ---------------------------------------------------------
   SHARED PANEL LANGUAGE
   --------------------------------------------------------- */

.panel {
  min-width:
    0;

  padding:
    18px;

  border:
    1px solid
    #29402f;

  border-radius:
    16px;

  background:
    linear-gradient(
      150deg,
      rgba(19, 30, 22, .99),
      rgba(13, 21, 16, .99)
    );

  box-shadow:
    0 10px 28px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.018);
}


.panel-title {
  margin:
    0
    0
    6px;

  color:
    #eef4ef;

  font-size:
    16px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -.012em;
}


.panel-hint {
  margin:
    0
    0
    17px;

  color:
    #899b8e;

  font-size:
    12px;

  line-height:
    1.5;
}


/* ---------------------------------------------------------
   LEFT — SCENARIO CONTROLS
   --------------------------------------------------------- */

#position-box {
  align-self:
    start;
}


#position-options,
#facing-options,
#secondary-options,
.radio-group {
  margin-bottom:
    14px;
}


.radio-group strong {
  margin-bottom:
    1px;

  color:
    #829387;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.radio-group label {
  min-height:
    40px;

  padding:
    8px
    8px;

  border-radius:
    8px;

  font-size:
    12px;
}


#position-options,
#secondary-options {
  gap:
    7px;
}


#facing-options {
  gap:
    7px;
}


/* ---------------------------------------------------------
   CENTER — CARD WORKSPACE
   Visually the primary working area.
   --------------------------------------------------------- */

#card-selection-container {
  align-self:
    start;

  padding:
    18px;
}


#card-container-wrapper {
  margin-top:
    2px;

  padding-bottom:
    2px;
}


#card-container {
  min-width:
    0;

  width:
    100%;
}


.card-controls {
  margin-top:
    13px;
}


#strategy-context {
  margin-top:
    13px;
}


/* ---------------------------------------------------------
   RIGHT — DECISION PANEL
   --------------------------------------------------------- */

#action-box-wrapper {
  align-self:
    start;

  padding:
    18px;
}


/*
 * Keeps the recommendation panel visually aligned with the
 * top of the other two workspace panels.
 */

#action-box-wrapper #scenario-position {
  margin-top:
    4px;
}


/* ---------------------------------------------------------
   LOWER INFORMATION
   --------------------------------------------------------- */

#strategy-info {
  grid-column:
    1 / -1;

  width:
    auto;

  max-width:
    620px;

  margin:
    4px
    0
    0;

  padding:
    12px
    14px;

  color:
    #8fa095;

  background:
    #0f1712;

  border:
    1px solid
    #24372a;

  border-radius:
    10px;

  font-size:
    12px;

  line-height:
    1.5;
}


/* ---------------------------------------------------------
   LARGE DESKTOP
   Give the card matrix more room when available.
   --------------------------------------------------------- */

@media (min-width: 1450px) {

  .main-container {
    grid-template-columns:
      265px
      minmax(0, 1fr)
      340px;

    gap:
      20px;
  }

}


/* ---------------------------------------------------------
   MID-SIZE DESKTOP / TABLET LANDSCAPE

   Keep controls on the left and cards on the right.
   Decision panel drops cleanly underneath.
   --------------------------------------------------------- */

@media (
  min-width: 951px
) and (
  max-width: 1220px
) {

  .main-container {
    grid-template-columns:
      minmax(245px, 270px)
      minmax(0, 1fr);

    gap:
      16px;
  }


  #action-box-wrapper {
    grid-column:
      1 / -1;

    width:
      100%;
  }


  /*
   * On this width the result panel becomes a broad horizontal
   * section instead of being squeezed into a narrow sidebar.
   */

  #selected-cards-container {
    max-width:
      620px;
  }


  #action-box {
    max-width:
      620px;
  }


  .solver-mix-panel,
  #hand-analysis {
    max-width:
      760px;
  }


  #strategy-info {
    grid-column:
      1 / -1;
  }

}


/* ---------------------------------------------------------
   TABLET / PHONE
   --------------------------------------------------------- */

@media (max-width: 950px) {

  .page-header,
  .outer-frame {
    width:
      min(
        calc(100% - 24px),
        760px
      );
  }


  .outer-frame {
    margin-top:
      12px;
  }


  .main-container {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      13px;
  }


  #position-box,
  #card-selection-container,
  #action-box-wrapper,
  #strategy-info {
    grid-column:
      auto;

    width:
      100%;
  }


  .panel {
    padding:
      16px;

    border-radius:
      14px;
  }


  #card-selection-container {
    padding:
      16px;
  }


  /*
   * Horizontal scroll remains available if a very narrow
   * viewport cannot comfortably hold all 13 columns.
   */

  #card-container-wrapper {
    overflow-x:
      auto;
  }


  #card-container {
    min-width:
      430px;
  }


  #strategy-info {
    max-width:
      none;
  }

}


/* ---------------------------------------------------------
   SMALL PHONE
   --------------------------------------------------------- */

@media (max-width: 520px) {

  .page-header,
  .outer-frame {
    width:
      calc(100% - 16px);
  }


  .panel {
    padding:
      14px;

    border-radius:
      13px;
  }


  #position-options,
  #secondary-options {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #facing-options {
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   RNG PANEL CLEANUP
   ========================================================= */

.solver-rng-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.solver-rng-heading {
  width: 100%;
  margin: 0 0 2px;
}

.solver-rng-result {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
}

.solver-rng-number {
  min-width: 42px;
  font-weight: 800;
}

.solver-rng-arrow {
  opacity: 0.8;
}

.solver-rng-action {
  font-weight: 800;
  white-space: nowrap;
}

.solver-rng-roll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 12px;
  min-height: 38px;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .solver-rng-roll {
    width: 100%;
  }
}

/* =========================================================
   PLO NINJA — COLORED SOLVER ACTIONS V1
   ========================================================= */

.solver-mix-token {
  font-weight: 900;
}


/* CALL — blue */

.solver-mix-values .mix-call,
.solver-rng-action.rng-action-call {
  color: #5da2ff;
}


/* FOLD — red */

.solver-mix-values .mix-fold,
.solver-rng-action.rng-action-fold {
  color: #ff646a;
}


/* RAISE — green */

.solver-mix-values .mix-raise,
.solver-rng-action.rng-action-raise {
  color: #51d783;
}


/* LIMP — teal */

.solver-mix-values .mix-limp,
.solver-mix-values .mix-overlimp,
.solver-rng-action.rng-action-limp,
.solver-rng-action.rng-action-overlimp {
  color: #42cdb7;
}


/* CHECK — grey */

.solver-mix-values .mix-check,
.solver-rng-action.rng-action-check {
  color: #a8b7b0;
}


/* 3BET — coral */

.solver-mix-values .mix-3bet,
.solver-rng-action.rng-action-3bet {
  color: #ff7775;
}


/* SQUEEZE — yellow */

.solver-mix-values .mix-squeeze,
.solver-rng-action.rng-action-squeeze {
  color: #efd45f;
}


/* 4BET — orange */

.solver-mix-values .mix-4bet,
.solver-rng-action.rng-action-4bet {
  color: #f2a652;
}


/* 5BET — purple */

.solver-mix-values .mix-5bet,
.solver-rng-action.rng-action-5bet {
  color: #bd91ff;
}

/* =========================================================
   PLO NINJA — HEADER + SETTINGS V1
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.page-header {
  width:
    min(
      calc(100% - 40px),
      1530px
    );

  margin:
    0 auto;

  padding:
    26px
    8px
    16px;

  text-align:
    left;
}


.page-header h1 {
  margin:
    0;

  color:
    #f5f8f5;

  font-size:
    clamp(
      36px,
      3.6vw,
      50px
    );

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -.045em;

  text-shadow:
    none;
}


.page-header h1::after {
  content:
    "PRE-FLOP LAB";

  display:
    inline-flex;

  align-items:
    center;

  margin-left:
    12px;

  padding:
    6px
    9px;

  vertical-align:
    middle;

  color:
    var(
      --stack-accent,
      var(--accent-bright)
    );

  background:
    var(
      --stack-accent-faint,
      rgba(166, 227, 111, .08)
    );

  border:
    1px solid
    var(
      --stack-accent-soft,
      rgba(166, 227, 111, .30)
    );

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    .145em;

  white-space:
    nowrap;
}


.subtitle {
  margin-top:
    10px;

  color:
    #89998e;

  font-size:
    13px;

  font-weight:
    500;

  line-height:
    1.45;
}


/* ---------------------------------------------------------
   SETTINGS BAR
   --------------------------------------------------------- */

.settings-bar {
  width:
    min(
      calc(100% - 40px),
      1530px
    );

  margin:
    8px
    auto
    0;

  padding:
    12px
    15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    12px
    28px;

  background:
    linear-gradient(
      150deg,
      rgba(18, 29, 21, .97),
      rgba(13, 21, 16, .97)
    );

  border:
    1px solid
    #29402f;

  border-radius:
    14px;

  box-shadow:
    0 8px 24px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.018);
}


/* ---------------------------------------------------------
   SETTING GROUP
   --------------------------------------------------------- */

.setting {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.setting label {
  color:
    #899a8e;

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .035em;
}


/* ---------------------------------------------------------
   SELECT CONTROLS
   --------------------------------------------------------- */

.setting select {
  min-width:
    130px;

  min-height:
    38px;

  padding:
    8px
    34px
    8px
    11px;

  color:
    #edf4ee;

  background:
    #17241b;

  border:
    1px solid
    #344d3a;

  border-radius:
    8px;

  font-size:
    12px;

  font-weight:
    750;

  cursor:
    pointer;

  outline:
    none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}


.setting select:hover {
  background:
    #1b2a20;

  border-color:
    #49684f;
}


.setting select:focus {
  border-color:
    var(
      --stack-accent,
      var(--accent)
    );

  box-shadow:
    0 0 0 2px
    var(
      --stack-accent-faint,
      rgba(166, 227, 111, .10)
    );
}


/* ---------------------------------------------------------
   CALIBRATION STATUS
   --------------------------------------------------------- */

#strategy-status {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    34px;

  margin-left:
    auto;

  padding:
    7px
    11px
    7px
    27px;

  color:
    #cbd9ce;

  background:
    #142019;

  border:
    1px solid
    #2c4332;

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;
}


#strategy-status::before {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    7px;

  height:
    7px;

  transform:
    translateY(-50%);

  border-radius:
    50%;
}


#strategy-status.available {
  color:
    #d2e3d6;

  border-color:
    var(
      --stack-accent-soft,
      #35513a
    );
}


#strategy-status.available::before {
  background:
    var(
      --stack-accent,
      #75dc7f
    );

  box-shadow:
    0 0 8px
    var(
      --stack-accent-soft,
      rgba(117,220,127,.35)
    );
}


#strategy-status.unavailable {
  color:
    #e0b2ae;

  border-color:
    #5e3735;
}


#strategy-status.unavailable::before {
  background:
    #ef6963;

  box-shadow:
    0 0 7px
    rgba(239,105,99,.24);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .page-header,
  .settings-bar {
    width:
      calc(100% - 24px);
  }


  .page-header {
    padding:
      22px
      2px
      13px;
  }


  .page-header h1 {
    font-size:
      clamp(
        32px,
        9vw,
        42px
      );
  }


  .settings-bar {
    align-items:
      stretch;

    gap:
      10px;

    padding:
      12px;
  }


  .setting {
    width:
      100%;

    justify-content:
      space-between;
  }


  .setting select {
    min-width:
      145px;
  }


  #strategy-status {
    width:
      fit-content;

    margin:
      2px
      0
      0;
  }

}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 480px) {

  .page-header h1::after {
    display:
      table;

    margin:
      8px
      0
      0;
  }


  .subtitle {
    font-size:
      12px;
  }


  .setting {
    gap:
      12px;
  }


  .setting select {
    min-width:
      138px;
  }

}

/* =========================================================
   PLO NINJA — UNIFIED STACK IDENTITY V1
   One visual identity per stack depth.
   ========================================================= */


/* Text colour used on solid stack-colour pills */

:root {
  --stack-ink: #11150f;
}


/* Violet needs lighter foreground */

body[data-stack-depth="150"] {
  --stack-ink: #ffffff;
}


/* ---------------------------------------------------------
   STACK DEPTH BANNER
   --------------------------------------------------------- */

#stack-depth-banner {
  color:
    var(--stack-accent);

  border-color:
    var(--stack-accent);

  background:
    linear-gradient(
      135deg,
      var(--stack-accent-faint),
      rgba(12, 18, 14, .92)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 20px var(--stack-accent-faint);
}


/* ---------------------------------------------------------
   STACK PILLS
   --------------------------------------------------------- */

.analysis-stack,
.strategy-context-stack {
  color:
    var(--stack-ink) !important;

  background:
    var(--stack-accent) !important;

  border:
    1px solid
    var(--stack-accent) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 3px 9px var(--stack-accent-faint);
}


.analysis-stack {
  display:
    inline-block;

  padding:
    4px
    9px;

  border-radius:
    7px;

  font-size:
    1.05rem;

  font-weight:
    900;

  line-height:
    1;
}


.strategy-context-stack {
  display:
    inline-block;

  padding:
    4px
    8px;

  border-radius:
    7px;

  font-weight:
    900;
}


/* ---------------------------------------------------------
   CALIBRATED STATUS
   --------------------------------------------------------- */

#strategy-status.available {
  color:
    var(--stack-accent);

  border-color:
    var(--stack-accent-soft);

  background:
    var(--stack-accent-faint);
}


#strategy-status.available::before {
  background:
    var(--stack-accent);

  box-shadow:
    0 0 9px
    var(--stack-accent-soft);
}


/* ---------------------------------------------------------
   PRE-FLOP LAB BADGE
   --------------------------------------------------------- */

.page-header h1::after {
  color:
    var(--stack-accent);

  background:
    var(--stack-accent-faint);

  border-color:
    var(--stack-accent-soft);
}


/* ---------------------------------------------------------
   SELECTED CARDS
   --------------------------------------------------------- */

.card.selected {
  border-color:
    var(--stack-accent);

  outline-color:
    var(--stack-accent);

  box-shadow:
    0 0 0 2px rgba(255,255,255,.045),
    0 0 13px var(--stack-accent-soft),
    0 7px 17px rgba(0,0,0,.32);
}


/* ---------------------------------------------------------
   SOLVER MIX
   --------------------------------------------------------- */

.solver-mix-panel {
  border-left-color:
    var(--stack-accent);
}


.solver-mix-label {
  color:
    var(--stack-accent);
}


/* ---------------------------------------------------------
   RNG BUTTON
   --------------------------------------------------------- */

.solver-rng-roll:hover {
  border-color:
    var(--stack-accent);

  box-shadow:
    0 0 10px
    var(--stack-accent-faint);
}


/* ---------------------------------------------------------
   SELECT / FOCUS STATES
   --------------------------------------------------------- */

.setting select:focus {
  border-color:
    var(--stack-accent);

  box-shadow:
    0 0 0 2px
    var(--stack-accent-faint);
}


/* ---------------------------------------------------------
   SCENARIO SELECTION
   --------------------------------------------------------- */

.radio-group label:has(input[type="radio"]:checked) {
  border-color:
    var(--stack-accent);

  box-shadow:
    inset 0 0 0 1px
    var(--stack-accent-faint);
}

/* =========================================================
   PLO NINJA — FULL POSITION NAMES V1
   ========================================================= */


/* Main hero-position selector:
   one full position per row.
*/

#position-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}


/* Secondary position selectors also need more room now that
   names are written in full.
*/

#secondary-options {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 7px;
}


/* Full-name position buttons */

#position-options label,
#secondary-options label {
  min-height: 42px;

  justify-content: flex-start;

  gap: 9px;

  padding:
    9px
    11px;

  text-align: left;

  white-space: normal;
}


/* Main hero positions can breathe slightly more */

#position-options label {
  min-height: 44px;

  padding:
    10px
    12px;

  font-size: 13px;
}


/* Small screens:
   secondary position choices become one-per-row too.
*/

@media (max-width: 520px) {

  #position-options,
  #secondary-options {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   PLO NINJA — POSITION PROMPT WORDING V1
   Preserve natural Title Case in dynamic position prompts.
   ========================================================= */

.radio-group strong {
  text-transform: none;
  letter-spacing: .045em;
}



/* ==========================================================
   PLO NINJA — LIGHT SHOWCASE FRAME V1
   ========================================================== */

html {
  background: #eef1ed;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(
      180deg,
      #f6f7f4 0%,
      #edf0eb 100%
    ) !important;
}


/* ----------------------------------------------------------
   OUTER LIGHT PAGE
   ---------------------------------------------------------- */

.app-showcase-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding: 42px 28px 64px;
}


/* ----------------------------------------------------------
   WHITE PRODUCT CARD
   ---------------------------------------------------------- */

.app-showcase-card {
  box-sizing: border-box;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 42px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfa 100%
    );

  border:
    1px solid
    rgba(43, 65, 51, 0.14);

  border-radius: 30px;

  box-shadow:
    0 24px 70px
      rgba(22, 39, 28, 0.11),
    0 3px 12px
      rgba(22, 39, 28, 0.05);
}


/* ----------------------------------------------------------
   DARK GREEN APP STAGE
   ---------------------------------------------------------- */

.app-showcase-stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 640px;

  padding:
    34px 34px 42px;

  overflow: hidden;

  color: #f7fbf7;

  background:
    radial-gradient(
      circle at 88% 2%,
      rgba(91, 177, 89, 0.24),
      transparent 34%
    ),
    radial-gradient(
      circle at 8% 92%,
      rgba(43, 105, 69, 0.16),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #03120c 0%,
      #061a11 48%,
      #12351c 100%
    );

  border:
    9px solid
    #07120c;

  border-radius: 24px;

  box-shadow:
    inset 0 0 0 1px
      rgba(141, 205, 155, 0.12),
    inset 0 1px 0
      rgba(255, 255, 255, 0.035),
    0 18px 38px
      rgba(9, 24, 15, 0.20);
}


/* subtle inner highlight */

.app-showcase-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  border-radius: 15px;

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.018),
      transparent 28%
    );
}


/*
 * Keep existing application content above
 * the decorative frame layer.
 */

.app-showcase-stage > * {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------
   LET CURRENT APP USE THE FRAME WIDTH
   ---------------------------------------------------------- */

.app-showcase-stage .outer-frame,
.app-showcase-stage .app-container,
.app-showcase-stage .page-container,
.app-showcase-stage main {
  width: 100%;
  max-width: none;
}


/* ----------------------------------------------------------
   SLIGHTLY STRONGER TOP IDENTITY INSIDE FRAME
   ---------------------------------------------------------- */

.app-showcase-stage h1 {
  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.18);
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

  .app-showcase-page {
    padding:
      26px 18px 44px;
  }

  .app-showcase-card {
    padding: 24px;
    border-radius: 24px;
  }

  .app-showcase-stage {
    padding:
      26px 22px 32px;

    border-width: 7px;
    border-radius: 20px;
  }
}


/* ----------------------------------------------------------
   SMALL TABLET / PHONE
   ---------------------------------------------------------- */

@media (max-width: 720px) {

  .app-showcase-page {
    padding:
      12px 8px 28px;
  }

  .app-showcase-card {
    padding: 8px;

    border-radius: 18px;

    box-shadow:
      0 12px 32px
      rgba(22, 39, 28, 0.10);
  }

  .app-showcase-stage {
    min-height: 0;

    padding:
      18px 12px 24px;

    border-width: 4px;
    border-radius: 15px;
  }
}


/* ----------------------------------------------------------
   VERY SMALL PHONE
   ---------------------------------------------------------- */

@media (max-width: 440px) {

  .app-showcase-page {
    padding:
      6px 4px 20px;
  }

  .app-showcase-card {
    padding: 4px;
    border-radius: 13px;
  }

  .app-showcase-stage {
    padding:
      14px 8px 20px;

    border-width: 3px;
    border-radius: 11px;
  }
}

/* PLO NINJA COMPACT SHOWCASE V1 */
.app-showcase-page {
    min-height: 0;
    padding: 12px 8px 20px;
}
.app-showcase-card {
    padding: 12px;
    border-radius: 20px;
}
.app-showcase-stage {
    min-height: 0;
    padding: 24px 20px;
}
@media (max-width: 720px) {
    .app-showcase-page { padding: 4px; }
    .app-showcase-card { padding: 5px; border-radius: 14px; }
    .app-showcase-stage { padding: 16px 10px; }
}