/* ============================================================
   CROSSOVER X — dashboard.css v2
   FIX: .db-deal-track-outer -> .db-deal-track-wrap (Klassenname stimmte
        nicht mit dem HTML überein, Ticker-Wrapper bekam dadurch nie
        seine flex/overflow-Styles)
   NEU: .db-onlinestore-* Styles für die feste Online-Store-Karte
   ============================================================ */
:root {
    --db-black:  #000;
    --db-white:  #fff;
    --db-border: 3px solid #000;
    --db-font-bang:  'Bangers', cursive;
    --db-font-mono:  'Share Tech Mono', monospace;
    --db-font-body:  'Inter', sans-serif;
    --db-gap: clamp(8px, 1.2vw, 14px);
}
/* Exact colors from Footer_Desktop.png */
body.style-tech    { --db-accent:#ff2020; --db-accent-dim:rgba(255,32,32,0.12);   --db-accent-glow:0 0 16px rgba(255,32,32,0.4);   --db-accent-rgb:255,32,32; }
body.style-retro   { --db-accent:#ccff00; --db-accent-dim:rgba(204,255,0,0.12);   --db-accent-glow:0 0 16px rgba(204,255,0,0.4);   --db-accent-rgb:204,255,0; }
body.style-tcg     { --db-accent:#00eeff; --db-accent-dim:rgba(0,238,255,0.12);   --db-accent-glow:0 0 16px rgba(0,238,255,0.4);   --db-accent-rgb:0,238,255; }
body.style-special { --db-accent:#cc00ff; --db-accent-dim:rgba(204,0,255,0.12);   --db-accent-glow:0 0 16px rgba(204,0,255,0.4);   --db-accent-rgb:204,0,255; }

.db-accent-text { color: var(--db-accent) !important; }
.db-accent-bg   { background: var(--db-accent) !important; color: #fff !important; }

.db-page {
    background: url('https://crossoverxcards.com/wp-content/uploads/2026/05/background_main_dashboard-scaled.jpg') center/cover fixed;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    width: 100%;
    max-width: 100vw;
}
.db-page::before { content:''; position:fixed; inset:0; background:rgba(0,0,0,0.78); pointer-events:none; z-index:0; }
.db-page > * { position:relative; z-index:1; }

/* TICKER */
.db-deal-ticker { background:var(--db-black); border-bottom:3px solid var(--db-accent); transition:border-color 0.4s; overflow:hidden; position:sticky; top:0; z-index:200; }
.db-deal-inner  { display:flex; align-items:center; height:44px; overflow:hidden; }
.db-deal-label  { font-family:var(--db-font-bang); font-size:clamp(13px,1.5vw,17px); letter-spacing:.1em; color:#000; background:var(--db-accent); padding:0 20px; height:100%; display:flex; align-items:center; flex-shrink:0; transition:background 0.4s; white-space:nowrap; position:relative; z-index:10; box-shadow:4px 0 12px rgba(0,0,0,0.6); }
/* FIX: Klassenname an HTML angepasst (war .db-deal-track-outer) */
.db-deal-track-wrap { flex:1; overflow:hidden; min-width:0; display:flex; align-items:center; height:100%; }
.db-deal-track  { display:inline-flex; flex-shrink:0; white-space:nowrap; animation:dbDealScroll 36s linear infinite; }
.db-deal-track span { font-family:var(--db-font-body); font-size:clamp(11px,1.2vw,13px); font-weight:800; color:#fff !important; padding:0 36px; opacity:1; flex-shrink:0; }
.db-deal-track span::before { content:'◆'; color:var(--db-accent); margin-right:36px; transition:color 0.4s; }
@keyframes dbDealScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.db-deal-countdown { display:flex; align-items:center; gap:8px; padding:0 16px; border-left:2px solid rgba(255,255,255,.1); flex-shrink:0; height:100%; }
.db-cd-label { font-family:var(--db-font-mono); font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,.4); }
.db-cd-time  { font-family:var(--db-font-mono); font-size:clamp(13px,1.5vw,16px); color:var(--db-accent); letter-spacing:.1em; transition:color 0.4s; min-width:72px; }

/* GRID */
.db-grid { display:grid; grid-template-columns:320px 1fr 320px; grid-template-areas:"left center right"; gap:clamp(12px,1.8vw,20px); padding:clamp(12px,1.8vw,20px); max-width:1700px; margin:0 auto; align-items:start; }
@media(max-width:1300px){ .db-grid { grid-template-columns:280px 1fr 280px; } }
@media(max-width:1100px){ .db-grid { grid-template-columns:240px 1fr 240px; } }
@media(max-width:960px) { .db-grid { grid-template-columns:1fr 1fr; grid-template-areas:"center center" "left right"; } }
@media(max-width:600px) { .db-grid { grid-template-columns:1fr; grid-template-areas:"center" "left" "right"; } }
.db-left   { grid-area:left;   display:flex; flex-direction:column; gap:var(--db-gap); }
.db-center { grid-area:center; }
.db-right  { grid-area:right;  display:flex; flex-direction:column; gap:var(--db-gap); }

/* CARDS */
.db-card {
    background: #111;
    border: var(--db-border);
    border-top: 3px solid var(--db-accent);
    transition: border-top-color 0.4s, box-shadow 0.3s;
    overflow: hidden;
}
.db-card:hover {
    box-shadow: 0 0 0 1px rgba(var(--db-accent-rgb),0.15), inset 0 1px 0 rgba(var(--db-accent-rgb),0.1);
}
.db-card-header { background:var(--db-black); padding:8px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid rgba(255,255,255,.07); min-height:40px; }
.db-card-sys  { font-family:var(--db-font-bang); font-size:clamp(13px,1.4vw,17px); letter-spacing:.1em; color:var(--db-accent); transition:color 0.4s; }
.db-card-link { font-family:var(--db-font-body); font-size:11px; font-weight:900; letter-spacing:.15em; color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s; }
.db-card-link:hover { color:var(--db-accent); }

/* BUTTONS */
.db-btn { display:inline-flex; align-items:center; font-family:var(--db-font-bang); font-size:clamp(13px,1.5vw,17px); letter-spacing:.1em; text-decoration:none; border:2px solid var(--db-accent); padding:8px 18px; cursor:pointer; transition:background .15s,color .15s,border-color .4s,transform .1s,box-shadow .1s; white-space:nowrap; box-shadow:3px 3px 0 var(--db-accent); }
.db-btn--accent  { background:var(--db-accent); color:#fff; }
.db-btn--outline { background:transparent; color:var(--db-accent); }
.db-btn--sm      { font-size:clamp(11px,1.2vw,14px); padding:6px 14px; box-shadow:2px 2px 0 var(--db-accent); }
.db-btn:hover    { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--db-accent); }
.db-btn:active   { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--db-accent); }
.db-btn--outline:hover { background:var(--db-accent-dim); }

/* RECRUIT CARD */
.db-recruit-card { position:relative; overflow:hidden; }
.db-recruit-body { padding:18px; position:relative; z-index:2; }
.db-recruit-name { font-family:var(--db-font-bang); font-size:clamp(18px,2.5vw,26px); letter-spacing:.08em; color:#fff; margin-bottom:10px; border:2px solid rgba(255,255,255,.1); padding:4px 10px; background:rgba(0,0,0,.3); }
.db-recruit-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.db-badge { font-family:var(--db-font-body); font-size:9px; font-weight:900; letter-spacing:.2em; padding:3px 9px; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); background:rgba(255,255,255,.05); }
.db-badge--accent { background:var(--db-accent); border-color:var(--db-accent); color:#fff; transition:background .4s,border-color .4s; }
.db-recruit-meta { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.db-meta-label { font-family:var(--db-font-mono); font-size:10px; letter-spacing:.15em; color:rgba(255,255,255,.4); text-transform:uppercase; }
.db-meta-val   { font-family:var(--db-font-body); font-size:12px; font-weight:700; color:rgba(255,255,255,.8); }
.db-recruit-id   { font-family:var(--db-font-mono); font-size:9px; letter-spacing:.15em; color:rgba(255,255,255,.25); margin-bottom:8px; }
.db-recruit-desc { font-family:var(--db-font-body); font-size:11px; color:rgba(255,255,255,.35); line-height:1.5; font-style:italic; }
.db-recruit-char { position:absolute; bottom:0; right:-10px; z-index:1; pointer-events:none; opacity:0.22; filter:saturate(0.3); transition:opacity 0.3s, filter 0.3s; }
.db-recruit-char-img { height:160px; width:auto; }
.db-recruit-card:hover .db-recruit-char { opacity:0.45; filter:saturate(1) drop-shadow(0 0 12px var(--db-accent)); }

/* BOUNTY */
.db-bounty-body { padding:18px; }
.db-bounty-title { font-family:var(--db-font-bang); font-size:clamp(16px,2vw,22px); letter-spacing:.08em; margin-bottom:12px; color:var(--db-accent); transition:color .4s; }
.db-bounty-item { display:flex; align-items:flex-start; gap:8px; font-family:var(--db-font-body); font-size:clamp(11px,1.2vw,13px); color:rgba(255,255,255,.7); padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); line-height:1.4; }
.db-bounty-dot  { width:6px; height:6px; border-radius:50%; background:var(--db-accent); flex-shrink:0; margin-top:5px; transition:background .4s; animation:dbPulse 2s ease-in-out infinite; }
@keyframes dbPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* NEWS CAROUSEL */
.db-news-nav  { display:flex; align-items:center; gap:8px; }
.db-news-arrow { width:48px; height:48px; background:transparent; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s,opacity .15s; padding:0; opacity:.75; }
.db-news-arrow::before { content:''; display:block; width:48px; height:48px; background-size:contain; background-repeat:no-repeat; background-position:center; }
#db-news-prev::before { background-image:url('https://crossoverxcards.com/wp-content/uploads/2026/05/framedarrow_right_black_04.png'); transform:scaleX(-1); }
#db-news-next::before { background-image:url('https://crossoverxcards.com/wp-content/uploads/2026/05/framedarrow_right_black_04.png'); }
.db-news-arrow:hover { opacity:1; transform:scale(1.1); }
.db-news-dots { display:flex; gap:4px; }
.db-news-dot  { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); transition:background .2s; cursor:pointer; border:none; }
.db-news-dot.active { background:var(--db-accent); }
.db-news-viewport { overflow:hidden; position:relative; }
.db-news-track    { display:flex; transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
.db-news-slide    { min-width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media(max-width:700px){ .db-news-slide { grid-template-columns:1fr; } }
.db-news-img-wrap {
    position: relative;
    background: #0a0a0a;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.06);
}
/* Subtle corner accents */
.db-news-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(var(--db-accent-rgb),0.08) 0%, transparent 40%),
        linear-gradient(315deg, rgba(var(--db-accent-rgb),0.06) 0%, transparent 40%);
    z-index: 1;
    pointer-events: none;
    transition: background 0.4s;
}
.db-news-img-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:rgba(255,255,255,.2); border:2px dashed rgba(255,255,255,.1); margin:12px; }
.db-news-img-placeholder span:first-child { font-size:40px; }
.db-news-img-placeholder span:last-child  { font-family:var(--db-font-mono); font-size:11px; letter-spacing:.15em; }
/* NEU: echtes Bild im News-Slide (füllt den aspect-ratio Container, liegt unter dem Ecken-Verlauf) */
.db-news-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
.db-news-content  { padding:clamp(14px,2.5vw,24px); display:flex; flex-direction:column; gap:10px; justify-content:center; }
.db-news-date     { font-family:var(--db-font-mono); font-size:10px; letter-spacing:.2em; color:var(--db-accent); transition:color .4s; text-transform:uppercase; }
.db-news-title    { font-family:var(--db-font-bang); font-size:clamp(18px,2.5vw,30px); letter-spacing:.06em; color:#fff; line-height:1.05; margin:0; }
.db-news-text     { font-family:var(--db-font-body); font-size:clamp(12px,1.3vw,14px); color:rgba(255,255,255,.6); line-height:1.6; margin:0; }
.db-news-meta     { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.db-news-tag      { font-family:var(--db-font-body); font-size:10px; font-weight:900; letter-spacing:.2em; padding:3px 9px; transition:background .4s; }
.db-news-release  { font-family:var(--db-font-mono); font-size:11px; color:rgba(255,255,255,.4); letter-spacing:.08em; }
.db-news-release strong { color:rgba(255,255,255,.7); }

/* EVENTS */
.db-event-body { padding:18px; display:flex; flex-direction:column; gap:12px; }
.db-event-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); padding:10px 12px; display:flex; flex-direction:column; gap:5px; transition:border-color .2s; }
.db-event-item:hover { border-color:var(--db-accent); }
.db-event-item--featured { border-color:rgba(var(--db-accent-rgb),.3); background:var(--db-accent-dim); transition:background .4s,border-color .4s; }
.db-event-badge { font-family:var(--db-font-body); font-size:9px; font-weight:900; letter-spacing:.2em; padding:2px 7px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.5); display:inline-block; width:fit-content; transition:background .4s; }
.db-event-name  { font-family:var(--db-font-bang); font-size:clamp(14px,1.8vw,19px); letter-spacing:.06em; color:#fff; }
.db-event-when, .db-event-where { font-family:var(--db-font-body); font-size:12px; color:rgba(255,255,255,.5); font-weight:600; }

/* STORE */
.db-store-body { padding:18px; display:flex; flex-direction:column; gap:12px; }
.db-store-item { display:flex; align-items:flex-start; gap:10px; font-family:var(--db-font-body); font-size:clamp(12px,1.2vw,13px); color:rgba(255,255,255,.65); line-height:1.5; font-weight:600; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.06); }
.db-store-item a { color:var(--db-accent); text-decoration:none; transition:color .4s; }
.db-store-icon { font-size:16px; flex-shrink:0; margin-top:1px; }

/* ONLINE STORE — feste, evergreen Karte (kein zeitlich begrenztes Angebot) */
.db-onlinestore-body { padding:18px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.db-onlinestore-icon { font-size:28px; line-height:1; }
.db-onlinestore-text { font-family:var(--db-font-body); font-size:clamp(12px,1.2vw,13px); color:rgba(255,255,255,.65); line-height:1.5; font-weight:600; margin:0; }

/* FEATURED */
.db-featured { padding:var(--db-gap) var(--db-gap) 0; max-width:1600px; margin:0 auto; }
.db-featured-header { margin-bottom:var(--db-gap); }
.db-featured-title { font-family:var(--db-font-bang); font-size:clamp(18px,2.5vw,28px); letter-spacing:.15em; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:12px; }
.db-feat-bracket { transition:color .4s; }
.db-featured-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--db-gap); }
@media(max-width:700px){ .db-featured-grid { grid-template-columns:1fr; } }
.db-feat-panel { background:#111; border:var(--db-border); border-top:3px solid var(--db-accent); overflow:hidden; transition:border-top-color .4s,transform .15s,box-shadow .15s; }
.db-feat-panel:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(var(--db-accent-rgb),.2); }
.db-feat-img-wrap { position:relative; overflow:hidden; background:#1a1a1a; }
.db-feat-img { display:block; width:100%; height:auto; transition:transform .3s; }
.db-feat-panel:hover .db-feat-img { transform:scale(1.02); }
.db-feat-badge { position:absolute; top:14px; right:0; font-family:var(--db-font-bang); font-size:clamp(15px,2vw,22px); letter-spacing:.1em; color:#fff; background:var(--db-accent); padding:5px 20px 5px 12px; clip-path:polygon(10px 0,100% 0,100% 100%,0 100%); transition:background .4s; }
.db-feat-bar  { background:var(--db-black); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.db-feat-info { display:flex; flex-direction:column; gap:3px; }
.db-feat-name { font-family:var(--db-font-body); font-size:clamp(12px,1.4vw,15px); font-weight:700; color:#fff; }
.db-feat-price{ font-family:var(--db-font-bang); font-size:clamp(18px,2.2vw,26px); letter-spacing:.06em; transition:color .4s; }

/* BOTTOM TICKER */
.db-ticker-bottom { margin-top:var(--db-gap); background:var(--db-black); border-top:2px solid rgba(255,255,255,.06); border-bottom:3px solid var(--db-accent); height:40px; overflow:hidden; display:flex; align-items:center; transition:border-bottom-color .4s; }
.db-ticker-inner  { overflow:hidden; width:100%; }
.db-ticker-track  { display:inline-flex; animation:dbTickerScroll 36s linear infinite; white-space:nowrap; }
.db-ticker-track span { font-family:var(--db-font-body); font-size:clamp(11px,1.1vw,13px); font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.5); padding:0 28px; }
.db-ticker-track span::before { content:'◆'; color:var(--db-accent); margin-right:28px; transition:color .4s; }
@keyframes dbTickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* SOCIAL */
.db-social-section { padding:clamp(32px,5vh,64px) var(--db-gap) clamp(200px,22vh,300px); max-width:1700px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:20px; }
.db-social-label   { font-family:var(--db-font-bang); font-size:clamp(16px,2vw,24px); letter-spacing:.2em; color:var(--db-accent); transition:color .4s; }
.db-social-grid    { display:flex; gap:clamp(12px,2vw,24px); flex-wrap:wrap; justify-content:center; }
.db-social-card    { display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; padding:clamp(14px,2vw,24px) clamp(16px,2.5vw,28px); background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.08); transition:background .15s,border-color .15s,transform .1s; min-width:clamp(80px,8vw,110px); }
.db-social-card:hover { background:var(--db-accent-dim); border-color:var(--db-accent); transform:translateY(-3px); }
.db-social-card span { font-family:var(--db-font-body); font-size:clamp(9px,1vw,12px); font-weight:900; letter-spacing:.2em; color:rgba(255,255,255,.4); text-transform:uppercase; }
.db-social-icon-img { width:clamp(40px,5vw,64px); height:clamp(40px,5vw,64px); object-fit:contain; display:block; }
/* Always show icon-normal, apply brightness filter on hover */
.db-social-card .icon-hover  { display:none !important; }
.db-social-card:hover .icon-normal { display:block; filter:brightness(1.3) drop-shadow(0 0 8px var(--db-accent)); }

/* ANIMATIONS */
.db-anim { opacity:0; transform:translateY(20px); transition:opacity .5s,transform .5s; }
.db-anim.in { opacity:1; transform:translateY(0); }

/* Mobile overflow prevention */
@media(max-width:768px){
    .db-deal-inner { overflow:hidden; }
    .db-grid { padding:8px; gap:8px; }
    .db-news-slide { grid-template-columns:1fr; }
    .db-news-img-wrap { aspect-ratio:16/9; }
    .db-featured { padding:8px; }
    .db-feat-bar { flex-direction:column; align-items:flex-start; }
    .db-featured-grid { grid-template-columns:1fr; }
    .db-recruit-name { font-size:18px; }
    .db-social-grid { gap:8px; }
    .db-social-card { min-width:60px; padding:10px 10px; }
    .db-social-icon-img { width:36px; height:36px; }
    .db-deal-countdown { display:none; }
    .db-ticker-bottom { display:none; } /* bottom ticker on mobile */
}

@media(max-width:480px){
    .db-grid { padding:6px; gap:6px; }
    .db-news-content { padding:12px; }
    .db-news-title { font-size:18px; }
    .db-event-name { font-size:15px; }
    .db-recruit-name { font-size:16px; }
    .db-social-card { min-width:52px; padding:8px; }
    .db-social-icon-img { width:30px; height:30px; }
    .db-social-card span { display:none; } /* hide labels on very small screens */
}

/* Light accent readability fixes */
body.style-retro .db-bounty-title,
body.style-tcg   .db-bounty-title { color: var(--db-accent); filter: brightness(0.85); }
body.style-retro .db-card-sys,
body.style-tcg   .db-card-sys { text-shadow: 0 0 8px rgba(0,0,0,0.8); }
body.style-retro .db-recruit-meta .db-meta-val,
body.style-tcg   .db-recruit-meta .db-meta-val { color: var(--db-accent); filter: brightness(0.9); }

/* ============================================================
   STORE STATUS PANEL + SECOND ROW
   ============================================================ */
.db-grid-row2 {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-areas: "status scroller";
    gap: clamp(12px,1.8vw,20px);
    padding: 0 clamp(12px,1.8vw,20px) clamp(12px,1.8vw,20px);
    max-width: 1700px;
    margin: 0 auto;
}
@media(max-width:1300px){ .db-grid-row2 { grid-template-columns:280px 1fr; } }
@media(max-width:960px) { .db-grid-row2 { grid-template-columns:1fr; grid-template-areas:"status" "scroller"; } }

.db-status-panel { grid-area:status; }
/* FIX: Flex-Spalte statt height:100% auf dem Kind — vorher rechnete
   .db-scroller-inner mit 100% der GESAMTEN Kartenhöhe, ohne den
   Card-Header (~40px) abzuziehen. Dadurch war der Inhalt immer um
   die Header-Höhe zu groß und wurde unten von overflow:hidden
   abgeschnitten (God-Pull-Balken/Deal-Tiles nicht mehr sichtbar). */
.db-scroller-panel { grid-area:scroller; display:flex; flex-direction:column; }

/* Live indicator */
.db-live-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #00ff88;
    flex-shrink: 0;
    animation: dbPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px #00ff88;
}
.db-live-dot.closed { background:#ff4444; box-shadow:0 0 8px #ff4444; animation:none; }

.db-status-live {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.db-status-live-text {
    font-family: var(--db-font-bang);
    font-size: clamp(18px,2.5vw,26px);
    letter-spacing: 0.1em;
    color: #00ff88;
    transition: color 0.3s;
}
.db-status-live-text.closed { color:#ff4444; }

.db-hours-grid {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.db-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--db-font-mono);
    font-size: clamp(10px,1.1vw,13px);
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    letter-spacing: 0.05em;
}
.db-hours-day { color: rgba(255,255,255,0.45); text-transform: uppercase; }
.db-hours-time { color: rgba(255,255,255,0.8); font-weight: 700; }
.db-hours-row.today .db-hours-day  { color: var(--db-accent); }
.db-hours-row.today .db-hours-time { color: var(--db-accent); }
.db-hours-row.closed-day .db-hours-time { color: rgba(255,255,255,0.25); }

.db-status-twitch {
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(145,70,255,0.08);
}
.db-twitch-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #9146ff;
    box-shadow: 0 0 6px #9146ff;
    animation: dbPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.db-twitch-text {
    font-family: var(--db-font-mono);
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.08em;
}
.db-twitch-text strong { color: #9146ff; }

/* GAMING SCROLLER PANEL */
.db-scroller-inner {
    padding: 16px 0;
    overflow: hidden;
    position: relative;
    flex: 1;              /* FIX: war height:100%, siehe .db-scroller-panel oben */
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

/* Reverse ticker */
.db-reverse-track {
    display: inline-flex;
    white-space: nowrap;
    animation: dbReverseScroll 28s linear infinite;
}
.db-reverse-track span {
    font-family: var(--db-font-bang);
    font-size: clamp(16px,2.2vw,28px);
    letter-spacing: 0.15em;
    color: var(--db-accent);
    padding: 0 40px;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: color 0.4s;
    opacity: 0.7;
}
.db-reverse-track span::before {
    content: '◆';
    margin-right: 40px;
    opacity: 0.5;
    font-size: 0.6em;
}
@keyframes dbReverseScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* God Pull Meter */
.db-godpull {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-godpull-label {
    font-family: var(--db-font-mono);
    font-size: clamp(9px,1vw,12px);
    letter-spacing: 0.25em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}
.db-godpull-label span:last-child { color: var(--db-accent); }
.db-godpull-bar {
    height: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    position: relative;
}
.db-godpull-fill {
    height: 100%;
    width: 73%;
    background: linear-gradient(90deg, var(--db-accent), rgba(255,255,255,0.8));
    transition: width 0.4s ease;
    position: relative;
}
.db-godpull-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
    animation: dbGlide 1.5s ease-in-out infinite;
}
@keyframes dbGlide {
    0%,100% { opacity:0.4; }
    50% { opacity:1; }
}

/* System messages ticker */
.db-sys-track {
    display: inline-flex;
    white-space: nowrap;
    animation: dbDealScroll 20s linear infinite;
}
.db-sys-track span {
    font-family: var(--db-font-mono);
    font-size: clamp(10px,1.1vw,13px);
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.35);
    padding: 0 30px;
    flex-shrink: 0;
}
.db-sys-track span::before {
    content: '//';
    color: var(--db-accent);
    margin-right: 12px;
    opacity: 0.6;
    transition: color 0.4s;
}

/* ============================================================
   DEAL TILES — 2 Kacheln nebeneinander
   ============================================================ */
.db-deal-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: clamp(8px, 1.2vw, 14px);
    padding: 0 clamp(12px,1.5vw,20px);
    flex: 1;
}

.db-deal-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    overflow: hidden;
}
.db-deal-tile:hover {
    border-color: var(--db-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--db-accent-rgb),0.2);
}

.db-deal-tile-img {
    position: relative;
    aspect-ratio: 1/1;   /* FIX: war 4/3 — eure Bilder sind quadratisch, dadurch wurde oben/unten beschnitten */
    background: #0d0d0d;
    overflow: hidden;
}
.db-deal-tile-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: rgba(255,255,255,0.15);
    border: 1px dashed rgba(255,255,255,0.08);
    margin: 8px;
}
.db-deal-tile-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.db-deal-tile:hover .db-deal-tile-img img { transform: scale(1.04); }

.db-deal-tile-tag {
    position: absolute;
    top: 8px; right: 0;
    font-family: var(--db-font-bang);
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 2px 10px 2px 6px;
    clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
    transition: background 0.4s;
}

.db-deal-tile-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--db-black);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.db-deal-tile-name {
    font-family: var(--db-font-body);
    font-size: clamp(11px,1.2vw,13px);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-deal-tile-price {
    font-family: var(--db-font-bang);
    font-size: clamp(14px,1.8vw,20px);
    letter-spacing: 0.06em;
    transition: color 0.4s;
}
.db-deal-tile-cta {
    font-family: var(--db-font-bang);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.35);
    transition: color 0.2s;
}
.db-deal-tile:hover .db-deal-tile-cta { color: var(--db-accent); }

@media(max-width:600px) {
    .db-deal-tiles { grid-template-columns:1fr 1fr; padding:0 8px; }
    .db-deal-tile-name { font-size:11px; }
}

/* ============================================================
   RESPONSIVE — single clean block, no conflicts
   Root fix: prevent ALL overflow
   ============================================================ */

html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
* { min-width: 0; box-sizing: border-box; }

/* ── 960px: sidebar collapse ─────────────────────────────── */
@media (max-width: 960px) {
    .db-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "center center" "left right";
    }
    .db-grid-row2 {
        grid-template-columns: 1fr;
        grid-template-areas: "status" "scroller";
    }
}

