/* ================================================================
   BRAWL STARS – MODERN DOWNLOAD LP  |  gkoin.xyz
   Design: dark gaming aesthetic, Brawl Stars color DNA
   Font: Lilita One (Supercell-style) + Noto Sans JP
================================================================ */

/* ── TOKENS ── */
:root {
  --bg:         #0C0500;
  --bg2:        #160900;
  --panel:      #1C0F00;
  --panel2:     rgba(255,255,255,0.04);
  --border:     rgba(255,180,60,0.14);
  --border2:    rgba(255,255,255,0.07);
  --orange:     #FF8C00;
  --orange-lt:  #FFC044;
  --yellow:     #FFD000;
  --yellow-lt:  #FFE84A;
  --gold-t:     #FFE840;
  --gold-b:     #FF8000;
  --btn-shad:   #6A2E00;
  --gem:        #00CC44;
  --gem-lt:     #44FF88;
  --gem-dk:     #007722;
  --coin:       #FF9900;
  --red:        #E52000;
  --text:       #FFFFFF;
  --text-m:     rgba(255,255,255,0.60);
  --text-s:     rgba(255,255,255,0.35);
  --radius:     20px;
  --radius-sm:  12px;
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
ul{list-style:none;}
textarea,input,a,button{outline:none;}
::selection{background:#000;color:#fff;}

/* ── BASE ── */
html{overflow-y:scroll;overflow-x:hidden;}
body{
  font-family:'Noto Sans JP',sans-serif;
  font-size:16px;color:var(--text);
  background:var(--bg);overflow-x:hidden;
  min-height:100vh;
}
a{transition:all .2s;text-decoration:none;}
a:hover,a:visited,a:focus,a:active{text-decoration:none;outline:none;}

/* ── ANIMATION DELAYS ── */
.animation-delay-100{animation-delay:.1s}
.animation-delay-200{animation-delay:.2s}
.animation-delay-300{animation-delay:.3s}
.animation-delay-400{animation-delay:.4s}
.animation-delay-600{animation-delay:.6s}
.animation-delay-800{animation-delay:.8s}
.animation-delay-1000{animation-delay:1s}
.animation-delay-1200{animation-delay:1.2s}

/* ── PARTICLES ── */
#particles-js{position:fixed;width:100%;height:100%;left:0;top:0;z-index:0;}

/* ── BACKGROUND ── */
#bg{
  position:fixed;right:0;top:0;width:100%;height:100%;z-index:-2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(180,70,0,.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 15%, rgba(100,35,0,.2) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 85% 10%, rgba(140,50,0,.15) 0%, transparent 55%),
    var(--bg);
}
#bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,180,60,.025) 0,rgba(255,180,60,.025) 1px,transparent 0,transparent 40px),
    repeating-linear-gradient(-45deg,rgba(255,180,60,.025) 0,rgba(255,180,60,.025) 1px,transparent 0,transparent 40px);
}
#bg-c{display:none;}

/* ── URGENCY RIBBON ── */
.urgency-ribbon{
  position:relative;z-index:50;overflow:hidden;
  background:linear-gradient(90deg,var(--red),#CC1A00,var(--red));
  border-bottom:2px solid rgba(0,0,0,.4);
  padding:9px 0;
}
.urgency-ribbon-track{
  display:flex;align-items:center;
  white-space:nowrap;
  animation:ribbon-scroll 18s linear infinite;
}
.urgency-ribbon-track span{
  font-family:'Noto Sans JP',sans-serif;
  font-size:12px;font-weight:700;color:#fff;
  letter-spacing:.5px;padding-right:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.urgency-ribbon-track strong{color:var(--yellow-lt);}
@keyframes ribbon-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTION ── */
.app-download-section{position:relative;z-index:10;padding:30px 0 60px;}

/* ── STATUS BAR ── */
.app-download-status{
  position:relative;width:100%;
  margin:0 0 24px;
}
.app-download-status-content{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;
  background:rgba(0,0,0,.55);
  border:1.5px solid var(--border);
  border-radius:100px;
  padding:10px 20px;
  backdrop-filter:blur(8px);
  max-width:520px;margin:0 auto;
}
.status-row{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;position:relative;
}
.status-row:not(:last-child)::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--border);
}
.status-label{font-size:10px;color:var(--text-s);text-transform:uppercase;letter-spacing:1px;}
.status-dynamic{font-family:'Lilita One',sans-serif;font-size:14px;color:var(--yellow-lt);-webkit-text-stroke:.5px rgba(0,0,0,.5);}
.online-dot,.status-dynamic i.online-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--gem);box-shadow:0 0 6px var(--gem);
  margin-right:4px;animation:dot-blink 1.5s ease-in-out infinite;
}
@keyframes dot-blink{0%,100%{opacity:1}50%{opacity:.4}}

