@font-face {
	font-family: 'ALSHauss-Regular';
	src: url('/public/css/fonts/alshauss-regular.eot'); /* IE 9 Compatibility Mode */
	src: url('/public/css/fonts/alshauss-regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('/public/css/fonts/alshauss-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('/public/css/fonts/alshauss-regular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('/public/css/fonts/alshauss-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/public/css/fonts/alshauss-regular.svg#alshauss-regular') format('svg'); /* Chrome < 4, Legacy iOS */
}

:root { --bg:#202734; --panel:#1b2230; --card:#223048; --text:#dfe7ff; --muted:#9fb0d6; --blue:#2b56f5; --cell:#2a3558; --cellHot:#2b3f6d; --red:#8b2b3a; --green:#2ecc71; }
*{box-sizing:border-box}
.page{min-height:100vh;display:flex;flex-direction:column}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn.secondary{background:#485}
.btn.warning{background:#f4c542;color:#221}
.btn.ghost{background:transparent;border:1px solid #ffffff22}
input {
    background: #2c2d30;
    color: #fff;
    border: 1px solid #ffffff22;
    border-radius: 12px;
    padding: 8px 10px;
}
.muted{color:var(--muted)}

.scene{display:flex;gap:12px;margin-top:10px}
.mult{display:flex;flex-direction:column;gap:4px}


.falling{position:absolute;animation:fall .7s cubic-bezier(.16,1,.3,1);opacity:.95}
@keyframes fall{from{transform:translateY(-120px)}to{transform:translateY(0)}}
.bridge{position:absolute;animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.player{
  position: absolute;
  transition: left .45s ease-in-out, top .55s ease;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
  z-index: 1;
}


/* === Buttons micro-anim === */
.btn:active{transform:scale(.98)}
.btn-show{animation:btnIn .18s ease-out}
.btn-hide{animation:btnOut .18s ease-in forwards}
@keyframes btnIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes btnOut{to{opacity:0;transform:scale(.96)}}

/* === Toasts === */
.toasts{
  position:fixed; right:16px; top:16px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast{
  min-width:220px; max-width:320px; padding:10px 12px; border-radius:10px;
  background:#1b2230; color:#dfe7ff; border:1px solid #ffffff15;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:10px; font-weight:600; pointer-events:auto;
  animation:toastIn .22s cubic-bezier(.2,.7,.2,1);
}
.toast.success{ border-color:#2ecc7140; background:#1c2b22; color:#b9ffd2}
.toast.error  { border-color:#ff4d5a40; background:#2a1f22; color:#ffd1d6}
.toast.info   { border-color:#7aa2ff40; background:#1c2437; color:#d5e3ff}
.toast .x{margin-left:auto; cursor:pointer; opacity:.7}
.toast.leave{ animation:toastOut .22s ease forwards }
@keyframes toastIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)}}
@keyframes toastOut{to{opacity:0; transform:translateY(-8px)}}


.sheet{display:flex;flex-direction:column;gap:12px}
.tabs{display:flex;gap:8px;background:#1b2230;border:1px solid #ffffff10;border-radius:10px;padding:8px}
.page-payments .field {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.bet-line{display:flex;gap:8px}
.bet-line input{flex:1;background:#0b1224;border:1px solid #ffffff22;border-radius:10px;padding:10px 12px;color:#fff;font-weight:700}
.mini-btns .mini{background:#0f1a33;border:1px solid #ffffff22;color:#cfe1ff;border-radius:8px;padding:8px 10px;cursor:pointer}

.bombs-row{display:flex;gap:6px;margin-top:8px}
.bombs-row .b{width:36px;height:36px;border-radius:10px;border:1px solid #ffffff22;background:#0f1a33;color:#cfe1ff;cursor:pointer}
.bombs-row .b.sel{background:#2b56f5;color:#fff;border-color:#2b56f5}

.select{width:100%;padding:10px;border-radius:10px;background:#0b1224;color:#fff;border:1px solid #ffffff22}

.btn-wide{width:100%}
.mt{margin-top:10px}

/* multipliers */
.mult{display:flex;flex-direction:column;gap:4px}
.mult--horiz{flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:6px}
.mult-h-bar{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.mult-h-bar .arrow{width:34px;height:34px;border-radius:8px;background:#1b2230;border:1px solid #ffffff12;color:#cfe1ff}


/* responsive */
.desktop-only{display:block}




/* қабати эффектҳо дар болои доска */
.fx-layer{position:absolute; inset:0; pointer-events:none}

/* аниматсияи афтиши бомба */
@keyframes bombFall {
  0%   { transform: translateY(-140px) scale(.8); opacity:0 }
  70%  { transform: translateY(10px)   scale(1.02); opacity:1 }
  85%  { transform: translateY(-6px)   scale(.98) }
  100% { transform: translateY(0)      scale(1) }
}
.fall-bomb{
  width:24px; 
  height:24px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  animation: bombFall .55s cubic-bezier(.2,.8,.2,1) forwards;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  z-index: 1;
}

.card {
  background: #1a1b1e;
  border-radius: 12px;
  padding: 12px;
}
    .btn.warning{background:#2b56f5;border-color:#2b56f5;color:#fff}

    /* from previous messages (multipliers, board, responsive, toasts, button anim) */
    .stage-inner {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
    }
.board-wrap {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
}
    .bet-line{display:flex;gap:8px}
    .bet-line input{flex:1;background:#0b1224;border:1px solid #ffffff22;border-radius:10px;padding:10px 12px;color:#fff;font-weight:700}
    .mini-btns .mini{background:#0f1a33;border:1px solid #ffffff22;color:#cfe1ff;border-radius:8px;padding:8px 10px;cursor:pointer}
    .quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
    .quick .q{background:#0f1a33;border:1px solid #ffffff22;color:#99b1e7;border-radius:8px;padding:6px 8px;cursor:pointer}
    .bombs-row {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      z-index: 10; /* Ensure it appears above other elements */
    }





    /* --- Sizes (PC vs Mobile) --- */
:root { --cw:22px; --ch:15px; --gap:2px; }
@media (max-width:640px){ :root { --cw:15px; --ch:15px; --gap:1px; } }

/* --- Stage --- */
#board{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  /* андозаҳо аз JS гузошта мешаванд (width/height) */
  overflow:visible;
}



/* --- FX layer (bomb rain) --- */
#board .fx{ position:absolute; inset:0; pointer-events:none; }
@keyframes bombFall{
  0%{ transform:translateY(-120px) scale(.92); opacity:0 }
  70%{ transform:translateY(10px)  scale(1.05); opacity:1 }
  85%{ transform:translateY(-6px)  scale(.98) }
  100%{ transform:translateY(0)    scale(1) }
}
.fall-bomb{
  position:absolute;
  width:var(--cw);
  height:var(--ch);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:bombFall .95s cubic-bezier(.2,.8,.2,1) forwards;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

/* --- Small button transitions (optional) --- */
.btn-show{ animation:btnIn .18s ease-out }
.btn-hide{ animation:btnOut .18s ease-in forwards }
@keyframes btnIn{ from{ transform:scale(.98); opacity:.5 } to{ transform:none; opacity:1 } }
@keyframes btnOut{ to{ transform:scale(.98); opacity:0; visibility:hidden } }

/* Multipliers (баландӣ мутобиқ ба ячейка) */
.mult-col .m{ height:calc(var(--ch) + var(--gap)); display:flex; align-items:center; justify-content:center; }
.mult-col .m.active{ background:#1da246; color:#fff; border-radius:6px; }



/* ---- Stage ---- */
#board{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible; /* барои афтидани бомбаҳои берун */
}
#board .rows{
  display:flex;
  flex-direction:column-reverse; /* поён -> боло */
  gap: 14px;
}
#board .row{
  display:flex;
  gap:var(--gap);
  /* padding-left аз JS навишта мешавад (offset) */
}

/* ---- Cells ---- */
#board .cell{
  width:var(--cw); height:var(--ch);
  border-radius:4px; box-sizing:border-box;
  background:#223559; border:1px solid #314664;
  transition:background .15s;
}
#board .cell.me{ background:#223559; }
#board .cell.hot{ cursor:pointer; background:#1f62d3; }
#board .cell.hot:hover{ background:#1f62d3; }
#board .cell.bomb{ background:#7a1f27; }
#board .cell > .bomb-icon{
  width:calc(var(--cw) - 8px);
  height:calc(var(--ch) - 4px);
  border-radius:50%; margin:auto;
  background:#ff6b35; border:2px solid #cc4125;
}

/* ---- Ladders & Player ---- */
#board .ladder{
  animation:ladderIn .22s ease-out;
}
#board .ladder .r{ position:absolute; left:0; right:0; height:2px; background:#9aa5c5; }
@keyframes ladderIn{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }



/* ---- FX (bomb rain) ---- */
#board .fx{ position:absolute; inset:0; pointer-events:none; }
@keyframes bombFall{
  0%{ transform:translateY(-120px) scale(.92); opacity:0 }
  70%{ transform:translateY(10px)  scale(1.05); opacity:1 }
  85%{ transform:translateY(-6px)  scale(.98) }
  100%{ transform:translateY(0)    scale(1) }
}
.fall-bomb{
  position:absolute; width:var(--cw); height:var(--ch);
  display:flex; align-items:center; justify-content:center;
  animation:bombFall .95s cubic-bezier(.2,.8,.2,1) forwards;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

/* ---- Multipliers ---- */
.mult-col .m{
  height:calc(var(--ch) + var(--gap));
  display:flex; align-items:center; justify-content:center;
}
.mult-col .m.active{ background:#1da246; color:#fff; border-radius:6px; }

/* ---- Small button transitions (optional) ---- */
.btn-show{ animation:btnIn .18s ease-out }
.btn-hide{ animation:btnOut .18s ease-in forwards }
@keyframes btnIn{ from{ transform:scale(.98); opacity:.5 } to{ transform:none; opacity:1 } }
@keyframes btnOut{ to{ transform:scale(.98); opacity:0; visibility:hidden } }



/* --- DepSpeec --- */




.layout {
  display: grid;
  width: 100%;
}
#ctrlPanel {
  grid-area: panel;
}

.stage {
  grid-area: stage;
}

@media (max-width: 767px) {
  .layout {
    grid-template-columns: 1fr; /* Як сутун танҳо */
    grid-template-rows: 1fr auto; /* Stage боло, panel поён */
    grid-template-areas:
      "stage"
      "panel";
    gap: 16px;
  }
  
  /* Илова кардани фосилаи байни элементҳо дар мобил */
  .layout > * {
    min-width: 0; /* Пешгирӣ аз overflow */
  }
  .desktop-only {
    display: none !important;
  }
  .board-wrap {
    justify-content: center;
  }
  .auth {
    width: 100%;
  }
}
a {
  color: #a3cfff;
  text-decoration: none;
}






/* ==== Mobile multipliers panel ==== */
.mult-wrap{
display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  background: #121a26;
  border-top: 1px solid #1e2a3b;
  width: 100%;
  margin-top: 13px;
  margin-bottom: -14px;
  font-size: 12px;
}
.mult {
  display:flex; 
  gap:8px; flex:1 1 auto; 
  padding:4px 2px;
  border-right: 1px solid #ffffff12;
  padding-right: 14px;
}
.mult--horiz{ flex-direction:row; flex-wrap:nowrap; }
.mult--scrollable{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
/* пинҳон кардани скролбар */
.mult--scrollable::-webkit-scrollbar{ display:none; }
.mult--scrollable{ scrollbar-width:none; }

/* ададҳои x */
.mult .m{
    border: 1px solid #2b3b51;
    border-radius: 4px;
    background: #162235;
    color: #9fb0c9;
    text-align: center;
    scroll-snap-align: center;
    user-select: none;
    white-space: nowrap;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
}
.mult .m.active{ background:#1da246; color:#fff; border-color:#1da246; }

/* тирчаҳои навигатсия (мобил диданӣ, дар десктоп — ноаён) */
.mult-nav{
  width:28px; height:28px; border-radius:6px;
  background:#0f1622; border:1px solid #22324a;
  color:#a9b7ce; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.mult-nav:hover{ background:#142031; transform:scale(1.03); }
.mult-nav:active{ transform:scale(.98); }

@media (min-width: 992px){
  /* Дар ПК мо сутуни амудӣ дорем — тирчаҳоро пинҳон мекунем */
  .mult-wrap{ background:transparent; border:none; padding:0; }
  .mult-nav{ display:none; }
  .mobile-only { display:none; }
  #board .rows {
    gap: 23px;
  }
  #board {
    margin-top: 11px;
    width: 100% !important;
  }
}

.ladder {
  width: 17px;
  height: 30px;
  background: transparent;
  position: absolute;
}
.ladder::before,
.ladder::after {
  content: "";
  position: absolute;
  width: 3px;           /* ғафсии пояи амудӣ */
  height: 100%;
  background: #ccc;
}
.ladder::after { right: 0; }
.ladder::before { left: 0; }

/* пояҳо */
.ladder .rung {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ccc;
}


/* --- Mines --- */
/* контейнерҳои кэфҳо (монанди Stairs) */
.mult-col { display:flex; flex-direction:column; gap:6px; }
.mult-h { display:flex; gap:8px; overflow:auto; scrollbar-width:none; }
.mult-h::-webkit-scrollbar{ display:none; }
.m { padding:6px 10px; border-radius:8px; background:#263041; color:#9fb1d1; font:500 12px/1.2 Inter,sans-serif; border:1px solid #2f3b4f; white-space:nowrap; }
.m.active { background:#17a34a; color:#fff; border-color:#148f40; }

/* grid */
.grid { width: 100%; max-width: 320px; margin: 0 auto; display:grid; grid-template-columns: repeat(5,1fr); gap:8px; }
.tile { aspect-ratio:1; min-width:44px; min-height:44px; border-radius:8px; border:2px solid #3a475c; background:#2f3b4f; transition:transform .12s, background .2s, border-color .2s; }
.tile:not(.safe):not(.mine):hover { background:#3a4a62; border-color:#50607b; transform:translateY(-1px); cursor:pointer; }
.tile.safe { background:#1d7a43; border-color:#21a159; }
.tile.mine { background:#a33333; border-color:#c34545; }

/* ҳуҷайраҳои бозӣ */
.cell { position: relative; }
.cell.safe  { background:#2e7d32 !important; border-color:#2e7d32 !important; }
.cell.mine  { background:#c62828 !important; border-color:#c62828 !important; }

/* кристал дар марказ */
.cell .gem, .cell .boom{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; opacity:0; transform:scale(.7);
  transition:opacity .25s ease, transform .25s ease;
}
.cell.safe  .gem  { opacity:1; transform:scale(1); }
.cell.mine  .boom { opacity:1; transform:scale(1); }



/* --- паследни новый --- */

:root{ --bg:#0f1621; --panel:#1b2432; --mut:#2a3547; --line:#283246; --txt:#cfe0ff; --green:#16a34a; --red:#d14444; }
*{box-sizing:border-box} 
body.bg {
  margin:0; 
  font-family: ALSHauss-Regular, sans-serif; 
  font-size: 14px;
  color:#9fa5ac; background:#0b0c0d;
}
.wrap{max-width:1200px; margin:0 auto; padding:16px;}
.topbar{display:flex; align-items:center; gap:10px; background:#0b0c0d; padding:20px 16px; position:sticky; top:0; z-index:10;}
.brand{color:#fff; text-decoration:none; font-weight:700}
.grow{flex:1}
.btn {
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #32425a00;
  cursor: pointer;
  height: 42px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn:hover{background:#32425a}
.btn.primary{background:#2563eb; border-color:#2856c7}
.btn.success {
    background: #2c2d30;
    border: none;
    color: #fff;
}
.btn.danger{background:#b33939; border-color:#992f2f}
.btn.outline {
background: #2c2d30;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn.full{width:100%}
.balance{background:#243149; padding:6px 10px; border-radius:8px; margin-right:8px; display:inline-block}
.wallet {
    display: flex
;
    align-items: center;
    gap: 5px;
}

.home h1{margin:16px 0 12px}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}
.gamecard {
    display: flex;
    padding: 16px;
    background: #1a1b1e;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    height: 190px;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #a9afb51f;
}
.gamecard .title{font-size:16px; }
.gamecard .desc{color:#bbb; margin-top:4px}

.auth {     
    margin: 10px auto;
    background: #1a1b1e;
    padding: 20px;
    border: 1px solid #24314900;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 13px;
  }
.field input, .field select {
    width: 100%;
    background: #2c2d30;
    color: #fff;
    border: 1px solid #24314900;
    border-radius: 12px;
    height: 42px;
}
.muted {
  color: #fff;
}
.muted-auth {
  text-align: center;
  color: #bbb;
}
.msg{margin-top:8px; color:#ffb4b4}

/* шаблонҳои layout барои бозиҳо */
@media (max-width: 900px){ .layout{grid-template-columns: 1fr; } }
.mult{display:flex; flex-direction:column; gap:6px}
.mult .m{background:#182337; border:1px solid #243149; color:#9fb1d1; padding:6px 10px; border-radius:8px}
.mult .m.active{background:#16a34a; border-color:#12843e; color:#fff}
.mult--horiz{flex-direction:row; overflow:auto; scrollbar-width:none; }
.mult--horiz::-webkit-scrollbar{display:none}
.mult-row{display:flex; align-items:center; gap:8px; margin-top:10px}
.mult-row .nav{background:#182337; border:1px solid #243149; border-radius:8px; color:#9fb1d1; padding:6px 10px}

.panel{background:#172133; border:1px solid #243149; border-radius:12px; padding:14px}

.stats{margin-top:10px; color:#9fb1d1}

/* Mines grid (5x5) */
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:340px; margin:0 auto}
.grid5 .tile{aspect-ratio:1; min-width:66px; min-height:66px; border-radius:10px; border:2px solid #2f3b4f; background:#2b3a51; transition:all .12s}
.grid5 .tile:hover{background:#33445f; transform:translateY(-1px)}
.grid5 .tile.safe{background:#1d7a43; border-color:#21a159}
.grid5 .tile.mine{background:#a33333; border-color:#c34545}

/* Toasts */
.toasts{position:fixed; right:16px; top:16px; display:flex; flex-direction:column; gap:8px; z-index:999}
.toast{
  background: #1a1b1e; 
  border: 1px solid #a9afb51f; 
  color:#fff !important; 
  padding:10px 12px; 
  border-radius:10px; display:flex; gap:10px; 
  align-items:center; 
  box-shadow:0 10px 24px rgba(0,0,0,.25); 
  animation:in .2s ease;
  font-weight: 100;
}
.guest {
    display: flex;
    gap: 8px;
    align-items: center;
}
.toast.success {border-color:#149b46}
.toast.error{border-color:#c23a3a}
.toast .x{cursor:pointer; opacity:.7}
.toast.leave{animation:out .2s ease forwards}
@keyframes in{from{transform:translateY(-6px); opacity:0} to{transform:none; opacity:1}}
@keyframes out{to{transform:translateY(-6px); opacity:0}}

.cell.revealed { pointer-events:none; opacity:0.9; }
.cell.is-bomb { background:#b91c1c; border-color:#7f1d1d; color:#fff; }
.cell .bomb-icn { font-size:14px; line-height:1; }


/* Loader overlay */
.loader {
  position: fixed;
  inset: 0;
  background: #0b1420;
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 9999;
  transition: opacity .18s ease, visibility .18s ease;
  opacity: 1;
  visibility: visible;
}
.loader.hidden { opacity: 0; visibility: hidden; }

/* Spinner */
.loader .spinner {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid #243149;     /* track */
  border-top-color: #172133;      /* accent (gold) */
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


.footer a {
  color: #bbb;
  text-decoration:none;
  margin:0 6px;
}
.footer a:hover { text-decoration:underline; }



#view.wrap {
  flex: 1 0 auto;
  min-height: calc(100vh - (80px + 60px)); /* Пример: header=80px, footer=60px */
}

.ghfhgjfghf {
  display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Мобильная версия */
@media (max-width: 768px) {
  .ghfhgjfghf {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-partner  input {
    width: 100%;
  }
  .page-partner .text-card {
    padding-bottom: 16px;
    color: #969da4;
  }
  .logo-bg {
  display: none;
  }
}
 .page-partner .with-copy {
  background: #2c2d30;
  color: #fff;
  border: none;
    border-radius: 12px;
    padding: 0px 12px;
    display: flex;
    align-items: center;
  }
.page-partner .card {
  margin-bottom: 14px;
}
.page-partner .muted {
  text-align: left;
  color: #969da4;
}
.page-partner .icon-btn {
    background: none;
    border: none;
}
.page-partner  input {
    background: transparent;
    border: none;
    color: #969da4;
    padding: 10px 0;
    height: 42px;
}
.page-profile .input {
  display: flex;
  background: #2c2d30;
  border-radius: 12px;
  padding: 0px 12px;

}
.page-profile .jkdfdf {
  padding: 0px 12px;
}


.footer {
  flex-shrink: 0;
  background: #0b0c0d;
  color: white;
  padding: 20px 16px;
  text-align: center;
  border-top: 1px solid #a9afb51f;
}


/* --- Profile --- */
/* карточка профиля */
.page-profile .card { 
  max-width: 460px;
  margin: 24px auto;
  padding: 16px 18px;
  background: #1a1b1e;
  border: 1px solid #232b3600;
  border-radius: 12px;
}
.page-profile h2{ margin:0 0 12px; color:#fff; font-size:22px; }
.page-profile .field{ margin:12px 0; }
.page-profile label{ display:block; margin-bottom:6px; color:#aab6c3; font-size:14px; }

.page-profile .icon-btn {
    border-radius: 8px;
    border: none;
    background: #2c2d30;
    color: #dbe7ff;
    cursor: pointer;
    display: flex;
    align-items: center;
}





.topbar .auth { display:flex; gap:12px; align-items:center; }
.badge {
  display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1b1e;
    border-radius: 10px;
    padding: 6px 10px;
    color: #fff;
    height: 38px;
    border: 1px solid #a9afb51f;
    width: 100%;
}
.badge .icon{opacity:.8}
.hidden{display:none !important;}

.avatar{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1a1b1e;
    color: #fff;
    border: 1px solid #a9afb51f;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu{
  position: absolute;
  right: 0;
  top: 44px;
  background: #1a1b1e;
  border-radius: 10px;
  min-width: 180px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  padding: 6px;
  z-index: 50;
}
.menu .mi {
    display: flex;
    padding: 8px 6px;
    color: #9fa5ac;
    text-decoration: none;
    border-radius: 8px;
    background: none;
    border: none;
    align-items: center;
    gap: 12px;
}
.menu .mi:hover{background:#25272a}
.menu .mi.danger{color:#ffb3b3}
.kbghkasc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.fgnfgneddf {
  display: flex;
    gap: 10px;
}

        .partner-container {
            width: 100%;
            max-width: 900px;
        }
        
        .partner-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .partner-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
            color: white;
        }
        
        .partner-subtitle {
            font-size: 16px;
            color: var(--muted-text);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .promo-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .promo-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            color: white;
        }
        
        .promo-text {
            color: var(--muted-text);
            margin-bottom: 15px;
        }
        
        .promo-amount {
            color: var(--success-color);
            font-weight: bold;
            font-size: 18px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
        }
        
        .stat-card {
            border: 1px solid rgba(139, 139, 139, .15);
            border-radius: 10px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .stat-info {
            flex-grow: 1;
        }
        
        .stat-title {
font-size: 14px;
    color: #9fa5ac;
    margin-bottom: 2px;
        }
        
      
        
        .referral-link {
            display: block;
            background-color: #3a4559;
            color: var(--accent-color);
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-size: 16px;
            word-break: break-all;
            text-decoration: none;
            border: 1px solid var(--border-color);
            transition: background-color 0.3s;
        }
        
        .referral-link:hover {
            background-color: #45526e;
        }
        
        @media (max-width: 900px) {
            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 600px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .partner-title {
                font-size: 24px;
            }
            .dfdffbwewe {
              display: none;
            }
        }
        
        @media (max-width: 400px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
  .iuhsdfiuhv {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }



/* ===== Partner: Levels ===== */
.levels {
  display: grid;
  gap: 10px;
}
.levels .lvl {
  position: relative;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
.levels .lvl b { display:block; margin-bottom:4px; }
.levels .lvl.current {
border: 1px solid #1975ef;
}
.levels .lvl .lvl-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  background: #1975ef;
  color: #fff;
  padding: 2px 8px;
  border-radius: 9px;
  font-size: 12px;
}

/* ===== Partner: Rewards ===== */
.rewards {
  display: grid;
  gap: 10px;
}
.reward-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
}
.reward-card.done {
border-color: #1975ef;
}
.reward-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 6px;
}
.reward-bonus {  font-size: 16px; }
.page-bonus .ddddddddaasas {
  display: flex;
  gap: 6px;
}

.reward-state.muted { opacity: .6; }
.reward-text { 
  font-size: 14px; 
  color: #9fa5ac;
}

/* ===== Partner: Stats grid (аз макети шумо) ===== */
.stats-grid {
  display: grid;
  gap: 10px;
}
.stat-value { font-size: 16px; color: #fff;}

/* ===== Partner: Table ===== */
.table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: hidden;
    font-size: 13px !important;
}
.table th, .table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}
.table tr:last-child td { border-bottom: none; }
.hidden { display:none !important; }

/* ===== Buttons loading state ===== */
.btn.loading {
  position: relative;
  pointer-events: none;
  opacity: .75;
}
.btn.loading .btn-txt { visibility: hidden; }
.btn.loading .btn-spin::after {
  content: "";
  width: 16px; height: 16px;
  border: 1px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: rot .8s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg);} }

.uihsdiuhcsdcdcsd {

  padding-bottom: 10px;
}

.iojio0csas {

}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
  .layout {
    grid-template-columns: 310px 1fr;
    grid-template-areas: "panel stage";
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .stage {
    display: flex;
  }
  .mult-row {
    width: 338px;
  }
  .auth {
    width: 380px;
  }
  .levels {
    display: flex;
  }
  .rewards {
    display: flex;
  }
  .oijsdvsvd {
       display: flex;
        align-items: center;
        justify-content: space-between;
  }
  .logo-mb {
    display: none;
  }
  
}
.logo-bg {
  width: 120px;
}

.logo-mb {
  width: 60px;
}

.title-h3 {
font-size: 15px;
    color: #fff;
    font-weight: 500;
}

@supports (-webkit-touch-callout: none) {
    body {
        -webkit-touch-callout: none;
    }
}

.page-bonus .bonus-card { max-width: 520px; margin: 0 auto; }
.page-bonus .bonus-title { font-weight: 700; margin-bottom: 10px; display:flex; gap:8px; align-items:center; }
.page-bonus .ico { font-size: 18px; }
.page-bonus .card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-bonus {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-ranks .rk-progress { margin-top:10px }
.page-ranks .rk-bar { background:#222; height:8px; border-radius:6px; overflow:hidden }
.page-ranks .rk-bar__fill { height:100%; background:#4da3ff; transition:width .35s ease }
.page-ranks .rk-legend { display:flex; justify-content:space-between; margin-top:6px; font-size:12px }
.page-ranks .rk-tabs { display:flex; gap:8px; margin-bottom: 10px;}
.page-ranks .rk-tab {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #a9afb51f;
    cursor: pointer;
    user-select: none;
    background: #1f2021;
    color: #fff;
}
.page-ranks .rk-tab.active { border-color:#2563eb; }
.page-ranks .rk-details .perk { display:flex; align-items:center; gap:8px; margin:8px 0 }
.page-ranks .rk-details .dot { width:8px; height:8px; border-radius:50%; background:#39d98a }
.page-ranks .rk-left { margin-top:6px }
.page-ranks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


        .tabbar {
display: flex;
    background: #27272a;
    border-radius: 12px;
        }
        
        .tabbar button {
    flex: 1;
    padding: 15px;
    background: #27272a;
    border: none;
    color: #9fa5ac;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    font-weight: 600;
        }
        
        .tabbar button:hover {
    background: #3c3d40;
    color: #fff;
        }
        
        .tabbar button.active {
    background: #3c3d40;
    color: #fff;
        }
        
        .tab {
            display: none;
        }
        
        .tab.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
  .tabs {
    display: flex;
    flex-direction: column;
  }

  #header {
    position: sticky;
    top: 0;
  }

  h2 {
    font-size: large;
    text-align: center;
  }
  #walletBtn {
    height: 38px;
  }

  .icon-header {
    width: 18px;
    height: 18px;
  }
  .profile-inpute {
    width: 100%;
    padding: 10px 0px;
    border-radius: 8px;
    border: 1px solid #2b364400;
    background: #2c2d30;
    color: #fff;
    outline: none;
  }
  .home .bg-game {
    width: 180px;

  }
  .home .stairs {
    background-image: url(/public/img/stairs-bg001.png);
    background-position: center center;
    background-size: cover;
  }
  .home .mines {
    background-image: url(/public/img/newmines.png);
    background-position: center center;
    background-size: cover;  
  }
  .home .slots {
    background-image: url(/public/img/newslots-bg.png);
    background-position: center center;
    background-size: cover;  
  }
  .home .trade {
    background-image: url(/public/img/newtrade-bg.png);
    background-position: center center;
    background-size: cover;  
  }
  .gamecard:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  }
  .ihduihsdsdv {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .logo-new {
    width: 74px;
  }
  body .header {
    max-width: 1200px;
    margin: 0px auto;
  }
  body .footer {
    max-width: 1200px;
    margin: 0px auto;
  }
  .title-home {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    padding-bottom: 12px;
  }
  .dfdffbwewe {
    background: #2c2d30;
    height: 34px;
    padding: 0px 12px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    gap: 6px;
  }
  .dfdffbwewe:hover {
    border: 1px solid #a9afb51f;
  }
  .jisdsdddd {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .topbar .icon-header {
    width: 18px;
  }
  @media (max-width: 600px) {
    .dfdffbwewe {
        display: none;
    }
}

.page-trading .grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:960px){ .page-trading .grid2 { grid-template-columns: 1fr; } }
.page-trading .row { display:grid; grid-template-columns: 140px 1fr; gap:8px; margin:6px 0; }
.page-trading .ticker { display:flex; align-items:baseline; gap:16px; margin:10px 0 14px; }
.page-trading .ticker .t-val { font-size:20px; font-weight:700; }
.page-trading .seg { display:flex; gap:6px; }
.page-trading .seg .seg-btn { padding:6px 10px; border-radius:8px; border:1px solid var(--border,#333); background:#111; cursor:pointer; }
.page-trading .seg .seg-btn.active { background:#1f2937; border-color:#4b5563; }
.page-trading .actions { display:flex; gap:10px; margin-top:10px; }
.page-trading .current .row div:first-child{ color:#9aa; }