/* =========================
   RESET + THEME
========================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body{
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #0f1b12;
  overflow-x: hidden;
}

:root{
  --glass-outer: rgba(255,255,255,0.24);
  --glass-inner: rgba(255,255,255,0.18);

  --tabs-bg-1: rgba(26, 78, 35, 0.62);
  --tabs-bg-2: rgba(18, 55, 26, 0.62);
  --tabs-sep: rgba(255,255,255,0.22);
  --tabs-text: rgba(255,255,255,0.82);
  --tabs-active: rgba(255,255,255,0.95);
  --tabs-underline: rgba(183, 232, 138, 0.95);

  --card-bg: rgba(245, 242, 235, 0.92);
  --card-border: rgba(255,255,255,0.68);
  --card-shadow: 0 18px 45px rgba(0,0,0,0.30);

  --field-bg: rgba(255,255,255,0.62);
  --field-border: rgba(0,0,0,0.20);
  --field-focus: rgba(67,160,71,0.55);

  --btn-green1: #2e7d32;
  --btn-green2: #1f5e25;
  --btn-border: rgba(0,0,0,0.25);

  --radius-shell: 28px;
  --radius-inner: 22px;
  --radius-card: 20px;
}

/* =========================
   BACKGROUND
========================== */
.bg{
  position: fixed;
  inset: 0;
  background: linear-gradient(140deg, rgba(8,21,14,0.32), rgba(8,21,14,0.18)), url("site-app/assets/css/Apex-Golf-Background.png") center / cover no-repeat;
  transform: translateZ(0);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 650px at 70% 5%, rgba(255,255,255,0.16), rgba(0,0,0,0.34));
  pointer-events:none;
}

/* =========================
   APP SHELL
========================== */
.shell{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: clamp(18px, 3vw, 34px);
}
.panel{
  position: relative;
  width: min(1200px, 94vw);
  border-radius: var(--radius-shell);
  border: 2px solid var(--glass-outer);
  box-shadow: 0 18px 65px rgba(0,0,0,0.25);
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}
.panel::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: var(--radius-inner);
  border: 1px solid var(--glass-inner);
  pointer-events:none;
  z-index: 1;
}
.top{
  position: relative;
  padding: 18px 22px 0 22px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(80,150,210,0.18), rgba(255,255,255,0.02));
}
.logoWindow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.logoImg{
  max-width:340px;
  height:auto;
  display:block;
}

/* =========================
   TABS BAR
========================== */
.tabsWrap{
  margin-top: 14px;
  padding: 10px 12px 14px 12px;
  position: relative;
}
.tabsBar{
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(to bottom, var(--tabs-bg-1), var(--tabs-bg-2));
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  padding: 10px 14px;
}
.tabs{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.tab{
  flex: 1 1 auto;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  color: var(--tabs-text);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  font-size: clamp(12px, 1.2vw, 16px);
  text-shadow: 0 1px 1px rgba(0,0,0,0.55);
  position: relative;
}
.tab:not(:last-child)::before{
  content:"";
  position:absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--tabs-sep);
  opacity: 0.9;
}
.tab[aria-selected="true"]{
  color: var(--tabs-active);
}
.tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: -6px;
  height: 3px;
  border-radius: 999px;
  background: var(--tabs-underline);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.tabsWrap::after{
  content:"";
  position:absolute;
  left: 22px;
  right: 22px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(183,232,138,0.35);
  filter: blur(0.2px);
  pointer-events:none;
}

/* =========================
   CONTENT
========================== */
.content{
  position: relative;
  padding: 22px 22px 30px 22px;
  z-index: 2;
}
.card{
  width: min(1150px, 95vw);
  margin: 18px auto 30px auto;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.cardHeader{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 28px 18px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.18);
}
.cardTitle{
  font-size: clamp(24px, 2.3vw, 36px);
  color: #2b4f2b;
  font-weight: 900;
}
.cardBody{
  padding: 26px 28px 30px 28px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 34px;
}

