/* =====================================================
   Ular Tangga × NgeBug Arcade — skin gelap khas bad-coder.com
   Dimuat SETELAH style.css; papan & tema papan tetap seperti aslinya.
   ===================================================== */
body.ut-skin {
  --bg: #0d1117;
  --ink: #e6edf3;
  --muted: #8b949e;
  --green: #3dff8f;
  --green-d: #1fa860;
  --orange: #b16cff;
  --orange-d: #7c3fd1;
  --red: #ff5c7a;
  --card: #161b22;
  --line: #30363d;
  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(61,255,143,.11), transparent 60%),
    radial-gradient(800px 520px at 108% 8%, rgba(177,108,255,.15), transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
  background-attachment: fixed;
}
.ut-skin a { color: #38e1ff; }
.ut-skin ::selection { background: var(--green); color: var(--bg); }
.ut-skin h1, .ut-skin h2, .ut-skin h3, .ut-skin .h4, .ut-skin .h5, .ut-skin .h6,
.ut-skin .logo, .ut-skin .panel-title, .ut-skin .turn-name, .ut-skin .big-code, .ut-skin .code-pill,
.ut-skin .q-badge, .ut-skin .q-timer, .ut-skin .btn-play, .ut-skin .btn-roll, .ut-skin .host-tabs button,
.ut-skin .tb-title, .ut-skin .opt .letter, .ut-skin .player-list .pos { font-family: var(--mono); letter-spacing: -.3px; }
.ut-skin .text-muted { color: var(--muted) !important; }
.ut-skin .text-warning-emphasis { color: #ffd43b !important; }

/* ---------- bilah atas ---------- */
.ut-skin .topbar { background: rgba(13,17,23,.88); border-bottom: 1px solid var(--line); box-shadow: none; }
.ut-skin .topbar .ab-logo { margin-right: 4px; }
.ut-skin .ut-jalur { font-family: var(--mono); font-size: .85rem; color: var(--muted); font-weight: 500; }
.ut-skin .host-badge { background: rgba(177,108,255,.15); color: #d6b3ff; border: 1px solid rgba(177,108,255,.45); font-family: var(--mono); }
.ut-skin .code-pill { background: rgba(255,212,59,.1); color: #ffd43b; border: 1px solid rgba(255,212,59,.35); }
.ut-skin .badge.text-bg-secondary { background: #30363d !important; color: var(--ink) !important; font-family: var(--mono); }

/* ---------- tombol ---------- */
.ut-skin .btn-play { background: var(--green); color: var(--bg); border-radius: 10px; box-shadow: 0 5px 0 var(--green-d), 0 0 18px rgba(61,255,143,.25); }
.ut-skin .btn-play:hover { color: var(--bg); }
.ut-skin .btn-play:active { box-shadow: 0 1px 0 var(--green-d); }
.ut-skin .btn-play:disabled { background: #30363d; color: #6a7480; box-shadow: 0 5px 0 #1f242b; }
.ut-skin .btn-ghost, .ut-skin .mini { background: #161b22; color: var(--ink); border: 1px solid var(--line); }
.ut-skin .btn-ghost:hover, .ut-skin .mini:hover { background: #1c2230; color: var(--green); }
.ut-skin .btn-ghost.danger, .ut-skin .mini.danger { color: var(--red); border-color: rgba(255,92,122,.4); }
.ut-skin .mini.ok { color: var(--green); border-color: rgba(61,255,143,.45); background: rgba(61,255,143,.06); }
.ut-skin .btn-roll { background: var(--orange); box-shadow: 0 4px 0 var(--orange-d), 0 0 18px rgba(177,108,255,.3); border-radius: 10px; }
.ut-skin .btn-roll:disabled { background: #30363d; color: #6a7480; box-shadow: 0 4px 0 #1f242b; }
.ut-skin .btn-want { background: #ffd43b; color: #1b1500; box-shadow: 0 4px 0 #b39200; border-radius: 10px; }
.ut-skin .btn-want.sent { background: #30363d; color: var(--muted); box-shadow: 0 4px 0 #1f242b; }

/* ---------- kartu & panel (jendela editor) ---------- */
.ut-skin .setup-card, .ut-skin .panel {
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px; position: relative;
}
.ut-skin .setup-card { padding-top: 44px; }
.ut-skin .setup-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 28px; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 16px 14px, #ff5f57 5px, transparent 5.5px),
    radial-gradient(circle at 34px 14px, #febc2e 5px, transparent 5.5px),
    radial-gradient(circle at 52px 14px, #28c840 5px, transparent 5.5px), #0f141b;
}
.ut-skin .logo { color: #fff; text-shadow: 0 0 22px rgba(61,255,143,.35); }
.ut-skin .logo span { color: var(--green); }
.ut-skin .logo.glitch { position: relative; display: block; }
.ut-skin .tagline { color: #c9d1d9; }
.ut-skin .ut-kode {
  display: block; width: fit-content; max-width: 100%; margin: 6px auto 0; padding: 7px 12px; border-radius: 8px; white-space: pre-wrap;
  background: #0b0f15; border: 1px solid var(--line); font: 500 .8rem var(--mono); color: var(--ink);
}
.ut-skin .ut-kode .k { color: #b16cff; } .ut-skin .ut-kode .f { color: #38e1ff; } .ut-skin .ut-kode .c { color: #6a7480; font-style: italic; }
.ut-skin .room-chip { background: rgba(177,108,255,.12); border: 1px solid rgba(177,108,255,.4); color: #d6b3ff; }
.ut-skin .panel-title { color: var(--muted); font-size: .85rem; }
.ut-skin .panel-title::before { content: '> '; color: var(--green); }
.ut-skin .count { background: rgba(61,255,143,.1); color: var(--green); }
.ut-skin .leader-table td, .ut-skin .leader-table th, .ut-skin .win-table td, .ut-skin .win-table th { border-bottom-color: var(--line); }

/* form bootstrap gelap */
.ut-skin .form-control, .ut-skin .form-select {
  background-color: #0d1117; border-color: var(--line); color: var(--ink);
}
.ut-skin .form-control:focus, .ut-skin .form-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,255,143,.15); background-color: #0d1117; color: var(--ink); }
.ut-skin .form-control::placeholder { color: #5b6470; }
.ut-skin .code-input { color: var(--green); font-family: var(--mono); }
.ut-skin .alert-warning { background: rgba(255,212,59,.1); color: #ffe27a; border-color: rgba(255,212,59,.35); }
.ut-skin .alert-danger { background: rgba(255,92,122,.1); color: #ff9aad; border-color: rgba(255,92,122,.35); }

/* pemilih karakter */
.ut-skin .char-opt { background: #0d1117; border: 1px solid var(--line); color: #ffb86b; }
.ut-skin .char-opt.on { border-color: var(--green); background: rgba(61,255,143,.08); box-shadow: 0 0 0 3px rgba(61,255,143,.15); }
.ut-skin .char-name { color: var(--ink); }

/* ---------- daftar pemain, log ---------- */
.ut-skin .player-list li { background: #0d1117; border: 1px solid var(--line); }
.ut-skin .player-list li.active { border-color: var(--orange); background: rgba(177,108,255,.1); box-shadow: 0 0 12px rgba(177,108,255,.2); }
.ut-skin .player-list li.me { box-shadow: inset 4px 0 0 var(--green); }
.ut-skin .player-list li.want { background: rgba(255,212,59,.07); border-color: rgba(255,212,59,.4); }
.ut-skin .player-list li.empty { background: none; border: 0; }
.ut-skin .player-list .pos { background: #1c2230; color: var(--green); }
.ut-skin .online { background: #3b434d; }
.ut-skin .online.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.ut-skin .want-badge { background: #ffd43b; color: #1b1500; }
.ut-skin .log { font-family: var(--mono); font-size: .8rem; }
.ut-skin .log li { border-bottom-color: var(--line); }
.ut-skin .role-badge.player { background: rgba(61,255,143,.12); color: var(--green); }
.ut-skin .role-badge.guest { background: #30363d; color: var(--ink); }
.ut-skin .status-text { color: var(--muted); }
.ut-skin .auto-roll { color: #d6b3ff; }
.ut-skin .turn-label { font-family: var(--mono); color: var(--muted); }

/* dadu: blok neon */
.ut-skin .dice { background: #0d1117; border: 2px solid var(--green); box-shadow: inset 0 -5px 0 #10241a, 0 0 18px rgba(61,255,143,.3); }
.ut-skin .dice .pip { background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ---------- panel host ---------- */
.ut-skin .join-panel { background: linear-gradient(135deg, #12301f, #1b1430); border-color: rgba(61,255,143,.35); }
.ut-skin .join-panel .big-code { color: var(--green); text-shadow: 0 0 18px rgba(61,255,143,.55); }
.ut-skin .host-tabs button { background: #161b22; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; }
.ut-skin .host-tabs button.active { background: var(--green); color: var(--bg); box-shadow: 0 0 14px rgba(61,255,143,.3); }
.ut-skin .theme-opt span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ut-skin .theme-opt input:checked + span { border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,255,143,.25); }
.ut-skin .chip { background: #0d1117; border: 1px solid var(--line); color: var(--ink); }
.ut-skin .chip.on { background: rgba(61,255,143,.1); border-color: var(--green); color: var(--green); }
.ut-skin .tgl { border-top-color: var(--line); }
.ut-skin .tgl-ui { background: #30363d; }
.ut-skin .tgl input:checked + .tgl-ui { background: var(--green); box-shadow: 0 0 10px rgba(61,255,143,.4); }
.ut-skin .saved-note { color: var(--green); font-family: var(--mono); }
.ut-skin .room-item { background: #0d1117; border: 1px solid var(--line); }
.ut-skin .room-item:hover { border-color: rgba(61,255,143,.4); }

/* ---------- papan: bingkai neon & pesan ---------- */
.ut-skin .board { box-shadow: 0 0 0 1px var(--line), 0 0 34px rgba(61,255,143,.12), var(--shadow); }
.ut-skin .board-msg { background: rgba(13,17,23,.45); }
.ut-skin .bm-card { background: rgba(22,27,34,.96); color: var(--ink); border: 1px solid var(--line); }

/* ---------- jendela melayang (soal, menang) ---------- */
.ut-skin .ov { background: rgba(5, 8, 12, .78); } /* tanpa backdrop-filter: blur di atas papan beranimasi bikin lag */
.ut-skin .ov.solid { background: var(--bg); }
.ut-skin .ov-card { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; }
.ut-skin .q-head { border-bottom: 1px solid var(--line); }
.ut-skin .q-badge { background: var(--green); color: var(--bg); }
.ut-skin .q-badge.light { background: rgba(177,108,255,.15); color: #d6b3ff; }
.ut-skin .timer-bar { background: #0d1117; }
.ut-skin .timer-bar div { background: linear-gradient(90deg, var(--green), #38e1ff); }
.ut-skin .q-intro { color: var(--muted); }
.ut-skin .opt { background: #0d1117; border: 1px solid var(--line); color: var(--ink); border-radius: 10px; }
.ut-skin .opt:disabled { color: var(--ink); }
.ut-skin #qModal.mine .opt:not(:disabled):hover { border-color: var(--green); box-shadow: 0 0 12px rgba(61,255,143,.2); }
.ut-skin #qModal.mine .q-card { box-shadow: 0 0 0 2px var(--green), 0 0 40px rgba(61,255,143,.25), 0 20px 60px rgba(0,0,0,.5); }
.ut-skin .opt .letter { background: #1c2230; border-color: var(--line); color: var(--ink); }
.ut-skin .opt.picked { border-color: #b16cff; background: rgba(177,108,255,.12); }
.ut-skin .opt.correct { background: rgba(61,255,143,.12); border-color: var(--green); }
.ut-skin .opt.correct .letter { background: var(--green); color: var(--bg); border-color: var(--green); }
.ut-skin .opt.wrong { background: rgba(255,92,122,.12); border-color: var(--red); }
.ut-skin .q-result.ok { background: rgba(61,255,143,.1); color: #86ffbd; border: 1px solid rgba(61,255,143,.35); }
.ut-skin .q-result.bad { background: rgba(255,92,122,.1); color: #ff9aad; border: 1px solid rgba(255,92,122,.35); }
.ut-skin .qmark { background: #b16cff; }
.ut-skin .toast-msg { background: var(--green); color: var(--bg); font-family: var(--mono); font-weight: 700; }
.ut-skin .modal-content { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.ut-skin .rules h2::before { content: '> '; color: var(--green); }

/* ---------- bank soal ---------- */
.ut-bank .container { max-width: 1240px; }
.ut-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; }
.ut-stat b { font: 800 1.7rem var(--mono); color: var(--green); line-height: 1.1; }
.ut-stat span { font-size: .8rem; color: var(--muted); }
.ut-win { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.ut-win-bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #0f141b; border-bottom: 1px solid var(--line); }
.ut-win-bar span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.ut-win-bar span:nth-child(2) { background: #febc2e; }
.ut-win-bar span:nth-child(3) { background: #28c840; }
.ut-win-bar em { font: 500 .78rem var(--mono); color: var(--muted); font-style: normal; margin-left: 8px; }
.ut-tab { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #0d1117; border: 1px solid var(--line); }
.ut-tab a { flex: 1; text-align: center; padding: 7px; border-radius: 7px; font: 700 .82rem var(--mono); color: var(--muted); text-decoration: none; }
.ut-tab a.aktif { background: #1c2230; color: var(--green); box-shadow: inset 0 0 0 1px var(--line); }
.ut-table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.03); --bs-table-color: var(--ink); --bs-table-hover-color: var(--ink); border-color: var(--line); }
.ut-table th { font: 700 .72rem var(--mono); color: var(--muted); text-transform: uppercase; }
.ut-table .q-text { max-width: 420px; }
.ut-table .ans { font: 800 1rem var(--mono); color: var(--green); text-transform: uppercase; }
.ut-b-bersama { background: rgba(56,225,255,.12); color: #38e1ff; }
.ut-b-saya { background: rgba(177,108,255,.15); color: #d6b3ff; }
.ut-bank .input-group-text { background: #1c2230; border-color: var(--line); color: var(--ink); font-family: var(--mono); }
.ut-bank .form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.ut-bank .form-label { font-family: var(--mono); color: var(--muted); }