/* GameZone shared theme. Five palettes, one per player vibe, switched via : midnight (default) · arcade · cozy · daylight · forest */ :root { --bg: #0f1220; --bg-card: #1a1f35; --bg-card-hover: #232a48; --text: #e8eaf6; --text-dim: #8b92b8; --accent: #6c5ce7; --accent-2: #00cec9; --good: #2ecc71; --bad: #e74c3c; --radius: 14px; /* game-surface colors */ --border: #232a48; --cell: #232a48; --raised: #2e3760; --hl: #3d3a7a; --hl-soft: #222848; --hl-mid: #2e3f6e; --found: #1e4634; } /* 🕹 Retro Arcaders — neon on near-black */ html[data-theme="arcade"] { --bg: #07070d; --bg-card: #12121f; --bg-card-hover: #1b1b2e; --text: #d8ffd8; --text-dim: #6fae7f; --accent: #39d353; --accent-2: #ff2079; --border: #1e2a1e; --cell: #141d16; --raised: #1e2c20; --hl: #234f2a; --hl-soft: #14231a; --hl-mid: #1c3a24; --found: #123d2a; } /* 🧸 Cozy Casuals — warm pastels, light */ html[data-theme="cozy"] { --bg: #fdf1f5; --bg-card: #ffffff; --bg-card-hover: #ffe9f1; --text: #4a2f3f; --text-dim: #a6798f; --accent: #e84393; --accent-2: #9b59b6; --good: #27ae60; --bad: #d63031; --border: #f2d4e0; --cell: #fbe4ee; --raised: #f3cfdf; --hl: #f5b8d4; --hl-soft: #fceaf2; --hl-mid: #f8d9e7; --found: #d9f2e2; } /* ☀️ Fresh & Focused — clean daylight */ html[data-theme="daylight"] { --bg: #f4f6fb; --bg-card: #ffffff; --bg-card-hover: #e9eefb; --text: #1f2a44; --text-dim: #6b7694; --accent: #2563eb; --accent-2: #0e9f9a; --good: #16a34a; --bad: #dc2626; --border: #dde3f0; --cell: #e8edf8; --raised: #d8e0f2; --hl: #bfd0f5; --hl-soft: #eef2fb; --hl-mid: #dbe5f8; --found: #d5f0de; } /* 🌿 Nature Chill — deep forest greens */ html[data-theme="forest"] { --bg: #0d1a12; --bg-card: #16281c; --bg-card-hover: #1e3626; --text: #e4f2e4; --text-dim: #86ab8e; --accent: #2ecc71; --accent-2: #f0b429; --border: #23402d; --cell: #1c3324; --raised: #254230; --hl: #356243; --hl-soft: #1a2e21; --hl-mid: #2a4f38; --found: #2c5a2e; } /* Light themes: darken the pastel number colors games use */ html[data-theme="cozy"] .n1, html[data-theme="daylight"] .n1 { color: #0b6bcb; } html[data-theme="cozy"] .n2, html[data-theme="daylight"] .n2 { color: #0f8a4f; } html[data-theme="cozy"] .n3, html[data-theme="daylight"] .n3 { color: #d02020; } html[data-theme="cozy"] .n4, html[data-theme="daylight"] .n4 { color: #6d4fd0; } html[data-theme="cozy"] .n5, html[data-theme="daylight"] .n5 { color: #a06a00; } html[data-theme="cozy"] .n6, html[data-theme="daylight"] .n6 { color: #0a8a8a; } html[data-theme="cozy"] .n7, html[data-theme="daylight"] .n7 { color: #b0483a; } html[data-theme="cozy"] .n8, html[data-theme="daylight"] .n8 { color: #c2337c; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; min-height: 100dvh; } .wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; } header.gz { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; } header.gz h1 { font-size: 1.35rem; margin: 0; flex: 1; } header.gz .back { text-decoration: none; color: var(--text); background: var(--bg-card); border-radius: 10px; padding: 8px 14px; font-size: 1.1rem; line-height: 1; } .btn { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; font-size: 0.95rem; font-family: inherit; cursor: pointer; touch-action: manipulation; } .btn:active { transform: scale(0.97); } .btn.primary { background: var(--accent); border-color: var(--accent); } .btn.active { background: var(--accent); border-color: var(--accent); } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; } .stat { background: var(--bg-card); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; color: var(--text-dim); } .stat b { color: var(--text); } .banner { margin: 14px 0; padding: 14px; border-radius: var(--radius); text-align: center; font-weight: 600; display: none; } .banner.show { display: block; } .banner.win { background: rgba(46, 204, 113, 0.15); color: var(--good); } .banner.lose { background: rgba(231, 76, 60, 0.15); color: var(--bad); } /* Challenge-code row: same code = same board on any phone, fully offline */ .ch-row { display: none; gap: 8px; margin-bottom: 14px; } .ch-row.show { display: flex; } .ch-input { flex: 1; min-width: 90px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 0.95rem; text-transform: uppercase; } .ch-hint { font-size: 0.75rem; color: var(--text-dim); margin: -6px 0 12px; display: none; } .ch-row.show + .ch-hint { display: block; } /* Ad slot: bottom of page, below all content, never sticky, never blocking. Paste your ad network snippet (e.g. AdSense) inside .ad-inner. Until then it shows a faint placeholder. */ .ad-slot { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; } .ad-slot .ad-label { font-size: 0.7rem; color: var(--text-dim); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .ad-slot .ad-inner { min-height: 0; } /* Until a real ad unit is pasted in, show a dashed preview of where it sits */ .ad-slot .ad-inner:empty { display: flex; align-items: center; justify-content: center; min-height: 90px; max-width: 400px; margin: 0 auto; border: 2px dashed var(--border); border-radius: 10px; } .ad-slot .ad-inner:empty::after { content: "📢 Ad appears here · 320×100 banner"; color: var(--text-dim); font-size: 0.8rem; opacity: 0.7; }