/* Fetzerei um Wien – Bildschirme. Pixelschrift nur in 16/32/48/64 px (1 Font-Pixel = 1/16 em). */
body { font-size: 32px; line-height: 1.25; min-height: 100dvh; overflow-x: hidden; }
#app { min-height: 100dvh; }
button { font: inherit; color: inherit; }
h2, h3 { font-family: 'CW Dick', monospace; font-weight: normal; margin: 0; }
h2 { font-size: 32px; color: var(--gold); }
h3 { font-size: 32px; color: var(--papier); margin-bottom: 12px; }
p { margin: 0 0 12px; }
b { font-family: 'CW Dick', monospace; font-weight: normal; color: var(--gold); }
.leise { color: var(--text-leise); }
.laden { display: grid; place-items: center; min-height: 100dvh; color: var(--text-leise); padding: 16px; text-align: center; }
:focus-visible { outline: 4px solid var(--gold-hell); outline-offset: 3px; }
input::placeholder { color: #9c8b6a; }

/* ---------- Knöpfe: Pixel-Rahmen mit ausgesparten Ecken, harter Pixelschatten ---------- */
.knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--papier);
  color: var(--tinte);
  border: 4px solid transparent; border-image: var(--rahmen-tinte) 2 / 4px stretch; background-clip: padding-box;
  padding: 8px 20px 12px;
  min-height: 56px;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 -6px 0 var(--papier-2), inset 0 4px 0 #fff7df;
  filter: drop-shadow(0 4px 0 var(--schatten));
  transition: transform .08s steps(2), filter .08s steps(2);
}
.knopf:hover:not(:disabled) { transform: translateY(-2px); filter: drop-shadow(0 6px 0 var(--schatten)); }
.knopf:active:not(:disabled) { transform: translateY(2px); filter: drop-shadow(0 2px 0 var(--schatten)); box-shadow: inset 0 -2px 0 var(--papier-2); }
.knopf.haupt { background: var(--gold); box-shadow: inset 0 -6px 0 var(--gold-2), inset 0 4px 0 var(--gold-hell); }
.knopf.haupt:active:not(:disabled) { box-shadow: inset 0 -2px 0 var(--gold-2); }
.knopf:disabled { opacity: .5; cursor: default; filter: none; }
.knopf.klein { min-height: 48px; padding: 4px 14px 8px; }
.knopf.breit { width: 100%; }
.knopf .bald { font-size: 16px; background: var(--tinte); color: var(--papier); padding: 2px 6px 4px; }
.link { background: none; border: 0; padding: 4px 0; color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; }
.link:hover { color: var(--gold-hell); }
.reihe-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; align-items: center; }

/* ---------- Seitenrahmen ---------- */
.seite { max-width: 960px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.kopf { display: flex; align-items: center; gap: 14px; padding: 8px 0 20px; }
.zurueck, .menueknopf {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center; cursor: pointer; color: var(--papier);
  background: var(--tisch-2); border: 4px solid transparent; border-image: var(--rahmen-gold2) 2 / 4px stretch; background-clip: padding-box;
  box-shadow: inset 0 3px 0 var(--tisch-3); padding: 0;
}
.zurueck:hover, .menueknopf:hover { background: var(--tisch-3); color: var(--gold-hell); }
.abschnitt { padding: 20px 0; border-top: 4px dashed #2e4638; }
.abschnitt:first-child { border-top: 0; padding-top: 4px; }

/* ---------- Start ---------- */
.start { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: max(16px, env(safe-area-inset-top)); text-align: center; }
.logo { font-family: 'CW Logo', 'CW Dick', monospace; font-weight: normal; font-size: 64px; line-height: .95; margin: 8px 0 6px; color: var(--gold);
  display: flex; flex-direction: column; align-items: center;
  text-shadow: 4px 0 0 var(--tinte), -4px 0 0 var(--tinte), 0 4px 0 var(--tinte), 0 -4px 0 var(--tinte),
    4px 4px 0 var(--tinte), -4px 4px 0 var(--tinte), 4px -4px 0 var(--tinte), -4px -4px 0 var(--tinte), 0 10px 0 var(--schatten); }
.logo-zeile + .logo-zeile { color: var(--papier); letter-spacing: 6px; }
.unterzeile { color: var(--papier); margin: 0; }
.buehne { position: relative; width: min(100%, 720px); display: grid; justify-items: center; }
.skyline { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; justify-content: center; opacity: .95; }
.skyline canvas { width: min(100%, 720px); height: auto; }
.faecher { position: relative; height: calc(var(--kh) + 52px); width: 100%; --k: 2; display: flex; justify-content: center; }
.faecher .karte { position: absolute; top: 18px; left: 50%; margin-left: calc(var(--kb) / -2);
  transform: translateX(calc(var(--i) * 46%)) rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * 5px)); transform-origin: 50% 120%;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); }
