@charset "UTF-8"; /** * Mini Games — shared chrome. * * Design rules (learned from v0.1.0 user feedback): * * 1. Accent color = INTERACTIVE STATE only. * - Title text uses --mg-ink (always readable regardless of accent). * - Buttons are tinted with accent only via background fill or icon color, * NEVER by changing text color to match border (the v0.1 bug where * hover made text and border the same red, making the button invisible). * 2. Buttons are FLAT FILL by default — solid background, white text, * radius 8px, brightness shift on hover. No outline-style buttons. * 3. No backdrop-filter on overlays — it blurs the game state behind it, * which is bad for Minesweeper game-over (user wants to see what they hit). * Use a tinted scrim instead. * 4. Stat label colors stay subtle so they don't compete with values. * * Two themes via wrapper class: * .mg-theme-clean → modern flat (default) * .mg-theme-arcade → system monospace stack + CRT scanlines (opt-in) * * Light-mode token overrides come from MG_Shortcode::build_custom_css() * via wp_add_inline_style. */ /* ========================================================================= * BASE TOKENS — both themes * ========================================================================= */ .mg-frame, .mg-scoreboard, .mg-error, .mg-themed { --mg-radius: 10px; --mg-radius-sm: 8px; --mg-radius-xs: 6px; --mg-pad: 18px; --mg-pad-sm: 12px; /* Sane fallbacks if inline-style override doesn't load */ --mg-accent: #0a84ff; --mg-accent-soft: rgba(10, 132, 255, 0.10); --mg-accent-glow: rgba(10, 132, 255, 0.25); --mg-accent-ink: #ffffff; /* text color on solid accent fill */ } .mg-frame *, .mg-scoreboard *, .mg-themed * { box-sizing: border-box; } /* Mobile tap-highlight reset. * * Mobile Chrome / Safari paint a translucent blue-ish overlay over any * tappable element (canvas, button, link, [data-action]) when the user * touches it. Looks like an visited-link halo and clashes with our * own canvas-rendered selection rings + button hover states. * * The property only takes visual effect on elements the browser * considers tappable, so applying it universally inside our frames is * safe — non-interactive elements ignore it. Saves us from having to * enumerate every interactive selector in every game's stylesheet. * * Buttons keep their own :active feedback (scale + glow); canvases own * their own selection rendering. The browser overlay just gets in the way. */ .mg-frame, .mg-frame *, .mg-scoreboard, .mg-scoreboard *, .mg-themed, .mg-themed *, .game-2048-container, .game-2048-container * { -webkit-tap-highlight-color: transparent; } /* Canvases are interactive game surfaces — never let the browser draw * its own focus ring on them. We render selection / focus state via * the canvas itself (gold rings, green dots, etc.). */ .mg-frame canvas:focus, .mg-frame canvas:focus-visible, .mg-themed canvas:focus, .mg-themed canvas:focus-visible { outline: none; } /* ========================================================================= * THEME: CLEAN (default) * ========================================================================= */ .mg-theme-clean { --mg-bg: #1c1c1e; --mg-bg-2: #2c2c2e; --mg-bg-3: #3a3a3c; --mg-line: #38383a; --mg-line-strong: #545458; --mg-ink: #ffffff; --mg-ink-muted: rgba(235, 235, 245, 0.65); --mg-ink-subtle: rgba(235, 235, 245, 0.35); /* Game-internal palette — fixed across user theme settings */ --mg-cyan: #64d2ff; --mg-yellow: #ffd60a; --mg-pink: #ff375f; --mg-green: #30d158; --mg-red: #ff453a; --mg-purple: #bf5af2; --mg-orange: #ff9f0a; --mg-blue: #0a84ff; /* Type — system stack */ --mg-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mg-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mg-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ========================================================================= * THEME: ARCADE (opt-in) * Arcade theme uses a system monospace stack — no web fonts loaded. * ========================================================================= */ /* * Arcade theme web font — Cubic 11 (俐方體11號) * * Bundled directly inside the plugin at assets/fonts/Cubic_11.woff2 * (~400KB) — no CDN dependency, served from the user's own server. * Font URL is rewritten by PHP to the actual plugin URL via * wp_add_inline_style on the mg-fonts-arcade handle (so we don't * have to hardcode a server-relative path that breaks under different * WP install layouts). * * Pixel-art font with full Traditional Chinese coverage (4800+ Big5 * characters), so 排行榜/掃雷/俄羅斯方塊 all render uniformly with * Latin numbers in 11×11 dot-matrix style. * * License: SIL OFL 1.1 — see assets/fonts/OFL.txt. * Source: https://github.com/ACh-K/Cubic-11 * * @font-face is declared via PHP inline style attached to the * mg-fonts-arcade handle. The arcade theme's --mg-display var * references 'Cubic 11' so it picks up automatically. */ .mg-theme-arcade { --mg-bg: #0a0e14; --mg-bg-2: #14181f; --mg-bg-3: #1d2128; --mg-line: #2a3038; --mg-line-strong: #3a414b; --mg-ink: #f5f5f0; --mg-ink-muted: #a8aeb5; --mg-ink-subtle: #6b7280; --mg-cyan: #6fdcdf; --mg-yellow: #e8d97a; --mg-pink: #e878b3; --mg-green: #6fdf94; --mg-red: #e57373; --mg-purple: #b79ad9; --mg-orange: #e89e6f; --mg-blue: #7ab3e5; /* * Cubic 11 first (covers Latin + Traditional Chinese in 11×11 pixel * art), then system monospace fallback. The CJK fallbacks * (PingFang TC etc.) catch any rare glyphs Cubic 11 might be missing. */ --mg-display: 'Cubic 11', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'PingFang TC', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans CJK TC', monospace; --mg-body: 'Cubic 11', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'PingFang TC', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans CJK TC', monospace; --mg-mono: 'Cubic 11', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --mg-radius: 4px; --mg-radius-sm: 3px; --mg-radius-xs: 2px; } /* ========================================================================= * FRAME — wrapper around any game embed * ========================================================================= */ .mg-frame { background: var(--mg-bg); color: var(--mg-ink); font-family: var(--mg-body); border: 1px solid var(--mg-line); border-radius: var(--mg-radius); padding: 28px 24px; /* taller than wide — gives breathing room above/below */ margin: 16px 0; position: relative; /* Defensive reset — some site layouts wrap shortcodes in
  • or similar list elements, which then inherit list-item padding from the theme. Setting list-style:none + ::marker margin nukes those leaks. Box-sizing ensures padding stays inside our declared width. */ list-style: none; box-sizing: border-box; } /* ---- Sound toggle button (top-right corner of every game frame) ---- * * This button lives inside the user's site theme, which often slaps * its own :hover styles onto every