:root {
  color-scheme:dark;
  --bg:#10191e;
  --panel:#1b282e;
  --line:#35444a;
  --text:#ece9dd;
  --muted:#a8b4b7;
  --accent:#d6b077;
  font:14px/1.45 system-ui,sans-serif}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--text)}
[hidden] {
  display:none!important}
button,input,select {
  font:inherit}
button,input,select {
  border:1px solid var(--line);
  border-radius:5px;
  background:#223239;
  color:var(--text);
  padding:9px 12px}
button {
  cursor:pointer;
  transition:background .15s,border-color .15s}
button:hover {
  background:#35474e;
  border-color:#74848a}
button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px}
button[aria-pressed=true] {
  border-color:var(--accent);
  background:#3d3e34}
button:disabled {
  opacity:.5;
  cursor:wait}
button.primary {
  background:var(--accent);
  color:#1c2529;
  border-color:var(--accent);
  font-weight:700}
.wide {
  width:100%}
header {
  display:flex;
  align-items:center;
  gap:26px;
  padding:17px 30px;
  border-bottom:1px solid var(--line);
  min-height:80px}
.brand {
  font-size:30px;
  letter-spacing:.09em;
  font-weight:850;
  color:var(--text);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:15px}
.brand span {
  font-size:12px;
  letter-spacing:.07em;
  font-weight:500;
  max-width:120px}
.build-label,.eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  color:var(--accent);
  font-weight:700}
#notice {
  margin:0 0 0 auto;
  font-size:12px;
  color:var(--muted);
  max-width:480px}
.error {
  color:#ffad99!important}
main {
  max-width:1700px;
  margin:auto;
  padding:22px 30px 40px}
.workspace {
  display:grid;
  grid-template-columns:318px 1fr;
  gap:20px}
.panel {
  padding:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel)}
h1 {
  font-size:24px;
  letter-spacing:-.04em;
  margin:5px 0 17px}
h2 {
  font-size:23px;
  letter-spacing:-.03em;
  margin:5px 0}
h3 {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  margin:0 0 12px}
label {
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  margin:10px 0}
label select,label input {
  color:var(--text);
  font-size:12px;
  min-width:0;
  width:100%}
.faction-picker {
  display:flex;
  gap:7px}
.faction-picker button {
  flex:1}
.paint {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  margin:12px 0 18px}
.paint i {
  width:14px;
  height:14px;
  border-radius:3px}
.paint i+ i {
  margin-left:15px}
#mounts {
  display:flex;
  flex-direction:column;
  gap:8px}
.slot-row {
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 10px;
  background:#172329}
.slot-title {
  display:flex;
  flex-direction:column;
  margin-bottom:6px}
.slot-title strong {
  font-size:13px}
.slot-title span {
  font-size:11px;
  color:var(--muted)}
.slot-row label {
  margin:0}
.arm-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px}
.mount-select span {
  font-size:10px;
  color:var(--muted)}
.slot-summary {
  margin:6px 0 0;
  font-size:10.5px;
  color:#c9d1cc;
  line-height:1.4}
.slot-summary+.slot-summary {
  margin-top:3px}
.same-arms {
  flex-direction:row;
  align-items:center;
  gap:6px;
  margin-top:7px!important;
  font-size:11px}
.same-arms input {
  width:auto;
  margin:0;
  accent-color:var(--accent)}
.build-stats {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 12px;
  margin:12px 0 4px;
  padding-top:11px;
  border-top:1px solid var(--line);
  font-size:11.5px}
.build-stats dt {
  color:var(--muted)}
.build-stats dd {
  margin:0;
  color:var(--accent);
  font-weight:650}
.join-row {
  display:flex;
  gap:7px;
  margin-top:8px}
.join-row input {
  min-width:0;
  flex:1;
  font-size:11px}
.join-row button {
  flex-shrink:0}
.join-row>button:only-child {
  width:100%}
.stage {
  position:relative;
  min-width:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  min-height:660px;
  background:#182329}
#viewport {
  position:absolute;
  inset:0}
#viewport canvas {
  display:block;
  touch-action:none}
.stage-toolbar {
  position:absolute;
  inset:14px 14px auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  pointer-events:none;
  font-size:10px;
  color:#bcc5bf}
.stage-toolbar button {
  pointer-events:auto;
  background:#1b282ed9;
  font-size:10px}
.preview-controls {
  position:absolute;
  bottom:17px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px}
.preview-controls button {
  font-size:11px;
  background:#1b282ed9;
  white-space:nowrap}
.gallery-title {
  margin:30px 0 16px}
#gallery {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px}
.piece-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  padding:10px 13px 14px;
  margin-bottom:12px;
  background:#1b282e;
  text-align:left}