.menue { display: grid; gap: 14px; width: min(100%, 440px); }
.menue-klein { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menue-klein .knopf { min-height: 56px; padding: 6px 10px 10px; }
.fuss { font-size: 16px; color: var(--text-leise); padding-bottom: 8px; }
.fuss a { color: var(--text-leise); }
@media (max-width: 420px) { .faecher { --k: 1.5; } .logo { font-size: 48px; } }

/* ---------- Setup ---------- */
.setup { padding-bottom: 120px; }
.segment { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.seg, .chip {
  background: var(--tisch-2); color: var(--papier); cursor: pointer; min-height: 48px; padding: 4px 14px 8px;
  border: 4px solid transparent; border-image: var(--rahmen-gruen) 2 / 4px stretch; background-clip: padding-box;
  box-shadow: inset 0 3px 0 var(--tisch-3);
}
.seg:hover, .chip:hover:not(:disabled) { background: var(--tisch-3); }
.seg[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--gold); color: var(--tinte); border-image-source: var(--rahmen-tinte);
  box-shadow: inset 0 -4px 0 var(--gold-2), inset 0 3px 0 var(--gold-hell); }
.chip:disabled { opacity: .4; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.deck { display: flex; flex-wrap: wrap; gap: 8px; --k: 1; }
@media (min-width: 600px) { .deck { --k: 1.5; } }
.unten-fix { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); z-index: 5;
  background: linear-gradient(rgba(24, 38, 31, 0), var(--tisch) 35%); display: flex; gap: 14px; align-items: center; justify-content: center; }
.unten-fix .knopf.breit { max-width: 440px; }

/* ---------- Kartei ---------- */
.filterleiste { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 20px; }
.filter { display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--text-leise); }
.filter select { font: inherit; font-size: 32px; background: var(--tisch-2); color: var(--papier); min-height: 48px; padding: 0 8px 4px; cursor: pointer;
  border: 4px solid transparent; border-image: var(--rahmen-gruen) 2 / 4px stretch; background-clip: padding-box; }
.filterleiste .zahl { font-size: 16px; color: var(--text-leise); margin-left: auto; padding-bottom: 8px; }
.gitter { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, var(--kb)); justify-content: center; --k: 1.5; }
@media (min-width: 700px) { .gitter { --k: 2; } }
.kachel { background: none; border: 0; padding: 0; cursor: pointer; position: relative; transition: transform .1s steps(2); }
.kachel:hover:not(:disabled) { transform: translateY(-4px); }
.kachel[aria-pressed="true"]::after { content: ''; position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M9 3h1v1h-1zM8 4h1v1h-1zM7 5h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1zM4 6h1v1h-1zM3 5h1v1h-1zM2 4h1v1h-1z M9 4h1v1h-1zM8 5h1v1h-1zM7 6h1v1h-1zM6 7h1v1h-1zM5 8h1v1h-1zM4 7h1v1h-1zM3 6h1v1h-1z' fill='%232a1a12'/%3E%3C/svg%3E");
  background-size: 24px 24px; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 0 4px var(--tinte); }
