@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  --bg: #120d0a;
  --fg: #f3e9d2;
  --muted: #b8a88a;
  --gold: #e8b64c;
  --red: #d8452f;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(ellipse at top, #3a2413 0%, transparent 60%),
    repeating-linear-gradient(45deg, #140f0b 0 12px, #110c09 12px 24px);
  background-color: var(--bg);
  color: var(--fg);
  font-family: "Crimson Text", Georgia, serif;
  font-size: 18px;
  min-height: 100vh;
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
h1, h2, .bar, button, .label { font-family: "Cinzel", serif; }
h2 { color: var(--gold); margin: 48px 0 16px; font-size: 1.5rem; }
h2 small { color: var(--muted); font-size: 0.9rem; font-weight: 400; }

.hero { text-align: center; padding: 32px 0 16px; }
.kicker { color: var(--muted); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; }
.hero h1 {
  font-size: clamp(3rem, 12vw, 7rem);
  margin: 8px 0;
  line-height: 1;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 55%, #8a5a12);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #000);
}
.hero h1 span { font-style: italic; color: var(--red); -webkit-text-fill-color: var(--red); }
.sub { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 1.15rem; }

/* board */
.board { display: grid; grid-template-columns: auto 1fr; gap: 32px; margin-top: 32px; align-items: start; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; justify-items: center; } }
.label { color: var(--gold); text-align: center; margin-bottom: 8px; letter-spacing: 0.2em; font-size: 0.8rem; }
.life { margin-top: 16px; text-align: center; }
.life span { color: var(--muted); display: block; font-size: 0.9rem; }
.life strong { font-family: "Cinzel", serif; font-size: 2.5rem; color: var(--gold); }
.life strong.dead { color: var(--red); }
.meter { height: 10px; background: #2b1e14; border-radius: 99px; overflow: hidden; margin-top: 4px; }
.meter div { height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width 0.4s; }
.win { color: var(--gold); font-size: 1.3rem; animation: pulse 1s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }

.side { width: 100%; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
button {
  cursor: pointer; border: 2px solid var(--gold); background: linear-gradient(#5a3b16, #2e1d0a);
  color: var(--fg); padding: 12px 18px; border-radius: 10px; font-size: 1rem; font-weight: 700;
  transition: transform 0.1s;
}
button:hover { transform: translateY(-2px); }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; }
button.egg { border-color: var(--red); background: linear-gradient(#7a2517, #3c0f08); }

.log { list-style: none; padding: 16px; margin: 16px 0; background: #0009; border: 1px solid #4a3620; border-radius: 10px; min-height: 180px; }
.log li { padding: 4px 0; border-bottom: 1px dashed #3a2a18; color: var(--muted); }
.log li:first-child { color: var(--fg); }
.grave { color: var(--muted); font-style: italic; }
.empty { color: var(--muted); font-style: italic; }

.hand, .gallery { display: flex; flex-wrap: wrap; gap: 16px; }
.gallery { justify-content: center; }
.card-btn { all: unset; cursor: pointer; transition: transform 0.15s; }
.card-btn:hover { transform: translateY(-10px) rotate(-2deg); }
.card-btn:focus-visible { outline: 3px solid var(--gold); border-radius: 14px; }

/* card */
.card {
  --frame: #bbb; --box: #eee;
  width: 250px; aspect-ratio: 63 / 88; padding: 10px; border-radius: 14px;
  background: #111; box-shadow: 0 10px 30px #000a; color: #111; font-size: 13px;
}
.card.big { width: 300px; font-size: 15px; }
.card-inner {
  height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border-radius: 8px; background: var(--frame); position: relative;
}
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  background: linear-gradient(#fff8, #fff2); border: 2px solid #0006; border-radius: 6px;
  padding: 3px 7px; font-weight: 700; font-size: 0.85em; box-shadow: inset 0 1px 0 #fff8;
}
.title span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cost { display: flex; gap: 2px; flex-shrink: 0; }
.art {
  flex: 1 1 42%; min-height: 0; display: grid; place-items: center; font-size: 3.4em;
  border: 2px solid #0008; border-radius: 3px;
  background: radial-gradient(circle at 30% 30%, #fff6, transparent 60%), linear-gradient(135deg, #0003, #0000), var(--box);
}
.textbox {
  flex: 1 1 40%; background: #f6efdd; border: 2px solid #0006; border-radius: 3px;
  padding: 6px 8px; overflow: auto; line-height: 1.25;
}
.textbox p { margin: 0 0 5px; }
.flavor { font-style: italic; color: #444; border-top: 1px solid #0002; padding-top: 4px; }
.pt {
  position: absolute; right: 6px; bottom: 2px; background: var(--frame); border: 2px solid #0008;
  border-radius: 6px; padding: 1px 8px; font-family: "Cinzel", serif; font-weight: 900; font-size: 0.9em;
}
.rarity { font-size: 1.1em; }
.r-common { color: #111; } .r-uncommon { color: #9fb3c0; } .r-rare { color: #d4a938; }
.r-mythic { color: #e0561b; text-shadow: 0 0 4px #ff9a3c; }

.mana {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%;
  font-family: "Cinzel", serif; font-weight: 900; font-size: 0.8em; color: #111;
  background: #cbc2bf; border: 1px solid #0007; vertical-align: middle; margin: 0 1px;
}
.mana-B { background: #a69f9d; } .mana-W { background: #fffbd5; } .mana-U { background: #aae0fa; }
.mana-R { background: #f9aa8f; } .mana-G { background: #9bd3ae; } .mana-E { background: #f2c94c; }
.mana-T { background: #cbc2bf; }

.c-B { --frame: linear-gradient(160deg, #4a4543, #1d1a19); --box: #6b5f5a; }
.c-W { --frame: linear-gradient(160deg, #f5f0dc, #cfc6a8); --box: #efe6c8; }
.c-U { --frame: linear-gradient(160deg, #3d7fb8, #1a4166); --box: #79add6; }
.c-R { --frame: linear-gradient(160deg, #d0492f, #7a1f10); --box: #ec8a6b; }
.c-G { --frame: linear-gradient(160deg, #3d8a55, #1a4a2a); --box: #7cbf8e; }
.c-C { --frame: linear-gradient(160deg, #b9b3ad, #7b746d); --box: #ccc6be; }
.c-gold { --frame: linear-gradient(160deg, #f0d27a, #a67a1c); --box: #f5dc92; }
.c-B .pt, .c-U .pt, .c-R .pt, .c-G .pt { color: #fff; }

.rules ol { color: var(--muted); line-height: 1.7; }
footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid #3a2a18; color: #7d6e55; font-size: 0.85rem; text-align: center; }