:root{
    --ink:#0a0a0c;
    --bone:#c9c4b8;
    --blood:#8c1f16;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;height:100%;background:#000;overflow:hidden;
            overscroll-behavior:none;touch-action:manipulation}
  /* iOS Safari's 100vh is the LARGE viewport — it includes the space behind the
     toolbar, so the page ends up taller than what you can see, the layout drifts
     upward and a scroll indicator appears mid-game. dvh is the visible height and
     matches window.innerHeight, which is what layout() measures. */
  body{position:fixed;inset:0;width:100%;height:100vh;height:100dvh}
  body{
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    color:var(--bone);
    display:flex;align-items:center;justify-content:center;
    user-select:none;
  }
  #stage{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#000}
  canvas{position:absolute;left:0;top:0;display:block;image-rendering:pixelated}

  /* ---------- HUD ---------- */
  #hud.hidden{display:none}
  #hud{
    position:absolute;left:0;right:0;top:0;padding:10px 14px;
    display:flex;justify-content:space-between;align-items:flex-start;
    pointer-events:none;z-index:20;
    font-size:12px;letter-spacing:2px;text-transform:uppercase;
    text-shadow:0 0 8px #000,0 0 2px #000;
    opacity:.75;
  }
  #hearts{color:var(--blood);font-size:15px;letter-spacing:3px;text-shadow:0 0 10px #6b0f0a}
  #hudRight{text-align:right}
  #stormbar{
    margin-top:6px;width:120px;height:3px;background:rgba(255,255,255,.12);
    position:relative;overflow:hidden;
  }
  #stormfill{position:absolute;left:0;top:0;bottom:0;width:0%;background:#9fd0ff;box-shadow:0 0 10px #6fb6ff}
  #stormfill.hot{background:#fff;box-shadow:0 0 16px #fff}

  #lifeRow{margin-top:9px;display:none}
  #lifeRow.on{display:block}
  #lifeLabel{font-size:9px;letter-spacing:.3em;color:#7d8e9e;margin-bottom:4px}
  #lifeWrap{width:120px;height:3px;background:rgba(255,255,255,.10);position:relative;overflow:hidden}
  #lifeFill{position:absolute;left:0;top:0;bottom:0;width:100%;
    background:linear-gradient(90deg,#3d6b8f,#a8d4f5);box-shadow:0 0 8px #4d86b0}
  #lifeRow.dying #lifeLabel{color:#ff9a86}
  #lifeRow.dying #lifeFill{background:linear-gradient(90deg,#7a2412,#ff7a52);box-shadow:0 0 12px #ff4d20}
  #lifeRow.gone #lifeLabel{color:#ff5a3c;animation:panic .6s infinite}
  #modeTag{margin-top:8px;font-size:9px;letter-spacing:.26em;color:#8a7f6e;max-width:150px;line-height:1.7}

  /* ---------- Overlays ---------- */
  .screen{
    position:absolute;inset:0;z-index:40;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:24px;
    background:radial-gradient(ellipse at center,rgba(8,8,10,.86) 0%,rgba(0,0,0,.98) 70%);
    backdrop-filter:blur(2px);
  }
  .screen.hidden{display:none}
  .screen{overflow-y:auto}          /* never let a short screen hide the button */
  .screen h1{
    margin:0 0 6px;font-size:clamp(30px,8vw,64px);letter-spacing:.18em;font-weight:700;
    color:#ded8cb;text-shadow:0 0 26px rgba(160,20,10,.55),0 2px 0 #000;
  }
  .screen h2{margin:0 0 18px;font-size:clamp(11px,2.6vw,14px);letter-spacing:.42em;color:#6d665c;font-weight:400}
  .screen p{max-width:520px;line-height:1.75;font-size:13px;color:#8a8378;margin:6px 0}
  .screen .keys{margin:16px 0 4px;font-size:12px;color:#6f695f;line-height:2}
  .screen .keys b{color:#b9b2a5;font-weight:600}
  .btn{
    margin-top:22px;padding:13px 30px;border:1px solid #4a453d;background:rgba(255,255,255,.03);
    color:#cfc8bb;font:inherit;font-size:13px;letter-spacing:.28em;text-transform:uppercase;
    cursor:pointer;transition:.18s;pointer-events:auto;
  }
  .btn:hover,.btn:focus{background:rgba(180,30,20,.16);border-color:#8c1f16;color:#fff;outline:none}
  .btn.hidden{display:none}
  /* the way back into an interrupted descent — gold, so it reads as the way
     onward rather than as another way to start again */
  #resumeBtn{border-color:#8a6a22;color:#f0d79a;background:rgba(210,160,40,.07)}
  #resumeBtn:hover,#resumeBtn:focus{background:rgba(210,160,40,.17);border-color:#e0b448;color:#fff}
  #resumeBtn:not(.hidden) + #startBtn{margin-top:10px;font-size:11px;opacity:.72;padding:10px 22px}
  #resumeBtn:not(.hidden) + #startBtn:hover{opacity:1}
  .legend{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:11px;color:#7d766a}
  .legend div{display:flex;align-items:center;gap:7px}

  /* ---------- FX ---------- */
  #vignette{position:absolute;inset:0;pointer-events:none;z-index:15;
    background:radial-gradient(ellipse at center,transparent 32%,rgba(0,0,0,.72) 88%)}
  #damage{position:absolute;inset:0;pointer-events:none;z-index:18;background:#7c0d07;opacity:0;transition:opacity .12s}
  #scare{position:absolute;inset:0;z-index:45;display:none;align-items:center;justify-content:center;background:#000}
  #scare canvas{position:static}
  /* Sits under the HUD rather than above the controls: on a phone the bottom
     third is thumbs, and a message printed across the d-pad is unreadable and
     un-tappable at the same time. */
  #toast{
    position:absolute;left:50%;top:38px;bottom:auto;transform:translateX(-50%);
    background:rgba(0,0,0,.55);padding:5px 14px;border-radius:20px;
    z-index:25;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
    color:#cdbfa6;text-shadow:0 0 12px #000;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap
  }
  body.chanting #toast{top:38px;bottom:auto}

  /* ---------- Touch controls ---------- */
  #pad{position:absolute;right:16px;bottom:16px;z-index:30;display:none;
    grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:6px;opacity:.42}
  #pad button{
    border:1px solid #3b372f;background:rgba(255,255,255,.04);color:#bdb6a9;
    font:inherit;font-size:20px;border-radius:9px;cursor:pointer;
  }
  #pad button:active{background:rgba(200,40,30,.28)}
  #pad .sp{visibility:hidden}
  body.touch #pad{display:grid}
  /* ---------- Stomach (gut) HUD ---------- */
  #gutHud{position:absolute;left:0;right:0;top:0;z-index:22;display:none;padding:12px 18px;
    pointer-events:none;text-align:center;opacity:.88}
  #gutHud.on{display:block}
  #gutLabel{font-size:12px;letter-spacing:.44em;color:#ffb9ad;text-transform:uppercase;
    text-shadow:0 0 16px #7d0f06,0 0 3px #000}
  #gutBarWrap{margin:9px auto 0;width:min(420px,72vw);height:6px;background:rgba(255,255,255,.09);
    border-radius:3px;overflow:hidden}
  #gutBar{height:100%;width:100%;background:linear-gradient(90deg,#ff8f76,#c81a08);
    box-shadow:0 0 14px #ff3b1c;transition:none}
  #gutSecs{margin-top:7px;font-size:26px;letter-spacing:.1em;color:#ffd9cf;
    text-shadow:0 0 20px #a01200;font-variant-numeric:tabular-nums}
  #gutHud.panic #gutSecs{color:#fff;animation:panic .35s infinite}
  @keyframes panic{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
  /* ---------- The chant ---------- */
  #chantHud{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:28;
    display:none;flex-direction:column;align-items:center;gap:7px;width:min(560px,92vw);
    text-align:center;pointer-events:none}
  #chantHud.on{display:flex}
  #chantLine{font-size:12px;letter-spacing:.30em;color:#e8c98a;text-transform:uppercase;
    text-shadow:0 0 16px #7a4c00,0 0 3px #000}
  #chantWords{font-size:13px;letter-spacing:.10em;color:#6d6255;line-height:1.9;
    max-width:520px;word-spacing:3px}
  #chantWords b{color:#ffd98f;text-shadow:0 0 14px #c98a1a;font-weight:600}
  #chantWords i{color:#a89464;font-style:normal}
  #chantMeta{font-size:10px;letter-spacing:.26em;color:#7d746a}
  #chantMeta b{color:#e8c98a}
  #chantType{
    pointer-events:auto;width:min(420px,86vw);padding:10px 14px;background:rgba(255,255,255,.04);
    border:1px solid #4a453d;color:#f0e2c2;font:inherit;font-size:13px;letter-spacing:.10em;
    text-align:center;outline:none;display:none;
  }
  #chantType.on{display:block}
  #chantType:focus{border-color:#c9a24a;background:rgba(200,150,40,.09)}
  #chantType::placeholder{color:#5d564c;letter-spacing:.16em}
  #micDot{width:7px;height:7px;border-radius:50%;background:#4a443c;display:inline-block;
    margin-right:7px;vertical-align:middle}
  #micDot.live{background:#7ee08a;box-shadow:0 0 10px #4ad45f;animation:pulseMic 1.6s infinite}
  #micDot.err{background:#c8503c;box-shadow:0 0 10px #a02a18}
  @keyframes pulseMic{0%,100%{opacity:1}50%{opacity:.35}}

  #pactBtn{
    position:absolute;right:16px;bottom:100px;z-index:29;display:none;pointer-events:auto;
    padding:10px 16px;border:1px solid #6b2018;background:rgba(90,12,8,.28);color:#e0a294;
    font:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  }
  #pactBtn.on{display:block}
  #pactBtn:hover{background:rgba(150,20,12,.42);color:#fff;border-color:#b4291a}
  #pactBtn:disabled{opacity:.35;cursor:not-allowed}

  /* ---------- The bound one ---------- */
  #ghostScreen{background:radial-gradient(ellipse at center,rgba(6,8,12,.93) 0%,rgba(0,0,0,.99) 72%);
    justify-content:flex-start;padding:4vh 24px 28px;overflow-y:auto}
  #ghostScreen h1{color:#cfd8e2;text-shadow:0 0 34px rgba(120,160,200,.5),0 2px 0 #000;
    font-size:clamp(24px,6vw,44px)}
  #ghostSpeech{max-width:620px;font-size:13px;line-height:1.95;color:#9aa4b0;cursor:pointer;
    letter-spacing:.04em;white-space:pre-wrap;text-align:left;margin:8px 0 2px}
  #ghostSpeech .em{color:#e6d3a6}
  #ghostSpeech .cur{color:#cfd8e2}
  #ghostChoices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:16px;
    opacity:0;transition:opacity .8s;flex:none}
  #ghostChoices.on{opacity:1}
  #ghostChoices .btn{margin-top:0;font-size:12px;padding:12px 22px}
  #ghostChoices .btn.holy{border-color:#8a6a22;color:#f0d79a}
  #ghostChoices .btn.holy:hover{background:rgba(210,160,40,.15);border-color:#e0b448;color:#fff}
  #ghostChoices .btn.dark{border-color:#6b2018;color:#e0a294}
  #ghostChoices .btn.dark:hover{background:rgba(150,20,12,.20);border-color:#b4291a;color:#fff}
  #micNote{margin-top:16px;font-size:11px;color:#5f5a51;max-width:520px;line-height:1.8}
  #micNote code{color:#9c927f;background:rgba(255,255,255,.05);padding:1px 6px}

  #mute{position:absolute;left:14px;bottom:14px;z-index:30;opacity:.35;font-size:11px;
    letter-spacing:.2em;background:none;border:1px solid #3b372f;color:#bdb6a9;padding:7px 11px;
    font-family:inherit;cursor:pointer}
  #mute:hover{opacity:.8}