.kachel[aria-pressed="false"] .karte { filter: saturate(.75) brightness(.9); }

/* ---------- Blätter (Dialoge) ---------- */
.blatt { position: fixed; inset: 0; z-index: 20; background: rgba(6, 11, 8, .8); display: grid; place-items: center; padding: 16px; }
.blatt-inhalt { position: relative; background: var(--tisch-2); padding: 26px; width: min(100%, 720px); max-height: calc(100dvh - 32px); overflow: auto;
  border: 4px solid transparent; border-image: var(--rahmen-gold) 2 / 4px stretch; background-clip: padding-box;
  box-shadow: inset 0 0 0 4px var(--tisch-2), inset 0 0 0 6px var(--gold-2);
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .6)); }
.blatt.voll { padding: 0; }
.blatt.voll .blatt-inhalt { width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 16px 16px 120px; filter: none; }
.detail { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.detail .gross { --k: 4; }
@media (max-width: 500px) { .detail .gross { --k: 3; } }
.detail .info { flex: 1 1 240px; }
.spruch { color: var(--papier); }

/* ---------- Popover ---------- */
.popover { position: fixed; z-index: 30; max-width: min(460px, calc(100vw - 32px)); background: var(--papier); color: var(--tinte); padding: 14px 18px 16px;
  border: 4px solid transparent; border-image: var(--rahmen-tinte) 2 / 4px stretch; background-clip: padding-box;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); }
.popover b { color: var(--rot-dunkel); }
.popover p { margin: 0 0 8px; }
.popover p:last-child { margin: 0; }
.erklaerung p { margin-bottom: 10px; }
.menueliste { display: grid; gap: 10px; }

/* ---------- Regeln ---------- */
.elementliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.elementliste div { display: flex; gap: 12px; align-items: center; }
canvas.elsym { image-rendering: pixelated; }

