/* ============================================================
  Umacarrats — stylesheet
  Extraído de <style> inline + estilos inline del HTML.
   ============================================================ */

/* ---------- Variables & Reset ---------- */
:root {
  --bg-0: #0a0b14;
  --bg-1: #0f1120;
  --bg-2: #161829;
  --bg-glass: rgba(255,255,255,0.035);
  --bg-glass-hover: rgba(255,255,255,0.055);
  --border: rgba(255,255,255,0.08);
  --border-accent: rgba(212,175,100,0.3);
  --gold: #d4af64;
  --gold-light: #f0d080;
  --pink: #f0a0c0;
  --pink-deep: #c06080;
  --teal: #60c0b0;
  --red-warn: #e05050;
  --text-0: #f0eeea;
  --text-1: #b0aaa0;
  --text-2: #706860;
  --mono: 'JetBrains Mono', monospace;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Noto Sans JP', sans-serif;
  --shadow: 0 8px 40px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 30px rgba(212,175,100,0.15);
}

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

html {
  scroll-behavior: smooth;
  /* Pair with body's overflow-x:hidden so the viewport itself can't
     scroll horizontally — without this, some mobile browsers ignore
     the body rule when an inner element overflows. */
  overflow-x: hidden;
}

body {
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- Background ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(96,64,120,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(48,64,100,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(20,22,40,0.5) 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Sakura petals ---------- */
.sakura-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.petal {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(240,160,192,0.5), transparent);
  border-radius: 50% 0;
  animation: fall linear infinite;
  opacity: 0;
}

@keyframes fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ---------- Layout ---------- */
.container {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ---------- Header ---------- */
header {
  text-align: center;
  padding: 48px 0 32px;
}

.logo-kana {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 8px;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 300;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 40%, var(--pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.subtitle {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.3em;
  margin-top: 10px;
}

.divider {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 20px auto 0;
}

/* ---------- Section labels ---------- */
.section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-accent), transparent);
}

/* ---------- Glass card ---------- */
.card {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s, background 0.3s;
}

.card:hover {
  background: var(--bg-glass-hover);
  border-color: rgba(212,175,100,0.15);
}

/* Variant: card usado como contenedor de la sección Goals */
.card-goals {
  padding: 20px 24px;
}

/* ---------- Dashboard ---------- */
.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

@media (max-width: 680px) {
  .dashboard { grid-template-columns: 1fr; }
}

.metric-card {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}

.metric-card.accent::before {
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  opacity: 0.7;
}

.metric-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
}

.metric-value {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1;
  transition: color 0.3s;
}

.metric-card.accent .metric-value { color: var(--pink); }
.metric-card.teal   .metric-value { color: var(--teal); }

.metric-sub {
  font-size: 11px;
  color: var(--text-2);
}

/* ---------- Inputs base ---------- */
input[type="number"], select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-0);
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

input[type="number"]:focus, select:focus {
  border-color: rgba(212,175,100,0.5);
  background: rgba(212,175,100,0.06);
}

select option { background: var(--bg-2); }

/* Carat input (big) */
.carat-input {
  font-size: 32px !important;
  font-weight: 500;
  color: var(--gold-light) !important;
  padding: 4px 2px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-accent) !important;
  border-radius: 0 !important;
  width: 100% !important;
  transition: border-color 0.2s;
}

.carat-input:focus {
  border-bottom-color: var(--gold) !important;
  background: transparent !important;
}

/* ---------- Production form ---------- */
.prod-section { margin-bottom: 32px; }

.prod-form {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

@media (max-width: 580px) { .prod-form { grid-template-columns: 1fr; } }

.form-group label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Small gold/mono hint accompanying a toggle label */
.toggle-hint {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
}

/* Toggle */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}

.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid var(--border);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  top: 2px; left: 2px;
  background: var(--text-2);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle input:checked + .toggle-slider { background: rgba(212,175,100,0.2); border-color: var(--gold); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--gold); }

.toggle-label {
  font-size: 13px;
  color: var(--text-1);
}

/* Production result */
.prod-result {
  grid-column: 1 / -1;
  padding: 16px 20px;
  background: rgba(212,175,100,0.05);
  border: 1px solid rgba(212,175,100,0.15);
  border-radius: 8px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.prod-result-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
}

.prod-result-value {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--gold-light);
}

.prod-result-breakdown {
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--mono);
}

/* ---------- Banners ---------- */
.banner-card {
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.banner-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow), var(--shadow-gold);
}

.banner-inner {
  display: grid;
  grid-template-columns: 160px 1fr;
  min-height: 200px;
}

@media (max-width: 640px) { .banner-inner { grid-template-columns: 1fr; } }

.banner-img {
  position: relative;
  overflow: hidden;
  min-height: 160px;
}

.banner-img-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.8) brightness(0.7);
  transition: filter 0.3s;
}

.banner-card:hover .banner-img-bg { filter: saturate(1) brightness(0.85); }

.banner-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 60%);
}

.banner-type-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 4px;
}

.badge-char    { background: rgba(240,160,192,0.25); color: var(--pink); border: 1px solid rgba(240,160,192,0.3); }
.badge-support { background: rgba(96,192,176,0.2);   color: var(--teal); border: 1px solid rgba(96,192,176,0.3); }

.banner-info {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.banner-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.banner-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-0);
  line-height: 1.2;
}

.banner-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.2em;
  padding-top: 4px;
}

