body:has(.game-arcade) { background: radial-gradient(circle at 20% 0%, #23306b 0, #111733 45%, #0b1024 100%) fixed; }
.computer-game { max-width: 1180px; color: #17384d; }
.computer-game [hidden] { display: none !important; }
.computer-game button:disabled { cursor: wait; }
.game-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; margin-bottom: .35rem; opacity: .85; }
.game-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 26px; border-radius: 22px; color: #fff; background: linear-gradient(125deg, #12344d, #126782, #148577); box-shadow: 0 0 0 3px #ffffff1f, 0 12px 30px #0006; }
.game-hero h1 { font-weight: 900; color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: .2rem; text-shadow: 0 3px 0 #0003; }
.game-hero-links { display: flex; gap: 8px; flex-wrap: wrap; }
.cyber-game .game-hero { background: linear-gradient(125deg, #1d2347, #45346e, #126782); }
.game-panel, .computer-game .card { border: 0; border-radius: 20px; background: #fff; padding: 22px; box-shadow: 0 0 0 3px #ffffff26, 0 14px 30px #0005; }
.start-screen { text-align: center; }
.start-screen h2 { font-weight: 900; }
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 640px; margin: 18px auto 0; }
.mode-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(160deg, #18a999, #0f7a8a); box-shadow: 0 6px 0 #0a5560; transition: transform .12s; }
.mode-card.challenge { background: linear-gradient(160deg, #f7a325, #e8590c); box-shadow: 0 6px 0 #a63c06; }
.mode-card:hover { transform: translateY(-3px); }
.mode-card:active { transform: translateY(4px); box-shadow: 0 2px 0 #0004; }
.mode-card strong { font-size: 1.4rem; }
.mode-card em { margin-top: 6px; padding: 4px 14px; border-radius: 99px; background: #ffffff33; font-style: normal; font-weight: 700; }
.mode-icon { font-size: 2.4rem; }
.btn-game { border: 0; border-radius: 14px; padding: 10px 22px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #18a999, #0f7a8a); box-shadow: 0 5px 0 #0a5560; }
.btn-game:hover { color: #fff; filter: brightness(1.08); }
.btn-game:active { transform: translateY(3px); box-shadow: 0 2px 0 #0a5560; }
.cyber-game .btn-game { background: linear-gradient(160deg, #7b5cd6, #45346e); box-shadow: 0 5px 0 #2a1f47; }
.game-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: #0b1024cc; color: #fff; box-shadow: 0 0 0 2px #ffffff26; }
.hud-pill { padding: 5px 12px; border-radius: 99px; background: #ffffff1a; font-weight: 700; font-size: .9rem; }
.hud-pill strong { color: #ffd23f; }
.game-hud progress { flex: 1 1 160px; height: 14px; accent-color: #3bceac; }
.stage-panel { background: linear-gradient(180deg, #eef7fb, #fff); }
.mission-card { min-height: 100%; display: flex; flex-direction: column; }
.mission-options { display: grid; gap: 12px; }
.mission-options label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 3px solid #cfe0ea; border-radius: 16px; cursor: pointer; background: #fff; font-weight: 600; transition: transform .1s, border-color .1s; }
.mission-options label:hover { transform: translateY(-2px); border-color: #7fb8cc; }
.mission-options label:has(input:checked) { border-color: #18a999; background: #e3f8f4; box-shadow: 0 4px 0 #18a999; }
.cyber-game .mission-options label:has(input:checked) { border-color: #7b5cd6; background: #efeafd; box-shadow: 0 4px 0 #7b5cd6; }
.mission-options label:focus-within { outline: 3px solid #126782; outline-offset: 3px; }
.computer-game form { display: block; text-align: left; }
.computer-game fieldset { min-width: 0; width: 100%; }
.mission-options label { position: relative; }
.mission-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.build-game .mission-options { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.part-card { flex-direction: column; text-align: center; }
.part-icon { font-size: 2.4rem; line-height: 1; }
.action-key { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #45346e; color: #fff; font-weight: 900; }
.buddy { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 16px; background: #fff8dd; border: 2px solid #ffd23f; }
.buddy-face { font-size: 2.2rem; line-height: 1; }
.pc-build { display: grid; grid-template-columns: 1fr 90px; grid-template-areas: "monitor tower" "ports tower"; gap: 10px; padding: 14px; border-radius: 16px; background: #12233d; }
.pc-monitor { grid-area: monitor; }
.pc-screen { position: relative; min-height: 120px; border: 8px solid #2c4a63; border-radius: 10px; background: #071222; color: #3bceac; text-align: center; padding: 8px; transition: background .5s; }
.pc-screen > span { display: block; font-weight: 900; letter-spacing: .2em; opacity: .4; }
.pc-screen.booted { background: linear-gradient(130deg, #126782, #18a999); color: #fff; }
.pc-screen.booted > span::after { content: ' ✓ BOOTED'; }
.pc-tower { grid-area: tower; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; background: #2c4a63; padding: 8px; }
.pc-ports { grid-area: ports; border-radius: 10px; background: #1f3850; padding: 8px; }
.pc-zone { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pc-tower .pc-zone { flex-direction: column; align-items: center; }
.pc-slot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; border: 2px dashed #ffffff55; background: #ffffff10; color: #fff; font-size: 1.6rem; line-height: 1; padding: 0; }
.pc-slot.empty { opacity: .35; pointer-events: none; }
.pc-slot.target { border: 3px solid #ffd23f; background: #ffd23f33; animation: glowSlot 1.1s infinite; cursor: pointer; }
.pc-slot.ok { border: 2px solid #3bceac; background: #3bceac44; }
.pc-slot.bad { border: 2px solid #ee4266; background: #ee426644; }
.pc-slot.installed { border: 2px solid #8fb3d1; background: #8fb3d133; }
.pc-power { width: 20px; height: 20px; margin: 8px auto 0; border-radius: 50%; background: #445; box-shadow: inset 0 0 0 3px #0005; }
.pc-power.on { background: #3bceac; box-shadow: 0 0 12px #3bceac; }
.scene { border-radius: 18px; overflow: hidden; background: #f5f3ff; border: 3px solid #45346e; }
.scene-bar { padding: 10px 14px; background: #45346e; color: #fff; }
.scene[data-type="chat"] .scene-body .clue { border-radius: 16px 16px 16px 4px; background: #e9e4ff; }
.scene[data-type="browser"] .scene-bar { background: #2c4a63; }
.scene-tip { margin: 10px 14px 0; font-size: .85rem; font-weight: 700; color: #45346e; }
.scene-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.clue { text-align: left; padding: 10px 12px; border: 2px solid transparent; border-radius: 10px; background: #fff; color: #1d2347; overflow-wrap: anywhere; cursor: zoom-in; transition: transform .1s; }
.clue:hover { border-color: #b4a6e8; transform: translateX(3px); }
.clue.found { border-color: #ee4266; background: #ffe3ea; cursor: default; }
.clue.found::before { content: '🚩 '; }
.clue.clean { border-color: #cfd6e4; background: #f1f4f8; color: #5b6b80; cursor: default; }
.clue.clean::before { content: '✓ '; }
.clue-counter { margin: 0; padding: 8px 14px 14px; font-weight: 800; color: #45346e; }
.mission-feedback { padding: 18px; border-radius: 16px; }
.mission-feedback.win { background: #e3f8f4; border: 3px solid #18a999; }
.mission-feedback.miss { background: #fff1e6; border: 3px solid #f7a325; }
.stamp { display: inline-block; padding: 4px 16px; border: 4px solid currentColor; border-radius: 10px; font-weight: 900; font-size: 1.4rem; letter-spacing: .08em; transform: rotate(-4deg); color: #0f7a8a; }
.miss .stamp { color: #d9480f; }
.result-stars { font-size: 3rem; color: #f7a325; letter-spacing: .1em; margin: 0; }
.skill-result { padding: 12px; margin-top: 8px; border-radius: 12px; background: #eef5f8; }
.skill-result small { display: block; }
.skill-bar { height: 10px; border-radius: 99px; background: #d5e4eb; margin: 6px 0; overflow: hidden; }
.skill-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3bceac, #18a999); }
.review-list { margin-top: 14px; padding-left: 20px; }
.review-list li { margin-bottom: 8px; }
.history-panel summary { cursor: pointer; }
.game-history-entry { border-top: 1px solid #d5e4eb; padding: 14px 0; }
.bounce { animation: bounce .5s; }
.pop { animation: pop .35s; }
.shake { animation: shake .45s; }
.glow { animation: glowBox .9s; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.confetti i { position: absolute; top: -10px; width: 10px; height: 14px; border-radius: 2px; animation: fall 2.2s linear forwards; }
@keyframes bounce { 30% { transform: translateY(-8px) scale(1.15); } 60% { transform: translateY(0) scale(.95); } }
@keyframes pop { 50% { transform: scale(1.05); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes glowBox { 50% { box-shadow: 0 0 0 4px #3bceac, 0 0 30px #3bceac; } }
@keyframes glowSlot { 50% { box-shadow: 0 0 14px #ffd23f; } }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .pc-slot.target, .bounce, .pop, .shake, .glow { animation: none; } }
.computer-game .mode-card { border-radius: 18px; }