/* ---------- Spiel ---------- */
#app[data-seite="spiel"] { height: 100dvh; overflow: hidden; }
.seite.spiel { max-width: none; height: 100dvh; padding: env(safe-area-inset-top) 8px env(safe-area-inset-bottom); display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.spielkopf { height: 60px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 4px; border-bottom: 2px solid rgba(58, 85, 70, .6); }
.menueknopf { width: 48px; height: 48px; }
.stand { font-family: 'CW Dick', monospace; display: flex; align-items: center; gap: 6px; }
.stand .dp { color: var(--text-leise); }
.pkt { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px 4px; color: #fff8e8;
  border: 4px solid transparent; border-image: var(--rahmen-tinte) 2 / 4px stretch; background-clip: padding-box; }
.pkt.p0 { background: var(--blau); box-shadow: inset 0 3px 0 #7fb0e6, inset 0 -4px 0 var(--blau-dunkel); }
.pkt.p1 { background: var(--rot); box-shadow: inset 0 3px 0 #ee8a8f, inset 0 -4px 0 var(--rot-dunkel); }
.zugtext { font-size: 16px; color: var(--text-leise); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zugtext.z0 { color: #9cc3ef; }
.zugtext.z1 { color: #f2a3a7; }
.minichip { font-size: 16px; background: var(--tisch-2); padding: 4px 10px 6px; white-space: nowrap; cursor: pointer; color: var(--papier);
  border: 4px solid transparent; border-image: var(--rahmen-gruen) 2 / 4px stretch; background-clip: padding-box; }
.minichip:hover { background: var(--tisch-3); }
.regelknopf { display: inline-flex; gap: 8px; align-items: center; flex: none; }
.regelknopf .anzahl { background: var(--gold); color: var(--tinte); padding: 0 5px 2px; }
.regelknopf .gw { color: var(--gold); }

.tisch { flex: 1; min-height: 0; position: relative; display: grid; justify-content: center; align-content: center; justify-items: center; gap: 8px; }
.hoch .tisch { grid-template-rows: auto auto auto; }
.quer .tisch { grid-template-columns: auto auto auto; align-items: center; gap: calc(14px * var(--k)); }
.quer .handbereich.unten { order: 0; }
.quer .brett { order: 1; }
.quer .handbereich.oben { order: 2; }
.handbereich { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.quer .handbereich.unten { flex-direction: column-reverse; }
.handschild { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 16px; color: var(--text-leise); padding: 0 8px; }
.handschild .ico { visibility: hidden; color: var(--gold); }
.handbereich.amzug .handschild { color: var(--gold-hell); }
.handbereich.amzug .handschild .ico { visibility: visible; animation: zeiger 1s steps(2) infinite; }
@keyframes zeiger { 50% { transform: translateX(3px); } }

/* Spielbrett: Holzrahmen mit Maserung und Messingnieten */
.brett { position: relative; display: grid; grid-template-columns: repeat(3, calc(58px * var(--k))); gap: calc(3px * var(--k)); padding: calc(5px * var(--k));
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(5px * var(--k)), rgba(0, 0, 0, .18) calc(5px * var(--k)) calc(6px * var(--k)), transparent calc(6px * var(--k)) calc(11px * var(--k)), rgba(255, 220, 160, .06) calc(11px * var(--k)) calc(12px * var(--k))),
    var(--holz);
  box-shadow: inset 0 0 0 calc(1px * var(--k)) var(--holz-hell), inset 0 0 0 calc(2px * var(--k)) var(--holz-dunkel), 0 calc(4px * var(--k)) 0 var(--schatten); }
.brett::before { content: ''; position: absolute; left: calc(1.5px * var(--k)); top: calc(1.5px * var(--k)); width: calc(2px * var(--k)); height: calc(2px * var(--k));
  background: var(--messing); pointer-events: none;
  box-shadow: calc(185px * var(--k)) 0 0 var(--messing), 0 calc(227px * var(--k)) 0 var(--messing), calc(185px * var(--k)) calc(227px * var(--k)) 0 var(--messing); }
.feld { width: calc(58px * var(--k)); height: calc(72px * var(--k)); border: 0; padding: 0; position: relative; display: grid; place-items: center; cursor: default; perspective: 600px;
  background-color: #23160e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM4 4h1v1h-1z' fill='%23c99a3b' fill-opacity='.14'/%3E%3C/svg%3E");
  background-size: calc(8px * var(--k)) calc(8px * var(--k));
  box-shadow: inset 0 calc(1px * var(--k)) 0 #120b06, inset 0 0 0 calc(1px * var(--k)) #1a110a; }
.feld .karte { position: absolute; inset: 0; width: 100%; height: 100%; filter: none; }
.feld canvas.elsym { width: calc(21px * var(--k)); height: calc(21px * var(--k)); opacity: .55; }
.brett.waehlbar .feld.leer { cursor: pointer; box-shadow: inset 0 0 0 calc(1px * var(--k)) var(--gold-2); }
.brett.waehlbar .feld.leer:hover, .feld.ziel { box-shadow: inset 0 0 0 calc(2px * var(--k)) var(--gold) !important; background-color: #35210f; }
.feld.treffer::after { content: ''; position: absolute; inset: calc(-2px * var(--k)); box-shadow: 0 0 0 calc(2px * var(--k)) var(--gold-hell); animation: blink .2s steps(2) 3; }
@keyframes blink { 50% { opacity: 0; } }
.bonus { position: absolute; right: 0; bottom: 0; font-family: 'CW Dick', monospace; font-size: calc(16px * var(--kint)); line-height: 1;
  padding: 2px 4px 4px; background: var(--tinte); z-index: 2; }
.bonus.plus { color: #ffe28a; }
.bonus.minus { color: #ffb4b4; }

.hand { display: flex; align-items: flex-end; justify-content: center; min-height: calc(72px * var(--kh)); }
.hand .handkarte { background: none; border: 0; padding: 0; cursor: pointer; flex: none; transition: transform .12s steps(3); position: relative; }
.hand .handkarte:disabled { cursor: default; }
.hand .karte { width: calc(58px * var(--kh)); height: calc(72px * var(--kh)); }
.hoch .hand.h0 .handkarte + .handkarte { margin-left: 4px; }
.hoch .hand.h1 { min-height: calc(72px * var(--ko)); }
.hoch .hand.h1 .karte { width: calc(58px * var(--ko)); height: calc(72px * var(--ko)); }
.hoch .hand.h1 .handkarte + .handkarte { margin-left: 4px; }
.hoch .hand.h0 .handkarte[aria-pressed="true"] { transform: translateY(calc(-8px * var(--kh))); }
.hoch .hand.h1 .handkarte[aria-pressed="true"] { transform: translateY(calc(8px * var(--ko))); }
.quer .hand { flex-direction: column; align-items: center; justify-content: center; }
.quer .hand .handkarte + .handkarte { margin-top: 6px; }
.quer .hand.h0 .handkarte[aria-pressed="true"] { transform: translateX(calc(10px * var(--kh))); }
.quer .hand.h1 .handkarte[aria-pressed="true"] { transform: translateX(calc(-10px * var(--kh))); }
.hand .handkarte:not(:disabled):hover { transform: translateY(calc(-3px * var(--kh))); }
.quer .hand .handkarte:not(:disabled):hover { transform: translateX(calc(4px * var(--kh))); }
.hand .handkarte[aria-pressed="true"] .karte { outline: calc(1px * var(--kh)) solid var(--gold-hell); outline-offset: 2px; }
.hand .handkarte.weg { opacity: .25; }
/* Ziehen aufs Brett: bei Touch darf der Browser die Geste nicht fürs Scrollen nehmen */
.hand .handkarte:not(:disabled) { touch-action: none; cursor: grab; }
body.zieht, body.zieht * { cursor: grabbing !important; }
.karte.geist { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; height: auto; opacity: .95; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .35)); }

/* Ansage auf einer Tafel */
.ansage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 10;
  font-family: 'CW Logo', 'CW Dick', monospace; font-size: 48px; line-height: 1; color: var(--papier); white-space: nowrap;
  background: var(--tinte); padding: 14px 26px 18px;
  border: 4px solid transparent; border-image: var(--rahmen-gold) 2 / 4px stretch; background-clip: padding-box;
  box-shadow: inset 0 0 0 4px var(--tinte), inset 0 0 0 6px var(--gold-2);
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .5));
  transition: transform .15s steps(3), opacity .1s; }
.ansage:empty { display: none; }
.ansage.zeigen { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ansage.gold { color: var(--gold-hell); }
.ansage.gross { font-size: 64px; color: var(--gold-hell); }
@media (max-width: 420px) { .ansage { font-size: 32px; padding: 10px 18px 14px; } .ansage.gross { font-size: 48px; } }

.ergebnis .blatt-inhalt { text-align: center; }
.ergebnis h2 { font-size: 64px; line-height: 1; font-family: 'CW Logo', 'CW Dick', monospace; text-align: center; margin: 4px 0 14px; color: var(--gold-hell);
  text-shadow: 4px 0 0 var(--tinte), -4px 0 0 var(--tinte), 0 4px 0 var(--tinte), 0 -4px 0 var(--tinte), 0 8px 0 var(--schatten); }
.ergebnis .endstand { display: flex; justify-content: center; align-items: center; gap: 10px; font-family: 'CW Dick', monospace; }
.ergebnis .leise { text-align: center; }
.ergebnis .deck { justify-content: center; --k: 1.5; margin-bottom: 12px; }
.beute h3 { text-align: center; }
.ergebnis .reihe-knoepfe { justify-content: center; }
.konfetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.konfetti span { position: absolute; top: -12px; animation: fallen 2s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fallen {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx), 110vh) rotate(var(--dr)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ansage, .hand .handkarte, .knopf, .kachel { transition: none; }
  .handbereich.amzug .handschild .ico { animation: none; }
}