#app{background-color:#1a3a4e;min-height:100vh}.primary-button{display:flex;gap:1rem;margin-bottom:1rem;background-color:#ff9800;border:none;border-radius:4px;color:#e0e0e0;cursor:pointer;font-size:1rem;font-weight:600;padding:.5rem 1rem;transition:background-color .3s;text-decoration:none}.primary-button:hover{background-color:#f57c00}.primary-text{font-size:1.5rem;font-weight:700}.primary-text,.secondary-text{margin-bottom:1rem;color:#e0e0e0}.secondary-text{font-size:1.2rem}.secondary-background{justify-content:space-between;width:150px;height:100%}.board-wrapper,.secondary-background{background-color:#3c6e8f;display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px;border:2px solid #ccc;border-radius:6px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.board-wrapper{margin:10px;height:500px;width:500px}.board-row{display:flex;flex:1;width:100%}.board-cell{flex:1;position:relative;box-sizing:border-box}.water{background-color:#4a6a85}.land,.water{width:100%;height:100%;border:1px solid #2c3e50;position:relative}.land{background-color:#2ecc71}.out-of-bounds{width:100%;height:100%;position:relative;background-color:#3c6e8f}@media (max-width:767px){.primary-text{font-size:1.2rem;margin-bottom:.5rem}.secondary-text{font-size:1rem;margin-bottom:.5rem}.secondary-background{width:120px;padding:10px}.board-wrapper{height:300px;width:300px}.primary-button{font-size:.8rem;padding:.4rem .8rem}}