/* Global styles */
:root{
  --bg-black:#000; --text-light:#f5f5f5;
  --accent-yellow:#ffd400; --accent-green:#1f9d1f; --accent-blue:#1e6ee6; --accent-grey:#666;
  --card-bg:#111; --card-border:#333;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg-black);
  color:var(--text-light)
}

.container{
  max-width:1000px;
  margin:0 auto;
  padding:16px
}

.header{
  text-align:center;
  margin:12px auto 20px
}

.header h1{
  font-size:1.9rem;
  margin:8px 0 0
}

/* Optional subtitle under the main title on Index page */
.subtitle{
  margin-top:6px;
  color:#bbbbbb;
  font-size:1.05rem
}

@media (max-width:520px){
  .subtitle{font-size:1rem}
}

/* Logo */
.logo{
  display:block;
  margin:0 auto 8px;
  height:180px;
  width:auto;
}

/* Mobile logo size override */
@media (max-width:520px){
  .logo{
    width:65vw;
    height:auto;
  }
}

.rounds{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px
}

.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.4)
}

.card-title{
  font-size:1.25rem;
  text-align:center;
  margin:6px 0 10px;
  font-weight:bold
}

.card .q-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px
}

.q-number{
  font-weight:bold;
  color:var(--accent-yellow);
  margin-right:8px;
  font-size:1.2rem
}

/* Larger readable content text (site-wide) */
.q-text{
  font-size:1.8rem;
  line-height:1.35
}

/* Bold only on Questions pages */
body.questions .q-text{
  font-size:2.0rem;
  font-weight:700
}

.answer-text{
  color:var(--accent-yellow);
  font-weight:bold;
  font-size:1.4rem
}

.controls,.footer-nav{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap
}

.footer{
  position:sticky;
  bottom:0;
  background:rgba(0,0,0,.85);
  padding:10px 6px;
  backdrop-filter:blur(6px)
}

button,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  color:#111;
  background:#e0e0e0;
  font-weight:700;
  font-size:1rem;
  white-space:nowrap
}

.btn-secondary{background:#cfcfcf;color:#111}
.btn-yellow{background:var(--accent-yellow);color:#111}
.btn-green{background:var(--accent-green);color:#fff}
.btn-blue{background:var(--accent-blue);color:#fff}
.btn-grey{background:var(--accent-grey);color:#fff}
.btn-dark{background:#222;color:#fff;border:1px solid #444}

.btn:focus{
  outline:2px solid var(--accent-yellow);
  outline-offset:2px
}

.timer-bar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.95);
  border-bottom:1px solid var(--card-border);
  padding:10px 12px
}

.timer-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}

.timer-display{
  font-weight:900;
  font-size:2.2rem;
  color:var(--accent-yellow);
  min-width:120px;
  text-align:center;
  letter-spacing:1px
}

.timer-btn{
  min-width:110px;
  text-align:center
}

.timer-input{
  width:120px;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid #555;
  background:#111;
  color:#fff
}

@keyframes flashOnce{
  0%,100%{opacity:1}
  50%{opacity:0}
}

.flash-once{
  animation:flashOnce 1s 1 linear
}

/* Answers page background black */
body.answers{
  background:var(--bg-black);
  color:var(--text-light)
}

.q-body{margin-top:6px}
.hidden{display:none}

/* Mobile overrides */
@media (max-width:520px){
  .q-text{font-size:1.3rem}
  .answer-text{font-size:1.2rem}
  .timer-display{font-size:1.9rem;min-width:100px}
  button,.btn{padding:9px 10px;font-size:.95rem}
}