/* The sanctum screen: one stylesheet shared by every deity page.
   Generated deity pages (ganesh.html, shiva.html) all load this;
   the picker at / has its own styles, it looks nothing like this. */

  *{margin:0;padding:0;box-sizing:border-box}
  html,body{
    height:100%;overflow:hidden;background:#0a0705;
    overscroll-behavior:none;
    -webkit-tap-highlight-color:transparent;
  }
  body{
    font-family:'Iowan Old Style',Georgia,serif;
    color:#f0e2c8;
    -webkit-font-smoothing:antialiased;
    user-select:none; -webkit-user-select:none;
  }

  /* touch-action:none is load-bearing — without it the browser claims
     the drag for scroll/pinch and the aarti circle never completes */
  #scene{
    position:fixed;inset:0;display:block;cursor:default;
    touch-action:none;
  }
  #scene.holding{cursor:none}

  /* the flame rides above the canvas so it keeps its gradients and
     gaussian blur; the warm light it throws is still painted on the
     canvas underneath, which is what actually lights the idol */
  #flame{
    position:fixed;left:0;top:0;transform-origin:0 0;
    pointer-events:none;z-index:3;opacity:0;
    transition:opacity .3s;will-change:transform;
  }
  #flame.on{opacity:1}
  #flame .spark{fill:#FCEEAD;opacity:0}
  #flame.on .spark{animation:rise 2.4s linear infinite}
  #flame.on .s2{animation-duration:3.2s;animation-delay:.8s}
  #flame.on .s3{animation-duration:2.7s;animation-delay:1.5s}
  @keyframes rise{
    0%  {opacity:0;   transform:translate(0,0) scale(1)}
    18% {opacity:.9}
    100%{opacity:0;   transform:translate(-16px,-155px) scale(.3)}
  }
  @media (prefers-reduced-motion:reduce){
    #flame.on .spark{animation:none}
  }

  /* ---- the shelf of offerings, bottom centre ---- */
  #tray{
    position:fixed;left:50%;bottom:0;transform:translateX(-50%);
    display:flex;gap:10px;padding:12px 16px 16px;
    background:linear-gradient(to top,rgba(12,8,5,.92),rgba(12,8,5,0));
    z-index:5;
  }
  .item{
    width:88px;padding:8px 6px 9px;border-radius:12px;
    background:rgba(255,238,205,.05);
    border:1px solid rgba(255,214,150,.16);
    text-align:center;cursor:pointer;
    transition:background .18s,border-color .18s,transform .18s;
  }
  .item:hover{background:rgba(255,238,205,.11);border-color:rgba(255,214,150,.4);transform:translateY(-3px)}
  .item.active{background:rgba(255,190,90,.18);border-color:rgba(255,190,90,.65)}
  .item.spent{opacity:.28;pointer-events:none}
  .item canvas{display:block;margin:0 auto 4px}
  .item span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.72}

  /* ---- masthead, top left where the frame is darkest ----
     it is also the way back to the god picker, so unlike the rest of
     the chrome it must stay clickable */
  #brand{
    position:fixed;top:15px;left:18px;z-index:6;
    display:flex;align-items:center;gap:9px;
    text-decoration:none;color:inherit;
    opacity:1;transition:opacity .2s;
  }
  #brand:hover{opacity:.72}
  #brand img{
    width:32px;height:32px;display:block;
    filter:drop-shadow(0 2px 9px rgba(0,0,0,.8));
  }
  #brand b{
    font-weight:400;font-size:14px;letter-spacing:.21em;
    text-transform:uppercase;opacity:.6;
    text-shadow:0 2px 10px rgba(0,0,0,.9);
  }

  /* ---- quiet text at the top ---- */
  #place{
    position:fixed;top:22px;left:0;right:0;text-align:center;z-index:4;
    pointer-events:none;
  }
  #place b{display:block;font-size:15px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;opacity:.5}

  #hint{
    position:fixed;left:0;right:0;bottom:112px;text-align:center;z-index:4;
    font-size:14.5px;letter-spacing:.06em;opacity:0;transition:opacity .5s;
    pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.9);
  }
  #hint.on{opacity:.82}

  #done{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:10px;z-index:6;opacity:0;pointer-events:none;
    transition:opacity 2s; background:rgba(8,5,3,.35);
  }
  #done.on{opacity:1}
  #done .dev{font-size:34px;letter-spacing:.1em}
  #done .en{font-size:13px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}

  #credit{
    position:fixed;right:10px;bottom:6px;z-index:4;
    font-size:10.5px;letter-spacing:.04em;opacity:.26;
  }
  #credit a{color:inherit}
  #credit:hover{opacity:.6}

  /* ---- phones: the sanctum is a window in the upper half, the
         offerings sit in the thumb zone underneath ---- */
  body.portrait #tray{
    bottom:0;
    width:100%;justify-content:center;
    gap:10px;
    padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,rgba(10,7,5,.97) 62%,rgba(10,7,5,0));
  }
  body.portrait .item{
    width:29vw;max-width:118px;
    padding:12px 6px 11px;border-radius:14px;
  }
  body.portrait .item canvas{transform:scale(1.15);margin-bottom:7px}
  body.portrait .item span{font-size:11px}
  body.portrait .item:hover{transform:none}      /* no hover on touch */
  body.portrait #brand b{display:none}           /* wordmark would collide */
  body.portrait #brand{top:13px;left:14px}
  body.portrait #brand img{width:28px;height:28px}
  body.portrait #place{top:17px}
  body.portrait #place b{font-size:13px;letter-spacing:.18em}
  body.portrait #hint{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  body.portrait #credit{display:none}
  body.portrait #done .dev{font-size:27px}

  @media (max-width:560px) and (orientation:landscape){
    .item{width:74px}
    #tray{gap:6px}
    #credit{display:none}
  }