.banner-resources {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.res-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.res-pill-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
}

.res-pill-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--teal);
}

.res-pill-value.warn { color: var(--red-warn); }
.res-pill-value.ok   { color: var(--teal); }

.banner-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

@media (max-width: 480px) { .banner-controls { grid-template-columns: 1fr; } }

.ctrl-group label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.ctrl-group input {
  font-size: 16px !important;
  padding: 7px 10px;
}

/* ---------- Probability ---------- */
.prob-grid {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}

.prob-slot {
  flex: 1;
  min-width: 80px;
  padding: 10px 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  transition: border-color 0.3s, background 0.3s;
}

.prob-slot.full {
  border-color: rgba(212,175,100,0.4);
  background: rgba(212,175,100,0.06);
}

.prob-slot-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  text-align: center;
}

.prob-slot-val {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1);
  text-align: center;
  transition: color 0.3s;
}

.prob-slot.full .prob-slot-val { color: var(--gold); }

.prob-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}

.prob-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width 0.4s ease;
}

.prob-slot.full .prob-bar-fill { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

/* ---------- Warnings & notes ---------- */
.banner-warning {
  grid-column: 1 / -1;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(224,80,80,0.08);
  border: 1px solid rgba(224,80,80,0.25);
  color: var(--red-warn);
  font-family: var(--mono);
  font-size: 11px;
  display: none;
  align-items: center;
  gap: 8px;
}

.banner-warning.visible { display: flex; }
.banner-warning-icon { font-size: 14px; }

.prob-note {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.1em;
  text-align: right;
}

.banner-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,175,100,0.2); border-radius: 3px; }

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card, .banner-card { animation: fadeUp 0.5s ease both; }

.banner-card:nth-child(1) { animation-delay: 0.05s; }
.banner-card:nth-child(2) { animation-delay: 0.12s; }
.banner-card:nth-child(3) { animation-delay: 0.19s; }
.banner-card:nth-child(4) { animation-delay: 0.26s; }

.banner-full-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) { .banner-full-controls { grid-template-columns: 1fr; } }

/* ---------- Pity bar ---------- */
.pity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
}

.pity-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}

.pity-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--pink));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ---------- Goal cards ---------- */
.goal-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-glass);
  transition: border-color 0.3s;
}
.goal-card:hover { border-color: rgba(212,175,100,0.2); }

.goal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.goal-type-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.goal-type-card {
  background: rgba(96,192,176,0.12);
  color: var(--teal);
  border: 1px solid rgba(96,192,176,0.3);
}
.goal-type-char {
  background: rgba(240,160,192,0.12);
  color: var(--pink);
  border: 1px solid rgba(240,160,192,0.3);
}

.goal-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  flex: 1;
}

.goal-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.2em;
  flex-shrink: 0;
}

.goal-remove {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.goal-remove:hover { color: var(--red-warn); background: rgba(224,80,80,0.1); }

.goal-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 14px 16px 14px;
  align-items: start;
}
@media (max-width: 680px) { .goal-body { grid-template-columns: 1fr; } }

.goal-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.goal-pity-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.goal-pity-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
}

/* Small inline label reused inside the pity-section body */
.goal-pity-label-inline {
  margin-bottom: 8px;
}

.goal-pity-counter {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  margin-bottom: 4px;
}

.goal-expected-copies {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--teal);
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.goal-range-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  margin-top: 10px;
  letter-spacing: 0.12em;
  opacity: 0.85;
  text-align: right;
}

.goal-prob-display {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.4s;
}
.goal-prob-display.guaranteed { color: var(--gold); }
.goal-prob-display.high       { color: var(--teal); }
.goal-prob-display.mid        { color: var(--text-1); }
.goal-prob-display.low        { color: var(--red-warn); }

.goal-prob-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.1em;
}

.goal-pity-track {
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}

.goal-pity-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width 0.4s ease;
}

.goal-pity-fill.full { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

/* ---------- Copy probability slots inside goals ---------- */
.goal-copies-grid {
  display: flex;
  gap: 6px;
}

.goal-copy-slot {
  flex: 1;
  padding: 8px 6px 6px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: border-color 0.3s, background 0.3s;
  min-width: 0;
}

.goal-copy-slot.copy-full {
  border-color: rgba(212,175,100,0.4);
  background: rgba(212,175,100,0.07);
}

.copy-slot-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-2);
  letter-spacing: 0.1em;
}

.copy-slot-val {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  transition: color 0.3s;
}

.goal-copy-slot.copy-full .copy-slot-val { color: var(--gold); }

.copy-slot-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}

.copy-slot-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.goal-copy-slot.copy-full .copy-slot-fill {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.copy-slot-need {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.goal-copy-slot.copy-full .copy-slot-need { color: var(--gold); }

/* ---------- State distribution grid ---------- */
.goal-dist-grid {
  display: flex;
  gap: 5px;
}

.goal-dist-slot {
  flex: 1;
  padding: 10px 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  transition: border-color 0.3s, background 0.3s;
  cursor: default;
}

.goal-dist-slot.dist-elite {
  border-color: rgba(212,175,100,0.4);
  background: rgba(212,175,100,0.07);
}

.goal-dist-slot.dist-danger {
  border-color: rgba(224,80,80,0.5);
  background: rgba(224,80,80,0.08);
}

.goal-dist-slot.dist-mlb {
  border-color: rgba(240,160,192,0.5);
  background: rgba(240,160,192,0.08);
}

.dist-slot-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.goal-dist-slot.dist-elite  .dist-slot-label { color: var(--gold-light); }
.goal-dist-slot.dist-danger .dist-slot-label { color: var(--red-warn); }
.goal-dist-slot.dist-mlb    .dist-slot-label { color: var(--pink); }

.dist-slot-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  transition: color 0.3s;
  letter-spacing: -0.02em;
}

.dist-slot-val.active { color: var(--text-0); }
.goal-dist-slot.dist-elite  .dist-slot-val { color: var(--gold-light); }
.goal-dist-slot.dist-danger .dist-slot-val { color: var(--red-warn); }
.goal-dist-slot.dist-mlb    .dist-slot-val { color: var(--pink); }

.dist-slot-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}

