#games-overlay { position:fixed; inset:0; z-index:65; padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); background:#2B2530AA; align-items:center; justify-content:center; }
#games-card { width:100%; max-width:520px; max-height:100%; overflow-y:auto; background:var(--card); border:2px solid var(--border); border-radius:24px; padding:16px; }
.games-heading { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.games-heading h2 { flex:1; font-size:19px; margin:0; }
#games-overlay button { min-height:44px; border:1px solid var(--border); border-radius:12px; padding:8px 12px; font:inherit; background:#F0E4CE; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
#games-overlay button:disabled { opacity:.45; cursor:default; }
#games-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#games-picker button { min-height:98px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:white; }
#games-picker .game-icon { font-size:28px; }
#games-play[hidden], #games-picker[hidden], #games-back[hidden] { display:none; }
#games-score { font-weight:700; font-size:15px; margin-bottom:8px; }
#games-board { text-align:center; background:#F1F5EF; border:1px solid var(--border); border-radius:14px; overflow:hidden; line-height:0; }
#games-canvas { display:block; max-width:100%; max-height:46vh; width:auto; height:auto; margin:auto; touch-action:none; outline-offset:-4px; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
#games-options[hidden] { display:none; }
#games-options { display:flex; gap:6px; margin-bottom:8px; }
#games-options button { flex:1; padding:6px 4px; font-size:14px; background:white; }
#games-options button[aria-pressed="true"] { background:var(--accent); color:white; border-color:var(--accent); }
#games-controls { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
#games-controls button { min-width:46px; flex:1; padding:8px 4px; touch-action:none; }
#games-actions { display:flex; gap:28px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); }
#games-actions #games-pause { flex:2; }
#games-actions #games-start { flex:1; background:var(--accent); color:white; }
#games-actions #games-start.is-restart { background:transparent; color:var(--muted); border-style:dashed; font-size:14px; }
#games-confirm[hidden] { display:none; }
#games-confirm { position:fixed; inset:0; z-index:66; display:flex; align-items:center; justify-content:center; padding:16px; background:#2B253066; }
#games-confirm-box { width:100%; max-width:320px; background:var(--card); border:2px solid var(--border); border-radius:20px; padding:18px 16px 14px; text-align:center; box-shadow:0 10px 30px #0003; }
#games-confirm-box strong { display:block; font-size:18px; }
#games-confirm-box p { margin:8px 0 14px; font-size:14px; color:var(--muted); line-height:1.5; }
#games-confirm-actions { display:flex; gap:12px; }
#games-confirm-actions button { flex:1; }
#games-overlay #games-confirm-continue { background:var(--accent); color:white; }
#games-status { margin-top:6px; min-height:20px; font-size:14px; color:var(--ink); }
#games-instructions, #games-sync { font-size:12px; color:var(--muted); line-height:1.5; margin-top:5px; }
#games-leaderboard { border-top:1px dashed var(--border); margin-top:8px; padding-top:8px; font-size:13px; }
.game-rank { display:flex; gap:8px; align-items:center; padding:5px 0; }
.game-rank-name { flex:1; }
.game-rank-time { font-size:11px; color:var(--muted); }
@media(max-height:600px) { #games-card { padding:10px; } #games-canvas { max-height:52vh; } }