/* What the app adds on top of the website's stylesheet. */

/* phones with a notch or home indicator: keep the header and keypad clear */
#mast{padding-top:calc(11px + env(safe-area-inset-top))}
.shell{padding-bottom:env(safe-area-inset-bottom);border-left:none;border-right:none}
.modal .sheet{margin-top:env(safe-area-inset-top)}
html,body{overscroll-behavior:none}
button,.slot,.key{-webkit-user-select:none;user-select:none}
.txt{-webkit-touch-callout:none}

#casesBtn{--ic:var(--mint)}

/* the case pill sits where the website's countdown does, and looks the same */
#cPick{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  border:1px solid var(--tintEdge);border-radius:999px;padding:4px 10px 4px 9px;
  background:var(--tintSoft);color:var(--dim);font:inherit;letter-spacing:inherit;
}
#cPick svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#solvedCount{font-variant-numeric:tabular-nums;letter-spacing:.06em;font-size:12.5px;font-weight:600;color:var(--ink)}
#cPick .car{color:var(--faint);font-size:9px}

.modeBtn.complete b::after{content:" \2713";color:var(--mint)}

/* ---------- case picker ---------- */
.pickSum{text-align:center;font-size:12px;letter-spacing:.06em;color:var(--dim)}
#cList{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.cChip{
  aspect-ratio:1/1;border:1px solid var(--edge);border-radius:4px;background:var(--ground);
  font-family:var(--mono);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.cChip.won{border-color:color-mix(in srgb,var(--mint) 45%,transparent);color:var(--mint)}
.cChip.lost{border-color:color-mix(in srgb,var(--coral) 40%,transparent);color:var(--coral)}
.cChip.on{border-color:var(--accent);color:var(--ink);background:var(--tint);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--accent)}
.cChip.next{border-style:dashed;border-color:var(--accent);color:var(--ink)}
.cChip:disabled{opacity:.28;cursor:default;border-style:dotted}

/* ---------- after a case ---------- */
#after{display:flex;flex-direction:column;gap:8px;max-width:460px;margin:12px auto 0}
#after[hidden]{display:none}
#nextCase{
  width:100%;background:var(--accent);color:var(--onAccent);border:1px solid var(--accent);border-radius:3px;
  padding:14px 0;font-family:var(--cond);font-weight:700;letter-spacing:.09em;font-size:14px;
}
#nextCase[hidden]{display:none}
#replay{
  width:100%;border:1px solid var(--edge);border-radius:3px;background:var(--panel);color:var(--dim);
  padding:11px 0;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:12.5px;
}

/* ---------- add to home screen (web only) ---------- */
#installBar{
  display:flex;align-items:center;gap:10px;padding:9px 12px 9px 16px;
  border-bottom:1px solid var(--edge);background:color-mix(in srgb,var(--mint) 9%,var(--panel));
  font-size:11.5px;line-height:1.45;color:var(--dim);
}
#installBar[hidden]{display:none}
#installBar b{color:var(--ink);font-weight:600}
#installMsg{flex:1}
#installBtn{
  flex:none;background:var(--mint);color:var(--onAccent);border-radius:3px;
  padding:7px 12px;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:12px;
}
#installBtn[hidden]{display:none}
#installX{flex:none;width:28px;height:28px;font-size:18px;color:var(--faint)}

/* ---------- leaderboard, name, contact ---------- */
#boardBtn{
  width:100%;border:1px solid var(--accent);border-radius:3px;background:var(--panel);color:var(--ink);
  padding:12px 0;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:13px;
}
#lbList .lbRow .gs{width:38px;text-align:right}
#nameBox{margin-top:6px}
#helpContact{
  width:100%;border:1px solid var(--edge);border-radius:3px;background:var(--panel);color:var(--dim);
  padding:11px 0;margin-top:8px;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:12.5px;
}
#appFoot{margin-top:26px;padding-bottom:calc(26px + env(safe-area-inset-bottom))}
#appFoot a{
  display:inline-block;margin-left:8px;color:var(--dim);text-decoration:none;
  letter-spacing:.11em;text-transform:uppercase;border-bottom:1px solid var(--edge);
}

