diff --git a/src/index.css b/src/index.css index e96ae47cc8b719748ad41c73993ba359a85ad35f..fd4d4e9ae4b03401059d1c29d45faf4a288acf91 100644 --- a/src/index.css +++ b/src/index.css @@ -349,3 +349,65 @@ ol { transform: scale(1); } } + +@media (max-width: 720px) { + #game-board button { + width: 3.8rem; + height: 3.8rem; + font-size: 2em; + } + + #players button { + width: 3rem; + border: none; + background: none; + color: #c3ba78; + font-size: 0.9rem; + cursor: pointer; + transition: color 0.2s; + padding: 0.5rem 0.25rem 0.25rem 0.25rem; + text-align: center; + } + + #players button:hover { + color: #f8ca31; + } + + .player { + border: 2px solid transparent; + padding: 0.5rem; + border-radius: 4px; + font-weight: bold; + } + + .player-name { + display: inline-block; + width: 3rem; + font-size: 0.9rem; + color: #e1dec7; + text-transform: uppercase; + margin-right: 0.7em; + border-radius: 4px; + text-overflow: ellipsis; + text-align: center; + } + + .player input { + font: inherit; + font-size: 1rem; + width: 3rem; + border: none; + padding: 0.5rem; + animation: pulse-text 2s infinite; + background-color: #46432f; + text-align: center; + text-transform: uppercase; + } + + .player-symbol { + margin-left: 1rem; + font-size: 1rem; + color: #e1dec7; + } + +}