h1,h2,h3,p,ul {margin:0; padding:0;}
:root {
    --bg: radial-gradient(circle at 20% 20%, #eef2ff, #f8fbff 45%, #e8f0ff 90%);
    --text: #1f2b3d;
    --panel-bg: #fff;
    --panel-border: #e7ecf6;
    --panel-shadow: 0 10px 40px rgba(31,43,61,0.08);
    --muted: #6b7484;
    --chip-bg: #f1f4ff;
    --chip-border: #dde4ff;
    --pill-bg: #e8edff;
    --pill-text: #3048a5;
    --button-bg: linear-gradient(120deg,#2f4adf,#6fb3ff);
    --button-text: #fff;
    --ghost-bg: #f4f7ff;
    --ghost-text: #3048a5;
    --ghost-border: #dfe5ff;
    --stat-surface: #f7f9fc;
    --stat-border: #e4e9f3;
    --scene-bg: #f8faff;
    --scene-border: #e4eafe;
    --toast-bg: #fdfefe;
    --toast-border: #e5ecf7;
}
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
.dark-mode {
    --bg: radial-gradient(circle at 20% 20%, #0f1729, #0b1220 45%, #0a0f1a 90%);
    --text: #e8edf7;
    --panel-bg: #0f1729;
    --panel-border: #1f2a3f;
    --panel-shadow: 0 10px 40px rgba(0,0,0,0.45);
    --muted: #9aa6be;
    --chip-bg: #1a2335;
    --chip-border: #25314a;
    --pill-bg: #1f2f52;
    --pill-text: #c7d6ff;
    --button-bg: linear-gradient(120deg,#5172ff,#38bdf8);
    --button-text: #eaf3ff;
    --ghost-bg: #121a2c;
    --ghost-text: #e8edf7;
    --ghost-border: #25314a;
    --stat-surface: #141d30;
    --stat-border: #1f2a3f;
    --scene-bg: #11192b;
    --scene-border: #1f2a3f;
    --toast-bg: #0f1729;
    --toast-border: #1f2a3f;
}
.mode-toggle { border:1px solid var(--ghost-border); background: var(--ghost-bg); color: var(--ghost-text); padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer; }
a { text-decoration: none; }
.pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pill-bg);
    color: var(--pill-text);
    font-weight: 600;
    font-size: 0.9rem;
}
.button, button, a.button {
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 8px 20px rgba(40,80,180,0.15);
    background: var(--button-bg);
    color: var(--button-text);
}
.button:hover, button:hover, a.button:hover { transform: translateY(-2px); }
.button:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.button.primary { background: var(--button-bg); color:var(--button-text); }
.button.ghost { background: var(--ghost-bg); color: var(--ghost-text); box-shadow: none; border: 1px solid var(--ghost-border); }
.button.block { width: 100%; text-align: center; }

.hero {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 24px;
    padding: 40px 24px;
    align-items: center;
}
.hero-text h1 { font-size: 2.4rem; margin: 10px 0; }
.hero-text p { margin: 6px 0 10px 0; font-size: 1.05rem; line-height: 1.5; }
.hero-list { list-style: none; margin: 10px 0 12px 0; padding: 0; }
.hero-list li { margin-bottom: 6px; padding-left: 14px; position: relative; }
.hero-list li::before { content: '•'; position: absolute; left: 0; color: #2f4adf; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.hero-visual { display: flex; justify-content: center; }
.hero-svg { width: 240px; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.08)); }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px 0 24px;
}
.game-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 18px;
    padding: 12px 24px 28px 24px;
}

.panel {
    background: var(--panel-bg);
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: var(--panel-shadow);
    border: 1px solid var(--panel-border);
}
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 4px 0 0 0; }

