/* ===== MAZE CHASE GAME ===== */ /* File: /games/maze-chase-game/styles-maze-chase-game.css */ /* Integration: link this file directly — in index.html's , after the root styles.css link. Do NOT append this file's contents into the root styles.css (see the integration guide, Lesson 3 and Touch Point 6). This file needs no changes to go from standalone preview to the live app. */ #game-maze-chase-game { width: 100%; height: 100%; background: #05070a; overflow: hidden; } .maze-chase-game-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 540px; background: radial-gradient(ellipse at 50% 0%, #0d1730 0%, #05070a 70%); font-family: 'Space Mono', 'Courier New', monospace; user-select: none; -webkit-user-select: none; touch-action: manipulation; padding: 16px 18px 16px; box-sizing: border-box; overflow: visible; } .maze-chase-game-header-row { width: 100%; max-width: 440px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .maze-chase-game-stat { color: #9db4ff; font-size: clamp(11px, 3vw, 13px); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; } .maze-chase-game-stat span { color: #ffe14d; } .maze-chase-game-pause-button { background: rgba(157, 180, 255, 0.12); border: 2px solid #3b6dd6; border-radius: 8px; color: #9db4ff; font-size: 14px; padding: 4px 10px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .maze-chase-game-timer-row { width: 100%; max-width: 440px; display: flex; justify-content: center; color: #ff8a8a; font-weight: 700; font-size: 13px; margin-bottom: 6px; } .maze-chase-game-board-container { position: relative; width: 100%; max-width: 440px; aspect-ratio: 13 / 15; max-height: calc(100dvh - 300px); margin-top: 2px; display: flex; align-items: center; justify-content: center; } .maze-chase-game-canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 0 0 2px #1c2a52, 0 8px 24px rgba(0,0,0,0.5); } .maze-chase-game-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 12, 0.86); border-radius: 10px; padding: 16px; box-sizing: border-box; text-align: center; } .maze-chase-game-overlay-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; } .maze-chase-game-overlay-title { color: #ffe14d; font-size: clamp(20px, 5.5vw, 28px); font-weight: 700; letter-spacing: 0.02em; } .maze-chase-game-overlay-subtitle { color: #c6d2f5; font-size: 13px; line-height: 1.5; } .maze-chase-game-primary-button { background: linear-gradient(180deg, #4dc9ff, #3b6dd6); border: none; border-radius: 10px; color: #05070a; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; padding: 12px 26px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .maze-chase-game-primary-button:active { transform: scale(0.97); } /* ---------- Start overlay — matches the shared app's start-overlay/so-icon/ so-name/so-howto/start-btn component exactly (same tokens, fonts, spacing), with its own game-prefixed class names per the naming rule. Covers the entire card, same as every other game's start overlay. ---------- */ .maze-chase-game-start-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: rgba(14,14,20,0.93); backdrop-filter: blur(6px); z-index: 30; border-radius: 16px; padding: 28px 20px; text-align: center; overflow: hidden; box-sizing: border-box; } .maze-chase-game-overlay-icon { font-size: 2.2rem; line-height: 1; } .maze-chase-game-overlay-name { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.3px; color: var(--accent, #a8ff78); } .maze-chase-game-how-to-play { background: rgba(255,255,255,0.04); border: 1px solid var(--border, #2a2a3a); border-radius: 10px; padding: 12px 16px; width: 100%; max-width: 320px; overflow: hidden; text-align: left; flex-shrink: 1; box-sizing: border-box; } .maze-chase-game-how-to-play-label { font-family: 'Space Mono', monospace; font-size: .731rem; letter-spacing: .15em; text-transform: uppercase; color: #ffffff; margin-bottom: 8px; } .maze-chase-game-how-to-play ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .maze-chase-game-how-to-play li { font-size: .6rem; color: #ffffff; padding-left: 12px; position: relative; line-height: 1.4; } .maze-chase-game-how-to-play li::before { content: '·'; position: absolute; left: 0; color: var(--accent, #a8ff78); font-weight: 700; } .maze-chase-game-start-button { padding: 14px 36px; background: transparent; border: 2.5px solid var(--accent, #a8ff78); color: var(--accent, #a8ff78); font-family: 'Syne', sans-serif; font-size: 0.75rem; font-weight: 700; border-radius: 10px; cursor: pointer; letter-spacing: 1px; transition: all .2s; box-shadow: 0 0 20px rgba(168,255,120,.2), inset 0 0 20px rgba(168,255,120,.05); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .maze-chase-game-start-button:hover { background: rgba(168,255,120,.1); box-shadow: 0 0 32px rgba(168,255,120,.35), inset 0 0 20px rgba(168,255,120,.1); transform: scale(1.04); } .maze-chase-game-start-button:active { transform: scale(0.97); } .maze-chase-game-direction-pad { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; } .maze-chase-game-direction-pad-middle-row { display: flex; align-items: center; gap: 5px; } .maze-chase-game-direction-pad-spacer { width: 42px; height: 42px; } .maze-chase-game-direction-button { width: 42px; height: 42px; background: rgba(59, 109, 214, 0.18); border: 2px solid #3b6dd6; border-radius: 10px; color: #9db4ff; font-size: 15px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .maze-chase-game-direction-button:active { background: rgba(59, 109, 214, 0.4); } /* ---------- Bet button + Skins button — these reuse the SHARED app classes (sg-bet-btn, sg-bet-score-row, sg-bet-skin-row, gu-skin-link-btn) verbatim, matching every other bet/skin-enabled game, rather than game-prefixed replicas — this is a standardized, shared component, not a per-game customization (see the integration guide's Bet button section). These definitions exist here only for standalone testing; once merged into the real styles.css, that copy is authoritative and this block can be removed. ---------- */ .sg-bet-btn { display: inline-block; padding: 9px 22px; background: linear-gradient(135deg, #ffd700, #92400e); border: none; color: #000; font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 600; border-radius: 999px; cursor: pointer; letter-spacing: 0.3px; transition: opacity 0.15s; white-space: nowrap; line-height: 1.3; max-width: 220px; text-align: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .sg-bet-btn:hover:not(:disabled):not(.locked) { opacity: 0.85; } .sg-bet-btn:disabled, .sg-bet-btn.locked { opacity: 0.5; cursor: not-allowed; background: linear-gradient(135deg, #ffd700, #92400e); color: #000; } .sg-bet-btn.bet-complete { background: transparent; border: 2px solid var(--muted, #666680); color: var(--muted, #666680); opacity: 0.7; cursor: default; font-size: 0.68rem; letter-spacing: 0.2px; } .sg-bet-score-row { font-family: 'Space Mono', monospace; font-size: 0.65rem; color: var(--muted, #666680); margin-top: 6px; text-align: center; } .sg-bet-result { font-family: 'Space Mono', monospace; font-size: 0.80rem; font-weight: 700; text-align: center; margin-top: 6px; padding: 4px 12px; border-radius: 999px; } .sg-bet-result.win { color: var(--accent, #a8ff78); border: 1.5px solid var(--accent, #a8ff78); } .sg-bet-result.loss { color: var(--danger, #ff6b6b); border: 1.5px solid var(--danger, #ff6b6b); } .sg-bet-skin-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; max-width: 100%; box-sizing: border-box; } .gu-skin-link-btn { background: linear-gradient(135deg, #ffd700, #92400e); border: none; color: #000; font-family: 'Syne', sans-serif; font-weight: 600; font-size: .72rem; padding: 9px 22px; border-radius: 999px; cursor: pointer; white-space: nowrap; text-align: center; transition: opacity .15s; box-sizing: border-box; line-height: 1.3; letter-spacing: 0.3px; display: inline-block; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .gu-skin-link-btn:hover { opacity: .85; } .gu-skin-link-btn:active { transform: scale(.96); }