/* Seyir düzeni: bilgi sırası oyuncu → kart → bahis → konuşma. */
:root { --watch-paper:#F2EEE5; --watch-muted:#BBC3C9; }
button:focus-visible, summary:focus-visible, #watch-strip:focus-visible { outline:2px solid #F2EEE5; outline-offset:3px; }
#watch-tools { margin-left:auto; pointer-events:auto; position:relative; }
#watch-tools summary { cursor:pointer; min-height:44px; padding:0 16px; display:flex; align-items:center; font:600 14px 'IBM Plex Sans',sans-serif; color:var(--watch-paper); }
#watch-tools .ctrls { display:none; }
#watch-tools[open] .ctrls { display:flex; flex-wrap:wrap; gap:4px; position:absolute; top:48px; right:0; width:330px; max-width:calc(100vw - 16px); padding:12px; background:#171C20; border:1px solid #B99B62; box-shadow:0 12px 30px #0009; z-index:100; }
#watch-tools .ctrls button, #watch-tools #cambar button, #btn-inspect { min-width:44px; min-height:44px; height:auto; }
#watch-tools #cambar { width:100%; display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 0; }
#watch-tools #cam-seats { display:contents; }
#watch-strip { display:none; }
body.watching #topbar { height:48px; background:#171C20f5; color:#F2EEE5; overflow:visible; z-index:60; }
body.watching #topbar .hucre { font-size:14px; min-height:44px; }
body.watching #topbar .hucre:nth-child(n+4) { display:none; }
body.watching #sol-kolon, body.watching #sag-kolon, body.watching #band, body.watching #lower-third, body.watching #pot-pill, body.watching #sunum-serit { display:none!important; }
body.watching #watch-strip { display:flex; position:fixed; bottom:8px; left:12px; right:12px; gap:8px; height:164px; padding:4px 0 8px; overflow-x:auto; overflow-y:hidden; pointer-events:auto; z-index:30; scroll-snap-type:x proximity; color:#F2EEE5; font-family:'IBM Plex Sans',sans-serif; scrollbar-color:#B99B62 #171C20; }
.watch-hand { flex:1 0 210px; min-width:0; max-width:340px; padding:10px 12px; background:#171C20f5; border:1px solid #555b60; border-top:3px solid var(--player); border-radius:8px; scroll-snap-align:start; }
.watch-hand.active { border-color:#F2EEE5; background:#23362e; }
.watch-name { font-size:16px; font-weight:600; line-height:22px; white-space:nowrap; }
.watch-turn { font-size:12px; margin-right:8px; padding:2px 5px; color:#171C20; background:#F2EEE5; border-radius:3px; }
.watch-cards { display:flex; gap:5px; height:54px; align-items:center; overflow-x:auto; overflow-y:hidden; }
.watch-subhand { display:inline-flex; flex-shrink:0; align-items:center; gap:3px; padding-right:6px; border-right:1px solid #555b60; }
.watch-hand-index { font-size:14px; color:#BBC3C9; padding:0 3px; }
.watch-subhand.current .watch-hand-index { color:#171C20; background:#F2EEE5; border-radius:3px; }
.watch-card { display:inline-flex; flex-shrink:0; width:36px; height:47px; padding:2px 4px; border-radius:4px; background:#F2EEE5; color:#171C20; flex-direction:column; align-items:center; justify-content:center; font-family:Georgia,serif; line-height:22px; }
.watch-card b { font-size:24px; font-weight:700; }
.watch-card i { font-size:18px; font-style:normal; line-height:18px; }
.watch-card.red { color:#a31729; }
.watch-card.back { color:#B99B62; background:repeating-linear-gradient(45deg,#253f37,#253f37 4px,#1c3029 4px,#1c3029 8px); border:1px solid #B99B62; }
.watch-detail { font-size:20px; line-height:25px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow-x:auto; }
.watch-source { font-size:14px; color:#BBC3C9; line-height:22px; white-space:nowrap; overflow-x:auto; }
.watch-muted, .watch-empty { color:#BBC3C9; font-size:14px; }
.watch-empty { margin:auto; background:#171C20; padding:18px; border-radius:8px; }
body.watching #y-kartlar { bottom:188px!important; width:max-content; max-width:min(760px,calc(100vw - 24px)); z-index:32; pointer-events:auto; }
body.watching .y-kart { min-width:0; max-width:100%; background:#171C20f5; }
body.watching .y-kart .portre { width:84px; height:84px; flex:0 0 84px; }
body.watching .y-kart .govde { min-width:0; }
.y-kart .y-konu { color:#efdaa5; font:600 13px/1.4 sans-serif; overflow-wrap:anywhere; margin:4px 0; }
.y-kart .y-ton { display:inline-block; color:#d9eee4; background:#274139; padding:3px 7px; border-radius:4px; font:12px/1.3 sans-serif; white-space:nowrap; margin-bottom:5px; }
.y-kart .y-kaynak { color:#bec9c6; font:12px/1.4 sans-serif; overflow-wrap:anywhere; margin-top:5px; }
.y-kart .y-konu:empty,.y-kart .y-kaynak:empty { display:none; }
body.watching .y-kart .metin { color:#F2EEE5; font-size:16px; line-height:1.4; display:block; max-height:90px; overflow:auto; white-space:normal; -webkit-line-clamp:unset; }
body.watching .y-kart .kim { color:#F2EEE5; font-size:14px; }
@media(max-width:700px) {
 body.watching #topbar .marka { font-size:14px; padding:0 10px; }
 body.watching #topbar .canli { display:none; }
 body.watching #watch-strip { left:8px; right:8px; }
 .watch-hand { flex:0 0 246px; }
 body.watching #y-kartlar { max-width:calc(100vw - 16px); }
 body.watching .y-kart.soluk { display:none; }
 body.watching .y-kart { width:calc(100vw - 16px); }
 #watch-tools summary { padding:0 10px; }
}
@media(max-height:780px) and (min-width:701px) {
 body.watching #watch-strip { height:148px; }
 body.watching #y-kartlar { bottom:172px!important; }
 .watch-card b { font-size:20px; }
 .watch-cards { height:46px; }
 .watch-card { height:42px; }
}

.watch-bank { float:right; margin-left:8px; font-size:14px; color:#BBC3C9; font-weight:400; font-variant-numeric:tabular-nums; }
#watch-tools .ctrls #btn-inspect { width:110px; padding:0 10px; color:#F2EEE5; font:600 14px sans-serif; }
/* Yayın ve seyir aynı kart kaynağını kullanır; yinelenen bantlar kapatılır. */
body.watching #topbar { background:transparent; border:0; }
body.watching #topbar .hucre, body.watching #watch-tools { background:#171C20f5; }
body.watching.yayin #topbar { display:flex!important; }
body.watching.yayin #y-ust, body.watching.yayin #y-skor, body.watching.yayin #y-oyuncu, body.watching.yayin #y-aksiyon, body.watching.yayin #y-serit { display:none!important; }
body.watching.yayin #y-hikaye { bottom:310px; }
body.watching.yayin #y-cikis { bottom:180px; right:16px; left:auto; transform:none; }
/* Açılışta oyun panelleri kadraja girmez; canlıya dönüşte geri gelir. */
body.sinematik #kasa-panel { visibility: hidden !important; }
#sinematik.konu-plani .sin-baslik {
  top: auto; bottom: calc(9vh + 108px); left: 5vw; right: 5vw;
  transform: none; text-align: left; max-width: 800px;
  padding: 18px 22px; background: rgba(8,12,14,.92); border-left: 3px solid #efd18a;
}
#sinematik.konu-plani .sin-baslik h1 { font-size: clamp(20px,2.6vw,32px); letter-spacing: .06em; margin: 0; }
#sinematik.konu-plani .sin-baslik p { font-size: clamp(13px,1.3vw,17px); letter-spacing: .01em; text-transform: none; line-height: 1.5; color: #f3efe6; overflow-wrap: anywhere; }
#hazirlik { position:fixed; inset:0; z-index:99990; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 35%,#203830,#0b1211 70%); color:#f2eee5; font-family:Arial,sans-serif; }
#hazirlik.hidden { display:none; }
#hazirlik>div { width:min(480px,calc(100vw - 48px)); text-align:center; }
#hazirlik span { color:#e6c47c; letter-spacing:.18em; font-size:13px; }
#hazirlik h1 { font-size:clamp(26px,4vw,38px); margin:28px 0 16px; font-weight:500; }
#hazirlik p { min-height:48px; font-size:16px; line-height:1.5; }
#hazirlik progress { width:100%; height:8px; accent-color:#dfbd74; margin:12px 0 24px; }
#hazirlik small { display:block; font-size:14px; line-height:1.6; color:#b6c8c0; }
#hazirlik button { margin:24px; padding:12px 20px; min-height:44px; }

body.sunum #watch-strip,body.sunum #kasa-panel,body.sinematik #kasa-panel{display:none!important}body.sunum #y-kartlar{bottom:48px!important}