/* Minimalist thin-line / mono UI. Flattens the previous "house" chrome and
   defers to the dark monospace base defined in index.html's inline <style>
   (--ink, --edge, --panel, --font-pixel …). One accent (--edge), 1px hairline
   borders, no fills, no rotation, no offset shadows — chrome that stays out of
   the way of the sprites. */

:root {
  --ui-hair: rgba(61, 220, 132, 0.34);
  --ui-hair-strong: rgba(61, 220, 132, 0.7);
  --ui-panel: rgba(7, 17, 15, 0.86);
  --ui-panel-2: rgba(16, 40, 33, 0.86);
  --ui-muted: var(--ink-dim);
}

html,
body {
  color: var(--ink);
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
}

/* Shared flat panel treatment. */
#startup-loader,
#name-form,
#profile-modal,
#hud-name,
#hud .help-panel,
#roster,
#mobile-controls button,
#gh-link,
#chat-log,
#chat-input {
  border: 1px solid var(--ui-hair);
  border-radius: 2px;
  background: var(--ui-panel);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: blur(2px);
  transform: none;
  text-shadow: none;
}

/* --- entry overlay --- */
#startup-loader {
  min-width: min(300px, 100%);
  padding: 20px;
  color: var(--ink);
  font: 400 14px/1.4 var(--font-pixel);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#startup-loader::before {
  width: 28px;
  height: 28px;
  border: 2px solid var(--ui-hair);
  border-top-color: var(--edge);
  border-radius: 50%;
  animation: startup-spin 0.9s linear infinite;
}

#name-form {
  gap: 12px;
  width: min(590px, 100%);
  padding: 18px;
}

#name,
#profile-name {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--ui-hair);
  border-radius: 2px;
  background: var(--ui-panel-2);
  color: var(--ink);
  caret-color: var(--edge);
  font: 400 14px/1.2 var(--font-pixel);
}

#name::placeholder,
#profile-name::placeholder,
#chat-input::placeholder {
  color: var(--ui-muted);
}

#name:focus,
#profile-name:focus,
#chat-input:focus {
  border-color: var(--edge);
  outline: 1px solid var(--edge-soft);
  outline-offset: 1px;
}

#issue59-guide {
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--ui-hair);
  border-radius: 2px;
  background: var(--ui-panel-2);
  color: var(--ink);
}

#issue59-guide h1 {
  color: var(--edge);
  font: 700 16px/1.2 var(--font-pixel);
  letter-spacing: 0;
  text-transform: uppercase;
}

#issue59-guide p,
#issue59-guide li {
  color: var(--ink);
  font: 400 13px/1.45 var(--font-pixel);
}

#issue59-guide strong {
  color: var(--edge);
}

/* --- pickers (role / character / profile character) --- */
#role-picker,
#character-picker,
#profile-character-picker {
  gap: 8px;
}

#role-picker label,
#character-picker label,
#profile-character-picker label {
  position: relative;
  border: 1px solid var(--ui-hair);
  border-radius: 2px;
  background: var(--ui-panel-2);
  color: var(--ink);
  box-shadow: none;
  transform: none;
  transition: border-color 120ms ease, background 120ms ease;
}

#role-picker label:hover,
#character-picker label:hover,
#profile-character-picker label:hover {
  background: rgba(61, 220, 132, 0.08);
}

#role-picker .role-name,
#character-picker .character-name,
#profile-character-picker .character-name {
  color: var(--ink);
  font: 700 14px/1.15 var(--font-pixel);
  text-transform: none;
}

#role-picker .role-effect,
#character-picker .character-note,
#profile-character-picker .character-note {
  color: var(--ui-muted);
  font: 400 12px/1.3 var(--font-pixel);
}

#role-picker label:has(input:checked),
#character-picker label:has(input:checked),
#profile-character-picker label:has(input:checked) {
  border-color: var(--edge);
  background: rgba(61, 220, 132, 0.14);
  box-shadow: none;
}

#role-picker label:has(input:focus-visible),
#character-picker label:has(input:focus-visible),
#profile-character-picker label:has(input:focus-visible) {
  outline: 1px solid var(--edge);
  outline-offset: 2px;
}

.character-preview {
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: none;
}

#character-picker label,
#profile-character-picker label {
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  padding: 6px 10px 7px 6px;
  text-transform: none;
}

/* --- buttons --- */
button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--ui-hair-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--edge);
  font: 700 13px/1.2 var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: none;
}

button:hover:not(:disabled) {
  background: rgba(61, 220, 132, 0.12);
}

button:active:not(:disabled) {
  background: rgba(61, 220, 132, 0.2);
  transform: none;
  box-shadow: none;
}

button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--edge);
  outline-offset: 2px;
}

/* --- HUD --- */
#hud {
  top: 10px;
  left: 10px;
  gap: 8px;
  color: var(--ink);
  font: 400 13px/1.3 var(--font-pixel);
  align-items: center;
}

#hud-name {
  max-width: min(180px, 34vw);
  min-height: 30px;
  padding: 5px 9px;
  color: var(--edge);
  font: 700 13px/1.2 var(--font-pixel);
  text-transform: none;
}

#hud-status {
  padding: 4px 7px;
  border: none;
  background: none;
  color: var(--ui-muted);
  text-shadow: 0 1px 2px var(--shadow);
}

#hud .hud-help {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--ui-hair);
  border-radius: 2px;
  background: var(--ui-panel);
  color: var(--edge);
  font: 700 16px/1 var(--font-pixel);
  box-shadow: none;
}

#hud .hud-help:hover,
#hud .hud-help[aria-expanded="true"] {
  background: rgba(61, 220, 132, 0.14);
}

#hud .help-panel {
  top: 50px;
  left: 10px;
  width: min(260px, calc(100vw - 20px));
  padding: 12px;
}

#hud .help-title,
#hud .help-panel dt {
  color: var(--edge);
  font-weight: 700;
  text-transform: uppercase;
}

#hud .help-panel dd {
  color: var(--ink);
}

/* --- roster --- */
#roster {
  top: 10px;
  right: 10px;
  min-width: 210px;
  max-width: min(300px, calc(100vw - 20px));
  color: var(--ink);
  font: 400 12px/1.3 var(--font-pixel);
  overflow: hidden;
}

#roster-title {
  padding: 6px 10px;
  border-bottom: 1px solid var(--ui-hair);
  background: none;
  color: var(--edge);
  font: 700 12px/1.2 var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.roster-row {
  gap: 8px;
  padding: 6px 9px;
  border-top: 1px solid rgba(61, 220, 132, 0.12);
}

.roster-row:nth-child(even) {
  background: rgba(61, 220, 132, 0.05);
}

.roster-role,
.roster-kills {
  color: var(--ui-muted);
}

.roster-ult {
  color: var(--ui-muted);
}

.roster-ult.ready {
  color: var(--edge);
}

/* --- profile modal --- */
#profile-modal::backdrop {
  background: rgba(2, 6, 5, 0.72);
  backdrop-filter: blur(3px);
}

#profile-form {
  gap: 12px;
  padding: 18px;
  background: transparent;
}

#profile-form h2 {
  color: var(--edge);
  font: 700 18px/1.15 var(--font-pixel);
  text-transform: uppercase;
}

#profile-form > label {
  color: var(--ink);
  font: 400 13px/1.2 var(--font-pixel);
  text-transform: none;
}

#profile-cancel {
  color: var(--ui-muted);
  border-color: var(--ui-hair);
}

/* --- mobile controls --- */
#mobile-controls {
  bottom: 14px;
  gap: 8px;
  width: min(292px, calc(100vw - 88px));
}

#mobile-controls button {
  min-height: 46px;
  color: var(--edge);
  touch-action: none;
}

#mobile-controls button:nth-child(2) {
  transform: none;
}

#mobile-controls button:hover:not(:disabled),
#mobile-controls button:active:not(:disabled) {
  background: rgba(61, 220, 132, 0.18);
  color: var(--edge);
}

/* --- repo link --- */
#gh-link {
  bottom: 9px;
  left: 9px;
  padding: 5px 9px;
  color: var(--ui-muted);
  font: 400 12px/1.2 var(--font-pixel);
  opacity: 0.85;
  text-decoration: none;
  transform: none;
}

#gh-link:hover {
  background: rgba(61, 220, 132, 0.12);
  color: var(--edge);
  opacity: 1;
}

/* --- chat (bottom-left, above the repo link) --- */
#chat {
  position: fixed;
  left: 10px;
  bottom: 40px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(340px, calc(100vw - 20px));
  pointer-events: none;
}

#chat-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 132px;
  padding: 6px 8px;
  overflow: hidden;
  background: rgba(7, 17, 15, 0.55);
  border: 1px solid transparent;
  border-radius: 2px;
  backdrop-filter: none;
}

#chat-log:empty {
  display: none;
}

.chat-line {
  font: 400 12px/1.35 var(--font-pixel);
  color: var(--ink);
  word-break: break-word;
  text-shadow: 0 1px 2px var(--shadow);
}

.chat-line:not(:last-child) {
  opacity: 0.62;
}

.chat-name {
  color: var(--edge);
  margin-right: 6px;
}

#chat-form {
  pointer-events: auto;
}

#chat-input {
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  font: 400 13px/1.2 var(--font-pixel);
  color: var(--ink);
  caret-color: var(--edge);
}

@media (max-width: 640px) {
  #overlay {
    align-items: flex-start;
    padding: 12px;
  }

  #role-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #character-picker,
  #profile-character-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #character-picker label,
  #profile-character-picker label {
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 5px;
  }

  .character-preview {
    width: 52px;
    height: 56px;
  }

  #hud {
    right: auto;
    max-width: calc(100vw - 20px);
    flex-wrap: wrap;
  }

  #roster {
    top: auto;
    right: 8px;
    bottom: 76px;
    min-width: 190px;
    max-width: calc(100vw - 16px);
  }

  /* Keep chat clear of the mobile action buttons and repo link. */
  #chat {
    bottom: 70px;
    width: min(60vw, 260px);
  }

  #chat-log {
    max-height: 96px;
  }
}

@media (max-width: 420px) {
  #character-picker .character-note,
  #profile-character-picker .character-note {
    display: none;
  }

  #hud-name {
    max-width: 42vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  #startup-loader::before {
    animation-duration: 2.5s;
  }
}