/* Seitenpanel (Desktop rechts) bzw. Bottom-Sheet (Handy): Turmkarte, Level-Vorschau, Pfade, Konter-Tabelle */
.panel{position:absolute;right:16px;top:calc(env(safe-area-inset-top,0px) + 92px);bottom:calc(env(safe-area-inset-bottom,0px) + 76px);width:340px;overflow:hidden;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 4px 0 var(--line),0 18px 40px var(--shadow);display:flex;flex-direction:column;gap:12px;align-self:start;height:max-content;max-height:calc(100% - 180px);z-index:2}
.panel h2{font:400 21px/1.1 var(--display);margin:0;letter-spacing:.02em;text-wrap:balance}
.panel h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);margin:0 0 6px;font-weight:600}
.panel p{margin:0;line-height:1.45;font-size:13.5px;color:var(--ink-2)}
.panel .btn{white-space:normal;text-align:center}
.ph{display:flex;align-items:center;gap:10px}
.ph .ti{width:38px;height:38px;border-radius:10px;background:var(--panel-2);display:grid;place-items:center;flex:none}
.ph .grow{flex:1;min-width:0}
.sub{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.sub.accent{color:var(--accent)}
b.t{font-family:var(--body);font-weight:600;color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:3px;font-size:12px;padding:1px 7px;border-radius:999px;border:1.5px solid currentColor;font-weight:500;vertical-align:middle}
.stats{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px;margin:0}
.stats dt{color:var(--ink-2)}
.stats dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row .btn{flex:1}
.elrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.elrow .btn{flex-direction:column;gap:3px;padding:6px 2px;font-size:11px;min-height:50px}
.elrow .btn small{font-size:11.5px;color:var(--ink)}
.elrow .btn[aria-current="true"]{outline:2px solid currentColor;outline-offset:1px;opacity:1;background:var(--panel)}
.lvbox{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border-radius:12px;padding:10px}
.lvbox .row .btn.primary{flex:2}
.prev{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;color:var(--ink-2)}
.prev b{font-family:var(--body);font-weight:600;color:var(--ink)}
.prev .mile{color:var(--accent);font-weight:600}
.milerow{display:flex;align-items:center;gap:8px}
.milerow small{font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.milebar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.milebar span{display:block;height:100%;background:var(--accent);transition:width .3s}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pathcard{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.pathcard.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.pathcard .pn{font-weight:600;font-size:13.5px}
.pathcard .btn{margin-top:auto}
.tier{display:grid;grid-template-columns:20px 1fr;gap:5px;font-size:12.5px;color:var(--ink-2);align-items:start;line-height:1.35}
.tier .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--ink-2)}
.tier.done .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tier.done{color:var(--ink)}
.matrix{border-collapse:separate;border-spacing:3px;font-size:12px;width:100%}
.matrix th,.matrix td{text-align:center;padding:4px 0;border-radius:6px}
.matrix td{background:var(--panel-2);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.matrix td.s{background:var(--accent-soft);color:var(--ink);font-weight:600}
.matrix td.w{opacity:.6}
.matrix caption{caption-side:bottom;font-size:11.5px;color:var(--ink-2);padding-top:6px;text-align:left}
.order{display:flex;gap:6px;flex-wrap:wrap}
.order span{display:flex;align-items:center;gap:4px;font-size:12px;background:var(--panel-2);padding:3px 8px;border-radius:999px;color:var(--ink-2)}
details summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.kbd{font-size:12px;color:var(--ink-2);line-height:1.5}

/* Reiter in Turmkarte und Menü */
.tabs{display:flex;gap:4px;background:var(--panel-2);border-radius:12px;padding:3px}
.tab{flex:1;font:600 13px var(--body);border:0;background:transparent;color:var(--ink-2);border-radius:9px;padding:7px 6px;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.tab.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.tab .dotn{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.lvbox .sub.grow{flex:1}
.seg.wide{width:100%;box-sizing:border-box}
.seg.wide button{flex:1;font:500 12.5px var(--body);padding:7px 4px}
/* Spezialisierungs-Raster: 3 Spalten (Stränge) × 3 Zeilen (Stufen) */
.specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.specgrid .cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.specgrid .cols span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);text-align:center;font-weight:600}
.specgrid .cell{background:var(--panel-2);border:1.5px solid var(--line);border-radius:10px;padding:6px 5px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;font:500 11.5px/1.25 var(--body);color:var(--ink-2);cursor:pointer;touch-action:manipulation;white-space:normal}
.specgrid .cell small{font-size:11px;color:var(--ink);display:inline-flex;align-items:center;gap:3px}
.specgrid .cell small .taler-ico{width:10px;height:10px}
.specgrid .cell.open{border-color:var(--accent);color:var(--ink);background:var(--panel)}
.specgrid .cell.open:disabled{opacity:.55}
.specgrid .cell.picked{background:var(--accent);border-color:var(--accent-deep);color:var(--accent-ink)}
.specgrid .cell.dead{opacity:.35}
.specgrid .cell:disabled:not(.picked):not(.open){cursor:default}
.elrow .btn .en{font-size:11px;color:var(--ink)}

/* Perlenschnur-Spezialisierung */
.pearls{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 0 2px}
.plines{position:absolute;left:0;top:22px;width:100%;height:calc(100% - 26px);pointer-events:none}
.plines line{stroke:var(--line);stroke-width:1.2;opacity:.6}
.plines line.next{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:3 3;opacity:.9}
.plines line.on{stroke:var(--accent);stroke-width:3;opacity:1}
.strand{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.strand .sn{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);font-weight:600}
.chain{display:flex;flex-direction:column;align-items:center;gap:12px;padding:2px}
.pearl{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;touch-action:manipulation;padding:0;box-shadow:0 2px 0 var(--line);transition:transform .12s}
.pearl i{font:600 13px var(--body);font-style:normal;color:var(--ink-2)}
.pearl.locked{opacity:.45}
.pearl.open{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);animation:pulse 1.4s ease-in-out infinite}
.pearl.picked{background:var(--accent);border-color:var(--accent-deep);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.pearl.picked i{color:var(--accent-ink)}
.pearl.sel{transform:scale(1.15);border-color:var(--ink)}
.pdetail{background:var(--panel-2);border-radius:12px;padding:8px 10px;font-size:13px;line-height:1.4;display:flex;flex-direction:column;gap:6px}
.pdetail .btn{align-self:flex-start}
/* Themen im Menü */
.themes .theme{display:inline-flex;gap:6px;align-items:center}
.themes .theme i{width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,var(--a),var(--b));border:1px solid var(--line)}
.themes .theme.on{border-color:var(--accent);box-shadow:0 3px 0 var(--accent)}

/* Zusammen spielen */
.coopbox{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.coopbox .code,.codein{font:400 30px var(--display);letter-spacing:.18em;color:var(--ink)}
.codein{flex:1;min-width:0;text-align:center;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:22px;text-transform:uppercase}
#coopPill .dotn{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}