.dist-slot-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.goal-dist-slot.dist-elite  .dist-slot-fill { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.goal-dist-slot.dist-danger .dist-slot-fill { background: linear-gradient(90deg, #a03030, var(--red-warn)); }
.goal-dist-slot.dist-mlb    .dist-slot-fill { background: linear-gradient(90deg, var(--pink-deep), var(--pink)); }

.dist-slot-sub {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ---------- Goal banner image gallery ---------- */
.goal-images {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.goal-img-tile {
  flex: 1;
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 170px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
  cursor: default;
}

.goal-img-tile:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--gold);
  box-shadow: 0 8px 30px rgba(212,175,100,0.25);
  z-index: 2;
}

.goal-img-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.3s, transform 0.5s;
}

.goal-img-tile:hover img {
  transform: scale(1.08);
  filter: saturate(1.15) brightness(1.05);
}

.goal-img-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-0);
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goal-img-placeholder {
  flex: 1;
  aspect-ratio: 3 / 4;
  max-height: 170px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: rgba(255,255,255,0.015);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-2);
  transition: border-color 0.3s;
}

.goal-img-placeholder:hover { border-color: rgba(212,175,100,0.25); }

.goal-img-placeholder-emoji {
  font-size: 36px;
  opacity: 0.6;
}

.goal-img-placeholder-text {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ---------- Planned Pulls row ---------- */
.goal-planned-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 14px;
  align-items: center;
}

/* ---------- COMPACT VIEW ----------
   Two-row card per banner: name on top spanning the full width, then a
   dense data row below with images, date, Carats at banner, Max Pulls,
   the Pulls input, and the probability slots. Field names match the
   normal/expanded views exactly. */
.goal-card[data-view-mode="compact"] {
  padding: 8px 10px;
}
.goal-card[data-view-mode="compact"] .goal-pity-section,
.goal-card[data-view-mode="compact"] .goal-body,
.goal-card[data-view-mode="compact"] .goal-header {
  display: none;
}

.compact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compact-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.compact-name {
  font-family: var(--serif, inherit);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-row {
  display: grid;
  grid-template-columns: 76px 100px 110px 90px 90px 1.6fr 64px;
  align-items: stretch;
  gap: 10px;
  min-height: 52px;
}

/* On desktop this wrapper is transparent to the grid (display:contents),
   so .compact-pulls and .compact-dist-grid remain their own direct grid
   columns exactly as before — desktop layout is untouched. Only in mobile
   (see media query below) does it become a real flex wrapper that forces
   Pulls + the distribution slots onto the same row together. */
.compact-pulls-dist-row {
  display: contents;
}

.compact-images {
  display: flex;
  gap: 3px;
  align-self: stretch;
}
.compact-img {
  width: 36px;
  /* Taller than wide and cropped to fill — minimizes "air" inside the
     fixed-height row so the artwork reads bigger at a glance. */
  height: 100%;
  min-height: 52px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.compact-img-placeholder {
  width: 36px;
  height: 100%;
  min-height: 52px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.compact-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.compact-field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  text-transform: uppercase;
  white-space: normal;
  line-height: 1.25;
}

/* Inline "(max N)" badge next to the Pulls label — only shown in the
   mobile compact view, where the separate Max Pulls column is hidden to
   save horizontal space. Hidden by default (desktop keeps its own
   dedicated Max Pulls column). */
.compact-maxpulls-inline {
  display: none;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  text-transform: none;
}
.compact-field-val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Date column: start sits above end, saving horizontal space versus a
   single "start – end" line. */
.compact-date {
  gap: 0;
}
.compact-date-start,
.compact-date-end {
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.compact-date-end {
  color: var(--text-2);
}

.compact-pull-input {
  width: 100%;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--mono);
  background: var(--bg-2);
  border: 1px solid var(--border-accent);
  border-radius: 4px;
  color: var(--text-0);
}

.compact-dist-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.compact-dist-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 0;
  border-radius: 8px;
}
.compact-dist-slot .dist-slot-label { font-size: 7px; letter-spacing: 0.02em; }
.compact-dist-slot .dist-slot-val   { font-size: 10px; }

.compact-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.compact-expand-btn,
.compact-remove-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .goal-planned-row { grid-template-columns: 1fr; gap: 8px; }
}

.goal-planned-label-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.goal-planned-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
}

.goal-max-pulls-badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--teal);
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.goal-planned-row .goal-pull-input {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}

.goal-planned-row .goal-pull-input:focus {
  border-color: rgba(212,175,100,0.5);
  background: rgba(212,175,100,0.06);
}

