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

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

html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-height: 100vh !important;
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, sans-serif;
  color: #fff !important;
  background: linear-gradient(180deg, #0f1115 0%, #141821 50%, #0f1115 100%) !important;
  overflow-x: hidden !important;
}

/* very important: don't let app sit inside a weird shrunken layout */
#root,
.app,
.page {
  width: 100%;
  min-height: 100vh;
}

.app-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 60px;
  text-align: center;
}

.hidden {
  display: none;
}

/* =========================
   LOGO
========================= */

.logo {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-top: 32px;
}

.logo span {
  color: #ef4444;
}

/* =========================
   MATCHUP CONTAINER
========================= */

#matchup {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

/* =========================
   ICK BOXES
========================= */

.ick-box {
  width: min(420px, 42vw);
  min-height: 260px;
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 26px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.25;
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  position: relative;
}

.ick-box:hover {
  transform: translateY(-6px) scale(1.02);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 28px 65px rgba(0,0,0,0.45);
}

.ick-box:active {
  transform: translateY(-2px) scale(0.99);
}

.ick-box.winner {
  border: 2px solid #22c55e;
  background: rgba(34,197,94,0.15);
}

.ick-box.loser {
  border: 2px solid #ef4444;
  background: rgba(239,68,68,0.15);
}

/* =========================
   TEXT
========================= */

#left-text,
#right-text {
  font-weight: 500;
  line-height: 1.4;
}

.ick-percent {
  margin-top: 15px;
  font-size: 28px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s;
}

.show-percent .ick-percent {
  opacity: 1;
}

/* =========================
   SESSION DOTS
========================= */

#session-tracker {
  display: flex;
  gap: 12px;
  margin-top: 35px;
  justify-content: center !important;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #475569;
}

.dot.filled-green {
  background: #22c55e;
  border-color: #22c55e;
}

.dot.filled-red {
  background: #ef4444;
  border-color: #ef4444;
}

.dot.filled-gray {
  background: #94a3b8;
  border-color: #94a3b8;
}

/* =========================
   SCOREBOARD
========================= */

#scoreboard {
  margin-top: 40px;
  text-align: center;
}

.score-section {
  margin: 25px 0;
}

.score-text {
  font-size: 26px;
  font-weight: bold;
  margin-top: 10px;
}

.score-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.score-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #475569;
}

.score-dot.filled {
  background: #22c55e;
  border-color: #22c55e;
}

/* =========================
   COMMUNITY BAR
========================= */

.bar-container {
  width: 320px;
  max-width: 100%;
  height: 18px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  margin: 15px auto;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.6s ease;
}

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

button:hover {
  background: #16a34a;
  transform: scale(1.05);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: rgba(255,255,255,0.12);
}

.btn-primary {
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #22c55e;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.btn-primary:hover {
  background: #16a34a;
}

.btn-secondary {
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: inherit;
  text-decoration: none;
  font-weight: 650;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
}

.btn-primary,
.btn-secondary {
  line-height: 1;
}

/* =========================
   TOP LIST PAGE
========================= */

.top-page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 16px;
}

.subtle {
  opacity: 0.75;
  margin-top: 6px;
}

.top-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
}

.rank {
  font-weight: 700;
  opacity: 0.85;
}

.top-text {
  font-weight: 600;
}

.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0.9;
}

.top-actions {
  margin-top: 18px;
}

/* =========================
   SUBMIT / FORMS
========================= */

.submit-ick {
  margin: 24px auto 0;
  max-width: 640px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.submit-ick .muted {
  opacity: 0.8;
  margin-top: 6px;
}

#ick-form,
.submit-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

#ick-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.16);
  color: inherit;
  font-size: 14px;
}

#ick-submit {
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  margin-top: 0;
}

.feedback {
  padding: 0 14px 14px;
  margin-top: 0;
  font-size: 13px;
  opacity: 0.8;
}

/* =========================
   RESULTS
========================= */

.results-card {
  width: min(860px, 92vw);
  margin: 28px auto 0;
  padding: 22px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.results-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.results-label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.75;
}

.results-number {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.results-divider {
  width: 1px;
  height: 90px;
  background: rgba(255,255,255,0.16);
}

.submit-inline {
  width: min(860px, 92vw);
  margin: 26px auto 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
}

.submit-label {
  font-size: 13px;
  opacity: 0.70;
  margin-bottom: 8px;
  font-weight: 600;
}

.submit-details {
  width: min(860px, 92vw);
  margin: 32px auto 0;
  background: transparent;
  border: none;
  padding: 0;
}

.submit-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  font-weight: 650;
  opacity: 0.85;
  user-select: none;
}

.submit-summary::-webkit-details-marker {
  display: none;
}

.arrow-down {
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease, opacity 0.2s ease;
  opacity: 0.7;
}

/* =========================
   PAGE / FOOTER / MODAL
========================= */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
}

.site-footer .footer-link {
  margin: 0 !important;
  padding: 6px 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  cursor: pointer;
}

.site-footer .footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
}

.modal-overlay {
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 0 22px;
}

.modal-card {
  transform: translateY(18px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.modal-overlay.is-open .modal-card {
  transform: translateY(0);
  opacity: 1;
}

/* =========================
   HOME / HISTORY
========================= */

.home-screen,
.history-screen {
  margin-top: 26px;
}

.home-card {
  width: min(860px, 92vw);
  margin: 0 auto;
  padding: 20px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.home-title {
  margin: 0 0 14px;
  font-size: 18px;
  opacity: 0.9;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.home-btn {
  border-radius: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
  text-align: left;
  margin-top: 0;
}

.home-btn:hover {
  background: rgba(255,255,255,0.10);
}

.home-btn.primary {
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.14);
}

.home-btn-title {
  font-weight: 800;
  font-size: 18px;
}

.home-btn-sub {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 13px;
}

.history-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

#history-reset {
  margin-left: auto;
}

.history-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

.history-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.history-when {
  opacity: 0.75;
  font-size: 13px;
}

.history-score {
  font-weight: 900;
}

/* =========================
   ACTIONS
========================= */

.actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

#scoreboard .actions-row > button {
  width: 170px;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-width: 1px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  #root,
  .app,
  .page,
  .app-container {
    width: 100%;
    max-width: 100%;
  }

  .app-container {
    padding: 20px 14px 28px;
  }

  .logo {
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-top: 16px;
  }

  .home-screen,
  .history-screen {
    margin-top: 18px;
  }

  .home-card,
  .results-card,
  .submit-inline,
  .submit-details,
  .top-page {
    width: 100%;
    max-width: 100%;
  }

  .home-card {
    padding: 18px 14px;
  }

  .home-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .home-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-btn {
    width: 100%;
    min-height: 76px;
    padding: 18px 16px;
    border-radius: 16px;
  }

  .home-btn-title {
    font-size: 19px;
  }

  .home-btn-sub {
    font-size: 14px;
  }

  #matchup {
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }

  .ick-box {
    width: 100%;
    max-width: 100%;
    min-height: 220px;
    height: auto;
    padding: 28px 18px;
    border-radius: 18px;
    font-size: 24px;
    line-height: 1.3;
  }

  #left-text,
  #right-text {
    font-size: 24px;
    line-height: 1.3;
  }

  .ick-percent {
    font-size: 30px;
    margin-top: 14px;
  }

  #session-tracker {
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .dot {
    width: 12px;
    height: 12px;
  }

  .results-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 14px;
    border-radius: 16px;
  }

  .results-divider {
    width: 100%;
    height: 1px;
  }

  .results-number {
    font-size: 24px;
  }

  .score-text {
    font-size: 22px;
  }

  .score-dot {
    width: 16px;
    height: 16px;
  }

  .bar-container {
    width: 100%;
    max-width: 320px;
  }

  .top-row {
    grid-template-columns: 56px 1fr;
    gap: 10px;
    padding: 12px;
  }

  .meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .submit-form,
  #ick-form,
  .actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #ick-input,
  #ick-submit,
  .btn-primary,
  .btn-secondary,
  .actions-row button,
  .btn {
    width: 100%;
  }

  #ick-input {
    min-height: 52px;
    font-size: 16px;
    padding: 0 14px;
  }

  #ick-submit,
  .btn-primary,
  .btn-secondary,
  .actions-row button,
  .btn {
    min-height: 56px;
    padding: 16px 18px;
    font-size: 17px;
    border-radius: 14px;
  }

  #scoreboard .actions-row > button {
    width: 100%;
    height: 56px;
  }

  .history-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 14px;
    font-size: 16px;
  }

  .history-header {
    flex-wrap: wrap;
  }

  #history-reset {
    margin-left: 0;
  }

  .footer-inner {
    gap: 18px;
    flex-wrap: wrap;
  }

  .site-footer .footer-link {
    padding: 8px 6px !important;
  }
}

@media (max-width: 420px) {
  .logo {
    font-size: 28px;
  }

  .ick-box {
    min-height: 190px;
    padding: 22px 14px;
    font-size: 21px;
  }

  #left-text,
  #right-text {
    font-size: 21px;
  }

  .results-number {
    font-size: 22px;
  }

  .score-text {
    font-size: 20px;
  }

  .top-row {
    grid-template-columns: 1fr;
  }

  .rank {
    margin-bottom: 4px;
  }

  #ick-submit,
  .btn-primary,
  .btn-secondary,
  .actions-row button,
  .btn {
    min-height: 52px;
    font-size: 16px;
  }
}/* =========================
   GLOBAL
========================= */

