:root {
  --paper: #F3EADC;
  --paper-2: #EADDC8;
  --card: #FBF6EE;
  --ink: #3A2C25;
  --ink-soft: #7C6A5D;
  --line: #D8C7AD;
  --gold: #B38A4A;
  --gold-soft: #D9BD8A;
  --terra: #BF7358;
  --terra-dark: #A55F46;
  --rose: #D3A097;
  --sage: #93A48A;
  --plum: #8C6A7E;
  --dusk: #7F98A2;
  --red: #A9443B;
  --green: #4F7E5C;
  --espresso: #241A16;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --script: 'Great Vibes', 'Snell Roundhand', cursive;

  --bg: var(--paper);
  --pad-x: 24px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  position: fixed; inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  transition: background-color .7s ease;
}
body::before { /* Papierstruktur + warmes Licht */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,250,240,.55), transparent 60%),
    radial-gradient(90% 50% at 50% 110%, rgba(179,138,74,.12), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  transition: opacity .7s;
}
body.t-red   { --bg: var(--red); }
body.t-green { --bg: var(--green); }
body.t-dark  { --bg: var(--espresso); }
body.t-red::before, body.t-green::before, body.t-dark::before { opacity: .55; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; -webkit-user-drag: none; }

#app { position: relative; z-index: 1; height: 100%; width: 100%; max-width: 480px; margin: 0 auto; }

/* ---------- Screens ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--safe-t) + 18px) var(--pad-x) calc(var(--safe-b) + 22px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .6s var(--ease-out), visibility 0s linear .6s;
}
.screen.active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .55s ease .12s, transform .6s var(--ease-out) .12s, visibility 0s;
}

/* ---------- Typo ---------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow.light { color: rgba(255,248,238,.78); }
.title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 8.6vw, 38px);
  line-height: 1.08; text-align: center; letter-spacing: -.005em; margin-top: 6px;
}
.title.light { color: #FFF8EE; }
.hint-text { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
.head { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; flex-shrink: 0; }

.flourish { width: 170px; height: 18px; color: var(--gold); flex-shrink: 0; }
.flourish.small { width: 130px; height: 14px; }

/* ---------- Buttons ---------- */
.dock { margin-top: auto; width: 100%; display: flex; justify-content: center; padding-top: 16px; flex-shrink: 0; }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; width: 100%; max-width: 330px; padding: 0 28px; border-radius: 999px;
  font-size: 17px; font-weight: 600; letter-spacing: .01em;
  transition: transform .2s var(--ease-out), box-shadow .2s, background-color .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(180deg, #C77D61, var(--terra-dark));
  color: #FFF7EE;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -8px rgba(165,95,70,.6), 0 2px 4px rgba(58,44,37,.15);
}
.btn-primary::after { /* feiner Doppelrand */
  content: ''; position: absolute; inset: 4px; border-radius: inherit; border: 1px solid rgba(255,240,220,.35); pointer-events: none;
}
.btn-light { background: #FFF8EE; box-shadow: 0 12px 26px -10px rgba(0,0,0,.45); }
.btn-light.red { color: var(--red); }
.btn-light.green { color: var(--green); }
.btn-ico { width: 20px; height: 20px; }
.btn-ghost {
  font-size: 14px; font-weight: 500; color: rgba(255,244,230,.65); padding: 10px 16px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,244,230,.3);
}

.slide-dock { transform: translateY(calc(100% + 60px)); opacity: 0; visibility: hidden; transition: transform .8s var(--ease-spring), opacity .5s, visibility 0s linear .8s; }
.slide-dock.in { transform: none; opacity: 1; visibility: visible; transition: transform .8s var(--ease-spring), opacity .5s; }

/* ---------- 1 · Welcome ---------- */
.welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 0; }
.rise { opacity: 0; transform: translateY(18px); }
#s-welcome.active .rise { animation: rise .9s var(--ease-out) var(--d, 0s) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

