/* SARAY — divan masası */
#screen-saray { --sy-gold: #e9c46a; --sy-gold2: #b8862b; --sy-red: #ef4444; --sy-ok: #4ade80; --sy-bg: #0d0b09; --sy-s1: rgba(24, 20, 16, .92); --sy-ln: rgba(233, 196, 106, .16); --sy-tx: #f3ece0; --sy-dim: #a89f90;
  position: fixed; inset: 0; background: var(--sy-bg); color: var(--sy-tx); font-family: "Segoe UI Variable Text", Inter, "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#screen-saray.hidden { display: none !important; }
#saray-root, #saray-root .sy { position: absolute; inset: 0; }
.sy { display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(120, 72, 24, .28), transparent 70%),
    radial-gradient(circle at 20% 0%, rgba(233, 196, 106, .07), transparent 40%),
    repeating-linear-gradient(45deg, rgba(233, 196, 106, .025) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #120f0b, #0a0907);
  transition: background .8s ease; }
#screen-saray.is-night .sy {
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(40, 52, 110, .30), transparent 70%),
    radial-gradient(circle at 80% 0%, rgba(140, 160, 255, .08), transparent 40%),
    repeating-linear-gradient(45deg, rgba(150, 170, 255, .02) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #080a14, #05060b); }

/* Üst şerit */
.sy-top { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--sy-ln); background: rgba(10, 9, 8, .72); position: relative; z-index: 5; }
.sy-brand { display: flex; align-items: center; gap: 8px; color: var(--sy-gold); letter-spacing: .22em; font-size: 13px; }
.sy-brand svg { width: 18px; height: 18px; }
.sy-code { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--sy-ln); border-radius: 10px; font-size: 12px; }
.sy-code span { color: var(--sy-dim); font-size: 10.5px; letter-spacing: .14em; }
.sy-code b { letter-spacing: .12em; }
.sy-phase { display: flex; flex-direction: column; line-height: 1.1; padding: 0 12px; border-left: 1px solid var(--sy-ln); }
.sy-phase .k { font-size: 10px; letter-spacing: .18em; color: var(--sy-gold); }
.sy-phase b { font-size: 15px; }
.sy-phase[data-ph="night"] .k { color: #a5b4fc; }
.sy-timer { display: flex; align-items: center; gap: 8px; min-width: 160px; margin-left: auto; padding: 6px 12px; border: 1px solid var(--sy-ln); border-radius: 10px; background: rgba(0, 0, 0, .25); }
.sy-timer svg { width: 15px; height: 15px; color: var(--sy-gold); }
.sy-timer b { font-variant-numeric: tabular-nums; min-width: 40px; }
.sy-timer .bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sy-timer .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sy-gold2), var(--sy-gold)); transition: width .25s linear; }
.sy-timer.low b { color: var(--sy-red); }
.sy-timer.low .bar i { background: var(--sy-red); }
.sy-timer.off { opacity: .55; }
.sy-actions { display: flex; gap: 6px; }

/* Gövde: sol sohbet, orta masa, sağ panel */
.sy-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr) 330px; gap: 14px; padding: 14px; }
.sy-hall { padding-top: 30px; position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sy-table { position: relative; width: min(100%, calc((100vh - 100px) * 1.12)); aspect-ratio: 1.12; max-height: 100%; }
.sy-rug { position: absolute; left: 21%; right: 21%; top: 22%; bottom: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(150, 40, 30, .55), rgba(80, 20, 16, .75) 60%, rgba(40, 12, 10, .9));
  border: 2px solid rgba(233, 196, 106, .35); box-shadow: 0 0 0 8px rgba(233, 196, 106, .05), inset 0 0 40px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .55); }
