/* Kloppe im Auenland 3D – episches Fantasy-Interface: Cinzel (Inschriften), EB Garamond (Text), dunkles Leder, gealtertes Gold, Glut.
   Gilt nur für die 3D-Seite (body.epic); das 2D-Spiel nutzt weiter sein eigenes Aussehen. */
/* Schriften vom eigenen Server (seit 18.10.2026, Datensicherheits-Bewertung der QA-Sitzung: keine Anfrage an Google) – dieselben Regeln, die Google Fonts
   lieferte (variable WOFF2, nur latin/latin-ext), mit lokalen Pfaden; Quelle und Lizenz (SIL OFL 1.1) in fonts/_QUELLE.txt */
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cinzel-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/cinzel-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-decorative-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cinzel-decorative-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/cinzel-decorative-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/cinzel-decorative-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/eb-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --night:#0c0906; --leather:#1d140c; --leather2:#2a1d12; --ink:#f1e3c2; --muted:#c2ad84; --dim:#8f7c5a;
  --gold:#d6b25c; --gold2:#f4dc99; --gold3:#8c6a2a; --gold-ink:#24170a; --ember:#e0712c; --blood:#8e2a17; --elf:#7f9c6a;
  --panel:rgba(22,15,9,.94); --line:#6e5427; --red:#a8321e; --ok:#9cc27a; --bad:#d06a52;
  --serif:"EB Garamond","Garamond","Georgia",serif; --caps:"Cinzel","Trajan Pro","Georgia",serif; --deco:"Cinzel Decorative","Cinzel","Georgia",serif;
  /* Rahmen mit Goldfiligran (9-teilig gestreckt). width/height sind Pflicht: ohne feste Bildgröße zieht der Browser das SVG auf die Größe des Kastens,
     „30“ schneidet dann nur ein Stück der riesigen Eck-Raute ab (das waren die komischen Ecken an großen Fenstern wie dem Hobbit-Pass). */
  --frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d6b25c'%3E%3Crect x='7' y='7' width='82' height='82' stroke-width='1.6'/%3E%3Crect x='12' y='12' width='72' height='72' stroke-width='.7' opacity='.6'/%3E%3C/g%3E%3Cg id='c' fill='%23e9c977'%3E%3Cpath d='M7 1 L13 7 L7 13 L1 7Z'/%3E%3Cpath d='M15 7 q6 -1 9 3 q-4 -1 -7 1z M7 15 q-1 6 3 9 q-1 -4 1 -7z' opacity='.85'/%3E%3C/g%3E%3Cuse href='%23c' transform='translate(96 0) scale(-1 1)'/%3E%3Cuse href='%23c' transform='translate(0 96) scale(1 -1)'/%3E%3Cuse href='%23c' transform='translate(96 96) scale(-1 -1)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--night);overscroll-behavior:none;overflow:hidden}
body.epic{color:var(--ink);font:18px/1.45 var(--serif);user-select:none;-webkit-user-select:none}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* ---------- Bausteine ---------- */
.frame{position:relative;background:radial-gradient(120% 90% at 50% 0%,rgba(58,40,22,.96),rgba(20,14,8,.97) 70%);
  border:22px solid transparent;border-image:var(--frame) 30 stretch;box-shadow:0 30px 80px rgba(0,0,0,.65);
  background-origin:border-box;background-repeat:no-repeat}   /* Verlauf über den ganzen Kasten samt Rand: sonst kachelt er, und sein heller Anfang taucht als Streifen im unteren Rand und in den unteren Ecken wieder auf */
.logo{margin:0;font-family:var(--deco);font-weight:900;line-height:.95;text-align:center;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff6cf 0%,#f0cf7a 38%,#b98a33 52%,#f6dc96 70%,#c9963c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,190,90,.28))}
.logo small{display:block;font-family:var(--caps);font-weight:700;font-size:.34em;letter-spacing:.42em;margin-bottom:.15em}
.rule{display:flex;align-items:center;gap:12px;color:var(--gold);font-family:var(--caps);font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold3),transparent)}
.ebtn,.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--caps);font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 30px;border:1px solid var(--gold3);border-radius:3px;cursor:pointer;text-decoration:none;color:#f3e2b4;
  background:linear-gradient(180deg,#3b2a17,#1c130b);box-shadow:inset 0 1px 0 rgba(255,230,160,.22),inset 0 0 0 3px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.5);
  transition:border-color .2s,color .2s,background .2s,transform .12s,box-shadow .2s}
.ebtn::before,.ebtn::after{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--gold3);flex:none;transition:background .2s}
.ebtn:hover,.btn:hover{border-color:var(--gold2);color:#fff3cf;background:linear-gradient(180deg,#4a351c,#24180d);box-shadow:inset 0 1px 0 rgba(255,230,160,.3),inset 0 0 0 3px rgba(0,0,0,.3),0 0 22px rgba(240,190,90,.22),0 8px 22px rgba(0,0,0,.5)}
.ebtn:hover::before,.ebtn:hover::after{background:var(--gold2)}
.ebtn:active,.btn:active{transform:translateY(1px)}
.ebtn.big{font-size:20px;padding:17px 40px;background:linear-gradient(180deg,#7a2f15,#3c150a);border-color:#c88c3a;color:#ffe9b0;text-shadow:0 0 12px rgba(255,170,80,.5)}
.ebtn.big:hover{background:linear-gradient(180deg,#943a19,#4a1a0b)}
.ebtn.ghost,.btn.ghost{background:rgba(20,14,8,.55)}
.ebtn.small,.btn.small{font-size:13px;padding:9px 16px;letter-spacing:.1em}
.ebtn.small::before,.ebtn.small::after{display:none}
.btn{font-size:14px;padding:10px 18px}
.btn:not(.ghost):not(.sell){background:linear-gradient(180deg,#7a2f15,#3c150a);border-color:#c88c3a;color:#ffe9b0}
input[type=text]{width:100%;font-family:var(--caps);font-size:18px;letter-spacing:.12em;text-align:center;padding:12px 14px;border-radius:2px;
  border:1px solid var(--gold3);background:rgba(8,6,4,.75);color:var(--gold2);box-shadow:inset 0 2px 10px rgba(0,0,0,.6);user-select:text;-webkit-user-select:text}
input[type=text]::placeholder{color:#7d6b4b;letter-spacing:.06em;font-family:var(--serif);font-style:italic}
/* Name des Hobbits (bis 20 Zeichen): leer = der Zufallsname im Platzhalter gilt; 🎲 würfelt einen neuen */
.namerow{display:flex;gap:6px;align-items:stretch}
.namerow input{flex:1;min-width:0;font-size:16px;letter-spacing:.05em;padding-inline:8px}
.namerow input::placeholder{font-family:var(--caps);font-style:normal;color:#9c8558}
.namerow input{width:auto}
#nameDice{flex:none;width:auto;min-width:0;padding:0 12px;font-size:18px;letter-spacing:0}
input[type=range]{accent-color:var(--gold);cursor:pointer}
kbd{font-family:var(--caps);font-size:12px;font-weight:700;padding:1px 7px;border-radius:2px;background:rgba(0,0,0,.45);border:1px solid var(--gold3);color:var(--gold2)}

/* ---------- Bildschirme (Titel, Hauptmenü) ---------- */
.screen{position:fixed;inset:0;z-index:20;overflow:hidden auto;display:grid}
.screen .bg{position:fixed;inset:0;z-index:-1;background:   /* nur das Bild – es hat schon eine eigene Vignette, kein zusätzlicher dunkler Verlauf */
  url("ui/titel.jpg") right center/cover no-repeat,
  linear-gradient(180deg,#e9b96a 0%,#a7814a 30%,#4f6a3a 55%,#1f2b17 100%)}
.screen .bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-radial-gradient(circle at 30% 20%,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
/* Glut, die aufsteigt */
.embers{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#ffb35a;box-shadow:0 0 8px 2px rgba(255,150,60,.6);opacity:0;animation:ember 9s linear infinite}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(var(--dx,40px),-105vh);opacity:0}}

#title{place-items:center start;padding:24px clamp(16px,5vw,90px)}   /* links, damit der Hobbit rechts frei bleibt */
#title .titelfuss{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));margin:0;font-size:13px;z-index:2}   /* Datenschutz & Anbieter (seit 18.10.2026) – unten rechts: links unten steht der Betreten-Knopf */
#tab-acct a{color:var(--muted)}#tab-acct a:hover{color:var(--gold2)}
#title .titelfuss a{display:inline-block;padding:3px 10px;border-radius:3px;background:rgba(12,9,6,.62);color:var(--ink);text-decoration:underline;text-underline-offset:3px}#title .titelfuss a:hover{color:var(--gold2)}   /* dunkler Grund: auf dem hellen Weg im Titelbild sonst kaum lesbar */
.titlewrap{display:grid;justify-items:center;gap:22px;width:min(600px,100%,52vw);text-align:center;animation:rise 1.4s ease-out both}
#title .logo{font-size:clamp(46px,9vw,104px)}
.tagline{margin:-6px 0 4px;font-style:italic;font-size:clamp(18px,2.3vw,23px);color:#f6e8c6;text-shadow:0 1px 2px #000,0 0 14px rgba(0,0,0,.9)}
.codebox{width:min(470px,100%);display:grid;gap:12px;padding:8px 12px;text-align:center}
.codebox label{font-family:var(--caps);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.codebox p{margin:0;font-size:16px;color:var(--muted)}
.coderow{display:grid;grid-template-columns:1fr auto;gap:8px}
.soundhint{margin:-10px 0 0;font-family:var(--caps);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);text-shadow:0 1px 3px #000,0 0 10px #000;animation:hintpulse 2.2s ease-in-out infinite}
@keyframes hintpulse{50%{opacity:.45}}
/* Anmeldung auf dem Titelbild (Kontoname + Passwort) */
#loginForm{display:grid;gap:10px}
#loginForm[hidden],#acctIn[hidden]{display:none}
#loginForm input[type=text],#loginForm input[type=password]{width:100%;font-family:var(--caps);font-size:16px;letter-spacing:.06em;text-align:center;padding:10px 12px;border-radius:2px;
  border:1px solid var(--gold3);background:rgba(8,6,4,.75);color:var(--gold2);box-shadow:inset 0 2px 10px rgba(0,0,0,.6);user-select:text;-webkit-user-select:text}
#loginForm input[type=password]::placeholder{color:#7d6b4b;letter-spacing:.06em;font-family:var(--serif);font-style:italic}
#loginForm input[hidden]{display:none}
.loginseg{justify-content:center}
#loginToCode{font-size:14px;margin-top:2px}
#loginToCode[hidden]{display:none}
.loginseg[hidden]{display:none}
.toggle.keep{justify-content:center;font-size:15px;color:var(--muted)}
#acctIn{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-size:16px;color:var(--muted)}
#acctIn b{color:var(--gold2);font-family:var(--caps);letter-spacing:.06em}
.linkbtn{background:none;border:0;padding:0;color:var(--gold);text-decoration:underline;cursor:pointer;font:inherit;font-style:italic}
#enter:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.msgline{min-height:1.4em;font-style:italic;color:var(--gold2)!important}
.msgline.bad{color:var(--bad)!important}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Ladebildschirm (seit 12.10.2026, kloppe3d.js ladeSchritt): über dem Spielfeld, solange die Karte gebaut wird. Der Ring dreht per transform –
   das rechnet der Browser außerhalb des Hauptfadens, er dreht also auch, während der Aufbau den Browser anhält */
#laden{z-index:50;place-items:center;padding:24px}
#laden .bg{filter:brightness(.5) saturate(.85)}
.ladebox{display:grid;justify-items:center;gap:14px;text-align:center;animation:rise .45s ease-out both}
.ladebox .logo{font-size:clamp(34px,6vw,64px)}
.ladering{width:62px;height:62px;margin-top:8px;border-radius:50%;border:3px solid rgba(214,178,92,.22);border-top-color:var(--gold2);border-right-color:var(--gold);
  box-shadow:0 0 26px rgba(255,190,90,.22);animation:ladedreh 1s linear infinite;will-change:transform}
@keyframes ladedreh{to{transform:rotate(360deg)}}
#ladenKarte{margin:6px 0 0;font-family:var(--caps);font-weight:700;font-size:clamp(20px,3vw,30px);letter-spacing:.12em;color:var(--gold2);text-shadow:0 2px 6px #000}
#ladenSub{margin:-8px 0 0;min-height:1.4em;font-style:italic;color:var(--muted);text-shadow:0 1px 3px #000}
.ladetipp{max-width:min(560px,90vw);margin:12px 0 0;font-size:17px;color:#eadbb8;text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8)}
/* Reise: alle Gefährten im Ladebildschirm (seit 18.10.2026, wie bei „The Last Stand“): Profilbild, Name, rechts ein kleiner Ladekreis – fertig ein
   grüner, leuchtender Haken. Mit Liste fällt der große Ladekreis weg. */
#laden.mitliste .ladering{display:none}
.ladespieler{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px;width:min(380px,88vw)}
.ladespieler li{display:grid;grid-template-columns:56px 1fr 30px;align-items:center;gap:14px;padding:6px 14px 6px 6px;border:1px solid rgba(214,178,92,.35);border-radius:4px;
  background:linear-gradient(90deg,rgba(40,28,14,.9),rgba(20,14,8,.75));box-shadow:0 4px 14px rgba(0,0,0,.5);transition:border-color .3s}
.ladespieler img{width:56px;height:56px;border-radius:3px;border:1px solid var(--gold3);background:#2a1f14;object-fit:cover}
.lsname{min-width:0;font-family:var(--caps);font-weight:700;letter-spacing:.08em;color:var(--gold2);text-align:left;text-shadow:0 1px 3px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsstat{position:relative;width:24px;height:24px;justify-self:end;border-radius:50%;border:2px solid rgba(214,178,92,.22);border-top-color:var(--gold2);border-right-color:var(--gold);
  animation:ladedreh 1s linear infinite;will-change:transform}
.ladespieler li.ok{border-color:rgba(93,255,122,.5)}
.ladespieler li.ok .lsstat{border:0;animation:lsok .4s ease-out both}
.ladespieler li.ok .lsstat::after{content:"";position:absolute;left:8px;top:1px;width:8px;height:16px;border:solid #6dff86;border-width:0 4px 4px 0;border-radius:1px;transform:rotate(45deg);
  filter:drop-shadow(0 0 3px #2bff5a) drop-shadow(0 0 9px rgba(60,255,110,.8))}
@keyframes lsok{from{transform:scale(.2);opacity:0}60%{transform:scale(1.3);opacity:1}to{transform:scale(1)}}
body.mobil .ladespieler{gap:6px}
body.mobil .ladespieler li{grid-template-columns:40px 1fr 24px;gap:10px;padding:4px 10px 4px 4px}
body.mobil .ladespieler img{width:40px;height:40px}
body.mobil #laden.mitliste .ladetipp{display:none}

#hub{grid-template-rows:auto 1fr auto;padding:18px clamp(16px,4vw,56px) 22px}
.hubtop{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hubtop .logo{font-size:clamp(26px,3.4vw,40px);text-align:left}
.hubmain{display:grid;grid-template-columns:minmax(300px,380px) minmax(180px,280px);justify-content:start;max-width:58vw;align-items:center;gap:clamp(12px,3vw,48px);padding-block:16px;animation:rise .9s ease-out both}
.hubmenu{display:grid;gap:12px;padding:10px 14px}
.hubmenu .ebtn{width:100%;white-space:nowrap}
.hubmenu .ebtn.big{font-size:18px;padding-inline:20px}
.namefield{display:grid;gap:6px;font-family:var(--caps);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.pedestal{justify-self:center;position:relative;display:grid;justify-items:center;gap:6px;border:0;background:none;cursor:pointer;padding:0;color:var(--ink)}
.pedestal canvas{width:min(300px,22vw);height:auto;aspect-ratio:13/16;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.pedestal::before{content:"";position:absolute;left:50%;bottom:52px;width:72%;height:46px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,140,.32),rgba(255,214,140,0));z-index:-1}
.pedestal .hint{font-family:var(--caps);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);opacity:.75;transition:opacity .2s}
.pedestal:hover .hint{opacity:1;text-shadow:0 0 12px rgba(255,200,110,.6)}
.pedestal:hover canvas{filter:drop-shadow(0 26px 30px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,210,130,.35))}
.hubfoot{display:flex;flex-direction:column;align-items:flex-start;max-width:56vw;gap:12px;font-size:15px;color:var(--muted);font-style:italic;flex-wrap:wrap}
@media (max-width:760px){.hubmain{grid-template-columns:minmax(0,1fr);max-width:none}.titlewrap{width:100%}.hubfoot{max-width:none}.pedestal{order:-1}.pedestal canvas{width:min(260px,70vw)}}
/* Handy hochkant: vorher ragten Kopfzeile (Gold + Stufe) und die Menüknöpfe rechts aus dem Bild, die Seite ließ sich quer rollen */
@media (max-width:520px){
  .hubtop{gap:8px}.hubtop .goldchip{padding:7px 10px;gap:7px}.hubtop .goldchip span{display:none}.hubtop .goldchip b{font-size:16px}.hubtop .lvlchip{font-size:13px}
  .hubmenu{padding:6px 2px;gap:10px}
  .hubmenu .ebtn{font-size:14px;letter-spacing:.08em;padding:12px 8px;gap:8px;white-space:normal}
  .hubmenu .ebtn.big{font-size:16px;padding:15px 8px}
  .hubmenu .ebtn.small{font-size:12px;letter-spacing:.06em}
  .coderow input[type=text]{font-size:15px;letter-spacing:.06em;padding-inline:8px}
}

/* Gold-Anzeige */
.goldchip{display:inline-flex;align-items:center;gap:9px;font-family:var(--caps);font-size:15px;letter-spacing:.06em;color:var(--ink);background:rgba(12,9,6,.7);border:1px solid var(--gold3);border-radius:3px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.goldchip b{font-variant-numeric:tabular-nums;color:var(--gold2);font-size:18px} .goldchip span{color:var(--muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.goldchip:hover{border-color:var(--gold2)}

/* Overlays des Shops (shop.js baut #shop mit class="overlay shop") */
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;overflow:auto}

/* ---------- Dialoge (Optionen, Pause) ---------- */
.dialog{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(6,4,2,.66);backdrop-filter:blur(3px)}
.dialog .frame{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:14px;padding:10px 16px}
.dialog h2{margin:0;text-align:center;font-family:var(--caps);font-weight:700;font-size:26px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.optrow{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;font-size:17px}
.optrow > span{font-family:var(--caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.optrow small{display:block;color:var(--muted);font-style:italic;font-size:14px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font-family:var(--caps);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--gold3);border-radius:2px;background:rgba(0,0,0,.35);color:var(--muted);cursor:pointer}
.seg button.on{color:var(--gold-ink);background:linear-gradient(180deg,#f4dc99,#c9a04a);border-color:var(--gold2)}
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--gold)}
/* Steuerung: Tasten neu belegen (seit 19.10.2026, #keysDlg) */
#keysDlg{z-index:61}
.tastenliste{display:grid;gap:6px;max-height:min(62vh,560px);overflow-y:auto;padding-right:4px}
.tastenzeile{display:grid;grid-template-columns:minmax(0,1fr) 128px 128px;gap:8px;align-items:center}
.tastenzeile>span{font-family:var(--caps);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.tastenknopf{height:34px;border:1px solid var(--gold3);border-radius:3px;background:rgba(0,0,0,.4);color:#fff3cf;font:600 15px var(--serif);cursor:pointer}
.tastenknopf:hover{border-color:var(--gold2)}.tastenknopf.leer{color:var(--muted);font-weight:400}
.tastenknopf.fang{border-color:#7fdc6a;color:#d9ffb0;box-shadow:0 0 10px rgba(127,220,106,.5);animation:tfang 1s ease-in-out infinite}
@keyframes tfang{50%{box-shadow:0 0 2px rgba(127,220,106,.2)}}
@media (max-width:520px){.tastenzeile{grid-template-columns:minmax(0,1fr) 92px 92px}}
.keys{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:16px;color:var(--muted)}
.keys .mouse{vertical-align:-4px;margin-right:3px}
.keys b{font-family:var(--caps);font-size:12px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;font-weight:700}
.pausegrid{display:grid;gap:10px}
/* Siegestanz-Auswahl unten im Spielbild */
#danceBar{position:absolute;left:0;right:0;margin:0 auto;width:max-content;box-sizing:border-box;bottom:12px;z-index:6;max-width:96%;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;justify-items:center;
  padding:8px 12px 10px;background:linear-gradient(180deg,rgba(30,21,12,.92),rgba(12,9,6,.94));border:1px solid var(--gold3);border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#danceBar .dhead{font-family:var(--caps);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
#danceBar .dhead b{margin-left:8px;color:#ffb35a}
#danceBar .drow{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding-bottom:2px}
#danceBar button{flex:none;display:grid;justify-items:center;gap:2px;width:78px;padding:5px 4px;border:1px solid color-mix(in srgb,var(--rc) 60%,transparent);border-radius:2px;background:rgba(0,0,0,.35);color:var(--ink);cursor:pointer;font-family:var(--serif);font-size:12px;line-height:1.1}
#danceBar button canvas{width:40px;height:40px}
#danceBar button:hover{border-color:var(--rc);box-shadow:0 0 12px color-mix(in srgb,var(--rc) 50%,transparent)}
#danceBar button.on{border-color:var(--rc);background:rgba(70,50,20,.7);box-shadow:0 0 0 1px var(--rc),0 0 14px color-mix(in srgb,var(--rc) 60%,transparent)}
#danceBar.dancing .dhead{color:var(--muted)}
@media (max-width:600px){#danceBar{bottom:8px;padding:6px 8px 8px}#danceBar .dhead{font-size:11px;letter-spacing:.12em;text-align:center}#danceBar .drow{flex-wrap:wrap;justify-content:center;overflow:visible}#danceBar button{width:62px;font-size:11px;padding:4px 2px}#danceBar button canvas,#danceBar .drandom i{width:32px;height:32px}#danceBar .drandom i{font-size:20px}}   /* Handy: Tänze umbrechen statt aus dem Bild laufen */
.botgrid{display:grid;gap:12px;grid-template-columns:max-content;justify-content:center}   /* seit 18.10.2026: Knöpfe nur so breit wie Kopf + Wort (alle gleich breit, Zurück mit), User: „Felder schmaler, die Bilder und das Wort dicht umschließen“ */
#botDlg .frame{width:max-content;max-width:100%}   /* der Rahmen schrumpft mit, sonst stünde der Leerraum neben den Knöpfen */
#botDlg .rule::before,#botDlg .rule::after{min-width:28px}
.ebtn.botpick{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:10px 18px 10px 12px;text-align:left}   /* seit 18.10.2026: Kopf-Medaillon links, daneben Stufe und Beschreibung; .ebtn davor, damit auch der große Knopf (Hart) bündig sitzt */
.botpick::before,.botpick::after{display:none}
.botpick .botkopf{width:76px;height:76px;flex:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.botpick .bottxt{display:flex;flex-direction:column;gap:4px;min-width:0}
.botpick small{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;font-style:italic;opacity:.85}
.credits{margin:0;font-size:13px;font-style:italic;color:var(--dim);text-align:center}
.credits a{color:var(--muted)}
.pausegrid .ebtn{width:100%}
@media (max-width:520px){.optrow{grid-template-columns:1fr}
  .dialog{padding:10px}.dialog .frame{padding:6px 6px;max-height:calc(100dvh - 20px)}
  .dialog h2{font-size:21px;letter-spacing:.14em}.dialog .rule{letter-spacing:.14em;font-size:12px;gap:8px;text-align:center}
  .dialog .ebtn{letter-spacing:.08em;padding-inline:12px}.dialog .ebtn.big{font-size:17px}
}

/* ---------- Spielfeld: 16:9-Kasten im Holzrahmen; das 3D-Bild füllt nur die Öffnung (spart Pixel) ---------- */
#arena{position:fixed;inset:0;display:grid;place-items:center;background:#0c0906;overflow:hidden}
#arena::before{content:"";position:absolute;inset:-30px;background:linear-gradient(rgba(10,7,4,.72),rgba(10,7,4,.86)),url("ui/titel.jpg") center/cover;filter:blur(10px)}
#frameBox{position:relative;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9;--inset:7%}   /* 3D-Bild 16:9, rundum Abstand zum unscharfen Hintergrund (spart Pixel) */
#stage{position:absolute;inset:var(--inset);background:#0c0906;overflow:hidden;border-radius:3px;
  box-shadow:0 22px 60px rgba(0,0,0,.7),0 6px 18px rgba(0,0,0,.55),0 0 0 1px rgba(214,178,92,.18)}   /* leichter Schlagschatten hebt das Spielbild ab */
#frame{display:none}   /* Holzrahmen auf Wunsch des Users weggelassen (lenkte vom Spiel ab) */
@media (max-width:900px),(pointer:coarse){#frameBox{width:100vw;height:100dvh;aspect-ratio:auto}#stage{inset:0;border-radius:0;box-shadow:none}}
#cv3{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none;z-index:3}
.hp{position:absolute;top:14px;width:min(34%,380px);display:grid;gap:4px}
.hp.l{left:18px} .hp.r{right:18px;text-align:right}
.hp .nm{font-family:var(--caps);font-weight:700;font-size:clamp(14px,1.8vw,21px);letter-spacing:.1em;color:#f8ead0;text-shadow:0 0 4px #000,0 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp .bar{height:clamp(11px,1.4vw,17px);padding:2px;background:linear-gradient(180deg,#120c07,#2b1d10);border:1px solid var(--gold3);box-shadow:0 0 0 1px rgba(0,0,0,.8),inset 0 0 6px #000;display:flex;border-radius:2px}
.hp.r .bar{justify-content:flex-end}
.hp .bar i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#e2b65a,#9b5a1c);box-shadow:inset 0 1px 0 rgba(255,240,190,.5);transition:width .18s}
.hp .wn{font-family:var(--caps);font-size:clamp(11px,1.2vw,14px);letter-spacing:.18em;color:var(--gold);text-shadow:0 0 3px #000}
#msg{position:absolute;left:0;right:0;top:28%;text-align:center;font-family:var(--deco);font-weight:900;font-size:clamp(30px,5.4vw,70px);letter-spacing:.04em;color:#f6dc96;
  text-shadow:0 3px 0 #000,0 0 26px rgba(255,180,80,.45)}
#msg[data-big="1"]{font-size:clamp(70px,13vw,170px);top:20%}
#msg[data-storm="1"]{color:#ff7a34;text-shadow:0 3px 0 #1a0400,0 0 30px rgba(255,90,20,.9)}
#sub{position:absolute;left:0;right:0;top:calc(28% + clamp(40px,7vw,92px));text-align:center;font-style:italic;font-size:clamp(17px,2.3vw,28px);color:#f1e3c2;text-shadow:0 2px 6px #000,0 0 3px #000}
/* Feier: nach der Siegerfahrt rutscht die Ansage klein nach oben – der tanzende Hobbit steht in der Bildmitte */
#msg[data-top="1"]{top:13%;font-size:clamp(20px,3vw,40px)}
#msg[data-top="1"]+#sub{top:calc(13% + clamp(26px,3.9vw,52px));font-size:clamp(14px,1.7vw,21px)}
/* Kampf-Intro: Namenskarte des Hobbits, an dem die Kamera gerade vorbeigleitet */
#introName{position:absolute;left:6%;bottom:20%;display:flex;flex-direction:column;gap:2px;pointer-events:none;opacity:0;transform:translateX(-40px);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1)}
#introName.show{opacity:1;transform:none}
#introName b{font-family:var(--deco);font-weight:900;font-size:clamp(34px,6.2vw,84px);letter-spacing:.04em;line-height:1;color:var(--c,#f6dc96);text-shadow:0 3px 0 #000,0 0 24px rgba(0,0,0,.6)}
#introName small{font-family:var(--caps);font-size:clamp(13px,1.5vw,19px);letter-spacing:.2em;color:#f1e3c2;text-shadow:0 2px 4px #000}
/* HUD erst, wenn die Runde wirklich losgeht (seit 15.10.2026, User): Intro-Fahrt und Rundenende ohne Lebensbalken, Menü, Attacken – oben fährt nach
   oben hinaus, unten nach unten; mit dem Rückflug der Kamera zur Spielkamera fährt alles an seinen Platz (kloppe3d.js updateHud). Aura-Leiste,
   Aura-Liste und Tanzwahl bleiben. „translate“ statt „transform“: die Elemente sind teils schon per transform mittig gestellt. */
#hud .hp,#topbar,#bossBar,#lockHint,#atkbar,#touch,#chip{transition:translate .55s cubic-bezier(.2,.9,.3,1),opacity .45s}
#stage.hudAus #hud .hp,#stage.hudAus #topbar,#stage.hudAus #bossBar,#stage.hudAus #lockHint{translate:0 -180%;opacity:0;pointer-events:none}
#stage.hudAus #atkbar,#stage.hudAus #chip{translate:0 180%;opacity:0;pointer-events:none}
#stage.hudAus #touch{translate:0 60%;opacity:0}
#stage.hudAus #touch *{pointer-events:none!important}
/* Ansagen in Intro und Rundenende links neben dem Klobbit, über seiner Namenskarte (Karte/Kapitel, Sieger) – die Bildmitte gehört ihm */
#ansage{position:absolute;inset:0;pointer-events:none}   /* Rahmen um #msg/#sub (kloppe3d.js): sonst wie bisher, im Seitenmodus eine Spalte über der Namenskarte */
#hud.seite #ansage{inset:auto;left:6%;bottom:calc(20% + clamp(76px,10vw,136px));width:min(44%,640px);display:flex;flex-direction:column;gap:clamp(4px,.6vw,10px)}
#hud.seite #msg,#hud.seite #sub{position:static;text-align:left}
#hud.seite #msg,#hud.seite #msg[data-top="1"]{font-size:clamp(26px,4.2vw,58px);line-height:1.05}
#hud.seite #sub,#hud.seite #msg[data-top="1"]+#sub{font-size:clamp(15px,1.8vw,23px)}
#note{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);width:max-content;max-width:min(900px,94%);text-align:center;font-size:clamp(16px,1.8vw,21px);color:#f6e7c3;
  padding:8px 22px;background:linear-gradient(90deg,transparent,rgba(10,7,4,.78) 18%,rgba(10,7,4,.78) 82%,transparent);text-shadow:0 1px 3px #000;opacity:0;transition:opacity .35s}
#note.show{opacity:1}
#note b{font-family:var(--caps);color:var(--gold2);letter-spacing:.06em}
.tag{position:absolute;left:0;top:0;font-family:var(--caps);font-weight:700;font-size:13px;letter-spacing:.08em;text-shadow:0 0 3px #000,0 0 6px #000;white-space:nowrap;will-change:transform}
#ringpin{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;will-change:transform;
  background:radial-gradient(circle,rgba(255,220,120,.55),rgba(255,200,90,0) 70%);display:grid;place-items:center}
#ringpin::before{content:"";width:14px;height:14px;border-radius:50%;border:3px solid #f2cf6a;box-shadow:0 0 10px #ffcc55}
#ringpin i{position:absolute;inset:0;transform:rotate(var(--a,0rad))}
#ringpin i::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:7px solid #f2cf6a}
#topbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px;align-items:center}
#menuBtn{font-family:var(--caps);font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:7px 16px;border:1px solid var(--gold3);border-radius:2px;background:rgba(12,9,6,.62);color:var(--gold2);cursor:pointer}
#menuBtn:hover{border-color:var(--gold2)}
#chip{position:absolute;left:14px;bottom:12px;z-index:5;font-family:var(--caps);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:7px;text-shadow:0 0 3px #000}
#chip::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--dim)}
#chip.on::before{background:var(--ok)} #chip.off::before{background:var(--bad)}
/* Angriffsleiste: Bild-Kacheln (dieselben Bilder wie im Inventar), Taste in der Ecke, Abklingzeit als dunkler Zeiger mit Sekunden */
#atkbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;z-index:5;max-width:98%;align-items:flex-end}
#atkbar button{position:relative;flex:none;width:62px;height:62px;padding:0;border:1px solid rgba(214,178,92,.55);border-radius:6px;background:linear-gradient(180deg,rgba(40,28,16,.88),rgba(14,10,6,.92));
  color:#efdfba;cursor:pointer;touch-action:none;box-shadow:0 6px 16px rgba(0,0,0,.5);transition:transform .12s,box-shadow .12s}
#atkbar button img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px;pointer-events:none;user-select:none;-webkit-user-drag:none}
#atkbar button.ring img{object-fit:contain;padding:6px 8px 12px;box-sizing:border-box}
#atkbar button kbd{position:absolute;left:-6px;top:-8px;z-index:2;min-width:19px;box-sizing:border-box;text-align:center;font-size:12px;line-height:17px;padding:0 4px;border-radius:3px;background:#1a120a;border:1px solid var(--gold3);color:var(--gold2)}
#atkbar button .cd{position:absolute;inset:0;border-radius:5px;pointer-events:none;opacity:0;background:conic-gradient(transparent calc((1 - var(--cd,0)) * 360deg),rgba(6,4,2,.8) 0)}
#atkbar button.cooling .cd{opacity:1}
#atkbar button.cooling img{filter:saturate(.4) brightness(.85)}
#atkbar button .cdn{position:absolute;inset:0;display:grid;place-items:center;font:700 23px/1 var(--caps);color:#fff3cf;text-shadow:0 0 5px #000,0 2px 0 #000;pointer-events:none}
#atkbar button em{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:700 9px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);text-shadow:0 0 3px #000;pointer-events:none}
#atkbar button:hover{border-color:var(--gold2)}
#atkbar button.melee{width:72px;height:72px;border-color:rgba(224,160,80,.9)}
#atkbar button.sel{border-color:#ffe9a8;box-shadow:0 0 0 2px var(--gold2),0 0 22px rgba(255,200,90,.65);transform:translateY(-5px)}
#atkbar button.ring{border-color:rgba(242,207,106,.8)}
#atkbar button.ring.have{animation:ringglow 1.6s ease-in-out infinite}
#atkbar button.ring.worn{box-shadow:0 0 0 2px #f2cf6a,0 0 24px rgba(255,205,90,.7)}
#atkbar button:disabled{opacity:.36;cursor:not-allowed;box-shadow:none;animation:none}
#atkbar button.nope{animation:nope .35s}
#atkbar .sep{flex:none;width:1px;align-self:stretch;background:linear-gradient(transparent,var(--gold3),transparent);margin:4px 1px}
/* Buffs über der Angriffsleiste (seit 17.10.2026): nur das Medaillon, ein goldener Ring zeigt die Restzeit (kloppe3d.js updateBuffs) */
#buffbar{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);display:flex;gap:7px;z-index:5;pointer-events:none;transition:translate .55s cubic-bezier(.2,.9,.3,1),opacity .45s}
#buffbar:empty{display:none}
body.mitBuffs #note{bottom:150px}   /* Hinweise über den Buffs (sonst lägen die Symbole auf dem Text) */
#stage.hudAus #buffbar{translate:0 180%;opacity:0}
#buffbar .buff{position:relative;width:42px;height:42px;animation:buffrein .35s cubic-bezier(.2,1.4,.4,1)}
#buffbar .buff img{position:absolute;inset:4px;width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.7)}
#buffbar .buff svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
#buffbar .buff circle{fill:none;stroke-width:3.4}
#buffbar .buff .bg{stroke:rgba(10,7,3,.72)}
#buffbar .buff .rest{stroke:#ffd877;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(255,200,80,.85))}
#buffbar .buff.bald{animation:buffbald .45s ease-in-out infinite alternate}
@keyframes buffrein{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes buffbald{to{opacity:.4}}
/* Maus-Bildchen: zeigt, welche Maustaste die Attacke auslöst (Nahkampf immer, sonst die gewählte) */
.mouse{position:relative;display:inline-block;width:13px;height:19px;box-sizing:border-box;border:1.5px solid var(--gold2);border-radius:7px;background:#1a120a}
.mouse::before{content:"";position:absolute;top:0;width:50%;height:46%;background:var(--gold2)}
.mouse.l::before{left:0;border-radius:5px 0 0 0}.mouse.r::before{right:0;border-radius:0 5px 0 0}
#atkbar button .mouse{position:absolute;right:-6px;top:-10px;z-index:2;display:none}
#atkbar button.melee .mouse,#atkbar button.sel .mouse{display:block}
@keyframes ringglow{50%{box-shadow:0 0 0 1px #f2cf6a,0 0 24px rgba(255,205,90,.7)}}
@keyframes nope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:700px),(pointer:coarse) and (max-height:500px){#atkbar{gap:4px;bottom:8px}#atkbar button{width:44px;height:44px}#atkbar button.melee{width:48px;height:48px}#atkbar button .cdn{font-size:16px}#atkbar button em{font-size:8px;bottom:1px}#atkbar button.ring img{padding:4px 6px 9px}#atkbar .sep{margin:4px 0}}   /* auch Handy quer (z. B. 740×360): die große Leiste (514 px) ragte links über den Stick und den Verbindungs-Text */
@media (pointer:coarse){#atkbar button kbd,#atkbar button .mouse{display:none!important}}
@media (max-width:700px),(pointer:coarse) and (max-height:500px){#buffbar{bottom:64px;gap:5px}#buffbar .buff{width:32px;height:32px}#buffbar .buff img{inset:3px;width:26px;height:26px}}
/* Zielpunkt: dorthin (Blickrichtung der Kamera) gehen die Attacken */
#aimDot{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;border:2px solid rgba(255,226,150,.92);border-radius:50%;box-shadow:0 0 0 1px rgba(20,12,4,.75),0 0 8px rgba(255,200,90,.55);will-change:transform}
#aimDot::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#fff3cf;box-shadow:0 0 0 1px rgba(20,12,4,.75)}
/* Hinweis, solange die Maus nicht gefangen ist */
#lockHint{position:absolute;left:50%;top:13%;transform:translateX(-50%);width:max-content;max-width:92%;padding:9px 22px;text-align:center;font-size:clamp(15px,1.6vw,19px);color:#f6e7c3;
  background:rgba(10,7,4,.74);border:1px solid var(--gold3);border-radius:3px;text-shadow:0 1px 3px #000}
#lockHint small{display:block;margin-top:2px;font-size:.78em;color:var(--muted)}
@media (pointer:coarse){#lockHint{display:none}}
/* Touch-Steuerung */
#touch{position:absolute;inset:0;pointer-events:none;z-index:4;display:none}
@media (pointer:coarse){#touch{display:block}#note{bottom:150px}}
#touch.feast{display:none}   /* Tanzwahl offen: Stick und Knöpfe machen der Tanzleiste Platz */
#joy{position:absolute;left:18px;bottom:76px;width:124px;height:124px;border-radius:50%;background:rgba(12,9,6,.35);border:1px solid rgba(214,178,92,.5);pointer-events:auto;touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4dc99,#9b7432);border:1px solid #f4dc99}
#tbtns{position:absolute;right:16px;bottom:80px;display:flex;gap:10px;align-items:flex-end;pointer-events:none}
#tbtns button{pointer-events:auto;font-family:var(--caps);font-weight:700;font-size:12px;letter-spacing:.08em;width:60px;height:60px;padding:0;border-radius:50%;border:1px solid rgba(214,178,92,.6);background:rgba(12,9,6,.55);color:var(--gold2);touch-action:none}
#tbtns #tA{width:78px;height:78px;background:radial-gradient(circle at 40% 35%,#9a3a18,#4a170a);border-color:#e0a050}
#tbtns #tA,#tbtns #tS{position:relative;overflow:hidden}
#tbtns button img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
#tbtns #tS{width:64px;height:64px;border-color:var(--gold2)}
#tbtns #tS .cd{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;background:conic-gradient(transparent calc((1 - var(--cd,0)) * 360deg),rgba(6,4,2,.8) 0)}
#tbtns #tS.cooling .cd{opacity:1}
#tbtns #tS[data-k="3"] img{object-fit:contain;padding:8px;box-sizing:border-box}
#tbtns button.on{background:var(--gold);color:var(--gold-ink)}
@media (max-width:480px){#tbtns{flex-wrap:wrap;justify-content:flex-end;max-width:180px}#tbtns button{width:52px;height:52px;font-size:11px}}   /* Handy hochkant: Ducken/Hüpfen in eine zweite Reihe über die Angriffsknöpfe – sonst liegen sie auf dem Stick */

/* ---------- Shop / Inventar im epischen Gewand ---------- */
body.epic .shop{background:rgba(6,4,2,.86);backdrop-filter:blur(3px);z-index:45;overflow:hidden auto;--top:clamp(8px,2.5vh,28px);place-items:start center;padding:var(--top) 12px 12px}   /* oben angeschlagen: das Fenster springt beim Reiterwechsel nicht mehr auf und ab */
body.epic .shopwin{background:radial-gradient(120% 80% at 50% 0%,rgba(52,36,20,.98),rgba(18,12,7,.98) 70%) no-repeat border-box;border:22px solid transparent;border-image:var(--frame) 30 stretch;border-radius:0;padding:6px 10px;max-height:calc(100dvh - var(--top) - 12px)}
body.epic .shopwin,.dialog .frame,body.epic .rwtrack,body.epic .trwin{scrollbar-width:thin;scrollbar-color:var(--gold3) rgba(0,0,0,.25)}
body.epic .shophead h2{font-family:var(--caps);font-weight:700;font-size:28px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)}
body.epic .shophead .gold b{font-family:var(--caps)}
body.epic .tabs button{font-family:var(--caps);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;border:1px solid var(--gold3);background:rgba(0,0,0,.3);color:var(--muted)}
body.epic .tabs button.on{background:linear-gradient(180deg,#f4dc99,#c9a04a);color:var(--gold-ink);border-color:var(--gold2)}
body.epic .hint2{font-style:italic;font-size:16px}
body.epic .crate{background:linear-gradient(180deg,rgba(40,28,16,.9),rgba(16,11,6,.9));border:1px solid var(--gold3);border-radius:2px}
body.epic .crate h3,body.epic .rinfo h3,body.epic .spintitle{font-family:var(--caps);font-weight:700;letter-spacing:.1em;color:var(--gold2)}
body.epic .crate h3{letter-spacing:.06em;font-size:clamp(17px,1.45vw,22px)}   /* vier Themenkisten nebeneinander (seit 15.10.2026): „Hauenlandkiste“ passt in die Karte */
body.epic .crate.saison{border-color:#d9711e;background:linear-gradient(135deg,rgba(64,26,8,.94),rgba(24,12,26,.94));box-shadow:0 0 30px rgba(255,140,40,.14) inset}
body.epic .crate.saison h3{font-size:clamp(20px,1.8vw,26px);color:#ffb35a}
body.epic .blurb,body.epic .detail p,body.epic .rinfo p{font-size:15px}
body.epic .odds{font-size:15px}
body.epic .slots li,body.epic .detail,body.epic .acctbox{background:rgba(0,0,0,.28);border-color:rgba(140,106,42,.6);border-radius:2px}
body.epic .card{border-radius:2px;background:linear-gradient(180deg,rgba(40,28,16,.85),rgba(14,10,6,.85))}
body.epic .chipf{font-family:var(--caps);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:2px}
body.epic #prevCanvas,body.epic .prevBig{border-radius:2px;border-color:var(--gold3);background:radial-gradient(circle at 50% 35%,#3a2a18,#120c07)}
body.epic .acctcode{font-family:var(--caps)}
body.epic #toast{font-family:var(--serif);font-size:17px;border-radius:2px;border:1px solid var(--gold3);background:rgba(16,11,6,.95)}

body.epic .pslot{border-radius:2px;background:linear-gradient(180deg,rgba(40,28,16,.88),rgba(14,10,6,.9));border-color:rgba(140,106,42,.65);font-family:var(--caps);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
body.epic .pslot canvas,body.epic .pslot img{border-radius:50%}
body.epic .pempty{border-radius:50%}
body.epic .slothead h3{font-family:var(--caps);font-weight:700;letter-spacing:.12em;color:var(--gold2)}
body.epic .atkhead{font-family:var(--caps);color:var(--gold)}
body.epic .atkrow .pslot{letter-spacing:0;font-size:9px;padding-left:1px;padding-right:1px}
#danceBar .drandom i{width:40px;height:40px;display:grid;place-items:center;font-style:normal;font:700 26px/1 var(--caps);color:var(--gold2);border:1px dashed var(--gold);border-radius:50%}
.atkrow.dancerow{margin-bottom:4px}
.invwrap.doll .allrow{display:flex;flex-wrap:nowrap;gap:6px;justify-content:center}.invwrap.doll .allrow .btn{flex:1 1 0;min-width:0;white-space:normal;padding:9px 5px;font-size:11px;letter-spacing:.03em;line-height:1.15}.invwrap.doll .invleft{gap:6px}
body.epic .dollstage #prevCanvas{width:64%;border-radius:0;background:radial-gradient(closest-side at 50% 56%,rgba(255,214,140,.2),rgba(255,214,140,0))}   /* kein Kasten mehr um die Vorschau: der Hobbit steht frei im warmen Schein */
body.epic .cn{font-size:14px}
body.epic .note2{font-size:14px}
body.epic .spinhint{font-size:15px}
/* Hobbit-Pass, Auszeichnungen und Stufen-Banner im selben Gewand wie der Rest (waren noch die grünen, rund abgeschnittenen Kästen der 2D-Fassung) */
body.epic .passhead{background:linear-gradient(180deg,rgba(40,28,16,.9),rgba(16,11,6,.9));border:1px solid var(--gold3);border-radius:2px}
body.epic .passinfo h3{font-family:var(--caps);font-weight:700;letter-spacing:.1em;color:var(--gold2)}
body.epic .lvlring b{background:#170f08;font-family:var(--caps);color:var(--gold2)}
body.epic .xpbar{border-radius:2px;border-color:var(--gold3)} body.epic .xpbar i{border-radius:0}
body.epic .rw,body.epic .aw{border-radius:2px;border-width:1px;background:linear-gradient(180deg,rgba(40,28,16,.85),rgba(14,10,6,.85))}
body.epic .rw{border-bottom-width:4px;font-size:13px} body.epic .rw.next{border-color:var(--gold2);border-bottom-color:var(--rc)}
body.epic .aw{border-color:rgba(140,106,42,.6)} body.epic .aw.got{border-color:var(--gold2)}
body.epic .aw b{font-size:15px;line-height:1.15} body.epic .aw span{font-size:13px;line-height:1.2}
body.epic #awardToast{border-radius:2px;border:1px solid var(--gold2);background:rgba(16,11,6,.96)}
body.epic .lvlbox{border-radius:2px;border:1px solid var(--gold2);background:radial-gradient(120% 90% at 50% 0%,rgba(58,40,22,.98),rgba(16,11,6,.98) 70%)}
body.epic .lvlnum{font-family:var(--deco)}
/* Kiste öffnen: Drehstreifen und Gewinn-Kasten ebenfalls braun-golden statt grün und rund */
body.epic .view{border-radius:2px;border:1px solid var(--gold3);background:#120c07}
body.epic .view::before{background:linear-gradient(90deg,#120c07,transparent)} body.epic .view::after{background:linear-gradient(270deg,#120c07,transparent)}
body.epic .cell{border-radius:2px;background:linear-gradient(180deg,rgba(52,37,21,.95),rgba(24,17,10,.95));font-size:12px}
body.epic .rinfo{border-radius:2px;border-width:1px;background:rgba(0,0,0,.28)}
/* „Absurd“: der Regenbogen-Rand ging im epischen Gewand verloren (body.epic .card überschrieb den Hintergrund, übrig blieb ein unsichtbarer Rand) */
body.epic .card.absurd,body.epic .result.absurd .rinfo{background:linear-gradient(#2a1d12,#150e08) padding-box,conic-gradient(from var(--ang,0deg),#ff4fd8,#ffe45c,#4fe0ff,#7dff9a,#ff4fd8) border-box;border:2px solid transparent}
@media (max-width:560px){
  body.epic .shop{padding-inline:6px}
  body.epic .shopwin{padding:4px 4px}
  body.epic .shophead h2{font-size:19px;letter-spacing:.1em}
  body.epic .tabs button{font-size:12px;letter-spacing:.08em;padding:8px 9px}
  body.epic .atkrow .pslot{font-size:8.5px}
}
@media (max-width:720px){body.epic .dollstage #prevCanvas{width:70%}}
.opthint{display:block;margin-top:5px;font-size:12px;color:var(--muted);font-style:italic}

/* Wunschkarte im Hauptmenü */
#mapSel{width:100%;font-family:var(--serif);font-size:15px;letter-spacing:.02em;text-transform:none;padding:9px 10px;border-radius:2px;background:#1d140c;color:#f3e3c0;border:1px solid #8a6a3a}

/* ---------- Koop „Die Reise“ ---------- */
.coopchs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 16px;max-width:980px}
.coopch{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid rgba(224,176,74,.35);background:linear-gradient(#2a1d12cc,#1a120bcc);color:#f3e2bc;cursor:pointer;font:inherit;transition:transform .12s,border-color .12s}
.coopch small{font-family:var(--caps);font-size:11px;letter-spacing:.12em;color:#c9a35a}
.coopch b{font-family:var(--deco);font-size:17px;color:var(--gold2)}
.coopch span{font-size:13px;line-height:1.3;opacity:.9}
.coopch em{font-size:12px;font-style:normal;color:#e48a6a;margin-top:auto}
.coopch:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold2)}
.coopch.on{border-color:#ffd877;box-shadow:0 0 0 2px #ffd87755,0 0 18px #ffb84a55}
.coopch.locked{opacity:.38;cursor:not-allowed;filter:grayscale(.7)}
.cooprow{display:flex;gap:12px;justify-content:center;align-items:center;margin:8px 0}
.cooprow input{font:inherit;font-family:var(--caps);letter-spacing:.2em;text-transform:uppercase;width:150px;padding:10px 12px;border-radius:8px;border:1px solid rgba(224,176,74,.5);background:#120c07;color:#f6e7c3;text-align:center}

#bossBar{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:min(520px,60%);text-align:center;pointer-events:none}
#bossBar b{display:block;font-family:var(--deco);font-size:clamp(16px,1.8vw,22px);color:#ffb48a;text-shadow:0 2px 0 #1a0400,0 0 12px rgba(255,80,20,.6);margin-bottom:4px}
#bossBar i{display:block;height:12px;border-radius:7px;background:#1a0f0b;border:1px solid #7a3a22;overflow:hidden;box-shadow:0 0 12px rgba(0,0,0,.6)}
#bossBar s{display:block;height:100%;width:100%;background:linear-gradient(#ff6a3a,#b3200f);transition:width .15s;text-decoration:none}
/* Haurons Schild (seit 16.10.2026): golden über dem Lebensbalken, solange er den Ring hat */
#bossBar i{position:relative}
#bossBar s#bossSchild{position:absolute;left:0;top:0;width:0;background:linear-gradient(#fff3b0,#e0a92a);box-shadow:0 0 10px rgba(255,214,90,.8)}
#mobBars{position:absolute;inset:0;pointer-events:none}
.mobbar{position:absolute;left:0;top:0;width:54px;height:6px;border-radius:4px;background:#1a0f0bcc;border:1px solid #000a;overflow:hidden;will-change:transform}
.mobbar i{display:block;height:100%;background:linear-gradient(#ff8a5a,#c0301a)}
#coopDlg .frame{width:min(1020px,94vw);max-width:none}
@media (max-width:980px){.coopchs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.coopch{min-width:0} .coopch b{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:520px){.coopch{padding:8px 9px}.coopch b{font-size:13.5px}}
.cooprow .ebtn{white-space:nowrap}
.cooprow{flex-wrap:wrap}
.cooprow input.bad{border-color:#c0301a;box-shadow:0 0 0 2px #c0301a55}
@media (max-width:600px){.cooprow{flex-direction:column}.cooprow .ebtn{white-space:normal;width:100%}}

/* ---------- Lobby: wer ist online, Gruppe mit Leiter (lobby3d.js) ---------- */
#lobbyBox{position:fixed;right:clamp(12px,2.4vw,40px);top:96px;z-index:25;width:min(330px,28vw);max-height:calc(100dvh - 190px);overflow:hidden auto;display:grid;gap:8px;align-content:start;
  padding:12px 14px 14px;border:1px solid var(--gold3);border-radius:4px;background:linear-gradient(180deg,rgba(40,28,16,.95),rgba(16,11,6,.96));
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 3px rgba(0,0,0,.25);color:var(--ink);font-size:15px;scrollbar-width:thin;scrollbar-color:var(--gold3) rgba(0,0,0,.25);animation:rise .5s ease-out both}
#lobbyBox[hidden],.lbgroup[hidden],.lobbychip[hidden]{display:none}
@media (min-width:1720px){#lobbyBox:not(.pop){z-index:42}}   /* breite Schirme: die Liste bleibt neben den Dialogen (Reise, Bot) sichtbar */
#lobbyBox.pop{z-index:48;top:54px;right:10px;width:min(340px,calc(100vw - 20px));max-height:calc(100dvh - 70px)}
#lobbyBox.pop.ingame{right:auto;left:50%;margin-left:max(-170px,calc(-50vw + 10px))}
.lbhead{display:flex;align-items:baseline;gap:8px}
.lbhead b{font-family:var(--caps);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)}
#lbCount{margin-left:auto;font-family:var(--caps);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.lbx{display:none;border:0;background:none;color:var(--muted);font-size:24px;line-height:.8;cursor:pointer;padding:0 2px}
.lbx:hover{color:var(--gold2)} #lobbyBox.pop .lbx{display:block}
.lbrule{display:flex;align-items:center;gap:8px;color:var(--gold);font-family:var(--caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.lbrule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold3),transparent)}
.lbrule small{color:var(--muted);letter-spacing:.08em;font-size:11px}
.lblist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lblist li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n b" "s b";align-items:center;column-gap:8px;padding:6px 8px;border:1px solid rgba(110,84,39,.45);border-radius:3px;background:rgba(0,0,0,.22)}
.lblist li.me{border-color:var(--gold3);background:rgba(120,90,30,.16)}
.lbname{grid-area:n;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbname small{color:var(--muted);font-weight:400;font-size:12px}
.lbst{grid-area:s;font-size:12.5px;color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbbtns{grid-area:b;display:flex;gap:4px}
.lbbtns button{font-family:var(--caps);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--gold3);border-radius:2px;background:linear-gradient(180deg,#3c2a16,#20150b);color:var(--gold2);cursor:pointer;white-space:nowrap}
.lbbtns button:hover{border-color:var(--gold2);color:#fff3cf}
.lbbtns button:disabled{opacity:.5;cursor:default}
/* Optionen je Spieler als Aufklappmenü (seit 14.10.2026, User: Leiste schmal, Klick auf den Namen zeigt die Optionen): Pfeil rechts, Knöpfe in einer eigenen Reihe darunter */
.lblist li.lbhas{cursor:pointer}.lblist li.lbhas:hover{border-color:var(--gold3);background:rgba(60,42,22,.35)}
.lbmore{grid-area:b;color:var(--gold3);font-size:14px;line-height:1;padding:4px 2px;transition:transform .15s}.lblist li.open .lbmore{transform:rotate(180deg);color:var(--gold2)}
.lblist li.lbhas .lbbtns{display:none}
.lblist li.lbhas.open{border-color:var(--gold3)}
.lblist li.lbhas.open .lbbtns{display:flex;flex-wrap:wrap;grid-area:auto;grid-column:1/-1;grid-row:3;gap:6px;margin-top:6px;padding-top:7px;border-top:1px solid rgba(110,84,39,.45)}
.lblist li.lbhas.open .lbbtns button{flex:1 1 auto}
.crown{font-style:normal;color:var(--gold2);margin-right:5px;text-shadow:0 0 8px rgba(255,200,110,.5)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:7px}
.lbhint{margin:0;font-size:13.5px;line-height:1.35;color:var(--muted)} .lbhint b{color:var(--gold2);font-weight:600} .lbhint .crown{margin:0}
.lbhow{border-top:1px solid rgba(110,84,39,.4);padding-top:8px}
.lbempty{margin:0;font-size:14px;color:var(--muted);font-style:italic;display:grid;gap:8px;justify-items:start}
.lbempty[hidden]{display:none}
.lbrow{display:flex;gap:6px;flex-wrap:wrap}
.lbgroup{display:grid;gap:8px;padding-bottom:4px}
#lobbyBox .ebtn.small{font-size:11px;padding:7px 10px;letter-spacing:.08em}
/* Knopf: im Spiel neben „Menü“, im Menü auf schmalen Schirmen unten rechts */
.lobbychip{font-family:var(--caps);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--gold3);border-radius:2px;background:rgba(12,9,6,.72);color:var(--gold2);cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;pointer-events:auto}
.lobbychip:hover{border-color:var(--gold2)}
.lobbychip.group{border-color:var(--gold2);box-shadow:0 0 14px rgba(240,190,90,.25)}
body>.lobbychip{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:42;padding:9px 14px}
/* Einladungen und Hinweise */
#lobbyInv{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:63;display:grid;gap:8px;width:min(430px,calc(100vw - 24px))}
.lbinv{position:relative;overflow:hidden;display:grid;gap:10px;padding:12px 16px 14px;border:1px solid var(--gold2);border-radius:4px;background:linear-gradient(180deg,rgba(58,40,22,.98),rgba(20,14,8,.98));box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 26px rgba(240,190,90,.2);animation:rise .35s ease-out both}
.lbinv p{margin:0;font-size:17px;text-align:center} .lbinv p b{font-family:var(--caps);color:var(--gold2);letter-spacing:.05em} .lbinv small{color:var(--muted)}
.lbinv div{display:flex;gap:8px;justify-content:center}
.lbtime{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);transform-origin:left;animation:lbtime 30s linear forwards}
@keyframes lbtime{to{transform:scaleX(0)}}
#lobbyToast{position:fixed;left:50%;top:calc(58px + env(safe-area-inset-top,0px));transform:translate(-50%,-16px);opacity:0;pointer-events:none;z-index:62;width:max-content;max-width:min(560px,calc(100vw - 24px));padding:9px 18px;
  border:1px solid var(--gold3);border-radius:3px;background:rgba(14,10,6,.93);color:var(--ink);font-size:16px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.55);transition:opacity .25s,transform .25s}
#lobbyToast.show{opacity:1;transform:translate(-50%,0)}
#lobbyToast b{font-family:var(--caps);color:var(--gold2);letter-spacing:.05em}
/* Mitglied einer Lobby: Spiele startet der Leiter */
body.lobbymember #go,body.lobbymember #goCoop,body.lobbymember #goBot{opacity:.55}
@media (prefers-reduced-motion:reduce){#lobbyBox,.lbinv{animation:none}.lbtime{animation:none}}

/* Rüstkammer der Reise (Feldzug, 07.10.2026) */
/* Rüstkammer (Feldzug, seit 07.10.2026): eigener Vollbild-Screen über der 3D-Auenland-Welt – wie die Ausrüstung in „The Last Stand“.
   Links die Teile, Mitte die angelegten Plätze und Ehren, oben rechts Reise-Stufe und Werte, rechts steht der Hobbit (3D), unten Zurück/Bereit. */
body.rkoffen{overflow:hidden}
.rkscreen{position:fixed;inset:0;z-index:45;overflow:hidden;background:#0c0906;color:#f1e3c3;font:16px/1.4 var(--serif)}
.rkscreen[hidden]{display:none}
.rkstage{position:absolute;inset:0;cursor:grab;touch-action:none}
.rkstage canvas{display:block;width:100%;height:100%}
.rkscreen.ohne3d .rkstage{background:linear-gradient(rgba(10,7,4,.35),rgba(10,7,4,.6)),url("ui/titel.jpg") center/cover}
.rkshade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,5,.72) 0%,rgba(6,8,5,.52) 30%,rgba(6,8,5,.16) 50%,rgba(6,8,5,0) 60%),linear-gradient(0deg,rgba(6,8,5,.6),rgba(6,8,5,0) 20%),linear-gradient(180deg,rgba(6,8,5,.45),rgba(6,8,5,0) 16%)}
.rkui{position:absolute;inset:0;zoom:var(--rkz,1);pointer-events:none;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:12px 16px;padding:16px 22px 16px}
.rkui>*{pointer-events:auto}
.rktitel{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.rktitel h2{margin:0;font-family:var(--caps);font-weight:700;font-size:30px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.rktitel p{margin:0;font-family:var(--caps);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#c9b07a;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.rkpanel{position:relative;background:linear-gradient(180deg,rgba(14,20,12,.72),rgba(8,11,7,.8));border:1px solid rgba(214,178,92,.55);border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,236,170,.1);backdrop-filter:blur(3px);scrollbar-width:thin;scrollbar-color:var(--gold3) rgba(0,0,0,.25)}
.rkpanel::before,.rkpanel::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--gold);pointer-events:none}
.rkpanel::before{top:-3px;left:-3px;border-right:0;border-bottom:0}.rkpanel::after{bottom:-3px;right:-3px;border-left:0;border-top:0}
/* Seit 10.10.2026 wie „Dawn of War 2 Retribution – The Last Stand“: ein Raster mit einer Zeile je Kategorie. Links (Spalte 1) im durchgehenden
   Rahmen (.rkrahmen liegt hinter allen Zeilen) die verfügbaren Teile, rechts (Spalte 2) frei schwebend die angelegten Plätze derselben Kategorie.
   Gescrollt wird nur senkrecht und immer beides zusammen – so bleiben Teile und Platz auf gleicher Höhe. */
.rkbuch{--lw:540px;grid-column:1;grid-row:2;align-self:start;max-height:100%;min-height:0;display:grid;grid-template-columns:minmax(300px,var(--lw)) 252px;grid-template-rows:repeat(6,auto);column-gap:26px;align-items:start;overflow-x:hidden;overflow-y:auto;padding:3px 4px 3px 3px;scrollbar-width:thin;scrollbar-color:var(--gold3) transparent}
.rkrahmen{grid-column:1;grid-row:1/6;align-self:stretch}
/* Klassen-Karussell (seit 16.10.2026 abends): frei schwebend unter dem Hobbit (ruestkammer.js platzKlasse setzt left/bottom), kein Kasten. Oben die drei
   Fähigkeiten der Klasse mit Bild und Taste, darunter das Symbol (die gewählte Klasse groß, die übrigen klein und blass daneben – --off), darunter der Name */
.rkkar{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);display:grid;justify-items:center;gap:4px;width:360px;pointer-events:auto;text-shadow:0 1px 4px #000,0 0 10px rgba(0,0,0,.85)}
.rkkarfaeh{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:14px}
.rkkarfaeh li{display:grid;justify-items:center;gap:3px;width:82px}
.rkkarico{position:relative;width:54px;height:54px}
.rkkarico img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.75))}
.rkkarico kbd{position:absolute;right:-4px;bottom:-4px;min-width:18px;padding:0 4px;border-radius:4px;font:700 11px/18px var(--caps);text-align:center;color:#ffe9b8;background:rgba(0,0,0,.8);border:1px solid rgba(214,178,92,.6)}
.rkkarfaeh small{font-size:11.5px;line-height:1.15;text-align:center;color:#f1e3c3}
.rkkarmitte{display:flex;align-items:center;gap:6px}
.rkkarbuehne{position:relative;width:250px;height:124px}
.rkkarteil{--off:0;position:absolute;left:50%;top:50%;width:116px;height:116px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  transform:translate(-50%,-50%) translateX(calc(var(--off) * 92px)) scale(.52);opacity:.42;filter:saturate(.6);transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .35s,filter .35s}
.rkkarteil.an{transform:translate(-50%,-50%) scale(1);opacity:1;filter:none;z-index:1}
.rkkarteil:not(.an):hover{opacity:.75}
.rkkarteil img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.75))}
.rkkarteil.an img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,200,90,.35))}
.rkkarpfeil{width:38px;height:38px;border-radius:50%;border:1px solid rgba(214,178,92,.7);background:radial-gradient(circle at 50% 40%,rgba(70,56,30,.9),rgba(14,10,6,.92));color:var(--gold2);font:700 24px/1 var(--caps);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.rkkarpfeil:hover,.rkkarpfeil:focus-visible{border-color:#ffd877;color:#fff1c2}
.rkkarname{font-family:var(--caps);font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.rkkarsub{margin-top:-4px;font-size:12.5px;color:#d8c79a}
/* Fehlt unter dem Hobbit der Platz (Laptop, z. B. 1440 × 900 – der Hobbit steht dort hinter den angelegten Plätzen): flach in der Fußleiste zwischen
   „Zurück“ und „Bereit“ – links die Fähigkeiten, in der Mitte das Symbol, rechts der Name (platzKlasse schaltet .quer) */
.rkkar.quer{width:max-content;grid-template-columns:auto auto auto;grid-template-areas:"faeh mitte name" "faeh mitte sub";align-items:center;justify-items:start;gap:0 14px}
.rkkar.quer .rkkarfaeh{grid-area:faeh;gap:6px}
.rkkar.quer .rkkarfaeh li{width:66px}
.rkkar.quer .rkkarico{width:40px;height:40px}
.rkkar.quer .rkkarfaeh small{font-size:10.5px}
.rkkar.quer .rkkarmitte{grid-area:mitte}
.rkkar.quer .rkkarbuehne{width:150px;height:84px}
.rkkar.quer .rkkarteil{width:80px;height:80px;transform:translate(-50%,-50%) translateX(calc(var(--off) * 56px)) scale(.52)}
.rkkar.quer .rkkarteil.an{transform:translate(-50%,-50%) scale(1)}
.rkkar.quer .rkkarpfeil{width:32px;height:32px;font-size:20px}
.rkkar.quer .rkkarname{grid-area:name;align-self:end;font-size:19px}
.rkkar.quer .rkkarsub{grid-area:sub;align-self:start;margin-top:0}
/* Pause auf der Reise (seit 16.10.2026 abends): jeder kann anhalten (Rast-Menü), jeder kann fortsetzen – mittig über dem Spielbild */
#pauseBox{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:8;display:grid;justify-items:center;gap:10px;min-width:min(340px,90vw);padding:20px 34px 18px;border:1px solid rgba(214,178,92,.65);border-radius:6px;background:linear-gradient(180deg,rgba(14,20,12,.9),rgba(8,11,7,.94));box-shadow:0 14px 38px rgba(0,0,0,.65);text-align:center;color:#f1e3c3;pointer-events:auto}
#pauseBox[hidden]{display:none}
#pauseBox b{font-family:var(--caps);font-size:34px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);text-shadow:0 2px 10px #000}
#pauseBox span{font-size:15.5px;color:#e8d6ae}
/* Lobby in der Rüstkammer (seit 16.10.2026 spät, User: „nicht Teil des Stat-Kastens, sondern losgelöst und aussehen wie im Hauptmenü“): rechte Spalte
   mit der Werte-Tafel und darunter einem eigenen Kasten im Aussehen von #lobbyBox; die Listen-Bausteine (lbhead, lbrule, lblist) sind dieselben */
.rkrechts{grid-column:2;grid-row:1/3;justify-self:end;align-self:start;display:grid;gap:12px;justify-items:end;width:min(520px,100%);max-height:100%;min-height:0;pointer-events:none}
.rkrechts>*{pointer-events:auto}
.rkrechts .rkstats{grid-column:auto;grid-row:auto;justify-self:stretch;width:auto}
.rklobbybox{width:min(330px,100%);min-height:0;overflow:hidden auto;display:grid;gap:8px;align-content:start;padding:12px 14px 14px;border:1px solid var(--gold3);border-radius:4px;
  background:linear-gradient(180deg,rgba(40,28,16,.95),rgba(16,11,6,.96));box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 3px rgba(0,0,0,.25);color:var(--ink);font-size:15px;
  scrollbar-width:thin;scrollbar-color:var(--gold3) rgba(0,0,0,.25)}
.rklobbybox .lbzahl{margin-left:auto;font-family:var(--caps);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rklobbybox .lblist li.ok{border-color:rgba(127,220,106,.5)}
.rkhaken{font-style:normal;margin-right:6px;color:var(--muted)}.lblist li.ok .rkhaken{color:#7fdc6a}.lblist li.sp .rkhaken{color:#ff9a6a}
.rkkapsel{font:inherit;font-size:14px;padding:6px 8px;width:100%;border:1px solid var(--gold3);border-radius:2px;background:#20150b;color:var(--gold2)}
.rkkaplauf{margin:0}
.rkverf{grid-column:1;grid-row:var(--r);position:relative;min-width:0;padding:0 12px 12px}
.rkverf[data-art=hand]{padding-top:4px}
.rkverf .rkgh .rkght{white-space:nowrap;flex-shrink:0}.rkverf .rkgh small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkverf .rktiles{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.rkzu{grid-column:2;grid-row:var(--r);min-width:0;padding:4px 0 10px}
.rkzu.rkehrenzu{padding-bottom:2px}
.rkzukopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:4px 0 6px;padding:5px 10px 5px 8px;font-family:var(--caps);font-weight:700;font-size:16.5px;letter-spacing:.05em;color:var(--gold2);text-shadow:0 2px 8px rgba(0,0,0,.95);background:linear-gradient(90deg,rgba(6,8,5,.8),rgba(6,8,5,.5) 65%,rgba(6,8,5,0));border-top:1px solid rgba(214,178,92,.3)}
.rkzukopf small{font-family:var(--serif);font-weight:400;font-size:11.5px;letter-spacing:0;color:#d8c79a}
.rkzuslots{display:flex;gap:8px;padding-left:2px}
.rkgh{position:sticky;top:-4px;z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:8px -12px 8px;padding:6px 12px;font-family:var(--caps);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);background:linear-gradient(90deg,rgba(62,92,46,.92),rgba(30,46,24,.85) 60%,rgba(20,28,16,.7));border-top:1px solid rgba(214,178,92,.45);border-bottom:1px solid rgba(214,178,92,.45)}
.rkgh small{font-family:var(--serif);font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:#d8c79a;text-align:right}
.rktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:7px}
.rktile{--rc:#4b9bff;position:relative;aspect-ratio:1;padding:4px;border-radius:5px;border:1px solid rgba(214,178,92,.3);border-bottom:3px solid var(--rc);background:radial-gradient(circle at 50% 42%,rgba(60,48,26,.6),rgba(10,8,5,.85));cursor:pointer;transition:transform .1s,border-color .12s,box-shadow .12s}
.rktile:hover,.rktile:focus-visible{border-color:var(--rc);transform:translateY(-2px);box-shadow:0 6px 16px -6px var(--rc)}
.rktile.on{border-color:#ffd877;box-shadow:0 0 0 2px #ffd87766,0 0 14px #ffb84a55}
.rktile.locked{cursor:help}.rktile.locked .rkimg{filter:grayscale(.85) brightness(.5)}
.rktile .rkimg{width:100%;height:100%}
.rktile .eqd{top:3px;left:3px}
.rklock{position:absolute;right:3px;bottom:3px;min-width:18px;padding:0 4px;border-radius:9px;font:700 11px/18px var(--caps);font-style:normal;text-align:center;color:#ffe9b8;background:rgba(0,0,0,.72);border:1px solid rgba(214,178,92,.5)}
.rkimg,.rkslotimg,.rktipimg,.rkehimg{display:grid;place-items:center}
.rkimg img,.rkslotimg img,.rktipimg img,.rkehimg img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.65))}
.rkleer{font-style:normal;font-size:22px;color:#c9a35a;opacity:.75}
/* Schwebender Platz: klein darüber, wo er sitzt (wie „Left / Right“), darunter das gerahmte Bild, darunter der Name des Teils – kein Kasten drumherum */
.rkslot2{--rc:rgba(214,178,92,.45);display:grid;justify-items:center;align-content:start;gap:3px;width:76px;text-align:center}
.rkslot2>small{font-size:12.5px;line-height:1.1;color:#eadbb4;text-shadow:0 1px 4px #000,0 0 6px rgba(0,0,0,.85);white-space:nowrap}
.rkslot2>b{font-size:11.5px;font-weight:600;line-height:1.15;color:var(--gold2);text-shadow:0 1px 4px #000,0 0 8px rgba(0,0,0,.9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.rkslotbtn{width:68px;height:68px;padding:3px;border-radius:5px;border:1px solid rgba(214,178,92,.55);border-bottom:3px solid var(--rc);background:radial-gradient(circle at 50% 42%,rgba(60,48,26,.75),rgba(10,8,5,.92));cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.5)}
.rkslot2.voll .rkslotbtn:hover{border-color:#ff9a7a}
.rkslot2.ziel .rkslotbtn{border-color:#ffd877;box-shadow:0 0 0 2px #ffd87766,0 6px 16px rgba(0,0,0,.6)}
.rkslot2.drop .rkslotbtn{border-color:#ffd877;background:rgba(255,216,119,.28)}
.rkslot2 .rkslotimg{width:100%;height:100%}
.rkslot2.blitz .rkslotbtn{animation:rkblitz .7s ease-out}
.rkscreen.ziehen .rkslot2 .rkslotbtn{outline:1px dashed rgba(255,216,119,.7);outline-offset:2px}
.rkslot2.gesperrt{opacity:.5}.rkslot2.gesperrt .rkslotbtn{border-style:dashed;box-shadow:none;background:rgba(0,0,0,.35)}
/* schmal (Handy hochkant): je Kategorie erst die angelegten Plätze, darunter die verfügbaren Teile im eigenen Rahmen */
@media (max-width:600px){
  .rkbuch{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .rkrahmen{display:none}
  .rkverf,.rkzu{grid-column:1;grid-row:auto}
  .rkzu{order:calc(var(--r) * 2)}.rkverf{order:calc(var(--r) * 2 + 1);margin-bottom:6px;background:linear-gradient(180deg,rgba(14,20,12,.78),rgba(8,11,7,.86));border:1px solid rgba(214,178,92,.55);border-radius:4px}
}
@keyframes rkblitz{0%{box-shadow:0 0 0 0 rgba(255,220,130,.95),inset 0 0 30px rgba(255,220,130,.7);border-color:#fff3c0}100%{box-shadow:0 0 0 14px rgba(255,220,130,0),inset 0 0 0 rgba(255,220,130,0)}}
.rkehren2{display:grid;grid-template-columns:repeat(5,42px);gap:6px;padding-left:2px}   /* schwebend unter den Plätzen, wie die „Traits“ */
.rkehr{aspect-ratio:1;padding:2px;border-radius:50%;border:1px solid rgba(214,178,92,.25);background:rgba(0,0,0,.3);cursor:help}
.rkehr .rkehimg{width:100%;height:100%}.rkehr:not(.got) .rkehimg{filter:grayscale(.95) brightness(.42)}.rkehr.got{border-color:#ffd877;box-shadow:0 0 10px #ffb84a44}
.rkehr>i{font-style:normal;font-size:18px}
/* Ultra selten (seit 17.10.2026, User: „ein ultra seltener Gegenstand, der besonders hervorgehoben werden muss – Haurons Fäuste“): glühender,
   pulsierender Rahmen in Feuerrot (Feldzug.RAR.ultra), auch im Platz, bei der Ehre und im Tooltip */
.rktile.ultra,.rkslot2.ultra .rkslotbtn,.rkehr.ultra.got{border-color:#ff4a1c;box-shadow:0 0 0 1px #ff4a1c,0 0 14px 2px rgba(255,90,28,.7),inset 0 0 16px rgba(255,74,28,.35);animation:rkultra 1.8s ease-in-out infinite}
.rktile.ultra{background:radial-gradient(circle at 50% 42%,rgba(120,36,12,.75),rgba(18,6,3,.92))}
.rktile.ultra.locked{animation:none;box-shadow:0 0 10px rgba(255,74,28,.35)}
.rkehr.ultra:not(.got){border-color:rgba(255,74,28,.55)}
.rktip.ultra{border-color:#ff4a1c;box-shadow:0 0 0 1px #ff4a1c,0 0 28px rgba(255,74,28,.6),0 12px 34px rgba(0,0,0,.7)}
.rktip.ultra .rar{color:#ff9a6a;text-shadow:0 0 8px rgba(255,74,28,.85);font-weight:700;letter-spacing:.04em}
@keyframes rkultra{50%{box-shadow:0 0 0 1px #ffb15c,0 0 24px 6px rgba(255,120,40,.85),inset 0 0 24px rgba(255,120,40,.5)}}
@media (prefers-reduced-motion:reduce){.rktile.ultra,.rkslot2.ultra .rkslotbtn,.rkehr.ultra.got{animation:none}}
.rkps{font-style:normal;color:#ffd877;text-shadow:0 0 8px rgba(255,200,80,.6)}
.rkstats .btn.prestige{display:block;width:100%;margin:0 0 9px;padding:7px 10px;font-size:14px;line-height:1.3;white-space:normal}
.rkreise{margin:8px 0 0;padding-top:7px;border-top:1px solid rgba(214,178,92,.3);font-size:14px;color:#e4d3a8;line-height:1.5}.rkkap{opacity:.88;font-size:13px}
/* Werte-Tafel (seit 12.10.2026, User: „das Stat-Feld kann man nicht so gut lesen“): fast deckender Grund statt durchscheinendem Himmel, größere,
   hellere Schrift, leichter Schatten unter den Zahlen */
.rkstats{grid-column:2;grid-row:1/3;justify-self:end;align-self:start;width:min(520px,100%);padding:12px 16px 12px;background:linear-gradient(180deg,rgba(12,17,10,.93),rgba(7,10,6,.95))}
.rkhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.rkhead b{font-family:var(--caps);font-size:21px;letter-spacing:.06em;color:var(--gold2)}.rkhead span{font-size:14px;color:#dcc690}
.rkbar{height:11px;border-radius:6px;background:rgba(0,0,0,.55);border:1px solid rgba(214,178,92,.4);overflow:hidden;margin:7px 0 5px}.rkbar i{display:block;height:100%;background:linear-gradient(90deg,#5d8a3a,#c8d870 60%,#f4dc99)}
.rknext{margin:0 0 9px;font-size:14px;color:#e4d3a8}
.rkwerte{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;border-top:1px solid rgba(214,178,92,.3);padding-top:8px}
.rkcol{display:grid;align-content:start;gap:3px}
.rkrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 8px;align-items:baseline;font-size:15px;line-height:1.36;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.rkrow span{color:#e2d2a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rkrow b{color:#fff6dc;text-align:right;white-space:nowrap}.rkrow em{font-style:normal;font-weight:700;font-size:14px;white-space:nowrap}
.rkrow.vor{background:rgba(255,236,170,.06)}
.rkrow .gut,.rkvt .gut{color:#7fdc6a}.rkrow .schlecht,.rkvt .schlecht{color:#ff6b5b}.rkrow .neutral,.rkvt .neutral{color:#c9b07a;font-weight:400}
.rkfuss{grid-column:1/-1;grid-row:3;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;pointer-events:none}
.rkfuss>*{pointer-events:auto}
.rkzurueck{min-width:200px}
.rkbereit{min-width:260px;display:inline-grid;justify-items:center;gap:0}.rkbereit span{font-size:22px;letter-spacing:.2em}.rkbereit small{font-family:var(--serif);font-size:12.5px;letter-spacing:.02em;text-transform:none;font-weight:400;color:#e8d6ae}
.rktip{--rc:#4b9bff;position:fixed;z-index:60;left:0;top:0;zoom:var(--rkz,1);width:min(350px,calc(100vw - 20px));padding:12px 14px 10px;border-radius:6px;border:1px solid var(--rc);background:linear-gradient(180deg,rgba(18,24,15,.97),rgba(9,12,8,.98));box-shadow:0 12px 34px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,160,.12);color:#f1e3c3;pointer-events:none;font-size:14px;line-height:1.35}
.rktip[hidden]{display:none}
.rktop{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center}
.rktipimg{width:64px;height:64px}
.rktop b{display:block;font-family:var(--caps);font-size:17px;letter-spacing:.04em;color:var(--rc);line-height:1.2}
.rktop .rar{display:block;margin-top:2px}
.rkdesc{margin:8px 0 6px;font-style:italic;color:#e8d6ae;font-size:13.5px}
.rkvh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--caps);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a35a;border-top:1px solid rgba(224,176,74,.25);padding-top:7px;margin-top:4px}
.rkvh span{font-family:var(--serif);text-transform:none;letter-spacing:0;font-size:12.5px;color:#b9a27a;text-align:right}
.rkvt{width:100%;border-collapse:collapse;margin:4px 0 2px;font-size:13.5px}
.rkvt td{padding:2px 0;vertical-align:baseline}
.rkvt td:nth-child(2){text-align:right;color:#fff3cf;font-weight:600;padding-left:10px;white-space:nowrap}
.rkvt td:nth-child(3){text-align:right;padding-left:10px;white-space:nowrap;font-weight:700;min-width:4.2em}
.rkstate{margin:8px 0 0;font-size:12.5px;color:#c9b07a;border-top:1px solid rgba(224,176,74,.18);padding-top:6px}
.rkstate.on{color:#ffd877}.rkstate.zu{color:#ff9a7a}
@media (max-width:900px){
  .rkshade{background:linear-gradient(0deg,rgba(6,8,5,.85) 40%,rgba(6,8,5,.2) 62%,rgba(6,8,5,0) 70%)}
  .rkui{overflow:auto;pointer-events:auto;grid-template-columns:1fr;grid-template-rows:auto;padding:10px 10px 0;gap:10px;align-content:start}
  .rktitel{grid-column:1;grid-row:auto;justify-content:center;text-align:center}.rktitel h2{font-size:22px}
  .rkkar{position:relative;left:auto;bottom:auto;transform:none;grid-column:1;grid-row:auto;justify-self:center;margin-top:30vh;order:1;width:min(360px,100%)}   /* schmal: im Fluss unter dem Hobbit */
  .rkstats{grid-column:1;grid-row:auto;width:100%;justify-self:stretch;order:2}
  .rkrechts{grid-column:1;grid-row:auto;width:100%;justify-self:stretch;justify-items:stretch;max-height:none;order:2}.rklobbybox{width:auto}
  .rkbuch{order:3}.rkfuss{order:4}
  .rkbuch{--lw:1fr;grid-column:1;grid-row:auto;max-height:none;overflow:visible}
  .rkfuss{position:sticky;bottom:0;grid-column:1;grid-row:auto;padding:8px 0 10px;background:linear-gradient(0deg,rgba(6,8,5,.95),rgba(6,8,5,0))}
  .rkzurueck,.rkbereit{min-width:0;flex:1}
}

/* ---------- Mehrspieler (seit 09.10.2026): Teamwahl, Team-Liste im HUD, Rüstkammer als Wartesaal, Bilanz der Reise, Zurück in die Reise ---------- */
/* Teamwahl wie in Counter-Strike: zwei Spalten, Bereit-Knopf; liegt über dem Spielbild (#arena) */
.teamdlg{position:absolute;z-index:30}
.teamdlg .frame{width:min(820px,100%)}
.tdteams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.tdteam{--tc:#5fd58a;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:10px 12px 12px;border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);border-top:4px solid var(--tc);border-radius:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 14%,rgba(20,14,8,.9)),rgba(12,9,6,.92))}
.tdteam.mine{box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 60%,transparent),0 0 22px color-mix(in srgb,var(--tc) 30%,transparent)}
.tdteam h3{margin:0;font-family:var(--caps);font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--tc);text-align:center}
.tdteam ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;align-content:start;min-height:120px}
.tdteam li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:5px 8px;border-radius:3px;background:rgba(0,0,0,.3);border:1px solid rgba(214,178,92,.18)}
.tdteam li i{font-style:normal;color:var(--muted);text-align:center}.tdteam li.ok i{color:#7fdc6a;font-weight:700}
.tdteam li b{font-weight:600;color:#f3e2bc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tdteam li small{color:var(--muted);font-size:12px}
.tdteam li.me{border-color:var(--gold3);background:rgba(120,90,30,.2)}
.tdteam li.leer{display:block;text-align:center;color:var(--muted);font-style:italic;background:none;border-style:dashed}
.tdteam .ebtn{justify-self:center}
.tdvs{align-self:center;font-family:var(--deco);font-size:20px;color:var(--gold);text-shadow:0 2px 8px #000}
.tdinfo{margin:0;text-align:center;color:var(--muted);font-size:14.5px}
.tdrow{display:flex;justify-content:center}
#tdReady.an,.rkbereit.an{background:linear-gradient(180deg,#2f6a2a,#173c14);border-color:#7fdc6a}
@media (max-width:640px){.tdteams{grid-template-columns:1fr}.tdvs{text-align:center}.tdteam ul{min-height:0}}
/* HUD: Mitglieder eines Teams (bzw. die Gefährten auf der Reise) unter dem großen Balken */
.tlist{display:grid;gap:3px;margin-top:2px}
.hp.r .tlist{justify-items:end}
.tlist span{--c:#f3e2bc;display:grid;grid-template-columns:auto 70px;align-items:center;gap:6px;font-family:var(--caps);font-size:12px;letter-spacing:.06em;color:var(--c);text-shadow:0 0 3px #000,0 1px 0 #000;white-space:nowrap}
.hp.r .tlist span{grid-template-columns:70px auto}.hp.r .tlist span b{order:2}
.tlist b{font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.tlist i{display:block;height:6px;background:rgba(0,0,0,.6);border:1px solid rgba(214,178,92,.4);border-radius:2px;overflow:hidden}
.tlist s{display:block;height:100%;background:var(--c);text-decoration:none;transition:width .18s}
.tlist em{grid-column:1/-1;font-style:italic;font-family:var(--serif);font-size:11.5px;letter-spacing:0;color:var(--muted);margin-top:-3px}
.tlist span.ko{opacity:.55}.tlist span.me b{text-decoration:underline;text-underline-offset:3px}
/* Rüstkammer als Wartesaal: Gefährten und Startkapitel in der Fußleiste */
@media (max-width:900px){.rkfuss{flex-wrap:wrap}}
.coophint{margin:-4px 0 0;text-align:center;color:var(--muted);font-size:14px}
/* Bilanz nach dem Lauf */
.laufdlg{z-index:62}
.laufdlg .frame{width:min(760px,100%);position:relative;overflow-x:hidden}
.lfsub{margin:-6px 0 0;text-align:center;font-style:italic;color:#f1e3c2}
.lfstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.lfstats span{display:grid;gap:2px;justify-items:center;padding:8px 6px;border:1px solid rgba(214,178,92,.3);border-radius:3px;background:rgba(0,0,0,.3);font-size:12.5px;color:var(--muted);text-align:center}
.lfstats b{font-family:var(--caps);font-size:17px;color:var(--gold2)}
.lfgold{margin:0;text-align:center;font-family:var(--caps);letter-spacing:.06em;color:var(--gold2)}
.lfneu{display:grid;gap:10px}
.lfneu h3{margin:4px 0 6px;font-family:var(--caps);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lfrow{--rc:var(--gold3);display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;margin-bottom:5px;border:1px solid rgba(214,178,92,.25);border-left:4px solid var(--rc);border-radius:3px;background:rgba(0,0,0,.28);animation:rise .45s ease-out both}
.lfico{width:52px;height:52px;display:grid;place-items:center;font-size:28px}.lfico img,.lfico canvas{width:52px;height:52px;object-fit:contain}
.lfrow small{display:block;font-family:var(--caps);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a35a}.lfrow b{display:block;color:#fff3cf;font-size:16px}.lfrow span{display:block;font-size:13px;color:var(--muted)}
.lfnichts{margin:0;text-align:center;font-style:italic;color:var(--muted)}
.lfspark{position:absolute;top:-6px;width:8px;height:8px;transform:rotate(45deg);background:var(--gold2);box-shadow:0 0 8px #ffd877;pointer-events:none;animation:lffall 2.2s ease-in forwards}
@keyframes lffall{to{transform:translateY(420px) rotate(400deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.lfrow{animation:none}.lfspark{display:none}}
/* Reise-EP des Laufs (seit 18.10.2026, kloppe3d.js fzBalken): Balken läuft durch, voll = eine Reise-Stufe; neue Teile erscheinen leuchtend darunter */
.lfxp{display:grid;gap:6px;padding:10px 12px;border:1px solid rgba(214,178,92,.35);border-radius:3px;background:rgba(0,0,0,.32)}
.lfxpkopf{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--caps);letter-spacing:.08em;color:var(--gold)}
.lfxpkopf b{font-size:22px;color:var(--gold2);text-shadow:0 0 10px rgba(255,210,110,.5)}.lfxpzahl{font-size:13px;color:var(--muted)}
.lfxpbar{position:relative;height:16px;border-radius:8px;background:rgba(0,0,0,.55);border:1px solid rgba(214,178,92,.45);overflow:hidden}
.lfxpbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:linear-gradient(90deg,#4b9bff,#8fd0ff 70%,#e8f6ff);box-shadow:0 0 10px rgba(110,180,255,.7)}
.lfxp.voll .lfxpbar{animation:lfvoll .9s ease-out}
@keyframes lfvoll{0%{box-shadow:0 0 0 0 rgba(140,200,255,0)}25%{box-shadow:0 0 18px 6px rgba(160,215,255,.9);filter:brightness(1.6)}100%{box-shadow:0 0 0 0 rgba(140,200,255,0)}}
.lfxpneu{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.lfxpneu:empty{display:none}
.lfxpkarte{--rc:#4b9bff;display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--rc);border-radius:3px;background:rgba(0,0,0,.35);opacity:0;transform:scale(.85)}
.lfxpkarte img{width:52px;height:52px;object-fit:contain}
.lfxpkarte.an{animation:lfkarte 1.6s ease-out forwards}
@keyframes lfkarte{0%{opacity:0;transform:scale(.85);box-shadow:0 0 0 0 transparent}20%{opacity:1;transform:scale(1.04);box-shadow:0 0 22px 6px var(--rc)}60%{transform:scale(1);box-shadow:0 0 14px 2px var(--rc)}100%{opacity:1;transform:scale(1);box-shadow:0 0 8px 0 var(--rc)}}
.lfxpkarte.ultra.an{animation:lfkarte 1.6s ease-out forwards,rkultra 1.8s ease-in-out 1.6s infinite}
.lfxpkarte small{display:block;font-family:var(--caps);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c9a35a}.lfxpkarte b{display:block;color:#fff3cf;font-size:15px}.lfxpkarte span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--muted)}
.lfxpkarte img{width:44px;height:44px}.lfxpkarte{grid-template-columns:44px minmax(0,1fr);padding:5px 7px}
@media (prefers-reduced-motion:reduce){.lfxpkarte,.lfxpkarte.an{animation:none;opacity:1;transform:none;box-shadow:0 0 8px 0 var(--rc)}.lfxp.voll .lfxpbar{animation:none}}
/* Hauptmenü: zurück in die laufende Reise nach einem Absturz */
.ebtn.rejoin{display:grid;justify-items:center;gap:2px;background:linear-gradient(180deg,#2f6a2a,#173c14);border-color:#7fdc6a;animation:rejoinpuls 2s ease-in-out infinite}
.ebtn.rejoin::before,.ebtn.rejoin::after{display:none}
.ebtn.rejoin small{font-family:var(--serif);font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;color:#dff0d0}
@keyframes rejoinpuls{50%{box-shadow:0 0 22px rgba(127,220,106,.45)}}
#introName.grp b{font-size:clamp(28px,4.6vw,62px)} #introName.grp small{max-width:min(70vw,900px);white-space:normal;line-height:1.35}   /* Intro einer ganzen Gruppe (Team) */
/* Freunde (seit 09.10.2026): Profilbild links (Kopf mit dem letzten Aussehen), online farbig, offline ausgegraut; Zuschauen, Entfernen */
.lblist li:has(.lbav){grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"a n b" "a s b"}
.lbav{grid-area:a;width:40px;height:40px;border-radius:50%;object-fit:cover;background:radial-gradient(circle at 50% 40%,#4a3820,#1a120a);border:1px solid var(--gold3);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.lbav:not([src]){visibility:hidden}
.lbfr li.on .lbav{border-color:#7fdc6a;box-shadow:0 0 0 2px rgba(127,220,106,.35),0 2px 6px rgba(0,0,0,.5)}
.lbfr li.off{opacity:.6}.lbfr li.off .lbav{filter:grayscale(1) brightness(.7)}.lbfr li.off .lbname{color:var(--muted)}
.lbfr li.on .lbname::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#7fdc6a;box-shadow:0 0 6px #7fdc6a;vertical-align:middle}
.lbbtns .lbdel{padding:6px 7px;background:rgba(0,0,0,.3);border-color:rgba(140,106,42,.6);color:var(--muted)}
.lbbtns .lbdel:hover{color:#ff9a7a;border-color:#ff9a7a}
.lbfnone{margin:2px 0 6px}
.lbfriends{display:grid;gap:6px;margin-bottom:6px}
.lbfreq p{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}.lbfreq .lbav{width:48px;height:48px;flex:none}
/* Statistik nach dem Kapitel (Reise): links im Bild, während getanzt wird */
#coStat{position:absolute;left:18px;top:24%;width:min(380px,42%);padding:10px 14px 12px;border:1px solid var(--gold3);border-radius:4px;background:linear-gradient(180deg,rgba(30,21,12,.88),rgba(12,9,6,.9));box-shadow:0 12px 30px rgba(0,0,0,.55);animation:rise .45s ease-out both;pointer-events:none}
#coStat h3{margin:0 0 6px;display:grid;font-family:var(--caps);font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}#coStat h3 small{font-family:var(--serif);font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400}
#coStat table{width:100%;border-collapse:collapse;font-size:14.5px}
#coStat th{font-family:var(--caps);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c9a35a;text-align:right;padding:3px 4px;border-bottom:1px solid rgba(214,178,92,.3)}#coStat th:first-child{text-align:left}
#coStat td{padding:4px;text-align:right;color:#f3e2bc;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(214,178,92,.12)}#coStat td:first-child{text-align:left;font-family:var(--caps);font-weight:700;letter-spacing:.04em;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
#coStat td.top{color:#ffe08a;font-weight:700}#coStat td i{font-style:normal;color:var(--gold2)}
#coStat tr.me td{background:rgba(120,90,30,.18)}
@media (max-width:700px){#coStat{top:auto;bottom:150px;width:calc(100% - 36px)}}

/* Update-Hinweis (seit 10.10.2026, 3d.html #updHinweis): neue Fassung auf dem Server fertig – gut sichtbar unten rechts, über allem.
   Am Handy (grober Zeiger) oben rechts, damit er nicht auf Stick und Angriffsknöpfen liegt. */
.upd-hinweis{position:fixed;right:18px;bottom:18px;z-index:9500;width:min(360px,calc(100vw - 36px));box-sizing:border-box;padding:14px 16px 14px;background:var(--panel);border:2px solid var(--gold);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 0 4px rgba(214,178,92,.18);color:var(--ink);font-family:var(--serif);animation:updRein .45s cubic-bezier(.2,.9,.3,1.2)}
.upd-hinweis[hidden],.upd-pille[hidden]{display:none}
.upd-kopf{font-family:var(--caps);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);margin-bottom:6px}
.upd-kopf::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember);vertical-align:1px;animation:updPuls 1.6s ease-in-out infinite}
.upd-hinweis p{margin:0 0 12px;font-size:15px;line-height:1.35;color:var(--ink)}
.upd-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.upd-pille{position:fixed;right:18px;bottom:18px;z-index:9500;font-family:var(--caps);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:linear-gradient(var(--gold2),var(--gold));border:1px solid var(--gold3);border-radius:999px;padding:8px 14px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.5)}
@keyframes updRein{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes updPuls{50%{opacity:.35}}
@media (pointer:coarse){.upd-hinweis,.upd-pille{bottom:auto;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}.upd-hinweis{padding:10px 12px}.upd-hinweis p{font-size:13px;margin-bottom:8px}}

/* Aura (seit 14.10.2026): +Aura/−Aura während Intro und Siegestanz, Liste der Stimmen, schwebende +1/−1 über dem Kopf */
/* seit 16.10.2026 (User): frei schwebend unten in der Mitte, ohne Kasten und Überschrift – nur −Aura / +Aura (bei mehreren Bewerteten der Name dazwischen) */
#auraBar{position:absolute;left:50%;bottom:clamp(90px,14vh,150px);transform:translateX(-50%);z-index:7;display:grid;gap:8px;justify-items:center;padding:0 0 8px;max-width:min(420px,94vw)}
#auraBar .arow{display:flex;align-items:center;justify-content:center;gap:12px}
#auraBar .aname{font-family:var(--caps);font-size:14px;letter-spacing:.06em;text-align:center;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#auraBar button{font-family:var(--caps);font-size:17px;font-weight:700;letter-spacing:.05em;padding:9px 18px;border-radius:3px;cursor:pointer;touch-action:manipulation;user-select:none;box-shadow:0 6px 18px rgba(0,0,0,.55)}
#auraBar .aplus{color:#fff2c0;background:linear-gradient(180deg,#3d6a2a,#1f3a14);border:1px solid #9fdc6a}
#auraBar .aminus{color:#ffd8d0;background:linear-gradient(180deg,#6a2a22,#3a1410);border:1px solid #e07a62}
#auraBar button:active{transform:scale(.94)}
#auraBar::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:2px;background:var(--gold2);box-shadow:0 1px 3px #000}
#auraBar.cd::after{animation:auraCd .5s linear}
#auraBar.cd button{opacity:.6}
@keyframes auraCd{from{width:100%}to{width:0}}
#auraFeed{position:absolute;right:12px;top:120px;display:grid;gap:4px;justify-items:end;pointer-events:none;z-index:6}
#auraFeed .afeed{font-family:var(--serif);font-size:14px;color:#f1e3c2;background:rgba(10,8,5,.72);border-left:3px solid #9fdc6a;padding:3px 8px;text-shadow:0 1px 2px #000;transition:opacity .8s}
#auraFeed .afeed.minus{border-left-color:#e07a62}
#auraFeed .afeed i{font-style:normal;font-weight:700;color:#bff08a}
#auraFeed .afeed.minus i{color:#ff9c86}
#auraFeed .afeed.weg{opacity:0}
.apop{position:absolute;left:0;top:0;pointer-events:none;font-family:var(--caps);font-weight:700;font-size:clamp(16px,1.8vw,24px);letter-spacing:.04em;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.7);white-space:nowrap;z-index:8}
.apop.plus{color:#c8ff8a}
.apop.minus{color:#ff8a72}
/* jedes +Aura ploppt auf: kurz groß und leuchtend, dann normal (seit 15.10.2026, User); der Knopf „+ Aura“ ebenso bei jedem Druck */
.apop span{display:inline-block;transform-origin:50% 80%}
.apop.plus span{animation:apopPlus .6s cubic-bezier(.2,1.5,.4,1) both}
.apop.minus span{animation:apopMinus .4s ease-out both}
@keyframes apopPlus{0%{transform:scale(.4);text-shadow:0 2px 0 #000}30%{transform:scale(1.8);text-shadow:0 2px 0 #000,0 0 14px #eaff9a,0 0 30px #ffd84a,0 0 48px rgba(255,200,60,.8)}100%{transform:scale(1.1);text-shadow:0 2px 0 #000,0 0 10px rgba(220,255,140,.7)}}
@keyframes apopMinus{0%{transform:scale(1.3)}100%{transform:scale(1)}}
#auraBar .aplus.pop{animation:aplusPop .45s ease-out}
@keyframes aplusPop{0%{transform:scale(1)}30%{transform:scale(1.22);box-shadow:0 0 16px 4px rgba(230,255,140,.85);filter:brightness(1.45)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(230,255,140,0);filter:none}}
@media (prefers-reduced-motion:reduce){.apop span,#auraBar .aplus.pop{animation:none}}
@media (max-width:600px){#auraBar{bottom:150px}#auraBar button{font-size:14px;padding:9px 12px}#auraFeed{top:96px;right:6px}#auraFeed .afeed{font-size:12px}}
/* Aura-Wert im Hauptmenü, Sterne neben dem Namen, Zurücksetzen im Hobbit-Pass, Aura-Sieger in der Bilanz (seit 14.10.2026) */
/* seit 18.10.2026 (User: „Aura-Zähler müssen grün leuchten, auch in der Bestenliste“): grünes Leuchten, negative Aura leuchtet rot */
.aurachip i{font-style:normal;color:#bff08a;margin-right:6px;font-size:1.05em;text-shadow:0 0 6px rgba(140,255,90,.9),0 0 14px rgba(110,240,70,.6)}
.aurachip b{color:#d9ffb0;text-shadow:0 0 6px rgba(140,255,90,.85),0 0 16px rgba(110,240,70,.5)}
.aurachip.neg i,.aurachip.neg b{color:#ff9c86;text-shadow:0 0 6px rgba(255,110,80,.85),0 0 14px rgba(255,80,50,.5)}
.stars{color:#ffd76a;text-shadow:0 0 6px rgba(255,190,60,.55);letter-spacing:.06em;margin-left:4px;font-style:normal}
.btn.prestige{margin-top:6px;background:linear-gradient(180deg,#7a5a15,#3c2a08);border:1px solid #f0c860;color:#fff1c0;font-weight:700}
.aurainfo{color:#d9ffb0;text-shadow:0 0 6px rgba(140,255,90,.7)}
/* Ultra selten in der Bilanz und im Banner „Ehre erhalten“ (seit 17.10.2026: Haurons Fäuste) */
.lfrow.ultra{border-color:#ff4a1c;background:linear-gradient(90deg,rgba(120,30,8,.55),rgba(0,0,0,.3));box-shadow:0 0 18px rgba(255,74,28,.45);animation:rise .45s ease-out both,rkultra 1.8s ease-in-out .45s infinite}
.lfrow.ultra small{color:#ff9a6a}.lfrow.ultra b{color:#ffe2c8;text-shadow:0 0 10px rgba(255,90,28,.8)}
body.epic .lvlbox.ultra{border-color:#ff4a1c;box-shadow:0 0 0 1px #ff4a1c,0 0 60px rgba(255,74,28,.7);animation:rkultra 1.8s ease-in-out infinite}
.lvlbox.ultra small{color:#ff9a6a;font-weight:700}
/* Punkte des Teams in der Bilanz (seit 17.10.2026) */
.lfpunkte{margin:10px auto 4px;max-width:520px;text-align:center;padding:9px 14px;border:1px solid rgba(214,178,92,.45);border-radius:3px;background:radial-gradient(120% 120% at 50% 0%,rgba(70,50,20,.6),rgba(0,0,0,.35))}
.lfpunkte small{display:block;font-family:var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-size:12px}
.lfpunkte>b{display:block;font-family:var(--deco);font-size:34px;line-height:1.15;color:#ffe9a8;text-shadow:0 0 14px rgba(255,200,80,.45)}
.lfpunkte ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px;text-align:left}
.lfpunkte li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;font-size:14px;color:#e8dcc0;align-items:baseline}
.lfpunkte li i{font-style:normal;color:var(--muted);font-size:13px}.lfpunkte li em{font-style:normal;font-weight:700;color:#bff08a;min-width:64px;text-align:right}.lfpunkte li em.neg{color:#ff9c86}
.lfbhint{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
/* Bestenliste (seit 17.10.2026): Platz, Punkte mit Kurzbilanz, darunter das Team */
.bestendlg{z-index:63}
.bestendlg .frame{width:min(760px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.blliste{overflow-y:auto;min-height:80px;margin:4px 0 10px;padding-right:4px}
.blliste ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.blliste li{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:'p k' 'p t';gap:2px 10px;align-items:center;padding:7px 10px;border:1px solid rgba(214,178,92,.25);border-radius:3px;background:rgba(0,0,0,.3)}
.blliste li.top1{border-color:#ffd877;background:linear-gradient(90deg,rgba(110,80,20,.5),rgba(0,0,0,.3))}.blliste li.top2{border-color:#d8dde3}.blliste li.top3{border-color:#d08a4a}
.blplatz{grid-area:p;font-family:var(--deco);font-size:24px;color:var(--gold2);text-align:center}
.blkopf{grid-area:k;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}.blkopf b{font-family:var(--caps);font-size:19px;color:#ffe9a8}.blkopf span{font-size:13px;color:var(--muted)}
.blteam{grid-area:t;display:flex;flex-wrap:wrap;gap:4px 6px}
.blhob{display:inline-grid;padding:2px 7px;border-radius:2px;background:rgba(214,178,92,.12);border:1px solid rgba(214,178,92,.25);font-size:13.5px;color:#fff1cf;line-height:1.25}
.blhob.gae{background:rgba(127,220,106,.1);border-color:rgba(127,220,106,.3)}
.blhob i{font-style:normal;color:#ffd877}.blhob small{font-size:11px;color:var(--muted)}
.blleer{text-align:center;color:var(--muted);margin:16px 0}
.blzu{align-self:center}
/* Aura-Bestenliste (seit 18.10.2026, Klick auf die Aura im Hauptmenü): Platz · Profilbild · Name und Stufe · Aura */
.auradlg .frame{width:min(560px,100%)}
.auradlg .blliste li{grid-template-columns:40px 44px minmax(0,1fr) auto;grid-template-areas:none;gap:0 12px}
.auradlg .blplatz,.auradlg .blkopf{grid-area:auto}
.auradlg .blkopf{flex-direction:column;gap:0}.auradlg .blkopf b i{font-style:normal;color:#ffd877;font-size:15px}
.auabild{width:44px;height:44px;border-radius:3px;border:1px solid var(--gold3);background:#2a1f14;object-fit:cover}
.auawert{font-family:var(--caps);font-size:20px;color:#d9ffb0;white-space:nowrap;text-shadow:0 0 6px rgba(140,255,90,.85),0 0 16px rgba(110,240,70,.5)}.auawert i{font-style:normal;color:#bff08a;text-shadow:0 0 6px rgba(140,255,90,.9),0 0 14px rgba(110,240,70,.6)}   /* grün leuchtend wie im Hauptmenü */
.auradlg li.ich{border-color:#7fdc6a;box-shadow:inset 0 0 0 1px rgba(127,220,106,.35)}
.lfaura{margin:10px auto 4px;max-width:520px;text-align:center;padding:8px 12px;border:1px solid rgba(191,240,138,.35);background:rgba(20,30,12,.45)}
.lfaura small{display:block;font-family:var(--caps);letter-spacing:.2em;text-transform:uppercase;color:#bff08a;font-size:12px}
.lfaura b{display:block;font-family:var(--deco);font-size:26px;color:#f6dc96}
.lfaura span{display:block;color:#d9ffb0}
.lfaura p{margin:6px 0 0;font-size:14px;color:#e8dcc0}
.lfaura p i{font-style:normal;color:#bff08a}
.lfaura p i.neg{color:#ff9c86}

/* ================= Handy und Tablet (body.mobil, seit 17.10.2026) =================
   User: „Das Spiel sollte auch auf quadratischen Displays funktionieren. Für alle mobilen Geräte müssen wir überflüssige kleine Texte weglassen oder in
   Dropdowns verpacken. Die Stats im Koop werden eingeklappt. Für die Items in der Rüstungskammer muss man immer erst einen Slot auswählen … Dieses Update
   sollte nur Wirkungen für mobile User haben.“ – body.mobil setzt 3d.html (dieselbe Erkennung wie kloppe3d.js PHONE); ohne die Klasse gilt nichts hiervon.
   Quer, hochkant und quadratisch: (orientation) – quadratisch zählt als hochkant. Sichere Ränder (Notch) über env(safe-area-inset-*). */
.mtogs{display:none}
body.mobil{--mrand:max(8px,env(safe-area-inset-left));--mrandr:max(8px,env(safe-area-inset-right));-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* kein „Herunterziehen = neu laden“ mitten im Kampf, kein Markieren/Menü bei langem Druck */
body.mobil input,body.mobil select,body.mobil textarea{-webkit-user-select:text;user-select:text}
body.mobil button,body.mobil .ebtn,body.mobil a{touch-action:manipulation}   /* kein Doppeltipp-Zoom, Tippen ohne Verzögerung */

/* Titel: nur Logo, Anmeldung und „Betreten“ */
body.mobil .titlewrap{gap:10px;width:min(560px,100%)}
body.mobil .tagline,body.mobil #soundHint,body.mobil #loginInfo,body.mobil #loginToCode{display:none}
body.mobil #title .logo{font-size:clamp(28px,min(8vw,9dvh),54px)}
body.mobil .codebox{gap:8px;padding:6px 10px}
body.mobil #loginForm{gap:7px}
body.mobil .loginseg{flex-wrap:nowrap;gap:5px}
body.mobil .loginseg button{font-size:10.5px;letter-spacing:.06em;padding:7px 8px}
body.mobil #loginForm input[type=text],body.mobil #loginForm input[type=password]{font-size:15px;padding:8px 10px}
body.mobil .toggle.keep{font-size:13px;letter-spacing:.12em}
body.mobil #loginGo{padding-block:9px}
body.mobil #enter{padding-block:12px;font-size:17px}
body.mobil #title{padding:max(8px,env(safe-area-inset-top)) var(--mrandr) max(8px,env(safe-area-inset-bottom)) var(--mrand)}
body.mobil .msgline:empty{display:none}
@media (orientation:landscape) and (max-height:500px){   /* Handy quer: Anmeldung links, „Betreten“ darunter ohne Scrollen */
  body.mobil .titlewrap{gap:6px}
  body.mobil #title .logo{font-size:clamp(26px,8dvh,44px)}
  body.mobil #loginForm input[type=text],body.mobil #loginForm input[type=password]{padding-block:6px}
  body.mobil #loginForm{gap:6px}
}

/* Optionen, Rast, Basar: kompakter (Beschriftungen kleiner, Knöpfe in zwei Spalten) */
body.mobil .optrow{grid-template-columns:118px 1fr}
body.mobil .optrow>span{font-size:10.5px;letter-spacing:.1em}
body.mobil .seg button{padding:7px 9px;font-size:11px;letter-spacing:.08em}
body.mobil .pausegrid{grid-template-columns:1fr 1fr;gap:7px}
body.mobil .pausegrid .ebtn{font-size:13px;letter-spacing:.06em;padding:10px 8px;min-height:42px;white-space:normal}
body.mobil #pResume{grid-column:1/-1}
body.mobil.epic .shop{--top:6px;padding:6px var(--mrandr) 6px var(--mrand)}
body.mobil.epic .shophead{gap:6px 10px}
body.mobil.epic .shophead h2{font-size:18px;letter-spacing:.1em}
body.mobil .shophead .gold span{display:none}
body.mobil.epic .tabs{gap:5px}
body.mobil.epic .tabs button{font-size:11px;letter-spacing:.06em;padding:7px 9px}
body.mobil.epic .blurb,body.mobil .passinfo .note2:last-child{display:none}   /* Kisten-Beschreibung, EP-Tabelle des Passes */

/* Hauptmenü: Kopfzeile ohne Beschriftungen, Menü in zwei Spalten, Name und Karte ohne Überschrift (Platzhalter reichen), kein Fußtext */
body.mobil #hub{grid-template-rows:auto minmax(0,1fr);padding:max(8px,env(safe-area-inset-top)) var(--mrandr) max(8px,env(safe-area-inset-bottom)) var(--mrand)}
body.mobil .hubtop{gap:8px}
body.mobil .hubtop .logo{font-size:clamp(20px,4.6vw,30px)}
body.mobil .hubtop .goldchip{padding:6px 10px;gap:6px}
body.mobil .hubtop .goldchip span{display:none}
body.mobil .hubtop .goldchip b{font-size:15px}
body.mobil .hubtop .lvlchip{font-size:13px}
body.mobil .hubfoot,body.mobil .pedestal .hint{display:none}
body.mobil .hubmain{max-width:none;min-height:0;padding-block:6px;gap:12px;grid-template-columns:minmax(0,560px) auto;justify-content:space-between;align-items:center}
body.mobil .hubmenu{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;padding:8px 10px;align-content:start;max-height:100%;overflow:auto;min-height:0}
body.mobil .hubmenu .namefield{font-size:0;letter-spacing:0;gap:0}
body.mobil .hubmenu .namefield .stars{font-size:12px}
body.mobil .hubmenu .namefield input,body.mobil .hubmenu .namefield select{font-size:15px;min-height:40px;padding-block:6px}
body.mobil .hubmenu #nameDice{font-size:16px;min-width:40px}
body.mobil .hubmenu .ebtn{font-size:13px;letter-spacing:.06em;padding:10px 8px;min-height:42px;white-space:normal}
body.mobil .hubmenu .ebtn.big{grid-column:1/-1;font-size:16px;padding:11px 8px}
body.mobil .hubmenu .rejoin small{display:none}
body.mobil .pedestal canvas{width:min(220px,30vw,48dvh)}
body.mobil .pedestal::before{bottom:10px}
@media (orientation:portrait){
  body.mobil .hubmain{grid-template-columns:minmax(0,1fr);align-content:start;justify-content:stretch}
  body.mobil .pedestal{order:-1}
  body.mobil .pedestal canvas{width:min(170px,42vw,26dvh)}
}
@media (orientation:portrait) and (max-width:600px){body.mobil .hubmenu .namefield{grid-column:1/-1}body.mobil .hubmenu{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}   /* schmal: Name und Karte je über die ganze Breite */

/* Dialoge: ohne Untertitel und Erklärtexte, Knöpfe immer sichtbar */
body.mobil .dialog{padding:max(6px,env(safe-area-inset-top)) var(--mrandr) max(6px,env(safe-area-inset-bottom)) var(--mrand)}
body.mobil .dialog .frame{gap:10px;padding:8px 12px;max-height:calc(100dvh - 12px)}
body.mobil .dialog h2{font-size:19px;letter-spacing:.16em}
body.mobil .dialog .rule,body.mobil .coophint,body.mobil .opthint,body.mobil .optrow small,body.mobil .keys,body.mobil .credits,body.mobil .botpick small,body.mobil .lfsub,body.mobil .lfbhint,body.mobil .tdinfo{display:none}
body.mobil .botpick{padding:6px 14px 6px 8px;gap:12px}body.mobil .botpick .botkopf{width:48px;height:48px}   /* Handy: Bot-Auswahl kompakt, Kopf kleiner */
body.mobil .optrow:has(#optCtl),body.mobil .optrow:has(#optSwap),body.mobil .optrow:has(#optSens){display:none}   /* Maus und Kamera: am Handy ohne Bedeutung */
body.mobil .optrow{grid-template-columns:104px 1fr;gap:8px;font-size:15px}
body.mobil .coopchs{margin:0;gap:6px}
body.mobil .coopch{padding:7px 9px;border-radius:7px}
body.mobil .coopch span,body.mobil .coopch em{display:none}   /* nur Kapitel und Name */
body.mobil .coopch b{font-size:14px}
body.mobil .cooprow{position:sticky;bottom:-8px;z-index:1;margin:0 -12px -8px;padding:8px 12px;background:linear-gradient(0deg,rgba(20,14,8,.98) 70%,rgba(20,14,8,0))}
body.mobil .cooprow .ebtn{width:auto;flex:1 1 200px}
body.mobil .lfrow span{display:none}
body.mobil .lfstats span{padding:5px 4px;font-size:11.5px}
body.mobil .lfpunkte>b{font-size:26px}
body.mobil .lfpunkte li i{display:none}
@media (orientation:portrait){body.mobil .coopchs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Kampf: Verbindung nur bei Störung, „online“ im Menü, auf der Reise ohne Kapitelzeile und ohne leeren Partner-Balken; die Gefährten-Liste und die
   Kapitel-Statistik sind eingeklappt (antippen klappt auf); die Leiste nur mit den Fähigkeiten (Nahkampf und Ring haben eigene Knöpfe) */
body.mobil #chip.on,body.mobil .lobbychip.ingame{display:none}
body.mobil>.lobbychip{z-index:39;right:var(--mrandr);bottom:max(8px,env(safe-area-inset-bottom));padding:7px 11px;font-size:11px}   /* unter offenen Dialogen (sonst lag „online“ auf deren Knöpfen) */
body.mobil.mdcoop #w0{display:none}
body.mobil.mdcoop .hp.r.leer .nm,body.mobil.mdcoop .hp.r.leer .bar{display:none}
body.mobil .hp{top:max(8px,env(safe-area-inset-top));width:min(34%,300px)}
body.mobil .hp.l{left:var(--mrand)} body.mobil .hp.r{right:var(--mrandr)}
body.mobil .hp.r .tlist{display:none}
body.mobil .hp.r.liste{pointer-events:auto;cursor:pointer}
body.mobil .hp.r.liste .nm::after{content:" ▾";font-size:.8em;color:var(--gold)}
body.mobil .hp.r.liste.offen .nm::after{content:" ▴"}
body.mobil .hp.r.offen .tlist{display:grid}
body.mobil #coStat{pointer-events:auto;cursor:pointer;width:min(330px,calc(100% - 24px));padding:7px 11px}
body.mobil #coStat h3{margin:0;font-size:14px}
body.mobil #coStat h3::after{content:"Statistik ▾";font-family:var(--serif);font-size:12px;letter-spacing:0;text-transform:none;color:var(--gold)}
body.mobil #coStat.offen h3::after{content:"Statistik ▴"}
body.mobil #coStat:not(.offen) table{display:none}
body.mobil #coStat.offen h3{margin-bottom:6px}
body.mobil #atkbar button.melee,body.mobil #atkbar .sep,body.mobil #atkbar button.wear,body.mobil #atkbar button.ring:not(.have){display:none}
body.mobil #tS img{width:100%;height:100%;object-fit:cover;border-radius:50%}
body.mobil .hp .wn{white-space:nowrap}
body.mobil.mdcoop .hp.r.leer{width:auto;max-width:48%}
@media (orientation:portrait){body.mobil #coStat{top:auto;bottom:170px}body.mobil .hp .wn{font-size:10.5px;letter-spacing:.06em}body.mobil .hp.l{width:min(40%,300px)}}

/* Rüstkammer: Leiste der Plätze, Teile nur des gewählten Platzes, Werte und Lobby aufklappbar (ruestkammer.js renderMobil) */
body.mobil .rkui{zoom:1;overflow:hidden;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px;align-content:stretch;
  padding:max(8px,env(safe-area-inset-top)) var(--mrandr) max(8px,env(safe-area-inset-bottom)) var(--mrand)}
body.mobil .rkui>*{pointer-events:auto}
body.mobil .rkshade{background:linear-gradient(90deg,rgba(6,8,5,.7),rgba(6,8,5,.35) 45%,rgba(6,8,5,0) 62%),linear-gradient(0deg,rgba(6,8,5,.55),rgba(6,8,5,0) 22%)}
body.mobil .rktitel{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}
body.mobil .rktitel h2{font-size:17px;letter-spacing:.16em}
body.mobil .mtogs{display:flex;gap:6px}
body.mobil .mtog{font:700 12px/1 var(--caps);letter-spacing:.1em;text-transform:uppercase;padding:0 12px;min-height:36px;border:1px solid var(--gold3);border-radius:3px;background:rgba(12,9,6,.82);color:var(--gold2);cursor:pointer}
body.mobil .mtog.an{background:linear-gradient(180deg,#f4dc99,#c9a04a);color:#2a1a08;border-color:var(--gold2)}
body.mobil .rkkar{display:none}
body.mobil .rkbuch{grid-column:1;grid-row:2;align-self:stretch;display:flex;gap:8px;align-items:stretch;justify-content:flex-start;height:auto;max-height:100%;min-height:0;overflow:hidden;padding:0;pointer-events:none}
body.mobil .rkbuch>*{pointer-events:auto}
body.mobil .mleiste{display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px;flex:none;overflow:auto;padding:2px;scrollbar-width:none}
body.mobil .mleiste::-webkit-scrollbar{display:none}
body.mobil .mplatz{--rc:rgba(214,178,92,.45);position:relative;flex:none;display:grid;justify-items:center;gap:1px;width:58px;padding:3px 2px 2px;border:1px solid rgba(214,178,92,.4);border-bottom:3px solid var(--rc);border-radius:5px;background:radial-gradient(circle at 50% 40%,rgba(60,48,26,.85),rgba(10,8,5,.92));color:#eadbb4;cursor:pointer}
body.mobil .mplatz .rkslotimg{width:38px;height:38px}
body.mobil .mplatz small{font-size:10px;line-height:1.1;white-space:nowrap}
body.mobil .mplatz.an{border-color:#ffd877;box-shadow:0 0 0 2px #ffd87766,0 0 12px #ffb84a55}
body.mobil .mplatz.gesperrt{opacity:.45}
body.mobil .mplatz.blitz{animation:rkblitz .7s ease-out}
body.mobil .mplatz.ultra{border-color:#ff4a1c;animation:rkultra 1.8s ease-in-out infinite}
body.mobil .mzahl{font:700 13px/1 var(--caps);color:var(--gold2)}
@media (orientation:landscape){   /* quer: zwei Spalten, kompakt – alle zehn Plätze ohne Scrollen (auch 740 × 360) */
  body.mobil .mleiste{display:grid;grid-template-columns:repeat(2,54px);grid-auto-rows:min-content;align-content:start;gap:4px}
  body.mobil .mplatz{width:54px;padding:2px 2px 1px;gap:0}
  body.mobil .mplatz .rkslotimg{width:26px;height:26px}
  body.mobil .mplatz small{font-size:9.5px;line-height:1.05}
}
@media (orientation:landscape) and (max-height:370px){body.mobil .mleiste{gap:3px}body.mobil .mplatz .rkslotimg{width:23px;height:23px}}   /* sehr flache Handys (z. B. 740 × 360) */
body.mobil .mteile{flex:0 1 auto;width:min(430px,54vw);min-width:0;min-height:0;display:flex;flex-direction:column;gap:7px;padding:8px 10px 10px;overflow:hidden}
body.mobil .mteile .rktiles{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;overflow-y:auto;min-height:0;padding:3px 2px}
body.mobil .mteile .rkehren2{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));overflow-y:auto}
body.mobil .mkopf{display:flex;align-items:center;gap:8px;font-family:var(--caps);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2)}
body.mobil .mkopf b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobil .mzu{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--gold3);background:rgba(0,0,0,.4);color:var(--gold2);font:700 20px/1 var(--caps);cursor:pointer}
body.mobil .mab{flex:none;padding:8px 10px;border:1px solid rgba(255,154,122,.6);border-radius:3px;background:rgba(60,20,12,.6);color:#ffc8b0;font:600 12px/1 var(--caps);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
body.mobil .mhinweis{margin:0;color:var(--muted);font-size:13px}
body.mobil .rktile.wahl{border-color:#fff3c0;box-shadow:0 0 0 2px #fff3c0aa,0 0 16px #ffd87788;transform:translateY(-2px)}
body.mobil .mklassen{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto}
body.mobil .mklasse{display:grid;justify-items:center;gap:5px;padding:8px 6px;border:1px solid rgba(214,178,92,.4);border-radius:6px;background:rgba(0,0,0,.35);color:var(--gold2);cursor:pointer}
body.mobil .mklasse.an{border-color:#ffd877;box-shadow:0 0 0 2px #ffd87766;background:rgba(80,60,20,.35)}
body.mobil .mklbild{width:62px;height:62px;object-fit:contain}
body.mobil .mklasse b{font:700 13px/1 var(--caps);letter-spacing:.12em;text-transform:uppercase}
body.mobil .mfaeh{display:flex;gap:6px}
body.mobil .mfaeh i{width:32px;height:32px;display:block}
body.mobil .mfaeh img{width:100%;height:100%;object-fit:contain}
body.mobil .mfaeh kbd{display:none}
body.mobil .rkrechts{display:none;position:absolute;right:var(--mrandr);top:calc(max(8px,env(safe-area-inset-top)) + 44px);bottom:calc(max(8px,env(safe-area-inset-bottom)) + 56px);width:min(380px,calc(100vw - 20px));max-height:none;min-height:0;overflow:auto;justify-items:stretch;align-content:start;gap:8px;z-index:3}
body.mobil .rkscreen[data-zeig=werte] .rkrechts,body.mobil .rkscreen[data-zeig=lobby] .rkrechts{display:grid}
body.mobil .rkscreen[data-zeig=werte] .rklobbybox,body.mobil .rkscreen[data-zeig=lobby] .rkstats{display:none}
body.mobil .rkstats{padding:10px 12px;width:auto}
body.mobil .rkhead b{font-size:16px}
body.mobil .rkrow{font-size:13px}
body.mobil .rkreise,body.mobil .rknext{display:none}
body.mobil .rklobbybox{width:auto}
body.mobil .rkfuss{grid-column:1;grid-row:3;position:static;padding:0;background:none;gap:8px;flex-wrap:nowrap;align-items:stretch}
body.mobil .rkzurueck,body.mobil .rkbereit{min-width:0;min-height:44px;padding:6px 14px}
body.mobil .rkzurueck{flex:0 1 140px;font-size:14px}
body.mobil .rkbereit{flex:0 1 240px}
body.mobil .rkbereit span{font-size:17px}
body.mobil .rkbereit small{font-size:11px}
body.mobil .rktip{left:auto!important;top:calc(max(8px,env(safe-area-inset-top)) + 46px)!important;right:var(--mrandr);bottom:auto;width:min(330px,42vw);max-height:calc(100dvh - 140px);overflow:auto;overscroll-behavior:contain;pointer-events:auto;font-size:13px;padding:9px 11px 8px}   /* rechts oben über dem Hobbit, scrollbar (antippen außerhalb schließt) */
body.mobil .rktip .rktop{grid-template-columns:44px minmax(0,1fr)}
body.mobil .rktip .rktipimg{width:44px;height:44px}
body.mobil .rktip .rkdesc{font-size:12.5px;margin:6px 0 4px}
@media (orientation:portrait){
  body.mobil .rkshade{background:linear-gradient(0deg,rgba(6,8,5,.75) 30%,rgba(6,8,5,.2) 55%,rgba(6,8,5,0) 65%)}
  body.mobil .rkbuch{flex-direction:column-reverse;justify-content:flex-start;align-items:stretch}
  body.mobil .mleiste{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  body.mobil .mteile{width:auto;max-height:44dvh}
  body.mobil .rktip{left:var(--mrand)!important;right:var(--mrandr);width:auto;max-height:38dvh}
  body.mobil .rkrechts{left:var(--mrand);width:auto}
}