.bg{--bg-1:#f9df6d;--bg-2:#a0c35a;--bg-3:#b0c4ef;--bg-4:#ba81c5;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:640px;margin:0 auto;color:hsl(var(--foreground))}.bg>*{min-width:0}.dark .bg{--bg-1:#e3c64d;--bg-2:#88ac43;--bg-3:#93abe0;--bg-4:#a56db2}.bg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}.bg-top h2{margin:0;font-size:clamp(20px,4.5vw,26px);font-weight:800;letter-spacing:-.01em}.bg-top small{font-size:.6em;font-weight:700;color:hsl(var(--muted-foreground))}.bg-clock{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}.bg-clock[data-low]{color:hsl(var(--danger));animation:bg-pulse .7s ease-in-out infinite}.bg-players{display:flex;flex-wrap:wrap;gap:8px}.bg-seat{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));font-size:12px}.bg-seat[data-me]{border-color:hsl(var(--primary)/.6)}.bg-seat[data-done]{opacity:.75}.bg-seat__name{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.bg-seat__groups,.bg-seat__lives{display:flex;gap:3px}.bg-seat__groups i{width:11px;height:11px;border-radius:3px;border:1.5px solid hsl(var(--muted-foreground)/.6);transition:background .25s}.bg-seat__groups i[data-on]{background:hsl(var(--foreground));border-color:hsl(var(--foreground))}.bg-seat__lives i{width:6px;height:6px;border-radius:50%;background:hsl(var(--muted-foreground)/.25)}.bg-seat__lives i[data-on]{background:hsl(var(--foreground)/.8)}.bg-board,.bg-grid{display:grid;gap:8px}.bg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bg-tile{display:grid;place-items:center;min-width:0;height:64px;padding:4px;border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card));color:hsl(var(--foreground));font-size:clamp(11px,3vw,16px);white-space:normal;overflow-wrap:anywhere;font-weight:800;line-height:1.1;text-align:center;text-transform:uppercase;white-space:nowrap;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,transform .12s,box-shadow .15s;box-shadow:0 2px 0 hsl(var(--border))}.bg-tile:not(:disabled):hover{background:hsl(var(--muted))}.bg-tile[aria-pressed=true]{background:hsl(var(--foreground));color:hsl(var(--background));border-color:hsl(var(--foreground));transform:translateY(2px);box-shadow:none}.bg-actions button:focus-visible,.bg-share:focus-visible,.bg-tile:focus-visible{outline:3px solid hsl(var(--primary));outline-offset:2px}.bg-tile:disabled{cursor:default}.bg-tile[data-motion=bounce]{animation:bg-bounce .32s ease-out both;animation-delay:calc(var(--i) * 60ms)}.bg-tile[data-motion=shake]{animation:bg-shake .36s ease-in-out}.bg-grid--ghost .bg-tile{opacity:.5}.bg-strip{display:grid;gap:3px;place-content:center;min-height:64px;padding:8px 10px;border-radius:10px;color:#1b1b18;text-align:center;animation:bg-arrive .42s cubic-bezier(.2,.9,.3,1.2) both}.bg-strip b{font-size:clamp(13px,3.4vw,17px);font-weight:900;text-transform:uppercase;letter-spacing:.01em}.bg-strip span{font-size:clamp(12px,3vw,15px);font-weight:600;text-transform:uppercase}.bg-strip[data-level="1"]{background:var(--bg-1)}.bg-strip[data-level="2"]{background:var(--bg-2)}.bg-strip[data-level="3"]{background:var(--bg-3)}.bg-strip[data-level="4"]{background:var(--bg-4)}.bg-strip[data-late]{animation:bg-late .6s ease-out both}.bg-strip[data-glow]{animation:bg-glow 1.1s ease-out both;animation-delay:calc(var(--i) * .14s)}.bg-toast{display:grid;place-items:center;min-height:34px}.bg-toast span{padding:6px 14px;border-radius:999px;background:hsl(var(--foreground));color:hsl(var(--background));font-size:14px;font-weight:800;animation:bg-toast 1.6s ease both}.bg-lives{display:flex;justify-content:center;gap:10px}.bg-lives i{width:14px;height:14px;border-radius:50%;background:hsl(var(--muted-foreground)/.22);transition:background .3s,transform .3s}.bg-lives i[data-on]{background:hsl(var(--foreground))}.bg-lives i:not([data-on]){transform:scale(.7)}.bg-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.bg-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;min-width:46px;padding:0 18px;border:1.5px solid hsl(var(--foreground)/.7);border-radius:999px;background:transparent;color:hsl(var(--foreground));font-weight:800}.bg-actions button:disabled{opacity:.35}.bg-actions .bg-send:not(:disabled){background:hsl(var(--foreground));color:hsl(var(--background))}.bg-giveup{justify-self:center;min-height:44px;padding:0 14px;border:0;background:none;color:hsl(var(--muted-foreground));font-size:13px;text-decoration:underline;text-underline-offset:3px}.bg-result{display:grid;justify-items:center;gap:14px;padding:8px 0;animation:bg-pop .4s ease-out both}.bg-result__score{display:inline-flex;align-items:center;gap:8px;font-size:54px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}.bg-result__score[data-won]{color:hsl(var(--success))}.bg-squares{display:grid;gap:4px}.bg-squares div{display:flex;gap:4px}.bg-squares i{width:22px;height:22px;border-radius:5px;background:hsl(var(--muted))}.bg-squares i[data-level="1"]{background:var(--bg-1)}.bg-squares i[data-level="2"]{background:var(--bg-2)}.bg-squares i[data-level="3"]{background:var(--bg-3)}.bg-squares i[data-level="4"]{background:var(--bg-4)}.bg-records{display:flex;gap:22px;font-weight:800;font-size:18px}.bg-records span{gap:6px}.bg-records span,.bg-share{display:inline-flex;align-items:center}.bg-share{gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:800}.bg-next{margin:0;font-size:14px;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}.bg-podium{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:min(100%,360px)}.bg-podium li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card))}.bg-podium li[data-me]{border-color:hsl(var(--primary)/.6)}.bg-podium li>span{color:hsl(var(--primary));font-weight:900}.bg-podium li>strong{margin-left:auto;font-variant-numeric:tabular-nums}@media (max-width:480px){.bg{gap:10px}.bg-grid{gap:6px}.bg-strip,.bg-tile{min-height:56px}.bg-tile{height:56px;border-radius:8px}.bg-actions button{padding:0 14px}}@keyframes bg-bounce{0%{transform:translateY(2px)}40%{transform:translateY(-9px)}to{transform:translateY(2px)}}@keyframes bg-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}@keyframes bg-arrive{0%{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}@keyframes bg-late{0%{opacity:0;transform:scale(.96);filter:saturate(.3)}to{opacity:1;transform:none;filter:none}}@keyframes bg-glow{0%{box-shadow:0 0 0 0 rgba(255,255,255,0)}40%{box-shadow:0 0 0 4px rgba(255,255,255,.45),0 0 26px rgba(255,240,180,.55);transform:scale(1.02)}to{box-shadow:none;transform:none}}@keyframes bg-toast{0%{opacity:0;transform:translateY(6px)}12%,80%{opacity:1;transform:none}to{opacity:0}}@keyframes bg-pop{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes bg-pulse{50%{opacity:.5}}@media (prefers-reduced-motion:reduce){.bg *,.bg :after,.bg :before{animation:none!important;transition:none!important}}