/* BLOOKET FINAL UI TWEAKS */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

* {
  font-family: 'Fredoka', sans-serif !important;
}

/* BACKGROUND */
body {
  background: linear-gradient(135deg, #3cc6d8, #4aa3ff) !important;
}

/* SIDEBAR */
.sidebar, .menu, .left-panel {
  background: linear-gradient(180deg, #8e44ad, #9b59b6) !important;
  border-radius: 0 20px 20px 0;
}

/* BUTTONS DEFAULT */
button {
  background: #4cd964 !important;
  border: none !important;
  border-radius: 14px !important;
  color: white !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 0 #2ea44f !important;
  transition: 0.1s;
}

/* GENERATE BUTTON - BLOOKET STYLE */
button.generate, .generate-btn, #generate {
  background: #ff9f43 !important;
  border-radius: 16px !important;
  padding: 14px 28px !important;
  font-size: 18px !important;
  box-shadow: 0 6px 0 #e67e22 !important;
}

button.generate:hover, .generate-btn:hover, #generate:hover {
  transform: scale(1.05);
}

button.generate:active, .generate-btn:active, #generate:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #e67e22 !important;
}

/* CARDS */
.card, .box, .item {
  background: rgba(0,0,0,0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 0 rgba(0,0,0,0.25) !important;
  transition: 0.2s;
}

/* TEXT */
h1, h2, h3 {
  color: white !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

/* INPUT FIELD (USERNAME BOX) */
input {
  border-radius: 14px !important;
  border: none !important;
  padding: 14px !important;
  background: rgba(0,0,0,0.4) !important;
  color: white !important;
  font-size: 16px !important;
  box-shadow: inset 0 3px 0 rgba(0,0,0,0.3);
}

input::placeholder {
  color: rgba(255,255,255,0.7);
}

/* PRICE */
.price, .token {
  background: #3498db;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  font-weight: bold;
}


/* HOVER ANIMATION - BLOOKET */
.card, .box, .item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover, .box:hover, .item:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 0 rgba(0,0,0,0.3) !important;
}

.card:active, .box:active, .item:active {
  transform: scale(0.98);
}
:root{

--blue:#4b8cff;
--cyan:#57d5ff;
--bg:#071422;
--card:rgba(18,29,46,.82);

}

body{

background:
radial-gradient(circle at top,#17345f 0%,#08131f 45%,#050b13 100%);

font-family:'Poppins',sans-serif;

overflow-x:hidden;

}

.hero-wrapper{

position:relative;

padding-top:80px;

padding-bottom:70px;

}

.hero-background{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

}

.hero-glow{

position:absolute;

width:420px;

height:420px;

border-radius:50%;

filter:blur(120px);

opacity:.35;

}

.hero-glow-left{

left:-120px;

top:-80px;

background:#3d7cff;

}

.hero-glow-right{

right:-100px;

top:150px;

background:#42d9ff;

}

.hero-top{

text-align:center;

margin-bottom:60px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.1);

border-radius:50px;

backdrop-filter:blur(20px);

margin-bottom:25px;

}

.hero-title{

font-size:72px;

font-weight:900;

line-height:1;

margin-bottom:25px;

}

.hero-title span{

background:linear-gradient(90deg,#55d7ff,#6c7cff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-subtitle{

font-size:22px;

opacity:.8;

max-width:820px;

margin:auto;

}

.generator-box{

background:rgba(15,25,42,.85);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:35px;

box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.generator-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.generator-logo{

width:90px;

}

.generator-status{

display:inline-flex;

gap:8px;

color:#62ff8d;

font-weight:700;

margin-bottom:10px;

}

.generator-body{

margin-top:20px;

}
.premium-card{

background:rgba(18,28,45,.82);

backdrop-filter:blur(24px);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:28px;

margin-bottom:25px;

box-shadow:0 20px 60px rgba(0,0,0,.35);

transition:.35s;

}

.premium-card:hover{

transform:translateY(-6px);

box-shadow:0 35px 80px rgba(0,0,0,.45);

}

.premium-card h3{

font-size:24px;

margin-bottom:25px;

display:flex;

align-items:center;

gap:12px;

}

.status-line{

display:flex;

justify-content:space-between;

padding:15px 0;

border-bottom:1px solid rgba(255,255,255,.05);

}

.online{

color:#49ff91;

}

.feature-list{

padding:0;

margin:0;

list-style:none;

}

.feature-list li{

padding:12px 0;

}

.feature-list i{

color:#57d5ff;

margin-right:10px;

}

.rating-circle{

width:110px;

height:110px;

border-radius:50%;

background:linear-gradient(135deg,#4b8cff,#57d5ff);

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

font-weight:900;

margin:auto;

margin-bottom:20px;

color:#fff;

box-shadow:0 0 40px rgba(87,213,255,.35);

}

.vote-card{

text-align:center;

}