[hidden]{display:none !important}
:root{--bg:#0b0d14;--surf:#171b2b;--surf2:#232942;--gold:#f0b44c;--txt:#eef0f8;--dim:#9aa1bd}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;overflow:hidden}
#top{display:flex;align-items:center;gap:14px;padding:22px 48px 8px}
.brand-logo{width:44px;height:44px;border-radius:10px}
.brand{font-size:24px;font-weight:700;color:var(--gold);margin-right:14px}
#tabs,#chips{display:flex;gap:10px;overflow:hidden;white-space:nowrap}
#chips{padding:6px 48px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.f{outline:none}
.chip{padding:8px 20px;border-radius:999px;background:var(--surf);font-size:18px;flex:none;border:3px solid transparent}
.chip.on{background:#3a3050;color:var(--gold)}
.chip.focus,.tile.focus{border-color:var(--gold);background:var(--surf2);transform:scale(1.05)}
#hint{padding:2px 48px;color:var(--dim);font-size:14px}
#grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 14px;padding:14px 48px 40px;height:calc(100vh - 150px);overflow-y:auto;scrollbar-width:none;align-content:start}
.tile{border:3px solid transparent;border-radius:12px;background:var(--surf);padding:0;transition:transform .12s}
.logo{aspect-ratio:16/10;border-radius:9px 9px 0 0;background:#f1f3f8;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.logo img{max-width:80%;max-height:80%;object-fit:contain}
.logo .nm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:18px;padding:8px;color:#fff}
.num{position:absolute;top:6px;left:6px;background:#0b0d14cc;color:var(--gold);font-size:12px;font-weight:700;padding:2px 7px;border-radius:6px}
.fav{position:absolute;top:6px;right:6px;background:#0b0d14cc;color:var(--gold);font-size:14px;padding:1px 7px;border-radius:6px}
.cap{padding:6px 8px 8px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap small{display:block;color:var(--dim);font-weight:400;font-size:11px}
#msg{position:fixed;inset:120px 0 0 0;pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:22px;text-align:center;padding:60px}
#player{position:fixed;inset:0;background:#000;z-index:10}
#video{width:100%;height:100%;background:#000}
#banner{position:absolute;left:48px;bottom:48px;display:flex;gap:16px;align-items:center;background:#0b0d14d9;padding:12px 20px;border-radius:12px;transition:opacity .4s}
#banner img{width:72px;height:48px;object-fit:contain;background:#f1f3f8;border-radius:8px}
#bName{font-size:24px;font-weight:700}#bSub{color:var(--dim);font-size:14px}
#spin,#perr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0b0d14e6;padding:14px 26px;border-radius:12px;font-size:20px;text-align:center;max-width:70%}
@media (max-width:1100px){#grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){#grid{grid-template-columns:repeat(2,1fr);padding:10px 16px}#top,#chips,#hint{padding-left:16px;padding-right:16px}}

#ctrl{position:absolute;top:24px;left:0;right:0;display:flex;justify-content:center;gap:12px;direction:ltr;transition:opacity .3s;z-index:2;opacity:0;pointer-events:none}
#ctrl.show{opacity:1;pointer-events:auto}
#ctrl button.kf{border-color:var(--gold);color:var(--gold);transform:scale(1.08)}
#ctrl button{font:inherit;font-size:20px;color:#fff;background:#0b0d14d9;border:2px solid #ffffff44;border-radius:12px;padding:12px 22px;cursor:pointer}
#ctrl button:hover,#ctrl button:focus{border-color:var(--gold);color:var(--gold)}