/* ============================================================
   Vampir Köylü · Mobil öncelikli, pastel ve yüksek kontrastlı
   ============================================================ */

:root{
  /* Pastel zemin, koyu okunur metin (yüksek kontrast) */
  --bg:         #f3eefb;
  --bg-grad-1:  #efe7fb;
  --bg-grad-2:  #fde9f1;
  --surface:    #ffffff;
  --surface-2:  #f7f3fd;
  --ink:        #2a2340;   /* ana metin - koyu, zemine uzak */
  --ink-soft:   #5b5470;
  --ink-faint:  #8a84a0;
  --line:       #e6ddf3;

  --primary:    #7b5cc4;   /* leylak */
  --primary-d:  #654aa8;
  --primary-ink:#ffffff;

  --vampir:     #c4476e;   /* berry */
  --vampir-bg:  #fde3ec;
  --koylu:      #3e8f6e;   /* yeşil */
  --koylu-bg:   #dff3e9;
  --doktor:     #2f7fb5;   /* mavi */
  --doktor-bg:  #dceffb;
  --dedektif:   #c58a2a;   /* amber */
  --dedektif-bg:#fbefd4;

  --danger:     #d14343;
  --ok:         #2f9e68;
  --gold:       #caa94a;

  --radius:     18px;
  --radius-sm:  12px;
  --shadow:     0 6px 20px rgba(80,60,130,.12);
  --shadow-sm:  0 2px 8px rgba(80,60,130,.10);
  --tap:        52px;      /* min dokunma yüksekliği */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg-grad-1),var(--bg-grad-2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  font-size:17px;
  line-height:1.55;
  min-height:100vh;
  min-height:100dvh;
}

h1,h2,h3{ font-family:'Fredoka', 'Nunito', sans-serif; color:var(--ink); line-height:1.2; }
h1{ font-size:2.1rem; margin:.2em 0 .1em; }
h2{ font-size:1.3rem; margin:1.1em 0 .4em; }
p{ margin:.5em 0; }

/* ---------- Üst bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:8px; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.15rem; color:var(--primary-d); }
.brand-mark{ font-size:1.3rem; }
.room-badge{
  font-weight:800; letter-spacing:.14em;
  background:var(--primary); color:#fff;
  padding:7px 14px; border-radius:999px; font-size:1rem;
  box-shadow:var(--shadow-sm);
}

/* ---------- Yerleşim ---------- */
#app{ max-width:560px; margin:0 auto; padding:16px; padding-bottom:40px; }
.screen{ animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.hidden{ display:none !important; }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-bottom:16px;
}

