:root{
  --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --text:#e5e7eb;
  --accent:#60a5fa; --accent2:#34d399; --danger:#f87171; --border:#1f2937;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}

.brand img{height:75px}
.container{max-width:1100px;margin:24px auto;padding:16px}
.card{
  background:rgb(15, 23, 42);
  border:1px solid var(--border);
  border-radius:16px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

.hstack{display:flex;gap:16px;align-items:center}
.vstack{display:flex;gap:16px;flex-direction:column}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:3fr 1fr}

.btn{
  background:var(--accent); color:#0b1023; border:none; border-radius:999px;
  padding:10px 16px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block
}
.btn.secondary{background:#334155;color:#e5e7eb}
.btn.danger{background:var(--danger);color:#0b1023}
.btn.small{padding:6px 10px;font-size:12px}

.input{
  width:100%; background:#0b1228; color:#e5e7eb;
  border:1px solid #1f2a44; border-radius:12px; padding:10px 12px
}

.list{list-style:none;margin:0;padding:0}
.list li{padding:8px 10px;border-bottom:1px dashed var(--border)}

.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#1f2937; color:#93c5fd; border:1px solid #334155
}

.scoreboard{min-width:60px}
.score-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--border)}

.small{color:var(--muted);font-size:12px}

hr{border:none;border-top:1px solid var(--border);margin:6px 0}

/* Timer / progress */
.progress{height:8px;background:#1f2a44;border-radius:999px;overflow:hidden;margin:12px 0 8px}
.progress-bar{height:100%;width:100%;background:var(--accent);transition:width .2s linear}
.timer{font-variant-numeric:tabular-nums}

/* Countdown overlay */
.countdown-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.9);
  display:flex; align-items:center; justify-content:center; z-index:9999
}
.countdown-number{font-size:min(20vw,160px);font-weight:800;color:#e5e7eb;letter-spacing:2px}

/* Player options */
#options{display:grid;gap:12px}
.option{
  background:#0b1228; border:1px solid #1f2a44; border-radius:12px;
  padding:12px; cursor:pointer; user-select:none
}
.option:hover{border-color:#2b3d6b}
.option.locked{pointer-events:none;opacity:.6}
.option.selected{outline:2px solid var(--accent)}
.option.correct{background:rgba(52,211,153,.15);border-color:#10b981}
.option.wrong{background:rgba(248,113,113,.15);border-color:#f87171}
.answered-tag{
  display:inline-block;margin-left:8px;padding:2px 6px;border-radius:8px;
  background:#1f2937;border:1px solid #334155;color:#e5e7eb;font-size:11px
}
.answer-banner{
  display:block;text-align:center;margin-top:8px;
  background:#0b1228;border:1px solid #1f2a44;border-radius:12px;padding:8px
}

/* Image mode canvas/tools */
.draw-wrap{position:relative;background:#0b1228;border:1px solid #1f2a44;border-radius:12px;padding:10px}
#board{width:100%;height:auto;background:#ffffff;border-radius:8px;display:block}
.tools{display:flex;gap:8px;align-items:center;margin-top:8px}
.tools .active{outline:2px solid var(--accent)}

/* Tabs (index) */
.mode-tabs{display:flex;gap:8px}
.mode-panel{margin-top:12px}



/* ===== Mobile polish (<= 720px) ===== */
@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }

  .brand img{ height: 48px; }

  .input{
    font-size: 18px;
    padding: 14px 14px;
    min-height: 44px; /* rahat dokunma alanı */
  }
  .btn{
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 14px;
  }

  /* seçenekler ve mesajlar biraz nefes alsın */
  #options .option{ padding: 16px; font-size: 16px; }

  /* sohbet alanı dar ekranlarda daha görünür */
  #chat{ max-height: 35vh; }

  /* çizim araçları sarsmadan sarılsın */
  .tools{ flex-wrap: wrap; gap: 10px; }
}


/* ===== Mobile: chat input üstte, Send altta ===== */
@media (max-width: 720px){
  #chatControls{
    display: flex;           /* var olan hstack'i override eder */
    flex-direction: column;  /* input üstte, buton altta */
    align-items: stretch;
    gap: 8px;
  }
  #chatControls .input,
  #chatControls .btn{
    width: 100%;             /* input genişler, buton tam genişlik */
  }
}

/* Centered "or" divider */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
}
.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#1d2740; /* light gray line */
}
.divider span{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#6b7280; /* muted text */
}

/* ===== Mobile: setupPane — Create/Join dikey yerleşim ===== */
@media (max-width: 720px){
  #setupPane > .hstack{
    flex-direction: column;   /* input üstte, buton altta */
    align-items: stretch;
    gap: 8px;
  }
  #setupPane > .hstack .input,
  #setupPane > .hstack .btn{
    width: 100%;              /* tam genişlik */
  }
}