/* filepath: public/style.css */
/* ---------- Theme ---------- */
:root{
  --bg:#0e1116; --bg-elev:#151a22; --bg-elev-2:#1c2330;
  --panel:#202938; --panel-2:#262f40;
  --text:#e7ebf0; --text-dim:#aab2bf;
  --accent:#3390ec; --accent-press:#2b7bdc;
  --border:#2d3445; --marker:#3390ec; --radius:16px;
  --footer-h:96px;
  --tabbar-offset:64px; /* фактическая высота таббара (меряем в JS) */
  /* runtime-adjusted by JS */
  --safe-top: 0px;
  --chips-top: 0px; /* default: very top */
  --profile-pad-top: 0px; /* default top padding for profile container */
  --header-offset: 56px; /* approximate Telegram header pill height */
  --slider-top: 0px; /* top offset for roulette overlay in fullsize */
  --header-row-mt: 8px; /* adaptive top margin for slider header row */
  --slider-pad-top: 0px; /* adaptive top padding for slider content */
  --wheel-size: clamp(200px, 34vw, 340px); /* default wheel size */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh; display:block; -webkit-tap-highlight-color:transparent;
}
.no-scroll{overflow:hidden}

/* ---------- Tabs containers ---------- */
.container{
  min-height:100svh; display:grid; place-items:center;
  padding:0 16px;
  padding-bottom:calc(16px + var(--tabbar-offset)); /* отступ под реальный таббар */
  text-align:center;
}
.container.tab{ display:none; }
.container.tab.is-active{ display:grid; }

/* placeholders */
.placeholder{ display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.9 }
.ph-emoji{ font-size:42px }
.ph-title{ font-size:22px; font-weight:700 }
.ph-sub{ font-size:14px; color:var(--text-dim) }

/* ---------- Case ---------- */
.case{
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.25)
}
.case p{ color:var(--text-dim); margin:0 }

/* ---------- Slider/Overlay ---------- */
.slider{ display:none; position:fixed; inset:0; z-index:1000; }
.slider.is-open{ display:block }
.slider-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px) }
.slider-content{
  position:absolute; left:0; right:0; bottom:0; top: var(--slider-top, 0px); background:var(--bg-elev);
  border-top:1px solid var(--border);
  border-top-left-radius:24px; border-top-right-radius:24px;
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding: var(--slider-pad-top, 0px) 16px calc(var(--footer-h) + 16px);
}

/* --- Ряд над рулеткой --- */
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:var(--header-row-mt, 8px) 2px 20px;
}
/* Force no top gap in fullsize mode */
html.tg-fullsize .slider-content .header-row{ margin-top: 0 !important; }
html.tg-fullsize .slider-content{ padding-top: 0 !important; }
.title{ margin:0 }
.close{
  position:static; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; cursor:pointer; line-height:1;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
}
.close:active{ transform: translateY(1px) }

/* ---------- деактивация кнопок ---------- */
.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---------- Roulette ---------- */
.roulette-container{
  position:relative; overflow:hidden; width:100%; height:160px; margin:0 0 12px;
  border:1px solid var(--border); border-radius:18px; background:var(--bg-elev-2);
  contain:content; display:flex; align-items:center;
}
.roulette{
  display:flex; padding:0 8px; align-items:center;
  transition:transform 4s cubic-bezier(.25,1,.5,1); will-change:transform;
}
.roulette-item{
  min-width:132px; height:128px; margin:0 8px; border-radius:16px;
  background:var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center
}
.roulette-item img{ width:100px; height:100px; object-fit:contain }
.roulette-marker{ position:absolute; top:10px; bottom:10px; left:50%; width:2px; background:var(--marker); transform:translateX(-50%) }

/* ---------- Gallery ---------- */
.section-title{ margin:12px 6px 10px; color:var(--text-dim) }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.gallery div{
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; height:120px; display:flex; align-items:center; justify-content:center
}
.gallery img{ width:88px; height:88px }

/* ---------- Upgrade section ---------- */


