@layer core,playground,project;@layer project{html{--mobile-design-width: 1700;--desktop-design-width: 1600;--ultrawide-design-width: 2100;font-size:calc(100 / var(--mobile-design-width) * 1vw)}@media(width>=1200px){html{font-size:calc(100 / var(--desktop-design-width) * 1vw)}}@media(width>=2100px){html{font-size:calc(100 / var(--desktop-design-width) * var(--ultrawide-design-width) / 16 * .01rem)}}.container{display:flex;align-items:center;justify-content:center;width:100%;min-height:100dvh;overflow:hidden;user-select:none;touch-action:manipulation}.container *{user-select:none}.pong{--s: 15rem;--p: var(--p-n);--p-e: 10;--p-n: 8;--p-h: 7;display:flex;flex-flow:column nowrap;position:relative;z-index:1;width:1000rem;height:720rem;border-top:var(--s) solid var(--playground-body-color-text);border-bottom:var(--s) solid var(--playground-body-color-text);font-family:Tiny5,sans-serif;font-weight:400;line-height:100%;touch-action:manipulation}@media(width<1200px){.pong{--s: 20rem;max-height:80dvh}}.pong:before{content:"";position:absolute;inset:0 auto 0 calc(50% - var(--s) / 2);z-index:1;width:var(--s);background:repeating-linear-gradient(to bottom,var(--playground-body-color-text) 0%,var(--playground-body-color-text) calc(var(--s) * 2),transparent calc(var(--s) * 2),transparent calc(var(--s) * 4))}.pong[data-portrait]{border-color:transparent}.pong[data-portrait]:after{content:"This game works only in landscape orientation. Please rotate your device.";display:flex;align-items:center;justify-content:center;position:absolute;inset:0 -150rem;z-index:123;background:var(--playground-body-color-background);font-size:max(21px,90rem);line-height:120%;text-align:center;text-transform:uppercase}.pong[data-portrait] *{visibility:hidden}.pong-intro{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:80rem;position:absolute;inset:0;z-index:3;background:var(--playground-body-color-background);border-left:var(--s) solid var(--playground-body-color-text);border-right:var(--s) solid var(--playground-body-color-text);text-transform:uppercase}@media(width<1200px){.pong-intro{gap:60rem}}.pong-intro[data-hidden]{display:none}.pong-intro[data-hidden]~.pong-mobile-controls{visibility:visible}.pong-intro-title{font-size:max(90px,200rem);line-height:64%}.pong-intro-options{display:flex;flex-flow:row nowrap;gap:50rem}.pong-intro-options[data-hidden]{display:none}.pong-intro-options button{position:relative;z-index:1;font-size:max(18px,34rem);line-height:100%;text-transform:uppercase}.pong-intro-options button:before{content:"";position:absolute;inset:-40rem -20rem;z-index:1}.pong-intro-options button i{display:block;transform:rotate(-90deg) translate(.1ch);font-style:normal}@media(pointer:coarse){.pong-intro-options button span{display:none}}.pong-intro-options button[disabled]{pointer-events:none}.pong-intro-options:has(button:hover) button:not(:hover),.pong-intro-options:has(button[data-active]) button:not([data-active]){opacity:.3}.pong-intro-info{display:flex;flex-flow:column nowrap;align-items:center;gap:max(6px,12rem);font-size:max(12px,20rem);line-height:64%}.pong-intro-info>div{display:flex;flex-flow:column nowrap;align-items:center;gap:max(6px,12rem)}@media(hover:hover)and (pointer:fine){.pong-intro-info>div:nth-child(2){display:none}}@media(pointer:coarse){.pong-intro-info>div:nth-child(3){display:none}}.pong-score{display:flex;flex-flow:row nowrap;gap:var(--s);font-size:120rem;line-height:64%}.pong-score>div{flex:0 0 calc(50% - var(--s) / 2);padding:calc(var(--s) * 2)}.pong-score>div:first-child{transform:translate(16rem);text-align:right}.pong-score>div:last-child{text-align:left}.pong-paddles{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;position:absolute;inset:0;z-index:2}.pong-paddles>div{display:flex;align-items:center;width:var(--s);height:100%}.pong-paddles>div>div{width:var(--s);height:calc(var(--s) * var(--p));background:var(--playground-body-color-text)}.pong-ball{position:absolute;inset:50% auto auto 50%;z-index:2;transform:translate(-50%,-50%);width:var(--s);height:var(--s);background:var(--playground-body-color-text)}.pong-ball[data-hidden]{visibility:hidden}.pong-game-over{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;position:absolute;inset:0;z-index:3;text-transform:uppercase}.pong-game-over[data-hidden]{display:none}.pong-game-over>div{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:40rem;padding:60rem 30rem;background:var(--playground-body-color-background)}@media(width<1200px){.pong-game-over>div{margin-top:7%;padding:40rem 10rem}}.pong-game-over-title{font-size:80rem;line-height:64%}.pong-game-over-result{font-size:120rem;line-height:64%}.pong-game-over-buttons{display:flex;flex-flow:row nowrap;gap:40rem}.pong-game-over-buttons:has(button:active) button:not(:active){opacity:.3}@media(hover:hover)and (pointer:fine){.pong-game-over-buttons:has(button:hover) button:not(:hover){opacity:.3}}.pong-game-over button{position:relative;z-index:1;font-size:max(18px,34rem);line-height:64%;text-transform:uppercase}.pong-game-over button:before{content:"";position:absolute;inset:-40rem -20rem;z-index:1}@media(pointer:coarse){.pong-game-over button span{display:none}}.pong-mobile-controls{position:absolute;inset:50% auto auto 50%;z-index:1;transform:translate(-50%,-50%);width:100dvw;height:calc(100% + var(--s) * 2);max-width:calc(100dvw - 100rem);visibility:hidden;font-size:60rem;pointer-events:none;touch-action:manipulation}@media(pointer:fine){.pong-mobile-controls{display:none}}.pong-mobile-controls>button[data-action]{display:none;position:absolute;z-index:1;font-size:max(18px,34rem);line-height:100%;text-transform:uppercase;pointer-events:auto}.pong-mobile-controls>button[data-action]:before{content:"";position:absolute;inset:-40rem -20rem;z-index:1}.pong-mobile-controls>button[data-action][data-action=start],.pong-mobile-controls>button[data-action][data-action=pause]{inset:0 auto auto 0}.pong-mobile-controls>button[data-action][data-action=start][data-hidden],.pong-mobile-controls>button[data-action][data-action=pause][data-hidden]{display:none}.pong-mobile-controls>button[data-action][data-action=reset]{inset:0 0 auto auto}@media(pointer:coarse){.pong-mobile-controls>button[data-action] span{display:none}}.pong-mobile-controls-joysticks{display:grid;grid-template-columns:1fr 1000rem 1fr;gap:90rem;height:100%}@media(hover:hover)and (pointer:fine){.pong-mobile-controls-joysticks{display:none}}.pong-mobile-controls-joysticks>div{display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-end}.pong-mobile-controls-joystick{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border:1px solid var(--playground-body-color-text);border-radius:50%;opacity:.5;pointer-events:auto;touch-action:none;transition:opacity .321s}.pong-mobile-controls-joystick[data-hidden]{display:none}.pong-mobile-controls-joystick>button{position:relative;z-index:1;transform:scale(.85);width:50%;aspect-ratio:1;border:2px solid var(--playground-body-color-text);border-radius:50%;font-size:0}.pong-mobile-controls-joystick>button:before{content:"";position:absolute;inset:-180rem;z-index:1}.pong-mobile-controls-joystick:has(button[data-active]){opacity:.79}.pong-mobile-controls-joystick:has(button[data-active])>button{transform:scale(1)}}