/* Gece Vardiyası — doygun renkli temalar + yeni bileşenler */
:root, [data-theme="gece"] {
  --bg: #0B1230; --bg2: #121C46; --surface: #18245A; --surface2: #22327A; --line: #3346A0;
  --text: #F7F4EA; --muted: #B5C0EA; --faint: #7F8BC4;
  --gold: #FFB547; --gold-ink: #2B1800; --accent: #FFB547;
  --ay: #3D8BFF; --ay-deep: #1D4FB8; --yildiz: #FF3D63; --yildiz-deep: #A3163A;
  --card: #FFF3D9; --card2: #F6DFAE; --card-ink: #2A1E08;
  --glow1: #3D8BFF; --glow2: #FFB547;
}
[data-theme="neon"] {
  --bg: #12002B; --bg2: #1D0646; --surface: #2A0B63; --surface2: #3A1284; --line: #5B23B8;
  --text: #FFF6FF; --muted: #D8B8FF; --faint: #9B78D6;
  --gold: #FFE14D; --gold-ink: #2A2200; --accent: #FF2FD0;
  --ay: #00E5FF; --ay-deep: #007E9E; --yildiz: #FF2F7E; --yildiz-deep: #A3004A;
  --card: #FFF0FB; --card2: #F7C9EE; --card-ink: #2A0026;
  --glow1: #FF2FD0; --glow2: #00E5FF;
}
[data-theme="okyanus"] {
  --bg: #021B2E; --bg2: #04294A; --surface: #06386A; --surface2: #0A4C8A; --line: #1868B0;
  --text: #F0FBFF; --muted: #A9DCF2; --faint: #6FA5C4;
  --gold: #FFD166; --gold-ink: #2A1F00; --accent: #00D1B2;
  --ay: #2FA6FF; --ay-deep: #0E5EA8; --yildiz: #FF6B3D; --yildiz-deep: #B33A12;
  --card: #EFFFFB; --card2: #BFF2E6; --card-ink: #04281F;
  --glow1: #00D1B2; --glow2: #FFD166;
}
[data-theme="gunbatimi"] {
  --bg: #2A0B24; --bg2: #3D0F33; --surface: #551545; --surface2: #6E1C58; --line: #9A2A78;
  --text: #FFF3EC; --muted: #F4C1CF; --faint: #C08AA0;
  --gold: #FFC043; --gold-ink: #2B1700; --accent: #FF7A00;
  --ay: #7B5CFF; --ay-deep: #4428C2; --yildiz: #FF3D5A; --yildiz-deep: #B0122E;
  --card: #FFF1E0; --card2: #FFD2A6; --card-ink: #2E1300;
  --glow1: #FF7A00; --glow2: #7B5CFF;
}
[data-theme="orman"] {
  --bg: #04231A; --bg2: #073326; --surface: #0B4734; --surface2: #105E45; --line: #1C805E;
  --text: #F3FFF4; --muted: #B7E8C6; --faint: #7AB590;
  --gold: #FFD23F; --gold-ink: #2A2200; --accent: #B6F23A;
  --ay: #22C3E6; --ay-deep: #0C7A93; --yildiz: #FF6B35; --yildiz-deep: #B33B0C;
  --card: #F8FFE8; --card2: #DDF5B0; --card-ink: #172A00;
  --glow1: #B6F23A; --glow2: #FFD23F;
}

body {
  background:
    radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--glow1) 26%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, color-mix(in srgb, var(--glow2) 20%, transparent), transparent 60%),
    var(--bg);
  transition: background-color .3s ease;
}
.topbar { background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)); }
.btn.gold { background: var(--gold); color: var(--gold-ink); }
.btn.gold:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 82%, white); }
.btn.ay { background: var(--ay-deep); border-color: var(--ay); }
.btn.yildiz { background: var(--yildiz-deep); border-color: var(--yildiz); }
.input, input.input, select.input, .chat-form input { background: color-mix(in srgb, var(--bg) 75%, transparent); }
.team-col.ay { background: linear-gradient(180deg, color-mix(in srgb, var(--ay) 30%, transparent), color-mix(in srgb, var(--ay) 8%, transparent)); border-color: color-mix(in srgb, var(--ay) 70%, transparent); }
.team-col.yildiz { background: linear-gradient(180deg, color-mix(in srgb, var(--yildiz) 30%, transparent), color-mix(in srgb, var(--yildiz) 8%, transparent)); border-color: color-mix(in srgb, var(--yildiz) 70%, transparent); }
.tag.ay { background: color-mix(in srgb, var(--ay) 22%, transparent); color: color-mix(in srgb, var(--ay) 55%, white); border-color: color-mix(in srgb, var(--ay) 60%, transparent); }
.tag.yildiz { background: color-mix(in srgb, var(--yildiz) 22%, transparent); color: color-mix(in srgb, var(--yildiz) 55%, white); border-color: color-mix(in srgb, var(--yildiz) 60%, transparent); }
.tag.gold, .code-chip { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.code-chip { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.turn-pill.ay, .score.ay.active { border-color: var(--ay); }
.turn-pill.ay { background: color-mix(in srgb, var(--ay) 30%, transparent); }
.turn-pill.yildiz { background: color-mix(in srgb, var(--yildiz) 30%, transparent); border-color: var(--yildiz); }
.score.ay { border-color: color-mix(in srgb, var(--ay) 70%, transparent); }
.score.yildiz { border-color: color-mix(in srgb, var(--yildiz) 70%, transparent); }
.notice { background: color-mix(in srgb, var(--ay) 16%, transparent); border-color: color-mix(in srgb, var(--ay) 45%, transparent); }
.notice.warn { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.clue-box { background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.chat { background: color-mix(in srgb, var(--bg2) 97%, transparent); }
.chat-list li.sys { background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* kartlar */
.w { background: linear-gradient(180deg, var(--card), var(--card2)); color: var(--card-ink); border-color: color-mix(in srgb, var(--line) 80%, black); }
.w.k-t { border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 30%, var(--card)), color-mix(in srgb, var(--gold) 55%, var(--card2))); }
.w.k-ay { border-color: var(--ay); background: linear-gradient(180deg, color-mix(in srgb, var(--ay) 22%, white), color-mix(in srgb, var(--ay) 45%, white)); }
.w.k-yildiz { border-color: var(--yildiz); background: linear-gradient(180deg, color-mix(in srgb, var(--yildiz) 22%, white), color-mix(in srgb, var(--yildiz) 45%, white)); }
.w.r-t { background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 70%, black)); color: var(--gold-ink); }
.w.r-ay { background: linear-gradient(180deg, var(--ay), var(--ay-deep)); }
.w.r-yildiz { background: linear-gradient(180deg, var(--yildiz), var(--yildiz-deep)); }
.w .vcount { background: var(--gold); color: var(--gold-ink); }
.w .pickbtn { background: var(--bg); color: var(--gold); }
.timer i { background: linear-gradient(90deg, var(--glow1), var(--gold)); }

/* büyük yazı */
html.big-text body { font-size: 18px; }
html.big-text .w { font-size: clamp(13px, 2.8vw, 20px); }
html.big-text .small { font-size: 16px; }

/* ayarlar penceresi */
.modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, var(--surface2), var(--surface)); border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); }
.modal h2 { display: flex; align-items: center; justify-content: space-between; }
.set-row { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.set-row:last-child { border-bottom: 0; }
.set-row .lbl { margin: 0; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 80px; min-height: 42px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 50%, transparent); font-weight: 800; }
.seg button.on { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.swatch { border-radius: 14px; border: 2px solid transparent; padding: 8px; text-align: center; font-weight: 800; font-size: 13px; color: #fff; min-height: 70px; display: grid; gap: 4px; align-content: end; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.swatch .dots { display: flex; gap: 4px; justify-content: center; }
.swatch .dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
input[type=range] { width: 100%; accent-color: var(--gold); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; }
.toggle input { width: 22px; height: 22px; accent-color: var(--gold); }

/* görünüm geçişi */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.view-toggle button { border: 0; background: transparent; padding: 6px 12px; font-weight: 900; font-size: 14px; min-height: 36px; }
.view-toggle button.on { background: var(--gold); color: var(--gold-ink); }

/* 3D alan */
.arena-slot { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 300px; max-height: 72vh; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow); }
@media (max-width: 640px) { .arena-slot { aspect-ratio: 3 / 4; max-height: 68vh; } }
.arena-host { position: absolute; inset: 0; }
.arena-host canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.arena-hint { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .45); padding: 4px 8px; border-radius: 8px; pointer-events: none; }
.arena-cam { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.arena-cam button { min-height: 34px; padding: 4px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .45); color: #fff; font-weight: 800; font-size: 13px; }
.arena-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--muted); font-weight: 800; }
.pick-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* emote'lar */
.emote-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.emote-bar button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, transparent); font-size: 22px; padding: 0; transition: transform .1s ease; }
.emote-bar button:active { transform: scale(.9); }
.float-emote { position: fixed; z-index: 55; pointer-events: none; font-size: 34px; animation: floatUp 1.8s ease-out forwards; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.float-emote small { display: block; font-size: 11px; font-weight: 900; text-align: center; color: #fff; text-shadow: 0 1px 3px #000; }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { transform: translateY(-10px) scale(1.15); opacity: 1; } 100% { transform: translateY(-120px) scale(1); opacity: 0; } }
.music-pill { display: inline-flex; align-items: center; gap: 6px; }