.games-page { display: block; overflow: auto; padding: 0; }
.games-shell { position: relative; z-index: 1; width: min(1180px, calc(100% - 96px)); margin: 0 auto; padding: 100px 0 40px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.games-shell > main { display: flex; flex: 1; flex-direction: column; }
.games-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.games-screen-button { position: absolute; top: 24px; right: 24px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; background: rgba(255,255,255,.7); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.games-screen-button[hidden] { display: none; }
.games-screen-button > span:first-child { font-size: 24px; line-height: 1; }
.games-eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: #65617a; }
.games-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 360px)); gap: 24px; }
.game-card { display: grid; grid-template-rows: 45% 55%; aspect-ratio: 1; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 16px 48px rgba(46,53,87,.08); backdrop-filter: blur(20px); }
.game-art { position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, #fff8df 0, #f2dfca 65%, #e8d5c8 100%); }
.game-art-orbit { position: absolute; border: 1px solid rgba(158,118,90,.16); border-radius: 50%; width: 180px; height: 180px; }
.orbit-two { width: 280px; height: 280px; }
.playing-card { position: absolute; top: 18px; width: 76px; height: 110px; border-radius: 8px; background: #fffdf6; box-shadow: 0 8px 16px rgba(79,47,33,.18); border: 1px solid #fff; }
.card-back { transform: translateX(-34px) rotate(-24deg); background: repeating-linear-gradient(45deg, transparent 0 7px, #ffffff24 7px 8px), repeating-linear-gradient(-45deg, #7d8a9c 0 7px, #a6afbb 7px 8px); border: 4px solid #fffdf6; display: grid; place-items: center; color: #fce5bd; font-size: 36px; }
.card-spade { transform: translateX(-5px) rotate(-7deg); color: #313c53; }
.card-heart { transform: translate(34px, 8px) rotate(16deg); color: #cd6557; }
.card-corner { position: absolute; top: 5px; left: 7px; font: 14px Georgia, serif; text-align: center; line-height: 1; }
.card-corner small { display: block; font-size: 12px; }
.card-corner-bottom { inset: auto 7px 5px auto; transform: rotate(180deg); }
.card-center { display: grid; height: 100%; place-items: center; font: 48px Georgia, serif; }
.art-spark, .art-suit { position: absolute; color: #a56d4a; }
.spark-one { left: 18%; top: 20%; font-size: 24px; }.spark-two { right: 18%; bottom: 18%; font-size: 28px; }
.suit-one { bottom: 16%; left: 16%; font: 20px Georgia, serif; transform: rotate(-20deg); opacity: .5; }.suit-two { right: 16%; top: 18%; font: 20px Georgia, serif; opacity: .5; }
.game-info { min-width: 0; padding: 16px 18px; }
.game-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-title-row h2 { margin: 0; font-size: 29px; line-height: 1.1; letter-spacing: -.04em; }
.game-description { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #60697e; }
.game-status { background: #f1e9da; color: #806441; border: 1px solid #e6dcc8; border-radius: 30px; padding: 5px 9px; font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
.game-facts { display: flex; gap: 12px; list-style: none; padding: 0; margin: 8px 0 10px; font-size: 11px; color: #4b566d; }
.game-facts li { white-space: nowrap; }.game-facts span { margin-right: 3px; font-size: 14px; }
.game-actions { display: flex; gap: 16px; align-items: center; }
.game-launch, .rules-done { font: inherit; border: 0; border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 650; }
.game-launch { display: flex; flex: 1; align-items: center; justify-content: center; gap: 12px; min-height: 44px; background: var(--text); color: white; cursor: pointer; white-space: nowrap; }
.game-launch:disabled { opacity: .6; cursor: wait; }
.game-rules-button { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #d8d3e1; border-radius: 10px; padding: 11px 14px; background: #ffffffb3; font: inherit; font-size: 13px; font-weight: 650; color: var(--text); cursor: pointer; white-space: nowrap; }
.game-rules-button:hover { background: #fff; border-color: #b6afc8; }
.game-join-link { display: inline-block; margin-top: 12px; font-size: 11px; color: var(--text); }
.games-how { margin-top: auto; padding: 40px 0 0; }
.games-how-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.games-steps { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 22px 0 0; padding: 0; gap: 24px; }
.games-steps li { display: flex; align-items: center; gap: 14px; }
.step-number { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; background: rgba(255,255,255,.6); border: 1px solid #ffffffa0; border-radius: 12px; font-size: 11px; color: #626781; }
.games-steps h3 { font-size: 14px; margin: 0; }.games-steps p { color: #535e78; margin: 0; font-size: 12px; line-height: 1.7; }
.games-notice { color: var(--text); font-size: 14px; }.games-notice:empty { display: none; }
.games-dialog { width: min(580px, calc(100% - 32px)); max-height: 85vh; padding: 28px; border: 1px solid white; border-radius: 24px; background: #fffcf5; color: var(--text); box-shadow: 0 24px 80px #202a4f40; }
.games-dialog::backdrop { background: #24304d66; backdrop-filter: blur(6px); }
.rules-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.rules-heading .games-eyebrow { margin: 0; }
.rules-close { font: inherit; font-size: 28px; cursor: pointer; border: 0; background: transparent; color: var(--text); width: 40px; height: 40px; }
.games-dialog h2 { font-size: 30px; letter-spacing: -.04em; margin: 10px 0; }.games-dialog p, .games-dialog li { font-size: 14px; line-height: 1.7; }.games-dialog ol { padding-left: 22px; }.games-dialog li { padding-left: 6px; margin: 12px 0; }
.rules-goal { background: #eee7d9; padding: 14px; border-radius: 12px; }.rules-done { background: var(--text); color: white; width: 100%; cursor: pointer; }
.games-page :focus-visible { outline: 3px solid #8e432e; outline-offset: 5px; }
@media (max-width: 900px) { .games-shell { width: calc(100% - 48px); }.games-steps { gap: 16px; }.games-steps li { gap: 10px; }.games-steps br { display: none; } }
@media (max-width: 640px) { .games-shell { width: calc(100% - 32px); padding-top: 88px; }.games-screen-button { top: 16px; right: 16px; }.games-library { grid-template-columns: minmax(0, 360px); }.games-steps { grid-template-columns: 1fr; gap: 22px; }.games-steps h3 { font-size: 15px; }.games-steps p { font-size: 13px; }.games-dialog { padding: 20px; } }
@media (max-width: 370px) { .game-info { padding: 12px 14px; }.game-title-row h2 { font-size: 26px; }.game-facts { gap: 8px; margin: 8px 0 10px; font-size: 10px; }.game-actions { gap: 10px; }.game-launch { padding: 10px; font-size: 12px; }.game-rules-button { font-size: 11px; }.game-description { margin-top: 4px; font-size: 11px; }.game-facts { margin: 6px 0; }.game-join-link { margin-top: 6px; font-size: 10px; } }

.imposter-art { background: radial-gradient(ellipse at 50% 45%, #f4eaf8 0, #e2d3e9 65%, #cdbfd8 100%); }
.imposter-art .art-spark { color: #8b6a9c; }
.imposter-art-secret { position: relative; width: 86px; height: 116px; border-radius: 15px; border: 1px solid #fff; background: #fffaf2; transform: rotate(-7deg); box-shadow: 0 9px 20px #5f466930; display: grid; place-items: center; }
.imposter-art-secret > span { font: 62px Georgia, serif; color: #886a99; padding-bottom: 12px; }
.imposter-art-mask { position: absolute; bottom: 14px; display: flex; justify-content: center; align-items: center; gap: 7px; width: 56px; height: 22px; background: #604d75; border-radius: 9px 9px 14px 14px; }
.imposter-art-mask i { width: 13px; height: 6px; background: #fffaf2; border-radius: 50%; }
.imposter-art-person { position: absolute; font-size: 44px; color: #9e88ad; background: #f7effb; border: 1px solid #fff8; border-radius: 15px; padding: 12px; width: 65px; height: 90px; text-align: center; }
.person-left { transform: translate(-66px, 10px) rotate(-18deg); }.person-right { transform: translate(66px, 10px) rotate(18deg); }

.whos-art { background: radial-gradient(ellipse at 50% 45%, #fff2d4 0, #eddbb3 65%, #d7c49e 100%); }
.whos-art-person { position: absolute; display: grid; place-items: center; width: 65px; height: 90px; border-radius: 18px; border: 1px solid white; font: 42px Georgia,serif; box-shadow: 0 8px 18px #735e3320; }
.whos-person-left { background: #eef3df; color: #6c7d4c; transform: translate(-68px,10px) rotate(-14deg); }.whos-person-right { background: #f5e1dc; color: #b07364; transform: translate(68px,10px) rotate(14deg); }.whos-person-center { background: #fffbef; color: #a27b3c; transform: translateY(14px); }
.whos-art-question { position: absolute; top: 10px; right: calc(50% - 66px); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50% 50% 50% 4px; background: #a27b3c; color: #fff9e8; font: 30px Georgia,serif; transform: rotate(8deg); }

.tag-art { background: radial-gradient(ellipse at center,#f2f7e9,#cfdcbe); }.tag-art-path { position: absolute; width: 210px; height: 100px; border: 2px dashed #a6bb92; border-radius: 50%; transform: rotate(-12deg); }.tag-art-runner { position: absolute; font-size: 31px; line-height: 1; text-align: center; width: 44px; height: 85px; }.tag-art-runner i { display: block; width: 32px; height: 42px; border-radius: 12px; background: currentColor; margin: 0 auto; box-shadow: -13px 8px 0 -7px currentColor,14px -2px 0 -7px currentColor; }.runner-one { color: #e86c60; transform: translate(-48px,7px) rotate(-13deg); }.runner-two { color: #448ed0; transform: translate(50px,-3px) rotate(14deg); }.tag-art-label { position: absolute; top: 12px; left: calc(50% - 81px); padding: 5px 12px; border-radius: 12px; background: #ffc943; color: #65410c; font-size: 15px; font-weight: 800; transform: rotate(-8deg); }

.activity-card .game-title-row h2 { font-size: 22px; }.activity-art { background: radial-gradient(ellipse at center,#fff5df,#e3d1b4); }.activity-art-road { position: absolute; width: 230px; height: 86px; border: 8px dotted #c9bca7; border-radius: 25px; transform: rotate(-10deg); }.activity-art-icon { position: absolute; display: grid; place-items: center; width: 64px; height: 72px; border: 2px solid white; border-radius: 16px; color: white; font-size: 34px; box-shadow: 0 7px 12px #5e4b3020; }.icon-pencil { background: #d8a136; transform: translate(-70px,8px) rotate(-14deg); }.icon-talk { background: #548fcd; transform: translateY(-8px) rotate(4deg); }.icon-mime { background: #6a9d61; transform: translate(70px,12px) rotate(13deg); }
@media(max-width:370px) { .activity-card .game-title-row h2 { font-size: 18px; }.activity-card .game-description { font-size: 10px; } }