:root {
  --font-body: "VT323", ui-monospace, monospace;
  --font-display: "Silkscreen", ui-monospace, monospace;
  --bg: #07080f;
  --panel: rgba(12, 14, 28, 0.86);
  --edge: #2a3050;
  --edge-hi: #4a5690;
  --text: #d8def5;
  --dim: #7a82a8;
  --ore: #f2c14e;
  --miner: #f2c14e;
  --fighter: #ff5d73;
  --good: #6ee7a1;
  --bad: #ff5d73;
  --storm: #d070ff;
  --cyan: #7ff0ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  /* VT323: pixel look with clearly distinct glyphs (Z/2, B/8, 0/O).
     Silkscreen (--font-display) is kept for the logo and headings. */
  font-family: var(--font-body);
  font-size: 18px;
  -webkit-font-smoothing: none;
  user-select: none;
}

#screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  cursor: crosshair;
}

.panel {
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 8px 10px;
}

.dim { color: var(--dim); }
.bad { color: var(--bad); }
#hud > * { position: fixed; }

/* ---- left column ---- */
#leftcol { top: 12px; left: 12px; display: flex; flex-direction: column; gap: 10px; width: 240px; }
#stats { line-height: 1.5; }
#stats .ore { font-size: 22px; color: var(--ore); display: flex; align-items: center; gap: 8px; }
#stats .ore small { font-size: 11px; color: var(--dim); }
#stats .row { display: flex; align-items: center; gap: 6px; }
#stats .row.dim { display: block; }
#stats .row.clickable { cursor: pointer; }
#stats .row.clickable:hover { color: #fff; }
#stats .home { font-size: 15px; color: var(--ore); }
#stats .home:empty { display: none; }
.ico.ore-ico { width: 12px; height: 12px; background: var(--ore); box-shadow: 2px 2px 0 #9a6b1a; }
.dot { width: 8px; height: 8px; display: inline-block; }
.dot.miner { background: var(--miner); }
.dot.fighter { background: var(--fighter); }

#upgrades { padding: 6px 8px; }
#upgrades .title { color: var(--dim); margin-bottom: 4px; display: flex; justify-content: space-between; }
.up {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.up .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: flex; gap: 2px; }
.pip { width: 6px; height: 8px; background: #1c2140; border: 1px solid var(--edge-hi); }
.pip.on { background: var(--good); border-color: var(--good); }
.up button { padding: 1px 6px; font-size: 15px; min-width: 52px; justify-content: flex-end; }

/* ---- match clock ---- */
#clock { top: 12px; left: 50%; transform: translateX(-50%); text-align: center; min-width: 280px; padding: 6px 14px; }
#clock .top { font-size: 20px; display: flex; gap: 10px; justify-content: center; align-items: center; }
#clock .sep { color: var(--dim); }
#clock .tier { font-size: 16px; border: 2px solid var(--edge-hi); padding: 0 5px; color: var(--cyan); }
#phase-line { margin-top: 2px; }
#phase-line.warn { color: var(--storm); animation: blink 0.8s steps(2) infinite; }
#phase-line.final { color: var(--bad); }
#phase-sub { font-size: 15px; }
#phase-sub:empty { display: none; }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---- right column ---- */
#side { top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#minimap { padding: 0; width: 210px; height: 210px; image-rendering: pixelated; cursor: pointer; }
#board { width: 260px; line-height: 1.6; }
#board .title { color: var(--dim); margin-bottom: 4px; }
#board .p { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#board .p .n { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#board .p.me .n { color: #fff; }
#board .p.dead { opacity: 0.4; text-decoration: line-through; }
#board .p.wanted .n { color: #ffd24a; }
#board .p.wanted .n::before { content: '♛ '; }
#board .sw { width: 8px; height: 8px; flex: none; }
#board .rk { width: 22px; color: var(--dim); text-align: right; flex: none; }
#board .bot { flex: none; font-size: 13px; color: var(--dim); border: 1px solid var(--edge-hi); padding: 0 2px; }
#board .p > span:last-child { min-width: 58px; text-align: right; flex: none; }

#feed { width: 260px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#feed .f {
  background: rgba(12, 14, 28, 0.8);
  border-left: 3px solid var(--edge-hi);
  padding: 3px 6px;
  font-size: 15px;
  line-height: 1.4;
  transition: opacity 0.6s;
}
#feed .f.kill { border-color: var(--bad); }
#feed .f.storm { border-color: var(--storm); }
#feed .f.event { border-color: var(--cyan); }
#feed .f.phase { border-color: var(--ore); color: #fff; }
#feed .f.nova { border-color: var(--bad); color: var(--bad); }
#feed .f.wanted { border-color: #ffd24a; color: #ffd24a; }
#feed .f.old { opacity: 0; }

/* ---- bottom bar ---- */
#bar {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  display: flex;
  gap: 12px;
  padding: 8px;
}
#bar .group { display: flex; flex-direction: column; gap: 4px; }
#bar .label { color: var(--dim); font-size: 15px; padding-left: 2px; }
#abilities { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; }
#abilities button { position: relative; overflow: hidden; }
#abilities .cd {
  position: absolute;
  left: 0; bottom: 0; top: 0;
  background: rgba(127, 240, 255, 0.18);
  pointer-events: none;
}
#abilities .lock { color: var(--dim); font-size: 13px; }
#abilities button.on { border-color: var(--cyan); color: var(--cyan); }

