:root{--header-h:65px}.page-game{background-color:#12d0ff;background:linear-gradient(180deg,#12d0ff 0,#12d0ff 32%,#004b58 100%)}.page-game::before{content:'';z-index:0;position:absolute;left:0;top:0;width:100%;height:100%;opacity:.3;background:url(../../images/logo-clubinho-sabesp-repeat.svg);background-position:left 3.5% top 15%}.page-game::after{content:'';z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;opacity:.13;background:url(../../images/illustration/waves-6.svg) no-repeat 0 0/cover;mix-blend-mode:multiply}.header{max-height:var(--header-h)}.header .container{padding:0;display:flex;justify-content:center;align-items:center}.header .container::before{background-position:center center;background-size:110% 215%}.header .back{position:absolute;left:20px;font-size:0;background:0 0;border:0;color:#fff;display:flex;align-items:center;gap:10px}.header .back:before{content:'';display:inline-block;width:30px;height:30px;background:#12d0ff url(../../images/icon/arrow-left.svg) no-repeat center center/auto 62%;background-position:right 62% top 50%;border-radius:50%;box-shadow:0 4px 4px rgba(0,0,0,.45);transition:all .5s ease;outline:0}.header .back:focus-visible:before,.header .back:hover:before{background-color:#ff8a01}.header .logo{margin-bottom:-12px;background:#fff;height:77px;width:100%;max-width:230px;border-radius:0 0 20px 20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.header .logo img{height:40px;object-fit:contain}.main{overflow:hidden;position:relative;z-index:3}.stage{position:relative;margin-top:var(--header-h);max-height:calc(100dvh - var(--header-h));flex:1;display:flex}.stage .container{position:relative;flex:1;display:flex;flex-direction:column;align-items:center}.stage .view{position:relative;min-width:25%;height:100%;aspect-ratio:9/16;flex:1;display:flex;justify-items:center;align-items:center}.stage .view::before{content:'';position:absolute;top:50%;left:50%;z-index:0;width:115%;height:94.5%;border-radius:20px;border:3px solid #ffc601;transform:rotate(-2.5deg) translate(-47%,-50%);transition:all .3s ease-in-out}.stage .embed{position:relative;z-index:1;width:100%;height:100%;flex:1}.stage .embed img{background:0 0;width:100%;height:100%;object-fit:contain}.stage .embed iframe{border:0;width:100%;height:100%;object-fit:contain}.stage .embed #unity-container{max-height:100%}.stage .embed #unity-canvas{max-width:100%;max-height:100%;aspect-ratio:9/16}.switch-mode{position:absolute;bottom:20px;left:100%;display:inline-block;width:auto;height:42px;cursor:pointer}.switch-mode input{opacity:0;width:100%;height:100%;position:absolute;z-index:1}.switch-mode .slider{position:relative;z-index:1;width:42px;height:42px;background-color:#021c2d;box-shadow:inset 0 4px 4px rgba(0,0,0,.25);border-radius:999px;display:flex;align-items:center}.switch-mode .slider:before{position:absolute;content:"";height:36px;width:36px;left:3px;bottom:3px;background:url(../../images/icon/lamp-off.svg) no-repeat center center;border-radius:50%;transition:.4s}.switch-mode input:focus-visible+.slider{outline:2px solid #ff8a01}.switch-mode input:checked+.slider{background-color:#2196f3}.switch-mode input:checked+.slider:before{background-image:url(../../images/icon/lamp-on.svg)}.switch-mode .texts{overflow:hidden;width:100%;height:100%;position:relative;display:flex;align-items:center}.switch-mode .text{display:none;color:#fff;font-size:1.6rem;font-weight:600;line-height:1.2;transition:all 0s ease-in,all .3s ease-out;overflow:hidden;z-index:0;position:absolute;left:0}.switch-mode .-light{width:100px;transform:translateX(50%)}.switch-mode .-dark{opacity:0}.dark-mode{background:#000e16}.dark-mode .view::before{border-color:#fff;transform:rotate(2.1deg) translate(-51.8%,-47.2%)}.dark-mode .-light{opacity:0;transform:translateX(-100%)}.dark-mode .-dark{opacity:1;transform:translateX(20%)}@media (max-width:767px){.stage .container{padding-inline:15px}.switch-mode{position:fixed;bottom:15px;z-index:1;transform:translateX(-57px)}}@media (max-width:575px){.switch-mode{display:none}}@media (min-width:768px){.stage{padding-block:30px 50px}.switch-mode{transform:translateX(50px)}}@media (min-width:992px){:root{--header-h:78px}.header .back{font-size:1.5rem;font-weight:600}.header .logo{height:89px;max-width:236px}.switch-mode{transform:translateX(80px)}.switch-mode .slider{width:160px}.switch-mode input:checked+.slider:before{transform:translateX(322%)}.switch-mode .text{display:block}}@media (min-width:1200px){.header .back{left:90px}}