/* ---------- analog swim stick (stomach only) ---------- */
#stick{position:absolute;inset:0;z-index:31;pointer-events:none;display:none}
#stick.on{display:block}
#stickBase{position:absolute;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;
  border:1px solid rgba(255,180,160,.30);background:radial-gradient(circle,rgba(255,120,90,.10),rgba(0,0,0,0) 70%)}
#stickNub{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;
  background:rgba(255,205,190,.30);border:1px solid rgba(255,210,195,.55);
  box-shadow:0 0 22px rgba(255,90,60,.45)}

/* ---------- safe areas / small screens ---------- */
#hud{padding-top:calc(10px + env(safe-area-inset-top));
     padding-left:calc(14px + env(safe-area-inset-left));
     padding-right:calc(14px + env(safe-area-inset-right))}
#gutHud{padding-top:calc(12px + env(safe-area-inset-top))}
#pad{right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}
#mute{left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom))}
#pactBtn{right:calc(16px + env(safe-area-inset-right))}
#chantHud{bottom:calc(20px + env(safe-area-inset-bottom))}
#bestLine{margin-top:14px;font-size:11px;letter-spacing:.26em;color:#6d665c;text-transform:uppercase}
#bestLine b{color:#b9b2a5}

@media (max-width:520px), (max-height:520px){
  .screen{padding:16px}
  .screen p{font-size:12px;line-height:1.65;margin:4px 0}
  .screen .keys{font-size:11px;line-height:1.8;margin:10px 0 2px}
  .btn{padding:11px 22px;font-size:12px}
  #chantWords{font-size:12px;line-height:1.75}
  #chantType{font-size:12px;padding:9px 12px}
  #pad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:5px;opacity:.5}
  #ghostSpeech{font-size:12px;line-height:1.8}
  #pactBtn{bottom:calc(120px + env(safe-area-inset-bottom));font-size:10px;padding:9px 12px}
}
/* landscape phones are short: shrink the title card so the button stays reachable */
@media (max-height:430px){
  .screen h1{font-size:26px;margin-bottom:2px}
  .screen h2{margin-bottom:8px}
  .screen p{font-size:11px;line-height:1.5}
  .screen p:nth-of-type(n+4){display:none}
  .btn{margin-top:12px}
}

