:root {
  --black: #09090b;
  --panel: #151518;
  --panel-2: #202025;
  --cream: #f3efdc;
  --muted: #97938a;
  --red: #ff3d24;
  --yellow: #f5d900;
  --line: #35343a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--cream); background: var(--black); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.section-wrap { width: min(1320px, calc(100% - 72px)); margin-inline: auto; }
.noise { position: fixed; inset: 0; z-index: 50; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.site-header { position: absolute; top: 0; left: 50%; z-index: 10; width: min(1400px, calc(100% - 48px)); height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transform: translateX(-50%); border-bottom: 1px solid #343238; }
.brand { display: flex; align-items: center; gap: 13px; width: fit-content; }
.brand-token { width: 39px; height: 39px; display: grid; place-items: center; color: #09090b; background: var(--yellow); box-shadow: 4px 4px 0 var(--red); font: 900 24px/1 Georgia, serif; transform: rotate(-4deg); }
.brand-copy b, .brand-copy small { display: block; }
.brand-copy b { font-size: 15px; letter-spacing: .1em; }
.brand-copy small { margin-top: 4px; color: #aaa59a; font: 8px/1 monospace; letter-spacing: .2em; }
nav { display: flex; align-items: center; gap: 32px; height: 100%; }
nav a { position: relative; color: #858179; font-size: 12px; }
nav a:hover, nav a.active { color: var(--cream); }
nav a.active::after { content: ""; position: absolute; left: 50%; bottom: -35px; width: 5px; height: 5px; background: var(--red); transform: translateX(-50%) rotate(45deg); }
.header-actions { display: flex; align-items: center; justify-content: end; gap: 18px; }
.local-badge { color: #8a867e; font: 9px/1 monospace; letter-spacing: .12em; }
.local-badge i { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: #58db6b; box-shadow: 0 0 10px #58db6b; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 46px; padding: 0 21px; border: 0; border-radius: 0; font-weight: 900; font-size: 12px; }
.button-yellow { color: #0b0b0d; background: var(--yellow); box-shadow: 4px 4px 0 var(--red); }
.button-red { min-width: 164px; color: white; background: var(--red); box-shadow: 5px 5px 0 var(--yellow); }
.button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; }

.hero { min-height: 790px; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding-top: 106px; }
.hero-copy { position: relative; z-index: 2; padding: 65px 0 30px; }
.kicker { display: flex; gap: 8px; margin: 0 0 26px; }
.kicker span { padding: 7px 9px; color: #08080a; background: var(--yellow); font: 800 9px/1 monospace; letter-spacing: .1em; }
.kicker span:nth-child(2) { color: white; background: var(--red); }
.kicker span:nth-child(3) { color: var(--cream); background: #28272c; }
h1 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Microsoft YaHei", sans-serif; font-size: clamp(64px, 6vw, 90px); font-weight: 900; line-height: .94; letter-spacing: .015em; text-transform: uppercase; text-shadow: 5px 5px 0 #2e2d32; }
h1 em { color: var(--red); font-style: normal; text-shadow: 4px 4px 0 var(--yellow); }
.hero-lede { max-width: 485px; margin: 30px 0; color: #aaa69d; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.text-link { padding-bottom: 5px; border-bottom: 1px solid #66626a; color: #d3cfc3; font-size: 12px; }
.text-link span { margin-left: 10px; color: var(--yellow); }
.hero-stats { display: flex; gap: 40px; margin: 54px 0 0; }
.hero-stats div { padding-left: 13px; border-left: 2px solid var(--red); }
.hero-stats dt { font: 900 23px/1 Impact, sans-serif; }
.hero-stats dd { margin: 7px 0 0; color: #7d7972; font: 9px/1 monospace; letter-spacing: .08em; }

.hero-visual { position: relative; min-height: 670px; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(#1d1c21 1px, transparent 1px), linear-gradient(90deg, #1d1c21 1px, transparent 1px); background-size: 34px 34px; border-inline: 1px solid #1c1b20; }
.hero-visual::before { content: ""; position: absolute; inset: 9% 4%; background: radial-gradient(circle, #ff3d2438, transparent 62%); filter: blur(10px); }
.cabinet { position: relative; z-index: 2; width: min(500px, 75%); filter: drop-shadow(24px 30px 0 #0008); transform: rotate(1.2deg); }
.cabinet-top { position: relative; height: 112px; display: flex; align-items: center; justify-content: center; gap: 35px; color: #09090b; background: var(--yellow); border: 9px solid #25242a; border-radius: 22px 22px 4px 4px; box-shadow: inset 0 -12px #d4bb00; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
.cabinet-top strong { text-align: center; font: 900 31px/.77 Impact, sans-serif; letter-spacing: .06em; transform: skew(-4deg); }
.cabinet-top i { width: 13px; height: 13px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px #17171a; }
.cabinet-screen { position: relative; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle, #241b1e, #060607 72%); border: 22px solid #29282e; border-bottom-width: 30px; box-shadow: inset 0 0 50px #ff3d2428; }
.scanlines { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); }
.screen-label { position: absolute; top: 15px; left: 18px; color: var(--red); font: 8px/1 monospace; letter-spacing: .14em; }
.cabinet-screen b { margin-top: 27px; color: var(--yellow); font: 15px/1 monospace; letter-spacing: .18em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pixel-invader { width: 114px; display: grid; grid-template-columns: repeat(6, 16px); gap: 3px; }
.pixel-invader i { height: 16px; background: var(--red); box-shadow: 3px 3px 0 #7a1308; }
.pixel-invader i:nth-child(1),.pixel-invader i:nth-child(6),.pixel-invader i:nth-child(7),.pixel-invader i:nth-child(12) { opacity: 0; }
.pixel-invader i:nth-child(8),.pixel-invader i:nth-child(11) { background: var(--yellow); }
.cabinet-deck { height: 104px; display: flex; align-items: center; justify-content: center; gap: 36px; background: #38373d; border: 8px solid #222126; border-top: 0; clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); }
.stick { position: relative; width: 18px; height: 47px; margin-right: 40px; background: #b6b1a2; border-radius: 5px; transform: rotate(-5deg); }
.stick::before { content: ""; position: absolute; top: -17px; left: -11px; width: 40px; height: 33px; border-radius: 50%; background: var(--red); box-shadow: inset 0 -8px #a51b0c; }
.deck-button { width: 43px; height: 25px; border-radius: 50%; box-shadow: 0 7px 0 #161518; }
.deck-button.red { background: var(--red); }.deck-button.yellow { background: var(--yellow); }
.cabinet-base { height: 172px; padding-top: 42px; text-align: center; background: linear-gradient(90deg, #222126, #35343a 50%, #222126); border: 9px solid #222126; clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); }
.cabinet-base span { display: block; margin-bottom: 26px; color: #77737c; font: 8px/1 monospace; letter-spacing: .14em; }
.cabinet-base i { width: 35px; height: 47px; display: inline-block; margin: 0 12px; border: 3px solid #131316; background: #29282d; box-shadow: inset 0 5px #0d0d0f; }
.pixel-burst { position: absolute; z-index: 4; top: 18%; right: 1%; width: 112px; height: 112px; display: grid; place-items: center; color: #09090b; background: var(--yellow); clip-path: polygon(50% 0,61% 24%,82% 7%,80% 31%,100% 30%,82% 50%,100% 67%,76% 68%,78% 95%,57% 76%,45% 100%,38% 75%,13% 91%,22% 65%,0 58%,22% 43%,4% 22%,31% 27%); text-align: center; font: 900 17px/.9 Impact, sans-serif; transform: rotate(12deg); }
.decor-arrow { position: absolute; left: 4%; bottom: 14%; color: var(--red); font: 70px/1 monospace; transform: rotate(-12deg); }.decor-cross { position: absolute; right: 8%; bottom: 8%; color: #4a484f; font: 70px/1 monospace; }

.ticker { overflow: hidden; color: #09090b; background: var(--yellow); border-block: 5px solid var(--red); transform: rotate(-.5deg) scale(1.01); }
.ticker div { width: max-content; display: flex; animation: marquee 24s linear infinite; }
.ticker span { padding: 14px 30px; font: 900 13px/1 monospace; letter-spacing: .1em; }
@keyframes marquee { to { transform: translateX(-50%); } }

.library { padding-block: 125px 135px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 48px; }
.section-heading h2 { margin: 8px 0 0; font-family: Impact, "Microsoft YaHei", sans-serif; font-size: clamp(42px, 5vw, 68px); line-height: 1; letter-spacing: .04em; }
.section-index { margin: 0; color: var(--red); font: 800 10px/1 monospace; letter-spacing: .15em; }
.section-heading > p { margin: 0; color: #88847d; font-size: 12px; line-height: 1.8; text-align: right; }
.category-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: -20px 0 30px; }
.category-filters button { min-height: 33px; padding: 0 14px; border: 1px solid #403e44; color: #858179; background: transparent; font: 800 9px/1 monospace; letter-spacing: .08em; }
.category-filters button:hover, .category-filters button.active { color: #09090b; border-color: var(--yellow); background: var(--yellow); }
.library-state { grid-column: 1 / -1; min-height: 260px; display: grid; place-items: center; border: 1px dashed #403e44; color: #77737b; font: 800 11px monospace; letter-spacing: .1em; }
.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.game-card { min-width: 0; }
.cover { position: relative; aspect-ratio: .79; display: grid; place-items: center; overflow: hidden; border: 1px solid #34333a; }
.cover::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 22px 22px; }
.cover-red { background: #b82315; }.cover-blue { background: #174ea0; }.cover-yellow { background: #d2b900; }
.cover img { position: relative; z-index: 1; width: 62%; max-height: 66%; object-fit: contain; image-rendering: auto; filter: drop-shadow(14px 18px 0 #0005); transition: transform .25s; }
.game-card:hover .cover img { transform: scale(1.07) rotate(-2deg); }
.rank { position: absolute; z-index: 2; top: 15px; left: 17px; color: #fff; font: 900 28px/1 Impact, sans-serif; }
.card-chip { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 7px 9px; color: #0a0a0c; background: var(--cream); font: 700 9px/1 monospace; }
.game-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; }
.game-meta p { margin: 0 0 6px; color: #77736d; font: 8px/1 monospace; letter-spacing: .12em; }
.game-meta h3 { margin: 0; font-size: 19px; }
.round-play { width: 41px; height: 41px; display: grid; place-items: center; border: 1px solid #444249; border-radius: 50%; color: var(--cream); background: transparent; font-size: 11px; }
.round-play:hover { color: #09090b; border-color: var(--yellow); background: var(--yellow); }
.add-card { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #4b4950; color: #8c887f; background: #101013; }
.add-card:hover { color: var(--cream); border-color: var(--red); background: #181719; }
.add-card > span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid #555159; border-radius: 50%; color: var(--red); font-size: 28px; }
.add-card strong { margin-bottom: 10px; font-size: 15px; }.add-card small { color: #66626b; font-size: 10px; }

.player-section { padding-block: 115px 130px; background: #111114; border-block: 1px solid #302f34; background-image: linear-gradient(#19181c 1px, transparent 1px), linear-gradient(90deg, #19181c 1px, transparent 1px); background-size: 34px 34px; }
.section-heading.light { align-items: center; }
.now-playing { min-width: 250px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px 17px; border: 1px solid #403e44; background: #141417; }
.now-playing i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: #555159; }.player-section.running .now-playing i { background: #54e76a; box-shadow: 0 0 10px #54e76a; }
.now-playing span { color: #68646b; font: 8px/1 monospace; letter-spacing: .12em; }.now-playing strong { max-width: 190px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.player-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(270px, .85fr); gap: 24px; align-items: stretch; }
.console-shell { min-width: 0; padding: 18px 20px 20px; background: #242329; border: 1px solid #504e55; box-shadow: 12px 12px 0 var(--red), 18px 18px 0 var(--yellow); }
.console-label { height: 28px; display: flex; justify-content: space-between; color: #87838a; font: 8px/1 monospace; letter-spacing: .14em; }
.screen { position: relative; width: 100%; aspect-ratio: 256 / 240; max-height: 680px; margin: auto; overflow: hidden; background: #050506; border: 11px solid #111114; outline: 1px solid #46444b; }
canvas { width: 100%; height: 100%; display: block; background: #070708; image-rendering: pixelated; }
.empty-state { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle, #27181b, #08080a 68%); }
.empty-state.hidden { display: none; }
.empty-icon { width: 61px; height: 74px; padding: 10px 8px; background: #bbb7ad; box-shadow: inset 0 -9px #8e8b83; }
.empty-icon i { display: block; height: 35px; border: 4px solid #242329; background: var(--red); }
.empty-state p { margin: 20px 0 8px; color: var(--red); font: 8px/1 monospace; letter-spacing: .18em; }.empty-state h3 { margin: 0; font: 400 24px/1.3 Georgia, "Songti SC", serif; }.empty-state > span { margin: 8px 0 20px; color: #77737a; font-size: 10px; }.empty-state small { margin-top: 13px; color: #57545a; font-size: 9px; }
.drop-hint { position: absolute; inset: 0; z-index: 5; display: none; place-items: center; color: #09090b; background: #f5d900ee; font: 900 25px/1 Impact, sans-serif; letter-spacing: .1em; }.screen.dragging .drop-hint { display: grid; }
.console-toolbar { height: 48px; display: flex; align-items: end; justify-content: space-between; }
.player-status { display: flex; align-items: center; gap: 8px; color: #8b878f; font: 8px/1 monospace; letter-spacing: .1em; }.player-status i { width: 6px; height: 6px; border-radius: 50%; background: #555159; }.running .player-status i { background: var(--red); box-shadow: 0 0 7px var(--red); }
.console-toolbar > div:last-child { display: flex; gap: 8px; }.console-toolbar button { width: 32px; height: 29px; padding: 0; border: 1px solid #57545c; color: #aaa6ae; background: transparent; }.console-toolbar button:disabled { opacity: .3; cursor: default; }
.control-card { display: flex; flex-direction: column; padding: 19px; background: var(--cream); color: #17171a; border: 1px solid #fff; }
.control-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 2px solid #29282d; font: 900 9px/1 monospace; letter-spacing: .12em; }.control-title i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.controller { flex: 1; min-height: 420px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 18px 10px; }
.dpad { width: 126px; display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 37px); justify-self: center; filter: drop-shadow(0 5px 0 #8a867e); }.dpad button { border: 0; color: #8c8990; background: #252429; }.dpad button[data-button=UP] { grid-column: 2; }.dpad button[data-button=LEFT] { grid-column: 1; grid-row: 2; }.dpad span { grid-column: 2; grid-row: 2; background: #252429; }.dpad button[data-button=RIGHT] { grid-column: 3; grid-row: 2; }.dpad button[data-button=DOWN] { grid-column: 2; grid-row: 3; }
.small-controls { grid-column: 1 / 3; grid-row: 2; display: flex; justify-content: center; gap: 21px; }.small-controls button, .action-controls button { padding: 0; border: 0; background: none; }.small-controls i { width: 41px; height: 13px; display: block; margin-bottom: 7px; border-radius: 10px; background: #343339; box-shadow: inset 0 -3px #121215; }.small-controls span, .action-controls span { color: #6c6862; font: 7px/1 monospace; letter-spacing: .08em; }
.action-controls { display: flex; justify-content: center; gap: 17px; }.action-controls b { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; color: white; background: var(--red); box-shadow: inset 0 -7px #a51c0e, 0 5px 0 #bbb6aa; font-size: 16px; }.action-controls button:last-child b { background: var(--yellow); color: #17171a; box-shadow: inset 0 -7px #bda700, 0 5px 0 #bbb6aa; }.pressed { transform: translateY(3px) scale(.96); filter: brightness(.75); }
[data-button] { touch-action: none; user-select: none; -webkit-user-select: none; }
.keyboard-map { padding-top: 18px; border-top: 1px solid #bbb7ae; }.keyboard-map > p { margin: 0 0 14px; font: 900 8px/1 monospace; letter-spacing: .12em; }.keyboard-map > div { display: flex; flex-wrap: wrap; gap: 10px 13px; }.keyboard-map span { display: flex; align-items: center; gap: 4px; color: #6e6a63; font-size: 8px; }.keyboard-map kbd { min-width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #908c84; color: #222126; background: white; box-shadow: 0 2px #aaa59b; font: 8px/1 monospace; }

.guide { padding-block: 125px; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #39383e; }
.step-grid article { position: relative; min-height: 270px; padding: 28px; border-right: 1px solid #39383e; background: #101013; }.step-grid article:last-child { border: 0; }.step-grid article > span { color: var(--red); font: 900 12px/1 monospace; }.step-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 35px 0 25px; color: #09090b; background: var(--yellow); box-shadow: 5px 5px 0 var(--red); font: normal 25px/1 monospace; }.step-grid h3 { margin: 0 0 10px; font-size: 18px; }.step-grid p { max-width: 290px; margin: 0; color: #7f7b74; font-size: 11px; line-height: 1.8; }
.privacy-strip { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; margin-top: 22px; padding: 22px 25px; color: #161619; background: var(--cream); }.privacy-strip strong { font-size: 13px; }.privacy-strip strong i { width: 8px; height: 8px; display: inline-block; margin-right: 9px; border-radius: 50%; background: #41bd55; box-shadow: 0 0 8px #41bd55; }.privacy-strip p { margin: 0; color: #68645e; font-size: 10px; }.privacy-strip > span { color: var(--red); font: 900 10px/1 monospace; }
.site-footer { border-top: 1px solid #323137; background: #0d0d0f; }.footer-inner { min-height: 160px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }.footer-inner p { justify-self: center; margin: 0; color: #6f6b65; font-size: 10px; line-height: 1.8; }.footer-inner > a { justify-self: end; color: var(--yellow); font: 800 9px/1 monospace; letter-spacing: .1em; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 60; max-width: calc(100% - 30px); padding: 13px 18px; color: #09090b; background: var(--yellow); box-shadow: 5px 5px 0 var(--red); opacity: 0; transform: translate(-50%, 15px); pointer-events: none; transition: .2s; font-size: 12px; font-weight: 800; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav { display: none; }
  .hero { grid-template-columns: .9fr 1.1fr; }.cabinet { width: 88%; }.pixel-burst { right: -2%; }
  .game-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }.add-card { min-height: 350px; }
  .player-layout { grid-template-columns: 1fr; }.screen { max-height: none; }.control-card { min-height: 430px; }.controller { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; min-height: 270px; }.small-controls { grid-column: 2; grid-row: 1; }.action-controls { grid-column: 3; grid-row: 1; }
}

@media (max-width: 760px) {
  .section-wrap { width: min(100% - 28px, 620px); }.site-header { position: absolute; width: calc(100% - 28px); height: 72px; display: flex; justify-content: space-between; }.brand-copy b { font-size: 13px; }.brand-token { width: 34px; height: 34px; }.local-badge { display: none; }.header-actions { gap: 8px; }.site-header .button { min-height: 39px; padding-inline: 13px; }
  .hero { display: flex; flex-direction: column; min-height: auto; gap: 25px; padding-top: 105px; }.hero-copy { width: 100%; min-width: 0; padding: 35px 0 0; }h1 { font-size: clamp(58px, 17vw, 90px); }.hero-lede { max-width: 100%; margin-block: 23px; overflow-wrap: anywhere; }.hero-stats { margin-top: 40px; gap: 22px; }.hero-visual { width: calc(100% + 28px); min-height: 570px; }.cabinet { width: min(400px, 78%); }.cabinet-screen { height: 270px; }.cabinet-base { height: 130px; }.pixel-burst { right: 1%; width: 88px; height: 88px; }
  .library, .guide { padding-block: 85px; }.section-heading { display: block; margin-bottom: 35px; }.section-heading > p { margin-top: 18px; text-align: left; }.game-grid { grid-template-columns: 1fr 1fr; gap: 35px 13px; }.game-meta h3 { font-size: 15px; }.round-play { width: 36px; height: 36px; }.add-card { min-height: 260px; }
  .player-section { padding-block: 80px; }.section-heading.light { display: flex; align-items: end; }.now-playing { min-width: 0; padding: 10px; }.now-playing span { display: none; }.now-playing strong { max-width: 90px; }.console-shell { padding: 12px; box-shadow: 7px 7px 0 var(--red), 11px 11px 0 var(--yellow); }.screen { border-width: 6px; }.console-label { height: 24px; }.console-label span:last-child { display: none; }.empty-state h3 { font-size: 19px; }.empty-icon { transform: scale(.8); }.control-card { padding: 14px; }.controller { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; min-height: 370px; }.small-controls { grid-column: 1 / 3; grid-row: 2; }.action-controls { grid-column: 2; grid-row: 1; }.keyboard-map { display: none; }
  .step-grid { grid-template-columns: 1fr; }.step-grid article { min-height: 220px; border-right: 0; border-bottom: 1px solid #39383e; }.privacy-strip { grid-template-columns: 1fr auto; }.privacy-strip p { grid-column: 1 / 3; grid-row: 2; }.footer-inner { grid-template-columns: 1fr auto; padding-block: 35px; }.footer-inner p { grid-column: 1 / 3; grid-row: 2; justify-self: start; margin-top: 25px; }.footer-inner > a { grid-column: 2; grid-row: 1; }
}

@media (max-width: 430px) {
  .kicker span:nth-child(3) { display: none; }.hero-actions { gap: 18px; }.hero-stats dd { font-size: 7px; }.cabinet { width: 86%; }.cabinet-top { height: 85px; }.cabinet-top strong { font-size: 25px; }.cabinet-screen { height: 245px; border-width: 16px; }.cabinet-deck { height: 82px; }.game-grid { grid-template-columns: 1fr; }.add-card { min-height: 250px; }.now-playing { display: none; }.section-heading.light { display: block; }.screen { aspect-ratio: 256 / 240; }.controller { min-height: 330px; }.dpad { transform: scale(.86); }.action-controls { transform: scale(.9); }
}