body { 
    background: transparent; 
    font-family: var(--font-sans, system-ui); 
    color: #1a2438; 
}
#game-window {
    width: 95%;  
    max-width: 1400px; 
    min-width: 800px; 
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}
#settings-section {
    display: flex;
    border: 1px solid #00000014;;
    background: #f8fafc;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 2001;
}
#game-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
#game-name {
    font-size: 15px;
    font-weight: bold;
}
#game-subtitle {
    font-size: 12px;
    color: #666;
}
#options {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    z-index: 2001;
}
#difficulty-select {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 6px;
    user-select: none;
    position: relative;
    right: 20px; 
}
.difficulty-option:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.difficulty-option:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.difficulty-option {
    padding: 6px 14px;
    font-size: 0.95em;
    color: #555;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.difficulty-option:not(:last-child) {
    border-right: 1px solid #ccc;
}
.difficulty-option:hover:not(.active) {
    background: #f0f0f0;
}
.difficulty-option.active {
    background: rgba(0,0,0,0.06);
}
#difficulty-select.locked {
    opacity: 0.5;
}
#difficulty-select.locked .difficulty-option {
    cursor: not-allowed;
    pointer-events: none;
}
#difficulty-select.locked::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: #1e293b;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 2001;
    box-shadow: 0 4px 6px #00000026;
}
#difficulty-select.locked::before {
    content: '';
    position: absolute;
    top: 115%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    border: 5px solid transparent;
    border-bottom-color: #1e293b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 2001;
}
#difficulty-select.locked:hover::after,
#difficulty-select.locked:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#capitals-switch {
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 20px;
    right: 10px;
}
#capitals-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
#capitals-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #0000001f;
    border: 1px solid #94a3b8;
    transition: .4s;
    border-radius: 34px;
}
#capitals-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 3px;
    background-color: #5b6b82;
    transition: .4s;
    border-radius: 9px;
}
input:checked + #capitals-slider {
    background-color: #4ade8021;
    border: 1px solid #16a34a59;
}
input:checked + #capitals-slider:before {
    transform: translateX(18px);
    background-color: #16a34a;
}
#capitals-label {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
#start-game-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 0px 14px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}
#start-game-button:hover {
    background-color: #50b655ed;
}
#start-game-button.clicked {
    background-color: #888888;
}
#start-game-button.clicked:hover {
    background-color: #999999;
}
#new-game-button {
    background-color: #0000000d;
    color: #5b6b82;
    border: 1px solid #0000001f;
    padding: 0px 14px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}
#new-game-button:hover {
    background-color: #00000009;
}
#guess-section {
    border: 1px solid #00000014;;
    border-top: 0px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fbfcfe;
    position: relative;
    width: 256px;
    height: 642px;
    z-index: 10;
}
#start-city-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #94a3b8;
    margin-bottom: 5px;
}
#start-city {
    font-size: 17px;
    font-weight: 500;
    color: #1a2438;
}
#compass-box {
    background: #16a34a1a;
    border: 1px solid #16a34a1a;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
