/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Crimson Text', Georgia, serif;
  background: #0a0a0a;
  color: #d4d0c8;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ========== SCREENS ========== */
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }

/* ========== TITLE SCREEN ========== */
#screen-title {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, #1a0a0a 0%, #0a0a0a 70%);
  position: relative;
  overflow: hidden;
}
#screen-title::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
.title-container { position: relative; z-index: 1; padding: 2rem; }
.title-flicker { animation: flicker 4s infinite alternate; }
.game-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #c8362d;
  text-shadow: 0 0 20px rgba(200, 54, 45, 0.5), 0 0 60px rgba(200, 54, 45, 0.2);
  margin-bottom: 0.2em;
}
.game-subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-style: italic;
  color: #8a7e6b;
  letter-spacing: 0.2em;
}
.tagline {
  margin: 2rem 0;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #6b6359;
  font-style: italic;
}
.title-menu { display: flex; flex-direction: column; gap: 0.8rem; margin: 2rem auto; max-width: 280px; }
.credits { margin-top: 2rem; font-size: 0.8rem; color: #4a4540; }

@keyframes flicker {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.6; }
  98% { opacity: 1; }
}

/* ========== BUTTONS ========== */
.btn-main {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, #8b1a1a, #6b1515);
  color: #e8e0d4;
  border: 1px solid #a02020;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn-main:hover { background: linear-gradient(135deg, #a02020, #8b1a1a); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(160, 32, 32, 0.3); }
.btn-main:active { transform: translateY(0); }
.btn-secondary {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 0.7rem 1.5rem;
  background: transparent;
  color: #8a7e6b;
  border: 1px solid #3a3530;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-secondary:hover { border-color: #6b6359; color: #b0a898; }

/* ========== CARA BERMAIN / RULES SCREEN ========== */
.rules-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  max-height: 100vh;
}
.rules-title {
  font-family: 'Crimson Text', serif;
  font-size: 1.6rem;
  color: #e63946;
  text-align: center;
  margin-bottom: 0.3rem;
}
.rules-intro {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #8696a0;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.rules-section {
  margin-bottom: 1.2rem;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.rules-section h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #e9edef;
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.rules-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rules-section ul li {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #ccd6dd;
  padding: 0.3rem 0;
  padding-left: 1rem;
  position: relative;
  line-height: 1.5;
}
.rules-section ul li::before {
  content: '•';
  color: #e63946;
  position: absolute;
  left: 0;
  font-weight: bold;
}
.rules-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.rules-action-item {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #ccd6dd;
  padding: 0.35rem 0.5rem;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ra-icon {
  font-size: 1rem;
  min-width: 1.2rem;
  text-align: center;
}
.rules-hunter-intro {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #ffd700;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  font-style: italic;
}
.rules-back-btn {
  margin-top: 1.2rem;
  width: 100%;
}
@media (max-width: 480px) {
  .rules-container { padding: 1.2rem 1rem; }
  .rules-actions { grid-template-columns: 1fr; }
  .rules-title { font-size: 1.3rem; }
  .rules-section h3 { font-size: 0.88rem; }
  .rules-action-item { font-size: 0.75rem; }
}

/* ========== GAME SCREEN (WhatsApp Dark Mode) ========== */
#screen-game {
  flex-direction: column;
  background: #0b141a;
  position: relative;
}
#screen-game::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #0b141a;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M30 5 L35 15 L30 12 L25 15Z' fill='%23091117' opacity='0.5'/%3E%3Ccircle cx='10' cy='40' r='2' fill='%23091117' opacity='0.3'/%3E%3Ccircle cx='50' cy='50' r='1.5' fill='%23091117' opacity='0.3'/%3E%3Cpath d='M45 25 Q50 20 55 25' stroke='%23091117' fill='none' stroke-width='1' opacity='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Top Bar — WhatsApp header style */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  background: #1f2c34;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.top-bar.wa-header {
  justify-content: flex-start;
  gap: 0.5rem;
}
.wa-header-info {
  flex: 1;
  min-width: 0;
}
.wa-group-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e9edef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-group-members {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: #8696a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-indicator {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8696a0;
}

/* Encrypted Notice — WhatsApp-style */
.wa-encrypted-notice {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  color: rgba(134,150,160,0.7);
  padding: 0.4rem 1rem;
  background: rgba(17,27,33,0.85);
  border-radius: 8px;
  margin: 0.6rem auto 0.3rem;
  max-width: 85%;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
.wa-lock-icon {
  font-size: 0.55rem;
  margin-right: 0.2rem;
}
.icon-btn {
  font-size: 1.2rem;
  background: none;
  border: none;
  color: #8696a0;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  transition: color 0.3s;
  border-radius: 50%;
}
.icon-btn:hover { color: #e9edef; background: rgba(134,150,160,0.1); }

/* Story Area — chat thread */
.story-area {
  flex: 1;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0.6rem 0.8rem 160px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}
.story-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #e9edef;
}
.story-text p { margin-bottom: 0; }
.story-text .speaker {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3em;
}
.story-text .speaker.arin { color: #53bdeb; }
.story-text .speaker.niko { color: #e69138; }
.story-text .speaker.sera { color: #d4a0b9; }
.story-text .speaker.juno { color: #6fcf97; }
.story-text .speaker.vira { color: #b39ddb; }
.story-text .speaker.entity { color: #00cc66; text-shadow: 0 0 10px rgba(0,204,102,0.5); }
.story-text .speaker.reza { color: #b0a080; }
.story-text .speaker.lana { color: #ef5350; }
.story-text .speaker.dimas { color: #64b5f6; }
.story-text .speaker.kira { color: #26c6da; }
.story-text .speaker.farah { color: #ffd54f; }

/* CSS Avatars for side characters */
.css-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.css-avatar.reza { background: linear-gradient(135deg, #5a4e3c, #7a6e5c); }
.css-avatar.lana { background: linear-gradient(135deg, #8b0000, #a02020); }
.css-avatar.dimas { background: linear-gradient(135deg, #3a6b8c, #5a8bac); }
.css-avatar.kira { background: linear-gradient(135deg, #006b8c, #00b4d8); }
.css-avatar.farah { background: linear-gradient(135deg, #8b6b00, #b8860b); }

/* Ending Rating Colors */
.ending-s, .ending-rating-s { color: #ffd700; text-shadow: 0 0 15px rgba(255,215,0,0.5); }
.ending-a, .ending-rating-a { color: #50c878; }
.ending-b, .ending-rating-b { color: #5b9bd5; }
.ending-c, .ending-rating-c { color: #d4a030; }
.ending-d, .ending-rating-d { color: #c87040; }
.ending-f, .ending-rating-f { color: #c8362d; }
.story-text .narration { color: #8696a0; font-style: italic; font-size: 0.82rem; }
.story-text .horror { color: #ef5350; text-shadow: 0 0 5px rgba(239,83,80,0.3); }
.story-text .whisper { color: #5a6670; font-style: italic; font-size: 0.82em; }
.story-text .memory { color: #64b5f6; font-style: italic; border-left: 2px solid #1a3a50; padding-left: 1em; margin: 0.5em 0; font-size: 0.85em; }
.story-text .sound { color: #8696a0; font-family: 'Inter', sans-serif; font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; display: block; margin: 0.5em 0; }
.story-text .journal {
  display: block;
  font-style: italic;
  color: #b8d4a0;
  background: rgba(0,92,75,0.15);
  border-left: 3px solid rgba(0,168,132,0.4);
  padding: 0.5em 0.8em;
  margin: 0.3em 0;
  font-size: 0.82rem;
  border-radius: 0 8px 8px 0;
}
/* ========== INTERACTIVE CHOICE SYSTEM (WhatsApp input area style) ========== */
.choices-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.5rem 0.6rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(to top, #1f2c34 85%, transparent);
  z-index: 5;
  max-height: 38vh;
  overflow-y: auto;
}

.choice-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  text-align: left;
  padding: 0;
  background: #1f2c34;
  color: #e9edef;
  border: 1px solid rgba(134,150,160,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
}
.choice-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cat-color, #8b1a1a);
  transform: scaleY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.choice-btn:hover { border-color: rgba(0,168,132,0.4); color: #e9edef; background: #233138; transform: none; }
.choice-btn:hover::before { transform: scaleY(1); }

/* Choice inner layout */
.choice-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  position: relative;
}
.choice-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  background: rgba(0,0,0,0.3);
  border-right: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}
.choice-icon-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cat-color, #666);
  opacity: 0.08;
  transition: opacity 0.3s;
}
.choice-btn:hover .choice-icon-wrap::after { opacity: 0.2; }
.choice-icon { font-size: 1.35rem; position: relative; z-index: 1; filter: grayscale(0.3); transition: filter 0.3s, transform 0.3s; }
.choice-btn:hover .choice-icon { filter: grayscale(0); transform: scale(1.15); }
.choice-content { flex: 1; padding: 0.8rem 1rem; min-width: 0; }
.choice-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cat-color, #888);
  margin-bottom: 0.2em;
  opacity: 0.8;
}
.choice-text-main { font-size: 0.95rem; color: #c8c0b4; line-height: 1.45; }
.choice-btn:hover .choice-text-main { color: #e0d8cc; }
.choice-hint {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: #5a554e;
  margin-top: 0.3em;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* Risk/Reward Meters */
.choice-meters {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0.6rem 0.8rem;
  min-width: 90px;
  border-left: 1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.15);
}
.choice-meter { display: flex; align-items: center; gap: 4px; }
.meter-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #666;
  min-width: 32px;
  text-align: right;
}
.meter-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}
.meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.meter-fill.meter-low { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.meter-fill.meter-mid { background: linear-gradient(90deg, #f39c12, #e67e22); }
.meter-fill.meter-high { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.meter-fill.reward-fill.meter-low { background: linear-gradient(90deg, #636e72, #7f8c8d); }
.meter-fill.reward-fill.meter-mid { background: linear-gradient(90deg, #3498db, #2980b9); }
.meter-fill.reward-fill.meter-high { background: linear-gradient(90deg, #c8a96e, #d4a843); }

/* Danger Badge */
.choice-danger-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  color: #ff4444;
  background: rgba(255, 50, 50, 0.12);
  border: 1px solid rgba(255, 50, 50, 0.3);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  animation: dangerPulse 1.5s ease-in-out infinite;
}
@keyframes dangerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Category Color Borders */
.choice-cat-investigate { --cat-color: #c8a96e; border-color: rgba(200,169,110,0.2); }
.choice-cat-investigate:hover { border-color: rgba(200,169,110,0.5); }
.choice-cat-confront { --cat-color: #e63946; border-color: rgba(230,57,70,0.2); }
.choice-cat-confront:hover { border-color: rgba(230,57,70,0.5); }
.choice-cat-social { --cat-color: #4ecdc4; border-color: rgba(78,205,196,0.15); }
.choice-cat-social:hover { border-color: rgba(78,205,196,0.4); }
.choice-cat-move { --cat-color: #7f8c8d; border-color: rgba(127,140,141,0.15); }
.choice-cat-move:hover { border-color: rgba(127,140,141,0.4); }
.choice-cat-stealth { --cat-color: #9b59b6; border-color: rgba(155,89,182,0.2); }
.choice-cat-stealth:hover { border-color: rgba(155,89,182,0.5); }
.choice-cat-protect { --cat-color: #2ecc71; border-color: rgba(46,204,113,0.15); }
.choice-cat-protect:hover { border-color: rgba(46,204,113,0.4); }
.choice-cat-killer { --cat-color: #8b0000; border-color: rgba(139,0,0,0.3); background: rgba(40,10,10,0.85); }
.choice-cat-killer:hover { border-color: rgba(200,20,20,0.6); background: rgba(50,15,15,0.95); }
.choice-cat-escape { --cat-color: #f39c12; border-color: rgba(243,156,18,0.2); }
.choice-cat-escape:hover { border-color: rgba(243,156,18,0.5); }
.choice-cat-alliance { --cat-color: #3498db; border-color: rgba(52,152,219,0.15); }
.choice-cat-alliance:hover { border-color: rgba(52,152,219,0.4); }
.choice-cat-accuse { --cat-color: #e74c3c; border-color: rgba(231,76,60,0.2); }
.choice-cat-accuse:hover { border-color: rgba(231,76,60,0.5); }
.choice-cat-hack { --cat-color: #00d2ff; border-color: rgba(0,210,255,0.15); }
.choice-cat-hack:hover { border-color: rgba(0,210,255,0.4); }
.choice-cat-negotiate { --cat-color: #f1c40f; border-color: rgba(241,196,15,0.15); }
.choice-cat-negotiate:hover { border-color: rgba(241,196,15,0.4); }
.choice-cat-observe { --cat-color: #bdc3c7; border-color: rgba(189,195,199,0.15); }
.choice-cat-observe:hover { border-color: rgba(189,195,199,0.4); }
.choice-cat-hide { --cat-color: #636e72; border-color: rgba(99,110,114,0.15); }
.choice-cat-hide:hover { border-color: rgba(99,110,114,0.4); }
.choice-cat-story { --cat-color: #dfe6e9; border-color: rgba(223,230,233,0.1); }
.choice-cat-story:hover { border-color: rgba(223,230,233,0.3); }

/* Interactive brain choices */
.choice-interactive { box-shadow: 0 0 0 1px rgba(200,169,110,0.1); }
.choice-interactive:hover { box-shadow: 0 0 12px rgba(200,169,110,0.15), 0 0 0 1px rgba(200,169,110,0.2); }

/* Dangerous choices */
.choice-dangerous { box-shadow: 0 0 8px rgba(200,20,20,0.1); }
.choice-dangerous:hover { box-shadow: 0 0 16px rgba(200,20,20,0.2); }

/* Legacy compat */
.choice-btn.choice-trust { border-color: #1a2a3a; }
.choice-btn.choice-trust:hover { border-color: #2a4a5a; }
.choice-btn.choice-special { border-color: #2a1a3a; background: rgba(100, 50, 150, 0.08); }
.choice-btn.choice-special:hover { border-color: #5a3a7a; background: rgba(100, 50, 150, 0.15); }

/* Click animation */
.choice-selected { transform: scale(0.97); opacity: 0.7; transition: all 0.2s; border-color: var(--cat-color, #c8a96e) !important; }
.choice-fading { opacity: 0.15; transform: translateX(-10px); transition: all 0.35s; pointer-events: none; }

/* Text Animation */
.story-text .char-fade { opacity: 0; animation: charFade 0.02s forwards; }
@keyframes charFade { to { opacity: 1; } }

/* ========== PANELS ========== */
.panel {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 300px;
  max-width: 85vw;
  background: #111b21;
  border: 1px solid rgba(134,150,160,0.1);
  z-index: 100;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.panel-left { left: 0; transform: translateX(-100%); }
.panel-left.open { transform: translateX(0); }
.panel-right { right: 0; transform: translateX(100%); }
.panel-right.open { transform: translateX(0); }
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  background: #1f2c34;
  border-bottom: none;
}
.panel-header h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #e9edef;
}
.panel-body { padding: 1rem 1.2rem; flex: 1; }
.panel-close { font-size: 1.5rem; }

/* Character Cards */
.char-card {
  padding: 0.8rem 0;
  border-bottom: 1px solid #1a1815;
}
.char-card:last-child { border-bottom: none; }
.char-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.3em;
}
.char-status {
  font-size: 0.8rem;
  color: #6b6359;
}
.char-status.dead { color: #8b1a1a; text-decoration: line-through; }
.char-status.corrupted { color: #6b1a6b; }
.char-rel {
  font-size: 0.75rem;
  color: #5a554e;
  margin-top: 0.2em;
}
.char-rel-bar {
  height: 3px;
  background: #1a1815;
  border-radius: 2px;
  margin-top: 0.3em;
  overflow: hidden;
}
.char-rel-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s;
}
.char-rel-fill.trust { background: #5b9bd5; }
.char-rel-fill.fear { background: #c8362d; }
.char-rel-fill.neutral { background: #6b6359; }
.char-rel-fill.awareness { background: #d4a030; }
.char-rel-fill.entity-bar { background: #00cc66; }
.char-awareness { font-size: 0.75rem; color: #d4a030; margin-top: 0.4em; }
.entity-card { border-color: #1a3a1a !important; }

/* Menu Items */
.btn-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 0.9rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid #1a1815;
  color: #8a7e6b;
  cursor: pointer;
  transition: color 0.3s;
}
.btn-menu-item:hover { color: #d4cec4; }

/* ========== ENDING SCREEN ========== */
#screen-ending {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1.2rem;
  background: radial-gradient(ellipse at center, #1a0505 0%, #0a0a0a 70%);
  overflow-y: auto;
}
.ending-container { max-width: 600px; width: 100%; text-align: center; padding: 2rem 0; }
.ending-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: #6b6359;
  margin-bottom: 0.5rem;
}
.ending-number {
  font-size: 2rem;
  color: #c8362d;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.ending-title {
  font-size: 1.5rem;
  color: #d4cec4;
  font-style: italic;
  margin-bottom: 1rem;
}
.ending-rating {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.ending-rating.rating-S { color: #ffd700; text-shadow: 0 0 20px rgba(255,215,0,0.3); }
.ending-rating.rating-A { color: #5b9bd5; }
.ending-rating.rating-B { color: #6aa84f; }
.ending-rating.rating-C { color: #e69138; }
.ending-rating.rating-D { color: #c27ba0; }
.ending-rating.rating-F { color: #c8362d; }
.gi-number.rating-S { color: #ffd700 !important; }
.gi-number.rating-A { color: #5b9bd5 !important; }
.gi-number.rating-B { color: #6aa84f !important; }
.gi-number.rating-C { color: #e69138 !important; }
.gi-number.rating-D { color: #c27ba0 !important; }
.gi-number.rating-F { color: #c8362d !important; }
.ending-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #a09888;
  margin-bottom: 2rem;
  text-align: left;
}
.ending-fates {
  text-align: left;
  margin-bottom: 2rem;
}
.fate-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid #1a1815;
  font-size: 0.95rem;
}
.fate-name { font-weight: 600; }
.fate-alive { color: #6aa84f; }
.fate-dead { color: #c8362d; }
.fate-corrupted { color: #8e7cc3; }
.ending-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ========== GALLERY ========== */
#screen-gallery {
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  background: #0a0a0a;
  overflow-y: auto;
}
.gallery-container { max-width: 900px; width: 100%; }
.gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.gallery-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a7e6b;
}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.8rem; }
.gallery-item {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #131110;
  border: 1px solid #1a1815;
  border-radius: 6px;
  cursor: default;
  transition: all 0.3s;
  padding: 0.5rem;
  text-align: center;
}
.gallery-item.unlocked { border-color: #3a2520; cursor: pointer; }
.gallery-item.unlocked:hover { border-color: #6b3530; background: #1a1210; }
.gallery-item .gi-number { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #4a4540; margin-bottom: 0.3rem; }
.gallery-item .gi-title { font-size: 0.8rem; color: #3a3530; }
.gallery-item.unlocked .gi-number { color: #c8362d; }
.gallery-item.unlocked .gi-title { color: #8a7e6b; }
.gallery-item .gi-locked { font-size: 1.5rem; color: #2a2520; }
.gallery-item .gi-tap { font-size: 0.6rem; color: #5a4a40; margin-top: 0.2rem; font-style: italic; }
.gallery-item .gi-requirements { font-size: 0.6rem; color: #6a5a4a; margin-top: 0.3rem; line-height: 1.3; padding: 0.2rem; border-top: 1px solid #1a1815; }
.gi-req-rating { font-weight: bold; font-size: 0.65rem; margin-right: 0.2rem; }
.gi-req-rating.rating-S { color: #ffd700; }
.gi-req-rating.rating-A { color: #5b9bd5; }
.gi-req-rating.rating-B { color: #6aa84f; }
.gi-req-rating.rating-C { color: #e69138; }
.gi-req-rating.rating-D { color: #c27ba0; }
.gi-req-rating.rating-F { color: #c8362d; }

/* ========== GALLERY HOOKS ========== */
.gallery-item .gi-hook {
  font-size: 0.6rem;
  color: #8b7355;
  margin-top: 0.3rem;
  font-style: italic;
  line-height: 1.4;
  opacity: 0.85;
}

/* ========== POST-GAME TEASER ========== */
.postgame-teaser {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2a2520;
}
.teaser-header {
  font-size: 0.85rem;
  color: #c8a96e;
  margin-bottom: 0.8rem;
  font-style: italic;
  letter-spacing: 0.05em;
}
.teaser-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid #1a1815;
}
.teaser-rating {
  font-weight: bold;
  font-size: 0.7rem;
  margin-right: 0.3rem;
}
.teaser-title {
  font-size: 0.8rem;
  color: #9a8e7b;
}
.teaser-hook {
  font-size: 0.75rem;
  color: #8b7355;
  font-style: italic;
  margin-top: 0.2rem;
  line-height: 1.5;
}

/* ========== TITLE MYSTERY ========== */
.title-mystery {
  margin: 0.8rem auto;
  max-width: 320px;
  text-align: center;
  min-height: 2.5rem;
}
.mystery-label {
  font-size: 0.7rem;
  color: #6a5a4a;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.mystery-hook {
  font-size: 0.75rem;
  color: #c8a96e;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.9;
}
.mystery-complete {
  font-size: 0.75rem;
  color: #ffd700;
  font-style: italic;
}

/* ========== ENDING READER ========== */
#screen-ending-reader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: #0a0908;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ending-reader-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem;
  width: 100%;
}
.ending-reader-content {
  color: #8a7e6b;
  line-height: 1.8;
  font-size: 0.95rem;
}
.ending-reader-content p { margin-bottom: 0.8rem; }
.ending-reader-fates {
  margin-top: 1.5rem;
  border-top: 1px solid #2a2520;
  padding-top: 1rem;
}

/* ========== OVERLAY ========== */
.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.overlay.active { opacity: 1; pointer-events: all; }

/* ========== NOTIFICATION ========== */
.notification {
  position: fixed;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  padding: 0.7rem 1.5rem;
  background: #1a1815;
  color: #b0a898;
  border: 1px solid #2a2520;
  border-radius: 6px;
  z-index: 200;
  transition: bottom 0.4s ease;
  white-space: nowrap;
}
.notification.show { bottom: 1.5rem; }

/* ========== EFFECTS ========== */
.screen-shake { animation: shake 0.3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.blood-drip {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to bottom, #8b1a1a, transparent);
  z-index: 200;
  opacity: 0;
  animation: drip 2s forwards;
}
@keyframes drip { 0% { opacity: 0; height: 0; } 30% { opacity: 1; height: 4px; } 100% { opacity: 0; height: 30px; } }

/* Glitch effect */
.glitch-effect {
  animation: glitchAnim 0.6s;
}
@keyframes glitchAnim {
  0%, 100% { filter: none; transform: none; }
  10% { filter: hue-rotate(90deg); transform: translateX(-2px); }
  20% { filter: hue-rotate(-90deg); transform: translateX(2px); }
  30% { filter: hue-rotate(180deg) saturate(3); }
  40% { filter: none; transform: translateX(-1px) skewX(2deg); }
  50% { filter: invert(0.1); }
  60% { filter: hue-rotate(90deg); transform: skewX(-1deg); }
  70% { filter: none; }
}

/* ========== DIFFICULTY SELECTOR ========== */
#screen-difficulty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, #0a1a0a 0%, #0a0a0a 70%);
}
.diff-heading {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a7e6b;
  margin-bottom: 0.5rem;
}
.diff-subheading {
  font-size: 0.9rem;
  color: #5a554e;
  margin-bottom: 2rem;
  font-style: italic;
}
.diff-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 400px;
  width: 90%;
}
.diff-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1.2rem 1.5rem;
  background: rgba(20, 18, 15, 0.9);
  border: 1px solid #2a2520;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  color: #d4d0c8;
  font-family: 'Crimson Text', Georgia, serif;
}
.diff-btn:hover {
  border-color: #4a3a30;
  background: rgba(30, 25, 20, 0.95);
  transform: translateX(4px);
}
.diff-btn:nth-child(1):hover { border-left: 3px solid #6aa84f; }
.diff-btn:nth-child(2):hover { border-left: 3px solid #e69138; }
.diff-btn:nth-child(3):hover { border-left: 3px solid #c8362d; }
.diff-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}
.diff-btn:nth-child(1) .diff-label { color: #6aa84f; }
.diff-btn:nth-child(2) .diff-label { color: #e69138; }
.diff-btn:nth-child(3) .diff-label { color: #c8362d; }
.diff-desc {
  font-size: 0.85rem;
  color: #6b6359;
  line-height: 1.5;
}

/* Relationship change notification */
.rel-change {
  position: fixed;
  top: 4rem;
  right: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  z-index: 150;
  animation: relPop 2.5s forwards;
  pointer-events: none;
}
.rel-change.positive { background: rgba(42, 74, 90, 0.9); color: #7ab5d5; border: 1px solid #3a6a8a; }
.rel-change.negative { background: rgba(90, 30, 30, 0.9); color: #d57a7a; border: 1px solid #8a3a3a; }
@keyframes relPop { 0% { opacity: 0; transform: translateY(-10px); } 10% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }

/* ========== SCENE ILLUSTRATIONS (CSS Art) ========== */
.scene-art {
  width: 100%;
  max-width: 500px;
  margin: 1.5em auto;
  aspect-ratio: 16/7;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: sceneReveal 1.5s 0.3s forwards;
}
@keyframes sceneReveal {
  0% { opacity: 0; transform: scale(1.05); filter: blur(5px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.scene-forest {
  background: linear-gradient(180deg, #0a1a0a 0%, #0d2010 30%, #0a180d 60%, #050d05 100%);
}
.scene-forest::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;
  background: 
    linear-gradient(170deg, transparent 40%, #0a1a0a 41%, transparent 41.5%),
    linear-gradient(190deg, transparent 35%, #0d200d 36%, transparent 36.5%),
    linear-gradient(175deg, transparent 45%, #081808 46%, transparent 46.5%),
    linear-gradient(185deg, transparent 30%, #0a1a0a 31%, transparent 31.5%),
    linear-gradient(172deg, transparent 50%, #0d250d 51%, transparent 51.5%);
}
.scene-forest::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,200,180,0.2), transparent 60%);
  animation: moonGlow 4s ease-in-out infinite alternate;
}
@keyframes moonGlow {
  0% { opacity: 0.6; box-shadow: 0 0 20px rgba(200,200,180,0.1); }
  100% { opacity: 1; box-shadow: 0 0 40px rgba(200,200,180,0.2); }
}

.scene-cabin {
  background: linear-gradient(180deg, #0a0a15 0%, #151520 40%, #1a1510 70%, #0d0a08 100%);
}
.scene-cabin::before {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 80px;
  background: #1a1510;
  clip-path: polygon(10% 100%, 10% 30%, 50% 0%, 90% 30%, 90% 100%);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.scene-cabin::after {
  content: '';
  position: absolute;
  bottom: 35%;
  left: calc(50% - 12px);
  width: 24px;
  height: 30px;
  background: rgba(180,120,40,0.3);
  animation: windowFlicker 3s ease-in-out infinite;
}
@keyframes windowFlicker {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
  70% { opacity: 0.2; }
  85% { opacity: 0.6; }
}

.scene-ritual {
  background: radial-gradient(circle at 50% 70%, #0a2a0a 0%, #050d05 50%, #020502 100%);
}
.scene-ritual::before {
  content: '';
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0,204,102,0.3);
  border-radius: 50%;
  animation: ritualPulse 2s ease-in-out infinite;
}
@keyframes ritualPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; }
  50% { transform: translateX(-50%) scale(1.15); opacity: 0.8; }
}
.scene-ritual::after {
  content: '';
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #00cc66;
  border-radius: 50%;
  box-shadow: 0 0 20px #00cc66, 0 0 40px rgba(0,204,102,0.5);
  animation: stoneGlow 1.5s ease-in-out infinite alternate;
}
@keyframes stoneGlow {
  0% { box-shadow: 0 0 10px #00cc66; }
  100% { box-shadow: 0 0 30px #00cc66, 0 0 60px rgba(0,204,102,0.3); }
}

.scene-entity {
  background: radial-gradient(circle at 50% 50%, #001a00 0%, #000a00 50%, #000 100%);
  animation: entityScene 3s ease-in-out infinite;
}
@keyframes entityScene {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2) hue-rotate(10deg); }
}
.scene-entity::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
  background: transparent;
  border-bottom: none;
  box-shadow: 
    -25px -5px 0 3px rgba(0,255,80,0.6),
    25px -5px 0 3px rgba(0,255,80,0.6),
    -25px -5px 10px 5px rgba(0,255,80,0.2),
    25px -5px 10px 5px rgba(0,255,80,0.2);
  border-radius: 50%;
  animation: entityEyes 4s ease-in-out infinite;
}
@keyframes entityEyes {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0; }
  94% { opacity: 1; }
  95% { opacity: 0; }
  97% { opacity: 1; }
}

.scene-dawn {
  background: linear-gradient(180deg, #1a0a20 0%, #3a1020 20%, #8a3020 45%, #cc8040 65%, #e8c080 80%, #f0e0b0 100%);
}

/* ========== AMBIENT FOG ========== */
#screen-game::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(10,20,10,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(10,15,10,0.2) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
  animation: fogDrift 15s ease-in-out infinite alternate;
}
@keyframes fogDrift {
  0% { opacity: 0.3; transform: translateX(-10px); }
  100% { opacity: 0.6; transform: translateX(10px); }
}

/* ========== SCREEN TRANSITIONS ========== */
.screen { animation: screenFadeIn 0.8s ease-out; }
@keyframes screenFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ========== STORY TEXT ANIMATIONS ========== */
/* Stagger reveal is handled by .chat-item + JS in engine.js */

/* ========== CHOICE ANIMATIONS ========== */
.choice-btn {
  opacity: 0;
  animation: choiceAppear 0.5s ease-out forwards;
}
@keyframes choiceAppear {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ========== PARTICLE SYSTEM ========== */
.particle-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(0,180,80,0.3);
  border-radius: 50%;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(30px); opacity: 0; }
}

/* ========== DEATH FLASH ========== */
.death-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(139, 26, 26, 0.4);
  z-index: 200;
  animation: deathFlashAnim 0.8s forwards;
  pointer-events: none;
}
@keyframes deathFlashAnim {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

/* ========== ENTITY PRESENCE ========== */
.entity-ambient {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,30,0,0.15) 100%);
  animation: entityAmbient 8s ease-in-out infinite alternate;
}
@keyframes entityAmbient {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ========== CHAPTER TRANSITION ========== */
.chapter-transition {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: chapterTrans 3s forwards;
}
.chapter-transition span {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6b6359;
  animation: chapterText 3s forwards;
}
@keyframes chapterTrans {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}
@keyframes chapterText {
  0% { opacity: 0; transform: translateY(10px); }
  20% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ========== SPEAKER PORTRAIT (inline) ========== */
.speaker-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
  border: 2px solid rgba(200, 54, 45, 0.4);
  box-shadow: 0 0 8px rgba(200, 54, 45, 0.2);
}

/* ========== CHARACTER PANEL PORTRAITS ========== */
.char-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.char-portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(200, 54, 45, 0.4);
  box-shadow: 0 0 10px rgba(200, 54, 45, 0.15);
  flex-shrink: 0;
}
.char-info { flex: 1; }

/* ========== ROLE SELECTION SCREEN ========== */
#screen-role-select {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: radial-gradient(ellipse at center, #1a0a0a 0%, #0a0a0a 70%);
  padding: 2rem;
  overflow-y: auto;
}
.role-select-container {
  max-width: 1000px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.role-select-heading {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  color: #c8362d;
  text-shadow: 0 0 20px rgba(200, 54, 45, 0.4);
  margin-bottom: 0.5rem;
  letter-spacing: 0.15em;
}
.role-select-subheading {
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: #8a7e6b;
  font-style: italic;
  margin-bottom: 2rem;
}
.role-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.role-card {
  background: rgba(30, 25, 20, 0.8);
  border: 1px solid rgba(200, 54, 45, 0.15);
  border-radius: 12px;
  padding: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: charCardIn 0.5s ease-out both;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
.role-card:hover {
  border-color: var(--role-color, #c8362d);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(200, 54, 45, 0.2);
  background: rgba(40, 32, 25, 0.9);
}
.role-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(200, 54, 45, 0.3);
}
.css-avatar-role {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
}
.role-info { flex: 1; min-width: 0; }
.role-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}
.role-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a7e6b;
  margin-bottom: 0.3rem;
}
.role-perk {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #c8a96e;
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.role-desc {
  font-size: 0.85rem;
  color: #a09888;
  line-height: 1.4;
}
.role-warning {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: #c8362d;
  margin-top: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: rgba(200, 54, 45, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(200, 54, 45, 0.3);
}
.role-card-survivor {
  border-color: rgba(74, 124, 89, 0.3);
}
.role-card-survivor:hover {
  border-color: #4a7c59;
  box-shadow: 0 4px 20px rgba(74, 124, 89, 0.25);
}
.role-card-killer {
  border-color: rgba(200, 54, 45, 0.2);
}
.role-card-killer:hover {
  border-color: #c8362d;
  box-shadow: 0 4px 20px rgba(200, 54, 45, 0.25);
}
.role-survivor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.role-survivor-chip {
  font-size: 0.7rem;
  color: #c8a96e;
  padding: 0.2rem 0.5rem;
  border: 1px solid;
  border-radius: 12px;
  white-space: nowrap;
}
.player-tag {
  color: #c8a96e;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (max-width: 700px) {
  .role-portrait { width: 48px; height: 48px; }
  .role-desc { font-size: 0.8rem; }
}

/* ========== CHARACTER INTRO SCREEN ========== */
#screen-characters {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a0a0a 0%, #0a0a0a 70%);
  padding: 2rem;
  overflow-y: auto;
}
.char-intro-container {
  max-width: 900px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.char-intro-heading {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  color: #c8362d;
  text-shadow: 0 0 20px rgba(200, 54, 45, 0.4);
  margin-bottom: 0.5rem;
  letter-spacing: 0.15em;
}
.char-intro-subheading {
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: #8a7e6b;
  font-style: italic;
  margin-bottom: 2rem;
}
.characters-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.char-intro-card {
  background: rgba(30, 25, 20, 0.8);
  border: 1px solid rgba(200, 54, 45, 0.15);
  border-radius: 12px;
  padding: 1.2rem 0.8rem;
  cursor: pointer;
  transition: all 0.4s ease;
  animation: charCardIn 0.6s ease-out both;
  position: relative;
  overflow: hidden;
}
.char-intro-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.char-intro-card:hover {
  transform: translateY(-8px);
  border-color: rgba(200, 54, 45, 0.5);
  box-shadow: 0 12px 40px rgba(200, 54, 45, 0.15), 0 0 20px rgba(200, 54, 45, 0.1);
}
.char-intro-card:hover::before { opacity: 1; }
@keyframes charCardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.char-intro-portrait-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 0.8rem;
}
.char-intro-portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(200, 54, 45, 0.3);
  position: relative;
  z-index: 1;
  transition: border-color 0.4s;
}
.char-intro-card:hover .char-intro-portrait {
  border-color: rgba(200, 54, 45, 0.7);
}
.char-intro-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.4s;
  z-index: 0;
}
.char-intro-card:hover .char-intro-glow { opacity: 0.3; }
.char-intro-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8e0d4;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}
.char-intro-role {
  font-size: 0.75rem;
  color: #8a7e6b;
  font-style: italic;
  line-height: 1.3;
}
.btn-start-story {
  margin-top: 1rem;
  font-size: 1.1rem;
  padding: 0.9rem 2.5rem;
  animation: charCardIn 0.6s ease-out 0.9s both;
}

/* ========== CHARACTER DETAIL MODAL ========== */
.char-detail-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  backdrop-filter: blur(4px);
}
.char-detail-modal.active { display: flex; }
.char-detail-content {
  background: #1a1510;
  border: 1px solid rgba(200, 54, 45, 0.3);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  animation: modalIn 0.4s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.char-detail-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  color: #8a7e6b;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s;
}
.char-detail-close:hover { color: #c8362d; }
.char-detail-header {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(200, 54, 45, 0.15);
}
.char-detail-portrait {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(200, 54, 45, 0.4);
  box-shadow: 0 0 20px rgba(200, 54, 45, 0.2);
  flex-shrink: 0;
}
.char-detail-info { flex: 1; }
.char-detail-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.char-detail-role {
  font-size: 0.85rem;
  color: #8a7e6b;
  font-style: italic;
  margin-bottom: 0.3rem;
}
.char-detail-age {
  font-size: 0.8rem;
  color: #6b6359;
}
.char-detail-quote {
  font-size: 0.9rem;
  color: #a89880;
  font-style: italic;
  margin-top: 0.5rem;
  padding-left: 0.8rem;
  border-left: 2px solid rgba(200, 54, 45, 0.3);
}
.char-detail-section {
  margin-bottom: 1.2rem;
}
.char-detail-section h3 {
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c8362d;
  margin-bottom: 0.5rem;
}
.char-detail-section p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #c4baa8;
}
.char-traits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.char-trait {
  background: rgba(200, 54, 45, 0.12);
  border: 1px solid rgba(200, 54, 45, 0.25);
  color: #d4c8b8;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
}
.char-weakness {
  color: #c86e5e !important;
  font-style: italic;
}
.char-rel-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.char-rel-entry {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: rgba(30, 25, 20, 0.6);
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(200, 54, 45, 0.08);
}
.char-rel-portrait {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(200, 54, 45, 0.3);
}
.char-rel-detail { flex: 1; }
.char-rel-detail strong {
  color: #d4c8b8;
  font-size: 0.85rem;
}
.char-rel-detail p {
  color: #a89880;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 0.2rem;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 480px) {
  .story-area { padding: 1rem 1rem 160px; }
  .choice-btn { padding: 0; }
  .choice-inner { flex-wrap: wrap; }
  .choice-icon-wrap { min-width: 40px; }
  .choice-meters { min-width: 70px; padding: 0.4rem 0.5rem; }
  .meter-label { font-size: 0.5rem; min-width: 28px; }
  .choice-content { padding: 0.6rem 0.7rem; }
  .choice-label { font-size: 0.55rem; }
  .choice-text-main { font-size: 0.85rem; }
  .panel { width: 280px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .scene-art { aspect-ratio: 16/9; }
  .characters-grid { grid-template-columns: repeat(2, 1fr); }
  .char-intro-portrait-wrap { width: 80px; height: 80px; }
  .char-detail-header { flex-direction: column; text-align: center; }
  .char-detail-portrait { width: 80px; height: 80px; }
  .char-detail-quote { text-align: left; }
}
@media (max-width: 680px) and (min-width: 481px) {
  .characters-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .story-area { padding: 2rem 2rem 160px; }
}

/* ========== NPC BRAIN SYSTEM STYLES ========== */

/* NPC Round Narrative */
.npc-round-narrative {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(20, 10, 30, 0.6);
  border-left: 3px solid #6a3d9a;
  border-radius: 4px;
}
.npc-round-narrative > p.narration { color: #9a7fcf; font-style: italic; margin-bottom: 0.5rem; }

.npc-event {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.9rem;
  line-height: 1.4;
}
.npc-event:last-child { border-bottom: none; }
.npc-event-death { color: #e63946; font-weight: 600; }
.npc-event-danger { color: #ff9f43; }
.npc-event-alliance { color: #4ecdc4; }
.npc-event-clue { color: #c8a96e; }
.npc-event-manipulation { color: #9b59b6; }

/* Brain Choices */
.choice-brain {
  border-left: 3px solid #6a3d9a !important;
  background: rgba(106, 61, 154, 0.1) !important;
}
.choice-brain::before {
  content: '\2699 ';
  color: #9a7fcf;
}
.choice-brain:hover {
  background: rgba(106, 61, 154, 0.2) !important;
  border-color: #9a7fcf !important;
}
.choice-brain-killer {
  border-left: 3px solid #8b0000 !important;
  background: rgba(139, 0, 0, 0.15) !important;
}
.choice-brain-killer::before {
  content: '\2620 ';
  color: #e63946;
}
.choice-brain-killer:hover {
  background: rgba(139, 0, 0, 0.25) !important;
  border-color: #e63946 !important;
}

/* Character Brain Info in Status Panel */
.char-brain-info {
  margin: 0.4rem 0;
  padding: 0.4rem 0.6rem;
  background: rgba(106, 61, 154, 0.1);
  border-radius: 4px;
  font-size: 0.78rem;
  border-left: 2px solid #6a3d9a;
}
.char-brain-emotion { margin-bottom: 0.2rem; color: #bbb; }
.char-brain-loc { color: #999; margin-bottom: 0.2rem; }
.char-brain-allies { color: #4ecdc4; margin-bottom: 0.2rem; }
.char-brain-clues { color: #c8a96e; }

/* Brain emotional state colors */
.brain-calm { color: #4ecdc4; }
.brain-wary { color: #f9ca24; }
.brain-suspicious { color: #ff9f43; }
.brain-panicked { color: #e63946; }
.brain-hostile { color: #ff0000; font-weight: 600; }
.brain-stalking { color: #9b59b6; }
.brain-hunting { color: #8b0000; }
.brain-executing { color: #ff0000; font-weight: 700; text-shadow: 0 0 8px rgba(255,0,0,0.5); }

/* NPC Log Panel */
.panel-npc-log { z-index: 102; }
.npc-log-empty { color: #666; font-style: italic; padding: 1rem; text-align: center; }

.npc-log-entry {
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  background: rgba(20, 20, 30, 0.5);
  border-radius: 6px;
  border-left: 2px solid #6a3d9a;
}
.npc-log-entry.npc-log-killer {
  border-left-color: #e63946;
  background: rgba(40, 10, 10, 0.5);
}
.npc-log-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.npc-log-portrait {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.npc-log-info {
  display: flex;
  flex-direction: column;
}
.npc-log-name { font-size: 0.85rem; font-weight: 600; }
.npc-log-status { font-size: 0.72rem; color: #9a7fcf; }
.npc-log-location { font-size: 0.75rem; color: #888; margin-bottom: 0.2rem; }
.npc-log-action { font-size: 0.8rem; color: #ccc; line-height: 1.3; }
.npc-log-allies { font-size: 0.72rem; color: #4ecdc4; margin-top: 0.2rem; }
.npc-log-clues { font-size: 0.72rem; color: #c8a96e; }

/* Win/Loss Alert */
.wl-alert {
  margin-top: 1.5rem;
  padding: 1.2rem;
  border-radius: 8px;
  text-align: center;
  animation: wlPulse 2s infinite;
}
.wl-win {
  background: rgba(46, 204, 113, 0.15);
  border: 2px solid rgba(46, 204, 113, 0.5);
}
.wl-loss {
  background: rgba(230, 57, 70, 0.15);
  border: 2px solid rgba(230, 57, 70, 0.5);
}
.wl-title {
  font-family: 'Crimson Text', serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.wl-win .wl-title { color: #2ecc71; }
.wl-loss .wl-title { color: #e63946; }
@keyframes wlPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* ---- Player Realtime Status Bar ---- */
/* Player status bar — WhatsApp-style sub-header */
.player-status-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  background: #1f2c34;
  font-size: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(134,150,160,0.08);
  position: sticky;
  top: 38px;
  z-index: 9;
}
.ps-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #e9edef;
  font-size: 0.82rem;
}
.ps-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.ps-tag {
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: none;
}
.ps-safe { background: rgba(0,168,132,0.2); color: #00a884; }
.ps-wounded { background: rgba(239,83,80,0.2); color: #ef5350; animation: psThrob 1.5s infinite; }
.ps-threat { background: rgba(200,20,20,0.3); color: #ff4444; animation: psThrob 0.8s infinite; }
.ps-detected { background: rgba(255,193,7,0.2); color: #ffc107; }
.ps-panicked { background: rgba(156,39,176,0.2); color: #ce93d8; }
.ps-tool {
  margin-left: auto;
  padding: 0.1rem 0.4rem;
  background: rgba(0,168,132,0.15);
  border-radius: 4px;
  font-size: 0.65rem;
  color: #00a884;
}
.ps-escape {
  padding: 0.1rem 0.5rem;
  background: rgba(83,189,235,0.12);
  border-radius: 4px;
  font-size: 0.62rem;
  color: #53bdeb;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* Player location detail — WhatsApp subtitle under chat name */
.ps-location {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: #8696a0;
  width: 100%;
  margin-top: -0.1rem;
}
.ps-location .loc-icon { margin-right: 0.2rem; }
.ps-location .loc-nearby { color: #aebac1; }
/* Team roster */
.ps-team {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.2rem 0.45rem;
  background: rgba(128,128,128,0.08);
  border-radius: 4px;
  font-size: 0.6rem;
  line-height: 1.5;
}
.ps-team-row { color: #8696a0; }
.ps-team .team-label { font-weight: 600; }
.ps-team .team-alive { color: #e9edef; }
.ps-team .team-dead { color: #555; text-decoration: line-through; }
@keyframes psThrob {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- Chance % Badge ---- */
.choice-chance {
  font-size: 0.7rem;
  color: #bdc3c7;
  margin-top: 0.2rem;
}
.chance-high { color: #2ecc71; }
.chance-mid { color: #f39c12; }
.chance-low { color: #e63946; }

/* ---- Location Context Header ---- */
.location-context {
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.8rem;
  background: rgba(200,169,110,0.08);
  border-left: 3px solid #c8a96e;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: #c8a96e;
}
.loc-icon { margin-right: 0.3rem; }

/* ---- Distant Event Hints ---- */
.npc-event-distant {
  opacity: 0.6;
  font-style: italic;
  font-size: 0.85rem;
  border-left: 2px solid rgba(200,169,110,0.2);
  padding-left: 0.5rem;
  margin-left: 0.5rem;
}

/* ---- Game Result Screen ---- */
.game-result {
  padding: 1rem 0;
}
.result-headline {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 6px;
  text-align: center;
}
.winner-protagonist .result-headline {
  background: rgba(46,204,113,0.15);
  color: #2ecc71;
  border: 1px solid rgba(46,204,113,0.4);
}
.winner-killer .result-headline {
  background: rgba(230,57,70,0.15);
  color: #e63946;
  border: 1px solid rgba(230,57,70,0.4);
}
.winner-draw .result-headline {
  background: rgba(243,156,18,0.15);
  color: #f39c12;
  border: 1px solid rgba(243,156,18,0.4);
}
.result-player-dead {
  color: #e63946;
  font-style: italic;
  margin-bottom: 1rem;
  text-align: center;
}
.result-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(200,169,110,0.08);
  border: 1px solid rgba(200,169,110,0.2);
  border-radius: 6px;
  min-width: 80px;
}
.stat-label {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #c8a96e;
}
.result-fates {
  margin-top: 1rem;
}
.fates-title {
  font-family: 'Crimson Text', serif;
  color: #c8a96e;
  font-size: 1rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(200,169,110,0.2);
  padding-bottom: 0.3rem;
}
.role-tag {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.killer-tag { background: rgba(230,57,70,0.2); color: #e63946; border: 1px solid rgba(230,57,70,0.4); }
.player-tag { background: rgba(52,152,219,0.2); color: #3498db; border: 1px solid rgba(52,152,219,0.4); }
.witness-tag { background: rgba(243,156,18,0.2); color: #f39c12; border: 1px solid rgba(243,156,18,0.4); }
.result-autosim {
  margin-top: 1.2rem;
  padding: 0.8rem;
  background: rgba(20,20,30,0.6);
  border: 1px solid rgba(200,169,110,0.15);
  border-radius: 6px;
}
.autosim-entry {
  font-size: 0.82rem;
  color: #aaa;
  margin-bottom: 0.3rem;
  padding-left: 0.5rem;
  border-left: 2px solid rgba(200,169,110,0.15);
}
.autosim-more {
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  margin-top: 0.5rem;
}

/* ---- Narrative Ending with Summary ---- */
.game-result-summary {
  margin-top: 1.5rem;
  padding: 1.2rem;
  background: rgba(15,15,25,0.7);
  border: 1px solid rgba(200,169,110,0.25);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.game-result-summary .fates-title {
  font-family: 'Crimson Text', serif;
  color: #c8a96e;
  font-size: 1.05rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid rgba(200,169,110,0.25);
  padding-bottom: 0.4rem;
  text-align: center;
}
.game-result-summary .result-headline {
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

/* ========== CHATBOX-STYLE STORY TEXT ========== */
.story-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.story-text p { margin-bottom: 0; }

/* Staggered reveal: items start hidden, revealed by JS */
.story-text .chat-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  scroll-margin-bottom: 50vh;
}
.story-text .chat-item.chat-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Typing indicator */
.chat-typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background: #202c33;
  border-radius: 8px;
  align-self: flex-start;
  margin-left: 42px;
}
.chat-typing-indicator .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8696a0;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.chat-typing-indicator .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-indicator .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Chat bubble container */
.chat-bubble {
  display: flex;
  gap: 0.45rem;
  align-items: flex-end;
  max-width: 82%;
}
.chat-bubble-right {
  flex-direction: row-reverse;
  align-self: flex-end;
}
.chat-bubble-left {
  align-self: flex-start;
}

/* Avatar in chat */
.chat-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  margin-bottom: 0.1rem;
  transition: transform 0.2s;
}
.chat-bubble:hover .chat-avatar {
  transform: scale(1.05);
}
.chat-avatar.css-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0.65rem;
}

/* Chat message content */
.chat-content {
  flex: 1;
  min-width: 0;
}
.chat-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-bottom: 0.1rem;
}
.chat-name.arin { color: #53bdeb; }
.chat-name.niko { color: #e69138; }
.chat-name.sera { color: #d4a0b9; }
.chat-name.juno { color: #6fcf97; }
.chat-name.vira { color: #b39ddb; }
.chat-name.reza { color: #b0a080; }
.chat-name.lana { color: #ef5350; }
.chat-name.dimas { color: #64b5f6; }
.chat-name.kira { color: #26c6da; }
.chat-name.farah { color: #ffd54f; }
.chat-name.entity { color: #00cc66; text-shadow: 0 0 6px rgba(0,204,102,0.3); }

/* Player bubble (right side) — WhatsApp teal-green */
.chat-bubble-right .chat-msg {
  background: #005c4b;
  border: none;
  border-radius: 10px 10px 3px 10px;
  padding: 0.4rem 0.65rem 0.35rem;
  color: #e9edef;
  font-size: 0.88rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  position: relative;
}
.chat-bubble-right:hover .chat-msg {
  box-shadow: 0 2px 6px rgba(0,92,75,0.3);
}
.chat-bubble-right .chat-name {
  text-align: right;
  color: #a0d9c8;
}

/* NPC bubble (left side) — WhatsApp dark gray */
.chat-bubble-left .chat-msg {
  background: #202c33;
  border: none;
  border-radius: 10px 10px 10px 3px;
  padding: 0.4rem 0.65rem 0.35rem;
  color: #e9edef;
  font-size: 0.88rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  position: relative;
}
.chat-bubble-left:hover .chat-msg {
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Killer bubble — menacing dark red tint */
.chat-bubble-killer .chat-msg {
  background: #2c1215;
  box-shadow: 0 1px 4px rgba(200, 54, 45, 0.1);
}
.chat-bubble-killer:hover .chat-msg {
  box-shadow: 0 2px 8px rgba(200, 54, 45, 0.15);
}
.chat-bubble-killer .chat-avatar {
  box-shadow: 0 0 6px rgba(200, 54, 45, 0.25);
}

/* Entity/system speaker bubble */
.chat-bubble-entity .chat-msg {
  background: rgba(0, 55, 38, 0.6);
  border: 1px solid rgba(0, 204, 102, 0.15);
  color: #a0e8c0;
  box-shadow: 0 0 8px rgba(0, 204, 102, 0.05);
}

/* Chat timestamp inside bubble */
.chat-time {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  color: rgba(134,150,160,0.7);
  float: right;
  margin-left: 0.6rem;
  margin-top: 0.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 3px;
}
.chat-bubble-right .chat-time {
  color: rgba(134,210,190,0.6);
}
.chat-read-receipt {
  font-size: 0.7rem;
  color: #53bdeb;
}

/* Scene divider */
.chat-scene-break {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  padding: 0.15rem 0;
}
.chat-scene-break::before,
.chat-scene-break::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(134,150,160,0.2), transparent);
}
.chat-scene-break .break-icon {
  font-size: 0.5rem;
  color: rgba(134,150,160,0.35);
  letter-spacing: 0.3em;
}

/* Narration — WhatsApp system message style */
.chat-narration {
  text-align: center;
  color: #8696a0;
  font-size: 0.72rem;
  line-height: 1.45;
  padding: 0.2rem 0.8rem;
  max-width: 80%;
  align-self: center;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  background: rgba(17,27,33,0.85);
  border-radius: 8px;
  position: relative;
}
.chat-narration::before,
.chat-narration::after {
  display: none;
}

/* Collapsible narration group */
.chat-narration-collapsed {
  align-self: center;
  text-align: center;
}
.narration-expand-btn {
  background: rgba(17,27,33,0.85);
  border: none;
  border-radius: 8px;
  padding: 0.2rem 0.8rem;
  color: #8696a0;
  font-size: 0.65rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 auto;
}
.narration-expand-btn:hover {
  background: rgba(32,44,51,0.9);
  color: #aebac1;
}
.expand-dots {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
}
.narration-hidden-content {
  display: none;
  margin-top: 0.35rem;
}
.chat-narration-collapsed.expanded .narration-hidden-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.chat-narration-collapsed.expanded .narration-expand-btn .expand-label {
  display: none;
}
.chat-narration-collapsed.expanded .narration-expand-btn .expand-dots::after {
  content: ' sembunyikan';
  letter-spacing: normal;
  font-size: 0.65rem;
}

/* Horror narration — pulsing red glow */
.chat-narration-horror {
  color: #ef5350;
  background: rgba(44,18,21,0.85) !important;
  text-shadow: 0 0 4px rgba(239,83,80,0.3);
  animation: horrorPulse 3s ease-in-out infinite;
}
@keyframes horrorPulse {
  0%, 100% { text-shadow: 0 0 4px rgba(239,83,80,0.3); }
  50% { text-shadow: 0 0 8px rgba(239,83,80,0.5); }
}

/* Sound effects in chat */
.chat-sound {
  text-align: center;
  color: #8696a0;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.8rem;
  align-self: center;
  background: rgba(17,27,33,0.85);
  border-radius: 8px;
}

/* Location context — WhatsApp system pill */
.location-context {
  text-align: center;
  background: rgba(17,27,33,0.9);
  border: none;
  border-radius: 8px;
  padding: 0.25rem 0.9rem;
  font-size: 0.7rem;
  color: #8696a0;
  align-self: center;
  margin-bottom: 0.2rem;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.location-context strong {
  color: #e9edef;
}

/* NPC event narratives in chatbox */
.npc-round-narrative {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.3rem;
  padding: 0.4rem 0.65rem;
  background: rgba(17,27,33,0.9);
  border-left: 3px solid #6a3d9a;
  border-radius: 0 8px 8px 0;
  align-self: stretch;
  font-size: 0.82rem;
}

/* Chat timestamp separator — date pill */
.chat-time-sep {
  text-align: center;
  font-size: 0.62rem;
  color: #8696a0;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.8rem;
  align-self: center;
  background: rgba(17,27,33,0.9);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Action messages — WhatsApp-style (e.g. "Niko berdiri di tangga") */
.chat-action {
  text-align: center;
  align-self: center;
  padding: 0.15rem 0;
}
.chat-action-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-style: italic;
  color: rgba(134,150,160,0.6);
  letter-spacing: 0.02em;
}

/* System messages — WhatsApp group notification style */
.chat-system-msg {
  text-align: center;
  align-self: center;
  padding: 0.15rem 0;
}
.chat-system-text {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: #d4a0b9;
  background: rgba(17,27,33,0.9);
  border-radius: 8px;
  padding: 0.25rem 0.8rem;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.chat-system-msg .npc-event-death { color: #ef5350; }
.chat-system-msg .npc-event-danger { color: #ff9800; }
.chat-system-msg .npc-event-alliance { color: #6fcf97; }
.chat-system-msg .npc-event-clue { color: #53bdeb; }
.chat-system-msg .npc-event-manipulation { color: #b39ddb; }

/* Hunter kill event — golden justice */
.chat-system-msg .npc-event-hunter {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,0.5);
  font-weight: 600;
}

/* Killer tracking/nearby alert — pulsing red warning */
.chat-system-msg .npc-event-track {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(255,68,68,0.4);
  animation: pulseTrack 2s ease-in-out infinite;
}
@keyframes pulseTrack {
  0%, 100% { text-shadow: 0 0 8px rgba(255,68,68,0.4); }
  50% { text-shadow: 0 0 16px rgba(255,68,68,0.7); }
}

@keyframes chatSlideIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsive chat */
@media (max-width: 480px) {
  .chat-bubble { max-width: 92%; gap: 0.3rem; }
  .chat-avatar { width: 28px; height: 28px; min-width: 28px; }
  .chat-avatar.css-avatar { width: 28px; height: 28px; min-width: 28px; font-size: 0.6rem; }
  .chat-msg { font-size: 0.82rem !important; padding: 0.35rem 0.6rem !important; }
  .chat-narration { font-size: 0.68rem; max-width: 90%; }
  .chat-typing-indicator { padding: 0.35rem 0.6rem; margin-left: 36px; }
  .choices-container { padding: 0.4rem 0.5rem 0.5rem; max-height: 42vh; }
  .story-area { padding: 0.4rem 0.6rem 160px; }
  .wa-group-name { font-size: 0.82rem; }
  .wa-group-members { font-size: 0.6rem; }
  .wa-encrypted-notice { font-size: 0.55rem; max-width: 92%; }
  .chat-action-text { font-size: 0.62rem; }
  .chat-system-text { font-size: 0.62rem; }
}

/* ========== LANGUAGE TOGGLE ========== */
/* Language toggle button */
#btn-lang-toggle {
  position: fixed;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 9999;
  background: rgba(20,20,20,0.85);
  border: 1px solid rgba(138,180,248,0.4);
  color: #8ab4f8;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(6px);
}
#btn-lang-toggle:hover {
  background: rgba(138,180,248,0.15);
  border-color: #8ab4f8;
}
body.subs-on #btn-lang-toggle {
  background: rgba(138,180,248,0.2);
  border-color: #8ab4f8;
  color: #fff;
}