/* ── 768px: single column ─────────────────────────────────── */
@media (max-width: 768px) {
    /* Header */
    .vault-status-display { display: none !important; }
    .header-inner { padding: 0 10px; gap: 8px; }
    .header-logo  { width: 130px !important; height: auto !important; }
    .header-icon  { width: 34px !important; height: 34px !important; }

    /* Page */
    .db-page { overflow-x: hidden; }

    /* Ticker */
    .db-deal-countdown { display: none; }
    .db-deal-label { font-size: 12px; padding: 0 10px; }
    .db-deal-track span { font-size: 11px; padding: 0 18px; }

    /* Grids */
    .db-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas: "center" "left" "right" !important;
        padding: 8px;
        gap: 8px;
    }
    .db-grid-row2 {
        grid-template-columns: 1fr !important;
        grid-template-areas: "status" "scroller" !important;
        padding: 0 8px 8px;
        gap: 8px;
    }

    /* Cards */
    .db-card { width: 100%; overflow: hidden; }

    /* News */
    .db-news-slide { grid-template-columns: 1fr; }
    .db-news-img-wrap { aspect-ratio: 16/9; }
    .db-news-content { padding: 12px; }

    /* Featured */
    .db-featured { padding: 0 8px 8px; }
    .db-featured-grid { grid-template-columns: 1fr; gap: 8px; }
    .db-feat-bar { flex-direction: column; align-items: flex-start; }

    /* Deal tiles */
    .db-deal-tiles { padding: 0 8px; gap: 8px; }

    /* Tickers */
    .db-ticker-bottom { display: none; }

    /* Social */
    .db-social-section { padding: 16px 8px 160px; }
    .db-social-card { min-width: 56px; padding: 10px 8px; }
    .db-social-icon-img { width: 36px !important; height: 36px !important; }
    .db-social-card span { display: none; }

    /* Floating menu */
    .vault-floating-menu-trigger {
        width: 58px !important;
        height: 58px !important;
        bottom: 16px !important;
        right: 12px !important;
    }
    .vault-floating-menu-trigger img { width: 58px !important; height: 58px !important; }
    .menu-item-holo img { width: 50px !important; height: 50px !important; }
}

