@font-face { font-family: 'NP Inter'; src: url('../assets/fonts/Inter.ttf'); }
@font-face { font-family: 'NP Mono';  src: url('../assets/fonts/Jet.ttf');   }

:root {
  --bg: #0b0f14;
  --panel: rgba(13, 18, 26, 0.92);
  --panel-2: #121926;
  --line: #263140;
  --line-2: #364457;
  --text: #e6edf3;
  --dim: #8a99ad;
  --blue: #3b82f6;
  --red: #ef4444;
  --gold: #fbbf24;
  --green: #22c55e;
  --ui: 'NP Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'NP Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: var(--bg); overflow: hidden; font-family: var(--ui); color: var(--text); }
#gl { display: block; width: 100vw; height: 100vh; cursor: crosshair; }
body.in-menu #gl { cursor: default; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#loading {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  color: var(--dim); font: 500 13px var(--mono); letter-spacing: 0.3em; background: var(--bg); transition: opacity .4s ease;
}
#loading.hidden { opacity: 0; pointer-events: none; }

/* ---------- overlay shell ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10; display: flex; padding: 32px;
  background:
    radial-gradient(1200px 600px at 15% 20%, rgba(59,130,246,0.14), transparent 60%),
    radial-gradient(900px 500px at 90% 90%, rgba(239,68,68,0.10), transparent 60%),
    linear-gradient(180deg, rgba(5,8,13,0.45), rgba(5,8,13,0.7));
  backdrop-filter: blur(3px);
  animation: fadeIn .25s ease;
}
.screen.dim { background: rgba(4, 7, 12, 0.78); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}

/* ---------- main menu ---------- */
#screen-main { align-items: center; }
.main-col { position: relative; z-index: 1; width: min(520px, 100%); margin-left: clamp(0px, 8vw, 140px); animation: rise .5s ease; }
.eyebrow { font: 500 11px var(--mono); letter-spacing: .4em; color: var(--dim); margin-bottom: 14px; }
.logo { font: 800 clamp(48px, 9vw, 92px)/0.92 var(--ui); letter-spacing: -0.03em; }
.logo .slash { color: var(--blue); }
.logo .point { color: var(--text); }
.tagline { margin: 18px 0 38px; color: var(--dim); font-size: 14px; line-height: 1.6; max-width: 440px; }
.menu-list { display: flex; flex-direction: column; gap: 10px; }

.btn {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgba(18, 25, 38, .8);
  font-weight: 700; letter-spacing: .14em; font-size: 14px; cursor: pointer; text-align: left;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn .hint { font: 500 11px var(--mono); color: var(--dim); letter-spacing: .08em; }
.btn:hover, .btn:focus-visible { outline: none; transform: translateX(6px); border-color: var(--blue); background: rgba(30, 48, 84, .55); box-shadow: 0 0 0 1px var(--blue) inset, 0 8px 30px rgba(59,130,246,.18); }
.btn:active { transform: translateX(3px) scale(.995); }
.btn.primary { background: linear-gradient(90deg, #1d4ed8, #2563eb); border-color: #3b82f6; font-size: 16px; padding: 19px 22px; }
.btn.primary:hover, .btn.primary:focus-visible { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.btn.danger:hover, .btn.danger:focus-visible { border-color: var(--red); background: rgba(80, 20, 24, .5); box-shadow: 0 0 0 1px var(--red) inset; }
.btn.small { padding: 11px 16px; font-size: 12px; }
.btn.center { justify-content: center; }
.btn:disabled { opacity: .4; pointer-events: none; }
.foot { position: absolute; left: 32px; right: 32px; bottom: 24px; display: flex; justify-content: space-between; font: 500 11px var(--mono); color: #55647a; letter-spacing: .08em; }

/* ---------- panels (setup / settings / pause / results) ---------- */
.screen.center { align-items: center; justify-content: center; }
.panel {
  position: relative; z-index: 1; width: min(1080px, 100%); max-height: 100%; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.6);
  animation: rise .3s ease; overflow: hidden;
}
.panel.narrow { width: min(560px, 100%); }
.panel.mid { width: min(760px, 100%); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font: 800 22px var(--ui); letter-spacing: .14em; }
.panel-head .sub { font: 500 11px var(--mono); color: var(--dim); letter-spacing: .12em; margin-top: 6px; }
.panel-body { padding: 24px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 26px; }
.panel-foot { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 18px 28px; border-top: 1px solid var(--line); background: rgba(0,0,0,.18); }
.panel-foot .right { display: flex; gap: 12px; }

.section-title { font: 600 11px var(--mono); letter-spacing: .3em; color: var(--dim); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-title .step { color: var(--blue); }

/* mode cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.mode-card {
  text-align: left; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s; display: flex; flex-direction: column; gap: 10px;
}
.mode-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.mode-card.selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 10px 40px rgba(59,130,246,.18); background: linear-gradient(180deg, rgba(37,99,235,.14), var(--panel-2)); }
.mode-card .row { display: flex; align-items: center; justify-content: space-between; }
.mode-card h3 { font: 800 18px var(--ui); letter-spacing: .12em; }
.mode-card .tag { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--blue); padding: 4px 8px; border: 1px solid rgba(59,130,246,.5); border-radius: 999px; }
.mode-card.selected .tag { background: var(--blue); color: #fff; }
.mode-card p { color: var(--dim); font-size: 13px; line-height: 1.55; }
.mode-card ul { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #b6c2d2; }
.mode-card li { padding-left: 16px; position: relative; }
.mode-card li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 2px; background: var(--blue); }

/* segmented */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.seg button { padding: 12px 26px; background: transparent; border: 0; border-right: 1px solid var(--line); cursor: pointer; font: 700 14px var(--mono); letter-spacing: .1em; color: var(--dim); transition: background .12s, color .12s; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.seg button.selected { background: var(--blue); color: #fff; }
.size-note { margin-left: 16px; color: var(--dim); font-size: 12px; }

/* squad slots + roster */
.slots { display: flex; gap: 10px; flex-wrap: wrap; }
.slot {
  width: 120px; padding: 10px; border: 1px dashed var(--line-2); border-radius: 10px; background: rgba(255,255,255,.02); cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s; min-height: 76px; display: flex; flex-direction: column; gap: 4px;
}
.slot .who { font: 600 9px var(--mono); letter-spacing: .18em; color: var(--dim); }
.slot .name { font: 800 15px var(--ui); letter-spacing: .06em; }
.slot .cls { font-size: 10px; color: var(--dim); }
.slot.empty .name { color: #55647a; font-weight: 600; }
.slot.active { border-style: solid; border-color: var(--blue); background: rgba(37,99,235,.12); }
.slot.filled { border-style: solid; border-color: var(--line-2); background: var(--panel-2); }
.slot.filled.active { border-color: var(--blue); }
.slot.you .who { color: var(--gold); }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.char { text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; transition: border-color .12s, transform .12s, opacity .12s; }
.char:hover { border-color: var(--line-2); transform: translateY(-1px); }
.char.picked { border-color: var(--blue); background: rgba(37,99,235,.14); }
.char.picked .pick { opacity: 1; }
.char .orb { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--ui); color: #fff; background: radial-gradient(circle at 35% 30%, #5b9bff, #1d4ed8); border: 2px solid #0b0f14; box-shadow: 0 0 0 2px var(--c, #3b82f6); }
.char .nm { font: 800 14px var(--ui); letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; }
.char .pick { opacity: 0; font: 700 9px var(--mono); letter-spacing: .1em; color: var(--blue); }
.char .cl { font-size: 10px; color: var(--dim); letter-spacing: .04em; }
.char .stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.stat { display: flex; flex-direction: column; gap: 3px; font: 600 8px var(--mono); color: #66768c; letter-spacing: .1em; }
.stat i { display: block; height: 3px; border-radius: 2px; background: #1d2736; position: relative; overflow: hidden; }
.stat i b { position: absolute; inset: 0 auto 0 0; background: var(--blue); border-radius: 2px; }
.hint-line { color: var(--dim); font-size: 12px; margin-top: 10px; }

/* settings */
.set-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.set-row { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: 20px; align-items: center; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.02); border: 1px solid transparent; }
.set-row:hover { border-color: var(--line); }
.set-row .lbl { font-weight: 600; font-size: 14px; }
.set-row .desc { color: var(--dim); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.set-row .ctl { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.set-row .val { font: 600 12px var(--mono); color: var(--dim); min-width: 42px; text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px; background: #1d2736; outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 3px solid #0b0f14; box-shadow: 0 0 0 1px var(--blue); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 3px solid #0b0f14; }
input[type=text] { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: #0b0f14; color: var(--text); font: 500 14px var(--mono); outline: none; }
input[type=text]:focus { border-color: var(--blue); }
.toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line-2); background: #151d2a; cursor: pointer; transition: background .15s, border-color .15s; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8a99ad; transition: transform .15s, background .15s; }
.toggle[aria-checked=true] { background: var(--blue); border-color: var(--blue); }
.toggle[aria-checked=true]::after { transform: translateX(20px); background: #fff; }
.toggle:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* results */
.result-hero { text-align: center; padding: 8px 0 4px; }
.result-hero .big { font: 800 clamp(28px, 5vw, 44px) var(--ui); letter-spacing: .08em; }
.result-hero .big.win { color: var(--gold); }
.result-hero .big.loss { color: #f87171; }
.result-hero .why { margin-top: 8px; font: 500 12px var(--mono); letter-spacing: .14em; color: var(--dim); }
.score-line { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 18px; }
.score-line .sq { text-align: center; }
.score-line .sq .n { font: 800 13px var(--ui); letter-spacing: .2em; }
.score-line .sq .v { font: 800 54px var(--mono); line-height: 1.1; }
.score-line .sq .s { font: 600 10px var(--mono); letter-spacing: .2em; margin-top: 2px; }
.score-line .dash { font: 800 36px var(--mono); color: #3a4a60; }
table.board { width: 100%; border-collapse: collapse; font-size: 13px; }
table.board th { text-align: left; font: 600 10px var(--mono); letter-spacing: .2em; color: var(--dim); padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.board td { padding: 9px 10px; border-bottom: 1px solid rgba(38,49,64,.5); }
table.board td.num, table.board th.num { text-align: right; font-family: var(--mono); }
table.board tr.you td { background: rgba(251,191,36,.07); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }

/* quit */
.bye { text-align: center; position: relative; z-index: 1; margin: auto; }
.bye .logo { font-size: clamp(32px, 6vw, 56px); margin-bottom: 14px; }
.bye p { color: var(--dim); margin-bottom: 26px; }

/* in-game floating switch button */
#character-switch {
  position: fixed; z-index: 5; left: 12px; bottom: 150px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line-2);
  background: rgba(11,16,23,.88); color: var(--text); font: 600 11px var(--mono); letter-spacing: .1em; cursor: pointer; transition: border-color .12s, background .12s;
}
#character-switch:hover:not(:disabled) { border-color: var(--blue); background: rgba(30,48,84,.9); }
#character-switch:disabled { color: #566377; cursor: default; }

@media (max-width: 760px) {
  .screen { padding: 14px; }
  .set-row { grid-template-columns: 1fr; }
  .set-row .ctl { justify-content: flex-start; }
  .panel-head, .panel-body, .panel-foot { padding-left: 16px; padding-right: 16px; }
  .main-col { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }