/* AgentAya retro arcade theme: humans vs robots, synthwave sky, neon panels. Shared by the home page and the board. */
:root{
  --night:#12072b; --dusk:#2a0b52; --panel:rgba(24,12,60,.9); --line:#3d2b7d;
  --pink:#ff3fd1; --cyan:#27e8ff; --yellow:#ffe45c; --green:#39ff9f; --orange:#ff9a3c;
  --text:#f1ecff; --muted:#b9aedc; --ivory:#fbf6e6;
  --pixel:"Press Start 2P",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45;min-height:100vh;
  background:linear-gradient(180deg,#0d0524 0%,#1f0a45 40%,#3d0d5f 62%,#12072b 63%,#12072b 100%) fixed}
a{color:var(--yellow)}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* sky, sun and the endless grid floor */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bgfx .sun{position:absolute;left:50%;top:37%;width:min(46vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-linear-gradient(180deg,transparent 0 62%,#3d0d5f 62% 66%,transparent 66% 70%),linear-gradient(180deg,#ffe45c 0%,#ff9a3c 45%,#ff3fd1 100%);
  -webkit-mask:linear-gradient(180deg,#000 55%,rgba(0,0,0,.15) 100%);mask:linear-gradient(180deg,#000 55%,rgba(0,0,0,.15) 100%);opacity:.55;filter:blur(.3px)}
.bgfx .grid{position:absolute;left:-50%;right:-50%;bottom:0;height:37%;transform:perspective(260px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(var(--pink) 2px,transparent 2px),linear-gradient(90deg,var(--pink) 2px,transparent 2px);background-size:70px 70px;
  opacity:.35;animation:grid-run 3s linear infinite;-webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%)}
@keyframes grid-run{to{background-position:0 70px}}
.scan{position:fixed;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);opacity:.35}
@media (prefers-reduced-motion: reduce){.bgfx .grid{animation:none}}

/* title */
.marquee{text-align:center;margin:0;display:grid;gap:6px}
.marquee .kicker{font:400 .62rem/1.4 var(--pixel);color:var(--cyan);letter-spacing:.12em}
.marquee .big{font:400 clamp(1.3rem,5vw,2.4rem)/1.25 var(--pixel);letter-spacing:.04em;
  background:linear-gradient(180deg,#fff 0%,#fff 38%,var(--yellow) 48%,var(--orange) 60%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 #3a0c6b) drop-shadow(0 0 12px rgba(255,63,209,.55))}
.marquee .big em{font-style:normal;color:var(--cyan);-webkit-text-fill-color:var(--cyan)}
.marquee .tag{font-size:.9rem;color:var(--muted)}
.brand{margin:0;font-size:.85rem;letter-spacing:.02em;color:var(--muted)}
.brand b{color:var(--yellow)}

/* panels and buttons */
.panel,.card{background:var(--panel);border:2px solid var(--cyan);border-radius:12px;box-shadow:0 0 0 1px #0008,0 0 18px rgba(39,232,255,.25),inset 0 0 24px rgba(39,232,255,.06)}
.panel.pink{border-color:var(--pink);box-shadow:0 0 0 1px #0008,0 0 18px rgba(255,63,209,.3),inset 0 0 24px rgba(255,63,209,.07)}
h2,.h2{font:400 .78rem/1.5 var(--pixel);color:var(--cyan);margin:0 0 8px;letter-spacing:.04em}
.btn{display:inline-block;text-align:center;text-decoration:none;border:0;border-radius:9px;padding:12px 22px;font-weight:800;font-size:1.02rem;
  background:linear-gradient(180deg,#fff27a,var(--yellow) 40%,#ffb62e);color:#2a0b52;box-shadow:0 4px 0 #a55a00,0 0 18px rgba(255,228,92,.35)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #a55a00}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.pinkbtn{background:linear-gradient(180deg,#ff8be8,var(--pink));color:#1a0633;box-shadow:0 4px 0 #8a1470,0 0 18px rgba(255,63,209,.35)}
.btn.ghost{background:transparent;color:var(--cyan);border:2px solid var(--cyan);box-shadow:none}
.small{font-size:.88rem;color:var(--muted);margin:0}
input[type=text],.chat input{font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:8px;background:#0e0628;color:var(--text)}
input[type=text]:focus{border-color:var(--cyan)}
.hidden{display:none !important}

/* share buttons (share.js) */
.share{display:flex;flex-wrap:wrap;gap:6px}
.share-btn{font:700 .85rem/1 system-ui,sans-serif;padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:#0e0628;color:var(--text);text-decoration:none}
.share-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.share-whatsapp{border-color:#25d366}.share-x{border-color:#fff}.share-linkedin{border-color:#3b8fe0}.share-facebook{border-color:#4f7df0}.share-email{border-color:var(--yellow)}

/* "which game next?" votes (vote.js) */
.votes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.vote{display:grid;justify-items:center;gap:2px;padding:10px 6px;border-radius:10px;border:2px solid var(--line);background:#0e0628;color:var(--text)}
.vote:hover{border-color:var(--cyan)}
.vote.on{border-color:var(--green);box-shadow:0 0 12px rgba(57,255,159,.4)}
.vote .vi{font-size:1.7rem;line-height:1.2}
.vote .vn{font-weight:700;font-size:.85rem;text-align:center}
.vote .vc{font-size:.75rem;color:var(--muted)}
.vote.on .vc{color:var(--green)}

/* saved rolls power bar */
.power{display:grid;gap:4px;justify-items:center}
.power .pl{font:400 .55rem/1 var(--pixel);color:var(--green);letter-spacing:.08em}
.power .segs{display:flex;gap:4px;padding:4px;border:2px solid var(--line);border-radius:6px;background:#0a041f}
.power .seg{width:26px;height:14px;border-radius:2px;background:#1c1240;transition:background .3s,box-shadow .3s}
.power .seg.on{background:linear-gradient(180deg,#b6ffd9,var(--green));box-shadow:0 0 8px var(--green)}
.power .seg.on:nth-child(4){background:linear-gradient(180deg,#fff3a0,var(--yellow));box-shadow:0 0 8px var(--yellow)}
.power .seg.on:nth-child(5){background:linear-gradient(180deg,#ffc2f1,var(--pink));box-shadow:0 0 8px var(--pink)}
.power.small .seg{width:14px;height:8px}
.power.bump .segs{animation:power-bump .6s ease}
@keyframes power-bump{30%{transform:scale(1.12)}}
@media (prefers-reduced-motion: reduce){.power.bump .segs{animation:none}}

footer{text-align:center;font-size:.82rem;color:var(--muted);padding:6px 16px 28px}
footer a{color:var(--yellow)}