:root{--letter-box:32px;--font-size:16px;--columns:15;--rows:15;--gap:0px}.word-search{grid-template-columns:repeat(auto-fill,minmax(1fr,500px));width:calc(100% - 2rem);max-width:500px;margin:1rem auto 0;display:grid}.debug{width:calc(calc(var(--letter-box)*var(--columns)) + calc(var(--gap)*calc(var(--columns) - 1)));color:#fff;pointer-events:none;z-index:999;background-color:#000000bf;width:fit-content;margin:0 auto;padding:1rem;display:block;position:fixed;bottom:0;left:0}.word-search__grid,.word-search__letters,.word-search__highlights{width:calc(calc(var(--letter-box)*var(--columns)) + calc(var(--gap)*calc(var(--columns) - 1) + 20px));height:calc(calc(var(--letter-box)*var(--rows)) + calc(var(--gap)*calc(var(--rows) - 1) + 20px));display:block}.word-search__grid{border:2px solid #000;border-radius:.5rem;margin-bottom:2rem;padding:.5rem;position:relative;overflow:hidden}.word-search__letters{grid-template-columns:repeat(var(--columns),var(--letter-box));grid-template-rows:repeat(var(--columns),var(--letter-box));gap:var(--gap);z-index:1;display:grid;position:absolute;top:.5rem;left:.5rem}.word-search__letter{font-size:var(--font-size);width:var(--letter-box);height:var(--letter-box);-webkit-user-select:none;user-select:none;cursor:pointer;color:#000;pointer-events:none;text-transform:uppercase;border-radius:2rem;place-items:center;font-weight:700;text-decoration:none;display:grid}.word-search__highlights{position:relative}.word-search__highlight{width:var(--letter-box);height:var(--letter-box);box-sizing:border-box;border:2px solid #000000bf;border-radius:2rem;position:absolute}.word-search__highlight--placed{border:2px solid #00ff00bf}.words-list{grid-template-columns:repeat(3,1fr);max-width:500px;display:grid}.word .word__value{text-transform:uppercase;font-size:var(--font-size);margin:0 0 1rem;font-weight:700;display:inline-block;position:relative}.word:nth-child(3n+2){text-align:center}.word:nth-child(3n+3){text-align:right}.word__value:after{content:"";background-color:#ff4500;width:0%;height:2px;transition:width .2s ease-in-out;position:absolute;top:calc(50% - 1px);left:0}.word--found .word__value:after{width:100%}.end{z-index:1000;text-align:center;background-color:#ffffffe6;place-items:center;width:100%;height:100%;display:grid;position:fixed;top:0;left:0}.end__content{text-align:center;background-color:#f7f7f7;flex-direction:column;justify-content:flex-start;align-items:flex-start;max-width:450px;padding:27px;display:flex}.end__button,.start__button{appearance:none;cursor:pointer;background-color:#0000;border:2px solid #000;margin:auto;padding:.5rem 1.5rem;font-size:1.25rem;font-weight:700}