*,:after,:before{box-sizing:border-box}#root,body,html{height:100%;margin:0;overflow-x:hidden;overflow-y:hidden;width:100%}#root,.background,body,html{background-color:#000;display:flex;flex-direction:column}.background{background-image:var(--url);background-position:50%;background-repeat:no-repeat;background-size:cover;height:100lvh;overflow:hidden;width:100dvw}.canvas-wrapper{flex:7 1;min-height:0;touch-action:none}.video-container{flex:3 1;min-height:0}.video-container iframe{border:none;bottom:0;flex:1 1;height:20lvh;position:fixed;width:100%}.main-content{background:none;margin:0 auto;padding:1rem;text-align:center}.game-placeholder{border:2px dashed #ccc;border-radius:8px;margin-top:20px;padding:20px;text-align:center}.loader-container{align-items:center;background:#000;color:#fff;display:flex;flex-direction:column;gap:16px;height:100vh;justify-content:center;opacity:1;transition:opacity .5s ease;width:100vw}.fade-in,.fade-out{opacity:0}.fade-in{animation:fadeIn 2s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.status-text{color:#8cf;font-family:monospace;font-size:1rem;letter-spacing:.15em;margin:0}@keyframes status-dot{0%,60%,to{opacity:0}30%{opacity:1}}.status-dot{animation:status-dot 1.4s infinite}.status-dot:nth-child(2){animation-delay:.2s}.status-dot:nth-child(3){animation-delay:.4s}.signal-ring{animation:expandRing 1.2s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes expandRing{0%{r:6px;stroke-width:2px;opacity:.9}to{r:50px;stroke-width:.5px;opacity:0}}header{grid-gap:.5rem;align-items:center;background:#222;display:grid;flex-shrink:0;gap:.5rem;grid-template-columns:auto 1fr auto;padding:.1em .5rem;z-index:100}.header-left,.header-right{align-items:center;display:flex;gap:.5rem}.header-title{font-size:3rem;overflow:hidden;text-align:center;text-overflow:clip}.header-btn,.header-title{color:#fff;font-family:worm,sans-serif;white-space:nowrap}.header-btn{background:none;border:1px solid #fff;border-radius:5px;flex:0 0 auto;font-size:1rem;padding:.4rem .8rem}.header-btn:hover{background:#fff;color:#222}.dropdown{background:#333;border-radius:5px;box-shadow:0 4px 6px #0000004d;color:#fff;font-family:worm,sans-serif;list-style:none;margin:0;padding:.5rem;position:absolute;right:0;top:100%;z-index:110}.dropdown li{margin:.5rem 0}.dropdown a{color:#fff;text-decoration:none}.dropdown a:hover{text-decoration:underline}.blog-btn-wide{display:inline-flex;text-decoration:none}.blog-item-narrow{display:none}@media (max-width:600px){.blog-btn-wide{display:none}.blog-item-narrow{display:block}.header-title{font-size:2.2rem}}@media (max-width:450px){.header-title{font-size:1.85rem}}@media (max-width:415px){.header-title{font-size:1.6rem}}@media (max-width:400px){.header-btn{font-size:.9rem;padding:.3rem .6rem}}