/* ================================================================ Modus „Buchstäblich!“: die Wort-Show
   Look: Scrabble-Brett trifft Setzkasten – tiefes Petrol mit Spielbrett-Raster und farbigen Prämienfeldern,
   Holzsteine aus Ahorn mit Steinwert, Papierkarten mit Schreibmaschinenschrift, Holzletter-Schrift „Alfa Slab One“.
   Quizzly mit Lesebrille und Bleistift. Gilt für Host (body.host) und Handy (body.play), sobald body[data-mode="word"]. */

body[data-mode="word"] {
  --ink: #1d2a2e;
  --ink-soft: #46595e;
  --bg1: #072328;
  --bg2: #0f4247;
  --paper: #fbf6ea;
  --paper-2: #f1e7d0;
  --pink: #e88aa0;
  --blue: #2f6db5;
  --yellow: #f2c14e;
  --green: #2f9e5a;
  --orange: #e07a2f;
  --teal: #1f8f86;
  --purple: #7a4fc4;
  --red: #c8443a;
  --gold: #f2c14e;
  --opt-0: #c8443a;
  --opt-1: #2f6db5;
  --opt-2: #d99a1e;
  --opt-3: #2f9e5a;
  --accent: #f2c14e;
  --radius: 14px;
  --shadow: 0 6px 0 rgba(2, 18, 22, 0.55);
  --shadow-sm: 0 3px 0 rgba(2, 18, 22, 0.55);
  --font-slab: 'Alfa Slab One', 'Fredoka', serif;
  --font-type: 'Special Elite', 'Courier New', monospace;
  /* Prämienfelder wie auf dem Spielbrett */
  --dl: #8fc6e6;
  --tl: #2f6db5;
  --dw: #eaa3b2;
  --tw: #c8443a;
  --maple: linear-gradient(160deg, #fbe7bd 0%, #f0cf8f 55%, #e2b56d 100%);
  --wood: linear-gradient(170deg, #9a5b2c, #6f3d1b 60%, #52290f);
}

/* ------------------------------------------------------------ Hintergrund: Spielbrett-Raster mit Prämienfeldern */
body[data-mode="word"] .bg {
  background:
    radial-gradient(ellipse 70% 55% at 20% 0%, rgba(40, 140, 140, 0.45), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(90, 40, 20, 0.55), transparent 70%),
    linear-gradient(160deg, var(--bg2), var(--bg1) 75%);
}
body[data-mode="word"] .bg::before {
  inset: -30%;
  opacity: 1;
  transform: rotate(-8deg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill-opacity='0.16'%3E%3Crect x='0' y='0' width='60' height='60' fill='%23c8443a'/%3E%3Crect x='120' y='60' width='60' height='60' fill='%23eaa3b2'/%3E%3Crect x='240' y='120' width='60' height='60' fill='%238fc6e6'/%3E%3Crect x='60' y='180' width='60' height='60' fill='%232f6db5'/%3E%3Crect x='180' y='240' width='60' height='60' fill='%23eaa3b2'/%3E%3Crect x='0' y='120' width='60' height='60' fill='%238fc6e6'/%3E%3C/g%3E%3Cpath d='M60 0V300M120 0V300M180 0V300M240 0V300M0 60H300M0 120H300M0 180H300M0 240H300' stroke='%23fbf6ea' stroke-opacity='0.07' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  animation: wordDrift 120s linear infinite;
}
@keyframes wordDrift { to { background-position: 600px 300px; } }
/* verstreute Holzsteine am Rand */
body[data-mode="word"] .bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='84' height='84' rx='12' fill='%23f0cf8f' stroke='%23b07a3a' stroke-width='3'/%3E%3Ctext x='50' y='70' text-anchor='middle' font-family='Georgia,serif' font-weight='900' font-size='58' fill='%233a2414'%3EW%3C/text%3E%3Ctext x='80' y='86' text-anchor='middle' font-family='Georgia' font-weight='700' font-size='16' fill='%233a2414'%3E3%3C/text%3E%3C/svg%3E") 3vmin 70vh / 11vmin no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='84' height='84' rx='12' fill='%23f0cf8f' stroke='%23b07a3a' stroke-width='3'/%3E%3Ctext x='50' y='70' text-anchor='middle' font-family='Georgia,serif' font-weight='900' font-size='58' fill='%233a2414'%3EO%3C/text%3E%3Ctext x='80' y='86' text-anchor='middle' font-family='Georgia' font-weight='700' font-size='16' fill='%233a2414'%3E2%3C/text%3E%3C/svg%3E") calc(100% - 4vmin) 6vh / 9vmin no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='84' height='84' rx='12' fill='%23f0cf8f' stroke='%23b07a3a' stroke-width='3'/%3E%3Ctext x='50' y='70' text-anchor='middle' font-family='Georgia,serif' font-weight='900' font-size='58' fill='%233a2414'%3ER%3C/text%3E%3Ctext x='80' y='86' text-anchor='middle' font-family='Georgia' font-weight='700' font-size='16' fill='%233a2414'%3E1%3C/text%3E%3C/svg%3E") calc(100% - 9vmin) 78vh / 8vmin no-repeat;
}
body[data-mode="word"] .bg .blob { opacity: 0.16; }
body[data-mode="word"] .bg .blob.b1 { background: #1fb5a6; }
body[data-mode="word"] .bg .blob.b2 { background: #f2c14e; }
body[data-mode="word"] .bg .blob.b3 { background: #c8443a; }

/* ------------------------------------------------------------ Grundbausteine */
body[data-mode="word"] .card { border-width: 3px; }
body[data-mode="word"] .logo { font-family: var(--font-slab); font-weight: 400; letter-spacing: 0.02em; }
body[data-mode="word"] .logo span { color: #f6d58e !important; text-shadow: 0 0.06em 0 #6f3d1b, 0 0.12em 0 rgba(0, 0, 0, 0.35); }
body[data-mode="word"] .logo-sub, body[data-mode="word"] .editionbadge { font-family: var(--font-type); letter-spacing: 0.04em; text-transform: none; color: #fbf6ea; }
body[data-mode="word"] .intro .rname, body[data-mode="word"] .scores h1, body[data-mode="word"] .podium h1 { font-family: var(--font-slab); font-weight: 400; letter-spacing: 0.02em; }
body[data-mode="word"] .intro .rtag, body[data-mode="word"] .scores .sub { font-family: var(--font-type); }
body[data-mode="word"] .insertcoin { font-family: var(--font-type); text-transform: none; letter-spacing: 0.02em; color: var(--gold); animation: none; }
body[data-mode="word"] :is(.lobby, .votescreen) { --lacc: var(--gold); --lacc-ink: var(--ink); --lpanel: rgba(4, 30, 34, 0.62); --lline: rgba(251, 246, 234, 0.18); }
body[data-mode="word"] { --chip-bg: rgba(4, 26, 30, 0.6); }
body[data-mode="word"] .qhead .rbadge { font-family: var(--font-slab); font-weight: 400; letter-spacing: 0.02em; }
body[data-mode="word"] .qcard { font-family: var(--font-type); font-weight: 400; }

/* Maskottchen: Lesebrille aus Horn, Bleistift hinterm Ohr, kein Doktorhut */
body[data-mode="word"] .quizzly .qz-specs, body[data-mode="word"] .quizzly .qz-pencil { display: inline; }
body[data-mode="word"] .quizzly .qz-cap { display: none; }

/* ------------------------------------------------------------ Holzstein */
.wtile {
  --ts: 3.4rem;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ts);
  height: var(--ts);
  flex: none;
  border-radius: calc(var(--ts) * 0.14);
  background: var(--maple);
  box-shadow: inset 0 calc(var(--ts) * -0.06) 0 rgba(120, 70, 20, 0.35), inset 0 calc(var(--ts) * 0.04) 0 rgba(255, 255, 255, 0.55), 0 calc(var(--ts) * 0.07) 0 rgba(30, 14, 4, 0.55);
  color: #2d1a0c;
  font-family: 'Alfa Slab One', serif;
  line-height: 1;
  user-select: none;
}
.wtile b { font-weight: 400; font-size: calc(var(--ts) * 0.56); transform: translateY(-0.03em); }
.wtile i { position: absolute; right: calc(var(--ts) * 0.09); bottom: calc(var(--ts) * 0.06); font-style: normal; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: calc(var(--ts) * 0.22); }
.wtile em { position: absolute; top: calc(var(--ts) * -0.2); left: 50%; transform: translateX(-50%); font-style: normal; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: calc(var(--ts) * 0.22); padding: 0.05em 0.35em; border-radius: 99px; border: 2px solid #1d2a2e; color: #1d2a2e; white-space: nowrap; }
.wtile.x-dl { box-shadow: inset 0 0 0 calc(var(--ts) * 0.07) var(--dl, #8fc6e6), inset 0 calc(var(--ts) * -0.06) 0 rgba(120, 70, 20, 0.35), 0 calc(var(--ts) * 0.07) 0 rgba(30, 14, 4, 0.55); }
.wtile.x-dl em { background: var(--dl, #8fc6e6); }
.wtile.x-dw { box-shadow: inset 0 0 0 calc(var(--ts) * 0.07) var(--dw, #eaa3b2), inset 0 calc(var(--ts) * -0.06) 0 rgba(120, 70, 20, 0.35), 0 calc(var(--ts) * 0.07) 0 rgba(30, 14, 4, 0.55); }
.wtile.x-dw em { background: var(--dw, #eaa3b2); }
.wtile.blank { background: rgba(251, 246, 234, 0.12); box-shadow: inset 0 0 0 2px rgba(251, 246, 234, 0.35); }
.wtile.back { background: var(--wood); box-shadow: inset 0 0 0 calc(var(--ts) * 0.05) rgba(255, 220, 160, 0.25), 0 calc(var(--ts) * 0.07) 0 rgba(30, 14, 4, 0.55); }
.wtile.back::after { content: 'Q'; font-family: 'Alfa Slab One', serif; font-size: calc(var(--ts) * 0.4); color: rgba(255, 220, 160, 0.3); }
.wtile.fix { background: linear-gradient(160deg, #c8f0cf, #8fd7a2); }
.wtile.hint { background: linear-gradient(160deg, #fff1c2, #f2c14e); }
.wtile.small { --ts: 2.2rem; }
.wtile.flipin { animation: tileFlip 0.55s var(--ease-back) both; }
.wtile.grow { animation: pop 0.35s var(--ease-back) both; }
@keyframes tileFlip { from { transform: rotateY(90deg) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.wword { display: inline-flex; gap: calc(var(--ts, 3.4rem) * 0.08); flex-wrap: nowrap; }
.wword .wtile.small, .wword.small .wtile { --ts: 2rem; }
.wword.flipin .wtile { animation: tileFlip 0.55s var(--ease-back) both; }

/* ------------------------------------------------------------ Gemeinsames auf der Bühne */
body.host .qbody.wordbody { padding-bottom: 0.3rem; }
/* Größen richten sich nach dem freien Platz (cqw/cqh), nicht nach dem Fenster – am PC sitzt darunter noch die
   Antwortleiste. Die Lösen-Runden messen die Breite an ihrer Rätselspalte. */
.qbody.wordbody { container-type: size; }
.lt-news { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 1rem 0.3rem 0.35rem; border-radius: 99px; background: rgba(251, 246, 234, 0.95); color: var(--ink); font-weight: 800; font-size: 1.15rem; box-shadow: var(--shadow-sm); animation: popIn 0.45s var(--ease-back) both; }
.lt-news b { font-weight: 900; }
.tag { display: inline-block; font-size: 0.78rem; font-weight: 900; padding: 0.05rem 0.45rem; border-radius: 99px; border: 2px solid var(--ink); color: var(--ink); margin-right: 0.25rem; background: #fff; }
.tag.dw { background: var(--dw, #eaa3b2); }
.tag.dl { background: var(--dl, #8fc6e6); }
.tag.uq { background: #f6d58e; }
.tag.cp { background: #e6e1d4; }

/* ------------------------------------------------------------ Buchstabensalat */
.ltwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lt-top { position: relative; display: flex; flex-direction: column; align-items: center; }
.lt-rack { position: relative; padding: 1.1rem 1.6rem 1.7rem; }
.lt-tiles { position: relative; z-index: 2; display: flex; gap: clamp(0.4rem, 0.8vw, 0.9rem); }
.lt-tiles .wtile { --ts: clamp(2.6rem, min(8cqw, 14cqh), 7.4rem); }
.screen.pc-has-answer .lt-tiles .wtile { --ts: clamp(2.6rem, min(7cqw, 22cqh), 6rem); }
.lt-shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 2.6rem; border-radius: 0.6rem 0.6rem 1rem 1rem; background: var(--wood); box-shadow: inset 0 0.35rem 0 rgba(255, 210, 150, 0.25), 0 0.5rem 0 rgba(0, 0, 0, 0.35); }
.lt-shelf::before { content: ''; position: absolute; left: 1.2rem; right: 1.2rem; top: -0.35rem; height: 0.7rem; border-radius: 99px; background: linear-gradient(#5a2e12, #7d4520); }
.lt-mine:empty { display: none; }
.lt-feed { min-height: 2.6rem; }
.lt-lanes { width: min(100%, 92rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1.2rem; align-content: start; }
.lt-lanes.many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lt-lane { display: grid; grid-template-columns: auto minmax(0, 8rem) 1fr auto auto; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem 0.5rem 0.5rem; border-radius: 14px; background: rgba(4, 26, 30, 0.55); border: 2px solid rgba(251, 246, 234, 0.14); min-height: 4rem; transition: background 0.3s, transform 0.3s var(--ease-back); }
.lt-lane.bump { animation: laneBump 0.45s var(--ease-back); }
@keyframes laneBump { 40% { transform: scale(1.03); } }
.lt-lane .lt-who { display: flex; flex-direction: column; min-width: 0; }
.lt-lane .lt-who b { font-family: var(--font-head); font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-lane .lt-who small { font-size: 0.85rem; opacity: 0.75; white-space: nowrap; overflow: hidden; }
.lt-lane .lt-word { display: flex; gap: 0.25rem; min-width: 0; overflow: hidden; }
.lt-lane .lt-word .wtile { --ts: clamp(1.7rem, 2.2vw, 2.6rem); }
.lt-lanes.many .lt-word .wtile { --ts: clamp(1.4rem, 1.7vw, 2rem); }
.lt-lane .lt-word .wword { gap: 0.25rem; }
.lt-lane .wtile em { display: none; }
.lt-lanes:not(.many) .lt-word .wtile { --ts: clamp(2rem, 2.6vw, 3rem); }
.lt-lanes:not(.many) .lt-lane { min-height: 4.6rem; }
.lt-lane .lt-pts { font-family: var(--font-slab); font-size: 1.4rem; color: var(--gold); }
.lt-lane .lt-done { display: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); color: #fff; place-items: center; font-size: 0.95rem; }
.lt-lane.done .lt-done { display: grid; animation: pop 0.35s var(--ease-back) both; }
.lt-lane.shown .lt-done { display: none; }
.lt-lane.best { background: rgba(242, 193, 78, 0.22); border-color: var(--gold); transform: scale(1.02); }
.lt-noword { opacity: 0.6; font-style: italic; }
.lt-sugg { min-height: 0; }
.lt-qz { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center; padding: 0.7rem 1.2rem; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); animation: popIn 0.5s var(--ease-back) both; }
.lt-qzhead { font-family: var(--font-type); font-size: 1.2rem; }
.lt-qzw { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.lt-qzw small { font-weight: 800; color: var(--ink-soft); }

/* ------------------------------------------------------------ Würfelgitter (Wortjagd) */
.wgrid { --gs: min(100%, 36rem); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4%; padding: 5%; width: var(--gs); aspect-ratio: 1; border-radius: 6%; background: var(--wood); box-shadow: inset 0 0 0 0.4rem rgba(255, 210, 150, 0.18), 0 0.7rem 0 rgba(0, 0, 0, 0.4); }
.wdie { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; min-height: 0; border-radius: 18%; background: linear-gradient(160deg, #fffdf6, #efe6cf); box-shadow: inset 0 -0.35rem 0 rgba(140, 110, 60, 0.35), 0 0.3rem 0 rgba(0, 0, 0, 0.35); color: #1d2a2e; font-family: 'Alfa Slab One', serif; transform: rotate(var(--rot)); transition: background 0.15s, transform 0.2s var(--ease-back); container-type: inline-size; }
.wdie b { font-weight: 400; font-size: 52cqw; line-height: 1; }
.wgrid.shaking .wdie { animation: dieShake 0.32s ease-in-out infinite; }
.wgrid.shaking .wdie:nth-child(odd) { animation-delay: -0.15s; }
@keyframes dieShake { 0%, 100% { transform: rotate(calc(var(--rot) - 8deg)) translate(-3%, 2%); } 50% { transform: rotate(calc(var(--rot) + 8deg)) translate(3%, -2%); } }
.wgrid.rolled .wdie { animation: dieLand 0.5s var(--ease-back) both; }
.wgrid.rolled .wdie:nth-child(3n) { animation-delay: 0.08s; }
.wgrid.rolled .wdie:nth-child(3n + 1) { animation-delay: 0.16s; }
@keyframes dieLand { from { transform: rotate(calc(var(--rot) * 6)) scale(0.6); opacity: 0.3; } }
.wdie.on { background: linear-gradient(160deg, #fff1c2, #f2c14e); transform: rotate(0) scale(1.06); }
.wpath { position: absolute; inset: 5%; width: 90%; height: 90%; pointer-events: none; overflow: visible; }
.wpath path { fill: none; stroke: rgba(200, 68, 58, 0.85); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: pathDraw 0.9s ease-out both; }
.wpath circle { fill: rgba(200, 68, 58, 0.95); }
.wpath.missed path { stroke: rgba(47, 109, 181, 0.85); }
.wpath.missed circle { fill: rgba(47, 109, 181, 0.95); }
.wpath.live path { animation: none; stroke-dasharray: none; stroke: rgba(47, 158, 90, 0.8); }
.wpath.live circle { fill: rgba(47, 158, 90, 0.9); }
@keyframes pathDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.bgwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; }
.bg-left { display: flex; align-items: center; justify-content: center; min-height: 0; }
.bg-board { position: relative; height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.bg-board .bg-dice { width: 100%; height: 100%; display: grid; place-items: center; }
.bg-board .wgrid { --gs: 100%; }
.bg-paths { position: absolute; inset: 0; pointer-events: none; }
.bg-paths .wpath { inset: 5%; }
.bg-label { position: absolute; left: 50%; bottom: -0.4rem; transform: translateX(-50%); z-index: 3; }
.bg-lbl { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; border-radius: 99px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); animation: popIn 0.4s var(--ease-back) both; white-space: nowrap; }
.bg-miss { font-family: var(--font-type); font-weight: 400; font-size: 1.1rem; padding-left: 0.5rem; }
.bg-right { display: flex; flex-direction: column; gap: 0.8rem; min-height: 0; justify-content: center; }
.bg-lanes { display: flex; flex-direction: column; gap: 0.55rem; }
.bg-lane { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; padding: 0.45rem 1rem 0.45rem 0.45rem; border-radius: 14px; background: rgba(4, 26, 30, 0.55); border: 2px solid rgba(251, 246, 234, 0.14); transition: order 0.3s; }
.bg-lane .bg-who { display: flex; flex-direction: column; min-width: 0; }
.bg-lane .bg-who b { font-family: var(--font-head); font-size: 1.2rem; }
.bg-lane .bg-who small { opacity: 0.75; }
.bg-lane .bg-n { font-family: var(--font-slab); font-size: 2.2rem; color: var(--gold); min-width: 2.5ch; text-align: right; }
.bg-lane .bg-n.bump { animation: numBump 0.4s var(--ease-back); }
@keyframes numBump { 40% { transform: scale(1.3); color: #fff; } }
.bg-lane.done { border-color: var(--green); }
.bg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem; align-content: start; max-height: 100%; overflow: hidden; }
.bg-cols.many { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.bg-col { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease-back), box-shadow 0.3s; animation: popIn 0.4s var(--ease-back) both; }
.bg-col.cur { transform: scale(1.04); box-shadow: 0 0 0 4px var(--gold), var(--shadow-sm); }
.bg-colh { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-head); }
.bg-colh b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-colh span { font-family: var(--font-slab); color: var(--red); }
.bg-words { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bg-w { font-family: var(--font-type); font-size: 0.95rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: #e8e1cf; color: #4a5559; animation: popIn 0.3s var(--ease-back) both; }
.bg-w.u { background: #f6d58e; color: #3a2414; font-weight: 700; }
.bg-more { font-weight: 900; font-size: 0.9rem; color: var(--ink-soft); }
.bg-colp { font-family: var(--font-slab); color: var(--green); text-align: right; }
.bg-legend { display: flex; gap: 0.6rem; justify-content: center; }

/* ------------------------------------------------------------ Wordle-Felder */
.wboard { display: grid; gap: 0.3em; font-size: 1rem; }
.wrow { display: flex; gap: 0.3em; }
.wcell { width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 0.3em; border: 0.12em solid rgba(251, 246, 234, 0.28); font-family: 'Alfa Slab One', serif; font-size: 1em; color: #fff; text-transform: uppercase; }
.wcell.filled { border-color: rgba(251, 246, 234, 0.75); animation: pop 0.15s ease-out; }
.wcell.m-g { background: #3a9d58; border-color: #3a9d58; }
.wcell.m-y { background: #d9a620; border-color: #d9a620; }
.wcell.m-x { background: #4a5a5e; border-color: #4a5a5e; }
.wrow.flip .wcell { animation: cellFlip 0.5s ease-in-out both; animation-delay: calc(var(--k) * 0.12s); }
@keyframes cellFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.wrow.shake { animation: shake 0.4s; }
.wboard.mini { font-size: clamp(0.55rem, 0.9vw, 1rem); gap: 0.22em; }
.wboard.mini .wrow { gap: 0.22em; }
.wboard.mini .wcell { width: 2em; height: 2em; border-width: 0.1em; }

.wdwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.wd-answer { display: flex; gap: 0.5rem; }
.wd-answer .wtile { --ts: clamp(2.6rem, min(5.5cqw, 9cqh), 6rem); }
.wd-answer .wtile.q b::before { content: '?'; color: rgba(251, 246, 234, 0.5); }
.wd-boards { container-type: inline-size; width: 100%; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; justify-content: center; align-content: flex-start; }
/* Feld: 5 × 2em breit (+ Karte), 6 × 2em hoch (+ Name); --cols/--rows setzt word-host.js */
.wd-boards { --wd-top: calc(11cqh + 1.4rem); }
.wd-boards .wboard.mini { font-size: clamp(0.45rem, min(calc((100cqw / var(--cols, 4) - 3.2rem) / 11.2), calc(((100cqh - var(--wd-top)) / var(--rows, 1) - 4.4rem) / 13.4)), 1.9rem); }
.wd-card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.7rem; border-radius: 16px; background: rgba(4, 26, 30, 0.55); border: 2px solid rgba(251, 246, 234, 0.14); transition: transform 0.3s var(--ease-back), background 0.3s; }
.wd-card.solved { background: rgba(58, 157, 88, 0.3); border-color: #3a9d58; transform: translateY(-0.3rem); }
.wd-card.out { opacity: 0.55; }
.wd-who { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-head); max-width: 12rem; }
.wd-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-who em { font-style: normal; font-family: var(--font-slab); color: var(--gold); }
.wd-mine:empty { display: none; }

/* ------------------------------------------------------------ Lösen-Runden: Rätsel links, Gelöst/Ratespalte rechts */
.wsolve { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); gap: 1.6rem; }
.ws-main { container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: clamp(0.6rem, 2.5cqh, 1.4rem); min-height: 0; }
.ws-side { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.ws-box { border-radius: 16px; background: rgba(4, 26, 30, 0.55); border: 2px solid rgba(251, 246, 234, 0.14); padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.ws-box h3 { font-family: var(--font-slab); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--gold); }
.ws-solvedbox { flex: none; max-height: 58%; overflow: hidden; }
.ws-solvedbox .ws-solved { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.ws-solvedbox.empty .ws-solved { display: none; }
.ws-solvedbox:not(.empty) .ws-none { display: none; }
.ws-none { opacity: 0.6; font-style: italic; }
.ws-feedbox { flex: 1; overflow: hidden; }
.ws-feed { display: flex; flex-direction: column; gap: 0.4rem; }
.wsv .avatar { --size: 1.9em !important; }
.wsv { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0.5em 0.3em 0.3em; flex: none; border-radius: 12px; background: rgba(251, 246, 234, 0.95); color: var(--ink); animation: popIn 0.35s var(--ease-back) both; }
.wsv .rk { width: 1.6rem; text-align: center; font-weight: 900; }
.wsv .n { flex: 1; min-width: 0; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsv small { font-weight: 800; color: var(--ink-soft); }
.wsv em { font-style: normal; font-family: var(--font-slab); color: var(--green); }
.wf-tip { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem 0.3rem 0.3rem; border-radius: 12px; background: rgba(251, 246, 234, 0.12); animation: feedIn 0.35s var(--ease-back) both; }
.wf-tip span { display: flex; flex-direction: column; min-width: 0; font-family: var(--font-type); font-size: 1.1rem; overflow-wrap: anywhere; }
.wf-tip small { font-family: var(--font-body); font-size: 0.78rem; opacity: 0.75; }
.wf-tip.ok { background: rgba(58, 157, 88, 0.35); }
.wf-tip.ok span { font-family: var(--font-body); }
@keyframes feedIn { from { transform: translateX(1rem); opacity: 0; } }

/* Glücksrad-Brett */
.wh-frame { position: relative; padding: clamp(1rem, 1.6vw, 1.8rem); border-radius: 2rem; background: linear-gradient(160deg, #1d5b3c, #0f3a26); box-shadow: inset 0 0 0 0.45rem #d9a620, inset 0 0 0 0.75rem #7a5410, 0 0.8rem 0 rgba(0, 0, 0, 0.45); }
.wh-lights { position: absolute; inset: 0.2rem; pointer-events: none; }
.wh-lights i { position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #fff6c9; box-shadow: 0 0 0.6rem #ffe28a; animation: bulb 1.2s ease-in-out infinite; }
.wh-lights i:nth-child(odd) { animation-delay: -0.6s; }
.wh-lights i:nth-child(-n+8) { top: 0; left: calc(6% + (var(--n, 0)) * 1%); }
.wh-lights i:nth-child(1) { left: 8%; top: -0.1rem; } .wh-lights i:nth-child(2) { left: 20%; top: -0.1rem; } .wh-lights i:nth-child(3) { left: 32%; top: -0.1rem; } .wh-lights i:nth-child(4) { left: 44%; top: -0.1rem; } .wh-lights i:nth-child(5) { left: 56%; top: -0.1rem; } .wh-lights i:nth-child(6) { left: 68%; top: -0.1rem; } .wh-lights i:nth-child(7) { left: 80%; top: -0.1rem; } .wh-lights i:nth-child(8) { left: 92%; top: -0.1rem; }
.wh-lights i:nth-child(9) { left: 8%; bottom: -0.1rem; top: auto; } .wh-lights i:nth-child(10) { left: 20%; bottom: -0.1rem; top: auto; } .wh-lights i:nth-child(11) { left: 32%; bottom: -0.1rem; top: auto; } .wh-lights i:nth-child(12) { left: 44%; bottom: -0.1rem; top: auto; } .wh-lights i:nth-child(13) { left: 56%; bottom: -0.1rem; top: auto; } .wh-lights i:nth-child(14) { left: 68%; bottom: -0.1rem; top: auto; } .wh-lights i:nth-child(15) { left: 80%; bottom: -0.1rem; top: auto; } .wh-lights i:nth-child(16) { left: 92%; bottom: -0.1rem; top: auto; }
.wh-lights i:nth-child(17) { left: -0.1rem; top: 20%; } .wh-lights i:nth-child(18) { left: -0.1rem; top: 45%; } .wh-lights i:nth-child(19) { left: -0.1rem; top: 70%; } .wh-lights i:nth-child(20) { right: -0.1rem; left: auto; top: 20%; } .wh-lights i:nth-child(21) { right: -0.1rem; left: auto; top: 45%; } .wh-lights i:nth-child(22) { right: -0.1rem; left: auto; top: 70%; } .wh-lights i:nth-child(23), .wh-lights i:nth-child(24) { display: none; }
@keyframes bulb { 50% { opacity: 0.35; box-shadow: none; } }
.wboardw { display: grid; gap: clamp(0.25rem, 0.45vw, 0.5rem); }
.wbrow { display: flex; gap: clamp(0.25rem, 0.45vw, 0.5rem); }
/* Brett: 14 × 4 Felder; Breite an der Rätselspalte, Höhe am freien Platz (Finale: Kopf und Einsatz-Leiste dazu) */
.wh-frame { --wh-extra: 7.5rem; }
.wbc { --bc: clamp(1.1rem, min(calc((100cqw - 4rem) / 15.4), calc((100cqh - var(--wh-extra, 7.5rem)) / 5.3)), 5.2rem); width: var(--bc); height: calc(var(--bc) * 1.22); border-radius: 0.35rem; display: grid; place-items: center; font-family: 'Alfa Slab One', serif; font-size: calc(var(--bc) * 0.66); color: #142226; }
.wbc.off { background: rgba(10, 60, 40, 0.65); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06); }
.wbc.hid, .wbc.on, .wbc.sym { background: linear-gradient(#ffffff, #e9eef0); box-shadow: inset 0 -0.3rem 0 rgba(0, 0, 0, 0.12); }
.wbc.hid b { opacity: 0; }
.wbc.lit { background: linear-gradient(#5aa9ff, #2f6db5); box-shadow: 0 0 1.2rem rgba(90, 169, 255, 0.8); }
.wbc.lit b { opacity: 0; }
.wbc.turn { animation: wbTurn 0.45s ease-in-out both; }
@keyframes wbTurn { 0% { transform: rotateY(90deg); } 100% { transform: none; } }
.wh-cat { min-height: 2.6rem; }
.wh-cat span { display: inline-block; padding: 0.35rem 1.4rem; border-radius: 99px; background: var(--paper); color: var(--ink); font-family: var(--font-slab); font-size: clamp(1.3rem, 2vw, 2rem); letter-spacing: 0.03em; box-shadow: var(--shadow); animation: popIn 0.4s var(--ease-back) both; }
.wboardw.mini .wbc { --bc: clamp(1rem, 6vw, 1.8rem); border-radius: 0.2rem; }
.wboardw.mini { gap: 0.15rem; }
.wboardw.mini .wbrow { gap: 0.15rem; }
.wboardw.mini .wbc.off { background: rgba(10, 60, 40, 0.35); }

/* Wortbrücke */
/* Alles in Einheiten der Wortgröße --u: so breit, wie die Rätselspalte hergibt (--brw aus word-host.js) */
.br-scene { --u: clamp(1.1rem, min(calc(100cqw / var(--brw, 20)), 16cqh), 5.6rem); display: flex; align-items: center; gap: calc(var(--u) * 0.2); width: 100%; justify-content: center; }
.br-word span { display: inline-block; padding: 0.13em 0.28em; border-radius: 14px; background: var(--paper); color: var(--ink); font-family: var(--font-slab); font-size: var(--u); letter-spacing: 0.02em; box-shadow: var(--shadow); animation: popIn 0.45s var(--ease-back) both; white-space: nowrap; }
.br-word.r span { animation-delay: 0.15s; }
.br-mid { position: relative; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 0.5) calc(var(--u) * 0.2) calc(var(--u) * 0.1); }
.br-arch { position: absolute; left: calc(var(--u) * -0.25); right: calc(var(--u) * -0.25); top: 0; width: calc(100% + var(--u) * 0.5); height: calc(var(--u) * 0.6); overflow: visible; }
.br-arch path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.br-arch .br-rail { stroke: rgba(242, 193, 78, 0.45); stroke-width: 3; stroke-dasharray: 6 8; }
.br-slot { display: flex; gap: calc(var(--u) * 0.08); }
.br-slot .wtile { --ts: calc(var(--u) * 1.15); }
.br-slot.hinted { animation: laneBump 0.5s var(--ease-back); }
.br-combo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.2rem; min-height: 3rem; }
.br-combo .brc { padding: 0.4rem 1.1rem; border-radius: 12px; background: rgba(251, 246, 234, 0.95); color: var(--ink); font-family: var(--font-type); font-size: clamp(1.1rem, min(3.4cqw, 6cqh), 2.6rem); box-shadow: var(--shadow-sm); animation: popIn 0.45s var(--ease-back) both; }
.br-combo .brc b { color: var(--red); font-weight: 400; }
.br-combo i { font-style: normal; font-family: var(--font-slab); font-size: 2rem; color: var(--gold); }
.br-combo small { flex-basis: 100%; text-align: center; opacity: 0.8; }

/* Wortdreher */
.an-cat span { display: inline-block; padding: 0.35rem 1.4rem; border-radius: 99px; background: var(--paper); color: var(--ink); font-family: var(--font-slab); font-size: clamp(1.3rem, 2vw, 2rem); letter-spacing: 0.03em; box-shadow: var(--shadow); }
/* --n Steine nebeneinander, zusammen höchstens so breit wie die Rätselspalte */
.an-tiles { display: flex; gap: min(0.8rem, calc(100cqw / var(--n, 9) * 0.08)); flex-wrap: nowrap; justify-content: center; }
.an-tiles .wtile { --ts: clamp(1.6rem, min(calc(100cqw / var(--n, 9) * 0.88), 22cqh), 8.6rem); }
.an-hint { min-height: 2.2rem; }
.an-hint span { font-family: var(--font-type); font-size: 1.6rem; }

/* ------------------------------------------------------------ Pointe! */
.qpwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; }
.qp-head { display: flex; align-items: center; gap: 1rem; max-width: 60rem; }
.qp-head.center { flex-direction: column; text-align: center; }
.qp-head > div { display: flex; flex-direction: column; gap: 0.2rem; }
.qp-head b { font-family: var(--font-slab); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.8rem); }
.qp-head small { font-size: 1.2rem; opacity: 0.85; }
.qp-big { font-size: clamp(3.5rem, 6vw, 6rem); animation: bounce 1.4s ease-in-out infinite; }
.qp-writers { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; justify-content: center; max-width: 90rem; }
.qp-writer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 9.5rem; transition: transform 0.3s var(--ease-back); }
.qp-writer b { font-family: var(--font-head); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-pen { position: absolute; top: -0.4rem; right: 0.6rem; font-size: 1.7rem; animation: penWiggle 0.6s ease-in-out infinite; }
.qp-writer.done .qp-pen { animation: none; }
.qp-writer.done { transform: translateY(-0.35rem); }
@keyframes penWiggle { 50% { transform: rotate(-18deg) translateY(-0.15rem); } }
.qp-dots { display: flex; gap: 0.3rem; }
.qp-dots i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: rgba(251, 246, 234, 0.25); }
.qp-dots i.on { background: var(--gold); }
.qp-count { font-family: var(--font-slab); letter-spacing: 0.04em; font-size: 1.2rem; color: var(--gold); }
.qp-prompt { max-width: 70rem; padding: 1.1rem 1.8rem; font-family: var(--font-type); font-size: clamp(1.7rem, 2.6vw, 3rem); line-height: 1.25; text-align: center; color: var(--ink); background: var(--paper); animation: popIn 0.45s var(--ease-back) both; }
.qp-prompt.small { font-size: clamp(1.3rem, 1.9vw, 2.2rem); }
.qp-gap { display: inline-block; color: var(--red); letter-spacing: -0.05em; }
.qp-letters { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.6rem; }
.qp-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.4rem; align-items: stretch; width: min(100%, 92rem); }
.qp-vsb { align-self: center; font-family: var(--font-slab); font-size: 2.4rem; color: var(--gold); text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.4); }
.qp-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; min-height: 10rem; padding: 1.2rem 1.4rem; background: #fff; color: var(--ink); text-align: center; animation: popIn 0.5s var(--ease-back) both; transform: rotate(-0.8deg); }
.qp-card + .qp-vsb + .qp-card, .qp-card[data-k="1"] { transform: rotate(0.8deg); }
.qp-txt { font-family: var(--font-type); font-size: clamp(1.6rem, 2.6vw, 3rem); line-height: 1.2; overflow-wrap: anywhere; }
.qp-votes { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; min-height: 0; }
.qp-author { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; min-height: 0; }
.qp-author:empty { display: none; }
.qp-author b { font-family: var(--font-head); }
.qp-author small { font-weight: 800; color: var(--ink-soft); }
.qp-author em { font-style: normal; font-family: var(--font-slab); color: var(--green); font-size: 1.4rem; }
.qp-pct { position: relative; height: 1.6rem; border-radius: 99px; background: #e8e1cf; overflow: hidden; }
.qp-pct i { position: absolute; inset: 0 auto 0 0; background: var(--gold); animation: pctGrow 0.8s var(--ease-out) both; }
.qp-pct span { position: relative; font-weight: 900; line-height: 1.6rem; }
@keyframes pctGrow { from { width: 0 !important; } }
.qp-card.done:not(.win) { opacity: 0.86; }
.qp-card.win { box-shadow: 0 0 0 5px var(--gold), var(--shadow); }
.qp-stamp { position: absolute; top: -2.1rem; right: -0.8rem; z-index: 3; padding: 0.3rem 0.9rem; border: 4px solid var(--red); border-radius: 10px; color: var(--red); background: rgba(255, 255, 255, 0.9); font-family: var(--font-slab); font-size: 1.5rem; letter-spacing: 0.04em; transform: rotate(10deg); animation: stamp 0.5s var(--ease-back) both; }
.qp-voted { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; min-height: 2rem; }
.qp-vdot { opacity: 0.35; transition: opacity 0.2s, transform 0.3s var(--ease-back); }
.qp-vdot.on { opacity: 1; transform: translateY(-0.25rem); }
.qp-top { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.qp-top small { font-family: var(--font-slab); font-size: 1.3rem; color: var(--gold); }
.qp-top .qp-card { min-height: 0; max-width: 60rem; }
.qp-tally { display: flex; flex-direction: column; gap: 0.45rem; width: min(100%, 52rem); }
.qp-trow { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.35rem 0.9rem 0.35rem 0.35rem; border-radius: 12px; background: rgba(4, 26, 30, 0.6); animation: popIn 0.35s var(--ease-back) both; }
.qp-trow span { opacity: 0.85; font-size: 0.95rem; }
.qp-trow em { font-style: normal; font-family: var(--font-slab); color: var(--gold); }

/* ------------------------------------------------------------ Das Wörterbuchspiel */
body[data-mode="word"] .dictcard { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; background: var(--paper); color: var(--ink); border-left: 0.6rem solid var(--red); text-align: center; }
.dictcard .dict-w { font-family: var(--font-slab); font-size: clamp(2.4rem, 4.4vw, 5.2rem); letter-spacing: 0.01em; line-height: 1.1; }
.dictcard .dict-pos { font-family: var(--font-type); font-size: clamp(1rem, 1.4vw, 1.5rem); color: var(--ink-soft); font-style: italic; }
.dictcard .dict-q { font-family: var(--font-body); font-weight: 800; font-size: 1.1rem; opacity: 0.75; }
.qcard.small.dictcard .dict-w { font-size: clamp(1.8rem, 3vw, 3.4rem); }
body[data-mode="word"] .bluffwrap .bopt .bt { font-family: var(--font-type); }

/* ------------------------------------------------------------ Finale: Das letzte Wort (Wortkette)
   Bühne: links Kopfzeile (Runde, Mindestlänge, Zugzeit) und die Kette, rechts wer dran ist und die Reihenfolge.
   Alles bemisst sich an der Bühne (.lw2 ist der Container): --u Grundmaß, --ts Steingröße der Kette. */
.lw2 {
  --u: clamp(0.75rem, min(2.4cqh, 1.25cqw), 1.6rem);
  --ts: clamp(1.4rem, min(10.5cqh, 4.2cqw), 5rem);
  container-type: size;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(12rem, 27cqw, 22rem);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'top side' 'chain side';
  gap: calc(var(--u) * 0.7) calc(var(--u) * 1.2);
}
.lw-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.45); min-height: calc(var(--u) * 2.1); }
.lw-chip { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.75em; border-radius: 99px; background: var(--paper); color: var(--ink); font-family: var(--font-slab); font-size: var(--u); letter-spacing: 0.02em; box-shadow: var(--shadow-sm); white-space: nowrap; }
.lw-chip b { font-weight: 400; color: var(--red); font-size: 1.15em; }
.lw-chip.cnt { background: rgba(251, 246, 234, 0.16); color: var(--paper); box-shadow: none; }
.lw-chip.sudden { background: var(--red); color: #fff; animation: pulse 0.6s ease-in-out infinite alternate; }
.lw-chip.soon { background: var(--orange); color: #fff; }
.lw-chip.bump { animation: pop 0.5s var(--ease-back); }

.lw-chain { grid-area: chain; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: calc(var(--ts) * 0.32) calc(var(--ts) * 0.42); padding: calc(var(--ts) * 0.22) calc(var(--ts) * 0.1) 0; }
.lw-more { flex-basis: 100%; font-family: var(--font-type); font-size: calc(var(--u) * 0.95); opacity: 0.65; }
.lw-w { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(var(--ts) * 0.12); max-width: 100%; }
.lw-tiles { display: flex; flex-wrap: wrap; gap: calc(var(--ts) * 0.06); }
.lw-tiles .wtile { --ts: inherit; }
.lw2 .wtile.link { background: linear-gradient(160deg, #fff1c2, #f2c14e); }
.lw2 .wtile.bad, .wp-lw .wtile.bad, .pc-lwmine .wtile.bad { background: linear-gradient(160deg, #ffc9c2, #e88a80); }
.lw-by { display: flex; align-items: center; gap: 0.35em; font-size: max(0.65rem, calc(var(--ts) * 0.36)); line-height: 1; min-height: calc(var(--ts) * 0.5); }
.lw-by .avatar { --size: calc(var(--ts) * 0.5) !important; }
.lw-by b { font-family: var(--font-slab); font-weight: 400; color: var(--gold); }
.lw-by small { font-family: var(--font-type); opacity: 0.8; white-space: nowrap; }
.lw-by small.bad { color: #ffa093; opacity: 1; font-family: var(--font-body); font-weight: 900; }
.lw-w.fresh .lw-tiles { border-radius: calc(var(--ts) * 0.2); animation: lwGlow 1.6s ease-out; }
.lw-w.final .lw-tiles { padding: calc(var(--ts) * 0.08); border-radius: calc(var(--ts) * 0.2); box-shadow: 0 0 0 calc(var(--ts) * 0.07) var(--gold); }
@keyframes lwGlow { 0% { box-shadow: 0 0 0 calc(var(--ts) * 0.12) rgba(242, 193, 78, 0.9); } 100% { box-shadow: 0 0 0 calc(var(--ts) * 0.4) rgba(242, 193, 78, 0); } }
/* Das nächste Feld: geforderter Stein + leere Steine bis zur Mindestlänge */
.lw-w.next { padding: calc(var(--ts) * 0.12); margin: calc(var(--ts) * -0.12); border-radius: calc(var(--ts) * 0.22); outline: 2px dashed rgba(251, 246, 234, 0.4); outline-offset: 2px; }
.lw-w.next .wtile.need { animation: lwNeed 1.1s ease-in-out infinite alternate; }
.lw-w.next.shake { animation: shake 0.4s; }
.lw2.sudden .lw-w.next { outline-color: var(--red); }
@keyframes lwNeed { from { transform: translateY(0); } to { transform: translateY(calc(var(--ts) * -0.1)); filter: brightness(1.12); } }

.lw-side { grid-area: side; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
.lw-turn { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'who secs' 'nm nm' 'clock clock'; align-items: center; gap: calc(var(--u) * 0.4) calc(var(--u) * 0.7); padding: calc(var(--u) * 0.8); border-radius: 16px; background: rgba(4, 26, 30, 0.62); border: 3px solid rgba(251, 246, 234, 0.16); }
.lw-turn.enter { animation: popIn 0.4s var(--ease-back); }
.lw-turn.last, .lw-turn.won { border-color: var(--gold); background: linear-gradient(160deg, rgba(242, 193, 78, 0.3), rgba(4, 26, 30, 0.7)); }
.lw-who { grid-area: who; display: grid; place-items: center; }
.lw-who .avatar { --size: clamp(2.6rem, 15cqh, 6.5rem) !important; }
.lw-who .wtile.big { --ts: clamp(2.4rem, 13cqh, 5.6rem); }
.lw-big { font-size: clamp(2.2rem, 12cqh, 5rem); line-height: 1; }
.lw-secs { grid-area: secs; justify-self: end; font-family: var(--font-slab); font-size: clamp(1.6rem, 10cqh, 4.6rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.lw-turn.urgent .lw-secs { color: #ff7b6b; animation: pulse 0.5s ease-in-out infinite alternate; }
.lw-nm { grid-area: nm; display: flex; flex-direction: column; font-family: var(--font-slab); font-size: calc(var(--u) * 1.3); line-height: 1.1; overflow-wrap: anywhere; }
.lw-nm small { font-family: var(--font-body); font-weight: 800; font-size: max(0.65rem, 0.62em); opacity: 0.85; }
.lw-clock { grid-area: clock; height: calc(var(--u) * 0.5); border-radius: 99px; background: rgba(251, 246, 234, 0.15); overflow: hidden; }
.lw-clock i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.lw-turn.urgent .lw-clock i { background: var(--red); }
.lw-turn.idle .lw-clock { visibility: hidden; }
.lw-queue { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: calc(var(--u) * 0.45); padding: calc(var(--u) * 0.3) 0; }
.lw-q { position: relative; transition: transform 0.3s var(--ease-back); }
.lw-q .avatar { --size: calc(var(--u) * 2.3) !important; }
.lw-q.cur { transform: scale(1.15); }
.lw-q.cur .avatar { box-shadow: 0 0 0 calc(var(--u) * 0.2) var(--gold); }
.lw-q.win .avatar { box-shadow: 0 0 0 calc(var(--u) * 0.2) var(--gold), 0 0 calc(var(--u) * 1.2) var(--gold); }
.lw-q.out .avatar { filter: grayscale(1) opacity(0.45); }
.lw-q i { position: absolute; font-style: normal; line-height: 1; font-size: max(0.65rem, calc(var(--u) * 0.85)); }
.lw-q .lw-jk { top: -0.25em; right: -0.35em; transform: rotate(12deg); }
.lw-q .lw-x { bottom: -0.3em; left: 50%; transform: translateX(-50%); padding: 0.05em 0.3em; border-radius: 99px; background: rgba(4, 26, 30, 0.9); font-family: var(--font-body); font-weight: 900; font-size: calc(var(--u) * 0.7); white-space: nowrap; }
.lw-shadow { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.3em; padding: calc(var(--u) * 0.5); border-radius: 14px; background: rgba(4, 26, 30, 0.55); font-size: calc(var(--u) * 0.9); animation: popIn 0.4s var(--ease-back) both; }
.lw-shadow > b { font-family: var(--font-slab); font-weight: 400; color: var(--gold); }
.lw-shrow { display: flex; align-items: flex-start; gap: 0.4em; }
.lw-shrow .avatar { --size: 1.6em !important; }
.lw-shrow i { display: inline-block; font-style: normal; font-family: var(--font-type); padding: 0 0.3em; margin: 0 0.1em 0.15em 0; border-radius: 5px; background: rgba(251, 246, 234, 0.85); color: var(--ink); }
.lw-shrow i.saved { background: var(--gold); }
.lw-gilt { flex: none; font-family: var(--font-slab); font-size: var(--u); background: var(--green); color: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 0.4em 0.7em; cursor: pointer; animation: popIn 0.35s var(--ease-back) both; }
body.viewer .lw-gilt { display: none; }
/* Wenig Höhe (PC mit Antwortleiste): Reihenfolge dichter, Kopfzeile kleiner */
@container (max-height: 360px) {
  .lw-top, .lw-chain, .lw-side { --u: clamp(0.78rem, min(3cqh, 1.2cqw), 1rem); }
  .lw-turn { padding: calc(var(--u) * 0.5); }
}

/* ================================================================ Handy */
body.play[data-mode="word"] .feedback.correct { color: #8ee6a8; }
body.play[data-mode="word"] .feedback.wrong { color: #ffa093; }
body.play[data-mode="word"] .feedback.close { color: #ffd97a; }
.wpv { display: flex; flex-direction: column; gap: 0.7rem; }
.wpv .feedback { min-height: 1.4rem; text-align: center; font-weight: 900; }
.wp-done { align-self: center; }

/* Buchstabensalat */
.wp-best { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; min-height: 4.4rem; padding: 0.35rem 0.6rem; border-radius: 12px; background: rgba(4, 26, 30, 0.45); }
.wp-best small { font-weight: 800; opacity: 0.8; }
.wp-best b { font-family: var(--font-slab); color: var(--gold); font-size: 1.3rem; }
.wp-build { display: flex; justify-content: center; gap: 0.25rem; min-height: 3.4rem; align-items: center; flex-wrap: nowrap; padding: 0.4rem; border-radius: 12px; border: 2px dashed rgba(251, 246, 234, 0.3); }
.wp-build .wp-bt { padding: 0; border: 0; background: none; }
.wp-build .wtile { --ts: min(2.7rem, 9.4vw); animation: pop 0.2s var(--ease-back) both; }
.wp-ph { opacity: 0.6; font-weight: 800; }
.wp-pts { text-align: center; font-weight: 800; opacity: 0.85; min-height: 1.2rem; font-size: 0.95rem; }
.wp-rack { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem 0.4rem; justify-items: center; padding: 0.9rem 0.5rem 0.6rem; border-radius: 14px; background: var(--wood); }
.wp-tb { padding: 0; border: 0; background: none; transition: transform 0.15s var(--ease-back), opacity 0.2s; }
.wp-tb .wtile { --ts: min(3.8rem, 15vw); }
.wp-tb:active { transform: scale(0.92); }
.wp-tb.used { opacity: 0.25; transform: scale(0.88); }
.wp-row { display: grid; grid-template-columns: auto auto auto 1fr; gap: 0.4rem; }
.wp-row .btn { padding-left: 0.9rem; padding-right: 0.9rem; }

/* Wortjagd */
.wp-cur .wp-ph { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; color: inherit; }
.wp-cur { min-height: 2.4rem; display: flex; justify-content: center; align-items: center; font-family: var(--font-slab); font-size: 1.6rem; letter-spacing: 0.06em; color: var(--gold); }
.wp-gridbox { position: relative; align-self: center; width: min(100%, 26rem); touch-action: none; }
.wp-gridbox .wgrid { --gs: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.wp-gridbox .wp-line { position: absolute; inset: 0; pointer-events: none; }
.wp-gridbox .wpath { inset: 5%; }
.wgrid.good { animation: gridGood 0.45s ease-out; }
.wgrid.bad { animation: shake 0.35s; }
@keyframes gridGood { 40% { box-shadow: 0 0 0 0.4rem var(--green), 0 0.7rem 0 rgba(0, 0, 0, 0.4); } }
.wp-found { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.5rem; }
.wp-found > b { font-family: var(--font-slab); font-size: 1.5rem; color: var(--gold); }
.wp-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.wp-chips i { font-style: normal; font-family: var(--font-type); font-size: 0.95rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: rgba(251, 246, 234, 0.9); color: var(--ink); }
.wp-kbd { align-self: center; }

/* Wordle */
.wp-board { display: flex; justify-content: center; }
/* Raster nach Breite und sichtbarer Höhe: Tastatur und alle Versuche passen ohne Scrollen (330 px: Kopf, Tastatur, Abstände) */
.wp-board .wboard { font-size: min(1.1rem, 4.1vw, calc((100dvh - 330px) / (var(--tries, 6) * 3.85))); }
.wp-board .wcell { width: 2.6em; height: 2.6em; font-size: 1.35em; }
.wp-keys { display: flex; flex-direction: column; gap: 0.35rem; }
.wk-row { display: flex; gap: 0.25rem; justify-content: center; }
.wk { flex: 1; max-width: 2.6rem; height: clamp(2.6rem, 6.4dvh, 3.1rem); padding: 0; border-radius: 0.4rem; border: 0; background: rgba(251, 246, 234, 0.88); color: var(--ink); font-family: var(--font-slab); font-size: 1rem; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.wk.wide { max-width: 3.6rem; flex: 1.5; font-family: var(--font-body); font-weight: 900; }
.wk.m-g { background: #3a9d58; color: #fff; }
.wk.m-y { background: #d9a620; color: #fff; }
.wk.m-x { background: #4a5a5e; color: rgba(255, 255, 255, 0.7); }
.wk:active { transform: translateY(2px); box-shadow: none; }

/* Lösen-Runden */
.wp-puzzle { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem; border-radius: 14px; background: rgba(4, 26, 30, 0.45); }
.wp-cat { font-family: var(--font-slab); color: var(--gold); letter-spacing: 0.03em; }
.wp-bridge { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; font-family: var(--font-slab); font-size: 1.3rem; }
.wp-bridge i { font-style: normal; color: var(--gold); }
.wp-mask { display: inline-flex; gap: 0.15rem; }
.wp-mask .wtile { --ts: 1.9rem; }
.wp-ana { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }
.wp-ana .wtile { --ts: min(2.5rem, 9vw); }
.wp-guess { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.wp-lock { height: 0.35rem; border-radius: 99px; background: rgba(251, 246, 234, 0.15); overflow: hidden; opacity: 0; }
.wp-lock i { display: block; height: 100%; background: var(--red); transform-origin: left; }
.wp-guess.locked .wp-lock { opacity: 1; }
.wp-guess.locked input { opacity: 0.5; }

/* Pointe! */
.wp-qn { text-align: center; font-family: var(--font-slab); color: var(--gold); letter-spacing: 0.03em; }
.wp-prompt { padding: 0.9rem 1rem; font-family: var(--font-type); font-size: 1.25rem; line-height: 1.25; text-align: center; background: var(--paper); color: var(--ink); }
.wp-prompt.small { font-size: 1.05rem; }
.wp-acro { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; }
.wp-acro small { flex-basis: 100%; text-align: center; opacity: 0.8; font-weight: 800; }
.wp-vote { display: flex; flex-direction: column; gap: 0.5rem; }
.wp-va { padding: 1rem; border-radius: 14px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font-family: var(--font-type); font-size: 1.2rem; line-height: 1.2; box-shadow: var(--shadow-sm); text-align: center; }
.wp-vs { align-self: center; font-family: var(--font-slab); color: var(--gold); }
.wp-vote.chosen .wp-va:not(.sel) { opacity: 0.4; }
.wp-va.sel { background: #f6d58e; transform: scale(1.02); }
.wp-promptsmall { margin-top: 0.6rem; font-family: var(--font-type); font-size: 0.95rem; opacity: 0.85; }

/* Wörterbuchspiel */
.wp-dict { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.9rem; background: var(--paper); color: var(--ink); border-left: 0.45rem solid var(--red); }
.wp-dict b { font-family: var(--font-slab); font-weight: 400; font-size: 1.8rem; overflow-wrap: anywhere; text-align: center; }
.wp-dict small { font-family: var(--font-type); color: var(--ink-soft); text-align: center; }

/* Finale: Wortkette */
.wp-lwban { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.6rem 0.8rem; border-radius: 14px; background: rgba(4, 26, 30, 0.6); text-align: center; }
.wp-lwban b { font-family: var(--font-slab); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; }
.wp-lwban small { font-weight: 800; opacity: 0.85; }
.wp-lwban.me { background: var(--gold); color: var(--ink); animation: pop 0.4s var(--ease-back); }
.wp-lwban.out { background: rgba(4, 26, 30, 0.35); }
.wp-lwclock { height: 0.5rem; border-radius: 99px; background: rgba(251, 246, 234, 0.15); overflow: hidden; }
.wp-lwclock i { display: block; height: 100%; background: rgba(251, 246, 234, 0.6); transform-origin: left; }
.wp-lwclock.me i { background: var(--gold); }
.wp-lwslot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-height: 3.4rem; }
.wp-lwslot.shake { animation: shake 0.4s; }
.wp-lwslot small { font-weight: 800; opacity: 0.8; }
.wp-lwtiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
.wp-lwtiles .wtile { --ts: min(2.6rem, calc((100vw - 3.5rem) / 10.5)); }
.wp-lwtiles .wtile.link { background: linear-gradient(160deg, #fff1c2, #f2c14e); }
.wp-lwin .input { text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-slab); }
.wp-joker { align-self: center; }
.wp-lwlast { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.95rem; }
.wp-lwlast:empty { display: none; }
.wp-lwlast small { font-weight: 800; opacity: 0.7; }
.wp-lwlast > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem; }
.wp-lwlast i { font-style: normal; color: var(--gold); }
.wp-lwlw { font-family: var(--font-type); padding: 0.05rem 0.45rem; border-radius: 6px; background: rgba(251, 246, 234, 0.9); color: var(--ink); }
.wp-lwsh { display: flex; flex-direction: column; gap: 0.3rem; }
.wp-lwsh small { font-weight: 800; opacity: 0.85; }

/* Ergebnis am Handy */
.wp-res { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.wp-res .wword .wtile.small { --ts: min(2rem, 8vw); }
.wp-sugg { text-align: center; }

/* ================================================================ Am PC mitspielen (pc-word.js) */
/* Wortkette: das Getippte liegt auf dem eigenen Bildschirm über dem nächsten Feld */
.pc-lwmine { position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: calc(var(--ts) * 0.06); padding: calc(var(--ts) * 0.12); border-radius: calc(var(--ts) * 0.22); background: rgba(4, 26, 30, 0.92); box-shadow: 0 0 0 3px var(--gold); }
.pc-lwmine .wtile.link { background: linear-gradient(160deg, #fff1c2, #f2c14e); }
.lt-tiles .wtile.pc-item { cursor: pointer; transition: transform 0.15s var(--ease-back), filter 0.15s, opacity 0.15s; }
.lt-tiles .wtile.pc-item:hover { transform: translateY(-0.35rem); }
.lt-tiles .wtile.pc-used { opacity: 0.32; transform: translateY(0.3rem) scale(0.94); }
.lt-mine { position: absolute; top: calc(100% + 0.2rem); left: 50%; transform: translateX(-50%); z-index: 4; }
.pc-mineword { display: flex; gap: 0.25rem; padding: 0.35rem 0.5rem; border-radius: 12px; background: rgba(4, 26, 30, 0.85); box-shadow: 0 0 0 2px var(--gold); }
.pc-mineword .wtile { --ts: 2.3rem; }
.pc-mineword .wtile.bad { background: linear-gradient(160deg, #ffc9c2, #e88a80); }
.pc-path { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pc-path .wpath { inset: 5%; }
.pc-answer .pc-input.pc-upper { text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-slab); }
.pc-answer .pc-input.bad { box-shadow: 0 0 0 3px var(--red); }
.pc-answer .pc-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.pc-answer .pc-chips i { font-style: normal; font-family: var(--font-type); font-size: 0.9rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: rgba(251, 246, 234, 0.9); color: var(--ink); }
.pc-wdrow { justify-content: center; }
.pc-wdkeys { display: flex; flex-direction: column; gap: 0.25rem; }
.pc-wdkeys .wk-row { gap: 0.3rem; }
.pc-wdkeys .wk { flex: none; width: 2.5rem; max-width: none; height: 2.1rem; font-size: 0.95rem; }
/* Am PC: das eigene Feld groß links (statt der eigenen Karte), Lösung und die anderen rechts daneben */
.wdwrap:has(.wd-mine:not(:empty)) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: 'mine answer' 'mine boards'; gap: 1rem 1.6rem; align-items: start; justify-items: center; width: 100%; }
.wdwrap:has(.wd-mine:not(:empty)) .wd-answer { grid-area: answer; }
.wdwrap:has(.wd-mine:not(:empty)) .wd-boards { grid-area: boards; --wd-top: 4.6rem; }
.wdwrap:has(.wd-mine:not(:empty)) .wd-answer .wtile { --ts: clamp(2.2rem, min(4cqw, 8cqh), 4.4rem); }
.wd-mine { grid-area: mine; align-self: center; }
.wd-card.pc-self { display: none; }
.pc-wdmine { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem; border-radius: 14px; background: rgba(4, 26, 30, 0.88); box-shadow: 0 0 0 3px var(--gold); }
.pc-wdmine small { font-family: var(--font-slab); color: var(--gold); }
.pc-wdmine .wboard { font-size: clamp(0.6rem, calc((100cqh - 3.5rem) / 16.5), 1.5rem); }
.pc-qpprompt { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }
.pc-qpprompt small { font-family: var(--font-slab); color: var(--gold); }
.pc-qpprompt b { font-family: var(--font-type); font-weight: 400; font-size: 1.2rem; }
.pc-acro { display: flex; align-items: center; gap: 0.3rem; }
.pc-acro em { font-style: normal; font-size: 0.85rem; opacity: 0.8; margin-left: 0.4rem; }
.qp-vs.pc-open .qp-card { cursor: pointer; }
/* Buchstabensalat am PC: über der Antwortleiste ist wenig Höhe – Bank, Meldung und Bahnen dichter */
.screen.pc-has-answer .ltwrap { gap: 0.45rem; }
.screen.pc-has-answer .lt-rack { padding: 0.7rem 1.2rem 1.3rem; }
.screen.pc-has-answer .lt-shelf { height: 1.9rem; }
/* Meldungen links, damit das getippte Wort (.lt-mine) in der Mitte frei bleibt */
.screen.pc-has-answer .lt-feed { min-height: 3.1rem; width: 100%; display: flex; align-items: flex-end; justify-content: flex-start; }
.screen.pc-has-answer .lt-news { font-size: 0.95rem; }
.screen.pc-has-answer .lt-lanes { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.4rem 0.8rem; }
.screen.pc-has-answer .lt-lane, .screen.pc-has-answer .lt-lanes:not(.many) .lt-lane { min-height: 0; padding: 0.25rem 0.7rem 0.25rem 0.25rem; gap: 0.5rem; }
.screen.pc-has-answer .lt-lane .avatar { --size: 2.1rem !important; }
.screen.pc-has-answer .lt-lane .lt-who b { font-size: 0.95rem; }
.screen.pc-has-answer .lt-lanes .lt-word .wtile { --ts: 1.5rem; }
.lt-tiles .wtile.pc-used { filter: grayscale(0.6) brightness(0.8); }
/* Viele Spieler: „Gelöst“-Liste ab 7 Einträgen zweispaltig und dichter */
.ws-solved:has(> .wsv:nth-child(7)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25em; align-content: start; }
.ws-solved:has(> .wsv:nth-child(7)) .wsv { padding: 0.1em 0.35em 0.1em 0.15em; gap: 0.3em; font-size: 0.85em; }
.ws-solved:has(> .wsv:nth-child(7)) .wsv .avatar { --size: 1.75em !important; }
.ws-solved:has(> .wsv:nth-child(7)) .wsv :is(small, em) { display: none; }

/* ------------------------------------------------ Rundenintro: Requisit (intro-props.js) */
/* Buchstäblich!: Steine auf dem Bänkchen */
.rp-rack { width: 46em; display: grid; justify-items: center; gap: 3em; }
.rp-rack .row { display: flex; gap: 0.8em; }
/* echte Spielsteine (word-common.js), nur größer */
.rp-rack .wtile { --ts: 5.6em; transform: rotate(var(--r)); animation: rpTile 0.4s var(--ease-back) both; }
.rp-rack .row.big .wtile { --ts: 16em; }
.rp-rack .wood { width: 44em; height: 2.6em; margin-top: -2.4em; background: linear-gradient(#b07a3e, #7b4f22); border: 0.3em solid var(--ink); border-radius: 0.6em; }
@keyframes rpTile { from { transform: translateY(-14em) rotate(30deg); opacity: 0; } }
.rp-rack .rp-ic { right: 0; top: 14em; transform: rotate(10deg); }