/* ---------- ratings & reviews ---------- */
#reviewsBtn{--ic:var(--amber)}
#rvAsk{text-align:center;color:var(--ink);font-size:13.5px;margin:0}
#rvAsk[hidden],#rvLater[hidden]{display:none}
#rvSummary{display:flex;align-items:center;justify-content:center;gap:12px}
#rvSummary b{font-family:var(--cond);font-size:38px;font-weight:700;color:var(--ink);line-height:1}
#rvSummary > span{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--dim);letter-spacing:.05em}
.stars{color:var(--amber);letter-spacing:2px;font-size:14px}
.stars .off{color:var(--edge)}
#rvSpread .bar .lab{width:28px}
#rvStars{display:flex;justify-content:center;gap:6px}
#rvStars button{
  width:46px;height:46px;font-size:30px;line-height:1;color:var(--faint);
  background:transparent;border:none;padding:0;transition:transform .12s;
}
#rvStars button.on{color:var(--amber)}
#rvStars button:active{transform:scale(.9)}
#rvBody{
  width:100%;box-sizing:border-box;resize:vertical;min-height:70px;background:var(--ground);color:var(--ink);
  border:1px solid var(--edge);border-radius:3px;padding:10px;font:inherit;font-size:13px;
}
#rvBody:focus{outline:2px solid var(--accent);outline-offset:-1px}
#rvSend{
  background:var(--amber);color:var(--onAccent);border:1px solid var(--amber);border-radius:3px;
  padding:9px 18px;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:13px;
}
#rvSend[disabled]{background:transparent;color:var(--faint);border-color:var(--edge)}
#rvLater{
  width:100%;border:1px solid var(--edge);border-radius:3px;background:var(--panel);color:var(--dim);
  padding:10px 0;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:12.5px;
}
#rvList{display:flex;flex-direction:column;gap:8px}
.rv{border:1px solid var(--edge);border-radius:4px;padding:10px 12px;background:var(--ground)}
.rv.me{border-color:var(--accent)}
.rv .rvHead{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim)}
.rv .rvHead b{color:var(--ink);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}

/* ---------- opening screen ---------- */
/* Full screen, like a game's title card: the art large in the middle, its
   edges dissolving into a blurred, darkened copy of itself that fills the
   rest of the screen, so there is no box and no bare margin on any phone.
   It drifts slowly while it is up, then pushes forward and dissolves as the
   game rises into place underneath. */
