/* ==========================================================================
   Top Ten (18+) – Themenkarten, Zahlenkarten, Leben-Marken
   ========================================================================== */
.tt { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 8px; }
.tt-rail { flex: none; margin: 0 -4px; }
.tt-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 6px 16px; }
.tt-body > * { width: 100%; max-width: 560px; }
/* Leben bleiben oben, der Rest steht mittig im freien Platz (bei langem Inhalt wird normal gescrollt) */
.tt-body > :nth-child(2) { margin-top: auto; } .tt-body > :last-child { margin-bottom: auto; }
.tt.table .tt-body > * { max-width: 1100px; }

.tt-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tt-lives { display: flex; gap: 4px; }
.tt-life { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--grain), var(--red); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 2px 0 var(--red-d); transition: transform .3s var(--spring), opacity .3s; }
.tt-life svg { width: 11px; height: 11px; fill: #fbf1e2; }
.tt-life.lost { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1.5px var(--wood-line); opacity: .7; transform: scale(.85); }
.tt-life.lost svg { fill: var(--on-wood-3); }
.tt-life.gone { animation: ttLose .7s var(--ease); }
@keyframes ttLose { 30% { transform: scale(1.4) rotate(-20deg); background: var(--red); } 100% { transform: scale(.85); } }

/* Themenkarte */
.tt-theme { position: relative; padding: 0; border-radius: 10px; overflow: hidden; color: var(--ink); background: var(--grain), var(--card); box-shadow: var(--shadow-2); text-align: center; animation: ttCardIn .5s var(--spring) both; }
@keyframes ttCardIn { from { opacity: 0; transform: translateY(-20px) rotate(-3deg); } }
.tt-theme .band { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--grain), var(--red); color: #fbf1e2; font: 800 10.5px var(--text); letter-spacing: .18em; text-transform: uppercase; }
.tt-theme .q { padding: 18px 18px 12px; font: 800 22px/1.2 var(--display); font-variation-settings: "opsz" 48, "SOFT" 60; }
.tt-theme .scale { display: flex; align-items: center; gap: 10px; padding: 0 16px 16px; font: 600 13px var(--text); color: var(--ink-2); }
.tt-theme .scale .bar { flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #e9dcc4, var(--red)); }
.tt-theme .scale span { flex: 0 1 34%; }
.tt-theme .scale span:first-child { text-align: left; } .tt-theme .scale span:last-child { text-align: right; }
.tt-theme .scale b { display: block; font: 800 18px var(--display); color: var(--ink); }
.tt-theme.choice { cursor: pointer; transition: transform .3s var(--spring), box-shadow .3s; }
.tt-theme.choice:hover { transform: translateY(-4px) rotate(-.6deg); }
.tt-theme.choice:nth-child(2) { animation-delay: .1s; }
.tt-choices { display: flex; flex-direction: column; gap: 14px; }
.tt.table .tt-choices { flex-direction: row; }
.tt.table .tt-theme .q { font-size: clamp(26px, 3vw, 40px); padding: 26px 30px 16px; }
.tt.table .tt-theme .scale { font-size: 17px; }

.tt-backs { display: flex; justify-content: center; gap: 14px; padding: 10px 0; }
.tt-back { width: 120px; aspect-ratio: 5 / 7; border-radius: 10px; background: var(--grain), repeating-linear-gradient(45deg, rgba(251, 241, 226, .12) 0 2px, transparent 2px 12px), var(--red); box-shadow: inset 0 0 0 6px #fbf1e2, var(--shadow-1); display: grid; place-items: center; color: #fbf1e2; font: 800 22px var(--display); animation: ttWiggle 2.4s ease-in-out infinite; }
.tt-back:nth-child(2) { animation-delay: -1.2s; }
@keyframes ttWiggle { 50% { transform: translateY(-6px) rotate(2deg); } }

/* Zahlenkarte */
.tt-me { display: flex; gap: 16px; align-items: center; }
.tt-num { flex: none; width: 104px; aspect-ratio: 5 / 7; border-radius: 10px; position: relative; perspective: 600px; }
.tt-num .face { position: absolute; inset: 0; border-radius: 10px; display: grid; place-items: center; backface-visibility: hidden; transition: transform .7s var(--ease); }
.tt-num .front { background: var(--grain), var(--card); box-shadow: inset 0 0 0 5px var(--red), var(--shadow-1); color: var(--red); font: 800 58px/1 var(--display); font-variation-settings: "opsz" 144, "SOFT" 30; transform: rotateY(180deg); }
.tt-num .front small { position: absolute; top: 10px; left: 12px; font: 800 14px var(--display); }
.tt-num .back { background: var(--grain), repeating-linear-gradient(45deg, rgba(251, 241, 226, .12) 0 2px, transparent 2px 12px), var(--red); box-shadow: inset 0 0 0 5px #fbf1e2, var(--shadow-1); color: #fbf1e2; font: 800 16px var(--display); }
.tt-num.open .front { transform: none; } .tt-num.open .back { transform: rotateY(-180deg); }
.tt-num.hide .front { filter: blur(10px); }
.tt-answer { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tt-answer label { font: 800 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--on-wood-3); }
.tt-answer textarea { width: 100%; min-height: 76px; resize: none; padding: 10px 12px; border-radius: 6px; border: 0; color: var(--ink); background: var(--grain), repeating-linear-gradient(180deg, transparent 0 25px, rgba(46, 123, 119, .2) 25px 26px), var(--card); font: 700 22px/26px var(--hand); outline: none; user-select: text; -webkit-user-select: text; box-shadow: var(--shadow-1); }
.tt-answer textarea:focus { box-shadow: 0 0 0 3px var(--mustard), var(--shadow-1); }
.tt-note { color: var(--on-wood-2); font: 600 14px var(--text); text-align: center; }
.tt-note b { color: var(--on-wood); }

/* Antworten */
.tt-answers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tt.table .tt-answers { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.tt-a { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 8px; color: var(--ink); background: var(--grain), var(--card); box-shadow: var(--shadow-1); text-align: left; border: 0; font: inherit; animation: popIn .4s var(--spring) both; transition: transform .25s var(--spring), box-shadow .2s; }
.tt-a .txt { font: 700 22px/1.15 var(--hand); min-height: 26px; word-break: break-word; }
.tt.table .tt-a .txt { font-size: 30px; }
.tt-a .who { display: flex; align-items: center; gap: 6px; font: 700 12px var(--text); color: var(--ink-3); margin-top: auto; }
.tt-a .who .av { --s: 22px; }
.tt-a.tap { cursor: pointer; }
.tt-a.tap:hover { transform: translateY(-3px); }
.tt-a.ranked { box-shadow: 0 0 0 3px var(--teal), var(--shadow-1); }
.tt-a .rank { position: absolute; top: -10px; right: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grain), var(--teal); color: #f1fbf8; font: 800 15px var(--display); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); animation: popIn .3s var(--spring); }
.tt-a.pending { opacity: .55; }
.tt-a.pending .txt { font: 600 13px var(--text); color: var(--ink-3); }
.tt-a .numtag { position: absolute; top: -12px; left: -8px; width: 40px; height: 52px; border-radius: 6px; display: grid; place-items: center; background: var(--grain), var(--card); color: var(--red); font: 800 24px var(--display); box-shadow: inset 0 0 0 3px var(--red), 0 4px 8px rgba(0, 0, 0, .35); transform: rotate(-8deg); animation: ttFlipIn .5s var(--spring) both; }
@keyframes ttFlipIn { from { transform: rotateY(90deg) rotate(-8deg); } }
.tt-a.wrong { box-shadow: 0 0 0 3px var(--red), var(--shadow-1); animation: shake .5s; }
.tt-a.wrong::after { content: "Falsch"; position: absolute; right: 10px; top: 10px; font: 800 12px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--red); border: 2px solid var(--red); border-radius: 4px; padding: 3px 6px; transform: rotate(8deg); }
.tt-a.right { box-shadow: 0 0 0 3px var(--teal), var(--shadow-1); }
.tt.table .tt-a .numtag { width: 56px; height: 72px; font-size: 34px; }

.tt-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tt-actions .btn { flex: 1 1 160px; max-width: 320px; }
.tt-result { text-align: center; padding: 12px; border-radius: 8px; color: var(--ink); background: var(--grain), var(--paper); box-shadow: var(--shadow-1); animation: popIn .4s var(--spring); }
.tt-result h3 { margin: 0 0 4px; font: 800 24px var(--display); }
.tt-result p { margin: 0; color: var(--ink-2); }
.tt-a.flipped { padding-left: 46px; } .tt.table .tt-a.flipped { padding-left: 62px; }