body {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Inter, sans-serif;

  display: block !important;
  align-items: initial !important;
  flex-direction: initial !important;

  margin: 0 !important;
  min-height: 100vh !important;

  color: #fff !important;

background:
  linear-gradient(180deg, #0f1115 0%, #141821 50%, #0f1115 100%) !important;

  overflow-x: hidden !important;

}

/* Center your whole app consistently */
.app-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 60px;
  text-align: center;
}

/* Ensure dots are centered even if earlier CSS missed it */
#session-tracker {
  justify-content: center !important;
}


.logo {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-top: 32px;
}

.logo span {
  color: #ef4444; /* red accent */
}


/* =========================
   MATCHUP CONTAINER
========================= */

#matchup {

  display: flex;

  gap: 30px;

  justify-content: center;

  align-items: center;

  margin-top: 30px;

}


/* =========================
   ICK BOXES
========================= */

.ick-box {
  width: min(420px, 42vw);
  height: 260px;

  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 26px;

  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.25;

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

  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  position: relative;
}


/* Hover */

.ick-box:hover {
  transform: translateY(-6px) scale(1.02);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 28px 65px rgba(0,0,0,0.45);
}

.ick-box:active {
  transform: translateY(-2px) scale(0.99);
}


/* Winner */

.ick-box.winner {

  border: 2px solid #22c55e;

  background: rgba(34,197,94,0.15);

}


/* Loser */

.ick-box.loser {

  border: 2px solid #ef4444;

  background: rgba(239,68,68,0.15);

}


/* =========================
   TEXT
========================= */

#left-text,
#right-text {

  font-weight: 500;

  line-height: 1.4;

}


.ick-percent {

  margin-top: 15px;

  font-size: 28px;

  font-weight: bold;

  opacity: 0;

  transition: opacity 0.3s;

}


.show-percent .ick-percent {

  opacity: 1;

}


/* =========================
   SESSION DOTS
========================= */

#session-tracker {

  display: flex;

  gap: 12px;

  margin-top: 35px;

}


.dot {

  width: 14px;

  height: 14px;

  border-radius: 50%;

  border: 2px solid #475569;

}


.dot.filled-green {

  background: #22c55e;

  border-color: #22c55e;

}


.dot.filled-red {

  background: #ef4444;

  border-color: #ef4444;

}

.dot.filled-gray {
  background: #94a3b8;   /* slate-ish */
  border-color: #94a3b8;
}

/* =========================
   SCOREBOARD
========================= */

#scoreboard {

  margin-top: 40px;

  text-align: center;

}


.score-section {

  margin: 25px 0;

}


.score-text {

  font-size: 26px;

  font-weight: bold;

  margin-top: 10px;

}


/* Score dots */

.score-dots {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-top: 10px;

}


.score-dot {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 2px solid #475569;

}


.score-dot.filled {

  background: #22c55e;

  border-color: #22c55e;

}


/* =========================
   COMMUNITY BAR
========================= */

.bar-container {

  width: 320px;

  height: 18px;

  background: rgba(255,255,255,0.1);

  border-radius: 10px;

  margin: 15px auto;

  overflow: hidden;

}


.bar-fill {

  height: 100%;

  width: 0%;

  background: linear-gradient(90deg, #22c55e, #4ade80);

  transition: width 0.6s ease;

}





button:hover {

  background: #16a34a;

  transform: scale(1.05);

}


/* =========================
   UTIL
========================= */

.hidden {

  display: none;

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  #matchup {

    flex-direction: column;

  }

  .ick-box {

    width: 90vw;

    height: 180px;

  }

}

/* ---------- Top list page ---------- */
.top-page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 16px;
}

.subtle {
  opacity: 0.75;
  margin-top: 6px;
}

.top-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
}

.rank {
  font-weight: 700;
  opacity: 0.85;
}

.top-text {
  font-weight: 600;
}

.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0.9;
}

.top-actions {
  margin-top: 18px;
}

/* small button style you can reuse */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,0.12); }

.hidden { display: none; }

.submit-ick {
  margin: 24px auto 0;
  max-width: 640px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.submit-ick .muted {
  opacity: 0.8;
  margin-top: 6px;
}

#ick-form {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

#ick-input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.2);
  color: inherit;
}

.feedback {
  margin-top: 10px;
  opacity: 0.9;
}

/* =========================
   RESULTS REDESIGN
========================= */

.results-card {
  width: min(860px, 92vw);
  margin: 28px auto 0;
  padding: 22px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.results-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.results-label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.75;
}

