.sq{--gap:clamp(8px, 2.4vmin, 14px);--tile-r:26%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;position:relative;container-type:size}.sq-inner{--coach:clamp(60px, 13cqh, 124px);--chrome:calc(max(var(--coach), 88px) + 118px);--bs:min(100cqw - 2 * var(--gutter), 100cqh - var(--chrome), 540px);width:100%;height:100%;padding:var(--s2) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));grid-template-rows:auto auto auto;grid-template-areas:"head""field""foot";align-content:safe center;justify-items:center;row-gap:clamp(10px,2.6cqh,24px);display:grid}.sq-inner>*{width:100%;max-width:max(var(--bs), min(100%, 420px))}.sq-head{align-items:center;gap:var(--s3);grid-area:head;display:flex}.sq-coach{width:var(--coach);height:var(--coach);flex:none;position:relative}.sq-coach__img{opacity:0;transform-origin:50% 100%;width:100%;height:100%;transition:opacity .12s ease-out, transform .32s var(--ease-bounce);position:absolute;inset:0;transform:translateY(6px)scale(.86)}.sq-coach__img.is-on{opacity:1;transform:none}.sq-bubble{min-width:0;padding:var(--s2) var(--s4);border-radius:var(--r-lg);background:var(--surface);border:2px solid var(--line);min-height:64px;box-shadow:0 var(--lip-sm) 0 var(--line);transition:background var(--dur-ui), border-color var(--dur-ui), box-shadow var(--dur-ui), color var(--dur-ui);flex:1;align-items:center;display:flex;position:relative}.sq-bubble:before{content:"";background:inherit;border-bottom:2px solid;border-left:2px solid;border-color:inherit;border-top-color:#0000;border-right-color:#0000;border-bottom-left-radius:4px;width:16px;height:16px;position:absolute;top:50%;left:-9px;transform:translateY(-50%)rotate(45deg)}.sq-says{flex:1;min-width:0;display:grid}.sq-say{visibility:hidden;flex-direction:column;grid-area:1/1;justify-content:center;gap:1px;min-width:0;display:flex}.sq-say.is-on{visibility:visible;animation:sq-say .26s var(--ease-bounce)}.sq-say__title{font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:clamp(var(--t-xl), 3.2cqh, var(--t-2xl));line-height:var(--lh-display);letter-spacing:var(--ls-display)}.sq-say__sub{font-size:var(--t-sm);color:var(--ink-2);text-wrap:balance;font-weight:600;line-height:1.35}.sq-say:lang(ja){word-break:auto-phrase}.sq[data-phase=input] .sq-bubble{background:var(--dc);border-color:var(--dc-lip);box-shadow:0 var(--lip-sm) 0 var(--dc-lip);color:var(--dc-ink)}.sq[data-phase=input] .sq-say__sub{color:inherit;opacity:.92}.sq[data-phase=clear] .sq-bubble{background:var(--green-soft);border-color:var(--green);box-shadow:0 var(--lip-sm) 0 var(--green-lip)}.sq[data-phase=fail] .sq-bubble{background:var(--red-soft);border-color:var(--red);box-shadow:0 var(--lip-sm) 0 var(--red-lip)}.sq-level{min-width:64px;min-height:64px;padding:var(--s1) var(--s3);border-radius:var(--r-md);background:var(--dc);color:var(--dc-ink);box-shadow:0 var(--lip-sm) 0 var(--dc-lip);flex-direction:column;flex:none;justify-content:center;align-items:center;display:flex}.sq-level__label{font-size:var(--t-xs);opacity:.9;white-space:nowrap;font-weight:700;line-height:1.2}.sq-level__n{font-size:var(--t-3xl);animation:sq-pop .36s var(--ease-bounce);font-weight:700;line-height:1}.sq-field{grid-area:field;place-items:center;display:grid}.sq-board{width:var(--bs);aspect-ratio:1;margin-bottom:var(--lip);gap:var(--gap);padding:var(--gap);padding-bottom:calc(var(--gap) + var(--lip));border-radius:var(--r-xl);background:var(--dc-soft);box-shadow:0 var(--lip) 0 var(--line-strong);touch-action:none;transition:border-color var(--dur-ui);border:3px solid #0000;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.sq[data-phase=input] .sq-board{border-color:var(--dc);box-shadow:0 var(--lip) 0 var(--dc-lip)}.sq-tile{--tile-bg:var(--surface);--tile-edge:var(--line);--tile-lip:var(--line-strong);--face:var(--ink-3);--cheek:.3;border-radius:var(--tile-r);background:var(--tile-bg);border:2px solid var(--tile-edge);min-width:0;min-height:0;box-shadow:0 var(--lip) 0 var(--tile-lip);color:var(--face);transition:transform var(--dur-press) ease-out;-webkit-tap-highlight-color:transparent;touch-action:none;place-items:center;display:grid;position:relative}.sq-tile[aria-disabled=true]{cursor:default}.sq[data-phase=input] .sq-tile:active{transform:translateY(var(--lip));box-shadow:0 0 0 var(--tile-lip)}.sq-tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--tile-r)}.sq-tile.is-lit{--tile-bg:var(--dc);--tile-edge:var(--dc-lip);--tile-lip:var(--dc-lip);--face:var(--dc-ink);--cheek:.85;animation:sq-wake .2s var(--ease-out)}.sq-tile.is-tapped{transform:translateY(calc(var(--lip) * .7));box-shadow:0 calc(var(--lip) * .3) 0 var(--tile-lip)}.sq-tile.is-wrong{--tile-bg:var(--red);--tile-edge:var(--red-lip);--tile-lip:var(--red-lip);--face:#fff;--cheek:.6;animation:.38s ease-out sq-shake}.sq--safe .sq-tile.is-wrong{--tile-bg:var(--d-speed);--tile-edge:var(--d-speed-lip);--tile-lip:var(--d-speed-lip)}.sq-tile.is-answer{outline:4px solid var(--gold);outline-offset:2px;z-index:1;animation:.52s ease-in-out 3 sq-beacon}.sq--safe .sq-tile.is-answer{outline-color:var(--d-focus)}.sq[data-phase=clear] .sq-tile:not(.is-lit){--face:var(--dc);--cheek:.7}.sq[data-phase=clear] .sq-tile{animation:sq-hop .44s var(--ease-bounce) both;animation-delay:calc(var(--d,0) * 45ms)}.sq-face{pointer-events:none;width:70%;height:70%;overflow:visible}.sq-face--sleep{opacity:.6}.sq-face__cheek{fill:var(--pink);opacity:var(--cheek)}.sq-tile__key{color:var(--ink-3);pointer-events:none;font-size:clamp(.72rem,2vmin,.95rem);font-weight:700;line-height:1;display:none;position:absolute;top:7%;left:11%}.sq-tile.is-lit .sq-tile__key,.sq-tile.is-wrong .sq-tile__key{color:var(--dc-ink);opacity:.8}.sq-tile__badge{aspect-ratio:1;background:var(--surface);width:34%;color:var(--red);box-shadow:0 var(--lip-sm) 0 var(--red-lip);border:2px solid var(--red);border-radius:50%;place-items:center;padding:5%;display:grid;position:absolute;top:-8%;right:-8%}.sq--safe .sq-tile__badge{color:var(--d-speed);border-color:var(--d-speed);box-shadow:0 var(--lip-sm) 0 var(--d-speed-lip)}.sq-foot{align-items:center;gap:var(--s2);flex-direction:column;grid-area:foot;display:flex}.sq-meter{justify-content:center;align-items:center;gap:var(--s3);width:100%;display:flex}.sq-pips{flex:0 auto;justify-content:center;gap:5px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.sq-pips li{border-radius:var(--r-pill);background:var(--line-strong);width:26px;min-width:3px;height:12px;transition:background var(--dur-ui), transform var(--dur-ui) var(--ease-bounce);flex:0 auto}.sq[data-phase=watch] .sq-pips li.is-on{background:var(--ink-3)}.sq-pips li.is-on{background:var(--dc);transform:scaleY(1.2)}.sq[data-phase=clear] .sq-pips li.is-on{background:var(--green)}.sq-pips li.is-miss{background:var(--red)}.sq--safe .sq-pips li.is-miss{background:var(--d-speed)}.sq-bar{border-radius:var(--r-pill);background:var(--line-strong);flex:auto;max-width:260px;height:12px;position:relative;overflow:hidden}.sq-bar__fill,.sq-bar__miss{border-radius:var(--r-pill);position:absolute;top:0;bottom:0;left:0}.sq-bar__fill{background:var(--dc);transition:width var(--dur-ui) var(--ease-out)}.sq[data-phase=watch] .sq-bar__fill{background:var(--ink-3)}.sq[data-phase=clear] .sq-bar__fill{background:var(--green)}.sq-bar__miss{background:var(--red)}.sq--safe .sq-bar__miss{background:var(--d-speed)}.sq-count{text-align:left;min-width:4.5ch;font-size:var(--t-lg);color:var(--ink-2);flex:none;font-weight:700}.sq-count__sep{color:var(--ink-3);margin:0 .15em}.sq-keys{font-size:var(--t-xs);color:var(--ink-3);text-align:center;display:none}@media (hover:hover) and (pointer:fine){.sq-tile__key,.sq-keys{display:block}}.sq--large .sq-inner{--chrome:calc(max(var(--coach), 128px) + 140px)}@media (orientation:landscape) and (height<=560px){.sq-inner{--coach:clamp(52px, 22cqh, 96px);--bs:min(56cqw, 100cqh - 28px, 540px);align-content:stretch;column-gap:var(--s5);row-gap:var(--s4);padding-top:var(--s1);grid-template:".field"1fr"head field""foot field"".field"1fr/minmax(0,1fr) auto}.sq-inner>*{max-width:none}.sq-field{grid-row:1/-1}}@keyframes sq-wake{0%{scale:1.07}to{scale:1}}@keyframes sq-say{0%{translate:0 4px;scale:.97}to{translate:0;scale:1}}@keyframes sq-pop{0%{scale:.4}to{scale:1}}@keyframes sq-hop{0%,to{translate:0}40%{translate:0 -12%}}@keyframes sq-shake{0%,to{translate:0}20%{translate:-6%}45%{translate:5%}70%{translate:-3%}}@keyframes sq-beacon{0%,to{scale:1}50%{scale:1.03}}.sq--still .sq-tile,.sq--still .sq-level__n,.sq--still .sq-coach__img,.sq--still .sq-say,.sq--still .sq-pips li,.sq--still .sq-bar__fill{transition:none!important;animation:none!important}