/* Hexgate Legends -- the front door (#auth), the home screen (#home) and the "disconnected" screen.
 * Everything is scoped to those three: the in-game UI (shop, lobby, pick, scoreboard) keeps its
 * own styles in index.html. Pixel art from tools/draw_ui.py (client/ui/assets/), drawn for this
 * project; fonts from Google Fonts (Pixelify Sans for headings and buttons, Verdana for text). */

#auth, #home, #down {
  --hx-gold: #ffd84a;
  --hx-gold-2: #f2a91a;
  --hx-gold-3: #8a4308;
  --hx-ink: #120903;
  --hx-stone: #2a2730;
  --hx-stone-2: #1b191f;
  --hx-text: #ece4d2;
  --hx-dim: #a79d8c;
  --hx-panel: rgba(16, 13, 17, 0.94);
  --hx-well: rgba(8, 7, 9, 0.72);
  --hx-portal: #9a4ae0;
  --hx-sky: #3fb8ff;
  --hx-head: 'Pixelify Sans', Verdana, sans-serif;
  color: var(--hx-text);
}

/* ── the room: a torch-lit stone wall ───────────────────────────────────────────────────────── */
#auth, #home {
  z-index: 12;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 150, 40, 0.10), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(rgba(10, 8, 12, 0.55), rgba(10, 8, 12, 0.55)),
    url('/client/ui/assets/wall.png') 0 0 / 288px 192px repeat,
    #141216;
  image-rendering: pixelated;
}
#home { background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(rgba(10, 8, 12, 0.72), rgba(10, 8, 12, 0.72)),
    url('/client/ui/assets/wall.png') 0 0 / 288px 192px repeat, #141216; }

#auth .hx-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#auth .torch {
  position: absolute; top: calc(50% - 150px); width: 64px; height: 136px;
  background: url('/client/ui/assets/torch.png') 0 0 / 256px 136px;
  animation: hx-flame 0.6s steps(4) infinite;
}
#auth .torch.l { left: calc(50% - 330px); }
#auth .torch.r { right: calc(50% - 330px); animation-delay: -0.3s; }
#auth .torch::before {                                      /* the light it throws */
  content: ''; position: absolute; left: 50%; top: 18px; width: 360px; height: 360px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 170, 60, 0.22), rgba(255, 120, 30, 0.06) 45%, transparent 70%);
  animation: hx-glow 2.4s ease-in-out infinite alternate; z-index: -1;
}
@keyframes hx-flame { to { background-position: -256px 0; } }
@keyframes hx-glow { from { opacity: 0.75; } to { opacity: 1; } }
#auth .ember {
  position: absolute; bottom: -10px; width: 4px; height: 4px; background: #ffb040; box-shadow: 0 0 6px #ff7a1a;
  animation: hx-rise linear infinite; opacity: 0;
}
@keyframes hx-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(var(--dx, 30px), -105vh); opacity: 0; }
}

