:root{--background: #0d1b2a;--color-primary: #415a77;--color-secondary: #778da9;--color-secondary-light: #96a7bd;--color-tertiary: #e0e1dd;--color-white: #fff;--font-size: 1rem;--font-family: Arial, Helvetica, sans-serif;--spacing-large: 40px;--spacing-medium: 20px;--spacing-small: 10px;--spacing-tiny: 5px;--control-border: 1px solid var(--color-tertiary);--control-border-focus: 1px solid var(--color-primary);--control-border-radius: 20px}body{display:flex;height:100vh;justify-content:center;font-family:var(--font-family);font-size:1rem;background:var(--background);box-sizing:border-box;padding:0;margin:0}.structure-vertical{display:flex;flex-direction:column;gap:var(--spacing-medium)}.structure-vertical--align-center{height:100%;justify-content:center}.structure-button-bar{position:fixed;box-sizing:border-box;left:50%;bottom:0;translate:-50% 0;padding:var(--spacing-medium)}.textfield{width:100%;color:var(--color-white);font-family:var(--font-family);font-size:var(--font-size);background:transparent;border:none;border-bottom:var(--control-border);box-sizing:border-box;padding:var(--spacing-small)}.textfield:focus{border:none;border-bottom:var(--control-border-focus);outline:none}.button{width:100%;font-family:var(--font-family);font-size:var(--font-size);background:var(--color-secondary);border:none;border-radius:var(--control-border-radius);cursor:pointer;padding:var(--spacing-small)}.button:hover{background:var(--color-secondary-light)}.notification{position:fixed;width:100%;background:var(--color-tertiary);text-align:center;box-sizing:border-box;border-radius:var(--control-border-radius) var(--control-border-radius) 0 0;transition:bottom ease-in-out 1s;bottom:-100%;left:0;padding:var(--spacing-medium) var(--spacing-small)}.notification--show{bottom:0}.spinner{display:none;position:absolute;justify-content:center;align-items:center;width:100%;height:100vh;background:var(--background);top:0;left:0}.spinner--show{display:flex}.spinner .loader{width:48px;height:48px;color:#fff;border-radius:50%;transform:rotate(45deg);perspective:1000px}.spinner .loader:before,.spinner .loader:after{content:"";display:block;position:absolute;width:inherit;height:inherit;border-radius:50%;animation:1s spin linear infinite;transform:rotateX(70deg);top:0;left:0}.spinner .loader:after{color:var(--color-primary);transform:rotateY(70deg);animation-delay:.4s}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotateccw{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes spin{0%,to{box-shadow:.2em 0 0 0 currentcolor}12%{box-shadow:.2em .2em 0 0 currentcolor}25%{box-shadow:0 .2em 0 0 currentcolor}37%{box-shadow:-.2em .2em 0 0 currentcolor}50%{box-shadow:-.2em 0 0 0 currentcolor}62%{box-shadow:-.2em -.2em 0 0 currentcolor}75%{box-shadow:0 -.2em 0 0 currentcolor}87%{box-shadow:.2em -.2em 0 0 currentcolor}}.champion-skin{cursor:pointer}champion-skin-component:has(.champion-skin.hide){display:none}.menu{position:absolute;display:flex;width:100%;height:100vh;justify-content:center;align-items:center;background:#00000080;top:0;left:0}.menu ul{list-style-type:none;padding:0;margin:0}.menu__button,.menu__close{color:var(--color-white);font-family:var(--font-family);font-size:var(--font-size);background:none;border:none;cursor:pointer}.menu__button{border-bottom:1px solid transparent;padding:10px 0}.menu__button:hover{border-bottom:1px solid var(--color-white)}.menu__hide{display:none}.menu__close{position:absolute;top:0;right:0;padding:var(--spacing-large)}.display{cursor:pointer}.display__champion{display:block;height:100vh}.display__bottom{position:absolute;display:flex;flex-direction:column;align-items:center;left:50%;transform:translate(-50%);bottom:0}.display__icon{width:55%;border-radius:50%}.display__name{color:#fff}