/* ==========================================================================
   overlays.css - everything that sits on top of the game.

   The one dialog, the toast, the full-screen celebration, the coach mark,
   and the glass treatment that lets the sky read through every panel.
   ========================================================================== */

/* ============================================================ the modal system
   Every native prompt() and confirm() is gone. Those dialogs say "web page" in
   the system font of whatever browser you happen to be holding. */
#modal{position:fixed; inset:0; z-index:150; display:none; align-items:flex-end;
  justify-content:center; background:rgba(4,7,12,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
#modal.on{display:flex; animation:fadein .18s ease-out both}
#modal .mw{width:100%; max-width:560px; background:var(--card); color:var(--cardInk);
  border:2px solid var(--edge); border-bottom:0; border-radius:26px 26px 0 0;
  padding:12px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 20px); overflow-y:auto; overscroll-behavior:contain;
  animation:sheetup .32s var(--pop) both}
@keyframes sheetup{from{transform:translateY(36px); opacity:0}}
#modal .grab{width:38px; height:5px; border-radius:3px; background:var(--cardLine2);
  margin:6px auto 14px}
#modal h3{font-size:20px; margin-bottom:4px}
#modal .say{color:var(--ink2); font-size:14px; margin:6px 0 14px}
#modal label{display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:12px 0 6px}
#modal .opts{display:grid; gap:8px; margin:12px 0}
#modal .opts button{width:100%; text-align:left; padding:14px 15px; min-height:52px}
#modal .pre{font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:800;
  text-align:center; padding:10px 0 2px; color:var(--gold2)}

/* ==================================================================== toast */
#toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:160; max-width:82vw; padding:12px 18px;
  border-radius:16px; background:var(--card); color:var(--cardInk);
  border:2px solid var(--edge); box-shadow:0 2px 0 var(--edge);
  font-size:14px; font-weight:700; text-align:center; opacity:0; pointer-events:none}
#toast.on{animation:toast 2.9s ease-out both}
#toast.gold{background:var(--gold); color:var(--goldInk)}
@keyframes toastrm{0%,80%{opacity:1; transform:translateX(-50%)} 100%{opacity:0; transform:translateX(-50%)}}
@keyframes toast{0%{opacity:0; transform:translateX(-50%) translateY(20px)}
  10%,80%{opacity:1; transform:translateX(-50%) translateY(0)}
  100%{opacity:0; transform:translateX(-50%) translateY(-8px)}}

/* ================================================== the full-screen celebration
   The third pillar landing is the single most important moment in the app. It
   used to be a re-render and a toast. */
#fx{position:fixed; inset:0; z-index:140; pointer-events:none; display:none}
#fx.on{display:block}
#fx .flash{position:absolute; inset:0; background:radial-gradient(60% 45% at 50% 42%,
  rgba(255,227,138,.5),transparent 70%); animation:flash .8s ease-out forwards}
@keyframes flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#fx .conf{position:absolute; top:-14px; width:8px; height:13px; border-radius:2px;
  animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(0) rotate(0); opacity:1}
  100%{transform:translateY(102vh) rotate(var(--spin)); opacity:.9}}
#fx .ann{position:absolute; left:0; right:0; top:34%; text-align:center; padding:0 24px; isolation:isolate}
#fx .ann::before{content:""; position:absolute; inset:-56px -10px; z-index:-1;
  background:radial-gradient(58% 100% at 50% 50%,
    color-mix(in srgb,var(--bg) 94%,transparent),
    color-mix(in srgb,var(--bg) 66%,transparent) 52%, transparent 76%)}
#fx .ann b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(30px,10vw,44px); letter-spacing:-.04em; color:var(--gold2);
  text-shadow:0 4px 24px rgba(242,183,53,.5); animation:annin .6s var(--pop) both}
#fx .ann span{display:block; margin-top:8px; font-size:15px; color:var(--ink);
  animation:annin .6s var(--pop) both .1s}
@keyframes annin{from{opacity:0; transform:scale(.65) translateY(14px)}to{opacity:1; transform:none}}
/* A number that flies from where it was earned to the HUD chip that holds it. */
.fly{position:fixed; z-index:145; pointer-events:none; font-family:"JetBrains Mono",monospace;
  font-weight:800; font-size:17px; color:var(--gold2); text-shadow:0 2px 10px rgba(0,0,0,.6);
  transition:transform .72s cubic-bezier(.4,0,.25,1), opacity .72s ease}