/* ── MAIN CARD ── */
.app-download-wrapper{
  max-width:560px;margin:0 auto;
  background:linear-gradient(160deg, var(--panel) 0%, #120700 100%);
  border:1.5px solid var(--border);
  border-radius:28px;
  padding:36px 32px 40px;
  position:relative;
  box-shadow:0 0 60px rgba(255,140,0,.08), 0 20px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
/* top glow line */
.app-download-wrapper::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),var(--yellow),var(--orange),transparent);
  animation:glow-line 3s ease-in-out infinite;
}
@keyframes glow-line{0%,100%{opacity:.6}50%{opacity:1}}

/* ── APP ICON ── */
.app-icon-wrapper{text-align:center;margin-bottom:20px;}
.app-icon-inner-wrapper{
  display:inline-block;
  background:radial-gradient(circle at 30% 30%,rgba(255,200,80,.1),rgba(0,0,0,.3));
  border:2.5px solid var(--border);
  border-radius:50%;padding:12px;
  box-shadow:0 0 30px rgba(255,140,0,.2),0 8px 24px rgba(0,0,0,.4);
  animation:icon-float 4s ease-in-out infinite;
}
@keyframes icon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.app-icon-img{max-width:130px;border-radius:50%;}
.version-badge{
  display:inline-block;margin-top:10px;
  background:linear-gradient(90deg,var(--gem-dk),var(--gem),var(--gem-dk));
  border:1.5px solid rgba(0,0,0,.3);border-radius:100px;
  padding:4px 14px;
  font-family:'Lilita One',sans-serif;font-size:11px;color:#fff;
  -webkit-text-stroke:.5px rgba(0,0,0,.4);
  letter-spacing:1.5px;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,200,60,.3);
}

/* ── HEADLINE ── */
.app-download-content-header h1{
  font-family:'Lilita One',sans-serif;
  font-size:clamp(22px,6vw,32px);
  color:#fff;text-align:center;
  -webkit-text-stroke:1px rgba(0,0,0,.6);
  text-shadow:0 3px 12px rgba(0,0,0,.5);
  line-height:1.25;margin-bottom:16px;
}
.app-download-content-header h1 span{
  display:block;
  background:linear-gradient(90deg,var(--gold-t),var(--orange-lt),var(--gold-t));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-size:1.15em;
  animation:title-shine 3s ease-in-out infinite;
}
@keyframes title-shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}