/* landscape phones: the pad moves to the right edge, vertically centred, and
   layout() reserves that strip so the maze is never underneath it */
body.landscape-pad #pad{
  top:50%; bottom:auto; transform:translateY(-50%);
  right:calc(14px + env(safe-area-inset-right));
  grid-template-columns:repeat(3,54px); grid-template-rows:repeat(3,54px);
}
body.landscape-pad #pactBtn{
  bottom:auto; top:calc(12px + env(safe-area-inset-top));
  right:calc(196px + env(safe-area-inset-right));
}
/* stays centred: layout() now reserves the side strips for the thumb controls,
   so the panel no longer has to dodge them by hand */
body.landscape-pad #chantHud{ width:min(460px,64vw); left:50% }

/* ---------- title lockup: विश्वास की एक रात ---------- */
.deva{
  font-family:"Noto Sans Devanagari","Nirmala UI","Devanagari Sangam MN","Kohinoor Devanagari",
              "Mangal",system-ui,sans-serif;
  font-size:clamp(15px,3.4vw,22px);
  letter-spacing:.06em;
  color:#c8a24e;
  text-shadow:0 0 22px rgba(190,130,40,.45),0 1px 0 #000;
  margin-bottom:6px;
  opacity:.92;
}
h1.mainTitle{
  font-size:clamp(21px,5.6vw,44px);
  letter-spacing:.16em;
  line-height:1.14;
  max-width:14ch;
  margin-left:auto;margin-right:auto;
}
@media (max-height:430px){
  .deva{font-size:13px;margin-bottom:2px}
  h1.mainTitle{font-size:20px;letter-spacing:.12em;max-width:none}
}

