/* ========================================================================== M.GAMES — Authentic game skins (NYT Wordle, 2048, NES Tetris, arcade classics) Add class game--{slug} on ========================================================================== */ /* ── Shared stage chrome ─────────────────────────────────────────────────── */ .game-stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 640px; margin: 0 auto; } .game-canvas-frame { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); } .game-canvas-frame canvas { display: block; max-width: 100%; touch-action: none; } /* Start screen overlay (canvas games) */ #startScreen { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border-radius: inherit; transition: opacity 0.3s, visibility 0.3s; } #startScreen.hidden { opacity: 0; pointer-events: none; visibility: hidden; } .start-emoji { font-size: 3rem; line-height: 1; } .start-title { font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; } .start-hint { font-size: 0.85rem; text-align: center; padding: 0 1.25rem; max-width: 22rem; line-height: 1.5; opacity: 0.85; } /* ========================================================================== WORDLE — NYT dark theme ========================================================================== */ body.game--wordle { --w-bg: #121213; --w-surface: #1a1a1b; --w-border: #3a3a3c; --w-key: #818384; --w-text: #d7dadc; --w-correct: #538d4e; --w-present: #b59f3b; --w-absent: #3a3a3c; background: var(--w-bg); color: var(--w-text); } body.game--wordle .game-header { background: rgba(18, 18, 19, 0.95); border-bottom-color: var(--w-border); } body.game--wordle .game-title { background: none; -webkit-text-fill-color: var(--w-text); color: var(--w-text); font-family: "Franklin Gothic Medium", "Arial Narrow", var(--g-sans); font-weight: 700; letter-spacing: 0.12em; animation: none; } body.game--wordle .hud-item { background: var(--w-surface); border-color: var(--w-border); } body.game--wordle .hud-item__value { background: none; -webkit-text-fill-color: var(--w-text); color: var(--w-text); } body.game--wordle #board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; margin: 1rem auto; } body.game--wordle .tile-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; } body.game--wordle .tile { width: 62px; height: 62px; border: 2px solid var(--w-border); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: "Franklin Gothic Medium", var(--g-sans); font-size: 1.75rem; font-weight: 700; text-transform: uppercase; color: var(--w-text); background: transparent; user-select: none; } body.game--wordle .tile[data-state="filled"] { border-color: #565758; } body.game--wordle .tile[data-state="correct"] { background: var(--w-correct); border-color: var(--w-correct); color: #fff; } body.game--wordle .tile[data-state="present"] { background: var(--w-present); border-color: var(--w-present); color: #fff; } body.game--wordle .tile[data-state="absent"] { background: var(--w-absent); border-color: var(--w-absent); color: #fff; } body.game--wordle #message { font-size: 0.9rem; color: var(--w-text); background: var(--w-surface); border: 1px solid var(--w-border); border-radius: 4px; padding: 0.55rem 1rem; min-height: 2rem; margin-bottom: 0.75rem; opacity: 0; transition: opacity 0.2s; } body.game--wordle #message.show { opacity: 1; } body.game--wordle #keyboard { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 500px; } body.game--wordle .key-row { display: flex; justify-content: center; gap: 6px; } body.game--wordle .key { height: 58px; min-width: 43px; padding: 0 8px; border: none; border-radius: 4px; background: var(--w-key); color: var(--w-text); font-family: var(--g-sans); font-size: 0.8rem; font-weight: 700; cursor: pointer; text-transform: uppercase; } body.game--wordle .key.wide { min-width: 65px; font-size: 0.72rem; } body.game--wordle .key[data-state="correct"] { background: var(--w-correct); color: #fff; } body.game--wordle .key[data-state="present"] { background: var(--w-present); color: #fff; } body.game--wordle .key[data-state="absent"] { background: var(--w-absent); color: #fff; } @keyframes wordleFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } } body.game--wordle .tile.revealing { animation: wordleFlip 0.5s ease-in-out; } @keyframes wordlePop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } body.game--wordle .tile.pop { animation: wordlePop 0.1s ease-in-out; } @keyframes wordleShake { 10%, 90% { transform: translateX(-4px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } body.game--wordle .tile-row.shake { animation: wordleShake 0.5s; } @media (max-width: 480px) { body.game--wordle .tile { width: 52px; height: 52px; font-size: 1.4rem; } body.game--wordle .key { height: 50px; min-width: 32px; font-size: 0.72rem; } } /* ========================================================================== 2048 — Gabriele Cirulli palette ========================================================================== */ body.game--2048 { --2048-bg: #faf8ef; --2048-grid: #bbada0; --2048-cell: #cdc1b4; --2048-text: #776e65; --2048-text-light: #f9f6f2; background: var(--2048-bg); color: var(--2048-text); } body.game--2048 .game-header { background: rgba(250, 248, 239, 0.95); border-bottom-color: #d8d0c4; } body.game--2048 .game-title, body.game--2048 .game-back, body.game--2048 .hud-item__label, body.game--2048 .hud-item__value, body.game--2048 .start-hint, body.game--2048 .msg { color: var(--2048-text) !important; -webkit-text-fill-color: var(--2048-text); background: none; animation: none; } body.game--2048 .hud-item { background: var(--2048-grid); border: none; color: var(--2048-text-light); } body.game--2048 .hud-item__label { color: rgba(249, 246, 242, 0.75) !important; } body.game--2048 .hud-item__value { color: var(--2048-text-light) !important; -webkit-text-fill-color: var(--2048-text-light); } body.game--2048 .board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 12px; background: var(--2048-grid); border-radius: 8px; border: none; width: min(100%, 340px); } body.game--2048 .cell { aspect-ratio: 1; border-radius: 6px; background: var(--2048-cell); display: flex; align-items: center; justify-content: center; font-family: "Clear Sans", var(--g-sans); font-weight: 700; font-size: clamp(1.25rem, 5vw, 2rem); color: var(--2048-text); border: none; } body.game--2048 .cell[data-v="2"] { background: #eee4da; } body.game--2048 .cell[data-v="4"] { background: #ede0c8; } body.game--2048 .cell[data-v="8"] { background: #f2b179; color: var(--2048-text-light); } body.game--2048 .cell[data-v="16"] { background: #f59563; color: var(--2048-text-light); } body.game--2048 .cell[data-v="32"] { background: #f67c5f; color: var(--2048-text-light); } body.game--2048 .cell[data-v="64"] { background: #f65e3b; color: var(--2048-text-light); } body.game--2048 .cell[data-v="128"] { background: #edcf72; color: var(--2048-text-light); font-size: 1.5rem; } body.game--2048 .cell[data-v="256"] { background: #edcc61; color: var(--2048-text-light); font-size: 1.5rem; } body.game--2048 .cell[data-v="512"] { background: #edc850; color: var(--2048-text-light); font-size: 1.4rem; } body.game--2048 .cell[data-v="1024"] { background: #edc53f; color: var(--2048-text-light); font-size: 1.2rem; } body.game--2048 .cell[data-v="2048"] { background: #edc22e; color: var(--2048-text-light); font-size: 1.1rem; } body.game--2048 .g-btn--primary { background: #8f7a66; box-shadow: none; color: #f9f6f2; } body.game--2048 .g-btn--outline { border-color: #8f7a66; color: #8f7a66; } body.game--2048 .msg { font-family: var(--g-sans); margin-top: 0.5rem; text-align: center; color: var(--2048-text); } /* ========================================================================== TETRIS — NES-style cabinet ========================================================================== */ body.game--tetris { background: #0a0a12; } body.game--tetris .game-main { flex-direction: row; align-items: flex-start; justify-content: center; gap: 1.25rem; flex-wrap: wrap; } body.game--tetris .game-title { font-family: var(--g-mono); color: #f0f0f0; -webkit-text-fill-color: #f0f0f0; background: none; animation: none; letter-spacing: 0.15em; } body.game--tetris #tetrisCanvas { border: 4px solid #4a4a6a; border-radius: 2px; background: #000; box-shadow: inset 0 0 0 2px #1a1a2e, 0 12px 40px rgba(0, 0, 0, 0.6); } body.game--tetris .side-panel { min-width: 120px; } body.game--tetris .side-card { background: #1a1a2e; border: 2px solid #4a4a6a; border-radius: 4px; } body.game--tetris .side-card__label { color: #8888aa; } body.game--tetris .ctrl-key { background: #2a2a4a; border-color: #4a4a6a; color: #ccc; } /* ========================================================================== SNAKE — Nokia / Google style ========================================================================== */ body.game--snake { background: #0d1117; } body.game--snake #canvasWrapper { border: 3px solid #238636; border-radius: 4px; box-shadow: 0 0 0 1px #161b22, 0 16px 48px rgba(0, 0, 0, 0.5); background: #010409; } body.game--snake #startScreen { background: rgba(1, 4, 9, 0.92); } body.game--snake .start-title { color: #3fb950; font-family: var(--g-mono); } body.game--snake .dpad-btn { background: #21262d; border: 2px solid #30363d; color: #3fb950; border-radius: 8px; } body.game--snake .dpad-btn:active { background: #238636; color: #fff; } /* ========================================================================== FLAPPY BIRD — original Dong Nguyen palette ========================================================================== */ body.game--flappy { background: #4ec0ca; } body.game--flappy .game-header { background: rgba(78, 192, 202, 0.92); border-bottom-color: rgba(0, 0, 0, 0.1); } body.game--flappy .game-title, body.game--flappy .game-back, body.game--flappy .hud-item__label, body.game--flappy .hud-item__value { color: #fff !important; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); animation: none; } body.game--flappy .hud-item { background: rgba(255, 255, 255, 0.25); border: 2px solid rgba(255, 255, 255, 0.4); } body.game--flappy .canvas-wrapper { border: 3px solid #5c9e2e; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 0 #4a7c23; } body.game--flappy .flappy-hint { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } /* ========================================================================== CONNECT 4 — Hasbro board ========================================================================== */ body.game--connect4 { background: #1e3a5f; } body.game--connect4 .game-title { color: #fff; -webkit-text-fill-color: #fff; background: none; animation: none; } body.game--connect4 #board { display: flex; gap: 10px; padding: 16px 12px; background: #1565c0; border-radius: 12px; border: 6px solid #0d47a1; box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4); max-width: 420px; } body.game--connect4 .c4-col { display: flex; flex-direction: column; gap: 8px; flex: 1; cursor: pointer; } body.game--connect4 .c4-col:hover .cell:first-child { background: #bbdefb; } body.game--connect4 .cell { aspect-ratio: 1; border-radius: 50%; background: #e3f2fd; border: 3px solid #0d47a1; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2); font-size: 0; cursor: pointer; transition: background 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } body.game--connect4 .cell.player { background: #e53935; box-shadow: inset 0 -3px 0 #b71c1c; } body.game--connect4 .cell.ai { background: #fdd835; box-shadow: inset 0 -3px 0 #f9a825; } body.game--connect4 #startScreen { position: static; background: transparent; } /* ========================================================================== TIC-TAC-TOE — clean paper grid ========================================================================== */ body.game--tictactoe { background: #f5f5f0; color: #333; } body.game--tictactoe .game-header { background: rgba(245, 245, 240, 0.95); border-bottom-color: #ddd; } body.game--tictactoe .game-title, body.game--tictactoe .game-back, body.game--tictactoe .hud-item__label, body.game--tictactoe .hud-item__value { color: #333 !important; -webkit-text-fill-color: #333; background: none; animation: none; } body.game--tictactoe .hud-item { background: #fff; border: 2px solid #ccc; } body.game--tictactoe #grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #333; border: 4px solid #333; border-radius: 4px; max-width: 320px; aspect-ratio: 1; } body.game--tictactoe .cell { background: #fff; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; font-weight: 700; cursor: pointer; aspect-ratio: 1; border: none; color: #333; } body.game--tictactoe .cell:hover { background: #fafafa; } /* ========================================================================== MEMORY — playing card deck ========================================================================== */ body.game--memory { background: #14532d; } body.game--memory .game-title { color: #fef08a; -webkit-text-fill-color: #fef08a; background: none; animation: none; } body.game--memory .diff-btn { font-family: var(--g-sans); padding: 0.45rem 1rem; border-radius: 6px; border: 2px solid #166534; background: #166534; color: #dcfce7; cursor: pointer; } body.game--memory .diff-btn.active { background: #fef08a; border-color: #fef08a; color: #14532d; } body.game--memory .card { aspect-ratio: 1; min-width: 56px; border-radius: 8px; border: 3px solid #fff; background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); cursor: pointer; font-size: 1.75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transition: transform 0.35s, background 0.2s; color: transparent; } body.game--memory .card.flipped, body.game--memory .card.matched { background: #fff; color: #14532d; transform: rotateY(0); } body.game--memory .card.matched { background: #dcfce7; border-color: #86efac; opacity: 0.85; } /* ========================================================================== PONG — Atari black & white ========================================================================== */ body.game--pong { background: #000; } body.game--pong .game-title { color: #fff; -webkit-text-fill-color: #fff; background: none; font-family: var(--g-mono); animation: none; } body.game--pong .game-canvas-frame, body.game--pong .canvas-wrap { border: 4px solid #fff; border-radius: 0; box-shadow: none; background: #000; } /* ========================================================================== SPACE SHOOTER — arcade cabinet ========================================================================== */ body.game--space { background: #0f0f23; } body.game--space .canvas-wrap { border: 3px solid #ff6b6b; border-radius: 4px; box-shadow: 0 0 24px rgba(255, 107, 107, 0.25), inset 0 0 60px rgba(0, 0, 0, 0.5); background: #000; } /* ========================================================================== WHACK-A-MOLE — carnival grass ========================================================================== */ body.game--whack { background: linear-gradient(180deg, #87ceeb 0%, #5d9e3a 45%, #3d7a28 100%); } body.game--whack .game-title { color: #fff; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 2px 4px rgba(0,0,0,0.3); animation: none; } body.game--whack .mole-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 360px; padding: 20px; background: #5d4037; border-radius: 16px; border: 6px solid #3e2723; box-shadow: inset 0 8px 16px rgba(0,0,0,0.4); } body.game--whack .hole { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #2d1f14 0%, #1a1209 70%); border: 4px solid #3e2723; cursor: pointer; position: relative; overflow: hidden; } body.game--whack .hole.up::after { content: '🐹'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; animation: molePop 0.2s ease-out; } @keyframes molePop { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ========================================================================== TOWER — Stack classic ========================================================================== */ body.game--tower { background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); } body.game--tower .canvas-wrap { border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } /* ========================================================================== DICE WARS — board game table ========================================================================== */ body.game--dice-wars { background: linear-gradient(160deg, #1b4332 0%, #081c15 100%); } body.game--dice-wars .canvas-wrap { border: 4px solid #d4a574; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); background: #2d6a4f; }