@layer components{.screen.hm-stage{--honey:#ffc83a;--honey-lo:#f0a000;--comb:#2a2416;color:var(--on-dark);-webkit-user-select:none;user-select:none;background:radial-gradient(90% 60% at 50% 55%,#2c220a 0%,#0d0b06 70%);padding:0}.hm-rank{z-index:3;gap:10px;display:grid;position:absolute;top:12px;left:16px;right:16px}.hm-rank-top{align-items:center;gap:10px;min-width:0;display:flex}.hm-rank-top b{letter-spacing:-.02em;white-space:nowrap;font-size:19px;font-weight:750}.hm-rank-top span{white-space:nowrap;text-overflow:ellipsis;min-width:0;color:var(--on-dark-dim);flex:1;font-size:13.5px;font-weight:600;overflow:hidden}.hm-rank-top span i{color:var(--on-dark-faint);font-style:normal}.hm-finish{flex:none}.hm-bar{height:12px;margin:0 6px;position:relative}.hm-bar:before{content:"";background:#ffffff24;border-radius:2px;height:2px;position:absolute;top:5px;left:0;right:0}.hm-bar-fill{background:var(--honey);height:4px;transition:width .6s var(--ease-out);border-radius:4px;position:absolute;top:4px;left:0}.hm-bar i{width:10px;height:10px;transition:background .3s ease, transform .3s var(--ease-pop);background:#3a3424;border-radius:50%;margin-left:-5px;position:absolute;top:1px;box-shadow:0 0 0 2px #0d0b06}.hm-bar i.on{background:var(--honey)}.hm-bar i.on:last-of-type{transform:scale(1.35)}.hm-strip{z-index:6;text-align:left;height:44px;color:var(--on-dark);background:#ffffff0f;border-radius:12px;align-items:center;gap:10px;padding:0 12px 0 14px;display:flex;position:absolute;top:70px;left:16px;right:16px;box-shadow:inset 0 0 0 1.5px #ffffff14}.hm-strip b{flex:none;font-size:13.5px;font-weight:700}.hm-strip span{white-space:pre;text-overflow:ellipsis;min-width:0;color:var(--on-dark-dim);flex:1;font-size:13.5px;overflow:hidden}.hm-strip svg{width:20px;height:20px;transition:rotate .22s var(--ease-out);flex:none}.hm-stage.is-open .hm-strip svg{rotate:180deg}.hm-strip:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.hm-words{z-index:5;background:#17140c;border-radius:14px;padding:14px 16px;display:none;position:absolute;inset:118px 16px 16px;overflow:auto;box-shadow:inset 0 0 0 1.5px #ffffff14,0 20px 40px -10px #000000b3}.hm-stage.is-open .hm-words{animation:pop .22s var(--ease-pop) both;display:block}.hm-words p{color:var(--on-dark-dim);margin-bottom:10px;font-size:13px;font-weight:600}.hm-words ul{columns:2;column-gap:18px}.hm-words li{break-inside:avoid;border-bottom:1px solid #ffffff0f;padding:5px 0;font-size:15px;font-weight:600}.hm-words li.is-full,.hm-sum li.is-full{color:var(--honey)}.hm-play{padding:0 16px max(18px, env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;gap:clamp(10px,2.4cqh,22px);display:flex;position:absolute;inset:122px 0 0;container-type:size}.hm-typed-wrap{place-items:center;width:100%;height:56px;display:grid;position:relative}.hm-typed{letter-spacing:.02em;align-items:center;height:48px;font-size:clamp(28px,6cqh,38px);font-weight:750;display:flex}.hm-typed .is-mid{color:var(--honey)}.hm-typed .is-off{color:var(--on-dark-faint)}.hm-typed.is-shake{animation:hm-shake .38s var(--ease-out)}.hm-caret{background:var(--honey);border-radius:2px;width:3px;height:.95em;margin-left:3px;animation:1s steps(2,end) infinite hm-blink}@keyframes hm-blink{50%{opacity:0}}@keyframes hm-shake{20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.hm-toast{white-space:nowrap;color:#0d0d0f;animation:hm-toast 1.4s var(--ease-out) both;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:7px 14px;font-size:14px;font-weight:700;display:flex;position:absolute;top:-34px;left:50%;translate:-50%}.hm-toast b{background:var(--honey);border-radius:999px;padding:1px 8px;font-size:13px}.hm-toast.is-full{background:var(--honey);font-size:16px}.hm-toast.is-full b{background:#fff}.hm-toast.is-rank{color:#0d0d0f;background:var(--rn)}.hm-toast.is-bad{color:#fff;background:#3d3528}@keyframes hm-toast{0%{opacity:0;transform:translateY(8px)scale(.9)}12%{opacity:1;transform:none}80%{opacity:1}to{opacity:0;transform:translateY(-6px)}}.hm-comb{--w:min(108px, 27cqw, 21cqh);width:calc(var(--w) * 2.62);height:calc(var(--w) * .866 * 3.08);flex:none;position:relative}.hm-cell{width:var(--w);height:calc(var(--w) * .866);margin:calc(var(--w) * -.433) 0 0 calc(var(--w) * -.5);translate:calc(var(--x) * var(--w) * 1.04) calc(var(--y) * var(--w) * .9);animation:hm-in .36s var(--ease-pop) both;animation-delay:calc(var(--i) * 30ms);touch-action:manipulation;background:0 0;padding:0;position:absolute;top:50%;left:50%}.hm-cell span{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);width:100%;height:100%;font-size:calc(var(--w) * .34);color:var(--on-dark);background:linear-gradient(#3e3624,#2a2416);place-items:center;font-weight:750;transition:transform 90ms,background .14s;display:grid}.hm-cell.is-mid span{color:#0d0d0f;background:linear-gradient(var(--honey), var(--honey-lo))}.hm-cell:active span{transform:scale(.9)}.hm-cell:focus-visible{outline:none}.hm-cell:focus-visible span{background:var(--rn);color:#0d0d0f}@media (hover:hover){.hm-cell:hover:not(:disabled) span{filter:brightness(1.18)}}@keyframes hm-in{0%{opacity:0;scale:.6}}.hm-actions{gap:10px;display:flex}.hm-actions .key{min-width:96px}.hm-actions .hm-shuffle{min-width:56px;padding:0 14px}.hm-shuffle svg{width:22px;height:22px;transition:rotate .42s var(--ease-out)}@media (min-width:900px) and (min-height:640px){.hm-rank{top:18px;left:32px;right:340px}.hm-strip{display:none}.hm-words,.hm-stage.is-open .hm-words{width:300px;animation:none;display:block;inset:18px 18px 18px auto}.hm-play{top:90px;right:320px}}.hm-sum{text-align:center;gap:4px;display:grid}.hm-sum b{font-size:20px}.hm-sum span{color:var(--on-dark-dim);font-size:14px}.hm-sum ul{flex-wrap:wrap;justify-content:center;gap:4px 10px;max-width:360px;margin:10px auto 0;display:flex}.hm-sum li{color:var(--on-dark-faint);font-size:13px;-webkit-text-decoration:line-through #fff3;text-decoration:line-through #fff3}.hm-sum li.is-got{color:var(--on-dark);font-weight:650;text-decoration:none}@media (prefers-reduced-motion:reduce){.hm-cell,.hm-toast,.hm-typed.is-shake,.hm-caret,.hm-stage.is-open .hm-words{animation:none}}}