.ht-game{max-width:42rem;margin:0 auto}.ht-head{text-align:center;margin-bottom:var(--space-16,1rem)}.ht-title{margin:0 0 var(--space-4,.25rem);color:var(--ff-ink);font-size:clamp(1.6rem,7vw,2.1rem)}.ht-tag{margin:0}.ht-chooser{gap:var(--space-8,.5rem);margin:0 auto var(--space-16,1rem);flex-wrap:wrap;justify-content:center;display:flex}.ht-lvl{border:3px solid var(--ff-line);background:var(--ff-card);min-width:56px;min-height:56px;color:var(--ff-ink);cursor:pointer;border-radius:1rem;justify-content:center;align-items:center;font-size:1.4rem;font-weight:900;transition:border-color .12s,transform 80ms;display:inline-flex}.ht-lvl:hover{border-color:var(--pc-select)}.ht-lvl:active{transform:translateY(1px)}.ht-lvl:focus-visible{outline:3px solid var(--ff-focus,var(--pc-select));outline-offset:2px}.ht-lvl--on{border-color:var(--pc-select);background:var(--pc-select-bg,var(--ff-warm))}.ht-lvl-emoji{line-height:1}.ht-goal{text-align:center;color:var(--ff-ink);margin:0 auto var(--space-8,.5rem);max-width:30rem;font-size:1.2rem;font-weight:800}.ht-stage{padding:var(--space-16,1rem)}.ht-course{gap:var(--space-8,.5rem);flex-wrap:wrap;justify-content:center;align-items:center;min-height:5.5rem;display:flex}.ht-empty{text-align:center;margin:0}.ht-slot{justify-content:center;align-items:center;gap:var(--space-4,.25rem);cursor:pointer;border:3px solid var(--ff-line);background:var(--ff-card);min-width:4.4rem;min-height:4.8rem;color:var(--ff-ink);border-radius:1rem;flex-direction:column;padding:.4rem .5rem;transition:border-color .12s,transform .1s,background-color .12s;display:inline-flex;position:relative}.ht-slot:hover:not(:disabled){border-color:var(--pc-select)}.ht-slot:focus-visible{outline:3px solid var(--ff-focus,var(--pc-select));outline-offset:2px}.ht-slot:disabled{cursor:default}.ht-slot--on{border-color:var(--pc-select);background:var(--pc-select-bg,var(--ff-warm));transform:translateY(-4px)scale(1.06)}.ht-slot-num{font-size:.75rem;position:absolute;top:2px;left:6px}.ht-slot-emoji{font-size:clamp(1.5rem,6vw,2rem);line-height:1}.ht-slot-name{font-size:.82rem;font-weight:800}.ht-palette{gap:var(--space-12,.75rem);margin:var(--space-16,1rem) auto 0;flex-wrap:wrap;justify-content:center;display:flex}.ht-tile{justify-content:center;align-items:center;gap:var(--space-4,.25rem);cursor:pointer;border:3px solid var(--ff-line);background:var(--ff-card);min-width:5rem;min-height:5rem;color:var(--ff-ink);border-radius:1.1rem;flex-direction:column;padding:.5rem .6rem;transition:border-color .12s,transform 80ms;display:inline-flex}.ht-tile:hover:not(:disabled){border-color:var(--pc-select)}.ht-tile:active:not(:disabled){transform:translateY(1px)}.ht-tile:focus-visible{outline:3px solid var(--ff-focus,var(--pc-select));outline-offset:2px}.ht-tile:disabled{opacity:.5;cursor:default}.ht-tile-emoji{font-size:clamp(1.8rem,7vw,2.3rem);line-height:1}.ht-tile-name{font-size:.95rem;font-weight:900}.ht-hint{text-align:center;margin:var(--space-8,.5rem) auto 0;max-width:30rem}.ht-hint--send{color:var(--ff-ink);font-size:1.15rem;font-weight:800}.ht-btns{gap:var(--space-16,1rem);margin:var(--space-16,1rem) auto 0;flex-wrap:wrap;justify-content:center;display:flex}.ht-send{min-width:12rem;min-height:56px;font-size:1.2rem}.ht-send:disabled{opacity:.5;cursor:default}.ht-clear{border:2px solid var(--ff-line);min-height:48px;color:var(--ff-ink);cursor:pointer;background:0 0;border-radius:.8rem;padding:.5rem 1rem;font-size:1rem;font-weight:700}.ht-clear:hover:not(:disabled){border-color:var(--pc-select)}.ht-clear:disabled{opacity:.5;cursor:default}.ht-clear:focus-visible{outline:3px solid var(--ff-focus,var(--pc-select));outline-offset:2px}.ht-result{max-width:30rem;padding:var(--space-16,1rem);text-align:center;margin:var(--space-16,1rem) auto 0}.ht-result-head{color:var(--ff-ink);margin:0 0 var(--space-4,.25rem);font-size:1.3rem;font-weight:900}.ht-result-teach{color:var(--ff-ink);margin:0;font-weight:600}.ht-result--ok{border:3px solid var(--pc-select)}.ht-learn{max-width:42rem;margin:0 auto}.ht-h{margin:0 0 var(--space-16,1rem);color:var(--ff-ink);font-size:1.5rem}.ht-sub{margin:var(--space-16,1rem) 0 var(--space-4,.25rem);color:var(--ff-ink);font-size:1.15rem}.ht-list{margin:var(--space-8,.5rem) 0;padding-left:1.2rem}.ht-list li{margin:.3rem 0}.ht-meta{margin-top:var(--space-16,1rem)}.ht-back{margin-top:var(--space-24,1.5rem);font-weight:700}@media (prefers-reduced-motion:reduce){.ht-lvl,.ht-slot,.ht-tile{transition:none}.ht-slot--on{transform:none}}.pc-theme-hoptots.pc-immersive{--pc-env-bg:radial-gradient(120% 90% at 50% 6%, #e7f8ed 0%, #beefd0 42%, #0000 72%), linear-gradient(to bottom, #dbf6e5 0%, #9de7b9 46%, #68d992 76%, #3bce72 100%);--pc-env-bg-dark:radial-gradient(120% 90% at 50% 6%, #143e23 0%, #0c2716 46%, #0000 74%), linear-gradient(to bottom, #11361f 0%, #0c2716 52%, #07170d 100%);--pc-env-bg-flat:oklab(90.1377% -.0660499 .0283593);--pc-env-bg-flat-dark:#0c2716}.pc-theme-hoptots{--pc-select:#15803d;--pc-select-bg:color-mix(in srgb, var(--pc-select) 12%, transparent);color:var(--ff-ink)}@media (prefers-color-scheme:dark){.pc-theme-hoptots{--pc-select:#86efac}}