@font-face {
    font-family: "Chakra Petch";
    src: local("Bahnschrift"), local("Arial Narrow");
}

:root {
    color-scheme: dark;
    --ink: #eef7ef;
    --muted: #93a99b;
    --panel: #0d1a16;
    --panel-2: #12231d;
    --line: rgba(177, 255, 150, .16);
    --green: #8dff57;
    --green-deep: #3ca91d;
    --amber: #ffb84d;
    --red: #ff5d5d;
    --cyan: #56e4ff;
    --violet: #a779ff;
    --radius: 18px;
    font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body, #app, main { min-height: 100%; margin: 0; }
body {
    min-width: 320px;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 12%, rgba(94, 188, 60, .14), transparent 28rem),
        radial-gradient(circle at 88% 78%, rgba(54, 213, 166, .08), transparent 26rem),
        #07100d;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.eyebrow { margin: 0 0 8px; color: var(--green); font: 700 .72rem/1.2 "Chakra Petch", sans-serif; letter-spacing: .17em; }

.topbar {
    height: 76px;
    padding: 0 clamp(18px, 4vw, 64px);
    border-bottom: 1px solid var(--line);
    background: rgba(7, 16, 13, .9);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
}

.brand { border: 0; padding: 0; color: inherit; background: none; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; }
.brand > span:last-child { display: grid; }
.brand strong { font: 700 1.05rem/1 "Chakra Petch", sans-serif; letter-spacing: .09em; }
.brand small { color: var(--muted); margin-top: 5px; font-size: .68rem; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; position: relative; background: var(--green); color: #0a170e; clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: -4px 9px; border-left: 2px solid var(--green); border-right: 2px solid var(--green); }
.brand-mark::after { transform: rotate(90deg); }
.brand-mark b { font: 800 .9rem "Chakra Petch", sans-serif; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.build-meter { width: 150px; display: grid; gap: 5px; }
.build-meter span { color: var(--muted); font: 700 .64rem "Chakra Petch", sans-serif; letter-spacing: .1em; }
.build-meter i, .goal-card > i { height: 5px; overflow: hidden; background: #1e332a; border-radius: 10px; }
.build-meter i b, .goal-card > i b { height: 100%; display: block; background: linear-gradient(90deg, var(--green-deep), var(--green)); box-shadow: 0 0 12px var(--green); transition: width .45s ease; }
.icon-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #0b1713; cursor: pointer; font: 700 .62rem "Chakra Petch", sans-serif; letter-spacing: .07em; }
.icon-button:hover { color: var(--green); border-color: rgba(141, 255, 87, .45); }

.map-screen, .game-screen { flex: 1; width: min(1480px, 100%); margin: 0 auto; padding: clamp(30px, 5vw, 64px); }
.map-copy { max-width: 740px; margin-bottom: 36px; }
.map-copy h1 { margin: 0; font: 700 clamp(2.2rem, 5vw, 4.6rem)/.95 "Chakra Petch", sans-serif; letter-spacing: -.04em; }
.map-copy > p:not(.eyebrow) { max-width: 650px; margin: 18px 0; color: var(--muted); line-height: 1.65; }
.map-legend { display: flex; gap: 18px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.map-legend span { display: flex; align-items: center; gap: 7px; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; }
.done-dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.ready-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.locked-dot { background: #4b5b52; }
.map-layout { display: grid; grid-template-columns: minmax(620px, 1.7fr) minmax(300px, .72fr); gap: 24px; align-items: stretch; }

.motherboard-map {
    min-height: 520px;
    border: 1px solid rgba(141, 255, 87, .24);
    border-radius: 22px;
    padding: 66px 38px 36px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 49.5%, rgba(141, 255, 87, .055) 50%, transparent 50.5%),
        linear-gradient(transparent 49.5%, rgba(141, 255, 87, .055) 50%, transparent 50.5%),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(141, 255, 87, .035) 39px 40px),
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(141, 255, 87, .035) 39px 40px),
        #0a2117;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .28);
}
.motherboard-map::before, .motherboard-map::after { content: ""; position: absolute; border: 2px solid rgba(141, 255, 87, .1); width: 180px; height: 80px; transform: rotate(-12deg); }
.motherboard-map::before { left: -50px; top: 150px; }
.motherboard-map::after { right: -40px; bottom: 80px; }
.board-brand { position: absolute; left: 30px; top: 22px; display: flex; gap: 11px; align-items: baseline; z-index: 2; }
.board-brand span { font: 700 1rem "Chakra Petch", sans-serif; letter-spacing: .12em; }
.board-brand small { color: #5d8770; font: 600 .62rem "Chakra Petch", sans-serif; letter-spacing: .1em; }
.socket-decoration { position: absolute; right: 34px; top: 20px; width: 76px; height: 30px; border: 1px solid #355c48; display: flex; gap: 8px; align-items: center; justify-content: center; }
.socket-decoration i { width: 7px; height: 7px; border: 1px solid #7aad8e; }
.level-grid { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 48px 24px; align-content: center; }
.level-node { min-height: 142px; border: 1px solid rgba(141, 255, 87, .18); border-radius: 13px; color: var(--ink); background: rgba(7, 21, 14, .78); position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.level-node:not(:nth-child(5n))::after { content: ""; position: absolute; width: 25px; right: -25px; top: 50%; height: 2px; background: #315c42; box-shadow: 0 0 8px rgba(141, 255, 87, .25); }
.level-node:nth-child(n+6)::before { content: ""; position: absolute; height: 49px; left: 50%; top: -49px; width: 2px; background: #315c42; }
.level-node:hover:not(:disabled) { transform: translateY(-5px); border-color: var(--green); box-shadow: 0 0 25px rgba(141, 255, 87, .12); }
.level-node .node-number { position: absolute; left: 9px; top: 8px; color: #638271; font: 700 .65rem "Chakra Petch", sans-serif; }
.level-node strong { color: #91b59f; font: 700 1.05rem "Chakra Petch", sans-serif; letter-spacing: .06em; }
.level-node small { margin-top: 10px; color: #557263; font: 700 .54rem "Chakra Petch", sans-serif; letter-spacing: .12em; }
.node-pin { width: 22px; height: 22px; margin-bottom: 13px; border: 2px solid #446f57; background: #152a20; transform: rotate(45deg); }
.level-node.complete { border-color: rgba(141, 255, 87, .45); background: rgba(43, 91, 43, .38); }
.level-node.complete strong, .level-node.complete small { color: var(--green); }
.level-node.complete .node-pin { background: var(--green); border-color: #d3ffc2; box-shadow: 0 0 18px var(--green); }
.level-node.complete::after, .level-node.complete::before { background: var(--green); box-shadow: 0 0 12px var(--green); }
.level-node.ready { border-color: var(--amber); box-shadow: 0 0 25px rgba(255, 184, 77, .14); animation: readyPulse 2s infinite; }
.level-node.ready .node-pin { background: var(--amber); border-color: #ffdfad; box-shadow: 0 0 18px var(--amber); }
.level-node.ready strong, .level-node.ready small { color: var(--amber); }
.level-node.locked { opacity: .48; cursor: not-allowed; filter: saturate(.25); }
.circuit-pulse { position: absolute; inset: auto 28px 18px; height: 2px; background: linear-gradient(90deg, transparent, var(--green), transparent); opacity: .22; transform: translateX(-100%); animation: trace 6s infinite; }
.circuit-pulse.full-power { opacity: .8; animation-duration: 2s; }

.rig-panel { border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: linear-gradient(160deg, #101d19, #09110f); display: flex; flex-direction: column; }
.rig-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.rig-heading > div { display: grid; gap: 5px; }
.rig-heading span, .next-part span { color: var(--muted); font: 700 .58rem "Chakra Petch", sans-serif; letter-spacing: .15em; }
.rig-heading strong { font: 700 .72rem "Chakra Petch", sans-serif; color: var(--green); letter-spacing: .06em; }
.rig-heading > b { color: var(--green); font: 700 1.4rem "Chakra Petch", sans-serif; }
.pc-case { width: min(290px, 88%); height: 330px; margin: 25px auto; border: 7px solid #27332e; border-radius: 8px; position: relative; background: #07100e; box-shadow: 9px 12px 0 #030705, inset 0 0 40px #000; overflow: hidden; }
.case-glass { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.035), transparent 38%); border: 1px solid #385045; z-index: 5; pointer-events: none; }
.pc-board { opacity: .12; transition: opacity .5s, filter .5s; position: absolute; left: 28px; top: 44px; width: 185px; height: 215px; border: 2px solid #3c704e; background: repeating-linear-gradient(45deg, rgba(141,255,87,.07) 0 1px, transparent 1px 16px), #0e2b1a; }
.pc-board.installed { opacity: 1; }
.pc-board > span, .pc-psu, .case-fan, .io-glow, .power-led { opacity: .12; filter: grayscale(1); transition: opacity .5s, filter .5s, box-shadow .5s; }
.pc-board > span.installed, .pc-psu.installed, .case-fan.installed, .io-glow.installed, .power-led.installed { opacity: 1; filter: none; }
.pc-cpu { position: absolute; width: 48px; height: 48px; left: 55px; top: 35px; background: #b7c4b4; border: 4px solid #6f806f; color: #273129; display: grid; place-items: center; font: 700 .5rem "Chakra Petch", sans-serif; }
.pc-cooler { position: absolute; width: 64px; height: 64px; left: 47px; top: 27px; border: 5px solid #263c32; border-radius: 50%; background: #0c1511; }
.pc-cooler i, .case-fan i, .fan-device i { position: absolute; inset: 21%; border: 4px dashed var(--cyan); border-radius: 50%; animation: spin 2.5s linear infinite; }
.pc-ram { position: absolute; width: 8px; height: 64px; top: 28px; background: linear-gradient(#a6ff6e 0 18%, #265835 18% 82%, #d1b546 82%); }
.ram-one { right: 45px; }.ram-two { right: 31px; }
.pc-ssd { position: absolute; right: 29px; top: 112px; width: 58px; height: 15px; color: #fff; background: #3c596d; font: 700 .38rem "Chakra Petch"; display: grid; place-items: center; }
.pc-gpu { position: absolute; left: 12px; top: 142px; width: 153px; height: 47px; background: #28332e; border: 2px solid #596860; display: flex; align-items: center; gap: 9px; padding-left: 10px; }
.pc-gpu i, .gpu-device i { width: 30px; height: 30px; border: 3px dashed var(--violet); border-radius: 50%; animation: spin 3s linear infinite; }
.pc-gpu b { margin-left: auto; margin-right: 8px; color: var(--violet); font: 700 .45rem "Chakra Petch"; }
.pc-psu { position: absolute; left: 18px; bottom: 18px; width: 95px; height: 45px; background: #242b28; border: 1px solid #5e6964; display: grid; place-items: center; color: var(--amber); font: 700 .55rem "Chakra Petch"; }
.case-fan { position: absolute; width: 42px; height: 42px; border: 3px solid #32433b; border-radius: 50%; }.fan-top { right: 18px; top: 20px; }.fan-rear { right: 18px; top: 70px; }
.case-fan i { inset: 19%; border-color: var(--green); }
.io-glow { position: absolute; right: 13px; bottom: 26px; height: 40px; width: 8px; background: var(--cyan); border-radius: 6px; box-shadow: 0 0 12px var(--cyan); }
.power-led { position: absolute; left: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pc-case.booted { box-shadow: 9px 12px 0 #030705, 0 0 40px rgba(141,255,87,.22), inset 0 0 40px rgba(30, 131, 53, .2); }
.next-part { padding: 15px; margin-top: auto; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(141, 255, 87, .035); }
.next-part strong { font: 700 .9rem "Chakra Petch", sans-serif; }

.game-screen { padding-top: 24px; }
.level-bar { min-height: 72px; margin-bottom: 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.back-button, .how-button { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); min-height: 38px; padding: 0 14px; cursor: pointer; font: 700 .65rem "Chakra Petch"; letter-spacing: .08em; }
.back-button:hover, .how-button:hover { color: var(--green); border-color: var(--green); }
.level-title { margin-left: 22px; display: grid; }
.level-title span { color: var(--green); font: 700 .58rem "Chakra Petch"; letter-spacing: .13em; }
.level-title h1 { margin: 3px 0 0; font: 700 1.45rem "Chakra Petch"; }
.level-stats { margin-left: auto; display: flex; gap: 32px; text-align: right; }
.level-stats div { display: grid; }
.level-stats span { color: var(--muted); font: 700 .55rem "Chakra Petch"; letter-spacing: .1em; }
.level-stats strong { font: 700 1.25rem "Chakra Petch"; }.level-stats strong.danger { color: var(--red); animation: readyPulse 1s infinite; }
.game-layout { display: grid; grid-template-columns: minmax(190px, .6fr) minmax(450px, 1.35fr) minmax(250px, .72fr); gap: 20px; align-items: start; }
.objective-panel, .booster-panel { border: 1px solid var(--line); border-radius: 16px; background: rgba(13,26,22,.86); padding: 20px; }
.objective-panel h2, .booster-panel h2 { font: 700 1.35rem "Chakra Petch"; margin: 0 0 8px; }
.objective-panel > p:not(.eyebrow) { color: var(--muted); font-size: .78rem; line-height: 1.55; }
.goal-card { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #08130f; display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; }
.goal-card > div { display: grid; }.goal-card > div span, .hazard-goal span:not(.hazard-mini) { color: var(--muted); font: 700 .56rem "Chakra Petch"; letter-spacing: .1em; }.goal-card > div strong, .hazard-goal strong { font: 700 1rem "Chakra Petch"; }
.goal-card > i { grid-column: 1 / -1; }
.goal-obstacle-count { grid-column:1 / -1;display:grid!important;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding-top:11px;border-top:1px solid rgba(255,184,77,.18); }
.goal-obstacle-count .hazard-mini { grid-row:1;grid-column:1;width:27px;height:27px; }
.goal-obstacle-count > span:not(.hazard-mini) { grid-row:1;grid-column:2; }
.goal-obstacle-count > strong { grid-row:1;grid-column:3;color:#ffc973;font-size:.76rem!important;white-space:nowrap; }
.hazard-goal { margin: 10px 0 18px; padding: 12px; border: 1px solid rgba(255,184,77,.19); border-radius: 10px; display: flex; gap: 10px; align-items: center; }
.hazard-goal > div { display: grid; }
.hazard-mini { width: 30px; height: 30px; border-radius: 7px; background: var(--amber); }.hazard-mini.virus { background: var(--violet); }.hazard-mini.heat { background: var(--red); }.hazard-mini.cable { background: #8b7358; }.hazard-mini.dust { background: #c0a26b; }
.hazard-dot { display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px currentColor; }.hazard-dot.virus{background:var(--violet)}.hazard-dot.heat{background:var(--red)}.hazard-dot.cable{background:#b99b72}.hazard-dot.dust{background:#d5b878}
.how-button { width: 100%; }
.board-zone { max-width: 690px; width: 100%; margin: auto; }
.status-strip { min-height: 40px; padding: 10px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; color: var(--muted); background: #091510; display: flex; align-items: center; gap: 9px; font: 600 .7rem "Chakra Petch"; }
.status-strip.success { color: var(--green); }.status-light { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.puzzle-board { aspect-ratio: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(4px, .65vw, 8px); padding: clamp(7px, 1vw, 13px); border: 1px solid rgba(141,255,87,.23); border-radius: 0 0 18px 18px; background: linear-gradient(145deg, #10251c, #07100d); box-shadow: 0 20px 50px rgba(0,0,0,.32); }
.puzzle-board.targeting { box-shadow: 0 0 0 2px var(--amber), 0 20px 50px rgba(0,0,0,.32); }
.tile { min-width: 0; padding: 0; border: 1px solid rgba(255,255,255,.065); border-radius: clamp(7px, 1vw, 12px); background: #15251f; position: relative; cursor: pointer; overflow: hidden; display: grid; place-items: center; transition: transform .14s, border-color .14s, filter .14s; }
.tile:hover { transform: translateY(-2px); filter: brightness(1.15); border-color: rgba(255,255,255,.25); }
.tile.selected { transform: scale(.91); border: 3px solid #fff; box-shadow: 0 0 18px rgba(255,255,255,.5); z-index: 3; }
.tile.locked-tile { cursor: not-allowed; }
.piece-cpu { background: radial-gradient(circle at 50% 40%, #534d3b, #201d16); }.piece-ram { background: radial-gradient(circle at 50% 40%, #123a29, #091c14); }.piece-gpu { background: radial-gradient(circle at 50% 40%, #312244, #171021); }.piece-ssd { background: radial-gradient(circle at 50% 40%, #17384c, #0b1c26); }.piece-power { background: radial-gradient(circle at 50% 40%, #4d2d16, #241409); }.piece-fan { background: radial-gradient(circle at 50% 40%, #10394a, #071b23); }
.part-icon { width: 72%; height: 72%; position: relative; display: grid; place-items: center; filter: drop-shadow(0 5px 5px rgba(0,0,0,.36)); }
.part-icon b { font: 800 clamp(.38rem, .78vw, .62rem) "Chakra Petch"; letter-spacing: .03em; z-index: 2; }
.part-icon.cpu { width: 62%; height: 62%; background: #c9b36b; border: 5px solid #686044; color: #292719; box-shadow: inset 0 0 0 2px #e9d98e; }
.part-icon.cpu::before, .part-icon.cpu::after { content: ""; position: absolute; inset: -7px 5px; border-left: 3px dotted #cdb65c; border-right: 3px dotted #cdb65c; }.part-icon.cpu::after { transform: rotate(90deg); }
.part-icon.ram { width: 84%; height: 42%; border: 3px solid #3cbd72; border-bottom: 5px solid #d6bd4f; border-radius: 3px; background: #17623b; display: flex; justify-content: space-evenly; }
.part-icon.ram i { width: 12%; height: 46%; background: #151b18; border: 1px solid #88caa5; }.part-icon.ram b { position: absolute; top: -40%; color: #6ef0a4; }
.part-icon.gpu { width: 88%; height: 64%; border: 3px solid #66517b; background: #28232d; display: flex; justify-content: center; gap: 5px; }
.part-icon.gpu i { width: 34%; aspect-ratio: 1; border: 3px dashed #bb88fb; border-radius: 50%; animation: spin 4s linear infinite; }.part-icon.gpu b { position: absolute; right: 3px; bottom: 1px; color: #d0b0ff; }
.part-icon.ssd { width: 76%; height: 65%; border: 3px solid #547a91; border-radius: 5px; background: #21475c; color: #bceeff; }.part-icon.ssd i { position: absolute; bottom: 4px; left: 13%; width: 72%; height: 5px; background: repeating-linear-gradient(90deg, #e2c85e 0 6px, transparent 6px 9px); }
.part-icon.power { width: 62%; height: 70%; border: 4px solid #ce7a31; border-radius: 8px 8px 16px 16px; background: #5d3418; color: #ffd5a1; }.part-icon.power i { position: absolute; top: 13%; width: 18%; height: 42%; border: 2px solid #ffb267; border-radius: 5px; }
.part-icon.fan { width: 72%; height: 72%; border: 4px solid #38798c; border-radius: 50%; background: #102b35; color: #7be5ff; }.part-icon.fan i { position: absolute; inset: 20%; border: 5px dashed var(--cyan); border-radius: 50%; animation: spin 3s linear infinite; }.part-icon.fan b { position: absolute; bottom: -20%; }
.special-lineblaster { box-shadow: inset 0 0 14px var(--amber), 0 0 13px rgba(255,184,77,.65); }.special-lineblaster::after { content: "↕"; position: absolute; color: #fff; font-size: 1.25rem; text-shadow: 0 0 6px var(--amber); z-index: 6; }
.special-rgbcore { animation: rgbGlow 1.4s infinite; }.special-rgbcore::after { content: "RGB"; position: absolute; color: #fff; font: 800 .55rem "Chakra Petch"; padding: 3px; background: #111; border-radius: 3px; z-index: 6; }
.obstacle { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.obstacle.dust { background: radial-gradient(circle at 22% 20%, rgba(227,202,151,.8) 0 5%, transparent 6%), radial-gradient(circle at 70% 65%, rgba(200,170,110,.75) 0 7%, transparent 8%), rgba(119,91,55,.35); }
.obstacle.heat { border: 3px solid var(--red); background: linear-gradient(0deg, rgba(255,66,43,.32), transparent 55%); box-shadow: inset 0 -8px 16px rgba(255,57,32,.5); }.obstacle.heat::after { content: "≈"; position: absolute; right: 5px; top: 0; color: #ff8c65; font-size: 1.1rem; }
.obstacle.cable::before, .obstacle.cable::after { content: ""; position: absolute; left: -10%; top: 45%; width: 120%; height: 8px; border-radius: 8px; background: #93785b; box-shadow: 0 2px 0 #34291f; transform: rotate(35deg); }.obstacle.cable::after { transform: rotate(-35deg); background: #5d7f87; }
.obstacle.virus { border: 3px solid #d067ff; background: repeating-linear-gradient(45deg, rgba(189,73,255,.32) 0 4px, transparent 4px 9px); }.obstacle.virus::after { content: "!"; position: absolute; right: 4px; top: 2px; color: #f5d5ff; font-weight: 800; }
.board-hint { margin: 10px 0 0; color: var(--muted); text-align: center; font: 600 .65rem "Chakra Petch"; min-height: 17px; }

.booster-panel { display: grid; gap: 9px; }
.booster-panel h2 { margin-bottom: 6px; }
.booster { width: 100%; min-height: 68px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 11px; background: #0a1511; color: var(--ink); display: grid; grid-template-columns: 52px 1fr 25px; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.booster:hover:not(:disabled), .booster.active { border-color: var(--amber); background: rgba(255,184,77,.06); transform: translateX(-3px); }
.booster:disabled { opacity: .36; cursor: not-allowed; }
.booster > span:nth-child(2) { display: grid; gap: 3px; }.booster > span strong { font: 700 .7rem "Chakra Petch"; }.booster > span small { color: var(--muted); font-size: .6rem; line-height: 1.3; }.booster em { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #0a150e; font: normal 800 .68rem "Chakra Petch"; }
.booster-device { width: 48px; height: 40px; position: relative; display: flex; align-items: center; justify-content: center; }
.gpu-device { border: 2px solid #765a8d; background: #29222f; gap: 3px; }.gpu-device i { width: 14px; height: 14px; border-width: 2px; }.gpu-device b { position: absolute; bottom: 0; right: 2px; font-size: .35rem; color: #d9b7ff; }
.cpu-device { width: 38px; height: 38px; margin: auto; background: #d7bd69; border: 5px solid #665b3e; color: #2d291c; }.cpu-device::before, .cpu-device::after { content: ""; position: absolute; inset: -7px 3px; border-left: 2px dotted #d7bd69; border-right: 2px dotted #d7bd69; }.cpu-device::after { transform: rotate(90deg); }.cpu-device b { z-index: 2; font: 800 .46rem "Chakra Petch"; }
.mouse-device { width: 27px; height: 40px; margin: auto; border: 3px solid #8ea59a; border-radius: 50% 50% 43% 43%; background: #28362f; }.mouse-device::before { content: ""; position: absolute; left: 50%; top: 0; height: 15px; width: 2px; background: #8ea59a; }.mouse-device i { position: absolute; left: calc(50% - 2px); top: 5px; width: 4px; height: 8px; border-radius: 3px; background: var(--green); }
.fan-device { width: 40px; height: 40px; margin: auto; border: 3px solid #4a7480; border-radius: 6px; background: #122932; }.fan-device i { border-color: var(--cyan); }
.booster-note { color: var(--muted); font-size: .58rem; line-height: 1.45; margin: 4px 0 0; }

.game-footer { min-height: 46px; padding: 0 clamp(18px, 4vw, 64px); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #60786b; font: 600 .56rem "Chakra Petch"; letter-spacing: .08em; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 20px; overflow-y: auto; background: rgba(2,8,5,.84); backdrop-filter: blur(12px); display: grid; place-items: center; }
.modal-card { width: min(500px, 100%); padding: clamp(24px, 4vw, 40px); border: 1px solid rgba(141,255,87,.28); border-radius: 22px; background: linear-gradient(145deg, #14251e, #09130f); box-shadow: 0 30px 90px rgba(0,0,0,.55); position: relative; text-align: center; }
.modal-card h2 { margin: 4px 0 12px; font: 700 clamp(1.7rem, 4vw, 2.5rem)/1.05 "Chakra Petch"; }.modal-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }.modal-card > small { display: block; margin-top: 18px; color: #6f877a; font-size: .68rem; }
.primary-button { min-height: 50px; width: 100%; padding: 0 20px; border: 0; border-radius: 10px; background: var(--green); color: #071009; cursor: pointer; font: 800 .75rem "Chakra Petch"; letter-spacing: .08em; box-shadow: 0 0 24px rgba(141,255,87,.2); }.primary-button:hover { filter: brightness(1.12); }
.text-button { border: 0; background: none; color: var(--muted); margin-top: 8px; min-height: 42px; cursor: pointer; font: 700 .65rem "Chakra Petch"; }.text-button:hover { color: #fff; }
.age-chip { width: 94px; height: 94px; margin: -75px auto 26px; display: grid; place-items: center; background: var(--green); border: 8px solid #17321e; color: #071009; border-radius: 50%; font: 800 2rem "Chakra Petch"; box-shadow: 0 0 35px rgba(141,255,87,.35); }
.age-card { margin-top: 55px; }.age-card .primary-button { margin-top: 12px; }
.installed-stamp { display: inline-block; margin-bottom: 18px; padding: 6px 10px; border: 2px solid var(--green); color: var(--green); transform: rotate(-2deg); font: 800 .62rem "Chakra Petch"; letter-spacing: .12em; }
.install-visual { width: 136px; height: 136px; margin: 0 auto 24px; border: 2px solid #4c765e; background: #0a1c12; display: grid; place-items: center; position: relative; transform: rotate(45deg); box-shadow: inset 0 0 25px rgba(141,255,87,.12), 0 0 30px rgba(141,255,87,.12); }.install-visual strong { transform: rotate(-45deg); color: var(--green); font: 800 1rem "Chakra Petch"; }.install-visual i { position: absolute; inset: 13px; border: 1px dashed #4c765e; }.install-beam { position: absolute; inset: -100% 40%; background: linear-gradient(transparent, var(--green), transparent); opacity: .3; animation: installBeam 1.4s infinite; transform: rotate(-45deg); }
.tip-card { margin: 22px 0 12px; padding: 18px; border: 1px solid rgba(86,228,255,.2); border-radius: 12px; background: rgba(86,228,255,.04); text-align: left; }.tip-card span { color: var(--cyan); font: 700 .58rem "Chakra Petch"; letter-spacing: .12em; }.tip-card p { margin: 7px 0 0; color: #cadbd1; font-size: .82rem; line-height: 1.55; }
.reward-line { margin-bottom: 18px; display: flex; justify-content: space-between; color: var(--muted); font: 700 .65rem "Chakra Petch"; }.reward-line strong { color: var(--amber); }
.warning-icon { width: 70px; height: 70px; margin: 0 auto 20px; border: 4px solid var(--red); border-radius: 50%; display: grid; place-items: center; color: var(--red); font: 800 2rem "Chakra Petch"; }
.modal-close { position: absolute; right: 15px; top: 12px; border: 0; background: none; color: var(--muted); font-size: 2rem; cursor: pointer; }
.help-card { text-align: left; }.help-card ol { list-style: none; padding: 0; margin: 22px 0; counter-reset: help; display: grid; gap: 13px; }.help-card li { counter-increment: help; display: grid; grid-template-columns: 35px 1fr; gap: 2px 12px; }.help-card li::before { content: counter(help); grid-row: 1/3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #21392c; color: var(--green); font: 700 .7rem "Chakra Petch"; }.help-card li b { font: 700 .8rem "Chakra Petch"; }.help-card li span { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.setting-row { width: 100%; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }.setting-row span { display: grid; gap: 3px; }.setting-row b { font: 700 .8rem "Chakra Petch"; }.setting-row small { color: var(--muted); font-size: .65rem; }.setting-row strong { color: var(--green); font: 700 .66rem "Chakra Petch"; }
.privacy-box { margin: 20px 0; padding: 15px; border-radius: 10px; background: rgba(141,255,87,.05); text-align: left; }.privacy-box b { color: var(--green); font: 700 .75rem "Chakra Petch"; }.privacy-box p { margin: 7px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.birth-date-field { margin: 18px 0 4px; text-align: left; }.birth-date-field label { display:block;margin-bottom:7px;color:var(--muted);font:800 .58rem "Chakra Petch";letter-spacing:.1em;text-transform:uppercase }.birth-date-field input { width:100%;min-height:52px;padding:10px 13px;border:1px solid rgba(117,239,255,.28);border-radius:12px;color:#fff;background:#0b1125;color-scheme:dark;font:700 .9rem "Chakra Petch";outline:none }.birth-date-field input:focus { border-color:#70eaff;box-shadow:0 0 0 3px rgba(112,234,255,.12) }.age-validation { margin:9px 0 0!important;color:#ff9caf!important;font-size:.72rem!important }.game-footer a,.privacy-box a { color:#71eaff;text-decoration:underline;text-underline-offset:3px }
.danger-button { border: 1px solid rgba(255,93,93,.35); border-radius: 8px; background: none; color: var(--red); padding: 10px 14px; cursor: pointer; font: 700 .6rem "Chakra Petch"; }.reset-confirm { border: 1px solid rgba(255,93,93,.25); border-radius: 10px; padding: 12px; }.reset-confirm p { font-size: .72rem; }.reset-confirm button { border: 0; border-radius: 6px; padding: 8px; margin: 3px; color: #fff; background: #29372f; cursor: pointer; font: 700 .58rem "Chakra Petch"; }.reset-confirm button:first-of-type { background: #8e3030; }
.boot-loader { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--muted); font: 700 .7rem "Chakra Petch"; letter-spacing: .08em; }.boot-chip { width: 76px; height: 76px; display: grid; place-items: center; background: var(--green); color: #071009; border: 8px solid #193622; animation: readyPulse 1.3s infinite; }.boot-chip span { font: 800 1rem "Chakra Petch"; }

/* Modern dimensional UI */
:root {
    --ink: #f7f9ff;
    --muted: #9daac8;
    --panel: rgba(13, 18, 38, .78);
    --panel-2: rgba(20, 27, 55, .78);
    --line: rgba(151, 170, 255, .18);
    --green: #61f4ff;
    --green-deep: #6a70ff;
    --amber: #ffc766;
    --red: #ff607c;
    --cyan: #55e8ff;
    --violet: #a883ff;
    --radius: 24px;
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgba(86, 101, 255, .23), transparent 32rem),
        radial-gradient(circle at 88% 28%, rgba(189, 67, 255, .14), transparent 34rem),
        radial-gradient(circle at 60% 95%, rgba(33, 219, 220, .12), transparent 30rem),
        linear-gradient(145deg, #050714 0%, #070b1d 48%, #070913 100%);
    background-attachment: fixed;
}

.app-shell { position: relative; isolation: isolate; }
.ambient-effects { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-effects i { position: absolute; width: 34vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .12; animation: ambientFloat 15s ease-in-out infinite alternate; }
.ambient-effects i:nth-child(1) { left: -12vw; top: 8vh; background: #556bff; }
.ambient-effects i:nth-child(2) { right: -9vw; top: 28vh; background: #b13cff; animation-delay: -5s; }
.ambient-effects i:nth-child(3) { left: 40vw; bottom: -22vw; background: #22d8df; animation-delay: -9s; }

.topbar {
    height: 82px;
    border-color: rgba(255,255,255,.08);
    background: rgba(5, 8, 23, .72);
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.brand-mark { border-radius: 13px; clip-path: none; background: linear-gradient(145deg, #79fbff, #7c62ff); box-shadow: 0 0 28px rgba(97,244,255,.32), inset 0 1px rgba(255,255,255,.7); transform: perspective(140px) rotateY(-8deg); }
.brand-mark::before, .brand-mark::after { display: none; }
.brand strong { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-weight: 800; letter-spacing: .05em; }
.brand small { color: #93a4c9; }
.build-meter i, .goal-card > i { height: 7px; background: rgba(255,255,255,.08); }
.build-meter i b, .goal-card > i b { background: linear-gradient(90deg, #7669ff, #51e7ff); box-shadow: 0 0 16px rgba(81,231,255,.65); }
.icon-button { border-color: rgba(255,255,255,.1); border-radius: 13px; color: #c7d1eb; background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.07); transition: .2s ease; }
.icon-button:hover { color: #fff; border-color: rgba(97,244,255,.5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(33,210,255,.12); }

.map-screen, .game-screen { width: min(1540px, 100%); }
.map-copy { position: relative; max-width: 810px; }
.map-copy::after { content: "NEXT-GEN PC PUZZLE"; position: absolute; left: min(73vw, 880px); top: 4px; width: max-content; padding: 8px 13px; border: 1px solid rgba(97,244,255,.18); border-radius: 999px; color: #8290b7; background: rgba(12,18,42,.62); font: 700 .58rem "Chakra Petch"; letter-spacing: .14em; }
.map-copy h1 { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-weight: 850; letter-spacing: -.055em; background: linear-gradient(100deg, #fff 10%, #b8c7ff 55%, #68f1ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 20px 55px rgba(99,99,255,.14); }
.map-copy > p:not(.eyebrow) { color: #acb7d2; font-size: 1rem; }
.eyebrow { color: #69efff; }
.map-legend { color: #9eaaca; }
.done-dot { background: #56f5c8; box-shadow: 0 0 13px #56f5c8; }
.ready-dot { background: #9d7bff; box-shadow: 0 0 13px #9d7bff; }
.locked-dot { background: #59637f; }

.motherboard-map {
    border-color: rgba(117, 147, 255, .25);
    background:
        radial-gradient(circle at 22% 35%, rgba(106,91,255,.17), transparent 22%),
        radial-gradient(circle at 80% 72%, rgba(55,220,230,.11), transparent 26%),
        linear-gradient(90deg, transparent 49.5%, rgba(120,150,255,.05) 50%, transparent 50.5%),
        linear-gradient(transparent 49.5%, rgba(120,150,255,.05) 50%, transparent 50.5%),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(133,158,255,.035) 39px 40px),
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(133,158,255,.035) 39px 40px),
        linear-gradient(145deg, rgba(19,29,62,.93), rgba(8,13,31,.97));
    box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -40px 90px rgba(0,0,0,.35), 0 35px 90px rgba(0,0,0,.34), 0 0 70px rgba(72,85,220,.08);
}
.motherboard-map::before, .motherboard-map::after { border-color: rgba(91,226,255,.12); }
.board-brand small { color: #7283ad; }
.socket-decoration { border-color: rgba(123,151,234,.34); border-radius: 8px; background: rgba(255,255,255,.025); }
.socket-decoration i { border-color: #6eefff; box-shadow: 0 0 8px rgba(110,239,255,.5); }
.level-node {
    border-color: rgba(150,169,255,.15);
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(255,255,255,.065), rgba(255,255,255,.015));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 15px 30px rgba(0,0,0,.24);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
}
.level-node:not(:nth-child(5n))::after, .level-node:nth-child(n+6)::before { background: linear-gradient(90deg, #534f91, #45c4d0); box-shadow: 0 0 12px rgba(83,226,242,.25); }
.level-node:hover:not(:disabled) { transform: perspective(500px) translateY(-8px) rotateX(4deg); border-color: #63ebff; box-shadow: inset 0 1px rgba(255,255,255,.15), 0 22px 45px rgba(26,36,104,.46), 0 0 30px rgba(73,223,255,.14); }
.level-node strong { color: #aeb9d4; }
.level-node small, .level-node .node-number { color: #74809e; }
.node-pin { border: 1px solid #7180ab; border-radius: 7px; background: linear-gradient(145deg, #273356, #11182f); box-shadow: inset 0 1px rgba(255,255,255,.18), 5px 7px 12px rgba(0,0,0,.4); }
.level-node.complete { border-color: rgba(78,245,202,.42); background: linear-gradient(145deg, rgba(78,245,202,.15), rgba(55,77,116,.12)); }
.level-node.complete strong, .level-node.complete small { color: #6cf5d3; }
.level-node.complete .node-pin { background: linear-gradient(145deg, #81ffe0, #3acda6); border-color: #b8ffed; box-shadow: 0 0 24px rgba(86,245,204,.7), 5px 7px 12px rgba(0,0,0,.35); }
.level-node.ready { border-color: #987aff; background: linear-gradient(145deg, rgba(146,112,255,.18), rgba(56,221,237,.06)); box-shadow: 0 20px 45px rgba(64,47,146,.25), inset 0 1px rgba(255,255,255,.16); animation: modernReady 2.2s ease-in-out infinite; }
.level-node.ready .node-pin { background: linear-gradient(145deg, #bb8dff, #655bff); border-color: #d8c6ff; box-shadow: 0 0 25px rgba(157,123,255,.8), 5px 7px 12px rgba(0,0,0,.32); }
.level-node.ready strong, .level-node.ready small { color: #ccbaff; }
.circuit-pulse { background: linear-gradient(90deg, transparent, #6a74ff, #64efff, transparent); opacity: .52; }

.rig-panel, .objective-panel, .booster-panel {
    border-color: rgba(146,164,255,.18);
    background: linear-gradient(150deg, rgba(25,32,61,.84), rgba(8,13,30,.84));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 28px 70px rgba(0,0,0,.28);
    backdrop-filter: blur(22px);
}
.rig-panel { border-radius: 26px; }
.rig-heading strong, .rig-heading > b { color: #65efff; }
.pc-case { border: 7px solid #29334e; border-radius: 16px; background: linear-gradient(145deg, #0d1428, #050813); box-shadow: 16px 18px 32px rgba(0,0,0,.48), -2px -2px 0 rgba(134,160,255,.2), inset 0 0 55px #02040b; transform: perspective(900px) rotateX(var(--rig-rx,1deg)) rotateY(var(--rig-ry,-5deg)); transform-style: preserve-3d; overflow: visible; transition: transform .16s ease-out, box-shadow .25s; cursor: grab; touch-action: none; }
.case-glass { background: linear-gradient(118deg, rgba(140,209,255,.13), transparent 32%, rgba(255,255,255,.025) 54%, transparent 70%); border-color: rgba(139,175,255,.28); }
.pc-board { border-color: #5752a3; background: repeating-linear-gradient(45deg, rgba(105,240,255,.08) 0 1px, transparent 1px 16px), #101939; box-shadow: inset 0 0 25px rgba(70,103,255,.13); }
.pc-case.booted { box-shadow: 16px 18px 32px rgba(0,0,0,.48), 0 0 52px rgba(86,226,255,.3), inset 0 0 50px rgba(86,90,255,.22); }
.next-part { border-color: rgba(107,236,255,.18); border-radius: 14px; background: linear-gradient(120deg, rgba(90,94,255,.09), rgba(70,223,255,.045)); }

.game-screen { padding-top: 22px; }
.level-bar { min-height: 78px; border-color: rgba(255,255,255,.08); }
.back-button, .how-button { border-color: rgba(145,164,255,.18); border-radius: 12px; color: #b4c0dc; background: rgba(20,27,53,.68); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.back-button:hover, .how-button:hover { color: #fff; border-color: #5de7ff; box-shadow: 0 10px 24px rgba(50,200,255,.1); }
.level-title span { color: #65ebff; }
.level-title h1, .objective-panel h2, .booster-panel h2, .modal-card h2 { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -.025em; }
.game-layout { grid-template-columns: minmax(205px, .56fr) minmax(490px, 1.42fr) minmax(270px, .72fr); gap: 22px; }
.objective-panel, .booster-panel { border-radius: 22px; }
.goal-card { border-color: rgba(113,236,255,.18); border-radius: 16px; background: linear-gradient(145deg, rgba(106,94,255,.1), rgba(8,14,31,.7)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.hazard-goal { border-color: rgba(255,184,91,.22); border-radius: 14px; background: rgba(255,172,74,.035); }

.status-strip { min-height: 46px; border-color: rgba(126,153,255,.24); border-radius: 17px 17px 0 0; color: #b1beda; background: linear-gradient(90deg, rgba(19,26,53,.94), rgba(14,21,44,.94)); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.status-strip.success { color: #64f1cf; }
.puzzle-board {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: clamp(5px, .68vw, 9px);
    border-color: rgba(126,153,255,.25);
    border-radius: 0 0 24px 24px;
    background: radial-gradient(circle at 50% 20%, rgba(93,97,218,.14), transparent 45%), linear-gradient(145deg, #111934, #070b19);
    box-shadow: inset 0 1px rgba(255,255,255,.07), inset 0 -30px 50px rgba(0,0,0,.3), 0 30px 70px rgba(0,0,0,.4), 0 0 60px rgba(85,106,255,.08);
    perspective: 900px;
    transition: box-shadow .3s, border-color .3s;
}
.puzzle-board.targeting-gpu { border-color: #b27aff; box-shadow: 0 0 0 2px rgba(178,122,255,.38), 0 0 55px rgba(160,87,255,.22), 0 30px 70px rgba(0,0,0,.4); }
.puzzle-board.targeting-cpu { border-color: #ffd36a; box-shadow: 0 0 0 2px rgba(255,211,106,.35), 0 0 55px rgba(255,181,71,.18), 0 30px 70px rgba(0,0,0,.4); }
.puzzle-board.targeting-mouse { border-color: #67f6ff; box-shadow: 0 0 0 2px rgba(103,246,255,.35), 0 0 55px rgba(71,221,255,.18), 0 30px 70px rgba(0,0,0,.4); }
.tile {
    z-index: 1;
    border-color: rgba(255,255,255,.1);
    border-radius: clamp(10px, 1vw, 15px);
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025));
    box-shadow: inset 0 1px rgba(255,255,255,.16), inset 0 -12px 18px rgba(0,0,0,.22), 0 9px 18px rgba(0,0,0,.28);
    transform: translateZ(0);
    transform-style: preserve-3d;
    animation: tileMaterialize .34s cubic-bezier(.2,.8,.2,1) both;
}
.tile::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(130deg, rgba(255,255,255,.15), transparent 33%); pointer-events: none; }
.tile:hover:not(:disabled) { transform: translateY(-6px) scale(1.04) rotateX(4deg); filter: brightness(1.16) saturate(1.12); border-color: rgba(187,228,255,.5); box-shadow: inset 0 1px rgba(255,255,255,.25), 0 16px 26px rgba(0,0,0,.35), 0 0 18px rgba(92,218,255,.12); z-index: 3; }
.tile:disabled { cursor: wait; }
.tile.selected { transform: translateY(-4px) scale(.93); border: 2px solid #f8fbff; box-shadow: 0 0 0 5px rgba(105,238,255,.2), 0 0 28px rgba(105,238,255,.42); }
.tile.swipe-armed { z-index:5;border-color:#6df1ff;transform:scale(.92);box-shadow:0 0 0 3px rgba(100,237,255,.2),0 0 25px rgba(92,225,255,.48); }
.tile.swipe-source { z-index:6;border-color:#fff;animation:swipeSource .12s ease-out both; }
.tile.swipe-target { z-index:5;border-color:#ff8adb;animation:swipeTarget .12s ease-out both; }
.match-sequence-layer { position:absolute;inset:0;z-index:12;padding:clamp(7px,1vw,13px);display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:clamp(5px,.68vw,9px);pointer-events:none;overflow:hidden;border-radius:inherit; }
.match-hole-layer,.gravity-layer { --gravity-gap:clamp(5px,.68vw,9px);position:absolute;inset:0;padding:clamp(7px,1vw,13px);display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--gravity-gap);pointer-events:none;overflow:hidden;border-radius:inherit; }
.match-hole-layer { z-index:11; }
.match-hole-layer>i { min-width:0;border:1px solid rgba(82,112,157,.18);border-radius:clamp(10px,1vw,15px);background:radial-gradient(circle,rgba(62,91,133,.14),rgba(3,7,18,.94) 68%);box-shadow:inset 0 0 22px rgba(0,0,0,.75);animation:matchHoleOpen .16s ease-out both; }
.gravity-layer { z-index:12; }
.gravity-piece { position:relative;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:clamp(10px,1vw,15px);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -12px 18px rgba(0,0,0,.22),0 9px 18px rgba(0,0,0,.3);transform:translateY(var(--drop-y));will-change:transform,opacity; }
.gravity-piece>span { position:absolute;left:18%;right:18%;bottom:4px;height:3px;border-radius:50%;opacity:0;background:#85f4ff;box-shadow:0 0 12px #73efff; }
.gravity-layer.gravity-drop .gravity-piece,.gravity-layer.gravity-settle .gravity-piece { animation:columnGravityDrop var(--drop-duration) cubic-bezier(.16,.72,.22,1.08) var(--drop-delay) both; }
.gravity-layer.gravity-drop .gravity-piece>span { animation:landingSpark .18s ease-out calc(var(--drop-delay) + var(--drop-duration) - 80ms) both; }
.gravity-layer.gravity-drop .gravity-piece.drop-distance-0,.gravity-layer.gravity-settle .gravity-piece.drop-distance-0 { animation:none;transform:translateY(0); }
.gravity-layer.gravity-drop .gravity-piece.drop-distance-0>span { animation:none; }
.gravity-piece.drop-distance-0 { --drop-y:translateY(0); }
.gravity-piece.drop-distance-1 { --drop-y:translateY(calc(-100% - var(--gravity-gap))); }
.gravity-piece.drop-distance-2 { --drop-y:translateY(calc(-200% - var(--gravity-gap) - var(--gravity-gap))); }
.gravity-piece.drop-distance-3 { --drop-y:translateY(calc(-300% - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap))); }
.gravity-piece.drop-distance-4 { --drop-y:translateY(calc(-400% - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap))); }
.gravity-piece.drop-distance-5 { --drop-y:translateY(calc(-500% - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap))); }
.gravity-piece.drop-distance-6 { --drop-y:translateY(calc(-600% - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap))); }
.gravity-piece.drop-distance-7 { --drop-y:translateY(calc(-700% - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap) - var(--gravity-gap))); }
.match-ghost { position:relative;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:clamp(10px,1vw,15px);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -12px 18px rgba(0,0,0,.22),0 9px 18px rgba(0,0,0,.32);transform:translateZ(0); }
.match-ghost.queued { opacity:.92;filter:saturate(.72) brightness(.8); }
.match-ghost.cleared { opacity:0;visibility:hidden;transform:scale(.05); }
.match-ghost.active.lock { z-index:4;border-color:#fff;animation:matchCircuitLock .21s ease-out both; }
.match-ghost.active.clear { z-index:5;border-color:#79f5ff;animation:matchPartClear .33s cubic-bezier(.3,.1,.7,1) both; }
.match-ghost .part-icon { position:relative;z-index:2; }
.match-pixel-burst { position:absolute;inset:0;z-index:3;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 10%,rgba(120,246,255,.8) 11% 13%,transparent 14% 22%),repeating-linear-gradient(0deg,transparent 0 12%,rgba(255,255,255,.7) 13% 15%,transparent 16% 24%);mix-blend-mode:screen; }
.match-ghost.active.clear .match-pixel-burst { animation:matchPixelBurst .33s steps(5,end) both; }
.special-activation-layer { --special-gap:clamp(5px,.68vw,9px);position:absolute;inset:0;z-index:15;padding:clamp(7px,1vw,13px);display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:var(--special-gap);pointer-events:none;overflow:hidden;border-radius:inherit; }
.special-beam { z-index:2;align-self:center;justify-self:center;border-radius:999px;opacity:0;background:#fff9c7;box-shadow:0 0 5px #fff,0 0 15px #ffcf52,0 0 32px #ff8b38; }
.special-beam.beam-row { width:100%;height:7px;transform:scaleX(0);animation:lineBeamHorizontal .52s cubic-bezier(.12,.72,.2,1) forwards; }
.special-beam.beam-column { width:7px;height:100%;transform:scaleY(0);animation:lineBeamVertical .52s cubic-bezier(.12,.72,.2,1) .06s forwards; }
.special-hit { z-index:3;position:relative;min-width:0;border:2px solid #ffcf5c;border-radius:clamp(10px,1vw,15px);opacity:0;box-shadow:inset 0 0 20px rgba(255,210,82,.55),0 0 22px rgba(255,148,55,.72);animation:specialCellHit .4s ease-out var(--special-delay) both; }
.special-hit b { position:absolute;inset:16%;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 12px currentColor; }
.special-rgbcore .special-hit { color:#fff;border-color:#73f4ff;background:conic-gradient(from 45deg,rgba(255,87,181,.48),rgba(113,107,255,.52),rgba(74,239,255,.48),rgba(107,255,151,.44),rgba(255,216,87,.48),rgba(255,87,181,.48));box-shadow:inset 0 0 22px rgba(255,255,255,.38),0 0 26px rgba(103,226,255,.72);animation-name:rgbCellHit; }
.special-power-core { z-index:5;position:relative;display:grid;place-items:center;min-width:0;border:3px solid #fff4a6;border-radius:50%;color:#fff;background:radial-gradient(circle,#fffbd1 0 9%,#ffb936 10% 28%,rgba(255,106,42,.88) 29% 48%,transparent 50%);box-shadow:0 0 14px #fff,0 0 34px #ffc244;animation:specialCoreFire .58s ease-out both; }
.special-power-core span { position:absolute;inset:-8px;border:2px dashed currentColor;border-radius:50%;animation:spin .38s linear infinite; }
.special-power-core strong { z-index:2;padding:3px;border-radius:4px;color:#12152c;background:#fff;font:900 clamp(.34rem,.65vw,.52rem) "Chakra Petch";letter-spacing:.04em; }
.special-rgbcore .special-power-core { border-color:#fff;color:#78f7ff;background:conic-gradient(#ff5cae,#826cff,#58eaff,#6cff97,#ffe467,#ff5cae);box-shadow:0 0 15px #fff,0 0 38px #7d6cff;animation:rgbCoreFire .72s ease-out both; }
.rgb-power-wave { z-index:1;align-self:center;justify-self:center;width:100%;aspect-ratio:1;border:5px solid #fff;border-radius:50%;opacity:0;box-shadow:0 0 16px #fff,0 0 32px #ff5cae,inset 0 0 24px #67efff;animation:rgbWaveExpand .7s ease-out forwards; }
.match-sequence-badge { position:absolute;z-index:16;left:50%;top:10px;min-width:190px;padding:8px 14px;border:1px solid rgba(112,240,255,.62);border-radius:999px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;background:rgba(5,9,28,.9);box-shadow:0 10px 28px rgba(0,0,0,.46),0 0 24px rgba(87,226,255,.28);backdrop-filter:blur(12px);pointer-events:none;animation:matchBadgeIn .2s ease-out both; }
.match-sequence-badge span { color:#79efff;font:900 .56rem "Chakra Petch";letter-spacing:.11em; }
.match-sequence-badge strong { color:#fff;font:800 .52rem "Chakra Petch";letter-spacing:.08em; }
.match-sequence-badge.match-clear { border-color:#ff91dc;box-shadow:0 10px 28px rgba(0,0,0,.46),0 0 28px rgba(255,105,211,.3); }
.piece-cpu { background: radial-gradient(circle at 42% 28%, #8f8151, #3d3420 58%, #18140d); }
.piece-ram { background: radial-gradient(circle at 42% 28%, #276b58, #102d29 58%, #081716); }
.piece-gpu { background: radial-gradient(circle at 42% 28%, #574580, #2b2147 58%, #130f23); }
.piece-ssd { background: radial-gradient(circle at 42% 28%, #2b6880, #16384e 58%, #091923); }
.piece-power { background: radial-gradient(circle at 42% 28%, #8a5028, #452716 58%, #1d100a); }
.piece-fan { background: radial-gradient(circle at 42% 28%, #28738b, #12384b 58%, #071923); }
.part-icon { z-index: 2; filter: drop-shadow(0 9px 7px rgba(0,0,0,.5)); transform: translateZ(18px) rotateX(2deg); }
.part-icon.cpu { border-radius: 5px; background: linear-gradient(145deg, #f2db89, #9b874a); box-shadow: inset 2px 2px #fff1b0, inset -3px -3px #5c5031, 5px 7px 10px rgba(0,0,0,.4); }
.part-icon.ram { border-radius: 6px; background: linear-gradient(145deg, #29a468, #135737); box-shadow: inset 0 2px rgba(255,255,255,.2), 5px 7px 10px rgba(0,0,0,.38); }
.part-icon.gpu { border-radius: 6px; background: linear-gradient(145deg, #454052, #211d2a); box-shadow: inset 0 2px rgba(255,255,255,.13), 5px 7px 10px rgba(0,0,0,.42); }
.part-icon.ssd { background: linear-gradient(145deg, #34789b, #193e56); box-shadow: inset 0 2px rgba(255,255,255,.18), 5px 7px 10px rgba(0,0,0,.4); }
.part-icon.power { background: linear-gradient(145deg, #96572e, #4a2815); box-shadow: inset 0 2px rgba(255,255,255,.16), 5px 7px 10px rgba(0,0,0,.4); }
.part-icon.fan { background: radial-gradient(circle, #173c52, #071923); box-shadow: inset 0 0 12px rgba(90,230,255,.22), 5px 7px 10px rgba(0,0,0,.4); }
.board-hint { color: #96a5c8; font-size: .69rem; letter-spacing: .02em; }

.booster-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.booster-heading .eyebrow { margin-bottom: 5px; }
.booster-heading h2 { margin: 0 0 14px; }
.booster-heading > span { flex: none; padding: 6px 8px; border: 1px solid rgba(103,246,255,.2); border-radius: 999px; color: #65efff; background: rgba(103,246,255,.05); font: 700 .5rem "Chakra Petch"; letter-spacing: .1em; }
.booster { min-height: 78px; padding: 10px; border-color: rgba(151,169,255,.14); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.16); transition: transform .22s, border-color .22s, box-shadow .22s, background .22s; position: relative; overflow: hidden; }
.booster::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--booster-color, #63edff); box-shadow: 0 0 15px var(--booster-color, #63edff); opacity: .75; }
.gpu-booster { --booster-color: #b182ff; }.cpu-booster { --booster-color: #ffd166; }.mouse-booster { --booster-color: #63efff; }.fan-booster { --booster-color: #66dfff; }
.booster:hover:not(:disabled) { border-color: color-mix(in srgb, var(--booster-color) 52%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--booster-color) 12%, transparent), rgba(255,255,255,.025)); transform: translateX(-5px) translateY(-2px); box-shadow: 0 15px 32px rgba(0,0,0,.28), 0 0 22px color-mix(in srgb, var(--booster-color) 12%, transparent); }
.booster.active { border-color: var(--booster-color); background: linear-gradient(145deg, color-mix(in srgb, var(--booster-color) 18%, transparent), rgba(255,255,255,.035)); transform: translateX(-5px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--booster-color) 12%, transparent), 0 0 30px color-mix(in srgb, var(--booster-color) 22%, transparent); animation: boosterArmed 1.2s ease-in-out infinite; }
.booster:disabled { opacity: .3; filter: grayscale(.45); }
.booster > span strong { font-size: .72rem; color: #f4f7ff; }.booster > span small { color: #97a5c7; }
.booster em { width: 27px; height: 27px; background: linear-gradient(145deg, #7af8ff, #7a67ff); color: #080b1c; box-shadow: 0 0 17px rgba(99,239,255,.35); }
.booster-device { filter: drop-shadow(0 8px 8px rgba(0,0,0,.36)); transform: perspective(160px) rotateY(-8deg); }
.gpu-device, .cpu-device, .mouse-device, .fan-device { border-radius: 8px; box-shadow: inset 0 1px rgba(255,255,255,.17), 4px 6px 8px rgba(0,0,0,.35); }
.booster-note { color: #7785a6; }

/* Lifeline cinematic overlays */
.booster-fx { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; background: rgba(5,8,21,.12); }
.fx-callout { position: absolute; z-index: 30; left: 50%; bottom: 4%; min-width: 180px; padding: 9px 16px; border: 1px solid currentColor; border-radius: 999px; transform: translateX(-50%); color: #fff; background: rgba(5,8,22,.82); box-shadow: 0 12px 30px rgba(0,0,0,.42), 0 0 24px currentColor; display: flex; align-items: center; justify-content: center; gap: 9px; backdrop-filter: blur(12px); animation: fxCallout .45s cubic-bezier(.2,.8,.2,1) both; }
.fx-callout span { font: 800 .66rem "Chakra Petch"; letter-spacing: .1em; }.fx-callout strong { color: #8cf7ff; font: 800 .52rem "Chakra Petch"; letter-spacing: .14em; }
.booster-hit { z-index: 4; animation: targetLock .38s ease-in-out infinite alternate; }

.gpu-render-frame { position: absolute; left: var(--fx-x); top: var(--fx-y); width: 43%; aspect-ratio: 1; padding: 7px; border: 2px solid #75efff; border-radius: 8px; transform: translate(-50%,-50%) perspective(500px) rotateX(18deg) scale(.35); opacity: 0; color: #84f5ff; background: linear-gradient(145deg, rgba(13,20,52,.98), rgba(5,8,23,.98)); box-shadow: inset 0 0 22px rgba(98,230,255,.2), 0 0 0 1px rgba(174,117,255,.75), 0 0 42px rgba(91,222,255,.48); animation: renderFrameIn .42s cubic-bezier(.16,.9,.2,1.2) forwards; }
.gpu-render-frame::before, .gpu-render-frame::after { content: ""; position: absolute; inset: -7px auto auto -7px; width: 18px; height: 18px; border-left: 4px solid #c9a1ff; border-top: 4px solid #c9a1ff; }.gpu-render-frame::after { inset: auto -7px -7px auto; border: 0; border-right: 4px solid #c9a1ff; border-bottom: 4px solid #c9a1ff; }
.render-toolbar { position: absolute; left: 8px; right: 8px; top: -24px; display: flex; justify-content: space-between; color: #b5c5ff; font: 800 .45rem "Chakra Petch"; letter-spacing: .12em; }.render-toolbar b { color: #78f2ff; }
.render-canvas { position: absolute; inset: 7px; overflow: hidden; border-radius: 4px; background: #060b23; box-shadow: inset 0 0 18px rgba(27,38,94,.8); }
.render-scene { position: absolute; inset: 0; opacity: .08; filter: grayscale(1) contrast(1.5); background: linear-gradient(#172760 0 58%, #492e70 59% 63%, #111a38 64%); }
.fx-gpu.fx-impact .render-scene { animation: renderReveal .62s steps(6,end) forwards; }
.render-sun { position: absolute; width: 22%; aspect-ratio: 1; right: 13%; top: 12%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7ca 0 10%, #ffdc72 26%, #ff7da9 70%); box-shadow: 0 0 18px #ff8eb5; }
.render-mountain { position: absolute; left: -5%; bottom: 28%; width: 70%; height: 48%; background: linear-gradient(145deg, #8ecfff, #4f4fb4 58%, #252257); clip-path: polygon(0 100%, 42% 24%, 57% 49%, 72% 14%, 100% 100%); }.render-mountain.far { left: 37%; width: 74%; opacity: .65; background: linear-gradient(145deg, #ca9eff, #53449e 65%); }.render-mountain.near { filter: drop-shadow(0 8px 7px rgba(2,4,18,.5)); }
.render-ground { position: absolute; left: -10%; right: -10%; bottom: -18%; height: 48%; border-radius: 50%; background: radial-gradient(ellipse at 50% 0, #43e3ce, #132c4c 62%, #071020 70%); box-shadow: 0 -4px 14px rgba(81,239,218,.45); }
.render-wireframe { position: absolute; inset: 0; opacity: .65; background: repeating-linear-gradient(90deg, transparent 0 24%, rgba(114,239,255,.32) 25% 26%, transparent 27% 49%), repeating-linear-gradient(0deg, transparent 0 24%, rgba(114,239,255,.32) 25% 26%, transparent 27% 49%); background-size: 24% 24%; mix-blend-mode: screen; transition: opacity .3s; }.fx-gpu.fx-impact .render-wireframe { opacity: .12; }
.render-pixel-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr); }.render-pixel-grid i { border: 1px solid rgba(120,238,255,.2); background: linear-gradient(145deg, rgba(132,102,255,.7), rgba(69,226,246,.38)); animation: renderPixelPulse .42s ease-in-out infinite alternate; }.render-pixel-grid i:nth-child(2n) { animation-delay: -.18s; }.render-pixel-grid i:nth-child(3n) { animation-delay: -.31s; }.fx-gpu.fx-impact .render-pixel-grid i { animation: renderPixelClear .5s steps(1,end) forwards; }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(2) { animation-delay:.03s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(3) { animation-delay:.06s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(4) { animation-delay:.09s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(5) { animation-delay:.12s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(6) { animation-delay:.15s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(7) { animation-delay:.18s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(8) { animation-delay:.21s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(9) { animation-delay:.24s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(10) { animation-delay:.27s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(11) { animation-delay:.3s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(12) { animation-delay:.33s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(13) { animation-delay:.36s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(14) { animation-delay:.39s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(15) { animation-delay:.42s }.fx-gpu.fx-impact .render-pixel-grid i:nth-child(16) { animation-delay:.45s }
.render-scanline { position: absolute; left: 0; right: 0; top: -5%; height: 12%; background: linear-gradient(transparent, rgba(190,250,255,.92), rgba(88,222,255,.28), transparent); filter: drop-shadow(0 0 8px #73efff); animation: renderScan .6s linear infinite; }
.render-progress { position: absolute; left: 7px; right: 7px; bottom: -24px; height: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 5px; font: 800 .4rem "Chakra Petch"; letter-spacing: .08em; }.render-progress > i { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.12); }.render-progress > i b { display: block; height: 100%; width: 22%; background: linear-gradient(90deg, #a874ff, #6ef3ff); box-shadow: 0 0 8px #6ef3ff; animation: renderProgress .55s linear infinite; }.fx-gpu.fx-impact .render-progress > i b { width: 100%; animation: none; }.render-progress strong { color: #fff; }

.cpu-overclock { position: absolute; left: var(--fx-x); top: var(--fx-y); width: 82px; height: 82px; border: 10px solid #9b8547; border-radius: 10px; transform: translate(-50%,-50%) perspective(200px) rotateX(58deg) scale(.4); display: grid; place-items: center; color: #30270f; background: linear-gradient(145deg, #fff0a0, #d6a52e); box-shadow: inset 0 2px #fff7c7, 0 0 45px rgba(255,199,71,.7); animation: cpuDrop .42s cubic-bezier(.15,.9,.3,1.3) forwards; }
.cpu-overclock::before, .cpu-overclock::after { content: ""; position: absolute; inset: -18px 5px; border-left: 4px dotted #ffd96f; border-right: 4px dotted #ffd96f; }.cpu-overclock::after { transform: rotate(90deg); }.cpu-overclock b { font: 900 .82rem "Chakra Petch"; }.cpu-overclock i { position: absolute; inset: 7px; border: 1px solid rgba(58,42,3,.24); animation: cpuRing .55s linear infinite; }.cpu-overclock i:nth-child(2) { inset: 13px; animation-direction: reverse; }.cpu-overclock i:nth-child(3) { inset: 19px; }
.cpu-bolts i { position: absolute; left: var(--fx-x); top: var(--fx-y); width: 12px; height: 46%; opacity: 0; transform-origin: top; background: linear-gradient(#fff7bc, #ffc83d 62%, transparent); clip-path: polygon(40% 0,100% 0,62% 38%,100% 38%,20% 100%,42% 51%,0 51%); filter: drop-shadow(0 0 8px #ffc43e); }
.fx-cpu.fx-impact .cpu-bolts i { animation: cpuLightning .55s ease-out forwards; }.cpu-bolts i:nth-child(1) { transform: rotate(0deg); }.cpu-bolts i:nth-child(2) { transform: rotate(60deg); }.cpu-bolts i:nth-child(3) { transform: rotate(120deg); }.cpu-bolts i:nth-child(4) { transform: rotate(180deg); }.cpu-bolts i:nth-child(5) { transform: rotate(240deg); }.cpu-bolts i:nth-child(6) { transform: rotate(300deg); }

.mouse-route { position: absolute; inset: 0; }.mouse-route i, .mouse-route b { position: absolute; width: 34px; height: 34px; border: 3px solid #72f5ff; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 22px rgba(89,236,255,.75); animation: endpointPulse .45s ease-in-out infinite alternate; }.mouse-route i { left: var(--fx-x); top: var(--fx-y); }.mouse-route b { left: var(--fx-end-x); top: var(--fx-end-y); }
.mouse-route span { position: absolute; left: var(--fx-x); top: var(--fx-y); width: 28px; height: 39px; border: 3px solid #fff; border-radius: 50% 50% 45% 45%; background: linear-gradient(145deg, #eefdff, #7eddf2); box-shadow: 0 0 25px #5eeeff, 7px 10px 15px rgba(0,0,0,.32); transform: translate(-50%,-50%) rotate(-13deg); animation: mouseWarp .62s cubic-bezier(.18,.8,.24,1) forwards; }
.mouse-route span::before { content: ""; position: absolute; left: 50%; top: 0; height: 15px; width: 2px; background: #476e82; }.mouse-route span::after { content: ""; position: absolute; left: calc(50% - 2px); top: 5px; width: 4px; height: 8px; border-radius: 3px; background: #6b5fff; }

.cooling-turbine { position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; border: 8px solid rgba(112,232,255,.72); border-radius: 50%; transform: translate(-50%,-50%) scale(.35); background: radial-gradient(circle, #bfffff 0 5%, #21516b 6% 17%, #0a1833 18%); box-shadow: inset 0 0 35px rgba(83,226,255,.5), 0 0 50px rgba(82,224,255,.5); animation: turbineArrive .42s cubic-bezier(.2,.9,.2,1.2) forwards; }
.cooling-turbine i { position: absolute; left: 50%; top: 50%; width: 43%; height: 18%; margin: -9% 0 0 -2%; border-radius: 100% 20%; transform-origin: 2% 50%; background: linear-gradient(90deg, #b7fbff, #39bfe8); box-shadow: 0 0 12px rgba(100,239,255,.72); animation: fanSpin .3s linear infinite; }.cooling-turbine i:nth-child(2) { transform: rotate(120deg); }.cooling-turbine i:nth-child(3) { transform: rotate(240deg); }.cooling-turbine b { position: absolute; inset: 44%; border-radius: 50%; background: #e2ffff; box-shadow: 0 0 15px #fff; }
.cooling-rings i { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; border: 3px solid #75efff; border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; }.fx-coolingfan.fx-impact .cooling-rings i { animation: coolingWave .9s ease-out forwards; }.cooling-rings i:nth-child(2) { animation-delay: .12s !important; }.cooling-rings i:nth-child(3) { animation-delay: .24s !important; }
.frost-field { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 20% 20%, rgba(206,252,255,.45) 0 2px, transparent 3px), radial-gradient(circle at 70% 45%, rgba(206,252,255,.4) 0 2px, transparent 3px), linear-gradient(rgba(79,221,255,.08), rgba(79,221,255,.18)); background-size: 31px 31px, 47px 47px, auto; }.fx-coolingfan.fx-impact .frost-field { animation: frostFlash .9s ease-out forwards; }

.status-strip.effect-gpu { color: #d8adff; }.status-strip.effect-cpu { color: #ffda75; }.status-strip.effect-mouse, .status-strip.effect-coolingfan { color: #79f1ff; }

.modal-backdrop { background: rgba(3,5,16,.78); backdrop-filter: blur(20px) saturate(1.25); }
.modal-card { border-color: rgba(130,153,255,.25); border-radius: 28px; background: radial-gradient(circle at 50% 0, rgba(100,92,255,.18), transparent 48%), linear-gradient(145deg, rgba(25,32,65,.98), rgba(7,11,27,.98)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 40px 110px rgba(0,0,0,.65), 0 0 70px rgba(74,93,255,.12); }
.age-chip { border-color: #19244d; background: linear-gradient(145deg, #7af7ff, #7770ff); box-shadow: inset 0 2px rgba(255,255,255,.65), 0 18px 40px rgba(61,202,255,.3), 0 0 40px rgba(112,102,255,.3); }
.primary-button { border-radius: 14px; background: linear-gradient(100deg, #78f3ff, #7b72ff); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 14px 30px rgba(75,115,255,.24); transition: transform .2s, filter .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: inset 0 1px rgba(255,255,255,.65), 0 18px 38px rgba(75,115,255,.34); }
.tip-card { border-color: rgba(93,228,255,.2); border-radius: 16px; background: linear-gradient(145deg, rgba(86,211,255,.08), rgba(112,87,255,.04)); }
.privacy-box { border: 1px solid rgba(103,235,255,.12); border-radius: 14px; background: rgba(88,212,255,.045); }

/* Clear booster selection guidance */
.lifeline-selected-banner { min-height: 56px; padding: 8px 13px; border: 1px solid var(--selected-color,#69efff); border-bottom: 0; color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--selected-color,#69efff) 16%, #0b1028), rgba(9,14,35,.96)); display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 24px color-mix(in srgb, var(--selected-color,#69efff) 16%, transparent); animation: selectedSlide .28s cubic-bezier(.2,.85,.2,1) both; }
.selected-gpu { --selected-color:#b887ff; }.selected-cpu { --selected-color:#ffd36b; }.selected-mouse { --selected-color:#6af2ff; }
.lifeline-selected-banner > div { display: grid; gap: 2px; }.lifeline-selected-banner strong { font: 800 .68rem "Chakra Petch"; letter-spacing: .08em; }.lifeline-selected-banner small { color: #bac5df; font-size: .65rem; }.lifeline-selected-banner > b { padding: 6px 9px; border-radius: 999px; color: #081020; background: var(--selected-color,#69efff); font: 900 .52rem "Chakra Petch"; letter-spacing: .1em; animation: tapPulse .8s ease-in-out infinite alternate; }
.selected-glyph, .lifeline-cursor > span { width: 34px; height: 34px; border: 2px solid var(--selected-color,#69efff); border-radius: 10px; position: relative; display: grid; place-items: center; background: color-mix(in srgb, var(--selected-color,#69efff) 12%, #0b1028); box-shadow: 0 0 15px color-mix(in srgb, var(--selected-color,#69efff) 34%, transparent); }
.selected-glyph::before, .lifeline-cursor > span::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 3px; box-shadow: inset 0 0 6px currentColor; }
.selected-mouse .selected-glyph::before, .cursor-mouse > span::before { width: 11px; height: 18px; border-radius: 50% 50% 44% 44%; }
.target-coach { position: absolute; left: 50%; top: 11px; z-index: 9; padding: 7px 11px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; color: #fff; background: rgba(5,8,25,.82); box-shadow: 0 7px 20px rgba(0,0,0,.35), 0 0 22px color-mix(in srgb, var(--selected-color,#69efff) 25%, transparent); backdrop-filter: blur(12px); pointer-events: none; animation: coachFloat .8s ease-in-out infinite alternate; }
.target-coach span { width: 8px; height: 8px; border-radius: 50%; background: #7cf4ff; box-shadow: 0 0 12px #7cf4ff; }.target-coach b { font: 800 .52rem "Chakra Petch"; letter-spacing: .12em; }
.puzzle-board.targeting::after { content: ""; position: absolute; inset: 7px; z-index: 5; border: 1px dashed color-mix(in srgb, var(--selected-color,#70efff) 50%, transparent); border-radius: 18px; pointer-events: none; animation: targetingGrid 1s ease-in-out infinite alternate; }
.puzzle-board.targeting-gpu { --selected-color:#b887ff; }.puzzle-board.targeting-cpu { --selected-color:#ffd36b; }.puzzle-board.targeting-mouse { --selected-color:#6af2ff; }

.lifeline-cursor { --selected-color:#69efff; position: fixed; left: var(--pointer-x,-100px); top: var(--pointer-y,-100px); z-index: 500; width: 52px; transform: translate(13px,13px); opacity: 0; pointer-events: none; display: grid; justify-items: center; gap: 3px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); transition: opacity .12s; }
body:has(.puzzle-board.targeting:hover) .lifeline-cursor { opacity: 1; }
.puzzle-board.targeting, .puzzle-board.targeting * { cursor: none !important; }
.lifeline-cursor.cursor-gpu { --selected-color:#b887ff; }.lifeline-cursor.cursor-cpu { --selected-color:#ffd36b; }.lifeline-cursor.cursor-mouse { --selected-color:#6af2ff; }
.lifeline-cursor > span { width: 42px; height: 42px; color: var(--selected-color); border-radius: 13px; background: rgba(7,11,29,.92); }
.lifeline-cursor > span::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--selected-color); border-radius: 16px; animation: cursorOrbit 1.1s linear infinite; }
.lifeline-cursor b { padding: 3px 6px; border-radius: 999px; color: #071020; background: var(--selected-color); font: 900 .42rem "Chakra Petch"; letter-spacing: .08em; }

/* Interactive dimensional PC */
.interactive-rig.dragging { cursor: grabbing; transition: none; box-shadow: 22px 28px 46px rgba(0,0,0,.55), 0 0 42px rgba(87,224,255,.2), inset 0 0 55px #02040b; }
.interactive-rig:focus-visible { outline: 3px solid #68efff; outline-offset: 8px; }
.interactive-rig .pc-board { transform: translateZ(12px); box-shadow: inset 0 0 25px rgba(70,103,255,.13), 8px 10px 18px rgba(0,0,0,.28); }
.interactive-rig .pc-cpu { z-index:3; border:5px solid #756a47; border-radius:5px; background:linear-gradient(145deg,#f0df9b,#99854f); box-shadow:inset 2px 2px #fff6c7,inset -3px -3px #655834,7px 9px 12px rgba(0,0,0,.42),0 0 15px rgba(255,214,104,.16); transform:translateZ(28px) rotateZ(-2deg); }
.interactive-rig .pc-cpu::before,.interactive-rig .pc-cpu::after { content:"";position:absolute;inset:-9px 5px;border-left:3px dotted #e7cd79;border-right:3px dotted #e7cd79; }.interactive-rig .pc-cpu::after { transform:rotate(90deg); }
.interactive-rig .pc-cooler,.interactive-rig .pc-ram,.interactive-rig .pc-ssd,.interactive-rig .pc-gpu { transform:translateZ(20px); }
.case-depth { position: absolute; z-index: -1; right: -24px; top: 7px; bottom: 5px; width: 24px; transform: rotateY(68deg); transform-origin: left; border: 1px solid #536083; border-radius: 0 8px 8px 0; background: linear-gradient(90deg,#1a2138,#080b16); box-shadow: inset -7px 0 12px rgba(0,0,0,.5); }
.case-base { position: absolute; z-index: -1; left: 7px; right: -8px; bottom: -20px; height: 20px; transform: rotateX(68deg); transform-origin: top; border: 1px solid #485472; background: linear-gradient(#11172a,#050711); }
.case-rgb { position: absolute; z-index: 7; left: -5px; top: 12%; bottom: 12%; width: 3px; border-radius: 4px; background: linear-gradient(#7a6dff,#59eeff,#ff6bb5,#7a6dff); background-size: 100% 200%; box-shadow: 0 0 14px currentColor; animation: rgbRail 3s linear infinite; }
.rotate-hint { margin: -7px 0 17px; color: #6e7d9f; text-align: center; font: 700 .5rem "Chakra Petch"; letter-spacing: .12em; }.rotate-hint span { display: inline-block; width: 17px; height: 9px; margin-right: 4px; border: 1px solid #62dfef; border-radius: 50%; vertical-align: middle; position: relative; }.rotate-hint span::after { content: ""; position: absolute; width: 3px; height: 3px; left: 6px; top: 2px; border-radius: 50%; background: #62efff; }

/* Mobile always-visible play HUD */
.mobile-game-hud { display: none; }

/* Component installation cinematic */
.cinematic-complete { width: min(790px,100%); display: grid; grid-template-columns: minmax(330px,1.1fr) minmax(250px,.9fr); gap: 22px; align-items: center; text-align: left; overflow: hidden; }
.cinematic-complete .installed-stamp { grid-column: 1/-1; justify-self: center; margin-bottom: 0; color: #75efff; border-color: #75efff; border-radius: 999px; transform: none; box-shadow: 0 0 18px rgba(91,231,255,.22); }
.assembly-stage { min-height: 340px; position: relative; perspective: 900px; border: 1px solid rgba(117,239,255,.16); border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 70% 45%, rgba(100,92,255,.22), transparent 35%), linear-gradient(145deg,rgba(10,18,48,.92),rgba(5,8,22,.98)); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -30px 55px rgba(0,0,0,.3); }
.assembly-stage::before { content: "ASSEMBLY CHAMBER"; position: absolute; left: 15px; top: 13px; color: #6c7fa8; font: 800 .48rem "Chakra Petch"; letter-spacing: .14em; }
.install-pc { position: absolute; right: 24px; top: 48px; width: 145px; height: 218px; border: 6px solid #33405e; border-radius: 13px; transform: rotateY(-9deg); transform-style: preserve-3d; background: linear-gradient(145deg,#101a36,#050915); box-shadow: 16px 19px 28px rgba(0,0,0,.45), inset 0 0 28px #02040b, 0 0 28px rgba(91,224,255,.12); animation: installCasePower 2.4s ease-in-out both; }
.install-pc-depth { position: absolute; right: -17px; top: 3px; width: 17px; height: 205px; transform: rotateY(66deg); transform-origin: left; background: #141b31; border: 1px solid #465473; }
.install-pc-glass { position: absolute; inset: 7px; border: 1px solid rgba(124,180,255,.28); background: linear-gradient(120deg,rgba(120,220,255,.1),transparent 38%); }
.install-pc-board { position: absolute; left: 22px; top: 37px; width: 87px; height: 117px; border: 2px solid #4e5799; background: repeating-linear-gradient(45deg,rgba(99,236,255,.08) 0 1px,transparent 1px 12px),#111d42; }
.install-slot { position: absolute; left: 36px; top: 88px; width: 58px; height: 35px; border: 2px dashed #7beeff; box-shadow: 0 0 15px rgba(91,236,255,.35); animation: slotPulse .55s ease-in-out infinite alternate; }
.install-pc > i { position: absolute; right: 13px; bottom: 17px; width: 33px; height: 33px; border: 5px dashed #79eaff; border-radius: 50%; animation: spin .8s linear infinite; }.install-pc > b { position: absolute; left: 12px; bottom: 15px; color: #6d7d9f; font: 800 .42rem "Chakra Petch"; letter-spacing: .08em; }
.flying-component { position: absolute; z-index: 5; left: 20px; top: 120px; width: 110px; height: 80px; display: grid; place-items: center; transform-style: preserve-3d; animation: componentDock 2.35s cubic-bezier(.3,.75,.18,1) both; }
.component-shell { width: 105px; height: 66px; position: relative; display: grid; place-items: center; border: 4px solid #6f5ba3; border-radius: 8px; color: #e8ddff; background: linear-gradient(145deg,#51466c,#211b31); box-shadow: inset 0 2px rgba(255,255,255,.2), 10px 13px 18px rgba(0,0,0,.42), 0 0 24px rgba(180,120,255,.28); transform: rotateX(8deg) rotateY(-10deg); }
.component-shell b { z-index: 3; font: 900 .7rem "Chakra Petch"; letter-spacing: .08em; }.component-shell i { position: absolute; width: 25px; height: 25px; border: 4px dashed #c38dff; border-radius: 50%; animation: spin .7s linear infinite; }.component-shell i:nth-child(1) { left: 10px; }.component-shell i:nth-child(2) { right: 10px; }.component-shell i:nth-child(3), .component-shell i:nth-child(4) { display: none; }
.component-level-1 .component-shell { width: 102px; height: 92px; border-color:#4f8b8e; background: repeating-linear-gradient(45deg,rgba(103,242,255,.16) 0 1px,transparent 1px 11px),linear-gradient(145deg,#1d654f,#0b2d29); }.component-level-1 .component-shell i { display:block; width:18px;height:18px;border:2px solid #69efcc;border-radius:3px; }.component-level-1 .component-shell i:nth-child(1){left:12px;top:12px}.component-level-1 .component-shell i:nth-child(2){right:12px;top:12px}.component-level-1 .component-shell i:nth-child(3){left:12px;bottom:12px}.component-level-1 .component-shell i:nth-child(4){right:12px;bottom:12px}
.component-level-2 .component-shell { width:78px;height:78px;border:9px solid #8b7845;color:#352b11;background:linear-gradient(145deg,#fff0a1,#c69a35);box-shadow:inset 0 2px #fffbd1,10px 13px 18px rgba(0,0,0,.42),0 0 28px rgba(255,205,78,.35)}.component-level-2 .component-shell i{display:none}
.component-level-3 .component-shell,.component-level-8 .component-shell { width:86px;height:86px;border:7px solid #3d7891;border-radius:50%;background:radial-gradient(circle,#c8ffff 0 5%,#25495d 6% 17%,#09192b 18%)}.component-level-3 .component-shell i,.component-level-8 .component-shell i{display:block;left:50%;top:50%;width:34px;height:12px;margin:-6px 0 0 0;border:0;border-radius:100% 20%;transform-origin:0 50%;background:#73edff}.component-level-3 .component-shell i:nth-child(2),.component-level-8 .component-shell i:nth-child(2){transform:rotate(90deg)}.component-level-3 .component-shell i:nth-child(3),.component-level-8 .component-shell i:nth-child(3){transform:rotate(180deg)}.component-level-3 .component-shell i:nth-child(4),.component-level-8 .component-shell i:nth-child(4){transform:rotate(270deg)}
.component-level-4 .component-shell { width:112px;height:43px;border-color:#38bf7e;border-bottom:7px solid #e8c84f;background:linear-gradient(145deg,#21985e,#0f4a34)}.component-level-4 .component-shell i{display:block;top:8px;width:13px;height:19px;border:1px solid #a1f3c2;border-radius:2px;background:#13231c;animation:none}.component-level-4 .component-shell i:nth-child(1){left:9px}.component-level-4 .component-shell i:nth-child(2){left:31px}.component-level-4 .component-shell i:nth-child(3){right:31px}.component-level-4 .component-shell i:nth-child(4){right:9px}
.component-level-5 .component-shell { width:92px;height:62px;border-color:#5aa5c9;background:linear-gradient(145deg,#347da1,#14394f)}.component-level-5 .component-shell i{display:none}
.component-level-7 .component-shell { width:88px;height:76px;border-color:#9d7546;background:linear-gradient(145deg,#514331,#211b15)}.component-level-7 .component-shell i{display:none}
.component-level-9 .component-shell { width:58px;height:94px;border-color:#9db5c9;background:linear-gradient(145deg,#8a9baa,#3c4956)}.component-level-9 .component-shell i{display:block;left:17px;width:16px;height:11px;border:2px solid #27323d;border-radius:3px;animation:none}.component-level-9 .component-shell i:nth-child(1){top:8px}.component-level-9 .component-shell i:nth-child(2){top:31px}.component-level-9 .component-shell i:nth-child(3){top:54px}.component-level-9 .component-shell i:nth-child(4){top:76px}
.component-level-10 .component-shell { width:82px;height:82px;border-color:#67f2ff;border-radius:50%;color:#071526;background:radial-gradient(circle,#fff 0 8%,#77f4ff 9% 35%,#6b65ff 36% 62%,#171b4b 63%);box-shadow:0 0 40px rgba(95,234,255,.65)}.component-level-10 .component-shell i{display:none}
.install-energy { position:absolute;left:115px;right:130px;top:153px;height:3px;background:linear-gradient(90deg,transparent,#b883ff,#65efff,transparent);box-shadow:0 0 14px #65efff;transform-origin:left;animation:energyRoute 2.35s ease-in-out both }
.assembly-particles i { position:absolute;left:31%;top:47%;width:5px;height:5px;background:#82f2ff;box-shadow:0 0 9px #82f2ff;opacity:0;animation:installSpark 2.1s ease-out infinite }.assembly-particles i:nth-child(2){--sx:38px;--sy:-54px;animation-delay:.15s}.assembly-particles i:nth-child(3){--sx:65px;--sy:35px;animation-delay:.3s}.assembly-particles i:nth-child(4){--sx:102px;--sy:-28px;animation-delay:.45s}.assembly-particles i:nth-child(5){--sx:128px;--sy:47px;animation-delay:.6s}.assembly-particles i:nth-child(6){--sx:156px;--sy:-42px;animation-delay:.75s}.assembly-particles i:nth-child(7){--sx:182px;--sy:29px;animation-delay:.9s}.assembly-particles i:nth-child(8){--sx:205px;--sy:-18px;animation-delay:1.05s}
.install-status { position:absolute;left:16px;right:16px;bottom:16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;color:#8fa0c5;font:800 .48rem "Chakra Petch";letter-spacing:.09em}.install-status > i{height:4px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.1)}.install-status > i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#8a6dff,#66efff);box-shadow:0 0 10px #66efff;transform-origin:left;animation:installProgress 2.2s ease-out both}.install-status strong{color:#68f3da;opacity:0;animation:onlineReveal .25s 2.05s forwards}
.complete-copy { opacity:0; transform:translateX(18px); animation:completeCopyIn .45s 1.7s ease-out forwards; }.complete-copy .eyebrow { margin-top:0; }.complete-copy .tip-card { margin-top:16px; }.complete-copy .primary-button { margin-top:2px; }

#blazor-error-ui { background: #6d2626; bottom: 0; box-shadow: 0 -1px 8px #000; display: none; left: 0; padding: .8rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; }
.blazor-error-boundary { padding: 1rem; background: #6d2626; color: #fff; }
.loading-progress { display: none; }.loading-progress-text { text-align: center; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes readyPulse { 50% { box-shadow: 0 0 30px rgba(255,184,77,.25); } }
@keyframes trace { to { transform: translateX(100%); } }
@keyframes rgbGlow { 0%,100% { box-shadow: inset 0 0 16px #ff4c77, 0 0 12px #ff4c77; } 33% { box-shadow: inset 0 0 16px #52d8ff, 0 0 12px #52d8ff; } 66% { box-shadow: inset 0 0 16px #8dff57, 0 0 12px #8dff57; } }
@keyframes installBeam { from { transform: rotate(-45deg) translateY(-40%); } to { transform: rotate(-45deg) translateY(40%); } }
@keyframes ambientFloat { to { transform: translate3d(7vw,-5vh,0) scale(1.15); opacity: .2; } }
@keyframes modernReady { 0%,100% { box-shadow: 0 18px 42px rgba(64,47,146,.2), inset 0 1px rgba(255,255,255,.14); } 50% { box-shadow: 0 24px 58px rgba(83,62,190,.38), 0 0 34px rgba(111,229,255,.13), inset 0 1px rgba(255,255,255,.2); } }
@keyframes tileMaterialize { from { opacity: .15; transform: translateY(-12px) scale(.88) rotateX(18deg); filter: brightness(1.8); } to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: none; } }
@keyframes matchCircuitLock { 0%{transform:scale(.9);filter:brightness(1)}55%{transform:scale(1.13);filter:brightness(1.9);box-shadow:0 0 0 3px rgba(255,255,255,.72),0 0 34px currentColor}100%{transform:scale(1.04);filter:brightness(1.35);box-shadow:0 0 0 2px rgba(111,242,255,.7),0 0 26px rgba(92,231,255,.65)} }
@keyframes matchPartClear { 0%{opacity:1;transform:scale(1.04);filter:brightness(1.4) saturate(1.3)}35%{opacity:1;transform:scale(.92) rotateZ(-2deg);filter:brightness(2.2) saturate(1.8)}100%{opacity:0;transform:scale(.08) rotateZ(9deg);filter:brightness(3) blur(3px)} }
@keyframes matchPixelBurst { 0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.8)} }
@keyframes lineBeamHorizontal { 0%{opacity:0;transform:scaleX(0)}18%{opacity:1}68%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)} }
@keyframes lineBeamVertical { 0%{opacity:0;transform:scaleY(0)}18%{opacity:1}68%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)} }
@keyframes specialCellHit { 0%{opacity:0;transform:scale(.72)}35%{opacity:1;transform:scale(1.08);filter:brightness(1.8)}100%{opacity:0;transform:scale(.15);filter:brightness(2.7)} }
@keyframes rgbCellHit { 0%{opacity:0;transform:scale(.55) rotate(-18deg);filter:hue-rotate(0)}36%{opacity:1;transform:scale(1.12) rotate(0);filter:hue-rotate(120deg) brightness(1.6)}100%{opacity:0;transform:scale(.12) rotate(22deg);filter:hue-rotate(320deg) brightness(2.6)} }
@keyframes specialCoreFire { 0%{opacity:0;transform:scale(.28) rotate(-25deg)}38%{opacity:1;transform:scale(1.18) rotate(4deg)}100%{opacity:0;transform:scale(1.65) rotate(12deg)} }
@keyframes rgbCoreFire { 0%{opacity:0;transform:scale(.25) rotate(-35deg);filter:hue-rotate(0)}42%{opacity:1;transform:scale(1.22) rotate(8deg);filter:hue-rotate(150deg)}100%{opacity:0;transform:scale(1.8) rotate(28deg);filter:hue-rotate(330deg)} }
@keyframes rgbWaveExpand { 0%{opacity:.95;transform:scale(.25);filter:hue-rotate(0)}70%{opacity:.62;transform:scale(6);filter:hue-rotate(220deg)}100%{opacity:0;transform:scale(8);filter:hue-rotate(340deg)} }
@keyframes matchBadgeIn { from{opacity:0;transform:translate(-50%,-8px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes matchHoleOpen { from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)} }
@keyframes columnGravityDrop { 0%{opacity:.88;transform:var(--drop-y);filter:brightness(1.18)}72%{opacity:1;transform:translateY(4%);filter:brightness(1.05)}88%{transform:translateY(-2%)}100%{opacity:1;transform:translateY(0);filter:brightness(1)} }
@keyframes landingSpark { 0%{opacity:0;transform:scaleX(.3)}40%{opacity:1;transform:scaleX(1.3)}100%{opacity:0;transform:scaleX(1.8)} }
@keyframes swipeSource { from{transform:scale(.92)}to{transform:scale(.78);filter:brightness(1.7);box-shadow:0 0 0 4px rgba(105,240,255,.28),0 0 30px rgba(105,240,255,.55)} }
@keyframes swipeTarget { from{transform:scale(.9)}to{transform:scale(1.08);filter:brightness(1.5);box-shadow:0 0 0 3px rgba(255,116,210,.3),0 0 28px rgba(255,116,210,.48)} }
@keyframes boosterArmed { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--booster-color) 7%, transparent), 0 0 40px color-mix(in srgb, var(--booster-color) 27%, transparent); } }
@keyframes targetLock { to { filter: brightness(1.55) saturate(1.35); box-shadow: inset 0 0 24px currentColor, 0 0 24px rgba(255,255,255,.35); transform: scale(.91); } }
@keyframes fxCallout { from { opacity: 0; transform: translate(-50%,18px) scale(.84); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes renderFrameIn { to { opacity: 1; transform: translate(-50%,-50%) perspective(500px) rotateX(0) scale(1); } }
@keyframes renderScan { to { top: 94%; } }
@keyframes renderReveal { 0% { opacity: .08; filter: grayscale(1) contrast(1.5); } 45% { opacity: .72; filter: grayscale(.35) contrast(1.2); } 100% { opacity: 1; filter: none; } }
@keyframes renderPixelPulse { to { opacity: .3; filter: brightness(1.7); } }
@keyframes renderPixelClear { to { opacity: 0; visibility: hidden; } }
@keyframes renderProgress { from { transform: translateX(-100%); } to { transform: translateX(430%); } }
@keyframes cpuDrop { to { transform: translate(-50%,-50%) perspective(200px) rotateX(0) scale(1); } }
@keyframes cpuRing { to { transform: rotate(360deg); } }
@keyframes cpuLightning { 0% { opacity: 0; height: 0; } 15%,65% { opacity: 1; } 100% { opacity: 0; height: 58%; } }
@keyframes endpointPulse { to { transform: translate(-50%,-50%) scale(1.3); opacity: .45; } }
@keyframes mouseWarp { 0% { left: var(--fx-x); top: var(--fx-y); opacity: 1; } 38% { transform: translate(-50%,-80%) rotate(-5deg) scale(1.22); } 100% { left: var(--fx-end-x); top: var(--fx-end-y); opacity: 1; transform: translate(-50%,-50%) rotate(8deg) scale(1); } }
@keyframes turbineArrive { to { transform: translate(-50%,-50%) scale(1); } }
@keyframes fanSpin { to { transform: rotate(360deg); } }
@keyframes coolingWave { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(7); } }
@keyframes frostFlash { 0% { opacity: 0; } 28% { opacity: .8; } 100% { opacity: 0; } }
@keyframes selectedSlide { from { opacity:0; transform:translateY(-9px); } to { opacity:1; transform:none; } }
@keyframes tapPulse { to { transform:scale(1.07); box-shadow:0 0 16px var(--selected-color,#69efff); } }
@keyframes coachFloat { to { transform:translate(-50%,4px); box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 30px color-mix(in srgb,var(--selected-color,#69efff) 34%,transparent); } }
@keyframes targetingGrid { to { opacity:.3; transform:scale(.985); } }
@keyframes cursorOrbit { to { transform:rotate(360deg); border-radius:50%; } }
@keyframes rgbRail { to { background-position:0 200%; } }
@keyframes slotPulse { to { opacity:.42; transform:scale(.92); } }
@keyframes componentDock { 0% { opacity:0; transform:translate3d(-55px,45px,130px) rotateY(-28deg) rotateZ(-12deg) scale(1.2); } 18% { opacity:1; } 52% { transform:translate3d(45px,-24px,80px) rotateY(14deg) rotateZ(4deg) scale(1); } 76% { opacity:1; transform:translate3d(175px,-4px,0) rotateY(0) rotateZ(0) scale(.48); filter:brightness(1.5); } 88% { transform:translate3d(163px,-4px,0) scale(.48); } 100% { opacity:.25; transform:translate3d(168px,-4px,-25px) scale(.43); filter:brightness(1.8); } }
@keyframes energyRoute { 0%,22% { opacity:0; transform:scaleX(0); } 48% { opacity:1; transform:scaleX(.45); } 78% { opacity:1; transform:scaleX(1); } 100% { opacity:.2; transform:scaleX(1); } }
@keyframes installSpark { 0%,30% { opacity:0; transform:translate(0,0) scale(.4); } 45% { opacity:1; } 80%,100% { opacity:0; transform:translate(var(--sx,20px),var(--sy,-35px)) rotate(180deg) scale(1.5); } }
@keyframes installProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes installCasePower { 0%,68% { box-shadow:16px 19px 28px rgba(0,0,0,.45),inset 0 0 28px #02040b; } 82% { box-shadow:16px 19px 28px rgba(0,0,0,.45),inset 0 0 35px rgba(79,96,255,.4),0 0 48px rgba(95,234,255,.52); } 100% { box-shadow:16px 19px 28px rgba(0,0,0,.45),inset 0 0 28px rgba(79,96,255,.25),0 0 25px rgba(95,234,255,.22); } }
@keyframes onlineReveal { to { opacity:1; text-shadow:0 0 10px #68f3da; } }
@keyframes completeCopyIn { to { opacity:1; transform:none; } }

@media (max-width: 1120px) {
    .map-layout { grid-template-columns: 1fr; }
    .rig-panel { display: grid; grid-template-columns: 1fr 300px 1fr; align-items: center; gap: 16px; }
    .rig-heading { display: grid; }.pc-case { margin: 10px auto; height: 310px; }.next-part { margin: 0; }
    .game-layout { grid-template-columns: minmax(170px, .55fr) minmax(440px, 1.3fr); }.booster-panel { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }.booster-heading, .booster-note { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
    .topbar { height: 64px; }.brand small, .build-meter, .icon-button:not(.settings-button) { display: none; }.icon-button { min-height: 34px; }
    .map-screen, .game-screen { padding: 24px 14px; }.map-copy { margin-bottom: 22px; }.map-copy h1 { font-size: 2.5rem; }
    .motherboard-map { min-height: auto; padding: 62px 16px 24px; }.level-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }.level-node { min-height: 112px; }.level-node::after, .level-node::before { display: none; }
    .rig-panel { display: block; }.rig-heading { display: flex; }.next-part { margin-top: 12px; }
    .level-bar { flex-wrap: wrap; }.level-title { margin-left: 12px; }.level-stats { width: 100%; margin: 12px 0; justify-content: flex-end; }
    .game-layout { display: flex; flex-direction: column; }.objective-panel, .board-zone, .booster-panel { width: 100%; max-width: 620px; margin-inline: auto; }
    .objective-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }.objective-panel .eyebrow, .objective-panel h2, .objective-panel > p:not(.eyebrow), .objective-panel .how-button { grid-column: 1 / -1; }.goal-card { margin-top: 8px; }.hazard-goal { margin: 8px 0; }
    .booster-panel { grid-template-columns: repeat(2, 1fr); }.booster-heading, .booster-note { grid-column: 1 / -1; }.game-footer { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
    .game-screen { padding: 10px 8px calc(104px + env(safe-area-inset-bottom)); }
    .level-bar { min-height: 58px; margin: 0 4px 8px; flex-wrap: nowrap; border-bottom: 0; }.level-title h1 { font-size: 1rem; }.level-title span { font-size: .48rem; }.level-stats { display: none; }.back-button { min-height: 34px; padding: 0 10px; }
    .mobile-game-hud { position: sticky; top: 64px; z-index: 18; min-height: 58px; margin: 0 4px 8px; padding: 7px 9px; border: 1px solid rgba(120,151,255,.2); border-radius: 15px; display: grid; grid-template-columns: 1fr auto auto 34px; align-items: center; gap: 11px; background: rgba(7,11,28,.92); box-shadow: 0 10px 28px rgba(0,0,0,.34); backdrop-filter: blur(18px); }
    .mobile-game-hud > div { display: grid; }.mobile-game-hud span { color: #7f8fb2; font: 800 .43rem "Chakra Petch"; letter-spacing: .1em; }.mobile-game-hud strong { font: 850 .92rem "Segoe UI",sans-serif; }.mobile-game-hud small { color: #7fefff; font-size: .5rem; text-transform: uppercase; }.mobile-game-hud .mobile-stat { text-align: center; }.mobile-game-hud .mobile-stat strong { font-size: 1.18rem; }.mobile-game-hud strong.danger { color: var(--red); }.mobile-game-hud button { width: 32px;height:32px;border:1px solid rgba(106,239,255,.25);border-radius:10px;color:#80f2ff;background:rgba(88,223,255,.08);font-weight:900; }
    .game-layout { display: block; }.objective-panel { display: none; }.board-zone { width:100%;max-width:620px;margin:0 auto; }.status-strip { min-height:38px;padding:7px 10px;border-radius:13px 13px 0 0;font-size:.58rem; }.board-hint { margin-bottom:0; }
    .lifeline-selected-banner { min-height:50px;padding:6px 9px;grid-template-columns:32px 1fr;border-radius:0; }.lifeline-selected-banner > b { display:none; }.selected-glyph { width:30px;height:30px; }.lifeline-selected-banner strong { font-size:.56rem; }.lifeline-selected-banner small { font-size:.52rem;line-height:1.25; }.target-coach { top:7px;padding:5px 8px; }.target-coach b { font-size:.45rem; }
    .booster-panel { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; margin: 0; padding: 7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; background: rgba(6,9,24,.95); box-shadow: 0 -16px 45px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(22px); }
    .booster-heading,.booster-note { display:none; }.booster { min-width:0;min-height:76px;padding:5px 3px;display:flex;flex-direction:column;justify-content:center;gap:3px;border-radius:13px;text-align:center;transform:none!important; }.booster::before { inset:auto 12px 0;height:3px;width:auto; }.booster-device { width:34px;height:30px;transform:none; }.gpu-device { height:27px; }.gpu-device i { width:10px;height:10px; }.cpu-device { width:29px;height:29px;border-width:4px; }.mouse-device { width:20px;height:29px; }.fan-device { width:29px;height:29px; }.booster > span:nth-child(2) { display:block; }.booster > span strong { display:block;font-size:.46rem;white-space:nowrap;letter-spacing:-.01em; }.booster > span small { display:none; }.booster em { position:absolute;right:4px;top:4px;width:19px;height:19px;font-size:.5rem; }.booster.active { border-color:var(--booster-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--booster-color) 22%,transparent),0 0 24px color-mix(in srgb,var(--booster-color) 24%,transparent); }
    .game-footer { display:none; }
    .lifeline-cursor { display:none; }
    .cinematic-complete { display:block;width:min(520px,100%);text-align:center;padding:18px; }.cinematic-complete .installed-stamp { margin-bottom:12px; }.assembly-stage { min-height:280px; }.install-pc { right:18px;top:36px;transform:scale(.82) rotateY(-9deg);transform-origin:right top; }.flying-component { left:10px;top:100px;transform:scale(.85); }.install-energy { left:85px;right:105px;top:135px; }.complete-copy { margin-top:15px;animation-delay:1.55s; }.complete-copy .tip-card { text-align:left; }
}

@media (max-width: 480px) {
    .brand strong { font-size: .86rem; }.brand-mark { width: 36px; height: 36px; }.settings-button { font-size: 0; width: 36px; }.settings-button::after { content: "⚙"; font-size: 1rem; }
    .map-copy > p:not(.eyebrow) { font-size: .82rem; }.map-copy::after { display: none; }.map-legend { gap: 10px; font-size: .63rem; }.board-brand small, .socket-decoration { display: none; }
    .level-node { min-height: 100px; }.pc-case { height: 300px; }
    .objective-panel { grid-template-columns: 1fr; }.goal-card, .hazard-goal { grid-column: 1; }.puzzle-board { gap: 3px; padding: 5px; }.tile { border-radius: 6px; }.match-sequence-layer{gap:3px;padding:5px}.match-hole-layer,.gravity-layer{--gravity-gap:3px;gap:3px;padding:5px}.match-ghost,.gravity-piece,.match-hole-layer>i{border-radius:6px}.match-sequence-badge{top:5px;min-width:168px;padding:6px 9px;gap:6px}.match-sequence-badge span{font-size:.46rem}.match-sequence-badge strong{font-size:.43rem}.part-icon.cpu { border-width: 3px; }.part-icon.gpu { border-width: 2px; }.part-icon.gpu i { border-width: 2px; }.part-icon.ram { border-width: 2px; }
    .booster-panel { grid-template-columns: repeat(4,minmax(0,1fr)); }.booster { min-height:72px; }.booster > span strong { font-size:.42rem; }.gpu-render-frame { width: 45%; }.render-toolbar, .render-progress { transform: scale(.82); transform-origin: center; }.fx-callout { bottom: 2%; min-width: 150px; }.age-chip { width: 78px; height: 78px; font-size: 1.6rem; }
}

@media (pointer: coarse) {
    .tile { touch-action:none;-webkit-user-select:none;user-select:none; }
    .lifeline-cursor { display:none; }
    .puzzle-board.targeting,.puzzle-board.targeting * { cursor:pointer!important; }
    .rotate-hint { color:#8291b2; }.rotate-hint::after { content:" · TOUCH & DRAG"; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Stable objective and earnable lifelines */
.lifeline-charge { grid-column: 1 / -1; padding: 10px 11px; border: 1px solid rgba(104,238,255,.18); border-radius: 13px; background: linear-gradient(120deg,rgba(93,94,255,.09),rgba(74,229,255,.04)); display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
.lifeline-charge > div { display:flex; justify-content:space-between; align-items:center; color:#8d9cbd; font:800 .51rem "Chakra Petch"; letter-spacing:.1em; }
.lifeline-charge > div strong { color:#7ceeff; font-size:.62rem; }
.lifeline-charge > i { grid-column:1/-1; height:5px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.09); }
.lifeline-charge > i b { display:block; height:100%; background:linear-gradient(90deg,#806dff,#5beaff,#65f0c8); box-shadow:0 0 13px #65eaff; transition:width .35s ease; }
.lifeline-charge small { grid-column:1/-1; color:#71809f; font-size:.54rem; line-height:1.3; }
.lifeline-charge.reward-ready { border-color:#63f1cf; animation:chargeReward .7s ease-in-out 2; }
.mobile-target-icon { display:none; }

/* Full-size, six-face interactive tower */
.map-layout { grid-template-columns:minmax(600px,1.45fr) minmax(410px,.82fr); }
.rig-panel { min-height:650px; overflow:hidden; }
.rig-viewport { min-height:490px; display:grid; place-items:center; perspective:1400px; overflow:visible; }
.pc-case.interactive-rig { --rig-rx:-6deg; --rig-ry:-18deg; --rig-zoom:1; width:min(340px,82%); height:430px; margin:22px auto 12px; border:0; border-radius:18px; background:transparent; box-shadow:none; transform:perspective(1250px) rotateX(var(--rig-rx)) rotateY(var(--rig-ry)) scale(var(--rig-zoom)); transform-style:preserve-3d; transform-origin:center; transition:transform .16s ease-out; will-change:transform; }
.pc-case.interactive-rig.dragging { box-shadow:none; }
.case-front,.case-back,.case-side,.case-top,.case-bottom { position:absolute; display:block; border:2px solid #39496e; background:linear-gradient(145deg,#151e38,#070b17 70%); box-shadow:inset 0 0 34px rgba(0,0,0,.62); backface-visibility:hidden; }
.case-front { inset:0; border-width:8px; border-radius:18px; transform:translateZ(38px); }
.case-front > span { position:absolute;left:17px;bottom:14px;color:#5a6b90;font:900 .48rem "Chakra Petch";letter-spacing:.14em; }
.case-front > i { position:absolute;right:15px;top:16px;width:9px;height:9px;border:2px solid #6cefff;border-radius:50%;box-shadow:0 0 12px #5beaff; }.case-front > i:last-child{top:37px;border-radius:2px;box-shadow:none}
.case-back { inset:0; border-width:7px; border-radius:16px; transform:rotateY(180deg) translateZ(38px); background:linear-gradient(145deg,#10172b,#050811); }
.case-back::before { content:"REAR I/O";position:absolute;left:22px;top:21px;color:#65779d;font:800 .48rem "Chakra Petch";letter-spacing:.12em; }
.case-back .rear-ports { position:absolute;left:24px;top:50px;width:92px;height:118px;border:3px solid #4a5875;background:repeating-linear-gradient(0deg,#1d2947 0 12px,#080d19 12px 19px);box-shadow:inset 0 0 15px #02040a; }
.case-back > i { position:absolute;right:26px;width:76px;height:76px;border:9px dashed #334666;border-radius:50%;background:radial-gradient(circle,#0d1629 0 20%,transparent 21%); }.case-back > i:nth-of-type(1){top:52px}.case-back > i:nth-of-type(2){top:150px}.case-back > i:nth-of-type(3){bottom:34px;width:120px;height:54px;border-radius:8px;border-style:solid}
.case-side { top:0; bottom:0; width:76px; }
.case-right { right:-38px; transform:rotateY(90deg); background:linear-gradient(90deg,#11182c,#050713); }
.case-left { left:-38px; transform:rotateY(-90deg); background:linear-gradient(90deg,#050713,#141d35); }
.case-right > i { position:absolute;left:14px;width:46px;height:46px;border:7px dashed #354a6c;border-radius:50%; }.case-right > i:nth-child(1){top:62px}.case-right > i:nth-child(2){top:124px}.case-right > i:nth-child(3){top:186px}.case-right > b{position:absolute;bottom:45px;left:16px;color:#556786;font:800 .42rem "Chakra Petch";writing-mode:vertical-rl;letter-spacing:.12em}
.case-left > span { position:absolute;inset:32px 13px;border:2px solid #293754;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(112,152,205,.14) 9px 10px); }
.case-top,.case-bottom { left:0;right:0;height:76px; }
.case-top { top:-38px; transform:rotateX(90deg); background:linear-gradient(#18223e,#070b17); }
.case-bottom { bottom:-38px; transform:rotateX(-90deg); background:#050811; }
.case-top > i { position:absolute;top:19px;width:38px;height:38px;border:6px dashed #354a6c;border-radius:50%; }.case-top > i:nth-child(1){left:55px}.case-top > i:nth-child(2){left:135px}.case-top > i:nth-child(3){left:215px}
.case-bottom > i { position:absolute;top:30px;width:72px;height:13px;border-radius:8px;background:#03050b; }.case-bottom > i:first-child{left:35px}.case-bottom > i:last-child{right:35px}
.interactive-rig .case-glass,.interactive-rig .pc-board,.interactive-rig .pc-psu,.interactive-rig .case-fan,.interactive-rig .io-glow,.interactive-rig .power-led,.interactive-rig .case-rgb { backface-visibility:hidden; }
.interactive-rig .case-glass { inset:8px; border-radius:10px; transform:translateZ(44px); }
.interactive-rig .case-rgb { transform:translateZ(48px); }
.interactive-rig .pc-board { left:45px;top:65px;width:220px;height:255px;transform:translateZ(50px) scale(1.08);transform-origin:left top; }
.interactive-rig .pc-psu { left:30px;bottom:28px;width:120px;height:54px;transform:translateZ(51px); }
.interactive-rig .case-fan { transform:translateZ(51px); }.interactive-rig .fan-top{right:28px;top:35px}.interactive-rig .fan-rear{right:28px;top:91px}
.interactive-rig .io-glow { right:20px;bottom:40px;transform:translateZ(51px); }.interactive-rig .power-led{left:15px;top:16px;transform:translateZ(52px)}
.rig-controls { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:-3px; position:relative; z-index:4; }
.rig-controls button { min-width:40px;height:34px;padding:0 9px;border:1px solid rgba(104,235,255,.2);border-radius:10px;color:#8fefff;background:rgba(80,188,255,.06);font:800 .65rem "Chakra Petch";cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.06); }
.rig-controls button:hover { border-color:#68efff;background:rgba(85,226,255,.13);transform:translateY(-2px); }
.rotate-hint { margin:9px 0 16px; }

/* Immersive install sequence */
.modal-backdrop:has(.cinematic-complete) { padding:10px;background:radial-gradient(circle at 50% 45%,rgba(76,84,255,.2),transparent 45%),rgba(2,5,16,.96); }
.cinematic-complete { width:min(1160px,calc(100vw - 20px)); min-height:min(720px,calc(100dvh - 20px)); padding:34px; grid-template-columns:minmax(520px,1.35fr) minmax(310px,.65fr); gap:34px; position:relative; border-color:rgba(102,235,255,.3); border-radius:30px; background:linear-gradient(145deg,rgba(18,25,60,.98),rgba(5,8,23,.99)); box-shadow:0 0 80px rgba(72,80,255,.25),inset 0 1px rgba(255,255,255,.1); }
.cinematic-grid { position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.25;background:repeating-linear-gradient(90deg,transparent 0 59px,rgba(94,224,255,.08) 60px),repeating-linear-gradient(0deg,transparent 0 59px,rgba(94,224,255,.08) 60px); }
.cinematic-grid i { position:absolute;border:1px solid rgba(110,108,255,.3);border-radius:50%;animation:cinematicOrbit 7s linear infinite; }.cinematic-grid i:nth-child(1){width:460px;height:460px;left:-170px;top:-160px}.cinematic-grid i:nth-child(2){width:620px;height:620px;right:-260px;bottom:-320px;animation-direction:reverse}.cinematic-grid i:nth-child(3){width:280px;height:280px;right:30%;top:12%}
.cinematic-complete .installed-stamp { position:relative;z-index:3;grid-column:1/-1;font-size:.66rem;padding:9px 16px; }
.assembly-stage { min-height:535px;border-radius:26px;--dock-x:clamp(260px,32vw,390px); }
.assembly-stage::before { font-size:.58rem;left:22px;top:19px; }
.install-pc { right:8%;top:74px;width:220px;height:342px;border-width:8px;border-radius:17px; }
.install-pc-depth { right:-24px;width:24px;height:325px; }
.install-pc-board { left:33px;top:60px;width:132px;height:182px; }
.install-slot { left:52px;top:134px;width:86px;height:52px; }
.install-pc > i { width:51px;height:51px;right:20px;bottom:26px; }.install-pc > b{left:19px;bottom:23px;font-size:.52rem}
.flying-component { left:7%;top:205px;width:145px;height:110px; }
.component-shell { transform:scale(1.28) rotateX(8deg) rotateY(-10deg); }
.install-energy { left:22%;right:28%;top:258px;height:4px; }
.assembly-particles i { left:28%;top:49%; }
.install-status { left:24px;right:24px;bottom:22px;font-size:.58rem; }
.complete-copy { position:relative;z-index:2; }.complete-copy h2 { font-size:clamp(2.25rem,4vw,3.8rem);line-height:.96;margin:.35rem 0 1.25rem; }.complete-copy .tip-card{padding:18px}.complete-copy .tip-card p{font-size:.88rem;line-height:1.6}.reward-line{padding-block:17px}.complete-copy .primary-button{min-height:54px;font-size:.7rem}

@keyframes componentDock { 0%{opacity:0;transform:translate3d(-65px,75px,160px) rotateY(-35deg) rotateZ(-14deg) scale(1.45)} 16%{opacity:1} 52%{transform:translate3d(70px,-38px,100px) rotateY(16deg) rotateZ(5deg) scale(1.2)} 76%{opacity:1;transform:translate3d(var(--dock-x),-8px,0) rotateY(0) rotateZ(0) scale(.56);filter:brightness(1.65)} 88%{transform:translate3d(calc(var(--dock-x) - 14px),-8px,0) scale(.56)} 100%{opacity:.22;transform:translate3d(calc(var(--dock-x) - 7px),-8px,-30px) scale(.5);filter:brightness(1.9)} }
@keyframes chargeReward { 50%{box-shadow:0 0 28px rgba(99,241,207,.35);transform:scale(1.015)} }
@keyframes cinematicOrbit { to{transform:rotate(360deg)} }

@media (max-width:1120px) {
    .map-layout { grid-template-columns:1fr; }
    .rig-panel { min-height:610px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(350px,430px) minmax(150px,1fr);grid-template-rows:auto 1fr auto auto; }
    .rig-heading { grid-column:1/-1; }.rig-viewport{grid-column:2;grid-row:2;}.rig-controls{grid-column:2;grid-row:3}.rotate-hint{grid-column:2;grid-row:4}.next-part{grid-column:3;grid-row:2/5;align-self:center}
}

@media (max-width:780px) {
    .rig-panel { min-height:610px;display:block;padding-inline:10px; }.rig-viewport{min-height:455px}.pc-case.interactive-rig{width:min(300px,78vw);height:390px}.interactive-rig .pc-board{transform:translateZ(50px) scale(.94);left:33px;top:55px}.interactive-rig .pc-psu{bottom:25px}.rig-controls{margin-top:2px}.rotate-hint{font-size:.43rem}
    .mobile-game-hud { grid-template-columns:36px minmax(0,1fr) auto auto 32px;gap:7px; }
    .mobile-target-icon { width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(100,235,255,.22);border-radius:10px;background:rgba(84,218,255,.07);overflow:hidden; }
    .mobile-target-icon .part-icon { width:78%;height:78%;transform:none;filter:none; }.mobile-target-icon .part-icon b{font-size:.34rem}.mobile-target-icon .part-icon.cpu{border-width:3px}.mobile-target-icon .part-icon.cpu::before,.mobile-target-icon .part-icon.cpu::after{inset:-5px 3px;border-width:2px}.mobile-target-icon .part-icon.power{border-width:2px}.mobile-target-icon .part-icon.fan{border-width:2px}.mobile-target-icon .part-icon.fan i{border-width:3px}.mobile-target-icon .part-icon.ram{border-width:2px;border-bottom-width:3px}.mobile-target-icon .part-icon.gpu{border-width:2px}.mobile-target-icon .part-icon.gpu i{border-width:1px}
    .mobile-game-hud .mobile-goal { min-width:0; }.mobile-game-hud .mobile-goal strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .mobile-objective-counters{grid-column:1/-1;display:grid!important;grid-template-columns:1fr 1fr;gap:6px;margin-top:1px}
    .mobile-objective-counter{min-width:0;min-height:46px;padding:5px 8px;border:1px solid rgba(103,239,255,.42);border-radius:10px;display:grid!important;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:7px;background:linear-gradient(105deg,rgba(72,104,255,.24),rgba(67,231,255,.1));box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 18px rgba(75,218,255,.12)}
    .mobile-game-hud .mobile-counter-icon{position:relative;width:34px;height:34px;border:1px solid rgba(114,242,255,.46);border-radius:9px;display:grid;place-items:center;overflow:hidden;color:#8cf5ff;background:rgba(6,13,37,.7);box-shadow:inset 0 0 12px rgba(86,230,255,.16),0 0 12px rgba(83,223,255,.18)}
    .mobile-counter-icon .part-icon{width:78%;height:78%;transform:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}.mobile-counter-icon .part-icon b{font-size:.3rem}.mobile-counter-icon .part-icon.cpu{border-width:3px}.mobile-counter-icon .part-icon.cpu::before,.mobile-counter-icon .part-icon.cpu::after{inset:-5px 3px;border-width:2px}.mobile-counter-icon .part-icon.gpu,.mobile-counter-icon .part-icon.ram,.mobile-counter-icon .part-icon.ssd,.mobile-counter-icon .part-icon.power,.mobile-counter-icon .part-icon.fan{border-width:2px}.mobile-counter-icon .part-icon.gpu i{border-width:1px}.mobile-counter-icon .part-icon.fan i{border-width:3px}
    .mobile-counter-copy{min-width:0;display:grid}.mobile-game-hud .mobile-counter-copy>span{color:#8cf5ff;font-size:.43rem;letter-spacing:.13em}.mobile-counter-copy p{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:5px;min-width:0}.mobile-counter-copy p strong{color:#fff;font:900 1.08rem/1 "Chakra Petch";text-shadow:0 0 11px rgba(101,237,255,.62)}.mobile-counter-copy p strong em{color:#8ba0c7;font:800 .61rem "Chakra Petch"}.mobile-game-hud .mobile-counter-copy p small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#bcd4ed;font:800 .45rem "Chakra Petch";letter-spacing:.05em;text-align:right}
    .mobile-objective-counter.obstacle-counter{border-color:rgba(255,181,74,.5);background:linear-gradient(105deg,rgba(255,118,54,.2),rgba(255,199,75,.08));box-shadow:inset 0 1px rgba(255,255,255,.1),0 0 18px rgba(255,159,61,.12)}.mobile-game-hud .obstacle-counter-icon{border-color:rgba(255,192,91,.55);color:#ffc568;box-shadow:inset 0 0 12px rgba(255,162,60,.17),0 0 12px rgba(255,150,48,.2)}.obstacle-counter-icon .obstacle{inset:3px;border-radius:6px}.obstacle-counter-icon>b{position:relative;z-index:7;color:#87f2ce;font:900 1rem "Chakra Petch"}.mobile-game-hud .obstacle-counter .mobile-counter-copy>span{color:#ffc568}.obstacle-counter .mobile-counter-copy p strong{color:#fff2cf;text-shadow:0 0 11px rgba(255,179,65,.65)}.mobile-game-hud .obstacle-counter .mobile-counter-copy p small{color:#ffd28a}.mobile-objective-counter.no-obstacles{border-color:rgba(107,239,190,.3);background:rgba(75,223,173,.07)}.mobile-game-hud .no-obstacles .mobile-counter-copy>span,.mobile-game-hud .no-obstacles .mobile-counter-copy p small{color:#75dbba}.no-obstacles .mobile-counter-copy p strong{color:#88f1cf;text-shadow:none}
    .special-activation-layer{--special-gap:3px;gap:3px;padding:5px}.special-hit{border-radius:6px}.special-beam.beam-row{height:5px}.special-beam.beam-column{width:5px}.special-power-core strong{font-size:.3rem}
    .game-screen { padding-bottom:calc(128px + env(safe-area-inset-bottom)); }
    .booster-panel { grid-template-rows:25px auto; }
    .lifeline-charge { min-height:24px;padding:3px 8px;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;border-radius:8px; }
    .lifeline-charge > div { display:contents; }.lifeline-charge > div span{font-size:.4rem}.lifeline-charge > div strong{font-size:.46rem}.lifeline-charge > i{grid-column:2;height:4px}.lifeline-charge small{display:none}
    .booster { min-height:68px; }
    .cinematic-complete { width:calc(100vw - 20px);height:calc(100dvh - 20px);min-height:0;padding:14px;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(290px,46vh) 1fr;gap:10px;border-radius:22px;overflow-x:hidden;overflow-y:auto;text-align:left; }
    .cinematic-complete .installed-stamp{margin:0;justify-self:center}.assembly-stage{min-height:290px;height:100%;--dock-x:clamp(170px,48vw,225px)}.assembly-stage::before{font-size:.42rem;left:13px;top:11px}.install-pc{right:7%;top:33px;width:140px;height:220px;border-width:5px}.install-pc-depth{right:-15px;width:15px;height:208px}.install-pc-board{left:21px;top:38px;width:82px;height:116px}.install-slot{left:32px;top:83px;width:55px;height:34px}.install-pc>i{width:34px;height:34px;right:11px;bottom:14px;border-width:4px}.flying-component{left:3%;top:104px;transform:scale(.9)}.component-shell{transform:scale(.94) rotateX(8deg) rotateY(-10deg)}.install-energy{left:25%;right:34%;top:148px}.install-status{left:12px;right:12px;bottom:10px;font-size:.42rem}.complete-copy{margin:0;animation-delay:1.05s}.complete-copy h2{font-size:1.75rem;margin:.2rem 0 .65rem}.complete-copy .tip-card{margin-top:6px;padding:10px}.complete-copy .tip-card p{font-size:.72rem;line-height:1.35}.reward-line{padding:9px 0}.complete-copy .primary-button{min-height:43px;margin:0}
}

@media (max-width:420px) {
    .mobile-game-hud { grid-template-columns:34px minmax(0,1fr) auto auto 30px;gap:5px;padding-inline:6px; }
    .mobile-game-hud .mobile-stat strong{font-size:1rem}.mobile-game-hud button{width:30px;height:30px}.mobile-target-icon{width:32px;height:32px}.mobile-objective-counter{grid-template-columns:32px minmax(0,1fr);padding-inline:6px;gap:5px}.mobile-game-hud .mobile-counter-icon{width:30px;height:30px}.mobile-counter-copy p strong{font-size:.98rem}.mobile-game-hud .mobile-counter-copy p small{font-size:.4rem}
    .rig-viewport{min-height:420px}.pc-case.interactive-rig{width:265px;height:355px}.interactive-rig .pc-board{left:24px;top:47px;transform:translateZ(50px) scale(.84)}.case-side{width:68px}.case-right{right:-34px}.case-left{left:-34px}.case-top,.case-bottom{height:68px}.case-top{top:-34px}.case-bottom{bottom:-34px}
}

/* Campaign navigation */
.stage-switcher { width:min(760px,100%);margin:-10px 0 26px;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center; }
.stage-switcher button { min-height:78px;padding:13px 16px;border:1px solid rgba(133,153,255,.2);border-radius:17px;color:#8390ad;background:linear-gradient(145deg,rgba(22,29,58,.86),rgba(8,13,29,.9));display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.06);transition:.22s ease; }
.stage-switcher button span { color:#6c7da0;font:800 .5rem "Chakra Petch";letter-spacing:.14em; }.stage-switcher button strong{font:850 1rem "Segoe UI"}.stage-switcher button small{grid-column:1/-1;color:#63718f;font:750 .5rem "Chakra Petch";letter-spacing:.08em}
.stage-switcher button.active { border-color:#70eaff;color:#fff;background:linear-gradient(145deg,rgba(91,92,255,.2),rgba(53,219,238,.08));box-shadow:0 16px 35px rgba(49,52,155,.25),inset 0 1px rgba(255,255,255,.12);transform:translateY(-3px)}
.stage-switcher button.active span,.stage-switcher button.active small{color:#73eaff}.stage-switcher button.quiz-locked:not(:disabled){border-color:rgba(255,193,91,.45);color:#ffd785;animation:gatewayPulse 1.8s ease-in-out infinite}.stage-switcher button:disabled{cursor:not-allowed;opacity:.5}
.stage-link { height:2px;background:#293451;position:relative}.stage-link i{position:absolute;left:50%;top:50%;width:16px;height:16px;border:2px solid #394867;background:#0a1022;transform:translate(-50%,-50%) rotate(45deg)}.stage-link.online{background:linear-gradient(90deg,#796dff,#62efff);box-shadow:0 0 13px rgba(98,239,255,.45)}.stage-link.online i{border-color:#6cefff;background:#655fff;box-shadow:0 0 16px #64eaff}
.stage-2 .map-copy h1 { background-image:linear-gradient(100deg,#fff,#ffd7f7 48%,#6ff5ff); }.stage-board-2 { border-color:rgba(255,112,211,.26);background:radial-gradient(circle at 70% 30%,rgba(255,91,203,.09),transparent 34%),repeating-linear-gradient(90deg,transparent 0 38px,rgba(102,235,255,.035) 39px 40px),repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,106,213,.035) 39px 40px),#10162d}.stage-board-2 .board-brand span{color:#ffd0f3}.stage-board-2 .level-node.ready{border-color:#ff79d8;background:linear-gradient(145deg,rgba(255,93,205,.18),rgba(77,225,255,.07))}.stage-board-2 .level-node.ready .node-pin{background:linear-gradient(145deg,#ff96e0,#796eff);border-color:#ffd6f4}.stage-board-2 .level-node.ready strong,.stage-board-2 .level-node.ready small{color:#fface6}

/* Build 02: wide silver creator workstation */
.rig-stage-2 { background:radial-gradient(circle at 50% 42%,rgba(255,104,210,.08),transparent 38%),linear-gradient(150deg,rgba(31,35,64,.9),rgba(8,14,30,.9));border-color:rgba(255,132,219,.2)}
.rig-stage-2 .rig-heading strong,.rig-stage-2 .rig-heading>b{color:#ff92db}.rig-stage-2 .rig-viewport{min-height:440px}
.workstation-rig.interactive-rig { --rig-rx:-7deg;--rig-ry:-20deg;--rig-zoom:1;position:relative;width:min(390px,88%);height:325px;margin:34px auto 20px;transform:perspective(1250px) rotateX(var(--rig-rx)) rotateY(var(--rig-ry)) scale(var(--rig-zoom));transform-style:preserve-3d;transform-origin:center;transition:transform .16s ease-out;cursor:grab;touch-action:none;will-change:transform}
.workstation-rig.dragging{cursor:grabbing;transition:none}.workstation-rig:focus-visible{outline:3px solid #ff8bdd;outline-offset:9px}
.ws-front,.ws-back,.ws-side,.ws-top,.ws-bottom { position:absolute;border:2px solid #9ca8c6;background:linear-gradient(145deg,#e8edf7,#8f9ab5 45%,#303c59);box-shadow:inset 0 0 24px rgba(255,255,255,.5),inset 0 -18px 32px rgba(20,28,51,.35);backface-visibility:hidden}
.ws-front{inset:0;border-width:10px 42px 10px 10px;border-radius:32px 9px 9px 32px;transform:translateZ(43px);clip-path:polygon(0 7%,8% 0,100% 0,100% 100%,8% 100%,0 93%)}.ws-front>span{position:absolute;right:-36px;bottom:52px;color:#222c48;font:900 .45rem "Chakra Petch";writing-mode:vertical-rl;letter-spacing:.14em}.ws-front>b{position:absolute;right:-34px;top:20px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#ff69ce,#716aff);font:900 .5rem "Chakra Petch";box-shadow:0 0 16px #ff68ce}
.ws-back{inset:0;border-width:8px;border-radius:14px;transform:rotateY(180deg) translateZ(43px);background:linear-gradient(145deg,#8894af,#2d3853)}.ws-back>span{position:absolute;left:25px;top:42px;width:125px;height:130px;border:4px solid #414e69;background:repeating-linear-gradient(0deg,#1c263e 0 12px,#69748d 13px 17px)}.ws-back>i{position:absolute;right:34px;width:86px;height:86px;border:10px dashed #43516c;border-radius:50%}.ws-back>i:nth-of-type(1){top:42px}.ws-back>i:nth-of-type(2){bottom:42px}
.ws-side{top:0;bottom:0;width:86px}.ws-left{left:-43px;transform:rotateY(-90deg);border-radius:20px 0 0 20px}.ws-right{right:-43px;transform:rotateY(90deg)}.ws-left>span{position:absolute;inset:24px 13px;border:2px solid #7f8ba6;border-radius:12px;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(25,35,59,.2) 9px 11px)}.ws-right>i{position:absolute;left:16px;width:50px;height:50px;border:7px dashed #4c5a74;border-radius:50%}.ws-right>i:nth-child(1){top:45px}.ws-right>i:nth-child(2){top:112px}.ws-right>i:nth-child(3){top:179px}
.ws-top,.ws-bottom{left:0;right:0;height:86px}.ws-top{top:-43px;transform:rotateX(90deg);border-radius:26px 8px 0 0}.ws-bottom{bottom:-43px;transform:rotateX(-90deg);background:#46516a}.ws-top>i{position:absolute;top:22px;width:42px;height:42px;border:7px dashed #596680;border-radius:50%}.ws-top>i:nth-child(1){left:75px}.ws-top>i:nth-child(2){left:172px}.ws-top>i:nth-child(3){right:75px}
.ws-glass { position:absolute;left:13px;right:47px;top:13px;bottom:13px;z-index:7;border:1px solid rgba(166,232,255,.48);border-radius:22px 3px 3px 22px;background:linear-gradient(118deg,rgba(182,239,255,.2),transparent 31%,rgba(255,124,218,.08) 70%,transparent);transform:translateZ(49px);backface-visibility:hidden;pointer-events:none}
.ws-board { position:absolute;left:52px;top:42px;width:225px;height:225px;opacity:.1;border:3px solid #7271b8;border-radius:14px;background:repeating-linear-gradient(45deg,rgba(109,236,255,.1) 0 1px,transparent 1px 13px),#15204a;box-shadow:inset 0 0 24px rgba(97,226,255,.15);transform:translateZ(52px);backface-visibility:hidden;transition:.5s}.ws-board.installed{opacity:1}.ws-board>span,.ws-psu,.ws-intake,.ws-io,.ws-render{opacity:.1;filter:grayscale(1);transition:.5s}.ws-board>span.installed,.ws-psu.installed,.ws-intake.installed,.ws-io.installed,.ws-render.installed{opacity:1;filter:none}
.ws-cpu{position:absolute;left:70px;top:42px;width:62px;height:62px;border:7px solid #9e8853;border-radius:8px;display:grid;place-items:center;color:#3f3215;background:linear-gradient(145deg,#fff2a8,#c79835);font:900 .58rem "Chakra Petch";box-shadow:inset 0 2px #fffbd5,0 0 18px rgba(255,214,86,.25)}.ws-aio{position:absolute;left:61px;top:33px;width:80px;height:80px;border:7px solid #40597b;border-radius:50%;background:#0b142c}.ws-aio i{position:absolute;inset:20%;border:6px dashed #7ff4ff;border-radius:50%;animation:spin 1.5s linear infinite}.ws-ram{position:absolute;top:35px;width:10px;height:78px;background:linear-gradient(#ff85d8,#6e55a8 80%,#e6c65d 81%)}.ws-ram.one{right:45px}.ws-ram.two{right:27px}.ws-nvme{position:absolute;right:22px;top:130px;width:80px;height:18px;background:#446c8b;color:#bff5ff;display:grid;place-items:center;font:800 .38rem "Chakra Petch"}.ws-gpu{position:absolute;left:15px;bottom:18px;width:188px;height:61px;border:2px solid #79738c;border-radius:8px;background:linear-gradient(145deg,#353748,#171927);display:flex;gap:7px;align-items:center;padding:7px}.ws-gpu i{width:42px;height:42px;border:5px dashed #ff76d3;border-radius:50%;animation:spin 2.3s linear infinite}.ws-gpu b{margin-left:auto;color:#ffa4df;font:800 .42rem "Chakra Petch"}
.ws-psu{position:absolute;left:31px;bottom:26px;width:120px;height:48px;border:2px solid #8b93a7;border-radius:10px;background:#42495a;color:#9ff5ff;display:grid;place-items:center;font:900 .52rem "Chakra Petch";transform:translateZ(53px);backface-visibility:hidden}.ws-intake{position:absolute;right:56px;top:38px;width:48px;height:212px;display:grid;gap:12px;transform:translateZ(54px);backface-visibility:hidden}.ws-intake i{width:48px;height:48px;border:7px dashed #6ef0ff;border-radius:50%;background:#182344;animation:spin 2s linear infinite}.ws-io{position:absolute;right:54px;bottom:26px;width:50px;height:10px;border-radius:6px;background:#ff72d2;box-shadow:0 0 18px #ff72d2;transform:translateZ(54px)}.ws-render{position:absolute;left:166px;bottom:28px;padding:6px 9px;border:1px solid #70efff;border-radius:7px;color:#b7fbff;background:#132d48;font:900 .42rem "Chakra Petch";letter-spacing:.06em;transform:translateZ(54px)}.workstation-rig.booted{filter:drop-shadow(0 0 28px rgba(255,98,207,.34)) drop-shadow(0 0 30px rgba(93,236,255,.22))}

/* Stage gateway quiz */
.stage-gate-backdrop{background:radial-gradient(circle at 50% 35%,rgba(91,96,255,.28),transparent 45%),rgba(2,5,17,.96)}.stage-quiz-card{width:min(720px,100%);min-height:610px;padding:40px;text-align:left;overflow:hidden}.quiz-orbit{width:90px;height:90px;margin:0 auto 20px;position:relative;display:grid;place-items:center;border:1px solid rgba(111,238,255,.28);border-radius:50%;box-shadow:0 0 34px rgba(94,106,255,.22)}.quiz-orbit i{position:absolute;inset:10px;border:2px dashed #6deeff;border-radius:50%;animation:spin 5s linear infinite}.quiz-orbit i:nth-child(2){inset:-9px;border-color:#a078ff;animation-direction:reverse;animation-duration:8s}.quiz-orbit b{font:900 2rem "Chakra Petch";color:#fff;text-shadow:0 0 18px #73eaff}.quiz-progress{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-bottom:24px;color:#7e8fb3;font:800 .55rem "Chakra Petch";letter-spacing:.12em}.quiz-progress strong{color:#79efff}.quiz-progress>i{grid-column:1/-1;height:5px;background:rgba(255,255,255,.09);border-radius:10px;overflow:hidden}.quiz-progress>i b{display:block;height:100%;background:linear-gradient(90deg,#7469ff,#5feeff);box-shadow:0 0 12px #5feeff;transition:width .3s}.stage-quiz-card h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:24px}.quiz-options{display:grid;gap:10px}.quiz-answer{min-height:62px;padding:10px 14px;border:1px solid rgba(133,156,255,.2);border-radius:15px;color:#dce5fa;background:rgba(255,255,255,.035);display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;transition:.2s}.quiz-answer span{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid #53617f;border-radius:10px;color:#75eaff;background:#111a33;font:900 .7rem "Chakra Petch"}.quiz-answer strong{font-size:.9rem}.quiz-answer:hover:not(:disabled){border-color:#72ecff;transform:translateX(5px)}.quiz-answer.correct{border-color:#61f0ca;background:rgba(74,236,190,.1);color:#82f8d8}.quiz-answer.correct span{border-color:#61f0ca;color:#071813;background:#67edca}.quiz-answer.wrong{border-color:#ff6d8c;background:rgba(255,77,119,.09);color:#ff9caf}.quiz-answer.wrong span{border-color:#ff6d8c;color:#fff;background:#9e344c}.quiz-answer.dimmed{opacity:.45}.quiz-feedback{margin:14px 0;padding:12px 14px;border-left:3px solid currentColor;border-radius:7px;color:#6feccc;background:rgba(91,240,202,.06);font-size:.78rem;line-height:1.5}.quiz-feedback.wrong{color:#ff9caf;background:rgba(255,91,129,.06)}.stage-quiz-card .primary-button{margin-top:10px}

/* Build gateway cinematic handoff */
.stage-unlock-backdrop{padding:0;background:#030616;overflow:hidden}.stage-unlock-card{width:100vw;height:100dvh;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 48%,rgba(87,107,255,.3),transparent 30%),linear-gradient(125deg,#090d26,#170c2c 55%,#071927)}.handoff-grid{position:absolute;inset:0;opacity:.28;background:repeating-linear-gradient(90deg,transparent 0 69px,rgba(95,225,255,.1) 70px),repeating-linear-gradient(0deg,transparent 0 69px,rgba(255,102,213,.07) 70px);animation:handoffGrid 2.8s ease-out both}.handoff-rig{position:absolute;top:19%;width:210px;height:330px;border:8px solid #354263;border-radius:18px;background:linear-gradient(145deg,#101b38,#050816);box-shadow:18px 22px 34px rgba(0,0,0,.5);display:grid;place-items:center;transform-style:preserve-3d}.handoff-rig span{position:absolute;top:-32px;color:#7082aa;font:800 .55rem "Chakra Petch";letter-spacing:.14em}.handoff-rig b{position:absolute;bottom:-30px;color:#8291b5;font:900 .62rem "Chakra Petch";letter-spacing:.12em}.handoff-rig>i{width:115px;height:190px;border:2px solid #4b5798;background:repeating-linear-gradient(45deg,rgba(95,236,255,.08) 0 1px,transparent 1px 12px),#101a3a}.old-rig{left:13%;animation:oldRigExit 2.6s ease-in-out both}.new-rig{right:12%;width:330px;height:260px;border-color:#b4bfd7;border-width:11px 48px 11px 11px;border-radius:35px 10px 10px 35px;background:linear-gradient(145deg,#f2f5fb,#707d9d 50%,#202c49);animation:newRigEnter 2.8s cubic-bezier(.2,.8,.2,1) both}.new-rig>i{position:absolute;width:56px;height:56px;border:8px dashed #ff78d4;border-radius:50%;background:#172341;animation:spin 1.4s linear infinite}.new-rig>i:nth-of-type(1){left:45px;top:45px}.new-rig>i:nth-of-type(2){left:125px;top:45px}.new-rig>i:nth-of-type(3){left:85px;top:128px}.new-rig b{color:#ffb1e6}.handoff-core{position:absolute;left:50%;top:37%;width:118px;height:118px;transform:translate(-50%,-50%);display:grid;place-items:center;border:2px solid #6ceeff;border-radius:50%;box-shadow:0 0 60px rgba(95,234,255,.5);animation:coreTransfer 2.5s ease-in-out both}.handoff-core i{position:absolute;inset:13px;border:2px dashed #ff7bd7;border-radius:50%;animation:spin 1.4s linear infinite}.handoff-core i:nth-child(2){inset:-18px;border-color:#766dff;animation-direction:reverse;animation-duration:2.1s}.handoff-core strong{font:900 2.2rem "Chakra Petch";color:#fff;text-shadow:0 0 20px #64eaff}.stage-unlock-copy{position:absolute;left:50%;bottom:7%;width:min(700px,90vw);transform:translateX(-50%);text-align:center;opacity:0;animation:unlockCopy 0.55s 2.05s forwards}.stage-unlock-copy h2{margin:.2rem 0 .7rem;font:900 clamp(2.6rem,7vw,5.6rem)/.9 "Segoe UI";letter-spacing:-.055em;background:linear-gradient(100deg,#fff,#ffb6e7,#6ceeff);-webkit-background-clip:text;background-clip:text;color:transparent}.stage-unlock-copy p:not(.eyebrow){max-width:630px;margin:0 auto 18px;color:#abb8d5;line-height:1.6}.stage-unlock-copy .primary-button{width:min(390px,100%)}

/* Stage-two install component silhouettes */
.component-level-11 .component-shell{width:102px;height:92px;border-color:#7b72bc;background:repeating-linear-gradient(45deg,rgba(255,112,215,.13) 0 1px,transparent 1px 11px),linear-gradient(145deg,#315777,#172844)}.component-level-11 .component-shell i{display:block;width:18px;height:18px;border:2px solid #78efff;border-radius:3px}.component-level-11 .component-shell i:nth-child(1){left:12px;top:12px}.component-level-11 .component-shell i:nth-child(2){right:12px;top:12px}.component-level-11 .component-shell i:nth-child(3){left:12px;bottom:12px}.component-level-11 .component-shell i:nth-child(4){right:12px;bottom:12px}
.component-level-12 .component-shell{width:84px;height:84px;border:10px solid #9a8248;color:#392d10;background:linear-gradient(145deg,#fff3aa,#d0a13b);box-shadow:inset 0 2px #fffbd2,0 0 34px rgba(255,207,77,.4)}.component-level-12 .component-shell i{display:none}.component-level-13 .component-shell,.component-level-18 .component-shell{width:94px;height:94px;border:8px solid #5486a2;border-radius:50%;background:radial-gradient(circle,#d9ffff 0 6%,#28546c 7% 18%,#09172b 19%)}.component-level-13 .component-shell i,.component-level-18 .component-shell i{display:block;left:50%;top:50%;width:38px;height:13px;margin:-6px 0 0;border:0;border-radius:100% 20%;transform-origin:0 50%;background:#76efff}.component-level-13 .component-shell i:nth-child(2),.component-level-18 .component-shell i:nth-child(2){transform:rotate(90deg)}.component-level-13 .component-shell i:nth-child(3),.component-level-18 .component-shell i:nth-child(3){transform:rotate(180deg)}.component-level-13 .component-shell i:nth-child(4),.component-level-18 .component-shell i:nth-child(4){transform:rotate(270deg)}.component-level-14 .component-shell{width:120px;height:46px;border-color:#ff72cf;border-bottom:7px solid #e8ca55;background:linear-gradient(145deg,#81486f,#392442)}.component-level-14 .component-shell i{display:block;top:9px;width:14px;height:20px;border:1px solid #ffc1e9;border-radius:2px;background:#1c1720;animation:none}.component-level-14 .component-shell i:nth-child(1){left:10px}.component-level-14 .component-shell i:nth-child(2){left:34px}.component-level-14 .component-shell i:nth-child(3){right:34px}.component-level-14 .component-shell i:nth-child(4){right:10px}.component-level-15 .component-shell{width:102px;height:66px;border-color:#78c9e9;background:linear-gradient(145deg,#4389ad,#1b405a)}.component-level-15 .component-shell i{display:none}.component-level-17 .component-shell{width:98px;height:82px;border-color:#a4acbd;background:linear-gradient(145deg,#606a7c,#252b37)}.component-level-17 .component-shell i{display:none}.component-level-19 .component-shell{width:64px;height:100px;border-color:#ff89d8;background:linear-gradient(145deg,#aa6f9a,#4c3a59)}.component-level-19 .component-shell i{display:block;left:19px;width:18px;height:11px;border:2px solid #362d41;border-radius:3px;animation:none}.component-level-19 .component-shell i:nth-child(1){top:9px}.component-level-19 .component-shell i:nth-child(2){top:33px}.component-level-19 .component-shell i:nth-child(3){top:57px}.component-level-19 .component-shell i:nth-child(4){top:80px}.component-level-20 .component-shell{width:90px;height:90px;border-color:#ff83d8;border-radius:50%;color:#160b22;background:radial-gradient(circle,#fff 0 8%,#ff9ce0 9% 34%,#6b7bff 35% 61%,#17204a 62%);box-shadow:0 0 46px rgba(255,105,210,.55)}.component-level-20 .component-shell i{display:none}

@keyframes gatewayPulse{50%{box-shadow:0 0 28px rgba(255,188,82,.23)}}
@keyframes handoffGrid{from{opacity:0;transform:scale(1.25)}to{opacity:.28;transform:scale(1)}}
@keyframes oldRigExit{0%,35%{opacity:1;transform:translateX(0) rotateY(-12deg)}75%,100%{opacity:.18;transform:translateX(-42vw) rotateY(-70deg) scale(.65);filter:blur(4px)}}
@keyframes newRigEnter{0%,28%{opacity:0;transform:translateX(45vw) rotateY(75deg) scale(.65)}75%{opacity:1;transform:translateX(-18px) rotateY(-8deg) scale(1.04)}100%{opacity:1;transform:translateX(0) rotateY(-5deg) scale(1)}}
@keyframes coreTransfer{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(22vw,-50%) scale(.35)}}
@keyframes unlockCopy{to{opacity:1;transform:translateX(-50%) translateY(-8px)}}

@media(max-width:780px){
    .stage-gate-backdrop{padding:9px}
    .stage-switcher{grid-template-columns:1fr 28px 1fr;margin:0 0 20px}.stage-switcher button{min-height:72px;padding:10px;display:block}.stage-switcher button span,.stage-switcher button strong,.stage-switcher button small{display:block}.stage-switcher button strong{font-size:.78rem;margin:3px 0}.stage-switcher button small{font-size:.4rem}.stage-link i{width:11px;height:11px}
    .rig-stage-2{min-height:535px}.rig-stage-2 .rig-viewport{min-height:375px}.workstation-rig.interactive-rig{width:min(315px,78vw);height:265px;margin:45px auto 20px}.ws-side{width:70px}.ws-left{left:-35px}.ws-right{right:-35px}.ws-top,.ws-bottom{height:70px}.ws-top{top:-35px}.ws-bottom{bottom:-35px}.ws-board{left:37px;top:27px;transform:translateZ(52px) scale(.78);transform-origin:left top}.ws-psu{left:22px;bottom:19px;transform:translateZ(53px) scale(.82);transform-origin:left bottom}.ws-intake{right:45px;top:30px;transform:translateZ(54px) scale(.82);transform-origin:right top}.ws-io{right:45px;bottom:21px}.ws-render{left:130px;bottom:21px}.ws-front{border-right-width:34px}.ws-front>span{right:-29px}.ws-front>b{right:-29px}
    .stage-quiz-card{width:100%;min-height:calc(100dvh - 18px);padding:22px 16px;border-radius:22px;display:flex;flex-direction:column;justify-content:center}.quiz-orbit{width:70px;height:70px;margin-bottom:12px}.quiz-progress{margin-bottom:15px}.stage-quiz-card h2{font-size:1.65rem;margin-bottom:16px}.quiz-answer{min-height:56px}.quiz-feedback{font-size:.7rem}
    .handoff-rig{top:13%;width:120px;height:190px;border-width:5px}.handoff-rig>i{width:68px;height:105px}.old-rig{left:8%}.new-rig{right:5%;width:190px;height:150px;border-width:7px 31px 7px 7px}.new-rig>i{width:32px;height:32px;border-width:5px}.new-rig>i:nth-of-type(1){left:27px;top:28px}.new-rig>i:nth-of-type(2){left:75px;top:28px}.new-rig>i:nth-of-type(3){left:51px;top:78px}.handoff-core{top:28%;width:78px;height:78px}.stage-unlock-copy{bottom:8%}.stage-unlock-copy h2{font-size:2.65rem}.stage-unlock-copy p:not(.eyebrow){font-size:.82rem;line-height:1.45}
}

/* Ten-build campaign navigation and themed system progression */
.stage-switcher{width:100%;max-width:none;margin:-10px 0 26px;padding:6px 3px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(175px,1fr);grid-template-columns:none;gap:10px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-color:#5966b8 rgba(255,255,255,.05)}
.stage-switcher button{min-width:0;min-height:82px;scroll-snap-align:start}.stage-switcher button.active{transform:translateY(-2px)}
.rig-stage-2{--stage-accent:#ff7bd5;--stage-accent-2:#70edff}.rig-stage-3{--stage-accent:#48efff;--stage-accent-2:#7b72ff}.rig-stage-4{--stage-accent:#ffbd45;--stage-accent-2:#ff654f}.rig-stage-5{--stage-accent:#a875ff;--stage-accent-2:#ff6eca}.rig-stage-6{--stage-accent:#70f3bf;--stage-accent-2:#4ca7ff}.rig-stage-7{--stage-accent:#ff825f;--stage-accent-2:#ffd65d}.rig-stage-8{--stage-accent:#62d8ff;--stage-accent-2:#6270ff}.rig-stage-9{--stage-accent:#d388ff;--stage-accent-2:#69fff1}.rig-stage-10{--stage-accent:#ffdf64;--stage-accent-2:#ff5cb6}
.rig-panel[class*="rig-stage-"]:not(.rig-stage-1){border-color:color-mix(in srgb,var(--stage-accent) 28%,transparent);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--stage-accent) 10%,transparent),transparent 38%),linear-gradient(150deg,rgba(31,35,64,.9),rgba(8,14,30,.9))}.rig-panel[class*="rig-stage-"]:not(.rig-stage-1) .rig-heading strong,.rig-panel[class*="rig-stage-"]:not(.rig-stage-1) .rig-heading>b{color:var(--stage-accent)}
.stage-rig-model .ws-front,.stage-rig-model .ws-back,.stage-rig-model .ws-side,.stage-rig-model .ws-top,.stage-rig-model .ws-bottom{border-color:color-mix(in srgb,var(--stage-accent) 52%,#73809d);background:linear-gradient(145deg,color-mix(in srgb,var(--stage-accent) 18%,#e8edf7),color-mix(in srgb,var(--stage-accent-2) 16%,#8f9ab5) 45%,#27324d)}.stage-rig-model .ws-front>b{background:linear-gradient(145deg,var(--stage-accent),var(--stage-accent-2));box-shadow:0 0 18px var(--stage-accent)}.stage-rig-model .ws-front>span{color:color-mix(in srgb,var(--stage-accent) 52%,#1d2740)}.stage-rig-model .ws-glass{border-color:color-mix(in srgb,var(--stage-accent-2) 58%,transparent);background:linear-gradient(118deg,color-mix(in srgb,var(--stage-accent-2) 22%,transparent),transparent 31%,color-mix(in srgb,var(--stage-accent) 13%,transparent) 70%,transparent)}.stage-rig-model .ws-board{border-color:var(--stage-accent);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--stage-accent-2) 14%,transparent) 0 1px,transparent 1px 13px),#121b3c}.stage-rig-model .ws-ram{background:linear-gradient(var(--stage-accent),color-mix(in srgb,var(--stage-accent) 38%,#49377d) 80%,#e6c65d 81%)}.stage-rig-model .ws-gpu i,.stage-rig-model .ws-intake i{border-color:var(--stage-accent)}.stage-rig-model .ws-io{background:var(--stage-accent);box-shadow:0 0 18px var(--stage-accent)}.stage-rig-model .ws-render{border-color:var(--stage-accent-2);color:color-mix(in srgb,var(--stage-accent-2) 70%,white)}
.stage-model-3 .ws-front{border-radius:8px 38px 38px 8px}.stage-model-4 .ws-front{clip-path:polygon(0 0,94% 0,100% 14%,100% 86%,94% 100%,0 100%)}.stage-model-5 .ws-front{border-radius:48px 12px 48px 12px}.stage-model-6 .ws-front{border-width:8px 54px 8px 8px}.stage-model-7 .ws-front{clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 82%,0 18%)}.stage-model-8 .ws-front{border-radius:5px}.stage-model-9 .ws-front{border-radius:50px 10px 10px 50px}.stage-model-10 .ws-front{border-width:12px 48px;border-radius:28px;box-shadow:inset 0 0 35px color-mix(in srgb,var(--stage-accent) 28%,transparent),0 0 35px color-mix(in srgb,var(--stage-accent-2) 20%,transparent)}
.stage-3 .map-copy h1,.stage-6 .map-copy h1,.stage-8 .map-copy h1{background-image:linear-gradient(100deg,#fff,#a8fbff 48%,#7774ff)}.stage-4 .map-copy h1,.stage-7 .map-copy h1,.stage-10 .map-copy h1{background-image:linear-gradient(100deg,#fff,#ffe69b 48%,#ff6a83)}.stage-5 .map-copy h1,.stage-9 .map-copy h1{background-image:linear-gradient(100deg,#fff,#e2b6ff 48%,#6ff5ff)}
.component-slot-1 .component-shell{width:102px;height:92px;border-color:#7b72bc;background:repeating-linear-gradient(45deg,rgba(112,235,255,.14) 0 1px,transparent 1px 11px),linear-gradient(145deg,#315777,#172844)}.component-slot-2 .component-shell{width:84px;height:84px;border:10px solid #9a8248;color:#392d10;background:linear-gradient(145deg,#fff3aa,#d0a13b)}.component-slot-3 .component-shell,.component-slot-8 .component-shell{width:94px;height:94px;border:8px solid #5486a2;border-radius:50%;background:radial-gradient(circle,#d9ffff 0 6%,#28546c 7% 18%,#09172b 19%)}.component-slot-4 .component-shell{width:120px;height:46px;border-color:#ff72cf;border-bottom:7px solid #e8ca55;background:linear-gradient(145deg,#81486f,#392442)}.component-slot-5 .component-shell{width:102px;height:66px;border-color:#78c9e9;background:linear-gradient(145deg,#4389ad,#1b405a)}.component-slot-6 .component-shell{width:132px;height:74px;border-color:#b480ff;background:linear-gradient(145deg,#554072,#221c35)}.component-slot-7 .component-shell{width:98px;height:82px;border-color:#a4acbd;background:linear-gradient(145deg,#606a7c,#252b37)}.component-slot-9 .component-shell{width:64px;height:100px;border-color:#ff89d8;background:linear-gradient(145deg,#aa6f9a,#4c3a59)}.component-slot-10 .component-shell{width:90px;height:90px;border-color:#ff83d8;border-radius:50%;color:#160b22;background:radial-gradient(circle,#fff 0 8%,#ff9ce0 9% 34%,#6b7bff 35% 61%,#17204a 62%);box-shadow:0 0 46px rgba(255,105,210,.55)}
@media(max-width:780px){.stage-switcher{grid-auto-columns:minmax(145px,43vw);grid-template-columns:none!important;margin-bottom:18px;padding-bottom:10px}.stage-switcher button{min-height:70px;padding:9px 10px}.rig-panel[class*="rig-stage-"]:not(.rig-stage-1){min-height:535px}.rig-panel[class*="rig-stage-"]:not(.rig-stage-1) .rig-viewport{min-height:375px}}