#boot{
  background:#04070a;padding:0;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .7s ease;
}
#boot .glow{
  position:absolute;inset:-60px;background:url(opening.jpg) center/cover no-repeat;
  filter:blur(34px) brightness(.42) saturate(1.35);transform:scale(1.15);
  animation:bootGlow 1.1s ease both;
}
#boot img{
  position:relative;display:block;width:min(100vw,640px);height:auto;max-width:none;max-height:none;
  /* the top and bottom dissolve into the backdrop; the sides only soften,
     so the lettering stays whole on the narrowest phone */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-composite:intersect;
  animation:bootIn 1s cubic-bezier(.2,.7,.2,1) both, bootDrift 6s ease-out both;
}
@keyframes bootIn{from{opacity:0}to{opacity:1}}
@keyframes bootDrift{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes bootOut{to{opacity:0;transform:scale(1.16);filter:blur(7px) brightness(1.35)}}
@keyframes bootFade{to{opacity:0}}
@keyframes bootGlow{from{opacity:0}to{opacity:1}}
#boot.leave{background-color:transparent;pointer-events:none}
#boot.leave .glow{animation:bootFade .8s ease forwards}
#boot.leave img{animation:bootOut .7s cubic-bezier(.45,0,.75,.45) forwards}

/* the game rises into place as the title leaves */
.shell{transition:opacity .75s ease .12s, transform .85s cubic-bezier(.2,.7,.2,1) .12s}
body.booting .shell{opacity:0;transform:translateY(14px) scale(.985)}

@media (prefers-reduced-motion:reduce){
  #boot img,#boot .glow{animation:none}
  #boot.leave img,#boot.leave .glow{animation:bootFade .5s ease forwards}
  .shell,body.booting .shell{transform:none}
}

/* ---------- install screen (arriving from the website's INSTALL) ---------- */
#installScreen{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 30%,#123036 0%,#0b1220 55%,#05080c 100%);
  overflow-y:auto;
}
#installScreen[hidden]{display:none}
.isCard{width:100%;max-width:380px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.isIcon{width:96px;height:96px;border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 40px -6px rgba(46,230,192,.45),0 0 60px -10px rgba(209,77,255,.5)}
.isCard h1{margin:6px 0 0;font-family:var(--cond);font-size:30px;letter-spacing:.06em;color:#fff}
.isSub{margin:0;color:#b9c6d6;font-size:12.5px;letter-spacing:.03em}
#isBody{margin-top:10px;color:var(--ink);font-size:14px;line-height:1.6}
#isBody b{color:#fff}
#isBody ol{text-align:left;margin:4px 0 0;padding-left:22px}
#isBody li{margin:6px 0}
#isBody .shareIc{display:inline-block;width:16px;height:16px;vertical-align:-3px;fill:none;stroke:#5ff0d0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#isGo{
  width:100%;margin-top:6px;border-radius:999px;padding:16px 0;border:none;
  background:linear-gradient(180deg,#5ff0d0,#2ec9a6);color:#062019;
  font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.1em;
  box-shadow:0 0 30px -6px rgba(46,230,192,.7);
}
#isGo[hidden]{display:none}
#isGo:disabled{background:var(--panel);color:var(--dim);box-shadow:none}
#isBar{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
#isBar[hidden]{display:none}
#isBar i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,#2ee6c0,#7a5cff,#d14dff);animation:isSlide 1.4s ease-in-out infinite}
@keyframes isSlide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
#isNote{margin:0;min-height:1.5em;color:#b9c6d6;font-size:12.5px;line-height:1.55}
#isNote.good{color:#5ff0d0}
#isBrowser{margin-top:14px;background:none;border:none;color:var(--faint);font-size:12px;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){#isBar i{animation:none;width:100%}}

/* iPhone / iPad: the steps light up in turn, and an arrow points at Share */
#isBody.ios{width:100%;margin-top:4px}
.iosSteps{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:4px}
.iosStep{
  display:flex;align-items:center;gap:12px;text-align:left;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(10px);
  animation:stIn .55s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--i) * .35s) forwards,
            stGlow 6s ease-in-out calc(1.6s + var(--i) * 2s) infinite;
}
@keyframes stIn{to{opacity:1;transform:none}}
@keyframes stGlow{
  0%,30%,100%{border-color:rgba(255,255,255,.08);box-shadow:none;background:rgba(255,255,255,.04)}
  8%,22%{border-color:rgba(46,230,192,.85);box-shadow:0 0 22px -6px rgba(46,230,192,.8);background:rgba(46,230,192,.08)}
}
.stNum{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--cond);font-weight:700;font-size:12px;color:#062019;background:#5ff0d0}
.stIcon{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:#1c2733;border:1px solid rgba(255,255,255,.1)}
.stIcon .shareIc,.stIc{width:22px;height:22px;fill:none;stroke:#5ff0d0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.stIc.sm{width:16px;height:16px;fill:#5ff0d0;stroke:none;vertical-align:-3px}
.stText{display:flex;flex-direction:column;gap:2px;min-width:0}
.stText b{color:#fff;font-size:14.5px}
.stText small{color:#9fb0c2;font-size:11.5px;line-height:1.4}
.iosWarn{
  text-align:left;padding:11px 12px;border-radius:12px;margin-bottom:10px;font-size:12.5px;line-height:1.5;color:var(--ink);
  background:rgba(244,185,66,.1);border:1px solid rgba(244,185,66,.55);
}
.iosWarn b{color:#F4B942}
#isCopy{display:block;width:100%;margin-top:9px;padding:9px 0;border-radius:999px;border:1px solid rgba(244,185,66,.6);
  background:none;color:#F4B942;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:12.5px}
#isArrow{position:fixed;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#5ff0d0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;z-index:61}
#isArrow i{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:18px solid #5ff0d0;
  filter:drop-shadow(0 0 8px rgba(46,230,192,.8))}
#isArrow.bottom{bottom:calc(6px + env(safe-area-inset-bottom));animation:arDown 1.1s ease-in-out infinite}
#isArrow.top{top:calc(6px + env(safe-area-inset-top));left:auto;right:18px;transform:none;flex-direction:column-reverse;animation:arUp 1.1s ease-in-out infinite}
#isArrow.top i{border-top:none;border-bottom:18px solid #5ff0d0}
@keyframes arDown{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@keyframes arUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.iosStep{animation:none;opacity:1;transform:none}#isArrow{animation:none}}