* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; font-family:'Segoe UI', Helvetica, Arial, sans-serif; color:#fff; user-select:none; }

#game-container { position:relative; width:100vw; height:100vh; overflow:hidden; background:#0a0a0f; }

#game-canvas { position:absolute; top:0; left:0; width:100%; height:100%; image-rendering:auto; }

.screen { position:absolute; inset:0; display:none; z-index:5; }
.screen.active { display:flex; align-items:center; justify-content:center; }
.screen.overlay { background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); z-index:50; }

/* ============ MAIN MENU ============ */
.menu-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,80,80,0.35), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(120,40,200,0.4), transparent 60%),
    linear-gradient(135deg, #1a0a1f 0%, #2a0f1a 50%, #0f0a1a 100%);
  animation:bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  0% { filter:hue-rotate(0deg) brightness(1); }
  100% { filter:hue-rotate(20deg) brightness(1.15); }
}
.menu-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}
.menu-content { position:relative; text-align:center; z-index:2; padding:40px; }

.game-title { display:flex; flex-direction:column; align-items:center; margin-bottom:60px; }
.title-karen {
  font-family:'Impact', 'Arial Black', sans-serif;
  font-size:160px; font-weight:900; letter-spacing:8px;
  background:linear-gradient(180deg, #ff4d6d 0%, #c9184a 50%, #800f2f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(255,77,109,0.5);
  filter:drop-shadow(0 6px 0 #2a0010) drop-shadow(0 12px 30px rgba(255,77,109,0.6));
  animation:titleShake 0.4s ease-in-out infinite alternate;
}
@keyframes titleShake {
  0% { transform:rotate(-1deg) scale(1); }
  100% { transform:rotate(1deg) scale(1.02); }
}
.title-sub {
  font-family:'Impact', sans-serif; font-size:80px; letter-spacing:12px;
  color:#fff; text-shadow:0 4px 0 #000, 0 0 30px rgba(255,255,255,0.3);
  margin-top:-20px;
}
.title-tag {
  font-style:italic; font-size:24px; color:#ffb3c1; letter-spacing:4px;
  margin-top:10px; text-shadow:0 2px 8px rgba(0,0,0,0.8);
}

.menu-buttons { display:flex; flex-direction:column; gap:18px; align-items:center; }
.menu-btn {
  font-family:'Segoe UI', sans-serif; font-size:22px; font-weight:700;
  padding:16px 50px; min-width:320px; border:none; border-radius:12px;
  background:linear-gradient(180deg, #3a3a4a 0%, #1a1a2a 100%);
  color:#fff; cursor:pointer; letter-spacing:2px;
  box-shadow:0 6px 0 #0a0a14, 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
  transition:all 0.15s ease;
  text-shadow:0 2px 4px rgba(0,0,0,0.8);
}
.menu-btn:hover { transform:translateY(-2px); box-shadow:0 8px 0 #0a0a14, 0 14px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.3); filter:brightness(1.2); }
.menu-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #0a0a14, 0 4px 10px rgba(0,0,0,0.5); }
.menu-btn.primary { background:linear-gradient(180deg, #ff4d6d 0%, #c9184a 100%); box-shadow:0 6px 0 #5a0a1a, 0 10px 30px rgba(255,77,109,0.5); }
.menu-btn.primary:hover { box-shadow:0 8px 0 #5a0a1a, 0 14px 40px rgba(255,77,109,0.7); }
.menu-btn.primary:active { box-shadow:0 2px 0 #5a0a1a, 0 4px 10px rgba(255,77,109,0.4); }
.menu-btn.danger { background:linear-gradient(180deg, #6a1b1b 0%, #2a0a0a 100%); box-shadow:0 6px 0 #1a0505, 0 10px 30px rgba(0,0,0,0.6); }

.menu-footer { margin-top:50px; font-size:13px; color:#aaa; letter-spacing:2px; }

/* ============ CREDITS ============ */
.credits-bg {
  position:absolute; inset:0;
  background:linear-gradient(180deg, #1a0a2a 0%, #0a0a1a 100%);
}
.credits-content { position:relative; text-align:center; padding:40px; }
.credits-content h2 { font-size:60px; margin-bottom:30px; letter-spacing:8px; color:#ff4d6d; text-shadow:0 0 30px rgba(255,77,109,0.6); }
.credit-line { font-size:22px; margin:12px 0; color:#fff; letter-spacing:1px; }
.credit-line.big { font-size:38px; color:#ffd700; text-shadow:0 0 20px rgba(255,215,0,0.5); margin:20px 0 30px; font-weight:bold; }
.credit-line.small { font-size:14px; color:#888; font-style:italic; margin-top:20px; }
.credits-content .menu-btn { margin-top:40px; }

/* ============ SCENARIO SELECT ============ */
.scenario-content { position:relative; text-align:center; padding:40px; max-width:1100px; }
.scenario-content h2 { font-size:54px; color:#fff; letter-spacing:6px; text-shadow:0 4px 0 #000, 0 0 30px rgba(255,77,109,0.5); }
.scenario-sub { color:#ffb3c1; font-style:italic; margin:10px 0 30px; font-size:18px; }
.scenario-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-bottom:30px; }
.scenario-card {
  background:linear-gradient(180deg, #2a1a3a 0%, #1a0a2a 100%);
  border:2px solid #ff4d6d; border-radius:16px; padding:24px; cursor:pointer;
  transition:all 0.2s ease; box-shadow:0 8px 30px rgba(0,0,0,0.5);
  text-align:left;
}
.scenario-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 14px 50px rgba(255,77,109,0.4); border-color:#ffd700; }
.scenario-card .icon { font-size:48px; margin-bottom:10px; }
.scenario-card h3 { color:#ffd700; font-size:22px; margin-bottom:8px; letter-spacing:1px; }
.scenario-card p { color:#ddd; font-size:14px; line-height:1.5; }
.scenario-card .difficulty { display:inline-block; margin-top:10px; padding:4px 10px; border-radius:6px; background:#ff4d6d; font-size:12px; font-weight:bold; }

/* ============ HUD ============ */
.hud {
  position:absolute; top:0; left:0; right:0; padding:16px 24px;
  display:flex; justify-content:space-between; align-items:flex-start;
  background:linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  z-index:20; pointer-events:none;
}
.hud > * { pointer-events:auto; }
.hud-left { display:flex; flex-direction:column; gap:8px; min-width:280px; }
.meter { background:rgba(0,0,0,0.6); padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.15); backdrop-filter:blur(6px); }
.meter-label { font-size:12px; font-weight:bold; letter-spacing:2px; color:#fff; margin-bottom:4px; text-shadow:0 1px 2px #000; }
.meter-bar { height:14px; background:rgba(255,255,255,0.1); border-radius:7px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,0.5); }
.meter-fill { height:100%; width:0%; transition:width 0.4s ease; border-radius:7px; box-shadow:0 0 12px currentColor; }
.meter-fill.rage { background:linear-gradient(90deg, #ff4d6d, #ff0040); color:#ff4d6d; }
.meter-fill.scandal { background:linear-gradient(90deg, #ffd700, #ff8c00); color:#ffd700; }
.meter-fill.karen { background:linear-gradient(90deg, #b388ff, #7c4dff); color:#b388ff; }

.hud-btn {
  background:rgba(0,0,0,0.7); color:#fff; border:1px solid rgba(255,255,255,0.3);
  padding:10px 18px; border-radius:8px; cursor:pointer; font-weight:bold;
  letter-spacing:1px; backdrop-filter:blur(6px);
}
.hud-btn:hover { background:rgba(255,77,109,0.4); }

/* ============ DIALOGUE ============ */
.dialogue-box {
  position:absolute; left:40px; right:40px; bottom:30px;
  background:linear-gradient(180deg, rgba(20,10,30,0.92) 0%, rgba(10,5,20,0.96) 100%);
  border:2px solid rgba(255,77,109,0.5); border-radius:16px;
  padding:24px 30px; backdrop-filter:blur(12px);
  box-shadow:0 -10px 40px rgba(0,0,0,0.6), 0 0 60px rgba(255,77,109,0.15);
  z-index:15; min-height:200px;
}
.speaker-name {
  display:inline-block; padding:6px 18px; margin-bottom:12px;
  background:linear-gradient(90deg, #ff4d6d, #c9184a); border-radius:8px;
  font-weight:bold; letter-spacing:3px; font-size:14px;
  text-shadow:0 1px 2px rgba(0,0,0,0.6); box-shadow:0 4px 12px rgba(255,77,109,0.4);
}
.dialogue-text {
  font-size:22px; line-height:1.5; color:#fff; margin-bottom:16px;
  text-shadow:0 2px 6px rgba(0,0,0,0.8); min-height:60px;
}
.choices { display:flex; flex-direction:column; gap:8px; }
.choice {
  padding:12px 20px; background:linear-gradient(90deg, rgba(255,77,109,0.2), rgba(120,40,200,0.2));
  border:1px solid rgba(255,77,109,0.5); border-radius:10px;
  color:#fff; font-size:16px; cursor:pointer; text-align:left;
  transition:all 0.15s ease; font-family:inherit;
}
.choice:hover { background:linear-gradient(90deg, rgba(255,77,109,0.5), rgba(120,40,200,0.4)); transform:translateX(8px); border-color:#ffd700; }
.choice .choice-icon { display:inline-block; margin-right:10px; font-size:18px; }

/* ============ PAUSE ============ */
.pause-content {
  background:linear-gradient(180deg, #2a1a3a, #0a0a1a);
  padding:50px 70px; border-radius:20px; text-align:center;
  border:2px solid rgba(255,77,109,0.6); box-shadow:0 0 60px rgba(255,77,109,0.3);
}
.pause-content h2 { font-size:48px; margin-bottom:30px; letter-spacing:6px; }
.pause-content p { color:#ffb3c1; margin-bottom:20px; }
.pause-content .menu-btn { display:block; margin:12px auto; }

/* ============ NEWSPAPER ============ */
#newspaper-screen { background:#1a1a1a; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
.newspaper {
  width:min(900px, 95vw); background:#f5e9d3;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,90,50,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(80,60,30,0.1) 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(100,80,40,0.03) 0px, rgba(100,80,40,0.03) 1px, transparent 1px, transparent 3px);
  color:#1a1a1a; padding:40px 50px;
  font-family:'Times New Roman', Georgia, serif;
  box-shadow:0 20px 80px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.3);
  animation:newsSlam 0.6s cubic-bezier(0.5, -0.5, 0.5, 1.5);
  border-radius:2px; position:relative;
}
.newspaper::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0px, transparent 200px, rgba(0,0,0,0.02) 200px, rgba(0,0,0,0.02) 201px);
  pointer-events:none;
}
@keyframes newsSlam {
  0% { transform:scale(0.3) rotate(-15deg); opacity:0; }
  60% { transform:scale(1.05) rotate(2deg); opacity:1; }
  100% { transform:scale(1) rotate(0deg); }
}
.news-masthead { text-align:center; border-bottom:4px double #1a1a1a; padding-bottom:14px; margin-bottom:20px; }
.news-date { font-size:13px; letter-spacing:3px; text-transform:uppercase; color:#3a2a1a; }
.news-title { font-family:'Old English Text MT', 'Times New Roman', serif; font-size:72px; font-weight:900; letter-spacing:2px; margin:6px 0; color:#000; text-shadow:1px 1px 0 rgba(0,0,0,0.1); }
.news-tagline { font-style:italic; font-size:14px; color:#3a2a1a; }
.news-headline { font-size:48px; line-height:1.1; text-align:center; margin:20px 0; color:#000; font-weight:900; text-transform:uppercase; letter-spacing:1px; border-top:2px solid #000; border-bottom:2px solid #000; padding:14px 0; }
.news-photo {
  width:100%; height:280px; margin:20px 0;
  background:#222; border:3px solid #000; position:relative; overflow:hidden;
  filter:contrast(1.1) saturate(0.7);
  box-shadow:inset 0 0 60px rgba(0,0,0,0.5);
}
.news-caption { font-size:13px; font-style:italic; text-align:center; margin-top:-12px; margin-bottom:18px; color:#3a2a1a; letter-spacing:1px; }
.news-columns { column-count:2; column-gap:30px; column-rule:1px solid #6a4a2a; font-size:15px; line-height:1.6; text-align:justify; color:#1a1a1a; }
.news-article::first-letter, .news-article-2::first-letter { font-size:48px; font-weight:bold; float:left; line-height:1; padding:4px 6px 0 0; font-family:'Old English Text MT', serif; }
.news-buttons { display:flex; gap:16px; justify-content:center; margin-top:30px; }

/* ============ VICTORY ============ */
#victory-screen { background:radial-gradient(ellipse at center, #2a1a3a 0%, #0a0a1a 100%); }
.victory-content { text-align:center; padding:40px; }
.victory-title { font-size:80px; color:#ffd700; text-shadow:0 0 40px rgba(255,215,0,0.7), 0 6px 0 #5a4400; letter-spacing:6px; margin-bottom:20px; animation:victoryGlow 1.5s ease-in-out infinite alternate; }
@keyframes victoryGlow {
  0% { filter:brightness(1) drop-shadow(0 0 20px gold); }
  100% { filter:brightness(1.3) drop-shadow(0 0 40px gold); }
}
.victory-sub { font-size:22px; color:#fff; margin-bottom:30px; max-width:700px; margin-left:auto; margin-right:auto; }
.victory-stats { font-size:18px; color:#b388ff; margin-bottom:30px; line-height:1.8; }
.victory-content .menu-btn { margin:8px; display:inline-block; }