/* UltFans games — shared UI. Bar + footer copied verbatim from homepage / pfp. */
:root{--bg:#050506;--pink:#ff2d95;--gold:#4cdbff;--cyan:#4cdbff;--lav:#b98cff;--cream:#f7f2ea;--muted:#a39c93;--line:rgba(247,242,234,.14);
--serif:"Instrument Serif",Georgia,serif;--black:"Archivo Black",Impact,sans-serif;--ui:Inter,system-ui,sans-serif;--ink:#14040c}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--ui)}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit}
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(to bottom,rgba(5,5,6,.8),rgba(5,5,6,0));backdrop-filter:blur(10px)}
.mark{font-family:var(--black);letter-spacing:-.04em;font-size:14px;color:var(--pink);animation:mark-live 2.6s ease-in-out infinite}
@keyframes mark-live{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 10px var(--pink),0 0 22px rgba(255,45,149,.55)}}
.bar-meta{display:flex;gap:8px}
.chip{border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
footer{padding:28px 20px 64px;color:var(--muted);font-size:12px;line-height:1.65}
.close{font-family:var(--serif);color:var(--cream);font-size:24px;margin-top:18px}
.close{width:0;overflow:hidden;white-space:nowrap}
.close.in{animation:type 2.4s steps(42,end) both}
@keyframes type{from{width:0}to{width:42ch}}
@keyframes type-fit{from{width:0}to{width:100%}}
@media (max-width:799px){.close{display:block;max-width:100%;box-sizing:border-box;font-size:clamp(13px,3.6vw,18px);width:0;overflow:hidden;white-space:nowrap}.close.in{animation:type-fit 2.4s steps(42,end) both}}
.mark{background:linear-gradient(90deg,#4cdbff 0%,#b9a2ff 50%,#ff2d95 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:mark-live-g 2.6s ease-in-out infinite}
@keyframes mark-live-g{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 6px rgba(255,45,149,.75)) drop-shadow(0 0 12px rgba(76,219,255,.55))}}

/* games */
main{max-width:1100px;margin:0 auto;padding:76px 18px 32px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,7vw,64px);line-height:.95;letter-spacing:-.03em;margin:8px 0}
.lede{color:var(--muted);margin:0 0 18px;max-width:42rem;line-height:1.5}
.back{color:var(--cyan);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.nofa{color:var(--muted);font-size:12px;margin:12px 0 0}
.hud{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.hud .stat{border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.hud .stat b{color:var(--cream);font-weight:600;margin-left:4px}
.hud .stat.hot b{background:linear-gradient(90deg,#4cdbff,#b9a2ff,#ff2d95);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stagebox{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0a0a0c;touch-action:none}
.stagebox canvas{display:block;width:100%;height:100%}
.btn{border:0;border-radius:999px;padding:13px 20px;background:var(--pink);color:var(--ink);font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}
.btn.cy{background:var(--cyan)}
.modal{position:absolute;inset:0;display:none;place-items:center;align-content:center;justify-items:center;background:rgba(5,5,6,.78);backdrop-filter:blur(6px);z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:max(10px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-sizing:border-box}
.modal.on{display:grid}
.modal .card{text-align:center;padding:24px;max-width:min(340px,100%);width:100%;margin:auto;box-sizing:border-box}
.modal h2{font-family:var(--serif);font-weight:400;font-size:40px;margin:0 0 6px}
.modal .big{font-family:var(--black);font-size:44px;background:linear-gradient(90deg,#4cdbff,#b9a2ff,#ff2d95);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.modal p{color:var(--muted);margin:6px 0 16px}
.modal .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding-bottom:2px}
@media (max-width:560px){
  .modal{place-items:start center;align-content:start;padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
  .modal .card{padding:14px 12px;margin:4px auto 20px}
  .modal h2{font-size:28px}
  .modal .big{font-size:32px}
  .modal p{margin:4px 0 8px;font-size:13px}
  .modal .acts{gap:6px;padding-bottom:4px}
  .modal .acts .btn{padding:11px 14px}
  .namebox{margin:0 0 8px;gap:6px}
  .namebox .nb-name{font-size:15px;padding:10px 12px}
  .namebox .nb-wallet{font-size:12px;padding:10px 10px}
  .namebox .nb-hint{font-size:12px}
  .namebox .nb-wlab>span{font-size:12px}
}
.hudrow{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin:0 0 10px}.hudrow .hud{margin:0}
.mute{flex:none;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:7px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
.mute[aria-pressed="false"]{color:var(--cream);border-color:rgba(76,219,255,.45)}
body.uf-game{touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body.uf-game .stagebox,body.uf-game .stagebox *,body.uf-game canvas,body.uf-game .ctrl .btn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.uf-game .stagebox input,body.uf-game .modal button{touch-action:manipulation}
body.uf-game .stagebox input{-webkit-user-select:text;user-select:text}
/* leaderboard */
.lb{margin-top:18px;border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:#0c0c0e}
.lb h3{margin:0 0 8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);display:flex;justify-content:space-between}
.lb h3 span{color:var(--lav)}
.lb ol{margin:0;padding:0;list-style:none;counter-reset:r}
.lb li{counter-increment:r;display:flex;gap:10px;padding:6px 0;border-top:1px solid rgba(247,242,234,.06);font-size:14px}
.lb li:before{content:counter(r);width:22px;color:var(--muted);font-variant-numeric:tabular-nums}
.lb li b{margin-left:auto;font-variant-numeric:tabular-nums}.lb li.me{color:var(--pink)}
.lb .empty{color:var(--muted);font-size:13px}
.lbtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.lbtabs button{border:1px solid var(--line);background:#111;color:var(--cream);border-radius:999px;padding:7px 11px;font-size:12px;cursor:pointer}.lbtabs button.on{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.namebox{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin:0 0 12px;text-align:left}
.namebox .nb-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.namebox .nb-name{width:150px;border:1px solid var(--line);background:#111;color:var(--cream);border-radius:999px;padding:11px 14px;font:inherit;font-size:16px;box-sizing:border-box}
.namebox .nb-wlab{display:flex;flex-direction:column;gap:4px;margin:0}
.namebox .nb-wlab>span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.namebox .nb-wallet{width:100%;max-width:100%;border:1px solid var(--line);background:#111;color:var(--cream);border-radius:14px;padding:11px 12px;font:12px/1.2 ui-monospace,Menlo,Consolas,monospace;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch}
.namebox .nb-wallet:focus,.namebox .nb-name:focus{outline:none;border-color:var(--cyan)}
.namebox .nb-hint{margin:0;font-size:12px;line-height:1.4;color:var(--muted);text-align:center}
.namebox .nb-err{margin:0;font-size:12px;color:#ff5c8a;text-align:center;min-height:1.2em}
.namebox .btn{padding:11px 16px;flex:none}
.namebox .nb-saved{color:var(--cyan);font-size:12px;font-weight:500}
.rankmsg{color:var(--cream)!important}
.lb .lbn{display:flex;flex-direction:column;gap:1px;min-width:0}
.lb .lbw{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace;letter-spacing:0}

/* v10: one button language site-wide (the /tools category-chip feel).
   chips/secondary: grey at rest -> brand gradient outline + glow on hover -> tinted gradient when selected.
   primary CTAs (Hold 500K, Connect wallet, Play): stay solid, same lift + glow on hover. */
:root{--uf-g:linear-gradient(90deg,#4cdbff,#b9a2ff,#ff2d95);--uf-gt:linear-gradient(90deg,rgba(76,219,255,.2),rgba(185,162,255,.2),rgba(255,45,149,.2))}
html body .uf-chip,html body header.bar .bar-meta.ufnav>a.chip,html body .seg button,html body .tabs button,html body .demos button,html body .qp,html body .subnav a,html body .secnav a,html body .row button,html body .lbtabs button,html body .mute,html body .btn.ghost,html body .hbtn.ghost,html body .ctrls button{box-sizing:border-box;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#f7f2ea;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s,color .2s,transform .2s}
html body .uf-chip,html body .seg button,html body .tabs button,html body .demos button,html body .subnav a,html body .secnav a,html body .row button,html body .lbtabs button,html body .mute{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;margin:0;border-radius:999px;font-family:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap}
html body .uf-chip:hover,html body header.bar .bar-meta.ufnav>a.chip:hover,html body .seg button:hover,html body .tabs button:hover,html body .demos button:hover,html body .qp:hover,html body .subnav a:hover,html body .secnav a:hover,html body .row button:hover,html body .lbtabs button:hover,html body .mute:hover,html body .btn.ghost:hover,html body .hbtn.ghost:hover,html body .ctrls button:hover,
html body .uf-chip:focus-visible,html body header.bar .bar-meta.ufnav>a.chip:focus-visible,html body .seg button:focus-visible,html body .tabs button:focus-visible,html body .qp:focus-visible,html body .btn.ghost:focus-visible{border-color:transparent;background:linear-gradient(#141419,#141419) padding-box,var(--uf-g) border-box;color:#fff;box-shadow:0 4px 18px -10px rgba(76,219,255,.75);outline:none}
html body .uf-chip[aria-current],html body header.bar .bar-meta.ufnav>a.chip[aria-current="page"],html body .seg button[aria-pressed="true"],html body .tabs button[aria-pressed="true"],html body .qp[aria-pressed="true"],html body .secnav a.on,html body .row button.on,html body .lbtabs button.on,html body .mute[aria-pressed="true"]{border-color:transparent;background:var(--uf-gt) padding-box,linear-gradient(#111116,#111116) padding-box,var(--uf-g) border-box;color:#fff;font-weight:700;box-shadow:0 6px 22px -10px rgba(185,162,255,.75)}
html body .seg button[aria-pressed="true"] span{color:#08080a;background:linear-gradient(90deg,#4cdbff,#b9a2ff)}
html body .seg button:disabled,html body .tabs button:disabled,html body .demos button:disabled,html body .qp:disabled{opacity:.45;cursor:not-allowed;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);box-shadow:none}
html body header.bar .bar-meta.ufnav>span.chip{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
html body .cta,html body .btn:not(.ghost),html body .hbtn:not(.ghost),html body .arcplay-go,html body .ufg-go,html body .ufg-wc,html body .dl{transition:transform .2s,box-shadow .2s,filter .2s,background .2s}
html body .cta:hover,html body .btn:not(.ghost):hover,html body .hbtn:not(.ghost):hover,html body .arcplay-go:hover,html body .ufg-go:hover,html body .ufg-wc:hover,html body .dl:hover,html body .cta:focus-visible,html body .btn:not(.ghost):focus-visible{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 26px -10px rgba(76,219,255,.7),0 10px 30px -14px rgba(255,45,149,.65);outline:none}
html body .btn:disabled,html body .btn:disabled:hover{transform:none;box-shadow:none;filter:none}
@media (max-width:560px){html body .uf-chip,html body .seg button,html body .tabs button,html body .demos button,html body .subnav a,html body .secnav a,html body .row button,html body .lbtabs button,html body .mute{height:28px;padding:0 10px;font-size:12px}}
@media (prefers-reduced-motion:reduce){html body .cta:hover,html body .btn:hover,html body .hbtn:hover,html body .arcplay-go:hover{transform:none}}
html body .seg{gap:4px;border:0;max-width:100%}
html body .seg button{flex:none}