/* CYBERRUN: Chrome Debt — neon terminal look, no external assets. */

:root {
  --cyan: #28f7ff;
  --magenta: #ff2bd6;
  --yellow: #ffd84a;
  --green: #54f0a0;
  --red: #ff4d6d;
  --orange: #ff8b3d;
  --purple: #a96cff;
  --dark: #0a0e1c;
  --panel: #111730;
  --panel2: #182042;
  --ink: #e7ecff;
  --dim: #8a93b8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--dark);
  background-image:
    radial-gradient(ellipse at 20% -10%, #1a1040 0%, transparent 55%),
    radial-gradient(ellipse at 90% 110%, #0a2438 0%, transparent 55%);
  color: var(--ink);
  font-family: "Consolas", "DejaVu Sans Mono", ui-monospace, monospace;
  min-height: 100vh;
}

#app { max-width: 1100px; margin: 0 auto; padding: 12px 16px 40px; }

header { display: flex; align-items: baseline; gap: 14px; padding: 6px 0 14px; border-bottom: 1px solid #26305c; }
header h1 { font-size: 26px; letter-spacing: 3px; color: var(--ink); text-shadow: 0 0 12px rgba(40,247,255,.6); }
header h1 span { color: var(--cyan); }
header .sub { color: var(--dim); font-size: 12px; letter-spacing: 2px; }
.roomtag { margin-left: auto; color: var(--yellow); border: 1px solid var(--yellow); padding: 2px 10px; font-size: 13px; letter-spacing: 2px; }

.hidden { display: none !important; }

main { padding-top: 16px; }

h2 { font-size: 15px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 10px; text-transform: uppercase; }
h3 { font-size: 13px; letter-spacing: 1px; color: var(--dim); margin-bottom: 6px; text-transform: uppercase; }

button {
  font-family: inherit; font-size: 13px; letter-spacing: 1px;
  background: transparent; color: var(--cyan);
  border: 1px solid var(--cyan); padding: 8px 16px; cursor: pointer;
  text-transform: uppercase;
}
button:hover:not(:disabled) { background: rgba(40,247,255,.12); box-shadow: 0 0 10px rgba(40,247,255,.35); }
button:disabled { color: #44507e; border-color: #44507e; cursor: default; }
button.warn { color: var(--magenta); border-color: var(--magenta); }
button.warn:hover:not(:disabled) { background: rgba(255,43,214,.12); box-shadow: 0 0 10px rgba(255,43,214,.35); }

input {
  font-family: inherit; font-size: 14px;
  background: var(--panel); color: var(--ink);
  border: 1px solid #26305c; padding: 8px 10px;
}
input:focus { outline: none; border-color: var(--cyan); }

.panel { background: var(--panel); border: 1px solid #26305c; padding: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.col { flex: 1; min-width: 260px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #2a0f22; color: var(--magenta); border: 1px solid var(--magenta);
  padding: 10px 18px; font-size: 13px; z-index: 50;
}

/* --- home ------------------------------------------------------------- */
.home { max-width: 460px; margin: 30px auto; display: flex; flex-direction: column; gap: 14px; }
.home .joinrow { display: flex; gap: 8px; }
.home .joinrow input { flex: 1; text-transform: uppercase; }
.history table { width: 100%; border-collapse: collapse; font-size: 12px; }
.history td, .history th { padding: 4px 6px; text-align: left; border-bottom: 1px solid #1d2547; color: var(--dim); }
.history .victory { color: var(--green); }
.history .defeat { color: var(--red); }

/* --- lobby ------------------------------------------------------------ */
.chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.charcard { background: var(--panel); border: 1px solid #26305c; padding: 12px; cursor: pointer; position: relative; }
.charcard:hover { border-color: var(--cyan); }
.charcard.mine { border-color: var(--cyan); box-shadow: 0 0 14px rgba(40,247,255,.35); }
.charcard.taken { opacity: .55; cursor: default; }
.charcard .cname { color: var(--yellow); letter-spacing: 1px; font-size: 15px; }
.charcard .cdesc { color: var(--dim); font-size: 12px; margin: 6px 0; min-height: 34px; }
.charcard .deckpeek { font-size: 11px; color: var(--ink); line-height: 1.6; }
.charcard .takenby { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--magenta); }
.playerlist li { list-style: none; padding: 4px 0; font-size: 13px; }
.playerlist .off { color: var(--dim); }
.playerlist .hosttag { color: var(--yellow); font-size: 11px; }
.playerlist button { padding: 1px 8px; font-size: 11px; margin-left: 8px; }

/* --- map ---------------------------------------------------------------- */
.mapgrid { display: flex; gap: 26px; align-items: flex-start; overflow-x: auto; padding: 10px 4px; }
.mapcol { display: flex; flex-direction: column; gap: 14px; min-width: 150px; }
.mapnode { border: 1px solid #26305c; background: var(--panel); padding: 10px; font-size: 12px; position: relative; }
.mapnode .kind { font-size: 10px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase; }
.mapnode .label { color: var(--ink); font-size: 13px; margin: 3px 0; }
.mapnode .foes { color: var(--dim); font-size: 11px; }
.mapnode.visited { opacity: .45; }
.mapnode.current { border-color: var(--yellow); }
.mapnode.available { border-color: var(--green); cursor: pointer; box-shadow: 0 0 10px rgba(84,240,160,.25); }
.mapnode.available:hover { background: rgba(84,240,160,.1); }
.mapnode.boss { border-color: var(--magenta); }
.mapnode.locked { cursor: default; }

/* --- party bar ----------------------------------------------------------- */
.party { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.member { background: var(--panel2); border: 1px solid #26305c; padding: 8px 12px; font-size: 12px; min-width: 170px; }
.member .mname { color: var(--yellow); }
.member .mname .you { color: var(--cyan); }
.member.active-turn { border-color: var(--cyan); box-shadow: 0 0 10px rgba(40,247,255,.3); }
.member.down { border-color: var(--red); opacity: .7; }
.member .off { color: var(--magenta); font-size: 10px; }
.bar { height: 7px; background: #0c1226; margin: 3px 0; position: relative; }
.bar i { display: block; height: 100%; }
.bar.hp i { background: var(--green); }
.bar.fw i { background: var(--cyan); }
.bar.mo i { background: var(--purple); }
.bar span { position: absolute; right: 3px; top: -4px; font-size: 9px; color: var(--ink); text-shadow: 0 0 3px #000; }
.stats { color: var(--dim); font-size: 11px; margin-top: 3px; }

/* --- combat ---------------------------------------------------------------- */
.foes-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.foe { background: var(--panel); border: 1px solid #26305c; padding: 10px; font-size: 12px; position: relative; }
.foe .fname { color: var(--orange); font-size: 13px; letter-spacing: 1px; }
.foe.defeated { opacity: .4; }
.foe.defeated::after {
  content: attr(data-reason); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--red); font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
}
.foe.targetable { border-color: var(--red); cursor: crosshair; box-shadow: 0 0 12px rgba(255,77,109,.4); }
.foe .exposed { color: var(--cyan); font-size: 10px; letter-spacing: 1px; animation: blink 1.2s infinite; }
.foe .note { color: var(--dim); font-size: 10px; margin-top: 4px; }
@keyframes blink { 50% { opacity: .3; } }

.combat-mid { display: flex; gap: 14px; margin-bottom: 12px; align-items: flex-start; }
.logpanel { flex: 1; background: #070b16; border: 1px solid #1d2547; padding: 8px 10px; height: 150px; overflow-y: auto; font-size: 11px; line-height: 1.55; color: var(--dim); }
.logpanel div:last-child { color: var(--ink); }

.handbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.card {
  width: 138px; background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 1px solid #26305c; border-top: 3px solid var(--dim);
  padding: 8px; font-size: 11px; cursor: default; position: relative;
  transition: transform .08s;
}
.card .cost { position: absolute; top: 4px; right: 6px; color: var(--yellow); font-size: 13px; }
.card .name { color: var(--ink); font-size: 12px; margin-bottom: 4px; padding-right: 14px; }
.card .cat { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
.card .text { color: var(--dim); margin-top: 5px; line-height: 1.4; }
.card.playable { cursor: pointer; }
.card.playable:hover { transform: translateY(-4px); border-color: var(--cyan); }
.card.selected { transform: translateY(-6px); border-color: var(--yellow); box-shadow: 0 0 14px rgba(255,216,74,.4); }
.card.dead { opacity: .5; }
.cat-Combat { border-top-color: var(--red) !important; } .cat-Combat .cat { color: var(--red); }
.cat-Hack { border-top-color: var(--cyan) !important; } .cat-Hack .cat { color: var(--cyan); }
.cat-Social { border-top-color: var(--purple) !important; } .cat-Social .cat { color: var(--purple); }
.cat-Mobility { border-top-color: var(--green) !important; } .cat-Mobility .cat { color: var(--green); }
.cat-System { border-top-color: var(--yellow) !important; } .cat-System .cat { color: var(--yellow); }

.turnbar { display: flex; align-items: center; gap: 16px; margin: 10px 0; }
.turnbar .energy { color: var(--yellow); font-size: 14px; }
.turnbar .whose { color: var(--cyan); letter-spacing: 1px; font-size: 13px; }
.hint { color: var(--dim); font-size: 11px; margin-top: 8px; }

/* --- reward / shop ------------------------------------------------------- */
.offer { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.implants { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.implant { background: var(--panel); border: 1px solid #26305c; padding: 10px; font-size: 12px; }
.implant .iname { color: var(--yellow); }
.implant .islot { color: var(--purple); font-size: 10px; letter-spacing: 1px; }
.implant .idesc { color: var(--dim); font-size: 11px; margin: 5px 0; }
.implant .iprice { color: var(--ink); font-size: 11px; margin-bottom: 6px; }
.waiting { color: var(--dim); font-size: 12px; margin-top: 10px; }

/* --- end screens ------------------------------------------------------------ */
.endscreen { text-align: center; padding: 60px 0; }
.endscreen .big { font-size: 42px; letter-spacing: 8px; }
.endscreen.victory .big { color: var(--green); text-shadow: 0 0 24px rgba(84,240,160,.7); }
.endscreen.defeat .big { color: var(--red); text-shadow: 0 0 24px rgba(255,77,109,.7); }
.endscreen p { color: var(--dim); margin: 16px 0 28px; }