.bang-overlay {
  animation: bangPop 0.35s ease-out;
}
@keyframes bangPop {
  0% { opacity: 0; transform: scale(0.7) translate(-50%,-50%); }
  20% { opacity: 1; transform: scale(1.1) translate(-50%,-50%); }
  80% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  100% { opacity: 0; transform: scale(0.8) translate(-50%,-50%); }
}
.flipflop-fall-overlay {
  animation: itemFallDown 1.2s cubic-bezier(.6,.2,.4,1);
}
.tomato-fall-overlay {
  animation: itemFallDown 1.2s cubic-bezier(.6,.2,.4,1);
}
@keyframes itemFallDown {
  0% { opacity: 0; transform: translate(-50%,0) rotate(-10deg) scale(0.8); }
  10% { opacity: 1; }
  40% { transform: translate(-50%,60px) rotate(18deg) scale(1.1); }
  80% { transform: translate(-50%,120px) rotate(-22deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%,160px) rotate(30deg) scale(0.9); }
}
.broken-egg-overlay {
  animation: eggRollDown 1.2s cubic-bezier(.6,.2,.4,1);
}
@keyframes eggRollDown {
  0% { opacity: 0; transform: translate(-50%,0) rotate(-10deg) scale(0.8); }
  10% { opacity: 1; }
  40% { transform: translate(-50%,60px) rotate(18deg) scale(1.1); }
  80% { transform: translate(-50%,120px) rotate(-22deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%,160px) rotate(30deg) scale(0.9); }
}

.projectile.egg.egg-stop.animate {
  animation: flyEggToFace 0.48s ease-out;
}
@keyframes flyEggToFace {
  0%{ opacity:1; transform:translate3d(0,0,0) rotate(-25deg) scale(1) }
  60%{ opacity:1; transform:translate3d(160px,-20px,0) rotate(0) scale(1.1) }
  100%{ opacity:0; transform:translate3d(260px,0,0) rotate(10deg) scale(.95) }
}
.splat-overlay {
  animation: splatPop 0.42s ease-out;
}
@keyframes splatPop {
  0% { opacity: 0; transform: scale(0.7) translate(-50%,-50%); }
  20% { opacity: 1; transform: scale(1.1) translate(-50%,-50%); }
  80% { opacity: 1; transform: scale(1) translate(-50%,-50%); }
  100% { opacity: 0; transform: scale(0.8) translate(-50%,-50%); }
}
:root{
  /* More dramatic gradient - from corruption's dark purple to justice blue */
  --bg-1:#6366f1; --bg-2:#8b5cf6;
  --fg:#111827; --muted:#64748b;
  --card:rgba(255,255,255,.97);
  /* Stronger red for anger, with corruption-fighting orange undertones */
  --accent-1:#ef4444; --accent-2:#dc2626;
  --accent-warning:#f59e0b; --accent-success:#10b981;
  --ring:rgba(239,68,68,.4);
  --shadow:rgba(0,0,0,.25);
  --radius:18px;
  
  /* Additional themed colors */
  --corruption-dark:#7c2d12; /* Dark brown for corruption */
  --justice-blue:#1d4ed8; /* Strong blue for justice */
  --satire-purple:#a855f7; /* Purple for satirical elements */
  
  /* Memorial colors */
  --memorial-black:#000000;
  --memorial-red:#8B0000;
  --memorial-blood:#ff0000;
}

/* Memorial Banner Integration */
.memorial-banner {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #8B0000 100%);
  color: white;
  padding: 16px 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid #ff0000;
  box-shadow: 0 4px 20px rgba(139, 0, 0, 0.5);
  animation: memorialPulse 3s ease-in-out infinite;
}

@keyframes memorialPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(139, 0, 0, 0.3); }
  50% { box-shadow: 0 4px 25px rgba(139, 0, 0, 0.7); }
}

.memorial-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 16px;
}

.memorial-ribbon {
  font-size: 1.5rem;
  animation: ribbonSway 2s ease-in-out infinite;
}

@keyframes ribbonSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
}

.memorial-text {
  flex: 1;
  text-align: center;
}

.memorial-main {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ff6b6b;
  margin-bottom: 4px;
}

.memorial-sub {
  display: block;
  font-size: 0.9rem;
  color: #cccccc;
  font-weight: 400;
}