.welcome .eyebrow { margin-top: clamp(10px, 2.2dvh, 22px); }
.age { position: relative; width: clamp(170px, 30dvh, 230px); aspect-ratio: 220/180; display: grid; place-items: center; margin: clamp(0px, 1dvh, 8px) 0 -4px; }
.laurel { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sage); }
.age-num {
  position: relative; font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(84px, 15dvh, 118px); letter-spacing: -.02em;
  background: linear-gradient(170deg, #CDA869 10%, #9C7437 55%, #C89F5E 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .04em; margin-top: -.06em;
}
.age-dot { color: var(--terra); -webkit-text-fill-color: var(--terra); }
.welcome-sub { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 4.4dvh, 34px); color: var(--ink); line-height: 1; }
.script-name {
  font-family: var(--script); font-weight: 400; font-size: clamp(76px, 13dvh, 104px); line-height: 1.05;
  color: var(--terra); margin: -2px 0 clamp(2px, 1dvh, 10px);
  text-shadow: 0 2px 0 rgba(255,250,240,.6);
}
.lead { max-width: 300px; margin-top: clamp(10px, 2dvh, 18px); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- 2 · Wheel ---------- */
.wheel-area { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; }
.wheel-wrap {
  position: relative; width: min(100cqw, 100cqh - 30px, 360px); aspect-ratio: 1;
  margin-top: 26px; touch-action: none;
}
.wheel { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 26px rgba(90,60,35,.28)); will-change: transform; cursor: grab; }
.wheel-pointer {
  position: absolute; left: 50%; top: -26px; width: 36px; height: 48px; margin-left: -18px; z-index: 2;
  transform-origin: 50% 30%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25));
}
.swipe-hint { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; pointer-events: none; animation: swipe 2.4s ease-in-out infinite; transition: opacity .3s; }
.swipe-hint.hide { opacity: 0; animation: none; }
@keyframes swipe {
  0%   { transform: translate(40px, -70px) rotate(10deg); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translate(60px, 50px) rotate(-6deg); opacity: 1; }
  70%, 100% { transform: translate(-10px, 90px) rotate(-12deg); opacity: 0; }
}
.wheel-status { min-height: 22px; margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--terra); text-align: center; transition: opacity .3s; }
.wheel-status.bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- 3/5 · Ergebnis ---------- */
.result { justify-content: center; text-align: center; color: #FFF8EE; }
.result .title { max-width: 330px; margin-bottom: clamp(16px, 3dvh, 28px); }
.result .dock { margin-top: clamp(18px, 4dvh, 36px); }
.meme {
  background: #FFF8EE; padding: 10px 10px 12px; border-radius: 6px;
  box-shadow: 0 22px 40px -16px rgba(0,0,0,.5);
  width: min(78vw, 36dvh, 300px);
}
.meme img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: #ddd; }
.tilt-l { transform: rotate(-2.5deg); } .tilt-r { transform: rotate(2.5deg); }
.screen.active .meme { animation: drop .8s var(--ease-spring) .35s both; }
@keyframes drop { from { opacity: 0; transform: translateY(-30px) rotate(-8deg) scale(.9); } }
.result-note { margin-top: clamp(14px, 2.6dvh, 22px); max-width: 300px; font-size: 15px; line-height: 1.5; color: rgba(255,248,238,.85); }

/* ---------- 4 · Memory ---------- */
.mem-stats { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.mem-stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-soft); }
.board-wrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; padding-top: 14px; }
.board {
  --gap: 12px;
  --s: min((100cqw - var(--gap)) / 2, (100cqh - 3 * var(--gap)) / 4, 170px);
  display: grid; grid-template-columns: repeat(2, var(--s)); grid-template-rows: repeat(4, var(--s)); gap: var(--gap);
}
.mcard { position: relative; perspective: 800px; transition: transform .35s var(--ease-spring); touch-action: manipulation; }
.mcard.open { transform: scale(1.07); z-index: 2; }
.mcard.matched { transform: scale(1); }
.mcard .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s var(--ease-out); }
.mcard.open .inner, .mcard.matched .inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.face.back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,250,240,.9), transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(179,138,74,.09) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(179,138,74,.09) 9px 10px),
    var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px -10px rgba(90,60,35,.45);
  display: grid; place-items: center;
}
.face.back::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(179,138,74,.45); border-radius: 10px; }
.face.back::after { content: ''; position: absolute; inset: 9px; border: 1px dashed rgba(179,138,74,.25); border-radius: 8px; }
.face.back svg { width: 34%; height: 34%; fill: var(--gold-soft); opacity: .9; }
.face.front { transform: rotateY(180deg); border: 3px solid var(--card); box-shadow: 0 12px 24px -10px rgba(90,60,35,.55); background: var(--paper-2); }
.face.front img { width: 100%; height: 100%; object-fit: cover; }
.mcard.matched .face.front { border-color: var(--gold-soft); animation: glow 1s ease; }
.mcard.matched .face.front::after {
  content: ''; position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23BF7358' d='M16 28S3 20.5 3 11.5A6.5 6.5 0 0 1 16 8a6.5 6.5 0 0 1 13 3.5C29 20.5 16 28 16 28z'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); animation: pop .5s var(--ease-spring) .2s both;
}
.mcard.nope { animation: nope .45s ease; }
@keyframes nope { 20%,60% { transform: scale(1.07) translateX(-5px); } 40%,80% { transform: scale(1.07) translateX(5px); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(217,189,138,.9); } 100% { box-shadow: 0 0 0 16px rgba(217,189,138,0); } }
@keyframes pop { from { transform: scale(0); } }