/* ---------- Awaiting-input cue ----------
   When the goal has been added but no pull count has been entered yet
   (data-empty="true" set by app.js when value is empty or 0), the input
   pulses a soft gold glow to draw the eye. The pulse stops permanently
   once the user focuses the input for the first time (data-touched is
   set to "true" on first focus and stays that way). This avoids the
   annoying behaviour of the glow re-appearing if the user later deletes
   the value back to 0 — they already know the input is there.
   Focusing the input also pauses the pulse via :not(:focus) so it's
   not flashing while they're typing.
*/
@keyframes pull-input-pulse {
  0%, 100% {
    border-color: rgba(212,175,100,0.55);
    box-shadow: 0 0 0 0 rgba(212,175,100,0);
    background: rgba(212,175,100,0.06);
  }
  50% {
    border-color: rgba(212,175,100,0.9);
    box-shadow: 0 0 0 4px rgba(212,175,100,0.15);
    background: rgba(212,175,100,0.10);
  }
}
.goal-planned-row .goal-pull-input[data-empty="true"]:not([data-touched="true"]):not(:focus),
.compact-pull-input[data-empty="true"]:not([data-touched="true"]):not(:focus) {
  animation: pull-input-pulse 1.8s ease-in-out infinite;
}
/* Respect reduced-motion preferences — show static highlight instead */
@media (prefers-reduced-motion: reduce) {
  .goal-planned-row .goal-pull-input[data-empty="true"]:not([data-touched="true"]):not(:focus),
  .compact-pull-input[data-empty="true"]:not([data-touched="true"]):not(:focus) {
    animation: none;
    border-color: rgba(212,175,100,0.7);
    background: rgba(212,175,100,0.08);
  }
}



/* Tint de color según tipo de banner */
.goal-pull-input.pull-input-card { color: var(--teal); }
.goal-pull-input.pull-input-char { color: var(--pink); }

/* ---------- Normal vs Expanded view ---------- */
.goal-expand-btn {
  /* Neutral by default — only turns gold when the card IS expanded
     (see .goal-card[data-expanded="true"] override below). This way the
     button looks "inactive" when the card is collapsed and "active"
     when it's currently open. */
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  flex-shrink: 0;
}

/* Subtle hover in collapsed state — lift + slight white tint, no gold */
.goal-expand-btn:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--text-2);
  color: var(--text-0);
  transform: translateY(-1px);
}

/* Gold appearance only when the card is currently expanded */
.goal-card[data-expanded="true"] .goal-expand-btn {
  background: rgba(212,175,100,0.08);
  border-color: rgba(212,175,100,0.25);
  color: var(--gold);
}
.goal-card[data-expanded="true"] .goal-expand-btn:hover {
  background: rgba(212,175,100,0.18);
  border-color: rgba(212,175,100,0.5);
  color: var(--gold);
}

.goal-expand-btn svg { display: block; }

.goal-card[data-expanded="false"] .goal-expand-btn .icon-collapse,
.goal-card[data-expanded="true"]  .goal-expand-btn .icon-expand {
  display: none;
}

/* NORMAL VIEW — hide anything marked as collapsible-detail */
.goal-card[data-expanded="false"] .collapsible-detail { display: none !important; }

/* NORMAL VIEW — compact header */
.goal-card[data-expanded="false"] .goal-header {
  padding: 7px 11px;
  gap: 10px;
}

.goal-card[data-expanded="false"] .goal-name { font-size: 17px; }

.goal-card[data-expanded="false"] .goal-type-badge {
  padding: 3px 7px;
  font-size: 10px;
}

/* NORMAL VIEW — tighter body; slightly wider image column */
.goal-card[data-expanded="false"] .goal-body {
  padding: 7px 11px 9px;
  gap: 12px;
  grid-template-columns: 175px 1fr;
}

.goal-card[data-expanded="false"] .goal-img-tile,
.goal-card[data-expanded="false"] .goal-img-placeholder {
  max-height: 130px;
}

.goal-card[data-expanded="false"] .goal-images {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  gap: 5px;
}

.goal-card[data-expanded="false"] .goal-stats { display: none; }

.goal-card[data-expanded="false"] .goal-pity-section { gap: 0 !important; }

.goal-card[data-expanded="false"] .goal-dist-slot {
  padding: 7px 4px 6px;
  gap: 3px;
}

.goal-card[data-expanded="false"] .dist-slot-val   { font-size: 14px; }
.goal-card[data-expanded="false"] .dist-slot-label { font-size: 11px; }
.goal-card[data-expanded="false"] .dist-slot-sub   { font-size: 8px; }
.goal-card[data-expanded="false"] .goal-dist-grid  { gap: 5px; }

.goal-card[data-expanded="false"] .goal-planned-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  gap: 12px;
}

.goal-card[data-expanded="false"] .goal-planned-label    { font-size: 10px; }
.goal-card[data-expanded="false"] .goal-max-pulls-badge  { font-size: 10px; }

.goal-card[data-expanded="false"] .goal-planned-row .goal-pull-input {
  font-size: 15px;
  padding: 6px 10px;
}

/* ---------- Combobox (searchable banner selector) ---------- */
.combobox {
  position: relative;
  width: 100%;
}

.combobox-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-0);
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 30px 8px 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.combobox-input:focus {
  border-color: rgba(212,175,100,0.5);
  background: rgba(212,175,100,0.06);
}

