/* IndieDevTool — Today's Game widget + sponsor page
   ----------------------------------------------------------- */

/* ---- Today's Game widget --------------------------------- */
.featured-game {
  display: block;
  margin: 36px 0 28px;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.featured-game::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.5;
}

.fg-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-1);
}
.fg-status .fg-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.fg-status-editorial { color: var(--accent); }
.fg-status-sold      { color: var(--success); }
.fg-status-reserved  { color: var(--warning); }
.fg-status-default   { color: var(--text-3); }

.fg-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 18px;
}
@media (max-width: 600px) {
  .fg-body { grid-template-columns: 1fr; }
}

.fg-art {
  width: 100%;
  min-height: 120px;
  border-radius: var(--r-md);
  background-color: var(--bg-3);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-1);
  position: relative;
  overflow: hidden;
  aspect-ratio: 460 / 215;
}
.fg-art-empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
}
.fg-art-letter {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: -0.05em;
}

.fg-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fg-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-0);
  line-height: 1.25;
}
.fg-dev {
  font-size: 0.84rem;
  color: var(--text-3);
}
.fg-tagline {
  font-size: 0.92rem;
  color: var(--text-2);
  margin: 4px 0 6px;
  line-height: 1.45;
}
.fg-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.fg-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  color: var(--text-2);
}
.fg-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
  flex-wrap: wrap;
}
.fg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  background: var(--bg-3);
  color: var(--text-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all .15s ease;
}
.fg-btn:hover {
  background: var(--accent);
  color: #0a0d12;
  border-color: var(--accent);
}
.fg-credit {
  font-size: 0.78rem;
  color: var(--text-3);
  font-style: italic;
}

.fg-calendar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(102, 192, 244, 0.06);
  border-top: 1px solid var(--border-1);
  font-size: 0.83rem;
  color: var(--text-2);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.fg-calendar-link:hover {
  background: rgba(102, 192, 244, 0.12);
  color: var(--accent);
}
.fg-cal-icon {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--accent);
}

/* ---- Sponsor page ---------------------------------------- */
.sponsor-hero {
  padding: 28px 0 12px;
}
.sponsor-hero h1 { font-size: 2rem; margin-bottom: 6px; }
.sponsor-hero .lead {
  color: var(--text-2);
  max-width: 760px;
  font-size: 1.02rem;
}

.principle-box {
  margin: 28px 0;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(102,192,244,0.06) 0%, rgba(102,192,244,0.02) 100%);
  border: 1px solid rgba(102, 192, 244, 0.22);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg);
}
.principle-box h2 {
  font-size: 1.05rem;
  color: var(--accent);
  margin: 0 0 10px;
}
.principle-box p {
  font-size: 0.96rem;
  color: var(--text-1);
  line-height: 1.65;
  margin: 0 0 10px;
}
.principle-box p:last-child { margin: 0; }

.pricing-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 20px 0 28px;
  padding: 16px 20px;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
}
.pricing-row .price {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.pricing-row .price-unit { color: var(--text-2); font-size: 1rem; }
.pricing-row .price-note { color: var(--text-3); font-size: 0.86rem; margin-left: auto; }

/* Calendar grid */
.calendar-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 12px 0 28px;
}
@media (max-width: 720px) {
  .calendar-wrap { grid-template-columns: 1fr; }
}

.cal-month {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 16px;
}
.cal-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-month-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-0);
}
.cal-month-stats {
  font-size: 0.76rem;
  color: var(--text-3);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.cal-weekday {
  font-size: 0.68rem;
  text-align: center;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-1);
  transition: all .12s ease;
}
.cal-day:hover {
  border-color: var(--accent);
  color: var(--text-0);
}
.cal-day .cd-num { font-weight: 600; }
.cal-day .cd-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: auto;
  align-self: flex-end;
  background: var(--text-3);
}
.cal-day.cd-available .cd-dot { background: var(--text-3); }
.cal-day.cd-editorial .cd-dot { background: var(--accent); box-shadow: 0 0 4px var(--accent); }
.cal-day.cd-sold .cd-dot      { background: var(--success); box-shadow: 0 0 4px var(--success); }
.cal-day.cd-reserved .cd-dot  { background: var(--warning); box-shadow: 0 0 4px var(--warning); }
.cal-day.cd-past {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.cal-day.cd-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 1px rgba(102,192,244,0.2);
}
.cal-day.cd-blank {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.cal-day.cd-sold,
.cal-day.cd-editorial,
.cal-day.cd-reserved {
  pointer-events: none;
  cursor: default;
}
.cal-day.cd-sold:hover,
.cal-day.cd-editorial:hover,
.cal-day.cd-reserved:hover { border-color: var(--border-1); color: var(--text-1); }

/* Legend */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 24px;
  font-size: 0.83rem;
  color: var(--text-2);
}
.cal-legend .leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cal-legend .leg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.cal-legend .leg-available { background: var(--text-3); }
.cal-legend .leg-editorial { background: var(--accent); }
.cal-legend .leg-sold      { background: var(--success); }
.cal-legend .leg-reserved  { background: var(--warning); }

/* Inquiry form */
.inquiry-card {
  margin-top: 32px;
  padding: 22px 24px;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
}
.inquiry-card h2 { font-size: 1.1rem; margin: 0 0 8px; }
.inquiry-card .inq-intro {
  margin: 0 0 18px;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.55;
}
.inquiry-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.inq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.inq-grid .inq-field-full { grid-column: 1 / -1; }
@media (max-width: 540px) {
  .inq-grid { grid-template-columns: 1fr; }
}

.inq-field { display: flex; flex-direction: column; gap: 6px; }
.inq-field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.inq-field input,
.inq-field textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 0.93rem;
  color: var(--text-1);
  font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.inq-field input:focus,
.inq-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-3);
}
.inq-field input::placeholder,
.inq-field textarea::placeholder {
  color: var(--text-3);
}
.inq-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

.inq-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.inq-error,
.inq-success {
  display: none;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  margin-top: 12px;
}
.inq-error.show {
  display: block;
  background: rgba(196, 71, 71, 0.08);
  border: 1px solid rgba(196, 71, 71, 0.35);
  color: #ffb3b3;
}
.inq-success.show {
  display: block;
  background: rgba(91, 163, 43, 0.08);
  border: 1px solid rgba(91, 163, 43, 0.35);
  color: #b8f0c2;
}

/* Embedded inquiry — slimmer version on the calculator page */
.inquiry-embed {
  margin-top: 48px;
}
.inquiry-embed .inquiry-card { margin-top: 0; }
.inquiry-embed .inq-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(102, 192, 244, 0.1);
  border: 1px solid rgba(102, 192, 244, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* What you get section */
.what-you-get {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0 8px;
}
.wyg-item {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.wyg-item h3 { font-size: 0.9rem; color: var(--text-0); margin: 0 0 4px; }
.wyg-item p  { font-size: 0.84rem; color: var(--text-2); margin: 0; line-height: 1.5; }