/* --- Guess The Price --- */
.gtp-product-display {
    text-align: center; display: flex; flex-direction: row; gap: 20px;
    align-items: center; justify-content: center; width: 100%; max-width: 1200px;
}
.gtp-left-panel {
    display: grid;
    flex: 0 1 40%;
    max-width: 450px;
    height: 360px;
    min-width: 280px;
    transition: flex-basis 0.5s ease, max-width 0.5s ease;
}
.gtp-left-panel.is-revealed {
    flex-basis: 60%;
    max-width: 720px;
}
#gtp-product-features {
    grid-area: 1 / 1;
    width: 100%; height: 100%;
    background-color: var(--bg-secondary); padding: 15px;
    border-radius: 8px; text-align: left; display: flex; flex-direction: column;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1); overflow: hidden; box-sizing: border-box;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#gtp-product-features h4 { margin-top: 0; margin-bottom: 10px; color: var(--highlight-secondary); }
#gtp-product-features-list { list-style-type: disc; padding-left: 20px; margin: 0; font-size: 0.9em; overflow-y: auto; flex-grow: 1; }
#gtp-product-features-list li { padding: 5px 0; }

#gtp-results-area {
    grid-area: 1 / 1;
    width: 100%; height: 100%;
    background-color: var(--bg-secondary); padding: 15px;
    border-radius: 8px; text-align: left; display: flex; flex-direction: column;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1); overflow: hidden; box-sizing: border-box;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.gtp-image-container {
    flex: 0 1 auto; height: 360px; display: flex; justify-content: center; align-items: center;
    background-color: transparent; border-radius: 8px; padding: 10px; box-sizing: border-box; min-width: 150px;
    max-width: calc(60% - 20px);
    transition: flex-basis 0.5s ease, max-width 0.5s ease, min-width 0.5s ease;
}
.gtp-left-panel.is-revealed ~ .gtp-image-container {
    max-width: calc(40% - 20px);
}
#gtp-product-image { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; border-radius: 4px; transition: all 0.5s ease; }

.gtp-input-area { display: flex; align-items: center; gap: 10px; }
.gtp-price-adj-btn { width: 45px; height: 45px; font-size: 1.5em; padding: 0; line-height: 45px; text-align: center; }
.gtp-price-input-wrapper { position: relative; }
.gtp-price-input-wrapper span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.2em; color: var(--text-secondary); pointer-events: none; }
#gtp-price-input { width: 200px; font-size: 1.5em; text-align: center; padding-left: 35px; }
#gtp-lock-in-button { width: 100%; max-width: 310px; }
#guess-the-price-game-view .game-view-controls { min-height: 110px; }

/* GTP Results */
#gtp-visual-results-container {
    flex-grow: 1; display: flex; flex-direction: column; justify-content: center;
    height: 100%; position: relative; width: 100%;
}
#gtp-list-view-container {
    flex-grow: 1; display: flex; flex-direction: column; text-align: left;
    height: 100%; overflow: hidden; padding: 0 5px;
}
#gtp-timeline-container { position: relative; height: 10px; margin: 100px 25px 60px 25px; width: calc(100% - 50px); flex-shrink: 0; }
#gtp-timeline-track {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: var(--border-color);
    border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
#gtp-timeline-labels {
    display: flex; justify-content: space-between; padding: 0 5px;
    font-size: 0.9em; color: var(--text-secondary); margin-top: -40px;
}

#gtp-timeline-legend {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: var(--text-secondary);
}
.gtp-legend-title {
    font-weight: bold;
    margin-right: 5px;
}
.gtp-legend-item {
    display: flex;
    align-items: center;
}
.gtp-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.8);
    font-weight: bold;
    font-size: 0.8em;
}

.gtp-timeline-player-guess {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; z-index: 10; cursor: pointer;
    transition: z-index 0s, transform 0.3s ease; width: 20px; height: 20px;
}
.gtp-timeline-player-guess::before {
    content: ''; position: absolute; width: 2px; background-color: rgba(255,255,255,0.8);
    left: 50%; transform: translateX(-50%); z-index: 1;
}
.gtp-timeline-player-guess.pos-above::before { bottom: 50%; height: 24px; }
.gtp-timeline-player-guess.pos-below::before { top: 50%; height: 24px; }
.gtp-timeline-player-guess::after {
    content: ''; display: block; width: 12px; height: 12px; background-color: #fff;
    border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: 2px solid var(--highlight-secondary); position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 3;
}
.gtp-timeline-player-guess.too-high .gtp-indicator-arrow { color: var(--error-color); transform: rotate(180deg); display: inline-block; }
.gtp-timeline-player-guess.too-low .gtp-indicator-arrow { color: var(--success-color); }
.gtp-timeline-player-guess.exact .gtp-indicator-arrow { display: none; }

