.g-hop-and-drop{--g-carrot:#e2672b;--g-carrot-top:#4f8a1c;--g-spark:var(--ink);--g-hint:var(--berry);--g-danger:var(--bad);--g-danger-tint:#f6d6cf;--g-soil:#efe1c7;--g-soil-edge:#d8c19a;--w-tile:var(--card);--w-path:var(--accent);--w-path-ink:var(--char-ink);--w-hint:var(--g-hint);gap:var(--sp-2);justify-items:stretch;width:100%;max-width:420px;margin:0 auto;display:grid}[data-theme=dark] .g-hop-and-drop{--g-carrot:#f08a4b;--g-carrot-top:#8bbe4b;--g-danger-tint:#4a2320;--g-soil:#2f2722;--g-soil-edge:#4a3d33}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .g-hop-and-drop{--g-carrot:#f08a4b;--g-carrot-top:#8bbe4b;--g-danger-tint:#4a2320;--g-soil:#2f2722;--g-soil-edge:#4a3d33}}[data-cb] .g-hop-and-drop{--w-path:var(--sky);--w-path-ink:var(--char-ink);--g-hint:var(--ink)}.g-hop-and-drop-head{gap:var(--sp-1);display:grid}.g-hop-and-drop-goal,.g-hop-and-drop-stars,.g-hop-and-drop-status,.g-hop-and-drop-danger{margin:0}.g-hop-and-drop-goal{font-family:var(--font-display);font-weight:600;line-height:1.25}.g-hop-and-drop-stars{color:var(--ink-soft);text-align:center;font-size:.9em}.g-hop-and-drop-status{text-align:center;min-height:1.3em;font-size:.9em;line-height:1.3}.g-hop-and-drop-meter{align-items:center;gap:var(--sp-2);grid-template-columns:auto 1fr;display:grid}.g-hop-and-drop-count{font-family:var(--font-display);white-space:nowrap;font-weight:600}.g-hop-and-drop-bar{border:var(--bw) solid var(--ink);background:var(--card);border-radius:999px;height:12px;position:relative}.g-hop-and-drop-fill{background:var(--accent);transform-origin:0;border-radius:999px;position:absolute;inset:0;transform:scaleX(0)}.g-hop-and-drop-marks{position:absolute;inset:0 9px;container-type:inline-size}.g-hop-and-drop-mark{width:18px;height:18px;color:var(--ink-soft);margin-top:-9px;position:absolute;top:50%;left:-9px}.g-hop-and-drop-mark svg{width:100%;height:100%}.g-hop-and-drop-meter[data-stars="1"] .g-hop-and-drop-mark[data-star="1"],.g-hop-and-drop-meter[data-stars="2"] .g-hop-and-drop-mark:is([data-star="1"],[data-star="2"]),.g-hop-and-drop-meter[data-stars="3"] .g-hop-and-drop-mark{color:var(--ink)}.g-hop-and-drop-wordbar{align-items:center;gap:var(--sp-2);grid-template-columns:44px 1fr auto;display:grid}.g-hop-and-drop-word{min-height:44px;padding:0 var(--sp-2);border:var(--bw) dashed var(--line);border-radius:var(--r-m);font-family:var(--font-display);letter-spacing:.08em;justify-content:center;align-items:center;font-size:1.3em;font-weight:600;display:flex}.g-hop-and-drop-word.is-ok{border-style:solid;border-color:var(--ink)}.g-hop-and-drop-word.is-ok:after{content:"✓";margin-left:var(--sp-1);font-size:.8em}.g-hop-and-drop-eat,.g-hop-and-drop-clear,.g-hop-and-drop-tool{justify-content:center;align-items:center;gap:var(--sp-1);min-width:44px;min-height:44px;padding:var(--sp-2) var(--sp-3);border:var(--bw) solid var(--ink);border-radius:var(--r-m);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;display:inline-flex}.g-hop-and-drop-clear{padding:0}.g-hop-and-drop-eat{background:var(--accent);color:var(--on-accent);box-shadow:0 var(--bw) 0 var(--ink);font-weight:600}.g-hop-and-drop-eat:disabled,.g-hop-and-drop-clear:disabled,.g-hop-and-drop-tool:disabled{opacity:.45;cursor:default}.g-hop-and-drop-eat:focus-visible,.g-hop-and-drop-clear:focus-visible,.g-hop-and-drop-tool:focus-visible{outline:var(--bw-b) solid var(--focus);outline-offset:2px}.g-hop-and-drop-tool svg,.g-hop-and-drop-clear svg{width:20px;height:20px}.g-hop-and-drop-tool.is-hint{outline:var(--bw-b) dotted var(--g-hint);outline-offset:3px}.g-hop-and-drop-tools{gap:var(--sp-1);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid}.g-hop-and-drop-tool{padding:var(--sp-1) 2px;text-align:center;flex-direction:column;gap:2px;font-size:.8em;line-height:1.1}.g-hop-and-drop-tool[hidden]{display:none}.g-hop-and-drop-frame{width:min(100%,max(200px,66.6667vh - 193.333px));border:var(--bw-b) solid var(--ink);border-radius:var(--r-l);background:var(--g-soil);width:min(100%,max(200px,66.6667svh - 193.333px));box-shadow:inset 0 -6px 0 var(--g-soil-edge);justify-self:center;padding:4px;position:relative}@media (max-width:26.25rem){.g-hop-and-drop-frame{width:min(100%,max(200px,66.6667vh - 240px));width:min(100%,max(200px,66.6667svh - 240px))}}.g-hop-and-drop-frame.is-danger{border-color:var(--g-danger);background:repeating-linear-gradient(135deg, var(--g-danger-tint) 0 8px, var(--g-soil) 8px 16px) top / 100% 22% no-repeat, var(--g-soil)}.g-hop-and-drop-danger{z-index:4;width:max-content;max-width:calc(100% - 12px);padding:0 var(--sp-2);border:var(--bw) solid var(--g-danger);border-radius:var(--r-m);background:var(--card);color:var(--ink);text-align:center;pointer-events:none;font-size:.8em;font-weight:600;line-height:1.2;position:absolute;bottom:calc(100% - 7px);left:50%;transform:translate(-50%)}.g-hop-and-drop-danger:before{content:"! "}.g-hop-and-drop .w-tile{padding:calc(100cqw / var(--w-cols) * .045);font-size:calc(100cqw / var(--w-cols) * .56 * var(--tile-scale,1))}.g-hop-and-drop .w-value{opacity:.75;font-size:max(10px,.36em);bottom:3%;right:7%}@container (width<=204px){.g-hop-and-drop:not(.g-hop-and-drop-tut) .w-value{display:none}}.g-hop-and-drop .w-board:not(:focus-visible) .w-tile.is-cursor .w-face,.g-hop-and-drop .w-tile[data-tut-hl]{outline:none}.g-hop-and-drop .w-tile[data-tut-hl] .w-face{outline:var(--bw-b) solid var(--focus);outline-offset:1px}.g-hop-and-drop .w-tile.is-carrot .w-face:before{content:"";background:var(--g-carrot);clip-path:polygon(10% 30%,90% 30%,50% 100%);width:22%;height:34%;position:absolute;top:7%;left:9%}.g-hop-and-drop .w-tile.is-carrot .w-face:after{content:"";background:var(--g-carrot-top);clip-path:polygon(0 100%,50% 0,100% 100%);width:12%;height:14%;position:absolute;top:3%;left:14%}.g-hop-and-drop .w-tile.is-fell:after{content:"";z-index:1;background:var(--g-spark);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);width:24%;height:24%;position:absolute;bottom:9%;left:9%}.g-hop-and-drop .w-tile.is-fell .w-face{box-shadow:inset 0 calc(-1 * var(--bw-b)) 0 var(--accent)}.g-hop-and-drop .w-tile.is-hint .w-face{outline:var(--bw-b) dotted var(--g-hint);outline-offset:1px}.g-hop-and-drop .w-tile.is-hint:before{content:"?";z-index:1;font-family:var(--font-display);font-weight:700;font-size:calc(100cqw / var(--w-cols) * .26);color:var(--ink);pointer-events:none;line-height:1;position:absolute;top:2%;right:12%}.g-hop-and-drop .w-tile.is-gone{opacity:0}@media (forced-colors:active){.g-hop-and-drop .w-tile.is-carrot .w-face:before,.g-hop-and-drop .w-tile.is-carrot .w-face:after,.g-hop-and-drop .w-tile.is-fell:after,.g-hop-and-drop-fill{background:canvastext}.g-hop-and-drop .w-tile.is-hint .w-face,.g-hop-and-drop-tool.is-hint{outline-color:highlight}.g-hop-and-drop-frame.is-danger{border-color:highlight}}.g-hop-and-drop-tut{width:200px;max-width:100%}.g-hop-and-drop-tutword{text-align:center;min-height:1.4em;font-family:var(--font-display);margin:0;font-weight:600}[data-motion=full] .g-hop-and-drop-fill{transition:transform var(--dur-2) var(--ease-out)}[data-motion=full] .g-hop-and-drop .w-tile.is-gone{transition:opacity .2s linear}[data-motion=full] .g-hop-and-drop-frame.is-danger .g-hop-and-drop-danger{animation:1.2s ease-in-out infinite g-hop-and-drop-bob}[data-motion=full] .g-hop-and-drop-meter[data-stars] .g-hop-and-drop-mark svg{transition:transform var(--dur-2) var(--ease-pop)}[data-motion=calm] .g-hop-and-drop .w-tile.is-gone{transition:opacity .15s linear}.g-hop-and-drop-rain{z-index:5;border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden}.g-hop-and-drop-rain span{top:-14%;left:var(--x);aspect-ratio:1/2;opacity:0;width:6%;position:absolute}.g-hop-and-drop-rain .is-big{width:16%;top:auto;bottom:3%;left:42%}.g-hop-and-drop-rain span:before{content:"";background:var(--g-carrot);clip-path:polygon(0 0,100% 0,50% 100%);position:absolute;inset:30% 0 0}.g-hop-and-drop-rain span:after{content:"";background:var(--g-carrot-top);clip-path:polygon(0 100%,50% 0,100% 100%);width:50%;height:34%;position:absolute;top:0;left:25%}[data-motion=full] .g-hop-and-drop-rain span{animation:g-hop-and-drop-rain 1.5s ease-in var(--d) both}[data-motion=full] .g-hop-and-drop-rain .is-big{animation:g-hop-and-drop-pop 1.8s var(--ease-pop) both}@keyframes g-hop-and-drop-rain{0%{opacity:0;transform:translateY(0) rotate(var(--r))}12%,80%{opacity:1}to{opacity:0;transform:translateY(1300%) rotate(calc(var(--r) * -1))}}@keyframes g-hop-and-drop-pop{0%{opacity:0;transform:translateY(80%)scale(.3)}30%{opacity:1;transform:translateY(-25%)scale(1.1)}45%,80%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(0)scale(1)}}@keyframes g-hop-and-drop-bob{50%{transform:translate(-50%,-2px)}}.w-board{--w-tile:var(--card);--w-tile-ink:var(--ink);--w-tile-edge:var(--line);--w-path:var(--accent-tint);--w-path-ink:var(--accent-ink);--w-path-line:var(--ink);--w-rock:var(--ink-soft);--w-bad:var(--bad);--w-hint:var(--accent);--w-focus:var(--focus);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:var(--r-m);width:100%;position:relative;overflow:hidden;container-type:inline-size}.w-board:focus-visible{outline:var(--bw-b) solid var(--w-focus);outline-offset:2px}.w-bodies,.w-over{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.w-bodies{z-index:1}.w-tiles{z-index:2;position:absolute;inset:0}.w-over{z-index:3}.w-tile{width:calc(100% / var(--w-cols));height:calc(100% / var(--w-rows));font-size:calc(100cqw / var(--w-cols) * .52 * var(--tile-scale,1));padding:3.5%;position:absolute;top:0;left:0}.w-face{background:var(--w-tile);width:100%;height:100%;color:var(--w-tile-ink);box-shadow:inset 0 calc(-1 * var(--bw)) 0 var(--w-tile-edge);border:var(--bw) solid var(--w-tile-ink);font-family:var(--font-display);text-transform:uppercase;border-radius:22%;justify-content:center;align-items:center;font-style:normal;font-weight:600;line-height:1;display:flex;position:relative}.w-value{font-family:var(--font-ui);opacity:.6;font-size:.34em;font-weight:700;position:absolute;bottom:4%;right:9%}.w-tile.is-path .w-face{background:var(--w-path);color:var(--w-path-ink);box-shadow:inset 0 0 0 var(--bw) var(--w-path-line);transform:scale(1.06)}.w-tile.is-cursor .w-face{outline:var(--bw-b) solid var(--w-focus);outline-offset:1px}.w-tile.is-eaten .w-face{box-shadow:none;background:0 0;border-color:#0000}.w-tile.is-rock .w-face{background:var(--w-rock);border-color:var(--w-rock);border-radius:40% 34% 44% 30%}.w-tile.is-water .w-face{box-shadow:none;background:0 0;border-color:#0000}.w-tile.is-stranded .w-face{border-color:var(--w-bad);color:var(--w-bad);background:0 0}[data-cb] .w-tile.is-stranded .w-face:after{content:"!";font-size:.4em;position:absolute;top:2%;right:8%}.w-tile.is-hint .w-face{border-color:var(--w-hint);border-width:var(--bw-b)}.w-tile.is-gone{opacity:0}.w-pathline{fill:none;stroke:var(--w-path-line);stroke-opacity:.35;stroke-width:.14px;stroke-linecap:round;stroke-linejoin:round}[data-motion=full] .w-tile{transition:transform var(--dur-2,.32s) var(--ease-pop,ease-out), opacity var(--dur-1,.2s) linear}[data-motion=full] .w-face{transition:transform var(--dur-1,.15s) ease-out}[data-motion=calm] .w-tile{transition:opacity var(--dur-1,.2s) linear}[data-motion=full] .w-tile.is-hint .w-face{animation:1s ease-in-out infinite w-glow}[data-motion=full] .w-shake{animation:.35s w-shake}@keyframes w-glow{50%{transform:scale(1.08)}}@keyframes w-shake{20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}