/* ===== MAHJONG GAME ===== */ /* File: /games/mahjong-game/styles-mahjong-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-mahjong-game { width: 100%; height: 100%; background: #10241c; overflow: hidden; } .mahjong-game-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 560px; background: radial-gradient(ellipse at 50% 0%, #163c2c 0%, #0c1c15 70%); font-family: 'Space Mono', 'Courier New', monospace; user-select: none; -webkit-user-select: none; touch-action: manipulation; padding: 12px 12px 16px; box-sizing: border-box; overflow: visible; } .mahjong-game-header-row { width: 100%; max-width: 460px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .mahjong-game-stat { color: #9be8c4; font-size: clamp(10px, 2.8vw, 13px); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; } .mahjong-game-stat span { color: #ffe08a; } .mahjong-game-timer-row { width: 100%; max-width: 460px; display: flex; justify-content: center; color: #ff8a8a; font-weight: 700; font-size: 13px; margin-bottom: 6px; } .mahjong-game-board-container { position: relative; width: 100%; max-width: 460px; min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: visible; } .mahjong-game-board { position: relative; } .mahjong-game-tile { position: absolute; border: none; border-radius: 8%; background: linear-gradient(160deg, #fffdf3 0%, #f1ecd8 60%, #e3dcc2 100%); box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 6px 10px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, filter 0.15s ease; padding: 0; } .mahjong-game-tile-glyph { line-height: 1; pointer-events: none; font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; } .mahjong-game-tile-free { filter: brightness(1); } .mahjong-game-tile-locked { filter: brightness(0.72) saturate(0.7); cursor: default; } /* Chain-locked tiles (level 60+ mechanic) โ€” dimmer and with a visible chain icon overlay so players can tell "locked until a neighbor clears" apart from ordinary covered/blocked tiles. */ .mahjong-game-tile-chain-locked { filter: brightness(0.5) saturate(0.4) grayscale(0.3); cursor: default; } .mahjong-game-tile-chain-locked::after { content: '๐Ÿ”’'; position: absolute; top: 2px; right: 2px; font-size: 0.9em; line-height: 1; pointer-events: none; opacity: 0.85; } .mahjong-game-tile-selected { box-shadow: 0 0 0 3px #4dc9ff, 0 3px 0 rgba(0,0,0,0.18), 0 6px 10px rgba(0,0,0,0.35); transform: translateY(-3px); } .mahjong-game-tile-hint { box-shadow: 0 0 0 3px #ffd24d, 0 3px 0 rgba(0,0,0,0.18), 0 6px 10px rgba(0,0,0,0.35); } .mahjong-game-tile-invalid { animation: mahjong-game-shake 0.24s ease; } /* Golden tiles (level 75+ mechanic) โ€” bonus-value pairs that expire if not cleared quickly once uncovered. */ .mahjong-game-tile-golden { box-shadow: 0 0 0 2px #ffd700, 0 0 10px 2px rgba(255,215,0,0.65), 0 3px 0 rgba(0,0,0,0.18), 0 6px 10px rgba(0,0,0,0.35); animation: mahjong-game-golden-pulse 1.1s ease-in-out infinite; } .mahjong-game-tile-golden-badge { position: absolute; top: 2px; left: 2px; font-size: 0.8em; line-height: 1; color: #ffd700; text-shadow: 0 0 3px rgba(0,0,0,0.6); pointer-events: none; } .mahjong-game-tile-golden-expired { filter: grayscale(1) brightness(0.55); cursor: default; animation: none; } @keyframes mahjong-game-golden-pulse { 0%, 100% { box-shadow: 0 0 0 2px #ffd700, 0 0 10px 2px rgba(255,215,0,0.65), 0 3px 0 rgba(0,0,0,0.18), 0 6px 10px rgba(0,0,0,0.35); } 50% { box-shadow: 0 0 0 2px #ffe98a, 0 0 16px 5px rgba(255,215,0,0.9), 0 3px 0 rgba(0,0,0,0.18), 0 6px 10px rgba(0,0,0,0.35); } } @keyframes mahjong-game-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .mahjong-game-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 16, 12, 0.88); border-radius: 10px; padding: 16px; box-sizing: border-box; text-align: center; z-index: 5000; } .mahjong-game-overlay-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; } .mahjong-game-overlay-title { color: #ffe08a; font-size: clamp(19px, 5vw, 26px); font-weight: 700; letter-spacing: 0.02em; } .mahjong-game-overlay-subtitle { color: #cfe8da; font-size: 13px; line-height: 1.5; } .mahjong-game-primary-button { background: linear-gradient(180deg, #6de8a8, #2f9e63); border: none; border-radius: 10px; color: #0c1c15; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; padding: 12px 26px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mahjong-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. ---------- */ .mahjong-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; } .mahjong-game-overlay-icon { font-size: 2.2rem; line-height: 1; } .mahjong-game-overlay-name { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.3px; color: var(--accent, #a8ff78); } .mahjong-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; } .mahjong-game-how-to-play-label { font-family: 'Space Mono', monospace; font-size: .731rem; letter-spacing: .15em; text-transform: uppercase; color: #ffffff; margin-bottom: 8px; } .mahjong-game-how-to-play ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; } .mahjong-game-how-to-play li { font-size: .6rem; color: #ffffff; padding-left: 12px; position: relative; line-height: 1.4; } .mahjong-game-how-to-play li::before { content: 'ยท'; position: absolute; left: 0; color: var(--accent, #a8ff78); font-weight: 700; } .mahjong-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; } .mahjong-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); } .mahjong-game-start-button:active { transform: scale(0.97); } .mahjong-game-toolbar-row { margin-top: 12px; display: flex; gap: 10px; } .mahjong-game-tool-button { background: rgba(155, 232, 196, 0.12); border: 2px solid #2f9e63; border-radius: 8px; color: #9be8c4; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; padding: 8px 14px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mahjong-game-tool-button:disabled { opacity: 0.35; cursor: default; } .mahjong-game-toast { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(20, 30, 24, 0.95); color: #eafff2; padding: 8px 16px; border-radius: 8px; font-size: 12px; z-index: 6000; white-space: nowrap; } /* ---------- Skins โ€” two theme variants ---------- */ .mahjong-game-wrapper.skin-jadegarden { background: radial-gradient(ellipse at 50% 0%, #1f5c3a 0%, #0a1c12 70%); } .mahjong-game-wrapper.skin-crimsonpalace { background: radial-gradient(ellipse at 50% 0%, #5c1f28 0%, #1c0a0e 70%); } /* ---------- Bet button + Skins button โ€” these reuse the SHARED app classes verbatim (see the integration guide's Bet button section). Definitions here are for standalone testing only; the real styles.css copy is authoritative once integrated. ---------- */ .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); }