/* ---------- Fixed Footer (roulette action) ---------- */
#footer-bar{
  position:fixed; left:0; right:0; bottom:0; background:var(--bg-elev);
  border-top:1px solid var(--border);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  z-index:1100; display:flex; justify-content:center;
  box-shadow:0 -8px 24px rgba(0,0,0,.45);
}
.open-btn{
  min-width:260px; border-radius:999px; padding:14px 20px; font-size:18px; font-weight:600;
  color:#fff; background:var(--accent); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(51,144,236,.35);
  cursor:pointer; transition:transform .06s, background .12s
}
.open-btn:active{ transform:translateY(1px); background:var(--accent-press) }

/* ---------- Result ---------- */
.result-overlay{ display:none; position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.75); backdrop-filter:blur(2px); align-items:center; justify-content:center }
.result-overlay.is-open{ display:flex }
.result-sheet{ text-align:center; padding:16px; --card-size: min(60vw, 420px, 60vh); }
.result-title{ margin:0 0 10px; font-size: 30px }
.result-card{
  width: var(--card-size); height: var(--card-size);
  background:var(--panel); border:1px solid var(--border); border-radius:24px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.result-card img{ width:82%; height:82%; object-fit:contain }
.result-amount{ font-size:28px; margin:6px 0 }
.result-name{ color:var(--text-dim); margin-bottom:12px }
.result-ok{ width: calc(var(--card-size)*0.82); border-radius:14px; padding:14px 16px; background:var(--accent); color:#fff; border:none; font-weight:600; font-size: 18px; /* Increased font size */ }

/* ---------- Bottom Tabbar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  /* height НЕ задаём — рост по контенту и safe-area */
  background:var(--bg-elev); border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  z-index:900;
}
.tabbtn{
  appearance:none; border:0; background:transparent; color:var(--text-dim);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 10px; border-radius:12px; font:inherit; cursor:pointer;
}
.tabbtn .ico svg{ width:26px; height:26px; display:block; }
.tabbtn .lbl{ font-size:12px }
.tabbtn.is-active{ color:var(--accent); background:rgba(51,144,236,.1) }

/* ---------- Upgrade ---------- */
/* ====================== UPGRADE (вертикальная раскладка) ====================== */

/* Вкладка апгрейда ведёт себя как обычная страница (а не grid-центр из .container) */
#tab-upgrade.container {
  padding: var(--profile-pad-top, 0px) 16px calc(16px + var(--tabbar-offset));
  text-align: initial;
  overflow: hidden; /* avoid page scroll on upgrade tab */
}
/* Делать видимой вкладку апгрейда только когда она активна, и использовать блочную раскладку */
#tab-upgrade.container.is-active {
  display: block;
}

/* Корневой блок апгрейда — всегда одна колонка по центру */
.upgrade-root{
  display:grid;
  grid-template-rows: auto 1fr; /* hero + cards area fills rest */
  gap:12px;
  width:100%;
  max-width: 760px;      /* комфортная ширина в мини-апп */
  margin: 0 auto;
  min-height: calc(100svh - var(--tabbar-offset));
}

/* ---------------------- Центр: колесо + управление ---------------------- */
.up-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;               /* расстояние между колесом/мультипликаторами/кнопкой */
  margin-top: var(--chips-top, 3px);
}

/* Колесо: адаптивный размер, без растягивания */
.up-wheel{
  /* Width/height use runtime variable with a safe fallback */
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin-top: clamp(6px, 6vh, 40px);
  margin-bottom: 8px;
}


.up-wheel svg{ width:100%; height:100%; display:block }

/* Мультипликаторы (пилюли) */
.up-mults{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin: 0 0 2px;        /* убираем прежний margin-top с var(--wheel-size) */
}

.up-mult-btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition: background .12s, transform .06s, border-color .12s, color .12s;
}
.up-mult-btn:active{ transform: translateY(1px); }
.up-mult-btn.is-selected{
  background: rgba(51,144,236,.18);
  border-color: rgba(51,144,236,.55);
  color: var(--accent);
}

/* Шанс + кнопка действия */
.up-chance-row{
  margin:4px 0 6px;
  color:var(--text-dim);
  font-weight:600;
  text-align:center;
}

