/* Computer and console repair pages */
.section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.rep-hero { padding: clamp(2rem, 4.5vw, 3.75rem) 0; }
.rep-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 15ch; }
.rep-hero .lead { margin-top: 1rem; }
.rep-checks { display: grid; gap: 1rem 2rem; margin: 1.5rem 0 0; }
@media (min-width: 800px) { .rep-checks { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Repair bench (computer) ---------- */
.bench { display: grid; gap: 1.25rem; align-items: center; grid-template-columns: minmax(0, 1fr); padding: clamp(1rem, 2.5vw, 1.5rem); background: rgba(30,30,30,.82); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
@media (min-width: 560px) { .bench { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.pc { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
@media (max-width: 559px) { .pc { max-width: 230px; } }
.pc-case { fill: #161618; stroke: #3c3c42; stroke-width: 2; }
.pc-board { fill: none; stroke: #2c2c31; stroke-width: 1.5; stroke-dasharray: 4 5; }
@property --pk { syntax: "<color>"; inherits: true; initial-value: #74747c; }
.pc .part { --pk: #74747c; }
.pc .part, .pc .part rect:not(.hdd), .pc .gpu, .pc .cage, .pc .psu, .pc .part .fan__ring { fill: #1c1c20; stroke: var(--pk); stroke-width: 1.5; transition: stroke .35s, fill .35s; }
.pc .hdd { fill: #1c1c20; stroke: #55555c; stroke-width: 1.2; }
.pc .psu__vent { fill: none; stroke: #3a3a40; stroke-width: 1.5; stroke-linecap: round; }
.fan__ring { fill: #141416; stroke: #74747c; stroke-width: 1.5; }
.fan__blades { fill: #2a2a30; stroke: #6e6e76; stroke-width: 1; animation: rep-spin 1.4s linear infinite; }
.fan__hub { fill: #2a2a30; stroke: #6e6e76; stroke-width: 1; }
.ram-slot { fill: none; stroke: #3a3a40; stroke-width: 1.2; stroke-dasharray: 3 3; }
.ram-new, .ssd-new { opacity: 0; transition: transform .9s cubic-bezier(.3,.7,.2,1), opacity .5s, stroke .35s, fill .35s; }
.ram-new { transform: translateY(-120px); }
.ssd-new { transform: translateX(200px); }
.ssd-old { transition: transform .9s cubic-bezier(.6,0,.4,1), opacity .6s, stroke .35s, fill .35s; }
.bugs circle { fill: #ff8a80; opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .35s; }
.scan { opacity: 0; }
.pc-ok circle { fill: #10262b; stroke: var(--accent); stroke-width: 2; }
.pc-ok path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pc-ok { opacity: 0; transition: opacity .4s; }

/* stage: diagnose */
.pc[data-stage="diagnose"] .scan, .pc[data-stage="found"] .scan { opacity: 1; animation: rep-scan 1.5s linear infinite; }
/* stage: found (fault shows) */
.pc[data-scn="drive"][data-stage="found"] .ssd-old { stroke: #ff8a80; fill: #2a1716; animation: rep-alarm .5s ease-in-out infinite alternate; }
.pc[data-scn="malware"][data-stage="found"] .bugs circle { opacity: 1; transform: scale(1); animation: rep-alarm .5s ease-in-out infinite alternate; }
.pc[data-scn="upgrade"][data-stage="found"] .ram1, .pc[data-scn="upgrade"][data-stage="found"] .ram2 { stroke: #ff8a80; fill: #2a1716; }
.pc[data-scn="upgrade"][data-stage="found"] .ram-slot { stroke: #ffb3ab; }
/* stage: repair and after */
.pc[data-scn="drive"]:is([data-stage="repair"], [data-stage="test"], [data-stage="ready"]) .ssd-old { transform: translateX(-200px); opacity: 0; }
.pc[data-scn="drive"]:is([data-stage="repair"], [data-stage="test"], [data-stage="ready"]) .ssd-new { transform: none; opacity: 1; transition-delay: .5s; }
.pc[data-scn="upgrade"]:is([data-stage="repair"], [data-stage="test"], [data-stage="ready"]) .ram-new { transform: none; opacity: 1; }
.pc[data-scn="malware"][data-stage="repair"] .bugs circle { opacity: 0; transform: scale(2.2); transition-duration: .6s; }
.pc[data-scn="malware"][data-stage="repair"] .bugs circle:nth-child(2) { transition-delay: .3s; }
.pc[data-scn="malware"][data-stage="repair"] .bugs circle:nth-child(3) { transition-delay: .6s; }
.pc[data-scn="malware"][data-stage="repair"] .bugs circle:nth-child(4) { transition-delay: .9s; }
.pc[data-scn="malware"][data-stage="repair"] .bugs circle:nth-child(5) { transition-delay: 1.2s; }
.pc[data-stage="repair"] .ram-new, .pc[data-stage="repair"] .ssd-new { stroke: var(--violet); }
/* stage: test */
.pc[data-stage="test"] .part { animation: rep-check .6s ease both; animation-delay: calc(var(--i) * .2s); }
.pc[data-stage="test"] .fan__blades { animation-duration: .45s; }
/* stage: ready */
.pc[data-stage="ready"] .part { --pk: rgba(69,232,255,.75); }
.pc[data-stage="ready"] .pc-ok { opacity: 1; }
.pc.no-anim *, .pc.no-anim { transition: none !important; }

.bench__panel { min-width: 0; }
.bench__case { margin: 0 0 .9rem; font-weight: 500; }
.bench__case-label { display: block; color: var(--ink-2); font-size: .85rem; font-weight: 400; }
#bench-case { font-size: 1.15rem; }
.bench__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.bench__steps li { position: relative; padding: .35rem 0 .35rem 1.75rem; color: #7d7d84; font-size: .95rem; transition: color .3s; }
.bench__steps li::before { content: ""; position: absolute; left: 0; top: .72rem; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #4a4a50; transition: background .3s, border-color .3s; }
.bench__steps li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 1.45rem; width: 2px; height: calc(100% - .95rem); background: #2e2e33; }
.bench__steps li.is-done { color: var(--ink-2); }
.bench__steps li.is-done::before { background: var(--accent); border-color: var(--accent); }
.bench__steps li.is-now { color: var(--ink); }
.bench__steps li.is-now::before { border-color: var(--accent); animation: rep-blink 1s ease-in-out infinite; }
.bench__log { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .925rem; min-height: 3.1em; }

/* ---------- TV (console) ---------- */
.tvbox { padding: clamp(1rem, 2.5vw, 1.5rem); background: rgba(30,30,30,.82); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.tv { display: block; width: 100%; height: auto; }
.tv__bezel { fill: #0d0d0f; stroke: #3c3c42; stroke-width: 2; }
.tv__screen { fill: #08080a; }
.tv__stand, .console { fill: #1c1c20; stroke: #55555c; stroke-width: 1.5; }
.tv__base { stroke: #55555c; stroke-width: 4; stroke-linecap: round; }
.console__strip { stroke: #ff8a80; stroke-width: 3; stroke-linecap: round; transition: stroke .5s; }
.console__btn { fill: none; stroke: #6e6e76; stroke-width: 1.5; }
.port { fill: #2a1716; stroke: #ff8a80; stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.cable { fill: none; stroke: #6e6e76; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sparks { opacity: 0; }
.sparks path { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.scr { opacity: 0; transition: opacity .35s; }
.nosig__box { fill: rgba(0,0,0,.7); stroke: rgba(255,255,255,.35); }
.nosig { fill: #fff; font: 500 15px var(--font-body); text-anchor: middle; }
.sky { fill: #0e1b2e; }
.cloud rect { fill: #24364f; }
.ground { stroke: #45e8ff; stroke-width: 2; }
.ground-dash { stroke: #2b4a5a; stroke-width: 2; stroke-dasharray: 6 14; }
.runner rect { fill: var(--accent); }
.runner .runner__eye { fill: #0e1b2e; }
.obstacle rect { fill: var(--violet); }
.score { fill: #cfe9ff; font: 500 13px var(--font-body); text-anchor: end; font-variant-numeric: tabular-nums; }

.tv[data-stage="static"] .scr--static { opacity: 1; }
.tv[data-stage="static"] .console__strip { animation: rep-alarm .6s ease-in-out infinite alternate; }
.tv[data-stage="repair"] .port { animation: rep-alarm .35s ease-in-out infinite alternate; }
.tv[data-stage="repair"] .sparks { opacity: 1; animation: rep-spark .35s steps(2) infinite; }
.tv[data-stage="repair"] .cable, .tv[data-stage="playing"] .cable { stroke: var(--accent); stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease .4s, stroke .4s; }
.tv[data-stage="repair"] .console__strip { stroke: #ffc46b; }
.tv[data-stage="playing"] .port { fill: #10262b; stroke: var(--accent); }
.tv[data-stage="playing"] .console__strip { stroke: var(--accent); }
.tv[data-stage="playing"] .scr--game { opacity: 1; }
.tv[data-stage="playing"] .obstacle { animation: rep-obstacle 2.2s linear infinite; }
.tv[data-stage="playing"] .runner { animation: rep-jump 2.2s linear infinite; }
.tv[data-stage="playing"] .leg--a { animation: rep-leg .3s steps(2) infinite; }
.tv[data-stage="playing"] .leg--b { animation: rep-leg .3s steps(2) infinite reverse; }
.tv[data-stage="playing"] .cloud--a { animation: rep-cloud 9s linear infinite; }
.tv[data-stage="playing"] .cloud--b { animation: rep-cloud 13s linear infinite -6s; }
.tv[data-stage="playing"] .ground-dash { animation: rep-dash .55s linear infinite; }
.cloud--a { transform: translate(520px, 60px); }
.cloud--b { transform: translate(520px, 92px); }
.obstacle { transform: translateX(486px); }
.tv.no-anim *, .tv.no-anim { transition: none !important; }

.tv-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tv-steps li { position: relative; padding-top: .7rem; font-size: .875rem; color: #7d7d84; transition: color .3s; }
.tv-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: #2e2e33; transition: background .3s; }
.tv-steps li.is-done { color: var(--ink-2); }
.tv-steps li.is-done::before { background: rgba(69,232,255,.45); }
.tv-steps li.is-now { color: var(--ink); }
.tv-steps li.is-now::before { background: var(--accent); }

/* ---------- Thermal (liquid metal) ---------- */
.thermbox { margin: 0; padding: clamp(1rem, 2.5vw, 1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.thermal { display: block; width: 100%; height: auto; }
.th-board { fill: #12161a; stroke: #2f3a40; stroke-width: 1.5; }
.th-trace { fill: none; stroke: #23303a; stroke-width: 2; }
.th-chip { fill: #181d22; stroke: #34414a; }
.th-apu { fill: #1c2228; stroke: #6e7a84; stroke-width: 1.5; }
.th-die { fill: #2a333b; stroke: #9aa6b0; stroke-width: 1.2; }
.th-heat--hot { opacity: calc(1 - var(--t)); }
.th-heat--cool { opacity: var(--t); }
.th-heat { mix-blend-mode: screen; }
.th-fan .fan__blades { animation: none; }
.thermbox__gauge { height: 8px; margin: 1.1rem 0 .6rem; border-radius: 4px; background: #2a2a30; overflow: hidden; }
.thermbox__bar { display: block; height: 100%; width: 92%; border-radius: 4px; background: #ff5a3c; transition: width .15s, background .15s; }
.thermbox__state { margin: 0 0 .9rem; min-height: 1.6em; font-size: .95rem; color: var(--ink); }
.thermbox__slider { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--ink-2); }
.thermbox__slider input { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; }

@keyframes rep-spin { to { transform: rotate(360deg); } }
@keyframes rep-scan { from { transform: translateY(0); } to { transform: translateY(410px); } }
@keyframes rep-alarm { from { opacity: 1; } to { opacity: .45; } }
@keyframes rep-check { 0% { --pk: #74747c; } 40% { --pk: #ffffff; } 100% { --pk: rgba(69,232,255,.75); } }
@keyframes rep-blink { 50% { background: var(--accent); } }
@keyframes rep-spark { 50% { transform: rotate(40deg) scale(.7); } }
@keyframes rep-obstacle { from { transform: translateX(486px); } to { transform: translateX(14px); } }
@keyframes rep-jump { 0%, 62% { transform: translateY(0); } 69% { transform: translateY(-36px); } 76% { transform: translateY(-46px); } 83% { transform: translateY(-36px); } 89.5%, 100% { transform: translateY(0); } }
@keyframes rep-leg { 50% { transform: translateY(-3px); } }
@keyframes rep-cloud { from { transform: translate(520px, var(--cy, 60px)); } to { transform: translate(-60px, var(--cy, 60px)); } }
@keyframes rep-dash { to { stroke-dashoffset: -20; } }
.cloud--a { --cy: 60px; }
.cloud--b { --cy: 92px; }

@media (prefers-reduced-motion: reduce) {
  .fan__blades, .scan, .bugs circle, .bench__steps li::before, .console__strip, .port, .sparks, .runner, .obstacle, .leg--a, .leg--b, .cloud--a, .cloud--b, .ground-dash, .pc .part { animation: none !important; }
  .pc *, .tv *, .bench__steps li, .tv-steps li { transition: none !important; }
  .tv[data-stage="playing"] .obstacle { transform: translateX(300px); }
}
.ma-link { margin: .9rem 0 0; font-size: .95rem; color: var(--ink-2); }
.ma-link a { color: var(--accent); font-weight: 500; }

/* Diagnose-first section (computer repair) */
.dx { display: grid; gap: 1.75rem 3rem; align-items: start; }
@media (min-width: 900px) { .dx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.dx-steps { list-style: none; counter-reset: dx; margin: 0; padding: 0; display: grid; gap: .75rem; }
.dx-steps li { counter-increment: dx; position: relative; padding: .85rem 1rem .85rem 3.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.dx-steps li::before { content: counter(dx); position: absolute; left: 1rem; top: .85rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: #10262b; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 500; font-size: .85rem; }
.dx-steps strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: .1rem; }
.dx-steps a { color: var(--accent); }

/* Console (lying flat) */
.console__top { fill: #232328; stroke: #55555c; stroke-width: 1.5; stroke-linejoin: round; }
.console__vent { fill: none; stroke: #3c3c43; stroke-width: 1.6; stroke-linecap: round; }
.console__slot { stroke: #0b0b0d; stroke-width: 3; stroke-linecap: round; }
.console__usb { fill: #0e0e10; stroke: #4a4a50; stroke-width: 1; }
.console__foot { fill: #121214; }