@media (max-width: 900px){
  .tabs{ flex-direction: column; }
  .tab{ width:100%; text-align:left; }
  .tab:not(:last-child)::before{ display:none; }
  .cardBody{ grid-template-columns: 1fr; }
}

.sectionLabel{
  font-weight: 800;
  color: rgba(0,0,0,0.70);
  margin-bottom: 8px;
  font-size: 16px;
}

.field{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.field input, .field select{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: rgba(0,0,0,0.75);
}
.field:focus-within{
  border-color: var(--field-focus);
  box-shadow: 0 0 0 4px rgba(67,160,71,0.12);
}

.row{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* =========================
   Pills (résultat / total)
========================== */
.resultPill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.35);
  white-space: nowrap;
  width: 190px;          /* stable */
  justify-content: center;
}
.resultScore{
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}
.resultTerm{
  font-weight: 800;
  opacity: .95;
}

/* Total pastille */
.totalPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 130px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.totalPill strong{ font-weight: 950; margin-right: 6px; }
.totalPill .totalValue{ font-variant-numeric: tabular-nums; }

/* Diff classes (couleurs) */
.diff--even{ color: rgba(0,0,0,0.74); }
.diff--pos{ color: #8d1f1f; }   /* + = rouge */
.diff--neg{ color: #1f5e25; }   /* - = vert */

/* =========================
   Boutons / Inputs score
========================== */
.step{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.92);
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  display:grid;
  place-items:center;
  user-select:none;
}
.step:active{ transform: translateY(1px); }

.strokeInput{
  width: 78px;
  height: 34px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(255,255,255,0.85);
  text-align: center;
  font-weight: 900;
  outline: none;
}

/* hide native spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number]{ appearance: textfield; }

/* =========================
   Tabs panels
========================== */
.tabPanel{ display:none; }
.tabPanel.active{ display:block; }

.placeholder{
  padding: 18px 22px;
  color: rgba(0,0,0,0.72);
  font-weight: 600;
  border-top: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.25);
}

/* =========================
   Players list
========================== */
/* =========================
   Historique
========================== */
.historyList{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.historyCard{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.14);
}
.historyMain{
  display:grid;
  gap: 6px;
}
.historyTop{
  display:flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.historyTitle{
  font-weight: 950;
  letter-spacing: .2px;
}
.historyMeta{
  font-size: 12.5px;
  font-weight: 800;
  opacity: .74;
}
.historyTags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.historyTag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.22);
  font-size: 12px;
  font-weight: 900;
  opacity: .9;
}
.historyActions{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.historyActions .btn{
  height: 40px;
  border-radius: 14px;
  padding: 0 12px;
  white-space: nowrap;
}

.btn--danger{
  border-color: rgba(201,48,44,0.30);
  background: rgba(201,48,44,0.14);
  color: #8d1f1f;
}
.btn--danger:hover{ background: rgba(201,48,44,0.20); }

@media (max-width: 720px){
  .historyCard{ grid-template-columns: 1fr; }
  .historyActions{ justify-content: flex-start; flex-wrap: wrap; }
}


.players-list { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.players-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.20);
}
.players-list .pname{ font-weight: 600; }
.players-list .danger{
  border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(201,48,44,0.16);
  color: #c9302c;
}
.players-list .danger:hover{ background: rgba(201,48,44,0.22); }
.players-list .danger.confirm{
  background: rgba(67,160,71,0.18);
  color: #1f5e25;
}

/* =========================
   NEW GAME — APEX UI
========================== */
:root{
  --apex-bg: #0f1b12;
  --apex-text: #0f1b12;
  --apex-white: #ffffff;

  --color-primary: #1565c0;
  --color-accent: #43a047;
  --color-dark: #0f1b12;
  --color-muted: rgba(15,27,18,0.65);
  --ring: rgba(21,101,192,0.35);

  --radius-xl: 22px;
  --radius-lg: 16px;
  --shadow-soft: 0 18px 50px rgba(0,0,0,0.18);
  --border-glass: 1px solid rgba(255,255,255,0.28);
}

