@import url('variables.css');

.game-shell { padding: var(--space-6) 0 var(--space-8); }
.game-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.game-header__theme { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.game-header__theme-icon { font-size: 1.5rem; }
.game-stats { display: flex; gap: var(--space-4); font-size: 0.85rem; color: var(--text-secondary); }
.game-stats b { color: var(--text-primary); }

.guess-form { position: relative; margin-bottom: var(--space-5); }
.guess-input-wrap { display: flex; gap: var(--space-2); }
.guess-input {
    flex: 1; padding: var(--space-4) var(--space-5); font-size: 1.05rem; border-radius: var(--radius-pill);
    border: 2px solid var(--border-glass); background: var(--bg-elevated); color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.guess-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(99,102,241,0.15); }
.guess-input.is-shake { animation: shake 400ms; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

.autocomplete-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
    background: var(--bg-glass-strong); backdrop-filter: blur(20px); border: 1px solid var(--border-glass);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; list-style: none; margin: 0; padding: var(--space-2);
}
.autocomplete-list li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; }
.autocomplete-list li:hover, .autocomplete-list li.is-active { background: var(--bg-glass); }

.guess-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.guess-row {
    display: grid; grid-template-columns: 48px 1fr 90px 120px; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--bg-elevated); border: 1px solid var(--border-glass);
    animation: guess-in var(--transition-slow);
}
@keyframes guess-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.guess-row--latest { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.guess-row--win { border-color: var(--heat-win); background: linear-gradient(90deg, rgba(16,185,129,0.12), transparent); }

.guess-rank { font-weight: 800; font-family: var(--font-display); text-align: center; font-size: 0.95rem; }
.guess-word { font-weight: 700; text-transform: capitalize; }
.guess-time { font-size: 0.78rem; color: var(--text-muted); text-align: right; }

.heat-bar { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--border-glass); overflow: hidden; }
.heat-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); transition: width var(--transition-slow); }

/* Rank -> heat color bands are applied inline via JS custom property --heat */
.guess-row[data-heat="cold"] .guess-rank { color: var(--heat-cold); }
.guess-row[data-heat="cool"] .guess-rank { color: var(--heat-cool); }
.guess-row[data-heat="warm"] .guess-rank { color: var(--heat-warm); }
.guess-row[data-heat="hot"] .guess-rank { color: var(--heat-hot); }
.guess-row[data-heat="win"] .guess-rank { color: var(--heat-win); }

.hint-panel { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hint-chip {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill); background: var(--bg-glass); border: 1px solid var(--border-glass);
    font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: transform var(--transition-fast);
}
.hint-chip:hover { transform: translateY(-2px); }
.hint-chip .coin-cost { color: #F59E0B; }
.hint-chip:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.hint-chip.is-used { opacity: 0.7; border-color: var(--heat-win); cursor: default; }
.hint-reveal {
    margin: -8px 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--bg-glass); border: 1px solid var(--border-glass); font-size: 0.88rem;
}

.win-modal-backdrop { position: fixed; inset: 0; background: rgba(10,10,20,0.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; }
.win-modal { max-width: 420px; width: 92%; padding: var(--space-7) var(--space-6); text-align: center; }
.win-modal h2 { font-size: 2rem; background: var(--gradient-success); -webkit-background-clip: text; background-clip: text; color: transparent; }
.win-modal__stats { display: flex; justify-content: center; gap: var(--space-6); margin: var(--space-5) 0; }
.win-modal__stat b { display: block; font-size: 1.5rem; font-family: var(--font-display); }
.win-modal__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 250; }

.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted); }