/* ══ RESET ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a0e18;
  --bg2:       #111827;
  --bg3:       #1a2438;
  --border:    #1f3050;
  --text:      #c8d8f0;
  --text-dim:  #506070;
  --accent:    #4a9eff;
  --accent2:   #2060c0;

  /* Seltenheits-Farben */
  --c-color:   #909090;
  --uc-color:  #40c070;
  --r-color:   #4488e0;
  --sr-color:  #a040e0;
  --e-color:   #e08020;
  --l-color:   #f0c030;
  --a-color:   #ff4060;

  /* Typ-Farben */
  --miner-col:      #5090c0;
  --energizer-col:  #40c0e0;
  --cooker-col:     #e09040;
  --dismantler-col: #c04040;
  --konstructor-col:#4080c0;
  --mechanik-col:   #50c080;

  /* Sekundär-Farben */
  --text-main: #c8d8f0;
  --green:     #40c070;
  --gold:      #f0c030;
  --red:       #e04040;
}

html, body { height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }

/* ══ SCREENS ══════════════════════════════════════════════════════════════════ */
.screen { display: none; height: 100vh; }
.screen.active { display: flex; }

/* ══ AUTH ════════════════════════════════════════════════════════════════════ */
#auth-screen {
  align-items: center; justify-content: center;
  background: var(--bg);
  background-image: radial-gradient(ellipse at 30% 40%, rgba(74,158,255,0.15) 0%, transparent 55%),
                    radial-gradient(ellipse at 70% 60%, rgba(100,60,200,0.12) 0%, transparent 50%);
}

.auth-container {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  width: 380px;
  box-shadow: 0 0 60px rgba(74,158,255,0.15);
}

.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.logo-icon { font-size: 3rem; display: block; margin-bottom: 0.3rem; filter: drop-shadow(0 0 10px rgba(74,158,255,0.7)); }
.auth-logo h1 { font-size: 1.6rem; color: var(--accent); letter-spacing: 3px; }
.auth-logo p  { color: var(--text-dim); font-size: 0.85rem; }

.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; }
.tab  { flex:1; background:none; border:none; border-bottom:2px solid transparent; padding:0.6rem; color:var(--text-dim); cursor:pointer; font-size:0.9rem; transition: color .2s; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { display: none; flex-direction: column; gap: 0.7rem; }
.tab-content.active { display: flex; }

.reg-hint { font-size: 0.78rem; color: var(--text-dim); background: rgba(74,158,255,0.08); border-radius: 5px; padding: 0.4rem 0.6rem; }

/* ══ INPUTS ══════════════════════════════════════════════════════════════════ */
input, select, textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.6rem 0.8rem; color: var(--text);
  font-size: 0.9rem; outline: none; transition: border-color .2s;
}
input:focus, select:focus { border-color: var(--accent); }
input[type=number] { appearance: textfield; }

/* ══ BUTTONS ══════════════════════════════════════════════════════════════════ */
.btn-primary {
  background: var(--accent2); border: 1px solid var(--accent); color: #fff;
  padding: 0.65rem 1.2rem; border-radius: 7px; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; transition: background .2s, transform .1s; width: 100%;
}
.btn-primary:hover  { background: var(--accent); }
.btn-primary:active { transform: scale(0.97); }

.btn-claim {
  background: linear-gradient(135deg, #e08020, #f0a040);
  border: 1px solid #f0c060; color: #000; font-weight: 700;
  padding: 0.8rem 1.5rem; border-radius: 8px; cursor: pointer;
  font-size: 1rem; transition: transform .15s, box-shadow .2s; width: 100%;
  box-shadow: 0 4px 20px rgba(240,160,60,0.4);
}
.btn-claim:hover  { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(240,160,60,0.6); }
.btn-claim:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-small {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 0.3rem 0.8rem; border-radius: 5px; cursor: pointer;
  font-size: 0.8rem; transition: background .2s;
}
.btn-small:hover { background: var(--border); }
.btn-small.active { background: rgba(74,158,255,.2); border-color: var(--accent); color: var(--accent); }

.btn-open {
  background: rgba(74,158,255,0.15); border: 1px solid var(--accent);
  color: var(--accent); padding: 0.35rem 0.8rem; border-radius: 5px;
  cursor: pointer; font-size: 0.82rem; transition: background .2s; width: 100%;
}
.btn-open:hover { background: rgba(74,158,255,0.3); }

.btn-feed {
  background: rgba(64,192,112,0.15); border: 1px solid var(--uc-color);
  color: var(--uc-color); padding: 0.3rem 0.7rem; border-radius: 5px;
  cursor: pointer; font-size: 0.8rem; transition: background .2s;
}
.btn-feed:hover { background: rgba(64,192,112,0.3); }

/* ══ MSG ═════════════════════════════════════════════════════════════════════ */
.msg { min-height: 1.2rem; font-size: 0.85rem; color: var(--uc-color); text-align: center; margin-top: 0.3rem; }
.msg.error { color: var(--a-color); }

.notification {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--bg2); border: 1px solid var(--accent);
  border-radius: 8px; padding: 0.8rem 1.2rem; color: var(--text);
  font-size: 0.9rem; z-index: 9999; box-shadow: 0 4px 20px rgba(74,158,255,0.3);
  max-width: 360px;
}
.notification.hidden { display: none; }
.notification.error  { border-color: var(--a-color); }
.notification.success{ border-color: var(--uc-color); }

/* ══ GAME SCREEN ══════════════════════════════════════════════════════════════ */
#game-screen {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 180px 1fr;
  grid-template-areas:
    "topbar topbar"
    "nav    content";
  overflow: hidden;
}

#topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 0.45rem 1rem; flex-wrap: wrap;
}
#tb-player  { font-weight: bold; color: var(--accent); }
#tb-series-info { flex: 1; font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#tb-right   { display: flex; align-items: center; gap: 0.8rem; }
#tb-bits    { color: var(--l-color); font-weight: bold; font-size: 0.9rem; }
#tb-online  { font-size: 0.78rem; color: var(--uc-color); }
#tb-clock   {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  letter-spacing: .03em;
  white-space: nowrap;
  border-left: 1px solid var(--border);
  padding-left: .7rem;
  margin-left: .1rem;
}

.badge {
  background: var(--e-color); color: #000; border-radius: 50%;
  width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.72rem; font-weight: bold;
}
.badge.hidden { display: none; }

#main-nav {
  grid-area: nav;
  display: flex; flex-direction: column;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  padding: .4rem 0;
}
.nav-btn {
  background: none; border: none; border-left: 3px solid transparent;
  padding: 0.6rem 1rem; color: var(--text-dim); cursor: pointer;
  font-size: 0.86rem; white-space: nowrap; transition: color .2s, border-color .2s, background .2s;
  text-align: left; width: 100%;
}
.nav-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-btn.active { color: var(--accent); border-left-color: var(--accent); background: rgba(74,158,255,.08); }

.panel { grid-area: content; display: none; overflow-y: auto; padding: 1rem; }
.panel.active { display: flex; flex-direction: column; }
.panel h2 { margin-bottom: 0.8rem; font-size: 1.2rem; color: var(--accent); }
.hint { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.8rem; }

.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; flex-wrap: wrap; gap: 0.5rem; }
.panel-header h2 { margin: 0; }

/* ══ DASHBOARD ════════════════════════════════════════════════════════════════ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.dash-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.1rem;
  transition: border-color 0.15s, background 0.15s;
}
.dash-card[data-nav]:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg2) 85%, var(--accent) 15%);
}
.dash-card h3 { font-size: 0.95rem; color: var(--accent); margin-bottom: 0.8rem; }
.dash-sub { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.5rem; }
.countdown { font-size: 0.88rem; color: var(--e-color); text-align: center; padding: 0.4rem 0; font-weight: bold; }

/* ══ BOOSTER PANEL ════════════════════════════════════════════════════════════ */
#booster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.booster-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 0.7rem; text-align: center;
  cursor: pointer; transition: border-color .2s, transform .15s;
}
.booster-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.booster-img { width: 100%; border-radius: 6px; display: block; margin-bottom: 0.4rem; }
.booster-icon { font-size: 2.5rem; display: block; margin-bottom: 0.4rem; }
.booster-series { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.5rem; }

/* ══ BOOSTER OVERLAY ══════════════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.overlay.hidden { display: none; }
.overlay-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem 2rem; max-width: 920px; width: 95%;
  max-height: 90vh; overflow-y: auto; text-align: center;
}
.overlay-box h2 { color: var(--accent); margin-bottom: 1rem; }

/* ══ TUTORIAL BUTTON ══════════════════════════════════════════════════════════ */
.btn-tutorial {
  background: rgba(74,158,255,.15); border-color: var(--accent);
  color: var(--accent); font-weight: bold;
}
.btn-tutorial:hover { background: rgba(74,158,255,.3); }

/* ══ TUTORIAL MODAL ═══════════════════════════════════════════════════════════ */
.tutorial-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--border);
  font-size: 1.05rem; font-weight: bold; color: var(--accent);
  background: rgba(74,158,255,.07); border-radius: 12px 12px 0 0;
}
.tutorial-close {
  background: none; border: none; color: var(--text-dim); font-size: 1.1rem;
  cursor: pointer; padding: .1rem .4rem; border-radius: 4px; line-height:1;
}
.tutorial-close:hover { color: var(--text); background: rgba(255,255,255,.08); }
.tutorial-body { padding: 1.1rem 1.3rem; overflow-y: auto; max-height: 72vh; }
.tut-section { margin-bottom: 1.1rem; }
.tut-section:last-child { margin-bottom: 0; }
.tut-section h4 {
  font-size: .85rem; font-weight: bold; color: var(--accent);
  margin: 0 0 .45rem 0;
  padding-bottom: .25rem; border-bottom: 1px solid rgba(74,158,255,.25);
  display: flex; align-items: center; gap: .4rem;
}
.tut-section p, .tut-section li {
  font-size: .83rem; color: var(--text-dim); line-height: 1.55; margin: .2rem 0;
}
.tut-section ul { margin: .3rem 0; padding-left: 1.2rem; }
.tut-tip {
  background: rgba(74,158,255,.08); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: .5rem .8rem;
  font-size: .8rem; color: var(--text); margin-top: .6rem;
}
.tut-tip strong { color: var(--accent); }
.tut-badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  font-size: .75rem; font-weight: bold; vertical-align: middle;
}
.tut-badge.e  { background: rgba(240,80,80,.2);  color: var(--e-color);  border:1px solid var(--e-color); }
.tut-badge.sr { background: rgba(180,100,255,.2); color: var(--sr-color); border:1px solid var(--sr-color); }
.tut-badge.r  { background: rgba(74,158,255,.2);  color: var(--accent);   border:1px solid var(--accent); }
.tut-badge.uc { background: rgba(64,192,112,.2);  color: var(--uc-color); border:1px solid var(--uc-color); }
.tut-badge.c  { background: rgba(255,255,255,.08);color: var(--text-dim); border:1px solid var(--border); }

/* ══ GENERIC MODAL (zentriert) ═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center; z-index: 1100;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; width: 95%; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  animation: modalIn .15s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.95) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

#booster-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ══ KARTEN-FILTER & GRID ════════════════════════════════════════════════════ */
.card-filters {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem;
}
.filter-btn {
  padding: .3rem .75rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg3);
  color: var(--text-dim);
  font-size: .78rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-btn:hover   { background: var(--bg2); color: var(--text); }
.filter-btn.active  { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }
.bots-panel-header  { flex-direction: column; align-items: flex-start !important; }
.bots-filter-wrap   { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; width: 100%; }
#bot-rarity-filters { margin-left: 1.2rem; }
.inv-sort-select {
  padding: .28rem .65rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg3);
  color: var(--text-dim);
  font-size: .78rem;
  cursor: pointer;
  margin-left: auto;
  transition: border-color .15s;
}
.inv-sort-select:focus { outline: none; border-color: var(--accent); color: var(--text); }
.rarity-filter-count { font-size: .68rem; opacity: .75; margin-left: .15rem; }
.rarity-filter-C  { border-color: #888 !important; }
.rarity-filter-UC { border-color: #5cb85c !important; }
.rarity-filter-R  { border-color: #4488e0 !important; }
.rarity-filter-SR { border-color: #a040e0 !important; }
.rarity-filter-E  { border-color: #e08020 !important; }
.rarity-filter-L  { border-color: #f0c030 !important; }
.rarity-filter-C.active  { background: #888 !important; border-color: #888 !important; }
.rarity-filter-UC.active { background: #5cb85c !important; border-color: #5cb85c !important; }
.rarity-filter-R.active  { background: #4488e0 !important; border-color: #4488e0 !important; color: #fff !important; }
.rarity-filter-SR.active { background: #a040e0 !important; border-color: #a040e0 !important; color: #fff !important; }
.rarity-filter-E.active  { background: #e08020 !important; border-color: #e08020 !important; color: #fff !important; }
.rarity-filter-L.active  { background: #f0c030 !important; border-color: #f0c030 !important; color: #000 !important; }

/* ══ SETTINGS PANEL ══════════════════════════════════════════════════════════ */
.settings-section   { max-width: 480px; margin-top: 1.2rem; }
.settings-row       { display: flex; align-items: center; gap: 1.4rem; padding: .9rem 1rem; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; margin-bottom: .7rem; }
.settings-label     { font-size: .9rem; font-weight: bold; min-width: 90px; color: var(--text); }
.settings-lang-btns { display: flex; gap: .5rem; }
.settings-lang-btn  { padding: .38rem .85rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg2); color: var(--text-dim); cursor: pointer; font-size: .85rem; transition: all .15s; }
.settings-lang-btn:hover  { border-color: var(--accent); color: var(--text); }
.settings-lang-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: bold; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.85rem;
}

/* ══ KARTEN (Booster-Ergebnis & Inventar) ════════════════════════════════════ */
.sp-card {
  background: var(--bg3);
  border-radius: 12px;
  border: 2px solid var(--border);
  position: relative;
  transition: transform .18s, box-shadow .18s;
  overflow: hidden;
  aspect-ratio: 2 / 3;
}
.sp-card.clickable { cursor: pointer; }
.sp-card.clickable:hover { transform: translateY(-5px); }
.sp-card.rarity-C  { border-color: var(--c-color); }
.sp-card.rarity-UC { border-color: var(--uc-color); }
.sp-card.rarity-R  { border-color: var(--r-color);  box-shadow: 0 0 10px rgba(68,136,224,0.35); }
.sp-card.rarity-SR { border-color: var(--sr-color); box-shadow: 0 0 16px rgba(160,64,224,0.45); }
.sp-card.rarity-E  { border-color: var(--e-color);  box-shadow: 0 0 20px rgba(224,128,32,0.55); }
.sp-card.rarity-L  { border-color: var(--l-color);  box-shadow: 0 0 24px rgba(240,192,48,0.65); }
.sp-card.rarity-A  { border-color: var(--a-color);  box-shadow: 0 0 28px rgba(255,64,96,0.75); }
.sp-card.is-duplicate { opacity: 0.5; }

@keyframes botPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.38; }
}
.sp-card.is-working { animation: botPulse 2.4s ease-in-out infinite; }

/* ── Image Area (fills entire card as background) ─────────────────────────── */
.card-image-area {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rarity-C  .card-image-area { background: linear-gradient(150deg, #1c2b3a 0%, #1e2d26 100%); }
.rarity-UC .card-image-area { background: linear-gradient(150deg, #1c2b3a 0%, #1a3028 100%); }
.rarity-R  .card-image-area { background: linear-gradient(150deg, #1c2b3a 0%, #182744 100%); }
.rarity-SR .card-image-area { background: linear-gradient(150deg, #1c2b3a 0%, #261535 100%); }
.rarity-E  .card-image-area { background: linear-gradient(150deg, #1c2b3a 0%, #301a08 100%); }
.rarity-L  .card-image-area { background: linear-gradient(150deg, #1c2b3a 0%, #2c250a 100%); }
.rarity-A  .card-image-area { background: linear-gradient(150deg, #1c2b3a 0%, #2e0a10 100%); }

/* Bottom fade across full card height */
.card-image-area::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(8,14,28,1) 0%, rgba(8,14,28,.5) 50%, transparent 100%);
  pointer-events: none;
}

.card-bot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  display: block;
  position: relative;
  z-index: 0;
}
.card-type-icon-large {
  font-size: 3rem;
  opacity: 0.3;
  position: relative;
  z-index: 0;
}

/* Rarity badge – top left */
.card-rarity-badge {
  position: absolute; top: .42rem; left: .42rem;
  padding: .1rem .42rem;
  border-radius: 5px;
  font-size: .66rem; font-weight: 800; letter-spacing: 1px;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.rarity-C  .card-rarity-badge { background: var(--c-color);  color: #000; }
.rarity-UC .card-rarity-badge { background: var(--uc-color); color: #000; }
.rarity-R  .card-rarity-badge { background: var(--r-color);  color: #fff; }
.rarity-SR .card-rarity-badge { background: var(--sr-color); color: #fff; }
.rarity-E  .card-rarity-badge { background: var(--e-color);  color: #000; }
.rarity-L  .card-rarity-badge { background: var(--l-color);  color: #000; }
.rarity-A  .card-rarity-badge { background: var(--a-color);  color: #fff; }

/* Type icon – top right */
.card-icon-type {
  position: absolute; top: .38rem; right: .42rem;
  font-size: 1.2rem; z-index: 3; opacity: .95;
  line-height: 1;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.7));
}
.type-icon-miner       { color: var(--miner-col); }
.type-icon-energizer   { color: var(--energizer-col); }
.type-icon-cooker      { color: var(--cooker-col); }
.type-icon-dismantler  { color: var(--dismantler-col); }
.type-icon-konstructor { color: var(--konstructor-col); }
.type-icon-mechanik    { color: var(--mechanik-col); }

/* Overlay labels */
.card-overlay-label {
  position: absolute;
  font-size: .66rem; font-weight: 800; letter-spacing: .5px;
  padding: .18rem .55rem; border-radius: 4px;
  z-index: 4; backdrop-filter: blur(6px);
  white-space: nowrap;
}
.card-overlay-label.new {
  top: .5rem; left: 50%; transform: translateX(-50%);
  background: rgba(64,192,112,.3); color: var(--uc-color);
  border: 1px solid var(--uc-color);
  box-shadow: 0 0 8px rgba(64,192,112,.35);
}
.card-overlay-label.dup {
  top: 2.1rem; left: 50%; transform: translateX(-50%);
  background: rgba(255,64,96,.2); color: var(--a-color); border: 1px solid var(--a-color);
}

/* Chip hint – just above info strip, right side */
.card-chip-hint {
  font-size: .9rem; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(100,180,255,.9));
  cursor: default;
}
.card-chip-hint.dimmed { opacity: .3; filter: none; }

/* ── Info Area – absolute overlay at card bottom ──────────────────────────── */
.card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .45rem .55rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  z-index: 2;
}
.card-name {
  font-size: .8rem; font-weight: 700;
  line-height: 1.2; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-lifetime-bar {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.08); overflow: hidden; margin: .15rem 0;
}
.card-lifetime-fill { height: 100%; transition: width .5s; border-radius: 2px; }
.card-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.card-degrad-btn {
  background: none; border: none; cursor: pointer;
  font-size: .95rem; padding: 0 .1rem; opacity: .45; line-height: 1;
  transition: opacity .15s, transform .1s;
}
.card-degrad-btn:hover { opacity: 1; transform: scale(1.25); }
.card-degrad-btn.dimmed { opacity: .18; cursor: not-allowed; }
.card-lifetime-days { font-size: .67rem; color: var(--text-dim); }
.card-number { font-size: .7rem; font-weight: 600; color: var(--text-dim); opacity: .8; }
.card-printnum {
  font-size: .64rem; color: var(--text-dim);
  display: block; margin-top: .05rem;
}
/* Typ-Zeile in der Infoleiste */
.card-type-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .08rem;
}
.card-type-name {
  font-size: .72rem; font-weight: 700; opacity: .9;
}
.card-num-tag {
  font-size: .72rem; font-weight: 700;
  color: var(--text-dim); opacity: .9; letter-spacing: .3px;
}

/* ══ RESSOURCEN / CHIPS ═══════════════════════════════════════════════════════ */
.rarity-sections { display: flex; flex-direction: column; gap: 1rem; }
.rarity-section h3 { font-size: 0.88rem; margin-bottom: 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.rarity-section.C h3  { color: var(--c-color); }
.rarity-section.UC h3 { color: var(--uc-color); }
.rarity-section.R h3  { color: var(--r-color); }
.rarity-section.SR h3 { color: var(--sr-color); }
.rarity-section.E h3  { color: var(--e-color); }

.res-grid, .chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 0.5rem;
}
.res-item, .chip-item {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 7px;
  padding: 0.55rem 0.8rem; display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem;
}
.res-item { border-left-width: 3px; }
.chip-item { border-left-width: 3px; }
.chip-card-img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.res-img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.res-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.res-name { flex: 1; font-weight: 500; }
.res-amount, .chip-amount { margin-left: auto; font-weight: bold; color: var(--accent); font-size: .9rem; }
.chip-ingredients { font-size: 0.7rem; color: var(--text-dim); display: block; margin-top: 0.1rem; }

/* ══ KARTEN-DETAIL MODAL ══════════════════════════════════════════════════════ */
.card-detail-box {
  text-align: left;
  max-width: 780px;
  width: 95vw;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 710px;
  transition: box-shadow .3s;
}
/* Rarity-Glow auf dem Dialog */
.card-detail-box.rarity-C  { border-color: var(--c-color);  box-shadow: 0 0 12px rgba(160,192,144,.25); }
.card-detail-box.rarity-UC { border-color: var(--uc-color); box-shadow: 0 0 16px rgba(64,192,112,.35); }
.card-detail-box.rarity-R  { border-color: var(--r-color);  box-shadow: 0 0 24px rgba(68,136,224,.5); }
.card-detail-box.rarity-SR { border-color: var(--sr-color); box-shadow: 0 0 32px rgba(160,64,224,.6); }
.card-detail-box.rarity-E  { border-color: var(--e-color);  box-shadow: 0 0 40px rgba(224,128,32,.7); }
.card-detail-box.rarity-L  { border-color: var(--l-color);  box-shadow: 0 0 48px rgba(240,192,48,.75); }
.card-detail-box.rarity-A  { border-color: var(--a-color);  box-shadow: 0 0 56px rgba(255,64,96,.8); }
/* Farbiger Akzentstreifen oben auf dem Bildbereich */
.card-detail-box.rarity-C  .card-detail-img-panel::before { background: var(--c-color); }
.card-detail-box.rarity-UC .card-detail-img-panel::before { background: var(--uc-color); }
.card-detail-box.rarity-R  .card-detail-img-panel::before { background: var(--r-color); }
.card-detail-box.rarity-SR .card-detail-img-panel::before { background: var(--sr-color); }
.card-detail-box.rarity-E  .card-detail-img-panel::before { background: var(--e-color); }
.card-detail-box.rarity-L  .card-detail-img-panel::before { background: var(--l-color); }
.card-detail-box.rarity-A  .card-detail-img-panel::before { background: var(--a-color); }
/* Rarity-Tint oben im Datenpanel */
.card-detail-box.rarity-C  .card-detail-data-panel { background: linear-gradient(180deg, rgba(160,192,144,.07) 0%, transparent 120px); }
.card-detail-box.rarity-UC .card-detail-data-panel { background: linear-gradient(180deg, rgba(64,192,112,.08)  0%, transparent 120px); }
.card-detail-box.rarity-R  .card-detail-data-panel { background: linear-gradient(180deg, rgba(68,136,224,.12)  0%, transparent 120px); }
.card-detail-box.rarity-SR .card-detail-data-panel { background: linear-gradient(180deg, rgba(160,64,224,.14)  0%, transparent 120px); }
.card-detail-box.rarity-E  .card-detail-data-panel { background: linear-gradient(180deg, rgba(224,128,32,.16)  0%, transparent 120px); }
.card-detail-box.rarity-L  .card-detail-data-panel { background: linear-gradient(180deg, rgba(240,192,48,.18)  0%, transparent 120px); }
.card-detail-box.rarity-A  .card-detail-data-panel { background: linear-gradient(180deg, rgba(255,64,96,.18)   0%, transparent 120px); }
.card-detail-img-panel {
  background: #0d1624 center/cover no-repeat;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Akzentstreifen oben */
.card-detail-img-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 4;
  opacity: .9;
}
/* Subtiler seitlicher Rarity-Schimmer */
.card-detail-img-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
  z-index: 1;
}
.card-detail-data-panel {
  padding: 1.5rem 1.8rem;
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-detail-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.card-detail-icon { font-size: 2.2rem; }
/* Name-Badge unten im Bildbereich */
.card-detail-name-badge {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .5px;
  padding: .35rem 1.1rem;
  border-radius: 30px;
  border: 2px solid;
  background: rgba(8,14,28,.72);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.detail-rarity-badge {
  display: inline-block; margin-top: .35rem;
  padding: .2rem .7rem; border-radius: 20px;
  font-size: .72rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  border: 1px solid currentColor;
}
.detail-rarity-badge.rarity-C  { color: var(--c-color);  background: rgba(160,192,144,.12); }
.detail-rarity-badge.rarity-UC { color: var(--uc-color); background: rgba(64,192,112,.12); }
.detail-rarity-badge.rarity-R  { color: var(--r-color);  background: rgba(68,136,224,.15); }
.detail-rarity-badge.rarity-SR { color: var(--sr-color); background: rgba(160,64,224,.15); }
.detail-rarity-badge.rarity-E  { color: var(--e-color);  background: rgba(224,128,32,.15); }
.detail-rarity-badge.rarity-L  { color: var(--l-color);  background: rgba(240,192,48,.15); }
.detail-rarity-badge.rarity-A  { color: var(--a-color);  background: rgba(255,64,96,.15); }
.detail-stat { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid rgba(31,48,80,0.6); font-size: 0.85rem; }
.detail-stat:last-child { border: none; }
.detail-stat-label { color: var(--text-dim); }
.detail-stat-val   { font-weight: bold; }

#feed-section { margin-top: 1rem; overflow-y: auto; max-height: 310px; padding-right: 4px; }
#feed-section h4 { font-size: 0.9rem; color: var(--accent); margin-bottom: 0.5rem; position: sticky; top: 0; background: var(--bg2); padding-bottom: .25rem; z-index: 1; }

/* ══ ACCU-SLOTS ══════════════════════════════════════════════════════════════════════════════ */
#accu-section {
  margin-top: 1rem;
  padding: .75rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.accu-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem;
}
.accu-header h4 { font-size: .9rem; color: var(--e-color); margin: 0; }
.accu-pool-hint { font-size: .75rem; color: var(--text-dim); }
.accu-slots-row { display: flex; gap: .45rem; margin-bottom: .45rem; }
.accu-slot {
  width: 36px; height: 36px; border-radius: 7px; border: 2px solid #444;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer; transition: background .15s, border-color .15s;
  user-select: none;
}
.accu-slot.filled {
  background: rgba(255,210,0,0.15); border-color: #f0c020; color: #f0c020;
}
.accu-slot.empty {
  background: var(--bg3); border-color: #334; color: #445;
}
.accu-slot.empty:hover { border-color: #f0c020; color: #f0c020; }
.accu-slot.filled:hover { background: rgba(255,60,60,0.12); border-color: #e04040; color: #e04040; }
.accu-hint { font-size: .75rem; color: var(--text-dim); }
.feed-chip-option {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.4rem 0.6rem; margin-bottom: 0.35rem; font-size: 0.82rem;
}

/* ══ RANGLISTE ════════════════════════════════════════════════════════════════ */
.ranking-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.ranking-tab { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: .35rem .8rem; border-radius: 8px; cursor: pointer; font-size: .85rem; transition: background .15s, color .15s; }
.ranking-tab:hover { background: var(--bg2); color: var(--text); }
.ranking-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ranking-tab-content.hidden { display: none; }
#leaderboard-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
#leaderboard-table th {
  text-align: left; padding: 0.55rem 0.8rem;
  border-bottom: 2px solid var(--border); color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; font-size: 0.72rem; letter-spacing: .04em;
}
#leaderboard-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(31,48,80,0.45);
  transition: background .15s;
}
#leaderboard-table tr:hover td { background: rgba(255,255,255,.035); }
#leaderboard-table tbody tr { border-radius: 8px; }
#series-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
#series-leaderboard-table th { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 2px solid var(--border); color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: .04em; }
#series-leaderboard-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(31,48,80,0.45); transition: background .15s; }
#series-leaderboard-table tr:hover td { background: rgba(255,255,255,.035); }
#series-leaderboard-table tbody tr { border-radius: 8px; }
.series-rank-info { font-size: .82rem; color: var(--text-dim); margin: 0 0 .9rem; padding: .5rem .8rem; background: rgba(80,150,255,.07); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; }
.reg-series-bonus { font-size: .82rem; color: #6dd49a; background: rgba(80,220,120,.08); border: 1px solid rgba(80,220,120,.25); border-radius: 6px; padding: .4rem .7rem; margin-bottom: .4rem; min-height: 0; }
.reg-series-bonus:empty { display: none; }
.rank-pos { width: 2.5rem; }
.rank-num { color: var(--text-dim); font-size: .85rem; }
.rank-medal { font-size: 1.2rem; }
.rank-name { font-weight: 600; }
.imperial-rank { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:.15rem .45rem; border-radius:5px; margin-right:.35rem; vertical-align:middle; white-space:nowrap; }
.irank-1    { background:rgba(255,215,0,.18);  color:#ffd700; border:1px solid rgba(255,215,0,.45);  text-shadow:0 0 8px rgba(255,215,0,.5);  }
.irank-2    { background:rgba(192,192,192,.14);color:#d0d0d0; border:1px solid rgba(192,192,192,.4);  }
.irank-3    { background:rgba(205,127,50,.14); color:#cd7f32; border:1px solid rgba(205,127,50,.4);  }
.irank-top  { background:rgba(150,100,255,.13);color:#b48eff; border:1px solid rgba(150,100,255,.35); }
.irank-mid  { background:rgba(80,180,255,.1);  color:#7ec8ff; border:1px solid rgba(80,180,255,.3);  }
.irank-low  { background:rgba(80,220,120,.09); color:#6dd49a; border:1px solid rgba(80,220,120,.28); }
.irank-base { background:rgba(120,120,130,.1); color:#9a9aaa; border:1px solid rgba(120,120,130,.25); }
/* Serien-Auszeichnungs-Badges */
.sbadge { font-size:1rem; cursor:default; margin-right:.15rem; display:inline-block; }
.sbadge-gold   { filter:drop-shadow(0 0 5px rgba(255,215,0,.8)); }
.sbadge-silver { filter:drop-shadow(0 0 4px rgba(192,192,192,.7)); }
.sbadge-bronze { filter:drop-shadow(0 0 4px rgba(205,127,50,.7)); }
.sbadge-year_gold   { filter:drop-shadow(0 0 7px rgba(255,215,0,1)); animation:yearBadgePulse 2.5s infinite; }
.sbadge-year_silver { filter:drop-shadow(0 0 6px rgba(192,192,192,.9)); }
.sbadge-year_bronze { filter:drop-shadow(0 0 5px rgba(205,127,50,.8)); }
@keyframes yearBadgePulse { 0%,100%{filter:drop-shadow(0 0 7px rgba(255,215,0,1))} 50%{filter:drop-shadow(0 0 14px rgba(255,215,0,.5))} }
/* Serien-Belohnungs-Dialog */
.ser-podium { display:flex; flex-direction:column; gap:.5rem; margin:1rem 0; }
.ser-podium-row { padding:.5rem .8rem; border-radius:8px; font-size:.9rem; }
.ser-gold   { background:rgba(255,215,0,.1);  border:1px solid rgba(255,215,0,.3); }
.ser-silver { background:rgba(192,192,192,.08);border:1px solid rgba(192,192,192,.25); }
.ser-bronze { background:rgba(205,127,50,.08); border:1px solid rgba(205,127,50,.25); }
.ser-winner-note { margin-top:.8rem; padding:.6rem .9rem; background:rgba(80,220,120,.1); border:1px solid rgba(80,220,120,.3); border-radius:8px; font-size:.85rem; color:#6dd49a; }
.year-badge-award { font-size:.72rem; color:#ffd700; margin-left:.4rem; opacity:.9; }
.rank-self-tag { font-size: .7rem; color: var(--accent); background: var(--accent)22; border-radius: 4px; padding: .1rem .35rem; margin-left: .3rem; vertical-align: middle; }
.rank-album { color: #4fc3f7; font-weight: 700; }
.rank-ip    { color: #f0c030; font-weight: 700; }
.rank-rare  { color: #c4a0ff; font-weight: 600; }
.rank-bits  { color: var(--text-dim); }
.rank-icon  { font-size: .8rem; opacity: .7; }
.rank-1 td { background: rgba(255,215,0,.06); }
.rank-2 td { background: rgba(192,192,192,.05); }
.rank-3 td { background: rgba(205,127,50,.05); }
.rank-1 .rank-pos .rank-medal,
.rank-1 .rank-name { text-shadow: 0 0 10px rgba(255,215,0,.35); }
.rank-1:hover td { background: rgba(255,215,0,.1); }
.rank-2:hover td { background: rgba(192,192,192,.09); }
.rank-3:hover td { background: rgba(205,127,50,.09); }
.self-row td { background: rgba(80,150,255,.07) !important; }
.self-row:hover td { background: rgba(80,150,255,.12) !important; }

/* ══ SCROLLBAR ════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

/* ══ TOUCH ════════════════════════════════════════════════════════════════════ */
/* Entfernt 300ms Tap-Delay auf Touch-Geräten */
button, .nav-btn, select, input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }

/* ══ EVENTS ══════════════════════════════════════════════════════════════════ */
#tb-event-info { display:flex;align-items:center; }
.tb-event-badge { display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in srgb,var(--bg2) 60%,var(--ev-color) 40%);border:1px solid color-mix(in srgb,transparent 45%,var(--ev-color) 55%);border-radius:20px;padding:.2rem .75rem .2rem .5rem;font-size:.8rem;white-space:nowrap;cursor:default; }
.tb-event-pulse { width:7px;height:7px;border-radius:50%;background:var(--ev-color);animation:eventPulse 1.5s infinite;flex-shrink:0; }
.tb-event-icon { font-size:1rem;line-height:1; }
.tb-event-name { font-weight:700;color:var(--text); }
.tb-event-meta { color:#8faabf;font-size:.78rem; }

.event-header-bar { display:flex;align-items:center;gap:.65rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.6rem 1rem;font-size:.9rem;margin-bottom:.6rem;flex-wrap:wrap; }
.event-header-ended { color:var(--text-dim); }
.event-header-pulse { display:inline-block;width:8px;height:8px;border-radius:50%;background:#4caf50;animation:eventPulse 1.5s infinite;flex-shrink:0; }
.event-weekly-bar { background:color-mix(in srgb,var(--bg2) 78%,#f0c030 22%);border:1px solid rgba(240,192,48,.25);border-radius:8px;padding:.5rem 1rem;font-size:.88rem;margin-bottom:.9rem; }
@keyframes eventPulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.event-cards-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:.9rem;margin-top:.2rem; }
.event-card { background:var(--bg2);border:2px solid var(--border);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.55rem;transition:border-color .2s,transform .15s,box-shadow .2s; }
.event-card:hover { transform:translateY(-2px);border-color:var(--ev-color,var(--accent)); }
.event-card-active { border-color:var(--ev-color,var(--accent));box-shadow:0 0 18px -5px var(--ev-color,var(--accent)); }
.event-card-weekly { grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:1rem; }
.event-card-weekly .ev-lb-list { flex:1;min-width:180px; }
.event-card-weekly .event-card-btn { align-self:flex-end; }
.event-card-head { display:flex;align-items:center;gap:.65rem; }
.event-card-icon { font-size:2rem;line-height:1;flex-shrink:0; }
.event-card-info { flex:1;min-width:0; }
.event-card-name { font-weight:700;font-size:.92rem; }
.event-card-day { font-size:.74rem;color:var(--text-dim);margin-top:.1rem; }
.event-live-badge { font-size:.7rem;color:#4caf50;font-weight:700;animation:eventPulse 1.5s infinite;white-space:nowrap;margin-left:auto; }
.event-card-score { font-size:.83rem;color:var(--text-dim); }
.event-card-sep { height:1px;background:var(--border);flex-shrink:0; }
.ev-lb-title { font-size:.71rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em; }
.ev-lb-list { display:flex;flex-direction:column;gap:.08rem; }
.ev-lb-row { display:flex;align-items:center;gap:.35rem;font-size:.82rem;padding:.07rem 0; }
.ev-lb-name { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ev-lb-pts { color:var(--text-dim);font-size:.76rem;white-space:nowrap; }
.ev-lb-me .ev-lb-name { color:var(--accent);font-weight:700; }
.ev-lb-empty { font-size:.77rem;color:var(--text-dim);text-align:center;padding:.2rem 0; }
.event-card-btn { margin-top:auto;background:transparent;border:1px solid var(--ev-color,var(--accent));color:var(--ev-color,var(--accent));border-radius:7px;padding:.3rem .7rem;font-size:.79rem;cursor:pointer;transition:background .15s;text-align:center; }
.event-card-btn:hover { background:color-mix(in srgb,transparent 55%,var(--ev-color,var(--accent)) 45%); }
.event-detail-box { background:var(--bg2);border:1px solid var(--ev-color,var(--border));border-radius:12px;padding:1.2rem;max-width:50%; }
.event-detail-head { display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1rem;margin-bottom:.65rem; }
.event-detail-rewards { font-size:.8rem;color:var(--text);margin-bottom:.9rem;line-height:2;background:color-mix(in srgb,var(--bg3,#0d0d1a) 70%,var(--ev-color,var(--accent)) 30%);border:1px solid color-mix(in srgb,transparent 55%,var(--ev-color,var(--accent)) 45%);border-radius:8px;padding:.5rem .9rem; }
.event-detail-table { width:100%;border-collapse:collapse;font-size:.85rem; }
.event-detail-table th { text-align:left;padding:.3rem .5rem;color:var(--text-dim);font-size:.76rem;border-bottom:1px solid var(--border); }
.event-detail-table td { padding:.28rem .5rem;border-bottom:1px solid rgba(255,255,255,.04); }

/* ══ KARTEN-BILD: contain-Variante für Chips ════════════════════════════════ */
.card-img-contain {
  object-fit: contain !important;
  padding: 18% 12%;
  width: 100%;
  height: 100%;
}
.card-image-area--chip {
  background: linear-gradient(150deg, #101c2a 0%, #0d1a24 100%) !important;
}

/* ══ RESSOURCE: großes Icon in der Bildzone ══════════════════════════════════ */
.card-resource-icon {
  font-size: 4rem;
  opacity: 0.55;
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 0 12px currentColor);
}

/* ══ SERIE-BADGE ══════════════════════════════════════════════════════════════ */

/* ══ BILD-TOOLTIP (Hover-Vergrößerung) ══════════════════════════════════ */
#img-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  display: none;
  padding: 4px;
  background: var(--bg3, #1a2330);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
  transition: opacity .1s;
}
#img-tooltip img {
  display: block;
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 7px;
}
#img-tooltip.ratio-23 img {
  width: 173px;
  height: 260px;
}
#img-tooltip.ratio-32 img {
  width: 390px;
  height: 260px;
}
.series-badge {
  background: rgba(74,158,255,0.1); border: 1px solid rgba(74,158,255,0.3);
  border-radius: 5px; padding: 0.15rem 0.5rem; font-size: 0.75rem; color: var(--accent);
}
.series-timer { color: var(--e-color); font-weight: bold; }

/* ══ PLANETEN-PANEL ══════════════════════════════════════════════════════════ */
.planets-section { margin-bottom: 1.8rem; }
.planets-section h3 { font-size: 1rem; margin-bottom: 0.7rem; color: var(--text); }

/* Planetenkarten im Panel */
.planet-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.9rem;
}
.planet-card-item {
  background: var(--bg3);
  border: 1.5px solid #2a4a7a;
  border-radius: 10px;
  padding: 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.planet-card-item:hover { border-color: #5090d0; box-shadow: 0 0 14px rgba(80,144,208,0.3); }
.planet-card-item.depleted { opacity: 0.45; cursor: not-allowed; }
.planet-card-item.in-use   { opacity: 0.6;  cursor: not-allowed; border-color: #f0c030 !important; box-shadow: 0 0 6px rgba(240,192,48,.2) !important; }
.planet-card-item.depleted:hover,
.planet-card-item.in-use:hover { border-color: #f0c030 !important; box-shadow: 0 0 6px rgba(240,192,48,.2) !important; }
.planet-card-item.rarity-C  { border-color: var(--c-color); }
.planet-card-item.rarity-UC { border-color: var(--uc-color); }
.planet-card-item.rarity-R  { border-color: var(--r-color);  box-shadow: 0 0 8px rgba(68,136,224,0.25); }
.planet-card-item.rarity-SR { border-color: var(--sr-color); box-shadow: 0 0 8px rgba(144,64,208,0.28); }
.planet-card-item.rarity-E  { border-color: var(--e-color);  box-shadow: 0 0 10px rgba(224,128,32,0.35); }
.planet-compatible-miners { font-size:.68rem; color: var(--text-dim); margin-top:.35rem; border-top:1px solid rgba(255,255,255,.07); padding-top:.3rem; }
.planet-compatible-miners .miner-names { color: var(--text); }
.planet-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 0.4rem; }
.planet-name { font-weight: bold; font-size: 0.92rem; text-align: center; }
.planet-min-rarity { text-align:center; font-size:.72rem; margin:.15rem 0 .35rem; }
.planet-res-list { font-size: 0.75rem; margin: 0.4rem 0; display: flex; flex-wrap: wrap; gap: 3px; }
.planet-uses-bar {
  margin-top: 0.5rem;
  height: 5px; background: var(--bg2); border-radius: 3px; overflow: hidden;
}
.planet-uses-fill { height: 100%; background: #4a9eff; border-radius: 3px; }
.planet-uses-text { font-size: .7rem; color: var(--text-dim); text-align: right; margin-top: 2px; }

/* Missionen-Grid */
.missions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}
.mission-card {
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  color: var(--text);
}
.mission-card.done { border-color: #40b060; box-shadow: 0 0 10px rgba(64,176,96,0.3); }
.mission-title { font-weight: bold; font-size: .9rem; margin-bottom: .3rem; }
.mission-miner { font-size: .75rem; color: var(--text-dim); margin-bottom: .5rem; }
.mission-timer { font-size: 0.82rem; font-weight: bold; margin: 0.4rem 0; }
.mission-timer.done { color: #40c060; }
.mission-timer.waiting { color: var(--e-color); }
.mission-yield { font-size: 0.72rem; color: var(--text-dim); margin-top: .3rem; }
.btn-collect {
  width: 100%; margin-top: .7rem;
  background: #1a5030; color: #40d060;
  border: 1px solid #2a7040; border-radius: 6px;
  padding: .45rem; cursor: pointer; font-size: .82rem;
  transition: background .15s;
}
.btn-collect:hover { background: #224018; }
.btn-collect:disabled { opacity:.4; cursor:not-allowed; }

/* Deploy-Modal */
.deploy-modal-box { width: min(740px, 96vw) !important; max-height: 92vh; overflow-y: auto; }
.deploy-modal-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .8rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
}
.deploy-modal-planet-thumb {
  width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0;
  background-size: cover; background-position: center;
  border: 2px solid var(--border);
}
.deploy-modal-planet-info h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.deploy-planet-res-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.deploy-res-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .45rem; border-radius: 5px; font-size: .72rem; font-weight: 600;
  border: 1px solid currentColor; opacity: .85;
}
.deploy-res-badge .res-rar { font-size: .62rem; opacity: .7; }
.deploy-choose-label { margin: 0 0 .5rem; font-size: .85rem; color: var(--text-dim); font-weight: 400; }
.deploy-modal-footer { margin-top: .9rem; display: flex; gap: .6rem; justify-content: flex-end; }

/* Miner-Karten Grid */
#deploy-miner-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; max-height: 440px; overflow-y: auto; }
.deploy-miner-card {
  display: flex; flex-direction: column;
  background: var(--bg2); border: 2px solid var(--border);
  border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s;
  overflow: hidden;
}
.deploy-miner-card:hover { border-color: var(--accent); }
.deploy-miner-card.selected { border-color: var(--accent); background: rgba(74,158,255,.1); }
.deploy-miner-card.unavailable { opacity:.38; cursor:not-allowed; pointer-events:none; }
.deploy-miner-img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  background: var(--bg3); display: block;
}
.deploy-miner-img-placeholder {
  width: 100%; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); font-size: 2.5rem; color: var(--text-dim);
}
.deploy-miner-body { padding: .5rem .55rem .55rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.deploy-miner-name-row { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.deploy-miner-name { font-weight: 700; font-size: .82rem; }
.deploy-miner-stats { font-size: .68rem; color: var(--text-dim); line-height: 1.5; }
.deploy-miner-eff-row { display: flex; align-items: center; gap: .4rem; margin-top: .1rem; }
.deploy-miner-eff-label { font-size: .75rem; font-weight: 700; }
.deploy-miner-yield { font-size: .68rem; color: var(--text-dim); }
.deploy-miner-eff-bar-track { flex: 1; height: 4px; background: #333; border-radius: 2px; }
.deploy-miner-eff-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.deploy-miner-resources { margin-top: .3rem; }
.deploy-miner-resources-label { font-size: .64rem; color: var(--text-dim); margin-bottom: .2rem; }
.deploy-miner-res-list { display: flex; flex-wrap: wrap; gap: .2rem; }
.deploy-miner-res-pill {
  font-size: .63rem; padding: .1rem .32rem; border-radius: 4px;
  border: 1px solid currentColor; font-weight: 600; white-space: nowrap;
}
.deploy-miner-res-pill.locked { opacity: .25; filter: grayscale(1); }

/* ══ COOKING-PANEL ════════════════════════════════════════════════ */
.cooking-section { margin-bottom: 1.8rem; }
.cooking-section h3 { font-size: 1rem; margin-bottom: .7rem; }
.cooking-controls {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cooking-select {
  background: var(--bg3); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: .35rem .6rem; font-size: .82rem; cursor: pointer;
  min-width: 180px; max-width: 280px; transition: border-color .2s, box-shadow .2s;
}
.cooking-select.rarity-C  { border-color: #888; box-shadow: 0 0 0 1px #88888840; }
.cooking-select.rarity-UC { border-color: #4a9; box-shadow: 0 0 0 1px #44aa9940; }
.cooking-select.rarity-R  { border-color: #48f; box-shadow: 0 0 0 1px #4488ff40; }
.cooking-select.rarity-SR { border-color: #c4f; box-shadow: 0 0 0 1px #cc44ff40; }
.cooking-select.rarity-E  { border-color: #fc0; box-shadow: 0 0 0 1px #ffcc0040; }
.rarity-filter-row { display: flex; gap: .3rem; flex-wrap: wrap; }

/* Laufende Koch-Jobs */
.cooking-jobs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem;
}
.cooking-job-card {
  background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: 10px; padding: .9rem;
}
.cooking-job-card.done { border-color: #d09030; box-shadow: 0 0 10px rgba(208,144,48,.3); }
.cooking-job-title { font-weight: bold; font-size: .9rem; margin-bottom: .25rem; }
.cooking-job-cooker { font-size: .75rem; color: var(--text-dim); margin-bottom: .45rem; }
.cooking-job-timer { font-size: .82rem; font-weight: bold; }
.cooking-job-timer.done { color: #d09030; }
.btn-collect-chip {
  width: 100%; margin-top: .65rem;
  background: #3a2a05; color: #d09030;
  border: 1px solid #6a4a10; border-radius: 6px;
  padding: .4rem; cursor: pointer; font-size: .82rem;
  transition: background .15s;
}
.btn-collect-chip:hover { background: #4a3a08; }
.btn-collect-chip:disabled { opacity:.4; cursor:not-allowed; }

/* Rezepte-Grid */
.recipes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: .6rem;
}
.recipe-card {
  background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: 10px; padding: .63rem; transition: border-color .15s;
  overflow: hidden;
}
.recipe-img-wrap {
  margin: -.63rem -.63rem .5rem -.63rem;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  aspect-ratio: 3/2;
}
.recipe-chip-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.recipe-card.can-cook { border-color: rgba(74,158,255,.4); cursor: pointer; }
.recipe-card.can-cook:hover { border-color: var(--accent); box-shadow: 0 0 12px rgba(74,158,255,.2); }
.recipe-card.locked { opacity: .45; }
.recipe-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.35rem; }
.recipe-name { font-weight: 800; font-size: .74rem; letter-spacing: .02em; }
.recipe-duration { font-size: .63rem; color: var(--text-dim); }
.recipe-ingredients { margin-top: .28rem; display: flex; flex-direction: column; gap: .14rem; }
.recipe-ing-row {
  display: flex; justify-content: space-between; font-size: .63rem;
  padding: .1rem .21rem; border-radius: 4px;
}
.recipe-ing-row.ok  { background: rgba(64,192,112,.08); }
.recipe-ing-row.missing { background: rgba(224,64,48,.08); color: #e08080; }
.recipe-cook-btn {
  width: 100%; margin-top: .42rem;
  background: rgba(74,158,255,.12); color: var(--accent);
  border: 1px solid rgba(74,158,255,.3); border-radius: 6px;
  padding: .28rem; cursor: pointer; font-size: .7rem; transition: background .15s;
}
.recipe-cook-btn:hover { background: rgba(74,158,255,.22); }
.recipe-cook-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── Energizer Preview ── */
.energizer-preview-box {
  margin-top: .8rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
}
.energizer-preview-box.hidden { display: none; }
.energizer-preview-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .6rem;
}
.energizer-preview-bot-img {
  width: 128px;
  height: 192px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.energizer-preview-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .1rem;
  flex: 1;
}
.energizer-preview-botname {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.energizer-preview-divider {
  border-top: 1px solid var(--border);
  margin: .65rem 0;
}
.energizer-preview-stats {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.energizer-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .82rem;
  color: var(--text);
}
.energizer-stat-pill strong { color: var(--text); }
.energizer-stat-yield strong { color: #d09030; }
.energizer-stat-error { border-color: #c44; color: #f88; }
.energizer-stat-error strong { color: #f88; }
.energizer-parts-label {
  font-size: .75rem;
  color: var(--text-dim);
  margin-bottom: .35rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.energizer-parts-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* ── Dismantler Preview Bots ── */
.dismantler-preview-bots {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: .6rem;
}
.dismantler-preview-bot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
  min-width: 90px;
}
.dismantler-preview-arrow {
  font-size: 1.6rem;
  align-self: center;
  opacity: .7;
  flex-shrink: 0;
}
.dismantler-target-img {
  opacity: .55;
  filter: grayscale(40%);
  border-color: rgba(200,60,60,.45);
}


.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 175px);
  gap: .8rem;
  margin-top: .5rem;
}
.market-sort-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-bottom: .55rem;
}
.sort-label { font-size: .76rem; color: var(--text-dim); margin-right: .15rem; }
.sort-btn {
  font-size: .74rem;
  padding: .28rem .6rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.sort-btn:hover  { background: rgba(74,158,255,.12); color: var(--text-main); }
.sort-btn.active { background: rgba(74,158,255,.18); border-color: var(--accent); color: var(--accent); }
.market-time-row { font-size: .72rem; color: var(--text-dim); }
.market-time-row.expiring { color: #e08040; }

/* ── Rare-Bot-Register Modal ──────────────────────────── */
.rarebot-modal-box {
  max-width: 720px;
  width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.4rem;
}
/* Series grouping */
.rarebot-series-section { margin-bottom: 1.8rem; }
.rarebot-series-header {
  font-size: .82rem;
  font-weight: 700;
  padding: .4rem .7rem;
  border-radius: 8px;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.rarebot-series-active  { background: rgba(100,220,120,.10); color: #80e090; border-left: 3px solid #60c070; }
.rarebot-series-past    { background: rgba(150,130,200,.10); color: #a090c0; border-left: 3px solid #8070a0; }
.rarebot-series-badge   { font-size: .65rem; font-weight: 600; padding: .1rem .4rem; border-radius: 20px;
                          background: rgba(100,220,120,.18); color: #80e090; border: 1px solid rgba(100,220,120,.35); }
.rarebot-series-badge-past { background: rgba(150,130,200,.18); color: #b0a0d0; border-color: rgba(150,130,200,.35); }

.rarebot-section { margin-bottom: 1.4rem; }
.rarebot-section-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  margin-bottom: .5rem;
  cursor: pointer;
  user-select: none;
}
.rarebot-section-header:hover { opacity: .85; }
.rarebot-toggle-icon { margin-left: auto; font-size: .8rem; transition: transform .2s; }
.rarebot-section.collapsed .rarebot-toggle-icon { transform: rotate(-90deg); }
.rarebot-section.collapsed .rarebot-row { display: none; }
.rarebot-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .5rem;
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: .3rem;
  transition: background .14s;
}
.rarebot-row:hover { background: rgba(255,255,255,.06); }
.rarebot-row.extinct {
  background: rgba(255,40,40,.05);
  border-color: rgba(255,70,70,.2);
}
.rarebot-img-wrap {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
}
.rarebot-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  cursor: zoom-in;
  display: block;
}
.rarebot-img-preview {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 180px;
  height: 270px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.12);
  pointer-events: none;
  background: #1a1d26;
}
.rarebot-img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rarebot-img-wrap:hover .rarebot-img-preview {
  /* Positionierung via JS (rarebotImgEnter) */
}
.rarebot-info { flex: 1; min-width: 0; }
.rarebot-name {
  font-weight: 700;
  font-size: .87rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rarebot-meta {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .2rem;
  flex-wrap: wrap;
}
.rarebot-extinct-badge {
  font-size: .62rem;
  font-weight: 700;
  color: #ff6b6b;
  background: rgba(255,80,80,.15);
  border: 1px solid rgba(255,80,80,.4);
  border-radius: 4px;
  padding: .1rem .35rem;
  letter-spacing: .05em;
}
.rarebot-stats {
  flex-shrink: 0;
  width: 360px;
  text-align: right;
}
.rarebot-count {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}
.rarebot-count.extinct { color: #ff6b6b !important; }
.rarebot-bar-outer {
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: .28rem;
}
.rarebot-bar-inner {
  height: 100%;
  border-radius: 3px;
}
.rarebot-row.last-one {
  background: rgba(240,192,48,.07);
  border-color: rgba(240,192,48,.35);
  box-shadow: 0 0 12px rgba(240,192,48,.12);
}
.rarebot-lost {
  font-size: .66rem;
  color: var(--text-dim);
  margin-top: .22rem;
  white-space: nowrap;
  text-align: right;
}
.market-listing-card {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
  width: 175px;
  box-sizing: border-box;
  position: relative;
}
.market-listing-card:hover {
  border-color: rgba(74,158,255,.45);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.market-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .3rem .6rem;
  background: rgba(0,0,0,.45);
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: .7rem;
  color: #d8dde8;
  gap: .3rem;
  flex-shrink: 0;
  min-height: 1.6rem;
}
.market-card-header-cat {
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.market-card-header-time {
  white-space: nowrap;
  flex-shrink: 0;
  color: #aab4c8;
}
.market-card-header-time.expiring {
  color: #ff6b6b;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255,80,80,.4);
}
.market-card-image {
  width: 100%;
  height: 140px;
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.market-info-btn {
  position: absolute;
  bottom: .35rem;
  right: .35rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.25);
  color: #a0b8d8;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background .15s, color .15s;
  line-height: 1;
}
.market-info-btn:hover {
  background: rgba(80,140,220,.7);
  color: #fff;
  border-color: rgba(120,180,255,.5);
}
.market-card-img-ph {
  font-size: 2.8rem;
  opacity: .35;
  user-select: none;
}
.market-card-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.market-card-body {
  flex: 1;
  padding: .55rem .65rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-start;
}
.market-listing-header {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.market-item-icon { font-size: 1.2rem; }
.market-item-name {
  font-weight: bold;
  font-size: .86rem;
  word-break: break-word;
  line-height: 1.2;
}
.market-seller { font-size: .71rem; color: var(--text-dim); margin-top: auto; padding-top: .3rem; }
.market-price  { font-size: .92rem; color: var(--e-color); font-weight: bold; margin-top: .15rem; }
.market-price-per-unit { font-size: .75rem; color: var(--text-dim); font-weight: normal; opacity: .8; }
.market-qty    { font-size: .74rem; color: var(--text-dim); }
.market-planet-res { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .1rem; }
.market-res-tag {
  font-size: .64rem;
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 5px;
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}
.market-card-life {
  font-size: .71rem;
  color: var(--text-dim);
}
.market-card-life.warn {
  color: #e08040;
}
.market-card-bottype {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .18rem .52rem;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text-main);
  margin-top: .2rem;
  letter-spacing: .02em;
}
.btn-market-buy {
  margin-top: .35rem;
  padding: .3rem;
  background: rgba(74,158,255,.14);
  color: var(--accent);
  border: 1px solid rgba(74,158,255,.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: .78rem;
  transition: background .15s;
}
.btn-market-buy:hover { background: rgba(74,158,255,.25); }
.btn-market-buy:disabled { opacity: .35; cursor: not-allowed; }
.btn-market-cancel {
  margin-top: .35rem;
  padding: .3rem;
  background: rgba(224,64,48,.1);
  color: #e05050;
  border: 1px solid rgba(224,64,48,.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: .82rem;
  transition: background .15s;
}
.btn-market-cancel:hover { background: rgba(224,64,48,.22); }

/* ── Energizer ──────────────────────────────────────────────────────────────── */
.energizer-controls {
  display: flex;
  align-items: flex-end;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.energizer-slider-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.energizer-progress-bar {
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  margin: .4rem 0 .3rem;
  overflow: hidden;
}
.energizer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d09030, #f0c060);
  border-radius: 3px;
  transition: width .5s;
}

.dismantler-controls {
  display: flex;
  align-items: flex-end;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

/* ── Dismantler Job Card ───────────────────────────────────────── */
.dismantler-job-card {
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dismantler-job-card.done { box-shadow: 0 0 12px rgba(208,144,48,.25); }
.dismantler-job-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .85rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
}
.dismantler-job-title {
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
}
.dismantler-job-accu {
  font-size: .71rem;
  color: #f0c060;
  background: rgba(240,192,96,.1);
  border: 1px solid rgba(240,192,96,.3);
  border-radius: 4px;
  padding: .1rem .42rem;
}
.dismantler-job-body {
  padding: .6rem .85rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.dismantler-job-target {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--text-dim);
}
.rarity-badge {
  font-size: .68rem;
  font-weight: 700;
  border: 1px solid;
  border-radius: 3px;
  padding: .05rem .38rem;
  line-height: 1.4;
}
.dismantler-job-yield-label {
  font-size: .71rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}
.dismantler-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .3rem;
}
.dismantler-job-progress {
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .2rem;
}
.dismantler-job-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #7030a0, #c060e0);
  transition: width .5s;
}
.dismantler-job-timer {
  font-size: .77rem;
  color: var(--text-dim);
}
.dismantler-job-timer.done { color: #d09030; font-weight: 700; }
.btn-collect-dismantle {
  width: 100%;
  margin-top: .35rem;
  background: rgba(112,48,160,.15);
  color: #c060e0;
  border: 1px solid rgba(112,48,160,.5);
  border-radius: 7px;
  padding: .45rem;
  cursor: pointer;
  font-size: .82rem;
  transition: background .15s;
}
.btn-collect-dismantle:hover { background: rgba(112,48,160,.28); }

/* Sell Modal */
.sell-modal-box {
  max-width: 520px;
  width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
}
.sell-type-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.sell-type-btn {
  padding: .3rem .7rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .8rem;
  transition: all .15s;
}
.sell-type-btn.active {
  background: rgba(74,158,255,.18);
  border-color: var(--accent);
  color: var(--accent);
}
.sell-items-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .8rem;
}
.sell-item-row {
  padding: .45rem .7rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.sell-item-row:last-child { border-bottom: none; }
.sell-item-row:hover       { background: rgba(255,255,255,.04); }
.sell-item-row.selected    { background: rgba(74,158,255,.15); }
.sell-price-row {
  margin-bottom: .5rem;
}
.sell-input {
  margin-left: .4rem;
  padding: .3rem .5rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-main);
  font-size: .85rem;
  width: 110px;
}

/* ── Arbeitsplatz-Slot-System ──────────────────────────────────────────────── */
.work-slots-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .work-slots-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .work-slots-grid { grid-template-columns: repeat(2, 1fr); }
}

.work-slot {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .6rem .5rem;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .2rem;
  position: relative;
  transition: border-color .2s;
}

.work-slot.locked {
  background: rgba(0,0,0,.25);
  border-style: dashed;
  opacity: .85;
}

.work-slot.empty {
  border-style: dashed;
  opacity: .75;
}

.work-slot.active {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(45,140,240,.15);
}

.work-slot.done {
  border-color: #40c070;
  box-shadow: 0 0 8px rgba(45,224,112,.15);
}

.slot-label {
  font-size: .68rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
}

.slot-free-badge {
  background: rgba(64,192,112,.12);
  color: #40c070;
  border: 1px solid rgba(64,192,112,.3);
  border-radius: 4px;
  font-size: .6rem;
  padding: .05rem .3rem;
  text-transform: none;
  letter-spacing: 0;
}

.slot-lock-icon {
  font-size: 1.4rem;
  margin: .2rem 0;
}

.slot-lock-desc {
  font-size: .7rem;
  color: var(--text-dim);
  margin-bottom: .3rem;
}

.slot-unlock-btn {
  background: rgba(45,140,240,.15);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: .3rem .5rem;
  font-size: .73rem;
  cursor: pointer;
  transition: background .15s;
  margin-top: auto;
}
.slot-unlock-btn:hover { background: rgba(45,140,240,.3); }

.slot-empty-icon {
  font-size: 1.4rem;
  margin: .25rem 0;
  opacity: .5;
}

.slot-empty-text {
  font-size: .72rem;
  color: var(--text-dim);
  opacity: .7;
}

.slot-expiry-bar {
  width: 100%;
}

.slot-expiry-countdown {
  font-size: .65rem;
  color: #f0c030;
  display: block;
  text-align: center;
}

.slot-job-name {
  font-size: .78rem;
  font-weight: 600;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-job-sub {
  font-size: .68rem;
  color: var(--text-dim);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-yield-preview {
  font-size: .67rem;
  color: var(--text-dim);
  line-height: 1.3;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-prod-thumb {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: .3rem;
  aspect-ratio: 3/2;
  max-height: 68px;
}
.slot-prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot-yield-imgs {
  display: flex;
  gap: .2rem;
  flex-wrap: wrap;
  margin: .15rem 0;
}
.slot-yield-imgs img {
  height: 30px;
  width: auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.work-slot .cooking-job-timer {
  font-size: .72rem;
  color: var(--text-dim);
  width: 100%;
  text-align: center;
}
.work-slot .cooking-job-timer.done { color: #f0c030; font-weight: 600; }

.work-slot .mission-timer {
  font-size: .72rem;
  color: var(--text-dim);
  width: 100%;
  text-align: center;
}
.work-slot .mission-timer.done { color: #f0c030; font-weight: 600; }

.work-slot .btn-collect-chip,
.work-slot .btn-collect,
.work-slot .btn-collect-dismantle {
  width: 100%;
  margin-top: .3rem;
  font-size: .72rem;
  padding: .3rem .4rem;
}
.btn-slot-timer {
  width: 100%;
  margin-top: auto;
  font-size: .75rem;
  padding: .35rem .4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: not-allowed;
  font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-slot-timer.waiting {
  background: rgba(255,255,255,.05);
  color: var(--text-dim);
}
.btn-slot-timer.ready {
  background: rgba(45,200,100,.18);
  border-color: #40c070;
  color: #40c070;
  cursor: pointer;
}
.btn-slot-timer.ready:hover {
  background: rgba(45,200,100,.32);
}

.work-slot .energizer-progress-bar {
  height: 4px;
  border-radius: 2px;
  width: 100%;
}

/* ── Konstruktor / Mechanik ── */
.konstruktor-controls {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}

#konstruktor-constructs-grid,
#architekt-blueprints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.construct-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s, border-color .2s;
}
.construct-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.45); }
.construct-card.can-afford  { border-color: var(--cc-col, var(--border)); box-shadow: 0 0 0 1px var(--cc-col, transparent); }
.construct-card.cant-afford { opacity: .55; }

/* Image area */
.construct-card .cc-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  max-height: 130px;
  overflow: hidden;
  flex-shrink: 0;
}
.construct-card .cc-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.construct-card .cc-rarity-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cc-col, #888);
}
.construct-card .cc-rarity-badge {
  position: absolute;
  top: 7px; left: 8px;
  font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: rgba(0,0,0,.65);
  color: var(--cc-col, #888);
  border: 1px solid var(--cc-col, #888);
  backdrop-filter: blur(4px);
}
.construct-card .cc-body {
  padding: .65rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}
.construct-card .cc-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.construct-card .cc-meta {
  display: flex;
  gap: .6rem;
  font-size: .7rem;
  color: var(--text-dim);
}
.construct-card .cc-meta span {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.construct-card .cc-parts,
.bp-card .cc-parts {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.construct-card .cc-part,
.bp-card .cc-part {
  display: flex;
  align-items: center;
  gap: .2rem;
  border-radius: 4px;
  padding: .1rem .4rem;
  font-size: .67rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 calc(50% - .125rem);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.construct-card .cc-part .cc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.construct-card .cc-bp-row {
  font-size: .7rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.construct-card .cc-owned {
  font-size: .7rem;
  color: var(--text-dim);
}
.construct-card .cc-footer {
  padding: .5rem .8rem .65rem;
  margin-top: auto;
}
.construct-card .cc-btn {
  width: 100%;
  padding: .4rem 0;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--cc-col, var(--accent));
  background: color-mix(in srgb, var(--cc-col, var(--accent)) 18%, transparent);
  color: var(--cc-col, var(--accent));
  cursor: pointer;
  transition: background .15s;
}
.construct-card .cc-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cc-col, var(--accent)) 32%, transparent);
}
.construct-card .cc-btn:disabled { opacity: .35; cursor: not-allowed; }

.bp-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s, border-color .2s;
}
.bp-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.45); }
.bp-card.can-afford  { border-color: var(--cc-col, var(--border)); box-shadow: 0 0 0 1px var(--cc-col, transparent); }
.bp-card.cant-afford { opacity: .55; }
.construct-card-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.bp-card-img        { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; margin-bottom: .1rem; }

.bp-rarity {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border-radius: 4px;
  align-self: flex-start;
}
.bp-name, .construct-name {
  font-size: .88rem;
  font-weight: 600;
}
.bp-cost-row, .construct-cost-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  font-size: .72rem;
  color: var(--text-dim);
}
.bp-cost-item.ok   { color: #6dc86d; }
.bp-cost-item.miss { color: #e06060; }

.bp-owned, .construct-owned {
  font-size: .72rem;
  color: var(--text-dim);
}

.btn-start-bp, .btn-start-construct {
  margin-top: .4rem;
  padding: .3rem .8rem;
  font-size: .78rem;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: rgba(45,140,240,.15);
  color: var(--accent);
  cursor: pointer;
}
.btn-start-bp:hover, .btn-start-construct:hover  { background: rgba(45,140,240,.28); }
.btn-start-bp:disabled, .btn-start-construct:disabled { opacity:.4; cursor:not-allowed; }

/* ── Imperial Orders ── */
.imperial-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: .9rem;
  margin-top: .5rem;
}

.imperial-order-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.imperial-order-card > *:not(.io-ship-banner) { padding-left: .9rem; padding-right: .9rem; }
.imperial-order-card > *:last-child { padding-bottom: .9rem; }
.imperial-order-card > *:not(.io-ship-banner):first-of-type { margin-top: .6rem; }
.imperial-order-card.complete { border-color: rgba(240,192,48,.55); opacity:.75; }

.io-ship-banner {
  width: 100%;
  height: 120px;
  background: center/cover no-repeat #0a1628;
  position: relative;
  flex-shrink: 0;
}
.io-ship-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,16,36,.85) 0%, rgba(8,16,36,.2) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: .5rem .75rem;
}
.io-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.io-title {
  font-size: .95rem;
  font-weight: 700;
}
.io-size-badge {
  font-size: .68rem;
  background: rgba(0,0,0,.45);
  border-radius: 6px;
  padding: .1rem .4rem;
  color: #ccc;
}
.io-progress-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  margin: .3rem .9rem .1rem;
}
.io-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .3s;
}
.io-slots {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 0 .9rem .9rem;
}
.io-slot {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  padding: .2rem .3rem;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.io-slot.filled       { background: rgba(80,200,120,.1); color: #80dc80; }
.io-slot.has-construct { background: rgba(60,140,255,.1); border-left: 2px solid rgba(60,140,255,.4); }
.io-slot .io-slot-name { flex: 1; }
.io-slot .io-slot-by { font-size: .68rem; color: var(--text); opacity: .75; }
.io-slot .io-slot-ip { font-size: .68rem; color: #f0c030; }
/* ── Miner stat range bars (card detail modal) ── */
.detail-stat-bar-row {
  margin: .25rem 0;
}
.detail-stat-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .78rem;
  margin-bottom: .2rem;
}
.detail-stat-range {
  font-size: .68rem;
  color: var(--text-dim);
  margin-left: .3rem;
}
.detail-stat-bar-track {
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
}
.detail-stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

.btn-install-construct {
  font-size: .7rem;
  padding: .2rem .55rem;
  border-radius: 5px;
  border: 1px solid rgba(80,200,120,.5);
  background: rgba(80,200,120,.12);
  color: #80dc80;
  cursor: pointer;
  white-space: nowrap;
}
.btn-install-construct:hover { background: rgba(80,200,120,.25); }
.btn-construct-info {
  font-size: .68rem;
  padding: .15rem .35rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .15s, border-color .15s;
  line-height: 1;
}
.btn-construct-info:hover { opacity: 1; border-color: var(--accent); }

.imperial-class-filter {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

/* ── IP in topbar ── */
#tb-ip {
  color: #f0c030;
  font-weight: 600;
}

/* ── Dismantler Legende ── */
.dis-legend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.dis-legend-table th {
  background: rgba(255,255,255,.07);
  padding: .45rem .6rem;
  text-align: center;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim);
}
.dis-legend-table td {
  border: 1px solid rgba(255,255,255,.08);
  padding: .5rem .65rem;
  vertical-align: top;
  line-height: 1.7;
}
.dis-tier-label {
  font-weight: 600;
  background: rgba(255,255,255,.04);
  white-space: nowrap;
  color: var(--text-main);
}
.dis-cell-res  { background: rgba(100,200,100,.06); }
.dis-cell-part { background: rgba(200,150,80,.06); }
.dis-badge-res  { color: #7ecf7e; font-weight: 700; font-size: .82rem; }
.dis-badge-part { color: #e0ab60; font-weight: 700; font-size: .82rem; }
.dis-yield {
  display: block;
  font-weight: 600;
  font-size: .84rem;
  margin-top: .1rem;
}
.dis-pool {
  display: block;
  font-size: .73rem;
  color: var(--text-dim);
}
.dis-dur {
  display: block;
  font-size: .73rem;
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE – TABLET  (≤ 1024px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Layout: schmalere Sidebar */
  #game-screen {
    grid-template-columns: 52px 1fr;
  }

  /* Nav: nur Icons, kein Text */
  #main-nav { padding: .3rem 0; overflow-x: hidden; overflow-y: auto; }
  .nav-btn {
    padding: .65rem 0;
    font-size: 1.1rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left-width: 3px;
  }
  /* Emoji darstellen, Text ausblenden */
  .nav-btn .nav-label { display: none; }
  .nav-btn .badge { position: absolute; top: .2rem; right: .3rem; width: 16px; height: 16px; font-size: .58rem; }

  /* Topbar kompakter */
  #topbar { gap: .55rem; padding: .35rem .75rem; }
  #tb-series-info { font-size: 0.52rem; max-width: 14ch; }
  #tb-clock { display: none; }
  /* Event-Badge darf schrumpfen statt zu überlaufen */
  #tb-event-info { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .tb-event-badge { max-width: 100%; }
  #tb-bits  { font-size: .82rem; }
  #tb-accus { font-size: .82rem; }
  #tb-ip    { font-size: .82rem; }

  /* Panels schmaler */
  .panel { padding: .75rem; }

  /* Karten kleiner auf Tablet */
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: .65rem;
  }
  #booster-result-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
  }

  /* Overlay breiter nutzen */
  .overlay-box { padding: 1.1rem 1.2rem; }

  /* Karten-Detail Modal: unter Tablet einspaltig */
  .card-detail-box {
    grid-template-columns: 1fr;
    grid-template-rows: 280px 1fr;
    height: auto;
    max-height: 88vh;
    width: 92vw;
  }
  .card-detail-img-panel { height: 280px; }

  /* Dashboard Grid */
  .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /* Markt: kleinere Karten */
  .market-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .market-listing-card { width: 100%; }

  /* Work-Slots */
  .work-slots-grid { grid-template-columns: repeat(3, 1fr); }

  /* Planeten */
  .planet-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* Missionen */
  .missions-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  /* Kochen / Rezepte */
  .recipes-grid, .cooking-jobs-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  /* Auth-Box: kein Overflow auf schmalen Tablets */
  .auth-container { max-width: 90vw; }

  /* Album-Header: langer Serienname soll umbrechen, nicht überlaufen */
  .album-header-title { font-size: 1rem; word-break: break-word; }

  /* Konstruktor / Architekt: mehr Karten auf schmalerem Bildschirm */
  #konstruktor-constructs-grid,
  #architekt-blueprints-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /* Controls: Filter-Selects dehnen sich aus statt zu überlaufen */
  .konstruktor-controls select,
  .cooking-controls select,
  .dismantler-controls select,
  .energizer-controls select {
    flex: 1;
    min-width: 130px;
  }

  /* Booster-Grid: etwas enger für Tablet-Breite */
  #booster-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE – KLEINES TABLET / GROSSES TELEFON  (≤ 768px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Topbar: weniger Infos, kompakt */
  #topbar { flex-wrap: nowrap; gap: .4rem; padding: .3rem .5rem; }
  #tb-right { gap: .45rem; flex-wrap: nowrap; }
  #tb-online { display: none; }
  #tb-bits   { font-size: .78rem; }

  /* Karten-Grid */
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: .5rem;
  }
  #booster-result-grid {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: .6rem;
  }

  /* Auth-Box */
  .auth-container { width: 92vw; padding: 1.4rem 1.2rem; }

  /* Panel Header stapeln */
  .panel-header { flex-direction: column; align-items: flex-start; }

  /* Work-Slots 2-spaltig */
  .work-slots-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }

  /* Markt: volle Breite */
  .market-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .market-listing-card { width: 100%; }

  /* Planeten / Missionen */
  .planet-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .65rem;
  }
  .missions-grid {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }

  /* Rezepte */
  .recipes-grid, .cooking-jobs-grid {
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }

  /* Konstruktor Controls */
  .konstruktor-controls, .cooking-controls, .energizer-controls, .dismantler-controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* Sell Modal */
  .sell-modal-box { width: 96vw; }

  /* Notification unten zentriert */
  .notification { right: .5rem; left: .5rem; max-width: none; bottom: .8rem; }

  /* iOS: font-size < 16px löst automatischen Zoom beim Fokus aus – verhindern */
  input, select, textarea { font-size: 1rem; }

  /* Event-Badge: Meta-Text ausblenden um Topbar-Platz zu sparen */
  .tb-event-meta { display: none; }
}

/* ── Bauteil Accu-Toggle ──────────────────────────────────────────── */
.accu-toggle {
  display: inline-flex; align-items: center; gap: .2rem;
  cursor: pointer; margin-left: auto; user-select: none;
  font-size: .75rem; opacity: .55; transition: opacity .15s;
}
.accu-toggle-overlay {
  position: absolute; bottom: .3rem; left: .4rem;
  margin-left: 0; opacity: 1;
}
.accu-toggle:hover { opacity: 1; }
.accu-toggle input[type="checkbox"] { display: none; }
.accu-toggle-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.6);
  transition: background .15s, border-color .15s, box-shadow .15s;
  font-size: .8rem;
  filter: grayscale(1) brightness(.6);
}
.accu-toggle-overlay:hover .accu-toggle-icon {
  filter: none; border-color: #fc0; box-shadow: 0 0 6px rgba(255,200,0,.4);
  background: rgba(0,0,0,.6);
}
.accu-toggle input:checked + .accu-toggle-icon {
  filter: none; border-color: #fc0; box-shadow: 0 0 6px rgba(255,200,0,.4);
  background: rgba(0,0,0,.6);
}
.accu-toggle:has(input:checked) { opacity: 1; }

.energizer-allowed-hint {
  font-size: .8rem; margin-bottom: .6rem; min-height: 1.2em;
}

/* ══ SAMMEL-ALBUM ════════════════════════════════════════════════════════════ */

/* ── Header-Box ── */
.album-header-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.4rem;
}
.album-header-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--l-color);
  margin-bottom: .5rem;
}
.album-header-desc {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: .75rem;
}
.album-header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: .6rem;
}
.album-stat-pill {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .2rem .7rem;
  font-size: .78rem;
  color: var(--text-dim);
}
.album-income-badge {
  background: rgba(240,192,48,.12);
  border: 1px solid rgba(240,192,48,.35);
  border-radius: 20px;
  padding: .2rem .75rem;
  font-size: .82rem;
  color: var(--l-color);
}
.album-progress-bar-wrap {
  height: 6px;
  background: var(--bg3);
  border-radius: 10px;
  overflow: hidden;
}
.album-progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--r-color), var(--sr-color), var(--e-color));
  border-radius: 10px;
  transition: width .6s ease;
}

/* ── Rarity Sections ── */
.album-section {
  margin-bottom: 1.4rem;
}
.album-section-header .card-rarity-badge {
  position: static;
}
.album-section-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.album-sec-count {
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}
.album-toggle-icon {
  margin-left: auto;
  font-size: .75rem;
  color: var(--text-dim);
  transition: transform .2s;
}
.album-section.album-collapsed .album-toggle-icon  { transform: rotate(-90deg); }
.album-section.album-collapsed .album-grid          { display: none; }

/* ── Legendary section accent ── */
.album-section-legendary .album-section-header {
  background: linear-gradient(90deg, rgba(240,192,48,.08) 0%, transparent 100%);
  border-radius: 6px;
  padding-left: .5rem;
  border-bottom-color: rgba(240,192,48,.3);
}

/* ── Card Grid ── */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .75rem;
  padding: .9rem .1rem 0;
}

/* ── Individual Card ── */
.album-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.album-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.album-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--bg3);
}
.album-card-unknown {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-dim);
  background: var(--bg3);
  font-weight: 700;
  letter-spacing: -.05em;
}
.album-card-body {
  padding: .45rem .5rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.album-card-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  min-height: 2em;
}

/* Owned */
.album-card-owned {
  border-color: #2a5040;
}
.album-card-owned .album-card-img { opacity: 1; }

/* Undiscovered */
.album-card-undiscovered {
  opacity: .55;
  filter: grayscale(.7);
}

/* Legendary owned: gold glow */
.album-card-legendary-owned {
  border-color: rgba(240,192,48,.5);
  box-shadow: 0 0 14px rgba(240,192,48,.25);
  background: linear-gradient(160deg, var(--bg2) 60%, rgba(240,192,48,.07) 100%);
  opacity: 1 !important;
  filter: none !important;
}

/* ── Badges ── */
.album-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .38rem;
  border-radius: 20px;
  letter-spacing: .02em;
}
.album-badge-check {
  background: rgba(64,192,112,.15);
  color: var(--green);
  border: 1px solid rgba(64,192,112,.35);
}
.album-badge-backup {
  background: rgba(74,158,255,.12);
  color: var(--accent);
  border: 1px solid rgba(74,158,255,.3);
}
.album-badge-legendary {
  background: rgba(240,192,48,.15);
  color: var(--l-color);
  border: 1px solid rgba(240,192,48,.4);
  font-size: .72rem;
  padding: .15rem .5rem;
}

/* ── Income pill ── */
.album-card-income {
  font-size: .68rem;
  color: var(--l-color);
  font-weight: 600;
}
.album-card-avail {
  font-size: .65rem;
  color: var(--text-dim);
  margin-top: .15rem;
}
.album-card-avail-gone {
  color: #e05050;
  font-weight: 600;
}


/* ── Einlagern-Button ── */
.album-add-btn {
  width: 100%;
  padding: .3rem .4rem;
  font-size: .68rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  color: #fff;
}
.album-add-btn:active { transform: scale(.97); }
.album-add-btn:disabled { opacity: .35; cursor: not-allowed; }
.album-add-btn.rarity-R  { background: var(--r-color); }
.album-add-btn.rarity-SR { background: var(--sr-color); }
.album-add-btn.rarity-E  { background: var(--e-color); }

/* ── Serien-Tabs ── */
.album-series-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.album-series-tab {
  padding: .45rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.album-series-tab:hover:not(.album-tab-locked) {
  border-color: var(--accent);
  background: var(--bg3);
}
.album-series-tab.album-tab-active {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--accent);
}
.album-series-tab.album-tab-locked {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Gesperrte Serie Platzhalter ── */
.album-locked-box {
  text-align: center;
  padding: 5rem 2rem 4rem;
  color: var(--text-dim);
}
.album-lock-icon-big {
  font-size: 3.5rem;
  margin-bottom: .9rem;
  opacity: .45;
}
.album-lock-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}
.album-lock-sub {
  font-size: .88rem;
  margin-bottom: .4rem;
}
.album-lock-hint {
  font-size: .76rem;
  opacity: .6;
}
.album-preview-notice {
  background: rgba(255,180,0,.08);
  border: 1px solid rgba(255,180,0,.25);
  border-radius: 6px;
  color: #f0c060;
  font-size: .82rem;
  padding: .55rem 1rem;
  margin-bottom: .8rem;
}

/* ── Hover-Preview 2:3 ── */
.album-float-preview {
  position: fixed;
  z-index: 9999;
  width: 148px;
  background: var(--bg2);
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  border: 2px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
}
.album-prev-img-wrap {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg3);
}
.album-prev-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-prev-label {
  padding: .3rem .5rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  background: var(--bg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-prev-R  { border-color: var(--r-color);  box-shadow: 0 0 14px rgba(68,136,224,.45),  0 8px 28px rgba(0,0,0,.7); }
.album-prev-SR { border-color: var(--sr-color); box-shadow: 0 0 16px rgba(160,64,224,.5),   0 8px 28px rgba(0,0,0,.7); }
.album-prev-E  { border-color: var(--e-color);  box-shadow: 0 0 18px rgba(224,128,32,.55),  0 8px 28px rgba(0,0,0,.7); }
.album-prev-L  { border-color: var(--l-color);  box-shadow: 0 0 22px rgba(240,192,48,.6),   0 8px 28px rgba(0,0,0,.7); }

/* ── Album Karten-Bild: klickbar ── */
.album-card-img { cursor: zoom-in; }

/* Kein Hover-Tooltip auf Touch-Geräten (Tablet, Handy) */
@media (hover: none) {
  .album-float-preview { display: none !important; }
}

/* ── Album Bot-Bild Dialog ── */
.album-bot-dialog-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.album-bot-dialog-overlay.visible { opacity: 1; pointer-events: all; }
.album-bot-dialog-box {
  position: relative;
  width: min(300px, 86vw);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg2);
  box-shadow: 0 20px 70px rgba(0,0,0,.85);
  transform: scale(.88) translateY(12px);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.album-bot-dialog-overlay.visible .album-bot-dialog-box { transform: scale(1) translateY(0); }
.album-bot-dialog-box.rar-R  { border-color: var(--r-color);  box-shadow: 0 0 40px rgba(68,136,224,.35),  0 20px 70px rgba(0,0,0,.85); }
.album-bot-dialog-box.rar-SR { border-color: var(--sr-color); box-shadow: 0 0 45px rgba(160,64,224,.4),   0 20px 70px rgba(0,0,0,.85); }
.album-bot-dialog-box.rar-E  { border-color: var(--e-color);  box-shadow: 0 0 50px rgba(224,128,32,.45),  0 20px 70px rgba(0,0,0,.85); }
.album-bot-dialog-box.rar-L  { border-color: var(--l-color);  box-shadow: 0 0 60px rgba(240,192,48,.5),   0 20px 70px rgba(0,0,0,.85); }
.album-bot-dialog-img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
}
.album-bot-dialog-footer {
  padding: .7rem 1rem .8rem;
  background: var(--bg3);
  text-align: center;
  border-top: 1px solid var(--border);
}
.album-bot-dialog-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.album-bot-dialog-rar  { font-size: .76rem; margin-top: .2rem; color: var(--text-dim); }
.album-bot-dialog-close {
  position: absolute; top: .55rem; right: .6rem;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.55); color: var(--text); font-size: .9rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 1;
}
.album-bot-dialog-close:hover { background: rgba(255,255,255,.18); }

/* ── Konstrukt-Inventar Karten ─────────────────────────────────────────────── */
.construct-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: .5rem;
}
.construct-card.rarity-C  { border-color: rgba(160,192,144,.35); }
.construct-card.rarity-UC { border-color: rgba(64,192,112,.35); }
.construct-card.rarity-R  { border-color: rgba(68,136,224,.4); }
.construct-card.rarity-SR { border-color: rgba(160,64,224,.45); }
.construct-card.rarity-E  { border-color: rgba(224,128,32,.5); box-shadow: 0 0 10px rgba(224,128,32,.15); }
.construct-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg2);
}
.construct-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.construct-card-no-img {
  width: 100%;
  height: 100%;
}
.construct-card-count {
  position: absolute;
  top: .3rem;
  right: .4rem;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border-radius: 5px;
  backdrop-filter: blur(4px);
}
.construct-card-body {
  padding: .45rem .6rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.construct-card-name {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.construct-card-ip {
  font-size: .68rem;
  font-weight: 700;
  color: var(--rar-col, var(--accent));
  opacity: .85;
}

/* ── Neue-Serie-Dialog ───────────────────────────────────────────────────── */
#new-series-dialog {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}
.nsd-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85); backdrop-filter: blur(7px);
  cursor: pointer;
}
.nsd-box {
  position: relative; z-index: 1;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  max-width: 500px; width: 93%;
  box-shadow: 0 0 70px rgba(60,140,255,.22), 0 10px 40px rgba(0,0,0,.65);
  animation: yearEndPop .48s cubic-bezier(.34,1.56,.64,1) both;
}
.nsd-video-wrap {
  position: relative; width: 100%; height: 220px; overflow: hidden;
}
.nsd-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nsd-video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(8,16,32,.85) 100%);
}
.nsd-content {
  padding: 1.4rem 1.8rem 1.8rem; text-align: center;
}
.nsd-badge {
  display: inline-block;
  background: rgba(60,140,255,.18); border: 1px solid rgba(60,140,255,.4);
  color: #7ab8ff; border-radius: 20px;
  padding: .22rem .8rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; margin-bottom: .7rem;
}
.nsd-title {
  font-size: 1.55rem; font-weight: 800; margin: 0 0 .25rem;
  background: linear-gradient(135deg, #7ab8ff, #a0d0ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nsd-series-name {
  font-size: 1rem; font-weight: 700; color: var(--text);
  margin: 0 0 .5rem;
}
.nsd-sub {
  font-size: .84rem; color: var(--text-dim); margin: 0 0 .6rem; line-height: 1.55;
}
.nsd-ends {
  font-size: .76rem; color: var(--text-dim);
  margin: 0 0 1.2rem;
  opacity: .7;
}
.nsd-btn {
  background: linear-gradient(135deg, #3c8cff, #5ba3ff);
  color: #fff; font-weight: 800; font-size: .95rem;
  border: none; border-radius: 9px; padding: .65rem 2.2rem;
  cursor: pointer; transition: filter .15s; width: 100%;
}
.nsd-btn:hover { filter: brightness(1.15); }

/* ── Bot Video Hover Preview ── */
#bot-video-preview {
  position: absolute;
  z-index: 8000;
  width: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.65);
  pointer-events: none;
  border: 2px solid var(--border);
}
#bot-video-preview video {
  width: 100%;
  display: block;
}
.bvp-label {
  background: rgba(8,14,28,.88);
  color: var(--text);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  padding: .3rem .5rem;
}
.bvp-C  { border-color: #888; }
.bvp-UC { border-color: #4a9; }
.bvp-R  { border-color: #48f; }
.bvp-SR { border-color: #c4f; }
.bvp-E  { border-color: #fc0; }
.bvp-L  { border-color: #ffd700; }

/* ── Jahresabschluss-Dialog ──────────────────────────────────────────────── */
#year-end-dialog {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.year-end-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.82); backdrop-filter: blur(6px);
}
.year-end-box {
  position: relative; z-index: 1;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem 2rem 2rem;
  max-width: 520px; width: 92%; text-align: center;
  box-shadow: 0 0 60px rgba(255,200,0,.18), 0 8px 32px rgba(0,0,0,.6);
  animation: yearEndPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes yearEndPop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.year-end-fireworks {
  font-size: 2rem; margin-bottom: .5rem;
  animation: yearEndFlicker 1.5s ease-in-out infinite alternate;
}
@keyframes yearEndFlicker {
  from { filter: drop-shadow(0 0 6px #fc0); }
  to   { filter: drop-shadow(0 0 18px #fc0) brightness(1.2); }
}
.year-end-title {
  font-size: 1.6rem; font-weight: 800;
  background: linear-gradient(135deg, #fc0, #f80);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin: 0 0 .4rem;
}
.year-end-sub {
  font-size: .88rem; color: var(--text-dim); margin-bottom: 1.2rem;
  line-height: 1.5;
}
.year-end-leaderboard {
  background: var(--bg3); border-radius: 10px;
  padding: .8rem; margin-bottom: 1.2rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.year-end-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .4rem .6rem; border-radius: 7px;
  background: rgba(255,255,255,.04);
  animation: yearEndSlideIn .4s ease both;
}
@keyframes yearEndSlideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.year-end-medal { font-size: 1.2rem; flex-shrink: 0; }
.year-end-name  { font-weight: 700; flex: 1; text-align: left; }
.year-end-stats { font-size: .75rem; color: var(--text-dim); flex-shrink: 0; }
.year-end-footer {
  font-size: .78rem; color: var(--text-dim); line-height: 1.5;
  margin-bottom: 1.4rem;
}
.year-end-btn {
  background: linear-gradient(135deg, #fc0, #f80);
  color: #000; font-weight: 800; font-size: .95rem;
  border: none; border-radius: 8px; padding: .65rem 2rem;
  cursor: pointer; transition: filter .15s;
}
.year-end-btn:hover { filter: brightness(1.15); }

/* ── Tages-Splash ──────────────────────────────────────────────────────────── */
#daily-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
#daily-splash.splash-visible { opacity: 1; pointer-events: all; }
#daily-splash.splash-hiding  { opacity: 0; pointer-events: none; }

.splash-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(8px);
}
.splash-box {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, var(--bg2) 0%, #0c1a2e 100%);
  border: 1px solid rgba(80,160,255,.25);
  border-radius: 20px;
  padding: 2.8rem 2.4rem 2.4rem;
  max-width: 460px; width: 92%;
  text-align: center;
  box-shadow:
    0 0 80px rgba(40,120,255,.20),
    0 0 24px rgba(40,120,255,.12),
    0 12px 40px rgba(0,0,0,.7);
  transform: translateY(0) scale(1);
  animation: splashPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes splashPop {
  from { transform: scale(.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
.splash-logo {
  width: min(380px, 88%);
  display: block; margin: 0 auto 1.6rem;
  filter: drop-shadow(0 0 22px rgba(60,140,255,.55));
  animation: splashGlow 2.8s ease-in-out infinite alternate;
}
@keyframes splashGlow {
  from { filter: drop-shadow(0 0 14px rgba(60,140,255,.45)); }
  to   { filter: drop-shadow(0 0 32px rgba(100,180,255,.80)) brightness(1.08); }
}
.splash-tagline {
  font-size: .95rem; color: var(--text-dim);
  letter-spacing: .04em; margin: 0 0 1.8rem;
}
.splash-btn {
  background: linear-gradient(135deg, #3a8eff 0%, #1a5fcf 100%);
  color: #fff; font-weight: 800; font-size: 1rem;
  border: none; border-radius: 10px;
  padding: .72rem 2.6rem;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(40,120,255,.4);
  transition: filter .15s, transform .12s;
  letter-spacing: .03em;
}
.splash-btn:hover  { filter: brightness(1.15); transform: translateY(-2px); }
.splash-btn:active { transform: translateY(0); filter: brightness(.95); }

/* ══════════════════════════════════════════════════════════════════════════════
   INTRO DIALOG  (Erstes-Mal-Begrüßung)
   ══════════════════════════════════════════════════════════════════════════════ */
.intro-overlay {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.93); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.intro-overlay.intro-visible { opacity: 1; pointer-events: all; }
.intro-overlay.intro-hiding  { opacity: 0; pointer-events: none; }

.intro-box {
  display: grid;
  grid-template-columns: 270px 1fr 260px;
  width: min(1320px, 97vw);
  height: min(700px, 90vh);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(74,158,255,.18);
  box-shadow: 0 0 80px rgba(74,158,255,.12), 0 40px 120px rgba(0,0,0,.9);
  background: var(--bg1);
  transform: scale(.91) translateY(20px);
  transition: transform .48s cubic-bezier(.22,1,.36,1);
}
.intro-overlay.intro-visible .intro-box { transform: scale(1) translateY(0); }

/* ── Linke Spalte: Logo füllt volle Höhe ── */
.intro-left {
  overflow: hidden;
  background: linear-gradient(175deg, #07111f 0%, #0c1d38 50%, #060e1a 100%);
  border-right: 1px solid rgba(74,158,255,.12);
}
.intro-logo2 {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: drop-shadow(0 0 28px rgba(74,158,255,.35));
}

/* ── Mittlere Spalte: Header + Sektionen + Footer ── */
.intro-right {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg1);
  overflow: hidden;
  min-height: 0;
}
.intro-right-header {
  padding: 1.2rem 1.6rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(135deg, rgba(74,158,255,.07) 0%, transparent 80%);
}
.intro-tagline {
  font-size: 1.3rem; font-weight: 800; color: var(--accent);
  letter-spacing: .01em; margin-bottom: .18rem;
}
.intro-subtitle {
  font-size: .8rem; color: var(--text-dim); letter-spacing: .04em;
}

/* ── Sektionen: scrollbare Liste ── */
.intro-sections-grid {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1.4rem .6rem;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(74,158,255,.25) transparent;
}
.intro-section {
  display: flex; flex-direction: row; align-items: flex-start; gap: .65rem;
  padding: .6rem .8rem; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.intro-section:hover { background: rgba(74,158,255,.08); border-color: rgba(74,158,255,.22); }
.intro-section-icon  { font-size: 1.15rem; line-height: 1; flex-shrink: 0; margin-top: .1rem; }
.intro-section-body  { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.intro-section-title { font-size: .78rem; font-weight: 700; color: var(--text); }
.intro-section-text  { font-size: .75rem; color: var(--text); line-height: 1.45; }

/* ── Footer (auto Zeile unten) ── */
.intro-footer {
  padding: .7rem 1.4rem .85rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,.25); gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.intro-skip-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; color: var(--text-dim); cursor: pointer; user-select: none;
}
.intro-skip-label input[type="checkbox"] {
  accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0;
}
.intro-play-btn {
  padding: .55rem 2rem;
  background: linear-gradient(135deg, #1a6fd4, #4a9eff);
  border: none; border-radius: 10px; color: #fff;
  font-size: .9rem; font-weight: 700; cursor: pointer; letter-spacing: .02em;
  box-shadow: 0 4px 22px rgba(45,140,240,.45);
  transition: transform .15s, box-shadow .15s; white-space: nowrap;
}
.intro-play-btn:hover  { transform: translateY(-2px); box-shadow: 0 7px 32px rgba(45,140,240,.6); }
.intro-play-btn:active { transform: translateY(0); }

/* ── Rechte Spalte: Video füllt volle Höhe ── */
.intro-video-col {
  position: relative; overflow: hidden;
  background: #000;
  border-left: 1px solid rgba(74,158,255,.12);
}
.intro-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.intro-video-dots {
  position: absolute; bottom: .55rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .45rem; z-index: 2;
}
.intro-vid-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.28); cursor: pointer;
  transition: background .2s, transform .2s; border: none;
}
.intro-vid-dot.active  { background: var(--accent); transform: scale(1.4); }
.intro-vid-dot:hover   { background: rgba(255,255,255,.65); }

/* ── Responsive: einspaltig auf Tablets ── */
@media (max-width: 768px) {
  .intro-box {
    grid-template-columns: 1fr;
    grid-template-rows: 160px 1fr;
    height: 96vh; border-radius: 14px;
  }
  .intro-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .intro-logo2 { object-position: center top; padding: .5rem; }
  .intro-video-col { display: none; }
  .intro-right { grid-template-rows: auto 1fr auto; }
  .intro-sections-grid { flex-direction: column; padding: .6rem 1rem .5rem; }
  .intro-right-header { padding: .85rem 1rem .65rem; }
  .intro-tagline { font-size: 1rem; }
  .intro-footer { padding: .6rem 1rem .75rem; }
}
/* ══ TUTORIAL SPOTLIGHT ══════════════════════════════════════════════════════ */
#tut-spo-overlay {
  position: fixed; inset: 0; z-index: 9800;
  pointer-events: none;
}
#tut-spo-spot {
  position: absolute;
  width: 280px; height: 185px;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.82);
  border: 2px solid rgba(74,158,255,0.55);
  pointer-events: none;
  transition: left 0.05s ease-out, top 0.05s ease-out;
}
#tut-spo-box {
  position: absolute;
  width: 320px;
  background: #111827;
  border: 1px solid rgba(74,158,255,0.5);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 30px rgba(0,0,0,0.7), 0 0 0 1px rgba(74,158,255,.2);
  font-size: .82rem;
  pointer-events: none;
  max-height: none;
  overflow-y: visible;
}
.tut-spo-empty {
  color: var(--text-dim); text-align: center;
  padding: .5rem 0; font-size: .82rem; margin: 0;
}
.tut-spo-zone { margin-bottom: .6rem; }
.tut-spo-zone:last-child { margin-bottom: 0; }
.tut-spo-zone-title {
  font-weight: bold; color: var(--accent);
  font-size: .85rem; margin-bottom: .3rem;
}
.tut-spo-zone-lines { list-style: none; padding: 0; margin: 0; }
.tut-spo-zone-lines li {
  color: var(--text); font-size: .79rem;
  padding: .15rem 0; line-height: 1.45;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tut-spo-zone-lines li:last-child { border-bottom: none; }
.tut-spo-hr { border: none; border-top: 1px solid var(--border); margin: .5rem 0; }
#tut-spo-bar {
  position: fixed; bottom: 1.2rem; left: 50%;
  transform: translateX(-50%); z-index: 10100;
  background: rgba(10,14,24,0.92);
  border: 1px solid rgba(74,158,255,0.45);
  border-radius: 30px; padding: .55rem 1.1rem;
  display: flex; align-items: center; gap: 1rem;
  color: var(--text); font-size: .82rem;
  box-shadow: 0 4px 25px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px); pointer-events: all;
}
#tut-spo-bar-label { color: var(--text-dim); }
#btn-close-tut-spo {
  background: rgba(74,158,255,.15);
  border: 1px solid rgba(74,158,255,.4);
  color: var(--accent); padding: .3rem .75rem;
  border-radius: 20px; cursor: pointer;
  font-size: .8rem; white-space: nowrap;
  transition: background .18s;
}
#btn-close-tut-spo:hover { background: rgba(74,158,255,.3); }
#tut-spo-overlay.hidden, #tut-spo-bar.hidden { display: none; }