:root{--bg:#0f1115;--card:#181b22;--fg:#e8eaf0;--mut:#8b93a7;--acc:#3b82f6;--live:#ef4444}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,sans-serif}
header,main{max-width:760px;margin:0 auto;padding:12px 16px}
h1{font-size:1.3rem;margin:4px 0 12px}
.row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
button,select,input{background:var(--card);color:var(--fg);border:1px solid #2a2f3a;border-radius:8px;padding:7px 11px;font:inherit}
button{cursor:pointer}
button.on{background:var(--acc);border-color:var(--acc)}
#q{flex:1;min-width:180px}
ul{list-style:none;margin:0;padding:0}
li{background:var(--card);border-radius:10px;padding:10px 12px;margin-bottom:8px;display:grid;grid-template-columns:56px 1fr;gap:2px 12px;content-visibility:auto;contain-intrinsic-size:auto 70px}
.t{font-weight:600;grid-row:span 3}
.t small{display:block;color:var(--mut);font-weight:400}
.lg{color:var(--mut);font-size:.8rem}
.ch{color:var(--acc);font-size:.85rem}
.live{color:var(--live);font-weight:700}
.fin{opacity:.55}
#status{color:var(--mut);text-align:center}

/* ---- Açılış animasyonu (yalnızca CSS, bağımlılık yok) ---- */
html.intro-on{overflow:hidden}
#intro{position:fixed;inset:0;z-index:99;background:radial-gradient(circle at 50% 40%,#1b2230,#0a0c10);display:grid;place-items:center;overflow:hidden;transition:opacity .6s}
#intro.out{opacity:0;pointer-events:none}
#skip{position:absolute;top:14px;right:14px;z-index:3;font-size:.8rem;opacity:.7}
#intro .room{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;animation:room 5s both}
@keyframes room{0%{opacity:0}6%{opacity:1}92%{opacity:1}100%{opacity:0}}
.tvbox{width:min(80vw,460px);aspect-ratio:16/9;border:8px solid #2c3445;border-radius:14px;background:#0d111a;box-shadow:0 0 40px #3b82f633;overflow:hidden;position:relative;animation:tvshake .5s 3.1s both}
@keyframes tvshake{0%,100%{transform:none}25%{transform:translateX(-8px) rotate(-1.5deg)}75%{transform:translateX(8px) rotate(1.5deg)}}
.screen{position:absolute;inset:0}
.app,.match{position:absolute;inset:0}
.app{padding:4% 5%;display:grid;align-content:start;gap:4%;animation:out .3s 2.3s both}
.app b{font-size:min(5.5vw,1.5rem);color:#7db4ff;letter-spacing:.04em}
.r{margin:0;display:flex;justify-content:space-between;gap:8px;padding:3% 4%;border-radius:8px;background:#1a2132;font-size:min(3.4vw,.95rem);color:#c9d1e3}
.r em{font-style:normal;color:#ffd84a;font-weight:700}
.r1{animation:pick .5s 1.3s both}
@keyframes pick{to{background:#2563eb;color:#fff;transform:scale(1.04)}}
@keyframes out{to{opacity:0;visibility:hidden}}
.match{background:repeating-linear-gradient(90deg,#1d7a3a 0 12%,#238c43 12% 24%);opacity:0;animation:in .3s 2.5s both}
.match:before{content:"";position:absolute;inset:8%;border:2px solid #ffffffaa;border-radius:4px}
@keyframes in{to{opacity:1}}
.ballm{position:absolute;left:10%;top:50%;font-size:min(8vw,2.2rem);animation:ball 1s 2.7s ease-in both}
@keyframes ball{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(clamp(180px,48vw,330px),-26px) rotate(720deg)}}
.score{position:absolute;right:8%;top:8%;font-weight:900;font-size:min(6vw,1.6rem);color:#fff;text-shadow:0 2px 0 #000;opacity:0;animation:in .2s 3.5s both}
.guy{position:relative;width:200px;height:150px;animation:jump .45s 3.4s 4 both}
@keyframes jump{0%,100%{transform:none}50%{transform:translateY(-34px)}}
.couch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:130px;line-height:1}
.face{position:absolute;left:50%;top:6px;margin-left:-30px;font-size:60px;line-height:1;z-index:1}
.f1{animation:out .01s 2.5s both}
.f2{opacity:0;animation:in .01s 2.5s both,wob .3s 3.4s 6 alternate both}
@keyframes wob{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.pc{position:absolute;left:12%;top:70px;font-size:34px;opacity:0;animation:pop 1.2s 3.4s both}
@keyframes pop{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translate(-50px,-120px) rotate(-200deg)}}
.bubble{position:absolute;left:62%;top:-4px;white-space:nowrap;padding:5px 12px;border-radius:14px;background:#fff;color:#111;font-weight:800;font-size:.9rem;z-index:2;opacity:0}
.b1{animation:in .2s .5s both,out .2s 2.3s both}
.b2{background:#ffd84a;font-size:1.15rem;animation:in .15s 3.4s both,bump .35s 3.4s 5 alternate both}
@keyframes bump{to{transform:scale(1.2) rotate(4deg)}}
.cf{position:absolute;top:-12%;font-size:2rem;opacity:0;animation:fall 1.6s 3.4s both}
.c1{left:30%}.c2{left:45%;animation-delay:3.55s}.c3{left:60%;animation-delay:3.7s}.c4{left:72%;animation-delay:3.85s}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(80vh) rotate(360deg)}}
/* logo */
#intro .logo{position:absolute;inset:0;display:grid;place-content:center;gap:.4em;opacity:0;animation:logo .4s 5s both}
@keyframes logo{to{opacity:1}}
.name{display:flex;font-size:min(14vw,5.5rem);font-weight:900;letter-spacing:.02em}
.name i{font-style:normal;display:inline-block;opacity:0;animation:letter .5s both;background:linear-gradient(180deg,#fff,#7db4ff);-webkit-background-clip:text;background-clip:text;color:transparent;animation-delay:calc(5s + var(--i,0)*.08s)}
.name i:nth-child(1){--i:0}.name i:nth-child(2){--i:1}.name i:nth-child(3){--i:2}.name i:nth-child(4){--i:3}.name i:nth-child(5){--i:4}
.name i:nth-child(6){--i:5;filter:drop-shadow(0 0 14px #3b82f6)}.name i:nth-child(7){--i:6}.name i:nth-child(8){--i:7}.name i:nth-child(9){--i:8}.name i:nth-child(10){--i:9}
@keyframes letter{0%{opacity:0;transform:translateY(-60px) scale(.4) rotate(-20deg)}70%{opacity:1;transform:translateY(8px) scale(1.1)}100%{opacity:1;transform:none}}
.by{text-align:center;font-size:min(6vw,1.6rem);letter-spacing:.5em;color:#8b93a7;opacity:0;animation:by 1s 6.5s both}
@keyframes by{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}