:root{--square-size:3rem;--letter-size:2rem;--base-font-size:16px;--medium-font-size:18px;--large-font-size:24px;--bg-color:white}html,body{background:var(--bg-color);margin:0;padding:0;width:100%;height:100%;font-family:Roboto,Ubuntu,system-ui,sans-serif;font-size:var(--base-font-size);text-align:center}#login-container{display:flex;flex-direction:row;gap:.5em;align-items:center;justify-content:center;padding:2em;flex-wrap:wrap}#login-container input{width:8em;padding:8px 12px;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;font-size:var(--medium-font-size)}#login-container span{display:inline}@media screen and (max-width:32rem){#login-container{flex-direction:column}#login-container span{display:none}}#frame{background:var(--bg-color);padding:2em .5em .5em;display:inline-block;margin:0 auto}#app{width:auto;display:flex;align-items:flex-start;justify-content:center;font-weight:700}#toast{display:none;background:#000;color:#fff;text-align:center;border-radius:8px;padding:1em .3em;width:14em;position:absolute;bottom:2em;left:calc(50% - 7em);font-size:1.3em;pointer-events:none}@keyframes toast-fade{0%{opacity:0;transform:translateY(2em)}5%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2em)}}.toast-animate{animation:toast-fade 2.5s ease-in-out forwards}dialog::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}dialog{min-width:50%;border:1px solid;border-radius:8px;text-align:center}.crossword-grid{display:grid;gap:1px;background:#333;padding:1px;outline:none;box-shadow:none;transform:translateZ(0);overflow:hidden}.crossword-grid:focus{box-shadow:0 0 0 4px #333}.square{width:var(--square-size);height:var(--square-size);display:flex;align-items:center;justify-content:center;font-size:var(--letter-size);font-weight:700;overflow:hidden;will-change:transform}.square.black{background:#333}.square.white{background:#fff;cursor:pointer;border:2px solid transparent}.square.white:hover{background:#eee}.square.locked{background:#e8e8f6;cursor:default;color:#778}.square.highlighted{background:#ff9}.square.selected{border:2px solid red}.crossword-grid.complete{animation:boing .6s cubic-bezier(.25,.46,.45,.94)}@keyframes boing{0%{transform:scale(1)}40%{transform:scale(1.08)}60%{transform:scale(.95)}75%{transform:scale(1.02)}90%{transform:scale(.98)}100%{transform:scale(1)}}.crossword-grid.complete .square.white,.crossword-grid.complete .square.locked{background:#efe}.crossword-grid.complete .square.white,.crossword-grid.complete .square.locked{color:#030}.crossword-grid.perfect .square.white,.crossword-grid.perfect .square.locked{background:#fff9c0;color:#321!important}.crossword-grid.perfect,.crossword-grid.perfect .square.black{background:#8e6315}.square.incorrect{background:#fab;color:#a00}#hints-container,#stats-container{display:block;margin:1em auto .5em;text-align:center;font-size:var(--large-font-size)}#stats-container table{text-align:left;margin:0 auto}#stats-container table td:nth-child(1){min-width:75%}#stats-container table td:nth-child(2){text-align:center}#hints-container{display:flex;gap:8px;justify-content:center;margin:16px 0}.click-to-copy,button{padding:8px 12px;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer;font-size:var(--medium-font-size)}.click-to-copy:hover,button:hover:not(:disabled){background:#e0e0e0}button:disabled{opacity:.4;cursor:not-allowed}#hints-container button{transition:opacity .2s,background .2s}#hints-container button.hint-used{background:#ddd;color:#999}#authkey{width:100%;text-align:center;padding:6px;background:#eee;border:1px solid #aaa;margin:6px;border-radius:6px}.card{will-change:transform}.card,.card__shine,.card__glare,.card__foil,.card__moire{backface-visibility:hidden}.card-scene{perspective:800px;display:inline-block}.card{transform-style:preserve-3d;transform:rotateY(var(--ry))rotateX(var(--rx));overflow:hidden;position:relative}.card__shine,.card__glare,.card__foil,.card__moire{pointer-events:none;position:absolute;inset:0;transition:opacity .2s}.card__shine{background:repeating-linear-gradient( 110deg,hsla(10,100%,70%,0) 0%,#ffb366 3%,hsla(40,100%,70%,.5) 6%,#ffdb4d 9%,hsla(59,100%,65%,.5) 12%,#f0ff4d 15%,hsla(63,100%,65%,.5) 18%,#fff04d 21%,hsla(45,100%,65%,.3) 24%,#ffb54d 27%,hsla(25,100%,70%,.5) 30%,#ffc966 33%,hsla(52,100%,70%,.5) 36%,#f0ff4d 39%,hsla(37,100%,65%,0) 42% ),repeating-linear-gradient( 90deg,#000 0,#000 1px,#666 1px,#666 2px );background-size:400% 400%,2px 2px;background-position:calc(((50% - var(--bgx,50%)) * 2.6) + 50%)calc(((50% - var(--bgy,50%)) * 3.5) + 50%),0 0;background-blend-mode:overlay;mix-blend-mode:color-dodge;opacity:var(--shine-opacity,0)}.card__glare{background:radial-gradient( circle at var(--px) var(--py),#fef 20%,transparent 50% );mix-blend-mode:hard-light;opacity:var(--glare-opacity,0)}.card__moire{background:repeating-radial-gradient( circle,#f00 0,#f90 1px,transparent 1px,transparent 6px );mix-blend-mode:color;opacity:var(--moire-opacity,0)}.card__foil{background-image:url(/flakes.png);background-size:cover;opacity:var(--foil-opacity,0);mix-blend-mode:soft-light}