/* ── 480px: smallest phones ─────────────────────────────── */
@media (max-width: 480px) {
    /* Header tighter */
    .header-inner { padding: 0 8px; gap: 6px; }
    .header-logo  { width: 100px !important; }
    .header-icon  { width: 30px !important; height: 30px !important; }

    /* Ticker */
    .db-deal-label { font-size: 11px; padding: 0 8px; }
    .db-deal-track span { font-size: 10px; padding: 0 14px; }

    /* Grids with safe side padding */
    .db-grid     { padding: 6px 10px !important; gap: 6px !important; }
    .db-grid-row2 { padding: 0 10px 6px !important; gap: 6px !important; }
    .db-featured  { padding: 0 10px 6px !important; }

    /* News */
    .db-news-title { font-size: 16px; }
    .db-news-content { padding: 10px; }

    /* Deal tiles keep 2 col */
    .db-deal-tiles { grid-template-columns: 1fr 1fr; padding: 0 10px; gap: 6px; }
    .db-deal-tile-name  { font-size: 10px; }
    .db-deal-tile-price { font-size: 13px; }

    /* Store hours */
    .db-hours-row { font-size: 11px; }
    .db-status-live-text { font-size: 17px; }
    .db-recruit-name { font-size: 17px; }
    .db-bounty-title { font-size: 16px; }
    .db-event-name   { font-size: 15px; }

    /* Reverse ticker smaller */
    .db-reverse-track span { font-size: 13px; padding: 0 16px; }

    /* Social */
    .db-social-section { padding: 12px 10px 140px; }
    .db-social-grid { gap: 5px; }
    .db-social-card { min-width: 48px; padding: 8px 6px; }
    .db-social-icon-img { width: 30px !important; height: 30px !important; }

    /* Floating menu */
    .vault-floating-menu-trigger {
        width: 54px !important;
        height: 54px !important;
    }
    .vault-floating-menu-trigger img { width: 54px !important; height: 54px !important; }
    .menu-item-holo img { width: 46px !important; height: 46px !important; }
}

/* ── Floating menu bigger on desktop too ─────────────────── */
@media (min-width: 769px) {
    .vault-floating-menu-trigger {
        width: 64px !important;
        height: 64px !important;
    }
    .vault-floating-menu-trigger img { width: 64px !important; height: 64px !important; }
    .menu-item-holo img { width: 54px !important; height: 54px !important; }
}