/* Digit shapes and pattern gradients adapted from cobra_winfrey:
   https://codepen.io/cobra_winfrey/pen/xvjbYy */
.santi-numbers{--bg:transparent;background:#222;min-height:560px;padding:35px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;font-family:"Space Mono",monospace}
.santi-numbers [hidden]{display:none!important}
.santi-number-form{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;width:100%;max-width:520px}
.santi-number-form label{width:100%;text-align:center;color:#ccc;font-size:14px}
.santi-number-form input{width:200px;max-width:65%;border:0;border-bottom:1px solid #777;background:transparent;color:#fff;padding:12px;text-align:center;font:32px "Space Mono",monospace;border-radius:0}
.santi-numbers button{background:transparent;border:1px solid #777;color:#fff;padding:12px 18px;font:12px "Space Mono",monospace;cursor:pointer;letter-spacing:1px}
.santi-number-art{display:flex;justify-content:center;width:100%;max-width:900px;margin:0}
.santi-digit{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));width:300px;max-width:100%;aspect-ratio:1;min-width:0;flex:0 1 300px}
.santi-digit.is-rotated{transform:rotate(180deg)}
.santi-number-cell{position:relative;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px var(--color1);transform:rotate(var(--angle));animation:santi-number-reveal .65s both;animation-delay:var(--delay)}
.santi-number-cell::before{border-radius:50%;content:"";position:absolute;inset:0;display:block}
.santi-number-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.santi-number-status{margin:0;min-height:20px;font:12px/1.6 Arial,sans-serif;color:#aaa;text-align:center}
.santi-number-credit{margin:0;padding:15px 24px;font:12px/1.6 Arial,sans-serif;color:#aaa}
.santi-number-credit a{color:#ccc;text-decoration:underline;text-underline-offset:4px}
@keyframes santi-number-reveal{from{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0);opacity:1}}
@media(max-width:760px){.santi-numbers{min-height:420px;padding:28px 12px}}
@media(prefers-reduced-motion:reduce){.santi-number-cell{animation:none}}
.santi-number-cell.pattern-1::before{box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(45deg, var(--bg), var(--bg) calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));}
.santi-number-cell.pattern-2::before{box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(45deg, transparent, transparent calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, var(--bg), var(--bg) calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));}
.santi-number-cell.pattern-3::before{box-shadow:inset 0 0 0 1px var(--color2);
        background:var(--bg);}
.santi-number-cell.pattern-4::before{box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(90deg, transparent, transparent calc(75% - 1px), var(--color1) calc(75% - 1px), var(--color1) calc(75% + 0px), transparent calc(75% + 0px)), repeating-linear-gradient(90deg, var(--bg), var(--bg) calc(12.5% - 1px), var(--color2) calc(12.5% - 1px), var(--color2) 12.5%, var(--bg) 12.5%), var(--bg);}
.santi-number-cell.pattern-5::before{box-shadow:inset 0 0 0 1px var(--color2);
        background:repeating-linear-gradient(-45deg, transparent, transparent calc(25% - 2px), var(--color2) calc(25% - 2px), var(--color2) calc(25% + 0px), transparent calc(25% + 0px), transparent calc(75% - 2px), var(--color2) calc(75% - 2px), var(--color2) 75%, transparent 75%), repeating-linear-gradient(45deg, var(--bg), var(--bg) calc(25% - 2px), var(--color2) calc(25% - 2px), var(--color2) calc(25% + 0px), var(--bg) calc(25% + 0px), var(--bg) calc(75% - 2px), var(--color1) calc(75% - 2px), var(--color1) 75%, var(--bg) 75%), var(--bg);}
.santi-number-cell.pattern-6::before{box-shadow:none;
        background:linear-gradient(to bottom, var(--color1) 2px, transparent 2px), linear-gradient(to left, var(--color1) 2px, transparent 2px), linear-gradient(45deg, transparent, transparent calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));}
.santi-number-cell.pattern-7::before{box-shadow:inset 1px 0 0 0 var(--color1), inset 0 0 0 1px var(--color2);
        background:repeating-linear-gradient(-45deg, transparent, transparent calc(25% - 2px), var(--color1) calc(25% - 2px), var(--color1) calc(25% + 0px), transparent calc(25% + 0px), transparent calc(75% - 2px), var(--color2) calc(75% - 2px), var(--color2) 75%, transparent 75%), repeating-linear-gradient(45deg, var(--bg), var(--bg) calc(25% - 2px), var(--color2) calc(25% - 2px), var(--color2) calc(25% + 0px), var(--bg) calc(25% + 0px), var(--bg) calc(75% - 2px), var(--color1) calc(75% - 2px), var(--color1) 75%, var(--bg) 75%), var(--bg);}
.santi-number-cell.pattern-8::before{box-shadow:none;
        background:linear-gradient(to bottom, var(--color1) 2px, transparent 2px), linear-gradient(to left, var(--color1) 2px, transparent 2px), linear-gradient(45deg, transparent, transparent calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));}
.santi-number-cell.pattern-9::before{box-shadow:none;
        background:linear-gradient(to bottom, var(--color1) 2px, transparent 2px), linear-gradient(to left, var(--color1) 2px, transparent 2px), linear-gradient(45deg, transparent, transparent calc(50% - 1px), var(--color1) calc(50% - 1px), var(--color1) calc(50% + 1px), var(--bg) calc(50% + 1px));
        transform:rotate(var(--angle));}
.santi-number-cell.pattern-10::before{box-shadow:inset 0 0 0 1px var(--color2);
        background:linear-gradient(45deg, transparent, transparent calc(75% - 1px), var(--color1) calc(75% - 1px), var(--color1) calc(75% + 0px), transparent calc(75% + 0px)), repeating-linear-gradient(45deg, var(--bg), var(--bg) calc(12.5% - 1px), var(--color2) calc(12.5% - 1px), var(--color2) 12.5%, var(--bg) 12.5%), var(--bg);}

/* Playfield keeps the number suspended until a projectile hits it. */
.santi-number-art{position:relative;height:420px;align-items:flex-start;padding-top:24px;overflow:hidden;cursor:crosshair;touch-action:pan-y;border-bottom:1px solid #fa814d}
.santi-number-art::after{content:"↑";position:absolute;bottom:4px;left:calc(50% - 8px);color:#ffc08a;font:24px Arial;pointer-events:none}
.number-physics-layer{position:absolute;inset:0;pointer-events:none}
.number-physics-body{position:absolute!important;left:0;top:0;animation:none!important;clip-path:none!important;opacity:1!important}
.number-projectile{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff1d6;box-shadow:0 0 14px #ff7415}