html {
    min-height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100%;
    background: #061d33;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}

.no-js-message {
    color: white;
    position: absolute;
    width: 100%;
    padding: 50px;
    background: #000000e0;
    border-radius: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

p {
    font-weight: 600;
}

ul {
    text-align: left;
    margin-top: 20px;
    padding: 0 20px;
}

li > button {
    font-weight: 800; 
    background: none;
    border: none;
    float: right;
    color: #ffffff94;
}

.flex-container {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.page-title {
    padding: 50px 0;
    font-weight: bold;
}

.page-title h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0;
    font-family: 'Adamina', 'Georgia', serif;
    letter-spacing: 5px;
    font-size: 30px;
}

.input-group {
	margin-bottom: 5px;
}
.social-share-buttons a {
  text-decoration: none;
}

.share-tool-section {
	text-align: center;
}

.share-tool-section .social-share-buttons {
    padding: 10px 20px;
    background: none;
}

.share-tool-section .social-share-buttons a {
    color: #ffffff99;
    padding: 8px;
}

.share-tool-section .social-share-buttons a i {
    border: 1px solid #ffffff21;
    padding: 10px;
    border-radius: 6px;
}


/* App styles */

.typing-trainer-app {
    margin-bottom: 40px;
	width: 100%;
}

.app-container {
    max-width: 500px;
    margin-right: auto;
	margin-left: auto;
    background: white;
    text-align: center;
    overflow: hidden;
    padding: 35px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.settings-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #ff9901;
    transition: color 0.3s;
    z-index: 2;
}

.settings-btn:hover {
    color: #e68a00;
}


.settings-panel {
    text-align: left;
    background: #fff7e6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.settings-panel h2 {
    margin-top: 0;
    color: #cc7a00;
}

.settings-panel select {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
}


.controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.controls span {
    font-weight: bold;
    color: #061d33;
    margin-right: 5px;
}

.time-selector,
.mode-selector, .difficulty-selector, .challenge-mode-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.time-selector button,
.mode-selector button, .difficulty-selector button, .challenge-mode-selector button {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.time-selector button.active,
.mode-selector button.active, 
.difficulty-selector button.active, 
.challenge-mode-selector button.active {
    background: #ff9901;
    color: white;
    border-color: #ff9901;
}

.time-selector button:hover,
.mode-selector button:hover,
.difficulty-selector button:hover, 
.challenge-mode-selector button:hover {
    background: #ffe0b3;
}


.test-area {
    margin-bottom: 20px;
}

.prompt-text {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 6px;
    min-height: 80px;
    text-align: left;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.prompt-text .correct {
    color: #061d33;
}

.prompt-text .incorrect {
    color: red;
}

#typing-input {
    width: 100%;
    padding: 12px;
    border: 1.8px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#typing-input:focus {
    border-color: #ff9901;
    box-shadow: 0 0 6px 2px rgba(255, 153, 1, 0.3);
}

/* Stats Row */
.stats {
    display: flex;
    justify-content: space-around;
    background: #f7f7f7;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #061d33;
}

/* Start / Retry Button */
.controls-bottom {
    margin-bottom: 20px;
}

#start-btn,
#retry-btn {
    background-color: #ff9901;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 1.3px;
    transition: background-color 0.3s ease;
}

#start-btn:hover,
#retry-btn:hover {
    background-color: #e68a00;
}

/* Results */
.results h2 {
    color: #cc7a00;
    margin-bottom: 10px;
}

.results p {
    font-weight: 600;
    color: #061d33;
}


#clear-history-btn {
  background-color: #e74c3c;  
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
  margin-bottom: 12px;
  transition: background-color 0.3s ease;
  user-select: none;
}

#clear-history-btn:hover {
  background-color: #c0392b;   
}

#clear-history-btn:focus {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

/* History */
.history {
	display: none;
    margin-top: 35px;
    text-align: left;
}

.history h2 {
    font-size: 18px;
    font-weight: 700;
    color: #061d33;
    margin-bottom: 10px;
}

#history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#history-list li {
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Responsive */
@media (max-width: 520px) {
    .stats {
        flex-direction: column;
        gap: 6px;
    }
}


@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.prompt-text .correct {
  color: #28a745; 
  animation: fadeIn 0.3s ease forwards;
}

.prompt-text .incorrect {
  color: #dc3545; 
  animation: shake 0.3s;
}

@keyframes fadeIn {
  from {opacity: 0.3;}
  to {opacity: 1;}
}




/* End App styles */


footer {
    padding: 15px 20px;
    color: #ffffff6e;
    font-family: sans-serif;
    text-align: center;
    font-size: 15px;
    letter-spacing: .2px;
}

footer a {
    color: #ff9901;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

footer .made-by {
    color: white;
}

footer .footer-copyright {
    font-size: 14px;
    line-height: 1.4;
    font-weight: lighter;
}