.gtp-guess-bubble {
    background-color: var(--bg-tertiary); border: 2px solid var(--border-color);
    border-radius: 6px; padding: 4px 8px; min-width: max-content;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4); position: absolute; left: 50%;
    transform: translateX(-50%); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.95; pointer-events: auto; z-index: 2;
}
.gtp-timeline-player-guess.pos-above .gtp-guess-bubble { bottom: 35px; transform-origin: bottom center; }
.gtp-timeline-player-guess.pos-below .gtp-guess-bubble { top: 35px; transform-origin: top center; }
.gtp-guess-bubble.shift-left { transform: translateX(calc(-50% - var(--gtp-bubble-h-shift))); }
.gtp-guess-bubble.shift-right { transform: translateX(calc(-50% + var(--gtp-bubble-h-shift))); }

.gtp-guess-player-info {
    display: none; align-items: center; gap: 6px; margin-bottom: 2px; padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1); width: 100%; justify-content: center;
}
.gtp-guess-player-icon { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #fff; }
.gtp-guess-player-name { font-size: 0.8em; color: var(--text-secondary); }
.gtp-guess-price { font-weight: bold; font-size: 0.9em; color: #fff; display: flex; align-items: center; gap: 4px; }

.gtp-timeline-player-guess:hover, .gtp-timeline-player-guess.expanded { z-index: 100 !important; }
.gtp-timeline-player-guess:hover .gtp-guess-bubble, 
.gtp-timeline-player-guess.expanded .gtp-guess-bubble, 
.gtp-timeline-player-guess.winner .gtp-guess-bubble {
    background-color: var(--bg-secondary); border-color: var(--highlight-primary);
    transform: scale(1.1) translateX(-50%); z-index: 100; opacity: 1;
}
.gtp-timeline-player-guess:hover .gtp-guess-bubble.shift-left, 
.gtp-timeline-player-guess.expanded .gtp-guess-bubble.shift-left, 
.gtp-timeline-player-guess.winner .gtp-guess-bubble.shift-left {
    transform: scale(1.1) translateX(calc(-50% - var(--gtp-bubble-h-shift)));
}
.gtp-timeline-player-guess:hover .gtp-guess-bubble.shift-right, 
.gtp-timeline-player-guess.expanded .gtp-guess-bubble.shift-right, 
.gtp-timeline-player-guess.winner .gtp-guess-bubble.shift-right {
    transform: scale(1.1) translateX(calc(-50% + var(--gtp-bubble-h-shift)));
}
.gtp-timeline-player-guess:hover .gtp-guess-player-info, 
.gtp-timeline-player-guess.expanded .gtp-guess-player-info, 
.gtp-timeline-player-guess.winner .gtp-guess-player-info { display: flex; }
.gtp-timeline-player-guess.winner::after { border-color: var(--warning-color); background-color: var(--warning-color); box-shadow: 0 0 10px var(--warning-color); }
.gtp-timeline-player-guess.winner .gtp-guess-bubble { border-color: var(--warning-color); }
.gtp-timeline-player-guess.winner .gtp-guess-price { color: var(--warning-color); }

#gtp-timeline-correct-price-marker {
    position: absolute; top: -65px; bottom: -20px; transform: translateX(-50%);
    width: 4px; z-index: 90; pointer-events: none; transition: top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#gtp-timeline-correct-price-marker.overlap-detected { top: -130px; }
.gtp-timeline-correct-price-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--highlight-primary); box-shadow: 0 0 10px rgba(138, 111, 240, 0.8); border-radius: 2px;
}
.gtp-timeline-correct-price-label {
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0;
    background-color: var(--highlight-primary); color: #fff; padding: 4px 8px; border-radius: 4px;
    font-weight: bold; white-space: nowrap; font-size: 0.9em; display: flex; flex-direction: column;
    align-items: center; opacity: 0; transition: opacity 0.3s; box-shadow: 0 4px 8px rgba(0,0,0,0.4); z-index: 101;
}
.gtp-timeline-correct-price-label.shift-left { transform: translate(calc(-50% - var(--gtp-bubble-h-shift)), 2px); }
.gtp-timeline-correct-price-label.shift-right { transform: translate(calc(-50% + var(--gtp-bubble-h-shift)), 2px); }
#gtp-timeline-correct-price-marker.revealed .gtp-timeline-correct-price-label { opacity: 1; }
.gtp-timeline-correct-price-label span:first-child { font-size: 0.7em; opacity: 0.8; }

