.caiche-title h1{margin-bottom:10px; }
.caiche-title span{font-size: 14px; color: #ff0000;}
.guess-car-logo {max-width: 790px; margin: 0 auto; padding-bottom: 15px;  font-family: Arial, sans-serif;}
.current-title {text-align: center; color: #333; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee;}
.logo-container {display: flex; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch;}
.logo-item {flex: 0 0 25%;min-width: 0;text-align: center;cursor: pointer;padding: 0 5px;box-sizing: border-box;}

.logo-img-wrapper {position: relative;border: 2px solid #ddd;border-radius: 3px;padding: 10px;transition: all 0.3s;height: 0;padding-bottom: 75%;overflow: hidden;box-sizing: border-box;}

.logo-img-wrapper img {position: absolute;top: 50%;left: 50%;width: 70%;height: auto;transform: translate(-50%, -50%);}
.result-icon {position: absolute;top: 0;left: 0;width: 100%;height: 70%;background-size: 80% 80%;background-position: center;background-repeat: no-repeat; opacity: 0;transition: opacity 0.3s;}
.result-text {position: absolute;bottom: 10px;left: 0;width: 100%;text-align: center;font-size: 18px;font-weight: bold;opacity: 0;transition: opacity 0.3s;}

.logo-item.correct .logo-img-wrapper {border-color: #4CAF50;}
.logo-item.correct .result-icon {opacity: 1; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234CAF50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');}
.logo-item.correct .result-text {opacity: 1; color: #4CAF50;}
.logo-item.wrong .logo-img-wrapper {border-color: #F44336;}
.logo-item.wrong .result-icon {opacity: 1; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F44336"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');}
.logo-item.wrong .result-text {opacity: 1; color: #F44336;}
.logo-info {margin-top: 5px;}
.logo-title {display: block; color: #333; text-decoration: none; font-size: 14px; margin-bottom: 3px;}
.detail-link {display: block; color: #999999 !important; text-decoration: none; font-size: 12px;}
.guess-actions {text-align: center; margin-top: 20px;}
.guess-again {padding: 10px 20px;margin-bottom:22px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; display: none;text-decoration: none;}
.time-result {color: #4CAF50; font-weight: bold;}
.guess-actions a:hover{color:#e5ff00; }
@media (max-width: 600px) {
    .logo-item {flex: 0 0 25%; padding: 0 3px;}
    .result-text {font-size: 16px;}
    .logo-img-wrapper img {position: absolute;top: 50%;left: 50%;width:95%;height: auto;transform: translate(-50%, -50%);}
}