/* style.css */

/* ========== font ========== */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

/* ========== variables ========== */
:root {
  --bg: #121212;
  --bg-2: #0f0f0f;
  --surface: #1e1e1e;
  --surface-2: #2e2e2e;
  --border: #333;
  --text: #e0e0e0;

  --accent: #c62828;
  --accent-hover: #e53935;
  --highlight: #ffeb3b;

  --radius: 6px;
  --radius-lg: 14px;
  --gap: 10px;

  --font: 'Russo One', sans-serif;

  /* card sizing parity */
  --card-w: 96px;
  --card-ratio: 2 / 3;

  /* z layers */
  --z-toast: 50000;
  --z-modal: 60000;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.4;
  background: radial-gradient(1200px 700px at 50% -10%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 60%),
    var(--bg-2);
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font-family: inherit;
  font-size: 1rem;
}

/* ========== utilities ========== */
.hidden {
  display: none !important;
}

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* ========== layout (v5 primary) ========== */
.app-container {
  display: flex;
  flex-direction: column;

  /* OG parity framing */
  min-height: auto;
  max-width: 1380px;
  margin: 18px auto;
  padding: 18px 18px 10px;

  background: rgba(18, 18, 18, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
}

.app-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;

  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  border-radius: 12px;
}

.header-logo {
  height: 78px;
  width: auto;
  margin: 0;
}

.app-header h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.2rem, 5vw, 2rem);
  line-height: 1.2;
}

.main-content {
  width: 100%;
  margin-top: 14px;
  gap: 18px;
}

.deck-area,
.library {
  min-width: 0; /* critical: prevent flex overflow */
  background: rgba(0, 0, 0, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.library {
  overflow: hidden; /* keep grid scroll inside panel */
}

/* Footer (v5) */
.app-footer {
  margin-top: auto;
  padding: var(--gap);
  text-align: center;
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
}

/* ========== components: deck controls + buttons ========== */
.deck-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}

.deck-controls .deck-name-group {
  width: 100%;
  display: block;
}

.deck-name-group input,
#deckName {
  width: 100%;
  max-width: none;
  display: block;

  padding: 12px 14px;
  border-radius: 10px;
  background: #1b1b1b;
  color: #f2f2f2;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

#deckName:focus {
  border-color: rgba(198, 40, 40, 0.9);
  outline: none;
}

.deck-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.deck-btn-group button,
.search-group button,
#applyAdvSearchBtn,
.modal__close {
  padding: 12px 14px;
  border-radius: 10px;

  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.deck-btn-group button {
  width: 100%;
  flex: 1 1 auto;
  font-size: 1.05rem;
}

.deck-btn-group button:hover,
.search-group button:hover,
#applyAdvSearchBtn:hover,
.modal__close:hover {
  background: var(--accent-hover);
}

.deck-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9rem;
}

.deck-stats span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.06);
  min-width: 160px;
}

/* Stats row (pills) */
.deck-stats-row {
  display: flex;
  width: 100%;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.deck-stats-row span {
  flex: 1 1 0;
  min-width: 0;

  text-align: center;
  padding: 12px 22px;
  font-size: 15px;
  border-radius: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== components: deck grid + cards ========== */
.deck-grid-container {
  position: relative;
  margin-top: 0;
}

.deck-grid {
  display: grid;
  gap: 6px;
  margin-top: 6px;

  /* mobile-first */
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  column-gap: 1;
  row-gap: 8px;
}

.deck-slot {
  position: relative;
  aspect-ratio: var(--card-ratio);
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.3s;
}

.deck-slot:hover {
  border-color: var(--accent-hover);
}

.deck-slot.filled {
  border: none;
  background: var(--surface-2);
}

.deck-slot.over {
  outline: 3.5px dashed var(--highlight);
  outline-offset: -2px;
}

.deck-card {
  width: 100%;
  height: 100%;
  cursor: grab;
  transition: transform 0.2s, opacity 0.2s;
}

.deck-card:hover {
  transform: scale(1.05);
}

.deck-card.dragging {
  transform: scale(1.08);
  z-index: 999;
}

.deck-card.fade-out {
  opacity: 0;
  transform: scale(0.7);
}

.deck-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== components: library ========== */
.library h2 {
  margin: 6px 0 10px;
  font-size: 1.5rem;
  text-align: center;
}

.search-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  width: 100%;
  align-items: stretch;
}

.search-group input[type="search"] {
  flex: 1 1 260px;
  min-width: 220px;

  padding: 12px 14px;
  border-radius: 10px;

  background: #1b1b1b;
  color: #f2f2f2;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

#searchBtn,
#toggleAdvSearchBtn {
  flex: 1 1 140px;
  min-width: 140px;
  width: auto;
}

/* Advanced filters (v5 selectors) */
.advanced-panel {
  background: var(--surface);
  padding: var(--gap);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--gap);
}