/* ── shared pieces ─────────────────────────────────────────────────────────────────────────── */
#auth .panel, #home .panel {
  background: var(--hx-panel);
  border: 16px solid transparent;
  border-image: url('/client/ui/assets/frame.png') 16 / 16px stretch;
  border-radius: 0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75);
  background-clip: padding-box;
}
#auth .btn, #home .btn {
  font-family: var(--hx-head); font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--hx-text); background: linear-gradient(#3b3640, #2a262e);
  border: 2px solid #0c0a0d; border-radius: 0; padding: 6px 12px; text-align: center;
  box-shadow: inset 2px 2px 0 #5d5764, inset -2px -2px 0 #19161b;
}
#auth .btn:hover, #home .btn:hover { background: linear-gradient(#4a4450, #35303a); color: #fff; }
#auth .btn:active, #home .btn:active { box-shadow: inset 2px 2px 0 #19161b, inset -2px -2px 0 #5d5764; transform: translateY(1px); }
#auth .btn:disabled, #home .btn:disabled { opacity: 0.5; cursor: default; transform: none; }
#auth .btn.primary {
  color: #2a1400; background: linear-gradient(#ffd84a, #f2a91a 55%, #c7700e);
  box-shadow: inset 2px 2px 0 #fff4c2, inset -2px -2px 0 #8a4308; text-shadow: 0 1px 0 rgba(255, 244, 194, 0.6);
}
#auth .btn.primary:hover { background: linear-gradient(#ffe57a, #ffc23a 55%, #d9800f); color: #1a0c00; }
#auth input.name, #home input.name {
  background: #0c0a0d; color: #fff; border: 2px solid #0c0a0d; border-radius: 0;
  box-shadow: inset 2px 2px 0 #000, 0 0 0 1px #4a4450; padding: 8px 9px; font-size: 14px; user-select: text;
}
#auth input.name:focus, #home input.name:focus { outline: none; box-shadow: inset 2px 2px 0 #000, 0 0 0 1px var(--hx-gold-2); }
#auth .sub, #home .sub { color: var(--hx-dim); }
.hx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── the front door ────────────────────────────────────────────────────────────────────────── */
#auth .hx-door { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 94vw; }
#auth .hx-logo { width: 464px; max-width: 92vw; height: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.8)); }
#auth .authbox { width: 400px; max-width: 94vw; padding: 14px 22px 18px; box-sizing: border-box; }
#auth .authbox h1 { margin: 0; }
#auth .authbox > .sub { text-align: center; margin: 0 0 12px; font-family: var(--hx-head); font-size: 14px; letter-spacing: 0.5px; }
#auth #authtabs { display: flex; gap: 0; margin-bottom: 10px; border-bottom: 2px solid #0c0a0d; }
#auth #authtabs button {
  flex: 1; background: transparent; color: var(--hx-dim); border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 8px; font-family: var(--hx-head); font-size: 15px; cursor: pointer; margin-bottom: -2px;
}
#auth #authtabs button:hover { color: var(--hx-text); }
#auth #authtabs button.on { color: var(--hx-gold); border-bottom-color: var(--hx-gold-2); background: linear-gradient(transparent, rgba(242, 169, 26, 0.10)); }
#auth .authbox label { display: block; font-size: 13px; color: var(--hx-dim); margin: 9px 0 4px; }
#auth .authbox input.name { width: 100%; box-sizing: border-box; }
#auth #asubmit { width: 100%; margin-top: 16px; font-size: 17px; padding: 11px; }
#auth #aerr { color: #ff8a7a; font-size: 13px; min-height: 17px; margin-top: 8px; text-align: center; }
#auth .guest { border-top: 2px dashed #3a353f; margin-top: 12px; padding-top: 12px; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--hx-dim); }
#auth .guest input { flex: 1; min-width: 0; }
#auth .hx-foot { font-family: var(--hx-head); font-size: 13px; color: #8d8272; letter-spacing: 2px; text-shadow: 0 2px 0 #000; }

/* ── home ──────────────────────────────────────────────────────────────────────────────────── */
#home .homebox { width: 1180px; max-width: 98vw; height: 92vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; }
#home #homehead {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  background: linear-gradient(rgba(255, 216, 74, 0.06), transparent), var(--hx-well); border-bottom: 2px solid #0c0a0d;
}
#home .hx-hlogo { width: 68px; height: 68px; image-rendering: pixelated; margin: -4px -6px -4px 0; }
#home .hx-word { font-family: var(--hx-head); font-weight: 700; font-size: 15px; line-height: 1.05; color: var(--hx-gold); text-shadow: 0 2px 0 #000; text-transform: uppercase; letter-spacing: 1px; padding-right: 12px; margin-right: 2px; border-right: 2px solid #0c0a0d; }
#home #hlevel {
  width: 60px; height: 60px; border: 0; border-radius: 0; background: url('/client/ui/assets/medallion.png') center / 60px 60px no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hx-head); font-weight: 700; font-size: 17px; color: var(--hx-gold); text-shadow: 0 2px 0 #000;
}
#home .hwho { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
#home #hnick { font-family: var(--hx-head); font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 #000; }
#home .xpbar, #auth .xpbar { height: 10px; background: #0c0a0d; border: 2px solid #0c0a0d; box-shadow: 0 0 0 1px #4a4450; border-radius: 0; overflow: hidden; width: 220px; }
#home .xpbar i { display: block; height: 100%; background: linear-gradient(#c7a0ff, #9a4ae0 50%, #5a1a9a); box-shadow: inset 0 1px 0 #e6d2ff; }
#home #hrating { font-family: var(--hx-head); font-size: 15px; color: var(--hx-gold); }
#home #homehead .spacer { flex: 1; }
#home .homebody { display: flex; flex: 1; min-height: 0; }

