:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #120f1d; color: #fff7ed; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #3b255d 0, #120f1d 45%, #07050b 100%); }
button { font: inherit; } .single-button { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.forge-button { border: 0; border-radius: 999px; padding: 1.25rem 2.5rem; font-weight: 900; letter-spacing: .16em; font-size: clamp(1.25rem, 5vw, 3rem); color: #1a1027; background: linear-gradient(135deg, #fde68a, #fb7185, #c084fc); box-shadow: 0 22px 70px #0009, inset 0 0 0 2px #fff7; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.forge-button:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.05); } .forge-button:disabled { opacity: .6; cursor: progress; } .forge-button.small { font-size: 1rem; padding: .9rem 1.3rem; }
.loading-card, .error { width: min(680px, 92vw); padding: 2rem; border: 1px solid #ffffff22; border-radius: 28px; background: #1f1830d9; box-shadow: 0 30px 90px #0008; text-align: center; }
.progress-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; } .progress { height: 18px; background: #ffffff1a; border-radius: 999px; overflow: hidden; } .progress div { height: 100%; background: linear-gradient(90deg, #fb7185, #fde68a, #86efac); transition: width .3s ease; }
.deck-view { width: min(1440px, 96vw); margin: 0 auto; padding: 2rem 0 4rem; } .hero-result { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 2rem; border-radius: 32px; background: #211834dd; border: 1px solid #ffffff1f; margin-bottom: 2rem; }
.eyebrow { color: #fbbf24; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; } h1 { font-size: clamp(2.3rem, 8vw, 6rem); margin: .2rem 0; } h2 { margin-top: 2.2rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .mtg-card { margin: 0; padding: .75rem; border-radius: 18px; background: #ffffff10; border: 1px solid #ffffff1a; } .mtg-card img { width: 100%; border-radius: 12px; display: block; } .mtg-card p { margin: .65rem .2rem .1rem; font-weight: 700; }
.missing-art { aspect-ratio: 488 / 680; display: grid; place-items: center; text-align: center; border-radius: 12px; padding: 1rem; background: linear-gradient(135deg, #3b255d, #16111f); } .missing-art span { display: block; opacity: .7; margin-top: .5rem; }
.play-cta { display: flex; justify-content: center; margin: 0 0 2rem; } .forge-button.play { font-size: clamp(1rem, 2.4vw, 1.4rem); padding: 1.1rem 2.2rem; background: linear-gradient(135deg, #86efac, #38bdf8, #c084fc); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; } .secondary { border: 1px solid #ffffff33; background: #ffffff14; color: #fff7ed; border-radius: 999px; padding: .9rem 1.2rem; cursor: pointer; font-weight: 800; } .secondary:hover { background: #ffffff22; }
.log { margin-top: 1rem; background: #0008; border-radius: 18px; padding: 1rem; } pre { white-space: pre-wrap; max-height: 360px; overflow: auto; }
@media (max-width: 700px) { .hero-result { display: block; } .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }