/* Ball Sort Puzzle: the screens around the canvas. A night room, a wooden rack, glass tubes. */
body{background:radial-gradient(130% 90% at 50% 0%,#33296A 0%,#1A2048 45%,#0D1128 100%) fixed}

/* home */
.home{align-items:center;justify-content:center;gap:.8em;padding:1.2em;text-align:center}
.home .hero{width:min(24em,88vw);height:min(28vh,10em);display:block;touch-action:manipulation}
.home .title{font-size:clamp(2.5em,10.5vw,4.4em);background:linear-gradient(180deg,#FFFFFF 10%,var(--accent-hi) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.tagline{margin:0;color:var(--ink-soft);font-size:1.15em;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:.45em}.home .title{font-size:2.5em}}

/* the game: bar, rack, 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:48px}
.level-pill{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.07);border:1px solid var(--hair);border-radius:999px;padding:.3em 1.5em;line-height:1.15}
.level-pill span{font-weight:900;font-size:1.15em}
.level-pill small{color:var(--ink-soft);font-size:.8em}
.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:50px;border-radius:999px;padding:0 1.1em 0 .9em;display:inline-flex;gap:.45em;align-items:center;font-weight:800;font-size:.95em}
.jewel.tool svg{width:1.25em;height:1.25em}

/* a short, wide window: bar on the left, dock on the right, the rack 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-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:#24563F;border-color:#3DD68C}
.grid .choice.next{border:2px solid var(--accent)}
.win-line{font-size:1.15em;color:var(--ink)!important}
body:has(> .veil) .toast{display:none}