/* OVERCLOCK — purple solder mask, gold ENIG pads, silkscreen ink. */
:root {
  --mask: #241536;
  --mask-2: #2f1e46;
  --mask-3: #3d2a59;
  --trace: #4a3470;
  --gold: #e2b65c;
  --gold-2: #b98b35;
  --silk: #f3efe6;
  --silk-dim: #b9b0c9;
  --ink: #1d1626;
  --stock: #efe6cf;
  --stock-2: #e2d6b8;
  --ops: #4cc3ff;
  --mult: #ff4f5e;
  --heat: #ff8a2a;
  --ok: #6fe39a;
  --bsod: #0a3fb5;

  --t-cpu: #4cc3ff;
  --t-gpu: #ff4f5e;
  --t-mem: #b98cff;
  --t-net: #3fd8b0;
  --t-sec: #a4d65e;
  --t-oc: #ff8a2a;
  --t-mal: #7d8a5a;

  --f-silk: 'Silkscreen', 'Courier New', monospace;
  --f-body: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-snap: cubic-bezier(.3, 1.4, .5, 1);
  --card-w: 132px;
  --card-h: 184px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--mask);
  color: var(--silk);
  font: 15px/1.35 var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* The board: faint copper traces under the solder mask + via holes */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, var(--gold-2) 0 3px, var(--mask) 3.5px 6px, transparent 6.5px),
    radial-gradient(circle at 88% 72%, var(--gold-2) 0 3px, var(--mask) 3.5px 6px, transparent 6.5px),
    radial-gradient(circle at 64% 9%, var(--gold-2) 0 2px, var(--mask) 2.5px 4px, transparent 4.5px),
    linear-gradient(90deg, transparent 0 18%, var(--mask-2) 18% calc(18% + 3px), transparent 0) 0 0 / 100% 100%,
    linear-gradient(0deg, transparent 0 62%, var(--mask-2) 62% calc(62% + 3px), transparent 0) 0 0 / 100% 100%,
    repeating-linear-gradient(135deg, transparent 0 46px, rgba(255,255,255,.012) 46px 48px),
    var(--mask);
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px dashed var(--gold); outline-offset: 3px; }

.silk { font-family: var(--f-silk); letter-spacing: .04em; text-transform: uppercase; }
.mono { font-family: var(--f-mono); }
.dim { color: var(--silk-dim); }
.ops-c { color: var(--ops); } .mult-c { color: var(--mult); } .heat-c { color: var(--heat); } .gold-c { color: var(--gold); } .ok-c { color: var(--ok); }

