.frame-load { padding:70px 0; color:#aec2d4; text-align:center; }
.frame-game { width:min(100%,860px); margin:0 auto; }
.frame-game[hidden],#suggestions[hidden],#playAgainBtn[hidden] { display:none; }
.frame-meta { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; color:#85c8fb; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.frame-meta span:last-child { color:#ffad73; }
.frame-view { overflow:hidden; aspect-ratio:16/9; border:1px solid #476687; border-radius:12px; background:#0d1626; box-shadow:0 18px 40px rgba(0,0,0,.28); }
.frame-view img { display:block; width:100%; height:100%; object-fit:cover; }
.frame-thumbs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:12px 0 26px; }
.frame-thumb { position:relative; overflow:hidden; aspect-ratio:16/9; border:1px solid #4b6886; border-radius:8px; background:#16263c; color:#8fa8bd; font-size:15px; font-weight:700; }
.frame-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.frame-thumb span { position:absolute; left:5px; bottom:3px; padding:0 5px; border-radius:4px; background:rgba(8,14,26,.75); color:#fff; font-size:11px; }
.frame-thumb.is-locked { cursor:default; }
.frame-thumb.is-current { border-color:#ff9b5a; box-shadow:0 0 0 1px #ff9b5a; }
.frame-thumb:not(.is-locked):hover { border-color:#8acaff; }
.frame-thumb:focus-visible { outline:2px solid #88caff; outline-offset:2px; }
.frame-search { position:relative; max-width:460px; margin:0 auto 22px; }
.frame-search input { width:100%; padding:12px 14px; border:1px solid #4b6886; border-radius:10px; background:var(--film-surface); color:#fff; }
.frame-search input:focus { outline:2px solid #ffad73; outline-offset:0; }
.frame-search input:disabled { opacity:.6; }
#suggestions { position:absolute; z-index:20; top:100%; left:0; right:0; max-height:280px; margin-top:4px; overflow-y:auto; border:1px solid #4b6886; border-radius:10px; background:var(--film-surface); box-shadow:0 14px 30px rgba(0,0,0,.35); text-align:left; }
.suggestion { display:flex; justify-content:space-between; gap:10px; width:100%; padding:10px 14px; border:0; background:none; color:#e8f0f6; font-size:14px; text-align:left; cursor:pointer; }
.suggestion small { color:#8fa8bd; }
.suggestion:hover,.suggestion.is-active { background:#31587d; color:#fff; }
@media(max-width:650px) { .frame-thumbs { gap:5px; } .frame-thumb { font-size:12px; } .frame-thumb span { display:none; } }