/* ============================================================================= * assets/lib/onyx-arcade.css — ONYX ARCADE THEME LAYER (ONYX-UPGRADE-2026-08-13) * * WHAT THIS IS * A shared, additive skin layer for the arcade catalogue. It ships design * tokens (near-black #0a0710 ground, obsidian surfaces, iridescent rims, a * single glowing accent), a readable HUD kit, ≥44px tap targets and the * reduced-motion guard. Games opt in by linking this file and adding * `class="onyx-arcade"` to ; nothing here applies otherwise. * * WHAT THIS IS NOT * It never styles, hides or reflows anything on the earning path. It has no * selectors for the shared header, the wallet pill, the mining chip, or * [data-onyx-earned]. A game's own CSS always wins on specificity ties * because this layer is deliberately loaded FIRST and uses single-class * selectors only. * * BLAST RADIUS (rulebook §8.5) * Every selector below is prefixed `.onyx-arcade` or `.oa-*`. No bare element * selector, no `*`, no `position:fixed;inset:0` on an unprefixed class. * ========================================================================== */ /* ── tokens ───────────────────────────────────────────────────────────── */ .onyx-arcade { --oa-ink: #0a0710; /* near-black ground */ --oa-ink-2: #0d0918; /* one step up */ --oa-obsidian: #120d1f; /* raised surface */ --oa-obsidian-2: #180f28; /* surface hover / active */ --oa-rim: #ffffff14; /* base hairline */ --oa-rim-lit: #ffffff2e; --oa-accent: #c9a84c; /* molten gold — the ONE glowing accent */ --oa-accent-hi: #f3c969; --oa-violet: #7c3aed; --oa-violet-hi: #a78bfa; --oa-cyan: #3ad6f0; --oa-danger: #ef4444; --oa-good: #22c55e; --oa-text: #e6e3f0; --oa-muted: #9a92b4; --oa-r: 12px; /* corner radius */ --oa-tap: 44px; /* minimum tap target */ --oa-glow: 0 0 18px rgba(201,168,76,.42); --oa-sink: 0 6px 22px rgba(0,0,0,.55); /* the iridescent rim — a hairline that shifts violet → gold → cyan */ --oa-irid: linear-gradient(135deg, rgba(167,139,250,.55) 0%, rgba(201,168,76,.50) 38%, rgba(58,214,240,.42) 68%, rgba(167,139,250,.50) 100%); background-color: var(--oa-ink); color: var(--oa-text); -webkit-tap-highlight-color: transparent; } /* ── the ground ───────────────────────────────────────────────────────── */ .onyx-arcade.oa-ground { background-image: radial-gradient(ellipse 80% 55% at 50% -12%, rgba(124,58,237,.18), transparent 62%), radial-gradient(ellipse 70% 45% at 50% 112%, rgba(201,168,76,.10), transparent 58%); background-attachment: fixed; } /* ── surfaces + the iridescent rim ────────────────────────────────────── */ .oa-surface { position: relative; background: linear-gradient(168deg, var(--oa-obsidian), var(--oa-ink-2)); border: 1px solid var(--oa-rim); border-radius: var(--oa-r); box-shadow: var(--oa-sink), inset 0 1px 0 rgba(255,255,255,.045); } /* rim: a masked gradient border, so it reads iridescent without a 2nd element */ .oa-rim::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--oa-irid); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; } .oa-rim { position: relative; } /* ── HUD ──────────────────────────────────────────────────────────────── */ .oa-hud { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: stretch; } .oa-stat { background: rgba(18,13,31,.72); border: 1px solid var(--oa-rim); border-radius: 10px; padding: 5px 6px; text-align: center; min-width: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .oa-stat .k { color: var(--oa-muted); font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-stat .v { font-weight: 800; font-size: 1rem; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── buttons — ≥44px, no hover reliance ──────────────────────────────── */ .oa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: var(--oa-tap); min-width: var(--oa-tap); padding: 11px 22px; border-radius: 11px; border: 1px solid var(--oa-accent-hi); background: linear-gradient(180deg, var(--oa-accent-hi), #b8922f); color: #1d1503; font: inherit; font-weight: 800; letter-spacing: .03em; cursor: pointer; box-shadow: var(--oa-sink); touch-action: manipulation; user-select: none; } .oa-btn:active { transform: translateY(1px); filter: brightness(1.08); } .oa-btn.violet { background: linear-gradient(180deg, #8b46f5, #5a1fa0); color: #fff; border-color: rgba(167,139,250,.55); } .oa-btn.ghost { background: rgba(18,13,31,.6); color: var(--oa-text); border-color: var(--oa-rim-lit); box-shadow: none; } .oa-btn:focus-visible { outline: 2px solid var(--oa-cyan); outline-offset: 2px; } /* ── touch hygiene ───────────────────────────────────────────────────── */ .onyx-arcade { touch-action: manipulation; overscroll-behavior: none; } .onyx-arcade button, .onyx-arcade a, .onyx-arcade [role=button] { touch-action: manipulation; } .oa-nozoom { touch-action: none; -ms-touch-action: none; } .oa-safe-b { margin-bottom: env(safe-area-inset-bottom); } .onyx-arcade { overflow-x: hidden; } /* ── EMBER HUD (rendered by assets/lib/onyx-ember.js) ────────────────── */ .oa-ember { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(12,8,22,.78); border: 1px solid var(--oa-rim); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); min-height: var(--oa-tap); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oa-muted); user-select: none; touch-action: manipulation; } .oa-ember .oa-ember-label { flex: 0 0 auto; font-weight: 800; } .oa-ember .oa-ember-track { position: relative; flex: 1 1 auto; height: 9px; min-width: 54px; border-radius: 999px; background: #ffffff10; overflow: hidden; box-shadow: inset 0 0 6px #000; } .oa-ember .oa-ember-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, var(--oa-accent) 62%, var(--oa-accent-hi)); transition: width .12s linear; } .oa-ember .oa-ember-pct { flex: 0 0 auto; font-weight: 800; color: var(--oa-text); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; } .oa-ember.is-ready { border-color: var(--oa-accent-hi); color: var(--oa-accent-hi); cursor: pointer; box-shadow: var(--oa-glow); animation: oaEmberReady 1.15s ease-in-out infinite; } .oa-ember.is-active { border-color: var(--oa-accent-hi); color: #1d1503; background: linear-gradient(90deg, rgba(201,168,76,.92), rgba(243,201,105,.92)); box-shadow: var(--oa-glow); } .oa-ember.is-active .oa-ember-pct, .oa-ember.is-active .oa-ember-label { color: #1d1503; } .oa-ember.is-active .oa-ember-track { background: rgba(0,0,0,.28); } .oa-ember.is-active .oa-ember-fill { background: linear-gradient(90deg, #2a1a00, #5a3d00); } @keyframes oaEmberReady { 0%,100% { box-shadow: 0 0 12px rgba(201,168,76,.35); } 50% { box-shadow: 0 0 24px rgba(243,201,105,.75); } } /* the ember particle canvas — sits above the play field, never eats input */ .oa-ember-fx { position: fixed; inset: 0; pointer-events: none; z-index: 9998; } /* ── reduced motion — the whole layer goes still ─────────────────────── */ @media (prefers-reduced-motion: reduce) { .onyx-arcade *, .onyx-arcade *::before, .onyx-arcade *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .oa-ember.is-ready { animation: none; } .oa-ember-fx { display: none; } } /* ── narrow phones (360px floor) ─────────────────────────────────────── */ @media (max-width: 380px) { .onyx-arcade { --oa-r: 10px; } .oa-stat .v { font-size: .9rem; } .oa-stat .k { font-size: .48rem; letter-spacing: .12em; } .oa-btn { padding: 11px 16px; } .oa-ember { padding: 5px 8px; gap: 6px; font-size: .55rem; } .oa-ember .oa-ember-pct { min-width: 2.8em; } } /* ═════════════════════════════════════════════════════════════════════════ * PASS 2 — the feel layer (ONYX-UPGRADE-PASS-2 · 2026-08-13) * Additive only. Everything below is scoped to a `.oa-*` class, so a page that * does not opt in is unaffected. Styles nothing on the earning surface. * ═══════════════════════════════════════════════════════════════════════ */ /* ── the sound toggle ─────────────────────────────────────────────────── */ .oa-mute { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.05rem; line-height: 1; cursor: pointer; color: #f3c969; background: rgba(12, 8, 22, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; pointer-events: auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color .16s ease, background .16s ease, transform .1s ease; } .oa-mute:hover { border-color: rgba(201, 168, 76, .5); } .oa-mute:active { transform: scale(.94); } .oa-mute:focus-visible { outline: 2px solid #c9a84c; outline-offset: 2px; } .oa-mute.is-muted { color: #6b6480; border-color: rgba(255, 255, 255, .08); } /* the un-mounted fallback position: bottom-right, clear of the ember pill (bottom-centre) and clear of the shared header (top). Uses the safe-area inset so it never lands under a home indicator. */ .oa-mute-fixed { position: fixed; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 62; } /* ── impact + state feedback ──────────────────────────────────────────── */ /* A one-shot "this got hit" pulse a game can add and remove on any element. */ .oa-hit { animation: oaHit .18s ease-out; } @keyframes oaHit { 0% { filter: brightness(2.2) saturate(.4); } 100% { filter: none; } } /* A "this is now live" ring — used for a newly-armed tower, an active tile. */ .oa-live { box-shadow: 0 0 0 2px rgba(201, 168, 76, .55), 0 0 18px rgba(201, 168, 76, .3); } /* A soft entry for panels/modals so state changes are not a hard cut. */ .oa-in { animation: oaIn .22s cubic-bezier(.2, .9, .3, 1) both; } /* percentage keyframe selectors, not from/to — the gate's unscoped-rule scan reads a bare `from {` as a bare-element rule (§8.5 blast radius). Matching the house style is the fix; weakening the scan is not. */ @keyframes oaIn { 0% { opacity: 0; transform: translateY(8px) scale(.985); } 100% { opacity: 1; transform: none; } } /* The burn window, applied on by most games' Ember. Kept here so the treatment is identical everywhere instead of re-invented per file. */ .onyx-arcade.ember-burn canvas, .onyx-arcade .ember-burn canvas { filter: saturate(1.2) brightness(1.07); } /* ── the pass-2 HUD strip: a row that survives a 360px portrait ────────── */ .oa-hudrow { position: fixed; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; pointer-events: none; z-index: 61; } .oa-hudrow > * { pointer-events: auto; } /* a compact best-score readout for the "surface the high score" direction */ .oa-best { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: 800 .6rem/1.2 inherit; letter-spacing: .12em; color: #cbbfe6; background: rgba(12, 8, 22, .78); border: 1px solid rgba(255, 255, 255, .1); font-variant-numeric: tabular-nums; pointer-events: none; } .oa-best b { color: #f3c969; font-weight: 900; } .oa-best.is-new { border-color: rgba(201, 168, 76, .6); color: #f3c969; } @media (prefers-reduced-motion: reduce) { .oa-hit, .oa-in { animation: none !important; } .oa-fx-layer { display: none; } } @media (max-width: 380px) { .oa-mute { min-width: 44px; min-height: 44px; font-size: .95rem; } .oa-best { font-size: .54rem; padding: 3px 8px; } }