/* Handy 7 – Antwortkacheln „Forever“ (Sebastian 02.10.2026: Paket forever-antwortbuttons, dazu unsere leuchtenden Runenkreise).
   Fassung, Ecken, Raute und Druck sind CSS; Steinplatte + blauer Kern als Textur. Runenkreis: beim Drücken baut er sich leicht auf,
   nach dem ersten Tippen steht er dezent, beim Einloggen ist er voll da (Gold außen, Türkis innen, Lichtstoß). Markup: server/ui.js answerPad(). */
@property --fa-rp { syntax: '<number>'; inherits: true; initial-value: 0 }
@property --fa-rq { syntax: '<number>'; inherits: true; initial-value: 0 }

.fa-answers { --fa-gap: 12px; --fa-height: clamp(150px, 42vw, 210px); --fa-diamond: clamp(58px, 17vw, 80px); --fa-letter-font: 'Friz Quadrata', Friz, Georgia, serif;
  --fa-slate: url(/assets/ui/answers/slate.webp); --fa-blue: url(/assets/ui/answers/blue.webp); width: 100%; color: #ebdfc4 }
.fa-answers * { box-sizing: border-box }
.fa-answers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--fa-height); gap: var(--fa-gap); padding: 3px }
body.play .ppane[data-tab="act"] > .pad8 { order: 2 }
body.qmode .pad8 { flex: 1 0 auto; display: flex; min-height: 44dvh } body.qmode .pad8 .fa-answers__grid { flex: 1; grid-auto-rows: minmax(140px, 1fr) }

/* ---- Kachel: der ganze Rahmen ist der Button ---- */
.fa-answer { --rim-hi: #9b8457; --rim-mid: #635131; --rim-low: #322819; --gem: var(--fa-blue); --fa-rp: 0; --fa-rq: 0;
  position: relative; display: block; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: #efdfb5; text-align: center; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; isolation: isolate; overflow: visible; cursor: pointer;
  transition: --fa-rp .5s ease-in .2s, --fa-rq .35s ease-in }   /* zurück zu „ruhend“ erst nach kurzer Pause: so springt der Kreis nicht weg, bevor der Server „ausgewählt“ meldet */
