:root{
  --game-teal:#00a99f; --game-teal-dark:#08766f; --game-mint:#e8f8f4;
  --game-yellow:#f6c744; --game-ink:#173c42; --game-muted:#557277;
  --game-surface:#fff; --game-line:#cfe9e4;
}

html{overflow-x:hidden}
.mk-games-page{margin:0; overflow-x:hidden; background:#f7fbfa; color:var(--game-ink); font-family:'Prompt',sans-serif}
.mk-games-page main{overflow:hidden}
.mk-games-page .side-menu{visibility:hidden; transform:none; clip-path:inset(0 0 0 100%); transition:clip-path .22s ease,visibility .22s ease}
.mk-games-page .side-menu.show{visibility:visible; transform:none; clip-path:inset(0)}
.games-shell{width:min(1120px,calc(100% - 36px)); margin-inline:auto}
.games-breadcrumb{display:flex; align-items:center; gap:9px; margin-bottom:22px; font-size:14px}
.games-breadcrumb a{color:var(--game-teal-dark); text-decoration:none}
.games-breadcrumb span{color:#668186}

.games-hero{position:relative; padding:clamp(56px,8vw,104px) 0 74px; background:var(--game-teal-dark); color:#fff}
.games-hero::after{content:''; position:absolute; right:-70px; bottom:-120px; width:320px; height:320px; border-radius:50%; background:var(--game-yellow); opacity:.95}
.games-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:clamp(34px,6vw,80px); align-items:center}
.games-kicker{margin:0 0 13px; color:#ffe07c; font-size:17px; font-weight:700}
.games-hero h1{max-width:720px; margin:0; font-size:clamp(38px,6vw,72px); line-height:1.12; letter-spacing:-.025em; text-wrap:balance}
.games-hero-copy>p:last-child{max-width:650px; margin:21px 0 0; color:#e2f7f3; font-size:clamp(17px,2vw,20px); line-height:1.8; text-wrap:pretty}
.games-hero-visual{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; transform:rotate(3deg)}
.hero-shape{display:grid; place-items:center; min-height:118px; border-radius:15px; background:#fff; color:var(--game-ink); font-size:50px; box-shadow:0 8px 0 rgba(0,0,0,.1)}
.hero-shape:nth-child(2){background:#ffe48d}.hero-shape:nth-child(3){background:#bcece2}.hero-shape:nth-child(4){background:#f4b6bd}

.games-library{padding:clamp(58px,8vw,96px) 0 92px}
.games-section-heading{display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:30px}
.games-section-heading h2{margin:0; font-size:clamp(28px,4vw,43px); letter-spacing:-.02em; text-wrap:balance}
.games-section-heading p{max-width:510px; margin:0; color:var(--game-muted); line-height:1.75}
.featured-game{display:grid; grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr); overflow:hidden; border-radius:16px; background:var(--game-surface); box-shadow:0 8px 0 #d7ece8}
.game-preview{position:relative; display:grid; place-items:center; min-height:380px; padding:42px; background:var(--game-mint)}
.preview-board{display:grid; grid-template-columns:repeat(2,116px); gap:14px}
.preview-tile{display:grid; place-items:center; aspect-ratio:1; border:3px solid #fff; border-radius:14px; background:#fff; font-size:55px; box-shadow:0 6px 0 rgba(8,118,111,.13)}
.preview-tile.shadow{background:#557277; filter:grayscale(1); opacity:.8}
.game-badge{position:absolute; top:22px; left:22px; padding:8px 13px; border-radius:999px; background:var(--game-yellow); color:#3d350c; font-size:13px; font-weight:700}
.game-details{display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,5vw,64px)}
.game-details h3{margin:0 0 14px; font-size:clamp(30px,4vw,48px); letter-spacing:-.025em}
.game-details>p{max-width:58ch; margin:0; color:var(--game-muted); font-size:17px; line-height:1.8}
.game-meta{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 30px; padding:0; list-style:none}
.game-meta li{padding:8px 12px; border-radius:999px; background:var(--game-mint); color:var(--game-teal-dark); font-size:14px; font-weight:600}
.game-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.game-button{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 23px; border:0; border-radius:999px; background:var(--game-teal-dark); color:#fff; font:700 16px 'Prompt',sans-serif; text-decoration:none; cursor:pointer; transition:transform .2s ease,background .2s ease}
.game-button:hover{background:#055e59; transform:translateY(-2px)}
.game-note{color:var(--game-muted); font-size:13px}
.featured-game+.featured-game{margin-top:28px}
.coloring-feature{box-shadow:0 8px 0 #f1dfaa}
.coloring-preview{background:#fff4cf}
.coloring-preview-art{display:grid; place-items:center; width:190px; aspect-ratio:1; border:3px solid #fff; border-radius:16px; background:#fff; font-size:86px; box-shadow:0 7px 0 rgba(101,83,23,.12)}
.coloring-preview-palette{position:absolute; display:flex; gap:7px; bottom:25px}
.coloring-preview-palette span{width:28px; height:28px; border:3px solid #fff; border-radius:50%; background:#ef6970}
.coloring-preview-palette span:nth-child(2){background:#f2bf56}.coloring-preview-palette span:nth-child(3){background:#65b78e}.coloring-preview-palette span:nth-child(4){background:#5dbdd8}.coloring-preview-palette span:nth-child(5){background:#ac95d8}
.coming-soon{display:flex; justify-content:space-between; gap:24px; align-items:center; margin-top:28px; padding:27px 30px; border:2px dashed #b6dcd5; border-radius:14px; background:#f0faf7}
.coming-soon h3{margin:0 0 5px; font-size:20px}.coming-soon p{margin:0; color:var(--game-muted)}
.coming-soon span{flex:none; color:var(--game-teal-dark); font-weight:700}

.shadow-game{padding:34px 0 84px; background:linear-gradient(160deg,#e7f7f3,#f8fbfa 58%,#fff7df)}
.shadow-game .games-breadcrumb{margin-bottom:20px}
.game-top{display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:24px}
.game-brand{color:var(--game-teal-dark); font-size:14px; font-weight:700}
.game-top h1{margin:7px 0 6px; font-size:clamp(34px,5vw,54px); letter-spacing:-.025em}
.game-intro{margin:0; color:var(--game-muted); font-size:17px; line-height:1.7}
.score-pill,.count-pill{flex:none; padding:10px 15px; border-radius:999px; background:#fff; color:var(--game-ink); font-size:14px; font-weight:700; box-shadow:0 4px 0 #d8ece7}
.screen[hidden]{display:none!important}
.game-board{padding:clamp(20px,4vw,38px); border-radius:16px; background:#fff; box-shadow:0 8px 0 #d8ece7}
.start-card{max-width:780px; margin:0 auto 24px}
.game-heading{margin-bottom:15px; font-size:21px; font-weight:700}.game-hint{color:#688388; font-size:13px; font-weight:400}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px}
.field-label{display:block; margin-bottom:8px; font-size:15px; font-weight:700}
.name-input,.difficulty{width:100%; min-height:54px; padding:12px 14px; border:2px solid var(--game-line); border-radius:12px; background:#fff; color:var(--game-ink); font:600 16px 'Prompt',sans-serif}
.name-input:focus,.difficulty:focus{outline:3px solid #ffe298; border-color:var(--game-teal)}
.helper{margin:8px 0 0; color:#617b80; font-size:13px; line-height:1.55}.form-error{color:#a63844}
.start-actions{text-align:center; margin-top:24px}.leaderboard{max-width:780px; margin:20px auto 0}.leaderboard h2{margin:0 0 14px; font-size:21px}
.rank-table{width:100%; border-collapse:collapse; font-size:15px}.rank-table th,.rank-table td{padding:11px 8px; border-bottom:1px solid #e8f0ee; text-align:left}.rank-table th{color:#547277; font-size:13px}.rank-table td:last-child,.rank-table th:last-child{text-align:right}
.player-line{margin:0 0 12px; color:var(--game-teal-dark); font-weight:700}.topline{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}.level{font-weight:700}
.progress{flex:1; min-width:130px; max-width:340px; height:11px; overflow:hidden; border-radius:999px; background:#dcebe7}.bar{width:0; height:100%; background:var(--game-teal); transition:width .3s ease}
.game-layout{display:grid; grid-template-columns:1fr 1fr; gap:30px}.tile-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.tile{position:relative; display:flex; align-items:center; justify-content:center; height:156px; border:3px solid #e1efeb; border-radius:14px; background:#fafdFC; cursor:pointer; touch-action:manipulation; transition:transform .15s ease,border-color .15s ease,background .15s ease}
.tile:hover:not(:disabled){transform:translateY(-2px); border-color:#73c9c0}.tile:focus-visible{outline:4px solid #f4b836; outline-offset:3px}.tile svg{width:104px; height:104px; overflow:visible}.tile.selected{border-color:#f4b836; background:#fff8e3}.tile.correct{border-color:#43a97e; background:#e3f7ec; cursor:default}.tile.correct::after{content:'✓'; position:absolute; top:7px; right:11px; color:#16824f; font-size:23px; font-weight:900}.tile:disabled{opacity:1}.tile.shake{animation:game-shake .35s}
.feedback{min-height:45px; margin:19px 0 4px; color:var(--game-teal-dark); text-align:center; font-size:19px; font-weight:700}.actions,.sub-actions{display:flex; justify-content:center; gap:12px; flex-wrap:wrap}.secondary{background:#e8f3f0; color:var(--game-ink)}.secondary:hover{background:#d9ebe7}.game-button:disabled{opacity:.45; cursor:default; transform:none}
.game-foot{margin-top:18px; color:#627e82; text-align:center; font-size:13px}.complete{text-align:center; padding:30px 10px}.complete .trophy{font-size:68px}.complete h2{font-size:30px}.complete p{margin:12px 0 22px; font-size:17px; line-height:1.7}

@keyframes game-shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-4px)}}

@media(max-width:900px){
  .games-hero-grid{grid-template-columns:1fr}.games-hero-visual{max-width:420px}
  .featured-game{grid-template-columns:1fr}.game-preview{min-height:330px}
}
@media(max-width:680px){
  .games-shell{width:min(100% - 24px,1120px)}.games-hero{padding:42px 0 62px}.games-hero::after{width:210px; height:210px; right:-85px; bottom:-105px}
  .games-hero-visual{grid-template-columns:repeat(4,1fr); gap:7px; transform:none}.hero-shape{min-height:70px; font-size:32px}
  .games-section-heading,.coming-soon,.game-top{align-items:flex-start; flex-direction:column}.game-preview{min-height:275px; padding:32px 18px}.preview-board{grid-template-columns:repeat(2,94px)}
  .game-details{padding:30px 22px}.coming-soon{padding:22px}.shadow-game{padding:24px 0 58px}
  .form-row,.game-layout{grid-template-columns:1fr}.game-layout{gap:25px}.game-board{padding:17px 12px}.tile-grid{gap:9px}.tile{height:124px}.tile svg{width:84px; height:84px}
  .rank-table th,.rank-table td{padding:9px 4px; font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}