/* Wizza-Jass v1.5 – Stammtisch: Nussbaumholz, Filz, Schiefertafel, Kreide */
:root {
  --holz: #3b2618; --holz-hell: #5a3a22; --filz: #2f5d46; --filz-dunkel: #254a38;
  --schiefer: #27302f; --kreide: #f2eee3; --papier: #f8f1e0; --tinte: #2a1d12; --rot: #b3122b; --gold: #e9b824;
  --fs: 18px;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --kreideschrift: Chalkduster, "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --kw: min(calc((100vw - 28px) / 5 - 6px), 12.2vh, 104px);
  --tw: min(var(--kw), 10vh);
}
@media (orientation: landscape) {
  :root { --kw: min(calc((100vw - 40px) / 9 - 6px), 20.5vh, 112px); --tw: min(var(--kw), 12vh, 96px); }
}
* { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden; color: var(--kreide); font-family: var(--sans); line-height: 1.4;
  background: repeating-linear-gradient(92deg, rgba(0,0,0,.09) 0 2px, transparent 2px 9px, rgba(255,255,255,.025) 9px 11px, transparent 11px 23px), linear-gradient(180deg, #452c1b, var(--holz));
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.seite { height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }

.knopf { min-height: 2.9rem; padding: .45rem 1.1rem; border-radius: .6rem; border: 2px solid #1c120a; background: linear-gradient(#fbf3df, #ead9b4);
  color: var(--tinte); font-weight: 700; font-size: 1rem; box-shadow: 0 3px 0 #1c120a; }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c120a; }
.knopf.haupt { background: linear-gradient(#f3cf55, #dfa51c); }
.knopf.klein { min-height: 2.5rem; padding: .25rem .8rem; font-size: .9rem; }
.knopf.still { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; font-weight: 600; }
.knopf[disabled] { opacity: .45; }

/* ---------- Startseite ---------- */
#start { align-items: center; overflow-y: auto; -webkit-user-select: none; }
.start-innen { width: min(100%, 34rem); margin: auto; padding: 1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.tafel { background: radial-gradient(120% 90% at 30% 20%, #34403e, var(--schiefer) 70%); border: .55rem solid #6b4526; border-radius: .5rem;
  box-shadow: inset 0 0 0 2px #2a1a0e, 0 6px 14px rgba(0,0,0,.45); color: var(--kreide); font-family: var(--kreideschrift); }
.start-tafel { padding: 1.1rem 1rem 1rem; text-align: center; }
.start-tafel h1 { margin: 0; font-size: clamp(2.2rem, 11vw, 3.4rem); font-weight: 400; letter-spacing: .02em; line-height: 1.1; }
.start-tafel p { margin: 1.3rem 0 0; font-size: .95rem; opacity: .92; }
.faecher { display: flex; justify-content: center; margin: 1rem 0 .3rem; height: 6.9rem; }
.faecher svg { width: 4.3rem; height: 6.88rem; margin: 0 -.7rem; filter: drop-shadow(0 4px 4px rgba(0,0,0,.55)); }
.faecher svg:nth-child(1) { transform: rotate(-16deg) translateY(.5rem); } .faecher svg:nth-child(2) { transform: rotate(-5deg); }
.faecher svg:nth-child(3) { transform: rotate(5deg); } .faecher svg:nth-child(4) { transform: rotate(16deg) translateY(.5rem); }
.start-knoepfe { display: grid; gap: .6rem; }
.start-knoepfe .knopf { width: 100%; font-size: 1.1rem; min-height: 3.3rem; }
.start-knoepfe .knopf small { display: block; font-weight: 500; font-size: .8rem; }
.zweier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.stufenwahl { background: rgba(0,0,0,.25); border-radius: .6rem; padding: .6rem .7rem .7rem; }
.stufenwahl > span { display: block; font-size: .9rem; margin-bottom: .35rem; }
.fuss { text-align: center; font-size: .82rem; opacity: .85; }
.fuss a { color: inherit; }

.wahl { display: flex; flex-wrap: wrap; gap: .4rem; }
.wahl button { flex: 1 1 auto; min-height: 2.6rem; padding: .3rem .7rem; border-radius: .5rem; border: 2px solid #8b7455; background: #fffaf0; color: var(--tinte); font-weight: 600; font-size: .95rem; }
.wahl button[aria-pressed="true"] { background: var(--tinte); color: #fff7e6; border-color: var(--tinte); }
.stufenwahl .wahl button { border-color: #1c120a; }
.stufenwahl .wahl button[aria-pressed="true"] { background: var(--gold); color: var(--tinte); }

/* ---------- Spieltisch ---------- */
#leiste { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; }
.knoepfe { display: flex; gap: .45rem; }
.tafelchip { display: flex; align-items: baseline; gap: .55rem; padding: .3rem .8rem; min-height: 2.5rem; border-radius: .4rem; border: 3px solid #6b4526;
  background: var(--schiefer); color: var(--kreide); font-family: var(--kreideschrift); font-size: .95rem; }
.tafelchip b { font-size: 1.2rem; font-weight: 400; }
.tafelchip i { font-style: normal; opacity: .7; }
#meldung { min-height: 1.9rem; padding: .1rem .8rem .3rem; text-align: center; font-size: 1rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#tisch { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 auto; width: calc(100% - 1rem); max-width: 68rem; container-type: size; border-radius: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"), radial-gradient(90% 80% at 50% 42%, #3d7559, var(--filz) 55%, #214333); border: 3px solid #1a1009;
  box-shadow: inset 0 0 0 5px #7a5230, inset 0 0 0 6px #a5753f, inset 0 0 0 8px #1a1009, inset 0 0 46px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.35); }
#trumpf { position: absolute; left: .75rem; top: .7rem; z-index: 3; display: flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: .5rem;
  background: var(--papier); color: var(--tinte); font-weight: 700; font-size: .9rem; border: 2px solid #1c120a; max-width: 44%; }
#trumpf:empty { display: none; }
#trumpf .sym { width: 1.5rem; height: 1.5rem; flex: none; }
#trumpf small { font-weight: 600; opacity: .8; }
.sym { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.eckknopf { position: absolute; right: .75rem; top: .7rem; z-index: 3; padding: .25rem .6rem; min-height: 2.2rem; border-radius: .5rem; border: 2px solid rgba(242,238,227,.7);
  background: rgba(0,0,0,.25); color: var(--kreide); font-size: .8rem; font-weight: 600; }
.platz { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.platz .schild { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 1rem; background: rgba(0,0,0,.42); font-size: .85rem; font-weight: 600; white-space: nowrap; border: 2px solid transparent; }
.platz.dran .schild { border-color: var(--gold); background: rgba(0,0,0,.62); }
.platz .schild em { font-style: normal; display: inline-flex; align-items: center; gap: .2rem; opacity: .9; font-weight: 500; }
.platz .schild em::before { content: ""; width: .6rem; height: .9rem; border-radius: 2px; background: #8a2630; border: 1.5px solid #f2eee3; }
.p2 { top: 3.3rem; left: 50%; transform: translateX(-50%); }
.p0 { bottom: .45rem; left: 50%; transform: translateX(-50%); }
.p3 { left: .5rem; top: 50%; transform: translateY(-50%); align-items: flex-start; }
.p1 { right: .5rem; top: 50%; transform: translateY(-50%); align-items: flex-end; }
@media (orientation: landscape) { .p2 { top: .55rem; } }
@media (orientation: portrait) { .p3, .p1 { top: 27%; } .p3 .schild, .p1 .schild { flex-direction: column; gap: 0; border-radius: .6rem; padding: .2rem .45rem; white-space: normal; text-align: center; max-width: 5.2rem; line-height: 1.15; } }
.blase { position: absolute; top: 100%; margin-top: .3rem; padding: .3rem .7rem; border-radius: .7rem; background: var(--papier); color: var(--tinte); font-weight: 700; font-size: .95rem;
  white-space: nowrap; border: 2px solid #1c120a; z-index: 5; }
.p0 .blase { top: auto; bottom: 100%; margin: 0 0 .3rem; }
#mitte { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
#tisch > * { --mw: var(--tw); }
@supports (width: 1cqh) { #tisch > * { --mw: min(var(--tw), calc((100cqh - 4.4rem) / 3.25)); } }
#mitte .karte { position: absolute; left: calc(var(--mw) / -2); top: calc(var(--mw) * -.8); width: var(--mw); height: calc(var(--mw) * 1.6); transition: transform .45s ease, opacity .45s ease; }
#mitte .s0 { transform: translate(0, 48%) rotate(-2deg); z-index: 4; } #mitte .s2 { transform: translate(0, -48%) rotate(2deg); z-index: 1; }
#mitte .s3 { transform: translate(-88%, 0) rotate(-4deg); z-index: 2; } #mitte .s1 { transform: translate(88%, 0) rotate(4deg); z-index: 3; }
#mitte .karte.sieger { outline: 4px solid var(--gold); outline-offset: 1px; border-radius: 9%; z-index: 6; }
#mitte.weg .karte { opacity: 0; }
#mitte.weg.w0 .karte { transform: translate(0, 190%) scale(.6); } #mitte.weg.w2 .karte { transform: translate(0, -190%) scale(.6); }
#mitte.weg.w3 .karte { transform: translate(-260%, 0) scale(.6); } #mitte.weg.w1 .karte { transform: translate(260%, 0) scale(.6); }
.karte { display: block; padding: 0; border: 0; background: none; border-radius: 9%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.karte svg { display: block; width: 100%; height: 100%; }
@keyframes legen { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }
#mitte .karte.neu { animation: legen .28s ease-out; }
#ansage { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .6rem; border-radius: 1.2rem; background: rgba(20,36,28,.72); }
#ansage h2 { margin: 0; font-family: var(--serif); font-size: 1.15rem; text-align: center; }
.ansage-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; width: min(100%, 26rem); }
@media (orientation: landscape) { .ansage-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 44rem); } #ansage h2 { font-size: 1rem; } }
.ansage-gitter .knopf { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .3rem .4rem; min-height: 2.8rem; font-size: .98rem; }
.ansage-gitter .knopf .sym { width: 1.5rem; height: 1.5rem; }
.ansage-gitter .knopf small { font-weight: 600; opacity: .75; }
#coach { margin: .35rem .5rem 0; padding: .45rem .7rem; border-radius: .6rem; background: var(--papier); color: var(--tinte); font-size: .92rem; display: flex; align-items: center; gap: .6rem; border: 2px solid #1c120a; max-height: 7.6rem; overflow-y: auto; -webkit-user-select: text; user-select: text; }
#coach p { margin: 0; flex: 1; }
#coach .knopf { flex: none; }
#coach.voll { position: fixed; z-index: 20; margin: 0; left: max(.5rem, env(safe-area-inset-left, 0px)); right: max(.5rem, env(safe-area-inset-right, 0px)); bottom: max(.5rem, env(safe-area-inset-bottom, 0px)); max-height: 46vh; box-shadow: 0 -4px 14px rgba(0,0,0,.5); }
#coach.gut { border-left: .5rem solid #2c6b34; } #coach.mittel { border-left: .5rem solid #c98a00; } #coach.schlecht { border-left: .5rem solid var(--rot); }
#hand { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px; padding: .5rem 8px .55rem; min-height: calc(var(--kw) * 1.6 + 1rem); }
#hand .karte { width: var(--kw); height: calc(var(--kw) * 1.6); transition: transform .15s ease; }
#hand .karte.nein { filter: grayscale(.45) brightness(.6); }
@media (hover: hover) { #hand .karte.ok:hover { transform: translateY(-7%); } }
#hand .karte.gewaehlt { transform: translateY(-12%); outline: 4px solid var(--gold); outline-offset: 1px; }
#hand .karte.tipp { outline: 4px dashed #fff; outline-offset: 1px; }
@keyframes nein { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
#hand .karte.wackel { animation: nein .25s 2; }

/* ---------- Blätter (Dialoge) ---------- */
#blatt { position: fixed; inset: 0; z-index: 50; background: rgba(18,10,5,.66); display: flex; align-items: center; justify-content: center;
  padding: max(.6rem, env(safe-area-inset-top, 0px)) max(.6rem, env(safe-area-inset-right, 0px)) max(.6rem, env(safe-area-inset-bottom, 0px)) max(.6rem, env(safe-area-inset-left, 0px)); }
.papier { width: min(100%, 40rem); max-height: 100%; overflow-y: auto; background: var(--papier); color: var(--tinte); border-radius: .8rem; border: 3px solid #1c120a; padding: 1rem 1.1rem 1.1rem;
  -webkit-user-select: text; user-select: text; overscroll-behavior: contain; }
.papier.schiefer { background: radial-gradient(120% 90% at 30% 10%, #34403e, var(--schiefer) 70%); color: var(--kreide); border: .6rem solid #6b4526; font-family: var(--kreideschrift); }
.papier h2 { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.papier.schiefer h2 { font-family: inherit; font-weight: 400; }
.papier h3 { margin: 1rem 0 .3rem; font-family: var(--serif); font-size: 1.1rem; }
.papier p { margin: .4rem 0; max-width: 62ch; }
.papier ul { margin: .3rem 0; padding-left: 1.2rem; } .papier li { margin: .2rem 0; }
.zeile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.zeile .knopf { flex: 1 1 9rem; }
.menue { display: grid; gap: .5rem; } .menue .knopf { width: 100%; text-align: left; }
.feld { margin: .9rem 0; } .feld > label, .feld > span.t { display: block; font-weight: 700; margin-bottom: .3rem; } .feld small { display: block; opacity: .8; margin-top: .25rem; font-size: .82rem; }
.feld input[type=text] { width: 100%; min-height: 2.7rem; font: inherit; padding: .3rem .6rem; border: 2px solid #8b7455; border-radius: .5rem; background: #fffaf0; color: var(--tinte); }
table.z { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.z th, table.z td { padding: .3rem .25rem; text-align: right; border-bottom: 1px solid rgba(42,29,18,.2); }
table.z th:first-child, table.z td:first-child { text-align: left; }
table.z tr.sum td { font-weight: 800; border-top: 2px solid var(--tinte); border-bottom: 0; }
.schiefer table.z th, .schiefer table.z td { border-color: rgba(242,238,227,.25); }
.zwei-tafeln { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.zwei-tafeln h3 { font-family: inherit; font-weight: 400; margin: 0; text-align: center; }
.zwei-tafeln svg { width: 100%; height: auto; display: block; }
.zwei-tafeln .gross { text-align: center; font-size: 1.9rem; line-height: 1.1; }
.trainerbox { margin-top: .8rem; padding: .6rem .8rem; border-radius: .6rem; background: #efe3c6; border-left: .5rem solid #2c6b34; }
.trainerbox h3 { margin-top: 0; }
.zugliste { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; padding: 0; list-style: none; }
.zugliste li { margin: 0; padding: .1rem .5rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; background: #d7e8d2; color: #17401d; }
.zugliste li.m { background: #f6e2ae; color: #6b4400; } .zugliste li.s { background: #f3c9cf; color: #7d0a1b; } .zugliste li.x { background: #e6dcc6; color: #5a4a35; font-weight: 500; }
.minikarten { display: flex; gap: .3rem; flex-wrap: wrap; margin: .4rem 0; } .minikarten svg { width: 3.1rem; height: 4.96rem; } .minikarten figure { margin: 0; text-align: center; font-size: .75rem; }
.antworten { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; } .antworten .knopf { flex: 1 1 4rem; }
.gross-zahl { font-size: 1.6rem; font-weight: 800; font-family: var(--serif); }
details { border-top: 1px solid rgba(42,29,18,.25); padding: .15rem 0; } details summary { font-weight: 700; padding: .55rem 0; cursor: pointer; font-size: 1.05rem; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; background: #fffaf0; border: 2px dashed #8b7455; border-radius: .5rem; padding: .4rem .7rem; display: inline-block; -webkit-user-select: all; user-select: all; }
.hinweis { font-size: .85rem; opacity: .85; }
/* Querformat auf dem Handy: flaches Kreuz, Meldung in der Kopfzeile */
@media (max-height: 540px) and (orientation: landscape) {
  #spiel { position: relative; }
  #leiste { padding: .2rem .6rem; min-height: 2.9rem; }
  #meldung { position: absolute; top: env(safe-area-inset-top, 0px); left: 12rem; right: 10.5rem; height: 2.9rem; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-size: .86rem; line-height: 1.15; z-index: 5; pointer-events: none; }
  #tisch > * { --mw: min(var(--kw), 16vh); }
  @supports (width: 1cqh) { #tisch > * { --mw: min(var(--kw), calc((100cqh - .9rem) / 2.6)); } }
  #mitte { top: 50%; }
  #mitte .s0 { transform: translate(0, 30%) rotate(-2deg); } #mitte .s2 { transform: translate(0, -30%) rotate(2deg); }
  #mitte .s3 { transform: translate(-115%, 0) rotate(-4deg); } #mitte .s1 { transform: translate(115%, 0) rotate(4deg); }
  .platz .schild { font-size: .78rem; padding: .1rem .5rem; }
  .p2 { top: .35rem; left: auto; right: calc(50% + .62 * var(--mw)); transform: none; } .p2 small { display: none; }
  .p0 { bottom: .35rem; left: calc(50% + .62 * var(--mw)); transform: none; }
  .p3, .p1 { top: 66%; }
  #trumpf { max-width: 30%; font-size: .82rem; top: .45rem; } .eckknopf { top: .45rem; }
  #hand { padding: .3rem 8px; min-height: 0; }
  #coach:not(.voll) { position: fixed; z-index: 20; margin: 0; left: .5rem; right: .5rem; bottom: calc(var(--kw) * 1.6 + .9rem + env(safe-area-inset-bottom, 0px)); max-height: 4.8rem; }
  #ansage { gap: .3rem; padding: .3rem .6rem; } #ansage h2 { display: none; } .ansage-gitter .knopf { min-height: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.titelbild { display: block; width: 100%; height: auto; margin: .8rem 0 .2rem; border-radius: .3rem; border: 2px solid #1c120a; }
.feld .wahl + .wahl { margin-top: .4rem; }

/* Weitere Spiele von wizza.org */
.werbung { background: rgba(0,0,0,.25); border-radius: .6rem; padding: .6rem .7rem .5rem; }
.werbung h3 { margin: 0 0 .45rem; font-family: var(--serif); font-size: 1rem; font-weight: 700; }
.werbung-liste { display: grid; gap: .4rem; }
.werbung-liste a { display: flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .35rem .6rem; border-radius: .5rem; background: #fffaf0; color: var(--tinte); text-decoration: none; border: 2px solid #1c120a; }
.werbung-liste svg { width: 2.2rem; height: 2.2rem; flex: none; }
.werbung-liste b { display: block; font-size: 1rem; } .werbung-liste small { display: block; font-size: .8rem; opacity: .85; }
.werbung p { margin: .45rem 0 0; text-align: center; font-size: .85rem; } .werbung .alle { color: inherit; }
.papier .werbung { background: #efe3c6; margin-top: 1rem; }
.papier .werbung-liste { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
@media (min-width: 40rem) { #start .werbung-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }