/* CSS Reset and Performance Optimizations */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{height:100%;margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#2d3748;min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Remove duplicate body styles - already defined above */
.container{
  max-width:900px;
  margin:0 auto;
  padding:32px 24px;
}
header h1{
  color:#ffffff;
  letter-spacing:.5px;
  margin:0 0 12px;
  font-size:2.5rem;
  font-weight:700;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}
header .sub{
  color:#e2e8f0;
  margin:0 0 24px;
  font-size:1.1rem;
  line-height:1.6;
}
.card{
  background:#ffffff;
  border-radius:20px;
  padding:32px;
  box-shadow:0 12px 32px rgba(0,0,0,.15);
  margin:20px 0;
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
}
.hidden{display:none}
.statusbar{
  display:flex;align-items:center;gap:16px;color:#ffffff;
  margin-bottom:24px;
}
.statusbar .bar{flex:1;height:12px;background:rgba(255,255,255,0.2);border-radius:999px;overflow:hidden}
#barFill{height:100%;width:0;background:linear-gradient(90deg, #4ade80, #22c55e);transition:width .4s ease;border-radius:999px}
#score{font-weight:700;font-size:1.1rem;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
.sentence{
  font-size:1.6rem;
  padding:24px;
  background:linear-gradient(135deg, #f8fafc, #e2e8f0);
  border:2px solid #e2e8f0;
  border-radius:16px;
  margin-bottom:24px;
  font-weight:500;
  line-height:1.5;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.options{display:grid;gap:16px}
.option{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;border:2px solid #e5e7eb;border-radius:16px;background:#fff;cursor:pointer;
  transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease,background 0.2s ease;
  font-size:1.1rem;
  line-height:1.5;
  position:relative;
  will-change:transform;
}
.option:nth-child(1){
  border-color:#3b82f6;
  background:linear-gradient(135deg, #eff6ff, #dbeafe);
}
.option:nth-child(2){
  border-color:#8b5cf6;
  background:linear-gradient(135deg, #f3e8ff, #e9d5ff);
}
.option:nth-child(3){
  border-color:#06b6d4;
  background:linear-gradient(135deg, #ecfeff, #cffafe);
}
.option:nth-child(4){
  border-color:#f59e0b;
  background:linear-gradient(135deg, #fffbeb, #fef3c7);
}
.option:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.option:nth-child(1):hover{
  border-color:#2563eb;
  background:linear-gradient(135deg, #dbeafe, #bfdbfe);
}
.option:nth-child(2):hover{
  border-color:#7c3aed;
  background:linear-gradient(135deg, #e9d5ff, #ddd6fe);
}
.option:nth-child(3):hover{
  border-color:#0891b2;
  background:linear-gradient(135deg, #cffafe, #a5f3fc);
}
.option:nth-child(4):hover{
  border-color:#d97706;
  background:linear-gradient(135deg, #fef3c7, #fde68a);
}
.option input{margin-top:6px;transform:scale(1.2)}
.option.correct{
  border-color:#22c55e !important;
  background:linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  animation:correctPulse 0.6s ease;
}
.option.wrong{
  border-color:#ef4444 !important;
  background:linear-gradient(135deg, #fef2f2, #fee2e2) !important;
  animation:wrongShake 0.6s ease;
}
@keyframes correctPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}
@keyframes wrongShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.feedback{
  min-height:32px;margin-top:16px;font-weight:600;
  font-size:1.1rem;
  padding:12px 16px;
  border-radius:12px;
  background:#f8fafc;
  border-left:4px solid #3b82f6;
}
.actions{display:flex;gap:16px;justify-content:center;margin-top:24px}
.countdown{
  display:flex;align-items:center;gap:8px;
  padding:12px 20px;
  background:linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border:2px solid #0ea5e9;
  border-radius:12px;
  color:#0c4a6e;
  font-weight:600;
  font-size:1rem;
}
.btn{
  padding:14px 24px;border-radius:12px;border:2px solid #cbd5e1;background:#e2e8f0;cursor:pointer;font-weight:600;
  font-size:1rem;
  transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
  will-change:transform;
}
.btn:hover:not([disabled]){
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{
  background:linear-gradient(135deg, #3b82f6, #2563eb);
  border-color:#2563eb;color:#fff;
  box-shadow:0 4px 12px rgba(59,130,246,0.3);
}
.btn.primary:hover:not([disabled]){
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow:0 6px 20px rgba(59,130,246,0.4);
}
.inline{display:inline-flex;align-items:center;gap:12px;margin-top:16px;color:#ffffff;font-size:1.1rem}
.inline select{
  padding:12px 16px;border-radius:12px;border:3px solid #3b82f6;
  background:linear-gradient(135deg, #ffffff, #f8fafc);color:#1e40af;font-weight:700;
  font-size:1.1rem;cursor:pointer;transition:all 0.3s ease;
  box-shadow:0 4px 12px rgba(59,130,246,0.2);
  min-width:120px;
}
.inline select:hover{
  border-color:#2563eb;
  background:linear-gradient(135deg, #f8fafc, #e2e8f0);
  box-shadow:0 6px 16px rgba(59,130,246,0.3);
  transform:translateY(-2px);
}
.inline select:focus{
  outline:none;
  border-color:#1d4ed8;
  box-shadow:0 0 0 4px rgba(59,130,246,0.1);
}
footer{color:rgba(255,255,255,0.8);text-align:center;margin-top:32px;font-size:0.9rem}
small code{background:rgba(0,0,0,0.2);color:#ffffff;padding:4px 8px;border-radius:6px;font-family:monospace}

/* Mobile-first responsive design */
/* Base styles are mobile-first */

/* Small mobile devices (320px and up) */
@media (min-width: 320px) {
  .container{padding:16px 12px}
  header h1{font-size:1.8rem}
  .card{padding:20px}
  .sentence{font-size:1.2rem;padding:16px}
  .option{padding:14px;font-size:0.95rem;min-height:60px}
  .btn{padding:12px 16px;font-size:0.9rem}
  .countdown{font-size:0.9rem;padding:10px 16px}
  .inline{flex-direction:column;align-items:flex-start;gap:8px}
  .inline select{min-width:100%;margin-top:8px}
}

/* Large mobile devices (480px and up) */
@media (min-width: 480px) {
  .container{padding:20px 16px}
  header h1{font-size:2.2rem}
  .card{padding:24px}
  .sentence{font-size:1.4rem;padding:20px}
  .option{padding:16px;font-size:1rem;min-height:70px}
  .btn{padding:14px 20px;font-size:1rem}
  .countdown{font-size:1rem;padding:12px 18px}
  .inline{flex-direction:row;align-items:center;gap:12px}
  .inline select{min-width:120px;margin-top:0}
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
  .container{padding:24px 20px}
  header h1{font-size:2.5rem}
  .card{padding:28px}
  .sentence{font-size:1.5rem;padding:22px}
  .option{padding:18px;font-size:1.05rem;min-height:80px}
  .btn{padding:14px 24px;font-size:1rem}
  .countdown{font-size:1rem;padding:12px 20px}
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .container{padding:32px 24px;max-width:1000px}
  header h1{font-size:2.8rem}
  .card{padding:32px}
  .sentence{font-size:1.6rem;padding:24px}
  .option{padding:20px;font-size:1.1rem;min-height:90px}
  .btn{padding:14px 24px;font-size:1rem}
  .countdown{font-size:1rem;padding:12px 20px}
}

/* Large desktop (1200px and up) */
@media (min-width: 1200px) {
  .container{max-width:1200px}
  .options{grid-template-columns:repeat(2,1fr);gap:20px}
  .option{min-height:100px}
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .option{min-height:80px;padding:20px}
  .btn{min-height:48px;padding:16px 24px}
  .inline select{min-height:48px;padding:14px 18px}
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card{box-shadow:0 8px 32px rgba(0,0,0,.12)}
  .option:hover{box-shadow:0 12px 24px rgba(0,0,0,0.12)}
}