/* ── FEATURE PILLS ── */
.feature-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;margin-bottom:18px;
}
.fpill{
  display:inline-flex;align-items:center;gap:5px;
  border:1.5px solid;border-radius:100px;
  padding:6px 13px;font-size:12px;font-weight:700;
  font-family:'Noto Sans JP',sans-serif;
  white-space:nowrap;
}
.fpill-gem{background:rgba(0,200,60,.1);border-color:rgba(0,200,60,.3);color:var(--gem-lt);}
.fpill-coin{background:rgba(255,160,0,.1);border-color:rgba(255,160,0,.3);color:var(--coin);}
.fpill-char{background:rgba(120,80,255,.1);border-color:rgba(120,80,255,.3);color:#BB88FF;}
.fpill-safe{background:rgba(0,120,255,.1);border-color:rgba(0,120,255,.3);color:#66AAFF;}
.fpill b{font-size:15px;}

/* ── GEM DIAMOND ICON ── */
.gem-ico{
  display:inline-block;width:14px;height:14px;
  background:radial-gradient(circle at 35% 30%,var(--gem-lt),var(--gem),var(--gem-dk));
  border-radius:3px;transform:rotate(45deg);
  border:1.5px solid rgba(0,0,0,.4);flex-shrink:0;
  box-shadow:0 0 5px rgba(0,200,60,.5);
}
.gem-ico.sm{width:12px;height:12px;}

/* ── RATING BAR ── */
.rating-bar{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px;margin-bottom:22px;
}
.stars{color:var(--yellow);font-size:16px;letter-spacing:1px;}
.rating-val{font-family:'Lilita One',sans-serif;font-size:18px;color:var(--yellow-lt);-webkit-text-stroke:.5px #000;}
.rating-ct{font-size:11px;color:var(--text-s);}
.dl-badge{
  background:rgba(255,255,255,.07);border:1px solid var(--border2);
  border-radius:100px;padding:3px 10px;
  font-size:11px;font-weight:700;color:var(--text-m);
}

/* ── MAIN BUTTON ── */
.button-wrapper{margin:0 auto;text-align:center;}
#b-1.button,#b-2.button,.button{
  display:inline-flex !important;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,var(--gold-t) 0%,var(--gold-b) 100%) !important;
  border:3px solid #000 !important;border-radius:16px !important;
  box-shadow:
    0 -3px 0 rgba(255,255,255,.3) inset,
    0 6px 0 var(--btn-shad),
    0 10px 28px rgba(0,0,0,.45) !important;
  padding:16px 32px !important;cursor:pointer;
  font-family:'Lilita One',sans-serif !important;
  font-size:20px !important;color:#fff !important;
  -webkit-text-stroke:1.5px #000 !important;
  text-shadow:0 2px 0 #000 !important;
  letter-spacing:.5px;
  position:relative;overflow:hidden;
  text-decoration:none !important;
  transition:transform .1s,box-shadow .1s;
  min-width:220px;
}
#b-1.button:active,#b-2.button:active,.button:active{
  transform:translateY(4px) !important;
  box-shadow:0 -2px 0 rgba(255,255,255,.2) inset,0 2px 0 var(--btn-shad) !important;
}
.button::after{
  content:'';position:absolute;top:0;left:-80%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg);
  animation:btn-shine 2.5s ease-in-out infinite;
}
@keyframes btn-shine{to{left:160%}}
.button .lnr{font-size:.9em;color:rgba(0,0,0,.5);}
.btn-sub{font-size:11px;color:var(--text-s);margin-top:10px;text-align:center;}

