@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}body{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;font-family:Arial,sans-serif;padding:3vh 1vw;min-height:100vh}.container{background:#fffffff2;border-radius:24px;width:100%;overflow:hidden;max-width:800px;flex:1;display:flex;flex-direction:column}.header{background:linear-gradient(90deg,#ff6b6b,#feca57);color:#fff;font-size:larger;text-align:center;overflow:hidden;padding:4vh 2vw;margin-top:5vh}.header a{color:#fff;text-decoration:none}#app{display:flex;flex-direction:column;align-items:center;padding:3vh 1vw;gap:3vh;flex:1;overflow:hidden}#instructions:before{content:"👉";margin-right:.5em}#phrase-to-draw{color:#333;font-size:2rem;font-weight:600;color:#2d3748;font-weight:700;margin-top:1vh;margin-bottom:1vh}.phrase-input{width:100%;padding:2vh 1vw;border:3px solid #e1e8ed;border-radius:16px;font-size:1.1rem;background:#f8fafc;transition:all .3s ease;outline:none}.phrase-input:focus,.phrase-input:hover{border-color:#667eea;background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px #667eea26}#drawing-area-container{width:100%;display:flex;flex-direction:column;align-items:center}#drawing-area,#drawing-to-describe,.archive img,.archive .text{border:3px solid #e1e8ed;border-radius:16px;background:#fff;box-shadow:0 4px 16px #667eea1a;overflow:hidden}#drawing-area:hover{border-color:#667eea;background:#fff}#color-picker,#thickness-picker{display:flex;gap:10px;margin-top:10px}#color-picker .swatch-container,#thickness-picker .swatch-container{width:30px;height:30px;cursor:pointer;transition:transform .2s ease;display:flex;flex-direction:column;justify-content:center;border:3px solid rgba(0,0,0,0)}#color-picker .swatch-container:hover,#thickness-picker .swatch-container:hover{transform:scale(1.1)}#color-picker .swatch-container.active,#thickness-picker .swatch-container.active{border-color:#667eea;transform:scale(1.2)}#color-picker .color-swatch,#thickness-picker .color-swatch{width:100%;height:100%;border-radius:50%;border:1px solid black}#color-picker .thickness-swatch,#thickness-picker .thickness-swatch{box-sizing:content-box;border:1px solid black}.spacer{flex-grow:1}button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #667eea4d}button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #667eea66}button:active{transform:translateY(0)}.archive{width:100%;flex-grow:1;position:relative}.archive .slide{width:100%;font-size:3rem;text-align:center;padding:20px;transition:all .5s ease;position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center}.archive .slide .text{padding:.5ex .5em;display:flex;flex-direction:column;justify-content:center}.archive .slide .spacer{height:7vh;flex-grow:0}.archive .player-name{font-size:.5em}.archive .controls{position:absolute;height:50px;display:flex;flex-direction:column;justify-content:space-between;bottom:0;right:0}@media (max-width: 768px){.archive .controls{right:10px}}.archive .controls{z-index:100;cursor:default}.archive .controls path{stroke:#42affa;stroke-width:2;fill:none}.archive .controls div{position:relative}.archive .controls div:hover path{stroke:#00f}.archive .controls div:active path{stroke:#000}.archive .controls #previous-slide:hover{top:-2px}.archive .controls #previous-slide:hover:active{top:0}.archive .controls #next-slide:hover{top:2px}.archive .controls #next-slide:hover:active{top:0}#homepage{display:flex;flex-direction:column;align-items:center;gap:3vh;font-size:2em;text-align:center}#homepage img#homepage-img{width:400px}label{display:inline-flex;flex-direction:row;align-items:center;margin-right:2em}label span{margin-left:.5em}