/* Onkel Ottos Testament – gemeinsames Design
   Tapete (Grün-Schwarz), Pergament, Messing, Siegellack */
:root {
  --wall: #13241d;
  --wall-2: #1b3228;
  --wall-3: #24412f;
  --parch: #f2e3c2;
  --parch-2: #e4cd9c;
  --ink: #2a1a12;
  --ink-soft: #5b4636;
  --brass: #d9a441;
  --brass-hi: #f3cf7a;
  --brass-dk: #8f6420;
  --blood: #8c2331;
  --blood-hi: #b8384a;
  --ghost: #8fe3d0;
  --good: #7fd18b;
  --bad: #ff8a80;
  --text: #f2e3c2;
  --text-dim: #b9ab8b;
  --font-display: 'Abril Fatface', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Rubik', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--wall);
  /* Damast-Tapete aus Verläufen */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(217, 164, 65, .07) 0 9%, transparent 10%),
    radial-gradient(ellipse 22% 34% at 50% 50%, transparent 58%, rgba(217, 164, 65, .06) 60% 64%, transparent 66%),
    radial-gradient(circle at 0 0, rgba(217, 164, 65, .05) 0 5%, transparent 6%),
    radial-gradient(circle at 100% 100%, rgba(217, 164, 65, .05) 0 5%, transparent 6%),
    linear-gradient(90deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px);
  background-size: 120px 160px, 120px 160px, 120px 160px, 120px 160px, 60px 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%);
}

button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* Messing-Knöpfe */
.btn {
  appearance: none; border: 0; border-radius: 14px;
  padding: .85em 1.4em; font-weight: 700; font-size: 1rem; line-height: 1.1;
  color: var(--ink);
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, #b98a32);
  box-shadow: 0 4px 0 var(--brass-dk), 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .12s, box-shadow .12s, filter .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brass-dk), 0 4px 10px rgba(0, 0, 0, .3); }
.btn[disabled] { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.blood { color: var(--parch); background: linear-gradient(180deg, var(--blood-hi), var(--blood)); box-shadow: 0 4px 0 #561320, 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.ghosty { color: var(--text); background: rgba(242, 227, 194, .08); box-shadow: inset 0 0 0 2px rgba(242, 227, 194, .25); }
.btn.ghosty:active { box-shadow: inset 0 0 0 2px rgba(242, 227, 194, .4); }
.btn.big { font-size: 1.25rem; padding: 1em 1.8em; border-radius: 18px; }

/* Pergament */
.parchment {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .35), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(140, 90, 30, .18), transparent 55%),
    linear-gradient(180deg, var(--parch), var(--parch-2));
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 0 40px rgba(120, 70, 20, .25);
}

/* Siegellack */
.seal {
  width: 1em; height: 1em; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #c64458, var(--blood) 55%, #5a1220);
  box-shadow: 0 .05em .15em rgba(0, 0, 0, .5), inset 0 0 0 .07em rgba(0, 0, 0, .25), inset 0 0 0 .12em rgba(255, 255, 255, .08);
  color: rgba(255, 220, 200, .75); font-family: var(--font-display);
  position: relative;
}
.seal::before {
  content: ''; position: absolute; inset: -.06em; border-radius: 50%;
  background: radial-gradient(circle, transparent 62%, var(--blood) 63% 70%, transparent 71%);
  filter: blur(.01em);
}
.seal span { font-size: .42em; position: relative; }

/* Porträt-Medaillon (Spieler) */
.medal {
  --c: var(--brass);
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem; line-height: 1;
  background: radial-gradient(circle at 40% 35%, #fff8e6, var(--parch-2));
  box-shadow: 0 0 0 3px var(--c), 0 0 0 5px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .45);
  position: relative; flex: none;
}
.medal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; pointer-events: none; }
.medal.has-photo { background: #2a2016; overflow: visible; }
.medal.ghost img { filter: grayscale(1) sepia(.4) hue-rotate(120deg) brightness(1.1); }
.medal.ghost { background: radial-gradient(circle at 40% 35%, #e6fff8, #7fbfb1); opacity: .75; filter: saturate(.5); }
.medal.ghost::after { content: '👻'; position: absolute; right: -.4em; top: -.4em; font-size: .6em; }

/* Foto-Streiche */
.medal .prank { position: absolute; pointer-events: none; z-index: 2; line-height: 1; }
.prank-nose { width: 26%; height: 26%; left: 37%; top: 46%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a9a 0 18%, #e3121e 45%, #8f0710 100%);
  box-shadow: 0 .08em .15em rgba(0, 0, 0, .5); animation: prank-honk 1.6s ease-in-out infinite; }
.prank-stache { width: 62%; left: 19%; top: 58%; animation: prank-wiggle 2.2s ease-in-out infinite; transform-origin: 50% 40%; }
.prank-stache svg { width: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.prank-shades { font-size: .78em; left: 50%; top: 30%; transform: translateX(-50%); }
.prank-tp { font-size: .9em; left: 50%; top: -38%; transform: translateX(-50%) rotate(-8deg); animation: prank-wiggle 2.6s ease-in-out infinite; }
.prank-snake { font-size: .7em; right: -.35em; bottom: -.3em; animation: prank-honk 1.2s ease-in-out infinite; }
.medal.pranked:has(.prank-snake) { box-shadow: 0 0 0 3px #5fbf3f, 0 0 0 5px rgba(0, 0, 0, .35), 0 0 18px rgba(95, 191, 63, .7); }
@keyframes prank-honk { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes prank-wiggle { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }

.money { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brass-hi); white-space: nowrap; }
.money::before { content: '🪙'; margin-right: .25em; font-size: .9em; }
.pos { color: var(--good); }
.neg { color: var(--bad); }

.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

.lang-switch { display: inline-flex; border-radius: 999px; background: rgba(0, 0, 0, .3); padding: 3px; gap: 2px; }
.lang-switch button {
  border: 0; background: transparent; color: var(--text-dim); padding: .4em .8em; border-radius: 999px; font-weight: 600; font-size: .85rem;
}
.lang-switch button.on { background: var(--parch); color: var(--ink); }

.hidden { display: none !important; }

@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(4px, -2px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

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