/* Cave Copter: the screens around the canvas. A deep blue cave home, the flight full screen in play. */
body{background:radial-gradient(ellipse at 50% 30%,#34417A 0%,#1B2340 70%) fixed}

/* home */
.home{align-items:center;justify-content:center;gap:.7em;padding:1.2em;text-align:center}
.home .hero-cv{width:min(24em,88vw);height:min(26vh,10em);display:block;border-radius:1.2em;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.home .title{font-size:clamp(2.5em,11vw,4.6em);font-weight:900;color:#FFE48A;text-shadow:0 3px 0 #C86A10,0 6px 0 rgba(0,0,0,.2),0 10px 24px rgba(0,0,0,.35)}
.tagline{margin:0;color:var(--ink);font-weight:800;font-size:1.15em;max-width:22em}
.pill{min-height:52px;font-family:var(--sans)}
.pill.alt{background:linear-gradient(180deg,#FFFFFF,#E4EAFF 55%,#C3CDF2);box-shadow:0 4px 0 #6E7BB5,0 10px 22px rgba(0,0,0,.3);color:#1B2340;font-size:1em;padding:.55em 1.8em}
.home .links{display:flex;gap:.2em .4em;justify-content:center;flex-wrap:wrap;background:rgba(27,35,64,.8);border:1px solid var(--hair);border-radius:1.2em;padding:.15em .6em}
.home .link{min-height:44px;color:#FFE48A;font-weight:700}
@media (max-height:480px){.home .hero-cv{display:none}.home{gap:.4em}.home .title{font-size:2.5em}.home .tagline{font-size:1em}}
@media (max-height:480px) and (min-width:600px){.home{display:grid;grid-template-columns:auto auto;align-content:center;justify-content:center;column-gap:1em}
  .home .title,.home .tagline,.home .links{grid-column:1/-1}}

/* play: the cave fills the screen, the HUD floats over the roof rock */
#game{background:#1B2340}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:.5em;pointer-events:none;
  padding:max(.5em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .3em max(.6em,env(safe-area-inset-left));z-index:5}
.hud > *{pointer-events:auto}
.hud .jewel{width:52px;height:52px;background:rgba(27,35,64,.9);border-color:rgba(255,255,255,.35);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.level-pill{display:flex;flex-direction:column;align-items:stretch;gap:.25em;background:rgba(27,35,64,.9);border:1px solid var(--hair);border-radius:999px;padding:.35em 1.3em .5em;line-height:1.1;min-width:9em}
.lv-top{display:flex;justify-content:space-between;gap:.7em;align-items:baseline}
.lv-top span{font-weight:800;font-size:.95em;color:var(--ink-soft)}
.lv-top b{font-weight:900;font-size:1.15em;font-variant-numeric:tabular-nums;color:#FFE48A}
.prog{display:block;width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.prog b{display:block;height:100%;width:0;background:linear-gradient(90deg,#2FB57A,#FFC93D)}
.purse{display:flex;align-items:center;gap:.35em;background:rgba(27,35,64,.9);border:1px solid var(--hair);border-radius:999px;padding:.45em .9em;font-weight:900;font-size:1.1em;min-height:48px}
.star{width:1.1em;height:1.1em;background:#FFC93D;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star.pop{animation:pop .35s}
@keyframes pop{40%{transform:scale(1.5) rotate(20deg)}}
.hearts{display:inline-flex;gap:.1em;margin-left:.35em}
.hearts svg{width:1.05em;height:1.05em;fill:#FF5C7A;stroke:#fff;stroke-width:1.5}
.hearts svg.lost{fill:rgba(255,255,255,.18);stroke:rgba(255,255,255,.4)}
.hearts.ouch{animation:ouch .45s}
@keyframes ouch{20%{transform:scale(1.35) rotate(-6deg)}50%{transform:scale(.9) rotate(5deg)}}
.tip{position:absolute;left:0;right:0;top:58%;width:fit-content;margin:0 auto;background:rgba(27,35,64,.92);border:2px solid #FFE48A;color:#fff;font-weight:900;
  font-size:1.3em;padding:.55em 1.3em;border-radius:999px;white-space:nowrap;max-width:calc(100% - 1.5em);overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:4;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (max-height:480px){.hud{padding-top:.35em}.level-pill{padding:.25em 1em .4em}.hud .jewel{width:46px;height:46px}.tip{font-size:1.05em;top:62%}.purse{min-height:44px;padding:.3em .8em}}
@media (max-width:420px){.level-pill{min-width:0;padding:.3em .9em .45em}.purse{padding:.4em .7em}.lv-top span{font-size:.8em}}

/* cards */
.how p{text-align:left;margin:.45em 0;color:var(--ink)}
.how b{color:#FFE48A}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:.4em;max-height:50vh;overflow:auto;padding:.2em}
.grid .choice{min-height:48px;font-weight:800}
.grid .choice.done{background:#1E8A5A;border-color:#2FB57A}
.grid .choice.next{border:2px solid #FFC93D}
.grid .choice:disabled{opacity:.4}
.card .sub{font-size:.85em;letter-spacing:.08em;text-transform:uppercase;color:#FFE48A!important;font-weight:800;text-align:center;margin:.2em 0}
.win-line{font-size:1.25em;color:var(--ink)!important;font-weight:800;text-align:center;margin:.3em 0}
.card p{text-align:center}
.card h2{font-style:normal;font-weight:900}
body:has(> .veil) .toast{display:none}
@media (max-height:480px){.card .sub,.card p{margin:.15em 0}.win-line{font-size:1.1em}}
.card{background:#26305A;border-color:rgba(255,228,138,.35)}