/* ========================================================================
   COMMON.CSS — مسیر شوالیه‌ی مدار
   متغیرهای رنگی، ریست پایه، HUD (نوار سطح/XP)، تب‌ها، افکت کانفتی/فلش
   و فوتر. باید قبل از quest.css و lab.css بارگذاری شود.
   ======================================================================== */

  :root{
    --bg: #0b0e14;
    --bg2: #10141d;
    --copper: #c97c3d;
    --copper-bright: #e79a54;
    --trace: #3f9d78;
    --trace-bright: #57d8a3;
    --gold: #d4af37;
    --parchment: #e8e2d0;
    --muted: #6b7280;
    --locked: #343c48;
    --danger: #c1554a;
    --panel: #141924;
    --panel-border: #232b3a;
  }
  *{box-sizing:border-box;}
  /* The #1 cause of "page renders tiny, must pinch-zoom" on mobile: a flex/grid
     child that can't shrink below its content size (browser default is
     min-width:auto) pushes the real layout wider than the screen, and some
     mobile browsers respond by zooming the whole page out instead of just
     scrolling. Forcing min-width:0 lets every flex/grid item shrink to fit. */
  *, *::before, *::after{ min-width:0; }
  html{ margin:0; padding:0; width:100%; max-width:100vw; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{
    margin:0; padding:0; width:100%; max-width:100vw; overflow-x:hidden;
    background:
      radial-gradient(ellipse at 20% -10%, #1a2233 0%, transparent 55%),
      radial-gradient(ellipse at 80% 0%, #1c1420 0%, transparent 50%),
      var(--bg);
    color:var(--parchment);
    font-family:'Vazirmatn', sans-serif;
    min-height:100vh;      /* fallback for browsers without dvh */
    min-height:100dvh;     /* real visible height on mobile (ignores address-bar jump) */
    -webkit-tap-highlight-color:transparent;
  }
  button, .node, .swatch, .rband, .chip, .comp-cat-btn, .tab-btn{ touch-action:manipulation; }
  img, svg, canvas, video{ max-width:100%; }
  .mono{ font-family:'JetBrains Mono', monospace; }

  /* ---------- HUD ---------- */
  .hud{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    padding:calc(14px + env(safe-area-inset-top)) clamp(14px, 4vw, 22px) 14px;
    background:linear-gradient(180deg, rgba(11,14,20,0.97), rgba(11,14,20,0.85));
    border-bottom:1px solid var(--panel-border);
    backdrop-filter:blur(6px);
  }
  .hud-title{
    display:flex; align-items:center; gap:10px;
    font-weight:800; font-size:clamp(16px,4.2vw,20px); letter-spacing:.3px; color:var(--copper-bright);
  }
  .hud-title svg{ width:26px; height:26px; }
  .hud-stats{ display:flex; align-items:center; gap:18px; }
  .xp-wrap{ display:flex; flex-direction:column; gap:4px; min-width:160px; }
  .xp-label{ font-size:11px; color:var(--muted); display:flex; justify-content:space-between; }
  .xp-bar{ height:8px; border-radius:5px; background:#1c2330; overflow:hidden; border:1px solid var(--panel-border);}
  .xp-fill{ height:100%; background:linear-gradient(90deg,var(--trace),var(--gold)); transition:width .5s ease; }
  .level-badge{
    display:flex; align-items:center; gap:6px;
    background:var(--panel); border:1px solid var(--copper); border-radius:20px;
    padding:5px 12px; font-size:13px; font-weight:700; color:var(--copper-bright);
  }

  /* ---------- ACCOUNT (Google sign-in / cloud sync) ---------- */
  .account-wrap{ position:relative; flex:0 0 auto; }
  .account-btn{
    display:flex; align-items:center; gap:8px;
    background:var(--panel); border:1px solid var(--panel-border); border-radius:20px;
    padding:6px 14px 6px 6px; font-family:'Vazirmatn'; font-weight:700; font-size:12.5px;
    color:var(--parchment); cursor:pointer; transition:border-color .15s ease;
  }
  .account-btn:hover{ border-color:var(--trace); }
  .account-btn.disabled{ opacity:.55; cursor:default; }
  .account-btn.disabled:hover{ border-color:var(--panel-border); }
  .account-avatar{
    display:none; width:24px; height:24px; border-radius:50%; object-fit:cover;
    border:1px solid var(--panel-border);
  }
  .account-icon{ width:18px; height:18px; flex:0 0 auto; color:var(--muted); }
  .account-btn.signed-in .account-icon{ display:none; }
  .account-menu{
    display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:60;
    min-width:200px; background:var(--bg2); border:1px solid var(--panel-border);
    border-radius:12px; padding:10px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  }
  .account-menu.open{ display:block; }
  .account-menu-note{ font-size:11.5px; color:var(--muted); padding:4px 6px 8px; line-height:1.7; }
  .account-menu-item{
    width:100%; text-align:right; padding:8px 10px; border-radius:8px; border:none;
    background:transparent; color:var(--danger); font-family:'Vazirmatn'; font-weight:700;
    font-size:12.5px; cursor:pointer;
  }
  .account-menu-item:hover{ background:#1a2130; }


  /* ---------- JUICE: confetti / flash / shake / pop ---------- */
  #confettiCanvas{
    position:fixed; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:200;
  }
  .flash-overlay{
    position:fixed; inset:0; z-index:150; pointer-events:none;
    background:radial-gradient(circle at center, rgba(212,175,55,.35), rgba(212,175,55,0) 70%);
    opacity:0; transition:opacity .15s ease;
  }
  .flash-overlay.active{ opacity:1; animation:flashOut .55s ease forwards; }
  @keyframes flashOut{ 0%{opacity:1;} 100%{opacity:0;} }

  @keyframes shakeX{
    10%,90%{ transform:translateX(-1px); }
    20%,80%{ transform:translateX(2px); }
    30%,50%,70%{ transform:translateX(-4px); }
    40%,60%{ transform:translateX(4px); }
  }
  .node.shake{ animation:shakeX .45s cubic-bezier(.36,.07,.19,.97) both; }

  @keyframes nodePop{
    0%{ transform:scale(1); }
    35%{ transform:scale(.94); }
    60%{ transform:scale(1.05); }
    100%{ transform:scale(1); }
  }
  .node.completing{ animation:nodePop .45s ease; }

  @keyframes iconBurst{
    0%{ transform:scale(1) rotate(0deg); }
    40%{ transform:scale(1.5) rotate(-8deg); filter:drop-shadow(0 0 10px var(--gold)); }
    70%{ transform:scale(.9) rotate(6deg); }
    100%{ transform:scale(1) rotate(0deg); }
  }
  .node-icon.burst{ animation:iconBurst .5s ease; }

  @keyframes modalPop{
    0%{ opacity:0; transform:scale(.82) translateY(14px); }
    60%{ opacity:1; transform:scale(1.03) translateY(-2px); }
    100%{ opacity:1; transform:scale(1) translateY(0); }
  }
  .overlay.open .modal{ animation:modalPop .32s cubic-bezier(.2,.9,.3,1.2) both; }

  @keyframes overlayFade{ from{ opacity:0; } to{ opacity:1; } }
  .overlay.open{ animation:overlayFade .18s ease both; }

  .complete-btn{ position:relative; overflow:hidden; }
  .complete-btn:not(:disabled):active{ transform:scale(.97); }
  .complete-btn .ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
    transform:scale(0); animation:rippleAnim .55s ease-out forwards; pointer-events:none;
  }
  @keyframes rippleAnim{ to{ transform:scale(3.2); opacity:0; } }

  @keyframes badgeBump{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.28); box-shadow:0 0 0 6px rgba(212,175,55,.18); }
    100%{ transform:scale(1); }
  }
  .level-badge.bump{ animation:badgeBump .5s ease; }

  .xp-fill{ position:relative; overflow:hidden; }
  .xp-fill.filling::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation:shimmer .6s ease;
  }
  @keyframes shimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

  /* ========================================================= */
  /* ---------- TAB NAV ---------- */
  .tab-nav{
    max-width:920px; margin:22px auto 0; padding:0 18px;
    display:flex; gap:10px;
  }
  .tab-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 14px; border-radius:12px; border:1px solid var(--panel-border);
    background:var(--panel); color:var(--muted); font-family:'Vazirmatn'; font-weight:700; font-size:14px;
    cursor:pointer; transition:all .18s ease;
  }
  .tab-btn svg{ width:18px; height:18px; flex:0 0 auto; }
  .tab-btn:hover{ color:var(--parchment); border-color:var(--copper); }
  .tab-btn.active{
    color:#08150f; background:linear-gradient(90deg,var(--trace),var(--trace-bright));
    border-color:var(--trace-bright); box-shadow:0 6px 18px -8px rgba(87,216,163,.5);
  }
  .tab-btn.locked{
    color:var(--muted); background:var(--locked); border-color:var(--panel-border);
    opacity:.65; cursor:not-allowed;
  }
  .tab-btn.locked:hover{ color:var(--muted); border-color:var(--panel-border); }
  .tab-btn.locked.active{
    color:var(--muted); background:var(--locked);
    border-color:var(--panel-border); box-shadow:none;
  }
  #questTab, .lab-tab{ display:none; }
  #questTab.active, .lab-tab.active{ display:block; }

  footer.credit{ text-align:center; font-size:12px; color:var(--muted); padding:20px; }

  /* ---------- MOBILE: shared HUD / tab-nav / footer ---------- */
  @media (max-width: 640px){
    .hud{ padding:calc(16px + env(safe-area-inset-top)) 14px 16px; gap:10px; }
    .hud-title{ gap:8px; }
    .hud-title svg{ width:30px; height:30px; }
    .hud-stats{ gap:14px; flex-wrap:wrap; }
    .xp-wrap{ min-width:130px; }
    .xp-label{ font-size:13px; }
    .xp-bar{ height:11px; }
    .level-badge{ font-size:15px; padding:7px 14px; }
    .account-btn span#accountLabel{ display:none; }
    .account-btn{ padding:6px; }
    .account-avatar{ width:28px; height:28px; }
    .account-menu{ left:auto; right:0; }

    footer.credit{ font-size:14px; padding:24px 14px; }

    .tab-nav{ padding:0 14px; }
    .tab-btn{ font-size:13px; padding:12px 8px; }
  }

  /* ---------- SMALL PHONES ---------- */
  @media (max-width: 380px){
    .hud{ padding-inline:10px; }
    .xp-wrap{ min-width:0; flex:1 1 120px; }
    .tab-nav{ padding-inline:10px; }
  }