.advanced-panel fieldset {
  border: none;
  margin-bottom: var(--gap);
}

.advanced-panel legend {
  font-weight: bold;
}

.advanced-panel label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: var(--gap);
}

#applyAdvSearchBtn {
  font-size: 16px;
}

/* Library grid */
.library-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;

  /* mobile-first: max 3 cols */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;

  /* desktop behavior: fills panel height (set in >=900px) */
  max-height: 400px;
  align-content: start;
  padding-right: 10px;
}

.library-card {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  background: var(--surface-2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.library-card:hover {
  transform: scale(1.05);
}

.library-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== components: modals ========== */
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-modal) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none !important;
}

.modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65);
}

.modal__panel {
  position: relative !important;
  z-index: calc(var(--z-modal) + 1) !important;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: auto;

  background: rgba(18, 18, 18, 0.98);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.65);
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 10px;
}

#cardPreviewImg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal__actions button {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

#confirmCancel {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#confirmOk {
  background: var(--accent);
  color: #fff;
}

#confirmOk:hover {
  background: var(--accent-hover);
}

/* ========== components: toasts ========== */
#toastHost.toast-host {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: var(--z-toast) !important;

  pointer-events: none;
  display: grid;
  gap: 10px;
  max-width: min(380px, 92vw);
}

#toastHost .toast {
  pointer-events: auto;
}

/* if toast items are simple divs */
#toastHost > div {
  pointer-events: auto;
  background: rgba(20, 20, 20, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.08);
  color: #f2f2f2;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

/* ========== components: hand ========== */
.hand-simulator {
  margin-top: 15px;
  text-align: center;
}

/* hand cards layout (legacy container) */
#handCards {
  display: inline-grid;
  grid-template-columns: repeat(7, var(--card-w));
  gap: 10px;
  padding: 10px 0;
  justify-items: center;
}

/* card box */
.hand-card {
  width: var(--card-w);
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
}

.hand-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hover like deck cards */
.hand-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgb(255, 255, 255);
}

/* while discarding, disable hover */
.hand-card.discarding:hover {
  transform: none;
}

/* draw/discard animations */
@keyframes drawCard {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes discardCard {
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
}

.hand-card.discarding {
  animation: discardCard 0.25s ease-in forwards;
}

/* hand row (actual container if present) */
#handArea.hand-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding: 10px 0 !important;
}

#handArea .hand-card {
  flex: 0 0 var(--card-w) !important;
  width: var(--card-w) !important;
}

#handArea .hand-card img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ========== components: deck picker (lost/win zone) ========== */
.deck-picker {
  background: var(--surface);
  border: 2px solid var(--border);
  padding: 10px;
  margin-top: 10px;
  border-radius: var(--radius);
}

/* force one horizontal scroll row */
.deck-picker-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  gap: 10px;
  justify-content: flex-start;
  align-items: center;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 10px 6px;
  max-height: none;
}

.deck-picker-card {
  aspect-ratio: var(--card-ratio);
  cursor: pointer;
  transition: transform 0.15s ease;
  flex: 0 0 var(--card-w);
}

