@charset "UTF-8";
/* ============================================================================================
   Katana Inu · Menü-Kulisse (Claude, Web-Design-Neubau 24.09.2026)
   Richtung: Nutzer-Konzepte docs/refs/ui-2026-09-23 (ref-14 Hauptmenü, ref-15 Deckbau, ref-17
   Einstellungen, ref-20 Shop): schwarzroter Lack, Blattgold, Kirschblüte, Kalligrafie-Banner,
   Kartenbilder überall. Gilt NUR für Menüseiten: das Spiel (body[data-screen="game"]) bleibt
   unberührt. Lädt nach styles.css / champion.css und überschreibt dort gezielt.
   ============================================================================================ */
:root{
  --rail:248px;
  --lac:#140c0a; --lac-2:#1d130f; --lac-3:#2a1a13;
  --red:#8f2419; --red-hi:#b8362a; --red-deep:#5a130d;
  --gold-leaf:#d8b36a; --gold-hi:#f3d99a; --gold-lo:#8b6a34;
  --washi:#f2e7d3; --ash:#bfae98;
  --sakura:#f0b6c6;
  --display:'Cinzel','Shippori Mincho B1',Georgia,serif;
  --heading:'Shippori Mincho B1',Georgia,'Times New Roman',serif;
  --brush:'Yuji Syuku','Shippori Mincho B1',serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --frame:rgba(216,179,106,.34);
}

/* --- Grund: Abendhimmel mit Kirschblüten hinter jeder Menüseite ------------------------------ */
body:not([data-screen="game"]){
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%,rgba(184,54,42,.16),transparent 70%),
    linear-gradient(180deg,rgba(14,8,7,.72) 0%,rgba(14,8,7,.9) 42%,#0e0807 78%),
    url('/assets/ui/panorama/bg-sakura-dusk.webp') 60% 18%/cover fixed,
    var(--lac);
  color:var(--washi);
}
@media (min-width:1100px){ body:not([data-screen="game"]) #app{padding-left:var(--rail)} }

/* Schrift: Überschriften in Mincho, Knopf- und Leistenbeschriftung in Cinzel-Versalien. */
body:not([data-screen="game"]) :is(h1,h2,h3,h4){font-family:var(--heading);font-weight:700;letter-spacing:-.01em;color:var(--washi)}
body:not([data-screen="game"]) .eyebrow{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.32em;color:var(--gold-leaf);display:flex;align-items:center;gap:10px}
body:not([data-screen="game"]) .page-head .eyebrow::before{content:'';width:7px;height:7px;background:var(--gold-leaf);transform:rotate(45deg);box-shadow:0 0 10px rgba(243,217,154,.6)}
body:not([data-screen="game"]) .muted{color:var(--ash)}

/* --- Knöpfe: Zinnoberlack mit Goldkante, Goldknopf, dunkler Lack ------------------------------ */
body:not([data-screen="game"]) :is(.primary,.secondary){
  font:600 12.5px/1 var(--display);letter-spacing:.15em;text-transform:uppercase;border-radius:4px;min-height:48px;padding:14px 24px;
  transition:filter .25s var(--ease-out),box-shadow .25s var(--ease-out),transform .2s var(--ease-out),border-color .25s;
}
body:not([data-screen="game"]) .primary{
  background:linear-gradient(180deg,#c0402f 0%,#932619 50%,#6c1810 100%);border:1px solid #e3bd78;color:#fff2de;
  box-shadow:inset 0 1px 0 rgba(255,222,170,.4),inset 0 0 0 2px rgba(70,12,6,.45),0 8px 22px rgba(110,20,10,.4);text-shadow:0 1px 1px rgba(60,8,4,.6);
}
body:not([data-screen="game"]) .primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,222,170,.5),inset 0 0 0 2px rgba(70,12,6,.45),0 0 0 1px rgba(243,217,154,.35),0 10px 30px rgba(184,54,42,.45)}
body:not([data-screen="game"]) .primary.light{background:linear-gradient(180deg,#f8e3a8 0%,#dcb66c 52%,#a67c3b 100%);border-color:#fff0c8;color:#2a150b;text-shadow:0 1px 0 rgba(255,245,215,.6)}
body:not([data-screen="game"]) .secondary{background:linear-gradient(180deg,rgba(46,29,21,.95),rgba(24,15,11,.95));border:1px solid rgba(216,179,106,.55);color:var(--gold-hi);box-shadow:inset 0 1px 0 rgba(243,217,154,.12),0 6px 16px rgba(0,0,0,.35)}
body:not([data-screen="game"]) .secondary:hover:not(:disabled){border-color:var(--gold-hi);color:#fff2de;box-shadow:inset 0 1px 0 rgba(243,217,154,.2),0 0 18px rgba(216,179,106,.25)}
body:not([data-screen="game"]) :is(.primary,.secondary):active:not(:disabled){transform:translateY(1px)}
body:not([data-screen="game"]) .text-button{font:600 11.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
body:not([data-screen="game"]) .text-button:hover{color:var(--gold-hi)}
body:not([data-screen="game"]) .small-button{min-height:38px;padding:9px 14px;font-size:10.5px}

/* --- Lack-Seitenleiste --------------------------------------------------------------------- */
.site-rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail);height:auto;z-index:60;display:flex;flex-direction:column;gap:20px;padding:24px 16px 18px;
  background:
    linear-gradient(180deg,rgba(22,13,10,.93),rgba(12,7,6,.97) 60%),
    url('/assets/ui/panorama/bg-sakura-dusk.webp') 18% 30%/auto 100%;
  border-right:1px solid var(--frame);box-shadow:10px 0 40px rgba(0,0,0,.55),inset -1px 0 0 rgba(0,0,0,.6);overflow-y:auto;scrollbar-width:none;
}
.site-rail::after{content:'';position:absolute;top:0;bottom:0;right:5px;width:1px;background:linear-gradient(180deg,transparent,rgba(216,179,106,.3) 20%,rgba(216,179,106,.3) 80%,transparent);pointer-events:none}
.site-rail .brand{display:flex;align-items:center;gap:13px;padding:2px 4px 20px;border-bottom:1px solid rgba(216,179,106,.22);background:none}
.brand-mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;font:34px/1 var(--brush);color:#fcebd2;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#cc4633,#7d1b12 72%);border:1.5px solid var(--gold-leaf);
  box-shadow:inset 0 0 0 3px rgba(40,6,4,.4),0 0 22px rgba(184,54,42,.45);transition:transform .5s var(--ease-out)}
.site-rail .brand:hover .brand-mark{transform:rotate(-8deg) scale(1.04)}
.brand-word{min-width:0}
.brand-word strong{display:block;font:700 18px/1 var(--display);letter-spacing:.07em;color:var(--washi);white-space:nowrap}
.brand-word small{display:block;margin-top:7px;font:600 8px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-leaf);white-space:nowrap}
.rail-nav{display:flex;flex-direction:column;gap:7px;margin:0}
.rail-nav :is(button,a){
  display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:13px;min-height:46px;padding:0 14px;border-radius:4px;text-align:left;
  background:linear-gradient(180deg,rgba(40,26,19,.88),rgba(22,14,11,.9));border:1px solid rgba(216,179,106,.2);color:#dccab0;
  font:600 12px var(--display);letter-spacing:.17em;text-transform:uppercase;
  transition:background .3s var(--ease-out),border-color .3s,color .3s,transform .3s var(--ease-out),box-shadow .3s;
}
.rail-nav :is(button,a) svg{width:18px;height:18px;color:var(--gold-leaf)}
.rail-nav a.gallery-nav{padding:0 14px;margin:0;border:1px solid rgba(216,179,106,.2);color:#dccab0;font-size:12px}
.rail-nav a.gallery-nav:hover{border-color:rgba(243,217,154,.6);color:#fff2de}
.rail-nav i{font:normal 16px/1 var(--brush);color:rgba(216,179,106,.5);transition:color .3s}
.rail-nav :is(button,a):hover{border-color:rgba(243,217,154,.6);color:#fff2de;transform:translateX(3px)}
.rail-nav :is(button,a):hover i{color:var(--gold-hi)}
.rail-nav .is-hero{min-height:54px;font-size:13.5px;letter-spacing:.22em}
.rail-nav :is(.active,.is-hero){background:linear-gradient(95deg,#a52d20,#6f1a11 80%);border-color:#e3bd78;color:#fff3df;
  box-shadow:inset 0 1px 0 rgba(255,215,160,.3),inset 0 0 0 1px rgba(50,8,4,.5),0 0 22px rgba(184,54,42,.3)}
.rail-nav :is(.active,.is-hero) svg,.rail-nav :is(.active,.is-hero) i{color:var(--gold-hi)}
.rail-nav .is-hero:not(.active){filter:saturate(.85)}
.rail-nav .active{position:relative}
.rail-nav .active::before{content:'';position:absolute;left:-17px;top:50%;width:8px;height:8px;background:var(--gold-hi);transform:translateY(-50%) rotate(45deg);box-shadow:0 0 12px var(--gold-hi)}
.rail-foot{margin-top:auto;display:grid;gap:12px;padding-top:16px;border-top:1px solid rgba(216,179,106,.18)}
.rail-profile{display:flex;align-items:center;gap:11px}
.rail-profile img{width:42px;height:42px;border-radius:50%;object-fit:contain;padding:7px;background:radial-gradient(circle,#2c1c14,#140c0a);border:1px solid var(--gold-leaf)}
.rail-profile img.is-photo{object-fit:cover;padding:0}
.rail-profile strong{display:block;font:700 15px var(--heading);color:var(--washi)}
.rail-profile small{display:block;font-size:10.5px;color:var(--ash);letter-spacing:.04em}
.site-rail .connection{display:flex;font:600 9px var(--display);letter-spacing:.24em}

/* Unter 1100 px: dieselbe Leiste als Kopfzeile, waagerecht scrollbar. */
@media (max-width:1099px){
  .site-rail{position:sticky;top:0;inset:auto;width:auto;height:64px;flex-direction:row;align-items:center;gap:12px;padding:0 12px;overflow-x:auto;overflow-y:hidden;
    background:linear-gradient(180deg,rgba(22,13,10,.97),rgba(14,8,7,.97));border-right:0;border-bottom:1px solid var(--frame)}
  .site-rail::after,.rail-foot,.brand-word small,.rail-nav i,.rail-nav .active::before{display:none}
  .site-rail .brand{padding:0;border:0;flex:0 0 auto}
  .brand-mark{width:40px;height:40px;font-size:24px}
  .brand-word strong{font-size:14px}
  .rail-nav{flex-direction:row;gap:6px}
  .rail-nav :is(button,a){grid-template-columns:auto;min-height:40px;padding:0 12px;font-size:10.5px;letter-spacing:.12em;white-space:nowrap}
  .rail-nav :is(button,a) svg{display:none}
  .rail-nav .is-hero{min-height:40px;font-size:11px}
  /* QA 25.09.: nicht die ganze Leiste scrollt, sondern nur das Menü neben der Marke; rechte Kante blendet aus,
     damit sichtbar ist, dass weitere Punkte folgen. Gallery/About bleiben erreichbar (styles.css blendet sie <600 px aus). */
  .site-rail{overflow:hidden}
  .rail-nav{flex:1 1 auto;min-width:0;align-self:stretch;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;padding:0 48px 0 4px;scroll-padding-inline:8px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 48px),transparent)}
  .rail-nav::-webkit-scrollbar{display:none}
  .rail-nav :is(button,a){flex:0 0 auto;scroll-snap-align:start}
  .topnav.rail-nav a.gallery-nav{display:inline-flex;align-items:center;border-bottom:1px solid rgba(216,179,106,.2)}
}
@media (max-width:599px){
  .site-rail .brand-word{display:none}
  .site-rail{gap:8px;padding:0 0 0 10px}
}

/* --- Kalligrafie-Banner rechts (wie ref-14: 侍の誓い) --------------------------------------- */
.page-banner{display:none}
@media (min-width:1280px){
  .page-banner{display:flex;position:fixed;top:0;right:clamp(18px,2.2vw,40px);z-index:40;width:78px;padding:34px 0 40px;flex-direction:column;align-items:center;gap:16px;pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.22)),linear-gradient(180deg,#a02c1f,#7b1c13 70%,#5a130d);
    border:1px solid #d8b36a;border-top:0;box-shadow:0 24px 50px rgba(0,0,0,.5),inset 0 0 0 3px rgba(40,6,4,.28);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),50% 100%,0 calc(100% - 26px));animation:banner-drop .9s var(--ease-out) both}
  .page-banner::before{content:'';position:absolute;top:10px;left:7px;right:7px;height:1px;background:rgba(243,217,154,.55)}
  .banner-kanji{display:flex;flex-direction:column;align-items:center;font:46px/1.08 var(--brush);color:#fcebd2;text-shadow:0 2px 0 rgba(50,6,3,.45)}
  .page-banner small{writing-mode:vertical-rl;font:600 9px var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-hi);opacity:.8}
  body:not([data-screen="game"]) main.page{padding-right:max(6vw,150px)}
}
@keyframes banner-drop{from{transform:translateY(-40%);opacity:0}to{transform:none;opacity:1}}

/* --- Seiten und Seitenkopf mit Kartenfächer --------------------------------------------------- */
body:not([data-screen="game"]) main.page{max-width:1320px;padding-top:34px}
body:not([data-screen="game"]) .page-head{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,400px);grid-template-areas:"text fan" "cta fan";
  align-items:end;column-gap:36px;row-gap:22px;margin:6px 0 40px;padding:38px 40px 34px;min-height:300px;border-radius:8px;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(100deg,rgba(18,11,9,.96) 34%,rgba(18,11,9,.7) 62%,rgba(18,11,9,.35)),
    radial-gradient(ellipse 60% 90% at 82% 100%,rgba(184,54,42,.35),transparent 70%),
    url('/assets/ui/panorama/bg-sakura-dusk.webp') 70% 35%/cover;
  border:1px solid var(--frame);box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.5);
}
body:not([data-screen="game"]) .page-head::before{content:'';position:absolute;inset:7px;border:1px solid rgba(216,179,106,.16);border-radius:5px;pointer-events:none;z-index:1}
body:not([data-screen="game"]) .page-head>div:first-child{grid-area:text;position:relative;z-index:2}
body:not([data-screen="game"]) .page-head>:not(div:first-child):not(.head-fan){grid-area:cta;justify-self:start;position:relative;z-index:2}
body:not([data-screen="game"]) .page-head h1{font-size:clamp(40px,4.4vw,64px)!important;line-height:1.02;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
body:not([data-screen="game"]) .page-head p{color:#d6c7b1;font-size:14.5px;line-height:1.75;max-width:560px}
.head-fan{grid-area:fan;position:relative;align-self:stretch;min-height:240px;z-index:0}
.fan-card{position:absolute;left:50%;bottom:-54px;width:clamp(120px,11vw,158px);aspect-ratio:2/3;border-radius:9px;overflow:hidden;background:#140c0a;
  border:1px solid #e3bd78;box-shadow:0 20px 44px rgba(0,0,0,.65),0 0 0 3px rgba(20,12,10,.6);transform-origin:50% 130%;
  transform:translateX(-50%) translateX(calc(var(--i) * 70%)) translateY(calc(var(--a) * 22px)) rotate(calc(var(--i) * 10deg));
  animation:fan-rise .9s var(--ease-out) both;animation-delay:calc(var(--a) * 90ms + 120ms)}
.fan-card img{width:100%;height:100%;object-fit:cover}
.fan-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,8,7,.55),transparent 45%),linear-gradient(120deg,rgba(255,240,210,.18),transparent 40%)}
@keyframes fan-rise{from{opacity:0;transform:translateX(-50%) translateY(60px) rotate(0)}}
@media (max-width:900px){
  body:not([data-screen="game"]) .page-head{grid-template-columns:1fr;grid-template-areas:"text" "cta";min-height:0;padding:28px 22px}
  .head-fan{display:none}
}

/* --- Goldgerahmte Lackpaneele -------------------------------------------------------------- */
body:not([data-screen="game"]) :is(.panel,.clan-choice,.opponent-face,.catalog-item,.shop-item,.rule-item,.entry){
  --corner:linear-gradient(var(--gold-leaf),var(--gold-leaf));
}
body:not([data-screen="game"]) .panel{
  position:relative;border-radius:8px;padding:30px 32px;
  background:linear-gradient(180deg,rgba(34,21,16,.9),rgba(17,10,8,.94));border:1px solid var(--frame);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(243,217,154,.08),0 20px 50px rgba(0,0,0,.45);
}
body:not([data-screen="game"]) .panel::before,
body:not([data-screen="game"]) .clan-choice::before,
body:not([data-screen="game"]) .shop-item::before{
  content:'';position:absolute;inset:6px;pointer-events:none;opacity:.75;border-radius:4px;
  background:
    var(--corner) top left/16px 1.5px no-repeat,var(--corner) top left/1.5px 16px no-repeat,
    var(--corner) top right/16px 1.5px no-repeat,var(--corner) top right/1.5px 16px no-repeat,
    var(--corner) bottom left/16px 1.5px no-repeat,var(--corner) bottom left/1.5px 16px no-repeat,
    var(--corner) bottom right/16px 1.5px no-repeat,var(--corner) bottom right/1.5px 16px no-repeat;
}
body:not([data-screen="game"]) .panel p{color:#cbbba3}
body:not([data-screen="game"]) .panel h3{font-size:26px}
body:not([data-screen="game"]) .input{background:rgba(10,6,5,.8);border:1px solid rgba(216,179,106,.4);border-radius:4px}
body:not([data-screen="game"]) .input:focus{outline:none;border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(216,179,106,.18)}

/* --- Filterleiste als Lackreiter ----------------------------------------------------------- */
body:not([data-screen="game"]) .filterbar{gap:8px;padding:8px;border:1px solid rgba(216,179,106,.22);border-radius:6px;background:rgba(14,8,7,.75);width:fit-content;max-width:100%}
body:not([data-screen="game"]) .filterbar button{border:1px solid transparent;border-radius:4px;min-height:40px;padding:8px 15px;font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#cdbb9f;transition:background .25s,color .25s,border-color .25s}
body:not([data-screen="game"]) .filterbar button:hover{color:var(--gold-hi);border-color:rgba(216,179,106,.35)}
body:not([data-screen="game"]) .filterbar button.active{background:linear-gradient(180deg,#a52d20,#6f1a11);border-color:#e3bd78;color:#fff3df}

/* --- Kartenarchiv ---------------------------------------------------------------------------- */
body:not([data-screen="game"]) .catalog{gap:20px}
body:not([data-screen="game"]) .catalog-item{position:relative;border-radius:8px;padding:12px;background:linear-gradient(180deg,rgba(32,20,15,.9),rgba(16,10,8,.94));border:1px solid rgba(216,179,106,.2);
  transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s var(--ease-out)}
body:not([data-screen="game"]) .catalog-item:hover{transform:translateY(-4px);border-color:rgba(243,217,154,.6);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 24px rgba(216,179,106,.14)}
body:not([data-screen="game"]) .catalog-item .card{border-radius:7px;border-color:rgba(216,179,106,.45)}
body:not([data-screen="game"]) .catalog-item>p{color:#c2b198;font-size:12.5px}
body:not([data-screen="game"]) .rarity-legend span{font-family:var(--display);letter-spacing:.08em}

/* --- Decks als Bildkacheln (ref-15) ---------------------------------------------------------- */
.deck-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:22px!important}
body:not([data-screen="game"]) .deck-tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;padding:20px;overflow:hidden;isolation:isolate;background:#120b09;border:1px solid rgba(216,179,106,.35)}
.deck-art{position:absolute;inset:0;z-index:-2}
.deck-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.deck-tile:hover .deck-art img{transform:scale(1.05)}
.deck-tile::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0f0806 12%,rgba(15,8,6,.95) 44%,rgba(15,8,6,.78) 60%,rgba(15,8,6,.35) 76%,rgba(15,8,6,.08) 92%)}
.deck-crest{position:absolute;top:16px;left:16px;width:36px;height:42px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.deck-tile h3{font-size:24px;margin-bottom:6px;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
.deck-tile>p{color:#d4c3a9!important;font-size:12.5px;padding:0 0 14px!important;min-height:0!important}
.deck-mix{display:grid;gap:5px;margin:-4px 0 14px;padding:0}
.deck-mix>div{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:8px}
.deck-mix dt{font:600 11px var(--display,serif);letter-spacing:.08em;text-transform:uppercase;color:#d6c4a2;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.deck-mix dd{margin:0;display:grid;grid-template-columns:1fr 20px;align-items:center;gap:6px}
.deck-mix i{display:block;height:5px;border-radius:3px;background:rgba(216,179,106,.14);box-shadow:inset 0 0 0 1px rgba(216,179,106,.2);position:relative;overflow:hidden}
.deck-mix i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,#8a6526,#f0cf86 70%,#fff0c8);box-shadow:0 0 8px rgba(240,200,120,.45)}
.deck-mix b{font:700 11px var(--display,serif);color:#f0dcae;text-align:right}
body:not([data-screen="game"]) .deck-tile.is-active{border-color:#f0cf86;box-shadow:0 0 0 1px #f0cf86,0 0 34px rgba(240,190,100,.22)}
.deck-tile.is-active::before{content:'ACTIVE';position:absolute;top:18px;right:-34px;transform:rotate(45deg);width:130px;text-align:center;padding:5px 0;font:700 9px var(--display);letter-spacing:.3em;color:#fff3df;background:linear-gradient(180deg,#b8362a,#7b1c13);border-block:1px solid #e3bd78;z-index:2}

/* Deck-Editor: Kartenbild je Zeile, Karten im Deck leuchten rot. */
.deck-pool{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:14px!important}
body:not([data-screen="game"]) .deck-row{display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:16px;align-content:start;padding:12px}
.deck-row>:not(.row-art){grid-column:2}
.row-art{grid-column:1;grid-row:1 / span 4;position:relative;width:70px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;border:1px solid rgba(216,179,106,.5);background:#140c0a}
.row-art img{width:100%;height:100%;object-fit:cover}
.row-cost{position:absolute;top:3px;left:6px;font:800 17px var(--heading);color:#fff2de;text-shadow:0 1px 4px #000}
.deck-row h3{font-size:17px!important;margin-bottom:4px}
.deck-row p{margin:0 0 4px!important;padding:0!important;min-height:0!important;font-size:12px!important}
.deck-row .button-row{gap:10px}
body:not([data-screen="game"]) .deck-row.in-deck{border-color:rgba(240,190,100,.75);background:linear-gradient(95deg,rgba(143,36,25,.4),rgba(20,12,9,.94) 60%)}

/* --- Häuserwahl und Gegner (ref-14) ---------------------------------------------------------- */
body:not([data-screen="game"]) .clan-choice{overflow:hidden;isolation:isolate;border-radius:8px;min-height:180px;background:linear-gradient(100deg,rgba(26,16,12,.96) 45%,rgba(26,16,12,.55));border:1px solid rgba(216,179,106,.26);
  transition:border-color .3s,box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.clan-art{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 55%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%)}
.clan-art img{width:100%;height:100%;object-fit:cover;opacity:.7;filter:saturate(.9);transition:opacity .4s,transform 1s var(--ease-out)}
body:not([data-screen="game"]) .clan-choice:hover{transform:translateY(-2px);border-color:rgba(243,217,154,.55)}
body:not([data-screen="game"]) .clan-choice:hover .clan-art img{opacity:.95;transform:scale(1.04)}
body:not([data-screen="game"]) .clan-choice.selected{border-color:#f0cf86;background:linear-gradient(100deg,rgba(90,19,13,.9) 40%,rgba(40,14,10,.5));box-shadow:0 0 0 1px #f0cf86,0 0 30px rgba(184,54,42,.35)}
body:not([data-screen="game"]) .clan-choice.selected .clan-art img{opacity:1}
body:not([data-screen="game"]) .clan-choice strong{font:700 27px var(--heading)}
body:not([data-screen="game"]) .clan-choice p{color:#d0bfa6;position:relative}
body:not([data-screen="game"]) .clan-choice img:not(.clan-art img){filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
body:not([data-screen="game"]) :is(.opponent-face,.level-choice){border-radius:6px;border-color:rgba(216,179,106,.24);background:rgba(20,12,10,.7)}
body:not([data-screen="game"]) :is(.opponent-face,.level-choice).selected{border-color:#f0cf86;background:linear-gradient(180deg,rgba(143,36,25,.45),rgba(30,14,10,.8));color:#fff3df}
body:not([data-screen="game"]) .opponent-face .opponent-portrait{width:56px;height:56px;border-radius:50%;border:1px solid var(--gold-leaf)}
body:not([data-screen="game"]) .level-choice{font:600 11px var(--display);letter-spacing:.12em;text-transform:uppercase}

/* --- Shop (ref-20): Bündel mit Kartenfächer ------------------------------------------------ */
body:not([data-screen="game"]) .shop-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
body:not([data-screen="game"]) .shop-item{position:relative;overflow:hidden;padding:208px 20px 20px;border-radius:8px;gap:8px;
  background:linear-gradient(180deg,rgba(40,24,17,.95),rgba(16,10,8,.96));border:1px solid rgba(216,179,106,.4);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
body:not([data-screen="game"]) .shop-item:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 26px rgba(216,179,106,.18)}
.shop-art{position:absolute;top:0;left:0;right:0;height:196px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:18px;
  background:radial-gradient(ellipse 70% 80% at 50% 100%,rgba(240,190,100,.3),transparent 70%),linear-gradient(180deg,rgba(90,19,13,.55),transparent);border-bottom:1px solid rgba(216,179,106,.25)}
.shop-art span{width:96px;aspect-ratio:2/3;border-radius:7px;overflow:hidden;border:1px solid #e3bd78;margin:0 -16px;box-shadow:0 12px 26px rgba(0,0,0,.6);transform:rotate(calc((var(--k) - 1) * 9deg)) translateY(calc(var(--k) * 2px))}
.shop-art span:only-child{transform:none}
.shop-art span:first-child:nth-last-child(2){transform:rotate(-7deg)}
.shop-art span:nth-child(2):last-child{transform:rotate(7deg)}
.shop-art img{width:100%;height:100%;object-fit:cover}
body:not([data-screen="game"]) .shop-item h4{font:700 20px var(--heading)}
body:not([data-screen="game"]) .shop-item strong{font:800 30px var(--heading);color:var(--gold-hi)}

/* --- Regeln mit Bild je Grundsatz ------------------------------------------------------------- */
body:not([data-screen="game"]) .rules-list{gap:14px;background:none;border:0}
body:not([data-screen="game"]) .rule-item{position:relative;grid-template-columns:56px minmax(0,1fr) 104px;align-items:center;gap:26px;padding:22px 26px;border-radius:8px;overflow:hidden;
  background:linear-gradient(95deg,rgba(32,20,15,.94),rgba(18,11,9,.9) 70%,rgba(18,11,9,.6));border:1px solid rgba(216,179,106,.24)}
body:not([data-screen="game"]) .rule-item>span{grid-column:1;font:800 34px var(--heading);color:var(--gold-leaf);text-shadow:0 0 18px rgba(216,179,106,.3)}
body:not([data-screen="game"]) .rule-item>div{grid-column:2;grid-row:1}
.rule-art{grid-column:3;grid-row:1;width:104px;height:120px;border-radius:6px;overflow:hidden;border:1px solid rgba(216,179,106,.45);transform:rotate(3deg);box-shadow:0 12px 26px rgba(0,0,0,.5)}
.rule-art img{width:100%;height:100%;object-fit:cover}
.rule-item:nth-child(even) .rule-art{transform:rotate(-3deg)}
@media (max-width:700px){ body:not([data-screen="game"]) .rule-item{grid-template-columns:40px 1fr}.rule-art{display:none} }

/* --- Rangliste --------------------------------------------------------------------------------- */
body:not([data-screen="game"]) .ladder-list li,body:not([data-screen="game"]) .ladder-history li{border-radius:6px;border-color:rgba(216,179,106,.22);background:rgba(20,12,10,.7)}
body:not([data-screen="game"]) .ladder-list b{font:800 20px var(--heading);color:var(--gold-leaf);opacity:1}
body:not([data-screen="game"]) .ladder-list li.is-you{border-color:#f0cf86;background:linear-gradient(95deg,rgba(143,36,25,.45),rgba(20,12,10,.8))}

/* --- Startseite (ref-14) ---------------------------------------------------------------------- */
body:not([data-screen="game"]) .home{min-height:100vh}
body:not([data-screen="game"]) .home-backdrop{opacity:.5;filter:saturate(.95) contrast(1.05)}
body:not([data-screen="game"]) .home-backdrop::after{background:linear-gradient(90deg,#0e0807 4%,rgba(14,8,7,.9) 34%,rgba(14,8,7,.25) 80%),linear-gradient(0deg,#0e0807 4%,transparent 50%),radial-gradient(ellipse at 75% 30%,rgba(184,54,42,.25),transparent 60%)}
body:not([data-screen="game"]) .home-content{padding-right:max(6vw,130px)}
body:not([data-screen="game"]) .intro h1{font-size:clamp(52px,6vw,96px);line-height:.98;letter-spacing:-.025em;text-shadow:0 6px 40px rgba(0,0,0,.6)}
body:not([data-screen="game"]) .intro h1 em{font-style:normal;color:var(--gold-hi)}
body:not([data-screen="game"]) .intro .lead{color:#d9cab3;font-size:15px;max-width:440px}
body:not([data-screen="game"]) .hero-card{border:1px solid #e3bd78;border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 4px rgba(20,12,10,.7),0 0 50px rgba(184,54,42,.25)}
body:not([data-screen="game"]) .hero-caption{font-family:var(--heading)!important;font-weight:700}
body:not([data-screen="game"]) .hero-note{font-family:var(--display);letter-spacing:.3em;color:var(--gold-leaf)}
body:not([data-screen="game"]) .home-bottom{border:0;gap:16px;margin-top:24px}
@media (min-width:1100px){ body:not([data-screen="game"]) .home-bottom{grid-template-columns:repeat(5,minmax(0,1fr))} }
body:not([data-screen="game"]) .entry{position:relative;overflow:hidden;isolation:isolate;min-height:150px;align-items:flex-end;padding:18px;border:1px solid rgba(216,179,106,.3)!important;border-radius:8px;
  background:#120b09;transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s var(--ease-out)}
.entry-art{position:absolute;inset:0;z-index:-2}
.entry-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%!important;opacity:.62;transition:opacity .4s,transform 1s var(--ease-out)}
body:not([data-screen="game"]) .entry::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0f0806 12%,rgba(15,8,6,.55) 60%,rgba(15,8,6,.15))}
body:not([data-screen="game"]) .entry:hover{transform:translateY(-4px);border-color:rgba(243,217,154,.7)!important;box-shadow:0 20px 40px rgba(0,0,0,.5)}
body:not([data-screen="game"]) .entry:hover .entry-art img{opacity:.85;transform:scale(1.05)}
body:not([data-screen="game"]) .entry .entry-icon{display:none}
body:not([data-screen="game"]) .entry strong{font:700 18px var(--heading)}
body:not([data-screen="game"]) .entry span p{color:#d0bfa6}
body:not([data-screen="game"]) .entry>svg{color:var(--gold-hi);align-self:flex-end}
body:not([data-screen="game"]) .footer{font-family:var(--display);letter-spacing:.2em;color:#8f7d66}

/* --- Kampagne ------------------------------------------------------------------------------ */
body:not([data-screen="game"]) .campaign-art{border-radius:8px;overflow:hidden;border:1px solid rgba(216,179,106,.45)}

/* Bewegung nur, wenn gewünscht. */
@media (prefers-reduced-motion:reduce){
  .page-banner,.fan-card{animation:none}
  body:not([data-screen="game"]) :is(.catalog-item,.entry,.deck-tile,.clan-choice,.shop-item):hover{transform:none}
}
.deck-row .small-button{font:700 19px/1 var(--heading)!important;letter-spacing:0!important;min-width:42px;padding:6px 0!important}
.deck-row .button-row strong{font:800 20px var(--heading);min-width:2ch;text-align:center;color:var(--gold-hi)}

/* --- Karten ohne Illustration (Techniken, Ausrüstung, Orte, Anführer, 26 Krieger) --------------
   Bis die Bilder kommen (Codex, Kartenbereich): gestaltete Lackfläche mit goldenem Hauswappen und
   dem Kanji der Kartenart statt eines nackten Wappens. Nie das Bild einer anderen Karte. Gilt auch im Spiel. */
.card .card-image:has(> img.is-crest){container-type:inline-size;
  background:
    radial-gradient(ellipse 85% 60% at 50% 36%,rgba(184,54,42,.42),transparent 70%),
    repeating-radial-gradient(circle at 50% 118%,rgba(216,179,106,.08) 0 1.5px,transparent 1.5px 11px),
    linear-gradient(180deg,#2a1510,#120a08 80%)}
.card .card-image>img.is-crest{filter:sepia(1) saturate(2.4) hue-rotate(-10deg) brightness(1.02) drop-shadow(0 0 10px rgba(243,217,154,.4));opacity:.92}
.card .card-image:has(> img.is-crest)::after{position:absolute;right:7%;top:5%;font:34cqw/1 var(--brush);color:rgba(243,217,154,.16);pointer-events:none}
.card[data-kind="Technique"] .card-image:has(> img.is-crest)::after{content:'技'}
.card[data-kind="Equipment"] .card-image:has(> img.is-crest)::after{content:'具'}
.card[data-kind="Location"] .card-image:has(> img.is-crest)::after{content:'地'}
.card[data-kind="Warrior"] .card-image:has(> img.is-crest)::after{content:'武'}
.card[data-kind="Leader"] .card-image:has(> img.is-crest)::after{content:'将'}

/* --- Endbildschirm-Bilanz (Stil ref-11): Rang-Medaillon, Aufgaben, Kampfbilanz-Kacheln -------------
   Gilt im Spiel (finished-banner liegt im game()-Render); Grundaufbau des Vollbilds steht in styles.css. */
.finish-tally{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:26px;width:min(860px,92vw);margin:22px auto 0;padding:20px 28px;text-align:left;
  background:linear-gradient(180deg,rgba(34,20,15,.94),rgba(16,9,7,.96));border:1px solid rgba(216,179,106,.5);border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 4px rgba(0,0,0,.35)}
.finish-grade{position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;align-content:center;
  background:radial-gradient(circle at 40% 32%,#3a2215,#140b08 70%);border:2px solid #e3bd78;box-shadow:0 0 0 5px rgba(20,12,10,.8),0 0 0 6px rgba(216,179,106,.45),0 0 34px rgba(243,190,100,.35)}
.finish-grade b{font:64px/1 var(--brush);color:#f6d58e;text-shadow:0 0 18px rgba(255,190,90,.6),0 3px 0 #5a2a08}
.finish-grade small{font:600 9px var(--display);letter-spacing:.3em;text-transform:uppercase;color:#d8b36a;margin-top:2px}
.finish-grade.is-none b{color:#9d8a74;text-shadow:none}
.finish-goals{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.finish-goals li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:4px;background:rgba(255,255,255,.03);border:1px solid rgba(216,179,106,.16);font:600 14px var(--heading);color:#b9a78f}
.finish-goals li i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;color:#6d5d4c;border:1px solid rgba(216,179,106,.3)}
.finish-goals li.is-done{color:#f2e7d3}
.finish-goals li.is-done i{color:#2a150b;background:radial-gradient(circle at 35% 30%,#fbe6ad,#d8b36a 60%,#9b7536);border-color:#fff0c8}
body.stage-on .game .finished-banner .finish-quote{font:italic 600 16px/1.55 var(--heading);color:#e0cfb4;margin:0;padding-left:20px;border-left:1px solid rgba(216,179,106,.3)}
body.stage-on .game .finished-banner .finish-rewards-label,.finish-rewards-label{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 10px;font:600 12px var(--display);letter-spacing:.34em;text-transform:uppercase;color:#f3d99a}
.finish-rewards-label::before,.finish-rewards-label::after{content:'';width:80px;height:1px;background:linear-gradient(90deg,transparent,#d8b36a)}
.finish-rewards-label::after{transform:scaleX(-1)}
.finish-rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:min(860px,92vw);margin:0 auto}
.finish-tile{width:148px;padding:16px 10px 14px;display:grid;justify-items:center;gap:6px;border-radius:6px;
  background:linear-gradient(180deg,rgba(40,24,17,.95),rgba(16,9,7,.96));border:1px solid rgba(216,179,106,.45);box-shadow:0 12px 28px rgba(0,0,0,.5);
  animation:finish-tile-in .7s var(--ease-out) both}
.finish-tile:nth-child(2){animation-delay:.08s}.finish-tile:nth-child(3){animation-delay:.16s}.finish-tile:nth-child(4){animation-delay:.24s}.finish-tile:nth-child(5){animation-delay:.32s}
.finish-tile span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:30px/1 var(--brush);color:#2a150b;
  background:radial-gradient(circle at 35% 30%,#fbe6ad,#d8b36a 58%,#8b6a34);border:1px solid #fff0c8;box-shadow:0 0 20px rgba(243,190,100,.35)}
.finish-tile strong{font:800 26px/1.1 var(--heading);color:#fff2de}
.finish-tile small{font:600 9.5px var(--display);letter-spacing:.18em;text-transform:uppercase;color:#cdb691}
.is-loss .finish-tile span{background:radial-gradient(circle at 35% 30%,#f2b3a6,#b8362a 60%,#5a130d);color:#fff0e6;border-color:#f3c1b5}
@keyframes finish-tile-in{from{opacity:0;transform:translateY(18px)}}
.finish-hero{display:none}
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game .finished-banner .finish-hero{display:block;position:absolute;left:0;bottom:0;width:min(34vw,560px);height:88vh;z-index:-1;pointer-events:none;opacity:.55;
    mask-image:linear-gradient(90deg,#000 45%,transparent),linear-gradient(0deg,transparent,#000 25%,#000 82%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent),linear-gradient(0deg,transparent,#000 25%,#000 82%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
  body.stage-on .game .finished-banner .finish-hero img{width:100%;height:100%;object-fit:cover}
  body.stage-on .game .finished-banner{isolation:isolate}
}
@media (max-width:700px){ .finish-tally{grid-template-columns:auto 1fr}.finish-quote{grid-column:1 / -1;padding-left:0!important;border-left:0!important} }
/* Handy (Notfall-Loop 27.09.): Endbildschirm lag im Seitenfluss unter dem HUD — Knöpfe erst nach Scrollen, „Duel ended“-Pult
   über der Bilanz, Belohnungen 5 px breiter als der Schirm. Jetzt Vollbild-Ebene wie am Desktop, eigenes Scrollen, kompakt. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on .game .finished-banner{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;margin:0;border:0;border-radius:0;
    padding:max(66px,env(safe-area-inset-top)) 14px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:safe center;text-align:center;
    background:radial-gradient(ellipse at 50% 30%,rgba(30,15,11,.97),rgba(8,5,4,.995) 72%)}
  body.stage-on .game .finished-banner > *{flex:0 0 auto;max-width:100%}
  /* Spielmenü über der Endschirm-Ebene erreichbar (Wiedergabe-Probe 03.10.: Knopf lag unter der Ebene); oben 66 px Platz dafür */
  body.stage-on[data-screen="game"] .topbar.game-head{z-index:61}
  body.stage-on .game .finished-banner .finish-title{font-size:30px;letter-spacing:.1em;color:#e8c070;line-height:1}
  body.stage-on .game .finished-banner .finish-title b{display:block;font:italic 700 42px/1.05 Georgia,serif;letter-spacing:.02em;margin-top:4px}
  body.stage-on .game .finished-banner.is-loss .finish-title{color:#c83a2e}
  body.stage-on .game .finished-banner h2{font-size:22px;margin:6px 0 2px}
  body.stage-on .game .finished-banner p{margin:4px 0;font-size:14px}
  body.stage-on .game .finished-banner .finish-tally{width:100%;margin-top:12px;padding:12px;gap:12px}
  body.stage-on .game .finished-banner .finish-grade{width:84px;height:84px}
  body.stage-on .game .finished-banner .finish-grade b{font-size:44px}
  body.stage-on .game .finished-banner .finish-goals{gap:6px}
  body.stage-on .game .finished-banner .finish-goals li{padding:6px 8px;gap:8px;font-size:13px}
  body.stage-on .game .finished-banner .finish-goals li i{width:20px;height:20px}
  body.stage-on .game .finished-banner .finish-quote{font-size:14px;line-height:1.4}
  body.stage-on .game .finished-banner .finish-rewards-label{margin:14px 0 8px}
  body.stage-on .game .finished-banner .finish-rewards{width:100%;gap:8px;flex-wrap:nowrap}
  body.stage-on .game .finished-banner .finish-tile{flex:1 1 0;width:auto;min-width:0;padding:10px 4px;gap:4px}
  body.stage-on .game .finished-banner .finish-tile span{width:38px;height:38px;font-size:21px}
  body.stage-on .game .finished-banner .finish-tile strong{font-size:19px}
  body.stage-on .game .finished-banner .finish-tile small{font-size:8px;letter-spacing:.1em}
  body.stage-on .game .finished-banner .button-row{width:100%;margin-top:16px;gap:10px;justify-content:center;flex-wrap:nowrap}
  body.stage-on .game .finished-banner .button-row > *{flex:1 1 0;min-width:0;min-height:48px}
}
@media (prefers-reduced-motion:reduce){ .finish-tile{animation:none} }

/* --- Warriors-Seite (champion-view.js) an die Menü-Kulisse angleichen --------------------------- */
body:not([data-screen="game"]) .warriors-page{background:none;max-width:1320px}
body:not([data-screen="game"]) .warriors-page::before{display:none}
body:not([data-screen="game"]) .warriors-page .page-head h1{background:none;-webkit-text-fill-color:currentColor;color:var(--washi);font:700 clamp(40px,4.4vw,64px)/1.02 var(--heading)}
.warrior-thumb-art:has(> img.is-crest){container-type:inline-size;position:relative;
  background:radial-gradient(ellipse 85% 60% at 50% 40%,rgba(184,54,42,.42),transparent 70%),repeating-radial-gradient(circle at 50% 118%,rgba(216,179,106,.08) 0 1.5px,transparent 1.5px 11px),linear-gradient(180deg,#2a1510,#120a08 80%)}
.warrior-thumb-art>img.is-crest{filter:sepia(1) saturate(2.4) hue-rotate(-10deg) brightness(1.02) drop-shadow(0 0 10px rgba(243,217,154,.4))}
.warrior-thumb-art:has(> img.is-crest)::after{content:'武';position:absolute;right:7%;top:5%;font:34cqw/1 var(--brush);color:rgba(243,217,154,.16);pointer-events:none}

/* --- Startbildschirm (index.html .boot), bevor app.js rendert ---------------------------------- */
.boot{background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(143,36,25,.35),transparent 70%),linear-gradient(rgba(14,8,7,.75),#0e0807 85%),url('/assets/ui/panorama/bg-sakura-dusk.webp') center/cover}
.boot .seal{width:88px;height:88px;border-radius:50%;transform:none;font:52px/1 var(--brush);color:#fcebd2;background:radial-gradient(circle at 34% 28%,#cc4633,#7d1b12 72%);
  border:1.5px solid var(--gold-leaf);box-shadow:inset 0 0 0 4px rgba(40,6,4,.4),0 0 40px rgba(184,54,42,.5);animation:boot-breathe 2.4s ease-in-out infinite}
.boot p{font:700 34px var(--display)!important;letter-spacing:.14em;color:var(--washi)}
.boot span{font:600 11px var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-leaf)!important}
@keyframes boot-breathe{50%{box-shadow:inset 0 0 0 4px rgba(40,6,4,.4),0 0 64px rgba(216,120,70,.65)}}
@media (prefers-reduced-motion:reduce){.boot .seal{animation:none}}

/* --- Dialoge und Hinweise im Lack-/Gold-Stil (gilt überall, auch im Spiel) ---------------------- */
dialog{background:linear-gradient(180deg,rgba(34,20,15,.99),rgba(16,9,7,.99))!important;color:var(--washi)!important;border:1px solid #b38b45!important;border-radius:10px;
  box-shadow:0 0 0 5px rgba(20,12,10,.9),0 0 0 6px rgba(216,179,106,.35),0 40px 100px rgba(0,0,0,.8)!important;padding:34px 36px!important}
dialog::backdrop{background:radial-gradient(ellipse at 50% 45%,rgba(60,14,10,.55),rgba(5,3,3,.88))!important;backdrop-filter:blur(3px)}
dialog h2{font:700 30px/1.15 var(--heading)!important;color:#f6e9d2}
dialog p{color:#cbbba3!important}
dialog .primary{font:600 12.5px/1 var(--display)!important;letter-spacing:.15em;text-transform:uppercase;border-radius:4px;background:linear-gradient(180deg,#c0402f,#932619 50%,#6c1810)!important;border:1px solid #e3bd78!important;color:#fff2de!important}
dialog .secondary{font:600 12.5px/1 var(--display)!important;letter-spacing:.15em;text-transform:uppercase;border-radius:4px;background:linear-gradient(180deg,rgba(46,29,21,.95),rgba(24,15,11,.95))!important;border:1px solid rgba(216,179,106,.55)!important;color:var(--gold-hi)!important}
.notice{background:linear-gradient(180deg,#2c1b13,#170e0a)!important;color:var(--washi)!important;border:1px solid #d8b36a!important;border-radius:6px;
  font:600 14px var(--heading)!important;box-shadow:0 0 0 4px rgba(20,12,10,.85),0 16px 40px rgba(0,0,0,.6)!important}

/* --- Lobby (privater Raum wartet): Raumcode als Goldplakette ------------------------------------ */
body[data-screen="lobby"] .play-rail{display:none!important}
body[data-screen="lobby"] .lobby{position:relative;max-width:720px;margin:60px auto;padding:48px 44px 40px;border-radius:10px;
  background:linear-gradient(180deg,rgba(34,21,16,.94),rgba(16,10,8,.96));border:1px solid var(--frame);box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.5)}
body[data-screen="lobby"] .lobby>img{width:84px;height:84px;padding:14px;border-radius:50%;border:1px solid var(--gold-leaf);background:radial-gradient(circle,#3a2215,#140b08 70%);
  box-shadow:0 0 30px rgba(216,179,106,.25);filter:sepia(1) saturate(2.2) hue-rotate(-10deg);opacity:1}
body[data-screen="lobby"] .lobby h2{font:700 clamp(32px,3.4vw,48px)/1.1 var(--heading)}
body[data-screen="lobby"] .room-code{position:relative;margin:30px auto 18px;padding:22px 26px;border-radius:6px;font:700 clamp(20px,2vw,28px)/1.3 var(--heading);letter-spacing:.14em;color:#2a150b;
  background:linear-gradient(180deg,#f8e3a8,#dcb66c 55%,#b08644);border:1px solid #fff0c8;box-shadow:0 0 0 4px rgba(20,12,10,.85),0 0 0 5px rgba(216,179,106,.5),0 16px 40px rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(255,245,215,.6)}
body[data-screen="lobby"] .waiting-line{font:600 11px var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-leaf)}
body[data-screen="lobby"] .waiting-line i{background:var(--red-hi);box-shadow:0 0 10px var(--red-hi)}
body[data-screen="lobby"] .lobby .eyebrow{justify-content:center}
/* Kurze Seiten: Hintergrund bis zum Fensterrand (sonst schimmert html-Grund #090b0e unten durch). */
body:not([data-screen="game"]){min-height:100vh}
html:has(body:not([data-screen="game"])){background:#0e0807}

/* --- Startkarten-Bühne (Mulligan) ------------------------------------------------------------- */
.mulligan-stage{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(40,14,10,.55),rgba(8,5,4,.9) 75%);animation:mull-in .45s ease-out both}
.mulligan-stage.is-waiting{inset:auto 0 0 0;padding:18px;background:linear-gradient(0deg,rgba(8,5,4,.92),transparent)}
.mulligan-stage .eyebrow{justify-content:center;font:600 11px var(--display);letter-spacing:.34em;color:var(--gold-leaf)}
.mulligan-stage h2{margin:0;font:700 clamp(34px,4vw,58px)/1.05 var(--heading);color:#f6e9d2;text-shadow:0 4px 30px rgba(0,0,0,.7)}
.mulligan-stage h2 span{font:clamp(26px,3vw,42px) var(--brush);color:var(--gold-leaf);margin-left:14px}
/* A6 (Abnahme 22.10.): bis das Kartenbild da ist, zeigt die Startkarte einen Kartenrücken statt eines leeren Rahmens. */
.mulligan-stage .mull-cards img{background:#140d09 url(/assets/crests/unbound.svg) center/46% no-repeat;box-shadow:inset 0 0 0 3px #b8913f}
.mulligan-stage .mull-hint{margin:0 0 10px;color:#d8c8ae;font-size:14.5px}
.mull-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,26px);margin:10px 0 18px}
.mull-cards .card{flex:0 0 auto!important;width:clamp(150px,12.5vw,220px)!important;height:auto!important;aspect-ratio:2/3;border-radius:10px!important;border:1px solid #c9a35c!important;
  box-shadow:0 0 0 3px rgba(20,12,10,.85),0 24px 50px rgba(0,0,0,.6);transition:transform .35s var(--ease-out),filter .3s,box-shadow .35s;animation:mull-card .6s var(--ease-out) both}
.mull-cards .card:nth-child(2){animation-delay:.07s}.mull-cards .card:nth-child(3){animation-delay:.14s}.mull-cards .card:nth-child(4){animation-delay:.21s}.mull-cards .card:nth-child(5){animation-delay:.28s}
.mull-cards .card:hover{transform:translateY(-10px);box-shadow:0 0 0 3px rgba(20,12,10,.85),0 0 30px rgba(243,217,154,.3),0 30px 60px rgba(0,0,0,.6)}
.mull-cards .card .card-rules{display:block;font-size:11px;line-height:1.45;color:#d9cbb3;margin:0 0 6px}
/* 01.10.: lange Kriegertexte schoben sich über Name + Bild (Karte 160 px breit) → Zeilen begrenzen. */
.mull-cards .card .card-rules{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.mull-cards .card[data-kind="Warrior"] .card-rules{-webkit-line-clamp:4}
.mull-cards .card .card-name{font-size:clamp(15px,1.1vw,19px)!important}
.mull-cards .card.is-mulligan{transform:translateY(14px) rotate(-1.5deg);filter:saturate(.45) brightness(.62);border-color:#c0402f!important}
.mull-cards .card.is-mulligan::after{content:'REPLACE 替'!important;position:absolute;top:40%;left:-4%;right:-4%;z-index:4;padding:9px 0!important;text-align:center;transform:rotate(-8deg);
  font:700 13px var(--display)!important;letter-spacing:.3em!important;color:#fff3df;background:linear-gradient(180deg,#b8362a,#7b1c13)!important;border-block:1px solid #e3bd78!important;filter:none}
.game:has(.mulligan-stage:not(.is-waiting)) :is(.hand,.hand-label,.selection-panel,.action-strip){visibility:hidden}
@keyframes mull-in{from{opacity:0}}
@keyframes mull-card{from{opacity:0;transform:translateY(40px) rotateX(20deg)}}
@media (prefers-reduced-motion:reduce){.mulligan-stage,.mull-cards .card{animation:none}}
/* Deutsches „AUSTAUSCH“ aus styles.css auch in der normalen Hand ersetzen. */
.card.is-mulligan::after{content:'REPLACE'}
body .game .mulligan-stage{position:fixed!important;inset:0!important;z-index:45!important;width:auto!important;height:auto!important;max-width:none!important;margin:0!important;transform:none!important;border:0!important;border-radius:0!important}
body .game .mulligan-stage.is-waiting{inset:auto 0 0 0!important}
body .game .mulligan-stage .primary{min-width:260px;min-height:52px;padding:0 28px;border-radius:4px;border:1px solid #e3bd78;color:#fff2de;font:600 13px var(--display);letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(180deg,#c0402f,#932619 50%,#6c1810);box-shadow:inset 0 1px 0 rgba(255,222,170,.4),0 10px 28px rgba(110,20,10,.45)}
body .game .mulligan-stage .primary:hover:not(:disabled){filter:brightness(1.1)}

/* --- Story: Kapitel als goldener Pfad, Prüfungen als Stationen --------------------------------- */
body:not([data-screen="game"]) .campaign-chapter h2{display:flex;align-items:center;gap:16px;margin:46px 0 8px;font:700 clamp(28px,2.6vw,40px) var(--heading)}
body:not([data-screen="game"]) .campaign-chapter h2::before{content:'';flex:0 0 auto;width:12px;height:12px;background:var(--gold-leaf);transform:rotate(45deg);box-shadow:0 0 14px rgba(243,217,154,.6)}
body:not([data-screen="game"]) .campaign-chapter h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(216,179,106,.6),transparent)}
body:not([data-screen="game"]) .campaign-list{position:relative;padding-left:46px;gap:22px}
body:not([data-screen="game"]) .campaign-list::before{content:'';position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--gold-leaf),rgba(216,179,106,.15))}
body:not([data-screen="game"]) .campaign-encounter{position:relative;grid-template-columns:minmax(150px,230px) 1fr;gap:30px;padding:18px 26px 18px 18px}
body:not([data-screen="game"]) .campaign-encounter::after{content:'';position:absolute;left:-36px;top:50%;width:16px;height:16px;border-radius:50%;translate:0 -50%;
  background:radial-gradient(circle at 35% 30%,#fbe6ad,#d8b36a 60%,#8b6a34);border:2px solid #140c0a;box-shadow:0 0 0 1px var(--gold-leaf),0 0 16px rgba(243,217,154,.5)}
body:not([data-screen="game"]) .campaign-art{max-width:230px;aspect-ratio:3/4;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
body:not([data-screen="game"]) .campaign-art img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
body:not([data-screen="game"]) .campaign-encounter:hover .campaign-art img{transform:scale(1.05)}
body:not([data-screen="game"]) .campaign-encounter h3{font-size:clamp(24px,2vw,30px);margin:6px 0 10px}
body:not([data-screen="game"]) .campaign-encounter:has(button:disabled){filter:saturate(.35) brightness(.7)}
body:not([data-screen="game"]) .campaign-encounter:has(button:disabled)::after{background:#2a1d15;box-shadow:0 0 0 1px rgba(216,179,106,.35)}
body:not([data-screen="game"]) .campaign-encounter:has(button:disabled) .campaign-art::after{content:'鎖';position:absolute;inset:0;display:grid;place-items:center;font:64px var(--brush);color:rgba(243,217,154,.75);background:rgba(10,6,5,.55)}
body:not([data-screen="game"]) .campaign-art{position:relative}
@media (max-width:560px){ body:not([data-screen="game"]) .campaign-encounter{grid-template-columns:1fr}body:not([data-screen="game"]) .campaign-list{padding-left:30px}body:not([data-screen="game"]) .campaign-list::before{left:9px}body:not([data-screen="game"]) .campaign-encounter::after{left:-28px} }

/* --- Kartenarchiv (Nutzer 25.09. 01:35: Hero-Banner, starke Knöpfe, Karten überall) --------------- */
.archive-page{max-width:1400px!important}
.archive-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:40px;min-height:540px;margin:6px 0 26px;padding:48px 52px;border-radius:10px;overflow:hidden;isolation:isolate;
  background:linear-gradient(100deg,rgba(18,11,9,.97) 30%,rgba(18,11,9,.72) 58%,rgba(18,11,9,.35)),radial-gradient(ellipse 50% 80% at 78% 60%,rgba(184,54,42,.45),transparent 70%),url('/assets/ui/panorama/bg-sakura-dusk.webp') 70% 40%/cover;
  border:1px solid var(--frame);box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.5)}
.archive-hero::before{content:"";position:absolute;inset:8px;border:1px solid rgba(216,179,106,.16);border-radius:6px;pointer-events:none}
.archive-copy h1{font-size:clamp(48px,5.2vw,86px)!important;line-height:.98;letter-spacing:-.025em;margin:6px 0 18px;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.archive-lead{color:#d9cab3;font-size:15.5px;line-height:1.7;max-width:520px;margin:0 0 26px}
.archive-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 26px;max-width:640px}
.archive-stat{position:relative;overflow:hidden;display:grid;justify-items:start;gap:2px;padding:14px 14px 12px;border-radius:6px;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,rgba(44,28,20,.92),rgba(20,12,9,.95));border:1px solid rgba(216,179,106,.3);color:var(--washi);transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s}
.archive-stat i{position:absolute;right:6px;bottom:-6px;font:normal 44px/1 var(--brush);color:rgba(243,217,154,.1)}
.archive-stat b{font:800 30px/1 var(--heading);color:var(--gold-hi)}
.archive-stat span{font:600 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#cdb691}
.archive-stat:hover{transform:translateY(-3px);border-color:rgba(243,217,154,.65);box-shadow:0 12px 26px rgba(0,0,0,.45)}
.archive-stat.active{background:linear-gradient(180deg,#a52d20,#6f1a11);border-color:#e3bd78;box-shadow:0 0 22px rgba(184,54,42,.35)}
.archive-stat.active b,.archive-stat.active span{color:#fff3df}
.archive-honor{margin-top:16px}
.archive-feature{position:relative;display:grid;justify-items:center;gap:14px}
.feature-rays{position:absolute;left:50%;top:44%;width:620px;aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,140,.22) 0deg 4deg,transparent 4deg 13deg);mask-image:radial-gradient(circle,#000 15%,transparent 60%);-webkit-mask-image:radial-gradient(circle,#000 15%,transparent 60%);animation:rays-spin 40s linear infinite}
@keyframes rays-spin{to{rotate:360deg}}
.feature-open{display:block;width:min(310px,80%);padding:0;border:0;background:none;cursor:pointer;transform:rotate(-4deg);transition:transform .5s var(--ease-out)}
.feature-open:hover,.feature-open:has(:focus-visible){transform:rotate(0) scale(1.03)}
.feature-open .card{pointer-events:auto;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:2/3;margin:0!important;border:1px solid #e3bd78!important;border-radius:14px!important;
  box-shadow:0 0 0 4px rgba(20,12,10,.85),0 0 0 5px rgba(216,179,106,.55),0 40px 80px rgba(0,0,0,.7),0 0 60px rgba(243,190,100,.25)}
.feature-label{display:flex;align-items:center;gap:12px;margin:0;font:600 11px var(--display);letter-spacing:.28em;text-transform:uppercase;color:#f3d99a}
.feature-label b{font-weight:600;color:var(--rarity-color,#f3d99a);letter-spacing:.12em}
/* Werkzeugleiste klebt beim Scrollen oben */
.archive-tools{position:sticky;top:0;z-index:20;display:grid;gap:12px;margin:0 0 24px;padding:14px 16px;border-radius:8px;
  background:linear-gradient(180deg,rgba(24,14,11,.97),rgba(16,9,7,.97));border:1px solid rgba(216,179,106,.3);box-shadow:0 16px 36px rgba(0,0,0,.45)}
@media (max-width:1099px){.archive-tools{top:64px}}
/* Desktop (04.10.): feste Profil-Pille .rail-status (top 12, ~56 hoch) deckte die rechten Häuser-Knöpfe des klebenden Filters. */
@media (min-width:1100px){.archive-tools{top:76px}}
.archive-tools .filterbar{width:auto!important;padding:0!important;border:0!important;background:none!important;margin:0!important}
.archive-tools .filterbar button{display:inline-flex;align-items:center;gap:8px}
.archive-tools .filterbar button img{width:16px;height:18px;filter:sepia(1) saturate(2) hue-rotate(-10deg) brightness(1.05)}
.archive-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kind-tabs{display:inline-flex;flex-wrap:wrap;border:1px solid rgba(216,179,106,.45);border-radius:5px;overflow:hidden}
.kind-tabs button{min-height:40px;padding:0 15px;border:0;border-right:1px solid rgba(216,179,106,.25);background:rgba(20,12,9,.85);color:#cdb691;cursor:pointer;font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s}
.kind-tabs button:last-child{border-right:0}
.kind-tabs button:hover{color:var(--gold-hi)}
.kind-tabs button.active{background:linear-gradient(180deg,#a52d20,#6f1a11);color:#fff3df}
.archive-search{position:relative;flex:1 1 220px;max-width:360px;display:flex;align-items:center}
.archive-search svg{position:absolute;left:12px;width:18px;height:18px;stroke:var(--gold-leaf);fill:none;stroke-width:1.6}
.archive-search input{width:100%;min-height:40px;padding:0 14px 0 38px;border-radius:5px;border:1px solid rgba(216,179,106,.45);background:rgba(10,6,5,.85);color:var(--washi);font:14px var(--sans)}
.archive-search input:focus{outline:none;border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(216,179,106,.18)}
.archive-count{margin-left:auto;font:600 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-leaf)}
.archive-tools .rarity-legend{margin:0}
/* Raster */
.archive-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;gap:24px!important}
.archive-item{padding:12px 12px 14px!important;overflow:visible!important}
.archive-item .card{position:relative;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.archive-item .card::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;border-radius:inherit;mix-blend-mode:screen;transition:opacity .35s;
  background:linear-gradient(115deg,transparent 25%,rgba(255,236,200,.28) 40%,rgba(255,190,225,.16) 50%,rgba(160,215,255,.14) 58%,transparent 72%);background-size:220% 100%;background-position:100% 0}
.archive-item:hover .card{transform:translateY(-6px) rotate(-1deg);box-shadow:0 22px 44px rgba(0,0,0,.6),0 0 28px rgba(243,190,100,.18)}
.archive-item:hover .card::after{opacity:1;animation:holo-sweep 1.4s var(--ease-out) both}
@keyframes holo-sweep{from{background-position:100% 0}to{background-position:-10% 0}}
.archive-item>p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:0!important}
.own-badge{position:absolute;top:-9px;right:-9px;z-index:8;padding:5px 10px;border-radius:999px;font:700 11px var(--display);letter-spacing:.1em;color:#2a150b;
  background:linear-gradient(180deg,#f8e3a8,#d8b36a);border:1px solid #fff0c8;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.own-badge.is-none{color:#fff0e6;background:linear-gradient(180deg,#b8362a,#7b1c13);border-color:#e3bd78}
.archive-empty{grid-column:1 / -1;padding:40px;text-align:center;font:600 13px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
@media (max-width:900px){.archive-hero{grid-template-columns:1fr;padding:32px 22px;min-height:0}.archive-feature{order:-1}.feature-open{width:min(220px,60vw)}.archive-stats{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.feature-rays{animation:none}.archive-item:hover .card::after{animation:none}}
.feature-open .card .card-rules{display:none!important}
.feature-open{width:min(340px,86%)}
.archive-tools .rarity-legend{display:none}


/* --- Arena-Wahl (Duell-Seite) -------------------------------------------------------------------- */
.arena-pick{margin:34px 0}
.arena-pick-head h2{font-size:clamp(28px,2.6vw,40px);margin:8px 0 6px}
.arena-pick-head p:not(.eyebrow){color:#cbbba3;font-size:14px;margin:0 0 18px}
.arena-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.arena-option{position:relative;display:block;padding:0;border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:16/10;text-align:left;isolation:isolate;
  border:1px solid rgba(216,179,106,.3);background:#120b09;transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s var(--ease-out)}
.arena-option img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease-out)}
.arena-option::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,7,6,.95) 8%,rgba(12,7,6,.35) 55%,transparent)}
.arena-option:hover{transform:translateY(-3px);border-color:rgba(243,217,154,.7)}
.arena-option:hover img{transform:scale(1.06)}
.arena-option.selected{border-color:#f0cf86;box-shadow:0 0 0 1px #f0cf86,0 0 34px rgba(240,190,100,.3)}
.arena-kanji{position:absolute;top:10px;left:12px;font:34px/1 var(--brush);color:rgba(243,217,154,.85);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.arena-text{position:absolute;left:14px;right:14px;bottom:12px;display:grid;gap:4px}
.arena-text strong{font:700 19px var(--heading);color:var(--washi)}
.arena-text small{font-size:12px;line-height:1.4;color:#d0bfa6}
/* R8 Tageszeit + Wetter (nur Sakura-Hof) */
.arena-mood{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:16px}
.arena-mood [role=radiogroup]{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.arena-mood .eyebrow{margin:0 6px 0 0}
.mood-chip{padding:7px 14px;border-radius:999px;border:1px solid rgba(216,179,106,.35);background:rgba(18,11,9,.8);color:#e9dcc4;font:600 13px var(--heading);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.mood-chip span{font-family:var(--brush);color:#f0cf86;margin-right:4px}
.mood-chip:hover{border-color:rgba(243,217,154,.7)}
.mood-chip.selected{border-color:#f0cf86;box-shadow:0 0 0 1px #f0cf86,0 0 18px rgba(240,190,100,.25);color:var(--washi)}
.arena-option .check{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#2a150b;background:linear-gradient(180deg,#f8e3a8,#d8b36a)}

/* --- Spiel-Oberfläche im Lack-/Gold-Stil (Claude 25.09.) — nur Optik, gleiche Plätze -------------------- */
/* Kartenfokus: Lackpaneel mit Goldrahmen und Eckbeschlägen */
body.stage-on .game .selection-panel.is-open{background:linear-gradient(180deg,rgba(34,20,15,.97),rgba(14,8,6,.97))!important;border:1px solid #b38b45!important;border-radius:10px!important;
  box-shadow:0 0 0 1px #000,0 0 0 5px rgba(20,12,10,.85),0 0 0 6px rgba(216,179,106,.35),0 30px 70px rgba(0,0,0,.7)!important}
body.stage-on .game .selection-panel.is-open::before{content:"";position:absolute;inset:6px;pointer-events:none;border-radius:6px;opacity:.7;
  background:linear-gradient(#d8b36a,#d8b36a) top left/14px 1.5px no-repeat,linear-gradient(#d8b36a,#d8b36a) top left/1.5px 14px no-repeat,
    linear-gradient(#d8b36a,#d8b36a) top right/14px 1.5px no-repeat,linear-gradient(#d8b36a,#d8b36a) top right/1.5px 14px no-repeat,
    linear-gradient(#d8b36a,#d8b36a) bottom left/14px 1.5px no-repeat,linear-gradient(#d8b36a,#d8b36a) bottom left/1.5px 14px no-repeat,
    linear-gradient(#d8b36a,#d8b36a) bottom right/14px 1.5px no-repeat,linear-gradient(#d8b36a,#d8b36a) bottom right/1.5px 14px no-repeat}
body.stage-on .game .selection-panel .eyebrow{font:600 10.5px Cinzel,Georgia,serif!important;letter-spacing:.32em!important;color:#d8b36a!important}
body.stage-on .game .selection-panel h3{font-family:'Shippori Mincho B1',Georgia,serif!important;font-weight:700!important;color:#f6e9d2}
body.stage-on .game .selection-panel p{color:#d8c8ae}
body.stage-on .game .selection-panel .secondary,body.stage-on .game .selection-panel .text-button:not(.focus-min){min-height:42px;border-radius:4px!important;border:1px solid rgba(216,179,106,.55)!important;
  background:linear-gradient(180deg,rgba(46,29,21,.95),rgba(24,15,11,.95))!important;color:#f3d99a!important;font:600 11.5px Cinzel,Georgia,serif!important;letter-spacing:.16em;text-transform:uppercase}
body.stage-on .game .selection-panel .primary{border-radius:4px!important;border:1px solid #e3bd78!important;background:linear-gradient(180deg,#c0402f,#932619 50%,#6c1810)!important;color:#fff2de!important;
  font:600 12px Cinzel,Georgia,serif!important;letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,222,170,.4),0 8px 22px rgba(110,20,10,.4)}
body.stage-on .game .selection-panel .selection-prompt{border:1px solid rgba(216,179,106,.35)!important;border-radius:6px!important;background:linear-gradient(90deg,rgba(143,36,25,.28),rgba(20,12,9,.4))!important;color:#f1e2c4!important}
body.stage-on .game .selection-panel .legal-list summary{font:600 10px Cinzel,Georgia,serif;letter-spacing:.26em;color:#bfae98}
body.stage-on .game .selection-panel .focus-min,body.stage-on .game .selection-panel .selection-head button{border-color:#b38b45!important;color:#f3d99a!important}
/* Offenes Paneel: der Umschalter und der Zug-Hinweis lagen darüber */
body.stage-on .game .game-layout.has-panel ~ * .panel-toggle,body.stage-on .game:has(.selection-panel.is-open:not(.is-min)) .panel-toggle,
body.stage-on .game:has(.selection-panel.is-open:not(.is-min)) .turn-guide{opacity:0;pointer-events:none}
/* Kleine Knöpfe oben (Spectator, Details) und Zug-Hinweis */
body.stage-on .game .panel-toggle,body.stage-on [data-freecam],body.stage-on .freecam-btn{border-radius:4px}
body.stage-on .game .turn-guide{border:1px solid rgba(216,179,106,.45)!important;border-radius:6px!important;background:linear-gradient(180deg,rgba(34,20,15,.94),rgba(16,9,7,.94))!important;
  color:#f1e2c4!important;font:600 12px 'Shippori Mincho B1',Georgia,serif!important;box-shadow:0 10px 24px rgba(0,0,0,.5)}
/* Kartenfokus über der Gegnerleiste (deren Quasten/Ahornblätter lagen über der Kopfzeile) */
body.stage-on .game .game-layout.has-panel:has(.selection-panel.is-open:not(.is-min)){z-index:9}

/* --- Gegner-Denkpause im 3D-Tisch: Plakette unter der Gegnerleiste ------------------------------ */
.hud-enemy .hud-think{position:absolute;left:3%;top:96%;transform:translateY(8px);z-index:3;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,20,15,.96),rgba(14,8,6,.96));border:1px solid #b38b45;box-shadow:0 0 0 3px rgba(20,12,10,.8),0 10px 26px rgba(0,0,0,.6);animation:think-in .35s cubic-bezier(.22,1,.36,1) both}
.hud-enemy .hud-think i{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:normal 20px/1 'Yuji Syuku',serif;color:#fcebd2;background:radial-gradient(circle at 35% 30%,#b8362a,#6f1a11)}
.hud-enemy .hud-think i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:#f3d99a;border-right-color:rgba(243,217,154,.4);animation:think-spin 1.1s linear infinite}
.hud-enemy .hud-think span{font:600 13px 'Shippori Mincho B1',Georgia,serif;color:#f1e2c4;letter-spacing:.02em}
.hud-enemy.is-thinking .hud-name b{color:#f3d99a}
@keyframes think-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes think-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hud-enemy .hud-think,.hud-enemy .hud-think i::after{animation:none}}

/* --- Rangliste: Siegertreppchen für Platz 1–3 ------------------------------------------------------ */
body:not([data-screen="game"]) .ladder-list li{position:relative;padding:14px 16px;align-items:center}
body:not([data-screen="game"]) .ladder-list li b{display:grid;place-items:center;min-width:40px;height:40px;border-radius:50%;font:800 17px var(--heading);color:#f3d99a;border:1px solid rgba(216,179,106,.4);background:rgba(20,12,10,.8)}
body:not([data-screen="game"]) .ladder-list li:nth-child(-n+3){padding:18px 18px;border-color:var(--medal)!important;background:linear-gradient(95deg,color-mix(in oklab,var(--medal) 22%,transparent),rgba(20,12,10,.85) 55%)!important;box-shadow:0 0 24px color-mix(in oklab,var(--medal) 25%,transparent)}
body:not([data-screen="game"]) .ladder-list li:nth-child(-n+3) b{color:#1a0e08;border-color:#fff3d0;background:radial-gradient(circle at 35% 30%,#fff,var(--medal) 55%,color-mix(in oklab,var(--medal) 60%,#000))}
body:not([data-screen="game"]) .ladder-list li:nth-child(1){--medal:#e8c060}
body:not([data-screen="game"]) .ladder-list li:nth-child(2){--medal:#c8ccd8}
body:not([data-screen="game"]) .ladder-list li:nth-child(3){--medal:#c88a52}
body:not([data-screen="game"]) .ladder-list li:nth-child(1)::after{content:'首';position:absolute;right:16px;top:50%;translate:0 -50%;font:30px/1 var(--brush);color:rgba(243,217,154,.45)}
body:not([data-screen="game"]) .ladder-list li strong{font:800 20px var(--heading);color:#f6e9d2}
body:not([data-screen="game"]) .ladder-list li span{font-family:var(--sans)!important;color:#d0bfa6}
.own-badge{background-color:#d8b36a}.own-badge.is-none{background-color:#8f2419}

/* --- Sieg: Blütenregen (nur bei Sieg, reduzierte Bewegung aus) -------------------------------------- */
.finish-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.finish-petals i{position:absolute;top:-6%;left:calc(var(--x) * 1%);width:14px;height:10px;border-radius:70% 0 70% 0;opacity:.9;
  background:linear-gradient(135deg,#ffe0ea,#f19ab8);box-shadow:0 0 8px rgba(255,190,210,.5);animation:finish-fall calc(var(--t) * 1s) linear calc(var(--d) * -1s) infinite}
.finish-petals i:nth-child(3n){background:linear-gradient(135deg,#fff3c8,#e8b860);box-shadow:0 0 10px rgba(255,210,120,.6);width:8px;height:8px;border-radius:50%}
@keyframes finish-fall{0%{transform:translate(0,0) rotate(calc(var(--r) * 1deg))}100%{transform:translate(12vw,112vh) rotate(calc(var(--r) * 1deg + 540deg))}}
@media (prefers-reduced-motion:reduce){.finish-petals{display:none}}
/* Endbildschirm und Startkarten-Bühne: Nebenleisten der Arena ausblenden */
body:has(.finished-banner) :is(.play-rail,.free-cam-btn),body:has(.mulligan-stage:not(.is-waiting)) :is(.play-rail,.free-cam-btn){opacity:0;pointer-events:none}

/* --- Startseite: Arena-Teaser ------------------------------------------------------------------ */
body:not([data-screen="game"]) .home-worlds{margin:34px 0 8px}
.home-worlds-head h2{font-size:clamp(26px,2.4vw,36px);margin:8px 0 16px}
.home-worlds-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.home-world{position:relative;padding:0;border-radius:8px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;isolation:isolate;border:1px solid rgba(216,179,106,.28);background:#120b09;
  transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s var(--ease-out)}
.home-world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease-out)}
.home-world::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,7,6,.9) 8%,transparent 60%)}
.home-world span{position:absolute;top:8px;left:10px;font:24px/1 var(--brush);color:rgba(243,217,154,.85);text-shadow:0 2px 8px #000}
.home-world strong{position:absolute;left:10px;right:10px;bottom:9px;font:700 14px var(--heading);color:var(--washi);text-align:left}
.home-world:hover{transform:translateY(-3px);border-color:rgba(243,217,154,.7)}
.home-world:hover img{transform:scale(1.07)}
.home-world.selected{border-color:#f0cf86;box-shadow:0 0 0 1px #f0cf86,0 0 22px rgba(240,190,100,.3)}
@media (max-width:1100px){.home-worlds-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.home-worlds-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Deck-Editor: große Kartenvorschau beim Überfahren -------------------------------------------- */
.deck-row{position:relative}
.row-peek{position:absolute;left:min(84px,calc(100% - 230px));bottom:calc(100% + 10px);z-index:30;width:230px;pointer-events:none;opacity:0;transform:translateY(8px) scale(.96);transform-origin:20% 100%;
  transition:opacity .2s var(--ease-out),transform .25s var(--ease-out)}
.row-peek .card{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:2/3;margin:0!important;border:1px solid #e3bd78!important;border-radius:12px!important;
  box-shadow:0 0 0 4px rgba(20,12,10,.9),0 30px 60px rgba(0,0,0,.75)}
.row-peek .card .card-rules{display:block;font-size:11px;line-height:1.45;margin-top:6px}
.deck-row:hover .row-peek,.deck-row:focus-within .row-peek{opacity:1;transform:none}
.deck-pool .deck-row:nth-child(-n+3) .row-peek{bottom:auto;top:calc(100% + 10px);transform-origin:20% 0}
/* Vorschau immer ganz im Bild: am Bildschirm (fixed) am Kartenbild der überfahrenen Zeile verankert. Reihenfolge: über der
   Zeile, darunter, sonst auf Zeilenhöhe mittig und an den Bildrand geklemmt (niedrige Fenster); rechts zu knapp → nach links.
   Die Zeile hebt sich per top statt transform: ein transform macht sie zum Containing Block für fixed, dann klebt die
   Vorschau an der Zeile und kippt nie (Probe 03.10.). Ohne Anchor-Positioning bleibt die Regel oben. */
@supports (anchor-name:--a) and (position-try-fallbacks:flip-block){
  body:not([data-screen="game"]) .deck-row{transition:top .35s var(--ease-out),border-color .3s,box-shadow .35s var(--ease-out)}
  body:not([data-screen="game"]) .deck-row:hover{transform:none;top:-4px}
  .deck-row:is(:hover,:focus-within) .row-art{anchor-name:--row-peek}
  .row-peek,.deck-pool .deck-row:nth-child(-n+3) .row-peek{position:fixed;position-anchor:--row-peek;inset:auto;left:calc(anchor(left) + 70px);
    bottom:anchor(top);margin:10px 0;position-try-fallbacks:flip-block,--row-peek-mid,flip-inline,flip-block flip-inline,--row-peek-mid flip-inline;
    transform-origin:50% 50%}
}
@position-try --row-peek-mid{bottom:auto;margin:0;top:max(8px,min(calc(anchor(center) - 172px),calc(100% - 353px)))}
@media (hover:none){.row-peek{display:none}}

/* --- End Turn, wenn nichts mehr geht: umlaufender Goldring um den 終-Knopf --------------------------- */
@property --end-a{syntax:'<angle>';inherits:false;initial-value:0deg}
body.stage-on .hud-skin .hud-end.is-last::after{content:"";position:absolute;inset:-7%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--end-a),rgba(255,214,140,.15) 0 55%,rgba(255,214,140,.6) 70%,#fff4d0 80%,rgba(255,214,140,.6) 90%,rgba(255,214,140,.15) 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 84%,#000 87%,#000 95%,transparent 98%);mask:radial-gradient(closest-side,transparent 84%,#000 87%,#000 95%,transparent 98%);
  z-index:2;filter:drop-shadow(0 0 6px rgba(255,200,110,.9));animation:end-ring 2.2s linear infinite}
body.stage-on .hud-skin .hud-end{position:absolute}
@keyframes end-ring{to{--end-a:360deg}}
@media (prefers-reduced-motion:reduce){body.stage-on .hud-skin .hud-end.is-last::after{animation:none}}

/* --- Shop: Glanz über die Bündel, Honor-Zahl als Goldmünze ----------------------------------------- */
body:not([data-screen="game"]) .shop-item .shop-art::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 30%,rgba(255,240,210,.35) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0;animation:shop-sheen 5.5s ease-in-out infinite}
body:not([data-screen="game"]) .shop-item:nth-child(2) .shop-art::after{animation-delay:1.2s}
body:not([data-screen="game"]) .shop-item:nth-child(3) .shop-art::after{animation-delay:2.4s}
@keyframes shop-sheen{0%,55%{background-position:120% 0}85%,100%{background-position:-40% 0}}
body:not([data-screen="game"]) .shop-item small{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--heading);color:#f3d99a}
body:not([data-screen="game"]) .shop-item small::before{content:"誉";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:14px/1 var(--brush);color:#2a150b;background:radial-gradient(circle at 35% 30%,#fbe6ad,#d8b36a 60%,#8b6a34)}
@media (prefers-reduced-motion:reduce){body:not([data-screen="game"]) .shop-item .shop-art::after{animation:none}}

/* --- Handy (< 900 px) im Spiel: eine Spalte, keine Überlappungen, Nebenleisten aus ------------------ */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  /* 30.09.: gilt auch für die Flachansicht (2D-Rückfall) — vorher quetschte das Zweispalten-Gitter aus styles.css
     den eigenen Anführer bei 390 px auf 73 px, „Your turn" lag über der Lebensanzeige. */
  body .game .arena{grid-template-columns:minmax(0,1fr)!important}
  body .game .arena>*{grid-column:1 / -1!important}
  body .game .arena>.leader:not(.enemy){width:100%;min-height:58px;flex-wrap:wrap}
  body .game .action-strip{padding:10px 0;gap:10px}
  body .game .action-strip .primary{flex:0 0 auto}
  body .game .turn-guide{width:100%;margin:0 0 8px}
  body.stage-on .play-rail,body.stage-on .free-cam-btn{display:none!important}
  .mull-cards{gap:10px}.mull-cards .card{width:min(40vw,190px)!important}.mulligan-stage{padding-left:12px;padding-right:12px}
  .mull-cards .card .card-rules{display:none}
  .mulligan-stage{justify-content:flex-start;padding-top:70px;overflow:auto}
  .mulligan-stage h2 span{display:block;margin:6px 0 0}
}

/* --- Seitenübergang: Inhalt steigt nur beim Seitenwechsel sanft auf (body.page-enter setzt go()) --------- */
body.page-enter:not([data-screen="game"]) main.page>*,body.page-enter:not([data-screen="game"]) .home-content>*{animation:page-rise .55s cubic-bezier(.22,1,.36,1) both}
body.page-enter:not([data-screen="game"]) main.page>:nth-child(2),body.page-enter:not([data-screen="game"]) .home-content>:nth-child(2){animation-delay:.06s}
body.page-enter:not([data-screen="game"]) main.page>:nth-child(3),body.page-enter:not([data-screen="game"]) .home-content>:nth-child(3){animation-delay:.12s}
body.page-enter:not([data-screen="game"]) main.page>:nth-child(n+4),body.page-enter:not([data-screen="game"]) .home-content>:nth-child(n+4){animation-delay:.18s}
@keyframes page-rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){body.page-enter main.page>*,body.page-enter .home-content>*{animation:none!important}}
/* Endbildschirm: Arena dahinter sichtbarer, damit die kreisende Kamera wirkt */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){body.stage-on .game .finished-banner{background:radial-gradient(ellipse at 50% 45%,rgba(26,13,10,.62) 0%,rgba(10,6,5,.78) 55%,rgba(5,3,3,.9) 100%)!important}}
body.stage-on .game:has(.finished-banner) :is(.hud-skin,.hud-enemy,.hand,.hand-label,.selection-panel){opacity:0!important;pointer-events:none!important;transition:opacity .6s}

/* Regeln-Seite: Spielfeld-Schema (rules-board.js) */
.rules-board{margin:0 0 30px;padding:18px 18px 14px;border:1px solid rgba(216,179,106,.28);border-radius:10px;background:radial-gradient(120% 90% at 50% 45%,rgba(113,57,61,.22),transparent 70%),linear-gradient(180deg,#14100e,#0c0b0c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.45)}
.rules-board svg{display:block;width:100%;height:auto;max-height:480px;font-family:var(--heading,Cinzel,serif)}
.rules-board figcaption{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b9a684;margin-top:8px}
.rules-board .rb-bg{fill:rgba(255,255,255,.015);stroke:rgba(216,179,106,.18)}
.rules-board .rb-slot rect{fill:rgba(12,10,9,.75);stroke:rgba(216,179,106,.42);stroke-width:1.2;stroke-dasharray:5 4}
.rules-board .rb-ally rect{stroke:#d8b36a;stroke-dasharray:none;fill:rgba(216,179,106,.08)}
.rules-board .rb-foe rect,.rules-board .rb-guard rect{stroke:#c0574f;stroke-dasharray:none;fill:rgba(192,87,79,.1)}
.rules-board .rb-guard rect{opacity:.55}
.rules-board .rb-guard .rb-unit{opacity:.5}
.rules-board .rb-unit.ally{fill:url(#rbGold);stroke:#fff3cf;stroke-width:1}
.rules-board .rb-unit.foe{fill:#8e3a35;stroke:#e79a8f;stroke-width:1}
.rules-board .rb-unit-k{font:700 17px "Shippori Mincho B1",serif;text-anchor:middle;fill:#1b120c}
.rules-board .rb-foe .rb-unit-k,.rules-board .rb-guard .rb-unit-k{fill:#fbe3dc}
.rules-board .rb-slot-note{font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;fill:#cdbb98}
.rules-board .rb-leader rect{fill:rgba(18,14,12,.9);stroke-width:1.6}
.rules-board .rb-leader.rb-ally rect{stroke:#d8b36a}
.rules-board .rb-leader.rb-foe rect{stroke:#c0574f}
.rules-board .rb-leader-k{font:700 22px "Shippori Mincho B1",serif;fill:#f1d79a}
.rules-board .rb-leader.rb-foe .rb-leader-k{fill:#e79a8f}
.rules-board .rb-leader-t{font-size:15px;letter-spacing:.2em;text-transform:uppercase;text-anchor:middle;fill:#efe3cc}
.rules-board .rb-row{font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-anchor:end;fill:#9d8f78}
.rules-board .rb-row-k{display:none}
.rules-board .rb-clash{stroke:#d8b36a;stroke-width:1;opacity:.55;stroke-dasharray:2 6}
.rules-board .rb-lane{font-size:10px;letter-spacing:.2em;text-transform:uppercase;text-anchor:middle;fill:#d8b36a;paint-order:stroke;stroke:#0e0c0c;stroke-width:6px}
.rules-board .rb-path{fill:none;stroke:#f1d79a;stroke-width:2.4;stroke-dasharray:7 5}
.rules-board .rb-shield{stroke:#e79a8f;stroke-width:2}
.rules-board .rb-note path{stroke:rgba(216,179,106,.45);stroke-width:1;fill:none}
.rules-board .rb-note text{font:13px var(--sans,system-ui);fill:#cfc3ac}
.rules-board .rb-note text.end{text-anchor:end}
@media (prefers-reduced-motion:no-preference){.rules-board .rb-path{animation:rbDash 1.6s linear infinite}}
@keyframes rbDash{to{stroke-dashoffset:-24}}
@media (max-width:700px){.rules-board{padding:10px 0;overflow:hidden}.rules-board svg{width:150%;max-width:none;margin-left:-25%}.rules-board .rb-note{display:none}.rules-board figcaption{padding:0 12px;font-size:11px}}

/* Übungs-/Kombi-Lektion (Seite lesson, combo-lesson.js) im Lack-/Gold-Stil — nur Optik, Markup unverändert */
body[data-screen="lesson"] .combo-lesson{max-width:880px;position:relative;padding:34px 38px 30px;border:1px solid var(--frame);border-radius:10px;
  background:radial-gradient(90% 70% at 85% 0%,rgba(184,54,42,.14),transparent 70%),linear-gradient(180deg,rgba(30,19,14,.92),rgba(14,9,7,.95));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(243,217,154,.08),0 24px 60px rgba(0,0,0,.5)}
body[data-screen="lesson"] .combo-lesson::before{content:'';position:absolute;inset:7px;border:1px solid rgba(216,179,106,.14);border-radius:6px;pointer-events:none}
body[data-screen="lesson"] .combo-lesson::after{content:'稽古';position:absolute;top:22px;right:30px;font:400 64px/1 var(--brush);color:rgba(216,179,106,.13);writing-mode:vertical-rl;pointer-events:none}
body[data-screen="lesson"] .combo-lesson>.eyebrow::before{content:'';width:7px;height:7px;background:var(--gold-leaf);transform:rotate(45deg);box-shadow:0 0 10px rgba(243,217,154,.6)}
body[data-screen="lesson"] .combo-lesson h1{font-size:clamp(32px,4.2vw,54px);line-height:1.04;letter-spacing:-.02em;margin:10px 0 12px;max-width:640px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
body[data-screen="lesson"] .combo-lesson>p{color:#d6c7b1;line-height:1.7;max-width:620px}
body[data-screen="lesson"] .lesson-board{position:relative;gap:54px;margin:28px 0 18px}
body[data-screen="lesson"] .lesson-board::after{content:'対';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:38px;height:38px;display:grid;place-items:center;
  background:linear-gradient(180deg,#a52d20,#5a130d);border:1px solid #e3bd78;border-radius:4px;box-shadow:0 0 0 4px rgba(14,8,7,.9),0 0 22px rgba(184,54,42,.45);color:transparent}
body[data-screen="lesson"] .lesson-board::before{content:'対';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;font:700 17px/1 var(--heading);color:#fff0d0}
body[data-screen="lesson"] .lesson-body{position:relative;border-radius:8px;padding:20px 22px 18px 26px;background:linear-gradient(180deg,rgba(38,24,18,.92),rgba(18,11,9,.95));
  border:1px solid rgba(216,179,106,.32);box-shadow:inset 0 1px 0 rgba(243,217,154,.08),0 12px 30px rgba(0,0,0,.4);overflow:hidden}
body[data-screen="lesson"] .lesson-body::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo))}
body[data-screen="lesson"] .lesson-body:first-child{border-color:rgba(192,87,79,.45)}
body[data-screen="lesson"] .lesson-body:first-child::before{background:linear-gradient(180deg,#e0685c,#7a1d14)}
body[data-screen="lesson"] .lesson-body h3{font-size:19px;margin:0 0 8px;color:var(--washi)}
body[data-screen="lesson"] .lesson-body p{margin:4px 0;color:#c9b8a0;font-size:13.5px}
body[data-screen="lesson"] .lesson-body p strong{font-family:var(--display);font-size:14.5px;letter-spacing:.06em;color:var(--gold-hi)}
body[data-screen="lesson"] .lesson-body:first-child p strong{color:#f1b2a8}
body[data-screen="lesson"] .lesson-resource{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;width:fit-content;max-width:100%;margin:0 auto 18px;padding:8px 18px;
  border:1px solid rgba(216,179,106,.4);border-radius:999px;background:rgba(12,7,6,.8);color:#cbb99f;font-size:13px;box-shadow:inset 0 1px 0 rgba(243,217,154,.1)}
body[data-screen="lesson"] .lesson-resource strong{font-family:var(--display);letter-spacing:.08em;color:var(--gold-hi)}
body[data-screen="lesson"] .lesson-feedback{position:relative;border-radius:8px;padding:22px 26px;border:1px solid rgba(216,179,106,.38);
  background:linear-gradient(180deg,rgba(242,231,211,.06),rgba(242,231,211,.02)),rgba(16,10,8,.85);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
body[data-screen="lesson"] .lesson-feedback::before,body[data-screen="lesson"] .lesson-feedback::after{content:'';position:absolute;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-leaf),transparent);opacity:.6}
body[data-screen="lesson"] .lesson-feedback::before{top:0}
body[data-screen="lesson"] .lesson-feedback::after{bottom:0}
body[data-screen="lesson"] .lesson-feedback h2{font-size:24px;margin:0 0 8px;color:var(--gold-hi)}
body[data-screen="lesson"] .lesson-feedback p{color:#d3c3ab;line-height:1.7;margin:0}
body[data-screen="lesson"] .combo-lesson:not(:has(.lesson-choices button)) .lesson-feedback{border-color:rgba(243,217,154,.7);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 34px rgba(216,179,106,.18)}
body[data-screen="lesson"] .lesson-choices:empty{display:none}
body[data-screen="lesson"] .lesson-choices{margin:22px 0 16px}
body[data-screen="lesson"] .lesson-choices button{min-height:54px}
body[data-screen="lesson"] .combo-lesson .button-row{align-items:center;gap:14px;margin-top:8px}
@media (max-width:600px){
  body[data-screen="lesson"] .combo-lesson{padding:24px 18px 20px}
  body[data-screen="lesson"] .combo-lesson::after{font-size:44px;right:14px;top:14px}
  body[data-screen="lesson"] .lesson-board{gap:26px}
  body[data-screen="lesson"] .lesson-feedback{padding:18px}
}
@media (max-width:480px){
  body[data-screen="lesson"] .lesson-board{grid-template-columns:1fr;gap:46px}
  body[data-screen="lesson"] .lesson-resource{border-radius:12px;font-size:12.5px}
  body[data-screen="lesson"] .combo-lesson h1{padding-right:36px}
}

/* Handy-Spiel: Mindestschrift für HUD-Texte (QA 25.09.: 7–9 px gemessen). Kartenbeschriftung der Mini-Handkarten
   bleibt klein (Fokusansicht zeigt sie groß), wird aber von 6 auf 8 px angehoben. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body[data-screen="game"] :is(.leader-caption,.leader-caption span,.enemy-hand-count,.centerline span,.game-toolbar .eyebrow,.hand-label span,.ultimate-hint,.turn-copy small,.topnav button){
    font-size:11px!important;letter-spacing:.05em!important;line-height:1.3}
  body[data-screen="game"] .leader-caption{white-space:normal;text-wrap:balance}
  body[data-screen="game"] .hand .card :is(.card-type,.card-cost small,.card-rarity span){font-size:8px!important}
}
/* Handy-Spiel-Kopfzeile: nur Siegel + wischbares Menü, kein umbrechender Schriftzug über „Dojo“ */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body[data-screen="game"] .game-header{display:flex;align-items:center;gap:10px;overflow:hidden}
  body[data-screen="game"] .game-header .brand{flex:0 0 auto}
  body[data-screen="game"] .game-header .brand > span,body[data-screen="game"] .game-header .connection{display:none}
  body[data-screen="game"] .game-header .topnav{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;scrollbar-width:none;padding-right:36px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  body[data-screen="game"] .game-header .topnav::-webkit-scrollbar{display:none}
  body[data-screen="game"] .game-header .topnav :is(button,a){flex:0 0 auto;white-space:nowrap}
}
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){body[data-screen="game"] .leader :is([class*="chi"],[class*="resource"]){white-space:nowrap}}
/* Spectator-Umschalter: im Ruhezustand zurückhaltend, aktiv/hover voll (QA 25.09.) */
.free-cam-btn:not([aria-pressed=true]){opacity:.62;transition:opacity .2s}
.free-cam-btn:hover,.free-cam-btn:focus-visible{opacity:1}

/* ============================================================================================
   MOCKUP-STUFE (Claude, 25.09. 13:00) — Nutzer-Vorlagen docs/design-referenz-2026-09-25/mockup-3…10
   Wallpaper-Samurai oben rechts hinter jeder Menüseite (Ausschnitte aus den Vorlagen, assets/ui/wallpaper),
   Seitenköpfe ohne Kasten, Serifen-Titel Creme→Gold, Status oben rechts, Motto + Goldpagode unten in der Leiste.
   ============================================================================================ */
body:not([data-screen="game"]){--wall:url('/assets/ui/wallpaper/dojo-samurai.jpg');--quote:'The blade is a mirror of the heart'}
body[data-screen="play"]{--wall:url('/assets/ui/wallpaper/duel-samurai.jpg');--quote:'More than victory  ·  a higher you'}
body[data-screen="story"]{--wall:url('/assets/ui/wallpaper/story-samurai.jpg');--quote:'Every trial is a step on the path'}
body[data-screen="rules"]{--wall:url('/assets/ui/wallpaper/story-samurai.jpg');--quote:'Discipline creates freedom'}
body[data-screen="decks"]{--wall:url('/assets/ui/wallpaper/arena-samurai.jpg');--quote:'Same cards. Different souls.'}
body[data-screen="ladder"],body[data-screen="lobby"]{--wall:url('/assets/ui/wallpaper/arena-samurai.jpg');--quote:'Honor is earned in every duel'}
body[data-screen="collection"]{--wall:url('/assets/ui/wallpaper/cards-shrine.jpg');--quote:'Collect  ·  build  ·  master'}
body[data-screen="store"]{--wall:url('/assets/ui/wallpaper/cards-shrine.jpg');--quote:'Buy time, never strength'}
body[data-screen="warriors"]{--wall:url('/assets/ui/wallpaper/dojo-samurai.jpg');--quote:'Honor beyond death'}

/* Wallpaper-Bahn: scrollt mit der Seite, blendet nach links und unten in den Lack aus */
body:not([data-screen="game"])::before{content:'';position:absolute;top:0;right:0;z-index:0;width:min(1500px,80vw);height:min(840px,88vh);pointer-events:none;
  background:var(--wall) 50% 26%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44%),linear-gradient(0deg,transparent 0,#000 40%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 44%),linear-gradient(0deg,transparent 0,#000 40%);mask-composite:intersect}
body:not([data-screen="game"]) #app{position:relative;z-index:1}
body[data-screen="home"] .home-backdrop,body[data-screen="home"] .hero-art,body[data-screen="home"] .hero-note{display:none!important}

/* Seitenkopf ohne Kasten: Text links auf dem ausgeblendeten Teil, Samurai rechts frei */
body:not([data-screen="game"]) .page-head{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;padding:44px 0 28px;margin:0 0 30px;min-height:clamp(300px,40vh,440px)}
body:not([data-screen="game"]) .page-head::before{display:none}
body:is([data-screen="play"],[data-screen="story"],[data-screen="rules"],[data-screen="warriors"]) .head-fan{visibility:hidden}

/* Titel: Serifen, Creme→Gold wie in den Vorlagen */
body:not([data-screen="game"]) :is(.page-head h1,.intro h1,.warriors-page .page-head h1){font-family:'Cormorant Garamond','Shippori Mincho B1',Georgia,serif!important;font-weight:700!important;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fffaf0 0%,#f8e6bd 48%,#dcae63 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 4px 16px rgba(0,0,0,.6))}
body:not([data-screen="game"]) .page-head h1{font-size:clamp(50px,5.6vw,92px)!important;line-height:.96}
body:not([data-screen="game"]) .intro h1{font-size:clamp(62px,6.8vw,116px);line-height:.92}
body:not([data-screen="game"]) .intro h1 em{background:linear-gradient(180deg,#ffe9ad 10%,#e8b24e 60%,#b8791f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body:not([data-screen="game"]) :is(.page-head p,.intro .lead){font:500 clamp(17px,1.25vw,20px)/1.5 'Cormorant Garamond',Georgia,serif;color:#efe2cb;max-width:34ch;text-shadow:0 2px 12px rgba(0,0,0,.7)}
body:not([data-screen="game"]) .page-head .eyebrow{font-size:11.5px;letter-spacing:.42em;color:#e9d3a6}
body:not([data-screen="game"]) main h2{font-family:'Cormorant Garamond','Shippori Mincho B1',Georgia,serif;font-weight:700}

/* Status oben rechts */
.rail-status{position:fixed;top:12px;right:18px;z-index:70;display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;
  background:linear-gradient(180deg,rgba(28,17,12,.94),rgba(13,8,6,.94));border:1px solid rgba(216,179,106,.42);box-shadow:0 12px 34px rgba(0,0,0,.55)}
.status-pill{display:flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 8px;border-radius:9px;border:1px solid rgba(216,179,106,.26);background:rgba(8,5,4,.55);color:#f6e9d2}
.status-pill b{font:700 17px/1 'Cormorant Garamond',Georgia,serif}
.status-pill small{font:600 9.5px Cinzel,Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:#bfae98}
.status-honor small{margin-left:2px}
.status-coin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 'Shippori Mincho B1',serif;font-style:normal;color:#3a2208;
  background:radial-gradient(circle at 35% 30%,#fff0b8,#e0a93f 58%,#8a5a18);box-shadow:0 0 0 1px #f3d99a,0 0 12px rgba(243,200,110,.45)}
.status-profile{padding-left:4px}
.status-profile img{width:34px;height:34px;border-radius:50%;object-fit:contain;padding:5px;background:radial-gradient(circle,#2c1c14,#140c0a);border:1px solid #e3bd78}
.status-profile img.is-photo{object-fit:cover;padding:0}
.status-profile span{display:grid;gap:3px}
.rail-status .hud-settings{position:static;width:44px;height:44px;border-radius:9px;border:1px solid rgba(216,179,106,.3);background:rgba(8,5,4,.55);color:#f3d99a;display:grid;place-items:center;cursor:pointer}
.rail-status .hud-settings:hover{border-color:#f3d99a;color:#fff}
.rail-status .hud-settings svg{width:22px;height:22px}
@media (min-width:1280px){.rail-status{right:calc(clamp(18px,2.2vw,40px) + 94px)}}
@media (max-width:1099px){.rail-status{display:none}}

/* Leiste unten: Motto mit Siegel über einer Goldpagode */
.rail-foot{position:relative;border-top:0!important;padding-top:120px;margin-top:auto}
.rail-foot::before{content:'';position:absolute;left:-16px;right:-16px;bottom:44px;height:150px;pointer-events:none;background:url('/assets/ui/wallpaper/rail-pagoda.jpg') 0 100%/contain no-repeat;mix-blend-mode:screen;opacity:.75;filter:contrast(2.2) brightness(.75);
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(0deg,transparent,#000 30%,#000 70%,transparent)}
.rail-motto{position:relative;display:flex;align-items:center;gap:14px}
.rail-seal{display:grid;place-items:center;width:30px;padding:5px 0;font:700 13px/1.05 'Shippori Mincho B1',serif;font-style:normal;writing-mode:vertical-rl;color:#e2553f;border:1.5px solid #c23a28;border-radius:3px}
.rail-motto span{font:600 11px/1.7 Cinzel,Georgia,serif;letter-spacing:.3em;text-transform:uppercase;color:#bfae98}

/* Zitatzeile am Seitenende */
body:not([data-screen="game"]) main.page::after,body[data-screen="home"] main.home::after{content:var(--quote);display:block;margin:54px auto 10px;text-align:center;font:600 12px Cinzel,Georgia,serif;letter-spacing:.5em;text-transform:uppercase;color:#cdb58a;opacity:.85;
  background:linear-gradient(90deg,transparent,rgba(216,179,106,.5) 20%,transparent 34%,transparent 66%,rgba(216,179,106,.5) 80%,transparent) 0 50%/100% 1px no-repeat;padding:6px 0}
@media (max-width:900px){body:not([data-screen="game"])::before{width:100vw;height:62vh;opacity:.55}}
/* Kartenarchiv-Kopf wie die anderen: offen auf dem Wallpaper (Mockup-9) */
body:not([data-screen="game"]) .archive-hero{background:none;border:0;box-shadow:none;border-radius:0;overflow-x:clip;overflow-y:visible;padding:40px 0 30px}
body:not([data-screen="game"]) .archive-hero::before{display:none}
body:not([data-screen="game"]) .archive-copy h1{font-family:"Cormorant Garamond","Shippori Mincho B1",Georgia,serif!important;font-weight:700;background:linear-gradient(180deg,#fffaf0 0%,#f8e6bd 48%,#dcae63 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 4px 16px rgba(0,0,0,.6))}
body:not([data-screen="game"]) .archive-copy p{font:500 clamp(17px,1.25vw,20px)/1.5 "Cormorant Garamond",Georgia,serif;color:#efe2cb}
/* QA 25.09. 14:30 (Notfall-Loop): offener Kopf ohne Innenabstand -> Fächerkarten nicht mehr in die Kacheln hängen lassen;
   Ehre/Tagesziel stehen jetzt oben rechts (railStatus) -> Doppel-Chips im Archivkopf aus */
body:not([data-screen="game"]) .fan-card{bottom:24px}
body:not([data-screen="game"]) .archive-honor{display:none}

/* Nutzer-Wallpaper (25.09. 16:00): Hauswahl, Deck-Kacheln, Startseiten-Kacheln */
.clan-art.has-wall{width:70%}
.clan-art img.is-wall{opacity:.82;filter:saturate(1.02)}
body:not([data-screen="game"]) .clan-choice:hover .clan-art img.is-wall,body:not([data-screen="game"]) .clan-choice.selected .clan-art img.is-wall{opacity:1}
.deck-art img.is-wall{object-position:var(--pos)}
.entry-art img.is-wall{object-position:var(--pos)!important;opacity:.72}
body:not([data-screen="game"]) .entry:hover .entry-art img.is-wall{opacity:.95}
.is-wall.is-flip{scale:-1 1}

/* Zweitsitz-Bonus-Chi (V3-c): goldene Kugel */
.hud-orbs i.bonus.on,.chi-orbs i.bonus.on{background:radial-gradient(circle at 35% 30%,#fff6c8,#f0b83a 55%,#8a5a12)!important;box-shadow:0 0 10px rgba(255,200,90,.85)!important}

/* ===== In-Game-Runde 25.09. (Nutzer 23:41): HUD-Fehler ===== */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  /* Deck/Ablage: Leiste ist um --drop abgesenkt → Zähler lagen bei jeder Größe teils unter dem Bildrand.
     Sie decken die ins HUD-Bild gemalten Beispielzahlen ab; deshalb an derselben Stelle bleiben und nur bis zum sichtbaren Rand hochrücken. */
  body.stage-on .game.has-hud-skin .hud-skin .hud-count{top:auto!important;bottom:calc(var(--drop) + 3px)!important;height:auto!important;min-height:calc(var(--H) * .1);padding:.2em .2em .25em;
    background:linear-gradient(180deg,#1a110cf5,#0b0806fa);border-color:#b38b45;box-shadow:0 0 0 2px #0b0806,0 4px 12px #000c}
  body.stage-on .game.has-hud-skin .hud-skin .hud-count small{font:600 .72em Cinzel,Georgia,serif;letter-spacing:.14em;text-transform:uppercase}
  /* Anführer: Rufname groß, Beiname klein darunter (hud-skins.js splitLeaderName) */
  body.stage-on .game .hud-skin .hud-name small,body.stage-on .game .hud-enemy .hud-name small{letter-spacing:.02em}
  /* Kartenfokus beim Zielen: schmal oben rechts, damit die rechten Felder frei bleiben */
  body.stage-on .game .selection-panel.is-open.has-card.is-targeting:not(.is-min){width:min(300px,22vw);display:block;padding:10px 14px 14px;max-height:none;overflow:visible}
  body.stage-on .game .selection-panel.is-open.has-card.is-targeting>.card{display:none}
  body.stage-on .game .selection-panel.is-open.has-card.is-targeting>h3{font-size:17px;margin:0 0 6px}
  body.stage-on .game .selection-panel.is-open.has-card.is-targeting :is(.selection-rules,.legal-list,.log-box,.aside-divider,.champ-details-btn,.view3p-button){display:none!important}
  body.stage-on .game .selection-panel.is-open.has-card.is-targeting>p:not(.eyebrow){display:none}
  body.stage-on .game .selection-panel.is-open.has-card.is-targeting .selection-prompt{font-size:13.5px;padding:8px 10px;animation:ki-prompt 1.6s ease-in-out infinite}
  body.stage-on .game .selection-panel.is-open.has-card.is-targeting .action-tabs{grid-column:1/-1}
  @keyframes ki-prompt{0%,100%{box-shadow:0 0 0 0 #e3bd7800}50%{box-shadow:0 0 0 1px #e3bd78aa,0 0 18px #e3bd7855}}
}
/* Gespielte Karten: bei vielen Einträgen weich auslaufen statt hart abgeschnitten */
.play-rail:has(li:nth-child(5)) ol{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
@media (prefers-reduced-motion:reduce){body.stage-on .game .selection-panel.is-targeting .selection-prompt{animation:none}}
/* Zielfelder beim Ausspielen: klar lesbar (vorher dünne, fast unsichtbare Umrisse) */
body.stage-on .battlefield .slot.empty.potential{border:1.5px solid #f3c060!important;border-radius:8px;background:radial-gradient(ellipse at 50% 55%,#f3c06038,#f3c0600a 72%)!important;
  box-shadow:0 0 16px #f3c06050,inset 0 0 12px #f3c06030;animation:ki-slot 1.5s ease-in-out infinite;cursor:pointer}
body.stage-on .battlefield .slot.empty.potential>span{font:700 10.5px Cinzel,Georgia,serif;letter-spacing:.2em;color:#ffe9b8;text-shadow:0 1px 3px #000,0 0 8px #000}
body.stage-on .battlefield .slot.empty.potential>svg{color:#ffe9b8;filter:drop-shadow(0 1px 2px #000)}
body.stage-on .battlefield .slot.empty.potential:is(:hover,:focus-visible){background:radial-gradient(ellipse at 50% 55%,#ffe2a066,#f3c06022 75%)!important;border-color:#fff3d0!important;box-shadow:0 0 26px #f3c06099,inset 0 0 18px #f3c06055;animation:none}
@keyframes ki-slot{0%,100%{box-shadow:0 0 10px #f3c06033,inset 0 0 8px #f3c06022}50%{box-shadow:0 0 22px #f3c06077,inset 0 0 16px #f3c06044}}
@media (prefers-reduced-motion:reduce){body.stage-on .battlefield .slot.empty.potential{animation:none}}
/* Figuren-Status auf dem Brett: farbige Pillen statt schwarzer Kästen (Bereit = Gold, Erschöpft = matt, Gegner = Karmin, HP = rot) */
body.stage-on .battlefield .unit .status-tag{font:700 9.5px Cinzel,Georgia,serif;letter-spacing:.14em;padding:3px 8px;border-radius:999px;border:1px solid #6d5630;background:#0e0a08e6;color:#e9dcc2;box-shadow:0 2px 6px #000a}
body.stage-on .battlefield .unit .status-tag.is-ready{border-color:#f3c060;color:#ffe9b8;background:linear-gradient(180deg,#3a2810f0,#1a1108f0);box-shadow:0 0 10px #f3c06066,0 2px 6px #000a}
body.stage-on .battlefield .unit .status-tag.is-tired{color:#a99d8a;border-color:#4a4036;background:#0c0a09d9}
body.stage-on .battlefield .unit .status-tag.is-foe{border-color:#c0402f;color:#ffd9cf;background:linear-gradient(180deg,#4a1510f0,#220a07f0)}
body.stage-on .battlefield .unit .status-tag.is-hp{border-color:#c0402f;color:#fff;background:linear-gradient(180deg,#8d1d16f0,#4a0d09f0);font-family:Georgia,serif;letter-spacing:.02em;font-size:11px}

/* ===== Handy-Duell (QA 26.09.): Hand als feste Leiste unten, Arena füllt den Rest — nichts mehr unter dem Bildrand ===== */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on[data-screen="game"]{--mhand:clamp(132px,19svh,172px)}
  body.stage-on[data-screen="game"] .game{padding-bottom:calc(var(--mhand) + 10px)!important}
  body.stage-on[data-screen="game"] .game .battlefield{min-height:clamp(260px,calc(100svh - 48px - 44px - 70px - 70px - 60px - var(--mhand) - 20px),520px)!important}
  body.stage-on[data-screen="game"] .game .arena>.hand{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:25;height:var(--mhand)!important;min-height:0!important;max-height:var(--mhand)!important;box-sizing:border-box!important;
    width:auto!important;max-width:none!important;margin:0!important;padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important;display:flex!important;flex-wrap:nowrap!important;
    align-items:stretch;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;transform:none!important;
    background:linear-gradient(180deg,rgba(24,15,11,.9),rgba(10,7,6,.98));border-top:1px solid rgba(216,179,106,.45);box-shadow:0 -12px 26px rgba(0,0,0,.6)}
  body.stage-on[data-screen="game"] .game .arena>.hand::-webkit-scrollbar{display:none}
  body.stage-on[data-screen="game"] .game .arena>.hand .card{flex:0 0 auto!important;height:calc(var(--mhand) - 18px)!important;width:auto!important;aspect-ratio:2/3;max-width:none!important;
    margin:0!important;transform:none!important;scroll-snap-align:start;position:relative!important;left:auto!important;top:auto!important;rotate:none!important}
  body.stage-on[data-screen="game"] .game .arena>.hand .card.is-selected{box-shadow:0 0 0 2px #f3c060,0 0 16px rgba(243,192,96,.6)!important}
  body.stage-on[data-screen="game"] .game .arena>.hand-label{display:none!important}
  body.stage-on[data-screen="game"] .game .turn-guide{display:none!important}
  body.stage-on[data-screen="game"] .game .game-toolbar{margin:4px 0!important}
}
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on[data-screen="game"]{--mact:54px}
  body.stage-on[data-screen="game"] .game{padding-bottom:calc(var(--mhand) + var(--mact) + 12px)!important}
  body.stage-on[data-screen="game"] .game .game-toolbar .eyebrow{display:none!important}
  body.stage-on[data-screen="game"] .game .battlefield{min-height:clamp(250px,calc(100svh - 48px - 40px - 70px - 85px - var(--mact) - var(--mhand) - 26px),520px)!important}
  body.stage-on[data-screen="game"] .game .arena>.action-strip{position:fixed!important;left:0!important;right:0!important;bottom:var(--mhand)!important;top:auto!important;z-index:26;
    height:var(--mact);margin:0!important;padding:6px 12px!important;display:flex!important;align-items:center;justify-content:space-between;gap:10px;
    background:linear-gradient(180deg,rgba(14,9,7,.82),rgba(20,13,10,.95));border-top:1px solid rgba(216,179,106,.25)}
  body.stage-on[data-screen="game"] .game .arena>.action-strip .primary{min-height:42px!important;padding:0 16px!important}
  body.stage-on[data-screen="game"] .game .arena>.action-strip :is(h2,.turn-copy strong){font-size:18px!important;margin:0!important}
}

/* ── Spielformat-Wahl + Handlimit (Claude 26.09.2026, Nutzer: Duel wie Yu-Gi-Oh, Speed fürs Handy) ── */
.format-picker{margin:4px 0 26px}
.format-picker .format-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px}
.format-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"k n" "k s" "l l";column-gap:18px;row-gap:2px;
  text-align:left;padding:22px 24px 20px;border-radius:14px;cursor:pointer;color:var(--washi);
  background:linear-gradient(160deg,rgba(40,24,17,.96),rgba(15,10,8,.96));border:1px solid rgba(216,179,106,.28);
  box-shadow:inset 0 1px 0 rgba(243,217,154,.08),0 10px 26px rgba(0,0,0,.35);transition:border-color .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1)}
.format-card:hover{border-color:rgba(243,217,154,.6);transform:translateY(-2px)}
.format-card:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.format-card.is-on{border-color:var(--gold-leaf);box-shadow:inset 0 0 0 1px rgba(243,217,154,.35),0 0 0 1px rgba(216,179,106,.25),0 14px 34px rgba(0,0,0,.45),0 0 32px rgba(216,179,106,.16)}
.format-card.is-on::after{content:'選択';position:absolute;top:14px;right:16px;font:600 10px var(--display);letter-spacing:.3em;color:#1a0f0a;background:var(--gold-leaf);padding:4px 8px 4px 10px;border-radius:999px}
.format-card .fc-kanji{grid-area:k;font:700 54px/1 var(--heading);color:var(--gold-hi);text-shadow:0 0 22px rgba(216,179,106,.35);align-self:center}
.format-card.is-speed .fc-kanji{color:#f0a98c;text-shadow:0 0 22px rgba(224,106,74,.35)}
.format-card .fc-name{grid-area:n;font:700 24px/1.1 var(--heading);align-self:end}
.format-card .fc-sub{grid-area:s;font:600 10.5px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-leaf);opacity:.9}
.format-card ul{grid-area:l;list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(216,179,106,.18);display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px;color:rgba(244,233,214,.82)}
.format-card li{position:relative;padding-left:14px}
.format-card li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--gold-leaf);transform:rotate(45deg)}
.format-card:not(.is-on){opacity:.78}
@media (max-width:720px){.format-picker .format-cards{grid-template-columns:1fr}.format-card{padding:18px}.format-card .fc-kanji{font-size:42px}.format-card ul{grid-template-columns:1fr}}
.pill.pill-format{border-color:rgba(216,179,106,.55);color:var(--gold-hi)}
.pill.pill-format.is-speed{border-color:rgba(224,106,74,.6);color:#f4b39b}
/* Handlimit: Leiste über der Hand, Abwerf-Modus färbt die Karten zinnoberrot */
.discard-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 4px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(90deg,rgba(120,28,18,.55),rgba(40,16,12,.85));border:1px solid rgba(224,106,74,.55);color:#fbe6da;font-size:13px;position:relative;z-index:6}
.discard-bar p{margin:0;flex:1 1 220px}
.discard-bar .db-kanji{font:700 20px var(--heading);color:#f4b39b}
.discard-bar.is-active{box-shadow:0 0 24px rgba(224,106,74,.35)}
.discard-bar button{min-height:36px}
.hand.is-discarding .card{outline:2px dashed rgba(240,120,90,.85);outline-offset:-4px;cursor:crosshair}
.hand.is-discarding .card:hover{filter:saturate(.6) brightness(.85);transform:translateY(-8px)}
@media (prefers-reduced-motion:reduce){.format-card{transition:none}.format-card:hover{transform:none}}
/* Abwerf-Leiste im 3D-HUD: schwebt mittig direkt über dem Hand-Tablett, nicht oben am Rand */
body.stage-on .game.has-hud-skin .arena>.discard-bar{position:fixed;left:50%;transform:translateX(-50%);top:auto;
  bottom:calc(var(--H) * (1 - var(--hand-y)) + 14px);width:min(760px,calc(100vw - 32px));margin:0;z-index:12;
  background:linear-gradient(90deg,rgba(110,24,15,.92),rgba(30,12,9,.94));backdrop-filter:none}
.hand.is-discarding .card{box-shadow:0 0 0 2px #e06a4a,0 0 18px rgba(224,106,74,.55)!important}
/* Handy (27.09.): die HUD-Skin-Regel oben ist spezifischer und hob die Leiste mitten über die Bühne → hier beide Selektoren,
   Leiste sitzt knapp und einzeilig direkt über „Your turn“, Knopf rechts daneben.
   27.09. 18:00: sie deckte so die eigene Anführer-Zeile (Name/Leben) → jetzt um deren Höhe (--mlead) höher, liegt am Bühnenrand */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on .game .arena>.discard-bar,body.stage-on .game.has-hud-skin .arena>.discard-bar{position:fixed;left:8px;right:8px;width:auto;transform:none;top:auto;
    bottom:calc(var(--mhand,150px) + var(--mact,54px) + var(--mlead,92px) + 8px);z-index:40;padding:6px 8px 6px 10px;font-size:11.5px;line-height:1.3;gap:8px;flex-wrap:nowrap}
  .discard-bar .db-kanji{display:none}
  .discard-bar p{flex:1 1 auto;min-width:0}
  .discard-bar button{min-height:32px;padding:4px 10px;font-size:11.5px;white-space:nowrap;flex:0 0 auto}
  .discard-bar.is-active{flex-wrap:wrap}
  .discard-bar.is-active p{flex-basis:100%}
}
/* Handy quer (27.09. 21:55): 760 px breite Leiste lag mitten über der Bühne und deckte den Ultimate-Knopf →
   schmal und einzeilig zwischen Ultimate (links) und End-Turn (rechts), direkt über dem Hand-Tablett.
   02.10.: unter 700 px Breite blieben nur 188 px → Text 10 Zeilen hoch mitten übers Brett → mindestens 320 px */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on .game .arena>.discard-bar,body.stage-on .game.has-hud-skin .arena>.discard-bar{width:min(420px,max(320px,calc(100vw - 380px)));
    bottom:calc(var(--H) * (1 - var(--hand-y)) + 20px);padding:5px 8px 5px 10px;font-size:11px;line-height:1.3;gap:8px;flex-wrap:nowrap}
  .discard-bar .db-kanji{display:none}
  .discard-bar p{flex:1 1 auto;min-width:0}
  .discard-bar button{min-height:30px;padding:3px 10px;font-size:11px;white-space:nowrap;flex:0 0 auto}
  .discard-bar.is-active{flex-wrap:wrap}
  .discard-bar.is-active p{flex-basis:100%}
}
body.stage-on .game .hand.is-discarding .card,.game .hand.is-discarding .card{outline:2px solid #e06a4a!important;outline-offset:-3px!important;filter:drop-shadow(0 0 8px rgba(224,106,74,.85)) saturate(.85)}
/* Chi-Steine ruhiger (Nutzer 26.09.: „strahlen zu viel“): polierter Stein statt Leuchtkugel, nur ein Hauch Glanz */
.hud-skin .hud-orbs i.on,body.stage-on .game .chi-orbs i.on{background:radial-gradient(circle at 38% 32%,#d6e8f4 0 8%,#5b8fbd 34%,#2a5580 64%,#12263b)!important;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.18),0 0 .22em rgba(90,150,210,.28)!important}
.hud-skin[data-theme="sakura"] .hud-orbs i.on{background:radial-gradient(circle at 38% 32%,#f6dbe8 0 8%,#c0668f 34%,#7e3358 64%,#3a1428)!important;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.18),0 0 .22em rgba(210,110,160,.28)!important}
.hud-orbs i.bonus.on,.chi-orbs i.bonus.on{background:radial-gradient(circle at 38% 32%,#f3e2b8 0 8%,#c9a14e 34%,#8a6424 64%,#3f2a0c)!important;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.2),0 0 .22em rgba(216,179,106,.3)!important}
.hud-skin .hud-orbs i:not(.on),body.stage-on .game .chi-orbs i:not(.on){background:#12161c!important;border-color:#34465a!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)!important}
/* Handkarte flackerte beim Drüberfahren (Nutzer 26.09.): die gehobene Karte verließ den Mauszeiger → Hover aus →
   Karte fällt zurück → Hover an. Ein unsichtbarer Steg unter der gehobenen Karte hält den Hover stabil.
   03.10. (Desktop-QA HOCH 1): `.card{overflow:hidden}` schnitt den Steg ab → Klick nach Verweilen landete auf `.hand`.
   Steg jetzt flach + 3D, Karte beim Hover ohne Abschneiden (Bild/Verlauf tragen die runden Ecken); nur echte Maus, Touch unberührt. */
@media (hover:hover) and (pointer:fine){
  .game .hand:not(.is-discarding) .card:not(.is-selected):not(.is-mulligan):hover{overflow:visible}
  .game .hand:not(.is-discarding) .card:not(.is-selected):not(.is-mulligan):hover::after{content:'';position:absolute;left:-6%;right:-6%;top:96%;height:60%;background:transparent;pointer-events:auto}
  .game .hand .card:hover .card-image,.game .hand .card:hover .card-fade{border-radius:inherit}
}
/* Laufendes Duell fortsetzen (Nutzer 26.09.: „ich muss neu anfangen“): groß und sofort sichtbar statt kleiner Textlink */
.resume-duel{display:flex;align-items:center;gap:16px;margin:18px 0 6px;padding:14px 18px;min-width:min(520px,100%);max-width:560px;text-align:left;cursor:pointer;
  border-radius:14px;border:1px solid var(--gold-leaf);color:var(--washi);background:linear-gradient(100deg,rgba(143,36,25,.9),rgba(40,20,14,.94));
  box-shadow:0 0 0 1px rgba(243,217,154,.18),0 12px 30px rgba(0,0,0,.45);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.resume-duel:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(243,217,154,.4),0 16px 36px rgba(0,0,0,.5),0 0 26px rgba(216,179,106,.2)}
.resume-duel:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.resume-duel .rd-kanji{font:700 34px/1 var(--heading);color:var(--gold-hi)}
.resume-duel .rd-copy{flex:1;display:grid;gap:2px}
.resume-duel .rd-copy b{font:700 18px var(--heading)}
.resume-duel .rd-copy small{font-size:12.5px;color:rgba(242,231,211,.75)}
.resume-duel .rd-go{display:flex;align-items:center;gap:6px;font:600 11px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi)}
.resume-duel .rd-go svg{width:16px;height:16px}
/* Verdeckt 伏せ (Nutzer 26.09.): Silhouette des Gegners, eigene verdeckte Figur, Umschalter offen/verdeckt */
.unit.is-hidden-foe{display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(106,79,216,.45),rgba(12,8,20,.95) 70%);border:1px solid rgba(154,120,255,.5)}
.unit.is-hidden-foe .unit-silhouette{font:700 38px/1 var(--heading);color:rgba(210,190,255,.85);text-shadow:0 0 18px rgba(140,100,255,.7)}
.unit.is-set{outline:1px dashed rgba(154,120,255,.8);outline-offset:-3px;filter:saturate(.7)}
.unit.is-set .status-tag,.unit.is-hidden-foe .status-tag{background:#2a1d55;color:#e2d6ff;border-color:#7a5cff}
/* Notfall-Loop 27.09.: die HUD-Schild-Regeln (body.stage-on … .status-tag.is-foe) waren spezifischer → SET war rot statt violett. */
body.stage-on .battlefield .unit:is(.is-set,.is-hidden-foe) .status-tag{background:linear-gradient(180deg,#3a2878f0,#1d1440f0);color:#e2d6ff;border-color:#7a5cff}
/* Projiziertes Brett: gegnerische Felder eine Ebene tiefer, damit ihre Schilder nie eine eigene Figur verdecken
   (im Hochformat liegen die Reihen nur ~20 px auseinander). Bühne liegt bei z-index 0, bleibt darunter. */
body.stage-on .battlefield.slots-projected .slot:has(.status-tag.is-foe){z-index:1}
/* Markiertes Ziel (Angriff/Technik) liegt über jedem Nachbarfeld: Gegnerfeld hinter eigener Figur blieb sonst unter deren Namensschild (Vollpartie Speed 1600, 07.10.). */
body.stage-on .battlefield.slots-projected .slot:has(.unit.potential){z-index:3}
/* Autobuild 03.10. (Tipp-Partie 360×740): dadurch lag das leere hintere Gegnerfeld („BACK ROW", z 2) über dem
   vorderen Gegner-Krieger (40×24) und schluckte den Angriffs-Tap. Leere Gegnerfelder ohne Aktion lassen Taps durch;
   eigene leere Felder bleiben Ablageziel fürs Ziehen. */
body.stage-on .battlefield.slots-projected .board-row:not(.centerline ~ .board-row) .slot.empty:not([data-slot]){pointer-events:none}
/* Autobuild 07.10. (Vollpartie Speed 1600): eigene Figur der Vorderreihe ragt im Bild in die Gegnerreihen; deren Schilder
   ("ENEMY", leeres "BACK ROW") lagen quer auf ihr. Felder hinter eigener Figur treten zurueck, Angriffsziele bleiben voll. */
body.stage-on .battlefield.slots-projected .slot.behind-own:not(.potential):not(:has(.potential)){opacity:.28;transition:opacity .2s}
/* Autobuild 07.10. Duel 1600 Zug 12: leeres Feld hinter einer Figur (Aufsteller) ganz aus, auch abgeblendet lag "BACK ROW" quer auf dem Kartenbild */
/* Autobuild 07.10. 375x667: neues Feld-Element startet mit Deckkraft 1, die .2s-Blende oben liess "BACK"/"FRONT" bei jedem Neuaufbau kurz auf der Figur aufblitzen -> sofort aus */
body.stage-on .battlefield.slots-projected .slot.empty.behind-own:not(.potential){opacity:0;transition:none}
/* Autobuild 07.10. (Vollpartie Duel 1600 + 390): Schadens-Schild "1000/1900" neben READY wurde von .unit (overflow:hidden)
   bis 59 px gekappt, auf dem Handy war die HP ganz weg. Kunst/Name sind auf der Buehne unsichtbar -> nichts zu kappen. Kein Umbruch:
   zweite Zeile laege auf dem Schluesselwort-Schild (.unit-words, top 20-23 px); HP steht rechts neben READY. */
body.stage-on .battlefield.slots-projected .unit{overflow:visible}
body.stage-on .battlefield.slots-projected .unit-top{right:auto;justify-content:flex-start;white-space:nowrap}
/* 07.10. 10:25 (Vollpartie Duel 1600): Schilder sind ~21 px hoch (top 8 -> unten 29), die Stichwortzeile (top 23) lag 6 px
   darunter und ragte bei langem Wort ("YOKOGIRI 横斬り") ins HP-Schild. Auf der Buehne darunter setzen; Handy-Regel unten bleibt. */
body.stage-on .battlefield.slots-projected .unit-words{top:30px}
/* 07.10. 08:45 (Vollpartie Duel 1600): ferne Gegner-Reihe projiziert nur ~104 px breit; "ENEMY 500/2800" ragte in das
   "ENEMY" des Nachbarfelds. Schmale Felder zeigen wie das Handy nur die aktuelle HP. */
body.stage-on .battlefield.slots-projected .slot{container-type:inline-size}
@container (max-width:159px){body.stage-on .battlefield.slots-projected .unit .status-tag.is-hp .hp-max{display:none}}
/* 07.10. 11:08 (Vollpartie Duel 1024x768 Zug 15): Gegner-Hinterreihe nur ~88 px breit, "ENEMY 1800" (112 px) lag auf dem
   "ENEMY" des Nachbarfelds. Sehr schmale Felder bekommen die kompakten Handy-Schilder. */
@container (max-width:119px){
  body.stage-on .battlefield.slots-projected .unit-top{left:3px;gap:2px}
  body.stage-on .battlefield.slots-projected .unit .status-tag{font-size:7.5px;letter-spacing:.04em;padding:1px 3px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-hp{font-size:9px}
}
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  /* 07.10. 08:25: "ENEMY 1350" beruehrte noch das Schild im Nachbarfeld (SET/ENEMY, Vollpartie Speed 390) -> enger. */
  body.stage-on .battlefield.slots-projected .unit-top{left:3px;gap:2px}
  body.stage-on .battlefield.slots-projected .unit-words{top:24px}
  /* 07.10. 09:25 (Vollpartie Speed 390): "KANTSŪ 貫通" brach im 62-px-Feld zweizeilig um und lag auf dem HP-Schild der Reihe davor. */
  body.stage-on .battlefield.slots-projected .unit-words{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8px)}
  body.stage-on .battlefield.slots-projected .unit .status-tag{font-size:7.5px;letter-spacing:.04em;padding:1px 3px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-hp{font-size:9px}
  /* 07.10.: Handy-Felder ~62 px breit; "900/1900" neben ENEMY lag auf dem Nachbar-Gegner. Hier nur aktuelle HP. */
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-hp .hp-max{display:none}
}
.hidden-foe-focus{display:grid;place-items:center;min-height:120px;border-radius:12px;background:radial-gradient(circle,rgba(106,79,216,.5),rgba(10,6,18,.95) 70%)}
.hidden-foe-focus span{font:700 64px/1 var(--heading);color:#d9ccff;text-shadow:0 0 26px rgba(140,100,255,.8)}
.facedown-tabs button[data-facedown="1"].active{background:linear-gradient(180deg,#3b2a78,#1d1440);border-color:#8f74ff;color:#efe9ff}
/* Impact-Frame (27.09.): ein Hauch invertiertes Schwarz-Weiß beim großen Treffer */
#stage-canvas.impact-frame{filter:grayscale(1) invert(1) contrast(2.4) brightness(1.1)}
@media (prefers-reduced-motion:reduce){#stage-canvas.impact-frame{filter:none}}
/* Notfall-Loop 27.09.: Handy — „Ultimate used“ + Ort machten die Gegner-Leiste ~57 px höher, die Bühne rutschte nach
   unten und die eigene Anführer-Zeile lag unter dem „Your turn“-Pult. Beide jetzt klein nebeneinander in einer Zeile. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on .game .leader.enemy :is(.leader-ultimate,.leader-place){display:flex;margin:2px 0 0;gap:4px;flex-wrap:nowrap;line-height:1.4}
  /* float statt inline: sonst setzt die 24-px-Zeilenhöhe des Elternblocks die Zeilenbox */
  body.stage-on .game .leader.enemy .leader-ultimate:has(+.leader-place){float:left;margin-right:6px}
  body.stage-on .game .leader.enemy .ultimate-spent{font-size:7px;letter-spacing:.06em;padding:1px 5px;line-height:1.4}
  body.stage-on .game .leader.enemy .place-name{font-size:7.5px;letter-spacing:.06em;gap:3px;padding:1px 5px;line-height:1.4}
  body.stage-on .game .leader.enemy .place-name svg{width:9px;height:9px}
}

/* Tablet (Notfall-Loop 27.09. 22:55): 760–1199 px mit Seitenverhältnis unter 8:5 (768×1024, 1024×768) — die Tischleiste ist
   dort 96vw breit, der linke Seitenflügel nur 2vw → Zahnrad lag halb außerhalb des Bildes („ngs 設定“). Hier sitzt es über dem
   Ultimate-Schild am linken Leistenrand, Beschriftung rechts daneben, ohne Drehen beim Hover. */
@media (min-width:760px) and (max-width:1199px) and (max-aspect-ratio:8/5){
  body.stage-on .game.has-hud-skin .hud-skin .hud-settings{left:0;top:auto;bottom:calc(82% + 14px);width:max(38px,4.4%)}
  body.stage-on .game.has-hud-skin .hud-skin .hud-settings:hover,body.stage-on .game.has-hud-skin .hud-skin .hud-settings[aria-expanded="true"]{transform:scale(1.06)}
  body.stage-on .game.has-hud-skin .hud-skin .hud-settings::after,
  body.stage-on .game.has-hud-skin .hud-skin .hud-settings:hover::after,body.stage-on .game.has-hud-skin .hud-skin .hud-settings[aria-expanded="true"]::after{top:50%;left:calc(100% + 8px);transform:translateY(-50%);pointer-events:none}
}

/* --- Flach-Ansicht (WebGL-Ausfall, body ohne .stage-on) — Notfall-Loop 28.09. ---------------------------------
   1) Die PLAYED-Leiste ist ein fester Überleger für die 3D-Bühne; im flachen Brett gibt es keinen freien Rand
      (auf jeder Breite lag sie über Spielkopf/Gegnernamen) → aus.
   2) Handfächer: Überlappung wächst mit der Kartenzahl, damit die Hand nie über den Rand ragt (vorher ab 7 Karten
      bei 768 px bzw. 6 Karten im Handy Seitwärts-Scroll). 132px ≈ Layout-Breite einer Handkarte (+8 px Luft); -12px = alter Wert. */
body[data-screen="game"]:not(.stage-on) .play-rail{display:none!important}
body[data-screen="game"]:not(.stage-on) .game .hand{--hn:5}
body[data-screen="game"]:not(.stage-on) .game .hand:has(>.card:nth-child(6)){--hn:6}
body[data-screen="game"]:not(.stage-on) .game .hand:has(>.card:nth-child(7)){--hn:7}
body[data-screen="game"]:not(.stage-on) .game .hand:has(>.card:nth-child(8)){--hn:8}
body[data-screen="game"]:not(.stage-on) .game .hand:has(>.card:nth-child(9)){--hn:9}
body[data-screen="game"]:not(.stage-on) .game .hand:has(>.card:nth-child(10)){--hn:10}
body[data-screen="game"]:not(.stage-on) .game .hand:has(>.card:nth-child(12)){--hn:12}
body[data-screen="game"]:not(.stage-on) .game .hand>.card{margin-inline:min(-12px,calc((100% / var(--hn) - 132px) / 2))}
@media (max-width:599px){body[data-screen="game"]:not(.stage-on) .game .hand>.card{margin-inline:min(-20px,calc((100% / var(--hn) - 132px) / 2))}}

/* Fallenreihe 罠 (28.09.2026): ein Platz je Spur hinter der hinteren Reihe. Eigene Fallen tragen den Namen,
   gegnerische nur die karminrote Rückseite. Frisch gesetzt = gedimmt (scharf erst ab dem nächsten Zug). */
.trap-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 8px}
.trap-row.own{margin:8px 0 0}
.trap-slot{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:26px;padding:3px 8px;border:1px dashed #ffffff1c;border-radius:4px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#8d857a;background:#0d101380;min-width:0}
.trap-slot b{font:13px/1 'Shippori Mincho B1',var(--serif);color:#7f6b5c;font-weight:400}
.trap-slot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trap-slot.set{border:1px solid #9b3b44aa;background:linear-gradient(135deg,#3a1418e6,#1b0b0de6);color:#e7c7b8}
.trap-slot.set b{color:#e46a6a;text-shadow:0 0 8px #e0404080}
.trap-slot.set.unarmed{opacity:.6}
.trap-slot.potential{border:1px solid var(--gold);background:#c3ac8318;color:var(--gold);cursor:pointer}
.trap-slot.potential:hover{background:#c3ac8330}
.trap-slot:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.offboard-choices{display:grid;gap:6px;margin:-6px 0 14px}
.offboard-choices .eyebrow{margin:0}
/* 3D-Bühne: die Felder liegen projiziert auf der Arena; die Fallenreihe wird dort eine schmale Leiste
   am oberen (Gegner) bzw. unteren (eigene) Rand des Spielfelds statt eines Balkens quer über die Szene. */
body.stage-on .battlefield .trap-row{position:fixed;left:50%;transform:translateX(-50%);width:min(440px,72vw);margin:0;z-index:30;gap:6px;pointer-events:auto}
body.stage-on .battlefield .trap-row.enemy{top:152px}
body.stage-on .battlefield .trap-row.own{bottom:282px}
@media (max-width:760px) and (min-height:501px),(max-width:760px) and (orientation:portrait){body.stage-on .battlefield .trap-row.enemy{top:118px}body.stage-on .battlefield .trap-row.own{bottom:230px}}
body.stage-on .battlefield .trap-slot{min-height:24px;padding:2px 6px;font:700 8px Cinzel,Georgia,serif;letter-spacing:.12em;background:#0e0a08cc;border-color:#6d563066;box-shadow:0 2px 6px #000a}
body.stage-on .battlefield .trap-slot.set{background:linear-gradient(180deg,#4a1510f0,#220a07f0);border-color:#c0402f}
body.stage-on .battlefield .trap-slot.potential{background:linear-gradient(180deg,#3a2810f0,#1a1108f0);border-color:#f3c060;color:#ffe9b8;box-shadow:0 0 12px #f3c06088}

/* R5 Deckcode im Deckbau (29.09.) */
.deck-code-row{margin-top:18px}.deck-code-row .button-row{flex-wrap:wrap}.deck-code-row .input{flex:1 1 260px;min-width:0;font-family:ui-monospace,Consolas,monospace;font-size:13px}

/* R7 Wiederholung (29.09.) — Leiste oben mittig über der Bühne */
.replay-bar{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center;padding:6px 10px;border:1px solid #c9a24a;border-radius:10px;background:linear-gradient(180deg,#1b1210f2,#0d0907f2);box-shadow:0 6px 24px #000a;color:#f3e3bd;font-size:13px}
.replay-bar b{font-family:'Shippori Mincho B1',serif;color:#f3c060;margin-right:4px}
.replay-bar button{min-width:36px;min-height:32px;padding:2px 8px;border:1px solid #c9a24a88;border-radius:7px;background:#2a1c12;color:#ffe9b8;cursor:pointer}
.replay-bar button:hover,.replay-bar button:focus-visible{background:#4a3018;outline:2px solid #f3c060}
.replay-bar span{opacity:.85;padding:0 4px}
.replay-bar .replay-keys{font-size:11px;opacity:.6;white-space:nowrap}
@media (max-width:900px),(pointer:coarse){.replay-bar .replay-keys{display:none}}
.replay-list li{align-items:center}.replay-list button{justify-self:end}
body.is-replay [data-do="end-turn"]{visibility:hidden}
/* Wiedergabe: keine Live-Bedienung (Zug-Text, Hinweis, Ultimate, Handlimit, Emote, Aufträge) — 01.10. */
/* 3D-HUD: „終 End Turn" ist ins Skin-Bild gemalt → in der Wiedergabe eine ruhige „再 Replay"-Scheibe darüber, nicht klickbar. */
body.is-replay .hud-skin .hud-end{visibility:visible;pointer-events:none;animation:none;opacity:1;cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;
  background:radial-gradient(circle,#24160d 0 70%,#140b07 71% 100%);box-shadow:inset 0 0 0 2px #c9a24a99,0 0 1.2em #0008}
body.is-replay .hud-skin .hud-end>*{display:none}
body.is-replay .hud-skin .hud-end::before{content:"再";font:700 clamp(22px,2.6vw,46px)/1 "Noto Serif JP",serif;color:#e9c98a}
body.is-replay .hud-skin :is(.hud-end.is-last,.hud-end)::after{content:"Replay";position:static;inset:auto;animation:none;border:0;font:600 clamp(10px,.9vw,16px)/1 Cinzel,serif;letter-spacing:.06em;color:#d9b877}
body.is-replay .hud-turn small{display:none}
body.is-replay :is(.turn-copy,.turn-guide,.ultimate-hint,.discard-bar,.emote-toggle,.emote-menu,.emote-line,.quest-list){display:none!important}

/* R12 Statistik-Seite (Claude, 29.09.) */
.stats-page .stats-panel{margin-top:8px}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px}
.stat-tile{padding:14px 12px;border:1px solid rgba(216,179,106,.22);border-radius:6px;background:rgba(20,12,10,.7);text-align:center}
.stat-tile b{display:block;font-family:Cinzel,serif;font-size:28px;color:var(--gold-hi,#f3d99a)}
.stat-tile small{color:rgba(240,225,200,.7);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;margin:24px 0}
.stats-page>section.panel,.stats-page .stats-grid{margin-top:24px}
.stat-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.stat-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,1fr) auto auto;align-items:center;gap:10px}
.stat-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-list small{color:rgba(240,225,200,.6);min-width:3ch;text-align:right}
.stat-curve{display:block;width:100%;height:96px;margin-top:12px;border-bottom:1px solid rgba(216,179,106,.22)} /* R12-Rest Saisonkurve */
.stat-curve-line{fill:none;stroke:var(--gold-hi,#f3d99a);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.stat-curve-fill{fill:rgba(216,179,106,.12);stroke:none}
.stat-curve circle{fill:#e0483e;stroke:#f3d99a;stroke-width:1.5;vector-effect:non-scaling-stroke}
.stat-note{margin:10px 0 0;font-size:13px}.stat-note b{color:var(--gold-hi,#f3d99a)}
.stat-past li{grid-template-columns:minmax(0,1fr) auto auto}
.stat-rivals span{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.stat-bar{height:6px;border-radius:3px;background:rgba(216,179,106,.15);position:relative;overflow:hidden}
.stat-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:linear-gradient(90deg,var(--gold-leaf,#c9a45c),var(--gold-hi,#f3d99a))}

/* R6 Rätsel-Seite (Claude, 29.09.) */
.puzzles-page>section.panel{margin-top:24px}
.puzzle-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:10px}
.puzzle-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(216,179,106,.22);border-radius:6px;background:rgba(20,12,10,.7)}
.puzzle-list li>b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:800 16px Cinzel,serif;color:#f3d99a;border:1px solid rgba(216,179,106,.4)}
.puzzle-list li.is-solved{border-color:rgba(143,200,120,.5)}
.puzzle-list li.is-solved>b{background:rgba(90,140,70,.35);color:#e9f6d8}
.puzzle-list span{min-width:0}
.puzzle-list small{display:block;color:rgba(240,225,200,.65);font-size:12px;margin-top:2px}
.puzzle-list details{font-size:12px;color:rgba(240,225,200,.75);margin-top:4px}
.puzzle-list summary{cursor:pointer;color:var(--gold-leaf,#c9a45c)}
/* Tippflächen ≥ 40 px am Handy (Autobuild 01.10., Prüfstand claude-pages-overflow): „Hint" 18 px, Regel-Links 21 px */
.puzzle-list summary{padding:11px 0;line-height:18px}
.page a[href$="spielerhandbuch.html"],.page a[href$="regelheft.html"]{display:inline-block;padding:10px 4px;line-height:20px}

/* --- Spiel-Kopfzeile Premium (Autobuild 29.09.): Lack, Goldlinie, Emblem-Knopf, Hausfarbe; ersetzt die alte Menüzeile im Match --- */
body[data-screen="game"] .topbar.game-head{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px 0 12px;overflow:visible;
  background:linear-gradient(180deg,#1b0e0a 0%,#0c0706 100%);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(216,179,106,.75) 20%,rgba(216,179,106,.75) 80%,transparent) 1;
  box-shadow:inset 3px 0 0 var(--house),0 8px 24px rgba(0,0,0,.45)}
.game-head .game-emblem{flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.game-head .game-emblem .brand-mark{width:40px;height:40px;font-size:24px;box-shadow:0 0 0 1px rgba(216,179,106,.7),0 0 0 3px color-mix(in srgb,var(--house) 45%,transparent);transition:transform .2s}
.game-head .game-emblem:hover .brand-mark,.game-head .game-emblem[aria-expanded="true"] .brand-mark{transform:rotate(-8deg) scale(1.06)}
.game-head .game-emblem:focus-visible{outline:2px solid var(--gold-leaf);outline-offset:3px}
.game-head .brand-word strong{font-size:15px}
.game-head .brand-word small{display:block;margin-top:5px}
.game-head .game-house{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 6px;border-radius:15px;border:1px solid color-mix(in srgb,var(--house) 55%,transparent);
  background:color-mix(in srgb,var(--house) 12%,rgba(8,5,4,.6));color:var(--house);font:600 10px var(--display);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.game-head .game-house img{width:20px;height:20px}
.game-head .rail-status{position:static;display:flex;margin-left:auto;padding:0;background:none;border:0;box-shadow:none}
.game-head .rail-status .status-pill{height:38px}
/* max-height: Kopfzeile ist sticky/fixed → Menü scrollt nicht mit der Seite; auf Querformat-Handy (320 hoch) lagen Ladder/Ranked sonst unter dem Bildrand */
.game-head .game-nav{position:absolute;top:calc(100% + 8px);left:10px;z-index:80;display:grid;gap:2px;min-width:220px;padding:8px;border-radius:12px;
  max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid rgba(216,179,106,.35);background:linear-gradient(180deg,#1d100b,#0b0605);box-shadow:0 18px 50px rgba(0,0,0,.6)}
.game-head .game-nav button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;
  color:#f6e9d2;font:600 12px var(--display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-align:left}
.game-head .game-nav button i{font:15px var(--brush);font-style:normal;color:var(--gold-leaf)}
/* Niedrige Schirme: 9 Punkte zweispaltig (5 Reihen passen in 320 px Höhe) — Scrollen im Menü reicht nicht, Neuzeichnen setzt den Scroll-Stand zurück */
@media (max-height:500px){.game-head .game-nav{grid-template-columns:1fr 1fr;min-width:min(440px,calc(100vw - 20px))}}
.game-head .game-nav button:hover,.game-head .game-nav button:focus-visible{background:rgba(216,179,106,.12);outline:none}
/* Mit 3D-Bühne: schwebende Leiste oben rechts (links oben steht der Gegner-HUD) */
body.stage-on[data-screen="game"] .topbar.game-head{display:flex;position:fixed;top:10px;right:14px;left:auto;height:auto;padding:5px 6px 5px 5px;border-radius:14px;
  border:1px solid rgba(216,179,106,.32);border-image:none;background:rgba(10,6,5,.62);backdrop-filter:blur(6px);box-shadow:inset 3px 0 0 var(--house),0 8px 24px rgba(0,0,0,.4)}
body.stage-on .game-head .brand-word{display:none}
body.stage-on .game-head .game-nav{left:auto;right:0}
@media (max-width:1099px){.game-head .rail-status{display:none}}
@media (max-width:640px){body[data-screen="game"] .topbar.game-head{height:48px;padding:0 10px}.game-head .brand-word{display:none}
  body.stage-on[data-screen="game"] .topbar.game-head{top:auto;bottom:auto;right:8px;padding:3px;gap:6px}
  body.stage-on .game-head .game-house{display:none}.game-head .game-emblem .brand-mark{width:34px;height:34px;font-size:20px}}
/* Flach-Ansicht-Hinweis klein und leise, Endbild-Knopf „Watch replay" im Goldstil */
body[data-screen="game"] .stage-flat{font:600 9.5px var(--display);letter-spacing:.14em;color:#a8957c;border-left:2px solid rgba(216,179,106,.45);opacity:.85}
body[data-screen="game"] .stage-flat .text-button{font-size:inherit;color:var(--gold-leaf)}
.finished-banner .finish-watch{border-color:rgba(216,179,106,.55)!important;color:#f3d99a!important}
@media (max-width:640px){body.stage-on .game .finished-banner .button-row,body .game .finished-banner .button-row{flex-wrap:wrap}body.stage-on .game .finished-banner .button-row > .finish-watch,.finished-banner .button-row > .finish-watch{flex:1 1 100%;min-height:44px}}
/* Endbild auch in der Flach-Ansicht als Premium-Seite (Autobuild 29.09.) */
body:not(.stage-on) .game .finished-banner{text-align:center;border:1px solid rgba(216,179,106,.35);border-radius:14px;background:radial-gradient(ellipse at 50% 0%,rgba(120,60,20,.28),transparent 60%),linear-gradient(180deg,#170c08,#0a0605);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 20px 60px rgba(0,0,0,.5);overflow:hidden}
body:not(.stage-on) .game .finished-banner .finish-title{font:700 clamp(40px,7vw,72px)/1 var(--heading);letter-spacing:.1em;color:#e8c070;text-shadow:0 4px 30px rgba(232,192,112,.25)}
body:not(.stage-on) .game .finished-banner .finish-title b{display:block;margin-top:4px;font:italic 700 clamp(30px,5vw,52px)/1.05 Georgia,serif;letter-spacing:.02em}
body:not(.stage-on) .game .finished-banner.is-loss .finish-title{color:#c83a2e}
body:not(.stage-on) .game .finished-banner .eyebrow{justify-content:center}
body:not(.stage-on) .game .finished-banner h2{font-family:var(--heading)}
body:not(.stage-on) .game .finished-banner .finish-tally{width:100%;max-width:100%;box-sizing:border-box;min-width:0}
body:not(.stage-on) .game .finished-banner .button-row{justify-content:center}
body[data-screen="game"] .stage-flat{padding:3px 0 3px 9px;margin:0 0 8px}
@media (max-width:640px){.replay-bar{left:6px;right:54px;transform:none;max-width:none;flex-wrap:nowrap;gap:3px;padding:4px 5px;justify-content:space-between}.replay-bar b{display:none}.replay-bar button{min-width:30px;min-height:32px;padding:2px 5px;font-size:12px}.replay-bar span{font-size:11px;padding:0 2px;white-space:nowrap}}
/* Wiedergabe-Probe Handy/Tablet 03.10. (3D): oben mittig verdeckte die Leiste den Gegner-HUD — Querformat-Handy: kompakter
   2-Spalten-Block rechts unter Details/Skip; Hochformat: Spielfeld unter die Leiste schieben. */
@media (min-width:641px) and (max-height:500px){
  body.stage-on .replay-bar{top:150px;right:8px;left:auto;transform:none;display:grid;grid-template-columns:repeat(2,40px);gap:4px;padding:5px;max-width:none}
  body.stage-on .replay-bar b{display:none}
  body.stage-on .replay-bar span{order:-1;grid-column:1 / -1;font-size:10px;line-height:1.2;padding:0;text-align:center}
  body.stage-on .replay-bar button{min-width:0;min-height:30px;padding:2px 0;font-size:12px}
}
@media (max-width:640px){body.stage-on.is-replay .game-layout{margin-top:40px}}

/* R1 Prolog 序 (Claude, 29.09.): Einstiegsseite + schwebende Lektionsleiste im Match (auch über der 3D-Bühne). */
.tutorial-page .tutorial-intro{max-width:760px;margin:40px auto 0;padding:32px 34px}
.tutorial-intro h1{font:600 clamp(32px,5vw,50px)/1.05 'Shippori Mincho B1',Cinzel,serif;color:#fff2de;margin:8px 0 12px}
.tutorial-steps{list-style:none;padding:0;margin:18px 0 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:8px}
.tutorial-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(216,179,106,.25);border-radius:6px;background:rgba(20,12,10,.7);color:#e9dcc4;font:600 13px Cinzel,serif;letter-spacing:.04em}
.tutorial-steps li b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(216,179,106,.45);color:#f3d99a}
.tutorial-steps li.is-done{border-color:rgba(143,200,120,.55)}
.tutorial-steps li.is-done b{background:rgba(143,200,120,.2)}
.tutorial-bar{position:fixed;z-index:400;top:150px;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));box-sizing:border-box;padding:12px 16px 12px;border:1px solid rgba(216,179,106,.55);border-radius:8px;background:linear-gradient(180deg,rgba(38,22,16,.96),rgba(18,11,9,.96));box-shadow:0 0 0 1px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.55),inset 0 1px 0 rgba(243,217,154,.15);color:#e9dcc4}
.tutorial-bar::before{content:'';position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,#d8b36a,transparent)}
.tutorial-bar .eyebrow{margin:0 0 2px;font:600 10px Cinzel,serif;letter-spacing:.28em;color:#d8b36a}
.tutorial-bar strong{display:block;font:600 19px 'Shippori Mincho B1',Cinzel,serif;color:#fff2de}
.tutorial-bar p{margin:4px 0 8px;font-size:13.5px;line-height:1.4}
.tutorial-bar .button-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.tutorial-bar button{min-height:34px;padding:6px 14px;font-size:13px}
.tutorial-bar.is-done{border-color:rgba(143,200,120,.7)}
/* Prolog-Leiste (02.10.): styles.css `body.stage-on .game > *{position:relative;z-index:4}` (ab 760 px + quer niedrig) schlug
   `.tutorial-bar` → Leiste im Seitenfluss, Brett-Slots lagen darüber (768×1024: „Next" nicht klickbar). Quer niedrig kompakt wie Handy. */
body.stage-on .game > .tutorial-bar{position:fixed;z-index:400}
@media (max-width:700px),(max-height:500px) and (orientation:landscape){.tutorial-bar{top:50px;padding:8px 12px}.tutorial-bar .eyebrow{display:none}.tutorial-bar strong{font-size:16px}.tutorial-bar p{font-size:12.5px;margin:2px 0 6px}}
@media (prefers-reduced-motion:no-preference){.tutorial-bar{animation:tutorial-in .35s ease-out}@keyframes tutorial-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}}
/* Prolog-Leiste Handy (01.10.): lag über Gegner-Name + Leben. Kompakt (Titel + Knöpfe eine Zeile); 3D-Hochkant in die
   Lücke unter dem Gegner-HUD, Flachansicht im Seitenfluss statt fest darüber. */
@media (max-width:700px),(max-height:500px) and (orientation:landscape){
  .tutorial-bar{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:center;padding:7px 10px 8px}
  .tutorial-bar strong{grid-column:1;grid-row:1;font-size:15px;line-height:1.2}
  .tutorial-bar .button-row{grid-column:2;grid-row:1;flex-wrap:nowrap;gap:2px}
  .tutorial-bar p{grid-column:1/-1;grid-row:2;font-size:12px;line-height:1.32;margin:3px 0 0}
  .tutorial-bar button{min-height:28px;padding:3px 9px;font-size:11.5px;white-space:nowrap}
}
/* Flachansicht bis 1279 px im Seitenfluss (02.10.: feste Leiste lag auf Gegner-Name/-Leben, 768×1024 91–100 %, 1024×600 20 %);
   breiter bleibt sie fest (dort frei), sonst rutscht die Hand bei 720 px Höhe weiter unter den Bildrand. */
@media (max-width:1279px){body:not(.stage-on) .tutorial-bar{position:relative;top:auto;left:auto;transform:none;width:auto;margin:8px 0;z-index:5;animation:none}}
@media (max-width:599px) and (orientation:portrait){body.stage-on .tutorial-bar{top:100px}}

/* R10 Hochkant 390×844 (Claude, 29.09.): Anführer oben/unten kompakt, Brett füllt die Mitte (Hochkant-Kamera in stage3d.js),
   Hand als Fächer statt Scroll-Leiste — alle Karten sichtbar, Tippen/Ziehen wie gehabt. Nur Bühne + schmales Hochformat. */
@media (max-width:599px) and (orientation:portrait){
  body.stage-on[data-screen="game"]{--mhand:clamp(150px,21svh,184px);--mact:50px}
  body.stage-on[data-screen="game"] .game{padding-top:2px!important}
  body.stage-on[data-screen="game"] .game .game-toolbar{margin:0!important;min-height:0}
  body.stage-on[data-screen="game"] .game .game-toolbar button{min-height:40px!important}
  body.stage-on[data-screen="game"] .game .hud-enemy{display:none!important}
  body.stage-on[data-screen="game"] .game .arena>.leader{min-height:50px!important;padding:5px 10px!important;gap:8px;flex-wrap:nowrap!important}
  body.stage-on[data-screen="game"] .game .arena>.leader .leader-name{font-size:15px!important;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.stage-on[data-screen="game"] .game .arena>.leader .leader-caption{font-size:8.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.stage-on[data-screen="game"] .game .arena>.leader .leader-caption :is(.leader-house,.leader-house+.leader-sep){display:none}
  body.stage-on[data-screen="game"] .game .arena>.leader>div:not(.leader-health):not(.resource):not(.enemy-hand){min-width:0;flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:1px}
  body.stage-on[data-screen="game"] .game .arena>.leader .leader-name{flex:1 0 100%}
  body.stage-on[data-screen="game"] .game .arena>.leader .leader-caption{flex:0 1 auto;min-width:0}
  body.stage-on[data-screen="game"] .game .arena>.leader :is(.enemy-hand-count,.leader-ultimate){flex:0 0 auto;margin:0!important;font-size:10px;white-space:nowrap}
  body.stage-on[data-screen="game"] .game .arena>.leader .ultimate-button{min-height:26px!important;padding:2px 8px!important;font-size:9.5px!important}
  body.stage-on[data-screen="game"] .game .arena>.leader .leader-health{font-size:20px!important;min-width:0;padding:2px 9px}
  body.stage-on[data-screen="game"] .game .arena>.leader .resource{font-size:17px!important;padding-left:8px}
  body.stage-on[data-screen="game"] .game .battlefield{min-height:0!important;
    height:clamp(300px,calc(100svh - 44px - 62px - 62px - var(--mact) - var(--mhand) - 8px),560px)!important}
  body.stage-on[data-screen="game"] .game{padding-bottom:calc(var(--mhand) + var(--mact) + 4px)!important}
  body.stage-on[data-screen="game"] .game .arena>.action-strip .turn-copy{font-size:14px!important;line-height:1.2;min-width:0;overflow:hidden}
  body.stage-on[data-screen="game"] .game .arena>.action-strip .turn-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Fächer: Anzahl über :has, Lage je Karte über nth-child; Überlappung so, dass alle Karten in die Breite passen */
  body.stage-on[data-screen="game"] .game .arena>.hand{--hn:1;--cw:calc((var(--mhand) - 30px) * 2 / 3);justify-content:center!important;align-items:flex-end!important;
    overflow:visible!important;scroll-snap-type:none;gap:0!important;padding:14px 10px calc(4px + env(safe-area-inset-bottom))!important}
  body.stage-on[data-screen="game"] .game .arena>.hand .card{--i:1;--d:calc(var(--i) - (var(--hn) + 1) / 2);height:calc(var(--mhand) - 30px)!important;width:var(--cw)!important;min-width:0!important;min-height:0!important;
    margin:0 0 0 min(4px,calc((100vw - 40px - var(--hn) * var(--cw)) / max(1,var(--hn) - 1)))!important;
    transform:translateY(calc(var(--d) * var(--d) * 2.2px)) rotate(calc(var(--d) * 3.2deg))!important;transform-origin:50% 120%;
    transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s;z-index:var(--i)}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:first-child{margin-left:0!important}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:is(.is-selected,:focus-visible){transform:translateY(-26px) scale(1.12) rotate(0deg)!important;z-index:40}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:hover:not(.is-selected){transform:translateY(calc(var(--d) * var(--d) * 2.2px)) rotate(calc(var(--d) * 3.2deg))!important}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(2)){--hn:2}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(3)){--hn:3}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(4)){--hn:4}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(5)){--hn:5}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(6)){--hn:6}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(7)){--hn:7}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(8)){--hn:8}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(9)){--hn:9}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(10)){--hn:10}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(11)){--hn:11}
  body.stage-on[data-screen="game"] .game .arena>.hand:has(>.card:nth-child(12)){--hn:12}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(2){--i:2}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(3){--i:3}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(4){--i:4}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(5){--i:5}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(6){--i:6}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(7){--i:7}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(8){--i:8}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(9){--i:9}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(10){--i:10}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(11){--i:11}
  body.stage-on[data-screen="game"] .game .arena>.hand .card:nth-child(12){--i:12}
  body.stage-on[data-screen="game"] .game .arena>.discard-bar{bottom:calc(var(--mhand) + var(--mact) + 72px)!important;top:auto!important;padding:4px 8px!important;font-size:11.5px}
}
@media (max-width:599px) and (orientation:portrait) and (prefers-reduced-motion:reduce){body.stage-on[data-screen="game"] .game .arena>.hand .card{transition:none}}
/* R10: „Enemy plays“-Einblendung stand ab 218 px links und lief auf dem Handy rechts aus dem Bild → mittig, schmaler. */
@media (max-width:599px){.play-reveal{left:calc(50% - 95px);width:190px;top:108px}}
/* R4 Emotes (30.09.): Knopf 言 unten links nur in der laufenden Partie; Sprechblase über dem Anführer-Podest (emotes.js). */
.emote-dock{display:none;position:fixed;left:22px;bottom:128px;z-index:60;font-family:var(--heading)}
body[data-screen="game"] .emote-dock{display:block}
/* 01.10.: offenes Einstellungsfenster (game-settings.js, eigener Stapelkontext) liegt sonst unter dem Knopf. */
body:has(.settings-sheet) .emote-dock{display:none}
.emote-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--gold-lo);background:radial-gradient(circle at 35% 30%,var(--lac-3),var(--lac));color:var(--gold-hi);font:600 19px/1 var(--brush);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.emote-toggle:hover,.emote-toggle[aria-expanded="true"]{border-color:var(--gold-leaf);color:#fff}
.emote-menu{position:absolute;left:0;bottom:50px;width:min(270px,calc(100vw - 28px));display:grid;gap:4px;padding:8px;border:1px solid var(--frame);border-radius:10px;background:linear-gradient(180deg,var(--lac-2),var(--lac));box-shadow:0 10px 28px rgba(0,0,0,.55)}
.emote-menu[hidden]{display:none}
.emote-line,.emote-mute{text-align:left;padding:7px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--washi);font:14px/1.3 var(--heading);cursor:pointer}
.emote-line:hover,.emote-line:focus-visible{border-color:var(--gold-lo);background:rgba(216,179,106,.1);color:var(--gold-hi)}
.emote-mute{margin-top:4px;border-top:1px solid var(--frame);border-radius:0;color:var(--ash);font-size:12.5px}
.emote-mute[aria-pressed="true"]{color:var(--sakura)}
.emote-bubble{position:absolute;z-index:70;transform:translate(-50%,calc(-100% - 10px));max-width:240px;padding:8px 13px;border:1px solid var(--gold-leaf);border-radius:12px;background:rgba(20,12,10,.94);color:var(--washi);font:600 14px/1.3 var(--heading);text-align:center;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.5);animation:emote-in .22s var(--ease-out),emote-out .4s ease-in 2.8s forwards}
.emote-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:inherit;border:solid var(--gold-leaf);border-width:0 1px 1px 0;transform:translateX(-50%) rotate(45deg)}
@keyframes emote-in{from{opacity:0;transform:translate(-50%,calc(-100% - 2px)) scale(.9)}}
@keyframes emote-out{to{opacity:0}}
.emote-bubble.is-below{transform:translate(-50%,10px);animation:emote-out .4s ease-in 2.8s forwards}
.emote-bubble.is-below::after{bottom:auto;top:-7px;border-width:1px 0 0 1px}
@media (prefers-reduced-motion:reduce){.emote-bubble{animation:none}}
/* 01.10.: Flachansicht (ohne 3D) hat nur 3vw Rand → Knopf (22–64 px) lag über dem Brett; eigene linke Spalte dafür. */
@media (min-width:600px){body[data-screen="game"]:not(.stage-on) .game{padding-left:max(3vw,74px)}}
@media (max-width:599px){.emote-dock{bottom:auto;top:8px;left:auto;right:56px}.emote-toggle{width:36px;height:36px;font-size:16px}.emote-menu{bottom:auto;top:44px;left:auto;right:-40px}}

/* R2 Auftraege (Claude 30.09.): Liste auf der Play-Seite und im Endbildschirm. Nur Anzeige. */
.quest-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.quest-list li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:9px 12px;border:1px solid rgba(216,179,106,.28);border-radius:6px;background:linear-gradient(180deg,rgba(32,20,14,.9),rgba(18,11,8,.9));color:#eadcc4}
.quest-list li span{font-size:14px}
.quest-list li em{font-style:normal;font:600 9.5px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin-right:6px}
.quest-list li b{font:600 13px var(--display);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.quest-list li i{grid-column:1/-1;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi)) 0/calc(var(--p,0)*100%) 100% no-repeat,rgba(255,255,255,.08)}
.quest-list li small{grid-column:1/-1;font-size:11.5px;color:rgba(234,220,196,.66)}
.quest-list li.is-done{border-color:rgba(243,217,154,.7);box-shadow:0 0 14px rgba(216,179,106,.18)}
.quest-list li.is-done small{color:var(--gold-hi)}
.quest-list li.is-weekly{border-style:dashed}
.quest-list li:has(.quest-swap) small{grid-column:1}
.quest-swap{grid-column:2;justify-self:end;min-width:32px;min-height:32px;padding:0 8px;border:1px solid rgba(216,179,106,.45);border-radius:6px;background:rgba(216,179,106,.08);color:var(--gold-hi);font:600 16px/1 var(--display);cursor:pointer}
.quest-swap:hover,.quest-swap:focus-visible{background:rgba(216,179,106,.2);border-color:var(--gold-hi)}
.quest-swap-note{margin:8px 0 0;font-size:11.5px;color:rgba(234,220,196,.55)}
.finish-rewards-label+.quest-list{max-width:520px;margin:6px auto 0;text-align:left}
@media (max-width:599px){.quest-list li{padding:8px 10px}.quest-list li span{font-size:13px}}
/* R11 Anführer-Stufen (Autobuild 30.09.): Abzeichen + Liste, nur Anzeige */
.leader-rank{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid rgba(243,217,154,.55);border-radius:3px;font:600 10px var(--display);letter-spacing:.12em;color:var(--gold-hi);background:rgba(20,12,8,.7);vertical-align:middle;font-variant-numeric:tabular-nums}
.rank-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.rank-list li{display:grid;grid-template-columns:32px 1fr auto;gap:4px 10px;align-items:center;padding:9px 12px;border:1px solid rgba(216,179,106,.28);border-radius:6px;background:linear-gradient(180deg,rgba(32,20,14,.9),rgba(18,11,8,.9));color:#eadcc4}
.rank-list li img{width:32px;height:32px;object-fit:contain;grid-row:span 2}
.rank-list li strong{display:block;font-size:14px}
.rank-list li em{font-style:normal;font:600 9.5px var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)}
.rank-list li b{font:600 14px var(--display);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.rank-list li i{grid-column:2/-1;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi)) 0/calc(var(--p,0)*100%) 100% no-repeat,rgba(255,255,255,.08)}
.rank-list li small{grid-column:1/-1;font-size:11.5px;color:rgba(234,220,196,.66)}
.rank-list li.is-max{border-color:rgba(243,217,154,.7);box-shadow:0 0 14px rgba(216,179,106,.18)}
.finished-banner .rank-list{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
/* R9 Draft 選 (Claude 30.09.) */
.draft-clans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin-top:12px}
.draft-clan{display:grid;justify-items:center;gap:10px;padding:18px 12px;border:1px solid rgba(216,179,106,.35);border-radius:8px;background:rgba(20,12,10,.75);color:var(--gold-hi);font:600 15px var(--display);cursor:pointer}
.draft-clan img{width:64px;height:64px;object-fit:contain}
.draft-clan:hover,.draft-clan:focus-visible{border-color:var(--gold-hi);box-shadow:0 0 18px rgba(216,179,106,.25)}
.draft-pack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.draft-choice{display:grid;gap:10px;min-width:0}
.draft-choice .card{width:100%;max-width:260px;justify-self:center}
.draft-choice>button{justify-self:center;min-width:120px}
.draft-picks{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.draft-picks span{padding:3px 8px;border:1px solid rgba(216,179,106,.22);border-radius:4px;font-size:12px;background:rgba(20,12,10,.6)}
.draft-build{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px;margin:12px 0}
.draft-slot{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:8px 10px;border:1px solid rgba(216,179,106,.18);border-radius:6px;background:rgba(20,12,10,.55);color:#a89a86;cursor:pointer;opacity:.62}
.draft-slot b{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(216,179,106,.4);font:800 14px Cinzel,serif}
.draft-slot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-slot small{font-size:11px;opacity:.75}
.draft-slot.is-in{opacity:1;color:#f6ead2;border-color:rgba(216,179,106,.6);background:rgba(58,34,22,.8)}
.draft-slot.is-in b{color:#f3d99a;background:rgba(125,27,18,.55)}
.draft-record{display:flex;align-items:center;gap:10px;font:600 16px var(--display);color:var(--gold-hi)}
.draft-record b{font-size:34px}
.draft-life{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(216,179,106,.35);color:rgba(216,179,106,.35);font-size:14px}
.draft-life.is-lost{background:#7d1b12;border-color:#cc4633;color:#fff2de}
.draft-rates{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:6px}
.draft-rates li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:6px 10px;border-bottom:1px solid rgba(216,179,106,.14)}
.draft-rates span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-rates b{color:var(--gold-hi)}
.draft-rates small{opacity:.6}
@media (max-width:599px){.draft-pack{grid-template-columns:1fr}.draft-choice .card{max-width:240px}}
/* R11-Rest Stufen-Kosmetik (Autobuild 01.10.): Rahmen je 5 Stufen, Aura bei 30. Nur eigene Platte, nur Optik. */
[data-rank-tier="1"]{--rk:#b97a45;--rk2:#5a3417}
[data-rank-tier="2"]{--rk:#d5dde4;--rk2:#5d6670}
[data-rank-tier="3"]{--rk:#ffc845;--rk2:#8a5a10}
[data-rank-tier="4"]{--rk:#62d0a6;--rk2:#14523d}
[data-rank-tier="5"]{--rk:#ef5a45;--rk2:#5e130d}
[data-rank-tier="6"]{--rk:#ffe7a8;--rk2:#b8322a}
.leader-rank[data-rank-tier]:not([data-rank-tier="0"]){border-color:var(--rk);color:var(--rk);background:linear-gradient(180deg,rgba(20,12,8,.85),color-mix(in srgb,var(--rk2) 45%,rgba(20,12,8,.9)))}
.leader[data-rank-tier] .leader-portrait{border-color:var(--rk)!important;box-shadow:0 0 0 2px #000,0 0 0 4px var(--rk2),0 6px 16px #000c!important}
.hud-skin[data-rank-tier] .hud-portrait{box-shadow:inset 0 0 12px #000,0 0 0 3px var(--rk),0 0 0 5px var(--rk2)}
.leader[data-rank-tier="6"] .leader-portrait,.hud-skin[data-rank-tier="6"] .hud-portrait{animation:rank-aura 3.2s ease-in-out infinite}
.leader[data-rank-tier="6"] .leader-portrait{box-shadow:0 0 0 2px #000,0 0 0 4px var(--rk2),0 0 18px 4px rgba(255,214,120,.55),0 6px 16px #000c!important}
.hud-skin[data-rank-tier="6"] .hud-portrait{box-shadow:inset 0 0 12px #000,0 0 0 3px var(--rk),0 0 0 5px var(--rk2),0 0 22px 6px rgba(255,214,120,.55)}
@keyframes rank-aura{50%{filter:brightness(1.12) drop-shadow(0 0 10px rgba(255,214,120,.7))}}
@media (prefers-reduced-motion:reduce){.leader[data-rank-tier="6"] .leader-portrait,.hud-skin[data-rank-tier="6"] .hud-portrait{animation:none}}

/* R5-Rest Deckbau-Filter (Autobuild 01.10.): Abstand Filterzeile -> Kartenpool */
.deck-filter{margin:22px 0 16px}
.deck-pool-empty{padding:18px 4px}
/* R5-Rest 2 Chi-Filter (Autobuild 01.10.): Chi-Knöpfe schmal; Handy = eine Zeile als Raster */
.deck-cost-tabs button{padding:0 12px}
@media (max-width:700px){.deck-cost-tabs{display:grid;grid-template-columns:auto repeat(7,1fr);width:100%}.deck-cost-tabs button{padding:0 6px;letter-spacing:.06em}}
/* Kontrast Spielbrett (Autobuild 02.10.): leere Feldlabels und leerer Ablagestapel waren 3,1:1 bzw. 2,3:1 (WCAG AA 4,5:1) -> ~4,6:1 / ~4,9:1 */
.slot.empty span{opacity:1}
.pile-button.is-empty{opacity:.75}
/* Handy quer (Autobuild 02.10., work/claude-landscape-probe-2.mjs): bei 844×390 lag „Keep all cards“ bei y=482 im festen,
   nicht scrollbaren Mulligan-Kasten (Partie nicht startbar), Flachansicht schnitt oben ab; Emote-Menü ragte 62 px über den Rand. */
@media (max-height:500px) and (orientation:landscape){
  body .game .mulligan-stage:not(.is-waiting){justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;gap:6px;padding:10px 16px}
  body:not(.stage-on) .game .mulligan-stage:not(.is-waiting){padding-top:62px} /* Flachansicht: Kopfleiste bleibt darüber */
  .mulligan-stage .eyebrow{display:none}
  .mulligan-stage h2{font-size:26px}.mulligan-stage h2 span{display:inline;margin:0 0 0 10px;font-size:20px}
  .mulligan-stage .mull-hint{margin:0;font-size:12.5px}
  .mull-cards{flex-wrap:nowrap;align-self:safe center;gap:10px;margin:4px 0 8px} /* 12.10.: 667x375 Reihe breiter als Schirm */
  .mull-cards .card{width:min(15vw,124px,27vh)!important}
  body.stage-on[data-screen="game"]:has(.mulligan-stage:not(.is-waiting)) .emote-dock{display:none}
  .mull-cards .card .card-rules{display:none}
  body .game .mulligan-stage .primary{min-height:44px}
  .emote-menu{bottom:auto;top:50%;left:50px;transform:translateY(-50%);max-height:calc(100dvh - 16px);overflow-y:auto}
}

/* Sammlung Handy (Autobuild 02.10.): klebender Filterkasten (224-515 px hoch) verdeckte beim Scrollen 56-83 % des Bildes
   (667x375: Kopfleiste + Kasten = ganzes Bild). Auf Handy hoch/quer scrollt er mit, Desktop/Tablet bleibt klebend. */
@media (max-width:759px), (max-height:500px){.archive-tools{position:relative;top:auto}}

/* Endbildschirm Desktop/quer (Autobuild 02.10.): Vollbild-Ebene (styles.css) mittig ohne Scrollen — war der Inhalt höher als das
   Bild (1280x720, 1024x600, Handy quer), ragten Titel oben und „New Duel"/„Back"/„Replay" unten heraus, nicht erreichbar.
   Jetzt eigenes Scrollen, Inhalt beginnt oben wenn zu hoch, Knopfzeile klebt unten im Bild. */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game .finished-banner{overflow-y:auto;overscroll-behavior:contain;justify-content:safe center;padding-block:max(14px,env(safe-area-inset-top)) 0}
  body.stage-on .game .finished-banner > *{flex:0 0 auto;max-width:100%}
  body.stage-on .game .finished-banner .button-row{position:sticky;bottom:0;z-index:2;justify-content:center;width:100%;margin-bottom:0;
    padding:12px 16px max(14px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(8,5,4,.92) 38%)}
}

/* Endbildschirm Handy hoch (Autobuild 02.10.): bei der End-Kamerafahrt rutschten projizierte Brett-Slots (.slots-projected .slot,
   absolut) 6-11 px über den rechten Rand -> Seite breiter als das Gerät -> Chrome mobil zoomte heraus, ab 760 px Layout-Breite
   griffen die Desktop-Regeln und schaukelten innerWidth auf 1200-1480 hoch („New Duel" traf nicht). clip = kein Scroll-Container,
   feste Ebenen (Hand, Banner, Leisten) bleiben unberührt. */
@media (max-width:759px){body.stage-on .game{overflow-x:clip}}

/* Emote-Menü Handy quer schmal (Autobuild 02.10.): unter 600 px sitzt der Knopf oben rechts (Regel max-width:599px), der
   Quer-Block oben zentriert das Menü aber senkrecht um den Knopf und schiebt es nach rechts -> 568x320: Einträge y -107…84
   und rechts abgeschnitten. Hier öffnet es unter dem Knopf nach links, scrollt bei zu wenig Höhe. */
@media (max-width:599px) and (max-height:500px) and (orientation:landscape){
  .emote-menu{top:44px;bottom:auto;left:auto;right:0;transform:none;max-height:calc(100dvh - 52px);overflow-y:auto}
}

/* Chi-Zahl oben links auf hellem Kartenbild lesbar (Autobuild 03.10., Fund bei der Shogun-V2-Sichtprobe):
   styles.css gibt nur einen weichen Schatten (0 2px 8px), in der Sammlung zusätzlich grau (#aaa299, is-unplayable) ->
   bei hellem Himmel/Wasser (Mirror Shrine, Retreat Drum, Last Breath Vow) verschwand die Zahl. Enge dunkle Kontur. */
.card .card-cost{text-shadow:0 0 1px #000,0 0 2px #000,0 0 4px #000,0 0 7px #000d,0 2px 10px #000}

/* Handy quer (Autobuild 03.10., Fund Tipp-Partie 844x390): die gewählte Handkarte hob sich per styles.css um 22 % + 1,12-fach
   (177 px Karte bei 390 px Bildhöhe, Hand-Oberkante 285) bis über beide eigenen Feldreihen (y 190–238) -> „Select a marked
   empty slot" ohne treffbares Feld. Quer nur 4 px heben, dafür Goldring (wie Hochkant); schon -8 px + 1,04 lagen 3 px im
   hinteren Feld. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on .game.has-hud-skin .arena>.hand .card.is-selected,body.stage-on .game .arena>.hand .card.is-selected{transform:translateY(-4px);box-shadow:0 0 0 2px #f3c060,0 0 16px rgba(243,192,96,.6)!important}
}
/* Handlimit-Hinweisleiste (passiv, ohne Abwurf-Auswahl) liegt auf Tablet hochkant 768×1024 und am Desktop über der eigenen
   hinteren Reihe: solange eine Handkarte gewählt ist, weg — der Spieler legt gerade ab; die aktive Abwurf-Auswahl .is-active bleibt. */
body.stage-on .game:has(.hand .card.is-selected) .arena>.discard-bar:not(.is-active){display:none}
/* Projiziertes Brett, Reihen eng (quer 844x390: Mittenabstand 22 px, Kästen 26 px hoch): Symbol + zweizeiliges „BACK ROW" des
   hinteren Felds ragen ~10 px aus dem Kasten und fingen an der Mitte des vorderen Felds den Tap ab (elementFromPoint = svg des
   Nachbarn). Beschriftung und Symbol lassen Zeiger durch; der Klick geht ohnehin über closest('[data-slot]') ans Feld. */
body.stage-on .battlefield.slots-projected .slot.empty>:is(svg,span){pointer-events:none}
/* Tablet hoch (768x1024, 03.10.): die 736 px breite Abwerf-Leiste lag über Einstellungen-Knopf und Emote „言“ der linken
   HUD-Spalte und 68 px hoch über der unteren eigenen Feldreihe → rechts neben der Spalte, einzeilig mit Knopf, flacher. */
@media (min-width:760px) and (max-width:1023px) and (orientation:portrait){
  body.stage-on .game.has-hud-skin .arena>.discard-bar{left:192px;right:16px;width:auto;transform:none;padding:5px 8px 5px 12px;
    font-size:11.5px;line-height:1.3;gap:8px;flex-wrap:nowrap}
  body.stage-on .game.has-hud-skin .arena>.discard-bar .db-kanji{display:none}
  body.stage-on .game.has-hud-skin .arena>.discard-bar p{flex:1 1 auto;min-width:0}
  body.stage-on .game.has-hud-skin .arena>.discard-bar button{min-height:32px;padding:4px 10px;font-size:11.5px;white-space:nowrap;flex:0 0 auto}
  body.stage-on .game.has-hud-skin .arena>.discard-bar.is-active{flex-wrap:wrap}
  body.stage-on .game.has-hud-skin .arena>.discard-bar.is-active p{flex-basis:100%}
}
/* Desktop-QA HOCH 3 (03.10.): Partie ohne HUD-Skin (Mulligan, Flach-Rückfall, Replay) → die Werkzeugleiste mit „Settings"
   (styles.css: fixed top 8 rechts, z 10) lag in 3D unter der festen Kopfleiste (Profil-Pille, z 61) → unter die Kopfleiste.
   Während der Startwahl deckte die Mulligan-Ebene (z 45) Leiste und „Try 3D again" → darüber. Nur Desktop/Tablet. */
@media (min-width:760px) and (min-height:501px){
  body.stage-on[data-screen="game"] .game:not(.has-hud-skin) .game-toolbar{top:76px}
  body[data-screen="game"] .game:has(.mulligan-stage:not(.is-waiting)) .game-toolbar{z-index:46}
  body:not(.stage-on)[data-screen="game"] .game:has(.mulligan-stage:not(.is-waiting)) :is(.game-toolbar,.stage-flat){position:relative;z-index:46}
}
/* Desktop-QA HOCH 2 (03.10.): 3D mit HUD-Skin hob die gewählte Handkarte per styles.css um 22 % + 1,12-fach (1920: Oberkante
   y 737) über die projizierten Fallen-Felder (y 774–798, „Set trap") → Feld nicht treffbar. Wie Handy quer: nur 4 px heben,
   Goldring zeigt die Wahl. */
@media (min-width:760px) and (min-height:501px){
  body.stage-on .game.has-hud-skin .hand .card.is-selected{transform:translateY(-4px);box-shadow:0 0 0 2px #f3c060,0 0 16px rgba(243,192,96,.6)!important}
}

/* Desktop-Startwahl (04.10.): acht Karten in einer Reihe, Titel unter der Kopfleiste. Nur quer (Tablet hoch: Karten sonst ~80 px). */
@media (min-width:760px) and (min-height:501px) and (orientation:landscape){
  body .game .mulligan-stage:not(.is-waiting){--mulligan-desktop-probe:1;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;gap:8px;padding:76px 16px 16px}
  .mulligan-stage:not(.is-waiting) .mull-hint{margin-bottom:0}
  .mulligan-stage:not(.is-waiting) .mull-cards{flex-wrap:nowrap;gap:10px;margin:4px 0 8px}
  .mulligan-stage:not(.is-waiting) .mull-cards .card{width:min(10.5vw,200px,24vh)!important}
}

/* Desktop-QA 04.10.: flache Partie ist am Desktop höher als das Fenster (1366×768: 793–808 px) → nach Scrollen lagen
   „? Details"/„Settings" unter der festen Kopfleiste (56 px, z 50). Leiste klebt jetzt darunter, dunkler Grund gegen Durchscheinen.
   !important schlägt den älteren Startwahl-Block (position:relative/z 46 + dieses top hätte die Leiste auf .stage-flat geschoben). */
@media (min-width:760px) and (min-height:501px){
  body:not(.stage-on)[data-screen="game"] .game .game-toolbar{position:sticky!important;top:56px;z-index:47!important;pointer-events:none}
  /* Nachtrag 04.10.: voller dunkler Balken lag nach Scrollen über dem Gegner-Anführer (Rätsel 1280×720: Angriff per Maus ins Leere).
     Leiste selbst jetzt durchsichtig + durchklickbar, nur Titel/Knöpfe tragen den dunklen Grund. */
  body:not(.stage-on)[data-screen="game"] .game .game-toolbar>*{pointer-events:auto;background:rgba(9,8,10,.94);border-radius:8px;padding:2px 8px}
  /* Nachtrag 2 04.10.: klebend lagen Titel links über Gegner-Name, Knöpfe rechts über Leben/Chi (Rätsel 1280×720).
     Nur solange die Leiste klebt: Titel aus, Knöpfe in die Mitte (dort ist die Gegner-Leiste leer). Beides bleibt im Fluss →
     Leistenhöhe gleich, kein Springen beim Ankleben. */
  body:not(.stage-on)[data-screen="game"] .game .game-toolbar{container-type:scroll-state;--flat-fit-probe:1}
  @container scroll-state(stuck:top){.game-toolbar>.eyebrow{visibility:hidden}.game-toolbar>.button-row{position:relative;right:50%;transform:translateX(50%)}}
}

/* Desktop-QA 04.10.: 3D-Partie zu Ende → Ergebnis-Overlay (.finished-banner, fixed z 40) liegt über der Werkzeugleiste (z 10);
   „? Details" schien schwach durch, war aber nicht klickbar (Auswahlpaneel liegt ohnehin darunter). Ausblenden wie beim offenen Paneel. */
body.stage-on .game:has(.finished-banner) .panel-toggle{opacity:0;pointer-events:none;visibility:hidden}

/* Desktop-QA 04.10. (1280×720 flach): Brett-Slots schrumpfen bis 46 px (styles.css clamp((100vh-470px)/6)). Dann lagen
   HP-Plakette „100/850“ und Bogen-/Kamae-Zeichen rechts über den Werten, READY oben auf dem Namen, Schlagwort-Zeile mitten
   im Namen; auch bei 1600×900 (Slot 72 px) lag das Bogen-Zeichen auf den Werten. Flach ab 1100 px Breite: Plaketten links in einer Zeile, Schlagwort oben rechts, Zeichen unten Mitte, Ausrüstung
   als Zeichen oben Mitte, Name einzeilig mit …, Personal-Chi (nur V4) aus (alles steht im Kartenfokus/Accessible Name). Prüfstand: work/claude-unit-slot-probe.mjs.
   15:35 (QA r1520 1024×768): galt nur ab 1100 px → darunter „SEN 先“ auf „EXHAUSTED“/Name (Slot 46–92 px) → ab 760 px (Handy-Brett eigenes Layout, offen);
   760–1099: Name endet vor den Zeichen in der Mitte, Schlagwort schmaler. */
@media (min-width:760px) and (min-height:501px){
  body:not(.stage-on) .slot .unit-top{top:3px;justify-content:flex-start;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-bottom{bottom:3px;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-words{top:3px;left:auto;right:3px;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-chi{display:none;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-status{top:auto;bottom:4px;right:auto;left:50%;transform:translateX(-50%);--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-gear{left:50%;right:auto;bottom:auto;top:3px;transform:translateX(-50%);padding:1px 3px;border:0;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-gear span{display:none;--unit-slot-probe:1}
}
@media (min-width:760px) and (max-width:1099px){
  body:not(.stage-on) .slot .unit-name{max-width:calc(50% - 40px);--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-words{max-width:30%;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-gear{top:auto;bottom:4px;left:calc(50% - 26px);--unit-slot-probe:1}
}
@media (min-width:760px) and (max-width:1099px) and (min-height:900px){
  body:not(.stage-on) .slot .unit-status{bottom:auto;top:50%;transform:translate(-50%,-50%);--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-gear{bottom:auto;top:50%;transform:translate(-50%,-50%);--unit-slot-probe:1}
}
/* 04.10. 15:40 Autobuild — Handy-Brett < 760 px (Slot ~120×56): Plaketten oben links in einer Zeile, Name einzeilig mit …,
   Bogen-/Kamae-Zeichen in die freie Slot-Mitte; Schlagwort, Ausrüstung, Personal-Chi aus (stehen im Kartenfokus/Accessible Name). */
@media (max-width:759px){
  body:not(.stage-on) .slot .unit-top{top:2px;left:3px;right:3px;gap:3px;justify-content:flex-start;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-bottom{left:4px;right:4px;bottom:2px;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;--unit-slot-probe:1}
  body:not(.stage-on) .slot :is(.unit-words,.unit-gear,.unit-chi){display:none;--unit-slot-probe:1}
  body:not(.stage-on) .slot .unit-status{top:50%;right:auto;left:50%;transform:translate(-50%,-62%);--unit-slot-probe:1}
}
/* 04.10. Autobuild (QA r0412f HOCH home-settings/side-shop): Einstellungs-Blatt lag auf Menü-Seiten ab 1100 px mit left 18 px
   über der festen Seitenleiste → Warriors/Decks/Shop/Rules/Gallery nicht klickbar, solange offen. Blatt rechts neben die Leiste.
   Prüfstand work/claude-settings-rail-probe.mjs. */
@media (min-width:1100px){
  body:not([data-screen="game"]) .settings-sheet{left:calc(var(--rail) + 18px);width:min(780px,calc(100vw - var(--rail) - 36px))}
}

/* 04.10. Autobuild — 3D-HUD (Leiste aktiv) 1280–1600 px: (1) Hand bleibt in ihrem Bereich (ab 4 Karten Abstand aus Bereichsbreite statt
   fester Ränder; vorher lagen 5 Karten bei 1280×720 auf Deck-Kachel/End Turn, 8 Karten bei 1600×900 auf der Deck-Kachel),
   (2) Ehre/Profil-Pille im Spiel aus (lag auf der Gegner-Leiste: Kartenrücken + „Turn"), (3) Emote-Knopf über dem Ultimate-Schild.
   Prüfstand work/claude-hud-hand-overlap-probe.mjs. */
@media (min-width:760px) and (min-height:501px){
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(4)){--hn1:3}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(5)){--hn1:4}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(6)){--hn1:5}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(7)){--hn1:6}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(8)){--hn1:7}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(9)){--hn1:8}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(10)){--hn1:9}
  body.stage-on .game.has-hud-skin .arena>.hand:has(.card:nth-child(4)) .card{margin:0 min(0px,calc(((var(--W) * var(--hand-w) - var(--card-w)) / var(--hn1) - var(--card-w)) / 2))}
  /* 08.10. 21:30 (Vollpartie 1280x800, 7 Karten): space-evenly verteilte den Restplatz zusaetzlich zu den Stauch-Raendern → Faecher 553 statt 512 px, 1. Karte schnitt „6 / 6 CHI“ an. */
  body.stage-on .game.has-hud-skin .arena>.hand:has(.card:nth-child(4)){justify-content:center}
  body.stage-on:has(.game.has-hud-skin) .game-header .rail-status{display:none}
  body.stage-on:has(.game.has-hud-skin) .emote-dock{bottom:max(128px,22vh)}
}

/* 04.10. Autobuild — Startwahl-Wappen: Karten ohne Bild zeigen das Haus-Wappen (contain, Kartenmitte). In „Opening Hand"
   stehen Name + bis zu 6 Regelzeilen bis an die Oberkante → das helle Gold lag quer durch den Text. Nur noch Wasserzeichen. */
.mull-cards .card .card-image img[src*="/crests/"]{opacity:.16}

/* 04.10. 13:15 Autobuild — Wappen überall: dieselbe Lage wie in der Startwahl auch in Hand (flach + 3D), Karten-Vorschau,
   Draft. Name/Regeltext liegen auf der Kartenmitte → Wappen nur Wasserzeichen (Kanji-Zeichen ::after bleibt). Sammlung
   (.archive-item, Regeltext unter der Karte, Wappen im freien Oberteil) bleibt hell.
   Prüfstand work/claude-hand-crest-probe.mjs (NOFIX=1 schneidet ab hier ab). */
:not(.archive-item)>.card:has(.card-name) .card-image>img.is-crest{opacity:.18}

/* 04.10. 13:50 Autobuild — Endschirm flach: Banner ist 790 px hoch und beginnt unter Werkzeugleiste + „flat view“-Hinweis
   (y ≈ 176) → „New Duel / Back to Dojo / Watch replay“ lagen bis 1536×864 und am Handy unter dem Fensterrand. Knopfleiste
   klebt unten im Bild, solange der Banner sichtbar ist (overflow clip statt hidden, sonst greift sticky nicht).
   Prüfstand work/claude-finish-fold-probe.mjs (NOFIX=1 schneidet ab hier ab). */
body:not(.stage-on) .game .finished-banner{overflow:clip}
body:not(.stage-on) .game .finished-banner>.button-row{position:sticky;bottom:12px;z-index:6;width:fit-content;margin-inline:auto;padding:8px;border-radius:14px;background:rgba(12,9,8,.95);box-shadow:0 8px 28px #000a}
/* 04.10. 13:55 Autobuild: Gegner-HUD-Unterzeile (Titel · Rolle) lief hart abgeschnitten ohne "…" aus der Platte (QA r1340 "Root of the Bear Clan · The P"); voller Text bleibt im title.
   Prüfstand work/claude-foe-sub-probe.mjs (NOFIX=1 schneidet ab hier ab). */
.hud-enemy .hud-name small{overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 04.10. 14:15 Autobuild — Startwahl: Kartentext steht unten verankert und wächst nach oben. Langer Name (3 Zeilen, „Masaru,
   Warrior of the Golden House“) oder 6 Regelzeilen auf schmaler Karte (1280: 160 px) schoben Name über Chi-Feld, Kopfzeile
   „KINRYU · WARRIOR“ und Kartenoberkante (QA r1410 1680×1050). Name höchstens 2 Zeilen, Regeltext auf schmalen Karten kürzer
   (Volltext im Karten-Inspektor). Prüfstand work/claude-mull-name-probe.mjs (NOFIX=1 schneidet ab hier ab). */
.mull-cards .card .card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (max-width:1599px){
  .mull-cards .card .card-rules{-webkit-line-clamp:4}
  .mull-cards .card[data-kind="Warrior"] .card-rules{-webkit-line-clamp:3}
}
/* 04.10. 14:30 Autobuild — Startwahl unter 1280 px quer (1024×768: Karte 108×161): Text-Block 138 px hoch → Kopfzeile + Name
   liegen auf der Chi-Zahl („2ath Plate“), Orte ragen über die Kartenoberkante; ATK/HP (16 px) neben dem Schlagwort ragten bis
   28 px rechts hinaus („1300 1“). Wie Handy quer: Regeltext + Schlagwort unten aus (Volltext im Karten-Inspektor), Werte 13 px
   über volle Breite. Prüfstand work/claude-mull-name-probe.mjs 1024x768.
   12.10. Autobuild: Handy quer (844x390, Karte 105 px) ragten die Werte genauso 22–30 px hinaus → gleicher Fall. */
@media (min-width:760px) and (max-width:1279px) and (min-height:501px) and (orientation:landscape), (max-height:500px) and (orientation:landscape){
  .mull-cards .card .card-rules{display:none}
  .mull-cards .card .card-bottom:has(.card-numbers b) .card-keyword{display:none}
  .mull-cards .card .card-numbers:has(b){flex:1;justify-content:space-between;gap:4px}
  .mull-cards .card .card-numbers b{font-size:13px}
}
/* 04.10. 14:50 Autobuild — Prolog flach ab 1280 px: feste Leiste (top 150, Z. 1326) lag über Gegner-Anführer und Gegner-Front
   (QA r1445 1280×800 Lektion 4: Ziel verdeckt, Moon Slash per Maus nicht ausführbar; 1280×720/1366×768 ebenso). Die Annahme
   „breiter frei“ (Z. 1348) gilt erst ab ~1440. Flachansicht jetzt überall im Seitenfluss; die flache Seite scrollt ohnehin.
   Prüfstand work/claude-tutorial-bar-probe.mjs (NOFIX=1 schneidet ab hier ab). */
body:not(.stage-on) .tutorial-bar{position:relative;top:auto;left:auto;transform:none;width:auto;margin:8px 0;z-index:5;animation:none}
/* Kompakt wie Handy (Titel + Knöpfe eine Zeile), sonst rutscht die Hand bei 800 px Höhe unter den Bildrand (Ziehen aus der Hand). */
@media (min-width:701px){
  body:not(.stage-on) .tutorial-bar{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;padding:7px 14px 8px;margin:4px 0}
  body:not(.stage-on) .tutorial-bar .eyebrow{display:none}
  body:not(.stage-on) .tutorial-bar strong{grid-column:1;grid-row:1;font-size:16px;line-height:1.2}
  body:not(.stage-on) .tutorial-bar .button-row{grid-column:2;grid-row:1;flex-wrap:nowrap;gap:4px}
  body:not(.stage-on) .tutorial-bar p{grid-column:1/-1;grid-row:2;font-size:13px;line-height:1.35;margin:3px 0 0}
  body:not(.stage-on) .tutorial-bar button{min-height:30px;padding:4px 11px;font-size:12px;white-space:nowrap}
  /* Platz dafür: Hinweis „flat view / Try 3D again" (54 px) nur während des Prologs aus — danach wieder da. */
  body:not(.stage-on) .game:has(.tutorial-bar) .stage-flat{display:none}
}
/* 04.10. 15:00 Autobuild — Startwahl: Ausrüstung mit zwei Werten (Ancestor Mask „+250 / +750“) — Schlagwort „+250 ATK +750 HP“
   + Symbol + zwei Wertekästen passen nicht in die Karte, „+750“ ragte 17 px (1280) / 6 px (1024) rechts hinaus (QA r1450
   1440×900 angeschnitten). Schlagwort doppelt die Werte (Werte tragen aria-label) → aus, Werte über volle Breite; unter
   1280 px auch das Symbol aus. Prüfstand work/claude-mull-gear-probe.mjs (NOFIX=1 schneidet ab hier ab). */
.mull-cards .card[data-kind="Equipment"] .card-bottom:has(.card-numbers b + b) .card-keyword{display:none}
.mull-cards .card[data-kind="Equipment"] .card-numbers:has(b + b){flex:1;min-width:0;justify-content:space-between;gap:4px}
@media (max-width:1279px){
  .mull-cards .card[data-kind="Equipment"] .card-numbers:has(b + b) .icon{display:none}
}
/* 04.10. 16:05 Autobuild — Feld-Vorschau (Hover über Einheit, .play-rail-pop) und Gegner-Aufdeckung (.play-reveal): Kartentext
   steht unten verankert; langer Regeltext (Night Matriarch 10 Zeilen) schob den Namen auf die Chi-Zahl und über die Kartenoberkante
   (QA r1600 768×1024 „5ight Matriarch“). Name 2 Zeilen, Regeltext geklemmt — Volltext im Auswahl-Panel beim Anklicken.
   Prüfstand work/claude-peek-name-probe.mjs (NOFIX=1 schneidet ab hier ab). */
:is(.play-rail-pop,.play-reveal) .card .card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
:is(.play-rail-pop,.play-reveal) .card .card-rules{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
:is(.play-rail-pop,.play-reveal) .card[data-kind="Warrior"] .card-rules{-webkit-line-clamp:6}
/* 04.10. 16:15 Autobuild — Handfächer flach (QA r1610 820×1180 Rätsel, 8 Karten): Überlappung (Block oben „2) Handfächer“) rechnete nur
   die Kartenbreite; die gedrehte Randkarte (~12°) steht 30–35 px über die Hand hinaus → 7–12 px Seitwärts-Scroll bei 768–820 px.
   64 px der Handbreite für die Drehung freihalten. Prüfstand work/claude-xoverflow-probe.mjs (NOFIX=1 schneidet ab hier ab). */
@media (min-width:600px){body[data-screen="game"]:not(.stage-on) .game .hand>.card{margin-inline:min(-12px,calc(((100% - 64px) / var(--hn) - 132px) / 2))}}

/* 04.10. 17:20 Autobuild — Handkarten sind beim Abspielen/Gegnerzug <button disabled>; styles.css `button:disabled{opacity:.42}`
   machte den überlappenden Fächer durchsichtig → Namen/Werte der Nachbarkarten schienen durch („Dawnwatch Ma·Iai Cut“, QA r1700
   1440×900 3D). Karten bleiben deckend, gesperrt = nur abgedunkelt. Prüfstand work/claude-hand-dim-probe.mjs. */
.game .hand .card:disabled{opacity:1}
.game .hand .card:disabled:not(.is-unplayable){filter:saturate(.6) brightness(.7)}
/* 04.10. 17:45 Autobuild — 3D: die Fallenreihen (.trap-row, fixed, z 30) liegen je nach Fenster auf den projizierten Brett-Feldern;
   1280×720 deckte die eigene Reihe „0:Back/1:Back/2:Back“ ab → Krieger per Klick nicht spielbar (QA r1725). Gesetzte Fallen sind nur
   Anzeige: Klicks gehen durch; nur setzbare/zielbare Fallen (.potential) nehmen Klicks an. Prüfstand work/claude-trap-row-probe.mjs. */
body.stage-on .battlefield .trap-row{pointer-events:none;--trap-row-probe:1}
body.stage-on .battlefield .trap-row .trap-slot.potential{pointer-events:auto}
body.stage-on .game:has(.hand .card.is-selected) .battlefield .trap-row .trap-slot:not(.potential){opacity:.3;--trap-row-probe:2}
/* 04.10. 18:45 Autobuild — 3D: Kartenfokus ist auf niedrigen Fenstern (1280×720) auf 318 px begrenzt und scrollt; im Schritt
   „Confirm" lagen Hinweis + „Play Card" unter der Panel-Kante → Ausrüstung/Technik per Maus nicht bestätigbar (QA r1730).
   Der Bestätigen-Knopf klebt deshalb am unteren Panelrand. Prüfstand work/claude-equip-confirm-probe.mjs. */
body.stage-on .game .selection-panel.is-open .primary[data-do="confirm-action"]{position:sticky;bottom:6px;z-index:2;box-shadow:0 -10px 18px 6px rgba(14,8,6,.92),0 4px 12px #000c;--equip-confirm-probe:1}
/* 04.10. 19:30 Autobuild — 3D ohne Feld-Projektion (Kamera nah, ein Anker hinter der Kamera → clearSlotFrames): das flache
   Raster liegt unsichtbar über der Bühne, leere Felder ohne data-slot (keine Klickfunktion) verdeckten die Mitte des
   Gegner-Anführer-HUD → Angriff/Spezial auf den Anführer per Maus ohne Wirkung (QA r1740). Prüfstand work/claude-leader-hit-probe.mjs. */
body.stage-on .battlefield:not(.slots-projected) .slot.empty:not([data-slot]),body.stage-on .battlefield:not(.slots-projected) .slot.empty:not([data-slot])>*{pointer-events:none;--leader-hit-probe:1}
/* 04.10. 20:46 Autobuild — besetzte Gegnerfelder im unprojizierten Raster dürfen das Gegner-Anführer-HUD nicht überdecken; außerhalb des HUD bleibt die Einheit klickbar. */
body.stage-on .game:has(.battlefield:not(.slots-projected)) .hud-enemy[data-target^="leader-"]{position:fixed;z-index:50;pointer-events:auto;--leader-hit-unit-probe:1}

/* 04.10. brief-2105: Fächer-Randkarten bleiben im Ruhezustand innerhalb des Fensters. */
@media (max-width:599px) and (orientation:portrait){
  body.stage-on[data-screen="game"] .game .arena>.hand .card:not(.is-selected):not(:focus-visible),
  body.stage-on[data-screen="game"] .game .arena>.hand .card:hover:not(.is-selected){transform:translateY(calc(var(--d) * var(--d) * .2px - 1px)) rotate(calc(var(--d) * .7deg))!important}
}
@media (max-height:500px) and (orientation:landscape){
  body.stage-on .game.has-hud-skin{--card-h:140px;--card-w:97px}
  body.stage-on .game.has-hud-skin .hand .card{min-height:0;min-width:0}
  body.stage-on .game.has-hud-skin .hand .card:not(.is-selected):not(:focus-visible){transform:translateY(-31px)}
}
/* 04.10. brief-2210: Im flachen Desktop-Brett scrollte die Hand samt Handlimit-Leiste
   unter den Fensterrand. Die gesamte Partie kompakt halten, damit Leiste, Karten und
   Hover im selben Maßstab bleiben. */
@media (min-width:1024px){
  body[data-screen="game"]:not(.stage-on) .game:has(.arena>.hand){zoom:.8}
}
@media (min-width:1024px) and (max-height:900px){
  body[data-screen="game"]:not(.stage-on) .game:has(.arena>.hand){zoom:.75}
}

/* 04.10. brief-2245: Kurze 3D-Queransicht: Abwurf-Leiste und Hinweis oberhalb des Handfächers. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .game .arena>.discard-bar,
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.discard-bar{top:68px;bottom:auto;z-index:41;min-height:0;--brief-2245:1}
  body.stage-on[data-screen="game"] .notice{top:120px;bottom:auto}
}
/* 04.10. brief-2320: Toast links neben dem rechten Hinweis, unter der Handlimit-Leiste. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .notice{top:124px;left:clamp(84px,calc(100vw - 716px),216px);max-width:min(300px,calc(100vw - 168px));padding:7px 11px;font:600 13px/1.3 var(--heading)!important;transform:translateY(0);--brief-2320:1}
}
/* 04.10. brief-2340: Bei 667px Breite verdeckte der Toast die dritte Zeile der Handlimit-Leiste. */
@media (min-width:600px) and (max-width:699px) and (max-height:500px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .notice{top:134px;max-width:260px;padding:7px 11px;font:600 13px/1.3 var(--heading)!important}
}
/* 04.10. brief-2355: In hohen 3D-Ansichten steht der Toast unter dem oberen HUD statt auf Hand und Handlimit-Leiste. */
@media (min-height:501px) and (max-width:1099px){
  body.stage-on[data-screen="game"] .notice{top:120px;bottom:auto;left:12px;max-width:min(340px,calc(100vw - 24px));padding:7px 11px;font:600 13px/1.3 var(--heading)!important;transform:none;--brief-2355:1}
}
@media (min-width:760px) and (max-width:1023px) and (min-height:501px) and (orientation:portrait){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.discard-bar{bottom:calc(var(--H) * (1 - var(--hand-y)) + 84px);--brief-2355:1}
}
/* 05.10. brief-2355: Toast rechts der linken Spectator-/Played-Leiste halten. */
@media (min-width:760px) and (max-width:900px) and (min-height:501px){
  body.stage-on[data-screen="game"] .notice{left:84px;--brief-2355:1}
}
@media (min-width:901px) and (max-width:1099px) and (min-height:501px){
  body.stage-on[data-screen="game"] .notice{left:216px;--brief-2355:1}
}

/* 05.10. 00:30 Autobuild — Handy quer: die klebende, oben transparente Knopfzeile lag auf der Zielliste;
   der durchscheinende Banner ließ Brett-Text hinter dem Titel erscheinen. Scrollbereich endet über der festen,
   deckenden Knopfzeile; Banner und Leiste erhalten einen deckenden Grund. Prüfstand work/claude-finish-land-probe.mjs. */
@keyframes finish-fade-0030{from{opacity:0}to{opacity:1}}
@media (max-height:500px) and (orientation:landscape){
  html body.stage-on .game .finished-banner{bottom:76px;transform:none!important;animation:finish-fade-0030 .6s ease-out backwards!important;background:radial-gradient(ellipse 60% 40% at 50% 18%,color-mix(in oklch,var(--e-accent) 14%,transparent),transparent 70%),oklch(0.11 0.006 35)!important}
  body.stage-on .game .finished-banner .button-row{position:fixed;left:0;right:0;bottom:0;z-index:2;box-sizing:border-box;width:100%;height:76px;margin:0;padding:10px 14px;gap:8px;align-items:center;flex-wrap:nowrap;background:#080504}
  body.stage-on .game .finished-banner .button-row>button{flex:1 1 0;min-width:0;min-height:48px;font-size:clamp(12px,2vw,16px)}
}

/* 05.10. 01:05 Autobuild — Tablet 3D: Zahnrad 26 px um gleiche Mitte, Abstand zum Ultimate-Rahmen (.leader); Mitte bleibt treffbar. */
@media (min-width:760px) and (max-width:1199px) and (max-aspect-ratio:8/5){
  body.stage-on .game.has-hud-skin:has(.ultimate-button) .hud-skin .hud-settings{width:26px;bottom:calc(82% + 20px)}
  body.stage-on .game.has-hud-skin:has(.ultimate-button) .hud-skin .hud-settings svg{width:56%;height:56%}
}

/* 05.10. 01:25 Autobuild brief-0125: End Turn rechts oberhalb der Hand; Hinweis bleibt darüber, Toast links frei. */
@media (max-height:500px) and (orientation:landscape) and (max-width:799px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .turn-guide{top:calc(100vh - 247px);right:66px;max-width:250px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .hud-skin .hud-end{left:auto!important;right:calc(50% - 50vw + 10px)!important;top:calc(100% - 211px)!important;z-index:10}
}

/* 05.10. 02:30 Autobuild brief-0230 (Marker für NOFIX) */
/* 05.10. 02:40 Autobuild brief-0240 — eigene Back-Reihe frei von Handkarten (Handy quer klein 3D) */
@media (max-height:500px) and (orientation:landscape) and (max-width:799px){
  body.stage-on[data-screen="game"] .game.has-hud-skin{--card-h:124px;--card-w:86px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .hand .card:not(.is-selected):not(:focus-visible){transform:translateY(-23px)}
}

/* 05.10. 02:55 Autobuild brief-0255 (Marker für NOFIX) — Handkarten-Gesicht 86×124 */
@media (max-height:500px) and (orientation:landscape) and (max-width:799px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-cost{font-size:17px!important;top:4px;left:5px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-cost small{font-size:5px!important}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption{top:32px;left:6px;right:6px;bottom:5px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-type{font-size:6px;margin-bottom:2px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-name{display:block!important;-webkit-line-clamp:unset!important;min-width:0;max-width:100%;overflow:hidden!important;overflow-wrap:normal!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:11px!important;line-height:1.1;margin-bottom:2px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-rules{display:none!important}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-rarity{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;gap:2px;margin:2px 0;font-size:6px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom{flex-wrap:nowrap;gap:2px;min-width:0}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom:has(.card-numbers b) .card-keyword{display:none}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom .card-numbers{gap:2px;min-width:0;margin-left:auto}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom .card-numbers b{min-width:0;padding:1px 2px;font-size:12px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Equipment"]>.card-caption>.card-bottom .card-numbers .icon{display:none}
}

/* 05.10. 03:10 Autobuild brief-0310 — Handkarten-Gesicht quer 800–999 px */
@media (max-height:500px) and (orientation:landscape) and (min-width:800px) and (max-width:999px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-cost{font-size:19px!important;top:4px;left:6px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-cost small{font-size:6px!important}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption{top:35px;left:7px;right:7px;bottom:6px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-type{font-size:7px;margin-bottom:2px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-name{display:block!important;-webkit-line-clamp:unset!important;min-width:0;max-width:100%;overflow:hidden!important;overflow-wrap:normal!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:12px!important;line-height:1.1;margin-bottom:3px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-rules{display:none!important}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-rarity{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;gap:2px;margin:2px 0;font-size:7px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom{flex-wrap:nowrap;gap:2px;min-width:0}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom:has(.card-numbers b) .card-keyword{display:none}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom .card-numbers{gap:2px;min-width:0;margin-left:auto}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-bottom .card-numbers b{min-width:0;padding:1px 2px;font-size:13px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Equipment"]>.card-caption>.card-bottom .card-numbers .icon{display:none}
}

/* 05.10. 03:15 Autobuild brief-0315 (Marker für NOFIX) — Handkarten-Gesicht hochkant */
@media (orientation:portrait) and (max-width:599px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-cost{top:4px;left:5px;font-size:17px!important}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-cost small{font-size:5px!important}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption{top:35px;left:6px;right:6px;bottom:5px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-type{font-size:6px!important;line-height:1.2;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-name{display:block!important;-webkit-line-clamp:unset!important;min-width:0;max-width:100%;overflow:hidden!important;overflow-wrap:normal!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:11px!important;line-height:1.1;margin-bottom:2px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Warrior"]>.card-caption>.card-type,
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Warrior"]>.card-caption>.card-rarity,
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Warrior"]>.card-caption>.card-bottom>.card-keyword{display:none!important}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Warrior"]>.card-caption>.card-bottom{padding-top:2px;gap:2px;flex-wrap:nowrap}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Warrior"]>.card-caption>.card-bottom>.card-numbers{gap:2px;margin-left:auto}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card[data-kind="Warrior"]>.card-caption>.card-bottom>.card-numbers b{font-size:11px;line-height:1;min-width:0;padding:1px 2px}
}

@media (orientation:portrait) and (min-width:600px) and (max-width:1199px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card{container:hand-card / inline-size}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption{top:40px;overflow:hidden}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-type{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.hand>.card>.card-caption>.card-name{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;min-width:0;max-width:100%;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:anywhere;line-height:1.1}
  @container hand-card (max-width:97px){
    .card-caption>.card-name{display:block!important;-webkit-line-clamp:unset!important;overflow-wrap:normal!important;white-space:nowrap!important}
  }
}

/* 05.10. brief-0415: Desktop 3D toast below the enemy HUD, emote above the own Ultimate/location frame. */
@media (min-width:1100px){
  body.stage-on[data-screen="game"] .notice{top:max(120px,calc(min(58vw,90vh) * .18 + 12px));bottom:auto;left:50%;right:auto;max-width:min(480px,calc(100vw - 440px));padding:10px 16px;font:600 13px/1.3 var(--heading)!important;transform:translateX(-50%);--brief-0415:1}
  body.stage-on[data-screen="game"]:has(.game) .emote-dock{top:auto;bottom:calc(max(128px,22vh) + 64px);left:22px;right:auto;--brief-0415:1}
}

/* 05.10. 05:55 brief-0555 */
@media (min-width:1000px) and (max-height:940px){
  body.stage-on .game .finished-banner{padding-block:10px 4px}
  body.stage-on .game .finished-banner .finish-title{font-size:58px;line-height:1}
  body.stage-on .game .finished-banner .finish-title b{font-size:44px;line-height:1;margin-top:2px}
  body.stage-on .game .finished-banner .eyebrow{margin:3px 0;padding:4px 20px}
  body.stage-on .game .finished-banner h2{font-size:20px;margin:2px 0}
  body.stage-on .game .finished-banner p{font-size:13px;margin:2px 0}
  body.stage-on .game .finished-banner .finish-tally{margin-top:8px;padding:8px 12px;gap:10px}
  body.stage-on .game .finished-banner .finish-grade{width:72px;height:72px}
  body.stage-on .game .finished-banner .finish-grade b{font-size:38px}
  body.stage-on .game .finished-banner .finish-goals{gap:4px}
  body.stage-on .game .finished-banner .finish-goals li{padding:4px 8px;gap:7px;font-size:12px}
  body.stage-on .game .finished-banner .finish-quote{font-size:13px;line-height:1.3}
  body.stage-on .game .finished-banner .finish-rewards-label{margin:6px 0 4px}
  body.stage-on .game .finished-banner .finish-rewards{gap:6px}
  body.stage-on .game .finished-banner .finish-tile{padding:6px 4px;gap:3px}
  body.stage-on .game .finished-banner .finish-tile span{width:32px;height:32px;font-size:18px}
  body.stage-on .game .finished-banner .finish-tile strong{font-size:17px}
  body.stage-on .game .finished-banner .finish-tile small{font-size:9px}
  body.stage-on .game .finished-banner .button-row{background:#080504}
}

/* 05.10. 07:00 brief-0700 */
/* 1100-1199 px wide, tall: settings gear sits at 82% of the HUD column; lift the emote above it. */
@media (min-width:1100px) and (max-width:1199px) and (min-height:760px){
  body.stage-on[data-screen="game"]:has(.game) .emote-dock{bottom:calc(max(128px,22vh) + 120px)}
}
/* Lower windows: own leader frame grows with the location row (Ultimate used + place); keep a 4 px+ gap. */
@media (min-width:1100px) and (max-width:1199px) and (max-height:759px){
  body.stage-on[data-screen="game"]:has(.game) .emote-dock{bottom:calc(max(128px,22vh) + 76px)}
}

/* 05.10. 12:55 brief-1255 */
/* Tall 3D windows: the hand-limit bar sat on the own trap row (fixed bottom 282px, e.g. 1536x864/1440x900/1920x1080).
   While the bar shows, lift the own trap row above it. Pruefstand work/claude-hand-banner-probe.mjs (barTrapOverlap). */
@media (min-width:761px) and (min-height:501px){
  body.stage-on .game:has(.arena>.discard-bar) .battlefield .trap-row.own{bottom:360px;--brief-1255:1}
}

/* 05.10. 13:10 brief-1310: In kurzen 3D-Querformaten eigene Fallenreihe unter die Gegnerreihe setzen. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on .battlefield .trap-row.own{top:182px;bottom:auto;--brief-1310:1}
}

/* 05.10. 13:52 brief-1352 */
@media (max-width:759px) and (min-height:501px){
  body.stage-on .game .finished-banner{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;justify-content:safe center;padding-block:max(14px,env(safe-area-inset-top)) 0}
  body.stage-on .game .finished-banner > *{flex:0 0 auto;max-width:100%}
  body.stage-on .game .finished-banner .button-row{position:sticky;bottom:0;z-index:2;justify-content:center;box-sizing:border-box;width:100%;margin-bottom:0;
    padding:12px 16px max(14px,env(safe-area-inset-bottom));flex-wrap:wrap;background:#080504}
  body.stage-on .game .finished-banner .button-row > button{flex:1 1 140px;min-width:0;max-width:100%;white-space:normal}
}

/* 05.10. 14:15 brief-1415 */
@media (max-width:759px){
  body:not(.stage-on) .game .finished-banner{padding-inline:12px}
  body:not(.stage-on) .game .finished-banner .finish-tally{grid-template-columns:auto minmax(0,1fr);padding:12px;gap:12px}
  body:not(.stage-on) .game .finished-banner .finish-goals{min-width:0;width:100%}
  body:not(.stage-on) .game .finished-banner .finish-goals li{min-width:0;overflow-wrap:anywhere}
  body:not(.stage-on) .game .finished-banner .finish-quote{grid-column:1 / -1;min-width:0;overflow-wrap:anywhere}
  body:not(.stage-on) .game .finished-banner .finish-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-width:0;gap:8px}
  body:not(.stage-on) .game .finished-banner .finish-tile{width:auto;min-width:0;max-width:100%;box-sizing:border-box;padding:12px 6px;overflow-wrap:anywhere}
  body:not(.stage-on) .game .finished-banner .finish-tile > *{min-width:0;max-width:100%;white-space:normal}
  body:not(.stage-on) .game .finished-banner > .button-row{width:auto;margin-inline:0;box-sizing:border-box;flex-wrap:wrap;background:#080504}
  body:not(.stage-on) .game .finished-banner .button-row > button{flex:1 1 140px;min-width:0;max-width:100%;white-space:normal}
  @media (max-width:479px){
    body:not(.stage-on) .game .finished-banner .finish-tally{grid-template-columns:minmax(0,1fr)}
    body:not(.stage-on) .game .finished-banner .finish-grade{width:72px;height:72px;justify-self:center}
    body:not(.stage-on) .game .finished-banner .finish-grade b{font-size:38px}
  }
}
/* 05.10. 15:20 brief-1520 */
@media (max-width:759px){
  body:not(.stage-on) .game .finished-banner .button-row > button{flex:1 1 auto;white-space:nowrap}
}

/* 06.10. 01:22 Autobuild — Deckbau-Vorschau .row-peek: langer Name und Regeltext drängen in die Chi-Ziffer/Kopfzeile. Name und Regeln begrenzen, Werte/Seltenheit unten frei halten. Prüfstand work/claude-deck-peek-name-probe.mjs (NOFIX=1 schneidet ab hier ab). */
.row-peek .card .card-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:18px;line-height:1.12}
.row-peek .card .card-rules{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;font-size:10px;line-height:1.35;margin-top:5px}

/* 06.10. 01:35 Autobuild — Deckbau: nicht besessene Zeile gedimmt, Vorschau .row-peek voll deckend (styles.css:19 opacity .5 erbte sich). Prüfstand work/claude-deck-peek-name-probe.mjs. */
.deck-row.locked-card{opacity:1}
.deck-row.locked-card > :not(.row-peek){opacity:.5}
body:not([data-screen="game"]) .deck-row.locked-card{background:linear-gradient(180deg,rgba(32,20,15,.45),rgba(16,10,8,.47));border-color:rgba(216,179,106,.1)}
body:not([data-screen="game"]) .deck-row.locked-card:hover{border-color:rgba(243,217,154,.3)}

/* brief-0610-0228 Kontrast Text auf Kunst (06.10. Autobuild, selbst — Codex-CLI 2× Sandbox). Seitenkopf/Intro: weiche Abdunkelung hinter dem Text,
   Wallpaper rechts bleibt frei. Deck-Kachel: Verlauf reicht bis zum Namen. Prüfstand work/claude-menu-contrast-probe.mjs. */
body:not([data-screen="game"]) :is(.intro,.archive-copy){position:relative;isolation:isolate}
body:not([data-screen="game"]) :is(.page-head,.intro,.archive-copy)::before{content:'';display:block;position:absolute;inset:-60px 0 -40px -120px;z-index:-1;border:0;border-radius:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 70% at 32% 50%,rgba(8,4,4,.86) 0%,rgba(8,4,4,.72) 42%,rgba(8,4,4,.32) 72%,transparent 100%)}
body:not([data-screen="game"]) .intro::before{inset:-160px 0 -40px -120px}
@media (max-width:900px){body:not([data-screen="game"]) :is(.intro,.page-head) .eyebrow{width:fit-content;padding:4px 8px;border-radius:4px;background:rgba(8,4,4,.78)}}
.deck-tile::after{background:linear-gradient(0deg,#0f0806 12%,rgba(15,8,6,.95) 44%,rgba(15,8,6,.86) 62%,rgba(15,8,6,.74) 80%,rgba(15,8,6,.4) 100%)}
.deck-tile>p strong{color:#f3d99a}

/* brief-0610-0250 Kontrast Kartengesicht Menüs */
body:not([data-screen="game"]) .card .card-cost{background:rgba(8,4,4,.88);border-radius:6px;padding:0 5px 3px}

/* brief-0610-0335 Kontrast Spielbildschirm */
body[data-screen="game"] .game .leader-health{background:radial-gradient(circle at 35% 30%,#9b2924,#651014 70%)}
body[data-screen="game"] :is(.hud-skin,.hud-enemy) .hud-hp>b{isolation:isolate}
body[data-screen="game"] :is(.hud-skin,.hud-enemy) .hud-hp>b::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:4.8em;height:1.45em;background:rgba(8,4,4,.88);border-radius:4px}
body[data-screen="game"] .hud-skin .hud-orbs b small{color:#f2eee9}
body[data-screen="game"] .game .board-row .slot.empty>span{color:#d4d0c6;opacity:1;background:rgba(8,4,4,.78);border-radius:3px;padding:1px 4px;white-space:nowrap}
body.stage-on[data-screen="game"]:has(.hud-skin[data-theme="ink"]) .game .action-strip .primary{--i-crimson-2:#9f2923;--i-crimson:#651014}
body[data-screen="game"] .game .hand .card .card-keyword{color:#d4d0c6;background:rgba(8,4,4,.88);border-radius:3px;padding:2px 3px}
body[data-screen="game"] .game .hand .card .card-cost{background:rgba(8,4,4,.88);border-radius:6px;padding:0 5px 3px}
body[data-screen="game"] .game .hand .card .card-type{background:rgba(8,4,4,.88);border-radius:3px;padding:2px 3px;width:fit-content;max-width:100%}
body.stage-on[data-screen="game"] .hud-enemy-cards>em{background:#3a0c0e}
body[data-screen="game"] .stage-flat{color:#d4c7b2;opacity:1}

/* brief-0610-0440 Kontrast Mulligan */
body[data-screen="game"] .game :is(.hand,.mull-cards) .card .card-keyword{color:#d4d0c6;background:rgba(8,4,4,.88);border-radius:3px;padding:2px 3px}
body[data-screen="game"] .game :is(.hand,.mull-cards) .card .card-cost{background:rgba(8,4,4,.88);border-radius:6px;padding:0 5px 3px}
body[data-screen="game"] .game :is(.hand,.mull-cards) .card .card-type{background:rgba(8,4,4,.88);border-radius:3px;padding:2px 3px;width:fit-content;max-width:100%}
body[data-screen="game"] .game .mull-cards .card .card-name{background:rgba(8,4,4,.88);border-radius:3px;padding:2px 3px;width:fit-content;max-width:100%}

/* brief-0610-0445 Mulligan-Overlay dichter */
body[data-screen="game"] .mulligan-stage:not(.is-waiting){background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(40,14,10,.92),rgba(8,5,4,.97) 75%)}

/* 06.10. Tippziele Handy: gewählte Handkarte nur heben, nicht vergrößern/nach vorn (Nachbarn + „Choose discards“ bleiben ≥ 24 px tippbar; groß zeigt sie „Card Focus“) */
@media (max-width:480px) and (orientation:portrait){
  body[data-screen="game"] .game .hand .card.is-selected:not(:focus-visible),
  body.stage-on[data-screen="game"] .game .arena>.hand .card.is-selected:not(:focus-visible){transform:translateY(-28px) scale(1) rotate(0deg)!important;z-index:var(--i,1)!important}
  body[data-screen="game"]:not(.stage-on) .game .hand>.card:has(~ .card.is-selected):not(:focus-visible){transform:translate(-8px,calc(var(--lift,0) * var(--lift,0) * 3px)) rotate(calc(var(--fan,0) * 3.5deg))}
  body[data-screen="game"] .game .discard-bar{position:relative;z-index:30}
}

/* 06.10. 12:15 interaktiv-Loop: Endschirm frei - Gegner-Aufdeckung (1,9 s) lag nach dem letzten Zug ueber Sieg/Niederlage + Wertung. */
body:has(.finished-banner) .play-reveal{display:none!important}

/* 06.10. 13:45 Autobuild — Aufdeckung Handy: Kosten lagen auf Kartenname (brief-0610-1345). */
@media (max-width:599px){
  .play-reveal .card .card-caption{top:76px;overflow:hidden}
  .play-reveal .card .card-name{font-size:21px;line-height:1.1;margin-bottom:5px}
  .play-reveal .card .card-rules{-webkit-line-clamp:4;font-size:9px;line-height:1.3;margin-top:4px}
}

/* 06.10. 14:15 Autobuild — Feldname Tablet (brief-0610-1415) */
@media (min-width:760px) and (max-width:1099px) and (min-height:900px){
  body:not(.stage-on) .slot .unit-name{max-width:none;min-width:0;flex:1 1 auto;--unit-slot-probe:1}
}

/* 07.10. brief-0710-1100: 760-1099 px wide, low windows (e.g. 1024x768): emote sat on the settings gear and own Ultimate box; lift it above the gear. */
@media (min-width:760px) and (max-width:1099px) and (max-height:820px){
  body.stage-on[data-screen="game"]:has(.game) .emote-dock{top:auto;bottom:calc(max(128px,22vh) + 88px);left:22px;right:auto}
}

/* 07.10. 11:50 Autobuild (Vollpartie 1366 Speed / 1920 Duel Endschirm): die Knopfzeile lag auf einem schwarzen Vollbreit-Band,
   das quer ueber das Heldenbild links schnitt. Ab 760 px breit + 501 px hoch nur ein Feld hinter den Knoepfen (wie flach); Handy quer behaelt das Band (Zielliste scrollt dahinter). */
@media (min-width:760px) and (min-height:501px){
  body.stage-on .game .finished-banner .button-row{width:fit-content;max-width:calc(100% - 32px);margin-inline:auto;padding:8px;border-radius:14px;background:rgba(12,9,8,.95);box-shadow:0 8px 28px #000a}
}

/* 07.10. 12:05 Autobuild (Queue 45, work/claude-hand-names-probe.mjs): die per Hover vergroesserte Handkarte (scale 1.55, z 30)
   lag innerhalb der Hand (z 9) unter der Handlimit-Leiste (z 12) — Name 100 % verdeckt. Hand nur waehrend Hover/Fokus darueber heben. */
body.stage-on .game.has-hud-skin .arena>.hand:has(.card:is(:hover,:focus-visible)){z-index:13}

/* 07.10. 12:20 Autobuild (Queue, work/claude-discard-bar-probe.mjs): 568x320 3D — waehrend des Abspielens kommt „Skip“ neben
   „? Details“, die Knopfzeile waechst nach links (ab x 424) unter die mittige 320-px-Handlimit-Leiste. Leiste rechts begrenzen. */
@media (max-height:500px) and (orientation:landscape) and (max-width:620px){
  body.stage-on[data-screen="game"] .game .arena>.discard-bar,
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.discard-bar{left:108px;right:156px;width:auto;transform:none}
  /* 12:40: Zug-Hinweis „1 hand card playable“ lag hinter der Leiste, Rest lugte rechts hervor — die Leiste sagt dasselbe. */
  body.stage-on[data-screen="game"] .game:has(.arena>.discard-bar) .turn-guide{visibility:hidden}
}
/* 07.10. 13:05 Autobuild: Handy quer (Felder 40–60 px): leeres Gegner-„BACK ROW“ lag als „BACK RC“ auf Gegner-„FRONT“,
   eigenes „BACK ROW“ (62 px) breiter als Feld (52 px). Gegner-Hinterreihe ohne Schild, eigenes nur „BACK“. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on .battlefield.slots-projected .board-row:not(.centerline ~ .board-row) .slot.empty[data-cell$=":Back"]:not(.potential)>span{opacity:0}
  body.stage-on .battlefield.slots-projected .slot.empty[data-cell$=":Back"]>span{font-size:0;letter-spacing:0}
  body.stage-on .battlefield.slots-projected .slot.empty[data-cell$=":Back"]>span::before{content:"BACK";font-size:9px;letter-spacing:.08em}
}

/* 07.10. 13:25 Autobuild: Handy — Gegner-Anfuehrer als Angriffsziel. Der Ablage-Knopf im Balken hat hier eine
   44-px-Tippflaeche (styles.css, Handy) und schnappte den Angriffstipp weg („Opponent Discard“ statt Angriff,
   Vollpartie Speed 412x915). Solange der Balken Ziel ist, geht der Tipp an den Balken. */
.leader.potential .pile-button{pointer-events:none}
/* 07.10. 13:40 Autobuild: Handy mit 3D-Buehne — schwebende Kopfleiste enthaelt nur das Emblem „刀“ (42-px-Eckkasten).
   Der linke Haus-Innenstreifen (inset 3px) lag dort als schiefe Gold-Sichel neben dem runden Emblem (360/390/412).
   Hier rund und ohne Innenstreifen; die Hausfarbe zeigt der Ring des Emblems selbst. */
@media (max-width:640px){body.stage-on[data-screen="game"] .topbar.game-head{border-radius:50%;box-shadow:0 8px 24px rgba(0,0,0,.4)}}
/* 07.10. 16:15 Autobuild (Vollpartie Speed + Duel 375x667): niedrige Hochkant-Buehne (~220 px) — Felder nur ~52x34 px, „READY“ (36 px)
   + Leben lag auf Nachbarfeld/Feldschild (hpOver 6). Zustandsschilder (READY/EXHAUSTED/ENEMY) hier als Kanji (Text bleibt fuer Vorleser),
   Gegner-„BACK ROW“ (abgeschnitten „BACK RO“) wie Handy quer ohne Schild, eigenes nur „BACK“. */
@media (max-width:640px) and (max-height:700px) and (orientation:portrait){
  body.stage-on .battlefield.slots-projected .unit .status-tag:is(.is-ready,.is-tired,.is-foe){font-size:0;letter-spacing:0;padding:1px 2px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-ready::before{content:"構";font-size:9px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-tired::before{content:"疲";font-size:9px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-foe::before{content:"敵";font-size:9px}
  body.stage-on .battlefield.slots-projected .board-row:not(.centerline ~ .board-row) .slot.empty[data-cell$=":Back"]:not(.potential)>span{opacity:0}
  body.stage-on .battlefield.slots-projected .slot.empty[data-cell$=":Back"]>span{font-size:0;letter-spacing:0}
  body.stage-on .battlefield.slots-projected .slot.empty[data-cell$=":Back"]>span::before{content:"BACK";font-size:9px;letter-spacing:.08em}
}
/* 07.10. 16:45 Autobuild (Vollpartie Duel 375x667, barOverSlot 15): niedrige Hochkant-Buehne — mit Orts-Chips an den Anfuehrer-
   leisten rutscht die Buehne ~16 px tiefer, die 42-px-Handlimit-Leiste fand zwischen eigener Hinterreihe und Anfuehrer-Leiste keinen
   Platz und lag auf den Hinterfeldern. Hier einzeilig: nur „Hand limit N.“ + Knopf (Satz bleibt fuer Vorleser), Auswahlmodus ohne
   Umbruch, Knoepfe 28 px. */
@media (max-width:640px) and (max-height:700px) and (orientation:portrait){
  body.stage-on[data-screen="game"] .game .arena>.discard-bar{padding:2px 6px 2px 10px!important;gap:6px;flex-wrap:nowrap!important}
  body.stage-on[data-screen="game"] .game .arena>.discard-bar:not(.is-active) p{font-size:0;line-height:1}
  body.stage-on[data-screen="game"] .game .arena>.discard-bar:not(.is-active) p b{font-size:12px}
  body.stage-on[data-screen="game"] .game .arena>.discard-bar.is-active p{flex-basis:auto!important;font-size:11px;line-height:1.2}
  body.stage-on[data-screen="game"] .game .arena>.discard-bar button{min-height:28px;padding:2px 8px;font-size:11px}
}
/* 07.10.: Handy hochkant — eigener Ort aktiv machte die eigene Anfuehrerleiste so hoch wie die Gegner-Leiste vor 27.09.:
   Leben + Orts-Chip lagen unter „Your turn“-Pult und Hand (375x667, 390x844). Gleiche Kompakt-Zeile wie beim Gegner. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on .game .arena>.leader:not(.enemy) :is(.leader-ultimate,.leader-place){display:flex;margin:2px 0 0;gap:4px;flex-wrap:nowrap;line-height:1.4}
  body.stage-on .game .arena>.leader:not(.enemy) .leader-ultimate:has(+.leader-place){float:left;margin-right:6px}
  body.stage-on .game .arena>.leader:not(.enemy) .place-name{font-size:7.5px;letter-spacing:.06em;gap:3px;padding:1px 5px;line-height:1.4}
  body.stage-on .game .arena>.leader:not(.enemy) .place-name svg{width:9px;height:9px}
  body.stage-on .game .arena>.leader:not(.enemy) .place-hint{font-size:7px;letter-spacing:.06em;line-height:1.4}
  body.stage-on .game .arena>.leader:not(.enemy) .place-button{min-height:24px;padding:0 8px;font-size:9px}
  /* Unterzeile (Haus/Deck) nur fuer Vorleser, sonst reicht die Hoehe nicht fuer Ultimate + Ort ueber dem Pult */
  body.stage-on .game .arena>.leader:not(.enemy):has(.leader-place) .leader-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* 07.10.: Handy hochkant — eigene Anfuehrerleiste mit Ort ist drei Zeilen hoch (Name, Ultimate, Ort) und rutschte im Fluss
   unter das „Your turn“-Pult (375x667: Ort bei 461, Pult ab 467). Mit Ort unten am Pult verankern, sie waechst nach oben
   (Platz bis zur Handlimit-Leiste: bottom mhand+mact+72). Leben/Chi oben, damit „Location ready“ frei steht.
   12.10.: auch ohne Ort fest — im Fluss stand sie je Geraet 3–12 px ueber dem Pult, die Handlimit-Leiste deckte den Namen. */
@media (max-width:599px) and (orientation:portrait){
  body.stage-on[data-screen="game"] .game .arena>.leader:not(.enemy){position:fixed;left:10px;right:10px;top:auto;bottom:calc(var(--mhand,150px) + var(--mact,50px) + 2px);z-index:24;margin:0;width:auto;max-width:none;box-sizing:border-box}
  body.stage-on[data-screen="game"] .game .arena>.leader:not(.enemy):has(.leader-place) :is(.leader-health,.resource){align-self:flex-start;margin-top:4px}
  body.stage-on[data-screen="game"] .game .arena>.leader:not(.enemy) .leader-ultimate:has(+.leader-place){float:none;margin-right:0}
  body.stage-on[data-screen="game"] .game .arena>.leader:not(.enemy) .leader-place :is(.place-name,.place-hint){white-space:nowrap}
}
/* 07.10.: quer 568x320 — „Location ready“ stand rechts neben dem Chip unter der ersten Handkarte → eigene Zeile darunter. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on .game .arena>.leader:not(.enemy) .leader-place{flex-wrap:wrap;gap:1px 4px}
  body.stage-on .game .arena>.leader:not(.enemy) .place-name{font-size:8px;letter-spacing:.06em;gap:3px;padding:1px 5px;line-height:1.4;white-space:nowrap}
  body.stage-on .game .arena>.leader:not(.enemy) .place-name svg{width:9px;height:9px}
  body.stage-on .game .arena>.leader:not(.enemy) .place-hint{flex-basis:100%;font-size:8px;line-height:1.4}
}
/* 07.10. 17:40 Autobuild (claude-discard-bar-probe 1024x600): niedriges Querformat — die 68 px hohe Handlimit-Leiste (Kanji,
   44-px-Knopf) wuchs vom Hand-Tablett nach oben in die eigene Hinterreihe (3 Felder je ~377 px²). Flach und einzeilig wie
   Tablet hoch: ohne Kanji, Knopf 32 px, Auswahlmodus ohne Umbruch. */
@media (min-width:900px) and (min-height:501px) and (max-height:640px) and (orientation:landscape){
  body.stage-on .game.has-hud-skin .arena>.discard-bar{padding:5px 8px 5px 12px;font-size:12px;line-height:1.3;gap:8px;flex-wrap:nowrap}
  body.stage-on .game.has-hud-skin .arena>.discard-bar .db-kanji{display:none}
  body.stage-on .game.has-hud-skin .arena>.discard-bar p{flex:1 1 auto;min-width:0}
  body.stage-on .game.has-hud-skin .arena>.discard-bar button{min-height:32px;padding:4px 10px;font-size:12px;white-space:nowrap;flex:0 0 auto}
  body.stage-on .game.has-hud-skin .arena>.discard-bar.is-active{flex-wrap:nowrap}
  body.stage-on .game.has-hud-skin .arena>.discard-bar.is-active p{flex-basis:auto}
}
/* Autobuild 07.10. (Vollpartie Duel 1024x600 Zug 7/8): ferne Gegner-Hinterreihe nur ~69 px breit, "TOSSHIN 突進" brach
   zweizeilig um, die zweite Zeile lag auf READY/HP der eigenen Vorderreihe davor. Sehr schmale Felder: einzeilig wie das Handy. */
@container (max-width:119px){
  body.stage-on .battlefield.slots-projected .unit-words{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8px)}
}
/* Autobuild 07.10. 18:20 (Vollpartie Speed 1024x768 Zug 9/10): ferne Gegner-Hinterreihe nur 24 px hoch (Mindesthoehe), die
   Stichwortzeile (top 30 px) stand unter dem Feld auf ENEMY/HP der Gegner-Vorderreihe ("KANTSU"). Projizierte Felder haben
   feste Hoehe -> Groessen-Container; ist das Feld zu flach fuer die Zeile, entfaellt sie (Details zeigen die Woerter). */
body.stage-on .battlefield.slots-projected .slot{container-type:size}
@container (max-height:29px){
  body.stage-on .battlefield.slots-projected .unit-words{display:none}
}

/* 07.10. 19:05 Autobuild: Handy quer 800–999 (iPhone Pro Max 932x430) — End Turn lag unter der Hand
   (Vollpartie Duel Zug 1: Klick traf Handkarte). Gleicher Platz wie die <800-Regel: rechts oberhalb der Hand. */
@media (max-height:500px) and (orientation:landscape) and (min-width:800px) and (max-width:999px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .hud-skin .hud-end{left:auto!important;right:calc(50% - 50vw + 10px)!important;top:calc(100% - 211px)!important;z-index:10}
}
/* 07.10. 19:20 Autobuild (Vollpartie Duel 932x430/844x390 Zug 9/10): Handy quer 800–999 — Gegner-Felder nur ~50x24 px,
   "ENEMY" + Leben nebeneinander zu breit, das Leben-Schild lag auf "ENEMY" des Nachbarfelds (hpOver 4). Wie 375x667: Kanji.
   09.10. Autobuild (Vollpartie Duel 667x375 Zug 10-12: "1950/2200" auf FRONT/unter ENEMY, hpOver 5/hpHidden 1): auch < 800 breit. */
@media (max-height:500px) and (orientation:landscape) and (max-width:999px){
  body.stage-on .battlefield.slots-projected .unit .status-tag:is(.is-ready,.is-tired,.is-foe){font-size:0;letter-spacing:0;padding:1px 2px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-ready::before{content:"構";font-size:9px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-tired::before{content:"疲";font-size:9px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-foe::before{content:"敵";font-size:9px}
}

/* Autobuild 07.10.: Kamera nah (Angriff auf Anfuehrer) — Felder, deren Mitte unter der eigenen
   Anfuehrerleiste liegt (app.js syncSlotFrames → .under-hud), stuenden mit ihren Schildern im HUD. */
body.stage-on .battlefield.slots-projected .slot.under-hud { visibility: hidden; pointer-events: none; }

/* Autobuild 08.10.: Schwebetexte der Buehne („Trap set 罠“, „+1 Chi“) sind WebGL und laegen unter den
   DOM-Feldschildern — leere Felder unter einem laufenden Schwebetext treten kurz zurueck (app.js → .under-float). */
body.stage-on .battlefield.slots-projected .slot.empty.under-float { visibility: hidden; }

/* Autobuild 08.10.: 932x430 — die Fallenleiste findet keinen freien Platz und liegt auf leeren Feldern;
   deren Schilder schauten halb unter den Pillen hervor (app.js placeTrapRows → .under-trap). */
body.stage-on .battlefield.slots-projected .slot.empty.under-trap:not(.potential) { visibility: hidden; }

/* Autobuild 08.10.: Kamerafahrt (Ultimate/Angriff) — die flachen Fallenleisten lagen ueber dem gekippten Brett
   (app.js placeTrapRows → .in-focus); waehlbare Leisten (.potential) bleiben. */
body.stage-on .battlefield .trap-row.in-focus { visibility: hidden; }

/* Autobuild 08.10.: Kamerafahrt (Angriff/Ultimate) — die Handlimit-Leiste lag mitten im gekippten Bild
   (app.js placeTrapRows → .in-focus); im Auswahlmodus (.is-active) bleibt sie. */
body.stage-on .arena>.discard-bar.in-focus { visibility: hidden; }
/* 08.10. Autobuild (Kartenarten-Pruefstand pine-cliff 390x844, bewegen-1-900): eigener Ort mit „Use location“-Knopf — der Knopf brach
   zweizeilig um („USE / LOCATION“), die unten verankerte eigene Anfuehrerleiste wurde hoeher und die Handlimit-Leiste lag auf Namen
   und halbem Leben (390x844, 375x667). Knopf einzeilig. */
@media (max-width:599px) and (orientation:portrait){
  body.stage-on[data-screen="game"] .game .arena>.leader:not(.enemy) .place-button{white-space:nowrap}
}
/* 08.10. Autobuild (Kartenarten-Pruefstand spirit-bamboo 932x430, technik-1-900): Schwebetext „Kamae 構え“ (WebGL) lag unter der
   DOM-Fallenleiste „罠 TRAP“ — die Leiste tritt waehrend des Schwebetexts kurz zurueck wie leere Felder (app.js → .trap-row.under-float). */
body.stage-on .battlefield.slots-projected .trap-row.under-float { visibility: hidden; }
/* 08.10. Autobuild (Pruefstand arc-shrine-932, angriff-einheit-2-900): auf Handy quer (<= 500 px hoch) deckte die Hand in der
   Angriffs-/Faehigkeits-Nahkamera das halbe Kampfbild. Waehrend der Kamerafahrt (app.js → body.stage-focus) rutscht sie nach
   unten, nur die Kartenkoepfe bleiben; Abwerfen-Auswahl (.is-discarding) bleibt stehen. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .game .arena>.hand{transition:translate .25s ease}
  body.stage-on.stage-focus[data-screen="game"] .game .arena>.hand:not(.is-discarding){translate:0 72%}
}
/* 08.10. Autobuild (Pruefbild gap-pine-932/ort-1-1700): im Kino-Modus (Ort-/Ultimate-/Erwachen-Auftritt, cutscenes.js
   body.cs-cinema) blieben Kopfleiste (刀/Clan, auf Handy quer halb unter dem Filmbalken), Schnellsatz „言“ und der
   Spectator-Knopf ueber der Buehne stehen. Sie treten wie das restliche HUD zurueck. */
body.cs-cinema :is(.topbar,.emote-dock,.free-cam-btn){opacity:0!important;pointer-events:none;transition:opacity .25s}

/* 08.10. 20:00 Autobuild (Vollpartie Duel 932x430, KATANA_HUD_DUMP): Handy quer 800–999 — Hand-Stauchregel 04.10. (Hand bleibt
   im Kartenfach der Leiste) gilt nur ab 501 px Hoehe; hier lag die Hand auf Deck-Zaehler (100 %), Ablage (31 %) und Name/Leben/Chi. */
@media (max-height:500px) and (orientation:landscape) and (min-width:800px) and (max-width:999px){
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(4)){--hn1:3}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(5)){--hn1:4}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(6)){--hn1:5}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(7)){--hn1:6}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(8)){--hn1:7}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(9)){--hn1:8}
  body.stage-on .game.has-hud-skin .hand:has(.card:nth-child(10)){--hn1:9}
  body.stage-on .game.has-hud-skin .arena>.hand:has(.card:nth-child(4)) .card{margin:0 min(0px,calc(((var(--W) * var(--hand-w) - var(--card-w)) / var(--hn1) - var(--card-w)) / 2))}
  /* 20:20: Stauch-Raender rechnen mit zentriertem Faecher; space-evenly verteilte den Restplatz zusaetzlich (844: 324 statt 273 px). */
  body.stage-on .game.has-hud-skin .arena>.hand:has(.card:nth-child(4)){justify-content:center}
}

/* 08.10. 22:40 Autobuild — Chi-Leiste der Skin-HUD: .hud-orbs ist eine feste Box (Skin-Geometrie), Kugeln starr 1.35em in einer
   Reihe → ab 8 Kugeln liefen Kugeln + „7 / 8 CHI“ rechts aus der Box (768x1024/1280x800/932x430 unter die 1. Handkarte).
   Ab 7 Kugeln zwei Reihen (4 bzw. ab 9 Kugeln 5 Spalten), Kugeln etwas kleiner. Prüfstand work/claude-chi-orbs-fit-probe.mjs
   (NOFIX=1 schneidet ab hier ab). */
.hud-skin .hud-orbs>span:has(i:nth-child(7)){display:grid;grid-template-columns:repeat(4,1.05em);gap:1px 2px}
.hud-skin .hud-orbs>span:has(i:nth-child(9)){grid-template-columns:repeat(5,1.05em)}
.hud-skin .hud-orbs>span:has(i:nth-child(7)) i{width:1.05em;height:1.05em}
/* 08.10. 22:50 Autobuild — Ort-Leiste: in der 3D-HUD-Skin (Tablet/Desktop) lag die eigene Ultimate-/Ort-Leiste links über dem
   Anführer-Namen der Skin und ragte unter die 1. Handkarte (768x1024: „LOCATION S…“ abgeschnitten), links stehen zudem
   Emote/Einstellungen. Jetzt rechts neben der Hand über „End turn“ (Breite = Platz rechts der Hand, Brett frei), Einträge rechtsbündig umbrechend.
   Prüfstand work/claude-place-bar-fit-probe.mjs (NOFIX=1 schneidet ab hier ab). */
@media (min-width:760px) and (min-height:501px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.leader:not(.enemy){position:fixed;left:auto;right:calc(50vw - var(--W) / 2 + 12px);top:auto;bottom:calc(var(--H) * 0.72);margin:0;width:auto;min-width:0;max-width:calc(var(--W) * (1 - var(--hand-x) - var(--hand-w)) - 24px);box-sizing:border-box}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.leader:not(.enemy)>div{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.leader:not(.enemy) :is(.leader-ultimate,.leader-place){margin:0;float:none;justify-content:flex-end;flex-wrap:wrap}
}
/* Quer: Abwerf-Leiste (bottom H*(1-hand-y)+14, ~70 px hoch) schwebt direkt über dem Hand-Tablett → Leiste darüber anheben.
   Tablet hoch liegt die Abwerf-Leiste links daneben bzw. höher (Regel 03.10.) → dort nicht anheben, sonst über eigener Feldreihe. */
@media (min-width:760px) and (min-height:501px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena:has(>.discard-bar)>.leader:not(.enemy){bottom:calc(var(--H) * (1 - var(--hand-y)) + 140px)}
}
@media (min-width:760px) and (min-height:501px){
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.leader:not(.enemy):not(:has(.leader-place)){left:calc(50vw - var(--W) / 2 + var(--W) * .10);right:auto;bottom:calc(var(--H) * .52);max-width:none}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.leader:not(.enemy):has(.leader-place) .leader-ultimate{position:fixed;left:calc(50vw - var(--W) / 2 + var(--W) * .10);bottom:calc(var(--H) * .52)}
  body.stage-on[data-screen="game"] .game.has-hud-skin:has(.hud-skin[data-skin="4"]) .arena>.leader:not(.enemy):not(:has(.leader-place)),
  body.stage-on[data-screen="game"] .game.has-hud-skin:has(.hud-skin[data-skin="4"]) .arena>.leader:not(.enemy):has(.leader-place) .leader-ultimate{bottom:calc(var(--H) * .26)}
}
/* 08.10. 23:10 Autobuild — Tablet hoch (768x1024): Gegner-Leiste min(56vw,88vh) = 430 px mittig reicht bis x≈598, die Kopfleiste
   rechts (Emblem „刀“ + Haus-Knopf, ~178 px) beginnt bei x≈590 → Emblem lag auf „Turn 1“. Breite zusätzlich ≤ 100vw − 2×190 px,
   quer/Desktop greift weiter 56vw/88vh. Prüfstand work/claude-hud-hand-overlap-probe.mjs 768x1024. */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .game.has-hud-skin .hud-enemy{--foe-w:min(56vw,88vh,100vw - 380px);width:var(--foe-w);height:calc(var(--foe-w) * var(--ratio));font-size:calc(var(--foe-w) * 0.017)}
}
/* 09.10. Autobuild (Vollpartie Speed 360x740 Zug 6): Gegnerfelder 54 px breit, "ENEMY" + "1050/2600" ragten auf "SET"
   des Nachbarfelds (hpOver 1) — Kanji-Schilder gab es nur je Bildschirmgroesse. Jetzt je Feldbreite (Text bleibt fuer Vorleser). */
@container (max-width:58px){
  body.stage-on .battlefield.slots-projected .unit .status-tag:is(.is-ready,.is-tired,.is-foe){font-size:0;letter-spacing:0;padding:1px 2px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-ready::before{content:"構";font-size:9px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-tired::before{content:"疲";font-size:9px}
  body.stage-on .battlefield.slots-projected .unit .status-tag.is-foe::before{content:"敵";font-size:9px}
}
/* 09.10. Autobuild (Vollpartie Duel 568x320 Zug 9): Gegnerfelder nur ~40 px breit, "敵" + "1600" ragten 14 px auf
   "FRONT" des Nachbarfelds (hpOver 1); 667x375 Zug 13: 17 px hohes "SET" der Hinterreihe lag auf dem HP-Schild davor.
   Sehr schmale Felder: Schilder enger, kleiner, flacher. */
@media (max-height:500px) and (orientation:landscape) and (max-width:999px){
  @container (max-width:49px){
    body.stage-on .battlefield.slots-projected .unit-top{left:1px;gap:1px}
    body.stage-on .battlefield.slots-projected .unit .status-tag{line-height:1}
    body.stage-on .battlefield.slots-projected .unit .status-tag:is(.is-ready,.is-tired,.is-foe){padding:1px}
    body.stage-on .battlefield.slots-projected .unit .status-tag.is-hp{font-size:7.5px;letter-spacing:0;padding:1px}
  }
}
/* 09.10. Autobuild (Vollpartie Duel 667x375 Zug 8): unsichtbarer, umbrochener Name eines Frontreihen-Kriegers (opacity 0,
   ~60 px hoch) ragte ueber den Krieger der Hinterreihe dahinter — Tipp darauf waehlte den falschen Krieger. */
body.stage-on .battlefield.slots-projected .unit-name{pointer-events:none}
/* 09.10. Autobuild (Vollpartie Duel 667x375 Zug 9-11): ganze unsichtbare Unterzeile (Name + Werte, opacity 0, 110 px breit)
   eines Kriegers lag ueber dem HP-Schild des Nachbarn (hpHidden 3) — Tipp traf den falschen Krieger. */
body.stage-on .battlefield.slots-projected .unit-bottom{pointer-events:none}
/* 09.10. Autobuild (Vollpartie Duel 568x320): gewaehlte Handkarte -> Handfaecher (ab y~162) lag auf der eigenen
   Hinterreihe (y 184-208), Feld nicht antippbar. Waehrend der Auswahl rutscht die Hand nach unten, Reihen frei. */
@media (max-height:360px) and (orientation:landscape) and (max-width:799px){
  body.stage-on[data-screen="game"] .game.has-hud-skin:has(.hand .card.is-selected) .arena>.hand .card{transform:translateY(44px)!important}
}
/* 09.10. Autobuild (Vollpartie Duel 568x320, Bild 568x320-duel-hand8-blocked.png): 8 Handkarten = Schritt ~43 px bei
   86 px Kartenbreite; Hover hob eine Karte auf z-index 30 (styles.css) und deckte den rechten Nachbarn ganz zu,
   nach einem Tipp (klebriges Hover) war er nicht antippbar. Auf Handy quer bleibt die Stapelung nach Reihenfolge. */
@media (max-height:500px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .game .arena>.hand .card:hover:not(.is-selected):not(:focus-visible){z-index:1!important}
}
/* 09.10. Endschirm Handy quer schmal (568x320, Vollpartie Speed): die Regel <=640 px gibt „Watch replay“ flex-basis 100 %
   fuer den Umbruch, die Handy-quer-Leiste (max-height:500px) erzwingt aber nowrap -> „New Duel“/„Back to Dojo“ ~45 px breit,
   drei Textzeilen. Dort teilen sich alle Knoepfe die eine Zeile. */
@media (max-width:640px) and (max-height:500px) and (orientation:landscape){
  body.stage-on .game .finished-banner .button-row > .finish-watch{flex:1 1 0}
}
/* 13.10. Autobuild: 3D-HUD Kleintexte (echte Solo-Partie 1600x900 Zug 4, Pruefstand work/claude-hud-text-cdp.mjs): Deck/Discard
   8,7 px, Ultimate-Hinweis 9, Chi 9,4, Details/Skip/Haus/„No cards yet“ 10, „Your Turn“ 10,1 -> ab 760x501 mindestens 11 px.
   Steht vor den 2200/3400-Regeln, damit die grossen Schirme ihre 13/18 px behalten; Kartengesichter bleiben Kartendesign. */
@media (min-width:760px) and (min-height:501px){
  body.stage-on[data-screen="game"] .game .ultimate-hint,
  body.stage-on[data-screen="game"] .game-head .game-house,
  body.stage-on[data-screen="game"] .game .panel-toggle,
  body.stage-on[data-screen="game"] .game .stage-skip,
  body.stage-on[data-screen="game"] .rail-empty,
  body.stage-on[data-screen="game"] .game .hud-orbs b small,
  body.stage-on[data-screen="game"] .game .hud-turn small,
  body.stage-on[data-screen="game"] .game .hud-name small{font-size:11px}
  body.stage-on[data-screen="game"] .game .hud-count small{font-size:11px!important}
  /* Tablet 768x1024 Zug 3: Fallen-Schilder 8 px */
  body.stage-on .battlefield .trap-slot{font-size:11px}
}
/* 13.10. Autobuild Handy-HUD: Kleintexte (echte Solo-Partie 390x844 Zug 3, Pruefstand work/claude-hud-text-cdp.mjs):
   Details/Skip 10 px, Anfuehrer-Zeile „36 IN DECK · 1 DISCARD“ 8,5 px, Fallen-Schilder 8 px; quer 667x375 Zug 4: Ultimate-Hinweis 9, Haus/„No cards yet“ 10 -> Handy + quer 11 px. */
@media (max-width:759px), (max-height:500px){
  body.stage-on[data-screen="game"] .game .panel-toggle,
  body.stage-on[data-screen="game"] .game .stage-skip,
  body.stage-on .battlefield .trap-slot,
  body.stage-on[data-screen="game"] .game .ultimate-hint,
  body.stage-on[data-screen="game"] .game-head .game-house,
  body.stage-on[data-screen="game"] .rail-empty{font-size:11px}
  body.stage-on[data-screen="game"] .game .arena>.leader .leader-caption{font-size:11px!important}
}

/* 09.10. Autobuild (Vollpartie Duel 2560x1440, Pruefstand work/claude-hud-1440-text-probe.mjs): HUD-Kleintexte hatten
   dieselben px wie auf 1600x900 (Ultimate-Hinweis 9 px, Details/Skip/Haus 10 px, Feldschilder 8 px) -> auf 1440p kaum
   lesbar. Ab 2200x1250 mindestens 13 px; Kartengesichter bleiben Kartendesign. Auch hohe 4:3-Schirme ab 1900x1400 (2048x1536, 1920x1440: 09.10. Vollpartie, Texte 8-12 px); 1920x1080 unberuehrt. */
@media (min-width:2200px) and (min-height:1250px), (min-width:1900px) and (min-height:1400px){
  body.stage-on[data-screen="game"] .game .ultimate-hint,
  body.stage-on[data-screen="game"] .game-head .game-house,
  body.stage-on[data-screen="game"] .game .panel-toggle,
  body.stage-on[data-screen="game"] .game .stage-skip,
  body.stage-on[data-screen="game"] .rail-empty,
  body.stage-on[data-screen="game"] .game .centerline>span,
  body.stage-on[data-screen="game"] .game .slot.empty>span{font-size:13px}
}

/* 09.10. Autobuild (Vollpartie 896x414 Speed, Pruefstand work/claude-emote-settings-probe.mjs): brief-0710-1100 hebt den
   Emote-Knopf fuer 1024x768 ueber das Zahnrad; auf Handy quer (<=500 px hoch) lag er damit auf dem 2. Eintrag der
   „Played“-Leiste (top 64, 120 px hoch). Hier sitzt er unter der Leiste und ueber der eigenen Ultimate-Box. */
@media (min-width:760px) and (max-width:1099px) and (max-height:500px){
  body.stage-on[data-screen="game"]:has(.game) .emote-dock{top:calc(64px + 120px + 6px);bottom:auto}
  body.stage-on[data-screen="game"]:has(.mulligan-stage:not(.is-waiting)) .emote-dock{display:none}
}

/* 09.10. Autobuild (Vollpartie Duel 3840x2160, Pruefstand work/claude-hud-1440-text-probe.mjs 3840 2160 16): die
   2560-Regel (13 px) galt auch auf 4K -> HUD-Kleintexte und Zuschauer-Knopf 12-13 px, kaum lesbar. Ab 3400x1900
   mindestens 18 px; Kartengesichter bleiben Kartendesign. */
@media (min-width:3400px) and (min-height:1900px){
  body.stage-on[data-screen="game"] .game .ultimate-hint,
  body.stage-on[data-screen="game"] .game-head .game-house,
  body.stage-on[data-screen="game"] .game .panel-toggle,
  body.stage-on[data-screen="game"] .game .stage-skip,
  body.stage-on[data-screen="game"] .rail-empty,
  body.stage-on[data-screen="game"] .free-cam-btn,
  body.stage-on[data-screen="game"] .game .centerline>span,
  body.stage-on[data-screen="game"] .game .slot.empty>span{font-size:18px}
}

/* 09.10. Autobuild (4K Played-Leiste, Pruefstand KATANA_RAIL=1 work/claude-hud-1440-text-probe.mjs 3840 2160 16): die
   Leiste (styles.css) bleibt 188 px breit, Kartennamen 12 px, Kartenart 8 px -> auf 4K kaum lesbar. Ab 3400x1900 waechst
   sie mit: 300 px, Bild 52x74, kein Leistentext unter 16 px. */
@media (min-width:3400px) and (min-height:1900px){
  body.stage-on[data-screen="game"] .play-rail{width:300px;padding:12px 12px 14px}
  body.stage-on[data-screen="game"] .play-rail h3{font-size:20px;margin-bottom:9px}
  body.stage-on[data-screen="game"] .play-rail h3 small{font-size:20px}
  body.stage-on[data-screen="game"] .play-rail ol{gap:8px}
  body.stage-on[data-screen="game"] .rail-item{grid-template-columns:52px 1fr;column-gap:10px}
  body.stage-on[data-screen="game"] .rail-art{width:52px;height:74px}
  body.stage-on[data-screen="game"] .rail-name{font-size:18px}
  body.stage-on[data-screen="game"] .rail-kind{font-size:16px}
  body.stage-on[data-screen="game"] .play-rail .rail-empty{font-size:18px}
}

/* 09.10. Autobuild (4K Spielzustand-Texte, Pruefstand KATANA_RAIL=1 work/claude-hud-1440-text-probe.mjs 3840 2160 16): nach
   den ersten Zuegen Fallenleiste „TRAP“ 8 px, Status „READY“ 9,5 px, Ort-Name + „Use location“ 10 px, Zughilfe 12 px.
   Ab 3400x1900 mindestens 16 px; Fallenleiste waechst mit (440 -> 640 px), Kartengesichter bleiben Kartendesign.
   Zughilfe braucht !important (Grundregel „body.stage-on .game .turn-guide“ setzt font !important). */
@media (min-width:3400px) and (min-height:1900px){
  body.stage-on[data-screen="game"] .battlefield .trap-row{width:640px;gap:9px}
  body.stage-on[data-screen="game"] .battlefield .trap-slot{font-size:16px;min-height:38px;padding:5px 12px;gap:9px}
  body.stage-on[data-screen="game"] .battlefield .trap-slot b{font-size:20px}
  body.stage-on[data-screen="game"] .battlefield .unit .status-tag{font-size:16px;padding:4px 12px}
  body.stage-on[data-screen="game"] .game .arena .leader .place-name{font-size:16px}
  body.stage-on[data-screen="game"] .game .arena .leader .small-button{font-size:16px;min-height:34px;padding:5px 12px}
  body.stage-on[data-screen="game"] .game .turn-guide{font-size:16px!important}
}

/* 09.10. Autobuild (4K Feld-Schlagworte + Handlimit-Leiste, KATANA_RAIL=1 work/claude-hud-1440-text-probe.mjs 3840 2160 16):
   .unit-words 7 px (styles.css), Handlimit-Leiste 11-13 px, Ort „Location spent“ 9 px -> auf 4K kaum lesbar. Ab 3400x1900 mindestens 16 px;
   Selektoren mit .has-hud-skin, damit sie die Leisten-Regeln 1442/2168-2208 sicher schlagen (keine !important dort). */
@media (min-width:3400px) and (min-height:1900px){
  body.stage-on[data-screen="game"] .battlefield.slots-projected .unit-words{font-size:16px;top:40px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.discard-bar{font-size:16px;padding:8px 12px 8px 16px!important;gap:12px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.discard-bar p{font-size:16px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.discard-bar p b{font-size:16px}
  body.stage-on[data-screen="game"] .game.has-hud-skin .arena>.discard-bar button{font-size:16px;min-height:40px;padding:6px 14px}
  body.stage-on[data-screen="game"] .game .arena .leader .place-hint{font-size:16px}
}

/* 09.10. Autobuild (1440 Endschirm, KATANA_END_DUMP=1 KATANA_END_MIN=13 work/claude-3d-fullgame-probe.mjs 2560 1440 speed):
   36 Endschirm-Texte 9-14 px wie auf 1600 -> auf 1440p kaum lesbar. Ab 2200x1250 mindestens 13 px (wie HUD-Regel 2200x1250);
   steht VOR der 4K-Endschirm-Regel, damit 4K (16 px) gewinnt. Media-Bedingungen bewusst vertauscht: tests/hud-1440-text
   + hud-4k-text suchen die HUD-Regel per lastIndexOf exakt nach „(min-width:2200px) and (min-height:1250px)“. Auch hohe 4:3-Schirme ab 1900x1400 (2048x1536, 1920x1440: 09.10. Vollpartie, Texte 8-12 px); 1920x1080 unberuehrt. */
@media (min-height:1250px) and (min-width:2200px), (min-height:1400px) and (min-width:1900px){
  body.stage-on[data-screen="game"] .game .finished-banner p{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-grade small{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-goals li{font-size:14px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-goals li i{font-size:14px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-rewards-label{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-tile small{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li span{font-size:15px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li em{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li b{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li small{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li strong{font-size:15px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li em{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li b{font-size:13px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li small{font-size:13px}
}

/* 09.10. Autobuild (4K Endschirm, KATANA_END_DUMP=1 work/claude-3d-fullgame-probe.mjs 3840 2160 speed): 36 Endschirm-Texte
   9,5-14 px (Kachel-Beschriftung, Ziele, Quests, Leader level) -> auf 4K kaum lesbar. Ab 3400x1900 mindestens 16 px;
   Titel, Note, Kachel-Zahlen bleiben (schon groesser). */
@media (min-width:3400px) and (min-height:1900px){
  body.stage-on[data-screen="game"] .game .finished-banner p{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-grade small{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-goals li{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-goals li i{font-size:16px;width:24px;height:24px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-quote{font-size:18px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-rewards-label{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .finish-tile small{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li span{font-size:18px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li em{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li b{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .quest-list li small{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li strong{font-size:18px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li em{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li b{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .rank-list li small{font-size:16px}
  body.stage-on[data-screen="game"] .game .finished-banner .button-row button{font-size:18px;min-height:56px}
}

/* 09.10. finish-row-opaque */
/* Endschirm Desktop/quer: Quest-Text schien zwischen den Knoepfen der klebenden Knopfzeile durch (Verlauf deckte erst bei 38 %). */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game .finished-banner .button-row{background:linear-gradient(180deg,transparent,#080504 12px)}
}

/* 11.10.2026 (Nutzer, Referenzbild): Plätze = Alchemie-Siegel im 3D-Boden; Schild nur, wenn der Platz wählbar ist. */
body.stage-on .game .slot.empty:not(.potential){visibility:hidden}

/* 11.10.2026 (Nutzer: „Karten auf meinem Tisch sind dunkel, müssen hell sein … überlappt, das nervt“): 3D-Hand ohne
   Abdunkeln und ohne Überlappung. Nicht spielbare Karten bleiben voll hell; spielbare tragen weiter den grünen Schein.
   Ab 6 Karten wird die ganze Hand gleichmäßig kleiner (zoom), statt Karten übereinanderzuschieben. */
body.stage-on .game .hand{--hn:5}
body.stage-on .game .hand:has(>.card:nth-child(6)){--hn:6}
body.stage-on .game .hand:has(>.card:nth-child(7)){--hn:7}
body.stage-on .game .hand:has(>.card:nth-child(8)){--hn:8}
body.stage-on .game .hand:has(>.card:nth-child(9)){--hn:9}
body.stage-on .game .hand:has(>.card:nth-child(10)){--hn:10}
body.stage-on .game .hand>.card{margin-inline:3px!important;zoom:min(1,calc(5 / var(--hn)))}
body.stage-on .game .hand .card.is-unplayable,
body.stage-on .game .hand .card:disabled,
body.stage-on .game .hand .card:disabled:not(.is-unplayable){filter:none!important;opacity:1!important}
/* 11.10.2026 (Nutzer): Schnellstart oben auf der Duell-Seite — sofort gegen den Dojo-Gegner, ohne Deck/Haus zu wählen. */
.quick-start{margin-top:14px}
.quick-start-note{margin:6px 0 0;font-size:13px;opacity:.75}
/* L4b 12.10.2026: Anführer-Rang 1-4 + Kleid-Wahl im Anführer-Panel (Server prüft). */
.leader-outfits{grid-column:1/-1;display:grid;gap:4px;margin-top:4px}
.leader-outfits p{margin:0;display:flex;align-items:center;gap:6px;font-size:12px}
.leader-outfits p b{min-width:52px;font:600 11px var(--display);letter-spacing:.08em;color:rgba(234,220,196,.8)}
.leader-outfits p.is-locked{opacity:.55}
.outfit-pick{min-width:32px;min-height:32px;border:1px solid rgba(216,179,106,.35);border-radius:5px;background:rgba(0,0,0,.25);color:inherit;font:600 12px var(--display);cursor:pointer}
.outfit-pick[aria-pressed="true"]{border-color:var(--gold-hi);background:rgba(216,179,106,.22);color:var(--gold-hi)}
.outfit-pick:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
/* 12.10. Autobuild (Messung 390x844, 8 Handkarten): Hochkant-Fächer (R10) überlappt seine Karten ohnehin aus der Bildschirmbreite;
   der zoom der Regel 11.10. machte sie zusätzlich klein (95 statt 151 px, Fächer nur 228 von 370 px). Hochkant volle Größe. */
@media (max-width:599px) and (orientation:portrait){
  body.stage-on[data-screen="game"] .game .arena>.hand>.card{zoom:1}
}
/* 12.10. Autobuild (Messung 375x667 Quick Start): Starthand hochkant 2x4 Karten, „Keep all cards“ lag bei y 1224 im
   scrollenden .mulligan-stage → erst nach ~600 px Scrollen sichtbar. Knopfzeile klebt unten wie beim Endschirm. */
@media (max-width:759px) and (min-height:501px){
  body .game .mulligan-stage:not(.is-waiting)>.button-row{position:sticky;bottom:0;z-index:2;justify-content:center;box-sizing:border-box;width:calc(100% + 24px);margin:0 -12px;padding:10px 12px max(14px,env(safe-area-inset-bottom));background:#080504}
  body .game .mulligan-stage:not(.is-waiting){padding-bottom:0}
}
/* 12.10. Autobuild (Messung 768x1024 Quick Start): „? Details“ lag im 3D ohne Hintergrund, 10 px grau direkt auf hellem
   Steinboden → kaum lesbar. Dieselbe dunkle Platte wie „Spectator“ (.free-cam-btn). */
body.stage-on .game .game-toolbar .panel-toggle{background:rgba(18,13,11,.93);border:1px solid #8a6a2e;color:#f1dcae;padding-inline:10px}
body.stage-on .game .game-toolbar .panel-toggle.is-on{color:var(--gold)}
/* 12.10. Autobuild (Messung 1280x800 Speed Solo, Sakura Court): Krieger gewählt → einziges Ziel Gegner-Leiste oben, aber nur
   roter Schein (#ff5a3a) auf rotem Kirschhintergrund, kein Puls → kaum erkennbar. Heller Goldrand + Goldschein mit Puls. */
body.stage-on .game.has-hud-skin .hud-enemy.potential{filter:drop-shadow(0 0 2px #fff4d0) drop-shadow(0 0 12px #f3c060) drop-shadow(0 8px 18px #000b);animation:hud-target-pulse 1.4s ease-in-out infinite}
@keyframes hud-target-pulse{50%{filter:drop-shadow(0 0 3px #fffaf0) drop-shadow(0 0 24px #ffd27a) drop-shadow(0 8px 18px #000b)}}
@media (prefers-reduced-motion:reduce){body.stage-on .game.has-hud-skin .hud-enemy.potential{animation:none}}

/* 13.10. Deckbau: Zähler + Speichern kleben unten (178 Karten, am Handy 31.700 px Seite). */
.deck-dock{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border:1px solid rgba(216,179,106,.4);border-radius:999px;background:rgba(14,9,8,.94);box-shadow:0 10px 30px #000c;color:var(--gold-hi);font:700 16px Cinzel,serif;white-space:nowrap}
.deck-dock .primary{min-height:44px;padding:0 20px}
main.page:has(.deck-dock){padding-bottom:96px}

/* 13.10. Story am Handy: 20 Prüfungen mit Bild 3:4 über volle Breite = 613 px je Karte, Seite 14.651 px → flaches Banner. */
@media (max-width:560px){
  body:not([data-screen="game"]) .campaign-art{max-width:none;aspect-ratio:16/7}
  body:not([data-screen="game"]) .campaign-encounter{gap:14px}
  /* Hochformat-Bilder: Banner zeigt sonst Brust statt Gesicht (Inline-Stil 50% 30%). */
  body:not([data-screen="game"]) .campaign-art img{object-position:50% 12%!important}
  body:not([data-screen="game"]) .campaign-encounter:has(button:disabled) .campaign-art::after{font-size:40px}}

/* 13.10. Kartenarchiv Handy 390x844: minmax(210px,1fr) = 1 Spalte, 271 Karten je ~650 px → Seite 178.284 px.
   Am Handy 2 Spalten (Seite ~54.000 px), Regeltext 3 Zeilen. */
@media (max-width:560px){
  .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .archive-item{padding:6px 6px 8px!important}
  .archive-item>p{-webkit-line-clamp:3;font-size:12px}}

/* 13.10. Warriors Handy 390x844: Polster main 23 + Layout 16 + Panel 28 je Seite → Raster nur 253 von 390 px,
   2 Spalten je 123 px, Seite 20.142 px. Polster klein → 3 Spalten (minmax 90 aus champion.css ≤ 599). */
@media (max-width:560px){
  .warriors-layout{padding:0}
  .warriors-grid-panel{padding:14px 10px 18px}
  /* Name sonst 42 px neben den Sternen → Name volle Zeile, Sterne darunter. */
  /* 3 Spalten → Name 71 px, Ellipse kappte lange Namen → 2 Zeilen, gleiche Höhe je Kachel. */
  .warrior-thumb-name{flex-basis:calc(100% - 16px);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.4em;overflow-wrap:anywhere}}

/* 13.10. Regeln Handy 375x812: Raster 40 px Nummer + 26 px Lücke + 26 px Polster je Seite → Regeltext nur 211 von
   375 px, lange Absätze 15+ Zeilen. Am Handy Nummer über der Überschrift, Text volle Breite. */
@media (max-width:560px){
  body:not([data-screen="game"]) .rule-item{grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 16px}
  body:not([data-screen="game"]) .rule-item>span{font-size:24px;line-height:1}
  body:not([data-screen="game"]) .rule-item>div{grid-column:1;grid-row:auto}}

/* 13.10. Duel-Seite Handy 390x844: Arenenwahl einspaltig 10 × 215 px = 2.289 px → am Handy 2 Spalten,
   Untertitel aus (bleibt im Desktop), Kanji + Name kleiner. */
@media (max-width:560px){
  .arena-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .arena-kanji{font-size:22px;top:7px;left:8px}
  .arena-text{left:9px;right:9px;bottom:7px}
  .arena-text strong{font-size:14px;line-height:1.15}
  .arena-text small{display:none}
  .arena-option .check{width:22px;height:22px;top:6px;right:6px}}

/* Leader skins and the shared Glory Road. */
.glory-road{margin:1.2rem 0;padding:1rem;border:1px solid #8e7048;background:#15120f;color:#ead7ae}
.glory-road.is-prestige{border:2px solid #f5d990;box-shadow:inset 0 0 0 2px #604018,0 0 18px #b7904a88}
.glory-road ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;padding:0;list-style:none}
.glory-road li{border:1px solid #594631;padding:.4rem;text-align:center;font-size:.75rem;color:#a99b84}
.glory-road li.is-reached{border-color:#caa65e;background:#3b2b15;color:#ffe4a3}
.leader-skin-rank{margin:1rem 0;padding:.75rem;border:1px solid #514330;background:#15110f}
.leader-skin-rank h4{display:flex;gap:.5rem;align-items:baseline;color:#f0d6a0}
.leader-skin-rank h4 small{margin-left:auto;color:#ab9c82}
.leader-skin-rank.is-locked{opacity:.62}
.leader-skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.65rem}
.leader-skin{display:grid;gap:.35rem;align-content:start;padding:.45rem;border:1px solid #6f5b3b;background:#211a15;color:#f4dfb8}
.leader-skin.is-worn{border-color:#e2bd6f;box-shadow:inset 0 0 0 1px #e2bd6f}
.leader-skin img{width:100%;aspect-ratio:1;object-fit:cover;background:#110e0d}
.leader-skin-art{position:relative;aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#49391f,#110e0d 70%);color:#b89a5f;font-size:2rem}
.leader-skin-art img{position:absolute;inset:0;height:100%}
.leader-skin strong{font-size:.8rem}.leader-skin small{font-size:.72rem;color:#d2ba8c}
.leader-skin button{font-size:.75rem;min-height:2.2rem}
.leader-skin-progress{height:.35rem;background:linear-gradient(to right,#d4ac61 calc(var(--p)*100%),#4c3b28 0)}
@media(max-width:560px){.glory-road ol{grid-template-columns:repeat(3,minmax(0,1fr))}.leader-skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 13.10. Leader-Tab im Settings: Spieler-Level, Rang, Ruhmespfad, Skins je Rang seitwärts (Nutzer: „so strukturiert seitwärts“). */
.lp{display:grid;gap:16px;color:#f1e6cf}
.lp h4{margin:0;font:700 15px/1.1 Cinzel,Georgia,serif;letter-spacing:.1em;color:#f6e4bd}
.lp-hero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px;border:1px solid #8b6a34;border-radius:10px;
  background:radial-gradient(ellipse at 15% 20%,rgba(184,54,42,.22),transparent 55%),linear-gradient(180deg,#22150f,#140c09)}
.lp-portrait{margin:0;display:grid;gap:6px;justify-items:center;align-content:start}
.lp-portrait img{width:150px;height:188px;object-fit:contain;border-radius:8px;border:1px solid #b38b45;
  background:radial-gradient(circle at 50% 35%,#4a3420,#120b08 72%);box-shadow:0 0 0 3px rgba(20,12,10,.9),0 0 22px rgba(216,179,106,.18)}
.lp-portrait figcaption{font:600 11px Cinzel,Georgia,serif;letter-spacing:.12em;color:#d8b36a;text-align:center}
.lp-stats{display:grid;gap:8px;align-content:start;min-width:0}
.lp-eyebrow{margin:0;font:600 11px Cinzel,Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:#cdb691}
.lp-level{display:flex;align-items:baseline;gap:8px}
.lp-level b{font:700 56px/0.9 Cinzel,Georgia,serif;color:#f6e4bd;text-shadow:0 0 18px rgba(240,190,100,.35)}
.lp-level span{font:600 16px Cinzel,Georgia,serif;color:#a99880}
.lp-prestige{margin-left:auto;font:normal 700 12px Cinzel,Georgia,serif;color:#ffe08a;letter-spacing:.14em}
.lp-bar{height:10px;border-radius:6px;background:#2a1d15;border:1px solid #6f5532;overflow:hidden}
.lp-bar i{display:block;height:100%;width:calc(var(--p)*100%);background:linear-gradient(90deg,#8f2419,#d9a24c,#f6dc94);box-shadow:0 0 12px rgba(240,190,100,.5)}
.lp-xp{font:12px "Segoe UI",sans-serif;color:#cdb691}
.lp-rank{display:flex;align-items:center;gap:12px;padding-top:6px;border-top:1px solid rgba(216,179,106,.18)}
.lp-rank strong{display:block;font:700 17px "Shippori Mincho B1",Georgia,serif;color:#f6e9d2}
.lp-rank small{font:12px "Segoe UI",sans-serif;color:#a99880}
.lp-kanji{flex:none;min-width:46px;height:46px;padding:0 6px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(180deg,#a52d20,#6f1a11);
  border:1px solid #e3bd78;color:#fff3df;font:20px/1 "Yuji Syuku",serif;box-shadow:inset 0 1px 0 rgba(255,215,160,.3)}
.lp-honor{margin-left:auto;padding:6px 12px;border-radius:999px;border:1px solid #9c7a3c;background:#1a110c;font:700 12px Cinzel,Georgia,serif;letter-spacing:.08em;color:#f3d99a;white-space:nowrap}
.lp-next{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:1px dashed rgba(216,179,106,.45);background:rgba(255,255,255,.02)}
.lp-next small{display:block;font:11.5px "Segoe UI",sans-serif;color:#a99880}
.lp-next strong{display:block;font:700 15px "Shippori Mincho B1",Georgia,serif;color:#f3d99a}
.lp-next strong span{font-family:"Yuji Syuku",serif;color:#e0a090}
.lp-next-faces{margin-left:auto;display:flex}
.lp-next-faces img{width:38px;height:48px;object-fit:contain;margin-left:-10px;border-radius:5px;border:1px solid #6f5532;background:#140c09;filter:grayscale(.6) brightness(.8)}
.lp-road,.lp-rankrow{padding:12px 14px;border:1px solid rgba(216,179,106,.28);border-radius:10px;background:linear-gradient(180deg,#1b110c,#120b08)}
.lp-road header,.lp-rankrow header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.lp-road header small{margin-left:auto;font:12px "Segoe UI",sans-serif;color:#cdb691}
.lp-road h4 span{font:14px "Yuji Syuku",serif;color:#d8b36a;letter-spacing:0;margin-left:6px}
.lp-road-track,.lp-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin:0;list-style:none;
  scrollbar-width:thin;scrollbar-color:#8b6a34 transparent;overscroll-behavior-x:contain}
.lp-road-track>li,.lp-scroll>.lp-skin{scroll-snap-align:start;flex:none}
.lp-road-track>li{position:relative;width:96px;display:grid;gap:4px;justify-items:center;text-align:center}
.lp-road-track>li:not(:last-child)::after{content:"";position:absolute;top:34px;left:calc(50% + 32px);width:42px;height:2px;background:#4a3825}
.lp-road-track>li.is-got:not(:last-child)::after{background:#d9a24c}
.lp-node{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid #4a3825;background:#140c09}
.lp-node img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(.85) brightness(.6)}
.lp-road-track>li.is-got .lp-node{border-color:#e3bd78;box-shadow:0 0 14px rgba(240,190,100,.35)}
.lp-road-track>li.is-got .lp-node img{filter:none}
.lp-road-track>li.is-next .lp-node{border-color:#c0402f;box-shadow:0 0 0 3px rgba(192,64,47,.25)}
.lp-road-track strong{font:700 11px Cinzel,Georgia,serif;color:#f3d99a}
.lp-road-track small{font:10.5px/1.25 "Segoe UI",sans-serif;color:#a99880}
.lp-mini{display:block;width:100%;height:4px;border-radius:3px;background:linear-gradient(90deg,#d9a24c calc(var(--p)*100%),#3a2b1c 0)}
.lp-rankrow.is-current{border-color:#e3bd78;box-shadow:0 0 0 1px rgba(227,189,120,.35),0 0 24px rgba(240,190,100,.12)}
.lp-rankrow.is-locked .lp-kanji{background:#2a1d15;border-color:#6f5532;color:#a99880}
.lp-rankrow header small{display:block;font:11.5px "Segoe UI",sans-serif;color:#a99880;margin-top:3px}
.lp-count{margin-left:auto;font:600 11px Cinzel,Georgia,serif;letter-spacing:.1em;color:#cdb691;white-space:nowrap}
.lp-skin{width:138px;display:grid;gap:6px;align-content:start;padding:8px;border-radius:8px;border:1px solid #4a3825;background:#1a110c;transition:border-color .2s,transform .2s}
.lp-skin:hover{border-color:#b38b45;transform:translateY(-2px)}
.lp-skin.is-owned{border-color:#7a5f36}
.lp-skin.is-worn{border-color:#f0cf86;box-shadow:0 0 0 1px #f0cf86,0 0 16px rgba(240,190,100,.3)}
.lp-skin.is-locked .lp-art img{filter:grayscale(1) brightness(.45)}
.lp-art{position:relative;height:150px;border-radius:6px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#3e2c1a,#0f0907 75%)}
.lp-art img{width:100%;height:100%;object-fit:contain}
.lp-tag{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:999px;font:700 9.5px Cinzel,Georgia,serif;letter-spacing:.1em;text-transform:uppercase;border:1px solid}
.t-free{background:#16301c;border-color:#5fae6c;color:#c9f2cf}
.t-reward{background:#2c2010;border-color:#d9a24c;color:#ffe2a4}
.t-honor{background:#2a1610;border-color:#c0402f;color:#ffd0c4}
.t-premium{background:#24143a;border-color:#a982f0;color:#e6d8ff}
.lp-skin strong{font:600 12.5px "Shippori Mincho B1",Georgia,serif;color:#f6e9d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-btn{min-height:40px;border-radius:5px;border:1px solid #9c7a3c;background:linear-gradient(180deg,#2c1d14,#1a110c);color:#f1e6cf;cursor:pointer;
  font:600 11px Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
.lp-btn:hover{border-color:#f3d99a;color:#fff}
.lp-btn.is-buy{background:linear-gradient(180deg,#a52d20,#6f1a11);border-color:#e3bd78;color:#fff3df}
.lp-btn:focus-visible,.lp-scroll:focus-visible{outline:2px solid #f3d99a;outline-offset:2px}
.lp-btn[disabled]{opacity:.55;cursor:wait}
.lp-state{min-height:40px;display:grid;place-items:center;font:600 10.5px Cinzel,Georgia,serif;letter-spacing:.08em;color:#a99880;text-align:center}
.lp-state.is-on{color:#f3d99a}
.lp-foot{margin:0;font:12px "Segoe UI",sans-serif;color:#8f7e66}
@media (max-width:700px){
  .lp-hero{grid-template-columns:1fr;justify-items:center;text-align:center}
  .lp-stats{width:100%}
  .lp-level{justify-content:center}
  .lp-rank{flex-wrap:wrap;justify-content:center}.lp-honor{margin:0}
  .lp-next{flex-direction:column;text-align:center}.lp-next-faces{margin:0}
  .lp-skin{width:124px}.lp-art{height:132px}
}
@media (prefers-reduced-motion:reduce){.lp-skin{transition:none}.lp-skin:hover{transform:none}}
.s-body.is-wide,.s-body.is-wide>.s-pane,.lp,.lp>*,.lp-ranks,.lp-rankrow,.lp-road{min-width:0}
.lp-ranks{display:grid;gap:12px}

/* 13.10. Pfeile an Seitwärts-Leisten (pulsierend, leicht durchsichtig), anklickbare Rang-Köpfe, Seite „Leaders“ (Reiter + Gitter). */
.lp-rail{position:relative;min-width:0}
.lp-arrow{position:absolute;top:0;bottom:10px;z-index:2;width:46px;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  font:300 40px/1 Georgia,serif;color:#f3d99a;opacity:.55;transition:opacity .25s}
.lp-arrow.is-next{right:0;background:linear-gradient(90deg,transparent,rgba(13,8,6,.85) 70%);animation:lp-nudge 1.6s ease-in-out infinite}
.lp-arrow.is-prev{left:0;background:linear-gradient(270deg,transparent,rgba(13,8,6,.85) 70%)}
.lp-arrow:hover,.lp-arrow:focus-visible{opacity:.95}
.lp-rail.at-end .lp-arrow.is-next,.lp-rail.at-start .lp-arrow.is-prev{opacity:0;pointer-events:none;animation:none}
@keyframes lp-nudge{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:.75;transform:translateX(4px)}}
.lp-scroll.is-gliding,.lp-road-track.is-gliding{scroll-snap-type:none}
.lp-rankhead{display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.lp-rankhead:hover h4,.lp-rankhead:focus-visible h4{color:#fff;text-decoration:underline;text-decoration-color:#d9a24c;text-underline-offset:4px}
.lp-rankhead:focus-visible,.lp-seeall:focus-visible,.lp-tab:focus-visible,.lp-next:focus-visible,button.lp-kanji:focus-visible{outline:2px solid #f3d99a;outline-offset:3px}
button.lp-kanji{cursor:pointer}
.lp-seeall{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #9c7a3c;background:#1a110c;color:#f3d99a;cursor:pointer;
  font:600 11px Cinzel,Georgia,serif;letter-spacing:.1em;white-space:nowrap}
.lp-seeall:hover{border-color:#f3d99a;color:#fff}
button.lp-next{width:100%;color:inherit;text-align:left;cursor:pointer;font:inherit}
button.lp-next:hover{border-color:#e3bd78;background:rgba(240,190,100,.06)}
.lp-next-go{font:300 30px/1 Georgia,serif;color:#f3d99a;opacity:.7;animation:lp-nudge 1.6s ease-in-out infinite}
.lp-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.lp-tab{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:8px;border:1px solid #4a3825;background:#1a110c;color:#e0cfb4;cursor:pointer}
.lp-tab .lp-kanji{min-width:40px;height:40px;font-size:17px}
.lp-tab strong{font:700 12.5px Cinzel,Georgia,serif;letter-spacing:.06em}
.lp-tab small{font:11px "Segoe UI",sans-serif;color:#a99880}
.lp-tab:hover{border-color:#b38b45}
.lp-tab.is-on{border-color:#f0cf86;background:linear-gradient(180deg,#3a1d13,#1d110c);box-shadow:0 0 0 1px #f0cf86,0 0 16px rgba(240,190,100,.2)}
.lp-tab.is-locked .lp-kanji{background:#2a1d15;border-color:#6f5532;color:#a99880}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lp-grid .lp-skin{width:auto}
.lp-grid .lp-art{height:190px}
.leaders-page .lp-page{max-width:1180px}
@media (max-width:860px){.lp-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .lp-arrow{width:34px;font-size:32px}
  .lp-rankrow header{flex-wrap:wrap}.lp-seeall{margin-left:auto}
  .lp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-grid .lp-art{height:160px}
  .lp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.lp-arrow.is-next,.lp-next-go{animation:none}}

/* 13.10. Spiel-HUD schmal (Codex-Worker) */
@media (max-width:1279px){
  body[data-screen="game"] .game{--hud-ink:#f2e7d3;--hud-gold:#d8b36a;--hud-muted:#d5c3a8}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) :is(.tutorial-bar,.arena>.leader,.arena>.action-strip){box-sizing:border-box;max-width:100%;border:1px solid #8b6a34;background:linear-gradient(160deg,#302019 0%,#1d120f 45%,#100a09 100%);box-shadow:inset 0 0 0 1px #100907,inset 0 1px 0 #d8b36a55,0 8px 20px #08050488;color:var(--hud-ink)}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) :is(.tutorial-bar,.arena>.leader,.arena>.action-strip)::after{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid #d8b36a35;border-radius:3px;background:linear-gradient(#d8b36a,#d8b36a) top left/9px 1px no-repeat,linear-gradient(#d8b36a,#d8b36a) top left/1px 9px no-repeat,linear-gradient(#d8b36a,#d8b36a) bottom right/9px 1px no-repeat,linear-gradient(#d8b36a,#d8b36a) bottom right/1px 9px no-repeat}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 18px;width:100%;margin:8px 0 12px;padding:12px 18px;border-radius:6px;transform:none;animation:none}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar::before{left:18px;right:18px;background:linear-gradient(90deg,#8b6a34,#d8b36a,#8b6a34)}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar .eyebrow{display:block;grid-column:1/-1;margin:0;color:#e4c987;font:600 10px/1.3 Cinzel,Georgia,serif;letter-spacing:.19em;text-transform:uppercase}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar strong{grid-column:1;grid-row:2;color:var(--hud-ink);font:700 19px/1.2 'Shippori Mincho B1',Georgia,serif}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar p:not(.eyebrow){grid-column:1;grid-row:3;max-width:65ch;margin:2px 0 0;color:var(--hud-ink);font:14px/1.45 'Segoe UI',sans-serif}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar .button-row{grid-column:2;grid-row:2/4;align-self:center;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px;min-width:0;margin:0}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar button{min-height:36px;font:600 11px/1.25 Cinzel,Georgia,serif;letter-spacing:.09em}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar .secondary{padding:6px 12px;border:1px solid #a78348;border-radius:4px;background:linear-gradient(180deg,#35221a,#1b100e);color:#f3d99a}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar .text-button{padding:6px 4px;border:0;background:none;color:#ead2a5;text-decoration:underline;text-underline-offset:3px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar :is(.primary,.secondary,.text-button):focus-visible{outline:2px solid #f3d99a;outline-offset:2px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.leader{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:4px 12px;min-width:0;min-height:86px;padding:11px 15px;border-radius:6px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.leader.enemy{background:linear-gradient(200deg,#2c1918,#1b100f 48%,#100909)}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-portrait{position:relative;display:block;grid-column:1;grid-row:1/3;width:46px;height:46px;overflow:hidden;border:1px solid var(--hud-gold);border-radius:50%;background:#180d0b;box-shadow:0 0 0 2px #100907,0 0 0 3px #8b6a34}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-portrait img:not(.leader-crest){width:100%;height:100%;object-fit:cover;object-position:50% 20%}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-portrait .leader-crest{position:absolute;right:0;bottom:0;width:16px;height:16px;border:1px solid #d8b36a;border-radius:50%;background:#140c0a;object-fit:contain}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.leader>div:first-of-type{grid-column:2;grid-row:1/3;display:grid;align-content:center;gap:3px;min-width:0}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-name{display:block;min-width:0;color:var(--hud-ink);font:700 19px/1.15 'Shippori Mincho B1',Georgia,serif;overflow-wrap:anywhere}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-caption{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-width:0;color:var(--hud-muted);font:600 10px/1.4 Cinzel,Georgia,serif;letter-spacing:.08em;font-variant-numeric:tabular-nums}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-caption .leader-house{color:#e4c987}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-caption .leader-sep{display:none}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-caption [data-pile="deck"]{margin-left:auto;white-space:nowrap;color:var(--hud-ink)}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-caption button{color:var(--hud-ink);font-variant-numeric:tabular-nums}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .enemy-hand-count{color:var(--hud-muted);font:600 10px/1.35 Cinzel,Georgia,serif;letter-spacing:.08em;font-variant-numeric:tabular-nums}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-ultimate{margin:1px 0 0;color:#e4c987;font:600 10px/1.3 Cinzel,Georgia,serif;letter-spacing:.07em}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-health{grid-column:3;grid-row:1/3;display:flex;align-items:center;justify-content:center;gap:5px;min-width:88px;margin:0;padding:7px 11px;border:1px solid #d8b36a;border-radius:999px;background:linear-gradient(180deg,#a33128,#6c1b16 65%,#42110f);box-shadow:inset 0 1px 0 #f0b6a655,0 0 0 2px #130907;color:#fff0df;font:700 19px/1 'Shippori Mincho B1',Georgia,serif;font-variant-numeric:tabular-nums}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-health svg{width:14px;color:#fff0df}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .resource{grid-column:4;grid-row:1/3;display:flex;align-items:center;gap:5px;margin:0;padding:6px 0 6px 12px;border-left:1px solid #8b6a34;color:#f3d99a;font:700 19px/1 'Shippori Mincho B1',Georgia,serif;font-variant-numeric:tabular-nums;white-space:nowrap}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .resource small{color:var(--hud-muted);font:600 11px/1.2 Cinzel,Georgia,serif;font-variant-numeric:tabular-nums}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.action-strip{position:relative;display:flex;align-items:center;gap:12px;margin:9px 0 5px;padding:9px 12px 9px 16px;border-radius:6px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .turn-copy{min-width:0;color:var(--hud-ink);font:700 18px/1.15 'Shippori Mincho B1',Georgia,serif}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .turn-copy small{display:block;margin-top:3px;color:var(--hud-muted);font:600 10px/1.3 Cinzel,Georgia,serif;letter-spacing:.08em;font-variant-numeric:tabular-nums}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .action-strip .primary{flex:0 0 auto;min-width:124px;min-height:42px;padding:8px 13px;border:1px solid #d8b36a;border-radius:4px;background:linear-gradient(180deg,#bd3c2c,#802017 60%,#5a130d);box-shadow:inset 0 1px 0 #f3d99a66,0 3px 9px #08050488;color:#fff0df;font:700 11px/1.2 Cinzel,Georgia,serif;letter-spacing:.11em;text-transform:uppercase;transition:transform 170ms ease-out,opacity 170ms ease-out}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .action-strip .primary:active:not(:disabled){transform:scale(.97)}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .action-strip .primary:disabled{opacity:.55}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .action-strip .primary:focus-visible{outline:2px solid #f3d99a;outline-offset:2px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .hand-label{gap:8px;color:#e4c987;font:600 10px/1.3 Cinzel,Georgia,serif;letter-spacing:.08em;font-variant-numeric:tabular-nums}
}
@media (max-width:600px){
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar{display:block;padding:10px 13px;margin-bottom:9px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar strong{margin-top:2px;font-size:17px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar p:not(.eyebrow){font-size:13px;line-height:1.35;margin:3px 0 6px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar .button-row{justify-content:flex-start;gap:4px 12px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.leader{grid-template-columns:38px minmax(0,1fr) auto;gap:3px 8px;min-height:78px;padding:8px 10px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-portrait{width:36px;height:36px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.leader>div:first-of-type{grid-row:1/3}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-name{font-size:17px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-caption{font-size:10px;letter-spacing:.04em}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-caption [data-pile="deck"]{margin-left:0}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-health{grid-column:3;grid-row:1;min-width:68px;padding:5px 7px;font-size:16px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-health svg{width:12px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .resource{grid-column:3;grid-row:2;justify-self:end;border:0;padding:0 4px;font-size:16px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.action-strip{padding:8px 10px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .turn-copy{font-size:16px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .action-strip .primary{min-width:104px;min-height:40px;padding:7px 8px;font-size:10px}
}
@media (max-width:360px){
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .arena>.leader{grid-template-columns:32px minmax(0,1fr) auto;gap:3px 6px;padding:7px 8px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-portrait{width:30px;height:30px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-name{font-size:16px}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .leader-health{min-width:60px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .tutorial-bar{animation:none}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .action-strip .primary{transition:none}
  body:not(.stage-on)[data-screen="game"] .game:not(.has-hud-skin) .action-strip .primary:active:not(:disabled){transform:none}
}

/* 13.10. Anführer-Nahansicht (leader-inspect.js): Tafel rechts neben der Kamera-Nahaufnahme, Handy als Blatt unten. */
.leader-inspect{position:fixed;right:clamp(12px,2vw,28px);top:50%;z-index:40;width:min(340px,calc(100vw - 24px));transform:translateY(-50%);
  display:grid;gap:12px;padding:16px 16px 14px;border:1px solid #8b6a34;border-radius:10px;color:#f2e7d3;
  background:linear-gradient(170deg,rgba(42,24,18,.96),rgba(20,12,10,.97) 60%);box-shadow:0 0 0 1px rgba(10,6,5,.9),inset 0 0 0 4px rgba(216,179,106,.08),0 24px 60px rgba(0,0,0,.55);
  animation:li-in .28s cubic-bezier(.22,1,.36,1)}
@keyframes li-in{from{opacity:0;transform:translate(14px,-50%)}to{opacity:1;transform:translateY(-50%)}}
.li-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.li-art{width:58px;height:72px;overflow:hidden;border:1px solid #d8b36a;border-radius:6px;background:#140c0a}
.li-art img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;background:radial-gradient(circle at 50% 35%,#4a3420,#120b08 72%)}
.li-eyebrow{margin:0;color:#e4c987;font:600 10px/1.3 Cinzel,Georgia,serif;letter-spacing:.18em;text-transform:uppercase}
.li-head h2{margin:3px 0 0;font:700 21px/1.12 'Shippori Mincho B1',Georgia,serif;color:#f6e9d2;overflow-wrap:anywhere}
.li-close{align-self:start;width:36px;height:36px;border:1px solid #6f5532;border-radius:50%;background:#1a110c;color:#f3d99a;font:20px/1 Georgia,serif;cursor:pointer;transition:transform .15s ease-out}
.li-close:active{transform:scale(.94)}
.li-hp{position:relative;display:flex;align-items:baseline;gap:6px;padding:10px 12px 14px;border:1px solid #c0402f;border-radius:8px;background:linear-gradient(180deg,#5a130d,#2a0d09);overflow:hidden}
.li-hp span{font:600 11px Cinzel,Georgia,serif;letter-spacing:.16em;color:#ffd0c4}
.li-hp b{font:700 28px/1 Cinzel,Georgia,serif;color:#fff3df;font-variant-numeric:tabular-nums}
.li-hp small{font:600 13px Cinzel,Georgia,serif;color:#e8b9ad;font-variant-numeric:tabular-nums}
.li-hp i{position:absolute;left:0;bottom:0;height:4px;width:calc(var(--p)*100%);background:linear-gradient(90deg,#b8362a,#f6dc94)}
.li-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.li-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:7px 10px;border:1px solid rgba(216,179,106,.22);border-radius:6px;background:rgba(255,255,255,.02)}
.li-row dt{font:600 10px Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#cdb691}
.li-row dd{margin:0;font:700 14px Cinzel,Georgia,serif;color:#f3d99a;font-variant-numeric:tabular-nums}
.li-account{display:grid;gap:6px;padding-top:10px;border-top:1px solid rgba(216,179,106,.2)}
.li-level{display:flex;align-items:baseline;gap:8px}
.li-level .li-eyebrow{margin-right:auto}
.li-level b{font:700 30px/1 Cinzel,Georgia,serif;color:#f6e4bd;font-variant-numeric:tabular-nums}
.li-level small{font:600 13px Cinzel,Georgia,serif;color:#a99880}
.li-bar{height:8px;border-radius:5px;background:#2a1d15;border:1px solid #6f5532;overflow:hidden}
.li-bar i{display:block;height:100%;width:calc(var(--p)*100%);background:linear-gradient(90deg,#8f2419,#d9a24c,#f6dc94)}
.li-xp{font:12px "Segoe UI",sans-serif;color:#cdb691;font-variant-numeric:tabular-nums}
.li-rank{display:flex;align-items:center;gap:10px}
.li-kanji{min-width:40px;height:40px;display:grid;place-items:center;border-radius:6px;border:1px solid #e3bd78;background:linear-gradient(180deg,#a52d20,#6f1a11);color:#fff3df;font:18px/1 "Yuji Syuku",serif}
.li-rank strong{display:block;font:700 15px 'Shippori Mincho B1',Georgia,serif;color:#f6e9d2}
.li-rank small{font:12px "Segoe UI",sans-serif;color:#a99880}
.li-foot{display:flex;gap:8px;justify-content:space-between}
.li-back,.li-link{min-height:40px;padding:0 14px;border-radius:5px;cursor:pointer;font:600 11px Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;transition:transform .15s ease-out}
.li-back{border:1px solid #d8b36a;background:linear-gradient(180deg,#a52d20,#6f1a11);color:#fff3df}
.li-link{border:1px solid #9c7a3c;background:#1a110c;color:#f3d99a}
.li-back:active,.li-link:active{transform:scale(.97)}
.leader-inspect :is(button):focus-visible{outline:2px solid #f3d99a;outline-offset:2px}
body[data-screen="game"] :is(.leader-portrait,.leader-name,.hud-portrait,.hud-name){cursor:zoom-in}
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  .leader-inspect{top:auto;bottom:0;right:0;left:0;width:auto;transform:none;border-radius:12px 12px 0 0;max-height:42vh;overflow:auto;animation-name:li-up}
  @keyframes li-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.leader-inspect{animation:none}.li-close,.li-back,.li-link{transition:none}}
/* Nahansicht: Tafel liegt über allem (sonst greift die Raster-Regel der Spielfläche: position relative); HUD tritt zurück. */
body .game>.leader-inspect{position:fixed!important;z-index:40!important;margin:0!important}
body.stage-on:has(.leader-inspect) .play-rail{opacity:0;pointer-events:none;transition:opacity .25s ease-out}
body.stage-on .game:has(>.leader-inspect) :is(.game>:not(.leader-inspect):not(.game-layout),.arena>:not(.battlefield):not(.arena-surface),.selection-panel,.free-cam-btn,.play-rail){opacity:0!important;pointer-events:none!important;transition:opacity .25s ease-out}

/* 13.10. Spiel-HUD schmal MIT 3D (Nutzerfenster ~515–760 px): nur Optik, kein Layout (Raster/Position kommen von oben).
   Lack-Tafeln mit Goldhaarlinie + innerer Kante, Namen Shippori, Beschriftung Cinzel, Zahlen tabellarisch. */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on[data-screen="game"] .game :is(.tutorial-bar,.arena>.leader,.action-strip){border:1px solid #8b6a34;border-radius:8px;
    background:linear-gradient(165deg,rgba(44,25,19,.97),rgba(20,12,10,.97) 62%);box-shadow:inset 0 0 0 1px rgba(10,6,5,.85),inset 0 0 0 4px rgba(216,179,106,.07),0 10px 24px rgba(0,0,0,.38)}
  body.stage-on[data-screen="game"] .game .arena>.leader.enemy{background:linear-gradient(195deg,rgba(52,22,19,.97),rgba(20,11,10,.97) 62%)}
  body.stage-on[data-screen="game"] .game .leader-name{font-family:'Shippori Mincho B1',Georgia,serif;font-weight:700;color:#f6e9d2;letter-spacing:0}
  body.stage-on[data-screen="game"] .game .leader-caption{font-family:Cinzel,Georgia,serif;font-weight:600;letter-spacing:.09em;color:#d5c3a8;font-variant-numeric:tabular-nums}
  body.stage-on[data-screen="game"] .game .leader-caption .leader-house,body.stage-on[data-screen="game"] .game .enemy-hand-count{color:#e4c987}
  body.stage-on[data-screen="game"] .game .enemy-hand-count{font-family:Cinzel,Georgia,serif;font-weight:600;letter-spacing:.08em;font-size:11px}
  body.stage-on[data-screen="game"] .game :is(.leader-health,.resource){font-variant-numeric:tabular-nums}
  body.stage-on[data-screen="game"] .game .leader-health{box-shadow:0 0 0 1px #2a0d09,0 0 0 2px #d8b36a,0 4px 14px rgba(143,36,25,.45)}
  body.stage-on[data-screen="game"] .game .tutorial-bar strong{font-family:'Shippori Mincho B1',Georgia,serif;color:#f6e9d2}
  body.stage-on[data-screen="game"] .game .tutorial-bar p:not(.eyebrow){color:#eadcc4;line-height:1.45;max-width:65ch}
  body.stage-on[data-screen="game"] .game .tutorial-bar .secondary{border:1px solid #a78348;background:linear-gradient(180deg,#35221a,#1b100e);color:#f3d99a;font-family:Cinzel,Georgia,serif;letter-spacing:.08em}
  body.stage-on[data-screen="game"] .game .tutorial-bar .text-button{color:#ead2a5;text-decoration:underline;text-underline-offset:3px}
  body.stage-on[data-screen="game"] .game .turn-copy{font-family:'Shippori Mincho B1',Georgia,serif;color:#f6e9d2}
  body.stage-on[data-screen="game"] .game .turn-copy small{font-family:Cinzel,Georgia,serif;letter-spacing:.07em;color:#d5c3a8;font-variant-numeric:tabular-nums}
  body.stage-on[data-screen="game"] .game .action-strip .primary{transition:transform .15s ease-out}
  body.stage-on[data-screen="game"] .game .action-strip .primary:active:not(:disabled){transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){body.stage-on[data-screen="game"] .game .action-strip .primary{transition:none}}
/* 13.10. Autobuild: Menü-Pillen (Ladder-Bilanz, Ehre/Tageswert) 9 px, Rand von site-dark.css unsichtbar → 12 px auf Goldfläche; Spiel unverändert. */
body:not([data-screen="game"]) .pill{font-size:12px;letter-spacing:.1em;padding:5px 10px;background:rgba(216,179,106,.12);border-radius:999px;color:#e6d3b0}
/* 13.10. Autobuild: Zitatzeile am Seitenende füllt am Handy fast die Breite → Zierlinie lief durch den Text (wirkte durchgestrichen) → Linie oben. */
@media (max-width:560px){body:not([data-screen="game"]) main.page::after,body[data-screen="home"] main.home::after{background-image:linear-gradient(90deg,transparent,rgba(216,179,106,.5),transparent);background-size:60% 1px;background-position:50% 0;padding-top:16px;letter-spacing:.35em;line-height:1.7}}
/* 13.10. Autobuild: Rätsel-Liste am Handy — Textspalte nur 104 px (Panel 32 px + Zeile 14 px Rand, Knopf 81 px) → Ränder enger. */
@media (max-width:560px){body:not([data-screen="game"]) .puzzles-page>.panel{padding:20px 14px}.puzzle-list li{gap:10px;padding:10px 10px}.puzzle-list li>b{width:30px;height:30px;font-size:14px}body:not([data-screen="game"]) .puzzle-list li>button{padding:12px 14px;min-height:44px}}
/* 13.10. Autobuild: Handy 375x667 + Tablet bis 1024 — kleinste Menüschrift (Fußzeile 9 px aus styles.css, Format-Untertitel 10,5 px, „Lv“-Abzeichen 10 px, Gegner-Clan 8 px, Gegner-Text 10 px, „Weekly“ 9,5 px) → ≥ 11 px, nur außerhalb des Spiels. */
@media all{body:not([data-screen="game"]) .footer{font-size:11px;flex-wrap:wrap;gap:6px 20px}body:not([data-screen="game"]) .format-card .fc-sub{font-size:11px;letter-spacing:.16em}body:not([data-screen="game"]) .leader-rank{font-size:11px;letter-spacing:.08em}body:not([data-screen="game"]) .opponent-face small{font-size:11px;letter-spacing:.1em}body:not([data-screen="game"]) .opponent-pick .opponent-face p{font-size:12px}body:not([data-screen="game"]) .panel :is(.opponent-level-label,.opponent-note){font-size:11px}body:not([data-screen="game"]) .quest-list li em{font-size:11px;letter-spacing:.14em}}
/* 13.10. Autobuild: Handy 375x667 + Tablet bis 1024 — Warriors-Kachel-Name 10 px (lange Namen nach 2 Zeilen gekappt, Leerraum darunter), Sterne 8 px, Clan-Zeile 9 px, Ruhmespfad-Belohnung 10,5 px, Skin-Tags 9,5 px, Skin-Status 10,5 px → ≥ 11 px, Name bis 4 Zeilen über volle Fußbreite (Wappen rückt in die Sternzeile, sonst brach „Bogenschütz-in“ mitten im Wort); nur außerhalb des Spiels. */
@media all{body:not([data-screen="game"]) .warrior-thumb-name{font-size:11px;line-height:1.2;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;order:-1;flex-basis:100%;overflow-wrap:break-word}body:not([data-screen="game"]) .warrior-thumb-rarity{font-size:11px;letter-spacing:0}body:not([data-screen="game"]) .warriors-clan-label{font-size:11px;letter-spacing:.14em;height:auto}body:not([data-screen="game"]) .lp-road-track small{font-size:11px}body:not([data-screen="game"]) .lp-tag{font-size:11px}body:not([data-screen="game"]) .lp-state{font-size:11px}}
/* 13.10. Autobuild: Regeln-Seite Spielfeld-Schema — SVG schrumpft mit der Seite, Beschriftung real 7,1 px (Tablet 768) bzw. 5,5 px (Handy 375). Tablet bis 1024 Zuschnitt wie am Handy (Seitennotizen aus), Handy größere SVG-Schrift (Maßstab ≈ 0,55). */
@media (max-width:1439px){.rules-board{padding:10px 0;overflow:hidden}.rules-board svg{width:150%;max-width:none;margin-left:-25%;max-height:none}.rules-board .rb-note{display:none}.rules-board .rb-lane{font-size:11px}.rules-board .rb-slot-note{font-size:11px}.rules-board .rb-row{font-size:12px}}
@media (max-width:700px){.rules-board .rb-lane{font-size:21px;letter-spacing:.08em;stroke-width:8px}.rules-board .rb-slot-note{font-size:21px;letter-spacing:0;transform:translateY(4px)}.rules-board .rb-row{font-size:21px;letter-spacing:0;transform:translateX(22px)}.rules-board .rb-leader-t{font-size:22px;letter-spacing:.1em}.rules-board .rb-unit-k{font-size:21px}}
@media (min-width:1440px){.rules-board .rb-lane{font-size:12px}.rules-board .rb-slot-note{font-size:12px}}
/* 13.10. Autobuild Handy quer: Ultimate-Box lag halb unter dem 言-Emote-Knopf (667x375 echte Partie: Knopf 22-64/205-247,
   Box 27-131/236-252). 600-759 px quer sitzt der Knopf unten links -> Box rechts daneben (Platz bis zur Hand frei). */
@media (min-width:600px) and (max-width:759px) and (max-height:500px) and (orientation:landscape){
  body.stage-on[data-screen="game"] .game .arena>.leader:not(.enemy) .leader-ultimate{margin-left:46px}
}

/* 13.10. Nutzer: nur die fertig gestalteten Vollkarten im Spiel (cardMarkup → .card.is-full). Bild füllt die Karte, kein alter Rahmen. */
.card.is-full{padding:0;background:#0d0a09;border-color:rgba(216,179,106,.55)}
.card.is-full .card-full{position:absolute;inset:0;display:block}
.card.is-full .card-full img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.card.is-full .card-cost-now{position:absolute;left:6%;top:4%;z-index:2;min-width:22%;padding:2px 4px;border-radius:5px;border:1px solid #f3d99a;
  background:linear-gradient(180deg,#a52d20,#6f1a11);color:#fff3df;font:700 clamp(13px,1.2vw,20px)/1 Cinzel,Georgia,serif;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.card.is-full .card-cost-now small{display:block;font-size:.5em;letter-spacing:.1em}
/* Startseite/Seitenköpfe: Vollkarte statt Bildausschnitt, die gedruckte Karte trägt Name und Werte selbst. */
.hero-card:has(.full-card-image) .hero-caption{display:none}
:is(.hero-card,.fan-card) .full-card-image{display:block;width:100%;height:100%;object-fit:cover}
/* 13.10. Autobuild (echte 3D-Solo-Partie 1280x720 + 1600x900): „Skip“ klebte 1 px am Knopfrand — styles.css
   `.game-toolbar button{padding:5px 0}` schlaegt `.stage-skip{padding:0 12px}` per Spezifitaet. */
.game-toolbar .stage-skip{padding-inline:12px}
/* 13.10. Autobuild (echte 3D-Solo-Partie offline, work/claude-reconnect-hud-probe.mjs): Verbindungshinweis lag im Fluss
   unter Buehne/Mulligan (z 45), Text halb durchsichtig unter dem Spectator-Chip, „Reconnect“ nicht klickbar. */
body.stage-on .game>.reconnect-bar,.game .reconnect-bar{position:fixed;top:64px;left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 32px));margin:0;z-index:60;background:#2a1618;box-shadow:0 8px 24px #0009}
/* 13.10. „Place card“: gewählte Handkarte mit einem Klick aufs beste freie Feld. */
.selection-panel .place-card{width:100%;margin-top:8px}
.selection-panel .place-hint{display:block;margin-top:6px;font:12px/1.4 "Segoe UI",sans-serif;color:#cdb691}
/* 13.10. 16:45 Autobuild Handy: Fallen-Schild (echte 3D-Partie 390x844 stormcrest Zug 22): eigene Falle „Counter Stance“ als „罠 COUN…“,
   Schild 90 px, Textraum 55 px (auch „Pitfall“ 60, „SET TRAP“ 68 zu breit) -> Abstaende enger, Name zweizeilig statt Ellipse (Schild 24 -> 30 px). */
@media (max-width:759px){
  body.stage-on .battlefield .trap-slot{gap:3px;padding:2px 4px;letter-spacing:.03em}
  body.stage-on .battlefield .trap-slot b{font-size:11px}
  body.stage-on .battlefield .trap-slot span{white-space:normal;line-height:1.1;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
}
/* 13.10. Story: Vollkarte ganz zeigen (kein Ausschnitt der Beine). */
.campaign-art .full-card-image{display:block;width:100%;height:100%;object-fit:contain;background:#0d0a09}
/* 13.10. Skins anklickbar → 3D-Betrachter. */
button.lp-art{display:block;width:100%;padding:0;border:0;cursor:zoom-in;color:inherit}
.lp-art .lp-3d{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:4px;border:1px solid #d8b36a;background:rgba(20,12,9,.85);color:#f3d99a;font:700 10px Cinzel,Georgia,serif;letter-spacing:.1em;opacity:.8;transition:opacity .15s ease-out}
button.lp-art:hover .lp-3d,button.lp-art:focus-visible .lp-3d{opacity:1}
button.lp-art:focus-visible,.lp-portrait-btn:focus-visible{outline:2px solid #f3d99a;outline-offset:2px}
.lp-portrait-btn{display:block;padding:0;border:0;background:none;cursor:zoom-in}
/* 13.10. Nutzer: gesperrte Karte beim Drüberfahren schon farbig zeigen (Vorschau, bleibt gesperrt). */
.locked-card .card,.locked-card .card img,.lp-skin.is-locked .lp-art img{transition:filter .2s ease-out,opacity .2s ease-out}
.locked-card:hover .card,.locked-card:focus-within .card,.locked-card:hover .card img,.locked-card:focus-within .card img{filter:none!important;opacity:1!important}
.lp-skin.is-locked:hover .lp-art img,.lp-skin.is-locked:focus-within .lp-art img{filter:none}
@media (prefers-reduced-motion:reduce){.locked-card .card,.locked-card .card img,.lp-skin.is-locked .lp-art img{transition:none}}
.shop-art .full-card-image{display:block;width:100%;height:100%;object-fit:cover}
/* Duel chat */
.duel-chat-button{position:relative;white-space:nowrap}
.duel-chat-button .chat-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:5px;padding:0 4px;border-radius:20px;background:#b92b35;color:#fff;font:700 11px/1 sans-serif;box-shadow:0 0 0 2px #28151b}
.duel-chat-button .chat-badge[hidden]{display:none}
.duel-chat-panel{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(360px,100vw);display:flex;flex-direction:column;background:linear-gradient(140deg,#231b25,#100e17 55%);border-left:1px solid #a88c5b;box-shadow:-16px 0 44px #000b;color:#f5ead8;transform:translateX(105%);visibility:hidden;transition:transform .25s ease,visibility .25s}
.duel-chat-panel[hidden]{display:none}
.duel-chat-panel.is-open{transform:none;visibility:visible}
.duel-chat-panel header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #8c724a}
.duel-chat-panel h2{margin:0;font-family:Cinzel,serif;font-size:19px;color:#e8ce92}
.duel-chat-panel header button{border:0;background:transparent;color:#f5ead8;font-size:27px;cursor:pointer;min-width:44px;min-height:44px}
.chat-messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;margin:0;padding:16px;list-style:none}
.chat-messages li{max-width:88%;align-self:flex-start;padding:8px 11px;border:1px solid #5a4b47;border-radius:12px 12px 12px 3px;background:#30262c;overflow-wrap:anywhere}
.chat-messages li.mine{align-self:flex-end;border-color:#9e7d48;border-radius:12px 12px 3px 12px;background:#40342a}
.chat-meta{font:11px/1.3 sans-serif;color:#c5af8d}
.chat-messages p{margin:4px 0 0;white-space:pre-wrap;line-height:1.4}
.chat-form{padding:12px 16px 18px;border-top:1px solid #66543c}.chat-form label{display:block;margin-bottom:6px;font:12px sans-serif;color:#dec99f}
.chat-form>div{display:flex;gap:6px}.chat-form input{min-width:0;flex:1;padding:10px;background:#18151e;border:1px solid #8c724a;border-radius:5px;color:#fff;font:14px sans-serif}.chat-form button{padding:8px 12px;border:1px solid #c9a66c;border-radius:5px;background:#6d4d28;color:#fff;cursor:pointer}.chat-error{display:block;min-height:1.2em;color:#f3a9a9}
.duel-chat-toast{position:fixed;z-index:91;top:18px;left:50%;max-width:min(450px,92vw);padding:12px 18px;transform:translateX(-50%);background:#281b21;border:1px solid #c79d66;border-radius:8px;box-shadow:0 8px 30px #0009;color:#fff;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.duel-chat-toast[hidden]{display:none}
.chat-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes chatPulse{50%{filter:brightness(1.8);transform:scale(1.08)}}
.duel-chat-button.chat-pulse .chat-badge{animation:chatPulse .7s ease 2}
@media(max-width:600px){.duel-chat-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:50vh;border-left:0;border-top:1px solid #a88c5b;border-radius:14px 14px 0 0;transform:translateY(105%)}.duel-chat-panel.is-open{transform:none}}
@media(prefers-reduced-motion:reduce){.duel-chat-panel{transition:none}.duel-chat-button.chat-pulse .chat-badge{animation:none}}

/* 13.10. Nutzer: „Hintergrund verpixelt, jede Unterseite einen anderen“. Vorher kleine Ausschnitte (cards-shrine 500x640,
   arena-samurai 1100x436) auf bis 1500x840 gestreckt. Jetzt je Seite ein eigenes Wallpaper in 1672x941. */
body:not([data-screen="game"]){--wall:url('/assets/ui/wallpaper/sun-shiba.webp')}
body[data-screen="play"]{--wall:url('/assets/ui/wallpaper/akatsuno-storm.webp')}
body[data-screen="story"]{--wall:url('/assets/ui/wallpaper/kasumi-stairs.webp')}
body[data-screen="rules"]{--wall:url('/assets/ui/wallpaper/sage-forest.webp')}
body[data-screen="decks"]{--wall:url('/assets/ui/wallpaper/hayate-gears.webp')}
body[data-screen="ladder"]{--wall:url('/assets/ui/wallpaper/masaru-fortress.webp')}
body[data-screen="lobby"]{--wall:url('/assets/ui/wallpaper/gama-stairs.webp')}
body[data-screen="collection"]{--wall:url('/assets/ui/wallpaper/moon-blade.webp')}
body[data-screen="store"]{--wall:url('/assets/ui/wallpaper/bonk-sunrise.webp')}
body[data-screen="warriors"]{--wall:url('/assets/ui/wallpaper/bear-autumn.webp')}
body[data-screen="leaders"]{--wall:url('/assets/ui/wallpaper/dragon-ruins.webp')}
body[data-screen="stats"]{--wall:url('/assets/ui/wallpaper/frost-wolf.webp')}
body[data-screen="puzzles"]{--wall:url('/assets/ui/wallpaper/jade-bamboo.webp')}
body[data-screen="draft"]{--wall:url('/assets/ui/wallpaper/tide-mage.webp')}
body[data-screen="tutorial"]{--wall:url('/assets/ui/wallpaper/aoi-stairs.webp')}
body[data-screen="lesson"]{--wall:url('/assets/ui/wallpaper/khai-rain.webp')}
/* 13.10. Website-Prüfung 390 px: Kleinschrift auf mindestens 11 px. */
.intro-meta span{font-size:max(11px,1em)!important}
.lp-art .lp-3d{font-size:11px}
/* 13.10. Autobuild Tablet hoch 768x1024 (echte 3D-Partie): Emote-Knopf 757-799 lag auf dem Zahnrad (788-826) + „Settings 設定“; 760-1099 hoch hatte keine Emote-Regel. */
@media (min-width:760px) and (max-width:1099px) and (min-height:821px) and (max-aspect-ratio:8/5){
  body.stage-on[data-screen="game"]:has(.game) .emote-dock{top:auto;bottom:calc(max(128px,22vh) + 24px);left:22px;right:auto}
}

/* 13.10. Shop-Reiter: Honor (€) · Karten (Honor) · Anführer-Skins. */
.store-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.store-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(216,179,106,.35);background:#1a110c;color:#e0cfb4;
  font:600 12px Cinzel,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease-out,transform .15s ease-out}
.store-tab span{font:16px "Yuji Syuku",serif;color:#d8b36a;letter-spacing:0}
.store-tab:hover{border-color:#f3d99a}
.store-tab:active{transform:scale(.97)}
.store-tab.is-on{border-color:#f0cf86;background:linear-gradient(180deg,#a52d20,#6f1a11);color:#fff3df;box-shadow:0 0 16px rgba(240,190,100,.18)}
.store-tab.is-on span{color:#fff3df}
.store-tab:focus-visible{outline:2px solid #f3d99a;outline-offset:3px}
.store-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
.store-card{display:grid;gap:8px;align-content:start}
.store-card .full-card-image{display:block;width:100%;height:auto;aspect-ratio:2/3;border-radius:8px;border:1px solid rgba(216,179,106,.4)}
.store-card strong{font:600 13px 'Shippori Mincho B1',Georgia,serif;color:#f6e9d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-card button{min-height:40px}
@media (max-width:560px){.store-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.store-tab{transition:none}.store-tab:active{transform:none}}

/* 16.10. Shop S4: tägliche Auslage, Saisonleiste und ehrliche Bundlepreise. */
.store-page{--shop-paper:#e9d8b7;--shop-ink:#24140e;--shop-vermilion:#a52d20}
.store-page .shop-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.store-page .shop-section-head h2{margin:0;font:700 34px/1 var(--heading);color:#f6e9d2}
.shop-countdown{margin:0;color:#d9bd82;font:700 12px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase}
.shop-pay-rails{display:flex;flex-wrap:wrap;gap:6px}.shop-pay-rails .primary{flex:1 1 auto;white-space:nowrap}.shop-slot-copy .shop-pay-rails .primary{min-width:0;padding:8px 6px;white-space:normal}
.store-legal{display:grid;gap:10px;margin-top:6px;color:#cbbda8;font-size:13px}.store-consent{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid rgba(216,179,106,.32);border-radius:6px;background:rgba(20,12,9,.6);cursor:pointer}.store-consent input{width:18px;height:18px;margin-top:1px;accent-color:#d8b36a;flex:none}.store-legal a{color:#f3d99a}.store-legal-text summary{cursor:pointer;color:#d8bd86}.store-legal-text h4{margin:10px 0 2px;color:#f6e9d2;font-size:13px}.store-legal-text p{margin:0}.store-history{margin-top:24px}.store-history .shop-section-head{flex-wrap:wrap;gap:10px}
.shop-pass{position:relative;margin-top:24px;padding:26px 30px;overflow:hidden;border:1px solid rgba(216,179,106,.42);border-radius:7px;background:
  linear-gradient(90deg,rgba(234,216,181,.96),rgba(205,178,126,.91) 58%,rgba(163,63,42,.88));color:var(--shop-ink);box-shadow:0 18px 42px rgba(0,0,0,.3)}
.shop-pass::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(2deg,transparent 0 7px,rgba(67,36,22,.18) 8px)}
.shop-pass-head,.shop-pass-tracks{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:22px}
.shop-pass h3{margin:2px 0 4px;font:800 30px/1 var(--heading);color:#32180f}
.shop-pass p{margin:0}.shop-pass .eyebrow{color:#7f281c}
.shop-pass-buy{display:grid;grid-template-columns:auto auto;align-items:center;gap:6px 16px;text-align:right}
.shop-pass-buy>span{font:700 12px var(--display);letter-spacing:.12em}.shop-pass-buy>strong{font:800 27px var(--heading)}
.shop-pass-buy .primary{grid-column:1/-1;min-width:180px}
.shop-pass-points{position:relative;z-index:1;display:grid;grid-template-columns:repeat(10,1fr);gap:0;margin:24px 0 16px;padding:0;list-style:none}
.shop-pass-points li{position:relative;display:grid;justify-items:center;gap:7px;font:700 10px var(--display)}
.shop-pass-points li:not(:last-child)::after{content:"";position:absolute;top:7px;left:calc(50% + 8px);right:calc(-50% + 8px);height:1px;background:rgba(55,30,20,.42)}
.shop-pass-points i{z-index:1;width:15px;height:15px;border:2px solid #5b3321;border-radius:50%;background:var(--shop-paper);box-shadow:0 0 0 3px rgba(233,216,183,.55)}
.shop-pass-tracks>div{display:flex;align-items:baseline;gap:10px}.shop-pass-tracks b{font:800 14px var(--heading)}.shop-pass-tracks span{font-size:12px}
.shop-bundle{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:24px;border:1px solid rgba(216,179,106,.32);border-radius:7px;background:
  radial-gradient(circle at 100% 0,rgba(154,42,29,.22),transparent 38%),linear-gradient(150deg,rgba(40,24,17,.98),rgba(14,9,7,.98));color:#eadcc6}
.shop-starter-note{display:inline-block;padding:5px 8px;border:1px solid rgba(240,207,134,.36);border-radius:3px;color:#f3d99a!important;font:700 11px var(--display);letter-spacing:.04em}
@media (hover:hover) and (pointer:fine){button.shop-preview img{transition:transform .2s ease-out,filter .2s ease-out}button.shop-preview:hover img{transform:scale(1.025);filter:saturate(1) contrast(1.04)}}
@media (max-width:700px){
  .store-page .page-head h1{font-size:42px!important}.store-page .shop-section-head{align-items:start}.shop-rotation{padding:22px 16px!important}
  .shop-rotation-layout,.shop-today-grid,.shop-bundles,.shop-bundle{grid-template-columns:1fr}.shop-slot,.shop-slot.is-featured{grid-template-columns:minmax(108px,.8fr) minmax(0,1.2fr);grid-template-rows:none;min-height:180px}
  .shop-pass{padding:22px 16px}.shop-pass-head{align-items:start;flex-direction:column}.shop-pass-buy{width:100%;grid-template-columns:1fr auto;text-align:left}.shop-pass-buy .primary{min-width:0}
  .shop-pass-points span{font-size:9px}.shop-pass-tracks{align-items:start;flex-direction:column;gap:8px}.shop-bundle-price{justify-items:start;text-align:left}.store-disclosure{flex-direction:column}
  .shop-all .shop-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){button.shop-preview img{transition:none!important}}
/* SHOP S4-Rest: real previews + readable pass band */
.shop-cardback{position:relative;display:block;width:96px;aspect-ratio:256/358;border:5px solid #d8b36a;border-radius:9px;background:#1a0f0b;box-shadow:0 10px 26px rgba(0,0,0,.6),inset 0 0 0 3px #1a0f0b,inset 0 0 0 4px rgba(216,179,106,.5)}
.shop-cardback b{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#a3271c;box-shadow:0 0 0 7px #1a0f0b,0 0 0 10px #d8b36a}
.shop-cardback.back-sakura{background:radial-gradient(circle at 22% 18%,#f4b6c4 0 5%,transparent 6%),radial-gradient(circle at 78% 82%,#f4b6c4 0 5%,transparent 6%),radial-gradient(circle at 80% 20%,#e98aa2 0 3%,transparent 4%),radial-gradient(circle at 20% 80%,#e98aa2 0 3%,transparent 4%),#3a1420}
.shop-cardback.back-sakura b{background:radial-gradient(circle,#ffd7e0 0 18%,#e46b8a 19% 100%);box-shadow:0 0 0 7px #3a1420,0 0 0 10px #d8b36a}
.shop-cardback.back-ink{border-color:#e8e1d2;background:repeating-linear-gradient(170deg,#0d0d0d 0 9px,#1c1c1c 10px 13px),#111}
.shop-cardback.back-ink b{background:radial-gradient(circle at 40% 40%,#f4efe4 0 30%,#111 31% 38%,#f4efe4 39% 100%);box-shadow:0 0 0 7px #111,0 0 0 10px #e8e1d2}
.store-page .shop-pass h3,.store-page .shop-pass p,.store-page .shop-pass-buy>span,.store-page .shop-pass-buy>strong,.store-page .shop-pass-points span,.store-page .shop-pass-tracks b,.store-page .shop-pass-tracks span{color:#2a140c}
.store-page .shop-pass .eyebrow{color:#7f281c}

/* 17.10. Website-Shop: Kategorien → Item-Detail → Kasse (Claude). Rahmenlos wie site-dark.css, Flächen statt Linien. */
.store-page{--st-gap:clamp(16px,2vw,28px);--st-e:cubic-bezier(.23,1,.32,1)}
.store-hero{position:relative;display:grid;align-items:end;min-height:clamp(280px,32vw,430px);margin:0 0 var(--st-gap);overflow:hidden;border-radius:18px;background:var(--d-panel,#1d130f);isolation:isolate}
.store-hero-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.store-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--d-bg,#140c0a) 0,color-mix(in oklch,var(--d-bg,#140c0a) 82%,transparent) 30%,transparent 62%),linear-gradient(0deg,color-mix(in oklch,var(--d-bg,#140c0a) 70%,transparent),transparent 45%)}
.store-hero-copy{max-width:36ch;padding:clamp(22px,4vw,52px)}
.store-hero-copy h1{margin:10px 0 12px;font:600 clamp(40px,5vw,72px)/.95 var(--heading);letter-spacing:-.01em;color:var(--d-ink,#f2e7d3)}
.store-hero-copy>p:not(.eyebrow){margin:0;color:var(--d-ink-2,#bfae98);font-size:15px;line-height:1.65}
.shop-browse{display:grid;gap:14px;margin:0 0 var(--st-gap)}
.shop-cats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.shop-cat{display:grid;grid-template-rows:auto auto auto;justify-items:start;gap:4px;min-width:0;padding:8px 8px 10px;border:0;border-radius:12px;background:var(--d-panel,#1d130f);color:var(--d-ink,#f2e7d3);text-align:left;cursor:pointer;transition:background-color .18s ease,transform .16s var(--st-e)}
.shop-cat img,.shop-cat-kanji{width:100%;aspect-ratio:4/3;border-radius:8px;object-fit:cover;margin-bottom:4px}
.shop-cat-kanji{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,oklch(.36 .14 24),var(--d-panel-2,#2a1a13));font:700 34px/1 var(--brush);color:var(--d-amber,#f3d99a)}
.shop-cat span:not(.shop-cat-kanji){font:600 13px/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.shop-cat small{font:600 11px/1 var(--display);color:var(--d-ink-3,#a99983)}
.shop-cat.is-on{background:linear-gradient(180deg,oklch(.42 .16 25),oklch(.3 .12 24));box-shadow:0 10px 30px oklch(.4 .16 25 / .35)}
.shop-cat.is-on small{color:var(--d-amber,#f3d99a)}
.shop-cat:active{transform:scale(.97)}
.shop-cat:focus-visible,.store-item-hit:focus-visible,.item-detail button:focus-visible{outline:2px solid var(--d-amber,#f3d99a);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.shop-cat:not(.is-on):hover{background:var(--d-panel-2,#2a1a13)}}
.shop-search{max-width:420px}
.shop-today,.shop-results{margin:0 0 calc(var(--st-gap)*1.6)}
.shop-today-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
.shop-today-row>.store-item:first-child{grid-column:span 2;grid-row:span 2}
.shop-today-row>.store-item:first-child .item-visual{aspect-ratio:auto;height:100%;min-height:340px}
.shop-today-row>.store-item:first-child .store-item-hit{grid-template-rows:1fr auto;height:100%}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.store-item{min-width:0}
.store-item-hit{display:grid;grid-template-rows:auto auto;width:100%;height:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--d-panel,#1d130f);color:inherit;text-align:left;cursor:pointer;transition:transform .2s var(--st-e),box-shadow .2s var(--st-e)}
.store-item-hit:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.store-item-hit:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45)}.store-item-hit:hover .item-visual img{transform:scale(1.03)}}
.item-visual{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,oklch(.3 .1 30),var(--d-panel-2,#2a1a13) 70%)}
.item-visual img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .4s var(--st-e)}
.item-visual.is-arena img{object-position:50% 50%}
.item-visual.is-back{background:radial-gradient(ellipse at 50% 45%,oklch(.32 .12 25),var(--d-panel-2,#2a1a13) 72%)}
.item-visual.is-back .shop-cardback{width:44%}
.item-visual.is-big.is-back .shop-cardback{width:min(46%,240px);border-width:8px;border-radius:14px}
.store-item.is-owned .item-visual::after{content:"✓ Owned";position:absolute;left:10px;top:10px;padding:5px 9px;border-radius:999px;background:oklch(.2 .02 150 / .85);color:oklch(.9 .1 150);font:600 11px/1 var(--display)}
.store-item-copy{display:grid;gap:4px;padding:12px 14px 14px}
.store-item-copy small{font:600 10.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--d-ink-3,#a99983)}
.store-item-copy strong{font:600 20px/1.1 var(--heading);color:var(--d-ink,#f2e7d3)}
.store-item-price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.store-item-price b{font:700 20px/1 var(--display);color:var(--d-amber,#f3d99a);letter-spacing:-.01em}
.store-item-price b.is-owned{font-size:14px;color:oklch(.85 .1 150)}
.store-item-price s{color:var(--d-ink-3,#a99983);font-size:13px}
.shop-empty{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:center;gap:var(--st-gap);padding:18px;border-radius:16px;background:var(--d-panel,#1d130f)}
.shop-empty:not(:has(img)){grid-template-columns:1fr}
.shop-empty img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px}
.shop-empty h3{margin:6px 0 8px;font:600 32px/1.05 var(--heading)}
.shop-empty p:not(.eyebrow){margin:0 0 16px;max-width:52ch;color:var(--d-ink-2,#bfae98);line-height:1.65}
.item-detail{margin:0 0 calc(var(--st-gap)*1.6)}
.item-back{margin:0 0 14px;font:600 13px var(--display)}
.item-detail-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3.5vw,56px);align-items:start}
.item-stage{position:sticky;top:20px;display:grid;gap:12px;margin:0}
.item-stage .item-visual{border-radius:18px;aspect-ratio:4/5}
.item-3d{justify-self:start}
.item-info{display:grid;gap:14px;align-content:start}
.item-info h2{margin:0;font:600 clamp(36px,4vw,58px)/1 var(--heading)}
.item-desc{margin:0;color:var(--d-ink-2,#bfae98);font-size:15px;line-height:1.65}
.item-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:18px 0 4px}
.item-price strong{font:700 clamp(40px,4.4vw,56px)/1 var(--display);letter-spacing:-.02em;color:var(--d-amber,#f3d99a)}
.item-price s{color:var(--d-ink-3,#a99983);font-size:18px}
.item-save{padding:5px 10px;border-radius:999px;background:oklch(.36 .14 24);color:#fff1de;font:600 12px var(--display)}
.item-price small{flex-basis:100%;color:var(--d-ink-3,#a99983);font-size:12px}
.item-buy{justify-self:start;min-width:min(100%,280px);min-height:54px;font-size:15px!important}
.item-owned{margin:0;padding:12px 14px;border-radius:12px;background:oklch(.22 .03 150);color:oklch(.9 .08 150)}
.item-facts{display:grid;gap:6px;margin:4px 0 0;padding:0;list-style:none;color:var(--d-ink-2,#bfae98);font-size:13px}
.item-facts li::before{content:"·";margin-right:8px;color:var(--d-orange,#d8b36a)}
.item-contains ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:8px 0 0;padding:0;list-style:none}
.item-contains li{display:grid;gap:4px;font-size:13px}
.item-contains li .item-visual{border-radius:10px}
.item-contains li small{color:var(--d-ink-3,#a99983)}
.item-track{margin:6px 0 0!important}
.item-track span{color:var(--d-ink-2,#bfae98)}
.item-track i{background:var(--d-panel-2,#2a1a13)!important;box-shadow:none!important}
.item-checkout{display:grid;gap:16px;max-width:760px;margin:calc(var(--st-gap)*1.4) 0 0 auto;padding:clamp(18px,3vw,32px);border-radius:18px;background:var(--d-panel,#1d130f);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.item-checkout:focus{outline:none}
.item-checkout h3{margin:0;font:600 34px/1 var(--heading)}
.checkout-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none;counter-reset:st}
.checkout-steps li{counter-increment:st;flex:1;padding:8px 10px;border-radius:999px;background:var(--d-panel-2,#2a1a13);color:var(--d-ink-3,#a99983);font:600 12px var(--display);text-align:center}
.checkout-steps li::before{content:counter(st) " · "}
.checkout-steps .is-done{color:var(--d-ink-2,#bfae98)}
.checkout-steps .is-on{background:oklch(.42 .16 25);color:#fff1de}
.checkout-sum{display:grid;gap:0;margin:0}
.checkout-sum>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;box-shadow:inset 0 -1px 0 var(--d-hair,rgba(255,255,255,.08))}
.checkout-sum dt{color:var(--d-ink-2,#bfae98)}.checkout-sum dd{margin:0;font-weight:600}
.checkout-sum .is-total dt{color:var(--d-ink,#f2e7d3);font-weight:600}.checkout-sum .is-total dd{font:700 24px/1 var(--display);color:var(--d-amber,#f3d99a)}
.checkout-platform{margin:0;padding:12px 14px;border-radius:12px;background:var(--d-panel-2,#2a1a13);color:var(--d-ink-2,#bfae98);font-size:13px;line-height:1.55}
.checkout-platform b{color:var(--d-ink,#f2e7d3)}
.item-checkout .shop-pay-rails{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.item-checkout .shop-pay-rails .primary{min-height:52px;white-space:nowrap}
.checkout-fine{margin:0;color:var(--d-ink-3,#a99983);font-size:12px}
@media (max-width:1100px){.shop-cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){
  .store-hero{min-height:0;align-items:stretch}.store-hero-art{position:relative;height:200px;inset:auto}.store-hero::before{background:linear-gradient(0deg,var(--d-bg,#140c0a) 0,transparent 60%);height:200px}
  .store-hero-copy{padding:4px 18px 22px}
  .shop-cats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .shop-cat{flex:0 0 112px;scroll-snap-align:start}
  .shop-search{max-width:none}
  .shop-today-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .shop-today-row>.store-item{flex:0 0 62%;scroll-snap-align:start}
  .shop-today-row>.store-item:first-child .item-visual{min-height:0;aspect-ratio:4/5}
  .store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .store-item-copy strong{font-size:17px}.store-item-price b{font-size:17px}
  .item-detail-grid{grid-template-columns:1fr}.item-stage{position:static}
  .item-buy{width:100%}
  .shop-empty{grid-template-columns:1fr}
  .checkout-steps li{font-size:11px;padding:7px 6px}
}
@media (prefers-reduced-motion:reduce){.store-item-hit,.item-visual img,.shop-cat{transition:none}.store-item-hit:active,.shop-cat:active{transform:none}}
.item-checkout{margin:4px 0 0;max-width:none}
.item-checkout .shop-pay-rails{grid-template-columns:1fr}
.item-checkout .shop-pay-rails [data-buy$="|nowpayments"],.item-checkout .shop-pay-rails [data-buy$="|sandbox"]{background:var(--d-panel-2,#2a1a13)!important;color:var(--d-ink,#f2e7d3)!important;box-shadow:none!important}
.item-checkout .shop-pay-rails [data-buy$="|sandbox"]{background:transparent!important;color:var(--d-ink-2,#bfae98)!important;min-height:40px}
.store-consent input{width:20px;height:20px;accent-color:oklch(.57 .2 25);flex:0 0 auto}
.store-page .shop-pass{margin:0 0 calc(var(--st-gap)*1.6)}
@media (max-width:760px){.store-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 16px;padding:0 16px}.store-tab{flex:0 0 auto;min-height:40px;padding:0 14px}}
/* Durchgang 2 (17.10.) */
.store-hero-copy{max-width:560px}
.store-hero-copy h1{font-size:clamp(40px,4.2vw,62px)}
.item-checkout,.store-tabs,.item-detail{scroll-margin-top:96px}
.item-visual.is-back{background:linear-gradient(0deg,rgb(14 8 6 / .72),rgb(14 8 6 / .72)),url(/assets/web/site/cat-card-backs.webp) center/cover}
.item-visual.is-back .shop-cardback{box-shadow:0 18px 40px rgb(0 0 0 / .7),0 0 0 1px rgb(255 220 160 / .25)}
.shop-cardback.back-ember-animated{background:radial-gradient(circle at 50% 120%,#ff8a3d,#b8321e 38%,#3a0f09 75%);background-size:100% 180%;animation:ember-back 4s ease-in-out infinite alternate}
.shop-cardback.back-ember-animated b{background:radial-gradient(circle,#ffd27a 0 22%,#e2552b 23% 100%)}
@keyframes ember-back{to{background-position:0 100%}}
@media (prefers-reduced-motion:reduce){.shop-cardback.back-ember-animated{animation:none}}
@media (max-width:760px){.store-page .shop-section-head{flex-wrap:wrap;align-items:end}.shop-countdown{white-space:nowrap}}
.store-disclosure{display:flex;gap:12px;margin-top:18px;padding:12px 2px;color:#a99983;font-size:12px}.store-disclosure strong{color:#d8bd86;white-space:nowrap}
@media (max-width:700px){.store-disclosure{flex-direction:column}}
.shop-pass button:focus-visible{outline:2px solid #f3d99a;outline-offset:3px}
@media (max-width:760px){.item-stage .item-visual{aspect-ratio:4/3}.item-visual.is-big.is-back .shop-cardback{width:32%}.item-info h2{font-size:34px}}
/* 18.10.: zu volle Hand ohne Pflicht = kleiner Hinweis rechts an der Hand, nicht quer über der Bühne */
.discard-bar.is-hint{display:inline-flex;gap:8px;padding:5px 8px 5px 12px;border-radius:999px;font-size:12px;background:rgba(40,16,12,.82);box-shadow:none}
.discard-bar.is-hint p{flex:0 1 auto}
.discard-bar.is-hint button{min-height:28px;padding:2px 8px;font-size:12px}
body.stage-on .game.has-hud-skin .arena>.discard-bar.is-hint,body.stage-on .game .arena>.discard-bar.is-hint{left:auto;right:16px;width:auto;transform:none;background:rgba(30,12,9,.82)}
@media (min-width:1024px) and (min-height:501px){body.stage-on .game.has-hud-skin .arena>.discard-bar.is-hint:not(.is-active){bottom:calc(var(--H) * (1 - var(--hand-y)) + 84px)}}
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on .game .arena>.discard-bar.is-hint,body.stage-on .game.has-hud-skin .arena>.discard-bar.is-hint{left:auto;right:8px;padding:3px 6px 3px 10px;font-size:11px}
}

/* S15 20.10.: In der Desktop-Heimatansicht zeichnet die 3D-Buehne ATK/HP selbst.
   DOM-Werte entfallen; Zustand und Stichwort stehen links neben der Karte (darüber lagen sie auf den Beinen der Figur, showcase-solo-2145). */
@media (min-width:760px) and (min-height:501px){
  body.stage-on:not(.stage-focus)[data-screen="game"] .battlefield.slots-projected .unit :is(.status-tag.is-hp,.unit-stats){display:none}
  body.stage-on:not(.stage-focus)[data-screen="game"] .battlefield.slots-projected .unit-top{top:0;bottom:auto;left:auto;right:calc(100% + 6px)}
  body.stage-on:not(.stage-focus)[data-screen="game"] .battlefield.slots-projected .unit-words{top:26px;bottom:auto;left:auto;right:calc(100% + 6px);max-width:none;white-space:nowrap}
}

/* S27: Desktop-Uebersicht — Gegnerfallen kompakt an die rechte Unterkante der Gegner-HUD-Leiste.
   placeTrapRows setzt hier translate 0; Mobil, eigene Leiste, Kamerafahrt und 2D-Rueckfall bleiben unveraendert. */
@media (min-width:1000px) and (min-height:600px){
  body.stage-on:not(.stage-focus)[data-screen="game"] .game.has-hud-skin .battlefield .trap-row.enemy{top:calc(min(56vw,88vh)*.258 + 4px);left:62%;width:min(330px,36vw);gap:4px}
  body.stage-on:not(.stage-focus)[data-screen="game"] .game.has-hud-skin .battlefield .trap-row.enemy .trap-slot{min-height:22px;padding:1px 5px;font-size:9px}
}