.apex-panel{
  width: min(1100px, 92vw);
  margin: 18px auto;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--glass-outer), var(--glass-inner));
  border: var(--border-glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.course-badge{
  display: flex;
  align-items: center;
  gap: 14px;
}

.course-logo{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.course-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
}


.course-meta__kicker{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2px;
}
.course-meta__title{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.15;
  margin: 0;
  color: var(--color-dark);
}
.course-meta__sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(15,27,18,0.68);
}

.apex-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.apex-card{
  border-radius: var(--radius-xl);
  padding: 16px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.26);
}
.apex-card--wide{ grid-column: 1 / -1; }

.apex-card__title{ font-size: 16px; margin: 0 0 4px 0; color: var(--color-dark); }
.apex-card__hint{ font-size: 13px; color: rgba(15,27,18,0.70); margin: 0 0 12px 0; }

.apex-card__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.holeLine{
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-badge{
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.6);
  white-space: nowrap;
}

/* Front 9 */
.section-badge.front{
  color: #1f5e25;
  background: rgba(67,160,71,0.16);
  border-color: rgba(67,160,71,0.35);
}

/* Back 9 */
.section-badge.back{
  color: #8d1f1f;
  background: rgba(201,48,44,0.14);
  border-color: rgba(201,48,44,0.35);
}

/* Affichage section (Front/Back) : désormais inclus dans la ligne Mode */
#courseSectionBadge{ display:none !important; }

/* =========================
   WOW BADGES (Turn / Finish) + TRANSITIONS
========================== */
.section-swap-anim{
  animation: sectionSwap 520ms ease both;
}
@keyframes sectionSwap{
  0%   { transform: translateY(4px) scale(0.98); filter: blur(0.2px); opacity: .75; }
  55%  { transform: translateY(0px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0px) scale(1.00); opacity: 1; }
}

/* Badge spécial (Turn / Finish) */
.special-badge{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.20);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transform: translateZ(0);
}

.special-badge:empty{ display:none; }

.special-badge::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 30%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-35%) rotate(10deg);
  animation: shine 2.4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: .55;
}

@keyframes shine{
  0%   { transform: translateX(-45%) rotate(10deg); opacity: .0; }
  15%  { opacity: .55; }
  55%  { transform: translateX(35%) rotate(10deg); opacity: .45; }
  100% { transform: translateX(55%) rotate(10deg); opacity: 0; }
}

.special-badge.turn{
  color: #0f3a7a;
  background: linear-gradient(135deg, rgba(52,152,219,0.22), rgba(155,89,182,0.18));
  border-color: rgba(52,152,219,0.42);
}
.special-badge.finish{
  color: #6a3a00;
  background: linear-gradient(135deg, rgba(241,196,15,0.24), rgba(230,126,34,0.16));
  border-color: rgba(241,196,15,0.46);
}

.special-badge.turn,
.special-badge.finish{
  animation: popPulse 820ms cubic-bezier(.2,.9,.2,1.1) both;
}

@keyframes popPulse{
  0%   { transform: translateY(6px) scale(0.92); opacity: .0; }
  45%  { transform: translateY(0) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1.00); opacity: 1; }
}


.pill-group{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pill{
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,27,18,0.10);
  background: rgba(255,255,255,0.16);
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.pill input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pill span{ font-weight: 700; color: rgba(15,27,18,0.84); }
.pill small{ font-size: 12px; color: rgba(15,27,18,0.62); }
.pill:has(input:checked){
  background: rgba(21,101,192,0.16);
  border-color: rgba(21,101,192,0.35);
  box-shadow: 0 0 0 3px var(--ring);
}


/* Variante "pastilles" en <button> (ex.: Nombre de joueurs) */
.players-pills .pill{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-weight: 800;
}
.players-pills .pill[aria-pressed="true"]{
  background: rgba(21,101,192,0.16);
  border-color: rgba(21,101,192,0.35);
  box-shadow: 0 0 0 3px var(--ring);
}
.players-pills .pill:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}
.pill:active{ transform: scale(0.99); }