.deck-picker-card:hover {
  transform: scale(1.05);
}

.deck-picker-grid .deck-picker-card,
.deck-picker-grid img {
  width: var(--card-w);
  height: auto;
}

.deck-picker-grid img {
  aspect-ratio: var(--card-ratio);
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* ========== states: disabled buttons ========== */
#viewDiscardBtn,
#viewWinBtn,
#searchDeckBtn {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ========== themed scrollbars ========== */
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #111;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
  border: 2px solid #111;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff3b3b;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #111;
}

/* ========== legacy compatibility (no html changes) ========== */
/* keep these selectors in case older markup exists */
.container {
  width: 100%;
  margin: 0 auto;
}

header,
footer,
main {
  color: inherit;
}

header {
  background-color: var(--surface);
  padding: 20px;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

header h1 {
  flex: 1;
  text-align: center;
}

main {
  max-width: 1400px;
  margin: 20px auto;
  gap: 20px;
}

.divider {
  width: 2px;
  background-color: #444;
  margin-top: 30px;
  margin-bottom: 30px;
}

.deck-controls-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.deck-controls-area input[type="text"] {
  padding: 5px 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
}

.deck-controls-area button {
  padding: 5px 10px;
  font-size: 16px;
  background-color: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.deck-controls-area button:hover {
  background-color: var(--accent-hover);
}

#deckHeader {
  text-align: center;
  margin-bottom: 5px;
  font-size: 1.5em;
}

.library-area,
.deck-area {
  width: 100%;
}

.library-area h2 {
  text-align: center;
  margin-bottom: 10px;
}

.search-bar {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}

.search-bar input[type="text"] {
  padding: 5px 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
}

.search-bar button {
  padding: 5px 10px;
  font-size: 16px;
  background-color: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-bar button:hover {
  background-color: var(--accent-hover);
}

.adv-search {
  background-color: var(--surface);
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
}

.adv-search h3 {
  margin-bottom: 10px;
  text-align: center;
}

.adv-search .checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}

/* ========== media: desktop primary (>=900px) ========== */
@media (min-width: 900px) {
  .app-header h1 {
    font-size: clamp(1.8rem, 3.6vw, 3rem);
  }

  .main-content {
    display: flex;
    align-items: stretch;
  }

  .deck-area {
    flex: 0 0 58%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .library {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .deck-btn-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .deck-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .library-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;

    /* fills panel height; scroll inside panel */
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    align-content: start;
  }

  /* keep cards sizing consistent */
  .library-card {
    width: 100%;
    aspect-ratio: var(--card-ratio);
  }
}

/* ========== media: tablet legacy (<=768px) ========== */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }

  header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  header h1 {
    font-size: 1.5em;
    text-align: center;
  }

  main {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .deck-area,
  .library-area {
    width: 100%;
    padding: 10px;
  }

  .deck-slot,
  .library-card {
    aspect-ratio: var(--card-ratio);
  }

  button {
    padding: 8px 12px;
    font-size: 1em;
  }

  .deck-controls-area {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .deck-buttons-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: center;
  }
}

/* ========== media: mobile tweaks (<=600px) ========== */
@media (max-width: 600px) {
  /* stats become 2x2 grid */
  .deck-stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }

  .deck-stats-row span {
    width: 100%;
    text-align: center;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* library shows max 3 columns */
  .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* buttons full width */
  .deck-btn-group button {
    width: 100%;
  }

  /* hide last 3 buttons on mobile (keep existing behavior) */
  .hand-simulator .deck-btn-group button:nth-child(n + 4) {
    display: none !important;
  }
}

/* ========== tiny header tweak (<=500px) ========== */
@media (max-width: 500px) {
  .app-header h1 {
    font-size: 1rem;
  }
}

@media (min-width: 900px){
  /* deck cards define the visual cutoff */
  .deck-grid{
    max-height: 760px; /* adjust until it matches your deck cards end */
    overflow-y: auto;
  }

  /* library must stop at the same height */
  .library-grid{
    max-height: 735px; /* SAME VALUE */
    overflow-y: auto;
  }
}

/* ========== mobile deck fit fix ========== */
@media (max-width: 600px) {
  .deck-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(5, 1fr); /* fewer columns so it fits */
  }

  .deck-area {
    overflow-x: hidden; /* prevent side scroll */
  }
}

