/* Two compact, self-contained mini-games for Wanjiku's playground. */
.mini-games{padding:76px 5% 125px;background:#f5ede7;color:#352a32;border-top:1px solid #e3d1cb}
.games-intro{max-width:760px;margin:0 auto 34px;text-align:center}
.games-kicker{display:block;margin-bottom:14px;color:#9a536c;font-size:10px;font-weight:900;letter-spacing:2px}
.games-intro h2{font-size:clamp(34px,5.2vw,64px);line-height:1.08}
.games-intro h2 em{color:#a44e6b}
.games-intro p{max-width:560px;margin:16px auto 0;color:#79636b;font-size:14px;line-height:1.8}
.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1240px;margin:0 auto}
.game-card{min-width:0;padding:25px;background:#fffaf5;border:1px solid #e3d0c8;border-radius:22px;box-shadow:0 14px 40px #4930320b}
.game-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:17px}
.game-index{font-size:9px;font-weight:900;letter-spacing:1.8px;color:#9b586b}
.game-tag{padding:5px 9px;border:1px solid #e4d0ca;border-radius:999px;font-size:8px;letter-spacing:1px;color:#947a7b}
.game-card h3{font:italic clamp(25px,3vw,35px)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-.5px}
.game-description{min-height:48px;margin:12px 0 18px;color:#806b70;font-size:12px;line-height:1.75}
.gravity-card{background:linear-gradient(160deg,#fffaf5,#f4ece7)}
.gravity-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.gravity-hud>div{padding:9px 12px;background:#eee3dd;border:1px solid #e0d0c9;border-radius:10px}
.gravity-hud span{display:block;color:#92777a;font-size:8px;font-weight:800;letter-spacing:1.5px}
.gravity-hud strong{display:block;margin-top:2px;color:#432c3b;font:700 21px/1.2 Georgia,serif}
.gravity-frame{position:relative;overflow:hidden;border:1px solid #3c2a43;border-radius:14px;background:#171521;box-shadow:inset 0 0 45px #0004}
#gravity-canvas{display:block;width:100%;height:auto;aspect-ratio:800/520;outline:none;touch-action:none;cursor:crosshair}
#gravity-canvas:focus-visible{outline:3px solid #ffb4d0;outline-offset:-4px}
.gravity-overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:22px;text-align:center;background:#171521d9;color:#fff6fb;backdrop-filter:blur(3px)}
.gravity-overlay[hidden]{display:none!important}
.gravity-orb-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;color:#ff9dc2;background:#ff9dc21b;border:1px solid #ff9dc27a;font-size:19px;box-shadow:0 0 26px #ff9dc233}
.gravity-overlay strong{font:italic clamp(25px,3vw,35px)/1.1 Georgia,serif}
.gravity-overlay p{max-width:290px;margin:0;color:#e0cbdc;font-size:11px;line-height:1.7}
.game-primary-button,.game-secondary-button{min-height:39px;padding:9px 15px;border:1px solid transparent;border-radius:999px;font:800 11px/1 Arial,sans-serif;cursor:pointer;transition:transform .18s,background .18s,opacity .18s}
.game-primary-button{margin-top:5px;background:#ffb0cd;color:#342130;box-shadow:0 4px 0 #b45d80}
.game-primary-button:hover,.game-secondary-button:hover{transform:translateY(-2px)}
.game-secondary-button{background:#f3e5df;border-color:#dfc9c0;color:#684451}
.game-secondary-button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.gravity-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px}
.gravity-controls>span{margin-left:auto;color:#8a777b;font-size:9px;letter-spacing:.2px}
.game-status{min-height:19px;margin:11px 0 0;color:#8b6b75;font-size:10px;line-height:1.6}
.colour-card{background:linear-gradient(155deg,#2a2030,#201923);border-color:#4c374a;color:#fff6f1}
.colour-card .game-index{color:#ffb4d0}
.colour-card .game-tag{border-color:#63475b;color:#e4b5cc}
.colour-card .game-description{color:#d6c1cf}
.colour-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:15px}
.colour-stats>div{padding:9px 11px;border:1px solid #4c394d;border-radius:10px;background:#ffffff08}
.colour-stats span{display:block;color:#bda4b9;font-size:8px;font-weight:800;letter-spacing:1.5px}
.colour-stats strong{display:block;margin-top:3px;color:#fff6f4;font:700 21px/1.2 Georgia,serif}
.colour-board-wrap{padding:13px;border:1px solid #4c394d;border-radius:15px;background:#17131d;box-shadow:inset 0 0 35px #0003}
.colour-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;width:min(100%,430px);margin:0 auto}
.colour-tile{--tile-colour:#fb7185;display:grid;place-items:center;position:relative;min-width:0;aspect-ratio:1;border:0;border-radius:10px;padding:0;background:var(--tile-colour);box-shadow:inset 0 2px 0 #ffffff55,0 4px 0 #0003;cursor:pointer;touch-action:manipulation;transition:transform .14s,filter .14s,box-shadow .14s}
.colour-tile:hover{filter:brightness(1.08);transform:translateY(-2px)}
.colour-tile:focus-visible{outline:3px solid #fff5c7;outline-offset:2px}
.colour-tile.is-selected{z-index:1;transform:scale(.89);box-shadow:0 0 0 3px #fff7e9,0 0 0 6px #ff9bc9,0 6px 13px #0004}
.colour-glyph{color:#fff;font:900 clamp(13px,2vw,23px)/1 Arial,sans-serif;text-shadow:0 2px 4px #0003;pointer-events:none}
.colour-tile.is-matched{animation:colour-tile-burst .22s ease-in forwards}
.colour-empty{aspect-ratio:1;border-radius:10px;background:#ffffff08;border:1px dashed #ffffff1a}
@keyframes colour-tile-burst{to{transform:scale(.2) rotate(15deg);opacity:0}}
.colour-roast{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:13px 14px;border-radius:12px;background:#ffedc8;color:#482b3a;border:1px solid #f8d99a;min-height:72px}
.roast-stamp{flex:0 0 auto;margin-top:3px;padding:5px 7px;border-radius:5px;background:#5a354d;color:#ffe9bd;font-size:7px;font-weight:900;letter-spacing:1px}
.colour-roast p{margin:0;font:italic 14px/1.55 Georgia,'Times New Roman',serif}
.colour-roast.roast-pop{animation:roast-arrive .24s ease-out}
@keyframes roast-arrive{from{transform:translateY(4px);opacity:.65}to{transform:translateY(0);opacity:1}}
.colour-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.colour-actions>span{flex:1;min-width:130px;color:#c2acbe;font-size:9px;line-height:1.6}
.colour-card .game-secondary-button{background:#3b2b3d;border-color:#694b66;color:#ffe6f2}
.colour-card .game-status{color:#c2a6bc}
.game-primary-button:focus-visible,.game-secondary-button:focus-visible{outline:3px solid #ffb4d0;outline-offset:3px}
@media(max-width:900px){.games-grid{grid-template-columns:minmax(0,680px);justify-content:center}.game-card{padding:22px}.game-description{min-height:0}.colour-grid{width:min(100%,460px)}.colour-glyph{font-size:clamp(16px,3vw,24px)}}
@media(max-width:480px){.mini-games{padding:54px 4% 100px}.games-intro{margin-bottom:25px}.games-intro p{font-size:13px}.game-card{padding:17px;border-radius:17px}.game-card-head{margin-bottom:14px}.game-tag{font-size:7px}.gravity-hud strong,.colour-stats strong{font-size:19px}.gravity-controls>span{width:100%;margin:2px 0 0}.colour-grid{gap:5px}.colour-board-wrap{padding:9px}.colour-tile{border-radius:7px}.colour-empty{border-radius:7px}.colour-roast{gap:8px;padding:11px}.colour-roast p{font-size:13px}.roast-stamp{font-size:6px}.colour-actions{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.game-primary-button,.game-secondary-button,.colour-tile{transition:none}.colour-tile.is-matched,.colour-roast.roast-pop{animation:none}}


/* Simpler odd-shade game: 5x5 red tiles, one slightly different. */
.colour-card{background:linear-gradient(155deg,#2a2030,#201923);border-color:#4c374a;color:#fff6f1}
.colour-card .game-description{min-height:0;margin-bottom:17px;color:#d6c1cf}
.colour-card h3{margin-bottom:0}
.colour-card .game-index{color:#ffb4d0}
.colour-card .game-tag{border-color:#63475b;color:#e4b5cc}
.colour-stats{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:10px 13px;border:1px solid #4c394d;border-radius:10px;background:#ffffff08}
.colour-stats>div{display:flex;align-items:center;gap:12px}
.colour-stats span{color:#bda4b9;font-size:9px;font-weight:800;letter-spacing:1.5px}
.colour-stats strong{color:#fff6f4;font:700 22px/1 Georgia,serif}
.colour-board-wrap{padding:12px;border:1px solid #4c394d;border-radius:15px;background:#17131d;box-shadow:inset 0 0 35px #0003}
#colour-grid.colour-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(100%,410px);margin:0 auto}
#colour-grid .colour-tile{display:block;min-width:0;width:100%;aspect-ratio:1;border:0;border-radius:8px;padding:0;box-shadow:inset 0 2px 0 #ffffff24,0 3px 0 #0003;cursor:pointer;touch-action:manipulation;transition:transform .12s,filter .12s;animation:none}
#colour-grid .colour-tile:hover{filter:brightness(1.08);transform:scale(.96)}
#colour-grid .colour-tile:focus-visible{outline:3px solid #fff4c6;outline-offset:2px}
#colour-grid .colour-tile.wrong-guess{animation:wrong-tile-nudge .2s ease-in-out}
@keyframes wrong-tile-nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.colour-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.colour-actions>span{flex:1;min-width:130px;color:#c2acbe;font-size:9px;line-height:1.6}
.colour-card .game-secondary-button{background:#3b2b3d;border-color:#694b66;color:#ffe6f2}
.colour-card .game-status{margin-top:12px;color:#c2a6bc}
.insult-flyer{position:fixed;z-index:99999;pointer-events:none;transform:translate(-50%,-50%);color:#ff759e;font:900 clamp(20px,4vw,38px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:.5px;text-transform:lowercase;white-space:nowrap;text-shadow:0 3px 0 #4b1c3b,0 0 18px #ffb5d2cc;animation:insult-takeoff 1.08s cubic-bezier(.18,.7,.24,1) forwards}
@keyframes insult-takeoff{0%{transform:translate(-50%,-50%) scale(.55) rotate(-5deg);opacity:0}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}80%{opacity:1}100%{transform:translate(calc(-50% + var(--fly-x)),calc(-50% + var(--fly-y))) scale(1.18) rotate(-4deg);opacity:0}}
@media(max-width:480px){.colour-stats{padding:9px 11px}.colour-stats strong{font-size:20px}#colour-grid.colour-grid{gap:6px}.colour-board-wrap{padding:9px}#colour-grid .colour-tile{border-radius:6px}}
@media(prefers-reduced-motion:reduce){#colour-grid .colour-tile.wrong-guess,.insult-flyer{animation-duration:.01ms}}

/* Selectable Gravity Drop difficulty and Odd Shade colour-shift HUD. */
.gravity-mode-control{display:flex;align-items:center;gap:7px;color:#8a777b;font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.gravity-mode-control select{min-height:34px;padding:7px 11px;border:1px solid #dfc9c0;border-radius:999px;background:#fffaf5;color:#684451;font:800 10px/1 Arial,sans-serif;cursor:pointer}
.gravity-mode-control select:focus-visible{outline:3px solid #ffb4d0;outline-offset:2px}
.colour-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px}
.colour-stats>div{display:block;min-width:0;padding:3px 2px;text-align:center}
.colour-stats span{display:block;margin-bottom:4px;font-size:8px;letter-spacing:1px}
.colour-stats strong{display:block;font-size:20px;overflow-wrap:anywhere}
@media(max-width:480px){
  .gravity-mode-control{gap:5px}
  .gravity-mode-control select{min-height:32px;padding:6px 8px}
  .colour-stats{gap:4px;padding:9px 7px}
  .colour-stats span{font-size:7px;letter-spacing:.5px}
  .colour-stats strong{font-size:17px}
}


/* NEON ARCADE REFINEMENT */
.mini-games{background:radial-gradient(ellipse at 50% 0%,#202044 0%,#10111f 48%,#090b13 100%);color:#f4f4ff;border-top:1px solid #5650a0}
.games-intro .games-kicker{color:#ff91ce;letter-spacing:3px}
.games-intro h2{color:#f4f4ff;text-shadow:0 0 28px #a86bff55}
.games-intro h2 em{color:#73eaff}
.games-intro p{color:#a9b4d0}
.game-card{background:linear-gradient(145deg,#171d32,#0f1424);border:1px solid #394b76;border-radius:15px;box-shadow:0 18px 55px #02040b99,inset 0 1px #ffffff0b}
.game-card-head{border-bottom:1px solid #ffffff14;padding-bottom:13px}
.game-index{color:#78e9ff;letter-spacing:2px}
.game-tag{border-color:#52618a;color:#aebde3;background:#ffffff06}
.game-card h3{color:#f6f5ff}
.game-description{color:#aebbd5}
.gravity-card{background:linear-gradient(145deg,#1c2742,#111629)}
.gravity-hud>div{background:#0b1427;border:1px solid #35496e;border-radius:7px}
.gravity-hud span{color:#82cfe8}
.gravity-hud strong{color:#f2f5ff}
.gravity-frame{border:1px solid #4c78a4;border-radius:9px;box-shadow:0 0 25px #37c9ff1a,inset 0 0 45px #0008}
.gravity-overlay{background:#080d1bdc}
.gravity-orb-icon{color:#74efff;background:#48dfff19;border-color:#74efff99;box-shadow:0 0 30px #43dfff55}
.game-primary-button{background:linear-gradient(110deg,#78efff,#ff9ed6);color:#101326;box-shadow:0 4px 0 #447eaa}
.game-secondary-button{background:#17243c;border-color:#526d9d;color:#e2f5ff}
.gravity-mode-control{color:#9bb3d3}
.gravity-mode-control select{background:#101b30;border-color:#49658b;color:#eaf6ff}
.game-status{color:#9bbbd1}
.colour-card{background:linear-gradient(145deg,#211a3b,#0d1527);border-color:#7055a8}
.colour-card .game-index{color:#ff9bda}
.colour-card .game-tag{border-color:#7656a6;color:#d4b8ff}
.colour-card .game-description{color:#c3badc}
.colour-stats{background:#ffffff08;border-color:#584477}
.colour-stats span{color:#b5a7d7}
.colour-stats strong{color:#f9f3ff}
.colour-board-wrap{background:#080e1b;border-color:#52628d;box-shadow:inset 0 0 45px #000b}
#colour-grid .colour-tile{border-radius:5px;box-shadow:inset 0 1px #ffffff55,0 0 12px #ffffff16,0 3px 0 #0008}
#colour-grid .colour-tile:hover{filter:brightness(1.16) saturate(1.1)}
.colour-card .game-secondary-button{background:#292044;border-color:#7857a9;color:#f6dfff}
.colour-card .game-status{color:#c7b4df}
.colour-roast{background:#21152e;color:#ffe6f6;border-color:#734e92}
.roast-stamp{background:#ff8ec9;color:#21132d}
.gravity-touch-control{display:none}
@media(max-width:650px){
 .mini-games{padding:52px 4% 100px}
 .games-intro{padding:0 4%}
 .game-card{padding:15px;border-radius:12px}
 .game-card-head{gap:7px}
 .game-description{font-size:11px;line-height:1.6}
 .gravity-touch-control{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:42px;border-radius:8px;font-size:17px;touch-action:none;user-select:none}
 .gravity-controls{gap:7px}
 .gravity-controls>span{font-size:8px}
 .gravity-hud>div{padding:8px 6px}
 .gravity-hud strong{font-size:18px}
 .colour-board-wrap{padding:8px}
 #colour-grid.colour-grid{gap:6px}
 .colour-card .colour-stats{gap:3px;padding:8px 5px}
}