:root {
  color-scheme: light;
  --night: #171522;
  --paper: #fbf8f2;
  --muted: #a19eae;
  --violet: #7869f4;
  --lime: #c7f477;
  --body: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
body { min-height: 100vh; margin: 0; background: var(--night); color: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { touch-action: manipulation; }
button { color: inherit; }
.games-header { width: min(1320px, calc(100% - 72px)); height: 79px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff1c; }
.games-brand { display: inline-flex; align-items: center; gap: 9px; font: 800 23px var(--display); letter-spacing: -1.5px; }
.games-brand > span:last-child { color: var(--lime); }
.brand-bars { display: inline-flex; height: 21px; align-items: flex-end; gap: 2px; transform: skew(-17deg); }
.brand-bars i { display: block; width: 4px; border-radius: 3px; background: var(--lime); }
.brand-bars i:nth-child(1) { height: 10px; }.brand-bars i:nth-child(2) { height: 16px; }.brand-bars i:nth-child(3) { height: 21px; }
.back-link { color: #cecad8; font-size: 12px; }.back-link span { margin-left: 8px; color: var(--lime); }
.games-main { width: min(1120px, calc(100% - 72px)); margin: 0 auto; }
.games-intro { position: relative; padding: 80px 0 47px; }
.eyebrow, .tile-number, .tile-art-caption, .games-footer { font-family: var(--mono); letter-spacing: .08em; }
.eyebrow { margin: 0; color: #c6c2d1; font-size: 10px; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #c7f47720; }
.games-intro h1 { margin: 24px 0 12px; font: 600 clamp(54px, 7vw, 82px)/.98 var(--display); letter-spacing: -.085em; }
.games-intro h1 span { color: var(--lime); }
.games-intro-copy { margin: 0; color: #b1adbc; font-size: 14px; }
.games-intro .offline-status { min-height: 15px; margin: 11px 0 0; color: #c7f477; font: 8px var(--mono); letter-spacing: .03em; }
.intro-doodle { position: absolute; right: 11%; top: 76px; color: var(--violet); font-size: 82px; animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.game-tile { min-width: 0; overflow: hidden; border: 1px solid #ffffff17; border-radius: 14px; background: #211f30; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.game-tile:hover, .game-tile:focus-visible { transform: translateY(-5px); border-color: #9388ff99; box-shadow: 0 16px 38px #08071155; }
.game-tile:focus-visible, .back-link:focus-visible, .games-brand:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.tile-art { height: 205px; position: relative; overflow: hidden; }
.tile-art::after { position: absolute; inset: 0; content: ""; opacity: .13; background-image: radial-gradient(#fff .55px, transparent .55px); background-size: 7px 7px; pointer-events: none; }
.tile-art-caption { position: absolute; left: 16px; bottom: 14px; font-size: 8px; letter-spacing: .12em; }
.reflex-art { background: linear-gradient(140deg, #f2a07e, #f57787); }
.reflex-target { position: absolute; left: 50%; top: 47%; width: 87px; height: 87px; border: 1px solid #fff9; border-radius: 50%; transform: translate(-50%, -50%); }
.reflex-target::before, .reflex-target::after { position: absolute; content: ""; border-radius: 50%; }
.reflex-target::before { inset: 10px; border: 1px solid #fff9; }.reflex-target::after { inset: 26px; background: var(--paper); box-shadow: 0 5px 18px #843f4c40; }
.spark { position: absolute; color: #fff4cb; }.spark-left { top: 25%; left: 25%; font-size: 25px; }.spark-right { top: 31%; right: 25%; font-size: 19px; }
.memory-art { background: linear-gradient(140deg, #70c9bb, #3c9f9e); }
.mini-card { position: absolute; width: 58px; height: 75px; display: grid; place-items: center; border: 1px solid #ffffff70; border-radius: 7px; background: #f9f5e9; box-shadow: 0 8px 15px #1b5c5a3b; color: #6558e9; font: 700 25px var(--display); }
.mini-one { left: calc(50% - 78px); top: 34px; transform: rotate(-12deg); }.mini-two { left: calc(50% - 17px); top: 25px; transform: rotate(4deg); color: #439f99; }.mini-three { left: calc(50% + 43px); top: 39px; transform: rotate(12deg); color: #439f99; }.mini-four { left: calc(50% - 21px); top: 91px; transform: rotate(-4deg); color: #ef8e83; }
.number-art { background: linear-gradient(140deg, #776af0, #5145c7); }
.number-orbit { position: absolute; left: 50%; top: 47%; width: 146px; height: 94px; border: 1px solid #dcd7ff99; border-radius: 50%; transform: translate(-50%, -50%) rotate(-26deg); }
.orbit-second { transform: translate(-50%, -50%) rotate(53deg); }
.number-symbol { position: absolute; left: 50%; top: 47%; width: 61px; height: 61px; display: grid; place-items: center; border-radius: 50%; transform: translate(-50%, -50%); background: var(--lime); color: #282440; font: 700 35px var(--display); box-shadow: 0 9px 25px #21195755; }
.tile-info { position: relative; min-height: 177px; padding: 19px 18px 20px; }
.tile-number { color: #a8a4b4; font-size: 8px; }
.tile-info h2 { margin: 14px 0 6px; font: 700 22px var(--display); letter-spacing: -.05em; }
.tile-info p { max-width: 275px; margin: 0; color: #aaa7b6; font-size: 11px; line-height: 1.6; }
.tile-arrow { position: absolute; top: 17px; right: 18px; color: var(--lime); font-size: 18px; }
.tile-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tile-tags span { padding: 5px 6px; border: 1px solid #c7f47745; border-radius: 20px; color: var(--lime); font: 7px var(--mono); letter-spacing: .03em; }
.tile-tags span + span { border-color: #ffffff24; color: #aaa7b6; }
.games-footer { min-height: 75px; display: flex; justify-content: space-between; align-items: center; margin-top: 57px; border-top: 1px solid #ffffff1c; color: #8e8b9c; font-size: 8px; }
.footer-spark { margin-left: 6px; color: var(--lime); }
.game-catalog { margin-top: 82px; padding-top: 55px; border-top: 1px solid #ffffff1c; }
.catalog-heading { max-width: 650px; margin-bottom: 27px; }
.catalog-heading h2 { margin: 17px 0 12px; font: 700 clamp(38px, 5vw, 58px)/1.02 var(--display); letter-spacing: -.075em; }
.catalog-heading h2 span { color: var(--lime); }
.catalog-heading > p:last-child { max-width: 570px; margin: 0; color: #b1adbc; font-size: 13px; line-height: 1.7; }
.catalog-controls { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto minmax(170px, .55fr); align-items: center; gap: 10px; margin-bottom: 9px; }
.catalog-controls label { color: #c5c1d0; font-size: 11px; }
.catalog-controls input, .catalog-controls select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #ffffff30; border-radius: 8px; background: #211f30; color: var(--paper); font-size: 12px; }
.catalog-controls input:focus-visible, .catalog-controls select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.catalog-result-count { min-height: 17px; margin: 0 0 13px; color: #aaa7b6; font-size: 10px; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.catalog-card { position: relative; min-width: 0; min-height: 132px; padding: 15px 14px; overflow: hidden; border: 1px solid #ffffff18; border-radius: 10px; background: #211f30; }
.catalog-card::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: var(--catalog-color, var(--violet)); }
.catalog-board { --catalog-color: #c7f477; }.catalog-cards { --catalog-color: #e5bc73; }.catalog-puzzle { --catalog-color: #85c6ea; }.catalog-word { --catalog-color: #e694b9; }.catalog-arcade { --catalog-color: #f58f78; }.catalog-dice { --catalog-color: #9ad5bc; }.catalog-sports { --catalog-color: #e0a9ef; }.catalog-strategy { --catalog-color: #a9a1ff; }.catalog-party { --catalog-color: #ffca77; }
.catalog-number { display: block; max-width: 70%; color: #aaa7b6; font: 8px var(--mono); letter-spacing: .05em; }
.catalog-badge { position: absolute; top: 12px; right: 11px; padding: 4px 6px; border: 1px solid #ffffff26; border-radius: 12px; color: #aaa7b6; font: 7px var(--mono); }
.catalog-card h3 { margin: 19px 0 5px; font: 700 16px var(--display); letter-spacing: -.035em; }
.catalog-card p { margin: 0; color: #aaa7b6; font-size: 10px; line-height: 1.5; }
.catalog-sources { margin: 17px 0 0; color: #aaa7b6; font-size: 10px; line-height: 1.7; }
.catalog-sources a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.catalog-sources a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.play-main { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 72px; }
.game-tools { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 14px; margin: -17px 0 22px; padding: 13px 15px; border: 1px solid #c7f47736; border-radius: 10px; background: #211f30; }
.game-tools > p:first-child { margin: 0; color: var(--lime); font: 8px var(--mono); letter-spacing: .07em; }
.game-tools > p:first-child span { display: block; margin-top: 5px; color: #aaa7b6; font: 10px/1.4 var(--body); letter-spacing: 0; }
.shortcut-button { min-height: 44px; padding: 0 16px; border: 1px solid #c7f4777a; border-radius: 24px; background: transparent; color: var(--lime); cursor: pointer; font-size: 11px; font-weight: 700; }
.shortcut-button:hover { background: #c7f47716; }.shortcut-button:focus-visible, .mode-link-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.shortcut-status { grid-column: 1 / -1; min-height: 0; margin: 0; color: #b1adbc; font-size: 9px; line-height: 1.5; }
.shortcut-status:empty { display: none; }
.save-status { min-height: 15px; margin: 13px 0 0; color: #aaa7b6; font-size: 9px; text-align: center; }
.guess-history { min-height: 17px; margin: 8px 0 0; color: #aaa7b6; font-size: 10px; }
.play-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 40px; color: #c5c1d0; font-size: 12px; }
.play-back span { color: var(--lime); }
.play-panel { padding: clamp(23px, 5vw, 44px); border: 1px solid #ffffff1c; border-radius: 16px; background: #211f30; box-shadow: 0 20px 60px #08071140; }
.play-eyebrow { margin: 0 0 11px; color: var(--lime); font: 9px var(--mono); letter-spacing: .12em; }
.play-panel h1 { margin: 0; font: 700 clamp(37px, 7vw, 58px)/1 var(--display); letter-spacing: -.075em; }
.play-description { margin: 13px 0 25px; color: #b1adbc; font-size: 13px; line-height: 1.65; }
.game-screen { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; border: 1px solid #ffffff16; border-radius: 12px; background: #191725; text-align: center; }
.game-message { min-height: 26px; margin: 0 0 17px; color: #c5c1d0; font-size: 13px; }
.memory-message { margin: 18px 0 0; }
.game-button { min-height: 48px; padding: 0 23px; border: 0; border-radius: 30px; background: var(--lime); color: #25213a; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform .16s ease, background .16s ease; }
.game-button:hover { transform: translateY(-2px); background: #d5ff8d; }
.game-button:focus-visible, .guess-input:focus-visible, .memory-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.game-stats { display: flex; justify-content: center; gap: 30px; margin-top: 20px; color: #a7a3b2; font: 10px var(--mono); }
.game-stats { flex-wrap: wrap; align-items: center; }
.game-stats strong { color: var(--paper); font-weight: 500; }
.reaction-screen { cursor: pointer; user-select: none; transition: background .15s ease; }
.reaction-screen.is-waiting { background: #332b28; }.reaction-screen.is-ready { background: #264932; cursor: pointer; }.reaction-screen.is-early { background: #48303a; }
.reaction-target { width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid #ffffff52; border-radius: 50%; color: var(--lime); font-size: 35px; }
.reaction-screen.is-ready .reaction-target { border-color: var(--lime); background: var(--lime); color: #25452e; box-shadow: 0 0 38px #c7f47750; }
.memory-board { width: min(100%, 380px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.memory-card { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff2b; border-radius: 9px; background: #302d43; color: var(--paper); cursor: pointer; font-size: clamp(20px, 6vw, 30px); transition: transform .15s ease, background .15s ease; }
.memory-card:hover:not(:disabled) { transform: translateY(-2px); background: #403b59; }
.memory-card.is-flipped, .memory-card.is-matched { background: #6257ce; }.memory-card.is-matched { border-color: var(--lime); cursor: default; }
.guess-form { display: flex; align-items: center; gap: 9px; }
.guess-input { width: 100px; height: 48px; padding: 0 10px; border: 1px solid #ffffff30; border-radius: 8px; background: #211f30; color: var(--paper); text-align: center; font-size: 16px; }
.guess-input:disabled { opacity: .55; }
.guess-status { min-height: 22px; margin: 18px 0 0; color: #d4d0df; font-size: 12px; }
.play-again { margin-top: 13px; }
.play-credit { margin: 22px 0 0; color: #858192; text-align: center; font: 9px var(--mono); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ludo-art { background: linear-gradient(140deg, #f6d796, #efa979); }
.ludo-board { position: absolute; width: 64px; height: 64px; border: 9px solid #fff9; border-radius: 10px; box-shadow: inset 0 0 0 1px #433c4b22, 0 7px 14px #59453e27; }
.ludo-blue { left: calc(50% - 56px); top: 31px; background: #334caa; transform: rotate(-8deg); }
.ludo-red { left: calc(50% + 1px); top: 31px; background: #ed2731; transform: rotate(8deg); }
.ludo-yellow { left: calc(50% - 56px); top: 89px; background: #f5e51d; transform: rotate(7deg); }
.ludo-green { left: calc(50% + 1px); top: 89px; background: #129957; transform: rotate(-6deg); }
.ludo-die { position: absolute; z-index: 1; top: 64px; left: calc(50% - 21px); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; transform: rotate(-5deg); background: var(--paper); color: #f16f73; box-shadow: 0 7px 15px #59453e3d; font-size: 28px; }
.chess-art { display: grid; grid-template-columns: repeat(2, 75px); grid-template-rows: repeat(2, 64px); align-content: center; justify-content: center; background: linear-gradient(140deg, #e4c5a5, #99705e); }
.chess-art > span:not(.tile-art-caption) { display: grid; place-items: center; color: #fffdf6; font: 48px/1 "Segoe UI Symbol", serif; text-shadow: 0 2px 5px #30243566; }
.chess-art > span:nth-child(2), .chess-art > span:nth-child(3) { color: #30283e; }
.patti-art { display: flex; align-items: center; justify-content: center; gap: 7px; background: radial-gradient(ellipse at center, #307d5a, #123e38); }
.patti-card { width: 56px; height: 82px; display: flex; flex-direction: column; justify-content: space-between; padding: 7px; border-radius: 7px; transform: rotate(-12deg); background: #fffdf5; color: #d84655; box-shadow: 0 7px 12px #10151f55; font: 700 18px var(--display); }
.patti-card:nth-child(2) { z-index: 1; transform: translateY(-7px); color: #28233a; }.patti-card:nth-child(3) { transform: rotate(12deg); }
.patti-card span { align-self: flex-end; font-size: 20px; }.patti-card:nth-child(2) span { color: #28233a; }
.tictactoe-art { display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 50px); align-content: center; justify-content: center; background: linear-gradient(140deg, #7acfc0, #438c91); }
.tictactoe-art > span:not(.tile-art-caption) { display: grid; place-items: center; border-right: 1px solid #ffffff70; border-bottom: 1px solid #ffffff70; color: #f7f4e8; font: 700 35px var(--display); }
.tictactoe-art > span:nth-child(2), .tictactoe-art > span:nth-child(4) { color: #d7ff92; }
.uno-art { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(140deg, #8376f0, #5245c4); }
.uno-art > span:not(.tile-art-caption) { width: 53px; height: 77px; display: grid; place-items: center; border: 2px solid white; border-radius: 10px; transform: rotate(-12deg); background: #e84c61; color: white; font: 700 20px var(--display); box-shadow: 0 7px 12px #21195755; }
.uno-art > span:nth-child(2) { z-index: 1; transform: translateY(-7px); background: #e9c43d; color: #28233a; }.uno-art > span:nth-child(3) { transform: rotate(12deg); background: #308bdc; }
.tambola-art { display: grid; grid-template-columns: repeat(2, 67px); grid-template-rows: repeat(2, 46px); align-content: center; justify-content: center; gap: 5px; background: linear-gradient(140deg, #f0b973, #e67b77); }
.tambola-art > span:not(.tile-art-caption) { display: grid; place-items: center; border: 1px solid #fff8; border-radius: 7px; background: #fffdf5; color: #5448c2; font: 700 20px var(--display); box-shadow: 0 4px 8px #69394325; }
@media (max-width: 1050px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .games-header { width: calc(100% - 40px); height: 68px; }
  .games-main { width: calc(100% - 40px); }
  .games-intro { padding: 61px 0 35px; }
  .games-intro h1 { font-size: clamp(51px, 12vw, 72px); }
  .games-intro-copy { max-width: 440px; font-size: 12px; line-height: 1.6; }
  .intro-doodle { top: 59px; right: 3%; font-size: 57px; }
  .game-grid { grid-template-columns: 1fr; gap: 14px; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-controls { grid-template-columns: auto minmax(0, 1fr); }
  .catalog-controls label:nth-of-type(2) { grid-column: 1; }
  .catalog-controls select { grid-column: 2; }
  .game-tile { display: grid; grid-template-columns: minmax(100px, .72fr) 1.28fr; min-height: 154px; }
  .tile-art { min-height: 154px; height: 100%; }
  .tile-info { min-height: 154px; padding: 17px 14px; }
  .tile-info h2 { margin-top: 13px; font-size: 20px; }
  .tile-info p { font-size: 11px; line-height: 1.5; }
  .tile-tags { gap: 5px; margin-top: 10px; }.tile-tags span { padding: 5px 6px; font-size: 7px; }
  .mini-card { width: 46px; height: 62px; }
  .mini-one { left: calc(50% - 58px); top: 30px; }.mini-two { left: calc(50% - 11px); top: 24px; }.mini-three { left: calc(50% + 31px); top: 34px; }.mini-four { left: calc(50% - 15px); top: 81px; }
  .reflex-target { width: 73px; height: 73px; }
  .games-footer { margin-top: 38px; font-size: 7px; }
  .play-main { padding-top: 28px; }
  .play-back { min-height: 44px; margin-bottom: 19px; }
  .play-panel { padding: 21px 17px; border-radius: 13px; }
  .play-description { margin: 10px 0 20px; font-size: 13px; }
  .game-screen { min-height: 270px; padding: 16px; }
  .game-tools { margin: -7px 0 17px; padding: 13px; grid-template-columns: 1fr; gap: 10px; }
  .game-tools > p:first-child { font-size: 9px; line-height: 1.5; }
  .shortcut-button { width: 100%; justify-self: stretch; }
  .shortcut-status { grid-column: 1; font-size: 10px; }
  .game-button { min-height: 48px; padding-inline: 18px; }
  .game-stats { gap: 14px 20px; font-size: 9px; }
  .game-stats .game-button { flex-basis: 100%; }
}
@media (max-width: 390px) {
  .game-catalog { margin-top: 60px; padding-top: 40px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .catalog-card { min-height: 126px; padding: 14px 11px; }
  .catalog-card h3 { font-size: 14px; }
  .catalog-controls { grid-template-columns: 1fr; gap: 6px; }
  .catalog-controls label:nth-of-type(2), .catalog-controls select { grid-column: 1; }
  .games-header, .games-main { width: calc(100% - 30px); }
  .game-tile { grid-template-columns: .78fr 1.22fr; }
  .tile-info { padding: 15px 11px; }
  .tile-number { font-size: 7px; }
  .tile-info h2 { font-size: 18px; }
  .tile-info p { font-size: 10px; }
  .tile-tags span { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}