*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--red: #ff4326;--blue: #0077e6;--yellow: #ffc31f;--ink: #0b1116;--green: #00a86b;--pink: #ff5fa8;--bg: #f0f0f7;--panel: #ffffff;--empty: #ffffff;--peer: #fff3c4;--line: var(--ink);--text: var(--ink);--muted: #4a5360;--border: 4px;--radius: 22px;--radius-sm: 14px;--shadow: 5px 5px 0 var(--line);--bounce: cubic-bezier(.34, 1.56, .64, 1);--gutter: 7px;--font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-family:var(--font);color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #12151a;--panel: #1d222a;--empty: #262c36;--peer: #3a3520;--line: #fff7e6;--text: #fff7e6;--muted: #b7bec9}}body{min-height:100dvh;background-color:var(--bg);color:var(--text)}.page{max-width:80ch;margin-inline:auto;padding:2rem}.game{display:flex;flex-direction:column;align-items:center;gap:2.25rem;width:min(100%,36rem);margin-inline:auto;padding:2rem 1rem 3rem}.game__header{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.game__tagline{max-width:30ch;font-size:1.05rem;font-weight:700;line-height:1.25;color:var(--muted)}.game__play{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%}.wordmark{font-family:var(--font);font-size:clamp(3.4rem,17vw,5.6rem);font-weight:900;line-height:.85;letter-spacing:-.045em;text-transform:none}.wordmark__text{display:inline-block;color:var(--red);-webkit-text-stroke:.09em var(--line);paint-order:stroke fill;text-shadow:.06em .06em 0 var(--line);transform:scaleY(.9) rotate(-3deg);transform-origin:50% 80%;transition:transform .4s var(--bounce)}.wordmark:hover .wordmark__text{transform:scaleY(1) rotate(2deg) scale(1.04)}.wordmark--small{font-size:2.6rem}.wordmark--small .wordmark__text{color:var(--blue)}.btn,.level,.swatch{cursor:pointer;border:var(--border) solid var(--line);color:var(--text);background:var(--panel);box-shadow:var(--shadow);transition:transform .25s var(--bounce),box-shadow .25s var(--bounce),background-color .2s ease,opacity .2s ease;-webkit-tap-highlight-color:transparent}.btn{min-height:3.4rem;padding:.5rem 1.4rem;border-radius:var(--radius-sm);font-size:1.15rem;font-weight:900;letter-spacing:-.01em}.btn--blue{background:var(--blue);color:#fff}.btn--yellow{background:var(--yellow);color:var(--ink)}.btn--red{background:var(--red);color:#fff}.btn--ghost{background:transparent}.btn:hover:not(:disabled),.level:hover,.swatch:hover:not(:disabled){transform:translate(-2px,-3px) rotate(-1deg);box-shadow:7px 8px 0 var(--line)}.btn:active:not(:disabled),.level:active,.swatch:active:not(:disabled){transform:translate(4px,4px) scale(.97);box-shadow:1px 1px 0 var(--line);transition-duration:.08s}.btn:disabled,.swatch:disabled{cursor:default;opacity:.4;box-shadow:2px 2px 0 var(--line)}:focus-visible{outline:4px solid var(--blue);outline-offset:3px}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;width:100%}.level{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.7rem .4rem .6rem;border-radius:var(--radius-sm);line-height:1}.level__label{font-size:1.3rem;font-weight:900}.level__blurb{font-size:.72rem;font-weight:700;line-height:1.15;color:var(--muted);text-align:center}.level[aria-pressed=true]{background:var(--yellow);color:var(--ink);transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}.level[aria-pressed=true] .level__blurb{color:var(--ink)}.board{--gap: 4px;display:grid;gap:var(--gap);width:min(100%,30rem);aspect-ratio:1;padding:var(--gap);background:var(--line);border:var(--border) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.board__row{display:contents}.tile{position:relative;min-width:0;min-height:0;padding:0;cursor:pointer;border:0;border-radius:12px;background:var(--empty);transition:transform .3s var(--bounce),background-color .2s ease;-webkit-tap-highlight-color:transparent}.tile--peer{background:var(--peer)}.tile--selected{z-index:1;background:var(--panel);transform:scale(1.1);outline:4px solid var(--blue);outline-offset:0;border-radius:14px}.tile:hover:not(.tile--selected){transform:scale(1.05)}.tile:active{transform:scale(.94);transition-duration:.08s}.tile__fill{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;color:#fff;font-weight:900}.tile__fill--placed{animation:pop .45s var(--bounce)}.tile__fill--0{background:var(--red)}.tile__fill--1{background:var(--blue)}.tile__fill--2{background:var(--yellow);color:var(--ink)}.tile__fill--3{background:var(--ink);box-shadow:inset 0 0 0 2px #ffffff40}.tile__fill--4{background:var(--green)}.tile__fill--5{background:var(--pink)}.tile--given .tile__fill{box-shadow:inset 0 0 0 5px #fffc}.tile__shape{font-size:clamp(1rem,6vw,1.9rem);line-height:1}.tile__hint-dot{position:absolute;top:12%;right:12%;width:22%;aspect-ratio:1;border-radius:50%;background:#fff;border:2px solid var(--ink)}.tile--clash .tile__fill:after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(45deg,rgb(11 17 22 / .42) 0 5px,transparent 5px 11px)}.tile--clash{animation:wobble .5s var(--bounce)}.progress{width:min(100%,30rem);height:1.1rem;overflow:hidden;border:3px solid var(--line);border-radius:999px;background:var(--panel)}.progress__bar{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .5s var(--bounce)}.game__note{min-height:2.5em;max-width:30rem;font-size:1.05rem;font-weight:800;line-height:1.2;text-align:center}.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}.swatch{position:relative;width:4.4rem;aspect-ratio:1;padding:.35rem;border-radius:var(--radius-sm)}.swatch__chip{display:grid;place-items:center;width:100%;height:100%;border-radius:8px;color:#fff}.swatch__chip.tile__fill--2{color:var(--ink)}.swatch__left{position:absolute;right:-.55rem;bottom:-.6rem;display:grid;place-items:center;min-width:1.6rem;height:1.6rem;padding-inline:.2rem;border:3px solid var(--line);border-radius:999px;background:var(--yellow);color:var(--ink);font-size:.85rem;font-weight:900;line-height:1}.swatch[aria-pressed=true]{transform:translate(3px,3px) scale(1.05);box-shadow:2px 2px 0 var(--line);background:var(--yellow)}.swatch--blocked:not(:disabled){opacity:.35}.panel{width:100%;padding:1.5rem;border:var(--border) solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}.panel__title{margin-bottom:.75rem;font-size:1.9rem;font-weight:900;line-height:.95;letter-spacing:-.04em;transform:scaleY(.92);transform-origin:left bottom}.rules{display:flex;flex-direction:column;gap:.5rem;padding-left:1.4rem;font-weight:700;line-height:1.3}.rules li::marker{color:var(--red);font-weight:900}.panel__keys{margin-top:1rem;font-size:.9rem;font-weight:700;color:var(--muted)}.toggle{display:flex;align-items:center;gap:.9rem;padding-block:.4rem;font-weight:800;line-height:1.2;cursor:pointer}.toggle input{appearance:none;flex:none;display:grid;place-items:center;width:2rem;height:2rem;margin:0;cursor:pointer;border:var(--border) solid var(--line);border-radius:10px;background:var(--empty);transition:background-color .2s ease,transform .25s var(--bounce)}.toggle input:after{content:"";width:.7rem;height:.7rem;border-radius:50%;background:#fff;transform:scale(0);transition:transform .25s var(--bounce)}.toggle input:checked{background:var(--blue)}.toggle input:checked:after{transform:scale(1)}.toggle input:active{transform:scale(.88)}.signoff{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}.signoff__line{font-size:1rem;font-weight:800;color:var(--muted)}.win{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:1rem;overflow:hidden;background:#0b11168c;animation:fade .3s ease}.win__card{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;width:min(100%,26rem);padding:2rem 1.5rem 1.75rem;border:var(--border) solid var(--line);border-radius:28px;background:var(--panel);box-shadow:8px 8px 0 var(--line);text-align:center;animation:card-in .6s var(--bounce)}.win__title{font-size:clamp(2.4rem,11vw,3.4rem);font-weight:900;line-height:.88;letter-spacing:-.045em;color:var(--red);-webkit-text-stroke:.08em var(--line);paint-order:stroke fill;transform:scaleY(.92) rotate(-2deg)}.win__stats{font-size:1.1rem;font-weight:800}.win__actions{display:flex;flex-direction:column;gap:.9rem;width:100%;margin-top:.5rem}.win__mascot{position:relative;display:flex;justify-content:center;gap:1rem;width:5.5rem;height:5.5rem;padding-top:1.5rem;border:var(--border) solid var(--line);border-radius:30%;background:var(--yellow);animation:bob 1.6s var(--bounce) infinite alternate}.win__eye{width:.75rem;height:1rem;border-radius:50%;background:var(--ink)}.win__smile{position:absolute;bottom:1rem;left:50%;width:2rem;height:1rem;border:4px solid var(--ink);border-top:0;border-radius:0 0 2rem 2rem;transform:translate(-50%)}.win__confetti{position:absolute;inset:0;pointer-events:none}.win__piece{position:absolute;top:-8%;width:1rem;height:1rem;border:3px solid var(--ink);border-radius:4px;animation:fall 2.8s ease-in both}.win__piece--0{background:var(--red)}.win__piece--1{background:var(--blue)}.win__piece--2{background:var(--yellow)}@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes wobble{0%{transform:rotate(0)}30%{transform:rotate(-4deg) scale(1.04)}60%{transform:rotate(3deg)}to{transform:rotate(0)}}@keyframes fade{0%{opacity:0}}@keyframes card-in{0%{opacity:0;transform:translateY(40px) scale(.8)}}@keyframes bob{to{transform:translateY(-8px) rotate(4deg)}}@keyframes fall{0%{transform:translateY(0)}to{transform:translateY(110vh) rotate(540deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.win__confetti{display:none}}@media(max-width:26rem){.game{gap:1.75rem;padding-inline:.75rem}.swatch{width:3.8rem}.btn{padding-inline:1.1rem}}