/* ---------- 6 · Countdown ---------- */
#s-countdown { justify-content: center; gap: 28px; }
.cd-label { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.cd-stage { --amp: 0px; position: relative; width: min(68vw, 42dvh, 280px); aspect-ratio: 1; display: grid; place-items: center; }
.cd-stage.shaking { animation: shake .12s linear infinite; }
@keyframes shake {
  0%   { transform: translate(var(--amp), 0) rotate(calc(var(--amp) * .15deg / 1px)); }
  25%  { transform: translate(0, calc(var(--amp) * -1)); }
  50%  { transform: translate(calc(var(--amp) * -1), calc(var(--amp) * .5)) rotate(calc(var(--amp) * -.15deg / 1px)); }
  75%  { transform: translate(calc(var(--amp) * .5), var(--amp)); }
  100% { transform: translate(var(--amp), 0); }
}
.cd-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.cd-track { fill: none; stroke: rgba(217,189,138,.15); stroke-width: 3; }
.cd-prog { fill: none; stroke: var(--gold-soft); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 565.5; stroke-dashoffset: 565.5; transition: stroke-dashoffset 1s linear, stroke .3s; }
.cd-num {
  font-family: var(--serif); font-weight: 600; font-size: min(46vw, 28dvh, 190px); line-height: 1; color: #F6E3C8;
  font-variant-numeric: lining-nums; text-shadow: 0 0 var(--glow, 20px) rgba(217,165,91,.55);
}
.cd-num.tick { animation: tick .9s var(--ease-out); }
@keyframes tick { 0% { transform: scale(1.6); opacity: 0; filter: blur(8px); } 30% { opacity: 1; filter: none; } 100% { transform: scale(1); } }
.cd-num.glitch { animation: glitch .09s steps(2) infinite; color: #fff; }
@keyframes glitch {
  0%   { text-shadow: -6px 0 #ff4d4d, 6px 0 #4dd2ff; transform: translate(3px, -2px) skewX(8deg); clip-path: inset(0 0 40% 0); }
  50%  { text-shadow: 6px 0 #ff4d4d, -6px 0 #4dd2ff; transform: translate(-4px, 3px) skewX(-6deg); clip-path: inset(35% 0 0 0); }
  100% { text-shadow: -3px 0 #ff4d4d, 3px 0 #4dd2ff; transform: none; clip-path: inset(10% 0 20% 0); }
}
.cd-dots { display: flex; gap: 8px; }
.cd-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); animation: pulse 1s ease-in-out infinite; }
.cd-dots span:nth-child(2) { animation-delay: .2s; } .cd-dots span:nth-child(3) { animation-delay: .4s; }
.flash { position: fixed; inset: 0; background: #fff; z-index: 50; pointer-events: none; animation: flash .5s ease-out forwards; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }

/* ---------- 7 · Auth fail ---------- */
.fail-icon {
  width: clamp(104px, 17dvh, 132px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,248,238,.12); border: 1px solid rgba(255,248,238,.3); color: #FFF8EE; margin-bottom: clamp(18px, 3dvh, 28px);
  box-shadow: 0 0 0 12px rgba(255,248,238,.05);
}
.fail-icon svg { width: 56%; }
#s-authfail.active .fail-icon { animation: failin .7s var(--ease-spring) both, wobble 2.8s ease-in-out 1s infinite; }
@keyframes failin { from { transform: scale(.4); opacity: 0; } }
@keyframes wobble { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-7deg); } 94% { transform: rotate(6deg); } 97% { transform: rotate(-3deg); } }
.err-code { margin-top: 14px; font: 500 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; color: rgba(255,248,238,.55); }

/* ---------- 8 · Lückentext ---------- */
#s-cloze .head { margin-bottom: clamp(12px, 2.4dvh, 22px); }
.certificate {
  position: relative; width: 100%; padding: 20px 20px 18px; border-radius: 6px; text-align: center;
  background: var(--card);
  box-shadow: 0 16px 34px -18px rgba(90,60,35,.5), 0 0 0 1px var(--line);
  flex-shrink: 0;
}
.certificate::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(179,138,74,.5); border-radius: 3px; pointer-events: none; }
.certificate::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(179,138,74,.22); border-radius: 2px; pointer-events: none; }
.cert-text { margin-top: 10px; font-family: var(--serif); font-size: clamp(21px, 6vw, 24px); font-weight: 500; line-height: 2.05; color: var(--ink); }
.slot {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: 108px; height: 38px; padding: 0 12px; margin: 0 2px;
  border-radius: 10px; border: 1.5px dashed var(--gold-soft); background: rgba(217,189,138,.12);
  font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1;
  transition: background-color .2s, border-color .2s, transform .25s var(--ease-spring);
}
.slot:empty::before { content: attr(data-label); font-weight: 500; color: rgba(179,138,74,.7); font-size: 14px; }
.slot.hover { background: rgba(191,115,88,.14); border-color: var(--terra); transform: scale(1.06); }
.slot.filled { border-style: solid; border-color: var(--sage); background: rgba(147,164,138,.18); }
.slot.error { border-color: var(--red); background: rgba(169,68,59,.12); animation: nope2 .45s ease; }
.slot.morph { color: var(--terra); }
@keyframes nope2 { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
.signature { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; width: 58%; }
.sig-name { font-family: var(--script); font-size: 36px; line-height: 1; color: var(--terra); height: 38px; padding-left: 8px; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s ease; }
.sig-name.signed { clip-path: inset(0 0 0 0); }
.sig-line { width: 100%; border-top: 1px solid var(--ink-soft); padding-top: 4px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); text-align: left; }
.seal {
  position: absolute; right: 18px; bottom: 14px; width: 74px; height: 74px; opacity: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #C9624C, #8E3A2C 70%);
  box-shadow: 0 4px 10px rgba(80,20,10,.35), inset 0 0 0 5px rgba(255,255,255,.08), inset 0 0 0 7px rgba(0,0,0,.08);
}
.seal.stamp { animation: stamp .55s cubic-bezier(.5,0,.7,1.4) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-30deg); } 70% { opacity: 1; transform: scale(.92) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(-12deg); } }
.cloze-feedback { min-height: 44px; margin: clamp(12px, 2.4dvh, 20px) 0 6px; text-align: center; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); max-width: 320px; display: grid; place-items: center; }
.cloze-feedback.err { color: var(--red); font-weight: 500; }
.cloze-feedback.ok { color: var(--green); font-weight: 600; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 340px; transition: opacity .4s; }
.tile {
  height: 46px; padding: 0 18px; border-radius: 12px; display: inline-flex; align-items: center;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  font-size: 16px; font-weight: 600; touch-action: none; cursor: grab;
  box-shadow: 0 1px 0 #fff inset, 0 6px 14px -8px rgba(90,60,35,.5);
  transition: opacity .3s, transform .3s var(--ease-spring);
}
.tile.lifted { opacity: .25; transform: scale(.94); }
.tile.used { opacity: 0; transform: scale(.6); pointer-events: none; }
.tile.dim { opacity: .35; pointer-events: none; }
.tile.ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; transform: scale(1.08) rotate(-2deg); box-shadow: 0 16px 28px -10px rgba(90,60,35,.6); transition: none; }