.memorial-btn {
  background: linear-gradient(135deg, #8B0000, #ff0000);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}

.memorial-btn:hover {
  background: linear-gradient(135deg, #ff0000, #ff4444);
  border-color: #fff;
  transform: scale(1.05);
  text-decoration: none;
  color: white;
}

.memorial-close {
  background: none;
  border: none;
  color: #cccccc;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.memorial-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: rotate(90deg);
}

/* Navigation Links */
.nav-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 16px 0;
  flex-wrap: wrap;
}

.nav-link {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.nav-link:hover {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  text-decoration: none;
  color: white;
}

.memorial-link {
  background: linear-gradient(135deg, #000000, #8B0000) !important;
  border: 1px solid #ff0000;
}

.memorial-link:hover {
  background: linear-gradient(135deg, #8B0000, #ff0000) !important;
  border-color: white;
}

.justice-link {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border: 2px solid #fca5a5 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3) !important;
  animation: justice-pulse 2s infinite;
}

.justice-link:hover {
  border-color: #fecaca !important;
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
  animation: none;
}

@keyframes justice-pulse {
  0% { box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); }
  50% { box-shadow: 0 4px 20px rgba(220, 38, 38, 0.5), 0 0 30px rgba(220, 38, 38, 0.2); }
  100% { box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3); }
}

/* Responsive Memorial Banner */
@media (max-width: 768px) {
  /* Mobile Memorial Styles */
  .memorial-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .memorial-text {
    order: 1;
  }
  
  .memorial-btn {
    order: 2;
    min-height: 44px; /* Apple recommended touch target */
  }
  
  .memorial-close {
    order: 3;
    align-self: flex-end;
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Mobile Navigation */
  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .nav-link {
    width: 100%;
    max-width: 300px;
    text-align: center;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 1.1rem;
  }
  
  /* Mobile Container & Layout */
  body {
    padding: 12px;
  }
  
  .container {
    margin: 0;
    border-radius: 12px;
    overflow-x: hidden;
  }
  
  /* Mobile Header */
  .header {
    padding: 16px 20px;
    text-align: center;
  }
  
  .header h1 {
    font-size: 1.8rem !important;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  
  .subtitle {
    font-size: 1rem !important;
    line-height: 1.4;
  }
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Noto Sans","Noto Sans Devanagari",ui-sans-serif,-apple-system,Segoe UI,Roboto,Arial,"Liberation Sans",sans-serif;
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
  color:var(--fg);
  display:grid; place-items:center;
  padding:18px;
}
.container{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 22px 40px var(--shadow);
  padding:20px;
  max-width:1100px;
  width:min(96vw,1100px);
}
.header h1{margin:0 0 6px; text-align:center; font-size:clamp(1.8rem,2.2vw + 1rem,2.6rem)}
.subtitle{text-align:center;color:var(--muted);font-style:italic;margin:0 0 10px}

.protest-slogan {
  text-align: center;
  background: linear-gradient(135deg, var(--accent-1), var(--corruption-dark));
  color: white;
  padding: 14px 24px;
  margin: 16px auto;
  border-radius: 30px;
  font-weight: 800;
  font-size: 1.2rem;
  max-width: 650px;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  animation: pulseSlogan 3s ease-in-out infinite;
  border: 2px solid rgba(255,255,255,0.2);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

@keyframes pulseSlogan {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.anger-meter {
  text-align: center;
  margin: 20px 0;
}

.anger-meter h3 {
  margin: 0 0 12px;
  color: var(--accent-1);
  font-size: 1.2rem;
}

.meter-container {
  max-width: 400px;
  margin: 0 auto;
}

.meter-bar {
  background: #e5e7eb;
  height: 25px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  border: 2px solid #374151;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444, #dc2626);
  border-radius: 13px;
  transition: width 0.5s ease;
  width: 0%;
}

.meter-text {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--accent-1);
}

/* Justice Progress Widget */
.justice-progress-widget {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(185, 28, 28, 0.1));
  border: 2px solid rgba(220, 38, 38, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2);
}

.justice-progress-widget h3 {
  color: #dc2626;
  font-size: 1.2rem;
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.justice-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.justice-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.justice-fill {
  height: 100%;
  background: linear-gradient(45deg, #dc2626, #fbbf24);
  border-radius: 6px;
  transition: width 1s ease;
  width: 33%;
}

.justice-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.justice-text {
  color: #fbbf24;
  font-weight: 600;
}

.justice-link-small {
  color: #dc2626;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 0.85rem;
}

.justice-link-small:hover {
  color: #fbbf24;
  text-decoration: underline;
}

.social-sharing {
  margin-top: 24px;
  padding: 24px;
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  text-align: center;
}

.social-sharing h3 {
  margin: 0 0 16px;
  color: var(--fg);
}

.share-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.share-btn {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.share-btn.twitter {
  background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.share-btn.facebook {
  background: linear-gradient(135deg, #4267b2, #365899);
}

.share-btn.screenshot {
  background: linear-gradient(135deg, #10b981, #059669);
}

.share-message {
  background: #f3f4f6;
  padding: 12px 16px;
  border-radius: 10px;
  font-style: italic;
  color: var(--muted);
  border-left: 4px solid var(--accent-1);
}

/* Democracy Action Tips */
.action-tips {
  margin-top: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-radius: 12px;
  border: 2px solid #f59e0b;
}

.action-tips h4 {
  color: #92400e;
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.1rem;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.tip-item {
  background: white;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #f59e0b;
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tip-item strong {
  color: #92400e;
}

.toolbar{display:flex;gap:8px;justify-content:center;margin:6px 0 12px}
.ghost-btn{
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  padding:8px 12px;border-radius:999px;cursor:pointer;color:#111827
}
.ghost-btn:hover{background:rgba(0,0,0,.07)}
.ghost-btn.danger{color:#b91c1c;border-color:rgba(185,28,28,.25)}

.party-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:980px){ .party-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width:640px){ .party-grid{ grid-template-columns: 1fr; gap: 16px; } }

/* Mobile Party Card Optimizations */
@media (max-width: 768px) {
  .party-card {
    padding: 20px 16px;
    margin-bottom: 16px;
    min-height: auto;
  }
  
  .image-wrap {
    min-height: 280px; /* Larger touch target area */
    padding: 16px;
  }
  
  .politician-image {
    width: clamp(200px, 35vw, 260px) !important;
    height: clamp(200px, 35vw, 260px) !important;
    border-width: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .politician-image:active {
    transform: scale(0.95);
  }
  
  .politician-info {
    margin-top: 16px;
    text-align: center;
  }
  
  .politician-name {
    font-size: 1.3rem !important;
    font-weight: 700;
    margin-bottom: 6px;
  }
  
  .politician-position {
    font-size: 1rem !important;
    opacity: 0.8;
  }
  
  .slap-counter {
    font-size: 1.1rem !important;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 20px;
    border: 2px solid rgba(239, 68, 68, 0.2);
  }
}

@media (max-width: 480px) {
  .politician-image {
    width: clamp(180px, 40vw, 220px) !important;
    height: clamp(180px, 40vw, 220px) !important;
  }
  
  .party-card {
    padding: 16px 12px;
  }
  
  .image-wrap {
    min-height: 250px;
    padding: 12px;
  }
}

.party-card{
  background:linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.95) 100%);
  border-radius:16px;
  border:2px solid rgba(0,0,0,.08);
  padding:16px;
  position:relative;
  box-shadow: 0 4px 15px rgba(0,0,0,.12);
  transition: all 0.3s ease;
}

.party-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,.18);
  border-color: var(--accent-1);
}

.image-wrap{
  position:relative; display:grid; place-items:center; min-height:240px;
}
.politician-image{
  width:clamp(160px,26vw,220px); height:clamp(160px,26vw,220px);
  border-radius:50%; object-fit:cover;
  border:5px solid #111827; background:#f9fafb;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition: transform .25s ease;
  user-select:none; touch-action:manipulation;
  cursor: pointer;
  /* Better mobile tap feedback */
  -webkit-tap-highlight-color: rgba(239, 68, 68, 0.3);
  -webkit-touch-callout: none;
}

/* Enhanced mobile tap states */
@media (hover: none) and (pointer: coarse) {
  .politician-image:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
  }
  
  .party-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}
.politician-image.slapped{ animation:faceShake 460ms ease-in-out }
.politician-image.red-faced {
  filter: brightness(1.15) saturate(2.2) sepia(0.55) hue-rotate(-18deg) drop-shadow(0 0 18px #ff2d2dcc);
  transition: filter 0.2s;
}
@keyframes faceShake{
  0%,100%{ transform:translateX(0) scale(1) }
  15%{ transform:translateX(-12px) rotate(-3deg) scale(1.05) }
  35%{ transform:translateX(12px) rotate(3deg) scale(0.95) }
  55%{ transform:translateX(-8px) rotate(-1deg) scale(1.03) }
  75%{ transform:translateX(8px) rotate(1deg) scale(0.98) }
  90%{ transform:translateX(-4px) scale(1.01) }
}

/* Enhanced mobile shake animation */
@media (max-width: 768px) {
  .politician-image.slapped {
    animation: mobileFaceShake 500ms ease-in-out;
  }
}

@keyframes mobileFaceShake{
  0%,100%{ transform:translateX(0) scale(1) }
  10%{ transform:translateX(-15px) rotate(-4deg) scale(1.08) }
  25%{ transform:translateX(15px) rotate(4deg) scale(0.92) }
  40%{ transform:translateX(-10px) rotate(-2deg) scale(1.05) }
  55%{ transform:translateX(10px) rotate(2deg) scale(0.95) }
  70%{ transform:translateX(-6px) scale(1.03) }
  85%{ transform:translateX(6px) scale(0.97) }
  95%{ transform:scale(1.01) }
}

.hit-spark{
  position:absolute; width:18px;height:18px; opacity:0; pointer-events:none;
  background:radial-gradient(circle,#fff 0%, #ffd166 35%, rgba(255,209,102,0) 70%);
  border-radius:50%;
}
.hit-spark.show{ animation: spark .4s ease-out }
@keyframes spark{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:1;transform:scale(1.7)}
  100%{opacity:0;transform:scale(.6)}
}

.floating-layer{ position:absolute; inset:0; pointer-events:none; overflow:visible }
.floating-text{
  position:absolute; color:#111827; font-weight:800; opacity:0;
  transform: translate(-50%,-50%); white-space:nowrap;
  background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.06);
  padding:3px 8px; border-radius:999px; font-size:.9rem;
  animation: floatUp 900ms ease-out forwards;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Enhanced mobile floating text */
@media (max-width: 768px) {
  .floating-text {
    font-size: 1rem;
    padding: 6px 12px;
    font-weight: 900;
    background: rgba(239, 68, 68, 0.95);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    animation: mobileFloatUp 1000ms ease-out forwards;
  }
}

@keyframes mobileFloatUp{
  0%{
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.5);
  }
  20%{
    opacity: 1;
    transform: translate(-50%, -30px) scale(1.2);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -80px) scale(0.8);
  }
}

@keyframes floatUp{
  0%{opacity:0; transform:translate(-50%,-10%)}
  10%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-120%)}
}

.party-head h2{ margin:10px 0 2px; font-size:1.2rem }
.mock{ margin:0; color:#6b7280; font-size:.95rem }

.controls{ margin-top:8px }
.cta{ margin:0 0 6px; font-weight:700 }
.weapon-row{ display:flex; gap:8px; flex-wrap:wrap }
.weapon-btn{
  background:linear-gradient(135deg,var(--accent-1) 0%, var(--accent-2) 50%, var(--corruption-dark) 100%);
  color:#fff; border:none; border-radius:25px; padding:10px 16px; cursor:pointer;
  box-shadow:0 6px 20px var(--ring); font-weight:900; letter-spacing:.3px;
  font-size: 1.05em;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.weapon-btn:hover{ 
  filter:brightness(1.1) saturate(1.1); 
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
}

.counter{ text-align:center; margin-top:10px }
.count{ font-size:1.6rem; font-weight:900; }
.counter-label{ display:block; color:#6b7280; font-size:.85rem }

.projectile{
  position:absolute; width:56px; height:56px; top:50%; left:-100px; opacity:0; pointer-events:none;
}
.projectile.flipflop::before{ content:"🩴"; font-size:44px; }
.projectile.tomato::before{ content:"🍅"; font-size:44px; }
.projectile.egg::before{ content:"🥚"; font-size:44px; }
.projectile.animate{ animation: flyAcross .72s ease-out }

@keyframes flyAcross{
  0%{ opacity:1; transform:translate3d(0,0,0) rotate(-25deg) scale(1) }
  48%{ opacity:1; transform:translate3d(240px,-40px,0) rotate(0) scale(1.1) }
  100%{ opacity:0; transform:translate3d(520px,0,0) rotate(25deg) scale(.95) }
}

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(30px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transition:opacity .2s ease, transform .2s ease;
  pointer-events:none; z-index:10; font-weight:800;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

.daily-stats {
  margin-top: 32px;
  padding: 24px;
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
}

.daily-stats h3 {
  margin: 0 0 16px;
  text-align: center;
  color: var(--fg);
  font-size: 1.3rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.stat-card.total {
  background: linear-gradient(135deg, #fef3c7, #fbbf24);
  color: #92400e;
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-1);
  margin-bottom: 8px;
}

.stat-card.total .stat-value {
  color: #92400e;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.stat-card.total .stat-label {
  color: #92400e;
}

.last-reset {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 16px 0 0;
}

/* Bilingual Text Styling - Unified Design */
.action-title, .action-title-nepali {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--fg);
  margin-bottom: 8px;
  font-family: inherit;
  line-height: 1.3;
}

.action-title-nepali {
  font-size: 1.05rem;
  color: #4b5563;
  margin-top: 4px;
}

.action-desc, .action-desc-nepali {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 8px;
  font-family: inherit;
}

.action-desc-nepali {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 2px;
}

.action-subtitle-english, .action-subtitle-nepali {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 4px 0;
  text-align: center;
  font-family: inherit;
}

.action-subtitle-english {
  color: var(--corruption-dark);
}

.action-subtitle-nepali {
  color: #7c2d12;
  font-size: 1.1rem;
}

.anger-level, .anger-level-nepali {
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  font-family: inherit;
}

.anger-level {
  color: var(--accent-2);
}

.anger-level-nepali {
  color: #dc2626;
  font-size: 0.95rem;
}

.action-prompt, .action-prompt-nepali {
  font-style: italic;
  font-size: 0.95rem;
  animation: pulsePrompt 2s ease-in-out infinite;
  font-family: inherit;
  line-height: 1.3;
}

.action-prompt {
  color: var(--corruption-dark);
}

.action-prompt-nepali {
  color: #92400e;
  font-size: 0.9rem;
  margin-top: 4px;
}

.stat-label, .stat-label-nepali {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
  text-align: center;
  font-family: inherit;
}

.stat-label {
  color: var(--muted);
}

.stat-label-nepali {
  color: #6b7280;
  font-size: 0.8rem;
  margin-top: 2px;
}

.success-text, .success-text-nepali {
  margin: 8px 0;
  text-align: center;
  font-family: inherit;
  line-height: 1.4;
}

.success-text {
  color: var(--accent-success);
  font-weight: 600;
}

.success-text-nepali {
  color: #059669;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Action Button Bilingual Support */
.action-btn {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Category Headers Bilingual */
.action-category h4 {
  color: var(--fg);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  font-family: inherit;
  line-height: 1.3;
}

/* Impact Tracker Bilingual */
.impact-tracker h4 {
  text-align: center;
  color: var(--accent-success);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 20px;
  font-family: inherit;
  line-height: 1.3;
}

/* Success Message Bilingual */
.success-message h4 {
  color: var(--accent-success);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
  font-family: inherit;
  line-height: 1.3;
}

/* Phase 2: Real Action Components */
.action-gateway {
  margin: 40px 0;
  padding: 32px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 50%, #fecaca 100%);
  border-radius: 20px;
  border: 3px solid var(--accent-1);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2);
}

.action-header {
  text-align: center;
  margin-bottom: 32px;
}

.action-header h3 {
  color: var(--accent-1);
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0 0 12px;
  text-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

.action-subtitle {
  font-size: 1.2rem;
  color: var(--corruption-dark);
  font-weight: 600;
  margin: 0 0 20px;
}

.anger-to-action {
  background: rgba(239, 68, 68, 0.1);
  padding: 16px 24px;
  border-radius: 25px;
  border: 2px solid rgba(239, 68, 68, 0.3);
  display: inline-block;
}

.anger-level {
  font-weight: 700;
  color: var(--accent-2);
  display: block;
  margin-bottom: 8px;
}

.action-prompt {
  font-style: italic;
  color: var(--corruption-dark);
  font-size: 0.95rem;
  animation: pulsePrompt 2s ease-in-out infinite;
}

@keyframes pulsePrompt {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.action-categories {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

.action-category {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border-left: 6px solid transparent;
  transition: all 0.3s ease;
}

.action-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.action-category.immediate {
  border-left-color: #ef4444;
}

.action-category.weekly {
  border-left-color: #f59e0b;
}

.action-category.longterm {
  border-left-color: var(--justice-blue);
}

.action-category h4 {
  color: var(--fg);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0,0,0,0.1);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.action-card {
  background: linear-gradient(145deg, #fafafa 0%, #f5f5f5 100%);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.action-card:hover {
  border-color: var(--accent-1);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.2);
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.action-card:hover::before {
  left: 100%;
}

.action-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.action-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--fg);
  margin-bottom: 8px;
}

.action-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 16px;
}

.action-btn {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.action-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  filter: brightness(1.1);
}

.action-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Impact Tracker */
.impact-tracker {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 16px;
  padding: 24px;
  border: 2px solid var(--accent-success);
  margin-top: 24px;
}

.impact-tracker h4 {
  text-align: center;
  color: var(--accent-success);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.impact-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.impact-stat {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.impact-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent-success);
  margin-bottom: 8px;
}

.impact-label {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

/* Action Modal */
.action-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
}

.action-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 0;
  max-width: 600px;
  max-height: 80vh;
  width: 90vw;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from { transform: translateY(-50px) scale(0.9); }
  to { transform: translateY(0) scale(1); }
}

.modal-header {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: white;
  padding: 20px 24px;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.3;
}

/* Modal Bilingual Headers */
.modal-nepali {
  font-size: 0.95rem;
  color: #6b7280;
  text-align: center;
  margin-top: 4px;
  font-family: inherit;
  line-height: 1.4;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.modal-close:hover {
  background: rgba(255,255,255,0.2);
}

.modal-body {
  padding: 24px;
}

/* Form Elements Bilingual Support */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--fg);
  font-family: inherit;
  line-height: 1.3;
}

.form-label-nepali {
  display: block;
  margin-top: 2px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.4;
}

.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--fg);
  background: white;
  transition: all 0.3s ease;
  font-family: inherit;
  line-height: 1.3;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Responsive Design for Action Components */
@media (max-width: 768px) {
  /* Action Gateway Mobile */
  .action-gateway {
    margin: 20px 0;
    padding: 20px 16px;
    border-radius: 12px;
  }
  
  .action-header h3 {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 8px;
  }
  
  .action-subtitle {
    font-size: 1rem;
    text-align: center;
    line-height: 1.4;
  }
  
  .action-categories {
    gap: 20px;
    margin-top: 24px;
  }
  
  .action-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .action-card {
    padding: 20px 16px;
    text-align: center;
    min-height: 44px; /* Touch target */
  }
  
  .action-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }
  
  .action-card p {
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  /* Impact Stats Mobile */
  .impact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0;
  }
  
  .stat-item {
    padding: 16px 12px;
    text-align: center;
    border-radius: 8px;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
    font-weight: 800;
  }
  
  .stat-label {
    font-size: 0.9rem;
    margin-top: 4px;
  }
  
  /* Modal Mobile */
  .modal-content {
    width: 95vw;
    max-width: 95vw;
    max-height: 90vh;
    margin: 20px;
    padding: 20px;
    border-radius: 12px;
    overflow-y: auto;
  }
  
  .modal-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    top: 12px;
    right: 12px;
  }
}

@media (max-width: 480px) {
  .impact-stats {
    grid-template-columns: 1fr;
  }
}

/* Educational Anti-Corruption Section */
.education-section {
  margin: 40px 0;
  padding: 32px;
  background: linear-gradient(135deg, #fefbff 0%, #f1f5f9 50%, #e0f2fe 100%);
  border-radius: 18px;
  border: 3px solid var(--justice-blue);
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.15);
}

.education-section h3 {
  text-align: center;
  color: var(--justice-blue);
  margin-bottom: 28px;
  font-size: 1.6rem;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(29, 78, 216, 0.2);
}

.education-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.edu-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid var(--accent-2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.edu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.edu-card h4 {
  color: var(--accent-1);
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

.edu-card p {
  margin: 0 0 8px;
  line-height: 1.5;
  color: #555;
}

.edu-card em {
  color: var(--accent-2);
  font-weight: 600;
  font-style: normal;
}

.corruption-facts {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(124, 45, 18, 0.06) 100%);
  border: 3px solid var(--accent-1);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

.corruption-facts h4 {
  color: var(--accent-1);
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.2rem;
}

/* Source Link Styling */
.source-link, .edu-source {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #3b82f6;
  text-decoration: none;
  padding: 4px 8px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: all 0.2s ease;
}

.source-link:hover, .edu-source:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  text-decoration: underline;
}

.edu-source {
  margin-top: 12px;
  font-weight: 500;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.2);
}

.edu-source:hover {
  background: rgba(5, 150, 105, 0.2);
  border-color: rgba(5, 150, 105, 0.4);
}

/* Hall of Shame Section - Enhanced */
.hall-of-shame {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(147, 51, 234, 0.04) 100%);
  border-radius: 14px;
  border: 3px solid var(--satire-purple);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.12);
}

.hall-of-shame h4 {
  color: var(--satire-purple);
  margin: 0 0 24px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(168, 85, 247, 0.2);
}

.shame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.shame-card {
  padding: 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.shame-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.shame-card.success {
  background: rgba(34, 197, 94, 0.1);
  border-left: 4px solid #22c55e;
}

.shame-card.success:hover {
  background: rgba(34, 197, 94, 0.15);
  border-left-color: #16a34a;
}

.shame-card.failure {
  background: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
}

.shame-card.failure:hover {
  background: rgba(239, 68, 68, 0.15);
  border-left-color: #dc2626;
}

.case-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.case-header strong {
  font-size: 1rem;
  display: block;
}

.case-details p {
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.case-details strong {
  color: #374151;
  font-weight: 600;
}

.citation {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 8px;
}

.comparison-footer {
  text-align: center;
  margin-top: 20px;
  padding: 16px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
}

.shame-footer {
  margin: 0;
  color: #374151;
  font-size: 0.9rem;
  line-height: 1.5;
}

.shame-footer strong {
  color: #7c3aed;
  font-size: 1rem;
}

/* Additional Resources Section */
.resources-section {
  margin-top: 24px;
  padding: 20px;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 12px;
  border: 2px solid rgba(59, 130, 246, 0.2);
}

.resources-section h5 {
  color: #1d4ed8;
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.resource-card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.resource-card strong {
  display: block;
  color: #1d4ed8;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.resource-link {
  display: block;
  margin: 4px 0;
  font-size: 0.85rem;
  color: #3b82f6;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.resource-link:hover {
  border-bottom-color: #3b82f6;
  color: #1d4ed8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .education-section {
    margin: 24px 0;
    padding: 20px;
  }
  
  .education-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .edu-card {
    padding: 16px;
  }
}

.legal-disclaimer {
  margin-top: 32px;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid #e9ecef;
  font-size: 0.9rem;
  line-height: 1.6;
}

.legal-disclaimer h4 {
  margin: 0 0 20px;
  color: #495057;
  text-align: center;
  font-size: 1.1rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 12px;
}

.disclaimer-english, .disclaimer-nepali {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 8px;
}

.disclaimer-english {
  background: rgba(59, 130, 246, 0.05);
  border-left: 4px solid #3b82f6;
}

.disclaimer-nepali {
  background: rgba(34, 197, 94, 0.05);
  border-left: 4px solid #22c55e;
  font-family: "Noto Sans Devanagari", "Mukti", sans-serif;
}

.constitutional-rights {
  margin: 20px 0;
  padding: 20px;
  background: rgba(239, 68, 68, 0.05);
  border: 2px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
}

.constitutional-rights h5 {
  margin: 0 0 16px;
  color: var(--accent-1);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}

.legal-disclaimer p {
  margin: 0 0 12px;
  color: #6c757d;
}

.legal-disclaimer strong {
  color: #495057;
  font-weight: 700;
}

.disclaimer-footer {
  text-align: center;
  font-weight: 600;
  color: var(--accent-1) !important;
  margin-top: 20px !important;
  border-top: 2px solid #e9ecef;
  padding-top: 16px;
  line-height: 1.8;
}

/* Ward Finder Styling */
.ward-finder {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid #0284c7;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.ward-finder h5 {
  color: #0284c7;
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-weight: 700;
}

.location-selector {
  margin-bottom: 20px;
}

.selector-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.selector-row select {
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
  transition: border-color 0.3s ease;
}

.selector-row select:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}

.selector-row select:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.manual-search-btn, .find-contact-btn {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.manual-search-btn:hover, .find-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.ward-results {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
}

.ward-info-result h6 {
  color: #0284c7;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0f2fe;
}

.contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.mayor-contact, .ward-contact {
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #0284c7;
}

.mayor-contact h7, .ward-contact h7 {
  color: #374151;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.mayor-contact p, .ward-contact p {
  margin: 4px 0;
  font-size: 0.9rem;
  color: #4b5563;
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.copy-contact-btn, .generate-msg-btn, .copy-template-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.copy-contact-btn:hover, .generate-msg-btn:hover, .copy-template-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.generated-message {
  background: #fefbff;
  border: 2px solid #a855f7;
  border-radius: 10px;
  padding: 16px;
}

.generated-message h7 {
  color: #7c3aed;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

.generated-message textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.message-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.copy-btn, .share-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.copy-btn:hover, .share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
}

.manual-ward-search {
  background: #fffbf0;
  border: 2px solid #f59e0b;
  border-radius: 10px;
  padding: 20px;
}

.manual-ward-search h6 {
  color: #d97706;
  font-weight: 700;
  margin: 0 0 12px;
}

.manual-ward-search ol {
  margin: 12px 0;
  padding-left: 20px;
}

.manual-ward-search li {
  margin: 8px 0;
  line-height: 1.4;
}

.quick-contacts {
  background: white;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
}

.quick-contacts h7 {
  color: #d97706;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.quick-contacts ul {
  margin: 0;
  padding-left: 16px;
}

.quick-contacts li {
  font-size: 0.9rem;
  margin: 4px 0;
}

.close-manual-btn {
  background: #6b7280;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 12px;
}

.social-tags-content {
  background: #f0fdf4;
  border: 2px solid #22c55e;
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
}

.social-tags-content h7 {
  color: #16a34a;
  font-weight: 700;
  display: block;
  margin-bottom: 16px;
}

.platform-tags {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.twitter-tags, .facebook-tags {
  background: white;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 12px;
}

.twitter-tags strong, .facebook-tags strong {
  color: #15803d;
  display: block;
  margin-bottom: 8px;
}

.tag-box {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.85rem;
  margin: 8px 0;
  word-wrap: break-word;
}

.social-tags-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.social-tags-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Responsive Design for Ward Finder */
@media (max-width: 768px) {
  /* Contact and Footer Mobile */
  .selector-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .contact-details {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .contact-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .contact-actions button,
  .contact-actions a {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 1rem;
    width: 100%;
    text-align: center;
  }
  
  .platform-tags {
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .platform-tags .tag {
    padding: 8px 16px;
    min-height: 36px;
    font-size: 0.9rem;
  }
  
  /* Total Stats Mobile Enhancement */
  .total-stats {
    padding: 20px 16px;
    margin: 20px 0;
    text-align: center;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 16px;
    color: white;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
  }
  
  .total-stats h2 {
    font-size: 1.4rem !important;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  .total-counter {
    font-size: 2.2rem !important;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    margin: 8px 0;
  }
  
  /* Mobile Share Buttons */
  .share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
  }
  
  .share-buttons button {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 0.9rem;
    flex: 1;
    min-width: 120px;
  }
}

/* Mobile Device Specific Enhancements */
.mobile-device .container {
  min-height: 100vh;
  overflow-x: hidden;
}

.mobile-device .politician-image {
  cursor: pointer !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mobile-device .weapon-btn {
  min-height: 44px !important;
  min-width: 44px !important;
  font-size: 1rem !important;
  padding: 12px 16px !important;
}

.mobile-device .share-btn.native-share:hover {
  background: #0056b3 !important;
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}