.up-action{
  min-width:220px;
  border-radius:999px;
  padding:14px 22px;
  font-size:18px; font-weight:700;
  color:#fff;
  background:var(--accent);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(51,144,236,.35);
  cursor:pointer;
  transition:transform .06s, background .12s, opacity .12s;
}
.up-action:active{ transform:translateY(1px); background:var(--accent-press) }
.up-action:disabled{ opacity:.6; cursor:not-allowed }
.up-status{ min-height:0px; margin-top:0px; color:var(--text-dim); text-align:center }

/* Грид с карточками слева/справа (в одну линию на всех ширинах) */
.up-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  height: 30%;
  align-items: stretch;
}

/* ---------------------- Левая/правая карточки ---------------------- */
.up-left,.up-right{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  width:100%;
  display:flex; flex-direction:column;
  max-height:150px;
}
.up-col-title{
  display:flex; align-items:center; gap:8px;
  text-align:left; font-weight:700;
  margin: 6px 0 10px 2px;
  color: var(--text-dim);
}
.up-col-title .ico{ display:inline-flex; align-items:center; }
.up-col-title .ico svg{ width:18px; height:18px; color: var(--text-dim); }
.up-col-title .lbl{ font-weight:700; }

/* Ensure right preview fills available card height without overflow */
.up-right{ overflow:visible; }
.up-right .up-preview{ flex:1; display:grid; place-items:center; min-height:0; }
.up-target-card{ max-width: 220px; max-height: 100%; }
/* Override sizes inside right card so content scales to fit its max-height */
.up-right .up-target-card{ max-height: clamp(80px, 18svh, 90px); max-width:100%; margin:0; padding:8px; display:grid; grid-template-rows: minmax(0,1fr) auto auto; overflow:visible; }
.up-right .up-target-img-wrap{ min-height:0; height:100%; display:grid; place-items:center; aspect-ratio:auto; overflow:visible; }
.up-right .up-target-img-wrap img{ max-width:100%; max-height:100%; width:50%; height:auto; object-fit:contain; }

/* Плюс-добаление в левой карточке */
.up-add-wrap{
  display:grid; place-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  max-height: clamp(80px, 18svh, 90px);
}
.up-add-btn{
  appearance:none; border:1px solid rgba(51,144,236,.5);
  background: rgba(51,144,236,.12);
  color: var(--accent);
  width:64px; height:64px; border-radius:14px;
  font-size:36px; font-weight:900; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .06s, background .12s, border-color .12s;
}
.up-add-btn:active{ transform: translateY(1px); }

/* Image variant for add-wrap (used on right card) */
.up-add-img{
  width:64px; height:64px; border-radius:14px;
  border:1px solid rgba(51,144,236,.5);
  background: rgba(51,144,236,.12);
  padding:8px; object-fit:contain; box-sizing:border-box;
  cursor:pointer; display:block;
}

/* Right card: image inside same wrap as left (dark panel box), but image stays borderless */
.up-right .up-add-wrap{ background: var(--panel); border: 1px solid var(--border);  }
.up-right .up-add-img{ background: transparent; border: 0; padding: 0; }

/* Height-tuned layout for short screens */
@media (max-height: 740px){
  /* On very short screens, scale the wheel down a bit */
  .up-wheel{
    width: var(--wheel-size, clamp(180px, 44svh, 300px));
    height: var(--wheel-size, clamp(180px, 44svh, 300px));
    margin-top: clamp(2px, 2svh, 20px);
  }
  .up-add-wrap{ height: clamp(100px, 18svh, 140px); }
  .up-target-card{ max-width: 200px; height: clamp(100px, 18svh, 140px) }
  .up-mult-btn{ padding:6px 10px; }
  .up-action{ padding:12px 20px; font-size:17px; min-width:200px; }
}

/* ---------- Telegram fullscreen tuning (mobile) ---------- */
html.tg-fullscreen #tab-upgrade.container{ padding-top: var(--profile-pad-top, 0px); }
html.tg-fullscreen .upgrade-root{ min-height: calc(100svh - var(--tabbar-offset) - var(--profile-pad-top, 0px)); }
/* In fullscreen, size is provided by JS via --wheel-size; we only tweak spacing here */
html.tg-fullscreen .up-cards{ height:auto; }
/* default fallback just in case */


