/* Water Sort: the screens around the canvas. */
body{background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,var(--bg) 60%,#E2E8EF 100%) fixed}

/* home */
.home{align-items:center;justify-content:center;gap:.9em;padding:1.2em;text-align:center}
.home .hero{width:min(22em,86vw);height:min(30vh,11em);display:block}
.home .title{font-size:clamp(2.4em,10vw,4.2em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em;max-width:22em}
.links{display:flex;gap:.2em .4em;justify-content:center;flex-wrap:wrap}
@media (max-height:480px){.home .hero{display:none}.home{gap:.5em}.home .title{font-size:2.4em}}

/* the game: bar, tubes, dock */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:max(.5em,env(safe-area-inset-top)) .8em .3em;position:relative;z-index:5}
.bar-spacer{width:3em;min-width:44px}
.level-pill{display:flex;flex-direction:column;align-items:center;background:var(--bg-hi);border:1px solid var(--hair);border-radius:999px;padding:.3em 1.4em;line-height:1.15;box-shadow:0 2px 8px rgba(23,33,43,.06)}
.level-pill span{font-weight:800;font-size:1.05em}
.level-pill small{color:var(--ink-soft);font-size:.78em}
.felt{flex:1;position:relative;min-height:0;min-width:0}
.felt canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;outline:none}
.dock{display:flex;justify-content:center;gap:.7em;padding:.4em .6em max(.8em,env(safe-area-inset-bottom));position:relative;z-index:5}
.jewel.tool{width:auto;height:3em;min-height:48px;border-radius:999px;padding:0 1.1em 0 .9em;display:inline-flex;gap:.4em;align-items:center;font-weight:700;font-size:.95em}
.jewel.tool svg{width:1.25em;height:1.25em}
.jewel.tool.used{opacity:.4}

/* a short, wide window: bar on the left, dock on the right, tubes between */
html.wide #game{flex-direction:row}
html.wide .bar{flex-direction:column;justify-content:flex-start;padding:max(.6em,env(safe-area-inset-top)) .3em .6em max(.6em,env(safe-area-inset-left));width:auto}
html.wide .bar-spacer{display:none}
html.wide .level-pill{border-radius:1em;padding:.4em .7em}
html.wide .dock{flex-direction:column;justify-content:center;padding:.6em max(.6em,env(safe-area-inset-right)) .6em .3em}
html.wide .jewel.tool{justify-content:flex-start}

/* cards */
.how p{text-align:left;margin:.45em 0;color:var(--ink)}
.how b{color:var(--accent-lo)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.4em;max-height:50vh;overflow:auto;padding:.2em}
.grid .choice.done{background:#E3F4EC;border-color:#9ED8BD}
.grid .choice.next{border:2px solid var(--accent)}
.win-moves{font-size:1.1em}