/* Base style
   ========================================================================== */
   
/* Fonts */
  @font-face {
   font-family: 'australiatitle';
   src: url('fonts/australia-title-webfont.woff2') format('woff2'),
        url('fonts/australia-title-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

@font-face {
   font-family: 'russo_oneregular';
   src: url('fonts/russo_one-webfont.woff2') format('woff2'),
        url('fonts/russo_one-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

html{ -webkit-user-select: none; -ms-user-select: none; user-select: none; background:#2F3C5E;}

/*-- Percent Loader -- */
#mainLoader{position:absolute;z-index:5; display:none; font-size:35px; line-height:35px; color:#fff; text-align:center; width:100%; font-family:'australiatitle';}

/*-- Content Wrapper -- */
#mainHolder{position:absolute; width:100%;height:100%;}

/*-- Browser Not Support -- */
#notSupportHolder{ width:90%; margin:5% auto; position:relative; color:#fff; text-align:center; font-size:35px; font-family:'australiatitle'; display:none;}

/*-- Rotate Animation -- */
@-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }

/*-- Canvas Wrapper -- */
#canvasHolder{ display:none; width:100%; max-width:1280px; height:100%; margin:auto; position:relative;}
canvas{ position:fixed;}

/*-- Form Wrapper -- */
.clearfix:after { content: "."; visibility: hidden; display: block; clear: both;}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap');

/* Ranking Modal */
.ranking-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200;pointer-events:none;}
.ranking-modal.is-open{display:flex;pointer-events:auto;}
.ranking-modal__backdrop{position:absolute;inset:0;background:rgba(7,12,28,.78);backdrop-filter:blur(6px);}
.ranking-modal__card{position:relative;width:clamp(340px,95vw,1040px);max-height:82vh;background:#111a35;border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 30px 80px rgba(4,7,16,.65);padding:30px 32px;overflow:hidden;display:flex;flex-direction:column;}
.ranking-modal__header{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:18px;text-align:center;}
.ranking-modal__header h2{margin:0;font-size:24px;font-weight:700;color:#f1f5ff;font-family:'australiatitle',sans-serif;}
.ranking-modal__close{position:absolute;top:0;right:0;border:none;background:rgba(255,255,255,.08);color:#f1f5ff;width:38px;height:38px;border-radius:12px;cursor:pointer;font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;}
.ranking-modal__close:hover{background:rgba(109,141,255,.25);}
.ranking-modal__note{margin:0 0 18px;display:flex;flex-direction:column;gap:10px;font-size:15px;align-items:center;text-align:center;width:100%;}
.ranking-modal__pill{display:inline-flex;align-items:center;gap:12px;align-self:center;padding:12px 24px;border-radius:999px;background:linear-gradient(120deg,#fde68a,#fcd34d,#fbbf24);color:#10223d;font-weight:600;box-shadow:0 12px 28px rgba(250,204,21,.28);}
.ranking-modal__pill-icon{font-size:18px;line-height:1;}
.ranking-modal__pill .ranking-modal__pill-label{font-size:12px;text-transform:uppercase;letter-spacing:.18em;opacity:.75;}
.ranking-modal__pill strong{font-size:17px;font-weight:700;color:#10223d;}
.ranking-modal__line{display:flex;align-items:center;justify-content:center;gap:8px;color:#dbeafe;font-size:14px;line-height:1.6;}
.ranking-modal__line span{display:inline-flex;align-items:center;gap:6px;font-size:14px;}
.ranking-modal__pagination{display:none;justify-content:center;align-items:center;gap:12px;margin-top:16px;font-size:13px;}
.ranking-modal__pagination button{border:none;border-radius:999px;padding:8px 18px;background:rgba(255,255,255,.1);color:#f8faff;font-weight:600;cursor:pointer;transition:all .2s ease;}
.ranking-modal__pagination button:hover:not(:disabled){background:rgba(255,255,255,.2);transform:translateY(-1px);}
.ranking-modal__pagination button:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.ranking-modal__pagination-info{color:#dbeafe;font-size:13px;font-weight:500;}
.ranking-modal__user{margin:0 0 16px;padding:12px;border-radius:16px;background:rgba(109,141,255,.12);border:1px solid rgba(109,141,255,.28);color:#f1f5ff;font-size:15px;text-align:center;display:none;}
.ranking-modal__user.visible{display:block;}
.ranking-modal__status{margin:0 0 16px;color:#9ba9cf;font-size:14px;}
.ranking-modal__table-wrapper{overflow:auto;border-radius:16px;border:1px solid rgba(255,255,255,.08);}
.ranking-modal__table{width:100%;border-collapse:collapse;}
.ranking-modal__table th,.ranking-modal__table td{padding:14px 16px;font-size:14px;text-align:left;color:#f1f5ff;}
.ranking-modal__table th{letter-spacing:.05em;text-transform:uppercase;font-size:12px;color:#9ba9cf;}
.ranking-modal__table tbody tr:nth-child(even){background:rgba(255,255,255,.05);}
.ranking-modal__table tbody tr:hover{background:rgba(109,141,255,.12);}
.ranking-modal__table .pos-col{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;}

@media (max-width:640px){
  .ranking-modal__card{padding:24px 20px;width:94vw;max-height:85vh;}
  .ranking-modal__card h2{font-size:20px;}
  .ranking-modal__table thead{display:none;}
  .ranking-modal__table tbody tr{display:flex;flex-direction:column;align-items:stretch;padding:12px 14px;}
  .ranking-modal__table tbody td{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;}
  .ranking-modal__table tbody td::before{content:attr(data-label);font-weight:600;color:#9ba9cf;text-transform:uppercase;margin-right:12px;letter-spacing:.05em;}
  .ranking-modal__table .pos-col{font-size:16px;}
}

.match-results{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:clamp(360px,58vw,820px);display:none;z-index:20;pointer-events:auto;}
.match-results.is-visible{display:block;}
.match-results__card{background:rgba(11,18,43,.92);border:1px solid rgba(255,255,255,.08);border-radius:28px;box-shadow:0 28px 80px rgba(4,7,16,.55);padding:30px 34px 36px;color:#f5f7ff;font-family:'Inter',sans-serif;backdrop-filter:blur(12px);}
.match-results__card.is-win{border-color:rgba(118,228,255,.28);box-shadow:0 32px 90px rgba(118,228,255,.2);}
.match-results__card.is-lose{border-color:rgba(240,143,151,.18);}
.match-results__header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px;}
.match-results__titles{display:flex;flex-direction:column;gap:6px;}
.match-results__title{margin:0;font-size:26px;font-weight:700;letter-spacing:.02em;}
.match-results__subtitle{margin:6px 0 0;font-size:14px;color:#9ba9cf;line-height:1.4;}
.match-results__status{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap;color:#76e4ff;}
.match-results__card.is-lose .match-results__status{color:#f08f97;}
.match-results__lead{margin:6px 0 22px;font-size:14px;color:#cdd4fb;}
.match-results__card.is-win .match-results__lead{color:#a9f0ff;}
.match-results__card.is-lose .match-results__lead{color:#f79aa2;}

.match-results__table-wrapper{position:relative;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(15,24,50,.9),rgba(9,15,32,.96));box-shadow:0 22px 55px rgba(4,7,16,.48);overflow:hidden;}
.match-results__table{width:100%;border-collapse:collapse;min-width:520px;}
.match-results__table thead{background:rgba(255,255,255,.05);}
.match-results__table th{padding:16px 24px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8fa1d9;text-align:left;}
.match-results__table td{padding:18px 24px;font-size:15px;color:#f5f7ff;border-top:1px solid rgba(255,255,255,.06);vertical-align:middle;}
.match-results__table th:nth-child(n+2),
.match-results__table td:nth-child(n+2){text-align:center;}
.match-results__table tbody tr:first-child td{border-top:none;}
.match-results__table tbody tr{transition:background .18s ease, box-shadow .18s ease;}
.match-results__table tbody tr:hover{background:rgba(109,141,255,.08);}
.match-results__table tbody tr.is-winner{background:rgba(255,217,125,.18);}
.match-results__table tbody tr.is-local{box-shadow:inset 0 0 0 1px rgba(118,228,255,.35);}
.match-results__cell-name{display:flex;align-items:center;gap:14px;}
.match-results__cell-name-text{display:flex;flex-direction:column;gap:4px;}
.match-results__tag{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:16px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(109,141,255,.16);color:#aebeff;}
.match-results__tag--victory{background:rgba(118,228,255,.22);color:#76e4ff;}
.match-results__tag--defeat{background:rgba(240,143,151,.22);color:#f79aa2;}
.match-results__name{font-weight:600;font-size:16px;color:#f5f7ff;display:block;}
.match-results__meta{display:block;font-size:12px;color:#9ba9cf;margin-top:2px;letter-spacing:.06em;text-transform:uppercase;}
.match-results__value{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.02em;}
.match-results__value--prize{color:#ffd76c;font-weight:600;}
.match-results__empty td{text-align:center;color:#9ba9cf;padding:32px 24px;font-size:14px;}
.match-results__actions{margin-top:28px;display:flex;justify-content:center;}
.match-results__cta{display:inline-flex;align-items:center;gap:14px;padding:22px 48px;border-radius:24px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(90deg,#4b61ff 0%,#86a4ff 100%);color:#f9fbff;font-size:18px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 16px 40px rgba(75,97,255,.45);cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;}
.match-results__card.is-lose .match-results__cta{background:linear-gradient(90deg,#ff6b81 0%,#ff99ad 100%);box-shadow:0 16px 40px rgba(255,107,129,.38);}
.match-results__cta:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(75,97,255,.55);filter:brightness(1.05);}
.match-results__cta:active{transform:translateY(0);box-shadow:0 16px 45px rgba(75,97,255,.45);}
.match-results__cta-icon{font-size:22px;}
.match-results__cta-label{display:block;}

@media(max-width:640px){
  .match-results{width:calc(100% - 24px);top:52%;}
  .match-results__card{padding:24px 20px;}
  .match-results__header{flex-direction:column;align-items:flex-start;gap:12px;}
  .match-results__status{letter-spacing:.08em;}
  .match-results__table{min-width:0;}
  .match-results__table thead{display:none;}
  .match-results__table tbody tr{display:flex;flex-direction:column;align-items:stretch;padding:16px 18px;border-radius:18px;background:rgba(16,25,48,.92);border:1px solid rgba(255,255,255,.06);margin-bottom:12px;}
  .match-results__table tbody tr.is-local{box-shadow:0 0 0 1px rgba(118,228,255,.35);}
  .match-results__table tbody tr:hover{background:rgba(109,141,255,.12);}
  .match-results__table tbody td{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border:none;font-size:14px;}
  .match-results__table tbody td::before{content:attr(data-label);font-weight:600;color:#9ba9cf;text-transform:uppercase;letter-spacing:.06em;margin-right:12px;}
  .match-results__cell-name{flex-direction:column;align-items:flex-start;gap:6px;}
  .match-results__tag{margin:0 0 4px 0;}
  .match-results__name{font-size:16px;}
  .match-results__actions{margin-top:22px;}
  .match-results__cta{width:100%;justify-content:center;padding:18px 22px;font-size:16px;}
}

/* PWA install banner */
.pwa-install-banner{position:fixed;left:clamp(12px,4vw,32px);right:clamp(12px,4vw,32px);bottom:calc(env(safe-area-inset-bottom,0px)+16px);z-index:1400;display:none;align-items:flex-start;gap:16px;max-width:420px;margin-inline:auto;background:linear-gradient(150deg,rgba(17,26,53,.95),rgba(11,21,48,.92));border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px 20px 20px;box-shadow:0 24px 60px rgba(5,10,30,.55);color:#f5f7ff;font-family:'Inter',sans-serif;line-height:1.5;pointer-events:auto;}
.pwa-install-banner[hidden]{display:none;}
.pwa-install-banner.is-visible{display:flex;animation:pwa-install-banner-in .35s ease;}
.pwa-install-banner__icon{font-size:34px;line-height:1;flex-shrink:0;filter:drop-shadow(0 10px 20px rgba(255,255,255,.25));}
.pwa-install-banner__content{flex:1;display:flex;flex-direction:column;gap:10px;}
.pwa-install-banner__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.pwa-install-banner__title{margin:0;font-size:18px;font-weight:700;color:#fff;}
.pwa-install-banner__close{border:none;background:rgba(255,255,255,.14);color:#fff;width:32px;height:32px;border-radius:12px;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.pwa-install-banner__close:hover{background:rgba(255,255,255,.24);}
.pwa-install-banner__subtitle{margin:0;font-size:14px;color:#cdd6ff;}
.pwa-install-banner__steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#e3e8ff;}
.pwa-install-banner__steps strong{color:#fff;}
.pwa-install-banner__steps em{font-style:normal;color:#fdba74;}
.pwa-install-banner__hint-icon{display:inline-flex;align-items:center;justify-content:center;font-size:15px;margin-left:4px;}
.pwa-install-banner__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.pwa-install-banner__cta{border:none;background:linear-gradient(130deg,#6366f1,#8b5cf6);color:#fff;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;box-shadow:0 12px 30px rgba(99,102,241,.35);transition:transform .2s ease,box-shadow .2s ease;}
.pwa-install-banner__cta:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(99,102,241,.42);}
.pwa-install-banner__dismiss{border:none;background:transparent;color:#d1d9ff;font-size:13px;font-weight:600;padding:10px 12px;border-radius:999px;cursor:pointer;transition:color .2s ease,background .2s ease;}
.pwa-install-banner__dismiss:hover{background:rgba(255,255,255,.08);color:#fff;}
.pwa-install-banner__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#f8faff;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;}
.pwa-install-banner--hint .pwa-install-banner__steps{animation:pwa-install-hint .9s ease;}

@media (min-width:720px){
  .pwa-install-banner{left:auto;right:32px;margin:0;max-width:430px;}
}

@keyframes pwa-install-banner-in{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes pwa-install-hint{
  0%{color:#e3e8ff;}
  30%{color:#fcd34d;}
  60%{color:#fde68a;}
  100%{color:#e3e8ff;}
}
