/* Box Pusher: a warm sand floor, slate walls, wooden boxes, teal spots. */
:root{
  --floor:#EFE6D3;--floor-b:#E7DCC5;--wall:#46536B;--wall-hi:#5C6B86;--wall-lo:#323C50;--spot:#2F9C80;--spot-hi:#5CCBAE;
  --crate:#D9963F;--crate-hi:#EDB869;--crate-lo:#8A531C;--done:#3BA776;--done-hi:#7DD7A6;--done-lo:#21704B;
  --me:#E8604C;--me-hi:#F58D78;--me-lo:#A83A2A;--star:#F2B227;--t:110ms;
}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.2em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4.4em;height:4.4em;border-radius:1em;box-shadow:0 6px 18px rgba(30,36,48,.25)}
.title{font:800 clamp(2.3em,10vw,3.6em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.12em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.9em;width:min(26em,100%)}
.stepper{display:flex;align-items:center;gap:.6em;width:100%;justify-content:center}
.step{width:56px;height:56px;border-radius:16px;border:1px solid var(--hair);background:var(--panel);font-size:2em;line-height:1;font-weight:700;color:var(--ink);padding:0 0 .12em;flex:none}
.step:disabled{opacity:.35;cursor:default}
.step:active:not(:disabled){transform:translateY(1px)}
.step:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}
.step-mid{flex:1;max-width:14em;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:.35em .6em;line-height:1.2}
.step-mid b{font-size:1.35em}
.step-mid small{color:var(--ink-soft);font-size:.85em}
.stars{color:var(--star);font-size:1.15em;letter-spacing:.12em}
.stars.none{color:#D8D0C0}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.6em;padding:.6em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.6em!important}
  .home-head{flex:0 1 auto;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.3em}
  .home-body{gap:.5em;flex:0 1 22em}
  .step-mid{min-height:64px}
  .home .pill{padding:.5em 2em}
  .links .link{min-height:44px;padding:.2em .45em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{flex-direction:column}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.45em;padding:max(.5em,env(safe-area-inset-top)) .6em .3em;width:min(34em,100%);margin:0 auto}
.felt{flex:1;min-height:0;min-width:0;display:grid;place-items:center;padding:6px}
.dock{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.4em .6em max(.6em,env(safe-area-inset-bottom))}
.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg,.tool svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.readout,.goals{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;min-width:4.6em;padding:0 .7em;border-radius:14px;background:var(--panel);border:1px solid var(--hair);line-height:1.1}
.readout span,.goals span{font-weight:800;font-size:1.15em;font-variant-numeric:tabular-nums}
.readout small,.goals small{color:var(--ink-soft);font-size:.78em;white-space:nowrap}
.readout.pushes.over span{color:#C9781E}
.goals{min-width:5.4em}
.goals.full{border-color:var(--done);background:#E8F6EE}
.goals.pop{animation:hit .3s cubic-bezier(.3,1.6,.5,1)}
.tool{display:flex;align-items:center;gap:.4em;min-height:48px;padding:0 1em;border-radius:14px;border:1px solid var(--hair);background:var(--panel);font-weight:700}
.tool:disabled{opacity:.42;cursor:default}
.tool:active:not(:disabled),.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible,.tool:focus-visible,.board:focus-visible{outline:3px solid var(--accent-hi);outline-offset:3px}

/* the board: tiles are placed by their cell, the boxes and you slide over them */
.board{--cs:48px;position:relative;width:calc(var(--w)*var(--cs));height:calc(var(--h)*var(--cs));touch-action:none;user-select:none;-webkit-user-select:none;outline:none;border-radius:calc(var(--cs)*.2)}
.board > *{position:absolute;left:0;top:0;width:var(--cs);height:var(--cs);transform:translate(calc(var(--x)*var(--cs)),calc(var(--y)*var(--cs)))}
.tile{background:var(--floor);box-shadow:inset 0 0 0 .5px var(--floor-b)}
.tile.alt{background:#EADFC9}
.tile.spot::after{content:"";position:absolute;inset:27%;border-radius:50%;border:calc(var(--cs)*.06) solid var(--spot);background:radial-gradient(circle,var(--spot-hi) 0 28%,transparent 32%);opacity:.9}
.wall{background:linear-gradient(180deg,var(--wall-hi),var(--wall) 55%,var(--wall-lo));border-radius:calc(var(--cs)*.16);
  box-shadow:inset 0 calc(var(--cs)*.05) 0 rgba(255,255,255,.14),inset 0 calc(var(--cs)*-.07) 0 rgba(0,0,0,.22)}
.box,.me{transition:transform var(--t) ease-out;z-index:2;will-change:transform}
.walking .box,.walking .me{transition-timing-function:linear}
.box i{position:absolute;inset:7%;border-radius:calc(var(--cs)*.14);
  background:linear-gradient(45deg,transparent 44%,var(--crate-lo) 44% 56%,transparent 56%) center/100% 100%,
    linear-gradient(-45deg,transparent 44%,rgba(138,83,28,.75) 44% 56%,transparent 56%) center/100% 100%,
    linear-gradient(180deg,var(--crate-hi),var(--crate));
  border:calc(var(--cs)*.07) solid var(--crate-lo);box-shadow:inset 0 0 0 calc(var(--cs)*.04) rgba(255,230,180,.55),0 calc(var(--cs)*.06) calc(var(--cs)*.1) rgba(60,40,20,.3);
  transition:background .2s,border-color .2s,filter .2s}
.box.on i{background:linear-gradient(45deg,transparent 44%,var(--done-lo) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,rgba(33,112,75,.75) 44% 56%,transparent 56%),
    linear-gradient(180deg,var(--done-hi),var(--done));border-color:var(--done-lo);box-shadow:inset 0 0 0 calc(var(--cs)*.04) rgba(220,255,235,.55),0 0 calc(var(--cs)*.3) rgba(59,167,118,.55)}
.box.shove i{animation:shove .16s ease-out}
@keyframes shove{40%{transform:scale(.9)}}
.box.lit i{animation:lit .42s cubic-bezier(.3,1.7,.5,1)}
@keyframes lit{0%{transform:scale(.8)}60%{transform:scale(1.12)}}
.box.stuck i{filter:saturate(.6) hue-rotate(-25deg) brightness(.9);animation:wobble .5s}
@keyframes wobble{20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.ring{z-index:1;pointer-events:none}
.ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--done-hi);animation:ring .55s ease-out forwards}
@keyframes ring{from{scale:.4;opacity:1}to{scale:1.9;opacity:0}}

/* you: a round friend whose eyes look where you go */
.me b{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 36% 30%,var(--me-hi),var(--me) 60%,var(--me-lo));box-shadow:0 calc(var(--cs)*.06) calc(var(--cs)*.1) rgba(80,30,20,.35)}
.me b::before,.me b::after{content:"";position:absolute;top:28%;width:24%;height:28%;border-radius:50%;
  background:radial-gradient(circle at calc(50% + var(--ex)*22%) calc(50% + var(--ey)*22%),#1E2430 0 34%,#fff 38%)}
.me b::before{left:24%}.me b::after{right:24%}
.me{--ex:0;--ey:.4}
.me[data-d=u]{--ex:0;--ey:-.9}.me[data-d=d]{--ex:0;--ey:.9}.me[data-d=l]{--ex:-.9;--ey:0}.me[data-d=r]{--ex:.9;--ey:0}
.me.bump b{animation:bump .2s ease-out}
@keyframes bump{40%{translate:calc(var(--bx)*var(--cs)*.12) calc(var(--by)*var(--cs)*.12)}}
.me.push b{animation:lean .16s ease-out}
@keyframes lean{50%{translate:calc(var(--bx)*var(--cs)*.06) calc(var(--by)*var(--cs)*.06);scale:1.05 .95}}
.board.won .box i{animation:hop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k)*90ms)}
@keyframes hop{40%{transform:translateY(-22%) scale(1.06)}}
.board.won .me b{animation:hop .6s ease-out .2s 2}
.target{z-index:1;pointer-events:none}
.target::after{content:"";position:absolute;inset:8%;border-radius:22%;box-shadow:inset 0 0 0 3px rgba(47,122,106,.6);animation:fade .5s ease-out forwards}
@keyframes fade{to{opacity:0}}
@keyframes hit{0%{transform:scale(.86)}100%{transform:scale(1)}}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

/* a phone on its side, or a short frame: the bar and tools at the sides */
@media (orientation:landscape) and (max-height:520px){
  #game{flex-direction:row}
  .bar{flex-direction:column;justify-content:center;width:auto;margin:0;padding:.4em .3em .4em max(.5em,env(safe-area-inset-left));gap:.4em}
  .readout,.goals{min-width:6.2em;min-height:44px}
  .dock{flex-direction:column;padding:.4em max(.5em,env(safe-area-inset-right)) .4em .3em;gap:.4em}
  .tool{min-width:6.6em;justify-content:flex-start}
}
@media (max-width:380px) and (orientation:portrait){.readout{min-width:4em;padding:0 .45em}.bar{gap:.3em;padding-inline:.4em}}
@media (max-width:360px){.tool span{display:none}.tool{padding:0 .9em}}

/* cards */
.card.result h2{color:var(--done-lo)}
.card.stuck h2{color:#B5541E}
.big-stars{display:flex;justify-content:center;gap:.25em;font-size:2.6em;line-height:1;margin:.05em 0 .25em}
.big-stars span{color:#DDD6C8}
.big-stars .got{color:var(--star);animation:star .45s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--k)*140ms);text-shadow:0 2px 8px rgba(242,178,39,.45)}
@keyframes star{from{transform:scale(0) rotate(-40deg)}}
.how p{margin:.25em 0}
.how-art{display:flex;justify-content:center;margin:.1em 0 .6em}
.mini{display:grid;grid-template-columns:repeat(4,2.2em);grid-auto-rows:2.2em;background:var(--floor);border-radius:.5em;overflow:hidden;box-shadow:0 0 0 4px var(--wall)}
.mini span{position:relative}
.mini .m{margin:12%;border-radius:50%;background:radial-gradient(circle at 36% 30%,var(--me-hi),var(--me) 60%,var(--me-lo))}
.mini .c{margin:8%;border-radius:18%;background:linear-gradient(180deg,var(--crate-hi),var(--crate));border:3px solid var(--crate-lo)}
.mini .s::after{content:"";position:absolute;inset:27%;border-radius:50%;border:3px solid var(--spot)}
.mini .arrow{display:grid;place-items:center;color:var(--accent);font-weight:800}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.1em,1fr));gap:.4em;max-height:min(60vh,22em);overflow:auto;padding:.2em}
.lv{min-height:48px;border-radius:.7em;border:1px solid var(--hair);background:var(--paper);font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:.2em 0}
.lv small{color:var(--star);font-size:.62em;letter-spacing:.05em;margin-top:.2em;min-height:1em}
.lv.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.lv:disabled{opacity:.4;cursor:default}
.lv:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
@media (max-height:420px){.how-art{display:none}}
/* short screens: cards stay whole, their buttons side by side */
@media (max-height:520px){
  .card{padding:.8em 1em .8em;width:min(34em,100%)}
  .card h2{font-size:1.3em;margin:0 0 .35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.45em 1.4em;font-size:1.05em}
  .card .stats{margin:.1em 0 .2em}
  .card .note{margin:.15em 0}
  .big-stars{font-size:2em;margin:0}
  .how{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2em;font-size:.92em}
  .how .note{grid-column:1/-1}
  .rows{gap:.35em}
  .card .row{min-height:44px;padding:.35em .8em}
  .lv-grid{max-height:calc(100vh - 7em)}
}