Merz leck Eier: MTG troll site

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/globals.css

@@ -0,0 +1,137 @@
+@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; }