.four-app{font-family:var(--font-prompt), var(--font-display), system-ui, sans-serif;background:radial-gradient(1200px 700px at 50% -10%, #101a30 0%, transparent 55%), var(--bg);color:var(--text);min-height:100vh}.thin-scroll{scrollbar-width:thin;scrollbar-color:#94a3b866 transparent}.thin-scroll::-webkit-scrollbar{width:6px;height:6px}.thin-scroll::-webkit-scrollbar-thumb{background:#94a3b866;border-radius:3px}.thin-scroll::-webkit-scrollbar-track{background:0 0}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.animate-pop{animation:.18s ease-out pop}.board-felt{background:radial-gradient(circle at 50% 25%,#1e40af 0%,#1e3a8a 45%,#0f2160 100%);box-shadow:inset 0 0 120px #00000080}.c4-board{--c4-cell:clamp(34px, 11.5vw, 52px);--c4-gap:clamp(5px, 1.6vw, 9px);padding:var(--c4-gap);background:linear-gradient(160deg,#2563eb 0%,#1d4ed8 45%,#1e3a8a 100%);border-radius:18px;box-shadow:0 18px 44px -14px #1e3a8abf,inset 0 2px #ffffff2e,inset 0 -6px 14px #00000059}.c4-hole{width:var(--c4-cell);height:var(--c4-cell);background:radial-gradient(circle at 38% 32%,#0d1526 0%,#0a1020 70%);border-radius:50%;place-items:center;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 3px 6px #000000b3,inset 0 -2px 3px #ffffff0f}.c4-disc{border-radius:50%;width:84%;height:84%;box-shadow:inset 0 -3px 6px #00000059,inset 0 3px 5px #ffffff73,0 1px 2px #0006}.c4-disc:after{content:"";border:2px solid #0000002e;border-radius:50%;width:46%;height:46%;margin:auto;position:absolute;inset:0}.c4-disc--red{background:radial-gradient(circle at 38% 32%,#ff6b6b 0%,#ef4444 45%,#b91c1c 100%)}.c4-disc--yellow{background:radial-gradient(circle at 38% 32%,#fde047 0%,#facc15 45%,#d97706 100%)}@keyframes c4-drop{0%{opacity:.4;transform:translateY(-460%)}70%{opacity:1;transform:translateY(0)}84%{transform:translateY(-11%)}to{transform:translateY(0)}}.c4-disc--drop{animation:.42s cubic-bezier(.3,.7,.4,1.1) c4-drop}@keyframes c4-win{0%,to{box-shadow:inset 0 -3px 6px #00000059,inset 0 3px 5px #ffffff73,0 0 #ffffffe6}50%{box-shadow:inset 0 -3px 6px #00000059,inset 0 3px 5px #ffffff73,0 0 14px 4px #ffffffd9}}.c4-disc--win{animation:1s ease-in-out infinite c4-win}.c4-col{background:0 0;border:none;border-radius:12px;justify-content:center;align-items:flex-start;padding-top:3px;transition:background .12s;display:flex}.c4-col:not(:disabled):hover{background:#ffffff1a}.c4-col-hint{width:calc(var(--c4-cell) * .6);height:calc(var(--c4-cell) * .6);opacity:0;border-radius:50%;transition:opacity .12s;box-shadow:0 2px 6px #0006}.c4-col:not(:disabled):hover .c4-col-hint{opacity:1}@keyframes turnpop{0%{opacity:0;transform:scale(.7)}14%{opacity:1;transform:scale(1.06)}22%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(.96)}}.animate-turnpop{animation:1.5s ease-in-out both turnpop}@media (prefers-reduced-motion:reduce){.c4-disc--drop,.animate-turnpop,.animate-pop,.c4-disc--win{animation:none!important}}