/* Aufzuchtspiel · Oberfläche im Booster-/Wildlands-Stil: Holzrahmen, Pergament, Gold als einziger Akzent,
   harte Schatten, ganze Pixel. Mobil zuerst (Hochformat). */
@font-face{font-family:'Grandstander';font-weight:800;font-display:swap;src:url(schrift/Grandstander-800-latin.woff2) format('woff2')}
@font-face{font-family:'Grandstander';font-weight:700;font-display:swap;src:url(schrift/Grandstander-700-latin.woff2) format('woff2')}
@font-face{font-family:'Tiny5';font-display:swap;src:url(schrift/Tiny5-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:'Tiny5';font-display:swap;src:url(schrift/Tiny5-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F}
@font-face{font-family:'Jersey 10';font-display:swap;src:url(schrift/Jersey10-400-latin.woff2) format('woff2')}
@font-face{font-family:'VT323';font-display:swap;src:url(schrift/VT323-400-latin.woff2) format('woff2')}
/* Japanisch: DotGothic16 (Pixelschrift, SIL OFL, schrift/DotGothic16-OFL.txt), auf die benutzten Zeichen + Kana gekürzt.
   Nur für japanische Zeichen (unicode-range); lateinische Buchstaben bleiben in den Booster-Schriften. */
@font-face{font-family:'DotGothic16';font-display:swap;src:url(schrift/DotGothic16-ja.woff2) format('woff2');unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}
:root{--holz-d:#24170f;--holz:#5b3a20;--holz-h:#8a5a32;--kante:#b98a55;--innen:#2e2219;--fach:#1e1610;--perg:#f3e3c3;--perg-m:#c2ab86;
  --gold:#f2c35b;--bern:#c98a2a;--bern-s:#7a4e12;--papier:#f3e6c8;--grund:#3d2614;--k:#1a0f08}
*{box-sizing:border-box}
html,body{margin:0;background:var(--grund);color:var(--perg);font-family:'Grandstander','DotGothic16','Tiny5',system-ui,sans-serif;font-weight:700;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  background:repeating-linear-gradient(90deg,#3d2614 0 46px,#382311 46px 48px)}
.pix,canvas{image-rendering:pixelated;image-rendering:crisp-edges}
button{font:inherit;color:inherit}
.app{width:100%;max-width:480px;flex:1 0 auto;display:flex;flex-direction:column;padding:0 0 calc(86px + env(safe-area-inset-bottom))}
/* Kopf */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px 8px;background:var(--holz-d);
  border-bottom:3px solid #120b06;box-shadow:inset 0 -2px 0 var(--holz)}
.marke{line-height:.9}
.marke b{display:block;font-size:17px;color:var(--perg)}
.marke i{display:block;font-style:normal;font-size:30px;font-weight:800;color:var(--gold);text-shadow:0 3px 0 var(--holz-d)}
.marke small{display:inline-block;margin-top:4px;font-family:'VT323','DotGothic16',monospace;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--holz-d);background:#7ac48a;padding:0 6px;border-radius:2px}
.kopf-r{display:flex;gap:8px;align-items:center}
.plakette{min-width:58px;text-align:center;background:#2a7a74;border:3px solid var(--k);border-radius:3px;padding:3px 8px 2px;
  box-shadow:inset 0 2px 0 #5fb8ae,2px 2px 0 #0008;line-height:1}
.plakette small{display:block;font-size:11px;color:#d8f2ee}
.plakette b{font-size:20px;color:#fff}
.rund{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--innen);border:3px solid var(--k);border-radius:3px;
  box-shadow:inset 0 2px 0 var(--holz-h),2px 2px 0 #0008;cursor:pointer;padding:0}
.rund img{width:24px;height:24px}
/* Bühne */
.buehne-rahmen{margin:12px 16px 0;padding:6px;background:var(--holz);border:3px solid var(--k);border-radius:3px;
  box-shadow:inset 0 3px 0 var(--kante),inset 0 -4px 0 var(--holz-d),4px 4px 0 #0008}
.buehne{position:relative;margin:0 auto;overflow:hidden;background:#2e1c0e;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.buehne>canvas.hg{position:absolute;left:0;top:0}
.ebene{position:absolute;inset:0;pointer-events:none}
.nest-bild{position:absolute;pointer-events:none}
.figur{position:absolute;cursor:pointer;pointer-events:auto;transform-origin:50% 100%}
.figur canvas{display:block}
.figur.atmet{animation:atmen 1.6s steps(1) infinite}
.figur.schlaf{animation:atmen 3.2s steps(1) infinite}
@keyframes atmen{0%{transform:translateY(0)}50%{transform:translateY(var(--px,4px))}}
.figur.huepf{animation:huepf .5s steps(5)}
@keyframes huepf{0%{transform:translateY(0)}40%{transform:translateY(calc(var(--px,4px) * -5))}70%{transform:translateY(calc(var(--px,4px) * -2))}100%{transform:translateY(0)}}
.figur.wackel{animation:wackel .4s steps(4)}
@keyframes wackel{25%{transform:translateX(calc(var(--px,4px) * -1))}75%{transform:translateX(var(--px,4px))}}
.figur.rueckzug{filter:saturate(.7) brightness(.85)}
.figur.spiegel canvas{transform:scaleX(-1)}
.kruemel{position:absolute;pointer-events:auto;cursor:pointer;padding:6px;margin:-6px}
.flug{position:absolute;pointer-events:none;z-index:3;animation:steigen 1.2s steps(8) forwards}
@keyframes steigen{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-70px);opacity:0}}
.zzz{position:absolute;font-family:'Jersey 10','DotGothic16',monospace;color:var(--perg);text-shadow:2px 2px 0 var(--k);animation:zzz 2.4s steps(6) infinite;pointer-events:none}
@keyframes zzz{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(18px,-36px);opacity:0}}
.sprechblase{position:absolute;z-index:4;max-width:70%;background:var(--papier);color:var(--holz-d);border:3px solid var(--k);padding:6px 10px;
  font-size:15px;line-height:1.2;box-shadow:3px 3px 0 #0008;pointer-events:none;animation:blase 1.6s steps(1) forwards}
@keyframes blase{0%{opacity:1}85%{opacity:1}100%{opacity:0}}
.blitz{position:absolute;inset:0;z-index:5;pointer-events:none;animation:blitz .9s steps(6) forwards}
@keyframes blitz{0%{background:#fff0}20%{background:#fffd}100%{background:#fff0}}
/* Stimmung, Leisten */
.zeile-status{margin:10px 16px 0;padding:8px 12px;background:var(--papier);color:var(--holz-d);border:3px solid var(--k);font-size:16px;line-height:1.25;
  box-shadow:3px 3px 0 #0008;min-height:44px;display:flex;align-items:center;gap:8px}
.zeile-status img{width:20px;height:20px;flex:0 0 auto}
.leisten{margin:10px 16px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;background:var(--innen);border:3px solid var(--k);
  padding:10px;box-shadow:inset 0 2px 0 var(--holz-h),3px 3px 0 #0008}
.leiste{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--perg-m)}
.leiste img{width:20px;height:20px;flex:0 0 auto}
.balken{flex:1;height:12px;background:var(--fach);border:2px solid var(--k);position:relative;overflow:hidden}
.balken i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);box-shadow:inset 0 -3px 0 var(--bern)}
.balken.niedrig i{background:#e8806a;box-shadow:inset 0 -3px 0 #b04a3a}
.balken::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 calc(10% - 2px),#1e161088 calc(10% - 2px) 10%)}
.bindung{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--perg-m)}
.herzen{display:flex;gap:4px}
.herzen img{width:22px;height:20px}
.fortschritt{margin:10px 16px 0;background:var(--innen);border:3px solid var(--k);padding:10px;box-shadow:inset 0 2px 0 var(--holz-h),3px 3px 0 #0008}
.fortschritt .zeile{display:flex;justify-content:space-between;font-size:14px;color:var(--perg-m);margin:2px 0}
.fortschritt .zeile b{color:var(--gold);font-family:'VT323','DotGothic16',monospace;font-size:20px;font-weight:400}
.fortschritt .balken{height:14px;margin:2px 0 8px}
.fortschritt .balken.gruen i{background:#7ac48a;box-shadow:inset 0 -3px 0 #3f8a55}
.leise{color:var(--perg-m);font-size:13px}
/* Leiste unten */
nav.unten{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;background:var(--holz);border-top:3px solid var(--k);
  box-shadow:inset 0 2px 0 var(--holz-h),0 -3px 0 #0006;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
nav.unten .innen{display:flex;gap:6px;width:100%;max-width:480px}
nav.unten button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;background:var(--innen);border:3px solid var(--k);
  border-radius:3px;box-shadow:inset 0 2px 0 var(--holz-h),inset 0 -3px 0 #0008;color:var(--perg);font-size:13px;cursor:pointer;padding:6px 2px;touch-action:manipulation}
nav.unten button img{width:30px;height:33px}
nav.unten button:disabled{opacity:.45}
nav.unten button:active:not(:disabled){transform:translate(2px,2px)}
nav.unten button.an{background:var(--bern);box-shadow:inset 0 3px 0 var(--gold),inset 0 -3px 0 var(--bern-s)}
/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 18px;border:3px solid var(--k);border-radius:3px;
  font-size:19px;line-height:1;cursor:pointer;color:var(--perg);text-shadow:0 2px 0 #0006;touch-action:manipulation}
.knopf.gold{background:var(--bern);box-shadow:inset 0 3px 0 var(--gold),inset 0 -4px 0 var(--bern-s),3px 3px 0 #0008}
.knopf.holz{background:var(--holz);box-shadow:inset 0 3px 0 var(--kante),inset 0 -4px 0 var(--holz-d),3px 3px 0 #0008}
.knopf.breit{width:100%}
.knopf:disabled{filter:grayscale(.7) brightness(.75);cursor:default}
.knopf:active:not(:disabled){transform:translate(2px,2px)}
.knopf:focus-visible,nav.unten button:focus-visible,.rund:focus-visible,.wahl-ei:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Blatt (Unterfenster) */
.schleier{position:fixed;inset:0;z-index:40;background:#0009;display:flex;align-items:flex-end;justify-content:center}
.blatt{width:100%;max-width:480px;max-height:86vh;overflow:auto;background:var(--innen);border:3px solid var(--k);border-bottom:0;
  box-shadow:inset 0 3px 0 var(--holz-h);padding:14px 16px calc(18px + env(safe-area-inset-bottom));animation:hoch .2s steps(4)}
@keyframes hoch{0%{transform:translateY(40px)}100%{transform:none}}
.blatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.blatt-kopf h2{margin:0;font-size:24px;font-weight:800;color:var(--gold)}
.blatt-kopf .knopf{min-height:44px;font-size:16px;padding:4px 12px}
.etikett{font-family:'VT323','DotGothic16',monospace;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:12px 0 6px}
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wahlkarte{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;background:var(--fach);border:3px solid var(--k);border-radius:3px;
  box-shadow:inset 0 2px 0 #0008,inset 0 -2px 0 var(--holz);cursor:pointer;font-size:14px;text-align:center;line-height:1.1;position:relative;color:var(--perg)}
.wahlkarte img{width:36px;height:36px}
.wahlkarte .punkt{width:10px;height:10px;border:2px solid var(--k);display:inline-block}
.wahlkarte .stern{position:absolute;top:-8px;right:-6px;background:var(--gold);color:var(--holz-d);font-size:11px;padding:1px 4px;border:2px solid var(--k)}
.liste-k{display:flex;flex-direction:column;gap:8px}
.zeilenkarte{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--fach);border:3px solid var(--k);border-radius:3px;cursor:pointer;text-align:left;
  box-shadow:inset 0 -2px 0 var(--holz);color:var(--perg);width:100%}
.zeilenkarte img{width:40px;height:40px;flex:0 0 auto}
.zeilenkarte b{display:block;font-size:17px}
.zeilenkarte span{display:block;font-size:13px;color:var(--perg-m);font-weight:700;margin-top:2px}
.zeilenkarte:disabled{opacity:.5;cursor:default}
.marke-klein{font-family:'VT323','DotGothic16',monospace;font-size:15px;color:var(--holz-d);background:var(--perg-m);padding:0 5px;margin-left:6px}
/* Pergament */
.perg{background:var(--papier);color:var(--holz-d);border:3px solid var(--k);padding:12px 14px;box-shadow:inset 0 0 0 3px #e2cfa4,3px 3px 0 #0008}
.perg p{margin:6px 0;line-height:1.3}
.tb-eintrag{display:flex;gap:10px;padding:7px 0;border-bottom:2px dashed #c2ab86;font-size:15px;line-height:1.25}
.tb-eintrag:last-child{border-bottom:0}
.tb-eintrag time{font-family:'VT323','DotGothic16',monospace;font-size:16px;color:#7a4e12;flex:0 0 74px;font-weight:400}
/* Steckbrief */
.karte{background:var(--holz);border:3px solid var(--k);border-radius:4px;padding:8px;box-shadow:inset 0 3px 0 var(--kante),inset 0 -4px 0 var(--holz-d),4px 4px 0 #0008}
.karte-bild{position:relative;background:#f4dcb8;border:3px solid var(--k);display:flex;align-items:flex-end;justify-content:center;padding:10px 0 12px;min-height:150px}
.karte-bild .st{position:absolute;left:6px;top:6px;font-family:'VT323','DotGothic16',monospace;font-size:16px;padding:0 6px;border:2px solid var(--k);color:var(--k)}
.karte-bild .el{position:absolute;right:6px;top:6px;width:30px;height:30px;border:3px solid var(--k);border-radius:50%}
.karte-text{background:var(--papier);color:var(--holz-d);border:3px solid var(--k);margin-top:6px;padding:10px 12px}
.karte-text h3{margin:0 0 4px;font-size:24px;font-weight:800}
.karte-text .unter{font-size:14px;color:#7a5a3a;margin-bottom:6px}
.eig{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px}
.eig dt{color:#7a5a3a}
.eig dd{margin:0}
.eig .offen{color:#9a8a70;font-style:italic}
.werte{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;font-size:14px}
.werte .balken{height:10px}
.chip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border:2px solid var(--k);background:#f8eed6;font-size:13px}
.chip.selten{background:var(--gold)}
/* Ei-Auswahl und Ei */
.mitte{text-align:center}
.titel{font-size:26px;font-weight:800;color:var(--gold);margin:14px 16px 4px;text-shadow:0 3px 0 var(--holz-d)}
.unterzeile{margin:0 16px;color:var(--perg-m);font-size:15px;line-height:1.3}
.wahl-reihe{display:flex;justify-content:center;gap:10px;margin:14px 16px 0}
.wahl-ei{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;background:var(--fach);border:3px solid var(--k);
  border-radius:3px;cursor:pointer;color:var(--perg-m);font-size:13px;line-height:1.2;box-shadow:inset 0 -2px 0 var(--holz)}
.wahl-ei.gewaehlt{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--bern),0 0 0 2px var(--k);color:var(--perg);transform:translateY(-4px)}
.wahl-ei canvas{animation:wiegen 2.4s steps(4) infinite}
.wahl-ei:nth-child(2) canvas{animation-delay:-.8s}
.wahl-ei:nth-child(3) canvas{animation-delay:-1.6s}
@keyframes wiegen{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.ei-gross{position:absolute;cursor:pointer;pointer-events:auto;transform-origin:50% 100%}
.ei-gross.wackeln{animation:eiwackel .6s steps(6)}
.ei-gross.zittern{animation:eiwackel .3s steps(4) infinite}
@keyframes eiwackel{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}
.knopf-reihe{display:flex;gap:10px;margin:12px 16px 0}
.knopf-reihe .knopf{flex:1}
.zahl-gross{font-family:'VT323','DotGothic16',monospace;font-size:22px;color:var(--gold);font-weight:400}
/* Enthüllung */
.enth{position:fixed;inset:0;z-index:60;background:#120b06f2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px;gap:14px}
.enth .zaehler{font-family:'VT323','DotGothic16',monospace;font-size:22px;color:var(--gold)}
.enth-karte{position:relative;width:min(320px,90vw);background:var(--holz);border:3px solid var(--k);border-radius:4px;padding:8px;box-shadow:inset 0 3px 0 var(--kante),inset 0 -4px 0 var(--holz-d),5px 5px 0 #0008;
  animation:aufdecken .4s steps(5)}
@keyframes aufdecken{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.enth-karte.gross-auf{animation:aufdecken2 .9s steps(9)}
@keyframes aufdecken2{0%{transform:scale(.4)}60%{transform:scale(1.1)}100%{transform:none}}
.enth-innen{background:var(--papier);color:var(--holz-d);border:3px solid var(--k);padding:16px 12px;text-align:center;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.enth-innen small{font-family:'VT323','DotGothic16',monospace;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:#7a4e12}
.enth-innen b{font-size:30px;font-weight:800;line-height:1.05}
.enth-innen .streifen{width:100%;height:16px;border:3px solid var(--k)}
.strahlen{position:absolute;pointer-events:none}
.enth input{font:inherit;font-size:22px;padding:10px 12px;width:min(300px,86vw);background:var(--fach);color:var(--perg);border:3px solid var(--k);border-radius:3px;
  box-shadow:inset 0 2px 0 #0008;text-align:center}
.melde{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;background:var(--innen);border:3px solid var(--k);
  box-shadow:inset 0 0 0 2px var(--gold),4px 4px 0 #0008;padding:10px 16px;width:max-content;max-width:calc(100% - 32px);text-align:center;color:var(--perg);font-size:15px}
/* Minispiele */
.spielfeld{position:fixed;inset:0;z-index:55;background:#120b06;display:flex;flex-direction:column;align-items:center}
.spielfeld .kopfzeile{width:100%;max-width:480px;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:18px}
.spielfeld .flaeche{position:relative;flex:1;width:100%;max-width:480px;overflow:hidden;touch-action:none}
.spielfeld canvas.hg{position:absolute;inset:0;width:100%;height:100%}
.samen{position:absolute;width:44px;height:44px;margin:-22px;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer}
.samen img{width:24px;height:24px}
.steine{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;width:100%;max-width:360px;margin:auto}
.stein-k{aspect-ratio:1;border:4px solid var(--k);border-radius:4px;cursor:pointer;box-shadow:inset 0 5px 0 #fff4,inset 0 -6px 0 #0006,4px 4px 0 #0008;touch-action:manipulation}
.stein-k.leuchtet{filter:brightness(1.7);transform:translate(2px,2px)}
.ergebnis{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#120b06cc;font-size:26px;font-weight:800;color:var(--gold);text-align:center;padding:16px}
.verborgen{display:none!important}
@media (prefers-reduced-motion:reduce){.figur,.wahl-ei canvas,.ei-gross,.flug,.zzz,.enth-karte{animation:none!important}}
.funkel{position:absolute;width:8px;height:8px;border:2px solid var(--k);pointer-events:none;animation:funkel 1.2s steps(2) infinite}
@keyframes funkel{50%{opacity:0;transform:scale(.4)}}
.steine{max-width:300px}
a.knopf{text-decoration:none}

/* Namen: Vorschläge statt Pflicht-Eingabe */
.namen-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px}
.namen-chips .knopf{min-width:120px;font-size:20px}
.namen-reihe{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.namen-reihe .knopf{font-size:16px;min-height:44px}
.name-selbst{display:flex;flex-direction:column;align-items:center;gap:10px}
/* Sprachen und Leisten (längere Wörter in fr/pt) */
.sprachen{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.sprachen .knopf{font-size:16px;padding:6px 4px;min-height:44px}
.leiste span{flex:0 0 auto;min-width:50px;white-space:nowrap}
.knopf-reihe .knopf{min-width:0;text-align:center;line-height:1.1}
.wahl-ei span{overflow-wrap:anywhere}
.zeilenkarte b,.zeilenkarte span,.blatt-kopf h2,.titel{overflow-wrap:anywhere}
nav.unten button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nest-vorn{z-index:1;pointer-events:none}
/* Serien-Szene (Reel-Ausschnitt 176×120, doppelt) */
.serie-szene{display:flex;justify-content:center;background:#141a36}
.serie-szene img{width:352px;height:240px;max-width:100%;height:auto;image-rendering:pixelated}
/* Japanisch: kein künstliches Fett für die Pixelschrift */
html[lang=ja] body{font-synthesis:none}
html[lang=ja] .etikett,html[lang=ja] .marke small,html[lang=ja] .enth-innen small{letter-spacing:0;text-transform:none}
/* DotGothic16 ist ein 16er-Punktraster: auf 16 px (oder 32 px) bleibt jeder Punkt scharf */
html[lang=ja] .unterzeile,html[lang=ja] .zeile-status,html[lang=ja] .leiste,html[lang=ja] .bindung,html[lang=ja] .fortschritt .zeile,
html[lang=ja] .leise,html[lang=ja] nav.unten button,html[lang=ja] .zeilenkarte span,html[lang=ja] .wahl-ei,html[lang=ja] .wahlkarte,
html[lang=ja] .eig,html[lang=ja] .tb-eintrag,html[lang=ja] .chip,html[lang=ja] .melde,html[lang=ja] .karte-text .unter,
html[lang=ja] .etikett,html[lang=ja] .enth-innen small,html[lang=ja] .werte,html[lang=ja] .sprechblase,html[lang=ja] .plakette small,
html[lang=ja] .marke small,html[lang=ja] .blatt-kopf .knopf,html[lang=ja] .namen-reihe .knopf,html[lang=ja] .sprachen .knopf,
html[lang=ja] .zeilenkarte b,html[lang=ja] .knopf{font-size:16px;font-weight:400}
html[lang=ja] .titel,html[lang=ja] .enth-innen b,html[lang=ja] .blatt-kopf h2,html[lang=ja] .karte-text h3{font-size:32px;font-weight:400}
html[lang=ja] nav.unten button span{font-size:16px}
html[lang=ja] .plakette small{font-size:16px;line-height:1}
/* ── 09.11.: Ladeschirm, Funken, Meldungen, Löschen/Umzug, Serie-Wärme, Barrierefreiheit ── */
.ladeschirm{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:var(--grund)}
.ladeschirm img{width:96px;height:96px;animation:lade-wackel 1.2s steps(4) infinite}
@keyframes lade-wackel{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.funke{position:absolute;z-index:4;pointer-events:none;box-shadow:0 0 0 1px #1a0f08;animation:funke .75s steps(6) forwards}
@keyframes funke{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.melde.fehler{background:#f6d6cc;color:#5a1a10;border-color:#5a1a10}
.knopf.rot{background:#b04a3a;box-shadow:inset 0 3px 0 #e8806a,inset 0 -4px 0 #6a2418,3px 3px 0 #0008;color:#fff}
.knopf.klein{font-size:16px;min-height:44px}
.knopf img{width:22px;height:22px}
.perg.warnung{background:#f6e0c8;border-color:#7a2418}
.perg.warnung p{color:#4a1408}
.zahl-gross.code{font-size:38px;line-height:1.1;letter-spacing:.08em;user-select:all;-webkit-user-select:all;color:var(--holz-d)}
.code-feld{text-transform:uppercase;letter-spacing:.1em;font-family:'VT323','DotGothic16',monospace;font-size:26px}
.rechts-zeile{margin:16px 16px 0;text-align:center;font-size:15px}
.rechts-zeile a{display:inline-block;min-height:44px;line-height:44px;padding:0 10px;color:var(--gold);text-decoration:underline}
.knopf-reihe .knopf.klein{flex:1}
.figur:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.kruemel:focus-visible{outline:3px solid var(--gold)}
/* Serie: Wärme in Grad mit drei Stufenbildern, Ziele, goldener Schimmer */
.grad-box,.ziele{margin:10px 16px 0;background:var(--innen);border:3px solid var(--k);padding:10px;box-shadow:inset 0 2px 0 var(--holz-h),3px 3px 0 #0008}
.grad-box .zeile,.ziele .zeile{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--perg-m);margin:2px 0}
.grad-zahl{font-family:'VT323','DotGothic16',monospace;font-size:26px;font-weight:400;color:var(--gold)}
.grad-balken{position:relative;height:16px;margin:6px 0 10px;background:var(--fach);border:2px solid var(--k)}
.grad-balken i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#9fd8f2,#f2c35b 60%,#e8643c)}
.grad-marke{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--perg)}
.grad-stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grad-stufe{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;background:var(--fach);border:3px solid var(--k);
  color:var(--perg-m);font-size:13px;text-align:center;line-height:1.15;opacity:.6}
.grad-stufe img{width:44px;height:56px}
.grad-stufe b{font-family:'VT323','DotGothic16',monospace;font-size:20px;font-weight:400;color:var(--perg)}
.grad-stufe.an{opacity:1}
.grad-stufe.jetzt{border-color:var(--gold);box-shadow:0 0 0 2px var(--bern)}
.ziel{margin-top:6px}
.ziel .balken{height:12px}
.ziel.fertig b{color:#7ac48a}
.schimmer-an .buehne-rahmen{animation:schimmer 2.4s steps(8) infinite}
@keyframes schimmer{0%,100%{box-shadow:inset 0 3px 0 var(--kante),inset 0 -4px 0 var(--holz-d),4px 4px 0 #0008,0 0 0 3px #f2c35b55}
  50%{box-shadow:inset 0 3px 0 var(--kante),inset 0 -4px 0 var(--holz-d),4px 4px 0 #0008,0 0 14px 5px #f2c35bcc}}
@media (prefers-reduced-motion: reduce){.figur.atmet,.figur.schlaf,.zzz,.schimmer-an .buehne-rahmen,.ladeschirm img{animation:none}}
.blatt-kopf .knopf{flex:0 0 auto;white-space:nowrap}
/* Kontrast (09.11.): Gold-Knöpfe mit dunkler Schrift (5,9:1 statt 2,3:1), WCAG AA */
.knopf.gold{color:var(--holz-d);text-shadow:0 1px 0 #f2c35b99}
.knopf.gold:disabled{color:#3a2a1a}
/* 09.11.2026 Sammeln: Nestplatz-Leiste, Eierkorb, Sammelbuch, Ziele, Chancen, Deko */
.platz-leiste{display:flex;gap:6px;margin:10px 16px 0;overflow-x:auto;scrollbar-width:none}
.platz-leiste::-webkit-scrollbar{display:none}
.platz{position:relative;flex:1 1 0;min-width:64px;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:4px 4px 5px;background:var(--innen);border:3px solid var(--k);border-radius:3px;cursor:pointer;color:var(--perg);
  box-shadow:inset 0 2px 0 var(--holz-h),inset 0 -3px 0 #0008}
.platz canvas{width:36px;height:36px}
.platz img{width:auto;height:36px}
.platz small{font-size:12px;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.platz.an{background:var(--bern);box-shadow:inset 0 3px 0 var(--gold),inset 0 -3px 0 var(--bern-s)}
.platz.zu{opacity:.75;color:var(--perg-m)}
.platz.zu img{height:27px}
.platz-punkt{position:absolute;top:4px;right:4px;width:10px;height:10px;background:#e8806a;border:2px solid var(--k)}
.korb-reihe{margin-top:4px}
.korb-ei span{font-size:13px}
.reiter{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.reiter .knopf{flex:1;min-height:44px;font-size:16px;padding:6px 8px}
.buch-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.buch-karte{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:22px 6px 8px;background:#f4dcb8;color:var(--holz-d);
  border:3px solid var(--k);border-radius:3px;cursor:pointer;box-shadow:3px 3px 0 #0008;min-width:0}
.buch-karte canvas{width:96px;height:96px}
.buch-karte b{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buch-karte small{font-size:12px;color:#7a5a3a;text-align:center;line-height:1.1}
.buch-karte .st{position:absolute;left:4px;top:4px;font-family:'VT323','DotGothic16',monospace;font-size:14px;padding:0 4px;border:2px solid var(--k);color:var(--k);font-weight:400}
.buch-karte .el{position:absolute;right:4px;top:4px;width:16px;height:16px;border:2px solid var(--k);border-radius:50%}
.zeilenkarte.ziel b{font-size:15px}
.zeilenkarte.ziel.fertig{opacity:.7}
.zeilenkarte.ziel .balken{height:10px}
table.chancen{width:100%;border-collapse:collapse;background:var(--papier);color:var(--holz-d);border:3px solid var(--k);font-size:15px}
table.chancen td{padding:5px 8px;border-bottom:2px dashed #c2ab86}
table.chancen td:last-child{text-align:right;font-family:'VT323','DotGothic16',monospace;font-size:19px;font-weight:400}
table.chancen .punkt{display:inline-block;width:10px;height:10px;border:2px solid var(--k);margin-right:6px;vertical-align:middle}
.wahlkarte.gewaehlt{background:var(--bern);box-shadow:inset 0 3px 0 var(--gold),inset 0 -3px 0 var(--bern-s)}
.deko{position:absolute;pointer-events:none}
.wahlkarte.gewaehlt .stern{right:3px;top:3px}