/* ── LOADING / ST1 ── */
.loading-files-wrapper{padding:10px 0 6px;}
.connecting-content{text-align:center;}
.loader-wrapper{margin-bottom:4px;}
.loader{
  font-size:64px;text-indent:-9999em;
  color:var(--orange);overflow:hidden;
  width:1em;height:1em;border-radius:50%;
  margin:24px auto 20px;
  box-shadow:
    inset 0 0 0 .12em rgba(255,255,255,.08);
  animation:load6 1.7s infinite ease,round 1.7s infinite ease;
}
@keyframes load6{
  0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}
  5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}
  10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}
  20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}
  38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}
  100%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}
}
@keyframes round{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.console-msg-wrapper{margin:10px 0 0;min-height:50px;}
.console-msg{
  font-family:'Lilita One',sans-serif;
  font-size:1.3em;color:var(--yellow-lt);
  -webkit-text-stroke:.5px rgba(0,0,0,.5);
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  text-align:center;line-height:1.3;
}
.console-msg-error{color:var(--red);}
.loading-files-wrapper .console-msg{font-size:1.2em;}

.console-loadbar-wrapper{margin-top:14px;}
.console-loadbar{
  width:85%;max-width:400px;
  display:table;margin:12px auto 0;
  background:rgba(0,0,0,.4);
  border:1.5px solid var(--border);
  border-radius:100px;padding:5px 6px;
}
.console-loadbar div{
  height:10px;background:linear-gradient(90deg,var(--gem),var(--gem-lt));
  border-radius:100px;overflow:hidden;
  box-shadow:0 0 10px rgba(0,200,60,.5);
  font-size:0;
}
.loading-files-wrapper .console-loadbar{background:rgba(0,0,0,.35);}

/* ── PLATFORM SELECT / ST2 ── */
.platform-select-text{
  font-family:'Lilita One',sans-serif;
  font-size:1.3em;color:#fff;
  -webkit-text-stroke:.5px rgba(0,0,0,.4);
  text-align:center;margin:12px 0 14px;
}
.platform-field-wrapper .row{display:flex;gap:12px;margin:0;}
.platform-field-wrapper .col{flex:1;padding:0;}
.platform-item{
  background:rgba(255,255,255,.04);
  border:2px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:20px 10px;text-align:center;
  cursor:pointer;transition:all .15s;
  animation-duration:1s;
  box-shadow:0 4px 0 rgba(0,0,0,.3);
}
.platform-item:hover{border-color:var(--border);background:rgba(255,180,60,.07);}
.platform-item.active{
  background:rgba(255,200,60,.12);
  border-color:var(--orange);
  box-shadow:0 4px 0 rgba(0,0,0,.3),0 0 16px rgba(255,140,0,.2);
}
.platform-item i{font-size:2.4em;display:block;color:var(--orange-lt);margin-bottom:8px;}
.platform-item span{
  font-family:'Lilita One',sans-serif;font-size:1.1em;
  color:#fff;-webkit-text-stroke:.5px rgba(0,0,0,.4);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.platform-item.active span{color:var(--yellow-lt);}
.border-b-red{border-color:var(--red) !important;}

/* ── MODAL / ST3 ── */
.mfp-bg{background:rgba(0,0,0,.88) !important;backdrop-filter:blur(6px);}
.not-visible{visibility:hidden !important;}
.master-modal{
  margin:0 auto;position:relative;
  max-width:520px;border-radius:24px;
  background:linear-gradient(160deg,var(--panel) 0%,#0E0600 100%);
  border:1.5px solid var(--border);
  box-shadow:0 0 40px rgba(255,140,0,.1),0 20px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
.master-modal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),var(--yellow),var(--orange),transparent);
}
.generator-container{padding:28px 24px 24px;text-align:center;}
.console-loader-wrapper{position:relative;}
.console-content{text-align:center;}

/* ── VERIFICATION / VERIFICATION.PHP ── */
.human-verification-wrapper{padding:2px;}
.human-verification-content{
  max-width:520px;width:100%;
  border-radius:22px;
  padding:28px 28px 32px;
  background:linear-gradient(160deg,var(--panel) 0%,#0E0600 100%);
  margin:0 auto;text-align:center;
  border:1.5px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  position:relative;overflow:hidden;
}
.human-verification-content::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),var(--yellow),var(--orange),transparent);
}
.human-verification-content h2{
  font-family:'Lilita One',sans-serif;
  font-size:1.5em;color:var(--yellow-lt);
  -webkit-text-stroke:.5px rgba(0,0,0,.4);
  margin:0 0 16px;
}
.verification-app-wrapper{margin-bottom:14px;}
.verification-app-wrapper h3{
  font-family:'Noto Sans JP',sans-serif;
  font-size:1em;font-weight:700;color:var(--text-m);margin:0;
}
.verification-app-wrapper h3 span{
  display:block;font-family:'Lilita One',sans-serif;
  font-size:1.3em;color:var(--orange-lt);
  -webkit-text-stroke:.5px rgba(0,0,0,.4);
}
.human-verification-wrapper p{
  font-size:.95em;color:var(--text-m);
  margin:0 auto 16px;line-height:1.7;
}
.human-verification-wrapper i.fa-spinner{
  font-size:2em;display:block;text-align:center;
  margin:0 0 14px;color:var(--orange);
}
.h-v-time-left-wrapper{
  background:rgba(0,0,0,.3);border:1px solid var(--border);
  border-radius:10px;padding:10px 16px;
  margin-bottom:18px;
  font-size:.85em;color:var(--text-s);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
#human_verification_timer_time{
  display:inline;font-family:'Lilita One',sans-serif;
  font-size:1.1em;color:var(--yellow-lt);-webkit-text-stroke:.5px rgba(0,0,0,.4);
}
.verification-button-wrapper{}
#verification-button.button{
  width:100%;display:flex !important;
  justify-content:center;gap:10px;
}

