:root{
  --brand-primary:#1579ff;
  --brand-accent:#ffca3a;
  --brand-accent-2:#8ac926;
  --brand-accent-3:#ff595e;
  --surface:#0f172a;
  --panel:#111827;
  --text:#ffffff;
  --muted:#cbd5e1;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--surface);color:var(--text);}

/* Language switcher styles */
.language-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 1000;
  background: var(--panel);
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.flag-btn {
  width: 45px;
  height: 35px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  opacity: 0.8;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif;
  background: transparent;
}


.flag-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  opacity: 1;
}

.flag-btn.active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--brand-primary);
  transform: scale(1.05);
}

.brand{display:grid;gap:6px;place-items:center;padding:14px 0;}
.brand__logo{width:72px;height:72px;border-radius:50%}
.brand__title{margin:0}
.brand__tag{margin:0;color:var(--muted);font-size:14px}
.card{background:var(--panel);border-radius:18px;padding:16px;margin:12px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.gate{min-height:calc(100vh - 130px)}
.row{display:flex;gap:10px;justify-content:center;margin:6px 0 10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.muted{color:var(--muted)}
.btn{display:block;width:100%;padding:18px 20px;border:0;border-radius:16px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.btn--c1{background:var(--brand-accent);color:#111}
.btn--c2{background:var(--brand-accent-2);color:#111}
.btn--c3{background:var(--brand-accent-3);color:#111}
.btn--c4{background:var(--brand-primary);color:#fff}
.btn--start{background:#22c55e;color:#111;margin-top:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.active{transform:scale(0.95);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.game{padding:14px;max-width:760px;margin:0 auto}
.phase{background:var(--panel);border-radius:18px;padding:16px;margin-bottom:12px}
.q{font-weight:700;margin:0 0 6px}
.opts{display:grid;grid-template-columns:1fr;gap:8px}
.score{color:var(--muted);font-size:14px;margin-top:6px}
.footer{color:var(--muted);font-size:12px;text-align:center;margin-top:10px}

/* Responsive design improvements */
@media (max-width: 768px) {
  .card {
    margin: 8px;
    padding: 12px;
  }
  
  .btn {
    padding: 14px 16px;
    font-size: 16px;
  }
  
  .game {
    padding: 8px;
  }
}

/* Enhanced visual feedback */
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* Info card styles */
.info-card {
  margin-bottom: 20px;
}

.info-content {
  text-align: left;
  line-height: 1.6;
}

.info-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.highlight-item {
  background: rgba(21, 121, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  border-left: 4px solid var(--brand-primary);
}

.highlight-item h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--brand-accent);
}

.highlight-item p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.safety-tips {
  background: rgba(255, 89, 94, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  border-left: 4px solid var(--brand-accent-3);
}

.safety-tips h3 {
  margin: 0 0 12px 0;
  color: var(--brand-accent-3);
}

.safety-tips ul {
  margin: 0;
  padding-left: 20px;
}

.safety-tips li {
  margin-bottom: 8px;
  color: var(--text);
}

@media (max-width: 768px) {
  .language-switcher {
    top: 10px;
    right: 10px;
    padding: 6px;
  }
  
  .flag-btn {
    width: 35px;
    height: 26px;
    font-size: 18px;
  }
  
  .info-highlights {
    grid-template-columns: 1fr;
  }
  
  .highlight-item {
    padding: 10px;
  }
}

/* News Widget Styles */
.news-widget {
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  margin-top: 20px;
  border-top: 3px solid var(--brand-primary);
}

.news-header h3 {
  margin: 0 0 12px 0;
  color: var(--brand-primary);
  font-size: 18px;
}

.news-content {
  margin-bottom: 20px;
}

.news-loading, .news-error, .news-empty {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-style: italic;
}

.news-error {
  color: var(--brand-accent-3);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-item {
  background: rgba(21, 121, 255, 0.05);
  border-radius: 10px;
  padding: 12px;
  border-left: 3px solid var(--brand-accent);
}

.news-source {
  font-weight: bold;
  color: var(--brand-accent);
  font-size: 14px;
  margin-bottom: 6px;
}

.news-summary {
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.news-meta a {
  color: var(--brand-primary);
  text-decoration: none;
}

.news-meta a:hover {
  text-decoration: underline;
}

.news-time {
  color: var(--muted);
}

.news-updated {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.emergency-numbers {
  background: rgba(255, 89, 94, 0.1);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid var(--brand-accent-3);
}

.emergency-numbers h4 {
  margin: 0 0 12px 0;
  color: var(--brand-accent-3);
  font-size: 16px;
}

.emergency-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emergency-item {
  color: var(--text);
  font-size: 14px;
}

.emergency-item strong {
  color: var(--brand-accent-3);
  font-weight: bold;
}

.emergency-loading {
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

@media (max-width: 768px) {
  .news-widget {
    margin: 12px;
    padding: 12px;
  }
  
  .news-item {
    padding: 10px;
  }
  
  .news-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}