@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
:root{--navy:#071a47;--blue:#103f95;--red:#ee1e2d;--ink:#0a1838;--muted:#5f6c83;--line:#dfe6f0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f6fa;color:var(--ink);font-family:Inter,Arial,sans-serif}
.approved-top{position:relative;width:100%;background:#eef3f9;overflow:hidden}.approved-top>img{display:block;width:100%;height:auto}.top-hotspots{position:absolute;inset:0}
.top-hotspots a,.top-hotspots button{position:absolute;display:block;border:0;background:transparent;cursor:pointer;padding:0}
.lang-hot{top:5.2%;height:8%;width:2.5%}.lang-hot.de{left:67.1%}.lang-hot.en{left:69.4%}
.social-hot{top:2.6%;height:16%;width:4.7%;border-radius:30%!important}.social-hot:hover{background:rgba(255,255,255,.13);box-shadow:0 0 22px rgba(30,108,255,.7)}
.social-hot.x{left:72.4%}.social-hot.discord{left:77.4%}.social-hot.whatsapp{left:82.3%}.social-hot.facebook{left:87.2%}.social-hot.youtube{left:92.0%}
.nav-hot{top:53.8%;height:9.5%}.nav-hot:hover{background:rgba(255,255,255,.08)}
.nav-hot.home{left:2.9%;width:6.4%}.nav-hot.news{left:9.4%;width:5.1%}.nav-hot.cod{left:14.7%;width:9.2%}.nav-hot.lotro{left:24.0%;width:6.4%}.nav-hot.lol{left:30.4%;width:12.1%}.nav-hot.rocket{left:42.4%;width:10.7%}.nav-hot.pc{left:53.1%;width:8.7%}.nav-hot.console{left:61.7%;width:8.1%}.nav-hot.hardware{left:69.8%;width:8.4%}.nav-hot.videos{left:78.1%;width:7.3%}.nav-hot.community{left:85.4%;width:9.3%}
.hero-hot{top:63.5%;height:35.3%}.hero-hot:hover{background:rgba(255,255,255,.035)}
.hero-hot.hero-cod{left:0;width:21.7%}.hero-hot.hero-lotro{left:21.7%;width:20%}.hero-hot.hero-lol{left:41.7%;width:18.2%}.hero-hot.hero-rocket{left:59.9%;width:20.1%}.hero-hot.hero-pc{left:80%;width:20%}

.dashboard{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(360px,1fr);gap:16px;padding:8px 2.4% 10px;background:linear-gradient(#f8fafc,#f3f5f9)}
.news-panel,.panel{background:#fff;border:1px solid #dfe5ee;border-radius:10px;box-shadow:0 3px 13px rgba(11,28,67,.08)}
.news-panel{padding:10px 18px 15px}.section-head{display:flex;align-items:center;justify-content:space-between}.section-head h2{margin:0 0 8px;font-size:18px;letter-spacing:-.2px}.bolt{color:var(--red);font-size:26px;font-weight:900}
.filters{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #e4e9f1;padding-bottom:8px}.filters button{height:26px;padding:0 17px;border:1px solid #cfd8e6;border-radius:5px;background:#fbfcfe;color:#0b214f;font-size:9px;font-weight:900;cursor:pointer}.filters button.active,.filters button:hover{background:linear-gradient(#fa3845,#d80e1d);border-color:#e21b28;color:#fff;box-shadow:0 2px 6px rgba(226,27,40,.24)}
.news-list{min-height:320px}.news-item{display:grid;grid-template-columns:210px minmax(0,1fr) 112px;gap:14px;align-items:center;min-height:61px;padding:6px 0;border-bottom:1px solid #e8edf3}.news-item:last-child{border-bottom:0}.thumb{width:210px;height:55px;overflow:hidden;border-radius:5px;background:#0a1730}.thumb img{width:100%;height:100%;display:block;object-fit:cover}.news-copy{min-width:0}.cat{color:#ed1c2b;font-size:9px;font-weight:900;text-transform:uppercase}.news-copy h3{margin:3px 0 2px;font-size:11px;line-height:1.25;color:#071735}.news-copy p{margin:0;color:#65738a;font-size:9px}.readmore{justify-self:end;border:1px solid #ff6a72;border-radius:5px;padding:8px 11px;color:#ed1c2b;font-size:8px;font-weight:900;text-decoration:none;white-space:nowrap;background:white}.readmore:hover{background:#ed1c2b;color:white}.loading{padding:30px;color:#66768c}

.sidebar{display:grid;gap:10px}.panel{padding:9px 12px}.panel-title{font-size:12px;font-weight:900;color:#071a47}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-head>a{font-size:8px;color:#103f95;font-weight:900;text-decoration:none}
.events{min-height:258px}.calendar-symbol{font-size:15px}.event-row{display:grid;grid-template-columns:40px 1fr 70px;align-items:center;gap:9px;border-bottom:1px solid #e4e9f0;padding:5px 0}.event-row time{width:35px;border:1px solid #cfd7e3;border-radius:4px;overflow:hidden;text-align:center;background:#fff;line-height:1}.event-row time small{display:block;background:#ed1c2b;color:white;font-size:7px;padding:2px 0;font-weight:900}.event-row time b{display:block;font-size:13px;padding:4px 0}.event-row strong{display:block;font-size:9px}.event-row span{display:block;font-size:8px;margin-top:2px;color:#45536b}.event-row em{justify-self:end;background:#eef3fb;color:#1745a2;font-style:normal;font-size:7px;font-weight:900;padding:5px 8px;border-radius:4px}.event-row em.green{background:#eaf6ee;color:#188449}.events-link{text-align:right;color:#ed1c2b;font-size:8px;font-weight:900;padding-top:8px}
.video-panel{padding-bottom:10px}.video-card{position:relative;display:block;margin-top:7px;height:102px;overflow:hidden;border-radius:6px;background:#111}.video-card img{width:100%;height:100%;object-fit:cover}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:#ed1c2b;color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 0 0 5px rgba(255,255,255,.16)}

.community-strip{margin:0 2.4% 12px;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid #dfe5ee;border-radius:10px;box-shadow:0 3px 13px rgba(11,28,67,.08);overflow:hidden}.community-strip article{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:9px;padding:10px 14px;border-right:1px solid #e1e6ee;min-height:92px}.community-strip article:last-child{border-right:0}.community-strip img{width:68px;height:70px;object-fit:cover;border-radius:8px}.community-strip h3{margin:0;color:#103f95;font-size:13px}.community-strip article:nth-child(4) h3{color:#ed1c2b}.community-strip p{margin:4px 0 7px;font-size:9px}.community-strip a{display:inline-block;border:1px solid #b7c5dd;border-radius:5px;padding:6px 14px;color:#103f95;font-size:8px;font-weight:900;text-decoration:none;background:#fff}.community-strip article:nth-child(2) a,.community-strip article:nth-child(4) a{color:#ed1c2b;border-color:#ff9ba0}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 3%;background:#071a47;color:#dce7f8;font-size:11px}footer a{color:#dce7f8;text-decoration:none}footer>div:nth-child(2){display:flex;gap:10px}.hadika-credit a{font-weight:900}.hadika-credit a:hover{color:#ff4a55;text-shadow:0 0 8px #2d68ff}

@media(max-width:980px){
  .dashboard{grid-template-columns:1fr}.community-strip{grid-template-columns:1fr 1fr}.approved-top{overflow-x:auto}.approved-top>img{min-width:980px}.top-hotspots{min-width:980px}.news-item{grid-template-columns:150px minmax(0,1fr)}.thumb{width:150px}.readmore{grid-column:2;justify-self:start}.community-strip article{border-bottom:1px solid #e1e6ee}
}
@media(max-width:600px){
 .dashboard{padding:8px 10px}.community-strip{margin:0 10px 10px;grid-template-columns:1fr}.news-panel{padding:10px}.news-item{grid-template-columns:100px 1fr}.thumb{width:100px}.filters button{padding:0 10px}.event-row{grid-template-columns:40px 1fr}.event-row em{display:none}footer{flex-direction:column;text-align:center}.community-strip article{grid-template-columns:64px 1fr}
}
/* ===== V7 HEADER REPAIR =====
   Uses the approved mockup pixels unchanged. Header and nav/hero are split
   only at their natural boundary so the English motto gets its own line.
*/
.approved-top{display:none!important}

.approved-header,
.approved-navhero{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#eef3f9;
}
.approved-header>img,
.approved-navhero>img{
  display:block;
  width:100%;
  height:auto;
}

.header-hotspots,
.navhero-hotspots{
  position:absolute;
  inset:0;
}
.header-hotspots a,
.header-hotspots button,
.navhero-hotspots a{
  position:absolute;
  display:block;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}

/* Header hotspots relative to 1672 x 210 */
.header-hotspots .lang-hot{top:22%;height:30%;width:2.8%}
.header-hotspots .lang-hot.de{left:67.1%}
.header-hotspots .lang-hot.en{left:69.4%}

.header-hotspots .social-hot{
  top:8%;height:48%;width:4.7%;
  border-radius:30%;
}
.header-hotspots .social-hot:hover{
  background:rgba(255,255,255,.10);
  box-shadow:0 0 22px rgba(30,108,255,.70);
}
.header-hotspots .x{left:72.4%}
.header-hotspots .discord{left:77.4%}
.header-hotspots .whatsapp{left:82.3%}
.header-hotspots .facebook{left:87.2%}
.header-hotspots .youtube{left:92.0%}

/* English motto is a new, separate line – it never covers the original graphic */
.english-motto{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,#eef3f9,#f8fafc 50%,#eef3f9);
  color:#183f80;
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  text-transform:uppercase;
  border-top:1px solid rgba(19,63,137,.08);
  border-bottom:1px solid rgba(19,63,137,.12);
}

/* Nav/hero hotspots relative to 1672 x 208 */
.navhero-hotspots .nav-hot{
  top:0;
  height:20%;
}
.navhero-hotspots .nav-hot:hover{
  background:rgba(255,255,255,.06);
}
.navhero-hotspots .home{left:2.9%;width:6.4%}
.navhero-hotspots .news{left:9.4%;width:5.1%}
.navhero-hotspots .cod{left:14.7%;width:9.2%}
.navhero-hotspots .lotro{left:24.0%;width:6.4%}
.navhero-hotspots .lol{left:30.4%;width:12.1%}
.navhero-hotspots .rocket{left:42.4%;width:10.7%}
.navhero-hotspots .pc{left:53.1%;width:8.7%}
.navhero-hotspots .console{left:61.7%;width:8.1%}
.navhero-hotspots .hardware{left:69.8%;width:8.4%}
.navhero-hotspots .videos{left:78.1%;width:7.3%}
.navhero-hotspots .community{left:85.4%;width:9.3%}

.navhero-hotspots .hero-hot{
  top:20%;
  height:80%;
}
.navhero-hotspots .hero-hot:hover{
  background:rgba(255,255,255,.035);
}
.navhero-hotspots .hero-cod{left:0;width:21.7%}
.navhero-hotspots .hero-lotro{left:21.7%;width:20%}
.navhero-hotspots .hero-lol{left:41.7%;width:18.2%}
.navhero-hotspots .hero-rocket{left:59.9%;width:20.1%}
.navhero-hotspots .hero-pc{left:80%;width:20%}

@media(max-width:980px){
  .approved-header,
  .approved-navhero{overflow-x:auto}
  .approved-header>img,
  .approved-navhero>img{min-width:980px}
  .header-hotspots,
  .navhero-hotspots{min-width:980px}
}

/* ===== V8 requested corrections ===== */
.english-motto{display:none!important}

/* The approved hero art remains untouched. Hover adds only a premium overlay effect. */
.navhero-hotspots .hero-hot{
  overflow:hidden;
  transition:background .22s ease, box-shadow .22s ease, filter .22s ease;
}
.navhero-hotspots .hero-hot::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.03) 38%,rgba(26,94,214,.15) 72%,rgba(230,28,43,.12) 100%);
  transition:opacity .22s ease;
  pointer-events:none;
}
.navhero-hotspots .hero-hot::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:4px;
  height:3px;
  opacity:0;
  background:linear-gradient(90deg,#e31d2b,#ffffff,#1552b3);
  box-shadow:0 0 12px rgba(34,102,220,.75);
  transition:opacity .22s ease;
  pointer-events:none;
}
.navhero-hotspots .hero-hot:hover{
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 28px rgba(255,255,255,.18), inset 0 -10px 30px rgba(15,61,145,.14);
}
.navhero-hotspots .hero-hot:hover::before,
.navhero-hotspots .hero-hot:hover::after{
  opacity:1;
}

/* ==========================================================
   V10 – precise interactive overlays (visual artwork unchanged)
   ========================================================== */

/* Language: cover the raster letters precisely with live text */
.header-hotspots .lang-hot{
  top:20%; height:30%; width:2.6%;
  z-index:5; overflow:visible;
  font:900 15px/1 Inter,Arial,sans-serif;
  background:rgba(244,247,251,.97)!important;
  box-shadow:none!important;
}
.header-hotspots .lang-hot::after{
  position:absolute; inset:0; display:grid; place-items:center;
}
.header-hotspots .lang-hot.de{left:66.55%}
.header-hotspots .lang-hot.en{left:69.05%}
.header-hotspots .lang-hot.de::after{content:"DE";color:#e31d2b}
.header-hotspots .lang-hot.en::after{content:"EN";color:#174a9a}
.header-hotspots .lang-hot.de:hover::after{color:#174a9a}
.header-hotspots .lang-hot.en:hover::after{color:#e31d2b}
.header-hotspots .lang-hot.active::after{
  text-shadow:0 0 8px currentColor;
  transform:scale(1.08);
}

/* Social icons: no rectangle, only brighten the actual icon area */
.header-hotspots .social-hot{
  top:7%; height:48%; width:4.3%;
  border:0!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important;
  clip-path:polygon(25% 2%,75% 2%,98% 25%,98% 75%,75% 98%,25% 98%,2% 75%,2% 25%);
  transition:backdrop-filter .18s ease, filter .18s ease;
}
.header-hotspots .social-hot:hover{
  background:rgba(255,255,255,.04)!important;
  box-shadow:none!important;
  backdrop-filter:brightness(1.28) saturate(1.35);
  -webkit-backdrop-filter:brightness(1.28) saturate(1.35);
}
.header-hotspots .x{left:72.45%}
.header-hotspots .discord{left:77.30%}
.header-hotspots .whatsapp{left:82.15%}
.header-hotspots .facebook{left:87.05%}
.header-hotspots .youtube{left:91.90%}

/* Navigation: align overlays with the actual rendered labels */
.navhero-hotspots .nav-hot{
  top:0; height:20.2%;
  background:transparent;
  transition:background .16s ease, box-shadow .16s ease;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
}
.navhero-hotspots .nav-hot:hover{
  background:linear-gradient(135deg,rgba(238,29,44,.72),rgba(20,70,150,.42));
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.85),0 0 12px rgba(238,29,44,.35);
}
.navhero-hotspots .home{left:2.9%;width:6.4%}
.navhero-hotspots .news{left:9.35%;width:4.55%}
.navhero-hotspots .cod{left:13.9%;width:8.45%}
.navhero-hotspots .lotro{left:22.35%;width:6.45%}
.navhero-hotspots .lol{left:28.8%;width:11.25%}
.navhero-hotspots .rocket{left:40.05%;width:10.65%}
.navhero-hotspots .pc{left:50.7%;width:8.35%}
.navhero-hotspots .console{left:59.05%;width:7.25%}
.navhero-hotspots .hardware{left:66.3%;width:8.25%}
.navhero-hotspots .videos{left:74.55%;width:6.55%}
.navhero-hotspots .community{left:81.1%;width:8.85%}

/* Hero: hover zones follow the same diagonal cuts as the artwork */
.navhero-hotspots .hero-hot{
  top:20.2%; height:79.8%;
  background:transparent;
  transition:background .18s ease, filter .18s ease;
}
.navhero-hotspots .hero-hot::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.16),rgba(26,94,214,.10) 55%,rgba(230,28,43,.16));
  opacity:0; transition:opacity .18s ease;
}
.navhero-hotspots .hero-hot:hover::before{opacity:1}
.navhero-hotspots .hero-hot:hover{
  box-shadow:inset 0 0 30px rgba(255,255,255,.16);
}
.navhero-hotspots .hero-cod{
  left:0;width:23.45%;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
}
.navhero-hotspots .hero-lotro{
  left:20.63%;width:20.94%;
  clip-path:polygon(13.4% 0,100% 0,86.3% 100%,0 100%);
}
.navhero-hotspots .hero-lol{
  left:38.70%;width:20.94%;
  clip-path:polygon(13.7% 0,100% 0,86.6% 100%,0 100%);
}
.navhero-hotspots .hero-rocket{
  left:56.82%;width:23.93%;
  clip-path:polygon(11.8% 0,100% 0,87.3% 100%,0 100%);
}
.navhero-hotspots .hero-pc{
  left:77.69%;width:22.31%;
  clip-path:polygon(13.7% 0,100% 0,100% 100%,0 100%);
}

/* Replace separately cropped lower icons with the exact approved full strip */
.community-strip{display:none!important}
.community-approved{
  position:relative;
  margin:0 2.4% 12px;
  overflow:hidden;
  border:1px solid #dfe5ee;
  border-radius:10px;
  background:#fff;
  box-shadow:0 3px 13px rgba(11,28,67,.08);
}
.community-approved>img{display:block;width:100%;height:auto}
.community-hotspot{
  position:absolute;top:0;height:100%;width:20%;
  background:transparent;transition:background .18s ease;
}
.community-hotspot:hover{background:rgba(25,82,177,.04)}
.community-hotspot.c1{left:0}
.community-hotspot.c2{left:20%}
.community-hotspot.c3{left:40%}
.community-hotspot.c4{left:60%}
.community-hotspot.c5{left:80%}

@media(max-width:980px){
 .community-approved{overflow-x:auto}
 .community-approved>img{min-width:1200px}
 .community-hotspot{display:none}
}

/* ==========================================================
   V11 cleanup
   ========================================================== */

/* DE / EN: back to the original artwork. No duplicate live text. */
.header-hotspots .lang-hot{
  background:transparent!important;
  box-shadow:none!important;
  text-indent:-9999px;
  overflow:hidden;
}
.header-hotspots .lang-hot::after{content:none!important}
.header-hotspots .lang-hot:hover,
.header-hotspots .lang-hot.active{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Social hover: absolutely no outer box.
   Only a small centered icon overlay brightens on hover. */
.header-hotspots .social-hot{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  clip-path:none!important;
  overflow:visible;
}
.header-hotspots .social-hot::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:22px; height:22px;
  transform:translate(-50%,-50%);
  background:center/contain no-repeat;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.9));
  transition:opacity .16s ease, transform .16s ease;
}
.header-hotspots .social-hot:hover{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.header-hotspots .social-hot:hover::after{
  opacity:.48;
  transform:translate(-50%,-50%) scale(1.08);
}
.header-hotspots .x::after{background-image:url("https://cdn.simpleicons.org/x/ffffff")}
.header-hotspots .discord::after{background-image:url("https://cdn.simpleicons.org/discord/ffffff")}
.header-hotspots .whatsapp::after{background-image:url("https://cdn.simpleicons.org/whatsapp/ffffff")}
.header-hotspots .facebook::after{background-image:url("https://cdn.simpleicons.org/facebook/ffffff")}
.header-hotspots .youtube::after{background-image:url("https://cdn.simpleicons.org/youtube/ffffff")}

/* Navigation: only the selected tab becomes the strong diagonal red state. */
.navhero-hotspots .nav-hot{
  background:transparent!important;
  box-shadow:none!important;
  transition:background .16s ease, box-shadow .16s ease;
}
.navhero-hotspots .nav-hot:hover{
  background:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.65)!important;
}
.navhero-hotspots .nav-hot.active{
  background:linear-gradient(135deg,rgba(245,36,50,.98),rgba(188,8,22,.96))!important;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.72),0 0 12px rgba(229,29,43,.30)!important;
  clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
}
/* Home is already red in the underlying artwork. When another tab is active,
   this dark overlay visually returns it toward the normal navy state. */
.navhero-hotspots.has-active-nonhome .nav-hot.home::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(3,22,61,.82);
  clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
}

/* Hero hover remains diagonal and clean, with no fake rectangular border. */
.navhero-hotspots .hero-hot{
  box-shadow:none!important;
}
.navhero-hotspots .hero-hot:hover{
  box-shadow:none!important;
}
.navhero-hotspots .hero-hot::after{display:none!important}
.navhero-hotspots .hero-hot::before{
  background:linear-gradient(120deg,rgba(255,255,255,.20),rgba(38,108,230,.10) 52%,rgba(231,29,43,.16))!important;
}

/* Community strip: no overlap with video area */
.community-approved{clear:both;margin-top:0!important}
.community-approved>img{display:block}