@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/orbitron.woff2') format('woff2');}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;
  src:url('fonts/orbitron.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/rajdhani-500.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/rajdhani-600.woff2') format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/rajdhani-700.woff2') format('woff2');}

:root{
  --star:#54e0ff; --gold:#ffd24a; --peril:#ff4d6d; --player:#a97bff;
  --bg0:#05060f; --bg1:#0b0f2a;
  --accent-2:var(--player);
  --font-display:'Orbitron','Segoe UI',sans-serif;
  --font-ui:'Rajdhani','Segoe UI',sans-serif;
  --glass:rgba(255,255,255,.055);
  --glass-brd:rgba(255,255,255,.14);
  --glass-brd-soft:rgba(255,255,255,.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--bg0);}
body{
  font-family:var(--font-ui),-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:#eaf2ff;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:background .5s ease;
  font-size:16px;
}
#game{display:block;width:100vw;height:100vh;position:fixed;inset:0;}

#overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 28%, rgba(20,24,60,.5), rgba(5,6,15,.9));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .3s ease;
  overflow:hidden;}
#overlay.hidden{opacity:0;pointer-events:none;}
#overlay::before,#overlay::after{content:'';position:absolute;border-radius:50%;
  filter:blur(50px);pointer-events:none;mix-blend-mode:screen;opacity:.35;z-index:0;
  will-change:transform;}
#overlay::before{width:56vmax;height:56vmax;left:-18vmax;top:-20vmax;
  background:radial-gradient(circle,var(--star),transparent 68%);
  animation:driftA 16s ease-in-out infinite;}
#overlay::after{width:50vmax;height:50vmax;right:-16vmax;bottom:-18vmax;
  background:radial-gradient(circle,var(--player),transparent 68%);
  animation:driftB 19s ease-in-out infinite;}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.12)}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3vmax,-4vmax) scale(1.08)}}

.screen{display:none;flex-direction:column;align-items:center;
  text-align:center;gap:10px;padding:20px;width:100%;max-width:560px;
  overflow-y:auto;max-height:100dvh;-webkit-overflow-scrolling:touch;
  position:relative;z-index:1;
  scrollbar-width:thin;scrollbar-color:rgba(150,180,255,.35) transparent;}
/* İçerik ekrana sığıyorsa dikeyde ortalar, sığmıyorsa üstten başlatıp tamamen
   kaydırılabilir bırakır — taşan üst kısmın "kayamayan" klasik flexbox hatasını önler. */
.screen::before,.screen::after{content:'';flex:none;margin:auto 0;}
.screen::-webkit-scrollbar{width:5px;}
.screen::-webkit-scrollbar-thumb{background:rgba(150,180,255,.3);border-radius:3px;}
.screen.active{display:flex;animation:fade .35s ease;}

/* "fullpin": başlık/sekmeler ve alt buton sabit kalır, sadece ortadaki içerik
   kayar — tüm ekran hiç dikeyde kaymadan (Subway Surfers menüleri gibi) sığar. */
.screen.fullpin{justify-content:flex-start;overflow:hidden;height:100dvh;
  padding-top:calc(env(safe-area-inset-top) + 18px);
  padding-bottom:calc(env(safe-area-inset-bottom) + 14px);}
.screen.fullpin::before,.screen.fullpin::after{content:none;margin:0;}
.screenHead{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;}
.screenBody{flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0;
  scrollbar-width:thin;scrollbar-color:rgba(150,180,255,.35) transparent;}
.screenBody::-webkit-scrollbar{width:5px;}
.screenBody::-webkit-scrollbar-thumb{background:rgba(150,180,255,.3);border-radius:3px;}
.screenFoot{flex:none;width:100%;padding-top:10px;display:flex;flex-direction:column;gap:8px;align-items:center;}
/* Not: transform içeren bir giriş animasyonu (translateY/scale) burada dururken,
   art arda hızlı ekran geçişlerinde bazı Chromium sürümlerinde ekranın yanlış
   konumda "takılı" kalmasına yol açıyordu (bkz. commit notu). Sadece opaklık
   kullanmak bu hatayı ortadan kaldırıyor. */
@keyframes fade{from{opacity:0}to{opacity:1}}

h1{font-family:var(--font-display);font-size:clamp(34px,9.5vw,72px);font-weight:900;letter-spacing:3px;line-height:1.08;
  background:linear-gradient(90deg,var(--star),var(--player),var(--peril),var(--star));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 46px rgba(120,180,255,.35);
  animation:titleShine 7s linear infinite;
  filter:drop-shadow(0 0 22px rgba(120,180,255,.25));}