button {
  font: inherit;
  color: var(--text);
  background: #161a33;
  border: 2px solid var(--edge-hi);
  box-shadow: 0 2px 0 #000;
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: #232955; border-color: #7482c8; }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
button:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
button.active { background: #2f3a7a; border-color: #aab6ff; }
button b { color: var(--ore); font-weight: normal; margin-left: auto; }
/* Pixel arrow drawn in CSS: the "→" glyph is missing in VT323, and its
   fallback font made the convert buttons taller than the others. */
.arr { display: inline-block; width: 10px; height: 8px; background: currentColor; vertical-align: middle; clip-path: polygon(0 3px, 6px 3px, 6px 0, 10px 4px, 6px 8px, 6px 5px, 0 5px); }

kbd {
  font: inherit;
  font-size: 15px;
  color: var(--dim);
  border: 1px solid var(--edge-hi);
  padding: 0 3px;
}

/* ---- tooltip ---- */
#tip {
  width: 320px;
  z-index: 5;
  pointer-events: none;
  padding: 10px 12px;
  border-color: var(--edge-hi);
  line-height: 1.5;
}
#tip .thead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#tip .ttitle { font-size: 15px; color: #fff; }
#tip p { margin: 0 0 8px; font-size: 18px; color: var(--text); line-height: 1.35; }
#tip .tstats { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; font-size: 15px; margin-bottom: 8px; }
#tip .tstats span:nth-child(even) { text-align: right; }
#tip .tstatus { font-size: 15px; border-top: 2px solid var(--edge); padding-top: 6px; }
#tip .tstatus.good { color: var(--good); }
#tip .tstatus.bad { color: var(--bad); }

/* Sits above the action bar so the two never overlap on narrower screens. */
#help { bottom: 136px; left: 12px; line-height: 1.8; font-size: 16px; color: var(--dim); }
#help.hidden { display: none; }
#btn-menu { top: 12px; right: 234px; padding: 4px 10px; }
/* Spectating: no player controls, just a small label where the bar was. */
#spectator-tag { display: none; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; color: var(--dim); letter-spacing: 2px; text-transform: uppercase; font-size: 15px; }
#hud.spectating #spectator-tag { display: block; }
#hud.spectating #leftcol, #hud.spectating #bar, #hud.spectating #hint { display: none; }
#hint { bottom: 118px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); }

#toast {
  position: fixed;
  z-index: 20;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  padding: 6px 12px;
  background: #3a1020;
  border: 2px solid var(--bad);
  box-shadow: 0 0 0 2px #000;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#toast.show { opacity: 1; }

#announce {
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 34px;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 3px 3px 0 #5a2bd6, 0 0 0 #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  text-align: center;
  white-space: nowrap;
}
#announce.show { opacity: 1; }
#announce small { display: block; font-size: 13px; letter-spacing: 1px; color: var(--dim); text-shadow: none; }