/* friends: the VIP list */
#home #vipcol { width: 290px; border-right: 2px solid #0c0a0d; display: flex; flex-direction: column; min-height: 0; background: var(--hx-well); }
#home #viphead { font-family: var(--hx-head); font-size: 17px; font-weight: 700; color: var(--hx-gold); padding: 12px 12px 8px; text-shadow: 0 2px 0 #000; }
#home #friendform { display: flex; gap: 4px; padding: 0 12px 10px; }
#home #friendform input { flex: 1; min-width: 0; }
#home #vipreq .vreq { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 13px; background: rgba(255, 216, 74, 0.08); border-left: 3px solid var(--hx-gold-2); }
#home #vipreq .vreq span { flex: 1; font-weight: bold; }
#home #vipreq .vreq { flex-wrap: wrap; row-gap: 2px; }
#home #vipreq .vreq i { flex-basis: 100%; font-style: normal; font-family: var(--hx-head); font-size: 12px; color: var(--hx-gold); letter-spacing: 0.5px; }
#home #vipreq .vreq.out { color: var(--hx-dim); border-left-color: #4a4450; }
#home #vipreq .btn { padding: 3px 8px; font-size: 13px; }
#home #viplist { overflow-y: auto; flex: 1; padding: 4px 0; }
#home #viplist > .sub { padding: 8px 12px; }
#home .vip {
  display: grid; grid-template-columns: 12px 30px 1fr auto auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center;
  padding: 6px 12px; cursor: pointer; font-size: 14px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
#home .vip:hover { background: rgba(255, 216, 74, 0.06); }
#home .vip .dot { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 0; background: #56515a; box-shadow: 0 0 0 2px #0c0a0d; }
#home .vip.on .dot { background: #5fe06a; box-shadow: 0 0 0 2px #0c0a0d, 0 0 6px #5fe06a; }
#home .vip.busy .dot { background: #ffb347; box-shadow: 0 0 0 2px #0c0a0d, 0 0 6px #ffb347; }
#home .vip .lv { grid-row: 1 / 3; font-family: var(--hx-head); font-size: 12px; color: var(--hx-gold); text-align: center; background: #0c0a0d; border: 1px solid #4a4450; padding: 1px 0; }
#home .vip b { grid-column: 3; } #home .vip .sub { grid-column: 3; grid-row: 2; font-size: 12px; }
#home .vip.off b { color: #857d74; }
#home .vip .btn { grid-row: 1 / 3; padding: 3px 7px; font-size: 13px; }
#home .vip .badge { position: absolute; left: 34px; top: 1px; background: #d8303e; color: #fff; font-style: normal; font-size: 11px; padding: 0 5px; box-shadow: 0 0 0 1px #0c0a0d; }

/* FIND A MATCH */
#home #homemain { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#home #findbox {
  display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-bottom: 2px solid #0c0a0d;
  background: radial-gradient(ellipse 60% 120% at 20% 50%, rgba(154, 74, 224, 0.16), transparent 70%);
}
#home #findbtn {
  font-family: var(--hx-head); font-size: 24px; font-weight: 700; letter-spacing: 2px; color: #fff4c2; text-shadow: 0 3px 0 #300409;
  padding: 8px 30px; min-width: 300px; cursor: pointer; background: #8a1826;
  border: 24px solid transparent; border-image: url('/client/ui/assets/plate.png') 15 fill / 24px stretch;
  image-rendering: pixelated; transition: filter 0.1s;
}
#home #findbtn:hover { filter: brightness(1.18) saturate(1.1); }
#home #findbtn:active { transform: translateY(2px); filter: brightness(0.95); }
#home #findbtn:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
#home #findinfo { font-size: 14px; }