@keyframes titleShine{0%{background-position:0% 50%}100%{background-position:300% 50%}}
h2{font-family:var(--font-display);font-size:clamp(21px,5.8vw,32px);font-weight:700;letter-spacing:1.5px;
  background:linear-gradient(90deg,var(--star),var(--player));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(120,180,255,.2);}
.sub{opacity:.75;font-size:clamp(14px,3.7vw,17px);max-width:480px;line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;}

.btn{padding:15px 34px;border:1px solid rgba(255,255,255,.28);border-radius:18px;
  font-family:var(--font-ui);font-size:clamp(16px,4.4vw,20px);
  font-weight:700;letter-spacing:1px;color:#05060f;cursor:pointer;width:min(320px,80vw);
  background:linear-gradient(135deg,var(--star),#bfefff 60%,#fff);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,
             0 -3px 10px rgba(0,0,0,.16) inset,
             0 10px 26px -6px rgba(84,224,255,.55),
             0 3px 10px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s ease;
  position:relative;}
.btn:active{transform:scale(.95);filter:brightness(.96);}
.btn.alt{background:linear-gradient(160deg,#252d54,#1a2040 70%);color:#eaf2ff;
  border-color:var(--glass-brd);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 18px rgba(0,0,0,.4);}
.btn.alt:active{filter:brightness(1.25);}
.btn.small{width:auto;padding:10px 18px;font-size:13.5px;border-radius:14px;}
#modeStartBtn, #screen-menu > .col > .btn:first-child{
  animation:ctaPulse 2.6s ease-in-out infinite;}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 -3px 10px rgba(0,0,0,.16) inset,0 10px 26px -6px rgba(84,224,255,.55),0 3px 10px rgba(0,0,0,.35);}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 -3px 10px rgba(0,0,0,.16) inset,0 14px 36px -4px rgba(84,224,255,.8),0 3px 10px rgba(0,0,0,.35);}
}
.col{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;}
.row2{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;}
.menuGrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;}
.menuGrid2 .btn{width:100%;}

.legend{display:flex;gap:16px 22px;flex-wrap:wrap;justify-content:center;font-size:14px;opacity:.9;}
.legend div{display:flex;align-items:center;gap:8px;}
.dot{width:15px;height:15px;border-radius:50%;box-shadow:0 0 12px currentColor;}

.card{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02)) padding-box,
      linear-gradient(160deg,var(--glass-brd),var(--glass-brd-soft)) border-box;
  border:1px solid transparent;border-radius:18px;
  padding:12px 16px;width:100%;text-align:left;line-height:1.7;font-size:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 20px -8px rgba(0,0,0,.5);}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 4px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.row:last-child{border-bottom:none;}
.row .k{opacity:.7;}
.row .v{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--star);}

.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;}
.theme{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) padding-box,
      linear-gradient(160deg,var(--glass-brd-soft),transparent) border-box;
  border:2px solid transparent;border-radius:14px;padding:8px 6px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;align-items:center;
  transition:border-color .15s, transform .12s, box-shadow .15s;}
.theme:active{transform:scale(.96);}
.theme.sel{border-color:var(--star);box-shadow:0 0 18px rgba(84,224,255,.35),0 0 0 1px rgba(84,224,255,.15) inset;}
.theme.locked{opacity:.55;}
.swatch{display:flex;gap:4px;}
.swatch span{width:12px;height:12px;border-radius:50%;box-shadow:0 0 6px currentColor;}
.theme .tn{font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.2px;}

.toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) padding-box,
      linear-gradient(160deg,var(--glass-brd-soft),transparent) border-box;
  border:1px solid transparent;border-radius:14px;padding:13px 18px;font-size:15px;font-weight:600;}
.sw{width:52px;height:30px;border-radius:999px;background:#2a3358;position:relative;transition:background .25s;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:left .25s cubic-bezier(.34,1.4,.64,1);box-shadow:0 2px 6px rgba(0,0,0,.35);}
.sw.on{background:linear-gradient(90deg,var(--star),var(--player));box-shadow:0 0 14px rgba(84,224,255,.5),0 0 0 1px rgba(255,255,255,.08) inset;}
.sw.on::after{left:25px;}

.toggleGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;}
.toggleGrid .toggle{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;font-size:12.5px;line-height:1.25;}
.toggleGrid .sw{width:42px;height:24px;align-self:flex-end;}
.toggleGrid .sw::after{width:18px;height:18px;}
.toggleGrid .sw.on::after{left:21px;}

.acctRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;}
.acctRow.single{grid-template-columns:1fr;}
.acctCard{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) padding-box,
      linear-gradient(160deg,var(--glass-brd-soft),transparent) border-box;
  border:1px solid transparent;border-radius:14px;
  padding:10px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.acctCard .acctStatus{font-size:11px;font-weight:700;line-height:1.3;min-height:28px;display:flex;align-items:center;}
.acctCard .btn.small{width:100%;padding:8px 6px;font-size:11px;white-space:normal;line-height:1.2;}

#skinGrid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.skinDot{width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid transparent;
  box-shadow:0 0 12px currentColor;transition:transform .12s;}
.skinDot:active{transform:scale(.9);}
.skinDot.sel{border-color:#fff;}
.skinDot.locked{opacity:.25;filter:grayscale(.7);}

.modeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;}
.modeCard{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) padding-box,
      linear-gradient(160deg,var(--glass-brd-soft),transparent) border-box;
  border:2px solid transparent;border-radius:16px;
  padding:14px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:border-color .15s, box-shadow .15s;}
.modeCard.sel{border-color:var(--star);box-shadow:0 0 18px rgba(84,224,255,.3),0 0 0 1px rgba(84,224,255,.12) inset;}
.modeCard .mi{font-size:26px;filter:drop-shadow(0 0 8px rgba(120,180,255,.4));}
.modeCard .mn{font-family:var(--font-ui);font-weight:700;font-size:15px;letter-spacing:.3px;}
.modeCard .md{font-size:10px;opacity:.65;}
.diffRow{display:flex;gap:10px;transition:opacity .2s;}
.diffRow.disabled{opacity:.3;pointer-events:none;}
.diffChip{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.06);cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:13.5px;border:2px solid transparent;letter-spacing:.3px;}
.diffChip.sel{border-color:var(--star);color:var(--star);background:rgba(84,224,255,.1);}

.achGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin-top:8px;}
.achItem{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;text-align:center;
  opacity:.28;transition:opacity .2s;}
.achItem.unlocked{opacity:1;}
.achItem .ic{font-size:24px;filter:drop-shadow(0 0 6px rgba(255,210,74,.4));}

.score{font-family:var(--font-display);font-size:clamp(48px,15vw,100px);font-weight:900;color:#fff;line-height:1;
  text-shadow:0 0 40px rgba(120,200,255,.5);letter-spacing:1px;}
.badge{display:inline-block;padding:6px 16px;border-radius:999px;font-weight:800;letter-spacing:1px;
  font-family:var(--font-ui);
  background:linear-gradient(90deg,var(--gold),#fff2b0);color:#3a2b00;font-size:14px;
  box-shadow:0 0 22px rgba(255,210,74,.5);animation:pop .4s ease;}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.muted{opacity:.65;font-size:14px;letter-spacing:.5px;}
/* Ana menüdeki küçük sürüm etiketi — bir güncelleme push edildiğinde
   gerçekten cihaza yansıyıp yansımadığını görsel olarak doğrulamak için. */
.versionTag{opacity:.35;font-size:10.5px;letter-spacing:1px;margin-top:2px;font-family:var(--font-ui);}

#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:none;}
#hud.show{display:block;}
.hudTop{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:0;right:0;
  display:flex;justify-content:space-between;align-items:flex-start;padding:0 20px;}
.lbl{font-size:10px;letter-spacing:3px;opacity:.55;text-transform:uppercase;}
.val{font-family:var(--font-display);font-size:clamp(22px,6vw,34px);font-weight:700;text-shadow:0 0 18px rgba(120,200,255,.35);}
#combo{color:var(--gold);text-shadow:0 0 20px rgba(255,210,74,.5);transition:transform .1s;}
.center{text-align:center;}
#lives{font-size:20px;letter-spacing:2px;margin-top:2px;color:var(--peril);
  filter:drop-shadow(0 0 8px rgba(255,80,110,.6));display:flex;gap:2px;}
#lives .gicon{filter:none;}
#pw{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 92px);
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}
.pwchip{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);border-radius:999px;
  padding:5px 11px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;}
