/* cheese-games.css
   Styles for the Cheese Touch mini-games section
   - Mobile-first responsive layout
   - Yellow/cheese themed colours
*/

#ct-games { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; color: #222; padding: 12px; }
.ct-games-title { font-size: 1.25rem; margin: 6px 0 12px; color: #6b3; /* subtle green? keep default */ }
.ct-games-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 720px) {
  .ct-games-grid { grid-template-columns: repeat(2, 1fr); }
}

.ct-game { background: linear-gradient(180deg,#fff7c2,#fff3a6); border-radius: 10px; padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); }
.ct-game h3 { margin: 0 0 8px; font-size: 1rem; }
.ct-game-body { display:flex; flex-direction:column; gap:8px; align-items:center; }

/* Cheese Tap */
.ct-cheese-button { font-size: 48px; line-height:1; background:transparent; border: none; cursor:pointer; touch-action: manipulation; }
.ct-tap-score { font-weight:700; }
.ct-player-avatar-main img { border-radius:50%; width:64px; height:64px; margin-top:6px; }

/* Pass the Cheese */
.ct-pass-players { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.ct-pass-player { width:64px; text-align:center; cursor:pointer; }
.ct-pass-player img { width:56px; height:56px; border-radius:50%; display:block; margin:0 auto; border:3px solid transparent; }
.ct-pass-player.active img { box-shadow:0 6px 14px rgba(0,0,0,0.12); border-color:#ffd54a; }
.ct-pass-name { font-size:0.8rem; margin-top:4px; }
.ct-pass-info { font-size:0.85rem; color:#444; }

/* Match board */
.ct-match-board { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; width:100%; max-width:420px; }
.ct-match-card { background:#fffaf0; border-radius:8px; min-height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid rgba(0,0,0,0.04); }
.ct-match-card .front { display:none; font-size:28px; }
.ct-match-card.flipped .front { display:block; }
.ct-match-card .back { font-size:20px; opacity:0.9; }
.ct-match-info { font-size:0.85rem; color:#444; }

/* Race track */
.ct-race-track { display:flex; flex-direction:column; gap:6px; width:100%; max-width:520px; }
.ct-race-lane { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.6); padding:6px; border-radius:8px; }
.ct-racer { width:48px; height:48px; border-radius:50%; overflow:hidden; flex:0 0 48px; }
.ct-racer img { width:100%; height:100%; object-fit:cover; }
.ct-racer-name { font-size:0.85rem; flex:0 0 auto; min-width:60px; }
.ct-race-progress { height:10px; background:rgba(0,0,0,0.06); border-radius:8px; flex:1 1 auto; overflow:hidden; position:relative; }
.ct-race-bar { height:100%; background:linear-gradient(90deg,#ffd54a,#ffb300); width:0; transition: width 150ms linear; }
.ct-race-run { padding:8px 12px; background:#ffd54a; border:none; border-radius:6px; font-weight:700; cursor:pointer; }
.ct-race-status { font-size:0.9rem; margin-top:6px; }

/* Footnote */
.ct-games-footnote { margin-top:10px; font-size:0.85rem; color:#555; text-align:center; }

/* small utilities */
button:active { transform:translateY(1px); }

/* ensure images don't inherit unwanted theme styles */
.ct-game img { max-width:none; }

/* Accessibility focus */
.ct-cheese-button:focus, .ct-pass-player:focus, .ct-race-run:focus { outline:3px solid rgba(255,213,79,0.6); outline-offset:2px; }