/* the panel: profile, match history, ranking */
#home #homepanel { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 14px; }
#home #homepanel h2 { margin: 0; font-family: var(--hx-head); font-size: 24px; color: #fff; text-shadow: 0 2px 0 #000; }
#home #homepanel h3 { margin: 18px 0 8px; font-family: var(--hx-head); font-size: 16px; color: var(--hx-gold); letter-spacing: 0.5px; text-shadow: 0 2px 0 #000; }
#home .profhead { display: flex; align-items: center; gap: 12px; }
#home .lvbadge { font-family: var(--hx-head); background: #0c0a0d; border: 1px solid var(--hx-gold-2); color: var(--hx-gold); padding: 2px 8px; font-size: 13px; }
#home .xpline { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; } #home .xpline .xpbar { width: 260px; }
#home .statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#home .statgrid div {
  background: #0c0a0d; border: 12px solid transparent; border-image: url('/client/ui/assets/stone.png') 8 / 12px stretch;
  padding: 2px 4px; display: flex; flex-direction: column; gap: 3px; background-clip: padding-box;
}
#home .statgrid b { font-family: var(--hx-head); font-size: 22px; color: #fff; } #home .statgrid span { font-size: 12px; color: var(--hx-dim); }
#home .champrow { display: flex; gap: 8px; flex-wrap: wrap; }
#home .champstat { display: grid; grid-template-columns: 40px auto; column-gap: 8px; align-items: center; background: #0c0a0d; border: 1px solid #3a353f; padding: 6px 10px; }
#home .champstat canvas { grid-row: 1 / 3; }
#home table.sc { border-collapse: collapse; width: 100%; font-size: 14px; }
#home table.sc th { font-family: var(--hx-head); color: var(--hx-gold); font-size: 13px; font-weight: 600; text-align: left; padding: 6px 8px; border-bottom: 2px solid #3a353f; }
#home table.sc td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
#home table.hist tr.win td { background: linear-gradient(90deg, rgba(95, 224, 106, 0.10), transparent 60%); }
#home table.hist tr.loss td { background: linear-gradient(90deg, rgba(216, 48, 62, 0.12), transparent 60%); }
#home table.hist tr.win td:nth-child(3) { color: #7fe36a; font-weight: bold; } #home table.hist tr.loss td:nth-child(3) { color: #ff8a7a; font-weight: bold; }
#home table.rank tr:nth-child(-n+3) td:first-child { font-family: var(--hx-head); color: var(--hx-gold); font-weight: 700; }
#home table.rank tr.me td { background: rgba(154, 74, 224, 0.16); }
#home table.rank a { color: var(--hx-text); }

/* private messages */
#home #pmwin { position: absolute; right: 16px; bottom: 16px; width: 340px; height: 360px; display: flex; flex-direction: column; z-index: 2; padding: 0; }
#home #pmwin header { display: flex; align-items: center; padding: 6px 10px; border-bottom: 2px solid #0c0a0d; font-family: var(--hx-head); font-size: 15px; color: var(--hx-gold); background: var(--hx-well); }
#home #pmwin header span { flex: 1; }
#home #pmlines { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 5px; font-size: 14px; background: rgba(0, 0, 0, 0.35); }
#home #pmlines div { max-width: 80%; padding: 6px 10px; overflow-wrap: anywhere; user-select: text; box-shadow: 0 0 0 1px #0c0a0d; }
#home #pmlines .mine { align-self: flex-end; background: #3c1f66; } #home #pmlines .theirs { align-self: flex-start; background: #3a3226; }
#home #pmform { display: flex; gap: 4px; padding: 6px; border-top: 2px solid #0c0a0d; }
#home #pmform input { flex: 1; min-width: 0; }

/* ── disconnected ──────────────────────────────────────────────────────────────────────────── */
#down { font-family: var(--hx-head); font-size: 20px; color: #ff8a7a; text-shadow: 0 2px 0 #000; background: rgba(8, 6, 10, 0.94); z-index: 30; }