/* ---------- Giriş ---------- */
.hero{ text-align:center; }
.hero h1{ background:linear-gradient(90deg,var(--vampir),var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ color:var(--ink-soft); margin-bottom:18px; }
.home-actions{ display:grid; gap:12px; margin-bottom:12px; }

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap);
  padding:12px 20px;
  border:none; border-radius:14px;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:1.05rem;
  cursor:pointer; width:100%;
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-lg{ min-height:56px; font-size:1.1rem; }
.btn-primary{ background:var(--primary); color:var(--primary-ink); box-shadow:0 4px 14px rgba(123,92,196,.35); }
.btn-primary:hover{ background:var(--primary-d); }
.btn-ghost{ background:var(--surface-2); color:var(--primary-d); border:2px solid var(--line); }
.btn-ghost:hover{ border-color:var(--primary); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-ok{ background:var(--ok); color:#fff; }
.btn-gold{ background:var(--gold); color:#3a2f12; }
.btn-sm{ min-height:40px; padding:6px 14px; font-size:.95rem; width:auto; }
.link-btn{
  display:inline-block; width:100%; text-align:center;
  background:none; border:none; color:var(--primary-d);
  font-weight:700; font-size:1rem; padding:12px; cursor:pointer;
}

/* ---------- Formlar ---------- */
.form-card h2{ margin-top:0; }
.field{ display:block; margin-bottom:16px; }
.field > span, .field-label{ display:block; font-weight:700; margin-bottom:6px; color:var(--ink); }
input[type=text]{
  width:100%; min-height:var(--tap);
  padding:12px 14px;
  border:2px solid var(--line); border-radius:12px;
  font-size:1.1rem; font-family:inherit; color:var(--ink);
  background:var(--surface-2);
}
input[type=text]:focus{ outline:none; border-color:var(--primary); background:#fff; }
input::placeholder{ color:var(--ink-faint); }

.mode-options{ display:grid; gap:10px; }
.mode-opt{ cursor:pointer; }
.mode-opt input{ position:absolute; opacity:0; }
.mode-box{
  display:block; padding:14px 16px; border:2px solid var(--line);
  border-radius:14px; background:var(--surface-2);
}
.mode-box strong{ display:block; font-size:1.1rem; }
.mode-box small{ color:var(--ink-soft); }
.mode-opt input:checked + .mode-box{
  border-color:var(--primary); background:#f1ebff;
  box-shadow:0 0 0 3px rgba(123,92,196,.15);
}
fieldset.field{ border:none; padding:0; margin:0 0 16px; }

/* Oyuncu sayısı seçici */
.count-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.count-chip{
  min-height:48px; border:2px solid var(--line); border-radius:12px;
  background:var(--surface-2); color:var(--ink); font-weight:800; font-size:1.1rem;
  cursor:pointer; transition:all .12s ease; font-family:inherit;
}
.count-chip:disabled{ opacity:.35; cursor:not-allowed; }
.count-chip.active{ border-color:var(--primary); background:#f1ebff; box-shadow:0 0 0 3px rgba(123,92,196,.18); color:var(--primary-d); }
.count-note{ color:var(--ink-soft); font-size:.92rem; margin:8px 0 0; }

/* ---------- Kurallar ---------- */
.prose h2{ color:var(--primary-d); }
.prose p, .prose li{ color:var(--ink); }
.prose ol{ padding-left:20px; }
.prose li{ margin:.4em 0; }
.role-list{ display:grid; gap:10px; margin:10px 0; }
.role-chip{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; }
.role-chip span{ font-size:1.6rem; line-height:1; }
.role-chip small{ display:block; color:var(--ink-soft); }
.role-vampir{ background:var(--vampir-bg); }
.role-koylu{ background:var(--koylu-bg); }
.role-doktor{ background:var(--doktor-bg); }
.role-dedektif{ background:var(--dedektif-bg); }
.role-chip .only{ display:inline-block; font-size:.68rem; font-weight:800; padding:1px 7px; border-radius:999px; background:rgba(0,0,0,.08); margin-left:4px; vertical-align:middle; }

/* Kılavuz: mod kartları, adımlar, kazanma kutusu */
.mode-card{ border:2px solid var(--line); border-radius:16px; padding:16px; margin:10px 0; background:var(--surface-2); }
.mode-card.classic{ border-color:#c9bdf0; }
.mode-card.advanced{ border-color:#f2c6d6; }
.mode-card h3{ margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.mode-card .badge{ font-size:.72rem; font-weight:800; padding:2px 10px; border-radius:999px; background:var(--primary); color:#fff; }
.mode-card.advanced .badge{ background:var(--vampir); }
.mode-card p{ margin:.4em 0; }
.mode-card .roles-min{ font-weight:700; color:var(--ink-soft); font-size:.92rem; margin-top:6px; }

.steps{ counter-reset:step; display:grid; gap:12px; margin:10px 0; padding:0; list-style:none; }
.steps li{ position:relative; padding:12px 14px 12px 52px; background:var(--surface-2); border-radius:12px; }
.steps li::before{ counter-increment:step; content:counter(step); position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.steps li strong{ display:block; margin-bottom:2px; }
.steps li .adv{ display:inline-block; font-size:.72rem; font-weight:800; color:var(--dedektif); background:var(--dedektif-bg); padding:1px 8px; border-radius:999px; margin-left:4px; }

.winbox{ display:grid; gap:10px; margin:10px 0; }
.win-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; }
.win-row.village{ background:var(--koylu-bg); }
.win-row.vampire{ background:var(--vampir-bg); }
.win-row .em{ font-size:1.6rem; line-height:1; }
.win-row strong{ display:block; }
.win-row small{ color:var(--ink-soft); }

.tips{ display:grid; gap:8px; margin:10px 0; }
.tip-row{ padding:10px 14px; background:var(--surface-2); border-radius:12px; font-size:.95rem; }
.tip-row b{ color:var(--primary-d); }

table.dist{ width:100%; border-collapse:collapse; margin:10px 0; font-size:.95rem; }
table.dist th, table.dist td{ padding:8px 6px; text-align:center; border-bottom:1px solid var(--line); }
table.dist th{ color:var(--ink-soft); font-size:.82rem; }
table.dist td:first-child, table.dist th:first-child{ text-align:left; }
table.dist tbody tr:last-child td{ border-bottom:none; }

/* ---------- Oyun: lobi & tahta ---------- */
.phase-head{
  text-align:center; margin-bottom:14px;
}
.phase-pill{
  display:inline-block; padding:6px 16px; border-radius:999px;
  font-weight:800; font-size:.95rem; letter-spacing:.02em;
}
.pill-lobby{ background:#ece3fb; color:var(--primary-d); }
.pill-night{ background:#2c2748; color:#d9cffb; }
.pill-day{ background:#fff1cf; color:#8a6a12; }
.pill-voting{ background:#ffe0e9; color:#a8375a; }
.pill-ended{ background:#dff3e9; color:#1f7a50; }
.phase-title{ font-size:1.5rem; margin:.3em 0 .1em; }
.phase-desc{ color:var(--ink-soft); margin:0; }

.info-banner{
  background:var(--surface); border:1px solid var(--line);
  border-left:5px solid var(--primary);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;
  font-weight:600;
}
.info-banner.good{ border-left-color:var(--ok); }
.info-banner.bad{ border-left-color:var(--vampir); }

/* Oda kodu paylaşım kutusu */
.share-box{ text-align:center; padding:18px; background:var(--surface-2); border-radius:14px; margin-bottom:14px; }
.share-code{ font-family:'Fredoka',sans-serif; font-size:2.6rem; letter-spacing:.3em; color:var(--primary-d); font-weight:700; margin:4px 0 2px; padding-left:.3em; }
.share-hint{ color:var(--ink-soft); font-size:.95rem; }

/* Katılım ilerleme */
.join-progress{ text-align:center; margin-top:6px; }
.jp-count{ font-size:1.05rem; margin-bottom:8px; }
.jp-count b{ color:var(--primary-d); font-size:1.3rem; }
.jp-bar{ height:12px; background:var(--surface-2); border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.jp-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--vampir)); border-radius:999px; transition:width .35s ease; }

/* Oyuncu listesi */
.players{ display:grid; gap:10px; margin-bottom:16px; }
.player-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px;
}
.player-row.dead{ opacity:.6; }
.player-row.dead .pname{ text-decoration:line-through; text-decoration-color:var(--vampir); }
.player-row.me{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(123,92,196,.15); }
.avatar{
  width:40px; height:40px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.1rem; color:#fff; background:var(--primary);
}
.pbody{ flex:1; min-width:0; }
.pname{ font-weight:800; font-size:1.05rem; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pmeta{ font-size:.85rem; color:var(--ink-soft); }
.tag{ font-size:.72rem; font-weight:800; padding:2px 8px; border-radius:999px; }
.tag-host{ background:#fff1cf; color:#8a6a12; }
.tag-me{ background:#ece3fb; color:var(--primary-d); }
.tag-dead{ background:#f1e4e9; color:var(--vampir); }
.tag-vote{ background:var(--vampir); color:#fff; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-faint); flex:none; }
.dot.on{ background:var(--ok); }

.role-badge{ font-size:.78rem; font-weight:800; padding:3px 10px; border-radius:999px; }
.rb-vampir{ background:var(--vampir-bg); color:var(--vampir); }
.rb-koylu{ background:var(--koylu-bg); color:var(--koylu); }
.rb-doktor{ background:var(--doktor-bg); color:var(--doktor); }
.rb-dedektif{ background:var(--dedektif-bg); color:var(--dedektif); }

/* Seçim (oy/gece hedefi) */
.selectable{ cursor:pointer; position:relative; }
.selectable:hover{ border-color:var(--primary); }
.player-row.selected{ border-color:var(--primary); background:#f1ebff; box-shadow:0 0 0 3px rgba(123,92,196,.2); }
.vote-count{ margin-left:auto; font-weight:800; color:var(--vampir); min-width:26px; text-align:right; }

.pick-btn{ margin-left:auto; }

/* Rolüm kartı (oyun içi küçük) */
.my-role{
  display:flex; align-items:center; gap:14px;
  padding:16px; border-radius:16px; margin-bottom:16px; color:#fff;
}
.my-role .emoji{ font-size:2.4rem; }
.my-role h3{ margin:0; color:#fff; font-size:1.25rem; }
.my-role small{ opacity:.92; }
.mr-vampir{ background:linear-gradient(135deg,#c4476e,#8e2f54); }
.mr-koylu{ background:linear-gradient(135deg,#3e8f6e,#2b6d52); }
.mr-doktor{ background:linear-gradient(135deg,#2f7fb5,#235f89); }
.mr-dedektif{ background:linear-gradient(135deg,#c58a2a,#966616); }
.mr-dead{ background:linear-gradient(135deg,#6b6480,#4a4560); }

/* Host kontrol çubuğu */
.host-bar{
  position:sticky; bottom:0;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  margin:16px -16px -40px; padding:14px 16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.host-note{ text-align:center; font-size:.85rem; color:var(--ink-soft); margin:0 0 8px; }

/* Günlük */
.log{ margin-top:16px; }
.log h3{ font-size:1rem; color:var(--ink-soft); margin-bottom:8px; }
.log-list{ display:grid; gap:6px; }
.log-item{ font-size:.92rem; padding:8px 12px; background:var(--surface-2); border-radius:10px; color:var(--ink); }
.log-item b{ color:var(--primary-d); }

/* Vampir oyları (canlı) */
.vamp-votes{ background:var(--vampir-bg); border:1px solid var(--vampir); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.vamp-votes h4{ margin:0 0 8px; color:var(--vampir); }
.vv-row{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-weight:600; }
.vv-row b{ color:var(--vampir); }
.vv-pending{ margin-top:6px; font-size:.88rem; color:var(--ink-soft); }

/* Dedektif sonuçları */
.detective-box{ background:var(--dedektif-bg); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.detective-box h4{ margin:0 0 6px; color:#8a5e12; }
.detective-box .res{ font-weight:700; }
.res .v{ color:var(--vampir); }
.res .c{ color:var(--koylu); }

/* Kazanan ekranı */
.winner{ text-align:center; padding:26px 18px; border-radius:18px; color:#fff; margin-bottom:16px; }
.winner.village{ background:linear-gradient(135deg,#3e8f6e,#2b6d52); }
.winner.vampire{ background:linear-gradient(135deg,#c4476e,#7e2a4b); }
.winner h2{ color:#fff; font-size:1.8rem; margin:.2em 0; }
.winner .big{ font-size:3rem; }

/* ---------- Modallar ---------- */
.modal{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(30,22,50,.55); backdrop-filter:blur(3px);
  padding:20px;
}
.modal-card{
  background:var(--surface); border-radius:20px; padding:24px;
  max-width:420px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.3);
  animation:pop .25s ease;
}
@keyframes pop{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
.modal-actions{ display:flex; gap:10px; margin-top:16px; }
.modal-actions .btn{ flex:1; }
.confirm-text{ font-size:1.1rem; font-weight:600; text-align:center; }

.role-reveal{ text-align:center; margin-bottom:18px; }
.role-reveal .emoji{ font-size:4rem; display:block; margin-bottom:6px; }
.role-reveal h2{ margin:.1em 0; font-size:2rem; }
.role-reveal p{ color:var(--ink-soft); }
.role-reveal .tip{ background:var(--surface-2); border-radius:12px; padding:12px; margin-top:12px; font-weight:600; color:var(--ink); }
.reveal-vampir h2{ color:var(--vampir); }
.reveal-koylu h2{ color:var(--koylu); }
.reveal-doktor h2{ color:var(--doktor); }
.reveal-dedektif h2{ color:var(--dedektif); }
.teammates{ margin-top:12px; font-weight:700; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px;
  font-weight:700; z-index:60; max-width:90%; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25); animation:fade .2s ease;
}
.toast.err{ background:var(--danger); }
.toast.ok{ background:var(--ok); }

/* ---------- Gece teması ---------- */
body.night-mode{ background:linear-gradient(160deg,#2a2448,#3a2b4e); }
body.night-mode .topbar{ background:rgba(42,36,72,.85); border-bottom-color:#463a63; }
body.night-mode .brand{ color:#d9cffb; }

/* ---------- Küçük ekran ayarı ---------- */
@media (max-width:360px){
  body{ font-size:16px; }
  .share-code{ font-size:2.1rem; }
  h1{ font-size:1.8rem; }
}