/* ---------- 9 · Loot ---------- */
#s-loot { padding-bottom: calc(var(--safe-b) + 10px); }
#s-loot .head { margin-bottom: 8px; }
.loot-stage { position: relative; width: 100%; height: 0; flex-shrink: 0; transition: height .6s var(--ease-out); }
.loot-stage.open { height: clamp(210px, 34dvh, 260px); }
.rays {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--tier, #D9A55B) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%); mask: radial-gradient(circle, #000 0%, transparent 62%);
  animation: spinRays 14s linear infinite; transition: opacity .5s;
}
.rays.on { opacity: .22; }
.rays.big { opacity: .4; }
@keyframes spinRays { to { transform: rotate(360deg); } }

.loot-card {
  --tier: #B9AC9B;
  position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden;
  border-radius: 16px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,240,220,.09), rgba(255,240,220,.03)), #2F231E;
  border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 14px 30px -18px color-mix(in srgb, var(--tier) 80%, transparent);
  color: #F6E9D8;
}
.loot-card::after { /* Glanz-Sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%);
}
.loot-card.shine::after { animation: sweep 1.1s ease .35s; }
@keyframes sweep { to { transform: translateX(120%); } }
.loot-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tier) 70%, #fff), var(--tier) 60%, color-mix(in srgb, var(--tier) 70%, #000));
  color: #2A1E19; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px -4px color-mix(in srgb, var(--tier) 90%, transparent);
}
.loot-ico svg { width: 58%; height: 58%; }
.loot-meta { min-width: 0; flex: 1; }
.loot-rarity { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tier); }
.stars { letter-spacing: 1px; font-size: 9px; }
.loot-name { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.15; margin-top: 2px; }
.loot-flavor { display: none; }

/* Große Präsentationskarte */
.loot-card.hero {
  position: absolute; left: 0; right: 0; top: 50%; flex-direction: column; text-align: center; gap: 10px;
  padding: 20px 18px 18px; border-width: 1.5px; border-radius: 20px;
  transform: translate(120%, -50%) rotate(6deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 60px -10px color-mix(in srgb, var(--tier) 70%, transparent), 0 24px 40px -20px rgba(0,0,0,.8);
}
.loot-card.hero .loot-ico { width: 64px; height: 64px; border-radius: 18px; }
.loot-card.hero .loot-name { font-size: 28px; }
.loot-card.hero .loot-rarity { justify-content: center; font-size: 11.5px; }
.loot-card.hero .loot-flavor { display: block; font-size: 13.5px; line-height: 1.4; color: rgba(246,233,216,.7); font-style: italic; max-width: 290px; margin: 0 auto; }
.loot-card.hero.enter { animation: heroIn .75s var(--ease-spring) forwards; }
.loot-card.hero.leave { animation: heroOut .65s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes heroIn { from { transform: translate(120%, -50%) rotate(6deg); } to { transform: translate(0, -50%) rotate(0); } }
@keyframes heroOut { to { transform: translate(0, calc(-50% + var(--drop, 220px))) scale(.82); opacity: 0; } }

.loot-list { list-style: none; width: 100%; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 2px 8px; scrollbar-width: none; }
.loot-list::-webkit-scrollbar { display: none; }
.loot-item { margin-bottom: 10px; }
.loot-item .loot-card { padding: 10px 12px; gap: 12px; }
.loot-item .loot-ico { width: 40px; height: 40px; border-radius: 11px; }
.loot-item .loot-name { font-size: 19.5px; }

.tier-common    { --tier: #B9AC9B; }
.tier-uncommon  { --tier: #8FB08A; }
.tier-rare      { --tier: #7FA8C6; }
.tier-epic      { --tier: #B38DC8; }
.tier-legendary { --tier: #DDA658; }
.tier-mythic    { --tier: #E8A58F; }
.tier-mythic { border-color: transparent; background:
  linear-gradient(135deg, rgba(255,240,220,.1), rgba(255,240,220,.03)) padding-box, #2F231E padding-box,
  conic-gradient(from var(--a, 0deg), #E8A58F, #F2D39A, #DDA658, #C98DB0, #E8A58F) border-box; animation: holo 4s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes holo { to { --a: 360deg; } }
.tier-mythic .loot-rarity { background: linear-gradient(90deg, #F2D39A, #E8A58F, #C98DB0); -webkit-background-clip: text; background-clip: text; color: transparent; }

.suspense {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 24px; color: #F6E3C8; opacity: 0; transition: opacity .4s;
}
.suspense.on { opacity: 1; animation: pulse 1s ease-in-out infinite; }

.loot-end { display: none; flex-shrink: 0; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .8s, transform .8s var(--ease-out); pointer-events: none; }
.loot-end.show { display: block; }
.loot-end.in { opacity: 1; transform: none; pointer-events: auto; }
.script-line { font-family: var(--script); font-size: 36px; color: var(--gold-soft); line-height: 1.2; }
.end-note { font-size: 13px; color: rgba(246,233,216,.6); margin-top: 2px; }
.shake-screen { animation: shake .1s linear 6; --amp: 4px; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px;
  background: rgba(36,26,22,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s;
}
.modal.open { opacity: 1; visibility: visible; transition: opacity .35s; }
.modal-card {
  position: relative; width: 100%; max-width: 340px; padding: 28px 24px 24px; border-radius: 22px; text-align: center;
  background: var(--card); box-shadow: 0 30px 60px -20px rgba(36,26,22,.6);
  transform: translateY(30px) scale(.94); transition: transform .5s var(--ease-spring);
  display: flex; flex-direction: column; align-items: center;
}
.modal-card::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(179,138,74,.35); border-radius: 16px; pointer-events: none; }
.modal.open .modal-card { transform: none; }
.modal-title { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; margin-top: 12px; }
.modal-text { margin: 10px 0 22px; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Konfetti ---------- */
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

@media (prefers-reduced-motion: reduce) {
  .cd-stage.shaking { animation-duration: .4s; }
}