/* ── narrow screens ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  #auth .torch { display: none; }
  #home .homebox { height: 96vh; }
  #home .homebody { flex-direction: column; overflow-y: auto; }
  #home #vipcol { width: auto; max-height: 220px; border-right: 0; border-bottom: 2px solid #0c0a0d; }
  #home #homehead { flex-wrap: wrap; }
  #home .hx-hlogo, #home .hx-word { display: none; }
  #home #findbox { flex-direction: column; align-items: stretch; }
  #home #findbtn { min-width: 0; }
  #home .statgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #auth .torch, #auth .torch::before, #auth .ember { animation: none; }
}

/* ── Champions tab ─────────────────────────────────────────────────────────────────────────── */
#home #homehead .btn.on { color: #2a1400; background: linear-gradient(#ffd84a, #f2a91a 55%, #c7700e); box-shadow: inset 2px 2px 0 #fff4c2, inset -2px -2px 0 #8a4308; }
#home .champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 54%); gap: 16px; height: 100%; min-height: 0; }
#home, #home * { scrollbar-color: #4a4450 #0c0a0d; scrollbar-width: thin; }
#home #homepanel:has(.champs) { overflow: hidden; display: flex; flex-direction: column; }
#home .cleft { display: flex; flex-direction: column; min-height: 0; }
#home .ctabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid #0c0a0d; margin-bottom: 10px; }
#home .ctabs button {
  background: transparent; color: var(--hx-dim); border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 7px 10px; font-family: var(--hx-head); font-size: 14px; cursor: pointer;
}
#home .ctabs button:hover { color: var(--hx-text); }
#home .ctabs button.on { color: var(--hx-gold); border-bottom-color: var(--hx-gold-2); background: linear-gradient(transparent, rgba(242, 169, 26, 0.10)); }
#home .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; overflow-y: auto; overflow-x: hidden; align-content: start; padding: 2px 4px 8px 2px; }
#home .cgrid .card {
  padding: 8px 4px 6px; text-align: center; cursor: pointer; background: #0c0a0d; border: 2px solid #2a262e;
  box-shadow: inset 0 0 0 1px #000; font-size: 12px;
}
#home .cgrid .card:hover { border-color: #6a6072; background: #151218; }
#home .cgrid .card.sel { border-color: var(--hx-gold-2); background: linear-gradient(rgba(242, 169, 26, 0.14), #0c0a0d); }
#home .cgrid .card canvas { display: block; margin: 0 auto 4px; image-rendering: pixelated; }
#home .cgrid .card { min-width: 0; }
#home .cgrid .card b { display: block; font-family: var(--hx-head); font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .cgrid .card .sub { font-size: 11px; }
#home .ccard { overflow-y: auto; overflow-x: hidden; padding: 0 6px 12px 16px; border-left: 2px solid #0c0a0d; min-width: 0; }
#home .chead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
#home .who { min-width: 0; }
#home .stage {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px;
  background: radial-gradient(ellipse at 50% 70%, rgba(154, 74, 224, 0.28), transparent 65%), #0c0a0d;
  border: 12px solid transparent; border-image: url('/client/ui/assets/stone.png') 8 / 12px stretch; background-clip: padding-box;
}
#home .stage canvas { image-rendering: pixelated; }
#home .stage .four { display: flex; gap: 0; border-top: 1px solid #2a262e; }
#home .ccard table.cstats { table-layout: fixed; }
#home .who h2 { margin: 0; }
#home .who .ctitle { font-family: var(--hx-head); color: var(--hx-gold); font-size: 15px; margin: 2px 0 4px; }
#home .who .stars { color: var(--hx-gold); letter-spacing: 1px; }
#home .who p { margin: 8px 0; line-height: 1.45; }
#home .teamsw { display: flex; gap: 4px; }
#home .teamsw .btn { padding: 3px 10px; font-size: 13px; }
#home .teamsw .btn.on { color: #fff; box-shadow: inset 2px 2px 0 #19161b, inset -2px -2px 0 #5d5764; background: #16131a; }
#home .ccard .ability { display: flex; gap: 10px; margin: 10px 0; padding: 8px; background: #0c0a0d; border: 1px solid #2a262e; }
#home .ccard .ability canvas { flex: none; border: 2px solid #3a353f; image-rendering: pixelated; }
#home .ccard .ability h4 { margin: 0 0 2px; font-family: var(--hx-head); font-size: 15px; color: #fff; }
#home .ccard .ability .sub { font-size: 12px; margin-bottom: 4px; }
#home .ccard .ability .st { margin-top: 5px; font-size: 13px; color: #d8c68f; }
#home table.cstats td:first-child { color: var(--hx-dim); }
#home table.cstats td:nth-child(3) { color: #7fe36a; }
#home .build { display: flex; flex-wrap: wrap; gap: 6px; }
#home .build div { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; background: #0c0a0d; border: 1px solid #2a262e; font-size: 12px; }
#home .build canvas { image-rendering: pixelated; }
@media (max-width: 820px) {
  #home .champs { grid-template-columns: 1fr; height: auto; }
  #home #homepanel:has(.champs) { overflow-y: auto; display: block; }
  #home .ccard { border-left: 0; padding: 0; }
}