/* =========================================================================== DPH UI — one design system, every game --------------------------------------------------------------------------- Seven games had three different accent families and a dozen button class names between them. Individually each looked fine; together they did not read as one platform. This is the shared layer. IT IS ADDITIVE ON PURPOSE. Everything a game already styles keeps working. The components here are namespaced `dph-`, and the only global rules are ones that are safe everywhere: text rendering, focus, selection, scrollbars and motion preference. Nothing here can silently restructure a page. A game sets ONE line to take its identity: =========================================================================== */ :root { /* surfaces, darkest to lightest */ --dph-ink: #06080e; --dph-ink-2: #0a0e16; --dph-card: #0e1420; --dph-card-2: #121a28; --dph-line: #1d2635; --dph-line-2: #2a3547; /* type */ --dph-text: #f2f6fb; --dph-dim: #8794a8; --dph-dim-2: #5f6c7e; /* the house colour. A game overrides --dph-accent and nothing else. */ --dph-accent: #c9a84c; --dph-accent-2: #f0c84a; --dph-good: #3ddc84; --dph-warn: #ffd166; --dph-bad: #ff6b6b; --dph-f-display: 'Outfit', system-ui, -apple-system, sans-serif; --dph-f-body: 'Figtree', system-ui, -apple-system, sans-serif; --dph-r-sm: 8px; --dph-r-md: 11px; --dph-r-lg: 16px; --dph-r-pill: 99px; --dph-shadow: 0 18px 50px rgba(0,0,0,.45); --dph-ease: cubic-bezier(.2,.7,.3,1); } /* ---- safe globals. None of these change layout. ---- */ html { -webkit-text-size-adjust: 100%; } body { text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--dph-accent) 35%, transparent); color: var(--dph-text); } :focus-visible { outline: 2px solid var(--dph-accent); outline-offset: 2px; border-radius: 4px; } * { scrollbar-width: thin; scrollbar-color: var(--dph-line-2) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--dph-line-2); border-radius: 99px; } *::-webkit-scrollbar-thumb:hover { background: var(--dph-accent); } *::-webkit-scrollbar-track { background: transparent; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- buttons ---- */ .dph-btn { font-family: var(--dph-f-display); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; background: var(--dph-accent); color: #06080e; border: none; padding: 12px 20px; border-radius: var(--dph-r-md); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: transform .14s var(--dph-ease), box-shadow .14s var(--dph-ease), filter .14s var(--dph-ease); box-shadow: 0 0 0 rgba(0,0,0,0); } .dph-btn:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 8px 26px color-mix(in srgb, var(--dph-accent) 30%, transparent); } .dph-btn:active { transform: translateY(0) scale(.985); } .dph-btn[disabled], .dph-btn.is-off { background: var(--dph-line); color: var(--dph-dim-2); cursor: not-allowed; transform: none; box-shadow: none; filter: none; } .dph-btn.ghost { background: transparent; border: 1px solid var(--dph-line); color: var(--dph-text); } .dph-btn.ghost:hover { border-color: var(--dph-accent); color: var(--dph-accent-2); box-shadow: none; } .dph-btn.sm { padding: 9px 14px; font-size: 11px; } /* ---- HUD: the readout every game puts in a corner ---- */ .dph-hud { position: fixed; z-index: 40; pointer-events: none; text-shadow: 0 2px 14px rgba(0,0,0,.75); } .dph-hud.tl { left: 16px; top: 14px; } .dph-hud.tr { right: 16px; top: 14px; text-align: right; } .dph-hud-row { margin-bottom: 9px; } .dph-lbl { font-family: var(--dph-f-body); font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(233,238,245,.6); } .dph-num { font-family: var(--dph-f-display); font-weight: 900; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; } .dph-num.md { font-size: 24px; } .dph-num.sm { font-size: 18px; } .dph-num.accent { color: var(--dph-accent-2); } /* ---- panels and stats ---- */ .dph-panel { background: linear-gradient(180deg, var(--dph-card-2), var(--dph-card)); border: 1px solid var(--dph-line); border-radius: var(--dph-r-lg); padding: 18px; } .dph-stats { display: flex; gap: 10px; flex-wrap: wrap; } .dph-stat { flex: 1; min-width: 88px; background: rgba(255,255,255,.035); border: 1px solid var(--dph-line); border-radius: var(--dph-r-md); padding: 10px 13px; } .dph-stat b { display: block; font-family: var(--dph-f-display); font-weight: 900; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; } .dph-stat span { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dph-dim); } /* ---- pills, chips, tabs ---- */ .dph-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(6,8,14,.82); border: 1px solid var(--dph-line); border-radius: var(--dph-r-pill); padding: 6px 13px; font-family: var(--dph-f-display); font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--dph-accent-2); } .dph-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; } .dph-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .dph-tab { font-family: var(--dph-f-body); font-size: 12.5px; font-weight: 700; padding: 9px 15px; border-radius: var(--dph-r-md); background: var(--dph-card); border: 1px solid var(--dph-line); color: var(--dph-dim); cursor: pointer; transition: all .14s var(--dph-ease); } .dph-tab:hover { color: var(--dph-text); border-color: var(--dph-line-2); } .dph-tab.on { background: var(--dph-accent); border-color: var(--dph-accent); color: #06080e; } /* ---- full-screen overlays: start, pause, results ---- */ .dph-veil { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; padding: 26px; text-align: center; overflow: auto; background: rgba(6,8,14,.93); backdrop-filter: blur(3px); } .dph-veil h1 { font-family: var(--dph-f-display); font-weight: 900; font-size: clamp(34px, 8vw, 66px); line-height: .9; letter-spacing: -.03em; } .dph-veil h1 em { font-style: normal; color: var(--dph-accent-2); } .dph-veil p { max-width: 470px; font-size: 14px; color: var(--dph-dim); line-height: 1.65; } .dph-veil p b { color: var(--dph-text); } .dph-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* ---- the toast every game reinvented ---- */ .dph-toast { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); z-index: 55; pointer-events: none; font-family: var(--dph-f-display); font-weight: 900; font-size: clamp(24px, 5vw, 36px); opacity: 0; transition: opacity .2s var(--dph-ease); text-shadow: 0 0 28px currentColor; } .dph-toast.show { opacity: 1; } /* ---- keyboard hint strip ---- */ .dph-tip { position: fixed; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--dph-f-body); font-size: 12px; color: rgba(233,238,245,.45); z-index: 40; pointer-events: none; } .dph-tip b, .dph-tip kbd { color: var(--dph-accent-2); font-weight: 800; font-family: inherit; } /* ---- a bar that fills. Stamina, XP, separation, a clock. ---- */ .dph-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; } .dph-bar > i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--dph-accent); transition: width .14s linear; } @media (max-width: 620px) { .dph-num { font-size: 30px; } .dph-hud.tl { left: 12px; top: 11px; } .dph-hud.tr { right: 12px; top: 11px; } .dph-btn { padding: 11px 17px; } } /* =========================================================================== ADOPTION LAYER --------------------------------------------------------------------------- Seven games already ship their own button and tab classes. Renaming them all would be a large, risky edit for a cosmetic gain. Instead the shared INTERACTION LANGUAGE is applied to the names that already exist: the same easing, the same lift on hover, the same press, the same focus ring, the same disabled treatment. Deliberately no colour or layout here — each game keeps its own palette and its own positions. Only the way things FEEL is unified. =========================================================================== */ .bl-btn, .go, .btn, .act-btn, .abtn, .ch, .cz-o, .tab, .cat, .sg, .stn, .dph-btn, .card, .dph-tab { transition: transform .14s var(--dph-ease), box-shadow .14s var(--dph-ease), border-color .14s var(--dph-ease), background-color .14s var(--dph-ease), filter .14s var(--dph-ease); } .bl-btn:hover, .go:hover, .btn:hover, .act-btn:hover, .abtn:hover, .ch:hover, .cz-o:hover, .tab:hover, .cat:hover, .sg:hover { transform: translateY(-1px); filter: brightness(1.06); } .bl-btn:active, .go:active, .btn:active, .act-btn:active, .abtn:active, .ch:active, .cz-o:active, .tab:active, .cat:active, .sg:active { transform: translateY(0) scale(.985); filter: none; } .bl-btn[disabled], .go[disabled], .btn[disabled], .abtn[disabled], .bl-btn:disabled, .abtn:disabled { transform: none !important; filter: none !important; cursor: not-allowed; } /* anything clickable gets a real focus ring, which none of them had */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, .ch:focus-visible, .cz-o:focus-visible, .tab:focus-visible, .cat:focus-visible { outline: 2px solid var(--dph-accent); outline-offset: 3px; } /* numbers in a HUD should never jitter as they count */ .big, .dph-num, .rscore, .stat b, .st b, .stats b, .an, #h-pts, #h-spd, #h-dist, #h-rings, #h-lv, #o-pts, #o-dist, #s-score, #d-score { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* one shadow language for every raised surface */ .panel, .glass-strong, .rbox, .bl-card, .dph-panel, .note, .n { box-shadow: var(--dph-shadow); } /* touch targets: nothing interactive should be under 40px on a phone */ @media (max-width: 620px) and (pointer: coarse) { .bl-btn, .go, .btn, .abtn, .tab, .ch, .cat { min-height: 42px; } }