/* ========== toasts: old look + bottom-right + animation ========== */
#toastHost.toast-host {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;   /* bottom-right */
  top: auto !important;
  z-index: var(--z-toast) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  max-width: min(360px, calc(100vw - 32px)) !important;
  pointer-events: none;
}

#toastHost > div,
#toastHost .toast {
  pointer-events: auto;

  /* old toast vibe (tighter + less puffy) */
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: rgba(18, 18, 18, 0.92) !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.65) !important;

  /* prevent weird extra height */
  line-height: 1.25 !important;
}

/* text sizing like old */
#toastHost > div h3,
#toastHost .toast h3 {
  margin: 0 0 6px 0 !important;
  font-size: 1.15rem !important;
}

#toastHost > div p,
#toastHost .toast p {
  margin: 0 !important;
  font-size: 1rem !important;
  opacity: 0.95 !important;
}

/* slide in from bottom-right */
@keyframes toastInBR {
  from {
    opacity: 0;
    transform: translateY(12px) translateX(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
}

#toastHost > div,
#toastHost .toast {
  animation: toastInBR 160ms ease-out;
}

/* ========== animations: click/confirm/filter/draw polish ========== */

/* ---- global motion tokens ---- */
:root {
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-snap: cubic-bezier(.2,1,.2,1);
  --dur-fast: 140ms;
  --dur-med: 220ms;
  --dur-slow: 320ms;
}

/* ---- buttons feel better everywhere ---- */
.deck-btn-group button,
.search-group button,
#applyAdvSearchBtn,
.modal__actions button {
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.deck-btn-group button:active,
.search-group button:active,
#applyAdvSearchBtn:active,
.modal__actions button:active {
  transform: translateY(1px) scale(0.98);
}

/* ---- library card click “tap” feedback ---- */
.library-card {
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

.library-card:active {
  transform: scale(0.97);
  filter: brightness(1.08);
}

/* optional: make hover feel a bit more premium */
.library-card:hover {
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

/* drag/drop highlight nicer */
.deck-slot.over {
  transition: outline var(--dur-fast) var(--ease-out);
}

/* ---- confirm modal smooth open/close (no js change) ---- */
/* your js toggles .hidden on .modal; display:none can't animate,
   so we override ONLY for modals to use opacity/visibility instead. */
.modal {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-snap);
}

.modal__backdrop {
  opacity: 1;
  transition: opacity var(--dur-med) var(--ease-out);
}

.modal__panel {
  transform: translateY(0) scale(1);
  transition: transform var(--dur-med) var(--ease-snap);
}

/* override .modal.hidden so it can animate */
.modal.hidden {
  display: flex !important;      /* override the global .hidden */
  opacity: 0 !important;
  transform: translateY(10px) scale(0.98) !important;
  pointer-events: none !important;
}

.modal.hidden .modal__backdrop {
  opacity: 0 !important;
}

.modal.hidden .modal__panel {
  transform: translateY(10px) scale(0.98) !important;
}

/* ---- filter panel smooth open/close (assumes you toggle .hidden) ---- */
/* same trick: override .advanced-panel.hidden to animate instead of display:none */
.advanced-panel {
  transform-origin: top;
  transition:
    max-height var(--dur-slow) var(--ease-out),
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-snap);
  max-height: 520px; /* enough room for your controls */
  opacity: 1;
  transform: translateY(0) scaleY(1);
  overflow: hidden;
}

/* animated hidden state */
.advanced-panel.hidden {
  display: block !important;     /* override global .hidden */
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) scaleY(0.98) !important;
  pointer-events: none !important;
}

/* ---- draw buttons: satisfy press + tiny glow ---- */
@keyframes pulseRed {
  0%   { box-shadow: 0 0 0 rgba(229,57,53,0); }
  60%  { box-shadow: 0 0 0 6px rgba(229,57,53,0.12); }
  100% { box-shadow: 0 0 0 rgba(229,57,53,0); }
}

#startDrawBtn:active,
#drawOneBtn:active,
#resetDrawBtn:active {
  animation: pulseRed 220ms var(--ease-out);
}

