/* Hill by hill only. The shared game rules (buttons, share box, More games) stay in play.css. */
.hb [hidden]{display:none}
.hb label{font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
/* The box is reserved before any script runs, so the scene arriving never moves the page. */
.hb-stage{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--ground);contain:layout paint}
@media (max-width:640px){.hb-stage{aspect-ratio:4/5}}
.hb-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:crosshair;outline:none;-webkit-touch-callout:none;user-select:none}
.hb-canvas:active{cursor:grabbing}
.hb-removing .hb-canvas{cursor:not-allowed}
.hb-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:14px}
.hb-hud{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);color:var(--text);pointer-events:none}
.hb-hud:not(:has(span:not(:empty))){display:none}
.hb-hud span:empty{display:none}
.hb-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:8px 16px;border-radius:999px;max-width:calc(100% - 140px);
  background:color-mix(in srgb,var(--paper) 90%,transparent);color:var(--text);font:500 13.5px/1.35 var(--sans);text-align:center;
  pointer-events:none;transition:opacity .4s ease}
.hb-hint.hb-gone{opacity:0}
.hb-coarse{display:none}
@media (pointer:coarse){.hb-fine{display:none}.hb-coarse{display:inline}}
@media (max-width:640px){.hb-hint{left:12px;bottom:12px;transform:none;max-width:calc(100% - 164px);text-align:left}}
/* Over the scene rather than under it, so offering the choice never moves the controls. */
.hb-choice{position:absolute;left:12px;top:54px;right:12px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.hb-choice button{pointer-events:auto;padding:8px 14px;background:var(--paper)}
.hb-walk{position:absolute;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);
  gap:2px;grid-template-areas:". f ." "l . r" ". b ."}
.hb-walk button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--hair);
  border-radius:10px;background:color-mix(in srgb,var(--paper) 90%,transparent);color:var(--text);cursor:pointer}
.hb-walk button:hover{border-color:var(--accent)}
.hb-walk button:disabled{opacity:.5;cursor:default}
.hb-walk svg{width:16px;height:16px;fill:currentColor}
.hb-w-forward{grid-area:f}.hb-w-left{grid-area:l}.hb-w-right{grid-area:r}.hb-w-back{grid-area:b}
.hb-nogl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.hb-nogl p{max-width:30em;text-align:center}
.hb-nojs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;color:var(--muted)}
/* Two lines of status are reserved, so a message never moves the controls under it. */
.hb-status{min-height:3em;margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.hb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:6px 0 0}
.hb fieldset{margin:0;padding:0;border:0;min-width:0}
.hb-tools{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--hair);border-radius:999px}
.hb-tools label{position:relative;display:block}
.hb-tools input,.hb-block input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hb-tools span{display:block;padding:7px 14px;border-radius:999px;font:600 14px/1.2 var(--sans);color:var(--text)}
.hb-tools input:checked+span{background:var(--btn);color:#fff}
.hb-tools input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hb-blocks{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 420px}
.hb-block{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:72px;padding:7px 2px 6px;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);font:500 12px/1.2 var(--sans);color:var(--text);cursor:pointer}
.hb-block:hover{border-color:var(--accent)}
.hb-block:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.hb-block:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.hb-block:has(input:disabled){opacity:.55;cursor:default}
.hb-sw svg{display:block;width:28px;height:28px}
.hb-sw path{stroke:rgb(15 23 42 / .22);stroke-width:.6;stroke-linejoin:round}
.hb-steps{display:flex;gap:8px}
.hb-steps .alt-btn,.hb-row .alt-btn{padding:9px 18px}
.hb .alt-btn:disabled,.hb .btn:disabled{opacity:.5;cursor:default}
.hb-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:18px 0 0}
.hb-world{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.hb-world button[type=submit]{padding:10px 20px;border-radius:999px}
.hb-world label{font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hb-world input{width:13em;padding:9px 14px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);color:var(--text);
  font:500 14.5px/1.2 var(--mono)}
.hb-actions{display:flex;flex-wrap:wrap;gap:8px}
.hb-actions .btn{padding:10px 20px}
.hb-linkbox{margin:14px 0 0}
@media (max-width:640px){
  .hb-block{width:calc((100% - 18px) / 4)}
  .hb-blocks{flex-basis:100%}
  .hb-world input{flex:1 1 9em;width:auto}
}
/* Touch targets of at least 44 px where a finger does the pointing. */
@media (pointer:coarse){
  .hb-tools span{display:flex;align-items:center;min-height:44px;padding:0 18px}
  .hb-walk{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}
  .hb-walk button{width:44px;height:44px}
  .hb .btn,.hb .alt-btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.hb-hint{transition:none}}