#compass {
    width: 68px;
    height: 68px;
    margin: 0 auto 10px;
    position: relative;
}
#compass-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid #16a34a59;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#compass-circle::before {
    content: '';
    position: absolute;
    width: 58%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #16a34a);
    transform-origin: right center;
    transform: rotate(var(--deg,-45deg));
    right: 50%;
}
.card {
    position: absolute;
    font-size: 9px;
    color: #94a3b8;
    font-weight: 500;
}
.card.n {
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
}
.card.e {
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
}
.card.s {
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}
.card.w {
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
}
.c-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    position: relative;
    z-index: 1;
}
#vec-dir {
    font-size: 13px;
    color: #16a34a;
    font-weight: 500;
}
#vec-dist {
    font-size: 11px;
    color: #5b6b82;
    margin-top: 3px;
}
#stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
stats-item {
    background: #00000008;
    border: 0.5px solid #0000000f;
    border-radius: 6px;
    padding: 9px 10px;
}
.guess-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #94a3b8; 
    margin-bottom: 5px;
}
.attempts-number {
    font-size: 20px;
    font-weight: 500;
    color: #1a2438;
}
.attempts-number.green {  
    color: #16a34a;
}
#guessed-number {
    font-size: 20px;
    font-weight: 500;
    color: #1a2438;
}
#pips {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;   
}
.pip {
    width: 16px;
    height: 5px;
    border-radius: 3px;
    background: #00000014;
    transition: background 0.2s;
}
.pip.on {
    background: #16a34a;
}
#guess-input {
    margin-top: auto;
}
.input-field {
    width: 90%;
    background: #ffffff;
    border: 0.5px solid #00000029;
    color: #1a2438;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
}
.input-field:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f8fafc;
}
.autocomplete-container {
    position: relative;
    width: 300px;
}
.dropdown-content {
    position: absolute;
    background-color: white;
    border: 0.5px solid #5b6b823a;
    border-top: 0px;
    padding: 1px;
    border-radius: 6px;
    width: 212px;
    font-size: 14px;
    max-height: 97px;
    overflow-y: auto;
    z-index: 2000;
}
.dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
}
.dropdown-item:hover {
    background-color: #f0f0f0;
}
.hidden {
    display: none;
}
.check-button {
    width: 100%;
    margin-top: 8px;
    background: rgba(22,163,74,0.10);
    border: 1px solid rgba(22,163,74,0.35);
    color: #16a34a;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.check-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
#map {
    border-right: 1px solid #00000000;
    border-bottom: 1px solid #00000000;
    height: 678px;
    flex-grow: 1;
    width: 100%;
}
#main-game-area {
    width: 100%;
    height: 100%; 
    display: flex;
    gap: 0px;
    margin-top: 0px;
    align-items: flex-start;
}
#bottom-info {
    border: 1px solid #00000014;
    border-top: 0px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    position: relative;
    z-index: 1;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.message-field {
    display: flex;
    gap: 5px;
}
.score-field {
    font-size: 18px;
    font-weight: 500;
    color: #1a2438;
    display: flex;
    gap: 5px;
}
.score-points {
    color: #16a34a; 
}
.message {
    font-size: 14px;
    color: #5b6b82;
}
.message-correct {
    position: relative;
    font-size: 14px;
    color: #16a34a; 
}
.message-error {
    font-size: 14px;
    color: #fa5050; 
}
#result-card {
    background: #ffffff;
    border: 0.5px solid #0000001a;
    border-radius: 14px;
    padding: 28px 32px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;  
    gap: 16px;
    text-align: center;
    box-shadow: 0 10px 30px #00000026;
}
.back-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    background: #ffffff4d; 
    backdrop-filter: blur(4px); 
}
#result-icon {
    font-size: 36px;
    line-height: 1;
}
.result-status {
    font-size: 18px;
    font-weight: 500;
}
.result-answer {
    font-size: 12px;
    color: #8b9ab0;
    line-height: 1.6;
}
.result-divider {
    width: 100%;
    height: 1px;
    background: #d7d7d75f;
}
.result-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}
.result-next {
    width: 100%;
    background: #4CAF50;
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.result-next:hover {
    background-color: #50b655ed;
}
.popup-box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px #00000033;
}
.result-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
}
.result-stat-val {
    font-size: 20px;
    font-weight: 500;
    color: #1a2438;
}
.result-stat-val.green {
    color: #16a34a;
}
#game-start-field {
    font-size: 14px;
    color: #5b6b82;
}
.point {
    position: absolute;
    z-index: 4;
    transform: translate(-50%, 50%);
}
.m-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    border: 2.5px solid white;
    position: relative;
    z-index: 2;
}
.pulse {
    position: absolute;
    width: 12px; 
    height: 12px;
    border-radius: 50%;
    background: #4ade8066;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
.pulse2 {
    animation-delay: 0.65s;
}
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5); 
        opacity: 0; 
    }
}