.pwbar{width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;}
.pwbar i{display:block;height:100%;background:var(--star);}
#pauseBtn{position:absolute;top:calc(env(safe-area-inset-top) + 78px);right:18px;pointer-events:auto;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);color:#eaf2ff;font-size:17px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;}
#pauseBtn:active{transform:scale(.9);}
#levelFlash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:12;pointer-events:none;font-family:var(--font-display);font-size:clamp(24px,7.5vw,46px);font-weight:900;letter-spacing:2px;
  color:#fff;text-shadow:0 0 30px var(--player);opacity:0;}
.hint{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 22px);left:0;right:0;text-align:center;
  font-size:12px;letter-spacing:1.5px;opacity:.5;z-index:9;pointer-events:none;}

/* İlk 10 saniyelik dokunma eğitimi: ekranın sol/sağ yarısına karşılık
   gelen köşelerde, hangi tarafa dokununca hangi yöne geçileceğini
   gösteren parmak-dokunuşu ikonları — "1 sn var, 0.5 sn yok" şeklinde
   yanıp söner (bkz. tutBlink). Gerçek dokunmayı engellememesi için
   pointer-events kapalı. */
#tutorialHint{position:fixed;inset:0;z-index:8;pointer-events:none;display:none;}
#tutorialHint.show{display:block;}
.tutTap{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 64px);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:tutBlink 1.5s linear infinite;}
.tutTap-left{left:12vw;}
.tutTap-right{right:12vw;}
@keyframes tutBlink{0%,66.66%{opacity:1}66.67%,100%{opacity:0}}
.tutPulse{width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.14);position:relative;}
.tutPulse::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);animation:tutRipple 1.5s ease-out infinite;}
@keyframes tutRipple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.tutArrow{font-size:22px;color:#fff;filter:drop-shadow(0 0 6px rgba(120,180,255,.65));}
.tutArrow-flip{transform:scaleX(-1);}
.tutLabel{font-family:var(--font-ui);font-size:10.5px;font-weight:800;letter-spacing:1px;
  color:#fff;background:rgba(0,0,0,.45);padding:3px 10px;border-radius:999px;white-space:nowrap;}

#toast{position:fixed;top:calc(env(safe-area-inset-top) + 14px);left:50%;
  transform:translate(-50%,-140%);background:rgba(10,14,30,.94);border:1px solid rgba(255,255,255,.15);
  padding:11px 20px;border-radius:999px;font-weight:700;font-size:13px;z-index:30;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3);pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:90vw;text-align:center;}
#toast.show{transform:translate(-50%,0);}

body.big-ui .btn{min-height:58px;font-size:1.12em;}
body.big-ui .modeCard,body.big-ui .theme{padding:18px 10px;}
body.left-hand #pauseBtn{left:18px;right:auto;}
body.left-hand .hudTop{flex-direction:row-reverse;}
body.left-hand #walletChip{left:18px;right:auto;}

#walletChip{position:absolute;top:calc(env(safe-area-inset-top) + 128px);right:18px;pointer-events:none;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,184,84,.35);border-radius:999px;
  padding:5px 12px;font-size:13px;font-weight:800;color:#ffd28a;display:flex;align-items:center;gap:5px;}
.walletBig{font-family:var(--font-ui);font-size:22px;font-weight:800;color:#ffd28a;text-shadow:0 0 18px rgba(255,184,84,.4);
  background:linear-gradient(180deg,rgba(255,184,84,.1),rgba(255,184,84,.03)) padding-box,
      linear-gradient(160deg,rgba(255,184,84,.4),rgba(255,184,84,.1)) border-box;
  border:1px solid transparent;border-radius:999px;
  padding:8px 20px;display:inline-flex;align-items:center;gap:8px;}
#menuWallet2{font-size:14px;color:#ffd28a;font-weight:700;}

.shopTabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%;}
.stab{padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.05);cursor:pointer;
  font-family:var(--font-ui);font-size:13px;font-weight:700;border:2px solid transparent;color:var(--ink,#eaf2ff);opacity:.65;
  letter-spacing:.2px;transition:opacity .15s,border-color .15s,background .15s;}
.stab.sel{border-color:var(--accent-2,#a97bff);opacity:1;background:rgba(169,123,255,.14);}
.shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;width:100%;}
.shopCard{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) padding-box,
      linear-gradient(160deg,var(--glass-brd-soft),transparent) border-box;
  border:2px solid transparent;border-radius:16px;
  padding:14px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .12s, box-shadow .15s, border-color .15s;}
