/* ========================================================================== solo.mineshop.eu — redesign v1 (mockup) Colours: exactly the SoloBlocks.io palette (Mareks, 2026-09-29). light = mineshop.eu: white / green #00a73d / black dark = black #0d1117 + green #22c55e Only colours differ between the themes; fonts, sizes and layout are the same. Fonts (self-hosted): Bebas Neue (titles), Inter (text + numbers), JetBrains Mono (codes, addresses). Safari-safe: no aspect-ratio, no inset shorthand, no color-mix. preserve-3d only on the block cubes (never near video). ========================================================================== */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bebas-neue-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bebas-neue-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- tokens ---------- */ :root { --maxw: 1240px; --gut: 24px; --r: 16px; --r-lg: 22px; --f-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease: cubic-bezier(.2, .7, .2, 1); /* LIGHT (mineshop.eu) */ --bg: #fbfbfb; --s1: #ffffff; --s2: #f3f3f5; --s3: #e9eaee; --border: #e5e7eb; --border2: #d1d5db; --text: #111827; --text2: #374151; --muted: #6b7280; --muted2: #9ca3af; --accent: #00a73d; --accent-h: #008a32; --accent-2: #4caf53; --accent-rgb: 0, 167, 61; --on-accent: #ffffff; --ok: #15803d; --info: #2563eb; --bad: #dc2626; --warn: #ca8a04; --header-bg: rgba(255, 255, 255, .92); --band: #ffffff; --grid-line: rgba(17, 24, 39, .07); --sh-1: 0 1px 2px rgba(16, 24, 40, .05); --sh-2: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -14px rgba(16, 24, 40, .16); --sh-3: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 60px -20px rgba(16, 24, 40, .24); --glow: .16; --sticker-a: .18; /* the green block (hero, next block) */ --cube-top1: #5ee08f; --cube-top2: #2cc865; --cube-l1: #00b443; --cube-l2: #009a38; --cube-r1: #008a32; --cube-r2: #006f28; --cube-edge: rgba(255, 255, 255, .7); --cube-glow: rgba(0, 167, 61, .30); /* found blocks (neutral) */ --nb-top: #ffffff; --nb-l: #eceef2; --nb-r: #dde1e7; --nb-edge: #c9ced6; --stage-a: #eaf8ef; --stage-b: #ffffff; /* 3D block cubes */ --c3-face: #ffffff; --c3-face2: #e6f3ec; --c3-top: #f3fbf6; --c3-edge: rgba(0, 167, 61, .6); --c3-sh: .16; --c3-shade: #14532d; --c3-line: rgba(0, 167, 61, .68); --c3-grid: rgba(0, 167, 61, .08); --c3-inner: rgba(0, 167, 61, .10); --c3-outer: rgba(0, 167, 61, .18); --c3-lbl: #0a7a32; --c3-txt: rgba(0, 167, 61, 0); --c3-scan: .32; color-scheme: light; } html[data-theme="dark"] { --bg: #0d1117; --s1: #161b22; --s2: #21262d; --s3: #2d333b; --border: #30363d; --border2: #444c56; --text: #e6edf3; --text2: #c9d1d9; --muted: #8b949e; --muted2: #6e7681; --accent: #22c55e; --accent-h: #16a34a; --accent-2: #4ade80; --accent-rgb: 34, 197, 94; --on-accent: #06140b; --ok: #3fb950; --info: #58a6ff; --bad: #f85149; --warn: #d29922; --header-bg: rgba(13, 17, 23, .97); --band: #11161d; --grid-line: rgba(255, 255, 255, .055); --sh-1: none; --sh-2: 0 12px 32px -14px rgba(0, 0, 0, .7); --sh-3: 0 24px 60px -20px rgba(0, 0, 0, .8); --glow: .22; --sticker-a: .24; --cube-top1: #4ade80; --cube-top2: #22c55e; --cube-l1: #16a34a; --cube-l2: #12883d; --cube-r1: #0f6f32; --cube-r2: #0b5426; --cube-edge: rgba(190, 255, 214, .85); --cube-glow: rgba(34, 197, 94, .38); --nb-top: #2d333b; --nb-l: #21262d; --nb-r: #181d24; --nb-edge: #444c56; --stage-a: #0f2a1a; --stage-b: #161b22; --c3-face: #0f1d18; --c3-face2: #08110e; --c3-top: #14281f; --c3-edge: rgba(52, 230, 120, .6); --c3-sh: .6; --c3-shade: #000000; --c3-line: rgba(52, 230, 120, .7); --c3-grid: rgba(52, 230, 120, .07); --c3-inner: rgba(34, 197, 94, .16); --c3-outer: rgba(34, 197, 94, .24); --c3-lbl: #6ee7a0; --c3-txt: rgba(34, 197, 94, .6); color-scheme: dark; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-h); } b, strong { font-weight: 700; } h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; } ol, ul { list-style: none; } button, input { font: inherit; color: inherit; } button { cursor: pointer; } code, .mono { font-family: var(--f-mono); } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--s1); color: var(--text); padding: 8px 12px; border-radius: 8px; } .skip:focus { left: 8px; } .anchor-alias { position: absolute; margin-top: -76px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; } .btn-lg { height: 50px; padding: 0 22px; font-size: 16px; border-radius: 12px; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px -8px rgba(var(--accent-rgb), .7); } .btn-primary:hover { background: var(--accent-h); color: var(--on-accent); transform: translateY(-1px); } html[data-theme="dark"] .btn-primary:hover { background: var(--accent-2); } .btn-ghost { background: var(--s1); color: var(--text); border-color: var(--border2); } .btn-ghost:hover { color: var(--text); border-color: var(--accent); background: var(--s2); } .btn .tg { width: 18px; height: 18px; fill: #229ed9; } .icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--s1); color: var(--text2); transition: border-color .18s, color .18s; } .icon-btn:hover { border-color: var(--accent); color: var(--text); } .icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-btn .i-moon { fill: currentColor; stroke: none; } html[data-theme="dark"] .i-moon, html:not([data-theme="dark"]) .i-sun { display: none; } .copy { flex: none; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); color: var(--accent); font: 700 12px/1 var(--f-body); transition: background .18s, color .18s; } .copy:hover { background: var(--accent); color: var(--on-accent); } .copy.done { background: var(--accent); color: var(--on-accent); } /* ---------- header ---------- */ .hdr { position: sticky; top: 0; z-index: 60; background: var(--header-bg); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--border); } .hdr-in { max-width: 1440px; margin: 0 auto; height: 60px; padding: 0 var(--gut); display: flex; align-items: center; gap: 18px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--text); flex: none; } .logo:hover { color: var(--text); } .logo-pic { display: contents; } .logo-pic source { display: none; } .logo-mark { width: 34px; height: 34px; display: block; flex: none; } .logo-txt { display: flex; flex-direction: column; line-height: 1; } .logo-name { font: 700 21px/1 var(--f-display); letter-spacing: 2px; } .logo-name b { font-weight: inherit; color: var(--accent); } .logo-sub { font: 700 9px/1 var(--f-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; } .nav a { color: var(--text2); font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: .2px; padding: 7px 12px; border-radius: 8px; white-space: nowrap; transition: background .15s, color .15s; } .nav a:hover, .nav a.on { background: var(--s2); color: var(--text); } .nav a.on { box-shadow: inset 0 -2px 0 var(--accent); } .ext::after { content: '\2197'; font-size: .78em; margin-left: 3px; opacity: .6; } .hdr-right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; } .nav + .hdr-right { margin-left: 0; } .cta-short { display: none; } .menu-btn { display: none; } @media (min-width: 1181px) { .hdr .icon-btn { width: 32px; height: 32px; border-radius: 8px; } .hdr .icon-btn svg { width: 16px; height: 16px; } .hdr .hdr-cta { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 8px; } } /* phone/tablet menu sheet */ .sheet { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 59; background: var(--bg); overflow-y: auto; padding: 18px var(--gut) 32px; animation: sheetIn .22s var(--ease); } @keyframes sheetIn { from { opacity: 0; transform: translateY(-8px); } } .sheet-lbl { display: block; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .sheet-look { margin-bottom: 14px; } .sheet-nav { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .sheet-nav a { color: var(--text); font-size: 18px; font-weight: 600; padding: 14px 2px; border-bottom: 1px solid var(--border); } .sheet-cta { width: 100%; margin-top: 20px; } body.sheet-open { overflow: hidden; } /* ---------- lookup ---------- */ .look-row { display: flex; gap: 8px; } .look-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border2); background: var(--s1); color: var(--text); font: 500 14px/1 var(--f-mono); outline: none; transition: border-color .18s, box-shadow .18s; } .look-row input::placeholder { color: var(--muted2); } .look-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .look-row .btn { height: 44px; } .look-err { min-height: 18px; margin-top: 6px; font: 600 12px/1.4 var(--f-body); color: var(--bad); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 1000px 760px at calc(50% + 280px) 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 1000px 760px at calc(50% + 280px) 30%, #000 20%, transparent 75%); } .hero::after { content: ''; position: absolute; width: 900px; height: 900px; left: calc(50% - 60px); top: -380px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--accent-rgb), var(--glow)), transparent 62%); } .hero-in { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gut) 28px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; } .prize-chip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .07); color: var(--text2); font-size: 13.5px; font-weight: 500; transition: border-color .18s, background .18s; } .prize-chip:hover { color: var(--text); border-color: var(--accent); background: rgba(var(--accent-rgb), .12); } .prize-chip b { color: var(--text); } .prize-chip-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); flex: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); animation: ping 2.4s var(--ease) infinite; } .prize-chip-ico svg { width: 16px; height: 16px; fill: none; stroke: var(--on-accent); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; } @keyframes ping { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35); } 60% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); } } .prize-chip-go { color: var(--accent); font-weight: 700; } .hero-title { font: 400 clamp(56px, 6vw, 88px)/.9 var(--f-display); letter-spacing: .5px; margin: 20px 0 18px; color: var(--text); } .hero-title .acc { color: var(--accent); position: relative; } .hero-sub { font-size: 18.5px; line-height: 1.55; color: var(--text2); max-width: 560px; } .mark { color: var(--text); background: linear-gradient(transparent 62%, rgba(var(--accent-rgb), .22) 62%); padding: 0 2px; } .hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .stratum { margin-top: 22px; max-width: 520px; } .stratum-lbl { display: block; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .stratum-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px dashed rgba(var(--accent-rgb), .55); border-radius: 12px; background: var(--s1); box-shadow: var(--sh-1); } .stratum-url { flex: 1; min-width: 0; font: 600 15px/1.4 var(--f-mono); color: var(--text); overflow-wrap: break-word; } .stratum-hint { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); } .stratum-hint code { color: var(--text); font-weight: 700; } .hero-stats { display: flex; gap: 0; margin-top: 30px; } .hero-stats > div { padding: 0 26px; border-left: 1px solid var(--border); } .hero-stats > div:first-child { padding-left: 0; border-left: 0; } .hero-stats dd { font: 700 30px/1.1 var(--f-body); letter-spacing: -.02em; color: var(--text); } .hero-stats dt { order: 2; font: 600 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .hero-stats > div { display: flex; flex-direction: column-reverse; } /* hero visual: the next block */ .hero-vis { position: relative; height: 560px; } .hero-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .cube-wrap { position: absolute; left: 50%; top: 47%; width: 400px; height: 460px; margin: -230px 0 0 -200px; animation: float 7s ease-in-out infinite; } .cube-wrap svg { width: 100%; height: 100%; overflow: visible; } @keyframes float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } } .cube-wrap .cube { filter: drop-shadow(0 34px 38px var(--cube-glow)); } .cube-wrap .face-txt { font-family: var(--f-display); fill: #fff; } .cube-wrap .face-k { font: 700 6.5px var(--f-mono); letter-spacing: .14em; fill: rgba(255, 255, 255, .82); } .cube-wrap .face-s { font: 600 6px var(--f-mono); letter-spacing: .08em; fill: rgba(255, 255, 255, .85); } .cube-wrap .cell { fill: rgba(255, 255, 255, .0); transition: fill .5s; } .cube-wrap .cell.hot { fill: rgba(255, 255, 255, .6); transition: fill .06s; } .cube-wrap .core { fill: rgba(255, 255, 255, .9); animation: core 2.4s ease-in-out infinite; } @keyframes core { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .cube-wrap .gridline { stroke: rgba(255, 255, 255, .28); stroke-width: .5; } .cube-wrap .ripple { fill: none; stroke: rgba(var(--accent-rgb), .55); stroke-width: 1; transform-origin: 0 118px; animation: ripple 4.2s var(--ease) infinite; opacity: 0; } .cube-wrap .ripple:nth-of-type(2) { animation-delay: 1.4s; } .cube-wrap .ripple:nth-of-type(3) { animation-delay: 2.8s; } @keyframes ripple { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .cube-wrap .shadow { fill: rgba(var(--accent-rgb), .22); } .hunt { position: absolute; top: 20px; right: 4%; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-2); font-size: 13px; color: var(--text2); z-index: 2; } .hunt b { color: var(--text); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); animation: live 1.8s ease-out infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 100% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); } } .hr-card { position: absolute; left: 2%; bottom: 26px; width: 250px; padding: 14px 16px 12px; border-radius: 16px; background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-3); z-index: 2; } .hr-top { display: flex; align-items: center; justify-content: space-between; } .hr-lbl { font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: live 1.8s ease-out infinite; } .hr-val { font: 800 38px/1.1 var(--f-body); letter-spacing: -.03em; margin-top: 6px; color: var(--text); } .hr-val small { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0; } .spark { width: 100%; height: 44px; margin-top: 6px; overflow: visible; } .spark .sl { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .spark .sa { fill: rgba(var(--accent-rgb), .12); } .spark .se { fill: var(--accent); stroke: var(--s1); stroke-width: 2; } .hr-foot { font-size: 11.5px; color: var(--muted); margin-top: 6px; } /* hero lookup */ .look-wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 40px; } .lookup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: center; padding: 18px 18px 14px 20px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-2); } .look-copy { display: flex; gap: 14px; align-items: flex-start; } .look-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .1); color: var(--accent); } .look-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .look-title { font-weight: 800; font-size: 17px; color: var(--text); line-height: 1.3; } .look-sub { font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; } .look-field { padding-top: 4px; } /* ---------- sections ---------- */ .sec { position: relative; padding: 88px 0; } .sec.band { background: var(--band); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .sec-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-bottom: 30px; flex-wrap: wrap; } .kicker { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .kicker::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); transform: rotate(45deg) scale(.8); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); } .sec-title { font: 400 clamp(40px, 4.6vw, 60px)/.95 var(--f-display); letter-spacing: .6px; color: var(--text); } .sec-sub { margin-top: 10px; color: var(--muted); font-size: 16.5px; max-width: 660px; } .live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .06); color: var(--text2); font: 600 12px/1 var(--f-mono); letter-spacing: .04em; white-space: nowrap; } .live-pill.sm { padding: 5px 9px; font-size: 11px; } .card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-1); } .card-title { font: 700 17px/1.3 var(--f-body); color: var(--text); letter-spacing: -.01em; } .card-sub { font-size: 14px; color: var(--muted); margin-top: 4px; } .card-sub b { color: var(--text); } .loading, .empty { color: var(--muted); font-size: 14px; padding: 12px 0; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- sticker cards (SoloBlocks style) ---------- */ .tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .sticker { --sc: var(--accent); --sc-rgb: var(--accent-rgb); position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); padding: 18px 18px 22px; min-height: 150px; background: radial-gradient(circle at 100% 0%, rgba(var(--sc-rgb), var(--sticker-a)), transparent 60%), var(--s1); box-shadow: var(--sh-1); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; } .sticker::after { content: ''; position: absolute; left: 18px; bottom: 0; width: 34px; height: 3px; border-radius: 3px 3px 0 0; background: var(--sc); transition: width .35s var(--ease); } .sticker:hover { border-color: rgba(var(--sc-rgb), .5); transform: translateY(-2px); box-shadow: var(--sh-2); } .sticker:hover::after { width: calc(100% - 36px); } .sticker .ico { position: absolute; top: -8px; right: -7px; width: 50px; height: 50px; transform: rotate(-14deg); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25)); transition: transform .35s var(--ease); pointer-events: none; } .sticker:hover .ico { transform: rotate(0deg) scale(1.08) translate(-3px, 3px); } .sticker .lbl { position: relative; font: 600 13.5px/1.3 var(--f-body); color: var(--muted); padding-right: 50px; } @media (min-width: 1241px) { .tiles .sticker .lbl { min-height: 2.6em; } .tiles .sticker .val { margin-top: 14px; } } .sticker .val { position: relative; margin-top: 30px; font: 800 29px/1.1 var(--f-body); letter-spacing: -.025em; color: var(--text); white-space: nowrap; } .sticker .val small { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 2px; } .sticker .meta { position: relative; margin-top: 6px; font-size: 13px; color: var(--muted); } .sticker .meta span { color: var(--text2); font-weight: 600; } .sticker.sm { min-height: 0; padding: 16px 16px 20px; } .sticker.sm .ico { width: 42px; height: 42px; } .sticker.sm .val { margin-top: 16px; font-size: 22px; white-space: normal; } /* ---------- charts ---------- */ .charts { margin-top: 44px; } .filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .filter-lbl { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--s2); border: 1px solid var(--border); } .seg button { border: 0; background: transparent; color: var(--muted); font: 700 13px/1 var(--f-body); padding: 8px 13px; border-radius: 8px; transition: background .15s, color .15s; } .seg button:hover { color: var(--text); } .seg button.on { background: var(--s1); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 0 0 1px var(--border); } html[data-theme="dark"] .seg button.on { background: var(--s3); box-shadow: none; } .seg-sm button { padding: 6px 10px; font-size: 12px; } .chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .chart-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 16px 10px; box-shadow: var(--sh-1); } .chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; } .chart-title { font-weight: 700; font-size: 15px; color: var(--text); margin-right: auto; } .chart-now b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .chart-now .u { font-size: 12.5px; color: var(--muted); } .chart-avg { flex-basis: 100%; font-size: 12.5px; color: var(--muted); } .chart-box { position: relative; height: 240px; } .chart-box.dim { opacity: .55; transition: opacity .2s; } /* folds (details) */ .fold { border: 1px solid var(--border); border-radius: 12px; background: var(--s1); } .fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 700; font-size: 15px; color: var(--text); } .fold > summary::-webkit-details-marker { display: none; } .fold > summary i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--s2); position: relative; transition: transform .3s var(--ease), background .2s; } .fold > summary i::before, .fold > summary i::after { content: ''; position: absolute; left: 6px; top: 10px; width: 10px; height: 2px; border-radius: 2px; background: var(--text2); } .fold > summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); } .fold[open] > summary i { background: rgba(var(--accent-rgb), .14); } .fold[open] > summary i::after { transform: rotate(0deg); } .fold > summary:hover i { background: rgba(var(--accent-rgb), .14); } .fold-body { padding: 0 16px 16px; color: var(--text2); font-size: 15px; } .fold-body p + p { margin-top: 8px; } .fold-table { margin-top: 14px; } .tbl-scroll { overflow-x: auto; max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; } .tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .tbl th, .tbl td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } .tbl th:first-child, .tbl td:first-child { text-align: left; } .tbl th { position: sticky; top: 0; background: var(--s2); color: var(--muted); font-weight: 700; font-size: 12px; } .tbl td { color: var(--text2); } /* ---------- blocks: spinning 3D cubes ---------- The only preserve-3d on the page (no video anywhere near it). Nothing on .c3 may set overflow, opacity, filter or mask: any of those flattens the cube in Safari/Chrome. */ .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 7px; } .legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .lg-found { background: var(--c3-face); border: 1.5px solid var(--c3-edge); } .lg-next { background: var(--accent); } .chain-wrap { position: relative; margin: 0 -8px; } .chain-wrap.scrolls { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 14px), transparent); } .chain-wrap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; background: radial-gradient(rgba(var(--accent-rgb), .3) 1px, transparent 1.5px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 45%, #000, transparent); mask-image: radial-gradient(ellipse 55% 70% at 50% 45%, #000, transparent); } .chain { position: relative; --c3: 150px; display: flex; align-items: flex-start; justify-content: center; overflow-x: auto; padding: 6px 8px 14px; scroll-snap-type: x proximity; scroll-padding-left: 8px; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .b3 { flex: 0 0 196px; display: flex; flex-direction: column; align-items: center; scroll-snap-align: start; cursor: pointer; border-radius: 14px; outline-offset: 4px; } .b3-tag { font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .b3.next .b3-tag { color: var(--accent); } .b3-tag::before { content: '['; color: var(--accent); opacity: .75; } .b3-tag::after { content: ']'; color: var(--accent); opacity: .75; } .b3-h { font: 400 28px/1 var(--f-display); letter-spacing: .6px; color: var(--text); text-shadow: 0 0 16px var(--c3-txt); } .b3-pool { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b3.next .b3-pool { color: var(--accent); } .c3-stage { position: relative; width: var(--c3); height: var(--c3); margin: 40px 0 42px; perspective: 760px; -webkit-perspective: 760px; } /* hologram pad under each cube: a glowing disc with a spinning tick ring and a counter-spinning dashed ring, tilted flat onto the floor */ .c3-shadow { position: absolute; left: 50%; width: calc(var(--c3) * 1.38); height: calc(var(--c3) * 1.38); margin-left: calc(var(--c3) * -.69); top: calc(100% - var(--c3) * .69 + 8px); border-radius: 50%; pointer-events: none; border: 1px solid rgba(var(--accent-rgb), .5); transform: rotateX(74deg); -webkit-transform: rotateX(74deg); background: radial-gradient(closest-side, rgba(0, 0, 0, var(--c3-sh)), transparent 58%), radial-gradient(closest-side, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .07) 64%, transparent 72%); box-shadow: 0 0 18px rgba(var(--accent-rgb), .32), inset 0 0 16px rgba(var(--accent-rgb), .24); } .c3-shadow::before, .c3-shadow::after { content: ''; position: absolute; border-radius: 50%; } .c3-shadow::before { left: 7%; top: 7%; right: 7%; bottom: 7%; background: repeating-conic-gradient(rgba(var(--accent-rgb), .9) 0deg 1.4deg, transparent 1.4deg 11.25deg); -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%); mask: radial-gradient(closest-side, transparent 90%, #000 91%); animation: c3orbit 16s linear infinite; } .c3-shadow::after { left: 24%; top: 24%; right: 24%; bottom: 24%; border: 1px dashed rgba(var(--accent-rgb), .65); animation: c3orbit 10s linear infinite reverse; } @keyframes c3orbit { to { transform: rotate(360deg); } } .b3.next .c3-shadow { border-color: rgba(var(--accent-rgb), .85); box-shadow: 0 0 30px rgba(var(--accent-rgb), .6), inset 0 0 24px rgba(var(--accent-rgb), .4); } .c3 { position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-28deg); } /* hover / tap: solo.js spins the cube faster; the block lifts and its edges light up */ .c3-stage { transition: transform .45s var(--ease); } .b3.fast .c3-stage { transform: translateY(-8px); } .c3 .f { transition: border-color .3s, box-shadow .3s; } .b3.fast .c3-found .f { --c3-line: rgba(var(--accent-rgb), 1); box-shadow: 0 0 24px rgba(var(--accent-rgb), .55), inset 0 0 28px rgba(var(--accent-rgb), .3); } .b3.fast .b3-h { color: var(--accent); } .c3 .f { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px; text-align: center; /* glass faces: HUD corner brackets, a faint tech grid, then the tinted glass */ background: linear-gradient(var(--c3-line), var(--c3-line)) left 6px top 6px / 13px 1.5px no-repeat, linear-gradient(var(--c3-line), var(--c3-line)) left 6px top 6px / 1.5px 13px no-repeat, linear-gradient(var(--c3-line), var(--c3-line)) right 6px top 6px / 13px 1.5px no-repeat, linear-gradient(var(--c3-line), var(--c3-line)) right 6px top 6px / 1.5px 13px no-repeat, linear-gradient(var(--c3-line), var(--c3-line)) left 6px bottom 6px / 13px 1.5px no-repeat, linear-gradient(var(--c3-line), var(--c3-line)) left 6px bottom 6px / 1.5px 13px no-repeat, linear-gradient(var(--c3-line), var(--c3-line)) right 6px bottom 6px / 13px 1.5px no-repeat, linear-gradient(var(--c3-line), var(--c3-line)) right 6px bottom 6px / 1.5px 13px no-repeat, repeating-linear-gradient(0deg, var(--c3-grid) 0 1px, transparent 1px 15px), repeating-linear-gradient(90deg, var(--c3-grid) 0 1px, transparent 1px 15px), linear-gradient(160deg, var(--fa, var(--c3-face)), var(--fb, var(--c3-face2))); border: 1px solid var(--c3-line); box-shadow: inset 0 0 24px var(--c3-inner), 0 0 14px var(--c3-outer); color: var(--text); font-size: 11.5px; line-height: 1.35; } .c3 .fr { transform: translateZ(calc(var(--c3) / 2)); } .c3 .ri { transform: rotateY(90deg) translateZ(calc(var(--c3) / 2)); } .c3 .ba { transform: rotateY(180deg) translateZ(calc(var(--c3) / 2)); } .c3 .le { transform: rotateY(-90deg) translateZ(calc(var(--c3) / 2)); } .c3 .to { transform: rotateX(90deg) translateZ(calc(var(--c3) / 2)); --fa: var(--c3-top); --fb: var(--c3-top); } .c3 .bo { transform: rotateX(-90deg) translateZ(calc(var(--c3) / 2)); --fa: var(--c3-face2); --fb: var(--c3-face2); } /* a scan beam sweeps down each face of the found blocks; every cube and face has its own phase (--ph from solo.js, --fd per face) */ .c3 .fr { --fd: 0s; } .c3 .ri { --fd: -1.5s; } .c3 .ba { --fd: -3s; } .c3 .le { --fd: -4.5s; } .c3-found .f::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 36%; pointer-events: none; z-index: 1; transform: translateY(-110%); background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .10) 60%, rgba(var(--accent-rgb), var(--c3-scan, .55)) 97%, transparent); animation: c3scan 6s linear infinite; animation-delay: calc(var(--ph, 0s) + var(--fd, 0s)); } @keyframes c3scan { 0% { transform: translateY(-110%); } 50%, 100% { transform: translateY(300%); } } /* light from the front left: solo.js sets --sh on each side face from the angle it faces */ .c3 .fr::after, .c3 .ri::after, .c3 .ba::after, .c3 .le::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--c3-shade); opacity: var(--sh, .1); pointer-events: none; } .c3 .fk { font: 700 8.5px/1.2 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c3-lbl); margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; } .c3 .fk::before { content: ''; width: 4px; height: 4px; flex: none; background: currentColor; box-shadow: 0 0 6px currentColor; } .c3 .fk:first-child { margin-top: 0; } .c3 .fh { font: 400 27px/1.05 var(--f-display); letter-spacing: .5px; color: var(--text); font-weight: 400; text-shadow: 0 0 14px var(--c3-txt); } .c3 .fh-sm { font-size: 21px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c3 .fm { color: var(--muted); font-variant-numeric: tabular-nums; } .c3 .fm b { color: var(--text); font-weight: 700; } .c3 .fpool { margin-top: 5px; max-width: 100%; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--c3-line); background: rgba(var(--accent-rgb), .1); font: 700 10px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text2); } .c3 .fhash { font: 500 10px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--text2); word-break: break-all; } .c3 .fwin { margin-top: 4px; color: var(--accent); font-weight: 700; } /* the next block: solid green, white type */ .c3-next .f { --c3-line: rgba(255, 255, 255, .92); --c3-grid: rgba(255, 255, 255, .11); --c3-inner: rgba(255, 255, 255, .2); --c3-lbl: #fff; --fa: var(--cube-l1); --fb: var(--cube-l2); border-color: var(--cube-edge); color: #fff; } .c3-next .to { --fa: var(--cube-top1); --fb: var(--cube-top2); } .c3-next .fh { text-shadow: 0 0 16px rgba(255, 255, 255, .55); } .c3-next .fk { color: rgba(255, 255, 255, .78); } .c3-next .fh, .c3-next .fm b, .c3-next .fhash { color: #fff; } .c3-next .fm { color: rgba(255, 255, 255, .88); } .c3-next .fwin { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .c3-next .fr::after, .c3-next .ri::after, .c3-next .ba::after, .c3-next .le::after { background: #02240d; } /* the next block is the eye-catcher: glowing edges, a shine sweeping over it, a rolling nonce, a pulsing halo, sonar rings on the ground and shares streaming up into it */ .c3-next .f { box-shadow: 0 0 26px rgba(var(--accent-rgb), .5), inset 0 0 20px rgba(255, 255, 255, .16); overflow: hidden; } .c3-next .f::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); background-size: 320% 100%; background-position: 130% 0; animation: c3shine 3.6s ease-in-out infinite; } .c3-next .ri::before { animation-delay: .25s; } .c3-next .ba::before { animation-delay: .5s; } .c3-next .le::before { animation-delay: .75s; } .c3-next .to::before { animation-delay: .1s; } @keyframes c3shine { 0%, 45% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } } .c3 .fnonce { margin-top: 6px; padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .28); font: 600 10px/1.5 var(--f-mono); color: rgba(255, 255, 255, .8); letter-spacing: .02em; white-space: nowrap; } .c3 .fnonce b { color: #fff; font-weight: 700; } .c3-halo { position: absolute; left: -45%; top: -45%; width: 190%; height: 190%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .12) 55%, transparent); animation: c3halo 2.6s ease-in-out infinite; } @keyframes c3halo { 0%, 100% { transform: scale(.86); opacity: .65; } 50% { transform: scale(1.06); opacity: 1; } } .c3-ring { position: absolute; left: 50%; bottom: -44px; width: 230px; height: 58px; margin-left: -115px; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .7); pointer-events: none; opacity: 0; animation: c3ring 2.8s ease-out infinite; } .c3-ring.r2 { animation-delay: 1.4s; } @keyframes c3ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } } .c3-p { position: absolute; left: var(--x); bottom: -30px; width: var(--s); height: var(--s); border-radius: 2px; background: #bbf7d0; box-shadow: 0 0 6px 1px rgba(var(--accent-rgb), .95), 0 0 16px rgba(var(--accent-rgb), .6); pointer-events: none; opacity: 0; animation: c3rise 3s cubic-bezier(.3, .1, .6, 1) infinite; animation-delay: var(--d); } @keyframes c3rise { 0% { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(calc(var(--h) * -1)) rotate(220deg) scale(1); opacity: 0; } } .c3-beam { position: absolute; left: 12%; width: 76%; bottom: -34px; height: 260px; pointer-events: none; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: linear-gradient(0deg, transparent, rgba(var(--accent-rgb), .42) 16%, rgba(var(--accent-rgb), .14) 50%, transparent); animation: c3beam 2.8s ease-in-out infinite; } @keyframes c3beam { 0%, 100% { opacity: .55; transform: scaleX(.9); } 50% { opacity: 1; transform: scaleX(1.06); } } .blk-link { flex: 0 0 20px; align-self: flex-start; margin-top: calc(50px + var(--c3) / 2); height: 2px; position: relative; background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .6) 0 3px, transparent 3px 7px); } .blk-link::after { content: ''; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: hop 2.2s linear infinite; opacity: .9; box-shadow: 0 0 8px var(--accent); } /* the link into the next block carries a live flow */ .blk-link.to-next { flex-basis: 26px; height: 3px; background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .95) 0 7px, transparent 7px 12px); background-size: 24px 3px; box-shadow: 0 0 10px rgba(var(--accent-rgb), .55); animation: c3flow .5s linear infinite; } .blk-link.to-next::after { width: 8px; height: 8px; top: -2.5px; box-shadow: 0 0 10px var(--accent); animation-duration: .9s; } @keyframes c3flow { to { background-position: 24px 0; } } @keyframes hop { from { left: -3px; } to { left: calc(100% - 3px); } } .mining { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: live 1.2s ease-out infinite; } /* ---------- network grid: difficulty + fees ---------- */ .net-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 40px; } .diff-card { padding: 22px 22px 18px; } .diff-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .diff-delta { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: right; } .dd-arrow { grid-row: 1; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; } .dd-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .dd-val { grid-row: 1; font: 800 34px/1 var(--f-body); letter-spacing: -.03em; color: var(--text); } .dd-lbl { grid-column: 1 / 3; font-size: 12.5px; color: var(--muted); margin-top: 4px; } .diff-delta.up .dd-arrow { color: var(--warn); background: rgba(202, 138, 4, .12); } .diff-delta.down .dd-arrow { color: var(--ok); background: rgba(var(--accent-rgb), .12); } .epoch { margin-top: 18px; } .epoch-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; gap: 12px; } .epoch-head b { color: var(--text); } .epoch-pct { font: 800 20px/1 var(--f-body); color: var(--text); letter-spacing: -.02em; } .epoch-grid-wrap { position: relative; } #epochGrid { width: 100%; height: 150px; } .tip { position: absolute; z-index: 5; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; padding: 6px 9px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -100%); margin-top: -10px; box-shadow: var(--sh-2); } .epoch-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .epoch-legend span { display: inline-flex; align-items: center; gap: 6px; } .epoch-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .e-done { background: var(--accent); } .e-now { background: var(--s1); box-shadow: 0 0 0 2px var(--accent); } .e-left { background: rgba(var(--accent-rgb), .16); } .diff-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .diff-stats > div { padding: 12px; border-radius: 12px; background: var(--s2); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .diff-stats .k { font-size: 12px; color: var(--muted); font-weight: 600; } .diff-stats .v { font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -.01em; } .diff-stats .s { font-size: 11.5px; color: var(--muted); } .verdict { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: var(--text2); border: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; } .verdict b { color: var(--text); } .verdict i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; } .verdict.up i { background: var(--warn); } .verdict.down i { background: var(--ok); } .verdict small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; } .fee-card { padding: 22px; display: flex; flex-direction: column; } .fees { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .fees li { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--s2); font-size: 14px; color: var(--muted); } .fees .v { color: var(--muted); font-size: 13px; } .fees .v b { color: var(--text); font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-right: 3px; } .fees li.hot .v b { color: var(--bad); } .fee-note { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--muted); } /* ---------- connect ---------- */ .connect { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: start; } .steps { display: flex; flex-direction: column; gap: 12px; } .step { border-radius: var(--r); background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-1); transition: border-color .2s, box-shadow .2s; } .step[open] { border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--sh-2); } .step > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r); } .step > summary::-webkit-details-marker { display: none; } .step-n { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 400 24px/1 var(--f-display); background: linear-gradient(150deg, #4ade80, #00a73d 50%, #007a2c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 6px 14px -6px rgba(0, 167, 61, .8); } .step-t { display: flex; flex-direction: column; min-width: 0; } .step-t b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); line-height: 1.3; } .step-t small { font: 600 12.5px/1.4 var(--f-mono); color: var(--muted); margin-top: 2px; } .step[open] .step-t small { color: var(--accent); } .step > summary i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--s2); position: relative; transition: background .2s; } .step > summary i::before, .step > summary i::after { content: ''; position: absolute; left: 8px; top: 12px; width: 10px; height: 2px; border-radius: 2px; background: var(--text2); } .step > summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); } .step[open] > summary i { background: rgba(var(--accent-rgb), .14); } .step[open] > summary i::after { transform: rotate(0deg); } .step > summary:hover i { background: rgba(var(--accent-rgb), .14); } .step-body { padding: 0 18px 18px 72px; } .step-body p { color: var(--text2); font-size: 15px; } .step-body p + p { margin-top: 8px; } .step-body .field + p { margin-top: 10px; } .step-body p.small { font-size: 13.5px; color: var(--muted); } .field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; margin-top: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--s2); border: 1px solid var(--border); } .field .f-lbl { grid-column: 1 / -1; } .f-lbl { font: 700 10.5px/1.25 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .field code { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: break-word; line-height: 1.4; min-width: 0; } .field code.ph { color: var(--accent); } .field.nocopy { grid-template-columns: minmax(0, 1fr); } .chip-code { font-size: 12.5px; padding: 2px 7px; border-radius: 6px; background: var(--s2); color: var(--text); border: 1px solid var(--border); } .setup { padding: 20px; position: sticky; top: 84px; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .tabs button { border: 1px solid var(--border); background: var(--s1); color: var(--text2); font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 9px; transition: all .15s; } .tabs button:hover { border-color: var(--accent); color: var(--text); } .tabs button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .tab-panel { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; margin-top: 16px; align-items: start; } .tab-panel .dev { grid-column: 2; grid-row: 1; height: 118px; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 65%, rgba(var(--accent-rgb), .16), transparent 70%); } .tab-panel .howto { grid-column: 1; grid-row: 1; } .tab-panel.no-dev { grid-template-columns: minmax(0, 1fr); } .setup-sub { margin-top: 4px; font-size: 13px; color: var(--muted); } .howto-alt { grid-column: 1 / -1; margin-top: 2px; padding: 10px 12px; border-radius: 10px; background: var(--s2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text2); line-height: 1.55; } .howto-alt code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--s1); border: 1px solid var(--border); overflow-wrap: anywhere; } .dev svg { width: 124px; height: 96px; overflow: visible; filter: drop-shadow(0 10px 8px rgba(15, 23, 42, .22)); } .dev .dev-dark, html[data-theme="dark"] .dev .dev-light { display: none; } html[data-theme="dark"] .dev .dev-dark { display: block; } .dev3d .fan { animation: fan 5s linear infinite; transform-box: fill-box; transform-origin: center; } .dev:hover .dev3d .fan { animation-duration: .8s; } @keyframes fan { to { transform: rotate(360deg); } } .dev3d .heat { animation: heat 2.6s ease-in-out infinite; } .dev3d .heat path { stroke: var(--muted2); } @keyframes heat { 0%, 100% { opacity: .3; transform: translateY(1.5px); } 50% { opacity: 1; transform: translateY(-1.5px); } } .howto { counter-reset: h; display: flex; flex-direction: column; gap: 7px; } .howto li { counter-increment: h; position: relative; padding-left: 30px; font-size: 14.5px; color: var(--text2); line-height: 1.5; } .howto li::before { content: counter(h); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 700 11px/1 var(--f-mono); color: var(--accent); background: rgba(var(--accent-rgb), .1); } .howto code { font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: var(--s2); border: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere; } .pre { margin: 8px 0 0; padding: 12px; border-radius: 10px; background: var(--s2); color: #166534; font: 500 12.5px/1.55 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border); } html[data-theme="dark"] .pre { background: #0d1117; color: #86efac; } /* ---------- prize ---------- */ .prize { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); border-radius: var(--r-lg); overflow: hidden; background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-2); } .prize-copy { padding: 34px 34px 32px; } .badge-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(var(--accent-rgb), .1); color: var(--accent); font: 700 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; } .prize-title { margin-top: 16px; font: 800 clamp(28px, 3vw, 38px)/1.12 var(--f-body); letter-spacing: -.03em; color: var(--text); } .acc { color: var(--accent); } .prize-copy > p { margin-top: 12px; color: var(--text2); font-size: 16px; max-width: 560px; } .leader { margin-top: 20px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--s2); max-width: 560px; } .leader-lbl { font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .leader-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .leader-w { font-weight: 700; font-size: 16px; color: var(--text); } .leader-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .leader-nums { display: flex; gap: 16px; margin-top: 8px; font-size: 14px; color: var(--muted); flex-wrap: wrap; } .leader-nums b { color: var(--text); font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .prize-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .prize-stage { position: relative; padding: 30px 24px 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse 80% 70% at 50% 42%, var(--stage-a), var(--stage-b) 72%); border-left: 1px solid var(--border); overflow: hidden; } .stage-glow { position: absolute; left: 50%; top: 38%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .28), transparent 65%); animation: breathe 5s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } } .dev-hero { position: relative; z-index: 1; animation: float 6s ease-in-out infinite; } .dev-hero svg { width: 150px; height: 230px; filter: drop-shadow(0 22px 20px rgba(0, 60, 20, .35)); } .pedestal { position: relative; z-index: 0; width: 190px; height: 34px; margin-top: -18px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .45), rgba(var(--accent-rgb), .08) 60%, transparent 72%); } .prize-name { position: relative; margin-top: 10px; font: 400 32px/1 var(--f-display); letter-spacing: .8px; color: var(--text); } .prize-spec { position: relative; font-size: 13.5px; color: var(--muted); margin-top: 6px; } .cd { position: relative; display: flex; gap: 8px; margin-top: 18px; } .cd > div { width: 72px; padding: 10px 0 8px; border-radius: 12px; background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-1); display: flex; flex-direction: column; align-items: center; } .cd b { font: 400 36px/1 var(--f-display); letter-spacing: .5px; color: var(--text); } .cd span { font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .cd-lbl { position: relative; font-size: 12.5px; color: var(--muted); margin-top: 8px; } /* leaderboards / race */ .race { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .lb { padding: 18px 18px 14px; display: flex; flex-direction: column; min-width: 0; } .lb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .lb-note { font-size: 12.5px; color: var(--muted); } .feed-sub { margin-top: 2px; } .month-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 2px; font-size: 13px; font-weight: 700; color: var(--text2); } .month-nav button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--s1); color: var(--text2); font-size: 17px; line-height: 1; display: grid; place-items: center; } .month-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } .month-nav button:disabled { opacity: .35; cursor: default; } .month-nav span { min-width: 120px; text-align: center; } .rows { margin-top: 8px; } .row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); position: relative; } .row:last-child { border-bottom: 0; } .row .rk { font: 700 12px/1 var(--f-mono); color: var(--muted); text-align: center; } .medal { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 12px/1 var(--f-body); color: #3b2a00; flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .5); } .m1 { background: linear-gradient(145deg, #fde68a, #eab308); } .m2 { background: linear-gradient(145deg, #f1f5f9, #94a3b8); color: #1f2937; } .m3 { background: linear-gradient(145deg, #fcd9b6, #c2773a); color: #3b1d06; } .row .who { min-width: 0; } .row .w { font: 600 13px/1.3 var(--f-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .row .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .row .num { text-align: right; font-variant-numeric: tabular-nums; } .row .num b { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .row .num span { font-size: 11.5px; color: var(--muted); } .row .bar { position: absolute; left: 38px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); opacity: .4; } .rank-chip, .elite-chip { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px 0 5px; border-radius: 999px; font: 700 10.5px/1 var(--f-body); letter-spacing: .01em; white-space: nowrap; border: 1px solid rgba(var(--rc-rgb, 148, 163, 184), .45); background: rgba(var(--rc-rgb, 148, 163, 184), .12); color: var(--text2); } .rank-chip svg, .elite-chip svg { width: 11px; height: 11px; flex: none; } .elite-chip { border-color: rgba(var(--rc-rgb), .6); background: rgba(var(--rc-rgb), .16); color: var(--text); } html[data-theme=dark] .rank-chip, html[data-theme=dark] .elite-chip { color: rgb(var(--rc-rgb, 148, 163, 184)); } .tag-mini { font-size: 10.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; } .tag-mini svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; } .feed .row { grid-template-columns: 26px minmax(0, 1fr) auto; } .idn { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; } .idn svg { width: 24px; height: 24px; } .feed .row.fresh { background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), transparent); } .feed .age { font-size: 11.5px; color: var(--muted); } .more-btn { margin-top: 10px; align-self: center; border: 1px solid var(--border); background: var(--s1); color: var(--text2); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 9px; } .more-btn:hover { border-color: var(--accent); color: var(--text); } /* ---------- mining chest ---------- */ .chest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; } .mini-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .claim { margin-top: 14px; padding: 18px; } .claim-steps { display: flex; gap: 8px; margin: 12px 0 14px; flex-wrap: wrap; } .claim-steps li { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--s2); font-size: 13.5px; color: var(--text2); font-weight: 500; } .claim-steps li .n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 400 17px/1 var(--f-display); color: #fff; background: var(--accent); } .chest-look input { height: 42px; } .chest-look .btn { height: 42px; } .claim .fold { margin-top: 8px; } .chest-total { margin-top: 14px; font-size: 14px; color: var(--muted); } .chest-total b { color: var(--text); } .chest-lb { padding: 18px; } .chest-rows .row { grid-template-columns: 28px minmax(0, 1fr) auto; } .pts b { font-size: 15px; } .row.off { opacity: .62; } .streak { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--text2); } .streak svg { width: 11px; height: 11px; fill: var(--accent); } .plus7 { font-size: 10.5px; color: var(--accent); font-weight: 700; } .offline { font-size: 10.5px; color: var(--muted); font-weight: 700; } /* ---------- more: barracks / arcade / hashstrike ---------- */ .more { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; } .barracks { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px 28px; padding: 26px; align-items: center; } .barracks-foot { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 18px; } .barracks-copy .btn { margin-top: 16px; } .klaw { position: relative; width: 220px; height: 220px; } .klaw-ring { position: absolute; left: -8px; top: -8px; width: 236px; height: 236px; border-radius: 50%; border: 1.5px dashed rgba(var(--accent-rgb), .55); animation: spin 26s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Safari: no overflow clip around the video (same fix as SoloBlocks firmware.php); the video rounds itself */ .klaw-portal { position: absolute; left: 10px; top: 10px; width: 200px; height: 200px; border-radius: 50%; background: #050807 url(klaw/klaw-poster.jpg) center / cover no-repeat; box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .12), 0 22px 50px -12px rgba(0, 167, 61, .55); } .klaw-vid { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .barracks-copy .kicker { margin-bottom: 8px; } .more-title { font: 400 38px/1 var(--f-display); letter-spacing: .6px; color: var(--text); } .more-title.sm { font-size: 30px; margin-top: 2px; } .barracks-copy > p { margin-top: 8px; color: var(--text2); font-size: 15px; } .ladder { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 16px; } .ladder::-webkit-scrollbar { display: none; } .rung { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .rung-bar { width: 100%; border-radius: 8px 8px 3px 3px; position: relative; background: linear-gradient(180deg, rgba(var(--bar-rgb), .95), rgba(var(--bar-rgb), .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); transform-origin: bottom; transform: scaleY(.1); transition: transform .8s var(--ease); } .in .rung-bar, .rung-bar.grown { transform: none; } .rung-bar svg { position: absolute; left: 50%; top: 6px; width: 16px; height: 16px; margin-left: -8px; } .rung-name { margin-top: 6px; width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: center; } .rung .rank-chip { height: auto; min-height: 19px; max-width: 100%; padding: 3px 5px 3px 3px; gap: 2px; border-radius: 10px; font-size: 9.5px; letter-spacing: -.01em; line-height: 1.1; white-space: normal; text-align: left; } .rung-sub { font: 600 10.5px/1.3 var(--f-mono); color: var(--muted); } .elites { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; color: var(--muted); } .elites-lbl { flex-basis: 100%; font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .elite { display: inline-flex; align-items: center; gap: 8px; } .more-side { display: flex; flex-direction: column; gap: 16px; } .more-side .link-card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .more-side .card-link { margin-top: auto; padding-top: 12px; } .link-card { padding: 20px 20px 22px; min-height: 0; } .link-card .kicker { margin-bottom: 6px; } .link-card p { position: relative; margin-top: 8px; color: var(--text2); font-size: 14.5px; padding-right: 8px; } .card-link { position: relative; display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14.5px; } /* ---------- community ---------- */ .comm { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; } .tg-card { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; padding: 26px; align-items: center; } .tg-title { display: flex; align-items: center; gap: 10px; font: 800 24px/1.2 var(--f-body); letter-spacing: -.02em; color: var(--text); } .tg-logo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #0088cc; flex: none; } .tg-logo svg { width: 20px; height: 20px; fill: #fff; margin-left: -2px; } .tg-logo.sm { width: 26px; height: 26px; } .tg-logo.sm svg { width: 14px; height: 14px; } .tg-copy > p { margin-top: 10px; color: var(--text2); font-size: 15.5px; } .checks { margin: 14px 0 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .checks li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--text2); font-weight: 500; } .checks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: rgba(var(--accent-rgb), .14); } .checks li::after { content: ''; position: absolute; left: 6px; top: 6px; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .phone { border-radius: 26px; padding: 12px 12px 10px; background: var(--s2); border: 1px solid var(--border); box-shadow: var(--sh-3); } .phone-top { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; border-bottom: 1px solid var(--border); } .phone-top b { display: block; font-size: 13px; color: var(--text); line-height: 1.1; } .phone-top small { font-size: 11px; color: var(--muted); } .msgs { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px 4px; min-height: 280px; } .msg { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 10px 11px; border-radius: 14px 14px 14px 4px; background: var(--s1); border: 1px solid var(--border); font-size: 12.5px; color: var(--muted); } .msgs.anim .msg { opacity: 0; transform: translateY(10px) scale(.98); } .msgs.anim .msg.show { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); } .msg i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; } .msg.bad i { background: var(--bad); } .msg.warn i { background: var(--warn); } .msg.ok i { background: var(--ok); } .msg.info i { background: var(--muted2); } .msg b { display: block; color: var(--text); font-size: 13px; } .msg time { font: 600 10.5px/1 var(--f-mono); color: var(--muted2); margin-top: 3px; } .phone-note { text-align: center; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); padding-top: 8px; } .socials { display: flex; flex-direction: column; gap: 10px; } .social { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--border); color: var(--text); box-shadow: var(--sh-1); transition: border-color .2s, transform .2s var(--ease); } .social:hover { color: var(--text); border-color: var(--accent); transform: translateX(3px); } .s-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; } .s-ico svg { width: 21px; height: 21px; fill: #fff; } .s-x { background: #000; border: 1px solid #333; } .s-dc { background: #5865f2; } .s-tg { background: #0088cc; } .s-ms { background: #fff; border: 1px solid var(--border); } .s-sb { background: #0d1117; border: 1px solid #30363d; } /* Mineshop.eu tile: the spinning fan from the mineshop.eu logo, SoloBlocks.io tile: its animated # mark (see block at the end) */ .s-txt { flex: 1; min-width: 0; } .s-txt b { display: block; font-size: 15px; } .s-txt small { display: block; font-size: 13px; color: var(--muted); } .s-go { color: var(--muted); font-size: 16px; } /* ---------- FAQ ---------- */ .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .faq-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .fold.q { transition: border-color .25s, background .25s, box-shadow .25s; } .fold.q > summary { font-size: 16px; padding: 16px 18px; } .fold.q[open] { border-color: rgba(var(--accent-rgb), .5); background: linear-gradient(180deg, rgba(var(--accent-rgb), .09), rgba(var(--accent-rgb), 0) 120px), var(--s1); box-shadow: 0 8px 28px rgba(var(--accent-rgb), .08); } .fold.q[open] > summary { color: var(--accent); } .fold.q .fold-body { margin: 0 18px; padding: 12px 0 18px; border-top: 1px solid rgba(var(--accent-rgb), .22); line-height: 1.6; animation: faqIn .35s var(--ease); } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ---------- footer ---------- */ .ftr { background: var(--band); border-top: 1px solid var(--border); } .ftr-in { max-width: var(--maxw); margin: 0 auto; padding: 48px var(--gut) 28px; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 28px; } .ftr-brand p { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 360px; } .ftr-col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .ftr-col b { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .ftr-col a { color: var(--text2); } .ftr-col a:hover { color: var(--accent); } .ftr-bottom { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gut) 34px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: var(--sh-3); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1240px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav a { padding: 7px 8px; } } @media (max-width: 1180px) { .nav { display: none; } .menu-btn { display: inline-grid; } .hdr-right { margin-left: auto; } .nav + .hdr-right { margin-left: auto; } .diff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .race { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feed-card { grid-column: 1 / -1; } .tg-card { grid-template-columns: minmax(0, 1fr); } .phone { max-width: 420px; } .comm { grid-template-columns: minmax(0, 1fr); } .socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 40px; } .hero-vis { height: 480px; } .net-grid { grid-template-columns: minmax(0, 1fr); } .connect { grid-template-columns: minmax(0, 1fr); } .setup { position: static; } .prize { grid-template-columns: minmax(0, 1fr); } .prize-stage { border-left: 0; border-top: 1px solid var(--border); } .chest { grid-template-columns: minmax(0, 1fr); } .more { grid-template-columns: minmax(0, 1fr); } .more-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-in { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ftr-brand { grid-column: 1 / -1; } .lookup { grid-template-columns: minmax(0, 1fr); gap: 12px; } } @media (max-width: 760px) { :root { --gut: 16px; } html { scroll-padding-top: 64px; } .hdr-in { height: 56px; gap: 10px; } .sheet { top: 56px; } .logo-mark { width: 28px; height: 28px; } .logo-name { font-size: 18px; } .logo-sub { display: none; } .icon-btn { width: 38px; height: 38px; } .hdr-cta { height: 38px; padding: 0 12px; } .cta-long { display: none; } .cta-short { display: inline; } .sec { padding: 60px 0; } .sec-head { margin-bottom: 22px; } .sec-title { font-size: 42px; } .sec-sub { font-size: 15.5px; } .hero-in { padding: 28px var(--gut) 18px; gap: 18px; } .hero-title { font-size: 60px; margin: 16px 0 14px; } .hero-sub { font-size: 16.5px; } .hero-cta { margin-top: 22px; } .hero-cta .btn { flex: 1 1 150px; } .stratum-url { font-size: 13px; } .stratum-row { padding-left: 12px; } .hero-stats { margin-top: 24px; } .hero-stats > div { padding: 0 14px; flex: 1; } .hero-stats dd { font-size: 24px; } .hero-stats dt { font-size: 10px; letter-spacing: .06em; } .hero-vis { height: 400px; margin: 0 -8px; } .cube-wrap { width: 300px; height: 345px; margin: -190px 0 0 -150px; } .hunt { top: 4px; right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; } .hr-card { left: 50%; width: 270px; margin-left: -135px; bottom: 0; padding: 12px 14px 10px; } .hr-val { font-size: 32px; } .look-wrap { padding-bottom: 28px; } .lookup { padding: 16px 14px 10px; } .look-copy { gap: 12px; } .look-ico { width: 36px; height: 36px; border-radius: 10px; } .look-title { font-size: 16px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sticker { padding: 14px 14px 18px; min-height: 128px; } .sticker .ico { width: 41px; height: 41px; top: -7px; right: -7px; } .sticker .lbl { font-size: 12.5px; padding-right: 36px; } .sticker .val { font-size: 22px; margin-top: 22px; } .sticker .val small { font-size: 12.5px; } .sticker .meta { font-size: 12px; } .chart-grid { grid-template-columns: minmax(0, 1fr); } .chart-box { height: 210px; } .chart-card { padding: 14px 12px 8px; } .chain { --c3: 128px; justify-content: flex-start; } .b3 { flex-basis: 172px; } .blk-link { flex-basis: 14px; } .c3 .fh { font-size: 23px; } .c3 .fh-sm { font-size: 18px; } .c3 .f { padding: 9px; font-size: 10.5px; } .diff-card { padding: 18px 16px 16px; } .dd-val { font-size: 28px; } .diff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .diff-stats > div:last-child { grid-column: 1 / -1; } #epochGrid { height: 190px; } .fee-card { padding: 18px 16px; } .step > summary { gap: 12px; padding: 14px; } .step-n { width: 34px; height: 34px; font-size: 21px; } .step-t b { font-size: 16px; } .step-body { padding: 0 14px 16px; } .setup { padding: 16px; } .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tabs button { padding: 9px 6px; } .tabs button:last-child:nth-child(odd) { grid-column: 1 / -1; } .howto-alt { grid-row: 3; } .tab-panel { grid-template-columns: minmax(0, 1fr); } .tab-panel .dev { grid-column: 1; grid-row: 1; height: 110px; } .tab-panel .howto { grid-column: 1; grid-row: 2; } .prize-copy { padding: 24px 18px 22px; } .prize-stage { padding: 26px 16px 22px; } .race { grid-template-columns: minmax(0, 1fr); } .lb { padding: 16px 14px 12px; } .mini-tiles { grid-template-columns: minmax(0, 1fr); } .claim { padding: 16px 14px; } .claim-steps { flex-direction: column; } .claim-steps li { flex: none; } .chest-look { flex-direction: column; } .chest-look input { flex: none; width: 100%; height: 44px; } .chest-look .btn { width: 100%; height: 44px; } .chest-lb { padding: 16px 14px; } .barracks { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; justify-items: center; } .barracks-copy, .barracks-foot { width: 100%; } .ladder { gap: 4px; } .rung-sub { font-size: 9px; } .klaw { width: 180px; height: 180px; } .klaw-ring { width: 196px; height: 196px; } .klaw-portal { width: 164px; height: 164px; } .more-side { grid-template-columns: minmax(0, 1fr); } .tg-card { padding: 20px 16px; } .checks { grid-template-columns: minmax(0, 1fr); } .socials { grid-template-columns: minmax(0, 1fr); } .faq { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .faq-col { display: contents; } .ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 36px; gap: 22px; } } @media (max-width: 520px) { .rung-name { min-height: 38px; } .rung .rank-chip { flex-direction: column; gap: 2px; padding: 3px 0; margin: 0 -1px; border-width: 0; border-radius: 8px; font-size: 8px; letter-spacing: -.02em; text-align: center; } } @media (max-width: 400px) { .hero-title { font-size: 54px; } .hero-stats dd { font-size: 21px; } .hero-stats > div { padding: 0 10px; } .hero-stats dt { font-size: 9.5px; letter-spacing: .03em; white-space: nowrap; } .look-row .btn { padding: 0 12px; } .cd > div { width: 64px; } } @media (max-width: 380px) { .hero-title { font-size: 50px; } .rung-sub { font-size: 8.5px; } .rung .rank-chip { font-size: 7.5px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .msg { opacity: 1; transform: none; } } /* ---------- SVG parts drawn by solo.js (colours via classes, not attributes) ---------- */ .cube-wrap .edge { fill: none; stroke: var(--cube-edge); stroke-width: 1.4; stroke-linejoin: round; } .cube-wrap .edge-back { fill: none; stroke: var(--cube-edge); stroke-opacity: .5; stroke-width: 1; } .cube-wrap .edge-v { stroke: var(--cube-edge); stroke-opacity: .55; stroke-width: 1; } .cube-wrap .ground { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; } .cube-wrap .cube { position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: float 7s ease-in-out infinite; } .idn .ib { fill: rgba(var(--accent-rgb), .10); } .idn .ic { fill: var(--accent); } /* ========================================================================== Leaderboard page (miners.html): Mining Fleet ========================================================================== */ .phero .hero-in { padding: 52px var(--gut) 56px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; } .phero .hero-title { margin: 18px 0 16px; } .phero .hero-title .acc { font-variant-numeric: tabular-nums; } .sec.fleet-stats { padding: 40px 0 64px; } .tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* donut */ .donut-card { padding: 22px 24px 24px; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 60%), var(--s1); } .donut-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 16px; } .donut { position: relative; width: 190px; height: 190px; } .donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .donut circle { fill: none; stroke-width: 13; } .donut .seg-bg { stroke: var(--s2); } .donut .seg { stroke: var(--c); transition: opacity .2s, stroke-width .2s; } .donut.has-focus .seg:not(.on) { opacity: .28; } .donut .seg.on { stroke-width: 15; } .donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .donut-mid b { font: 800 28px/1.1 var(--f-body); letter-spacing: -.025em; color: var(--text); } .donut-mid span { font: 600 12px/1.3 var(--f-mono); letter-spacing: .08em; color: var(--muted); } .seg-o { --c: var(--border2); } html[data-theme="dark"] .seg-o { --c: #30363d; } .donut-legend { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .donut-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; transition: background .15s; } .donut-legend li.on, .donut-legend li:hover { background: var(--s2); } .donut-legend .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .donut-legend .lg-name { color: var(--text2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legend .lg-val { font: 700 12.5px/1 var(--f-mono); color: var(--text); } /* sort control */ .sortbar { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-1); } .sortbar button { border: 0; background: transparent; color: var(--text2); font-weight: 700; font-size: 13px; line-height: 1; padding: 10px 16px; border-radius: 9px; transition: background .15s, color .15s; } .sortbar button:hover { color: var(--text); background: var(--s2); } .sortbar button.on { background: var(--accent); color: var(--on-accent); } /* device cards */ .fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .fleet > .loading, .fleet > .empty { grid-column: 1 / -1; } .dcard { --dc: var(--accent); --dc-rgb: var(--accent-rgb); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 16px 18px 22px; border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-1); background: radial-gradient(circle at 100% 0%, rgba(var(--dc-rgb), .14), transparent 62%), var(--s1); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; } .dcard::after { content: ''; position: absolute; left: 18px; bottom: 0; width: 34px; height: 3px; border-radius: 3px 3px 0 0; background: var(--dc); transition: width .35s var(--ease); } .dcard:hover { border-color: rgba(var(--dc-rgb), .55); transform: translateY(-2px); box-shadow: var(--sh-2); } .dcard:hover::after { width: calc(100% - 36px); } .dcard-top { display: flex; align-items: center; justify-content: space-between; } .dcard-rank { font: 400 24px/1 var(--f-display); letter-spacing: 1px; color: var(--muted); } .dcard:nth-child(-n+3) .dcard-rank { color: var(--accent); } .dcard-pct { font: 700 11.5px/1 var(--f-mono); padding: 6px 9px; border-radius: 999px; background: rgba(var(--dc-rgb), .15); color: var(--text); } .dcard .dev { height: 124px; margin: 6px 0 4px; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 65%, rgba(var(--dc-rgb), .24), transparent 70%); } .dcard .dev svg { width: 156px; height: 112px; } .dcard-name { margin-top: 8px; font: 800 18px/1.25 var(--f-body); letter-spacing: -.01em; color: var(--text); } .dcard-hr { margin-top: 2px; font: 800 26px/1.15 var(--f-body); letter-spacing: -.025em; color: var(--text); white-space: nowrap; } .dcard-hr small { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-left: 2px; } .dcard .bar { height: 8px; margin: 12px 0 14px; border-radius: 99px; background: var(--s2); overflow: hidden; } .dcard .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--dc-rgb), .75), var(--dc)); transition: width .9s var(--ease); } .fleet.go .dcard .bar i { width: var(--w); } .dcard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .dcard-stats dt { font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .dcard-stats dd { margin-top: 3px; font: 700 15px/1.2 var(--f-body); color: var(--text); white-space: nowrap; } .dcard-stats .on dd { color: var(--accent); } /* exact-model match confidence (2026-10-05): sure = worker name, likely = only model that fits, guess = best guess */ .dcard-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; } .cf-lbl { font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .cf { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1.2 var(--f-mono); color: var(--text2); white-space: nowrap; cursor: help; } .cf i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .cf-sure i { background: var(--accent); } .cf-likely i { background: rgba(var(--accent-rgb), .4); } .cf-guess i { box-shadow: inset 0 0 0 1.5px var(--muted); } .fleet-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 1.6em; margin-top: 10px; font: 600 12.5px/1.6 var(--f-mono); color: var(--text2); } .fleet-conf .cf { font-size: 12.5px; } .cf-pct { color: var(--muted); } .dsteps .cf { cursor: default; font-size: 13px; color: var(--text); } /* barracks call to action */ .bcta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 28px; align-items: center; padding: 26px 30px; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 60%), var(--s1); } .bcta-ico { width: 64px; height: 64px; transform: rotate(-10deg); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .25)); } .bcta .kicker { margin-bottom: 8px; } .bcta-title { font: 400 clamp(30px, 3.4vw, 42px)/1 var(--f-display); letter-spacing: .6px; color: var(--text); } .bcta p { margin-top: 8px; max-width: 620px; color: var(--text2); font-size: 15.5px; } /* how detection works */ .detect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .dsteps { display: flex; flex-direction: column; gap: 12px; } .dsteps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--border); box-shadow: var(--sh-1); } .dsteps b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--text); } .dsteps p { margin-top: 4px; font-size: 15px; color: var(--text2); } .tipbox { margin-top: 12px; display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r); border: 1px dashed rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .06); font-size: 15px; color: var(--text2); } .tipbox b { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .fp-card { padding: 6px 10px 10px; } .fp-title { padding: 14px 12px 6px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .fp-scroll { overflow-x: auto; } .fp { width: 100%; border-collapse: collapse; font-size: 14.5px; } .fp th, .fp td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .fp tr:last-child > * { border-bottom: 0; } .fp thead th { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .fp tbody th { font-weight: 700; color: var(--text); } .fp td { font: 600 13.5px/1.2 var(--f-mono); color: var(--text2); } .fp-note { padding: 10px 12px 6px; font-size: 13px; line-height: 1.5; color: var(--muted); } .fp-note b { color: var(--text2); } .mt { display: inline-block; font: 700 11px/1 var(--f-mono); letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; } .mt.name { background: rgba(var(--accent-rgb), .12); color: var(--accent); } .mt.hash { background: rgba(247, 147, 26, .14); color: #b45309; } html[data-theme="dark"] .mt.hash { color: #f7931a; } @media (max-width: 1024px) { .phero .hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 40px; } .tiles.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detect { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .sec.fleet-stats { padding: 28px 0 44px; } .bcta { grid-template-columns: auto minmax(0, 1fr); padding: 22px 20px; } .bcta .btn { grid-column: 1 / -1; } } @media (max-width: 620px) { .fleet { grid-template-columns: minmax(0, 1fr); gap: 12px; } .dcard { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 16px; } .dcard-top { grid-column: 2; grid-row: 1; } .dcard .dev { grid-column: 1; grid-row: 1 / span 4; align-self: center; height: 92px; margin: 0; } .dcard .dev svg { width: 100%; height: auto; max-height: 84px; } .dcard-name { grid-column: 2; grid-row: 2; margin-top: 4px; font-size: 17px; } .dcard-hr { grid-column: 2; grid-row: 3; font-size: 24px; } .dcard .bar { grid-column: 2; grid-row: 4; margin: 8px 0 12px; } .dcard-stats { grid-column: 1 / -1; grid-row: 5; margin-top: 0; } .dcard-conf { grid-column: 1 / -1; grid-row: 6; } .sortbar { width: 100%; } .sortbar button { flex: 1; padding: 11px 8px; } } @media (max-width: 520px) { .donut-card { padding: 18px 16px 18px; } .donut-body { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; } .donut-legend { width: 100%; } } /* ========================================================================== Barracks page (barracks.html) Tier colours (--pc, --pc-rim, --pc-rgb, set per rank in barracks.js) identify a rank. Light theme inks the insignia with the darker rim colour; green stays the UI colour. ========================================================================== */ .coin { --sz: 44px; flex: none; width: var(--sz); height: var(--sz); border-radius: 50%; display: grid; place-items: center; color: var(--pc-rim); border: 2px solid var(--pc-rim); background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .7), transparent 58%), rgba(var(--pc-rgb), .22); box-shadow: 0 0 0 3px rgba(var(--pc-rgb), .14), inset 0 -3px 6px rgba(var(--pc-rgb), .28); } html[data-theme="dark"] .coin { color: var(--pc); border-color: var(--pc); background: rgba(var(--pc-rgb), .14); box-shadow: 0 0 0 3px rgba(var(--pc-rgb), .10), 0 0 18px -4px rgba(var(--pc-rgb), .6); } .coin svg { width: 58%; height: 58%; } .dev-art { width: 64px; height: 46px; object-fit: contain; flex: none; } .sticker.gold { --sc: #f59e0b; --sc-rgb: 245, 158, 11; } .sub-head { margin: 64px 0 24px; } .sub-head .kicker { margin-bottom: 10px; } .sub-title { font: 400 clamp(32px, 3.6vw, 44px)/1 var(--f-display); letter-spacing: .6px; color: var(--text); } /* troops by rank (hero card) */ .mix-card { padding: 22px 24px 24px; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 60%), var(--s1); } .mix { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; } .mix:empty { min-height: calc(7 * 44px + 6 * 11px); } /* 7 rank rows keep their space while the data loads (no layout shift) */ .mix-row { --sz: 34px; display: grid; grid-template-columns: auto minmax(0, 150px) minmax(0, 1fr) 40px; gap: 12px; align-items: center; } .mix-name b { display: block; font: 700 14px/1.2 var(--f-body); color: var(--text); } .mix-name span { display: block; margin-top: 2px; font: 600 11px/1.2 var(--f-mono); color: var(--muted); white-space: nowrap; } .mix-bar { height: 10px; border-radius: 99px; background: var(--s2); overflow: hidden; } .mix-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--pc-rgb), .75), var(--pc)); transition: width .9s var(--ease); } .mix.go .mix-bar i { width: var(--w); } .mix-n { text-align: right; font: 800 16px/1 var(--f-body); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; } .mix-row.none .mix-n { color: var(--muted2); font-weight: 600; } .mix-row.none .coin { opacity: .4; } /* hall of satoshis */ .plaques { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } .plaque { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 164px; padding: 28px 8px 16px; text-align: center; border-radius: var(--r); border: 1.5px dashed var(--border2); background: var(--s2); color: var(--muted); } .pl-num { position: absolute; top: 10px; left: 12px; font: 400 20px/1 var(--f-display); letter-spacing: 1px; color: var(--muted2); } .pl-who { font: 700 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere; } .pl-sub { font: 600 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .plaque.mystery { border-style: solid; border-color: rgba(245, 158, 11, .6); color: #b45309; background: radial-gradient(circle at 50% 38%, rgba(255, 215, 0, .26), transparent 68%), var(--s1); box-shadow: 0 10px 28px -14px rgba(245, 158, 11, .7); } html[data-theme="dark"] .plaque.mystery { color: #ffd700; } .plaque.held { border-style: solid; border-color: rgba(var(--pc-rgb), .6); background: radial-gradient(circle at 50% 38%, rgba(var(--pc-rgb), .22), transparent 68%), var(--s1); color: var(--text); } .plaque.held .coin { --sz: 52px; } .mcube { --s: 44px; position: relative; width: var(--s); height: var(--s); margin: 4px 0 10px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(30deg); animation: mspin 10s linear infinite; } .mcube i { position: absolute; inset: 0; display: grid; place-items: center; font: 400 26px/1 var(--f-display); font-style: normal; color: #7c4a03; border: 1.5px solid #d99a0b; background: linear-gradient(135deg, rgba(255, 221, 64, .92), rgba(245, 158, 11, .82)); backface-visibility: visible; } html[data-theme="dark"] .mcube i { color: #ffe27a; border-color: rgba(255, 215, 0, .8); background: linear-gradient(135deg, rgba(255, 215, 0, .26), rgba(245, 158, 11, .12)); box-shadow: 0 0 16px rgba(255, 215, 0, .25) inset; } .mcube .f1 { transform: translateZ(calc(var(--s) / 2)); } .mcube .f2 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .mcube .f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .mcube .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .mcube .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .mcube .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } @keyframes mspin { to { transform: rotateX(-24deg) rotateY(390deg); } } /* elite commands */ .elites3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .eplaque { --ec: var(--accent); --ec-rgb: var(--accent-rgb); position: relative; overflow: hidden; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 22px 26px; border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-1); background: radial-gradient(circle at 100% 0%, rgba(var(--ec-rgb), .17), transparent 62%), var(--s1); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; } .eplaque::after { content: ''; position: absolute; left: 22px; bottom: 0; width: 34px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ec); transition: width .35s var(--ease); } .eplaque:hover { border-color: rgba(var(--ec-rgb), .6); transform: translateY(-2px); box-shadow: var(--sh-2); } .eplaque:hover::after { width: calc(100% - 44px); } .ep-badge svg { width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(var(--ec-rgb), .45)); } .ep-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .ep-title { font: 400 30px/1 var(--f-display); letter-spacing: .6px; color: var(--text); } .ep-mult { font: 700 11px/1 var(--f-mono); letter-spacing: .02em; padding: 6px 9px; border-radius: 99px; background: rgba(var(--ec-rgb), .18); color: var(--text); white-space: nowrap; } .ep-wallet { margin-top: 8px; font: 700 14.5px/1.3 var(--f-mono); color: var(--text); overflow-wrap: anywhere; } .ep-wallet.none { font-family: var(--f-body); font-weight: 600; color: var(--muted); } .ep-meta { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--muted); } .ep-meta b { font-size: 14.5px; font-weight: 700; color: var(--text); } /* current commander */ .cmd { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 32px; align-items: center; padding: 28px 32px; background: radial-gradient(circle at 0% 0%, rgba(var(--pc-rgb), .18), transparent 52%), var(--s1); } .cmd-coin .coin { --sz: 108px; border-width: 3px; } .cmd-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .cmd-rank { font: 400 clamp(36px, 3.8vw, 48px)/1 var(--f-display); letter-spacing: .6px; color: var(--text); text-transform: uppercase; } .mult-chip { font: 700 12px/1 var(--f-mono); padding: 7px 11px; border-radius: 99px; background: rgba(var(--pc-rgb), .18); border: 1px solid rgba(var(--pc-rgb), .5); color: var(--text); white-space: nowrap; } .cmd-wallet { margin-top: 10px; font: 700 15px/1.3 var(--f-mono); color: var(--text2); } .cmd-dev { margin-top: 10px; display: flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--f-body); color: var(--text); } .cmd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 10px 20px; padding-left: 32px; border-left: 1px solid var(--border); } .cmd-stats dt, .dos-stats dt { font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .cmd-stats dd { margin-top: 4px; font: 800 24px/1.15 var(--f-body); letter-spacing: -.02em; color: var(--text); white-space: nowrap; } /* platoons */ .plat-tools { display: flex; gap: 10px; } .plats { display: flex; flex-direction: column; gap: 14px; } .plat { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); background: var(--s1); box-shadow: var(--sh-1); } .plat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc); z-index: 1; } .plat-h { margin: 0; } .plat-btn { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 16px 20px 16px 26px; border: 0; background: radial-gradient(circle at 0 50%, rgba(var(--pc-rgb), .16), transparent 46%); text-align: left; color: inherit; } .plat-btn:hover { background: radial-gradient(circle at 0 50%, rgba(var(--pc-rgb), .24), transparent 52%); } .plat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } .plat-title b { display: block; font: 400 32px/1 var(--f-display); letter-spacing: .6px; color: var(--text); text-transform: uppercase; } .plat-title span { display: block; margin-top: 3px; font: 600 12px/1.4 var(--f-mono); color: var(--muted); } .plat-mult { font: 700 12px/1 var(--f-mono); padding: 7px 11px; border-radius: 99px; background: rgba(var(--pc-rgb), .18); border: 1px solid rgba(var(--pc-rgb), .45); color: var(--text); white-space: nowrap; } .plat-n { font: 700 13px/1 var(--f-mono); color: var(--text2); white-space: nowrap; min-width: 84px; text-align: right; } .plat-chev { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); } .plat-btn[aria-expanded="false"] .plat-chev { transform: rotate(-90deg); } .plat-b { padding: 20px 20px 22px 26px; border-top: 1px solid var(--border); background: var(--s2); } .plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .plat-empty { padding: 4px 0; color: var(--muted); font-size: 15px; } /* dossier cards */ .dos { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 11px; padding: 16px 16px 20px; border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-1); background: radial-gradient(circle at 100% 0%, rgba(var(--pc-rgb), .14), transparent 62%), var(--s1); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; } .dos::after { content: ''; position: absolute; left: 16px; bottom: 0; width: 28px; height: 3px; border-radius: 3px 3px 0 0; background: var(--pc); transition: width .35s var(--ease); } .dos:hover { border-color: rgba(var(--pc-rgb), .55); transform: translateY(-2px); box-shadow: var(--sh-2); } .dos:hover::after { width: calc(100% - 32px); } .dos-top { display: flex; align-items: center; gap: 12px; } .dos-top .coin { --sz: 42px; } .dos-id { min-width: 0; } .dos-call { display: flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--f-mono); color: var(--text); overflow-wrap: anywhere; } .st { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted2); } .st.on { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .dos-mult { margin-top: 4px; font: 600 11.5px/1.2 var(--f-mono); color: var(--muted); } .dos-elite { display: flex; flex-wrap: wrap; gap: 6px; } .dos-dev { display: flex; align-items: center; gap: 10px; font: 700 14.5px/1.25 var(--f-body); color: var(--text); } .dos .dev-art { width: 56px; height: 40px; } .dev-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .dev-txt b { font-weight: inherit; } .dev-more { font: 600 11.5px/1.3 var(--f-mono); color: var(--muted); } .cmd-dev[title], .dos-dev[title] { cursor: help; } .dos-bar { height: 7px; border-radius: 99px; background: var(--s2); overflow: hidden; } .dos-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--pc-rgb), .75), var(--pc)); } .dos-next { margin-top: -5px; font: 600 11px/1.3 var(--f-mono); color: var(--muted); } .dos-stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .dos-stats dd { margin-top: 3px; font: 700 15px/1.2 var(--f-body); color: var(--text); white-space: nowrap; } .dos-pills { display: flex; flex-wrap: wrap; gap: 6px; } .pill { font: 700 10.5px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: var(--s2); border: 1px solid var(--border); color: var(--text2); white-space: nowrap; } .pill.hot { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .35); color: var(--accent); } .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; } .pg { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--s1); color: var(--text2); font: 700 13px/1 var(--f-body); transition: border-color .15s, color .15s, background .15s; } .pg:hover:not(:disabled) { border-color: var(--accent); color: var(--text); } .pg.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pg:disabled { opacity: .4; cursor: default; } .pg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pg-gap { padding: 0 2px; color: var(--muted); } .pg-info { margin-left: auto; font: 600 12px/1 var(--f-mono); color: var(--muted); } /* chain of command */ .rk-chain { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } .rk-step { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 10px 26px; border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-1); background: radial-gradient(circle at 50% 0%, rgba(var(--pc-rgb), .18), transparent 66%), var(--s1); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; } .rk-step::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 34px; height: 3px; margin-left: -17px; border-radius: 3px 3px 0 0; background: var(--pc); transition: width .35s var(--ease), margin-left .35s var(--ease); } .rk-step:hover { border-color: rgba(var(--pc-rgb), .55); transform: translateY(-2px); box-shadow: var(--sh-2); } .rk-step:hover::after { width: calc(100% - 36px); margin-left: calc(-50% + 18px); } .rk-step-no { position: absolute; top: 10px; left: 12px; font: 400 18px/1 var(--f-display); letter-spacing: 1px; color: var(--muted2); } .rk-step .coin { --sz: 60px; margin: 6px 0 12px; } .rk-step-name { font: 400 25px/1 var(--f-display); letter-spacing: .5px; color: var(--text); text-transform: uppercase; } .rk-step-sub { margin-top: 5px; font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .rk-step-days { margin-top: 12px; font: 700 12.5px/1.3 var(--f-body); color: var(--text2); } .rk-step-mult { margin-top: 6px; font: 800 21px/1 var(--f-body); letter-spacing: -.02em; color: var(--text); } .rk-step-n { margin-top: 10px; font: 600 11px/1.2 var(--f-mono); color: var(--muted); } /* how to earn merit */ .formula { padding: 26px 28px 24px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 65%), var(--s1); } .formula-lbl { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .formula-eq { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 16px; font: 800 clamp(22px, 3vw, 34px)/1.2 var(--f-body); letter-spacing: -.02em; color: var(--text); } .fe-out { color: var(--accent); } .fe-op { color: var(--muted); font-weight: 600; } .formula-eq small { font-size: .52em; font-weight: 700; color: var(--muted); letter-spacing: 0; } .formula-note { margin-top: 12px; color: var(--muted); font-size: 14.5px; } .earn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0; } .earn-card { --ac: var(--accent); --ac-rgb: var(--accent-rgb); position: relative; overflow: hidden; padding: 22px 22px 28px; border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-1); background: radial-gradient(circle at 100% 0%, rgba(var(--ac-rgb), var(--sticker-a)), transparent 60%), var(--s1); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; } .earn-card.gold { --ac: #f59e0b; --ac-rgb: 245, 158, 11; } .earn-card::after { content: ''; position: absolute; left: 22px; bottom: 0; width: 34px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ac); transition: width .35s var(--ease); } .earn-card:hover { border-color: rgba(var(--ac-rgb), .5); transform: translateY(-2px); box-shadow: var(--sh-2); } .earn-card:hover::after { width: calc(100% - 44px); } .earn-card .ico { position: absolute; top: -6px; right: -6px; width: 46px; height: 46px; transform: rotate(-12deg); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .22)); pointer-events: none; } .earn-n { font: 400 28px/1 var(--f-display); letter-spacing: 1px; color: var(--ac); } .earn-card h3 { margin-top: 12px; font: 800 18px/1.25 var(--f-body); letter-spacing: -.01em; color: var(--text); } .earn-card p { margin-top: 7px; font-size: 15px; line-height: 1.55; color: var(--text2); } .earn-card p b { color: var(--text); } .example { padding: 24px 28px 28px; } .ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .ex { padding: 18px 20px; border-radius: 12px; background: var(--s2); border: 1px solid var(--border); } .ex.gold { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .4); } .ex-who { font-size: 14.5px; line-height: 1.5; color: var(--text2); } .ex-who b { color: var(--text); } .ex-sum { margin-top: 10px; font: 700 18px/1.35 var(--f-body); letter-spacing: -.01em; color: var(--text); } .ex-sum b { color: var(--accent); } .ex.gold .ex-sum b { color: #b45309; } html[data-theme="dark"] .ex.gold .ex-sum b { color: #ffd700; } .ex-out { margin-top: 6px; font-size: 14px; color: var(--muted); } .ex-out b { color: var(--text2); } .merit-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .regline { padding: 26px var(--gut) 44px; text-align: center; font: 600 12px/1.7 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .regline strong { color: var(--text2); } @media (max-width: 1180px) { .rk-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plaques { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .elites3 { grid-template-columns: minmax(0, 1fr); } .cmd { grid-template-columns: auto minmax(0, 1fr); } .cmd-stats { grid-column: 1 / -1; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--border); } .plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .earn { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .ex-grid { grid-template-columns: minmax(0, 1fr); } .sub-head { margin-top: 48px; } .cmd { padding: 22px 20px; gap: 18px 20px; } .cmd-coin .coin { --sz: 84px; } .plat-btn { padding: 14px 16px 14px 22px; gap: 12px; } .plat-title b { font-size: 28px; } .plat-b { padding: 16px 14px 18px 20px; } .plat-tools { width: 100%; } } @media (max-width: 620px) { .plat-grid { grid-template-columns: minmax(0, 1fr); } .earn { grid-template-columns: minmax(0, 1fr); } .rk-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rk-step:last-child { grid-column: 1 / -1; } .plat-btn { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'c t x' 'c n n'; row-gap: 6px; } .plat-btn .coin { grid-area: c; } .plat-title { grid-area: t; } .plat-chev { grid-area: x; } .plat-n { grid-area: n; text-align: left; min-width: 0; } .plat-mult { display: none; } .pg-info { flex-basis: 100%; margin: 6px 0 0; } .mix-row { grid-template-columns: auto minmax(0, 118px) minmax(0, 1fr) 34px; gap: 10px; } .plaque { min-height: 132px; padding: 26px 4px 12px; } .pl-who { font-size: 9.5px; letter-spacing: .08em; } .cmd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } .formula { padding: 22px 18px; } .example { padding: 20px 18px 22px; } .merit-cta .btn { flex: 1 1 100%; } } @media (max-width: 520px) { .mix-card { padding: 18px 16px 20px; } .eplaque { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 18px 16px 22px; } .ep-badge svg { width: 52px; height: 52px; } .ep-title { font-size: 26px; } } @media (max-width: 400px) { .plaques { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mix-name span { display: none; } .mix-row { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 34px; } } /* Link wallet to Mineshop dialog (assets/link-wallet.js) */ .lw[hidden] { display: none; } .lw { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; } .lw-back { position: absolute; inset: 0; background: rgba(6, 10, 14, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: lwFade .18s var(--ease); } .lw-card { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--s1); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 26px 24px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--accent-rgb), .12); animation: lwPop .22s var(--ease); outline: none; } .lw-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; } .lw-x:hover { color: var(--text); background: var(--s2); } .lw-kicker { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .lw-title { margin: 8px 34px 0 0; font: 400 34px/1.05 var(--f-display); letter-spacing: 1px; } .lw-dots { display: flex; gap: 6px; list-style: none; margin: 14px 0 4px; padding: 0; } .lw-dots[hidden] { display: none; } .lw-dots li { flex: 1; height: 4px; border-radius: 4px; background: var(--border); transition: background .2s; } .lw-dots li.on { background: var(--accent); } .lw-step[hidden] { display: none; } .lw-p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text2); } .lw-p b { color: var(--text); } .lw-dim { color: var(--muted); font-size: 13.5px; } .lw-center { text-align: center; } .lw-lbl { display: block; margin: 18px 0 8px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .lw-in { width: 100%; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border2); background: var(--bg); color: var(--text); font: 500 14px/1 var(--f-mono); } .lw-in::placeholder { color: var(--muted); } .lw-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); } .lw-err { min-height: 18px; margin-top: 8px; font-size: 13px; color: #dc2626; } html[data-theme="dark"] .lw-err { color: #f87171; } .lw-go { width: 100%; margin-top: 6px; } .lw-w { font-family: var(--f-mono); font-weight: 600; } .lw-codebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px dashed rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .07); } .lw-code { font: 700 30px/1 var(--f-mono); letter-spacing: .12em; color: var(--accent); } .lw-how { margin: 16px 0 0; padding-left: 22px; list-style: decimal; font-size: 14px; line-height: 1.6; color: var(--text2); } .lw-how li { margin-bottom: 4px; padding-left: 2px; } .lw-how li::marker { color: var(--accent); font-weight: 700; } .lw-how b { color: var(--text); } .lw-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .lw-row .btn { flex: 1 1 160px; } .lw-rowc { justify-content: center; } .lw-rowc .btn { flex: 0 1 220px; } .lw-wait { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13.5px; color: var(--muted); } .lw-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); animation: lwPulse 1.6s infinite; flex: none; } .lw-test { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--s2); font-size: 12.5px; line-height: 1.5; color: var(--muted); } .lw-test b { font: 700 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--accent); margin-right: 6px; } .lw-test button { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font: 700 12.5px/1.5 var(--f-body); text-decoration: underline; cursor: pointer; } .lw-ok { width: 64px; height: 64px; margin: 18px auto 4px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .5); } .lw-ok svg { width: 32px; height: 32px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } body.lw-open { overflow: hidden; } @keyframes lwFade { from { opacity: 0; } to { opacity: 1; } } @keyframes lwPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes lwPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 70% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } } @media (max-width: 520px) { .lw { align-items: flex-end; padding: 0; } .lw-card { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 18px 22px; max-height: 92vh; } .lw-title { font-size: 30px; } .lw-code { font-size: 25px; } } @media (prefers-reduced-motion: reduce) { .lw-back, .lw-card, .lw-pulse { animation: none; } } /* ========================================================================== Mining Chest page (chest.html, assets/chest.js). Every class starts with ch- on purpose: the home page already owns .chest*, .claim*, .step*, .chain (see the Barracks class-name lesson). ========================================================================== */ .ch-data[hidden] { display: none; } .ch-look { margin-top: 24px; max-width: 520px; } .ch-look .stratum-lbl { display: block; } .ch-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--muted); } .ch-samples:empty { display: none; } .ch-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 11px; border-radius: 999px; border: 1px solid var(--border2); background: var(--s1); color: var(--text); font-size: 12px; font-weight: 600; transition: border-color .18s, background .18s; } .ch-chip span { display: inline-block; padding: 3px 7px; border-radius: 999px; background: rgba(var(--accent-rgb), .12); color: var(--accent); font: 700 11px/1 var(--f-body); } .ch-chip:hover { border-color: var(--accent); background: var(--s2); color: var(--text); } .ch-wallet { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .06); color: var(--text2); font: 600 12.5px/1 var(--f-mono); } .ch-wallet[hidden] { display: none; } .ch-wallet .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } /* the chest */ .ch-stage { position: relative; overflow: hidden; padding: 22px 20px 18px; text-align: center; background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 64%), var(--s1); } .ch-svg { display: block; width: 100%; max-width: 430px; height: auto; margin: 0 auto; overflow: visible; } .ch-floor { fill: rgba(0, 0, 0, .16); } html[data-theme="dark"] .ch-floor { fill: rgba(0, 0, 0, .5); } .ch-glow { opacity: 0; transition: opacity .7s ease .2s; } .ch-inside { fill: #04210f; opacity: 0; transition: opacity .4s ease; } .ch-lid { transform-origin: 60px 140px; transition: transform .9s cubic-bezier(.34, 1.45, .5, 1); } .ch-lock { transition: opacity .3s ease; } .ch-coins { opacity: 0; transition: opacity .4s ease .5s; } .ch-spark path { fill: #8df0b4; opacity: 0; } .ch-svg.is-open .ch-glow { opacity: 1; } .ch-svg.is-open .ch-inside { opacity: 1; } .ch-svg.is-open .ch-lid { transform: translate(-4px, -34px) rotate(-9deg); } .ch-svg.is-open .ch-lock { opacity: 0; } .ch-svg.is-open .ch-coins { opacity: 1; } .ch-svg.is-open .ch-coin { animation: chCoin 2.6s ease-out infinite; } .ch-svg.is-open .c2 { animation-delay: .45s; } .ch-svg.is-open .c3 { animation-delay: .9s; } .ch-svg.is-open .c4 { animation-delay: 1.35s; } .ch-svg.is-open .c5 { animation-delay: 1.8s; } .ch-svg.is-open .ch-spark path { animation: chTwinkle 2.4s ease-in-out infinite; } .ch-svg.is-open .ch-spark .s2 { animation-delay: .5s; } .ch-svg.is-open .ch-spark .s3 { animation-delay: 1s; } .ch-svg.is-open .ch-spark .s4 { animation-delay: 1.5s; } .ch-stage[data-state="none"] .ch-svg, .ch-stage[data-state="locked"] .ch-svg, .ch-stage[data-state="unknown"] .ch-svg { animation: chBob 5s ease-in-out infinite; } .ch-stage[data-state="ready"] .ch-svg { animation: chBounce 1.6s ease-in-out infinite; } @keyframes chCoin { 0% { transform: translateY(10px); opacity: 0; } 20% { opacity: 1; } 60% { transform: translateY(-58px); opacity: 1; } 100% { transform: translateY(-74px); opacity: 0; } } @keyframes chTwinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes chBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes chBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .ch-stage-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; } .ch-state { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border2); background: var(--s2); color: var(--text2); font: 700 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; } .ch-stage[data-state="ready"] .ch-state { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); color: var(--accent); } .ch-stage-pts { font: 800 20px/1 var(--f-body); letter-spacing: -.02em; color: var(--text); } .ch-stage-pts:empty { display: none; } /* data section */ .sec.ch-data { padding: 56px 0 40px; } .ch-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 26px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--s2); font-size: 13.5px; line-height: 1.5; color: var(--text2); } .ch-note[hidden] { display: none; } .ch-note.warn { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .07); } .ch-note > b { font: 700 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--accent); } .ch-note-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } .ch-col { min-width: 0; } .ch-head { margin-bottom: 18px; } .ch-head .sec-title { font-size: clamp(34px, 3.4vw, 46px); } .ch-bal { padding: 22px 22px 20px; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 62%), var(--s1); } .ch-bal-top { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 22px; } .ch-pts { font: 400 clamp(64px, 7vw, 92px)/.9 var(--f-display); letter-spacing: .5px; color: var(--text); font-variant-numeric: tabular-nums; } .ch-pts.ready { color: var(--accent); } .ch-pts.na { color: var(--muted2); } .ch-pts-meta { padding-bottom: 6px; } .ch-pts-lbl { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ch-eur { margin-top: 8px; font-size: 15px; color: var(--text2); } .ch-eur b { color: var(--accent); font-weight: 800; } .ch-prog { margin-top: 22px; } .ch-prog-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); } .ch-prog-top b { color: var(--text); } .ch-track { height: 12px; margin-top: 8px; border-radius: 999px; background: var(--s2); border: 1px solid var(--border); overflow: hidden; } .ch-track i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #4ade80); transition: width 1.1s var(--ease); } .ch-track i.full { box-shadow: 0 0 14px rgba(var(--accent-rgb), .6); } .ch-prog-pct { margin-top: 6px; text-align: right; font: 700 11.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--accent); } .ch-tiles { margin-top: 14px; } .ch-tiles .sticker.sm .val { font-size: 21px; } .ch-tiles .sticker.sm .val small { font-size: 12px; } .ch-mult { padding: 22px 22px 20px; } .ch-mult-total { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .ch-small-lbl { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ch-mult-val { margin-top: 6px; font: 400 56px/1 var(--f-display); letter-spacing: .5px; color: var(--accent); font-variant-numeric: tabular-nums; } .ch-mult-rate { text-align: right; font-size: 14px; color: var(--text2); } .ch-mult-rate .ch-small-lbl { margin-bottom: 8px; } .ch-mult-rate b { color: var(--text); font-size: 17px; } .ch-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .ch-piece { --pc-rgb: 148, 163, 184; min-width: 0; padding: 12px 12px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--s2); transition: border-color .2s, background .2s; } .ch-piece.has { border-color: rgba(var(--pc-rgb), .55); background: linear-gradient(180deg, rgba(var(--pc-rgb), .12), transparent 85%), var(--s2); } .ch-pc-head { display: flex; align-items: center; gap: 7px; font: 700 11.5px/1.2 var(--f-body); color: var(--text2); } .ch-pc-ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: rgba(var(--pc-rgb), .16); } .ch-pc-ico svg { width: 14px; height: 14px; } #chPcStreak .ch-pc-ico svg { fill: var(--accent); } .ch-pc-ico.off { opacity: .45; filter: grayscale(1); } .ch-pc-val { margin-top: 10px; font: 800 24px/1 var(--f-body); letter-spacing: -.02em; color: var(--muted); font-variant-numeric: tabular-nums; } .ch-piece.has .ch-pc-val { color: var(--text); } #chPcStreak.has .ch-pc-val { color: var(--accent); } .ch-pc-det { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--muted); } .ch-pc-det b { color: var(--text); font-weight: 700; } .ch-dim { color: var(--muted2); } .ch-mult-note { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--muted); } /* claim */ .ch-claim { display: flex; align-items: center; justify-content: space-between; gap: 22px 32px; flex-wrap: wrap; margin-top: 26px; padding: 26px 28px; background: radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 55%), var(--s1); } .ch-claim-txt { flex: 1 1 380px; min-width: 0; } .ch-claim-txt .kicker { margin-bottom: 8px; } .ch-claim-title { font: 400 clamp(34px, 3.6vw, 46px)/1 var(--f-display); letter-spacing: .6px; color: var(--text); } .ch-claim-sub { margin-top: 10px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--text2); } .ch-claim-sub b { color: var(--text); } .ch-link { color: var(--accent); font-weight: 700; } .ch-link:hover { text-decoration: underline; } .ch-claim-act { flex: 0 1 340px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .ch-open { width: 100%; } .ch-locked { width: 100%; cursor: not-allowed; opacity: .75; } .ch-locked:hover { border-color: var(--border2); background: var(--s1); } .ch-locked svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ch-test { padding: 9px 12px; border-radius: 10px; background: var(--s2); font-size: 12.5px; line-height: 1.5; color: var(--muted); } .ch-test b { font: 700 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--accent); margin-right: 6px; } /* how it works */ .sec.ch-how { padding: 64px 0 56px; } .ch-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ch-how-grid .sticker { min-height: 170px; } .ch-how-grid .sticker .val.ch-how-val { margin-top: 16px; font-size: 24px; white-space: normal; } .ch-code { display: inline-block; margin-top: 12px; padding: 7px 11px; border-radius: 9px; border: 1px dashed rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .06); color: var(--text); font-weight: 600; font-size: 13px; } .ch-steps-title { margin: 34px 0 12px; font: 700 17px/1.3 var(--f-body); letter-spacing: -.01em; color: var(--text); } .ch-steps { margin: 0; } @media (min-width: 761px) { .ch-steps li { flex: 1 1 220px; } } @media (max-width: 1024px) { .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } .ch-how-grid { grid-template-columns: minmax(0, 1fr); } .ch-how-grid .sticker { min-height: 0; } .ch-claim-act { flex: 1 1 100%; } } @media (max-width: 620px) { .sec.ch-data { padding: 36px 0 24px; } .ch-pieces { grid-template-columns: minmax(0, 1fr); } .ch-piece { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; } .ch-pc-head { grid-column: 1; } .ch-pc-val { grid-column: 2; grid-row: 1; margin: 0; text-align: right; } .ch-pc-det { grid-column: 1 / -1; margin-top: 4px; } .ch-bal, .ch-mult { padding: 18px 16px 16px; } .ch-claim { padding: 20px 18px; } .ch-mult-rate { text-align: left; } .ch-mult-val { font-size: 48px; } .ch-tiles { grid-template-columns: minmax(0, 1fr); } .ch-stage { padding: 16px 12px 14px; } } @media (prefers-reduced-motion: reduce) { .ch-svg, .ch-coin, .ch-spark path, .ch-lid, .ch-track i { animation: none !important; transition: none !important; } .ch-svg.is-open .ch-spark path { opacity: .9; } } /* ========================================================================== Miner dashboard (miner.html). Everything is prefixed mn-. Minimal working dashboard (Guntis 2026-10-02: "more minimalistic, not for marketing", small rank up top, the interesting numbers without scrolling): slim top bar, one KPI strip, chart + odds, workers, folded extras. Reuses: .card, .seg, .tbl, .coin, .chart-box, .fold, .ch-note, .ch-chip, .ch-samples, .look-row, .copy, .live-pill ========================================================================== */ .mn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mn-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .live-pill.off { border-color: var(--border2); background: var(--s2); } .live-pill.off .dot { background: var(--muted2); animation: none; box-shadow: none; } /* top bar */ .mn-top { border-bottom: 1px solid var(--border); } .mn-top-in { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gut) 28px; } .mn-top.is-wallet .mn-top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta look" "line line"; align-items: center; gap: 10px 32px; padding: 16px var(--gut) 18px; } .mn-id { min-width: 0; } .mn-top.is-wallet .mn-id { display: contents; } .mn-top.is-wallet .mn-id-row { grid-area: meta; } .mn-top.is-wallet .mn-idline { grid-area: line; margin-top: 0; } .mn-top.is-wallet .mn-look { grid-area: look; } .mn-id-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; } .mn-upd { font: 600 11.5px/1 var(--f-mono); letter-spacing: .04em; color: var(--muted); } .mn-upd:empty { display: none; } .mn-idline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; } .mn-h1 { font: 400 44px/1 var(--f-display); letter-spacing: .5px; color: var(--text); } .mn-top.is-wallet .mn-h1 { min-width: 0; margin-right: 4px; font: 700 17px/1.35 var(--f-mono); letter-spacing: 0; overflow-wrap: anywhere; } .mn-land-sub { margin-top: 8px; max-width: 640px; font-size: 15px; color: var(--text2); } .mn-top.is-wallet .mn-land-sub { display: none; } .mn-wallet { display: flex; align-items: center; gap: 8px; } .mn-pill { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--s1); color: var(--text2); font: 700 12px/1 var(--f-body); transition: border-color .18s, color .18s; } .mn-pill:hover { border-color: var(--accent); color: var(--text); } /* rank: one small chip next to the address (insignia + name; multiplier and next rank in muted mono) */ .mn-rank { --pc: var(--accent); --pc-rim: var(--accent); --pc-rgb: var(--accent-rgb); display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 3px; border-radius: 999px; border: 1px solid rgba(var(--pc-rgb), .45); background: rgba(var(--pc-rgb), .08); color: var(--text); font: 700 13px/1 var(--f-body); white-space: nowrap; transition: border-color .18s, background .18s; } .mn-rank:hover { color: var(--text); border-color: rgba(var(--pc-rgb), .85); background: rgba(var(--pc-rgb), .14); } .mn-rank:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mn-rank .coin { --sz: 24px; border-width: 1.5px; } html[data-theme] .mn-rank .coin { box-shadow: none; } html[data-theme="dark"] .mn-rank b { color: var(--pc); } .mn-rank-el { display: inline-flex; margin-left: -3px; } .mn-rank-el svg { width: 16px; height: 16px; } .mn-rank-x, .mn-rank-nx { padding-left: 8px; border-left: 1px solid rgba(var(--pc-rgb), .35); font: 600 12px/1 var(--f-mono); color: var(--text2); } .mn-rank-nx { color: var(--muted); } /* lookup: full size on the landing view, compact on the right of the bar on a wallet */ .mn-look { min-width: 0; } .mn-look-lbl { display: block; margin-bottom: 8px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .mn-top:not(.is-wallet) .mn-look { max-width: 600px; margin-top: 20px; } .mn-look .ch-samples { margin-top: 2px; } .mn-top.is-wallet .mn-look { width: 360px; } .mn-top.is-wallet .mn-look-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mn-top.is-wallet .look-row input, .mn-top.is-wallet .look-row .btn { height: 36px; } .mn-top.is-wallet .look-row input { font-size: 12.5px; } .mn-top.is-wallet .look-err { min-height: 0; } .mn-top.is-wallet .look-err:empty { display: none; } .mn-top.is-wallet .ch-samples { display: none; } /* wallet body */ .mn-body { padding-top: 18px; } .mn-body .ch-note { margin-bottom: 14px; padding: 9px 14px; font-size: 12.5px; } .mn-note-short { display: none; } .mn-banner { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .07); font-size: 13.5px; line-height: 1.5; color: var(--text2); } .mn-banner.off { border-color: rgba(220, 38, 38, .4); background: rgba(220, 38, 38, .07); } html[data-theme="dark"] .mn-banner.off { border-color: rgba(248, 81, 73, .45); background: rgba(248, 81, 73, .08); } .mn-banner b { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 1px; } .mn-banner-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .15); color: var(--accent); } .mn-banner.off .mn-banner-ico { background: rgba(220, 38, 38, .13); color: var(--bad); } .mn-banner-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* KPI strip: one card, hairline dividers (1px gap on a border-coloured grid) */ .mn-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--border); box-shadow: var(--sh-1); } .mn-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; margin: 0; padding: 14px 18px 15px; border: 0; border-radius: 0; background: var(--s1); color: inherit; font: inherit; text-align: left; } .mn-k { font: 600 12.5px/1.2 var(--f-body); color: var(--muted); } .mn-k em { margin-left: 3px; padding: 2px 5px; border-radius: 5px; background: var(--s2); font: 700 10px/1 var(--f-mono); font-style: normal; color: var(--muted); vertical-align: 1px; } .mn-v { max-width: 100%; font: 800 24px/1.1 var(--f-body); letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-v small { margin-left: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--muted); } .mn-m { max-width: 100%; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-kpi-act { cursor: pointer; transition: background .15s; } .mn-kpi-act:hover { background: var(--s2); color: inherit; } .mn-kpi-act:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .mn-kpi-act:disabled { cursor: default; } .mn-kpi-act:disabled:hover { background: var(--s1); } .mn-go { color: var(--accent); font-weight: 700; } .mn-kpi-act:disabled .mn-go { color: var(--muted); font-weight: 400; } .mn-dim .mn-v { color: var(--muted); } /* chart + odds */ .mn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 16px; align-items: stretch; } .mn-grid.solo { grid-template-columns: minmax(0, 1fr); } .mn-card { min-width: 0; padding: 16px 18px; } .mn-card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; } .mn-h2 { font: 700 15px/1.3 var(--f-body); letter-spacing: -.01em; color: var(--text); } .mn-card-note { margin-top: 2px; font-size: 12.5px; color: var(--muted); } .mn-card-note:empty { display: none; } .chart-box.mn-chart-box { height: 220px; } /* the chart card stretches to the odds card: let the plot take the spare height so the readout line sits on the bottom edge */ .mn-chart:not([hidden]) { display: flex; flex-direction: column; } .mn-chart .chart-box.mn-chart-box { flex: 1 0 220px; min-height: 220px; height: auto; } .mn-chart-box canvas { position: absolute; top: 0; left: 0; } .chart-box.is-empty canvas { visibility: hidden; } .mn-chart-empty { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--muted); } .mn-chart-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; } .mn-hrs { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 8px; } .mn-hr { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 14px; border-left: 1px solid var(--border); line-height: 1; white-space: nowrap; } .mn-hr:first-child { padding-left: 0; border-left: 0; } .mn-hr:last-child { padding-right: 0; } .mn-hr i { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .02em; color: var(--muted); } .mn-hr b { font: 700 14px/1 var(--f-body); letter-spacing: -.01em; color: var(--text); } .mn-hr b small { margin-left: 3px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .02em; color: var(--muted); } .mn-hr-pk i::before, .mn-hr-lo i::before { content: ''; display: inline-block; width: 7px; height: 6px; margin-right: 6px; vertical-align: 1px; } .mn-hr-pk i::before { background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .mn-hr-lo i::before { background: var(--muted2); clip-path: polygon(0 0, 100% 0, 50% 100%); } .mn-odds { display: flex; flex-direction: column; } .mn-odds-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .mn-odds-tbl th { padding: 0 0 8px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; } .mn-odds-tbl td { padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--muted); text-align: right; white-space: nowrap; } .mn-odds-tbl th:first-child, .mn-odds-tbl td:first-child { text-align: left; } .mn-odds-tbl td:first-child { color: var(--text2); font-weight: 600; } .mn-odds-tbl td b { color: var(--text); font-weight: 800; } .mn-odds-wait { margin-top: auto; padding: 10px 12px; border-radius: 10px; background: rgba(var(--accent-rgb), .07); font-size: 13px; line-height: 1.5; color: var(--text2); } .mn-odds-wait b { color: var(--text); } .mn-odds-wait:empty { display: none; } .mn-odds-sub { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); } /* workers */ .mn-workers { margin-top: 16px; padding: 16px 0 0; overflow: hidden; } .mn-workers .mn-card-head { padding: 0 18px; margin-bottom: 10px; } .mn-wk-card .tbl-scroll { max-height: none; border: 0; border-radius: 0; } .mn-tbl th, .mn-tbl td { padding: 9px 14px; } .mn-tbl th:first-child, .mn-tbl td:first-child { padding-left: 18px; } .mn-tbl th:last-child, .mn-tbl td:last-child { padding-right: 18px; } .mn-tbl tbody:last-child tr.mn-wk-row:not(.open) td, .mn-tbl tbody:last-child tr.mn-wk-det td { border-bottom: 0; } .mn-tbl tbody tr.mn-wk-row:hover td { background: var(--s2); } .mn-wk-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .mn-wk-name .dev-art { width: 48px; height: 34px; } .mn-wk-id { font-size: 13px; font-weight: 600; color: var(--text); } .mn-wk-id b { color: var(--accent); font-weight: 700; } .wh-name { display: inline; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; overflow-wrap: anywhere; } .wh-name:hover, .wh-name.wh-selected { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .wh-name:disabled { color: var(--text); cursor: default; text-decoration: none; } .mn-wk-dev { margin-top: 2px; font-size: 12px; color: var(--muted); } .mn-wk-hr b { display: block; color: var(--text); font-weight: 800; } /* per-worker chart opens inline under the selected row; history is fetched only after expansion. */ .mn-wk-row { cursor: pointer; } .mn-wk-row.is-disabled { cursor: default; } .mn-wk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .mn-tbl tbody tr.mn-wk-row.is-disabled:hover td { background: transparent; } .mn-tbl td.mn-c-sp { width: 1%; padding-top: 6px; padding-bottom: 6px; text-align: center; } .mn-sp { display: block; width: 128px; max-width: none; height: 30px; margin-left: auto; overflow: visible; } .mn-sp .a { fill: url(#mnSpFade); } .mn-sp-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .mn-sp-defs stop { stop-color: var(--accent); } .mn-sp .l { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .mn-sp-none { font-size: 12px; color: var(--muted); } .mn-tbl td.mn-c-x { width: 1%; padding-left: 4px; } .mn-wk-tog { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--s1); color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .mn-wk-tog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .mn-wk-row:hover .mn-wk-tog { border-color: var(--accent); color: var(--accent); } .mn-wk-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mn-wk-tog:disabled { opacity: .45; cursor: default; } .mn-wk-row.open .mn-wk-tog { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); color: var(--accent); } .mn-wk-row.open .mn-wk-tog svg { transform: rotate(180deg); } .mn-tbl tbody tr.mn-wk-row.open td { background: rgba(var(--accent-rgb), .05); border-bottom-color: transparent; } .mn-tbl td[colspan] { padding: 0 18px 16px; background: rgba(var(--accent-rgb), .05); text-align: left; white-space: normal; } .mn-wk-pan { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--s1); box-shadow: var(--sh-1); } .mn-wk-ph { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; } .mn-wk-ph .mn-card-note { margin-top: 0; } .chart-box.mn-chart-box.mn-wk-box { height: 200px; } .mn-wk-pan .mn-chart-foot { margin-top: 10px; padding-top: 10px; } .wh-title { min-width: 0; } .wh-worker { display: block; max-width: 100%; color: var(--text2); overflow-wrap: anywhere; } .wh-panel #whSource { display: inline-block; margin-left: 8px; } .wh-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .wh-link { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--s1); color: var(--text2); font: 700 12px/1 var(--f-body); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .wh-link:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .06); } .wh-link:disabled { opacity: .55; cursor: default; } .wh-status { margin: 8px 0 10px; font-size: 13px; line-height: 1.5; color: var(--text2); } .wh-box { position: relative; } .wh-empty { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: 18px; text-align: center; font-weight: 600; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .wh-foot { align-items: flex-start; } .wh-stats, .wh-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .wh-stats { color: var(--text2); font-weight: 600; } .wh-stats:empty, .wh-note:empty, .wh-panel #whSource:empty { display: none; } @media (prefers-reduced-motion: reduce) { .mn-wk-tog, .mn-wk-tog svg { transition: none; } } .mn-wk-empty { padding: 26px 18px 28px; border-top: 1px solid var(--border); text-align: center; font-size: 14px; color: var(--muted); line-height: 1.7; } .mn-wk-empty b { color: var(--text); font-weight: 700; } /* folded extras: pool connection + alerts */ .mn-more { padding-top: 16px; } .mn-more .mn-in { display: grid; gap: 10px; } .mn-fold > summary { padding: 13px 16px; } .mn-fold[open] > summary { border-bottom: 1px solid var(--border); } .mn-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; } .mn-sum b { font-size: 14.5px; color: var(--text); } .mn-sum span { font-size: 13px; font-weight: 500; color: var(--muted); } .mn-fold-body { padding: 16px; } .mn-conn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .mn-cr { padding: 10px 0; border-top: 1px solid var(--border); } .mn-cr:first-of-type { border-top: 0; padding-top: 0; } .mn-cr-l { margin-bottom: 7px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .mn-cr-v { display: flex; align-items: center; gap: 10px; } .mn-cr-v code { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 9px; background: var(--s2); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .mn-cr-n { margin-top: 5px; font-size: 12px; color: var(--muted); } .mn-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .mn-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--s2); font-size: 13.5px; line-height: 1.5; color: var(--text2); } .mn-steps li b { color: var(--text); } .mn-steps .n { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 400 16px/1 var(--f-display); color: var(--on-accent); background: var(--accent); } .mn-al-tabs { margin-bottom: 14px; } .mn-al-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mn-lead { max-width: 680px; margin-bottom: 14px; font-size: 14px; color: var(--text2); } .mn-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .mn-type { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--s1); } .mn-type b { display: block; font-size: 13.5px; color: var(--text); } .mn-type span:not(.mn-type-ico) { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); } .mn-type-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); } .mn-type-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mn-al-btn { margin-top: 14px; } .mn-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; } .mn-code-row .ch-code { margin-top: 0; overflow-wrap: anywhere; } .mn-etypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .mn-et { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border2); background: var(--s1); color: var(--text2); text-align: left; font: inherit; cursor: pointer; transition: border-color .18s, background .18s; } .mn-et:hover { border-color: var(--accent); } .mn-et b { display: block; font-size: 13.5px; color: var(--text); } .mn-et span:not(.mn-et-box) { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); } .mn-et-box { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; border: 2px solid var(--border2); background: var(--s1); color: transparent; transition: background .15s, border-color .15s; } .mn-et-box svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .mn-et.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); } .mn-et.on .mn-et-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .mn-et:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mn-em-form { max-width: 520px; } .mn-fine { margin-top: 8px; font-size: 12.5px; color: var(--muted); } .mn-em-status { min-height: 20px; margin-top: 10px; font: 600 13px/1.5 var(--f-body); } .mn-em-status.ok { color: var(--ok); } .mn-em-status.bad { color: var(--bad); } .mn-pre { margin: 0 0 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--s2); color: var(--text2); font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; } .mn-soon { margin-bottom: 0; } .mn-main .regline { padding: 22px var(--gut) 36px; } /* share modal */ body.mn-lock { overflow: hidden; } .mn-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; display: grid; place-items: center; padding: 18px; } .mn-modal-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(8, 11, 16, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .mn-modal-card { position: relative; width: min(820px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; padding: 20px 22px 18px; box-shadow: var(--sh-3); } .mn-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .mn-modal-head h3 { font: 700 18px/1.3 var(--f-body); letter-spacing: -.01em; color: var(--text); } #mnShareCv { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border2); background: #0d1117; } .mn-modal-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .mn-modal .mn-fine { margin-top: 12px; } @media (max-width: 1180px) { .mn-sp { width: 96px; } .mn-top.is-wallet .mn-top-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "line"; } .mn-top.is-wallet .mn-look { display: none; } /* the menu sheet has the lookup below 1180 px */ .mn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-grid { grid-template-columns: minmax(0, 1fr) 300px; } .mn-types, .mn-etypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .mn-grid { grid-template-columns: minmax(0, 1fr); } .mn-conn-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .mn-tbl th:nth-child(4), .mn-tbl td.mn-c-1hr, .mn-tbl th:nth-child(5), .mn-tbl td.mn-c-1d { display: none; } } @media (max-width: 620px) { .mn-top-in { padding: 22px var(--gut) 20px; } .mn-top.is-wallet .mn-top-in { padding: 14px var(--gut) 14px; } .mn-h1 { font-size: 36px; } .mn-top.is-wallet .mn-h1 { flex-basis: 100%; margin-right: 0; font-size: 13.5px; } .mn-idline { gap: 8px; margin-top: 10px; } .mn-rank-nx { display: none; } .mn-body { padding-top: 14px; } .mn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-kpi { gap: 4px; padding: 11px 13px 12px; } .mn-k { font-size: 12px; } .mn-v { font-size: 20px; } .mn-v small { font-size: 12px; } .mn-m { font-size: 12px; } .mn-grid, .mn-workers { margin-top: 12px; } .mn-card { padding: 14px; } .mn-chart .mn-card-head { align-items: center; flex-wrap: nowrap; } .mn-chart .mn-card-note { display: none; } .mn-note-more { display: none; } .mn-note-short { display: inline; } .mn-body .ch-note { gap: 4px 10px; } .mn-chart .chart-box.mn-chart-box { flex-basis: 190px; min-height: 190px; } .mn-chart-foot { display: block; } #mnAvgLine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } #mnAvgLine .mn-hr { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 0 0 10px; } #mnAvgLine .mn-hr:first-child { padding-left: 0; } .mn-hrs-rng { margin-top: 12px; } .mn-hrs-rng:empty { display: none; } .mn-workers { padding-top: 14px; } .mn-workers .mn-card-head { padding: 0 14px; } .mn-tbl, .mn-tbl tbody { display: block; } .mn-tbl thead { display: none; } /* phone: name + 5m + chevron / 1hr 1d / shares best updated. */ .mn-tbl tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border); } .mn-tbl tr[hidden] { display: none; } .mn-tbl td, .mn-tbl td.mn-c-1hr, .mn-tbl td.mn-c-1d, .mn-tbl td:first-child, .mn-tbl td:last-child { display: block; padding: 0; border: 0; text-align: left; } .mn-tbl tbody tr.mn-wk-row:hover td, .mn-tbl tbody tr.mn-wk-row.open td { background: none; } .mn-tbl tr.mn-wk-row.open, .mn-tbl tr.mn-wk-det { background: rgba(var(--accent-rgb), .05); } .mn-tbl tr.mn-wk-det { display: block; padding: 0 14px 14px; border-top: 0; } .mn-tbl td[colspan] { padding: 0; background: none; } .mn-tbl .mn-c-name { grid-column: span 3; min-width: 0; } .mn-tbl .mn-c-hr { grid-column: span 2; text-align: right; } .mn-tbl td.mn-c-sp { grid-column: span 1; width: auto; padding: 0; align-self: end; } .mn-tbl td.mn-c-x { grid-column: span 1; width: auto; padding: 0; align-self: end; } .mn-tbl .mn-c-1hr, .mn-tbl .mn-c-1d { grid-column: span 3; } .mn-tbl .mn-c-sh, .mn-tbl .mn-c-best, .mn-tbl .mn-c-upd { grid-column: span 2; } .mn-tbl td[data-l] { min-width: 0; font-size: 12.5px; color: var(--text); } .mn-tbl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 700 10px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .mn-sp { width: 100%; height: 32px; margin-top: 4px; } .chart-box.mn-chart-box.mn-wk-box { height: 180px; } .wh-actions { width: 100%; justify-content: flex-start; } .wh-actions .seg { flex: 1 1 100%; } .wh-link { flex: 1 1 110px; } .wh-foot { display: block; } .wh-note { margin-top: 8px; } .mn-tbl .mn-c-name { white-space: normal; } .mn-wk-name { gap: 8px; } .mn-wk-name > div { min-width: 0; } .mn-wk-id { overflow-wrap: anywhere; } .mn-wk-name .dev-art { width: 44px; height: 32px; } .mn-hide-sm { display: none; } .mn-fold > summary { padding: 12px 14px; } .mn-fold-body { padding: 14px; } .mn-types, .mn-etypes { grid-template-columns: minmax(0, 1fr); } .mn-banner { padding: 11px 13px; gap: 10px; } .mn-modal { padding: 10px; } .mn-modal-card { padding: 16px 14px 14px; } .mn-modal-act .btn { flex: 1 1 auto; } } /* ========================================================================== Block Rush / Arcade (arcade.html). Everything is prefixed ar-. Reuses: .hero.phero, .card, .sticker, .sec/.band, .kicker, .btn, .dev, .dot, .regline, .lw dialog ========================================================================== */ :root { --ar-gold: #b7791f; --ar-red: #dc2626; --ar-purple: #7c3aed; --ar-amber: #f5b72b; } html[data-theme="dark"] { --ar-gold: #f5b72b; --ar-red: #f87171; --ar-purple: #a78bfa; } [class*="ar-"][hidden] { display: none !important; } .ar-small-lbl { display: flex; align-items: center; gap: 7px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ar-linkbtn { padding: 0; border: 0; background: none; color: var(--accent); font: 700 13px/1.4 var(--f-body); text-decoration: underline; cursor: pointer; } /* hero */ .ar-hstats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); } .ar-hstats b { display: block; font: 800 26px/1 var(--f-body); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; } .ar-hstats span { display: block; margin-top: 7px; font-size: 12.5px; color: var(--muted); } .ar-pool { padding: 26px 26px 22px; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), var(--sticker-a)), transparent 60%), var(--s1); border-color: rgba(var(--accent-rgb), .3); box-shadow: var(--sh-2); min-width: 0; } .ar-pool-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; } .ar-pool-amt span { font: 400 clamp(72px, 8vw, 104px)/.85 var(--f-display); letter-spacing: 1px; color: var(--accent); font-variant-numeric: tabular-nums; } .ar-pool-amt small { font: 700 12.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ar-pool-note { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .ar-pool-note b { color: var(--text); } .ar-localadd { display: block; margin-top: 6px; color: var(--accent); font-weight: 700; } .ar-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin-top: 24px; } .ar-step { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; } .ar-medal { width: 26px; height: 26px; margin-bottom: 7px; border-radius: 50%; display: grid; place-items: center; background: #cbd5e1; color: #1a1205; font: 800 12px/1 var(--f-body); } .ar-step.s1 .ar-medal { background: var(--ar-amber); } .ar-step.s3 .ar-medal { background: #d08a5a; } .ar-who { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px/1.2 var(--f-mono); color: var(--text2); } .ar-cut { margin-top: 4px; font: 800 19px/1.1 var(--f-body); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; } .ar-cut::after { content: ' pts'; font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--muted); } .ar-bar { display: block; width: 100%; margin-top: 9px; border: 1px solid rgba(var(--accent-rgb), .3); border-bottom: 0; border-radius: 9px 9px 0 0; background: linear-gradient(180deg, rgba(var(--accent-rgb), .34), rgba(var(--accent-rgb), .07)); } .ar-step.s1 .ar-bar { height: 58px; } .ar-step.s2 .ar-bar { height: 40px; } .ar-step.s3 .ar-bar { height: 28px; } .ar-pool-foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; padding-top: 16px; border-top: 1px solid var(--border); } .ar-pool-cd { margin-top: 8px; font: 800 22px/1 var(--f-body); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; } .ar-pool-sub { margin-top: 5px; font-size: 12px; color: var(--muted); } .ar-mywk { font-size: 13px; line-height: 1.5; color: var(--muted); text-align: right; } .ar-mywk b { color: var(--text); } /* play: test strip + HUD */ .ar-walletbtn img { flex: none; } .ar-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; padding: 11px 14px; border-radius: 12px; border: 1px dashed rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .06); font-size: 13px; line-height: 1.5; color: var(--text2); } .ar-test > b { font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; color: var(--accent); } .ar-test > span { flex: 1 1 320px; min-width: 0; } .ar-hud { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .ar-stat { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--s1); } .ar-stat img { flex: none; width: 30px; height: 30px; margin-top: 5px; } .ar-stat > div { min-width: 0; } .ar-stat b { display: block; margin-top: 8px; white-space: nowrap; font: 800 20px/1.1 var(--f-body); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; } .ar-stat b small { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--muted); } .ar-stat b.bump { animation: arBump .35s var(--ease); } .ar-eur { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); } .ar-eur:empty { display: none; } @keyframes arBump { 40% { transform: scale(1.1); color: var(--accent); } } .ar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .ar-rig, .ar-lucky { display: flex; flex-direction: column; min-width: 0; padding: 22px; } .ar-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .ar-state { flex: none; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border2); background: var(--s2); color: var(--muted); font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .ar-state.live { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); } .ar-state.hot { color: var(--ar-gold); border-color: rgba(245, 183, 43, .55); background: rgba(245, 183, 43, .1); } .ar-state.bad { color: var(--ar-red); border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .08); } .ar-state.ghost { padding-right: 0; border-color: transparent; background: none; letter-spacing: .06em; } /* rig stage */ .ar-stage { position: relative; display: grid; place-items: center; height: 280px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: radial-gradient(circle at 50% 62%, rgba(var(--accent-rgb), .2), transparent 68%), var(--s2); transition: box-shadow .25s, background .25s; } .ar-stage.oc { background: radial-gradient(circle at 50% 62%, rgba(245, 158, 11, .32), transparent 68%), var(--s2); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .55), 0 0 28px -6px rgba(245, 158, 11, .5); } .ar-stage.cooked { background: radial-gradient(circle at 50% 62%, rgba(56, 189, 248, .22), transparent 68%), var(--s2); } .ar-stage.cooked .ar-art { opacity: .75; filter: grayscale(.55); } .ar-stage.surge::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ar-amber); pointer-events: none; } .ar-rigbtn { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .ar-rigbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; border-radius: 14px; } .ar-art { position: relative; z-index: 1; display: block; transition: transform .08s; } .ar-rigbtn:active .ar-art { transform: scale(.94); } .ar-stage .ar-art svg { width: 250px; max-width: 78vw; height: auto; max-height: 210px; } .ar-ring { position: absolute; left: 50%; top: 52%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .38); pointer-events: none; animation: arRing 2.4s ease-out infinite; } .ar-stage.oc .ar-ring { border-color: rgba(245, 158, 11, .7); animation-duration: 1s; } .ar-stage.cooked .ar-ring { animation: none; opacity: 0; } @keyframes arRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } } .ar-combo { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 6px 10px; border-radius: 8px; background: var(--ar-amber); color: #1a1205; font: 800 12px/1 var(--f-mono); letter-spacing: .04em; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; } .ar-combo.on { opacity: 1; transform: none; } .ar-rentbadge { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 6px 10px; border-radius: 8px; background: var(--ar-purple); color: #fff; font: 700 11px/1 var(--f-mono); letter-spacing: .04em; } .ar-pops { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; } .ar-pop { position: absolute; font: 800 17px/1 var(--f-body); color: var(--accent); text-shadow: 0 1px 0 var(--s1); white-space: nowrap; animation: arPop .95s ease-out forwards; } .ar-pop.lucky { font-size: 21px; color: var(--ar-gold); } @keyframes arPop { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) scale(1.06); } } .ar-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: grid; place-items: center; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } html[data-theme="dark"] .ar-cover { background: rgba(13, 17, 23, .62); } .ar-rigname { margin-top: 16px; font: 800 18px/1.2 var(--f-body); letter-spacing: -.01em; color: var(--text); } .ar-readout { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 13px; color: var(--muted); } .ar-readout b { color: var(--text); font-variant-numeric: tabular-nums; } .ar-cool { margin-left: auto; } .ar-meter-wrap { margin-top: 16px; } .ar-meter-lbl { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ar-meter { position: relative; height: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 99px; background: var(--s3); } .ar-meter.heat { background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, var(--ar-amber) 72%, #ef4444 100%); } .ar-meter.press { background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 45%, #f59e0b 75%, #ef4444 100%); } .ar-meter i { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; background: var(--s3); transition: width .6s linear; } .ar-redline { position: absolute; left: 93.3%; top: 0; bottom: 0; width: 2px; background: #ef4444; } .ar-oc { width: 100%; height: 46px; margin-top: 14px; border-radius: 12px; border-color: var(--border2); background: var(--s1); color: var(--text); font-size: 15px; } .ar-oc:hover { border-color: var(--ar-amber); } .ar-oc.on { background: var(--ar-amber); border-color: var(--ar-amber); color: #1a1205; box-shadow: 0 8px 20px -8px rgba(245, 158, 11, .7); } .ar-oc:disabled { opacity: .55; cursor: not-allowed; } .ar-risk { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .ar-risk b { color: var(--text2); } /* lucky hash */ .ar-jackpot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(245, 183, 43, .45); background: rgba(245, 183, 43, .09); } .ar-jp-note { margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--muted); } .ar-jp-val { flex: none; display: flex; align-items: baseline; gap: 6px; } .ar-jp-val b { font: 400 42px/1 var(--f-display); letter-spacing: 1px; color: var(--ar-gold); font-variant-numeric: tabular-nums; } .ar-jp-val small { font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ar-mults { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; } .ar-mult { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border: 1px solid var(--border2); border-radius: 12px; background: var(--s2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; } .ar-mult b { font: 400 30px/1 var(--f-display); letter-spacing: .5px; } .ar-mult span { font: 600 11px/1 var(--f-mono); color: var(--muted); } .ar-mult:hover { border-color: var(--accent); transform: translateY(-1px); } .ar-mult.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .18); } .ar-mult.on b { color: var(--accent); } .ar-lbl { display: block; margin: 16px 0 8px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ar-wager { display: flex; gap: 8px; } .ar-wager input { flex: 1 1 0; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--border2); border-radius: 10px; background: var(--bg); color: var(--text); font: 700 16px/1 var(--f-mono); } .ar-wager input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); } .ar-wager input[type="number"] { -moz-appearance: textfield; } .ar-wager input::-webkit-outer-spin-button, .ar-wager input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ar-chip { flex: none; width: 52px; height: 46px; border: 1px solid var(--border2); border-radius: 10px; background: var(--s2); color: var(--text2); font: 700 13px/1 var(--f-mono); cursor: pointer; transition: border-color .15s, color .15s; } .ar-chip:hover { border-color: var(--accent); color: var(--text); } .ar-roll { width: 100%; margin-top: 12px; } .ar-roll:disabled { opacity: .7; cursor: progress; } .ar-display { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--s2); } .ar-hashline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.3 var(--f-mono); letter-spacing: .02em; color: var(--text2); } .ar-hashline.spin { color: var(--accent); } .ar-result { margin-top: 8px; font: 700 14px/1.4 var(--f-body); color: var(--muted); } .ar-result.win { color: var(--accent); } .ar-result.lose { color: var(--ar-red); } .ar-sc { margin-left: 4px; padding: 2px 7px; border-radius: 6px; background: rgba(var(--accent-rgb), .14); font-size: 12px; } .ar-streak { margin-top: 4px; min-height: 17px; font-size: 12.5px; color: var(--muted); } .ar-streak b { color: var(--text); } /* arena table, contracts, stream */ .ar-cols { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; align-items: stretch; margin-top: 18px; } .ar-lbcard, .ar-ctcard, .ar-streamcard { min-width: 0; padding: 20px 20px 18px; } .ar-lb { margin: 0; padding: 0; list-style: none; } .ar-lbrow { display: grid; grid-template-columns: 26px 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); } .ar-lbrow:first-child { border-top: 0; } .ar-lbrow .rk { text-align: center; font: 800 13px/1 var(--f-mono); color: var(--muted); } .ar-lbrow.p1 .rk { color: var(--ar-gold); } .ar-lbrow.p2 .rk { color: var(--text2); } .ar-lbrow.p3 .rk { color: #b86f3f; } .ar-lbrow .av { width: 28px; height: 28px; border-radius: 50%; } .ar-lbrow .hd { min-width: 0; } .ar-lbrow .hd b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text); } .ar-lbrow .you { display: block; font-size: 11px; font-style: normal; font-weight: 700; color: var(--accent); } .ar-lbrow .pow { white-space: nowrap; font: 600 11.5px/1 var(--f-mono); color: var(--muted); } .ar-lbrow .pt { min-width: 52px; text-align: right; font: 800 14px/1 var(--f-body); letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; } .ar-lbrow.me { margin: 0 -10px; padding: 9px 10px; border-radius: 10px; border-top-color: transparent; background: rgba(var(--accent-rgb), .09); } .ar-lbrow.me + .ar-lbrow { border-top-color: transparent; } .ar-lb-cta { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .ar-contracts { display: grid; gap: 10px; } .ar-ct { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--s2); } .ar-ct > div { flex: 1 1 auto; min-width: 0; } .ar-ct b { display: block; font-size: 13.5px; color: var(--text); } .ar-ct span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); } .ar-ct i { display: block; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: var(--s3); } .ar-ct u { display: block; height: 100%; border-radius: 99px; background: var(--accent); text-decoration: none; transition: width .4s var(--ease); } .ar-ct em { flex: none; font: 700 12px/1 var(--f-mono); font-style: normal; color: var(--ar-gold); } .ar-ct.done { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .07); } .ar-ct.done em { color: var(--accent); } .ar-sub-title { margin: 20px 0 10px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ar-sim { margin-left: 6px; padding: 2px 6px; border: 1px solid var(--border2); border-radius: 5px; font-size: 9.5px; letter-spacing: .08em; color: var(--muted); } .ar-achs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .ar-achs li { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; opacity: .5; } .ar-achs li.got { opacity: 1; border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .07); } .ar-achs b { display: block; font-size: 12.5px; color: var(--text); } .ar-achs span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--muted); } .ar-stream { height: 190px; overflow: hidden; font: 500 11.5px/1.7 var(--f-mono); color: var(--muted); } .ar-sl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ar-sl:nth-child(n+6) { opacity: .55; } .ar-stream:empty::before { content: "Shares from your rigs stream in here once the run starts."; display: block; padding-top: 6px; font: 500 13px/1.5 var(--f-body); color: var(--muted); } .ar-sl.share { color: var(--accent); } .ar-sl.luck { color: var(--ar-purple); } .ar-sl.fail { color: var(--ar-red); } .ar-sl.block { color: var(--ar-gold); font-weight: 700; } .ar-feed { display: grid; gap: 8px; min-height: 120px; } .ar-fe { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.4; color: var(--text2); } .ar-fe-av { flex: none; width: 20px; height: 20px; border-radius: 50%; } .ar-fe b { font-size: 12px; color: var(--text); } .ar-fe .pos { color: var(--accent); } .ar-fe .neg { color: var(--ar-red); } .ar-fe .gld { color: var(--ar-gold); } .ar-empty { font-size: 13px; line-height: 1.5; color: var(--muted); } /* gauntlet */ .ar-g-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 18px; align-items: stretch; } .ar-g-prize { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(239, 68, 68, .16), transparent 62%), var(--s1); } .ar-g-art svg { width: 260px; max-width: 100%; height: auto; max-height: 200px; } .ar-g-name { margin-top: 8px; font: 400 46px/1 var(--f-display); letter-spacing: 1px; color: var(--text); } .ar-g-spec { margin-top: 8px; font: 600 12px/1.5 var(--f-mono); color: var(--muted); } .ar-g-road { min-width: 0; padding: 24px; } .ar-champ { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(245, 183, 43, .45); border-radius: 12px; background: rgba(245, 183, 43, .1); font-size: 14px; line-height: 1.5; color: var(--text2); } .ar-champ .cc { display: flex; flex: none; gap: 2px; } .ar-champ b { color: var(--text); } .ar-crown { display: inline-block; width: 22px; height: 22px; } .ar-crown svg { display: block; width: 100%; height: 100%; fill: var(--ar-amber); stroke: #b7791f; stroke-width: 1; stroke-linejoin: round; } .ar-crown.sm { width: 22px; height: 22px; } .ar-crown.xs { width: 14px; height: 14px; } .ar-crowns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; padding: 0; list-style: none; } .ar-crowns li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 9px; border: 1px dashed var(--border2); border-radius: 12px; font: 700 10.5px/1 var(--f-mono); color: var(--muted); } .ar-crowns .ar-crown { width: 30px; height: 30px; opacity: .25; filter: grayscale(.8); } .ar-crowns li.won { border-style: solid; border-color: rgba(245, 183, 43, .65); background: rgba(245, 183, 43, .1); } .ar-crowns li.won .ar-crown { opacity: 1; filter: none; } .ar-curse { font-size: 13.5px; line-height: 1.55; color: var(--muted); } .ar-fallen-lbl { margin-top: 20px; } .ar-fallen { margin: 10px 0 0; padding: 0; list-style: none; } .ar-fallen li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); } .ar-fallen .fc { display: flex; flex: none; width: 84px; } .ar-fallen b { font-size: 12.5px; color: var(--text); } .ar-fallen .fn { margin-left: auto; min-width: 0; text-align: right; font-size: 12px; color: var(--muted); } .ar-fallen-foot { margin-top: 10px; font-size: 12.5px; color: var(--muted); } .ar-fallen-foot b { color: var(--text2); } /* rig shop */ .ar-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .ar-rigcard { display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .ar-rigcard[data-rig="farm"] { grid-column: span 2; } .ar-rc-art { display: grid; place-items: center; height: 132px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 50% 66%, rgba(var(--accent-rgb), .16), transparent 70%), var(--s2); } .ar-rc-art svg { width: 150px; height: auto; max-height: 110px; } .ar-rc-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 16px; } .ar-rc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ar-rc-nm { font-size: 15px; color: var(--text); } .ar-rc-own { flex: none; font: 700 13px/1 var(--f-mono); color: var(--text2); } .ar-rc-own .bad { color: var(--ar-red); } .ar-rc-th { font: 600 12.5px/1.3 var(--f-mono); color: var(--accent); } .ar-rc-risk { font-size: 12px; color: var(--muted); } .ar-buy { width: 100%; margin-top: auto; padding-top: 0; } .ar-rc-risk + .ar-buy { margin-top: 10px; } .ar-buy img { flex: none; } .ar-buy.cant, .ar-upbtn.cant { opacity: .5; cursor: not-allowed; filter: grayscale(.35); } .ar-fix { width: 100%; margin-top: 4px; } .ar-rigcard.broken { border-color: rgba(239, 68, 68, .5); } /* workshop */ .ar-ups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ar-up { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; } .ar-up-head { display: flex; align-items: center; gap: 12px; } .ar-up-head img { flex: none; width: 34px; height: 34px; } .ar-up-nm { font-size: 16px; letter-spacing: -.01em; color: var(--text); } .ar-up-desc { flex: 1 1 auto; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .ar-up-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .ar-up-price b { font: 800 20px/1 var(--f-body); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; } .ar-up-price { font-size: 12.5px; color: var(--muted); } .ar-up-price s { margin-left: 4px; color: var(--muted2); } .ar-up-price .ok { color: var(--ok); font-weight: 700; } .ar-up.owned { border-color: rgba(var(--accent-rgb), .45); } .ar-up.rental { background: radial-gradient(circle at 100% 0%, rgba(139, 92, 246, .12), transparent 60%), var(--s1); } .ar-boost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 24px; margin-top: 18px; padding: 24px; } .ar-boost-title { margin: 0 0 8px; font: 400 36px/1 var(--f-display); letter-spacing: .6px; color: var(--text); } .ar-boost-copy p { font-size: 14px; line-height: 1.55; color: var(--text2); } .ar-boost-copy p b { color: var(--text); } .ar-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ar-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--border2); border-radius: 12px; background: var(--s2); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, background .15s; } .ar-pack b { font: 400 34px/1 var(--f-display); letter-spacing: .5px; color: var(--accent); } .ar-pack span { font-size: 14px; font-weight: 700; color: var(--text); } .ar-pack em { font-size: 12px; font-style: normal; color: var(--muted); } .ar-pack:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); transform: translateY(-2px); } /* how it works */ .ar-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ar-how-val { margin-top: 22px; font-size: 22px; white-space: normal; } .ar-fine { max-width: 780px; margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--muted); } /* dialogs */ .ar-samples { display: grid; gap: 8px; } .ar-sample { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border2); border-radius: 12px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; } .ar-sample:hover, .ar-sample.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); } .ar-sample-av { flex: none; width: 32px; height: 32px; border-radius: 50%; } .ar-sample-t { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; } .ar-sample-t b { font-size: 14px; } .ar-sample-t .mono { font-size: 12px; color: var(--text2); } .ar-sample-t em { font-size: 12px; font-style: normal; line-height: 1.35; color: var(--muted); } .ar-sample-p { flex: none; text-align: right; } .ar-sample-p b { display: block; font: 800 16px/1 var(--f-body); font-variant-numeric: tabular-nums; } .ar-sample-p small { font: 700 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .lw-card.ar-wide { width: min(900px, 100%); } .ar-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .ar-tier { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 10px; border: 1px solid var(--border2); border-radius: 14px; background: var(--bg); color: var(--text); text-align: center; cursor: pointer; transition: border-color .15s, transform .15s, background .15s; } .ar-tier:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); transform: translateY(-2px); } .ar-tier.whale { border-color: rgba(245, 183, 43, .6); } .ar-tier.cant { opacity: .5; cursor: not-allowed; } .ar-tier.cant:hover { border-color: var(--border2); background: var(--bg); transform: none; } .ar-tier-art { display: grid; place-items: center; height: 78px; } .ar-tier-art svg { width: 108px; height: auto; max-height: 72px; } .ar-tier-n { font: 400 25px/1 var(--f-display); letter-spacing: .6px; } .ar-tier-d { font-size: 12px; line-height: 1.45; color: var(--muted); } .ar-tier-p { font: 800 17px/1.2 var(--f-body); color: var(--accent); } .ar-tier-c { font-size: 11.5px; line-height: 1.4; color: var(--muted); } .ar-tier-c b { color: var(--text2); } .ar-tier-c i { font-style: normal; } .ar-entrybal { margin-top: 14px; font-size: 13.5px; color: var(--text2); } .ar-entrybal b { color: var(--text); } .ar-entrybal a { color: var(--accent); font-weight: 700; text-decoration: underline; } /* overlays: event pills, block banner, toasts, golden hash, confetti */ .ar-pills { position: fixed; top: 72px; left: 50%; z-index: 65; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateX(-50%); pointer-events: none; } .ar-pill { padding: 7px 14px; border-radius: 999px; font: 700 12px/1 var(--f-mono); letter-spacing: .04em; white-space: nowrap; box-shadow: var(--sh-2); } .ar-pill.surge { background: var(--ar-amber); color: #1a1205; } .ar-pill.retarget { background: #7c3aed; color: #fff; } .ar-pill.frenzy { background: #ef4444; color: #fff; } .ar-banner { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 160; display: grid; place-items: center; pointer-events: none; } .ar-banner-in { padding: 22px 40px; border: 2px solid var(--ar-amber); border-radius: 18px; background: var(--s1); box-shadow: var(--sh-3), 0 0 60px -10px rgba(245, 183, 43, .6); text-align: center; animation: arBanner 2.4s var(--ease) forwards; } .ar-banner-in b { display: block; font: 400 clamp(40px, 8vw, 62px)/1 var(--f-display); letter-spacing: 1px; color: var(--accent); } .ar-banner-in span { display: block; margin-top: 8px; font: 800 20px/1 var(--f-mono); color: var(--ar-gold); } @keyframes arBanner { 0% { opacity: 0; transform: scale(.85); } 12% { opacity: 1; transform: scale(1.03); } 20% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } .ar-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 170; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; } .ar-toast { padding: 10px 14px; border-left: 4px solid var(--muted2); border-radius: 10px; background: var(--text); color: var(--bg); font: 600 13px/1.4 var(--f-body); box-shadow: var(--sh-3); animation: arToastIn .25s var(--ease), arToastOut .4s 3.1s forwards; } .ar-toast b { font-weight: 800; } .ar-toast.green { border-left-color: #22c55e; } .ar-toast.red { border-left-color: #ef4444; } .ar-toast.gold { border-left-color: var(--ar-amber); } .ar-toast.purple { border-left-color: #a78bfa; } @keyframes arToastIn { from { opacity: 0; transform: translateX(14px); } } @keyframes arToastOut { to { opacity: 0; transform: translateY(6px); } } .ar-golden { position: fixed; z-index: 150; display: grid; place-items: center; width: 70px; height: 70px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(245, 183, 43, .55), transparent 70%); cursor: pointer; animation: arGold 1.2s ease-in-out infinite alternate; } @keyframes arGold { from { transform: translateY(-8px) scale(.94); } to { transform: translateY(8px) scale(1.08); } } .ar-conf { position: absolute; top: 30%; z-index: 4; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; animation: arConf 1.4s ease-out forwards; } @keyframes arConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(540deg); } } .ar-shake { animation: arShake .4s; } @keyframes arShake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } @media (max-width: 1240px) { .ar-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1180px) { .ar-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-lbcard { grid-column: 1 / -1; } .ar-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ar-rigcard[data-rig="farm"] { grid-column: span 3; } } @media (max-width: 1024px) { .ar-grid, .ar-g-grid { grid-template-columns: minmax(0, 1fr); } .ar-g-prize { padding: 22px; } .ar-ups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-boost { grid-template-columns: minmax(0, 1fr); } .ar-mywk { text-align: left; } } @media (max-width: 760px) { .ar-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ar-cols { grid-template-columns: minmax(0, 1fr); } .ar-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ar-rigcard[data-rig="farm"] { grid-column: span 2; } .ar-ups, .ar-how-grid { grid-template-columns: minmax(0, 1fr); } .ar-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-pills { top: auto; bottom: 54px; } .ar-toasts { top: 66px; right: 12px; bottom: auto; left: 12px; align-items: stretch; max-width: none; } .ar-crowns { gap: 6px; } .ar-lbrow .pow { display: none; } } @media (max-width: 520px) { .ar-hstats { gap: 12px 22px; } .ar-hstats > div:nth-child(3) { display: none; } .ar-hstats b { font-size: 22px; } .ar-pool { padding: 20px 18px 18px; } .ar-rig, .ar-lucky { padding: 18px 16px; } .ar-stage { height: 240px; } .ar-stage .ar-art svg { width: 210px; } .ar-ring { width: 180px; height: 180px; margin: -90px 0 0 -90px; } .ar-stat { padding: 12px 10px; gap: 9px; } .ar-stat img { width: 24px; height: 24px; margin-top: 3px; } .ar-stat b { font-size: 17px; } .ar-jackpot { flex-direction: column; align-items: flex-start; gap: 8px; } .ar-mult b { font-size: 26px; } .ar-shop { grid-template-columns: minmax(0, 1fr); } .ar-rigcard[data-rig="farm"] { grid-column: span 1; } .ar-rigcard { flex-direction: row; } .ar-rc-art { width: 118px; height: auto; flex: none; border-right: 1px solid var(--border); border-bottom: 0; } .ar-rc-art svg { width: 100px; } .ar-g-road { padding: 18px 14px; } .ar-crowns li { padding: 10px 0 8px; font-size: 9.5px; } .ar-crowns .ar-crown { width: 22px; height: 22px; } .ar-fallen li { flex-wrap: wrap; } .ar-fallen .fn { flex: 1 1 100%; margin-left: 94px; text-align: left; } .ar-boost { padding: 18px 16px; } .ar-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-achs { grid-template-columns: minmax(0, 1fr); } .ar-lbcard, .ar-ctcard, .ar-streamcard { padding: 18px 14px 16px; } .ar-banner-in { padding: 18px 24px; } } @media (max-width: 400px) { .ar-tiers { grid-template-columns: minmax(0, 1fr); } .ar-pool-amt span { font-size: 68px; } .ar-mults { gap: 6px; } } @media (prefers-reduced-motion: reduce) { .ar-ring, .ar-golden, .ar-banner-in, .ar-toast, .ar-pop, .ar-conf, .ar-shake, .ar-stat b.bump { animation: none; } .ar-toast { opacity: 1; } .ar-art, .ar-meter i, .ar-ct u { transition: none; } } /* ===== Arcade: Chest points ledger + redline burn (v42) ===== */ a.ar-stat { color: inherit; text-decoration: none; transition: border-color .15s, background .15s; } a.ar-stat:hover, a.ar-stat:focus-visible { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .05); } .ar-bal .ar-eur { white-space: normal; line-height: 1.35; } .ar-ledger { margin-bottom: 18px; padding: 22px; scroll-margin-top: 84px; } .ar-lg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .ar-lg-head .kicker { margin-bottom: 8px; } .ar-lg-title { margin: 0; font: 400 34px/1 var(--f-display); letter-spacing: .6px; color: var(--text); } .ar-lg-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px; border: 1px dashed var(--border2); border-radius: 12px; background: var(--s2); } .ar-lg-empty p { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text2); } .ar-lg-body[hidden], .ar-lg-empty[hidden] { display: none; } .ar-lg-left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; } .ar-lg-left b { font: 800 32px/1.1 var(--f-body); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .ar-lg-left .ar-eur { margin: 0; font-size: 13px; } .ar-lg-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .ar-redrisk { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border2); border-radius: 12px; background: var(--s2); } .ar-redrisk[hidden] { display: none; } .ar-redrisk .ar-meter-lbl { margin-bottom: 6px; } .ar-redrisk .ar-meter-lbl b { font: 800 17px/1 var(--f-body); letter-spacing: -.01em; color: var(--text); } .ar-redrisk .ar-risk { margin-top: 0; } .ar-redrisk.mid { border-color: rgba(245, 183, 43, .5); } .ar-redrisk.mid .ar-meter-lbl b { color: var(--ar-gold); } .ar-redrisk.high, .ar-redrisk.live { border-color: rgba(239, 68, 68, .55); background: rgba(239, 68, 68, .07); } .ar-redrisk.high .ar-meter-lbl b, .ar-redrisk.live .ar-meter-lbl b { color: var(--ar-red); } .ar-redrisk.live { animation: arRisk 1s ease-in-out infinite alternate; } .ar-redrisk.safe { border-color: rgba(var(--accent-rgb), .45); } .ar-redrisk.safe .ar-meter-lbl b { color: var(--ok); } @keyframes arRisk { from { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } to { box-shadow: 0 0 0 3px rgba(239, 68, 68, .28); } } .ar-rc-risk .bad { color: var(--ar-red); font-weight: 700; } .ar-stage.wrecked .ar-art { opacity: .55; filter: grayscale(1) brightness(.5); } .ar-stage.wrecked .ar-ring { display: none; } .ar-stage.wrecked { background: radial-gradient(circle at 50% 62%, rgba(239, 68, 68, .2), transparent 68%), var(--s2); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .5); } .ar-wreck { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border: 1px solid rgba(239, 68, 68, .55); border-radius: 12px; background: rgba(13, 17, 23, .88); text-align: center; color: #e6edf3; } .ar-wreck[hidden] { display: none; } .ar-wreck b { font: 800 16px/1.2 var(--f-body); color: #f87171; } .ar-wreck span { font-size: 12.5px; line-height: 1.4; color: #c9d1d9; } .ar-wreck .btn { margin-top: 4px; } .ar-stage.burn-flash { animation: arBurn .9s ease-out; } @keyframes arBurn { 0% { box-shadow: inset 0 0 0 4px rgba(239, 68, 68, .95), inset 0 0 70px rgba(239, 68, 68, .75); } 100% { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0), inset 0 0 0 rgba(239, 68, 68, 0); } } @media (max-width: 1024px) { } @media (max-width: 520px) { .ar-ledger { padding: 18px 14px; } .ar-lg-title { font-size: 30px; } .ar-lg-left b { font-size: 28px; } .ar-wreck { left: 8px; right: 8px; bottom: 8px; padding: 10px; } } @media (prefers-reduced-motion: reduce) { .ar-redrisk.live, .ar-stage.burn-flash { animation: none; } } /* ========================================================================== Legal pages: privacy, cookies, terms, legal notice, contact (tools/make-legal.py) Document pages: slim header, sticky "On this page" list, readable 780px text column. ========================================================================== */ .lgl-hero { background: var(--band); border-bottom: 1px solid var(--border); } .lgl-hero-in { max-width: var(--maxw); margin: 0 auto; padding: 30px var(--gut) 0; } .lgl-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .lgl-crumbs a { color: var(--muted); } .lgl-crumbs a:hover { color: var(--accent); } .lgl-title { margin: 10px 0 8px; font: 400 56px/1 var(--f-display); letter-spacing: 1px; color: var(--text); } .lgl-meta { margin: 0; max-width: 720px; font-size: 14px; line-height: 1.5; color: var(--muted); } .lgl-tabs { display: flex; gap: 4px; margin: 22px 0 -1px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lgl-tabs::-webkit-scrollbar { display: none; } .lgl-tabs a { flex: none; padding: 12px 14px 13px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; } .lgl-tabs a:first-child { padding-left: 0; } .lgl-tabs a:hover { color: var(--text); } .lgl-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); } .lgl-wrap { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gut) 80px; display: grid; grid-template-columns: 250px minmax(0, 780px); gap: 56px; align-items: start; } .lgl-toc { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; } .lgl-toc summary { display: none; } .lgl-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); } .lgl-toc a { display: flex; gap: 10px; margin-left: -1px; padding: 7px 12px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--muted); } .lgl-toc a span { flex: none; min-width: 16px; font: 600 11.5px/1.6 var(--f-mono); color: var(--muted2); } .lgl-toc a:hover { color: var(--text); } .lgl-toc a[aria-current] { border-left-color: var(--accent); color: var(--text); font-weight: 600; } .lgl-toc a[aria-current] span { color: var(--accent); } .lgl-doc { min-width: 0; } .lgl-short { margin: 0 0 6px; padding: 20px 22px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: var(--r); background: rgba(var(--accent-rgb), .06); } .lgl-short-t { display: block; margin-bottom: 12px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .lgl-doc .lgl-short ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; } .lgl-doc .lgl-short li { position: relative; margin: 0; padding-left: 28px; font-size: 15px; line-height: 1.55; color: var(--text); } .lgl-short li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--accent-rgb), .16); } .lgl-short li::after { content: ''; position: absolute; left: 7px; top: 7px; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .lgl-sec { padding-top: 34px; } .lgl-sec h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font: 700 21px/1.3 var(--f-body); letter-spacing: -.01em; color: var(--text); } .lgl-n { flex: none; padding: 5px 7px; border-radius: 6px; background: rgba(var(--accent-rgb), .1); font: 700 12px/1 var(--f-mono); color: var(--accent); transform: translateY(-2px); } .lgl-sec h3 { margin: 22px 0 8px; font: 700 16px/1.35 var(--f-body); color: var(--text); } .lgl-doc p, .lgl-doc li { font-size: 15.5px; line-height: 1.7; color: var(--text2); } .lgl-doc p { margin: 0 0 12px; } .lgl-doc ul { list-style: disc; margin: 0 0 14px; padding-left: 22px; } .lgl-doc li { margin: 4px 0; } .lgl-doc li::marker { color: var(--accent); } .lgl-doc b { color: var(--text); } .lgl-doc a, .lgl-co a, .lgl-fine a, .lgl-sent a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .lgl-doc a:hover, .lgl-co a:hover, .lgl-fine a:hover { color: var(--accent-h); } .lgl-doc code { padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--s2); font: 500 .86em/1.4 var(--f-mono); color: var(--text); white-space: nowrap; } .lgl-basis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 16px 0 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--border); overflow: hidden; } .lgl-basis > div { padding: 12px 14px; background: var(--s2); font-size: 13.5px; line-height: 1.55; color: var(--text2); } .lgl-basis b { display: block; margin-bottom: 5px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lgl-doc .lgl-tip { padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--s2); font-size: 14.5px; } .lgl-dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 14px 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--s1); overflow: hidden; } .lgl-dl dt, .lgl-dl dd { margin: 0; padding: 11px 14px; border-top: 1px solid var(--border); } .lgl-dl dt:first-of-type, .lgl-dl dt:first-of-type + dd { border-top: 0; } .lgl-dl dt { padding-top: 14px; background: var(--s2); font: 700 10.5px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lgl-dl dd { font-size: 14.5px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; } .lgl-tw { margin: 14px 0 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--s1); -webkit-overflow-scrolling: touch; } .lgl-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; } .lgl-table th { padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--s2); text-align: left; font: 700 10.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .lgl-table td { padding: 11px 14px; border-top: 1px solid var(--border); vertical-align: top; color: var(--text2); } .lgl-table tr:first-child td { border-top: 0; } .lgl-table td:first-child { font-weight: 600; color: var(--text); } .lgl-table-ck { min-width: 760px; } .lgl-table-ck td:first-child { line-height: 2; } .lgl-tag { display: inline-block; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--s2); font: 700 10.5px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; } .lgl-tag.on { border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); color: var(--accent); } .lgl-doc .lgl-note { font-size: 14px; color: var(--muted); } .lgl-choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 14px 0 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r); background: var(--s1); box-shadow: var(--sh-1); } .lgl-choice > div > b { font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lgl-doc .lgl-choice p { margin: 6px 0 0; font-size: 15px; color: var(--text); } [data-consent-status][data-state="on"] b { color: var(--accent); } /* contact page */ .lgl-wrap-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px; } .lgl-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; } .lgl-ccard { display: flex; flex-direction: column; padding: 22px; } .lgl-cico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: rgba(var(--accent-rgb), .1); color: var(--accent); } .lgl-cico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lgl-ccard p { flex: 1; margin: 8px 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--text2); } .lgl-cbtns { display: flex; flex-wrap: wrap; gap: 8px; } .lgl-cbtns .btn.ok { border-color: var(--accent); color: var(--accent); } .lgl-cside { display: grid; gap: 16px; align-content: start; } .lgl-form, .lgl-co { padding: 22px; } .lgl-fsub { margin: 6px 0 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); } .lgl-lbl { display: block; margin: 16px 0 7px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lgl-lbl span { margin-left: 6px; font: 500 12px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted2); } .lgl-in { width: 100%; padding: 11px 13px; border: 1px solid var(--border2); border-radius: 10px; background: var(--bg); color: var(--text); font: 500 14.5px/1.4 var(--f-body); } .lgl-in.mono { font-family: var(--f-mono); font-size: 13.5px; } .lgl-in::placeholder { color: var(--muted2); } .lgl-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } textarea.lgl-in { min-height: 130px; resize: vertical; } select.lgl-in { padding-right: 38px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; cursor: pointer; } .lgl-err { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--bad); } .lgl-err:empty { display: none; } .lgl-form .btn-lg { width: 100%; margin-top: 16px; } .lgl-sent { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ok); } .lgl-sent[hidden] { display: none; } .lgl-fine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .lgl-co .lgl-dl { grid-template-columns: minmax(0, 1fr); } .lgl-co .lgl-dl dt { padding: 11px 14px 0; border-top: 1px solid var(--border); background: none; } .lgl-co .lgl-dl dd { padding: 4px 14px 11px; border-top: 0; font-size: 14px; } .lgl-co .lgl-dl dt:first-of-type { border-top: 0; } @media (max-width: 1024px) { .lgl-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 22px; } .lgl-toc { position: static; max-height: none; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--s1); } .lgl-toc summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-size: 14px; font-weight: 700; color: var(--text); list-style: none; cursor: pointer; } .lgl-toc summary::-webkit-details-marker { display: none; } .lgl-toc summary::after { content: ''; width: 7px; height: 7px; margin-right: 4px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; } .lgl-toc[open] summary::after { transform: translateY(2px) rotate(225deg); } .lgl-toc ol { padding: 6px 4px 8px; border-left: 0; border-top: 1px solid var(--border); } .lgl-toc a { border-left: 0; } .lgl-wrap-contact { grid-template-columns: minmax(0, 1fr); gap: 16px; } } @media (max-width: 760px) { .lgl-hero-in { padding-top: 22px; } .lgl-title { font-size: 44px; } .lgl-doc p, .lgl-doc li { font-size: 15px; } .lgl-sec { padding-top: 28px; } .lgl-sec h2 { font-size: 19px; } .lgl-basis { grid-template-columns: minmax(0, 1fr); } .lgl-dl { grid-template-columns: minmax(0, 1fr); } .lgl-dl dt { padding: 11px 14px 0; border-top: 1px solid var(--border); background: none; } .lgl-dl dd { padding: 4px 14px 11px; border-top: 0; } .lgl-dl dt:first-of-type { border-top: 0; } .lgl-cgrid { grid-template-columns: minmax(0, 1fr); } .lgl-short { padding: 18px 16px; } } @media (max-width: 400px) { .lgl-title { font-size: 40px; } .lgl-tabs a { padding: 11px 10px 12px; font-size: 13.5px; } .lgl-table th, .lgl-table td { padding: 10px 11px; } } /* ========================================================================== Cookie consent: banner + Cookie settings dialog (assets/consent.js) Reject and Accept have the same size and weight (Irish DPC guidance). No inset shorthand (Safari 14). ========================================================================== */ .cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482500; display: flex; justify-content: center; padding: 0 16px 16px; pointer-events: none; visibility: hidden; transition: visibility 0s .35s; } .cc.show { visibility: visible; transition-delay: 0s; } .cc-box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; width: 100%; max-width: 920px; padding: 16px 18px 16px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s1); color: var(--text); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(var(--accent-rgb), .1); pointer-events: auto; opacity: 0; transform: translateY(24px); transition: transform .35s var(--ease), opacity .25s; } .cc.show .cc-box { opacity: 1; transform: none; } .cc-txt { flex: 1 1 400px; font-size: 14px; line-height: 1.55; color: var(--text2); } .cc-txt b { color: var(--text); } .cc-txt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .cc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .cc-btn { min-width: 108px; } .cc-rej { background: var(--text); color: var(--bg); } .cc-rej:hover { background: var(--text2); color: var(--bg); transform: translateY(-1px); } .cc-link { height: 40px; padding: 0 10px; border: 0; background: none; font: 600 14px/1 var(--f-body); color: var(--text2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cc-link:hover { color: var(--accent); } .ccd[hidden] { display: none; } .ccd { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147482600; display: flex; align-items: center; justify-content: center; padding: 16px; } .ccd-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(6, 10, 14, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ccd-card { position: relative; width: 100%; max-width: 540px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 26px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s1); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(var(--accent-rgb), .12); outline: none; animation: lwPop .22s var(--ease); } .ccd-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; } .ccd-x:hover { background: var(--s2); color: var(--text); } .ccd-kicker { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .ccd-title { margin: 8px 34px 0 0; font: 400 34px/1.05 var(--f-display); letter-spacing: 1px; } .ccd-p { margin: 10px 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--text2); } .ccd-p b { color: var(--text); } .ccd-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid var(--border); } .ccd-txt { display: block; flex: 1; } label.ccd-txt { cursor: pointer; } .ccd-txt b { display: block; font-size: 15px; color: var(--text); } .ccd-txt span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); } .ccd-always { flex: none; padding: 6px 9px; border-radius: 999px; background: rgba(var(--accent-rgb), .1); font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .cc-sw { position: relative; flex: none; width: 46px; height: 26px; } .cc-sw input { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cc-sw i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--border2); transition: background .2s; } .cc-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); } .cc-sw input:checked + i { background: var(--accent); } .cc-sw input:checked + i::after { transform: translateX(20px); } .cc-sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35); } .ccd-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); } .ccd-btns .btn { min-width: 0; padding: 0 10px; } .ccd-fine { margin: 12px 0 0; font-size: 12.5px; text-align: center; color: var(--muted); } .ccd-fine a { color: var(--accent); } body.ccd-open { overflow: hidden; } @media (max-width: 620px) { .cc { padding: 0 8px 8px; } .cc-box { gap: 12px; padding: 14px; } .cc-txt { flex-basis: 100%; font-size: 13.5px; } .cc-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .cc-btn { min-width: 0; } .cc-link { grid-column: 1 / -1; order: 3; height: 30px; } .ccd-card { padding: 22px 18px 16px; } .ccd-btns { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .cc-box, .cc-sw i, .cc-sw i::after, .lgl-toc summary::after { transition: none; } .ccd-card { animation: none; } } /* ===== 2026-10-05: chest tile, Mineshop fan + SoloBlocks tiles, real Nano 3s photo, hero Discord ===== */ /* Miner page: the Mining Chest KPI tile in the chest's gold (same pair as .ex.gold), points + progress to the 500 pts claim */ .mn-chest { position: relative; --gold: #b45309; background: linear-gradient(135deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .04) 75%), var(--s1); } .mn-chest:hover { background: linear-gradient(135deg, rgba(245, 158, 11, .25), rgba(245, 158, 11, .08) 75%), var(--s1); } html[data-theme="dark"] .mn-chest { --gold: #ffd700; background: linear-gradient(135deg, rgba(255, 215, 0, .13), rgba(255, 215, 0, .03) 75%), var(--s1); } html[data-theme="dark"] .mn-chest:hover { background: linear-gradient(135deg, rgba(255, 215, 0, .2), rgba(255, 215, 0, .06) 75%), var(--s1); } .mn-chest .mn-k { color: var(--gold); font-weight: 700; } .mn-chest .mn-v { color: var(--gold); } .mn-chest .mn-v small { color: var(--gold); opacity: .75; } .mn-chest .mn-m { color: var(--text2); } .mn-chest .mn-m b { color: var(--gold); } .mn-chest-ico { position: absolute; top: 12px; right: 14px; width: 30px; height: 26px; filter: drop-shadow(0 3px 6px rgba(245, 158, 11, .35)); transition: transform .2s var(--ease); } .mn-chest:hover .mn-chest-ico { transform: translateY(-2px) rotate(-6deg); } .mn-chest-ico .cb-lid { fill: #f59e0b; } .mn-chest-ico .cb-body { fill: #fbbf24; } .mn-chest-ico .cb-band { fill: #b45309; } .mn-chest-ico .cb-lock { fill: #fef3c7; } .mn-chest-ico .cb-key { fill: #92400e; } .mn-chest-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(245, 158, 11, .18); } .mn-chest-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .9s var(--ease); } .mn-chest.is-ready .mn-chest-ico { animation: mnChestGlow 2.4s ease-in-out infinite; } @keyframes mnChestGlow { 0%, 100% { filter: drop-shadow(0 3px 6px rgba(245, 158, 11, .35)); } 50% { filter: drop-shadow(0 0 11px rgba(251, 191, 36, .95)); } } @media (max-width: 520px) { .mn-chest-ico { top: 10px; right: 10px; width: 24px; height: 21px; } } /* Community: Mineshop.eu fan (rebuilt from the mineshop.eu logo, which spins it) */ .s-ico .ms-fan { width: 36px; height: 36px; } .ms-fan .ms-sh { fill: #e6e8e7; } .ms-fan .ms-bl { fill: #4bab53; } .ms-fan .ms-ring { fill: none; stroke: #4bab53; stroke-width: 2; } .ms-fan .ms-hub { fill: #fb4303; } .ms-fan .ms-btc { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } .ms-fan .ms-spin, .ms-fan .ms-boost { transform-box: view-box; transform-origin: 24px 24px; } .ms-fan .ms-spin { animation: msFan 2.4s linear infinite; } /* a second, paused spin that runs while hovered: speeds up without the jump a duration change would cause */ .ms-fan .ms-boost { animation: msFan .7s linear infinite paused; } .social:hover .ms-boost, .social:focus-visible .ms-boost { animation-play-state: running; } @keyframes msFan { to { transform: rotate(360deg); } } /* Community: SoloBlocks.io # mark, same loop as the soloblocks.io header logo (theme.css .sb-mark), dark tile in both themes */ .s-ico .ssb-mark { width: 27px; height: 25px; overflow: visible; } .ssb-mark .ssb-bars { fill: #e6edf3; } .ssb-mark .ssb-ex { fill: #15803d; } .ssb-mark .ssb-try, .ssb-mark .ssb-glow { fill: #22c55e; } .ssb-mark .ssb-try { opacity: 0; animation: ssbRun 6s infinite; animation-delay: calc(.3s + var(--i) * .15s); } .ssb-mark .ssb-blk { transform-box: fill-box; transform-origin: 50% 50%; animation: ssbLand 6s infinite cubic-bezier(.2, .8, .3, 1); } .ssb-mark .ssb-glow { opacity: .5; animation: ssbGlow 6s infinite; } @keyframes ssbRun { 0% { opacity: 0; } 1% { opacity: 1; } 3.5% { opacity: .45; } 6% { opacity: 0; } 20% { opacity: 0; } 21% { opacity: 1; } 23.5% { opacity: .45; } 26%, 100% { opacity: 0; } } @keyframes ssbLand { 0% { opacity: 1; transform: none; } 4% { opacity: 0; transform: scale(.6); } 44% { opacity: 0; transform: translateY(-16px) scale(.5); } 50% { opacity: 1; transform: translateY(0) scale(1.12); } 55% { transform: scale(.96); } 60%, 100% { opacity: 1; transform: none; } } @keyframes ssbGlow { 0% { opacity: .5; } 4%, 49% { opacity: 0; } 53% { opacity: 1; } 75%, 100% { opacity: .5; } } /* 5 tiles: in the 2-column layout the last one spans the row */ @media (max-width: 1180px) and (min-width: 761px) { .socials .social:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Prize: the real Avalon Nano 3s photos from mineshop.eu, black on the light theme, white on the dark theme */ .dev-photo { width: 280px; max-width: 86%; } .dev-photo img { display: block; width: 100%; height: auto; } .dev-photo .nano-b { filter: drop-shadow(0 18px 16px rgba(0, 40, 15, .3)); } .dev-photo .nano-w { display: none; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .6)); } html[data-theme="dark"] .dev-photo .nano-b { display: none; } html[data-theme="dark"] .dev-photo .nano-w { display: block; } .dev-photo + .pedestal { width: 250px; margin-top: -26px; } /* Hero: Discord next to the Telegram bot. Phones: Start mining gets its own row, Telegram + Discord share the next. Button icons never shrink (a tight button squeezed the Telegram icon to 0 px at 360). */ .btn .dc { width: 20px; height: 20px; fill: #5865f2; } .btn > svg { flex: none; } @media (max-width: 760px) { .hero-cta .btn-primary { flex-basis: 100%; } .hero-cta .btn-ghost { padding: 0 14px; } } @media (prefers-reduced-motion: reduce) { .mn-chest.is-ready .mn-chest-ico, .ms-fan .ms-spin, .ms-fan .ms-boost, .ssb-mark .ssb-try, .ssb-mark .ssb-blk, .ssb-mark .ssb-glow { animation: none; } } /* Independent worker history; the persistent plot is outside the refreshed worker table. */ .wh-history { margin-top: 16px; } .wh-worker { margin-top: 4px; font-size: 12px; color: var(--text2); overflow-wrap: anywhere; } .wh-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; white-space: normal; overflow-wrap: anywhere; } .wh-name:hover, .wh-name.wh-selected { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .wh-link { padding: 6px 10px; border: 1px solid var(--border2); border-radius: 8px; background: var(--s1); color: var(--text2); font: 700 12px/1.3 var(--f-body); white-space: nowrap; } .wh-link:hover, .wh-link.wh-selected { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .06); } .wh-link:disabled, .wh-name:disabled { cursor: default; color: var(--muted); opacity: .7; text-decoration: none; } .wh-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; } .wh-status { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); } .wh-box { position: relative; height: 220px; min-width: 0; } .wh-box canvas { position: absolute; top: 0; left: 0; } .wh-empty { display: grid; place-items: center; height: 100%; padding: 18px; text-align: center; font-size: 14px; color: var(--muted); } .wh-stats { margin-top: 12px; font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; } .wh-note { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); } .wh-note:empty, .wh-stats:empty { display: none; } @media (max-width: 520px) { .wh-box { height: 200px; } .wh-history { padding: 14px; } .wh-worker { font-size: 11px; } }