.app{width:390px;height:780px;background:url(/background.jpg) bottom center/cover no-repeat;position:relative;overflow:hidden;box-shadow:0 0 20px #0003;container-type:inline-size;container-name:app}.app>*{position:relative;z-index:1}.landing-page{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;position:relative;overflow:hidden}.landing-content{display:flex;flex-direction:column;align-items:center;z-index:2;position:relative;width:100%;max-width:100%;top:-120px}.bingo-header{width:420px!important;max-width:100%;height:auto;margin-top:-60px;margin-bottom:-40px;position:relative;z-index:3}.cta-card{background:#fff;border:4px solid #333;border-radius:45px;padding:15px 30px;margin-top:-30px;text-align:center;width:75.5%;max-width:75.5%;min-height:auto;box-shadow:8px 8px #0003;display:flex;flex-direction:column;justify-content:center;align-items:center}.cta-text{font-size:20px;line-height:1.5;margin-bottom:15px;color:#000;font-style:normal}.play-button{background-color:transparent;background-image:url(/button-box.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center;color:#2d3436;border:none;outline:none;border-radius:0;font-size:18px;font-weight:400;padding:18px 48px 24px;cursor:pointer;font-family:Retrobit,monospace;transition:all .2s;min-width:180px}.play-button:hover,.play-button:active{transform:translateY(-2px);filter:brightness(1.05)}@container app (max-width: 480px){.landing-page{justify-content:space-evenly;padding-bottom:50px}.landing-content{top:0;gap:5px;width:100%;max-width:100%}.mygate-logo{margin-top:0;margin-bottom:-10px;width:140px}.cta-text{font-size:18px}.bingo-header{width:90%!important;max-width:350px!important;margin-top:-10px;margin-bottom:-10px}.cta-card{width:85%;max-width:85%;padding:25px 20px;margin-top:0}}.mute-button-landing{position:absolute;top:15px;right:15px;background:#fff;border:4px solid #333;border-radius:8px;width:45px;height:45px;font-size:20px;cursor:pointer;z-index:200;box-shadow:4px 4px #0003;transition:all .2s}.mute-button-landing:hover{transform:translateY(-2px);box-shadow:6px 6px #0003}.mute-button-landing:active{transform:translateY(0);box-shadow:2px 2px #0003}.name-input-page{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;position:relative;overflow:hidden}.name-input-content{display:flex;flex-direction:column;align-items:center;z-index:2;position:relative;width:100%;max-width:100%;top:-90px}.mygate-logo{width:180px;height:auto;margin-top:10px;margin-bottom:-20px;z-index:3}.bingo-header{width:420px!important;max-width:100%;height:auto;margin-top:-40px;margin-bottom:-40px;position:relative;z-index:3}.input-card{background:#fff;border:4px solid #333;border-radius:45px;padding:15px 30px;margin-top:-30px;text-align:center;width:75.5%;max-width:75.5%;min-height:auto;box-shadow:8px 8px #0003}.input-card h2{font-size:20px;line-height:1.4;margin-bottom:15px;color:#000;font-weight:400}.name-input{width:90%;padding:12px 14px;font-size:16px;font-family:Retrobit,monospace;border:4px solid #333;border-radius:8px;margin-bottom:15px;box-sizing:border-box;background:#f5f5f5}.name-input:focus{outline:none;background:#fff;box-shadow:0 0 0 2px #f60}.submit-button{background-color:transparent;background-image:url(/button-box.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center;color:#2d3436;border:none;outline:none;border-radius:0;font-size:27px;font-weight:400;padding:18px 48px 24px;cursor:pointer;font-family:FSPimlico-Bold_2,sans-serif;transition:all .2s;min-width:180px;width:auto;box-shadow:none}.submit-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05);box-shadow:none}.submit-button:active:not(:disabled){transform:translateY(0);filter:brightness(.95);box-shadow:none}.submit-button:disabled{opacity:.5;cursor:not-allowed}@container app (max-width: 480px){.name-input-page{justify-content:space-evenly;padding-bottom:50px}.name-input-content{top:0;gap:5px;width:100%;max-width:100%}.mygate-logo{margin-top:0;margin-bottom:-10px;width:140px}.input-card h2{font-size:18px}.bingo-header{width:90%!important;max-width:350px!important;margin-top:-10px;margin-bottom:-10px}.input-card{margin-top:0;width:85%;max-width:85%}}.mute-button-name{position:absolute;top:15px;right:15px;background:#fff;border:4px solid #333;border-radius:8px;width:45px;height:45px;font-size:20px;cursor:pointer;z-index:200;box-shadow:4px 4px #0003;transition:all .2s}.mute-button-name:hover{transform:translateY(-2px);box-shadow:6px 6px #0003}.mute-button-name:active{transform:translateY(0);box-shadow:2px 2px #0003}.bingo-grid-page{height:100%;display:flex;flex-direction:column;align-items:center;padding:5px 4px;position:relative;overflow:hidden;top:0;background:url(/bingo-backgrounds.png) center center/cover no-repeat}.bingo-header-small{margin:10px 0 15px;z-index:2;display:flex;flex-direction:column;align-items:center}.main-header-logo{width:420px;height:auto;margin-top:-130px;margin-bottom:-80px}.anniversary-badge{width:60px;height:auto;margin-top:-10px;margin-bottom:20px;z-index:3;scale:2.5}.mute-button{position:absolute;top:15px;right:15px;background:#fff;border:4px solid #333;border-radius:8px;width:45px;height:45px;font-size:20px;cursor:pointer;z-index:10;box-shadow:4px 4px #0003;transition:all .2s}.mute-button:hover{transform:translateY(-2px);box-shadow:6px 6px #0003}.mute-button:active{transform:translateY(0);box-shadow:2px 2px #0003}.bingo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px;width:90%;max-width:90%;margin:0 auto;box-sizing:border-box;position:relative;left:-20px;top:-100px;z-index:20}.bingo-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:4px;cursor:pointer;position:relative;transition:all .2s ease;overflow:visible;box-sizing:border-box;scale:1.15}.tile-background{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:155%;height:155%;object-fit:contain;pointer-events:none}.bingo-tile:hover{transform:scale(1.02)}.bingo-tile:active{transform:scale(.98)}.bingo-tile.struck{animation:tileStrike .5s ease-out}@keyframes tileStrike{0%{transform:scale(1)}25%{transform:scale(1.1) rotate(5deg)}50%{transform:scale(1.05) rotate(-5deg)}75%{transform:scale(1.08) rotate(3deg)}to{transform:scale(1)}}.confetti-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;pointer-events:none;z-index:5}.tile-text{font-size:9px;text-align:center;font-weight:700;color:#333;line-height:1.15;z-index:1;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:none;hyphens:none;font-family:Archivo_Condensed-Light,sans-serif;position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);padding:4px;width:75%;display:flex;align-items:center;justify-content:center}.instruction-text{text-align:center;font-size:14px;color:#000;font-weight:400;margin:15px 0 10px;z-index:2;background:#fffffff2;padding:10px 16px;border-radius:8px;border:3px solid #333;font-family:Archivo_Condensed-Light,sans-serif}.score-counter{background:#fff;border:4px solid #333;border-radius:8px;padding:10px 20px;font-size:16px;font-weight:700;margin:10px 0;box-shadow:4px 4px #0003;z-index:2}.finish-btn{background-color:transparent;background-image:url(/button-box.png);background-size:100% 100%;background-repeat:no-repeat;background-position:center;color:#000;font-size:24px;padding:10px 40px 20px;cursor:pointer;font-family:FSPimlico-Bold_2,sans-serif;margin:50px 15px 15px;transition:all .2s;z-index:2;border:none;outline:none}.finish-btn:hover{transform:translateY(-2px)}.finish-btn:active{transform:translateY(0)}.personality-popup{position:fixed;top:auto;bottom:95px;left:50%;transform:translate(-50%) scale(.675);z-index:1000;animation:popupSlideUp .3s ease-out}.bingo-grid-page{padding-top:60px;justify-content:flex-start}.popup-banner{position:relative;padding:40px 70px;display:flex;align-items:center;justify-content:center}.banner-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.popup-text{font-size:18px;font-weight:700;color:#333;text-align:center;z-index:1;position:relative;white-space:nowrap;width:max-content;max-width:none;font-family:FSPimlico-BlackItalic_2,sans-serif}.glitter-container{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:999}@keyframes popupSlideUp{0%{opacity:0;transform:translate(-50%,50px) scale(.675)}to{opacity:1;transform:translate(-50%) scale(.675)}}@keyframes glitter{0%{opacity:0;transform:translateY(0) scale(0)}50%{opacity:1;transform:translateY(-100px) scale(1)}to{opacity:0;transform:translateY(-200px) scale(0)}}.glitter-particle{position:absolute;width:10px;height:10px;background:gold;border-radius:50%;animation:glitter 1.5s ease-out forwards}@container app (max-width: 480px){.bingo-grid{max-width:100%;gap:8px;padding:8px;top:-20px;left:-5px;width:95%}.tile-text{font-size:7px}.main-header-logo{width:300px;margin-top:-70px;margin-bottom:-50px}.bingo-grid-page{padding-top:60px;justify-content:flex-start}.instruction-text{font-size:12px;margin:10px 0;padding:6px 12px}.finish-btn{margin:30px 10px 10px;padding:8px 30px;font-size:20px}}@container app (max-width: 360px){.bingo-grid{gap:6px}.tile-text{font-size:6px}}.result-screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 10px 40px;position:relative;overflow-y:auto;overflow-x:hidden}.result-header{display:flex;flex-direction:column;align-items:center;z-index:2;position:absolute;top:0;left:0;width:100%;pointer-events:none}.action-section{position:absolute;bottom:-80px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}.mygate-logo-small{width:180px;height:auto;margin-top:90px;margin-bottom:0;z-index:3;scale:3}.bingo-header-img{width:210px!important;max-width:100%;height:auto;margin-top:10px;margin-bottom:0;position:relative;scale:2.25;z-index:3}.scoreboard-window{position:absolute;top:385px;width:560px;max-width:560px;background-image:url(/scoreboard.png);background-size:contain;background-repeat:no-repeat;background-position:center;padding:10px;display:flex;flex-direction:column;align-items:center;left:50%;transform:translate(-50%) scale(4.375);box-sizing:border-box;margin-top:30px}.score-counter{position:relative;top:auto;right:auto;background:transparent;border:none;padding:0;font-family:FSPimlico-Bold_2,monospace;font-size:32px;font-weight:bolder;color:#000;margin-bottom:10px;margin-left:-20px;z-index:20;box-shadow:none;text-shadow:none}.character-rank-section{display:flex;align-items:center;justify-content:center;width:100%;gap:15px;margin-top:-10px}.character-box{width:130px;height:130px;display:flex;align-items:center;justify-content:center;flex-shrink:0;scale:.5;margin-left:45px;margin-top:5px;scale:.3}.character-sprite{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.rank-box{padding-right:0;margin-left:-145px;scale:.3;margin-top:5px;width:250px;text-align:left}.rank-title{font-family:FSPimlico-Bold_2,monospace;font-size:18px;font-weight:700;color:#000;text-transform:uppercase;line-height:1.1;white-space:pre-wrap}.separator-line{width:70%;height:4px;background:#000;margin-top:8px;margin-bottom:8px;margin-left:10px}.bottom-phrase{position:absolute;bottom:auto;left:auto;transform:none;font-size:14px;color:#333;text-align:center;max-width:90%;line-height:1.4;scale:.3;font-family:FSPimlico-BlackItalic_2,sans-serif;margin-top:75px}.action-section{position:absolute;bottom:20px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:100}.share-btn{width:auto;min-width:280px;height:60px;padding:10px 45px 15px 40px;background-image:url(/button-box.png);background-size:100% 100%;background-repeat:no-repeat;background-color:transparent;color:#2d3436;font-family:FSPimlico-Bold_2,sans-serif;font-size:38px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.share-btn:active{transform:translate(2px,2px);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))}.play-again-btn{width:auto;min-width:220px;height:100px;padding:20px 30px 25px;background-image:url(/yellow-tile.png);background-size:100% 100%;background-repeat:no-repeat;background-color:transparent;color:#2d3436;font-family:FSPimlico-Bold_2,sans-serif;font-size:24px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.play-again-btn:active{transform:translate(2px,2px)}@container app (min-width: 768px){.scoreboard-window{width:60%}}@container app (max-width: 480px){.result-screen{justify-content:flex-start;padding-top:20px}.result-header{top:0;margin-bottom:20px}.mygate-logo-small{margin-top:30px;margin-bottom:-20px;width:130px;scale:1}.bingo-header-img{margin-top:-30px;margin-bottom:0;width:60%!important;scale:1}.scoreboard-window{position:relative;top:120px;left:auto;transform:none;width:90%;max-width:380px;scale:1.25;margin:0 auto;padding:40px 20px;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center}.character-rank-section{margin-top:10px;gap:10px;scale:1}.character-box{width:100px;height:100px;margin-left:25px;scale:1}.rank-box{margin-left:-30px;scale:1;padding-right:0;text-align:center}.score-counter{font-size:24px;margin-bottom:5px}.rank-title{font-size:18px;margin-left:-35px}.bottom-phrase{position:relative;margin-top:35px;width:80%;max-width:100%;scale:1;font-size:14px;padding:0 20px;font-family:FSPimlico-BlackItalic_2,sans-serif}.action-section{position:relative;bottom:0;margin-top:150px;flex-direction:column;gap:20px}.share-btn{width:80%;min-width:unset;margin-bottom:0;height:45px;font-size:20px}.play-again-btn{width:70%;min-width:unset;height:50px;font-size:14px}}.mute-button-result{position:absolute;top:15px;right:15px;background:#fff;border:4px solid #333;border-radius:8px;width:45px;height:45px;font-size:20px;cursor:pointer;z-index:200;box-shadow:4px 4px #0003;transition:all .2s}.mute-button-result:hover{transform:translateY(-2px);box-shadow:6px 6px #0003}.mute-button-result:active{transform:translateY(0);box-shadow:2px 2px #0003}@font-face{font-family:Retrobit;src:url(/fonts/retrobit.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:FSPimlico-Bold_2;src:url(/fonts/FSPimlico-Bold_2.otf) format("opentype");font-weight:700;font-style:normal}@font-face{font-family:FSPimlico-BlackItalic_2;src:url(/fonts/FSPimlico-BlackItalic_2.otf) format("opentype");font-weight:400;font-style:italic}@font-face{font-family:FSPimlico-Black;src:url(/fonts/FSPimlico-Black.otf) format("opentype");font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Retrobit,monospace;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;image-rendering:pixelated;image-rendering:crisp-edges;overflow:hidden;width:100vw;height:100vh;background-color:#000;display:flex;justify-content:center;align-items:center}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.pixel-border{box-shadow:0 -4px #000,4px 0 #000,0 4px #000,-4px 0 #000}.pixel-border-white{box-shadow:0 -4px #fff,4px 0 #fff,0 4px #fff,-4px 0 #fff}.btn-orange{background:linear-gradient(180deg,#f93,#f60);border:none;color:#000;font-family:Retrobit,monospace;font-size:18px;padding:12px 32px;cursor:pointer;transition:transform .1s}.btn-orange:hover{transform:scale(1.05)}.btn-orange:active{transform:scale(.95)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.fade-in{animation:fadeIn .5s ease-out}.slide-up{animation:slideUp .3s ease-out}