/* ============================================================
   RubyCraft — User Panel (TrexMine-style, ruby red theme)
   ============================================================ */
@font-face{
  font-family:'Minecrafter';
  src: url('../../../assets/fonts/minecrafter-webfont.woff') format('woff');
  font-display: swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('../../../assets/fonts/Vazirmatn-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('../../../assets/fonts/Vazirmatn-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('../../../assets/fonts/Vazirmatn-Black.ttf') format('truetype');
  font-weight: 900; font-display: swap;
}

:root{
  --bg: #0b0508;
  --panel: #14090d;
  --panel-2: #1b0d12;
  --card: #17161d;
  --card-2: #1d1c24;
  --line: rgba(255,255,255,.07);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.55);
  --red: #e01e2b;
  --red-hi: #ff4653;
  --red-glow: rgba(224,30,43,.45);
  --radius: 16px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height: 100%; }
body{
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
}
.pbg{
  position: fixed; inset: 0; z-index: 0;
  background: url('../../../assets/img/bg.webp') center/cover no-repeat;
  filter: blur(14px) brightness(.42);
}
.pbg::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 700px at 70% 20%, rgba(224,30,43,.14), transparent 60%);
}

/* ===== frame ===== */
.frame{
  position: relative; z-index: 1;
  max-width: 1400px;
  margin: 28px auto;
  min-height: calc(100vh - 56px);
  background: rgba(13,8,10,.88);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 22px;
  display: grid;
  grid-template-columns: 250px 1fr;
  overflow: hidden;
}
/* RTL grid: first column = right side (sidebar) */

