@tailwind base;
@tailwind components;
@tailwind utilities;

/* background */

body{
@apply flex justify-center items-center min-h-screen text-white;

background:
linear-gradient(rgba(10,10,20,0.75), rgba(10,10,20,0.75)),
url("/assets/bg/social2.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

font-family:Arial, sans-serif;
}

.vote-wrapper{
position:relative;
width:220px;
height:220px;
}

.vote-percent{
position:absolute;
top:48%;
left:50%;
transform:translate(-50%,-50%);
font-size:32px;
font-weight:bold;
color:#7fede1;
}

.vote-value{
position:absolute;
bottom:38px;
left:50%;
transform:translateX(-50%);
font-size:18px;
color:#a4efe4;
}

.vote-label{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
font-size:14px;
color:#7fede1;
}

.menu-session-box{
display:flex;
flex-direction:column;
gap:6px;
font-size:13px;
}

.session-title{
color:#7fede1;
font-weight:bold;
margin-bottom:6px;
}

.logout-btn{
margin-top:8px;
background:#7fede1;
color:black;
padding:6px;
border-radius:6px;
cursor:pointer;
}

.menu-text{
transition: opacity .3s, transform .3s;
}

.sidebar-collapsed .menu-text{
opacity:0;
transform:translateX(-10px);
}

/* default */
#logoutBtn {
  display: none;
}

/* wenn session existiert */
.session #openLogin {
  display: none;
}

.session #logoutBtn {
  display: flex;
}

#menuSession {
  display: none;
}

html.session #menuSession {
  display: flex;
}

html.session #sidebarLogo {
  display: none;
}

#sessiondesc{
opacity:0;
}

.sidebar-open #sessiondesc{
opacity:1;
}

/* Scrollbar nur für Language Menü */

#langMenu::-webkit-scrollbar {
  width: 4px;
}

#langMenu::-webkit-scrollbar-track {
  background: transparent;
}

#langMenu::-webkit-scrollbar-thumb {
  background: #22d3ee;
  border-radius: 10px;
}

#langMenu::-webkit-scrollbar-thumb:hover {
  background: #22d3ee;
}

@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/orbitron/Orbitron-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/orbitron/Orbitron-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/orbitron/Orbitron-Bold.ttf") format("truetype");
  font-weight: 700;
}

/* INTER UI */

@font-face {
  font-family: "InterUI";
  src: url("/assets/fonts/inter-ui/Inter-UI-Regular.otf") format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "InterUI";
  src: url("/assets/fonts/inter-ui/Inter-UI-Medium.otf") format("opentype");
  font-weight: 500;
}

@font-face {
  font-family: "InterUI";
  src: url("/assets/fonts/inter-ui/Inter-UI-Bold.otf") format("opentype");
  font-weight: 700;
}

@font-face {
  font-family: "InterUI";
  src: url("/assets/fonts/inter-ui/Inter-UI-Black.otf") format("opentype");
  font-weight: 900;
}

.rankTab.active{
background: rgba(34,211,238,0.15);
border-color: #22d3ee;
color:#22d3ee;
}

/* Animation für die Punkte in der SVG */
.map-marker-dot {
    cursor: pointer;
    filter: drop-shadow(0 0 8px #22d3ee); /* Der Glow-Effekt */
    transition: all 0.3s ease;
    animation: mapPulse 2s infinite ease-in-out;
}

@keyframes mapPulse {
    0% { r: 3; opacity: 0.6; }
    50% { r: 5; opacity: 1; }
    100% { r: 3; opacity: 0.6; }
}

.map-marker-dot:hover {
    r: 8;
    filter: drop-shadow(0 0 15px #ffffff);
}

#worldMapSvg {
    pointer-events: all; /* Stellt sicher, dass das Objekt Events annimmt */
    transition: transform 0.1s ease-out; /* Macht den Zoom geschmeidig */
}

#worldMapSvg {
  /* Wir entfernen das feste scale(2) aus dem CSS-Fluss */
  transition: transform 0.1s ease-out;
  transform-origin: center center;
  /* WICHTIG: Damit das SVG nicht beschnitten wird, wenn es zoomt */
  max-width: none !important;
  max-height: none !important;
}

#matrixCanvas {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 600px;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
    /* Optional: Ein leichter Fade-Effekt an den Rändern oben/unten */
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

/* Sidebar Übergänge */
#sidebar {
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

#sidebar .menu-text {
  transition: opacity 0.1s ease-out;  /* sehr schnell (100ms) */
}

/* Session Text */
#sessiondesc {
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Overlay für Mobile */
#overlay {
  transition: opacity 0.3s ease-in-out;
}

/* Headerbar fixierte Höhe */
header, .header-bar, [class*="top-0 left-0 z-50"] {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

/* Alle Menüpunkte haben die gleiche Breite */
.menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Aktiver Menüpunkt darf nicht breiter sein */
.menu-item.bg-cyan-500\/20 {
  width: 100%;
}