/* Deck Generator — slot machine. shared site stuff lives in /style.css */

.slot-page { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.slot-page .kicker { align-self: flex-start; margin-bottom: 0.5rem; }
.slot-page .kicker a { color: var(--accent); }

.machine {
  --gold: #c8a84b;
  --gold-hi: #f0c844;
  width: 100%;
  max-width: 820px;
  border: 2px solid var(--gold);
  border-radius: 18px;
  background: linear-gradient(180deg, #13303b 0%, var(--navy) 55%, #163a48 100%);
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: inset 0 0 40px rgba(200, 168, 75, .08), 0 10px 40px rgba(0, 0, 0, .35);
}

.machine-title {
  text-align: center;
  font-family: 'Nabla', system-ui;
  font-weight: 400;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1;
  margin-bottom: 1.4rem;
  letter-spacing: 0.02em;
}

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 1.4rem;
}
.reel {
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  background: #06121a;
  height: 92px;
  overflow: hidden;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .6);
}
.cell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  text-align: center;
  font-family: 'Wallpoet', system-ui;
  font-size: 13px;
  line-height: 1.35;
  color: #3d5560;
}
.cell.revealed { animation: flash-in .2s ease-out; }
@keyframes flash-in {
  0%   { opacity: .2; transform: scale(.9); }
  60%  { opacity: 1;  transform: scale(1.05); }
  100% { opacity: 1;  transform: scale(1); }
}

.spin-btn {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 12px 0;
  font: 700 22px 'Quantico', system-ui;
  letter-spacing: 5px;
  color: #10202a;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 #8a6f22;
  transition: transform .08s, box-shadow .08s, filter .1s;
}
.spin-btn:hover { filter: brightness(1.08); }
.spin-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6f22; }
.spin-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.spin-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.result {
  width: 100%;
  max-width: 820px;
  min-height: 78px;
  border: 1.5px solid rgba(200, 168, 75, .35);
  border-radius: 12px;
  background: var(--surface);
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Quantico', system-ui;
  line-height: 1.7;
}
.result .idea { font-size: 17px; }
.result .sep { color: #5d7480; }
.result .rarity {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(200, 168, 75, .7);
}
.result .placeholder { color: rgba(200, 168, 75, .55); letter-spacing: 2px; font-size: 13px; }
.result .error { color: var(--red); font-size: 14px; }

/* phones: stack the reels so the long text fits */
@media (max-width: 640px) {
  .machine { padding: 1.25rem 1rem 1.5rem; }
  .reels { grid-template-columns: 1fr; gap: 8px; }
  .reel { height: 64px; }
  .result .idea { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .cell.revealed { animation: none; }
}