/* ---------------------------------------------------------------- buttons: gold pads */
.btn {
  --b: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: linear-gradient(180deg, #f0cd7d, var(--gold) 45%, var(--gold-2));
  color: var(--ink); border: 0; border-radius: 3px;
  padding: .6em 1.2em; font-family: var(--f-silk); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 2px 0 #6e5020, inset 0 1px 0 rgba(255,255,255,.5);
  cursor: pointer; transition: transform .12s var(--ease-out), filter .12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #6e5020; }
.btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--silk); box-shadow: inset 0 0 0 1px var(--silk-dim); }
.btn.ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.btn.big { font-size: 16px; padding: .8em 1.8em; }
.btn.red { background: linear-gradient(180deg, #ff8a93, var(--mult) 50%, #b22a37); color: #fff; box-shadow: 0 2px 0 #6a1720; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex; align-items: center; gap: 10px 18px; padding: 10px 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--trace); background: rgba(20, 10, 32, .55);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(4px);
}
.logo { font-family: var(--f-silk); font-size: 18px; color: var(--gold); letter-spacing: .08em; }
.logo small { color: var(--silk-dim); font-size: 10px; margin-left: 6px; }
.daytrack { display: flex; align-items: center; gap: 6px; font-family: var(--f-silk); font-size: 11px; }
.daytrack .day { color: var(--silk); margin-right: 6px; font-size: 13px; white-space: nowrap; }
.node-pip { padding: 3px 7px; border: 1px solid var(--trace); color: var(--silk-dim); border-radius: 2px; }
.node-pip.done { color: var(--ok); border-color: rgba(111,227,154,.4); }
.node-pip.now { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.node-pip.virus.now { background: var(--mult); color: #fff; border-color: var(--mult); }
.top-stat { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-weight: 600; }
.top-stat .label { font-family: var(--f-silk); font-size: 10px; color: var(--silk-dim); }
.integrity-bar { width: 90px; height: 10px; background: #160c22; border: 1px solid var(--trace); position: relative; }
.integrity-bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff4f5e, #ffb35e 50%, var(--ok)); background-size: 120px 100%; transition: width .5s var(--ease-out); }
.credits { color: var(--gold); font-size: 18px; }
.levels { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.lvl { font-family: var(--f-silk); font-size: 10px; padding: 3px 6px; border-radius: 2px; background: var(--mask-2); border-left: 3px solid var(--tc, var(--silk)); white-space: nowrap; }
.lvl b { font-family: var(--f-mono); font-size: 12px; margin-left: 3px; }
.top-actions { display: flex; gap: 8px; }
.icon-btn { white-space: nowrap; background: transparent; border: 1px solid var(--trace); color: var(--silk-dim); border-radius: 3px; padding: 5px 9px; cursor: pointer; font-family: var(--f-silk); font-size: 10px; }
.icon-btn:hover { color: var(--gold); border-color: var(--gold); }

.tag-CPU { --tc: var(--t-cpu); } .tag-GPU { --tc: var(--t-gpu); } .tag-MEM { --tc: var(--t-mem); }
.tag-NET { --tc: var(--t-net); } .tag-SEC { --tc: var(--t-sec); } .tag-OC { --tc: var(--t-oc); } .tag-MAL { --tc: var(--t-mal); }

/* ---------------------------------------------------------------- generic screen */
.screen { padding: 22px 26px 40px; max-width: 1280px; margin: 0 auto; }
.h1 { font-family: var(--f-silk); font-size: 28px; color: var(--silk); margin: 0 0 4px; letter-spacing: .04em; }
.h2 { font-family: var(--f-silk); font-size: 15px; color: var(--gold); margin: 0 0 10px; letter-spacing: .06em; }
.sub { color: var(--silk-dim); margin: 0 0 22px; }
.silk-label { font-family: var(--f-silk); font-size: 10px; color: var(--silk-dim); letter-spacing: .1em; text-transform: uppercase; }
.silk-label .ref { color: var(--silk); margin-right: 6px; }

/* ---------------------------------------------------------------- title */
.title-screen { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 30px; }
.title-chip {
  position: relative; display: inline-block; padding: 46px 64px 40px; background: #1a1020;
  border: 2px solid #0e0814; box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px #3a2a4e;
}
.title-chip::before, .title-chip::after { /* package pins */
  content: ''; position: absolute; top: 18px; bottom: 18px; width: 12px;
  background: repeating-linear-gradient(180deg, var(--gold) 0 7px, transparent 7px 16px);
}
.title-chip::before { left: -14px; } .title-chip::after { right: -14px; }
.title-chip .pin1 { position: absolute; left: 14px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #2c2036; }
.title-word { font-family: var(--f-silk); font-size: clamp(42px, 8vw, 96px); line-height: .9; color: var(--silk); letter-spacing: .02em; margin: 0; }
.title-word .o { color: var(--gold); }
.title-sub { font-family: var(--f-mono); color: var(--silk-dim); margin: 14px 0 0; font-size: 13px; }
.title-sub b { color: var(--ops); font-weight: 600; } .title-sub i { color: var(--mult); font-style: normal; font-weight: 600; }
.title-actions { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.title-meta { margin-top: 22px; font-family: var(--f-mono); font-size: 12px; color: var(--silk-dim); }
.boot-log { font-family: var(--f-mono); font-size: 12px; color: var(--silk-dim); text-align: left; margin: 28px auto 0; width: min(440px, 90vw); opacity: .8; }
.boot-log div { opacity: 0; animation: bootline .25s var(--ease-out) forwards; }
@keyframes bootline { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.howto { max-width: 760px; margin: 26px auto 0; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.howto div { background: rgba(0,0,0,.2); border: 1px solid var(--trace); padding: 12px 14px; font-size: 13px; color: var(--silk-dim); }
.howto b { display: block; font-family: var(--f-silk); font-size: 11px; color: var(--gold); margin-bottom: 4px; font-weight: 400; }

/* ---------------------------------------------------------------- rig select */
.rigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.rig {
  text-align: left; background: var(--mask-2); border: 1px solid var(--trace); padding: 16px; cursor: pointer;
  border-radius: 4px; transition: transform .15s var(--ease-out), border-color .15s; position: relative;
}
.rig:hover { transform: translateY(-3px); border-color: var(--gold); }
.rig h3 { margin: 0 0 4px; font-family: var(--f-silk); font-size: 14px; font-weight: 400; color: var(--silk); }
.rig p { margin: 0 0 12px; color: var(--silk-dim); font-size: 13px; min-height: 36px; }
.rig dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.rig dt { font-family: var(--f-silk); font-size: 9px; color: var(--silk-dim); padding-top: 2px; }
.rig dd { margin: 0; font-family: var(--f-mono); }
.rig .rig-levels { margin-top: 10px; display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- encounter layout */
.enc {
  display: grid; grid-template-columns: 268px 1fr 214px; grid-template-rows: 1fr auto; gap: 14px;
  padding: 14px 18px 12px;
}
.panel { background: linear-gradient(180deg, rgba(36, 21, 54, .92), rgba(26, 14, 40, .92)); border: 1px solid var(--trace); border-radius: 4px; padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03); }
.left { grid-row: 1; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.center { grid-row: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.right { grid-row: 1; display: flex; flex-direction: column; gap: 12px; }
.bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }

/* expansion mods: small gadget boards in the X header */
.mod-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chip.mod {
  --rc: var(--silk-dim);
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 7px; align-content: center;
  padding: 5px 6px 5px 5px; min-height: 50px; border-radius: 3px; cursor: help;
  background: linear-gradient(180deg, #1f152b, #140d1d); border: 1px solid #0b0710;
  box-shadow: inset 0 0 0 1px #33264a, inset 3px 0 0 var(--rc);
  transition: box-shadow .2s, transform .2s;
}
.chip.mod .mart { grid-row: 1 / span 3; align-self: center; width: 34px; height: 34px; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); }
.chip.mod .ref { font-family: var(--f-silk); font-size: 7px; color: var(--silk-dim); letter-spacing: .08em; display: block; }
.chip.mod .nm { font-family: var(--f-body); font-weight: 600; font-size: 12px; line-height: 1.1; display: block; color: var(--silk); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chip.mod .st { font-family: var(--f-mono); font-size: 10px; color: var(--gold); display: block; }
.chip.mod.rarity-legendary { box-shadow: inset 0 0 0 1px #6a2a48, inset 3px 0 0 var(--rc), 0 0 12px rgba(255,79,94,.25); }
.chip.mod.rarity-rare { box-shadow: inset 0 0 0 1px #5a4520, inset 3px 0 0 var(--rc); }
.chip.mod.empty { background: transparent; border: 1px dashed var(--trace); box-shadow: none; cursor: default; }
.chip.mod.empty .mart { border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(226,182,92,.35) 0 2px, transparent 2px 5px) center / 26px 5px no-repeat, #120a18; box-shadow: inset 0 0 0 1px #2b1f3b; filter: none; }
.chip.mod.empty .nm { color: var(--silk-dim); font-weight: 400; }
.chip.mod.disabled { filter: grayscale(1) brightness(.55); }
.chip.mod .off { position: absolute; right: 4px; top: 3px; color: var(--mult); font-size: 12px; }
.chip.flash { animation: chipflash .45s var(--ease-out); }
@keyframes chipflash { 0% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 0 rgba(226,182,92,.8); transform: scale(1.06); } 100% { box-shadow: inset 0 0 0 1px #33264a, 0 0 0 10px rgba(226,182,92,0); transform: none; } }
.chip.clickable { cursor: pointer; }
.chip.clickable:hover, .chip.clickable:focus-visible { box-shadow: inset 0 0 0 1px var(--gold), inset 3px 0 0 var(--rc); }

/* objective */
.objective { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; position: relative; }
.obj-title { font-family: var(--f-silk); font-size: 16px; margin: 0; color: var(--silk); }
.obj-client { color: var(--silk-dim); font-size: 13px; }
.obj-rule { margin-top: 6px; font-size: 13px; color: var(--gold); }
.progress { margin-top: 12px; height: 18px; background: #12091c; border: 1px solid var(--trace); position: relative; overflow: hidden; }
.progress > i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--ops) 0 10px, #3aa3dc 10px 12px); transition: width .7s var(--ease-out); box-shadow: 0 0 12px rgba(76,195,255,.5); }
.progress.dl > i { background: repeating-linear-gradient(90deg, var(--t-net) 0 10px, #2fb592 10px 12px); box-shadow: 0 0 12px rgba(63,216,176,.45); }
.progress .ghost { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.14); transition: width .2s; }
.progress-label { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 13px; margin-top: 5px; }
.cycles { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.cycles .silk-label { margin-right: 4px; }
.led { width: 12px; height: 12px; border-radius: 50%; background: #3a2c22; box-shadow: inset 0 0 0 1px #000; }
.led.on { background: var(--ok); box-shadow: 0 0 8px var(--ok), inset 0 -2px 0 rgba(0,0,0,.25); }
.led.last { background: var(--heat); box-shadow: 0 0 8px var(--heat); }

/* virus */
.virus-box { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; }
.virus-art {
  width: 92px; height: 92px; display: grid; place-items: center; font-size: 46px; color: var(--mult);
  background: #0c0612; border: 1px solid #5a1a28; position: relative; overflow: hidden;
  text-shadow: 0 0 12px rgba(255,79,94,.7);
}
.virus-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); }
.virus-art.hit { animation: vhit .4s; }
@keyframes vhit { 0%,100% { transform: none; } 20% { transform: translate(-6px, 2px) skewX(8deg); filter: hue-rotate(90deg); } 50% { transform: translate(5px, -2px); } }
.virus-name { font-family: var(--f-silk); font-size: 17px; color: var(--mult); margin: 0; }
.virus-kind { font-family: var(--f-mono); font-size: 11px; color: var(--silk-dim); }
.hpbar { height: 14px; background: #12091c; border: 1px solid #5a1a28; margin-top: 8px; position: relative; overflow: hidden; }
.hpbar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b22a37, var(--mult)); transition: width .6s var(--ease-out); }
.hpbar > .sh { position: absolute; inset: 0 0 0 auto; background: repeating-linear-gradient(45deg, rgba(160,200,255,.5) 0 4px, transparent 4px 8px); }
.hpbar .ghost { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.25); }
.hp-label { font-family: var(--f-mono); font-size: 12px; margin-top: 3px; display: flex; justify-content: space-between; }
.intent {
  min-width: 150px; background: #2a0f1a; border: 1px solid var(--mult); padding: 8px 10px; border-radius: 3px; text-align: center;
  position: relative;
}
.intent::before { content: 'NEXT ACTION'; position: absolute; top: -8px; left: 8px; font-family: var(--f-silk); font-size: 8px; background: var(--mask); padding: 0 4px; color: var(--mult); }
.intent .ic { font-size: 20px; display: block; }
.intent .tx { font-family: var(--f-mono); font-weight: 700; font-size: 14px; }
.intent .also { font-family: var(--f-mono); font-size: 11px; color: var(--silk-dim); }
.intent.stunned { opacity: .5; text-decoration: line-through; }
.virus-rule { grid-column: 1 / -1; font-size: 13px; color: var(--silk-dim); border-top: 1px dashed var(--trace); padding-top: 8px; }
.virus-rule b { color: var(--mult); font-weight: 600; }
.objective.shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* readout: LED panel */
.readout {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1.3fr; align-items: center; gap: 10px;
  background: #0d0714; border: 1px solid #000; border-radius: 4px; padding: 10px 14px;
  box-shadow: inset 0 0 0 1px #2b1f3b, inset 0 8px 24px rgba(0,0,0,.6);
}
.lcd { text-align: center; position: relative; }
.lcd .silk-label { display: block; margin-bottom: 2px; }
.lcd .num { font-family: var(--f-mono); font-weight: 700; font-size: 34px; line-height: 1; display: inline-block; transition: transform .1s; }
.lcd.ops .num { color: var(--ops); text-shadow: 0 0 14px rgba(76,195,255,.55); }
.lcd.mult .num { color: var(--mult); text-shadow: 0 0 14px rgba(255,79,94,.55); }
.lcd.thru .num { color: var(--silk); text-shadow: 0 0 14px rgba(255,255,255,.3); font-size: 38px; }
.lcd.bw .num { color: var(--t-net); font-size: 20px; }
.lcd.bw { margin-top: 2px; }
.lcd .num.bump { animation: bump .22s var(--ease-snap); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.readout .op { font-family: var(--f-mono); font-size: 26px; color: var(--silk-dim); }
.readout.preview .num { opacity: .55; }
.readout.preview .lcd.thru .num { opacity: .7; }
.readout .proj { font-family: var(--f-silk); font-size: 8px; color: var(--gold); display: block; height: 10px; }
.lcd.thru .bottleneck { font-family: var(--f-silk); font-size: 9px; color: var(--heat); display: block; height: 11px; margin-top: 2px; }
.readout.throttled { box-shadow: inset 0 0 0 1px var(--heat), inset 0 0 40px rgba(255,138,42,.35); }
.thru-flash { animation: thruflash .6s var(--ease-out); }
@keyframes thruflash { 0% { transform: scale(1.5); filter: brightness(2); } 100% { transform: none; filter: none; } }

/* pipeline: PCIe slots */
.pipeline-wrap { position: relative; }
.pipeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.slot {
  height: calc(var(--card-h) * .86); position: relative; border-radius: 3px;
  background: linear-gradient(180deg, transparent 0 calc(100% - 22px), #120a1a calc(100% - 22px));
  border: 1px dashed var(--trace);
}
.slot::after { /* the slot connector */
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 6px; height: 10px; border-radius: 2px;
  background: #0b0610; box-shadow: inset 0 0 0 1px #3a2c4a;
  background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(226,182,92,.35) 3px 4px);
}
.slot .slot-n { position: absolute; top: 4px; left: 6px; font-family: var(--f-silk); font-size: 8px; color: var(--silk-dim); }
.slot.filled { border-style: solid; border-color: transparent; background: none; }
.slot.filled::after { display: none; }
.slot.active .card { box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(226,182,92,.6); transform: translateY(-8px) scale(1.04); }
.slot .card { width: 100%; height: 100%; --card-scale: .72; }
.pop {
  position: absolute; left: 50%; top: 10%; transform: translate(-50%, 0); pointer-events: none; z-index: 30;
  font-family: var(--f-mono); font-weight: 700; font-size: 20px; white-space: nowrap;
  padding: 2px 8px; border-radius: 3px; animation: popup .8s var(--ease-out) forwards;
}
.pop.ops { background: var(--ops); color: #04202f; }
.pop.mult { background: var(--mult); color: #fff; }
.pop.xmult { background: #fff; color: var(--mult); box-shadow: 0 0 0 2px var(--mult); }
.pop.bw { background: var(--t-net); color: #052a20; }
.pop.block { background: var(--t-sec); color: #1d2a08; }
.pop.heat { background: var(--heat); color: #2a1200; }
.pop.note { background: var(--silk); color: var(--ink); font-size: 13px; }
.pop.hurt { background: #fff; color: var(--mult); }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -18px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -30px); } }

/* right column */
.soft-slots { display: grid; gap: 8px; }
.soft {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 3px; text-align: left;
  background: #0f2135; border: 1px solid #2b5578; cursor: pointer; font-size: 12px; width: 100%;
}
.soft::before { content: '💾'; font-size: 16px; }
.soft:hover { border-color: var(--ops); }
.soft.empty { background: transparent; border-style: dashed; border-color: var(--trace); color: var(--silk-dim); cursor: default; }
.soft.empty::before { content: ''; }
.soft b { font-weight: 600; display: block; }
.soft small { color: var(--silk-dim); display: block; line-height: 1.2; }

.panel-h { display: flex; align-items: center; margin-bottom: 8px; }
.panel-h .hint-r { margin-left: auto; font-size: 8px; opacity: .65; letter-spacing: .06em; }
.gauge-wrap { position: relative; width: 100%; max-width: 188px; margin: -2px auto 0; }
.gauge { width: 100%; display: block; overflow: visible; }
.gauge .g-lim { font-family: var(--f-silk); font-size: 7px; fill: #ff8a93; letter-spacing: .04em; }
.gauge .g-sc { font-family: var(--f-mono); font-size: 8px; fill: var(--silk-dim); }
.g-read { position: absolute; left: 0; right: 0; top: 60%; text-align: center; transform: translateY(-50%); }
.g-read .t { font-family: var(--f-mono); font-weight: 700; font-size: 26px; line-height: 1; display: inline-block; text-shadow: 0 0 12px rgba(0,0,0,.8); }
.g-read .g-sub { display: block; font-family: var(--f-silk); font-size: 7px; color: var(--silk-dim); letter-spacing: .1em; margin-top: 2px; }
.heat-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; gap: 2px; text-align: center; margin-top: 2px; }
.heat-steps span { display: block; font-family: var(--f-silk); font-size: 7px; color: var(--silk-dim); letter-spacing: .04em; white-space: nowrap; }
.heat-steps b { font-family: var(--f-mono); font-weight: 700; font-size: 16px; }
.heat-steps i { font-style: normal; font-size: 9px; color: var(--silk-dim); padding-bottom: 3px; }
.heat-steps .rise b { color: var(--heat); }
.heat-steps .bad b { color: var(--mult); text-shadow: 0 0 10px rgba(255,79,94,.6); }
.heat-steps .cool b { color: #8fdcff; }
.heat-rule { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--trace); font-family: var(--f-mono); font-size: 11px; text-align: center; color: var(--silk); }
.heat-rule span { display: block; color: var(--silk-dim); font-size: 10px; }
.heat-rule.bad { color: #fff; background: rgba(255,79,94,.22); border: 1px solid var(--mult); border-radius: 3px; padding: 4px; font-weight: 700; }
.thermal-panel.hot { border-color: rgba(255,79,94,.65); box-shadow: inset 0 0 26px rgba(255,79,94,.14); }
.thermal-panel.over { animation: throb 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .5; } }
.block-pill { font-family: var(--f-mono); font-weight: 700; color: var(--t-sec); }

.piles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.pile { background: var(--mask-2); border: 1px solid var(--trace); border-radius: 3px; padding: 6px 4px; cursor: pointer; }
.pile:hover { border-color: var(--gold); }
.pile b { display: block; font-family: var(--f-mono); font-size: 18px; }
.pile span { font-family: var(--f-silk); font-size: 8px; color: var(--silk-dim); }

/* hand */
.hand-wrap { min-height: calc(var(--card-h) + 20px); }
.hand { display: flex; gap: 8px; align-items: flex-end; flex-wrap: nowrap; padding-top: 18px; overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }
.controls { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 220px; }
.cores { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.core-pips { display: flex; gap: 5px; }
.core { width: 22px; height: 22px; border: 2px solid var(--gold-2); background: transparent; transform: rotate(45deg) scale(.8); }
.core.on { background: var(--gold); box-shadow: 0 0 10px rgba(226,182,92,.7); }
.core.over { background: var(--ok); border-color: var(--ok); }
.core-n { font-family: var(--f-mono); font-size: 20px; font-weight: 700; color: var(--gold); }
.ctrl-row { display: flex; gap: 8px; }
.ctrl-row .btn { flex: 1; }
.hint { font-family: var(--f-mono); font-size: 11px; color: var(--silk-dim); text-align: right; }

/* ---------------------------------------------------------------- cards: cardstock + gold edge connector */
.card {
  --tc: var(--silk); --card-scale: 1;
  width: var(--card-w); height: var(--card-h); flex: 0 0 auto;
  position: relative; border-radius: 6px 6px 2px 2px; color: var(--ink);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, var(--stock), var(--stock-2));
  box-shadow: 0 2px 0 #8e7f5e, 0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.45);
  padding: 6px 5px 20px; cursor: pointer; text-align: left; border: 0;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .18s var(--ease-out), box-shadow .18s;
  font-size: 12px; overflow: visible;
}
.card::before { /* tag-coloured rim */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 6px 6px 0 0; background: var(--tc);
}
.card::after { /* edge connector fingers */
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 13px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 6.5px);
  -webkit-mask: linear-gradient(90deg, #000 0 32%, transparent 32% 36%, #000 36%);
          mask: linear-gradient(90deg, #000 0 32%, transparent 32% 36%, #000 36%);
  border-radius: 0 0 1px 1px;
}
.card .art {
  position: relative; flex: 0 0 auto; height: 56px; border-radius: 3px;
  background-color: #0b0710; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px color-mix(in srgb, var(--tc) 55%, #000);
}
.card .cost {
  position: absolute; left: -5px; top: -5px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f6d99a, var(--gold) 50%, var(--gold-2));
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; color: var(--ink);
  box-shadow: 0 0 0 2px #4c3a12, 0 2px 3px rgba(0,0,0,.5);
}
.card .art .t { position: absolute; right: 3px; top: 3px; font-family: var(--f-silk); font-size: 7px; letter-spacing: .06em; color: var(--ink); background: var(--tc); padding: 1px 4px; border-radius: 1px; }
.card .heat {
  position: absolute; right: 3px; bottom: 3px; display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--f-mono); font-weight: 700; font-size: 11px; line-height: 1; color: #ffb06a;
  background: rgba(13,7,20,.88); padding: 2px 4px 2px 3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,138,42,.45);
}
.card .heat .flame { width: 7px; height: 9px; fill: var(--heat); }
.card .heat.cool { color: #8fdcff; box-shadow: 0 0 0 1px rgba(76,195,255,.5); }
.card .heat.cool .flame { fill: var(--ops); }
.card .name { font-family: var(--f-body); font-weight: 700; font-size: 14px; line-height: 1.05; padding: 1px 2px 0; }
.card .desc { padding: 0 2px; font-size: 12.5px; line-height: 1.22; flex: 1; min-height: 0; overflow: hidden; }
.card .desc .kw { font-weight: 700; }
.card .desc em { font-style: normal; font-weight: 700; }
.card .desc .o { color: #1673a8; font-weight: 700; } .card .desc .m { color: #c42536; font-weight: 700; }
.card .desc .b { color: #13806a; font-weight: 700; } .card .desc .f { color: #4f7a12; font-weight: 700; }
.card.up .name::after { content: '+'; color: #1673a8; }
.card.up { box-shadow: 0 2px 0 #8e7f5e, 0 0 0 2px rgba(76,195,255,.75), 0 0 14px rgba(76,195,255,.35), 0 10px 20px rgba(0,0,0,.35); }
.hand .card:hover { transform: translateY(-14px); box-shadow: 0 2px 0 #8e7f5e, 0 18px 28px rgba(0,0,0,.45); }
.card.cant { filter: saturate(.4) brightness(.78); }
.card.cant:hover { transform: translateY(-4px); }
.card.locked { filter: none; }
.card.locked::before { content: '🔒 ENCRYPTED'; position: absolute; inset: 0; height: auto; display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(20,10,30,.86) 0 8px, rgba(40,20,50,.86) 8px 16px); color: var(--mult); font-family: var(--f-silk); font-size: 11px; border-radius: 5px; z-index: 3; }
.card.mal { background: linear-gradient(180deg, #c9cdb2, #aeb38f); }
.card.mal .name { color: #2d3317; }
.card.mal .art { animation: malglitch 2.6s steps(1) infinite; }
@keyframes malglitch {
  0%, 100% { background-position: center; filter: none; }
  71% { background-position: 8px 50%; filter: hue-rotate(70deg) saturate(2); }
  73% { background-position: -6px 40%; filter: none; }
  75% { background-position: center; }
  90% { filter: invert(.85); }
  91% { filter: none; }
}
.card.selected, .hand .card.selected:hover { transform: translateY(-20px); outline: 3px solid var(--mult); outline-offset: 2px; }
.card .kbd { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; color: var(--silk-dim); }
.card.enter { animation: cardin .32s var(--ease-out) both; }
@keyframes cardin { from { opacity: 0; transform: translateY(40px) rotate(4deg); } to { opacity: 1; transform: none; } }
.card.mini { --card-w: 112px; --card-h: 156px; font-size: 11px; }
.card.mini .art { height: 38px; }
.card.mini .desc { font-size: 11px; }
.card.mini .name { font-size: 12px; }
.slot .card { padding: 4px 4px 14px; gap: 2px; cursor: pointer; }
.slot .card .art { height: 30px; }
.slot .card .art .t { display: none; }
.slot .card .desc { font-size: 11px; line-height: 1.18; }
.slot .card .name { font-size: 12px; }
.slot .card .cost { width: 19px; height: 19px; font-size: 11px; left: -4px; top: -4px; }
.slot .card .heat { font-size: 10px; padding: 1px 3px; }
.slot .card::after { height: 9px; }

/* ---------------------------------------------------------------- choose / offers */
.day-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 4px; }
.day-head .h1 { font-size: 34px; }
.boot-seq { display: flex; gap: 0; margin: 18px 0 26px; align-items: center; }
.boot-node { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--trace); background: rgba(0,0,0,.18); min-width: 200px; }
.boot-node .n { font-family: var(--f-silk); font-size: 11px; color: var(--silk-dim); }
.boot-node .t { font-family: var(--f-silk); font-size: 13px; }
.boot-node.now { border-color: var(--gold); background: rgba(226,182,92,.08); }
.boot-node.now .t { color: var(--gold); }
.boot-node.done { opacity: .55; } .boot-node.done .t::after { content: ' ✓'; color: var(--ok); }
.boot-node.boss .t { color: var(--mult); }
.boot-trace { flex: 1; min-width: 20px; height: 3px; background: var(--trace); }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ticket {
  background: var(--stock); color: var(--ink); padding: 0; border-radius: 3px; text-align: left; cursor: pointer;
  border: 0; position: relative; box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .16s var(--ease-out);
  display: flex; flex-direction: column;
}
.ticket:hover:not(:disabled) { transform: translateY(-4px) rotate(-.4deg); }
.ticket:disabled { opacity: .6; cursor: not-allowed; }
.ticket .band { height: 8px; background: var(--tc, var(--gold)); }
.ticket .body { padding: 14px 16px 12px; flex: 1; }
.ticket .kind { font-family: var(--f-silk); font-size: 9px; letter-spacing: .1em; color: #6a5d48; }
.ticket h3 { margin: 2px 0 2px; font-size: 20px; font-weight: 700; }
.ticket .client { font-size: 13px; color: #5d5140; }
.ticket .rule { margin-top: 10px; font-size: 13px; padding: 6px 8px; background: rgba(0,0,0,.06); border-left: 3px solid var(--tc, var(--gold)); }
.ticket .terms { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px dashed #b4a582; }
.ticket .terms div { padding: 8px 10px; border-right: 1px dashed #b4a582; }
.ticket .terms div:last-child { border-right: 0; }
.ticket .terms span { display: block; font-family: var(--f-silk); font-size: 8px; color: #6a5d48; }
.ticket .terms b { font-family: var(--f-mono); font-size: 15px; }
.ticket .perk { font-family: var(--f-silk); font-size: 10px; padding: 6px 16px; background: var(--ink); color: var(--gold); }
.ticket .perk.warn { color: var(--mult); }
.ticket.virus { background: #1c0c14; color: var(--silk); border: 1px solid var(--mult); }
.ticket.virus .kind, .ticket.virus .client { color: var(--silk-dim); }
.ticket.virus .rule { background: rgba(255,79,94,.08); border-color: var(--mult); }
.ticket.virus .terms { border-color: #5a1a28; }
.ticket.virus .terms div { border-color: #5a1a28; }
.ticket.virus .terms span { color: var(--silk-dim); }
.ticket.virus h3 { color: var(--mult); font-family: var(--f-silk); font-weight: 400; }
.ticket .vart { font-size: 54px; color: var(--mult); text-shadow: 0 0 14px rgba(255,79,94,.6); float: right; line-height: 1; margin: 0 0 6px 10px; }
.preview-boss { margin-top: 26px; display: flex; gap: 12px; align-items: center; color: var(--silk-dim); font-size: 13px; }
.preview-boss b { color: var(--mult); font-family: var(--f-silk); font-weight: 400; }

/* ---------------------------------------------------------------- reward: receipt */
.reward-grid { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: start; }
.receipt {
  background: #f7f3ea; color: var(--ink); padding: 18px 18px 26px; font-family: var(--f-mono); font-size: 13px;
  position: relative; box-shadow: 0 14px 30px rgba(0,0,0,.4);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 6px 0, transparent 6px, #000 6.5px) bottom / 12px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 6px 0, transparent 6px, #000 6.5px) bottom / 12px 10px repeat-x;
}
.receipt h3 { font-family: var(--f-silk); font-weight: 400; text-align: center; margin: 0 0 4px; font-size: 15px; }
.receipt .meta { text-align: center; color: #6a6258; font-size: 11px; margin-bottom: 12px; }
.receipt .line { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; opacity: 0; animation: bootline .25s forwards; }
.receipt .sep { border-top: 1px dashed #999; margin: 8px 0; }
.receipt .tot { font-weight: 700; font-size: 16px; }
.receipt .bad { color: #b22a37; }
.receipt .lv { color: #1673a8; }
.pick-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.pick-row .card { --card-w: 150px; --card-h: 206px; }
.pick-row .card:hover { transform: translateY(-8px); }
.mod-pick { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.mod-card {
  width: 210px; background: #17101f; border: 1px solid #3a2a4e; border-radius: 3px; padding: 12px; cursor: pointer; text-align: left; position: relative;
  transition: transform .15s var(--ease-out), border-color .15s;
}
.mod-card:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); }
.mod-card:disabled { opacity: .5; cursor: not-allowed; }
.mod-card .ref { font-family: var(--f-silk); font-size: 8px; color: var(--silk-dim); }
.mod-card h4 { margin: 2px 0 6px; font-size: 15px; }
.mod-card p { margin: 0; font-size: 13px; color: var(--silk-dim); }
.mod-card .meta { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--f-mono); font-size: 11px; color: var(--gold); }
.rarity-common { --rc: var(--silk-dim); } .rarity-uncommon { --rc: var(--ops); } .rarity-rare { --rc: var(--gold); } .rarity-legendary { --rc: var(--mult); } .rarity-starter { --rc: var(--silk-dim); }
.mod-card .rar { color: var(--rc); font-family: var(--f-silk); font-size: 9px; }
.section { margin-bottom: 26px; }

/* ---------------------------------------------------------------- shop */
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.shelf { background: rgba(0,0,0,.18); border: 1px solid var(--trace); border-radius: 4px; padding: 14px; }
.shelf.wide { grid-column: 1 / -1; }
.shelf-items { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.item { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.item .price { font-family: var(--f-mono); font-weight: 700; color: var(--gold); font-size: 15px; }
.item.sold { opacity: .25; pointer-events: none; }
.item .price.no { color: var(--mult); }
.item .watt { font-family: var(--f-mono); font-size: 11px; color: var(--silk-dim); }
.item .watt.bad { color: var(--mult); }
.item .compare { font-family: var(--f-mono); font-size: 11px; color: var(--ok); text-align: center; max-width: 210px; }
.services { display: flex; gap: 10px; flex-wrap: wrap; }
.service { background: var(--mask-2); border: 1px solid var(--trace); border-radius: 3px; padding: 10px 12px; text-align: left; cursor: pointer; min-width: 170px; }
.service:hover:not(:disabled) { border-color: var(--gold); }
.service:disabled { opacity: .45; cursor: not-allowed; }
.service b { display: block; font-family: var(--f-silk); font-weight: 400; font-size: 11px; color: var(--silk); }
.service span { font-size: 12px; color: var(--silk-dim); }
.service .price { float: right; font-family: var(--f-mono); color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- modal */
.modal-bg { position: fixed; inset: 0; background: rgba(10, 4, 18, .78); z-index: 60; display: grid; place-items: center; padding: 20px; animation: fadein .18s; }
@keyframes fadein { from { opacity: 0; } }
.modal { background: var(--mask); border: 1px solid var(--gold-2); border-radius: 4px; padding: 18px 20px; max-width: min(1100px, 96vw); max-height: 88vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: modalin .22s var(--ease-out); }
@keyframes modalin { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 12px; }
.deck-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.deck-grid .card:hover { transform: translateY(-4px); }

/* ---------------------------------------------------------------- event: terminal window */
.term { max-width: 760px; margin: 30px auto; background: #0d0714; border: 1px solid #000; border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 0 0 1px #2b1f3b; overflow: hidden; }
.term-bar { background: #2b1f3b; padding: 6px 10px; font-family: var(--f-silk); font-size: 10px; color: var(--silk-dim); display: flex; gap: 6px; align-items: center; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--mult); display: inline-block; }
.term-bar i:nth-child(2) { background: var(--gold); } .term-bar i:nth-child(3) { background: var(--ok); }
.term-body { padding: 22px 24px; font-family: var(--f-mono); font-size: 14px; }
.term-body h2 { font-family: var(--f-silk); font-weight: 400; color: var(--gold); margin: 0 0 12px; font-size: 18px; }
.term-body p { color: var(--silk); margin: 0 0 18px; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { text-align: left; background: transparent; border: 1px solid var(--trace); color: var(--silk); padding: 10px 12px; cursor: pointer; font-family: var(--f-mono); border-radius: 3px; }
.choice:hover:not(:disabled) { border-color: var(--gold); background: rgba(226,182,92,.06); }
.choice:hover:not(:disabled) b::before { content: '> '; color: var(--gold); }
.choice:disabled { opacity: .4; cursor: not-allowed; }
.choice b { display: block; }
.choice span { font-size: 12px; color: var(--silk-dim); }
.result { margin-top: 16px; color: var(--ok); }
.result::before { content: '$ '; color: var(--silk-dim); }

/* ---------------------------------------------------------------- BSOD + victory */
.bsod { position: fixed; inset: 0; background: var(--bsod); color: #fff; font-family: var(--f-mono); padding: 8vh 10vw; z-index: 100; overflow: auto; animation: bsodin .08s steps(2); }
@keyframes bsodin { from { filter: brightness(3); } }
.bsod .face { font-size: 120px; line-height: 1; margin: 0 0 30px; font-family: var(--f-body); }
.bsod p { font-size: 20px; max-width: 900px; margin: 0 0 18px; line-height: 1.4; }
.bsod .code { font-size: 14px; opacity: .85; margin-top: 30px; }
.bsod dl { display: grid; grid-template-columns: max-content max-content; gap: 4px 30px; font-size: 15px; margin: 24px 0; }
.bsod dt { opacity: .7; } .bsod dd { margin: 0; }
.bsod .btn { margin-top: 18px; }
.victory { text-align: center; padding: 60px 20px; }
.victory .h1 { font-size: 44px; color: var(--gold); }
.victory dl { display: inline-grid; grid-template-columns: max-content max-content; gap: 6px 30px; text-align: left; font-family: var(--f-mono); margin: 20px 0 30px; }
.victory dt { color: var(--silk-dim); } .victory dd { margin: 0; }

/* ---------------------------------------------------------------- tooltip + toast */
#tip { position: fixed; z-index: 200; pointer-events: none; max-width: 280px; background: #0d0714; border: 1px solid var(--gold-2); color: var(--silk); padding: 8px 10px; font-size: 13px; border-radius: 3px; opacity: 0; transition: opacity .1s; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
#tip.on { opacity: 1; }
#tip b { font-family: var(--f-silk); font-weight: 400; color: var(--gold); font-size: 11px; display: block; margin-bottom: 3px; }
#tip .s { font-family: var(--f-mono); font-size: 11px; color: var(--silk-dim); display: block; margin-top: 4px; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--mult); color: #fff; padding: 8px 14px; font-family: var(--f-mono); font-size: 13px; border-radius: 3px; opacity: 0; transition: opacity .2s, transform .2s var(--ease-out); z-index: 210; pointer-events: none; }
#toast.on { opacity: 1; transform: translateX(-50%); }
#toast.ok { background: var(--ok); color: #082a14; }

/* end-of-job overlay */
.job-over { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10, 4, 18, .55); animation: fadein .25s; }
.job-over .box { background: var(--mask); border: 1px solid var(--gold); padding: 26px 34px; text-align: center; border-radius: 4px; animation: modalin .3s var(--ease-snap); }
.job-over .box.lose { border-color: var(--mult); }
.job-over h2 { font-family: var(--f-silk); font-weight: 400; margin: 0 0 6px; font-size: 26px; color: var(--ok); }
.job-over .lose h2 { color: var(--mult); }
.job-over p { margin: 0 0 18px; color: var(--silk-dim); }

.scan { position: fixed; inset: 0; pointer-events: none; z-index: 300; background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

@media (max-width: 1360px) {
  .levels .lvl { padding: 3px 4px; }
  .logo { font-size: 15px; }
}
@media (max-width: 1100px) {
  .levels { display: none; }
  .howto { grid-template-columns: 1fr; }
  .reward-grid, .shop-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* heat ladder */
.heat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 20px; }
.heat-row .silk-label { margin-right: 6px; }
.heat-btn { display: inline-flex; flex-direction: column; align-items: center; min-width: 62px; padding: 6px 8px; border: 1px solid var(--trace); background: rgba(0,0,0,.2); color: var(--silk); border-radius: 3px; cursor: pointer; font-family: var(--f-mono); font-weight: 700; }
.heat-btn span { font-family: var(--f-silk); font-size: 8px; font-weight: 400; color: var(--silk-dim); }
.heat-btn.on { border-color: var(--heat); background: rgba(255,138,42,.12); color: var(--heat); }
.heat-btn:disabled { opacity: .4; cursor: not-allowed; }
.heat-pip { color: var(--heat); border-color: rgba(255,138,42,.5); }
/* coach mark */
.coach { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px dashed var(--gold); border-radius: 3px; background: rgba(226,182,92,.07); font-size: 13px; animation: bootline .3s var(--ease-out); }
.coach b { font-family: var(--f-silk); font-weight: 400; font-size: 10px; color: var(--gold); white-space: nowrap; }
.coach span { flex: 1; }

/* install → run stages */
.stage { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; margin-top: 10px; position: relative; }
.stage-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 12px; background: var(--mask-3); color: var(--silk); box-shadow: inset 0 0 0 1px var(--trace); }
.stage.install .stage-n { background: var(--t-net); color: #052a20; }
.stage.install.done .stage-n { background: var(--ok); color: #082a14; }
.stage.install.done { opacity: .7; }
.stage.install.done .progress { height: 8px; }
.stage-head { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.stage-head b { font-family: var(--f-silk); font-weight: 400; font-size: 11px; letter-spacing: .08em; color: var(--silk); }
.stage-head .mono { margin-left: auto; font-size: 13px; }
.stage .progress { margin-top: 6px; }
.stage-hint { font-size: 12px; color: var(--t-net); margin-top: 4px; }
.stage.install.unlocking .stage-hint { color: var(--ok); }
.stage.install.done .stage-hint { color: var(--silk-dim); }
.stage.run.locked { opacity: .45; }
.stage.run.locked .progress > i { background: var(--silk-dim); box-shadow: none; }
.install-line { padding: 8px 16px; font-size: 13px; border-top: 1px dashed #b4a582; }
.install-line .silk-label { color: #13806a; margin-right: 4px; }
.ticket.virus .install-line { border-color: #5a1a28; }
.ticket.virus .install-line .silk-label { color: var(--t-net); }
.readout.installing { grid-template-columns: auto auto 1fr auto 1fr auto 1.3fr; }
.lcd.bwmain { text-align: center; padding-right: 4px; }
.lcd.bwmain .num { font-family: var(--f-mono); font-weight: 700; font-size: 34px; line-height: 1; color: var(--t-net); text-shadow: 0 0 14px rgba(63,216,176,.55); display: inline-block; }
.lcd.bwmain .unit { display: block; font-family: var(--f-silk); font-size: 8px; color: var(--t-net); margin-top: 3px; }
.readout .op.sep { width: 1px; align-self: stretch; background: var(--trace); margin: 0 6px; }
.readout.locked .lcd.ops .num, .readout.locked .lcd.mult .num, .readout.locked .lcd.thru .num { opacity: .3; filter: grayscale(.6); }
.readout.locked .lcd.thru .silk-label { color: var(--t-net); }
.readout.installing:not(.locked) .lcd.thru .silk-label { color: var(--ok); }
.ticket .install-line .dim { color: #6a5d48; }
.ticket.virus .install-line .dim { color: var(--silk-dim); }


/* ================================================================ ART LAYER */
#bg-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { opacity: .5; }

/* ---------------------------------------------------------------- the motherboard */
.mb-panel { padding: 10px 10px 12px; }
.mobo {
  --ht: 0; --hc: 76,195,255;
  position: relative; width: 274px; height: 300px; margin: 0 auto; border-radius: 8px;
  background-size: 100% 100%; isolation: isolate;
  box-shadow: 0 0 0 1px #0b0710, 0 8px 22px rgba(0,0,0,.45), 0 0 calc(var(--ht) * 26px) rgba(var(--hc), calc(var(--ht) * .5));
}
.mobo .heatmap {
  position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 19% 18%, rgba(var(--hc), .9), transparent 30%),
    radial-gradient(ellipse 52% 20% at 50% 47%, rgba(var(--hc), .65), transparent 72%),
    radial-gradient(circle at 34% 85%, rgba(var(--hc), .3), transparent 30%);
  opacity: calc(var(--ht) * .5);
}
.chip.part { position: absolute; z-index: 1; border-radius: 4px; cursor: help; outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.chip.part > i { position: absolute; display: block; pointer-events: none; }
.chip.part .art { inset: 0; background-size: 100% 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.chip.part:hover { outline-color: var(--gold); }
.chip.part .lbl {
  position: absolute; left: 1px; bottom: 1px; max-width: calc(100% - 2px); z-index: 3;
  font: 600 10px/1.15 var(--f-body); color: var(--silk); background: rgba(13,7,20,.84);
  padding: 1px 4px 1px 3px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.chip.part .lbl b { font-family: var(--f-silk); font-weight: 400; font-size: 7px; color: var(--gold); margin-right: 4px; letter-spacing: .04em; }
.chip.part:hover .lbl { white-space: normal; }
.chip.part.p-gpu .lbl { left: 10px; bottom: auto; top: 4px; }
.chip.part.p-ram .lbl { bottom: -3px; }
.chip.part.empty { border: 1px dashed rgba(226,182,92,.35); cursor: default; }
.chip.part.flash { animation: partflash .5s var(--ease-out); }
@keyframes partflash { 0% { outline: 2px solid var(--gold); filter: brightness(1.7); transform: scale(1.05); } 100% { outline: 2px solid transparent; filter: none; transform: none; } }
.chip.part.disabled > i { filter: grayscale(1) brightness(.4); }
.chip.part .off, .mobo .off { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; font-family: var(--f-silk); font-size: 9px; color: var(--mult); text-shadow: 0 0 6px #000; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,79,94,.14) 6px 12px); border-radius: 4px; }

/* moving bits */
.fan { background-size: 100% 100%; animation: spin var(--spin, 2.4s) linear infinite; will-change: transform; border-radius: 50%; }
.fan.still { animation: none; }
.fanblur { border-radius: 50%; background: radial-gradient(circle, transparent 29%, rgba(120,110,140, calc(var(--ht) * .5)) 31%, rgba(120,110,140, calc(var(--ht) * .32)) 92%, transparent 96%); }
.grille { background-size: 100% 100%; }
@keyframes spin { to { transform: rotate(360deg); } }
.dieglow { border-radius: 5px; background: radial-gradient(closest-side, rgba(var(--hc), 1), rgba(var(--hc), .4) 55%, transparent); opacity: calc(var(--ht) * .95); mix-blend-mode: screen; z-index: 2; }
.p-gpu .dieglow { opacity: calc(var(--ht) * .45); }
.led-blink { border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; animation: ledb var(--d, 1s) steps(2, jump-none) infinite; }
.led-blink.green { color: #6fe39a; } .led-blink.amber { color: #ffb35e; } .led-blink.teal { color: #3fd8b0; }
@keyframes ledb { 50% { opacity: .15; box-shadow: none; } }
.rgbline, .rgbstick { border-radius: 2px; background: linear-gradient(90deg, #ff4f5e, #ffd36e, #6fe39a, #4cc3ff, #b98cff, #ff4f5e) 0 0 / 200% 100%; animation: rgbflow 2.6s linear infinite; box-shadow: 0 0 6px rgba(185,140,255,.7); }
@keyframes rgbflow { to { background-position: -200% 0; } }
.platter { border-radius: 50%; background: conic-gradient(transparent 0 18%, rgba(255,255,255,.55) 24%, transparent 30% 68%, rgba(255,255,255,.35) 74%, transparent 80%); animation: spin .9s linear infinite; }
.pumpring { border-radius: 50%; border: 2px solid; border-color: #ff4f5e #4cc3ff #6fe39a #b98cff; animation: spin 3s linear infinite; box-shadow: 0 0 8px rgba(185,140,255,.55), inset 0 0 6px rgba(76,195,255,.4); }
.vapor { border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(230,245,255,.65), rgba(230,245,255,0) 62%); animation: vapor 3.2s ease-in-out infinite; opacity: calc(.35 + var(--ht) * .6); }
@keyframes vapor { 0%, 100% { transform: translateY(4px) scale(.9); } 50% { transform: translateY(-6px) scale(1.12); } }
.bubbles { border-radius: 6px; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.9) 0 1.3px, transparent 1.8px) 0 0 / 14px 13px, radial-gradient(circle at 70% 20%, rgba(255,255,255,.7) 0 1px, transparent 1.4px) 0 0 / 14px 19px; animation: bubbles 2.2s linear infinite; }
@keyframes bubbles { to { background-position: 0 -26px, 0 -38px; } }
.fiberglow { border-radius: 50%; background: radial-gradient(rgba(255,176,106,.95), transparent 70%); animation: ledb 1.1s steps(2, jump-none) infinite; }
.spark { background: radial-gradient(circle, #fff 0 1.5px, #ffd36e 2px, transparent 5px); animation: spark 2.3s steps(1) infinite; opacity: 0; }
@keyframes spark { 0%, 86% { opacity: 0; } 88% { opacity: 1; transform: scale(1.3); } 92% { opacity: 0; } 94% { opacity: 1; transform: scale(.8) rotate(40deg); } 96% { opacity: 0; } }

/* board LCD + danger states */
.mb-lcd {
  position: absolute; left: 184px; top: 244px; width: 80px; height: 46px; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 6px;
  background: #0b1210; border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 0 0 1px #1e3a33, inset 0 0 12px rgba(63,216,176,.12);
  font-family: var(--f-mono); font-size: 9px; color: #7fd8bd; line-height: 1.15;
}
.mb-lcd .tmp { font-size: 15px; font-weight: 700; line-height: 1; text-shadow: 0 0 8px currentColor; }
.mb-lcd b { color: #c8ffe9; font-weight: 600; } .mb-lcd b.bad { color: var(--mult); }
.mb-banner {
  position: absolute; left: 6px; width: 172px; bottom: 6px; z-index: 5; text-align: center;
  font-family: var(--f-mono); font-size: 11px; color: #fff; padding: 5px 6px; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, #b22a37 0 8px, #8a1626 8px 16px); box-shadow: 0 0 0 1px #ff8a93, 0 0 18px rgba(255,79,94,.6);
}
.mb-banner b { font-family: var(--f-silk); font-weight: 400; font-size: 9px; letter-spacing: .08em; display: block; }
.mb-banner.warn { background: repeating-linear-gradient(-45deg, #7a4a10 0 8px, #5c360a 8px 16px); box-shadow: 0 0 0 1px var(--heat), 0 0 14px rgba(255,138,42,.45); }
.mobo.throttle { box-shadow: 0 0 0 2px var(--mult), 0 0 32px rgba(255,79,94,.65); animation: throb 1s ease-in-out infinite; }
.mobo.throttle::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: 8px; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(255,40,60,.28)); }
.mobo.warn { box-shadow: 0 0 0 1px var(--heat), 0 0 22px rgba(255,138,42,.35); }
@keyframes throb { 50% { filter: brightness(1.18); } }

/* rig select thumbnails */
.rig-board { margin: -4px -4px 12px; display: flex; justify-content: center; }
.mobo.thumb { zoom: .72; }
.mobo.thumb .lbl { display: none; }
.mobo.thumb .chip.part { cursor: inherit; }
.rig:hover .mobo.thumb { box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(0,0,0,.5); }

/* ---------------------------------------------------------------- virus sprites */
.vsprite { display: block; width: 100%; height: 100%; background-size: 200% 100%; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; animation: vidle .9s steps(1) infinite; }
@keyframes vidle { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.virus-art { display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, rgba(255,79,94,.18), transparent 65%), #0c0612; }
.virus-art .vsprite { width: 76px; height: 76px; filter: drop-shadow(0 0 6px rgba(255,79,94,.5)); }
.virus-art.hit .vsprite { animation: vidle .9s steps(1) infinite, vglitch .5s steps(1); }
@keyframes vglitch {
  0% { filter: brightness(5) saturate(0); }
  12% { transform: translate(-6px, 1px); filter: drop-shadow(4px 0 #4cc3ff) drop-shadow(-4px 0 #ff4f5e); }
  28% { transform: translate(5px, -2px) skewX(12deg); clip-path: inset(0 0 55% 0); }
  42% { transform: translate(-3px, 0); clip-path: inset(35% 0 20% 0); filter: hue-rotate(120deg); }
  58% { transform: none; clip-path: none; filter: brightness(2.5); }
  100% { transform: none; filter: drop-shadow(0 0 6px rgba(255,79,94,.5)); }
}
.ticket .vart { width: 72px; height: 72px; float: right; margin: -4px -4px 6px 10px; padding: 4px; background: #0c0612; border: 1px solid #5a1a28; border-radius: 3px; }
.ticket .vart .vsprite { filter: drop-shadow(0 0 6px rgba(255,79,94,.45)); }
.preview-boss .pb-art { width: 40px; height: 40px; flex: 0 0 auto; padding: 3px; background: #0c0612; border: 1px solid #5a1a28; border-radius: 3px; }

/* ---------------------------------------------------------------- encounter fits the viewport */
#app:has(> .enc) { min-height: 100vh; display: flex; flex-direction: column; }
#app:has(> .enc) > .topbar { flex: 0 0 auto; }
#app > .enc { flex: 1 1 auto; min-height: 0; }
.enc { grid-template-columns: 300px minmax(0, 1fr) 214px; grid-template-rows: auto auto; align-content: start; }
.left, .right, .center { min-height: 0; }
.right { overflow: auto; }
@media (max-width: 1360px) { .enc { grid-template-columns: 296px minmax(0, 1fr) 200px; } }
@media (max-width: 1180px) {
  #app:has(> .enc) { height: auto; display: block; }
  .enc { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "left center" "left right" "bottom bottom"; }
  .enc > .left { grid-area: left; grid-row: auto; } .enc > .center { grid-area: center; grid-row: auto; } .enc > .bottom { grid-area: bottom; }
  .enc > .right { grid-area: right; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; overflow: visible; }
  .left .panel-h .hint-r { display: none; }
  .enc > .right > .panel { flex: 1 1 170px; }
  .mb-panel .mobo { zoom: .78; }
  .mod-list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .enc { grid-template-columns: 1fr; grid-template-areas: "center" "bottom" "left" "right"; }
  .readout { grid-template-columns: 1fr auto 1fr; } .readout .eq, .readout .lcd.thru { grid-column: 1 / -1; }
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .mb-panel .mobo { zoom: 1; }
}

.objective:has(.virus-box) { grid-template-columns: 1fr; }
.virus-box { grid-template-columns: 92px minmax(0, 1fr) minmax(150px, auto); }
.pipeline .slot:not(.filled) { background: linear-gradient(180deg, rgba(18,10,26,.55) 0 calc(100% - 22px), #120a1a calc(100% - 22px)); }
.readout { background: #0d0714; }

/* ---------------------------------------------------------------- cascade juice (fx.js) */
#fx-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
#fx-layer .fx-svg { position: absolute; inset: 0; }
#fx-layer .ftrace { fill: none; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 4px currentColor); opacity: .9; }
#fx-layer .spark-p { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, var(--c) 45%, transparent 70%); box-shadow: 0 0 12px 3px var(--c); }
#fx-layer .spark-p.tail { left: -3px; top: -3px; width: 6px; height: 6px; box-shadow: 0 0 8px 1px var(--c); opacity: .7; }
#fx-layer .spark-burst { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--c); animation: burst .4s var(--ease-out) forwards; }
@keyframes burst { from { scale: .3; opacity: 1; } to { scale: 1.6; opacity: 0; } }
#fx-layer .packet { position: absolute; left: -4px; top: -3px; width: 8px; height: 6px; border-radius: 1px; background: var(--t-net); box-shadow: 0 0 8px 2px rgba(63,216,176,.7); }
.readout.bigflash { animation: bigflash .6s var(--ease-out); }
@keyframes bigflash { 0% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 40px rgba(226,182,92,.7); } 100% { box-shadow: inset 0 0 0 1px #2b1f3b, inset 0 8px 24px rgba(0,0,0,.6); } }

/* ---------------------------------------------------------------- shop / codex part cards */
.mod-card { display: flex; flex-direction: column; background: linear-gradient(180deg, #1d1428, #140d1d); box-shadow: inset 3px 0 0 var(--rc, var(--trace)), 0 8px 18px rgba(0,0,0,.3); }
.mod-card.is-mod { padding-left: 64px; min-height: 104px; }
.mod-card .mc-art { display: block; background: center / contain no-repeat; }
.mod-card.is-mod .mc-art { position: absolute; left: 10px; top: 12px; width: 44px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.mod-card.is-hw .mc-art { height: 70px; margin: -12px -12px 10px; border-radius: 3px 3px 0 0; background-color: #2a1840; background-size: auto 86%; box-shadow: inset 0 -1px 0 #3a2a4e; background-image: none; }
.mod-card.is-hw .mc-art { background-image: var(--art); }
.mod-card .hw-stat { color: var(--gold); font-size: 12px; margin-top: 6px; }
.mod-card .meta { margin-top: auto; padding-top: 10px; }
.mod-card.soft-card { width: 200px; padding-left: 64px; background: linear-gradient(180deg, #13263b, #0e1b2b); border-color: #2b5578; box-shadow: inset 3px 0 0 var(--ops); }
.mod-card.soft-card .mc-art { position: absolute; left: 10px; top: 12px; width: 44px; height: 44px; image-rendering: pixelated; }
.mod-card.rarity-legendary { border-color: #6a2a48; box-shadow: inset 3px 0 0 var(--rc), 0 0 18px rgba(255,79,94,.18); }
.shelf { background: linear-gradient(180deg, rgba(36,21,54,.9), rgba(24,13,36,.9)); box-shadow: 0 8px 22px rgba(0,0,0,.25); position: relative; }
.shelf::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 4px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--gold-2)); opacity: .5; }
.item .price { background: #120a18; padding: 2px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--gold-2); }

/* ---------------------------------------------------------------- contract tickets */
.ticket .band.art-band { height: 38px; background-size: cover; background-position: center; position: relative; border-radius: 3px 3px 0 0; box-shadow: inset 0 -3px 0 var(--tc); }
.ticket .band.art-band span { position: absolute; right: 8px; top: 7px; font-family: var(--f-silk); font-size: 9px; background: var(--tc); color: var(--ink); padding: 1px 5px; border-radius: 1px; }
.ticket { overflow: hidden; }
.ticket:hover:not(:disabled) .art-band { filter: brightness(1.2) saturate(1.2); }

/* ---------------------------------------------------------------- title */
.title-chip {
  background:
    radial-gradient(120% 140% at 30% 0%, #2a2033, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    #17111d;
  border-radius: 6px; overflow: visible;
}
.title-chip .pins { position: absolute; left: 22px; right: 22px; height: 12px; background: repeating-linear-gradient(90deg, var(--gold) 0 7px, transparent 7px 16px); }
.title-chip .pins.t { top: -14px; } .title-chip .pins.b { bottom: -14px; }
.title-chip::before, .title-chip::after { top: 22px; bottom: 22px; }
.title-chip .sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 6px; }
.title-chip .sheen::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.06) 45%, rgba(255,255,255,.12) 50%, transparent 55%); animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { left: -40%; } 100% { left: 120%; } }
.title-chip .etch { position: absolute; left: 34px; right: 34px; top: 12px; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; color: #6b5f80; letter-spacing: .2em; }
.title-word .o { color: var(--gold); text-shadow: 0 0 18px rgba(226,182,92,.6); animation: powerled 2.6s ease-in-out infinite; }
@keyframes powerled { 50% { text-shadow: 0 0 34px rgba(226,182,92,.95), 0 0 6px #fff3d0; } }
.tag-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 30px auto 0; max-width: 780px; }
.tl { display: grid; grid-template-columns: 54px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 6px 10px 6px 6px; background: rgba(13,7,20,.6); border: 1px solid var(--trace); border-radius: 3px; box-shadow: inset 2px 0 0 var(--tc); }
.tl .tl-art { grid-row: 1 / span 2; width: 54px; height: 24px; background: center / cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.tl b { font-family: var(--f-silk); font-weight: 400; font-size: 10px; color: var(--tc); }
.tl span:last-child { font-size: 11px; color: var(--silk-dim); white-space: nowrap; }

/* ---------------------------------------------------------------- reward invoice */
.receipt { padding-top: 22px; background: linear-gradient(180deg, #fbf8f1, #f1ebdd); }
.receipt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: radial-gradient(circle at 6px 8px, #c9bfae 0 2.5px, transparent 3px) 0 0 / 12px 8px repeat-x; opacity: .7; }
.receipt .r-logo { text-align: center; font-family: var(--f-silk); font-size: 18px; letter-spacing: .12em; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 10px; }
.receipt .r-logo small { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; color: #6a6258; margin-top: 2px; }
.receipt h3 { font-size: 12px; }
.receipt .stamp { position: absolute; right: 22px; bottom: 58px; font-family: var(--f-silk); font-size: 26px; color: #c42536; border: 3px solid #c42536; padding: 2px 10px; border-radius: 4px; transform: rotate(-14deg); opacity: 0; mix-blend-mode: multiply; animation: stamp .35s var(--ease-snap) forwards; }
@keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } to { opacity: .82; transform: rotate(-14deg) scale(1); } }
.receipt .barcode { height: 34px; margin: 16px 6px 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px, var(--ink) 7px 10px, transparent 10px 11px, var(--ink) 11px 12px, transparent 12px 15px); }
.receipt .r-foot { text-align: center; font-size: 9px; letter-spacing: .1em; color: #6a6258; }

/* ---------------------------------------------------------------- BSOD */
.bsod .pct { font-size: 20px; }
.bsod-foot { display: flex; gap: 18px; align-items: center; margin-top: 30px; font-size: 13px; max-width: 760px; }
.bsod-foot .qr { flex: 0 0 auto; width: 96px; height: 96px; background: center / contain no-repeat; image-rendering: pixelated; }
.bsod-foot .code { margin-top: 8px; }

.card.long .desc { font-size: 11.5px; line-height: 1.18; }
.card.xlong .desc { font-size: 10.5px; line-height: 1.15; }
.card.long .art, .card.xlong .art { height: 48px; }
.slot .card.long .desc, .slot .card.xlong .desc { font-size: 10px; }
.slot .card.long .art, .slot .card.xlong .art { height: 24px; }
.pick-row .card.long .desc, .pick-row .card.xlong .desc { font-size: 12px; }
.mod-card.is-mod { width: 230px; }
.chip.part.p-cpu .lbl, .chip.part.p-cooler .lbl, .chip.part.p-ram .lbl {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; padding-top: 2px; padding-bottom: 2px;
}
.chip.part.p-ram .lbl { left: -2px; max-width: calc(100% + 4px); }

/* busy downloading: output still counts, at Ops ×½ · Mult ×½ */
.readout.busy { box-shadow: inset 0 0 0 1px rgba(63,216,176,.55), inset 0 0 36px rgba(63,216,176,.18); }
.readout.busy .lcd.thru .silk-label { color: var(--t-net); }
.readout.busy .bottleneck { color: var(--t-net); }
.readout.installing:not(.busy) .lcd.thru .silk-label { color: var(--ok); }
.stage.run.slowed .progress > i { filter: saturate(.5); }
.stage.run.slowed .stage-head .dim { color: var(--t-net); }

/* Hand sits directly under the pipeline (center column), controls under the right column. */
@media (min-width: 1181px) {
  .enc > .bottom { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .enc > .bottom > .hand-wrap { grid-column: 2; min-width: 0; }
  .enc > .bottom > .controls { grid-column: 3; min-width: 0; }
}
/* center the hand without clipping when it overflows */
.hand > :first-child { margin-left: auto; }
.hand > :last-child { margin-right: auto; }

/* ---------------------------------------------------------------- component wear */
















/* ---------------------------------------------------------------- shop: your rig beside the shelves */
.screen.shop-screen { max-width: 1680px; }
.shop-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
.shop-rig { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 12px; }
.shop-rig .sysinfo dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 6px 0 0; font-size: 13px; }
.shop-rig .sysinfo dt { color: var(--silk-dim); }
.shop-rig .sysinfo dd { margin: 0; }
@media (max-width: 1100px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-rig { position: static; }
}

/* Big hands overlap instead of clipping: each card after the first pulls left just enough
   that n cards always fit the hand's width (8px gap when there's room). Hovered card rises on top. */
.hand { gap: 0; overflow: visible; }
.hand > .card + .card { margin-left: min(8px, calc((100% - var(--n, 1) * var(--card-w)) / max(1, var(--n, 1) - 1))); }
.hand > .card { position: relative; z-index: 1; }
.hand > .card:hover, .hand > .card:focus-visible, .hand > .card.selected { z-index: 5; }

/* early-finish bonus */
.ticket .perk.early { background: #2a2210; color: var(--gold); border-top: 1px dashed rgba(226,182,92,.35); }
.early-now { font-family: var(--f-mono); font-size: 11px; color: var(--gold); margin-left: 8px; white-space: nowrap; }
/* ================================================================ SECOND PASS: premium polish */

/* ---------------------------------------------------------------- big-monitor scaling (see js/ui/scale.js) */
#app, #tip, #fx-layer, #toast { zoom: var(--ui-scale, 1); }
#app:has(> .enc) { min-height: calc(100vh / var(--ui-scale, 1)); }
.title-screen { min-height: calc(100vh / var(--ui-scale, 1)); }
/* pipeline cards keep card proportions in wide slots */
.slot.filled { display: flex; justify-content: center; }
.slot .card { width: min(100%, 140px); }

/* ---------------------------------------------------------------- panels: bevel + corner screws */
.panel, .shelf {
  --screw: radial-gradient(circle, #a497bd 0 1.3px, #5a4c72 1.6px 2.3px, #1a1024 2.6px, transparent 3px);
  background:
    var(--screw) 2px 2px / 10px 10px no-repeat, var(--screw) calc(100% - 2px) 2px / 10px 10px no-repeat,
    var(--screw) 2px calc(100% - 2px) / 10px 10px no-repeat, var(--screw) calc(100% - 2px) calc(100% - 2px) / 10px 10px no-repeat,
    linear-gradient(180deg, rgba(44, 27, 66, .95), rgba(24, 13, 36, .95));
  box-shadow: 0 10px 24px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 0 rgba(0,0,0,.35);
}
.panel-h { padding-bottom: 6px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(226,182,92,.45), rgba(226,182,92,0) 70%) 1; }
.silk-label .ref { border: 1px solid rgba(243,239,230,.55); padding: 0 3px; border-radius: 1px; }
.topbar { background: linear-gradient(180deg, rgba(36,21,54,.92), rgba(18,9,28,.92)); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(226,182,92,.25), 0 6px 18px rgba(0,0,0,.35); }
.integrity-bar { height: 12px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }
.integrity-bar > i { background-image: linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%), linear-gradient(90deg, #ff4f5e, #ffb35e 50%, var(--ok)); background-size: 100% 100%, 120px 100%; }

/* tactile gold-pad buttons */
.btn { box-shadow: 0 3px 0 #6e5020, 0 6px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55); position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; transition: background-position .5s; pointer-events: none; }
.btn:hover:not(:disabled)::after { background-position: 150% 0; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #6e5020, 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.ghost { box-shadow: inset 0 0 0 1px var(--silk-dim); }
.btn.ghost::after { display: none; }
#exec-btn:not(:disabled) { box-shadow: 0 3px 0 #6e5020, 0 0 22px rgba(226,182,92,.35), inset 0 1px 0 rgba(255,255,255,.55); }

/* ---------------------------------------------------------------- LED readout: 7-segment glyphs + glass */
.readout {
  background: radial-gradient(120% 140% at 50% 0%, #1b1128, #0b0612 60%);
  border: 1px solid #000; border-radius: 6px; padding: 10px 14px;
  box-shadow: 0 0 0 3px #1f1530, 0 0 0 4px #3a2a4e, 0 12px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.lcd.ops, .lcd.mult, .lcd.thru, .lcd.bwmain {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(100% 120% at 50% 0%, #120a1c, #050308);
  border-radius: 4px; padding: 6px 8px 5px; isolation: isolate;
  box-shadow: inset 0 0 0 1px #000, inset 0 3px 10px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.05);
}
.lcd.ops::after, .lcd.mult::after, .lcd.thru::after, .lcd.bwmain::after { content: ''; position: absolute; inset: 1px 1px 50% 1px; border-radius: 3px 3px 40% 40% / 3px 3px 12px 12px; background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); pointer-events: none; }
.num.seg { display: inline-flex; align-items: flex-end; line-height: 1; height: 1em; margin: 2px 0;
  filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 9px color-mix(in srgb, currentColor 55%, transparent)); }
.segs { display: inline-flex; align-items: flex-end; gap: .07em; transform: skewX(-7deg); }
.sg { position: relative; display: inline-block; width: .58em; height: 1em; flex: 0 0 auto; }
.sg::before, .sg::after { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--g) center / 100% 100% no-repeat; mask: var(--g) center / 100% 100% no-repeat; }
.sg::before { opacity: .085; }
.sg::after { -webkit-mask-image: var(--m); mask-image: var(--m); }
.sg.run::after { animation: blink .5s steps(2) infinite; }
.sg.run:nth-child(2)::after { animation-delay: .17s; } .sg.run:nth-child(3)::after { animation-delay: .34s; }
.sdp { position: relative; display: inline-block; width: .17em; height: 1em; flex: 0 0 auto; }
.sdp::after { content: ''; position: absolute; left: .01em; bottom: .02em; width: .12em; height: .12em; border-radius: 1px; background: currentColor; }
.sdp.comma::after { height: .2em; bottom: -.06em; transform: skewX(-20deg); }
.sfx { font-family: var(--f-silk); font-style: normal; font-size: .46em; line-height: 1; margin-left: .1em; padding-bottom: .02em; }
.lcd .num.seg { font-size: 38px; }
.lcd.thru .num.seg { font-size: 50px; color: #fff4e0; }
.lcd.bwmain .num.seg { font-size: 36px; }
.lcd.ops .num.seg { color: #6fd2ff; } .lcd.mult .num.seg { color: #ff5f6d; }
.readout.preview .num.seg { opacity: .62; }
.lcd .num.seg.bump { animation: bump .22s var(--ease-snap); }
.readout.hitstop .lcd.thru .num.seg { transform: scale(1.32); filter: brightness(1.8) drop-shadow(0 0 4px #fff) drop-shadow(0 0 22px #ffd36e); transition: transform .08s; }

/* MIPS flames: preview when this cycle clears the target; during the cascade, scaled by the hit */









.readout.clears { box-shadow: 0 0 0 3px #1f1530, 0 0 0 4px var(--heat), 0 0 30px rgba(255,138,42,.35), 0 12px 28px rgba(0,0,0,.5); }
.readout.clears .proj { color: #ffd36e; animation: blink 1s steps(2) infinite; }

/* fx layer bits */
#fx-layer .ember { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px 1px var(--c); }
#fx-layer .fx-flash { position: absolute; inset: 0; mix-blend-mode: screen; }
#fx-layer .vpix { position: absolute; left: 0; top: 0; }
#fx-layer .bigpop {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--f-silk); font-size: 42px; letter-spacing: .04em;
  color: #fff; text-shadow: 0 3px 0 #b98b35, 0 0 18px #ffd36e, 0 0 40px rgba(255,138,42,.8); animation: bigpop 1.25s var(--ease-snap) forwards;
}
@keyframes bigpop { 0% { opacity: 0; scale: .2; } 18% { opacity: 1; scale: 1.25; } 30% { scale: 1; } 75% { opacity: 1; translate: 0 -10px; } 100% { opacity: 0; translate: 0 -40px; } }

/* progress bars: glossy fill, glowing head, marching stripes while downloading */
.progress, .hpbar { border-radius: 4px; box-shadow: inset 0 2px 5px rgba(0,0,0,.7); }
.progress > i, .hpbar > i { overflow: visible; }
.progress > i { background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%), repeating-linear-gradient(90deg, var(--ops) 0 10px, #3aa3dc 10px 12px); }
.progress.dl > i { background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), repeating-linear-gradient(-60deg, var(--t-net) 0 8px, #2fb592 8px 16px); background-size: 100% 100%, 18.5px 100%; animation: stripes .7s linear infinite; }
@keyframes stripes { to { background-position: 0 0, 18.5px 0; } }
.progress > i::after, .hpbar > i::after { content: ''; position: absolute; right: -2px; top: -2px; bottom: -2px; width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.75), 0 0 16px 4px rgba(76,195,255,.55); }
.hpbar > i::after { box-shadow: 0 0 8px 2px rgba(255,255,255,.75), 0 0 16px 4px rgba(255,79,94,.6); }
.progress > i[style*="width:0%"]::after, .hpbar > i[style*="width:0%"]::after { display: none; }
.hpbar > i { background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), linear-gradient(90deg, #b22a37, var(--mult)); }

/* ---------------------------------------------------------------- cards as objects */
.card .glare, .card .foil { position: absolute; inset: 0; border-radius: 6px 6px 2px 2px; pointer-events: none; z-index: 2; }
.card .glare { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.6), rgba(255,255,255,0) 52%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .2s; }
.card.tilt .glare { opacity: 1; }
.card .foil { display: none; }
.hand .card.tilt, .pick-row .card.tilt, .deck-grid .card.tilt, .item .card.tilt {
  transform: perspective(700px) translateY(-16px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.06);
  transition: transform .07s linear, box-shadow .2s; z-index: 5;
  box-shadow: 0 2px 0 #8e7f5e, 0 28px 36px rgba(0,0,0,.55);
}
.pick-row .card.tilt, .deck-grid .card.tilt, .item .card.tilt { transform: perspective(700px) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04); }
.hand .card.cant.tilt { transform: perspective(700px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hand .card.selected.tilt { transform: perspective(700px) translateY(-20px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
/* die-shot art: bigger, framed, with a light sweep on hover */
.card .art { height: 62px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.75), 0 0 0 1px #2a2030, 0 0 0 2px color-mix(in srgb, var(--tc) 50%, #b98b35), 0 2px 3px rgba(0,0,0,.35); overflow: visible; }
.card .art::after { content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.3) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat; transition: background-position .7s var(--ease-out); }
.card:hover .art::after { background-position: -30% 0; }
.card.long .art { height: 50px; } .card.xlong .art { height: 44px; }
.slot .card .art { height: 30px; } .slot .card.long .art, .slot .card.xlong .art { height: 24px; }
.card.mini .art { height: 40px; }
.pick-row .card .art { height: 74px; } .pick-row .card.long .art { height: 62px; } .pick-row .card.xlong .art { height: 54px; }
/* rarity treatments */
.card.r-uncommon { box-shadow: 0 2px 0 #8e7f5e, 0 0 0 1px rgba(170,205,255,.85), 0 0 14px rgba(120,180,255,.35), 0 10px 20px rgba(0,0,0,.35); }
.card.r-rare { box-shadow: 0 2px 0 #8e7f5e, 0 0 0 2px #e2b65c, 0 0 20px rgba(226,182,92,.5), 0 10px 20px rgba(0,0,0,.35); }
.card.r-rare .foil, .card.up .foil {
  display: block; mix-blend-mode: color-dodge; opacity: .5;
  background: linear-gradient(115deg, transparent 22%, rgba(255,90,210,.45) 34%, rgba(90,255,240,.45) 44%, rgba(255,240,100,.45) 54%, rgba(150,120,255,.45) 64%, transparent 76%) 0 0 / 300% 300%;
  animation: holo 6s linear infinite;
}
.card.up:not(.r-rare) .foil { opacity: .28; background-image: linear-gradient(115deg, transparent 30%, rgba(140,220,255,.6) 45%, rgba(220,190,255,.5) 55%, transparent 70%); }
.card.tilt .foil { animation: none; background-position: var(--gx, 50%) var(--gy, 50%); opacity: .75; }

.card .upfoil {
  position: absolute; left: 21px; top: -6px; z-index: 1; width: 19px; height: 19px; display: grid; place-items: center;
  font: 700 14px/1 var(--f-mono); color: #0b2a40; border-radius: 50%;
  background: conic-gradient(from 30deg, #e8f6ff, #8fd0ff, #d7b8ff, #bff5e6, #e8f6ff);
  box-shadow: 0 0 0 2px #1673a8, 0 0 10px rgba(76,195,255,.85);
}
.card.up .name::after { content: ''; }
/* malware: sickly, blotchy, dripping, alive */
.card.mal {
  background:
    radial-gradient(circle at 18% 72%, rgba(105,125,35,.45) 0 12%, transparent 13%),
    radial-gradient(circle at 82% 88%, rgba(85,105,25,.4) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 46%, rgba(125,145,45,.28) 0 7%, transparent 8%),
    linear-gradient(180deg, #c4ca9e, #979d66);
  box-shadow: 0 2px 0 #5d6338, 0 0 0 1px #6b7a2a, 0 0 18px rgba(156,255,58,.28), 0 10px 20px rgba(0,0,0,.35);
  animation: sick 3.4s ease-in-out infinite;
}
.card.mal::before { height: 12px; background: radial-gradient(circle at 50% 0, #6b7a2a 0 3.2px, transparent 3.7px) 0 0 / 13px 12px repeat-x, linear-gradient(#6b7a2a, #6b7a2a) 0 0 / 100% 3px no-repeat; }
.card.mal .cost { background: radial-gradient(circle at 35% 30%, #e6ff9a, #9cc23a 50%, #4f6a12); box-shadow: 0 0 0 2px #2d3a0a, 0 0 10px rgba(156,255,58,.5); }
.card.mal .desc { color: #2d3317; }
@keyframes sick { 0%, 100% { rotate: 0deg; filter: none; } 30% { rotate: -.6deg; } 55% { filter: hue-rotate(-12deg) saturate(1.3); } 70% { rotate: .5deg; } }
.card.mal.tilt { animation: none; }
/* slot-in snap */
.slot.snap { animation: slotsnap .5s var(--ease-out); }
.slot.snap .card { animation: cardsnap .35s var(--ease-out); }
@keyframes slotsnap { 0% { box-shadow: 0 0 0 0 rgba(226,182,92,.95), inset 0 -20px 26px -10px rgba(226,182,92,.8); } 100% { box-shadow: 0 0 0 16px rgba(226,182,92,0), inset 0 0 0 0 rgba(226,182,92,0); } }
@keyframes cardsnap { 0% { filter: brightness(1.12) drop-shadow(0 0 10px rgba(226,182,92,.9)); } 100% { filter: none; } }
/* empty pipeline slots */
.slot-ghost { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--f-silk); font-size: 9px; letter-spacing: .1em; color: rgba(226,182,92,.55); white-space: nowrap; pointer-events: none; }
.slot.next { border-color: rgba(226,182,92,.55); animation: nextslot 2s ease-in-out infinite; }
@keyframes nextslot { 50% { border-color: rgba(226,182,92,.2); box-shadow: inset 0 0 22px rgba(226,182,92,.08); } }
.soft.empty { gap: 10px; }
.soft.empty .disk-ghost { position: relative; flex: 0 0 auto; width: 20px; height: 22px; border: 1.5px dashed rgba(185,176,201,.55); border-radius: 2px 5px 2px 2px; }
.soft.empty .disk-ghost::after { content: ''; position: absolute; left: 4px; right: 4px; top: 2px; height: 6px; border: 1px dashed rgba(185,176,201,.4); }
.soft.empty b { font-weight: 600; color: var(--silk-dim); }
.soft.empty small { font-size: 11px; opacity: .75; }

/* ---------------------------------------------------------------- the board, alive */
.mb-panel { isolation: isolate; }









.fan { opacity: calc(1 - var(--ht) * .38); }
.fanblur { background: radial-gradient(circle, transparent 27%, rgba(150,140,170, calc(var(--ht) * .55)) 30%, rgba(110,100,130, calc(var(--ht) * .42)) 90%, transparent 95%); }
.mobo.dl .p-nic .led-blink { animation-duration: .09s; }
.p-nic.flash { animation: nicflash .4s var(--ease-out); }
@keyframes nicflash { 0% { filter: brightness(1.8) drop-shadow(0 0 8px #3fd8b0); } 100% { filter: none; } }
/* RGB: the whole board lights up */
.mb-panel:has(.mobo.rgb)::before {
  content: ''; position: absolute; left: 50%; top: 40px; width: 300px; height: 320px; translate: -50% 0; z-index: -1; border-radius: 20px;
  background: conic-gradient(from 0deg, #ff4f5e, #ffd36e, #6fe39a, #4cc3ff, #b98cff, #ff4f5e); filter: blur(18px); opacity: .5;
  animation: rgbhue 5s linear infinite;
}
@keyframes rgbhue { to { filter: blur(18px) hue-rotate(360deg); } }


/* wear: dust, grime, scorch */




/* ---------------------------------------------------------------- virus: dead state */
.virus-art.dead .vsprite { opacity: 0; }
.virus-art.dead::before { content: 'PURGED'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-silk); font-size: 13px; color: var(--ok); text-shadow: 0 0 10px var(--ok); z-index: 1; }

/* ---------------------------------------------------------------- job complete celebration */
.job-over { background: radial-gradient(circle at 50% 45%, rgba(226,182,92,.22), rgba(10,4,18,.72) 62%); }
.job-over[data-result="lost"] { background: radial-gradient(circle at 50% 45%, rgba(255,79,94,.22), rgba(10,4,18,.78) 62%); }
.job-over .box { position: relative; min-width: 400px; padding: 38px 48px 30px; border-width: 2px;
  background: linear-gradient(180deg, #2c1b42, #180d26); box-shadow: 0 0 0 1px #000, 0 0 60px rgba(226,182,92,.25), 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.job-over .box.lose { box-shadow: 0 0 0 1px #000, 0 0 60px rgba(255,79,94,.25), 0 30px 80px rgba(0,0,0,.6); }
.job-over h2 { font-size: 34px; text-shadow: 0 0 18px currentColor; animation: titlepunch .5s var(--ease-snap) both; }
@keyframes titlepunch { from { scale: 1.8; opacity: 0; } }
.stampbig { position: absolute; right: -34px; top: -24px; font-family: var(--f-silk); font-size: 22px; letter-spacing: .08em; color: var(--ok);
  border: 3px solid currentColor; border-radius: 4px; padding: 3px 12px; background: rgba(10,20,14,.85); rotate: 12deg;
  box-shadow: 0 0 18px rgba(111,227,154,.5), inset 0 0 10px rgba(111,227,154,.3); animation: stampin .42s .35s var(--ease-snap) both; }
.job-over .lose .stampbig { color: var(--mult); background: rgba(30,6,12,.85); box-shadow: 0 0 18px rgba(255,79,94,.5); }
@keyframes stampin { from { opacity: 0; scale: 2.6; } }
.burst { position: absolute; left: 50%; top: 44%; width: 0; height: 0; pointer-events: none; }
.bit { position: absolute; left: -4px; top: -3px; width: 8px; height: 6px; border-radius: 1px; background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0;
  animation: bit 1.6s cubic-bezier(.15,.7,.35,1) var(--dl) forwards; }
.bit.res { width: 13px; height: 4px; box-shadow: none; background: linear-gradient(90deg, #c9b48a 0 28%, var(--c) 28% 40%, #c9b48a 40% 55%, #3a2a1a 55% 68%, #c9b48a 68%); }
.bit.led { width: 6px; height: 6px; border-radius: 50%; }
.bit.chip { width: 10px; height: 9px; background: #141018; box-shadow: 0 0 0 1px var(--c); }
@keyframes bit { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } 45% { opacity: 1; transform: translate(calc(var(--x) * .7), var(--y)) rotate(calc(var(--r) * .5)) scale(1); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 340px)) rotate(var(--r)) scale(.9); } }

/* ---------------------------------------------------------------- screen transitions */
#app.crt-on { animation: crton .46s cubic-bezier(.2,.8,.2,1) both; }
@keyframes crton { 0% { clip-path: inset(49.7% 6% 49.7% 6%); } 30% { clip-path: inset(49% 0 49% 0); } 100% { clip-path: inset(0 0 0 0); } }
#crt { position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 55% 1.4% at 50% 50%, #fff, rgba(200,225,255,.7) 45%, transparent 75%), repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
#crt.on { animation: crtline .5s ease-out both; }
#crt.on.boot { animation-duration: .9s; }
@keyframes crtline { 0% { opacity: 1; transform: scaleY(1); } 30% { opacity: .9; transform: scaleY(14); } 100% { opacity: 0; transform: scaleY(70); } }
/* title boot: letters flicker on in sequence, pins power up */
.title-word span { display: inline-block; animation: letteron .6s steps(1) backwards; animation-delay: calc(.3s + var(--i) * 75ms); }
.title-word span.o { animation: letteron .6s steps(1) backwards, powerled 2.6s ease-in-out infinite; animation-delay: calc(.3s + var(--i) * 75ms), 1.4s; }
@keyframes letteron { 0% { opacity: 0; } 25% { opacity: 1; color: #fff; text-shadow: 0 0 26px #fff; } 45% { opacity: .15; } 65% { opacity: 1; } }
.title-chip .pins, .title-chip::before, .title-chip::after { animation: pinson 1s .15s ease-out backwards; }
@keyframes pinson { 0% { opacity: .15; filter: grayscale(1); } 60% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 6px #e2b65c); } 100% { opacity: 1; filter: none; } }
.title-chip { animation: chipfloat 6s ease-in-out infinite; }
@keyframes chipfloat { 50% { translate: 0 -4px; box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px #3a2a4e; } }
.tag-legend .tl, .title-actions, .title-meta, .howto { animation: bootline .5s var(--ease-out) backwards; }
.tag-legend .tl:nth-child(1) { animation-delay: 1.05s; } .tag-legend .tl:nth-child(2) { animation-delay: 1.12s; } .tag-legend .tl:nth-child(3) { animation-delay: 1.19s; }
.tag-legend .tl:nth-child(4) { animation-delay: 1.26s; } .tag-legend .tl:nth-child(5) { animation-delay: 1.33s; } .tag-legend .tl:nth-child(6) { animation-delay: 1.4s; }
.title-actions { animation-delay: 1.5s; } .title-meta { animation-delay: 1.6s; } .howto { animation-delay: 1.7s; }
/* choose: contract tickets are dealt onto the table */
body[data-fresh="1"] .offers .ticket { animation: deal .6s cubic-bezier(.2,1.15,.4,1) backwards; animation-delay: calc(var(--i, 0) * 120ms + 120ms); }
@keyframes deal { from { opacity: 0; transform: translate(-240px, 160px) rotate(-16deg) scale(.82); } }
.boot-node.now { box-shadow: 0 0 18px rgba(226,182,92,.25), inset 0 0 12px rgba(226,182,92,.1); }


/* keep the encounter within 900px: compact empty bays, slightly smaller gauge */
.soft.empty { padding-top: 6px; padding-bottom: 6px; }
.soft.empty small { display: none; }
.right .gauge-wrap { max-width: 172px; }
.lcd.ops, .lcd.mult, .lcd.thru, .lcd.bwmain { padding: 4px 8px 3px; }
.lcd.thru .num.seg { font-size: 46px; }
.lcd .num.seg { font-size: 36px; }
.readout { padding: 8px 12px; }

/* ---------------------------------------------------------------- shop: your rig, live previews, installs */
.shop-rig .mb-panel .mobo, .reward-rig .mobo { margin: 0 auto; }
.ghost-part { position: absolute; z-index: 6; display: none; background: center / 100% 100% no-repeat; border-radius: 4px; pointer-events: none;
  outline: 2px solid var(--ok); outline-offset: 2px; box-shadow: 0 0 22px rgba(111,227,154,.55); animation: ghostin .25s var(--ease-out); }
.ghost-part b { position: absolute; left: 50%; top: -9px; translate: -50% 0; white-space: nowrap; font: 400 8px var(--f-silk); letter-spacing: .06em; color: #082a14; background: var(--ok); padding: 2px 5px; border-radius: 2px; }
@keyframes ghostin { from { opacity: 0; transform: translateY(-10px) scale(1.06); } }
.sysinfo dd .dv { display: none; margin-left: 6px; font-weight: 700; padding: 0 4px; border-radius: 2px; animation: ghostin .2s var(--ease-out); }
.sysinfo dd .dv.up { color: #082a14; background: var(--ok); }
.sysinfo dd .dv.down { color: #fff; background: var(--mult); }
.shop-main .item[data-pslot] { transition: transform .15s var(--ease-out); }
.reward-left { display: flex; flex-direction: column; gap: 18px; }
.reward-rig .panel { padding: 10px; }
.fly { position: fixed; z-index: 320; pointer-events: none; zoom: var(--ui-scale, 1); transform-origin: 50% 50%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.fly > * { margin: 0 !important; }
.installed { animation: installed .75s var(--ease-out); z-index: 7; }
@keyframes installed {
  0% { transform: translateY(-16px) scale(1.14); filter: brightness(2.2) drop-shadow(0 0 14px #6fe39a); }
  45% { transform: translateY(2px) scale(.97); filter: brightness(1.4) drop-shadow(0 0 10px #6fe39a); }
  100% { transform: none; filter: none; }
}
.icon-btn.installed { animation: deckpulse .6s var(--ease-out); }
@keyframes deckpulse { 0% { transform: scale(1.3); box-shadow: 0 0 0 0 rgba(226,182,92,.9); color: var(--gold); border-color: var(--gold); } 100% { transform: none; box-shadow: 0 0 0 12px rgba(226,182,92,0); } }



.lcd.thru .num.seg { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px #000) drop-shadow(0 0 3px currentColor) drop-shadow(0 0 12px color-mix(in srgb, currentColor 55%, transparent)); }
.lcd.thru .silk-label { position: relative; z-index: 1; text-shadow: 0 0 3px #000, 0 0 6px #000; }



/* holo foil lives on the art band and the edge connector, never over the text */
.card.r-rare .foil, .card.up .foil {
  -webkit-mask: linear-gradient(180deg, #000 0, #000 36%, transparent 46%, transparent 86%, #000 94%);
          mask: linear-gradient(180deg, #000 0, #000 36%, transparent 46%, transparent 86%, #000 94%);
  opacity: .55;
}
.card.tilt .foil { opacity: .8; }
.card.r-rare .name { text-shadow: 0 1px 0 rgba(255,255,255,.6); }







.mb-panel:has(.mobo.rgb)::before { animation: none; }

.slot.next { animation: none; border-color: rgba(226,182,92,.5); }
.num.seg { filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 70%, transparent)); }
.lcd.thru .num.seg { filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 7px color-mix(in srgb, currentColor 70%, transparent)); }


#fx-layer .ember { box-shadow: none; background: radial-gradient(circle, #fff 0 25%, var(--c) 45%, transparent 72%); width: 7px; height: 7px; left: -3.5px; top: -3.5px; }
.card .glare { display: none; }
.card.tilt .glare { display: block; }
.slot .card .foil, .card.cant .foil { display: none !important; }

/* night threat modes */
.mode-badge { display: inline-block; font-family: var(--f-silk); font-size: 9px; letter-spacing: .08em; padding: 1px 6px; border-radius: 2px; margin-right: 4px; vertical-align: 1px; }
.mode-virus { background: var(--mult); color: #fff; }
.mode-hack { background: #ffd36e; color: #2a1200; }
.mode-corruption { background: #b98cff; color: #1d0f33; }
.mode-ddos { background: var(--t-net); color: #052a20; }
.meter { height: 8px; margin-top: 8px; background: #12091c; border: 1px solid var(--trace); position: relative; overflow: hidden; border-radius: 2px; }
.meter > i { position: absolute; inset: 0 auto 0 0; transition: width .5s var(--ease-out); }
.breach-meter > i { background: repeating-linear-gradient(135deg, #ffd36e 0 6px, #ff8a2a 6px 12px); }
.flood-meter > i { background: var(--t-net); }
.hp-label .b { color: var(--t-net); }
.ticket .rule.mode-rule { font-size: 12px; opacity: .9; }

/* disk space */
.disk-meter > i { background: var(--ops); }
.disk-meter.full > i { background: var(--mult); }
.disk-files { font-size: 12px; margin-top: 6px; line-height: 1.45; }
.disk-files span { float: right; font-family: var(--f-mono); }
.disk-clean { margin-top: 8px; width: 100%; font-size: 11px; padding: .45em .8em; }
.install-line .disk-warn { margin-top: 4px; color: #b22a37; font-weight: 600; font-size: 12px; }
.ticket.virus .install-line .disk-warn { color: var(--mult); }
.install-line.wont-fit { background: rgba(255,79,94,.08); }
.stage.install.disk-full .stage-hint { color: var(--mult); font-weight: 600; }
.stage.install.disk-full .stage-n { background: var(--mult); color: #fff; }
/* ================================================================ PERF: compositor-only motion
   Every looping animation below animates only transform/opacity (runs on the compositor, no
   main-thread paint). No filters or blend modes on big or moving layers. */
#bg-pulses { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
#bg-pulses .pulse { position: absolute; left: -10px; top: -1.5px; width: 20px; height: 3px; border-radius: 2px; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(226,182,92,0), rgba(226,182,92,.75) 70%, #fff3c4); }
#bg-pulses .pulse.teal { background: linear-gradient(90deg, rgba(63,216,176,0), rgba(63,216,176,.75) 70%, #d8fff4); }
#fx-layer { contain: strict; }
#fx-layer .ftrace { position: absolute; left: 0; top: 0; overflow: visible; will-change: transform, opacity; }
#fx-layer .ftrace path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
#fx-layer .fx-flash { position: absolute; inset: 0; mix-blend-mode: normal; will-change: opacity; }
/* hit flash: an overlay fading, not an animated box-shadow */
.readout::after { content: ''; position: absolute; inset: -1px; border-radius: 6px; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 40px rgba(226,182,92,.7); }
.readout.bigflash { animation: none; }
.readout.bigflash::after { animation: fadeflash .6s var(--ease-out); }
@keyframes fadeflash { 0% { opacity: 1; } 100% { opacity: 0; } }
.readout.hitstop .lcd.thru .num.seg { filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 7px color-mix(in srgb, currentColor 70%, transparent)); transform: scale(1.32); transition: transform .08s; }
/* download bar: static stripes + a light sweep moved by transform */
.progress.dl > i { animation: none; }
.progress.dl::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: sweep 1.6s linear infinite; will-change: transform; }
.stage.install.done .progress.dl::before { display: none; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
/* cards: foil is static (no looping background animation); tilt only fades it up */
.card.r-rare .foil, .card.up .foil { animation: none; background-position: 30% 30%; }
.card.tilt .foil { opacity: .75; }
.card.tilt { will-change: transform; }
.card .glare { mix-blend-mode: normal; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.32), rgba(255,255,255,0) 50%); }
.card.tilt .glare { will-change: transform; }
.card .art::after { display: none; }
.card.mal { animation: sickrock 3.4s ease-in-out infinite; }
.card.mal.tilt { animation: none; }
@keyframes sickrock { 0%, 100% { rotate: 0deg; } 30% { rotate: -.6deg; } 70% { rotate: .5deg; } }
.slot.next { animation: none; }
/* board bits: opacity/transform only */
.led-blink, .fiberglow { animation-name: ledop; }
@keyframes ledop { 50% { opacity: .15; } }
.rgbline, .rgbstick, .bubbles { animation: none; }
.mb-panel:has(.mobo.rgb)::before { animation: none; filter: none; inset: 30px -6px -6px; left: 0; width: auto; height: auto; translate: none;
  background: radial-gradient(60% 40% at 0% 20%, rgba(255,79,94,.35), transparent 70%), radial-gradient(60% 40% at 100% 30%, rgba(76,195,255,.35), transparent 70%),
              radial-gradient(60% 40% at 30% 100%, rgba(111,227,154,.3), transparent 70%), radial-gradient(60% 40% at 100% 90%, rgba(185,140,255,.35), transparent 70%); }
.mobo.throttle { animation: none; }
.mobo.throttle::after { animation: throbop 1s ease-in-out infinite alternate; }
@keyframes throbop { from { opacity: .35; } to { opacity: 1; } }
.thermal-panel.over { animation: none; }
/* title: transform/opacity only */
.title-chip { animation: chipbob 6s ease-in-out infinite; will-change: transform; }
@keyframes chipbob { 50% { transform: translateY(-4px); } }
.title-chip .sheen::before { left: 0; animation: sheenx 6s ease-in-out infinite; will-change: transform; }
@keyframes sheenx { 0%, 60% { transform: translateX(-140%); } 100% { transform: translateX(420%); } }
.title-word span.o { position: relative; animation: letteron .6s steps(1) backwards; animation-delay: calc(.3s + var(--i) * 75ms); text-shadow: 0 0 18px rgba(226,182,92,.6); }
.title-word span.o::after { content: 'O'; position: absolute; inset: 0; color: transparent; text-shadow: 0 0 34px rgba(226,182,92,.95), 0 0 6px #fff3d0; opacity: 0; animation: glowop 2.6s 1.4s ease-in-out infinite; }
@keyframes glowop { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #bg-pulses { display: none; } .card.mal { animation: none; } }
/* tilt: transform is written inline by juice.js; the glare is a 200% gradient whose position moves */
.hand .card.tilt, .pick-row .card.tilt, .deck-grid .card.tilt, .item .card.tilt, .hand .card.cant.tilt, .hand .card.selected.tilt { transition: transform .06s linear, box-shadow .2s; }
.card .glare { display: block; visibility: hidden; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,.34), rgba(255,255,255,0) 34%) 50% 0% / 200% 200% no-repeat; transition: opacity .15s; }
.card.tilt .glare { visibility: visible; opacity: 1; }
/* LED digits: one SVG per number, on its own compositor layer (digit changes never repaint the LCD panel) */
.num.seg { will-change: transform; }
.segs { display: block; height: 1em; overflow: visible; transform: none; }
.segs .ghost { fill: currentColor; opacity: .085; }
.segs .run { animation: blink .5s steps(2) infinite; }
.segs .run.r1 { animation-delay: .17s; } .segs .run.r2 { animation-delay: .34s; }
/* the encounter stays one promoted layer so screen-shake never re-rasters the whole screen */
.enc { will-change: transform; }
/* removed effects whose markup is still emitted by screens.js / components.js (kept hidden, zero cost) */
.mb-flow, .mobo .haze, .mobo .rgbwash, .readout .flames { display: none !important; }

.pop.xops { background: #fff; color: #1673a8; box-shadow: 0 0 0 2px var(--ops); }

/* deal terms on job tickets */
.ticket .deal { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 6px 16px; background: var(--ink); color: var(--silk); font-size: 12px; }
.ticket .deal b { font-family: var(--f-silk); font-weight: 400; font-size: 10px; letter-spacing: .08em; padding: 1px 6px; border-radius: 2px; background: var(--gold); color: var(--ink); }
.ticket .deal span { color: var(--silk-dim); }
.ticket .deal-rush b { background: var(--heat); }
.ticket .deal-big b { background: var(--ops); }
.ticket .deal-penalty b { background: var(--mult); color: #fff; }
.ticket .deal-heavy b { background: var(--t-net); }
.ticket .deal-hot b { background: #ff8a2a; }
.ticket .deal-easy b { background: var(--ok); }
.ticket .deal-standard b { background: var(--silk-dim); }

/* patch (upgrade) picker: the card plus exactly what the patch changes */
.patch-pick { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: var(--card-w); }
.patch-diff { background: rgba(111,227,154,.08); border: 1px solid rgba(111,227,154,.45); border-radius: 3px; padding: 6px 8px; font-family: var(--f-mono); font-size: 11px; line-height: 1.45; color: var(--silk-dim); }
.patch-diff .silk-label { display: block; color: var(--ok); margin-bottom: 2px; }
.patch-diff b { color: var(--ok); font-weight: 700; }

/* ---- Parts are your deck: grant lists, deck groups, firmware, reward picks */
.mod-card .grants, #tip .s.grants { color: #9fe0ff; font-family: var(--f-mono); font-size: 11px; margin-top: 6px; }
.deck-group { margin-bottom: 16px; }
.deck-group-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-family: var(--f-silk); font-size: 11px; color: var(--silk); letter-spacing: .04em; }
.deck-group-h .ref { color: var(--gold); }
.deck-group-h .dim { font-family: var(--f-mono); font-size: 11px; }
.deck-group.junk .deck-group-h { color: var(--mult); }
.fw-badge { font-family: var(--f-mono); font-size: 10px; color: #082a14; background: var(--ok); border-radius: 2px; padding: 1px 5px; }
.part-pick { display: grid; grid-template-columns: 54px 1fr auto; gap: 8px 12px; align-items: center; background: var(--mask-2); border: 1px solid var(--trace); border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; cursor: pointer; text-align: left; }
.part-pick:hover:not(.off) { outline: 2px solid var(--ok); outline-offset: 2px; }
.part-pick.off { opacity: .5; cursor: not-allowed; }
.part-pick .mc-art.hw { width: 54px; height: 40px; background: var(--art) center / contain no-repeat; }
.part-pick h4 { margin: 2px 0; font-size: 15px; }
.part-pick .ref { font-family: var(--f-silk); font-size: 10px; color: var(--gold); }
.part-pick .price { font-family: var(--f-mono); color: var(--gold); font-weight: 700; font-size: 16px; }
.part-pick .price.no { color: var(--mult); }
.part-pick .pp-cards { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.opt-fw ul { margin: 6px 0 0; padding-left: 16px; font-family: var(--f-mono); font-size: 11px; color: var(--silk-dim); }
.opt-fw ul b { color: var(--ok); }
.codex-card { display: flex; flex-direction: column; gap: 4px; width: var(--card-w); }
.codex-card .from { font-family: var(--f-mono); font-size: 10.5px; color: var(--silk-dim); line-height: 1.35; }
.sysinfo .deck-diffs { font-family: var(--f-mono); font-size: 11.5px; line-height: 1.7; }
.sysinfo .deck-diffs .dv { display: none; margin-top: 6px; animation: ghostin .2s var(--ease-out); }
.sysinfo .deck-diffs .dv b { font-family: var(--f-silk); font-weight: 400; font-size: 10px; color: var(--silk); margin-right: 4px; }
.sysinfo .deck-diffs i { font-style: normal; font-weight: 700; padding: 0 4px; border-radius: 2px; margin: 0 2px 2px 0; display: inline-block; }
.sysinfo .deck-diffs i.up { color: #082a14; background: var(--ok); }
.sysinfo .deck-diffs i.down { color: #fff; background: var(--mult); }

/* hoverable card names (tooltip shows the card) */
.cardref { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.partref { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
#tip.cardtip { padding: 0; background: none; border: none; box-shadow: none; max-width: none; }
#tip .card.tip-card { pointer-events: none; transform: none; margin: 0; }
#tip .tg { display: block; color: var(--silk); margin-top: 2px; }
#tip .tg i { font-style: normal; color: #9fe0ff; margin-right: 4px; }
.rig-deck { font-family: var(--f-mono); font-size: 11px; color: var(--silk-dim); line-height: 1.5; margin-top: 8px; }

/* reorderable mods (between jobs) */
.mod-cell { position: relative; }
.mod-cell[draggable="true"] { cursor: grab; }
.mod-cell.dragging { opacity: .45; }
.mod-cell.drop-target > .chip { outline: 2px dashed var(--gold); outline-offset: 2px; }
.mod-move { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; z-index: 4; }
.mod-cell:hover .mod-move, .mod-cell:focus-within .mod-move { opacity: 1; }
.mod-move .mm { width: 20px; height: 18px; padding: 0; font-size: 9px; line-height: 1; border: 1px solid var(--gold-2); background: var(--mask); color: var(--gold); border-radius: 2px; cursor: pointer; }
.mod-move .mm:disabled { opacity: .3; cursor: default; }

/* ---------------------------------------------------------------- live CPU temperature */
.gauge-wrap { --hc: #4cc3ff; --pd: 2.4s; }
.g-read .t { color: var(--hc); text-shadow: 0 0 10px var(--hc), 0 0 2px #000; position: relative; z-index: 1; transition: color .3s; }
.g-glow { position: absolute; left: 50%; top: 42%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--hc) 0%, transparent 62%); opacity: .18; animation: g-breathe var(--pd) ease-in-out infinite; will-change: transform, opacity; }
@keyframes g-breathe { 0%, 100% { transform: scale(.82); opacity: .12; } 50% { transform: scale(1.08); opacity: .32; } }
.heat-cool .g-glow { opacity: .1; }
/* heat shimmer rising off the number once it's warm */
.g-read .waves { position: absolute; left: 50%; top: -14px; width: 46px; margin-left: -23px; height: 18px; pointer-events: none; display: none; }
.heat-warm .waves, .heat-strain .waves, .heat-over .waves { display: block; }
.g-read .waves i { position: absolute; bottom: 0; width: 2px; height: 10px; border-radius: 2px; background: var(--hc); opacity: 0; animation: g-wave calc(var(--pd) * .9) ease-out infinite; will-change: transform, opacity; }
.g-read .waves i:nth-child(1) { left: 10px; } .g-read .waves i:nth-child(2) { left: 22px; animation-delay: calc(var(--pd) * -.3); } .g-read .waves i:nth-child(3) { left: 34px; animation-delay: calc(var(--pd) * -.6); }
@keyframes g-wave { 0% { transform: translateY(6px) scaleY(.6); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-12px) scaleY(1.2) skewX(-14deg); opacity: 0; } }
/* the needle strains when it's hot */
.gauge .g-needle { transform-box: fill-box; transform-origin: 50% 100%; }
.heat-strain .gauge .g-needle { animation: g-jitter .16s steps(2) infinite; }
.heat-over .gauge .g-needle { animation: g-jitter .09s steps(2) infinite; }
@keyframes g-jitter { 0% { transform: rotate(-2.5deg); } 100% { transform: rotate(2.5deg); } }
/* over the limit: alarm */
.g-alarm { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); font-family: var(--f-silk); font-weight: 400; font-size: 8px; letter-spacing: .14em;
  color: #fff; background: var(--mult); padding: 1px 6px; border-radius: 2px; opacity: 0; pointer-events: none; }
.heat-over .g-alarm { animation: g-alarm .5s steps(2) infinite; }
@keyframes g-alarm { 0% { opacity: 1; } 100% { opacity: .25; } }
.heat-over .g-read .t { animation: g-shake .12s linear infinite; }
@keyframes g-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, .5px); } 75% { transform: translate(1.5px, -.5px); } }
.heat-over .g-glow { opacity: .45; }
/* change feedback during the cascade */
.gauge-wrap.bump .g-read .t { animation: g-bump .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes g-bump { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
.gauge-wrap.frost .g-read .t { animation: g-frost .5s ease-out; }
@keyframes g-frost { 0% { transform: scale(1.18); filter: drop-shadow(0 0 8px #bfe9ff); } 100% { transform: scale(1); filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .g-glow, .g-read .waves i, .gauge .g-needle, .g-read .t, .g-alarm { animation: none !important; }
  .heat-over .g-alarm { opacity: 1; }
}

/* cooling: blue badge on cards that cool, blue pops when heat drops */
.card .heat.cool { color: #9fdcff; background: rgba(20,60,110,.85); }
.pop.coolpop { background: #bfe9ff; color: #0b3550; box-shadow: 0 0 0 2px var(--ops); }