#game { 
    background: #fff; 
    padding: 20px; 
    border-radius: 4px; 
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.06); 
    border: 1px solid #dedede; 
    width: 100%; 
    box-sizing:border-box; 
    position:relative; 
}

#game p {
    font-family: "inter", sans-serif!important; 
    font-weight: bold!important;
}

h1.anagramh1 { 
    text-align:center; 
    color:#2c3e50; 
    font-size:1.8rem; 
}

#stats { 
    display:flex; 
    justify-content:space-between; 
    margin-bottom:30px; 
    flex-wrap:wrap; 
    font-size:0.9rem; 
    font-family: "inter", sans-serif; 
    color: #7e7e7e; 
}

#stats p { font-weight: bold; }

#letters { 
    text-align:center; 
    font-size:2rem; 
    margin:20px 0; 
    cursor:pointer; 
    flex-wrap:wrap; 
}

.letter { 
    display:inline-block; 
    width:30px; 
    padding:6px 0; 
    margin:3px; 
    border-radius:6px; 
    background:#ecf0f1; 
    user-select:none; 
    transition:0.2s; 
    font-family: "inter", sans-serif; 
    font-weight: bold;
}

.letter.used { 
    background:#3498db; 
    color:white; 
    pointer-events:none; 
}

.letter.selected, .letter.hint-highlight { 
    background:#9eacce !important; 
    color:black !important; 
}

/* CONTROLS - SUBMIT EMPHASIS */
.controls {
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

/* Submit button row */
.submit-row {
    width:100%;
    display:flex;
    justify-content:center;
}

.submit-btn {
    background-color: #3e5a9d;
    color: #fff;
    font-size: 1.7rem;
    font-weight: bold;
    padding: 14px 10px;
    width: 100%;
    max-width: 320px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.submit-btn:hover {
    background-color: #2f457c;
    transform: translateY(-2px);
}

/* Utility buttons row */
.utility-row {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* prevent wrapping */
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
}

.utility-row button {
    flex: 0 0 auto; /* keep natural width */
    font-size: 1.2rem;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #3e5a9d;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease;
}

.utility-row button:hover {
    background: #506fbf;
    transform: scale(1.05);
}

.utility-row .btn-label {
    font-size: 0.75rem;
    margin-top: 4px;
    text-align: center;
}

#wordDisplay { 
    font-family: "inter", sans-serif; 
    color: #3e5a9d; 
    font-weight:bolder; 
    text-align:center; 
    font-size:1.5rem; 
    margin:10px 0; 
    min-height:30px; 
    word-break:break-word; 
}

#wordList { margin-top: 20px; }

#feedback { 
    height:24px; 
    text-align:center; 
    font-weight:bold; 
    margin-top: 10px; 
    margin-bottom:6px; 
    font-family: 'inter-bold'!important;
}

#found { 
    margin-top:15px; 
    border-top:1px solid #ccc; 
    padding-top:10px; 
    max-height:180px; 
    overflow-y:auto; 
    font-family: "inter", sans-serif;
}

.longest { 
    font-weight:bold; 
    color:#506fbf; 
    font-family: "inter", sans-serif; 
}

@keyframes shake {
    0%{transform:translateX(0);}
    25%{transform:translateX(-5px);}
    50%{transform:translateX(5px);}
    75%{transform:translateX(-5px);}
    100%{transform:translateX(0);}
}

.shake { animation:shake 0.3s; }

ul#wordList li { font-family: "inter", sans-serif!important; line-height: .5!important; }

#loadingOverlay {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(255,255,255,0.9);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
    font-size:1.2rem;
    color:#3e5a9d;
    flex-direction:column;
}

.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3e5a9d;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom:10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width:500px){ 
    #letters { font-size:1.6rem; font-weight: bolder!important; } 
    .letter { width:26px;  margin:3px; padding: 6px 3px;} 
    .submit-btn { font-size:1.4rem; padding:12px 6px; }
    .utility-row button { font-size:1rem; padding:6px 8px; }
    h1 { font-size:1.5rem; } 
}