/* Schuno – Comic-Look */
/* In Bangers sehen 1 und 7 fast gleich aus: eigene Formen wie auf den Karten (tools/make-digits-font.js), nur für diese
   beiden Zeichen (unicode-range), alles andere bleibt Bangers */
@font-face {
  font-family: 'SchunoZiffern';
  src: url('../fonts/schuno-digits.ttf') format('truetype');
  unicode-range: U+0031, U+0037;
  font-display: block;
}
/* Bangers und Comic Neue selbst ausgeliefert (SIL OFL, Lizenzen in fonts/OFL-*.txt), nichts geht an Google */
@font-face {
  font-family: 'Bangers';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bangers-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bangers';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bangers-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comic Neue';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/comic-neue-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Comic Neue';
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/comic-neue-latin-700-normal.woff2') format('woff2');
}
:root {
  --ink: #1B1530;
  --ink-soft: #4A4366;
  --paper: #FFFDF6;
  --paper-2: #F3EEFF;
  --sky: #5BC0EB;
  --sky-deep: #46AAD9;
  --sun: #FFD23F;
  --sun-deep: #F5B700;
  --pow: #EE4B2B;
  --mint: #3DD6C1;
  --grape: #7B5CD6;
  --leaf: #62C370;
  --sq-light: #FFF0C9;
  --sq-dark: #F2A541;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 16px 9px 18px 10px;
  --display: 'SchunoZiffern', 'Bangers', 'Impact', 'Arial Black', sans-serif;
  --body: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', 'Segoe Print', cursive, sans-serif;
  --cw: 96px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background-color: var(--sky);
  background-image: radial-gradient(circle, var(--sky-deep) 1.7px, transparent 1.9px);
  background-size: 16px 16px;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px dashed var(--grape); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Grundbausteine ---------- */
.panel {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-size: 21px; letter-spacing: .05em; line-height: 1;
  padding: 11px 18px 9px;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 12px 7px 13px 8px;
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none; text-transform: uppercase;
  transition: transform .08s, box-shadow .08s, background-color .15s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--ink); }
.btn-sm { font-size: 17px; padding: 8px 12px 6px; }
.btn-sun { background: var(--sun); }
.btn-pow { background: var(--pow); color: #fff; }
.btn-mint { background: var(--mint); }
.btn-leaf { background: var(--leaf); }
.btn-grape { background: var(--grape); color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: var(--shadow-sm); padding: 0;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- Kopfzeile ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;   /* passt es nicht, rutschen die Knöpfe in die nächste Zeile statt überzustehen */
  padding: 10px 20px;
  background: var(--paper);
  border-bottom: 4px solid var(--ink);
}
.top-left { display: flex; align-items: center; gap: 18px; }
.logo {
  font-family: var(--display); font-size: 38px; line-height: 1; letter-spacing: .03em;
  color: var(--sun); text-decoration: none;
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg); display: inline-block; padding: 2px 4px;
}
.logo-bang { color: var(--pow); }
.nav { display: flex; gap: 6px; }
.nav a {
  font-family: var(--display); font-size: 20px; letter-spacing: .05em;
  color: var(--ink); text-decoration: none; padding: 6px 10px 4px; border-radius: 8px;
  border: 3px solid transparent;
}
.nav a:hover { background: var(--paper-2); }
.nav a.on { background: var(--sun); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.profile-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 30px;
  padding: 3px 14px 3px 3px; box-shadow: var(--shadow-sm); max-width: 220px;
}
.profile-chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pc-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sun); display: grid; place-items: center; flex: none; }
.pc-avatar svg { width: 28px; height: 28px; }
.pc-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
.pc-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pc-sub { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
/* Nachrichten: Zahl der neuen Nachrichten oben rechts am Symbol */
.icon-btn { position: relative; }
.icon-badge {
  position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: var(--pow); border: 2px solid var(--ink); border-radius: 11px;
}
/* Runder Regler im Comic-Stil: Spur mit Rand, links vom Knopf gefüllt (--v = 0…1 setzt app.js), gelber Knopf */
input.vol-range {
  --v: .5;
  display: block; width: 100%; max-width: 320px; height: 24px; margin: 0; padding: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
input.vol-range::-webkit-slider-runnable-track {
  box-sizing: border-box; height: 14px; border: 2px solid var(--ink); border-radius: 7px;
  --fill: calc(11px + (100% - 22px) * var(--v));   /* bis zur Mitte des Knopfs */
  background: linear-gradient(to right, var(--grape) var(--fill), var(--paper-2) var(--fill));
}
input.vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: -6px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--sun); box-shadow: 2px 2px 0 var(--ink);
}
input.vol-range::-moz-range-track { box-sizing: border-box; height: 14px; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper-2); }
input.vol-range::-moz-range-progress { box-sizing: border-box; height: 14px; border: 2px solid var(--ink); border-radius: 7px; background: var(--grape); }
input.vol-range::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border: 3px solid var(--ink); border-radius: 50%; background: var(--sun); box-shadow: 2px 2px 0 var(--ink); }
input.vol-range:focus { outline: none; }
input.vol-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--grape); outline-offset: 2px; }
input.vol-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--grape); outline-offset: 2px; }
/* Einstellungen (openSettings): Abschnitte, Flaggen (nur Deutsch aktiv), winziger geheimer Schalter unten rechts */
.modal-settings { padding-bottom: 30px; }
.set-block { margin: 6px 0 14px; }
.set-label { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .05em; margin-bottom: 6px; }
.modal .set-block .hint { margin: 2px 0 8px; }
.set-block .check-row { margin: 8px 0 2px; }
.lang-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lang { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; font-weight: 700; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; }
.lang svg { width: 27px; height: 18px; border: 1.5px solid var(--ink); border-radius: 3px; display: block; }
.lang.on { background: var(--sun); box-shadow: 2px 2px 0 var(--ink); }
.lang:disabled { opacity: .4; filter: grayscale(1); cursor: not-allowed; }
.secret-switch { position: absolute; right: 10px; bottom: 6px; display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--ink-soft); opacity: .6; cursor: pointer; }
.secret-switch input { width: 10px; height: 10px; margin: 0; accent-color: var(--ink-soft); }
.secret-switch.on { opacity: 1; color: var(--ink); }
.secret-switch.on input { accent-color: var(--ink); }
/* Gast-Popup: rotes X zum Abbrechen */
.modal-ask .modal-x { background: var(--pow); color: #fff; }
.anon { font-weight: 700; font-style: italic; color: var(--ink-soft); }
/* Anklickbare Spielernamen (Rangliste, Freunde, Nachrichten) */
.plink { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
.plink:hover { color: var(--grape); text-decoration: underline; text-underline-offset: 3px; }
/* online / spielt gerade / offline */
.odot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); background: #bbb; margin-right: 5px; vertical-align: -1px; }
.odot.on { background: var(--leaf); }
.odot.play { background: var(--sun); }
.modal .p-status { margin: -4px 0 10px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
/* Nachrichten und Freundesliste */
.msg-list, .fr-list { list-style: none; margin: 8px 0 0; padding: 0; }
.msg-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px dashed rgba(27, 21, 48, .25); }
.msg-text { flex: 1 1 220px; min-width: 0; }
.msg-text small, .fr-name small { display: block; font-size: 13px; color: var(--ink-soft); }
.msg-acts { display: flex; gap: 6px; }
.fr-add { display: flex; gap: 8px; margin: 4px 0 8px; }
.fr-add input { flex: 1; min-width: 0; border: 3px solid var(--ink); border-radius: 8px; padding: 7px 10px; background: #fff; font-size: 15px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(27, 21, 48, .25); }
.fr-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-2); }
.fr-ico svg { width: 28px; height: 28px; }
.fr-name { flex: 1; min-width: 0; }
.fr-name .plink { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-share { justify-content: flex-start; margin-top: 8px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 24px 16px 60px; }
.section-title {
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 44px); letter-spacing: .04em;
  color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 4px 4px 0 var(--ink);
  margin: 34px 0 16px; text-wrap: balance;
}
.section-sub { margin: -8px 0 20px; font-weight: 700; }

/* ---------- Start ---------- */
.hero {
  display: grid; grid-template-columns: 1.15fr 1fr; position: relative;
  min-height: 330px;
}
.hero-text { padding: 30px 30px 26px; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
/* Schriftzug groß und mittig im Textbereich */
.hero-title {
  font-family: var(--display); font-weight: 400; font-size: clamp(64px, 11vw, 128px); line-height: .92;
  letter-spacing: .02em; margin: 0 0 18px; text-align: center;
}
.hero-title span { display: inline-block; -webkit-text-stroke: 2.5px var(--ink); text-shadow: 5px 5px 0 var(--ink); }
.ht-b { color: var(--sun); transform: rotate(-4deg); }   /* gleicher Winkel wie das Logo oben links */
.hero-title .ht-bang { color: var(--pow); text-shadow: none; }
/* Ranked unter Freunden */
.check-row.friend-ranked { margin: 0; font-size: 15px; }
.mode-friend .check-row input { accent-color: var(--sun); }
/* Schnelles Spiel: Countdown fürs Kartenziehen (auf dem Stapel) */
.draw-timer {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  min-width: 64px; height: 64px; display: grid; place-items: center; padding: 0 8px;
  font-family: var(--display); font-size: 38px; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px var(--ink);
  background: var(--pow); border: 4px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm);
  animation: pulse 1s infinite;
}
/* Neu mischen: Karten fliegen von der Ablage zusammen, werden gemischt und wandern auf den Stapel */
.shuffle-fx { position: fixed; z-index: 65; pointer-events: none; }
.shuffle-fx .card { position: absolute; inset: 0; }
.shuffle-label {
  position: fixed; z-index: 66; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--display); font-size: 30px; letter-spacing: .05em; color: var(--sun); -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; animation: fade .3s;
}
.hero-lead { font-size: 18px; max-width: 34em; margin: 0; }
.online-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap;
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: 20px; padding: 4px 12px;
  font-weight: 700; font-size: 14px;
}
.online-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: #aaa; border: 2px solid var(--ink); }
.online-pill.on .dot { background: var(--leaf); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.3); } }
.hero-art { position: relative; min-height: 300px; border-left: 4px solid var(--ink); container-type: size; }
/* Hintergrund, Karten und Springer werden hier abgeschnitten, der Erledigt-Stempel darf über den Rand ragen */
.hero-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 0 5px 14px 0; }
/* Quadrat mit Seite ≥ Diagonale der Fläche: deckt in jeder Drehung bis in die Ecken (doppelte Breite reicht, solange die Fläche
   höchstens 1,7-mal so hoch wie breit ist; 100cqh war in Chrome 0, dann blieben am Handy die Ecken weiß) */
.hero-burst {
  position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--sun) 0 9deg, #FFE27A 9deg 18deg);
  transform: translate(-50%, -50%);
  animation: rot 60s linear infinite;
}
@keyframes rot { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero-cards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hero-cards .card { --cw: 104px; position: absolute; left: -52px; top: -80px; transform-origin: 50% 120%; transition: transform .3s; }
.hero-cards .card:nth-child(1) { transform: translateX(-70px) rotate(-18deg); }
.hero-cards .card:nth-child(2) { transform: translateY(-14px) rotate(-2deg); z-index: 1; }
.hero-cards .card:nth-child(3) { transform: translateX(70px) rotate(15deg); }
.hero-art:hover .hero-cards .card:nth-child(1) { transform: translateX(-92px) rotate(-24deg); }
.hero-art:hover .hero-cards .card:nth-child(3) { transform: translateX(92px) rotate(21deg); }
.hero-piece { position: absolute; right: 6%; bottom: -6px; width: 128px; height: 128px; z-index: 2; transform: rotate(8deg); }
.hero-piece svg { width: 100%; height: 100%; filter: drop-shadow(4px 4px 0 rgba(27, 21, 48, .5)); }
/* Rechte Hälfte = Tutorial: Schriftzug oben links (größer als die Modus-Titel, flach wie sie), nach dem Abschluss ein grüner Stempel über der Ecke */
.hero-art { cursor: pointer; }
.hero-art:focus-visible { outline: 4px dashed var(--grape); outline-offset: -8px; }
.hero-tut {
  position: absolute; left: 20px; top: 14px; z-index: 3; pointer-events: none;
  font-family: var(--display); font-size: 52px; line-height: 1; letter-spacing: .04em;
  color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink);
}
.hero-done {
  position: absolute; top: 0; right: -26px; z-index: 4; pointer-events: none;
  font-family: var(--display); font-size: 43px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink);
  background: var(--leaf); border: 4px solid var(--ink); border-radius: 12px; padding: 10px 17px 5px;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(12deg);
}
/* Unter 1320 px reicht die Seite fast bis an den Rand: weniger weit hinausragen, sonst entsteht eine seitliche Scrollleiste */
@media (max-width: 1320px) { .hero-done { right: -8px; } }

.hero + .modes { margin-top: 18px; }
.modes {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "ranked quick friend" "bot bot local";
}
#mRanked { grid-area: ranked; }
#mQuick { grid-area: quick; }
.mode-friend { grid-area: friend; }
.mode-bot { grid-area: bot; }
#mLocal { grid-area: local; }
@media (max-width: 1000px) {
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ranked quick" "friend local" "bot bot"; }
  .op-more { display: none; }
}
/* Kopfleiste: Navigation in eine eigene Zeile, damit Logo, Nachrichten, Ton, Online, Freunde und Profil oben Platz haben
   (seit dem Reiter Sammlung und dem Nachrichten-Symbol ab 1280 statt 1120 px) */
