@font-face {
    font-family: Xirod;
    src: url("../Xirod.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: ConsolasCustom;
    src: url("../fonts/consolas.ttf") format("truetype");
    font-display: swap;
}

:root {
    --cyan: #0abdc6;
    --magenta: #ea00d9;
    --yellow: #ead500;
    --red: #ea2b00;
    --green: #00ea0e;
    --gray: #8a8f98;
    --bg: #090a12;
    --bg-deep: #07080e;
    --panel: rgba(16, 18, 29, 0.95);
    --panel-soft: rgba(23, 26, 39, 0.86);
    --text: #f5f7fb;
    --muted: #9ba2b5;
    --line: rgba(10, 189, 198, 0.36);
    --font-body: ConsolasCustom, Consolas, Monaco, "Courier New", monospace;
    --font-display: "Xirod", "Eurostile", "Bank Gothic", "Arial Black", sans-serif;
    --cyan-glow: 0 0 12px rgba(10, 189, 198, 0.48), 0 0 4px rgba(10, 189, 198, 0.30);
    --magenta-glow: 0 0 12px rgba(234, 0, 217, 0.44), 0 0 4px rgba(234, 0, 217, 0.27);
    --yellow-glow: 0 0 12px rgba(234, 213, 0, 0.40), 0 0 4px rgba(234, 213, 0, 0.24);
  }

  * { box-sizing: border-box; }

  html {
    min-height: 100%;
    background: #000;
  }

  body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font-body);
    background:
      radial-gradient(circle at 50% -10%, rgba(10, 189, 198, 0.10), transparent 31rem),
      radial-gradient(circle at 7% 42%, rgba(10, 189, 198, 0.055), transparent 28rem),
      radial-gradient(circle at 93% 68%, rgba(234, 0, 217, 0.045), transparent 28rem),
      linear-gradient(180deg, #020608 0%, #000 34%, #03070b 100%);
    overflow-x: hidden;
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  body::before {
    z-index: 50;
    background:
      repeating-linear-gradient(
        180deg,
        rgba(10, 189, 198, 0.072) 0,
        rgba(10, 189, 198, 0.072) 1px,
        transparent 1px,
        transparent 4px
      );
    opacity: 0.18;
    mix-blend-mode: screen;
  }

  body::after {
    z-index: 0;
    background:
      linear-gradient(90deg, transparent 0, rgba(10, 189, 198, 0.12) 10%, transparent 17%),
      linear-gradient(270deg, transparent 0, rgba(10, 189, 198, 0.09) 8%, transparent 16%);
    opacity: 0.5;
  }

  main {
    position: relative;
    z-index: 1;
    width: min(1380px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) 0 5rem;
  }

  .terminal-hero {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    margin: 0 auto clamp(1.6rem, 4vw, 3.3rem);
    padding: 1.2rem 1rem 1.8rem;
    text-align: center;
  }

  .terminal-hero::after {
    content: "";
    width: min(720px, 86vw);
    height: 1px;
    margin-top: 0.35rem;
    background: linear-gradient(90deg, transparent, rgba(10,189,198,.52), transparent);
    box-shadow: 0 0 16px rgba(10,189,198,.24);
  }

  .eyebrow {
    color: var(--cyan);
    font-size: clamp(0.68rem, 1.2vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-shadow: var(--cyan-glow);
  }

  h1, h2, h3, summary {
    font-family: var(--font-display);
    font-weight: 800;
  }

  h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.25rem, 7vw, 5rem);
    line-height: 0.92;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    text-shadow:
      0 0 16px rgba(244, 251, 255, 0.24),
      0 0 5px rgba(244, 251, 255, 0.16);
  }

  h2 {
    margin: 0 0 1.1rem;
    color: var(--cyan);
    font-size: clamp(0.88rem, 1.7vw, 1.12rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-shadow: var(--cyan-glow);
  }

  h3 {
    color: #f4fbff;
    font-size: 0.84rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  p { line-height: 1.55; }

  .hero-copy {
    max-width: 780px;
    margin: 0;
    color: #bdd0db;
    font-size: 0.82rem;
    letter-spacing: 0.055em;
    line-height: 1.6;
  }

  .muted {
    color: var(--muted);
    opacity: 1;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: var(--text);
  }

  button {
    --button-accent: var(--yellow);
    --button-bg: rgba(20, 18, 0, 0.70);
    position: relative;
    min-height: 2.55rem;
    padding: 0.68rem 1rem;
    border: 0;
    background: var(--button-bg);
    color: color-mix(in srgb, var(--button-accent) 78%, white);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    clip-path: polygon(0 18%, 7% 0, 100% 0, 100% 82%, 93% 100%, 0 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-accent) 24%, transparent);
    text-shadow: 0 0 9px color-mix(in srgb, var(--button-accent) 32%, transparent);
    transition: transform 140ms ease, background 140ms ease, filter 140ms ease;
    cursor: pointer;
  }

  button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--button-accent) 10%, transparent), transparent);
    pointer-events: none;
  }

  button:hover:not(:disabled),
  button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    outline: none;
    filter: brightness(1.22);
  }

  button:disabled {
    opacity: 0.32;
    cursor: not-allowed;
  }

  #uploadBtn,
  #addPlayerBtn,
  #renderBtn { --button-accent: var(--yellow); --button-bg: rgba(20, 18, 0, 0.70); }

  #resetBtn,
  .player-actions [data-up],
  .player-actions [data-down] { --button-accent: var(--cyan); --button-bg: rgba(0, 26, 30, 0.66); }

  #downloadBtn { --button-accent: var(--magenta); --button-bg: rgba(31, 0, 29, 0.66); }

  .player-actions [data-remove] {
    --button-accent: #ff5b43;
    --button-bg: rgba(45, 8, 4, 0.72);
  }

  input,
  select,
  textarea {
    --field-accent: var(--cyan);
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--field-accent) 72%, transparent);
    border-radius: 0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--field-accent) 4%, transparent), transparent 36%),
      rgba(0, 0, 0, 0.83);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--field-accent) 8%, transparent),
      inset 0 0 22px rgba(0, 0, 0, 0.38);
    padding: 0.72rem 0.82rem;
    outline: none;
    caret-color: var(--field-accent);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--field-accent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--field-accent) 7%, transparent), transparent 42%),
      #000;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--field-accent) 18%, transparent),
      0 0 18px color-mix(in srgb, var(--field-accent) 22%, transparent),
      inset 0 0 22px rgba(0, 0, 0, 0.5);
  }

  select {
    color-scheme: dark;
  }

  input[type="number"] {
    appearance: auto;
    -moz-appearance: auto;
    color-scheme: dark;
  }

  .economy-money,
  .economy-money input { --field-accent: var(--cyan); }

  .economy-blocks,
  .economy-blocks input { --field-accent: var(--magenta); }

  .economy-rent,
  .economy-rent input { --field-accent: var(--yellow); }

  textarea {
    resize: vertical;
    line-height: 1.45;
    scrollbar-width: thin;
    scrollbar-color: var(--field-accent) rgba(3, 8, 13, 0.9);
  }

  textarea::-webkit-scrollbar { width: 11px; }
  textarea::-webkit-scrollbar-track { background: rgba(3,8,13,.9); }
  textarea::-webkit-scrollbar-thumb {
    border: 2px solid rgba(3,8,13,.9);
    background: color-mix(in srgb, var(--field-accent) 78%, black);
    box-shadow: 0 0 12px color-mix(in srgb, var(--field-accent) 26%, transparent);
  }

  textarea.cards {
    min-height: 165px;
    font-size: 0.79rem;
  }

  textarea.json {
    min-height: 540px;
    --field-accent: rgba(244, 251, 255, 0.72);
    font-size: 0.72rem;
    color: #cfe5ef;
  }

  label {
    display: block;
    color: #dceefa;
    font-size: 0.72rem;
    letter-spacing: 0.075em;
  }

  label > span {
    display: block;
    margin-bottom: 0.48rem;
    color: color-mix(in srgb, var(--field-accent, var(--cyan)) 76%, white);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 0 9px color-mix(in srgb, var(--field-accent, var(--cyan)) 26%, transparent);
  }

  section,
  details {
    position: relative;
    margin: 1.15rem 0;
    padding: clamp(1rem, 2.2vw, 1.4rem);
    border: 1px solid rgba(10, 189, 198, 0.42);
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(10, 189, 198, 0.055), transparent 32%),
      rgba(5, 11, 18, 0.91);
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.34),
      0 0 22px rgba(10, 189, 198, 0.07),
      0 0 0 1px rgba(244, 251, 255, 0.025) inset;
    backdrop-filter: blur(7px);
  }

  section::before,
  details::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        180deg,
        rgba(10, 189, 198, 0.025) 0,
        rgba(10, 189, 198, 0.025) 1px,
        transparent 1px,
        transparent 4px
      );
    pointer-events: none;
  }

  section > *,
  details > * {
    position: relative;
    z-index: 1;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.9rem;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 1rem;
  }

  .shared-decks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .top-actions,
  .bottom-actions,
  .player-head,
  .player-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    align-items: center;
  }

  .top-actions {
    justify-content: center;
    margin: 0 0 1.15rem;
  }

  .bottom-actions { margin: 1rem 0 0.85rem; }

  .status {
    position: relative;
    margin: 0 auto 1.2rem;
    padding: 0.82rem 1rem 0.82rem 1.25rem;
    border: 1px solid rgba(10, 189, 198, 0.34);
    border-left: 3px solid var(--cyan);
    background: rgba(4, 12, 18, 0.9);
    color: #cde8f0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    line-height: 1.55;
    white-space: pre-wrap;
    text-transform: uppercase;
    box-shadow: 0 0 16px rgba(10, 189, 198, 0.08);
  }

  .status::before {
    content: "SYSTEM";
    position: absolute;
    top: -0.63rem;
    left: 0.8rem;
    padding: 0 0.42rem;
    background: #02070b;
    color: var(--cyan);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.14em;
  }

  .status.ok {
    border-color: rgba(0, 234, 14, 0.36);
    border-left-color: var(--green);
    color: #d8ffdc;
  }

  .status.ok::before { color: var(--green); }

  .status.warn {
    border-color: rgba(234, 213, 0, 0.38);
    border-left-color: var(--yellow);
    color: #fff8b3;
  }

  .status.warn::before { color: var(--yellow); }

  .status.error {
    border-color: rgba(234, 43, 0, 0.48);
    border-left-color: #ff5433;
    color: #ffd7cf;
  }

  .status.error::before { color: #ff5433; }

  .player-head {
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .character-controls {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    flex: 1 1 520px;
  }

  .character-controls select {
    --field-accent: var(--player-accent, var(--cyan));
    max-width: 320px;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-shadow: 0 0 9px color-mix(in srgb, var(--player-accent, var(--cyan)) 28%, transparent);
  }

  .go-first {
    --field-accent: var(--player-accent, var(--yellow));
    display: inline-flex;
    gap: 0.58rem;
    align-items: center;
    width: auto;
    padding: 0.55rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--player-accent, var(--yellow)) 38%, transparent);
    background: rgba(0,0,0,.35);
    color: #e7f2f8;
    white-space: nowrap;
    text-transform: uppercase;
  }

  .go-first input {
    appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--player-accent, var(--yellow));
    background: #000;
    box-shadow: 0 0 8px color-mix(in srgb, var(--player-accent, var(--yellow)) 20%, transparent);
  }

  .go-first input:checked {
    background: var(--player-accent, var(--yellow));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--player-accent, var(--yellow)) 42%, white 10%) inset,
      0 0 11px color-mix(in srgb, var(--player-accent, var(--yellow)) 50%, transparent);
  }

  .player-actions button {
    min-width: 2.45rem;
    min-height: 2.15rem;
    padding: 0.46rem 0.66rem;
    font-size: 0.66rem;
  }

  .player {
    --player-accent: var(--cyan);
    position: relative;
    margin: 1rem 0;
    padding: 1.15rem 1rem 1rem 1.35rem;
    border: 1px solid color-mix(in srgb, var(--player-accent) 58%, transparent);
    border-left: 3px solid var(--player-accent);
    background:
      linear-gradient(100deg, color-mix(in srgb, var(--player-accent) 7%, transparent), transparent 24%),
      rgba(3, 8, 14, 0.92);
    box-shadow:
      0 10px 24px rgba(0,0,0,.28),
      0 0 14px color-mix(in srgb, var(--player-accent) 9%, transparent),
      inset 0 0 28px rgba(0,0,0,.18);
  }


  .player[data-character-name="Gary McAnon"] { --player-accent: var(--red); }
  .player[data-character-name="Nivek Nitmick"] { --player-accent: var(--green); }
  .player[data-character-name="Jon J2"] { --player-accent: var(--yellow); }
  .player[data-character-name="Satoru Shinak"] { --player-accent: var(--magenta); }
  .player[data-character-name="Adriana Omal"] { --player-accent: var(--cyan); }

  .player .grid label { --field-accent: var(--player-accent); }

  .player .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .player .player-stat-grid input,
  .player .card-field.tone-player textarea {
    border-color: var(--player-accent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--player-accent) 12%, transparent),
      0 0 14px color-mix(in srgb, var(--player-accent) 10%, transparent),
      inset 0 0 22px rgba(0, 0, 0, 0.42);
  }

  .card-field {
    --field-accent: rgba(244, 251, 255, 0.8);
    position: relative;
  }

  .card-field.tone-cyan { --field-accent: var(--cyan); }
  .card-field.tone-magenta { --field-accent: var(--magenta); }
  .card-field.tone-yellow { --field-accent: var(--yellow); }
  .card-field.tone-white { --field-accent: #f4fbff; }
  .player .card-field.tone-player { --field-accent: var(--player-accent); }

  .card-field label { --field-accent: inherit; }
  .card-field textarea { --field-accent: inherit; }

  .card-field textarea.invalid {
    --field-accent: #ff4b32;
    border: 1px solid #ff4b32;
    box-shadow:
      0 0 0 1px rgba(255,75,50,.16),
      0 0 18px rgba(255,75,50,.22),
      inset 0 0 20px rgba(50,0,0,.28);
  }

  .field-error {
    min-height: 18px;
    margin-top: 0.38rem;
    color: #ff725e;
    font-size: 0.66rem;
    letter-spacing: 0.035em;
    line-height: 1.45;
    white-space: pre-wrap;
  }

  details {
    border-color: rgba(244, 251, 255, 0.20);
    background:
      linear-gradient(180deg, rgba(244, 251, 255, 0.025), transparent 30%),
      rgba(5, 9, 15, 0.91);
  }

  summary {
    color: #f4fbff;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(244,251,255,.14);
    cursor: pointer;
  }

  details[open] summary {
    margin-bottom: 0.9rem;
    color: var(--cyan);
    text-shadow: var(--cyan-glow);
  }

  #cardSearch { --field-accent: var(--cyan); }

  #cardList {
    margin-top: 0.9rem;
    columns: 3 240px;
    column-gap: 1.7rem;
    font-size: 0.7rem;
  }

  #cardList div {
    break-inside: avoid;
    padding: 0.28rem 0.45rem;
    border-left: 1px solid rgba(10,189,198,.22);
    color: #bcd3df;
  }

  code {
    color: #fff;
    font-family: var(--font-body);
    font-size: .95em;
  }


  @media (min-width: 761px) and (max-width: 1050px) {
    .shared-decks-grid,
    .player .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 760px) {
    main { width: min(100% - 1rem, 1380px); padding-top: 1.2rem; }
    .terminal-hero { margin-bottom: 1.2rem; padding-inline: 0.25rem; }
    h1 { font-size: clamp(2rem, 12vw, 3.2rem); }
    .top-actions, .bottom-actions { display: grid; grid-template-columns: 1fr; }
    .top-actions button, .bottom-actions button { width: 100%; }
    .character-controls { align-items: stretch; flex-direction: column; }
    .character-controls select { max-width: none; }
    .go-first { width: 100%; }
    .player-head { align-items: stretch; }
    .player-actions { width: 100%; }
    .player-actions button { flex: 1 1 auto; }
    .player .card-grid,
    .shared-decks-grid { grid-template-columns: 1fr; }
    #cardList { columns: 1; }
  }

  /* Shared Blockminers site shell */
  .skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.7rem 1rem;
    color: #000;
    background: var(--cyan);
    transform: translateY(-150%);
  }

  .skip-link:focus { transform: none; }

  .site-header {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 0.8rem max(1.1rem, calc((100vw - 1380px) / 2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 10, 18, 0.92);
    backdrop-filter: blur(14px);
  }

  .wordmark {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    text-decoration: none;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.35), 0 3px 10px #000;
  }

  .tool-context {
    color: var(--muted);
    font-size: 0.64rem;
    letter-spacing: 0.13em;
  }

  main { padding-top: 0; }

  .terminal-hero {
    isolation: isolate;
    min-height: 350px;
    margin-bottom: clamp(1.6rem, 4vw, 3.3rem);
    padding: clamp(4rem, 8vw, 6.5rem) 1rem clamp(3rem, 6vw, 5rem);
    overflow: hidden;
    background:
      radial-gradient(circle at 78% 32%, rgba(234, 0, 217, 0.1), transparent 25%),
      radial-gradient(circle at 38% 62%, rgba(10, 189, 198, 0.09), transparent 28%);
  }

  .terminal-hero > *:not(.signal-grid) { position: relative; z-index: 1; }

  .signal-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.08;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(10, 189, 198, 0.24) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10, 189, 198, 0.24) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  }

  .eyebrow { letter-spacing: 0.16em; text-shadow: none; }
  .eyebrow::before { margin-right: 0.55rem; color: var(--magenta); content: "//"; }

  h1 {
    max-width: 14ch;
    margin: 0 auto;
    font-size: clamp(2.05rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0.035em;
    text-indent: 0;
  }

  .hero-copy {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(0.82rem, 1.25vw, 0.95rem);
    letter-spacing: 0.025em;
  }

  section,
  details {
    border-color: rgba(255, 255, 255, 0.14);
    border-top: 3px solid var(--cyan);
    background:
      linear-gradient(145deg, rgba(23, 26, 39, 0.92), rgba(11, 13, 22, 0.96));
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32);
  }

  details { border-top-color: rgba(255, 255, 255, 0.3); }

  h2 {
    color: #fff;
    font-weight: 400;
    text-shadow: none;
  }

  button {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  }

  #uploadBtn,
  #renderBtn {
    --button-accent: var(--cyan);
    --button-bg: var(--cyan);
    color: #000;
    text-shadow: none;
  }

  #addPlayerBtn { --button-accent: var(--yellow); }

  input,
  select,
  textarea { border-color: rgba(255, 255, 255, 0.18); }

  .site-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem max(1.1rem, calc((100vw - 1380px) / 2));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--muted);
    background: #07080e;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .site-footer a { color: #c8cdd7; text-decoration: none; }
  .site-footer a:hover { color: var(--cyan); }

  @media (max-width: 760px) {
    .site-header { min-height: 64px; }
    .tool-context { display: none; }
    .terminal-hero { min-height: 310px; padding-top: 3.8rem; }
    h1 { font-size: clamp(1.8rem, 10vw, 3rem); }
    .site-footer { flex-direction: column; }
  }