body{background-color:var(--bg-gray);color:var(--black);block-size:100vh;inline-size:100vw;overflow:hidden;padding:2rem 2.5rem;display:flex;flex-flow:column nowrap;justify-content:space-between}header{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.player__list{display:flex;flex-flow:row nowrap;gap:var(--space-4)}.player__list .player__content{background:url(/assets/Avatar-BZhii0to.svg) center / cover no-repeat;border:var(--border-5) solid var(--white);border-radius:var(--radius-round);inline-size:5rem;block-size:5rem;aspect-ratio:1;position:relative;pointer-events:none;z-index:1}.player__list .player__content:nth-child(1){background-image:url(/assets/memoji-namil-oW0AHl7g.png)}.player__list .player__content:nth-child(2){background-image:url(/assets/memoji-esther-Cvxvl_Jc.png)}.player__list .player__content:nth-child(3){background-image:url(/assets/memoji-hyungmin-DFoixVT-.png)}.player__list .player__content:nth-child(4){background-image:url(/assets/memoji-jieun-B3TvuzKP.png)}:is(.player__list .player__content:focus-within,.player__list .player__content:hover):after{content:"";display:block;background:url(/assets/menu-focus-ring-D3SZ1TqH.png) center / cover no-repeat;inline-size:5.625rem;block-size:5.625rem;position:absolute;inset-inline-start:-.625rem;inset-block-start:-.625rem;pointer-events:none}.player__list .player__content .player__link{outline:0;display:block;inline-size:100%;block-size:100%;aspect-ratio:1;position:relative;pointer-events:auto;z-index:2}.player__list .player__content .player__name{inline-size:100%;color:var(--select-font-color);font-size:var(--font-size-18);font-weight:var(--weight-500);line-height:1;text-align:center;position:absolute;inset-block-end:calc(var(--space-2) * (-1) - var(--font-size-24));inset-inline-start:50%;transform:translate(-50%);z-index:2}.info{display:flex;flex-flow:row nowrap;block-size:2rem;gap:var(--space-4)}.info time{font-size:calc(var(--font-size-36));font-weight:var(--weight-500);line-height:1}.info time span{font-size:var(--font-size-24);font-weight:var(--weight-700);margin-inline-start:var(--space-2)}.oer-dialog{inset-block-start:50%;max-inline-size:40rem;transform:translateY(-50%);margin:auto;padding:var(--space-4);border:6px solid var(--white);border-radius:var(--radius-16);background:var(--bg-gray);color:var(--black);line-height:1.5;z-index:999}.oer-dialog::backdrop{background-color:#000c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.oer-dialog .oer-dialog__title{font-size:var(--font-size-24);text-align:center}.oer-dialog .oer-dialog__details{display:flex;flex-flow:column nowrap;row-gap:var(--space-3);padding-block:var(--space-3)}.oer-dialog .oer-dialog__details strong{display:block}.oer-dialog .oer-dialog__details .oer-dialog__list ul{padding-inline-start:var(--space-4);list-style-type:disc}.oer-dialog .oer-dialog__close{border-radius:var(--radius-4);inline-size:100%;background:var(--gray-500);margin:0;padding:var(--space-2);font-size:var(--font-size-18);font-weight:var(--weight-600);color:var(--white);transition:background-color .2s ease}.oer-dialog .oer-dialog__close:hover,.oer-dialog .oer-dialog__close:focus-visible{background-color:var(--main-red)}.oer-dialog .oer-dialog__close:focus-visible{outline:var(--border-3) solid var(--select-font-color);outline-offset:2px}main{margin-block-start:4rem;display:grid;grid-template-rows:auto auto;gap:2rem}.game-card__container{display:flex;flex-flow:row nowrap;gap:var(--space-4);padding-inline-start:5rem}.game-card__container .game-card__content{inline-size:24rem;block-size:24rem;aspect-ratio:1;border:calc(var(--border-3) * 2) solid var(--white);background-color:var(--gray-50);border-radius:calc(var(--radius-4) * 5);position:relative;z-index:1;pointer-events:none}.game-card__container .game-card__content:first-child{background:url(/assets/pianiverse-CB9IJ1vm.svg) center / cover no-repeat}.game-card__container .game-card__content .game-card__focus{opacity:0;position:absolute;top:-12px;left:-12px;inline-size:24.75rem;block-size:24.75rem;aspect-ratio:1;border:calc(var(--border-3) * 2) solid transparent;border-radius:1.625rem;background:url(/assets/images/game-focus-ring.png) center / contain no-repeat;background-origin:border-box;background-clip:border-box}:is(.game-card__container .game-card__content:focus-within,.game-card__container .game-card__content:hover) .game-card__focus{opacity:1}:is(.game-card__container .game-card__content:focus-within,.game-card__container .game-card__content:hover) .game-card__link span{display:block}.game-card__container .game-card__content .game-card__link{outline:0;display:block;position:relative;z-index:2;pointer-events:auto;border-radius:calc(var(--radius-4) * 5);inline-size:24rem;block-size:24rem;aspect-ratio:1}.game-card__container .game-card__content .game-card__link span{display:none;position:absolute;inset-block-start:-2.5rem;inset-inline-start:50%;transform:translate(-50%);color:var(--select-font-color);font-size:var(--font-size-24)}.menu{inline-size:100vw;display:flex;flex-flow:row nowrap;justify-content:center}.menu .menu__container{display:flex;flex-flow:row nowrap;gap:1.25rem;padding:var(--space-3);inline-size:47rem;background:var(--gray-50);border-radius:calc(var(--radius-24) * 5)}.menu__content{position:relative;inline-size:6.25rem;block-size:6.25rem;aspect-ratio:1;border-radius:var(--radius-round)}.menu__content:first-child{margin-inline-end:1.25rem}.menu__content:first-child .menu__button svg{inline-size:100%;block-size:100%;aspect-ratio:1;border-radius:var(--radius-round)}.menu__content .menu__button{border-radius:var(--radius-round);inline-size:100%;block-size:100%;aspect-ratio:1;outline:0;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.menu__content span{display:none;position:absolute;text-align:center;inline-size:100%;inset-block-end:-60px;color:var(--select-font-color);font-size:var(--font-size-24)}:is(.menu__content:focus-within,.menu__content:hover):after{content:"";display:block;background:url(/assets/menu-focus-ring-D3SZ1TqH.png) center / cover no-repeat;inline-size:7rem;block-size:7rem;position:absolute;inset-inline-start:-.375rem;inset-block-start:-.375rem;pointer-events:none}:is(.menu__content:focus-within,.menu__content:hover) span{display:block}footer{display:flex;flex-flow:row nowrap;justify-content:space-between}footer .footer__buttons{display:flex;flex-flow:row nowrap;gap:var(--space-4)}footer .footer__button{display:flex;flex-flow:row nowrap;gap:var(--space-2);align-items:center;padding-inline:var(--space-2) var(--space-3);border-radius:var(--radius-4)}footer .footer__button:focus-within{outline:6px solid var(--select-font-color)}footer .footer__button span{font-size:var(--font-size-24)}