@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --felt: #0f5137; --felt-deep: #08301f; --felt-light: #1a6b4a;
  --wood: #3b2214; --wood-dark: #1f110a; --wood-light: #6b4022;
  --gold: #d6aa45; --gold-light: #f2d68a; --gold-dark: #8f6a1e;
  --cream: #f6ecd2; --ink: #15110b; --red: #b3122a; --muted: #b9c7bd;
  --ok: #3fbf7f; --bad: #e0554f;
  --serif: 'Cormorant Garamond', Georgia, serif; --display: 'Cinzel', Georgia, serif; --sans: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--wood-dark); color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

.btn {
  border: 0; border-radius: 999px; padding: .85em 1.6em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem;
  background: linear-gradient(180deg, #f3d27a, #c99430 55%, #9c7020); color: #2a1c06;
  box-shadow: 0 2px 0 #6e4f12, 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.ghost { background: rgba(0,0,0,.25); color: var(--gold-light); box-shadow: inset 0 0 0 1.5px var(--gold); }
.btn.green { background: linear-gradient(180deg, #5fd69a, #2f9e66 55%, #1f7349); color: #04170d; box-shadow: 0 2px 0 #134a2e, 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.small { padding: .55em 1.1em; font-size: .75rem; }

.card { position: relative; width: 100px; aspect-ratio: 100 / 140; border-radius: 8%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); user-select: none; -webkit-user-select: none; }
.card .card-svg { width: 100%; height: 100%; display: block; }

.field { display: grid; gap: .35rem; font-size: .8rem; color: var(--muted); }
.field input, .field select {
  font: inherit; font-size: 1rem; color: var(--cream); background: rgba(0,0,0,.35); border: 1px solid rgba(214,170,69,.45);
  border-radius: 10px; padding: .7em .8em; min-height: 44px;
}
.field input:focus, .field select:focus { border-color: var(--gold-light); outline: none; box-shadow: 0 0 0 3px rgba(214,170,69,.25); }

.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 999; pointer-events: none; width: min(92vw, 420px); }
.toast { background: rgba(20,14,8,.95); border: 1px solid var(--gold-dark); color: var(--cream); padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: .95rem; animation: toastIn .25s ease; }
.toast.bad { border-color: var(--bad); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.reduced *, .reduced *::before, .reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }