/* ============================================================
   ARC — unified web stylesheet (every web page links ONLY this).
   The in-game client (game.html) keeps its own styles.
   Sections: base -> lobby -> account -> ladder -> history pages.
   ============================================================ */
/* ============================================================
   Shared styling for the lobby subpages (help / about / account).
   Same design language as the lobby, with a static backdrop
   instead of the animated starfield.
   ============================================================ */
:root{
  --bg:#e9ebf0; --panel:#f4f5f8; --panel2:#ffffff; --edge:#cfd3dc; --edge-hi:#aab0bd;
  --hi:#9a7b1a; --txt:#2b2f38; --dim:#5c6270; --faint:#8a90a0;
  --green:#1f9e3a; --green-dim:#9fd3aa; --red:#d02f2f; --red-dim:#e3a5a5;
  --blue:#2f6fd0;
  --mono:'Lucida Console',Monaco,Consolas,monospace;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; min-height:100%; color:var(--txt); font:16px var(--mono);
  background:
    radial-gradient(ellipse at 20% 10%, #e8ebf222 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, #dde2ec18 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, #dfe3ea 0%, var(--bg) 65%);
  background-attachment:fixed;
}
body::after{ content:none; }
#wrap{ position:relative; max-width:1000px; margin:0 auto; padding:30px 20px 70px; }

/* ---- header + nav ---- */
header{ text-align:center; margin-bottom:26px; }
.bigArc{
  font-size:44px; letter-spacing:16px; color:var(--hi); margin:0; line-height:1;
  text-shadow:0 1px 2px #00000018;
}
.bigArc a{ color:inherit; text-decoration:none; }
.subLine{ font-size:14px; letter-spacing:5px; color:var(--dim); margin:8px 0 0; }
nav{ display:flex; justify-content:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
nav a{
  padding:12px 26px; border-radius:8px; border:1px solid var(--edge);
  color:var(--dim); text-decoration:none; font-size:14px; letter-spacing:2px; transition:all .15s;
}
nav a:hover{ color:var(--hi); border-color:var(--edge-hi); }
nav a.here{ color:var(--hi); border-color:var(--hi); background:#f7efd8; box-shadow:0 2px 8px #00000018; }

/* ---- panels ---- */
.panel{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--edge); border-radius:12px; padding:28px 32px; margin-bottom:24px;
  box-shadow:0 8px 30px #00000014, inset 0 1px 0 #ffffffd0;

}
.panel a{ color:var(--dim); }
.panel h2{
  font-size:15px; letter-spacing:3px; color:var(--hi); margin:0 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--edge);
  display:flex; align-items:center; gap:8px;
}
.panel h2::before{ content:""; width:8px; height:8px; background:var(--hi);
  box-shadow:0 0 8px var(--hi); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); flex-shrink:0; }
.panel h3{ font-size:14px; letter-spacing:2px; color:#232732; font-weight:bold; margin:18px 0 6px; }
.panel p, .panel li{ color:var(--dim); font-size:15.5px; line-height:1.75; }
.panel ul{ padding-left:18px; margin:6px 0; }
.panel b{ color:var(--txt); font-weight:normal; }
.g{ color:var(--green); } .r{ color:var(--red); } .y{ color:var(--hi); } .b{ color:var(--blue); }

/* key chips */
kbd{
  display:inline-block; padding:4px 12px; margin:0 3px; border-radius:6px;
  background:#ffffff; border:1px solid var(--edge-hi); border-bottom-width:2px;
  color:var(--hi); font:14px var(--mono);
}

/* controls table */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:11px 12px; border-bottom:1px solid #0000000a; font-size:15px; }
th{ color:var(--faint); font-weight:normal; font-size:13px; letter-spacing:2px; }
td:first-child{ white-space:nowrap; }

footer { text-align:center; color:var(--faint); font-size:13px; letter-spacing:2px; margin-top:30px; }
footer a{ color:var(--dim); }

/* ===== lobby (index.html) ===== */


  /* animated space backdrop */
  #stars{ position:fixed; inset:0; z-index:0; }
  #vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse at 50% 0%, transparent 40%, #e9ebf0cc 100%); }
  #scan{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5;
    background:repeating-linear-gradient(0deg, transparent 0 2px, #00000022 2px 4px); }

  body.lobby #wrap{ position:relative; z-index:3; max-width:1220px; margin:0 auto; padding:34px 20px 70px; }

  /* ---- hero ---- */
  body.lobby header{ text-align:center; margin-bottom:30px; }
  body.lobby .bigArc{
    font-size:64px; letter-spacing:22px; color:var(--hi); margin:0; line-height:1;
    text-shadow:0 1px 2px #00000018;
  }
  body.lobby .title{
    font-size:20px; letter-spacing:7px; color:#fff; margin:8px 0 0;
    text-shadow:0 1px 2px #00000018;
  }
  .title .arc{ color:var(--hi); }
  body.lobby .tagline{ margin:10px 0 0; letter-spacing:4px; font-size:14px; color:var(--dim); }
  .tagline .g{ color:var(--green); text-shadow:0 1px 2px #00000018; }
  .tagline .r{ color:var(--red); text-shadow:0 1px 2px #00000018; }
  body.lobby .rule{ width:280px; height:1px; margin:18px auto 0; border:0;
    background:linear-gradient(90deg, transparent, var(--edge-hi), transparent); }
  .topNav{ display:flex; justify-content:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
  .topNav a{
    padding:11px 24px; border-radius:8px; border:1px solid var(--edge);
    color:var(--dim); text-decoration:none; font-size:14px; letter-spacing:2px; transition:all .15s;
  }
  .topNav a:hover{ color:var(--hi); border-color:var(--edge-hi); }

  /* ---- layout ---- */
  .cols{ display:flex; gap:22px; align-items:flex-start; }
  .main{ flex:1.6; min-width:0; }
  .side{ flex:1; min-width:300px; position:sticky; top:20px; }
  @media (max-width:860px){ .cols{ flex-direction:column-reverse; } .side{ position:static; width:100%; } }

  /* ---- inputs ---- */
  label{ display:block; font-size:13px; letter-spacing:2px; color:var(--dim); margin:12px 0 5px; }
  input[type=text], select{
    width:100%; background:#ffffff; color:var(--hi);
    border:1px solid var(--edge); border-radius:8px; padding:14px 16px; font:16px var(--mono);
    outline:none; transition:border-color .15s, box-shadow .15s;
  }
  input[type=text]:focus, select:focus{ border-color:var(--hi); box-shadow:0 0 0 1px #9a7b1a44, 0 0 14px #9a7b1a22; }
  ::placeholder{ color:#a0a6b2; }

  /* segmented mode picker */
  .seg{ display:flex; gap:6px; }
  .seg button{
    flex:1; padding:13px 0; background:#ffffff; color:var(--dim); border:1px solid var(--edge);
    border-radius:8px; cursor:pointer; font:15px var(--mono); transition:all .12s;
  }
  .seg button:hover{ border-color:var(--edge-hi); color:var(--txt); }
  .seg button.on{ background:#f7efd8; color:var(--hi); border-color:var(--hi); box-shadow:0 2px 8px #00000018; }

  /* toggle switch */
  .toggleRow{ display:flex; align-items:center; gap:10px; margin-top:14px; cursor:pointer; user-select:none; }
  .toggle{ width:46px; height:24px; border-radius:12px; background:#ffffff; border:1px solid var(--edge); position:relative; transition:all .15s; flex-shrink:0; }
  .toggle::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
    background:var(--faint); transition:all .15s; }
  .toggleRow.on .toggle{ background:#e2f5e6; border-color:var(--green-dim); }
  .toggleRow.on .toggle::after{ left:25px; background:var(--green); box-shadow:0 0 6px var(--green); }
  .toggleRow span{ font-size:14px; color:var(--dim); }
  .toggleRow.on span{ color:var(--txt); }

  /* primary / ghost buttons */
  .btn{
    display:inline-block; padding:15px 26px; border-radius:8px; cursor:pointer;
    font:bold 15px var(--mono); letter-spacing:2px; text-decoration:none; text-align:center;
    transition:all .15s; border:1px solid;
  }
  .btn.primary{
    width:100%; margin-top:16px; color:#0d1a0d;
    background:linear-gradient(180deg, #3fbf58, #2fb542); border-color:#2fb542;
    box-shadow:0 2px 8px #00000018, inset 0 1px 0 #ffffff88;
  }
  .btn.primary:hover{ box-shadow:0 2px 8px #00000018, inset 0 1px 0 #ffffff88; transform:translateY(-1px); }
  .btn.primary:active{ transform:translateY(0); }
  .btn.ghost{ background:transparent; color:var(--dim); border-color:var(--edge); font-weight:normal; }
  .btn.ghost:hover{ color:var(--hi); border-color:var(--edge-hi); }

  #msg{ color:#c0392b; min-height:16px; margin-top:10px; font-size:14px; }

  /* ---- room cards ---- */
  .roomCard{
    position:relative; background:linear-gradient(180deg, var(--panel2), var(--panel));
    border:1px solid var(--edge); border-radius:12px; margin-bottom:18px; overflow:hidden;
    transition:border-color .15s, box-shadow .15s, transform .15s;
  }
  .roomCard:hover{ border-color:var(--edge-hi); box-shadow:0 6px 24px #0000001a; transform:translateY(-1px); }
  .roomCard::before{ /* status accent strip */
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--faint);
  }
  .roomCard.active::before{ background:var(--green); box-shadow:0 0 12px var(--green); }
  .roomCard .inner{ display:flex; align-items:center; gap:16px; padding:14px 16px 14px 20px; flex-wrap:wrap; }
  .roomMeta{ flex:1; min-width:170px; }
  .roomName{ font-size:18px; color:#232732; font-weight:bold; letter-spacing:1px; margin:0 0 4px; }
  .roomSub{ font-size:13.5px; color:var(--dim); letter-spacing:1px; }
  .roomSub b{ color:var(--txt); font-weight:normal; }

  .capsBox{ text-align:center; min-width:74px; }
  .caps{ font-size:20px; letter-spacing:2px; }
  .caps .g{ color:var(--green); text-shadow:0 1px 2px #00000018; }
  .caps .r{ color:var(--red); text-shadow:0 1px 2px #00000018; }
  .caps .x{ color:var(--faint); font-size:15px; }
  .capsBox small{ display:block; color:var(--faint); font-size:12px; letter-spacing:2px; margin-top:2px; }

  .slotsBox{ min-width:120px; }
  .slots{ display:flex; gap:3px; flex-wrap:wrap; }
  .slot{ width:11px; height:14px; border-radius:2px; border:1px solid var(--edge);
    background:transparent; }
  .slot.human{ background:var(--green); border-color:var(--green); box-shadow:0 2px 8px #00000018; }
  .slot.bot{ background:#3a3450; border-color:#4a445e; }
  .slotsBox small{ display:block; color:var(--faint); font-size:12px; letter-spacing:1px; margin-top:4px; }

  .statusTag{ font-size:12px; letter-spacing:2px; padding:4px 9px; border-radius:12px; }
  .statusTag.active{ color:var(--green); border:1px solid var(--green-dim); background:#e2f5e6;
    text-shadow:0 1px 2px #00000018; animation:pulse 2.2s infinite; }
  .statusTag.empty{ color:var(--faint); border:1px solid var(--edge); background:#ffffff; }
  @keyframes pulse{ 0%,100%{ box-shadow:0 2px 8px #00000018; } 50%{ box-shadow:0 2px 8px #00000018; } }

  .roomBtns{ display:flex; gap:8px; }
  .btn.join{
    padding:10px 22px; color:#0d1a0d;
    background:linear-gradient(180deg, #3fbf58, #2fb542); border-color:#2fb542;
    box-shadow:0 2px 8px #00000018;
  }
  .btn.join:hover{ box-shadow:0 2px 8px #00000018; transform:translateY(-1px); }

  /* scoreboard expand */
  .sbWrap{ display:flex; gap:18px; padding:12px 20px 16px; background:#ffffffcc;
    border-top:1px solid var(--edge); }
  .sbTeam{ flex:1; }
  .sbHead{ font-size:13px; letter-spacing:2px; margin-bottom:6px; }
  .sbHead.g{ color:var(--green); } .sbHead.r{ color:var(--red); }
  .sbTable{ width:100%; border-collapse:collapse; }
  .sbTable th{ font-size:12px; letter-spacing:1px; color:var(--faint); padding:2px 6px; text-align:left; border-bottom:1px solid var(--edge); }
  .sbTable td{ font-size:14px; padding:3px 6px; border-bottom:1px solid #00000006; }
  .sbTable .num{ text-align:right; width:44px; }

  #empty{ text-align:center; color:var(--faint); padding:34px 0; letter-spacing:2px; font-size:14px;
    border:1px dashed var(--edge); border-radius:12px; }

  footer{ text-align:center; margin-top:26px; }
  .live{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green);
    box-shadow:0 0 8px var(--green); margin-right:7px; animation:pulse 2s infinite; vertical-align:1px; }
  .listHead{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 12px; }
  .listHead h2{ font-size:14px; letter-spacing:3px; color:var(--dim); margin:0; }
  .listHead small{ color:var(--faint); font-size:13px; letter-spacing:1px; }

/* ===== account page ===== */

  .authCard{ max-width:420px; margin:0 auto; }
  .tabs{ display:flex; gap:6px; margin-bottom:18px; }
  .tabs button{
    flex:1; padding:10px 0; background:#ffffff; color:var(--dim); border:1px solid var(--edge);
    border-radius:8px; cursor:pointer; font:15px var(--mono); letter-spacing:2px; transition:all .12s;
  }
  .tabs button.on{ background:#f7efd8; color:var(--hi); border-color:var(--hi); box-shadow:0 2px 8px #00000018; }
  .authCard label{ display:block; font-size:13px; letter-spacing:2px; color:var(--dim); margin:12px 0 5px; }
  .authCard input{
    width:100%; background:#ffffff; color:var(--hi);
    border:1px solid var(--edge); border-radius:8px; padding:10px 12px; font:16px var(--mono);
    outline:none; transition:all .15s;
  }
  .authCard input:focus{ border-color:var(--hi); box-shadow:0 0 0 1px #9a7b1a44, 0 0 14px #9a7b1a22; }
  ::placeholder{ color:#a0a6b2; }
  .primaryBtn{
    display:block; width:100%; margin-top:18px; padding:12px; border-radius:8px;
    font:bold 15px var(--mono); letter-spacing:3px; color:#0d1a0d; cursor:not-allowed;
    background:linear-gradient(180deg, #3fbf58, #2fb542); border:1px solid #2fb542;
    opacity:.45;
  }
  .soon{
    margin-top:14px; padding:10px 12px; border-radius:8px; text-align:center;
    background:#f7efd8; border:1px solid var(--hi); color:var(--hi);
    font-size:14px; letter-spacing:1px;
  }
  #registerForm{ display:none; }

/* ===== rankings ladder ===== */

  .lead{ color:var(--dim); }
  table.ladder td, table.ladder th{ font-size:15px; }
  table.ladder td.rank{ color:var(--faint); width:52px; }
  table.ladder td.name{ color:var(--hi); }
  table.ladder tr.me td.name{ color:#fff; text-shadow:0 1px 2px #00000018; }
  table.ladder td.pct{ color:var(--green); }
  table.ladder td.leaves{ color:var(--red); }
  .empty{ text-align:center; color:var(--dim); padding:26px 0; }
  .medal{ font-size:17px; }

/* ===== ranked history pages (games / match / player) ===== */
table.list{ width:100%; border-collapse:collapse; }
table.list tr.row{ cursor:pointer; }
table.list tr.row:hover td{ background:#00000006; }
.wG{ color:var(--green); } .wR{ color:var(--red); }
.star{ color:var(--hi); }
a.plink{ color:var(--hi); text-decoration:none; }
a.plink:hover{ text-decoration:underline; }
.bigStat{ display:inline-block; min-width:110px; margin:6px 14px 6px 0; }
.bigStat b{ display:block; font-size:26px; color:var(--hi); }
.bigStat span{ font-size:13px; color:var(--dim); letter-spacing:1px; }
.resWin{ color:var(--green); } .resLoss{ color:var(--red); } .resLeave{ color:var(--red); font-style:italic; }
.teamHead{ letter-spacing:2px; margin:18px 0 6px; font-size:16px; }


/* ===== SILVER THEME overrides ===== */
html,body{
  background:
    linear-gradient(180deg, #f2f3f7 0%, #e9ebf0 40%, #e2e5ec 100%);
  background-attachment:fixed;
}
#stars, #vignette, #scan{ display:none; }   /* dark-theme lobby backdrop retired */
.bigArc, body.lobby .bigArc{ color:#4a4f5a; text-shadow:0 1px 0 #ffffff, 0 2px 6px #00000022; }
.bigArc a{ color:inherit; }
.panel{
  background:linear-gradient(180deg, #ffffff, #f2f3f7);
  border:1px solid var(--edge);
  box-shadow:0 6px 22px #0000000f, inset 0 1px 0 #ffffff;
}
.panel h2{ color:#3a3f4a; }
.panel h2::before{ background:linear-gradient(135deg,#c7cbd4,#8d93a0); box-shadow:none; }
input[type=text], input[type=password], input[type=email], select{
  background:#ffffff; color:var(--txt);
  border:1px solid var(--edge);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, select:focus{
  border-color:var(--edge-hi); box-shadow:0 0 0 3px #2f6fd022;
}
.btn.primary, .card button{
  color:#ffffff; text-shadow:0 1px 1px #00000033;
  background:linear-gradient(180deg, #34b04e, #1f8c36); border-color:#1f8c36;
}
.btn.ghost{ background:linear-gradient(180deg,#ffffff,#eef0f4); color:#4a4f5a; }
.btn.ghost:hover{ color:#1f2329; border-color:var(--edge-hi); }
nav a, .topNav a{ background:linear-gradient(180deg,#ffffff,#eef0f4); color:#5c6270; }
nav a:hover, .topNav a:hover{ color:#1f2329; border-color:var(--edge-hi); }
nav a.here{ background:linear-gradient(180deg,#fdf9ec,#f5edd2); color:#7a6210; border-color:#d8c98f; box-shadow:none; }
kbd{ background:linear-gradient(180deg,#ffffff,#eceef2); color:#3a3f4a; border-color:#b8bdc8; }
.roomCard{ background:linear-gradient(180deg,#ffffff,#f2f3f7); }
.roomCard:hover{ box-shadow:0 8px 24px #00000015; }
.seg button{ background:linear-gradient(180deg,#ffffff,#eef0f4); color:#5c6270; }
.seg button.on{ background:linear-gradient(180deg,#fdf9ec,#f5edd2); color:#7a6210; border-color:#d8c98f; box-shadow:none; }
.toggle{ background:#e2e5ec; }
table.ladder tr.me td.name a, table.ladder tr.me td.name{ color:#7a6210; text-shadow:none; }
footer{ color:#9aa0ac; }


/* ===== DUSK BACKDROP refinement: slate background, light panels ===== */
html,body{
  background:
    radial-gradient(ellipse at 50% -10%, #59616f 0%, transparent 55%),
    linear-gradient(180deg, #4a5160 0%, #3a404c 45%, #303540 100%);
  background-attachment:fixed;
}
/* stars return, softly, above the slate */
#stars{ display:block; opacity:.5; }
#vignette, #scan{ display:none; }

/* header + footer live on the slate, so they go light */
.bigArc, body.lobby .bigArc{
  color:#e3e7ee;
  text-shadow:0 1px 0 #ffffff22, 0 3px 10px #00000066;
}
.subLine{ color:#aab2c0; }
body.lobby .title{ color:#f2f4f8; text-shadow:0 1px 3px #00000055; }
body.lobby .title .arc{ color:#ffd989; }
body.lobby .tagline{ color:#9aa3b2; }
body.lobby .tagline .g{ color:#5fd47a; } body.lobby .tagline .r{ color:#ff7a6e; }
body.lobby .rule{ background:linear-gradient(90deg, transparent, #ffffff44, transparent); }
footer{ color:#a7adba; }
footer a{ color:#c9ced9; }
nav a, .topNav a{ border-color:#5a6170; }
nav a:hover, .topNav a:hover{ border-color:#8a92a2; }

/* panels pop against the slate */
.panel, .roomCard{ box-shadow:0 10px 30px #00000040, inset 0 1px 0 #ffffff; }


/* ===== fixes: readable card titles + pilot profile chip ===== */
.roomName{ color:#232732; }
.pilotChip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:20px; text-decoration:none;
  font-weight:bold; letter-spacing:1px; color:#7a6210;
  background:linear-gradient(180deg,#fdf9ec,#f3e9c8);
  border:1px solid #d8c98f; box-shadow:0 2px 6px #00000014;
  transition:all .15s;
}
.pilotChip::before{ content:"◈"; color:#b89a3a; }
.pilotChip:hover{ border-color:#b89a3a; box-shadow:0 3px 10px #0000001f; transform:translateY(-1px); }

/* ---- match report: bot rows (report-only, never on the ladder) ---- */
.botRow td{ color:#7b8494; }
.botTag{
  font-size:10px; letter-spacing:1px; color:#7b8494;
  border:1px solid #b9c0cc; border-radius:3px; padding:1px 5px; margin-left:6px;
  vertical-align:1px;
}

/* ---- banner logo (replaces the ARC text) ---- */
.bigArc img{
  height:130px; width:auto; display:inline-block; vertical-align:middle;
  filter:drop-shadow(0 3px 10px #00000066);
}
body.lobby .bigArc img{ height:200px; }
@media (max-width:700px){
  .bigArc img{ height:88px; }
  body.lobby .bigArc img{ height:130px; }
}