.mode-stack{ display: grid; gap: 10px; }
.mode-option{
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,27,18,0.10);
  background: rgba(255,255,255,0.16);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.mode-option input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mode-option__body{ display: grid; gap: 6px; width: 100%; }
.mode-option__top{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mode-option__name{ font-weight: 800; color: rgba(15,27,18,0.86); }
.mode-option__desc{ font-size: 13px; color: rgba(15,27,18,0.65); }
.mode-option:has(input:checked){
  background: rgba(67,160,71,0.14);
  border-color: rgba(67,160,71,0.35);
  box-shadow: 0 0 0 3px rgba(67,160,71,0.22);
}

.chip{
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,27,18,0.12);
  background: rgba(255,255,255,0.22);
  color: rgba(15,27,18,0.72);
  white-space: nowrap;
}
.chip--info{
  border-color: rgba(21,101,192,0.25);
  background: rgba(21,101,192,0.12);
}
.chip--accent{
  border-color: rgba(67,160,71,0.25);
  background: rgba(67,160,71,0.12);
}

.select-compact{ display: grid; gap: 6px; min-width: 130px; }
.select-compact__label{ font-size: 12px; color: rgba(15,27,18,0.70); }
.select-compact__select{
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,27,18,0.12);
  background: rgba(255,255,255,0.18);
  padding: 0 12px;
  outline: none;
}

.players-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.player-field__label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,27,18,0.76);
  margin-bottom: 6px;
}
.team-tag{
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(67,160,71,0.14);
  border: 1px solid rgba(67,160,71,0.25);
  color: rgba(15,27,18,0.70);
}
.team-tag--b{
  background: rgba(21,101,192,0.12);
  border-color: rgba(21,101,192,0.25);
}
.player-field__input{
  width: 100%;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(15,27,18,0.12);
  background: rgba(255,255,255,0.18);
  padding: 0 14px;
  outline: none;
  font-size: 15px;
}
.player-field__input:focus{
  box-shadow: 0 0 0 3px var(--ring);
  border-color: rgba(21,101,192,0.35);
}

.apex-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
  flex-wrap: wrap;
}
.btn{
  height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(15,27,18,0.12);
  background: rgba(255,255,255,0.22);
  font-weight: 800;
  cursor: pointer;
}
.btn--primary{
  border-color: rgba(67,160,71,0.30);
  background: linear-gradient(180deg, rgba(67,160,71,0.30), rgba(67,160,71,0.18));
}
.btn--ghost{ background: rgba(255,255,255,0.12); }
.btn:active{ transform: translateY(1px); }
.apex-note{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(15,27,18,0.62);
}

.btnFinish{
  border:0;
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  margin-left: 10px;
}
.btnFinish:hover{ transform: translateY(-1px); }
.btnFinish:disabled{ opacity: .55; cursor: not-allowed; transform:none; }
.btnFinish:not(:disabled){ opacity: 1; }


@media (max-width: 860px){
  .apex-grid{ grid-template-columns: 1fr; }
  .pill-group{ grid-template-columns: 1fr; }
  .players-grid{ grid-template-columns: 1fr; }
  .apex-card__row{ flex-direction: column; align-items: stretch; }
  .select-compact{ min-width: unset; }
}

/* =========================
   SCORE UI
========================== */
.scoreShell{ display: grid; gap: 16px; }

.hole-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap: wrap;
}
.hole-nav button{
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.2);
  background:rgba(255,255,255,0.9);
  cursor:pointer;
  font-weight: 700;
}
.hole-nav button:disabled{ opacity: .55; cursor: not-allowed; }

.holeInfo{
  display:grid;
  justify-items:center;
  gap:2px;
  min-width: 180px;
}
#holeLabel{ font-weight: 900; letter-spacing: .2px; }
#parLabel{
  font-size: 0.92em;
  color: rgba(0,0,0,0.62);
  font-weight: 800;
  margin-top: -2px;
}


/* Mode de jeu (ligne 1 au-dessus du trou) */
.mode-label{
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: .15rem;
}

/* Sous-format Las Vegas (Classique / Scramble) */
.lasvegas-formats{
  display:none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(15,27,18,0.10);
  gap: 8px;
}
.mode-option:has(input[name="scoringMode"][value="lasvegas"]:checked) .lasvegas-formats{
  display:grid;
}
.lasvegas-formats .pill-group{
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Las Vegas — sélecteurs à points */
.dot-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dotOpt{
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,27,18,0.10);
  background: rgba(255,255,255,0.16);
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.dotOpt input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(15,27,18,0.28);
  margin-top: 2px;
  flex: 0 0 auto;
  position: relative;
}
.dotText{ display: grid; gap: 2px; }
.dotTitle{ font-weight: 900; color: rgba(15,27,18,0.86); }
.dotText small{ font-size: 12px; color: rgba(15,27,18,0.62); }
.dotOpt:has(input:checked){
  background: rgba(21,101,192,0.14);
  border-color: rgba(21,101,192,0.35);
  box-shadow: 0 0 0 3px var(--ring);
}
.dotOpt:has(input:checked) .dot{
  border-color: rgba(21,101,192,0.65);
}
.dotOpt:has(input:checked) .dot::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius: 999px;
  background: rgba(21,101,192,0.85);
}
.dotOpt:active{ transform: scale(0.99); }

@media (max-width: 860px){
  .dot-group{ grid-template-columns: 1fr; }
}



/* Message d'aide */
.hole-lock-msg{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  text-align: center;
  display: none;
}
.hole-lock-msg.show{ display:block; }
.hole-lock-msg.is-warn{
  border: 1px solid rgba(201,48,44,0.35);
  background: rgba(201,48,44,0.12);
  color: #8d1f1f;
}
.hole-lock-msg.is-ok{
  border: 1px solid rgba(67,160,71,0.35);
  background: rgba(67,160,71,0.12);
  color: #1f5e25;
}

/* Leader highlight */
.player-row.is-leader{
  border-color: rgba(67,160,71,0.45);
  box-shadow: 0 0 0 3px rgba(67,160,71,0.18);
}
.leader-badge{
  margin-left: 8px;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(67,160,71,0.16);
  border: 1px solid rgba(67,160,71,0.28);
  color: rgba(15,27,18,0.78);
  white-space: nowrap;
}

.away-badge{
  background: rgba(21,101,192,0.14);
  border-color: rgba(21,101,192,0.28);
}

/* =========================
   ✅ FIX ALIGNEMENT LIGNE JOUEUR
========================== */
/* Ligne joueur : Nom | Centre (boutons + résultat) | Total */
.player-row{
  display: grid;
  grid-template-columns: 220px 1fr 150px; /* Nom | Centre | Total */
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.14);
}

/* Nom */
.pnameWrap{ display:flex; align-items:center; gap:10px; }

