/* Neue Optik für die Menüs: Papierschnitt (hell, weiche Schatten) oder Dämmer-Silhouette (dunkel, Lichtkanten).
   Liegt über daemmerung.css und nimmt die Pixel-Oberfläche zurück: kein Holz, keine Ziegel, keine harten Kanten. */
:root, :root.look-daemmer {
  color-scheme: dark;
  --page: #1A1430; --page-ink: #F6F0FF; --page-line: #3B3163;
  --bg: #231B3A; --surface: #2B2348; --surface-2: #352C56; --tile: #2E2550; --tile-2: #3A3060; --line: #4A3F78; --ink: #F6F0FF; --muted: #C2B8DE;
  --accent: #FF9A7A; --accent-ink: #3A1A12; --coral: #FF9A7A; --mint: #7FE0C4; --butter: #FFD98A; --focus: #FFD98A;
  --sh: 0 0 0 1px rgba(201,190,240,.16), 0 4px 12px rgba(8,5,18,.35);
  --sh-big: 0 0 0 1px rgba(201,190,240,.2), 0 14px 40px rgba(8,5,18,.55);
  --hud: rgba(30,23,54,.84); --deep: #18122C; --icon-bg: #3B3163; --note: #F2E6CF; --note-ink: #3C2C25;
  --radius: 14px;
}
:root.look-papier {
  color-scheme: light;
  --page: #E9E3D8; --page-ink: #26302C; --page-line: #D3CBBE;
  --bg: #E9E3D8; --surface: #F6F2EA; --surface-2: #EFE9DE; --tile: #F8F4ED; --tile-2: #EEE8DD; --line: #D6CEC0; --ink: #26302C; --muted: #6A7670;
  --accent: #D9694E; --accent-ink: #FFFFFF; --coral: #D9694E; --mint: #3E9C80; --butter: #E5B24A; --focus: #D9694E;
  --sh: 0 1px 2px rgba(40,50,45,.12), 0 3px 8px rgba(40,50,45,.1);
  --sh-big: 0 2px 4px rgba(40,50,45,.12), 0 16px 40px rgba(40,50,45,.22);
  --hud: rgba(251,247,239,.9); --deep: #DED6C8; --icon-bg: #F0E8DA; --note: #FBF7EF; --note-ink: #2E3A35;
}
body, .phone { background: var(--page); color: var(--ink); }

/* Alles weich und scharf statt kantig und pixelig */
canvas.scene, .showbox canvas, #arena, #wsscene, #editor, #boxcv, .nav-ic, img.px-ic, .up-ic, .st-pic, .gem, .coin, .urp, .cur { image-rendering: auto !important; }
.phone :not(.gem):not(.coin):not(.urp):not(.cur):not(.mode):not(.ch-ic):not(.round):not(.flat) { border-radius: 12px !important; }
.mode.scened canvas, .showbox, canvas.scene, .mpage > canvas.scene, .scene-box canvas.scene { border-radius: 0 !important; }
.lexfig { shape-rendering: auto; }

/* Navigation */
.tabs { background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.tabs button { color: var(--muted); }
.tabs button.on { background: var(--tile-2); color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh); }
.mode.scened .menu-head > div:first-child { background: var(--hud); box-shadow: var(--sh); backdrop-filter: blur(6px); }
.chip, .gear { background: var(--hud) !important; box-shadow: var(--sh); color: var(--ink); }
.mode.scened.scrolled .menu-head { background: var(--surface); box-shadow: var(--sh); }

/* Karten, Knöpfe, Listen */
.up { box-shadow: var(--sh); background: var(--tile); }
.up-ic { background: var(--icon-bg); box-shadow: none; padding: 5px; }
.perk, .wcard, .q-card, .box-shop, .q-cur, .st-row, .arm, .lack-tog, .first-step, .st-tile, .st-lvl, .st-set, .st-slider, .snd-row, .stand, .lex-top, .lex-tile, .lex-row, .lex-back, .rp-grid div, .ws > .tools button, .show-stats span, .res-card { box-shadow: var(--sh); }
.perk-btn, .sum-btn, .rp-end, .start-btn { box-shadow: var(--sh); }
.perk-btn:active, .sum-btn:active, .rp-end:active, .first-step:active, .start-btn:active { transform: translateY(1px); box-shadow: none; }
.show-stats span, .lvl-mile i, .res-chip, .lex-ch, .lex-tile, .lex-row, .lex-top, .lex-back, .st-set, .st-slider, .snd-row, .q-cur { background: var(--tile); }
.res-chip.on { background: var(--tile-2); color: var(--ink); }
.picker { background: var(--tile); box-shadow: var(--sh); }
.picker .pick-mid, .picker .pick-mid .lbl { color: var(--ink); }
.picker .pick-mid .lbl { color: var(--muted); }
.pick-arrow { background: var(--tile-2); color: var(--ink); box-shadow: var(--sh); }
.res-card { background: var(--tile); }
.lex-ch { box-shadow: inset 5px 0 0 var(--c), var(--sh); }
.lex-ch .lex-ic, .lex-tile .lex-ic, .lex-row .lex-ic, .st-pic, .st-ic { background: var(--icon-bg); }
.lex-hero { background: var(--icon-bg) !important; box-shadow: var(--sh); }
.lexfig { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.lex-find input { box-shadow: inset 0 0 0 1px var(--line); }

/* Werkstatt */
.ed-wrap { background: var(--tile-2); box-shadow: var(--sh); }
#editor { background: transparent; box-shadow: var(--sh); }

/* Quests: Zettel ohne Pinnwand */
.st-list:has(.q-row) { padding: 0; background: none; box-shadow: none; }
.q-row { background: var(--note); color: var(--note-ink); box-shadow: var(--sh); transform: none !important; }
.q-row::before { width: 8px; height: 8px; top: -3px; border-radius: 50% !important; box-shadow: none; }
.q-row b, .q-row .q-xp b { color: var(--note-ink); }
.q-row .q-xp { background: var(--tile-2); }
.q-row .dbar { background: rgba(0,0,0,.08); }
.q-row .dbar b { background: var(--mint); }
.q-card { background: var(--tile); color: var(--ink); }
.q-card .st-dim, .q-card span { color: var(--muted); }
.q-card .q-top b { color: var(--ink); }
.q-card .q-bar { background: var(--deep); }
.q-card .q-bar b { background: var(--butter); }
.q-node { background: var(--tile-2); box-shadow: none; color: var(--ink); }
.q-node span { color: var(--ink); } .q-node em { color: var(--muted); }
.q-node.bonus { background: var(--tile-2); box-shadow: inset 0 0 0 2px var(--butter); }
.q-node.on { background: var(--butter); color: #3A2A08; }

/* Läden */
.stand header { background: var(--tile-2); color: var(--ink); box-shadow: none; }
.stand header span { color: var(--muted); }
.stand header em { background: var(--deep); color: var(--ink); }

/* Statistik und Einstellungen */
.st-lvl i, .st-set b, .snd-tog, .snd-arr { background: var(--deep); }
.st-lvl i b { background: var(--butter); }
.st-set b { color: var(--muted); }
.st-set[aria-pressed="true"] b, .snd-tog[aria-pressed="true"] { background: var(--mint); color: #FFFFFF; }
.st-slider input[type=range]::-webkit-slider-runnable-track { background: var(--deep); border-radius: 5px; }
.st-slider input[type=range]::-webkit-slider-thumb { background: var(--butter); box-shadow: var(--sh); border-radius: 8px; }

/* Fenster */
#stone > div, #offline > div, #summary > div { box-shadow: var(--sh-big); }
.rp-card { background: var(--surface); box-shadow: var(--sh-big); }
.rp-head { background: var(--tile-2); color: var(--ink); box-shadow: none; }
.rp-head .lbl { color: var(--muted); }
.rp-x { background: var(--tile); color: var(--ink); box-shadow: var(--sh); }
.pix-row i { background: var(--deep); }
.pix-row i b { background: var(--coral); }
#endrun.rp-end { box-shadow: var(--sh); }

/* Run-Anzeigen */
.hud-wave, .hud .chip, #overlay, .alive, .ev-chip, .heart-chip { background: var(--hud) !important; color: var(--ink); box-shadow: var(--sh); }
.mode[data-mode="run"] .wavebar { background: var(--deep); }
.sheet { background: var(--surface); border-top: 0; box-shadow: 0 -6px 18px rgba(0,0,0,.1); }
.hpbar { background: var(--deep); }
.hpbar i { background: var(--mint) !important; }
#speed { background: var(--hud); box-shadow: var(--sh); }
.uptabs button.on { background: var(--ink); color: var(--surface); }

/* Basis: Hinweis-Leiste unter die Szene, sonst liegt die Kopfzeile darüber */
.mode.scened .home > .showbox { order: -1; }
/* Hinweis-Punkte an der Navigation rund statt eckig */
.tabs button.has::after, .tabs button.has-dot::after { border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
/* Pakt-Knopf unter Kopfzeile und Wellenbalken, sonst deckt er Welle und Münzen zu; der Hinweistext rückt dann darunter */
#pact { top: 72px; }
.arena.pacting #overlay { top: 124px; }
/* Ereignis-Schild unten links über der Gegner-Anzeige, oben läge es unter dem Wellenbalken */
.ev-chip, .arena.pacting .ev-chip { top: auto; bottom: 74px; right: auto; max-width: calc(100% - 110px); }

/* Quest-Seite: Stufen-Kopf, Quest-Karten, Erledigtes eingeklappt */
#tasks .qx-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
#tasks .qx-seg button { min-height: 40px; font-size: 14px; }
.qx-head { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--tile); box-shadow: var(--sh); }
.qx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; color: var(--muted); }
.qx-top > b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink); }
.qx-top > b small { font-size: 14px; color: var(--muted); }
.qx-top span b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qx-track { --d: 24px; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
.qx-track::before, .qx-track::after { content: ''; position: absolute; left: calc(var(--d) / 2); top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.qx-track::before { right: calc(var(--d) / 2); background: var(--deep); }
.qx-track::after { width: calc((100% - var(--d)) * var(--f)); background: var(--butter); }
.qx-dot { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: var(--d); height: var(--d); background: var(--tile-2); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font-style: normal; font-family: var(--display); font-size: 11px; font-weight: 600; }
.qx-dot.bonus { color: var(--butter); }
.qx-dot.on { background: var(--butter); box-shadow: none; color: #3A2A08; }
.qx-dot.now { box-shadow: inset 0 0 0 2px var(--butter), 0 0 0 3px color-mix(in srgb, var(--butter) 30%, transparent); color: var(--ink); }
.qx-xpl { display: flex; align-items: center; gap: 10px; }
.qx-xpl i, .qx-prog i { flex: 1; display: block; height: 8px; border-radius: 999px; background: var(--deep); overflow: hidden; }
.qx-xpl i b, .qx-prog i b { display: block; height: 100%; border-radius: 999px; background: var(--butter); }
.qx-xpl small, .qx-prog small { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.qx-next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 11px; border-radius: 12px; background: var(--tile-2); }
.qx-nl { font-size: 12px; font-weight: 700; color: var(--muted); }
.qx-rw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.qx-rw > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.qx-rw .cur { width: 12px; height: 12px; } .qx-rw .gem { width: 9px; height: 9px; }
.qx-more { align-self: flex-start; min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; }
.qx-steps { display: flex; flex-direction: column; gap: 2px; margin-top: -4px; }
.qx-st { display: grid; grid-template-columns: 24px 58px 1fr; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 10px; }
.qx-st em { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 12px; text-align: center; color: var(--muted); }
.qx-st small { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.qx-st.on { opacity: .55; } .qx-st.on em { color: var(--mint); }
.qx-st.now { background: var(--tile-2); } .qx-st.now em { color: var(--butter); }
.qx-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.qx-head .qx-hint { margin-top: -2px; }
.qx-list { display: flex; flex-direction: column; gap: 8px; }
.qx-q { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--tile); box-shadow: var(--sh); }
.qx-q.t1 { box-shadow: inset 4px 0 0 var(--mint), var(--sh); }
.qx-q.t2 { box-shadow: inset 4px 0 0 var(--butter), var(--sh); }
.qx-q.t3 { box-shadow: inset 4px 0 0 var(--coral), var(--sh); }
.qx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qx-main > b { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); }
.qx-main > span:not(.qx-prog) { font-size: 12px; line-height: 1.35; color: var(--muted); }
.qx-prog { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qx-prog i b { background: var(--mint); }
.qx-rt { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--ink) !important; }
.qx-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 40px; }
.qx-side b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.qx-side small { font-size: 10px; font-weight: 700; color: var(--muted); }
.qx-q.t1 .qx-side small { color: var(--mint); } .qx-q.t2 .qx-side small { color: var(--butter); } .qx-q.t3 .qx-side small { color: var(--coral); }
.qx-q.done { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.qx-q.done .qx-main > b { color: var(--muted); }
.qx-ok { position: relative; display: block; width: 24px; height: 24px; background: var(--mint); }
.qx-ok::after { content: ''; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--surface); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.qx-fold { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--tile-2); color: var(--ink); font: inherit; font-family: var(--display); font-weight: 600; font-size: 14px; }
.qx-fold b { font-family: inherit; font-size: 12px; color: var(--accent); }
.qx-empty { margin: 4px 0; padding: 16px; border-radius: 16px; background: var(--tile); text-align: center; font-weight: 700; color: var(--muted); }
.phone .qx-dot, .phone .qx-ok { border-radius: 50% !important; }

/* Zuchtgarten: Knopf in der Basis-Szene, Garten-Seite, Zucht-Fenster */
.show-scene { position: relative; }
.garden-btn { position: absolute; right: 8px; bottom: 8px; width: 27%; aspect-ratio: 60 / 52; padding: 0; border: 0; background: none; z-index: 2; }
.showbox .garden-btn canvas { width: 100%; height: 100%; aspect-ratio: auto; display: block; }
.garden-btn.pop { animation: zpop .22s ease-out; }
@keyframes zpop { 40% { transform: scale(1.12) rotate(-3deg); } 100% { transform: none; } }
#zfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
/* Kreis aus dem Beet (nur transform und opacity, damit die Grafikkarte es allein rechnet) */
#zwipe { position: absolute; inset: 0; z-index: 2; /* unter Navigation (3) und Kopfzeile (6) */ overflow: hidden; pointer-events: none; }
#zwipe i { position: absolute; border-radius: 50% !important; background: var(--page); transform: scale(0); will-change: transform, opacity; }
#zwipe i.grow { transform: scale(1); transition: transform .43s cubic-bezier(.6, 0, .4, 1); }
#zwipe i.grow.out { opacity: 0; transition: opacity .3s ease .05s; }
#zwipe i.full { transform: scale(1); transition: none; }
#zwipe i.shrink { transform: scale(0); transition: transform .4s cubic-bezier(.6, 0, .4, 1); }
.z-in #garden > * { animation: zrise .55s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(.28s + var(--i, 0) * 70ms); }
@keyframes zrise { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .z-in #garden > *, .garden-btn.pop { animation: none !important; } #zwipe { display: none; } }
#garden { display: flex; flex-direction: column; gap: 10px; }
.dna { display: inline-block; flex: none; width: 13px; height: 13px; vertical-align: -2px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 2c0 7 10 7 10 13s-10 4-10 7M17 2c0 7-10 7-10 13s10 4 10 7M8 6h8M8 18h8M10 10.5h4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 2c0 7 10 7 10 13s-10 4-10 7M17 2c0 7-10 7-10 13s10 4 10 7M8 6h8M8 18h8M10 10.5h4'/%3E%3C/svg%3E") center/contain no-repeat; }
.z-top { display: flex; align-items: center; gap: 8px; }
.z-back { width: 40px; height: 40px; border: 0; border-radius: 14px; background: var(--tile); color: var(--ink); font-size: 22px; box-shadow: var(--sh); }
.z-dna { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--tile); box-shadow: var(--sh); }
.z-dna b { font-family: var(--display); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.z-dna small { font-size: 11px; font-weight: 700; color: var(--muted); }
.z-n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
#garden .z-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.z-card { padding: 13px 14px; border-radius: 18px; background: var(--tile); box-shadow: var(--sh); }
.z-card b { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.z-card span, .z-card small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.z-bed { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; }
.z-bed > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.z-bed.locked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.z-pair { display: flex; align-items: center; justify-content: center; gap: 1px; height: 64px; border-radius: 14px; background: var(--tile-2); }
.z-pair img { width: 30px; height: 30px; }
.z-pair em { font-style: normal; font-weight: 800; font-size: 11px; color: var(--muted); }
.z-tier { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--tile-2); color: var(--muted); font-style: normal; font-size: 10.5px; font-weight: 800; font-family: var(--font); vertical-align: 1px; }
.z-tier.t1 { background: color-mix(in srgb, var(--butter) 32%, transparent); color: var(--ink); }
.z-tier.t2 { background: color-mix(in srgb, var(--coral) 32%, transparent); color: var(--ink); }
.z-tier.t3 { background: var(--ink); color: var(--surface); }
.z-prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.z-prog i { flex: 1; height: 8px; border-radius: 999px; background: var(--deep); overflow: hidden; }
.z-prog i b { display: block; height: 100%; border-radius: 999px; background: var(--mint); }
.z-prog small { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.z-btns { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.z-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--tile-2); color: var(--ink); font-weight: 800; font-size: 13px; }
.z-btn.main { background: var(--mint); color: #10302E; }
.z-btn.warm { background: var(--butter); color: #3A2A08; }
.z-btn:disabled { opacity: .45; }
.z-btn.main .dna, .z-btn.warm .dna, .z-go .dna { background: currentColor; }
.z-mix { display: grid; grid-template-columns: 74px 1fr; gap: 10px 12px; }
.z-mix > div:not(.z-stats):not(.z-traits):not(.z-home):not(.z-btns) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.z-pic { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 16px; background: var(--tile-2); }
.z-pic img { width: 60px; height: 60px; }
.z-stars { color: var(--butter); letter-spacing: 1px; font-size: 14px; }
.z-stars .off { color: var(--line); }
.z-stars b { margin-left: 4px; font-size: 13px; color: var(--mint); }
.z-firm { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.z-firm i { width: 7px; height: 7px; border-radius: 50%; background: var(--deep); }
.z-firm i.on { background: var(--mint); }
.z-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.z-stats div { padding: 7px 8px; border-radius: 12px; background: var(--tile-2); }
.z-stats span { display: block; font-size: 10px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.z-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.z-traits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.z-traits span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--tile-2); color: var(--ink); font-weight: 700; }
.z-where { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); }
.z-learn { display: flex; flex-direction: column; gap: 6px; }
.z-learn > b { font-family: var(--display); font-weight: 600; font-size: 16px; }
.z-learn > span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.z-ctl { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.z-ctl input, .z-ctl select { min-height: 38px; min-width: 0; padding: 0 12px; border: 0; border-radius: 12px; background: var(--tile); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; box-shadow: var(--sh); }
.z-ctl label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.z-ctl select { max-width: 150px; text-transform: none; }
.z-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.z-chips button { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--tile); color: var(--muted); font-weight: 800; font-size: 12px; box-shadow: var(--sh); }
.z-chips button.on { background: var(--ink); color: var(--surface); }
.z-list { display: flex; flex-direction: column; gap: 6px; }
.z-entry { padding: 0; overflow: hidden; }
.z-head { width: 100%; display: grid; grid-template-columns: 44px 1fr auto 12px; gap: 10px; align-items: center; padding: 8px 10px; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; }
.z-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tile-2); }
.z-ic img { width: 36px; height: 36px; }
.z-nm { display: flex; flex-direction: column; min-width: 0; }
.z-nm b { font-family: var(--display); font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-nm small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-st { color: var(--butter); }
.z-met { display: flex; flex-direction: column; align-items: flex-end; }
.z-met b { font-family: var(--display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.z-met small { font-size: 10px; font-weight: 700; color: var(--muted); }
.z-chev { color: var(--muted); font-style: normal; font-size: 18px; transition: transform .2s; }
.z-entry.open .z-chev { transform: rotate(90deg); }
.z-mdot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--mint); vertical-align: 2px; }
.z-wtag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--tile-2); font-style: normal; font-family: inherit; font-size: 10px; font-weight: 800; color: var(--muted); vertical-align: 2px; }
.z-det { padding: 2px 12px 12px; }
.z-traits .z-mut, .mnote .z-mut { background: color-mix(in srgb, var(--mint) 28%, transparent); padding: 3px 8px; border-radius: 999px; font-weight: 800; }
.z-mut.unk { background: var(--ink) !important; color: var(--surface) !important; }
.z-home { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.z-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 999px; background: var(--tile-2); }
.z-seg2 button { min-height: 32px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 800; font-size: 12px; }
.z-seg2 button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh); }
.z-det .z-btns { grid-column: 1 / -1; }
.z-more { width: 100%; min-height: 42px; }
.z-look { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--tile-2); }
.z-look b { display: block; font-size: 13px; } .z-look small { font-size: 11px; color: var(--muted); }
.z-ptop { display: grid; grid-template-columns: 1fr 88px; gap: 10px; align-items: center; }
.z-pbig { display: grid; place-items: center; height: 170px; border-radius: 18px; background: var(--tile-2); }
.z-pbig img { width: 150px; height: 150px; }
.z-ppar { display: flex; flex-direction: column; gap: 8px; }
.z-ppar span { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 14px; background: var(--tile); box-shadow: var(--sh); }
.z-ppar img { width: 48px; height: 48px; } .z-ppar small { font-size: 11px; font-weight: 800; color: var(--muted); }
.z-prow { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: center; }
.z-prow > b { font-size: 13px; }
.z-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.z-opts button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--tile); color: var(--ink); font-weight: 800; font-size: 12px; box-shadow: var(--sh); }
.z-opts button.on { box-shadow: inset 0 0 0 2.5px var(--mint), var(--sh); }
.z-opts button:disabled { opacity: .35; }
.z-opts i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.15); }
.z-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.z-row > div { display: flex; flex-direction: column; gap: 2px; }
.z-row small { font-weight: 800; }
.z-row .z-btn { min-width: 84px; }
.z-shop { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.z-shop .z-card { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.z-shop .z-card span { flex: 1; }
.z-sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(20,16,36,.45); }
.z-sheet[hidden] { display: none; }
.z-panel { width: 100%; max-height: 90%; overflow-y: auto; padding: 16px 16px 22px; border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: var(--sh-big); display: flex; flex-direction: column; gap: 11px; }
.z-panel h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; }
.z-pairsel { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 6px; }
.z-pairsel > em { text-align: center; font-style: normal; font-size: 22px; color: var(--muted); }
.z-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 112px; padding: 8px 6px; border: 0; border-radius: 18px; background: var(--tile); color: var(--ink); box-shadow: var(--sh); }
.z-slot.on { box-shadow: inset 0 0 0 2.5px var(--mint), var(--sh); }
.z-slot img { width: 54px; height: 54px; }
.z-slot b { font-family: var(--display); font-weight: 600; font-size: 14px; }
.z-slot small { font-size: 11px; color: var(--muted); }
.z-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.z-pick button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 14px; background: var(--tile); color: var(--ink); box-shadow: var(--sh); min-width: 0; }
.z-pick button.sel { box-shadow: inset 0 0 0 2.5px var(--mint); }
.z-pick img { width: 40px; height: 40px; }
.z-pick b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; }
.z-prev { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding: 11px; border-radius: 18px; background: var(--tile-2); }
.z-prev > div { display: flex; flex-direction: column; gap: 3px; }
.z-prev b { font-family: var(--display); font-weight: 600; font-size: 15px; }
.z-prev span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.z-q { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--deep); color: var(--muted); font-style: normal; font-family: var(--display); font-size: 24px; }
.z-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.z-facts span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 12px; background: var(--tile); box-shadow: var(--sh); font-size: 13px; font-weight: 800; }
.z-go { width: 100%; min-height: 50px; border: 0; border-radius: 16px; background: var(--mint); color: #10302E; font-family: var(--display); font-weight: 600; font-size: 17px; }
.z-go:disabled { opacity: .45; }
.z-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.z-go.wild { background: var(--tile-2); color: var(--ink); }
.z-relst { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--tile-2); }
.z-relst small { color: var(--muted); }
.z-relst .z-btns { margin-top: 4px; }
.z-relst.ask { outline: 2px solid var(--butter); }
.z-cancel { width: 100%; min-height: 40px; border: 0; background: none; color: var(--muted); font-weight: 800; }
.z-reveal { align-items: center; text-align: center; }
.z-big img { width: 150px; height: 150px; animation: zborn 1s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes zborn { 0% { transform: scale(.5); filter: brightness(0); opacity: .6; } 55% { filter: brightness(0); } 100% { transform: none; filter: none; opacity: 1; } }
.z-stars.big { font-size: 28px; letter-spacing: 4px; }
.z-stars.big i { font-style: normal; color: var(--line); }
.z-stars.big i.on { color: var(--butter); animation: zstar .35s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(1s + var(--j) * .22s); }
@keyframes zstar { from { transform: scale(0); color: var(--line); } }
.phone .z-pair, .phone .z-pic, .phone .z-btn, .phone .z-card, .phone .z-slot, .phone .z-go { border-radius: 14px !important; }

/* Shop: je Tab die eigene Währung, flache Kauf-Zeilen in einer Karte, kompakte Kisten-Karten */
#shop { display: flex; flex-direction: column; gap: 10px; }
#shop .sh-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.sh-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 2px 4px; }
.sh-head > span { display: inline-flex; align-items: center; gap: 6px; }
.sh-head .gem, .sh-head .cur, .sh-head .urp { width: 18px; height: 18px; margin: 0; }
.sh-head b { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sh-head small { font-size: 12px; font-weight: 700; color: var(--muted); }
.sh-head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.sh-head em:empty { display: none; }
.sh-list { display: flex; flex-direction: column; border-radius: 18px; background: var(--tile); box-shadow: var(--sh); overflow: hidden; }
.sh-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; }
.sh-row + .sh-row { border-top: 1px solid var(--line); }
.sh-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-txt b { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.sh-txt b small { font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--muted); }
.sh-txt span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.sh-txt em { font-style: normal; font-weight: 700; color: var(--mint); }
.sh-buy { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 72px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--butter); color: #3A2A08; font-family: var(--display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.sh-buy .gem, .sh-buy .cur, .sh-buy .urp { width: 13px; height: 13px; margin: 0; }
.sh-buy:disabled { background: var(--tile-2); color: var(--muted); }
.sh-buy[aria-pressed] { background: var(--tile-2); color: var(--muted); }
.sh-buy[aria-pressed="true"] { background: var(--mint); color: #10302E; }
.sh-lock { font-size: 12px; font-weight: 800; color: var(--muted); }
.sh-row.locked .sh-txt b { color: var(--muted); }
.sh-box { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 18px; background: var(--tile); box-shadow: var(--sh); }
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-top .sh-txt b { font-size: 17px; }
.sh-buy.main { min-width: 92px; min-height: 44px; font-size: 16px; }
.sh-box .odds { display: flex; height: 8px; gap: 2px; margin: 0; border-radius: 999px; overflow: hidden; }
.sh-box .odds i { display: block; min-width: 4px; border-radius: 0 !important; }
.sh-odds { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-odds span { display: inline-flex; align-items: center; gap: 4px; }
.sh-odds i { width: 7px; height: 7px; border-radius: 50% !important; }
.sh-free { min-height: 40px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-weight: 600; font-size: 15px; }
.sh-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }

/* Labor: Kategorien als Raster in zwei Reihen (alles sichtbar, nichts zu wischen), Kopf mit Kristallen, flache Zeilen wie im Shop */
.lab-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 4px; border-radius: 22px; background: var(--tile); box-shadow: var(--sh); }
.lab-tabs button { min-width: 0; min-height: 38px; padding: 0 2px; border: 0; border-radius: 999px !important; background: none; color: var(--muted); font-family: var(--display); font-weight: 500; font-size: 14px; white-space: nowrap; }
.lab-tabs button.on { background: var(--butter); color: #3A2A08; font-weight: 600; }
.lab-tabs button[data-perktab="prest"] { grid-column: span 2; }
#perks { display: flex; flex-direction: column; gap: 10px; }
#perks .st-h { margin: 6px 4px 0; }
.sh-buy.unlock { background: var(--accent); color: var(--accent-ink); }
.sh-buy.unlock:disabled { background: var(--tile-2); color: var(--muted); }

/* Forschung: klassischer Baum mit Karten und Linien, darunter das gewählte Projekt */
#research { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.rt-tree { position: relative; padding: 2px 0 4px; }
.rt-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rt-root { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 64%; margin: 0 auto 30px; padding: 9px 12px; border-radius: 16px; background: var(--tile); box-shadow: var(--sh); }
.rt-root .rt-ic { --c: var(--ink); background: var(--tile-2); }
.rt-root b { font-family: var(--display); font-weight: 600; font-size: 15px; }
.rt-root > div span { display: block; font-size: 11.5px; color: var(--muted); }
.rt-cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rt-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.rt-col h4 { align-self: center; margin: 0 0 -8px; padding: 3px 10px; border-radius: 999px !important; background: color-mix(in srgb, var(--c) 16%, var(--page)); font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--c); white-space: nowrap; }
.look-daemmer .rt-col h4 { background: color-mix(in srgb, var(--c) 28%, var(--page)); }
.rt-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-height: 96px; padding: 9px 4px 8px; border: 0; border-radius: 14px !important; background: var(--tile); color: var(--ink); box-shadow: var(--sh); text-align: center; }
.rt-node::before { content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.rt-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px !important; background: color-mix(in srgb, var(--c) 18%, var(--tile)); color: var(--c); flex: none; }
.rt-ic svg { width: 19px; height: 19px; }
.rt-node b { font-family: var(--display); font-weight: 600; font-size: 11.5px; line-height: 1.15; hyphens: manual; overflow-wrap: break-word; }
.rt-node small { font-size: 10px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-pb { display: block; width: 80%; height: 4px; margin-top: 1px; border-radius: 999px !important; background: var(--deep); overflow: hidden; }
.rt-pb i { display: block; height: 100%; border-radius: 999px !important; background: var(--c); }
.rt-node.locked { background: var(--tile-2); box-shadow: none; color: var(--muted); }
.rt-node.locked::before { background: var(--line); }
.rt-node.locked .rt-ic { background: var(--deep); color: var(--muted); }
.rt-node.max { box-shadow: inset 0 0 0 2px var(--butter), var(--sh); }
.rt-node.run { box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 4px color-mix(in srgb, var(--mint) 25%, transparent); animation: rtpulse 1.6s ease-in-out infinite; }
.rt-node.run .rt-pb i { background: var(--mint); }
@keyframes rtpulse { 50% { box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 7px color-mix(in srgb, var(--mint) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rt-node.run { animation: none; } }
.rt-node.sel { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.rt-lock { position: absolute; right: 6px; top: 7px; width: 12px; height: 12px; color: var(--muted); }
.rt-lock svg { width: 12px; height: 12px; display: block; }
.rt-detail { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--tile); box-shadow: var(--sh); }
.rt-dtop { display: flex; align-items: center; gap: 12px; }
.rt-dtop .rt-ic { width: 42px; height: 42px; border-radius: 13px !important; }
.rt-dtop .rt-ic svg { width: 24px; height: 24px; }
.rt-dtop b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; }
.rt-dtop span { font-size: 12px; color: var(--muted); }
.rt-eff { margin: 0; font-size: 14px; } .rt-eff em { font-style: normal; font-weight: 800; color: var(--mint); }
.rt-meta { align-self: flex-start; padding: 5px 10px; border-radius: 10px; background: var(--tile-2); font-size: 12px; font-weight: 700; color: var(--muted); }
.rt-need { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.rt-go { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--butter); color: #3A2A08; font-family: var(--display); font-weight: 600; font-size: 17px; }
.rt-go .gem { width: 14px; height: 14px; }
.rt-go.pause { background: var(--tile-2); color: var(--ink); }
.rt-go:disabled { background: var(--tile-2); color: var(--muted); }
.rt-detail .res-auto { align-self: stretch; min-height: 38px; }

/* Waffen: Inventar aus Kacheln, Rahmen in Raritätsfarbe, Werte im Feld unter der Klasse */
#armory { display: flex; flex-direction: column; gap: 10px; }
#armory .st-h { margin: 6px 4px -2px; }
.w-sum { margin: 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.w-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.w-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px !important; background: color-mix(in srgb, var(--rar) 14%, var(--tile)); box-shadow: inset 0 0 0 2px var(--rar), var(--sh); }
.w-tile img, .w-tile svg { width: 62%; height: 62%; }
.w-tile small { position: absolute; left: 5px; bottom: 4px; min-width: 16px; padding: 0 4px; border-radius: 999px !important; background: var(--tile); color: var(--ink); font-size: 10px; font-weight: 800; line-height: 16px; }
.w-in { position: absolute; right: 5px; top: 5px; width: 14px; height: 14px; border-radius: 4px !important; background: var(--butter); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V9l2-2v-3h3v2h2V4h2v2h2V4h3v3l2 2v12h-6v-5h-4v5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V9l2-2v-3h3v2h2V4h2v2h2V4h3v3l2 2v12h-6v-5h-4v5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.w-tile.sel { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.w-tile:disabled { opacity: .35; }
.w-chk { position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; border-radius: 50% !important; background: var(--mint); box-shadow: 0 0 0 2px var(--page); }
.w-chk::after { content: ''; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid var(--surface); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.w-detail { padding: 12px 14px; border-radius: 16px; background: var(--tile); box-shadow: inset 4px 0 0 var(--rar), var(--sh); }
.w-merge { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--tile); box-shadow: var(--sh); }
.w-merge .mnote { margin: 0; }
.w-merge .wc-aim { padding: 0; background: none; box-shadow: none; }
/* Waffen verbessern: eine Liste, jede Waffenart als aufklappbare Zeile mit Pfeil rechts */
.w-up .wcard { margin: 0; padding: 0; border-radius: 0 !important; background: none; box-shadow: none; }
.w-up .wcard + .wcard { border-top: 1px solid var(--line); }
.w-up .w-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 14px; border: 0; border-radius: 0 !important; background: none; color: var(--ink); text-align: left; }
.w-up .w-row b { flex: none; font-family: var(--display); font-weight: 600; font-size: 15px; }
.w-up .w-sum { flex: 1; text-align: right; font-size: 12px; font-weight: 700; color: var(--muted); }
.w-up .w-chev { flex: none; margin-left: 0; }
.w-up .wcard > :not(.w-row) { margin: 0 14px 12px; }
.w-up .wcard .sh-list { background: var(--tile-2); box-shadow: none; }
/* Katalog: noch nicht gefundene Waffenarten blass und grau */
.k-tile.unk { background: var(--tile-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.k-tile.unk img, .k-tile.unk svg { opacity: .45; filter: grayscale(1); }
.w-detail .arm-head + .arm-ls { margin-top: 6px; }
.sh-txt b span { font-size: inherit; line-height: inherit; }
/* Werkstatt: Raster beginnt unter der Kopfzeile und liegt auf einer ruhigen Fläche */
.mode.scened .ws .ed-wrap { padding-top: 76px; }
#editor { background: var(--tile); border-radius: 14px !important; box-shadow: var(--sh); }

/* ---------- Im Inneren des Turms (inner.js) ---------- */
.inner-btn { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--hud); color: var(--ink); font-weight: 800; font-size: 12.5px; box-shadow: var(--sh); }
.inner-btn svg { width: 17px; height: 17px; }
.inner-btn b { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #8B4FC9; color: #fff; font-size: 11px; text-align: center; }
.look-daemmer .inner-btn b { background: #C46BFF; color: #1A1430; }
.mode[data-mode="inner"] { background: #0B0818; }
.inner-host { position: absolute; inset: 0; overflow: hidden; }
.inner-host .in-game { display: block; position: absolute; inset: 0; touch-action: none; }
.in-hud { position: absolute; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; pointer-events: none; }
.in-hud[hidden] { display: none; }
.in-hud > * { pointer-events: auto; }
.in-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.in-mid { align-items: center; }
.in-pill { padding: 6px 11px; border-radius: 14px; background: var(--hud); box-shadow: var(--sh); color: var(--ink); font-size: 13px; font-weight: 800; }
.in-pill small { display: block; font-weight: 600; font-size: 11px; color: var(--muted); }
.in-res, .in-resrow, .in-cost { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; }
.in-res span, .in-resrow span, .in-cost span { display: inline-flex; gap: 4px; align-items: center; }
.in-r { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 2px; }
.in-decay { color: var(--coral); }
.in-hearts { letter-spacing: 1px; font-size: 15px; color: var(--coral); }
.in-mini { border-radius: 12px; background: var(--hud); box-shadow: var(--sh); }
.in-leave { border: 0; padding: 6px 11px; border-radius: 12px; background: var(--hud); color: var(--ink); font-weight: 800; font-size: 12px; box-shadow: var(--sh); }
.in-act { position: absolute; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); min-width: 120px; min-height: 60px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--butter); color: #3A2A08; font-family: var(--display, 'Fredoka'), sans-serif; font-weight: 600; font-size: 15px; box-shadow: var(--sh); }
.in-act:disabled { opacity: .45; }
.in-buildbtn { position: absolute; right: 16px; bottom: calc(94px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--hud); color: var(--ink); font-weight: 800; font-size: 13px; box-shadow: var(--sh); }
.in-buildbtn.on { background: var(--mint); color: #10302E; }
.in-building .in-buildbtn { bottom: calc(158px + env(safe-area-inset-bottom)); }
.in-hint { position: absolute; left: 14px; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: calc(100% - 170px); margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--hud); box-shadow: var(--sh); color: var(--ink); font-size: 12px; font-weight: 700; pointer-events: none; }
.in-build { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); background: var(--hud); box-shadow: 0 -4px 20px rgba(0,0,0,.25); border-radius: 22px 22px 0 0; }
.in-build[hidden], .in-over[hidden], .in-hint[hidden], .in-act[hidden], .in-buildbtn[hidden] { display: none; }
.in-build-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
.in-build-top b { color: var(--ink); font-size: 14px; white-space: nowrap; }
.in-items { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.in-items button { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; border-radius: 14px; background: var(--tile-2); color: var(--ink); font-size: 11px; font-weight: 800; }
.in-items button.on { background: var(--butter); color: #3A2A08; }
.in-items button.no { opacity: .45; }
.in-items canvas { width: 40px; height: 40px; }
.in-cost { gap: 5px; font-size: 10px; font-weight: 700; color: var(--muted); }
.in-items button.on .in-cost { color: #5A4510; }
.in-toast { position: absolute; left: 50%; top: calc(150px + env(safe-area-inset-top)); transform: translateX(-50%); max-width: 92%; padding: 9px 16px; border-radius: 14px; background: var(--hud); box-shadow: var(--sh); color: var(--ink); font-weight: 800; font-size: 13px; text-align: center; transition: opacity .3s; pointer-events: none; }
.in-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,8,20,.5); overflow-y: auto; }
.in-card { width: 100%; max-width: 360px; padding: 18px 16px; border-radius: 22px; background: var(--surface); box-shadow: var(--sh-big, var(--sh)); color: var(--ink); font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.in-card h3 { margin: 0; font-size: 19px; }
.in-card p { margin: 0; }
.in-lbl { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.in-fx { display: flex; flex-direction: column; gap: 5px; }
.in-fx div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--tile-2); }
.in-fx .good b { color: var(--mint); }
.in-fx .bad b { color: var(--coral); }
.in-chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.in-chars button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 8px; border: 0; border-radius: 14px; background: var(--tile-2); color: var(--ink); font-size: 11px; font-weight: 800; }
.in-chars button.on { background: var(--butter); color: #3A2A08; }
.in-chars canvas { width: 56px; height: 56px; }
.in-chars small { font-size: 10px; opacity: .8; }
.in-chd { color: var(--muted); font-size: 12px; min-height: 34px; }
.in-resrow { justify-content: center; padding: 6px; border-radius: 12px; background: var(--tile-2); }
.in-go { min-height: 52px; border: 0; border-radius: 16px; background: var(--mint); color: #10302E; font-family: var(--display, 'Fredoka'), sans-serif; font-weight: 600; font-size: 18px; }
.in-back { min-height: 40px; border: 0; border-radius: 14px; background: var(--tile-2); color: var(--ink); font-weight: 800; }