/* ===== sidebar (right) ===== */
.side{
  border-inline-start: 1px solid var(--line);
  padding: 26px 20px;
  display: flex; flex-direction: column;
}
.side__brand{
  font-family:'Minecrafter', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  direction: ltr; text-align: left;
  margin-bottom: 34px;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.side__brand .a{ color: var(--red); }
.side__brand .b{ color: #fff; }
.side__nav{ display:flex; flex-direction:column; gap: 6px; }
.side__link{
  display:flex; align-items:center; justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: .2s;
}
.side__link .ic{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  transition: .2s;
}
.side__link .ic svg{ width: 17px; height: 17px; }
.side__link:hover{ color: var(--text); }
.side__link.is-active{ color: var(--red-hi); }
.side__link.is-active .ic{
  background: rgba(224,30,43,.15);
  border-color: rgba(224,30,43,.5);
  box-shadow: 0 0 16px var(--red-glow);
  color: var(--red-hi);
}
.side__logout{
  margin-top: auto;
  color: #ff5560;
  display:flex; align-items:center; gap:8px;
  text-decoration:none; font-size: 14px; font-weight: 700;
  padding: 10px 14px;
}
.side__logout:hover{ text-decoration: underline; }

/* ===== main ===== */
.main{ padding: 26px 30px; min-width: 0; }
.mtop{
  display:flex; align-items:center; justify-content: space-between;
  margin-bottom: 26px;
}
.mtop__user{ display:flex; align-items:center; gap: 12px; }
.mtop__ava{
  width: 44px; height: 44px; border-radius: 12px;
  image-rendering: pixelated;
  border: 1px solid var(--line);
}
.mtop__name{ font-weight: 800; font-size: 15px; }
.mtop__coins{
  display:flex; align-items:center; gap:6px;
  color: #ff8a93; font-size: 13px; font-weight: 700;
}
.mtop__coins .dot{
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b74, #b3121f);
  display:inline-block;
}
.mtop__cart{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}
.mtop__cart svg{ width: 18px; height: 18px; }

.h1{ font-size: 22px; font-weight: 900; margin-bottom: 20px; }

/* ===== profile strip (dashboard) ===== */
.pstrip{
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(270deg, rgba(224,30,43,.22), rgba(23,12,15,.9) 55%);
  border: 1px solid rgba(224,30,43,.4);
  box-shadow: 0 0 30px rgba(224,30,43,.12);
  padding: 20px 22px;
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.pstrip__ava{
  width: 84px; height: 84px; border-radius: 16px;
  image-rendering: pixelated;
  border: 2px solid rgba(224,30,43,.55);
  box-shadow: 0 0 22px var(--red-glow);
}
.pstrip__id{ min-width: 130px; }
.pstrip__name{ font-size: 22px; font-weight: 900; }
.pstrip__rank{ font-size: 13px; color: var(--muted); margin-top: 4px; }
.pstrip__rank b{ color: var(--red-hi); }
.pstrip__stats{
  display: flex; gap: 30px; flex-wrap: wrap;
  margin-inline-start: auto;
}
.pstat{ text-align: center; }
.pstat__k{ font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pstat__v{ font-size: 14.5px; font-weight: 800; direction: ltr; }

/* ===== cards ===== */
.card{
  background: rgba(23,22,29,.75);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px;
}
.card__title{ font-size: 17px; font-weight: 900; margin-bottom: 18px; }

/* empty chart */
.chart{
  height: 240px;
  border-inline-start: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 90px);
  position: relative;
  margin: 8px 6px 4px;
}
.chart__hint{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--muted); font-size: 13px;
}
.empty{
  padding: 26px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
}

/* ===== shop grid ===== */
.shopbar{
  display:flex; gap: 12px; align-items:center;
  margin-bottom: 22px; flex-wrap: wrap;
}
.shopbar .h1{ margin: 0; margin-inline-end: auto; }
.input, .select{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.input:focus{ border-color: rgba(224,30,43,.55); }
.products{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.product{
  background: rgba(23,22,29,.8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display:flex; flex-direction: column;
  transition: .2s;
}
.product:hover{ border-color: rgba(224,30,43,.45); transform: translateY(-3px); }
.product__media{
  height: 190px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(224,30,43,.10), rgba(255,255,255,.02));
  display:grid; place-items:center;
  margin-bottom: 14px;
  overflow: hidden;
}
.product__media img{ max-height: 165px; max-width: 88%; }
.product__name{ font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.product__price{ color: #ff8a93; font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.product__coin{
  display:flex; align-items:center; gap:6px;
  color: var(--muted); font-size: 12.5px; margin-bottom: 12px;
}
.product__coin .dot{
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b74, #b3121f);
}
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: .15s;
}
.btn--buy{
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 22px rgba(224,30,43,.45);
}
.btn--buy:hover{ background: var(--red-hi); box-shadow: 0 0 30px rgba(224,30,43,.65); }
.btn--ghost{
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  color: var(--text);
}
.btn--ghost:hover{ background: rgba(255,255,255,.12); }
.btn--small{ padding: 8px 14px; font-size: 13px; }

/* ===== settings ===== */
.settings{
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px){ .settings{ grid-template-columns: 1fr; } }
.srow{
  display:flex; align-items:center; justify-content: space-between;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.srow:last-child{ border-bottom: none; }
.srow__k{ color: var(--muted); font-size: 13px; margin-bottom: 5px; }
.srow__v{ font-weight: 800; font-size: 14.5px; direction: ltr; text-align: end; }
.srow__v.rtl{ direction: rtl; text-align: start; }
.acc__head{
  display:flex; align-items:center; gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.acc__ava{ width: 64px; height: 64px; border-radius: 14px; image-rendering: pixelated; border:1px solid var(--line); }
.acc__name{ font-size: 19px; font-weight: 900; }
.acc__id{ color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.rankcard__row{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  margin-bottom: 14px;
}
.rankcard__exp{ color: var(--muted); font-size: 13px; }
.rankcard__cur{ color: var(--red-hi); font-weight: 900; font-size: 17px; }
.linkcard{
  display:flex; align-items:center; gap: 14px;
  justify-content: space-between;
}
.linkcard__info{ display:flex; align-items:center; gap: 12px; }
.linkcard__ic{
  width: 46px; height: 46px; border-radius: 12px;
  display:grid; place-items:center;
  overflow: hidden;
}
.linkcard__ic img{ width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.linkcard__ic--dc{ background:#5865F2; color:#fff; }
.linkcard__t{ font-weight: 800; font-size: 15px; direction: ltr; text-align: end; }
.linkcard__s{ color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* ===== login (OTP) ===== */
.login{
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
}
.login__card{
  width: 100%; max-width: 420px;
  background: rgba(13,8,10,.92);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 38px 34px;
  backdrop-filter: blur(18px);
  text-align: center;
}
.login__logo{ width: 84px; margin: 0 auto 14px; display:block; }
.login__brand{
  font-family:'Minecrafter',sans-serif;
  font-size: 26px; direction: ltr;
  margin-bottom: 6px;
  text-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.login__brand .a{ color: var(--red); } .login__brand .b{ color:#fff; }
.login__sub{ color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.login .input{ width: 100%; text-align: center; font-size: 16px; direction: ltr; }
.login .btn{ width: 100%; margin-top: 14px; }
.otp{
  display: flex; gap: 10px; justify-content: center; direction: ltr;
  margin-top: 4px;
}
.otp input{
  width: 52px; height: 58px;
  text-align: center;
  font-size: 22px; font-weight: 800;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  outline: none;
}
.otp input:focus{ border-color: var(--red); box-shadow: 0 0 14px rgba(224,30,43,.35); }
.login__step{ display: none; }
.login__step.is-on{ display: block; }
.login__back{
  margin-top: 16px; display:inline-block;
  color: var(--muted); font-size: 13px; cursor: pointer;
  background: none; border: none; font-family: inherit;
}
.login__back:hover{ color: var(--text); }

/* ===== toasts ===== */
.ptoasts{
  position: fixed; top: 20px; left: 20px; z-index: 999;
  display: flex; flex-direction: column; gap: 10px;
}
.ptoast{
  background: rgba(20,10,13,.96);
  border: 1px solid rgba(224,30,43,.5);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 260px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 20px rgba(224,30,43,.2);
  animation: tIn .3s ease both;
  font-size: 14px;
}
.ptoast b{ color: var(--red-hi); font-size: 17px; letter-spacing: 2px; direction: ltr; display:inline-block; }
.ptoast__t{ font-weight: 800; margin-bottom: 4px; }
@keyframes tIn{ from{ opacity:0; transform: translateY(-10px);} to{ opacity:1; transform:none; } }

@media (max-width: 860px){
  .frame{ grid-template-columns: 1fr; margin: 10px; }
  .side{ order: 0; flex-direction: row; align-items: center; gap: 8px; padding: 14px; border-inline-start: none; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .side__brand{ margin: 0 0 0 10px; font-size: 16px; }
  .side__nav{ flex-direction: row; }
  .side__link span.lbl{ display:none; }
  .side__logout{ margin: 0; }
  .pstrip__stats{ margin: 0; }
}

/* ===== My Info: MC inventory grid ===== */
.mcgrid{
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  max-width: 520px;
}
.mcgrid--armor{ grid-template-columns: repeat(5, 1fr); max-width: 292px; }
.mccell{
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.mccell--has{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.12);
}
.mccell--ench{
  border-color: rgba(170,90,255,.5);
  box-shadow: inset 0 0 10px rgba(170,90,255,.25);
}
.mccell img{
  width: 78%; height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
}
.mccell__n{
  position: absolute; bottom: 1px; left: 4px;
  font-size: 12px; font-weight: 800;
  color: #fff; text-shadow: 1px 1px 0 #000;
  font-family: 'Minecraft', monospace;
}
.mctip{
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(16,1,16,.97);
  border: 1px solid rgba(170,90,255,.6);
  color: #fff;
  font-size: 12px; white-space: nowrap;
  padding: 5px 9px; border-radius: 5px;
  opacity: 0; pointer-events: none; transition: .12s;
  z-index: 20;
  font-family: 'Minecraft','Vazirmatn',sans-serif;
}
.mccell--has:hover .mctip{ opacity: 1; }

.kitpill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(224,30,43,.2), rgba(224,30,43,.08));
  border: 1px solid rgba(224,30,43,.4);
  border-radius: 10px;
  font-weight: 800; font-size: 13.5px;
}
.kitpill::before{ content:"⚔"; font-size: 14px; }

/* island block */
.isl__head{ margin-bottom: 14px; }
.isl__name{ font-size: 18px; font-weight: 900; }
.isl__lvl{ color: var(--muted); font-size: 13px; margin-top: 4px; }
.isl__lvl b{ color: #ff6b74; }
.isl__members{ display: flex; gap: 14px; flex-wrap: wrap; }
.isl__mem{ text-align: center; }
.isl__mem img{
  width: 48px; height: 48px; border-radius: 10px;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  display: block; margin: 0 auto 6px;
}
.isl__mem span{ font-size: 12px; color: var(--muted); display: block; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }

/* آپلود اسکین/آواتار */
.avaUp{ position: relative; cursor: pointer; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
.avaUp .acc__ava{ width: 100%; height: 100%; margin: 0; display: block; }
.avaUp__over{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: 11px; font-weight: 800;
  opacity: 0; transition: .15s;
}
.avaUp:hover .avaUp__over{ opacity: 1; }