/* Games arcade */
.games-page { min-height: 100vh; background: #210b45 url("../ui-img/arcade-carpet.svg?v=288b02109ec7") repeat; color: #fff; font-family: Arial, sans-serif; }
.games-page::before { position: fixed; z-index: 0; inset: 0; background: rgb(0 0 0 / .18); content: ""; pointer-events: none; }
.games-main { position: relative; z-index: 1; width: min(980px, calc(100% - 2rem)); margin: 0 auto; padding: 2.2rem 0 4rem; }
.games-header { margin: 0 auto 1.7rem; text-align: center; text-shadow: 3px 3px 0 #130425, 0 0 12px #f542c3; }
.games-header a { display: block; width: fit-content; margin-bottom: .7rem; color: #55f3e0; font: bold 1rem "Times New Roman", Times, serif; text-shadow: none; }.games-section-banner { display: block; width: min(100%, 780px); max-height: 210px; margin: 0 auto .7rem; object-fit: contain; }.games-header h1 { margin: 0; color: #e9bd45; font-family: "Times New Roman", Times, serif; font-size: clamp(2.25rem, 6vw, 4.1rem); letter-spacing: .02em; text-shadow: 3px 3px 0 #000, 0 0 8px #000; }.games-header p { width: fit-content; max-width: 100%; margin: .6rem auto 0; padding: .3rem .65rem; background: #bfe9ff; color: #0c4c9a; font-family: "Times New Roman", Times, serif; font-size: 1.1rem; font-weight: bold; text-shadow: none; }
.game-list { display: grid; gap: 1.3rem; }
.game-banner { position: relative; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(180px, 1.2fr); gap: .15rem 1.1rem; min-height: 130px; overflow: hidden; padding: 1.45rem 7rem 1.3rem 1.7rem; border: 4px solid; border-radius: 1.35rem; color: inherit; text-decoration: none; box-shadow: 0 8px 0 rgb(7 2 25 / .7), 0 14px 18px rgb(0 0 0 / .35); transition: transform 150ms ease, filter 150ms ease; }
.game-banner:hover, .game-banner:focus-visible { filter: brightness(1.15); transform: translateY(-4px) rotate(-.2deg); }.game-banner:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.game-title { align-self: end; font-size: clamp(1.5rem, 4vw, 2.35rem); font-weight: 900; letter-spacing: -.05em; }.game-domain { align-self: end; font: bold .9rem Arial, sans-serif; opacity: .85; }.game-description { grid-column: 1 / -1; max-width: 690px; font-size: 1.04rem; line-height: 1.25; }
.game-status { position: absolute; top: .75rem; right: -1.6rem; min-width: 8.4rem; padding: .38rem .3rem; font-size: .92rem; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(15deg); }
.chudworld { border-color: #62eaff; background: linear-gradient(125deg, #0c4374, #075f8c 48%, #4fd9c1); color: #efffff; text-shadow: 2px 2px #06345e; }.chudworld .game-title { font-family: Arial, sans-serif; }.chudworld .status-wip { background: #ffdf3f; color: #551c84; box-shadow: 2px 2px #b87020; }
.skitter { border-color: #f164b2; background: repeating-linear-gradient(135deg, #421536 0 16px, #601945 16px 32px); color: #ffe8f6; }.skitter .game-title { font-style: italic; letter-spacing: .06em; transform: skew(-10deg); }.skitter .status-wip { border: 2px dashed #fbe5ff; background: #5fddbf; color: #281139; transform: rotate(-11deg); }
.mechanism { border-color: #b88d5c; background: radial-gradient(circle at 85% 20%, #b7803f 0 4%, transparent 5%), repeating-linear-gradient(0deg, #453a36 0 18px, #38312d 19px 21px); color: #f5dfc1; }.mechanism .game-title { color: #f3bc6d; font-family: Arial, sans-serif; }.mechanism .status-unfinished { border: 2px solid #3f2515; background: #bd7740; color: #26170d; box-shadow: 2px 2px #1a100a; transform: rotate(8deg); }
.zundamon { border-color: #baf45a; background: linear-gradient(120deg, #158b55, #43ba50 52%, #d8f278); color: #093b24; }.zundamon .game-title { color: #f7ffdc; text-shadow: 2px 2px #13743d; }.zundamon .status-complete { border: 3px double #e4ffe4; border-radius: .8rem 0; background: #277ad9; color: #fff; transform: rotate(-9deg); }
.enjoy { border-color: #f4f1dd; background: linear-gradient(120deg, #ff7045, #ffbb4e 44%, #f6ebc9); color: #42251a; }.enjoy .game-title { font-family: "Comic Sans MS", "Trebuchet MS", sans-serif; letter-spacing: -.09em; }.enjoy .status-complete { border-radius: 50%; background: #fff7ce; color: #e15031; box-shadow: 2px 2px #c74835; transform: rotate(12deg); }
.vibeslop { border-color: #8dc7ff; background: linear-gradient(135deg, #1d2149, #50366c 51%, #842d6e); color: #e7eaff; }.vibeslop .game-title { font-family: Arial, sans-serif; text-decoration: underline wavy #f790cb; }.vibeslop .status-complete { border: 2px solid #6e4c9d; border-radius: 0; background: #d6c2ff; color: #382357; box-shadow: 3px 3px #33204a; transform: rotate(-14deg); }
@media (max-width: 600px) { .games-main { width: min(100% - 1.1rem, 980px); }.game-banner { grid-template-columns: 1fr; min-height: 150px; padding: 1.2rem 5.8rem 1.1rem 1rem; }.game-domain { align-self: start; }.game-description { margin-top: .45rem; }.game-status { right: -2.1rem; font-size: .75rem; } }

/* Screenshot-backed game cards */
.game-banner { --border: #62eaff; position: relative; display: block; min-height: 145px; overflow: visible; isolation: isolate; padding: 1.35rem 8.5rem 2.6rem 1.7rem; border: 4px solid transparent; background: var(--border) border-box; color: #fff; text-shadow: 2px 2px 3px #000, 0 1px 1px #000; transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease; }
.game-banner::before, .game-banner::after { position: absolute; inset: 4px; border-radius: 1.05rem; content: ""; pointer-events: none; }.game-banner::before { z-index: 0; background: var(--splash) center / cover no-repeat; filter: blur(2.4px); transform: scale(1.018); transition: filter 240ms ease, transform 240ms ease; }.game-banner::after { z-index: 1; background: linear-gradient(90deg, rgb(3 5 11 / .78) 0%, rgb(4 5 12 / .6) 48%, rgb(2 3 8 / .25) 100%); transition: opacity 240ms ease; }
.game-banner > span:not(.game-status) { position: relative; z-index: 2; }.game-banner:hover, .game-banner:focus-visible { background: linear-gradient(110deg, #ff3434, #ffe24a, #39df65, #2aa5ff, #b646ff, #ff3434) border-box; box-shadow: 0 10px 0 rgb(7 2 25 / .7), 0 16px 24px rgb(0 0 0 / .48), 0 0 13px #53eaff; filter: none; transform: translateY(-5px) scale(1.025); }.game-banner:hover::before, .game-banner:focus-visible::before { filter: blur(.45px); transform: scale(1.006); }.game-banner:hover::after, .game-banner:focus-visible::after { opacity: .52; }.game-banner:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.game-title { display: block; font-family: Arial, sans-serif !important; font-size: clamp(1.65rem, 4vw, 2.45rem); line-height: 1.02; letter-spacing: -.04em; }.game-description { display: block; max-width: 690px; margin-top: .6rem; font-size: 1.04rem; line-height: 1.25; }.game-banner .game-domain { position: absolute !important; z-index: 2; right: 1.35rem; bottom: 1rem; left: auto; color: #fff; font: bold .9rem Arial, sans-serif; opacity: .96; text-align: right; }
.game-status { z-index: 4; top: .65rem; right: -1.25rem; }.mechanism .game-title { white-space: nowrap; font-size: clamp(1.45rem, 3.35vw, 2.35rem); }
.chudworld { --splash: url("../game-splashes/chudworld.png?v=288b02109ec7"); --border: #62eaff; }.skitter { --splash: url("../game-splashes/skitter.png?v=288b02109ec7"); --border: #f164b2; }.mechanism { --splash: url("../game-splashes/giganticmechanism.png?v=288b02109ec7"); --border: #b88d5c; }.zundamon { --splash: url("../game-splashes/zundamon2048.png?v=288b02109ec7"); --border: #baf45a; }.enjoy { --splash: url("../game-splashes/letpeopleenjoythings.png?v=288b02109ec7"); --border: #f4f1dd; }.vibeslop { --splash: url("../game-splashes/vibeslop.png?v=288b02109ec7"); --border: #8dc7ff; }
.d4w { --splash: url("../game-splashes/d4w.png?v=288b02109ec7"); --border: #ff9f4d; }.d4w .game-title { color: #ffcf5a; font-style: italic; letter-spacing: .08em; }.d4w .status-wip { border: 2px solid #2a1235; background: #ff8f38; color: #2a1235; box-shadow: 2px 2px #f8e761; transform: rotate(-7deg); }
@media (max-width: 600px) { .game-banner { min-height: 160px; padding: 1.1rem 5.2rem 2.7rem 1rem; }.game-domain { right: 1rem; bottom: .8rem; font-size: .75rem; }.game-status { right: -1.8rem; }.mechanism .game-title { font-size: clamp(1.2rem, 6vw, 1.7rem); } }