/* Centre (boutons + résultat) */
.pCluster{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pControls{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Résultat collé au + */
.pCluster .resultPill{ margin-left: 2px; }

/* Total à droite */
.pTotal{ justify-self: end; }

@media (max-width: 720px){
  .player-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pCluster{ justify-self: start; }
  .pTotal{ justify-self: start; }
}

/* Centre (boutons + résultat) */
.pCluster{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pControls{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Résultat collé au + */
.pCluster .resultPill{ margin-left: 2px; }

/* Total à droite */
.pTotal{ justify-self: end; }

/* Responsive: sur mobile on empile proprement */
@media (max-width: 720px){
  .player-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pHole{ justify-self: start; }
  .pCluster{ justify-self: start; }
  .pTotal{ justify-self: start; }
}


/* =========================
   Las Vegas Scramble (coup par coup) — UI
========================== */
.scrambleMeta{
  margin-top: 2px;
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 900;
  opacity: .74;
}
.scrambleRow{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.scrambleTag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.22);
  white-space: nowrap;
}
.scrambleBtn{
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.86);
  font-weight: 900;
  cursor: pointer;
}
.scrambleBtn:disabled{ opacity:.45; cursor:not-allowed; }
.scrambleBtn.is-on{
  border-color: rgba(67,160,71,0.45);
  background: rgba(67,160,71,0.16);
}
.scrambleHistory{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.scrambleHistPill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.18);
  font-size: 12px;
  font-weight: 900;
  opacity: .9;
}
.scrambleHistPill b{ font-variant-numeric: tabular-nums; }


/* =========================
   Scramble — layout une ligne
========================== */
.scrambleCluster{ flex-wrap: wrap; justify-content: center; gap: 10px; }
.scrambleInline{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
}
.scrambleHistInline{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 360px;
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
.scrambleHistInline .scrambleHistPill{ flex: 0 0 auto; }

/* =========================
   PODIUM OVERLAY
========================= */
.podiumOverlay{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(8, 14, 10, 0.62);
  backdrop-filter: blur(10px);
  z-index: 9999;
}
.podiumOverlay.is-open{ display: grid; }

.podiumCard{
  width: min(720px, 100%);
  border-radius: 22px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  animation: podiumCardIn 520ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes podiumCardIn{
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

.podiumTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.podiumTitle{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.95);
  font-size: 18px;
}
.podiumClose{
  border: 0;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.podiumClose:hover{ background: rgba(255,255,255,0.18); }

.podiumSub{
  padding: 10px 16px 0 16px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}
/* history modal subtitle hidden */
#historyModalSubtitle{ display:none; }

/* ✅ on cache l'ancien sous-titre "Joueurs" (legacy) */
#podiumSubtitle{ display:none; }
/* ✅ titre de victoire centré au-dessus du gagnant */
.podiumWinnerTitle{
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.94);
  font-size: 16px;
  margin-top: 2px;
  margin-bottom: 2px;
}
/* on n'utilise plus cette ligne en haut */
#podiumVictory{ display:none; }

.podiumWrap{
  padding: 16px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1.15fr 1fr; /* aligne le titre victoire sur la colonne du gagnant */
}

.podiumGrid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr; /* vrai podium : centre légèrement plus large */
  gap: 12px;
  align-items: end;
}

/* Placement “vrai podium” : 2e à gauche, 1er au centre, 3e à droite */
.podStep.pos-1{ grid-column: 2; }
.podStep.pos-2{ grid-column: 1; }
.podStep.pos-3{ grid-column: 3; }

@media (max-width: 640px){
  .podiumGrid{ grid-template-columns: 1fr; }
  .podStep.pos-1, .podStep.pos-2, .podStep.pos-3{ grid-column: auto; }
}

/* podium steps */
.podStep{
  position: relative;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  overflow: hidden;

  /* ✅ centre tout le contenu dans la marche */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;

  transform: translateY(22px);
  opacity: 0;
}
.podStep .rank{
  opacity:.9;

  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: rgba(255,255,255,0.96);
}
.podStep .score{
  margin-top: 0;
display:inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  width: fit-content;

  margin-left: auto;
  margin-right: auto;
}

.podStep.is-1{
  height: 190px;

  /* ✅ gagnant plus dominant (sans casser l'animation transform) */
  border-color: rgba(255,215,0,0.38);
  box-shadow:
    0 0 0 2px rgba(255,215,0,0.22),
    0 18px 55px rgba(0,0,0,0.22);
}
.podStep.is-2{ height: 160px; }
.podStep.is-3{ height: 140px; }

.podStep.is-1{
  background: linear-gradient(180deg, rgba(255,215,0,0.28), rgba(255,255,255,0.10));
}
.podStep.is-2{
  background: linear-gradient(180deg, rgba(192,192,192,0.22), rgba(255,255,255,0.10));
}
.podStep.is-3{
  background: linear-gradient(180deg, rgba(205,127,50,0.22), rgba(255,255,255,0.10));
}

@keyframes podStepPop {
  0% { transform: translateY(22px) scale(0.98); opacity: 0; }
  70% { transform: translateY(-4px) scale(1.01); opacity: 1; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}
.podStep.animate{ animation: podStepPop 560ms cubic-bezier(.2,.9,.2,1) forwards; }

.podStepGlow{
  position:absolute;
  inset:-60px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.26), transparent 60%);
  opacity: .55;
  transform: rotate(12deg);
  pointer-events:none;
}

/* actions */
.podiumActions{
  padding: 0 16px 16px 16px;
  display:flex;
  justify-content:flex-end;
}
.podiumBtn{
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  background: rgba(34, 134, 74, 0.65);
  border: 1px solid rgba(255,255,255,0.18);
}
.podiumBtn:hover{ background: rgba(34, 134, 74, 0.74); }

/* confettis */
.confettiLayer{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.confetti{
  position:absolute;
  top: -12px;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  opacity: .95;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  to{
    transform: translateY(calc(100vh + 40px)) rotate(520deg);
    opacity: 1;
  }
}



/* =========================
   PODIUM — ENHANCEMENTS
========================= */
.podiumVictory{
  padding: 6px 16px 0 16px;
  color: rgba(255,255,255,0.92);
  font-weight: 950;
  letter-spacing: .2px;
  opacity: .95;
}
.podiumVictory:empty{ display:none; }

.podStep.is-1{
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

/* Glow du gagnant sans écraser l'animation pop */
.podStep.is-1 .podStepGlow{
  animation: winnerGlow 1.5s ease-in-out infinite;
}
@keyframes winnerGlow{
  0%,100%{ opacity: .45; filter: drop-shadow(0 0 0 rgba(255,215,0,0.0)); }
  50%{ opacity: .70; filter: drop-shadow(0 0 16px rgba(255,215,0,0.35)); }
}

.podStep .meta{
  margin-top: 0;
font-size: 12.5px;
  font-weight: 900;
  opacity: .86;
}



.podStep .score.diff--pos{ color: #ffd7d7; border-color: rgba(255,255,255,0.18); }
.podStep .score.diff--neg{ color: #d7ffe4; border-color: rgba(255,255,255,0.18); }
.podStep .score.diff--even{ color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.18); }

.podiumCard.is-finish{
  animation: finishShake 520ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes finishShake{
  0%{ transform: translateY(14px) scale(0.98); }
  35%{ transform: translateY(0) scale(1.01); }
  55%{ transform: translateY(0) scale(1.00) rotate(0.25deg); }
  75%{ transform: translateY(0) scale(1.00) rotate(-0.25deg); }
  100%{ transform: translateY(0) scale(1); }
}


/* =========================
   Las Vegas — Scramble (shot-by-shot) — HUD
========================= */
.scrambleHud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:12px;
  font-weight:950;
  opacity:.78;
}
.scrambleHud .scrambleShot{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.35);
}
.scrambleHistory{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.scrambleHistoryLabel{
  font-size:12px;
  font-weight:950;
  opacity:.72;
  margin-right: 4px;
}
.scrambleHistory .miniChip{
  font-size:12px;
  font-weight:900;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(15,27,18,0.12);
  background: rgba(255,255,255,0.22);
  white-space: nowrap;
}
.scrambleHistory .miniChip strong{ font-weight:950; }


/* === Podium name enhancement === */
.podStep .name{
  font-size: 1.45em;
  font-weight: 900;
  letter-spacing: .6px;
  color: #ffffff;
  text-shadow:
    0 2px 8px rgba(0,0,0,.45),
    0 0 2px rgba(255,255,255,.35);
}

/* Winner emphasis */
.podStep.is-1 .name{
  font-size: 1.7em;
  color: #FFD700;
  text-shadow:
    0 3px 14px rgba(255,215,0,.75),
    0 0 6px rgba(255,255,255,.65);
}


/* === FORCE PODIUM NAME VISIBILITY (V74) === */
#podiumOverlay .podiumGrid .podStep .name{
  font-size: 1.6em !important;
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  color: #ffffff !important;
  text-shadow:
    0 3px 10px rgba(0,0,0,.55),
    0 0 2px rgba(255,255,255,.35) !important;
}

/* Winner emphasis */
#podiumOverlay .podiumGrid .podStep.is-1 .name{
  font-size: 1.85em !important;
  color: #FFD700 !important;
  text-shadow:
    0 4px 16px rgba(255,215,0,.75),
    0 0 6px rgba(255,255,255,.65) !important;
}


/* =========================
   STATS (persistants)
========================== */

/* =========================
   STATS — FILTER
========================== */
.statsFilter{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 260px;
}
.statsFilter__label{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(15,27,18,.72);
  padding-left: 2px;
}

.statsTopBar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  padding: 6px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  margin-bottom: 14px;
}
.statsTopBar__left{ display:flex; flex-direction:column; gap:8px; min-width: 260px; }
.statsTopBar__right{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }

.statsGrid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
  gap: 14px;
}
.statsCard{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}
.statsCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.statsName{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.statsName strong{ font-size: 1.05rem; }
.statsMini{ font-size: .85rem; opacity: .85; }

.statsPills{
  display:flex; flex-wrap:wrap;
  gap:8px;
  margin: 10px 0 2px;
}
.statsPill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: .9rem;
}
.statsPill b{ font-weight: 800; }
.statsPill .muted{ opacity: .85; font-weight: 600; }

