*,*:before,*:after{box-sizing:border-box}html,body,h1,h2,h3,p,button,dl,dt,dd,label,progress,i,em,svg,ul,li,th,tr{padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-weight:400}i,em{font-style:normal}ul,ol{list-style:none}dialog{margin:0;padding:0;border:none}body{background-color:#fff;font-family:Roboto,sans-serif;font-size:16px;line-height:24px;color:#000;font-family:Quicksand,serif;font-optical-sizing:auto;font-weight:400;font-style:normal}app-logo{display:block;width:100vw;height:100vh;background-image:url(/images/logo-512-9f49536bcc1d83cc8f8c78de131b5323.png?vsn=d);background-repeat:no-repeat;background-position:center;background-size:256px 256px;background-color:#ffa300}#main-header{display:flex;justify-content:space-between;margin-bottom:8px;line-height:48px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.1);a {font-size: 20px; line-height: 48px; font-weight: 500;} nav {ul {display: flex;} a {padding: 0 8px;}}}h1,h2{margin-bottom:16px;padding:0 16px;font-weight:600}h1{font-size:32px;line-height:40px;.flag{width:24px;height:24px;border-radius:4px;margin-right:8px}}h2{font-size:24px;line-height:32px}a{text-decoration:none;color:#000}section{margin-bottom:16px}.header.with-actions{display:flex;margin-bottom:16px;padding-right:16px;align-items:center;justify-content:space-between;h1 {margin: 0;}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.no-scroll{overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}button{cursor:pointer}.alert{position:relative;padding:16px;text-align:center;color:#fff;margin:-8px 0 8px;header {font-weight: 600;} button {position: absolute; right: 16px; top: 16px; background-color: transparent; border: none; font-size: 20px; width: 32px; line-height: 32px;} path {fill: #fff;}}.button{display:block;max-width:140px;background-color:#eee;line-height:20px;padding:8px 16px;text-align:center;font-weight:500;font-size:16px;border:none;cursor:pointer;border-radius:4px}.back{display:inline-block;margin-bottom:16px;padding:0 16px;line-height:32px}.alert-info{background-color:#6060eb}.alert-error{background-color:#c03a3a}.user-filter{display:flex;gap:8px}.table{width:100%;padding:0 16px;margin-bottom:32px}table{width:100%;border-collapse:collapse}th{font-weight:500;text-align:left;font-size:14px;line-height:24px;padding:4px 0}td{padding:4px 0;em {font-weight: 600;} i {display: inline-block; width: 14px; height: 14px; border-radius: 50%; background-size: cover; margin-right: 8px;} .flag {width: 14px; height: 14px; border-radius: 4px; margin-right: 8px;}}thead tr{border-bottom:1px solid #eee}tbody tr{&:hover{background-color:#f8f8f8}}tbody .table-clickable:hover{background-color:#eee;cursor:pointer}.table-actions{display:flex;gap:8px;justify-content:flex-end}.tags{display:flex;gap:8px;li {padding: 0 12px; line-height: 24px; background-color: #ccc; border-radius: 4px; font-size: 11px; text-transform: uppercase; font-weight: 500;}}.user-avatar{display:block;width:48px;height:48px;border-radius:50%;background-size:cover}.list{display:flex;gap:8px;line-height:24px;padding:4px 16px;dt {width: 88px; font-weight: 600; font-size: 14px;} dd {font-size: 16px;} .flag {width: 14px; height: 14px; border-radius: 4px; margin-right: 8px;}}@keyframes modal-appear{0%{opacity:0}to{opacity:1}}.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:50;animation:modal-appear .3s;background-color:#00000080;display:flex;justify-content:center;align-items:center;overflow-y:auto;flex-wrap:wrap;padding:32px 0}.modal-dialog{background-color:#fff;position:relative;h2 {padding: 16px; margin-bottom: 16px; font-weight: 600;}}.modal-close{position:absolute;right:16px;top:16px;background-color:transparent;border:none;font-size:20px;width:32px;line-height:32px}form{width:320px;max-width:320px;margin-bottom:32px}.field{margin-bottom:16px;padding:0 16px;label {display: block; margin-bottom: 8px; line-height: 20px; font-size: 14px;}}input[type=text],input[type=number],select{font-family:Roboto,sans-serif;width:100%;padding:8px;line-height:24px;font-size:16px;&.with-errors{border-color:red}}.field-error{display:block;text-align:right;font-size:14px;line-height:32px;color:red}.form-actions{padding:0 16px}@keyframes match-state-playing{0%{background-color:#f82222}50%{background-color:#ed9b53}to{background-color:#f82222}}.players{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:32px;li {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;} li[data-score]:after {content: attr(data-score); display: block; position: absolute; right: -6px; top: -4px; font-size: 10px; font-weight: 600; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background-color: #fff;} i {display: block; width: 58px; height: 58px; border-radius: 50%; background-size: cover;} span {display: block; font-size: 16px; line-height: 20px; max-width: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .disconnected {opacity: .5;}}.matches{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px;>li{background-color:#f0f0f0;border-radius:16px;width:168px}header {display: flex; justify-content: space-between; font-size: 16px; line-height: 20px; font-weight: 500; padding: 8px; div {display: flex; gap: 5px; align-items: center;}} .state {display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #000;} .state-waiting {background-color: rgb(237,155,83);} .state-playing {animation: match-state-playing 1s infinite;} .state-in-countdown {background-color: rgb(96,96,235);} .state-finished {background-color: rgb(111,221,0);} nav {a {padding: 0 2px; opacity: .5; &:hover {opacity: 1;} svg {width: 12px; height: 12px;}}} .flag {width: 14px; height: 14px; border-radius: 50%;} .progress {height: 4px; background-color: rgba(0,0,0,.1); border-radius: 2px; width: calc(100% - 16px); margin: 0 auto 6px; span {display: block; height: 100%; background-color: #000; border-radius: 2px;}} .players {margin-bottom: 8px; gap: 8px; padding: 0 8px; i {width: 32px; height: 32px;}}}#app{.container{background-size:282.5px 108.5px;background-repeat:no-repeat;background-position:50% 32px;background-image:url(/images/title-en-a74a3834bc856d450be5619c7adda8f9.png?vsn=d);padding:160px 24px 64px}.players{justify-content:center}p {text-align: center; font-size: 32px; line-height: 40px; margin-bottom: 32px; font-weight: 500;}}.match-error{display:block;line-height:30px;font-size:24px;color:#fa2564;font-weight:600;text-align:center;margin-bottom:32px}.container{max-width:400px;margin:auto}.stores{display:flex;flex-direction:column;align-items:center;gap:16px}.app-store-badge,.google-play-badge{display:block;background-size:contain;background-repeat:no-repeat}.app-store-badge{width:119.66px;height:40px;background-image:url(/images/app-store-badge-2928664fe1fc6aca88583a6f606d60ba.svg?vsn=d)}.google-play-badge{margin:-6px 0;width:154px;height:59px;background-image:url(/images/google-play-badge-1e91d02cf5a902f38f2923c006d79281.png?vsn=d)}.notification-status{padding:2px 8px;line-height:24px;background-color:#ccc;border-radius:4px;font-size:11px;text-transform:uppercase;font-weight:500}.notification-status-sending{background-color:#f5a56f}.notification-status-sent{background-color:#aaf5a0}.notification-status-pending{background-color:#abd8fb}.notification-status-cancelled{background-color:#d6d3d3}.notification-status-failed{background-color:#f56f6f;color:#fff}.notification-status-retrying{background-color:#ff965e;color:#fff}