.gtp-footer-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gtp-results-footer {
    margin-top: auto; padding-top: 15px; border-top: 1px solid var(--muted-line);
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-shrink: 0;
}
.gtp-list-header {
    background: var(--bg-tertiary); padding: 10px 12px; border-radius: 6px;
    margin-bottom: 12px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.highlight-text { color: var(--highlight-primary); font-weight: 700; font-size: 1.1em; }
#gtp-list-scroll-area {
    overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column;
    gap: 8px; padding: 5px; scrollbar-width: thin; scrollbar-color: var(--highlight-primary) var(--bg-tertiary);
}
.gtp-list-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--bg-tertiary); border-radius: 8px; flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.gtp-list-row:hover { transform: translateY(-2px); background-color: color-mix(in srgb, var(--bg-tertiary) 90%, white); }
.gtp-list-row.is-winner { border: 1px solid var(--warning-color); }
.gtp-list-player { display: flex; align-items: center; gap: 10px; }
.gtp-list-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.2); }
.gtp-list-name { font-size: 0.95em; font-weight: 500; color: var(--text-primary); }
.gtp-list-price { font-family: var(--font-family); font-weight: 700; color: var(--highlight-secondary); font-size: 1.05em; }
.gtp-list-diff { font-size: 0.85em; color: var(--text-secondary); margin-left: 8px; font-style: italic; }

#gtp-winner-detail-container { display: flex; align-items: center; text-align: left; }
.gtp-winner-label { font-size: 0.7em; color: var(--text-secondary); text-transform: uppercase; display: block; letter-spacing: 0.5px; margin-bottom: 2px; }
.gtp-winner-content { display: flex; align-items: center; gap: 10px; }
.gtp-winner-icon { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--warning-color); object-fit: cover; }
.gtp-winner-text-group { display: flex; flex-direction: column; justify-content: center; }
.gtp-winner-name { font-weight: 700; font-size: 0.95em; line-height: 1.2; }
.gtp-winner-price { color: var(--warning-color); font-weight: 700; font-size: 0.9em; }

.small-button {
    padding: 8px 16px; font-size: 0.9em; background: var(--bg-tertiary);
    border: 1px solid var(--highlight-secondary); color: var(--text-primary);
    border-radius: 6px; cursor: pointer; transition: all 0.2s ease;
}
.small-button:hover { background: var(--highlight-primary); border-color: var(--highlight-primary); color: white; }

.icon-button {
    width: 40px; height: 40px; padding: 0; display: flex; justify-content: center; align-items: center;
}

#quiz-question-text, #gtp-product-name {
    text-align: left; font-size: 1.4em; color: var(--text-primary); width: 100%;
    display: block; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4;
}

/* Timers */
#gtp-timer-container { position: relative; width: 80px; height: 80px; }
#gtp-timer-svg { transform: rotate(-90deg); }
#gtp-timer-text {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2em; font-weight: bold; color: var(--text-primary);
}

@media (max-width: 600px) {
    .gtp-product-display { flex-direction: column; }
    .gtp-input-area { flex-wrap: wrap; justify-content: center; }
    #gtp-price-input { width: 150px; }

    #gtp-timer-container { width: 48px; height: 48px; }
    #gtp-timer-text { font-size: 1.5em; }

    .gtp-left-panel {
        width: 100%; max-width: none; flex-basis: auto; height: auto; min-height: 250px;
    }
    .gtp-left-panel.is-revealed {
        max-width: none; flex-basis: auto;
    }
    .gtp-left-panel.is-revealed ~ .gtp-image-container {
        max-width: none;
    }
    #gtp-results-area, #gtp-product-features, .gtp-image-container {
        flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; height: auto; min-height: 250px;
    }
    #gtp-visual-results-container { height: auto; min-height: 200px; padding-bottom: 20px; }
    #gtp-list-view-container { height: auto; max-height: 50vh; overflow: hidden; }
    #gtp-list-scroll-area { max-height: 50vh; }
    .gtp-results-footer { flex-direction: column; align-items: stretch; text-align: center; padding-bottom: 5px; }
    .gtp-footer-left { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 10px; }
    #gtp-winner-detail-container { justify-content: center; margin-bottom: 0; }
    #gtp-toggle-view-button { width: 100%; }

    .gtp-guess-bubble { padding: 2px 5px; border-radius: 4px; gap: 0; }
    .gtp-guess-player-info { gap: 3px; padding-bottom: 2px; margin-bottom: 1px; border-bottom-width: 0.5px; }
    .gtp-guess-player-icon { width: 16px; height: 16px; border-width: 1px; }
    .gtp-guess-player-name { font-size: 0.65em; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
    .gtp-guess-price { font-size: 0.75em; }
    .gtp-indicator-arrow { font-size: 0.7em; }

    #gtp-timeline-container { margin: 130px 25px 60px 25px; width: calc(100% - 50px); }
    #gtp-timeline-correct-price-marker { top: -65px; }
    #gtp-timeline-correct-price-marker.overlap-detected { top: -125px; }
    .gtp-timeline-correct-price-label { font-size: 0.75em; padding: 2px 6px; }
    :root { --gtp-bubble-h-shift: 25%; }
}

body.is-spectator #gtp-input-area,
body.is-spectator #gtp-lock-in-button {
    display: none !important;
}