/* if your ids differ, you can add them here too without touching html/js:
   #startDrawBtn, #drawPlusOneBtn, #resetDrawBtn, etc. */

   /* ========== fix: filter panel not fully visible ========== */
.advanced-panel {
  /* allow full content; scroll inside panel if too tall */
  max-height: min(70vh, 680px) !important;
  overflow: auto !important;
}

/* make sure the library layout can actually hold it nicely */
.library {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.library-grid {
  flex: 1 1 auto;
  min-height: 0;
}

/* ========== hand simulation: draw animations ========== */

/* animate hand cards when they appear (works when JS adds new .hand-card nodes) */
.hand-card {
  animation: drawCard 220ms ease-out;
}

/* do not re-animate discarding ones (you already animate discardCard) */
.hand-card.discarding {
  animation: discardCard 0.25s ease-in forwards;
}

/* stronger button feedback (covers most common ids + your deck-btn-group) */
.hand-simulator button {
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}

.hand-simulator button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 0 6px rgba(229,57,53,0.12);
}

/* ========== floating fab (from scratch) ========== */
.fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999999;
}

.fab__main,
.fab__btn{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(18,18,18,0.92);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 50px rgba(0,0,0,0.65);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms cubic-bezier(.2,.8,.2,1);
}

.fab__main:hover,
.fab__btn:hover{
  transform: translateY(-1px);
  background: rgba(26,26,26,0.96);
}

.fab__main:active,
.fab__btn:active{
  transform: translateY(1px) scale(0.98);
}

.fab__menu{
  position: absolute;
  right: 0;
  bottom: 64px;
  display: grid;
  gap: 10px;

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,1,.2,1);
}

.fab.is-open .fab__menu{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ========== theme support ========== */
:root[data-theme="light"]{
  --bg: #f2f2f2;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --border: #d8d8d8;
  --text: #121212;

  --accent: #c62828;
  --accent-hover: #e53935;
  --highlight: #ffeb3b;
}

/* ========== light mode: fix hardcoded dark surfaces ========== */

/* add a couple extra theme tokens */
:root {
  --frame-bg: rgba(18, 18, 18, 0.88);
  --panel-bg: rgba(0, 0, 0, 0.18);
  --header-bg: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  --frame-border: rgba(255,255,255,0.06);
  --panel-border: rgba(255,255,255,0.06);
}

/* use tokens instead of hardcoded dark rgba */
.app-container {
  background: var(--frame-bg) !important;
  border-color: var(--frame-border) !important;
}

.app-header {
  background: var(--header-bg) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

.deck-area,
.library {
  background: var(--panel-bg) !important;
  border-color: var(--panel-border) !important;
}

/* modal uses dark hardcoding too */
.modal__panel {
  background: var(--frame-bg) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* inputs in light mode were still dark-feeling */
#deckName,
.deck-name-group input,
.search-group input[type="search"] {
  background: color-mix(in srgb, var(--surface) 80%, transparent) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--border) 70%, transparent) !important;
}

/* ========== define light theme colors properly ========== */
:root[data-theme="light"] {
  /* keep your red accent */
  --bg: #f4f5f7;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f2f4;
  --border: #d7d9de;
  --text: #101114;

  /* new light-friendly surfaces */
  --frame-bg: rgba(255, 255, 255, 0.92);
  --panel-bg: rgba(255, 255, 255, 0.86);
  --header-bg: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0));
  --frame-border: rgba(0,0,0,0.08);
  --panel-border: rgba(0,0,0,0.08);
}