@media (max-width: 1280px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .top-left { display: contents; }
  .nav { order: 3; width: 100%; justify-content: space-between; }
  .nav a { flex: 1; text-align: center; }
}
@media (max-width: 560px) {
  .modes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ranked" "quick" "friend" "bot" "local"; }   /* minmax: bei 320 px nicht breiter als der Bildschirm */
  #mLocal { min-height: 280px; }
}
.bot-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
@media (max-width: 700px) { .bot-list { grid-template-columns: 1fr; } }
.bot-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: left;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px 7px 13px 8px;
  padding: 8px 10px 10px; box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s;
}
.bot-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.bot-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.bot-top { display: flex; align-items: center; gap: 8px; }
.bot-ava { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 3px solid var(--ink); background: var(--sq-light); display: grid; place-items: center; }
.bot-ava svg { width: 38px; height: 38px; }
.bot-btn b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .04em; line-height: 1.05; }
.bot-btn small { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-soft); flex: 1; }
.bot-btn .elo { font-family: var(--display); font-size: 15px; letter-spacing: .04em; background: var(--grape); color: #fff; border: 2px solid var(--ink); border-radius: 7px; padding: 2px 8px 0; line-height: 1.2; }
.mode {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left;
  padding: 18px 18px 16px; color: var(--ink);
  border: 4px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  background-image: radial-gradient(circle, rgba(27, 21, 48, .12) 1.2px, transparent 1.4px);
  background-size: 9px 9px;
  transition: transform .1s, box-shadow .1s;
}
.mode { isolation: isolate; }
button.mode:hover { transform: translate(-2px, -2px) rotate(-.5deg); box-shadow: 8px 8px 0 var(--ink); }
button.mode-go { border: 0; cursor: pointer; }
button.mode-go:active { transform: translate(2px, 2px); }
.seg.seg-ranked { width: min(100%, 210px); }
.mode-ranked .mode-art { height: 48%; }
/* schmale Karten (drei nebeneinander, Fenster unter 1240 px): Zeitwahl und Pokal kleiner, damit sie sich nicht überdecken */
@media (min-width: 1001px) and (max-width: 1240px) {
  .seg.seg-ranked { width: 150px; }
  .mode-ranked .mode-art { height: 40%; }
}
/* Bild unten rechts, hinter dem Text */
.mode-art {
  position: absolute; right: 14px; bottom: 12px; height: 58%; max-height: 220px; aspect-ratio: 1; z-index: -1;
  pointer-events: none; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1);
}
/* Lokales Spiel: breites Bild, füllt den Platz zwischen Text und „Starten“ */
.mode-local .mode-art { top: 90px; bottom: 56px; height: auto; min-height: 110px; max-height: none; aspect-ratio: 4 / 3; max-width: calc(100% - 28px); }
.mode-art svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(5px 5px 0 var(--ink)); }
.mode:hover .mode-art { transform: scale(1.08) rotate(-5deg); }
button.mode:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.mode-title { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: .04em; }
.mode-text { font-size: 15px; flex: 1; }
.mode-go {
  font-family: var(--display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 6px 12px 4px; border-radius: 8px;
}
.mode-tag {
  position: absolute; top: -14px; right: 12px; transform: rotate(4deg);
  font-family: var(--display); font-size: 16px; letter-spacing: .05em;
  background: var(--sun); border: 3px solid var(--ink); padding: 3px 9px 1px; border-radius: 6px;
}
.mode-ranked { background-color: var(--grape); color: #fff; }
.mode-ranked .mode-go { background: var(--sun); color: var(--ink); }
.mode-quick { background-color: var(--mint); }
.mode-friend { background-color: var(--pow); color: #fff; }
.mode-bot { background-color: var(--sun); }
.mode-local { background-color: var(--paper); }
/* Offline nicht nutzbar: blass wie mit 55 % Deckkraft, aber mit deckendem Grund,
   damit die großen Punkte des Seitenhintergrunds nicht durchscheinen */
.mode.offline {
  --fade-ink: color-mix(in srgb, var(--ink) 55%, var(--sky));
  border-color: var(--fade-ink); box-shadow: 6px 6px 0 var(--fade-ink);
  background-image: radial-gradient(circle, rgba(27, 21, 48, .07) 1.2px, transparent 1.4px);
}
.mode.offline > * { opacity: .55; }
.mode.offline > .btn:disabled { opacity: .3; }
.mode-ranked.offline { background-color: color-mix(in srgb, var(--grape) 55%, var(--sky)); }
.mode-quick.offline { background-color: color-mix(in srgb, var(--mint) 55%, var(--sky)); }
.mode-friend.offline { background-color: color-mix(in srgb, var(--pow) 55%, var(--sky)); }
.mode.offline .mode-tag {
  opacity: 1; background: color-mix(in srgb, var(--sun) 55%, var(--sky)); border-color: var(--fade-ink);
  color: var(--fade-ink);
}
button.mode.offline:hover { box-shadow: 8px 8px 0 var(--fade-ink); }
.mode-friend > .btn { width: 100%; }
.seg { display: flex; width: 100%; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--paper); }
.seg button { flex: 1; border: 0; background: transparent; padding: 7px 4px; font-weight: 700; color: var(--ink); }
.seg button + button { border-left: 3px solid var(--ink); }
.seg button[aria-checked="true"] { background: var(--sun); }
.seg button[data-min="custom"] { flex: 1.9; }
/* Dialog: eigene Bedenkzeit */
.check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 10px 0 6px; cursor: pointer; }
.check-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--grape); cursor: pointer; }
.clock-set { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; transition: opacity .15s; }
.clock-set.off { opacity: .4; }
.clock-set label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.clock-set label b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .04em; }
.clock-set input[type="range"] { width: 100%; margin: 0 0 12px; accent-color: var(--grape); cursor: pointer; }
.clock-set .scale { display: flex; justify-content: space-between; margin: -10px 0 12px; font-size: 12px; color: var(--ink-soft); }
.code-form { width: 100%; margin-top: 4px; }
.code-form label { font-weight: 700; font-size: 14px; }
.code-row { display: flex; gap: 8px; margin-top: 4px; }
.code-row input {
  flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .15em; font-weight: 700;
  border: 3px solid var(--ink); border-radius: 8px; padding: 6px 10px; background: var(--paper); color: var(--ink);
}