.progress-rail { height:8px; background:#e7ecf6; border-radius:999px; margin: 8px 24px 12px 24px; overflow:hidden; position:relative; }
.progress-fill { height:100%; background: linear-gradient(90deg,#2f4adf,#6fb3ff); border-radius:999px; transition: width 0.3s ease; }
.dark-mode .progress-rail { background:#1f2a3f; }

.meta-panel { border-style: dashed; border-color: #dbe3ff; }
.meta-panel .chips { gap:8px; }
.meta-notes { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:8px; margin-top:8px; }
.meta-note { background: var(--scene-bg); border:1px solid var(--scene-border); border-radius:10px; padding:10px 12px; color: var(--text); font-weight:600; }
.dark-mode .meta-panel { border-color: #25314a; }

.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { background:var(--chip-bg); border:1px solid var(--chip-border); padding:6px 10px; border-radius:10px; font-weight:600; font-size:0.9rem; }

.scene { background:var(--scene-bg); border:1px solid var(--scene-border); border-radius:12px; padding:14px; }
.scene h2 { margin-bottom:6px; }
.scene .muted { margin-bottom: 10px; }
.scene-empty { text-align:center; color:#6b7484; }

.muted { color: var(--muted); }
.info { background:#eef4ff; border:1px solid #d9e4ff; border-radius:10px; padding:10px 12px; color:#2f3c68; }
.summary { background:#f6f8fb; border-left:4px solid #2f4adf; padding:12px; border-radius:10px; margin-top:12px; }

.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.actions-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.action-btn { display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:14px 16px; border-radius:12px; background: linear-gradient(135deg,#2f4adf,#6fb3ff); color:#fff; border:none; box-shadow:0 8px 20px rgba(40,80,180,0.15); }
.action-btn .title { font-weight:700; font-size:1rem; }
.action-btn .meta { font-size:0.9rem; opacity:0.9; }
.action-btn.ghosty { background:#f7f9ff; color:#1f2b3d; border:1px solid #e1e8f5; box-shadow:none; }
.action-btn:disabled { opacity:0.65; }
.dark-mode .action-btn { background: linear-gradient(135deg,#3b5bff,#2fb4ff); box-shadow:0 8px 18px rgba(0,0,0,0.25); }
.dark-mode .action-btn.ghosty { background:#1a2335; color:#e8edf7; border:1px solid #25314a; }

.stats-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.stat { background:var(--stat-surface); border:1px solid var(--stat-border); border-radius:12px; padding:10px 12px; }
.stat-top { display:flex; justify-content:space-between; font-weight:700; margin-bottom:6px; }
.stat-name { color: var(--text); opacity:0.8; }
.stat-value { color: var(--text); }
.stat-bar { height:8px; background:#e7ecf6; border-radius:8px; overflow:hidden; }
.dark-mode .stat-bar { background:#1f2a3f; }
.stat-bar-inner { height:100%; border-radius:8px; transition: width 0.3s; }
.stat-money { background: linear-gradient(90deg,#ffcf63,#ff9e2c); }
.stat-debt { background: linear-gradient(90deg,#ff6b6b,#c93b3b); }
.stat-stress { background: linear-gradient(90deg,#ff7a7a,#ffb347); }
.stat-hope { background: linear-gradient(90deg,#2bd9a5,#6cd7ff); }
.stat-hunger { background: linear-gradient(90deg,#4caf50,#8bc34a); }
.stat-generic { background: linear-gradient(90deg,#5c6bc0,#8ea0ff); }

.npc-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:10px; }

.npc-page { min-height:100vh; background: radial-gradient(circle at 16% 20%, #e9f0ff, #f7fbff 50%, #e6eefc 95%); padding:24px; }
.npc-shell { max-width:960px; margin:0 auto; }
.npc-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.npc-card { background:#fff; border-radius:16px; padding:18px; box-shadow:0 10px 32px rgba(31,43,61,0.08); border:1px solid #e6ecf7; }
.npc-meta { display:flex; gap:8px; flex-wrap:wrap; }
.badge { padding:6px 10px; border-radius:10px; background:#eef2ff; color:#3048a5; font-weight:700; border:1px solid #dbe3ff; }
.npc-dialog { background:#f8faff; border:1px solid #e4eafe; border-radius:12px; padding:12px; margin:10px 0; }
.npc-options { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:8px; }
.npc-summary { margin-top:10px; }
.dark-mode .npc-page { background: radial-gradient(circle at 16% 20%, #0d1424, #0a0f1a 60%, #060912 100%); }
.dark-mode .npc-card { background: var(--panel-bg); border:1px solid var(--panel-border); box-shadow: var(--panel-shadow); }
.dark-mode .npc-dialog { background: var(--scene-bg); border-color: var(--scene-border); }
.dark-mode .badge { background: var(--chip-bg); color: var(--pill-text); border-color: var(--chip-border); }
.dark-mode .npc-shell h1 { color: var(--text); }

.chat-window { background:#f5f7fb; border:1px solid #e4e9f3; border-radius:12px; padding:12px; }
.chat-bubble { background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.whatsapp-shell { background:#f5f7fb; border:1px solid #e1e6f0; border-radius:14px; padding:12px; position:relative; }
.wa-bubble { max-width: 100%; border-radius:14px; padding:10px 12px; margin-bottom:8px; color:#0b1b2b; box-shadow:0 4px 14px rgba(0,0,0,0.05); }
.wa-bubble.incoming { background:#fff; border:1px solid #dfe6f3; }
.wa-bubble .wa-name { display:block; font-weight:700; color:#2f4adf; margin-bottom:4px; }
.wa-actions { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.wa-reply { background:#e8f1ff; border:1px solid #d3e3ff; color:#1f2b3d; border-radius:12px; padding:10px 12px; text-align:left; font-weight:700; cursor:pointer; }
.wa-reply:hover { background:#dce9ff; }
.dark-mode .whatsapp-shell { background:#0f1729; border-color:#1f2a3f; }
.dark-mode .wa-bubble.incoming { background:#111b2d; border-color:#1f2a3f; color:#e8edf7; }
.dark-mode .wa-reply { background:#121c30; border-color:#25314a; color:#e8edf7; }

.toast { background:var(--toast-bg); border:1px solid var(--toast-border); border-radius:12px; padding:10px 12px; box-shadow:0 8px 20px rgba(31,43,61,0.06); }
.toast-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #e5ecf7; font-weight:700; }
.toast-row:last-child { border-bottom:none; }
.toast-row.up { color:#1b9e5a; }
.toast-row.down { color:#d43a3a; }
.dark-mode .info { background:#11192b; border-color:#1f2a3f; color:var(--text); }
.dark-mode .summary { background:#0f1729; border-left-color:#3b5bff; color:var(--text); }
.dark-mode .toast-row.up { color:#3dd68c; }
.dark-mode .toast-row.down { color:#ff6b6b; }

.panel .button { margin-top: 0; }

.sheet { background:#fff; border-radius:16px; padding:18px; box-shadow:0 10px 40px rgba(31,43,61,0.08); border:1px solid #e7ecf6; max-width: 900px; margin: 0 auto; }
.sheet-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.sheet-actions { margin-top: 12px; }
.sheet label { display:block; font-weight:700; color:#2f3c68; margin-bottom:6px; }
.sheet input, .sheet select { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #d7deeb; background:#f9fbff; box-sizing:border-box; }
.sheet .muted { margin-top:6px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:12px; }

.panel, .sheet, .hero { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from {opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} }

.game-body footer { text-align:center; color:#6b7484; margin: 12px 0 20px 0; }
.hero footer { text-align:center; }
.game-body.night-tint { filter: hue-rotate(-6deg) brightness(0.9); }
.weather-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.14;
    mix-blend-mode: screen;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), rgba(0,0,0,0));
}
.weather-soguk { background: linear-gradient(135deg, rgba(120,170,255,0.25), rgba(30,60,120,0.2)); }
.weather-yagmurlu { background: linear-gradient(180deg, rgba(80,110,160,0.25), rgba(30,40,70,0.25)); }
.weather-gunesli { background: radial-gradient(circle at 25% 25%, rgba(255,230,150,0.35), rgba(255,200,120,0)); }
.weather-sicak_dalga { background: radial-gradient(circle at 60% 20%, rgba(255,140,80,0.32), rgba(80,40,20,0.08)); }
.weather-ruzgarli { background: linear-gradient(120deg, rgba(180,210,255,0.18), rgba(100,150,200,0.14)); }

.stepper { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.stepper .step { padding:6px 10px; border-radius:12px; background:#f1f4ff; color:#3048a5; font-weight:700; border:1px solid #dbe3ff; font-size:0.9rem; }
.stepper .step.active { background:#e9f1ff; }
.stepper .step.done { background:#e5f7e5; color:#2f7a3f; border-color:#c9ebcb; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,16,30,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}
.modal-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 16px;
    width: min(460px, 90vw);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.modal-close { background: transparent; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 6px; }
.modal-body { color: var(--text); line-height: 1.45; margin-bottom: 12px; white-space: pre-line; }
.hidden { display: none !important; }

@media (max-width: 720px) {
    .topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .hero { padding: 28px 16px; }
    .game-layout { padding: 10px 14px 24px 14px; }
    .npc-page { padding:16px; }
}

/* Kötü olay uyarı parıltısı */
.alert-glow { position: relative; overflow: hidden; }
.alert-glow::before, .alert-glow::after {
    content:'';
    position:absolute;
    width:120px; height:120px;
    pointer-events:none;
    background: radial-gradient(circle at center, rgba(244,67,54,0.25), rgba(244,67,54,0) 65%);
    filter: blur(2px);
}
.alert-glow::before { top:-30px; left:-30px; box-shadow: 0 0 40px rgba(244,67,54,0.35); }
.alert-glow::after { bottom:-30px; right:-30px; box-shadow: 0 0 40px rgba(244,67,54,0.35); }