.wg,.wg-result,.wg-help{--hit: #12757f;--hit-ink: #ffffff;--near: #c4690a;--near-bg: color-mix(in srgb, var(--near) 13%, var(--cell));--miss-bg: color-mix(in srgb, var(--ink) 9%, var(--bg-2));--miss-ink: var(--ink-2)}:root[data-palette=colorblind] :is(.wg,.wg-result,.wg-help){--hit: #0072b2;--near: #d55e00}:root[data-look=dusk] :is(.wg,.wg-result,.wg-help){--hit: #1a8f99;--near: #f0a03a}.wg{--chrome: 372px;--gap: 6px;--t: clamp(34px, min(calc((100dvh - var(--chrome)) / 6 - var(--gap)), calc((100vw - 32px - 4 * var(--gap)) / 5)), 62px);display:grid;grid-template-columns:minmax(0,1fr);gap:7px;max-width:500px;margin:0 auto;user-select:none;-webkit-user-select:none}@media(max-height:700px)and (pointer:coarse){.wg{--chrome: 340px;--gap: 5px}}.wg-top{display:flex;align-items:center;gap:6px;min-height:44px}.wg-label{flex:none;display:flex;flex-direction:column;line-height:1.15}.wg-label b,.wg-label span{white-space:nowrap}.wg-label b{font-family:var(--font-display);font-size:1.05rem}.wg-label span{color:var(--ink-2);font-size:.9rem;font-variant-numeric:tabular-nums}.wg-gap{flex:1 1 auto}.wg-reveal{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px;font-size:.95rem;line-height:1.1;text-align:left}.wg-reveal:disabled{opacity:.55}.wg-reveal.is-pulse{animation:wg-pulse calc(1.2s * var(--motion)) ease-in-out 3}@keyframes wg-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--hit) 30%,transparent)}}.wg-ico{display:inline-grid;place-items:center}.wg-ico svg,.wg-key svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.wg-icon{flex:none;min-width:44px;min-height:44px;padding:6px 8px;font-size:1.2rem;font-weight:800}.wg-board{display:grid;grid-template-rows:repeat(6,var(--t));gap:var(--gap);justify-content:center}.wg-board.is-in{animation:wg-in calc(.3s * var(--motion)) ease-out}@keyframes wg-in{0%{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}.wg-row{display:grid;grid-template-columns:repeat(5,var(--t));gap:var(--gap)}.wg-row.is-shake{animation:wg-shake calc(.4s * var(--motion)) ease-in-out}@keyframes wg-shake{15%,55%{transform:translate(-7px)}35%,75%{transform:translate(7px)}}.wg-tile{position:relative;display:grid;place-items:center;width:var(--t);height:var(--t);border-radius:12px;border:2px solid var(--line);background:var(--cell);color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:calc(var(--t) * .5);line-height:1;text-transform:uppercase}.wg-row.is-current .wg-tile{border-color:color-mix(in srgb,var(--ink-2) 45%,var(--line))}.wg-tile.is-typed{border-color:var(--ink)}.wg-tile.is-pop{animation:wg-pop calc(.12s * var(--motion)) ease-out}@keyframes wg-pop{50%{transform:scale(1.08)}}.wg-tile.is-ghost{color:color-mix(in srgb,var(--hit) 55%,transparent);border-style:dashed;border-color:var(--hit)}.wg-tile.is-ghost:after{content:"";position:absolute;top:12%;right:12%;width:13%;height:13%;border-radius:50%;background:color-mix(in srgb,var(--hit) 55%,transparent)}.wg-tile.is-hit{background:var(--hit);border-color:var(--hit);color:var(--hit-ink)}.wg-tile.is-hit:after{content:"";position:absolute;top:11%;right:11%;width:14%;height:14%;min-width:5px;min-height:5px;border-radius:50%;background:var(--hit-ink)}.wg-tile.is-near{background:var(--near-bg);border-color:var(--near)}.wg-tile.is-near:before{content:"";position:absolute;inset:9%;border-radius:50%;border:max(2.5px,calc(var(--t) * .065)) solid var(--near)}.wg-tile.is-miss{background:var(--miss-bg);border-color:transparent;color:var(--miss-ink)}.wg-tile.is-miss:after{content:"";position:absolute;left:24%;right:24%;top:50%;height:max(2px,calc(var(--t) * .05));border-radius:2px;background:var(--miss-ink);transform:rotate(-24deg)}.wg-tile.is-new{animation:wg-stamp calc(.32s * var(--motion)) ease-out backwards;animation-delay:calc(var(--i) * .13s * var(--motion))}.wg-tile.is-new:before,.wg-tile.is-new:after{animation:wg-mark calc(.32s * var(--motion)) ease-out backwards;animation-delay:calc(var(--i) * .13s * var(--motion))}@keyframes wg-stamp{0%,30%{transform:scale(.9);background:var(--cell);border-color:var(--ink);color:var(--ink)}70%{transform:scale(1.06)}to{transform:none}}@keyframes wg-mark{0%,45%{opacity:0;transform:scale(.4)}to{opacity:1}}.wg-tile.is-miss.is-new:after{animation-name:wg-strike}@keyframes wg-strike{0%,45%{opacity:0;transform:rotate(-24deg) scaleX(0)}to{opacity:1;transform:rotate(-24deg)}}.wg-row.is-win .wg-tile{animation:wg-bob calc(.42s * var(--motion)) ease-out both;animation-delay:calc(var(--i) * .07s * var(--motion))}@keyframes wg-bob{40%{transform:translateY(-9px)}to{transform:none}}.wg-line{display:grid;align-items:center;min-height:24px}.wg-line>*{grid-area:1 / 1}.wg-msg{text-align:center;color:var(--ink-2);font-size:.98rem;font-weight:600;line-height:1.25}.wg-msg.is-bad{color:var(--coral)}.wg-msg.is-good{color:var(--hit)}.wg-legend{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-size:.9rem;font-weight:600}.wg-legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.wg-mini{--t: 22px;border-radius:6px;border-width:1.5px;font-size:12px}.wg-mini.is-hit:after{min-width:3px;min-height:3px}.wg-mini.is-near:before{border-width:2px;inset:8%}.wg-kb{display:grid;gap:7px;touch-action:manipulation}.wg-kb-row{display:flex;gap:5px;justify-content:center}.wg-key{position:relative;flex:1 1 0;min-width:0;max-width:46px;height:46px;padding:0;border-radius:9px;border:1.5px solid var(--line);background:var(--cell);color:var(--ink);box-shadow:0 2px 0 var(--line);font-family:var(--font-display);font-weight:800;font-size:1.1rem;cursor:pointer;display:grid;place-items:center}.wg-key:active:not(:disabled){transform:translateY(1px);box-shadow:none}.wg-key:disabled{cursor:default}.wg-key.is-wide{flex:1.55 1 0;max-width:70px;font-size:.85rem}.wg-key.is-hit{background:var(--hit);border-color:var(--hit);color:var(--hit-ink);box-shadow:none}.wg-key.is-hit:after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--hit-ink)}.wg-key.is-near{background:var(--near-bg);border-color:var(--near);box-shadow:none}.wg-key.is-near:before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;max-width:86%;transform:translate(-50%,-50%);border-radius:50%;border:2.5px solid var(--near);box-sizing:border-box}.wg-key.is-miss{background:var(--miss-bg);border-color:transparent;color:var(--miss-ink);box-shadow:none}.wg-key.is-miss:after{content:"";position:absolute;left:26%;right:26%;top:50%;height:2px;background:var(--miss-ink);transform:rotate(-24deg)}.wg-done{text-align:center;padding:6px 4px 2px}.wg-done h2{font-family:var(--font-display);font-size:1.3rem;margin:2px 0 6px}.wg-done p{margin:0 0 12px;color:var(--ink-2)}.wg-done-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.wg-done-buttons .suvi-btn{min-height:48px;min-width:140px}.wg-minigrid{display:grid;gap:5px;justify-content:center;margin:8px 0 14px}.wg-minirow{display:flex;gap:5px}.wg-result .big{letter-spacing:.04em}.wg-help p{margin:0 0 10px}.wg-help-row{display:flex;align-items:center;gap:10px}.wg-help-row .wg-mini{--t: 30px;font-size:16px;flex:none}.wg-note{margin:-4px 0 10px;font-size:.9rem;color:var(--ink-2)}@media(pointer:fine)and (min-width:700px){.wg{--chrome: 380px}.wg-key{height:52px;max-width:48px}.wg-key.is-wide{max-width:76px}}:root[data-text-size=large] .wg{--chrome: 400px}@media(max-height:700px)and (pointer:coarse){:root[data-text-size=large] .wg{--chrome: 372px}}:root[data-text-size=large] .wg-reveal{padding-inline:10px;font-size:calc(.95rem * 16 / 19)}:root[data-text-size=large] .wg-label b{font-size:1rem}:root[data-text-size=large] .wg-label span{font-size:.85rem}:root[data-text-size=large] .wg-legend{gap:10px;font-size:.85rem}:root[data-text-size=large] .wg-key{font-size:1.05rem}:root[data-text-size=large] .wg-key.is-wide{font-size:calc(.85rem * 16 / 19)}
