body{margin:0;font-family:'Segoe UI',Tahoma,sans-serif;background:#0d0d0d;color:#eee;
     display:flex;align-items:center;justify-content:center;min-height:100vh;}
.card{background:#1b1b1b;padding:2rem 2.5rem;border-radius:18px;text-align:center;
      width:100%;max-width:400px;box-sizing:border-box;margin:1rem;
      box-shadow:0 8px 30px rgba(0,0,0,.6);position:relative;}
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.logo{height:80px;margin-bottom:0;}
.user-box{display:flex;gap:.4rem;align-items:center;}
.user-box span{font-size:.85rem;font-weight:bold;}
.user-box button{padding:0 .5rem;border-radius:50%;cursor:pointer;background:#333;color:#ffcc33;border:none;}
form{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;}
.phone-row{display:flex;align-items:center;gap:.5rem;}
.prefix{flex:1;display:flex;align-items:center;background:#333;border-radius:10px;overflow:hidden;}
.prefix select{
  background:#333;
  padding:.75rem 1rem;
  color:#ffcc33;
  font-weight:600;
  font-size:1rem;
  border:none;
  outline:none;
}
.prefix input{flex:1;min-width:0;padding:.75rem;border:none;background:#333;color:#eee;font-size:1rem;outline:none;}
#configBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  padding:0;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:#222;
  color:#ffcc33;
  border:none;
  cursor:pointer;
  box-shadow:0 0 4px #ffcc33;
}
#configBtn:hover{background:#222;box-shadow:0 0 6px #ffcc33;}
#termsBtn{padding:0 .5rem;border-radius:50%;cursor:pointer;background:#333;color:#ffcc33;border:none;}
#termsBtn:hover{background:#222;}
button{padding:.8rem;background:#ffcc33;color:#000;font-weight:bold;border:none;
       border-radius:30px;cursor:pointer;transition:background .3s;}
button:hover{background:#f5b700;}
button:disabled{background:#555;color:#222;cursor:not-allowed;}
label{font-size:.85rem;display:flex;gap:.5rem;align-items:flex-start;text-align:left;}
#waForm button[type="submit"]{font-size:.85rem;width:100%;background:#28a745;color:#fff;animation:pulse 2s infinite;}
#msg{margin-top:1rem;font-size:.9rem;min-height:1.2rem;}
#adminMsg{font-size:.85rem;color:#ff3333;min-height:1.2rem;}
#status{margin-top:.3rem;font-size:.75rem;color:#888;font-family:monospace;}
#cooldown{font-size:.85rem;color:#ffcc33;}
#debug{background:#000;color:#00ff5a;font-family:monospace;font-size:.8rem;
       padding:1rem;margin-top:1.2rem;max-height:260px;overflow-y:auto;
       white-space:pre-wrap;word-break:break-all;border-radius:6px;}
.note{font-size:.75rem;color:#888;margin-top:1rem;}
.hidden{display:none;}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  z-index:1000;
  padding:2rem 0;
}
.overlay.hidden{display:none;}
.overlay-box{
  background:#1b1b1b;
  padding:2rem;
  border-radius:12px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:100%;
  max-width:400px;
  box-sizing:border-box;
  margin:0 1rem;
}
.overlay-box input{font-size:1rem;}
.overlay-actions{display:flex;gap:.5rem;justify-content:space-between;}
.overlay-actions button{flex:1;}
#adminPanel{display:flex;flex-direction:column;gap:1rem;}
#adminPanel fieldset{border:1px solid #333;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;}
#adminPanel legend{padding:0 .5rem;color:#ffcc33;font-weight:bold;}
#adminPanel label{display:flex;justify-content:space-between;align-items:center;}
#adminPanel input{width:5rem;}
#adminLogs{
  max-height:200px;
  overflow-y:auto;
  font-size:0.55rem;
  text-align:left;
  background:#000;
  color:#0f0;
  font-family:monospace;
  padding:0.5rem;
  border-radius:6px;
  white-space:pre-wrap;
  width:100%;
  box-sizing:border-box;
}
.admin-actions{
  display:flex;
  gap:.5rem;
  justify-content:space-between;
  flex-wrap:wrap;
}
.admin-actions button{flex:1 1 auto;}
.preview{max-width:100%;max-height:150px;object-fit:contain;border-radius:6px;}

.event-selector{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;
  gap:.5rem;
}
.event-selector input{display:none;}
.event-selector label{
  padding:0;
  cursor:pointer;
  display:flex;
}
.event-selector label span{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#333;
  min-height:3.2rem;
  border-radius:20px;
  border:2px solid #ffcc33;
  color:#ffcc33;
  transition:background .3s, box-shadow .3s;
}
.event-selector input:checked + span{
  background:#ffcc33;
  color:#000;
  font-weight:bold;
  box-shadow:0 0 6px #ffcc33;
}


.promo{text-align:left;margin:0;font-size:.75rem;}
.contact-links{display:flex;justify-content:flex-start;gap:.5rem;margin-top:.5rem;}
.contact-links a{
  color:#000;
  background:#ffcc33;
  text-decoration:none;
  font-weight:bold;
  padding:.4rem .8rem;
  border-radius:30px;
  font-size:.85rem;
  transition:background .3s;
}
.contact-links .icon-btn{
  width:2.2rem;
  height:2.2rem;
  padding:0;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}
.contact-links a:hover{background:#f5b700;}

.promo-box{
  margin-top:.8rem;
  padding:1rem;
  background:#222;
  border:1px solid #333;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:1rem;
}

.promo-logo{height:60px;}

.promo-content{flex:1;display:flex;flex-direction:column;}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(40,167,69,.7);}
  70%{box-shadow:0 0 0 10px rgba(40,167,69,0);}
  100%{box-shadow:0 0 0 0 rgba(40,167,69,0);}
}

#eventBox.error{
  outline:2px solid #ff3333;
  border-radius:24px;
  padding:.25rem;
}

