/* ============================================================================ REIGN UI — an early-poly RTS interface kit ---------------------------------------------------------------------------- The essence of 2002: midnight blue glass, carved grey masonry, saturated gold, hard low-poly facets. Chamfered corners on everything interactive, beveled stone on everything structural, green health, royal-blue mana, twelve team colours, and four full race skins on one attribute: Pure CSS, zero dependencies, zero external assets. Class prefix `rg-`. ========================================================================== */ /* ============================== 1. TOKENS ================================ */ :root { /* midnight grounds */ --rg-night: #0a0e17; --rg-night-deep: #060910; /* masonry (hard facets: hi = lit edge, lo = shaded edge) */ --rg-stone-hi: #6d7787; --rg-stone-2: #454d59; --rg-stone-1: #333a44; --rg-stone-lo: #20242c; --rg-mortar: #0e1116; /* button glass */ --rg-glass-1: #1c2b4c; --rg-glass-2: #0d1526; --rg-sheen: rgb(150 190 255 / 14%); /* accent — gold for humans; race skins override the whole block */ --rg-accent-bright: #ffe9a0; --rg-accent: #ffd24a; --rg-accent-deep: #c8961e; --rg-accent-dark: #6e5210; --rg-glow: 255 210 74; /* text */ --rg-text: #e9e4d6; --rg-text-dim: #9aa2ad; --rg-text-faint: #5d646e; /* vitals — green blood of an RTS */ --rg-hp: #2ad428; --rg-hp-hurt: #f0e01e; --rg-hp-crit: #e83010; --rg-mana: #2e5cf0; --rg-xp: #8a4ae0; /* resources */ --rg-res-gold: #ffd24a; --rg-res-lumber: #55a838; --rg-res-food: #d8b478; /* the twelve */ --rg-team-red: #ff0303; --rg-team-blue: #0042ff; --rg-team-teal: #1ce6b9; --rg-team-purple: #8a00d4; --rg-team-yellow: #fffc01; --rg-team-orange: #fe8a0e; --rg-team-green: #20c000; --rg-team-pink: #e55bb0; --rg-team-gray: #959697; --rg-team-lightblue: #7ebff1; --rg-team-darkgreen: #16a05e; --rg-team-brown: #a05e2a; /* type — Friz-Quadrata-adjacent slab for UI, blackletter for logos */ --rg-font-ui: "Enriqueta", "Palatino Linotype", Palatino, Georgia, serif; --rg-font-logo: "Grenze Gotisch", "Enriqueta", Georgia, serif; --rg-fs-xs: 0.6875rem; --rg-fs-sm: 0.8125rem; --rg-fs-md: 0.9375rem; --rg-fs-lg: 1.125rem; --rg-fs-xl: 1.5rem; --rg-sp-1: 4px; --rg-sp-2: 8px; --rg-sp-3: 12px; --rg-sp-4: 16px; --rg-sp-5: 24px; --rg-sp-6: 32px; /* the chamfer — set --cut per element, clip with var(--rg-chamfer) */ --cut: 8px; --rg-chamfer: polygon( var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut) ); /* hard outlined text — every number in an RTS wears one */ --rg-outline: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 2px 3px rgb(0 0 0 / 70%); --rg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================== 1b. RACE SKINS ================================ */ .rg-app[data-race="orc"] { --rg-night: #120b07; --rg-night-deep: #0a0503; --rg-stone-hi: #8a6a4a; --rg-stone-2: #56402c; --rg-stone-1: #3e2e20; --rg-stone-lo: #241a10; --rg-mortar: #120c06; --rg-glass-1: #421f10; --rg-glass-2: #1c0d06; --rg-sheen: rgb(255 170 110 / 14%); --rg-accent-bright: #ffc890; --rg-accent: #f08038; --rg-accent-deep: #b04e18; --rg-accent-dark: #642a0c; --rg-glow: 240 128 56; } .rg-app[data-race="undead"] { --rg-night: #06100c; --rg-night-deep: #030a07; --rg-stone-hi: #7e8e7a; --rg-stone-2: #4a5848; --rg-stone-1: #364238; --rg-stone-lo: #1e2822; --rg-mortar: #0c1410; --rg-glass-1: #103426; --rg-glass-2: #061710; --rg-sheen: rgb(140 255 200 / 12%); --rg-accent-bright: #c8ffde; --rg-accent: #62e8a4; --rg-accent-deep: #26a868; --rg-accent-dark: #10593a; --rg-glow: 98 232 164; } .rg-app[data-race="nightelf"] { --rg-night: #0c0916; --rg-night-deep: #07050e; --rg-stone-hi: #7e7494; --rg-stone-2: #4c4462; --rg-stone-1: #383050; --rg-stone-lo: #221c34; --rg-mortar: #100c1c; --rg-glass-1: #2c1c4e; --rg-glass-2: #120a24; --rg-sheen: rgb(210 170 255 / 14%); --rg-accent-bright: #ecd8ff; --rg-accent: #c290f8; --rg-accent-deep: #8a52cc; --rg-accent-dark: #4c2680; --rg-glow: 194 144 248; } /* ============================== 2. BASE =================================== */ .rg-app { background: var(--rg-noise), radial-gradient(110% 80% at 50% -5%, #131a2c 0%, var(--rg-night) 52%, var(--rg-night-deep) 100%); background-attachment: fixed; color: var(--rg-text); font-family: var(--rg-font-ui); font-size: var(--rg-fs-md); line-height: 1.55; min-height: 100vh; transition: background 0.4s ease; scrollbar-width: thin; scrollbar-color: var(--rg-stone-2) var(--rg-night-deep); } .rg-app[data-race="orc"], .rg-app[data-race="undead"], .rg-app[data-race="nightelf"] { background: var(--rg-noise), radial-gradient(110% 80% at 50% -5%, var(--rg-stone-lo) 0%, var(--rg-night) 52%, var(--rg-night-deep) 100%); background-attachment: fixed; } .rg-app [hidden] { display: none !important; } .rg-app ::selection { background: var(--rg-accent); color: var(--rg-night-deep); } .rg-app :focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; } .rg-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rg-stone-2) var(--rg-night-deep); } .rg-scroll::-webkit-scrollbar, .rg-app::-webkit-scrollbar { width: 13px; height: 13px; } .rg-scroll::-webkit-scrollbar-track, .rg-app::-webkit-scrollbar-track { background: var(--rg-night-deep); border: 1px solid #000; } .rg-scroll::-webkit-scrollbar-thumb, .rg-app::-webkit-scrollbar-thumb { background: var(--rg-stone-2); border-top: 2px solid var(--rg-stone-hi); border-left: 2px solid var(--rg-stone-hi); border-right: 2px solid var(--rg-stone-lo); border-bottom: 2px solid var(--rg-stone-lo); box-shadow: 0 0 0 1px #000; } /* ============================ 3. TYPOGRAPHY =============================== */ /* the logo — blackletter, gradient gold, hard depth */ .rg-logo { font-family: var(--rg-font-logo); font-weight: 700; font-size: clamp(3rem, 9vw, 5.5rem); line-height: 1; letter-spacing: 0.02em; background: linear-gradient( 180deg, var(--rg-accent-bright) 12%, var(--rg-accent) 45%, var(--rg-accent-deep) 82% ); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(1px 1.5px 0 #000) drop-shadow(-1px 1.5px 0 #000) drop-shadow(0 4px 10px rgb(0 0 0 / 80%)) drop-shadow(0 0 26px rgb(var(--rg-glow) / 30%)); text-wrap: balance; margin: 0; } .rg-title { font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-xl); line-height: 1.2; color: var(--rg-accent); text-shadow: var(--rg-outline); text-wrap: balance; margin: 0; } .rg-heading { font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-lg); color: var(--rg-accent); text-shadow: var(--rg-outline); margin: 0; } .rg-label { font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rg-text-dim); } .rg-num { font-variant-numeric: tabular-nums; } .rg-text-accent { color: var(--rg-accent); } .rg-text-bright { color: var(--rg-accent-bright); } .rg-text-dim { color: var(--rg-text-dim); } .rg-text-faint { color: var(--rg-text-faint); } .rg-text-hp { color: var(--rg-hp); } .rg-text-mana { color: #6f93f2; } .rg-text-crit { color: var(--rg-hp-crit); } /* ============================ 4. MASONRY ================================== */ /* structural stone: rectangular, hard two-tone bevel — no chamfer */ .rg-panel { background: var(--rg-noise), linear-gradient(165deg, var(--rg-stone-2) 0%, var(--rg-stone-1) 60%, #2b313a 100%); background-color: var(--rg-stone-1); border: 3px solid; border-color: var(--rg-stone-hi) var(--rg-stone-lo) var(--rg-stone-lo) var(--rg-stone-hi); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(0 0 0 / 35%), 0 6px 18px rgb(0 0 0 / 55%); padding: var(--rg-sp-4); transition: background-color 0.4s ease, border-color 0.4s ease; } /* sunken — bevel reversed */ .rg-panel--well { background: var(--rg-noise), linear-gradient(180deg, #0b0e14 0%, #131822 100%); border-color: var(--rg-stone-lo) var(--rg-stone-hi) var(--rg-stone-hi) var(--rg-stone-lo); box-shadow: 0 0 0 1px #000, inset 0 3px 10px rgb(0 0 0 / 75%); } /* dark glass with an accent edge — chamfered, for menus & dialogs */ .rg-panel--glass { --cut: 10px; clip-path: var(--rg-chamfer); border: 0; background: var(--rg-noise), linear-gradient(180deg, var(--rg-glass-1) 0%, var(--rg-glass-2) 100%); box-shadow: inset 0 0 0 1.5px var(--rg-accent-deep), inset 0 0 0 2.5px rgb(0 0 0 / 60%), inset 0 1px 0 2px var(--rg-sheen), inset 0 0 46px rgb(0 0 0 / 45%); } .rg-panel--flush { padding: 0; } /* stone lintel with carved inscription */ .rg-lintel { display: flex; align-items: center; justify-content: center; gap: var(--rg-sp-2); padding: var(--rg-sp-2) var(--rg-sp-4); background: linear-gradient(180deg, var(--rg-stone-2), var(--rg-stone-1)); border: 2px solid; border-color: var(--rg-stone-hi) var(--rg-stone-lo) var(--rg-stone-lo) var(--rg-stone-hi); box-shadow: 0 0 0 1px #000, 0 3px 8px rgb(0 0 0 / 45%); font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-md); letter-spacing: 0.06em; color: var(--rg-accent); text-shadow: var(--rg-outline); text-align: center; transition: background 0.4s ease, border-color 0.4s ease; } /* battlements — crenellated top edge for HUD bars (uniform merlons) */ .rg-battlements { position: relative; margin-top: 12px; } .rg-battlements::before { content: ""; position: absolute; left: 8px; right: 8px; top: -12px; height: 12px; background: repeating-linear-gradient( 90deg, var(--rg-stone-hi) 0 3px, var(--rg-stone-2) 3px 26px, var(--rg-stone-lo) 26px 29px, transparent 29px 46px ); filter: drop-shadow(0 -1px 0 #000) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000); transition: background 0.4s ease; } /* ============================ 5. BUTTONS ================================== */ /* glue-screen button: gold chamfered edge, blue glass face, lights on hover */ .rg-btn { --cut: 7px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.6em 1.7em; font-family: var(--rg-font-ui); font-size: var(--rg-fs-md); font-weight: 700; letter-spacing: 0.04em; line-height: 1.1; color: var(--rg-accent-bright); text-shadow: var(--rg-outline); border: 0; clip-path: var(--rg-chamfer); background: linear-gradient( 180deg, var(--rg-accent-bright) 0%, var(--rg-accent) 18%, var(--rg-accent-deep) 55%, var(--rg-accent-dark) 100% ); cursor: pointer; user-select: none; filter: drop-shadow(0 2px 5px rgb(0 0 0 / 65%)); transition: filter 0.15s ease, color 0.15s ease, transform 0.05s ease; z-index: 0; } .rg-btn::before { content: ""; position: absolute; inset: 2px; --cut: 5.5px; clip-path: var(--rg-chamfer); background: var(--rg-noise), linear-gradient(180deg, var(--rg-glass-1) 0%, var(--rg-glass-2) 100%); box-shadow: inset 0 1px 0 var(--rg-sheen), inset 0 -8px 16px rgb(0 0 0 / 45%); z-index: -1; transition: filter 0.15s ease; } .rg-btn:hover, .rg-btn:focus-visible { color: #fff; text-shadow: var(--rg-outline), 0 0 14px rgb(var(--rg-glow) / 80%); filter: drop-shadow(0 2px 5px rgb(0 0 0 / 65%)) drop-shadow(0 0 12px rgb(var(--rg-glow) / 45%)); } .rg-btn:hover::before, .rg-btn:focus-visible::before { filter: brightness(1.5); } .rg-btn:active { transform: translateY(1px); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 65%)) brightness(0.9); } .rg-btn:disabled, .rg-btn--disabled { color: var(--rg-text-faint); cursor: not-allowed; filter: drop-shadow(0 2px 5px rgb(0 0 0 / 50%)) saturate(0.25) brightness(0.7); transform: none; } .rg-btn:disabled::before { filter: none; } /* lit face — the campaign's chosen action */ .rg-btn--primary::before { background: var(--rg-noise), linear-gradient( 180deg, color-mix(in srgb, var(--rg-accent-deep) 60%, var(--rg-glass-1)) 0%, color-mix(in srgb, var(--rg-accent-dark) 55%, var(--rg-glass-2)) 100% ); } .rg-btn--primary { color: #fff; } /* plain stone button */ .rg-btn--stone { background: linear-gradient(180deg, var(--rg-stone-hi), var(--rg-stone-lo)); } .rg-btn--stone::before { background: var(--rg-noise), linear-gradient(180deg, var(--rg-stone-2), var(--rg-stone-1)); } .rg-btn--stone { color: var(--rg-text); } .rg-btn--sm { padding: 0.35em 1em; font-size: var(--rg-fs-sm); --cut: 5px; } .rg-btn--sm::before { --cut: 4px; } .rg-btn--lg { padding: 0.8em 2.4em; font-size: var(--rg-fs-lg); } .rg-btn--block { display: flex; width: 100%; } /* ========================== 6. COMMAND CARD =============================== */ .rg-cmdcard { display: grid; grid-template-columns: repeat(4, var(--rg-cmd-size, 52px)); gap: 5px; } .rg-cmd { --cut: 6px; position: relative; width: var(--rg-cmd-size, 52px); aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: var(--rg-text-dim); border: 0; clip-path: var(--rg-chamfer); background: linear-gradient( 180deg, var(--rg-accent) 0%, var(--rg-accent-deep) 55%, var(--rg-accent-dark) 100% ); cursor: pointer; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 60%)); transition: filter 0.12s ease, color 0.12s ease, transform 0.05s ease; z-index: 0; } .rg-cmd::before { content: ""; position: absolute; inset: 2px; --cut: 4.5px; clip-path: var(--rg-chamfer); background: var(--rg-noise), radial-gradient(120% 110% at 50% 0%, #1a212e 0%, #0c1018 62%, #080b11 100%); box-shadow: inset 0 1px 0 var(--rg-sheen); z-index: -1; transition: filter 0.12s ease; } .rg-cmd:hover, .rg-cmd:focus-visible { color: #fff; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 60%)) drop-shadow(0 0 10px rgb(var(--rg-glow) / 45%)); } .rg-cmd:hover::before { filter: brightness(1.45); } .rg-cmd:active { transform: translateY(1px); } .rg-cmd--active { color: var(--rg-accent-bright); } .rg-cmd--active::before { background: var(--rg-noise), radial-gradient( 120% 110% at 50% 0%, color-mix(in srgb, var(--rg-accent-dark) 70%, #0c1018) 0%, #0c1018 80% ); box-shadow: inset 0 1px 0 var(--rg-sheen), inset 0 0 12px rgb(var(--rg-glow) / 35%); } .rg-cmd--disabled, .rg-cmd:disabled { color: #3a4048; cursor: not-allowed; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 50%)) saturate(0.2) brightness(0.6); } /* autocast — the pulsing corners */ .rg-cmd--autocast::after { content: ""; position: absolute; inset: 0; --cut: 6px; clip-path: var(--rg-chamfer); box-shadow: inset 0 0 0 2.5px var(--rg-accent); animation: rg-autocast 1.1s ease-in-out infinite; pointer-events: none; } @keyframes rg-autocast { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } .rg-cmd__key { position: absolute; right: 5px; bottom: 2px; font-family: var(--rg-font-ui); font-size: 11px; font-weight: 700; color: var(--rg-accent); text-shadow: var(--rg-outline); pointer-events: none; z-index: 1; } .rg-cmd__count { position: absolute; left: 5px; top: 2px; font-family: var(--rg-font-ui); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; text-shadow: var(--rg-outline); pointer-events: none; z-index: 1; } .rg-cmd--lg { --rg-cmd-size: 64px; font-size: 30px; } .rg-cmd--sm { --rg-cmd-size: 40px; font-size: 18px; --cut: 5px; } .rg-cmd--sm::before { --cut: 3.5px; } /* ============================ 7. VITALS =================================== */ /* flat, chunky, hard-edged — pure 2002 */ .rg-bar { --rg-bar-fill: var(--rg-hp); position: relative; height: 14px; background: linear-gradient(180deg, #05070b 0%, #0d1119 100%); border: 1px solid #000; box-shadow: 0 0 0 1px rgb(109 119 135 / 30%), inset 0 1px 3px rgb(0 0 0 / 80%); overflow: hidden; } .rg-bar__fill { position: absolute; inset: 1px auto 1px 1px; width: var(--rg-value, 60%); background: linear-gradient( 180deg, color-mix(in srgb, var(--rg-bar-fill) 75%, #fff) 0%, var(--rg-bar-fill) 38%, color-mix(in srgb, var(--rg-bar-fill) 72%, #000) 100% ); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 25%); transition: width 0.35s ease-out, background 0.25s ease; } .rg-bar__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--rg-font-ui); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: #fff; text-shadow: var(--rg-outline); pointer-events: none; } .rg-bar--hp { --rg-bar-fill: var(--rg-hp); } .rg-bar--hp.rg-bar--hurt { --rg-bar-fill: var(--rg-hp-hurt); } .rg-bar--hp.rg-bar--crit { --rg-bar-fill: var(--rg-hp-crit); } .rg-bar--mana { --rg-bar-fill: var(--rg-mana); } .rg-bar--xp { --rg-bar-fill: var(--rg-xp); } .rg-bar--team { --rg-bar-fill: var(--rg-team, var(--rg-team-red)); } .rg-bar--seg::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 90deg, transparent 0, transparent calc(10% - 1px), rgb(0 0 0 / 75%) calc(10% - 1px), rgb(0 0 0 / 75%) 10% ); pointer-events: none; } .rg-bar--mini { height: 6px; } .rg-bar--lg { height: 20px; } /* training / building progress */ .rg-progress { position: relative; height: 18px; background: linear-gradient(180deg, #05070b, #0d1119); border: 1px solid #000; box-shadow: 0 0 0 1px rgb(109 119 135 / 30%), inset 0 1px 3px rgb(0 0 0 / 80%); overflow: hidden; } .rg-progress__fill { position: absolute; inset: 1px auto 1px 1px; width: var(--rg-value, 40%); background: repeating-linear-gradient( 90deg, transparent 0 14px, rgb(0 0 0 / 30%) 14px 16px ), linear-gradient(180deg, #46e044 0%, #1fa81e 60%, #157014 100%); transition: width 0.2s linear; } .rg-progress__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--rg-font-ui); font-size: 11px; font-weight: 700; color: #fff; text-shadow: var(--rg-outline); pointer-events: none; } /* ========================= 8. RESOURCES & CLOCK =========================== */ /* the black top strip */ .rg-topbar { display: flex; align-items: center; gap: var(--rg-sp-4); padding: 5px 14px; background: linear-gradient(180deg, rgb(4 6 10 / 92%), rgb(10 14 22 / 92%)); border-top: 1px solid #000; border-bottom: 1px solid #000; box-shadow: 0 -1px 0 rgb(109 119 135 / 25%), 0 1px 0 rgb(109 119 135 / 25%), 0 3px 10px rgb(0 0 0 / 55%); } .rg-resource { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-sm); font-variant-numeric: tabular-nums; color: var(--rg-text); text-shadow: var(--rg-outline); } .rg-resource .rg-icon { width: 1.35em; height: 1.35em; } .rg-resource--gold { color: var(--rg-res-gold); } .rg-resource--lumber { color: var(--rg-res-lumber); } .rg-resource--food { color: var(--rg-res-food); } /* upkeep states colour the words themselves */ .rg-upkeep { font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-sm); text-shadow: var(--rg-outline); } .rg-upkeep--none { color: #2ad428; } .rg-upkeep--low { color: #f0e01e; } .rg-upkeep--high { color: #e83010; } /* day/night clock — the rotating sky disc */ .rg-clock { position: relative; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient( 180deg, var(--rg-accent-bright), var(--rg-accent-deep) 60%, var(--rg-accent-dark) ); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(0 0 0 / 40%), 0 3px 8px rgb(0 0 0 / 60%); padding: 4px; flex: none; } .rg-clock__disc { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: conic-gradient( from 270deg, #7ec4f8 0deg 90deg, #3a7ad8 90deg 180deg, #0a1436 180deg 270deg, #1c3a78 270deg 360deg ); box-shadow: inset 0 0 0 1px #000, inset 0 0 10px rgb(0 0 0 / 55%); animation: rg-daynight 60s linear infinite; } .rg-clock__disc::before, .rg-clock__disc::after { content: ""; position: absolute; left: 50%; translate: -50% 0; width: 12px; height: 12px; border-radius: 50%; } .rg-clock__disc::before { top: 5px; background: radial-gradient(circle at 35% 30%, #fff8d0, #ffd24a 55%, #c8961e); box-shadow: 0 0 8px rgb(255 210 74 / 90%); } .rg-clock__disc::after { bottom: 5px; background: radial-gradient(circle at 60% 35%, #f0f4ff, #b8c4de 55%, #6a7898); box-shadow: 0 0 6px rgb(184 196 222 / 70%); } /* fixed horizon */ .rg-clock::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; translate: 0 -50%; background: rgb(0 0 0 / 55%); box-shadow: 0 1px 0 rgb(255 255 255 / 12%); pointer-events: none; } @keyframes rg-daynight { to { rotate: 360deg; } } /* ====================== 9. UNITS, HEROES, TEAMS =========================== */ /* chunky stone portrait */ .rg-portrait { position: relative; width: 64px; height: 64px; flex: none; background: #05070b; border: 3px solid; border-color: var(--rg-stone-hi) var(--rg-stone-lo) var(--rg-stone-lo) var(--rg-stone-hi); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, 0 3px 8px rgb(0 0 0 / 55%); overflow: hidden; cursor: pointer; } .rg-portrait > img, .rg-portrait > svg { width: 100%; height: 100%; object-fit: cover; display: block; } .rg-portrait--lg { width: 84px; height: 84px; } .rg-portrait--sm { width: 44px; height: 44px; border-width: 2px; } .rg-portrait__level { position: absolute; right: 1px; bottom: 1px; min-width: 17px; padding: 0 3px; font-family: var(--rg-font-ui); font-size: 11px; font-weight: 700; text-align: center; color: #fff; text-shadow: var(--rg-outline); background: var(--rg-accent-dark); border: 1px solid var(--rg-accent); z-index: 1; } /* multi-selection unit button (the 12-slot grid) */ .rg-unit-btn { --cut: 5px; position: relative; width: 48px; aspect-ratio: 1; padding: 3px 3px 8px; border: 0; clip-path: var(--rg-chamfer); background: linear-gradient(180deg, var(--rg-stone-hi), var(--rg-stone-lo)); cursor: pointer; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 55%)); transition: filter 0.12s ease; } .rg-unit-btn::before { content: ""; position: absolute; inset: 2px; --cut: 4px; clip-path: var(--rg-chamfer); background: radial-gradient(120% 110% at 50% 0%, #16202e 0%, #0a0e16 70%); z-index: 0; } .rg-unit-btn > * { position: relative; z-index: 1; } .rg-unit-btn:hover { filter: drop-shadow(0 2px 3px rgb(0 0 0 / 55%)) drop-shadow(0 0 8px rgb(var(--rg-glow) / 40%)); } .rg-unit-btn--selected { background: linear-gradient(180deg, var(--rg-accent), var(--rg-accent-dark)); } .rg-unit-btn .rg-bar--mini { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 4px; } .rg-unit-btn .rg-icon, .rg-unit-btn svg:not(.rg-icon) { width: 100%; height: calc(100% - 6px); display: block; } .rg-unit-grid { display: grid; grid-template-columns: repeat(6, 48px); gap: 5px; } /* team-coloured name plate */ .rg-plate { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.3em 0.8em 0.3em 0.6em; background: linear-gradient(180deg, rgb(8 11 17 / 88%), rgb(14 18 27 / 88%)); border: 1px solid #000; border-left: 4px solid var(--rg-team, var(--rg-team-red)); box-shadow: 0 0 0 1px rgb(109 119 135 / 25%), 0 2px 5px rgb(0 0 0 / 45%); font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-sm); } .rg-plate__name { color: var(--rg-team, var(--rg-team-red)); text-shadow: var(--rg-outline); } /* hero attribute row */ .rg-attr { display: flex; align-items: center; gap: 0.6em; font-family: var(--rg-font-ui); font-weight: 700; font-size: var(--rg-fs-sm); font-variant-numeric: tabular-nums; } .rg-attr .rg-icon { color: var(--rg-accent); width: 1.2em; height: 1.2em; } .rg-attr__name { color: var(--rg-text-dim); flex: 1; font-weight: 400; } .rg-attr__value { color: #fff; text-shadow: var(--rg-outline); } .rg-attr__bonus { color: var(--rg-hp); text-shadow: var(--rg-outline); } /* ========================== 10. MINIMAP =================================== */ .rg-minimap { position: relative; width: 148px; aspect-ratio: 1; flex: none; background: var(--rg-noise), radial-gradient(120% 120% at 30% 20%, #24402280 0%, transparent 55%), linear-gradient(160deg, #17251a 0%, #0d1410 55%, #0a0f14 100%); border: 3px solid; border-color: var(--rg-stone-hi) var(--rg-stone-lo) var(--rg-stone-lo) var(--rg-stone-hi); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, inset 0 0 24px rgb(0 0 0 / 60%); overflow: hidden; } .rg-minimap__view { position: absolute; width: 34%; height: 26%; border: 1px solid rgb(255 255 255 / 85%); box-shadow: 0 0 0 1px rgb(0 0 0 / 70%); pointer-events: none; } .rg-minimap__dot { position: absolute; width: 6px; height: 6px; translate: -50% -50%; background: var(--rg-team, var(--rg-team-red)); box-shadow: 0 0 0 1px rgb(0 0 0 / 80%); } .rg-minimap__ping { position: absolute; width: 34px; height: 34px; translate: -50% -50%; border-radius: 50%; border: 2.5px solid var(--rg-accent); box-shadow: 0 0 10px rgb(var(--rg-glow) / 70%); animation: rg-ping 1.4s ease-out infinite; pointer-events: none; } @keyframes rg-ping { 0% { scale: 0.15; opacity: 1; } 70% { scale: 1; opacity: 0.5; } 100% { scale: 1.15; opacity: 0; } } /* ========================= 10b. TALENT WEB ================================ */ /* A constellation of empty sockets — drop any content into .rg-tal__slot. Nodes are absolutely positioned (left/top in %); connectors live in an SVG layer (.rg-talents__web) underneath and pick up the race accent. */ .rg-talents { position: relative; background: radial-gradient(42% 30% at 50% 12%, rgb(var(--rg-glow) / 10%), transparent 70%), radial-gradient(60% 45% at 50% 100%, rgb(0 0 0 / 55%), transparent 65%), var(--rg-noise), linear-gradient(180deg, #0b0e15 0%, #0d1119 55%, #090c12 100%); border: 3px solid; border-color: var(--rg-stone-lo) var(--rg-stone-hi) var(--rg-stone-hi) var(--rg-stone-lo); box-shadow: 0 0 0 1px #000, inset 0 3px 14px rgb(0 0 0 / 70%); overflow: hidden; } .rg-talents__web { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* connectors — tinted from the skin tokens with low alpha so they sink into any race's night instead of floating above it */ .rg-tal-link { fill: none; stroke: color-mix(in srgb, var(--rg-stone-hi) 16%, transparent); stroke-width: 5; stroke-linecap: round; transition: stroke 0.25s ease; } .rg-tal-link--available { stroke: color-mix(in srgb, var(--rg-accent) 28%, transparent); } .rg-tal-link--learned { stroke: var(--rg-accent-deep); filter: drop-shadow(0 0 5px rgb(var(--rg-glow) / 50%)); } .rg-tal-link--syn { stroke-width: 2.5; stroke-dasharray: 3 8; } .rg-tal-link--syn.rg-tal-link--learned { stroke: var(--rg-accent); stroke-dasharray: none; stroke-width: 2.5; } /* travelling sparks on learned paths */ .rg-tal-flow { fill: none; stroke: var(--rg-accent-bright); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 12 128; opacity: 0.95; filter: drop-shadow(0 0 4px rgb(var(--rg-glow) / 90%)); animation: rg-tal-flow 1.7s linear infinite; } @keyframes rg-tal-flow { to { stroke-dashoffset: -140; } } /* the socket — the chamfered facets live on ::before (rim) and ::after (glass face) so children like the rank plate may overhang the node */ .rg-tal { --rg-tal-size: 56px; --cut: calc(var(--rg-tal-size) * 0.22); position: absolute; translate: -50% -50%; width: var(--rg-tal-size); height: var(--rg-tal-size); padding: 0; border: 0; display: flex; align-items: center; justify-content: center; background: none; cursor: pointer; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 65%)); transition: filter 0.15s ease; z-index: 1; } .rg-tal::before { content: ""; position: absolute; inset: 0; clip-path: var(--rg-chamfer); background: linear-gradient(180deg, var(--rg-stone-hi), var(--rg-stone-lo)); transition: background 0.25s ease; z-index: 0; } .rg-tal::after { content: ""; position: absolute; inset: 2.5px; --cut: calc(var(--rg-tal-size) * 0.19); clip-path: var(--rg-chamfer); background: var(--rg-noise), radial-gradient(120% 115% at 50% 0%, #182030 0%, #0b0f17 60%, #070a10 100%); box-shadow: inset 0 1px 0 var(--rg-sheen); transition: background 0.25s ease, box-shadow 0.25s ease; z-index: 0; } .rg-tal > * { position: relative; z-index: 1; } /* what the user drops in — any icon, letter, image */ .rg-tal__slot { display: flex; align-items: center; justify-content: center; width: 62%; height: 62%; color: var(--rg-text-dim); font-size: calc(var(--rg-tal-size) * 0.42); transition: color 0.2s ease; } .rg-tal:hover, .rg-tal:focus-visible { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 65%)) drop-shadow(0 0 10px rgb(var(--rg-glow) / 45%)); } .rg-tal--locked { cursor: not-allowed; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 55%)) saturate(0.3) brightness(0.75); } .rg-tal--locked:hover { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 55%)) saturate(0.3) brightness(0.82); } .rg-tal--available { animation: rg-tal-call 2.2s ease-in-out infinite; } .rg-tal--available .rg-tal__slot { color: var(--rg-text); } @keyframes rg-tal-call { 0%, 100% { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 65%)); } 50% { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 65%)) drop-shadow(0 0 9px rgb(var(--rg-glow) / 40%)); } } .rg-tal--learned { animation: none; } .rg-tal--learned::before { background: linear-gradient( 180deg, var(--rg-accent-bright) 0%, var(--rg-accent-deep) 55%, var(--rg-accent-dark) 100% ); } .rg-tal--learned::after { background: var(--rg-noise), radial-gradient( 120% 115% at 50% 0%, color-mix(in srgb, var(--rg-accent-dark) 55%, #0b0f17) 0%, #0b0f17 75% ); box-shadow: inset 0 1px 0 var(--rg-sheen), inset 0 0 14px rgb(var(--rg-glow) / 30%); } .rg-tal--learned .rg-tal__slot { color: var(--rg-accent-bright); } .rg-tal--maxed { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 65%)) drop-shadow(0 0 12px rgb(var(--rg-glow) / 55%)); } .rg-tal--maxed .rg-tal__slot { color: #fff; } /* rank plate */ .rg-tal__rank { position: absolute; left: 50%; bottom: calc(var(--rg-tal-size) * -0.18); translate: -50% 0; z-index: 2; padding: 0 5px; font-family: var(--rg-font-ui); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--rg-text-dim); background: linear-gradient(180deg, #10141d, #080b11); border: 1px solid #000; box-shadow: 0 0 0 1px rgb(109 119 135 / 30%), 0 2px 4px rgb(0 0 0 / 60%); pointer-events: none; white-space: nowrap; transition: color 0.2s ease; } .rg-tal--learned .rg-tal__rank { color: var(--rg-accent); } .rg-tal--maxed .rg-tal__rank { color: var(--rg-accent-bright); box-shadow: 0 0 0 1px var(--rg-accent-dark), 0 2px 4px rgb(0 0 0 / 60%); } /* keystone — bigger, octagonal */ .rg-tal--keystone { --rg-tal-size: 72px; --cut: calc(var(--rg-tal-size) * 0.29); } .rg-tal--keystone::after { --cut: calc(var(--rg-tal-size) * 0.26); } /* the ultimate — crowned with an aurora (soft box glow; the button itself is unclipped, so a heavily blurred shadow reads as a radial halo) */ .rg-tal--ult { --rg-tal-size: 96px; --cut: calc(var(--rg-tal-size) * 0.29); } .rg-tal--ult::after { --cut: calc(var(--rg-tal-size) * 0.265); } .rg-tal--ult.rg-tal--available { box-shadow: 0 0 46px 8px rgb(var(--rg-glow) / 16%); } .rg-tal--ult.rg-tal--learned { animation: rg-tal-aurora 3.2s ease-in-out infinite; } @keyframes rg-tal-aurora { 0%, 100% { box-shadow: 0 0 52px 12px rgb(var(--rg-glow) / 26%); } 50% { box-shadow: 0 0 78px 26px rgb(var(--rg-glow) / 38%); } } /* ==================== 10c. FACTION HERO ELEMENTS ========================== */ /* Each standard distilled into two reusable pieces: an epic button (the one or two showpiece actions of an app) and a top-crop backdrop that fills a box of any size with the faction's motif. Colours are baked in, so a Human button stays Human under any skin. */ .rg-hero-btn { --hb-glow: 255 206 92; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 1.05em 3.2em 1.25em; font-family: var(--rg-font-ui); font-size: var(--rg-fs-lg); font-weight: 700; letter-spacing: 0.06em; color: #fff; text-shadow: var(--rg-outline); border: 0; cursor: pointer; user-select: none; transition: transform 0.06s ease; animation: rg-hero-breathe 3s ease-in-out infinite; } .rg-hero-btn::before { content: ""; position: absolute; inset: 3px; clip-path: inherit; z-index: -1; transition: filter 0.15s ease; } .rg-hero-btn:active { transform: translateY(1.5px); } .rg-hero-btn:hover, .rg-hero-btn:focus-visible { animation-play-state: paused; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 65%)) drop-shadow(0 0 26px rgb(var(--hb-glow) / 60%)); } .rg-hero-btn:hover::before, .rg-hero-btn:focus-visible::before { filter: brightness(1.22); } @keyframes rg-hero-breathe { 0%, 100% { filter: drop-shadow(0 4px 10px rgb(0 0 0 / 65%)) drop-shadow(0 0 14px rgb(var(--hb-glow) / 32%)); } 50% { filter: drop-shadow(0 4px 10px rgb(0 0 0 / 65%)) drop-shadow(0 0 30px rgb(var(--hb-glow) / 58%)); } } /* light sweep gliding across the face every few seconds */ .rg-hero-btn::after { content: ""; position: absolute; inset: 3px; clip-path: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 34%, rgb(255 255 255 / 0%) 43%, rgb(255 255 255 / 24%) 50%, rgb(255 255 255 / 0%) 57%, transparent 66%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 200% 0; animation: rg-hero-sheen 4.6s ease-in-out infinite; } .rg-hero-btn--orc::after { animation-delay: -1.15s; } .rg-hero-btn--undead::after { animation-delay: -2.3s; } .rg-hero-btn--nightelf::after { animation-delay: -3.45s; } @keyframes rg-hero-sheen { 0% { background-position: 200% 0; } 22% { background-position: -100% 0; } 100% { background-position: -100% 0; } } /* human — the shield: gold rim, chief band, one proud point */ .rg-hero-btn--human { --hb-glow: 255 206 92; clip-path: polygon(3.5% 0, 96.5% 0, 100% 20%, 100% 72%, 50% 100%, 0 72%, 0 20%); background: linear-gradient(180deg, #fff3be 0%, #ffd75e 20%, #e0a028 55%, #96610f 100%); } .rg-hero-btn--human::before { background: radial-gradient(85% 65% at 50% 0%, rgb(170 205 255 / 22%), transparent 62%), repeating-linear-gradient(90deg, transparent 0 7px, rgb(160 190 255 / 5%) 7px 8px), linear-gradient(180deg, #ffd75e 0, #e0a028 11%, rgb(50 30 3 / 65%) 11.5%, transparent 13%), linear-gradient(180deg, #3f63c8 0%, #24408e 45%, #16255c 100%); } /* orc — the war-torn cloak: charred red, a ragged ripped hem */ .rg-hero-btn--orc { --hb-glow: 255 86 38; padding-bottom: 1.45em; clip-path: polygon( 2.5% 0, 97.5% 0, 100% 16%, 100% 78%, 93% 100%, 88.5% 80%, 82% 96%, 75% 82%, 67.5% 100%, 60% 84%, 52.5% 97%, 45% 82%, 37.5% 99%, 30% 83%, 22.5% 96%, 15% 81%, 8.5% 100%, 3.5% 82%, 0 92%, 0 16% ); background: linear-gradient(180deg, #c8402a 0%, #7e1410 38%, #2c0604 100%); } .rg-hero-btn--orc::before { background: linear-gradient(107deg, transparent 33%, rgb(10 4 3 / 80%) 33.5% 35.5%, transparent 36% 46%, rgb(10 4 3 / 80%) 46.5% 48.5%, transparent 49% 59%, rgb(10 4 3 / 80%) 59.5% 61.5%, transparent 62%), radial-gradient(130% 100% at 50% 130%, rgb(8 3 2 / 8%) 40%, rgb(8 3 2 / 75%) 78%), radial-gradient(60% 120% at -5% 50%, rgb(8 3 2 / 55%), transparent 60%), radial-gradient(60% 120% at 105% 50%, rgb(8 3 2 / 55%), transparent 60%), linear-gradient(180deg, #8e1a10 0%, #5c0e08 60%, #3a0805 100%); } /* undead — the jaw: charcoal cloth ends in a row of bone teeth */ .rg-hero-btn--undead { --hb-glow: 168 190 58; padding-bottom: 1.6em; clip-path: polygon( 2.5% 0, 97.5% 0, 100% 16%, 100% 72%, 96% 74%, 92.5% 98%, 89% 74%, 85.5% 74%, 82% 100%, 78.5% 74%, 75% 74%, 71.5% 97%, 68% 74%, 64.5% 74%, 61% 100%, 57.5% 74%, 54% 74%, 50.5% 98%, 47% 74%, 43.5% 74%, 40% 100%, 36.5% 74%, 33% 74%, 29.5% 97%, 26% 74%, 22.5% 74%, 19% 100%, 15.5% 74%, 12% 74%, 8.5% 98%, 5% 74%, 0 72%, 0 16% ); background: linear-gradient(180deg, #565a56 0%, #2b2d2c 30%, #131514 100%); } .rg-hero-btn--undead::before { background: radial-gradient(55% 90% at 0% 0%, rgb(146 158 44 / 30%), transparent 60%), radial-gradient(55% 90% at 100% 12%, rgb(146 158 44 / 22%), transparent 60%), linear-gradient(180deg, #2b2d2c 0%, #1a1c1b 48%, #0e100f 66%, #8a8570 68%, #efe9d6 74%, #d6cfb4 100%); } /* night elf — the moonlit veil: violet, silver thread, side tails */ .rg-hero-btn--nightelf { --hb-glow: 186 190 255; padding-bottom: 1.45em; clip-path: polygon( 3% 0, 97% 0, 100% 18%, 100% 80%, 89% 100%, 77% 88%, 63% 81%, 50% 79%, 37% 81%, 23% 88%, 11% 100%, 0 80%, 0 18% ); background: linear-gradient(180deg, #f4f8ff 0%, #c2cbe8 26%, #8a96be 62%, #4c5680 100%); } .rg-hero-btn--nightelf::before { background: radial-gradient(circle at 82% 22%, rgb(244 248 255 / 85%) 0 3.5%, rgb(196 206 255 / 35%) 8%, transparent 16%), radial-gradient(circle at 14% 60%, rgb(226 232 255 / 70%) 0 1.2%, transparent 3%), radial-gradient(circle at 30% 26%, rgb(226 232 255 / 55%) 0 1%, transparent 2.6%), radial-gradient(circle at 62% 70%, rgb(226 232 255 / 45%) 0 1%, transparent 2.4%), linear-gradient(160deg, #43286e 0%, #2c1a4e 55%, #180e30 100%); box-shadow: inset 0 0 0 1.3px rgb(226 232 255 / 45%); } /* ---- top-crop backdrops: the banner's crown, stretched to any box ---- */ .rg-backdrop { position: relative; --bd-glow: 255 206 92; box-shadow: inset 0 0 0 1px #000, inset 0 0 56px rgb(0 0 0 / 45%), inset 0 0 52px rgb(var(--bd-glow) / 11%); } /* drifting particle layer — motes, embers, spores, stars */ .rg-backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; } @keyframes rg-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 9px -160px, -13px -220px, 7px -190px; } } @keyframes rg-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes rg-ember-flicker { 0%, 100% { opacity: 0.55; } 42% { opacity: 0.95; } 60% { opacity: 0.7; } 78% { opacity: 1; } } .rg-backdrop--human::after { background-image: radial-gradient(circle at 22% 82%, rgb(255 224 130 / 55%) 0 1.2px, transparent 2.6px), radial-gradient(circle at 62% 32%, rgb(255 224 130 / 40%) 0 1px, transparent 2.2px), radial-gradient(circle at 84% 64%, rgb(255 224 130 / 45%) 0 1px, transparent 2.4px); background-size: 160px 160px, 220px 220px, 190px 190px; animation: rg-drift 18s linear infinite; opacity: 0.8; } .rg-backdrop--orc::after { background-image: radial-gradient(circle at 26% 86%, rgb(255 140 60 / 70%) 0 1.4px, transparent 3px), radial-gradient(circle at 58% 38%, rgb(255 90 40 / 55%) 0 1px, transparent 2.4px), radial-gradient(circle at 82% 66%, rgb(255 170 80 / 55%) 0 1.1px, transparent 2.6px); background-size: 160px 160px, 220px 220px, 190px 190px; animation: rg-drift 8s linear infinite, rg-ember-flicker 2.4s ease-in-out infinite; } .rg-backdrop--undead::after { background-image: radial-gradient(circle at 24% 20%, rgb(180 200 90 / 45%) 0 1.4px, transparent 3px), radial-gradient(circle at 64% 70%, rgb(150 170 60 / 40%) 0 1.1px, transparent 2.6px), radial-gradient(circle at 86% 42%, rgb(200 216 120 / 35%) 0 1px, transparent 2.2px); background-size: 160px 160px, 220px 220px, 190px 190px; animation: rg-drift 26s linear infinite reverse; opacity: 0.7; } .rg-backdrop--nightelf::after { background-image: radial-gradient(circle at 28% 76%, rgb(235 240 255 / 80%) 0 1.1px, transparent 2.4px), radial-gradient(circle at 66% 26%, rgb(215 225 255 / 65%) 0 0.9px, transparent 2px), radial-gradient(circle at 88% 58%, rgb(245 248 255 / 70%) 0 1px, transparent 2.2px); background-size: 160px 160px, 220px 220px, 190px 190px; animation: rg-drift 42s linear infinite, rg-twinkle 3.6s ease-in-out infinite; } .rg-backdrop--human { --bd-glow: 255 206 92; background: linear-gradient(180deg, #ffd75e 0 3px, #96610f 3px 4px, rgb(50 30 3 / 85%) 4px 5.5px, transparent 5.5px), repeating-conic-gradient(from 169deg at 50% -14%, rgb(255 206 92 / 6%) 0deg 5deg, transparent 5deg 14deg), repeating-linear-gradient(90deg, transparent 0 9px, rgb(160 190 255 / 4%) 9px 10px), radial-gradient(65% 55% at 50% -8%, rgb(255 206 92 / 20%), transparent 62%), linear-gradient(180deg, #2c4890 0%, #1b3068 46%, #101c40 100%); } .rg-backdrop--orc { --bd-glow: 255 86 38; background: linear-gradient(180deg, rgb(8 3 2 / 85%) 0 2px, transparent 2px), repeating-linear-gradient(113deg, transparent 0 74px, rgb(10 4 3 / 40%) 74px 78px, transparent 78px 132px, rgb(10 4 3 / 30%) 132px 135px, transparent 135px 205px), radial-gradient(50% 60% at 0% 0%, rgb(8 3 2 / 70%), transparent 60%), radial-gradient(50% 60% at 100% 0%, rgb(8 3 2 / 70%), transparent 60%), radial-gradient(70% 55% at 50% -10%, rgb(255 86 38 / 13%), transparent 60%), linear-gradient(180deg, #741510 0%, #4c0b07 55%, #2c0604 100%); } .rg-backdrop--undead { --bd-glow: 168 190 58; background: linear-gradient(180deg, #efe9d6 0 2px, rgb(20 24 8 / 80%) 2px 3.5px, transparent 3.5px), linear-gradient(180deg, rgb(14 16 15 / 0%) 0%, rgb(14 16 15 / 85%) 78%), repeating-linear-gradient(90deg, transparent 0 47px, rgb(120 132 30 / 30%) 47px 50px, transparent 50px 118px, rgb(120 132 30 / 22%) 118px 120px, transparent 120px 171px), radial-gradient(55% 70% at 4% 0%, rgb(146 158 44 / 26%), transparent 60%), radial-gradient(45% 60% at 96% 6%, rgb(146 158 44 / 18%), transparent 60%), linear-gradient(180deg, #262827 0%, #171918 55%, #0e100f 100%); } .rg-backdrop--nightelf { --bd-glow: 186 190 255; background: linear-gradient(180deg, rgb(232 240 255 / 85%) 0 1.5px, transparent 1.5px), radial-gradient(circle at 84% 14%, rgb(244 248 255 / 55%) 0 14px, rgb(196 206 255 / 20%) 30px, transparent 60px), radial-gradient(circle at 12% 34%, rgb(226 232 255 / 60%) 0 1.5px, transparent 4px), radial-gradient(circle at 34% 12%, rgb(226 232 255 / 45%) 0 1px, transparent 3px), radial-gradient(circle at 58% 42%, rgb(226 232 255 / 40%) 0 1px, transparent 3px), radial-gradient(circle at 27% 72%, rgb(226 232 255 / 35%) 0 1px, transparent 3px), radial-gradient(circle at 71% 82%, rgb(226 232 255 / 30%) 0 1px, transparent 3px), linear-gradient(160deg, #3a2260 0%, #271746 52%, #150c2a 100%); } /* =========================== 11. OVERLAYS ================================= */ .rg-tooltip-anchor { position: relative; } .rg-tooltip { position: absolute; z-index: 30; min-width: 210px; max-width: 300px; padding: var(--rg-sp-3) var(--rg-sp-4); --cut: 8px; clip-path: var(--rg-chamfer); background: var(--rg-noise), linear-gradient(180deg, rgb(9 13 22 / 96%), rgb(4 6 10 / 96%)); box-shadow: inset 0 0 0 1.5px var(--rg-accent-deep), inset 0 0 0 2.5px rgb(0 0 0 / 65%); font-size: var(--rg-fs-sm); line-height: 1.5; color: var(--rg-text); text-align: left; pointer-events: none; } .rg-tooltip-anchor > .rg-tooltip { bottom: calc(100% + 9px); left: 50%; translate: -50% 4px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, translate 0.15s ease, visibility 0.15s; } .rg-tooltip-anchor:hover > .rg-tooltip, .rg-tooltip-anchor:focus-visible > .rg-tooltip { opacity: 1; visibility: visible; translate: -50% 0; } .rg-tooltip__name { font-weight: 700; color: var(--rg-accent); text-shadow: var(--rg-outline); } .rg-tooltip__hotkey { color: var(--rg-accent-bright); } .rg-tooltip__body { display: block; margin-top: 4px; color: var(--rg-text); } .rg-tooltip__cost { display: flex; gap: 1em; margin-top: 6px; } .rg-tooltip__req { display: block; margin-top: 4px; color: var(--rg-hp-crit); } /* modal */ .rg-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--rg-sp-5); background: rgb(2 4 8 / 74%); backdrop-filter: blur(2px); animation: rg-fade 0.2s ease; } .rg-dialog { max-width: 440px; width: 100%; padding: var(--rg-sp-5); animation: rg-rise 0.22s ease-out; } .rg-dialog__footer { display: flex; justify-content: center; gap: var(--rg-sp-3); padding-top: var(--rg-sp-4); } @keyframes rg-fade { from { opacity: 0; } } @keyframes rg-rise { from { opacity: 0; transform: translateY(12px); } } /* centre-screen announcement — QUEST COMPLETED */ .rg-banner { position: fixed; left: 50%; top: 26%; z-index: 85; translate: -50% -50%; font-family: var(--rg-font-ui); font-weight: 700; font-size: clamp(1.4rem, 4vw, 2.4rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rg-accent); text-shadow: var(--rg-outline), 0 0 30px rgb(var(--rg-glow) / 50%); pointer-events: none; animation: rg-banner 2.6s ease-in-out forwards; white-space: nowrap; } @keyframes rg-banner { 0% { opacity: 0; transform: scale(1.35); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } /* chat */ .rg-chat { font-family: var(--rg-font-ui); font-size: var(--rg-fs-sm); line-height: 1.65; } .rg-chat__msg { display: block; text-shadow: var(--rg-outline); } .rg-chat__chan { color: var(--rg-text-faint); } .rg-chat__name { color: var(--rg-team, var(--rg-team-red)); font-weight: 700; } .rg-chat__text { color: var(--rg-text); } .rg-chat__msg--system { color: var(--rg-accent); } /* =========================== 12. FORMS ==================================== */ .rg-input, .rg-select { font-family: var(--rg-font-ui); font-size: var(--rg-fs-md); color: var(--rg-text); background: linear-gradient(180deg, #06090f 0%, #0e1420 100%); border: 2px solid; border-color: var(--rg-stone-lo) var(--rg-stone-hi) var(--rg-stone-hi) var(--rg-stone-lo); box-shadow: 0 0 0 1px #000, inset 0 2px 5px rgb(0 0 0 / 70%); padding: 0.45em 0.75em; caret-color: var(--rg-accent); transition: box-shadow 0.15s ease; } .rg-input::placeholder { color: var(--rg-text-faint); } .rg-input:focus, .rg-select:focus { outline: none; box-shadow: 0 0 0 1px var(--rg-accent-deep), inset 0 2px 5px rgb(0 0 0 / 70%), 0 0 10px rgb(var(--rg-glow) / 30%); } .rg-select { appearance: none; padding-right: 2.1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffd24a' stroke-width='2'/%3E%3C/svg%3E"), linear-gradient(180deg, #06090f 0%, #0e1420 100%); background-repeat: no-repeat; background-position: right 0.7em center, 0 0; cursor: pointer; } .rg-select option { background: #0c1018; color: var(--rg-text); } .rg-check { appearance: none; width: 19px; height: 19px; flex: none; margin: 0; --cut: 4px; clip-path: var(--rg-chamfer); background: linear-gradient(180deg, var(--rg-stone-lo), #0a0d13); box-shadow: inset 0 0 0 1.5px var(--rg-stone-2); cursor: pointer; vertical-align: -4px; transition: background 0.12s ease; } .rg-check:hover { box-shadow: inset 0 0 0 1.5px var(--rg-accent-deep); } .rg-check:checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='%23fff' stroke-width='3.4'/%3E%3C/svg%3E") center / 82% no-repeat, linear-gradient(180deg, var(--rg-accent), var(--rg-accent-dark)); box-shadow: inset 0 0 0 1.5px var(--rg-accent-deep); } /* ============================= 13. ICONS ================================== */ /* chunky single-colour masks, tinted by currentColor */ .rg-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; background-color: currentColor; -webkit-mask: var(--rg-icon) center / contain no-repeat; mask: var(--rg-icon) center / contain no-repeat; } .rg-icon--sword { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3 12.6-1.7 2h-2.6l-1.7-2zM7 16.4h10v2.2H7zM10.8 18.6h2.4v3h-2.4z'/%3E%3Ccircle cx='12' cy='22' r='1.6'/%3E%3C/svg%3E"); } .rg-icon--axe { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10.9' y='4' width='2.8' height='18' rx='1.2'/%3E%3Cpath d='M13 2.4c5.4.8 8.4 3.8 9 8.4-3.8-1.8-6.8-2-9-1zM11 2.4c-5.4.8-8.4 3.8-9 8.4 3.8-1.8 6.8-2 9-1z'/%3E%3C/svg%3E"); } .rg-icon--bow { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2.2C14 7 14 17 7 21.8l-1.3-1.4C11.4 16 11.4 8 5.7 3.6z'/%3E%3Crect x='5.2' y='2.6' width='1.3' height='18.8' rx='.65'/%3E%3Crect x='8' y='11.2' width='9.5' height='1.6'/%3E%3Cpath d='M21.8 12l-4.6-2.6v5.2z'/%3E%3C/svg%3E"); } .rg-icon--staff { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10.8' y='8.5' width='2.6' height='14' rx='1.2'/%3E%3Ccircle cx='12' cy='5.4' r='3.6'/%3E%3Cpath d='M12 .4l1.1 2.1L12 4.6l-1.1-2.1z'/%3E%3C/svg%3E"); } .rg-icon--shield { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.8l7.8 2.9v6.1c0 5.5-3.3 9.4-7.8 11.4-4.5-2-7.8-5.9-7.8-11.4V4.7zM12 8l3 4-3 4-3-4z'/%3E%3C/svg%3E"); } .rg-icon--armor { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2.5L4.5 5l1.8 5H4.8v3.2L7 21.5h10l2.2-8.3V10h-1.5l1.8-5L16 2.5l-1.6 2.6h-4.8z'/%3E%3C/svg%3E"); } .rg-icon--boot { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 2h6v9l6.5 5.4V21h-13z'/%3E%3C/svg%3E"); } .rg-icon--potion { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 1.8h4v1.9h-.6v3a7 7 0 11-2.8 0v-3H10zm3.6 10.4a1.3 1.3 0 100 2.6 1.3 1.3 0 000-2.6z'/%3E%3C/svg%3E"); } .rg-icon--skull { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7.5 7.5 0 00-7.5 7.5c0 2.9 1.6 5.4 4 6.7v3.1A1.7 1.7 0 0010.2 21h3.6a1.7 1.7 0 001.7-1.7v-3.1c2.4-1.3 4-3.8 4-6.7A7.5 7.5 0 0012 2zM9.2 8.7a1.9 1.9 0 110 3.8 1.9 1.9 0 010-3.8zm5.6 0a1.9 1.9 0 110 3.8 1.9 1.9 0 010-3.8zM12 13.2l1.3 2.4h-2.6z'/%3E%3C/svg%3E"); } .rg-icon--coin { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5a9.5 9.5 0 110 19 9.5 9.5 0 010-19zm0 2.2a7.3 7.3 0 100 14.6 7.3 7.3 0 000-14.6zm0 2.5L16 12l-4 4.8L8 12z'/%3E%3C/svg%3E"); } .rg-icon--tree { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l5.6 6.7h-3l4.4 5.8h-3.6l3.2 4.8H5.4l3.2-4.8H5l4.4-5.8h-3z'/%3E%3Crect x='10.7' y='18.5' width='2.6' height='4'/%3E%3C/svg%3E"); } .rg-icon--meat { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 2.2a7 7 0 00-9.6 9.6l1.9 1.9 7.7-7.7zM8.6 15.2l7.7-7.7 1.4 1.4-7.7 7.7z'/%3E%3Ccircle cx='19' cy='17.5' r='2.4'/%3E%3Ccircle cx='16.5' cy='20' r='2.4'/%3E%3Cpath d='M15.5 14.5l3 3-2.5 2.5-3-3z'/%3E%3C/svg%3E"); } .rg-icon--star { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l2.5 7.9 7.9 2.5-7.9 2.5L12 22.4l-2.5-7.9L1.6 12l7.9-2.5z'/%3E%3C/svg%3E"); } .rg-icon--hourglass { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 2h13v4.2L13.6 12l4.9 5.8V22h-13v-4.2L10.4 12 5.5 6.2z'/%3E%3C/svg%3E"); } .rg-icon--book { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 4.6C10 3 7 3 4 4.4V20c3-1.4 6-1.4 8 .2 2-1.6 5-1.6 8-.2V4.4c-3-1.4-6-1.4-8 .2zm-.9 2.2v11.4M12.9 6.8v11.4'/%3E%3C/svg%3E"); } .rg-icon--plus { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 2.8h5.2v6.6h6.6v5.2h-6.6v6.6H9.4v-6.6H2.8V9.4h6.6z'/%3E%3C/svg%3E"); } .rg-icon--gem { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.2L19.8 9 12 21.8 4.2 9zm0 3L8.6 8.8h6.8z'/%3E%3C/svg%3E"); } .rg-icon--fist { --rg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8.5h3v-4h2.6v4h.8v-5h2.6v5h.8v-4h2.6v6.8l-1.6 6.4H8.4L6 13.5z'/%3E%3Cpath d='M8.4 18.7h8.4V22H8.4z'/%3E%3C/svg%3E"); } /* ============================ 14. UTILITIES =============================== */ .rg-row { display: flex; align-items: center; } .rg-col { display: flex; flex-direction: column; } .rg-wrap { flex-wrap: wrap; } .rg-grow { flex: 1; min-width: 0; } .rg-center { justify-content: center; } .rg-between { justify-content: space-between; } .rg-gap-1 { gap: var(--rg-sp-1); } .rg-gap-2 { gap: var(--rg-sp-2); } .rg-gap-3 { gap: var(--rg-sp-3); } .rg-gap-4 { gap: var(--rg-sp-4); } .rg-gap-5 { gap: var(--rg-sp-5); } /* ========================== 15. MOTION & A11Y ============================= */ @media (prefers-reduced-motion: reduce) { .rg-app *, .rg-app *::before, .rg-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }