.shell-preview { position: relative; min-height: 365px; overflow: hidden; border: 8px solid #1b2029; border-radius: 8px; background: radial-gradient(circle at 72% 30%, #17202d, #080b11 58%); box-shadow: 0 30px 70px rgba(0,0,0,.62), inset 0 0 0 1px #454b56; transform: perspective(1200px) rotateY(-1deg); }
.shell-preview::after { content: ""; position: absolute; left: 36%; right: 36%; bottom: -42px; height: 40px; background: linear-gradient(#242933, #0a0c10); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.shell-topbar { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 74px; color: #eef0f5; }
.shell-topbar span { color: #acb2bd; font-size: .8rem; }
.shell-layout { display: grid; grid-template-columns: 66px 1fr; min-width: 0; }
.shell-rail { display: flex; flex-direction: column; align-items: center; gap: 30px; color: #707886; }
.shell-rail .active { color: var(--violet); text-shadow: 0 0 12px rgba(151, 85, 255, .8); }
.game-row { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 12px; padding: 0 20px 25px 0; overflow: hidden; }
.game-card { min-width: 0; height: 240px; padding: 6px; border: 1px solid #28313d; border-radius: 11px; background: #101620; }
.game-card.is-selected { border: 2px solid #b860ff; box-shadow: 0 0 16px #8d41ea, inset 0 0 18px rgba(145,72,234,.2); transform: translateY(-6px); }
.game-art { display: grid; height: 148px; place-items: end start; padding: 12px; overflow: hidden; border-radius: 7px; background: linear-gradient(145deg, #15263d, #4d255e); position: relative; }
.game-art::before, .game-art::after { content: ""; position: absolute; border-radius: 50%; filter: blur(3px); }
.game-art::before { width: 110px; height: 110px; right: -28px; top: -28px; background: rgba(255,116,42,.45); }
.game-art::after { width: 75px; height: 75px; left: 18px; bottom: -34px; background: rgba(92,95,255,.45); }
.game-card--blue .game-art { background: linear-gradient(145deg, #0b1826, #214b70); }
.game-card--indigo .game-art { background: linear-gradient(145deg, #17183d, #70442b); }
.game-card--green .game-art { background: linear-gradient(145deg, #0b2820, #384122); }
.game-card--orange .game-art { background: linear-gradient(145deg, #351609, #74441a); }
.game-art span { position: relative; z-index: 2; font-size: 1.7rem; font-weight: 900; opacity: .72; }
.game-card h3 { margin: 11px 3px 5px; font-size: .78rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-card p { margin: 0 3px; font-size: .68rem; }
.device-chip { position: absolute; left: 24%; bottom: 12px; width: 170px; height: 80px; padding: 12px; border: 1px solid #5d4631; border-radius: 5px; background: linear-gradient(145deg, #40311d, #151514); box-shadow: 0 18px 34px #000; transform: rotate(-2deg); color: #ee6c2c; }
.chip-grid { display: block; height: 35px; margin-bottom: 5px; background: repeating-linear-gradient(90deg, transparent 0 9px, #b39747 10px 11px), repeating-linear-gradient(0deg, transparent 0 9px, #b39747 10px 11px); opacity: .7; }
.controller { position: absolute; right: 5%; bottom: -15px; width: 270px; height: 130px; border-radius: 62px 62px 45px 45px; background: linear-gradient(165deg, #393a40, #121318 62%); box-shadow: 0 24px 38px #000; transform: rotate(4deg); }
.stick { position: absolute; width: 38px; height: 38px; border: 8px solid #0b0c10; border-radius: 50%; background: #2d3038; box-shadow: inset 0 0 0 2px #555963; }
.stick--left { left: 52px; top: 25px; }.stick--right { right: 83px; bottom: 22px; }
.dpad { position: absolute; left: 76px; bottom: 18px; color: #777c86; font-size: 2rem; }
.keys { position: absolute; right: 35px; top: 30px; color: #858b94; line-height: 1.1; transform: rotate(-15deg); }

.timeline { max-width: 1020px; display: grid; gap: 2px; }
.timeline article { display: grid; grid-template-columns: 105px 1fr; gap: 28px; padding: 34px 38px; border: 1px solid var(--border-soft); background: rgba(12,17,25,.83); }
.timeline article:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.timeline article:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.timeline article > span { color: var(--orange-light); font-size: 1.8rem; font-weight: 900; }
.timeline h2 { margin-bottom: 8px; }.timeline p { margin: 0; }

.compatibility-panel { padding: 28px; }
.toolbar { display: grid; grid-template-columns: 1fr 220px; gap: 16px; }
.search-field input, .filter-button { width: 100%; height: 52px; border: 1px solid var(--border); border-radius: 8px; background: #090d13; color: #8f96a2; padding: 0 18px; }
.empty-state { min-height: 330px; display: grid; place-items: center; align-content: center; padding: 40px 20px; text-align: center; }
.empty-state h2 { margin: 12px 0 6px; }.empty-state p { max-width: 520px; }
.empty-icon { color: var(--violet); font-size: 3.3rem; }
.status-pill { display: inline-flex; padding: 6px 12px; border: 1px solid #5d3d78; border-radius: 999px; background: rgba(144,76,210,.12); color: #c88cff; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.guide-grid { padding-bottom: 40px; }
.guide-card { min-height: 230px; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, #111720, #080c12); }
.guide-card > span { color: var(--orange-light); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-card h2 { margin: 24px 0 9px; font-size: 1.4rem; }
.guide-card a { color: #777e89; font-size: .86rem; }

.content-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 26px; }
.content-card, .principles-card { padding: clamp(28px, 4vw, 58px); border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, #111720, #080c12); }
.content-card blockquote { margin: 35px 0 0; padding: 20px 0 20px 28px; border-left: 3px solid var(--orange); color: #fff; font-size: 1.35rem; font-weight: 700; }
.principles-card ul { display: grid; gap: 16px; padding-left: 20px; color: var(--muted); }
.principles-card li::marker { color: var(--orange); }

.download-panel { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 44px; }
.download-panel h2 { margin: 20px 0 8px; }.download-panel p { margin-bottom: 0; }
.requirement-grid { padding-top: 28px; }
.requirement-grid article { padding: 28px; border-top: 1px solid var(--border); }
.requirement-grid span { color: var(--orange-light); font-weight: 900; }
.requirement-grid h3 { margin: 16px 0 7px; }
.prose { max-width: 900px; padding: 48px; }
.error-page .button { margin-top: 18px; }

/* About: creator story and handwritten signature. */
.about-layout { align-items: start; }
.about-story > h2:not(:first-child) { margin-top: 40px; }
.about-story > p { line-height: 1.8; }
.about-author { margin-top: 36px; }
.about-author p { margin: 0; }
.about-author strong { color: #fff; }
.about-signature { display: block; width: 80px; max-width: 100%; height: auto; margin: 10px 0 14px; }