.piece-card img {
  width:100%;
  height:125px;
  object-fit:contain}
.piece-card.equipped {
  border-color:var(--accent);
  background:#25291f}
div.piece-card {
  border:1px solid var(--line);
  border-radius:5px}
div.piece-card:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px}
.piece-title {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  width:100%}
.piece-title strong {
  font-size:13px}



.piece-facts {
  list-style:none;
  padding:0;
  margin:6px 0 0;
  font-size:10.5px;
  line-height:1.45;
  color:#c9d1cc}
.arm-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  width:100%;
  margin-top:9px}
.arm-buttons button {
  padding:5px 0;
  font-size:11px}
.part-info {
  position:fixed;
  z-index:20;
  width:300px;
  max-height:calc(100vh - 16px);
  overflow:auto;
  padding:13px 14px;
  background:#16242a;
  border:1px solid #6b7a73;
  border-radius:7px;
  box-shadow:0 10px 40px #0007;
  font-size:12px;
  pointer-events:none}
.part-info header {
  display:flex;
  gap:10px;
  align-items:center;
  padding:0;
  border:0;
  min-height:0}
.part-info header img {
  width:78px;
  height:52px;
  object-fit:contain}
.part-info header strong {
  display:block;
  font-size:15px}
.part-info header span,.info-slot {
  font-size:11px;
  color:var(--muted)}
.info-slot {
  margin:6px 0}
.part-info h4 {
  margin:11px 0 5px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent)}
.part-info ul {
  list-style:none;
  margin:0;
  padding:0}
.info-stats li {
  line-height:1.6}
.info-cards li {
  border-left:3px solid var(--frame,#a8b4b7);
  padding:3px 0 3px 8px;
  margin-bottom:6px}
.info-cards strong {
  display:block}
.info-cards span {
  font-size:10.5px;
  color:#bdc9cc}
.info-cards p {
  margin:2px 0 0}
.info-diff {
  display:flex;
  flex-wrap:wrap;
  gap:4px}
.info-diff li {
  padding:2px 7px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:11px}
.info-equipped,.info-none {
  margin:9px 0 0;
  color:var(--muted)}
.hand-area {
  display:none}
.in-match .hand-area {
  display:block}
.in-match .workspace {
  display:block}
.in-match .stage {
  height:calc(100vh - 385px);
  min-height:390px}
.in-match .preview-controls {
  display:none}
.in-match #viewport {
  inset:0 0 -7px}
#battle-ui {
  pointer-events:none}
.combatants {
  position:absolute;
  top:17px;
  left:20px;
  right:20px;
  display:flex;
  justify-content:space-between}
.combatants>div {
  padding:10px 17px;
  border:1px solid #576968;
  background:#162329dd;
  border-radius:6px;
  min-width:135px}
.combatants span,.combatants small {
  display:block;
  font-size:11px;
  color:var(--muted)}
.combatants strong {
  font-size:24px;
  letter-spacing:-.04em}
.combatants .enemy {
  text-align:right;
  border-color:#a36d61}
.resources {
  position:absolute;
  left:20px;
  top:115px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:9px 14px;
  background:#182329e8;
  border:1px solid #77684c;
  border-radius:5px;
  font-size:10px;
  color:var(--accent)}
.resources strong {
  font-size:20px;
  margin-left:5px}
.resources small {
  color:var(--muted)}
.move-timer {
  position:absolute;
  right:20px;
  top:47%;
  background:#182329e8;
  border:1px solid var(--line);
  border-radius:5px;
  padding:9px 15px;
  font-size:12px}
.in-match .stage-toolbar {
  top:auto;
  bottom:12px}
#session-tools {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:12px;
  font-size:10px;
  color:var(--muted)}
#session-tools>span {
  margin-right:auto}
#session-tools button {
  font-size:10px;
  padding:6px 10px}
#session-tools code {
  color:var(--text);
  font-size:12px}
.hand-area>p {
  margin:10px 0;
  color:var(--muted);
  font-size:12px;
  min-height:18px}
.hand-row {
  display:flex;
  gap:12px;
  align-items:center}
#hand {
  display:flex;
  gap:9px;
  flex:1;
  min-width:0;
  align-items:stretch}
