*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#12121a;--surface:#1c1c28;--surface2:#242430;
    --border:#343440;--text:#f4f4f9;--text2:#8c8c9e;
    --text3:#5c5c72;--green:#22c55e;--green-bg:#1a3326;
    --yellow:#eab308;--yellow-bg:#332d1a;
    --accent:#6366f1;--accent-hover:#5558e6;
    --r:6px;--r-sm:4px;
    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
}
html{font-size:15px}
body{
    font-family:var(--font);background:var(--bg);color:var(--text);
    min-height:100vh;display:flex;justify-content:center;
    -webkit-font-smoothing:antialiased;
}
.app{width:100%;max-width:800px;padding:2rem 1.25rem 4rem;display:flex;flex-direction:column;gap:1.5rem}
.header{text-align:center;padding-top:1.5rem}
.title{font-size:2rem;font-weight:800;letter-spacing:-0.02em;color:#fff}
.subtitle{font-size:.88rem;color:var(--text2);margin-top:.35rem}
.input-area{display:flex;gap:.5rem;align-items:flex-start}
.autocomplete-wrapper{position:relative;flex:1}
.player-input{
    width:100%;padding:.65rem .85rem;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--r);
    color:var(--text);font-size:.92rem;font-family:inherit;
    outline:0;transition:border-color .15s;
}
.player-input:focus{border-color:var(--accent)}
.player-input::placeholder{color:var(--text3)}
.player-input:disabled{opacity:.4}
.autocomplete-dropdown{
    position:absolute;top:calc(100% + 2px);left:0;right:0;
    background:var(--surface2);border:1px solid var(--border);
    border-top:0;border-radius:0 0 var(--r) var(--r);
    max-height:240px;overflow-y:auto;z-index:100;display:none;
}
.autocomplete-dropdown.visible{display:block}
.autocomplete-item{
    padding:.6rem .85rem;cursor:pointer;display:flex;
    justify-content:space-between;align-items:center;
    transition:background .1s;border-bottom:1px solid rgba(255,255,255,.03);
}
.autocomplete-item:hover,.autocomplete-item.active{background:var(--surface)}
.autocomplete-item .pn{font-weight:600;font-size:.9rem}
.autocomplete-item .pt{font-size:.78rem;color:var(--text2)}
.guess-btn{
    padding:.65rem 1.3rem;background:var(--accent);color:#fff;
    border:0;border-radius:var(--r);font-size:.88rem;font-weight:600;
    font-family:inherit;cursor:pointer;white-space:nowrap;
    transition:background .15s;min-width:76px;
}
.guess-btn:disabled{opacity:.3;cursor:not-allowed}
.guess-btn:not(:disabled):hover{background:var(--accent-hover)}
.guess-btn:not(:disabled):active{opacity:.85}
.guess-btn-loader{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.attempts-counter{font-size:.82rem;color:var(--text2);white-space:nowrap;padding:.65rem 0;min-width:3rem;text-align:center}
.legend{display:flex;gap:1.25rem;font-size:.8rem;font-weight:500;margin: 10px;}
.legend-item{display:flex;align-items:center;gap:.3rem}
.legend-item::before{content:'';display:inline-block;width:10px;height:10px;border-radius:2px}
.legend-item.correct::before{background:var(--green)}
.legend-item.close::before{background:var(--yellow)}
.legend-item.wrong::before{background:var(--text3)}
.legend-item.correct{color:var(--green)}.legend-item.close{color:var(--yellow)}.legend-item.wrong{color:var(--text3)}
.guess-table-wrap{overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none}
.guess-table-wrap::-webkit-scrollbar{display:none}
@keyframes oppBlink{0%,100%{background:transparent}50%{background:rgba(99,102,241,.06)}}
.opp-row{animation:oppBlink 1.2s ease-in-out infinite}
.timer-display{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
.timer-display.warning{color:var(--yellow);animation:pulse 1s infinite}
.timer-display.danger{color:#ef4444;animation:pulse .5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.guess-table{width:100%;border-collapse:collapse;font-size:.86rem}
.guess-table th{
    text-align:left;padding:.5rem .6rem;color:var(--text3);
    font-weight:500;font-size:.74rem;text-transform:uppercase;
    letter-spacing:.06em;white-space:nowrap;border-bottom:1px solid var(--border);
}
.guess-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);white-space:nowrap}
.guess-table tbody tr{transition:background .1s}
.guess-table tbody tr:hover{background:rgba(255,255,255,.02)}
tr.reveal-row{animation:slideUp .35s ease}@keyframes slideUp{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.cell-correct{background:var(--green-bg);color:var(--green);border-radius:3px;padding:.18rem .4rem;font-weight:600;display:inline-block;animation:popIn .25s ease}
.cell-close{background:var(--yellow-bg);color:var(--yellow);border-radius:3px;padding:.18rem .4rem;font-weight:600;display:inline-block;animation:popIn .25s ease}
.cell-wrong{color:var(--text2);padding:.18rem .4rem;display:inline-block;animation:fadeIn .2s ease}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.arrow-up{color:var(--green);margin-left:.2rem;font-size:.85em}.arrow-down{color:var(--green);margin-left:.2rem;font-size:.85em}
.game-over-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:200}
.game-over-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2rem 2.5rem;text-align:center;max-width:380px;width:92%;animation:cardPop .3s ease}
@keyframes cardPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.game-over-emoji{font-size:2.8rem;margin-bottom:.6rem}
.game-over-title{font-size:1.35rem;font-weight:700;margin-bottom:.8rem;color:#fff}
.game-over-target{font-size:1rem;color:var(--text2);margin-bottom:1.5rem;line-height:1.7;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.game-over-target strong{color:var(--accent);font-weight:700}
.play-again-btn{padding:.6rem 1.8rem;background:var(--accent);color:#fff;border:0;border-radius:var(--r);font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}
.play-again-btn:hover{background:var(--accent-hover)}
.player-card{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);flex-shrink:0;user-select:none;position:relative;overflow:hidden}
.player-card-initials{color:#fff;font-weight:700;position:relative;z-index:1}
.team-badge{display:inline-block;padding:1px 5px;border-radius:3px;color:#fff;font-weight:600;letter-spacing:.03em;vertical-align:middle;margin-right:3px;line-height:1.35}
.flag-img{height:14px;width:auto;vertical-align:middle;border-radius:1px}
.team-logo-img{vertical-align:middle;margin-right:4px;border-radius:2px}
.player-photo-img{vertical-align:middle;border-radius:6px;object-fit:cover}
.photo-fallback{display:inline-flex!important;align-items:center;justify-content:center;border-radius:6px;color:#fff;font-weight:700;background:var(--surface2)}
.footer{text-align:center;font-size:.72rem;color:var(--text3);padding-top:.75rem}
@media(max-width:600px){
    .app{padding:1rem .75rem 3rem}.title{font-size:1.5rem}
    .input-area{flex-wrap:wrap}.game-over-card{padding:1.5rem}
    .guess-table th,.guess-table td{padding:.4rem .4rem;font-size:.78rem}
}