:root { --bg1:#0f2a1d; --bg2:#7a1020; --gold:#f5c542; --door:#b3162d; --door2:#8e0f22; --paper:#fff8e1; }
* { box-sizing: border-box; }
body {
  margin:0; min-height:100vh; font-family: Georgia, "Times New Roman", serif; color:#fff;
  background: radial-gradient(circle at top, var(--bg2), var(--bg1) 70%) fixed;
}
a { color: var(--gold); }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; background:#0006; }
.brand { font-size:1.4rem; color:var(--gold); text-decoration:none; font-weight:bold; }
.who { font-size:.9rem; opacity:.9; }
.wrap { max-width:900px; margin:0 auto; padding:20px 16px 50px; }
h1, h2 { color: var(--gold); }
.card { background:var(--paper); color:#222; border:3px solid var(--gold); border-radius:12px; padding:18px 20px; margin:16px 0; }
.card h2, .card h3 { color: var(--door); margin-top:0; }
.card a { color: var(--door); }
label { display:block; margin:10px 0 4px; font-weight:bold; }
input[type=text], input[type=email], input[type=password], input[type=number] {
  width:100%; padding:9px 10px; border:1px solid #bbb; border-radius:8px; font-size:1rem; font-family:inherit;
}
.inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.inline > div { flex:1 1 180px; }
button, .btn {
  display:inline-block; padding:9px 18px; border:0; border-radius:8px; background:var(--door); color:#fff;
  font-size:1rem; cursor:pointer; text-decoration:none; font-family:inherit;
}
.card a.btn { color:#fff; }
button.sec, .btn.sec { background:#6b6b6b; }
button.danger { background:#7a1020; }
button.small { padding:4px 10px; font-size:.85rem; }
table { width:100%; border-collapse:collapse; }
td, th { padding:7px 6px; border-bottom:1px solid #e3d8b0; text-align:left; }
.flash { background:var(--gold); color:#222; padding:10px 14px; border-radius:8px; margin-bottom:12px; }
.err { background:#ffd6d6; color:#7a1020; padding:10px 14px; border-radius:8px; margin-bottom:12px; }
.muted { opacity:.7; font-size:.9rem; }
.tabs { display:flex; gap:8px; margin-bottom:8px; }
.stats { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.chip { background:#fff; border:1px solid #d9c88a; border-radius:999px; padding:3px 12px; font-size:.9rem; }

/* Türchen */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; margin:20px 0; }
.door { position:relative; perspective:700px; aspect-ratio:1; cursor:pointer; }
.behind {
  position:absolute; inset:0; border-radius:10px; background:var(--paper); color:#333; padding:6px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:1.15rem; font-weight:bold; word-break:break-word; line-height:1.15;
}
.behind small { display:block; font-weight:normal; font-size:.75rem; margin-top:4px; }
.inner { position:absolute; inset:0; transition:transform .7s; transform-style:preserve-3d; transform-origin:left center; }
.door.open .inner { transform:rotateY(-110deg); pointer-events:none; }
.front {
  position:absolute; inset:0; border-radius:10px; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--door),var(--door2)); border:3px solid var(--gold);
  font-size:2.4rem; font-weight:bold; color:var(--gold); box-shadow:0 4px 10px #0007;
}
.door.locked .front { filter:saturate(.5) brightness(.7); }
.door:not(.locked):not(.open):hover .front { filter:brightness(1.15); }
.shake { animation: shake .3s; }
@keyframes shake { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
dialog { border:3px solid var(--gold); border-radius:14px; background:var(--paper); color:#222; max-width:min(460px,92vw); padding:24px; text-align:center; }
dialog::backdrop { background:#000a; }
dialog h2 { color:var(--door); margin:8px 0; }
dialog .big { font-size:2rem; font-weight:bold; margin:10px 0; }

/* Namens-Rad */
.reel { position:relative; height:70px; /* 64px Zeile + 2×3px Rahmen */ overflow:hidden; margin:14px 0 6px; border-radius:10px; background:#fff;
  border:3px solid var(--door); cursor:pointer; }
.reel::before, .reel::after { content:""; position:absolute; left:0; right:0; height:20px; z-index:1; pointer-events:none; }
.reel::before { top:0; background:linear-gradient(#fff, #fff0); }
.reel::after { bottom:0; background:linear-gradient(#fff0, #fff); }
.strip { will-change:transform; }
.strip div { height:64px; line-height:64px; font-size:1.7rem; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 10px; color:#222; }
.reel.landed { cursor:default; border-color:var(--gold); animation:pop .5s; }
.reel.landed .strip div:last-child { color:var(--door); }
@keyframes pop { 40% { transform:scale(1.08); } }
dialog .note { min-height:1.4em; opacity:0; transition:opacity .6s; }
dialog .note.show { opacity:1; }

.behind span { opacity:0; transition:opacity .5s; }
.door.shown .behind span { opacity:1; }