/* ---------- About / Why we built this ---------- */
#aboutScreen{
  justify-content:flex-start;
  padding:max(5vh,26px) 24px calc(34px + env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 0%,rgba(26,20,12,.96) 0%,rgba(0,0,0,.99) 62%);
}
.about{max-width:620px;text-align:left}
.aboutKicker{
  font-size:10px;letter-spacing:.46em;color:#8a6f36;text-transform:uppercase;margin-bottom:10px
}
h1.aboutTitle{
  font-size:clamp(20px,4.4vw,30px);letter-spacing:.06em;line-height:1.3;
  color:#e6dcc6;text-shadow:0 0 30px rgba(170,120,40,.30);
  margin:0 0 22px;font-weight:600;text-transform:none
}
.about p{
  font-size:14px;line-height:1.95;color:#9b9384;margin:0 0 16px;max-width:none;text-align:left
}
.about p b{color:#d9cdb2;font-weight:600}
.about p.em{color:#d6c79f;font-size:15px}
.about p.close{
  color:#cfc4ad;font-size:15px;line-height:1.85;
  border-top:1px solid rgba(180,150,90,.22);padding-top:18px;margin-top:22px
}
.about .nm{color:#e8c98a;letter-spacing:.04em}
.about blockquote{
  margin:20px 0;padding:2px 0 2px 18px;border-left:2px solid #8a6a28;
  color:#e0cfa4;font-size:14px;line-height:2.05;letter-spacing:.02em
}
.about blockquote.verse{border-left-color:#c9a24a;color:#f0dcae}
.about .sig{
  margin-top:26px;font-size:11px;letter-spacing:.30em;color:#7d7161;text-transform:uppercase
}
#aboutBtn{flex:none;margin-bottom:6px}

#aboutLink{
  margin-top:16px;background:none;border:none;color:#6a6459;font:inherit;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;cursor:pointer;padding:8px 4px;
  border-bottom:1px solid rgba(120,110,95,.28);pointer-events:auto
}
#aboutLink:hover{color:#c9a24a;border-bottom-color:rgba(201,162,74,.6)}

@media (max-height:430px){
  .about p{font-size:12px;line-height:1.7;margin-bottom:11px}
  h1.aboutTitle{font-size:19px;margin-bottom:14px}
  .about blockquote{font-size:12px;line-height:1.8;margin:14px 0}
}

/* ==========================================================================
   COVER — the key art carries the title screen
   ========================================================================== */
#titleScreen{padding:0;justify-content:flex-end;background:#000}
#coverArt{position:absolute;inset:0;z-index:0}
/* The art is 2.35:1 — wider than almost any screen. Cropping it to fill would
   throw away Krishna, the maze and the figure, which are the composition. So we
   letterbox it against black (the art's own edges are near-black, so the join is
   invisible) and let the title sit in the dark below it, like a poster. */
#coverArt img{
  width:100%;height:100%;object-fit:contain;object-position:center top;
  display:block;background:#000;
}
@media (orientation:portrait){
  #coverArt img{object-fit:cover;object-position:center top}
}

/* keep the art readable under text without washing it out */
.coverScrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 44%,
                    rgba(0,0,0,.55) 62%,rgba(0,0,0,.9) 78%,#000 92%),
    radial-gradient(ellipse at 50% 30%,rgba(0,0,0,0) 46%,rgba(0,0,0,.42) 100%);
}
.coverContent{
  position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 22px calc(26px + env(safe-area-inset-bottom));
}

/* gold, to answer the art rather than fight it */
#titleScreen h1.mainTitle{
  font-family:"Trajan Pro","Cinzel",Georgia,"Times New Roman",serif;
  font-weight:600;
  font-size:clamp(26px,7vw,62px);
  letter-spacing:.10em;
  line-height:1.08;
  margin:2px 0 10px;
  max-width:none;
  background:linear-gradient(178deg,#fdf0c6 0%,#ecc76d 34%,#c9922f 58%,#8a5c14 78%,#f2d693 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.95)) drop-shadow(0 0 30px rgba(226,163,54,.34));
  text-shadow:none;
}
#titleScreen .deva{
  color:#dcbb70;margin-bottom:2px;
  text-shadow:0 0 24px rgba(0,0,0,.95),0 1px 3px #000;
}
.tagline{
  font-size:clamp(11px,2.5vw,15px);letter-spacing:.30em;text-transform:uppercase;
  color:#cbb995;text-shadow:0 1px 8px #000,0 0 20px rgba(0,0,0,.9);margin-bottom:5px;
}
.subtag{
  font-size:clamp(9px,1.9vw,11px);letter-spacing:.26em;text-transform:uppercase;
  color:#96825f;text-shadow:0 1px 8px #000;margin-bottom:4px;
}
#titleScreen .btn{
  margin-top:18px;background:rgba(10,7,4,.55);border-color:#7a5f2a;color:#f0dfb4;
  backdrop-filter:blur(3px);
}
#titleScreen .btn:hover{background:rgba(150,20,12,.30);border-color:#c9a24a;color:#fff}
.coverLinks{margin-top:14px;display:flex;align-items:center;gap:10px;color:#5f5951}
.coverLinks .sep{opacity:.6}
.coverLinks button{
  background:none;border:none;color:#8a8272;font:inherit;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;padding:6px 2px;
  border-bottom:1px solid rgba(140,130,110,.28);
}
.coverLinks button:hover{color:#e0c88a;border-bottom-color:rgba(224,200,138,.65)}
#titleScreen #bestLine{margin-top:12px;text-shadow:0 1px 6px #000}

@media (max-height:430px){
  #titleScreen h1.mainTitle{font-size:26px;margin-bottom:4px}
  .tagline{font-size:10px;margin-bottom:2px}
  .subtag{display:none}
  #titleScreen .btn{margin-top:10px}
  .coverLinks{margin-top:8px}
}

/* ---------- consent ---------- */
.consent{margin-top:24px;padding-top:18px;border-top:1px solid rgba(180,150,90,.20);text-align:left}
.consent p{font-size:13px;line-height:1.85;color:#8d857a;margin:0 0 12px}
.consent p b{color:#d9cdb2}
.consentBtns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.consentBtns .btn{margin-top:0;padding:10px 20px;font-size:11px}
.consent .privacyLink{font-size:11px;letter-spacing:.16em;color:#7d7161;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(125,113,97,.4)}
.consent .privacyLink:hover{color:#c9a24a;border-bottom-color:rgba(201,162,74,.6)}
.consent .linkish{background:none;border:none;color:#c9a24a;font:inherit;font-size:12px;
  cursor:pointer;text-decoration:underline;padding:0}
.consent.set p{font-size:12px;color:#7d7161}

/* ---------- the chant: beads, hint, and the tap ---------- */
#chantLine b{color:#ffd98f;font-weight:600}
.beadRow{font-size:17px;letter-spacing:.42em;line-height:1.5;color:#5f584c}
.beadRow b{color:#ffd07a;text-shadow:0 0 14px #c98a1a;font-weight:400}
.beadRow i{color:#4a443b;font-style:normal}
.mantraHint{font-size:10px;letter-spacing:.26em;color:#6d6558;text-transform:uppercase;margin-top:3px}

#tapChant{
  pointer-events:auto;margin-top:10px;
  width:118px;height:118px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid #8a6a28;color:#f4e3b6;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,rgba(255,196,96,.20),rgba(60,38,6,.42) 68%,rgba(0,0,0,.5));
  box-shadow:0 0 26px rgba(201,162,74,.22),inset 0 0 22px rgba(255,190,90,.12);
  transition:transform .06s ease-out, box-shadow .12s;
  -webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;
}
#tapChant:active{
  transform:scale(.93);
  box-shadow:0 0 46px rgba(255,200,110,.55),inset 0 0 30px rgba(255,205,120,.3);
  border-color:#e6c072;
}
.tapDeva{
  font-family:"Noto Sans Devanagari","Nirmala UI","Devanagari Sangam MN","Kohinoor Devanagari",system-ui,sans-serif;
  font-size:26px;line-height:1;color:#ffdc9a;text-shadow:0 0 18px rgba(201,140,26,.7)
}
.tapSub{font-size:8px;letter-spacing:.2em;color:#a9946a}

@media (max-width:520px), (max-height:520px){
  #tapChant{width:104px;height:104px}
  .tapDeva{font-size:23px}
  .beadRow{font-size:15px;letter-spacing:.34em}
}

/* ---------- chant layout: left thumb chants, right thumb walks ---------- */
#tapChant{
  position:absolute;z-index:30;display:none;margin-top:0;
  left:calc(16px + env(safe-area-inset-left));
  bottom:calc(16px + env(safe-area-inset-bottom));
}
body.chanting #tapChant{display:flex}

/* the panel sits clear above the controls; layout() measures it and shrinks
   the maze to match, so the two can never overlap */
body.touch.chanting #chantHud{bottom:calc(232px + env(safe-area-inset-bottom))}
body.touch.chanting:not(.landscape-pad) #mute{
  left:calc(14px + env(safe-area-inset-left));
  top:calc(36px + env(safe-area-inset-top));
  bottom:auto;font-size:9px;padding:5px 9px;opacity:.3;
}
/* the bargain stacks above the bead on the left, clear of the storm HUD */
body.touch.chanting #pactBtn{
  top:auto;right:auto;
  left:calc(16px + env(safe-area-inset-left));
  bottom:calc(134px + env(safe-area-inset-bottom));
  font-size:8px;padding:7px 8px;letter-spacing:.12em;
  max-width:112px;line-height:1.45;text-align:left;
}
body.landscape-pad.chanting #tapChant{
  left:calc(16px + env(safe-area-inset-left));
  bottom:50%;transform:translateY(50%);
}
body.landscape-pad.chanting #chantHud{
  bottom:calc(12px + env(safe-area-inset-bottom));
  width:min(420px,56vw);
}
body.landscape-pad.chanting #pactBtn{
  left:calc(16px + env(safe-area-inset-left));right:auto;
  top:auto;bottom:calc(54px + env(safe-area-inset-bottom));
}

/* On a phone the tap bead is the natural way to chant, and opening the keyboard
   covers the maze — so the text box hides behind a link rather than taking up
   permanent room that the maze needs. */
body.touch #chantType{display:none}
body.touch.typing #chantType{display:block}
body.touch .mantraHint{display:none}
body.touch #chantLine{font-size:11px;letter-spacing:.20em}
body.touch #chantMeta{font-size:9px;letter-spacing:.18em}
#typeToggle{
  background:none;border:none;color:#8a8272;font:inherit;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;padding:2px 4px;pointer-events:auto;
  border-bottom:1px solid rgba(140,130,110,.3);margin-left:8px;
}
#typeToggle:hover{color:#e0c88a}
body:not(.touch) #typeToggle{display:none}
body.touch.chanting #toast{top:38px;bottom:auto}

/* ---------- inside the stomach, grid controls only get in the way ---------- */
body.swallowed #pad,
body.swallowed #mute,
body.swallowed #pactBtn{display:none}

/* ---------- iOS install tip ---------- */
#installTip{
  margin-top:12px;font-size:11px;letter-spacing:.06em;color:#8a8272;
  background:rgba(255,255,255,.045);border:1px solid rgba(140,130,110,.28);
  border-radius:8px;padding:9px 30px 9px 12px;position:relative;max-width:300px;
  pointer-events:auto;line-height:1.6;
}
#installTip b{color:#e0c88a;font-weight:600}
#installTipX{
  position:absolute;right:4px;top:2px;background:none;border:none;color:#8a8272;
  font-size:17px;line-height:1;cursor:pointer;padding:4px 8px;
}
#installTipX:hover{color:#e0c88a}


/* Short phones: shrink the thumb pad so the maze keeps as much height as it can.
   The whole game depends on seeing the entire maze in one flash. */
@media (max-height:700px){
  #pad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}
  #tapChant{width:92px;height:92px}
  .tapDeva{font-size:21px}
}
@media (max-height:600px){
  #pad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:4px}
}

/* ---------- colophon: build number and copyright ---------- */
/* Anchored to the very bottom rather than sitting in the flow: in the flow it
   pushes the whole lockup upward and the title ends up printed over the art. */
#colophon{
  position:absolute;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));
  font-size:9px;letter-spacing:.14em;color:#544f47;
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  text-shadow:0 1px 4px #000;pointer-events:none;padding:0 12px;
}
#colophon .sep{opacity:.5}
#buildStamp{font-variant-numeric:tabular-nums;color:#6a6459}
/* a playtest build collects by default — it must never read as a shipping one */
#buildStamp.testing,#buildStampAbout.testing{color:#d08a6a}
.consent.testing{border-top-color:rgba(208,138,106,.34)}
.consent.testing p{color:#a08a7c}
.consent.testing p b{color:#e2a98c}
.coverLink{
  background:none;border:none;color:#8a8272;font:inherit;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;cursor:pointer;padding:6px 2px;text-decoration:none;
  border-bottom:1px solid rgba(140,130,110,.28);
}
.coverLink:hover{color:#e0c88a;border-bottom-color:rgba(224,200,138,.65)}
.aboutColophon{
  margin-top:22px;padding-top:14px;border-top:1px solid rgba(180,150,90,.14);
  font-size:10px;letter-spacing:.12em;color:#5f5a51;line-height:1.9;
}
@media (max-height:430px){ #colophon{display:none} }


/* Short phone screens: tighten the cover so the title never rides up onto the
   artwork. Browser chrome can leave as little as 600px of height. */
@media (max-height:700px) and (orientation:portrait){
  #titleScreen h1.mainTitle{font-size:clamp(20px,6.6vw,30px);letter-spacing:.10em;margin-bottom:5px}
  #titleScreen .deva{font-size:13px;margin-bottom:0}
  .tagline{font-size:10px;letter-spacing:.22em;margin-bottom:2px}
  .subtag{font-size:8px;letter-spacing:.18em}
  #titleScreen .btn{margin-top:12px;padding:11px 26px}
  .coverLinks{margin-top:10px;gap:6px}
  .coverLinks button,.coverLink{font-size:9px;letter-spacing:.14em;padding:4px 2px}
  .coverContent{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
}


/* Link labels shorten rather than wrap — wrapped links collided with the
   copyright line underneath them. */
.lbl-short{display:none}
@media (max-width:430px), (max-height:700px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .coverContent{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
}