/* ================================================================ reduced motion
   Off, not slower. Everything stays legible and every card is face up. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  /* the toast keyframe ends at opacity 0 and a .001ms animation lands there
     instantly - so under reduced motion the toast was never seen at all */
  #toast.on{animation:toastrm 2.9s linear both !important}
  .tc-i{transition:none !important}
  #fx{display:none !important}
}

/* =================================================================== the coach
   A reduced screen is not a tutorial. This points at the thing, says one
   sentence on its own ground, and will not advance until it is pressed.

   The hole is a rectangle cut with a 9999px spread shadow rather than a masked
   circle: it matches the shape of what it is pointing at, it cannot spill off
   the edge of the screen, and hit-testing stays simple because the dimming
   element never receives the tap. */
#coach{position:fixed; inset:0; z-index:170; display:none}
#coach.on{display:block}
#coach .catch{position:absolute; inset:0}
/* Shadow order is paint order: the 9999px veil has to be listed LAST or it
   paints over its own ring and the highlight comes out muddy. */
#coach .spot{position:absolute; border-radius:24px; pointer-events:none;
  box-shadow:0 0 0 4px var(--gold),
    0 0 0 7px rgba(42,33,72,.9),
    0 0 0 9999px rgba(24,18,52,.82);
  animation:spot .38s var(--pop) both}
@keyframes spot{from{opacity:0; transform:scale(.9)}to{opacity:1; transform:none}}
#coach .say{position:absolute; left:16px; right:16px; pointer-events:none;
  background:var(--card); color:var(--cardInk);
  border:2px solid var(--edge); border-radius:22px; padding:20px 20px 18px;
  box-shadow:0 2px 0 var(--edge);
  animation:coachin .42s var(--pop) both .12s}
#coach .say b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:23px; letter-spacing:-.03em; text-wrap:balance}
#coach .say span{display:block; margin-top:7px; font-size:14px; color:var(--ink2);
  line-height:1.5; text-wrap:balance}
#coach .say i{display:block; margin-top:15px; font-family:"JetBrains Mono",monospace;
  font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#B07600; font-style:normal; animation:gatepulse 2s ease-in-out infinite}
#coach .say .pips{display:flex; gap:6px; margin-top:16px; font-style:normal}
#coach .say .pips i{display:block; width:6px; height:6px; border-radius:50%; margin:0;
  background:var(--line2); animation:none}
#coach .say .pips i.on{background:var(--gold);
  box-shadow:0 0 0 2px #C98F17}
#coach .say .pips + i{margin-top:11px}
@keyframes coachin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
#coach .skip{position:absolute; left:0; right:0; bottom:calc(84px + env(safe-area-inset-bottom));
  text-align:center}