.statsSplit{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.statsSplit__title{
  font-weight: 800;
  opacity: .95;
}
.statsList{
  display:flex; flex-direction:column; gap:8px;
  padding-left: 0;
  margin: 0;
}
.statsRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}
.statsRow span{ opacity: .9; }
.statsRow b{ font-weight: 900; }

.statsActions{
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
}
.btnTiny{
  padding: 6px 10px;
  border-radius: 12px;
  font-size: .88rem;
}


/* =========================
   NOUVELLE PARTIE — APERÇU (résumé + illustration + astuce + READY)
========================== */
.apex-preview{
  display:grid;
  gap: 10px;
}
.apex-previewTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.apex-previewTitle{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(15,27,18,0.92);
}
.apex-previewIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
}

.apex-readyBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .3px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.32);
  color: rgba(15,27,18,0.78);
  white-space: nowrap;
}
.apex-readyBadge.is-ready{
  border-color: rgba(67,160,71,0.38);
  background: rgba(67,160,71,0.16);
  color: #1f5e25;
  animation: apexReadyPop 820ms cubic-bezier(.2,.9,.2,1.1) both;
}
@keyframes apexReadyPop{
  0%   { transform: translateY(6px) scale(0.92); opacity: .0; }
  45%  { transform: translateY(0) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1.00); opacity: 1; }
}

.apex-previewBody{
  display:grid;
  gap: 10px;
}

.apex-previewGrid{
  display:grid;
  gap: 10px;
}
.apex-previewLine{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.16);
}
.apex-previewLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.apex-previewEmoji{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
.apex-previewKey{
  font-weight: 950;
  color: rgba(15,27,18,0.86);
  white-space: nowrap;
}
.apex-previewVal{
  font-weight: 850;
  color: rgba(15,27,18,0.72);
  text-align:right;
  flex: 1 1 auto;
  min-width: 0;
}
.apex-previewVal .muted{
  opacity:.72;
  font-weight: 800;
}

.apex-previewTip{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.apex-previewTip strong{ font-weight: 950; }

.apex-previewEmpty{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(15,27,18,0.72);
  font-weight: 700;
}

@media (max-width: 900px){
  .apex-previewLine{ flex-direction: column; }
  .apex-previewVal{ text-align:left; }
}