.shopCard:active{transform:scale(.95);}
.shopCard.equipped{border-color:#fff;box-shadow:0 0 16px rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.1) inset;}
.shopCard.locked{opacity:.7;}
.shopCard .cn{font-family:var(--font-ui);font-size:13px;font-weight:700;text-align:center;letter-spacing:.2px;}
.shopCard .price{font-size:11.5px;font-weight:800;color:#ffd28a;}
.shopCard .price.ok{color:#6fe28a;}
.shopCard .price.lockreq{color:#8f97b5;font-size:10.5px;}
.shopCard .bdesc{font-size:10.5px;color:#8f97b5;line-height:1.4;min-height:26px;}
.shopCard .ownedTag{font-size:10px;opacity:.6;}
.boostCard .boostIcon{font-size:30px;filter:drop-shadow(0 0 8px rgba(120,180,255,.4));}

.bpGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;}
.bpTile{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) padding-box,
      linear-gradient(160deg,var(--glass-brd-soft),transparent) border-box;
  border:1px solid transparent;border-radius:12px;
  padding:6px 4px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;}
.bpTile .bpTier{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.2px;}
.bpTile .bpXp{font-size:9px;opacity:.6;margin-top:-3px;}
.bpChip{width:100%;border:none;border-radius:8px;padding:4px 2px;font-family:var(--font-ui);font-size:10px;font-weight:700;
  cursor:pointer;color:#05060f;background:rgba(255,255,255,.12);transition:transform .1s;}
.bpChip:active:not(:disabled){transform:scale(.94);}
.bpChip.claimable{background:linear-gradient(90deg,var(--star),#bfefff);box-shadow:0 0 10px rgba(84,224,255,.4);}
.bpChip.premium.claimable{background:linear-gradient(90deg,#ffd24a,#ffb27a);box-shadow:0 0 10px rgba(255,178,122,.4);}
.bpChip.claimed{background:rgba(111,226,138,.18);color:#6fe28a;}
.bpChip.locked{background:rgba(255,255,255,.06);color:#8f97b5;}
.bpChip:disabled{cursor:default;}

.skinPreview{width:44px;height:44px;border-radius:50%;box-shadow:0 0 14px rgba(255,255,255,.15);}
.sunPreview{width:44px;height:44px;border-radius:50%;}
.sunPreview.classic{background:radial-gradient(circle at 40% 35%,#fff,#8ad8ff 60%,transparent 100%);}
.sunPreview.redgiant{background:radial-gradient(circle at 40% 35%,#fff4e0,#ff8a3d 55%,transparent 100%);}
.sunPreview.blackhole{background:radial-gradient(circle,#000 42%,#ffb454 55%,#000 64%,transparent 72%);box-shadow:0 0 12px #ffb454;}
.sunPreview.nebula{background:conic-gradient(from 90deg,#a97bff,#54e0ff,#ff7ae0,#a97bff);}
.sunPreview.crystal{background:linear-gradient(135deg,#fff,#bfe8ff);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);}
.ringPreview{width:44px;height:44px;border-radius:50%;border:3px solid #8ecdfa;}
.ringPreview.dotted{border-style:dotted;border-width:3px;}
.ringPreview.glow{box-shadow:0 0 14px #8ecdfa,0 0 3px #8ecdfa inset;border-color:rgba(142,205,250,.5);}
.ringPreview.double{border-style:double;border-width:7px;}
.ringPreview.season1_ring{border-color:#54e0ff;box-shadow:0 0 14px #54e0ff,0 0 4px #ffd24a inset;}
.ringPreview.season2_ring{border-style:dashed;border-color:#ff8a3d;box-shadow:0 0 12px #ff8a3d;}
.trailPreview{display:flex;align-items:center;gap:3px;height:44px;}

.gicon{width:1em;height:1em;display:inline-flex;flex:none;vertical-align:-0.15em;
  filter:drop-shadow(0 0 4px currentColor);}
.gicon svg{width:100%;height:100%;overflow:visible;}
.btn .gicon,.acctCard .gicon,.stab .gicon{margin-right:5px;}
h1 .gicon,h2 .gicon{color:var(--star);}

@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.06);}
  .theme:hover,.modeCard:hover,.shopCard:hover,.acctCard:hover{border-color:var(--glass-brd);}
  .stab:hover{opacity:.9;}
}