body.original-home{background:#060414;min-height:100svh;margin:0}body.original-home:before,body.original-home:after{display:none}.art-stage{position:relative;width:100%;max-width:1920px;margin:0 auto;aspect-ratio:1677/938;overflow:hidden}.original-art{display:block;width:100%;height:100%;object-fit:contain}.hotspot{position:absolute;display:block;background:transparent;border:0;border-radius:6px;cursor:pointer;color:transparent}.hotspot:hover{box-shadow:inset 0 0 0 2px #ffffff55,0 0 20px #ed17dc80;background:#ffffff08}.hotspot:focus-visible{outline:3px solid white;outline-offset:0;box-shadow:0 0 18px #04eaff}.nav-home{left:15.5%;top:2%;width:5.2%;height:6%}.nav-mixes{left:20.8%;top:2%;width:5.9%;height:6%}.nav-downloads{left:26.8%;top:2%;width:8.2%;height:6%}.nav-story{left:35%;top:2%;width:5.6%;height:6%}.tile-mixes{left:5.4%;top:76.7%;width:19.1%;height:11.8%}.tile-downloads{left:25.7%;top:76.7%;width:19.3%;height:11.8%}.tile-story{left:46%;top:76.7%;width:19.5%;height:11.8%}.lang-de{left:86%;top:2%;width:2.2%;height:6%}.lang-en{left:89.3%;top:2%;width:2.3%;height:6%}.mobile-nav{display:none}.art-note{max-width:1050px;margin:0 auto;padding:12px 22px 20px;text-align:center;font-size:.78rem;color:#a5a3bd}@media(max-width:700px){.art-stage{width:100%;min-width:0}.art-stage .hotspot{display:none}.mobile-nav{display:flex;flex-direction:column;gap:12px;margin:12px 18px 0}.mobile-nav>a{padding:16px;border:1px solid #ed29da;border-radius:12px;background:#0e0925;color:white;font-weight:800;letter-spacing:.05em}.mobile-nav>a:nth-child(2){border-color:#05dff8}.mobile-nav>a:nth-child(3){border-color:#986bff}.mobile-lang{display:flex;gap:10px;justify-content:center}.mobile-lang button{padding:10px 22px;border:1px solid #ffffff70;border-radius:8px;background:#17102b;color:white}.art-note{font-size:.75rem}}
/* Image artwork stays intact; a translucent header hides the baked-in navigation. */
.image-topbar{position:absolute;z-index:4;left:0;right:0;top:0;height:9.2%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4%;background:rgba(4,4,20,.81);backdrop-filter:blur(12px);border-bottom:1px solid #ffffff20}
.image-brand{justify-self:start;font:italic 900 clamp(12px,1.55vw,26px)/1 'Arial Black',Impact,Arial,sans-serif;letter-spacing:-.055em;text-shadow:2px 2px #e91acb;white-space:nowrap}
.image-nav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.9vw,54px)}
.image-nav a{font:700 clamp(11px,1.12vw,20px)/1 'Arial Black',Impact,Arial,sans-serif;letter-spacing:-.035em;white-space:nowrap;padding:12px 0;position:relative}
.image-nav a:hover{color:#00e7ff}.image-nav a[aria-current=page]:after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:#00e7ff;box-shadow:0 0 8px #00e7ff}
.image-langs{justify-self:end;display:flex;align-items:center;gap:9px}.image-langs button{border:0;background:transparent;color:white;font-weight:900;padding:8px 1px;font-size:clamp(11px,1vw,16px)}.image-langs button.active{color:#00e7ff}.image-langs span{opacity:.5}
@media(max-width:700px){.image-topbar{height:11%;padding:0 4%}.image-brand{font-size:clamp(10px,2.8vw,16px)}.image-nav{gap:clamp(7px,1.5vw,15px)}.image-nav a{font-size:clamp(7px,1.7vw,11px);padding:6px 0}.image-langs{gap:3px}.image-langs button{font-size:9px;padding:4px 0}.image-langs span{font-size:9px}}

/* DJ Cliq: live show overlay. Original artwork and navigation untouched. */
.live-announcement{
 position:absolute;z-index:5;left:67.3%;top:76.7%;width:29.3%;
 min-height:11.8%;box-sizing:border-box;padding:1.0% 1.2%;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,.55vw,10px);
 border:1px solid rgba(0,231,255,.85);border-radius:10px;
 background:linear-gradient(130deg,rgba(10,7,30,.94),rgba(29,8,54,.88));
 box-shadow:0 0 13px #00dff755,inset 0 0 18px #db28dc22;
 color:#fff;text-align:center;
}
.live-announcement__heading{font-family:Arial,sans-serif;font-size:clamp(10px,1.12vw,20px);font-weight:900;letter-spacing:.07em;white-space:nowrap}
.live-announcement__heading span{color:#00e6f5;margin-right:.2em}
.live-announcement__date{font-family:Arial,sans-serif;font-size:clamp(11px,1.3vw,23px);font-weight:900;white-space:nowrap}
.live-announcement__link{font-size:clamp(9px,.9vw,16px);font-weight:800;letter-spacing:.03em;color:#20f3ff;text-decoration:underline;text-underline-offset:3px}
.live-announcement__link:hover{color:white;text-shadow:0 0 10px #00edff}
.live-announcement__link:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:700px){.live-announcement{left:67%;top:76%;width:31%;padding:1% .5%;gap:2px;border-radius:4px;min-height:12%}.live-announcement__heading{font-size:clamp(4px,1.5vw,10px);letter-spacing:0}.live-announcement__date{font-size:clamp(5px,1.5vw,10px)}.live-announcement__link{font-size:clamp(4px,1.3vw,9px)}}

/* Ethnocentric lettering for the existing live card; its position and dimensions stay unchanged. */
.live-announcement__heading,.live-announcement__date,.live-announcement__link{width:100%;display:flex;align-items:center;justify-content:center;min-width:0}
.live-announcement__heading img{display:block;width:100%;max-width:100%;height:auto;max-height:26px;object-fit:contain}
.live-announcement__date img{display:block;width:94%;height:auto;max-height:29px;object-fit:contain}
.live-announcement__link img{display:block;width:80%;height:auto;max-height:22px;object-fit:contain}
.live-announcement__link:hover img{filter:drop-shadow(0 0 6px #00edff)}

/* Live card refinement: slightly smaller lettering/card and more gap to existing tiles. */
@media(min-width:701px){
.live-announcement{left:69.3%;top:77.2%;width:26.8%;min-height:10.5%;padding:.65% .95%;gap:clamp(3px,.35vw,7px)}
.live-announcement__heading img{width:91%;max-height:22px}
.live-announcement__date img{width:85%;max-height:24px}
.live-announcement__link img{width:73%;max-height:18px}
}

/* Desktop: live notice in the free space above WELCOME TO DJ CLIQ. */
@media(min-width:701px){.live-announcement{left:9%;top:29%;width:34%;}}


/* Smartphone homepage: separate touch-friendly layout. Desktop artwork remains unchanged. */
.cliq-mobile-home { display:none; }
@media (max-width:700px) {
  body.original-home { background: #070515; min-height:100svh; overflow-x:hidden; }
  body.original-home .art-stage { display:none; }
  .cliq-mobile-home {
    display:flex; flex-direction:column; gap:18px;
    width:min(100% - 32px, 460px); margin:0 auto;
    padding:24px 0 12px; box-sizing:border-box;
  }
  .cliq-mobile-hero {
    position:relative; display:flex; flex-direction:column; align-items:center;
    padding:10px 12px 18px; border-radius:18px;
    background:radial-gradient(ellipse at center, #261046 0%, #0e0a25 70%);
    border:1px solid rgba(178,76,238,.35);
  }
  .cliq-mobile-logo { display:block; width:min(70vw,240px); height:auto; object-fit:contain; filter:drop-shadow(0 0 14px #a43de755); }
  .cliq-mobile-tagline { color:#f5c6ff; font-size:clamp(10px,2.7vw,13px); font-weight:800; text-align:center; letter-spacing:.06em; margin:0; }
  .cliq-mobile-languages { display:flex; gap:10px; align-items:center; margin-top:13px; color:#8c82ad; }
  .cliq-mobile-languages button { min-width:48px; min-height:40px; color:#fff; background:#1c1536; border:1px solid #695186; border-radius:9px; font-weight:800; }
  .cliq-mobile-languages button.active { border-color:#19e5f7; color:#19e5f7; }
  .cliq-mobile-live {
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:22px 15px; border:1px solid #1ddff0; border-radius:14px;
    background:linear-gradient(130deg,#100d2d,#271038);
    box-shadow:0 0 17px #00dff72c;
  }
  .cliq-mobile-live > img { width:100%; max-width:320px; height:auto; max-height:34px; object-fit:contain; }
  .cliq-mobile-live > img:nth-child(2) { max-width:300px; }
  .cliq-mobile-live a {
    display:flex; justify-content:center; align-items:center; width:100%;
    min-height:48px; border-radius:9px; background:#0d3146;
    border:1px solid #00ddf5;
  }
  .cliq-mobile-live a img { width:85%; max-width:260px; max-height:25px; object-fit:contain; }
  .cliq-mobile-menu { display:flex; flex-direction:column; gap:12px; }
  .cliq-mobile-menu a {
    display:grid; grid-template-columns:44px 1fr 22px; align-items:center;
    min-height:64px; padding:10px 17px; box-sizing:border-box;
    border:1px solid #23d4e9; border-radius:13px;
    background:linear-gradient(105deg,#11283d,#14112f);
    color:#fff; text-decoration:none; font-size:clamp(16px,4.5vw,20px);
    font-weight:900; letter-spacing:.045em;
  }
  .cliq-mobile-menu a:nth-child(2) { border-color:#d743dc; }
  .cliq-mobile-menu a:nth-child(3) { border-color:#9e76ff; }
  .cliq-mobile-menu a span:first-child { color:#28edff; font-size:25px; }
  .cliq-mobile-menu a span:last-child { color:#e0b4ff; font-size:30px; text-align:right; }
  .cliq-mobile-menu a:focus-visible,.cliq-mobile-live a:focus-visible { outline:3px solid white; outline-offset:3px; }
  body.original-home .legal-footer { margin-top:16px; }
  body.original-home .legal-footer .shell { gap:12px; flex-direction:column; text-align:center; }
}

/* Smartphone only: compact download player, duration alongside title. */
@media (max-width:700px) {
 .mix-download-panel { padding:10px 10px 12px!important; }
 .mix-download-panel .mix-section-title { margin-bottom:7px!important; }
 .mix-download-panel .mix-section-title img { max-height:24px!important; }
 .mix-download-panel .mix-player-area { padding:9px 10px!important; border-radius:10px; }
 .mix-download-panel .mix-player-top { font-size:.62rem; line-height:1.1; }
 .mix-download-panel .mix-player-icon { font-size:1.1rem; }
 .mix-download-panel .mix-title-line { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:6px 0 7px; }
 .mix-download-panel .mix-current-title { flex:1; min-width:0; margin:0!important; font-size:.94rem!important; line-height:1.25; }
 .mix-download-panel .mix-duration { flex:none; margin:0!important; font-size:.76rem!important; line-height:1.25; white-space:nowrap; }
 .mix-download-panel #djcliq-audio { height:40px!important; }
 .mix-download-panel .mix-list-heading { margin:10px 0 7px!important; font-size:.75rem!important; }
 .mix-download-panel .mix-track-list { max-height:clamp(270px,49svh,600px)!important; gap:6px!important; }
 .mix-download-panel .mix-track { padding:5px!important; }
 .mix-download-panel .mix-choose { min-height:36px!important; padding:5px 6px!important; }
 .mix-download-panel .mix-download { min-height:36px!important; padding:7px 12px!important; }
 .mix-download-panel .mix-help { margin-top:7px!important; font-size:.72rem!important; }
}