#conn { top: 96px; left: 50%; transform: translateX(-50%); padding: 6px 12px; background: #3a2a10; border: 2px solid var(--ore); }

/* ---- overlays ---- */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(3, 4, 10, 0.7);
  z-index: 10;
}
.overlay.soft { background: rgba(3, 4, 10, 0.45); }
.overlay[hidden] { display: none; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; width: min(360px, calc(100vw - 32px)); text-align: center; }
.card.wide { width: min(560px, calc(100vw - 32px)); }
.card h1 { margin: 0; font-size: 40px; letter-spacing: 4px; color: #fff; text-shadow: 3px 3px 0 #5a2bd6; }
.card h2 { margin: 0; font-size: 24px; letter-spacing: 2px; }
.card p { margin: 0; }
.card .big { font-size: 30px; color: #fff; }
.card .buttons { display: flex; gap: 10px; justify-content: center; }
.card input {
  font: inherit;
  font-size: 19px;
  color: var(--text);
  background: #0a0c18;
  border: 2px solid var(--edge-hi);
  padding: 8px;
  outline: none;
  text-align: center;
}
.rules { text-align: left; line-height: 1.7; font-size: 16px; border-top: 2px solid var(--edge); padding-top: 10px; }
.rules b { color: var(--ore); font-weight: normal; }
.c-comet { color: var(--cyan); }
.c-relic { color: var(--ore); }
#end-ranking { text-align: left; line-height: 1.7; }
#end-ranking .r { display: grid; grid-template-columns: 30px 12px 1fr auto; gap: 8px; align-items: center; }
#end-ranking .r.me { color: #fff; background: rgba(127, 240, 255, 0.08); }
#end-ranking .sw { width: 8px; height: 8px; }

@media (max-width: 900px) {
  #upgrades, #help { display: none; }
  #bar { flex-wrap: wrap; width: calc(100vw - 24px); justify-content: center; }
  #abilities { grid-template-columns: repeat(2, auto); }
  #side { transform: scale(0.8); transform-origin: top right; }
  #clock { top: auto; bottom: 170px; }
}

/* ---- title screen & lobby ---- */
.overlay.title {
  background: radial-gradient(ellipse at center, rgba(3, 4, 10, 0.1) 0%, rgba(3, 4, 10, 0.75) 100%);
  overflow-y: auto;
}
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 16px 60px; }
.logo {
  margin: 0;
  font-size: clamp(44px, 9vw, 96px);
  line-height: 1;
  letter-spacing: 6px;
  color: #fff;
  text-shadow: 4px 4px 0 #5a2bd6, 8px 8px 0 #000;
  display: flex;
  gap: 0.35em;
  flex-wrap: wrap;
  justify-content: center;
}
.logo span { color: #ff5d73; text-shadow: 4px 4px 0 #6a1030, 8px 8px 0 #000; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { color: #ff8a9a; } }
.tagline { margin: 0 0 8px; color: var(--dim); text-align: center; }

.menu { width: min(380px, calc(100vw - 32px)); text-align: left; }
.menu.wide { width: min(640px, calc(100vw - 32px)); }
.menu h2 { text-align: center; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field span { color: var(--dim); font-size: 15px; }
.card input[type="text"], .card input:not([type]), .card select {
  font: inherit;
  font-size: 19px;
  color: var(--text);
  background: #0a0c18;
  border: 2px solid var(--edge-hi);
  padding: 8px;
  outline: none;
}
.card select { font-size: 17px; padding: 4px 6px; }
button.primary { background: #3a1f7a; border-color: #9a7aff; color: #fff; justify-content: center; font-size: 20px; padding: 9px 12px; }
button.primary:hover:not(:disabled) { background: #4d2aa0; }
.menu > button, .row2 button { justify-content: center; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.joincode { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.joincode input { text-transform: uppercase; letter-spacing: 4px; text-align: center; min-width: 0; width: 100%; }
.card input { min-width: 0; }
#profile, #conn-title { font-size: 15px; text-align: center; }
.guide-link { display: block; text-align: center; color: var(--cyan); font-size: 17px; }
.guide-link:hover { color: #fff; }
#version { font-size: 13px; text-align: center; color: var(--dim); opacity: 0.6; }
#version:empty { display: none; }
.lang { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--dim); font-size: 15px; }
.lang select { font-size: 16px; }
.lang input[type="checkbox"] { accent-color: #9a7aff; width: 16px; height: 16px; margin: 0; }

#lobby-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
#lobby-list .empty { color: var(--dim); text-align: center; padding: 16px; }
.lob { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border: 2px solid var(--edge); background: rgba(10, 12, 24, 0.8); }
.lob .n { color: #fff; }
.lob .meta { color: var(--dim); font-size: 15px; }
.lob .st { font-size: 15px; color: var(--cyan); }
.lob .st.run { color: var(--ore); }

.settings { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; font-size: 16px; }
.settings .v { color: #fff; min-width: 28px; text-align: right; }
/* Hand-made pixel slider (see pixelSlider in main.js). --p is 0..1; the
   thumb is 10 px wide and sits flush with the inner edges at min and max. */
.pslider {
  position: relative;
  height: 14px;
  border: 2px solid var(--edge-hi);
  background: #1c2140;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.pslider .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc((100% - 10px) * var(--p, 0) + 5px);
  background: #9a7aff;
}
.pslider .thumb {
  position: absolute;
  top: -6px;
  left: calc((100% - 10px) * var(--p, 0));
  width: 10px;
  height: 22px;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #05060c;
  box-shadow: 0 2px 0 #000;
}
.pslider:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.settings .full { grid-column: 2 / 4; }

.room { width: min(900px, calc(100vw - 32px)); text-align: left; gap: 14px; }
.room-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.room-head h2 { text-align: left; }
.invite { display: flex; align-items: center; gap: 8px; }
.invite b { font-size: 22px; letter-spacing: 4px; color: var(--cyan); }
.room-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.room-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.room-col .label { color: var(--dim); font-size: 15px; }
#lobby-players { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 12px; min-height: 40px; max-height: 260px; overflow: auto; }
#lobby-players span { color: #fff; }
#lobby-players span.host::before { content: '♛ '; color: #ffd24a; }
.room-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#lobby-status { flex: 1; text-align: center; }
.room .rules { border-top: 2px solid var(--edge); padding-top: 8px; }
.room .rules summary { cursor: pointer; color: var(--dim); margin-bottom: 6px; }

@media (max-width: 700px) {
  .room-body { grid-template-columns: 1fr; }
}

/* Display font for big, short texts where Silkscreen reads well. */
.logo, .card h1, .card h2, .card .big, #clock .top, #announce, #stats .ore, .ttitle, .invite b, #end-title { font-family: var(--font-display); }

/* Languages the Latin pixel fonts don't cover. font-size-adjust scales the
   replacement fonts to roughly the size of VT323 (cap height 0.56 em), so the
   hand-tuned sizes in this file keep working. */
/* Russian: digits and Latin stay in VT323/Silkscreen (Pixelify's 5 looks like
   an S), only the Cyrillic letters come from Pixelify Sans. */
html[lang="ru"] { --font-body: "VT323", "Pixelify Sans", ui-monospace, monospace; --font-display: "Silkscreen", "Pixelify Sans", ui-monospace, monospace; }
html[lang="ja"] { --font-body: "DotGothic16", ui-monospace, monospace; --font-display: "DotGothic16", ui-monospace, monospace; }
html[lang="zh"] { --font-body: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; --font-display: var(--font-body); }
.logo { font-family: "Silkscreen", ui-monospace, monospace !important; font-size-adjust: none; }
html[lang="ru"] body { font-size-adjust: cap-height 0.54; } /* Pixelify is wider than VT323 */
html[lang="ja"] body { font-size-adjust: cap-height 0.68; } /* keeps kanji at ~15 px */
html[lang="zh"] body { font-size-adjust: cap-height 0.6; }