.hand-card {
  position:relative;
  flex:1;
  min-width:0;
  max-width:190px;
  min-height:206px;
  padding:10px;
  background:#223239;
  border-top:3px solid var(--frame,#a8b4b7);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left}
.hand-card[aria-pressed=true] {
  outline:2px solid var(--accent);
  outline-offset:3px;
  transform:translateY(-6px)}
.hand-card img {
  width:100%;
  height:65px;
  object-fit:contain;
  pointer-events:none}
.hand-card strong {
  font-size:13px;
  margin-top:5px}
.hand-card p {
  font-size:11px;
  margin:5px 0 8px;
  line-height:1.35}
.hand-card .card-meta {
  font-size:9px;
  margin-top:auto;
  color:#bdc9cc;
  padding-bottom:13px}
.card-cost {
  position:absolute;
  top:7px;
  left:8px;
  background:#111c21;
  color:#f0cd94;
  border:1px solid #8e784d;
  border-radius:50%;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  font-weight:750}
.card-key {
  position:absolute;
  bottom:5px;
  right:9px;
  color:var(--muted);
  font:11px monospace}
.unaffordable .card-cost {
  color:#e6a599;
  border-color:#9a665d}
.slot-head {
  --frame:#a8c5c9}
.slot-arms {
  --frame:#d1907d}
.slot-body {
  --frame:#b5c28e}
.slot-engine {
  --frame:#d5b87b}
.slot-legs {
  --frame:#a49fc1}
.deck-panel {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:10px;
  width:120px;
  flex-shrink:0;
  color:var(--muted)}
.deck-panel strong {
  font-weight:500;
  color:var(--text)}
#confirmation {
  position:absolute;
  left:50%;
  top:55%;
  transform:translate(-50%,-50%);
  padding:11px 20px;
  border:1px solid var(--accent);
  background:#172329eb;
  border-radius:5px;
  opacity:0;
  pointer-events:none;
  font-size:12px}
.in-match main {
  padding-top:12px}
.in-match header {
  min-height:65px;
  padding-top:10px;
  padding-bottom:10px}
@media(min-width:1500px) {
  .hand-card {
    min-height:220px  }
  .hand-card img {
    height:75px  }
  .hand-card p {
    font-size:12px  }
}
@media(max-width:1000px) {
  header {
    padding:14px 18px  }
  .build-label {
    display:none  }
  main {
    padding:15px 16px  }
  .workspace {
    grid-template-columns:280px 1fr;
    gap:12px  }
  .panel {
    padding:16px  }
  .stage {
    min-height:650px  }
  #gallery {
    gap:9px  }
  .piece-card {
    padding:8px  }
  .piece-card img {
    height:95px  }
  .hand-row {
    display:block  }
  #hand {
    overflow-x:auto;
    padding:6px 3px  }
  .hand-card {
    flex:0 0 145px  }
  .deck-panel {
    flex-direction:row;
    width:auto;
    margin-top:8px  }
  .in-match .stage {
    height:calc(100vh - 400px)  }
}
@media(max-width:650px) {
  .brand {
    font-size:24px;
    gap:9px  }
  .brand span {
    font-size:9px;
    max-width:90px  }
  #notice {
    font-size:10px;
    max-width:150px  }
  .workspace {
    display:flex;
    flex-direction:column  }
  .stage {
    order:-1;
    min-height:350px  }
  .panel {
    padding:16px  }
  .part-info {
    left:8px!important;
    right:8px;
    top:auto!important;
    bottom:8px;
    width:auto;
    max-height:55vh;
    pointer-events:auto  }
  #gallery {
    grid-template-columns:repeat(2,minmax(0,1fr))  }
  .piece-card img {
    height:100px  }
  .gallery-title {
    font-size:19px  }
  #session-tools {
    flex-wrap:wrap  }
  #session-tools>span {
    width:100%  }
  .in-match .stage {
    min-height:330px  }
  .combatants {
    left:10px;
    right:10px  }
  .combatants>div {
    min-width:100px;
    padding:6px 10px  }
  .combatants strong {
    font-size:20px  }
  .resources {
    left:10px;
    top:100px  }
  .move-timer {
    right:10px;
    font-size:10px  }
  .stage-toolbar>span {
    display:none  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important  }
}
.audio-controls{display:flex;align-items:center;gap:8px;margin-left:auto}.audio-controls button{font-size:11px;padding:6px 9px}.audio-controls label{font-size:10px;margin:0}.audio-controls input{padding:0;width:75px;accent-color:var(--accent)}
.hp-bar{position:relative;width:145px;height:6px;background:#10191e;margin:6px 0 8px;overflow:hidden;border-radius:3px}.hp-bar i{position:absolute;inset:0 auto 0 0;width:100%;display:block}.hp-fill{background:#97d4bd;transition:width .12s ease-out}.enemy .hp-fill{background:#dd8e7b}.hp-trail{background:#f0d391;transition:width .65s ease-out}
.world-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.damage-label{position:absolute;transform:translate(-50%,-50%);font-size:25px;line-height:1;font-weight:850;white-space:nowrap;text-shadow:0 2px 3px #10191e,1px 0 #10191e,-1px 0 #10191e;letter-spacing:.02em}.damage-label.heavy{font-size:34px}.damage-label.hit{color:#fff0db}.damage-label.blocked{color:#8fe8f7;font-size:16px}.damage-label.evaded{color:#dfc8ff;font-size:20px}.damage-label.armour{color:#e6c694;font-size:13px}.damage-label.miss{color:#d0d7d7;font-size:16px}
.countdown{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:90px;line-height:1;font-weight:850;color:#f7ddb0;text-shadow:0 4px 20px #111;pointer-events:none}.queued-move{position:absolute;right:20px;top:calc(47% + 43px);font-size:12px;color:#f2ca89;padding:4px 10px;background:#172329da;border-radius:4px}.queued-move:empty{display:none}
.enemy-card{position:absolute;top:20px;right:183px;width:170px;padding:12px;background:#18272ef5;border:1px solid #856e5c;border-top:3px solid var(--frame,#d1907d);border-radius:6px;box-shadow:0 5px 24px #0005}.enemy-card small{font-size:9px;letter-spacing:.08em;color:#e8a38f;display:block}.enemy-card img{display:block;width:100%;height:60px;object-fit:contain}.enemy-card strong{font-size:15px}.enemy-card p{font-size:12px;margin:5px 0}.enemy-card span{font-size:10px;color:#bed0d2}
.results{position:absolute;inset:0;display:grid;place-items:center;background:#10191e60;z-index:5}.results>div{background:#15232bf2;border:1px solid #66736c;border-radius:8px;padding:28px 35px;text-align:center;box-shadow:0 15px 60px #0005}.results h2{font-size:38px;margin:5px}.results p{font-size:12px;color:var(--muted);margin:8px 0 20px}.results button{margin:3px}
.threat-alert{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:7px 14px;border:1px solid #ef8267;border-radius:5px;background:#48271ff0;color:#ffcfb5;font-weight:700;font-size:12px;white-space:nowrap}
@media(max-width:1000px){header{flex-wrap:wrap;gap:12px}#notice{max-width:none;margin-left:0}.enemy-card{right:170px;width:150px}.hp-bar{width:120px}.threat-alert{top:auto;bottom:15px;font-size:10px}}
@media(max-width:650px){.audio-controls{gap:5px}.audio-controls label{display:none}.audio-controls input{width:55px}header #notice{width:100%;max-width:none}.hp-bar{width:85px}.enemy-card{top:93px;right:10px;width:130px;padding:8px}.enemy-card img{height:40px}.enemy-card strong{font-size:12px}.enemy-card p{font-size:10px}.enemy-card span{font-size:9px}.countdown{font-size:65px}.queued-move{right:10px;top:auto;bottom:52px}.in-match .move-timer{top:auto;bottom:82px}.results>div{padding:22px 15px;max-width:95%}.damage-label{font-size:20px}.damage-label.heavy{font-size:26px}}

.in-match .stage-toolbar>span{display:none}
/* Card categories (the user, 2026-10-27). */
.card-categories{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}.category{font-size:9px;line-height:1;padding:2px 5px 3px;border:1px solid currentColor;border-radius:3px;letter-spacing:.03em;white-space:nowrap}.category-attack{color:#f09a7f}.category-utility{color:#a9b9f5}.category-defense{color:#8fd7c9}.category-movement{color:#d4e38a}.category-junk{color:#a9a49a}

/* Shared compact combat state cues; no flashing or motion dependence. */
.card-readiness{display:block;font-size:10px;font-weight:700;line-height:1.4;color:#a9dbc2;letter-spacing:.03em}
[data-readiness=casting]{outline:2px solid #ffe29d;outline-offset:-2px}[data-readiness=casting] .card-readiness{color:#ffe29d}
[data-readiness=waiting] .card-readiness,[data-readiness=energy] .card-readiness{color:#dbb49b}
.threat-list{position:absolute;right:8px;top:62px;z-index:5;max-width:min(260px,55%);max-height:120px;overflow:auto;pointer-events:none;font:11px/1.5 system-ui;color:#ffe4d1;background:#172329eb;border-radius:4px}
.threat-list[hidden]{display:none}.threat-list>div{display:flex;gap:12px;justify-content:space-between;padding:3px 7px;border-left:3px solid #ed9274}.threat-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.threat-list b{white-space:nowrap}.threat-list [data-overlap=true]{border-color:#ffe29d;background:#51472e}
@media(max-width:700px){.card-readiness{font-size:9px}.threat-list{font-size:10px;max-height:86px;top:48px}}
.threat-list{left:50%;right:auto;transform:translateX(-50%);top:8px}#move-timer[data-casting=true]{outline:2px solid #ffe29d;color:#ffe29d}
.threat-list{top:140px}