/* light mode body background nicer */
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(0,0,0,0.08), rgba(0,0,0,0) 60%),
    var(--bg);
}

/* deck slots should not look “dead” in light mode */
:root[data-theme="light"] .deck-slot {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--border) 80%, #0000);
}

/* scrollbars not screaming red on light (optional) */
:root[data-theme="light"] ::-webkit-scrollbar-track { background: #e9eaee; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { border-color: #e9eaee; }

/* ========== light mode scrollbar fix ========== */
:root[data-theme="light"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:root[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f0f1f3;   /* light track */
  border-radius: 10px;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c62828;   /* keep your red accent */
  border-radius: 10px;
  border: 2px solid #f0f1f3;
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #e53935;
}

/* firefox */
:root[data-theme="light"] * {
  scrollbar-color: #c62828 #f0f1f3;
}

/* ========== light mode: floating fab color fix ========== */
:root[data-theme="light"] .fab__main,
:root[data-theme="light"] .fab__btn {
  background: #ffffff !important;
  color: #101114 !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important;
}

:root[data-theme="light"] .fab__main:hover,
:root[data-theme="light"] .fab__btn:hover {
  background: #f2f3f6 !important;
}

/* ========== light mode palette ========== */
:root[data-theme="light"]{
  --bg-main: #f3f4f6;      /* page background */
  --bg-card: #ffffff;     /* main panels */
  --bg-soft: #eef0f3;     /* soft grey blocks */
  --border-soft: #d9dde3; /* outlines */
  --text-main: #0f172a;
  --text-muted: #64748b;
}

/* page background */
:root[data-theme="light"] body{
  background: var(--bg-main);
}

/* main containers */
:root[data-theme="light"] .app-container,
:root[data-theme="light"] .deck-area,
:root[data-theme="light"] .library{
  background: var(--bg-card);
  border-color: var(--border-soft);
}

/* soft grey sections (stats, filters, search area) */
:root[data-theme="light"] 
.deck-stats-row span,
:root[data-theme="light"] 
.advanced-panel,
:root[data-theme="light"] 
.search-group{
  background: var(--bg-soft);
  border-color: var(--border-soft);
}

:root[data-theme="light"] input,
:root[data-theme="light"] select{
  background: #f8fafc;
  border-color: var(--border-soft);
  color: var(--text-main);
}

:root[data-theme="light"] .stat-pill{
  background: #eef0f3;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2{
  color: var(--text-main);
}

:root[data-theme="light"] .muted{
  color: var(--text-muted);
}

/* ========== move settings icon to bottom-left + make bigger ========== */
.fab{
  right: auto !important;
  left: 16px !important;   /* bottom LEFT now */
  bottom: 16px !important;
}

/* slightly bigger buttons */
.fab__main,
.fab__btn{
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  font-size: 1.3rem !important; /* icon bigger */
}

/* ========== toast vs fab: layering + light mode colors ========== */

/* make sure toast is always above the floating settings button */
#toastHost.toast-host {
  z-index: 9999999 !important;
}

/* (optional) keep fab below toast always */
.fab {
  z-index: 9999000 !important;
}

/* light mode toast styling */
:root[data-theme="light"] #toastHost > div,
:root[data-theme="light"] #toastHost .toast {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #101114 !important;
  border: 2px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18) !important;
}

/* if your toast has title/body elements */
:root[data-theme="light"] #toastHost h3,
:root[data-theme="light"] #toastHost p {
  color: #101114 !important;
}

/* ========== fix: stats inner label shouldn't become a pill ========== */
.deck-stats-row > span {
  /* keep your nice grey chip for the whole stat (outer) */
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 18px;
}

.deck-stats-row > span > span {
  /* remove pill styling from the translated label (inner) */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* light mode version */
:root[data-theme="light"] .deck-stats-row > span {
  background: #f1f2f4;
  border-color: #d7d9de;
  color: #101114;
}