/* ============================================================ DrawPool — redesigned UI Palette: violet = protocol, gold = yield prize and success states. Fonts: Archivo (UI) + JetBrains Mono (numbers/labels). Intensity is driven by [data-intensity] on . ============================================================ */ :root{ --bg:#08080c; --bg-2:#0b0b11; --surface:#0f0f16; --surface-2:#14141d; --surface-3:#191923; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --line-3:rgba(255,255,255,.20); --violet:#7c5cff; --violet-br:#a78bfa; --violet-deep:#5b34d6; --violet-soft:#c9b6ff; --violet-dim:rgba(124,92,255,.12); --violet-dim-2:rgba(124,92,255,.20); --gold:#e9b949; --gold-br:#f5cf6a; --gold-deep:#b88a1f; --green:#46d369; --red:#ff5d5d; --amber:#ff9d3d; --text:#ececf2; --text-2:#c3c3cf; --dim:#83838f; --dim-2:#56565f; --sans:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --accent:var(--violet); --accent-br:var(--violet-br); /* intensity-controlled */ --aura-op:.55; --aura-scale:1; --pulse-dur:3.4s; --grid-op:1; --gem-dur:9s; } [data-intensity="calm"]{ --aura-op:.30; --aura-scale:.92; --pulse-dur:5s; --grid-op:.6; --gem-dur:13s; } [data-intensity="hype"]{ --aura-op:.95; --aura-scale:1.12; --pulse-dur:1.9s; --grid-op:1.3; --gem-dur:5s; } [data-motion="off"] *{animation:none!important;transition:none!important} *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5; -webkit-font-smoothing:antialiased;overflow-x:hidden} body{position:relative;min-height:100vh} /* layered background: grid + violet bloom + warm yield-prize ember */ body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:var(--grid-op); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:60px 60px;background-position:center top; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 90%); mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 90%)} body::after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none; background: radial-gradient(58% 42% at 28% -6%,rgba(124,92,255,.20),transparent 70%), radial-gradient(40% 32% at 78% 4%,rgba(233,185,73,.07),transparent 70%)} .wrap{max-width:1120px;margin:0 auto;padding:0 22px 90px} a{color:var(--violet-br);text-decoration:none} .mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums} .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} /* ---------- top bar ---------- */ nav{display:flex;justify-content:space-between;align-items:center;height:68px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30; background:linear-gradient(var(--bg),rgba(8,8,12,.86));backdrop-filter:blur(8px)} .logo{display:flex;align-items:center;gap:11px} .logo svg{display:block} .logo .name{font-weight:700;font-size:19px;letter-spacing:-.5px} .logo .name .p{color:var(--violet-br)} .demo-flag{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);border:1px solid rgba(233,185,73,.35);padding:2px 6px;margin-left:9px;vertical-align:middle} .navright{display:flex;align-items:center;gap:12px} .chip{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.04em; color:var(--dim);border:1px solid var(--line);padding:8px 12px;border-radius:3px} .chip .dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(70,211,105,.45)}70%{box-shadow:0 0 0 7px rgba(70,211,105,0)}100%{box-shadow:0 0 0 0 rgba(70,211,105,0)}} .btn{font-family:var(--sans);font-weight:600;font-size:13px;border:none;cursor:pointer;border-radius:4px; padding:11px 18px;color:#fff;background:var(--violet);transition:background .15s,transform .08s,opacity .15s,box-shadow .2s; display:inline-flex;align-items:center;justify-content:center;gap:8px} .btn:hover{background:var(--violet-deep)} .btn:active{transform:translateY(1px)} .btn.gold{color:#0a0a0e;background:var(--gold)} .btn.gold:hover{background:var(--gold-br);box-shadow:0 0 24px rgba(233,185,73,.28)} .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)} .btn.ghost:hover{background:var(--surface-2);border-color:var(--violet)} .btn:disabled{opacity:.32;cursor:not-allowed;box-shadow:none} /* ---------- hero board ---------- */ .board{display:grid;grid-template-columns:.92fr 1.08fr;border:1px solid var(--line-2);margin-top:24px;background:var(--surface); border-radius:6px;overflow:hidden} .orbcell{padding:34px 26px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center; position:relative;overflow:hidden;background:radial-gradient(80% 60% at 50% 30%,rgba(124,92,255,.05),transparent 72%)} .orbcell::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(124,92,255,.022) 4px)} .orb{position:relative;width:268px;height:268px;display:grid;place-items:center} /* breathing aura behind the gem — the "gambling pulse", tuned by intensity */ .orb .aura{position:absolute;width:100%;height:100%;border-radius:50%;z-index:0; background:radial-gradient(circle at 50% 48%,var(--accent) 0%,transparent 62%); opacity:calc(var(--aura-op) * .42);filter:blur(14px); animation:breathe var(--pulse-dur) ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(calc(var(--aura-scale) * .9));opacity:calc(var(--aura-op)*.30)} 50%{transform:scale(var(--aura-scale));opacity:calc(var(--aura-op)*.5)}} .orb svg.gemsvg{position:absolute;inset:24px;width:220px;height:220px;z-index:1; filter:drop-shadow(0 0 calc(16px * var(--aura-op)) rgba(124,92,255,.5)); animation:gemsway var(--gem-dur) ease-in-out infinite} @keyframes gemsway{0%,100%{transform:rotate(-7deg) scale(.97)}50%{transform:rotate(7deg) scale(1.02)}} .orb .ring{position:absolute;inset:0;transform:rotate(-90deg);z-index:3} .orb .core{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:2;pointer-events:none} .orb .core>div{background:radial-gradient(circle,rgba(8,8,12,.86) 36%,rgba(8,8,12,.42) 60%,transparent 76%); padding:38px 34px;border-radius:50%} .orb .plabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-br)} .orb .num{font-family:var(--mono);font-weight:700;font-size:40px;line-height:1;letter-spacing:-1.5px;color:var(--gold); margin:9px 0 4px;font-variant-numeric:tabular-nums;text-shadow:0 0 calc(22px * var(--aura-op)) rgba(233,185,73,.4)} .orb .cur{font-family:var(--mono);font-size:11px;color:var(--dim)} /* live yield drip readout */ .drip{display:flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--dim)} .drip .arrow{color:var(--green)} .drip b{color:var(--green);font-weight:500} .clk{margin-top:14px;text-align:center} .clk .timer{font-family:var(--mono);font-weight:700;font-size:25px;letter-spacing:1px;color:var(--text);font-variant-numeric:tabular-nums} .clk .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:3px} .clk.soon .timer{color:var(--amber)} .clk.ready .timer{color:var(--green)} /* right info column */ .info{padding:30px 34px;display:flex;flex-direction:column;justify-content:center} .info .row1{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-br); border:1px solid rgba(124,92,255,.4);padding:4px 9px;border-radius:3px} .info .row1 .lbl{margin:0} .hero-title{margin-top:16px;max-width:10ch;font-size:34px;line-height:1.02;font-weight:700;letter-spacing:-.04em;text-wrap:balance} .info .tagline{margin:16px 0 20px;font-size:17px;line-height:1.55;color:var(--text);max-width:46ch} .info .tagline b{color:var(--gold-br);font-weight:600} .info .cta{display:flex;gap:10px} .info .cta .btn{min-width:132px} .how3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px} .h3i{padding:12px 13px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(124,92,255,.04))} .h3i .n{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-br);margin-bottom:5px} .h3i strong{display:block;font-size:12.5px;font-weight:600;color:var(--text)} .h3i p{margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--dim)} /* provably-fair compact strip */ .fair{display:flex;gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .fair .fi{display:flex;flex-direction:column;gap:5px;flex:1} .fair .fi .ft{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.02em} .fair .fi .ft .ic{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)} .fair .fi .fd{font-size:11px;color:var(--dim);line-height:1.45} .fair .fi a{font-family:var(--mono);font-size:10.5px} /* ---------- stat strip ---------- */ .strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);border-top:none;border-radius:0 0 6px 6px;overflow:hidden} .strip>div{padding:17px 20px;border-right:1px solid var(--line)} .strip>div:last-child{border-right:none} .strip .v{font-family:var(--mono);font-weight:500;font-size:22px;margin-top:9px;font-variant-numeric:tabular-nums} .strip .v.violet{color:var(--violet-br)} .strip .v.gold{color:var(--gold)} .strip .v.green{color:var(--green)} /* ---------- two-col cards ---------- */ .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .card{border:1px solid var(--line-2);background:var(--surface);padding:24px;border-radius:6px} .card h2{font-size:14px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;gap:9px} .card h2::before{content:"";width:3px;height:13px;background:var(--accent);border-radius:2px} .card .note{color:var(--dim);font-size:12.5px;margin:8px 0 18px} /* position card: donut + legend */ .pos{display:grid;grid-template-columns:152px 1fr;gap:22px;align-items:center;margin-top:4px} .donut{position:relative;width:152px;height:152px} .donut svg{transform:rotate(-90deg)} .donut .seg{transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1),stroke-width .2s} .donut .center{position:absolute;inset:0;display:grid;place-items:center;text-align:center} .donut .center .pct{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-1px} .donut .center .ct{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:2px} .legend{display:flex;flex-direction:column;gap:2px} .lrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px} .lrow:last-child{border-bottom:none} .lrow .sw{width:9px;height:9px;border-radius:2px;flex:none} .lrow .nm{color:var(--text-2);flex:1;font-family:var(--mono);font-size:11.5px} .lrow.you .nm{color:var(--gold-br)} .lrow .pc{font-family:var(--mono);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums} .posfoot{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .posfoot .pf{display:flex;flex-direction:column;gap:5px} .posfoot .pf .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .posfoot .pf .vv{font-family:var(--mono);font-size:16px;color:var(--text)} .posfoot .pf .vv.gold{color:var(--gold)} /* deposit / withdraw */ .ifield{display:flex;border:1px solid var(--line-2);background:var(--bg);border-radius:4px} .ifield:focus-within{border-color:var(--violet)} .ifield input{flex:1;min-width:0;border:none;background:transparent;color:var(--text);font-family:var(--mono); font-size:19px;padding:14px 15px;outline:none} .ifield .suffix{display:flex;align-items:center;color:var(--dim);font-family:var(--mono);font-size:12px;padding-right:6px} .ifield .max{border:none;background:transparent;color:var(--violet-br);font-family:var(--mono);font-size:11px; letter-spacing:.1em;padding:0 15px;cursor:pointer} .ifield .max:hover{color:var(--gold)} .preset{display:flex;gap:8px;margin-top:10px} .preset button{flex:1;font-family:var(--mono);font-size:11.5px;color:var(--text-2);background:var(--surface-2); border:1px solid var(--line);border-radius:3px;padding:8px 0;cursor:pointer;transition:.14s} .preset button:hover{border-color:var(--violet);color:#fff} .act2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .faucet{margin-top:13px;font-size:12px;color:var(--dim);text-align:center} .faucet a{cursor:pointer;border-bottom:1px dotted var(--dim-2)} /* ---------- draw machine + slot reel ---------- */ .machine{border:1px solid var(--line-2);margin-top:16px;background:var(--surface);border-radius:6px;overflow:hidden} .mhead{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid var(--line)} .mhead .ttl{font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px} .mhead .ttl::before{content:"";width:3px;height:13px;background:var(--accent);border-radius:2px} .mhead .run{display:flex;gap:10px} .msteps{display:grid;grid-template-columns:repeat(3,1fr)} .ms{padding:18px 22px;border-right:1px solid var(--line);position:relative} .ms:last-child{border-right:none} .ms .idx{font-family:var(--mono);font-size:11px;color:var(--violet-br);letter-spacing:.06em} .ms .st{font-weight:600;font-size:13.5px;margin:8px 0 5px} .ms .sd{color:var(--dim);font-size:12px;line-height:1.5} .ms.on{background:var(--violet-dim)} .ms.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--violet)} .ms.done .idx{color:var(--green)} /* the reel */ .reel-wrap{border-top:1px solid var(--line);padding:22px;display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:stretch; background:radial-gradient(60% 100% at 50% 0%,rgba(124,92,255,.05),transparent)} .reel{position:relative;height:188px;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;background:var(--bg-2)} .reel .mask-top,.reel .mask-bot{position:absolute;left:0;right:0;height:64px;z-index:3;pointer-events:none} .reel .mask-top{top:0;background:linear-gradient(var(--bg-2),transparent)} .reel .mask-bot{bottom:0;background:linear-gradient(transparent,var(--bg-2))} .reel .winline{position:absolute;left:0;right:0;top:50%;height:48px;transform:translateY(-50%);z-index:2;pointer-events:none; border-top:1px solid var(--accent);border-bottom:1px solid var(--accent); background:linear-gradient(90deg,transparent,var(--violet-dim-2),transparent)} .reel .winline.locked{border-color:var(--gold);background:linear-gradient(90deg,transparent,rgba(233,185,73,.16),transparent)} .reel .strip-inner{position:absolute;left:0;right:0;top:0;will-change:transform} .reel .cell{height:48px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:15px;color:var(--text-2)} .reel .cell .tk{font-size:10px;color:var(--dim-2)} .reel.spinning .cell{filter:blur(.4px)} .reel.idle-spin .strip-inner{animation:idlescroll 7s linear infinite} @keyframes idlescroll{from{transform:translateY(0)}to{transform:translateY(-1152px)}} .reel .cell.win{color:var(--gold-br);font-weight:700} .reel .idle{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--dim);font-size:13px;z-index:4;padding:0 24px;line-height:1.6} /* commit / hash readout panel */ .commit{border:1px solid var(--line-2);border-radius:5px;background:var(--bg-2);padding:18px;display:flex;flex-direction:column;gap:13px} .commit .crow{display:flex;flex-direction:column;gap:5px} .commit .ck{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .commit .cv{font-family:var(--mono);font-size:13px;color:var(--text);word-break:break-all} .commit .cv.hash{color:var(--violet-br);font-size:11.5px;line-height:1.5} .commit .cv.hash.locked{color:var(--gold)} .commit .status{margin-top:auto;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--dim); padding-top:12px;border-top:1px solid var(--line)} .commit .status .sd{width:7px;height:7px;border-radius:50%;background:var(--dim-2)} .commit .status.live .sd{background:var(--amber);animation:pulse 1.4s infinite} .commit .status.win .sd{background:var(--gold)} .mhint{padding:13px 22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.55} .whoruns{display:flex;align-items:baseline;gap:13px;padding:13px 22px 16px;border-top:1px solid var(--line); background:radial-gradient(120% 100% at 0% 0%,var(--violet-dim),transparent 60%)} .whoruns .wlabel{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--violet-br);position:relative;padding-left:15px} .whoruns .wlabel::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 8px var(--violet)} .whoruns .wtext{font-size:12.5px;color:var(--text-2);line-height:1.5;text-wrap:pretty} .whoruns .wtext b{color:var(--text);font-weight:600} @media(max-width:880px){.whoruns{flex-direction:column;gap:6px}} /* ---------- winners ---------- */ .winners{border:1px solid var(--line-2);margin-top:16px;background:var(--surface);border-radius:6px;overflow:hidden} .winners .wh{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid var(--line)} table{width:100%;border-collapse:collapse} thead th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2); text-align:left;padding:11px 22px;border-bottom:1px solid var(--line);font-weight:500} thead th.r,tbody td.r{text-align:right} tbody td{padding:14px 22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px} tbody tr:last-child td{border-bottom:none} tbody tr.fresh{background:var(--violet-dim);animation:rowin .6s ease} @keyframes rowin{0%{background:rgba(233,185,73,.18);transform:translateY(-4px)}100%{transform:translateY(0)}} td .id{color:var(--violet-br)} td .amt{color:var(--gold);font-weight:500} td .when{color:var(--dim)} td .hashlink{color:var(--dim);font-size:11px} td .hashlink:hover{color:var(--violet-br)} .freshdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;vertical-align:middle} .empty{padding:28px 22px;text-align:center;color:var(--dim);font-size:13px} footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between; flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;color:var(--dim)} #toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--surface-2); border:1px solid var(--violet);color:var(--text);padding:13px 20px;font-size:13px;opacity:0;pointer-events:none; transition:opacity .2s,transform .2s;z-index:50;max-width:90vw;border-radius:4px} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #confetti{position:fixed;inset:0;pointer-events:none;z-index:60} @media(max-width:880px){ .board{grid-template-columns:1fr}.orbcell{border-right:none;border-bottom:1px solid var(--line)} .hero-title{max-width:none;font-size:30px} .info .cta .btn{flex:1}.fair{flex-direction:column;gap:14px} .how3{grid-template-columns:1fr} .strip{grid-template-columns:1fr 1fr}.strip>div:nth-child(2){border-right:none} .strip>div:nth-child(1),.strip>div:nth-child(2){border-bottom:1px solid var(--line)} .cols{grid-template-columns:1fr}.msteps{grid-template-columns:1fr}.ms{border-right:none;border-bottom:1px solid var(--line)} .reel-wrap{grid-template-columns:1fr} .mhead{flex-direction:column;gap:12px;align-items:stretch}.mhead .run .btn{flex:1} .pos{grid-template-columns:1fr;justify-items:center}.legend{width:100%} }