.arcade-main { padding-bottom: 5rem; }
.arcade-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; padding: 3.75rem 0 3rem; }
.arcade-intro h1 { margin: 0; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 650; line-height: 1.3; letter-spacing: -.035em; }
.arcade-intro h1 span { color: var(--accent); }
.arcade-intro .eyebrow { margin-bottom: 1.4rem; }
.arcade-intro-copy { max-width: 360px; justify-self: end; }
.arcade-intro-copy > p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.9; }
.arcade-console { position: relative; width: 100%; margin-bottom: .6rem; }
.arcade-console svg { width: 100%; height: auto; }
.arcade-console > span { position: absolute; right: 0; bottom: 4px; color: #6a8b75; font: 8px/1.5 var(--mono); letter-spacing: .07em; }
.arcade-status { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; color: var(--muted); font-size: 11px; }
.arcade-status > span { padding: .45rem .8rem; border: 1px solid #d9e5dc; border-radius: 99px; background: #ffffff99; }
.arcade-status b { margin-right: .4rem; color: #2f6341; font: 600 .9rem/1 var(--mono); }
.arcade-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-block: 1px solid #dce6df; }
.genre-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.genre-filters button { min-height: 42px; padding: .55rem 1rem; border: 1px solid transparent; border-radius: 99px; color: var(--muted); background: transparent; font-size: .82rem; transition: color 150ms ease, background-color 150ms ease; }
.genre-filters button[aria-pressed="true"] { color: #f5fff7; background: #087f4b; box-shadow: 0 3px 8px #087f4b20; }
.genre-filters button:active { transform: scale(.97); }
.game-count { margin: 0; color: var(--muted); font: 10px/1.5 var(--mono); white-space: nowrap; }
.game-count span { color: #28573a; font-weight: 600; }
.arcade-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 1.7rem; row-gap: 2.75rem; padding-top: 2rem; }
.game-entry { display: flex; min-width: 0; flex-direction: column; color: var(--ink); text-decoration: none; }
.entry-cover { position: relative; display: grid; aspect-ratio: 16/10; margin: 0; overflow: hidden; place-items: center; border: 1px solid #dbe4dc; border-radius: 16px; background: #e9eeea; }
.entry-cover img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 240ms var(--ease); }
.entry-number { position: absolute; top: .8rem; left: .8rem; padding: .4rem .5rem; border: 1px solid #ffffff40; border-radius: 5px; color: #fff; background: #12241dd4; font: 9px/1.5 var(--mono); }
.entry-copy { display: flex; flex: 1; flex-direction: column; padding: 1.35rem .1rem 0; }
.game-tag { margin: 0 0 .55rem; color: #728577; font: 10px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.entry-copy h2 { margin: 0 0 .65rem; font-size: 1.3rem; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.entry-description { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.9; }
.entry-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-block: 1.35rem .8rem; border-bottom: 1px solid #d6e1d9; font-size: .8rem; font-weight: 550; }
.entry-action > span:last-child { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #c8dccd; border-radius: 50%; color: #087f4b; font-size: 1rem; transition: color 150ms ease, background-color 150ms ease; }
.game-feature-scroll { grid-column: 1/-1; position: relative; min-height: 130svh; --scene-progress: 0; }
.game-entry--featured { position: sticky; top: 105px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: min(500px, calc(100svh - 140px)); gap: 0; overflow: hidden; border: 1px solid #cadece; border-radius: 24px; background: #eaf3eb; box-shadow: 0 18px 40px #23573509; }
.game-entry--featured .entry-cover { min-width: 0; min-height: 100%; aspect-ratio: auto; padding: 2rem 0; border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 50%, #304038, #111c16 75%); perspective: 900px; }
.game-entry--featured .entry-cover img { width: 100%; height: auto; transform: rotateX(calc(20deg - var(--scene-progress) * 20deg)) scale(calc(.84 + var(--scene-progress) * .16)); transition: none; filter: drop-shadow(0 15px 15px #0005); }
.game-entry--featured .entry-number { top: 1.25rem; left: 1.25rem; padding: .5rem .65rem; background: #13231d; color: #a9c9b3; font-size: 8px; }
.feature-play { position: absolute; display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid #dcf5db7a; border-radius: 50%; color: #f4fff6; background: #09291e80; box-shadow: 0 8px 25px #0003; }
.feature-play svg { width: 23px; height: 23px; margin-left: 2px; }
.feature-cover-caption { position: absolute; bottom: 20px; left: 1.4rem; color: #a4bfaa; font: 8px/1.5 var(--mono); letter-spacing: .09em; }
.game-entry--featured .entry-copy { min-width: 0; align-self: center; padding: 2.25rem; }
.featured-label { display: flex; gap: .6rem; align-items: center; margin-bottom: 2rem; color: #2d7045; font-size: 10px; }
.featured-label i { width: 24px; height: 1px; background: #adc8b4; }
.game-entry--featured h2 { margin: .5rem 0 1rem; font-size: 2.1rem; }
.game-entry--featured .entry-description { max-width: 330px; font-size: .94rem; }
.level-marks { display: flex; align-items: center; gap: 7px; margin-top: 1.8rem; color: #6d8c76; font: 8px/1.5 var(--mono); }
.level-marks i { flex: 1; max-width: 16px; height: 4px; border-radius: 1px; background: #b8d3bf; }
.level-marks i:nth-child(-n+4) { background: #458e60; }
.game-entry--featured .entry-action { margin-top: 1.3rem; border-bottom: 0; }
@media (hover:hover) and (pointer:fine) { .game-entry:not(.game-entry--featured):hover .entry-cover img { transform: scale(1.035); } .game-entry:hover .entry-action { border-bottom-color: #087f4b; color: #087f4b; } .game-entry:hover .entry-action > span:last-child { color: #fff; background: #087f4b; } .genre-filters button:not([aria-pressed="true"]):hover { background: #e7f0e8; color: #234b32; } }
@media (max-width: 1000px) { .arcade-intro { gap: 2rem; } .arcade-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 1.5rem; } .game-entry--featured { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); } .game-entry--featured .entry-cover { aspect-ratio: auto; } .game-entry--featured .entry-copy { padding: 1.75rem; } .featured-label { margin-bottom: 1.5rem; } }
@media (max-width: 760px) { .game-feature-scroll { min-height: 0; } .game-entry--featured { position: relative; top: auto; min-height: 0; } .game-entry--featured .entry-cover img { transform: none; } }
@media (max-width: 640px) { .arcade-main { padding-bottom: 3rem; } .arcade-intro { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.75rem 0 2.4rem; } .arcade-intro h1 { font-size: clamp(2.7rem, 10vw, 3.3rem); } .arcade-intro-copy { display: grid; grid-template-columns: 1fr 110px; gap: 0 16px; justify-self: start; max-width: 420px; } .arcade-intro-copy > p { grid-column: 1; grid-row: 1; font-size: .9rem; } .arcade-console { grid-column: 2; grid-row: 1/3; align-self: center; margin-bottom: 0; } .arcade-console svg { width: 160px; max-width: none; margin-left: -25px; } .arcade-console > span { display: none; } .arcade-status { grid-column: 1; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; font-size: 10px; } .arcade-status > span { padding: .3rem .5rem; } .arcade-toolbar { gap: .5rem; } .genre-filters { gap: .15rem; } .genre-filters button { padding: .5rem .6rem; font-size: .74rem; } .game-count { font-size: 8px; } .arcade-grid { grid-template-columns: 1fr; padding-top: 1.5rem; gap: 2.3rem; } .game-entry--featured { grid-template-columns: 1fr; border-radius: 20px; } .game-entry--featured .entry-cover { aspect-ratio: 16/10; min-height: 0; padding: 1rem 0; } .game-entry--featured .entry-copy { padding: 1.6rem; } .game-entry--featured h2 { font-size: 1.8rem; margin: .4rem 0 .75rem; } .featured-label { margin-bottom: 1.3rem; } .game-entry--featured .entry-action { margin-top: .7rem; } .entry-copy h2 { font-size: 1.35rem; } .entry-description { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .game-feature-scroll { min-height: 0; } .game-entry--featured { position: relative; top: auto; } .entry-cover img { transition: none; } .game-entry--featured .entry-cover img, .game-entry:hover .entry-cover img { transform: none; } }

.webgames-entry { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem; align-items: center; margin-bottom: 3.75rem; padding: 2.6rem 3rem; overflow: hidden; border: 1px solid #284c38; border-radius: 23px; color: #edf8ef; background: radial-gradient(ellipse at 80% 30%, #275d3d, transparent 70%), #123523; box-shadow: 0 12px 35px #173d2410; }
.webgames-entry .section-index { color: #a5cdb1; font-size: 9px; }
.webgames-entry h2 { margin-top: 1rem; font-size: clamp(1.7rem,3vw,2.35rem); line-height: 1.4; letter-spacing: -.035em; }
.webgames-entry-intro { max-width: 360px; margin-top: 1rem; color: #b2cdbb; font-size: 13px; line-height: 1.9; }
.webgames-entry-action { display: inline-flex; align-items: center; gap: 2.5rem; margin-top: 1.5rem; padding: .6rem 1rem; border: 1px solid #c1e1c9; border-radius: 9px; color: #153e25; background: #d5edda; font-size: 12px; font-weight: 550; }
.webgames-entry-action > span { font-size: 18px; line-height: 1; transition: transform 160ms var(--ease); }
.webgames-entry-art { position: relative; min-width: 0; height: 250px; isolation: isolate; }
.webgames-orbit { position: absolute; inset: 0 -4%; z-index: -1; border: 1px solid #93bd9e40; border-radius: 50%; transform: rotate(-18deg); }
.webgames-orbit::before { position: absolute; inset: 18px -15px; border: 1px dashed #93bd9e30; border-radius: 50%; content: ""; }
.webgames-cover { position: absolute; display: block; width: 75%; height: auto; border: 1px solid #d5ead950; border-radius: 10px; box-shadow: 0 20px 25px #03120950; }
.webgames-cover--back { top: 2%; right: 0; transform: rotate(8deg); }
.webgames-cover--front { bottom: 3%; left: 0; transform: rotate(-8deg); }
.webgames-total { position: absolute; right: -2%; bottom: -2%; display: flex; flex-direction: column; padding: .75rem 1rem; border: 1px solid #b3d8bd; border-radius: 12px; color: #477454; background: #eaf6ed; box-shadow: 0 5px 20px #0b251930; font-size: 9px; transform: rotate(3deg); }
.webgames-total strong { color: #19653b; font: 600 31px/1.15 var(--mono); letter-spacing: -.06em; }
.hub-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.hub-section-heading .section-index { font-size: 9px; }
.hub-section-heading h2 { margin-top: .65rem; font-size: 1.9rem; font-weight: 600; letter-spacing: -.035em; }
.hub-section-heading > p { max-width: 300px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
@media (hover:hover) and (pointer:fine) { .webgames-entry:hover .webgames-entry-action > span { transform: translateX(4px); } .webgames-entry:hover { border-color: #548d64; } }
@media (max-width: 900px) { .webgames-entry { padding: 2rem; } .webgames-entry-art { height: 210px; } .webgames-total { right: -3%; } }
@media (max-width: 640px) { .webgames-entry { grid-template-columns: 1fr; gap: 2rem; padding: 1.8rem; margin-bottom: 3rem; border-radius: 20px; } .webgames-entry h2 { font-size: 1.95rem; } .webgames-entry-intro { font-size: 12px; } .webgames-entry-art { height: 220px; width: min(100%,380px); justify-self: center; margin-block: .2rem .6rem; } .webgames-entry-action { margin-top: 1.2rem; } .hub-section-heading { align-items: flex-start; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; } .hub-section-heading h2 { font-size: 1.6rem; } .hub-section-heading > p { font-size: 11px; } }
@media (max-width: 380px) { .webgames-entry { padding: 1.5rem; } .webgames-entry-art { height: 175px; } .webgames-entry h2 { font-size: 1.7rem; } .webgames-total { padding: .6rem .75rem; } .webgames-total strong { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .webgames-entry-action > span { transition: none; } .webgames-entry:hover .webgames-entry-action > span { transform: none; } }