/* ---------- Warten ---------- */
.wait { max-width: 560px; margin: 40px auto; padding: 30px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wait-title { font-family: var(--display); font-weight: 400; font-size: 40px; letter-spacing: .04em; margin: 0; }
.wait-sub { margin: 0; max-width: 32em; }
.wait-sub.small { font-size: 14px; color: var(--ink-soft); }
.wait-time { font-family: var(--display); font-size: 34px; margin: 0; font-variant-numeric: tabular-nums; }
/* Suche: echte Karten drehen sich gleichmäßig um die eigene Achse. Jeder Durchlauf ist eine halbe Drehung von Kante zu Kante,
   dort (Karte steht hochkant, unsichtbar) wird die nächste eingesetzt (app.js, watchSpin). */
.spinner-card { --cw: 74px; width: var(--cw); height: calc(var(--cw) * 1.45); animation: cardSpin 1.3s linear infinite; }
@keyframes cardSpin {
  from { transform: perspective(500px) rotateY(-90deg); }
  to { transform: perspective(500px) rotateY(90deg); }
}
.invite-code {
  font-family: var(--display); font-size: 58px; letter-spacing: .18em; line-height: 1;
  background: var(--sun); border: 4px solid var(--ink); border-radius: 12px; padding: 12px 18px 6px 28px;
  box-shadow: var(--shadow); transform: rotate(-2deg);
}
.invite-row { display: flex; gap: 8px; width: 100%; }
.invite-row input { flex: 1; min-width: 0; border: 3px solid var(--ink); border-radius: 8px; padding: 8px 10px; background: #fff; font-size: 14px; }
.invite-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Gegnersuche: laufende Punkte im Titel, angetippte Karten im Hintergrund (hinter dem Feld, blenden langsam aus) */
.wait-dots { display: inline-block; width: 1.1em; text-align: left; }
/* beim schnellen Antippen nichts blau markieren (Eingabefelder bleiben auswählbar) */
body[data-screen="wait"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body[data-screen="wait"] input { -webkit-user-select: text; user-select: text; }
.tap-cards { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.tap-card { position: absolute; --cw: 74px; transform: translate(-50%, -50%); animation: tapIn .12s ease-out, tapOut 1.6s 3s ease-in forwards; }
@keyframes tapIn { from { opacity: 0; } }
@keyframes tapOut { to { opacity: 0; } }
.waiting-dots { font-weight: 700; margin: 6px 0 0; }
.waiting-dots span { animation: blink 1.2s infinite; }
.waiting-dots span:nth-child(2) { animation-delay: .2s; }
.waiting-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Spiel ---------- */
.game {
  display: grid; gap: 22px; align-items: start;
  grid-template-columns: 200px minmax(0, 1fr) 300px;
  grid-template-areas: "table board side";
}
.board-col { grid-area: board; display: flex; flex-direction: column; gap: 10px; width: min(100%, calc(100vh - 290px), calc(100dvh - 290px)); min-width: 0; justify-self: center; }
/* unter der eigenen Spielerleiste bleibt Platz für Spielhinweise (.toast.at-board) */
.board-wrap { position: relative; }
.board {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 100%;
  border: 5px solid var(--ink); border-radius: 10px; box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: var(--sq-light);
}
.board.scroll-ok { touch-action: pan-y; }
/* Handy: hüpfender Pfeil nach unten zu „Zug beenden“ (scrollHint) */
.scroll-hint {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center; background: var(--sun); border: 3px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm);
  transform: translateX(-50%); animation: hintBounce 1s ease-in-out infinite;
}
.scroll-hint svg { width: 28px; height: 28px; }
@keyframes hintBounce { 50% { transform: translate(-50%, 7px); } }
.board.spin { animation: spin .8s cubic-bezier(.5, 0, .3, 1); }
@keyframes spin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(90deg) scale(.82); }
  100% { transform: rotate(180deg) scale(1); }
}
.board.no-anim .pc { transition: none !important; }
/* Wechsel mit Skins: Kopie im alten Aussehen blendet in der ersten Hälfte der Drehung aus (skinSwapFx; Drehung startet nach 0,5 s und
   dauert 0,8 s). Bei 90° ist das neue Aussehen ganz da, nach der Drehung ist nichts Altes mehr zu sehen (Nutzer, 19.10.2026) */
.sk-fade { pointer-events: none; animation: skFade .38s ease-in-out .5s forwards; }
.pieces.sk-fade { z-index: 5; }   /* beim Ausblenden bildet opacity eine eigene Ebene, die sonst unter den Figuren (z-index 2) läge */
@keyframes skFade { to { opacity: 0; } }
.squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.sq { position: relative; }
.sq.l { background: var(--sq-light); }
.sq.d {
  background-color: var(--sq-dark);
  background-image: radial-gradient(circle, rgba(27, 21, 48, .13) 1px, transparent 1.2px);
  background-size: 7px 7px;
}
.sq::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.sq.prev::after { background: rgba(123, 92, 214, .28); }
.sq.cur::after { background: rgba(61, 214, 193, .42); }
.sq.sel::after { background: rgba(255, 210, 63, .7); box-shadow: inset 0 0 0 3px var(--ink); }
.sq.check::after { background: radial-gradient(circle, rgba(238, 75, 43, .95) 0%, rgba(238, 75, 43, .6) 45%, transparent 72%); }
.sq.tgt::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(27, 21, 48, .38); z-index: 1;
}
.sq.tgt.cap::before { width: 88%; height: 88%; background: transparent; border: 5px solid rgba(27, 21, 48, .42); }
.sq.tgt:hover::before { background: rgba(27, 21, 48, .55); }
.coord { position: absolute; font-size: clamp(9px, 1.5vw, 12px); font-weight: 700; line-height: 1; pointer-events: none; opacity: .75; }
.coord.rk { left: 3px; top: 3px; }
.coord.fl { right: 4px; bottom: 2px; }
.sq.l .coord { color: #C27A22; }
.sq.d .coord { color: #FFF0C9; }

.pieces { position: absolute; inset: 0; pointer-events: none; }
.pc {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%;
  transform: var(--pos);
  transition: transform .24s cubic-bezier(.3, 1.35, .5, 1);
  will-change: transform; z-index: 2;
}
.pc svg { width: 100%; height: 100%; display: block; filter: drop-shadow(2px 3px 0 rgba(27, 21, 48, .35)); transition: opacity .2s; }
.pc.done svg { opacity: .5; filter: grayscale(.6); }
/* Haken als Grafik, damit er den grünen Kreis gut ausfüllt (das Schriftzeichen ✓ war sehr klein) */
.pc.done::after {
  content: ''; position: absolute; right: 2%; top: 1%; width: 34%; height: 34%;
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231B1530' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
  border: 2px solid var(--ink); border-radius: 50%;
}
/* +2/+4: Vorschau, wo die gewählte Figur zurückkommt (leuchtendes Feld, blasse Figur), daneben X und Haken */
.revive-spot {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; transform: var(--pos); z-index: 3;
  border-radius: 14%; background: radial-gradient(circle, rgba(255, 230, 120, .75), rgba(255, 210, 63, .25) 70%);
  box-shadow: inset 0 0 0 3px #FFD23F, 0 0 14px 4px rgba(255, 210, 63, .8); animation: revive-glow 1.4s ease-in-out infinite;
}
.revive-spot svg { width: 100%; height: 100%; display: block; opacity: .6; }
@keyframes revive-glow { 50% { box-shadow: inset 0 0 0 3px #FFE88A, 0 0 22px 8px rgba(255, 210, 63, .55); } }
.revive-ask {
  position: absolute; width: 25%; height: 10.5%; z-index: 12; pointer-events: auto;
  display: flex; gap: 6%; justify-content: center; align-items: center; animation: pop .25s cubic-bezier(.3, 1.5, .5, 1);
}
.revive-ask button {
  width: 46%; aspect-ratio: 1; max-height: 100%; padding: 0; border-radius: 50%; border: 3px solid var(--ink);
  display: grid; place-items: center; box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
}
.revive-ask button svg { width: 72%; height: 72%; }
.revive-ask .ra-no { background: #D8352A; }
.revive-ask .ra-yes { background: #3FA34D; }
.revive-ask button:active { transform: translate(2px, 2px); box-shadow: none; }
.pc.drag { transition: none; z-index: 10; }
.pc.drag svg { transform: scale(1.18); filter: drop-shadow(5px 8px 0 rgba(27, 21, 48, .35)); }
.pc.steal svg { animation: wobble .7s ease-in-out infinite; }
.pc.steal::before {
  content: ''; position: absolute; inset: 8%; border: 3px dashed var(--pow); border-radius: 50%;
}
@keyframes wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.pc.gone { animation: poof .4s forwards; }
@keyframes poof { 40% { transform: var(--pos) scale(1.3) rotate(-12deg); opacity: 1; } 100% { transform: var(--pos) scale(0) rotate(40deg); opacity: 0; } }
.pc .pts {
  position: absolute; right: 1%; bottom: 3%; z-index: 3;
  font-weight: 700; font-size: clamp(9px, 1.25vw, 12px); line-height: 1; white-space: nowrap;
  background: var(--sun); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 3px;
  box-shadow: 1px 1px 0 var(--ink);
}
.pc .pts.full { background: var(--leaf); }
.pc.ready svg { filter: drop-shadow(0 0 6px var(--sun)) drop-shadow(0 0 3px var(--sun)) drop-shadow(2px 3px 0 rgba(27, 21, 48, .35)); animation: readyBob 1s ease-in-out infinite; }
@keyframes readyBob { 50% { transform: translateY(-6%); } }
/* Tutorial: Felder, um die es gerade geht */
.sq.tut::after { box-shadow: inset 0 0 0 4px var(--grape); animation: tutPulse 1.1s ease-in-out infinite; }
@keyframes tutPulse { 50% { box-shadow: inset 0 0 0 7px rgba(123, 92, 214, .45); } }
.sq.ghost::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 3px dashed rgba(27, 21, 48, .4); z-index: 1;
}
/* Rochade */
.sq.tgt.castle::before { display: none; }
.castle-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.castle-svg .off { opacity: .5; }
.castle-mark {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; z-index: 5; pointer-events: none;
  transform: var(--pos); display: grid; place-items: center;
}
.cm-badge {
  position: relative; width: 74%; height: 74%; border-radius: 50%;
  background: var(--sun); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  display: grid; place-items: center; animation: castlePulse 1.1s ease-in-out infinite;
}
.cm-badge svg { width: 78%; height: 78%; }
.cm-badge b {
  position: absolute; right: -18%; bottom: -14%; min-width: 46%; height: 46%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 400; font-size: clamp(10px, 1.5vw, 15px); line-height: 1;
  background: var(--mint); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%;
}
.castle-mark.off .cm-badge { background: var(--paper); opacity: .6; animation: none; border-style: dashed; }
@keyframes castlePulse { 50% { transform: scale(1.08) rotate(-4deg); } }
.castle-row { flex-direction: column; }
.castle-btn { gap: 6px; }
.cb-ico { display: inline-flex; }
.cb-ico svg { width: 20px; height: 20px; margin-right: -5px; }
.check-tag {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; z-index: 6; pointer-events: none;
  transform: var(--pos); transition: transform .24s cubic-bezier(.3, 1.35, .5, 1);
}
.check-tag span {
  position: absolute; left: 50%; top: -30%; white-space: nowrap;
  font-family: var(--display); font-size: clamp(11px, 1.6vw, 17px); letter-spacing: .05em; line-height: 1;
  background: var(--pow); color: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px 1px;
  box-shadow: 2px 2px 0 var(--ink); transform: translateX(-50%) rotate(-6deg);
  animation: checkPulse 1.2s ease-in-out infinite;
}
.check-tag.below span { top: auto; bottom: -30%; }
@keyframes checkPulse { 50% { transform: translateX(-50%) rotate(-6deg) scale(1.12); } }
.tip {
  position: fixed; z-index: 75; pointer-events: none; max-width: 230px;
  background: var(--ink); color: var(--paper); border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.35;
  box-shadow: 3px 3px 0 rgba(27, 21, 48, .35);
}
.tip b { color: var(--sun); }

/* Spielerleisten */
.pbar {
  display: flex; align-items: center; gap: 10px; min-height: 58px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 12px 7px 13px 8px;
  padding: 6px 10px; box-shadow: var(--shadow-sm); position: relative; transition: background-color .2s;
}
.pb-content { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.pbar.active { background: var(--sun); }
.pbar.active::after {
  content: 'Am Zug'; position: absolute; right: 12px; top: -13px; transform: rotate(3deg);
  font-family: var(--display); font-size: 15px; letter-spacing: .06em;
  background: var(--pow); color: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 2px 8px 0;
}
.pb-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; }
.pb-avatar.w { background: #fff; }
.pb-avatar.b { background: var(--ink); }
.pb-avatar svg { width: 36px; height: 36px; }
.pb-info { flex: 1; min-width: 0; }
.pb-name { font-weight: 700; font-size: 17px; line-height: 1.15; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pb-name .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-sub { font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.pb-caps { display: inline-flex; align-items: center; min-height: 18px; }
.pb-caps svg { width: 18px; height: 18px; margin-right: -6px; }
.pb-caps .adv { margin-left: 10px; font-weight: 700; color: var(--ink); }
.tier-badge {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  font-family: var(--display); font-size: 13px; letter-spacing: .05em; font-weight: 400;
  background: var(--grape); color: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 1px 6px 0 2px;
}
.tier-badge svg { width: 16px; height: 16px; }
.pb-tier { font-size: 14px; white-space: nowrap; }
.pb-tier.top { background: var(--sun); color: var(--ink); }
.clock {
  font-family: var(--display); font-size: 28px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  background: var(--ink); color: var(--paper); border-radius: 8px; padding: 4px 10px 1px; min-width: 84px; text-align: center;
}
.clock.run { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.clock.low { background: var(--pow); color: #fff; animation: pulse 1s infinite; }
.clock.minute { background: var(--pow); color: #fff; animation: pulse 1s; }
.emote-bubble {
  position: absolute; left: 60px; bottom: -46px; z-index: 5;
  background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 6px 12px;
  font-family: var(--display); font-size: 20px; letter-spacing: .04em; white-space: nowrap;
  animation: bubbleIn .25s cubic-bezier(.3, 1.6, .5, 1);
}
.emote-bubble::after {
  content: ''; position: absolute; left: 16px; top: -12px; width: 16px; height: 16px;
  background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewX(-25deg) rotate(225deg);
}
#pbarBottom .emote-bubble { bottom: auto; top: -46px; }
#pbarBottom .emote-bubble::after { top: auto; bottom: -12px; transform: skewX(-25deg) rotate(45deg); }
@keyframes bubbleIn { from { transform: scale(.3); opacity: 0; } }

/* Seitenleiste */
.side { grid-area: side; display: flex; flex-direction: column; gap: 14px; }
.table {
  grid-area: table; --cw: clamp(104px, calc((100vh - 290px) / 3.1), 148px);
  display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 14px 12px 28px;
  background: var(--leaf) radial-gradient(circle, rgba(27, 21, 48, .14) 1.3px, transparent 1.5px) 0 0 / 10px 10px;
  border: 4px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slot-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 22px; letter-spacing: .08em; line-height: 1;
  color: #fff; -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink);
}
.deck { position: relative; width: var(--cw); height: calc(var(--cw) * 1.45); padding: 0; border: 0; background: none; z-index: 1; }
.deck::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 175%; height: 150%; z-index: -3;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s; background: var(--sun);
  clip-path: polygon(50% 0%, 58.8% 17.2%, 75% 6.7%, 74% 26%, 93.3% 25%, 82.8% 41.2%, 100% 50%, 82.8% 58.8%, 93.3% 75%, 74% 74%, 75% 93.3%, 58.8% 82.8%, 50% 100%, 41.2% 82.8%, 25% 93.3%, 26% 74%, 6.7% 75%, 17.2% 58.8%, 0% 50%, 17.2% 41.2%, 6.7% 25%, 26% 26%, 25% 6.7%, 41.2% 17.2%);
}
.deck.can::before { opacity: 1; animation: burstspin 10s linear infinite; }
@keyframes burstspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Stapeldicke nach Kartenzahl (ab 2, 5, 20, 50 Karten eine Kante mehr, data-thick 0–4): helle Kartenkanten unter der obersten Karte */
.deck-stack { position: absolute; inset: 0; }
.deck-layer, .pile-layer {
  position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: calc(var(--cw) * .12);
  background: #FFF8E7; transform: translateY(calc(var(--k) * 4px));
}
.deck-layer.last, .pile-layer.last { box-shadow: 5px 5px 0 var(--ink); }
/* Ablage: gleiche Dickeregel, die Karten liegen aber leicht schräg wie echt hingeworfen */
.pile-layer { transform: translate(calc(var(--k) * 1px), calc(var(--k) * 4px)) rotate(var(--a)); }
.deck .card { position: absolute; inset: 0; box-shadow: none; }
.deck[data-thick="0"] .card { box-shadow: 5px 5px 0 var(--ink); }
.deck.can .card { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-8px) rotate(-3deg); } }
.deck-count {
  min-width: 34px; text-align: center; font-family: var(--body); -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0;
  font-weight: 700; font-size: 14px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 2px 7px;
}
.deck-last {
  font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1;
  -webkit-text-stroke: 0; text-shadow: none; color: #fff; background: var(--pow);
  border: 2px solid var(--ink); border-radius: 10px; padding: 3px 6px;
}
.pile { position: relative; width: var(--cw); height: calc(var(--cw) * 1.45); }
.pile .card { position: absolute; inset: 0; }
.pile .card.under { transform: rotate(var(--r, -6deg)); }
/* Die gerade gespielte Karte schwebt leicht, solange sie gilt.
   Über top/bottom statt transform: bleibt pixelgenau und damit scharf. */
.pile.live .card:not(.under) { animation: cardIdle 2.8s ease-in-out infinite; }
@keyframes cardIdle {
  0%, 100% { top: 0; bottom: 0; box-shadow: 3px 3px 0 var(--ink); }
  50% { top: -7px; bottom: 7px; box-shadow: 4px 10px 0 rgba(27, 21, 48, .45); }
}
.wish-tag {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) rotate(3deg); z-index: 2; white-space: nowrap;
  font-family: var(--display); font-size: 17px; letter-spacing: .05em;
  background: var(--sun); border: 3px solid var(--ink); border-radius: 7px; padding: 2px 9px 0;
}
.wish-tag.num { font-size: 44px; line-height: 1; bottom: -22px; padding: 4px 14px 0; border-radius: 10px; }
.pile-empty {
  position: absolute; inset: 0; border: 3px dashed rgba(27, 21, 48, .5); border-radius: 12px;
  display: grid; place-items: center; text-align: center; font-weight: 700; font-size: 13px; padding: 6px;
}

.bubble {
  position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 18px 14px 20px 12px;
  padding: 12px 14px; font-weight: 700; font-size: 16px; box-shadow: var(--shadow-sm); min-height: 54px;
}
.bubble::before {
  content: ''; position: absolute; left: 38px; top: -13px; width: 18px; height: 18px; background: #fff;
  border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); transform: skewX(20deg) rotate(45deg);
}
.bubble.warn { background: #FFE3DC; }
.bubble.warn::before { background: #FFE3DC; }
.bubble.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.bubble .big { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: .04em; display: block; line-height: 1.1; margin-bottom: 2px; }
.bubble::before { left: -13px; top: 18px; transform: rotate(-45deg); }

/* Punktekonto */
.points { padding: 10px 14px 12px; box-shadow: var(--shadow-sm); }
.points-head { display: flex; align-items: baseline; gap: 8px; }
.points-num { font-family: var(--display); font-size: 42px; line-height: .9; font-variant-numeric: tabular-nums; }
.points-head span { font-weight: 700; }
.coins { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.coin {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink);
  background: var(--sun); box-shadow: inset -3px -3px 0 rgba(27, 21, 48, .18);
}
.coin.spent { background: transparent; border-style: dashed; opacity: .45; box-shadow: none; }

/* Ausgewählte Figur + Aufladen */
.picked { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.pk-ico { width: 54px; height: 54px; flex: none; border: 3px solid var(--ink); border-radius: 10px; background: var(--sq-light); display: grid; place-items: center; }
.pk-ico svg { width: 46px; height: 46px; }
.pk-info { flex: 1; min-width: 150px; }
.pk-name { font-family: var(--display); font-size: 21px; letter-spacing: .04em; line-height: 1.05; }
.pk-sub { font-size: 14px; line-height: 1.3; }
.charge-bar { display: flex; gap: 3px; margin-top: 5px; }
.charge-bar i { flex: 1; height: 11px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; max-width: 26px; }
.charge-bar i.on { background: var(--mint); }
.pk-actions { display: flex; gap: 8px; width: 100%; }
.pk-actions .btn { flex: 1; font-size: 17px; padding: 8px 8px 6px; }

/* Kostenübersicht */
.costs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.cost-chip {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 0 7px 0 0;
  font-family: var(--display); font-size: 16px; letter-spacing: .03em; line-height: 1;
}
.cost-chip svg { width: 23px; height: 23px; }
.cost-table { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.cost-table .cost-chip { font-size: 20px; padding-right: 12px; }
.cost-table .cost-chip svg { width: 36px; height: 36px; }
.cost-table small { font-family: var(--body); font-size: 12px; margin-left: 4px; }
/* Aufladen, Zug beenden, Aufgeben untereinander */
.actions { display: flex; flex-direction: column; gap: 10px; }
.actions .btn { width: 100%; }
#endTurnBtn, #chargeBtn { flex-direction: column; gap: 3px; }
#endTurnBtn small, #chargeBtn small { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.btn.tut-glow { box-shadow: 0 0 0 4px var(--grape), 4px 4px 0 var(--ink); animation: pulse 1.2s infinite; }
/* „Zug beenden“, wenn alle Punkte verbraucht sind: sanft pulsieren mit gelbem Schein */
.btn.hint-pulse { animation: hintPulse 1.2s ease-in-out infinite; }
@keyframes hintPulse {
  50% { transform: scale(1.025); box-shadow: 0 0 0 3px var(--sun), 0 0 9px 2px rgba(255, 210, 63, .6), 4px 4px 0 var(--ink); }
}
#chargeBtn.on { background: var(--sun); box-shadow: inset 0 0 0 3px var(--ink), 4px 4px 0 var(--ink); animation: pulse 1.2s infinite; }
.emotes { display: flex; flex-wrap: wrap; gap: 6px; }
.emotes button {
  flex: 1 1 auto; font-family: var(--display); font-size: 15px; letter-spacing: .04em;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 5px 8px 3px; box-shadow: 2px 2px 0 var(--ink);
}
.emotes button:active { transform: translate(2px, 2px); box-shadow: none; }
/* Chat: ein Fenster, unten die Eingabezeile mit Senden-Knopf */
.chat {
  display: flex; flex-direction: column; background: #fff; border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.chat-log { list-style: none; margin: 0; padding: 8px; min-height: 70px; max-height: 190px; overflow-y: auto; font-size: 14px; line-height: 1.3; }
.chat-log li { padding: 3px 6px; border-radius: 8px; overflow-wrap: anywhere; }
.chat-log li + li { margin-top: 3px; }
.chat-log li b { margin-right: 6px; }
.chat-log li.mine { background: #FFF3BF; }
.chat-log li.theirs { background: var(--paper-2); }
.chat-log li.quick span { font-family: var(--display); letter-spacing: .04em; font-size: 15px; }
.chat-form { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 10px; border-top: 2px dashed rgba(27, 21, 48, .3); }
.chat-form input { flex: 1; min-width: 0; border: 0; padding: 5px 0; background: transparent; font-size: 15px; outline: none; }
.chat-form .btn { padding: 6px 10px 4px; font-size: 15px; box-shadow: 2px 2px 0 var(--ink); }
.chat-count { font-size: 12px; color: var(--ink-soft); margin-top: -8px; }
.emote-bubble.chat-bubble {
  font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.3;
  white-space: normal; width: max-content; max-width: min(280px, 70vw);
}
.log { padding: 10px 14px; box-shadow: var(--shadow-sm); }
.log summary { font-family: var(--display); font-size: 19px; letter-spacing: .05em; cursor: pointer; }
.log ol { margin: 8px 0 0; padding-left: 0; list-style: none; max-height: 220px; overflow-y: auto; font-size: 14px; }
.log li { padding: 2px 0; border-bottom: 1px dashed rgba(27, 21, 48, .2); display: flex; gap: 6px; }
.log .who { font-weight: 700; flex: none; }
.log .dotc { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); flex: none; margin-top: 5px; }
.log .dotc.w { background: #fff; }
.log .dotc.b { background: var(--ink); }

/* ---------- Karten ---------- */
.card {
  position: relative; display: block; width: var(--cw); height: calc(var(--cw) * 1.45);
  border: 3px solid var(--ink); border-radius: calc(var(--cw) * .12);
  overflow: hidden; color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  background-image: radial-gradient(circle, rgba(27, 21, 48, .14) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.card.c-num { background-color: var(--sun); }
.card.c-act { background-color: var(--mint); }
.card.c-plus { background-color: var(--pow); }
.card.c-wild { background-color: var(--ink); background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.4px); }
.card.c-back { background-color: var(--ink); background-image: radial-gradient(circle, rgba(255, 255, 255, .12) 1.2px, transparent 1.4px); }
.c-oval {
  position: absolute; left: 50%; top: 50%; width: 76%; height: 62%;
  transform: translate(-50%, -50%) rotate(28deg);
  background: #fff; border: 3px solid var(--ink); border-radius: 50%;
}
.c-back .c-oval { background: var(--pow); }
.c-center { position: absolute; inset: 0; display: grid; place-items: center; }
.c-big {
  font-family: var(--display); font-weight: 400; font-size: calc(var(--cw) * .74); line-height: 1;
  color: var(--ink); text-shadow: calc(var(--cw) * .04) calc(var(--cw) * .04) 0 var(--pow);
  /* Bangers-Ziffern ragen nach rechts über, der Schatten liegt rechts unten: zurück zur Mitte schieben */
  transform: translate(calc(var(--cw) * -.055), calc(var(--cw) * -.025)) rotate(-6deg);
}
/* 1 und 7 als eigene Formen (in Bangers kaum zu unterscheiden) */
.c-glyph { display: block; height: calc(var(--cw) * .56); aspect-ratio: 70 / 100; transform: translate(calc(var(--cw) * -.02), calc(var(--cw) * -.01)); }
.c-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; fill: var(--ink); filter: drop-shadow(calc(var(--cw) * .04) calc(var(--cw) * .04) 0 var(--pow)); }
.c-corner .c-glyph-mini { display: block; height: calc(var(--cw) * .17); width: auto; overflow: visible; fill: #fff; stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(1px 1px 0 var(--ink)); }
.c-icon { width: calc(var(--cw) * .66); height: calc(var(--cw) * .66); display: block; transform: rotate(-6deg); }
/* Aussetzen und Wechsel kleiner, damit sie mit Abstand in der weißen Ellipse sitzen */
.c-act .c-icon { width: calc(var(--cw) * .6); height: calc(var(--cw) * .6); }
.c-wild .c-icon { transform: none; }
.c-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.c-corner {
  position: absolute; font-family: var(--display); font-size: calc(var(--cw) * .22); line-height: 1; color: #fff;
  -webkit-text-stroke: 1px var(--ink); text-shadow: 1px 1px 0 var(--ink);
  min-width: calc(var(--cw) * .22); height: calc(var(--cw) * .24); display: grid; place-items: center;
}
.c-mini { display: block; width: calc(var(--cw) * .22); height: calc(var(--cw) * .22); }
.c-mini svg { width: 100%; height: 100%; display: block; }
.c-tl { left: 6%; top: 4%; }
.c-br { right: 6%; bottom: 4%; transform: rotate(180deg); }
.c-logo {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-size: calc(var(--cw) * .27); letter-spacing: .03em; color: var(--sun);
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 2px 2px 0 var(--ink); transform: rotate(-28deg);
}
.card-fly { position: fixed; z-index: 60; pointer-events: none; perspective: 700px; }
.card-fly .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s; }
.card-fly .card { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.card-fly .front { transform: rotateY(180deg); }
.card-fly.flipped .inner { transform: rotateY(180deg); }

/* ---------- Comic-Effekte ---------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.boom {
  position: absolute; width: 190px; height: 120px; margin: -60px 0 0 -95px;
  display: grid; place-items: center; animation: boom 1.1s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.boom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.boom span {
  position: relative; font-family: var(--display); font-size: 34px; letter-spacing: .04em; line-height: 1; text-align: center;
  color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); transform: rotate(-6deg); padding: 0 10px;
}
.boom.big { width: 300px; height: 170px; margin: -85px 0 0 -150px; }
.boom.big span { font-size: 50px; }
@keyframes boom {
  0% { transform: scale(.2) rotate(-20deg); opacity: 0; }
  18% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  30% { transform: scale(1) rotate(0); }
  78% { opacity: 1; }
  100% { transform: scale(1.05) translateY(-26px); opacity: 0; }
}

/* ---------- Dialoge ---------- */
#modalRoot { position: fixed; inset: 0; z-index: 80; }
.modal-back {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(27, 21, 48, .55); animation: fade .2s;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px 22px 22px; position: relative;
  animation: pop .3s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes pop { from { transform: scale(.7) rotate(-3deg); opacity: 0; } }
/* Dialog offen: Die Seite dahinter scrollt nicht mit (Handy; am PC bliebe sonst die Bildlaufleiste weg und alles springt) */
.modal { overscroll-behavior: contain; }
@media (pointer: coarse) { html.modal-lock, html.modal-lock body { overflow: hidden; } }
.modal h2 { font-family: var(--display); font-weight: 400; font-size: 36px; letter-spacing: .04em; margin: 0 0 8px; line-height: 1.05; }
.modal-x + h2:not(.result-title) { padding-right: 40px; }
.modal p { margin: 0 0 12px; }
.modal-x {
  position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--paper); font-weight: 700; font-size: 18px; line-height: 1; padding: 0;
}
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.modal-actions .btn { flex: 1 1 auto; }
.tabs { display: flex; gap: 0; margin: 0 0 16px; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; }
.tabs button { flex: 1; border: 0; background: var(--paper); padding: 8px; font-family: var(--display); font-size: 20px; letter-spacing: .05em; }
.tabs button + button { border-left: 3px solid var(--ink); }
.tabs button[aria-selected="true"] { background: var(--sun); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-weight: 700; font-size: 14px; }
.field label small { font-weight: 400; color: var(--ink-soft); }
.forgot-row { margin: 12px 0 0 !important; text-align: center; }
.link-btn { background: none; border: 0; padding: 2px 4px; font-weight: 700; color: var(--grape); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }
.modal-sub { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .05em; margin: 16px 0 0; }
.modal .acc-mail { margin: 6px 0 0; overflow-wrap: anywhere; }
.btn-ghost-pow { background: var(--paper); color: #B3261E; }
.field input { border: 3px solid var(--ink); border-radius: 8px; padding: 9px 12px; background: #fff; font-size: 16px; }
.form-err { color: #B3261E; font-weight: 700; min-height: 1.4em; margin: 0 0 6px; }
/* Bug melden (Einstellungen): Textfeld, Vorschaubilder mit X, Feld „+ Bild“ */
.field textarea { border: 3px solid var(--ink); border-radius: 8px; padding: 9px 12px; background: #fff; font: inherit; font-size: 16px; resize: vertical; min-height: 120px; }
.modal .bug-count { margin: -6px 0 10px; }
.bug-label { display: block; font-size: 14px; margin-bottom: 6px; }
.bug-label small { font-weight: 400; color: var(--ink-soft); }
.bug-shots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.bug-shot, .bug-add { position: relative; width: 84px; height: 84px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.bug-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }
.bug-del { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: var(--pow); color: #fff; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; }
.bug-add { display: grid; place-items: center; border-style: dashed; font-weight: 700; cursor: pointer; color: var(--ink-soft); }
.bug-add:hover { background: #FFF6D6; }
/* Passwort vergessen: Hinweis auf den Spamordner, gut sichtbar */
.modal .spam-warn { background: #FFE3DC; border: 3px solid var(--pow); border-radius: 10px; padding: 8px 12px; font-weight: 700; }
.spam-warn b { color: #B3261E; }
.hint { font-size: 14px; color: var(--ink-soft); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 12px; margin-top: 10px; }
.pick { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; text-align: center; }
.pick .card { --cw: 78px; transition: transform .12s; }
.pick:hover .card { transform: translateY(-6px) rotate(-3deg); }
.pick-piece { width: 76px; height: 76px; border: 3px solid var(--ink); border-radius: 12px; background: var(--sq-light); box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.pick-piece svg { width: 64px; height: 64px; }
.pick:hover .pick-piece { background: var(--sun); }
.pick:disabled { opacity: .35; cursor: not-allowed; }
.pick:disabled:hover .card { transform: none; }
.result-title { font-size: 64px !important; text-align: center; -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 5px 0 var(--ink); }
.result-title.win { color: var(--sun); }
.result-title.solo { font-size: 84px !important; margin-bottom: 4px; }
.result-title.lose { color: var(--pow); }
.result-title.tie { color: #fff; }
.result-reason { text-align: center; font-weight: 700; font-size: 18px; }
.elo-change { text-align: center; font-family: var(--display); font-size: 28px; letter-spacing: .04em; margin: 4px 0 8px; }
.elo-change .up { color: #2E8B3A; }
.elo-change .down { color: #B3261E; }
.modal .placement-note { text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: -4px 0 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.stat { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; padding: 8px 6px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 26px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; }
.progress { height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; margin: 6px 0 4px; }
/* Profil: über den Enden des Fortschrittsbalkens der jetzige (links) und der nächste Rang (rechts) */
.tier-ends { display: flex; justify-content: space-between; margin: 4px 0 0; }
.tier-ends svg { width: 28px; height: 28px; }
.tier-end { display: inline-flex; }   /* nächster Rang Schuno-Meister: König mit Strahlen (.glow) statt nur König */
.tier-ends + .progress { margin-top: 2px; }
.progress i { display: block; height: 100%; background: var(--grape); }
/* Elo-Verlauf im Profil: eine Linie, zurückhaltende Hilfslinien, Info beim Drüberfahren/Antippen (renderEloChart) */
.elo-chart { position: relative; margin: 6px 0 4px; }
.elo-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.modal .ec-sub { margin: 0 0 4px; font-size: 13px; color: var(--ink-soft); }
.ec-grid { stroke: #E7E2F1; stroke-width: 1; }
.ec-tier { stroke: #A898D8; stroke-width: 2; }
.ec-tick, .ec-date { font-size: 11px; fill: #6E6887; }
.ec-line { fill: none; stroke: var(--grape); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ec-area { fill: var(--grape); opacity: .1; }
.ec-cross { stroke: var(--ink); stroke-width: 1; opacity: .35; }
.ec-dot { fill: var(--grape); stroke: var(--paper); stroke-width: 2; }
.ec-end { font-size: 13px; font-weight: 700; fill: var(--ink); }
.ec-hit { fill: transparent; cursor: crosshair; }
.ec-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: var(--paper); border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.35;
  box-shadow: 3px 3px 0 rgba(27, 21, 48, .35);
}
.ec-tip small { opacity: .75; }
.ec-tip .up { color: #8BE39A; }
.ec-tip .down { color: #FF9C88; }
.history { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
.history li { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed rgba(27, 21, 48, .25); }
.res { font-family: var(--display); width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 6px; flex: none; }
.res.S { background: var(--leaf); }
.res.N { background: var(--pow); color: #fff; }
.res.R { background: var(--paper-2); }
.history .d { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
/* eigene Partien: antippen öffnet ein kleines Menü „Spielanalyse anzeigen“ */
.history li.hist-link { position: relative; cursor: pointer; border-radius: 6px; padding-left: 4px; padding-right: 4px; margin: 0 -4px; }
.history li.hist-link:hover, .history li.hist-link:focus-visible { background: var(--paper-2); }
.hist-menu {
  position: absolute; right: 4px; top: calc(100% - 2px); z-index: 3; padding: 6px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow-sm);
}

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--paper); border: 3px solid var(--ink); border-radius: 12px;
  padding: 10px 16px; font-weight: 700; max-width: calc(100% - 32px); box-shadow: 4px 4px 0 rgba(27, 21, 48, .4);
  animation: toastIn .25s cubic-bezier(.3, 1.5, .5, 1);
}
.toast.bad { background: var(--pow); color: #fff; }
.toast.good { background: var(--leaf); color: var(--ink); }
.toast.at-board { bottom: auto; width: max-content; text-align: center; padding: 7px 14px; font-size: 15px; line-height: 1.3; }
@keyframes toastIn { from { transform: translate(-50%, 30px); opacity: 0; } }
.toast.out { animation: toastOut .4s ease-in forwards; }
@keyframes toastOut { to { transform: translate(-50%, 12px); opacity: 0; } }

/* ---------- Farbwahl ---------- */
.color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick-rand > svg { grid-area: 1 / 1; }
.pick-rand > svg.half { clip-path: inset(0 0 0 50%); }

/* ---------- Analysebrett ---------- */
.modal.modal-analysis { width: min(880px, 100%); }
.an { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.an-main { display: flex; flex-direction: column; min-width: 0; }
.an-boardrow { display: flex; gap: 10px; align-items: stretch; }
.an-board { width: min(calc(100vh - 290px), calc(100dvh - 290px), 520px); min-width: 220px; flex: none; box-shadow: 5px 5px 0 var(--ink); }
/* Zeichen der Zugbewertung dürfen über den Brettrand ragen (sonst schneidet der Rand sie am Rand ab); die Felder behalten die runden Ecken */
.board.an-board { overflow: visible; }
.an-board .squares { border-radius: 5px; overflow: hidden; }
/* Gewinnbalken: unten die Farbe, die unten spielt */
.an-bar {
  position: relative; width: 22px; flex: none; overflow: hidden;
  background: #3B3359; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink);
}
.an-bar.top-w { background: #fff; }
.an-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #fff; transition: height .45s cubic-bezier(.3, 1, .5, 1); }
.an-bar i.b { background: #3B3359; }
.an-bar::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--pow); opacity: .75; z-index: 1; }
.an-arrows { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
/* eigene Pfeile und Kreise auf dem Spielbrett (Rechtsklick) */
.plan-marks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
.an-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.an-verdict { align-self: flex-start; margin-top: 6px; font-size: 14px; font-weight: 700; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 8px; }
.an-verdict.ok { background: var(--leaf); }
.an-verdict.no { background: #FFD9A8; }
/* Zugbewertung wie bei chess.com: weißer Stern auf Grün (bester Zug), ?? weiß auf Rot (Patzer) */
.an-verdict.best, .an-verdict.blunder, .an-verdict.missed, .an-verdict.genius, .an-verdict.risky { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; }
.an-verdict.risky { background: #FFE0C2; }
.an-mark.risky { background: #F07F1E; }
.an-verdict.best { background: #D6F5C9; }
.an-verdict.blunder { background: #FFD6CF; }
.an-verdict.missed { background: #FFEDB0; }
.an-verdict.genius { background: #CDEFEC; }
.an-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--ink); }
.an-mark svg { width: 100%; height: 100%; display: block; }
.an-mark.best { background: #5FB83D; }
.an-mark.blunder { background: #D8352A; }
.an-mark.missed { background: #E2A812; }
.an-mark.genius { background: #1EADA6; }
.an-badge { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; z-index: 5; pointer-events: none; transform: var(--pos); }
.an-badge .an-mark { position: absolute; right: -8%; top: -8%; width: 44%; height: 44%; box-shadow: 1px 1px 0 var(--ink); }
.an-head { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .04em; line-height: 1.1; margin-bottom: 4px; }
.an-odds { display: flex; flex-direction: column; gap: 6px; }
.an-odd { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.an-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-odd b { margin-left: auto; flex: none; white-space: nowrap;font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .03em; line-height: 1; font-variant-numeric: tabular-nums; }
.an-chip { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.an-chip.b { background: #3B3359; }
.an-odds small { font-size: 12px; color: var(--ink-soft); }
/* Spielstärke (Rang-Schätzung) unter der Gewinnchance */
.an-rank { display: flex; flex-direction: column; gap: 6px; }
.an-rank-box { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; padding: 6px 12px; }
.an-rank-box > :nth-child(2) { margin-left: auto; }
.an-rank-box b { flex: none; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .03em; line-height: 1; }
.an-rank-box small { font-size: 13px; color: var(--ink-soft); }
.an-tier { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.an-tier svg { width: 100%; height: 100%; }
.an-tier.glow { filter: drop-shadow(0 0 4px #FFD23F); }
.an-calc { font-size: 13px; color: var(--ink-soft); }
.an-calc::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: anDots 1.2s steps(1) infinite; }
@keyframes anDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) { .an-calc::after { animation: none; content: '…'; } }
.an-best { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; }
.an-best ol { margin: 2px 0 0; padding-left: 22px; font-weight: 700; }
.an-best li small { font-weight: 400; color: var(--ink-soft); }
.an-best .hint { margin: 2px 0 0; }
.modal .an-note { margin: 0; font-size: 12px; color: var(--ink-soft); }
.rp-info { display: flex; flex-direction: column; gap: 2px; }
.rp-step { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.rp-text { font-weight: 700; }
.rp-range { width: 100%; margin: 14px 0 8px; accent-color: var(--grape); cursor: pointer; }
.rp-controls { display: flex; justify-content: center; gap: 8px; }
.rp-controls .btn { padding: 7px 12px; }
.rp-controls svg { width: 20px; height: 20px; display: block; }
@media (max-width: 760px) {
  .an { grid-template-columns: minmax(0, 1fr); }
  .an-board { width: min(calc(100vw - 130px), 520px); }
}

/* ---------- Erfolge ---------- */
.ach-head { display: flex; align-items: center; gap: 18px; padding: 14px 20px; margin-bottom: 20px; }
.ach-count { font-family: var(--display); font-size: 38px; letter-spacing: .04em; line-height: 1; flex: none; }
.ach-head .progress { flex: 1; height: 22px; margin: 0; }
.ach-head .progress i, .progress.ach-progress i { background: linear-gradient(90deg, var(--sun), var(--sun-deep)); transition: width .4s; }
/* 4 Erfolge pro Zeile, auf schmaleren Bildschirmen 3, am Handy einer */
.ach-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .ach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ach-grid { grid-template-columns: 1fr; } .ach-head { flex-wrap: wrap; } .ach-head .progress { flex-basis: 100%; } }
.ach-tile {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: #E6E3EE; color: #6E6887; border: 3px solid #8E88A6; border-radius: 16px 9px 18px 10px;
  box-shadow: 4px 4px 0 rgba(27, 21, 48, .25);
}
.ach-icon {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  background: #F4F2F8; border: 3px solid #8E88A6; border-radius: 50%; filter: grayscale(1); opacity: .55;
}
.ach-icon svg { width: 46px; height: 46px; overflow: visible; }
.ach-body { min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.ach-name { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .04em; line-height: 1.05; }
.ach-desc { display: block; font-size: 14px; line-height: 1.3; margin-top: 2px; }
.ach-prog { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; background: #D5D1E0; border-radius: 8px; padding: 1px 7px; }
.ach-hint { font-style: italic; }
.ach-tile.done {
  color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); overflow: hidden;
  background: linear-gradient(135deg, #FFF4B8 0%, #FFD23F 45%, #F5B700 100%);
}
.ach-tile.done .ach-icon { filter: none; opacity: 1; background: #FFF8D9; border-color: var(--ink); }
/* Schuno-Meister noch nicht geschafft: die zarten gelben Strahlen wären grau kaum zu sehen, deshalb kräftiger */
.ach-tile:not(.done) .ach-master-rays { mask: url(#achMasterMaskLocked); }
.ach-tile:not(.done) .ach-master-rays polygon { fill: #4A4366; fill-opacity: .7; }
.ach-tile.done::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: achShine 4.5s ease-in-out infinite;
}
@keyframes achShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
/* Schwierigkeitsgrade (Ach.GRADES): Abzeichen im Popup, Überschriften der Erfolge-Seite, Aufschlüsselung im Profil */
.ach-grade {
  display: inline-block; font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .05em; line-height: 1;
  padding: 4px 10px 3px; color: #fff; text-shadow: 1.5px 1.5px 0 var(--ink); border: 2.5px solid var(--ink); border-radius: 10px 6px 11px 7px;
  box-shadow: 2px 2px 0 var(--ink); white-space: nowrap;
}
.ach-grade.g-easy { background: var(--leaf); }
.ach-grade.g-medium { background: var(--sky-deep); }
.ach-grade.g-hard { background: var(--sun); color: var(--ink); text-shadow: none; }
.ach-grade.g-veryhard { background: var(--pow); }
.ach-grade.g-impossible { background: var(--ink); color: var(--pow); text-shadow: none; }
.ach-tile.big .ach-grade { margin-bottom: 7px; }
.ach-section + .ach-section { margin-top: 30px; }
.ach-grade-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.ach-grade-title .ach-grade { font-size: 24px; padding: 6px 14px 5px; box-shadow: 3px 3px 0 var(--ink); }
.ach-grade-count { font-family: var(--display); font-size: 24px; letter-spacing: .04em; color: var(--ink); }
/* Profil: Leiste antippen klappt die Grade auf */
.ach-progress-btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ach-progress-btn:disabled { cursor: default; }
.ach-progress-btn .hint { display: block; }
.ach-progress-btn .progress { display: block; }
.ach-more { display: inline-block; margin-left: 6px; font-size: 12px; transition: transform .2s; }
.ach-progress-btn[aria-expanded="true"] .ach-more { transform: rotate(180deg); }
.ach-grade-list { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; }
.ach-grade-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 46px; align-items: center; gap: 10px; }
.ach-grade-list .ach-grade { font-size: 15px; text-align: center; }
.ach-grade-list .progress { height: 14px; margin: 0; }
.ach-grade-list .progress i { background: linear-gradient(90deg, var(--sun), var(--sun-deep)); }
.ach-grade-list b { text-align: right; font-size: 14px; }

/* ---------- Nachrichten (Kopfleiste, app.js renderNews) ---------- */
.modal-news { width: min(560px, 100%); }
/* space-between: in einer Zeile ganz rechts, umgebrochen (Handy) links unter dem Titel */
.news-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding-right: 44px; margin-bottom: 8px; }
.news-head h2 { margin: 0; }
.news-empty { margin: 6px 0 4px; font-weight: 700; color: var(--ink-soft); }
.news-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.news-row {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; cursor: pointer;
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; font: inherit; color: var(--ink-soft);
}
.news-row:hover { background: #fff; }
.news-row.unread { background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.news-row.unread .news-title { font-weight: 700; }
.news-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; border: 2px solid #B9B4C8; }
.news-row.unread .news-dot { background: var(--pow); border-color: var(--ink); }
.news-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.news-date { flex: none; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.news-kind {
  flex: none; font-family: var(--display); font-size: 13px; letter-spacing: .05em; line-height: 1; color: #fff; padding: 3px 7px 1px;
  -webkit-text-stroke: .5px var(--ink); text-shadow: 1px 1px 0 var(--ink); border: 2px solid var(--ink); border-radius: 6px; background: var(--sky-deep);
}
.news-kind.k-wartung { background: var(--pow); }
.news-kind.k-fix { background: var(--leaf); }
.news-kind.k-skins { background: var(--grape); }
.news-back { margin: 2px 0 12px; }
.news-mail { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 12px 16px 6px; }
.news-meta { display: flex; align-items: center; gap: 10px; }
.news-mail h3 { margin: 8px 0 6px; font-size: 21px; line-height: 1.2; }
.news-mail p { margin: 0 0 10px; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .news-row { flex-wrap: wrap; row-gap: 4px; }
  .news-title { flex-basis: calc(100% - 21px); }
  .news-title + * { margin-left: 21px; }
}

/* ---------- Sammlung (Cosmetics) ----------
   Kopf wie bei den Erfolgen: Gesamt mit Balken, darunter je Seltenheit ein Balken in ihrer Farbe (--rc).
   Darunter die Sets; Kacheln wie in der Bibliothek (tools/bibliothek.html), fehlende Teile grau mit „???“ */
/* Ganz oben: ungeöffnete Packs und Packchance. Kleines Pack wie in der Bibliothek, ohne Glanz; ohne Packs blass, Sammlung komplett grau */
.col-packs { display: flex; align-items: center; gap: 22px; padding: 14px 20px; margin-bottom: 16px; }
.col-pack { position: relative; flex: none; --cw: 58px; }
.col-pack .pk-pack { cursor: default; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .35)); }
.col-pack .pk-sheen { display: none; }
.col-pack .pk-logo { -webkit-text-stroke-width: 1px; text-shadow: 2px 2px 0 var(--ink); }
.col-pack .pk-label { border-width: 2px; padding: 1px 4px 0; box-shadow: 1px 1px 0 var(--ink); }
.col-pack .pk-foil::before, .col-pack .pk-foil::after { height: 5px; background-size: 6px 5px; }
.col-pack.none .pk-pack { opacity: .45; }
/* Mit Packs schwebt das Pack leicht auf und ab wie vor dem Öffnen (pkBob), aber ohne Kippen (Nutzer, 18.10.2026); grau und leer steht es still */
.col-pack:not(.none) .pk-pack { animation: colPackBob 2.4s ease-in-out infinite; }
@keyframes colPackBob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .col-pack .pk-pack { animation: none !important; } }
.col-pack-n {
  position: absolute; right: -14px; bottom: -8px; z-index: 6; font-family: var(--display); font-size: 22px; line-height: 1; color: #fff; background: var(--pow);
  border: 3px solid var(--ink); border-radius: 999px; padding: 3px 9px 1px; box-shadow: 2px 2px 0 var(--ink);
}
.col-pack.none .col-pack-n { background: #8A8599; }
.col-chance { flex: 1; min-width: 0; display: grid; gap: 8px; }
.col-chance-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.col-chance-top b { font-family: var(--display); font-size: 32px; font-weight: 400; letter-spacing: .04em; line-height: 1; }
.col-full { font-family: var(--display); font-size: 17px; letter-spacing: .05em; color: #fff; background: #8A8599; border: 2px solid var(--ink); border-radius: 7px; padding: 4px 9px 2px; }
.col-chance-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.col-chance-row span { font-weight: 700; }
.col-chance-row .progress { height: 18px; margin: 0; }
.col-chance-row .progress i { background: linear-gradient(90deg, #8A6BE8, #5B3FC0); }
.col-chance-row b { text-align: right; font-variant-numeric: tabular-nums; }
/* Kartenfragmente unter den Packs: links die Anzahl, rechts je Seltenheit Preis und „Freischalten“ (nur mit genug Fragmenten) */
.col-frags { display: flex; align-items: center; gap: 22px; padding: 14px 20px; margin-bottom: 16px; }
.col-frag-have { flex: none; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; }
.col-frag-have .frag-ico { grid-row: 1 / 3; width: 50px; height: 50px; }
.col-frag-have b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .03em; }
.col-frag-have span { font-weight: 700; font-size: 14px; color: var(--ink-soft); }
.col-frag-opts { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.col-frag-opt.chance { --rc: #5B3FC0; }   /* +5 % Packchance je Fragment, Farbe wie der Balken der Packchance */
.col-frag-opt { display: grid; justify-items: center; gap: 6px; padding: 10px 8px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--rc); }
.col-frag-opt .col-rar { font-size: 15px; }
.col-frag-cost { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 22px; line-height: 1; }
.col-frag-cost .frag-ico { width: 24px; height: 24px; }
.col-unlock-btn { width: 100%; }
/* Freischalten mit Fragmenten: ganzer Bildschirm wie beim Pack (Bühne und Karte aus cosmetics.css) */
.pk-full { position: fixed; inset: 0; z-index: 90; }
.pk-full .pk-stage { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; --cw: clamp(130px, 34vw, 190px); }
.pk-full .pk-collect { bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
.pk-full .pk-tip { bottom: 90px; }
.pk-full .pk-pack:not(.small) { --cw: clamp(150px, 40vw, 200px); }
/* Übersicht nach „Alle öffnen“: viele kleine Karten im Raster zum Scrollen, Fragmente zusammengezählt unter dem Titel */
.pk-over.many { justify-content: flex-start; padding-top: max(18px, env(safe-area-inset-top, 0px)); gap: 10px; bottom: 96px; }
.pk-over.many .pk-ofrag { --cw: 150px; max-width: none; }
.pk-over.many .pk-over-row {
  --cw: clamp(64px, 17vw, 100px); flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 14px 10px;
  width: min(100%, 980px); min-height: 0; overflow-y: auto; padding: 10px 12px 16px; overscroll-behavior: contain;
}
.pk-over.many .pk-ocard { animation-delay: 0s; }
.col-chance-top .col-open-all { align-self: center; margin-left: auto; }
.play-btn {
  font-family: var(--display); font-size: 17px; letter-spacing: .05em; background: var(--pow); color: #fff; cursor: pointer;
  border: 3px solid var(--ink); border-radius: 9px; padding: 5px 14px 2px; box-shadow: var(--shadow-sm);
}
.col-scene-play:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* Packchance bekommen: Quellen mit Summe über der Zahl; Start-Gutschrift mit aufklappbarer Aufschlüsselung */
.pk-gain-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; min-width: min(300px, 80vw); }
.pk-gain-list li { display: flex; justify-content: space-between; gap: 18px; font-family: var(--display); font-size: 20px; letter-spacing: .04em; color: #E8DEFF; text-shadow: 1px 1px 0 var(--ink); }
.pk-gain-list li b { font-weight: 400; color: #fff; }
.pk-gain-list li.sum { border-top: 2px solid rgba(255, 255, 255, .5); padding-top: 4px; color: #FFE27A; }
.pk-gain-list li.sum b { color: #FFE27A; }
/* Packchance im Ergebnisfenster: dunkler Kasten wie die Pack-Bühne, kleiner */
.rs-pack {
  display: grid; justify-items: center; gap: 4px; margin: 6px auto 12px; padding: 10px 16px 12px; max-width: 340px;
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm);
  background: radial-gradient(circle at 50% 45%, #3A2F6B 0, #1E1838 70%, #120E24 100%);
}
.rs-pack[hidden] { display: none; }
.rs-pk-title { font-family: var(--display); font-size: 17px; letter-spacing: .08em; color: #B9B4C8; }
.rs-pack .pk-gain-list { min-width: min(240px, 66vw); margin: 0 0 4px; }
.rs-pack .pk-gain-list li { font-size: 17px; }
.rs-pk-main { display: grid; justify-items: center; min-height: 64px; }
.rs-pack .pk-gain-num { font-size: 54px; text-shadow: 3px 3px 0 var(--ink); }
.rs-pack .pk-roll { gap: 6px; }
.rs-pack .pk-wheel-box { width: min(150px, 40vw); margin-top: 14px; }
.rs-pack .pk-hub { font-size: 17px; }
.rs-pack .pk-roll-res { min-height: 0; font-size: 30px; }
.rs-pack .pk-roll-res small { font-size: 14px; }
.pk-welcome { position: relative; z-index: 6; display: grid; justify-items: center; gap: 14px; padding: 0 16px 70px; text-align: center; max-height: 100%; overflow-y: auto; }
.pk-why { background: rgba(27, 21, 48, .55); border: 2px solid rgba(255, 255, 255, .35); border-radius: 12px; padding: 8px 14px; color: #fff; max-width: min(420px, 90vw); }
.pk-why summary { cursor: pointer; font-weight: 700; }
.pk-why .pk-gain-list { margin: 10px 0 2px; max-height: 40vh; overflow-y: auto; padding-right: 6px; }
.pk-why .pk-gain-list li { font-size: 16px; }
.pk-welcome-packs { display: flex; align-items: center; gap: 14px; }
.pk-welcome-packs .pk-pack.small { --cw: 70px; cursor: default; }
.pk-welcome-packs b { font-family: var(--display); font-weight: 400; font-size: 44px; color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.pk-welcome-text { margin: 0; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.pk-next { position: absolute; bottom: max(28px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 22; }
/* Gäste: Hinweis statt Packs, Ausrüstung und Fragmente */
.col-guest { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; margin-bottom: 16px; }
.col-guest p { margin: 0; font-weight: 700; font-size: 18px; }
/* Szene je Set (wie in der Bibliothek): Brett aus Sicht von Weiß, daneben Spielerleiste, Stapel und Ablage */
.col-scene {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px;
  background: var(--leaf) radial-gradient(circle, rgba(27, 21, 48, .14) 1.3px, transparent 1.5px) 0 0 / 10px 10px;
  border: 3px solid var(--ink); border-radius: 14px; padding: 12px;
}
.col-scene-board {
  position: relative; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 4px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.col-scene-board .sq { display: grid; place-items: center; min-width: 0; }
.col-scene-board .sq svg { width: 90%; height: 90%; }
.col-scene-board .boom { position: absolute; left: 50%; top: 50%; animation: none; opacity: 0; }
.col-scene-board .boom.play { opacity: 1; animation: boom 1.1s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.col-scene-side { display: grid; gap: 14px; align-content: start; }
.col-scene-side .pbar { background: var(--paper); }
.col-scene-side .play-btn { justify-self: start; }
.col-scene-note { margin: 0; font-size: 14px; color: #fff; font-weight: 700; text-shadow: 1px 1px 0 var(--ink); }
.col-scene-cards { display: flex; gap: 18px; align-items: flex-start; --cw: 80px; }
.col-scene-cards .deck { cursor: default; }
.col-set.folded .col-set-body { display: none; }
@media (max-width: 760px) { .col-scene { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .col-frags { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
  .col-frag-have .frag-ico { width: 40px; height: 40px; }
  .col-frag-have b { font-size: 28px; }
  .col-frag-opts { flex-basis: 100%; gap: 8px; }
  .col-frag-opt { padding: 8px 4px; box-shadow: 3px 3px 0 var(--rc); }
  .col-frag-opt .col-rar { font-size: 11px; padding: 4px 5px 2px; }
  .col-frag-cost { font-size: 18px; }
  .col-unlock-btn { font-size: 14px; padding: 7px 4px 5px; }
}
/* Ausrüstung: 6 Slots (am Handy 3 × 2). Leer = gestricheltes Plus, sonst kleine Vorschau des Teils mit Schatten in Seltenheitsfarbe.
   Dieselben Kacheln (.col-slot-view/.col-slot-info) im Auswahlmenü (.col-pick) */
.col-setup { padding: 14px 20px 18px; margin-bottom: 16px; }
.col-slots-title { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: .04em; line-height: 1; }
.col-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.col-slot, .col-pick {
  position: relative; display: grid; grid-template-rows: 104px auto; align-content: start; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--rc, var(--ink));
}
.col-slot:active, .col-pick:active { transform: translate(2px, 2px); }
.col-slot.empty { padding: 0; background: transparent; border: 3px dashed #8A8599; box-shadow: none; }   /* .empty hat sonst allgemein Innenabstand */
.col-slot.empty .col-slot-view { background: transparent; border-bottom: 3px dashed #8A8599; }
.col-plus { width: 46px; height: 46px; }
.col-slot-view { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--paper-2); border-bottom: 3px solid var(--ink); }
.col-slot-info { padding: 6px 9px 8px; display: grid; justify-items: start; gap: 1px; min-width: 0; text-align: left; }
.col-slot-info b { font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-slot-info span { font-size: 12px; color: var(--ink-soft); }
.col-slot-view .col-pieces { grid-template-columns: repeat(6, 18px); gap: 1px; }
.col-slot-view .col-pieces svg { width: 18px; height: 18px; }
.col-slot-view .col-board { width: 112px; border-width: 2px; }
.col-slot-view .card { --cw: 52px; }
.col-slot-view .col-frame { transform: scale(1.1); }
.col-slot-view .col-title { gap: 4px; }
.col-slot-view .col-title b, .col-slot-view .col-title .cos-title { font-size: 12px; }
.col-slot-view .col-boom { transform: scale(.55); }
.col-slot-view .boom { left: 50%; top: 50%; animation: none; }
.modal-equip { width: min(720px, 100%); }
.col-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-height: min(64vh, 560px); overflow-y: auto; padding: 4px 8px 8px 2px; }
.col-pick { --rc: #C9C5D4; }
/* Sortieren der Auswahl: höchste/niedrigste Seltenheit, A–Z */
.equip-sort { margin: 0 0 12px; }
.equip-sort button { font-size: 14px; line-height: 1.15; }
.equip-sort button[data-sort="az"] { flex: .55; }
/* Ausgerüstet: Häkchen statt farbigem Rand (Gold sah aus wie Legendär, Nutzer 19.10.2026) */
.col-pick.on::after {
  content: '✓'; position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; line-height: 1; color: #fff; background: var(--ink); border-radius: 50%;
}
.col-pick .col-rar-tag { font-size: 11px; top: 5px; right: 5px; padding: 2px 5px 1px; }
@media (max-width: 900px) { .col-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col-head { padding: 14px 20px 16px; margin-bottom: 20px; display: grid; gap: 12px; }
.col-total { display: flex; align-items: center; gap: 18px; }
.col-total .progress { flex: 1; height: 22px; margin: 0; }
.col-total .progress i { background: linear-gradient(90deg, var(--sun), var(--sun-deep)); transition: width .4s; }
.col-rarities { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.col-rarities li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.col-rar, .col-rar-tag {
  font-family: var(--display); letter-spacing: .05em; line-height: 1; text-align: center; color: #fff;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); background: var(--rc); border: 2px solid var(--ink); border-radius: 7px;
}
.col-rar { font-size: 17px; padding: 5px 8px 3px; }
.col-rarities .progress { height: 16px; margin: 0; }
.col-rarities .progress i { background: var(--rc); }
.col-rarities b { text-align: right; font-variant-numeric: tabular-nums; }
.col-sets { display: grid; gap: 18px; }
.col-sets-bar { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.col-set { padding: 16px 18px 18px; }
.col-set h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: .04em; line-height: 1; }
.col-set .col-set-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; }
/* Pfeil oben rechts zum Ein- und Aufklappen (zeigt nach unten = offen, nach rechts = zu) */
.col-fold {
  margin-left: auto; align-self: center; width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm);
}
.col-fold svg { width: 20px; height: 20px; transition: transform .2s; }
.col-fold:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.col-set.folded .col-fold svg { transform: rotate(-90deg); }
.col-set.folded .col-tiles { display: none; }
.col-set.folded .col-set-head { margin-bottom: 0; }
.col-set-count { font-family: var(--body, inherit); font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--ink-soft); }
.col-set.locked { padding: 12px 18px; background: #DCD9E4; border-color: #8A8599; box-shadow: 4px 4px 0 #8A8599; }
.col-set.locked h3 { color: #8A8599; font-size: 26px; }
.col-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.col-tile {
  position: relative; display: grid; grid-template-rows: 160px auto; background: #fff; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--rc);
}
.col-rar-tag { position: absolute; top: 8px; right: 8px; z-index: 3; font-size: 14px; padding: 3px 7px 1px; border-radius: 6px; }
.col-view { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--paper-2); border-bottom: 3px solid var(--ink); }
.col-view.click { cursor: pointer; }
.col-info { padding: 8px 12px 11px; display: grid; gap: 2px; }
.col-info b { font-size: 18px; line-height: 1.2; }
.col-info span { font-size: 14px; color: var(--ink-soft); }
.col-tile.missing { background: #EDEBF2; box-shadow: 5px 5px 0 #C9C5D4; }
.col-tile.missing .col-view { background: #DDD9E6; }
.col-tile.missing .col-info b { color: #8A8599; }
.col-q { font-family: var(--display); font-size: 64px; line-height: 1; color: #B9B4C8; }
.col-hint { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; color: var(--ink-soft); }
.col-pieces { display: grid; grid-template-columns: repeat(6, 32px); gap: 2px 4px; }
.col-pieces svg { width: 32px; height: 32px; display: block; }
.col-board { width: 200px; display: grid; grid-template-columns: repeat(8, 1fr); border: 3px solid var(--ink); border-radius: 7px; overflow: hidden; }
.col-board .sq { aspect-ratio: 1; display: grid; place-items: center; min-width: 0; }
.col-board .sq svg { width: 90%; height: 90%; }
.col-view .card { --cw: 86px; }
.col-frame { transform: scale(1.7); }
.col-title { display: grid; justify-items: center; gap: 6px; }
.col-title b { font-size: 18px; }
.col-title .cos-title { font-size: 18px; }
/* Schlageffekt steht still in der Kachel, Antippen spielt ihn einmal ab (app.js) */
.col-boom { position: absolute; inset: 0; }
.col-view .boom { left: 50%; top: 46%; animation: none; }
.col-view .boom.play { animation: boom 1.1s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@media (max-width: 900px) { .col-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .col-head { padding: 12px 14px 14px; }
  .col-packs { gap: 18px; padding: 12px 14px; }
  .col-setup { padding: 12px 14px 14px; }
  .col-slots-title { font-size: 24px; }
  .col-slots { gap: 8px; }
  .col-slot { grid-template-rows: 84px auto; box-shadow: 3px 3px 0 var(--rc, var(--ink)); }
  .col-slot .col-slot-view .col-pieces { grid-template-columns: repeat(6, 14px); }
  .col-slot .col-slot-view .col-pieces svg { width: 14px; height: 14px; }
  .col-slot .col-slot-view .col-board { width: 88px; }
  .col-slot .col-slot-view > * { margin-top: 0; }
  .col-slot .col-slot-view .card { --cw: 42px; }
  .col-slot .col-slot-view .col-frame { transform: scale(.9); }
  .col-slot .col-slot-view .col-boom { transform: scale(.42); }
  .col-slot .col-slot-view .col-title b, .col-slot .col-slot-view .col-title .cos-title { font-size: 10px; }
  .col-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .col-plus { width: 36px; height: 36px; }
  .col-pack { --cw: 46px; }
  .col-chance-top b { font-size: 26px; }
  .col-full { font-size: 14px; }
  .col-chance-row { grid-template-columns: minmax(0, 1fr) 56px; gap: 4px 8px; }
  .col-chance-row span { grid-column: 1 / -1; font-size: 14px; }
  .col-fold { width: 32px; height: 32px; }
  .col-total { flex-wrap: wrap; gap: 8px; }
  .col-total .progress { flex-basis: 100%; }
  .col-rarities li { grid-template-columns: 112px minmax(0, 1fr) 56px; gap: 8px; }
  .col-rar { font-size: 14px; }
  .col-set { padding: 12px 12px 14px; }
  .col-set h3 { font-size: 26px; }
  .col-tiles { gap: 10px; }
  .col-tile { grid-template-rows: 120px auto; box-shadow: 4px 4px 0 var(--rc); }
  .col-tile.missing { box-shadow: 4px 4px 0 #C9C5D4; }
  .col-rar-tag { font-size: 11px; top: 5px; right: 5px; padding: 2px 5px 1px; }
  .col-info { padding: 6px 8px 8px; }
  .col-info b { font-size: 15px; }
  .col-info span { font-size: 12px; }
  .col-pieces { grid-template-columns: repeat(6, 20px); gap: 2px; margin-top: 12px; }
  .col-pieces svg { width: 20px; height: 20px; }
  .col-board { width: 130px; margin-top: 14px; }
  .col-view .card { --cw: 60px; margin-top: 14px; }
  .col-frame { transform: scale(1.25); }
  .col-title b { font-size: 14px; }
  .col-title .cos-title { font-size: 14px; }
  .col-boom { transform: scale(.72); }
  .col-hint { font-size: 11px; bottom: 4px; }
}

/* Popup „Erfolg freigeschaltet“ */
.ach-pop-back {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px;
  background: rgba(27, 21, 48, .5); animation: fade .2s; cursor: pointer; overflow: hidden;
}
.ach-pop-back.out { animation: achOut .26s forwards; }
@keyframes achOut { to { opacity: 0; } }
.ach-pop { position: relative; width: min(440px, 100%); text-align: center; animation: achIn .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes achIn { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.ach-rays {
  /* mittig über transform wie die Animation rot (sie verschiebt um −50 %, mit zusätzlichem Rand wanderten die Strahlen weg) */
  position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 63, .55) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%);
  animation: rot 9s linear infinite;
}
.ach-pop-title {
  margin: 0 0 12px; font-family: var(--display); font-size: 36px; letter-spacing: .05em; line-height: 1;
  color: var(--sun); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg);
}
.ach-tile.big { text-align: left; padding: 18px 20px; box-shadow: 6px 6px 0 var(--ink); }
.ach-tile.big .ach-icon { width: 78px; height: 78px; animation: achIcon .9s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.ach-tile.big .ach-icon svg { width: 56px; height: 56px; }
.ach-tile.big .ach-name { font-size: 26px; }
@keyframes achIcon { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: none; } }
.ach-spark {
  position: absolute; font-size: 26px; line-height: 1; color: var(--sun); text-shadow: 2px 2px 0 var(--ink);
  animation: achSpark 1.2s ease-in-out infinite; pointer-events: none;
}
@keyframes achSpark { 0%, 100% { transform: scale(.4) rotate(0); opacity: .2; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
/* Rang auf- oder abgestiegen (nach gewerteten Partien, rankPopHTML in app.js) */
.rank-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 20px 16px;
  border: 3px solid var(--ink); border-radius: 16px 9px 18px 10px; box-shadow: 6px 6px 0 var(--ink);
  background: linear-gradient(135deg, #FFF4B8 0%, #FFD23F 45%, #F5B700 100%); overflow: hidden;
}
.rank-pop.up .rank-card::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: achShine 3s ease-in-out infinite;
}
.rank-change { display: flex; align-items: center; gap: 14px; }
.rank-ico { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); background: #FFF8D9; }
.rank-ico svg { position: relative; z-index: 1; width: 48px; height: 48px; }
.rank-old .rank-ico { width: 46px; height: 46px; opacity: .55; filter: grayscale(.6); }
.rank-old .rank-ico svg { width: 34px; height: 34px; }
.rank-new .rank-ico { width: 84px; height: 84px; animation: achIcon .9s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.rank-new .rank-ico svg { width: 64px; height: 64px; }
.rank-ico.glow { overflow: hidden; }
.rank-arrow { display: block; width: 30px; height: 30px; color: var(--leaf); animation: rankUp 1s ease-in-out infinite; }
.rank-arrow svg { display: block; width: 100%; height: 100%; }
.ach-pop-hint {
  position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; pointer-events: none;
  font-weight: 700; font-size: 15px; color: #fff; text-shadow: 1px 1px 0 var(--ink); opacity: 0; animation: achHint .4s 1.2s forwards;
}
@keyframes achHint { to { opacity: .85; } }
@keyframes rankUp { 50% { transform: translateY(-6px); } }
.rank-name { font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: .05em; line-height: 1; }
.rank-text { font-size: 16px; text-align: center; }
.rank-elo { font-family: var(--display); font-size: 20px; letter-spacing: .04em; background: var(--ink); color: #fff; border-radius: 8px; padding: 3px 10px 1px; }
/* Abstieg: gedämpfte Farben, grauer Schein, das neue Symbol sackt ab, der Pfeil zeigt nach unten */
.ach-pop-back.down { background: rgba(27, 21, 48, .62); }
.rank-pop.down .ach-pop-title { color: #B7C4E6; }
.rank-pop.down .rank-card { background: linear-gradient(135deg, #EEF1F8 0%, #C9D1E6 55%, #A9B4D2 100%); }
.rank-pop.down .rank-ico { background: #F1F3F9; }
.rank-pop.down .rank-new .rank-ico { animation: rankDrop 1.1s .25s cubic-bezier(.5, 0, .5, 1.4) both; }
@keyframes rankDrop { 0% { transform: translateY(-40px) rotate(-8deg); opacity: 0; } 60% { transform: translateY(6px) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.rank-pop.down .rank-arrow { color: var(--pow); animation-name: rankDown; }
@keyframes rankDown { 50% { transform: translateY(6px); } }
.rank-gloom {
  position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(170, 182, 214, .45) 0 22%, rgba(120, 132, 170, .18) 45%, transparent 65%);
  animation: rankGloom 2.4s ease-in-out infinite;
}
@keyframes rankGloom { 50% { opacity: .6; } }

/* „Meister-Marco?“: Name antippbar, kleines Profil vor der Enthüllung */
button.boss-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }   /* bewusst ohne Unterstreichung, soll geheim bleiben */
.pb-avatar.boss-link { cursor: pointer; }   /* auch das Profilbild öffnet das Profil */
.pb-avatar.god-ava { background: #FFF8D9; overflow: hidden; }   /* enthüllter Gustavsson: Bild des Erfolgs „Final Boss“ */
.pb-avatar.god-ava svg { width: 100%; height: 100%; }
/* Übergang zur Enthüllung: das Profil verschwimmt, wird etwas größer und blendet aus, während die Enthüllung einblendet */
.modal-back.boss-blur { animation: bossBackOut .9s ease-in forwards; }
.modal-back.boss-blur .modal { animation: bossBlurOut .9s ease-in forwards; }
@keyframes bossBackOut { to { opacity: 0; } }
@keyframes bossBlurOut { from { filter: blur(0); transform: none; } to { filter: blur(12px); transform: scale(1.08); opacity: 0; } }
.boss-profile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 4px; text-align: center; }
.boss-profile h2 { margin: 0; }
.boss-ava { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--ink); background: var(--sq-light); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.boss-ava svg { width: 70px; height: 70px; }
/* Final Boss: Enthüllung (bossReveal in app.js), ohne Antippen nach 5,5 s vorbei. Ablauf: Licht schwillt an (0,2 s),
   Strahlen und Goldstaub (0,4–0,6 s), König steigt auf (0,8–2,6 s), Flügel (1,8 s), Heiligenschein senkt sich (2,2 s),
   Name blendet golden ein (2,0–3,2 s, zusammen mit Flügeln und Heiligenschein, Wunsch des Nutzers 16.10.2026) und schwebt,
   Ausblenden ab 4,7 s. Hintergrund golden (16.10.2026, vorher dunkelviolett): goldbrauner Grund, große Strahlen über den ganzen
   Bildschirm (::before, dreht gegenläufig) und ein leuchtender Goldrahmen (::after) */
.boss-fx {
  position: fixed; inset: 0; z-index: 86; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #B07A1A 0%, #7A4F0C 30%, #4A2E05 62%, #1E1202 100%); animation: fade 1s ease-out;
}
.boss-fx::before {
  content: ''; position: absolute; left: 50%; top: 42%; z-index: 0; width: 260vmax; aspect-ratio: 1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .26) 0 5deg, rgba(255, 214, 90, 0) 5deg 10deg);
  -webkit-mask: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .55) 22%, transparent 48%); mask: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .55) 22%, transparent 48%);
  animation: rotBack 50s linear infinite, bossFadeIn 1.4s .3s both;
}
@keyframes rotBack { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.boss-fx::after {
  content: ''; position: absolute; inset: 12px; z-index: 0; pointer-events: none; border-radius: 22px;
  border: 5px double #FFD23F;
  box-shadow: 0 0 22px 4px rgba(255, 210, 63, .65), inset 0 0 26px 6px rgba(255, 210, 63, .45), inset 0 0 160px 40px rgba(255, 190, 40, .3);
  animation: bossFadeIn 1.2s .8s both;
}
.boss-fx > * { position: relative; z-index: 1; }
.boss-fx > .boss-dust { position: absolute; }
.boss-fx.out { animation: achOut .8s forwards; }
.boss-stage { position: relative; width: min(320px, 76vw); aspect-ratio: 1; }
.boss-god, .boss-god > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* großer warmer Schein hinter allem, wächst langsam und atmet */
.boss-bloom {
  position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 251, 230, .95) 0 8%, rgba(255, 226, 122, .7) 20%, rgba(255, 210, 63, .32) 38%, transparent 62%);
  transform: translate(-50%, -50%) scale(.1); opacity: 0;
  animation: bossBloom 2.2s .2s cubic-bezier(.2, .8, .3, 1) forwards, bossBreath 2.4s 2.4s ease-in-out infinite alternate;
}
@keyframes bossBloom { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes bossBreath { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }
.boss-rays {
  position: absolute; left: 50%; top: 50%; width: 230%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 80, .6) 0 8deg, transparent 8deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 60%); mask: radial-gradient(circle, #000 14%, transparent 60%);
  animation: rot 24s linear infinite, bossFadeIn 1.6s .6s both;
}
@keyframes bossFadeIn { from { opacity: 0; } }
/* Goldstaub steigt auf */
.boss-dust { position: absolute; inset: 0; pointer-events: none; }
.boss-dust i {
  position: absolute; bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFF4B8, #F5B700 70%); box-shadow: 0 0 6px 1px rgba(255, 210, 63, .8);
  animation: bossDust 3.2s ease-out infinite;
}
@keyframes bossDust { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-70vh); opacity: 0; } }
.boss-god { opacity: 0; animation: bossRise 1.8s .8s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes bossRise { from { opacity: 0; transform: translateY(30px) scale(.7); } to { opacity: 1; transform: none; } }
.boss-aura { transform-box: fill-box; transform-origin: center; animation: bossAura 2s 1.6s ease-in-out infinite alternate; }
@keyframes bossAura { to { transform: scale(1.12); opacity: .85; } }
/* goldener gestrichelter Ring hinter dem König, dreht sich langsam */
.boss-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bossRing 1s 1.4s ease-out forwards, rotSvg 14s linear infinite; }
@keyframes bossRing { from { opacity: 0; } to { opacity: .9; } }
@keyframes rotSvg { to { transform: rotate(360deg); } }
.boss-king { filter: drop-shadow(0 0 6px #FFF4B8) drop-shadow(0 0 14px rgba(255, 210, 63, .9)); }
.boss-god .boss-wing { transform-box: view-box; animation: bossUnfold 1s 1.8s cubic-bezier(.3, 1.3, .5, 1) both, bossFlap 1.8s 2.8s ease-in-out infinite alternate; }
.boss-wing.l { transform-origin: 80px 108px; --flap: -8deg; }
.boss-wing.r { transform-origin: 120px 108px; --flap: 8deg; }
@keyframes bossUnfold { from { transform: scale(0); } to { transform: none; } }
@keyframes bossFlap { from { transform: none; } to { transform: rotate(var(--flap)); } }
.boss-halo { opacity: 0; animation: bossHalo 1.2s 2.2s ease-out forwards, bossBob 2s 3.4s ease-in-out infinite alternate; }
@keyframes bossHalo { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes bossBob { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateY(-4px); } }
/* Glanz: heller Streifen läuft über die Figur */
.boss-shine {
  position: absolute; inset: 18% 22% 22%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 150% 0; animation: bossShine 2.4s 2.6s ease-in-out infinite;
}
@keyframes bossShine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -50% 0; } }
.boss-stage .ach-spark { animation-fill-mode: backwards; }
/* Name: erst „Meister-Marco?“ (silbern, ab 0,7 s), der bei 1,7 s zerstiebt; dann blendet „Göttlicher-Gustavsson“ golden
   schimmernd aus dem Licht ein (2,0 s, mit Flügeln und Heiligenschein) und schwebt danach leicht */
.boss-title {
  display: grid; margin: 0; font-family: var(--display); font-size: clamp(30px, 8vw, 50px); letter-spacing: .05em; line-height: 1.1; text-align: center;
  /* dunkler Schein statt goldenem: auf dem goldenen Hintergrund sonst kaum lesbar */
  filter: drop-shadow(3px 3px 0 var(--ink)) drop-shadow(0 0 10px rgba(30, 16, 0, .9));
  animation: bossFloat 2.2s 3.3s ease-in-out infinite alternate;
}
.boss-title span { grid-area: 1 / 1; justify-self: center; display: inline-block; opacity: 0; }
.boss-title .t-old {
  color: #E6E3EE; -webkit-text-stroke: 1.5px var(--ink);
  animation: bossOldIn .7s .7s ease-out forwards, bossOldOut .5s 1.7s ease-in forwards;
}
.boss-title .t-new {
  color: transparent; -webkit-text-stroke: 2px #2A1800;
  background: linear-gradient(100deg, #C98A00 0%, #FFD23F 30%, #FFF8D6 45%, #FFD23F 60%, #C98A00 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  animation: bossTitle 1.2s 2s ease-out forwards, bossGold 2.4s 2s linear infinite;
}
/* darunter „3333 Elo“ riesig in derselben goldenen Schrift, kurz nach dem Namen (2,7 s); gut fünfmal so groß wie vorher
   (22–32 px, Nutzer 24.10.2026), begrenzt durch Breite und Höhe des Bildschirms */
.boss-elo {
  margin: -6px 0 0; font-family: var(--display); font-size: clamp(56px, min(19vw, 22vh), 180px); letter-spacing: .06em; line-height: 1;
  white-space: nowrap; color: transparent; -webkit-text-stroke: clamp(2px, .03em, 5px) #2A1800; opacity: 0;
  background: linear-gradient(100deg, #C98A00 0%, #FFD23F 30%, #FFF8D6 45%, #FFD23F 60%, #C98A00 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(5px 5px 0 var(--ink)) drop-shadow(0 0 18px rgba(30, 16, 0, .9));
  animation: bossTitle 1s 2.7s ease-out forwards, bossGold 2.4s 2.7s linear infinite;
}
@keyframes bossOldIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bossOldOut { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: scale(1.35); filter: blur(8px); } }
@keyframes bossTitle { from { opacity: 0; letter-spacing: .3em; transform: scale(.92); } to { opacity: 1; letter-spacing: .05em; transform: none; } }
@keyframes bossFloat { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateY(-6px) rotate(-1deg); } }
@keyframes bossGold { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- Rangliste ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 14px; align-items: end; margin-bottom: 22px; }
.pod { text-align: center; }
.pod-name { font-weight: 700; font-size: 18px; margin: 6px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-elo { font-family: var(--display); font-size: 22px; letter-spacing: .04em; }
.pod-block {
  border: 4px solid var(--ink); border-radius: 10px 10px 0 0; box-shadow: var(--shadow);
  font-family: var(--display); font-size: 56px; color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink);
  display: grid; place-items: center;
}
/* Podest in Gold, Silber und Bronze (Wunsch des Nutzers, 15.10.2026), mit schrägem Glanzstreifen */
.pod-1 .pod-block { height: 150px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 38%, transparent 46%), linear-gradient(160deg, #FFE989, #F5C518 50%, #C99400); }
.pod-2 .pod-block { height: 110px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 38%, transparent 46%), linear-gradient(160deg, #F4F6F9, #C4CBD4 50%, #8F99A6); }
.pod-3 .pod-block { height: 84px; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 38%, transparent 46%), linear-gradient(160deg, #F2B987, #CD7F32 50%, #8E521D); }
.pod-avatar { width: 64px; height: 64px; margin: 0 auto; border: 3px solid var(--ink); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.pod-avatar svg { width: 54px; height: 54px; }
.lb { padding: 6px 0; overflow-x: auto; }
.lb table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 460px; }
.lb th { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .05em; text-align: left; padding: 8px 12px; border-bottom: 3px solid var(--ink); }
.lb td { padding: 8px 12px; border-bottom: 1px dashed rgba(27, 21, 48, .25); }
.lb td.num, .lb th.num { text-align: right; }
.lb tr.me td { background: #FFF3BF; font-weight: 700; }
.lb .pl { font-family: var(--display); font-size: 20px; }
.lb .who { display: flex; align-items: center; gap: 8px; }
.you-row { margin: 16px 0 0; padding: 12px 16px; font-weight: 700; }
.empty { padding: 30px 20px; text-align: center; font-weight: 700; }
.tiers { margin-top: 24px; padding: 16px 18px; }
.tiers h3 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .05em; margin: 0 0 10px; }
/* Rangliste: Verlauf der Nummer 1 (renderKingChart), Legende mit einer Farbe je Person */
.king-box { padding: 16px 18px 12px; margin-bottom: 22px; }
.king-box h3 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .05em; margin: 0 0 4px; }
/* Höchste Elo jemals rechts neben dem Titel; passt es nicht, rutscht es in die Zeile darunter (space-between: dann links) */
.king-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; margin-bottom: 4px; }
.king-head h3 { margin: 0; }
.king-best { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.king-best b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ec-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 14px; font-weight: 700; }
.ec-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ec-legend i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.tier-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tier-item { display: flex; align-items: center; gap: 6px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 10px 4px 4px; font-size: 14px; }
.tier-ico { position: relative; display: grid; place-items: center; flex: none; }
.tier-item svg { width: 28px; height: 28px; }
/* Schuno-Meister: halbtransparente Sonnenstrahlen und etwas Licht hinter dem König (wie die Startgrafik, nur zarter) */
.glow { position: relative; }
.glow > svg { position: relative; z-index: 1; }
.glow::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 210%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 236, 150, .95) 0 18%, rgba(255, 210, 63, .45) 38%, transparent 62%),
    repeating-conic-gradient(from 0deg, rgba(255, 210, 63, .6) 0 18deg, rgba(255, 226, 122, .08) 18deg 36deg);   /* 10 Strahlen */
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%); mask: radial-gradient(circle, #000 28%, transparent 70%);
  transform: translate(-50%, -50%); animation: rot 24s linear infinite;
}
.tier-ico.glow { margin-left: 4px; }
.tier-ico.glow::before { width: 190%; }
.pod-avatar.glow { overflow: hidden; box-shadow: var(--shadow-sm), 0 0 16px 3px rgba(255, 210, 63, .7); }
.pod-avatar.glow::before { width: 150%; }
.pb-avatar.glow, .bot-ava.glow { overflow: hidden; }   /* Meister-Marco: Schuno-Meister-Strahlen im Profilbild */
.pb-avatar.glow::before, .bot-ava.glow::before { width: 160%; }
/* Bot-Liste: auf dem cremefarbenen Grund gingen die zarten Strahlen unter, deshalb weiß, Lichtschein außen und kräftigere Strahlen */
.bot-ava.glow { background: #fff; box-shadow: 0 0 12px 2px rgba(255, 210, 63, .8); }
.bot-ava.glow svg { width: 33px; height: 33px; }
.bot-ava.glow::before {
  width: 175%;
  background:
    radial-gradient(circle, rgba(255, 236, 150, .95) 0 14%, rgba(255, 200, 40, .5) 34%, transparent 58%),
    repeating-conic-gradient(from 0deg, rgba(255, 185, 20, .9) 0 18deg, rgba(255, 226, 122, .05) 18deg 36deg);
  -webkit-mask: radial-gradient(circle, #000 34%, transparent 72%); mask: radial-gradient(circle, #000 34%, transparent 72%);
}
.tier-item b { display: block; line-height: 1.1; }

/* ---------- Tutorial ---------- */
/* Erklärtext auf dem Brett, oben (Standard) oder unten, damit die Felder des Schritts frei bleiben */
.coach {
  position: absolute; left: 50%; top: 12px; z-index: 20; width: min(440px, calc(100% - 20px));
  transform: translateX(-50%); padding: 12px 16px 10px;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 16px 10px 18px 12px; box-shadow: 6px 6px 0 var(--ink);
  animation: coachIn .25s cubic-bezier(.3, 1.4, .5, 1);
}
.coach.bottom { top: auto; bottom: 12px; }
@keyframes coachIn { from { opacity: 0; transform: translateX(-50%) scale(.9); } }
.coach-step { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.coach-title { display: block; font-family: var(--display); font-weight: 400; font-size: 25px; letter-spacing: .04em; line-height: 1.05; margin: 2px 0 4px; }
.coach-text { margin: 0; font-size: 15px; line-height: 1.35; }
.coach-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.coach-actions .btn { padding: 7px 14px 5px; font-size: 16px; }
.coach-keys { display: block; margin-top: 6px; text-align: right; font-size: 11px; color: var(--ink-soft); }
@media (hover: none) { .coach-keys { display: none; } }
/* Leiste rechts im Spiel */
.tut-bar { padding: 10px 12px 12px; box-shadow: var(--shadow-sm); background: #EFE9FF; }
.tut-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.tut-head b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .05em; color: var(--ink); }
.tut-bar .progress { height: 12px; margin: 6px 0 10px; }
.tut-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tut-actions .btn { flex: 1 1 auto; font-size: 15px; padding: 7px 8px 5px; box-shadow: 2px 2px 0 var(--ink); }

/* Rangliste sortieren: Elo oder Siege */
.rank-sort { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-weight: 700; }
.rank-sort .seg { width: 200px; }

/* ---------- Regeln ---------- */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.rule { padding: 18px 20px; }
.rule h3 { font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: .05em; margin: 0 0 8px; }
.rule p { margin: 0 0 10px; max-width: 60ch; }
.rule-wide { grid-column: 1 / -1; }
.rules-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 34px 0 16px; }
.rules-head .section-title { margin: 0; }
/* Regeln zu den Kartenpacks (Fenster) */
.pack-rules { text-align: left; max-width: 560px; }
.pack-rules h3 { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .05em; margin: 14px 0 4px; }
.pack-rules p { margin: 0 0 6px; }
.pack-rules .rar-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.pack-rules .rar-row span { font-weight: 700; font-size: 13px; color: #fff; background: var(--rc); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; text-shadow: 1px 1px 0 var(--ink); }
/* Ab 1001 px feste 4 Spalten: „Das Ziel“ und „Dein Zug“ je eine halbe Zeile, damit oben keine Lücke bleibt */
@media (min-width: 1001px) {
  .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rule-half { grid-column: span 2; }
}
.steps { margin: 0; padding-left: 22px; font-weight: 700; }
.steps li { margin-bottom: 6px; }
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.card-item { display: flex; gap: 12px; align-items: center; }
.card-item .card { --cw: 58px; flex: none; }
.card-item > div > b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .04em; }
.card-item p { margin: 0; font-size: 14px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1150px) {
  .game { grid-template-columns: 168px minmax(0, 1fr) 270px; gap: 16px; }
  .table { --cw: 124px; }
}
/* Kopfleiste zweizeilig (unter 1280 px): das Brett etwas kleiner, damit darunter noch Platz für Hinweise bleibt */
@media (max-width: 1280px) {
  .board-col { width: min(100%, calc(100vh - 340px), calc(100dvh - 340px)); }
}
@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; grid-template-areas: "board" "table" "side"; gap: 14px; }
  .board-col { width: 100%; max-width: 620px; }
  .side, .table { max-width: 620px; width: 100%; justify-self: center; }
  .table { flex-direction: row; justify-content: center; align-items: flex-start; gap: 64px; --cw: 116px; padding-bottom: 30px; }
  .bubble::before { left: 38px; top: -13px; transform: skewX(20deg) rotate(45deg); }
  .log { order: 5; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 260px; border-left: 0; border-top: 4px solid var(--ink); }
  .hero-cards { top: 57%; }   /* Platz für den Schriftzug „Tutorial“ */
  .hero-clip { border-radius: 0 0 14px 6px; }
  .hero-cards .card { --cw: 86px; left: -43px; top: -66px; }
  .hero-piece { width: 96px; height: 96px; }
  .hero-tut { font-size: 44px; }
  .hero-done { font-size: 34px; right: -10px; }
  .topbar { display: flex; gap: 8px 10px; padding: 8px 12px; flex-wrap: wrap; position: relative; top: 0; }
  .top-left { display: contents; }
  .nav { order: 3; width: 100%; justify-content: space-between; }
  .nav a { font-size: 18px; flex: 1; text-align: center; }
  .logo { font-size: 32px; }
  .pc-sub { display: none; }
  .profile-chip { padding-right: 10px; max-width: 160px; }
  .pc-name { max-width: 100px; }
}
@media (max-width: 520px) {
  .pc-text { display: none; }
  .profile-chip { padding: 3px; }
  .top-actions { gap: 6px; }
  #backToGame { font-size: 15px; padding: 7px 9px 5px; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 20px; height: 20px; }
  /* Online-Anzeige nur als Punkt, damit Nachrichten, Ton, Freunde und Profil neben das Logo passen */
  .online-pill { padding: 4px 7px; }
  #onlineText { display: none; }
  /* fünf Reiter (mit Sammlung) in einer Zeile */
  .nav { gap: 2px; }
  .nav a { font-size: 16px; padding: 6px 3px 4px; }
  .wrap { padding: 14px 16px 40px; }
  .hero-text { padding: 22px 18px 20px; }
  .hero-lead { font-size: 16px; }
  .table { --cw: 100px; gap: 52px; padding: 12px 10px 28px; }   /* Stapel und Ablage mit etwas Luft (vorher 26 px) */
  .slot-label { font-size: 19px; }
  .pbar { min-height: 50px; padding: 4px 8px; gap: 8px; }
  .pb-avatar { width: 36px; height: 36px; }
  .pb-avatar svg { width: 30px; height: 30px; }
  .clock { font-size: 22px; min-width: 66px; }
  .board { border-width: 4px; box-shadow: 5px 5px 0 var(--ink); }
  .invite-code { font-size: 42px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .podium { gap: 8px; }
  .pod-block { font-size: 40px; }
  .boom { transform-origin: center; }
  .boom span { font-size: 28px; }
  .boom.big span { font-size: 40px; }
  .result-title { font-size: 48px !important; }
}
@media (max-width: 370px) {
  .nav a { font-size: 14px; letter-spacing: .02em; padding: 6px 2px 4px; }
  .ach-count { font-size: 30px; }
  .ach-grade-title { flex-wrap: wrap; row-gap: 8px; }
  .ach-grade-title .ach-grade, .ach-grade-count { font-size: 20px; }
}

/* ---------- Große Bildschirme (z. B. WQHD im Vollbild) ----------
   Gilt erst ab 1700 × 1000 px, kleinere Auflösungen bleiben unverändert. Die Partie darf dann die ganze Breite nutzen,
   das Brett richtet sich nach der Höhe, Karten, Leisten und Schrift werden größer. Bewusst ohne CSS-zoom:
   Brett, Ziehen per Maus und die fliegenden Karten rechnen mit Bildschirmkoordinaten. */
@media (min-width: 1700px) and (min-height: 1000px) {
  .topbar { padding: 12px 28px; }
  .logo { font-size: 46px; }
  .nav a { font-size: 24px; padding: 7px 13px 5px; }
  .top-actions { gap: 12px; }
  .icon-btn { width: 50px; height: 50px; }
  .icon-btn svg { width: 26px; height: 26px; }
  .online-pill { font-size: 16px; padding: 6px 14px; }
  .pc-avatar { width: 40px; height: 40px; }
  .pc-avatar svg { width: 33px; height: 33px; }
  .pc-name { font-size: 17px; }
  .pc-sub { font-size: 13px; }

  /* so breit, dass die mittlere Spalte genau das Brett aufnimmt: Brett (100vh − 370, Platz für Spielhinweise unter der Leiste) + Spalten 630 + Abstände 56 + Rand 56 */
  body[data-screen="game"] .wrap { max-width: calc(100vh + 372px); padding: 24px 28px 30px; }
  .game { grid-template-columns: 250px minmax(0, 1fr) 380px; gap: 28px; }
  .board-col { width: min(100%, calc(100vh - 370px), calc(100dvh - 370px)); gap: 12px; }
  .table { --cw: clamp(104px, calc((100vh - 370px) / 3.1), 200px); gap: 36px; }
  .slot-label { font-size: 26px; }
  .deck-count { font-size: 16px; }
  .coord { font-size: 14px; }
  .pc .pts { font-size: 14px; }
  .check-tag span { font-size: 21px; }
  .cm-badge b { font-size: 18px; }

  .pbar { min-height: 72px; padding: 8px 14px; gap: 12px; }
  .pb-avatar { width: 52px; height: 52px; }
  .pb-avatar svg { width: 44px; height: 44px; }
  .pb-name { font-size: 21px; }
  .pb-sub { font-size: 15px; }
  .pb-caps svg { width: 22px; height: 22px; }
  .tier-badge { font-size: 15px; }
  .tier-badge svg { width: 19px; height: 19px; }
  .pb-tier { font-size: 17px; }
  .clock { font-size: 36px; min-width: 110px; padding: 5px 12px 2px; }
  .pbar.active::after { font-size: 18px; top: -15px; }
  .emote-bubble { font-size: 24px; }

  .side { gap: 18px; }
  .bubble { font-size: 18px; padding: 14px 18px; }
  .bubble .big { font-size: 27px; }
  .actions { gap: 12px; }
  .actions .btn { font-size: 25px; padding: 13px 18px 11px; }
  #endTurnBtn small, #chargeBtn small { font-size: 14px; }
  .cost-chip { font-size: 20px; }
  .cost-chip svg { width: 30px; height: 30px; }
  .points-num { font-size: 52px; }
  .points-head span { font-size: 18px; }
  .coin { width: 26px; height: 26px; }
  .pk-ico { width: 64px; height: 64px; }
  .pk-ico svg { width: 56px; height: 56px; }
  .pk-name { font-size: 25px; }
  .pk-sub { font-size: 16px; }
  .pk-actions .btn { font-size: 20px; }
  .emotes button { font-size: 18px; padding: 6px 10px 4px; }
  .chat-log { font-size: 16px; max-height: 260px; }
  .chat-form input { font-size: 17px; }
  .log summary { font-size: 22px; }
  .log ol { font-size: 16px; max-height: 300px; }
  .toast.at-board { font-size: 18px; }
  .coach { width: min(540px, calc(100% - 20px)); }
  .coach-title { font-size: 30px; }
  .coach-text { font-size: 18px; }
  .tut-head b { font-size: 26px; }
  .boom { width: 230px; height: 145px; margin: -72px 0 0 -115px; }
  .boom span { font-size: 42px; }
  .boom.big { width: 380px; height: 215px; margin: -107px 0 0 -190px; }
  .boom.big span { font-size: 64px; }

  .modal.modal-analysis { width: min(1240px, 100%); }

  /* Suche und Einladung: größeres Feld, der Hinweis passt in zwei Zeilen */
  .wait { max-width: 860px; padding: 40px 40px 36px; gap: 16px; margin-top: 56px; }
  .spinner-card { --cw: 96px; }
  .wait-title { font-size: 54px; }
  .wait-sub { font-size: 19px; max-width: none; }
  .wait-sub.small { font-size: 16px; }
  .wait-time { font-size: 44px; }
  .wait .btn { font-size: 25px; padding: 13px 22px 11px; }
  .invite-code { font-size: 72px; }
  .invite-row input { font-size: 17px; }

  /* Erfolge und Regeln: breiter bis näher an den Rand, Schrift und Symbole größer (Rangliste bleibt schmal) */
  body[data-screen="achievements"] .wrap, body[data-screen="rules"] .wrap { max-width: 2000px; padding-left: 28px; padding-right: 28px; }
  .section-title { font-size: 52px; }
  .section-sub { font-size: 18px; }
  .ach-head { padding: 18px 26px; }
  .ach-count { font-size: 46px; }
  .ach-head .progress { height: 26px; }
  .ach-grid { gap: 20px; }
  .ach-tile { padding: 18px 20px; gap: 18px; }
  .ach-icon { width: 78px; height: 78px; }
  .ach-icon svg { width: 56px; height: 56px; }
  .ach-name { font-size: 27px; }
  .ach-desc { font-size: 17px; }
  .ach-prog { font-size: 14px; }
  .rules { gap: 22px; }
  .rule { padding: 22px 26px; }
  .rule h3 { font-size: 34px; }
  .rule p, .steps { font-size: 18px; }
  .rule p { max-width: 90ch; }
  .cost-table .cost-chip { font-size: 24px; }
  .cost-table .cost-chip svg { width: 44px; height: 44px; }
  .cost-table small { font-size: 14px; }
  .card-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; }
  .card-item .card { --cw: 72px; }
  .card-item > div > b { font-size: 24px; }
  .card-item p { font-size: 16px; }
  .an-board { width: min(calc(100vh - 330px), calc(100dvh - 330px), 780px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Regeln „Kartenpacks“: kein „Schließen“ unten, dafür ein etwas größeres rotes X (Nutzer, 19.10.2026) */
.modal-packrules .modal-x { width: 42px; height: 42px; font-size: 21px; background: var(--pow); color: #fff; }
/* Lauftext für zu lange Namen in den Ausrüstungs-Kacheln (slotMarquee) */
.col-slot-info b { max-width: 100%; }
.col-slot-info b.marq { text-overflow: clip; }
.col-slot-info .marq-t { display: inline-block; will-change: transform; }