.nf-game{position:relative}.nf-board{isolation:isolate;aspect-ratio:3/2;width:100%;box-shadow:none;touch-action:manipulation;background-color:#0000;border:1px solid #0000;border-radius:1rem;outline:none;flex-direction:column;align-items:center;padding-top:clamp(3rem,5vw,4.5rem);transition:background-color .5s,border-color .5s,box-shadow .5s;display:flex;position:relative;overflow:hidden}.nf-board:not([data-phase=idle]){border-color:var(--theme-line);background-color:color-mix(in oklab, var(--theme-surface) 94%, transparent);box-shadow:0 1px 2px var(--theme-shadow-color), 0 36px 80px -48px var(--theme-shadow-color-strong)}.nf-board[data-phase=idle]{aspect-ratio:auto;height:auto;min-height:0;padding-bottom:clamp(2.5rem,5vw,4rem)}.nf-board:before{content:"";z-index:-2;pointer-events:none;opacity:0;background:radial-gradient(58% 52% at 50% 26%, color-mix(in oklab, var(--theme-accent) 18%, transparent) 0%, transparent 72%), radial-gradient(42% 44% at 82% 92%, color-mix(in oklab, var(--theme-primary) 12%, transparent) 0%, transparent 72%);transition:opacity .5s;position:absolute;inset:0}.nf-board:after{content:"";z-index:-1;pointer-events:none;opacity:0;background-image:linear-gradient(to right, color-mix(in oklab, var(--theme-line) 62%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--theme-line) 62%, transparent) 1px, transparent 1px);background-size:34px 34px;transition:opacity .5s;position:absolute;inset:0;-webkit-mask-image:radial-gradient(78% 80% at 50% 58%,oklch(0% 0 0) 10%,#0000 78%);mask-image:radial-gradient(78% 80% at 50% 58%,oklch(0% 0 0) 10%,#0000 78%)}.nf-board:not([data-phase=idle]):before{opacity:1}.nf-board:not([data-phase=idle]):after{opacity:.42}.nf-board:focus-visible{box-shadow:0 0 0 3px var(--theme-ring), 0 1px 2px var(--theme-shadow-color), 0 36px 80px -48px var(--theme-shadow-color-strong)}.nf-board[data-phase=playing]{cursor:none;touch-action:none;-webkit-user-select:none;user-select:none}.nf-board__hud{z-index:6;opacity:0;visibility:hidden;pointer-events:none;color:var(--theme-muted);letter-spacing:.16em;text-transform:uppercase;justify-content:space-between;align-items:flex-start;gap:1rem;font-size:.68rem;font-weight:600;transition:opacity .3s .1s,visibility .3s;display:flex;position:absolute;top:14px;left:16px;right:16px}.nf-board:not([data-phase=idle]) .nf-board__hud{opacity:1;visibility:visible}.nf-board[data-phase=won] .nf-board__hud,.nf-board[data-phase=lost] .nf-board__hud{opacity:0;visibility:hidden;transition-delay:0s}.nf-hud__group{flex-direction:column;gap:.15rem;display:flex}.nf-hud__group:last-child{align-items:flex-end}.nf-hud__row{align-items:center;gap:8px;display:flex}.nf-hud__label{color:var(--theme-muted)}.nf-hud__value{color:var(--theme-heading);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:1.05rem;line-height:1.1;display:inline-block}.nf-hud__value.is-bumping{animation:.18s ease-out nf-score-pop}@keyframes nf-score-pop{50%{color:var(--theme-primary);transform:scale(1.16)}}.nf-lives{align-items:center;gap:5px;height:1.1rem;display:flex}.nf-life{background:linear-gradient(180deg, color-mix(in oklab, var(--theme-primary) 55%, white 45%), var(--theme-primary-solid));width:9px;height:9px;box-shadow:0 0 10px color-mix(in oklab, var(--theme-primary) 50%, transparent);border-radius:999px;transition:background .2s,box-shadow .2s,opacity .2s,transform .2s}.nf-life.is-lost{background:var(--theme-line-strong);box-shadow:none;opacity:.55;transform:scale(.75)}.nf-sound-row{justify-content:flex-end;margin-top:.75rem;display:none}.nf-board:not([data-phase=idle])~.nf-sound-row{display:flex}.nf-sound{border:1px solid color-mix(in oklab, var(--theme-control-line) 60%, transparent);background-color:color-mix(in oklab, var(--theme-surface) 78%, transparent);width:28px;height:28px;color:var(--theme-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.nf-sound:hover{background-color:var(--theme-surface-muted);color:var(--theme-heading)}.nf-sound:focus-visible{box-shadow:0 0 0 3px var(--theme-ring);outline:2px solid #0000}.nf-sound svg{width:15px;height:15px;display:block}.nf-sound .nf-sound__off,.nf-sound[hidden]{display:none}.nf-sound[data-muted=true]{color:var(--theme-faint)}.nf-sound[data-muted=true] .nf-sound__on{display:none}.nf-sound[data-muted=true] .nf-sound__off{display:block}.nf-wordmark{z-index:2;grid-template-columns:repeat(var(--nf-cols,17), minmax(0, 1fr));pointer-events:none;gap:clamp(2px,.45vw,5px);width:min(76%,46rem);margin:0;display:grid;position:relative}.nf-brick{aspect-ratio:1.18;border:1px solid color-mix(in oklab, var(--theme-primary-solid) 68%, var(--theme-line));background:linear-gradient(158deg, color-mix(in oklab, var(--theme-primary) 76%, white 24%) 0%, var(--theme-primary-solid) 46%, color-mix(in oklab, var(--theme-primary-solid-hover) 82%, black 18%) 100%);width:100%;box-shadow:inset 0 1px 0 oklab(100% 0 5.96046e-8/.28), inset 0 -1px 0 oklab(0% none none/.1), 0 2px 4px color-mix(in oklab, var(--theme-shadow-color-strong) 65%, transparent);border-radius:clamp(2px,.32vw,5px);display:block;position:relative;overflow:hidden}.nf-brick.is-hit{animation:.1s ease-out forwards nf-brick-hit}.nf-brick.is-dead{visibility:hidden}@keyframes nf-brick-hit{0%{opacity:1;filter:brightness()}30%{opacity:1;filter:brightness(1.45)}to{opacity:0;filter:brightness(1.6)}}.nf-shard{top:var(--nf-s-y,0px);left:var(--nf-s-x,0px);z-index:1;width:var(--nf-s-w,12px);height:var(--nf-s-h,10px);background:linear-gradient(158deg, color-mix(in oklab, var(--theme-primary) 76%, white 24%) 0%, var(--theme-primary-solid) 46%, color-mix(in oklab, var(--theme-primary-solid-hover) 82%, black 18%) 100%);clip-path:var(--nf-s-clip,polygon(0 0, 100% 0, 100% 100%));transform-origin:var(--nf-s-origin,50% 50%);filter:brightness(var(--nf-s-bright,1));will-change:transform, opacity;pointer-events:none;position:absolute}.nf-ball{z-index:5;width:var(--nf-ball-size,14px);height:var(--nf-ball-size,14px);border:1px solid color-mix(in oklab, var(--theme-primary-solid) 60%, var(--theme-line));background:radial-gradient(circle at 32% 28%, oklch(100% 0 0) 0%, color-mix(in oklab, var(--theme-primary) 45%, white 55%) 38%, var(--theme-primary-solid) 100%);box-shadow:0 0 12px color-mix(in oklab, var(--theme-primary) 70%, transparent), 0 0 30px color-mix(in oklab, var(--theme-primary) 35%, transparent);opacity:0;will-change:transform;pointer-events:none;border-radius:999px;transition:opacity .2s;position:absolute;top:0;left:0;transform:translate(0,0)}.nf-paddle{z-index:4;border:1px solid color-mix(in oklab, var(--theme-primary-solid) 70%, var(--theme-line));background:linear-gradient(180deg, color-mix(in oklab, white 45%, var(--theme-primary)) 0%, var(--theme-primary-solid) 48%, var(--theme-primary-solid-hover) 100%);width:clamp(88px,19%,168px);height:clamp(10px,1.5vw,14px);box-shadow:inset 0 1px 0 oklab(100% 0 5.96046e-8/.45), 0 0 22px color-mix(in oklab, var(--theme-primary) 40%, transparent), 0 8px 20px -10px var(--theme-shadow-color-strong);opacity:0;will-change:transform;border-radius:999px;transition:opacity .24s,filter .16s;position:absolute;bottom:clamp(18px,4%,30px);left:0;transform:translate(0,0)}.nf-paddle:after{content:"";filter:blur(1px);pointer-events:none;background:oklab(100% 0 5.96046e-8/.35);border-radius:999px;position:absolute;inset:2px 34%}.nf-paddle.is-hit{filter:brightness(1.35)}.nf-board[data-phase=playing] .nf-ball,.nf-board[data-phase=playing] .nf-paddle{opacity:1}.nf-start{z-index:7;width:min(92%,620px);box-shadow:none;text-align:center;background:0 0;border:0;margin:clamp(2rem,5vw,3.5rem) auto 0;padding:0;transition:opacity .3s,transform .3s,visibility .3s;position:relative}.nf-board:not([data-phase=idle]) .nf-start{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px)}.nf-start__title,.nf-start__body,.nf-start__cta{animation:.6s cubic-bezier(.2,.8,.2,1) both nf-start-in}.nf-start__title{animation-delay:50ms}.nf-start__body{animation-delay:.2s}.nf-start__cta{margin-top:1.5rem;animation-delay:.8s;display:inline-block}@keyframes nf-start-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.nf-start__title{font-family:var(--aw-font-heading);letter-spacing:-.02em;color:var(--theme-heading);text-wrap:balance;margin:0;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.15}.nf-start__body{max-width:46ch;color:var(--theme-muted);text-wrap:balance;margin:.7rem auto 0;font-size:clamp(.9rem,1.2vw,1rem);line-height:1.5}.nf-start__button{margin:0}.nf-start__hint{max-width:48ch;color:var(--theme-muted);margin:.7rem auto 0;font-size:.72rem;line-height:1.4}.nf-result{z-index:9;background-color:color-mix(in oklab, var(--theme-page) 52%, transparent);backdrop-filter:blur(7px)saturate(1.05);justify-content:center;align-items:center;padding:clamp(.75rem,3vw,1.5rem);animation:.28s both nf-fade-in;display:flex;position:absolute;inset:0}.nf-result[hidden]{display:none}.nf-result__card{border:1px solid var(--theme-line);background-color:color-mix(in oklab, var(--theme-surface) 94%, transparent);width:min(100%,30rem);box-shadow:0 1px 2px var(--theme-shadow-color), 0 30px 80px -44px var(--theme-shadow-color-strong), inset 0 1px 0 oklab(100% 0 5.96046e-8/.34);text-align:center;border-radius:1.25rem;padding:clamp(1.25rem,3vw,2rem);animation:.32s cubic-bezier(.2,.8,.2,1) both nf-result-in}.nf-result__mark{justify-content:center;gap:5px;margin-bottom:.9rem;display:flex}.nf-result__mark span{background:linear-gradient(158deg, color-mix(in oklab, var(--theme-primary) 72%, white 28%), var(--theme-primary-solid));width:24px;height:15px;box-shadow:inset 0 1px 0 oklab(100% 0 5.96046e-8/.3), 0 2px 4px color-mix(in oklab, var(--theme-shadow-color-strong) 55%, transparent);border-radius:3px}.nf-result__mark span:first-child{opacity:.45;transform:translateY(2px)rotate(-5deg)}.nf-result__mark span:nth-child(2){opacity:.7;transform:translateY(-2px)rotate(3deg)}.nf-result__mark span:nth-child(3){opacity:.9;transform:translateY(1px)rotate(-2deg)}.nf-result__mark span:nth-child(4){opacity:.6;transform:translateY(-3px)rotate(6deg)}.nf-result__kicker{letter-spacing:.18em;text-transform:uppercase;color:var(--theme-primary);margin:0 0 .3rem;font-size:.68rem;font-weight:700}.nf-result__title{font-family:var(--aw-font-heading);letter-spacing:-.02em;color:var(--theme-heading);outline:none;margin:0;font-size:clamp(1.35rem,3vw,1.9rem);font-weight:700;line-height:1.15}.nf-result__body{max-width:40ch;color:var(--theme-muted);margin:.55rem auto 0;font-size:.92rem;line-height:1.5}.nf-result__stats{justify-content:center;gap:clamp(1.5rem,5vw,2.5rem);margin:1.15rem 0 .5rem;display:flex}.nf-stat{flex-direction:column;gap:.15rem;display:flex}.nf-stat__label{letter-spacing:.14em;text-transform:uppercase;color:var(--theme-muted);font-size:.65rem;font-weight:600}.nf-stat__value{font-variant-numeric:tabular-nums;color:var(--theme-heading);font-size:1.45rem;line-height:1}.nf-result__new-best{letter-spacing:.12em;text-transform:uppercase;color:var(--theme-success);margin:.25rem 0 0;font-size:.68rem;font-weight:700}.nf-result__actions{flex-direction:column;gap:.6rem;margin-top:1.1rem;display:flex}.nf-fx{z-index:8;pointer-events:none;position:absolute;inset:0;overflow:hidden}.nf-particle{width:var(--nf-p-size,6px);height:var(--nf-p-size,6px);background:var(--nf-p-color,var(--theme-primary));box-shadow:0 0 8px color-mix(in oklab, var(--theme-primary) 55%, transparent);transform:translate3d(var(--nf-p-x,0px), var(--nf-p-y,0px), 0);will-change:transform, opacity;border-radius:2px;animation:.62s cubic-bezier(.18,.7,.32,1) forwards nf-particle;position:absolute;top:0;left:0}@keyframes nf-particle{0%{opacity:1;transform:translate3d(var(--nf-p-x,0px), var(--nf-p-y,0px), 0) scale(1) rotate(0deg)}to{opacity:0;transform:translate3d(calc(var(--nf-p-x,0px) + var(--nf-p-dx,0px)), calc(var(--nf-p-y,0px) + var(--nf-p-dy,0px)), 0) scale(.3) rotate(var(--nf-p-rot,90deg))}}.nf-board.is-shaking{animation:.26s ease-in-out nf-board-shake}@keyframes nf-board-shake{0%,to{transform:translate(0,0)}20%{transform:translate(-4px,2px)}45%{transform:translate(4px,-1px)}70%{transform:translate(-2px,1px)}}@keyframes nf-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nf-result-in{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:none}}.nf-links{margin-top:clamp(2.5rem,6vw,4rem)}.nf-links__title{letter-spacing:.18em;text-transform:uppercase;color:var(--theme-muted);text-align:center;margin:0 0 1rem;font-size:.68rem;font-weight:700}@media (width<=1023px){.nf-board{aspect-ratio:4/3;min-height:540px}}@media (width<=639px){.nf-board{aspect-ratio:auto;height:460px;min-height:0}.nf-wordmark{width:88%}.nf-board__hud{font-size:.62rem;top:10px;left:12px;right:12px}.nf-hud__value{font-size:.95rem}.nf-hud__row{gap:6px}.nf-lives{gap:4px}.nf-life{width:8px;height:8px}.nf-sound{width:26px;height:26px}.nf-sound-row{margin-top:.5rem}.nf-sound svg{width:14px;height:14px}.nf-start{width:93%}.nf-start__title{font-size:1.35rem}.nf-start__body{font-size:.86rem}.nf-start__hint{font-size:.68rem}.nf-paddle{bottom:14px}.nf-result__card{padding:1.15rem}}@media (width>=640px){.nf-result__actions{flex-direction:row;justify-content:center}}@media (prefers-reduced-motion:reduce){.nf-brick,.nf-shard,.nf-board.is-shaking,.nf-result,.nf-result__card{animation:none}.nf-start__title,.nf-start__body,.nf-start__cta{opacity:1;animation:none;transform:none}.nf-paddle{transition:opacity .2s}}
