/* digi-app · ui/spots.css
   SHARE A SPOT and INVITE A SPOT (Nov 11, 2026) in digiGAMES' cartoon look (ui/games.css): ink #14123d outlines, hard ink
   shadows, chunky words. The pages ride .pg-games; the graphic is the engine's canvas, the spots are buttons laid over it. */

.gm-share{background:#16a34a}.gm-invite{background:#7c3aed}
.sp-hrt{transform-box:fill-box;transform-origin:center;animation:spBeat 1.6s ease-in-out infinite}
@keyframes spBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
.sp-fly{animation:spFly 2.4s ease-in-out infinite}
@keyframes spFly{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-4px)}}
.sp-plus{transform-box:fill-box;transform-origin:center;animation:gmPop 2.6s ease infinite}

/* the page */
.sp-sky{height:calc(var(--safe-t) + 190px)}
.sp-h{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 70px);margin:0;text-align:center;font-size:38px;font-weight:900;color:#fff;z-index:1;
  text-shadow:0 3px 0 #14123d,2px 0 0 #14123d,-2px 0 0 #14123d,0 -2px 0 #14123d,1.5px 1.5px 0 #14123d,-1.5px 1.5px 0 #14123d,1.5px -1.5px 0 #14123d,-1.5px -1.5px 0 #14123d}
