/* Schriften: Lilita One und Nunito (SIL Open Font License 1.1, Lizenztexte in /fonts) */
@font-face{font-family:'Lilita One';src:url(/fonts/lilita-one-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url(/fonts/nunito-latin.woff2) format('woff2');font-weight:200 1000;font-display:swap}
/* Nebelwacht · Oberfläche im klassischen Browser-Rollenspiel-Aufbau. Alle Texturen sind lokal erzeugte SVG-Daten. */
:root{
 color-scheme:dark;
 --stone:#103a48;--stone-dark:#0a2530;--stone-deep:#061920;--stone-light:#1d5567;
 --gold:#c9962e;--gold-light:#ffe08a;--gold-dark:#7a5617;--ink:#1c120a;
 --yellow:#ffd23f;--text:#f4ecd8;--muted:#86b6c4;--teal:#56b7d0;--red:#d8452f;
 --parchment:#ead9ad;--parchment-ink:#3a2508;
 --ui:'Nunito','Segoe UI',system-ui,sans-serif;--display:'Lilita One','Nunito',system-ui,sans-serif;
 --outline:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 2px 0 #000;
 --mottle:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.011 .018' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .01  0 0 0 0 .07  0 0 0 0 .1  0 0 0 -1.6 1.15'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
 --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='120' height='120' filter='url(%23g)'/></svg>");
 --paper:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .1  0 0 0 -1.3 .75'/></filter><rect width='200' height='200' filter='url(%23p)'/></svg>");
 font-family:var(--ui);color:var(--text);background:var(--stone-deep);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--grain),radial-gradient(ellipse at 50% 30%,#0f3442 0%,#061920 70%);background-color:var(--stone-deep)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
svg{display:block;width:100%;height:100%}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}

/* ---------- Rahmen und Knöpfe ---------- */
.frame{
 position:relative;border:4px solid var(--gold);border-radius:10px;
 background:var(--grain),var(--mottle),linear-gradient(160deg,#164a5a 0%,#0f3442 45%,#0b2b37 100%);
 box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--gold-dark),inset 0 0 40px #0009,0 0 0 2px var(--ink),0 10px 30px #000b;
}
.frame:before,.frame:after{content:"";position:absolute;width:18px;height:18px;border:3px solid var(--gold-light);background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 2px var(--ink);pointer-events:none;z-index:1}
.frame:before{top:-12px;left:calc(50% - 9px)}
.frame:after{bottom:-12px;left:calc(50% - 9px)}
.flourish{height:16px;margin:8px auto;width:72%;flex-shrink:0}
.kicker{display:block;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal)}
.btn-gold,.btn-stone{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border-radius:7px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;font-size:14px;transition:filter .12s,transform .06s}
.btn-gold{background:linear-gradient(#ffe9a3,#e8b445 50%,#b97f25);color:#2a1606;border:2px solid var(--ink);box-shadow:inset 0 2px 0 #fff8,inset 0 -2px 0 #8a5a16,0 3px 0 #3d2706}
.btn-stone{background:linear-gradient(#1f5a6c,#0f3442);color:var(--yellow);border:2px solid var(--gold);text-shadow:var(--outline);box-shadow:inset 0 0 0 1px var(--ink),0 3px 0 #031015}
.btn-gold:hover:not(:disabled),.btn-stone:hover:not(:disabled){filter:brightness(1.12)}
.btn-gold:active:not(:disabled),.btn-stone:active:not(:disabled){transform:translateY(2px)}
.btn-gold:disabled,.btn-stone:disabled{filter:grayscale(.85) brightness(.7);cursor:not-allowed}
.btn-gold.small,.btn-stone.small{min-height:34px;padding:6px 12px;font-size:12px}
.wide{width:100%}
.link-button{color:var(--muted);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.link-button:hover{color:var(--yellow)}
.bar{height:18px;border:2px solid var(--gold);border-radius:4px;background:#071a21;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #000a}
.bar i{display:block;height:100%;width:0;background:linear-gradient(#ffe9a3,#e2ad3e 55%,#a8701e);transition:width .35s ease}

/* ---------- Zugang ---------- */
.entrance{min-height:100vh;display:grid;place-items:center;padding:24px 16px;position:relative;overflow:hidden;background:var(--grain),radial-gradient(ellipse at 50% 20%,#2b3f78 0%,#16244a 45%,#061920 100%)}
.entrance-art{position:absolute;inset:0;pointer-events:none}
.entrance-hero{position:absolute;left:4%;bottom:0;width:min(38vw,460px);height:auto;aspect-ratio:1;opacity:.9}
.entrance-foe{position:absolute;right:4%;bottom:0;width:min(34vw,420px);height:auto;aspect-ratio:1;opacity:.85;transform:scaleX(-1)}
.entrance-box{width:min(420px,100%);padding:28px 26px 22px;z-index:1}
.logo{display:flex;justify-content:center;gap:2px;font-size:46px;font-weight:900;text-transform:uppercase;letter-spacing:1px;line-height:1;color:var(--yellow);text-shadow:0 3px 0 #8a5a16,0 5px 0 var(--ink),2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 0 24px #ffb84d66;transform:rotate(-2deg)}
.logo span+span{color:#fff;font-size:.82em;align-self:flex-end}
.legal-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px}.legal-links a{color:#c9d6f0;font-weight:700}.legal-links a:hover{color:#ffd45a}
.terms-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin-top:6px}.terms-check input{width:18px;height:18px;flex:none;margin-top:2px}.terms-check a{color:#ffd45a}
.side-links{display:flex;gap:10px}a.plus-button{display:grid;place-items:center;text-decoration:none}
.logo-sub{text-align:center;color:var(--muted);font-weight:700;font-size:12px;margin:12px 0 18px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.auth-tabs button{padding:9px;border:2px solid var(--gold-dark);border-radius:6px;background:#0b2a35;color:var(--muted);font-weight:800;text-transform:uppercase;font-size:12px}
.auth-tabs button.selected{border-color:var(--gold);color:var(--yellow);background:#164a5a;text-shadow:var(--outline)}
label{display:block;font-size:12px;font-weight:800;color:#fff;margin:12px 0 5px;text-shadow:var(--outline)}
input{width:100%;background:#071a21;border:2px solid var(--gold-dark);border-radius:6px;padding:11px 12px;color:#fff;font-size:14px}
input:focus{border-color:var(--gold-light);outline:none}
input::placeholder{color:#58808c}
.error{min-height:20px;color:#ff9b80;font-size:12px;font-weight:700;margin:10px 0}
#guest{margin-top:10px}
.local-note{margin-top:14px;text-align:center;font-size:11px;color:#6f98a5;line-height:1.6}

/* ---------- Heldenerstellung ---------- */
.pt{display:block;width:100%;height:100%}
.creator{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--grain),radial-gradient(ellipse at 50% 20%,#2b3f78 0%,#16244a 45%,#061920 100%)}
.creator-box{width:min(980px,100%);padding:24px 26px 20px}
.creator-title{text-align:center;font-size:30px;font-weight:900;color:var(--yellow);text-shadow:var(--outline);margin-bottom:16px}
.class-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.class-card{display:grid;grid-template-columns:56px 1fr;gap:4px 12px;align-items:center;text-align:left;padding:10px 12px;border:2px solid var(--gold-dark);border-radius:8px;background:#0b2a35;transition:filter .12s}
.class-card svg{grid-row:1/3;width:56px;height:56px}
.class-card b{font-size:17px;font-weight:900;color:#fff;text-shadow:var(--outline)}
.class-card span{font-size:11.5px;line-height:1.4;color:#a9c9d2}
.class-card[aria-checked="true"]{border-color:var(--gold-light);background:#164a5a;box-shadow:0 0 14px #ffd23f88}
.class-card[aria-checked="true"] b{color:var(--yellow)}
.class-card:hover{filter:brightness(1.12)}
.creator-main{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:22px;align-items:start}
.creator-left{display:grid;gap:12px;justify-items:center}
.creator-portrait{width:100%;aspect-ratio:1;border:3px solid var(--gold);border-radius:8px;background:radial-gradient(circle at 50% 40%,#3a87a0,#0a2430 78%);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 30px #000a;overflow:hidden}
.creator-portrait svg{width:100%;height:100%}
.creator-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.opt{display:grid;grid-template-columns:1fr 34px 54px 34px;align-items:center;gap:6px;padding:6px 8px;border:1px solid #1f4c5a;border-radius:6px;background:#0a2430}
.opt>span{font-weight:900;font-size:13px;color:#fff;text-shadow:var(--outline)}
.opt>b{text-align:center;font-size:13px;font-weight:900;color:var(--yellow)}
.opt button{height:30px;border:2px solid var(--gold);border-radius:5px;background:#164a5a;color:var(--yellow);font-weight:900;font-size:16px}
.opt button:hover{filter:brightness(1.2)}
.opt.wide{grid-column:1/-1;grid-template-columns:110px 1fr}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.swatches button{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);box-shadow:0 0 0 2px #1f4c5a}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--yellow)}
.toggle{display:flex;gap:6px}
.toggle button{flex:1;height:30px;border:2px solid var(--gold-dark);border-radius:5px;background:#0b2a35;color:var(--muted);font-weight:900;font-size:12px;text-transform:uppercase}
.toggle button[aria-pressed="true"]{border-color:var(--gold);background:#164a5a;color:var(--yellow)}
.creator-actions{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.creator-actions .btn-gold{min-width:220px}

/* ---------- Spielfläche ---------- */
.game{display:grid;grid-template-columns:276px minmax(0,1fr);gap:10px;height:100vh;padding:14px 10px 10px;min-height:660px}
.side{display:flex;flex-direction:column;padding:14px 12px 10px;overflow-y:auto;overflow-x:hidden;min-height:0}
.profile{display:grid;grid-template-columns:92px 1fr 42px;gap:10px;align-items:start}
.portrait-small{width:92px;height:92px;border:3px solid var(--gold);border-radius:5px;background:radial-gradient(circle at 50% 40%,#2b6b80,#0b2a35 75%);position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--ink)}
.portrait-small svg{width:110%;height:110%;margin:-2% -5%}
.level-badge{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);min-width:42px;padding:1px 8px;background:#071a21;border:2px solid var(--gold);border-bottom:0;border-radius:4px 4px 0 0;font-weight:900;font-size:13px;color:#fff;text-align:center;text-shadow:var(--outline)}
.purse{display:grid;gap:6px;padding-top:4px}
.purse li{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:7px;font-weight:900;font-size:15px;color:#fff;text-shadow:var(--outline);white-space:nowrap}
.purse svg{width:22px;height:22px}
.plus-button{width:40px;height:40px;padding:3px;border:2px solid var(--gold);border-radius:6px;background:#0b2a35;margin-top:22px}
.plus-button:disabled svg{filter:grayscale(.7) brightness(.75)}
.menu{display:grid;gap:4px}
.group-title{font-size:13px;font-weight:900;color:var(--yellow);text-shadow:var(--outline);margin:6px 0 5px 2px}
.tiles{display:grid;grid-template-columns:repeat(4,54px);gap:9px}
.tile{width:54px;height:54px;border:2px solid var(--gold);border-radius:5px;background:radial-gradient(circle at 50% 40%,#22627a,#0b2a35 78%);position:relative;box-shadow:inset 0 0 0 2px var(--ink),0 2px 0 #000;transition:filter .12s,transform .08s}
.tile>svg{padding:6px}
.tile:hover{filter:brightness(1.2)}
.tile:active{transform:translateY(1px)}
.tile.active{border-color:var(--gold-light);box-shadow:inset 0 0 0 2px var(--ink),0 0 12px #ffd23faa}
.tile.locked>svg{filter:grayscale(.55) brightness(.7)}
.tile .lock{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;padding:0}
.side-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 2px 0}
.side-name{font-weight:800;font-size:13px;color:#fff;text-shadow:var(--outline);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{padding:22px 22px 18px;overflow:auto;min-height:0}
.stage-close{position:absolute;top:6px;right:8px;width:32px;height:32px;border-radius:50%;color:var(--yellow);font-size:20px;font-weight:900;text-shadow:var(--outline);z-index:3}
.stage-close:hover{filter:brightness(1.3)}
.guest-note{position:fixed;left:50%;bottom:4px;transform:translateX(-50%);font-size:11px;font-weight:700;color:#f0d79a;background:#0a1e26e6;border:1px solid var(--gold-dark);border-radius:4px;padding:3px 10px;white-space:nowrap;z-index:4}

/* ---------- Charakter ---------- */
.char{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start}
.doll{display:grid;grid-template-columns:var(--slot) 1fr 1fr var(--slot);grid-template-rows:repeat(4,var(--slot));grid-template-areas:"s0 p p s4" "s1 p p s5" "s2 p p s6" "s3 s8 s9 s7";gap:10px 12px;--slot:94px}
.portrait-frame{grid-area:p;position:relative;border:3px solid var(--gold);border-radius:6px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#3a87a0 0%,#14485a 45%,#0a2430 80%);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 30px #000a}
.portrait-frame svg{position:absolute;inset:4% 6% 0;width:88%;height:96%}
.hero-name{position:absolute;left:12px;right:12px;bottom:60px;font-size:20px;font-weight:900;color:var(--yellow);text-shadow:var(--outline);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.class-name{position:absolute;top:8px;left:10px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:#fff;background:#0a1e26cc;border:1px solid var(--gold-dark);border-radius:3px;padding:2px 7px}
.level-row{grid-area:p;align-self:end;margin:0 10px 10px;position:relative;z-index:1}
.level-bar{height:26px;border:2px solid var(--gold);border-radius:5px;background:#071a21;position:relative;overflow:hidden}
.level-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(#7fd3ea,#2f8fb0 60%,#1b6680);transition:width .35s}
.level-bar span{position:relative;display:block;text-align:center;line-height:22px;font-weight:900;font-size:14px;color:#fff;text-shadow:var(--outline)}
.level-row small{display:block;text-align:right;margin:0 2px 3px;font-size:11px;font-weight:800;color:#d7eef5;text-shadow:var(--outline);order:-1}
.level-row{display:flex;flex-direction:column}
.slot{position:relative;width:var(--slot,100%);aspect-ratio:1;justify-self:center;align-self:center;border:2px solid #a07b2c;border-radius:5px;background:radial-gradient(circle at 50% 40%,#17495b,#0a2430 75%);box-shadow:inset 0 0 0 2px #06161c,inset 0 0 18px #000a;display:grid;place-items:center;padding:0}
.slot>svg{width:80%;height:80%;pointer-events:none}
.slot.ghost>svg{opacity:.2;filter:grayscale(1) brightness(1.7)}
.slot.filled>svg{filter:hue-rotate(var(--hue,0deg)) drop-shadow(0 3px 2px #000a)}
.slot.filled{cursor:pointer}
.slot.filled:hover{border-color:var(--gold-light)}
.slot.r-2{border-color:#5fbf4f}.slot.r-3{border-color:#4f9fe0}
.slot.r-epic{border-color:#c46cff;box-shadow:inset 0 0 0 2px #06161c,inset 0 0 22px #a24dff66,0 0 10px #a24dff88}
.slot.selected{outline:3px solid var(--yellow);outline-offset:2px}
.slot.drop-ok{border-color:#9cff7a;box-shadow:inset 0 0 0 2px #06161c,0 0 12px #9cff7a99}
.slot.locked{opacity:.45;border-style:dashed;border-color:#4c5a5e}
.slot.locked>svg{width:42%;height:42%;filter:grayscale(1)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:16px}
.tab{padding:9px 6px;border:2px solid var(--gold-dark);border-bottom:0;border-radius:7px 7px 0 0;background:#0b2a35;color:#6fa3b2;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.tab.active{border-color:var(--gold);background:#154555;color:var(--yellow);text-shadow:var(--outline)}
.tab-body{border:2px solid var(--gold);border-radius:0 0 7px 7px;padding:10px;background:#0a283499}
.attr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.attr{display:grid;grid-template-columns:minmax(0,1fr) auto 38px;align-items:center;column-gap:8px;row-gap:1px;background:#0a2430;border:1px solid #1f4c5a;border-radius:5px;padding:7px 6px 7px 10px}
.attr-name{font-weight:900;font-size:13px;text-transform:uppercase;color:#fff;text-shadow:var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attr-value{font-weight:900;font-size:16px;color:#fff;text-shadow:var(--outline);text-align:right}
.attr-value small{font-size:11px;color:#7fe07f;margin-left:3px}
.attr-sub{grid-column:1/3;display:flex;justify-content:space-between;gap:6px;font-size:10px;font-weight:900;text-transform:uppercase;color:var(--teal)}
.attr-sub b{color:#cfeaf2}
.attr-cost{grid-column:1/3;font-size:10px;font-weight:800;color:#e8c46a}
.attr .plus{grid-column:3;grid-row:1/4;width:36px;height:36px;padding:2px;border-radius:5px}
.attr .plus:disabled{filter:grayscale(.9) brightness(.6)}
.attr .plus:hover:not(:disabled){filter:brightness(1.15)}
.attr.armor{grid-template-columns:minmax(0,1fr) auto}
.combat-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.combat-list div{display:flex;justify-content:space-between;background:#0a2430;border:1px solid #1f4c5a;border-radius:5px;padding:9px 10px;font-weight:900;font-size:13px}
.combat-list span{color:var(--teal);text-transform:uppercase;font-size:11px}
.about p{font-size:13px;line-height:1.7;color:#d7e6ea}
.char-right{position:relative;display:flex;flex-direction:column;min-height:100%}
.bag-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.bag-grid .slot{width:100%}
.wide-flourish{width:90%;margin:12px auto}
.item-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px;border:2px solid var(--gold-dark);border-radius:6px;background:#0a2430}
.item-actions b{font-weight:900;text-shadow:var(--outline)}
.item-actions div{display:flex;gap:8px}
.item-actions div button{flex:1 1 0;min-width:0}
.bag-hint{font-size:11px;color:#6f98a5;margin-top:8px;line-height:1.5}
.bag-art{width:min(300px,80%);height:auto;aspect-ratio:260/220;margin:auto 0 0 auto;filter:drop-shadow(0 8px 10px #000a)}

/* ---------- Gemalte Grafiken (Spritesheets) ---------- */
.sprite{display:block;background-repeat:no-repeat;pointer-events:none}
.slot>.sprite{width:86%;height:86%;filter:drop-shadow(0 3px 3px #000b)}
.tile>.sprite{width:86%;height:86%;margin:7%}
.tile.locked>.sprite{filter:grayscale(.55) brightness(.7)}
.pin>.sprite.pin-icon{position:absolute;left:19%;top:15%;width:62%;height:49%;padding:0}
.pin.locked>.sprite.pin-icon{filter:grayscale(.7) brightness(.75)}
.purse .sprite{width:24px;height:24px}
.price .sprite,.quest-rewards .sprite{width:18px;height:18px}
.rewards .sprite{width:24px;height:24px}
.sprite.fill{width:100%;height:100%}
.quest-foe{display:flex;align-items:center;gap:10px;margin:-4px 0 2px}
.quest-foe .sprite{width:58px;height:58px;flex-shrink:0;border:3px solid var(--gold-dark);border-radius:50%;background-color:#5a3a1e;box-shadow:inset 0 0 10px #000a}
.quest-foe .foe-name{font-weight:900;font-size:14px;color:#5a2d0c}
.shop-scene,.tavern .scene{container-type:size}
.shop-npc{position:absolute;left:3%;bottom:0;width:min(78cqw,88cqh);height:min(78cqw,88cqh);pointer-events:none}
.merchant-painted{width:100%;height:100%;filter:drop-shadow(0 10px 14px #000c)}
.tavern-host{position:absolute;right:3%;bottom:0;width:min(34cqw,92cqh);height:min(34cqw,92cqh);pointer-events:none}
.host-painted{width:100%;height:100%;filter:drop-shadow(0 8px 10px #000c)}

/* ---------- Tooltip ---------- */
.tooltip{position:fixed;z-index:40;min-width:210px;max-width:290px;padding:10px 12px;background:#081c24f5;border:2px solid var(--gold);border-radius:7px;box-shadow:0 0 0 2px var(--ink),0 8px 24px #000c;pointer-events:none;font-size:13px}
.tt-name{font-weight:900;font-size:15px;text-shadow:var(--outline)}
.tt-type{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--teal);margin:2px 0 7px}
.tooltip ul{display:grid;gap:3px}
.tooltip li{display:flex;justify-content:space-between;gap:12px;font-weight:700}
.tooltip li b{color:#fff}
.tt-worn{margin-top:7px;font-size:11px;font-weight:700;color:#9fc3cd}
.tt-price{margin-top:8px;padding-top:6px;border-top:1px solid #2b5664;color:#e8c46a;font-weight:800;font-size:12px}
.r-1{color:#fff}.r-2{color:#8ff07f}.r-3{color:#7fc4ff}.r-epic{color:#e7a6ff}

/* ---------- Taverne ---------- */
.tavern{display:grid;gap:14px}
.scene{position:relative;height:250px;border:3px solid var(--gold);border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--ink)}
.scene>svg{position:absolute;inset:0}
.scene.small{height:auto;min-height:150px}
.scene-title{position:absolute;left:14px;top:12px;font-size:22px;font-weight:900;color:var(--yellow);text-shadow:var(--outline);background:#1c120acc;border:2px solid var(--gold-dark);border-radius:5px;padding:4px 12px}
.quest-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.quest{display:flex;flex-direction:column;gap:8px;padding:14px 14px 12px;background:var(--paper),linear-gradient(#f2e3b8,#dcc58e);color:var(--parchment-ink);border:3px solid var(--gold-dark);border-radius:6px;box-shadow:inset 0 0 0 2px #f8edcc,inset 0 0 26px #8a5a1666,0 4px 0 #000a}
.quest h3{font-size:17px;font-weight:900;color:#5a2d0c}
.quest .region{font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#8a5a16}
.quest p{font-size:12.5px;line-height:1.55;flex:1}
.quest-rewards{display:flex;flex-wrap:wrap;gap:6px 12px;font-weight:900;font-size:13px}
.quest-rewards span{display:inline-flex;align-items:center;gap:5px}
.quest-rewards svg{width:18px;height:18px}
.quest .btn-gold{margin-top:4px}
.journey{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center;padding:12px;border:2px solid var(--gold-dark);border-radius:7px;background:#0a2430}
.journey-body h3{font-size:22px;font-weight:900;color:var(--yellow);text-shadow:var(--outline);margin:4px 0 12px}
.journey-body p{font-size:13px;margin-top:8px;color:#d7e6ea}
.journey-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.thirst{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-weight:900;font-size:13px;text-shadow:var(--outline)}
.thirst .bar i{background:linear-gradient(#bff07f,#6fbf3a 55%,#3f8a1e)}

/* ---------- Stadt ---------- */
.stage.is-town{padding:12px}
.town-wrap{position:relative;width:100%;max-width:calc((100vh - 64px)*4/3);aspect-ratio:4/3;margin:0 auto;border:3px solid var(--gold);border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--ink)}
.town-wrap>svg{position:absolute;inset:0}
.pin{position:absolute;width:clamp(34px,5%,60px);aspect-ratio:60/76;transform:translate(-50%,-100%);transition:transform .15s,filter .15s;filter:drop-shadow(0 4px 3px #000b);z-index:1}
.pin:hover,.pin:focus-visible{transform:translate(-50%,-110%) scale(1.1);z-index:2}
.pin>svg{position:absolute;inset:0;pointer-events:none}
.pin>.pin-icon{left:15%;top:11.5%;width:70%;height:55.5%;padding:8%}
.pin.locked>.pin-bg,.pin.locked>.pin-icon{filter:grayscale(.7) brightness(.75)}
.pin>.lock{left:auto;top:auto;right:-14%;bottom:20%;width:44%;height:auto;aspect-ratio:1}
.pin-label{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);padding:3px 9px;border-radius:5px;background:#081c24f0;border:2px solid var(--gold);color:var(--yellow);font-weight:900;font-size:12px;white-space:nowrap;text-shadow:var(--outline);opacity:0;pointer-events:none;transition:opacity .12s}
.pin:hover .pin-label,.pin:focus-visible .pin-label{opacity:1}

/* ---------- Händler ---------- */
.shop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}
.shop-scene{height:min(560px,calc(100vh - 110px));min-height:380px;transition:box-shadow .15s}
.shop-scene .merchant{position:absolute;inset:auto auto 0 34%;width:68%;height:auto;aspect-ratio:1;transform:translateX(-50%);filter:drop-shadow(0 10px 12px #000b)}
.bubble{position:absolute;top:62px;right:14px;max-width:min(58%,300px);padding:10px 13px;background:var(--paper),#f2e3b8;color:var(--parchment-ink);border:3px solid var(--gold-dark);border-radius:12px;font-size:13px;font-weight:700;line-height:1.45;box-shadow:0 4px 0 #000a}
.bubble:after{content:"";position:absolute;left:24px;bottom:-14px;border:9px solid transparent;border-top-color:var(--gold-dark)}
.sell-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:6px;background:#1c120ae6;border:2px solid #9cff7a;color:#c9ffb4;font-weight:900;font-size:13px;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
body.dragging-sell .sell-hint{opacity:1}
body.dragging-sell .shop-scene{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--ink),0 0 22px #9cff7a}
.shop-scene.over{box-shadow:inset 0 0 0 4px #9cff7a,0 0 26px #9cff7a}
.panel-title{font-size:16px;font-weight:900;color:var(--yellow);text-shadow:var(--outline);margin:0 0 10px}
.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
.offer{display:grid;gap:6px;justify-items:center;min-width:0}
.offer .slot{width:100%}
.reroll{display:flex;margin:14px auto 0}
.price{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 9px;font-weight:900;font-size:13px;text-shadow:var(--outline)}
.price span{display:inline-flex;align-items:center;gap:4px}
.price svg{width:16px;height:16px}
.price .short{color:#ff8a6a}
.bag-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.bag-row .slot{width:100%}
.shop-side .item-actions{margin-top:12px}

/* ---------- Gesperrt ---------- */
.locked-view{display:grid;justify-items:center;align-content:center;gap:14px;min-height:60vh;text-align:center}
.locked-view>svg{width:110px;height:110px}
.locked-view h2{font-size:28px;font-weight:900;color:var(--yellow);text-shadow:var(--outline)}
.locked-view p{color:#bcd5dc;max-width:380px;line-height:1.6}

/* ---------- Kampf ---------- */
dialog{color:var(--text);padding:22px 24px;width:min(760px,calc(100% - 24px));max-height:calc(100vh - 24px);overflow:auto;text-align:center}
dialog.frame{position:fixed;overflow:visible}
dialog::backdrop{background:#030d11d9}
dialog h2{font-size:28px;font-weight:900;color:var(--yellow);text-shadow:var(--outline);margin:4px 0 14px}
.battle-arena{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);align-items:center;gap:6px}
.fighter-art{height:230px;margin-top:8px;border:3px solid var(--gold);border-radius:6px;background:radial-gradient(circle at 50% 40%,#3a87a0,#0a2430 78%);overflow:hidden;transition:filter .15s}
.enemy .fighter-art{background:radial-gradient(circle at 50% 40%,#7a3a2a,#2a0f0a 78%)}
.enemy .fighter-art svg{transform:scaleX(-1)}
.fighter.hit .fighter-art{filter:brightness(2.2) saturate(.4)}
.fighter h3{margin-top:8px;font-size:17px;font-weight:900;text-shadow:var(--outline);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar.hp{height:24px}
.bar.hp i{width:100%;background:linear-gradient(#ff8a6a,#d8452f 55%,#8f2316)}
.bar.hp span{position:absolute;inset:0;line-height:20px;font-weight:900;font-size:13px;text-shadow:var(--outline)}
.versus{font-size:26px;font-weight:900;color:var(--yellow);text-shadow:var(--outline)}
#round-text{min-height:44px;padding:14px 0 6px;font-weight:700}
.rewards{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;padding:12px 0 16px;font-weight:900;font-size:15px}
.rewards span{display:inline-flex;align-items:center;gap:6px}
.rewards svg{width:22px;height:22px}

/* ---------- Hinweis ---------- */
#notice{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);top:auto;right:auto;margin:0;border:2px solid var(--ink);background:linear-gradient(#ffe9a3,#e8b445);color:#2a1606;padding:11px 20px;border-radius:7px;font-weight:900;font-size:14px;box-shadow:0 6px 24px #000b;max-width:90vw;display:none;z-index:50}
#notice.show,#notice:popover-open{display:block}

/* ---------- Mittlere Breiten ---------- */
@media (max-width:1250px){
 .char{grid-template-columns:1fr}
 .char-right{min-height:0}
 .bag-art{width:220px;margin-top:-20px}
}
/* ---------- Schmale Fenster und Mobilgeräte ---------- */
@media (max-width:900px){
 .game{grid-template-columns:minmax(0,1fr);align-content:start;height:auto;min-height:100vh;padding:12px 8px 30px;gap:12px}
 .side,.stage{min-width:0}
 .side{overflow:visible;padding:12px 10px 8px}
 .profile{grid-template-columns:72px 1fr 40px}
 .portrait-small{width:72px;height:72px}
 .plus-button{margin-top:14px}
 .menu{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
 .menu-group{flex-shrink:0}
 .tiles{grid-template-columns:repeat(var(--count,4),50px);gap:8px}
 .tile{width:50px;height:50px}
 .side>.flourish:nth-of-type(2){display:none}
 .stage{overflow:visible;padding:20px 12px 16px}
 .doll{--slot:clamp(52px,17vw,84px);gap:7px 8px}
 .hero-name{font-size:16px;bottom:44px}
 .level-row small{display:none}
 .guest-note{white-space:normal;width:calc(100% - 16px);text-align:center}
 .attr-grid,.combat-list{grid-template-columns:1fr}
 .bag-grid{gap:6px}
 .bag-art{width:170px;margin-top:-8px}
 .quest-board{grid-template-columns:1fr}
 .creator-box{padding:18px 14px}
 .creator-title{font-size:22px}
 .class-pick{grid-template-columns:1fr;gap:8px}
 .class-card{grid-template-columns:44px 1fr;padding:8px 10px}
 .class-card svg{width:44px;height:44px}
 .creator-main{grid-template-columns:1fr;gap:14px}
 .creator-portrait{max-width:240px}
 .creator-options{grid-template-columns:1fr}
 .opt.wide{grid-template-columns:96px 1fr}
 .creator-actions .btn-gold{min-width:0;flex:1}
 .town-wrap{max-width:none}
 .pin{width:clamp(30px,8.5%,48px)}
 .pin-label{font-size:10px;padding:2px 6px}
 .shop{grid-template-columns:1fr;gap:16px}
 .shop-scene{height:320px;min-height:0}
 .shop-scene .merchant{width:62%;left:32%}
 .bubble{top:52px;font-size:12px;max-width:52%}
 .offer-grid{gap:10px 8px}
 .bag-row{gap:6px}
 .journey{grid-template-columns:1fr}
 .scene{height:180px}
 .scene-title{font-size:17px}
 .entrance-hero{width:60vw;left:-10%;opacity:.35}
 .entrance-foe{width:55vw;right:-12%;opacity:.3}
 .logo{font-size:40px}
 .fighter-art{height:150px}
 .battle-arena{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr)}
 .versus{font-size:18px}
 dialog{padding:18px 14px}
 dialog h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* ---------- Spielschrift für Überschriften, Knöpfe und Werte ---------- */
.logo,.creator-title,.group-title,.tab,.btn-gold,.btn-stone,.scene-title,.panel-title,.attr-name,.attr-value,.hero-name,.level-bar span,.level-badge,.purse li,.side-name,.quest h3,.journey-body h3,.locked-view h2,dialog h2,.fighter h3,.versus,.class-card b,.opt>span,.opt>b,.tt-name,.item-actions b,.rewards,.price,.pin-label,.auth-tabs button,label,.thirst,.combat-list b,.stage-close,#notice{font-family:var(--display);font-weight:400;letter-spacing:.3px}
.btn-gold,.btn-stone,.tab,.auth-tabs button{letter-spacing:.8px}

/* =====================================================================
   CraftPix-Oberfläche: Samt, Messingrahmen, gemalte Plätze und Knöpfe.
   Bausteine aus assets-src/Build-Scenes.ps1 (public/chrome, public/scenes).
   ===================================================================== */
:root{--brass:#d8c9a0;--brass-dark:#6d634f;--velvet-bg:#1a0e09;--panel:#20130dd9;--panel-line:#5f533f}
body{background:#0d0705 url(/chrome/velvet.jpg) center/cover fixed}
.frame{border:26px solid transparent;border-image:url(/chrome/frame.png) 46 stretch;border-radius:0;
 background:linear-gradient(#1c0f0ad0,#120906e6),url(/chrome/velvet.jpg) center/cover;box-shadow:0 14px 34px #000d}
.frame:before,.frame:after{width:150px;height:37px;border:0;transform:translateX(-50%);box-shadow:none;left:50%;
 background:url(/chrome/crest.png) center/contain no-repeat}
.frame:before{top:-34px}
.frame:after{bottom:-34px;top:auto;transform:translateX(-50%) scaleY(-1)}
.side{padding:6px 4px 4px}.stage{padding:10px}
.slot,.tile,.plus-button{border:2px solid var(--brass-dark);border-radius:12px;background:url(/chrome/slot.png) center/100% 100% no-repeat;box-shadow:0 2px 4px #000b}
.slot.filled:hover,.tile:hover{border-color:var(--brass)}
.slot.ghost>svg{opacity:.16}
.slot.locked{opacity:.4;border-style:solid}
.tile.active{border-color:#ffd23f;box-shadow:0 0 12px #ffd23faa}
.btn-gold,.btn-stone{background:none;border:0;border-radius:0;box-shadow:none;border-style:solid;border-width:0 24px;text-shadow:var(--outline);color:#fff;min-height:44px;padding:8px 6px}
.btn-gold{border-image:url(/chrome/btn-blue.png) 0 46% fill / 0 24px stretch}
.btn-stone{border-image:url(/chrome/btn-brown.png) 0 46% fill / 0 24px stretch;color:#f4e2b8}
.btn-gold.small,.btn-stone.small{min-height:36px;border-width:0 18px;border-image-width:0 18px;padding:4px 4px}
.btn-gold:disabled,.btn-stone:disabled{filter:grayscale(1) brightness(.6)}
.scene-title,.panel-title,.creator-title{display:inline-block;color:#fff;text-shadow:var(--outline);background:none;border:0;border-style:solid;border-width:0 34px;
 border-image:url(/chrome/ribbon.png) 0 22% fill / 0 34px stretch;padding:10px 6px 14px;font-size:20px;line-height:1}
.panel-title{font-size:17px;padding:8px 4px 12px}
.creator-title{display:block;width:max-content;margin:0 auto 16px;font-size:26px}
.tab{background:#1c110bcc;border-color:var(--brass-dark);color:#bfae88}
.tab.active{background:#2b1a10;border-color:var(--brass);color:#ffd23f}
.tab-body{border-color:var(--brass-dark);background:#140b07b3}
.attr,.combat-list div,.item-actions,.opt,.class-card,.journey,.auth-tabs button,.toggle button{background:var(--panel);border-color:var(--panel-line)}
.class-card[aria-checked="true"],.auth-tabs button.selected,.toggle button[aria-pressed="true"]{background:#3a2414;border-color:var(--brass)}
.attr-sub{color:#c7a96b}.attr-sub b{color:#f1e3c2}.kicker,.combat-list span{color:#c7a96b}
.tooltip{background:#160c08f5;border-color:var(--brass)}.tt-type{color:#c7a96b}.tt-price{border-top-color:#4b3f30}
.portrait-frame,.portrait-small,.fighter-art,.creator-portrait{border-color:var(--brass);background:radial-gradient(circle at 50% 38%,#6b4a32 0%,#2d1a10 55%,#140a06 85%)}
.enemy .fighter-art{background:radial-gradient(circle at 50% 40%,#5b2a1c,#1c0a06 80%)}
.level-badge,.bar,.level-bar{border-color:var(--brass);background:#120a06}
.level-bar i{background:linear-gradient(#ffe08a,#e2a93a 55%,#9c6a1a)}
input{background:#140b07;border-color:var(--brass-dark)}
.flourish{opacity:.85;filter:sepia(.6) saturate(.6) brightness(1.1)}
.bubble{border-color:#6d4a28}
#notice{border:0;border-style:solid;border-width:0 24px;border-image:url(/chrome/btn-blue.png) 0 46% fill / 0 24px stretch;border-radius:0;color:#fff;text-shadow:var(--outline);background:none}
/* Szenen und Stadt als gemalte Bilder */
.town-wrap{border-color:var(--brass)}
.town-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene{border-color:var(--brass);background:#120a06 center/cover no-repeat}
.scene>svg{display:none}
.tavern .scene{background-image:url(/scenes/tavern.jpg)}
.shop-scene[data-shop="smith"]{background-image:url(/scenes/smith.jpg);background-position:left center}
.shop-scene[data-shop="magic"]{background-image:url(/scenes/magic.jpg);background-position:left center}
.journey .scene[data-quest="1"]{background-image:url(/scenes/journey-1.jpg)}
.journey .scene[data-quest="2"]{background-image:url(/scenes/journey-2.jpg)}
.journey .scene[data-quest="3"]{background-image:url(/scenes/journey-4.jpg)}
.journey .scene.small{min-height:170px}
.entrance,.creator{background:linear-gradient(#08040380,#080403d9),url(/scenes/town.jpg) center/cover}
.entrance-art{display:none}
.quest{border-color:#6d4a28}
@media (max-width:900px){.frame{border-width:18px;border-image-width:18px}.frame:before,.frame:after{width:110px;height:27px}.frame:before{top:-24px}.frame:after{bottom:-24px}}
.plus>.sprite,.plus-button>.sprite{width:100%;height:100%}
.slot.locked>.sprite{width:46%;height:46%}
.plus-button{padding:4px}
.pin>.pin-bg{filter:sepia(.85) saturate(.75) brightness(.85)}
/* Heldenerstellung: gemalte Porträtauswahl */
.creator-options.portraits{display:block}
.race-tabs{margin-bottom:12px}
.portrait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;max-height:400px;overflow-y:auto;padding:4px 6px 4px 2px;scrollbar-width:thin}
.portrait-pick{aspect-ratio:1;border:2px solid var(--brass-dark);border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#6b4a32,#1c100a 80%);transition:transform .08s,filter .1s}
.portrait-pick:hover{filter:brightness(1.15)}
.portrait-pick[aria-pressed="true"]{border-color:#ffd23f;box-shadow:0 0 12px #ffd23faa}
.class-card .class-art{grid-row:1/3;width:56px;height:56px}
.creator-portrait>.sprite{width:100%;height:100%}
@media (max-width:900px){.portrait-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));max-height:300px}.class-card .class-art{width:44px;height:44px}}
.class-card>b,.class-card>span:not(.sprite){grid-column:2}.class-card>.class-art{grid-column:1;grid-row:1/3}
.tile>.sprite.lock{position:absolute;right:-7px;bottom:-7px;width:26px;height:26px;margin:0;filter:drop-shadow(0 1px 1px #000)}
.pin>.sprite.lock{position:absolute;left:auto;top:auto;right:-14%;bottom:22%;width:44%;height:auto;aspect-ratio:1;filter:drop-shadow(0 1px 1px #000)}
.guest-note{background:#1a0e09e6;border-color:var(--brass-dark);color:#e8d6ac}
.town-wrap{max-width:calc((100vh - 128px)*4/3)}@media (max-width:900px){.town-wrap{max-width:none}}

/* =====================================================================
   Aufbau nach Vorbild (v3): ein gemeinsames Fenster, Petrol-Stein mit Gold,
   Laden neben dem Charakter, Heldenerstellung in zwei Schritten, Tavernenszene.
   ===================================================================== */
:root{--panel:#0a2430e6;--panel-line:#1f4c5a}
body{background:var(--grain),radial-gradient(ellipse at 50% 30%,#0f3442 0%,#061920 70%);background-color:#05141a}
.frame{background:var(--grain),var(--mottle),linear-gradient(160deg,#164a5a 0%,#0f3442 45%,#0b2b37 100%)}
.game{display:block;height:100vh;min-height:660px;padding:10px}
.window{display:grid;grid-template-columns:276px minmax(0,1fr);height:100%;max-width:1520px;margin:0 auto}
.window:before,.window:after{display:none}
.window>.side{border-right:4px solid var(--gold-dark);box-shadow:2px 0 0 #000b;padding:6px 10px 4px 2px;overflow-y:auto;min-height:0}
.window>.stage{position:relative;padding:8px 6px 8px 14px;overflow:auto;min-height:0}
.slot,.plus-button{background:radial-gradient(circle at 50% 40%,#17495b,#0a2430 75%);border-color:#a07b2c}
.tile{background:radial-gradient(circle at 50% 40%,#22627a,#0b2a35 78%);border-color:var(--gold)}
.attr,.combat-list div,.item-actions,.opt,.journey,.auth-tabs button,.toggle button{background:var(--panel);border-color:var(--panel-line)}
.toggle button[aria-pressed="true"]{background:#164a5a;border-color:var(--gold)}
.attr-sub{color:var(--teal)}.attr-sub b{color:#cfeaf2}.kicker,.combat-list span{color:var(--teal)}
.tab{background:#0b2a35;border-color:var(--gold-dark);color:#6fa3b2}
.tab.active{background:#154555;border-color:var(--gold);color:var(--yellow)}
.tab-body{border-color:var(--gold);background:#0a283499}
.tooltip{background:#081c24f5;border-color:var(--gold)}.tt-type{color:var(--teal)}
.portrait-frame,.portrait-small,.fighter-art,.creator-portrait{border-color:var(--gold);background:radial-gradient(circle at 50% 38%,#3a87a0 0%,#14485a 45%,#0a2430 80%)}
.level-badge,.bar,.level-bar{border-color:var(--gold);background:#071a21}
input{background:#071a21;border-color:var(--gold-dark)}
.flourish{filter:none;opacity:1}
.guest-note{background:#0a1e26e6;border-color:var(--gold-dark);color:#f0d79a}
.pin>.pin-bg{filter:none}
/* Start */
.entrance{display:grid;justify-items:center;align-content:center;gap:10px}
.logo.big{font-size:clamp(46px,7vw,78px)}
.entrance .logo-sub{margin:0 0 18px;font-size:14px;color:#d7e6ea;text-shadow:var(--outline)}
.entrance-box{width:min(400px,100%);display:grid;gap:10px;padding:22px 24px}
.btn-gold.big{min-height:58px;font-size:22px}
.guest-link{justify-self:center;margin-top:4px}
#auth-form{margin-top:4px}
/* Heldenerstellung */
.creator{padding:16px}
.creator-window{width:min(1200px,100%);min-height:min(780px,calc(100vh - 32px));display:grid;grid-template-columns:250px minmax(0,1fr);padding:0}
.creator-window:before,.creator-window:after{display:none}
.creator-steps{display:flex;flex-direction:column;gap:12px;padding:18px 14px;border-right:4px solid var(--gold-dark)}
.creator-steps .logo{font-size:32px;margin:6px 0 34px}
.step{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;padding:10px 12px;border:2px solid var(--gold-dark);border-radius:6px;background:#0b2a35;text-align:left}
.step>b{width:34px;height:34px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(#ffe9a3,#e2ad3e);color:#2a1606;font-family:var(--display);font-size:20px}
.step>span{display:flex;flex-direction:column;font-family:var(--display);font-size:19px;color:#fff;text-shadow:var(--outline)}
.step small{font-family:var(--ui);font-weight:800;font-size:11px;color:var(--teal);text-transform:uppercase;text-shadow:none}
.step.active{border-color:var(--gold-light);background:#164a5a;box-shadow:0 0 12px #ffd23f55}
#creator-back{margin-top:auto}
.creator-stage{position:relative;padding:18px 22px 16px;background:linear-gradient(#071a21b3,#071a21d9),url(/scenes/journey-4.jpg) center/cover;overflow:auto}
.cstep{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:100%}
.creator-title{border-image:none;border:0;padding:0;font-size:28px;color:var(--yellow);text-shadow:var(--outline);margin:0}
.class-icons{display:flex;gap:16px;justify-content:center;margin:4px 0}
.class-icon{width:78px;height:78px;border-radius:50%;border:3px solid var(--gold-dark);background:radial-gradient(circle,#22627a,#0b2a35 78%);padding:12px;filter:grayscale(.6) brightness(.75);transition:transform .12s,filter .12s}
.class-icon[aria-checked="true"]{filter:none;border-color:var(--yellow);box-shadow:0 0 18px #9cff7a99;transform:scale(1.12)}
.class-icon>.sprite,.class-icon>svg{width:100%;height:100%}
.class-show{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:20px;width:100%;flex:1}
.class-art-big{height:min(54vh,480px);display:grid;place-items:center}
.class-art-big img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 18px #000d)}
.class-art-big>.sprite{width:min(48vh,400px);height:min(48vh,400px);border:3px solid var(--gold);border-radius:10px;background-color:#0a1e26;box-shadow:0 10px 24px #000c}
.class-info{background:#0a1e26e6;border:2px solid var(--gold);border-radius:8px;padding:16px 18px;box-shadow:0 8px 20px #000a}
.class-info h3{font-family:var(--display);font-size:30px;color:#fff;text-shadow:var(--outline)}
.main-attr{font-family:var(--display);color:var(--yellow);margin:6px 0 8px;font-size:17px}
#class-desc{font-size:14px;line-height:1.55;color:#e4eef1}
.class-nav{display:flex;align-items:center;gap:16px}
.arrow{width:56px;height:56px;font-family:var(--display);font-size:52px;line-height:1;color:var(--yellow);text-shadow:var(--outline)}
.arrow:hover{filter:brightness(1.2)}
.class-nav .btn-gold{min-width:230px}
.appear{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;width:100%}
.label-title{font-family:var(--display);color:var(--yellow);text-shadow:var(--outline);font-size:18px;margin-bottom:8px}
.race-text{font-size:13px;color:#d7e6ea;margin:8px 0 10px;min-height:2.6em}
.appear-right{display:grid;gap:10px;justify-items:center;align-content:start}
.appear-right .creator-portrait{width:min(300px,100%)}
.creds{width:100%}
.creator-actions{justify-content:center;width:100%}
.portrait-pick{background:radial-gradient(circle at 50% 38%,#3a87a0,#0a2430 80%);border-color:var(--gold-dark)}
/* Händler: links Charakter, rechts Laden */
.shop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.shop-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.shop-scene{height:auto;aspect-ratio:3/4;max-height:calc(100vh - 230px);min-height:430px;background-size:cover}
.shop-scene .scene-title{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:2}
.shop-scene .offer-grid{position:absolute;left:5%;top:15%;width:54%;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;z-index:2}
.shop-scene .offer .slot{background:radial-gradient(circle at 50% 40%,#17495bee,#0a2430ee 75%)}
.shop-scene .price{background:#0a1e26cc;border-radius:5px;padding:1px 8px}
.shop-scene .reroll{position:absolute;left:5%;width:54%;bottom:5%;z-index:2;margin:0}
.shop-scene .shop-npc{left:auto;right:-6%;bottom:0;width:min(66cqw,60cqh);height:min(66cqw,60cqh);z-index:1}
.shop-scene .bubble{top:auto;bottom:calc(min(66cqw,60cqh) - 10px);right:4%;left:auto;max-width:42%;font-size:12px;z-index:2}
.shop-bag .bag-row{gap:8px}
/* Taverne */
.tavern-scene{height:auto;aspect-ratio:3/2;max-height:calc(100vh - 60px);min-height:360px}
.tavern-scene .scene-title{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap;z-index:2}
.tavern-scene .thirst{position:absolute;left:8%;right:8%;bottom:4%;z-index:3;background:#0a1e26e6;border:2px solid var(--gold);border-radius:8px;padding:8px 14px}
.tavern-scene .tavern-host{right:1%;width:min(36cqw,72cqh);height:min(36cqw,72cqh);bottom:6%}
.tavern-scene .pin{z-index:2;width:clamp(36px,6%,64px)}
.quest-spot .pin-label{opacity:1}
#quest-dialog{width:min(1000px,calc(100% - 24px));text-align:left}
#quest-dialog h2{text-align:center}
#quest-giver{text-align:center;margin-bottom:12px}
.dialog-x{position:absolute;top:6px;right:10px;width:34px;height:34px;color:var(--yellow);font-family:var(--display);font-size:22px;text-shadow:var(--outline);z-index:2}
.quest.focus{box-shadow:inset 0 0 0 2px #f8edcc,inset 0 0 26px #8a5a1666,0 0 0 3px var(--yellow),0 0 22px #ffd23f88;transform:translateY(-3px)}
@media (max-width:900px){
 .game{height:auto;padding:8px}
 .window{grid-template-columns:minmax(0,1fr);height:auto}
 .window>.side{border-right:0;border-bottom:4px solid var(--gold-dark);box-shadow:0 2px 0 #000b;padding:6px 4px}
 .window>.stage{padding:12px 4px 8px;overflow:visible}
 .creator-window{grid-template-columns:minmax(0,1fr)}
 .creator-steps{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:4px solid var(--gold-dark);padding:10px}
 .creator-steps .logo{width:100%;margin:0 0 4px;font-size:26px}
 .step{flex:1}
 #creator-back{margin:0;width:100%}
 .class-show,.appear{grid-template-columns:minmax(0,1fr)}
 .class-art-big{height:auto}
 .class-art-big>.sprite{width:min(70vw,300px);height:min(70vw,300px)}
 .class-nav .btn-gold{min-width:0;flex:1}
 .shop{grid-template-columns:minmax(0,1fr)}
 .shop-right{order:-1}
 .shop-scene{max-height:none;min-height:0}
 .tavern-scene{min-height:0}
 .tavern-scene .scene-title{font-size:15px}
}

/* =====================================================================
   Gemalte Bilder (v4): Start, Stadt, Taverne und Läden aus assets-src/chatgpt
   (Build-Painted.ps1). Händler und Wirt sind mitgemalt, die Einzelfiguren entfallen.
   ===================================================================== */
.entrance,.creator{background:linear-gradient(#05141a33,#05141aa6),url(/scenes/start.jpg) center/cover}
.creator-stage{background:linear-gradient(#071a2199,#071a21cc),url(/scenes/start.jpg) center/cover}
.town-wrap{aspect-ratio:3/2;max-width:calc((100vh - 40px)*3/2)}
@media (max-width:900px){.town-wrap{max-width:none}}
/* Taverne */
.tavern .scene,.tavern-scene{background:url(/scenes/inn.jpg) center/cover}
.tavern-scene .tavern-host{display:none}
.quest-figure{position:absolute;z-index:1;border-radius:45%;background:none;cursor:pointer;transition:background .15s}
.quest-figure:hover{background:radial-gradient(closest-side,#ffd23f40,#ffd23f00)}
.quest-spot.hot{transform:translate(-50%,-110%) scale(1.1);z-index:2}
/* Läden */
.shop-scene{aspect-ratio:2/3;max-height:none;min-height:0}
.shop-scene[data-shop="smith"]{background:url(/scenes/shop-smith.jpg) center/cover}
.shop-scene[data-shop="magic"]{background:url(/scenes/shop-magic.jpg) center/cover}
.shop-scene .shop-npc{display:none}
.shop-scene .offer-grid{left:6%;top:11%;width:48%}
.shop-scene .reroll{left:6%;width:48%;bottom:auto;top:72%}
.shop-scene .bubble{bottom:auto;right:3%;max-width:40%}
.shop-scene[data-shop="smith"] .bubble{top:34%}
.shop-scene[data-shop="magic"] .bubble{top:21%}
.shop-scene .bubble:after{left:auto;right:30%}
/* Klassenbild */
.class-art-big.has-image img{height:100%;width:auto}
@media (max-width:900px){.quest-spot .pin-label{opacity:0}.quest-spot:hover .pin-label,.quest-spot:focus-visible .pin-label,.quest-spot.hot .pin-label{opacity:1}}
@media (max-width:900px){.class-art-big.has-image img{height:min(52vh,460px)}}

/* =====================================================================
   UI-Set aus ChatGPT (v5): Rahmen, Felder, Pins, Knöpfe, Schließen, Trenner
   (assets-src/chatgpt-ui, zugeschnitten von Build-Painted.ps1 nach public/chrome/nw-*.png).
   ===================================================================== */
/* Rahmen: großes Fenster mit freier Mitte, Dialoge mit dunkler Lesefläche */
.frame{border:24px solid transparent;border-image:url(/chrome/nw-window-frame.png) 66 / 24px stretch}
dialog.frame,.entrance-box{border:20px solid transparent;border-image:url(/chrome/nw-dialog-frame.png) 52 fill / 20px stretch;background:none;box-shadow:0 14px 34px #000d}
.frame:before,.frame:after{display:none}
/* Porträts */
.portrait-frame,.creator-portrait,.fighter-art{border:14px solid transparent;border-image:url(/chrome/nw-portrait-frame.png) 50 / 14px stretch;border-radius:0;background-clip:padding-box}
.portrait-small{border:7px solid transparent;border-image:url(/chrome/nw-portrait-frame.png) 50 / 7px stretch;border-radius:0;background-clip:padding-box}
/* Felder */
.slot,.plus-button{border-color:transparent;border-radius:10px;background:url(/chrome/nw-slot.png) center/100% 100% no-repeat;box-shadow:none}
.slot.selected{outline:0;background-image:url(/chrome/nw-slot-selected.png)}
.slot.filled:hover{border-color:transparent;filter:brightness(1.12)}
.slot.r-2{border-color:transparent;box-shadow:inset 0 0 16px #5fbf4fa0}
.slot.r-3{border-color:transparent;box-shadow:inset 0 0 16px #4f9fe0a0}
.slot.r-epic{border-color:transparent;box-shadow:inset 0 0 22px #a24dffb0,0 0 10px #a24dff88}
.slot.drop-ok{border-color:transparent;box-shadow:inset 0 0 18px #9cff7acc,0 0 12px #9cff7a99}
.shop-scene .offer .slot{background:url(/chrome/nw-slot.png) center/100% 100% no-repeat}
/* Stadt- und Tavernen-Pins */
.pin{aspect-ratio:128/176;background:url(/chrome/nw-map-pin.png) center/100% 100% no-repeat}
.pin>.pin-bg{display:none}
.pin>.pin-icon,.pin>.sprite.pin-icon{left:23%;top:13%;width:54%;height:40%;padding:4%}
.pin.locked{filter:drop-shadow(0 4px 3px #000b) grayscale(.6) brightness(.8)}
.pin>.lock,.pin>.sprite.lock{right:-10%;bottom:34%}
/* Knöpfe: Zweitknöpfe in Stein und Gold mit eigenen Zuständen */
.btn-stone{border-image:url(/chrome/nw-button.png) 0 64 fill / 0 26px stretch;color:#f4e2b8}
.btn-stone:hover:not(:disabled){border-image-source:url(/chrome/nw-button-hover.png);filter:none}
.btn-stone:active:not(:disabled){border-image-source:url(/chrome/nw-button-pressed.png)}
.btn-stone:disabled{border-image-source:url(/chrome/nw-button-disabled.png);color:#9aa9ad}
/* Schließen */
.stage-close,.dialog-x{width:36px;height:36px;border-radius:0;background:url(/chrome/nw-close.png) center/contain no-repeat;color:transparent;text-shadow:none;font-size:0;overflow:hidden}
.stage-close:hover,.dialog-x:hover{filter:brightness(1.25)}
/* Trenner */
.flourish{height:24px;background:url(/chrome/nw-divider.png) center/contain no-repeat;filter:none;opacity:1}
.flourish>use{display:none}
/* Auch die Hauptknöpfe und der Hinweisbalken nutzen den Stein-Knopf; Hauptknöpfe bleiben durch goldgelbe Schrift erkennbar. */
.btn-gold,#notice{border-image:url(/chrome/nw-button.png) 0 64 fill / 0 26px stretch}
.btn-gold{color:var(--yellow)}
.btn-gold:hover:not(:disabled){border-image-source:url(/chrome/nw-button-hover.png);filter:none}
.btn-gold:active:not(:disabled){border-image-source:url(/chrome/nw-button-pressed.png)}
.btn-gold:disabled{border-image-source:url(/chrome/nw-button-disabled.png);color:#9aa9ad}
.btn-gold:disabled,.btn-stone:disabled{filter:none}
/* Menükacheln in der Seitenleiste: dasselbe Feld wie Ausrüstung und Rucksack, aktiver Ort mit dem hervorgehobenen Feld. */
.tile{border-color:transparent;border-radius:8px;background:url(/chrome/nw-slot.png) center/100% 100% no-repeat;box-shadow:none}
.tile:hover{border-color:transparent;filter:brightness(1.15)}
.tile.active{border-color:transparent;background-image:url(/chrome/nw-slot-selected.png);box-shadow:0 0 12px #ffd23f88}
.tile>.sprite{width:72%;height:72%;margin:14%}
.tile>svg{padding:11px}

/* =====================================================================
   Arena (v6): gemalte Arena (scenes/arena.jpg), drei Gegner auf dem Sandboden.
   ===================================================================== */
.arena-scene{position:relative;aspect-ratio:3/2;min-height:420px;max-height:calc(100vh - 60px);container-type:size;border:3px solid var(--gold);border-radius:6px;overflow:hidden;background:url(/scenes/arena.jpg) center/cover;box-shadow:inset 0 0 0 2px var(--ink)}
.arena-scene .scene-title{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap;z-index:2}
.arena-foes{position:absolute;left:4%;right:4%;top:30%;bottom:15%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3%;align-items:end}
.arena-foe{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:6px 8px 8px;border:14px solid transparent;border-image:url(/chrome/nw-dialog-frame.png) 52 fill / 14px stretch;text-align:center;box-shadow:0 10px 18px #000a}
.arena-portrait{width:min(100%,22cqh);aspect-ratio:1;border:9px solid transparent;border-image:url(/chrome/nw-portrait-frame.png) 50 / 9px stretch;background:radial-gradient(circle at 50% 38%,#3a87a0,#0a2430 80%);background-clip:padding-box}
.arena-portrait>*{width:100%;height:100%}
.arena-foe h3{font-family:var(--display);font-size:18px;color:#fff;text-shadow:var(--outline);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-meta{font-size:12px;color:var(--teal);font-weight:800}
.arena-honor{display:flex;align-items:center;gap:5px;font-weight:900;color:var(--yellow)}
.arena-honor>.sprite,.arena-honor>svg{width:20px;height:20px}
.arena-foe .btn-gold{margin-top:4px;font-size:12px}
.arena-empty{grid-column:1/-1;align-self:center;justify-self:center;max-width:460px;padding:14px 18px;border:14px solid transparent;border-image:url(/chrome/nw-dialog-frame.png) 52 fill / 14px stretch;text-align:center;font-weight:700}
.arena-bar{position:absolute;left:6%;right:6%;bottom:3%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:7px 14px;background:#0a1e26e6;border:2px solid var(--gold);border-radius:8px;font-size:13px;font-weight:800;z-index:2}
.arena-bar b{color:var(--yellow);font-family:var(--display);font-size:15px;margin-left:4px}
#arena-wait{color:var(--teal)}
@media (max-width:900px){
 .arena-scene{aspect-ratio:auto;min-height:0;max-height:none;container-type:normal;padding:56px 8px 8px}
 .arena-foes{position:static;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
 .arena-portrait{width:min(100%,140px)}
 .arena-bar{position:static;margin-top:10px}
}

/* =====================================================================
   Stall (v7): gemalter Stall (scenes/stable.jpg) mit anklickbaren Reittieren, Auswahl unten.
   ===================================================================== */
.stable-scene{position:relative;aspect-ratio:3/2;min-height:400px;max-height:calc(100vh - 60px);container-type:size;border:3px solid var(--gold);border-radius:6px;overflow:hidden;background:url(/scenes/stable.jpg) center/cover;box-shadow:inset 0 0 0 2px var(--ink)}
.stable-scene .scene-title{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap;z-index:3}
.stable-scene .pin{z-index:2;width:clamp(36px,6%,64px)}
.mount-spot .pin-label{opacity:1}
.mount-spot.chosen{transform:translate(-50%,-112%) scale(1.15);z-index:3;filter:drop-shadow(0 0 10px #ffd23f)}
.mount-spot.chosen .pin-label{border-color:var(--yellow);color:#fff}
.stable-panel{position:absolute;left:4%;right:4%;bottom:3%;z-index:3;display:flex;align-items:center;gap:14px;padding:10px 14px;border:14px solid transparent;border-image:url(/chrome/nw-dialog-frame.png) 52 fill / 14px stretch}
.stable-info{flex:1;min-width:0}
.stable-info h3{font-family:var(--display);font-size:20px;color:#fff;text-shadow:var(--outline)}
#mount-effects{font-size:13px;font-weight:800;color:#e4eef1;margin:2px 0}
#mount-status{margin:0}
#mount-buy{flex-shrink:0;min-width:190px}
@media (max-width:900px){
 .stable-scene{aspect-ratio:auto;min-height:0;max-height:none;container-type:normal;display:flex;flex-direction:column}
 .stable-scene:before{content:"";display:block;aspect-ratio:3/2}
 #stable-spots{position:absolute;left:0;right:0;top:0;aspect-ratio:3/2}
 .stable-scene{background:url(/scenes/stable.jpg) top/100% auto no-repeat,#0a1e26}
 .stable-panel{position:static;flex-wrap:wrap;margin:8px}
 #mount-buy{width:100%}
 .mount-spot .pin-label{opacity:0}.mount-spot:hover .pin-label,.mount-spot.chosen .pin-label{opacity:1}
}

/* =====================================================================
   Dungeons (v8): gemalte Karte (scenes/dungeons.jpg) mit drei Eingängen, Auswahl unten.
   ===================================================================== */
.dungeon-scene{position:relative;aspect-ratio:3/2;min-height:400px;max-height:calc(100vh - 60px);border:3px solid var(--gold);border-radius:6px;overflow:hidden;background:url(/scenes/dungeons.jpg) center/cover;box-shadow:inset 0 0 0 2px var(--ink)}
.dungeon-scene .scene-title{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap;z-index:3}
.dungeon-scene .pin{z-index:2;width:clamp(40px,6.5%,68px)}
.dungeon-spot .pin-label{opacity:1}
.dungeon-spot.chosen{transform:translate(-50%,-112%) scale(1.15);z-index:3;filter:drop-shadow(0 0 10px #ffd23f)}
.dungeon-spot.chosen .pin-label{border-color:var(--yellow);color:#fff}
.dungeon-foe{flex-shrink:0;width:84px;height:84px;border:8px solid transparent;border-image:url(/chrome/nw-portrait-frame.png) 50 / 8px stretch;background:radial-gradient(circle at 50% 38%,#3a87a0,#0a2430 80%);background-clip:padding-box;display:grid;place-items:center}
.dungeon-foe>*{width:100%;height:100%}
.dungeon-foe>.sprite.ui-icon,.dungeon-foe>svg{width:60%;height:60%}
#dungeon-text{font-size:13px;font-weight:800;color:#e4eef1;margin:2px 0 6px}
.dungeon-progress{display:flex;align-items:center;gap:10px}
.dungeon-progress .bar{flex:1;height:14px}
.dungeon-progress span{font-size:12px;font-weight:800;color:var(--teal);white-space:nowrap}
#dungeon-wait{margin:4px 0 0;min-height:1em}
#dungeon-action{flex-shrink:0;min-width:200px}
@media (max-width:900px){
 .dungeon-scene{aspect-ratio:auto;min-height:0;max-height:none;background:url(/scenes/dungeons.jpg) top/100% auto no-repeat,#0a1e26}
 .dungeon-scene:before{content:"";display:block;aspect-ratio:3/2}
 #dungeon-spots{position:absolute;left:0;right:0;top:0;aspect-ratio:3/2}
 .dungeon-panel{position:static;flex-wrap:wrap;margin:8px}
 #dungeon-action{width:100%}
}

/* =====================================================================
   Innenraum (v9): Materialflächen, Attributzeilen mit Symbolen, Reiter, Titelschild,
   Pergament-Sprechblase, Steigern-Knopf, Rucksack-Titel (assets-src/chatgpt-interior).
   ===================================================================== */
.frame.window,.frame.creator-window{background:linear-gradient(#0a1e2633,#0a1e2633),url(/chrome/nw-surface-petrol-stone.jpg) center/cover}
.tab-body,.bag-panel{background:linear-gradient(#0000,#0000),url(/chrome/nw-surface-dark-leather.jpg) center/cover;border-color:var(--gold-dark);box-shadow:inset 0 0 18px #000a}
/* Reiter */
.tabs{gap:4px}
.tab{border:0;border-radius:0;min-height:38px;background:url(/chrome/nw-tab-inactive.png) center/100% 100% no-repeat;color:#9fc3cc;text-shadow:var(--outline)}
.tab.active{background-image:url(/chrome/nw-tab-active.png);color:var(--yellow);filter:drop-shadow(0 0 6px #ffb84a66)}
.tab:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* Attributzeilen: Symbol | Name, Unterzeile, Kosten | Wert | Steigern */
.attr{grid-template-columns:40px minmax(0,1fr) auto 40px;column-gap:8px;border:12px solid transparent;border-image:url(/chrome/nw-attribute-card.png) 24 fill / 12px stretch;background:none;border-radius:0;padding:0 0 0 2px;min-height:64px}
.attr-icon{grid-column:1;grid-row:1/4;width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 2px #000c)}
.attr-name{grid-column:2;grid-row:1}
.attr-value{grid-column:3;grid-row:1}
.attr-sub{grid-column:2/4;grid-row:2}
.attr-cost{grid-column:2/4;grid-row:3}
.attr .plus{grid-column:4;grid-row:1/4;width:38px;height:38px;padding:0;border:0;border-radius:4px;background:url(/chrome/nw-plus-control.png) center/contain no-repeat}
.attr .plus:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.attr.armor{grid-template-columns:40px minmax(0,1fr) auto 40px}
.attr-sub,.attr-cost{color:#e8d6b0}.attr-sub span{color:#7fc6d6}
/* Titelschild statt Band (Läden, Taverne, Arena, Stall, Dungeons) */
.scene-title,.panel-title{border-width:0 34px;border-image:url(/chrome/nw-title-plaque.png) 0 72 fill / 0 34px stretch;padding:9px 6px 11px;color:var(--yellow);font-size:20px}
/* Pergament-Sprechblase des Händlers, Spitze unten links frei lassen */
.bubble{background:url(/chrome/nw-parchment-note.png) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;padding:14px 18px 30px;color:#3a2410;font-weight:700;filter:drop-shadow(0 6px 8px #000a)}
.bubble:after{display:none}
/* Steigern-Knopf oben in der Seitenleiste */
.plus-button{border:0;background:url(/chrome/nw-plus-control.png) center/contain no-repeat;box-shadow:none}
.plus-button>.sprite,.plus-button>svg{opacity:0}
/* Gemaltes Kriegerporträt: nicht verzerren, unten bündig */
img.bust{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
/* Rucksack mit Titelschild */
.bag-title{justify-self:center;align-self:center;margin:0 auto 8px;display:table;border-style:solid;border-width:0 30px;border-image:url(/chrome/nw-title-plaque.png) 0 72 fill / 0 30px stretch;padding:6px 10px 8px;font-family:var(--display);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow);text-shadow:var(--outline)}
/* Laden wie im Entwurf: links Charakter und Rucksack, rechts die Ladenszene in voller Höhe */
.shop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"char scene" "bag scene";align-items:start}
.shop-char{grid-area:char;min-width:0}
.shop-right{grid-area:scene}
.shop-bag{grid-area:bag;padding:10px 12px;border:2px solid var(--gold-dark);border-radius:6px;background:url(/chrome/nw-surface-dark-leather.jpg) center/cover;box-shadow:inset 0 0 18px #000a}
@media (max-width:900px){
 .shop{grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "bag" "char"}
 .attr{grid-template-columns:34px minmax(0,1fr) auto 36px;min-height:58px}
 .attr-icon{width:32px;height:32px}
}
/* Laden auf Desktop: Charakterseite etwas breiter, damit die Attributnamen ganz lesbar bleiben */
@media (min-width:901px){
 .shop{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
 .attr{grid-template-columns:32px minmax(0,1fr) auto 34px;column-gap:6px;border-width:9px;border-image-width:9px;min-height:58px}
 .attr.armor{grid-template-columns:32px minmax(0,1fr) auto 34px}
 .attr-icon{width:32px;height:32px}
 .attr .plus{width:34px;height:34px}
 .attr-name{font-size:12px;letter-spacing:.2px;text-overflow:clip}
}
.shop-scene .reroll{top:auto;bottom:3%}

/* =====================================================================
   Rucksack (v10): rechts, zugeklappt wie im Vorbild; Klick auf das Rucksackbild öffnet ihn.
   ===================================================================== */
.shop{grid-template-areas:"char scene"}
.shop-bag{grid-area:auto}
@media (max-width:900px){.shop{grid-template-areas:"scene" "char"}}
.bag-toggle{order:-1;display:flex;align-items:center;gap:12px;align-self:flex-end;margin:0 0 8px auto;padding:4px 14px 4px 6px;border:12px solid transparent;border-image:url(/chrome/nw-dialog-frame.png) 52 fill / 12px stretch;color:var(--yellow);font-family:var(--display);font-size:17px;text-shadow:var(--outline);cursor:pointer;transition:filter .15s}
.bag-toggle .bag-art{width:110px;height:auto;aspect-ratio:260/220;margin:0;filter:drop-shadow(0 6px 8px #000a);transition:transform .15s}
.bag-toggle:hover{filter:brightness(1.15)}
.bag-toggle:hover .bag-art{transform:rotate(-4deg) scale(1.04)}
.bag-toggle:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.bag-toggle.open{filter:drop-shadow(0 0 10px #ffd23f88)}
.bag-label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.bag-count{font-family:var(--ui);font-size:12px;color:#e8d6b0}
.bag-toggle.compact{order:0;margin:8px 0 0 auto}
.bag-toggle.compact .bag-art{width:70px}
.bag-panel{padding:10px 12px;border:2px solid var(--gold-dark);border-radius:6px;margin-top:8px}
body:not(.bag-open) .bag-hint{display:none}
/* Laden: Pfeil-Reiter am rechten Rand, Rucksackfach als Einschub über der Szene (wie im Vorbild) */
.shop-right{position:relative}
.bag-toggle.edge{position:absolute;z-index:6;right:-10px;top:46%;transform:translateY(-50%);margin:0;order:0;flex-direction:column;gap:2px;padding:6px 2px;border-width:10px;border-image-width:10px;font-size:11px;width:auto}
.bag-toggle.edge .bag-art{width:44px}
.bag-toggle.edge .bag-label{align-items:center;font-size:11px}
.bag-arrow{font-family:var(--display);font-size:26px;line-height:.8;color:var(--yellow);transition:transform .2s}
.bag-toggle.edge.open .bag-arrow{transform:scaleX(-1)}
#bag-panel-shop{position:absolute;z-index:5;right:24px;top:16%;width:min(86%,380px);margin:0;padding:12px 14px;box-shadow:0 12px 26px #000c}
#bag-panel-shop .bag-row{grid-template-columns:repeat(5,minmax(0,1fr))}
/* Trankfelder */
.potion-row{display:flex;gap:10px;margin-top:10px}
.potion-slot{width:46px;height:46px;border-radius:50%;border:3px solid var(--gold-dark);background:radial-gradient(circle at 50% 40%,#17495b,#0a2430 75%);box-shadow:inset 0 2px 6px #000c,0 2px 3px #000a;padding:6px}
.potion-slot.filled{border-color:var(--gold);box-shadow:inset 0 2px 6px #000c,0 0 8px #ffd23f66}
.potion-slot>*{width:100%;height:100%}
@media (max-width:900px){#bag-panel-shop{right:18px;top:12%;width:calc(100% - 44px)}}
.bag-toggle.edge{top:64%}
#bag-panel-shop{top:auto;bottom:13%}
/* Laden auf dem Desktop wie im Vorbild: durchgehende Ladenszene in voller Fensterhöhe. Ausrichtung unten rechts,
   damit der Händler ganz zu sehen bleibt; die Szene bleibt stehen, während die Charakterseite scrollt. */
@media (min-width:901px){
 .shop{align-items:start}
 .shop-right{position:sticky;top:0;align-self:start}
 .shop-scene{aspect-ratio:auto;height:calc(100vh - 84px);min-height:520px;max-height:none;background-size:cover;background-position:right bottom}
}
@media (min-width:901px){.bag-toggle.edge{top:auto;bottom:14%;transform:none}}
/* Waren und „Neue Ware“ als Block oben links (Knopf direkt unter den Waren wie im Vorbild);
   die freie Fläche über der Theke gehört dem aufgeklappten Rucksack. */
.shop-scene .offer-area{position:absolute;left:6%;top:11%;width:48%;z-index:2;display:flex;flex-direction:column;gap:10px}
.shop-scene .offer-area .offer-grid{position:static;width:auto}
.shop-scene .offer-area .reroll{position:static;width:auto;margin:0}
#bag-panel-shop{left:4%;right:34px;width:auto;bottom:3%;top:auto;padding:12px 16px 14px}
#bag-panel-shop .bag-row{gap:12px}
@media (max-width:900px){#bag-panel-shop{left:3%;right:30px;bottom:3%}}
/* Rucksackfach an der Unterkante der Ladenszene verankern, unabhängig von Hinweis und Aktionsleiste darunter */
.shop-right{container-type:inline-size}
#bag-panel-shop{bottom:auto;top:calc(150cqw - 12px);transform:translateY(-100%)}
@media (min-width:901px){#bag-panel-shop{top:calc(max(520px,100vh - 84px) - 12px)}}
@media (min-width:901px){#view-character .bag-toggle{margin-top:44px}}
/* Alles im selben Fenster: kein Überstand nach rechts, Hinweis und Aktionen im Rucksackfach statt unter der Szene */
.window>.stage{overflow-x:hidden}
.bag-toggle.edge{right:2px}
#bag-panel-shop .item-actions{margin:10px 0 0}
#bag-panel-shop .bag-hint{margin:8px 0 0;font-size:11px}
/* Niedrige Fenster (Desktop): Charakterspalte kompakter, damit alles ohne Scrollen ins Fenster passt */
@media (min-width:901px) and (max-height:880px){
 .tabs{margin-top:8px}
 .tab{min-height:32px;padding:6px}
 .tab-body{padding:7px}
 .attr-grid{gap:6px}
 .attr{min-height:48px}
 .attr-cost{font-size:9px}
 .potion-row{margin-top:6px;gap:8px}
 .potion-slot{width:36px;height:36px;padding:4px}
}
/* Held als Ablageziel: beim Ziehen eines passenden Gegenstands leuchtet das Porträt */
#doll .portrait-frame.drop-ok{filter:drop-shadow(0 0 10px #9cff7a99)}
#doll .portrait-frame.over{filter:drop-shadow(0 0 16px #9cff7a) brightness(1.08)}

/* =====================================================================
   Randlose Szenen (v11): Die Bilder füllen die Bühne bis an den Fensterrand, ohne eigenen Rahmen,
   damit man in der Szene steht statt auf ein Bild zu schauen. Bild und Pins liegen gemeinsam auf
   .scene-canvas (Format 3:2), die den Szenenkasten wie background-size: cover ausfüllt.
   ===================================================================== */
.scene-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,150cqh);aspect-ratio:3/2;background:center/100% 100% no-repeat}
.scene-canvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.scene-canvas>div{position:absolute;inset:0}
.canvas-inn{background-image:url(/scenes/inn.jpg)}
.canvas-stable{background-image:url(/scenes/stable.jpg)}
.canvas-dungeons{background-image:url(/scenes/dungeons.jpg)}
#tavern-scene,#stable-scene,#dungeon-scene{background:#08161c}
.town-wrap,.tavern-scene,.shop-scene,.arena-scene,.stable-scene,.dungeon-scene{border:0;border-radius:0;box-shadow:none;overflow:hidden}
.town-wrap,.tavern-scene{container-type:size}
@media (min-width:901px){
 .stage[data-scene="town"],.stage[data-scene="tavern"],.stage[data-scene="arena"],.stage[data-scene="stable"],.stage[data-scene="dungeon"],.stage[data-scene="shop"]{padding:0}
 #view-town,#view-tavern,#view-arena,#view-stable,#view-dungeon,#view-shop{height:100%}
 .town-wrap,#tavern-scene,#arena-scene,#stable-scene,#dungeon-scene{width:100%;height:100%;max-width:none;max-height:none;min-height:0;aspect-ratio:auto;margin:0;container-type:size}
 .stage[data-scene="tavern"] #journey{margin:14px}
 /* Laden: links der Charakter mit eigenem Abstand, rechts die Ladenszene randlos bis oben, unten und rechts */
 #view-shop.shop{align-items:stretch;gap:12px}
 .shop-char{padding:8px 0 8px 14px;min-height:0;overflow:auto}
 .shop-right{position:relative;top:auto;height:100%}
 #shop-scene{height:100%;min-height:0}
 #bag-panel-shop{top:auto;bottom:12px;transform:none}
}
@media (max-width:900px){
 .stage[data-scene="town"],.stage[data-scene="tavern"],.stage[data-scene="arena"],.stage[data-scene="stable"],.stage[data-scene="dungeon"]{padding:8px 0 0}
 .stable-scene:before,.dungeon-scene:before{display:none}
 .stable-scene .scene-canvas,.dungeon-scene .scene-canvas{position:relative;left:auto;top:auto;transform:none;width:100%}
 #stable-spots,#dungeon-spots{inset:0;aspect-ratio:auto}
}

/* =====================================================================
   Fensterrahmen als Überlagerung (v12): Der Rahmen liegt über dem Inhalt, die Szenen laufen darunter
   bis an den Fensterrand (wie im Vorbild). Nur eine Goldlinie trennt Charakter und Ladenszene.
   ===================================================================== */
.frame.window{border:0;position:relative}
.frame.window::after{content:"";display:block;position:absolute;inset:0;border:24px solid transparent;border-image:url(/chrome/nw-window-frame.png) 66 / 24px stretch;pointer-events:none;z-index:30}
.window>.side{padding:30px 12px 28px 28px}
.window>.stage{padding:32px 32px 32px 16px}
.stage-close{top:30px;right:32px;z-index:31}
@media (min-width:901px){
 .window>.stage[data-scene="town"],.window>.stage[data-scene="tavern"],.window>.stage[data-scene="arena"],.window>.stage[data-scene="stable"],.window>.stage[data-scene="dungeon"],.window>.stage[data-scene="shop"]{padding:0}
 .stage[data-scene="tavern"] #journey{margin:34px 34px 34px 18px}
 #view-shop.shop{gap:0}
 .shop-char{padding:32px 14px 30px 16px}
 #shop-scene{border-left:4px solid var(--gold-dark);box-shadow:-2px 0 0 #000b}
 .scene-title{top:32px}
 .bag-toggle.edge{right:26px}
 #bag-panel-shop{right:58px;bottom:36px}
 .arena-bar{bottom:34px}
 .stable-panel{bottom:34px}
 .tavern-scene .thirst{bottom:36px}
}
@media (max-width:900px){
 .window>.side{padding:30px 28px 10px}
 .window>.stage{padding:14px 28px 30px}
 .window>.stage[data-scene="town"],.window>.stage[data-scene="tavern"],.window>.stage[data-scene="arena"],.window>.stage[data-scene="stable"],.window>.stage[data-scene="dungeon"]{padding:0 0 24px}
}
.frame.window::after{top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:0;background:none;transform:none;opacity:1;filter:none}
/* Seitenleiste: vier Kacheln samt Schloss passen wieder vor die Trennlinie */
@media (min-width:901px){.window>.side{padding-left:27px}.tiles{grid-template-columns:repeat(4,52px);gap:8px}.tile{width:52px;height:52px}}
/* Laden wie im Vorbild 1:1: Charakterteil so breit wie in der Charakteransicht, Porträt nicht mehr in die Breite gezogen */
@media (min-width:901px){#view-shop.shop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Fläche außerhalb des Spielfensters schwarz, damit sich das Fenster abhebt (wie im Original) */
html,body{background:#000}
/* Hauptattribut der eigenen Klasse wie im Vorbild hervorgehoben: goldene Zierecken und warmer Schein */
.attr.main{position:relative;box-shadow:0 0 14px #ffd23f40}
.attr.main::after{content:"";position:absolute;inset:-12px;border:14px solid transparent;border-image:url(/chrome/nw-portrait-frame.png) 50 / 14px stretch;pointer-events:none}
.attr.main .attr-name{color:var(--yellow)}
@media (min-width:901px){.attr.main::after{inset:-9px;border-width:12px;border-image-width:12px}}
/* Hauptattribut: filigrane goldene Eckranken statt Rahmen (eigene Vektorgrafik; nur die vier Ecken, Kanten bleiben frei) */
.attr.main{box-shadow:0 0 10px #ffd23f22}
.attr.main::after{inset:-7px;border:18px solid transparent;border-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><defs><g id='c' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M3 25V10Q3 3 10 3h15' stroke='%232a1606' stroke-width='3.4'/><path d='M3 25V10Q3 3 10 3h15' stroke='%23f2c85c' stroke-width='1.5'/><path d='M8 19c0-6 3-10 8-11c4-1 5 3 2 4c-2 1-3-1-2-2' stroke='%232a1606' stroke-width='2.8'/><path d='M8 19c0-6 3-10 8-11c4-1 5 3 2 4c-2 1-3-1-2-2' stroke='%23ffdc73' stroke-width='1.1'/><path d='M26 3l2.5-2l2.5 2l-2.5 2z M3 26l2 2.5l-2 2.5l-2-2.5z' fill='%23ffdc73' stroke='%232a1606' stroke-width='.8'/></g></defs><use href='%23c'/><use href='%23c' transform='translate(64 0) scale(-1 1)'/><use href='%23c' transform='translate(0 64) scale(1 -1)'/><use href='%23c' transform='translate(64 64) scale(-1 -1)'/></svg>") 32 / 18px stretch}
@media (min-width:901px){.attr.main::after{inset:-6px;border-width:16px;border-image-width:16px}}
.attr.main::after{inset:-11px;border-width:26px;border-image-width:26px;z-index:2}
@media (min-width:901px){.attr.main::after{inset:-10px;border-width:24px;border-image-width:24px}}
/* Eckranken kräftiger und außerhalb der Zeile (Rückmeldung: kaum erkennbar) */
.attr.main::after{inset:-17px;border-width:34px;border-image-width:34px;z-index:3;filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 6px #ffcf5a66);border-image-source:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><defs><g id='c' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M6 34V14Q6 6 14 6h20' stroke='%231a0d03' stroke-width='5'/><path d='M6 34V14Q6 6 14 6h20' stroke='%23ffd36b' stroke-width='2.4'/><path d='M12 27c0-8 4-13 10-14c5-1 7 4 3 6c-3 1-4-2-2-3' stroke='%231a0d03' stroke-width='4.2'/><path d='M12 27c0-8 4-13 10-14c5-1 7 4 3 6c-3 1-4-2-2-3' stroke='%23ffe28a' stroke-width='1.9'/><path d='M36 6l3.5-3l3.5 3l-3.5 3z M6 36l3 3.5l-3 3.5l-3-3.5z' fill='%23ffe28a' stroke='%231a0d03' stroke-width='1.2'/></g></defs><use href='%23c'/><use href='%23c' transform='translate(80 0) scale(-1 1)'/><use href='%23c' transform='translate(0 80) scale(1 -1)'/><use href='%23c' transform='translate(80 80) scale(-1 -1)'/></svg>");border-image-slice:40}
@media (min-width:901px){.attr.main::after{inset:-15px;border-width:30px;border-image-width:30px}}
/* Alle Felder im selben Grau wie im Vorbild: kein farbiger Seltenheitsschein mehr (Seltenheit steht im Tooltip); legendäre Gegenstände behalten ihren Schein */
.slot.r-1,.slot.r-2,.slot.r-3{border-color:transparent;box-shadow:none}
/* Sanduhr im Geldbeutel (eigene kleine Vektorgrafik) */
.hg-icon{display:block;width:22px;height:22px;background:center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 2h14M5 22h14' stroke='%231a0d03' stroke-width='4' stroke-linecap='round'/><path d='M5 2h14M5 22h14' stroke='%23e8b445' stroke-width='2' stroke-linecap='round'/><path d='M7 3c0 5 4 6 4 9s-4 4-4 9h10c0-5-4-6-4-9s4-4 4-9z' fill='%23bfe8f2' fill-opacity='.35' stroke='%231a0d03' stroke-width='2.4' stroke-linejoin='round'/><path d='M7 3c0 5 4 6 4 9s-4 4-4 9h10c0-5-4-6-4-9s4-4 4-9z' fill='none' stroke='%23e8b445' stroke-width='1.1' stroke-linejoin='round'/><path d='M9 20c1-3 2-3.5 3-3.5s2 .5 3 3.5z M10 7h4c-.5 1.5-1.2 2.3-2 3c-.8-.7-1.5-1.5-2-3z' fill='%23f4d27a'/></svg>")}
@media (max-width:900px){.stage[data-scene="tavern"] .journey-body{padding-left:30px;padding-right:30px}}
/* Avatare: gemalte Porträts mit transparentem Grund, füllen jeden Porträtrahmen (Gesicht oben, Schultern dürfen angeschnitten sein) */
img.avatar{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 18%}
#creator-options{grid-template-columns:repeat(5,minmax(0,1fr))}
.avatar-pick{aspect-ratio:1;padding:0;overflow:hidden}
.avatar-pick[aria-pressed="true"]{outline:3px solid var(--yellow);outline-offset:1px;box-shadow:0 0 12px #ffd23f88}
@media (max-width:900px){#creator-options{grid-template-columns:repeat(5,minmax(0,1fr))}}
#creator-options{max-height:none;overflow:visible;gap:10px}

/* =====================================================================
   UI-Kit C „Arkanes Nachtblau“ (v13): Kobalt und Indigo, Silberkanten, Goldakzente, blaue Edelsteine.
   Grafiken aus assets-src/ui-kit-c, zugeschnitten von Build-Painted.ps1 (public/chrome/c-*.png, Kappen in c-kit.json).
   Verbindliche Stilreferenz: assets-src/ui-kit-c/references/entwurf-c.png
   ===================================================================== */
:root{--teal:#8cc8ff;--panel:#0b1d44e6;--panel-line:#2c4f9a}
/* Außenrahmen und Materialflächen */
.frame.window,.frame.creator-window{background:url(/chrome/c-surface-cobalt.jpg) center/cover}
.frame.window::after{border-width:30px 32px;border-image:url(/chrome/c-frame-screen.png) 73 78 / 30px 32px stretch}
.frame.creator-window{border-image:url(/chrome/c-frame-screen.png) 73 78 / 26px 28px stretch}
.window>.side{background:url(/chrome/c-surface-indigo.jpg) center/cover;border-right:3px solid #c9a24a;box-shadow:2px 0 0 #000b,4px 0 0 #8fb1e066}
.tab-body{background:url(/chrome/c-surface-indigo.jpg) center/cover;border-color:#c9a24a}
/* Felder und Menükacheln */
.slot,.tile{background:url(/chrome/c-slot-normal.png) center/100% 100% no-repeat}
.slot.selected,.tile.active{background-image:url(/chrome/c-slot-selected.png)}
.tile.locked,.slot.locked{background-image:url(/chrome/c-slot-locked.png)}
.shop-scene .offer .slot{background:url(/chrome/c-slot-normal.png) center/100% 100% no-repeat}
.shop-scene .offer .slot.selected{background-image:url(/chrome/c-slot-selected.png)}
.tile>.sprite.lock,.pin>.sprite.lock{background:url(/chrome/nw-schloss.png) center/contain no-repeat}
/* Knöpfe: Gold = Hauptaktion (dunkle Schrift), Blau = Nebenaktion */
.btn-gold,.btn-stone,#notice{border-style:solid;border-width:10px 22px}
.btn-gold{border-image:url(/chrome/c-button-gold.png) 35 77 fill / 10px 22px stretch;color:#2a1606;text-shadow:0 1px 0 #ffe9a3aa}
.btn-stone,#notice{border-image:url(/chrome/c-button-blue.png) 35 77 fill / 10px 22px stretch;color:#ffe07a;text-shadow:var(--outline)}
.btn-gold:hover:not(:disabled){border-image-source:url(/chrome/c-button-gold.png);filter:brightness(1.08)}
.btn-stone:hover:not(:disabled){border-image-source:url(/chrome/c-button-blue.png);filter:brightness(1.15)}
.btn-gold:active:not(:disabled){border-image-source:url(/chrome/c-button-gold.png);filter:brightness(.92)}
.btn-stone:active:not(:disabled){border-image-source:url(/chrome/c-button-blue.png);filter:brightness(.92)}
.btn-gold:disabled,.btn-stone:disabled{border-image-source:url(/chrome/c-button-disabled.png);color:#d0d8e2;text-shadow:var(--outline)}
.btn-gold.small,.btn-stone.small{border-width:8px 18px;border-image-width:8px 18px}
/* Reiter: aktiv in Gold */
.tab{background:none;border-style:solid;border-width:8px 18px 5px;border-image:url(/chrome/c-tab-inactive.png) 27 58 16 58 fill / 8px 18px 5px stretch;color:#a9c8ff}
.tab.active{background:none;border-image:url(/chrome/c-tab-active.png) 28 58 17 58 fill / 8px 18px 5px stretch;color:#2a1606;text-shadow:0 1px 0 #ffe9a3aa;filter:none}
/* Attributkarten */
.attr{border-width:11px 14px;border-image:url(/chrome/c-stat-card.png) 37 45 fill / 11px 14px stretch}
@media (min-width:901px){.attr{border-width:9px 12px;border-image-width:9px 12px}}
.attr-sub span{color:#8cc8ff}
/* Steigern und Schließen: blaue Quadratknöpfe mit goldenem Zeichen */
.attr .plus,.plus-button{position:relative;background:url(/chrome/c-button-square-blue.png) center/contain no-repeat}
.attr .plus::before,.plus-button::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:28px;line-height:1;color:#ffd45a;text-shadow:0 2px 0 #3a2406,0 0 4px #000}
.attr .plus:disabled::before{color:#9aa6b4}
.stage-close,.dialog-x{display:grid;place-items:center;background:url(/chrome/c-button-square-blue.png) center/contain no-repeat;color:#ffd45a;font-family:var(--display);font-size:20px;text-shadow:0 2px 0 #000}
/* Titelschilder */
.scene-title,.panel-title,.bag-title{border-style:solid;border-width:10px 30px;border-image:url(/chrome/c-title-plaque.png) 32 98 fill / 10px 30px stretch;padding:2px 10px 4px;color:#ffe07a}
/* Porträtrahmen */
.portrait-frame,.creator-portrait,.fighter-art{border:17px solid transparent;border-image:url(/chrome/c-frame-portrait.png) 65 67 / 17px stretch;background:radial-gradient(circle at 50% 38%,#2f6bd0,#0b2a63 75%) padding-box}
.portrait-small{border:9px solid transparent;border-image:url(/chrome/c-frame-portrait.png) 65 67 / 9px stretch;background:radial-gradient(circle at 50% 38%,#2f6bd0,#0b2a63 75%) padding-box}
.arena-portrait{border-image:url(/chrome/c-frame-portrait.png) 65 67 / 9px stretch;background:radial-gradient(circle at 50% 38%,#2f6bd0,#0b2a63 75%) padding-box}
.dungeon-foe{border-image:url(/chrome/c-frame-portrait.png) 65 67 / 8px stretch;background:radial-gradient(circle at 50% 38%,#2f6bd0,#0b2a63 75%) padding-box}
/* Tafeln, Dialoge, Tooltip */
dialog.frame,.entrance-box,.stable-panel,.arena-foe,.arena-empty,.bag-toggle,#bag-panel-shop{border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 16px 20px stretch;background:none}
.tooltip{border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;background:none;box-shadow:0 10px 24px #000c}
/* Fortschrittsbalken: Fassung und türkise Füllung */
.level-bar{border-style:solid;border-width:6px 12px;border-radius:0;border-image:url(/chrome/c-xp-track.png) 20 42 fill / 6px 12px stretch;background:none;overflow:visible}
.level-bar i{background:url(/chrome/c-xp-fill.png) center/100% 100% no-repeat;border-radius:3px}
/* Trenner, Trankfassungen, Preisplaketten, Rucksack-Pfeil */
.flourish{background-image:url(/chrome/c-divider.png)}
.potion-slot{border:0;background:url(/chrome/c-round-socket.png) center/100% 100% no-repeat;box-shadow:none;padding:8px}
.potion-slot.filled{filter:drop-shadow(0 0 6px #8cc8ffaa)}
.shop-scene .price{border-style:solid;border-width:5px 12px;border-image:url(/chrome/c-resource-plate.png) 34 52 fill / 5px 12px stretch;background:none;border-radius:0;padding:0 4px}
.bag-arrow{font-size:0;width:20px;height:26px;background:url(/chrome/c-chevron-right.png) center/contain no-repeat;transform:scaleX(-1)}
.bag-toggle.edge.open .bag-arrow{transform:none}
.guest-note{background:#0b1d40e6;border-color:#c9a24a}
@media (max-width:900px){.stage-close{top:2px;right:30px;width:30px;height:30px}.window>.stage{padding-top:36px}.window>.stage[data-scene="town"],.window>.stage[data-scene="tavern"],.window>.stage[data-scene="arena"],.window>.stage[data-scene="stable"],.window>.stage[data-scene="dungeon"]{padding-top:0}}
@media (min-width:901px) and (max-height:880px){.potion-row{margin-top:4px}.potion-slot{width:34px;height:34px;padding:5px}.attr-grid{gap:5px}}

/* =====================================================================
   Entwurf C 1:1 (v14): Außenrahmen aus Einzelteilen (keine gestreckten Ornamente), drei gerahmte Spalten
   im Verhältnis der Referenz (22 % | 35 % | 43 %), Größen und Farben nach references/entwurf-c.png.
   ===================================================================== */
@media (min-width:901px){
 .game{padding:0;display:grid;place-items:center;background:#000}
 .window{width:min(100vw,calc(100vh*1.9));height:100vh;max-width:none;padding:12px;gap:8px;grid-template-columns:22% minmax(0,1fr)}
}
/* Außenrahmen: Ecken, Schienen und Mittelornamente als eigene Ebenen, nichts wird verzerrt */
.frame.window::after{border:0;border-image:none;inset:0;background:
 url(/chrome/c-fs-tl.png) left top/80px 80px no-repeat,url(/chrome/c-fs-tr.png) right top/80px 80px no-repeat,
 url(/chrome/c-fs-bl.png) left bottom/80px 80px no-repeat,url(/chrome/c-fs-br.png) right bottom/80px 80px no-repeat,
 url(/chrome/c-fs-orn-t.png) center top/50px 38px no-repeat,url(/chrome/c-fs-orn-b.png) center bottom/50px 38px no-repeat,
 url(/chrome/c-fs-orn-l.png) left center/38px 42px no-repeat,url(/chrome/c-fs-orn-r.png) right center/38px 42px no-repeat,
 url(/chrome/c-fs-rail-t.png) left top/17px 25px repeat-x,url(/chrome/c-fs-rail-b.png) left bottom/17px 25px repeat-x,
 url(/chrome/c-fs-rail-l.png) left top/25px 17px repeat-y,url(/chrome/c-fs-rail-r.png) right top/25px 17px repeat-y}
/* Spaltenrahmen (frame-panel): Seitenleiste, Charakterspalte, Laden bzw. ganze Szene */
.window>.side,#char-left,.char-right,.shop-right,.stage[data-scene="town"],.stage[data-scene="tavern"],.stage[data-scene="arena"],.stage[data-scene="stable"],.stage[data-scene="dungeon"]{position:relative}
.window>.side::before,#char-left::before,.char-right::before,.shop-right::before,.stage[data-scene="town"]::before,.stage[data-scene="tavern"]::before,.stage[data-scene="arena"]::before,.stage[data-scene="stable"]::before,.stage[data-scene="dungeon"]::before{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;border:44px solid transparent;border-image:url(/chrome/c-frame-panel.png) 140 / 44px stretch}
.window>.side{border-right:0;box-shadow:none;background:url(/chrome/c-surface-indigo.jpg) center/cover}
#shop-scene{border-left:0;box-shadow:none}
@media (min-width:901px){
 .window>.side{padding:16px 22px 14px}
 .window>.stage{padding:0;overflow:hidden}
 #view-character.char,#view-shop.shop{display:grid;grid-template-columns:44% minmax(0,1fr);gap:8px;height:100%;align-items:stretch;grid-template-areas:none}
 #char-left{padding:18px 18px 14px;background:url(/chrome/c-surface-cobalt.jpg) center/cover;min-height:0;overflow:hidden}
 .shop-char{padding:0;overflow:visible}#shop-char>#char-left{height:100%}
 .char-right{padding:22px;background:url(/chrome/c-surface-cobalt.jpg) center/cover}
 .shop-right{height:100%;overflow:hidden}
 .stage-close{top:20px;right:22px;width:40px;height:40px;z-index:31}
}
/* Seitenleiste wie in der Referenz */
.side-logo{display:none}
@media (min-width:901px){
 .side-logo{display:block;margin:2px auto 10px;padding:4px 14px 6px;border-style:solid;border-width:10px 16px;border-image:url(/chrome/c-resource-plate.png) 34 52 fill / 10px 16px stretch;font-family:var(--display);font-size:clamp(20px,1.9vw,32px);letter-spacing:1px;text-transform:uppercase;text-align:center;color:#ffd45a;text-shadow:0 2px 0 #3a2406,0 0 6px #000}
 .profile{grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
 .portrait-small{width:clamp(80px,7vw,118px);height:clamp(80px,7vw,118px)}
 .purse{gap:4px}.purse li{grid-template-columns:26px 1fr;font-family:var(--display);font-size:clamp(15px,1.25vw,20px)}
 .purse svg,.purse .sprite,.hg-icon{width:24px;height:24px}
 .plus-button{width:46px;height:46px;margin-top:6px;background:url(/chrome/c-button-square-gold.png) center/contain no-repeat}
 .plus-button::before{color:#3a2406;text-shadow:0 1px 0 #ffe9a3}
 .group-title{font-family:var(--display);font-size:clamp(15px,1.25vw,21px);font-weight:400;margin:8px 0 6px 2px;color:#ffd45a}
 .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}
 .tile{width:100%;height:auto;aspect-ratio:1;max-width:66px}
}
/* Charakterspalte */
.attr-name{color:#ffd45a}
.attr-sub span{color:#7fb6ff}
.hero-name{color:#ffd45a}
@media (min-width:901px){
 .doll{--slot:clamp(64px,5.7vw,96px);gap:clamp(8px,1vw,16px) clamp(8px,1vw,14px)}
 .tabs{margin-top:12px}
 .potion-row{margin-top:8px;gap:14px}.potion-slot{width:clamp(36px,3vw,52px);height:clamp(36px,3vw,52px)}
}
/* Laden wie in der Referenz: dunkle Titelplakette, Waren links, breiter goldener Knopf, Rucksack unten über der Theke */
#shop-title{border-image:url(/chrome/c-resource-plate.png) 34 52 fill / 10px 16px stretch;border-width:10px 16px;padding:4px 18px 6px;color:#ffd45a;font-size:clamp(16px,1.35vw,22px)}
@media (min-width:901px){
 #shop-title{left:45%;top:24px}
 .shop-scene .bubble{display:none}
 .shop-scene .offer-area{left:8%;top:13%;width:40%;gap:0}
 .shop-scene .offer-grid{gap:2.2cqh 7%}
 .shop-scene .offer .price{display:block;width:100%;margin-top:4px;text-align:center;border-width:6px 14px;border-image-width:6px 14px;font-size:clamp(12px,1.05vw,16px)}
 .shop-scene .offer-area .reroll{position:absolute;left:25%;width:140%;top:auto;bottom:-15cqh;margin:0;min-height:46px;font-size:clamp(13px,1.1vw,17px);border-width:12px 26px;border-image-width:12px 26px}
 #bag-panel-shop{left:7%;right:120px;bottom:28px;padding:0;border:0;border-image:none;background:none;box-shadow:none}
 #bag-panel-shop .bag-title{border-image-source:url(/chrome/c-title-plaque.png);margin:0 auto 6px}
 .bag-toggle.edge{right:26px;bottom:26px;top:auto;transform:none;width:84px;padding:8px 4px}
 .bag-toggle.edge .bag-art{width:46px}
}
.guest-note{font-size:10px;padding:2px 10px;bottom:2px;opacity:.85}
@media (min-width:901px){#view-shop .shop-char,#view-shop .shop-right{grid-area:auto}}
/* Feinabgleich mit der Referenz: dunkleres Nachtblau, Laden-Raster, Knopf über dem Rucksack */
.frame.window{background:linear-gradient(#050d2ab0,#050d2ab0),url(/chrome/c-surface-cobalt.jpg) center/cover}
.window>.side{background:linear-gradient(#060a2499,#060a2499),url(/chrome/c-surface-indigo.jpg) center/cover}
@media (min-width:901px){
 #char-left,.char-right{background:linear-gradient(#071437a6,#071437a6),url(/chrome/c-surface-cobalt.jpg) center/cover}
 .tab-body{background:linear-gradient(#050b2a8c,#050b2a8c),url(/chrome/c-surface-indigo.jpg) center/cover}
 .class-name{display:none}
 .shop-scene .offer-grid{row-gap:1.6cqh}
 .shop-scene .offer .price{margin-top:2px}
 .shop-scene .reroll{position:absolute;left:18%;width:57%;top:70%;bottom:auto;z-index:3;min-height:48px;margin:0;font-size:clamp(13px,1.15vw,18px);border-width:12px 26px;border-image-width:12px 26px}
 .shop-scene .reroll::before{content:"↻";display:inline-grid;place-items:center;width:30px;height:30px;margin-right:10px;background:url(/chrome/c-round-socket.png) center/contain no-repeat;color:#ffd45a;font-size:18px;text-shadow:0 1px 0 #000}
 #view-shop .bag-hint{display:none}
 #bag-panel-shop{bottom:30px}
}
@media (min-width:901px){
 .shop-scene .offer-grid{row-gap:.5cqh}
 .shop-scene .offer .price{margin-top:1px;border-width:5px 14px;border-image-width:5px 14px}
 .shop-scene .reroll{top:72.5%}
 /* Mittelspalte so groß wie in der Referenz */
 .doll{--slot:clamp(66px,6vw,100px)}
 .tab{min-height:42px;font-size:clamp(11px,.95vw,15px)}
 .attr{min-height:clamp(60px,5.6vw,84px)}
 .attr-name{font-size:clamp(12px,1.02vw,17px)}
 .attr-value{font-size:clamp(15px,1.2vw,21px)}
 .attr-sub{font-size:clamp(10px,.8vw,13px)}
 .attr-cost{font-size:clamp(9px,.75vw,12px)}
 .attr-icon{width:clamp(30px,2.7vw,46px);height:clamp(30px,2.7vw,46px)}
 .attr .plus{width:clamp(32px,2.6vw,44px);height:clamp(32px,2.6vw,44px)}
 .attr{grid-template-columns:clamp(32px,2.8vw,48px) minmax(0,1fr) auto clamp(34px,2.7vw,46px)}
 .attr.armor{grid-template-columns:clamp(32px,2.8vw,48px) minmax(0,1fr) auto clamp(34px,2.7vw,46px)}
}
@media (min-width:901px){
 .window{padding:10px;gap:6px}
 #view-character.char,#view-shop.shop{grid-template-columns:46% minmax(0,1fr);gap:6px}
 .attr-name{font-size:clamp(11px,.92vw,16px);letter-spacing:0;text-overflow:clip}
 .attr-sub b,.attr-value{white-space:nowrap}
}
/* Schmalere Desktopfenster: Attributkarten kompakter, „Steigern:“ entfällt, Kosten bleiben einzeilig */
@media (min-width:901px){.attr-cost{white-space:nowrap}}
@media (min-width:901px) and (max-width:1500px){
 .attr{grid-template-columns:28px minmax(0,1fr) auto 30px;column-gap:5px}
 .attr.armor{grid-template-columns:28px minmax(0,1fr) auto 30px}
 .attr-icon{width:28px;height:28px}.attr .plus{width:30px;height:30px}
 .attr .plus::before{font-size:22px}
 .attr-name{font-size:10.5px}.attr-value{font-size:14px}.attr-sub{font-size:9.5px}.attr-cost{font-size:9.5px}
 .cost-label{display:none}
}
/* Charakteransicht: rechte Spalte zeigt das große Klassenbild des Helden */
@media (min-width:901px){
 #view-character .char-right{background:url(/scenes/class-1.png) center bottom 24px/auto 82% no-repeat,radial-gradient(ellipse at 50% 70%,#2a5bc0aa,#0000 65%),linear-gradient(#071437a6,#071437a6),url(/chrome/c-surface-cobalt.jpg) center/cover}
 #view-character[data-cls="2"] .char-right{background-image:url(/scenes/class-2.png),radial-gradient(ellipse at 50% 70%,#2a5bc0aa,#0000 65%),linear-gradient(#071437a6,#071437a6),url(/chrome/c-surface-cobalt.jpg)}
 #view-character[data-cls="3"] .char-right{background-image:url(/scenes/class-3.png),radial-gradient(ellipse at 50% 70%,#2a5bc0aa,#0000 65%),linear-gradient(#071437a6,#071437a6),url(/chrome/c-surface-cobalt.jpg)}
}
/* Reiselust in der Fassung aus dem UI-Kit */
.thirst .bar{border-style:solid;border-width:6px 12px;border-radius:0;border-image:url(/chrome/c-xp-track.png) 20 42 fill / 6px 12px stretch;background:none;height:22px}
.tavern-scene .thirst{border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;background:none;padding:2px 10px}
@media (min-width:901px){.tavern-scene .thirst{left:22%;right:22%}}
@media (min-width:901px){.attr-value{line-height:1}.attr-value small{display:block;margin:1px 0 0;text-align:right;font-size:.62em}}
@media (max-width:900px){#char-left,.char-right,.shop-right{padding:22px 20px}.window>.stage{padding:14px 18px 30px}.doll{--slot:clamp(48px,15vw,80px)}}
@media (max-width:900px){#view-character.char,#view-shop.shop{grid-template-columns:minmax(0,1fr)}}
/* Kampfwerte und Beschreibung im selben Kartenrahmen wie die Attributzeilen */
.combat-list div,.about p{border:11px solid transparent;border-image:url(/chrome/c-stat-card.png) 37 45 fill / 11px 14px stretch;background:none;border-radius:0;align-items:center}
.combat-list div{min-height:48px;padding:2px 4px}
.combat-list span{color:#ffd45a;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.3px}
.combat-list b{color:#fff;font-family:var(--display);font-weight:400;font-size:15px;text-shadow:var(--outline)}
.about p{margin:0;padding:6px 8px;color:#e4eef8}
@media (min-width:901px){.combat-list div,.about p{border-width:9px 12px;border-image-width:9px 12px}}

/* =====================================================================
   Ruhmeshalle und Gilde (v15): gerahmte Tafel im Stil von UI-Kit C
   ===================================================================== */
.stage[data-scene="fame"],.stage[data-scene="guild"]{position:relative;background:linear-gradient(#071437b0,#071437b0),url(/chrome/c-surface-cobalt.jpg) center/cover}
.stage[data-scene="fame"]::before,.stage[data-scene="guild"]::before{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;border:44px solid transparent;border-image:url(/chrome/c-frame-panel.png) 140 / 44px stretch}
@media (min-width:901px){.window>.stage[data-scene="fame"],.window>.stage[data-scene="guild"]{padding:30px 34px 26px;overflow:auto}}
.fame,.guild{display:flex;flex-direction:column;gap:12px;min-height:100%}
.fame>.panel-title,.guild .panel-title{align-self:center;margin:0}
.fame-tabs{display:flex;gap:6px;justify-content:center}.fame-tabs .tab{min-width:160px}
.fame-table-wrap{border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;padding:2px 6px}
.fame-table{width:100%;border-collapse:collapse;font-size:14px}
.fame-table th{font-family:var(--display);font-weight:400;color:#ffd45a;text-align:left;padding:6px 8px;border-bottom:1px solid #c9a24a66}
.fame-table td{padding:5px 8px;border-bottom:1px solid #2c4f9a55;font-weight:800;color:#e8eefa}
.fame-table td:first-child,.fame-table th:first-child{width:56px;text-align:center;font-family:var(--display);color:#ffd45a}
.fame-table td:last-child,.fame-table th:last-child{text-align:right}
.fame-table tr.own td{background:#ffd45a26;color:#fff}
.fame-hero{display:flex;align-items:center;gap:10px}.fame-hero b{display:block;font-family:var(--display);font-weight:400;color:#fff}.fame-hero small{color:#8cc8ff;font-size:11px}
.fame-face{flex-shrink:0;width:38px;height:38px;border:4px solid transparent;border-image:url(/chrome/c-frame-portrait.png) 65 67 / 4px stretch;background:#0b2a63;overflow:hidden;display:block}
.fame-face>*{width:100%;height:100%}
.fame-empty{text-align:center;color:#9fb4d8}
.fame-nav{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900}
.fame-hint{text-align:center;font-size:12px;color:#9fb4d8;margin:0}
.guild-none{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:12px;text-align:center}
.guild-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.guild-form label{width:100%;font-family:var(--display);color:#ffd45a}
.guild-form input{flex:1;min-width:160px;padding:9px 12px;font-size:15px}
.guild-form.inline label{display:none}
.guild-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.guild-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border:9px solid transparent;border-image:url(/chrome/c-stat-card.png) 37 45 fill / 9px 12px stretch;font-weight:800}
.guild-list li.muted,.guild-chat li.muted{border:0;color:#9fb4d8;font-weight:700;justify-content:center}
.guild-head{display:flex;flex-direction:column;align-items:center;gap:4px}.guild-head .kicker{margin:0}
.guild-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;flex:1;min-height:0}
.guild-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.guild-member .gm-info{flex:1;min-width:0}.guild-member b{display:block;font-family:var(--display);font-weight:400;color:#fff}.guild-member small{color:#8cc8ff;font-size:11px}
.guild-member .gm-rank{color:#ffd45a;font-family:var(--display);font-size:13px}.guild-member.me{box-shadow:0 0 0 2px #ffd45a55}
.gm-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.guild-chat{list-style:none;margin:0;padding:8px 12px;height:220px;overflow-y:auto;border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;font-size:13px;display:flex;flex-direction:column;gap:4px}
.guild-chat time{color:#8cc8ff;font-size:11px}.guild-chat b{color:#ffd45a}
.guild-skill{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:6px 10px;border:9px solid transparent;border-image:url(/chrome/c-stat-card.png) 37 45 fill / 9px 12px stretch}
.guild-skill b{font-family:var(--display);font-weight:400;color:#ffd45a}.guild-skill small{color:#9fb4d8;font-size:11px}.guild-skill button{grid-row:1/3;grid-column:2}
.reward-row .epic,.rewards .epic,.quest-rewards .epic{color:#d9a6ff;text-shadow:0 0 8px #a24dff}
@media (max-width:900px){.guild-cols{grid-template-columns:minmax(0,1fr)}.fame-table td:nth-child(3),.fame-table th:nth-child(3){display:none}}
/* Ruhmeshalle: Tabelle füllt den Platz und scrollt bei Bedarf, Navigation bleibt sichtbar */
@media (min-width:901px){.window>.stage[data-scene="fame"]{overflow:hidden}.fame{height:100%}.fame-table-wrap{flex:1;min-height:0;overflow-y:auto}}
.fame-table td{padding:3px 8px}.fame-face{width:32px;height:32px}
/* Gildenaktivitäten */
.guild-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.guild-tabs .tab{min-width:130px}
.guild-tabs .tab.alert{box-shadow:0 0 0 2px #ff6b6b,0 0 12px #ff6b6baa}
.guild-act{display:flex;flex-direction:column;gap:12px;max-width:900px;width:100%;margin:0 auto}
.act-intro{margin:0;text-align:center;color:#c9d6f0;font-size:14px;line-height:1.5}
.act-box{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px 18px;border:16px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 16px 20px stretch}
.act-box h4,.guild-act>h4{margin:0;font-family:var(--display);font-weight:400;font-size:19px;color:#ffd45a;text-shadow:var(--outline)}
.act-box p{margin:0;font-weight:700}
.act-box.alarm{filter:drop-shadow(0 0 10px #ff6b6b88)}
.countdown{font-family:var(--display);font-weight:400;color:#8cc8ff;font-size:16px}
.act-progress{display:flex;align-items:center;gap:12px;width:100%}.act-progress .bar{flex:1;height:18px}.act-progress span{font-weight:900;white-space:nowrap}
.act-progress.hp .bar i{background:linear-gradient(#ff8a8a,#d23a3a 55%,#8a1414)}
.req-list{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13px;font-weight:800}
.req-list .ok{color:#8fe08f}.req-list .no{color:#ff9a9a}
.act-ok{color:#8fe08f;font-weight:800;margin:0}.act-bad{color:#ff9a9a;font-weight:800;margin:0}
.portal-box{flex-direction:row;align-items:center;gap:18px}.portal-box .dungeon-foe{width:120px;height:120px}.portal-info{flex:1;display:flex;flex-direction:column;gap:8px}
.guild-list li.won{color:#8fe08f}.guild-list li.lost{color:#ff9a9a}
.guild-list.targets{width:100%}
@media (max-width:900px){.portal-box{flex-direction:column;align-items:flex-start}.guild-tabs .tab{min-width:0;flex:1}}
/* Erfolge und Post */
.stage[data-scene="achievements"],.stage[data-scene="mail"]{position:relative;background:linear-gradient(#071437b0,#071437b0),url(/chrome/c-surface-cobalt.jpg) center/cover}
.stage[data-scene="achievements"]::before,.stage[data-scene="mail"]::before{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;border:44px solid transparent;border-image:url(/chrome/c-frame-panel.png) 140 / 44px stretch}
@media (min-width:901px){.window>.stage[data-scene="achievements"],.window>.stage[data-scene="mail"]{padding:30px 34px 26px;overflow:auto}}
.achievements,.mail{display:flex;flex-direction:column;gap:12px;align-items:center}
.achievements .kicker{margin:0}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;width:100%}
.ach-card{display:flex;gap:12px;align-items:center;padding:8px 12px;border:12px solid transparent;border-image:url(/chrome/c-stat-card.png) 37 45 fill / 12px 14px stretch;filter:grayscale(.55) brightness(.85)}
.ach-card.done{filter:none;box-shadow:0 0 12px #ffd45a44}
.ach-icon{width:46px;height:46px;flex-shrink:0}.ach-icon>*{width:100%;height:100%}
.ach-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}.ach-body b{font-family:var(--display);font-weight:400;color:#ffd45a;font-size:16px}.ach-body small{color:#c9d6f0;font-size:12px}
.ach-body .act-progress .bar{height:12px}.ach-body .act-progress span{font-size:12px}
.mail-cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;width:100%;flex:1;min-height:0}
.mail-list-wrap{display:flex;flex-direction:column;gap:8px;min-height:0}
.mail-tools{display:flex;gap:8px}
.mail-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:620px;border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch}
.mail-item button{width:100%;text-align:left;display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:4px;color:#c9d6f0}
.mail-item button:hover{background:#ffffff12}.mail-item.active button{background:#ffd45a22}
.mail-item b{font-weight:700;color:#e4ecfa}.mail-item.unread b{font-weight:900;color:#ffd45a}.mail-item small{font-size:11px;color:#8cc8ff}
.mail-pane{padding:12px 18px;border:16px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 16px 20px stretch;min-height:320px}
.mail-pane h3{font-family:var(--display);font-weight:400;color:#ffd45a;font-size:20px;margin:0}
.mail-text{white-space:pre-wrap;line-height:1.55;margin:12px 0}
.mail-actions{display:flex;gap:8px}
.mail-compose{flex-direction:column;align-items:stretch}.mail-compose label{text-align:left}
.mail-compose textarea{background:#071a21;border:2px solid var(--gold-dark);border-radius:6px;color:#fff;padding:10px 12px;font:inherit;resize:vertical}
.tile{position:relative}.tile>.badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#d23a3a;border:2px solid #ffd45a;color:#fff;font-family:var(--display);font-size:12px;display:grid;place-items:center;z-index:2}
@media (max-width:900px){.mail-cols{grid-template-columns:minmax(0,1fr)}}
/* Spielhalle: Hütchenspiel */
.stage[data-scene="dice"]{position:relative;background:radial-gradient(ellipse at 50% 60%,#3a2a6acc,#0000 60%),linear-gradient(#071437b0,#071437b0),url(/chrome/c-surface-indigo.jpg) center/cover}
.stage[data-scene="dice"]::before{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;border:44px solid transparent;border-image:url(/chrome/c-frame-panel.png) 140 / 44px stretch}
@media (min-width:901px){.window>.stage[data-scene="dice"]{padding:30px 34px 26px;overflow:auto}}
.dice{display:flex;flex-direction:column;gap:14px;align-items:center}
.dice .act-intro{max-width:720px}
.shell-table{display:flex;gap:clamp(20px,5vw,80px);justify-content:center;align-items:flex-end;padding:40px 60px 24px;border:16px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 16px 20px stretch;min-width:min(720px,100%)}
.shell-cup{position:relative;width:130px;height:150px;display:flex;align-items:flex-end;justify-content:center}
.shell-cup .cup{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);background:linear-gradient(90deg,#5a2d10,#b8732e 40%,#e6a95a 52%,#8a4a1c 75%,#4a230c);border-radius:6px;box-shadow:inset 0 -10px 0 #3a1a08;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.shell-cup .cup::after{content:"";position:absolute;left:8%;right:8%;bottom:14px;height:8px;background:#ffd45a;opacity:.7;border-radius:4px}
.shell-cup .coin{position:absolute;bottom:6px;left:50%;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff4b0,#ffd45a 45%,#b8860b);border:3px solid #7a5208;opacity:0;z-index:1}
.shell-cup.win .coin{opacity:1}
.shell-cup.lift .cup{transform:translateY(-90px) rotate(-8deg)}
.shell-cup:hover:not(:disabled) .cup{transform:translateY(-8px)}
.shell-cup.lift:hover .cup{transform:translateY(-90px) rotate(-8deg)}
.shell-cup.chosen .cup{filter:drop-shadow(0 0 12px #ffd45a)}
.shell-cup:disabled{cursor:default}
.shell-result{font-family:var(--display);font-size:22px;margin:0;min-height:1.3em;text-shadow:var(--outline)}
.shell-bets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.shell-bets .bet{padding:6px 14px;border-style:solid;border-width:6px 14px;border-image:url(/chrome/c-resource-plate.png) 34 52 fill / 6px 14px stretch;color:#e8eefa;font-weight:900}
.shell-bets .bet.active{color:#ffd45a;filter:drop-shadow(0 0 8px #ffd45a)}
@media (prefers-reduced-motion:reduce){.shell-cup .cup{transition:none}}
.shell-table{padding-top:110px}

/* Juwelier */
.stage[data-scene="jeweler"]{position:relative;background:radial-gradient(ellipse at 50% 40%,#2a5a7acc,#0000 60%),linear-gradient(#071437b0,#071437b0),url(/chrome/c-surface-cobalt.jpg) center/cover}
.stage[data-scene="jeweler"]::before{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;border:44px solid transparent;border-image:url(/chrome/c-frame-panel.png) 140 / 44px stretch}
@media (min-width:901px){.window>.stage[data-scene="jeweler"]{padding:30px 34px 26px;overflow:auto}}
.jeweler{display:flex;flex-direction:column;gap:12px;align-items:center}
.jeweler .act-intro{max-width:760px}
.jw-offers{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;width:100%}
.jw-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:220px;padding:12px 14px;border:16px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 16px 20px stretch;text-align:center}
.jw-card b{font-family:var(--display);font-weight:400;color:#ffd45a;font-size:17px}
.jw-card .jw-effect{color:#c9d6f0;font-weight:700;font-size:14px}
.jw-card.sold{filter:grayscale(.3) brightness(.8)}
.jw-art{width:84px;height:84px}
.jw-sockets{width:min(640px,100%)}
.jw-sockets .gm-rank{color:#ffd45a;font-family:var(--display);font-size:13px}
/* Edelsteinbild: ein Grundbild, eingefärbt nach Attribut, Größe nach Güte */
.gem-art{display:grid;place-items:center;width:100%;height:100%}
.gem-art>*{width:62%;height:62%}.gem-art.gem-q2>*{width:76%;height:76%}.gem-art.gem-q3>*{width:90%;height:90%;filter:drop-shadow(0 0 6px #c88cff)}
.gem-art.gem-s0{filter:hue-rotate(60deg) saturate(1.5)}.gem-art.gem-s1{filter:hue-rotate(180deg) saturate(1.3)}.gem-art.gem-s2{filter:hue-rotate(-80deg) saturate(1.3)}
.gem-art.gem-s3{filter:hue-rotate(45deg) saturate(1.2) brightness(.75)}.gem-art.gem-s4{filter:hue-rotate(110deg) saturate(1.6) brightness(1.15)}.gem-art.gem-s5{filter:grayscale(.7) brightness(1.3)}

/* Juwelenladen im Spiel */
.stage[data-scene="gemshop"]{position:relative;background:linear-gradient(#071437c0,#071437c0),url(/chrome/c-surface-cobalt.jpg) center/cover}
.stage[data-scene="gemshop"]::before{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;border:44px solid transparent;border-image:url(/chrome/c-frame-panel.png) 140 / 44px stretch}
@media (min-width:901px){.window>.stage[data-scene="gemshop"]{padding:26px 30px 22px;overflow:hidden}}
.gemshop{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,42%);gap:0;height:100%;min-height:0}
.gs-left{display:flex;flex-direction:column;min-height:0;padding-right:14px;border-right:3px solid transparent;border-image:url(/chrome/c-divider.png) 0 30 0 0 / 0 3px 0 0 stretch}
.gs-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.gs-tabs .tab{font-family:var(--display);font-size:15px}
.gs-body{flex:1;min-height:0;overflow:auto;padding:12px 4px 6px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}
.gs-card{border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;padding:4px 8px 8px;display:flex;flex-direction:column;gap:8px}
.gs-card.gs-offer{box-shadow:0 0 18px #5aa8ff55}
.gs-plaque,.gs-ribbon{margin:0 auto;font:400 20px var(--display);color:#ffe07a;text-shadow:var(--outline);border-style:solid;border-width:10px 30px;border-image:url(/chrome/c-title-plaque.png) 32 98 fill / 10px 30px stretch;padding:0 14px 4px;text-align:center}
.gs-items{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gs-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:8px;background:#06122ecc;border:2px solid #3a4f86}
.gs-item-top{display:flex;align-items:center;gap:6px;font:400 17px var(--display);color:#fff;text-shadow:var(--outline)}
.gs-item-top>svg,.gs-item-top>.sprite{width:24px;height:24px}
.gs-item-art{width:72%;aspect-ratio:1;display:grid;place-items:center}.gs-item-art>svg,.gs-item-art>.sprite{width:100%;height:100%}
.gs-item-label{font-size:12px;color:#c9d6f0;font-weight:800;text-align:center}
.gs-foot{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.gs-note{font:400 14px var(--display);color:#dbe5ff;text-align:center}
.gs-price{display:inline-flex;align-items:center;justify-content:center;min-width:150px;min-height:44px;padding:4px 16px;font:400 18px var(--display);color:#ffd45a;text-shadow:var(--outline);text-decoration:none;cursor:pointer;
 border-style:solid;border-width:10px 22px;border-image:url(/chrome/c-button-blue.png) 35 77 fill / 10px 22px stretch;background:none}
.gs-price:disabled{border-image-source:url(/chrome/c-button-disabled.png);color:#c8cfdc;cursor:not-allowed}
.gs-price:hover:not(:disabled){filter:brightness(1.15)}
.gs-intro{margin:0;color:#c9d6f0;text-align:center;font-size:14px}
.gs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gs-tile{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;padding:2px 8px 8px}
.gs-tile.sold{filter:grayscale(.5) brightness(.8)}
.gs-tile h4{margin:0;font:400 18px var(--display);color:#ffe07a;text-shadow:var(--outline)}.gs-tile p{margin:0;color:#c9d6f0;font-size:13px;min-height:2.6em}
.gs-tile-art{width:78px;height:78px}.gs-tile-art>svg,.gs-tile-art>.sprite{width:100%;height:100%}
.gs-vip{position:relative;padding:10px 18px 12px;border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;
 background:url(/chrome/nw-vip-vorhang.png) center/cover no-repeat;display:flex;flex-direction:column;gap:6px}
.gs-vip.active{box-shadow:0 0 0 2px #ffd45a,0 0 18px #ffd45a66}
.gs-vip p{margin:0;color:#fff;font-weight:800;text-shadow:var(--outline)}.gs-vip ul{margin:0;padding-left:20px;color:#fff;font-weight:700}.gs-vip li::marker{content:"★ ";color:#ffd45a}
.gs-vip small{color:#c9d6f0}.gs-vip .gs-foot{grid-template-columns:auto auto;justify-content:center}
.gs-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gs-pack{display:flex;flex-direction:column;align-items:center;gap:4px;border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;padding:2px 6px 8px}
.gs-pack-art{width:100%;aspect-ratio:1.2;background:center/contain no-repeat}
.gs-pack-art[data-size="1"]{background-image:url(/chrome/nw-juwelen-1.png),radial-gradient(circle closest-side,#7fc0ff 0,#2b6fe0 45%,#0000 52%)}
.gs-pack-art[data-size="2"]{background-image:url(/chrome/nw-juwelen-2.png),radial-gradient(circle closest-side,#9ad0ff 0,#2b6fe0 50%,#0000 58%)}
.gs-pack-art[data-size="3"]{background-image:url(/chrome/nw-juwelen-3.png),radial-gradient(circle closest-side,#c8a8ff 0,#6b3fe0 55%,#0000 64%)}
.gs-pack-art[data-size="4"]{background-image:url(/chrome/nw-juwelen-4.png),radial-gradient(circle closest-side,#e0a8ff 0,#9a2fe0 58%,#0000 68%)}
.gs-pack-art[data-size="5"]{background-image:url(/chrome/nw-juwelen-5.png),radial-gradient(circle closest-side,#ffe08a 0,#e0902b 60%,#0000 72%)}
.gs-bonus{color:#8fe08f;font-weight:900;font-size:13px;min-height:1.2em}
.gs-extras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gs-extra{display:flex;flex-direction:column;align-items:center;gap:6px;border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;padding:2px 6px 8px}
.gs-extra-art{width:100%;aspect-ratio:1.2;background:center/contain no-repeat}
.gs-earn .gs-extra-art{background-image:url(/chrome/nw-kachel-verdienen.png)}.gs-coupon .gs-extra-art{background-image:url(/chrome/nw-kachel-gutschein.png)}.gs-web .gs-extra-art{background-image:url(/chrome/nw-kachel-webshop.png)}
.gs-coupon-form{display:flex;flex-direction:column;gap:6px;width:100%}.gs-coupon-form input{font:inherit;text-transform:uppercase;text-align:center;padding:6px;border-radius:6px;border:2px solid #3a4f86;background:#050c22;color:#fff}
.gs-right{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:0 0 0 14px;min-height:0;overflow:hidden}
.gs-merchant{position:absolute;inset:0 0 0 14px;background:url(/scenes/nw-juwelenhaendler.png) center 20%/cover no-repeat,linear-gradient(#0000,#050b1c 92%),url(/scenes/magic.jpg) center/cover no-repeat;border-radius:4px}
.gs-billing,.gs-legal,.gs-links{position:relative;z-index:1}
.gs-billing{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:14px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 14px 18px stretch;padding:4px 10px 10px;margin:0 6px}
.gs-bill-line{margin:0;font:400 16px var(--display);color:#fff;text-shadow:var(--outline)}.gs-bill-line .bad{color:#ff6b5a}.gs-bill-line .warn{color:#ffd45a}.gs-bill-line .ok{color:#8fe08f}
.gs-bill-sub{margin:0;color:#c9d6f0;font-size:13px}
.gs-legal{margin:0 8px;font-size:12px;line-height:1.35;color:#e5ecff;text-shadow:0 1px 2px #000}
.gs-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin:0 8px 2px}.gs-links a{color:#ffd45a;font-weight:800;font-size:13px}
.gs-dialog{max-width:620px}.gs-d-summary{display:grid;gap:6px;margin:6px 0 10px}.gs-d-summary div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff22;padding-bottom:4px}.gs-d-summary span{opacity:.8}
.gs-dialog .terms-check{margin:8px 0}
@media (max-width:900px){.gemshop{grid-template-columns:1fr}.gs-right{min-height:420px;padding:0}.gs-merchant{inset:0}.gs-items{grid-template-columns:repeat(2,1fr)}.gs-packs,.gs-extras{grid-template-columns:repeat(2,1fr)}}

/* Juwelenladen: alles ohne Scrollen im Fenster */
.gs-body{scrollbar-width:none}.gs-body::-webkit-scrollbar{display:none}
.gs-vips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gs-vip{padding:6px 12px 10px}.gs-vip .gs-ribbon{font-size:18px}.gs-vip ul{padding-left:16px;font-size:14px;min-height:3.2em}
.gs-vip .gs-foot{grid-template-columns:1fr;justify-items:center;gap:4px}
.gs-packs{grid-template-columns:repeat(5,1fr);gap:8px}
.gs-pack{border-width:10px;border-image-width:10px 14px;padding:2px 2px 6px}.gs-pack .gs-price,.gs-extra .gs-price{min-width:0;width:100%;font-size:15px;padding:2px 6px;border-width:8px 16px;border-image-width:8px 16px}
.gs-pack-art{aspect-ratio:1}
.gs-extra-art{aspect-ratio:1.5;display:grid;place-items:center}.gs-extra-art img{width:100%;height:100%;object-fit:contain}.gs-extra-art>svg,.gs-extra-art>.sprite{width:55%;height:80%}
.gs-dialog .terms-check{text-align:left;align-items:flex-start}.gs-dialog .terms-check span{font:600 13px/1.45 var(--ui);color:#dbe5ff;text-shadow:none;letter-spacing:0;text-transform:none}
.gs-d-summary span{white-space:nowrap}.gs-d-summary b{text-align:right}

/* Dungeons: 13 Medaillons mit Endgegner, großes Monsterbild der aktuellen Etage (Tusche-Serie) */
.dungeon-strip{position:absolute;left:3%;right:3%;top:64px;display:grid;grid-template-columns:repeat(13,1fr);gap:6px;z-index:2}
.dungeon-medal{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:none;cursor:pointer;color:#fff}
.dm-art{width:100%;aspect-ratio:1;border-radius:50%;border:4px solid #c9a24a;background:radial-gradient(circle at 50% 45%,#f3e6c8,#c9b48a 75%);box-shadow:0 3px 8px #000c;overflow:hidden;display:grid;place-items:center}
.dm-art img{width:92%;height:92%;object-fit:contain}
.dm-no{position:absolute;left:-2px;top:-2px;min-width:22px;height:22px;border-radius:11px;background:#0b1a44;border:2px solid #c9a24a;font:400 13px/18px var(--display);text-align:center}
.dm-state{font:400 11px var(--display);color:#ffd45a;text-shadow:var(--outline);white-space:nowrap}
.dm-name{display:none}
.dungeon-medal.chosen .dm-art{border-color:#ffd45a;box-shadow:0 0 0 3px #ffd45a88,0 3px 10px #000}
.dungeon-medal[data-status="future"] .dm-art img,.dungeon-medal[data-status="sealed"] .dm-art img,.dungeon-medal[data-status="locked"] .dm-art img,.dungeon-medal[data-status="nokey"] .dm-art img{filter:brightness(0) opacity(.55)}
.dungeon-medal[data-status="future"] .dm-art,.dungeon-medal[data-status="sealed"] .dm-art{border-color:#6d7891;background:radial-gradient(circle at 50% 45%,#b8bfcf,#7d879c 75%)}
.dungeon-medal[data-status="done"] .dm-state{color:#8fe08f}
.dungeon-panel .dungeon-foe{width:150px;height:150px;border-width:8px;background:radial-gradient(circle at 50% 45%,#f3e6c8,#c9b48a 78%) padding-box}
.dungeon-foe img{width:100%;height:100%;object-fit:contain}
.dungeon-foe.veiled img{filter:brightness(0) opacity(.6)}
.dungeon-floors{display:flex;gap:4px;margin:4px 0}
.dungeon-floors .df{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:400 12px var(--display);color:#9fb4d8;background:#0b1a44;border:2px solid #3a4f86}
.dungeon-floors .df.done{background:#2e6b2e;border-color:#8fe08f;color:#fff}.dungeon-floors .df.now{background:#ffd45a;border-color:#fff;color:#2a1606}.dungeon-floors .df.boss{border-radius:6px}
.fighter.enemy .fighter-art:has(.monster-art){background:radial-gradient(circle at 50% 45%,#f3e6c8,#c9b48a 78%)}
.monster-art{width:100%;height:100%;object-fit:contain}
#dungeon-spots.dungeon-strip{inset:auto;left:6%;right:6%;top:72px;bottom:auto;aspect-ratio:auto;gap:4px 8px}
.dungeon-strip .dm-art{max-width:78px;margin:0 auto}
.dungeon-strip .dungeon-medal{min-width:0}
/* Tusche-Menüsymbole: Motiv füllt den Rahmen wie in der Vorschau des Icon-Pakets */
.tile>.sprite{width:84%;height:84%;margin:8%}

/* Tusche: lebendige Orte */
.view:is(.fame,.guild,.achievements,.dice,.jeweler){display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.3fr);gap:18px;align-items:stretch;min-height:100%;height:auto;padding:0}
.place-story{position:relative;min-width:0;min-height:580px;overflow:hidden;border:2px solid #ae873b;border-radius:5px;background:#102b35;isolation:isolate}
.place-story>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center}
#view-fame .place-story>img,#view-guild .place-story>img{object-position:100% center}
#view-achievements .place-story>img{object-position:90% center}
.place-caption{position:absolute;bottom:0;left:0;right:0;padding:22px 18px;background:#10202af2;border-top:2px solid #ae873b;color:#f3e1b8}
.place-caption .place-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#ddb65c;margin:0 0 8px;font-weight:800}
.place-caption h2{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15;color:#ffd45a;margin:0 0 10px}
.place-caption p{font-size:14px;line-height:1.5;margin:0}
.place-workspace{display:flex;flex-direction:column;gap:14px;min-width:0;align-self:start;padding:10px 0 18px}
.place-workspace>.panel-title{margin:0 30px 6px;text-align:center}
.fame-table-wrap{flex:none;max-height:60vh;overflow:auto}
.fame-tabs .tab{min-width:0;flex:1}
.fame-nav{gap:8px;flex-wrap:wrap}
.guild-none{max-width:none;margin:0}.guild-own{min-width:0}
.guild-cols{grid-template-columns:minmax(0,1fr)}
.guild-head{flex-wrap:wrap}.guild-form input{min-width:0;max-width:100%}
.ach-grid{grid-template-columns:minmax(0,1fr)}
.ach-card{filter:none;background:#102935;border-color:#536b74}
.ach-card.done{box-shadow:none;border-color:#ddb65c;background:#25343a}
.act-intro{max-width:none;margin:0;line-height:1.5;color:#ded9c7}
.jw-offers{flex-wrap:wrap;justify-content:center}.jw-offer{min-width:0;flex:1 1 125px}
.shell-table{width:100%;padding-left:8px;padding-right:8px;gap:12px;justify-content:center;background:#2a2118;border:2px solid #8d6d3e;border-radius:8px}
.shell-cup{width:clamp(70px,8vw,130px);flex:0 1 130px}
.shell-cup .cup{clip-path:none;background:transparent url(/chrome/ts-nw-huetchen.png) center bottom/contain no-repeat;box-shadow:none;border-radius:0;height:130px}
.shell-cup .cup::after{display:none}.shell-cup.chosen .cup{filter:drop-shadow(0 3px 1px #000)}
.shell-cup .coin{background:transparent url(/chrome/ts-nw-icon-gold.png) center/contain no-repeat;box-shadow:none;border:0}
.shell-bets{flex-wrap:wrap;justify-content:center}.shell-bets button{min-width:0}
.class-art-big{min-height:0;overflow:hidden;position:relative}
.class-art-big.has-image{height:min(54vh,480px)}
.class-art-big.has-image img{position:absolute;inset:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;pointer-events:none}
.class-nav{position:relative;z-index:2}
@media(max-width:900px){.class-art-big.has-image{height:min(52vh,460px)}}
@media(min-width:901px){
 #view-character .char-right{background-image:url(/scenes/ts-nw-krieger-matte.png),url(/chrome/c-surface-cobalt.jpg);background-position:center bottom 28px,center;background-size:auto 72%,cover;background-repeat:no-repeat,no-repeat}
 #view-character[data-cls="2"] .char-right{background-image:url(/scenes/ts-nw-magier-matte.png),url(/chrome/c-surface-cobalt.jpg)}
 #view-character[data-cls="3"] .char-right{background-image:url(/scenes/ts-nw-kundschafter-matte.png),url(/chrome/c-surface-cobalt.jpg)}
}
.ui-ink{display:inline-block;width:1.5em;height:1.5em;object-fit:contain;vertical-align:middle;flex-shrink:0}
.purse .ui-ink{width:25px;height:25px}.plus-button .ui-ink{width:80%;height:80%}
.gs-item-top>.ui-ink{width:24px;height:24px}.gs-item-art>.ui-ink{width:100%;height:100%}
.stage-close,.dialog-x{font-size:0;background-image:url(/chrome/ts-nw-icon-schliessen.png);background-position:center;background-size:72%;background-repeat:no-repeat}
.entrance{background-image:linear-gradient(#08151c30,#08151ca0),url(/scenes/ts-nw-start.jpg);background-position:center;background-size:cover}
.canvas-town{background-image:url(/scenes/ts-nw-stadt.jpg)}
.canvas-inn{background-image:url(/scenes/ts-nw-taverne-v4.png)}
.shop-scene[data-shop="smith"]{background-image:url(/scenes/ts-nw-schmied-v2.jpg)}
.shop-scene[data-shop="magic"]{background-image:url(/scenes/ts-nw-zauberladen.jpg)}
.gs-merchant{background-image:url(/chrome/ts-nw-juwelenhaendler.jpg);background-position:center 20%;background-size:cover}
.gs-vip{background-image:url(/chrome/ts-nw-vip-vorhang.jpg);background-position:center;background-size:cover}
.gs-pack-art[data-size="1"]{background-image:url(/chrome/ts-nw-juwelen-1.png)}
.gs-pack-art[data-size="2"]{background-image:url(/chrome/ts-nw-juwelen-2.png)}
.gs-pack-art[data-size="3"]{background-image:url(/chrome/ts-nw-juwelen-3.png)}
.gs-pack-art[data-size="4"]{background-image:url(/chrome/ts-nw-juwelen-4.png)}
.gs-pack-art[data-size="5"]{background-image:url(/chrome/ts-nw-juwelen-5.png)}
@media(min-width:901px){.window>.stage:is([data-scene="fame"],[data-scene="guild"],[data-scene="achievements"],[data-scene="dice"],[data-scene="jeweler"]){overflow:auto}}
@media(max-width:1150px){.view:is(.fame,.guild,.achievements,.dice,.jeweler){grid-template-columns:minmax(0,1fr)}.place-story{min-height:300px}.place-story>img{object-position:center 40%}.place-caption{left:auto;top:0;width:35%;display:flex;flex-direction:column;justify-content:center;border-top:0;border-left:2px solid #ae873b}.fame-table-wrap{max-height:65vh}.ach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.place-story{min-height:360px}.place-story>img{height:250px;object-position:center}.place-caption{left:0;top:auto;bottom:0;width:auto;min-height:110px;border-left:0;border-top:2px solid #ae873b;padding:12px}.place-caption h2{font-size:23px;margin-bottom:5px}.place-caption p{font-size:12px}.place-caption .place-eyebrow{display:none}.ach-grid{grid-template-columns:minmax(0,1fr)}.shell-cup{width:70px}.place-workspace>.panel-title{font-size:22px}.jw-offer{flex-basis:100px}}
/* Erfolge: 14 Karten in zwei Spalten, damit alles ohne Scrollen ins Fenster passt */
@media (min-width:1151px){#view-achievements .ach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #view-achievements .ach-card{padding:2px 8px;border-width:9px;border-image-width:9px 11px;gap:8px}
 #view-achievements .ach-icon{width:34px;height:34px}#view-achievements .ach-body b{font-size:14px}#view-achievements .ach-body small{font-size:11px;line-height:1.25}
 #view-achievements .place-workspace{gap:8px;padding-top:4px}}
/* Tusche-Schriftzug statt Textlogo; Nachtsilhouette unten in der Seitenleiste */
.side-logo{font-size:0!important;color:transparent!important;text-shadow:none!important;border:0!important;border-image:none!important;padding:0!important;width:100%;max-width:290px;aspect-ratio:720/245;margin:0 auto 8px!important;background:url(/chrome/mythmongers-logo-v1.png) center/contain no-repeat!important}
.entrance .logo.big{font-size:0;width:min(640px,88vw);aspect-ratio:720/245;background:url(/chrome/mythmongers-logo-v1.png) center/contain no-repeat;text-shadow:none}
.entrance .logo.big span{display:none}
.creator-steps .logo{font-size:0;width:100%;aspect-ratio:720/245;background:url(/chrome/mythmongers-logo-v1.png) center/contain no-repeat}.creator-steps .logo span{display:none}
@media (min-width:901px){.window>.side{position:relative;isolation:isolate}.window>.side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background-size:100% auto!important;background:url(/chrome/ts-nw-seitenleiste-nacht.png) center bottom/100% auto no-repeat;opacity:.55;z-index:-1;pointer-events:none}}
/* Rucksack in Tusche (ersetzt die SVG-Zeichnung) */
.bag-art{aspect-ratio:1!important;background:url(/chrome/ts-nw-rucksack.png) center/contain no-repeat}.bag-art use{display:none}

/* Gezeichnetes Rucksack-Asset, native transparente PNG. */
.bag-toggle img.bag-art{aspect-ratio:1;object-fit:contain;filter:none;background:none}
/* Dungeonkarte: nummerierte Orte auf der Landkarte statt einer Medaillon-Reihe. */
#dungeon-scene{display:flex;flex-direction:column;overflow:hidden;background:#071b25}
.dungeon-map-viewport{position:relative;flex:1;min-height:340px;overflow:auto;overscroll-behavior:contain}
.dungeon-map-viewport:focus-visible{outline:2px solid #ffd45a;outline-offset:-4px}
.dungeon-map-viewport>.canvas-dungeons{position:relative;left:auto;top:auto;transform:none;width:100%;height:100%;min-height:340px;aspect-ratio:auto;background-image:url(/scenes/ts-nw-dungeonkarte-13.jpg);background-size:100% 100%}
#dungeon-spots.dungeon-map-markers{position:absolute;inset:0;display:block;aspect-ratio:auto}
.dungeon-map-markers .dungeon-medal{position:absolute;left:var(--map-x);top:var(--map-y);transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:2px solid #c9a24a;border-radius:50%;background:#0a2333;box-shadow:0 3px 0 #000a,0 0 0 3px #071b2588;color:#ffe59a}
.dungeon-map-markers .dm-art{display:none}
.dungeon-map-markers .dm-no{position:static;display:grid;place-items:center;width:100%;height:100%;min-width:0;border:0;background:none;font:400 18px var(--display);color:inherit}
.dungeon-map-markers .dm-name,.dungeon-map-markers .dm-state{display:none;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.dungeon-map-markers .dm-name{top:calc(100% + 5px);padding:4px 8px;border:1px solid #c9a24a;border-radius:4px;background:#071b25f5;font:400 12px var(--display);color:#ffe59a;box-shadow:0 2px 5px #0008}
.dungeon-map-markers .dm-state{top:calc(100% + 33px);padding:2px 5px;border-radius:3px;background:#071b25ed;font-size:10px}
.dungeon-map-markers .dungeon-medal:is(:hover,:focus-visible,.chosen){z-index:5;border-color:#ffe59a;background:#294c5b;box-shadow:0 0 0 3px #ffcf4370,0 3px 6px #000}
.dungeon-map-markers .dungeon-medal:is(:hover,:focus-visible,.chosen) :is(.dm-name,.dm-state){display:block}
.dungeon-map-markers .dungeon-medal:focus-visible{outline:3px solid white;outline-offset:4px}
.dungeon-map-markers .dungeon-medal[data-status="done"]{background:#214e34;color:#c4ffb8;border-color:#87ba79}
.dungeon-map-markers .dungeon-medal:is([data-status="future"],[data-status="sealed"]){background:#29273e;color:#d7cceb;border-color:#9586b0;border-style:dashed}
.dungeon-map-markers .dungeon-medal:is([data-status="open"],[data-status="key"],[data-status="enter"]){background:#164e4b;border-color:#70ddc4}
#dungeon-scene .dungeon-panel{position:relative;inset:auto;flex-shrink:0;margin:8px 16px 14px;max-width:none;z-index:6}
#dungeon-scene .dungeon-panel .dungeon-foe{width:106px;height:106px}
.dungeon-map-hint{display:none}
@media(max-width:900px){
 #view-dungeon{height:auto}
 #dungeon-scene{height:auto;max-height:none}
 .dungeon-map-viewport{height:540px;min-height:0;flex:none}
 .dungeon-map-viewport>.canvas-dungeons{width:850px;min-width:100%;height:540px;min-height:0}
 .dungeon-map-hint{display:block;margin:4px 18px;color:#a9cbd6;font-size:12px}
 #dungeon-scene .dungeon-panel{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;margin:8px 12px 18px;padding:12px}
 #dungeon-scene .dungeon-panel .dungeon-foe{width:76px;height:76px}
 #dungeon-scene .stable-info{min-width:0}
 #dungeon-scene .dungeon-floors{flex-wrap:wrap}
 #dungeon-scene .dungeon-floors .df{width:20px;height:20px;font-size:10px}
 #dungeon-scene #dungeon-action{grid-column:1/-1;min-width:0;width:100%}
 #dungeon-scene .dungeon-progress{flex-wrap:wrap;gap:4px}
 #dungeon-scene .dungeon-progress .bar{flex-basis:100%}
}

/* Ruhmeshalle: Bild gespiegelt, damit der Herold zur Liste zeigt; die Liste passt ohne Scrollbalken ins Fenster */
#view-fame .place-story>img,#view-guild .place-story>img{transform:scaleX(-1)}
@media (min-width:901px){.window>.side{overflow:hidden}
 #view-fame .fame-table-wrap{max-height:none;overflow:hidden}
 #view-fame .fame-table td{padding:1px 8px;line-height:1.15}#view-fame .fame-face{width:26px;height:26px}
 #view-fame .fame-table th{padding:3px 8px}#view-fame .place-workspace{gap:8px;padding-bottom:6px}}
/* Laden: Waren und Knopf untereinander im Fluss (keine Überlappung), Größe richtet sich nach der Fensterhöhe; gleich große Preisschilder */
@media (min-width:901px){
 #shop-scene{container-type:size}
 .shop-scene .offer-area{top:12%;width:min(40%,calc((60cqh - 110px)/1.45));gap:0}
 .shop-scene .offer-grid{row-gap:1.2cqh;column-gap:8%}
 .shop-scene .offer .price{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:10px;height:34px;box-sizing:border-box;margin-top:4px;padding:0 6px;white-space:nowrap;font-size:15px;line-height:1}
 .shop-scene .offer .price .ui-ink,.shop-scene .offer .price .sprite,.shop-scene .offer .price svg{width:18px;height:18px;flex:none}
 .shop-scene .offer-area .reroll,.shop-scene .reroll{position:static;top:auto;bottom:auto;left:auto;width:130%;margin:2.4cqh 0 0 -15%;align-self:auto}
}
/* Laden mit geöffnetem Rucksack: Waren und Knopf rücken zusammen, damit sie über dem Rucksackfach enden */
@media (min-width:901px){
 body.bag-open .shop-scene .offer-area{top:10%;width:min(40%,calc((88cqh - 420px)/1.38))}
 body.bag-open .shop-scene .offer-grid{row-gap:.6cqh}
 body.bag-open .shop-scene .offer .price{height:28px;font-size:13px;margin-top:2px}
 body.bag-open .shop-scene .offer-area .reroll{margin-top:1.2cqh;min-height:40px}
}

/* Taverne: Mondtau-Knopf an der Reiselust und Hinweis Erfahrung/Gold auf der Auftragskarte */
.thirst{grid-template-columns:auto 1fr auto auto}
.thirst .drink{min-height:30px;font-size:12px;white-space:nowrap}
.quest-focus{align-self:flex-start;font:400 12px var(--display);padding:1px 8px;border-radius:10px;color:#fff;text-shadow:var(--outline)}
.quest-focus.xp{background:#2f5bb0}.quest-focus.gold{background:#a87814}
@media (min-width:901px){.tavern-scene .thirst{left:16%;right:16%}}
/* Lebendige Taverne: unveränderte native Bilder; nur das jeweilige Gesicht wird angezeigt. */
.canvas-inn[data-ambience="morning"]{background-image:url(/scenes/ts-nw-taverne-morning-v1.png)}
.canvas-inn .tavern-attention{position:absolute;inset:0;z-index:1;pointer-events:none}
.canvas-inn #tavern-spots{z-index:2}
.tavern-face{position:absolute;inset:0;opacity:0;pointer-events:none;background:url(/scenes/ts-nw-taverne-attention-v1.png) center/100% 100% no-repeat;transition:opacity 110ms linear}
.tavern-face[data-face="1"]{mask-image:radial-gradient(ellipse 7% 11% at 25.1% 29.3%,#000 76%,transparent 100%)}
.tavern-face[data-face="2"]{mask-image:radial-gradient(ellipse 6.3% 10.5% at 46.5% 41.5%,#000 76%,transparent 100%)}
.tavern-face[data-face="3"]{mask-image:radial-gradient(ellipse 6.4% 10.5% at 77.5% 44%,#000 76%,transparent 100%)}
.canvas-inn[data-life-ready="true"][data-attention="1"] [data-face="1"],.canvas-inn[data-life-ready="true"][data-attention="2"] [data-face="2"],.canvas-inn[data-life-ready="true"][data-attention="3"] [data-face="3"]{opacity:1}
.canvas-inn .quest-figure:hover{background:none}
@media(prefers-reduced-motion:reduce){.tavern-face{transition:none}}

/* ===== UI-Kit A „Nachtwache“: Seitenleiste ===== */
@media (min-width:901px){
 .window>.side{background:#09232e;overflow:hidden;padding:18px 20px 10px 24px;display:flex;flex-direction:column;gap:0;font-family:Georgia,'Times New Roman',serif}
 .window>.side::after{display:none!important}
 .side-logo{max-width:300px!important;aspect-ratio:720/240;margin:0 auto 6px!important;background:url(/chrome/mythmongers-logo-v1.png) center/contain no-repeat!important;flex:none}
 .profile{display:grid;grid-template-columns:clamp(84px,9.2vh,104px) 1fr 36px;gap:10px;align-items:start;padding-bottom:4px}
 .portrait-small{position:relative;width:100%!important;height:auto!important;aspect-ratio:1122/1402;border:0!important;border-image:none!important;background:none!important;padding:0;box-shadow:none}
 .portrait-small::after{content:"";position:absolute;inset:0;background:url(/chrome/kit-a/nw-a-portrait-frame.png) center/100% 100% no-repeat;pointer-events:none;z-index:2}
 .portrait-small .pt{position:absolute;left:9%;top:7%;width:82%;height:76%;overflow:hidden;background:#102c3a}
 .portrait-small .pt img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
 .side-plate{position:absolute;left:12%;right:12%;bottom:6%;z-index:3;font:bold 11px Georgia,serif;color:#ead9b3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
 .portrait-small .level-badge{position:absolute;right:-12px;left:auto;top:-6px;bottom:auto;z-index:4;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:0;padding:0;background:url(/chrome/kit-a/nw-a-level.svg) center/contain no-repeat;font:bold 14px Georgia,serif;color:#ead9b3;box-shadow:none}
 .purse{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin:22px 0 0;padding:0}
 .purse li{display:flex;align-items:center;gap:5px;font:bold clamp(14px,1.6vh,16px) Georgia,serif;color:#ead9b3;font-variant-numeric:tabular-nums;text-shadow:none}
 .purse li:first-child,.purse li:nth-child(2){grid-column:1 / -1}
 .purse li .ui-ink,.purse li img{width:24px;height:26px;object-fit:contain}
 a.plus-button,.plus-button{width:34px;height:34px;margin-top:28px;border:0;padding:0;background:url(/chrome/kit-a/nw-a-plus-normal.svg) center/contain no-repeat!important;box-shadow:none;border-radius:0}
 .plus-button>*{display:none}.plus-button:hover{background-image:url(/chrome/kit-a/nw-a-plus-hover.svg)!important}.plus-button:active{background-image:url(/chrome/kit-a/nw-a-plus-pressed.svg)!important}
 .side>.flourish{height:12px;margin:4px 0;background:url(/chrome/kit-a/nw-a-divider.svg) center/100% 100% no-repeat!important;flex:none}
 .side>.flourish:nth-of-type(2){display:none}
 #menu{display:flex;flex-direction:column;gap:clamp(3px,.7vh,8px);min-height:0;flex:1}
 .menu-group .group-title{display:flex;align-items:center;gap:8px;margin:0 0 3px;color:#91a5aa;font:bold 11px/1.3 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:none}
 .menu-group .group-title::after{content:"";height:1px;background:#526966;opacity:.6;flex:1}
 .nav-rows{display:flex;flex-direction:column;gap:2px}
 .nav-row{position:relative;isolation:isolate;display:flex;align-items:center;gap:9px;width:100%;height:clamp(26px,3.25vh,42px);padding:0 10px 0 12px;border:0;background:none;color:#ead9b3;text-align:left;cursor:pointer;font:bold clamp(14px,1.75vh,18px)/1 Georgia,'Times New Roman',serif}
 .nav-row::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/chrome/kit-a/nw-a-row-normal.png) 51.6% 50.3%/101.4% 196.7% no-repeat;opacity:.65;transition:filter .12s}
 .nav-row[aria-current=page]::before{background-image:url(/chrome/kit-a/nw-a-row-selected.png);background-size:101.26% 212%;background-position:55.6% 49.9%;opacity:1}
 .nav-row[aria-current=page]::after{content:"";position:absolute;left:-4px;top:12%;bottom:12%;width:4px;border-radius:2px;background:#e3b04b}
 .nav-row:hover::before{filter:brightness(1.24)}.nav-row:active::before{filter:brightness(.78)}
 .nav-row.locked{color:#98a4a7}.nav-row.locked::before{filter:saturate(.12) brightness(.83)}.nav-row.locked .nav-icon{filter:saturate(.15);opacity:.65}
 .nav-icon{height:86%;aspect-ratio:1;object-fit:contain;flex:none}
 .nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .nav-chevron{width:10px;height:16px;object-fit:contain;flex:none}.nav-lock{height:60%;object-fit:contain;opacity:.75;flex:none}
 .nav-badge{display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;background:url(/chrome/kit-a/nw-a-badge.svg) center/100% 100% no-repeat;color:#11212a;font:bold 12px Georgia,serif}
 .nav-row:focus-visible{outline:2px solid #f3d698;outline-offset:2px}
 .side-foot{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:6px}
 .side-foot::before{content:"";display:block;width:100%;aspect-ratio:640/213;max-height:9vh;background:url(/chrome/kit-a/nw-a-footer.png) center bottom/contain no-repeat}
 .side-links{display:flex;justify-content:center;gap:22px;padding-top:2px}
 .side-links .link-button{font:bold 13px Georgia,serif;color:#a8c0c6;text-decoration:underline;text-underline-offset:3px}
}
@media (min-width:901px){
 .window>.side{padding-top:12px;padding-bottom:8px}
 .side-logo{height:min(84px,9vh);width:100%;aspect-ratio:auto}
 .profile{grid-template-columns:min(96px,10vh) 1fr 34px}
 .purse{margin-top:min(18px,2vh)}
 #menu{gap:min(6px,.6vh);overflow:hidden}
 .menu-group .group-title{margin-bottom:2px;font-size:10px}
 .nav-row{height:clamp(22px,calc((100vh - 430px)/18),42px);font-size:clamp(13px,calc((100vh - 430px)/31),18px)}
 .side-foot::before{max-height:7vh}
}
@media (min-width:901px){.side-foot{margin-top:auto}.side-foot::before{max-height:6.5vh}.side-links{padding:0 0 4px}.side-links .link-button{line-height:1.2}.nav-icon{height:94%}}
/* Kit A: Menüzeilen als Neun-Teile-Grafik (keine Verzerrung bei jeder Höhe) und Holzastrahmen um die Seitenleiste */
@media (min-width:901px){
 .window>.side{border:30px solid transparent;border-image:url(/chrome/kit-a/nw-a-panel-frame-cut.png) 100 / 30px stretch;padding:4px 6px 2px}
 .nav-row::before{background:none;border-style:solid;border-width:6px 10px;border-image:url(/chrome/kit-a/nw-a-row-normal-cut.png) 22 34 fill / 6px 10px stretch;opacity:.8}
 .nav-row[aria-current=page]::before{background:none;border-image:url(/chrome/kit-a/nw-a-row-selected-cut.png) 22 40 fill / 6px 12px stretch;opacity:1}
 .nav-row[aria-current=page]::after{display:none}
 .nav-row{padding-left:14px}
 .nav-row{height:clamp(22px,calc((100vh - 470px)/18),42px);font-size:clamp(13px,calc((100vh - 470px)/30),18px)}
}
@media (min-width:901px){
 .window>.side{border-width:34px;border-image-width:34px}
 .menu-group .group-title{margin-left:0!important;padding-left:2px;overflow:visible}
 .menu-group:last-child{margin-top:min(8px,.8vh)}
 .nav-row{height:clamp(28px,calc((100vh - 420px)/14.5),46px);font-size:clamp(15px,calc((100vh - 420px)/24),19px)}
 .nav-row::before{border-width:7px 11px;border-image-width:7px 11px}
 .nav-row[aria-current=page]::before{border-image-width:7px 13px}
 .nav-icon{height:100%;margin:-2px 0}
}
@media (min-width:901px){
 #menu{padding:0 3px}
 .side-logo{height:min(80px,8vh)}
 .profile{grid-template-columns:min(90px,9vh) 1fr 34px}
 .nav-row{height:clamp(26px,calc((100vh - 470px)/14),46px);font-size:clamp(14px,calc((100vh - 470px)/24),19px)}
 .side-foot::before{max-height:6vh}
}
/* Kit A: Zeilen teilen sich die freie Höhe, damit alle 14 immer ins Fenster passen */
@media (min-width:901px){
 #menu{display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden}
 .menu-group{display:flex;flex-direction:column;flex-basis:0;min-height:0}
 .nav-rows{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:3px}
 .nav-row{flex:1 1 0;height:auto;min-height:22px;max-height:46px}
 .menu-group .group-title{padding-left:6px!important;text-indent:0!important;flex:none}
}
@media (min-width:901px){.side-foot::before{max-height:5.5vh}.side-links{padding-bottom:6px}.menu-group:last-child .nav-row{max-height:min(46px,calc((100vh - 470px)/14))}}
@media (min-width:901px){.window>.side{padding-bottom:12px}.side-links .link-button{padding:0}}
@media (min-width:901px){.profile{margin:0!important;padding:0 6px 4px 8px!important;box-sizing:border-box;width:100%;grid-template-columns:min(88px,9vh,28%) minmax(0,1fr) 30px!important;gap:8px}.portrait-small{justify-self:start;max-width:100%}a.plus-button,.plus-button{width:30px;height:30px;justify-self:end}.purse{min-width:0}.purse li{min-width:0;overflow:hidden}}
@media (min-width:901px){.purse{grid-template-columns:auto auto!important;justify-content:start;column-gap:14px}.purse li{white-space:nowrap;overflow:visible}}
/* Kit A: Kopf wie in der Vorlage – großes Porträt mit Namensschild, Stufenring daneben, Ressourcen in Zeilen mit Trennlinien, Plus neben Gold */
@media (min-width:901px){
 .profile{position:relative;grid-template-columns:42% minmax(0,1fr)!important;gap:10px!important;padding:0 4px 2px!important}
 .portrait-small{grid-row:1 / span 2;overflow:visible}
 .side-plate{font-size:13px;bottom:5.5%}
 .portrait-small .level-badge{left:calc(100% + 12px);right:auto;top:2px;width:34px;height:34px;font-size:16px}
 .profile::before{content:"";position:absolute;left:calc(42% + 62px);right:4px;top:19px;height:1px;background:#526966}
 .purse{grid-column:2;margin:44px 0 0!important;display:grid;grid-template-columns:1fr 1fr!important;gap:0!important;border-top:1px solid #52696688}
 .purse li{padding:5px 0 5px 6px;border-bottom:1px solid #52696666;font-size:clamp(14px,1.7vh,17px)}
 .purse li:nth-child(1),.purse li:nth-child(2){grid-column:1 / -1}
 .purse li:nth-child(4){border-left:1px solid #52696666;padding-left:10px}
 .purse li .ui-ink,.purse li img{width:26px;height:26px}
 a.plus-button,.plus-button{position:absolute;right:6px;top:48px;margin:0!important;width:32px;height:32px}
 .side-foot::before{max-height:10vh;aspect-ratio:640/213}
 .side-links{gap:12px}.side-links>*+*::before{content:"|";margin-right:12px;color:#526966;text-decoration:none;display:inline-block}
}
@media (min-width:901px){.side-foot::before{max-height:7vh}.profile{grid-template-columns:38% minmax(0,1fr)!important}.profile::before{left:calc(38% + 62px)}.side>.flourish{margin:2px 0}}
/* Kit A „poppiger“ wie in der Vorlage: kräftigere Zeilen, größere Symbole und Schrift, hellere Texte */
@media (min-width:901px){
 .nav-row::before{opacity:1;filter:brightness(1.12) saturate(1.1)}
 .nav-row[aria-current=page]::before{filter:brightness(1.25) saturate(1.3)}
 .nav-row{gap:12px;padding-left:10px;color:#f3e6c4;font-size:clamp(15px,calc((100vh - 440px)/22),21px);text-shadow:0 1px 0 #000,0 0 6px #0008;letter-spacing:.2px}
 .nav-icon{height:128%;margin:-6px 0;filter:drop-shadow(0 2px 2px #000a)}
 .nav-chevron{width:12px;height:19px;filter:brightness(1.3)}
 .nav-badge{min-width:24px;height:24px;font-size:13px}
 .menu-group .group-title{font-size:12px;letter-spacing:.18em;color:#a9bcc0}
 .side-logo{height:min(96px,10vh)}
 .purse li{font-size:clamp(15px,1.8vh,18px);color:#f3e6c4}
 .purse li .ui-ink,.purse li img{width:30px;height:30px}
 .side-plate{font-size:14px;color:#f3e6c4}
}
/* Kit A: satte, leuchtende Symbole wie in der Vorlage */
@media (min-width:901px){
 .nav-icon{filter:saturate(1.55) contrast(1.12) brightness(1.1) drop-shadow(0 2px 2px #000c)}
 .nav-row.locked .nav-icon{filter:saturate(.25) brightness(.8)}
 .purse li .ui-ink,.purse li img{filter:saturate(1.5) contrast(1.1) brightness(1.08) drop-shadow(0 1px 1px #000a)}
}
/* Kit A: Schrift Alegreya (SIL OFL, public/fonts) für Menü, Namensschild, Werte und Fußzeile */
@font-face{font-family:'Alegreya';src:url(/fonts/alegreya-latin.woff2) format('woff2');font-weight:400 900;font-display:swap}
@media (min-width:901px){
 .window>.side,.nav-row,.side-plate,.purse li,.portrait-small .level-badge,.side-links .link-button,.nav-badge{font-family:'Alegreya',Georgia,serif!important}
 .nav-row{font-weight:800;font-size:clamp(16px,calc((100vh - 430px)/20),22px);letter-spacing:.3px}
 .purse li{font-weight:800}.side-plate{font-weight:800}
 .menu-group .group-title{font-family:'Alegreya',Georgia,serif!important;font-weight:700;font-size:13px}
}
@media (min-width:901px){.window>.side *{font-variant-numeric:lining-nums tabular-nums}.purse li{font-size:clamp(16px,1.9vh,19px)!important}.portrait-small .level-badge{font-size:17px}}

/* Orte als begehbare Szenen: Funktion und IDs bleiben erhalten. */
.canvas-stable{background-image:url(/scenes/ts-nw-stall-mythisch-v1.jpg)}
.window>.stage:is([data-scene="dice"],[data-scene="jeweler"],[data-scene="guild"],[data-scene="mail"]){padding:0;background:#231c18;overflow:auto}
#view-dice,#view-jeweler,#view-guild,#view-mail{position:relative;display:block;isolation:isolate;min-height:max(760px,calc(100dvh - 36px));height:auto;padding:0;background-position:center;background-size:cover;background-repeat:no-repeat}
#view-dice{background-image:url(/scenes/ts-nw-dice-szene-v2.jpg)}
#view-jeweler{background-image:url(/scenes/ts-nw-jeweler-szene-v2.jpg)}
#view-guild{background-image:url(/scenes/ts-nw-guild-szene-v2.jpg)}
#view-mail{background-image:url(/scenes/ts-nw-kurierstube-v1.jpg)}
#view-dice>.place-story,#view-jeweler>.place-story,#view-guild>.place-story{display:none}
#view-dice .place-workspace,#view-jeweler .place-workspace,#view-guild .place-workspace{position:relative;z-index:1;align-self:auto;gap:14px}
#view-dice .panel-title,#view-jeweler .panel-title,#view-guild .panel-title,#view-mail>.panel-title{border:1px solid #b29761;border-image:none;border-radius:5px;background:#171d1de8;color:#f7dfa9;font:700 25px/1.2 'Alegreya',Georgia,serif;text-shadow:1px 1px #000;padding:9px 22px;margin:0}
#view-dice .place-workspace{min-height:max(760px,calc(100dvh - 36px));padding:26px 4%;width:100%}
#view-dice .panel-title{align-self:center;max-width:90%}
#view-dice .act-intro{position:absolute;top:100px;left:5%;width:39%;max-width:510px;padding:18px;border:1px solid #927956;border-radius:4px;background:#171d1ee8;color:#f0dfbd;font-size:14px;line-height:1.5}
#view-dice .shell-table{position:absolute;top:55%;left:14%;right:8%;width:auto;height:24%;min-height:200px;min-width:0;margin:0;padding:0 0 12px;gap:7%;border:0;border-image:none;border-radius:0;background:none;box-shadow:none;align-items:flex-end}
#view-dice .shell-cup{flex:0 1 130px;width:clamp(80px,8vw,130px)}
#view-dice .shell-result{position:absolute;top:81%;left:8%;right:8%;padding:5px 12px;border-radius:4px;background:#171c1de0;color:#f5ddb1;text-align:center;font-size:20px}
#view-dice .shell-result.act-ok{color:#b1e49c}#view-dice .shell-result.act-bad{color:#ffbf9c}
#view-dice .shell-bets{position:absolute;top:87%;left:8%;right:8%;margin:0}
#view-dice #shell-hint{position:absolute;bottom:2%;left:8%;right:8%;margin:0;text-align:center;color:#f5e1ba;text-shadow:1px 1px 2px #000}
#view-jeweler .place-workspace{margin:125px 0 24px 4%;padding:22px;width:47%;min-height:440px;border:12px ridge #715036;border-radius:6px;background:#153c30f5;box-shadow:0 10px 28px #0008}
#view-jeweler .place-workspace>.panel-title{font-size:23px;margin:0}
#view-jeweler .act-intro{color:#e2d7b4}
#view-jeweler .jw-offers{gap:10px}
#view-jeweler .jw-offers>.act-bad{padding:28px 18px;margin:0;width:100%;color:#5b3526;background:#f4e1b5;border:16px solid transparent;border-image:url(/chrome/ts-nw-schreibpapier-v1.jpg) 45 fill / 16px stretch;font:700 18px/1.4 'Alegreya',Georgia,serif;text-shadow:none}
#view-jeweler .jw-card{background:#092c24;border:1px solid #ac8e58;border-image:none;border-radius:4px}
#view-jeweler .jw-sockets{border:0;border-image:none;background:#0a271f;padding:14px;border-radius:4px}
#view-jeweler .jw-sockets .muted{color:#c8d8bd}#view-jeweler .label-title{color:#efd397}
#view-guild .place-workspace{width:55%;max-width:760px;margin:110px 0 28px 4%;padding:22px;border:10px ridge #69492f;border-radius:4px;background:#2a211bf5;box-shadow:0 10px 24px #0008}
#view-guild .guild-none{padding:18px 14px;color:#4f3827;border:18px solid transparent;border-image:url(/chrome/ts-nw-schreibpapier-v1.jpg) 45 fill / 18px stretch;background:#f4e1b5;text-shadow:none;font-family:'Alegreya',Georgia,serif}
#view-guild .guild-none .panel-title{background:none;color:#4f3827;text-shadow:none;border:0;padding:0 0 12px;font-size:28px}
#view-guild .guild-none .label-title,#view-guild .guild-none label{color:#674727}
#view-guild .guild-none .guild-list{color:#5e4b34;border:0;border-image:none;background:none;padding:0}
#view-guild .guild-none .muted{color:#68553e}
#view-guild .guild-none input{background:#fff9e8;color:#382b20;border:1px solid #92734f}
#view-guild .guild-none .guild-form{grid-template-columns:minmax(0,1fr);gap:10px}
#view-guild .guild-none .guild-form label,#view-guild .guild-none .guild-form input,#view-guild .guild-none .guild-form button{grid-column:1;width:100%}
#view-guild .guild-own{color:#eee0ba}
#view-guild .guild-own .guild-list,#view-guild .guild-own .guild-chat,#view-guild .guild-own .guild-skill{border:1px solid #816746;border-image:none;background:#161f1be8;border-radius:3px}
#view-guild .guild-own .tab{background:#233b30;border-color:#9c8055;border-image:none}
#view-guild .guild-own .guild-cols{grid-template-columns:minmax(0,1fr)}
#view-mail{padding:90px 3% 28px}
#view-mail>.panel-title{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;font-size:25px}
#view-mail .mail-cols{width:66%;margin-left:34%;gap:14px;align-items:start;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
#view-mail .mail-tools{flex-wrap:wrap;gap:8px}
#view-mail .mail-tools button{flex:1;min-width:0}
#view-mail .mail-list,#view-mail .mail-pane{border:18px solid transparent;border-image:url(/chrome/ts-nw-schreibpapier-v1.jpg) 45 fill / 18px stretch;background:#f4e1b5;color:#473526;text-shadow:none;font-family:'Alegreya',Georgia,serif;box-shadow:0 6px 16px #0007}
#view-mail .mail-list{min-height:210px;padding:12px 8px}
#view-mail .mail-pane{min-height:420px;padding:18px 12px}
#view-mail .mail-item button{color:#483828;background:#e8d7b3;border:0;border-bottom:1px solid #c2ab80;border-radius:0}
#view-mail .mail-item b,#view-mail .mail-pane h3{color:#463026}
#view-mail .mail-item small,#view-mail .mail-pane .kicker{color:#7c6648}
#view-mail .mail-item.unread b{color:#923b20}#view-mail .mail-item.active button{background:#d5bf90}
#view-mail .mail-pane .muted{color:#776448}
#view-mail .mail-pane input,#view-mail .mail-pane textarea{background:#fff8e7;color:#3a2e22;border:1px solid #9c805c}
#view-mail .mail-compose label{color:#5a422b}
#view-mail .mail-actions{flex-wrap:wrap}
@media(max-width:900px){
 #view-dice,#view-jeweler,#view-guild,#view-mail{height:auto;min-height:0;background-color:#251f19;background-size:auto 460px;background-position:68% top}
 #view-dice .place-workspace{padding:400px 22px 26px;min-height:0;gap:12px}
 #view-dice .panel-title{align-self:stretch;max-width:none;font-size:23px}
 #view-dice .act-intro,#view-dice .shell-table,#view-dice .shell-result,#view-dice .shell-bets,#view-dice #shell-hint{position:relative;inset:auto;width:100%;margin:0}
 #view-dice .act-intro{padding:16px;font-size:13px}
 #view-dice .shell-table{height:230px;min-height:230px;gap:5%;padding:85px 0 14px;background:#34271de8;border-bottom:2px solid #997449}
 #view-dice .shell-cup{width:76px;flex:0 1 76px}
 #view-dice .shell-result{font-size:18px}
 #view-jeweler .place-workspace{width:calc(100% - 36px);margin:355px 18px 22px;padding:15px;border-width:8px;min-height:0}
 #view-guild .place-workspace{width:calc(100% - 36px);margin:350px 18px 24px;padding:10px;border-width:7px}
 #view-guild .guild-none{padding:14px 6px;border-width:12px;border-image-width:12px}
 #view-mail{padding:350px 18px 24px}
 #view-mail .mail-cols{width:100%;margin:0;grid-template-columns:minmax(0,1fr)}
 #view-mail .mail-list{min-height:100px;max-height:240px}
 #view-mail .mail-pane{min-height:350px}
 #view-mail>.panel-title{top:24px;font-size:24px}
}


/* Die Szenen enthalten die oberen Panelabstände, damit kein leerer Streifen entsteht. */
#view-dice,#view-jeweler,#view-guild,#view-mail{display:flow-root}
#stable-scene .stable-panel{border:2px solid #9d8154;border-image:none;border-radius:5px;background:#242b23f0;box-shadow:0 4px 14px #0007}
#stable-scene #mount-name{color:#f3d69d}#stable-scene #mount-status{color:#c5d5bd}
#view-guild .guild-none .label-title,#view-guild .guild-none label{font-family:'Alegreya',Georgia,serif;text-shadow:none;font-weight:700}
#view-guild .guild-none .label-title{font-size:22px}
#view-guild .guild-none .guild-form label{font-size:16px}
#view-guild .guild-none .guild-form button{width:auto;max-width:340px;justify-self:center;align-self:center}
@media(min-width:901px){
 #view-mail{padding-top:370px}
 #view-mail .mail-cols{width:53%;margin-left:47%}
 #view-mail .mail-pane{min-height:390px}
 #view-mail .mail-list{min-height:180px}
}


/* Das neue beschriftete Menü braucht auch unter 901px begrenzte Icongrößen. */
@media(max-width:900px){
 .window>.side{height:auto;min-height:0;overflow:hidden}
 .side #menu{display:flex;flex-direction:row;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;padding:2px 4px 10px;max-height:140px}
 .side .menu-group{flex:0 0 auto!important;gap:4px}
 .side .nav-rows{display:flex;flex-direction:row;gap:6px}
 .side .nav-row{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:0 0 78px;width:78px;height:78px;min-height:44px;padding:6px 4px;background:#102b34;border:1px solid #85734d;border-radius:5px;color:#ead9b3;font:700 12px/1.1 'Alegreya',Georgia,serif}
 .side .nav-row[aria-current="page"]{background:#24554e;border-color:#e3b76b}
 .side .nav-icon{width:34px;height:34px;object-fit:contain}
 .side .nav-label{display:block;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .side .nav-chevron{display:none}
 .side .nav-lock{position:absolute;right:3px;top:3px;width:14px;height:16px;object-fit:contain}
 .side .nav-row.locked{color:#8da1a4}.side .nav-row.locked .nav-icon{opacity:.6;filter:saturate(.2)}
 .side .nav-row:focus-visible{outline:2px solid #f1d18e;outline-offset:2px}
 .side>.flourish{margin:4px 0;height:18px}
 .side .side-foot::before{display:none}
}

@media(max-width:900px){#view-mail{background-position:15% top}}
/* MythMongers: gemaltes Logo, natives transparentes PNG. */
.side-logo{background:url(/chrome/mythmongers-logo-v1.png) center/contain no-repeat!important;display:block!important;height:auto!important;aspect-ratio:3/1!important;padding:0!important}
.side-logo::before{content:none!important}
.entrance .logo.big,.creator-steps .logo{font-size:0!important;background:url(/chrome/mythmongers-logo-v1.png) center/contain no-repeat!important;aspect-ratio:3/1}
.entrance .logo.big{width:min(640px,88vw)}
.creator-steps .logo{width:100%}
.entrance .logo.big span,.creator-steps .logo span{display:none!important}

/* Logo „MythMongers“ (ersetzt den Übergangs-Schriftzug) */
.side-logo::before{content:none!important}
.side-logo{background:url(/chrome/ts-mm-logo.png) center/contain no-repeat!important;width:100%;height:min(92px,10vh)!important;padding:0!important;margin:0 auto 4px!important}
.entrance .logo.big,.creator-steps .logo{font-size:0!important;color:transparent!important;text-shadow:none!important;background:url(/chrome/ts-mm-logo.png) center/contain no-repeat!important;aspect-ratio:3/1!important}
.entrance .logo.big{width:min(680px,88vw)!important}.creator-steps .logo{width:100%!important}
.entrance .logo.big span,.creator-steps .logo span{display:none!important}
/* Logo frei vom Rahmen; bei niedrigen Fenstern Platz für alle Menüzeilen schaffen */
@media (min-width:901px){
 .side-logo{margin-top:clamp(6px,1.2vh,12px)!important;flex:none!important}

}
@media (min-width:901px) and (max-height:900px){
 .side-logo{height:min(66px,8.2vh)!important;margin-bottom:2px!important}
 .side-foot::before{display:none!important}
 .nav-row{min-height:19px!important}
}
@media (min-width:901px) and (max-height:740px){
 .window>.side .purse li{height:30px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important}
 .window>.side .purse .ui-ink{width:22px!important;height:22px!important}
 .window>.side .group-title{line-height:14px!important;height:14px!important}
 .side-logo{height:min(56px,8vh)!important}
}
@media (min-width:901px) and (max-height:740px){
 .window>.side .group-title{display:none!important}
 .window>.side .menu{gap:5px!important}.window>.side .nav-rows{gap:1px!important}
 .window>.side>.flourish{display:none!important}
}

/* MythMongers: drei Trankgrößen, feste Wirkungsfarben ohne Farbfilter. */
.slot>img.potion-art{display:block;width:86%;height:86%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #0008)}
.potion-slot>img.potion-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* Ausrüstungsplätze wachsen in breiten Fenstern mit der Spaltenbreite, damit das Porträt nicht flach wird
   (Verhältnis wie bei 1672×941); nie kleiner als bisher und nur so groß, wie die Fensterhöhe erlaubt */
@media (min-width:901px){
 #char-left{container-type:inline-size}
 #char-left .doll{--slot:max(clamp(66px,6vw,100px),min(16.5cqw,calc((100vh - 560px) / 4),160px))}
}

/* Mythische Waffen: Schein in Waffenfarbe und wandernder Lichtreflex (Maske = Waffen-PNG); aus bei reduzierter Bewegung */
.mythic-item{position:relative;display:inline-grid;place-items:center;isolation:isolate;width:100%;aspect-ratio:1;vertical-align:middle}.mythic-item>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 3px var(--mythic-aura,#c5a76b))}.mythic-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(110deg,transparent 37%,#fae6a040 45%,#fffaf0d9 49%,#def6ffb0 51%,#a6dfea30 55%,transparent 63%);background-size:320% 100%;background-position:160% 0;mask-image:var(--mythic-mask);-webkit-mask-image:var(--mythic-mask);mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;animation:mythic-sweep 5.4s ease-in-out infinite;animation-delay:var(--mythic-delay,0s);opacity:.68}.mythic-item:hover .mythic-sheen{animation-duration:2.5s;opacity:.85}@keyframes mythic-sweep{0%,16%{background-position:160% 0}65%,100%{background-position:-60% 0}}.mythic-effects-off .mythic-sheen{animation:none;opacity:0}.mythic-effects-off .mythic-item>img{filter:none}@media(prefers-reduced-motion:reduce){.mythic-sheen{animation:none;background:none}}
.weapon-warrior-donnerfirst{--mythic-mask:url(/chrome/mm-weapon-warrior-donnerfirst-v1.png);--mythic-aura:#60c9c5;--mythic-delay:-0.0s}
.weapon-warrior-glutrachen{--mythic-mask:url(/chrome/mm-weapon-warrior-glutrachen-v1.png);--mythic-aura:#e88758;--mythic-delay:-1.1s}
.weapon-warrior-mondspalter{--mythic-mask:url(/chrome/mm-weapon-warrior-mondspalter-v1.png);--mythic-aura:#8eb8ed;--mythic-delay:-2.2s}
.weapon-mage-rabenpakt{--mythic-mask:url(/chrome/mm-weapon-mage-rabenpakt-v1.png);--mythic-aura:#ae7bd1;--mythic-delay:-0.0s}
.weapon-mage-sternenast{--mythic-mask:url(/chrome/mm-weapon-mage-sternenast-v1.png);--mythic-aura:#a1a0e1;--mythic-delay:-1.1s}
.weapon-mage-tiefenrufer{--mythic-mask:url(/chrome/mm-weapon-mage-tiefenrufer-v1.png);--mythic-aura:#59b99d;--mythic-delay:-2.2s}
.weapon-scout-dornenkrone{--mythic-mask:url(/chrome/mm-weapon-scout-dornenkrone-v1.png);--mythic-aura:#89b962;--mythic-delay:-0.0s}
.weapon-scout-nachtfalter{--mythic-mask:url(/chrome/mm-weapon-scout-nachtfalter-v1.png);--mythic-aura:#b88ccc;--mythic-delay:-1.1s}
.weapon-scout-sonnensehne{--mythic-mask:url(/chrome/mm-weapon-scout-sonnensehne-v1.png);--mythic-aura:#e9b855;--mythic-delay:-2.2s}
.slot>.mythic-item{width:88%;height:88%;aspect-ratio:auto;pointer-events:none}
.tt-lore{font-size:12px;font-style:italic;color:#d9c9a3;margin:-3px 0 7px;max-width:260px}.tt-lore[hidden]{display:none}

/* ===== Handy: kompakter Kopf (Logo, Held, Vorräte) und Orte-Menü als Blatt ===== */
.menu-toggle{display:none}
@media (max-width:900px){
 .window>.side{position:sticky!important;top:0;z-index:30;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo toggle" "profile profile";align-items:center;gap:2px 10px;padding:6px 12px 8px!important;height:auto!important;min-height:0!important;overflow:visible!important;border:0!important;border-image:none!important;background:linear-gradient(#0a2129,#0b1d33)!important;box-shadow:0 3px 10px #0009}
 .window>.side::after,.window>.side::before{display:none!important}
 .window>.side>.flourish{display:none!important}
 .window>.side .side-logo{grid-area:logo;display:block!important;width:150px!important;max-width:100%!important;height:46px!important;margin:0!important;aspect-ratio:auto!important;background-position:left center!important}
 .menu-toggle{grid-area:toggle;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #c9a35a;border-radius:6px;background:linear-gradient(#24554e,#143a3a);color:#f3e6c4;font:800 15px/1 'Alegreya',Georgia,serif;letter-spacing:.3px;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff22,0 2px 4px #0008}
 .menu-toggle .burger{display:grid;gap:3px;width:18px}.menu-toggle .burger i{display:block;height:2px;border-radius:1px;background:#f1d18e;transition:transform .15s,opacity .15s}
 .side.menu-open .menu-toggle .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}.side.menu-open .menu-toggle .burger i:nth-child(2){opacity:0}.side.menu-open .menu-toggle .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
 .window>.side .profile{grid-area:profile;display:flex!important;align-items:center;gap:10px;margin:0!important;padding:0!important;min-width:0}
 .window>.side .portrait-small{flex:none;width:52px!important;height:52px!important;margin:0!important}
 .window>.side .portrait-small .side-plate{display:none!important}
 .window>.side .purse{display:flex!important;flex:1;min-width:0;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0!important;padding:0!important;grid-template-columns:none!important}
 .window>.side .purse li{display:flex!important;align-items:center;gap:4px;height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;font-size:15px!important}
 .window>.side .purse li::before,.window>.side .purse li::after{display:none!important}
 .window>.side .purse .ui-ink,.window>.side .purse svg,.window>.side .purse .hg-icon{width:22px!important;height:22px!important;flex:none}
 .window>.side .plus-button{flex:none;width:34px!important;height:34px!important;margin:0!important;position:static!important}
 /* Orte-Menü: unsichtbar, bis „Menü“ getippt wird; dann als Blatt unter dem Kopf */
 .window>.side #menu{display:none!important}
 .window>.side .side-foot{display:none!important}
 .window>.side.menu-open #menu{display:block!important;position:fixed;left:0;right:0;top:var(--hdr,110px);bottom:52px;z-index:40;overflow-y:auto;overscroll-behavior:contain;max-height:none!important;padding:10px 14px 16px!important;background:linear-gradient(#0b2530f7,#081a24f7);border-top:1px solid #c9a35a}
 .window>.side.menu-open .side-foot{display:flex!important;position:fixed;left:0;right:0;bottom:0;height:52px;z-index:41;align-items:center;justify-content:center;background:#081a24;border-top:1px solid #3d5a5c}
 .window>.side.menu-open .side-links{display:flex;gap:28px;font-size:16px}
 .window>.side #menu .menu-group{display:block!important;margin:0 0 12px!important}
 .window>.side #menu .group-title{display:flex!important;margin:0 0 6px!important;height:auto!important;font:700 12px/1.4 'Alegreya',Georgia,serif!important;letter-spacing:.16em;color:#a9bcc0;text-transform:uppercase}
 .window>.side #menu .group-title[hidden]{display:none!important}
 .window>.side #menu .nav-rows{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important}
 .window>.side #menu .nav-row{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:auto!important;height:84px!important;min-height:0!important;max-height:none!important;flex:none!important;padding:6px 4px!important;border:1px solid #85734d!important;border-radius:6px;background:#102b34!important;color:#f3e6c4;font:800 14px/1.1 'Alegreya',Georgia,serif!important;text-align:center}
 .window>.side #menu .nav-row::before,.window>.side #menu .nav-row::after{display:none!important}
 .window>.side #menu .nav-row[aria-current="page"]{background:#24554e!important;border-color:#e3b76b!important}
 .window>.side #menu .nav-icon{width:38px!important;height:38px!important;object-fit:contain;margin:0!important}
 .window>.side #menu .nav-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .window>.side #menu .nav-chevron{display:none!important}
 body.menu-sheet-open{overflow:hidden}
}
@media (max-width:900px){
 .window::after,.window::before{display:none!important}
 .window{margin:0!important;border:0!important;border-image:none!important;min-height:100dvh}
 .window>.side .plus-button{position:relative!important}
}
@media (max-width:900px){.window{grid-template-rows:auto minmax(0,1fr)!important;align-content:start!important;align-items:stretch}}
/* Handy: Taverne höher und seitlich verschiebbar; Titel und Reiselust bleiben stehen */
@media (max-width:900px){
 #tavern-scene{container-type:inline-size!important;min-height:0!important;max-height:none!important;display:grid!important;grid-template-rows:auto auto auto;aspect-ratio:auto!important;height:auto!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
 #tavern-scene::-webkit-scrollbar{display:none}
 #tavern-scene>.scene-canvas{grid-row:2;position:relative!important;inset:auto!important;left:auto!important;top:auto!important;transform:none!important;height:auto!important;min-height:300px;width:max(100%,min(705px,calc((100dvh - 300px) * 1.5)))!important;aspect-ratio:3/2!important;max-width:none!important}
 #tavern-scene>.scene-title{grid-row:1;position:sticky!important;left:0;top:auto!important;transform:none!important;justify-self:start;width:calc(100vw - 16px);max-width:none;margin:6px 0!important;text-align:center;box-sizing:border-box}
 #tavern-scene>.thirst{grid-row:3;position:sticky!important;left:0;bottom:auto!important;top:auto!important;transform:none!important;width:calc(100vw - 32px);margin:8px!important;grid-template-columns:auto 1fr auto!important;grid-template-areas:"label bar num" "drink drink drink";gap:6px 10px!important;box-sizing:border-box}
 #tavern-scene>.thirst>span{grid-area:label}#tavern-scene>.thirst>.bar{grid-area:bar;width:auto!important}#tavern-scene>.thirst>#thirst-label{grid-area:num;white-space:nowrap}
 #tavern-scene>.thirst>#drink{grid-area:drink;width:100%!important;justify-content:center}
}
/* Handy: Reiter und Juwelenshop dürfen nicht breiter als der Bildschirm werden */
@media (max-width:900px){
 .tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .tab{min-width:0;font-size:11px!important;letter-spacing:.2px!important;padding-left:2px!important;padding-right:2px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-width:8px 10px 5px!important;border-image-width:8px 10px 5px!important}
 .gemshop{grid-template-columns:minmax(0,1fr)!important}
 .gs-left{padding-right:0!important;border-right:0!important;border-image:none!important;min-width:0}
 .gs-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .gs-tabs .tab{font-size:13px!important}
 .gs-grid,.gs-items,.gs-packs,.gs-extras{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Handy: Laden ohne Sprechblase, Ware mittig, Rucksack-Knopf unten rechts */
@media (max-width:900px){
 #shop-bubble{display:none!important}
 #view-shop .offer-area{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(300px,84%)!important}
 #view-shop .bag-toggle.edge{top:auto!important;bottom:8px!important;right:8px!important;transform:none!important}
}
@media (max-width:900px){
 #view-shop .offer-area{width:94%!important}
 #view-shop .offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:8px!important}
 #view-shop .bag-toggle.edge{zoom:.8}
}
@media (max-width:900px){
 #stable-scene{display:flex;flex-direction:column}
 #stable-scene>.scene-title{position:static!important;transform:none!important;order:-1;align-self:center;margin:6px auto!important}
}
/* Handy: Fenster (Aufträge, Kampf, Bestellung) selbst scrollbar, wenn der Inhalt höher als der Bildschirm ist */
@media (max-width:900px){
 dialog.frame{overflow-x:hidden!important;overflow-y:auto!important;max-height:calc(100dvh - 16px)!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 dialog.frame>.dialog-x{position:sticky!important;top:0;float:right;z-index:5;margin:-6px -6px 0 0}
}

/* Vergleich mit angelegter Ausrüstung (Tooltip und Infofenster) */
.cmp{font-style:normal;font-size:.85em;font-weight:800;margin-left:4px;white-space:nowrap}.cmp-up{color:#7fe06a}.cmp-down{color:#ff7a68}.cmp-same{color:#9fb4ba}
/* Infofenster für Gegenstände (Touch und Handy) */
.item-sheet{width:min(420px,calc(100% - 16px));text-align:left}
.item-sheet .sheet-body .tt-name{font-size:20px;padding-right:34px}.item-sheet .sheet-body .tt-type{font-size:12px}
.item-sheet .sheet-body ul{display:grid;gap:7px;margin-top:6px}.item-sheet .sheet-body li{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:16px}
.item-sheet .sheet-body li b{color:#fff;text-align:right}.item-sheet .tt-lore{max-width:none}
.item-sheet .tt-worn{font-size:13px}.item-sheet .tt-price{font-size:15px}
.sheet-actions{display:grid;gap:8px;margin-top:14px}.sheet-actions .btn-gold,.sheet-actions .btn-stone{min-height:48px;font-size:15px}
.sheet-actions .sheet-close{justify-self:center;padding:8px 18px;font-size:15px}.sheet-note{text-align:center;color:#ffb3a3;font-weight:700;font-size:13px}
@media (max-width:900px){.item-sheet{margin:auto auto 8px!important}}
/* Infofenster: Bild des Gegenstands links neben Name und Art */
.item-sheet .sheet-art{float:left;width:76px;height:76px;margin:0 12px 6px 0;pointer-events:none}
.item-sheet .sheet-body ul,.item-sheet .tt-worn,.item-sheet .tt-price{clear:both}
.item-sheet .sheet-body .tt-name{padding-top:6px}

/* Handy: schnelles Tippen (z. B. „Neue Ware“) ist kein Doppeltipp-Zoom; Wischen und Scrollen bleiben.
   Eingabefelder mit 16 px, sonst zoomt iOS beim Antippen hinein. */
html,body,button,a,input,select,textarea,label,.slot,[data-place],[data-view]{touch-action:manipulation}
button,.slot,[data-place],[data-view]{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
@media (max-width:900px){input,select,textarea{font-size:16px!important}}

/* Legendärer Fund im Laden: Lichtkranz und Strahlen um das Feld, „Neue Ware“ kurz gesperrt */
.offer{position:relative}
.offer.reveal{z-index:3}
.offer.reveal>.slot{animation:reveal-pop .7s cubic-bezier(.2,1.6,.4,1) both,reveal-glow 1.4s ease-in-out .5s 2 alternate}
.offer.reveal::before{content:"";position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;transform:translate(-50%,-17%);z-index:-1;pointer-events:none;border-radius:50%;
 background:repeating-conic-gradient(from 0deg,#ffe28a00 0deg 9deg,#ffe28acc 12deg,#ffe28a00 15deg 30deg);-webkit-mask:radial-gradient(circle,#000 22%,#0000 70%);mask:radial-gradient(circle,#000 22%,#0000 70%);
 animation:reveal-rays 2.8s linear both}
.offer.reveal::after{content:"";position:absolute;inset:-6px -6px auto;aspect-ratio:1;border-radius:10px;pointer-events:none;border:3px solid #ffd968;box-shadow:0 0 18px 6px #ffcf4acc,inset 0 0 14px #ffe9a0aa;animation:reveal-ring 2.8s ease-out both}
.offer.reveal-mythic::before{background:repeating-conic-gradient(from 0deg,#b48cff00 0deg 9deg,#c9a6ffd9 12deg,#7fe3ff00 15deg 30deg)}
.offer.reveal-mythic::after{border-color:#d7b8ff;box-shadow:0 0 22px 8px #a77bffcc,inset 0 0 16px #e3d0ffaa}
@keyframes reveal-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes reveal-glow{to{filter:brightness(1.35) drop-shadow(0 0 10px #ffe08a)}}
@keyframes reveal-rays{0%{opacity:0;rotate:0deg;scale:.4}15%{opacity:1;scale:1}85%{opacity:1}100%{opacity:0;rotate:120deg;scale:1.1}}
@keyframes reveal-ring{0%{opacity:0;scale:1.4}20%{opacity:1;scale:1}70%{opacity:1}100%{opacity:0;scale:1.05}}
#reroll.reveal-wait{filter:saturate(.4) brightness(.8);cursor:wait}
@media (prefers-reduced-motion:reduce){.offer.reveal::before{animation:none;opacity:.8}.offer.reveal>.slot{animation:none}}
.offer.reveal::before{width:240%;transform:translate(-50%,-30%);-webkit-mask:radial-gradient(circle,#000 18%,#0000 66%);mask:radial-gradient(circle,#000 18%,#0000 66%);
 background:repeating-conic-gradient(from 0deg,#ffe28a00 0deg 6deg,#fff1b8 10deg,#ffe28a00 14deg 24deg)}
.offer.reveal-mythic::before{background:repeating-conic-gradient(from 0deg,#b48cff00 0deg 6deg,#e6d4ff 10deg,#7fe3ff00 14deg 24deg)}
/* Strahlen genau um die Feldmitte (Feld ist quadratisch und so breit wie das Angebot; Rand in % bezieht sich auf die Breite) */
.offer.reveal::before{left:-70%;top:0;margin-top:-70%;transform:none!important}
/* Sanduhr im Laden und Rucksack: gemaltes Bild wie in der Vorratsleiste */
.slot>.hg-item{position:relative;display:grid;place-items:center;width:86%;height:86%;pointer-events:none}
.slot>.hg-item>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}
.hg-count{position:absolute;right:2%;bottom:2%;padding:1px 5px;border-radius:6px;background:#0b1d33e6;border:1px solid #c9a35a;color:#ffe08a;font:800 13px/1.2 'Alegreya',Georgia,serif}
.item-sheet .sheet-art>.hg-item{width:100%;height:100%}

/* ===== Kampfszene: Werte, Effekte, Schadenszahlen ===== */
.battle-arena{position:relative}
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.fighter-stats{display:grid;gap:1px;margin:6px auto 0;max-width:190px;font-size:12px;text-align:left}
.fighter-stats li{display:flex;justify-content:space-between;gap:8px;padding:1px 6px;border-radius:3px;background:#0a1d2a99;color:#cfe0e6}
.fighter-stats li b{color:#fff}
.fighter-stats[hidden]{display:none}
.fighter-art{position:relative}
.dmg{position:absolute;left:50%;top:38%;z-index:5;transform:translate(-50%,0);white-space:nowrap;font:900 26px/1 'Alegreya',Georgia,serif;color:#ffd968;text-shadow:0 2px 0 #3a1406,0 0 6px #000,0 0 2px #000;animation:dmg-up 1.05s ease-out forwards;pointer-events:none}
.dmg.crit{font-size:32px;color:#ff6b4a}.dmg.none{font-size:18px;color:#bfe7ff}
@keyframes dmg-up{0%{opacity:0;translate:0 10px;scale:.6}15%{opacity:1;scale:1.15}30%{scale:1}100%{opacity:0;translate:0 -46px}}
.fighter.hit .fighter-art{animation:hit-shake .26s ease-out}
.fighter.crit-hit .fighter-art{animation:hit-shake .42s ease-out;filter:brightness(2.4) saturate(.3)}
@keyframes hit-shake{0%,100%{translate:0}20%{translate:-7px 2px}45%{translate:6px -2px}70%{translate:-3px 1px}}
.fx{position:absolute;display:block;pointer-events:none}
.fx-bolt{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,#b9e6ff 30%,#5aa9ff 55%,#5aa9ff00 72%);box-shadow:0 0 18px 6px #7cc2ffaa;filter:blur(.3px)}
.fx-bolt::after{content:"";position:absolute;right:60%;top:35%;width:60px;height:30%;border-radius:50%;background:linear-gradient(90deg,#5aa9ff00,#9fd4ffcc)}
.fx-arrow{width:62px;height:4px;border-radius:2px;background:linear-gradient(90deg,#c9a46a00,#c9a46a 25%,#8a6a3c 85%,#e9eef2 85%);box-shadow:0 0 4px #000}
.fx-arrow::after{content:"";position:absolute;right:-8px;top:-4px;border:6px solid transparent;border-left:10px solid #e9eef2}
.fx-slash,.fx-claw{width:150px;height:150px;transform:translate(-50%,-50%);background:linear-gradient(135deg,#fff0 44%,#fff 49%,#ffe9a8 51%,#fff0 56%);border-radius:50%;filter:drop-shadow(0 0 8px #ffd968);animation:slash .38s ease-out forwards}
.fx-claw{background:linear-gradient(120deg,#fff0 30%,#ff8a7a 33%,#fff0 36%,#fff0 46%,#ff8a7a 49%,#fff0 52%,#fff0 62%,#ff8a7a 65%,#fff0 68%);filter:drop-shadow(0 0 6px #ff3b2a)}
@keyframes slash{0%{opacity:0;clip-path:inset(0 100% 100% 0)}35%{opacity:1}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@media (max-width:900px){.fighter-stats{font-size:11px}.fighter-stats li{padding:0 4px}.dmg{font-size:22px}.dmg.crit{font-size:26px}}
/* ===== Beute und Aufstieg ===== */
.celebrate{width:min(440px,calc(100% - 16px));text-align:center;overflow:hidden!important;isolation:isolate}
.cel-rays{position:absolute;left:50%;top:38%;width:180%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;opacity:.55;
 background:repeating-conic-gradient(from 0deg,#ffd96800 0deg 7deg,#ffd968aa 10deg,#ffd96800 13deg 24deg);-webkit-mask:radial-gradient(circle,#000 10%,#0000 62%);mask:radial-gradient(circle,#000 10%,#0000 62%);animation:cel-spin 14s linear infinite}
.celebrate.is-epic .cel-rays{background:repeating-conic-gradient(from 0deg,#b48cff00 0deg 7deg,#d4b8ffcc 10deg,#b48cff00 13deg 24deg);opacity:.75}
@keyframes cel-spin{to{rotate:360deg}}
.cel-banner{display:inline-block;margin:2px auto 10px!important;padding:6px 26px;font-size:30px!important;color:#3a2406!important;text-shadow:0 1px 0 #ffe9a8!important;background:linear-gradient(#ffe28a,#d9a43c);border:2px solid #7a5418;border-radius:6px;box-shadow:0 4px 0 #6a4310,0 0 18px #ffd96888}
.celebrate.cel-in .cel-banner{animation:cel-pop .55s cubic-bezier(.2,1.6,.4,1) both}
.celebrate.cel-in .cel-art,.celebrate.cel-in .cel-portrait{animation:cel-pop .6s .12s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cel-pop{0%{opacity:0;scale:.4}100%{opacity:1;scale:1}}
.cel-body{display:grid;justify-items:center;gap:6px}
.cel-line{color:#e8dcc0;font-size:15px;max-width:340px;margin:0 auto 6px}
.cel-art{width:132px;height:132px;cursor:pointer}
.cel-item{font:900 22px/1.1 'Alegreya',Georgia,serif;margin-top:6px}
.cel-type{color:#9fc3cd;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cel-hint{color:#c7b89a;font-size:12px}
.cel-portrait{width:150px;height:170px;border:14px solid transparent;border-image:url(/chrome/c-frame-portrait.png) 65 67 / 14px stretch;background:radial-gradient(circle at 50% 38%,#2f6b80,#0a1d2a 80%);overflow:hidden}
.cel-portrait .pt{width:100%;height:100%}
.cel-level{margin-top:-22px;z-index:1;min-width:84px;padding:4px 16px;border-radius:999px;background:linear-gradient(#8ad04f,#4d8a22);border:2px solid #e8f7c8;color:#fff;font:900 26px/1 'Alegreya',Georgia,serif;text-shadow:0 2px 0 #24420c;box-shadow:0 3px 8px #000a}
.cel-news{display:grid;gap:4px;margin:4px 0 8px}.cel-news li{color:#ffe08a;font-weight:800;font-size:14px}
.celebrate #cel-next{margin-top:10px}
@media (prefers-reduced-motion:reduce){.cel-rays{animation:none}}
.celebrate .cel-rays{z-index:0}.celebrate>*:not(.cel-rays){position:relative;z-index:1}
.celebrate .cel-rays{left:auto;top:auto;width:auto;aspect-ratio:auto;inset:-40% -70%;transform:none;border-radius:0;-webkit-mask:radial-gradient(closest-side,#000 15%,#0000 100%);mask:radial-gradient(closest-side,#000 15%,#0000 100%)}

/* ===== Tagesbonus ===== */
.login-open{position:relative;flex:none;width:34px;height:34px;padding:0;border:1px solid #c9a35a;border-radius:6px;background:linear-gradient(#24554e,#143a3a);cursor:pointer;box-shadow:inset 0 1px 0 #fff2,0 2px 4px #0008}
.login-open .gift{position:absolute;inset:5px;background:center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='9' width='18' height='12' rx='1.5' fill='%23c94a3a' stroke='%233a1408' stroke-width='1.2'/><rect x='2' y='7' width='20' height='4' rx='1' fill='%23e05a46' stroke='%233a1408' stroke-width='1.2'/><rect x='10.5' y='7' width='3' height='14' fill='%23ffd968' stroke='%237a5418' stroke-width='.8'/><path d='M12 7C9 2 5 4 8 7M12 7c3-5 7-3 4 0' fill='none' stroke='%23ffd968' stroke-width='1.8'/></svg>")}
.login-open.ready{animation:login-wiggle 2.4s ease-in-out infinite}
@keyframes login-wiggle{0%,80%,100%{rotate:0deg}84%{rotate:-10deg}88%{rotate:10deg}92%{rotate:-6deg}96%{rotate:4deg}}
.login-dot{position:absolute;right:-6px;top:-7px;min-width:17px;height:17px;border-radius:50%;background:#e0402e;color:#fff;font:900 12px/17px system-ui;text-align:center;box-shadow:0 0 0 2px #0b1d33}
.login-dot[hidden]{display:none}
@media (min-width:901px){.window>.side .login-open{position:absolute;right:56px;top:auto}}
.login-dialog{width:min(560px,calc(100% - 16px))}
.login-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.login-day{position:relative;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;aspect-ratio:1;padding:4px;border:2px solid #85734d;border-radius:6px;background:radial-gradient(circle at 50% 45%,#17495b,#0a2430 80%);overflow:hidden}
.login-num{justify-self:start;font:900 18px/1 'Alegreya',Georgia,serif;color:#ffd968;text-shadow:0 2px 0 #3a2406,0 0 4px #000}
.login-art{display:grid;place-items:center;width:62%;height:100%;min-height:0}
.login-art>*{width:100%;height:100%;object-fit:contain}
.login-art svg{width:80%;height:80%}
.login-amt{font:800 12px/1.1 'Alegreya',Georgia,serif;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.login-stat{display:grid;place-items:center;font:900 26px/1 'Alegreya',Georgia,serif;color:#ffd968;text-shadow:0 2px 0 #3a2406}
.login-day.big{border-color:#c9a6ff;background:radial-gradient(circle at 50% 45%,#4a2f7a,#140a2a 80%)}
.login-day.done{filter:saturate(.25) brightness(.65)}
.login-day.done::after{content:"✔";position:absolute;right:4px;bottom:0;font:900 30px/1 system-ui;color:#ffd968;text-shadow:0 2px 0 #3a2406,0 0 6px #000;filter:none}
.login-day.today{border-color:#ffe08a;box-shadow:0 0 0 2px #ffd968,0 0 18px 4px #ffcf4a99;animation:login-pulse 1.6s ease-in-out infinite}
@keyframes login-pulse{50%{box-shadow:0 0 0 2px #ffd968,0 0 28px 8px #ffcf4acc}}
.login-day.claimed-now{animation:cel-pop .6s cubic-bezier(.2,1.6,.4,1)}
@media (max-width:900px){.login-grid{gap:5px}.login-num{font-size:14px}.login-amt{font-size:10px}.login-stat{font-size:20px}}
.login-mystery{font-size:40px;color:#e6d4ff;text-shadow:0 0 10px #a77bff,0 2px 0 #2a1450;animation:login-pulse-txt 1.8s ease-in-out infinite}
@keyframes login-pulse-txt{50%{text-shadow:0 0 18px #c9a6ff,0 2px 0 #2a1450}}
@media (max-width:900px){.login-mystery{font-size:30px}}

/* PC: Reise füllt die ganze Bühne mit dem Bild, Infos als Tafel unten mittig */
@media (min-width:901px){
 .stage[data-scene="tavern"] #journey:not([hidden]){position:absolute;inset:0;margin:0!important;display:block;padding:0;border:0;border-radius:0;background:#0a2430}
 .stage[data-scene="tavern"] #journey .scene.small{position:absolute;inset:0;min-height:0;height:auto;border:0;border-radius:0;background-size:cover!important;background-position:center!important}
 .stage[data-scene="tavern"] #journey .journey-body{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:min(720px,86%);padding:16px 26px 18px;text-align:center;
  border:16px solid transparent;border-image:url(/chrome/c-tooltip-panel.png) 54 71 fill / 16px 20px stretch;box-shadow:0 10px 30px #000c}
 .stage[data-scene="tavern"] #journey .journey-actions{justify-content:center}
}
/* Effekte auch auf hellem Grund (Dungeon-Monster auf Pergament) gut sichtbar: dunkle Kontur, rotes Aufblitzen statt Aufhellen */
.dmg{padding:2px 9px;border-radius:999px;background:#120806d9;box-shadow:0 0 0 2px #ffd96855,0 3px 8px #000a}
.dmg.crit{background:#3a0806e6;box-shadow:0 0 0 2px #ff6b4a99,0 0 14px #ff3b2a99}
.fighter.hit .fighter-art,.fighter.crit-hit .fighter-art{filter:none}
.fighter-art::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#ff3b2a66,#ff3b2a00 70%)}
.fighter.hit .fighter-art::after{animation:hit-flash .3s ease-out}
.fighter.crit-hit .fighter-art::after{background:radial-gradient(circle at 50% 45%,#fff8,#ff3b2a99 35%,#ff3b2a00 75%);animation:hit-flash .45s ease-out}
@keyframes hit-flash{0%{opacity:1}100%{opacity:0}}
.fx-slash{background:linear-gradient(135deg,#0000 42%,#3a1406 46%,#fff 49%,#ffd968 51%,#3a1406 54%,#0000 58%);filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 10px #ff9a3a)}
.fx-claw{background:linear-gradient(120deg,#0000 29%,#4a0a06 31%,#ff5a46 33%,#4a0a06 35%,#0000 37%,#0000 45%,#4a0a06 47%,#ff5a46 49%,#4a0a06 51%,#0000 53%,#0000 61%,#4a0a06 63%,#ff5a46 65%,#4a0a06 67%,#0000 69%);filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 8px #ff3b2a)}
.fx-bolt{width:44px;height:44px;background:radial-gradient(circle,#fff 0 16%,#b9e6ff 28%,#2f7bff 52%,#0b2a7a 62%,#0b2a7a00 72%);box-shadow:0 0 22px 8px #3d8bffcc}
.fx-arrow{height:5px;background:linear-gradient(90deg,#3a240600,#3a2406 20%,#6a4a20 85%,#dfe6ea 85%);box-shadow:0 0 0 1px #000,0 0 6px #fff8}
.fx-arrow::after{border-left-color:#dfe6ea;filter:drop-shadow(0 0 1px #000)}

/* ===== Kampf als Szene in der jeweiligen Welt ===== */
#battle-dialog.battle-full{position:fixed;inset:auto;margin:0;max-width:none;max-height:none;padding:clamp(10px,2.2vh,26px) clamp(10px,3vw,48px) clamp(12px,2.4vh,28px);
 border:0;border-image:none;border-radius:0;box-shadow:none;overflow:hidden auto!important;display:flex;flex-direction:column;align-items:stretch;gap:clamp(6px,1.4vh,14px);
 background:linear-gradient(180deg,#061018b3 0%,#06101800 22%,#06101800 58%,#061018d9 100%),var(--battle-bg,url(/scenes/journey-1.jpg));background-size:cover;background-position:center}
#battle-dialog.battle-full::before,#battle-dialog.battle-full::after{display:none}
#battle-dialog.battle-full::backdrop{background:#030d1199}
#battle-dialog.battle-full #battle-title{margin:0;font-size:12px;letter-spacing:.14em;color:#d6ecf2;text-shadow:0 1px 3px #000}
#battle-dialog.battle-full #battle-heading{align-self:center;margin:0!important;padding:4px 26px;font-size:clamp(22px,3.4vh,32px);border:2px solid #7a5418;border-radius:6px;background:linear-gradient(#ffe28a,#d9a43c);color:#3a2406;text-shadow:0 1px 0 #ffe9a8;box-shadow:0 4px 0 #6a4310,0 0 18px #0008}
#battle-dialog.battle-full .battle-arena{flex:1;grid-template-columns:minmax(0,1fr) clamp(30px,4vw,64px) minmax(0,1fr);align-items:center;max-width:980px;width:100%;margin:0 auto}
#battle-dialog.battle-full .fighter{display:flex;flex-direction:column;gap:6px}
#battle-dialog.battle-full .fighter-art{order:1;height:auto;aspect-ratio:4/5;max-height:min(46vh,430px);width:100%;margin:0 auto;box-shadow:0 10px 26px #000c}
#battle-dialog.battle-full .fighter h3{order:2;margin:-46px 8px 0;position:relative;z-index:5;font-size:clamp(15px,2.3vh,22px);color:#ffe08a;text-shadow:0 2px 0 #3a2406,0 0 6px #000,0 0 2px #000;text-align:center}
#battle-dialog.battle-full .fighter h3::after{content:attr(data-level);display:block;font-size:.7em;color:#fff}
#battle-dialog.battle-full .fighter .bar.hp{order:3;margin-top:14px;height:clamp(22px,3vh,30px);box-shadow:0 3px 8px #000a}
#battle-dialog.battle-full .fighter-stats{order:4;width:100%;max-width:none;margin:2px 0 0;padding:6px 10px;border:2px solid #85734d;border-radius:6px;background:#0b1d33d9;font-size:clamp(12px,1.7vh,16px);box-shadow:0 4px 12px #0009}
#battle-dialog.battle-full .fighter-stats li{background:none;padding:1px 0}
#battle-dialog.battle-full .versus{font-size:clamp(20px,3.6vh,38px);color:#ffd968;text-shadow:0 3px 0 #3a1406,0 0 10px #000}
#battle-dialog.battle-full #round-text{align-self:center;min-height:1.4em;padding:6px 18px;border-radius:999px;background:#061018cc;color:#fff;font-weight:800;text-align:center;box-shadow:0 2px 8px #0008}
#battle-dialog.battle-full #battle-rewards{align-self:center;padding:8px 18px;border-radius:8px;background:#061018d9;box-shadow:0 2px 8px #0008}
#battle-dialog.battle-full #battle-next{align-self:center;width:min(420px,100%)}
@media (max-width:900px){
 #battle-dialog.battle-full{padding:10px 10px 14px;gap:8px}
 #battle-dialog.battle-full .battle-arena{gap:4px;align-items:start;padding-top:4px}
 #battle-dialog.battle-full .versus{align-self:center;margin-top:-30%}
 #battle-dialog.battle-full .fighter-art{max-height:none}
 #battle-dialog.battle-full .fighter h3{margin-top:-40px;font-size:15px}
 #battle-dialog.battle-full .fighter-stats{padding:4px 7px;font-size:13px}
}
/* Wie in der Vorlage: Kämpfer an den Rändern, die Welt bleibt in der Mitte sichtbar (dort fliegen die Angriffe) */
#battle-dialog.battle-full .versus{visibility:hidden}
@media (min-width:901px){
 #battle-dialog.battle-full .battle-arena{max-width:none;grid-template-columns:minmax(0,clamp(220px,27%,420px)) 1fr minmax(0,clamp(220px,27%,420px));align-items:start;padding-top:1vh}
 #battle-dialog.battle-full .fighter-art{aspect-ratio:1/1;max-height:none}
 #battle-dialog.battle-full #battle-heading{position:absolute;left:50%;top:clamp(10px,2.2vh,26px);transform:translateX(-50%);font-size:22px;padding:2px 18px}
 #battle-dialog.battle-full #battle-title{align-self:center}
}
@media (max-width:900px){#battle-dialog.battle-full .battle-arena{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr)}}
@media (min-width:901px){#battle-dialog.battle-full #battle-title{position:absolute;left:50%;top:clamp(8px,1.6vh,20px);transform:translateX(-50%);white-space:nowrap}
 #battle-dialog.battle-full #battle-heading{top:clamp(30px,4.4vh,48px)}}