/* Fullscreen = big wheel */
html.tg-fullscreen {
  --wheel-size: clamp(220px, 68vw, 420px);
  margin-top: 15px;
}

/* Fullsize on mobile = medium wheel */
html.tg-fullsize {
  --wheel-size: clamp(200px, 34vw, 340px);
}

/* Fullsize on desktop/tablet wide = even smaller wheel */
@media (min-width: 601px) {
  html.tg-fullsize {
    --wheel-size: clamp(200px, 34vw, 340px);
  }
}


/* Ensure equal tile heights in fullscreen (left add-wrap = right target card) */
html.tg-fullscreen #tab-upgrade{ --upgrade-tile-h: clamp(80px, 18svh, 90px); }
html.tg-fullscreen #tab-upgrade .up-left .up-add-wrap,
html.tg-fullscreen #tab-upgrade .up-right .up-target-card{
  height: var(--upgrade-tile-h);
  max-height: var(--upgrade-tile-h);
}

/* Fullsize (non-fullscreen): use base paddings and proportions */
html.tg-fullsize #tab-upgrade.container{ padding-top: 0; }
html.tg-fullsize .upgrade-root{ min-height: calc(100svh - var(--tabbar-offset)); }

/* Список предметов слева */
.up-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  max-height:420px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.up-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  height:110px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .06s, outline-color .12s, box-shadow .12s;
}
.up-item img{ width:86px; height:86px; object-fit:contain }
.up-item:active{ transform: translateY(1px); }
.up-item.is-selected{
  outline:2px solid var(--accent);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(51,144,236,.12);
}

/* Предпросмотр справа */
.up-preview{ display:flex; align-items:stretch; justify-content:center }
.up-target-card{
  width:100%; max-width:240px; margin:0 auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.up-target-img-wrap{ width:100%; aspect-ratio:1; display:grid; place-items:center }
.up-target-img-wrap img{ width:80%; height:80%; object-fit:contain }
.up-target-name{ font-weight:700; text-align:center }
.up-target-mult{ color:var(--text-dim) }


/* ---------- Profile (scoped to #tab-profile) ---------- */
/* Make profile tab a normal page flow similar to upgrade */
#tab-profile.container {
  padding: var(--profile-pad-top, 0px) 16px calc(16px + var(--tabbar-offset));
  text-align: initial;
}
#tab-profile.container.is-active { display:block; }

/* Layout */
#tab-profile .profile-root{
  display:flex; flex-direction:column; gap:16px;
  width:100%; max-width:760px; margin:0 auto;
}


/* Chips row */
#tab-profile .profile-chips{
  display:flex; align-items:center; gap:10px;
  margin-top: var(--chips-top, 3px);
  flex-wrap: nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px;
  scrollbar-width: none; /* Firefox */
}
#tab-profile .profile-chips::-webkit-scrollbar{ display:none; }
#tab-profile .chip{
  background:var(--bg-elev); border:1px solid var(--border);
  color:var(--text); border-radius:999px; padding:8px 12px; display:inline-flex; align-items:center; gap:8px;
}
#tab-profile .chip-compact{ padding:6px 10px; font-size:14px }
#tab-profile .chip-balance{ margin-left:auto; padding:6px 10px; }
#tab-profile .chip-balance .chip-ico{ width:22px; height:22px; border-radius:999px; display:grid; place-items:center; background:rgba(51,144,236,.16); color:var(--accent); font-size:13px }
#tab-profile .chip-balance .val{ font-weight:800 }
#tab-profile .chip-balance .add-btn{
  width:26px; height:26px; border-radius:999px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); cursor:pointer;
}

/* Avatar + name */
#tab-profile .profile-avatar{ display:grid; place-items:center; margin-top: clamp(8px, 8vh, 36px); }
#tab-profile .profile-avatar img, #tab-profile .profile-avatar .avatar-ico{
  width:140px; height:140px; border-radius:999px; object-fit:cover;
  background:var(--panel); border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.03);
}
#tab-profile .profile-name{ text-align:center; font-size:28px; font-weight:800; margin-top:10px }
#tab-profile .profile-name .bio{ color:var(--text-dim); font-weight:700 }