.sp-h b{color:#fde047}
.sp-k{position:absolute;left:24px;right:24px;top:calc(var(--safe-t) + 124px);margin:0;text-align:center;font-size:15px;font-weight:800;line-height:1.35;color:#14123d;z-index:1}
.sp-in{gap:14px}
.sp-stage{display:flex;justify-content:center}
.sp-paper{position:relative;width:min(100%,360px);border-radius:14px;background:#fff;box-shadow:0 0 0 3px #14123d,0 7px 0 3px #14123d;overflow:hidden}
.sp-paper[data-size=post]{aspect-ratio:1080/1350}.sp-paper[data-size=flyer]{aspect-ratio:2550/3300}
.sp-cv{display:block;width:100%;height:100%}
.sp-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px;text-align:center;font-weight:800;color:#14123d}
.sp-spots{position:absolute;inset:0}
.sp-spot{position:absolute;border:0;padding:0;background:transparent;border-radius:22%;cursor:pointer;overflow:visible}
.sp-spot:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.sp-spot:active{background:rgba(20,18,61,.12)}
.sp-rnd{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;border-radius:22px;background:#fff;color:#14123d;font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 0 0 3px #14123d,0 6px 0 3px #14123d}
.sp-rnd:active{transform:translateY(4px);box-shadow:0 0 0 3px #14123d,0 2px 0 3px #14123d}
/* THE DIE (eco's, Oct 17): nine pips, the ones of its number on; one is Digi Green */
.sp-die{width:56px;height:56px;padding:9px;box-sizing:border-box;border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);flex:none;
  background:linear-gradient(145deg,#fff 0,#f1f1f4 60%,#e2e3e8 100%);box-shadow:0 0 0 2.5px #14123d,inset 0 -3px 0 rgba(0,0,0,.07),inset 0 2px 0 #fff;transition:opacity .28s ease}
.sp-die i{width:10px;height:10px;place-self:center;border-radius:50%;background:#14123d;opacity:0}
.sp-die i.on{opacity:1}
.sp-die.n1 i.on{width:14px;height:14px;background:#16a34a}
.sp-die.sm{width:46px;height:46px;padding:7px;border-radius:12px}.sp-die.sm i{width:8px;height:8px}.sp-die.sm.n1 i.on{width:11px;height:11px}
.sp-die.xs{display:inline-grid;width:24px;height:24px;padding:3px;border-radius:7px;vertical-align:-6px;box-shadow:0 0 0 1.5px #14123d}.sp-die.xs i{width:4px;height:4px}.sp-die.xs.n1 i.on{width:7px;height:7px}
.sp-die.fly{position:fixed;left:0;top:0;z-index:320;pointer-events:none;box-shadow:0 0 0 2.5px #14123d,0 12px 20px -8px rgba(0,0,0,.5)}
.sp-die.fly.land{box-shadow:0 0 0 2.5px #14123d,0 0 0 7px rgba(22,163,74,.3),0 12px 20px -8px rgba(0,0,0,.5)}
.sp-die.out{opacity:0}
.sp-rndrow{display:flex;gap:10px;align-items:stretch}
.sp-rndrow .sp-rnd{flex:1}
.sp-snd{flex:none;width:58px;border:0;border-radius:22px;background:#fff;color:#14123d;cursor:pointer;box-shadow:0 0 0 3px #14123d,0 6px 0 3px #14123d}
.sp-snd svg{width:26px;height:26px;fill:#14123d;color:#14123d}
.sp-snd[aria-pressed=false]{opacity:.7}
.sp-rnd .sp-ag{display:none}
.sp-rnd.again .sp-rn{display:none}.sp-rnd.again .sp-ag{display:block;color:#16a34a}
.sp-rnd.gone .sp-die{visibility:hidden}
.sp-rnd.wob .sp-die{animation:spWob .5s ease}
@keyframes spWob{0%,100%{transform:none}20%{transform:rotate(-16deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(5deg)}}
/* THE BIG DIE: an empty board, breathing, Tap to roll */
.sp-bigdie{position:absolute;z-index:4;transform:translate(-50%,-54px);display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-bigdie .sp-die{width:84px;height:84px;padding:13px;border-radius:20px;animation:spBreathe 2.4s ease-in-out infinite;box-shadow:0 0 0 3px #14123d,0 7px 0 3px #14123d}
.sp-bigdie .sp-die i{width:15px;height:15px}
.sp-bigdie b{padding:7px 14px;border-radius:999px;background:#14123d;color:#fff;font-size:14px;font-weight:900;white-space:nowrap}
@keyframes spBreathe{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
/* THE REELS */
.sp-reel{position:absolute;z-index:4;overflow:hidden;border-radius:24%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 6px 14px -6px rgba(0,0,0,.3);transition:opacity .28s ease;pointer-events:none}
.sp-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 26%,transparent 74%,rgba(0,0,0,.22));transition:opacity .2s}
.sp-reel.stop::after{opacity:0}
.sp-reel.stop{animation:spClack .26s cubic-bezier(.2,.8,.2,1)}
@keyframes spClack{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.sp-reel.out{opacity:0}
.sp-strip{position:absolute;left:0;top:0;width:100%;will-change:transform}
.sp-strip img{display:block;width:100%;object-fit:cover}
.sp-newb{position:absolute;z-index:5;transform:translate(-50%,-60%);padding:4px 9px;border-radius:999px;background:#16a34a;color:#fff;font-size:11px;font-weight:900;letter-spacing:.1em;box-shadow:0 0 0 2px #14123d;animation:spNew 1.1s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}
@keyframes spNew{0%{transform:translate(-50%,-20%) scale(.4);opacity:0}30%{transform:translate(-50%,-90%) scale(1.15);opacity:1}100%{transform:translate(-50%,-110%) scale(1);opacity:1}}
.sp-newb.out{opacity:0;transition:opacity .28s}
.sp-new{margin-left:6px;padding:2px 7px;border-radius:999px;background:#16a34a;color:#fff;font-size:11px;font-style:normal;font-weight:900;letter-spacing:.08em;vertical-align:2px}
/* THE SETTLE */
.sp-beat{position:fixed;z-index:319;width:120px;height:120px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(34,197,94,.45),rgba(22,163,74,.18) 45%,rgba(22,163,74,0) 70%)}
.sp-hrt{position:fixed;z-index:319;pointer-events:none}
.sp-hrt svg{display:block;width:100%;height:100%;fill:#16a34a;stroke:#14123d;stroke-width:1.5}
/* her pick wears a pin: the die leaves it */
.sp-pin{position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:50%;background:#16a34a;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #14123d;pointer-events:none}
.sp-pin svg{width:13px;height:13px;fill:#fff}
.sp-rnd .dgi{display:block;font-size:22px;font-weight:600}.sp-rnd .dgi b{font-weight:900;color:#16a34a}
.sp-rnd small{display:block;font-size:14px;font-weight:800;opacity:.8}
.sp-how{margin:-4px 0 0;text-align:center;font-size:15px;font-weight:700;color:#14123d}
.sp-ctl{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sp-seg{display:inline-flex;padding:4px;border-radius:999px;background:#fff;box-shadow:0 0 0 2.5px #14123d}
.sp-seg button{min-width:56px;padding:8px 14px;border:0;border-radius:999px;background:none;color:#14123d;font:inherit;font-size:15px;font-weight:900;cursor:pointer}
.sp-seg button[aria-selected=true]{background:#14123d;color:#fff}
.sp-cap{padding:10px 14px;border-radius:16px;background:#fff;color:#14123d;box-shadow:0 0 0 2.5px #14123d}
.sp-cap summary{font-weight:900;cursor:pointer}
.sp-cap p{margin:8px 0 6px;font-size:13.5px;font-weight:700;opacity:.75}
.sp-cap pre{margin:0;white-space:pre-wrap;font:600 14px/1.45 Montserrat,sans-serif}
.sp-pts{margin:0;text-align:center;font-size:15.5px;font-weight:800;color:#14123d}
.sp-pts b{color:#15803d;font-size:18px}
.sp-bar{display:flex;gap:10px}
.sp-go,.sp-2{padding:15px 18px;border:0;border-radius:18px;font:inherit;font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 0 0 3px #14123d,0 5px 0 3px #14123d}
.sp-go{flex:1;background:#16a34a;color:#fff}
.sp-2{background:#fff;color:#14123d}
.sp-go:active,.sp-2:active{transform:translateY(3px);box-shadow:0 0 0 3px #14123d,0 2px 0 3px #14123d}
.sp-go[disabled]{opacity:.6}
.sp-dots{display:flex;justify-content:center;gap:10px}
.sp-dots button{width:13px;height:13px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #14123d;cursor:pointer}
.sp-dots button[aria-selected=true]{background:#14123d}
.sp-why{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;line-height:1.4}
.sp-why>b{font-size:17px;font-weight:900}
.sp-why span b{color:#a16207}
.sp-nt{margin-top:4px;padding-top:8px;border-top:2px dashed rgba(20,18,61,.18)}
.sp-tk{display:block;margin-top:8px;padding:10px 14px;border:0;border-radius:999px;background:#14123d;color:#fff;font:inherit;font-weight:900;cursor:pointer}
.sp-pick h3{margin:14px 0 8px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.sp-acts{display:flex;gap:8px;margin:10px 0 4px}.sp-acts .btn{margin:0}
.sp-none{margin:10px 0;font-weight:700;opacity:.8}
.sp-qr{width:min(78vw,300px);margin:12px auto 6px;padding:12px;border-radius:16px;background:#fff}
.sp-qr svg{display:block;width:100%;height:auto}
.pg-spot.still *{animation:none!important}
@media (prefers-reduced-motion:reduce){.pg-spot *,.gm-share *,.gm-invite *,.sp-die{animation:none!important}}