.fa-answer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, var(--rim-hi), var(--rim-mid) 28%, var(--rim-low) 55%, #705b37 78%, #98804f);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); z-index: -2; transition: filter .3s }
.fa-answer::after { content: ''; position: absolute; inset: 3px; background: linear-gradient(140deg, #090e12, #27323a 38%, #101519 58%, #090d0f);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); z-index: -1 }
.fa-answer:focus-visible { outline: 2px solid #e8cb83; outline-offset: 4px }
.fa-answer__face { position: absolute; inset: 6px 6px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, #71848b55, #101920 50%, #080d11);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  transition: transform 120ms ease-out; pointer-events: none; isolation: isolate }
.fa-answer__face::before { content: ''; position: absolute; inset: 1px; background-image: linear-gradient(#050c1244, #05080c66), var(--fa-slate); background-size: auto, 240px 240px; background-position: center;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  box-shadow: inset 0 2px 2px #9ea9a51e, inset 0 -4px 4px #0009; transition: box-shadow 120ms ease-out; z-index: -2 }
/* warmes Licht des Runenkreises auf der Steinplatte (wächst mit dem Kreis) */
.fa-answer__face::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgb(255 206 110 / calc(.10 * var(--fa-rp) + .16 * var(--fa-rq))), rgb(80 190 220 / calc(.08 * var(--fa-rq))) 38%, transparent 66%) }
.fa-answer__corner { position: absolute; width: 21px; height: 21px; pointer-events: none; background: linear-gradient(135deg, #b49b68, #675133 60%, #302717); clip-path: polygon(0 13px, 13px 0, 21px 0, 0 21px); z-index: 2 }
.fa-answer__corner::before { content: ''; position: absolute; width: 3px; height: 3px; top: 7px; left: 7px; border-radius: 50%; background: #1b1915; box-shadow: 0 1px #c9ac6e88 }
.fa-answer__corner--tl { top: 0; left: 0 } .fa-answer__corner--tr { top: 0; right: 0; transform: rotate(90deg) } .fa-answer__corner--br { bottom: 0; right: 0; transform: rotate(180deg) } .fa-answer__corner--bl { bottom: 0; left: 0; transform: rotate(270deg) }

/* ---- Raute mit Buchstabe ---- */
.fa-answer__letter { width: var(--fa-diamond); height: var(--fa-diamond); position: relative; z-index: 2; display: grid; place-items: center; isolation: isolate; transform: translateY(-9px);
  font-family: var(--fa-letter-font); font-size: clamp(38px, 11vw, 54px); font-weight: 400; line-height: 1; color: #eedeb7; text-shadow: 0 -1px #fff3cf, 1px 1px #8b7549, 0 2px #332817, 0 3px 3px #000b }
.fa-answer__letter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #c5aa70, #7e6038 38%, #3a2b18 48%, #bda06a 51%, #6e4c29); transform: rotate(45deg); box-shadow: 0 0 0 1px #171611, 3px 3px 5px #0009; z-index: -2 }
.fa-answer__letter::after { content: ''; position: absolute; inset: 4px; background-image: linear-gradient(#021c3330, #030c2155), var(--gem); background-position: center; background-size: auto, 160% 160%;
  border: 1px solid #71a6b247; transform: rotate(45deg); box-shadow: inset 1px 1px 1px #8ed9eb44, inset -2px -2px 2px #051322aa; z-index: -1 }
.fa-answer__text { position: absolute; z-index: 2; top: 10%; left: 8px; right: 8px; font: 800 17px/1.1 var(--u5, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #f3dfae; text-shadow: 0 2px 6px #000 }
.fa-answer__label { position: absolute; z-index: 2; bottom: 9px; left: 4px; right: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 20px;
  font: 700 11.5px/1.2 var(--u5, system-ui, sans-serif); letter-spacing: .04em; color: #d1c197; padding: 0 2px; overflow-wrap: anywhere }
.fa-answer__label .fa-lock { width: 11px; height: 11px; flex: none }

/* ---- Runenkreis (gleiche Runen wie am Hauptknopf: Gold außen, Türkis innen) ----
   --fa-rp: Außenring zeichnet sich im Uhrzeigersinn (0 → 1), --fa-rq: Innenring + volle Leuchtkraft (eingeloggt). */
.fa-rune { position: absolute; z-index: 1; left: 50%; top: calc(50% - 9px); width: min(88%, 172px); aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  opacity: calc(var(--fa-rp) * .78 + var(--fa-rq) * .22); scale: calc(.8 + .2 * var(--fa-rp) + .04 * var(--fa-rq)); mix-blend-mode: screen }
.fa-rune .r1, .fa-rune .r2 { position: absolute; inset: 0; display: block }
.fa-rune .r1 { -webkit-mask: conic-gradient(from 0deg, #000 calc(var(--fa-rp) * 360deg), transparent 0); mask: conic-gradient(from 0deg, #000 calc(var(--fa-rp) * 360deg), transparent 0) }
.fa-rune .r2 { inset: 17%; opacity: var(--fa-rq); -webkit-mask: conic-gradient(from 180deg, #000 calc(var(--fa-rq) * 360deg), transparent 0); mask: conic-gradient(from 180deg, #000 calc(var(--fa-rq) * 360deg), transparent 0) }
.fa-rune .r1::before, .fa-rune .r2::before { content: ''; position: absolute; inset: 0; background: url(/assets/ui/v5/rune-gold.svg) center / contain no-repeat; animation: faspin 40s linear infinite;
  filter: drop-shadow(0 0 calc(2px + 5px * var(--fa-rq)) rgb(255 205 90 / calc(.6 + .4 * var(--fa-rq)))) brightness(calc(1.05 + .35 * var(--fa-rq))) }
.fa-rune .r2::before { background-image: url(/assets/ui/v5/rune-teal.svg); animation-duration: 16s; animation-direction: reverse; filter: drop-shadow(0 0 5px rgb(90 210 240 / .85)) }
@keyframes faspin { to { rotate: 360deg } }

/* ---- Zustände ---- */
/* Drückend (nur ruhende Kachel): Platte sinkt ein, der Kreis beginnt sich zu zeichnen */
.fa-answer:not(:disabled):active .fa-answer__face { transform: translateY(3px); transition-duration: 70ms }
.fa-answer:not(:disabled):active .fa-answer__face::before { box-shadow: inset 0 5px 6px #000d, inset 0 -1px #b8c8c02b; transition-duration: 70ms }
.fa-answer[data-state="idle"]:not(:disabled):active { --fa-rp: .42; transition: --fa-rp .34s cubic-bezier(.2, .7, .3, 1) 0s }
/* Einmal getippt: Kreis schließt sich, steht dezent und dreht sich langsam */
.fa-answer[data-state="selected"] { --rim-hi: #cfb174; --rim-mid: #a3864c; --rim-low: #5c4424; --fa-rp: 1; transition: --fa-rp .6s cubic-bezier(.25, .8, .3, 1) 0s, --fa-rq .3s }
.fa-answer[data-state="selected"] .fa-answer__letter::after { background-image: linear-gradient(#00345708, #04152522), var(--gem); box-shadow: inset 1px 1px 1px #a2e7ed66, inset -2px -2px 2px #04172d88 }
.fa-answer[data-state="selected"] .fa-answer__label { color: #f0db9e }
.fa-answer[data-state="selected"]:not(:disabled):active { --fa-rq: .45; transition: --fa-rq .3s cubic-bezier(.2, .7, .3, 1) 0s }   /* zweites Tippen: der innere Ring setzt schon an */
/* Eingeloggt: Kreis voll da – Innenring zeichnet sich, Lichtstoß, Raute leuchtet */
.fa-answer[data-state="logged"] { --rim-hi: #e6c886; --rim-mid: #a3864c; --rim-low: #5c4424; --fa-rp: 1; --fa-rq: 1; transition: --fa-rp .3s, --fa-rq .55s cubic-bezier(.25, .8, .3, 1) 0s }
.fa-answer[data-state="logged"]::before { filter: brightness(1.15) }
.fa-answer[data-state="logged"] .fa-answer__letter::after { box-shadow: inset 1px 1px 1px #b8f2f888, inset -2px -2px 2px #04172d88, 0 0 18px rgb(90 210 240 / .55) }
.fa-answer[data-state="logged"] .fa-answer__label { color: #f3e2b0 }
.fa-answer[data-state="logged"] .fa-rune::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; box-shadow: 0 0 0 2px #ffe3a0, 0 0 26px 6px rgb(255 206 110 / .7), inset 0 0 20px rgb(90 210 240 / .5); animation: faburst .8s cubic-bezier(.2, .7, .3, 1) both }
@keyframes faburst { from { scale: .55; opacity: 1 } to { scale: 1.18; opacity: 0 } }
/* Gesperrt heißt nicht grau (Paket: nach dem Einloggen bleiben die anderen normal) – die alten Regeln für button[disabled] gelten hier nicht */
.fa-answers .fa-answer[disabled] { opacity: 1; filter: none }
/* Ausgeblendet (Hinweis/Fähigkeit hat sie gestrichen) */
.fa-answers .fa-answer[data-state="disabled"] { opacity: .18; filter: grayscale(1) }
.fa-answer:disabled { cursor: default }

@media (max-width: 340px) { .fa-answers { --fa-gap: 10px } }
@media (min-width: 700px) { .fa-answers { --fa-height: 220px; --fa-diamond: 90px } .fa-answer__letter { font-size: 62px } }
@media (prefers-reduced-motion: reduce) { .fa-answer, .fa-answer__face, .fa-answer__face::before { transition: none !important } .fa-rune .r1::before, .fa-rune .r2::before, .fa-rune::after { animation: none !important } }