/* Action buttons */
#tab-profile .profile-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 6px }
#tab-profile .btn{
  appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text);
  border-radius:16px; padding:14px 16px; font-weight:700; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .06s, background .12s, border-color .12s
}
#tab-profile .btn:active{ transform:translateY(1px) }
#tab-profile .btn{ border-radius:18px; }
#tab-profile .btn-primary{ background:var(--accent); color:#fff; border-color:rgba(255,255,255,.18); box-shadow:0 6px 18px rgba(51,144,236,.35) }
#tab-profile .btn-outline{ background:var(--bg-elev); border:2px solid rgba(255,255,255,.28) }
#tab-profile .btn-chip{ padding:8px 12px; border-radius:12px; background:rgba(51,144,236,.12); color:var(--accent); border:1px solid rgba(51,144,236,.5); font-weight:700 }

/* Inventory card */
#tab-profile .profile-card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.25) }
#tab-profile .profile-card-header{ display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--border) }
#tab-profile .profile-card-header .title{ font-weight:700; color:var(--text-dim) }
#tab-profile .inv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:8px }
#tab-profile .inv-item{ background:var(--panel); border:1px solid var(--border); border-radius:14px; height:110px; display:flex; align-items:center; justify-content:center }
#tab-profile .inv-item img{ width:78px; height:78px; object-fit:contain }

/* ---------- Mobile tweaks ---------- */
@media (max-width:600px){

  .upgrade-root{ grid-template-columns:1fr; }
  .up-left,.up-right{ width:100% }
  .up-center{ order:-1 }

    html.tg-fullscreen #tab-upgrade .up-center{ margin-top: var(--chips-top); }

 /* .header-row{ margin-top: clamp(28px, 14vh, 120px); margin-bottom: 20px; }*/
  .roulette-container{ height:172px; margin: 0 0 14px; }
  .roulette-item{ min-width:136px; height:136px }
  .roulette-item img{ width:104px; height:104px }
  .result-sheet{ --card-size: min(52vw, 320px, 52vh); }
  .close {
      width: 40px; /* Увеличенный размер кнопки */
      height: 40px;
      font-size: 30px; /* Увеличенный размер шрифта */
    }

  /* Profile mobile tweaks */
  #tab-profile .profile-chips{ gap:8px; }
  /* In fullscreen on mobile, use unified variable-driven offset */
  html.tg-fullscreen #tab-profile .profile-chips{ margin-top: var(--chips-top); }
  #tab-profile .chip{ padding:6px 10px; font-size:13px }
  #tab-profile .chip-balance .val{ font-size:14px }
  #tab-profile .profile-avatar img, #tab-profile .profile-avatar .avatar-ico{ width:132px; height:132px }
  #tab-profile .profile-name{ font-size:26px }
  #tab-profile .profile-actions{ grid-template-columns:1fr 1fr; gap:10px }
  #tab-profile .btn{ padding:12px 14px; font-size:16px }
  #tab-profile .profile-card{ border-radius:18px }
  #tab-profile .inv-grid{ gap:10px }
  #tab-profile .inv-item{ height:100px }
}

/* ---------- Desktop tweaks for Profile ---------- */
@media (min-width: 601px){
  /* reduce top whitespace on desktop handled via --profile-pad-top */

  /* center chips and tighten top spacing */
  #tab-profile .profile-chips{
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    gap: 12px;
  }
  #tab-profile .chip-balance{ margin-left: 0; }
  #tab-profile .profile-root{ max-width: 860px; }
  #tab-profile .profile-avatar{ margin-top: 0; }
  #tab-profile .profile-avatar img, #tab-profile .profile-avatar .avatar-ico{ width: 180px; height: 180px; }
  #tab-profile .profile-name{ margin-top: 8px; font-size: 32px; }

  /* center actions */
  #tab-profile .btn{ padding: 14px 18px; font-size: 18px; }

  /* inventory proportions */
  #tab-profile .profile-card{ margin-top: 6px; }
  #tab-profile .inv-grid{ gap: 14px; }
  #tab-profile .inv-item{ height: 120px; }