.button-component{display:inline-block;padding:.5rem 1rem;border-radius:var(--border-radius-base);background-color:#fff;cursor:pointer;transition:all .3s ease-in-out}.button-component--primary{background-color:var(--primary);border-color:invisible;color:#fff}.chat-input-wrapper{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem}.chat-input-inner-wrapper{display:flex;width:100%;flex-direction:row}.chat-input{flex-grow:1;border-top-left-radius:.75rem;border-bottom-left-radius:.75rem;background-color:var(--background-alt);padding-left:.5rem;padding-right:.5rem}.chat-input:hover{background-color:var(--background-alt-hover)}.chat-input-button{background-color:var(--primary);color:var(--text-white);border-top-right-radius:.75rem;border-bottom-right-radius:.75rem;padding:.75rem 1rem}.chat-input-button:hover{background-color:var(--primary-hover)}.chat-input-button:active{background-color:var(--primary-active)}.chat-input-icon{color:var(--text);margin-right:.5rem;display:flex;height:1rem;width:1rem;flex-shrink:0}.chat-input-status{margin-bottom:.5rem;display:flex;width:100%;flex-direction:row;align-items:center;justify-content:center;border-radius:.5rem;background-color:var(--secondary);padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem}@media (min-width:768px){.chat-input-status{margin-left:1.25rem;margin-right:1.25rem;width:75%;font-size:1rem;line-height:1.5rem}}.message-bubble{position:relative;max-width:60%;padding:10px 20px;border-radius:20px;margin:10px;width:-moz-fit-content;width:fit-content;font-family:Arial,sans-serif}.player{background-color:var(--primary);margin-left:auto;color:var(--text-white);&:after{content:"";position:absolute;right:-10px;top:50%;width:0;height:0;border:12px solid transparent;border-left:12px solid var(--primary);border-right:0;border-top:0;margin-top:-5px;transform:translateY(-50%)}}.opponent{background-color:var(
    --background-alt
  );&:before{content:"";position:absolute;left:-10px;top:50%;width:0;height:0;border:12px solid transparent;border-right:12px solid var(--background-alt);border-left:0;border-top:0;margin-top:-5px;transform:translateY(-50%)}}@keyframes blink{50%{fill:transparent}}.dot{animation:blink 1s infinite;fill:var(--text)}.dot:nth-child(2){animation-delay:.25s}.dot:nth-child(3){animation-delay:.5s}.header-component{background-color:var(--background);position:sticky;top:0;z-index:10;display:flex;width:100%;align-items:center;justify-content:center;padding:1.5rem}.header-component__wrapper{display:flex;width:100%;max-width:100%;flex-direction:column;align-items:center;justify-content:space-between;gap:.5rem}@media (min-width:768px){.header-component__wrapper{max-width:1024px;flex-direction:row}}.header-component__header{text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:700}@media (min-width:768px){.header-component__header{font-size:1.5rem;line-height:2rem}}.theme-switch{position:relative;display:inline-block;height:2rem;width:4rem}.theme-switch-checkbox{opacity:0;width:0;height:0}.theme-switch-label{display:block;overflow:hidden;border-radius:9999px;cursor:pointer;background-color:var(--primary);transition:background-color .3s ease-in-out;position:relative;height:2rem}.theme-switch-label:focus,.theme-switch-label:hover{background-color:var(--secondary)}.theme-switch-label:active{transform:scale(.95);background-color:var(--accent)}.theme-switch-knob{position:absolute;margin:.125rem;padding:5px;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .3s ease-in-out;background-color:var(--background);height:1.75rem;width:1.75rem}.theme-switch-checkbox:checked+.theme-switch-label{background-color:var(--secondary)}.theme-switch-label .theme-switch-knob.theme-switch-knob--checked{--tw-translate-x:2rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.game-container-wrapper{position:relative;display:flex;height:100%;width:100%;max-width:64rem;flex-direction:column}.messages-wrapper{display:flex;flex-grow:1;flex-direction:column}.input-wrapper{position:sticky;bottom:0;width:100%;background-color:var(--background)}