/* WINDOWKILL: Web Edition — Dever theme (FU-DEVER: #0066CC / #0080FF) */
:root { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(1000px 700px at 50% 0%, #0e2a52 0%, #081426 55%, #04080f 100%);
  color: #eaf3ff; min-height: 100vh;
}
button { font-family: inherit; }
.btn-big {
  font-size: 19px; font-weight: 800; padding: 15px 38px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #0080FF, #0066CC); color: #fff;
  box-shadow: 0 8px 30px #0080FF55; transition: transform .12s ease;
}
.btn-big:hover { transform: translateY(-2px) scale(1.02); }
.btn-big:active { transform: scale(.97); }
.btn-ghost {
  font-size: 15px; padding: 13px 22px; border-radius: 14px; cursor: pointer;
  background: transparent; color: #cfe6ff; border: 1px solid #ffffff2e;
}
.btn-ghost:hover { background: #0080FF18; }
.panel {
  background: #0a1a3066; border: 1px solid #0080FF2a; border-radius: 16px;
  padding: 20px 22px; margin-bottom: 22px; backdrop-filter: blur(4px);
}
.panel h3 { margin-bottom: 12px; font-size: 16px; color: #8fc3ff; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.warn-box {
  border: 1px solid #fbbf2455; background: #fbbf2412; color: #fde68a; border-radius: 12px;
  padding: 12px 16px; font-size: 14px; margin-bottom: 20px; display: none; line-height: 1.6;
}
/* arena overlays */
.overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: #020610d9; z-index: 20; flex-direction: column; gap: 18px; text-align: center; padding: 20px;
}
.overlay.show { display: flex; }
.overlay h2 { font-size: 34px; }
.cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.card {
  width: 200px; background: #0c1f3a; border: 2px solid #0080FF66; border-radius: 16px;
  padding: 20px 16px; cursor: pointer; transition: transform .12s;
}
.card:hover { transform: translateY(-4px) scale(1.03); border-color: #0080FF; background: #12305c; }
.card .ico { font-size: 38px; margin-bottom: 8px; }
.card .t { font-weight: 800; font-size: 16px; margin-bottom: 6px; color: #cfe6ff; }
.card .d { font-size: 13px; color: #9db8d9; line-height: 1.5; }
.score-big { font-size: 22px; color: #fde68a; font-weight: 700; }
/* profiles */
.pchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #ffffff22; background: #ffffff08; color: #dbe9ff; cursor: pointer; font-size: 14px;
}
.pchip:hover { background: #0080FF22; }
.pchip.on { background: linear-gradient(135deg, #0080FF, #0066CC); border-color: transparent; font-weight: 700; color: #fff; }
.pchip .x { opacity: .6; font-size: 12px; padding: 0 2px; }
.pchip .x:hover { opacity: 1; color: #ff8f8f; }

/* ---------- SVG icon system (assets/icons/*.svg, sprite inlined in HTML) ---------- */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.18em; flex: none; }
.panel h3 .ic { color: #8fc3ff; margin-right: 8px; width: 1.25em; height: 1.25em; vertical-align: -0.22em; }
.howto .ic { color: #8fc3ff; margin-right: 10px; width: 1.3em; height: 1.3em; }
.setrow .ic { color: #8fc3ff; margin-right: 10px; width: 1.3em; height: 1.3em; }
.setrow > span { display: inline-flex; align-items: center; }
.btn-big .ic, .btn-ghost .ic { margin-right: 8px; }
.card .ico .ic { width: 46px; height: 46px; color: #8fc3ff; }
.pchip .ic { width: 18px; height: 18px; }
.pchip .av { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.pchip .x .ic { width: 12px; height: 12px; vertical-align: 0; }
#hs-list .ic, #stat-list .ic { color: #8fc3ff; margin-right: 6px; }
.warn-box .ic { color: #fbbf24; margin-right: 8px; width: 1.3em; height: 1.3em; }
.overlay h2 .ic { color: #8fc3ff; margin-right: 10px; width: 1.1em; height: 1.1em; }
.stat-line .ic { color: #8fc3ff; margin: 0 4px; }
.score-big .ic, #over-record .ic { color: #fde68a; margin-right: 8px; }
.card .d .ic { width: 1.1em; height: 1.1em; color: #8fc3ff; }
/* footer links */
.footer-links { display: flex; gap: 18px; justify-content: center; margin-top: 12px; }
.footer-links a { color: #8fc3ff; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-links .ic { width: 17px; height: 17px; margin: 0; }
/* mini brand chip inside game overlays */
.ov-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 2px; font-weight: 800; color: #8fc3ff; opacity: .9; }
.ov-brand img { width: 26px; height: 26px; border-radius: 7px; }
/* online leaderboard rank badges */
.rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; background: #1a2f52; color: #8fc3ff; margin-right: 6px; }
.rank.r1 { background: linear-gradient(135deg, #ffd34d, #b45309); color: #241a05; }
.rank.r2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #0f172a; }
.rank.r3 { background: linear-gradient(135deg, #f0a35e, #92400e); color: #fff; }