:root{--spacing-big: min(5vw, 24px);--spacing: min(2.5vw, 16px);--spacing-small: min(1.25vw, 8px);--border-radius: 5px;--text-size-large: clamp(32px, 3vw, 46px);--text-size-medium: 24px;--text-size-small: 18px;--background-color: #fafafa;--foreground-color: #030301;--primary-color: #628395;--positive-color: #A6DDAA;--ambivalent-color: #DBAD6A;--negative-color: #EF809E}*{margin:0;padding:0;color:#000;font-family:Roboto,sans-serif;font-optical-sizing:auto;font-style:normal;line-height:1.5}html{background-color:var(--background-color)}body{display:flex;place-items:center;margin:0 auto;max-width:800px}section{display:flex;align-items:center}#root{max-width:1280px;margin:0 auto;text-align:center}.hint-container{display:flex;flex-direction:row;color:#000;align-items:center;width:min(400px,95vw);height:100%;flex:1;max-height:64px}.mid{flex:10;display:flex;padding:var(--spacing-small);flex-direction:column;justify-content:center;align-content:center;height:100%}.left,.right{min-width:40px;padding:5px 2px;height:100%;border:none;border-radius:var(--border-radius);background-color:var(--cell-border-color-light);flex:1}.left:hover,.right:hover{transform:scale(1.05)}.left:active,.right:active{transform:scale(1)}#root{--key-gap: 2px}.keyboard{display:flex;flex-wrap:wrap;justify-content:center;max-width:400px;width:min(95vw,400px);gap:var(--key-gap);margin-bottom:1rem}.row{display:flex;justify-content:center;width:100%;gap:var(--key-gap)}.key{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;padding:var(--spacing-small) 0;border-radius:var(--border-radius);cursor:pointer;font-size:var(--text-size-small);border:none;background-color:var(--cell-border-color-light);height:3rem}.key:hover{transform:scale(1.1)}.key:active{transform:scale(1)}.space{flex:2}.delete{flex:2;display:flex;align-items:center;justify-content:center}.lds-grid,.lds-grid div{box-sizing:border-box}.lds-grid{display:inline-block;position:relative;width:80px;height:80px}.lds-grid div{position:absolute;width:16px;height:16px;border-radius:50%;background:currentColor;animation:lds-grid 1.2s linear infinite}.lds-grid div:nth-child(1){top:8px;left:8px;animation-delay:0s}.lds-grid div:nth-child(2){top:8px;left:32px;animation-delay:-.4s}.lds-grid div:nth-child(3){top:8px;left:56px;animation-delay:-.8s}.lds-grid div:nth-child(4){top:32px;left:8px;animation-delay:-.4s}.lds-grid div:nth-child(5){top:32px;left:32px;animation-delay:-.8s}.lds-grid div:nth-child(6){top:32px;left:56px;animation-delay:-1.2s}.lds-grid div:nth-child(7){top:56px;left:8px;animation-delay:-.8s}.lds-grid div:nth-child(8){top:56px;left:32px;animation-delay:-1.2s}.lds-grid div:nth-child(9){top:56px;left:56px;animation-delay:-1.6s}@keyframes lds-grid{0%,to{opacity:1}50%{opacity:.5}}:root{--cell-border-color: #b4b4b4;--cell-border-color-light: #ddd;--cell-width: min(19vw, 80px);--cell-height: min(19vw, 80px);--border-width: 2px;--inner-border-width: 3px}*{margin:0;padding:0;box-sizing:border-box}.game-section{display:flex;flex-direction:column;align-items:center;gap:var(--spacing)}.spinner-container,.error-container{display:flex;gap:var(--spacing);flex-direction:column;justify-content:center;flex:1;min-height:calc(100vh - 100px)}.timer-container{display:grid;grid-template-columns:repeat(3,1fr);max-width:min(400px,95vw);gap:var(--spacing);width:100%;grid-column-start:1}.timer{display:flex;justify-content:center;align-items:center;flex-direction:row;grid-column-start:2;font-size:var(--text-size-medium);padding:var(--spacing-small) 0;border:solid var(--cell-border-color) var(--inner-border-width);border-radius:5px;width:100%}.buttons{display:grid;grid-template-columns:repeat(3,1fr);max-width:min(400px,95vw);font-size:min(2vw,1.5rem);font-weight:700;gap:var(--spacing);width:100%}.refresh-button{text-decoration:none;background-color:var(--primary-color)}.results-button{grid-column-start:2;background-color:var(--primary-color)}.timer-grid{grid-column:2/ span 1}.gameContainer{display:flex;flex-direction:row;align-items:center;gap:var(--spacing);border:solid var(--border-width) var(--cell-border-color)}.hintContainer{display:flex;flex-direction:column;color:#000;align-items:start;max-height:400px}.hintlist{display:flex;flex-direction:column}.hint{display:flex;align-items:center;justify-content:start;text-align:left;font-size:auto}.board{margin:0 auto;aspect-ratio:1;border-radius:5px;background-color:#fff;display:grid;align-items:center;justify-content:center;grid-template-columns:repeat(5,var(--cell-width));grid-template-rows:repeat(5,var(--cell-height))}input{width:100%;text-align:center;background-color:#fff;color:#000;outline:none;border:none;caret-color:transparent;font-weight:700;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:0;user-select:none;font-size:clamp(16px,6vw,32px);font-family:sans-serif}.number{font-family:sans-serif;color:#000;font-weight:700;font-size:clamp(12px,2vw,16px);margin:4px 8px;position:absolute}.cell{display:flex;aspect-ratio:1;border:solid var(--border-width) var(--cell-border-color)}input:focus{background-color:#646cff55;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cell:focus-within{z-index:100;border:#646cff var(--inner-border-width) solid;outline:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.empty{background-color:#000;border:solid var(--border-width) var(--cell-border-color)}.highlight{background-color:#646cff55}.correct{background-color:var(--positive-color)}.incorrect{background-color:var(--negative-color)}.revealed{border:var(--inner-border-width) var(--negative-color) solid}.reveal-button{grid-column:1/1;background-color:var(--negative-color)}.clear-button{background-color:var(--ambivalent-color)}.check-button{background-color:var(--positive-color)}.dialog{margin:0 auto;top:30vh;width:min(400px,100vw);padding:var(--spacing);border:var(--cell-border-color);border-radius:var(--border-radius)}dialog::backdrop{background-color:#00000080}.alert-container{display:flex;flex-direction:column;gap:var(--spacing-big)}.alert-text-container{display:flex;flex-direction:column;gap:var(--spacing-small)}.alert-button-container{display:flex;justify-content:center;gap:var(--spacing)}.confirm-button{font-size:var(--text-size-small);font-weight:700;color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;background-color:var(--positive-color);padding:var(--spacing-small) var(--spacing)}.cancel-button{font-size:var(--text-size-small);font-weight:700;color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;padding:var(--spacing-small) var(--spacing);background-color:var(--negative-color)}.controller{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%}.controller-button{padding:var(--spacing-small) 0;font-size:var(--text-size-small);font-weight:700;color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer}.controller-button:hover{filter:brightness(.9)}.controller-button:active{transform:translateY(2px)}.card{display:flex;border-radius:var(--border-radius);flex-direction:column;border:solid 1px black;padding:var(--spacing);width:min(400px,95vw);gap:var(--spacing);justify-content:space-around;align-content:space-around}.start-button{background-color:var(--primary-color)}.header{display:flex;justify-content:space-between;align-items:center;width:min(400px,95vw);margin-bottom:var(--spacing)}.header-content{display:flex;flex-direction:column;align-items:flex-start}.title{font-size:var(--text-size-large)}.date{font-size:var(--text-size-small)}.header-timer{font-size:var(--text-size-medium);font-weight:700}