.admin-btn{
  position:fixed;
  right:.5rem;
  bottom:.5rem;
  width:2rem;
  height:2rem;
  font-size:1rem;
  border-radius:50%;
  background:#333;
  color:#ffcc33;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:900;
}
.log-table{width:100%;border-collapse:collapse;font-size:0.55rem;margin-top:1rem;}
.log-table th,.log-table td{border:1px solid #444;padding:0.25rem;word-break:break-all;}
.log-table th{background:#333;color:#ffcc33;}
.log-thumb{max-width:40px;height:auto;}
.log-table pre{margin:0;white-space:pre-wrap;word-break:break-all;font-size:0.55rem;}
.time-cell{color:#6f6;font-weight:bold;}
.time-cell.record{background:#606;color:#fff;}
.pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;}
.pagination button{padding:.3rem .6rem;font-size:.8rem;}
.list-card{max-width:1000px;}
.close-list{text-align:center;margin-top:1rem;}
.close-list button{padding:.3rem .6rem;font-size:.8rem;}

@media(max-width:600px){
  .card.list-card{padding:1rem;margin:.5rem;}
  .log-table{font-size:0.6rem;}
  .log-table th,.log-table td{padding:0.2rem;}
  .log-thumb{max-width:32px;}
}

@media(min-width:800px){
  body{font-size:1.125rem;}
  .card{max-width:500px;}
  .overlay-box{max-width:500px;}
  .logo{height:100px;}
  .promo-logo{height:80px;}
}
.game-btn{
  background:#28a745;
  color:#000;
  font-weight:bold;
  font-size:.8rem;
  padding:.4rem .8rem;
  border:none;
  border-radius:30px;
  cursor:pointer;
  animation:pulse 2s infinite;
}
.game-btn:hover{background:#35c85a;}
.game-box{cursor:pointer;text-align:center;}
#gameOverlay{align-items:center;padding:0;}
#gameOverlay .game-box{
  width:100%;
  max-width:none;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  transition:background .2s;
  background:none;
  border-radius:0;
  clip-path:inset(0 0 0 0);
}
#gameOverlay.ready .game-box{animation:pulse 1.2s infinite;}
#rankTable{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:1rem;}
#rankTable th,#rankTable td{border:1px solid #444;padding:0.25rem;}
#rankTable th{background:#333;color:#ffcc33;}
.prize-note{font-size:.75rem;margin-top:.5rem;}
#gameOverlay.waiting{animation:colorCycle 1s linear infinite;}
@keyframes colorCycle{0%{background:#080;}33%{background:#880;}66%{background:#088;}100%{background:#080;}}
#gameOverlay.flash{
  background:#fff !important;
  animation:whiteFlash .15s;
}
@keyframes whiteFlash{from{opacity:1;}to{opacity:1;}}
#gameOverlay.matrix .game-box{animation:matrixFade .6s steps(20) forwards;}
@keyframes matrixFade{from{clip-path:inset(0 0 0 0);}to{clip-path:inset(0 0 100% 0);opacity:0;}}
.round-banner{
  font-size:2.5rem;
  font-weight:bold;
  color:#ffcc33;
  text-shadow:2px 2px #000;
  animation:zoomIn .6s ease-out;
}
@keyframes zoomIn{from{transform:scale(0.3);opacity:0;}to{transform:scale(1);opacity:1;}}

#rankOverlay.show .overlay-box{animation:zoomIn .6s ease-out;}
#finalOverlay.show .overlay-box{animation:zoomIn .6s ease-out;}
.big-time{font-size:2rem;font-weight:bold;color:#ffcc33;}
.score-box{display:flex;flex-direction:column;gap:.25rem;margin:.5rem 0;}
.score-line{font-size:1.25rem;font-weight:bold;color:#ffcc33;}