html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}body{margin:0;padding:0;color:#ffffffde;background-color:#2389da;background-image:url(./assets/bg/_dom/bg-main.webp);background-size:cover;background-position:center;background-repeat:no-repeat;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}#app{width:100%;height:100vh;height:100svh;height:var(--app-h, 100svh);overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}#bg-root{position:fixed;top:-2px;left:-2px;right:-2px;height:calc(100vh + 4px);height:calc(100lvh + 4px);z-index:0;overflow:hidden;transition:filter .22s ease}#bg-root.bg-dimmed{filter:brightness(.5)}.bg-layer{position:absolute;inset:0;will-change:transform,opacity}#game-container{position:relative;z-index:1;background-color:transparent}:root{--canvas-w: 720px;--ui-scale: 1}#card-root{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:filter .22s ease}.info-card{position:relative;width:fit-content;max-width:calc(var(--canvas-w) * .9);background:#fff;border-radius:calc(16px * var(--ui-scale));padding:calc(16px * var(--ui-scale));overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:calc(8px * var(--ui-scale));opacity:0;font-family:RobotoCondensed,Arial,sans-serif;color:#1a1a2e;text-align:center}.info-card--anim-fade{transform:scale(.94);transition:opacity .22s ease,transform .22s ease}.info-card--anim-fade.card-in{opacity:1;transform:scale(1)}.info-card--anim-zoom{transform:scale(.01);transition:opacity .4s ease-out .1s,transform .5s cubic-bezier(.6,-.6,.735,.045)}.info-card--anim-zoom.card-in{opacity:1;transform:scale(1);transition:opacity .4s ease-out,transform .5s cubic-bezier(.2,1.2,.3,1.5)}.info-card.card-in{opacity:1}.info-card__timer{position:absolute;left:0;right:0;bottom:0;height:calc(5px * var(--ui-scale));background:#1a1a2e33;overflow:hidden}.info-card__timer-fill{display:block;width:100%;height:100%;transform-origin:left center;background:#1a1a2e33;transform:scaleX(1)}.info-card__timer-fill--grow{transform:scaleX(0)}.info-card__img{width:100%;max-width:100%;height:calc(160px * var(--ui-scale));object-fit:cover;object-position:center top;display:block;border-radius:calc(16px * var(--ui-scale)) calc(16px * var(--ui-scale)) 0 0;margin-bottom:calc(4px * var(--ui-scale))}.info-card__title{font-family:RobotoCondensedBold,Arial Black,sans-serif;font-size:calc(20px * var(--ui-scale));letter-spacing:calc(1px * var(--ui-scale));text-transform:uppercase;color:#1a1a2e;line-height:1.2;padding:0 calc(16px * var(--ui-scale))}.info-card__title:first-child{padding-top:calc(18px * var(--ui-scale))}.info-card__body{font-size:calc(14px * var(--ui-scale));color:#1a1a2ea6;line-height:1.4;padding:0 calc(16px * var(--ui-scale))}.info-card__keys{display:flex;gap:calc(16px * var(--ui-scale));align-items:center;margin:calc(12px * var(--ui-scale)) 0 calc(4px * var(--ui-scale))}.info-card__keys-group{display:grid;gap:calc(4px * var(--ui-scale))}.info-card__keys-group--wasd{grid-template-areas:". w ." "a s d";grid-template-columns:repeat(3,1fr)}.info-card__keys-group--arrows{grid-template-areas:". up ." "left down right";grid-template-columns:repeat(3,1fr)}.info-card__key{display:flex;align-items:center;justify-content:center;width:calc(32px * var(--ui-scale));height:calc(32px * var(--ui-scale));border-radius:calc(6px * var(--ui-scale));border:1px solid rgba(26,26,46,.25);background:#1a1a2e14;font-family:RobotoCondensedBold,Arial Black,sans-serif;font-size:calc(13px * var(--ui-scale));color:#1a1a2ed9;line-height:1}.info-card__keys-sep{font-size:calc(13px * var(--ui-scale));color:#1a1a2e66}.info-card__key--w{grid-area:w}.info-card__key--a{grid-area:a}.info-card__key--s{grid-area:s}.info-card__key--d{grid-area:d}.info-card__key--up{grid-area:up}.info-card__key--left{grid-area:left}.info-card__key--down{grid-area:down}.info-card__key--right{grid-area:right}#ads-spinner{display:none;position:fixed;inset:0;background:#0009;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:16px}#ads-spinner.visible{display:flex}.ads-spinner-icon{width:48px;height:48px;border:5px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}#ads-spinner-label{color:#fff9;font-size:13px;font-family:sans-serif;letter-spacing:.05em;text-transform:uppercase}@keyframes spin{to{transform:rotate(360deg)}}