.combobox-input::placeholder {
  color: var(--text-2);
  opacity: 0.7;
}

.combobox-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  font-size: 12px;
  pointer-events: none;
  transition: transform 0.2s;
}

.combobox.open .combobox-caret {
  transform: translateY(-50%) rotate(180deg);
  color: var(--gold);
}

.combobox-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border-accent);
  border-radius: 6px;
  z-index: 100;
  box-shadow: 0 10px 28px rgba(0,0,0,0.6);
  padding: 4px;
}

.combobox.open .combobox-list { display: block; }

.combobox-group-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 10px 12px 6px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.combobox-group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

.combobox-group-label.group-card { color: var(--teal); }
.combobox-group-label.group-char { color: var(--pink); }

.combobox-group-label.group-char {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.combobox-option {
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-0);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 0.12s, border-color 0.12s;
  border-left: 3px solid transparent;
  margin-left: 2px;
}

.combobox-option.opt-card {
  border-left-color: rgba(96,192,176,0.5);
  background: rgba(96,192,176,0.03);
}
.combobox-option.opt-char {
  border-left-color: rgba(240,160,192,0.5);
  background: rgba(240,160,192,0.03);
}

.combobox-option.opt-card:hover,
.combobox-option.opt-card.highlighted {
  background: rgba(96,192,176,0.13);
  border-left-color: var(--teal);
  color: var(--text-0);
}

.combobox-option.opt-char:hover,
.combobox-option.opt-char.highlighted {
  background: rgba(240,160,192,0.13);
  border-left-color: var(--pink);
  color: var(--text-0);
}

.combobox-option.selected {
  background: rgba(212,175,100,0.15);
  color: var(--gold);
  border-left-color: var(--gold);
}

.combobox-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.combobox-option-name {
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combobox-option-type {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}

.combobox-option-type.type-card {
  color: var(--teal);
  background: rgba(96,192,176,0.12);
  border: 1px solid rgba(96,192,176,0.35);
}

.combobox-option-type.type-char {
  color: var(--pink);
  background: rgba(240,160,192,0.12);
  border: 1px solid rgba(240,160,192,0.35);
}

.combobox-option-date {
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.1em;
}

.combobox-option mark {
  background: rgba(212,175,100,0.35);
  color: var(--gold-light);
  padding: 0 1px;
  border-radius: 2px;
}

.combobox-empty {
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
  letter-spacing: 0.1em;
}

/* ---------- Drag-and-drop reordering ---------- */
.goal-card[draggable="true"] { cursor: default; }

.goal-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-2);
  cursor: grab;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  user-select: none;
}

.goal-drag-handle:hover {
  color: var(--gold);
  background: rgba(212,175,100,0.08);
}

.goal-drag-handle:active { cursor: grabbing; }

.goal-card.dragging {
  opacity: 0.4;
  transform: scale(0.98);
  transition: opacity 0.2s, transform 0.2s;
}

.goal-card.drag-over-top    { box-shadow: 0 -3px 0 0 var(--gold); }
.goal-card.drag-over-bottom { box-shadow: 0  3px 0 0 var(--gold); }

.goal-pin-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--gold);
  background: rgba(212,175,100,0.12);
  border: 1px solid rgba(212,175,100,0.4);
  flex-shrink: 0;
}

.goal-expired-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--red-warn);
  background: rgba(224,80,80,0.10);
  border: 1px solid rgba(224,80,80,0.4);
  flex-shrink: 0;
}

/* Subtle visual cue on the whole card when the banner has ended.
   The card stays usable — the user can still see and remove it — but it
   reads as "past" at a glance. */
.goal-card[data-expired="true"] {
  opacity: 0.78;
}
.goal-card[data-expired="true"] .goal-name {
  color: var(--text-1);
}

.goal-card[data-pinned="true"] {
  border-left: 2px solid var(--gold);
}

.goal-img-tile.goal-img-empty {
  background: var(--bg-2);
  cursor: default;
}

.goal-img-tile.goal-img-empty:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

/* ============================================================
   Clases extraídas de los estilos INLINE del HTML
   (sección "My Goals" y similares)
   ============================================================ */

/* Fila superior del panel de goals (label + input + botón) */
.goals-add-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.goals-add-field {
  flex: 1;
  min-width: 220px;
  margin: 0;
}

.goals-add-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.goals-add-preview {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  margin-top: 6px;
  min-height: 16px;
  letter-spacing: 0.15em;
  opacity: 0.8;
}

/* Botón: + ADD GOAL */
.btn-add-goal {
  margin-top: 18px;
  padding: 9px 20px;
  background: rgba(212,175,100,0.1);
  border: 1px solid rgba(212,175,100,0.3);
  border-radius: 6px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-add-goal:hover { background: rgba(212,175,100,0.18); }

/* Toolbar de goals (reset / info) */
.goals-toolbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.goals-order-info {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-2);
}

.btn-reset-order {
  display: none;
  padding: 5px 12px;
  background: rgba(212,175,100,0.08);
  border: 1px solid rgba(212,175,100,0.3);
  border-radius: 5px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-reset-order:hover { background: rgba(212,175,100,0.18); }

.btn-compact-toggle {
  display: none;
  padding: 5px 12px;
  background: rgba(96,176,192,0.08);
  border: 1px solid rgba(96,176,192,0.3);
  border-radius: 5px;
  color: var(--teal, #60b0c0);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn-compact-toggle:hover { background: rgba(96,176,192,0.18); }

/* Lista de goals y placeholder vacío */
.goals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goals-empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
  padding: 20px 0;
  letter-spacing: 0.2em;
}

/* ---------- Tickets row (secondary resources, beneath the main dashboard) ---------- */
.tickets-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
}

.ticket-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ticket-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}

