/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell;
  color:#e9ecf1;
  display:flex;
  justify-content:center;   /* centru orizontal */
  align-items:center;       /* centru vertical */
  text-align:center;
  background:#000;
  overflow:hidden;
}

/* Canvas bg */
#bg{
  position:fixed;inset:0;z-index:-1;width:100%;height:100%;
  pointer-events:none;background:#000;
}

/* Container */
.app{width:min(900px,95vw); padding:16px}

/* Panel pe mijloc */
.panel.cloud{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(120%);
  border-radius:30px;
  padding:24px;
  box-shadow:0 20px 40px rgba(0,0,0,.45), inset 0 0 60px rgba(255,255,255,.22);
  animation:float 6s ease-in-out infinite;
  margin-inline:auto;
}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* Header */
.header h1{margin:0 0 10px;font-size:clamp(24px,4vw,36px)}
.hint{opacity:.85;margin:0 0 20px}

/* Joke text */
.joke{
  font-size:clamp(16px,2vw,20px);
  padding:16px;
  border-radius:14px;
  background:rgba(0,0,0,.42);
  min-height:72px;
  margin-bottom:16px;
}

/* Controls flex + wrap */
.controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
button,.chk,select,.rate{min-height:44px}

/* Buttons */
button{
  padding:10px 16px;
  border:1px solid #3b47a1;
  background:#24308a;
  color:#fff;border-radius:10px;cursor:pointer;
}
button.primary{background:#3651ff;border-color:#5f77ff;animation:pulse 2.5s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,119,255,.7)}
  70%{box-shadow:0 0 0 20px rgba(95,119,255,0)}
  100%{box-shadow:0 0 0 0 rgba(95,119,255,0)}
}
button:disabled{opacity:.55;cursor:not-allowed}

/* Footer */
.footer{opacity:.8;margin-top:20px;font-size:14px}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .panel.cloud{animation:none}
  button.primary{animation:none}
}