/* ============================================================
   base.css — reset, app shell, shared primitives
   (phone frame, status bar, scroll area, buttons, toast,
   keyframes, dev controls and the preview toolbar)
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;
  font-family:'IRANSharp','IRANSansXFaNum',system-ui,sans-serif;}
html,body{width:100%;height:100%;}
body{background:#06080C;color:var(--tx-100);direction:rtl;
  display:flex;align-items:center;justify-content:center;min-height:100dvh;}

/* phone frame */
#app{position:relative;width:min(402px,100vw);height:844px;max-height:calc(100dvh - 64px);
  background:var(--bg-surface);overflow:hidden;flex-shrink:0;display:flex;flex-direction:column;
  border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.6);}
/* onboarding: hero glow rises from the very top, behind the transparent statusbar + topbar */
body.onboarding #app{background:var(--grad-hero),var(--bg-surface);}
/* bracket (جدول بازی‌ها): reuse the same hero glow behind the cup; the scroll content is
   transparent so the gradient stays pinned to the top of the frame while the groups scroll */
body.bracket #app{background:var(--grad-hero),var(--bg-surface);}
/* screen mount: fills the frame and lays out as a column so .content can scroll */
#root{flex:1;min-height:0;display:flex;flex-direction:column;}
.statusbar{display:flex;direction:ltr;justify-content:space-between;align-items:center;
  padding:12px 22px 4px;font-size:15px;color:var(--tx-100);flex-shrink:0;font-weight:600;}
.statusbar .sb-time{letter-spacing:.5px;}
.statusbar .sig{display:flex;gap:7px;align-items:center;color:var(--tx-100);}
.statusbar .sb-ic{display:block;}

/* scroll content */
.content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 16px 18px;
  scrollbar-width:none;}
.content::-webkit-scrollbar{display:none;}
.page-title{font-size:14px;font-weight:700;margin:10px 2px 14px;}
.sec-title{font-size:14px;font-weight:500;color:var(--tx-400);margin:18px 2px 10px;}

.home-ind{height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.home-ind>i{width:130px;height:5px;border-radius:var(--r-pill);background:var(--tx-500);}

/* shared animations */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(70px)}to{transform:none}}

/* primary button */
.btn{width:100%;height:50px;border:none;border-radius:var(--r-lg);font-size:15px;font-weight:600;
  color:#fff;background:var(--grad);cursor:pointer;transition:opacity .2s;}
.btn:active{opacity:.85;} .btn:disabled{opacity:.4;cursor:not-allowed;}
.btn.ghost{background:var(--bg-300);border:1px solid var(--st-400);color:var(--tx-200);}

/* toast */
.toast{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);z-index:2600;
  background:var(--bg-500);border:1px solid var(--st-500);color:#fff;border-radius:var(--r-lg);
  padding:12px 16px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:up .2s ease;white-space:nowrap;}

body.fullbleed #app{width:100%;max-width:440px;height:100dvh;max-height:100dvh;border-radius:0;}

/* responsive: on phones the frame fills the screen (no desktop margin/frame) */
@media (max-width:480px){
  body{padding-top:0;align-items:stretch;}
  #app{width:100%;height:100dvh;max-height:100dvh;border-radius:0;box-shadow:none;}
}