.sy-rug::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(233, 196, 106, .28); }
#screen-saray.is-night .sy-rug { background: radial-gradient(ellipse at 50% 45%, rgba(40, 50, 110, .55), rgba(20, 24, 60, .8) 60%, rgba(10, 12, 30, .92)); border-color: rgba(165, 180, 252, .3); }
.sy-core { position: absolute; left: 26%; right: 26%; top: 30%; bottom: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; z-index: 2; }
.sy-core .k { font-size: 11px; letter-spacing: .24em; color: var(--sy-gold); }
#screen-saray.is-night .sy-core .k { color: #a5b4fc; }
.sy-core .t { font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 3.2vw, 38px); font-weight: 600; letter-spacing: .02em; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.sy-core p { margin: 0; max-width: 32ch; color: #e7dccb; font-size: 13.5px; line-height: 1.4; }
.sy-ferman { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; max-width: 34ch; text-align: left; border-radius: 10px; background: rgba(233, 196, 106, .1); border: 1px solid rgba(233, 196, 106, .35); }
.sy-ferman svg { width: 16px; height: 16px; flex: none; color: var(--sy-gold); margin-top: 2px; }
.sy-ferman b { display: block; font-size: 12.5px; color: var(--sy-gold); }
.sy-ferman span { font-size: 12px; color: #e7dccb; }

/* Koltuklar */
.sy-seats { position: absolute; inset: 0; z-index: 3; }
.sy-seat { position: absolute; transform: translate(-50%, -50%); width: 112px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 0; background: none; color: inherit; font: inherit; cursor: default; transition: transform .18s ease, opacity .3s; }
.sy-seat .av { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 65%, #fff 10%), color-mix(in srgb, var(--c) 40%, #000 60%));
  border: 3px solid var(--c); box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .35); }
.sy-seat .av svg { width: 26px; height: 26px; }
.sy-seat .nm { max-width: 108px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.sy-seat .tg { min-height: 16px; font-size: 10.5px; letter-spacing: .04em; color: var(--sy-dim); padding: 1px 7px; border-radius: 8px; background: rgba(0, 0, 0, .45); }
.sy-seat .tg:empty { visibility: hidden; }
.sy-seat .tg.t-hain { color: #fecaca; background: rgba(127, 29, 29, .7); }
.sy-seat .tg.t-sadik { color: #fde68a; background: rgba(120, 85, 20, .55); }
.sy-seat.me .nm { color: var(--sy-gold); font-weight: 700; }
.sy-seat.me .av { box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 0 3px rgba(233, 196, 106, .7); }
.sy-seat.pickable { cursor: pointer; }
.sy-seat.pickable:hover { transform: translate(-50%, -50%) scale(1.07); }
.sy-seat.pickable:hover .av { box-shadow: 0 0 0 4px rgba(233, 196, 106, .55), 0 8px 24px rgba(0, 0, 0, .6); }
.sy-seat.sel .av { box-shadow: 0 0 0 4px var(--sy-gold), 0 0 26px rgba(233, 196, 106, .6); animation: sy-pulse 1.4s ease-in-out infinite; }
#screen-saray[data-team="hain"].is-night .sy-seat.sel .av { box-shadow: 0 0 0 4px var(--sy-red), 0 0 26px rgba(239, 68, 68, .6); }
@keyframes sy-pulse { 50% { transform: scale(1.05); } }
.sy-seat.dead { opacity: .45; filter: grayscale(.85); }
.sy-seat.dead .av { background: #1b1916; border-style: dashed; }
.sy-seat.off .av::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #6b7280; border: 2px solid #0d0b09; }
.sy-seat.win .av { box-shadow: 0 0 0 4px var(--sy-gold), 0 0 30px rgba(233, 196, 106, .55); }
.sy-seat.empty { opacity: .35; }
.sy-seat.empty .av { background: transparent; border: 2px dashed rgba(233, 196, 106, .4); color: var(--sy-gold); }
.sy-seat .m-crown { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 16px !important; height: 16px !important; color: var(--sy-gold); }
.sy-seat .m-seal { position: absolute; left: -6px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px Georgia, serif; color: #fff; background: #9f1d1d; border: 2px solid #f8d27a; }
.sy-seat .m-votes { position: absolute; right: -8px; top: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #111; background: var(--sy-gold); }
.sy-seat .m-dag { position: absolute; left: -8px; top: -6px; height: 22px; padding: 0 5px; border-radius: 11px; display: flex; align-items: center; gap: 2px; font-size: 11px; color: #fff; background: #b91c1c; }
.sy-seat .m-dag svg { width: 12px !important; height: 12px !important; }

/* Sağ panel */
.sy-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; scrollbar-width: thin; }
.sy-card, .sy-role { padding: 14px; border-radius: 14px; background: var(--sy-s1); border: 1px solid var(--sy-ln); }
.sy-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; color: var(--sy-gold); }
.sy-card h4 svg { width: 16px; height: 16px; }
.sy-card p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.sy-card .muted, .sy-side .muted { color: var(--sy-dim); font-size: 12.5px; }
.sy-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
.sy-card .btn .cnt { margin-left: 6px; opacity: .75; font-variant-numeric: tabular-nums; }
.btn.btn-gold { background: linear-gradient(180deg, #e9c46a, #b8862b); color: #1a1206; border: 0; }
.sy-role { display: flex; gap: 12px; align-items: flex-start; }
.sy-role .ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(233, 196, 106, .14); color: var(--sy-gold); }
.sy-role .ic svg { width: 24px; height: 24px; }
.sy-role .k { font-size: 10px; letter-spacing: .2em; color: var(--sy-dim); }
.sy-role b { display: block; font-family: Georgia, serif; font-size: 22px; margin: 1px 0 4px; }
.sy-role p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: #ddd3c2; }
.sy-role.t-hain { border-color: rgba(239, 68, 68, .45); background: linear-gradient(160deg, rgba(90, 16, 16, .85), rgba(24, 12, 10, .92)); }
.sy-role.t-hain .ic { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.sy-role .mates em { font-style: normal; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, #fff); }
.sy-role .deadnote { display: flex; align-items: center; gap: 6px; color: #fca5a5; }
.sy-role .deadnote svg { width: 14px; height: 14px; }
.sy-pick { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; margin-bottom: 8px; border-radius: 10px; border: 1px dashed var(--sy-ln); background: rgba(0, 0, 0, .25); }
.sy-pick.on { border-style: solid; border-color: rgba(233, 196, 106, .5); }
.sy-pick em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--sy-dim); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.sy-big { font-family: Georgia, serif; font-size: 30px; letter-spacing: .08em; margin: 4px 0 !important; }
.sy-big.ok { color: var(--sy-gold); } .sy-big.bad { color: #f87171; }
.sy-tally, .sy-res, .sy-log, .sy-bots, .sy-who ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sy-tally li, .sy-res li, .sy-bots li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); font-size: 13px; }
.sy-tally li span { margin-left: auto; font-weight: 700; color: var(--sy-gold); }
.sy-res li span { font-size: 11px; color: var(--sy-dim); min-width: 52px; }
.sy-res li em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; }
.sy-res li.bad em { color: #f87171; } .sy-res li.ok em { color: var(--sy-ok); }
.sy-bots li .icon-btn { margin-left: auto; }
.sy-who summary { cursor: pointer; font-size: 12.5px; color: var(--sy-dim); margin-top: 8px; }
.sy-who li { font-size: 12.5px; color: #ddd3c2; }
.sy-log li { font-size: 12.5px; line-height: 1.4; padding: 5px 0 5px 10px; border-left: 2px solid rgba(233, 196, 106, .25); color: #ddd3c2; }
.sy-log li span { display: inline-block; min-width: 18px; margin-right: 6px; font-size: 10.5px; color: var(--sy-dim); }
.sy-log li.k-death { border-color: #ef4444; } .sy-log li.k-ok { border-color: #4ade80; } .sy-log li.k-gold { border-color: var(--sy-gold); } .sy-log li.k-night { border-color: #818cf8; } .sy-log li.k-warn { border-color: #f59e0b; }
.sy-deck { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sy-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; background: rgba(233, 196, 106, .1); border: 1px solid rgba(233, 196, 106, .25); }
.sy-chip svg { width: 13px; height: 13px; }
.sy-chip.t-hain { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); color: #fecaca; }
.sy-row { display: flex; gap: 6px; }
.sy-go .btn { font-size: 14px; padding: 12px; }

/* Evre bandı */
.sy-flash { position: absolute; left: 0; right: 0; top: 38%; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(10, 8, 6, .92) 20%, rgba(10, 8, 6, .92) 80%, transparent); border-top: 1px solid rgba(233, 196, 106, .4); border-bottom: 1px solid rgba(233, 196, 106, .4);
  animation: sy-flash-in .45s cubic-bezier(.2, .8, .2, 1); }
.sy-flash.hidden { display: none; }
.sy-flash .k { font-size: 11px; letter-spacing: .3em; color: var(--sy-gold); }
.sy-flash b { font-family: Georgia, serif; font-size: clamp(26px, 4vw, 44px); font-weight: 600; }
.sy-flash p { margin: 0; max-width: 60ch; color: #e7dccb; font-size: 14px; }
.sy-flash.ph-night { border-color: rgba(165, 180, 252, .45); background: linear-gradient(90deg, transparent, rgba(8, 10, 24, .94) 20%, rgba(8, 10, 24, .94) 80%, transparent); }
.sy-flash.ph-night .k { color: #a5b4fc; }
.sy-flash.ph-ended.t-hain b { color: #f87171; }
.sy-flash.ph-ended.t-sadik b { color: var(--sy-gold); }
@keyframes sy-flash-in { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }

/* Yardım */
.sy-help { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, .6); padding: 16px; }
.sy-help.hidden { display: none; }
.sy-help-card { position: relative; max-width: 520px; padding: 22px 24px; border-radius: 16px; background: #15110d; border: 1px solid rgba(233, 196, 106, .3); max-height: 90vh; overflow: auto; }
.sy-help-card h3 { margin: 0 0 10px; font-family: Georgia, serif; color: var(--sy-gold); }
.sy-help-card p, .sy-help-card li { font-size: 13.5px; line-height: 1.5; color: #e7dccb; }
.sy-help-card ol { padding-left: 18px; }
.sy-help-x { position: absolute; right: 10px; top: 10px; }

/* Sohbet yuvası (Fetih sohbet paneli buraya taşınır) */
#screen-saray #semt-chat-dock { left: 14px; top: 70px; bottom: 14px; width: 360px; height: auto; }
#screen-saray #semt-chat-fab { left: 14px; bottom: 14px; }
#screen-saray:has(#semt-chat-dock.collapsed) .sy-body { grid-template-columns: 0 minmax(0, 1fr) 330px; }

@media (max-width: 1280px) {
  .sy-body { grid-template-columns: 320px minmax(0, 1fr) 290px; }
  #screen-saray #semt-chat-dock { width: 320px; }
  .sy-seat { width: 96px; } .sy-seat .av { width: 50px; height: 50px; font-size: 19px; }
}
@media (max-width: 1180px) {
  .sy-body { grid-template-columns: 290px minmax(0, 1fr) 260px; gap: 10px; padding: 10px; }
  #screen-saray #semt-chat-dock { width: 290px; left: 10px; top: 66px; bottom: 10px; }
  .sy-seat { width: 86px; } .sy-seat .av { width: 44px; height: 44px; font-size: 17px; } .sy-seat .nm { font-size: 12px; max-width: 84px; }
  .sy-core p { font-size: 12px; }
}
@media (max-width: 960px) {
  .sy-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow-y: auto; padding-bottom: 80px; }
  .sy-chatcol { display: none; }
  .sy-table { width: min(100%, 560px); }
  .sy-side { overflow: visible; }
  #screen-saray #semt-chat-dock { top: auto; left: 8px; right: 8px; width: auto; bottom: 8px; height: 46vh; }
  #screen-saray #semt-chat-fab { bottom: 12px; left: 12px; }
  #screen-saray:has(#semt-chat-dock.collapsed) .sy-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sy-top { gap: 8px; padding: 0 10px; }
  .sy-code, .sy-brand b { display: none; }
  .sy-timer { min-width: 0; flex: 1; }
  .sy-seat { width: 74px; } .sy-seat .av { width: 40px; height: 40px; font-size: 16px; border-width: 2px; }
  .sy-seat .nm { font-size: 11px; max-width: 72px; } .sy-seat .tg { font-size: 9.5px; }
  .sy-core .t { font-size: 20px; } .sy-core p { font-size: 11.5px; }
  .sy-ferman { display: none; }
}