/* Desert Runner: the screens around the canvas. A warm desert home, the run full screen in play. */
body{background:linear-gradient(180deg,#7EC8F0 0%,#FFE3B0 46%,#F5D9A0 46.2%,#E9BE7A 100%) fixed}

/* home */
.home{align-items:center;justify-content:center;gap:.7em;padding:1.2em;text-align:center}
.home .hero{width:min(24em,88vw);height:min(24vh,9em);display:block;touch-action:manipulation;border-radius:1.2em;box-shadow:0 8px 24px rgba(80,40,10,.25)}
.home .title{font-size:clamp(2.5em,11vw,4.6em);color:#fff;text-shadow:0 3px 0 #C25A1A,0 6px 0 rgba(0,0,0,.15),0 10px 24px rgba(0,0,0,.25)}
.tagline{margin:0;color:#4A2A1E;font-weight:800;font-size:1.15em;max-width:22em}
.pill.alt{background:linear-gradient(180deg,#FFFFFF,#FFF2DC 55%,#F3D2A6);box-shadow:0 4px 0 #B07A48,0 10px 22px rgba(0,0,0,.25);color:#4A2A1E;font-size:1em;padding:.55em 1.8em}
.home .links{display:flex;gap:.2em .4em;justify-content:center;flex-wrap:wrap;background:rgba(74,42,30,.86);border-radius:1.2em;padding:.15em .6em}
@media (max-height:480px){.home .hero{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 desert fills the screen, the HUD floats over the sky, the pads over the sand */
#game{background:#F5D9A0}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;-webkit-user-select:none;user-select:none}
.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{background:rgba(74,42,30,.88);border-color:rgba(255,255,255,.3)}
.level-pill{display:flex;flex-direction:column;align-items:center;gap:.25em;background:rgba(74,42,30,.88);border:1px solid var(--hair);border-radius:999px;padding:.35em 1.3em .5em;line-height:1.1;min-width:8.5em}
.level-pill span{font-weight:900;font-size:1.1em;font-variant-numeric:tabular-nums;white-space:nowrap}
.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,var(--good),var(--accent))}
.purse{display:flex;align-items:center;gap:.35em;background:rgba(74,42,30,.88);border:1px solid var(--hair);border-radius:999px;padding:.45em .9em;font-weight:900;font-size:1.1em;min-height:48px}
.gem{width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6C8,#FFC83D 45%,#E07A00);box-shadow:inset 0 0 0 2px rgba(150,70,0,.45)}
.gem.pop{animation:pop .35s}
.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)}}

.ctl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;pointer-events:none;z-index:4;
  padding:0 max(.8em,env(safe-area-inset-right)) max(.8em,env(safe-area-inset-bottom)) max(.8em,env(safe-area-inset-left))}
.pad{pointer-events:auto;width:5.2em;height:5.2em;min-width:64px;min-height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.85);
  background:rgba(74,42,30,.55);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;padding:0;
  font-weight:900;font-size:.95em;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.pad svg{width:1.7em;height:1.7em;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pad.down,.pad:active{transform:scale(.92);background:rgba(255,177,61,.75)}
.pad.nudge{animation:nudge .5s ease-in-out infinite;border-color:#FFE08F}
@keyframes nudge{50%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(255,224,143,.45)}}
.pad:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tip{position:absolute;left:0;right:0;top:4.6em;width:fit-content;margin:0 auto;background:rgba(74,42,30,.9);color:#fff;font-weight:800;
  font-size:1.15em;padding:.55em 1.2em;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(-5px)}}
@media (max-height:480px){.hud{padding-top:.35em}.level-pill{padding:.25em 1em .4em}.hud .jewel{width:48px;height:48px}.tip{font-size:1em;top:3.6em}
  .pad{width:4em;height:4em;font-size:.8em}.ctl{padding-bottom:max(.4em,env(safe-area-inset-bottom))}}
@media (max-width:420px){.level-pill{min-width:0;padding:.3em .8em .45em}.level-pill span{font-size:1em}.purse{padding:.4em .7em}.hearts{margin-left:.15em}}

/* cards */
.how p{text-align:left;margin:.45em 0;color:var(--ink)}
.how b{color:var(--accent-hi)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:.4em;max-height:50vh;overflow:auto;padding:.2em}
.grid .choice.done{background:#3E7A34;border-color:var(--good)}
.grid .choice.next{border:2px solid var(--accent)}
.card .sub{font-size:.85em;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hi)!important;font-weight:800}
.win-line{font-size:1.2em;color:var(--ink)!important;font-weight:700}
body:has(> .veil) .toast{display:none}