/* 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:44px;height:44px;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;flex-wrap:nowrap;
    gap:8px;
    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));
  }
  /* Share the row, never overflow it. `width` alone lets a tile refuse
     to shrink past the width of its own label — so Shiva, who has four
     offerings, pushed the last one off a 393px screen. `flex:1 1 0` with
     `min-width:0` makes every tile take an equal share of whatever there
     is, and the label shrinks to match rather than setting the floor. */
  body.portrait .item{
    flex:1 1 0;min-width:0;max-width:118px;
    padding:12px 4px 11px;border-radius:14px;
  }
  body.portrait .item canvas{transform:scale(1.15);margin-bottom:7px}
  body.portrait .item span{
    font-size:clamp(9px,2.6vw,11px);
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  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:36px;height:36px}
  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}
  }

  /* ---- sound: a single switch, opposite the wordmark ---- */
  #sound{
    position:fixed;top:20px;right:20px;z-index:6;
    width:38px;height:38px;padding:0;
    display:grid;place-items:center;
    border:1px solid rgba(214,168,90,.22);border-radius:50%;
    background:rgba(18,12,7,.5);color:#d9ae62;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:color .25s,border-color .25s,background .25s;
  }
  #sound:hover{color:#f2d094;border-color:rgba(214,168,90,.5);
               background:rgba(28,19,10,.7)}
  #sound:focus-visible{outline:2px solid rgba(214,168,90,.6);outline-offset:3px}
  #sound svg{width:20px;height:20px;fill:none;stroke:currentColor;
             stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  #sound .spk{fill:currentColor;stroke-width:1}
  #sound .wv1,#sound .wv2,#sound .slash{transition:opacity .2s}
  #sound .slash{opacity:0}
  /* silenced: the waves go out, the bar comes across, and the whole
     control dims so it reads as off at a glance */
  #sound.off{color:#7a6749}
  #sound.off .wv1,#sound.off .wv2{opacity:0}
  #sound.off .slash{opacity:1}

  body.portrait #sound{top:13px;right:14px;width:34px;height:34px}
  body.portrait #sound svg{width:18px;height:18px}

  /* ---- the motion-permission prompt ---- */
  /* iOS shows its dialog only from a tap, so this explains what the tap
     is for. Sits where the hint does; both are transient and the prompt
     leaves on the first touch, so they do not collide. */
  #tiltask{
    position:fixed;left:50%;bottom:104px;transform:translate(-50%,10px);
    z-index:7;display:flex;align-items:center;gap:10px;
    max-width:calc(100vw - 32px);
    padding:9px 9px 9px 15px;border-radius:999px;
    border:1px solid rgba(214,168,90,.24);
    background:rgba(14,9,5,.86);backdrop-filter:blur(6px);
    color:#e7d3ac;font-size:12.5px;letter-spacing:.02em;
    opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
  }
  #tiltask.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  #tiltask span{line-height:1.3}
  #tiltask button{
    font:inherit;cursor:pointer;border-radius:999px;
    -webkit-tap-highlight-color:transparent;
  }
  #tiltask .yes{
    padding:6px 14px;white-space:nowrap;
    border:1px solid rgba(214,168,90,.5);
    background:rgba(214,168,90,.14);color:#f2d094;
  }
  #tiltask .yes:hover{background:rgba(214,168,90,.26)}
  #tiltask .no{
    width:26px;height:26px;flex:0 0 26px;padding:0;
    border:0;background:none;color:#8d7a5c;font-size:17px;line-height:1;
  }
  #tiltask .no:hover{color:#d9ae62}
  body.portrait #tiltask{bottom:calc(150px + env(safe-area-inset-bottom,0px))}