/* ── PROOF SECTION ── */
.proof-section{max-width:560px;margin:28px auto 0;}
.proof-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-s);text-align:center;margin-bottom:12px;}
.proof-feed{display:flex;flex-direction:column;gap:8px;}
.proof-item{
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:12px 14px;
  display:flex;align-items:flex-start;gap:11px;
}
.proof-av{
  width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.proof-body{flex:1;min-width:0;}
.proof-body b{font-size:12px;font-weight:900;color:var(--text);}
.proof-ago{font-size:10px;color:var(--text-s);margin-left:6px;}
.proof-body p{font-size:12px;color:var(--text-m);line-height:1.6;margin-top:3px;}
.proof-gem{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
  font-family:'Lilita One',sans-serif;font-size:15px;
  color:var(--gem-lt);-webkit-text-stroke:.5px rgba(0,0,0,.3);
  background:rgba(0,200,60,.08);border:1px solid rgba(0,200,60,.2);
  border-radius:100px;padding:4px 10px;
}

/* ── FEATURES GRID ── */
.features-grid{
  max-width:560px;margin:28px auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.feat-card{
  background:var(--panel2);border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:18px 12px;
  text-align:center;transition:border-color .2s;
}
.feat-card:hover{border-color:var(--border);}
.feat-ico{font-size:26px;margin-bottom:8px;}
.feat-name{font-family:'Lilita One',sans-serif;font-size:13px;color:var(--orange-lt);-webkit-text-stroke:.3px rgba(0,0,0,.3);margin-bottom:5px;line-height:1.2;}
.feat-card p{font-size:11px;color:var(--text-s);line-height:1.6;}

/* ── FOOTER ── */
footer{
  position:relative;z-index:10;
  text-align:center;padding:20px 0 30px;
  border-top:1px solid var(--border2);
  margin-top:40px;
}
footer p{font-size:11px;color:var(--text-s);line-height:1.9;}

/* ── MAGNIFIC OVERRIDES ── */
.mfp-container{padding:20px 14px;}
.mfp-close{color:var(--text-m) !important;font-size:28px !important;}

/* ── RESPONSIVE ── */
@media(max-width:560px){
  .app-download-wrapper{padding:28px 18px 32px;border-radius:22px;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:420px){
  #b-1.button,#b-2.button,.button{font-size:17px !important;padding:14px 24px !important;min-width:180px;}
  .app-download-content-header h1{font-size:20px;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .master-modal{border-radius:18px;}
  .human-verification-content{padding:22px 18px 26px;}
}
@media(max-width:360px){
  .feature-pills{gap:6px;}
  .fpill{font-size:11px;padding:5px 10px;}
  .features-grid{grid-template-columns:1fr 1fr;}
}