.ticket-input {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-0);
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  width: 90px;
  transition: border-color 0.2s;
}

.ticket-input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.tickets-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin-left: auto;
  opacity: 0.7;
}

/* ---------- Cookie consent banner ----------
   Small, unobtrusive bar fixed to the bottom-right corner. Doesn't cover
   the page content; user can keep using the site while it's visible.
*/
.cookie-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 420px;
  width: calc(100vw - 32px);
  background: var(--bg-1, #14161f);
  color: var(--text-1, #d6d6e0);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 14px 16px 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-2, #888);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.cookie-banner-close:hover {
  color: var(--text-0, #fff);
  background: rgba(255,255,255,0.06);
}

.cookie-banner-text {
  margin: 0 14px 12px 0;  /* extra right margin so text doesn't sit under the × button */
  color: var(--text-1, #d6d6e0);
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cookie-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-2, #888);
  text-decoration: none;
  margin-right: auto;       /* pushes itself left, buttons go right */
  border-bottom: 1px dotted var(--text-3, #555);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.cookie-link:hover {
  color: var(--gold, #d4af64);
  border-bottom-color: var(--gold, #d4af64);
}

.cookie-btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
}

.cookie-btn-reject {
  color: var(--text-2, #aaa);
}
.cookie-btn-reject:hover {
  color: var(--text-0, #fff);
  border-color: var(--text-2, #aaa);
}

.cookie-btn-accept {
  color: var(--gold, #d4af64);
  border-color: rgba(212, 175, 100, 0.4);
  background: rgba(212, 175, 100, 0.08);
}
.cookie-btn-accept:hover {
  background: rgba(212, 175, 100, 0.18);
  border-color: var(--gold, #d4af64);
}

/* ---------- Privacy Policy page ---------- */
.privacy-container {
  max-width: 760px;
}

.privacy-header {
  padding-top: 32px;
  padding-bottom: 8px;
}
.privacy-header h1 {
  margin: 12px 0 6px;
}

.privacy-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2, #888);
  margin: 0 0 18px;
}

.privacy-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2, #888);
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s;
}
.privacy-back:hover { color: var(--gold, #d4af64); }

.privacy-content {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-1, #c9c9d3);
  padding-bottom: 64px;
}

.privacy-content h2 {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 600;
  margin: 32px 0 8px;
  color: var(--gold-light, #e7c989);
  letter-spacing: 0.02em;
}

.privacy-content p, .privacy-content ul {
  margin: 8px 0 12px;
}
.privacy-content ul {
  padding-left: 22px;
}
.privacy-content li {
  margin: 2px 0;
}
.privacy-content strong {
  color: var(--text-0, #fff);
  font-weight: 600;
}

.privacy-footer-note {
  margin-top: 24px;
  text-align: center;
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES  (narrow phones, <=560px)

   All rules here target ".goal-card[data-expanded=\"false\"] ..." because
   that is the state the app always shows on mobile (the expanded state is
   opt-in via the expand button). Matching the selector of the existing
   collapsed-state rules (lines ~1190–1256) is essential — without it our
   mobile overrides lose to the higher-specificity collapsed rules and
   get visually silenced.

   Layout on mobile (matching the user's sketch):
     ┌───────────────────────────────────────┐
     │ [ imgs ]  │  [ 6-slot prob grid     ] │
     │           │  [ 3 cols × 2 rows      ] │
     │ Planned   │                           │
     │ Pulls     │                           │
     │ [ input ] │                           │
     │  ^ bottoms of left col and prob grid aligned
     ├───────────────────────────────────────┤
     │ Est. date range (row-spanning)        │
     └───────────────────────────────────────┘
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {

  /* Container: more horizontal room */
  .container { padding: 0 12px 60px; }

  /* Card: slimmer outer styling */
  .goal-card { border-radius: 8px; }
  .goal-card[data-expanded="false"] .goal-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .goal-card[data-expanded="false"] .goal-name {
    font-size: 15px;
    line-height: 1.25;
    flex: 1 0 100%;
    /* Order 99 puts the name AFTER the buttons in the flex order, so the
       buttons stay on row 1 next to the tag and the name flows below on
       its own line. Without this, name(order:2) wrapped first and forced
       the buttons(order:3) onto a third row. */
    order: 99;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .goal-card[data-expanded="false"] .goal-type-badge { order: 1; font-size: 8px; padding: 2px 6px; }
  .goal-card[data-expanded="false"] .goal-date       { order: 1; font-size: 9px; }
  /* Push action buttons to the RIGHT of row 1 — same arrangement as
     desktop/expanded views. */
  .goal-card[data-expanded="false"] .goal-expand-btn,
  .goal-card[data-expanded="false"] .goal-remove {
    order: 2;
    margin-left: 0;
  }
  /* The first of the two (expand) gets margin-left:auto, so it (and the
     remove next to it) gets pushed all the way to the right end. */
  .goal-card[data-expanded="false"] .goal-expand-btn { margin-left: auto; }
  /* Same treatment for any optional badges so they sit between tag and buttons */
  .goal-card[data-expanded="false"] .goal-expired-badge,
  .goal-card[data-expanded="false"] .goal-pin-badge {
    order: 1;
  }

  /* ── Body: 2-col grid, narrow-left, wide-right ── */
  .goal-card[data-expanded="false"] .goal-body {
    display: grid !important;
    grid-template-columns: 95px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 10px;
    padding: 10px 12px 12px;
    align-items: start;
  }
  /* Left-column wrapper (holds .goal-images and hidden .goal-stats) */
  .goal-card[data-expanded="false"] .goal-body > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  /* Images: smaller so the prob grid has more room */
  .goal-card[data-expanded="false"] .goal-images {
    display: flex;
    gap: 5px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .goal-card[data-expanded="false"] .goal-img-tile,
  .goal-card[data-expanded="false"] .goal-img-placeholder {
    max-height: 100px;
    max-width: 90px;
  }
  .goal-img-caption {
    font-size: 8px;
    padding: 4px 5px 3px;
    letter-spacing: 0.05em;
  }
  .goal-img-placeholder-emoji { font-size: 26px; }
  .goal-img-placeholder-text  { font-size: 8px; }

  /* Flatten pity-section so its children become direct grid items of goal-body */
  .goal-card[data-expanded="false"] .goal-pity-section { display: contents; }

  /* RIGHT column, spans rows 1-2: probability grid 3×2 */
  .goal-card[data-expanded="false"] .goal-dist-grid {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    align-self: stretch;
  }
  .goal-card[data-expanded="false"] .goal-dist-slot {
    padding: 4px 2px;
    gap: 2px;
  }
  .goal-card[data-expanded="false"] .dist-slot-val   { font-size: 11px; letter-spacing: -0.02em; }
  .goal-card[data-expanded="false"] .dist-slot-label { font-size: 9px;  letter-spacing: 0.05em; }
  .goal-card[data-expanded="false"] .dist-slot-sub   { font-size: 7px;  letter-spacing: 0.02em; }

  /* LEFT column, row 2: Planned Pulls — pushed to bottom of cell so its
     bottom edge aligns with bottom of the prob grid on the right. */
  .goal-card[data-expanded="false"] .goal-planned-row {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 0;
    border-top: none;
    align-self: stretch;
  }
  .goal-card[data-expanded="false"] .goal-planned-label   { font-size: 9px; letter-spacing: 0.2em; }
  .goal-card[data-expanded="false"] .goal-max-pulls-badge { font-size: 9px; }
  .goal-card[data-expanded="false"] .goal-planned-row .goal-pull-input {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 5px;
  }

  /* Hide duplicate/unneeded elements on mobile */
  .goal-card[data-expanded="false"] .goal-pity-label-inline { display: none; }

  /* Bottom row: date range spans both columns */
  .goal-card[data-expanded="false"] .goal-range-note {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 9px;
    text-align: left;
    margin-top: 2px;
  }

  /* Tickets row: tighten on small screens */
  .tickets-row {
    gap: 14px;
    padding: 10px 12px;
  }
  .tickets-hint { margin-left: 0; flex-basis: 100%; font-size: 9px; }
  .ticket-input { width: 80px; font-size: 14px; }

  /* Cookie banner: full width at bottom on phones */
  .cookie-banner {
    right: 8px;
    left: 8px;
    bottom: 8px;
    max-width: none;
    width: auto;
    padding: 12px 14px 10px;
    font-size: 11px;
  }
  .cookie-banner-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .cookie-link {
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 4px;
  }
  .cookie-btn { padding: 7px 12px; font-size: 10px; }

  /* Privacy policy on phones: smaller fonts */
  .privacy-content { font-size: 15px; }
  .privacy-content h2 { font-size: 19px; margin-top: 24px; }

  /* ──────────────────────────────────────────────────────────────────
     SAFETY NET — no horizontal scroll on mobile
     Caps the container & all top-level cards at the viewport width.
     If some inner element ever tries to grow beyond, it gets clipped
     instead of pushing the page sideways. Without this, even one bad
     element (image, long word, overflowing flex child) breaks the
     entire mobile layout.
     ────────────────────────────────────────────────────────────────── */
  .container,
  .card,
  .goal-card,
  .prod-section {
    max-width: 100%;
    overflow-x: hidden;
  }
  img { max-width: 100%; height: auto; }
  .goal-img-tile img { max-width: 100%; max-height: 100%; }

  /* ──────────────────────────────────────────────────────────────────
     EXPANDED MODE on mobile — fixes the cramped header and the prob
     grid bleeding off the right edge of the card.
     All rules target .goal-card[data-expanded="true"] so the collapsed
     mode (which has its own block above) is left untouched.
     ────────────────────────────────────────────────────────────────── */

  /* Header reorganised into two rows:
       row 1: [drag] [tag] ─── [expand] [×]
       row 2: full-width banner name (wraps freely)
     The badges (expired/pinned) tag along on row 1 if they exist. */
  .goal-card[data-expanded="true"] .goal-header {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 10px 12px;
    align-items: center;
  }
  .goal-card[data-expanded="true"] .goal-drag-handle,
  .goal-card[data-expanded="true"] .goal-type-badge,
  .goal-card[data-expanded="true"] .goal-expired-badge,
  .goal-card[data-expanded="true"] .goal-pin-badge,
  .goal-card[data-expanded="true"] .goal-expand-btn,
  .goal-card[data-expanded="true"] .goal-remove {
    flex: 0 0 auto;
  }
  /* Push the action buttons (expand + remove) to the right end of row 1 */
  .goal-card[data-expanded="true"] .goal-expand-btn { margin-left: auto; }

  /* Name takes its own full-width row below the tag/buttons */
  .goal-card[data-expanded="true"] .goal-name {
    flex: 0 0 100%;
    order: 99;            /* push to the end -> it wraps onto a new line */
    font-size: 16px;
    line-height: 1.3;
    margin-top: 2px;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* Tag smaller on mobile so it leaves more room on row 1 */
  .goal-card[data-expanded="true"] .goal-type-badge {
    font-size: 8px;
    padding: 2px 6px;
    letter-spacing: 0.18em;
  }

  /* Body: prevent any child from pushing past the card edges. */
  .goal-card[data-expanded="true"] .goal-body {
    padding: 12px;
    gap: 12px;
    min-width: 0;
  }
  .goal-card[data-expanded="true"] .goal-body > div {
    min-width: 0;
  }

  /* Probability grid: 6 cells must fit edge-to-edge. The desktop sizes
     are too generous for 360-380px viewports, so we shrink everything in
     proportion. min-width:0 on the slot lets flexbox shrink the cells
     under their natural content size. */
  .goal-card[data-expanded="true"] .goal-dist-grid {
    gap: 3px;
    width: 100%;
  }
  .goal-card[data-expanded="true"] .goal-dist-slot {
    padding: 6px 2px 5px;
    gap: 2px;
    min-width: 0;
    border-radius: 6px;
  }
  .goal-card[data-expanded="true"] .dist-slot-label {
    font-size: 8px;
    letter-spacing: 0.06em;
  }
  .goal-card[data-expanded="true"] .dist-slot-val {
    font-size: 11px;
  }
  .goal-card[data-expanded="true"] .dist-slot-sub {
    font-size: 8px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Image tiles: tighter on mobile but respect aspect ratio (no explicit
     height; setting height alongside aspect-ratio decouples width from
     the flex parent and breaks the layout). */
  .goal-card[data-expanded="true"] .goal-images {
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }
  .goal-card[data-expanded="true"] .goal-img-tile {
    max-height: 140px;
    min-width: 0;
  }

  /* Stats row (carats / pulls after spend) — wrap if needed */
  .goal-card[data-expanded="true"] .goal-stats {
    gap: 10px 14px;
  }
}

/* ---------- COMPACT VIEW — mobile ----------
   The name row already spans full width by default. On mobile we wrap the
   data row (images, fields, dist slots, actions) instead of forcing the
   wide desktop grid. */
@media (max-width: 560px) {
  .compact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .compact-card { position: relative; }
  .compact-images { order: 0; }
  .compact-date { order: 1; flex: 1 1 70px; }
  .compact-carats { order: 2; flex: 1 1 70px; }
  /* Max Pulls as its own column is dropped here — it's folded into the
     "(max N)" badge next to the Pulls label instead, freeing up the row. */
  .compact-maxpulls { display: none; }
  .compact-maxpulls-inline { display: inline; }
  .compact-actions {
    position: absolute;
    top: 2px;
    right: -4px;
  }
  .compact-name-row { padding-right: 50px; }
  .compact-row { padding-right: 0; }
  /* In mobile the wrapper becomes a real flex row (overriding the
     display:contents used on desktop), so Pulls + the distribution slots
     stay together and flex-basis:100% reliably pushes the pair onto its
     own row, under Date/Carats. */
  .compact-pulls-dist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    order: 3;
    flex-basis: 100%;
  }
  .compact-pulls {
    flex: 0 0 auto;
    max-width: 60px;
  }
  .compact-pulls .compact-field-label {
    font-size: 8px;
    line-height: 1.2;
  }
  .compact-pull-input {
    width: 48px;
    font-size: 13px;
    padding: 3px 4px;
    text-align: center;
  }
  .compact-dist-grid {
    flex: 1 1 auto;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  .compact-dist-slot {
    padding: 10px 8px;
    gap: 4px;
    border-radius: 6px;
  }
  .compact-dist-slot .dist-slot-label { font-size: 10px; }
  .compact-dist-slot .dist-slot-val   { font-size: 12px; letter-spacing: -0.02em; }
}

/* ─── UMACARATS DB ANNOUNCEMENT BANNER ─────────────────────────────── */
.db-announce-banner {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1428;
  border: 1px solid rgba(212,175,100,0.45);
  border-radius: 12px;
  padding: 10px 14px;
  z-index: 999;
  width: 300px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  font-family: var(--mono);
}

.db-announce-banner[hidden] { display: none; }

.db-announce-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}

.db-announce-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.db-announce-title {
  font-size: 12px;
  font-weight: 500;
  color: #d4af64;
  white-space: nowrap;
}

.db-announce-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

.db-announce-btn {
  flex-shrink: 0;
  background: rgba(212,175,100,0.12);
  border: 1px solid rgba(212,175,100,0.45);
  color: #d4af64;
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.db-announce-btn:hover { background: rgba(212,175,100,0.22); }

.db-announce-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}

.db-announce-close:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 480px) {
  .db-announce-banner {
    top: 10px;
    right: 10px;
    left: auto;
    width: calc(100vw - 20px);
    max-width: 340px;
  }
}