#coach .skip button{background:none; border:0; color:#CFC8E8; font:inherit; font-size:13px;
  padding:12px 18px; min-height:44px; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){ #coach .say i{animation:none !important} }

/* =========================================================== the chip moment
   The AA medallion, taken seriously: a dark room, one coin, his own named
   reward, and a single way out. Bigger than a pack on purpose - packs happen
   daily, this happens six times a year at best. Confetti rides above it. */
#chip{position:fixed; inset:0; z-index:170; display:none; align-items:center;
  justify-content:center; padding:24px calc(24px + env(safe-area-inset-right))
  calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  background:radial-gradient(85% 60% at 50% 38%, #2B2415, #171310 74%)}
#chip.on{display:flex; animation:fadein .3s ease-out both}
.chipw{text-align:center; color:#FBF8F0; max-width:330px}
.chipw .chipk{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:#D8B24A}
.chipw .medal.big{width:172px; height:172px; margin:20px auto 8px; display:block;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.5));
  animation:medalin .7s var(--pop) both .12s}
@keyframes medalin{from{transform:scale(.4) rotate(-14deg); opacity:0}
  62%{transform:scale(1.07) rotate(3deg)}to{transform:scale(1) rotate(0); opacity:1}}
.chipw h2{font-family:"Nunito",sans-serif; font-weight:900; font-size:31px;
  line-height:1.08; letter-spacing:-.01em; margin:10px 0 9px; color:#FBF8F0;
  text-transform:none}
.chipw p{font-family:"Nunito",sans-serif; font-weight:700; font-size:14.5px;
  line-height:1.5; color:rgba(251,248,240,.82); margin:0 0 24px; text-wrap:balance}
.chipw .btn.pri{min-width:210px}
@media (prefers-reduced-motion:reduce){
  #chip.on{animation:none}
  .chipw .medal.big{animation:none}
}

/* ------------------------------------------------------- logging a lift
   This was one text input asking for "14 x 8,8,7" while presenting a decimal
   keypad, which has no x, no comma and no space on it - the app asked for a
   format its own keyboard could not produce. It is dials now: nothing to type
   while standing at a machine, and the target is already dialled in, so the
   usual case is one tap on Log it. */
#modal .lf{margin:2px 0 4px}
#modal .lf label{margin-top:14px}
.lfr{display:grid; grid-template-columns:auto 54px 1fr 54px; align-items:center;
  gap:10px; margin:8px 0}
.lfl{font-size:14px; font-weight:800; color:var(--ink2); min-width:44px}
.lfb{width:54px; height:52px; border-radius:16px; font:inherit; font-size:26px;
  font-weight:800; line-height:1; cursor:pointer; color:var(--ink);
  background:var(--card2); border:2px solid var(--edge); border-bottom-width:4px;
  display:flex; align-items:center; justify-content:center}
.lfb:active{transform:translateY(2px); border-bottom-width:2px; background:var(--sunk)}
.lfv{text-align:center; font-family:"Nunito",sans-serif; font-size:30px; font-weight:800;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink)}
.lfv i{font-style:normal; font-size:.5em; font-weight:800; color:var(--ink3); margin-left:3px}

/* ------------------------------------------------------------- the rest bar
   Above the nav, outliving the sheet that started it. Resting is precisely
   when the phone goes back in a pocket, so the clock has to be somewhere he
   can find it without remembering which exercise he tapped. */
#rest{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom)); z-index:158;
  display:none; align-items:center; gap:13px; padding:9px 9px 9px 17px;
  border-radius:999px; background:var(--card); color:var(--ink);
  border:2px solid var(--blue); border-bottom-width:4px;
  box-shadow:0 10px 24px -12px rgba(15,130,200,.85)}
#rest.on{display:flex; animation:restin .3s var(--pop) both}
@keyframes restin{from{opacity:0; transform:translateX(-50%) translateY(10px)}}
#rest .rb-l{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3)}
#rest .rb-n{font-size:23px; font-weight:800; letter-spacing:-.02em; color:#0B72BD;
  font-variant-numeric:tabular-nums; min-width:56px; text-align:center}
#rest .rb-x{padding:8px 15px; min-height:38px; border-radius:999px; font:inherit;
  font-size:12.5px; font-weight:800; cursor:pointer; color:var(--ink2);
  background:var(--card2); border:1.5px solid var(--edge); border-bottom-width:3px}
#rest .rb-x:active{transform:translateY(1px); border-bottom-width:2px}
#rest.soon{border-color:var(--flame); box-shadow:0 10px 24px -12px rgba(224,126,0,.9)}
#rest.soon .rb-n{color:var(--flameEdge); animation:restpulse .9s ease-in-out infinite}
@keyframes restpulse{0%,100%{opacity:1} 50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  #rest.on{animation:none} #rest.soon .rb-n{animation:none}
}

/* adding a set, and the rest button inside the lift sheet */
.lfset{display:flex; gap:9px; margin:10px 0 2px}
.lfset button{flex:1; min-height:46px; border-radius:15px; font:inherit; font-size:13.5px;
  font-weight:800; cursor:pointer; color:var(--ink2);
  background:var(--card2); border:2px solid var(--edge); border-bottom-width:4px}
.lfset button:active{transform:translateY(2px); border-bottom-width:2px}
.lfrest{width:100%; min-height:54px; border-radius:17px; font:inherit; font-size:15px;
  font-weight:800; cursor:pointer; color:#0B72BD;
  background:var(--blueSoft); border:2px solid var(--blue); border-bottom-width:4px}
.lfrest:active{transform:translateY(2px); border-bottom-width:2px}
.lfrest.going{background:var(--flameSoft); border-color:var(--flame); color:#A85F0E}