/* === FUTURISTIC DARK THEME UNIVERSAL STYLE === */

/* Import vlastního fontu */
@font-face {
    font-family: 'DytSans';
    src: url('./dyt-sans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    letter-spacing: -1px;
}

#joystick{
  left:10px;
  bottom:10px;
  width: 100px;
  height: 100px;
}

/* Globální styl */
body {
    background-color: #0b0f1a;
    color: #b8d7ff;
    font-family: 'DytSans', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

/* === Základní styl pro všechny interaktivní prvky === */
button, label, input, a, span {
    position: relative;
    background: linear-gradient(145deg, #0e1625, #101c33);
    color: #a7d4ff;
    border: 1px solid #3db4ff;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 0 10px rgba(61, 180, 255, 0.4);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    user-select: none;
    transform-origin: center center;
    flex-direction: column;
    width: auto;
}

/* Hover efekt (funguje i na labely a divy s class) */
button:hover, label:hover, a:hover, span:hover {
    color: #e3f4ff;
    box-shadow: 0 0 20px rgba(61, 180, 255, 0.8), 0 0 40px rgba(61, 180, 255, 0.4);
    border-color: #63c6ff;
    --scale: scale(1.05);
}

*{
  --scale:scale(1);
  --translate:translate(0%,0%);
  --rotate:rotate(0deg);
  transform:var(--translate) var(--scale) var(--rotate);
  font-family: 'DytSans';
  letter-spacing: -1px;
}

/* === Velikosti === */
.small {
    font-size: 0.8rem;
    padding: 6px 14px;
}

.medium {
    font-size: 1rem;
    padding: 10px 22px;
}

.large {
    font-size: 1.2rem;
    padding: 14px 32px;
}

.extreme {
  font-size: 2rem;
  padding: 20px 48px;
}

/* === Pozice === */
.lt { /* left top */
    position: absolute;
    top: 5%;
    left: 5%;
}

.l { /* left center */
    position: absolute;
    top: 50%;
    left: 5%;
    --translate: translateY(-50%);
}

.lb { /* left bottom */
    position: absolute;
    bottom: 5%;
    left: 5%;
}

.t {
  position:absolute;
  top:5%;
  left:50%;
  --translate: translateX(-50%);
}

.b {
  position:absolute;
  bottom:5%;
  left:50%;
  --translate:translateX(-50%);
}

.c { /* center */
    position: absolute;
    top: 50%;
    left: 50%;
    --translate: translate(-50%, -50%);
}

.rt { /* right top */
    position: absolute;
    top: 5%;
    right: 5%;
}

.r { /* right center */
    position: absolute;
    top: 50%;
    right: 5%;
    --translate: translateY(-50%);
}

.rb { /* right bottom */
    position: absolute;
    bottom: 5%;
    right: 5%;
}

div{
  flex-direction: column;
  display:flex;
  justify-content: center;
  align-items: center;
}

body > div{
  position:absolute;
  width:100svw;
  height:100svh;
  left:0px;
  right:0px;
}

/* === Glow efekt === */
@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(61, 180, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(61, 180, 255, 0.9);
    }
    100% {
        box-shadow: 0 0 10px rgba(61, 180, 255, 0.4);
    }
}

.glow {
    animation: pulse 2.5s infinite;
}

/* === Disable background for labels if needed === */
label.transparent {
    background: none;
    border: none;
    box-shadow: none;
}