/* Road Crosser: the screens around the canvas. A sunny meadow home, the road full screen in play. */
body{background:linear-gradient(180deg,#8FD3FF 0%,#BDEBFF 38%,#7BD957 38.2%,#5DBB45 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(26vh,9em);display:block;touch-action:manipulation;border-radius:1.2em;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.home .title{font-size:clamp(2.6em,11vw,4.6em);color:#fff;-webkit-text-stroke:0;text-shadow:0 3px 0 #1F6B2E,0 6px 0 rgba(0,0,0,.18),0 10px 24px rgba(0,0,0,.25)}
.tagline{margin:0;color:#173B1C;font-weight:700;font-size:1.15em;max-width:22em;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.pill.alt{background:linear-gradient(180deg,#FFFFFF,#E6F4FF 55%,#BFDDF2);box-shadow:0 4px 0 #6C93AF,0 10px 22px rgba(0,0,0,.25);color:#15344C;font-size:1em;padding:.55em 1.8em}
.home .links{display:flex;gap:.2em .4em;justify-content:center;flex-wrap:wrap;background:rgba(21,52,76,.82);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 road fills the screen, the HUD floats over its top */
#game{background:#5DBB45}
#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(21,52,76,.88);border-color:rgba(255,255,255,.3)}
.level-pill{display:flex;flex-direction:column;align-items:center;gap:.25em;background:rgba(21,52,76,.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}
.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));transition:width .25s}
.purse{display:flex;align-items:center;gap:.35em;background:rgba(21,52,76,.88);border:1px solid var(--hair);border-radius:999px;padding:.45em .9em;font-weight:900;font-size:1.1em;min-height:48px}
.coin{width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF4B8,#FFC83D 45%,#D98A00);box-shadow:inset 0 0 0 2px rgba(150,90,0,.45)}
.coin.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)}}
.tip{position:absolute;left:0;right:0;bottom:max(1.2em,env(safe-area-inset-bottom));width:fit-content;margin:0 auto;background:rgba(21,52,76,.9);color:#fff;font-weight:800;
  font-size:1.15em;padding:.6em 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}}
@media (max-width:420px){.level-pill{min-width:0;padding:.3em .9em .45em}.purse{padding:.4em .7em}}

/* 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:#22663E;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}