/* ============================================================================
   CULTURE CAVE - CAVE MODE
   A third state beside light and dark: the lights go out and you get a torch.
   Nothing is hidden, it is just dark, and you have to look for things.

   The darkness is ONE element carrying a radial gradient with a hole in the
   middle, sized far larger than any viewport and moved by transform alone, so
   following the pointer costs a composite and never a repaint.
   ========================================================================== */

/* ------------------------------------------------------- the mode switches */
/* The switch is styled on its own class, NOT scoped to .modeset: the desktop
   copy lives in .top .icons instead, and scoping it to the group is what made
   that one collapse to 12x2px with no sizing at all. */
.mbtn,.top .icons .mbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;min-width:38px;width:auto;padding:0 10px;border-radius:11px;cursor:pointer;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  border:1px solid var(--line);color:var(--ink);flex:none;line-height:1;
  transition:background var(--t-2) var(--e-out),border-color var(--t-2) var(--e-out),
             color var(--t-2) var(--e-out),transform var(--t-2) var(--e-out)}
.mbtn svg,.top .icons .mbtn svg{width:19px;height:19px;min-width:19px;flex:none;display:block}
.mbtn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--line) 40%,rgb(var(--glow-m)))}
.mbtn:active{transform:translateY(0)}
.mbtn b{font-family:var(--mono);font-size:10.4px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.modeset{display:none;align-items:center;gap:6px}
@media(max-width:960px){.modeset{display:flex}}
/* on desktop the cave switch sits with the other icons, beside the lantern */
.top .icons .mbtn.cavebtn{display:inline-flex}
@media(max-width:960px){.top .icons .mbtn.cavebtn{display:none}}

/* lit, because it is the way back out */
.mbtn.cavebtn.on{background:linear-gradient(120deg,rgba(255,176,74,.24),rgba(255,120,40,.18));
  border-color:rgba(255,186,96,.62);color:#FFE3BC;
  box-shadow:0 0 0 3px rgba(255,170,70,.10),0 0 18px rgba(255,160,60,.42)}

/* ------------------------------------------------------------- the dark */
html[data-mode="cave"]{--cave-on:1}
.torch{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9990;
  pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity var(--t-4) var(--e-out),visibility 0s linear var(--t-4)}
html[data-mode="cave"] .torch{opacity:1;visibility:visible;transition-delay:0s}

/* the darkness, with the beam cut out of it */
.torch .dk{position:absolute;left:0;top:0;width:4200px;height:4200px;
  margin:-2100px 0 0 -2100px;will-change:transform;
  background:radial-gradient(circle 2100px at 2100px 2100px,
    rgba(2,1,6,0) 0,
    rgba(2,1,6,0) var(--tr,120px),
    rgba(2,1,6,.30) calc(var(--tr,120px) * 1.30),
    rgba(2,1,6,.72) calc(var(--tr,120px) * 1.85),
    rgba(2,1,6,.93) calc(var(--tr,120px) * 2.5),
    #020106 calc(var(--tr,120px) * 3.4))}

/* the warm light the torch actually throws */
.torch .lt{position:absolute;left:0;top:0;width:1400px;height:1400px;
  margin:-700px 0 0 -700px;will-change:transform;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(circle 700px at 700px 700px,
    rgba(255,214,150,.30) 0,
    rgba(255,196,120,.16) calc(var(--tr,120px) * .7),
    rgba(255,170,90,.06) calc(var(--tr,120px) * 1.5),
    transparent calc(var(--tr,120px) * 2.4))}

/* the rim of the beam, so it reads as a torch and not a spotlight */
.torch .rim{position:absolute;left:0;top:0;width:600px;height:600px;
  margin:-300px 0 0 -300px;will-change:transform;pointer-events:none;
  border-radius:50%;
  box-shadow:inset 0 0 60px 10px rgba(255,190,110,.10)}

@media (prefers-reduced-motion:no-preference){
  html[data-mode="cave"] .torch .lt{animation:torch-flicker 4.2s ease-in-out infinite}
}
@keyframes torch-flicker{
  0%,100%{opacity:.5}
  38%{opacity:.44}
  62%{opacity:.56}
}

/* a hint the first time, and only the first time */
.torch-hint{position:fixed;left:50%;bottom:clamp(22px,6vh,54px);transform:translateX(-50%);
  z-index:9992;pointer-events:none;font-family:var(--mono);font-size:11.6px;
  letter-spacing:.16em;text-transform:uppercase;color:#FFDCAE;
  background:rgba(8,4,2,.86);border:1px solid rgba(255,178,92,.45);
  border-radius:999px;padding:10px 18px;box-shadow:0 10px 30px rgba(0,0,0,.7);
  opacity:0;transition:opacity var(--t-4) var(--e-out)}
.torch-hint.on{opacity:1}

/* THE WAY OUT.
   The header builds its own stacking context, so a z-index on a button inside
   it can never rise above the overlay: it is trapped at the header's level.
   The exit is therefore its own fixed control, a lit torch switch that sits
   above the dark and is always reachable on any page, at any size. */
.torch-exit{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);
  right:calc(env(safe-area-inset-right,0px) + 14px);
  z-index:9996;display:none;align-items:center;gap:8px;height:42px;padding:0 14px;
  border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:10.6px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFE7C4;
  background:linear-gradient(120deg,rgba(46,22,4,.94),rgba(24,11,2,.94));
  border:1px solid rgba(255,186,96,.6);
  box-shadow:0 0 0 4px rgba(255,170,70,.10),0 0 30px rgba(255,158,58,.55),
             0 8px 26px rgba(0,0,0,.7);
  transition:transform var(--t-2) var(--e-out),box-shadow var(--t-2) var(--e-out)}
.torch-exit svg{width:19px;height:19px;flex:none}
.torch-exit:hover{transform:translateY(-1px);
  box-shadow:0 0 0 5px rgba(255,170,70,.14),0 0 38px rgba(255,158,58,.7),0 8px 26px rgba(0,0,0,.7)}
html[data-mode="cave"] .torch-exit{display:inline-flex}
@media(max-width:560px){.torch-exit{height:38px;padding:0 12px;font-size:9.8px}}

html[data-mode="cave"] .mbtn.cavebtn{
  box-shadow:0 0 0 3px rgba(255,170,70,.14),0 0 26px rgba(255,160,60,.6)}

/* in the dark the page's own glow furniture is a distraction */
html[data-mode="cave"] .cave-still .mote,
html[data-mode="cave"] .mote,html[data-mode="cave"] .star,html[data-mode="cave"] .spark{
  animation-play-state:paused}

/* ------------------------------------------------------------ the three-way switch
   Icon only. A round torch button, because a pill with words in it reads as a
   setting and this is meant to read as a light you can pick up. The name lives in
   the accessible label and the tooltip, not on screen.
   It has to clear TWO things already anchored down there: the rope rail on the
   right edge (cave-descent.css, 44px wide, inset by clamp(4px,2.2vw,30px)) and the
   stalk handle in the middle (cave-stalk.css). On a phone there is no room beside
   the stalk pill, so it steps up above it instead. */
.modecycle{position:fixed;z-index:9997;
  bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  right:calc(env(safe-area-inset-right,0px) + clamp(4px,2.2vw,30px) + 58px);
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border-radius:999px;cursor:pointer;
  color:var(--uv-ice,#7FEBFF);
  background:rgba(8,4,18,.9);
  border:1px solid rgba(var(--glow-v),.5);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.16),
             0 10px 34px -10px rgba(var(--glow-v),.8),
             0 22px 50px -26px #000,
             inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,
             color .22s ease,border-color .22s ease,background .22s ease}
.modecycle svg{width:21px;height:21px;flex:none}
.modecycle:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(var(--glow-v),.24),
             0 14px 40px -10px rgba(var(--glow-v),.9),
             0 22px 50px -26px #000,
             inset 0 1px 0 rgba(255,255,255,.10)}
.modecycle:active{transform:translateY(0) scale(.96)}
.modecycle:focus-visible{outline:2px solid var(--uv-ice,#7FEBFF);outline-offset:3px}

/* LIT: the torch is actually burning, so the button is too */
.modecycle.on{color:#FFE7C4;
  background:linear-gradient(120deg,rgba(46,22,4,.94),rgba(24,11,2,.94));
  border-color:rgba(255,186,96,.6);
  box-shadow:0 0 0 4px rgba(255,170,70,.10),0 0 30px rgba(255,158,58,.55),
             0 8px 26px rgba(0,0,0,.7)}
.modecycle.on:hover{box-shadow:0 0 0 5px rgba(255,170,70,.14),
             0 0 38px rgba(255,158,58,.7),0 8px 26px rgba(0,0,0,.7)}

/* DAYLIGHT: a dark disc on a white page is a hole, so invert it there. This is
   the only way light and dark stay tellable apart once the words are gone. */
.modecycle[data-mode-now="light"]{color:#3C2A66;
  background:rgba(255,255,255,.92);
  border-color:rgba(60,42,102,.22);
  box-shadow:0 0 0 1px rgba(60,42,102,.06),
             0 10px 30px -12px rgba(60,42,102,.55),
             0 18px 44px -26px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.9)}
.modecycle[data-mode-now="light"]:hover{
  box-shadow:0 0 0 1px rgba(60,42,102,.10),
             0 14px 36px -12px rgba(60,42,102,.6),
             0 18px 44px -26px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.9)}

/* the separate top-right escape hatch is redundant now the switch never leaves */
html[data-mode="cave"] .torch-exit{display:none}

@media(max-width:900px){
  .modecycle{right:calc(env(safe-area-inset-right,0px) + 26px)}
}
/* phones: sit ABOVE the stalk handle, which owns the bottom centre */
@media(max-width:620px){
  .modecycle{width:44px;height:44px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}
  .modecycle svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
  .modecycle{transition:none}
  .modecycle:hover{transform:none}
}