.results-number {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.results-divider {
  width: 1px;
  height: 90px;
  background: rgba(255,255,255,0.16);
}

/* reuse your existing .score-dots and .score-dot */
.score-dots {
  margin-top: 0; /* tighten */
}



/* Button styles */
.btn-primary {
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #22c55e;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.btn-primary:hover { background: #16a34a; }

.btn-secondary {
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: inherit;
  text-decoration: none;
  font-weight: 650;
}

.btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* Compact submit */

.submit-inline {
  width: min(860px, 92vw);
  margin: 26px auto 0;          /* ✅ further down */
  padding: 10px 14px;            /* ✅ smaller */
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
}

.submit-label {
  font-size: 13px;               /* ✅ smaller */
  opacity: 0.70;
  margin-bottom: 8px;
  font-weight: 600;
}

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

#ick-input {
  height: 40px;                  /* ✅ smaller */
  border-radius: 12px;
  padding: 0 12px;
  font-size: 14px;
}

#ick-submit {
  height: 40px;                  /* ✅ match input */
  padding: 0 16px;
  border-radius: 12px;
}





/* Mobile */
@media (max-width: 700px) {
  .results-card {
    grid-template-columns: 1fr;
  }
  .results-divider {
    width: 100%;
    height: 1px;
  }
  .actions-row {
    flex-direction: column;
  }
  .submit-form {
    flex-direction: column;
  }
  #ick-input {
    width: 100%;
  }
}

.submit-details {
  width: min(860px, 92vw);
  margin: 32px auto 0;

  background: transparent;      /* 👈 remove the box look */
  border: none;                 /* 👈 remove border */
  padding: 0;
}

.submit-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 650;
  opacity: 0.85;
  user-select: none;
}

.submit-summary::-webkit-details-marker { display: none; }



.submit-form {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px 14px;
}

#ick-input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.16);
  color: inherit;
  font-size: 14px;
}

#ick-submit {
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  margin-top: 0; /* overrides your global button margin-top */
}

.feedback {
  padding: 0 14px 14px;
  margin-top: 0;
  font-size: 13px;
  opacity: 0.8;
}

.submit-summary {
  list-style: none;
  cursor: pointer;

  display: flex;
  flex-direction: column;   /* stack text + arrow */
  align-items: center;
  justify-content: center;

  gap: 8px;
  padding: 14px 0;

  font-weight: 650;
  opacity: 0.85;
}

.arrow-down {
  width: 14px;
  height: 14px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);  /* makes a down arrow */
  transition: transform 0.3s ease, opacity 0.2s ease;

  opacity: 0.7;
}

.hidden { display: none; }


.page-content {
  flex: 1; /* pushes footer down */
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1; /* pushes footer to bottom */
}

/* Footer buttons: always reset spacing */
.site-footer .footer-link {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  cursor: pointer;
}

/* give them clickable area + spacing */
.site-footer .footer-link {
  padding: 6px 10px !important;
}

.site-footer .footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px; /* increase if needed */
}


.modal-overlay {
  display: grid;
  align-items: end;          /* push modal card to bottom */
  justify-items: center;
  padding: 0 0 22px;         /* space above bottom */
}

/* start state (when hidden): we’ll use .hidden + animations on open */
.modal-card {
  transform: translateY(18px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* when open */
.modal-overlay.is-open .modal-card {
  transform: translateY(0);
  opacity: 1;
}

.home-screen, .history-screen {
  margin-top: 26px;
}

.home-card {
  width: min(860px, 92vw);
  margin: 0 auto;
  padding: 20px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.home-title {
  margin: 0 0 14px;
  font-size: 18px;
  opacity: 0.9;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.home-btn {
  border-radius: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
  text-align: left;
  margin-top: 0; /* override global button spacing */
}

.home-btn:hover {
  background: rgba(255,255,255,0.10);
}

.home-btn.primary {
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.14);
}

.home-btn-title {
  font-weight: 800;
  font-size: 18px;
}

.home-btn-sub {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 13px;
}

.history-header{
  display:flex;
  align-items:center;
  gap:12px;
}

#history-reset{
  margin-left:auto;
}

.history-footer{
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

.history-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.history-when { opacity: 0.75; font-size: 13px; }
.history-score { font-weight: 900; }




.actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}



.btn-primary,
.btn-secondary {
  line-height: 1;
}

#scoreboard .actions-row > button {
  width: 170px;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-width: 1px; /* force identical border thickness */
}

/* =========================
   Mobile Improvements
========================= */
@media (max-width: 768px) {
  .actions-row button {
    width: 100%;
  }
}

  /* Make cards larger and more touch-friendly */
  .matchup-box {
    padding: 28px 20px;
    font-size: 18px;
    min-height: 120px;
  }

  /* Make main action buttons larger */
  .btn-primary,
  .btn-secondary {
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 10px;
  }

  /* Make history cards bigger */
  .history-row {
    padding: 18px 16px;
    font-size: 16px;
  }

  /* Increase tap spacing */
  .actions-row {
    gap: 14px;
  }

  /* Slightly reduce page side margins so cards feel bigger */
  .home-card {
    width: 95%;
  }